/* "Quiet Studio" — the whole site runs on this one stylesheet.
   Two deliberate departures from the design handoff, both noted inline:
   1. --mut / --faint are darker than the handoff values so text passes WCAG AA on this background.
   2. The nav wraps on small screens instead of disappearing (the handoff had no mobile nav). */

:root{
  --bg:#E7EBE8;      /* porcelain mist */
  --card:#F1F4F2;    /* card surface; also text-on-accent */
  --ink:#242E2A;     /* deep slate-green */
  --mut:#5E6B65;     /* secondary text — darkened from #64716B for 4.6:1 contrast */
  --faint:#5C6862;   /* index numerals — darkened from #93A099 to clear 4.5:1; hierarchy comes from size, not lightness */
  --line:#CFD8D2;
  --acc:#2E6B57;     /* eucalyptus */
  --acc2:#8A6244;    /* warm brown — units on big numerals only */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:'Albert Sans',system-ui,sans-serif;color:var(--ink);font-weight:400;-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:var(--card)}
a{color:var(--acc);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
a:hover{color:var(--ink)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 40px}
.cap{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--mut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:40px;top:12px;position:fixed;z-index:99;background:var(--ink);color:var(--card);padding:10px 16px;border-radius:100px;font-size:13px}

/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:30px 0;gap:16px;flex-wrap:wrap}
nav .brand{font-family:'Marcellus',serif;font-size:19px;letter-spacing:.02em;color:var(--ink)}
nav .links{display:flex;gap:28px;flex-wrap:wrap}
nav .links a{font-size:13px;letter-spacing:.04em;color:var(--mut)}
nav .links a:hover{color:var(--ink)}
nav .links a.on{color:var(--ink);border-bottom:1px solid var(--acc);padding-bottom:3px}

/* hero */
.hero{padding:110px 0 84px}
.hero .cap{color:var(--acc)}
h1{margin:26px 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:clamp(48px,7.4vw,86px);line-height:1.04;letter-spacing:.005em}
.hero p{margin:32px 0 0;max-width:58ch;font-size:19px;line-height:1.7;font-weight:300;color:var(--mut)}
.hero p strong{font-weight:500;color:var(--ink)}
.hero.sub{padding:76px 0 58px}
.hero.sub h1{font-size:clamp(40px,5.8vw,66px)}
.hero.sub p{font-size:17px}
.hero .row{margin-top:44px;display:flex;gap:36px;flex-wrap:wrap;align-items:center}
.hero .row .fact{font-size:13px;letter-spacing:.06em;color:var(--mut)}
.hero .row .fact b{display:block;font-weight:500;color:var(--ink);font-size:15px;letter-spacing:0;margin-bottom:2px}
.hero .row .actions{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Portrait — same card treatment as everything else; slight desaturation
   pulls the photo's warmth toward the cooler palette. */
.portrait{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;filter:saturate(.92)}
.herogrid{display:grid;grid-template-columns:1fr 260px;gap:56px;align-items:start}
.herogrid .portrait{margin-top:6px}

.btn{display:inline-block;background:var(--ink);color:var(--card);padding:13px 22px;border-radius:100px;font-size:13.5px;letter-spacing:.03em;border:1px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--acc);border-color:var(--acc);color:var(--card)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--acc);border-color:var(--acc);color:var(--card)}

.divide{border:none;border-top:1px solid var(--line);margin:0}
section{padding:72px 0}
.shead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:42px;gap:20px;flex-wrap:wrap}
.shead h2{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:31px;letter-spacing:.005em}
footer{padding:26px 0 56px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;color:var(--mut);border-top:1px solid var(--line)}

/* CV download — a dropdown with no JavaScript, built on <details> */
.cvdl{position:relative;display:inline-block}
.cvdl>summary{list-style:none;display:inline-block;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:13px 22px;border-radius:100px;font-size:13.5px;letter-spacing:.03em;cursor:pointer}
.cvdl>summary::-webkit-details-marker{display:none}
.cvdl>summary::after{content:" ↓";font-size:11px}
.cvdl[open]>summary::after{content:" ↑"}
.cvdl>summary:hover{background:var(--acc);border-color:var(--acc);color:var(--card)}
.cvmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:264px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(36,46,42,.13)}
.cvmenu a{display:block;padding:14px 18px;color:var(--ink);border-bottom:1px solid var(--line)}
.cvmenu a:last-child{border-bottom:none}
.cvmenu a:hover{background:var(--bg)}
.cvmenu .lbl{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--acc)}
.cvmenu .sub{margin-top:3px;font-size:12.5px;font-weight:300;color:var(--mut)}
.cvmenu.right{left:auto;right:0}

/* stats (home) */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px}
.stat .n{font-family:'Marcellus',serif;font-size:52px;line-height:1;color:var(--acc)}
.stat .n small{font-size:28px;color:var(--acc2)}
.stat .t{margin-top:12px;font-size:13.5px;font-weight:500;letter-spacing:.02em}
.stat .s{margin-top:5px;font-size:13px;font-weight:300;color:var(--mut);line-height:1.55}

/* pipeline (home) */
.pipe{display:grid;grid-template-columns:1fr auto 1.5fr auto 1fr;align-items:stretch}
.pipe .stage{padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:flex;flex-direction:column;justify-content:center}
.pipe .stage-engine{background:var(--acc);border:1.5px solid var(--acc);color:var(--card)}
.pipe .stage-engine .cap{color:rgba(241,244,242,.75)}
.pipe .arrow{display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:22px;padding:0 14px}
.pipe .stage .cap{margin-bottom:14px;display:block}
.pipe .stage-io .txt{font-family:'Marcellus',serif;font-size:20px;line-height:1.42}
.pipe .stage-io .txt i{font-style:normal;color:var(--acc)}
.pipe .stage-engine ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.pipe .stage-engine li{font-size:13.5px;font-weight:300;color:rgba(241,244,242,.92);padding-left:15px;position:relative}
.pipe .stage-engine li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--card);opacity:.7}
.pipe .more{display:inline-block;align-self:flex-start;margin-top:18px;font-size:13px;letter-spacing:.04em}
.pipe .stage-engine .more{color:var(--card);border-bottom:1px solid rgba(241,244,242,.5);padding-bottom:2px}
.pipe .stage-engine .more:hover{border-bottom-color:var(--card)}

/* index rows (home) */
.idx a{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:baseline;padding:22px 6px;border-bottom:1px solid var(--line);color:var(--ink)}
.idx a:first-of-type{border-top:1px solid var(--line)}
.idx .no{font-size:12px;letter-spacing:.14em;color:var(--faint)}
.idx h3{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:24px}
.idx p{margin:4px 0 0;font-size:13.5px;font-weight:300;color:var(--mut)}
.idx .go{font-size:13px;color:var(--acc);letter-spacing:.04em}
.idx a:hover{background:var(--card)}
.footnote{margin-top:38px;padding:14px 18px;border:1px dashed var(--line);border-radius:14px;font-size:12px;letter-spacing:.04em;font-weight:300;line-height:1.6;color:var(--mut);text-align:right}

/* about */
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.pull{font-family:'Marcellus',serif;font-size:clamp(28px,3.6vw,40px);line-height:1.35;max-width:26ch;margin:0}
.pull i{font-style:normal;color:var(--acc)}
.beat{padding:28px 0;border-bottom:1px solid var(--line)}
.beat:last-of-type{border-bottom:none}
.beat .cap{color:var(--acc)}
.beat h3{margin:12px 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:24px;line-height:1.3}
.beat p{margin:12px 0 0;font-size:15px;font-weight:300;line-height:1.65;color:var(--mut);max-width:60ch}
.spec{position:sticky;top:32px}
.speclist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.speclist>div{padding:16px 20px;border-bottom:1px solid var(--line)}
.speclist>div:last-child{border-bottom:none}
.speclist .v{margin-top:4px;font-family:'Marcellus',serif;font-size:17px}
.aside-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;font-weight:300;line-height:1.65;color:var(--mut)}

/* metrics */
.metric{display:grid;grid-template-columns:210px 1fr;gap:40px;padding:38px 0;border-bottom:1px solid var(--line)}
.metric:first-of-type{border-top:1px solid var(--line)}
.mnum{font-family:'Marcellus',serif;font-size:68px;line-height:1;color:var(--acc)}
.mnum small{font-size:34px;color:var(--acc2)}
.metric .cap{color:var(--acc)}
.metric .lede{margin:8px 0 0;font-size:16px;font-weight:300;line-height:1.6;max-width:56ch;color:var(--mut)}
details.case{margin-top:16px}
details.case summary{list-style:none;cursor:pointer;display:inline-block;font-size:13px;letter-spacing:.04em;color:var(--acc)}
details.case summary::-webkit-details-marker{display:none}
details.case summary::after{content:" ↓"}
details.case[open] summary::after{content:" ↑"}
details.case summary:hover{color:var(--ink)}
.star{margin:20px 0 0;display:grid;grid-template-columns:110px 1fr;gap:14px 26px}
.star dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--acc);padding-top:2px}
.star dd{margin:0;font-size:14px;font-weight:300;line-height:1.65;color:var(--mut)}
.quote{text-align:center;padding:10px 0 40px}
.quote .q{font-family:'Marcellus',serif;font-size:26px;line-height:1.5;max-width:34ch;margin:0 auto}
.quote .who{margin-top:16px}
/* Bottom "next page" control — same position on every page, clear of the footer rule. */
.nextnav{text-align:center;padding:8px 0 72px}

/* record */
.role{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:44px 0;border-bottom:1px solid var(--line)}
.role:first-of-type{border-top:1px solid var(--line)}
.role .date{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--acc)}
.role .org{margin-top:10px;font-family:'Marcellus',serif;font-size:21px;line-height:1.3}
.role .sector{margin-top:4px;font-size:13px;font-weight:300;color:var(--mut)}
.role .count{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.role h3{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:27px;line-height:1.25}
.role .rlede{margin:12px 0 0;font-size:15px;font-weight:300;line-height:1.65;color:var(--mut);max-width:62ch}
.pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pts li{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--mut);padding-left:18px;position:relative}
.pts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.55}
.subrole{margin-top:28px;border-left:2px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:24px}
.subrole .sdate{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500}
.subrole h4{margin:4px 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:19px}

/* capability */
.ainative{background:var(--acc);color:var(--card);border-radius:16px;padding:36px 40px;margin-bottom:30px}
.ainative .cap{color:rgba(241,244,242,.75)}
.ainative .lead{margin:12px 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.2;max-width:24ch}
.ainative .desc{margin:14px 0 0;font-size:14.5px;font-weight:300;line-height:1.65;color:rgba(241,244,242,.9);max-width:60ch}
.ainative .aipills{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.ainative .aipills span{border:1px solid rgba(241,244,242,.45);border-radius:100px;padding:6px 14px;font-size:12px;font-weight:300}
.capgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.capcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px}
.capcard .caphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.capcard .caphead .cap{color:var(--acc)}
.capcard h3{margin:12px 0 0;font-family:'Marcellus',serif;font-weight:400;font-size:23px}
.capcard p{margin:10px 0 0;font-size:14px;font-weight:300;line-height:1.65;color:var(--mut)}

/* reach */
.region{display:grid;grid-template-columns:56px 1fr 190px;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.region:first-of-type{border-top:1px solid var(--line)}
.region .no{font-size:12px;letter-spacing:.14em;color:var(--faint)}
.region h3{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:25px}
.region p{margin:8px 0 0;font-size:14px;font-weight:300;line-height:1.6;color:var(--mut);max-width:60ch}
.region .meta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
.region .mk{font-size:12px;letter-spacing:.1em;color:var(--mut)}
.rexp{margin:14px 0 0;display:grid;grid-template-columns:130px 1fr;gap:10px 22px}
.rexp dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--acc);padding-top:3px}
.rexp dd{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--mut)}
.dots{display:inline-flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--acc);display:inline-block}
.dots i.f{background:var(--acc)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{border:1px solid var(--line);background:var(--card);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:300}
.twocol{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.lrow:last-of-type{border-bottom:none}
.lrow .nm{font-family:'Marcellus',serif;font-size:18px}
.lrow .lv{font-size:11px;letter-spacing:.16em;color:var(--mut)}

/* contact */
.channels{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start}
.chcol{display:flex;flex-direction:column;gap:14px}
.bigcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;color:var(--ink)}
a.bigcard:hover{border-color:var(--acc);color:var(--ink)}
.bigcard .cap{color:var(--acc)}
.bigcard .val{margin-top:14px;font-family:'Marcellus',serif;font-size:clamp(22px,3vw,32px);line-height:1.25;word-break:break-word}
.bigcard .sub{margin-top:12px;font-size:13px;font-weight:300;color:var(--mut)}
.smallcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.smallcard .cap{color:var(--acc)}
.kv{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.kv li{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:13.5px;line-height:1.5}
.kv .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--mut);padding-top:2px}

@media (max-width:880px){
  .wrap{padding:0 22px}
  /* The handoff hid the nav below this width with no replacement; wrapping keeps it reachable. */
  nav{padding:22px 0 18px;gap:10px}
  nav .brand{font-size:17px}
  nav .links{gap:16px 18px;width:100%}
  nav .links a{font-size:12.5px}
  .hero{padding:44px 0 48px}
  .hero p{font-size:17px;margin-top:24px}
  .hero .row{margin-top:32px;gap:22px}
  .hero .row .actions{margin-left:0;width:100%}
  .herogrid{grid-template-columns:1fr;gap:26px}
  .herogrid .portrait{max-width:190px}
  .hero.sub{padding:36px 0 40px}
  .hero.sub p{font-size:16px}
  section{padding:48px 0}
  .shead{margin-bottom:28px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:20px}
  .stat .n{font-size:42px}
  .pipe{grid-template-columns:1fr}
  .pipe .arrow{transform:rotate(90deg);padding:10px 0}
  .split,.twocol,.channels{grid-template-columns:1fr;gap:32px}
  .spec{position:static}
  .metric{grid-template-columns:1fr;gap:14px;padding:30px 0}
  .mnum{font-size:56px}
  .role{grid-template-columns:1fr;gap:20px;padding:32px 0}
  .capgrid{grid-template-columns:1fr}
  .ainative{padding:26px 24px}
  .region{grid-template-columns:40px 1fr;gap:0 18px}
  .region .meta{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:12px}
  .star,.rexp{grid-template-columns:1fr;gap:4px}
  .star dd,.rexp dd{margin-bottom:10px}
  .footnote{text-align:left}
  /* Anchor the menu to the row rather than the button, so it cannot run off-screen. */
  .cvdl{display:block;width:100%}
  .cvmenu,.cvmenu.right{left:0;right:0;min-width:0}
  .quote .q{font-size:22px}
}