:root{
  /* ramps (from tokens.css, verbatim) */
  --g50:#F0F8F0;--g100:#E4F1E4;--g200:#D0E5D0;--g300:#B2D3B5;--g400:#89B98F;
  --g500:#599564;--g600:#317042;--g700:#1A5831;--g800:#094324;--g900:#013019;
  --v50:#FAF2FF;--v100:#F3E8FC;--v200:#E8D6F6;--v300:#D7BDED;--v400:#BD99DE;
  --v500:#9A6DC0;--v600:#75499B;--v700:#5A357E;--v800:#432664;--v900:#2F194A;
  --i50:#F6F5F7;--i100:#EDECEE;--i200:#DEDDE1;--i300:#CAC8CD;--i400:#ACA9B0;
  --i500:#86838B;--i600:#625F67;--i700:#4B4950;--i800:#39373D;--i900:#28262A;
  /* work zone roles */
  --page:var(--i50);--surface:var(--v50);--tint:var(--v100);
  --text:var(--i900);--muted:var(--i700);            /* i700 = 8.16:1 (AAA); never i600 */
  --border:var(--i200);--grid:var(--i200);
  --accent:var(--v700);--fill:var(--v700);--fill-hover:var(--v800);--fill-edge:var(--v900);
  --rule:var(--v600);--focus:var(--v900);--on-fill:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--page);color:var(--text);
  font-family:'Faustina',Georgia,serif;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:52px 52px;
}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:1080px;margin-inline:auto;padding:0 26px}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--text);padding:12px 18px;border:2px solid var(--accent);z-index:99}
.skip:focus{left:12px;top:12px}

/* Karla utility roles */
.kfont{font-family:'Karla',system-ui,sans-serif}
.keyline{font-family:'Karla',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px}
.keyline i{width:22px;height:4px;background:var(--accent);display:inline-block;flex:none}

/* ---------- top nav ---------- */
header.site{border-bottom:1px solid var(--border);background:var(--v50)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px}
.brand{font-family:'Karla',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.navlinks{display:flex;gap:20px;font-family:'Karla',sans-serif;font-size:14px;font-weight:600}
.navlinks a{color:var(--muted);text-decoration:none;padding:4px 0}
.navlinks a:hover{color:var(--text);text-decoration:underline}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--border);cursor:pointer;flex:none}
.nav-toggle .bars{position:relative;display:block;width:20px;height:2px;background:var(--text)}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text)}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
@media(max-width:640px){
  header.site{position:relative}
  .nav-toggle{display:inline-flex}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--v50);border-bottom:1px solid var(--border);padding:6px 0;z-index:50}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 26px;font-size:15px;color:var(--text)}
}

main{display:block}
main > section{margin-top:26px}
/* every text block sits on its own opaque, subtly-tinted ground; the OS grid shows only in the gaps + margins */
.panel{padding:32px 30px;border:1px solid var(--border);background:#fff}
.panel.v50{background:var(--v50);border-color:var(--v200)}
.panel.v100{background:var(--v100);border-color:var(--v200)}
.sec-head{margin-bottom:22px}
.sec-head .keyline{margin-bottom:11px}
.sec-head h2{font-family:'Karla',sans-serif;font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:var(--text)}
.sec-head p{color:var(--muted);margin-top:9px;max-width:66ch}
p.body{max-width:68ch}

/* ---------- hero ---------- */
.hero{margin-top:48px}
.hero-panel{background:var(--v900);border:1px solid var(--v900);padding:40px 38px}
.hero .keyline{margin-bottom:18px}
/* photo + eyebrow on one row; square to match the hard-edged system (no radius anywhere) */
.hero-id{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero-id .keyline{margin-bottom:0}
.hero-id .me{width:88px;height:88px;object-fit:cover;display:block;flex:none;border:1px solid var(--v600)}
@media(max-width:480px){.hero-id .me{width:68px;height:68px}}
.hero h1{font-family:'Karla',sans-serif;font-weight:700;font-size:clamp(27px,3.3vw,40px);line-height:1.12;letter-spacing:-.02em;color:var(--text);text-wrap:balance;max-width:26ch}
.hero .sub{font-family:'Faustina',serif;font-size:19px;line-height:1.55;color:var(--muted);margin-top:18px;max-width:52ch}
.hero .role{font-family:'Karla',sans-serif;font-size:13.5px;letter-spacing:.02em;color:var(--muted);margin-top:16px}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:'Karla',sans-serif;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:none;padding:12px 26px;background:var(--fill);color:var(--on-fill);border-bottom:3px solid var(--fill-edge)}
.btn:hover{background:var(--fill-hover)}
.btn-ghost{font-family:'Karla',sans-serif;font-weight:700;font-size:14px;color:var(--accent);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
/* dark hero panel — light text/controls on v900 (all AAA) */
.hero-panel .keyline{color:var(--v300)}
.hero-panel .keyline i{background:var(--v300)}
.hero-panel h1{color:#fff}
.hero-panel .sub{color:var(--v100)}
.hero-panel .role{color:var(--v300)}
.hero-panel .btn-ghost{color:var(--v300)}
.hero-panel .btn-ghost:hover{color:#fff}
.hero-panel .btn{background:var(--v300);color:var(--v900);border-bottom:0}
.hero-panel .btn:hover{background:var(--v200)}
.hero-panel :focus-visible{outline-color:var(--v300)}

/* ---------- hero split: work (left) + travel teaser (right, green) ---------- */
.hero-split{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch}
.travel-teaser{background:var(--g50);border:1px solid var(--g200);padding:28px 26px;display:flex;flex-direction:column;justify-content:space-between}
.travel-teaser .keyline{color:var(--g700)}
.travel-teaser .keyline i{background:var(--g700)}
.travel-teaser h2{font-family:'Karla',sans-serif;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em;color:var(--text);margin:14px 0 0;text-wrap:balance}
.travel-teaser .tt-copy{color:var(--muted);font-size:15px;line-height:1.55;margin-top:8px}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.mini-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border:1px solid var(--g200)}
.travel-teaser a.go{font-family:'Karla',sans-serif;font-weight:700;font-size:14px;color:var(--g700);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.travel-teaser a.go:focus-visible{outline-color:var(--g900)}
@media(max-width:820px){.hero-split{grid-template-columns:1fr}}

/* ---------- value cards: OS-Explorer grid cells ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vcell{padding:22px 20px;background:var(--v100);border-left:3px solid var(--v700)}
.vcell h3{font-family:'Karla',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.005em;color:var(--text);margin-bottom:8px;text-wrap:balance}
.vcell p{font-size:15.5px;line-height:1.62;color:var(--muted)}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}

/* dark section variant — adds light/dark rhythm; mirrors the Exploring band */
.panel.dark{background:var(--v900);border-color:var(--v900)}
.panel.dark .sec-head .keyline{color:var(--v300)}
.panel.dark .sec-head .keyline i{background:var(--v300)}
.panel.dark .sec-head h2{color:#fff}
.panel.dark .sec-head p{color:var(--v300)}
.panel.dark .vcell{background:transparent;border-left:3px solid var(--v500)}
.panel.dark .vcell h3{color:#fff}
.panel.dark .vcell p{color:var(--v100)}

/* ---------- timeline ---------- */
.timeline{border:1px solid var(--border)}
.tl{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:18px 22px;border-bottom:1px solid var(--border)}
.tl:last-child{border-bottom:none}
.tl .when{font-family:'Karla',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--accent);padding-top:2px}
.tl h3{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin-bottom:3px}
.tl p{font-size:15px;color:var(--muted)}
@media(max-width:600px){.tl{grid-template-columns:1fr;gap:6px}}

/* ---------- community ---------- */
.community{display:grid;gap:20px}
.citem{padding-left:16px;border-left:3px solid var(--accent)}
.citem h3{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.005em;color:var(--text);margin-bottom:5px}
.citem p{font-size:15.5px;line-height:1.62;color:var(--muted);max-width:72ch}

/* ---------- inverted exploring band ---------- */
.explore{background:var(--v900);border:1px solid var(--v900);margin-top:14px}
.explore .pad{padding:34px 30px}
.explore .keyline{color:var(--v300);margin-bottom:12px}
.explore .keyline i{background:var(--v300)}
.explore h2{font-family:'Karla',sans-serif;font-weight:700;font-size:clamp(20px,2.5vw,26px);color:#fff;letter-spacing:-.02em;text-wrap:balance;margin-bottom:8px}
.explore .intro{color:var(--v300);max-width:60ch;margin-bottom:24px}
.ecards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ecard{border:1px solid var(--v700);padding:20px 20px}
.ecard .tag{font-family:'Karla',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v300);margin-bottom:10px}
.ecard h3{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:7px}
.ecard p{font-size:14.5px;line-height:1.6;color:var(--v100)}
@media(max-width:760px){.ecards{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.capture{border:1px solid var(--border);background:var(--surface);padding:32px 30px}
.capture h2{font-family:'Karla',sans-serif;font-weight:700;font-size:24px;color:var(--text);margin-bottom:8px;letter-spacing:-.02em}
.capture p{color:var(--muted);margin-bottom:20px;max-width:56ch}
.capture .fine{font-family:'Karla',sans-serif;font-size:12.5px;color:var(--muted);margin-top:12px}

footer{margin-top:56px;border-top:1px solid var(--border);padding:26px 0 44px;background:var(--v50)}
footer p{font-family:'Karla',sans-serif;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}