/* Brand v2.2 (October 2026): two greens, cool grey, 50% tints, black, white. No other shades.
   Pink appears only inside the supplied illustrations, never in type, buttons or backgrounds. */
@font-face{font-family:'LINE Seed JP';font-weight:800;font-display:swap;src:url(fonts/LINESeedJP-ExtraBold.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:500;font-display:swap;src:url(fonts/PlayfairDisplay-Medium.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:300;font-display:swap;src:url(fonts/Montserrat-Light.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url(fonts/Montserrat-Medium.woff2) format('woff2')}
:root{
  --white:#FFFFFF; --black:#000000;
  --deep:#07493A; --deep-50:#83A49D;
  --signal:#00A16E; --signal-50:#80D0B7;
  --grey:#B3CACF;
  --rule:var(--grey); --rule-dark:rgba(255,255,255,.22);
  --max:1200px; --wide:1440px; --gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.3,1);
  --hero-h1:clamp(32px,3.3vw,44px);   /* one hero heading size on every page */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;background:var(--white);color:var(--black);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
b,strong{font-weight:500}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* headings: LINE Seed JP ExtraBold, sentence case, full stops · subheadings: Playfair Display Medium, sentence case, upright · body: Montserrat Light · labels: Montserrat Medium, sentence case */
h1,h2{font-family:'LINE Seed JP',sans-serif;font-weight:800;letter-spacing:-.01em}
h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:0}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.08}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
.line{display:block}
.lede{font-size:clamp(17px,1.4vw,20px);max-width:34em;color:rgba(0,0,0,.78)}
.dark .lede{color:rgba(255,255,255,.8)}
.label{font-size:14px;font-weight:500;color:var(--deep);display:block}
.num{font-variant-numeric:tabular-nums}
.accent{color:var(--signal)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:.01em;padding:14px 26px;border-radius:4px;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--deep)}
.btn-ghost,.btn-line{border-color:var(--deep);color:var(--deep);background:transparent}
.btn-ghost:hover,.btn-line:hover{border-color:var(--signal);color:var(--signal)}
.dark .btn-ghost,.is-dark .btn-line,.dark .btn-line{border-color:var(--white);color:var(--white)}
.is-dark .btn-line:hover,.is-dark .btn-line:focus-visible,.dark .btn-line:hover{border-color:var(--signal);background:var(--signal);color:var(--white)}
.textlink{font-size:15px;font-weight:500;color:var(--deep);display:inline-flex;align-items:center;gap:8px;position:relative}
.textlink .arr{transition:transform .18s ease}
.textlink:hover .arr{transform:translateX(4px)}
.textlink::after{content:'';position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:var(--signal);transform:scaleX(.35);transform-origin:left;transition:transform .25s ease}
.textlink:hover::after{transform:scaleX(1)}
.dark .textlink{color:var(--signal-50)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav .logo img{height:20px;width:auto}
.nav ul{display:flex;gap:32px;list-style:none;align-items:center}
.nav ul a{font-weight:500;font-size:15px;position:relative;padding:4px 0}
.nav ul a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
.nav .btn{padding:10px 20px;font-size:14px}
@media (max-width:820px){.nav ul{display:none}}

/* page heroes: copy + illustration */
.hero .wrap,.page-hero .wrap{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(56px,7vw,100px)}
.hero h1{margin-bottom:26px}
.hero .lede{margin-bottom:40px}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.page-hero h1{font-size:var(--hero-h1);max-width:15em;margin-bottom:22px}
/* Meerkat's line breaks hold on wide screens; narrower screens may wrap within a line */
@media (min-width:1180px){.hero h1 .line,.page-hero h1 .line,h2.h2-fit .line{white-space:nowrap}}
.page-hero .lede{margin-bottom:8px}
.page-hero .cta-row{margin-top:34px}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:stretch}
.hero-split .art{position:relative;width:clamp(180px,24vw,320px)}
.hero-split .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top}
.hero-art-lg{align-items:center}
.hero-art-lg .art{width:clamp(220px,27vw,360px)}
.hero-art-lg .art img{position:static;height:auto}
.hero-art-sm .art{width:clamp(160px,18vw,240px)}
.hero .copy h1{font-size:var(--hero-h1);max-width:none}
@media (max-width:820px){.hide-art-sm .art{display:none}.hero-split{grid-template-columns:1fr}.hero-split .art{width:min(60vw,260px);height:auto;margin:0 auto}.hero-split .art img{position:static;height:auto}}
/* wide two-column intro (noma intel) */
.intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.intro-grid .lede{margin-top:.4em}
.intro-grid h1{max-width:none;margin-bottom:0}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr;gap:22px}}

/* sections */
section{position:relative}
.section-head{margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{max-width:18em;margin-bottom:18px}
.section-head .lede+.lede{margin-top:18px}
h2.h2-fit{font-size:clamp(28px,3vw,40px);max-width:none}

.pad{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
.on-grey{background:var(--grey)}
.on-grey .lede{color:var(--black)}
.dark{background:var(--deep);color:var(--white)}
.dark h2,.dark h3{color:#fff}
.reveal{opacity:0;transition:opacity .6s ease}
.reveal.in{opacity:1}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* scroll tone: white -> Dark Green -> white on one full-width layer.
   No JS / reduced motion: the .tone-dark block is solid Dark Green between white sections. */
.tone{background:var(--white)}
.tone-dark{background:var(--deep);color:var(--white)}
.tone-dark h2,.tone-dark h3{color:var(--white)}
.tone-dark .lede{color:rgba(255,255,255,.82)}
.js-tone .tone{background:color-mix(in srgb,var(--deep) calc(var(--t,0)*100%),var(--white))}
.js-tone .tone .tone-dark{background:transparent}
.js-tone .tone:not(.is-dark) .tone-dark{color:var(--black)}
.js-tone .tone:not(.is-dark) .tone-dark h2,.js-tone .tone:not(.is-dark) .tone-dark h3{color:var(--black)}
.js-tone .tone:not(.is-dark) .tone-dark .lede{color:var(--black)}
.js-tone .tone.is-dark,.js-tone .tone.is-dark h1,.js-tone .tone.is-dark h2,.js-tone .tone.is-dark h3,.js-tone .tone.is-dark .lede,.js-tone .tone.is-dark p{color:var(--white)}
.js-tone .tone.is-dark .hero .accent{color:var(--signal)}
.js-tone .tone.is-dark .hero .textlink{color:var(--white)}
.js-tone .tone.is-dark .stat p,.js-tone .tone.is-dark .stat .src{color:var(--black)}
.tone,.tone h1,.tone h2,.tone h3,.tone .lede,.tone p,.tone .textlink{transition:color .15s linear}
.is-dark .accent{color:var(--signal-50)}

/* home: introducing noma intel */
.noma-head{max-width:46em}
.noma-head .lede{margin-top:22px;max-width:40em}
.noma-head .lede+.lede{margin-top:18px}
.noma-after{margin-top:clamp(32px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.own{font-size:14.5px;display:flex;gap:12px;align-items:center;opacity:.9}
.own i{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}

/* expanding capability panels (desktop) / accordion (tablet, mobile) */
.xp{display:flex;margin-top:clamp(48px,5vw,64px);border-top:1px solid currentColor;border-bottom:1px solid currentColor;border-color:var(--rule)}
.tone-dark .xp,.is-dark .xp{border-color:var(--rule-dark)}
.xp-item{flex:1 1 0;min-width:0;border-left:1px solid var(--rule);transition:flex-grow .3s var(--ease);position:relative}
.tone-dark .xp-item,.is-dark .xp-item{border-color:var(--rule-dark)}
.xp-item:first-child{border-left:none}
.xp-item.open{flex-grow:2.6}
.xp-head{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:32px clamp(18px,2vw,30px) 14px;position:relative}
.xp-head:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.xp-head .label{color:inherit;opacity:.75;margin-bottom:10px;padding-left:18px;position:relative}
.xp-head .label::before{content:'';position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.xp-item.open .xp-head .label{opacity:1;color:var(--deep)}
.tone-dark .xp-item.open .xp-head .label,.is-dark .xp-item.open .xp-head .label{color:var(--signal-50)}
.xp-item.open .xp-head .label::before{background:var(--signal);border-color:var(--signal)}
.xp-head h3{font-size:clamp(20px,1.8vw,24px);line-height:1.25}
.xp-item:not(.open) .xp-head h3{opacity:.8}
.xp-item::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.xp-item.open::after{transform:scaleX(1)}
.xp-icon{display:none}
.xp-body{display:grid;grid-template-rows:1fr;padding:0 clamp(18px,2vw,30px) 32px}
.xp-body>div{overflow:hidden;min-height:0}
.xp-body p{font-size:16px;max-width:32em;opacity:1;transition:opacity .18s ease .14s}
.xp-item:not(.open) .xp-body p{opacity:0;visibility:hidden;transition:opacity .1s ease,visibility 0s linear .1s}
@media (min-width:901px){.xp-item:not(.open) .xp-body{height:0;padding-bottom:0}}
@media (max-width:900px){
  .xp{flex-direction:column;border-bottom:none}
  .xp-item{border-left:none;border-bottom:1px solid var(--rule)}
  .tone-dark .xp-item,.is-dark .xp-item{border-color:var(--rule-dark)}
  .xp-item::after{display:none}
  .xp-head{padding:22px 44px 22px 0}
  .xp-icon{display:block;position:absolute;right:4px;top:50%;width:16px;height:16px;margin-top:-8px}
  .xp-icon::before,.xp-icon::after{content:'';position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
  .xp-icon::after{transform:rotate(90deg)}
  .xp-item.open .xp-icon::after{transform:rotate(0)}
  .xp-body{padding:0;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
  .xp-item.open .xp-body{grid-template-rows:1fr}
  .xp-body p{padding-bottom:24px}
}

/* home: the new reality */
.reality-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,72px);align-items:stretch;margin-bottom:clamp(48px,6vw,72px)}
.reality-grid .section-head{margin-bottom:0}
.reality-grid .art{position:relative;min-height:240px}
.reality-grid .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
@media (max-width:900px){.reality-grid{grid-template-columns:1fr}.reality-grid .art{min-height:0}.reality-grid .art img{position:static;max-width:420px;margin:0 auto}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.stat{background:var(--signal-50);border-radius:4px;padding:clamp(28px,3vw,40px)}
.stat .big{font-family:'LINE Seed JP',sans-serif;font-size:clamp(48px,5vw,68px);font-weight:800;line-height:1;color:var(--deep);margin-bottom:16px}
.stat .big sup{font-size:.45em;font-weight:800}
.stat p{font-size:15px;line-height:1.55;color:var(--black)}
.stat .src{display:block;margin-top:12px;font-size:13px;color:var(--black);font-weight:500}
.stat a.src{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--deep)}
.stat a.src:hover{color:var(--deep)}
@media (max-width:820px){.stats{grid-template-columns:1fr}}

/* placeholders for screenshots still to come */
.shot{border:1px solid var(--grey);background:var(--white);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--deep);font-size:14px;font-weight:500;line-height:1.5;min-height:280px}
.shot span{max-width:22em}
.shot small{display:block;font-weight:300;color:rgba(0,0,0,.6);margin-top:6px;font-size:13px}
.is-dark .shot{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white)}
.is-dark .shot small{color:rgba(255,255,255,.75)}

/* noma intel page */
.bleed{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.bleed img{width:100%;height:auto}
.bleed-full{padding-top:clamp(8px,1.5vw,24px)}
.page-hero:has(+ .bleed-full) .wrap{padding-bottom:clamp(24px,3vw,48px)}
.groups{padding-bottom:clamp(72px,9vw,120px)}
.groups .section-head{margin-bottom:clamp(96px,10vw,140px)}
.group{display:grid;gap:clamp(40px,6vw,96px);align-items:start}
.group-one{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.group-two{grid-template-columns:minmax(0,6fr) minmax(0,5fr);margin-top:clamp(144px,13vw,192px)}
.group-two .visual{order:-1;position:sticky;top:112px}
.group .visual{align-self:stretch;display:flex;flex-direction:column;gap:28px}
.group-one .visual .shot{flex:1}
.group-two .visual .shot{min-height:420px}
.capblock+.capblock{margin-top:clamp(64px,6vw,80px)}
.capblock .label{margin-bottom:12px}
.capblock h3{font-size:clamp(24px,2.3vw,30px);line-height:1.2;margin-bottom:16px}
.capblock p{font-size:16px;color:rgba(0,0,0,.78);max-width:34em;margin-bottom:14px}
.capblock .textlink{margin-top:8px}
.capblock.lead h3{font-size:clamp(28px,2.8vw,36px)}
@media (max-width:900px){
  .group-one,.group-two{grid-template-columns:1fr}
  .group-two .visual{order:0;position:static}
  .group .visual .shot{min-height:240px}
}

/* services: full-width progress steps (Meerkat feedback 23 Oct 2026).
   One track per step, joined edge to edge so they read as one line. Fill comes from the same
   scroll source as the tone layer. No JS / reduced motion: track shows complete, blocks are solid. */
.ps{list-style:none}
.ps-step{position:relative}
.ps-in{position:relative;padding-top:clamp(40px,4vw,56px);padding-bottom:clamp(40px,4vw,56px);padding-left:calc(var(--gutter) + clamp(32px,6vw,96px))}
.ps-track{position:absolute;left:var(--gutter);top:0;bottom:0;width:3px;background:var(--grey)}
.ps-step:first-child .ps-track{top:clamp(46px,4.4vw,62px)}
.ps-step:last-child .ps-track{bottom:clamp(40px,4vw,56px)}
.ps-track i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,1)*100%);background:var(--signal)}
.ps-title{font-family:'LINE Seed JP',sans-serif;font-weight:800;font-size:clamp(34px,4.2vw,56px);line-height:1.05;letter-spacing:-.01em;color:var(--deep);margin-bottom:18px}
.ps-sub{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(24px,2.1vw,28px);line-height:1.3;color:var(--deep);margin-bottom:14px}
.ps-body{font-size:17px;max-width:60em;color:var(--black)}
.ps-step.big .ps-in{min-height:85vh;min-height:85svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,10vw,144px);padding-bottom:clamp(96px,10vw,144px)}
.ps-step.tone-dark .ps-title,.ps-step.tone-dark .ps-sub,.ps-step.tone-dark .ps-body{color:var(--white)}
.ps-step.tone-dark .ps-track{background:rgba(255,255,255,.28)}
.ps-title,.ps-sub,.ps-body{transition:color .15s linear}
/* JS: one interpolated layer; colours follow its contrast thresholds, not the step */
.js-tone .steps .ps-title,.js-tone .steps .ps-sub{color:var(--deep)}
.js-tone .steps .ps-body{color:var(--black)}
.js-tone .steps.is-dark-h .ps-title,.js-tone .steps.is-dark-h .ps-sub{color:var(--white)}
.js-tone .steps.is-dark .ps-body{color:var(--white)}
.js-tone .steps:not(.is-mid) .ps-step.active .ps-title{color:var(--signal)}
.js-tone .steps .ps-track{background:color-mix(in srgb,rgba(255,255,255,.28) calc(var(--t,0)*100%),var(--grey))}

/* trust row (home, what we do) */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px;padding-top:36px;border-top:1px solid var(--rule)}
.trust h3{font-size:20px;margin-bottom:8px}
.trust p{font-size:15px;line-height:1.6;color:rgba(0,0,0,.72)}
@media (max-width:820px){.trust{grid-template-columns:1fr;gap:24px}}

/* prose (privacy policy, terms, methodology) */
.prose{max-width:46em}
.prose h2{font-size:clamp(24px,2.4vw,30px);margin:44px 0 14px}
.prose p{margin-bottom:16px;font-size:16.5px;color:rgba(0,0,0,.82)}
.prose h3{font-size:clamp(18px,1.7vw,21px);margin:30px 0 10px}
.prose ol,.prose ul{margin:0 0 16px 20px;font-size:16.5px;color:rgba(0,0,0,.82)}
.prose li{margin-bottom:10px;padding-left:4px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px}
.prose th,.prose td{border:1px solid var(--rule);padding:14px 16px;text-align:left;vertical-align:top;font-size:15.5px;color:rgba(0,0,0,.82)}
.prose th{width:150px;font-weight:500;color:var(--black);background:rgba(0,0,0,.03)}
.faq h2:first-child{margin-top:0}
.prose .updated{font-size:13.5px;color:rgba(0,0,0,.55);margin-top:36px}
.prose .draft{border-left:2px solid var(--signal);padding:14px 18px;background:#fff;font-size:14.5px;color:var(--deep);margin-bottom:28px}

/* blog article pages */
.article-byline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:500;color:rgba(0,0,0,.6);margin-bottom:8px}
.article-byline .src{color:var(--deep)}
.attribution{margin-top:44px;padding:22px 26px;border:1px solid var(--rule);border-radius:4px;background:#fff;font-size:14.5px;color:rgba(0,0,0,.72)}
.attribution strong{color:var(--black)}
.back-link{display:inline-block;margin-bottom:28px}

.deliver .card .glyph{width:34px;height:34px;margin-bottom:14px}
.glyph{width:40px;height:40px;color:var(--black)}
.glyph svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square}
.glyph .acc{stroke:var(--signal)}
.glyph .accf{fill:var(--signal);stroke:none}

/* capability list on dark (services) */
.cap-list{display:flex;flex-direction:column}
.cap{border-top:1px solid var(--rule-dark);padding:26px 0 26px 30px;position:relative}
.cap:last-child{border-bottom:1px solid var(--rule-dark)}
.cap::before{content:'';position:absolute;left:0;top:34px;width:10px;height:10px;border-radius:50%;background:var(--signal)}
.cap .label{color:var(--signal-50);margin-bottom:8px}
.cap h3{font-size:21px;margin-bottom:8px;color:#fff}
.cap p{font-size:15.5px;color:rgba(255,255,255,.8);max-width:36em}

/* deliver grid (seer) */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.deliver .card{border:1px solid var(--rule);border-radius:4px;background:#fff;padding:clamp(26px,2.6vw,36px)}
.deliver .card h3{font-size:20px;margin-bottom:10px}
.deliver .card p{font-size:14.5px;color:rgba(0,0,0,.72)}
@media (max-width:720px){.deliver{grid-template-columns:1fr}}
.strip{margin-top:28px;background:var(--deep);color:var(--white);border-radius:4px;padding:clamp(26px,3vw,40px);display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.strip h3{color:#fff;font-size:20px;margin-bottom:8px}
.strip p{font-size:15px;color:rgba(255,255,255,.8);max-width:52em}
.strip i{width:10px;height:10px;border-radius:50%;background:var(--signal);flex:none;margin-top:8px;font-style:normal}

/* team carousel */
.carousel{position:relative;outline:none}
.carousel:focus-visible .viewport{outline:2px solid var(--signal);outline-offset:6px}
.carousel .viewport{overflow:hidden;touch-action:pan-y}
.carousel .track{display:flex;gap:28px;transition:transform .35s var(--ease);will-change:transform}
.carousel.dragging .track{transition:none}
.person{flex:0 0 min(400px,78%);border:1px solid var(--grey);border-radius:4px;background:#fff;display:flex;flex-direction:column;cursor:pointer;transition:opacity .3s ease;user-select:none}
.person.active{cursor:default}
.person:not(.active){opacity:.55}
.person .photo{aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--grey)}
.person .photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;pointer-events:none}
.person .info{padding:24px 26px 28px;min-height:250px}
.person h3{font-family:'LINE Seed JP',sans-serif;font-weight:800;font-size:22px;line-height:1.2}
.person .role{font-size:14px;font-weight:500;color:var(--deep);margin:6px 0 14px}
.person .bio{font-size:15px;line-height:1.65;color:var(--black)}
.person:not(.active) .bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.person.active{border-color:var(--deep)}
.carousel .controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:32px}
.carousel .controls button{width:48px;height:48px;border-radius:50%;border:1px solid var(--deep);background:#fff;color:var(--deep);font:inherit;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease,border-color .18s ease}
.carousel .controls button:hover,.carousel .controls button:focus-visible{background:var(--signal);border-color:var(--signal);color:#fff}
.carousel .controls button:disabled{opacity:.35;cursor:default;background:#fff;color:var(--deep);border-color:var(--deep)}
.carousel .pips{display:flex;gap:8px}
.carousel .pips i{width:8px;height:8px;border-radius:50%;background:var(--grey)}
.carousel .pips i.on{background:var(--signal)}
@media (max-width:620px){.person{flex-basis:86%}.person .info{min-height:0}}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{border:1px solid var(--rule);border-radius:4px;background:#fff;padding:28px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease;position:relative}
.post:hover{border-color:var(--deep)}
.post::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.post:hover::after{transform:scaleX(1)}
.post .meta{font-size:13px;font-weight:500;color:rgba(0,0,0,.6)}
.post .meta b{color:var(--deep)}
.post h3{font-size:20px;line-height:1.3}
.post p{font-size:14px;line-height:1.6;color:rgba(0,0,0,.72)}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
form.mock{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:clamp(26px,3vw,40px)}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:500;color:var(--deep);margin-bottom:8px}
.field input,.field textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--rule);border-radius:4px;background:var(--white);color:var(--black)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
.field textarea{min-height:140px;resize:vertical}
.info-card{border:1px solid var(--rule);border-radius:4px;background:#fff;padding:24px 28px;margin-bottom:20px}
.info-card h3{font-size:19px;margin-bottom:8px}
.info-card p{font-size:15px;color:rgba(0,0,0,.8);line-height:1.6}
.info-card a{color:var(--deep);font-weight:500}
.info-card a:hover{color:var(--signal)}
.quick{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px}

/* closing cta */
.closing{background:var(--deep);color:var(--white);text-align:center;overflow:hidden;position:relative}
.closing .wrap{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px);position:relative;z-index:2}
.closing h2{color:#fff;max-width:15em;margin:0 auto 20px}
.closing p{color:rgba(255,255,255,.8);max-width:32em;margin:0 auto 40px}
.closing .aline{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14}
.closing .aline svg{position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);height:120%;width:auto}

/* footer */
footer{background:var(--black);color:var(--white)}
.legal a:hover{color:var(--signal-50)}
.foot{display:grid;grid-template-columns:2fr 1.3fr 1fr 1.4fr;gap:40px;padding:clamp(56px,7vw,88px) 0 56px}
.foot .logo img{height:18px;width:auto;margin-bottom:20px}
.foot p{font-size:14px;color:rgba(255,255,255,.65);max-width:24em;line-height:1.6}
.foot h4{font-size:14px;font-weight:500;color:var(--signal-50);margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14.5px;color:rgba(255,255,255,.8)}
.foot ul a:hover{color:var(--signal-50)}
.foot address{font-style:normal;font-size:14px;color:rgba(255,255,255,.65);line-height:1.7;margin-top:14px}
.legal{border-top:1px solid rgba(255,255,255,.18);padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.55)}
.legal nav{display:flex;gap:18px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1}
  html{scroll-behavior:auto}
}

/* tone: no-JS / reduced-motion dark defaults, and their light-state overrides while the colour is still white */
.tone-dark .label,.tone-dark .xp-item.open .xp-head .label{color:var(--signal-50)}
.tone-dark .xp-head .label{color:inherit}
.tone-dark .btn-line{border-color:var(--white);color:var(--white)}
.tone-dark .btn-line:hover,.tone-dark .btn-line:focus-visible{border-color:var(--signal);background:var(--signal);color:var(--white)}
.js-tone .tone:not(.is-dark) .tone-dark .label,.js-tone .tone:not(.is-dark) .tone-dark .xp-item.open .xp-head .label{color:var(--deep)}
.js-tone .tone:not(.is-dark) .tone-dark .xp-head .label{color:inherit}
.js-tone .tone:not(.is-dark) .tone-dark .xp,.js-tone .tone:not(.is-dark) .tone-dark .xp-item{border-color:var(--rule)}
.js-tone .tone:not(.is-dark) .tone-dark .btn-line{border-color:var(--deep);color:var(--deep)}
.js-tone .tone:not(.is-dark) .tone-dark .btn-line:hover{border-color:var(--signal);background:transparent;color:var(--signal)}