/* ════════════════════════════════════════════════════════════════
   POLIP CONSULTING GROUP — WEBSITE STYLESHEET
   ────────────────────────────────────────────────────────────────
   STRUCTURE
     1.  Design Tokens (colours, type, spacing)  ← edit here to restyle
     2.  Reset & Base
     3.  Layout Utilities
     4.  Typography Helpers
     5.  Buttons
     6.  Navigation
     7.  Hero
     8.  Ticker Strip
     9.  The Mirror (problem recognition)
     10. Market Position
     11. The Practice
     12. Leadership OS (flagship)
     13. Services
     14. Methodology
     15. Engagement Models
     16. Why POLIP
     17. Let's Connect (contact)
     18. Footer
     19. Animations
     20. Responsive
════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  1. DESIGN TOKENS — the single source of truth for the brand  ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
  /* ---- BRAND COLOURS (sampled directly from the POLIP logo) ---- */
  --navy:       #15233B;   /* PRIMARY — logo navy. Dark sections, headings */
  --navy-deep:  #0C1626;   /* deepest navy — footer, hero accents          */
  --navy-soft:  #1E3050;   /* lifted navy — cards on dark, hovers           */
  --gold:       #C4912A;   /* PRIMARY ACCENT — logo gold                    */
  --gold-lift:  #D9A84A;   /* brighter gold — hovers, highlights on dark    */
  --gold-pale:  #F8F2E2;   /* pale gold wash — callout backgrounds          */

  /* ---- NEUTRALS ---- */
  --white:      #FFFFFF;
  --stone:      #F4F2ED;   /* warm off-white — alternate sections           */
  --stone-line: #E5E1D8;   /* warm hairline — borders, rules                */
  --ink:        #1B2433;   /* body text on light                            */
  --slate:      #4F5E73;   /* secondary text                                */
  --mist:       #8694A6;   /* labels, meta, captions                        */

  /* ---- TYPE ---- */
  --ff: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- RHYTHM ---- */
  --sec:    110px;   /* vertical section padding   */
  --wrap:   1200px;  /* max content width          */
  --pad:    48px;    /* horizontal gutter          */
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  2. RESET & BASE                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
/* A visible focus ring. Links here carry no underline and lists no bullets,
   so without this a keyboard user has no way to tell where they are on the
   page. focus-visible keeps it off for mouse clicks. */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold-text, #7A5A12); outline-offset: 3px; border-radius: 2px;
}
/* The header is fixed and 76px tall, so a jump to any anchor, whether from
   "Skip to content", the homepage buttons or a shared link, would otherwise
   land the first line of that section underneath it. */
[id] { scroll-margin-top: 92px; }
body {
  font-family: var(--ff);
  background: var(--white);
  color: var(--ink);
  line-height: 1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. LAYOUT UTILITIES                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */
.wrap     { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec      { padding: var(--sec) 0; }
.bg-stone { background: var(--stone); }
.bg-navy  { background: var(--navy); }
.bg-deep  { background: var(--navy-deep); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. TYPOGRAPHY HELPERS                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.eyebrow.on-dark { color: var(--gold-lift); }

.display {
  font-size: clamp(42px, 5.4vw, 76px); font-weight: 800;
  line-height: 1.04; letter-spacing: -.025em; color: var(--navy);
}
.display.on-dark { color: #fff; }

.h2 {
  font-size: clamp(30px, 3.8vw, 50px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; color: var(--navy);
}
.h2.on-dark { color: #fff; }

.h3 {
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 700;
  line-height: 1.2; letter-spacing: -.01em; color: var(--navy);
}
.h3.on-dark { color: #fff; }

.rule { width: 38px; height: 3px; background: var(--gold); margin: 20px 0 28px; border: none; }
.rule.on-dark { background: var(--gold-lift); opacity: .8; }

.lead     { font-size: 16px; font-weight: 400; line-height: 1.9; color: var(--slate); max-width: 660px; }
.lead.on-dark { color: rgba(255,255,255,.74); }
.body     { font-size: 14.5px; font-weight: 400; line-height: 1.88; color: var(--slate); }
.body.on-dark { color: rgba(255,255,255,.74); }
.body strong { color: var(--ink); font-weight: 600; }
.body.on-dark strong { color: #fff; }
.em       { font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--ink); }
.em.on-dark { color: rgba(255,255,255,.85); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  5. BUTTONS                                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 2px; border: none;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; transition: all .22s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(21,35,59,.22); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-lift); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(196,145,42,.3); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--stone-line); }
.btn-ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.25); }
.btn-ghost.on-dark:hover { border-color: var(--gold-lift); color: var(--gold-lift); }
.ar { display: inline-block; width: 18px; height: 1.5px; background: currentColor; position: relative; flex-shrink: 0; }
.ar::after { content:''; position: absolute; right: -1px; top: -3.5px; width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  6. NAVIGATION                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: 76px;
  display: flex; align-items: center; background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--stone-line);
  transition: height .3s, box-shadow .3s;
}
#nav.scrolled { height: 62px; box-shadow: 0 4px 30px rgba(21,35,59,.08); }
.nav-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 38px; width: auto; transition: height .3s; }
#nav.scrolled .nav-logo img { height: 32px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); transition: color .2s; white-space: nowrap; position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content:''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--gold); transition: width .25s;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--navy); }
.nav-cta { padding: 10px 22px; background: var(--navy); color: #fff !important; border-radius: 2px;
  font-size: 10px !important; letter-spacing: .14em !important; font-weight: 600 !important; transition: background .2s !important; }
.nav-cta:hover { background: var(--gold); color: var(--navy-deep) !important; }
.hbg { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.hbg span { display: block; width: 24px; height: 2px; background: var(--navy); transition: .3s; border-radius: 2px; }
.mob { display: none; position: fixed; top: 76px; inset: 0 0 auto 0; background: #fff;
  border-bottom: 1px solid var(--stone-line); padding: 16px var(--pad) 26px; z-index: 499; flex-direction: column; }
.mob.open { display: flex; }
.mob a { font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--stone-line); }
.mob a:last-child { border-bottom: none; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  7. HERO                                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
#hero { padding-top: 76px; min-height: 100vh; display: grid; grid-template-columns: 1fr 611px; position: relative; overflow: hidden; }
#hero::before { content:''; position: absolute; inset: 76px 0 0 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(21,35,59,.06) 1px, transparent 1px); background-size: 26px 26px; }
.hero-l { padding: 84px 64px 72px 48px; display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2; }
.hero-eye { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.hero-eye-bar { width: 26px; height: 2px; background: var(--gold); }
.hero-eye-tx { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.hero-h1 { font-size: clamp(46px, 5.8vw, 80px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; color: var(--navy); margin-bottom: 28px; }
.hero-h1 .g { color: var(--gold); }
.hero-h1 .s { color: var(--slate); font-weight: 300; }
.hero-deck { font-size: 16px; line-height: 1.85; color: var(--slate); max-width: 520px; margin-bottom: 42px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--stone-line);
  padding: 30px var(--pad) 0; position: relative; z-index: 10; background: var(--white);
  margin-left: -48px; margin-right: -675px; }
.hstat { padding-right: 18px; }
.hstat + .hstat { padding-left: 18px; border-left: 1px solid var(--stone-line); }
.hstat-n { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; margin-bottom: 8px; }
.hstat-n sup { font-size: .5em; color: var(--gold); vertical-align: super; }
.hstat-l { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); line-height: 1.6; }
.hero-r { background: var(--white); position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 84px 12px 24px; overflow: hidden; }
/* The Gap-Filling Framework needs the column's full width to stay legible;
   the diagram is the only thing in this column. */
.gap-diagram { width: 100%; max-width: 620px; height: auto; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  8. TICKER STRIP                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
#strip { background: var(--navy-deep); padding: 15px 0; overflow: hidden; white-space: nowrap; }
.tk { display: inline-flex; animation: tkscroll 30s linear infinite; }
.tk:hover { animation-play-state: paused; }
.tki { display: inline-flex; align-items: center; gap: 14px; padding: 0 28px;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgb(255, 255, 255); }
.tkd { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
@keyframes tkscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  9. THE MIRROR — problem recognition                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.mir-intro { max-width: 600px; margin-bottom: 54px; }
.mir-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--stone-line); }
.mir { padding: 38px 32px; border-right: 1px solid var(--stone-line); background: #fff; transition: background .25s; position: relative; }
.mir:last-child { border-right: none; }
.mir::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background .25s; }
.mir:hover { background: var(--stone); }
.mir:hover::before { background: var(--gold); }
.mir-n { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.mir-t { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 14px; letter-spacing: -.01em; }
.mir-b { font-size: 13.5px; line-height: 1.82; color: var(--slate); }
.quote-band { margin-top: 52px; padding: 30px 38px; border-left: 3px solid var(--gold); background: var(--gold-pale); }
.quote-band p { font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--navy); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  10. MARKET POSITION                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.pos-copy p { font-size: 14.5px; line-height: 1.9; color: var(--slate); margin-bottom: 18px; }
.pos-list { margin-top: 30px; border: 1px solid var(--stone-line); }
.pos-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--stone-line); font-size: 13px; }
.pos-row:last-child { border-bottom: none; }
.pos-row-k { font-weight: 600; color: var(--navy); }
.pos-row-v { font-size: 12.5px; color: var(--slate); text-align: right; }
.pos-row.is-polip { background: var(--navy); }
.pos-row.is-polip .pos-row-k { color: var(--gold-lift); }
.pos-row.is-polip .pos-row-v { color: rgba(255,255,255,.85); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  11. THE PRACTICE                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.prac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.prac-pts { display: flex; flex-direction: column; }
.ppt { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--stone-line); }
.ppt:first-child { border-top: 1px solid var(--stone-line); }
.ppt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-top: 5px; position: relative; }
.ppt-dot::after { content:''; position: absolute; inset: 0 50% 0 0; background: var(--navy); border-radius: 9px 0 0 9px; }
.ppt-t { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.ppt-b { font-size: 13.5px; line-height: 1.8; color: var(--slate); }
.quote-navy { margin-top: 30px; padding: 26px 30px; border-left: 3px solid var(--navy); background: var(--stone); }
.quote-navy p { font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--ink); }
.serve-card { margin-top: 30px; padding: 28px; background: var(--stone); border: 1px solid var(--stone-line); }
.serve-card .lbl { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
.serve-card .it { font-size: 13px; font-style: italic; color: var(--slate); margin-top: 14px; line-height: 1.7; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  12. LEADERSHIP OS — flagship (dark)                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
.los-eq { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin: 40px 0 8px; padding: 28px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); }
.los-eq-term { text-align: center; }
.los-eq-term .t { font-size: clamp(15px,2vw,20px); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.los-eq-term .s { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: 5px; }
.los-eq-op { font-size: 22px; font-weight: 300; color: var(--gold-lift); }
.los-eq-term.result .t { color: var(--gold-lift); }
.los-top { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 44px; }
.los-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2px; margin-top: 2px; }
.los-l { padding: 50px; background: rgba(255,255,255,.04); }
.los-r { padding: 50px; background: rgba(255,255,255,.025); }
.spec { border: 1px solid rgba(255,255,255,.09); margin-bottom: 30px; }
.spec-r { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid rgba(255,255,255,.07); }
.spec-r:last-child { border-bottom: none; }
.spec-k { padding: 12px 15px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lift); border-right: 1px solid rgba(255,255,255,.07); }
.spec-v { padding: 12px 15px; font-size: 13px; color: rgba(255,255,255,.84); line-height: 1.5; }
.ws-lbl { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(196,145,42,.6); margin-bottom: 14px; }
.ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.domain-grid { grid-template-columns: repeat(4, 1fr); }
.ws { padding: 17px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.ws-n { font-size: 9px; letter-spacing: .18em; color: var(--gold); opacity: .6; margin-bottom: 6px; }
.ws-t { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; line-height: 1.3; }
.ws-b { font-size: 11px; line-height: 1.65; color: rgba(255,255,255,.48); }
.trk { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.trk-c { padding: 22px 24px; border: 1px solid rgba(255,255,255,.08); transition: border-color .25s; }
.trk-c:hover { border-color: rgba(196,145,42,.4); }
.trk-l { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 5px; }
.trk-n { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-bottom: 3px; }
.trk-tier { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.trk-d { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.56); }
.invest { padding: 22px 24px; background: rgba(196,145,42,.1); border: 1px solid rgba(196,145,42,.22); }
.invest-l { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 10px; font-weight: 600; }
.invest p { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.74); }
.invest strong { color: #fff; font-weight: 600; }
/* Certification tiers */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 44px; }
.cert { padding: 28px 26px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); text-align: center; transition: all .25s; }
.cert:hover { background: rgba(196,145,42,.06); border-color: rgba(196,145,42,.2); }
.cert-tier { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 12px; }
.cert-n { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 6px; }
.cert-d { font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.55); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  13. SERVICES — coverflow carousel                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.svc-carousel { position: relative; padding: 10px 0 0; }
.svc-stage { position: relative; height: 620px; overflow: hidden; }
.svc-track { position: absolute; inset: 0; }
.svc {
  position: absolute; top: 0; left: 50%; width: 600px; max-width: 86vw; height: 600px;
  padding: 44px 42px; background: #fff; border: 1px solid var(--stone-line);
  display: flex; flex-direction: column; cursor: pointer; will-change: transform, opacity, filter;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .5s ease, box-shadow .4s ease;
}
.svc.is-active { cursor: default; box-shadow: 0 30px 70px rgba(21,35,59,.16); }
.svc.feat { background: var(--navy); }
.svc-n { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 14px; letter-spacing: -.015em; }
.svc.feat .svc-n { color: #fff; }
.svc-t { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--stone-line); }
.svc.feat .svc-t { color: var(--gold-lift); border-bottom-color: rgba(255,255,255,.14); }
.svc-d { font-size: 13.5px; line-height: 1.85; color: var(--slate); flex: 1; margin-bottom: 22px; overflow-y: auto; padding-right: 6px; }
.svc-d p + p { margin-top: 13px; }
.svc-d strong { color: var(--ink); font-weight: 600; }
.svc.feat .svc-d { color: rgba(255,255,255,.66); }
.svc.feat .svc-d strong { color: #fff; }
.svc-d::-webkit-scrollbar { width: 4px; }
.svc-d::-webkit-scrollbar-thumb { background: var(--stone-line); }
.svc.feat .svc-d::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.svc-link { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; transition: gap .2s; flex-shrink: 0; }
.svc.is-active:hover .svc-link { gap: 13px; }
.svc.feat .svc-link { color: var(--gold-lift); }

.svc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--stone-line);
  display: flex; align-items: center; justify-content: center; transition: all .2s; }
.svc-nav:hover { border-color: var(--navy); background: var(--navy); }
.svc-nav:hover .ar { color: #fff; }
.svc-nav:disabled { opacity: .3; pointer-events: none; }
.svc-nav.prev { left: 0; }
.svc-nav.next { right: 0; }
.svc-nav .ar { width: 14px; height: 1.5px; background: currentColor; position: relative; color: var(--navy); }
.svc-nav.prev .ar { transform: rotate(180deg); }
.svc-nav .ar::after { content:''; position: absolute; right: -1px; top: -3.5px; width: 7px; height: 7px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.svc-dots { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.svc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-line); border: none; padding: 0; transition: all .25s; cursor: pointer; }
.svc-dot.active { background: var(--gold); width: 22px; border-radius: 4px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  14. METHODOLOGY                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.meth-grid { display: grid; grid-template-columns: 380px 1fr; gap: 76px; align-items: stretch; }
.meth-l { display: flex; flex-direction: column; height: 100%; }
.meth-flow-v { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  margin-top: 36px; padding-top: 8px; min-height: 280px; }
.mfv-line { position: absolute; left: 23px; top: 23px; bottom: 23px; width: 0; border-left: 2px dashed rgba(21,35,59,.4); z-index: 0; }
.mfv-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.mfv-ic { flex-shrink: 0; width: 46px; height: 46px; }
.mfv-n { display: block; font-family: 'Caveat', cursive; font-size: 15px; font-weight: 700; color: var(--gold); line-height: 1; }
.mfv-l { display: block; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 700; color: #000; line-height: 1.15; }
.princ { display: flex; flex-direction: column; }
.pr { display: grid; grid-template-columns: 56px 1fr; padding: 24px 0; border-bottom: 1px solid var(--stone-line); }
.pr:first-child { border-top: 1px solid var(--stone-line); }
.pr-n { font-size: 36px; font-weight: 800; color: var(--stone-line); line-height: 1; letter-spacing: -.02em; transition: color .3s; }
.pr:hover .pr-n { color: var(--gold); }
.pr-t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.pr-b { font-size: 13.5px; line-height: 1.8; color: var(--slate); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  15. ENGAGEMENT MODELS                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */
.eng-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 50px; background: var(--stone-line); }
.eng { padding: 38px 34px; background: #fff; }
.eng.feat { background: var(--navy); }
.eng-badge { display: inline-block; padding: 4px 12px; background: var(--gold); color: var(--navy-deep); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border-radius: 2px; margin-bottom: 16px; }
.eng-t { font-size: 23px; font-weight: 800; color: var(--navy); line-height: 1.15; margin-bottom: 12px; letter-spacing: -.01em; }
.eng.feat .eng-t { color: #fff; }
.eng-d { font-size: 13.5px; line-height: 1.8; color: var(--slate); margin-bottom: 22px; }
.eng.feat .eng-d { color: rgba(255,255,255,.66); }
.eng-rows { display: flex; flex-direction: column; }
.engr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--stone-line); }
.eng.feat .engr { border-color: rgba(255,255,255,.08); }
.engr:last-child { border-bottom: none; }
.engr-k { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.eng.feat .engr-k { color: rgba(255,255,255,.34); }
.engr-v { font-size: 13px; color: var(--ink); text-align: right; }
.eng.feat .engr-v { color: rgba(255,255,255,.82); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  16. WHY POLIP                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.07); }
.why { padding: 34px 28px; border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); transition: background .25s; }
.why:nth-child(3n) { border-right: none; }
.why:nth-last-child(-n+3) { border-bottom: none; }
.why:hover { background: rgba(255,255,255,.03); }
.why-n { font-size: 42px; font-weight: 800; color: #C4912A; line-height: 1; letter-spacing: -.03em; margin-bottom: 14px; }
.why-t { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); margin-bottom: 10px; }
.why-b { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.56); }
.diag { margin-top: 52px; padding: 52px 56px; border: 1px solid rgba(196,145,42,.22); border-left: 4px solid var(--gold);
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.diag-q { font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; color: #fff; line-height: 1.35; letter-spacing: -.01em; }
.diag-q em { color: var(--gold-lift); font-style: normal; }
.diag-note { font-size: 13px; color: rgba(255,255,255,.36); margin-top: 14px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  17. LET'S CONNECT                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
#connect { background: var(--gold-pale); position: relative; overflow: hidden; }
#connect::before { content:''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(21,35,59,.05) 1px, transparent 1px); background-size: 26px 26px; }
.con-in { position: relative; z-index: 1; max-width: 1104px; margin: 0 auto; text-align: center; }
.con-head { max-width: 620px; margin: 0 auto; }
.con-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 50px auto 46px; }
.con-i { padding: 0 24px; text-align: left; position: relative; white-space: nowrap; }
.con-i + .con-i { border-left: 1px solid rgba(196,145,42,.32); }
.con-i-l { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.con-i-v { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.45; }
.con-i-v a { color: inherit; }
.con-i-v a:hover { color: var(--gold); }
.con-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 54px; }
.con-quote { max-width: 600px; margin: 0 auto; background: #fff; border-left: 3px solid var(--gold); padding: 28px 36px;
  text-align: left; box-shadow: 0 18px 50px rgba(21,35,59,.07); }
.con-quote p { font-size: 15px; line-height: 1.85; color: var(--navy); font-style: italic; }
.con-pledge { margin-top: 28px; font-size: 12.5px; letter-spacing: .03em; color: var(--slate); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  18. FOOTER                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
footer { background: var(--navy-deep); padding: 56px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 24px; }
.foot-logo img { height: 40px; width: auto; margin-bottom: 16px; }
.foot-brand p { font-size: 12px; line-height: 1.75; color: rgba(255,255,255,.36); max-width: 320px; }
.foot-col h2, .foot-col h3, .foot-col h4 { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 14px; }
.foot-col ul { display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 13px; color: rgba(255,255,255,.5); transition: color .2s; }
.foot-col a:hover { color: var(--gold-lift); }
.foot-btm { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-btm-l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-cp { font-size: 11px; color: rgba(255,255,255,.26); }
.foot-legal { display: flex; align-items: center; gap: 16px; }
.foot-legal a { font-size: 11px; color: rgba(255,255,255,.36); transition: color .2s; }
.foot-legal a:hover { color: var(--gold-lift); }
.foot-conf { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.18); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  19. ANIMATIONS                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
.fu { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.fu.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .fu { transition: none; opacity: 1; transform: none; } .tk { animation: none; } }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  20. RESPONSIVE                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 1080px) {
  :root { --pad: 32px; }
  #hero { grid-template-columns: 1fr; }
  .hero-r { display: none; }
  .hero-stats { margin-right: -64px; }
  .prac-grid, .pos-grid, .meth-grid, .los-body, .los-top { grid-template-columns: 1fr; gap: 44px; }
  .los-l, .los-r { padding: 36px 28px; }
  .los-top { gap: 32px; }
  .svc-stage { height: 660px; }
  .svc { width: 520px; height: 620px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.07); }
  .why:nth-child(2n) { border-right: none; }
  .cert-grid { grid-template-columns: 1fr; }
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hstat + .hstat { padding-left: 18px; }
  .hstat:nth-child(3) { border-left: none; padding-left: 0; }
  .con-meta { flex-direction: column; align-items: center; gap: 18px; }
  .con-i { padding: 0; text-align: center; }
  .con-i + .con-i { border-left: none; }
  .diag { grid-template-columns: 1fr; padding: 36px 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --pad: 22px; --sec: 72px; }
  .nav-links { display: none; }
  .hbg { display: flex; }
  .mir-grid, .why-grid, .eng-grid, .ws-grid, .domain-grid { grid-template-columns: 1fr; }
  .mir { border-right: none; border-bottom: 1px solid var(--stone-line); }
  .mir:last-child { border-bottom: none; }
  .why:nth-child(n) { border-right: none; }
  .svc-stage { height: 720px; }
  .svc { width: 88vw; height: 680px; padding: 32px 24px; }
  .svc-nav { width: 38px; height: 38px; }
  /* The hero headline and the page headings are broken by hand into lines
     that suit a wide screen. On a phone those breaks land mid-thought and
     leave two-word lines, so the text is allowed to wrap on its own. */
  .hero-h1 br, .ph-in h1 br, .h2 br { display: none; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { justify-content: center; }
  .con-btns { flex-direction: column; align-items: stretch; }
  .con-btns .btn { justify-content: center; }
  .con-quote { padding: 22px 24px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-btm { flex-direction: column; gap: 10px; text-align: center; }
  .foot-btm-l { flex-direction: column; gap: 10px; justify-content: center; }
  .los-eq { gap: 12px; padding: 22px 16px; }
  .los-eq-op { font-size: 18px; }
}

/* ============================================================
   INTERIOR PAGES — added for the multi-page architecture
   Uses the existing token system only. No new colours.
   ============================================================ */

/* --- Page hero (interior) --- */
.ph{background:var(--navy);color:#fff;padding:150px 0 78px;position:relative;overflow:hidden}
.ph::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none}
.ph-in{position:relative;z-index:2;max-width:860px}
.ph .eyebrow{color:var(--gold-lift)}
.ph h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;margin:16px 0 0}
.ph .ph-sub{font-size:clamp(17px,2vw,22px);font-weight:300;color:rgba(255,255,255,.72);
  margin:18px 0 0;line-height:1.45;max-width:700px}
.ph .rule{background:var(--gold);margin-top:26px}

/* --- Breadcrumb --- */
.crumb{background:var(--stone);border-bottom:1px solid var(--stone-line);padding:13px 0}
/* On most pages the hero sits above the breadcrumb and clears the fixed
   header. The Deliberate Leader has no hero, so its breadcrumb is the first
   thing in the page and has to clear the header itself. */
main > .crumb:first-child{padding-top:89px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  font-size:11px;letter-spacing:.06em;color:var(--mist)}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:'/';color:var(--stone-line)}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--ink);font-weight:500}

/* --- Prose body for interior pages --- */
.pg{padding:var(--sec) 0}
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:68px;align-items:start}
.prose{max-width:720px;min-width:0}
.prose h2{font-size:clamp(25px,2.9vw,35px);font-weight:800;letter-spacing:-.02em;
  line-height:1.16;color:var(--ink);margin:0 0 16px}
.prose h2+.rule{margin-bottom:24px}
.prose h3{font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:40px 0 12px}
.prose p{font-size:15.5px;line-height:1.85;color:var(--slate);margin:0 0 20px}
.prose p strong,.prose strong{color:var(--ink);font-weight:600}
/* Same body typography, without the reading-width cap, for pages whose
   blocks run the full width of the page. */
.prose-wide{max-width:none}
.prose>section{margin-bottom:56px}
.prose>section:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 22px;padding-left:20px}
.prose li{font-size:15.5px;line-height:1.8;color:var(--slate);margin-bottom:11px}
.prose li::marker{color:var(--gold)}

/* --- Signal list (numbered symptom list) --- */
.sig{list-style:none;padding:0;margin:0 0 26px;border-top:1px solid var(--stone-line)}
.sig li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:17px 0;
  border-bottom:1px solid var(--stone-line);margin:0;align-items:start}
.sig .sig-n{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--gold);
  padding-top:4px;font-variant-numeric:tabular-nums}
.sig .sig-x{font-size:15px;line-height:1.72;color:var(--slate)}

/* --- Callout --- */
.call{background:var(--gold-pale);border-left:3px solid var(--gold);
  padding:26px 30px;margin:0 0 30px}
.call p{margin:0;font-size:15.5px;line-height:1.78;color:var(--ink)}
.call p+p{margin-top:14px}

/* --- Deliverables grid --- */
.deliv{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
  background:var(--stone-line);border:1px solid var(--stone-line);margin:0 0 30px}
.deliv-c{background:#fff;padding:24px 22px}
.deliv-n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin-bottom:10px}
.deliv-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.35}
.deliv-d{font-size:13.5px;line-height:1.68;color:var(--slate)}

/* --- Figure / infographic frame --- */
.fig{margin:0 0 34px;border:1px solid var(--stone-line);background:#fff;padding:30px 26px}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{margin-top:18px;padding-top:15px;border-top:1px solid var(--stone-line);
  font-size:12.5px;line-height:1.6;color:var(--mist);letter-spacing:.01em}
.fig-navy{background:var(--navy);border-color:rgba(255,255,255,.08)}
.fig-navy figcaption{color:rgba(255,255,255,.44);border-top-color:rgba(255,255,255,.09)}

/* --- FAQ --- */
.faq{border-top:1px solid var(--stone-line)}
.faq details{border-bottom:1px solid var(--stone-line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:26px;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a{padding:0 0 20px}
.faq .faq-a p{font-size:15px;line-height:1.82;color:var(--slate);margin:0 0 14px}
.faq .faq-a p:last-child{margin-bottom:0}

/* --- Sidebar --- */
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.side-card{border:1px solid var(--stone-line);background:var(--stone);padding:26px 24px}
.side-card h3{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 15px}
.side-card p{font-size:13.5px;line-height:1.7;color:var(--slate);margin:0 0 16px}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{border-top:1px solid var(--stone-line)}
.side-list li:first-child{border-top:none}
.side-list a{display:block;padding:11px 0;font-size:13.5px;line-height:1.45;
  color:var(--slate);text-decoration:none;transition:color .2s}
.side-list a:hover{color:var(--gold)}
.side-list a.cur{color:var(--ink);font-weight:600}
.side-card--navy{background:var(--navy);border-color:var(--navy)}
.side-card--navy h3{color:var(--gold-lift)}
.side-card--navy p{color:rgba(255,255,255,.74)}
.side-fact{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.09);font-size:12.5px}
.side-fact:first-of-type{border-top:none}
.side-fact .k{color:rgba(255,255,255,.4);letter-spacing:.05em}
.side-fact .v{color:#fff;font-weight:500;text-align:right}

/* --- Closing CTA band --- */
.cta-band{background:var(--navy-deep);color:#fff;padding:78px 0;text-align:center;
  position:relative;overflow:hidden}
.cta-band::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(23px,2.8vw,33px);font-weight:800;letter-spacing:-.02em;
  line-height:1.24;margin:0 auto 14px;max-width:730px;color:#fff}
.cta-band p{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.7);
  margin:0 auto 30px;max-width:610px}
.cta-band .con-btns{justify-content:center}

/* --- Next/prev service pager --- */
.pager{border-top:1px solid var(--stone-line);display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--stone-line)}
.pager a{background:#fff;padding:26px 28px;text-decoration:none;display:block;
  transition:background .22s}
.pager a:hover{background:var(--stone)}
.pager .pg-k{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);margin-bottom:9px;display:block}
.pager .pg-t{font-size:16px;font-weight:700;color:var(--ink);line-height:1.35}
.pager .nxt{text-align:right}
.pager a:hover .pg-t{color:var(--gold)}

/* --- Services index cards --- */
.svcidx{display:grid;grid-template-columns:repeat(auto-fit,minmax(318px,1fr));gap:1px;
  background:var(--stone-line);border:1px solid var(--stone-line)}
.svcidx-c{background:#fff;padding:34px 30px;display:flex;flex-direction:column;
  text-decoration:none;transition:background .24s}
.svcidx-c:hover{background:var(--stone)}
.svcidx-n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);margin-bottom:14px}
.svcidx-t{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  line-height:1.3;margin-bottom:11px}
.svcidx-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);margin-bottom:14px;line-height:1.5}
.svcidx-d{font-size:14px;line-height:1.75;color:var(--slate);margin-bottom:20px;flex:1}
.svcidx-go{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.svcidx-c:hover .svcidx-go{gap:13px}
.svcidx-go span{transition:transform .22s}

/* --- Contact page form --- */
.cform{border:1px solid var(--stone-line);padding:34px 32px;background:#fff}
.cf-row{margin-bottom:20px}
.cf-row label{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.cf-row input,.cf-row select,.cf-row textarea{width:100%;font-family:var(--ff);
  font-size:15px;color:var(--ink);background:var(--stone);border:1px solid var(--stone-line);
  padding:13px 15px;transition:border-color .2s,background .2s}
.cf-row textarea{min-height:142px;resize:vertical;line-height:1.7}
.cf-row input:focus,.cf-row select:focus,.cf-row textarea:focus{outline:none;
  border-color:var(--gold);background:#fff}
.cf-note{font-size:12.5px;line-height:1.65;color:var(--mist);margin:0 0 22px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Insights placeholder list --- */
.ins{display:grid;gap:1px;background:var(--stone-line);border:1px solid var(--stone-line)}
.ins-c{background:#fff;padding:28px 30px}
.ins-k{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin-bottom:11px}
.ins-t{font-size:18px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:9px}
.ins-d{font-size:14px;line-height:1.75;color:var(--slate)}

/* --- Read-more on service carousel cards --- */
.svc-more{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.svc-readmore{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);text-decoration:none;
  border:1px solid var(--navy);padding:12px 20px;transition:background .22s,color .22s,gap .22s}
.svc-readmore:hover{background:var(--navy);color:#fff;gap:14px}
.svc-readmore span{transition:transform .22s}

/* --- 404 --- */
.e404{padding:170px 0 120px;text-align:center}
.e404 .big{font-size:clamp(70px,13vw,150px);font-weight:800;color:var(--stone-line);
  line-height:.9;letter-spacing:-.04em}
.e404 h1{font-size:clamp(24px,3.2vw,36px);font-weight:800;color:var(--ink);
  margin:14px 0 14px;letter-spacing:-.02em}
.e404 p{font-size:15.5px;line-height:1.8;color:var(--slate);max-width:520px;margin:0 auto 30px}

/* --- Responsive --- */
@media (max-width:1000px){
  .pg-grid{grid-template-columns:1fr;gap:48px}
  .side{position:static}
  .prose{max-width:none}
}
@media (max-width:640px){
  .ph{padding:118px 0 54px}
  .pager{grid-template-columns:1fr}
  .pager .nxt{text-align:left}
  .fig{padding:20px 16px}
  .call{padding:22px 20px}
  .deliv{grid-template-columns:1fr}
  .cform{padding:26px 20px}
}
@media print{
  #nav,.mob,.cta-band,.pager,.side{display:none!important}
  .ph{background:#fff;color:#000;padding:20px 0}
  .ph h1,.ph .ph-sub{color:#000}
}


/* ============================================================
   AUDIT FIXES — 28 Sep 2026
   ============================================================ */

/* Skip link: off-screen until focused (was rendering as body text) */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;z-index:9999;
  background:var(--navy);color:#fff;padding:13px 20px;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  outline:2px solid var(--gold);outline-offset:2px}

/* Missing rule: methodology flow step text */
.mfv-tx{flex:1;min-width:0}

/* --- Contrast remediation -----------------------------------
   Brand gold #C4912A on white is 2.83:1 and mist #8694A6 is 3.09:1,
   both below the 4.5:1 floor for small text. The brand guidelines
   themselves forbid gold on white at body sizes.
   We keep the brand gold everywhere it is decorative (rules, borders,
   icons, gold-on-navy) and introduce a darkened text-only variant
   that reads as the same colour but clears WCAG AA.             */
:root{
  --gold-text:  #7A5A12;   /* 6.24:1 on white, 5.85:1 on stone */
  --mist-text:  #5E6B7D;   /* 5.06:1 on white, 4.74:1 on stone */
}
.eyebrow,.deliv-n,.svcidx-n,.svcidx-go,.ins-k,.sig .sig-n,
.side-card h3,.mir-n,.con-i-l,.ws-n,.eng-badge,.mfv-n,
.pager a:hover .pg-t{color:var(--gold-text)}
.fig figcaption,.crumb ol,.pager .pg-k,.cf-note,.svcidx-k{color:var(--mist-text)}
/* gold on dark stays as-is: #D9A84A on navy is 5.56:1 */
.side-card--navy h3,.ph .eyebrow,.cta-band .eyebrow{color:var(--gold-lift)}
.fig-navy figcaption{color:rgba(255,255,255,.62)}

/* Reduced motion: also disable programmatic smooth scrolling */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* No-JS / JS-failure guarantee: never leave a reveal block invisible */
@media (scripting: none){ .fu{opacity:1!important;transform:none!important} }
.no-js .fu{opacity:1!important;transform:none!important}
@media print{ .fu{opacity:1!important;transform:none!important} }


/* Contrast remediation, round 2: the five small-text rules missed above.
   .svc-t is scoped so the featured navy card keeps its lighter gold. */
.hero-eye-tx,
.svc:not(.feat) .svc-t{color:var(--gold-text)}
.hstat-l,
.serve-card .lbl,
.engr-k{color:var(--mist-text)}
.svc.feat .svc-t{color:var(--gold-lift)}


/* Footer column labels: lift from .30 to .52 alpha so they clear 4.5:1 on deep navy */
.foot-col h2, .foot-col h3, .foot-col h4{color:rgba(255,255,255,.62)}
.foot-col a{color:rgba(255,255,255,.62)}
.foot-brand p{color:rgba(255,255,255,.66)}

/* ============================================================
   EVIDENCE BLOCK — sourced figures
   ============================================================ */
.ev{border:1px solid var(--stone-line);margin:0 0 32px;background:#fff}
.ev-hd{padding:16px 24px;border-bottom:1px solid var(--stone-line);background:var(--stone)}
.ev-k{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text)}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--stone-line)}
.ev-c{background:#fff;padding:24px 22px}
.ev-n{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;
  color:var(--navy);line-height:1;margin-bottom:11px;font-variant-numeric:tabular-nums}
.ev-d{font-size:13.5px;line-height:1.62;color:var(--slate);margin-bottom:11px}
.ev-s{font-size:11px;line-height:1.5;color:var(--mist-text)}
.ev-s a{color:var(--mist-text);text-decoration:underline;text-underline-offset:2px}
.ev-s a:hover{color:var(--gold-text)}
.ev-ft{padding:15px 24px;border-top:1px solid var(--stone-line);background:var(--stone);
  font-size:12px;line-height:1.6;color:var(--slate)}

/* Business-impact list */
.imp{list-style:none;padding:0;margin:0 0 30px;border-top:1px solid var(--stone-line)}
.imp li{padding:18px 0;border-bottom:1px solid var(--stone-line);margin:0}
.imp-t{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:7px;line-height:1.4}
.imp-d{font-size:14px;line-height:1.75;color:var(--slate)}
.imp-h{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:5px;display:block}

@media (max-width:640px){
  .ev-grid{grid-template-columns:1fr}
  .ev-hd,.ev-ft{padding:14px 18px}
  .ev-c{padding:20px 18px}
}