/* Unfreeze: shared tokens and chrome. Paper, navy ink, one amber accent reserved for "the middle". */
:root{
  --bg:#F4EFE6; --surface:#FBF8F2; --ink:#0D1A2B; --muted:#5B6676; --faint:#8C95A1; --rule:#D8CFBF;
  --amber:#B97A2E; --amber-soft:#E8A657; --chip:#ECE4D6; --navy:#0D1A2B; --on-navy:#F2EEE6; --on-navy-muted:#B9C1CC;
  --dot-top:#0D1A2B; --dot-mid:#C98A3A; --ice:#C9D3DD;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1624; --surface:#122236; --ink:#F2EEE6; --muted:#A7B0BD; --faint:#7A8696; --rule:#24374F;
  --amber:#E8A657; --amber-soft:#E8A657; --chip:#1A2C45; --navy:#060E19; --on-navy:#F2EEE6; --on-navy-muted:#A7B0BD;
  --dot-top:#C9D3DD; --dot-mid:#E8A657; --ice:#2A3D57; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1624; --surface:#122236; --ink:#F2EEE6; --muted:#A7B0BD; --faint:#7A8696; --rule:#24374F;
  --amber:#E8A657; --amber-soft:#E8A657; --chip:#1A2C45; --navy:#060E19; --on-navy:#F2EEE6; --on-navy-muted:#A7B0BD;
  --dot-top:#C9D3DD; --dot-mid:#E8A657; --ice:#2A3D57; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img,svg,canvas{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.narrow>*{max-width:760px}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.mark b{font:700 22px/1 var(--serif);letter-spacing:-.02em}
.mark b i{font-style:normal;color:var(--amber)}
.mark small{font:500 12px/1 var(--sans);color:var(--muted);letter-spacing:.02em}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{display:block;padding:8px 12px;border-radius:6px;font:500 14px/1 var(--sans);text-decoration:none;color:var(--muted)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink);background:var(--chip)}
.nav ul a.cta{background:var(--ink);color:var(--bg)}
@media (max-width:620px){.mark small{display:none}.nav ul a{padding:7px 9px;font-size:13px}}

/* type */
.eyebrow{font:600 14px/1.2 var(--sans);color:var(--amber);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber)}
h1{font:700 clamp(36px,6.2vw,64px)/1.02 var(--serif);margin:18px 0 18px;letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--amber)}
h2{font:600 clamp(26px,3.6vw,36px)/1.12 var(--serif);margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
h3{font:600 19px/1.3 var(--serif);margin:0 0 6px}
.lede{font:400 clamp(18px,2.1vw,21px)/1.55 var(--serif);color:var(--muted);margin:0;max-width:56ch}
p{max-width:66ch}
.muted{color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
section{padding-block:72px}
section+section{border-top:1px solid var(--rule)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);padding:14px 20px;border-radius:8px;background:var(--ink);color:var(--bg);text-decoration:none;border:1px solid var(--ink);transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.amber{background:var(--amber-soft);border-color:var(--amber-soft);color:#0D1A2B}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* figure chrome */
figure{margin:0}
figcaption,.source{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:72ch}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* footer */
footer.site{border-top:1px solid var(--rule);padding-block:32px 48px;font-size:12.5px;color:var(--muted)}
footer.site .wrap{display:grid;gap:10px}
footer.site nav{display:flex;gap:16px;flex-wrap:wrap}
footer.site a{color:var(--ink)}

/* ---- Motion: one language, the thaw. Things arrive out of frost and settle. ---- */
@view-transition{navigation:auto}
.nav{view-transition-name:sitenav}
::view-transition-group(sitenav){animation-duration:0s}
::view-transition-old(root){animation:frost-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:thaw-in .6s cubic-bezier(.2,.75,.2,1) both}
@keyframes frost-out{to{opacity:0;filter:blur(8px) saturate(.5)}}
@keyframes thaw-in{from{opacity:0;filter:blur(12px) saturate(.35);transform:translateY(8px)}}
/* page-load thaw for the hero only; --d staggers the pieces */
.th{display:inline-block;animation:thaw-in 1.1s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
p.th,div.th{display:block}
div.btns.th{display:flex}
/* a swapped panel re-thaws so the change is visible */
.rethaw{animation:thaw-in .45s cubic-bezier(.2,.75,.2,1) both}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---- forms (shared by the self-check and contact forms) ---- */
.field{display:grid;gap:6px;min-width:0}
.field>span{font:600 13px/1.2 var(--sans);color:var(--ink)}
.field>span small{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:11px 12px;width:100%;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.fgrid .wide{grid-column:1/-1}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.45}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink);flex:none}
.consent a{color:var(--ink)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14px;min-height:20px;margin:0}
.form-status.err{color:#B3261E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .form-status.err{color:#F2B8B5}}
:root[data-theme="dark"] .form-status.err{color:#F2B8B5}
button.btn{cursor:pointer}
button.btn:disabled{opacity:.6;cursor:wait}
.sent-msg h3{font-size:24px;margin:0 0 6px}
.sent-msg p{margin:0;color:var(--muted)}

/* ---- mobile menu (enabled by /assets/nav.js) ---- */
.menubtn{display:none}
@media (max-width:760px){
  .nav.has-menu .wrap{flex-wrap:nowrap;min-height:58px}
  .nav.has-menu .menubtn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:9px 14px 9px 12px;cursor:pointer;margin-left:auto}
  .nav.has-menu .mb-lines{position:relative;width:16px;height:10px;display:inline-block}
  .nav.has-menu .mb-lines i{position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:1px;transition:transform .35s cubic-bezier(.2,.75,.2,1),top .35s cubic-bezier(.2,.75,.2,1)}
  .nav.has-menu .mb-lines i:first-child{top:1px}
  .nav.has-menu .mb-lines i:last-child{top:7px}
  .nav.has-menu.open .mb-lines i:first-child{top:4.5px;transform:rotate(45deg)}
  .nav.has-menu.open .mb-lines i:last-child{top:4.5px;transform:rotate(-45deg)}
  .nav.has-menu nav[aria-label="Main"]{position:fixed;left:0;right:0;top:calc(58px + env(safe-area-inset-top,0px));bottom:0;background:var(--bg);padding:12px 20px 40px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-6px);filter:blur(6px);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.2,1),filter .4s ease,visibility 0s linear .4s;z-index:30}
  .nav.has-menu.open nav[aria-label="Main"]{visibility:visible;opacity:1;transform:none;filter:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.2,1),filter .4s ease,visibility 0s}
  .nav.has-menu nav[aria-label="Main"] ul{flex-direction:column;gap:0}
  .nav.has-menu nav[aria-label="Main"] li{border-bottom:1px solid var(--rule)}
  .nav.has-menu nav[aria-label="Main"] ul a{font:600 26px/1.2 var(--serif);padding:18px 2px;color:var(--ink);background:transparent;border-radius:0}
  .nav.has-menu nav[aria-label="Main"] ul a[aria-current]{color:var(--amber);background:transparent}
  .nav.has-menu nav[aria-label="Main"] ul a.cta{background:transparent;color:var(--ink)}
  .nav.has-menu.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  html.menu-open{overflow:hidden}
}