/* Layout: full-bleed cinematic bands alternating Epic green, sand, black and ice; centered display type over video and photo frames. */
:root{
  color-scheme: dark;
  --green:#011E1A;
  --green-2:#04271F;
  --wine:#E6DAC3; /* Areia (sand), the fifth brand color */
  --wine-brown:#E6DAC3;
  --umber:#1D1D1B; /* Epic Black */
  --cocoa:#1D1D1B;
  --cream:#FBFBFB; /* Epic Ice */
  --sand:#E6DAC3;
  --egreen:#011E1A; /* text on Areia: same deep green as the page backgrounds */
  --egreen-line:rgba(1,30,26,.38);
  --black:#000000;
  --gold:#DCB961;
  --gold-ink:#A6822C;
  --gold-line:rgba(220,185,97,.55);
  --gold-faint:rgba(220,185,97,.18);
  --veil:rgba(0,0,0,.38);
  --tag-bg:rgba(1,30,26,.82);

  --f-display:"Instrument Serif","Bodoni Moda",Didot,"Times New Roman",serif;
  --f-script:"Pinyon Script","Snell Roundhand",cursive;
  --f-caps:"Times New Roman",Times,Georgia,serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter:clamp(16px,4vw,64px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--green);color:var(--gold);font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ---------- shared type ---------- */
.display{font-family:var(--f-display);text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
.script{font-family:var(--f-script);text-transform:none;letter-spacing:0;line-height:1}
.caps{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.32em;font-size:13px;line-height:1.5}
.eyebrow{font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.42em;font-size:11px}
.body{font-size:14.5px;line-height:1.7;max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;border:1px solid var(--gold-line);padding:.95em 2.2em;font-family:var(--f-caps);text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--gold);background:transparent;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.btn:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.btn.pill{border-radius:999px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- editable frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--green-2);isolation:isolate}
.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ph-dusk{background:radial-gradient(60% 45% at 72% 38%,rgba(214,150,80,.55),transparent 70%),radial-gradient(40% 30% at 20% 75%,rgba(70,110,90,.5),transparent 70%),linear-gradient(180deg,#22352d 0%,#0e1b16 55%,#050b09 100%)}
.ph-warm{background:radial-gradient(55% 50% at 60% 30%,rgba(232,170,96,.6),transparent 70%),radial-gradient(70% 60% at 30% 90%,rgba(60,28,12,.9),transparent 70%),linear-gradient(160deg,#5a3418,#1e0f07)}
.ph-sea{background:radial-gradient(70% 40% at 50% 20%,rgba(190,214,205,.45),transparent 70%),radial-gradient(80% 60% at 40% 100%,rgba(16,88,92,.85),transparent 70%),linear-gradient(180deg,#5d7d78,#0f3236 70%,#071a1c)}
.ph-stone{background:radial-gradient(50% 50% at 35% 35%,rgba(230,214,190,.5),transparent 70%),linear-gradient(140deg,#8c7a66,#3a3027 70%,#1a1612)}
.ph-leaf{background:radial-gradient(35% 35% at 25% 30%,rgba(150,190,90,.55),transparent 70%),radial-gradient(40% 35% at 70% 60%,rgba(100,150,70,.45),transparent 70%),radial-gradient(30% 25% at 55% 15%,rgba(230,240,200,.5),transparent 70%),linear-gradient(180deg,#2a3c2a,#0f1a12)}
.ph-night{background:radial-gradient(45% 35% at 50% 55%,rgba(196,140,70,.4),transparent 70%),radial-gradient(60% 50% at 85% 20%,rgba(40,70,60,.6),transparent 70%),linear-gradient(180deg,#0a1310,#020504)}
.ph-rose{background:radial-gradient(50% 45% at 65% 35%,rgba(200,110,90,.5),transparent 70%),linear-gradient(170deg,#5a2620,#1d0807)}
.ph-sand{background:radial-gradient(60% 50% at 50% 30%,rgba(250,230,200,.65),transparent 70%),linear-gradient(180deg,#c9b192,#7a6248 70%,#3a2c1f)}
.ph-bed{background:radial-gradient(60% 50% at 40% 40%,rgba(250,244,236,.8),transparent 70%),linear-gradient(160deg,#d8cbbb,#857563 75%,#40362c)}










/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s,box-shadow .5s}
.site-header.solid{background:var(--green);box-shadow:0 1px 0 var(--gold-faint)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:96px;padding-inline:var(--gutter)}
.nav ul{display:flex;gap:clamp(16px,2.4vw,40px);list-style:none;margin:0;padding:0}
.nav ul.right{justify-content:flex-end}
.nav a{font-family:var(--f-caps);font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.92;display:inline-flex;align-items:center;gap:.45em;transition:opacity .3s}
.nav a:hover{opacity:1}
.nav .chev{width:8px;height:8px}
.logo{display:grid;justify-items:center;line-height:1;gap:6px}
.logo b{font-family:var(--f-display);font-weight:400;font-size:40px;letter-spacing:.06em}
.logo small{font-family:var(--f-caps);font-size:7px;letter-spacing:.5em;text-transform:uppercase;padding-left:.5em}
.nav .logo{display:grid;letter-spacing:0;opacity:1}
.burger{display:none;background:none;border:0;color:var(--gold);cursor:pointer;padding:8px;justify-self:end}
.burger svg{width:26px;height:26px}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--green);display:grid;place-content:center;gap:22px;text-align:center;padding:calc(40px + env(safe-area-inset-top,0px)) 24px 40px}
.mobile-menu[hidden]{display:none}
.mobile-menu a{font-family:var(--f-display);font-size:34px;text-transform:uppercase}
.mobile-menu button{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:20px;background:none;border:0;color:var(--gold);font-size:28px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(600px,100svh,960px);display:grid;place-items:center;text-align:center;overflow:hidden}
.hero .frame{position:absolute;inset:0}
.hero .frame .sweep{position:absolute;inset:-20%;z-index:0;background:linear-gradient(115deg,transparent 40%,rgba(255,220,160,.10) 50%,transparent 60%);animation:sweep 14s ease-in-out infinite alternate}
@keyframes sweep{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,var(--veil) 30%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.6) 100%)}
.hero-copy{position:relative;z-index:4;display:grid;justify-items:center;gap:0;padding-inline:var(--gutter);margin-top:20px}
.hero-copy .script{font-size:clamp(30px,4.4vw,62px);margin-bottom:-.12em;transform:rotate(-2deg)}
.hero-copy h1{font-size:clamp(52px,12.6vw,232px);line-height:.86;letter-spacing:-.015em}
.hero-copy .btn{margin-top:clamp(18px,2.6vw,34px);background:rgba(1,30,26,.35);backdrop-filter:blur(2px)}
.clients{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-block:26px 30px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;gap:clamp(48px,6vw,96px);width:max-content;animation:marquee 38s linear infinite}
.clients span{font-family:var(--f-display);font-size:clamp(20px,2.2vw,30px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:.95}
.clients span small{display:block;font-family:var(--f-caps);font-size:8px;letter-spacing:.42em;text-align:center;margin-top:2px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- intro ---------- */
.intro{position:relative;padding-block:clamp(80px,10vw,140px)}
.intro .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;max-width:1000px;margin-inline:auto}
.intro .rule{position:absolute;left:0;top:50%;width:calc((100vw - 1000px)/2 - var(--gutter) + 40px);max-width:24vw;height:1px;background:var(--gold-line)}
.intro .frame{aspect-ratio:4/5.6;width:100%}
.intro h2{font-size:clamp(44px,5.6vw,76px);line-height:.9}
.intro .caps{margin-top:22px;font-size:13px;letter-spacing:.34em}
.intro .body{margin-top:18px;font-size:14px}
.intro .btn{margin-top:30px}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.svc{position:relative;height:clamp(440px,48vw,640px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3vw,44px) 24px 22px;text-align:center}
.svc .frame{position:absolute;inset:0}
.svc::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.42);transition:background .6s}
.svc:hover::before{background:rgba(0,0,0,.18)}
.svc h3{position:relative;z-index:4;font-family:var(--f-display);font-size:clamp(24px,2.5vw,36px);text-transform:uppercase;line-height:1}
.svc .arrow{position:relative;z-index:4;align-self:flex-end;width:26px;height:26px;transition:transform .4s}
.svc:hover .arrow{transform:translateX(6px)}
/* ---------- mission ---------- */
.mission-hero{position:relative;height:clamp(420px,47vw,620px);display:grid;place-items:center;background:
  linear-gradient(118deg,transparent 0 22%,rgba(255,255,255,.35) 28%,transparent 36%,transparent 52%,rgba(255,255,255,.3) 60%,transparent 70%),
  radial-gradient(80% 70% at 50% 45%,#EFE6D6,#E6DAC3 60%,#D8C9AC)}
.mission-hero::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .8  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mission-hero h2{text-align:center;padding-inline:var(--gutter);position:relative;z-index:2;font-size:clamp(64px,11vw,150px);text-shadow:0 1px 0 rgba(255,255,255,.55);background:linear-gradient(180deg,#0A3A33,#011E1A 55%,#000F0C);-webkit-background-clip:text;background-clip:text;color:transparent}
.mission{background:var(--wine-brown);text-align:center;padding-block:clamp(70px,8vw,110px)}
.mission .caps{max-width:640px;margin-inline:auto;font-size:15px;letter-spacing:.34em}
.mission .body{margin:22px auto 0;max-width:720px}

/* ---------- split (drone) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--umber);min-height:clamp(520px,52vw,680px)}
.split .text{padding:clamp(48px,5.5vw,84px) clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.split h2{font-size:clamp(46px,5.4vw,74px);line-height:.95}
.split .caps{font-size:14px}
.split .lines{display:grid;gap:2px}
.split .btn{align-self:flex-start;margin-top:12px;padding-inline:3.4em}
.split .frame{min-height:340px}

/* ---------- capabilities ---------- */
.caps-sec{background:var(--cream);color:var(--gold-ink);padding-block:clamp(70px,8vw,110px)}
.caps-sec .grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-left:var(--gutter)}
.caps-sec h2{font-size:clamp(40px,4.4vw,64px);overflow-wrap:anywhere;line-height:.92;margin-top:12px}
.caps-sec .ctrl{display:flex;gap:10px;margin-top:28px}
.caps-sec .ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.caps-sec .ctrl button:hover{background:var(--gold-ink);color:var(--cream)}
.caps-sec .ctrl svg{width:16px;height:16px}
.rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;min-width:0}
.rail::-webkit-scrollbar{display:none}
.cap{flex:0 0 clamp(220px,22vw,280px);aspect-ratio:3/5.2;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:var(--gold)}
.cap .frame{position:absolute;inset:0}
.cap::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7))}
.cap h3{position:relative;z-index:4;font-family:var(--f-display);font-size:26px;line-height:1.05}
.cap p{position:relative;z-index:4;font-size:12.5px;line-height:1.5;margin-top:6px;color:#f3e6c4}

/* ---------- statement ---------- */
.statement{position:relative;height:clamp(520px,62vw,900px);display:grid;place-items:center;text-align:center;overflow:hidden}
.statement .frame{position:absolute;inset:0}
.statement::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(60% 50% at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.statement .blur{position:absolute;z-index:2;border-radius:50%;filter:blur(40px);background:rgba(40,70,30,.55)}
.statement h2{position:relative;z-index:4;font-size:clamp(40px,6.4vw,92px);line-height:.95;padding-inline:var(--gutter)}
.statement h2 .script{display:block;font-size:1.25em;margin-top:-.18em;transform:rotate(-3deg)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--wine);min-height:clamp(480px,45vw,590px);position:relative}
.why .text{position:relative;padding:clamp(56px,7vw,100px) clamp(24px,4vw,56px) 56px clamp(24px,12vw,240px);display:grid;align-content:center;gap:20px}
.why .text::before{content:"";position:absolute;left:0;top:clamp(76px,9vw,112px);width:clamp(16px,10vw,170px);height:1px;background:var(--gold-line)}
.why .caps{font-size:16px;letter-spacing:.32em}
.why .body{font-size:13.5px;max-width:38ch}
.why .media{position:relative;min-height:360px}
.why .media .frame{position:absolute;inset:0}
.why .media::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--sand) 0%,rgba(230,218,195,.35) 35%,transparent 70%)}
.why h2{position:absolute;z-index:4;left:6%;top:18%;font-size:clamp(54px,7.6vw,110px);line-height:.88;opacity:.92}
.stats{display:flex;flex-wrap:wrap;gap:28px 40px;margin-top:8px}
.stats div{display:grid}
.stats b{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1}
.stats span{font-family:var(--f-caps);font-size:10px;letter-spacing:.3em;text-transform:uppercase}

/* ---------- testimonial ---------- */
.quote{background:var(--cocoa);text-align:center;padding-block:clamp(64px,7vw,96px)}
.quote .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1080px;margin-inline:auto;text-align:left}
.quote .frame{aspect-ratio:16/9;width:100%}
.quote .play{position:absolute;z-index:3;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:1px solid var(--gold-line);display:grid;place-items:center;background:rgba(0,0,0,.25)}
.quote .play svg{width:20px;height:20px;margin-left:3px}
.quote h2{font-size:clamp(36px,4.4vw,58px);line-height:.95}
.quote .body{margin-top:18px;font-size:14px}
.quote .who{margin-top:26px;display:grid;gap:6px}
.quote .who .eyebrow{font-size:10.5px}
.quote .who small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.quote .nav-q{display:flex;gap:14px;margin-top:26px}
.quote .nav-q button{background:none;border:0;color:var(--gold);cursor:pointer;padding:4px}
.quote .nav-q svg{width:30px;height:30px}
.dots{display:flex;gap:8px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--gold-line)}
.dots i.on{background:var(--gold)}

/* ---------- work ---------- */
.work-head{text-align:center;padding-block:clamp(80px,9vw,120px) clamp(48px,5vw,72px)}
.work-head h2{font-size:clamp(46px,7vw,98px);line-height:.9;margin-top:10px}
.work-head hr{width:min(520px,70%);border:0;border-top:1px solid var(--gold-line);margin:26px auto}
.work-head .body{margin-inline:auto;max-width:56ch;font-size:13.5px}
.work-head .btn{margin-top:30px}
.work-rail{position:relative}
.work-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.work-track::-webkit-scrollbar{display:none}
.case{position:relative;flex:0 0 calc(100% / 3);height:clamp(420px,38vw,520px);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.4vw,36px);border-right:1px solid rgba(0,0,0,.4)}
.case .frame{position:absolute;inset:0}
.case::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.08) 40%,rgba(0,0,0,.72));transition:background .5s}
.case:hover::before{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6))}
.case h3{position:relative;z-index:4;font-family:var(--f-display);font-size:clamp(30px,3vw,42px);line-height:1}
.case p{position:relative;z-index:4;font-size:12.5px;line-height:1.5;margin-top:8px;max-width:36ch;color:#f1e3bd}

.work-next{position:absolute;right:18px;top:50%;translate:0 -50%;z-index:6;width:34px;height:34px;border-radius:50%;border:0;background:var(--gold);color:var(--green);display:grid;place-items:center;cursor:pointer}
.work-next.prev{right:auto;left:18px}
.work-next svg{width:14px;height:14px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(460px,46vw,600px)}
.contact .frame{min-height:300px}
.contact .form-side{background:var(--wine);padding:clamp(48px,6vw,90px) clamp(24px,4.4vw,64px);display:grid;align-content:center;gap:14px}
.contact h2{font-size:clamp(44px,5vw,70px);line-height:.9}
.contact form{display:grid;gap:18px;margin-top:10px;max-width:520px}
.contact label{font-size:11px;letter-spacing:.06em}
.contact input[type=email],.contact input[type=text]{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-line);color:var(--gold);padding:10px 0;font:300 15px var(--f-body)}
.contact input::placeholder{color:rgba(220,185,97,.45)}
.check{display:flex;gap:10px;align-items:center;font-size:12.5px}
.check input{appearance:none;width:13px;height:13px;border:1px solid var(--gold-line);margin:0;flex:none;cursor:pointer}
.check input:checked{background:var(--gold)}
.contact .btn{justify-self:start;padding-inline:4.5em;letter-spacing:.12em;font-family:var(--f-body);text-transform:none;font-size:13px}
.note{font-size:12px;min-height:1.2em;opacity:.9}

/* ---------- footer ---------- */
footer{background:var(--green);padding-block:clamp(56px,6vw,80px) 28px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr) minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,4vw,56px)}
.foot .logo{justify-items:start}
.foot .about{display:grid;gap:14px;font-size:12.5px;line-height:1.7}
.foot .about strong{font-weight:700;font-size:13px}
.foot h4{font-family:var(--f-display);font-size:24px;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:12.5px}
.social{display:flex;gap:14px;margin-bottom:28px}
.social svg{width:18px;height:18px}
.foot .news{display:grid;gap:14px;align-content:start}
.foot .news .row{display:flex;gap:12px;align-items:flex-end}
.foot .news input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--gold-line);color:var(--gold);padding:8px 0;font:300 14px var(--f-body)}
.foot .news .btn{padding:.7em 1em;letter-spacing:.04em;text-transform:none;font-family:var(--f-body);font-size:12px}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;font-size:11.5px}

/* ---------- motion ---------- */
.reveal{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity 1.1s}
.reveal.pre{transform:translateY(22px);opacity:.35}
@media (prefers-reduced-motion:reduce){
  .clients-track,.hero .frame .sweep{animation:none}
  .reveal,.reveal.pre{transition:none;transform:none;opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav ul{display:none}
  .nav{grid-template-columns:1fr auto 1fr;height:78px}
  .burger{display:block;grid-column:3}
  .logo{grid-column:2}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{flex-basis:50%}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .intro .grid,.split,.why,.contact,.quote .grid,.caps-sec .grid{grid-template-columns:minmax(0,1fr)}
  .intro .rule{display:none}
  .intro .frame{max-width:420px}
  .split .frame{order:-1;min-height:300px}
  .why .text{padding-left:var(--gutter);padding-right:var(--gutter)}
  .why .text::before{display:none}
  .why .media{min-height:380px}
  .why .media::before{background:linear-gradient(180deg,var(--wine) 0%,transparent 45%)}
  .caps-sec .grid{padding-right:var(--gutter)}
  .case{flex-basis:86%}
  .svc{height:380px}
  .foot{grid-template-columns:minmax(0,1fr)}
  .contact .frame{min-height:260px}
  
}
@media (max-width:460px){
  .services{grid-template-columns:minmax(0,1fr)}
  .svc{height:300px}
}

/* ---------- multi-page ---------- */


.t-green{background:var(--green);color:var(--gold)}
.t-wine{background:var(--wine);color:var(--gold)}
.t-umber{background:var(--umber);color:var(--gold)}
.t-cocoa{background:var(--cocoa);color:var(--gold)}
.t-black{background:var(--black);color:var(--gold)}
.t-cream{background:var(--cream);color:var(--gold-ink)}
.t-cream .btn{color:var(--gold-ink);border-color:var(--gold-ink)}
.t-cream .btn:hover{background:var(--gold-ink);color:var(--cream)}
.center{text-align:center}
.center .body{margin-inline:auto}
.pad{padding-block:clamp(72px,9vw,128px)}
.ico{width:11px;height:11px}

/* inner hero */
.phero{position:relative;min-height:clamp(520px,82svh,860px);display:grid;align-items:end;justify-items:center;text-align:center;overflow:hidden;padding:calc(130px + env(safe-area-inset-top,0px)) var(--gutter) clamp(56px,8vw,110px)}
.phero>.frame{position:absolute;inset:0}
.phero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 40%,rgba(0,0,0,.7))}
.phero.tint-wine::before{background:linear-gradient(180deg,rgba(1,30,26,.72),rgba(1,30,26,.5) 50%,rgba(1,30,26,.9))}
.phero.tint-green::before{background:linear-gradient(180deg,rgba(1,30,26,.7),rgba(1,30,26,.45) 50%,rgba(1,30,26,.92))}
.phero .inner{position:relative;z-index:4;display:grid;justify-items:center;gap:18px;max-width:980px}
.phero h1{font-size:clamp(48px,8.4vw,120px);line-height:.9}
.phero .script{font-size:clamp(30px,4vw,54px);margin-bottom:-.3em;transform:rotate(-2deg)}
.phero .body{font-size:14.5px;margin-inline:auto}


/* duo: half text, half image */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(520px,50vw,700px)}
.duo .text{padding:clamp(56px,6vw,96px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.duo .text h2{font-size:clamp(42px,5vw,72px);line-height:.92}
.duo .text .caps{font-size:13.5px}
.duo .text .btn{align-self:flex-start;margin-top:8px}
.duo>.frame{min-height:360px}
.duo.rev .text{order:2}
.duo .role{font-family:var(--f-script);font-size:34px;line-height:1;text-transform:none}
.list-lines{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--gold-faint)}
.list-lines li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--gold-faint);font-size:14px}
.list-lines li span:last-child{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;text-align:right}
.t-cream .list-lines,.t-cream .list-lines li{border-color:rgba(166,130,44,.25)}

/* big statement over image */
.band{position:relative;min-height:clamp(420px,46vw,640px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:80px var(--gutter)}
.band>.frame{position:absolute;inset:0}
.band::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.5)}
.band.tint-wine::before{background:rgba(1,30,26,.72)}
.band .inner{position:relative;z-index:4;display:grid;gap:20px;justify-items:center;max-width:980px}
.band h2{font-size:clamp(40px,6vw,88px);line-height:.92}
.band .script{display:block;font-size:1.2em;margin-top:-.15em;transform:rotate(-3deg)}

/* service index */
.svc-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--gold-faint);margin-top:48px}
.svc-index a{padding:28px 24px 30px;border-bottom:1px solid var(--gold-faint);border-right:1px solid var(--gold-faint);display:grid;gap:8px;transition:background .4s}
.svc-index a:nth-child(3n){border-right:0}
.svc-index a:hover{background:rgba(220,185,97,.06)}
.svc-index b{font-family:var(--f-display);font-weight:400;font-size:30px;text-transform:uppercase;line-height:1}
.svc-index span{font-size:13px;line-height:1.6}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gold-faint);margin-top:52px;border:1px solid var(--gold-faint)}
.step{background:var(--black);padding:32px 28px 36px;display:grid;gap:10px;align-content:start}
.step i{font-style:normal;font-family:var(--f-display);font-size:52px;line-height:1}
.step b{font-family:var(--f-caps);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.step span{font-size:13.5px;line-height:1.65}

/* work grid */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.chips button{background:none;border:1px solid var(--gold-line);color:var(--gold);padding:.7em 1.4em;border-radius:999px;font-family:var(--f-caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.chips button[aria-pressed="true"],.chips button:hover{background:var(--gold);color:var(--green)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-inline:6px}
.pcard{position:relative;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.2vw,32px);overflow:hidden}

.pcard>.frame{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pcard:hover>.frame{transform:scale(1.04)}
.pcard::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.78))}
.pcard h3,.pcard p,.pcard small{position:relative;z-index:4}
.pcard small{font-family:var(--f-caps);font-size:10px;letter-spacing:.32em;text-transform:uppercase}
.pcard h3{font-family:var(--f-display);font-size:clamp(28px,2.6vw,38px);line-height:1;margin-top:8px}
.pcard p{font-size:12.5px;color:#f1e3bd;margin-top:6px}

/* project */
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:56px;padding-top:32px;border-top:1px solid var(--gold-faint);text-align:left}
.meta div{display:grid;gap:8px;align-content:start}
.meta span{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.meta b{font-weight:300;font-size:14.5px;line-height:1.55}
.film{position:relative;aspect-ratio:16/9;width:100%;max-width:1240px;margin-inline:auto}
.film>.frame{position:absolute;inset:0}
.film .play,.vplay{position:absolute;z-index:3;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:1px solid var(--gold-line);display:grid;place-items:center;background:rgba(0,0,0,.28);color:var(--gold)}
.film .play svg,.vplay svg{width:24px;height:24px;margin-left:4px}
.vplay{width:48px;height:48px}.vplay svg{width:14px;height:14px;margin-left:2px}
.reels-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-left:var(--gutter)}
.reels{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;min-width:0}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 clamp(180px,18vw,240px);aspect-ratio:9/16;scroll-snap-align:start}
.reel>.frame{position:absolute;inset:0}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(140px,16vw,240px);gap:6px;padding:6px}
.gallery .frame{grid-column:span 2}
.gallery .frame.w3{grid-column:span 3}
.gallery .frame.tall{grid-row:span 2}
.impact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:48px}
.impact div{display:grid;gap:6px;justify-items:center}
.impact b{font-family:var(--f-display);font-weight:400;font-size:clamp(56px,6vw,88px);line-height:1}
.impact span{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:44px}
.next a{display:flex;align-items:center;gap:18px}
.next a b{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4vw,56px);line-height:1;text-transform:uppercase}
.next svg{width:34px;height:34px}




/* journal */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.jpost{display:grid;gap:12px;align-content:start}
.jpost>.frame{aspect-ratio:4/3}
.jpost small{font-family:var(--f-caps);font-size:10px;letter-spacing:.32em;text-transform:uppercase}
.jpost h3{font-family:var(--f-display);font-size:clamp(24px,2.2vw,30px);line-height:1.05}
.jpost p{font-size:13.5px;line-height:1.6}
.jpost .more{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid var(--gold-line);justify-self:start;padding-bottom:3px}

/* contact page */
.cpage{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:100svh}
.cpage .left{display:grid;grid-template-rows:minmax(320px,1fr) auto}
.cpage .left .frame{min-height:320px}
.cpage .details{background:var(--umber);padding:clamp(36px,4vw,56px) clamp(24px,4vw,56px);display:grid;gap:18px}
.cpage .details div{display:grid;gap:4px}
.cpage .details span{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.cpage .details b{font-weight:300;font-size:15px}
.cpage .right{padding:calc(140px + env(safe-area-inset-top,0px)) clamp(24px,5vw,88px) 80px}
.cpage h1{font-size:clamp(52px,7vw,104px);line-height:.88}
.cpage .lead{margin-top:18px}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 28px;margin-top:40px}
.fgrid .full{grid-column:1/-1}
.fgrid label{display:block;font-size:11px;letter-spacing:.06em;margin-bottom:2px}
.fgrid input[type=text],.fgrid input[type=email],.fgrid input[type=tel],.fgrid textarea,.fgrid select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-line);color:var(--gold);padding:10px 0;font:300 15px var(--f-body);border-radius:0}
.fgrid textarea{min-height:110px;resize:vertical;border:1px solid var(--gold-line);padding:12px}
.fgrid select option{background:var(--green);color:var(--gold)}
.fgrid input::placeholder,.fgrid textarea::placeholder{color:rgba(220,185,97,.45)}
.opts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:10px}
.fgrid .btn{justify-self:start;padding-inline:4.5em}
.marquee-band{background:var(--black);padding-block:44px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-band .clients-track{animation-duration:46s}
.marquee-band span{font-family:var(--f-display);font-size:clamp(20px,2.2vw,30px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marquee-band span small{display:block;font-family:var(--f-caps);font-size:8px;letter-spacing:.42em;text-align:center;margin-top:2px}

@media (prefers-reduced-motion:reduce){.pcard>.frame{transition:none}}
@media (max-width:1080px){
  .svc-index,.steps,.posts,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-index a:nth-child(3n){border-right:1px solid var(--gold-faint)}
  .svc-index a:nth-child(2n){border-right:0}
  .meta,.impact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .duo,.cpage,.reels-wrap{grid-template-columns:minmax(0,1fr)}
  .duo>.frame{order:-1;min-height:300px}
  .duo .text h2{font-size:clamp(34px,9.4vw,56px)}
  .duo.rev .text{order:0}
  .reels-wrap{padding-right:var(--gutter)}
  .cpage .right{padding-top:calc(110px + env(safe-area-inset-top,0px))}
  .cpage .left{order:2}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery .frame,.gallery .frame.w3{grid-column:span 1}
  .gallery .frame.tall{grid-row:span 1}
}
@media (max-width:520px){
  .svc-index,.steps,.posts,.pgrid{grid-template-columns:minmax(0,1fr)}
  .svc-index a{border-right:0!important}
}


/* dropdowns, modal, article, legal */

.film{overflow:hidden}
[id]{scroll-margin-top:110px}
.nav li{position:relative}
.nav ul{align-items:center}
.has-dd{padding-block:14px}
.dd{position:absolute;top:100%;left:-20px;min-width:230px;background:var(--green);border:1px solid var(--gold-faint);padding:12px 0;display:grid;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s,transform .3s,visibility .3s;z-index:5}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none}
.nav .dd a{display:block;padding:9px 20px;font-size:10.5px;letter-spacing:.24em;white-space:nowrap}
.nav .dd a:hover{background:rgba(220,185,97,.08)}
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:calc(56px + env(safe-area-inset-top,0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px))}
.modal[hidden]{display:none}
.modal-box{width:min(1100px,100%);display:grid;gap:16px}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.modal-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:18px;background:none;border:0;color:var(--gold);font-size:34px;line-height:1;cursor:pointer}
.article{max-width:720px;display:grid;gap:22px}
.article p{font-size:16.5px;line-height:1.8}
.article .inline{aspect-ratio:16/9;margin-block:10px}
.article .sign{font-family:var(--f-script);font-size:34px;margin-top:10px}
.legal-body{max-width:760px;display:grid;gap:14px}
.legal-body h2{font-family:var(--f-display);font-size:30px;text-transform:uppercase;margin-top:22px}
.legal-body p,.legal-body li{font-size:14.5px;line-height:1.75}
.legal-body ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal a,.cpage .details a{border-bottom:1px solid var(--gold-line)}
.jpost .more:hover{opacity:.8}