/* ================================================================
   Midwest Orthopedic Network — Kansas

   BRAND COLOURS, sampled from MonKan-Logo.svg:
     navy   #15256E   the KANSAS wordmark
     blue   #3B75AF   the MON wordmark and the left of the sphere
     green  #36852A   the right of the sphere

   --accent is what the old build called --red: links, buttons,
   focus rings, the active nav item.

   All three pass WCAG AA against white (navy 13.8:1, blue 4.83:1,
   green 4.62:1). Navy carries the accent role because body links at
   13.8:1 stay comfortable at small sizes, where the blue only just
   clears the 4.5 floor. The blue and green do the brand work on the
   top bar, section rules and the CTA gradient. Swap --accent to the
   blue if the client wants it louder.
   ================================================================ */

:root{
  --navy:       #15256E;
  --blue:       #3B75AF;
  --green:      #36852A;

  --accent:     #15256E;   /* was --red  */
  --accent-dark:#0e1a4e;   /* was --red-dark */
  /* Kept as aliases so any rule still naming --red keeps working. */
  --red:        var(--accent);
  --red-dark:   var(--accent-dark);

  --ink:        #1a1a1a;
  --ink-soft:   #4a4a4a;
  --line:       #e4e4e4;
  --bg-tint:    #f6f8fb;
  --white:      #fff;

  --wrap:       1180px;
  --radius:     6px;
  --font:       "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.skip{
  position:absolute; left:-9999px;
  background:var(--red); color:#fff; padding:10px 16px; z-index:200;
}
.skip:focus{ left:12px; top:12px; }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:84px;
}
.logo img{ width:176px; height:auto; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav-list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav-list li{ position:relative; }

.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  font:inherit; font-size:14.5px; font-weight:600;
  letter-spacing:.2px;
  color:var(--ink); background:none; border:0;
  cursor:pointer; border-radius:var(--radius);
}
.nav-link:hover{ color:var(--red); text-decoration:none; background:var(--bg-tint); }
.nav-list .accent > .nav-link{ color:var(--red); }
.nav-link[aria-current="page"]{ color:var(--red); }

.caret{ width:10px; height:6px; flex:none; }

.sub{
  position:absolute; top:100%; left:0; min-width:240px;
  list-style:none; margin:0; padding:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.09);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s, transform .14s;
}
.has-kids:hover > .sub,
.has-kids.open > .sub{ opacity:1; visibility:visible; transform:none; }

.sub a{
  display:block; padding:9px 12px;
  font-size:14.5px; font-weight:500; color:var(--ink); border-radius:4px;
}
.sub a:hover{ background:var(--bg-tint); color:var(--red); text-decoration:none; }

.head-call{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  background:var(--red); color:#fff;
  font-size:15px; font-weight:600;
  border-radius:var(--radius); white-space:nowrap;
}
.head-call:hover{ background:var(--red-dark); text-decoration:none; }

.burger{
  display:none;
  width:46px; height:46px; padding:11px;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer;
}
.burger span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
}
.burger span + span{ margin-top:5px; }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.site-foot{
  margin-top:72px;
  background:var(--red); color:#fff;
}
.site-foot a{ color:#fff; }

.foot-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:48px;
  padding-top:56px; padding-bottom:40px;
}

.foot-name{ margin:0 0 6px; font-size:19px; font-weight:700; }
.foot-about address{ font-style:normal; line-height:1.8; opacity:.94; }
.foot-call{
  display:inline-block; margin-top:14px;
  font-size:20px; font-weight:700;
}

.social{ display:flex; gap:10px; list-style:none; margin:22px 0 0; padding:0; }
.social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  background:rgba(255,255,255,.14); border-radius:50%;
}
.social a:hover{ background:#fff; color:var(--red); }

.foot-links h2,
.foot-form h2{
  margin:0 0 16px;
  font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  opacity:.85;
}
.foot-links ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:24px; }
.foot-links li{ margin-bottom:9px; break-inside:avoid; }
.foot-links a{ font-size:14.5px; opacity:.94; }

/* ---- footer form ---- */
.foot-form form{ display:block; }
.foot-form label{
  display:block; margin-bottom:5px;
  font-size:13px; font-weight:500; opacity:.9;
}
.foot-form input,
.foot-form textarea{
  width:100%; padding:11px 13px; margin-bottom:14px;
  font:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:var(--radius);
}
.foot-form textarea{ resize:vertical; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.foot-form button{
  width:100%; padding:13px 24px;
  font:inherit; font-size:16px; font-weight:600;
  color:var(--red); background:#fff;
  border:0; border-radius:var(--radius); cursor:pointer;
}
.foot-form button:hover{ background:#f0f0f0; }

.form-ok{
  padding:12px 14px; margin-bottom:16px;
  background:rgba(255,255,255,.16); border-radius:var(--radius); font-size:15px;
}
.hp{ position:absolute; left:-9999px; }

.foot-base{
  padding:18px 20px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:13.5px; opacity:.85;
}
.foot-base p{ margin:0; }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width:1024px){
  .burger{ display:block; }

  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:12px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
  }
  .nav.open{ display:flex; }

  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-link{ width:100%; justify-content:space-between; padding:14px 12px; font-size:16px; }

  .sub{
    position:static; display:none;
    opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:0 0 8px 12px;
    min-width:0;
  }
  .has-kids.open > .sub{ display:block; }
  .has-kids:hover > .sub{ display:none; }
  .has-kids.open:hover > .sub{ display:block; }

  .head-call{ margin-top:10px; justify-content:center; padding:14px 20px; }

  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-form{ grid-column:1 / -1; }
}

@media (max-width:640px){
  .head-inner{ min-height:70px; }
  .logo img{ width:142px; }
  .foot-grid{ grid-template-columns:1fr; gap:36px; padding-top:40px; }
  .foot-links ul{ columns:2; }
  .row-2{ grid-template-columns:1fr; gap:0; }
}

/* ================================================================
   HOMEPAGE
   ================================================================ */

.section{ padding:72px 0; }
.section-tint{ background:var(--bg-tint); }
.wrap-narrow{ max-width:820px; }

.section-head{
  margin:0 0 40px;
  font-size:clamp(26px,3.4vw,34px); font-weight:700; line-height:1.25;
  text-align:center;
}

/* ---- hero ---- */
.hero{
  padding:80px 0 76px;
  background:linear-gradient(160deg,#36852a 0%,#36852a 100%);
  color:#ffffff; text-align:center;
}
.hero h1{
  max-width:17ch;
  margin:0 auto 18px;
  font-size:clamp(30px,4.6vw,48px); font-weight:700; line-height:1.18;
  letter-spacing:-.4px;
}
.hero-sub{
  max-width:60ch; margin:0 auto 32px;
  font-size:clamp(16px,1.9vw,18.5px); line-height:1.7; color:rgba(255,255,255,.82);
}
.hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-block; padding:15px 32px;
  font-size:16px; font-weight:600; border-radius:var(--radius);
}
.btn:hover{ text-decoration:none; }
.btn-solid{ background:var(--red); color:#fff; }
.btn-solid:hover{ background:var(--red-dark); }
.btn-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }

/* ---- service tiles ---- */
.tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  list-style:none; margin:0; padding:0;
}
.tile a{
  display:block; height:100%;
  color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#fff;
  transition:box-shadow .16s, border-color .16s;
}
.tile a:hover{
  text-decoration:none;
  border-color:#d2d2d2;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tile h3{
  margin:20px 22px 7px;
  font-size:18px; font-weight:600; color:var(--red);
}
.tile p{ margin:0 22px 22px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

/* ---- faq ---- */
.faq{ margin:0; }
.faq-item{ padding:22px 0; border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq dt{ margin:0 0 7px; font-size:17px; font-weight:600; }
.faq dd{ margin:0; font-size:16px; color:var(--ink-soft); max-width:70ch; }

/* ---- stats ---- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  list-style:none; margin:0; padding:0; text-align:center;
}
.stats li{
  padding:34px 20px;
  background:var(--red); color:#fff; border-radius:var(--radius);
}
.stats strong{ display:block; font-size:clamp(34px,4.6vw,46px); font-weight:700; line-height:1.1; }
.stats span{ display:block; margin-top:6px; font-size:14.5px; opacity:.92; }

@media (max-width:900px){
  .tiles{ grid-template-columns:repeat(2,1fr); gap:22px; }
}
@media (max-width:640px){
  .section{ padding:52px 0; }
  .hero{ padding:58px 0 54px; }
  .hero-actions .btn{ width:100%; }
  .tiles{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; gap:14px; }
  .stats li{ padding:26px 20px; }
}

/* ================================================================
   INNER PAGES
   ================================================================ */

/* ---- page head ---- */
.page-head{
  padding:46px 0 40px;
  background:var(--bg-tint);
  border-bottom:1px solid var(--line);
}
.crumb{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--red); }
.crumb span[aria-hidden]{ margin:0 7px; opacity:.5; }

.page-head h1{
  max-width:20ch;
  margin:0;
  font-size:clamp(28px,4.2vw,42px); font-weight:700; line-height:1.18;
  letter-spacing:-.3px;
}
.page-head .lede{
  max-width:62ch; margin:16px 0 0;
  font-size:clamp(16px,1.9vw,18.5px); line-height:1.65; color:var(--ink-soft);
}

/* ---- split (text + image) ---- */
.split{ padding:72px 0; }
.split-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.split-text h2{ margin:0 0 18px; font-size:clamp(23px,2.9vw,30px); font-weight:700; line-height:1.3; }
.split-text p{ margin:0 0 16px; font-size:16.5px; line-height:1.72; color:var(--ink-soft); max-width:52ch; }
.split-text .btn{ margin-top:10px; }
.split-img img{ width:100%; border-radius:var(--radius); }

/* ---- prose ---- */
.prose-lead{
  margin:0 0 26px;
  font-size:17.5px; line-height:1.75; color:var(--ink-soft); max-width:68ch;
}

/* ---- tick list ---- */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:0 0 0 32px; margin-bottom:13px;
  font-size:16.5px; line-height:1.6;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:16px; height:9px;
  border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}
.ticks-sm li{ font-size:15px; margin-bottom:10px; padding-left:28px; }

/* ---- generic cards ---- */
.cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  list-style:none; margin:0; padding:0;
}
.cards-3{ grid-template-columns:repeat(3,1fr); }
.card{
  padding:26px 28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.section-tint .card{ background:#fff; }
.card h3{ margin:0 0 9px; font-size:17.5px; font-weight:600; color:var(--red); }
.card p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }

/* ---- numbered steps ---- */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li{
  counter-increment:step;
  position:relative; padding:0 0 28px 62px;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:0;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-size:16px; font-weight:700; border-radius:50%;
}
.steps li::after{
  content:""; position:absolute; left:18.5px; top:44px; bottom:6px;
  width:1.5px; background:var(--line);
}
.steps li:last-child{ padding-bottom:0; }
.steps li:last-child::after{ display:none; }
.steps h3{ margin:7px 0 6px; font-size:17.5px; font-weight:600; }
.steps p{ margin:0; font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:60ch; }

.mini-steps{ counter-reset:ms; list-style:none; margin:0 0 28px; padding:0; }
.mini-steps li{
  counter-increment:ms;
  position:relative; padding-left:32px; margin-bottom:11px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.mini-steps li::before{
  content:counter(ms);
  position:absolute; left:0; top:1px;
  width:22px; height:22px; display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-size:12px; font-weight:700; border-radius:50%;
}

/* ---- locations ---- */
.area-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  list-style:none; margin:0; padding:0;
}
.area-grid li{
  padding:22px 24px;
  border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--radius); background:#fff;
}
.area-grid h3{ margin:0 0 6px; font-size:16.5px; font-weight:600; }
.area-grid p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.area-note{
  margin:34px 0 0; text-align:center;
  font-size:16px; color:var(--ink-soft);
}

/* ---- closing CTA band ---- */
.cta-band{
  padding:66px 0;
  background:linear-gradient(160deg,#2a2a2d 0%,#17171a 100%);
  color:#fff; text-align:center;
}
.cta-band h2{ margin:0 0 12px; font-size:clamp(25px,3.2vw,32px); font-weight:700; }
.cta-band p{ margin:0 auto 28px; max-width:56ch; font-size:17px; color:rgba(255,255,255,.8); }
.cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ================================================================
   FORMS ON WHITE
   ================================================================ */
.form-layout{
  display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start;
}

.form-card{
  padding:34px 36px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.form-card h2{ margin:0 0 24px; font-size:22px; font-weight:700; }

.lead-form label{
  display:block; margin-bottom:6px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.lead-form input[type=text],
.lead-form input[type=tel],
.lead-form input[type=email],
.lead-form textarea{
  width:100%; padding:12px 14px; margin-bottom:18px;
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid #cfcfcf; border-radius:var(--radius);
}
.lead-form input:focus-visible,
.lead-form textarea:focus-visible{ border-color:var(--red); }
.lead-form textarea{ resize:vertical; }

.lead-form button{
  width:100%; padding:15px 24px;
  font:inherit; font-size:16.5px; font-weight:600;
  color:#fff; background:var(--red);
  border:0; border-radius:var(--radius); cursor:pointer;
}
.lead-form button:hover{ background:var(--red-dark); }

.field-set{ border:0; padding:0; margin:0 0 18px; }
.field-set legend{ padding:0; margin-bottom:10px; font-size:14px; font-weight:500; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
  display:inline-block; padding:9px 15px;
  font-size:14.5px;
  border:1px solid #cfcfcf; border-radius:999px; cursor:pointer;
  transition:background .14s, border-color .14s, color .14s;
}
.chip span:hover{ border-color:var(--red); color:var(--red); }
.chip input:checked + span{ background:var(--red); border-color:var(--red); color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--red); outline-offset:2px; }

.form-note{ margin:16px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

.form-err{
  padding:13px 15px; margin-bottom:20px;
  background:#fdecec; border:1px solid #e3b4b4; border-radius:var(--radius);
  color:#8c0303; font-size:15px;
}
.section .form-ok{
  padding:13px 15px; margin-bottom:20px;
  background:#eaf6ec; border:1px solid #b5d8bd; border-radius:var(--radius);
  color:#1f5c2d; font-size:15px;
}
.section .form-ok a{ color:#1f5c2d; text-decoration:underline; }

/* ---- form sidebar ---- */
.form-aside h3{ margin:28px 0 12px; font-size:17px; font-weight:600; }
.form-aside h3:first-of-type{ margin-top:0; }
.form-aside address{ font-style:normal; line-height:1.75; color:var(--ink-soft); }
.form-aside p{ font-size:15px; line-height:1.65; color:var(--ink-soft); }

.aside-call{
  padding:24px 26px; margin-bottom:30px;
  background:var(--red); color:#fff; border-radius:var(--radius);
}
.aside-label{
  margin:0 0 4px !important;
  font-size:13px !important; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,.8) !important;
}
.aside-phone{
  display:inline-block;
  font-size:clamp(23px,3vw,28px); font-weight:700; color:#fff;
}
.aside-phone:hover{ text-decoration:underline; }
.aside-note{ margin:8px 0 0 !important; font-size:14px !important; color:rgba(255,255,255,.85) !important; }
.form-aside .aside-note a{ color:#fff; text-decoration:underline; }
.form-aside > .aside-note,
.form-aside p.aside-note:not(.aside-call .aside-note){ color:var(--ink-soft) !important; }
.aside-call + h3{ margin-top:0; }

/* ---- map ---- */
.map-band{ line-height:0; }
.map-band iframe{
  width:100%; height:420px; border:0;
  border-top:1px solid var(--line);
}

/* ================================================================
   RESPONSIVE — inner pages
   ================================================================ */
@media (max-width:960px){
  .split-grid{ grid-template-columns:1fr; gap:34px; }
  .split-img{ order:-1; }
  .cards,
  .cards-3{ grid-template-columns:repeat(2,1fr); }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .form-layout{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:640px){
  .page-head{ padding:30px 0 28px; }
  .split{ padding:44px 0; }
  .cards,
  .cards-3,
  .area-grid{ grid-template-columns:1fr; }
  .form-card{ padding:26px 22px; }
  .cta-band{ padding:48px 0; }
  .cta-actions .btn{ width:100%; }
  .steps li{ padding-left:52px; }
  .map-band iframe{ height:300px; }
}

/* ---- shared form, restyled for the red footer ---- */
.foot-form .lead-form label,
.foot-form .lead-form legend{ color:#fff; opacity:.92; }
.foot-form .lead-form input[type=text],
.foot-form .lead-form input[type=tel],
.foot-form .lead-form input[type=email],
.foot-form .lead-form textarea{ border-color:rgba(0,0,0,.12); margin-bottom:14px; }
.foot-form .lead-form button{
  background:#fff; color:var(--red); padding:13px 24px;
}
.foot-form .lead-form button:hover{ background:#f0f0f0; }
.foot-form .form-note{ color:rgba(255,255,255,.8); }
.foot-form .form-note a{ color:#fff; text-decoration:underline; }
.foot-form .form-ok{
  padding:12px 14px; margin-bottom:16px;
  background:rgba(255,255,255,.16); border-radius:var(--radius); font-size:15px;
}
.foot-form .form-ok a{ color:#fff; text-decoration:underline; }
.foot-form .form-err{
  background:rgba(0,0,0,.2); border-color:rgba(255,255,255,.3); color:#fff;
}
.foot-form .chip span{ border-color:rgba(0,0,0,.15); background:#fff; color:var(--ink); }

/* ================================================================
   ARTICLES
   ================================================================ */
.btn-line{
  background:#fff; color:var(--red);
  box-shadow:inset 0 0 0 1.5px var(--red);
}
.btn-line:hover{ background:var(--red); color:#fff; }

.article-head{
  padding:46px 0 34px;
  background:var(--bg-tint); border-bottom:1px solid var(--line);
}
.article-head h1{
  margin:0; max-width:24ch;
  font-size:clamp(27px,3.8vw,40px); font-weight:700; line-height:1.22;
  letter-spacing:-.3px;
}
.article-meta{
  margin:14px 0 0;
  font-size:14.5px; color:var(--ink-soft);
}
.article-meta span{ margin:0 6px; opacity:.5; }

/* ---- article body: styles whatever HTML the import brought ---- */
.article-body{ padding:50px 20px 12px; font-size:17px; line-height:1.78; }
.article-body > *{ max-width:70ch; }
.article-body p{ margin:0 0 20px; color:#2b2b2b; }
.article-body h2{
  margin:44px 0 14px; scroll-margin-top:100px;
  font-size:clamp(21px,2.6vw,27px); font-weight:700; line-height:1.3;
}
.article-body h3{
  margin:32px 0 10px; scroll-margin-top:100px;
  font-size:19px; font-weight:600;
}
.article-body ul,
.article-body ol{ margin:0 0 22px; padding-left:24px; }
.article-body li{ margin-bottom:9px; }
.article-body a{ text-decoration:underline; text-underline-offset:2px; }
.article-body img{ border-radius:var(--radius); margin:12px 0 24px; }
.article-body blockquote{
  margin:26px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--red);
  font-size:18px; color:var(--ink-soft);
}
.article-body table{
  width:100%; max-width:100%; border-collapse:collapse;
  margin:0 0 24px; font-size:15.5px;
}
.article-body th,
.article-body td{ padding:11px 13px; border:1px solid var(--line); text-align:left; }
.article-body th{ background:var(--bg-tint); font-weight:600; }

/* the imported table of contents */
.article-body .toc{
  max-width:100%;
  padding:22px 26px; margin:0 0 34px;
  background:var(--bg-tint); border:1px solid var(--line);
  border-radius:var(--radius);
}
.article-body .toc strong{ display:block; margin-bottom:12px; font-size:15px; }
.article-body .toc ul{ margin:0; padding-left:20px; }
.article-body .toc li{ margin-bottom:7px; font-size:15.5px; line-height:1.5; }

/* ---- in-article CTA ---- */
.article-cta{
  margin:40px 0 10px; padding:32px 34px;
  background:var(--bg-tint); border:1px solid var(--line);
  border-radius:var(--radius); text-align:center;
}
.article-cta h2{ margin:0 0 8px; font-size:22px; font-weight:700; }
.article-cta p{ margin:0 auto 22px; max-width:50ch; color:var(--ink-soft); }

.rel-list{ list-style:none; margin:0; padding:0; columns:2; column-gap:40px; }
.rel-list li{ margin-bottom:12px; break-inside:avoid; font-size:16px; line-height:1.5; }

/* ================================================================
   POST INDEX
   ================================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.pill{
  display:inline-block; padding:8px 16px;
  font-size:14.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.pill:hover{ border-color:var(--red); color:var(--red); text-decoration:none; }
.pill.on{ background:var(--red); border-color:var(--red); color:#fff; }

.result-count{ margin:0 0 22px; font-size:14.5px; color:var(--ink-soft); }

.post-list{ list-style:none; margin:0; padding:0; max-width:76ch; }
.post-list li{ padding:26px 0; border-top:1px solid var(--line); }
.post-list li:last-child{ border-bottom:1px solid var(--line); }
.post-list h2{ margin:0 0 6px; font-size:20px; font-weight:600; line-height:1.35; }
.post-list h2 a{ color:var(--ink); }
.post-list h2 a:hover{ color:var(--red); text-decoration:none; }
.post-meta{ margin:0 0 8px; font-size:13.5px; color:var(--ink-soft); }
.post-meta span{ margin:0 5px; opacity:.5; }
.post-list p:last-child{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }

.pager{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:40px; font-size:15px; color:var(--ink-soft);
}

@media (max-width:640px){
  .article-body{ padding:34px 20px 8px; font-size:16.5px; }
  .article-cta{ padding:24px 20px; }
  .rel-list{ columns:1; }
  .pager{ flex-direction:column; gap:12px; }
  .pager .btn{ width:100%; text-align:center; }
}

.area-kind{
  margin-top:8px !important;
  font-size:13px !important; letter-spacing:.4px; text-transform:uppercase;
  color:var(--red) !important;
}

/* ---- FAQ page + legal pages ---- */
.faq-lg .faq-item{ padding:26px 0; }
.faq-lg dt{ font-size:18.5px; }
.faq-sub{ margin:12px 0 0; padding-left:22px; }
.faq-sub li{ margin-bottom:7px; font-size:15.5px; line-height:1.55; color:var(--ink-soft); }

.legal{ font-size:16.5px; line-height:1.78; color:var(--ink-soft); }
.legal p{ margin:0 0 18px; max-width:72ch; }
.legal h2{
  margin:36px 0 12px;
  font-size:21px; font-weight:700; color:var(--ink);
}
.legal ul{ margin:0 0 20px; padding-left:22px; max-width:72ch; }
.legal li{ margin-bottom:9px; }

/* Honeypot: off-screen rather than display:none — some bots skip
   anything that is explicitly hidden. */
.hp{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}

/* ---- language switcher ---- */
.lang-switch{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--radius);
  white-space:nowrap;
}
.lang-switch:hover{
  color:var(--red); border-color:var(--red); text-decoration:none;
}
.lang-switch svg{ flex:none; opacity:.75; }
.lang-switch:hover svg{ opacity:1; }

@media (max-width:1024px){
  .lang-switch{ margin-top:10px; justify-content:center; padding:13px 20px; }
}

/* ----------------------------------------------------------------
   TEAM
   Same card language as .cards — white, hairline border, 6px radius.
   The initials circle is the fallback until photos arrive, and is
   sized identically to the photo so the grid does not reflow when
   they are dropped in.
   ---------------------------------------------------------------- */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  list-style:none; margin:0; padding:0;
}
.person{
  padding:24px 20px 22px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.person-photo{
  width:140px; height:140px; margin:0 auto 16px;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(140deg, var(--blue), var(--navy));
  display:grid; place-items:center;
}
.person-photo img{ width:100%; height:100%; object-fit:cover; }
.person-initials{
  font-size:38px; font-weight:600; letter-spacing:.02em; color:#fff;
  line-height:1; user-select:none;
}
.person-name{ margin:0 0 3px; font-size:16.5px; font-weight:600; color:var(--ink); }
.person-role{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }

@media (max-width:1000px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){
  .team-grid{ grid-template-columns:1fr; }
  .person-photo{ width:120px; height:120px; }
}

/* ---- wordmark fallback, used until monkan-logo.svg is added ---- */
.logo-text{ display:block; line-height:1; }
.logo-mon{ font-size:27px; font-weight:700; letter-spacing:.02em; color:var(--blue); }
.logo-ks{  font-size:27px; font-weight:700; letter-spacing:.02em; color:var(--navy); }
.logo-sub{
  display:block; margin-top:4px;
  font-size:9.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft);
}