/* =====================================================================
   FASTLANE — Brand Intelligence Firm
   Shared design system stylesheet
   ===================================================================== */

:root{
  --orange: #FF4612;
  --orange-deep: #E63A0A;
  --navy: #1E2A38;
  --navy-2: #15202C;
  --paper: #ECECE8;
  --paper-2: #E3E2DD;
  --white: #FFFFFF;
  --rule: #C9C7C0;
  --rule-strong: #6c7682;
  --muted: #8A8A85;
  --ink: #1E2A38;
  --ink-soft: #4a5360;
}
*{ box-sizing: border-box;}
html, body{ margin:0; padding:0; overflow-x: clip;}
body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none;}

.mono{
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.mono.lg{ font-size: 14px;}
.mono.orange{ color: var(--orange);}
.mono.muted{ color: var(--muted);}
.mono.white{ color:#fff;}

/* Accessibility utility: visually hide a label but keep it for screen readers / form plugins. */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

.container{ max-width: 1320px; margin: 0 auto; padding: 0 64px;}
.container--wide{ max-width: 1440px; margin: 0 auto; padding: 0 64px;}

.hr{ height:1px; background: var(--rule-strong); border:0; opacity:0.35;}
.hr--dark{ background: rgba(255,255,255,0.2);}

/* ===== NAV ===== */
nav.top{
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.top-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items:center;
  padding: 18px 64px 0;
  max-width: 1440px; margin: 0 auto;
  row-gap: 0;
}
.top-inner .brand{ grid-column: 1; grid-row: 1; align-self: center;}
.top-inner .nav-actions{ grid-column: 3; grid-row: 1;}
.top-inner .nav-links{
  grid-column: 1 / -1; grid-row: 2;
  justify-content: flex-start;
  gap: 32px;
  padding: 14px 0;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
}
.brand{ display:flex; align-items:center; gap:10px; line-height: 0; }
.brand-logo{ display:block; height: 36px; width: auto; max-width: 240px;}
.brand-logo--foot{ height: 28px; max-width: 180px;}
.brand .dot{ width:10px; height:10px; background: var(--orange); border-radius: 50%;}
.nav-links{ display:flex; gap: 28px; justify-content:center;}
.nav-links a{ font-size: 13px; color: var(--ink); letter-spacing: 0.02em; position: relative; padding: 4px 0;}
.nav-links a::after{
  content:""; position:absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--orange);
  transition: right 360ms cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after{ right: 0;}
.nav-links a.active{ font-weight: 700;}
.nav-actions{ display:flex; gap: 14px; justify-content:flex-end; align-items:center;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 18px;
  font-family: "IBM Plex Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: all 160ms cubic-bezier(.2,.7,.2,1), transform 320ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover{ background: var(--ink); color:#fff; transform: translateY(-2px);}
.btn--orange{ background: var(--orange); border-color: var(--orange); color:#fff;}
.btn--orange:hover{ background: var(--orange-deep); border-color: var(--orange-deep); color:#fff;}
.btn--ghost-light{ border-color: rgba(255,255,255,0.4); color:#fff;}
.btn--ghost-light:hover{ background:#fff; color: var(--ink); border-color:#fff;}
.btn--white{ background:#fff; color: var(--ink); border-color: #fff;}
.btn--white:hover{ background: var(--ink); color:#fff; border-color: var(--ink);}
.btn--lg{ padding: 18px 26px; font-size: 13px;}
.btn .arrow{ font-family: inherit;}

/* ===== UTILITIES ===== */
.badge{
  display:inline-flex; align-items:center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--rule);
  font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}
.badge .b-dot{ width: 6px; height: 6px; border-radius:50%; background: var(--orange);}

/* ===== PAGE HERO (interior pages) ===== */
section.page-hero{
  padding: 64px 0 90px 0;
  border-bottom: 1px solid var(--rule-strong);
  position: relative; overflow: hidden;
}
.page-hero .top-meta{
  display:flex; justify-content: space-between; align-items: baseline; padding-bottom: 28px; border-bottom: 1px solid var(--rule);
}
.page-hero h1{
  margin: 32px 0 0 0;
  font-size: 184px; line-height: 0.9; letter-spacing: -0.04em; font-weight: 900;
}
.page-hero h1 em{ font-style: normal; color: var(--orange);}
.page-hero .hero-body{
  display:grid; grid-template-columns: 220px 1fr 380px; gap: 80px; margin-top: 64px;
  align-items: start;
}
.page-hero .hero-body .hb-l{ }
.page-hero .hero-body .hb-m{
  font-size: 26px; line-height: 1.45; color: var(--ink); font-weight: 500; max-width: 720px;
}
.page-hero .hero-body .hb-r{
  border-left: 1px solid var(--rule-strong); padding-left: 24px;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.page-hero .hero-body .hb-r h4{
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.005em; color: var(--ink);
}
.page-hero .hero-body .hb-r p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft);}
}

/* ===== SECTION SCAFFOLDS ===== */
section.sec{ padding: 120px 0;}
section.sec.dark{ background: var(--navy); color:#fff;}
section.sec.orange{ background: var(--orange); color:#fff;}
section.sec.paper2{ background: var(--paper-2);}
.sec-head{
  display:grid; grid-template-columns: 220px 1fr; gap: 56px;
  align-items: baseline; padding-bottom: 48px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 24px;
}
.sec.dark .sec-head{ border-top-color: rgba(255,255,255,0.25);}
.sec-head h2{
  margin: 0; font-size: 96px; line-height: 0.96; letter-spacing:-0.025em; font-weight: 900;
}
.sec-head h2 em{ font-style: normal; color: var(--orange);}

/* ===== FOOTER ===== */
footer.foot{
  background: var(--ink); color:#fff; padding: 60px 0 120px 0;
}
.foot-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.foot-grid .foot-brand{ display:flex; flex-direction:column; gap: 20px;}
.foot-grid .foot-brand .b{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;}
.foot-grid .foot-brand .b .dot{ display:inline-block; width:10px; height:10px; background: var(--orange); border-radius: 50%; margin-right: 10px; transform: translateY(-2px);}
.foot-grid .foot-brand p{ margin: 0; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.55; max-width: 360px;}
.foot-col h5{ margin: 0 0 14px 0; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500;}
.foot-col ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px;}
.foot-col a{ font-size: 14px; color:#fff; transition: color 200ms;}
.foot-col a:hover{ color: var(--orange);}
.foot-bottom{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-top: 32px; align-items:center;
  font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.foot-bottom .center{ text-align:center;}
.foot-bottom .right{ text-align:right;}

/* ===== MOTION ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);}
  .reveal.in{ opacity: 1; transform: none;}
  .reveal--right{ transform: translateX(40px);}
  .reveal--right.in{ transform: none;}
  .reveal.delay-1{ transition-delay: 100ms;}
  .reveal.delay-2{ transition-delay: 200ms;}
  .reveal.delay-3{ transition-delay: 300ms;}
  .reveal.delay-4{ transition-delay: 400ms;}

  .split-line{ display:inline-block; overflow:hidden; padding-bottom: 0.08em;}
  .split-line .word{ display:inline-block; transform: translateY(110%); transition: transform 1100ms cubic-bezier(.18,.85,.2,1);}
  .split-line.in .word{ transform: translateY(0);}
  .split-line .word:nth-child(2){ transition-delay: 60ms;}
  .split-line .word:nth-child(3){ transition-delay: 120ms;}
  .split-line .word:nth-child(4){ transition-delay: 180ms;}
  .split-line .word:nth-child(5){ transition-delay: 240ms;}

  .marquee-track{ display:flex; gap: 56px; animation: marquee 38s linear infinite; will-change: transform;}
  @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

  [data-parallax]{ will-change: transform;}
}

/* ambient circles motif */
.amb{ position:absolute; pointer-events:none;}
.amb .c{ position:absolute; border-radius:50%; border:1px solid currentColor; opacity:0.25;}
.amb .disc{ position:absolute; border-radius:50%; background: var(--orange);}

/* ===== HAMBURGER + RESPONSIVE NAV ===== */
.nav-toggle{
  display:none; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--rule);
  padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span{
  display:block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){ opacity: 0;}
.nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg);}

/* ===== TABLET — 1024px ===== */
@media (max-width: 1024px){
  .container, .container--wide{ padding: 0 32px;}
  .top-inner{ padding: 18px 32px;}
  .nav-links{ gap: 18px;}
  .nav-links a{ font-size: 13px;}

  section.sec{ padding: 80px 0;}
  .sec-head{ grid-template-columns: 1fr; gap: 18px;}
  .sec-head h2{ font-size: 64px;}

  .page-hero{ padding: 40px 0 64px 0;}
  .page-hero h1{ font-size: 112px;}
  .page-hero .hero-body{ grid-template-columns: 1fr; gap: 28px; margin-top: 40px;}
  .page-hero .hero-body .hb-r{ border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--rule);}

  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 32px;}
  .foot-bottom{ grid-template-columns: 1fr; gap: 10px; text-align: left;}
  .foot-bottom .center, .foot-bottom .right{ text-align: left;}
}

/* ===== MOBILE — 768px ===== */
@media (max-width: 768px){
  .container, .container--wide{ padding: 0 20px;}

  /* nav */
  .top-inner{ display: flex; justify-content: space-between; align-items: center; padding: 14px 20px;}
  .nav-links, .nav-actions{ display: none;}
  .nav-toggle{ display: inline-flex;}
  body.nav-open{ overflow: hidden;}
  body.nav-open nav.top{ position: fixed; inset: 0; z-index: 100; background: var(--paper); overflow: auto;}
  body.nav-open .top-inner{ display: block; padding: 14px 20px;}
  body.nav-open .top-inner .brand{ display: inline-flex;}
  body.nav-open .top-inner .nav-toggle{ position: absolute; top: 14px; right: 20px;}
  body.nav-open .nav-links{
    display: flex; flex-direction: column; gap: 0;
    margin-top: 56px; padding: 0; border-top: 1px solid var(--rule);
  }
  body.nav-open .nav-links a{
    font-size: 32px; font-weight: 700; letter-spacing:-0.02em;
    display: flex; align-items: center; gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
  }
  body.nav-open .nav-links a::before{
    content: "";
    display: inline-block;
    width: 30px; height: 30px;
    flex-shrink: 0;
    background-color: var(--orange);
    -webkit-mask: url("../images/icon-arrow-circle.svg") center / contain no-repeat;
    mask: url("../images/icon-arrow-circle.svg") center / contain no-repeat;
    transition: transform 180ms ease;
  }
  body.nav-open .nav-links a:hover::before,
  body.nav-open .nav-links a:active::before{ transform: translateX(4px);}
  body.nav-open .nav-links a::after{ display: none;}
  body.nav-open .nav-actions{
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 8px; padding: 24px 0; border-top: 1px solid var(--rule);
  }
  body.nav-open .nav-actions .btn{ width: 100%; justify-content: center; padding: 16px;}

  /* type + section scaling */
  section.sec{ padding: 56px 0;}
  .sec-head{ padding-top: 20px; padding-bottom: 28px;}
  .sec-head h2{ font-size: 40px; line-height: 1;}
  .page-hero{ padding: 28px 0 48px 0;}
  .page-hero .top-meta{ padding-bottom: 18px; flex-direction: column; gap: 8px; align-items: flex-start;}
  .page-hero h1{ font-size: 56px; line-height: 0.94; margin-top: 22px;}
  .page-hero .hero-body .hb-m{ font-size: 18px;}

  /* footer */
  .foot{ padding: 44px 0 110px 0;}
  .foot-grid{ grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px;}
  .foot-grid .foot-brand p{ font-size: 13px;}
  .foot-bottom{ font-size: 10px;}

  /* buttons */
  .btn{ padding: 10px 14px; font-size: 11px;}
  .btn--lg{ padding: 14px 20px; font-size: 12px;}

  /* utility */
  .mono.lg{ font-size: 12px;}
}

/* ===== /model ===== */
@media (max-width: 1024px){
  .pillar-grid{ grid-template-columns: 1fr; gap: 28px;}
  .pillar-num{ font-size: 120px;}
  .pillar-mid h3{ font-size: 48px;}
  .pillar-mid .body{ font-size: 17px;}
  .fit-grid{ grid-template-columns: 1fr 1fr; gap: 16px;}
  .rel-grid{ grid-template-columns: 1fr;}
  .closing-cta h2{ font-size: 64px;}
}
@media (max-width: 768px){
  .model-pillar{ padding: 56px 0;}
  .pillar-num{ font-size: 80px;}
  .pillar-mid h3{ font-size: 36px;}
  .pillar-right{ padding: 22px;}
  .pillar-right li{ font-size: 14px;}
  .fit-grid{ grid-template-columns: 1fr;}
  .rel-cell{ padding: 24px;}
  .rel-cell .v{ font-size: 26px;}
  .closing-cta{ padding: 72px 0;}
  .closing-cta h2{ font-size: 44px;}
  .closing-cta p{ font-size: 17px;}
}

/* ===== /audit ===== */
@media (max-width: 1024px){
  .audit-hero h1{ font-size: 120px;}
  .audit-grid{ grid-template-columns: 1fr; gap: 40px;}
  .form-card{ padding: 28px;}
  .dim-grid{ grid-template-columns: 1fr 1fr; gap: 16px;}
  .how-grid{ grid-template-columns: 1fr 1fr;}
  .how-step{ border-bottom: 1px solid var(--rule);}
  .how-step:nth-child(2n){ border-right: 0;}
  .preview-card{ grid-template-columns: 1fr; gap: 32px; padding: 36px;}
  .preview-card .big{ font-size: 140px;}
}
@media (max-width: 768px){
  .audit-hero h1{ font-size: 64px;}
  .form-card .step-row{ flex-wrap: wrap;}
  .form-card .step-row .s{ flex: 0 0 50%; padding: 12px;}
  .form-card .row2{ grid-template-columns: 1fr;}
  .form-card input, .form-card select{ padding: 14px 16px; font-size: 15px;}
  .dim-grid{ grid-template-columns: 1fr;}
  .how-grid{ grid-template-columns: 1fr;}
  .how-step{ border-right: 0 !important; padding: 28px;}
  .how-step .num{ font-size: 64px;}
  .pbar{ grid-template-columns: 1fr 50px; gap: 8px;}
  .pbar > :first-child{ font-size: 13px;}
  .pbar .track{ grid-column: 1 / -1; order: 3;}
}

/* ===== /work ===== */
@media (max-width: 1024px){
  .case{ grid-template-columns: 1fr 1fr; gap: 28px;}
  .case .c-num{ grid-column: 1 / -1;}
  .case .c-mid{ grid-column: 1 / -1;}
  .case .c-mid h3{ font-size: 40px;}
  .stat-grid{ grid-template-columns: 1fr 1fr;}
  .stat .v{ font-size: 60px;}
}
@media (max-width: 768px){
  .case{ grid-template-columns: 1fr; padding: 36px 0;}
  .case .c-mid h3{ font-size: 32px;}
  .case .c-mid .meta{ flex-direction: column; gap: 6px;}
  .stat-grid{ grid-template-columns: 1fr;}
  .stat{ padding: 28px;}
  .stat .v{ font-size: 56px;}
  .filter-bar{ gap: 6px;}
  .filter{ padding: 8px 12px; font-size: 10px;}
}

/* ===== /beliefs ===== */
@media (max-width: 1024px){
  .belief-row{ grid-template-columns: 1fr; gap: 18px; padding: 48px 0;}
  .belief-row .bt{ font-size: 64px;}
  .rep-grid{ grid-template-columns: 1fr; gap: 40px;}
  .rep-grid h2{ font-size: 64px;}
  .rep-cover{ max-width: 380px; margin: 0 auto;}
  .post-grid{ grid-template-columns: 1fr 1fr;}
  .sub-inner{ grid-template-columns: 1fr; gap: 24px;}
  .sub-inner h3{ font-size: 32px;}
}
@media (max-width: 768px){
  .belief-row .bn{ padding-top: 0;}
  .belief-row .bt{ font-size: 40px; line-height: 1;}
  .belief-row .bp{ padding-top: 0; font-size: 15px;}
  .report{ padding: 72px 0;}
  .rep-grid h2{ font-size: 44px;}
  .rep-cover{ padding: 24px;}
  .rep-cover .rc-title{ font-size: 32px; margin-top: 120px;}
  .rep-cover .stamp{ width: 72px; height: 72px;}
  .post-grid{ grid-template-columns: 1fr;}
  .sub-inner form{ flex-direction: column;}
  .sub-inner input{ width: 100%; margin-bottom: 10px;}
}

/* ===== /leadership ===== */
@media (max-width: 1024px){
  .p-grid{ grid-template-columns: 1fr; gap: 36px;}
  .portrait{ max-width: 420px;}
  .p-body h3{ font-size: 48px;}
  .p-meta{ grid-template-columns: 1fr 1fr;}
  .speak-grid{ grid-template-columns: 1fr;}
  .speak-item{ grid-template-columns: 80px 1fr; gap: 16px;}
  .speak-item .sw{ grid-column: 1 / -1; text-align: left; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1);}
}
@media (max-width: 768px){
  .principal{ padding: 56px 0;}
  .p-body h3{ font-size: 32px;}
  .p-bio{ font-size: 15px;}
  .p-quote{ font-size: 17px; padding: 20px 22px;}
  .p-meta{ grid-template-columns: 1fr;}
  .p-essays li{ grid-template-columns: 80px 1fr; gap: 12px;}
  .p-essays li .r{ grid-column: 2; text-align: left; padding-top: 4px;}
  .p-essays li .t{ font-size: 15px;}
  .speak-item{ padding: 22px;}
  .speak-item h4{ font-size: 18px;}
}

/* ===== /intelligence ===== */
@media (max-width: 1024px){
  .pp-grid{ grid-template-columns: 1fr;}
  .pp{ min-height: 0;}
  .memo-feature{ grid-template-columns: 1fr; gap: 36px;}
  .memo-feature h2{ font-size: 64px;}
  .memo-feature .mf-card h3{ font-size: 40px;}
  .arc{ grid-template-columns: 100px 1fr 60px; gap: 16px;}
  .arc .a{ display: none;}
  .br-grid{ grid-template-columns: 1fr; gap: 40px;}
  .br-grid h2{ font-size: 64px;}
  .rs-grid{ grid-template-columns: 1fr; gap: 40px;}
  .rs-grid h2{ font-size: 64px;}
  .rs-cover{ max-width: 380px; margin: 0 auto;}
}
@media (max-width: 768px){
  .pp{ padding: 28px;}
  .pp h3{ font-size: 32px;}
  .memo-feature .mf-card{ padding: 28px;}
  .memo-feature .mf-card h3{ font-size: 28px;}
  .memo-feature h2{ font-size: 40px;}
  .memo-feature .signup form{ flex-direction: column;}
  .memo-feature .signup input{ width: 100%; margin-bottom: 10px;}
  .arc{ grid-template-columns: 1fr; gap: 6px; padding: 18px 0;}
  .arc .r{ display: none;}
  .arc .t{ font-size: 17px;}
  .briefing-sec{ padding: 72px 0;}
  .br-grid h2{ font-size: 44px;}
  .br-list{ padding: 24px;}
  .rs-grid h2{ font-size: 44px;}
}

/* ===== /briefing ===== */
@media (max-width: 1024px){
  .br-hero h1{ font-size: 120px;}
  .bk-grid{ grid-template-columns: 1fr; gap: 48px;}
  .form-card{ position: static;}
  .qual-grid{ grid-template-columns: 1fr;}
  .qual-col{ border-right: 0 !important;}
  .next-grid{ grid-template-columns: 1fr;}
  .next-card{ border-right: 0 !important; padding: 28px 0 !important;}
}
@media (max-width: 768px){
  .br-hero h1{ font-size: 60px;}
  .bk-grid .left p{ font-size: 18px;}
  .expect .row{ grid-template-columns: 1fr; gap: 6px;}
  .qual-col li{ font-size: 16px;}
  .next-card h4{ font-size: 24px;}
}


/* ===== PRINT ===== */
@page { size: A4; margin: 14mm; }
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }
  html, body { background: #fff !important; }
  nav.top, .nav-toggle, .strip, .marquee-track { display: none !important; }
  .container, .container--wide { max-width: 100% !important; padding: 0 !important; }
  section { padding: 24px 0 !important; page-break-inside: avoid; break-inside: avoid; }
  section.sec, section.principal, section.model-pillar, section.speaking, section.dims, section.preview, section.manifesto, section.report, section.substack, section.three-products, section.memo, section.archive, section.briefing-sec, section.report-sec, section.qualify, section.next, section.booking, section.closing-cta, section.briefing, section.audit-hero, section.br-hero, section.page-hero { page-break-inside: avoid; break-inside: avoid; }
  h1, h2 { page-break-after: avoid; break-after: avoid; }
  .hero-mark, .amb { display: none !important; }
  .reveal, .split-line .word { opacity: 1 !important; transform: none !important; }
  .bar .fill, .pbar .fill { width: var(--target, 0%) !important; transition: none !important; }
  .belief-row.dark { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .btn:hover, [data-magnetic] { transform: none !important; }
  .fn, .case, .belief, .audit-card, .pp, .memo, .essay, .post, .speak-item, .stat, .rel-cell, .fit-card, .dim, .how-step, .arc, .next-card, .qual-col, .principal, .pillar-grid, .belief-row, .funnel .stage { page-break-inside: avoid; break-inside: avoid; }
  footer.foot { page-break-before: page; break-before: page; padding: 24px 0 !important;}
  .page-hero h1, .audit-hero h1, .br-hero h1 { font-size: 72px !important; line-height: 0.96 !important;}
  .closing-cta h2, .rep-grid h2, .rs-grid h2, .br-grid h2, .memo-feature h2, .beliefs h2, .audit-left h2 { font-size: 56px !important;}
  .portrait { background: #1E2A38 !important; }
}


/* ===== FLUID TYPE SCALE — applies at ALL viewport widths ===== */
/* Targets every giant heading directly so fonts scale smoothly with viewport
   even when no media query happens to match (e.g. inside a preview iframe). */
.hero-display, .page-hero h1, .work-hero h1, .audit-hero h1, .br-hero h1, .essay-title{
  font-size: clamp(36px, 11vw, 184px) !important;
  line-height: 0.92 !important;
}
.sec-head h2, .model-head h2, .work-head h2, .intel-head h2,
.closing-cta h2, .case-slab h2, .approach-band h2,
.briefing-band-section h2, .briefing-band h2,
.beliefs h2, .memo-feature h2, .br-grid h2, .rs-grid h2, .rep-grid h2,
.audit-left h2{
  font-size: clamp(28px, 7.5vw, 124px) !important;
  line-height: 1.02 !important;
}
.belief-row .bt{ font-size: clamp(28px, 7.5vw, 116px) !important; line-height: 1.05 !important;}
.p-body h3, .pillar-mid h3{
  font-size: clamp(24px, 5vw, 88px) !important; line-height: 1.05 !important;
}
.memo-feature .mf-card h3{
  font-size: clamp(22px, 4vw, 56px) !important; line-height: 1.05 !important;
}
.pillar-num{ font-size: clamp(56px, 13vw, 220px) !important; line-height: 0.92 !important;}

/* Allow long words like "transformations" to break at narrow widths */
h1, h2, h3, .bt, .pillar-num, .essay-title{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.mono{ white-space: normal; overflow-wrap: anywhere;}
img, svg, video{ max-width: 100%; height: auto;}

/* ===== FLUID SAFETY NET (intermediate widths 768–1440) ===== */
@media (min-width: 769px) and (max-width: 1440px){
  /* page-hero giant H1 — scale between 64px (at 769) and 184px (at 1440) */
  .page-hero h1{ font-size: clamp(64px, 12vw, 184px) !important; line-height: 0.92;}
  /* hero (homepage) display */
  .hero-display{ font-size: clamp(64px, 11vw, 168px) !important; line-height: 0.88;}
  /* huge section headlines */
  .sec-head h2, .model-head h2, .work-head h2, .intel-head h2{ font-size: clamp(40px, 7vw, 96px) !important; line-height: 0.98;}
  .closing-cta h2{ font-size: clamp(48px, 9vw, 132px) !important; line-height: 0.94;}
  /* work-page hero + case slabs */
  .work-hero h1{ font-size: clamp(64px, 12vw, 184px) !important; line-height: 0.9;}
  .case-slab h2{ font-size: clamp(40px, 6.5vw, 96px) !important; line-height: 0.98;}
  .approach-band h2{ font-size: clamp(48px, 8.5vw, 124px) !important;}
  .briefing-band-section h2{ font-size: clamp(64px, 14vw, 220px) !important;}
  /* briefing band on homepage */
  .briefing-band h2{ font-size: clamp(64px, 14vw, 220px) !important;}
  /* model.html pillar */
  .pillar-num{ font-size: clamp(80px, 13vw, 220px) !important; }
  .pillar-mid h3{ font-size: clamp(36px, 5.5vw, 88px) !important;}
  /* audit hero */
  .audit-hero h1{ font-size: clamp(56px, 13vw, 220px) !important;}
  .audit-left h2{ font-size: clamp(48px, 8vw, 124px) !important;}
  /* beliefs / leadership / intelligence / briefing big H2s */
  .beliefs h2{ font-size: clamp(56px, 9vw, 124px) !important;}
  .belief-row .bt{ font-size: clamp(40px, 7.5vw, 116px) !important;}
  .p-body h3{ font-size: clamp(40px, 6.5vw, 88px) !important;}
  .memo-feature h2, .br-grid h2, .rs-grid h2, .rep-grid h2{ font-size: clamp(48px, 7vw, 96px) !important;}
  .memo-feature .mf-card h3{ font-size: clamp(28px, 4vw, 56px) !important;}
  .br-hero h1{ font-size: clamp(56px, 13vw, 220px) !important;}
  img, svg, video{ max-width: 100%; height: auto;}
}

/* ===== MOBILE SAFETY NET (≤768) — break long words, hard caps ===== */
@media (max-width: 768px){
  /* universal cap on all headings — guarantees no overflow on any page */
  h1{ font-size: clamp(40px, 11vw, 64px) !important; line-height: 0.98 !important; }
  h2{ font-size: clamp(28px, 8vw, 48px) !important; line-height: 1.05 !important; }
  h3{ font-size: clamp(24px, 6.5vw, 36px) !important; line-height: 1.1 !important; }
  h1, h2, h3 { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .pillar-num{ font-size: clamp(56px, 16vw, 96px) !important;}
  /* allow tracked-out mono eyebrows to wrap on narrow widths */
  .mono{ white-space: normal !important; overflow-wrap: anywhere !important; letter-spacing: 0.16em !important;}
  img, svg, video{ max-width: 100%; height: auto;}
}

/* ===== TABLET SAFETY NET (≤1024) — same universal caps for in-between ===== */
@media (max-width: 1024px){
  h1{ font-size: clamp(48px, 9vw, 96px) !important; line-height: 0.95 !important;}
  h2{ font-size: clamp(36px, 7vw, 72px) !important; line-height: 1 !important;}
  h3{ font-size: clamp(28px, 5vw, 48px) !important; line-height: 1.1 !important;}
  h1, h2, h3 { overflow-wrap: anywhere; word-break: break-word; hyphens: auto;}
  .mono{ white-space: normal; overflow-wrap: anywhere;}
}
@media (max-width: 1280px) and (min-width: 1025px){
  .hero-bottom{ grid-template-columns: 220px minmax(0,1fr) !important; gap: 32px !important;}
  .hero-bottom .hb-r{ display: none !important;}
  .page-hero .hero-body{ grid-template-columns: 220px 1fr !important; gap: 32px !important;}
  .page-hero .hero-body .hb-r{ display: none !important;}
  .work-hero .hero-body{ grid-template-columns: 220px 1fr !important; gap: 32px !important;}
  .work-hero .hb-r{ display: none !important;}
  .briefing-band-section .meta-grid{ grid-template-columns: 1fr 1fr !important;}
  .approach-grid{ grid-template-columns: 1fr 1fr !important;}
}


/* =====================================================================
   MOBILE STABILIZATION PASS  ·  appended after restoring desktop master
   --------------------------------------------------------------------
   Surgical, mobile-only rules. Do NOT modify desktop CSS above.
   ===================================================================== */
@media (max-width: 768px){
  /* (a) Force text-style rendering on arrow chars — iOS can otherwise
        promote → ↗ ← ↓ to colored emoji glyphs. No-op on desktop browsers. */
  body{ font-variant-emoji: text; -webkit-text-size-adjust: 100%;}

  /* (b) Footer logo must remain visually smaller than header logo on mobile.
        Desktop sizes (52px footer / 36px header) are preserved above. */
  .brand-logo{ height: 28px; max-width: 160px;}
  .brand-logo--foot{ height: 24px; max-width: 130px;}

  /* (c) Marquee speed-up on small screens — same animation, faster loop.
        Desktop animation duration (38s) is preserved. */
  .marquee-track{ animation-duration: 18s !important;}

  /* (d) Single-line marquee items — prevent each label from wrapping
        across multiple lines inside a narrow flex item. */
  .strip-inner > *{ flex: 0 0 auto; white-space: nowrap;}

  /* (e) Audit step circles — defense-in-depth re-assertion at mobile
        in case any inherited flex shrinks the .n. */
  .form-card .step-row .s .n{
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; flex: 0 0 22px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Tighter caps for the smallest phones (≤430) — still mobile-only. */
@media (max-width: 430px){
  .marquee-track{ animation-duration: 12s !important;}
  .brand-logo{ height: 24px; max-width: 140px;}
  .brand-logo--foot{ height: 22px; max-width: 120px;}
}


/* =====================================================================
   MOBILE STABILIZATION  ·  Round 2  (appended)
   Kill auto-hyphenation and tighten oversized editorial titles at
   tablet + mobile widths. Desktop is not modified.
   ===================================================================== */
@media (max-width: 1024px){
  /* No mid-word hyphens. Wrap by word; only break a word at character
     boundary if it truly cannot fit. Removes "differenti-ation", "opin-
     ionated", "para-graph", "po-sitioning". */
  h1, h2, h3, h4, .hero-display, .bt, .ti, .display{
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Tighten editorial display H2s that were authored at 116-124px for
     full-bleed desktop. At tablet widths they were resolving to ~60-80px
     and still wrapping awkwardly. */
  .belief-row .bt,
  .rep-grid h2,
  .rs-grid h2,
  .br-grid h2,
  .memo-feature h2{
    font-size: clamp(28px, 5.5vw, 56px) !important;
    line-height: 1.04 !important;
  }
  /* The "One opinionated eight-page report. 500 right readers." em was
     italic by default. Match the brand pattern: em is the orange accent,
     never italic. */
  .rep-grid h2 em,
  .rs-grid h2 em,
  .br-grid h2 em,
  .memo-feature h2 em{ font-style: normal !important;}
}

@media (max-width: 768px){
  .belief-row .bt,
  .rep-grid h2,
  .rs-grid h2,
  .br-grid h2,
  .memo-feature h2{
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.06 !important;
  }
}


/* =====================================================================
   MOBILE MONO READABILITY  ·  Round 3
   The tracked-out IBM Plex Mono eyebrows (page-hero meta, badges, etc.)
   become hard to read at phone widths. Tighten the tracking + size only
   on mobile. Desktop is not affected.
   ===================================================================== */
@media (max-width: 600px){
  .mono{
    letter-spacing: 0.1em !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .mono.lg{ font-size: 12px !important;}
  .page-hero .top-meta{ font-size: 11px;}
  /* The pinned dot before the page label */
  .page-hero .top-meta .mono span[style*="orange"]{ flex: 0 0 auto;}
  /* Badges — same tightening so the row reads as labels, not noise */
  .badge{ letter-spacing: 0.12em; font-size: 10px;}
}


/* =====================================================================
   MOBILE  ·  Round 4  (appended 2026-05-21)
   Tighter caps for sections still overflowing on real phones:
   audit results card, score row, mono kickers. Desktop untouched.
   ===================================================================== */
@media (max-width: 768px){
  /* Audit results — buttons and meta were overflowing right edge */
  .audit-card{ padding: 20px !important;}
  .audit-card .a-url{
    font-size: 10px !important; word-break: break-all !important;
    overflow-wrap: anywhere !important; letter-spacing: 0.04em !important;
  }
  .audit-card > div:first-child{
    flex-wrap: wrap; gap: 8px;
  }
  .audit-card h4{ font-size: 11px !important; letter-spacing: 0.18em !important;}
  .score-row{ flex-direction: column; align-items: flex-start; gap: 8px;}
  .score-big{ font-size: clamp(64px, 22vw, 120px) !important;}
  .score-meta{ padding-bottom: 0;}
  .bars .bar{ grid-template-columns: 130px 1fr 28px !important; gap: 10px !important; font-size: 12px !important;}
  .a-cta{ flex-direction: column; gap: 10px;}
  .a-cta .btn{ width: 100%; justify-content: center;}

  /* Audit-left orange section CTA row */
  .audit-left .cta-row{ flex-direction: column; gap: 10px;}
  .audit-left .cta-row .btn{ width: 100%; justify-content: center;}
  .audit-left .a-stats{ gap: 18px; flex-wrap: wrap;}

  /* Mono kickers — long tracked-out strings were forcing overflow */
  .mono{
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .page-hero .top-meta .mono,
  section .mono{
    font-size: 11px !important; letter-spacing: 0.12em !important;
  }

  /* Hard cap on h2 for the homepage model-head ("Three pillars of Excellence") */
  .model-head h2{
    font-size: clamp(32px, 8.5vw, 48px) !important;
    line-height: 1.02 !important;
    overflow-wrap: break-word; word-break: normal; hyphens: manual;
  }
}

@media (max-width: 430px){
  /* Tightest phones — make every heading word fit */
  h1{ font-size: clamp(32px, 9.5vw, 48px) !important;}
  h2{ font-size: clamp(24px, 7vw, 36px) !important;}
  .model-head h2, .work-head h2, .intel-head h2, .sec-head h2{
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .score-big{ font-size: clamp(56px, 20vw, 96px) !important;}
  .audit-left h2, .briefing-band h2, .closing-cta h2, .beliefs h2{
    font-size: clamp(32px, 9vw, 48px) !important;
  }
  .bars .bar{ grid-template-columns: 110px 1fr 24px !important; font-size: 11px !important;}
}

/* =====================================================================
   HERO EYEBROW ROWS — mobile collision fix
   The audit + briefing hero have an inline-styled
     <div style="display:flex; justify-content: space-between; ...">
   wrapping two .mono labels. On narrow viewports the two labels
   overlap because flex-direction stays row and there's no wrap.
   Force them to stack on mobile. Same for the briefing form's
   "Confidential · principal-reviewed" + Send button row, which has
   the same overlap problem.
   ===================================================================== */
@media (max-width: 768px){
  .audit-hero > .container--wide > div[style*="space-between"],
  .br-hero    > .container--wide > div[style*="space-between"]{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 20px !important;
  }
  .audit-hero > .container--wide > div[style*="space-between"] .mono,
  .br-hero    > .container--wide > div[style*="space-between"] .mono{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Briefing form footer row (Confidential note + Send button) */
  #briefing-form > div[style*="space-between"]{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  #briefing-form > div[style*="space-between"] .btn{
    width: 100% !important;
    justify-content: center !important;
  }

  /* Audit form submit-row — same treatment */
  .form-card .submit-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .form-card .submit-row .btn{
    width: 100% !important;
    justify-content: center !important;
  }

  /* Strategic Review meta row (inside audit page) */
  .strategic .meta{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}