:root{
  color-scheme:light;
  --ground:#F4F3F1; --surface:#FFFFFF; --ink:#141414; --muted:#5A5857;
  --line:#D9D6D2; --deep:#161515; --deep-ink:#EFEDEA; --accent:#8E1B1B; --accent-soft:#F2DCDA; --em:#8E1B1B;
  --band-accent:#D9534A;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
@media (max-width:480px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font:600 21px/1 var(--serif);text-decoration:none;letter-spacing:.12em;display:flex;align-items:center;gap:10px;color:var(--accent)}
.brand img{width:40px;height:40px;object-fit:contain}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sans);padding:12px 18px;border-radius:3px;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--ground);cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--ground)}
@media (max-width:820px){nav ul{display:none}}

/* hero */
.hero{padding-block:72px 64px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end}
.etym{font:400 15px/1.5 var(--serif);color:var(--muted);margin-bottom:28px}
.etym b{font-style:italic;font-weight:600;color:var(--ink)}
.etym span{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.hero h1{font-size:clamp(40px,6.2vw,76px);letter-spacing:-.015em}
.hero h1 em{font-weight:400;color:var(--em)}
.lede{margin-top:24px;font-size:19px;max-width:34em;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.sheet{background:var(--surface);border:1px solid var(--line);padding:24px;font-family:var(--mono);font-size:13px}
.sheet .head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}
.sheet dt{color:var(--muted)}
.sheet dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.sheet svg{display:block;width:100%;height:auto;margin-top:20px}
.formula{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);color:var(--muted);line-height:1.7}
.formula b{color:var(--ink);font-weight:500}

@media (max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero{padding-block:48px}}

/* sections */
section{padding-block:88px}
@media (max-width:640px){section{padding-block:56px}}
.sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:end;margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,4vw,46px)}
.sec-head p{color:var(--muted);max-width:36em}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:16px}}

/* services */
.services{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)}
.svc{padding:36px 36px 40px 0;border-bottom:1px solid var(--line);display:grid;grid-template-rows:auto auto 1fr;gap:14px}
.svc:nth-child(even){padding:36px 0 40px 36px;border-left:1px solid var(--line)}
.svc .tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.svc h3{font-size:28px}
.svc p{color:var(--muted)}
.svc ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:14px;padding:5px 10px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
@media (max-width:760px){
  .services{grid-template-columns:1fr}
  .svc,.svc:nth-child(even){padding:32px 0;border-left:0}
}

/* studies band */
.band{background:var(--deep);color:var(--deep-ink)}
.band .label{color:color-mix(in srgb,var(--deep-ink) 70%,transparent)}
.band .sec-head p{color:color-mix(in srgb,var(--deep-ink) 78%,transparent)}
.study-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:0}
.m{padding:20px 20px 20px 0;border-top:1px solid color-mix(in srgb,var(--deep-ink) 22%,transparent)}
.m h3{font-size:20px;margin-bottom:6px}
.m p{font-size:15px;color:color-mix(in srgb,var(--deep-ink) 75%,transparent)}
.m .code{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--band-accent);display:block;margin-bottom:10px}
.calc{background:color-mix(in srgb,var(--ground) 6%,transparent);border:1px solid color-mix(in srgb,var(--deep-ink) 25%,transparent);padding:28px}
.calc h3{font-size:24px;margin-bottom:6px}
.calc .note{font-size:14px;color:color-mix(in srgb,var(--deep-ink) 72%,transparent)}
.calc label{display:flex;justify-content:space-between;font:500 13px/1 var(--mono);margin-top:24px;margin-bottom:10px}
.calc input[type=range]{width:100%;accent-color:var(--band-accent)}
.out{margin-top:24px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.out strong{font:600 56px/1 var(--serif);font-variant-numeric:tabular-nums}
.out span{font:400 13px/1.4 var(--mono);color:color-mix(in srgb,var(--deep-ink) 72%,transparent)}
.seg{display:flex;gap:6px;margin-top:4px}
.seg button{flex:1;font:500 13px/1 var(--mono);padding:9px 0;background:transparent;color:var(--deep-ink);border:1px solid color-mix(in srgb,var(--deep-ink) 30%,transparent);border-radius:2px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
@media (max-width:880px){.study-grid{grid-template-columns:1fr}}
@media (max-width:520px){.methods{grid-template-columns:1fr}}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{padding:24px 20px 8px 0;border-top:2px solid var(--ink);counter-increment:s;position:relative}
.steps li + li{padding-left:20px;border-left:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 13px/1 var(--mono);color:var(--accent);display:block;margin-bottom:14px}
.steps h3{font-size:21px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--muted)}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}.steps li,.steps li+li{padding:24px 16px 20px 0;border-left:0}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* principles */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.principles h3{font-size:22px;margin-bottom:10px}
.principles p{color:var(--muted);font-size:16px}
@media (max-width:820px){.principles{grid-template-columns:1fr;gap:28px}}

/* contact */
.contact{border-top:1px solid var(--line)}
.contact .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
.contact h2{font-size:clamp(32px,4.4vw,52px)}
.contact .info{margin-top:28px;display:grid;gap:18px}
.contact .info div{display:grid;gap:4px}
.mail{font:500 18px/1.3 var(--mono);color:var(--accent);text-decoration:none;word-break:break-all}
.mail:hover{text-decoration:underline}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--surface);border:1px solid var(--line);padding:28px}
form .full{grid-column:1/-1}
form label{display:grid;gap:6px;font-size:14px;font-weight:500}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:2px;padding:11px 12px;width:100%}
textarea{min-height:120px;resize:vertical}
.consent{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px;font-weight:400!important;color:var(--muted)}
.consent input{width:auto;margin-top:4px}
.status{font-size:14px;color:var(--em)}
@media (max-width:880px){.contact .grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){form{grid-template-columns:1fr;padding:20px}}

footer{border-top:1px solid var(--line);padding-block:28px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:var(--muted)}
/* multipage additions */
nav a[aria-current="page"]{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.menu-btn{display:none;font:500 15px/1 var(--sans);background:transparent;border:1px solid var(--ink);color:var(--ink);padding:10px 14px;border-radius:3px;cursor:pointer}
.top .btn{white-space:nowrap}
@media (max-width:820px){
  .menu-btn{display:inline-flex}
  .top .btn{display:none}
  nav ul{display:none}
  nav.open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  nav.open li a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .top .wrap{position:relative}
}
.page-intro{padding-block:64px 0}
.page-intro + section{padding-top:48px}
.overview{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.overview a{display:grid;gap:10px;align-content:start;padding:28px 24px 32px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.overview a + a{padding-left:24px;border-left:1px solid var(--line)}
.overview .tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.overview h3{font-size:23px}
.overview p{color:var(--muted);font-size:15px}
.overview .more{font-size:14px;font-weight:500;color:var(--accent)}
.overview a:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
@media (max-width:960px){.overview{grid-template-columns:1fr 1fr}.overview a,.overview a+a{padding:24px 16px 28px 0;border-left:0}}
@media (max-width:520px){.overview{grid-template-columns:1fr}}
.cta-strip{background:var(--deep);color:var(--deep-ink)}
.cta-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta-strip h2{font-size:clamp(26px,3.4vw,38px);max-width:22em}
.cta-strip .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.cta-strip .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.next{display:flex;justify-content:flex-end;margin-top:48px}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}