:root {
  --white:#ffffff;
  --paper:#f6f8f5;
  --sage:#edf5ef;
  --sage-2:#dfece2;
  --mint-100:#dff1e3;
  --mint-200:#d9f1df;
  --mint-300:#b8e7c4;
  --line:#d9e4dc;
  --sage-200:#ceddd2;
  --sage-250:#c4d5cc;
  --sage-300:#b8d1c1;
  --sage-400:#a9c9b4;
  --moss-450:#6d7b74;
  --moss-500:#667b70;
  --muted:#607168;
  --moss-600:#4d6258;
  --green:#2f7d5b;
  --forest-2:#17503e;
  --forest-700:#27483e;
  --forest-800:#0e4636;
  --forest:#0d3b2f;
  --forest-900:#092f25;
  --forest-950:#102b22;
  --ink:#14251e;
  --deep-1:#0a1830;
  --deep-2:#102b4f;
  --on-deep:#cfe1ff;
  --on-deep-2:#c4d2e5;
  --on-deep-3:#e0eafa;
  --on-deep-accent:#b8e7c4;
  --mist-blue:#edf5f8;
  --accent-blue-soft:#eef3ff;
  --slate-200:#e9edf2;
  --slate-300:#d3dae5;
  --slate-450:#778292;
  --slate-500:#6a7585;
  --blue:#3f7895;
  --cyan:#4f8d8b;
  --accent-blue:#1e5bd8;
  --steel:#315f75;
  --slate-600:#445064;
  --accent-blue-ink:#173d7a;
  --slate-700:#25344b;
  --slate-800:#17263c;
  --slate-900:#0c203b;
  --orange:#df6538;
  --navy:var(--forest);
  --shadow:0 24px 64px rgba(26,61,48,.11);
  --soft-shadow:0 12px 32px rgba(26,61,48,.08);
  --glass:rgba(255,255,255,.76);
  --radius:28px;
  --max:1180px;
  --display-font:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); background:var(--white);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.wrap { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
nav {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px); border-bottom:1px solid rgba(223,228,234,.8);
}
.nav-inner { position:relative; height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-weight:800; letter-spacing:-.02em; }
.brand span { color:var(--blue); }
.links { display:flex; gap:21px; color:var(--slate-600); font-size:14px; font-weight:650; }
.links a:hover { color:var(--blue); }

.hero {
  min-height:780px; display:grid; grid-template-columns:1.1fr .9fr;
  align-items:center; gap:72px; padding:76px 0 88px;
}
.kicker {
  display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:22px;
}
.kicker:before { content:""; width:34px; height:2px; background:var(--blue); }
h1 { margin:0; font-size:clamp(50px,7vw,88px); letter-spacing:-.055em; line-height:.96; }
.hero-slogan {
  margin:22px 0 10px; max-width:720px; font-size:clamp(20px,2.2vw,28px);
  line-height:1.35; font-weight:780; letter-spacing:-.025em; color:var(--slate-800);
}
.hero-role { margin:16px 0 18px; font-size:24px; line-height:1.35; font-weight:720; color:var(--slate-700); }
.lede { max-width:680px; margin:0; color:var(--muted); font-size:18px; line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px;
  border-radius:999px; font-weight:750; font-size:14px; border:1px solid var(--line);
  transition:.2s ease;
}
.btn.primary { color:white; background:var(--navy); border-color:var(--navy); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,32,59,.12); }
.meta { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:28px; color:var(--slate-450); font-size:13px; }
.meta span:before { content:"•"; margin-right:8px; color:#a9b2bd; }
.meta span:first-child:before { content:""; margin:0; }

.headshot-card {
  position:relative; padding:16px; border-radius:34px; background:linear-gradient(145deg,var(--mist-blue),var(--white));
  box-shadow:var(--shadow);
}
.headshot-card:after {
  content:""; position:absolute; inset:auto -22px -22px auto; width:160px; height:160px;
  border-radius:40px; background:linear-gradient(135deg,rgba(30,91,216,.18),rgba(14,146,168,.04)); z-index:-1;
}
.headshot-card img { aspect-ratio:4/5; object-fit:cover; border-radius:24px; }

.stats { background:var(--navy); color:white; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:34px 26px; border-right:1px solid rgba(255,255,255,.12); }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-size:31px; letter-spacing:-.03em; }
.stat span { display:block; margin-top:7px; color:#aebbd0; font-size:13px; line-height:1.5; }

.section { padding:112px 0; }
.section.alt { background:var(--paper); }
.eyebrow { color:var(--blue); font-size:12px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
h2 { font-size:clamp(38px,5vw,60px); letter-spacing:-.045em; line-height:1.02; margin:12px 0 22px; }
.section-intro { max-width:760px; color:var(--muted); font-size:17px; line-height:1.75; margin:0 0 44px; }

.work-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.work-photo { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--slate-200); }
.work-photo img { aspect-ratio:16/10; object-fit:cover; }
.focus-list { display:grid; gap:14px; margin-top:30px; }
.focus {
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;
  padding:18px; border:1px solid var(--line); border-radius:18px; background:white;
}
.focus-num {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-weight:850; color:var(--blue); background:var(--accent-blue-soft);
}
.focus h3 { margin:1px 0 5px; font-size:16px; }
.focus p { margin:0; color:var(--muted); line-height:1.6; font-size:14px; }

.capabilities { margin-top:52px; display:flex; flex-wrap:wrap; gap:10px; }
.pill { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--slate-600); font-size:13px; font-weight:650; }

.beyond-head { display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:end; margin-bottom:48px; }
.quote {
  color:#536074; border-left:3px solid var(--orange); padding-left:20px; line-height:1.7; font-size:16px;
}
.marathon-feature {
  position:relative; min-height:560px; border-radius:30px; overflow:hidden; background:#222;
  box-shadow:var(--shadow);
}
.marathon-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.marathon-feature:after {
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,11,19,.82) 100%);
}
.overlay { position:absolute; left:32px; right:32px; bottom:28px; color:white; z-index:2; }
.overlay .label { font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-2); }
.overlay h3 { font-size:32px; margin:7px 0 4px; letter-spacing:-.03em; }
.overlay p { margin:0; color:var(--slate-300); }

.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:22px; }
.card { border-radius:24px; overflow:hidden; background:white; border:1px solid var(--line); }
.card .photo { height:380px; overflow:hidden; background:var(--slate-200); }
.card .photo img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.card:hover .photo img { transform:scale(1.025); }
.card.trail .photo img { object-position:center 62%; }
.card.cycling .photo img { object-position:center 34%; }
.card.tri .photo img { object-position:center 38%; }
.card.dragon .photo img { object-position:center 36%; }
.card-copy { padding:20px 22px 22px; }
.card-copy .small { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.11em; font-size:11px; }
.card-copy h3 { margin:7px 0 7px; font-size:21px; }
.card-copy p { color:var(--muted); margin:0; line-height:1.6; font-size:14px; }

.closing {
  background:linear-gradient(135deg,var(--deep-1),var(--deep-2)); color:white; border-radius:32px;
  padding:60px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
}
.closing h2 { margin-top:0; }
.closing p { color:#b9c6d8; line-height:1.75; max-width:700px; }
.identity { display:grid; gap:10px; }
.identity div { padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); color:var(--slate-300); font-size:14px; }

footer { padding:36px 0 48px; color:var(--slate-450); font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

.reveal { opacity:1; transform:none; }
.reveal-enabled .reveal { opacity:0; transform:translateY(16px); transition:.65s ease; }
.reveal-enabled .reveal.show { opacity:1; transform:none; }

@media (max-width: 880px) {
  .hero, .work-grid, .beyond-head, .closing { grid-template-columns:1fr; }
  .hero { padding-top:52px; gap:44px; min-height:auto; }
  .hero .headshot-card { max-width:560px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.12); }
  .gallery { grid-template-columns:1fr; }
  .closing { padding:38px 28px; }
}
@media (max-width: 560px) {
  .wrap { width:min(var(--max), calc(100% - 28px)); }
  .section { padding:82px 0; }
  .hero-slogan { font-size:20px; margin-top:18px; }
  .hero-role { font-size:20px; }
  .lede { font-size:16px; }
  .stats-grid { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .stat:last-child { border-bottom:0; }
  .marathon-feature { min-height:500px; }
  .overlay { left:22px; right:22px; bottom:22px; }
  .card .photo { height:320px; }
}

/* ===== Final-site additions: AI skills, credentials, verified links ===== */
.hero-link-row {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:14px;
}
.btn.linked {
  background:var(--white); border-color:var(--slate-300); color:#19345b;
}
.btn.linked:hover { border-color:var(--accent-blue); color:var(--accent-blue); }

.ai-section {
  background:linear-gradient(180deg,var(--white) 0%,var(--white) 100%);
}
.ai-grid {
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:stretch;
  margin-top:42px;
}
.ai-feature {
  position:relative; overflow:hidden; min-height:390px; border-radius:30px;
  padding:38px; 
  color:var(--white); box-shadow:var(--shadow);
}
.ai-feature:before {
  content:""; position:absolute; width:360px; height:360px; right:-120px; top:-140px;
  border-radius:50%; background:radial-gradient(circle,rgba(75,151,255,.42),rgba(75,151,255,0) 68%);
}
.ai-feature:after {
  content:"AI"; position:absolute; right:26px; bottom:-34px; font-size:180px; line-height:1;
  font-weight:900; letter-spacing:-.08em; color:rgba(255,255,255,.045);
}
.ai-feature > * { position:relative; z-index:2; }
.ai-badge {
  display:inline-flex; padding:8px 11px; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; background:rgba(255,255,255,.08); color:var(--on-deep);
  font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.12em;
}
.ai-feature h3 { font-size:34px; margin:24px 0 10px; letter-spacing:-.035em; }
.ai-feature p { max-width:660px; margin:0; color:var(--on-deep-2); line-height:1.75; font-size:15px; }
.ai-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ai-actions a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:999px; font-size:13px; font-weight:800; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:white;
}
.ai-actions a.primary { background:var(--white); color:var(--slate-900); border-color:var(--white); }
.ai-side { display:grid; gap:18px; }
.market-card {
  min-height:186px; border:1px solid var(--line); border-radius:24px; padding:26px;
  background:var(--white); display:flex; flex-direction:column; justify-content:space-between;
}
.market-card .platform {
  font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
}
.market-card h3 { margin:9px 0 8px; font-size:22px; }
.market-card p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
.market-card a { margin-top:18px; font-weight:800; color:var(--accent-blue-ink); font-size:13px; }

.credentials {
  background:var(--white);
}
.cred-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;
}
.cred-card {
  border:1px solid var(--line); border-radius:22px; padding:24px 20px; background:var(--white);
  min-height:185px; display:flex; flex-direction:column; justify-content:space-between;
  transition:.2s ease;
}
.cred-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,26,43,.08); }
.cred-mark {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-weight:900; font-size:13px; background:var(--accent-blue-soft); color:var(--accent-blue);
}
.cred-card h3 { margin:18px 0 7px; font-size:17px; line-height:1.35; }
.cred-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.verify-row {
  margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.verify-note { color:var(--slate-500); font-size:13px; line-height:1.5; }

.strava-strip {
  margin-top:24px; border-radius:22px; padding:24px 28px; background:#fff5ef;
  border:1px solid #f6d8c8; display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.strava-strip strong { display:block; margin-bottom:4px; font-size:16px; }
.strava-strip span { color:#6f645f; font-size:13px; line-height:1.55; }
.strava-link {
  display:inline-flex; min-height:44px; align-items:center; padding:0 16px; border-radius:999px;
  color:#a44117; border:1px solid #edb89e; background:var(--white); font-weight:800; font-size:13px;
}

.links-section { background:var(--paper); }
.link-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px;
}
.ext-card {
  border:1px solid var(--line); border-radius:20px; background:var(--white); padding:20px;
  min-height:145px; display:flex; flex-direction:column; justify-content:space-between;
}
.ext-card .ext-name { font-weight:850; font-size:16px; }
.ext-card .ext-desc { color:var(--muted); font-size:12px; line-height:1.5; margin:7px 0 16px; }
.ext-card .ext-go { color:var(--blue); font-weight:800; font-size:12px; }

@media (max-width: 1020px) {
  .ai-grid { grid-template-columns:1fr; }
  .cred-grid { grid-template-columns:repeat(2,1fr); }
  .link-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .ai-feature { padding:28px 22px; }
  .ai-feature h3 { font-size:28px; }
  .cred-grid, .link-grid { grid-template-columns:1fr; }
  .strava-strip { padding:20px; }
}


/* ===== Credential certificate viewer ===== */
.cred-card { position:relative; min-height:235px; }
.cred-card.featured {
  border-color:#b9d3e0;
  box-shadow:0 14px 34px rgba(40,105,138,.08);
}
.cred-level {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--slate-500); font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; margin-top:12px;
}
.cred-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.cred-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 13px; border-radius:999px;
  border:1px solid var(--slate-300); background:var(--white); color:var(--slate-700);
  font-size:12px; font-weight:800; cursor:pointer;
  transition:.2s ease;
}
.cred-btn:hover {
  transform:translateY(-1px);
  border-color:var(--accent-blue); color:var(--accent-blue);
}
.cred-btn.primary { background:var(--slate-900); border-color:var(--slate-900); color:var(--white); }
.cred-btn.primary:hover { color:var(--white); }

.cert-modal {
  position:fixed; inset:0; z-index:9999;
  background:rgba(5,10,18,.78);
  backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:28px;
}
.cert-modal.open { display:flex; }
.cert-shell {
  width:min(1180px,96vw); max-height:92vh;
  border-radius:20px; background:var(--white);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  overflow:hidden; display:flex; flex-direction:column;
}
.cert-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px; border-bottom:1px solid var(--slate-200);
  background:var(--paper);
}
.cert-title { font-weight:850; font-size:14px; color:var(--slate-800); }
.cert-close {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--slate-300); background:var(--white); color:var(--slate-700);
  font-size:20px; cursor:pointer; display:grid; place-items:center;
}
.cert-view { padding:18px; overflow:auto; background:var(--mist-blue); }
.cert-view img {
  width:100%; height:auto; object-fit:contain;
  border-radius:10px; background:var(--white);
}
.cred-note {
  margin-top:18px; color:var(--slate-500); font-size:12px; line-height:1.6;
}

/* Language switch added in V5 */
.lang-switch {
  display:flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:13px; font-weight:800; letter-spacing:.02em;
  border:1px solid var(--line); background:var(--white); border-radius:999px;
  padding:7px 10px; box-shadow:0 4px 14px rgba(15,26,43,.05);
}
.lang-switch a { color:var(--slate-500); }
.lang-switch a.active { color:var(--blue); }
.lang-switch .sep { color:#c0c7d1; }
@media (max-width: 880px) {
  .nav-inner { gap:12px; }
  .brand { font-size:14px; }
  .lang-switch { font-size:12px; padding:6px 9px; }
}

.skill-explorer{margin-top:30px}.skill-explorer-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:18px;flex-wrap:wrap}.skill-explorer-head h3{margin:0;font-size:24px;letter-spacing:-.025em}.skill-explorer-head p{margin:0;color:var(--muted);font-size:13px}.skill-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.skill-page-card{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--white);transition:.2s ease}.skill-page-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,26,43,.08);border-color:var(--slate-300)}.skill-page-thumb{width:84px;height:84px;border-radius:18px;overflow:hidden;background:var(--mist-blue)}.skill-page-thumb img{width:100%;height:100%;object-fit:contain;background:var(--white);padding:4px}.skill-page-card .mini{font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.skill-page-card h4{margin:5px 0 5px;font-size:17px;line-height:1.25}.skill-page-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.skill-page-card .go{display:inline-block;margin-top:9px;color:var(--accent-blue-ink);font-size:12px;font-weight:850}@media (max-width: 980px){.skill-page-grid{grid-template-columns:1fr}}@media (max-width: 560px){.skill-page-card{grid-template-columns:68px 1fr}.skill-page-thumb{width:68px;height:68px}}
.compliance-showcase{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:32px;align-items:center;margin-top:18px;padding:32px;border-radius:28px;color:var(--white);box-shadow:var(--shadow);transition:.22s ease}.compliance-showcase:hover{transform:translateY(-3px);box-shadow:0 26px 68px rgba(15,26,43,.16)}.compliance-copy .collection-label{display:inline-flex;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:var(--on-deep);font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.compliance-copy h3{margin:18px 0 10px;font-size:30px;letter-spacing:-.035em}.compliance-copy p{margin:0;color:var(--on-deep-2);line-height:1.7;font-size:14px}.compliance-facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.compliance-facts span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.09);color:var(--on-deep-3);font-size:11px;font-weight:750}.compliance-cta{display:inline-flex;font-size:13px;font-weight:850;color:var(--white)}.compliance-logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.compliance-logo-grid span{overflow:hidden;aspect-ratio:1;border-radius:16px;background:var(--white);box-shadow:0 8px 18px rgba(0,0,0,.13)}.compliance-logo-grid img{width:100%;height:100%;object-fit:contain;padding:3px}@media (max-width: 980px){.compliance-showcase{grid-template-columns:1fr}.compliance-logo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (max-width: 560px){.compliance-showcase{padding:24px}.compliance-copy h3{font-size:25px}.compliance-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.compliance-logo-grid span{border-radius:13px}}

/* ===== V18 Solra-inspired visual system =====
   Static-site adaptation: keeps the V17 architecture, content and behavior,
   while borrowing Solra's soft nature palette, glass navigation, editorial
   type hierarchy, rounded surfaces and restrained motion. */

::selection { background:var(--sage-2); color:var(--forest); }
:focus-visible { outline:3px solid rgba(63,120,149,.38); outline-offset:3px; border-radius:8px; }

body {
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
}

nav {
  top:0;
  padding:14px 0 0;
  background:linear-gradient(180deg,rgba(251,252,250,.97),rgba(251,252,250,.78) 72%,rgba(251,252,250,0));
  border-bottom:0;
  backdrop-filter:none;
}
.nav-inner {
  height:64px;
  padding:0 18px 0 22px;
  border:1px solid rgba(217,228,220,.92);
  border-radius:999px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  box-shadow:0 8px 30px rgba(26,61,48,.07);
}
.brand { color:var(--forest); font-weight:850; }
.brand span { color:var(--blue); }
.links {
  gap:5px;
  padding:5px;
  color:var(--moss-600);
  border:1px solid rgba(217,228,220,.72);
  border-radius:999px;
  background:rgba(237,245,239,.72);
}
.links a {
  padding:7px 10px;
  border-radius:999px;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.links a:hover { color:var(--forest); background:var(--white); transform:translateY(-1px); }
.lang-switch {
  border-color:rgba(217,228,220,.9);
  background:rgba(255,255,255,.82);
  box-shadow:none;
}
.lang-switch a.active { color:var(--forest); }

.hero {
  position:relative;
  isolation:isolate;
  min-height:720px;
  margin-top:18px;
  padding:78px 64px 82px;
  grid-template-columns:1.08fr .92fr;
  gap:68px;
  overflow:hidden;
  border:1px solid rgba(206,224,211,.95);
  border-radius:48px;
  background:
    radial-gradient(circle at 79% 18%,rgba(91,145,159,.20),transparent 30%),
    radial-gradient(circle at 18% 82%,rgba(125,168,135,.19),transparent 34%),
    linear-gradient(135deg,var(--paper) 0%,var(--sage) 48%,var(--mist-blue) 100%);
  box-shadow:0 18px 56px rgba(39,79,61,.07);
}
.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  right:-170px;
  bottom:-220px;
  border-radius:50%;
  border:1px solid rgba(13,59,47,.10);
  box-shadow:0 0 0 48px rgba(255,255,255,.16),0 0 0 96px rgba(255,255,255,.10);
}
.hero > .reveal:first-child { position:relative; z-index:2; }
.kicker { color:var(--forest); margin-bottom:24px; }
.kicker::before { background:linear-gradient(90deg,var(--forest),var(--blue)); }
h1,h2 { font-family:var(--display-font); }
h1 {
  max-width:760px;
  color:var(--forest-950);
  font-size:clamp(54px,6.8vw,86px);
  letter-spacing:-.052em;
  line-height:.94;
  text-wrap:balance;
}
h2 { color:var(--forest); letter-spacing:-.04em; }
.hero-slogan {
  margin-top:26px;
  color:var(--forest-700);
  font-weight:720;
  letter-spacing:-.02em;
}
.hero-role { color:var(--forest-700); font-size:22px; }
.lede { color:var(--muted); }
.btn {
  border-color:var(--sage-200);
  background:rgba(255,255,255,.72);
  color:var(--forest-700);
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset;
}
.btn.primary { background:var(--forest); border-color:var(--forest); color:var(--white); }
.btn.linked { background:var(--paper); border-color:#cddfe6; color:var(--steel); }
.btn:hover { box-shadow:0 12px 28px rgba(30,72,55,.12); }
.btn.primary:hover { background:var(--forest-2); }
.meta { color:var(--moss-450); }
.meta span::before { color:#9cb0a5; }

.headshot-card {
  padding:12px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:42px;
  background:rgba(255,255,255,.54);
  backdrop-filter:blur(10px);
  box-shadow:0 26px 70px rgba(35,77,59,.16);
}
.headshot-card::after {
  width:190px;
  height:190px;
  right:-28px;
  bottom:-28px;
  border-radius:54px;
  background:linear-gradient(135deg,rgba(94,145,117,.26),rgba(82,136,159,.12));
}
.headshot-card img { border-radius:32px; }

.stats { padding:28px 0 8px; background:transparent; color:var(--ink); }
.stats-grid { gap:12px; }
.stat {
  padding:24px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--white);
  box-shadow:0 8px 26px rgba(35,77,59,.045);
}
.stat:last-child { border-right:1px solid var(--line); }
.stat strong { color:var(--forest); font-size:27px; }
.stat span { color:var(--muted); }

.section { padding:104px 0; }
.section.alt { background:linear-gradient(180deg,var(--sage) 0%,var(--paper) 100%); }
.eyebrow { color:var(--blue); }
.section-intro { color:var(--muted); }

.work-grid { gap:72px; }
.work-photo {
  border:1px solid rgba(255,255,255,.82);
  border-radius:32px;
  box-shadow:0 24px 56px rgba(32,74,55,.12);
}
.focus { border-color:var(--line); border-radius:20px; box-shadow:0 5px 18px rgba(34,75,57,.035); transition:.22s ease; }
.focus:hover { transform:translateY(-2px); border-color:var(--sage-300); box-shadow:var(--soft-shadow); }
.focus-num { color:var(--forest); background:var(--sage); border:1px solid var(--line); }
.pill { border-color:var(--line); color:var(--moss-600); background:rgba(255,255,255,.72); }

.ai-section { background:linear-gradient(180deg,var(--white) 0%,var(--mist-blue) 48%,var(--paper) 100%); }
.ai-feature {
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  background:linear-gradient(135deg,var(--forest-900) 0%,var(--forest-2) 55%,var(--steel) 100%);
  box-shadow:0 26px 64px rgba(20,58,47,.18);
}
.ai-feature::before { background:radial-gradient(circle,rgba(165,212,181,.30),rgba(165,212,181,0) 68%); }
.ai-feature p { color:var(--line); }
.ai-badge { color:var(--mint-200); background:rgba(255,255,255,.09); }
.ai-actions a.primary { color:var(--forest); }
.market-card,.skill-page-card,.cred-card,.ext-card {
  border-color:var(--line);
  border-radius:24px;
  box-shadow:0 7px 24px rgba(35,77,59,.035);
}
.market-card:hover,.skill-page-card:hover,.cred-card:hover,.ext-card:hover {
  transform:translateY(-3px);
  border-color:var(--sage-300);
  box-shadow:var(--soft-shadow);
}
.market-card a,.skill-page-card .go,.ext-card .ext-go { color:var(--steel); }
.skill-page-thumb { background:var(--sage); border-radius:20px; }

.compliance-showcase {
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  background:linear-gradient(135deg,var(--forest-900) 0%,var(--forest-2) 55%,var(--steel) 100%);
  box-shadow:0 26px 64px rgba(20,58,47,.18);
}
.compliance-copy p { color:var(--line); }
.compliance-copy .collection-label { color:var(--mint-200); }
.compliance-facts span { background:rgba(255,255,255,.10); color:var(--sage); }
.compliance-logo-grid span { border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.12); }

.credentials { background:var(--white); }
.cred-card { padding:26px 22px; }
.cred-card.featured { border-color:var(--sage-400); box-shadow:0 16px 38px rgba(38,91,61,.09); }
.cred-mark { color:var(--forest); background:var(--sage); border:1px solid var(--line); }
.cred-level { color:var(--moss-500); }
.cred-btn { border-color:var(--line); color:#315246; }
.cred-btn:hover { border-color:var(--blue); color:var(--blue); }
.cred-btn.primary { background:var(--forest); border-color:var(--forest); }
.cert-toolbar { background:var(--paper); border-color:var(--line); }
.cert-view { background:var(--paper); }

.beyond-head { gap:84px; }
.quote { color:#566d61; border-left-color:#7cab8a; }
.marathon-feature { border-radius:34px; box-shadow:0 24px 58px rgba(25,59,46,.15); }
.marathon-feature::after { background:linear-gradient(180deg,transparent 38%,rgba(5,31,24,.88) 100%); }
.gallery { gap:24px; }
.card { border-color:var(--line); border-radius:28px; box-shadow:0 7px 24px rgba(35,77,59,.035); }
.card:hover { box-shadow:var(--soft-shadow); }
.card-copy .small { color:var(--blue); }

.closing {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:36px;
  background:
    radial-gradient(circle at 90% 15%,rgba(82,136,159,.28),transparent 30%),
    linear-gradient(135deg,var(--forest-950),var(--forest-800) 58%,var(--steel));
  box-shadow:0 28px 68px rgba(18,54,42,.18);
}
.closing h2 { color:var(--white); }
.closing p { color:var(--line); }
.identity div { background:rgba(255,255,255,.085); color:var(--line); border:1px solid rgba(255,255,255,.06); }

.links-section { background:linear-gradient(180deg,var(--mist-blue),var(--paper)); }
.ext-card { background:rgba(255,255,255,.86); }

.strava-strip { border-radius:24px; }

footer {
  margin-top:0;
  padding:38px 0 48px;
  color:var(--sage-250);
  background:var(--forest-900);
}
footer a { color:var(--sage); }
.footer-inner { align-items:center; }

.cert-shell { border-radius:26px; }
.cert-close { transition:transform .2s ease,border-color .2s ease; }
.cert-close:hover { transform:rotate(4deg); border-color:var(--sage-400); }

.reveal-enabled .reveal { transform:translateY(18px); transition:opacity .62s ease,transform .62s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 1020px) {
  .hero { padding:64px 44px 70px; gap:48px; }
}
@media (max-width: 880px) {
  nav { padding-top:10px; }
  .nav-inner { height:58px; padding:0 14px 0 16px; }
  .hero { margin-top:14px; padding:54px 34px 46px; border-radius:36px; gap:40px; }
  .hero .headshot-card { max-width:520px; justify-self:center; }
  .stats-grid { gap:10px; }
  .stat:nth-child(2),.stat:nth-child(-n+2) { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
}
@media (max-width: 560px) {
  nav { padding-top:8px; }
  .nav-inner { height:54px; }
  .brand { max-width:58%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .hero { padding:44px 22px 26px; border-radius:28px; }
  h1 { font-size:clamp(46px,14vw,62px); }
  h2 { font-size:clamp(36px,11vw,48px); }
  .hero-slogan { font-size:19px; }
  .hero-role { font-size:19px; }
  .headshot-card { border-radius:30px; padding:9px; }
  .headshot-card img { border-radius:23px; }
  .stats { padding-top:18px; }
  .stat { padding:21px 19px; }
  .section { padding:78px 0; }
  .ai-feature,.compliance-showcase,.closing { border-radius:28px; }
  .market-card,.skill-page-card,.cred-card,.ext-card,.card { border-radius:22px; }
  footer { padding-bottom:38px; }
}

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



/* ===== V19 full-site Solra/DNA consistency layer =====
   Extends the V18 visual language to Compliance, Skill detail and Privacy pages.
   Content, routes, assets and behavior remain unchanged. */

.subpage {
  background:var(--paper);
  color:var(--ink);
}

.subpage h1,
.subpage h2,
.subpage .policy-section h2,
.subpage .panel h3,
.subpage .where h3,
.subpage .principle-box h3,
.subpage .skill-card h3,
.subpage .framework-card h3,
.subpage .flow-card h3 {
  font-family:var(--display-font);
}

.subpage nav {
  top:0;
  padding:14px 0 0;
  background:linear-gradient(180deg,rgba(251,252,250,.97),rgba(251,252,250,.78) 72%,rgba(251,252,250,0));
  border-bottom:0;
  backdrop-filter:none;
}
.subpage .nav-inner {
  min-height:64px;
  height:64px;
  padding:0 18px 0 22px;
  border:1px solid rgba(217,228,220,.92);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px);
  box-shadow:0 8px 30px rgba(26,61,48,.07);
}
.subpage .brand { color:var(--forest); font-weight:850; }
.subpage .brand span { color:var(--blue); }
.subpage .links {
  gap:5px;
  padding:5px;
  border:1px solid rgba(217,228,220,.72);
  border-radius:999px;
  background:rgba(237,245,239,.72);
  color:var(--moss-600);
}
.subpage .links a { padding:7px 10px; border-radius:999px; }
.subpage .links a:hover { color:var(--forest); background:var(--white); text-decoration:none; }
.subpage .home-link { color:var(--moss-600); }
.subpage .home-link:hover { color:var(--forest); text-decoration:none; }
.subpage .lang-switch {
  border-color:rgba(217,228,220,.9);
  background:rgba(255,255,255,.82);
  box-shadow:none;
}
.subpage .lang-switch a.active { color:var(--forest); }

.subpage .eyebrow,
.subpage .kicker { color:var(--blue); }
.subpage .lede,
.subpage .section-intro,
.subpage .tagline,
.subpage .panel li,
.subpage .where p,
.subpage .policy-section p,
.subpage .policy-section li { color:var(--muted); }

.subpage .btn {
  border-color:var(--sage-200);
  background:rgba(255,255,255,.82);
  color:var(--forest-700);
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset;
}
.subpage .btn.primary { background:var(--forest); border-color:var(--forest); color:var(--white); }
.subpage .btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,72,55,.12); text-decoration:none; }
.subpage .btn.primary:hover { background:var(--forest-2); }

/* Skill detail pages */
.skill-detail-page .breadcrumb { padding-top:34px; color:#6f8278; }
.skill-detail-page .breadcrumb a { color:var(--blue); }
.skill-detail-page .hero {
  position:relative;
  isolation:isolate;
  margin-top:18px;
  margin-bottom:34px;
  padding:62px 56px;
  gap:58px;
  overflow:hidden;
  border:1px solid rgba(206,224,211,.95);
  border-radius:42px;
  background:
    radial-gradient(circle at 82% 14%,rgba(91,145,159,.18),transparent 29%),
    radial-gradient(circle at 15% 92%,rgba(125,168,135,.16),transparent 33%),
    linear-gradient(135deg,var(--paper) 0%,var(--sage) 48%,var(--mist-blue) 100%);
  box-shadow:0 18px 56px rgba(39,79,61,.07);
}
.skill-detail-page .hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  right:-150px;
  bottom:-190px;
  border-radius:50%;
  border:1px solid rgba(13,59,47,.10);
  box-shadow:0 0 0 44px rgba(255,255,255,.14),0 0 0 88px rgba(255,255,255,.09);
}
.skill-detail-page .hero h1 {
  color:var(--forest-950);
  font-family:var(--display-font);
  font-size:clamp(50px,6.5vw,78px);
  line-height:.95;
}
.skill-detail-page .tagline { color:var(--forest-700); font-weight:720; }
.skill-detail-page .art {
  padding:10px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:34px;
  background:rgba(255,255,255,.58);
  box-shadow:0 24px 58px rgba(35,77,59,.14);
}
.skill-detail-page .art img { border-radius:25px; }
.skill-detail-page .section { padding:88px 0; }
.skill-detail-page .section.alt { background:linear-gradient(180deg,var(--sage),var(--paper)); }
.skill-detail-page .flow-grid { gap:16px; }
.skill-detail-page .flow-card,
.skill-detail-page .panel,
.skill-detail-page .where {
  border-color:var(--line);
  border-radius:24px;
  box-shadow:0 6px 22px rgba(35,77,59,.035);
}
.skill-detail-page .flow-card {
  transition:transform .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.skill-detail-page .flow-card:hover {
  transform:translateY(-3px);
  border-color:var(--forest);
  background:var(--forest);
  color:var(--white);
  box-shadow:0 18px 38px rgba(30,72,55,.15);
}
.skill-detail-page .flow-card:hover p { color:var(--line); }
.skill-detail-page .num {
  color:var(--forest);
  background:var(--sage);
  border:1px solid var(--sage-2);
}
.skill-detail-page .flow-card:hover .num { background:var(--mint-100); border-color:var(--mint-100); }
.skill-detail-page .principle-box {
  border:1px solid rgba(255,255,255,.09);
  border-radius:32px;
  background:
    radial-gradient(circle at 90% 10%,rgba(82,136,159,.25),transparent 28%),
    linear-gradient(135deg,var(--forest-950),var(--forest-800) 58%,var(--steel));
  box-shadow:0 24px 54px rgba(18,54,42,.16);
}
.skill-detail-page .principle-box .clean-list li { color:var(--line); }
.skill-detail-page .principle-box .clean-list li::before { color:var(--mint-300); }
.skill-detail-page .clean-list li::before { color:#4f9169; }
.skill-detail-page .where { background:linear-gradient(145deg,var(--white),var(--paper)); }

/* Compliance catalog */
.compliance-page .hero {
  /* Reset the homepage .hero grid. Without this, the catalog wrapper occupies
     only the first global hero column and leaves a large empty area on the right. */
  display:block;
  min-height:auto;
  grid-template-columns:none;
  align-items:initial;
  gap:0;
  padding:38px 0 28px;
}
.compliance-page .hero > .wrap {
  position:relative;
  overflow:hidden;
  padding:64px 58px;
  border:1px solid rgba(206,224,211,.95);
  border-radius:42px;
  background:
    radial-gradient(circle at 86% 12%,rgba(91,145,159,.19),transparent 28%),
    linear-gradient(135deg,var(--paper) 0%,var(--sage) 53%,var(--mist-blue) 100%);
  box-shadow:0 18px 56px rgba(39,79,61,.07);
}
.compliance-page .hero h1 {
  color:var(--forest-950);
  font-family:var(--display-font);
  font-size:clamp(48px,6.6vw,76px);
}
.compliance-page .summary-strip { padding:4px 0 28px; background:transparent; color:var(--ink); }
.compliance-page .summary-grid { gap:12px; }
.compliance-page .summary-cell {
  padding:24px 22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--white);
  box-shadow:0 8px 26px rgba(35,77,59,.045);
}
.compliance-page .summary-cell:last-child { border-right:1px solid var(--line); }
.compliance-page .summary-cell strong { color:var(--forest); }
.compliance-page .summary-cell span { color:var(--muted); }
.compliance-page .section { padding:86px 0; }
.compliance-page .section.alt { background:linear-gradient(180deg,var(--sage),var(--paper)); }
.compliance-page .skill-grid { gap:18px; }
/* With 13 cards in a 3-column desktop grid, center the single final card. */
.compliance-page .skill-grid > .skill-card:last-child:nth-child(3n+1) { grid-column:2; }
.compliance-page .skill-card {
  border-color:var(--line);
  border-radius:28px;
  background:var(--white);
  box-shadow:0 6px 22px rgba(35,77,59,.035);
}
.compliance-page .skill-card:hover {
  transform:translateY(-4px);
  border-color:var(--sage-400);
  box-shadow:var(--soft-shadow);
}
.compliance-page .skill-logo { border-radius:22px; background:var(--sage); }
.compliance-page .price { background:var(--sage); color:#2e7657; }
.compliance-page .market-label,
.compliance-page .one-time { color:var(--blue); }
.compliance-page .framework-card {
  border-color:var(--line);
  border-radius:22px;
  box-shadow:0 5px 18px rgba(35,77,59,.03);
  transition:.22s ease;
}
.compliance-page .framework-card:hover { transform:translateY(-2px); border-color:var(--sage-300); box-shadow:var(--soft-shadow); }
.compliance-page .framework-num { color:var(--forest); background:var(--sage); border:1px solid var(--line); }
.compliance-page .disclaimer {
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  background:
    radial-gradient(circle at 92% 8%,rgba(82,136,159,.27),transparent 28%),
    linear-gradient(135deg,var(--forest-950),var(--forest-800) 58%,var(--steel));
  box-shadow:0 26px 62px rgba(18,54,42,.17);
}
.compliance-page .disclaimer p { color:var(--line); }
.compliance-page .disclaimer li { color:var(--line); }
.compliance-page .disclaimer li::before { color:var(--mint-300); }

/* Privacy */
.privacy-page main { padding:50px 0 84px; }
.privacy-page .policy-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:36px;
  background:var(--white);
  box-shadow:0 24px 64px rgba(26,61,48,.10);
}
.privacy-page .policy-head {
  padding:58px 58px 42px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(91,145,159,.18),transparent 26%),
    linear-gradient(135deg,var(--paper) 0%,var(--sage) 56%,var(--mist-blue) 100%);
}
.privacy-page h1 {
  color:var(--forest-950);
  font-family:var(--display-font);
  font-size:clamp(44px,6vw,66px);
}
.privacy-page .updated { color:var(--moss-500); }
.privacy-page .intro { color:var(--muted); }
.privacy-page .policy-body { padding:24px 58px 58px; }
.privacy-page .policy-section { border-color:var(--sage); }
.privacy-page .policy-section h2 { color:var(--forest); font-size:24px; }
.privacy-page .policy-section a { color:var(--blue); }
.privacy-page .notice { background:var(--sage); color:var(--muted); }

.subpage footer {
  margin-top:0;
  padding:38px 0 48px;
  color:var(--sage-250);
  background:var(--forest-900);
  border-top:0;
}
.subpage footer a { color:var(--sage); }
.subpage .footer-inner { align-items:center; }

@media (max-width: 980px) {
  .skill-detail-page .hero { padding:48px 40px; gap:42px; }
  .compliance-page .hero > .wrap { padding:50px 42px; }
  .compliance-page .skill-grid > .skill-card:last-child:nth-child(odd) {
    grid-column:1 / -1;
    width:calc((100% - 18px) / 2);
    justify-self:center;
  }
}
@media (max-width: 700px) {
  .subpage nav { padding-top:8px; }
  .subpage .nav-inner { min-height:54px; height:54px; padding:0 13px 0 15px; gap:10px; }
  .subpage .brand { max-width:58%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .skill-detail-page .breadcrumb { padding-top:24px; }
  .skill-detail-page .hero { margin-top:12px; padding:38px 22px 28px; border-radius:28px; gap:30px; }
  .skill-detail-page .hero h1 { font-size:clamp(44px,14vw,58px); }
  .skill-detail-page .art { border-radius:26px; padding:8px; }
  .skill-detail-page .art img { border-radius:20px; }
  .skill-detail-page .section { padding:70px 0; }
  .compliance-page .hero { padding-top:26px; }
  .compliance-page .hero > .wrap { padding:42px 22px 34px; border-radius:28px; }
  .compliance-page .hero h1 { font-size:clamp(43px,13vw,58px); }
  .compliance-page .summary-grid { gap:10px; }
  .compliance-page .summary-cell { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .compliance-page .section { padding:70px 0; }
  .privacy-page main { padding:34px 0 60px; }
  .privacy-page .policy-card { border-radius:28px; }
  .privacy-page .policy-head { padding:40px 24px 30px; }
  .privacy-page .policy-body { padding:12px 24px 38px; }
}

/* ===== Personal-site template showcase (templates themselves remain fully isolated) ===== */
.template-section {
  padding:84px 0 100px;
  background:linear-gradient(180deg,var(--white) 0%,var(--mist-blue) 100%);
}
.template-showcase-shell { display:block; }
.template-showcase-copy { max-width:850px; margin-bottom:36px; }
.template-showcase-copy .section-intro { margin-bottom:0; }
.template-showcase-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.template-showcase-card {
  --template-accent:var(--forest);
  position:relative;
  overflow:hidden;
  min-height:310px;
  padding:28px;
  border:1px solid rgba(13,59,47,.12);
  border-radius:30px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  box-shadow:0 16px 42px rgba(26,61,48,.09);
  display:flex;
  flex-direction:column;
  gap:28px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.template-showcase-card::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:5px;
  background:var(--template-accent);
}
.template-showcase-card::after {
  content:"";
  position:absolute;
  width:180px; height:180px;
  right:-96px; bottom:-104px;
  border-radius:50%;
  background:color-mix(in srgb,var(--template-accent) 8%,transparent);
  box-shadow:0 0 0 34px color-mix(in srgb,var(--template-accent) 4%,transparent);
  pointer-events:none;
}
.template-showcase-card:hover {
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--template-accent) 34%,var(--line));
  box-shadow:0 24px 56px rgba(26,61,48,.14);
}
.template-card-wedding { --template-accent:#a7864c; }
.template-card-renovation { --template-accent:#8a5b3e; }
.template-card-ai { --template-accent:#5868d7; }
.template-card-restaurant { --template-accent:#6f7e52; }
.template-card-home-services { --template-accent:#ff6b35; }
.template-card-home-care { --template-accent:#30b568; }
.template-card-fintech-editorial { --template-accent:#2f63ff; }
.template-card-fintech-dark { --template-accent:#8b5cf6; }
.template-card-head,
.template-card-bottom {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
}
.template-card-head { gap:16px; }
.template-card-icon {
  width:56px;
  height:56px;
  flex:0 0 56px;
  padding:8px;
  border-radius:17px;
  border:1px solid color-mix(in srgb,var(--template-accent) 20%,var(--line));
  background:color-mix(in srgb,var(--template-accent) 7%,var(--white));
  box-shadow:0 8px 20px rgba(26,61,48,.07);
  display:grid;
  place-items:center;
}
.template-card-icon img { width:100%; height:100%; object-fit:contain; border-radius:11px; }
.template-card-meta {
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.template-index {
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:baseline;
  column-gap:8px;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--template-accent) 9%,var(--white));
  border:1px solid color-mix(in srgb,var(--template-accent) 17%,var(--line));
  color:var(--template-accent);
}
.template-index small {
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.template-index strong {
  font-size:16px;
  line-height:1;
  letter-spacing:.02em;
}
.template-type {
  color:var(--moss-450);
  font-size:12px;
  font-weight:750;
  letter-spacing:.035em;
}
.template-card-body { position:relative; z-index:1; flex:1; }
.template-showcase-card h3 {
  margin:0 0 12px;
  font-family:var(--display-font);
  font-size:clamp(30px,3.5vw,42px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.template-showcase-card p {
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.template-card-bottom {
  gap:16px;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid rgba(13,59,47,.09);
}
.template-card-bottom span {
  color:var(--moss-450);
  font-size:12px;
  font-weight:750;
}
.template-card-bottom strong {
  color:var(--template-accent);
  font-size:13px;
  white-space:nowrap;
  transition:transform .2s ease;
}
.template-showcase-card:hover .template-card-bottom strong { transform:translateX(3px); }

@media (max-width: 820px) {
  .template-showcase-grid { grid-template-columns:1fr; }
  .template-showcase-card { min-height:280px; }
}
@media (max-width: 560px) {
  .template-section { padding:68px 0 78px; }
  .template-showcase-copy { margin-bottom:28px; }
  .template-showcase-grid { gap:18px; }
  .template-showcase-card { min-height:0; padding:22px; border-radius:24px; gap:22px; }
  .template-card-icon { width:50px; height:50px; flex-basis:50px; border-radius:15px; }
  .template-card-meta { gap:8px; }
  .template-card-bottom { align-items:flex-start; flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-showcase-card,
  .template-card-bottom strong { transition:none; }
  .template-showcase-card:hover { transform:none; }
}
@media (max-width: 680px) {
  .compliance-page .skill-grid > .skill-card:last-child:nth-child(odd) {
    grid-column:auto;
    width:auto;
    justify-self:stretch;
  }
}

/* ===== V26 stable shareable section anchors + sticky-nav offset ===== */
.anchor-alias { display:block; height:0; scroll-margin-top:104px; }
:where(#about,#professional,#ai-skills,#compliance,#web-design,#credentials,#beyond-work,#links,#profile) {
  scroll-margin-top:104px;
}
@media (min-width: 881px) and (max-width: 1120px) {
  .nav-inner { gap:10px; }
  .brand { font-size:14px; }
  .links { gap:2px; padding:4px; }
  .links a { padding:7px 7px; font-size:12.5px; }
  .lang-switch { padding:6px 8px; font-size:12px; }
}
@media (max-width: 880px) {
  .anchor-alias,
  :where(#about,#professional,#ai-skills,#compliance,#web-design,#credentials,#beyond-work,#links,#profile) {
    scroll-margin-top:86px;
  }
}

/* ===== Mobile navigation (P0-2) =====================================
   Below 880px the horizontal link row becomes a dropdown panel driven
   by .nav-toggle. Above 880px the toggle is hidden and nothing changes. */
.nav-toggle {
  display:none; width:42px; height:42px; padding:0; flex:0 0 auto;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line); border-radius:12px; background:var(--white);
  cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.nav-toggle span {
  display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle:hover { border-color:var(--forest); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display:inline-flex; }

  .links,
  .subpage .links {
    position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
    display:flex; flex-direction:column; gap:0;
    margin:0; padding:6px 18px 10px;
    border:1px solid var(--line); border-radius:20px;
    background:var(--white);
    box-shadow:var(--shadow); color:var(--slate-600);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  nav.nav-open .links,
  .subpage nav.nav-open .links {
    opacity:1; visibility:visible; transform:none;
  }
  .links a,
  .subpage .links a {
    padding:14px 4px; border-radius:0; font-size:15px;
    border-bottom:1px solid rgba(217,228,220,.75);
  }
  .links a:last-child,
  .subpage .links a:last-child { border-bottom:0; }
  .subpage .links a:hover { background:transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .links, .nav-toggle span { transition:none; }
}

/* ===== CJK typography (P0-3) ========================================
   Scoped to :lang(zh) so English pages render byte-identically. Latin
   glyphs still resolve from the Latin faces listed first; only CJK
   glyphs fall through to the Chinese faces. */
:lang(zh) {
  --display-font:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,
                 "Songti SC","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",SimSun,serif;
}
:lang(zh) body,
body:lang(zh) {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
               "PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",
               "Noto Sans SC","Microsoft YaHei",sans-serif;
}

/* Negative tracking is tuned for Latin letterforms and visibly cramps
   square CJK glyphs. Reset it only on elements that actually carry
   Chinese copy, so Latin-only headings keep their intended tracking. */
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) h4,
:lang(zh) .hero-slogan,
:lang(zh) .hero-role,
:lang(zh) .stat strong,
:lang(zh) .overlay h3,
:lang(zh) .ai-feature h3,
:lang(zh) .compliance-copy h3,
:lang(zh) .skill-explorer-head h3,
:lang(zh) .privacy-page h1 {
  letter-spacing:normal;
}

/* CJK has no inter-word spaces, so lines need a little more air. */
:lang(zh) .lede,
:lang(zh) .section-intro,
:lang(zh) .quote,
:lang(zh) .policy-section p,
:lang(zh) .policy-section li {
  line-height:1.85;
}