/* ══════════════════════════════════════════════════════════════
   ONE PRODUCTION HOUSE — site stylesheet
   Brand tokens are the client's official sheet.
   ══════════════════════════════════════════════════════════════ */
:root{
  --orange:#f36b2f; --orange-2:#ff8a4c; --orange-3:#ffa96f; --clay:#d34f3a;
  --yellow:#fbcb56; --sand:#d4c5a8; --grey:#cececd; --warm-grey:#cabdb4;
  --ink:#242424; --ink-2:#3b3733; --ink-3:#6b6560;
  --white:#fff; --cream:#fff6ee; --cream-2:#ffece0; --cream-3:#ffe2cf;
  --grad:linear-gradient(103deg,var(--yellow) 0%,var(--orange) 48%,var(--clay) 100%);
  --grad-cta:linear-gradient(90deg,#f36b2f 0%,#e0592f 55%,#d34f3a 100%);
  --grad-band:linear-gradient(118deg,#f4763a 0%,#ef6430 38%,#d34f3a 100%);
  --grad-soft:linear-gradient(140deg,#fff3e6 0%,#ffe4d0 55%,#ffd7bd 100%);
  --display:"Bricolage Grotesque","Arial Black",sans-serif;
  --body:"Roboto",system-ui,sans-serif; --mono:"Roboto Mono",monospace;
  --gut:clamp(18px,4vw,60px); --maxw:1420px; --pad:clamp(40px,4.6vw,72px); --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink-2);font-family:var(--body);font-size:16.5px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;border-radius:8px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:860px}
.sec{padding-block:var(--pad);position:relative}
.tone-tinted{background:var(--cream)}
.tone-soft{background:var(--grad-soft)}
.tone-grey{background:#f4f4f3}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.028em;margin:0;color:var(--ink)}
h1{font-size:clamp(38px,5.8vw,82px)}
h2{font-size:clamp(32px,5vw,72px)}
h3{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.018em}
h4{font-size:clamp(16.5px,1.4vw,20px);letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(16px,1.28vw,19px);line-height:1.64;color:var(--ink-3);max-width:62ch}
.lede.mid{margin-inline:auto;text-align:center}
.prose{font-size:17px;line-height:1.72;color:var(--ink-2)}
.prose p{margin-bottom:1.1em}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-o{color:var(--clay)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:11px;margin:0 0 20px}
.eyebrow::before{content:"";width:24px;height:3px;background:var(--grad);border-radius:3px;flex:none}
.eyebrow.mid{justify-content:center}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#9b938c}
.mid-t{text-align:center}
.sec-cta{margin-top:22px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-.012em;padding:16px 28px;border-radius:999px;border:2px solid transparent;background-clip:padding-box;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,background .3s,color .3s;will-change:transform}
.btn-sm{padding:12px 18px;font-size:13px;margin-top:16px}
.btn-p{background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:0 10px 26px -10px rgba(211,79,58,.7)}
.btn-p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 38px -12px rgba(211,79,58,.85)}
.btn-o{border-color:var(--orange);color:var(--orange);background:#fff}
.btn-o:hover{background:var(--orange);color:#fff;transform:translateY(-3px)}
.btn-ink{background:var(--ink);color:var(--yellow);border-color:transparent}
.btn-ink:hover{transform:translateY(-3px);background:#332f2b}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(4px)}

/* ── icons + mascots ── */
.ico{width:54px;height:54px;border-radius:15px;background:var(--cream);border:1.6px solid var(--cream-3);
  display:grid;place-items:center;flex:none;transition:background .35s,border-color .35s}
.ico svg{width:25px;height:25px;stroke:var(--orange);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ico{background:#fff;border-color:var(--orange)}
.mx{display:block;width:auto;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(36,36,36,.16))}
.mslot .mx{height:clamp(84px,7.8vw,112px)}
.mega .mx{height:38px;flex:none}
.mnav .mx{height:36px;flex:none}
.sib .mx{height:44px}

/* ══ HEADER ══ */
.hdr{position:fixed;inset:0 0 auto;z-index:900;background:rgba(255,255,255,0);border-bottom:1px solid rgba(36,36,36,0);
  transition:background .35s,border-color .35s,box-shadow .35s;backdrop-filter:blur(12px)}
.hdr.stuck{background:rgba(255,255,255,.95);border-bottom-color:rgba(36,36,36,.09);box-shadow:0 10px 30px -22px rgba(36,36,36,.5)}
.hdr-in{display:flex;align-items:center;gap:16px;height:104px}
.brand{flex:none}
.brand img{height:68px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin:0 auto 0 10px;padding:0;list-style:none}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:6px;padding:11px 12px;border-radius:10px;
  font-family:var(--display);font-weight:700;font-size:14.6px;letter-spacing:-.012em;color:var(--ink);transition:color .22s,background .22s}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:var(--clay);background:var(--cream-2)}
.nav .caret{font-size:10px;opacity:.55;transition:transform .25s}
.nav>li.open .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-14px;padding:12px;margin:0;list-style:none;min-width:600px;
  display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;align-content:start;max-height:min(66vh,430px);overflow:auto;
  background:#fff;border:1.5px solid var(--cream-3);border-radius:20px;box-shadow:0 30px 70px -26px rgba(36,36,36,.42);
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:.26s cubic-bezier(.2,.9,.3,1)}
.nav>li.open>.mega{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;align-items:center;gap:11px;padding:6px 9px;border-radius:11px;font-size:13.6px;line-height:1.3;color:var(--ink-2);transition:background .22s,color .22s}
.mega a:hover{background:var(--cream);color:var(--clay)}
.mega .mega-hd{grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a9a19a;padding:6px 10px 8px}
.hdr-cta{display:flex;align-items:center;gap:9px;flex:none}
.hdr-cta .btn{padding:11px 18px;font-size:13.4px}
.soc{display:flex;gap:7px}
.soc a{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--cream-3);background:#fff;color:var(--clay);
  display:grid;place-items:center;transition:border-color .3s,background .3s}
.soc a:hover{border-color:var(--orange);background:var(--cream)}
.soc svg{width:19px;height:19px}
.soc-dark a{background:transparent;border-color:rgba(212,197,168,.28);color:var(--sand)}
.soc-dark a:hover{border-color:var(--orange);color:var(--yellow)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--cream-3);align-items:center;justify-content:center;background:var(--cream)}
.burger span{display:block;width:18px;height:2.2px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2.2px;background:var(--ink);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{position:fixed;inset:104px 0 0;z-index:880;background:#fff;overflow-y:auto;padding:16px var(--gut) 70px;
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s}
.mnav.open{transform:none;opacity:1;visibility:visible}
.mnav>a{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);padding:15px 2px;border-bottom:1px solid var(--cream-2)}
.macc{border-bottom:1px solid var(--cream-2)}
.macc>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.macc>button .cv{font-size:12px;color:var(--clay);transition:transform .3s}
.macc.open>button .cv{transform:rotate(180deg)}
.macc>div{display:none;padding-bottom:8px}
.macc.open>div{display:block}
.macc>div a{display:flex;align-items:center;gap:11px;padding:9px 0 9px 6px;font-size:14.6px;color:var(--ink-3)}

/* ══ HERO ══ */
.hero{padding-top:128px;overflow:hidden;background:
  radial-gradient(1100px 620px at 84% -8%,#ffe9d8 0,rgba(255,233,216,0) 62%),
  radial-gradient(760px 520px at 4% 34%,#fff4e0 0,rgba(255,244,224,0) 60%),#fff}
.blob{position:absolute;border-radius:50%;filter:blur(74px);pointer-events:none;z-index:0}
.blob-1{width:min(42vw,520px);aspect-ratio:1;background:rgba(243,107,47,.19);top:-12%;right:6%}
.blob-2{width:min(34vw,420px);aspect-ratio:1;background:rgba(251,203,86,.28);bottom:-16%;left:-6%}
.blob-c{width:min(46vw,560px);aspect-ratio:1;background:rgba(243,107,47,.16);top:-28%;left:50%;transform:translateX(-50%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,3.4vw,56px);align-items:center}
.hero h1{margin:0 0 22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 22px}
.trust-l{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#a9a19a;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  background:var(--cream);border:1.5px solid var(--cream-3);color:var(--clay);transition:transform .3s,background .3s,color .3s}
.chip:hover{transform:translateY(-3px);background:var(--grad-cta);color:#fff;border-color:transparent}

/* ══ THE FRAME — every photo/video lives in the orange gradient box ══ */
.frame{display:block;position:relative;perspective:1600px}
.frame-in{display:block;position:relative;aspect-ratio:var(--ar,4/3);border-radius:var(--r);overflow:hidden;
  background:var(--grad);box-shadow:0 30px 60px -30px rgba(36,36,36,.5);
  transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
.frame-in>img{width:100%;height:100%;object-fit:cover}
.frame-ph{display:block;width:100%;height:100%;background:var(--grad)}
.frame-hero .frame-in{box-shadow:0 40px 80px -34px rgba(36,36,36,.55)}

/* ── video frame: a YouTube embed in the exact same rounded, shadowed
   box every photo uses, so it never reads as a bolted-on afterthought ── */
.frame.is-video .frame-in{background:#000;container-type:size}
.frame.is-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background-color:#1a1a1a;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center}
.yt-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.25))}
.yt-play{position:relative;z-index:2;width:clamp(56px,8cqw,84px);height:clamp(56px,8cqw,84px);border-radius:50%;
  background:var(--grad-cta);display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(211,79,58,.75);
  transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.yt-facade:hover .yt-play{transform:scale(1.08)}
.yt-play svg{width:38%;height:38%;fill:#fff;margin-left:4%}

/* ── "contain" fit mode: shows the ENTIRE photo with no cropping at all.
   Whatever gap is left inside the frame (because the photo's own shape
   doesn't match the chosen aspect ratio) is filled by the same brand
   gradient every frame already has as its background — so it reads as
   a deliberate matte border, not empty space. ── */
.frame.is-contain .frame-in>img{object-fit:contain}

/* ── flip card: click/tap turns the frame over to reveal a second image ── */
.frame.is-flip{cursor:pointer}
.frame.is-flip:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:var(--r)}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.22,.9,.3,1)}
.frame.is-flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);overflow:hidden;background:var(--grad)}
.flip-face img{width:100%;height:100%;object-fit:cover}
.flip-back{transform:rotateY(180deg)}
.flip-hint{position:absolute;right:13px;bottom:13px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
  pointer-events:none;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.flip-hint svg{width:17px;height:17px;color:var(--clay)}

/* ── LENS reveal: camera-aperture hover/tap reveal, brand-orange, thin
   barrel. The lens graphic is always a circle (real lenses are round) —
   it centres itself inside ANY frame shape via container-query units,
   and the photo's reveal grows to fill that frame's own aspect ratio
   once opened, whatever shape it is. ── */
.frame.is-lens{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.frame.is-lens img{-webkit-touch-callout:none}
.frame.is-lens:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:var(--r)}
.frame.is-lens .frame-in{
  container-type:size;
  background:
    radial-gradient(circle 1.7cqmin at 9% 9%, #6b655b 0%, #6b655b 55%, transparent 60%),
    radial-gradient(circle 1.7cqmin at 91% 9%, #6b655b 0%, #6b655b 55%, transparent 60%),
    radial-gradient(circle 1.7cqmin at 9% 91%, #6b655b 0%, #6b655b 55%, transparent 60%),
    radial-gradient(circle 1.7cqmin at 91% 91%, #6b655b 0%, #6b655b 55%, transparent 60%),
    radial-gradient(circle at 30% 24%, #423e38 0%, #201e1b 48%, #100f0d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 2px rgba(0,0,0,.5);
}

.lens-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:circle(48.5cqmin at 50% 50%);
  filter:saturate(.55) brightness(.5);
  transition:clip-path 1.05s cubic-bezier(.16,.9,.2,1), filter 1.05s cubic-bezier(.16,.9,.2,1);
}
.frame.is-lens.open .lens-photo{
  clip-path:circle(78% at 50% 50%);
  filter:saturate(1.05) brightness(1);
}
@media (hover:hover) and (pointer:fine){
  .frame.is-lens:hover .lens-photo{
    clip-path:circle(78% at 50% 50%);
    filter:saturate(1.05) brightness(1);
  }
}

.lens-barrel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);
  width:97cqmin;height:97cqmin;border-radius:50%;pointer-events:none;z-index:2;
  padding:2.2%;
  background:radial-gradient(circle at 32% 26%, #6b665d 0%, #3a362f 42%, #201d19 74%, #100e0c 100%);
  box-shadow:
    0 16px 30px -16px rgba(0,0,0,.6),
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    inset 0 0 0 3px rgba(243,107,47,.5),
    inset 0 -5px 11px rgba(0,0,0,.4),
    inset 0 5px 8px rgba(255,255,255,.08);
  opacity:1;
  transition:opacity .85s cubic-bezier(.16,.9,.2,1) .12s, transform .85s cubic-bezier(.16,.9,.2,1) .12s;
}
.frame.is-lens.open .lens-barrel{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.25);
}
@media (hover:hover) and (pointer:fine){
  .frame.is-lens:hover .lens-barrel{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.25);
  }
}
.lens-inner{
  display:block;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#2a0f04;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.5);
}
.lens-coating{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.4;
  background:conic-gradient(from 200deg at 50% 50%,
    rgba(255,220,180,0) 0deg, rgba(255,230,190,.4) 40deg, rgba(255,150,110,.22) 80deg,
    rgba(255,220,180,0) 130deg, rgba(255,220,180,0) 360deg);
}
.lens-blades{
  position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;
  transition:transform 1s cubic-bezier(.2,.9,.25,1), opacity .8s ease .05s;
}
.frame.is-lens.open .lens-blades{transform:rotate(52deg) scale(1.8);opacity:0}
@media (hover:hover) and (pointer:fine){
  .frame.is-lens:hover .lens-blades{transform:rotate(52deg) scale(1.8);opacity:0}
}
.blade{fill:#2b2925;stroke:#0a0908;stroke-width:.6}
.blade:nth-child(odd){fill:#38352f}

.frame.is-flip:hover .flip-hint{transform:scale(1.12)}
.frame.is-flip.flipped .flip-hint{transform:scaleX(-1)}

/* ══ CURVED AUTO-SCROLLING THEATER ══ */
.theater-vp{overflow:hidden;padding-block:clamp(34px,5.4vw,70px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.theater{display:flex;gap:clamp(14px,1.9vw,28px);width:max-content}
.theater-c{flex:none;width:clamp(190px,19vw,290px);display:block;will-change:transform}
.theater-c .frame-in{box-shadow:0 32px 60px -28px rgba(36,36,36,.55)}
.theater-c .cap{display:block;padding-top:11px;text-align:center}
.theater-c .cap b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.theater-c .cap span{font-family:var(--mono);font-size:9.4px;letter-spacing:.15em;text-transform:uppercase;color:#9b938c}

/* ══ MARQUEE ══ */
.mq{background:var(--ink);padding-block:15px;overflow:hidden}
.mq-t{display:flex;width:max-content;gap:28px;align-items:center;will-change:transform}
.mq-t span{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,36px);letter-spacing:-.028em;white-space:nowrap;color:#fff}
.mq-t span.o{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-t i{width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:none}

/* ══ HEADS + CARDS ══ */
.head2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,3.2vw,60px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.cards{display:grid;gap:18px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1.8px solid var(--cream-3);border-radius:24px;padding:24px;
  transition:transform .42s cubic-bezier(.2,.9,.3,1),box-shadow .42s,border-color .42s}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -26px rgba(243,107,47,.55);border-color:var(--orange)}
.card .mslot{display:block;margin:-6px 0 10px}
.card .ico{margin-bottom:14px}
.card-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--orange);margin-bottom:7px}
.card h3{margin-bottom:9px}
.card p{font-size:14.8px;color:var(--ink-3);margin-bottom:16px}
.lnk{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14.2px;color:var(--clay)}
.lnk .ar{transition:transform .3s}
.card:hover .lnk .ar{transform:translateX(5px)}

/* ══ CHECKLIST ══ */
.why-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px}
.why-i{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.6px solid var(--cream-3);border-radius:16px;padding:18px;transition:transform .34s,border-color .34s}
.why-i:hover{transform:translateY(-5px);border-color:var(--orange)}
.why-i .tick{width:23px;height:23px;border-radius:50%;background:var(--grad-cta);flex:none;display:grid;place-items:center;margin-top:1px}
.why-i .tick svg{width:12px;height:12px}
.why-i p{margin:0;font-size:14.8px;line-height:1.5;color:var(--ink-2)}

/* ══ PROCESS FILMSTRIP ══ */
.strip-vp{overflow:hidden}
.strip-wrap{padding-right:0}
.strip{display:flex;gap:16px;width:max-content;padding-block:10px}
.step{width:min(80vw,352px);flex:none;background:#fff;border:1.8px solid var(--cream-3);border-radius:22px;padding:22px}
.step-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.step-n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.05em}
.step h3{font-size:19px;margin-bottom:8px}
.step p{margin:0;font-size:14.4px;color:var(--ink-3)}
.sprock{display:flex;gap:14px;justify-content:center;padding-top:16px}
.sprock i{width:12px;height:8px;border-radius:2px;background:var(--cream-3)}

/* ══ PORTFOLIO GRID ══ */
.pf{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.pf-item{grid-column:span 2;display:block}
.pf-item.w3{grid-column:span 3}
.pf-item.w4{grid-column:span 4}
.pf-cap{display:block;padding:13px 2px 0}
.pf-cap b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.02em;color:var(--ink)}
.pf-cap span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9b938c}

/* ══ CINEMATIC CURVED CONVEYOR (portfolio page) ══ */
.curve-vp{overflow:hidden;padding-block:clamp(20px,4vw,54px)}
.curve{display:flex;gap:clamp(16px,2vw,30px);width:max-content;padding-inline:var(--gut);align-items:center}
.curve-c{flex:none;width:clamp(210px,22vw,330px);display:block;will-change:transform}
.curve-c .frame-in{box-shadow:0 26px 50px -26px rgba(36,36,36,.55)}
.curve-c .cap{display:block;padding-top:12px;text-align:center}
.curve-c .cap b{display:block;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.curve-c .cap span{font-family:var(--mono);font-size:9.6px;letter-spacing:.15em;text-transform:uppercase;color:#9b938c}

/* ══ SPLIT ══ */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,4vw,66px);align-items:center}
.split-flip{grid-template-columns:1.18fr .82fr}
.split-flip .split-media{order:2}
.quote{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,28px);line-height:1.26;color:var(--ink);
  margin:20px 0;padding-left:20px;border-left:5px solid var(--orange);letter-spacing:-.026em}

/* ══ RETAINER BAND ══ */
.band{background:var(--grad-band);position:relative;overflow:hidden;color:#40160b}
.band h2,.band h3{color:#2e1008}
.band .lede{color:#5b2411}
.band .eyebrow{color:#6b2c15}
.band .eyebrow::before{background:#2e1008}
.band .hl{background:linear-gradient(90deg,#fff3d6,#ffe9b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.band-g{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:12px}
.band-c{background:rgba(255,248,240,.82);border:1.6px solid rgba(255,255,255,.7);border-radius:22px;padding:24px;
  transition:background .35s,transform .35s,box-shadow .35s}
.band-c:hover{background:#fff;transform:translateY(-6px);box-shadow:0 22px 44px -24px rgba(90,25,10,.5)}
.band-c .ico{background:var(--cream);border-color:var(--cream-3);margin-bottom:12px}
.band-c h3{font-size:20px;margin-bottom:8px;color:var(--ink)}
.band-c p{margin:0;font-size:14.4px;color:var(--ink-3)}
.band-btm{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-top:32px}
.band-note{color:#6b2c15}

/* ══ FINAL CTA + FOOTER ══ */
.fin{text-align:center;position:relative;overflow:hidden;background:var(--cream)}
.fin h2{font-size:clamp(38px,7.4vw,110px)}
.fin-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:28px}
.crumbs{display:flex;gap:9px;align-items:center;padding-top:126px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#a9a19a}
.crumbs b{color:var(--clay);font-weight:500}
.crumbs ~ .hero{padding-top:clamp(20px,3vw,40px)}
.sibs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sib{display:flex;align-items:center;gap:12px;background:#fff;border:1.6px solid var(--cream-3);border-radius:16px;padding:12px 16px;
  font-family:var(--display);font-weight:700;font-size:14.4px;color:var(--ink);transition:transform .34s,border-color .34s}
.sib:hover{transform:translateY(-4px);border-color:var(--orange)}
.sib .ar{margin-left:auto;color:var(--clay)}
.ftr{background:var(--ink);color:var(--sand);padding-block:clamp(50px,6vw,86px) 26px}
.ftr h4{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin:0 0 15px}
.ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.05fr;gap:clamp(22px,3vw,50px)}
.ftr .flogo{height:82px;width:auto;margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{font-size:14.2px;color:var(--warm-grey);transition:color .24s}
.ftr a:hover{color:var(--yellow)}
.ftr p{font-size:14.2px;color:var(--warm-grey);max-width:34ch}
.ftr .soc{margin-top:16px}
.ftr-btm{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid rgba(212,197,168,.18);margin-top:44px;padding-top:20px}
.ftr-btm .meta{color:#8d857e}
.wa{position:fixed;right:16px;bottom:16px;z-index:800;display:flex;align-items:center;gap:9px;background:var(--grad-cta);color:#fff;
  border-radius:999px;padding:9px 18px 9px 9px;font-family:var(--display);font-weight:700;font-size:14px;
  box-shadow:0 14px 30px -12px rgba(211,79,58,.9);transition:transform .3s}
.wa:hover{transform:translateY(-3px) scale(1.03)}
.wa img{height:40px;width:auto}

/* ══ CONTACT ══ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:start;padding-top:60px}
.contact-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.contact-facts>div{display:flex;gap:13px;align-items:center}
.contact-facts b{display:block;font-family:var(--mono);font-size:9.6px;letter-spacing:.18em;text-transform:uppercase;color:#a9a19a;font-weight:500}
.contact-facts a,.contact-facts span{font-size:15px;color:var(--ink)}
.form-card{background:#fff;border:1.8px solid var(--cream-3);border-radius:26px;padding:clamp(22px,3vw,38px);box-shadow:0 26px 60px -40px rgba(36,36,36,.5)}
.form-card label{display:block;margin-bottom:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a827a}
.form-card label span{color:var(--clay)}
.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:7px;padding:13px 15px;border:1.6px solid var(--cream-3);
  border-radius:12px;font:inherit;font-size:15.5px;color:var(--ink);background:var(--cream);letter-spacing:0;text-transform:none}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--orange);background:#fff}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px}
.cf-turnstile{margin:4px 0 18px}
.confirm-check{display:flex;align-items:center;gap:9px;font-family:var(--body);font-size:14px;
  letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:18px;cursor:pointer}
.confirm-check input{width:17px;height:17px;margin:0;flex:none;accent-color:var(--orange)}
.field-err{background:#fff1ec;border:1.6px solid #ffc8b6;color:#a3341f;border-radius:10px;
  padding:11px 14px;font-size:13.5px;margin:0 0 4px}
.form-card input:invalid:not(:placeholder-shown),
.form-card input:user-invalid{border-color:#e0523a}
.notice{border-radius:14px;padding:18px 20px;margin-bottom:18px}
.notice.ok{background:var(--cream);border:1.6px solid var(--cream-3)}
.notice.err{background:#fff1ec;border:1.6px solid #ffc8b6;color:#a3341f}
.notice ul{margin:0;padding-left:18px}

/* ══ RESPONSIVE ══ */
@media (max-width:1180px){
  .nav>li>a,.nav>li>button{padding:10px 8px;font-size:13.6px}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .sibs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:flex}
  .hero-in,.split,.split-flip,.contact-grid{grid-template-columns:1fr;gap:38px}
  .split-flip .split-media{order:0}
  .split-media{max-width:460px}
  .head2{grid-template-columns:1fr;align-items:start;gap:18px}
  .cards-3,.cards-2{grid-template-columns:1fr}
  .band-g{grid-template-columns:1fr}
  .ftr-g{grid-template-columns:1fr 1fr}
  .pf{grid-template-columns:repeat(2,1fr)}
  .pf-item,.pf-item.w3,.pf-item.w4{grid-column:span 1}
}
@media (max-width:620px){
  .hdr-in{height:88px}
  .brand img{height:52px}
  .mnav{inset:88px 0 0}
  .hero{padding-top:120px}
  .crumbs{padding-top:110px}
  .hdr-cta .btn-p{display:none}
  .soc a{width:38px;height:38px}
  .pf,.ftr-g,.contact-facts,.f2,.sibs{grid-template-columns:1fr}
  .step{width:82vw}
  .wa img{height:32px}
  .frame-in{aspect-ratio:var(--ar-m,var(--ar,4/3))}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .frame-in{transform:none!important;opacity:1!important}
}

/* ══════════════════════════════════════════════════════════════
   CURSOR MASCOT — DISABLED
   The custom cursor-follower and its touch equivalent are fully hidden
   here, and the normal system pointer is restored everywhere. The JS
   that drives them may still run in the background (harmless — it's
   just updating a hidden element's position), but none of it can ever
   be seen. This was done as a CSS-only override rather than editing the
   JS file directly, since it's the safest way to guarantee this without
   risking any other behaviour on the page.
   ══════════════════════════════════════════════════════════════ */
#cur, .touch-pop { display: none !important; }
body.cur-on, body.cur-on a, body.cur-on button, body.cur-on .frame,
body.cur-on .card, body.cur-on .pf-item, body.cur-on .chip, body.cur-on .sib {
  cursor: auto !important;
}
.frame.is-lens { cursor: pointer !important; }
.frame.is-flip { cursor: pointer !important; }