/* =========================================================
   ILLÆSA — site styles
   Palette extracted from the Market Engagement deck
   ========================================================= */
/* ---- self-hosted fonts (no external dependency) ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-500-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-600-italic.woff2") format("woff2")}
:root{
  --teal:#133A3F;         /* primary deep teal */
  --teal-900:#0D2A2D;     /* deeper */
  --teal-800:#10333A;
  --teal-700:#1B4A50;
  --cream:#F5F2E9;        /* paper */
  --cream-50:#FBFAF4;
  --ink:#16292B;          /* text on light */
  --muted:#586A6A;        /* muted text on light */
  --muted-light:#9FB2AE;  /* muted text on dark */
  --gold:#8A642B;         /* accent brass — darkened v29 for WCAG AA on cream (4.76:1) */
  --gold-soft:#C9B487;    /* eyebrow gold on dark */
  --line:rgba(19,58,63,.14);
  --line-dark:rgba(245,242,233,.16);
  --shadow:0 18px 50px -24px rgba(13,42,45,.45);
  --maxw:1180px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond","Times New Roman",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:var(--cream-50);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- eyebrows / type ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:600;color:var(--gold);margin:0 0 18px;
}
.eyebrow.on-dark{color:var(--gold-soft)}
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
h2.section-title{font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--teal)}
.on-dark h2.section-title,section.dark h2.section-title,section.deep h2.section-title{color:var(--cream)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);max-width:60ch;margin:18px 0 0}
section.dark .lead,section.deep .lead{color:var(--muted-light)}
.serif{font-family:var(--serif)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(19,58,63,.0);
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.solid{background:var(--teal);box-shadow:0 1px 0 var(--line-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px}
.nav .brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{
  color:var(--cream);font-size:.86rem;letter-spacing:.02em;opacity:.86;
  transition:opacity .2s;padding:6px 0;position:relative;
}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold-soft);transition:width .25s}
.nav-links a:hover::after{width:100%}
.btn{
  display:inline-block;font-size:.85rem;font-weight:500;letter-spacing:.02em;
  padding:11px 22px;border-radius:2px;border:1px solid var(--gold-soft);
  color:var(--cream);background:transparent;transition:all .2s;cursor:pointer;
}
.btn:hover{background:var(--gold-soft);color:var(--teal-900);border-color:var(--gold-soft)}
.btn.solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.solid:hover{background:#6F5022;border-color:#6F5022}
.btn.ink{border-color:var(--teal);color:var(--teal)}
.btn.ink:hover{background:var(--teal);color:var(--cream)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;transition:.3s}

/* ---------- hero ---------- */
.hero{
  background:var(--teal);color:var(--cream);position:relative;overflow:hidden;
  padding:clamp(90px,15vh,150px) 0 clamp(80px,12vh,130px);
  margin-top:-82px;padding-top:calc(clamp(90px,15vh,150px) + 82px);
}
.hero::after{ /* subtle node motif */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 82% 30%, rgba(180,137,76,.10), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(27,74,80,.6), transparent 45%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.8rem,6.5vw,5rem);color:var(--cream);letter-spacing:-.02em}
.hero p.sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--muted-light);max-width:52ch;margin:26px 0 34px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-mono{justify-self:center}
.hero-mono img{width:min(260px,60vw);opacity:.96}

/* ---------- generic section ---------- */
section{padding:clamp(72px,10vw,120px) 0}
section.dark{background:var(--teal);color:var(--cream)}
section.deep{background:var(--teal-900);color:var(--cream)}
section.paper{background:var(--cream)}
.section-head{max-width:760px;margin-bottom:52px}

/* ---------- imperative: two logics ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.logic-card{
  background:var(--cream-50);border:1px solid var(--line);border-radius:6px;
  padding:34px 32px;
}
section.dark .logic-card{background:var(--teal-800);border-color:var(--line-dark)}
.logic-card h3{font-size:1.15rem;color:var(--teal);margin-bottom:10px}
section.dark .logic-card h3{color:var(--cream)}
.logic-card p{margin:0;color:var(--muted);font-size:.98rem}
section.dark .logic-card p{color:var(--muted-light)}
.logic-tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;display:block;margin-bottom:14px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:12px}
.stat{border-top:2px solid var(--gold-soft);padding-top:22px}
.stat .num{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;color:var(--cream);line-height:1;letter-spacing:-.02em}
.stat .lbl{font-size:.95rem;color:var(--muted-light);margin-top:12px}
.stat .src{font-size:.74rem;color:rgba(159,178,174,.7);margin-top:10px;letter-spacing:.02em}

/* ---------- broken / replaces ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.compare .col{padding:38px 36px}
.compare .col.broken{background:var(--cream-50)}
.compare .col.replaces{background:var(--teal);color:var(--cream)}
.compare h3{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:24px}
.compare .broken h3{color:var(--muted)}
.compare .replaces h3{color:var(--gold-soft)}
.compare ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.compare li{padding-left:24px;position:relative;font-size:.96rem}
.compare li b{display:block;margin-bottom:3px}
.compare .broken li{color:var(--muted)}.compare .broken li b{color:var(--ink)}
.compare .broken li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border:1.5px solid var(--muted);border-radius:50%}
.compare .replaces li{color:var(--muted-light)}.compare .replaces li b{color:var(--cream)}
.compare .replaces li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--gold-soft);border-radius:50%}

/* ---------- cards grid (megatrends) ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tcard{background:var(--cream-50);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tcard .ph{aspect-ratio:4/3;overflow:hidden}
.tcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tcard:hover .ph img{transform:scale(1.05)}
.tcard .body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.tcard h3{font-size:1.12rem;color:var(--teal);margin-bottom:10px}
.tcard .shift{font-size:.92rem;color:var(--muted);margin:0 0 16px}
.tcard .watch{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
.tcard .watch-list{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- pillars ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{background:var(--cream-50);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.pillar .ph{aspect-ratio:16/10;position:relative;overflow:hidden}
.pillar .ph img{width:100%;height:100%;object-fit:cover}
.pillar .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(19,58,63,.55))}
.pillar .icon{position:absolute;left:24px;bottom:-24px;width:52px;height:52px;border-radius:50%;background:var(--teal);display:grid;place-items:center;z-index:2;border:1px solid var(--gold-soft)}
.pillar .icon svg{width:24px;height:24px;stroke:var(--gold-soft)}
.pillar .body{padding:40px 28px 32px;display:flex;flex-direction:column;flex:1}
.pillar .num{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.pillar h3{font-size:1.3rem;color:var(--teal);margin-bottom:14px;line-height:1.2}
.pillar p{color:var(--muted);font-size:.97rem;margin:0}

/* ---------- listening layer / seven steps ---------- */
.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:44px 0 10px;counter-reset:s}
.step{position:relative;padding-top:44px;font-size:.82rem;color:var(--muted-light)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--gold-soft);color:var(--gold-soft);
  display:grid;place-items:center;font-size:.85rem;font-weight:600;
}
.step::after{content:"";position:absolute;top:16px;left:32px;right:-12px;height:1px;background:var(--line-dark)}
.step:last-child::after{display:none}
.serve{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.serve .item{border-left:1px solid var(--line-dark);padding-left:22px}
.serve .item .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:10px}
.serve .item p{color:var(--muted-light);font-size:.95rem;margin:0}
.serve .item b{color:var(--cream)}

/* partner band */
.partner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:64px;background:var(--teal-800);border:1px solid var(--line-dark);border-radius:12px;padding:44px 40px}
.partner .how{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px}
.partner .how .h{flex:1;min-width:120px}
.partner .how .h .k{color:var(--gold-soft);font-weight:600;font-size:.95rem;margin-bottom:6px}
.partner .how .h p{color:var(--muted-light);font-size:.86rem;margin:0}
.safeguard{margin-top:26px;font-size:.9rem;color:var(--muted-light)}
.safeguard b{color:var(--cream)}

/* ---------- insights (placeholder) ---------- */
.grid-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ins{border:1px solid var(--line);border-radius:8px;padding:30px 28px;background:var(--cream-50);position:relative;min-height:220px;display:flex;flex-direction:column}
.ins .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.ins h3{font-size:1.15rem;color:var(--teal);margin:14px 0 10px}
.ins p{color:var(--muted);font-size:.93rem;margin:0}
.ins .soon{margin-top:auto;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:20px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--teal-900);color:var(--cream);text-align:center;padding-top:clamp(52px,7vw,86px);padding-bottom:clamp(52px,7vw,86px)}
.cta-band .motto{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.7vw,2rem);color:var(--cream);margin:0 0 6px}
.cta-band .motto-en{color:var(--gold-soft);font-size:.92rem;margin:0 0 22px}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;margin-top:8px}
.bio{display:grid;grid-template-columns:180px 1fr;gap:28px}
.bio .avatar{width:180px;height:220px;border-radius:8px;object-fit:cover;background:var(--teal-800)}
.bio h3{font-size:1.4rem;color:var(--teal)}
.bio .role{color:var(--gold);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin:6px 0 16px}
.bio p{color:var(--muted);font-size:.95rem;margin:0 0 12px}
.page-hero{background:var(--teal);color:var(--cream);padding:calc(82px + 70px) 0 70px;margin-top:-82px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--cream)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-info .row{margin-bottom:28px}
.contact-info .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
.contact-info .v{font-size:1.05rem;color:var(--ink)}
.contact-info .v a:hover{color:var(--gold)}
form .field{margin-bottom:20px}
form label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
form input,form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:.98rem;color:var(--ink);background:var(--cream-50)}
form input:focus,form textarea:focus{outline:none;border-color:var(--gold)}
form textarea{min-height:140px;resize:vertical}

/* ---------- footer ---------- */
.site-footer{background:var(--teal-900);color:var(--muted-light);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.foot-grid img{height:24px;width:auto;margin-bottom:18px}
.foot-grid .blurb{font-size:.9rem;max-width:34ch}
.foot-col h4,.foot-col .foot-h{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px;font-weight:600}
.foot-col a{display:block;font-size:.9rem;margin-bottom:10px;opacity:.85}
.foot-col a:hover{opacity:1;color:var(--cream)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.8rem;flex-wrap:wrap;gap:12px}
.foot-bottom .motto{font-family:var(--serif);font-style:italic;color:var(--gold-soft)}

/* ---------- reveal anim (pure CSS — always ends visible) ---------- */
@keyframes revealUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{animation:revealUp .7s ease both}
/* JS may add .in for scroll-triggered timing; it must never hide content */
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none;opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}.hero-mono{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(4,1fr);gap:24px 12px}
  .step:nth-child(4)::after{display:none}
  .serve{grid-template-columns:1fr}
  .partner{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* NOTE: the mobile nav rules that used to live in this block now sit in the
   V27 @media(max-width:785px) block at the end of the sheet — the nav has to
   collapse earlier than the rest of the layout or it collides with the
   wordmark between 721px and 785px (iPad portrait is 768px). */
@media(max-width:720px){
  .split,.compare,.contact-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .grid-ins{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .bio{grid-template-columns:1fr}.bio .avatar{width:150px;height:180px}
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   MULTI-PAGE RESTRUCTURE — additions
   ============================================================ */

/* ---- dropdown nav ---- */
.nav-links .has-dropdown{position:relative}
.nav-links .has-dropdown > a .caret{display:inline-block;margin-left:6px;font-size:.6em;opacity:.7;transform:translateY(-1px)}
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--teal-800);border:1px solid var(--line-dark);border-radius:8px;
  min-width:248px;padding:8px;list-style:none;margin:0;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:60;
}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.dropdown li{width:100%;text-align:left}
.dropdown a{display:block;padding:11px 14px;border-radius:5px;font-size:.86rem;opacity:.9;white-space:nowrap}
.dropdown a:hover{background:var(--teal-700);opacity:1}
.dropdown a::after{display:none}
.dropdown .dd-sub{font-size:.72rem;color:var(--muted-light);opacity:.7;display:block;margin-top:1px;letter-spacing:.02em}

/* ---- imperative four-card visual ---- */
.imp-visual{margin-top:8px}
.imp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.imp-card{background:var(--cream-50);border:1px solid var(--line);border-radius:8px;padding:28px 26px;position:relative}
section.dark .imp-card,section.deep .imp-card{background:var(--teal-800);border-color:var(--line-dark)}
.imp-card .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px;display:block}
.imp-card h3{font-size:1.12rem;color:var(--teal);margin-bottom:10px;line-height:1.25}
section.dark .imp-card h3{color:var(--cream)}
.imp-card p{margin:0;color:var(--muted);font-size:.94rem}
section.dark .imp-card p{color:var(--muted-light)}
.imp-wide{margin-top:22px;background:var(--teal);color:var(--cream);border-radius:10px;padding:34px 34px;display:grid;grid-template-columns:1.15fr 1fr;gap:36px}
.imp-wide .tag{color:var(--gold-soft)}
.imp-wide h3{color:var(--cream);font-size:1.2rem;margin-bottom:16px}
.imp-wide .chips{display:flex;flex-wrap:wrap;gap:8px}
.imp-wide .chip{font-size:.8rem;background:var(--teal-800);border:1px solid var(--line-dark);color:var(--muted-light);padding:7px 13px;border-radius:20px}
.imp-wide .tissue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.imp-wide .tissue li{padding-left:20px;position:relative;color:var(--cream);font-size:.94rem}
.imp-wide .tissue li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--gold-soft);border-radius:50%}
.imp-wide .tissue li span{display:block;color:var(--muted-light);font-size:.82rem;margin-top:2px}

/* ---- clickable pillar cards ---- */
a.pillar{text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
a.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
a.pillar .go{margin-top:auto;padding-top:18px;font-size:.8rem;letter-spacing:.06em;color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:7px}
a.pillar .go .arw{transition:transform .25s}
a.pillar:hover .go .arw{transform:translateX(4px)}

/* ---- listening-layer teaser band (home / our work) ---- */
.ll-band{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;
  background:var(--teal-900);border:1px solid var(--line-dark);border-radius:14px;padding:44px 42px;margin-top:26px;
  text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
a.ll-band:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ll-band h3{color:var(--cream);font-size:1.7rem;margin-bottom:12px}
.ll-band p{color:var(--muted-light);margin:0 0 18px;font-size:1rem}
.ll-band .go{font-size:.82rem;letter-spacing:.06em;color:var(--gold-soft);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.ll-band:hover .go .arw{transform:translateX(4px)}
.ll-band .go .arw{transition:transform .25s}

/* ---- &Wider chip ---- */
.wider-chip{display:inline-flex;align-items:center;gap:0;background:#fff;border-radius:10px;padding:16px 22px;box-shadow:var(--shadow)}
.wider-chip img{height:38px;width:auto}
.wider-inline{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:9px 14px;vertical-align:middle}
.wider-inline img{height:24px;width:auto}
.partner .wider-chip{margin-bottom:18px}

/* ---- what-it-offers trio (icon cards) ---- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.offer{background:var(--teal-800);border:1px solid var(--line-dark);border-radius:8px;padding:26px 24px}
.offer .ic{width:44px;height:44px;border-radius:50%;background:var(--teal);border:1px solid var(--gold-soft);display:grid;place-items:center;margin-bottom:16px}
.offer .ic svg{width:20px;height:20px;stroke:var(--gold-soft);fill:none;stroke-width:1.6}
.offer h4,.offer h3{color:var(--cream);font-size:1.02rem;margin:0 0 8px}
.offer p{color:var(--muted-light);font-size:.9rem;margin:0}

/* ---- pillar / stub page hero ---- */
.pillar-hero{color:var(--cream);position:relative;overflow:hidden;padding:calc(82px + 74px) 0 74px;margin-top:-82px}
.pillar-hero::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
.pillar-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(13,42,45,.94),rgba(19,58,63,.78))}
.pillar-hero .wrap{position:relative;z-index:2}
.pillar-hero .num{color:var(--gold-soft);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.74rem;margin-bottom:16px}
.pillar-hero h1{color:var(--cream);font-size:clamp(2.2rem,5vw,3.4rem);max-width:16ch}
.pillar-hero p{color:var(--muted-light);max-width:56ch;margin:20px 0 0;font-size:1.1rem}

/* ---- coming-soon / placeholder ---- */
.coming{background:var(--cream);border:1px dashed var(--line);border-radius:10px;padding:44px 40px;text-align:center;max-width:760px;margin:0 auto}
.coming .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.coming h3{color:var(--teal);font-size:1.5rem;margin-bottom:12px}
.coming p{color:var(--muted);margin:0 auto;max-width:52ch}
.coming .btn{margin-top:26px}

/* ---- simple back link ---- */
.backlink{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;font-size:.85rem;margin-bottom:8px}
.backlink:hover{color:var(--teal)}

/* ---- resources list ---- */
.res-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.res{display:flex;gap:16px;align-items:flex-start;background:var(--cream-50);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.res .ic{flex:0 0 auto;width:40px;height:40px;border-radius:8px;background:var(--teal);display:grid;place-items:center}
.res .ic svg{width:19px;height:19px;stroke:var(--gold-soft);fill:none;stroke-width:1.6}
.res h4{color:var(--teal);font-size:1rem;margin:0 0 5px}
.res p{color:var(--muted);font-size:.88rem;margin:0}

/* dropdown mobile handling — see the V27 block at the end of the sheet */
@media(max-width:720px){
  .imp-row{grid-template-columns:1fr}
  .imp-wide{grid-template-columns:1fr;gap:24px}
  .ll-band{grid-template-columns:1fr;gap:24px}
  .offer-grid{grid-template-columns:1fr}
  .res-list{grid-template-columns:1fr}
}
@media(max-width:960px){
  .imp-wide{grid-template-columns:1fr;gap:24px}
  .offer-grid{grid-template-columns:1fr}
}

.nav-links a.active{color:var(--gold-soft);opacity:1}
.nav-links a.active::after{width:100%}

/* ============================================================
   V3 additions
   ============================================================ */

/* ---- Listening layer as a cross-cutting bar under the pillars (light card, like the pillars) ---- */
.ll-cross{margin-top:26px;background:var(--cream-50);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.ll-cross-connect{display:grid;grid-template-columns:repeat(3,1fr);height:0}
.ll-cross-connect span{justify-self:center;width:2px;height:26px;background:var(--gold);opacity:.55;transform:translateY(-26px)}
.ll-cross-top{text-align:center;padding:18px 24px 0}
.ll-cross-top .eyebrow{margin:0}
.ll-cross-body{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:20px 34px 30px}
.ll-cross-icon{width:84px;height:84px;border-radius:50%;background:var(--teal);border:1px solid var(--gold-soft);display:grid;place-items:center;flex:0 0 auto}
.ll-cross-icon img{width:43px;height:43px}
.ll-cross-main h3{color:var(--teal);font-size:1.5rem;margin-bottom:8px}
.ll-cross-main p{color:var(--muted);margin:0 0 14px;font-size:.98rem;max-width:70ch}
.ll-cross-main .go{font-size:.82rem;letter-spacing:.06em;color:var(--gold);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.ll-cross-main .go:hover{color:var(--teal)}
.ll-cross-main .go .arw{transition:transform .25s}
.ll-cross-main .go:hover .arw{transform:translateX(4px)}
.ll-wider{display:inline-flex;align-items:center;background:#fff;border:1px solid #D8D8D2;border-radius:12px;padding:20px 30px;transition:transform .2s,box-shadow .2s;flex:0 0 auto}
.ll-wider:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ll-wider img{height:51px;width:auto;display:block}

/* ---- Insights: split briefings ---- */
.split-half{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.col-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 18px}
.stack{display:flex;flex-direction:column;gap:20px}
.layer + .layer{margin-top:40px}

/* content tile (clickable) */
.mtile{display:flex;flex-direction:column;background:var(--cream-50);border:1px solid var(--line);border-radius:10px;padding:26px 26px;min-height:150px;transition:transform .22s,box-shadow .22s}
a.mtile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mtile .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.mtile h3{color:var(--teal);font-size:1.18rem;line-height:1.25;margin-bottom:10px}
.mtile p{color:var(--muted);font-size:.93rem;margin:0}
.mtile .go{margin-top:auto;padding-top:16px;font-size:.8rem;letter-spacing:.05em;color:var(--gold);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.mtile .go .arw{transition:transform .25s}
a.mtile:hover .go .arw{transform:translateX(4px)}
/* blank placeholder tile */
.blank-tile{display:flex;align-items:center;justify-content:center;text-align:center;background:transparent;border:1px dashed var(--line);border-radius:10px;padding:26px;min-height:150px;color:var(--muted)}
.blank-tile span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75}

/* ---- carousel ---- */
.carousel{position:relative;margin-top:4px}
.carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-track{display:flex;gap:18px;padding:4px 2px 8px}
.carousel-card{flex:0 0 300px;scroll-snap-align:start;background:var(--cream-50);border:1px solid var(--line);border-radius:10px;padding:24px 24px 22px;display:flex;flex-direction:column;min-height:190px;transition:transform .2s,box-shadow .2s}
.carousel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.carousel-card .src{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.carousel-card h4{color:var(--teal);font-size:1.02rem;line-height:1.3;margin:0 0 10px}
.carousel-card p{color:var(--muted);font-size:.88rem;margin:0 0 16px}
.carousel-card .go{margin-top:auto;font-size:.78rem;letter-spacing:.04em;color:var(--gold);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.carousel-card .go .arw{transition:transform .25s}
.carousel-card:hover .go .arw{transform:translateX(4px)}
.carousel-nav{display:flex;gap:10px;margin-top:16px}
.carousel-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--cream-50);color:var(--teal);cursor:pointer;font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:all .2s}
.carousel-btn:hover{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.carousel-hint{font-size:.78rem;color:var(--muted);align-self:center;margin-left:8px}

/* ---- reference material 'coming soon' ---- */
.ref-soon{background:var(--cream-50);border:1px dashed var(--line);border-radius:10px;padding:48px 40px;text-align:center;color:var(--muted)}
.ref-soon .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.ref-soon p{font-size:1.05rem;margin:0}

/* ---- article page (prose) ---- */
.article{max-width:760px;margin:0 auto}
.article .meta{color:var(--muted);font-size:.9rem;margin:0 0 8px;letter-spacing:.02em}
.article h2{color:var(--teal);font-size:1.5rem;margin:44px 0 14px;line-height:1.2}
.article p{color:var(--ink);font-size:1.03rem;line-height:1.75;margin:0 0 20px}
.article a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article a:hover{color:var(--teal)}
.article .lede{font-size:1.15rem;color:var(--muted);line-height:1.7}
.article-hero{background:var(--teal);color:var(--cream);padding:calc(82px + 66px) 0 60px;margin-top:-82px}
.article-hero h1{color:var(--cream);font-size:clamp(2rem,4.4vw,3rem);max-width:20ch}
.article-hero .eyebrow{color:var(--gold-soft)}
.editor-note{background:var(--cream);border:1px dashed var(--line);border-radius:10px;padding:24px 26px;margin:0 0 30px;color:var(--muted);font-size:.95rem}
.editor-note b{color:var(--teal)}

@media(max-width:960px){
  .ll-cross-body{grid-template-columns:1fr;text-align:center;gap:18px;justify-items:center}
  .ll-cross-main p{margin-left:auto;margin-right:auto}
  .split-half{grid-template-columns:1fr;gap:48px}
}
@media(max-width:720px){
  .ll-cross-connect{display:none}
  .carousel-card{flex-basis:82%}
}

/* fix: contain carousel + equalize split halves (min-width:0 lets overflow scroll instead of expanding the track) */
.split-half > *{min-width:0}
.layer{min-width:0}
.carousel,.carousel-viewport{min-width:0;max-width:100%}

/* ============================================================
   V4 additions
   ============================================================ */

/* ---- Imperative: narrative-left / cards-right (like the deck) ---- */
.imp-layout{display:grid;grid-template-columns:0.95fr 1.35fr;gap:44px;align-items:start}
.imp-narrative .eyebrow{margin-bottom:16px}
.imp-narrative .imp-strong{font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--ink);line-height:1.5;margin:0 0 18px;font-weight:500}
.imp-narrative .imp-strong b{color:var(--teal)}
.imp-narrative p{color:var(--muted);font-size:1rem;line-height:1.7;margin:0 0 16px}
.imp-cluster{display:grid;grid-template-columns:1fr 0.92fr;gap:16px;align-items:start}
.imp-stack{display:flex;flex-direction:column;gap:16px}
.imp-cd{background:var(--cream-50);border:1px solid var(--line);border-radius:9px;padding:22px 22px}
.imp-cd .tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;display:block;margin-bottom:9px}
.imp-cd h3{font-size:1.04rem;color:var(--teal);margin-bottom:8px;line-height:1.25}
.imp-cd p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.imp-cd.interop{background:var(--teal);border-color:var(--teal)}
.imp-cd.interop .tag{color:var(--gold-soft)}
.imp-cd.interop h3{color:var(--cream)}
.imp-cd.interop p{color:var(--muted-light)}
.imp-cd.interop .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.imp-cd.interop .chip{font-size:.74rem;background:var(--teal-800);border:1px solid var(--line-dark);color:var(--muted-light);padding:6px 11px;border-radius:16px}
.imp-cd.tissue .tlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.imp-cd.tissue .tlist li{padding-left:18px;position:relative;color:var(--ink);font-size:.9rem}
.imp-cd.tissue .tlist li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--gold);border-radius:50%}
.crime-note{margin-top:14px;background:var(--teal-900);border:1px solid var(--line-dark);border-radius:7px;padding:14px 15px}
.crime-note p{color:var(--muted-light);font-size:.82rem;line-height:1.5;margin:0}
.crime-note b{color:var(--gold-soft)}

/* ---- Listening: landscape panorama band ---- */
.ll-landscape{width:100%;height:clamp(180px,26vw,300px);object-fit:cover;display:block}
.ll-landscape-band{background:var(--teal-900)}

/* ---- Listening: partnership header — chip aligns to bottom of headline ---- */
.ll-partner-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:16px}
.ll-partner-head h2.section-title{margin-bottom:0}
.ll-partner-head .wider-chip{align-self:end}

/* ---- Insights: Perspectives full-width ---- */
.perspectives-full{margin-top:12px}

/* ---- Team & Advisors: photos 50% smaller ---- */
.bio{grid-template-columns:96px 1fr;gap:24px}
.bio .avatar{width:96px;height:118px}

@media(max-width:960px){
  .imp-layout{grid-template-columns:1fr;gap:32px}
  .imp-cluster{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .imp-cluster{grid-template-columns:1fr}
  .ll-partner-head{grid-template-columns:1fr;align-items:start}
  .ll-partner-head .wider-chip{align-self:start}
  .bio{grid-template-columns:1fr}
  .bio .avatar{width:110px;height:135px}
}

/* ============================================================
   V5 additions
   ============================================================ */

/* ---- article photo hero: image above text, title superimposed ---- */
.photo-hero{position:relative;margin-top:-82px;overflow:hidden;background:var(--teal)}
.photo-hero img.ph-img{width:100%;height:clamp(320px,44vw,520px);object-fit:cover;display:block}
.photo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,42,45,.42) 0%,rgba(13,42,45,.08) 42%,rgba(13,42,45,.82) 100%)}
.photo-hero .ph-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 40px}
.photo-hero .ph-overlay .eyebrow{color:var(--gold-soft)}
.photo-hero .ph-overlay h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);max-width:24ch;text-shadow:0 2px 24px rgba(13,42,45,.55)}
.photo-hero .backlink{color:var(--gold-soft);position:relative;z-index:2}
.photo-hero .ph-top{position:absolute;top:calc(82px + 22px);left:0;right:0;z-index:2}

/* ---- insights: 3-across row (update 40%, two foundational) ---- */
.ins-row{display:grid;grid-template-columns:1.34fr 1fr 1fr;gap:20px;align-items:stretch}
.ins-row .col-label{margin-bottom:12px}
.mtile .thumb{margin:-26px -26px 18px;overflow:hidden;border-radius:10px 10px 0 0;aspect-ratio:16/6.5;background:var(--teal-800)}
.mtile .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.mtile:hover .thumb img{transform:scale(1.04)}

/* ---- keyword banner under the carousel ---- */
.kw-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding:16px 18px;background:var(--cream-50);border:1px solid var(--line);border-radius:10px}
.kw-bar .kw-lab{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:4px}
.kw{font-size:.8rem;padding:7px 14px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--teal);cursor:pointer;font-family:inherit;transition:all .2s}
.kw:hover{border-color:var(--gold);color:var(--gold)}
.kw.active{background:var(--teal);border-color:var(--teal);color:var(--cream)}

/* ---- pillar pages: compact focus areas (≈33% shorter) ---- */
.compare.focus-compact .col{padding:24px 28px}
.compare.focus-compact ul{gap:11px}
.compare.focus-compact li{font-size:.92rem}
.compare.focus-compact h3{margin-bottom:14px}

/* ---- home insight teaser tiles are links ---- */
a.ins{transition:transform .22s,box-shadow .22s}
a.ins:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ins .go{margin-top:auto;padding-top:18px;font-size:.8rem;letter-spacing:.05em;color:var(--gold);font-weight:600;display:inline-flex;gap:7px;align-items:center}
a.ins:hover .go .arw{transform:translateX(4px)}
.ins .go .arw{transition:transform .25s}

/* ---- article bullet lists ---- */
.article ul{margin:0 0 20px;padding-left:22px}
.article ul li{color:var(--ink);font-size:1.02rem;line-height:1.7;margin-bottom:14px}

/* ---- advisors placeholder ---- */
.advisor-soon{background:var(--cream-50);border:1px dashed var(--line);border-radius:10px;padding:38px;text-align:center;color:var(--muted)}
.advisor-soon span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}

@media(max-width:960px){ .ins-row{grid-template-columns:1fr 1fr} }
@media(max-width:720px){ .ins-row{grid-template-columns:1fr} .photo-hero .ph-top{top:calc(82px + 10px)} }

/* ============================================================
   V6 additions
   ============================================================ */

/* ---- imperative cluster rebuilt on the deck screenshot ---- */
.imp-cluster{grid-template-columns:1.55fr .95fr .85fr;gap:14px}
.imp-cd h3{font-size:.98rem;color:var(--ink);margin-bottom:8px;line-height:1.35;font-weight:600}
.imp-cd p{font-size:.88rem}
.imp-cd.imp-list h3{font-size:.92rem}
.imp-cd .tlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.imp-cd .tlist li{padding-left:16px;position:relative;color:var(--muted);font-size:.87rem}
.imp-cd .tlist li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--gold);border-radius:50%}
/* NOTE: .imp-banner (the old full-width dark crime banner across the bottom of
   the cluster) was removed in V28 — the line now lives as .imp-crime inside the
   "obligation of results" card. See the V28 block at the end of the sheet. */

/* ---- home insights teaser: photo thumbs ---- */
.ins .thumb{margin:-30px -28px 18px;overflow:hidden;border-radius:8px 8px 0 0;aspect-ratio:16/6.5;background:var(--teal-800)}
.ins .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.ins:hover .thumb img{transform:scale(1.04)}

/* ---- about: illaesa.com content block ---- */
.about-root{margin-top:64px;border-top:1px solid var(--line);padding-top:56px}
.about-root .tagline{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--teal);font-weight:500;line-height:1.5;max-width:34ch}
.ety{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;background:var(--cream-50);border:1px solid var(--line);border-radius:12px;padding:34px 38px;margin-top:38px}
.ety .mark{font-family:var(--serif);font-size:2.2rem;color:var(--teal);letter-spacing:.14em}
.ety .parts{color:var(--muted);font-size:.98rem}
.ety .parts b{color:var(--teal)}
.ety .defs{margin-top:8px;color:var(--gold);font-size:.92rem;letter-spacing:.06em}
.about-motto{margin-top:38px}
.about-motto .serif{font-style:italic;font-size:1.45rem;color:var(--teal);margin:0 0 6px}
.about-motto p{color:var(--muted);font-size:.95rem;margin:0}

@media(max-width:960px){
  .imp-cluster{grid-template-columns:1fr 1fr}
  .imp-cluster > .imp-stack{grid-column:1/-1}
  .ety{grid-template-columns:1fr;gap:18px}
}
@media(max-width:720px){
  .imp-cluster{grid-template-columns:1fr}
}

/* ============================================================
   V7 additions
   ============================================================ */

/* ---- carousel card thumbnails (where photos exist) ---- */
.carousel-card .cthumb{margin:-24px -24px 16px;overflow:hidden;border-radius:10px 10px 0 0;aspect-ratio:16/7;background:var(--teal-800)}
.carousel-card .cthumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.carousel-card:hover .cthumb img{transform:scale(1.04)}

/* ---- listening page: partnership section on white ---- */
section.paper .serve .item{border-left-color:var(--line)}
section.paper .serve .item .k{color:var(--gold)}
section.paper .serve .item p{color:var(--muted)}
section.paper .serve .item b{color:var(--teal)}
section.paper .offer{background:var(--cream-50);border-color:var(--line)}
section.paper .offer .ic{background:var(--teal);border-color:var(--gold-soft)}
section.paper .offer h4,section.paper .offer h3{color:var(--teal)}
section.paper .offer p{color:var(--muted)}
section.paper .partner{background:var(--cream-50);border-color:var(--line)}
section.paper .safeguard{color:var(--muted)}
section.paper .safeguard b{color:var(--teal)}
section.paper .ll-partner-head .eyebrow{color:var(--gold)}

/* ---- about: founding principle in a dark green box ---- */
.about-motto.dark-box{background:var(--teal-900);border-radius:12px;padding:36px 40px;margin-top:38px}
.about-motto.dark-box .eyebrow{color:var(--gold-soft)}
.about-motto.dark-box .serif{color:var(--cream)}
.about-motto.dark-box p{color:var(--muted-light)}

/* ---- about: equal-height stacked boxes ---- */
.eqbox{min-height:200px;display:grid;align-content:center}

/* ============================================================
   V10 additions
   ============================================================ */

/* ---- "New content" floating box straddling the green/white divide ---- */
.nc-anchor{height:0;position:relative;z-index:6}
.nc-box{position:relative;display:flex;align-items:center;margin-left:auto;width:min(520px,94%);height:144px;
  transform:translateY(-50%);border-radius:22px;overflow:hidden;
  border:1.5px solid rgba(245,242,233,.65);box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s}
.nc-box:hover{transform:translateY(-50%) translateY(-4px)}
.nc-box .bg{position:absolute;inset:0;background-position:center;background-size:cover}
.nc-box::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,42,45,.88) 18%,rgba(13,42,45,.55) 60%,rgba(13,42,45,.25))}
.nc-box .nc-txt{position:relative;z-index:2;padding:0 30px}
.nc-box .k{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;display:block;margin-bottom:7px}
.nc-box h3,.nc-box h2{color:#fff;font-size:1.25rem;line-height:1.25}
.nc-box .arw{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:2;color:var(--gold-soft);font-size:1.3rem;transition:transform .25s}
.nc-box:hover .arw{transform:translateY(-50%) translateX(4px)}

/* ---- imperative cards ~20% shorter + icons ---- */
.imp-cd{padding:15px 20px}
.imp-cd h3{font-size:.94rem;margin-bottom:6px}
.imp-cd p{font-size:.85rem;line-height:1.5}
.imp-cluster{gap:12px;align-items:stretch}
.imp-cd .tlist{gap:7px}
.imp-cd .tlist li{font-size:.85rem}
.imp-ic{width:34px;height:34px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-bottom:9px}
.imp-ic svg{width:18px;height:18px;stroke:var(--gold-soft);fill:none;stroke-width:1.7}
/* col 3 stack: tissue card + pillar-three photo */
.imp-col3{display:flex;flex-direction:column;gap:12px;min-width:0}
.imp-col3 .imp-cd{flex:0 0 auto}
.imp-p3{flex:1;min-height:110px;border-radius:9px;object-fit:cover;width:100%;border:1px solid var(--line)}

/* ---- imperative page full-width layout (boxes below narrative) ---- */
.imp-narr-full p{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0 0 16px;max-width:76ch}
.imp-narr-full .imp-strong{font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--ink);line-height:1.5;margin:0 0 16px;font-weight:500;max-width:76ch}
.imp-narr-full .imp-strong b{color:var(--teal)}

/* ---- compare table ~15% tighter ---- */
.compare.tight .col{padding:28px 32px}
.compare.tight ul{gap:14px}
.compare.tight h3{margin-bottom:18px}

/* ---- pillar focus box full width, 2x2 bullets ---- */
.compare.focus-compact.fullbleed{max-width:none !important}
.compare.focus-compact.fullbleed ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.pillar-xlinks{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:stretch}
.pillar-xlinks .btn{margin:0 !important;display:inline-flex;align-items:center}

@media(max-width:960px){
  .imp-col3{grid-column:auto}
  .nc-box{width:min(480px,94%)}
}
@media(max-width:720px){
  .nc-box{height:120px}
  .nc-box h3,.nc-box h2{font-size:1.05rem}
  .compare.focus-compact.fullbleed ul{grid-template-columns:1fr}
}
/* pillar cross-links: all on one level */
.pillar-xlinks{flex-wrap:nowrap}
.pillar-xlinks .btn{padding:9px 13px;font-size:.78rem;white-space:nowrap}
.coming{max-width:860px}
@media(max-width:820px){.pillar-xlinks{flex-wrap:wrap}}
@media(max-width:420px){
  .pillar-xlinks .btn{white-space:normal;text-align:center;max-width:100%}
}

/* ============================================================
   V11 fixes
   ============================================================ */

/* imperative card icons: top-right corner, bottom aligned with title; boxes compressed */
.imp-stack .imp-cd{position:relative;padding:13px 18px}
.imp-stack .imp-cd h3{padding-right:44px;margin-bottom:5px}
.imp-stack .imp-cd .imp-ic{position:absolute;top:9px;right:14px;margin:0;width:28px;height:28px}
.imp-stack .imp-cd .imp-ic svg{width:15px;height:15px}
.imp-stack .imp-cd p{font-size:.84rem;line-height:1.48}

/* pillar photo icons: never clip into the white area */
.pillar .ph{overflow:visible}
.pillar .ph img{border-radius:10px 10px 0 0}
.pillar .ph::after{border-radius:10px 10px 0 0}
.pillar .icon{z-index:3}

/* ============================================================
   V12 fixes
   ============================================================ */
/* three left cards together fill the same height as the 70++ laws box */
.imp-stack .imp-cd{flex:1 1 0}
/* pillar page hero photos: uniform height across pillars 1–3 */
.pillar-hero{display:flex;align-items:center;min-height:610px}

/* v12.1: pillar photos locked to the box — a tall source can no longer stretch it */
.pillar .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   V13: pillar page content sections
   ============================================================ */
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:56px}
.bd-grid .blk p{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0}
.bd-grid .blk p b{color:var(--teal)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.svc{background:var(--cream-50);border:1px solid var(--line);border-radius:10px;padding:26px 24px;display:flex;flex-direction:column}
.svc .num{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.svc h3{font-size:1.08rem;color:var(--teal);line-height:1.25;margin-bottom:14px}
.svc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.svc li{padding-left:17px;position:relative;color:var(--muted);font-size:.9rem;line-height:1.55}
.svc li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.who-line{margin-top:44px;background:var(--teal-900);border-radius:10px;padding:24px 30px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.who-line .k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;white-space:nowrap}
.who-line p{color:var(--muted-light);font-size:.95rem;margin:0;flex:1;min-width:260px}
@media(max-width:960px){.bd-grid{grid-template-columns:1fr;gap:28px}.svc-grid{grid-template-columns:1fr}}

/* ---- mailing-list subscribe band (insights) ---- */
.subscribe-band{margin-top:56px;background:var(--teal-900);border-radius:12px;padding:36px 42px;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.subscribe-band .sub-txt h3{color:var(--cream);font-size:1.3rem;line-height:1.3;margin-bottom:6px}
.subscribe-band .sub-txt p{color:var(--muted-light);font-size:.95rem;margin:0}
.sub-form .sub-row{display:flex;gap:12px}
.sub-form input[type=email]{flex:1;padding:13px 15px;border:1px solid var(--line-dark);border-radius:4px;background:var(--teal-800);color:var(--cream);font-family:inherit;font-size:.95rem}
.sub-form input[type=email]::placeholder{color:rgba(159,178,174,.6)}
.sub-form input[type=email]:focus{outline:none;border-color:var(--gold-soft)}
.sub-form .sub-note{color:var(--gold-soft);font-size:.85rem;margin:10px 0 0;min-height:1em}
@media(max-width:820px){.subscribe-band{grid-template-columns:1fr;gap:20px}}

/* pillar/about hero: wrap fills flex container so text aligns to the page grid */
.pillar-hero .wrap{width:100%}
/* four-category pillar grids render 2x2 */
.svc-grid.cols-2{grid-template-columns:repeat(2,1fr)}
/* about hero: shorter box so the wide skyline shows nearly in full (less zoom-crop) */
.pillar-hero.about-hero{min-height:0;padding:calc(82px + 44px) 0 44px}
.pillar-hero.about-hero h1{font-size:clamp(1.9rem,4vw,2.8rem)}

/* ---------- V16: 4-stat value band + 5-item service grid + svc header alignment ---------- */
.stats.four{grid-template-columns:repeat(4,1fr);gap:26px}
.stats.four .num{font-size:clamp(2.1rem,3.6vw,2.9rem)}
@media(max-width:1080px){.stats.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stats.four{grid-template-columns:1fr}}
/* keep the numbered label and title pinned to the same y in every card of a row */
.svc .num{margin-top:0;line-height:1}
.svc h3{margin-top:0}
/* 5 categories: 2 columns, the 5th card spans the full width with its bullets in two columns */
.svc-grid.five .svc:last-child{grid-column:1/-1}
.svc-grid.five .svc:last-child ul{display:block;column-count:2;column-gap:36px}
.svc-grid.five .svc:last-child li{break-inside:avoid;margin-bottom:11px}
@media(max-width:960px){.svc-grid.five .svc:last-child ul{column-count:1}}

/* ---------- V17 ---------- */
/* home hero headline reduced 15% (was clamp(2.8rem,6.5vw,5rem)) */
.hero h1{font-size:clamp(2.38rem,5.525vw,4.25rem)}
/* monogram matched to the two-line headline height: 2 lines x 1.1 line-height */
.hero-mono img{height:calc(2.2 * clamp(2.38rem,5.525vw,4.25rem));width:auto;max-width:100%}
/* imperative intro: all three paragraphs share one right edge.
   (was max-width:76ch on each — ch scales with font-size, so the larger
   lead paragraph ran ~300px wider than the two below it) */
.imp-narr-full p,.imp-narr-full .imp-strong{max-width:800px}
/* pillar heroes: top-align so the eyebrow/headline/standfirst sit at the same
   y on all three pages regardless of how many lines the headline takes */
.pillar-hero{align-items:flex-start}
/* value-case band: hold 4-across further down, and stay 4-across even if the
   .four class is missing (defensive against a stale cached stylesheet) */
@media(min-width:981px){.stats.four,.stats:not(.five):has(>.stat:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px) and (min-width:641px){.stats.four,.stats:not(.five):has(>.stat:nth-child(4)){grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stats.four,.stats:not(.five):has(>.stat:nth-child(4)){grid-template-columns:1fr}}

/* ---------- V18 ---------- */
/* pillar headlines: wide enough to break two-up rather than three, at the same
   font size (26ch clears "Corporate strategy & supply-chain" but not the full
   string, and "Digitisation & collaborative" but not the full string) */
.pillar-hero h1{max-width:26ch}

/* ---------- V19 ---------- */
/* Æ monogram spans from the top of the "Control the risk" line to the bottom of
   the hero sub line that carries "better paperwork". Those two edges depend on
   where the sub happens to wrap, so main.js measures them (Range client rects)
   and writes --mono-top / --mono-h on .hero-grid, re-measuring on resize and on
   webfont load. The values below are the pre-measurement fallback: 36px is the
   eyebrow line box + margin, and the height is the headline plus ~2 sub lines. */
.hero-grid{align-items:start}
.hero-mono{align-self:start;margin-top:var(--mono-top,36px)}
.hero-mono img{height:var(--mono-h,calc(4.4 * clamp(2.38rem,5.525vw,4.25rem)));width:auto;max-width:100%}
@media(max-width:900px){.hero-mono{margin-top:0}.hero-mono img{height:auto;width:min(260px,60vw)}}

/* ---------- V24 ---------- */
/* value-case stat citations link out to the underlying research. Muted hairline
   underline so the band still reads as a stat row, not a list of links. */
.stat .src a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(159,178,174,.35);transition:color .18s ease,border-color .18s ease}
.stat .src a:hover,.stat .src a:focus-visible{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}

/* ---------- V25 ---------- */
/* The Value Case band now carries five stats. Two columns rather than five
   across: the captions are full sentences and five 1fr tracks at 1440 leave
   ~250px each. The fifth spans both columns, the same pattern .svc-grid.five
   already uses for its odd card. The V17 `.stats:has(>.stat:nth-child(4))`
   fallback is scoped with :not(.five) so it cannot force this band to 4-up. */
.stats.five{grid-template-columns:repeat(2,1fr);gap:34px 48px}
.stats.five .num{font-size:clamp(2.1rem,3.6vw,2.9rem)}
.stats.five .stat:last-child{grid-column:1/-1}
@media(max-width:640px){.stats.five{grid-template-columns:1fr}.stats.five .stat:last-child{grid-column:auto}}

/* ---------- V26: privacy notice, form microcopy, footer legal link ---------- */
/* Microcopy sits under each form: small, quiet, but readable — it carries the
   PDPO Part 6A notification for the mailing list, so it must not be hidden. */
.form-microcopy{font-size:.82rem;line-height:1.6;color:var(--muted);margin:22px 0 20px;max-width:60ch}
.form-microcopy a{color:var(--teal);text-decoration:underline}
.form-microcopy a:hover,.form-microcopy a:focus-visible{color:var(--gold)}
.sub-microcopy{font-size:.78rem;line-height:1.6;color:var(--muted-light);opacity:.9;margin:14px 0 0;max-width:62ch}
.sub-microcopy a{color:var(--gold-soft);text-decoration:underline}
.sub-microcopy a:hover,.sub-microcopy a:focus-visible{color:#E4D6B8}
.foot-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(159,178,174,.35)}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}
/* Unfilled legal placeholders are made loud on purpose so they cannot ship unnoticed. */
.placeholder{background:#ffe9a8;color:#6b4b00;padding:1px 6px;border-radius:3px;font-weight:600;font-size:.95em}

/* ============================================================
   V27 — pre-launch fixes
   ============================================================ */

/* ---- mobile nav: collapses at 785px, not 720px ----
   The desktop nav needs 786px of room; below that it overlapped the
   wordmark. The panel is also scrollable and hidden from the tab order
   when closed — previously the Contact CTA fell below the fold on a
   375x667 phone with no way to scroll to it, and the twelve links inside
   the closed panel were still focusable. */
@media(max-width:785px){
  .nav-links{
    position:fixed;inset:82px 0 auto 0;background:var(--teal);
    flex-direction:column;gap:0;padding:8px 0 max(8px, env(safe-area-inset-bottom));
    box-shadow:var(--shadow);transform:translateY(-140%);
    max-height:calc(100vh - 82px);
    max-height:calc(100dvh - 82px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    visibility:hidden;
    transition:transform .35s, visibility 0s linear .35s;
  }
  .nav-links.open{transform:none;visibility:visible;transition:transform .35s, visibility 0s}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:16px}
  .nav-links .btn{margin:10px auto;display:inline-block}
  .nav-toggle{display:block;padding:10px}
  /* visibility:inherit, not visible — the dropdown must stay hidden (and so
     out of the tab order) while the closed panel is hidden */
  .dropdown{position:static;transform:none;opacity:1;visibility:inherit;box-shadow:none;border:0;background:transparent;padding:0;min-width:0}
  .nav-links .has-dropdown:hover .dropdown{transform:none}
  .dropdown a{padding:12px;text-align:center;opacity:.8}
  .dropdown .dd-sub{display:none}
  .nav-links .has-dropdown > a .caret{display:none}
}
/* body scroll lock while the panel is open */
body.nav-open{overflow:hidden}

/* ---- horizontal overflow: two-column service grids must still collapse ----
   .svc-grid.cols-2 (0,2,0) outranked the .svc-grid collapse inside the 960px
   query on both specificity and source order, so pillar-corporate.html was
   34px wider than a 390px viewport. */
@media(max-width:960px){.svc-grid.cols-2{grid-template-columns:1fr}}

/* ---- headings allowed to run on one line only where there is room ---- */
.nowrap-lg{white-space:normal}
@media(min-width:786px){.nowrap-lg{white-space:nowrap}}

/* ---- footer: registered company name and address ---- */
.foot-addr{display:block;font-size:.82rem;line-height:1.7;opacity:.78;margin-top:10px;font-style:normal}

/* ============================================================
   V28 — the crime line, reduced and re-homed
   ============================================================
   Was a full-width dark banner (.imp-banner) spanning the foot of the whole
   cluster. It is now a compact dark strip pinned to the bottom of the
   "A regulatory obligation of results" card, which is the claim it qualifies.

   Specificity notes — the strip is a <p> inside .imp-cd, so it inherits from
   rules that are more specific than a bare .imp-crime:
     .imp-cd p                  (0,1,1)  colour + font-size + line-height
     .imp-stack .imp-cd p       (0,2,1)  font-size:.84rem; line-height:1.48
   so colour is set at .imp-cd .imp-crime (0,2,0) and the size at
   .imp-stack .imp-cd p.imp-crime (0,3,1) rather than leaning on source order. */
.imp-cd .imp-crime{
  margin:12px 0 0;
  padding:9px 12px;
  background:var(--teal-900);
  color:var(--cream);
  border-radius:6px;
  text-align:center;
  font-weight:600;
  letter-spacing:.01em;
}
.imp-stack .imp-cd p.imp-crime{font-size:.8rem;line-height:1.35}
/* the stack equalises card heights with flex:1 1 0, so push the strip to the
   foot of the card rather than letting it float under a short paragraph */
.imp-stack .imp-cd:has(> .imp-crime){display:flex;flex-direction:column}
.imp-stack .imp-cd > .imp-crime{margin-top:auto}

/* ============================================================
   V29 — contrast, focus, and the skip link
   ============================================================
   1. --gold moved from #B4894C to #8A642B.
      The old brass measured 2.83:1 on --cream and 3.03:1 on --cream-50, and
      white on the solid CTA was 3.17:1 — all below the 4.5:1 AA floor, and it
      is the token behind every eyebrow, tag, stat number, role line, "Explore
      →", column label and in-article link. #8A642B was the only candidate that
      clears everything at once: 4.76 on cream, 5.10 on cream-50, 5.33 for
      white on the button. .btn.solid:hover moved with it (#a17b3f → #6F5022)
      so the hover state does not drop back below the floor.

   2. The four gold hover/focus rules that sit on DARK backgrounds could not
      follow the token down — dark brass on dark teal is unreadable. They are
      repointed above to --gold-soft (6.08:1 on teal), except .sub-microcopy,
      whose resting colour is already --gold-soft, so its hover lifts to a
      lighter #E4D6B8 to stay a visible state change. .form-microcopy is on
      paper and keeps var(--gold).

   3. .backlink is declared once but renders in two places: on the cream
      article body and inside the dark .pillar-hero / .photo-hero. Now that the
      token is dark, the dark-hero instances need --gold-soft, and their hover
      cannot fall to --teal. */
.pillar-hero .backlink,.page-hero .backlink{color:var(--gold-soft)}
.pillar-hero .backlink:hover,.page-hero .backlink:hover,.photo-hero .backlink:hover{color:var(--cream)}

/* 4. Keyboard focus. Nothing in the stylesheet drew a focus ring, and two
      rules actively removed the browser default (form fields at :234 and the
      subscribe email at :795). :focus-visible keeps mouse clicks clean while
      giving keyboard users a ring everywhere. Two colours: --teal on light
      ground, --gold-soft on dark, so the ring is visible either way. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}
.site-header :where(a,button):focus-visible,
.site-footer :where(a,button):focus-visible,
section.dark :where(a,button,input):focus-visible,
.page-hero :where(a,button):focus-visible,
.pillar-hero :where(a,button):focus-visible,
.photo-hero :where(a,button):focus-visible,
.cta-band :where(a,button):focus-visible,
.subscribe-band :where(a,button,input):focus-visible{
  outline-color:var(--gold-soft);
}
form input:focus-visible,form textarea:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.sub-form input[type=email]:focus-visible{outline:3px solid var(--gold-soft);outline-offset:1px}

/* 5. Skip link — first focusable element on every page, hidden until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal-900);color:var(--cream);
  padding:12px 20px;border-radius:0 0 4px 0;
  font-size:.9rem;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* 6. Reduced motion — the reveal animations and arrow nudges are decorative. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* 7. Two photographic overlays were not dark enough at the point where text
      sits on them: the "New content" arrow measured 2.13:1 and the article
      eyebrow 4.04:1 against the actual rendered pixels. Deepening the gradient
      at those ends fixes both without flattening the photograph. */
.nc-box::after{background:linear-gradient(90deg,rgba(13,42,45,.92) 18%,rgba(13,42,45,.72) 60%,rgba(13,42,45,.6))}
.photo-hero::after{background:linear-gradient(180deg,rgba(13,42,45,.5) 0%,rgba(13,42,45,.12) 38%,rgba(13,42,45,.88) 100%)}
/* The gradient alone cannot guarantee a floor over an arbitrary photograph, so
   the overlay text block carries its own scrim rather than relying on how dark
   the picture happens to be at that height. */
.photo-hero .ph-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:64px 0 40px}
.photo-hero .ph-overlay::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,42,45,0) 0%,rgba(13,42,45,.86) 46%,rgba(13,42,45,.94) 100%)}
.photo-hero .ph-overlay .eyebrow{color:var(--gold-soft);text-shadow:0 1px 10px rgba(13,42,45,.9)}

/* 8. The solid CTA. #8A642B is right on paper, but as a filled block on the
      dark teal it reads muddy — and the brass is meant to be the light note
      there. On dark grounds the button inverts to the soft gold with teal text
      (10.9:1) instead, which is both prettier and further clear of the floor. */
.hero .btn.solid,.page-hero .btn.solid,.pillar-hero .btn.solid,.photo-hero .btn.solid,
section.dark .btn.solid,section.deep .btn.solid,.cta-band .btn.solid,.subscribe-band .btn.solid{
  background:var(--gold-soft);border-color:var(--gold-soft);color:var(--teal-900);
}
.hero .btn.solid:hover,.page-hero .btn.solid:hover,.pillar-hero .btn.solid:hover,.photo-hero .btn.solid:hover,
section.dark .btn.solid:hover,section.deep .btn.solid:hover,.cta-band .btn.solid:hover,.subscribe-band .btn.solid:hover{
  background:var(--cream);border-color:var(--cream);color:var(--teal-900);
}
/* the promo arrow is decorative but still needs to be seen against a photo */
.nc-box .arw{color:var(--cream)}