/* =====================================================================
   V5 BLUE RESKIN, LIVE SITE (loads LAST, after theme-cinema.css)
   Brand V7 voice on the launch site: Inter Tight 900 poster headlines, V5 royal/
   navy/sunflower palette, light liquid-glass hero, no italics, no
   eyebrows, no second colour in a headline. theme-cinema.css stays
   loaded for its functional launch components (tiles, gates, lm-grid);
   everything skin-level it set is counter-overridden here.
   ===================================================================== */

/* ------- tokens back to the V5 blue world ------- */
:root{
  --royal:#1E40AF; --navy:#0F172A; --sky:#3B82F6;
  --light-blue:#DBEAFE; --sunflower:#FCD34D;

  --ink:#0A0F1E;
  --muted:#525C70;
  --accent:#1E40AF;
  --accent-strong:#1E40AF;
  --border:rgba(10,15,30,.12);
  --border-strong:rgba(10,15,30,.24);
  --card-bg:linear-gradient(160deg, rgba(159,193,255,.55), rgba(87,122,222,.32));
  --card-ink:rgba(15,25,55,.55);
  --card-border:rgba(255,255,255,.55);
  --ground:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%);
  --dark:#0F172A;
  --dark-ink:#F2F6FF;
  --dark-muted:#9DB0CE;
  --dark-border:rgba(255,255,255,.14);

  --sx:#1E40AF; --sx-deep:#1E40AF; --sx-lite:#8FB0FF;

  --display:"Inter Tight", -apple-system, sans-serif;
  --text:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* cinema re-scoped accents per section; bring every section back to royal */
.world.w1, .navbar, .sheet, .trusted, #work, #method, #services, .cases,
#partner, #audit, #faq, #resources, .foot{
  --sx:#1E40AF; --sx-deep:#1E40AF; --sx-lite:#8FB0FF;
  --accent:#1E40AF; --accent-strong:#1E40AF;
}
#method, .cases, #audit{ --sx-deep:#8FB0FF; }

body{ background:var(--ground); font-family:var(--text); }

/* ------- headlines: Inter Tight 900, one weight, one colour -------
   Poster scale carries the wow; the face keeps the spacing even. */
.h1, .h2, .claim, .case-h3{
  font-family:var(--display);
  font-weight:900;
  font-style:normal;
  text-transform:none;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
/* poster scale (Ross 2026-08-27): the headline is the design */
.h1{ font-size:clamp(38px,4.6vw,68px); line-height:1.02; }
.h2{ font-size:clamp(34px,4.6vw,64px); line-height:1.04; }
.section-head .h2, .services-intro .h2, .thesis .h2{ max-width:16ch; margin-left:auto; margin-right:auto; }
/* site.css's .trusted .claim outranks bare .claim, so match it here */
.trusted .claim{
  font-family:var(--display); font-weight:900; letter-spacing:-0.025em;
  font-size:clamp(34px,4.6vw,64px); line-height:1.06;
}
.case-h3{ line-height:1.22; }
.h3, .cs-body h2{ font-family:var(--text); font-weight:800; font-style:normal; text-transform:none; letter-spacing:-0.02em; }
.lede, .sub{ text-wrap:pretty; }

/* browser surfaces carry the brand too */
::selection{ background:#1E40AF; color:#fff; }

/* kill the two-tone / italic emphasis inside headlines */
.payoff, .case-h3 em, .claim em, .soft,
.band-dark .payoff, .on-dark .payoff, .page-hero.on-dark .payoff, .page-hero .payoff{
  font:inherit !important;
  font-style:normal !important;
  font-weight:inherit !important;
  color:inherit !important;
  text-decoration:none !important;
}
#audit .h2 span[style]{ color:inherit !important; }
.stat-num em{ font-style:normal !important; font-weight:800 !important; color:#1E40AF; }
.svc-num, .case-num, .principle .ghost, .aud-card .n, .wc-metrics .wm-v em{ font-style:normal !important; }
em, i{ font-style:normal; }

/* ------- eyebrows: gone ------- */
.eyebrow{ display:none !important; }

/* ------- hairline frames: off ------- */
.section::after, .band-dark::after{ display:none; }

/* ------- hero: light liquid-glass world ------- */
.world.w1{ background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%); }
.w1-blobs .b1{ background:radial-gradient(circle,#9CC0FF,transparent 70%); }
.w1-blobs .b2{ background:radial-gradient(circle,#5B7EFF,transparent 70%); }
.w1-blobs .b3{ background:radial-gradient(circle,#C9DBFF,transparent 70%); }
.w1 .h1{ color:var(--ink); }
.w1 .sub{ color:var(--muted); }
.adcard{
  background:linear-gradient(160deg, rgba(159,193,255,.55), rgba(87,122,222,.32));
  color:rgba(15,25,55,.55);
  border-color:rgba(255,255,255,.55);
}
.adcard.is-hot, .adcard:hover{ border-color:rgba(255,255,255,.9); }

/* stat bar: dark text on the light hero by default */
.stat-row{ background:transparent; border-top:none; }
.stat-label{ color:#4A5670; letter-spacing:.08em; }
.stat-num{ color:#0A0F1E; font-style:normal; font-weight:900; font-family:var(--display); letter-spacing:-0.02em; }
.stat-denom{ color:#6B7488; }
.stat-cell + .stat-cell{ border-color:rgba(10,15,30,.12); }

/* ------- hero waves shader (hero-shader.js) -------
   gated on .has-shader, added only after the WebGL program links */
.w1-shader{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.w1.has-shader .w1-blobs{ display:none; }
.w1.has-shader .stat-label{ color:rgba(255,255,255,.6); }
.w1.has-shader .stat-num{ color:#FFFFFF; }
.w1.has-shader .stat-num em{ color:#FCD34D; }
.w1.has-shader .stat-denom{ color:rgba(255,255,255,.5); }
.w1.has-shader .stat-cell + .stat-cell{ border-color:rgba(255,255,255,.16); }

/* ------- nav: white liquid glass on every page ------- */
.navbar, body.on-bone .navbar, body.hero-dark .navbar:not(.over-dark), .navbar.over-dark{
  background:none !important;
}
.nav, body.on-bone .nav, body.hero-dark .navbar:not(.over-dark) .nav, .navbar.over-dark .nav{
  background:rgba(255,255,255,.55) !important;
  border-color:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
}
.navbar.is-scrolled .nav, .navbar.is-stuck .nav,
body.on-bone .navbar.is-scrolled .nav, body.hero-dark .navbar.is-scrolled:not(.over-dark) .nav{
  background:rgba(255,255,255,.78) !important;
}
.logo, body.on-bone .logo, body.hero-dark .navbar:not(.over-dark) .logo{ color:var(--ink) !important; }
.logo .dot{ color:#1E40AF !important; }
.navlink, body.on-bone .navlink, body.hero-dark .navbar:not(.over-dark) .navlink{ color:rgba(10,15,30,.72) !important; }
.navlink:hover, body.on-bone .navlink:hover{ color:var(--ink) !important; }
.limelight, body.on-bone .limelight{ background:rgba(30,64,175,.10) !important; }
.burger span, .burger span::before, .burger span::after,
body.on-bone .burger span, body.on-bone .burger span::before, body.on-bone .burger span::after{
  background:var(--ink) !important;
}

/* ------- buttons: V5 pills, tinted shadows ------- */
.btn{
  border-radius:999px; font-weight:800; font-size:13.5px; letter-spacing:.015em;
  text-transform:none;
  transition:transform .2s, box-shadow .2s, background .3s, border-color .3s, color .3s;
}
.btn.primary{
  background:#1E40AF; border-color:#1E40AF; color:#fff;
  box-shadow:0 4px 20px rgba(30,64,175,.25);
}
.btn.primary:hover{
  background:#1E40AF; border-color:#1E40AF;
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(30,64,175,.4);
}
.btn.secondary, body.on-bone .btn.secondary{
  background:rgba(255,255,255,.45); border-color:rgba(10,15,30,.12); color:var(--ink);
}
.btn.secondary:hover, body.on-bone .btn.secondary:hover{
  background:rgba(255,255,255,.72); border-color:rgba(10,15,30,.20); transform:translateY(-2px);
}
.band-dark .btn.secondary, body.on-bone .band-dark .btn.secondary{
  background:transparent; border-color:rgba(255,255,255,.35); color:#F2F6FF;
}
.band-dark .btn.secondary:hover{ border-color:#fff; }
.btn.ondark{ background:#FCD34D; border-color:#FCD34D; color:#0F172A; box-shadow:0 4px 20px rgba(252,211,77,.2); }
.btn.ondark:hover{ background:#FCD34D; transform:translateY(-2px); box-shadow:0 8px 32px rgba(252,211,77,.35); }
.form .btn.primary{
  background:#FCD34D; border-color:#FCD34D; color:#0F172A;
  box-shadow:0 4px 20px rgba(252,211,77,.25);
}
.form .btn.primary:hover{ background:#FCD34D; border-color:#FCD34D; box-shadow:0 8px 32px rgba(252,211,77,.4); }

/* ------- glass goes back to real liquid glass on light sections ------- */
.section .glass, .testi-card.glass{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.trusted .claim{ color:var(--ink); }
.logo-cell{ color:rgba(10,15,30,.45); }
.logo-cell:hover{ color:var(--ink); }
/* client logos in their own colours, full strength */
.logo-cell img{ filter:none; opacity:1; }
.logo-cell:hover img{ filter:none; opacity:1; }

/* ------- centred section heads -------
   The homepage reads as stacked blocks now, so every standard section
   head centres. Split compositions (hero + ad wall, audit + form) keep
   their layout. */
.section-head{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .lede{ margin-left:auto; margin-right:auto; max-width:58ch; }
.services-intro{ max-width:760px; margin:0 auto 52px; text-align:center; }
.services-intro .lede{ margin-left:auto; margin-right:auto; max-width:58ch; }
.section-head.head-split{ display:block; text-align:center; max-width:760px; }
.section-head.head-split .lede{ margin:16px auto 0; }
.trusted .claim{ margin-left:auto; margin-right:auto; text-align:center; max-width:15ch; }
.trusted .shell:first-child{ text-align:center; }
.thesis{ display:block; max-width:820px; margin:0 auto 56px; text-align:center; }
.thesis .h2{ max-width:none; margin-left:auto; margin-right:auto; }
.thesis .lede{ margin:18px auto 0; max-width:58ch; }
.page-hero .h1{ margin-left:auto; margin-right:auto; text-align:center; }
.page-hero .sub, .page-hero .lede{ margin-left:auto; margin-right:auto; text-align:center; }
.page-hero .ctas{ justify-content:center; }
.page-hero .shell{ text-align:center; }
.res-filters{ justify-content:center; }
.res-more{ text-align:center; }
.disq{ max-width:760px; margin-left:auto; margin-right:auto; }

/* ------- colour blocking: tint / white between the navy anchors ------- */
.trusted{ background:#E4EEFD; }
#work{ background:#FFFFFF; }
#services{ background:#FFFFFF; }
#partner{ background:#FFFFFF; }
#resources{ background:#E4EEFD; }
#faq{ background:#FFFFFF; }
#resources .lm-card{ border-color:rgba(10,15,30,.08); }
.testi-card.glass{ background:rgba(255,255,255,.72); }

/* ------- cases: light blue block instead of the navy band -------
   Ross 2026-08-27: too much dark blue. The section keeps its layout and
   the glass phone cards, recoloured for a light ground. */
.cases.band-dark{ background:#E4EEFD; color:var(--ink); }
.cases .aurora{ display:none; }
.cases .lede, .cases .case-context{ color:var(--muted); }
.cases .case-num{ color:#1E40AF; }
.cases .case-logo{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(10,15,30,.12);
  color:#1E40AF;
}
.cases .case-h3{ color:var(--ink); }
.cases .case-link{ color:#1E40AF; }
.cases .case-card{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.9);
  color:rgba(15,25,55,.45);
  box-shadow:0 18px 40px rgba(30,64,175,.16);
}
.cases .case-row:hover .case-card{ border-color:#fff; }
.cases .btn.secondary{ background:rgba(255,255,255,.45); border-color:rgba(10,15,30,.12); color:var(--ink); }

/* ------- V5 dark bands: royal-to-navy gradient, blue-only aurora ------- */
.band-dark{ background:linear-gradient(135deg, #1E40AF 0%, #0F172A 100%); }
.band-dark .aurora .a1, #method .aurora .a1, .cases .aurora .a1, #audit .aurora .a1{
  background:radial-gradient(circle, rgba(59,130,246,.55), transparent 70%);
}
.band-dark .aurora .a2, #method .aurora .a2, .cases .aurora .a2, #audit .aurora .a2{
  background:radial-gradient(circle, rgba(30,64,175,.5), transparent 70%);
}
.band-dark .aurora .a3, #method .aurora .a3, .cases .aurora .a3, #audit .aurora .a3{
  background:radial-gradient(circle, rgba(96,165,250,.45), transparent 70%);
}
#method .soft{ color:inherit; }
.hwt-icon svg{ color:#93C5FD; }
.principle .ghost{ color:rgba(255,255,255,.08); font-weight:800; font-family:var(--display); }
.principle h3{ font-family:var(--text); text-transform:none; letter-spacing:-0.01em; font-weight:800; font-size:16px; }
.case-num{ color:#FCD34D; font-weight:800; font-family:var(--display); }
.case-link{ color:#93C5FD; }
.cases .case-h3 em{ color:inherit !important; }
.band-dark .chips span{ border-color:rgba(252,211,77,.4); color:#FCD34D; text-transform:none; letter-spacing:.02em; font-size:12px; }

/* ------- services / partner / faq accents ------- */
#services .svc-num{ color:#1E40AF; font-weight:800; }
.tile .bar{ background:rgba(30,64,175,.22); }
.tile .bar:first-child{ background:rgba(30,64,175,.38); }
#partner .tick{ color:#1E40AF; }
.tlink{ color:#1E40AF; }
.disq{ border-left:2px solid #1E40AF; }

/* ------- launch components recoloured to royal ------- */
a.tile .use{ background:#1E40AF; box-shadow:0 6px 20px rgba(30,64,175,.34); text-transform:none; letter-spacing:.02em; font-size:11.5px; }
a.tile:focus-visible{ outline-color:#1E40AF; }
.lm-card:hover{ border-color:rgba(30,64,175,.4); box-shadow:0 22px 48px rgba(10,15,30,.13); }
.lm-kind{ color:#1E40AF; }
.res-filter.is-on{ background:#1E40AF; border-color:#1E40AF; }
.res-filter:focus-visible, .lm-card:focus-visible{ outline-color:#1E40AF; }
.constraint-tag{ background:rgba(30,64,175,.08); border-color:rgba(30,64,175,.26); color:#1E40AF; }
.gate-form .field input:focus{ border-color:#1E40AF; }
.gate-list li::before{ background:#1E40AF; }
.tile.fit{ background:var(--tile-bg, #F7FAFF); border-color:rgba(10,15,30,.10); }
.tile.fit.ink{ --tile-bg:#0F172A; }
.tile.fill{ background:#F7FAFF; border-color:rgba(10,15,30,.10); }

/* ------- subpage heroes on the light ground ------- */
.page-hero{ background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%); }
.page-hero .h1{ color:var(--ink); }
.page-hero .w1-blobs .b1{ background:radial-gradient(circle,rgba(156,192,255,.5),transparent 70%); }
.page-hero .w1-blobs .b2{ background:radial-gradient(circle,rgba(91,126,255,.34),transparent 70%); }
.page-hero .w1-blobs .b3{ background:radial-gradient(circle,rgba(201,219,255,.4),transparent 70%); }

/* ------- footer: navy, sunflower full stop ------- */
.foot{ background:#0F172A; }
.foot .logo{ color:#F2F6FF !important; }
.foot .logo .dot{ color:#FCD34D !important; }
.foot .tag{ color:#9DB0CE; }
.foot h4{ letter-spacing:.14em; color:rgba(242,246,255,.5); }
.foot a:hover{ color:#93C5FD; }
.foot-bot{ color:rgba(242,246,255,.4); }

/* ------- Who we work with: bento ------- */
.pbento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:44px; }
.pb-card{
  grid-column:span 2; min-width:0; position:relative; overflow:hidden;
  border-radius:18px; padding:26px; background:#fff; border:1px solid var(--border);
}
@media(max-width:900px){ .pb-card{ grid-column:span 3; } }
@media(max-width:640px){ .pb-card{ grid-column:span 6; } }
.pb-card h3{ font-size:17px; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px; }
.pb-card p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
.pb-viz{ display:flex; align-items:center; justify-content:center; min-height:110px; margin-bottom:14px; }
.pb-fig{ position:relative; font-family:var(--display); font-weight:900; letter-spacing:-0.02em; font-size:34px; color:#0A0F1E; padding:16px 30px; }
.pb-fig svg{ position:absolute; inset:-6px -10px; width:calc(100% + 20px); height:calc(100% + 12px); }
.pb-label{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.pb-num{ font-family:var(--display); font-weight:900; letter-spacing:-0.02em; font-size:clamp(30px,3vw,42px); line-height:1.05; margin-bottom:10px; }
.pb-card.sun{ background:#FCD34D; border:none; }
.pb-card.sun .pb-label{ color:rgba(15,23,42,.55); }
.pb-card.sun .pb-num, .pb-card.sun h3{ color:#0F172A; }
.pb-card.sun p{ color:rgba(15,23,42,.72); }
.pb-card.navy{ background:#0F172A; border:none; }
.pb-card.navy .pb-label{ color:rgba(255,255,255,.45); }
.pb-card.navy .pb-num, .pb-card.navy h3{ color:#fff; }
.pb-card.navy p{ color:rgba(255,255,255,.72); }
.pb-team{ display:flex; align-items:center; gap:0; margin-top:18px; flex-wrap:wrap; }
.pb-role{ display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:#F8FAFC; border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:700; color:#0A0F1E; white-space:nowrap; }
.pb-role i{ width:6px; height:6px; border-radius:50%; background:#1E40AF; display:block; }
.pb-link{ width:14px; height:1.5px; background:var(--border-strong); flex:0 0 auto; }


/* todo placeholders stay loud for internal review */
.todo{ color:#C24608 !important; }

/* =====================================================================
   REAL AD CREATIVE: fit the frame to the artwork
   The card sizes were drawn for 9:16 placeholders. The actual creative is
   4:5 and 1:1, so a fixed aspect ratio cropped the top and bottom off every
   ad. These let each image set its own height and drop the placeholder
   chrome (padding, gradient fill, inner shadow) that framed it.
   ===================================================================== */
.adcard{
  aspect-ratio:auto; height:auto; padding:0; overflow:hidden;
  background:none; box-shadow:none;
  border:1px solid rgba(255,255,255,.5);
}
.adcard img{ width:100%; height:auto; display:block; object-fit:fill; }

.cs-gallery{ align-items:start; }
.cs-shot{
  aspect-ratio:auto; height:auto; padding:0; overflow:hidden;
  display:block; background:none;
  border:1px solid var(--border); border-radius:12px;
}
.cs-shot img{ width:100%; height:auto; display:block; border-radius:inherit; }

/* homepage case fan: same rule as the hero, the card takes the artwork's
   shape rather than cropping it into a 9:16 frame */
.cases .case-card{ aspect-ratio:auto; height:auto; padding:0; overflow:hidden; }
.cases .case-card img{ width:100%; height:auto; display:block; border-radius:inherit; }
/* a row with no creative yet gives its copy the full width */
.case-row:not(:has(.case-media)){ grid-template-columns:1fr; }

/* =====================================================================
   CASE STUDY GRID (3 across, wrapping)
   Same anatomy as the reference: category chip, brand, stats, a
   horizontally scrolling strip of that client's real creative.
   NOTE: .cases still carries the legacy .band-dark class but V7 repaints
   that band light (#E4EEFD), so these are styled for a light ground:
   ink type, electric numbers, white card. Do not assume dark here.
   ===================================================================== */
.rc-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:24px;
}
.rc-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid rgba(20,19,16,.10);
  border-radius:18px; padding:26px 26px 22px;
  box-shadow:0 10px 30px rgba(30,64,175,.07);
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rc-card:hover{
  border-color:rgba(36,83,255,.35); transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(30,64,175,.16);
}
.rc-cat{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#1E40AF;
  border:1px solid rgba(30,64,175,.35); border-radius:999px; padding:6px 13px;
}
.rc-brand{
  font-family:var(--display, 'Archivo Black'), sans-serif; font-weight:400;
  font-size:27px; letter-spacing:-.01em; color:#141310; margin:16px 0 18px;
}
.rc-stats{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.rc-stat{ display:flex; align-items:baseline; gap:12px; }
.rc-n{
  font-size:30px; font-weight:800; letter-spacing:-.02em; color:#2453FF;
  flex:0 0 auto; font-variant-numeric:tabular-nums;
}
.rc-l{ font-size:13.5px; font-weight:400; line-height:1.4; color:#57544C; }

/* the creative strip scrolls on its own, so a long set never widens the page */
.rc-strip{
  display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:10px; margin-top:auto;
  scrollbar-width:thin; scrollbar-color:rgba(20,19,16,.28) transparent;
}
.rc-strip::-webkit-scrollbar{ height:6px; }
.rc-strip::-webkit-scrollbar-thumb{ background:rgba(20,19,16,.24); border-radius:3px; }
/* Filmstrip: pin the HEIGHT, let width follow the artwork. Ad creative arrives
   at 9:16, 4:5 and 1:1; fixing the width instead gives every strip ragged bottoms. */
.rc-shot{
  flex:0 0 auto; height:132px; border-radius:8px; overflow:hidden;
  border:1px solid rgba(20,19,16,.12); background:var(--ground,#F4F2ED);
}
.rc-shot img{ height:100%; width:auto; display:block; }
.rc-note{
  margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#7A756B;
}
.rc-note--soon{ margin-top:auto; padding-top:20px; }
.rc-link{
  margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#1E40AF;
  display:inline-flex; align-items:center; gap:8px;
}
.rc-link .arw{ transition:transform .4s var(--ease); }
.rc-card:hover .rc-link .arw{ transform:translateX(4px); }
@media (max-width:560px){ .rc-grid{ grid-template-columns:1fr; } }