/* Octelion design system. Tokens first, then base, then components. Pages add only small page-specific styles. */
:root{
  --deep:#06182A; --deep-2:#0B2238; --navy:#003050; --ink:#0F2033;
  --paper:#F4F8F9; --white:#FFFFFF; --teal:#10B0A0; --teal-2:#7FE3D6; --teal-ink:#0A7A6F; --teal-soft:#DDF4F1;
  --mist:#AACDD7; --mute:#4E6478; --rule:#D3DEE4; --line:#1E3D58; --grid:#12304A;
  --gold:#E2B449; --red:#F06A58; --bronze:#C98A4B; --silver:#9AA9B5;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Figtree',system-ui,sans-serif;
  --max:1240px; --gutter:28px; --radius:10px; --focus:0 0 0 3px var(--paper),0 0 0 6px var(--navy);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
.dark a,.masthead a,.contact-band a{color:var(--teal-2)}
.dark .btn,.masthead .btn,.contact-band .btn{color:var(--deep)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
.dark :focus-visible,.masthead :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.contact-band :focus-visible{box-shadow:0 0 0 3px var(--deep),0 0 0 6px var(--teal-2)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,72px);line-height:1}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.01em}
h4{font-size:19px;font-weight:600;letter-spacing:0}
p{margin:0 0 1em}
.lead{font-size:clamp(18px,1.5vw,21px);max-width:58ch;color:var(--mute)}
.masthead .lead,.dark .lead{color:var(--mist)}
.small{font-size:14px}
.mute{color:var(--mute)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--teal-2);color:var(--deep);padding:10px 14px;border-radius:8px;font-weight:700;z-index:50}
.skip:focus{top:12px}

/* Header */
.site-header{background:var(--deep);color:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:50%;background:#fff}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{color:var(--mist);text-decoration:none;font-weight:400;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}
.site-nav a.btn{color:var(--deep)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:44px;height:40px;padding:10px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:#fff;margin:6px 0;transition:transform .2s}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:16px;line-height:1;background:var(--teal);color:var(--deep);border:1.5px solid var(--teal);cursor:pointer}
.btn:hover{background:var(--teal-2);border-color:var(--teal-2)}
.btn.alt{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.alt:hover{background:var(--navy);color:#fff}
.dark .btn.alt,.masthead .btn.alt{color:#fff;border-color:var(--line)}
.dark .btn.alt:hover,.masthead .btn.alt:hover{background:var(--deep-2);border-color:var(--mist)}
.btn.small{padding:9px 14px;font-size:14px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Masthead (dark gridded page opener) */
.masthead{background:var(--deep);color:#fff;padding:72px 0 64px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;background-position:center top;border-bottom:1px solid var(--line)}
.masthead h1{max-width:18ch}
.masthead .lead{max-width:56ch}
.masthead .crumb{color:var(--mist);font-size:14px;margin-bottom:18px}
.masthead .crumb a{color:var(--mist)}

/* Sections */
section{padding:88px 0}
section.tight{padding:56px 0}
section.dark{background:var(--deep);color:#fff}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:var(--mist)}
section.white{background:var(--white)}
section + section{border-top:1px solid var(--rule)}
section.dark + section,section + section.dark{border-top:0}
.section-head{max-width:64ch;margin-bottom:44px}
.section-head h2{margin-bottom:12px}
.section-head p{margin:0}

/* Editorial rows */
.row > *{min-width:0}
.row{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--rule)}
.row:last-child{border-bottom:1px solid var(--rule)}
.row.flip > :first-child{order:2}
.row h3{font-size:clamp(24px,2.6vw,32px);font-weight:600}
.row p{color:var(--mute)}
.row p:last-child{margin-bottom:0}
.dark .row{border-color:var(--line)}
.dark .row p{color:var(--mist)}

/* Columns with top rules */
.cols-3,.cols-2{display:grid;gap:30px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3 > div,.cols-2 > div{border-top:1px solid var(--rule);padding-top:18px}
.dark .cols-3 > div,.dark .cols-2 > div{border-color:var(--line)}
.cols-3 h3,.cols-2 h3{margin-bottom:8px;font-size:clamp(19px,1.7vw,22px)}
.cols-3 p,.cols-2 p{color:var(--mute);font-size:16px}
.dark .cols-3 p,.dark .cols-2 p{color:var(--mist)}
.cols-3 ul,.cols-2 ul{margin:0;padding-left:18px;font-size:16px}
.cols-3 li,.cols-2 li{margin:4px 0}

/* Panels */
.panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.panel.dark{background:var(--deep-2);border-color:var(--line);color:#fff}
.panel h4{margin-bottom:6px}

/* Process steps (the only numbered list on the site) */
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:0}
.steps li{counter-increment:step;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(step);font-family:var(--display);font-weight:700;font-size:34px;color:var(--teal-ink);line-height:1}
.steps h3{margin-bottom:6px}
.steps p{color:var(--mute);margin:0}
.dark .steps li{border-color:var(--line)}
.dark .steps li::before{color:var(--teal-2)}
.dark .steps p{color:var(--mist)}

/* Ledger: term on the left, description on the right */
.ledger{display:grid;grid-template-columns:minmax(150px,.38fr) 1fr;margin:0}
.ledger dt,.ledger dd{padding:16px 0;border-top:1px solid var(--rule);margin:0}
.ledger dt{font-family:var(--display);font-weight:600;font-size:19px;padding-right:20px}
.ledger dd{color:var(--mute)}
.ledger dt:nth-last-of-type(1),.ledger dd:last-child{border-bottom:1px solid var(--rule)}
.dark .ledger dt,.dark .ledger dd{border-color:var(--line)}.dark .ledger dd{color:var(--mist)}
@media (max-width:600px){.ledger{grid-template-columns:1fr}.ledger dd{border-top:0;padding-top:0}.ledger dt:nth-last-of-type(1){border-bottom:0}}

/* Contact band: identical on every page */
.contact-band{background:var(--deep);color:#fff;padding:80px 0;text-align:center;border-top:0}
.contact-band .wrap{max-width:760px}
.contact-band h2{margin-bottom:12px;color:#fff}
.contact-band p{color:var(--mist);max-width:52ch;margin:0 auto 24px}
.contact-band .mail{margin:0 auto}
.contact-band .after{margin:18px 0 0;font-size:15px}

/* Lists without bullets (add role="list" in markup) */
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:10px 0;border-top:1px solid var(--rule)}
.plain li:last-child{border-bottom:1px solid var(--rule)}
.dark .plain li{border-color:var(--line)}

/* Open question and answer pages (FAQ, written for people, search engines and assistants alike) */
.qa-list{max-width:76ch}
.qa{border-top:1px solid var(--rule);padding:30px 0}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa h2,.qa h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:12px;text-wrap:balance}
.qa .a p{margin:0 0 12px}
.qa .a p:last-child{margin-bottom:0}
.qa .a ul{margin:0 0 12px;padding-left:20px}
.qa .a a{font-weight:700}
.toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 36px;padding:0;list-style:none;font-size:15px}
.toc a{color:var(--teal-ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.toc a:hover{border-color:var(--teal-ink)}
.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.topic{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--radius);padding:22px 24px;background:var(--white)}
.topic:hover{border-color:var(--teal)}
.topic h3{margin-bottom:6px}
.topic p{color:var(--mute);margin:0;font-size:16px}
.topic .n{display:block;margin-top:10px;font-size:13px;color:var(--teal-ink);font-weight:700}
@media (max-width:720px){.topic-grid{grid-template-columns:1fr}}

/* FAQ */
.faq details{border-top:1px solid var(--rule);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:var(--display);font-weight:600;font-size:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";font-size:26px;color:var(--teal-ink);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mute);max-width:70ch;margin:0 0 16px}
.dark .faq details{border-color:var(--line)}.dark .faq summary::after{color:var(--teal-2)}.dark .faq details p{color:var(--mist)}

/* Email display */
.mail{display:inline-flex;align-items:center;gap:12px;background:var(--white);color:var(--navy);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 12px 12px 18px;font-family:var(--display);font-weight:700;font-size:19px;max-width:100%}
.mail a{color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.mail button{border:0;background:var(--teal);color:var(--deep);font:700 13px var(--body);padding:9px 12px;border-radius:7px;cursor:pointer;flex:none}
.mail button:hover{background:var(--teal-2)}
.dark .mail,.masthead .mail,.site-footer .mail,.contact-band .mail{background:#fff}
.site-footer .mail a,.dark .mail a,.masthead .mail a,.contact-band .mail a{color:var(--navy)}

/* Callout */
.callout{border-left:3px solid var(--teal);background:var(--teal-soft);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;font-family:var(--display);font-weight:600;font-size:19px;color:var(--navy);max-width:60ch}
.dark .callout{background:rgba(16,176,160,.1);color:#fff}

/* Charts and figures */
.figure{min-width:0;overflow:hidden;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;position:relative}
.dark .figure,.masthead .figure{background:var(--deep-2);border-color:var(--line)}
.figure figcaption,.figure .cap{font-size:13px;color:var(--mute);margin-top:10px}
.dark .figure .cap,.masthead .figure .cap{color:var(--mist)}
.chart{position:relative;width:100%}
.chart svg{width:100%;height:auto;display:block;font-family:var(--display)}
.chart .tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;font-size:12px;padding:5px 8px;border-radius:6px;transform:translate(-50%,-125%);white-space:nowrap;opacity:0;transition:opacity .12s;z-index:2}
.chart .tip.on{opacity:1}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.kpi{border-top:2px solid var(--teal);padding-top:8px;font-size:13px;color:var(--mute)}
.kpi b{display:block;font-family:var(--display);font-size:24px;color:var(--ink);letter-spacing:-.02em;font-weight:700}
.dark .kpi,.masthead .kpi{color:var(--mist)}.dark .kpi b,.masthead .kpi b{color:#fff}

/* Cards (work index) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{display:block;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.card:hover{border-color:var(--teal)}
.card img{aspect-ratio:4/5;object-fit:cover;width:100%;border-bottom:1px solid var(--rule)}
.card .body{padding:20px 22px 24px}
.card h3{margin-bottom:8px}
.card p{color:var(--mute);margin:0 0 10px;font-size:16px}
.card .meta{font-size:13px;color:var(--mute)}
.card .go{color:var(--teal-ink);font-weight:700}

/* Article prose */
.article{max-width:72ch}
.article p,.article li{font-size:18px}
.article h2{font-size:clamp(26px,3vw,38px);margin-top:1.8em}
.article h3{margin-top:1.4em}
.article figure{margin:28px 0}
.article figure img{border:1px solid var(--rule);border-radius:var(--radius)}
.article figcaption{font-size:14px;color:var(--mute);margin-top:8px}
.article pre,pre.code{background:var(--deep-2);color:#CDE6EB;padding:18px 20px;border-radius:var(--radius);overflow-x:auto;font-size:14px;line-height:1.5}
.article code,pre.code code{font-family:ui-monospace,Consolas,monospace;font-size:.95em}
.article p code{background:var(--teal-soft);padding:1px 5px;border-radius:4px}
.article blockquote{margin:24px 0;padding:0 0 0 18px;border-left:3px solid var(--teal);color:var(--mute);font-size:19px}
.article table,table.data{border-collapse:collapse;width:100%;font-size:16px;margin:20px 0}
.article th,.article td,table.data th,table.data td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.article th,table.data th{font-family:var(--display);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}
.article-meta{color:var(--mute);font-size:15px;margin-bottom:28px}
.slides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.slides img{border:1px solid var(--rule);border-radius:8px}
.aside{border-top:1px solid var(--rule);margin-top:48px;padding-top:24px;font-size:16px;color:var(--mute)}

/* Footer */
.site-footer{background:var(--deep);color:#fff;padding:64px 0 28px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.site-footer p{color:var(--mist);margin:12px 0 0}
.site-footer p.small{font-size:14px}
.site-footer a{color:#fff}
.foot-nav{display:grid;gap:10px;align-content:start}
.foot-nav a{text-decoration:none;color:var(--mist)}
.foot-nav a:hover{color:#fff}
.foot-contact .mail{margin-top:10px}
.foot-legal{margin-top:22px;color:var(--mist)}
.foot-legal a{color:var(--mist)}

/* Responsive */
@media (max-width:980px){
  .site-nav{gap:16px;font-size:15px}
  .row,.row.flip{grid-template-columns:1fr;gap:28px}
  .row.flip > :first-child{order:0}
  .cols-3{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gutter:18px}
  section{padding:64px 0}
  .masthead{padding:52px 0 48px}
  .cols-3,.cols-2,.cards,.kpis,.foot-grid{grid-template-columns:1fr}
  .slides{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--deep);border-bottom:1px solid var(--line);padding:16px var(--gutter) 22px;flex-direction:column;align-items:flex-start;gap:16px}
  .site-nav.open{display:flex}
  .steps li{grid-template-columns:44px 1fr}
  .steps li::before{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}