/* ==========================================================================
   Seoul Lipo Center by TheLINE - site.css
   Single stylesheet. Reference structure: seoulbodyplastics.com

   TYPE RULES - do not add a sixth size.
   Only five font sizes exist on this site, all declared as variables below:
     --fs-xs   14px  labels, captions, eyebrows, table small print, footer
     --fs-base 16px  interface text - cards, forms, tables, FAQ, footer, h4
     --fs-md   20px  the reading column: article paragraphs, lists, leads, h3
     --fs-lg   30px  h2, and h1 on inner pages
     --fs-xl   48px  h1 on the home hero only
   Five values, no sixth, and no responsive override that would introduce one.
   The split that matters is prose against chrome: the reading column runs about
   720px wide so prose sits at --fs-md, and everything that is interface rather than
   reading stays a step down at --fs-base. build.py fails if a literal px font-size
   or a sixth token appears.
   FONTS - no web fonts on purpose. Patients read this site from South East Asia,
   the Middle East and the US, often on mobile data, so we ship 0 KB of font files and
   0 extra requests. Headings use the highest-quality serif already on the device
   (Iowan Old Style on Apple, Palatino Linotype on Windows, Georgia elsewhere) and body
   text uses the system UI sans. Do not add a web font without measuring the cost first.
   Hero art direction: all hero images are 1920x600 banners with the subject on
   the right, so the hero is a full-bleed background with copy on the left.
   ========================================================================== */

:root{
  /* Palette taken from theline.kr (www/phpnew5/assets/css/main.css):
     --accent #E5325B, --point #E95263, --dark #2E2A26, --ink #262627,
     --gray-dark #6a6a6a, --gray-light #E0E0E0, plus the warm beige #e0d5cf.
     Keep this site on the parent brand's colours - do not reintroduce the old gold. */
  --c-ink:#262627;
  --c-body:#5a5252;
  --c-mute:#6a6a6a;
  --c-line:#e0e0e0;
  --c-bg:#ffffff;
  --c-soft:#f8f8f8;
  --c-soft2:#f3ece8;
  /* #e5325b is theline.kr's exact accent but lands at 4.25:1 on white, just under AA.
     Darkened the minimum amount to clear 4.5:1 - visually the same pink. */
  --c-accent:#e32651;
  --c-accent-dk:#ce1a43;
  --c-point:#e95263;
  --c-beige:#e0d5cf;
  --c-dark:#2e2a26;
  --f-sans:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',
    Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,
    'Hoefler Text',Georgia,'Times New Roman',serif;
  --fs-xs:14px;
  --fs-base:16px;
  --fs-md:20px;
  --fs-lg:30px;
  --fs-xl:48px;
  --w:1180px;
  --pad:24px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--c-bg);color:var(--c-body);
  font-family:var(--f-sans);font-size:var(--fs-base);line-height:1.75;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;color:var(--c-ink);font-weight:400;line-height:1.3}
h1,h2,.h1,.h2{font-weight:400;letter-spacing:-.005em}
/* Some system serifs (Georgia) only ship old-style numerals, where "100" reads as "1oo".
   Ask for lining figures, and let the big numbers fall back to the sans stack. */
h1,h2,h3,.h1,.h2,.brand__name,.site-footer__wordmark{
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0;
}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px;padding-left:20px}
li{margin:0 0 8px}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.section{padding:84px 0}
.section--soft{background:var(--c-soft)}
.section--dark{background:var(--c-dark);color:#d3ccc6}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--tight{padding:56px 0}
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- type ---------- */
.eyebrow{
  font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-accent);margin:0 0 16px;font-weight:500;
}
h1,.h1{font-size:var(--fs-lg);font-family:var(--f-serif);line-height:1.3}
h2,.h2{font-size:var(--fs-lg);font-family:var(--f-serif);line-height:1.25}
h3,.h3{font-size:var(--fs-md)}
h4,.h4{font-size:var(--fs-base);font-weight:600}
/* card and tile headings are h3 for document order but keep the small visual size */
.sub{font-size:var(--fs-base);font-weight:600;line-height:1.4}
.lead{font-size:var(--fs-md);line-height:1.7;color:var(--c-ink)}
.section-head{max-width:760px;margin:0 0 40px}
.section-head--center{margin:0 auto 48px;text-align:center}
.muted{color:var(--c-mute);font-size:var(--fs-xs)}
.note{font-size:var(--fs-xs);color:var(--c-mute);border-left:2px solid var(--c-line);padding-left:14px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--c-line);backdrop-filter:saturate(1.2) blur(6px);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__name{font-family:var(--f-serif);font-size:var(--fs-md);font-weight:500;color:var(--c-ink);letter-spacing:.03em;white-space:nowrap}
.brand__sub{font-size:var(--fs-xs);color:var(--c-mute);letter-spacing:.06em;white-space:nowrap}
.gnb{display:flex;align-items:center;gap:26px}
.gnb__item{position:relative}
.gnb__link{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);
  padding:26px 0;display:inline-block;white-space:nowrap;
}
.gnb__link:hover{color:var(--c-accent)}
.gnb__panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:260px;background:#fff;border:1px solid var(--c-line);
  padding:16px 0;display:none;box-shadow:0 12px 30px rgba(0,0,0,.07);
}
.gnb__item:hover .gnb__panel,.gnb__item:focus-within .gnb__panel{display:block}
.gnb__panel a{display:block;padding:8px 22px;font-size:var(--fs-xs);color:var(--c-body);white-space:nowrap}
.gnb__panel a:hover{background:var(--c-soft);color:var(--c-accent)}
.header-cta{
  border:1px solid var(--c-ink);padding:11px 18px;font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);background:none;white-space:nowrap;
}
.header-cta:hover{background:var(--c-ink);color:#fff}
.nav-toggle{display:none;border:1px solid var(--c-line);background:none;padding:9px 12px}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--c-ink);margin:5px 0}

/* mobile drawer */
.drawer{
  position:fixed;inset:74px 0 0 auto;width:min(88vw,380px);background:#fff;
  border-left:1px solid var(--c-line);transform:translateX(100%);
  transition:transform .28s ease;overflow-y:auto;z-index:70;padding:24px 0 60px;
}
.drawer.is-open{transform:translateX(0)}
.drawer__group{border-bottom:1px solid var(--c-line);padding:6px 24px 16px}
.drawer__title{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);margin:14px 0 8px}
.drawer a{display:block;padding:7px 0;font-size:var(--fs-base);color:var(--c-ink)}

/* ---------- hero (full-bleed banner) ---------- */
.hero{
  position:relative;background:var(--c-soft) center/cover no-repeat;
  color:#fff;isolation:isolate;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(38,34,31,.93) 0%,rgba(38,34,31,.8) 46%,rgba(38,34,31,.34) 70%,rgba(38,34,31,0) 88%);
}
.hero__inner{display:flex;align-items:center;min-height:560px;padding:72px 0}
.hero__body{max-width:760px}
.hero h1{
  margin:0 0 20px;font-size:var(--fs-xl);line-height:1.25;color:#fff;
  letter-spacing:-.01em;text-wrap:balance;
}
.hero .eyebrow{color:#ffa3b6}
.hero__lead{font-size:var(--fs-md);color:#e7e9ec;margin:0 0 22px;max-width:680px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 12px;font-size:var(--fs-xs);color:#e7e9ec;margin:0 0 30px;
  list-style:none;padding:0;
}
.hero__meta li{
  margin:0;border:1px solid rgba(255,255,255,.34);border-radius:40px;padding:6px 14px;
  backdrop-filter:blur(2px);
}
.hero--page .hero__inner{min-height:420px;padding:56px 0}
.hero--page h1{font-size:var(--fs-lg)}
/* blog: text only, so the hero is flat brand colour and costs no image request */
.hero--plain{background:var(--c-dark)}
.hero--plain::after{background:linear-gradient(100deg,rgba(227,38,81,.16) 0%,rgba(38,34,31,0) 62%)}
.hero--plain .hero__inner{min-height:340px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:15px 32px;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;border:1px solid transparent;border-radius:var(--r);
}
.btn--solid{background:var(--c-accent);color:#fff}
.btn--solid:hover{background:var(--c-accent-dk)}
.btn--line{border-color:currentColor;color:var(--c-ink)}
.btn--line:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.btn--light{border:1px solid rgba(255,255,255,.6);color:#fff}
.btn--light:hover{background:#fff;color:var(--c-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--c-line);padding:30px;border-radius:var(--r);height:100%}
.card--soft{background:var(--c-soft);border-color:transparent}
.card h3{margin:0 0 12px;font-size:var(--fs-md)}
.card h4{margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card__num{
  font-family:var(--f-sans);font-size:var(--fs-md);font-weight:600;color:var(--c-accent);
  display:block;margin:0 0 10px;letter-spacing:-.01em;
}
.tile{border-top:1px solid var(--c-line);padding:24px 0}
.tile h4{margin:0 0 8px}
.tile p{margin:0;font-size:var(--fs-base)}

/* doctor card - two directors, so give each one room */
.doctor{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;padding:32px}
.doctor img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%}
.doctor__body h3{margin:0 0 4px}
.doctor__body ul{margin:16px 0 0;padding-left:18px;font-size:var(--fs-xs);color:var(--c-mute)}
.doctor__body li{margin-bottom:6px}

/* media card (service list) */
.mcard{display:block;border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;background:#fff;height:100%}
.mcard img{aspect-ratio:16/7;object-fit:cover;width:100%}
.mcard__body{padding:24px}
.mcard__body h3{font-size:var(--fs-md);margin:0 0 10px}
.mcard__body p{font-size:var(--fs-base);margin:0 0 14px;color:var(--c-body)}
.mcard__more{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.mcard:hover{border-color:var(--c-accent)}
/* text-only article card - same box as every other card, just no thumbnail */
.mcard--text .mcard__body{padding:26px 24px 24px}

/* numbers strip */
.stats-strip{background:var(--c-dark);color:#d3ccc6;padding:34px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{border-left:1px solid #47413b;padding:0 0 0 20px}
.stat:first-child{border-left:0;padding-left:0}
.stat strong{
  display:block;font-family:var(--f-sans);font-size:var(--fs-lg);font-weight:600;
  color:#fff;line-height:1.15;letter-spacing:-.02em;
}
.stat span{display:block;font-size:var(--fs-xs);color:#b3aaa3;margin-top:6px;line-height:1.5}

/* dark section cards */
.section--dark .card--soft{background:#3a3530;color:#d3ccc6}
.section--dark .tile{border-top-color:#47413b}
.section--dark .tile p,.section--dark .card--soft p{color:#b3aaa3}

/* facility gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--r)}
.gallery figcaption{font-size:var(--fs-xs);color:var(--c-mute);margin-top:8px}

/* archive cards: one composite photo per case, logo strip cropped off the bottom */
.bna-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bna-grid--2{grid-template-columns:repeat(2,1fr);margin:24px 0}
.bna{margin:0}
.bna img{
  width:100%;aspect-ratio:600/214;object-fit:cover;object-position:top;
  border-radius:var(--r);background:var(--c-soft);
}
.bna figcaption{font-size:var(--fs-xs);color:var(--c-ink);margin-top:10px;line-height:1.5}
.bna figcaption span{display:block;color:var(--c-mute)}

/* before/after groups: sets stack top to bottom, four photos across inside each set */
.ba-groups{display:block}
.ba-group{margin:0 0 44px}
.ba-group:last-child{margin-bottom:0}
.ba-group h3{margin:0 0 16px;font-size:var(--fs-md)}

/* video cards - the YouTube player is only loaded when someone presses play */
.vcard{margin:0}
.vcard__play,.vcard iframe{
  width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block;
  background:var(--c-dark) center/cover no-repeat;
}
.vcard__play{position:relative;cursor:pointer;padding:0}
.vcard__play::after{content:'';position:absolute;inset:0;background:rgba(46,42,38,.3);border-radius:var(--r)}
.vcard__play:hover::after{background:rgba(46,42,38,.14)}
.vcard__icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
}
.vcard__icon::before{
  content:'';position:absolute;left:26px;top:20px;
  border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #262627;
}
.vcard__play:hover .vcard__icon{background:#fff}
.vcard figcaption a{color:var(--c-accent);white-space:nowrap}
.vcard figcaption a:hover{text-decoration:underline}
.vcard figcaption{font-size:var(--fs-xs);color:var(--c-mute);margin-top:12px;line-height:1.6}
.vcard figcaption strong{display:block;font-size:var(--fs-base);color:var(--c-ink);margin-bottom:4px}

/* patient photo wall */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stories figure{margin:0}
.stories img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}

/* practical checklist for visiting patients */
.perks{list-style:none;margin:0;padding:0}
.perks li{position:relative;padding-left:22px;margin-bottom:10px;font-size:var(--fs-xs);line-height:1.6}
.perks li::before{
  content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;
  background:var(--c-accent);
}

/* google review score bar + cards */
.gscore{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
  border:1px solid var(--c-line);border-radius:var(--r);padding:22px 26px;margin:0 0 28px;background:#fff;
}
.gscore__num{font-family:var(--f-serif);font-size:var(--fs-lg);color:var(--c-ink);line-height:1}
.gscore__stars{color:#f5b301;font-size:var(--fs-md);letter-spacing:.06em}
.gscore__count{font-size:var(--fs-base);color:var(--c-body)}
.gscore__cta{margin-left:auto;padding:11px 20px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.revs--pair{grid-template-columns:repeat(2,1fr)}
.rev{margin:0;border:1px solid var(--c-line);border-radius:var(--r);padding:24px;background:#fff}
.rev__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rev__avatar{
  width:38px;height:38px;border-radius:50%;background:var(--c-beige);color:var(--c-accent-dk);
  display:grid;place-items:center;font-size:var(--fs-base);font-weight:600;flex:0 0 auto;
}
.rev__who strong{display:block;font-size:var(--fs-base);color:var(--c-ink);font-weight:600}
.rev__who span{display:block;font-size:var(--fs-xs);color:var(--c-mute)}
.rev__stars{color:#f5b301;margin:0 0 10px;letter-spacing:.08em}
.rev blockquote{margin:0;font-size:var(--fs-base);color:var(--c-body);line-height:1.7}

/* map */
.mapwrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--c-line)}
.mapwrap iframe{display:block;width:100%;height:420px;border:0}

/* whatsapp band */
.waband{background:#25d366;color:#06371a;padding:26px 0}
.waband__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.waband__label{margin:0;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.waband__num{margin:2px 0 0;font-family:var(--f-serif);font-size:var(--fs-lg);line-height:1.1}
.waband__note{margin:0;flex:1 1 320px;font-size:var(--fs-xs);line-height:1.6}
.waband__cta{background:#06371a;color:#fff;border-color:#06371a}
.waband__cta:hover{background:#0a4f27}

/* social cards */
.socials{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.social{
  display:block;border:1px solid var(--c-line);border-radius:var(--r);padding:22px 20px;background:#fff;
}
.social strong{display:block;font-size:var(--fs-base);color:var(--c-ink);margin-bottom:6px}
.social span{display:block;font-size:var(--fs-xs);color:var(--c-mute);line-height:1.5}
.social:hover{border-color:var(--c-accent)}
.social:hover strong{color:var(--c-accent)}

/* primary sources at the foot of every page */
.sources{border-top:1px solid var(--c-line);padding:34px 0 30px;background:#fff}
.sources__h{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-mute);
  font-family:var(--f-sans);font-weight:600;margin:0 0 14px}
.sources ol{margin:0;padding-left:20px;font-size:var(--fs-xs);color:var(--c-mute);line-height:1.7}
.sources li{margin-bottom:8px}
.sources a{color:var(--c-body);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:var(--c-accent)}
.sources__note{font-size:var(--fs-xs);color:var(--c-mute);margin:14px 0 0;line-height:1.6;max-width:820px}
.sources--inline{border-top:1px solid var(--c-line);padding:26px 0 0;margin-top:56px}

/* accreditation strip */
.badges{border-top:1px solid var(--c-line);background:var(--c-soft);padding:34px 0}
.badges__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start;justify-items:center}
.badges figure{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.badges img{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain}
.badges figcaption{font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}

/* ---------- article body ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.article__body,.aside{min-width:0}
.article__body h1{margin:0 0 12px}
.article__body>.muted{margin:0 0 26px}
.article__body>.lead{margin:0 0 8px}
.article__body p:not([class]),.article__body li:not([class]){font-size:var(--fs-md);line-height:1.75}
.article__body h2{font-size:var(--fs-lg);margin:56px 0 18px}
.article__body h2:first-child{margin-top:0}
.article__body h3{font-size:var(--fs-md);margin:32px 0 12px}
/* References sit inside the reading column, where .article__body would otherwise
   inflate them to h2 and prose size. Everything here stays at the smallest step. */
.article__body .sources__h{font-size:var(--fs-xs);margin:0 0 12px}
.article__body .sources ol,.article__body .sources ol li{font-size:var(--fs-xs);line-height:1.65}
.article__body .sources ol li{margin-bottom:7px}
.article__body ul{padding-left:18px}
.article__body li{margin-bottom:10px}
.article__body img{margin:24px 0;border-radius:var(--r)}
.figure{margin:28px 0}
.figure img{width:100%}
.figure figcaption{font-size:var(--fs-xs);color:var(--c-mute);margin-top:10px}
.aside{position:sticky;top:100px;border:1px solid var(--c-line);padding:28px;border-radius:var(--r)}
.aside h4{margin:0 0 14px}
.aside dl{margin:0 0 20px}
.aside dt{font-size:var(--fs-xs);color:var(--c-mute);margin-top:12px}
.aside dd{margin:2px 0 0;font-size:var(--fs-base);color:var(--c-ink)}

/* table */
.table-wrap{overflow-x:auto;margin:24px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-base)}
th,td{border-bottom:1px solid var(--c-line);padding:14px 12px;text-align:left;vertical-align:top}
th{font-weight:600;color:var(--c-ink);background:var(--c-soft)}

/* faq */
.faq{border-top:1px solid var(--c-line)}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq .faq__h{margin:0;font-size:var(--fs-base);font-weight:400}
.faq__q{
  width:100%;background:none;border:0;padding:22px 40px 22px 0;text-align:left;
  font-size:var(--fs-base);font-weight:600;color:var(--c-ink);position:relative;
}
.faq__q::after{content:'+';position:absolute;right:8px;top:21px;color:var(--c-accent);font-size:var(--fs-md)}
.faq__item.is-open .faq__q::after{content:'\2212'}
.faq__a{display:none;padding:0 40px 24px 0}
.faq .faq__a p,.faq .faq__a li{font-size:var(--fs-base);line-height:1.7}
.faq__item.is-open .faq__a{display:block}
.faq__a p:last-child{margin-bottom:0}

/* before-after */
.ba{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ba.grid-4{grid-template-columns:repeat(4,1fr)}
.ba figure{margin:0}
.ba img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--r)}
.ba figcaption{font-size:var(--fs-xs);color:var(--c-mute);margin-top:8px;text-align:center}

/* ---------- contact / form ---------- */
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;
  grid-template-areas:"intro form" "info form";align-content:start;
}
.contact__intro{grid-area:intro}
.contact__form{grid-area:form}
.contact__info{grid-area:info}
.contact dl{margin:0}
.contact dt{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);margin-top:22px}
.contact dd{margin:6px 0 0;font-size:var(--fs-base)}
.contact a:hover{color:#fff}
.form{background:#fff;border:1px solid var(--c-line);padding:32px;border-radius:var(--r)}
.section--dark .form{background:#3a3530;border-color:#47413b}
.field{margin:0 0 18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field label{display:block;font-size:var(--fs-xs);color:var(--c-mute);margin:0 0 6px}
input,select,textarea,button{font-family:inherit;font-size:var(--fs-base)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--c-accent)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--c-line);border-radius:var(--r);
  font:inherit;font-size:var(--fs-base);color:var(--c-ink);background:#fff;
}
.field textarea{min-height:110px;resize:vertical}
.field input:invalid:not(:placeholder-shown){border-color:#b5473c}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin:0 0 18px}
.checks label{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:var(--c-body)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-xs);color:var(--c-mute);margin:0 0 20px}
.consent input{margin-top:5px;flex:0 0 auto}
.section--dark .field label,.section--dark .checks label,.section--dark .consent{color:#b3aaa3}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:var(--fs-xs);color:var(--c-mute);margin:14px 0 0}
.form__status{font-size:var(--fs-xs);margin:14px 0 0;padding:12px 14px;border-radius:var(--r);display:none}
.form__status.is-ok{display:block;background:rgba(120,160,110,.16);color:#cfe3c6;border:1px solid rgba(150,190,140,.4)}
.form__status.is-err{display:block;background:rgba(180,80,70,.16);color:#f0c4bf;border:1px solid rgba(200,110,100,.45)}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- cta band ---------- */
.band{background:var(--c-beige);padding:64px 0;text-align:center}
.band h2{margin:0 0 14px}
.band p{max-width:680px;margin:0 auto 24px}

/* ---------- footer ---------- */
.site-footer{background:var(--c-dark);color:#b3aaa3;padding:64px 0 40px;font-size:var(--fs-xs)}
.site-footer .ftitle{color:#fff;font-size:var(--fs-base);font-weight:600;margin:0 0 14px}
.site-footer .ftitle--gap{margin-top:18px}
.site-footer a:hover{color:#fff}
.site-footer__wordmark{font-family:var(--f-serif);font-size:var(--fs-md);font-weight:500;color:#fff;margin:0 0 18px;line-height:1.3}
.site-footer__wordmark span{display:block;font-family:var(--f-sans);font-size:var(--fs-xs);color:#b3aaa3}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer__grid--4{grid-template-columns:repeat(4,1fr);gap:32px}
.site-footer__links a{display:block;padding:4px 0}
.site-footer__bottom{
  border-top:1px solid #47413b;margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.disclaimer{font-size:var(--fs-xs);color:#8d847d;line-height:1.7;margin:20px 0 0}

/* floating contact */
.floating{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:10px}
.floating a{
  background:var(--c-accent);color:#fff;font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;padding:13px 18px;border-radius:40px;box-shadow:0 6px 18px rgba(0,0,0,.16);
  text-align:center;
}
.floating a:hover{background:var(--c-accent-dk)}
.floating .floating--wa{background:#25d366;color:#06371a}
.floating .floating--wa:hover{background:#1eb455}

/* breadcrumb */
.crumb{font-size:var(--fs-xs);color:var(--c-mute);padding:18px 0}
.crumb a:hover{color:var(--c-accent)}
.crumb span{margin:0 8px;color:var(--c-line)}

/* ---------- pagination ----------
   Only the article list uses this. Interface, so --fs-xs like .btn, and the
   current page is a <span> rather than a link so there is nothing to click
   that returns you where you already are. */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin:44px 0 0;font-size:var(--fs-xs)}
.pager a,.pager span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:var(--r);
  border:1px solid var(--c-line);color:var(--c-body);
}
.pager a:hover{border-color:var(--c-ink);color:var(--c-ink)}
.pager .is-current{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.pager .pager__gap{border:0;min-width:auto;padding:0 2px;color:var(--c-mute)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gnb{gap:18px}
  .brand__sub{display:none}
}
@media (max-width:1024px){
  .grid-4,.ba.grid-4{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:repeat(2,1fr)}
  .stories{grid-template-columns:repeat(3,1fr)}
  .socials{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid--4{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:20px}
  .stat{border-left:0;padding-left:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .article{grid-template-columns:minmax(0,1fr);gap:40px}
  .aside{position:static}
  .hero__inner{min-height:440px;padding:56px 0}
  .hero h1{font-size:var(--fs-lg)}
  .card__num{font-size:var(--fs-md)}
  .badges__grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:860px){
  .doctor{grid-template-columns:1fr;gap:20px}
  .doctor img{max-width:220px}
  .gnb{display:none}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  /* phones: heading, then the form, then the contact details.
     The intro paragraph repeats what the note under the submit button already says,
     so it is dropped here to lift the form up the screen. */
  .contact{grid-template-columns:1fr;gap:18px;grid-template-areas:"intro" "form" "info"}
  .contact__intro p:not(.eyebrow){display:none}
  .contact__intro h2{font-size:var(--fs-md);font-family:var(--f-serif)}
  .site-footer__grid{grid-template-columns:1fr;gap:28px}
  .section{padding:56px 0}
  .checks{grid-template-columns:repeat(2,1fr)}
  .hero::after{background:linear-gradient(180deg,rgba(46,42,38,.86) 0%,rgba(46,42,38,.78) 60%,rgba(46,42,38,.74) 100%)}
}
@media (max-width:560px){
  .stories{grid-template-columns:repeat(2,1fr)}
  .socials{grid-template-columns:1fr}
  /* keep the enquiry form close to one screen */
  .form{padding:20px 18px}
  .field{margin:0 0 12px}
  .field label{margin:0 0 4px}
  .field input,.field select,.field textarea{padding:11px 12px}
  .field textarea{min-height:76px}
  .field-row{gap:0 10px}
  /* the twelve area checkboxes cost ~200px on a phone; the free-text box covers it */
  .checks,.form p.muted{display:none}
  #consult{padding:34px 0}
  .consent{margin:0 0 14px;line-height:1.45}
  .form__note{margin:12px 0 0}
  .contact dt{margin-top:16px}
  /* on phones the floating buttons covered the hero CTA, so they become a bottom bar */
  body{padding-bottom:74px}
  .floating{
    left:0;right:0;bottom:0;flex-direction:row;gap:8px;padding:10px 12px;
    background:rgba(46,42,38,.95);backdrop-filter:blur(6px);
  }
  .floating a{flex:1;padding:14px 10px;box-shadow:none}
  .grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ba{grid-template-columns:1fr}
  .bna-grid,.bna-grid--2{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .gscore__cta{margin-left:0}
  .mapwrap iframe{height:300px}
  .waband__inner{gap:16px}
  .ba.grid-4{grid-template-columns:repeat(2,1fr);gap:10px}
  .ba.grid-4 figcaption{font-size:var(--fs-xs)}
  .gallery{grid-template-columns:1fr}
  .lead,.hero__lead{font-size:var(--fs-base)}
  .floating a{padding:11px 14px}
}