/* =====================================================================
   PERFORMANCE CINEMA THEME (BLUE-LED) — reskin layer over site.css
   Structure, layout and motion untouched. This sheet only re-brands:
     bases     ink #0A0A0B + bone #F4F2ED
     accents   ONE per section, blue leads:
               Electric Blue #2453FF (lead) · Sky #8FB0FF (blue on ink)
               Signal Yellow #F5C518 (punctuation) · Ultraviolet #8B7CF6
     type      Hanken Grotesk. Caps setup + bold-italic payoff turn.
     furniture hairline frames, pill chips, pill CTAs
   ===================================================================== */

:root{
  --ink:#141310;
  --muted:#57544C;
  --accent:#2453FF;
  --accent-strong:#1E40AF;
  --on-accent:#FFFFFF;
  --border:rgba(20,19,16,.16);
  --border-strong:rgba(20,19,16,.3);

  --card-bg:linear-gradient(160deg, rgba(20,19,16,.05), rgba(20,19,16,.10));
  --card-ink:rgba(20,19,16,.6);
  --card-border:rgba(20,19,16,.18);

  --ground:#F4F2ED;

  --dark:#0A0A0B;
  --dark-ink:#F4F2ED;
  --dark-muted:#9C978C;
  --dark-border:rgba(255,255,255,.14);

  /* section accent, re-scoped per section below */
  --sx:#2453FF;        /* the accent itself */
  --sx-deep:#1E40AF;   /* text-safe on bone */
  --sx-lite:#8FB0FF;   /* text-safe on ink */
}

/* ------- per-section accent scoping ------- */
.world.w1, .navbar, .sheet { --sx:#2453FF; --sx-deep:#1E40AF; --sx-lite:#8FB0FF; }
.trusted                   { --sx:#2453FF; --sx-deep:#1E40AF; }
#work                      { --sx:#F5C518; --sx-deep:#8A6D00; --accent:#D9A900; --accent-strong:#8A6D00; }
#method                    { --sx:#8B7CF6; --sx-deep:#CDBFFF; --sx-lite:#CDBFFF; --accent:#8B7CF6; --accent-strong:#CDBFFF; }
#services                  { --sx:#2453FF; --sx-deep:#1E40AF; }
.cases                     { --sx:#2453FF; --sx-deep:#8FB0FF; --sx-lite:#8FB0FF; --accent-strong:#8FB0FF; }
#partner                   { --sx:#2453FF; --sx-deep:#1E40AF; }
#audit                     { --sx:#2453FF; --sx-deep:#8FB0FF; --sx-lite:#8FB0FF; }
#faq                       { --sx:#2453FF; --sx-deep:#1E40AF; }
.foot                      { --sx:#2453FF; --sx-lite:#8FB0FF; }

/* ------- base + type ------- */
body{
  background:var(--ground);
  font-family:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Voice 1 + 2: caps setup, bold-italic payoff turn */
.h1, .h2{
  text-transform:uppercase;
  font-weight:450;
  letter-spacing:.004em;
}
.h1{ font-weight:420; }
.payoff,
.case-h3 em,
.stat-num em,
.claim em{
  font-style:italic !important;
  font-weight:800 !important;
  color:var(--sx-deep);
}
.band-dark .payoff,
.on-dark .payoff,
.page-hero.on-dark .payoff{ color:var(--sx-lite); }
.case-h3{ text-transform:none; }
.claim{ text-transform:uppercase; font-weight:450; }
.claim em{ font-style:italic; }

/* Voice 3: eyebrows become tracked pill chips */
.eyebrow{
  display:inline-flex;
  border:1px solid currentColor;
  border-radius:999px;
  padding:7px 16px 6px;
  letter-spacing:.26em;
  font-size:10.5px;
  color:var(--sx-deep);
}
.eyebrow::before{ display:none; }
.band-dark .eyebrow{ color:var(--sx-lite); }
.band-dark .eyebrow::before{ display:none; }

/* ------- hairline frames (Ross 2026-08-12: not on hero / trusted / work) ------- */
.section::after,
.band-dark::after{
  content:"";
  position:absolute; inset:22px;
  border:1px solid rgba(20,19,16,.13);
  pointer-events:none;
  z-index:3;
}
.band-dark::after{ border-color:rgba(255,255,255,.13); }
#work::after{ display:none; }
.world.w1{ position:relative; }

/* ------- hero world: ink cinema, blue light ------- */
.world.w1{ background:#0A0A0B; }
.w1-blobs .b1{ background:radial-gradient(circle,rgba(36,83,255,.5),transparent 70%); }
.w1-blobs .b2{ background:radial-gradient(circle,rgba(91,126,255,.42),transparent 70%); }
.w1-blobs .b3{ background:radial-gradient(circle,rgba(245,197,24,.14),transparent 70%); }
.w1 .h1{ color:#F4F2ED; }
.w1 .sub{ color:rgba(244,242,237,.72); }
.w1 .payoff{ color:#8FB0FF; text-decoration:underline; text-underline-offset:10px; text-decoration-thickness:2px; }
.w1 .eyebrow{ color:#8FB0FF; }

/* hero ad wall: dark glass cards */
.adcard{
  background:linear-gradient(165deg, rgba(143,176,255,.16), rgba(143,176,255,.05));
  color:rgba(200,214,255,.55);
  border-color:rgba(143,176,255,.22);
}
.adcard.is-hot, .adcard:hover{ border-color:rgba(143,176,255,.9); }

/* stat bar rides on the ink hero */
.stat-row{ background:transparent; border-top:1px solid rgba(255,255,255,.14); }
.stat-label{ color:rgba(244,242,237,.55); letter-spacing:.22em; }
.stat-num{ color:#F4F2ED; font-style:italic; font-weight:800; }
.stat-num em{ color:#8FB0FF; }
.stat-denom{ color:rgba(244,242,237,.45); }
.stat-cell + .stat-cell{ border-color:rgba(255,255,255,.12); }

/* ------- nav: translucent ink glass, readable over EVERY section ------- */
/* A soft blue-black gradient rides behind the pill so the nav never washes
   out on bone sections; kept transparent per Ross 2026-08-12. */
.navbar{
  background:linear-gradient(180deg, rgba(9,12,24,.55) 0%, rgba(9,12,24,.25) 55%, rgba(9,12,24,0) 100%) !important;
}
.nav{
  background:rgba(10,12,20,.5) !important;
  border-color:rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}
.navbar.is-scrolled .nav{ background:rgba(10,12,20,.66) !important; }
.logo{ color:#F4F2ED !important; }
.logo .dot{ color:#F5C518 !important; }
.navlink{ color:rgba(244,242,237,.78) !important; }
.navlink:hover{ color:#fff !important; }
.limelight{ background:rgba(143,176,255,.2) !important; }
.burger span, .burger span::before, .burger span::after{ background:#F4F2ED !important; }

/* ------- buttons: pill chips ------- */
.btn{ border-radius:999px; letter-spacing:.06em; text-transform:uppercase; font-size:12px; font-weight:700; }
.btn.primary{
  background:#2453FF; border-color:#2453FF; color:#fff;
}
.btn.primary:hover{ background:#3D66FF; border-color:#3D66FF; box-shadow:0 6px 22px rgba(36,83,255,.35); }
.btn.secondary{ border-color:rgba(255,255,255,.35); color:#F4F2ED; background:transparent; }
.btn.secondary:hover{ border-color:#F4F2ED; }
.btn.ondark{ background:#2453FF; color:#fff; border-color:#2453FF; }

/* ------- trusted band on bone ------- */
.trusted .claim{ color:var(--ink); }
.trusted .claim em{ color:var(--sx-deep); }
.logo-cell{ color:rgba(20,19,16,.45); }
.logo-cell:hover{ color:var(--ink); }
.testi-card.glass{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(20,19,16,.14);
  box-shadow:none;
  border-radius:14px;
}

/* ------- glass primitives on bone: quiet paper cards ------- */
.section .glass{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(20,19,16,.14);
  box-shadow:none;
  border-radius:14px;
}

/* ------- work marquee: yellow section, real creative ------- */
#work .eyebrow{ color:#8A6D00; }
.work-card img, .work-square img, .browser-body img, .adcard img, .tile img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}
.adcard, .tile{ overflow:hidden; padding:0; }
.tile img{ object-position:top; }

/* ------- service tiles that hold a real screenshot -------
   cover + object-position:top is right for ad creative, where the top of
   the frame is the point. It is wrong for a chart or a dashboard: cropping
   a 2.9:1 panel into a square cell cuts off the axis and half the numbers.
   .tile.fit contains the whole panel and paints the tile in that image's
   own ground so there is no letterbox seam. */
.tile.fit{
  background:var(--tile-bg, #F4F2ED);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(20,19,16,.10);
}
.tile.fit img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.tile.fit.ink{ --tile-bg:#0A0A0B; border-color:rgba(255,255,255,.10); }

/* a tile that links out to a live tool */
a.tile{ position:relative; text-decoration:none; display:block; }
a.tile.fit{ display:flex; }
a.tile .use{
  position:absolute; right:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:#2453FF; color:#fff; border-radius:999px;
  padding:8px 15px; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 6px 20px rgba(36,83,255,.34);
  transform:translateY(4px); opacity:0;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
a.tile .use::after{ content:"\2192"; }
a.tile:hover .use, a.tile:focus-visible .use{ opacity:1; transform:none; }
a.tile:focus-visible{ outline:2px solid #2453FF; outline-offset:3px; }
/* touch and reduced-motion users never hover: show it outright */
@media (hover:none){ a.tile .use{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ a.tile .use{ opacity:1; transform:none; } }
.logo-cell img{ height:30px; width:auto; opacity:.65; filter:grayscale(1) contrast(1.1); transition:opacity .3s, filter .3s; }
.logo-cell:hover img{ opacity:1; filter:none; }

/* ------- method band: ultraviolet cinema ------- */
#method .aurora .a1{ background:radial-gradient(circle,rgba(139,124,246,.6),transparent 70%); }
#method .aurora .a2{ background:radial-gradient(circle,rgba(36,83,255,.4),transparent 70%); }
#method .aurora .a3{ background:radial-gradient(circle,rgba(90,70,200,.45),transparent 70%); }
#method .soft{ color:#CDBFFF; }
.hwt-icon svg{ width:44px; height:44px; color:#CDBFFF; display:block; }
.principle .ghost{ color:rgba(255,255,255,.08); font-style:italic; font-weight:800; }
.principle h3{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:15px; }

/* ------- services on bone, blue ------- */
#services .svc-num{ color:var(--sx-deep); font-style:italic; font-weight:800; }
#services .svc-name{ font-weight:700; }
.tile .bar{ background:rgba(36,83,255,.22); }
.tile .bar:first-child{ background:rgba(36,83,255,.38); }

/* ------- cases band: blue night ------- */
.cases .aurora .a1{ background:radial-gradient(circle,rgba(36,83,255,.55),transparent 70%); }
.cases .aurora .a2{ background:radial-gradient(circle,rgba(139,124,246,.3),transparent 70%); }
.cases .aurora .a3{ background:radial-gradient(circle,rgba(14,110,233,.4),transparent 70%); }
.cases .case-h3 em{ color:#8FB0FF; }
.case-link{ color:#8FB0FF; }
.case-num{ font-style:italic; font-weight:800; }
.slack-bubble{ border-radius:14px; }

/* ------- partner on bone, blue ------- */
#partner .tick{ color:var(--sx-deep); }
#partner .qual h3{ font-weight:700; }
.term.glass .k{ letter-spacing:.2em; text-transform:uppercase; font-size:10px; color:var(--muted); }
.disq{ border-left:2px solid var(--sx); }

/* ------- audit band: blue cinema, yellow punctuation ------- */
#audit .aurora .a1{ background:radial-gradient(circle,rgba(36,83,255,.5),transparent 70%); }
#audit .aurora .a2{ background:radial-gradient(circle,rgba(91,126,255,.35),transparent 70%); }
#audit .aurora .a3{ background:radial-gradient(circle,rgba(245,197,24,.12),transparent 70%); }
#audit .h2 span[style]{ color:#8FB0FF !important; }
#audit .chips span{ border-radius:999px; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; }
.form.glass-dark{ border-radius:16px; }
.form .btn.primary{ width:100%; }

/* ------- faq on bone ------- */
#faq .faq-q{ font-weight:600; }

/* ------- footer: ink ------- */
.foot{ background:#0A0A0B; }
.foot .logo .dot{ color:#F5C518 !important; }
.foot .tag{ color:var(--dark-muted); }
.foot h4{ letter-spacing:.24em; text-transform:uppercase; font-size:10.5px; color:rgba(244,242,237,.5); }
.foot a:hover{ color:#8FB0FF; }
.foot-bot{ color:rgba(244,242,237,.4); }

/* ------- todo placeholders tone to theme ------- */
.todo{ color:#C24608 !important; }

/* =====================================================================
   SUBPAGES (work, case studies, audit, 404)
   The reskin was originally scoped to the homepage, so anything that
   only appears on a subpage kept its pre-V6 blue. These bring the rest
   of the site into the same world. Structure untouched, colour and type
   only, same as the rest of this sheet.
   ===================================================================== */

/* the subpage hero kept the old blue gradient (site.css .page-hero);
   V6 puts it on the editorial bone ground */
.page-hero{ background:var(--ground); }
.page-hero .h1{ color:var(--ink); }
.page-hero .payoff{ color:var(--sx-deep); font-style:italic; }

/* hero light on bone: electric with a yellow punctuation hit, well under
   the homepage's intensity so the ink hero stays the loud one */
.page-hero .w1-blobs .blob{ opacity:.34; }
.page-hero .w1-blobs .b1{ background:radial-gradient(circle,rgba(36,83,255,.34),transparent 70%); }
.page-hero .w1-blobs .b2{ background:radial-gradient(circle,rgba(139,124,246,.24),transparent 70%); }
.page-hero .w1-blobs .b3{ background:radial-gradient(circle,rgba(245,197,24,.16),transparent 70%); }

/* ---- nav over a light ground ----
   The ink nav above is right over the homepage's ink hero and stays
   exactly as Ross set it on 2026-08-12. It was written when only the
   homepage was in scope, so on a bone hero the dark veil and dark pill
   read as a grey slab over a light page. These rules only apply to
   pages whose hero is bone, so the homepage is untouched.

   body.on-bone   hero is bone the whole way down: light nav always.
   body.hero-dark hero opens ink then scrolls into light. site.js already
                  toggles .over-dark off at that boundary, so the light
                  treatment hangs off :not(.over-dark). */
body.on-bone .navbar,
body.hero-dark .navbar:not(.over-dark){
  background:linear-gradient(180deg, rgba(244,242,237,.72) 0%, rgba(244,242,237,.28) 55%, rgba(244,242,237,0) 100%) !important;
}
body.on-bone .nav,
body.hero-dark .navbar:not(.over-dark) .nav{
  background:rgba(255,255,255,.62) !important;
  border-color:rgba(20,19,16,.10) !important;
}
body.on-bone .navbar.is-scrolled .nav,
body.hero-dark .navbar.is-scrolled:not(.over-dark) .nav{
  background:rgba(255,255,255,.78) !important;
}
body.on-bone .logo,
body.hero-dark .navbar:not(.over-dark) .logo{ color:var(--ink) !important; }
body.on-bone .navlink,
body.hero-dark .navbar:not(.over-dark) .navlink{ color:rgba(20,19,16,.72) !important; }
body.on-bone .navlink:hover,
body.hero-dark .navbar:not(.over-dark) .navlink:hover{ color:var(--ink) !important; }
body.on-bone .limelight,
body.hero-dark .navbar:not(.over-dark) .limelight{ background:rgba(36,83,255,.10) !important; }
body.on-bone .burger span,
body.on-bone .burger span::before,
body.on-bone .burger span::after,
body.hero-dark .navbar:not(.over-dark) .burger span,
body.hero-dark .navbar:not(.over-dark) .burger span::before,
body.hero-dark .navbar:not(.over-dark) .burger span::after{ background:var(--ink) !important; }

/* the Signal Yellow full stop holds in both states (V6 §3) */

/* .btn.secondary above is bone text on a transparent ground with a white
   hairline: correct on the ink hero, invisible on a bone one. Give it ink
   on light grounds, and put the light version back inside dark bands. */
body.on-bone .btn.secondary{
  border-color:rgba(20,19,16,.28);
  color:var(--ink);
}
body.on-bone .btn.secondary:hover{ border-color:var(--ink); }
body.on-bone .band-dark .btn.secondary,
body.on-bone .on-dark .btn.secondary{
  border-color:rgba(255,255,255,.35);
  color:#F4F2ED;
}
body.on-bone .band-dark .btn.secondary:hover,
body.on-bone .on-dark .btn.secondary:hover{ border-color:#F4F2ED; }

/* case study furniture still carrying literal blue from site.css */
.cs-body h2{ text-transform:uppercase; font-weight:450; letter-spacing:.004em; }
.cs-lead{ border-left-color:var(--sx); }
.constraint-tag{
  background:rgba(36,83,255,.10);
  border-color:rgba(36,83,255,.26);
  color:var(--sx-deep);
}
.meta-strip span{ letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; }

/* work index cards */
.wc-metrics .wm-v em{ font-style:italic; color:var(--sx-deep); }
.wm-k{ letter-spacing:.2em; text-transform:uppercase; font-size:10px; color:var(--muted); }

/* audit page: the three-up cards and step numbers */
.aud-card .n{ color:var(--sx-deep); font-style:italic; }
.get .tick{ color:var(--sx); }

/* ------- /resources: the lead magnet grid ------- */
.lm-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:26px;
}
.lm-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.lm-card:hover{
  transform:translateY(-4px);
  border-color:rgba(36,83,255,.4);
  box-shadow:0 22px 48px rgba(20,19,16,.13);
}
.lm-card:focus-visible{ outline:2px solid var(--sx); outline-offset:3px; }
/* the shot is a real screenshot of the thing, cropped to its cover */
.lm-shot{ display:block; aspect-ratio:1200/750; overflow:hidden; background:var(--ground);
  border-bottom:1px solid var(--border); }
.lm-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .6s var(--ease); }
.lm-card:hover .lm-shot img{ transform:scale(1.03); }
.lm-body{ display:flex; flex-direction:column; gap:9px; padding:22px 24px 24px; flex:1 1 auto; }
.lm-kind{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sx-deep);
  border:1px solid currentColor; border-radius:999px; padding:5px 11px;
}
.lm-title{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.lm-desc{ font-size:14px; font-weight:300; line-height:1.55; color:var(--muted); }
.lm-go{
  margin-top:auto; padding-top:14px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sx-deep);
  display:inline-flex; align-items:center; gap:8px;
}
.lm-card:hover .lm-go .arw{ transform:translateX(4px); }
.lm-go .arw{ transition:transform .4s var(--ease); }
@media (max-width:560px){ .lm-grid{ grid-template-columns:1fr; gap:20px; } }

/* ------- homepage free-tools band: filter chips + compact cards ------- */
.res-filters{
  display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 26px;
}
.res-filter{
  font:inherit; cursor:pointer; background:transparent;
  border:1px solid var(--border-strong); border-radius:999px; padding:9px 17px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.res-filter span{ opacity:.5; margin-left:6px; font-variant-numeric:tabular-nums; }
.res-filter:hover{ color:var(--ink); border-color:var(--ink); }
.res-filter.is-on{ background:var(--sx); border-color:var(--sx); color:#fff; }
.res-filter.is-on span{ opacity:.7; }
.res-filter:focus-visible{ outline:2px solid var(--sx); outline-offset:3px; }

/* the homepage cards carry a short meta line instead of a paragraph */
.lm-meta{ font-size:12.5px; font-weight:300; color:var(--muted); letter-spacing:.01em; }
.res-grid .lm-body{ gap:7px; padding:18px 20px 20px; }
.res-grid .lm-title{ font-size:17px; }

/* filtering out is a fade and collapse, not a hard jump */
.lm-card.is-hidden{ display:none; }
.res-more{ margin-top:30px; }

/* ------- /go/* lead capture gates ------- */
.gate{ display:grid; grid-template-columns:1fr 460px; gap:56px; align-items:center; }
.gate-copy .h1{ margin-bottom:18px; }
.gate-list{ list-style:none; margin:26px 0 0; padding:0; }
.gate-list li{
  position:relative; padding-left:28px; margin-bottom:13px;
  font-size:15px; font-weight:300; line-height:1.55; color:var(--muted); max-width:52ch;
}
.gate-list li::before{
  content:""; position:absolute; left:0; top:8px;
  width:9px; height:9px; border-radius:50%; background:var(--sx);
}
.micro-dark{ margin-top:26px; font-size:12.5px; font-weight:300; color:var(--muted); }
.gate-panel{ padding:0; overflow:hidden; border-radius:16px; }
.gate-shot{
  width:100%; height:auto; display:block; aspect-ratio:1200/750;
  object-fit:cover; object-position:top center; border-bottom:1px solid var(--border);
}
.gate-form{ padding:26px 26px 28px; }
.gate-form .field label{ color:var(--muted); }
.gate-form .field input{
  background:rgba(20,19,16,.04); border-color:rgba(20,19,16,.16); color:var(--ink);
}
.gate-form .field input::placeholder{ color:rgba(20,19,16,.38); }
.gate-form .field input:focus{ border-color:var(--sx); background:#fff; }
.gate-form .opt{ font-weight:400; letter-spacing:.04em; opacity:.6; text-transform:none; }
.gate-form .btn{ width:100%; margin-top:6px; }
.gate-form .form-status{ color:var(--muted); }
@media (max-width:960px){
  .gate{ grid-template-columns:1fr; gap:34px; }
  .gate-panel{ order:-1; }
}

/* ------- .tile.fill: screenshots that must reach the edges -------
   .tile.fit contains the whole panel, which letterboxes whenever the
   image ratio and the cell ratio disagree: a 1.6:1 calculator inside a
   2:1 cell showed bone down both sides. These screenshots are all page
   tops, so covering from the top edge loses nothing that matters and
   leaves no gap. */
.tile.fill{ background:var(--ground); border:1px solid rgba(20,19,16,.10); }
.tile.fill img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}