/* ============================================================
   Martinien Afangbedji · design system v3
   Implements Brand Identity Guidelines 1.1 (§12 colour, §13 type,
   §14 graphic elements). One stylesheet for every page.
   ============================================================ */
:root{
  /* §12 palette, exact values */
  --navy:#15243F; --navy-2:#1E3052;
  --gold:#B08D57; --gold-deep:#94733F;
  /* accessible gold for small text on light grounds (AA 4.5 on paper, cream and cream-deep) */
  --gold-text:#806333;
  --cream:#F7F3EC; --cream-deep:#F0EADC; --paper:#FBF8F2;
  --text:#1B2233; --muted:#5C6473;
  --line:#E6DCCB; --line-soft:#EFE7D9;
  /* §13 type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* rhythm */
  --gut:clamp(20px,5vw,40px);
  --measure:68ch;
  --sec:clamp(92px,13vw,168px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* §14 paper grain, felt not seen */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("/assets/grain.png"); background-size:96px 96px;
  opacity:.035; mix-blend-mode:multiply;
}
body>*{position:relative; z-index:1}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
::selection{background:rgba(176,141,87,.22)}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding-inline:var(--gut)}
.wrap-narrow{max-width:780px}

/* ---------- §13 type scale ---------- */
h1,h2,h3,h4{font-family:var(--serif); color:var(--navy); font-weight:500; margin:0; letter-spacing:-.005em}
.display{font-size:clamp(33px,5.1vw,54px); line-height:1.06; font-weight:500}
.sec-title{font-size:clamp(26px,3.4vw,36px); line-height:1.14; font-weight:500}
h3{font-size:19.5px; line-height:1.3; font-weight:600}
p{margin:0}
.lead{font-size:clamp(17px,1.65vw,19px); line-height:1.62; color:var(--muted); max-width:var(--measure)}
.body-copy{max-width:var(--measure)}
.body-copy+.body-copy{margin-top:1.1em}
.small{font-size:14.5px; line-height:1.62; color:var(--muted)}

/* §14 numbered eyebrow: italic Fraunces numeral · spaced caps · short gold rule */
.eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.eyebrow .num{font-family:var(--serif); font-style:italic; font-weight:400; font-size:15px; color:var(--gold); line-height:1}
.eyebrow .lbl{font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); line-height:1}
.eyebrow .rule{flex:0 0 auto; width:clamp(28px,5vw,64px); height:1px; background:var(--gold); opacity:.55}

/* §14 gold hairlines */
.hair{height:1px; background:var(--line); border:0; margin:0}
.hair-gold{height:1px; background:var(--gold); opacity:.4; border:0; margin:0}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:60; background:rgba(251,248,242,.86);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img,.brand svg{width:34px; height:34px; flex:none}
.brand .wm{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); letter-spacing:-.01em; white-space:nowrap}
.brand .wm i{font-style:normal; color:var(--gold-deep)}   /* §10 surname in gold */
.nav{display:flex; align-items:center; gap:clamp(18px,2.6vw,34px)}
.nav a{font-size:14.5px; color:var(--navy); padding:6px 0; position:relative; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current]::after{transform:scaleX(1)}
.head-right{display:flex; align-items:center; gap:14px; flex:none}



.burger{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); cursor:pointer; align-items:center; justify-content:center; padding:0}
.burger span{display:block; width:16px; height:1.5px; background:var(--navy); position:relative; transition:.25s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--navy); transition:.25s}
.burger span::before{top:-5px} .burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}
.mobile-nav{display:none; border-top:1px solid var(--line-soft); background:var(--paper)}
.mobile-nav a{display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:16px; color:var(--navy)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav .mn-num{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--gold)}
.mobile-nav.open{display:block}

/* ---------- hero ---------- */
.hero{padding-block:clamp(72px,12vw,132px) clamp(40px,6vw,64px); text-align:center}
.hero .display{margin-inline:auto; max-width:19ch}
.hero .lead{margin:26px auto 0; max-width:56ch; color:var(--muted); text-align:center}
.hero .sig{margin-top:34px; display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.hero .sig::before,.hero .sig::after{content:""; width:clamp(24px,5vw,54px); height:1px; background:var(--gold); opacity:.5}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat{padding:30px 16px; text-align:center; position:relative}
.stat+.stat::before{content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line)}
.stat .v{font-family:var(--serif); font-size:clamp(26px,3.4vw,34px); font-weight:500; color:var(--navy); line-height:1.1}
.stat .l{margin-top:7px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.trustline{text-align:center; font-size:14.5px; color:var(--muted); padding:26px 0 0}

/* ---------- index rows (landing) ---------- */
.index{margin-top:clamp(44px,7vw,72px); border-top:1px solid var(--line)}
.irow{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:clamp(14px,2.4vw,26px);
  padding:clamp(24px,3.4vw,34px) 0; border-bottom:1px solid var(--line); transition:background .3s}
.irow .n{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold); line-height:1}
.irow .ico{width:26px; height:26px; color:var(--gold-deep); transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.irow h2{font-size:clamp(21px,2.6vw,26px); line-height:1.2; font-weight:500}
.irow p{margin-top:5px; font-size:15px; color:var(--muted); max-width:62ch}
.irow .arrow{width:20px; height:20px; color:var(--gold); opacity:.55; transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s}
.irow:hover{background:linear-gradient(90deg,rgba(240,234,220,.55),rgba(240,234,220,0))}
.irow:hover .arrow{transform:translateX(5px); opacity:1}
.irow:hover .ico{transform:translateY(-2px)}

/* ---------- page header ---------- */
.page-head{padding-block:clamp(56px,8vw,92px) 0; text-align:center}
.page-head .ico{width:30px; height:30px; color:var(--gold-deep); margin:0 auto 20px}
.page-head .sec-title{max-width:22ch; margin-inline:auto}
.page-head .lead{margin:16px auto 0; text-align:center; max-width:52ch}
.page-head .under{width:56px; height:1px; background:var(--gold); opacity:.6; margin:32px auto 0}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec) 0}
.sec-band{background:var(--cream); border-block:1px solid var(--line-soft); margin-top:var(--sec); padding:var(--sec) 0}
.sec-band+.sec{padding-top:var(--sec)}

/* definition list rows */
.dlist{margin-top:clamp(28px,4vw,40px); max-width:var(--measure); border-top:1px solid var(--line)}
.ditem{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line)}
.ditem .ico{width:22px; height:22px; color:var(--gold-deep); margin-top:4px}
.ditem h3{margin-bottom:4px}
.ditem p{font-size:16px; color:var(--muted)}

/* quiet panels (replaces boxed cards) */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,30px); margin-top:clamp(28px,4vw,40px)}
.panel{background:var(--paper); border-left:2px solid var(--gold); padding:24px 26px}
.sec-band .panel{background:var(--cream-deep)}
.panel h3{margin-bottom:8px}
.panel p{font-size:15.5px; color:var(--muted)}

/* pull quote */
.pull{max-width:var(--measure); margin-top:clamp(30px,4vw,44px); padding-left:26px; border-left:2px solid var(--gold)}
.pull p{font-family:var(--serif); font-size:clamp(19px,2.3vw,23px); line-height:1.42; color:var(--navy); font-weight:400}
.pull cite{display:block; margin-top:12px; font-family:var(--sans); font-style:normal; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}

/* §14 framed, offset image */
.framed{position:relative; display:inline-block; max-width:340px}
.framed::after{content:""; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--gold); opacity:.55; pointer-events:none; z-index:-1}
.framed img{background:var(--cream-deep)}

/* links & buttons */
.link{color:var(--gold-deep); font-weight:600; font-size:15.5px; display:inline-flex; align-items:center; gap:8px}
.link svg{width:15px; height:15px; transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.link:hover svg{transform:translateX(4px)}
.link:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:var(--paper);
  border:0; border-radius:999px; padding:14px 30px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .25s, transform .25s}
.btn:hover{background:var(--navy-2); transform:translateY(-1px)}
.btn svg{width:15px; height:15px}

/* ---------- form ---------- */
.form{margin-top:clamp(26px,4vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; max-width:var(--measure)}
.field{display:flex; flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-bottom:8px}
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--navy); background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 2px; width:100%;
  transition:border-color .25s}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:var(--gold)}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold-deep) 50%),linear-gradient(135deg,var(--gold-deep) 50%,transparent 50%);
  background-position:calc(100% - 13px) 19px,calc(100% - 8px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.hp{position:absolute; left:-9999px; opacity:0}
.form-status{grid-column:1/-1; font-size:14.5px; color:var(--gold-deep); min-height:1.2em}
.form-status.ok{color:#3D6B4A} .form-status.err{color:#9A3B3B}
.form-note{grid-column:1/-1; font-size:13.5px; color:var(--muted)}

/* ---------- writing list ---------- */
.wlist{list-style:none; margin:clamp(26px,4vw,36px) 0 0; padding:0; border-top:1px solid var(--line)}
.wlist li{border-bottom:1px solid var(--line)}
.wlist a{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:baseline; padding:22px 0; transition:background .3s}
.wlist a:hover{background:linear-gradient(90deg,rgba(240,234,220,.5),rgba(240,234,220,0))}
.wtag{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; min-width:104px}
.wtitle{font-family:var(--serif); font-size:18.5px; font-weight:600; color:var(--navy); line-height:1.3; display:block}
.wnote{display:block; margin-top:4px; font-size:14.5px; color:var(--muted)}
.warr{color:var(--gold); opacity:.55; transition:transform .3s}
.wlist a:hover .warr{transform:translateX(4px); opacity:1}

/* ---------- footer ---------- */
.site-foot{background:var(--navy); color:#C3CCD9; margin-top:var(--sec); position:relative; overflow:hidden}
.site-foot::after{content:""; position:absolute; right:-40px; bottom:-50px; width:280px; height:280px;
  background:url("/images/africa-motif.png") center/contain no-repeat; opacity:.05; pointer-events:none}
.foot-in{padding-block:clamp(40px,6vw,58px) 26px; position:relative; z-index:1}
.foot-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot-brand .wm{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--cream)}
.foot-brand .wm i{font-style:normal; color:var(--gold)}
.foot-brand p{margin-top:8px; font-size:13.5px; color:#93A0B2; max-width:44ch}
.foot-nav{display:flex; gap:44px; flex-wrap:wrap}
.foot-col h4{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:12px}
.foot-col a,.foot-col span{display:block; font-size:14px; color:#C3CCD9; padding:3px 0}
.foot-col a:hover{color:var(--gold)}
.foot-rule{height:1px; background:rgba(176,141,87,.26); margin:clamp(28px,4vw,38px) 0 20px}
.legal{font-size:11.5px; line-height:1.65; color:#7F8CA0; max-width:104ch}
.legal+.legal{margin-top:7px}
.foot-base{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:22px;
  font-size:12px; color:#93A0B2}
.foot-base a:hover{color:var(--gold)}

/* ---------- motion, §14 restraint ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav{display:none}
  .burger{display:inline-flex}
  .panels{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .irow{grid-template-columns:auto 1fr auto; gap:14px}
  .irow .ico{display:none}
  .wlist a{grid-template-columns:1fr auto}
  .wtag{min-width:0; grid-column:1/-1; margin-bottom:2px}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .stats{grid-template-columns:1fr}
  .stat+.stat::before{left:22%; right:22%; top:0; bottom:auto; width:auto; height:1px}
  .stat{padding:22px 10px}
  .foot-nav{gap:28px}
}
@media print{
  .site-head,.mobile-nav,.burger,#cookie-banner{display:none !important}
  body{background:#fff} body::before{display:none}
}

/* ---------- profile: text + framed portrait ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,64px); align-items:start}
.about-fig{padding-right:14px}
.about-fig .framed{max-width:300px}
.about-fig img{width:300px; height:auto; border-radius:2px}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-fig{order:-1; padding-right:0; margin-bottom:8px}
  .about-fig .framed,.about-fig img{max-width:230px; width:230px}
}
/* skip link becomes visible on focus */
a.hp:focus{position:fixed; left:16px; top:14px; width:auto; height:auto; opacity:1; z-index:200;
  background:var(--navy); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:14px}

/* ---------- landing: analytics link + institution types ---------- */
.statlink{text-align:center; margin-top:20px}
.reflist{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px 30px}
.reflist li{font-size:13px; letter-spacing:.02em; color:var(--muted); position:relative}
.reflist li+li::before{content:""; position:absolute; left:-16px; top:50%; width:3px; height:3px;
  border-radius:50%; background:var(--gold); transform:translateY(-50%)}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,36px); margin-top:clamp(26px,4vw,36px)}
.quote{margin:0; padding-left:24px; border-left:1px solid var(--line)}
.quote .qmark{width:20px; height:20px; color:var(--gold); opacity:.75; margin-bottom:12px}
.quote blockquote{margin:0; font-family:var(--serif); font-size:17.5px; line-height:1.52; color:var(--navy); font-weight:400}
.quote figcaption{margin-top:14px; display:flex; flex-direction:column; gap:2px}
.quote .qn{font-size:13.5px; font-weight:600; color:var(--navy)}
.quote .qr{font-size:12px; letter-spacing:.06em; color:var(--muted)}

/* ---------- next section ---------- */
.nextsec{display:flex; align-items:center; gap:14px; margin-top:var(--sec);
  padding:26px 0 0; border-top:1px solid var(--line)}
.nextsec .nl{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.nextsec .nt{font-family:var(--serif); font-size:22px; font-weight:500; color:var(--navy)}
.nextsec .na{width:18px; height:18px; color:var(--gold); margin-left:auto; transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.nextsec:hover .na{transform:translateX(6px)}
.nextsec:hover .nt{color:var(--navy-2)}

/* framed image: keep the offset rule visible without negative z-index */
.framed{position:relative; display:inline-block; isolation:isolate}
.framed::after{content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1px solid var(--gold); opacity:.6; pointer-events:none; z-index:0}
.framed img{position:relative; z-index:1; border-radius:1px}

@media(max-width:860px){
  .quotes{grid-template-columns:1fr}
  .reflist{gap:8px 22px}
  .reflist li{font-size:12.5px}
}

/* brand mark */
.brand img{width:32px;height:32px}
.foot-mark{width:40px;height:40px;margin-bottom:14px;opacity:.95}

/* ============================================================
   v3.3 · centred content columns, mobile header, counters
   ============================================================ */

/* 1. Content sits in a centred column rather than hugging the left.
      Text stays left-aligned inside the column: justified text on the
      web opens rivers of white space and hurts readability. */
:root{--col:720px; --col-wide:920px}
.sec > *,
.sec-band > .wrap > *{max-width:var(--col); margin-inline:auto}
.sec > .panels, .sec-band > .wrap > .panels,
.sec > .quotes, .sec-band > .wrap > .quotes,
.sec > .about-grid, .sec-band > .wrap > .about-grid{max-width:var(--col-wide)}
.dlist, .form, .pull, .wlist, .body-copy, .lead{margin-inline:auto}
.nextsec{max-width:var(--col-wide); margin-inline:auto}
.index{max-width:var(--col-wide); margin-inline:auto}
.stats, .trustline, .reflist, .statlink{max-width:var(--col-wide); margin-inline:auto}

/* 2. Mobile header: the wordmark could not shrink, so the bar overflowed
      by ~13px and pushed every page sideways, which made body text look
      cut off at the edge. */
.head-in{min-width:0}
.brand{min-width:0}
.brand .wm{overflow:hidden; text-overflow:ellipsis}
@media(max-width:520px){
  :root{--gut:22px}
  .head-in{height:64px; gap:10px}
  .brand{gap:9px}
  .brand img{width:27px; height:27px}
  .brand .wm{font-size:15px}
  .head-right{gap:9px}
  
  .burger{width:34px; height:34px}
  .burger span,.burger span::before,.burger span::after{width:14px}
}
@media(max-width:360px){
  .brand .wm{font-size:13.5px}
  .brand img{width:24px; height:24px}
  
}

/* 3. Counting figures: hold their box so the row does not jump while they run */
.stat .v{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ============================================================
   v3.4 · premium pass
   Hierarchy carried by size, weight and tone rather than colour.
   ============================================================ */

/* page head breathes more, and the rule sits further from the text */
.page-head{padding-block:clamp(72px,10vw,120px) 0}
.page-head .under{margin-top:clamp(40px,5vw,56px)}
.hero{padding-block:clamp(96px,15vw,168px) clamp(52px,7vw,76px)}

/* statistics: value and unit are separate, so the row can never read as
   "1.87M, words delivered, 508" in plain text */
.stats{border-block:1px solid var(--line)}
.stat{padding:clamp(34px,4.4vw,48px) 18px}
.stat .v{display:flex; align-items:baseline; justify-content:center; gap:4px}
.stat .num{font-family:var(--serif); font-size:clamp(30px,3.9vw,40px); font-weight:500;
  color:var(--navy); line-height:1; font-variant-numeric:tabular-nums}
.stat .unit{font-family:var(--serif); font-size:clamp(15px,1.7vw,18px); font-weight:400;
  color:var(--gold-deep); line-height:1}
.stat .l{margin-top:12px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500}

/* institutional environments: restrained, factual, with discretion made explicit */
.trustline{padding-top:clamp(44px,6vw,64px); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.reflist{margin-top:20px; gap:12px 0; flex-direction:column; align-items:center}
.reflist li{font-family:var(--serif); font-size:17px; color:var(--navy); opacity:.82}
.reflist li+li::before{display:none}
.refnote{margin-top:26px; text-align:center; font-size:11.5px; line-height:1.65;
  color:var(--muted); opacity:.72; max-width:52ch; margin-inline:auto}

/* editorial testimonials: the quotation is large, the attribution is small */
.quotes{grid-template-columns:1fr; gap:clamp(44px,6vw,72px); max-width:var(--col) !important}
.quote{padding-left:0; border-left:0; text-align:left}
.quote .qmark{display:none}
.quote blockquote{font-family:var(--serif); font-size:clamp(21px,2.7vw,28px); line-height:1.38;
  font-weight:400; color:var(--navy); letter-spacing:-.01em}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{margin-top:20px; display:flex; flex-direction:column; gap:3px}
.quote .qn{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--navy)}
.quote .qr{font-size:11.5px; letter-spacing:.06em; color:var(--muted); opacity:.8}

/* technology: the tools sit quietly beneath the statement */
.toolline{margin-top:10px; font-size:12.5px; letter-spacing:.08em; color:var(--muted); opacity:.72}

/* tonal hierarchy for secondary prose */
.ditem p{color:var(--muted); opacity:.92}
.lead{color:var(--muted)}

@media(max-width:560px){
  .stat{padding:26px 10px}
  .quote blockquote{font-size:20px}
  .reflist li{font-size:15.5px}
}

/* consent line under the enquiry form */
.form-consent{grid-column:1/-1; font-size:12.5px; line-height:1.6; color:var(--muted); opacity:.85}
.form-consent+.form-consent{margin-top:2px}
/* cookie banner */
#cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; max-width:600px; margin:0 auto;
  background:var(--navy); color:var(--cream); border:1px solid rgba(176,141,87,.5); border-radius:4px;
  padding:18px 20px; font-size:13.5px; line-height:1.6; z-index:999;
  box-shadow:0 14px 40px rgba(21,36,63,.3); font-family:var(--sans)}
#cookie-banner p{margin:0 0 12px; color:#C8D0DC}
#cookie-banner a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
#cookie-banner .cb-actions{display:flex; gap:10px; justify-content:flex-end}
#cookie-banner button{font:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:999px;
  padding:8px 20px; border:1px solid transparent; letter-spacing:.02em}
#cookie-banner .cb-accept{background:var(--gold); color:var(--navy)}
#cookie-banner .cb-decline{background:transparent; color:var(--cream); border-color:rgba(247,243,236,.4)}
#cookie-banner .cb-accept:hover{background:#C29B63}
#cookie-banner .cb-decline:hover{border-color:var(--gold)}
/* comments placeholder shown while consent is withheld */
.cusdis-placeholder{font-size:14px; color:var(--muted); opacity:.8}

/* language switch: two letters divided by a gold hairline, no container */
.langsw{display:inline-flex; align-items:center; gap:0}
.langsw a{position:relative; font-size:11.5px; letter-spacing:.16em; font-weight:500;
  color:var(--muted); padding:4px 9px; line-height:1.4; transition:color .25s}
.langsw a+a::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:var(--gold); opacity:.5}
.langsw a:hover{color:var(--navy)}
.langsw a.on{color:var(--navy); font-weight:600}
.langsw a.on::after{content:""; position:absolute; left:9px; right:9px; bottom:0; height:1px; background:var(--gold)}

/* ============================================================
   v3.6 · homepage depth
   ============================================================ */
.hero-cta{display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,32px);
  flex-wrap:wrap; margin-top:clamp(30px,4vw,42px)}
.hero .sig{margin-top:clamp(34px,4.5vw,46px)}

/* what I translate */
.whatlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:var(--col)}
.whatlist li{padding:15px 0 15px 26px; border-bottom:1px solid var(--line); position:relative;
  font-family:var(--serif); font-size:17.5px; color:var(--navy); opacity:.88}
.whatlist li::before{content:""; position:absolute; left:0; top:26px; width:12px; height:1px; background:var(--gold)}

/* how an engagement runs */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,38px); max-width:var(--col-wide)}
.step{border-top:1px solid var(--line); padding-top:20px}
.step .sn{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--gold)}
.step h3{margin:8px 0 6px; font-size:18px}
.step p{font-size:15px; color:var(--muted)}

/* credentials line */
.credline{font-family:var(--serif); font-size:clamp(16.5px,1.9vw,19px); line-height:1.55;
  color:var(--navy); opacity:.86; max-width:var(--col)}

/* closing band */
.closeband{display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,44px);
  flex-wrap:wrap; background:var(--navy); color:var(--cream); border-radius:3px;
  padding:clamp(30px,4.4vw,46px) clamp(26px,4vw,44px); margin-top:var(--sec); max-width:var(--col-wide);
  margin-inline:auto}
.closeband h2{font-family:var(--serif); font-size:clamp(21px,2.7vw,27px); font-weight:500; color:var(--cream); line-height:1.25}
.closeband p{margin-top:8px; font-size:15px; color:#A9B5C6; max-width:52ch}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-gold:hover{background:#C29B63}

/* the four index rows sit under an eyebrow now */
.home-explore{padding-bottom:0}
.home-explore+.index{margin-top:0}

@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .closeband{flex-direction:column; align-items:flex-start}
}

/* inline form errors */
.ferr{display:block; margin-top:6px; font-size:12.5px; color:#9A3B3B}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#9A3B3B}

/* Accessibility: small gold text on light grounds uses the accessible token.
   Decorative gold hairlines and rules keep the exact brand gold. */
.eyebrow .lbl,
.stat .l,
.stat .unit,
.trustline,
.link,
.field label,
.quote .qn,
.foot-col h4,
.wtag,
.pmeta,
.pcat{color:var(--gold-text)}
.page-head .ico,.irow .ico,.ditem .ico,.dlist .ico{color:var(--gold-text)}
.toolline{color:var(--muted)}

/* inline arrow icons, replacing literal arrow characters the typefaces lack */
.ico-inline{width:1em; height:1em; display:inline-block; vertical-align:-0.12em; flex:none}