/* ==========================================================================
   the Stores Consulting Group — site stylesheet
   Single source of truth for the whole site. No inline styles in the HTML.

   Contents
     01  Tokens
     02  Reset & base
     03  Layout: wrap + section rhythm
     04  Typography
     05  Brandmark
     06  Header & navigation
     07  Buttons & inline links
     08  Shared components
     09  Home page
     10  About page
     11  Approach page
     12  Results page
     13  Pillar pages
     14  Clients page
     15  Contact page
     16  Footer
     17  Motion (initial states + reduced-motion)
     18  Print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   Every colour in the original mockup, promoted to a named token. The ten
   values that had drifted in as raw hex (#3D3630, #8C7A70, #454A4F, #2B2622,
   #E8DCD3, #C77E86, #C7CDD0, #D3C6BE, #D8CFC5, #A88E86) now live here, so a
   palette change is a one-line edit rather than 471 find-and-replaces.
   ========================================================================== */
:root{
  /* --- Surfaces --------------------------------------------------------- */
  --kraft:        #FCFBF8;   /* default page background                     */
  --kraft-dark:   #F3EFE8;   /* alternating band / recessed panel           */
  --paper:        #FFFFFF;   /* cards that need to sit above the kraft      */
  --ink-strong:   #16130F;   /* dark sections, nav rule, aisle cards        */
  --ink-dark:     #0E0C0A;   /* deepest band (technology section)           */

  /* --- Brand ------------------------------------------------------------ */
  --maroon:       #8A2B36;
  --maroon-dark:  #6B1F28;
  --rose:         #C77E86;   /* maroon legible on a dark ground             */
  --rose-pale:    #D3A6AC;   /* aisle-card numerals                        */

  /* --- Text on light ---------------------------------------------------- */
  --ink:          #16130F;   /* headings                                    */
  --ink-mid:      #2B2622;   /* lead paragraphs                             */
  --ink-soft:     #3D3630;   /* body copy inside cards                      */
  --slate:        #454A4F;   /* small print, dense list copy                */
  --taupe:        #8C7A70;   /* muted mono labels, back-links               */
  --steel:        #8A8880;   /* captions, attributions                      */

  /* --- Text on dark ----------------------------------------------------- */
  --cream:        #F3EFE8;   /* headings on dark                            */
  --sand:         #E8DCD3;   /* body copy on dark                           */
  --clay:         #D3C6BE;   /* secondary copy on dark                      */
  --mist:         #C7CDD0;   /* list copy on dark                           */
  --dust:         #A88E86;   /* tertiary copy on dark, outline-button border*/

  /* --- Lines ------------------------------------------------------------ */
  --line:         #E7E2D8;   /* hairline borders                            */
  --bone:         #D8CFC5;   /* brandmark divider, receipt perforation      */

  /* --- Type ------------------------------------------------------------- */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-ui:      'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Section rhythm --------------------------------------------------- */
  --gut:        32px;   /* horizontal page gutter                           */
  --measure:  1180px;   /* content max-width                                */
  --sec-y:     100px;   /* standard vertical section padding                */
  --sec-y-md:   70px;
  --sec-y-sm:   44px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--kraft);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
hr{ border:none; }

/* Visible keyboard focus everywhere, without showing a ring on mouse click. */
:focus-visible{
  outline:2px solid var(--maroon);
  outline-offset:3px;
}

/* Skip link — first tab stop, hidden until focused. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink-strong); color:var(--cream);
  font-family:var(--f-mono); font-size:13px;
  padding:12px 18px;
}
.skip-link:focus{ left:12px; top:12px; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}


/* ==========================================================================
   03  LAYOUT: WRAP + SECTION RHYTHM
   `.sec` owns vertical padding, `.sec--<tone>` owns background. Keeping those
   two jobs on separate classes is what stops the padding collisions that the
   original had (every section restated its own padding inline).
   ========================================================================== */
.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gut);
  width:100%;
}
.wrap--narrow{ max-width:760px; }
.wrap--slim{   max-width:600px; }

.sec{ padding:var(--sec-y) 0; }
.sec--md{     padding:var(--sec-y-md) 0; }
.sec--sm{     padding:var(--sec-y-sm) 0; }
/* Openers sit under the sticky header, so they carry extra top padding. */
.sec--open{   padding:100px 0 50px; }
/* `--flush-top` lets a section butt directly against the one above it. */
.sec--flush-top{    padding-top:0; }

.sec--kraft{      background:var(--kraft); }
.sec--kraft-dark{ background:var(--kraft-dark); }
.sec--paper{      background:var(--paper); }
.sec--ink{        background:var(--ink-strong); color:var(--cream); }
.sec--ink-deep{   background:var(--ink-dark);   color:var(--cream); }

.sec--rule-top{    border-top:1px solid var(--line); }
.sec--rule-bottom{ border-bottom:1px solid var(--line); }
.sec--center{ text-align:center; }


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, .display{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:0.002em;
  margin:0;
}
.mono{ font-family:var(--f-mono); }

h1{ font-size:clamp(32px, 4.6vw, 52px); line-height:1.15; }
h2{ font-size:clamp(26px, 3.4vw, 38px); line-height:1.2;  }
h3{ font-size:20px; line-height:1.3; }
h4{ font-size:16px; line-height:1.35; }

.h2--sm{ font-size:clamp(24px, 3vw, 30px); }
.h2--xs{ font-size:clamp(22px, 2.8vw, 28px); }

/* Lead paragraph — the standing intro under every page heading. */
.lead{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-mid);
  max-width:640px;
  margin:24px 0 0;
}


.note{
  font-family:var(--f-body);
  font-style:italic;
  font-size:13.5px;
  line-height:1.6;
  color:var(--taupe);
  max-width:600px;
  margin:0;
}
.note--after{ margin-top:20px; }
.note--lg{ font-size:14px; }

/* Sub-heading that introduces a grid below it. */
.h2--intro{ max-width:600px; margin-bottom:30px; }
.lead--intro{ max-width:620px; margin-bottom:36px; }

/* Mono eyebrow with a short leading rule. Two tones: light and dark ground. */
.section-label,
.eyebrow-mono{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}
.section-label{ color:var(--maroon-dark); }
.eyebrow-mono{ color:var(--sand); margin-bottom:26px; }

.section-label::before,
.eyebrow-mono::before{
  content:"";
  width:22px; height:1px;
  flex-shrink:0;
  background:currentColor;
}
.eyebrow-mono::before{ background:var(--maroon); }

.section-label--center{ justify-content:center; }
.section-label--rose{ color:var(--rose); }
.section-label--spaced{ margin-top:24px; }

/* Back-link above a child-page heading. */
.back-link{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--taupe);
  display:inline-block;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.back-link:hover{ color:var(--maroon-dark); border-bottom-color:var(--maroon-dark); }


/* ==========================================================================
   05  BRANDMARK
   The logo lockup appeared as ~20 nested inline-styled divs in both the header
   and the footer. One component, one size modifier.
   ========================================================================== */
.brandmark{
  display:inline-flex;
  align-items:center;
  gap:0;
  flex-shrink:0;
}
.brandmark__tile{
  width:40px; height:40px;
  background:var(--ink-strong);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brandmark__tile span{
  font-family:var(--f-display);
  font-weight:600;
  font-size:22px;
  color:var(--maroon);
  line-height:1;
}
.brandmark__text{
  display:flex; align-items:center; gap:14px;
  padding-left:14px;
}
.brandmark__name{
  font-family:var(--f-display);
  font-size:19px;
  white-space:nowrap;
  line-height:1;
}
.brandmark__the{  font-weight:500; color:var(--steel); }
.brandmark__s{    font-weight:600; color:var(--maroon); }
.brandmark__rest{ font-weight:600; color:var(--ink-strong); }
.brandmark__divider{
  width:1px; height:26px;
  background:var(--bone);
  flex-shrink:0;
}
.brandmark__sub{
  display:flex; flex-direction:column;
  line-height:1.35;
  font-family:var(--f-ui);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--steel);
}

/* Footer scale. */
.brandmark--sm .brandmark__tile{ width:28px; height:28px; }
.brandmark--sm .brandmark__tile span{ font-size:16px; }
.brandmark--sm .brandmark__text{ gap:10px; padding-left:10px; }
.brandmark--sm .brandmark__name{ font-size:14px; }
.brandmark--sm .brandmark__divider{ height:18px; }
.brandmark--sm .brandmark__sub{ font-size:7.5px; letter-spacing:0.12em; line-height:1.3; }


/* ==========================================================================
   06  HEADER & NAVIGATION
   Injected by assets/js/site.js so the markup lives in exactly one place.
   The original hid the nav below 860px with nothing to replace it — there was
   no way to navigate on a phone. This adds a real disclosure menu.
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--kraft);
  border-bottom:3px solid var(--ink-strong);
}
.navwrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gut);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  height:76px;
}

.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ border-bottom-color:var(--maroon); color:var(--maroon-dark); }

/* Current page, set by site.js from <body data-page>. */
.nav-links a[aria-current="page"]{
  color:var(--maroon-dark);
  border-bottom-color:var(--maroon);
}

/* Mobile disclosure button. */
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line);
  padding:9px 12px; cursor:pointer;
  border-radius:2px;
  color:var(--ink);
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  align-items:center; gap:9px;
}
.nav-toggle__bars{
  position:relative;
  width:16px; height:9px;
  flex-shrink:0;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute; left:0; right:0; height:1.5px;
  background:currentColor;
  transition:transform .2s var(--ease-out), opacity .2s ease;
}
.nav-toggle__bars::before{ top:0; }
.nav-toggle__bars::after{  bottom:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{  transform:translateY(-3.75px) rotate(-45deg); }

.nav-drawer{
  display:none;
  border-top:1px solid var(--line);
  background:var(--kraft);
  padding:8px var(--gut) 22px;
}
.nav-drawer[data-open="true"]{ display:block; }
.nav-drawer a{
  display:block;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.nav-drawer a:last-child{ border-bottom:none; }
.nav-drawer a[aria-current="page"]{ color:var(--maroon-dark); }

@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .navwrap{ height:68px; }
}
@media (min-width:981px){
  .nav-drawer{ display:none !important; }
}

/* Fallback nav shown only when JavaScript is off (the real header is injected
   by site.js). Also gives crawlers real, followable links. */
.noscript-nav{
  background:var(--kraft);
  border-bottom:3px solid var(--ink-strong);
  padding:18px var(--gut);
  display:flex; flex-wrap:wrap; gap:20px;
}
.noscript-nav a{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid transparent;
}
.noscript-nav a:hover{ border-bottom-color:var(--maroon); color:var(--maroon-dark); }


/* ==========================================================================
   07  BUTTONS & INLINE LINKS
   ========================================================================== */
.btn-solid,
.btn-outline,
.cta-tag{
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border-radius:2px;
  display:inline-block;
  cursor:pointer;
  border:none;
  transition:transform .12s var(--ease-out), box-shadow .12s var(--ease-out),
             border-color .15s ease;
}

.btn-solid{
  background:var(--maroon);
  color:var(--paper);
  padding:15px 26px;
  box-shadow:0 3px 0 var(--maroon-dark);
}
.btn-solid:hover{ transform:translateY(2px); box-shadow:0 1px 0 var(--maroon-dark); }
.btn-solid:active{ transform:translateY(3px); box-shadow:none; }

.btn-outline{
  border:1.5px solid var(--dust);
  color:var(--paper);
  padding:14px 26px;
  background:none;
}
.btn-outline:hover{ border-color:var(--paper); }

/* Header CTA — smaller, same visual language. */
.cta-tag{
  background:var(--maroon);
  color:var(--paper);
  font-size:12px;
  padding:10px 18px;
  box-shadow:0 2px 0 var(--maroon-dark);
  white-space:nowrap;
}
.cta-tag:hover{ transform:translateY(1px); box-shadow:0 1px 0 var(--maroon-dark); }

@media (max-width:520px){
  .cta-tag{ display:none; }
}

/* Underlined mono "read on" link. */
.link-more{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--maroon-dark);
  letter-spacing:0.05em;
  border-bottom:1px solid var(--maroon-dark);
  padding-bottom:2px;
  display:inline-block;
  transition:opacity .15s ease;
}
.link-more:hover{ opacity:0.7; }


/* ==========================================================================
   08  SHARED COMPONENTS
   These are the patterns that were duplicated as inline styles across the
   eight subpages. Defining them once is what makes the site look like one
   site rather than nine.
   ========================================================================== */

/* --- Page opener ------------------------------------------------------- */
.page-hero h1{ max-width:780px; }

/* --- Callout: hairline box with a maroon left edge --------------------- */
.callout{
  border:1px solid var(--line);
  border-left:3px solid var(--maroon);
  background:var(--kraft-dark);
  padding:22px 26px;
  max-width:760px;
}
.callout--paper{ background:var(--paper); padding:16px 20px; }
.callout--after{ margin-top:28px; }
.callout__label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--maroon);
  margin-bottom:8px;
}
.callout p{
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-mid);
  margin:0;
}

/* Quiet variant: a rule instead of a box, used mid-paragraph. */
.aside-rule{
  border-left:3px solid var(--ink-strong);
  padding-left:16px;
  color:var(--ink-soft);
}

/* --- Quote band: dark, centred, italic display + mono subline ---------- */
.quote-band{ text-align:center; }
.quote-band__quote{
  font-family:var(--f-display);
  font-style:italic;
  font-size:19px;
  line-height:1.6;
  color:var(--cream);
  margin:0;
}
.quote-band__sub{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:16px;
}
.quote-band--light .quote-band__quote{ color:var(--ink-mid); font-size:18px; }
.quote-band--light .quote-band__sub{  color:var(--taupe); margin-top:10px; }

/* --- Numbered card grid ----------------------------------------------- */
/* Only used where the content genuinely is an ordered set of workstreams. */
.num-grid{ display:grid; gap:24px 22px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.num-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }

.num-card{ border-top:3px solid var(--maroon); padding-top:16px; }
.num-card__n{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--taupe);
  margin-bottom:8px;
}
.num-card h4{ margin-bottom:8px; }
.num-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

/* --- Plain two-up prose grid ------------------------------------------ */
.prose-grid{ display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.prose-grid h4{ margin-bottom:8px; }
.prose-grid p{ font-size:14px; line-height:1.65; color:var(--ink-soft); margin:0; }

/* --- Stat cards: maroon left edge, big display numeral ----------------- */
.stat-row{ display:grid; gap:22px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.stat-card{ border-left:3px solid var(--maroon); padding:6px 0 6px 22px; }
.stat-card .num{
  font-family:var(--f-mono);
  font-size:40px;
  font-weight:600;
  color:var(--ink-strong);
  display:block;
  line-height:1;
}
.stat-card .lbl{
  font-size:14.5px;
  color:var(--ink-soft);
  margin-top:10px;
  line-height:1.5;
  max-width:220px;
}
/* Display-face numerals, used on the pillar and clients pages. */
.stat-card--display .num{ font-family:var(--f-display); font-size:32px; }
.stat-card--display .lbl{ font-size:13.5px; color:var(--slate); max-width:240px; }

/* --- CTA band ---------------------------------------------------------- */
.cta-band{ text-align:center; }
.cta-band h2{ margin-bottom:16px; }
.cta-band p{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  margin:0 auto 28px;
  max-width:520px;
}
.cta-band--ink p{ color:var(--clay); }
.cta-band--kraft p{ color:var(--ink-soft); font-size:15px; }


/* ==========================================================================
   09  HOME PAGE
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.05), transparent 45%),
    var(--ink-strong);
  color:var(--paper);
  padding:100px 0 90px;
  position:relative;
  overflow:hidden;
}
/* Faint vertical rules — shelf uprights. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px,
    transparent 1px, transparent 96px);
  pointer-events:none;
}
.hero__inner{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gut);
  position:relative;
}
.hero h1{
  font-size:clamp(34px, 5.4vw, 62px);
  line-height:1.06;
  max-width:920px;
  font-weight:700;
}
.hero h1 em{
  font-style:normal;
  color:var(--maroon-dark);
  background:linear-gradient(transparent 62%, rgba(138,43,54,0.35) 62%);
}
.hero__sub{
  font-family:var(--f-body);
  font-size:19px;
  line-height:1.6;
  color:var(--sand);
  max-width:600px;
  margin:26px 0 40px;
}
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* --- The three gaps ---------------------------------------------------- */
.problem h2{ max-width:760px; margin-bottom:16px; }
.problem__intro{
  font-size:17px; line-height:1.7;
  max-width:640px; color:var(--ink-mid);
  margin:0 0 56px;
}
.gap-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.gap-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--ink-strong);
  padding:28px 24px 26px;
}
.gap-card__tag{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  color:var(--steel);
  margin-bottom:14px;
  display:block;
}
.gap-card h3{ font-size:19px; margin-bottom:12px; letter-spacing:0.01em; }
.gap-card p{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0; }

/* --- 70/30 split band -------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:0.8fr 0.8fr 1.4fr;
  gap:40px;
  align-items:center;
}
.split__col{ text-align:center; }
.split__col--divided{
  border-left:1px solid var(--ink-soft);
  border-right:1px solid var(--ink-soft);
  padding:0 20px;
}
.split__num{
  font-family:var(--f-display);
  font-weight:600;
  font-size:52px;
  line-height:1;
  color:var(--rose);
}
.split__num--muted{ color:var(--steel); }
.split__label{
  font-family:var(--f-body);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--sand);
  margin-top:6px;
}
.split__note{
  font-family:var(--f-body);
  font-size:13px;
  color:var(--dust);
  margin-top:8px;
  line-height:1.5;
}

/* --- Proof / receipt --------------------------------------------------- */
.proof-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.proof-grid h2{ font-size:clamp(26px,3.2vw,36px); margin-bottom:18px; max-width:480px; }
.proof-grid > div > p{
  font-size:16.5px; line-height:1.7;
  color:var(--ink-mid); max-width:460px; margin:0 0 18px;
}

/* The receipt is the signature element: a torn till slip on the page. */
.receipt{
  background:var(--paper);
  font-family:var(--f-mono);
  color:#201C18;
  padding:34px 30px 26px;
  max-width:400px;
  margin:0 auto;
  position:relative;
  box-shadow:0 18px 40px rgba(22,19,15,0.28);
  transform:rotate(-1.1deg);
}
/* Perforated top and bottom edges. */
.receipt::before,
.receipt::after{
  content:"";
  position:absolute; left:0; right:0; height:14px;
  background-image:radial-gradient(circle at 8px 8px, var(--kraft-dark) 7px, transparent 7.5px);
  background-size:16px 14px;
  background-repeat:repeat-x;
}
.receipt::before{ top:-7px; }
.receipt::after{ bottom:-7px; transform:rotate(180deg); }

.r-head{ text-align:center; margin-bottom:16px; }
.r-title{ font-size:13px; font-weight:600; letter-spacing:0.08em; }
.r-sub{ font-size:10.5px; color:var(--steel); margin-top:4px; }
.r-dash{ border-top:1.5px dashed var(--bone); margin:14px 0; }
.r-line{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:5px 0; }
.r-line.dim{ color:#6B6058; }
.r-line.total{ font-size:15px; font-weight:600; padding-top:10px; }
.r-line.total .amt{ color:var(--maroon-dark); }
.r-foot{
  text-align:center; font-size:10.5px;
  color:var(--steel); margin-top:16px; letter-spacing:0.04em;
}
.r-barcode{
  height:34px; margin-top:16px;
  background:repeating-linear-gradient(90deg,
    #201C18 0 2px, transparent 2px 5px,
    #201C18 5px 6px, transparent 6px 9px,
    #201C18 9px 11px, transparent 11px 15px);
}

/* --- Aisles ------------------------------------------------------------ */
.aisles h2{ max-width:640px; margin-bottom:16px; }
.aisles__intro{
  font-size:17px; line-height:1.7;
  max-width:600px; color:var(--ink-mid);
  margin:0 0 54px;
}
.aisle-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.aisle-card{
  background:var(--ink-strong);
  color:var(--paper);
  position:relative;
  display:flex; flex-direction:column;
  min-height:280px;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.aisle-card:nth-child(even){ background:var(--maroon-dark); }
.aisle-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(22,19,15,0.22);
}
/* Punched hanger hole — these are shelf tags. */
.aisle-card__hole{
  width:14px; height:14px; border-radius:50%;
  background:var(--kraft);
  position:absolute; top:14px; left:50%;
  transform:translateX(-50%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.35);
}
.aisle-card__n{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--rose-pale);
  padding:38px 22px 0;
}
.aisle-card h3{ font-size:20px; line-height:1.25; padding:10px 22px 0; }
.aisle-card p{
  font-family:var(--f-body);
  font-size:14.5px; line-height:1.6;
  color:var(--sand);
  padding:14px 22px 24px;
  margin:0; flex-grow:1;
}
.aisle-card__foot{
  border-top:1px dashed rgba(255,255,255,0.25);
  padding:14px 22px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--cream);
  background:rgba(0,0,0,0.12);
}

/* --- Approach teaser --------------------------------------------------- */
.approach-teaser h2{ font-size:clamp(26px,3.6vw,38px); margin-bottom:18px; }
.approach-teaser p{
  font-size:16.5px; line-height:1.7;
  color:var(--ink-mid); max-width:560px;
  margin:0 auto 30px;
}

/* --- Technology philosophy -------------------------------------------- */
.tech h2{ font-size:clamp(24px,3vw,32px); line-height:1.3; margin-bottom:18px; }
.tech p{
  font-size:16px; line-height:1.7;
  color:var(--sand); max-width:600px;
  margin:0 auto 30px;
}
.tech-pills{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.tech-pill{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.05em;
  border:1px solid var(--taupe);
  color:var(--sand);
  padding:9px 16px;
  border-radius:20px;
}

/* --- Why tSCG --------------------------------------------------------- */
.why__top{ max-width:640px; margin-bottom:56px; }
.why__top h2{ margin-bottom:16px; }
.why__top p{ font-size:17px; line-height:1.7; color:var(--ink-mid); margin:0; }

/* --- Home contact band ------------------------------------------------ */
.contact-band h2{ font-size:clamp(26px,3.6vw,42px); max-width:640px; margin:0 auto 20px; }
.contact-band p{
  font-size:17px; color:var(--sand);
  max-width:520px; margin:0 auto 34px; line-height:1.6;
}


/* ==========================================================================
   10  ABOUT PAGE
   Four tiers of people, descending in visual weight: Leadership gets a paper
   card, Directors a recessed panel, Managing Consultants a rule, Senior
   Consultants nothing but the type. That hierarchy was already implied by the
   original's inline styles; this makes it explicit and repeatable.
   ========================================================================== */
.person-grid{ display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.person-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 20px; }
.person-grid + .section-label{ margin-top:64px; }

/* Base: every tier shares the head/photo/bio structure, and differs only in
   the surface treatment applied by the --tier modifiers below. */
.person{ min-width:0; }
.person__head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:18px; }
.person__photo{
  width:64px; height:64px;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--line);
  flex-shrink:0;
  background:var(--kraft-dark);
}
/* Initials fallback for team members without a photo. */
.person__initials{
  width:46px; height:46px;
  border-radius:2px;
  background:var(--ink-strong);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:14px;
  color:var(--maroon);
}
.person__name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:20px;
  margin:0 0 4px;
  line-height:1.25;
}
.person__role{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--maroon);
}
.person__bio{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0; }

/* Tier 1 — Leadership. */
.person--lead{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--maroon);
  padding:32px 28px;
}

/* Tier 2 — Directors. */
.person--director{ background:var(--kraft-dark); padding:26px 22px; }
.person--director .person__head{ gap:14px; margin-bottom:14px; }
.person--director .person__photo{ width:56px; height:56px; }
.person--director .person__name{ font-size:17px; }
.person--director .person__role{ font-size:10.5px; letter-spacing:0.06em; color:var(--taupe); }
.person--director .person__bio{ font-size:13.5px; line-height:1.65; }

/* Tier 3 — Managing Consultants. */
.person--managing{ border-top:2px solid var(--maroon); padding-top:16px; }
.person--managing .person__head{ gap:14px; margin-bottom:10px; }
.person--managing .person__photo{ width:52px; height:52px; }
.person--managing .person__name{ font-size:16px; margin-bottom:3px; }
.person--managing .person__role{ font-size:10px; letter-spacing:0.06em; color:var(--taupe); }
.person--managing .person__bio{ font-size:13.5px; line-height:1.65; }

/* Tier 4 — Senior Consultants. */
.person--senior .person__head{ gap:12px; margin-bottom:8px; }
.person--senior .person__photo{ width:46px; height:46px; }
.person--senior .person__name{ font-size:15px; margin-bottom:3px; }
.person--senior .person__role{ font-size:9.5px; letter-spacing:0.05em; color:var(--taupe); }
.person--senior .person__bio{ font-size:13px; line-height:1.6; color:var(--slate); }


/* ==========================================================================
   11  APPROACH PAGE
   ========================================================================== */
.path-grid{ display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.path-card{
  display:block;
  padding:34px 30px;
  border-top:4px solid var(--maroon);
  background:var(--ink-strong);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.path-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(22,19,15,0.18); }
.path-card__eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:10px;
}
.path-card h2{ font-size:24px; color:var(--cream); margin-bottom:12px; }
.path-card p{
  font-family:var(--f-body);
  font-size:14.5px; line-height:1.7;
  color:var(--clay); margin:0;
}
.path-card__more{
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--rose);
}
/* Light variant — the Foundations path. */
.path-card--light{ background:var(--kraft-dark); border-top-color:var(--ink-strong); }
.path-card--light .path-card__eyebrow{ color:var(--taupe); }
.path-card--light h2{ color:var(--ink-strong); }
.path-card--light p{ color:var(--ink-soft); }
.path-card--light .path-card__more{ color:var(--maroon); }

/* --- Two-column body + flow ------------------------------------------- */
.approach-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.approach-grid h2{ font-size:clamp(26px,3.2vw,36px); margin-bottom:18px; max-width:480px; }
.approach-grid p{
  font-size:16.5px; line-height:1.75;
  color:var(--ink-mid); max-width:480px;
  margin:0 0 16px;
}

/* Vertical numbered flow with a connecting spine. */
.flow{ display:flex; flex-direction:column; }
.flow-step{
  display:flex; gap:18px;
  align-items:flex-start;
  padding:18px 0;
  position:relative;
}
.flow-step:not(:last-child)::after{
  content:"";
  position:absolute; left:19px; top:52px; bottom:-6px;
  width:2px;
  background:var(--line);
}
.flow-dot{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--ink-strong);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:var(--f-mono);
  font-size:13px; font-weight:600;
  position:relative; z-index:1;
}
.flow-dot--accent{ background:var(--maroon); }
.flow-text h4{ font-size:17px; margin-bottom:4px; }
.flow-text p{
  font-size:14.5px; line-height:1.6;
  color:var(--ink-soft);
  margin:0; max-width:400px;
}

/* --- Lighthouse cascade: figure panel beside a 2x2 grid --------------- */
.figure-split{
  display:grid;
  grid-template-columns:0.85fr 2fr;
  gap:48px;
  align-items:start;
}
.figure-panel{
  background:var(--ink-strong);
  padding:32px 26px;
  text-align:center;
}
.figure-panel__num{
  font-family:var(--f-display);
  font-weight:600;
  font-size:44px;
  line-height:1;
  color:var(--maroon);
}
.figure-panel__note{
  font-family:var(--f-body);
  font-size:13.5px;
  color:var(--sand);
  line-height:1.6;
  margin-top:10px;
}


/* ==========================================================================
   12  RESULTS PAGE
   ========================================================================== */
.result-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.result-card{ background:var(--ink-strong); padding:32px 26px; }
/* Icons inherit via currentColor, so each surface sets its own tone: rose on
   the dark cards (maroon is too low-contrast there), maroon on the light ones.
   Same rule the category labels below already follow. */
.result-card__icon{ margin-bottom:16px; color:var(--rose); }
.result-card__icon svg{ display:block; }
.result-card__cat{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:14px;
}
.result-card__fig{
  font-family:var(--f-display);
  font-weight:600;
  font-size:34px;
  line-height:1;
  color:var(--cream);
}
.result-card__unit{
  font-family:var(--f-body);
  font-size:13px;
  color:var(--clay);
  margin:6px 0 18px;
}
.result-card__list{
  border-top:1px solid rgba(255,255,255,0.15);
  padding-top:12px;
  margin:0;
  list-style:none;
}
.result-card__list li{
  display:flex; gap:8px;
  padding:5px 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--mist);
}
.result-card__list li::before{
  content:"\00b7";
  color:var(--rose);
  flex-shrink:0;
}
/* Light variant — alternates with the dark one across the row. */
.result-card--light{ background:var(--kraft-dark); border:1px solid var(--line); }
.result-card--light .result-card__icon{ color:var(--maroon); }
.result-card--light .result-card__cat{ color:var(--maroon); }
.result-card--light .result-card__fig{ color:var(--ink-strong); }
.result-card--light .result-card__unit{ color:var(--ink-soft); }
.result-card--light .result-card__list{ border-top-color:var(--line); }
.result-card--light .result-card__list li{ color:var(--slate); }
.result-card--light .result-card__list li::before{ color:var(--maroon); }


/* ==========================================================================
   13  PILLAR PAGES
   ========================================================================== */
.pillar-hero h1{ font-size:clamp(30px,4.2vw,46px); max-width:760px; }
.pillar-hero .lead{ max-width:620px; margin-top:22px; }


/* ==========================================================================
   14  CLIENTS PAGE
   ========================================================================== */
.logo-group{ margin-bottom:44px; }
.logo-group:last-child{ margin-bottom:0; }
.logo-group__label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--maroon);
  margin-bottom:14px;
}
.logo-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.logo-tile{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  padding:22px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  min-height:100px;
  position:relative;
}
.logo-tile img{
  max-width:100%;
  max-height:44px;
  width:auto;
  object-fit:contain;
}
.logo-tile__name{
  font-family:var(--f-display);
  font-size:13px;
  color:var(--ink-strong);
  text-align:center;
}
.badge{
  position:absolute; top:8px; right:8px;
  font-family:var(--f-mono);
  font-size:8.5px;
  letter-spacing:0.06em;
  padding:2px 7px;
}
.badge--national{ background:var(--ink-strong); color:var(--sand); }
.badge--regional{
  background:var(--kraft-dark);
  color:var(--maroon);
  border:1px solid var(--maroon);
}


/* ==========================================================================
   15  CONTACT PAGE
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:start;
}
.form-field{ margin-bottom:20px; }
.form-field label{
  display:block;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:7px;
}
.form-field .req{ color:var(--maroon); }
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:15px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--maroon);
  box-shadow:0 0 0 3px rgba(138,43,54,0.12);
}
.form-note{
  font-size:13px;
  color:var(--taupe);
  margin:18px 0 0;
  line-height:1.6;
}

/* Detail panel beside the form. */
.detail-panel{
  background:var(--kraft-dark);
  border:1px solid var(--line);
  border-top:3px solid var(--maroon);
  padding:30px 28px;
}
.detail-block{ margin-bottom:26px; }
.detail-block:last-child{ margin-bottom:0; }
.detail-block__label{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:6px;
}
.detail-block p,
.detail-block a{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-mid);
  margin:0;
}
.detail-block a{
  border-bottom:1px solid var(--bone);
  transition:color .15s ease, border-color .15s ease;
}
.detail-block a:hover{ color:var(--maroon-dark); border-bottom-color:var(--maroon-dark); }


/* ==========================================================================
   16  FOOTER
   ========================================================================== */
.site-footer{
  background:var(--kraft-dark);
  padding:44px 0;
  border-top:3px solid var(--ink-strong);
  margin-top:auto;
}
.foot-inner{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gut);
  display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:20px; align-items:center;
}
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
.foot-links a{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.foot-links a:hover{ color:var(--maroon-dark); }
.foot-copy{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--steel);
  margin:22px auto 0;
  text-align:center;
  padding:0 var(--gut);
}


/* ==========================================================================
   17  MOTION
   The `.js` class is added by an inline script in <head> and removed either
   by site.js once Motion has taken over, or by a 2s safety timeout. That
   means content is NEVER permanently hidden: if the CDN is blocked, JS is
   off, or the script errors, everything still renders.
   ========================================================================== */
/* The reveal is driven entirely by classes, never by inline opacity. That
   matters: it means the `.js` class is the ONLY thing hiding anything, so the
   safety timeout in <head> can always un-hide the page. Motion is a layer on
   top of this, not a prerequisite for content being visible. */
.js [data-anim]{
  opacity:0;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.js [data-anim="up"]{    transform:translateY(18px); }
.js [data-anim="right"]{ transform:translateX(-18px); }
.js [data-anim="scale"]{ transform:scale(0.96); }

/* Receipt keeps its resting tilt while animating in. */
.js .receipt[data-anim]{ transform:rotate(-1.1deg) translateY(18px); }

/* Revealed state, added by site.js when the element scrolls into view. */
.js [data-anim].is-in{ opacity:1; transform:none; }
.js .receipt[data-anim].is-in{ transform:rotate(-1.1deg); }

/* Anyone who asks for less motion gets none of it. */
@media (prefers-reduced-motion: reduce){
  .js [data-anim]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .js .receipt[data-anim]{ transform:rotate(-1.1deg) !important; }
  .aisle-card:hover,
  .path-card:hover,
  .btn-solid:hover,
  .cta-tag:hover{ transform:none; }
}

/* Cross-page transition, where the browser supports it. Progressive: browsers
   without View Transitions simply navigate normally. */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vt-out .18s var(--ease-out) both; }
  ::view-transition-new(root){ animation:vt-in  .28s var(--ease-out) both; }
}
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }


/* ==========================================================================
   18  RESPONSIVE
   Collapse order is deliberate: 4-up grids step to 2-up before going 1-up, so
   nothing spends time as an awkward 3-up.
   ========================================================================== */
@media (max-width:1080px){
  .result-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:980px){
  .aisle-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .logo-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .num-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:920px){
  .approach-grid,
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .figure-split{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:900px){
  .proof-grid{ grid-template-columns:1fr; gap:44px; }
  .split{ grid-template-columns:1fr; gap:30px; }
  .split__col--divided{
    border-left:none; border-right:none;
    border-top:1px solid var(--ink-soft);
    border-bottom:1px solid var(--ink-soft);
    padding:24px 0;
  }
}

@media (max-width:860px){
  :root{ --sec-y:76px; --sec-y-md:56px; }
  .gap-grid,
  .stat-row,
  .person-grid,
  .person-grid--3,
  .path-grid,
  .prose-grid,
  .num-grid--2{ grid-template-columns:1fr; }
  .sec--open{ padding:64px 0 40px; }
}

@media (max-width:720px){
  :root{ --gut:22px; }
  .hero{ padding:72px 0 64px; }
  .hero__sub{ font-size:17px; }
  .brandmark__sub{ display:none; }
  .brandmark__divider{ display:none; }
  .brandmark__text{ gap:0; }
}

@media (max-width:560px){
  .aisle-grid,
  .logo-grid,
  .num-grid{ grid-template-columns:1fr; }
  .result-grid{ grid-template-columns:1fr; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
  .receipt{ padding:28px 22px 22px; }
  .hero__ctas{ flex-direction:column; align-items:flex-start; }
  .hero__ctas .btn-solid,
  .hero__ctas .btn-outline{ width:100%; text-align:center; }
}


/* ==========================================================================
   19  PRINT
   Consultancy pages get printed and passed around. Make that not look broken.
   ========================================================================== */
@media print{
  .site-header, .site-footer, .nav-toggle, .nav-drawer,
  .skip-link, .hero::before{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .sec, .sec--md, .sec--open{ padding:18pt 0 !important; }
  .sec--ink, .sec--ink-deep, .result-card, .aisle-card, .path-card, .figure-panel{
    background:#fff !important; color:#000 !important;
    border:1pt solid #999 !important;
  }
  .sec--ink *, .result-card *, .aisle-card *, .path-card *, .figure-panel *{
    color:#000 !important;
  }
  .receipt{ box-shadow:none; transform:none; border:1pt solid #999; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .aisle-grid, .result-grid, .gap-grid, .num-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}