/* ============ TOKENS ============
   The palette is built on the two color temperatures a DP works
   between: tungsten 3200K and daylight 5600K, on a slate base. */
:root{
  --ink:#0A0E13;
  --ink-2:#101720;
  --ink-3:#161F29;
  --line:#22303D;
  --line-soft:#1A242F;
  --paper:#EEEBE5;
  --mute:#818F9D;
  --tungsten:#E8933A;
  --daylight:#6FA8C7;

  /* One family, three roles. Black 900 for display, Regular 400 for
     body, Medium 500 + wide tracking for the data layer. */
  --f-disp:'Poppins',system-ui,sans-serif;
  --f-body:'Poppins',system-ui,sans-serif;
  --f-data:'Poppins',system-ui,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
  --rail:48px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--f-body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}

/* ============ TYPE ============ */
.eyebrow{
  font-family:var(--f-data);font-size:.66rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
}
.eyebrow b{color:var(--tungsten);font-weight:500}
.h-xl{
  font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(2.5rem,7.4vw,5.6rem);line-height:.9;
  letter-spacing:-.035em;text-transform:uppercase;
}
.h-lg{
  font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.02;
  letter-spacing:-.03em;text-transform:uppercase;
}
.h-sm{
  font-family:var(--f-disp);font-weight:700;font-size:1.06rem;
  letter-spacing:.005em;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#C9D2DA;max-width:56ch}
.dim{color:var(--mute)}
.data{font-family:var(--f-data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* ============ SHELL ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ============ NAV ============ */
/* Transparent so the hero video reads behind it. A top-down scrim
   keeps the links legible without hiding the footage, and no blur,
   because frosting the video defeats the point. */
/* FIXED, not sticky. Sticky keeps the bar in normal flow, so it sits
   ABOVE the hero and the video can never reach it. Fixed lifts it out
   of flow and lets the hero run underneath. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
}
@media(min-width:1240px){.nav{left:var(--rail)}}
/* No scrim of any kind. Even a faint gradient reads as a bar across the
   top of bright footage. Legibility is handled entirely by the text
   shadow, which darkens only the pixels touching each glyph. */
.nav-links a,.logo,.burger,.nav-cta{
  text-shadow:0 1px 2px rgba(6,9,13,.92),0 2px 20px rgba(6,9,13,.8);
}
.logo img{filter:drop-shadow(0 1px 3px rgba(6,9,13,.9))}
/* The mobile drawer still needs a solid panel to be readable. */
@media(max-width:940px){
  .nav-links.open{background:rgba(10,14,19,.97);backdrop-filter:blur(14px)}
}
.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:28px;
}
.logo{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.02rem;letter-spacing:-.02em;text-transform:uppercase}
.logo em{color:var(--tungsten);font-style:normal}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);padding:6px 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--paper)}
.nav-links a.on{color:var(--paper);border-bottom-color:var(--tungsten)}
.lang{display:flex;gap:8px;padding-left:22px;border-left:1px solid var(--line)}
.lang a{padding:0}
.lang a.on{border-bottom:none;color:var(--tungsten)}
/* No box. The hover fill is the whole affordance. */
.nav-links a.nav-cta{
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  border:0;border-bottom:0;padding:13px 22px 13px 24px;color:var(--paper);
  transition:background .25s,color .25s;
}
.nav-links a.nav-cta:hover{background:var(--tungsten);color:var(--ink)}
.burger{display:none;margin-left:auto;font-family:var(--f-data);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:940px){
  .burger{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .lang{border-left:none;padding:16px 0 0;gap:16px}
  .nav-cta{margin-top:16px;width:100%;text-align:center}
}

/* ============ HERO ============ */
/* The negative margin plus equal padding is a compensating fix, not a
   layout choice. It pulls the hero box 28px above wherever it would
   otherwise start and gives that space straight back as padding, so the
   footage covers any gap above it while the content stays put. Because
   the box grows upward only, min-height and the bottom-aligned content
   are unaffected. */
.hero{
  position:relative;min-height:min(84vh,760px);
  margin-top:-28px;padding-top:28px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.hero.short{min-height:min(58vh,520px)}
.hero.mid{min-height:min(76vh,700px)}
/* Layer order inside .hero-media, bottom to top:
     0  .hero-grade   opaque colour plate. This is the FALLBACK, shown
                      only when no video loads. It used to sit above the
                      video and hid it completely.
     1  .hero-video   the footage
     2  ::after       translucent colour wash, so the footage still reads
                      as graded tungsten and daylight
     3  .hero-grain   film grain
   .hero-veil (z-index 1 on .hero) darkens the lower half for text. */
/* Overshoots the top by 3px. Sub-pixel rounding at some zoom levels and
   on some display scalings can leave a hairline of page background
   above the footage; this makes that impossible. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-media:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 12%,rgba(232,147,58,.34),transparent 60%),
    radial-gradient(100% 80% at 88% 88%,rgba(111,168,199,.26),transparent 62%);
}
.hero-grain{z-index:3}
/* Fallback grade. Only visible when the video fails or is still loading. */
.hero-grade{position:absolute;inset:0;z-index:0;animation:drift 26s ease-in-out infinite alternate}
.g-home{background:
  radial-gradient(120% 90% at 18% 12%,rgba(232,147,58,.4),transparent 58%),
  radial-gradient(100% 80% at 88% 88%,rgba(111,168,199,.34),transparent 60%),
  linear-gradient(140deg,#0C141C,#1B2732 55%,#0A0E13)}
.g-work{background:
  radial-gradient(110% 80% at 78% 18%,rgba(111,168,199,.4),transparent 60%),
  radial-gradient(90% 70% at 12% 86%,rgba(232,147,58,.26),transparent 58%),
  linear-gradient(160deg,#0A1017,#16222E 55%,#090D12)}
.g-content{background:
  radial-gradient(100% 80% at 50% 8%,rgba(232,147,58,.44),transparent 56%),
  radial-gradient(90% 90% at 90% 92%,rgba(111,168,199,.2),transparent 60%),
  linear-gradient(120deg,#0B1118,#1D2530 60%,#0A0E13)}
.g-about{background:
  radial-gradient(120% 100% at 30% 90%,rgba(232,147,58,.3),transparent 58%),
  radial-gradient(80% 70% at 82% 10%,rgba(111,168,199,.28),transparent 58%),
  linear-gradient(200deg,#0A0F15,#18222D 55%,#090D12)}
.g-products{background:
  radial-gradient(110% 90% at 70% 40%,rgba(111,168,199,.3),transparent 58%),
  linear-gradient(140deg,#0A0E13,#141C25 60%,#090D12)}
.g-contact{background:
  radial-gradient(120% 90% at 22% 20%,rgba(232,147,58,.34),transparent 58%),
  radial-gradient(90% 80% at 86% 84%,rgba(111,168,199,.26),transparent 58%),
  linear-gradient(160deg,#0B1017,#17212C 55%,#090D12)}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2%,-1.5%,0)}}
.hero-grain{
  position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,14,19,.96) 4%,rgba(10,14,19,.58) 42%,rgba(10,14,19,.34) 100%);
}
.hero-body{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;padding:120px var(--gut) 34px}
.hero.short .hero-body{padding:88px var(--gut) 30px}
.hero.mid .hero-body{padding:104px var(--gut) 32px}
.hero-body .eyebrow{margin-bottom:20px}
.hero-body .h-xl{max-width:20ch}
.hero-body .lead{margin-top:22px}

/* Viewfinder frame marks: the one flourish, hero only. */
.marks{position:absolute;inset:22px;z-index:2;pointer-events:none}
.marks i{position:absolute;width:22px;height:22px;border:1px solid rgba(238,235,229,.3)}
.marks i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.marks i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.marks i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.marks i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* Slate bar: the running strip under every hero. */
.slate{
  position:relative;z-index:2;border-top:1px solid var(--line);
  background:rgba(10,14,19,.72);backdrop-filter:blur(8px);
}
.slate-in{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--gut);
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  font-family:var(--f-data);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
.slate-in b{color:var(--paper);font-weight:500}
.slate-rec{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--tungsten)}
.slate-rec i{width:6px;height:6px;border-radius:50%;background:var(--tungsten);animation:pulse 2s infinite}

/* ============ BUTTONS ============ */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--tungsten);background:var(--tungsten);color:var(--ink);
  transition:.2s;display:inline-block;
}
.btn:hover{background:transparent;color:var(--tungsten)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper)}

/* ============ SECTIONS ============ */
.sec{padding:clamp(64px,9vw,112px) 0;border-top:1px solid var(--line-soft)}
.sec-head{display:flex;gap:clamp(20px,4vw,56px);margin-bottom:44px;flex-wrap:wrap}
.sec-num{flex:0 0 auto;min-width:96px}
.sec-num .eyebrow{display:block}
.sec-copy{flex:1 1 460px;min-width:0}
.sec-copy .lead{margin-top:16px}

/* ============ CLIENT LOGOS ============ */
.logos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  border:1px solid var(--line-soft);
}
.logos a{
  aspect-ratio:16/9;display:grid;place-items:center;padding:20px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.logos a:hover{background:var(--ink-2)}
.logos img{max-height:38px;width:auto;opacity:.5;filter:grayscale(1) brightness(2.6);transition:.25s}
.logos a:hover img{opacity:1;filter:none}

/* ============ SERVICE CARDS ============ */
.cards{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--ink);padding:32px 28px 30px;transition:background .25s}
.card:hover{background:var(--ink-2)}
.card .eyebrow{color:var(--tungsten)}
.card .h-sm{margin:16px 0 12px;font-size:1.24rem;text-transform:uppercase;letter-spacing:-.01em;font-weight:900}
.card p{font-size:.96rem;color:#B6C0CA}
.card ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.card li{font-family:var(--f-data);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:5px 0}
.card-link{display:inline-block;margin-top:22px;font-family:var(--f-data);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--tungsten);padding-bottom:3px;color:var(--tungsten)}

/* ============ ABOUT SPLIT ============ */
.split{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.portrait{position:relative;border:1px solid var(--line);overflow:hidden}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.32) contrast(1.06);display:block}
/* The one bright image on a near-black site. Rather than sit as a white
   rectangle, it dissolves into the page from the bottom, which also gives
   the caption something to sit on without a hard bar across the frame. */
.portrait::after{
  content:"";position:absolute;inset:auto 0 0 0;height:26%;pointer-events:none;
  background:linear-gradient(to top,
    var(--ink) 0%, rgba(10,14,19,.62) 25%, rgba(10,14,19,0) 100%);
}
.portrait figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;z-index:2;
  background:none;font-family:var(--f-data);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.prose p{margin-bottom:18px;color:#C9D2DA}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--paper);font-weight:600}

/* ============ FACT STRIP ============ */
.facts{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:44px}
.fact{background:var(--ink);padding:26px 24px}
.fact-n{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:2.5rem;line-height:1;letter-spacing:-.04em;color:var(--tungsten)}
.fact p{font-size:.92rem;color:#B6C0CA;margin-top:10px}
.fact .eyebrow{margin-top:6px}

/* ============ AWARDS ============ */
.awards{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.award{background:var(--ink);padding:28px 24px;display:flex;flex-direction:column;gap:14px;transition:background .25s}
.award:hover{background:var(--ink-2)}
.award img{height:72px;width:auto;align-self:flex-start;filter:grayscale(1) brightness(2.4);opacity:.62;transition:.25s}
.award:hover img{filter:none;opacity:1}
.award .h-sm{font-size:1.1rem}
.award .data{color:var(--mute);display:block;margin-top:4px}
.award-link{margin-top:auto;font-family:var(--f-data);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tungsten)}

/* ============ WORK GRID ============ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filters button{
  font-family:var(--f-data);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line);color:var(--mute);transition:.2s;
}
.filters button:hover{color:var(--paper);border-color:var(--paper)}
.filters button.on{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* Mixed 16:9 and 9:16 tiles cannot share a uniform row height without
   letterboxing one of them. So the grid runs on a 2px row track and each
   tile spans however many rows its real height needs. Column gap is real,
   row gap is folded into the span so tiles pack tight whatever the count. */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  column-gap:clamp(14px,2vw,22px);row-gap:0;
  grid-auto-rows:2px;align-items:start;
}
.grid .tile{align-self:start}
/* Fallback before the layout pass runs, and if JS is unavailable. */
.grid.pre{grid-auto-rows:auto;row-gap:clamp(14px,2vw,22px)}
.tile{display:block;border:1px solid var(--line-soft);background:var(--ink-2);transition:border-color .25s}
.tile:hover{border-color:var(--tungsten)}
.tile-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#141E28,#0C1218)}
.tile-img .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-data);font-size:.6rem;letter-spacing:.2em;color:#3C4956;text-transform:uppercase}
.tile-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,14,19,.3);opacity:0;transition:opacity .25s;
}
.tile:hover .tile-play{opacity:1}
.tile-play span{
  width:52px;height:52px;border:1px solid var(--paper);border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;color:var(--paper);
}
.tile-meta{padding:16px 18px 18px}
.tile-meta h3{font-family:var(--f-disp);font-weight:700;font-size:.98rem;letter-spacing:-.005em}
/* Credit block. Label column in the data face, values in body text, so
   the tile reads as a caption slate rather than a paragraph. The hairline
   separates the piece from the credits the way the slate bars do. */
.tile-facts{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);
}
.tile-facts dt{
  font-family:var(--f-data);font-weight:500;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}
.tile-facts dd{margin:0;font-size:.78rem;line-height:1.35;color:#C9D2DA}
@media(max-width:520px){
  .tile-facts{gap:3px 10px}
  .tile-facts dd{font-size:.74rem}
}
.grid-note{margin-top:26px;font-size:.92rem;color:var(--mute)}

/* ============ QUOTES ============ */
.quotes{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.quote{background:var(--ink);padding:32px 28px;display:flex;flex-direction:column}
.quote-mark{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:2.4rem;line-height:.6;color:var(--tungsten);margin-bottom:20px}
.quote p{font-size:1rem;color:#C9D2DA;flex:1}
.quote-by{display:flex;gap:13px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft)}
.quote-by img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.quote-by strong{display:block;font-family:var(--f-disp);font-weight:700;font-size:.92rem}
.quote-by span{font-family:var(--f-data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ============ CTA BAND ============ */
.band{border-top:1px solid var(--line-soft);background:var(--ink-2);padding:clamp(56px,7vw,88px) 0}
.band-in{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band .h-lg{max-width:22ch}

/* ============ EMPTY STATE ============ */
.empty{border:1px solid var(--line);padding:clamp(32px,5vw,56px);max-width:640px}
.empty .h-lg{margin:16px 0 14px}
.notify{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.notify input{flex:1 1 220px;min-width:0}

/* ============ FORM ============ */
.form-wrap{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
@media(max-width:840px){.form-wrap{grid-template-columns:1fr}}
.fields{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.fields .full{grid-column:1/-1}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
label{display:block;font-family:var(--f-data);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
input,select,textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--paper);
  font-family:var(--f-body);font-size:.98rem;padding:13px 14px;border-radius:0;
}
input:focus,select:focus,textarea:focus{border-color:var(--tungsten);outline:none}
textarea{min-height:130px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px;background-repeat:no-repeat}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--mute)}
.consent input{width:16px;height:16px;flex:0 0 auto;margin-top:3px;accent-color:var(--tungsten)}
.side-block{border:1px solid var(--line-soft);padding:26px 24px;margin-bottom:16px}
.side-block .eyebrow{color:var(--tungsten);display:block;margin-bottom:12px}
.side-block p{font-size:.94rem;color:#B6C0CA}
.side-block a.big{font-family:var(--f-disp);font-weight:700;font-size:1.06rem;border-bottom:1px solid var(--tungsten);padding-bottom:2px}
/* Not a link: it points back at the form rather than going anywhere. */
.side-block .big-static{font-family:var(--f-disp);font-weight:700;font-size:1.06rem;color:var(--tungsten)}

/* ============ FOOTER ============ */
.foot{border-top:1px solid var(--line-soft);padding:52px 0 40px}
.foot-in{display:flex;gap:32px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a,.socials a{font-family:var(--f-data);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.foot-nav a:hover,.socials a:hover{color:var(--tungsten)}
.socials{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.foot-legal{font-family:var(--f-data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#4A5765;margin-top:36px}

/* ============ MEDIA KIT ============ */
.g-media{background:
  radial-gradient(110% 90% at 84% 14%,rgba(232,147,58,.42),transparent 58%),
  radial-gradient(100% 80% at 10% 90%,rgba(111,168,199,.32),transparent 60%),
  linear-gradient(130deg,#0B1119,#1C2733 55%,#0A0E13)}

/* scroll reveal: applied to any [data-rise] element */
/* Gated on html.anim, which is only set when JS and IntersectionObserver
   are both present and the visitor has not asked for reduced motion.
   Without the gate a script failure would leave the page blank. */
.anim [data-rise]{opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.anim [data-rise].seen{opacity:1;transform:none}

/* --- headline metric board --- */
.mk-board{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.mk-cell{background:var(--ink);padding:28px 24px 26px;position:relative;overflow:hidden}
.mk-cell:hover{background:var(--ink-2)}
.mk-cell .eyebrow{display:block;margin-bottom:14px}
.mk-n{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:clamp(2.1rem,4.4vw,3rem);line-height:1;letter-spacing:-.045em;color:var(--paper);font-variant-numeric:tabular-nums}
.mk-n.warm{color:var(--tungsten)}
.mk-n.cool{color:var(--daylight)}
.mk-n small{font-size:.42em;letter-spacing:-.02em;margin-left:2px}
.mk-cell p{font-size:.88rem;color:#A9B4BF;margin-top:10px}
.mk-spark{position:absolute;right:0;bottom:0;width:100%;height:38px;opacity:.16;pointer-events:none}

/* --- benchmark bars --- */
.mk-bench{display:grid;gap:26px;margin-top:8px}
.mk-bar-row{display:grid;gap:9px}
.mk-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mk-bar-top .data{color:var(--mute)}
.mk-bar-top b{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.15rem;letter-spacing:-.02em}
.mk-track{position:relative;height:10px;background:var(--ink-3);border:1px solid var(--line-soft)}
.mk-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--tungsten),#F4B667);transition:width 1.3s cubic-bezier(.2,.8,.25,1)}
.mk-fill.cool{background:linear-gradient(90deg,#4E7F9B,var(--daylight))}
.mk-fill.flat{background:#2C3A48}
.mk-bar-note{font-size:.84rem;color:var(--mute)}

/* --- funnel --- */
.mk-funnel{display:grid;gap:14px}
.mk-step{border:1px solid var(--line-soft);background:var(--ink-2);padding:20px 24px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.mk-step:after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(232,147,58,.16),rgba(232,147,58,0));transition:width 1.4s cubic-bezier(.2,.8,.25,1)}
.mk-step.seen:after{width:var(--w,100%)}
.mk-step > *{position:relative;z-index:1}
.mk-step .mk-n{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.mk-step .h-sm{font-size:1rem}
.mk-step p{font-size:.88rem;color:#A9B4BF;flex:1 1 260px;min-width:0}
.mk-drop{font-family:var(--f-data);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tungsten);margin-left:auto;white-space:nowrap}

/* --- video performance chart --- */
.mk-chart{display:grid;gap:11px}
.mk-vid{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.mk-vid:last-child{border-bottom:none}
.mk-vid-t{min-width:0}
.mk-vid-t span{display:block;font-size:.94rem;color:#D6DDE4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-vid-t .data{color:var(--mute);font-size:.6rem;margin-top:5px;white-space:normal}
.mk-vtrack{height:8px;background:var(--ink-3);margin-top:9px;position:relative}
.mk-vfill{position:absolute;inset:0 auto 0 0;width:0;background:var(--tungsten);transition:width 1.2s cubic-bezier(.2,.8,.25,1)}
.mk-vfill.cool{background:var(--daylight)}
.mk-vn{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.02rem;text-align:right;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* --- format split donut --- */
.mk-split2{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center}
@media(max-width:760px){.mk-split2{grid-template-columns:1fr}}
.mk-ring{width:100%;max-width:280px;margin:0 auto}
.mk-ring circle{fill:none;stroke-width:14;transform:rotate(-90deg);transform-origin:50% 50%}
.mk-ring .trk{stroke:var(--ink-3)}
.mk-ring .arc{stroke:var(--tungsten);stroke-dasharray:0 999;transition:stroke-dasharray 1.5s cubic-bezier(.2,.8,.25,1)}
.mk-ring .arc2{stroke:var(--daylight);stroke-dasharray:0 999;transition:stroke-dasharray 1.5s cubic-bezier(.2,.8,.25,1) .15s}
.mk-ring text{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;fill:var(--paper)}
.mk-legend{display:grid;gap:18px}
.mk-leg{display:flex;gap:14px;align-items:flex-start}
.mk-leg i{width:10px;height:10px;flex:0 0 auto;margin-top:7px;background:var(--tungsten)}
.mk-leg i.cool{background:var(--daylight)}
.mk-leg strong{display:block;font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.28rem;letter-spacing:-.02em}
.mk-leg p{font-size:.9rem;color:#A9B4BF;margin-top:4px}

/* --- brand strip --- */
.mk-brands{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.mk-brand{background:var(--ink);padding:24px 18px;text-align:center;transition:background .25s}
.mk-brand:hover{background:var(--ink-2)}
.mk-brand b{display:block;font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.06rem;letter-spacing:-.02em;text-transform:uppercase}
.mk-brand span{display:block;font-family:var(--f-data);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* --- packages --- */
.mk-packs{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.mk-pack{background:var(--ink);padding:32px 28px;display:flex;flex-direction:column}
.mk-pack.pick{background:var(--ink-2);box-shadow:inset 3px 0 0 var(--tungsten)}
.mk-pack .eyebrow{color:var(--tungsten)}
.mk-pack .h-sm{margin:15px 0 8px;font-size:1.3rem;text-transform:uppercase;font-weight:900;letter-spacing:-.015em}
.mk-price{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.7rem;letter-spacing:-.03em;color:var(--paper);margin-bottom:14px}
.mk-price small{font-family:var(--f-data);font-size:.58rem;letter-spacing:.16em;color:var(--mute);display:block;margin-top:6px;font-weight:400}
.mk-pack p{font-size:.93rem;color:#B6C0CA}
.mk-pack ul{list-style:none;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);display:grid;gap:9px}
.mk-pack li{font-size:.88rem;color:#A9B4BF;padding-left:18px;position:relative}
.mk-pack li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--tungsten)}

/* --- case study --- */
.mk-case{border:1px solid var(--line);background:var(--ink-2);padding:clamp(28px,4vw,44px)}
.mk-case-grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mk-case-grid div{background:var(--ink);padding:20px}
.mk-case-grid b{display:block;font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:1.55rem;letter-spacing:-.03em;color:var(--tungsten)}

/* --- honest note --- */
.mk-note{border-left:2px solid var(--daylight);padding:4px 0 4px 22px;max-width:62ch}
.mk-note p{font-size:.95rem;color:#B6C0CA}


.mk-sub{margin:34px 0 18px;color:var(--mute);font-family:var(--f-data);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.mk-more-in > .mk-sub:first-child{margin-top:8px}
.mk-step div p{font-size:.9rem;color:#A9B4BF;flex:1 1 240px}


/* --- hero sizing --- */
.hero.tall{min-height:min(92vh,880px)}

/* --- minimal homepage helpers --- */
.sec-tight{padding:clamp(38px,5vw,58px) 0}
.strip-label{display:block;margin-bottom:20px;color:#4A5765}
.quote-solo{max-width:64ch;margin:0 auto;text-align:center}
.quote-solo .quote-mark{font-family:var(--f-disp);font-weight:900;letter-spacing:-.035em;font-size:2.6rem;line-height:.6;color:var(--tungsten);margin-bottom:24px}
.quote-solo p{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45;color:#D6DDE4}
.quote-solo .quote-by{justify-content:center;border-top:0;margin-top:30px;padding-top:0;flex-wrap:wrap}
.quote-more{margin-left:14px;border-bottom:1px solid var(--tungsten)}


/* --- brand mark ---
   Single supplied lockup: icon plus TIAGOSHOOTS / FILMS, one file.
   Height-driven, width auto, because the artwork is 4.85:1. */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:30px;width:auto;display:block}
.foot .logo img{height:42px}
@media(max-width:620px){.logo img{height:24px}}



.mk-geo{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;margin-bottom:clamp(30px,4vw,46px)}
@media(max-width:820px){.mk-geo{grid-template-columns:1fr}}
.mk-geo-side{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}

/* --- audience block --- */
.mk-demo{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mk-demo-col{background:var(--ink);padding:26px 24px 28px}
.mk-demo-col .mk-sub{margin:0 0 16px}
.mk-await{border:1px dashed #2E3B49;padding:22px 20px;text-align:center}
.mk-await .data{display:block;color:var(--tungsten);font-size:.6rem;letter-spacing:.2em}
.mk-await p{font-size:.84rem;color:var(--mute);margin-top:10px;line-height:1.5}


/* --- vertical (9:16) tiles --- */
.tile.v .tile-img{aspect-ratio:9/16}
.tile-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile-ratio{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--f-data);font-size:.54rem;font-weight:500;letter-spacing:.16em;
  padding:4px 7px;background:rgba(10,14,19,.72);color:var(--paper);text-transform:uppercase;
}
.tile.ai .tile-ratio{background:var(--tungsten);color:#0A0E13}


/* Square (1:1) tiles, for social cuts delivered in that format. */
.tile.sq .tile-img{aspect-ratio:1/1}
.lb-frame.sq{width:min(88vw,760px);aspect-ratio:1/1;max-height:86vh}

/* --- lightbox player: plays in the clip's own aspect ratio --- */
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(6,9,13,.94);padding:20px}
.lb.on{display:grid}
.lb-frame{position:relative;background:#000;border:1px solid var(--line)}
.lb-frame.h{width:min(92vw,1180px);aspect-ratio:16/9;max-height:86vh}
.lb-frame.v{height:min(86vh,880px);aspect-ratio:9/16;max-width:92vw}
.lb-frame iframe,.lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.lb-close{
  position:absolute;top:-42px;right:0;background:none;border:0;cursor:pointer;
  font-family:var(--f-data);font-size:.66rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);transition:color .2s;
}
.lb-close:hover{color:var(--paper)}
.lb-cap{position:absolute;bottom:-36px;left:0;right:0;font-family:var(--f-data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
@media(max-width:620px){.lb-close{top:-36px}.lb-frame.h{width:100%}}
body.lb-lock{overflow:hidden}


/* --- tabbed analytics --- */
.mk-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:26px}
.mk-tabs button{
  flex:1 1 auto;background:var(--ink);border:0;cursor:pointer;padding:14px 18px;
  font-family:var(--f-data);font-size:.64rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);transition:color .2s,background .2s;position:relative;
}
.mk-tabs button:hover{color:var(--paper);background:var(--ink-2)}
.mk-tabs button.on{color:var(--paper);background:var(--ink-2)}
.mk-tabs button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tungsten)}
.mk-panel{display:none}
.mk-panel.on{display:block}
@keyframes tabIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* These replay on every tab switch, because .on is removed and re-added. */
.mk-panel.on > .mk-lede{animation:tabIn .5s cubic-bezier(.2,.7,.3,1) both}
.mk-panel.on .mk-bar-row{animation:tabIn .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * .07s)}
.mk-panel.on .mk-vid{animation:tabIn .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * .07s)}
.mk-panel.on .mk-strip > div{animation:tabIn .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.22s + var(--i,0) * .05s)}
.mk-panel.on .mk-map{animation:tabIn .55s cubic-bezier(.2,.7,.3,1) both}
.mk-panel.on .mk-fine{animation:tabIn .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.4s}
.mk-lede{font-size:clamp(1rem,1.7vw,1.18rem);color:#D6DDE4;max-width:60ch;margin-bottom:26px}
.mk-lede b{color:var(--tungsten);font-weight:600}
.mk-fine{margin-top:16px;font-size:.78rem;color:#5C6975}

/* --- stat strip --- */
.mk-strip{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.mk-strip div{background:var(--ink);padding:18px 16px}
.mk-strip b{display:block;font-family:var(--f-disp);font-weight:900;font-size:1.4rem;letter-spacing:-.035em;color:var(--paper)}
.mk-strip .data{display:block;margin-top:6px;color:var(--mute);font-size:.58rem;letter-spacing:.14em}

/* --- world map --- */
.mk-map{margin:0}
.mk-map svg{width:100%;height:auto;display:block;overflow:visible}
.mk-land{fill:#182330;stroke:#22303E;stroke-width:.5;opacity:0;transition:opacity 1s ease}
.mk-map.seen .mk-land{opacity:1}
.mk-dot circle{transform-origin:center}
.mk-dot .core{fill:var(--tungsten);fill-opacity:.85;transform:scale(0);transition:transform .7s cubic-bezier(.2,1.5,.4,1);transition-delay:var(--d)}
.mk-dot.cool .core{fill:var(--daylight)}
.mk-dot .pulse{fill:var(--tungsten);fill-opacity:.22;transform:scale(0)}
.mk-dot.cool .pulse{fill:var(--daylight)}
.mk-dot text{
  font-family:var(--f-data);font-size:11px;font-weight:500;letter-spacing:.1em;
  fill:#C3CCD5;text-anchor:middle;opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--d) + .35s);
}
.mk-map.seen .mk-dot .core{transform:scale(1)}
.mk-map.seen .mk-dot text{opacity:1}
.mk-map.seen .mk-dot .pulse{animation:ping 3.2s ease-out infinite;animation-delay:calc(var(--d) + .6s)}
@keyframes ping{0%{transform:scale(1);fill-opacity:.28}70%{transform:scale(2.1);fill-opacity:0}100%{transform:scale(2.1);fill-opacity:0}}
.mk-map figcaption{margin-top:14px;color:var(--mute);font-size:.6rem;letter-spacing:.14em}
@media(max-width:720px){.mk-dot text{font-size:15px}}


/* --- analytics block --- */
.mk-detail{margin-top:44px;border-top:1px solid var(--line-soft);padding-top:34px}

/* --- discovery: flow diagram --- */
.mk-flow svg{width:100%;height:auto;display:block;overflow:visible}
.fl{stroke:var(--tungsten);stroke-opacity:.5;stroke-width:calc(var(--w) * 1px);
    stroke-dasharray:14 22;stroke-dashoffset:0;opacity:0;transition:opacity .6s ease;transition-delay:var(--d)}
.fl.cool{stroke:var(--daylight);stroke-opacity:.42}
.fl.flat{stroke:#33414F;stroke-opacity:.7}
.mk-flow.seen .fl{opacity:1;animation:flow 2.4s linear infinite;animation-delay:var(--d)}
@keyframes flow{to{stroke-dashoffset:-36}}
.fl-t{font-family:var(--f-data);font-size:13px;font-weight:500;letter-spacing:.08em;fill:#A9B4BF;
      opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d)}
.mk-flow.seen .fl-t{opacity:1;transform:none}
.fl-ring{fill:none;stroke:var(--tungsten);stroke-opacity:.35;stroke-width:1;
         transform-origin:820px 150px;transform:scale(.6);opacity:0;transition:all .7s cubic-bezier(.2,1.4,.4,1) .5s}
.fl-core{fill:var(--ink-2);stroke:var(--line);stroke-width:1;
         transform-origin:820px 150px;transform:scale(.6);opacity:0;transition:all .7s cubic-bezier(.2,1.4,.4,1) .45s}
.mk-flow.seen .fl-ring,.mk-flow.seen .fl-core{transform:none;opacity:1}
.mk-flow.seen .fl-ring{animation:ping 3.4s ease-out infinite 1.1s}
.fl-n{font-family:var(--f-disp);font-weight:900;font-size:24px;letter-spacing:-.03em;fill:var(--paper);text-anchor:middle;opacity:0;transition:opacity .5s ease .8s}
.fl-l{font-family:var(--f-data);font-size:10px;letter-spacing:.22em;fill:var(--mute);text-anchor:middle;opacity:0;transition:opacity .5s ease .9s}
.mk-flow.seen .fl-n,.mk-flow.seen .fl-l{opacity:1}
.mk-flow figcaption,.mk-people figcaption{margin-top:14px;color:var(--mute);font-size:.6rem;letter-spacing:.14em}
@media(max-width:720px){.fl-t{font-size:19px}.fl-n{font-size:34px}.fl-l{font-size:14px}}

/* --- audience: pictogram --- */
.mk-people{margin:0}
.pp-grid{display:grid;grid-template-columns:repeat(25,1fr);gap:clamp(4px,.9vw,9px);max-width:760px}
@media(max-width:640px){.pp-grid{grid-template-columns:repeat(20,1fr)}}
.pp-grid i{display:block;line-height:0;transform:scale(0) translateY(6px);opacity:0;
           transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s ease;transition-delay:calc(var(--i) * 9ms)}
.mk-people.seen .pp-grid i{transform:none;opacity:1}
.pp-grid svg{width:100%;height:auto;display:block}
.pp-grid .a1 svg{fill:var(--tungsten)}
.pp-grid .a2 svg{fill:#C67C33}
.pp-grid .a3 svg{fill:var(--daylight)}
.pp-grid .a4 svg{fill:#8A6136}
.pp-grid .a5 svg{fill:#42505E}
.pp-key{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pp-k{background:var(--ink);padding:18px 18px 20px}
.pp-k i{display:block;width:22px;height:3px;margin-bottom:12px}
.pp-k i.a1{background:var(--tungsten)}.pp-k i.a2{background:#C67C33}
.pp-k i.a3{background:var(--daylight)}.pp-k i.a4{background:#8A6136}.pp-k i.a5{background:#42505E}
.pp-k b{display:block;font-family:var(--f-disp);font-weight:900;font-size:1.35rem;letter-spacing:-.035em}
.pp-k span{display:block;margin-top:6px;font-size:.82rem;color:#98A4B0}

/* --- performance: funnel --- */
.mk-funnel-fig{margin:0;display:grid;gap:10px}
.fn-row{position:relative;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--line-soft);background:var(--ink-2);overflow:hidden}
.fn-row i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(232,147,58,.20),rgba(232,147,58,.02));
          transition:width 1.1s cubic-bezier(.2,.8,.25,1);transition-delay:var(--d)}
.mk-funnel-fig.seen .fn-row i{width:var(--w)}
.fn-row b{position:relative;font-family:var(--f-disp);font-weight:900;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.04em;color:var(--paper);min-width:5ch}
.fn-row span{position:relative;font-family:var(--f-data);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#98A4B0}


/* ============ MOTION SYSTEM ============
   Four gestures, reused everywhere, never two on one element:
     1. line reveal   headlines rise out of a mask, like a title card
     2. stagger       grid children enter in sequence
     3. wipe          buttons and links fill from the left on hover
     4. cut           pages dissolve and lift on navigation
   All of it is gated on .seen or .live, so all of it replays. */

/* 1. headline line reveal */
.ln{display:block;overflow:hidden;padding-bottom:.05em}
.ln > i{
  display:block;font-style:normal;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,.84,.3,1);
  transition-delay:calc(var(--l,0) * .085s);
}
.seen .ln > i,
.page.live .hero .ln > i{transform:none}

/* 2. stagger
   Keyframes, not a transition. A transition only runs if the browser has
   already painted the start state; when .seen is added in the same frame
   the page first paints, both states collapse and nothing animates. An
   animation always plays when the class lands, which is what the media
   kit tabs use and why those never had this problem. */
.stagger[data-rise]{opacity:1;transform:none;transition:none;animation:none}
.anim .stagger > *{opacity:0}
.anim .stagger.seen > *{
  animation:riseIn .6s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * .07s);
}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 3. wipe */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--tungsten);
  transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.btn:hover:before{transform:none}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost:before{background:var(--paper)}
.btn.ghost:hover{border-color:var(--paper);color:var(--ink)}

.nav-links a{position:relative}
.nav-links a:not(.nav-cta):after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--tungsten);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.nav-links a:not(.nav-cta):hover:after{transform:scaleX(1)}

.card-link{position:relative}
.card-link:after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--tungsten);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.card-link:hover:after{transform:scaleX(1)}

/* 4. cut */
.page.live{animation:cutIn .55s cubic-bezier(.2,.7,.3,1)}
@keyframes cutIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* hero entrance, sequenced behind the headline */
.page.live .hero-body .eyebrow,
.page.live .hero-body .lead,
.page.live .hero-body .btns,
.page.live .slate{animation:heroIn .8s cubic-bezier(.2,.7,.3,1) both}
.page.live .hero-body .eyebrow{animation-delay:.05s}
.page.live .hero-body .lead{animation-delay:.44s}
.page.live .hero-body .btns{animation-delay:.56s}
.page.live .slate{animation-delay:.68s}
.page.live .marks i{animation:markIn .9s cubic-bezier(.2,.7,.3,1) both;animation-delay:.3s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes markIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* scroll progress */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--tungsten);z-index:120;pointer-events:none}

/* focus and hover lift */
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--tungsten);outline:none}
.card{transition:background .25s,transform .35s cubic-bezier(.2,.8,.25,1)}
.card:hover{transform:translateY(-3px)}
.tile{transition:transform .4s cubic-bezier(.2,.8,.25,1)}
.tile:hover{transform:translateY(-4px)}
.logos a img{transition:opacity .3s,filter .3s,transform .4s cubic-bezier(.2,.8,.25,1)}
.logos a:hover img{transform:scale(1.06)}


/* Bare logo row: no grid box, no dividers, centred. */
/* One row, optically matched. Every mark gets the same box and is
   contained inside it, so a wide wordmark and a squarer mark read as the
   same weight instead of one dwarfing the other. */
.logos.bare{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(22px,3.4vw,46px);border:0;
}
.logos.bare a{
  aspect-ratio:auto;border:0;padding:0;background:none;
  display:flex;align-items:center;justify-content:center;
}
.logos.bare a:hover{background:none}
/* Optical sizing. Each mark is trimmed to its own artwork, so the height
   cap now acts on the logo and not on transparent padding. Heights are
   tuned per mark: wide wordmarks sit lower, squarer marks sit taller, so
   every logo carries the same visual weight instead of the same number. */
.logos.bare img{max-height:28px;max-width:190px;width:auto;object-fit:contain}
.logos.bare a[href*="sony"] img     {max-height:24px}
.logos.bare a[href*="prozis"] img   {max-height:23px}
.logos.bare a[href*="ageas"] img    {max-height:40px}
.logos.bare a[href*="nutrium"] img  {max-height:28px}
.logos.bare a[href*="ua.pt"] img    {max-height:33px}
.logos.bare a[href*="mikedavis"] img{max-height:25px}
.logos.bare a[href*="audiio"] img   {max-height:26px}
.logos.bare a[href*="dji"] img      {max-height:26px}

/* Tone. brightness() multiplies, so it can only lift artwork that is
   already light. Prozis and Mike Davis ship as near-black files and so
   stayed dark while every other mark clipped to white. Inverting lifts
   them to the same grey and keeps their internal detail, which a flat
   silhouette would flatten away. */
.logos.bare a[href*="prozis"] img,
.logos.bare a[href*="mikedavis"] img{filter:grayscale(1) invert(1) brightness(1.3)}
/* These two out-specify the shared hover reset, so restate it. */
.logos.bare a[href*="prozis"]:hover img,
.logos.bare a[href*="mikedavis"]:hover img{filter:none}

@media(max-width:900px){
  .logos.bare img{max-height:24px;max-width:150px}
  .logos.bare a[href*="sony"] img     {max-height:21px}
  .logos.bare a[href*="prozis"] img   {max-height:20px}
  .logos.bare a[href*="ageas"] img    {max-height:34px}
  .logos.bare a[href*="nutrium"] img  {max-height:24px}
  .logos.bare a[href*="ua.pt"] img    {max-height:28px}
  .logos.bare a[href*="mikedavis"] img{max-height:21px}
  .logos.bare a[href*="audiio"] img   {max-height:22px}
  .logos.bare a[href*="dji"] img      {max-height:22px}
}
.strip-label.center{text-align:center}

/* Wordmark stand-in, matched to how the real logos are treated:
   dimmed and desaturated at rest, full strength on hover. */
.logos a.logo-text span{
  font-family:var(--f-disp);font-weight:900;font-size:1.02rem;letter-spacing:.02em;
  color:#8E9AA6;opacity:.62;transition:color .25s,opacity .25s;text-align:center;
}
.logos a.logo-text:hover span{color:var(--paper);opacity:1}

/* Rates callout, in place of public prices. */
.mk-rates{
  margin-top:34px;border:1px solid var(--line);background:var(--ink-2);
  padding:clamp(24px,3.4vw,34px);display:flex;gap:26px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
}
.mk-rates h3{font-size:1.24rem;text-transform:uppercase;font-weight:900;letter-spacing:-.015em}
.mk-rates p{font-size:.94rem;color:#B6C0CA;margin-top:8px;max-width:52ch}


/* --- reviews carousel --- */
.rev{max-width:66ch;margin:0 auto;text-align:center}
.rev-stage{display:grid}          /* every card shares one grid cell, so the
                                     stage sizes itself to the tallest quote */
.rev-item{
  grid-area:1/1;opacity:0;transform:translateX(46px);pointer-events:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.rev-item.on{opacity:1;transform:none;pointer-events:auto}
.rev-item.out{opacity:0;transform:translateX(-46px)}
.rev-item .quote-mark{
  font-family:var(--f-disp);font-weight:900;font-size:2.6rem;line-height:.6;
  color:var(--tungsten);margin-bottom:24px;
}
.rev-item p{font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.45;color:#D6DDE4}
.rev-item .quote-by{justify-content:center;border-top:0;margin-top:28px;padding-top:0;flex-wrap:wrap}
.rev-dots{display:flex;gap:9px;justify-content:center;margin-top:34px}
.rev-dots button{width:26px;height:2px;background:var(--line);border:0;padding:0;cursor:pointer;transition:background .3s}
.rev-dots button:hover{background:var(--mute)}
.rev-dots button.on{background:var(--tungsten)}

/* --- awards gallery --- */
.awards-gal{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.aw{background:var(--ink);padding:32px 28px 30px;position:relative;overflow:hidden;transition:background .3s}
.aw:hover{background:var(--ink-2)}
.aw-laurel{height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.aw-laurel img{max-height:92px;height:auto;width:auto;max-width:100%;display:block;
  /* laurel PNGs arrive dark, so invert them to the off-white the brand
     logos use, then let hover lift them to full strength */
  filter:invert(1) grayscale(1) brightness(1.9);opacity:.62;transition:opacity .3s}
.aw:hover .aw-laurel img{opacity:1}
.aw-laurel img + .aw-mark{display:none}
.aw{display:block;text-decoration:none}
.aw-watch{
  display:inline-block;margin-top:16px;font-family:var(--f-data);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tungsten);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.aw:hover .aw-watch{border-bottom-color:var(--tungsten)}
.aw-mark{font-size:2.2rem;color:var(--tungsten);opacity:.5;line-height:1}
.aw-year{display:block;font-family:var(--f-data);font-size:.62rem;font-weight:500;
         letter-spacing:.24em;color:var(--tungsten);margin-bottom:10px}
.aw .h-sm{font-size:1.2rem;text-transform:uppercase;font-weight:900;letter-spacing:-.015em}
.aw-for{font-family:var(--f-data);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
        color:var(--mute);margin-top:8px}
.aw-note{font-size:.92rem;color:#A9B4BF;margin-top:16px}
.anim .aw{opacity:0}
.anim .aw.seen{animation:awIn .65s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * .12s)}
@keyframes awIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.anim .aw.seen .aw-laurel{animation:awPop .8s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i) * .12s + .12s)}
@keyframes awPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}


/* --- consent banner --- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(10,14,19,.97);
    backdrop-filter:blur(14px);border-top:1px solid var(--line);
    animation:ccIn .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes ccIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.cc[hidden]{display:none}
.cc-in{max-width:var(--wrap);margin:0 auto;padding:20px var(--gut);
       display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-copy{flex:1 1 420px;min-width:0}
.cc-copy strong{display:block;font-family:var(--f-disp);font-weight:900;font-size:1rem;
                letter-spacing:-.02em;text-transform:uppercase;margin-bottom:7px}
.cc-copy p{font-size:.9rem;color:#A9B4BF;max-width:70ch}
.cc-copy a{color:var(--tungsten);border-bottom:1px solid var(--tungsten)}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap}
.cc-btns .btn{padding:12px 20px;font-size:.66rem}
@media(min-width:1240px){.cc{left:var(--rail)}}

/* --- legal pages --- */
.legal{max-width:76ch}
.legal h2{margin:38px 0 12px;font-size:1.02rem;text-transform:uppercase;font-weight:900;letter-spacing:-.01em}
.legal h2:first-child{margin-top:0}
.legal p{color:#C9D2DA;margin-bottom:14px;font-size:.98rem}
.legal ul{margin:0 0 18px;padding-left:0;list-style:none}
.legal li{color:#C9D2DA;font-size:.98rem;padding:6px 0 6px 18px;position:relative}
.legal li:before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--tungsten)}
.legal a{color:var(--tungsten);border-bottom:1px solid var(--tungsten)}
.legal strong{color:var(--paper)}
.todo{font-family:var(--f-data);font-size:.62rem;letter-spacing:.12em;color:var(--tungsten);
      border:1px dashed #3A4756;padding:2px 7px;white-space:nowrap}


/* Key selling points. Each row slides in on its own, and the accent rule
   under the label draws out, the same gesture as the media kit tabs. */
.facts-list{list-style:none;margin:22px 0;padding:0;display:grid;gap:0}
.facts-list li{
  font-size:.95rem;color:#B6C0CA;padding:14px 0;border-bottom:1px solid var(--line-soft);
  display:flex;gap:14px;flex-wrap:wrap;position:relative;
}
.facts-list li:last-child{border-bottom:0}
.facts-list li:after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--tungsten);
}
.anim .facts-list.seen li:after{animation:factRule .7s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--i) * .09s + .1s)}
@keyframes factRule{to{width:100%;opacity:.35}}
.facts-list b{
  flex:0 0 150px;font-family:var(--f-data);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tungsten);padding-top:3px;
}
.facts-list span{flex:1 1 240px;min-width:0}
.anim .facts-list li{opacity:0;transform:translateX(-16px)}
.anim .facts-list.seen li{
  animation:factIn .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * .09s);
}
@keyframes factIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@media(max-width:560px){.facts-list b{flex-basis:100%}}


/* --- thank you page --- */
.thanks-sec{border-top:0;min-height:62vh;display:grid;align-content:center;padding-top:clamp(120px,16vh,200px)}
.thanks-in{max-width:60ch}
.thanks-in .h-xl{margin:18px 0 20px}
.thanks-in .lead{margin-bottom:8px}

/* --- form result banners --- */
.formmsg{
  display:none;border:1px solid var(--line);background:var(--ink-2);
  padding:20px 24px;margin-bottom:26px;
}
.formmsg.on{display:block;animation:riseIn .55s cubic-bezier(.2,.7,.3,1) both}
.formmsg strong{
  display:block;font-family:var(--f-disp);font-weight:900;font-size:1.05rem;
  letter-spacing:-.02em;text-transform:uppercase;margin-bottom:6px;
}
.formmsg p{font-size:.94rem;color:#B6C0CA}
.formmsg.ok{box-shadow:inset 3px 0 0 var(--tungsten)}
.formmsg.bad{box-shadow:inset 3px 0 0 #C4553D}

/* ============ PAGES ============ */
.page{display:none}
.page.live{display:block}

/* ============ MOTION PREFERENCE ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero-grade{transform:scale(1.06)}
}