/* ============================================================
   HOME.CSS — homepage-specific layout only.
   Tokens, reset, buttons, header, footer, loader, reveal and
   the WhatsApp float live in site.css, which loads first.
   ============================================================ */

/* ---------- HERO ---------- */
.hero { padding:72px 0 64px; position:relative; overflow:hidden; }
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 80% 6%, rgba(232,130,61,.16), transparent 62%),
    radial-gradient(620px 460px at 4% 92%, rgba(61,110,119,.22), transparent 60%);
}
.hero-grid {
  position:relative; display:grid; grid-template-columns:1.08fr .92fr;
  gap:56px; align-items:center;
}
.hero h1 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(2.4rem,5.6vw,4rem); line-height:1.02;
  text-transform:uppercase; letter-spacing:.005em; margin:16px 0 20px;
}
.hero h1 span { color:var(--amber); }
.hero .lede { font-size:1.08rem; color:#CFC7B8; max-width:52ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-note {
  margin-top:20px; font-size:.82rem; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.hero-note .dot { width:7px; height:7px; border-radius:50%; background:var(--wa); }

/* ---------- FILM HERO ----------
   Full-bleed looping video behind the headline, framed like a camera
   viewfinder. The technique from the brief: a locked-off shot whose first
   and last frames match, so it loops without a visible cut.

   Structure: .hero-film is the scroll track, .hero-stage the screen-sized
   frame. With .scene-on (added by home.js) the track grows taller than the
   screen and the stage sticks, so scrolling plays the sequence. Without it,
   the stage is simply the hero. overflow:hidden lives on the stage, not the
   section: on the section it would stop position:sticky from working. */
:root { --hdr:74px; }
.hero-film { position:relative; padding:0; overflow:visible; }   /* .hero sets hidden */
.hero-film::before { display:none; }          /* the video replaces the glow */
.hero-stage {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - var(--hdr));
  display:grid; align-items:center;
  padding:72px 0 88px;
}
.hero-film.scene-on { height:calc(250svh); }
.hero-film.scene-on .hero-stage {
  position:sticky; top:var(--hdr);
  height:calc(100svh - var(--hdr));
}

.hero-bg { position:absolute; inset:0; z-index:-1; background:var(--bg); }
.hero-media {
  position:absolute; inset:0;
  transform-origin:66% 60%;                   /* the lens, for the push-in */
  will-change:transform;
}
.hero-poster, .hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% 50%;
}
.hero-video { opacity:0; transition:opacity 1.2s ease; }
.hero-film.is-playing .hero-video { opacity:1; }

/* Film grain. An oversized tile nudged with transform in hard steps: the
   compositor moves it, nothing is repainted. */
.hero-grain {
  position:absolute; inset:-60%;
  background:url(../assets/hero/grain.png) repeat;
  opacity:.07; mix-blend-mode:overlay; pointer-events:none;
  animation:grain .9s steps(6) infinite;
}
@keyframes grain {
  0%   { transform:translate(0,0); }
  17%  { transform:translate(-6%,4%); }
  33%  { transform:translate(5%,-7%); }
  50%  { transform:translate(-3%,8%); }
  67%  { transform:translate(8%,2%); }
  83%  { transform:translate(-8%,-4%); }
  100% { transform:translate(0,0); }
}

/* A soft amber light that follows the pointer, like a practical lamp. */
.hero-glow {
  position:absolute; left:0; top:0; width:640px; height:640px;
  margin:-320px 0 0 -320px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,130,61,.20) 0%, rgba(232,130,61,.07) 38%, rgba(232,130,61,0) 70%);
  mix-blend-mode:screen; opacity:0; pointer-events:none;
  transition:opacity .6s ease; will-change:transform;
}
.hero-glow.on { opacity:1; }

/* Keeps the headline readable over any footage: dark where the copy sits,
   clear where the subject is, and a fade into the page at the bottom. */
.hero-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(22,20,15,.94) 0%, rgba(22,20,15,.78) 32%,
                              rgba(22,20,15,.28) 58%, rgba(22,20,15,.10) 100%),
    linear-gradient(to top,   rgba(22,20,15,1) 0%, rgba(22,20,15,0) 22%),
    linear-gradient(to bottom,rgba(22,20,15,.55) 0%, rgba(22,20,15,0) 18%);
}
/* scene layers: both animated by opacity only */
.hero-vignette {
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse 70% 70% at 62% 58%, rgba(22,20,15,0) 30%, rgba(22,20,15,.92) 100%);
}
.hero-iris { position:absolute; inset:0; background:var(--bg); opacity:0; }

/* viewfinder furniture, framing the whole hero */
.hero-bg .vf-corner { width:30px; height:30px; }
.hero-bg .vf-corner.tl { top:26px; left:26px; }
.hero-bg .vf-corner.tr { top:26px; right:26px; }
.hero-bg .vf-corner.bl { bottom:26px; left:26px; }
.hero-bg .vf-corner.br { bottom:26px; right:26px; }
.hero-bg .vf-rec  { top:32px; left:70px; }
.hero-bg .vf-meta { bottom:32px; left:70px; right:70px; }
.vf-tc { position:absolute; top:32px; right:70px; font-size:.66rem; letter-spacing:.14em; color:#CFC7B8; }

.hero-copy { position:relative; width:100%; will-change:transform, opacity; }
.hero-copy h1 { max-width:14ch; }
.hero-copy .lede { max-width:46ch; }

/* ---- intro: headline words rise out of a mask, then the rest fades up.
   .intro is set by home.js before first paint of the hero; .go starts it. */
#heroTitle .w, #heroTitle .w > span { color:inherit; }   /* .hero h1 span paints amber */
.hero-film.intro #heroTitle .w { display:inline-block; overflow:hidden; vertical-align:top;
                                 padding-bottom:.08em; margin-bottom:-.08em; }
.hero-film.intro #heroTitle .w > span { display:inline-block; transform:translateY(105%);
  transition:transform .9s cubic-bezier(.2,.75,.2,1); transition-delay:calc(var(--i) * 70ms); }
.hero-film.intro .hero-in { opacity:0; transform:translateY(14px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.hero-film.intro.go #heroTitle .w > span { transform:none; }
.hero-film.intro.go .hero-in { opacity:1; transform:none; }
.hero-film.intro.go .eyebrow.hero-in { transition-delay:.05s; }
.hero-film.intro.go .lede.hero-in    { transition-delay:.55s; }
.hero-film.intro.go .hero-actions    { transition-delay:.7s; }
.hero-film.intro.go .hero-note       { transition-delay:.85s; }
/* reduced motion: the same order, but a fade instead of movement */
html[data-motion="reduced"] .hero-film.intro #heroTitle .w > span { transform:none; opacity:0;
  transition:opacity .6s ease; transition-delay:calc(var(--i) * 60ms); }
html[data-motion="reduced"] .hero-film.intro.go #heroTitle .w > span { opacity:1; }
html[data-motion="reduced"] .hero-film.intro .hero-in { transform:none; }

/* ---- title cards ---- */
.scene-caps { position:absolute; inset:0; display:grid; align-items:center; pointer-events:none; }
.scene-caps .wrap { position:relative; width:100%; height:9em; }
.cap {
  position:absolute; left:24px; top:0; margin:0;
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,9vw,7.5rem); line-height:.95; letter-spacing:.01em;
  opacity:0; will-change:transform, opacity;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.cap .n {
  display:block; margin-bottom:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem; letter-spacing:.3em;
  color:var(--amber); text-shadow:none;
}
.cap small {
  display:block; margin-top:16px;
  font-family:'Inter',system-ui,sans-serif; text-transform:none; letter-spacing:0;
  font-size:1.05rem; color:#CFC7B8; text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.hero-film:not(.scene-on) .scene-caps { display:none; }

.scroll-cue {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.58rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue span { width:1px; height:34px; background:linear-gradient(var(--amber), transparent);
  transform-origin:top; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} }
.hero-film:not(.scene-on) .scroll-cue { display:none; }

.amb-pause {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(22,20,15,.72); border:1px solid var(--line); color:var(--muted);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px; transition:color .2s ease, border-color .2s ease;
}
.amb-pause[hidden] { display:none; }
.amb-pause:hover { color:var(--text); border-color:var(--amber); }
.amb-pause .ic { font-size:.6rem; letter-spacing:-.05em; }
.hero-pause { position:absolute; right:66px; top:58px; z-index:2; }

@media (max-width:680px) {
  :root { --hdr:64px; }
  .hero-stage { align-items:end; padding:96px 0 110px; }
  .hero-film.scene-on { height:210svh; }
  /* the landscape poster is framed to keep the camera in view; the phone
     video is already cropped around it by encode-hero.sh, so it centres */
  .hero-poster { object-position:86% 50%; }
  .hero-video  { object-position:50% 50%; }
  .hero-media  { transform-origin:36% 60%; }
  .hero-shade {
    background:
      linear-gradient(to top, rgba(22,20,15,.97) 0%, rgba(22,20,15,.86) 46%,
                              rgba(22,20,15,.35) 74%, rgba(22,20,15,.55) 100%);
  }
  .hero-vignette { background:radial-gradient(ellipse 80% 60% at 40% 55%, rgba(22,20,15,0) 25%, rgba(22,20,15,.94) 100%); }
  .scene-caps { align-items:end; padding-bottom:18svh; }
  .cap { font-size:clamp(3rem,16vw,4.6rem); }
  .cap small { font-size:.95rem; }
  .hero-bg .vf-corner { width:22px; height:22px; }
  .hero-bg .vf-corner.tl, .hero-bg .vf-corner.tr { top:16px; }
  .hero-bg .vf-corner.bl, .hero-bg .vf-corner.br { bottom:16px; }
  .hero-bg .vf-corner.tl, .hero-bg .vf-corner.bl { left:16px; }
  .hero-bg .vf-corner.tr, .hero-bg .vf-corner.br { right:16px; }
  .hero-bg .vf-rec  { top:21px; left:48px; }
  .hero-bg .vf-meta { bottom:21px; left:48px; right:48px; }
  .vf-tc { top:21px; right:48px; font-size:.6rem; }
  .hero-pause { right:44px; top:44px; }
  .scroll-cue { display:none; }
  .hero-glow { display:none; }
}
html[data-motion="reduced"] .hero-grain,
html[data-motion="reduced"] .scroll-cue span { animation:none; }

/* ---------- AMBIENT PLATES ----------
   Soft loops cut from the hero shot (tools/encode-plates.sh) behind a
   couple of sections, so the film look carries down the page. Faded top
   and bottom into the page colour so there is never a hard edge. */
.has-plate { position:relative; isolation:isolate; overflow:hidden; }
.plate {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.plate img, .plate video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.plate video { opacity:0; transition:opacity 1.2s ease; }
.plate.is-playing video { opacity:1; }
.plate::after {                                /* readability */
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(22,20,15,.92) 0%, rgba(22,20,15,.72) 45%, rgba(22,20,15,.45) 100%);
}
.plate-glow .plate { opacity:.55; }
.plate-dust .plate { opacity:.8; }
.plate-dust .plate img, .plate-dust .plate video { object-position:70% 30%; }
.plate-pause { position:absolute; right:24px; top:24px; z-index:2; }
@media (max-width:680px) {
  .plate::after { background:rgba(22,20,15,.78); }
  .plate-pause { right:14px; top:14px; }
}

/* viewfinder frame around real work */
.viewfinder {
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--panel); box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.viewfinder img {
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
}
.viewfinder img.on { opacity:1; }
.viewfinder .scrim {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,12,10,.82) 0%, transparent 46%);
}
.vf-corner { position:absolute; width:26px; height:26px; border:2px solid rgba(232,130,61,.9); }
.vf-corner.tl { top:14px; left:14px; border-right:0; border-bottom:0; }
.vf-corner.tr { top:14px; right:14px; border-left:0; border-bottom:0; }
.vf-corner.bl { bottom:14px; left:14px; border-right:0; border-top:0; }
.vf-corner.br { bottom:14px; right:14px; border-left:0; border-top:0; }
.vf-rec {
  position:absolute; top:18px; left:52px; display:flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.18em; color:#F2EFE6;
}
.vf-rec .dot {
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.vf-meta {
  position:absolute; bottom:18px; left:52px; right:52px;
  display:flex; justify-content:space-between; gap:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.14em; color:#CFC7B8;
}

/* ---------- SERVICES ---------- */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.svc:hover { border-color:var(--amber); transform:translateY(-3px); }
.svc h3 { font-size:1.22rem; margin:14px 0 10px; }
.svc p { color:var(--muted); font-size:.93rem; flex:1; }
.svc ul { list-style:none; margin:16px 0 0; }
.svc li {
  font-size:.87rem; color:#CFC7B8; padding-left:20px; position:relative; margin:7px 0;
}
.svc li::before { content:'—'; position:absolute; left:0; color:var(--amber); }
.svc .price {
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.9rem; color:var(--amber);
}
.svc .price small { display:block; color:var(--muted); font-size:.72rem; letter-spacing:.06em; margin-top:4px; }
.svc-icon { font-size:1.5rem; }

/* ---------- WORK ---------- */
.tabs { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.tab {
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:9px 18px; border-radius:999px; font-size:.84rem;
  font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.08em;
  text-transform:uppercase; transition:.2s;
}
.tab[aria-pressed="true"] { border-color:var(--amber); color:var(--amber); background:var(--panel-2); }

.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.case {
  position:relative;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease;
}
.case:hover { border-color:var(--amber); transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.5); }
/* a soft light that follows the pointer (home.js sets --mx/--my) */
.case::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(232,130,61,.10), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.case:hover::after { opacity:1; }
html[data-motion="reduced"] .case:hover { transform:none; }
.case.hide { display:none; }
.case-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--panel-2); }
.case-thumb img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .9s cubic-bezier(.2,.75,.2,1); }
.case:hover .case-thumb img { transform:scale(1.06); }
html[data-motion="reduced"] .case:hover .case-thumb img { transform:none; }
/* live preview: a scroll-through of the real site, played on hover
   (or when the card is centred, on touch screens) */
.case-preview {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.case.previewing .case-preview.ready { opacity:1; }
.case-live {
  position:absolute; right:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:#F2EFE6; background:rgba(22,20,15,.72); border:1px solid rgba(255,255,255,.12);
  padding:5px 9px; border-radius:999px; opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease, transform .3s ease;
}
.case-live i { width:6px; height:6px; border-radius:50%; background:#e5484d; animation:blink 1.2s ease-in-out infinite; }
.case.previewing .case-live { opacity:1; transform:none; }
.case-tag {
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:rgba(22,20,15,.86); border:1px solid var(--line);
  padding:5px 10px; border-radius:999px; color:#CFC7B8;
}
.case-play {
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(13,12,10,.42); border:0; width:100%; color:var(--text);
}
.case-play .ring {
  width:58px; height:58px; border-radius:50%; border:2px solid var(--amber);
  display:grid; place-items:center; background:rgba(22,20,15,.7);
  font-size:1.1rem; transition:transform .2s ease;
}
.case-play:hover .ring { transform:scale(1.1); }
.case-body { padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.case-body h3 { font-size:1.16rem; margin:8px 0 10px; }
.case-body p { color:var(--muted); font-size:.9rem; flex:1; }
.case-foot {
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.82rem;
}
.stack { display:flex; gap:7px; flex-wrap:wrap; }
.stack span {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.64rem;
  color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:999px;
}
.case-link { color:var(--amber); font-weight:600; white-space:nowrap; }

/* ---------- PROCESS ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.step { position:relative; padding-top:26px; border-top:2px solid var(--line); }
.step::before {
  counter-increment:step; content:'0' counter(step);
  position:absolute; top:-13px; left:0; background:var(--bg); padding-right:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.78rem; color:var(--amber);
}
.step h3 { font-size:1.02rem; margin-bottom:8px; }
.step p { color:var(--muted); font-size:.88rem; }

/* ---------- PROOF ---------- */
.proof { background:var(--panel); border-block:1px solid var(--line); }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.proof-item { padding:24px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); }
.proof-item .big {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:2rem; color:var(--amber); line-height:1;
}
.proof-item h3 { font-size:.98rem; margin:12px 0 8px; }
.proof-item p { color:var(--muted); font-size:.87rem; }
.proof-note {
  margin-top:24px; padding:20px 24px; border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--muted); font-size:.88rem;
}

/* ---------- PRICING ---------- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tier {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; display:flex; flex-direction:column; position:relative;
}
.tier.featured { border-color:var(--amber); }
.tier .flag {
  position:absolute; top:-11px; left:26px; background:var(--amber); color:#16140F;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
.tier h3 { font-size:1.15rem; margin-bottom:6px; }
.tier .amount {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:1.9rem; margin:14px 0 4px; letter-spacing:.01em;
}
.tier .amount small { font-size:.9rem; color:var(--muted); font-family:'Inter',sans-serif; }
.tier .who { color:var(--muted); font-size:.87rem; min-height:44px; }
.tier ul { list-style:none; margin:20px 0 26px; flex:1; }
.tier li { font-size:.88rem; color:#CFC7B8; padding-left:22px; position:relative; margin:9px 0; }
.tier li::before { content:'✓'; position:absolute; left:0; color:var(--amber); font-size:.8rem; }
.pricing-foot { margin-top:26px; color:var(--muted); font-size:.87rem; }

/* ---------- ABOUT ---------- */
.about-grid { display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start; }
.about-portrait {
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  position:relative; background:var(--panel);
}
.about-portrait img { width:100%; filter:grayscale(.25) contrast(1.05); }
.about-body p { color:#CFC7B8; margin-bottom:16px; max-width:64ch; }
.about-body .kicker { color:var(--text); font-weight:600; }
.about-links { display:flex; gap:20px; flex-wrap:wrap; margin-top:8px; font-size:.9rem; }
.about-links a { color:var(--amber); }

/* ---------- CONTACT ---------- */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; }
.channels { display:grid; gap:14px; margin-top:26px; }
.channel {
  display:flex; gap:14px; align-items:center; padding:16px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s ease;
}
.channel:hover { border-color:var(--amber); }
.channel .ic { font-size:1.2rem; width:22px; text-align:center; }
.channel .lbl {
  display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.channel .val { font-size:.96rem; }
.channel.wa { border-color:rgba(37,211,102,.4); }
.channel.wa .val { color:var(--wa); }

.form-card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px;
}
.fg { margin-bottom:18px; }
.fg label {
  display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.fg input, .fg textarea, .fg select {
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:13px 15px; border-radius:10px; font-family:inherit; font-size:.95rem;
}
.fg textarea { min-height:132px; resize:vertical; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--amber); outline:none; }
.form-card .btn { width:100%; justify-content:center; margin-top:6px; }
input[name="_honey"] { display:none !important; }

/* ---------- VIDEO MODAL ----------
   dvh rather than inset:0 so mobile browser chrome never covers the
   player; safe-area padding for notched phones; the close button sits
   INSIDE the frame on small screens, where -46px would land off-screen. */
.vmodal {
  position:fixed; left:0; right:0; top:0;
  height:100vh; height:100dvh;
  z-index:100; display:none; place-items:center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.vmodal.open { display:grid; }
.vmodal .veil { position:absolute; inset:0; background:rgba(8,7,6,.92); }
.vmodal-inner { position:relative; width:min(960px,100%); max-height:100%; }
.vmodal iframe {
  display:block; width:100%; aspect-ratio:16/9;
  max-height:calc(100dvh - 190px);
  border:0; border-radius:var(--radius); background:#000;
}
.vmodal-close {
  position:absolute; top:-46px; right:0; background:var(--panel);
  border:1px solid var(--line); color:var(--text);
  width:38px; height:38px; border-radius:50%; z-index:3;
  display:grid; place-items:center; line-height:1;
}
.vmodal-close:hover { border-color:var(--amber); color:var(--amber); }
.vmodal-fallback {
  display:block; margin-top:14px; text-align:center;
  color:var(--muted); font-size:.84rem;
}
.vmodal-fallback a { color:var(--amber); font-weight:600; }

/* On a phone the button cannot sit above the frame — there is no room,
   and Drive is flaky enough that the fallback link has to be obvious. */
@media (max-width:680px) {
  .vmodal-close {
    top:8px; right:8px;
    background:rgba(22,20,15,.92); width:42px; height:42px;
  }
  .vmodal-fallback {
    margin-top:12px; padding:12px 14px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    font-size:.86rem;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .cards-3, .tiers, .proof-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:680px) {
  .work-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; gap:26px; }
  .about-portrait { max-width:170px; }
  .nav-cta .btn span.long { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .viewfinder img { transition:none; }
}


.pricing-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }