/* ════════════════════════════════════════════════════════════════
   PRESNSE — SERVICE · CLINIC WEBSITE DESIGN  ·  per-page module layer
   ----------------------------------------------------------------
   Archetype: SERVICE (ranking). Copy source of truth:
   project/handoff/seo-page-packs/04-service-clinic-website-design-page-pack.md.
   Structure follows homepage/wireframe-service-web-design.html. Same
   service-page FAMILY grammar as service-clinic-seo.css, but a different
   composition: the hero instrument is a SITE-AUDIT checklist (looks-fine /
   fails), and the signature is the BEFORE/AFTER rebuild bars (cosmetic vs
   rebuild on what Google reads) — rendered as the one mid-page dark band.
   No client data in the before/after; the bars are illustrative (pack rule).
   Consumes tokens from foundation.css ONLY — no raw colour.
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   M01 · HERO  [INVENTED — site-audit instrument leads right]
   ─────────────────────────────────────────────────────────────── */
.wd-hero{padding-top:clamp(20px,3vw,40px);}
.wd-hero .mod-body{padding-block:clamp(var(--sp-xl),4vw,var(--sp-4xl));}
.wd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start;}
.wd-hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin-top:20px;}
.wd-hero h1 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.wd-hero .lede{margin-top:24px;max-width:52ch;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.6;color:var(--ink-soft);}
.wd-hero .lede.two{margin-top:16px;font-size:1rem;color:var(--muted);}
.wd-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

/* the site-audit instrument: looks fine to a patient, fails for Google */
.auditfig{border:1px dashed var(--line-em);background:var(--paper-card);box-shadow:var(--shadow-card);}
.auditfig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.auditfig-head .lbl{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;}
.auditfig-head .lbl .d{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.auditfig-head .t{color:var(--faint);}
.arow{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:15px 18px;border-bottom:1px dashed var(--line-soft);}
.arow:last-of-type{border-bottom:none;}
.arow .lyr{display:flex;flex-direction:column;gap:7px;}
.arow .name{font-size:.95rem;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:10px;}
.arow .name .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.arow .track{height:7px;border-radius:var(--radius-bar);background:var(--wash-hair);overflow:hidden;width:min(220px,40vw);}
.arow .track i{display:block;height:100%;width:0;border-radius:var(--radius-bar);transition:width 1s var(--ease) var(--d,0s);}
.arow.pass .track i{background:var(--lime-deep);}
.arow.fail .track i{background:var(--rk-weak);}
.arow .st{font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.arow .st::before{content:"";width:8px;height:8px;border-radius:50%;}
.arow.pass .st{color:var(--lime-ink);}.arow.pass .st::before{background:var(--lime);}
.arow.fail .st{color:var(--rk-weak);}.arow.fail .st::before{background:var(--rk-weak);}
.auditfig-foot{padding:11px 18px;border-top:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.05em;color:var(--faint);
  display:flex;align-items:center;gap:8px;}
.auditfig-foot .d{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:0 0 auto;}

/* ───────────────────────────────────────────────────────────────
   M02 · SME ANGLE  [INVENTED — broken cadence, fragments + stat]
   "Why clinic websites that look fine still fail Google" — the
   patient-vs-search-engine reading, with the 1,200+ / 70% stat.
   ─────────────────────────────────────────────────────────────── */
.sme{border-top:1px dashed var(--line-dash);}
.sme .mod-body{padding-block:clamp(40px,6vw,80px);}
.sme-cap{font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:9px;}
.sme-cap .d{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.sme h2{font-size:var(--h2);font-weight:600;letter-spacing:var(--tr-display);line-height:var(--lead-display);
  max-width:22ch;margin-top:18px;}
.sme h2 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.sme-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4.5vw,60px);margin-top:clamp(28px,3.5vw,44px);align-items:start;}
.sme-frags{border-top:2px solid var(--ink);}
.sme-seg{border-bottom:1px dashed var(--line-dash);padding:20px 0;}
.sme-seg:last-child{border-bottom:none;}
.sme-seg .seg-lbl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);display:block;}
.sme-seg .seg-lbl.hot{color:var(--lime-ink);}
.sme-seg p{margin-top:10px;font-size:.98rem;line-height:1.6;color:var(--ink-soft);max-width:62ch;}
.sme-seg p .em{color:var(--ink);font-weight:600;}
/* the backend stat as a vertical instrument */
.backend-stat{border:1px solid var(--line-mid);border-top:2px solid var(--ink);background:var(--paper-card);
  padding:clamp(24px,3vw,34px);align-self:start;}
.backend-stat .cap{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.backend-stat .n{font-family:var(--sans);font-size:clamp(3rem,7vw,5rem);font-weight:700;letter-spacing:-.05em;
  line-height:.9;color:var(--ink);margin-top:16px;}
.backend-stat .n .pct{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.55em;color:var(--lime-deep);}
.backend-stat .meter{height:9px;border-radius:var(--radius-bar);background:var(--wash-hair);margin-top:18px;overflow:hidden;}
.backend-stat .meter i{display:block;height:100%;width:0;background:var(--ink);border-radius:var(--radius-bar);
  transition:width 1.1s var(--ease);position:relative;}
.backend-stat .meter i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--lime);}
.backend-stat .sub{font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin-top:16px;}
.backend-stat .src{font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.06em;color:var(--faint);margin-top:14px;display:block;}

/* ───────────────────────────────────────────────────────────────
   M03 · DEFINITION CARD  [INVENTED — AI-extractable]
   ─────────────────────────────────────────────────────────────── */
.wd-def{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);
  margin-top:40px;border:1px solid var(--line-mid);border-top:2px solid var(--ink);
  background:var(--paper-card);padding:clamp(26px,3.4vw,48px);align-items:start;}
.wd-def .qmark{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--lime-deep);display:block;}
.wd-def blockquote{font-size:clamp(1.12rem,1.7vw,1.5rem);line-height:1.34;letter-spacing:-.01em;
  font-weight:500;color:var(--ink);margin-top:8px;}
.wd-def blockquote .sym{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lime-ink);}
.wd-def .also{font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin-top:18px;max-width:50ch;}
.wd-syslist{align-self:start;border:1px dashed var(--line-soft);background:var(--bg);padding:22px 24px;}
.wd-syslist .gl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:14px;}
.wd-syslist ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.wd-syslist li{font-family:var(--mono);font-size:.74rem;color:var(--ink);border:1px dashed var(--line-rule);
  border-radius:var(--radius-tag);padding:7px 11px;display:inline-flex;align-items:center;gap:7px;}
.wd-syslist li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);flex:0 0 auto;}
.wd-syslist .note{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin-top:16px;}

/* ───────────────────────────────────────────────────────────────
   M04 · WHY UNDERPERFORM  [INVENTED — 4 diagnostic cards, 45-55w]
   ─────────────────────────────────────────────────────────────── */
.wd-diag{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line-mid);
  margin-top:40px;background:var(--bg);}
.wd-dcard{padding:clamp(24px,3vw,38px);border-right:1px dashed var(--line-soft);
  border-bottom:1px dashed var(--line-soft);transition:background .2s;}
.wd-dcard:nth-child(2n){border-right:none;}
.wd-dcard:nth-last-child(-n+2){border-bottom:none;}
.wd-dcard:hover{background:var(--wash-soft);}
.wd-dcard .dc-top{display:flex;align-items:center;gap:12px;}
.wd-dcard .dc-no{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--lime-ink);}
.wd-dcard .dc-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--amber-glow);}
.wd-dcard h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em;margin-top:16px;}
.wd-dcard p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin-top:11px;max-width:46ch;}

/* ───────────────────────────────────────────────────────────────
   M05 · SIGNATURE — REBUILD, NOT REPAINT  [before/after bars · dark]
   motif: the one mid-page dark band (10a) — illustrative before/after
   bars (cosmetic vs rebuild) glow on the substrate (13b). No client data.
   ─────────────────────────────────────────────────────────────── */
.repaint-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4.5vw,60px);margin-top:44px;align-items:center;}
.repaintfig{background:var(--paper-card);border:1px solid var(--line-mid);box-shadow:var(--shadow-card);
  padding:clamp(24px,3vw,38px);}
.repaintfig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:24px;}
.repaintfig-head .lbl{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;}
.repaintfig-head .lbl .d{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,32px);align-items:end;}
.ba .col{display:flex;flex-direction:column;}
.ba .ct{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;}
.ba .bars{display:flex;align-items:flex-end;gap:8px;height:170px;border-bottom:1px solid var(--line-mid);}
.ba .bars b{flex:1;border-radius:var(--radius-bar) var(--radius-bar) 0 0;height:0;transition:height 1s var(--ease) var(--d,0s);}
.repaintfig.in .bars b{height:var(--h,0);}
.ba .before .bars b{background:var(--line-rule);}
.ba .after .bars b{background:var(--ink);position:relative;}
.ba .after .bars b::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--lime);}
.ba .legend{font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.05em;color:var(--faint);margin-top:12px;}
.ba .arrow{font-family:var(--mono);color:var(--lime-deep);font-size:1.4rem;padding-bottom:60px;}
.repaintfig-foot{margin-top:20px;padding-top:14px;border-top:1px dashed var(--line-dash);
  font-family:var(--mono);font-size:var(--label-xs);letter-spacing:.05em;color:var(--faint);}
/* the rail beside the bars */
.repaint-rail .seg-lbl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);display:block;}
.repaint-rail h3{font-size:1.3rem;font-weight:600;color:var(--white);letter-spacing:-.01em;margin-top:12px;max-width:18ch;}
.repaint-rail h3 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.repaint-rail p{font-size:.95rem;color:var(--tx-on-70);line-height:1.6;margin-top:16px;max-width:42ch;}

/* ───────────────────────────────────────────────────────────────
   M06 · COMPARISON  [INVENTED — 3-col: cosmetic / rebuild / when]
   ─────────────────────────────────────────────────────────────── */
.wd-cmp-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.5vw,64px);margin-top:40px;align-items:start;}
.wd-cmp-pin{position:sticky;top:90px;}
.wd-cmp-pin h2{font-size:var(--h2);font-weight:600;letter-spacing:var(--tr-display);line-height:var(--lead-display);max-width:14ch;}
.wd-cmp-pin h2 .sym{font-family:var(--serif);font-style:italic;font-weight:400;}
.wd-cmp-pin .msub{margin-top:18px;}
.wd-ctable{border:1px solid var(--line-mid);background:var(--paper-card);}
.wctr{display:grid;grid-template-columns:1fr 1fr .9fr;border-bottom:1px dashed var(--line-soft);}
.wctr:last-child{border-bottom:none;}
.wctr.head{border-bottom:1px solid var(--ink);}
.wctr .cd{padding:15px 16px;border-right:1px dashed var(--line-soft);font-size:.88rem;line-height:1.48;}
.wctr .cd:last-child{border-right:none;}
.wctr.head .cd{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.wctr.head .cd.pres{color:var(--ink);font-weight:600;}
.wctr .cd.cos{color:var(--muted);}
.wctr .cd.pres{color:var(--ink);position:relative;background:var(--wash-min);}
.wctr:not(.head) .cd.pres::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);}
.wctr .cd.when{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);letter-spacing:.01em;}

/* ───────────────────────────────────────────────────────────────
   M07 · WHAT'S INCLUDED  [INVENTED — 6 cards, 60-80w]
   ─────────────────────────────────────────────────────────────── */
.wd-inc{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-mid);
  margin-top:40px;background:var(--bg);}
.wd-icard{padding:clamp(24px,2.6vw,34px);border-right:1px dashed var(--line-soft);
  border-bottom:1px dashed var(--line-soft);display:flex;flex-direction:column;transition:background .2s;}
.wd-icard:nth-child(3n){border-right:none;}
.wd-icard:nth-last-child(-n+3){border-bottom:none;}
.wd-icard:hover{background:var(--wash-soft);}
.wd-icard .ic-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.wd-icard .ic-no{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--lime-ink);}
.wd-icard .ic-glyph{width:26px;height:26px;color:var(--ink);}
.wd-icard h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;margin-top:16px;line-height:1.25;}
.wd-icard p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-top:11px;}
.wd-icard .go{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:.72rem;
  display:inline-flex;gap:8px;align-items:center;color:var(--ink);}
.wd-icard .go .arr{color:var(--lime-deep);transition:transform .25s var(--ease);}
.wd-icard:hover .go .arr{transform:translateX(4px);}

/* ───────────────────────────────────────────────────────────────
   M08 · METHOD  [INVENTED — 5 spec rows: coord · activity · impact]
   ─────────────────────────────────────────────────────────────── */
.wd-spec{margin-top:40px;border-top:2px solid var(--ink);}
.wsrow{display:grid;grid-template-columns:auto 1.1fr 1fr;gap:clamp(18px,3vw,44px);align-items:start;
  padding:24px 0;border-bottom:1px dashed var(--line-dash);}
.wsrow:last-child{border-bottom:none;}
.wsrow .cn{font-family:var(--sans);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.05em;
  line-height:.85;color:var(--ink);}
.wsrow .cn .z{color:var(--faint);}
.wsrow .act h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;}
.wsrow .act p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin-top:9px;max-width:52ch;}
.wsrow .act p a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:2px;}
.wsrow .imp{border-left:1px dashed var(--line-rule);padding-left:clamp(18px,3vw,32px);}
.wsrow .imp .seg-lbl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--lime-ink);margin-bottom:8px;display:block;}
.wsrow .imp p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;max-width:34ch;}

/* ───────────────────────────────────────────────────────────────
   M09 · EVIDENCE + ENTITY INDEX  [INVENTED]
   ─────────────────────────────────────────────────────────────── */
.wd-evid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);margin-top:40px;align-items:start;}
.wd-evid p{font-size:1rem;color:var(--ink-soft);line-height:1.62;margin-top:18px;max-width:58ch;}
.wd-evid .signal{margin-top:18px;font-family:var(--mono);font-size:var(--label-md);color:var(--muted);
  border-left:2px solid var(--lime);padding-left:16px;max-width:52ch;line-height:1.55;text-transform:none;letter-spacing:.01em;}
/* anonymised architecture sample (no client data) */
.archfig{border:1px dashed var(--line-rule);background:var(--bg);padding:clamp(22px,3vw,32px);align-self:start;}
.archfig .gl{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.archfig .gl .d{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.archfig .tree{font-family:var(--mono);font-size:.78rem;line-height:1.95;color:var(--ink-soft);}
.archfig .tree .root{color:var(--ink);font-weight:600;}
.archfig .tree .br{color:var(--faint);}
.archfig .tree .lf{color:var(--ink);}
.archfig .tree .tag{color:var(--lime-ink);}

.wd-index{margin-top:clamp(36px,4vw,56px);border-top:1px dashed var(--line-mid);padding-top:clamp(26px,3vw,40px);}
.wd-index .chip-label{margin-bottom:16px;}
.wdix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border:1px dashed var(--line-soft);}
.wdix{display:flex;align-items:center;gap:10px;padding:13px 16px;border-right:1px dashed var(--line-soft);
  border-bottom:1px dashed var(--line-soft);font-family:var(--mono);font-size:.78rem;color:var(--ink);
  transition:background .2s,padding-left .2s var(--ease);}
.wdix:hover{background:var(--wash-soft);padding-left:22px;}
.wdix .ar{color:var(--lime-deep);}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .wd-hero-grid{grid-template-columns:1fr;gap:36px;}
  .sme-grid{grid-template-columns:1fr;gap:32px;}
  .wd-def{grid-template-columns:1fr;gap:28px;}
  .repaint-wrap{grid-template-columns:1fr;gap:36px;}
  .wd-cmp-wrap{grid-template-columns:1fr;gap:32px;}
  .wd-cmp-pin{position:static;}
  .wd-inc{grid-template-columns:1fr 1fr;}
  .wd-icard:nth-child(3n){border-right:1px dashed var(--line-soft);}
  .wd-icard:nth-child(2n){border-right:none;}
  .wd-icard:nth-last-child(-n+3){border-bottom:1px dashed var(--line-soft);}
  .wd-icard:nth-last-child(-n+2){border-bottom:none;}
  .wsrow{grid-template-columns:auto 1fr;gap:18px 22px;}
  .wsrow .imp{grid-column:2;border-left:none;border-top:1px dashed var(--line-rule);padding-left:0;padding-top:14px;margin-top:4px;}
  .wd-evid{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:640px){
  .wd-diag{grid-template-columns:1fr;}
  .wd-dcard{border-right:none!important;}
  .wd-inc{grid-template-columns:1fr;}
  .wd-icard{border-right:none!important;}
  .wctr{grid-template-columns:1fr;}
  .wctr .cd{border-right:none;border-bottom:1px dashed var(--line-soft);}
  .wctr .cd:last-child{border-bottom:none;}
  .wctr.head{display:none;}
  .ba{gap:10px;}
  .ba .arrow{padding-bottom:40px;}
  .arow .track{width:min(150px,34vw);}
}
@media(prefers-reduced-motion:reduce){
  .arow .track i,.backend-stat .meter i,.ba .bars b{transition:none;}
  /* never leave the signature bars collapsed if reveal/JS is skipped */
  .repaintfig .bars b{height:var(--h,0);}
}