/* Kaulike Productions — service pages (/restaurants, /events, /headshots, /aerial).
   Loaded AFTER site.css, which supplies the design tokens, the pricing-card
   system (.tiers/.tier/.t-*), .btn, .section and the header. Only what those
   pages add lives here.

   Rhythm matches the homepage on purpose: a dark band under the fixed header
   (whose text is light and has no background of its own), light paper through
   the middle where the pricing cards live, dark again at the closing CTA. */

/* ---------- hero ---------- */
.svc-hero{
  position:relative;
  padding:calc(96px + clamp(52px,9svh,104px)) clamp(24px,4vw,54px) clamp(48px,8svh,88px);
  background:
    radial-gradient(120% 90% at 18% 0%,rgba(69,160,232,.16),transparent 58%),
    linear-gradient(168deg,#2A0E22 0%,#1B0B1B 38%,#0C1520 74%,#0A1A28 100%);
  color:#F2ECF2;
  border-bottom:1px solid rgba(200,170,200,.22);
}
.svc-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px);
}
.svc-hero-in{position:relative;z-index:1;max-width:1320px;margin:0 auto}
.svc-eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#8CCCFF;
}
.svc-h1{
  margin-top:18px;max-width:14ch;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.9rem,7.4vw,6.4rem);line-height:.88;letter-spacing:-.055em;
  text-transform:uppercase;color:#FBF7FA;
}
.svc-h1 em{font-style:normal;color:#8CCCFF}
.svc-lede{
  max-width:58ch;margin-top:26px;
  color:#CFD8E2;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.65;
}
/* the price anchor: the one number a visitor is scanning for */
.svc-from{
  display:inline-flex;align-items:baseline;gap:12px;margin-top:30px;
  padding:13px 20px;border:1px solid rgba(140,204,255,.34);border-radius:6px;
  background:rgba(10,26,40,.5);
}
.svc-from .sf-k{font-family:var(--mono);font-size:.5938rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8CCCFF}
.svc-from b{font-family:var(--disp);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.svc-from i{font-family:var(--mono);font-size:.6875rem;font-style:normal;color:#A9BDCE}
.svc-hero .cta-row{margin-top:30px}

/* ---------- packages ---------- */
.svc-page .section{max-width:1320px;margin:0 auto}
.svc-gnote{max-width:62ch;margin:-6px 0 20px;color:var(--fog-dim);font-size:.98rem;line-height:1.6}

/* ---------- the work ---------- */
.svc-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:30px}
.svc-work-card{
  display:flex;flex-direction:column;gap:8px;padding:24px 26px;text-decoration:none;
  border:1px solid var(--line-2);background:var(--panel);
  transition:border-color .2s ease,transform .2s ease;
}
.svc-work-card:hover{border-color:var(--signal-ink);transform:translateY(-3px)}
.swc-t{font-family:var(--disp);font-weight:700;font-size:1.35rem;line-height:1.1;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--fog)}
.swc-d{color:var(--fog-dim);font-size:.95rem;line-height:1.5;flex:1}
.swc-go{margin-top:6px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal-ink)}

/* ---------- questions ---------- */
.svc-faqs{max-width:900px;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.svc-faq{border:1px solid var(--line-2);background:var(--panel)}
.svc-faq>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;
  font-family:var(--body);font-size:1.05rem;font-weight:600;color:var(--fog);
}
.svc-faq>summary::-webkit-details-marker{display:none}
.svc-faq>summary::after{
  content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:1.7px solid var(--signal-ink);border-bottom:1.7px solid var(--signal-ink);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;
}
.svc-faq[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.svc-faq>p{max-width:70ch;padding:0 22px 20px;color:var(--fog-dim);font-size:1rem;line-height:1.65}

/* ---------- closing CTA ---------- */
.svc-cta{
  margin-top:clamp(70px,11vw,130px);padding:clamp(54px,9vw,104px) clamp(24px,4vw,54px);
  background:linear-gradient(168deg,#0C1520 0%,#12202E 55%,#1B0B1B 100%);
  color:#F2ECF2;text-align:center;
}
.svc-cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:.95;letter-spacing:-.05em;text-transform:uppercase}
.svc-cta p{max-width:52ch;margin:18px auto 0;color:#B9C6D3;font-size:1.03rem;line-height:1.6}
.svc-cta .cta-row{justify-content:center;margin-top:30px}
.svc-others{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(231,228,218,.14);
}
.svc-others span{font-family:var(--mono);font-size:.5938rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8CCCFF}
.svc-others a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:#CFD8E2;text-decoration:none;padding:9px 12px;border:1px solid rgba(231,228,218,.22)}
.svc-others a:hover{border-color:#8CCCFF;color:#fff}

/* ---------- footer ---------- */
/* site.css styles the bare <footer> element for the homepage: display:grid,
   max-width:1360px, its own padding and border. This footer is a different
   shape, so reset those or its two children land in one grid row on top of
   each other and the full-bleed background gets centred. */
.svc-foot{display:block;max-width:none;margin:0;border-top:0;
  background:#0A1220;color:#B9C6D3;padding:clamp(44px,6vw,68px) clamp(24px,4vw,54px) 30px}
.sf-in{max-width:1320px;margin:0 auto;display:grid;
  grid-template-columns:minmax(200px,1.15fr) repeat(4,minmax(120px,1fr));gap:34px 24px}
.sf-mark{display:flex;align-items:center;gap:12px;color:#F2ECF2;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:.95rem;line-height:1.15;text-transform:uppercase}
.sf-col{display:flex;flex-direction:column;gap:9px}
.sf-col h2{font-family:var(--mono);font-size:.5938rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8CCCFF;margin-bottom:3px}
.sf-col a{color:#B9C6D3;text-decoration:none;font-size:.92rem}
.sf-col a:hover{color:#fff}
.sf-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:#9FB3C4}
.sf-lamp{width:7px;height:7px;border-radius:50%;background:#5FD08A;box-shadow:0 0 8px #5FD08A}
.sf-fine{max-width:1320px;margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(231,228,218,.12);
  font-family:var(--mono);font-size:.5938rem;letter-spacing:.1em;text-transform:uppercase;color:#7E8FA0}

/* ---------- mobile ---------- */
@media (max-width:860px){
  /* site.css drops the wordmark on phones because the homepage does not need a
     link to itself. These pages do, so it comes back as the logo alone. */
  header{justify-content:space-between}
  header .wordmark{display:flex;flex:none;padding:7px;margin:-7px}
  header .wordmark .wm-txt{display:none}
  header .wm-logo{display:block;width:30px;height:30px}
  header nav a[href="/#work"]{display:none}
  .svc-hero{padding-top:calc(78px + clamp(40px,7svh,72px))}
  .svc-h1{max-width:none}
  .svc-hero .cta-row,.svc-cta .cta-row{flex-wrap:wrap}
  .sf-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sf-in{grid-template-columns:1fr;gap:26px}
  .svc-from{width:100%;justify-content:flex-start}
}

/* ---------- /services hub ---------- */
.svcx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin-top:32px}
.svcx-card{
  display:flex;flex-direction:column;gap:12px;padding:30px 32px;text-decoration:none;
  border:1px solid var(--line-2);background:var(--panel);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.svcx-card:hover{border-color:var(--signal-ink);transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(10,32,56,.12)}
.svcx-name{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:var(--fog)}
.svcx-from{display:flex;align-items:baseline;gap:9px}
.svcx-from b{font-family:var(--mono);font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-ink)}
.svcx-from i{font-family:var(--mono);font-size:.6875rem;font-style:normal;color:var(--fog-dim)}
.svcx-desc{color:var(--fog-dim);font-size:1rem;line-height:1.6;flex:1}
.svcx-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.svcx-tags em{font-style:normal;font-family:var(--mono);font-size:.5938rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fog-dim);padding:6px 9px;border:1px solid var(--line-2)}
.svcx-go{margin-top:8px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal-ink)}
.svcx-card:hover .svcx-go{color:var(--fog)}

/* same tightening, after site.css so it wins on the service pages */
@media (max-width:860px){
  header{padding-left:16px;padding-right:16px}
  header nav{gap:10px}
  header nav a{font-size:0.625rem;letter-spacing:.06em;padding-left:5px;padding-right:5px;
    margin-left:-2px;margin-right:-2px}
}
.hx-dl{color:var(--signal-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hx-dl:hover{color:var(--fog)}