/* features.css · v4.0–v4.2 (24 Aug 2026 wireframe-feedback round, then the
   v4.2 additions: referring-physicians page, condition pages, gallery)
   Components added for the client's feedback notes: society badge strip,
   Centre of Excellence feature, team bio cards, Google reviews link,
   Phelix call note, site-wide feedback band, video slots, per-procedure
   guide selector, Instagram feed, service-area footer row, and the
   clinical-trials page furniture. Written against the tokens in main.css;
   nothing here overrides an existing selector. Hand-authored (the
   tools/build.py pipeline is not part of this package). */

/* ---------- textarea (main.css styles input/select only) ---------- */
.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--ivory);
  border:1px solid var(--hairline-2);border-radius:var(--radius);padding:.85rem 1rem;
  min-height:8.5rem;line-height:1.55;resize:vertical;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.field textarea:hover{border-color:var(--bronze-soft);}
.field textarea:focus{outline:2px solid var(--bronze-deep);outline-offset:1px;border-color:var(--bronze-deep);background:#fff;}
.field.invalid textarea{border-color:var(--err);}
.field--full{grid-column:1/-1;}
.field-check{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);grid-column:1/-1;}
.field-check input{margin-top:.3rem;width:18px;height:18px;flex:none;accent-color:var(--bronze-deep);}
.field-check.invalid{color:var(--err);}
.field-check .f-err{display:none;font-size:.8rem;font-weight:600;color:var(--err);margin-top:.3rem;}
.field-check.invalid .f-err{display:block;}

/* ---------- 1 · Societies & affiliations strip ---------- */
.soc-strip{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--hairline);padding-top:clamp(1.6rem,3vw,2.4rem);}
.soc-strip .soc-k{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.2rem;
}
.soc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.4rem);}
.soc-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  min-height:8.6rem;padding:1.3rem 1.1rem;background:var(--cream);border:1px solid var(--hairline);
  border-radius:var(--radius);color:var(--ink);text-decoration:none;text-align:center;
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.soc-badge:hover{border-color:var(--bronze-soft);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.soc-badge img{height:76px;width:auto;max-width:100%;object-fit:contain;}
.soc-badge .soc-name{font-size:.78rem;font-weight:600;line-height:1.35;color:var(--ink-2);max-width:14em;}
.soc-badge .soc-rel{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-deep);font-weight:700;}
.on-dark .soc-badge,.band-espresso .soc-badge{background:rgba(244,238,227,.06);border-color:var(--on-dark-line);}
.on-dark .soc-badge .soc-name{color:var(--on-dark-soft);}
.on-dark .soc-strip .soc-k{color:var(--on-dark-faint);}
.on-dark .soc-strip{border-top-color:var(--on-dark-line);}
.soc-note{font-size:.8rem;color:var(--ink-3);margin-top:1rem;max-width:56em;line-height:1.6;}
.on-dark .soc-note{color:var(--on-dark-faint);}

/* ---------- 2 · Centre of Excellence feature ---------- */
.coe{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,2.6vw,2rem);align-items:center;
  margin-top:clamp(1.6rem,3vw,2.4rem);padding:clamp(1.4rem,2.8vw,2rem) clamp(1.4rem,3vw,2.2rem);
  background:var(--bronze-tint);border-left:2px solid var(--bronze);border-radius:var(--radius);
}
.coe .coe-seal{
  width:96px;height:96px;border-radius:50%;border:1px solid var(--bronze);display:flex;align-items:center;justify-content:center;
  flex-direction:column;color:var(--bronze-deep);font-family:var(--serif);font-weight:600;line-height:1;background:var(--cream);
}
.coe .coe-seal b{font-size:1.55rem;letter-spacing:.02em;}
.coe .coe-seal small{font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-top:.3rem;}
.coe .coe-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:.4rem;}
.coe h3{font-size:clamp(1.2rem,.5vw+1.05rem,1.5rem);margin-bottom:.5rem;}
.coe p{font-size:.95rem;color:var(--ink-2);max-width:52em;}
.coe .coe-links{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.9rem;}
.on-dark .coe{background:rgba(244,238,227,.07);border-left-color:var(--bronze-soft);}
.on-dark .coe h3{color:var(--on-dark);}
.on-dark .coe p{color:var(--on-dark-soft);}
.on-dark .coe .coe-seal{background:transparent;color:var(--bronze-soft);border-color:var(--bronze-soft);}

/* ---------- 3 · Team bio cards ---------- */
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(1.6rem,3vw,2.4rem);}
.bio-card{background:var(--cream);border:1px solid var(--hairline);padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;gap:1.1rem;}
.bio-card .bio-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--hairline);padding-bottom:.9rem;}
.bio-card h3{font-size:clamp(1.35rem,.6vw+1.15rem,1.75rem);margin:0;}
.bio-card .bio-role{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);}
.bio-card p{font-size:.95rem;color:var(--ink-2);}
.bio-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;}
.bio-card li{font-size:.9rem;color:var(--ink-2);padding-left:1.15rem;position:relative;}
.bio-card li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--bronze);}
.bio-card .bio-photo{margin:-.2rem 0 .2rem;}
.bio-card .bio-photo .plate-cap{margin-top:.55rem;}

/* ---------- 4 · Google reviews link (outbound only) ---------- */
.reviews-cta{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:1.3rem 1.5rem;
  background:var(--cream);border:1px solid var(--hairline);border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.reviews-cta:hover{border-color:var(--bronze-soft);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.reviews-cta .rv-g{width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;flex:none;background:#fff;}
.reviews-cta .rv-stars{color:var(--bronze-deep);letter-spacing:.16em;font-size:.66rem;font-weight:700;text-transform:uppercase;line-height:1;}
.reviews-cta .rv-t{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.2;}
.reviews-cta .rv-s{font-size:.82rem;color:var(--ink-3);}
.reviews-cta>span:nth-child(2){flex:1 1 14rem;min-width:0;}
.reviews-cta .rv-arrow{margin-left:auto;color:var(--bronze-deep);font-size:1.2rem;}
.on-dark .reviews-cta{background:rgba(244,238,227,.06);border-color:var(--on-dark-line);color:var(--on-dark);}
.on-dark .reviews-cta:hover{border-color:var(--bronze-soft);}
.on-dark .reviews-cta .rv-s{color:var(--on-dark-faint);}
.on-dark .reviews-cta .rv-arrow,.on-dark .reviews-cta .rv-stars{color:var(--bronze-soft);}

/* ---------- 5 · "When you call" (Phelix) ---------- */
.call-note{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.3rem;align-items:start;
  padding:1.4rem 1.6rem;border:1px solid var(--hairline);background:var(--cream);border-radius:var(--radius);
}
.call-note .cn-ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--bronze-soft);display:flex;align-items:center;justify-content:center;color:var(--bronze-deep);flex:none;}
.call-note .cn-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:.35rem;}
.call-note h3{font-size:clamp(1.15rem,.4vw+1rem,1.4rem);margin-bottom:.45rem;}
.call-note p{font-size:.92rem;color:var(--ink-2);}
.call-note p + p{margin-top:.5rem;}
.on-dark .call-note{background:rgba(244,238,227,.06);border-color:var(--on-dark-line);}
.on-dark .call-note h3{color:var(--on-dark);}
.on-dark .call-note p{color:var(--on-dark-soft);}
.on-dark .call-note .cn-ic{color:var(--bronze-soft);border-color:var(--bronze-soft);}

/* ---------- 6 · Site-wide feedback band ---------- */
.feedback-band{background:var(--linen);border-top:1px solid var(--hairline);}
.feedback-band .fb-inner{padding-block:clamp(1.6rem,3vw,2.4rem);}
.feedback-band details{border:1px solid var(--hairline);background:var(--cream);}
.feedback-band summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.1rem,2.4vw,1.6rem);min-height:56px;
}
.feedback-band summary::-webkit-details-marker{display:none;}
.feedback-band summary .fb-t{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,.5vw+1rem,1.45rem);line-height:1.2;}
.feedback-band summary .fb-s{display:block;font-family:var(--sans);font-weight:400;font-size:.82rem;color:var(--ink-3);margin-top:.15rem;}
.feedback-band summary .fb-x{width:22px;height:22px;position:relative;flex:none;}
.feedback-band summary .fb-x::before,.feedback-band summary .fb-x::after{content:"";position:absolute;inset:0;margin:auto;background:var(--bronze-deep);transition:transform var(--t-fast) var(--ease);}
.feedback-band summary .fb-x::before{width:14px;height:1px;}
.feedback-band summary .fb-x::after{width:1px;height:14px;}
.feedback-band details[open] summary .fb-x::after{transform:rotate(90deg);}
.feedback-band .fb-body{padding:0 clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,2.4vw,1.6rem);border-top:1px solid var(--hairline);}
.feedback-band .fb-body form{margin-top:1.2rem;}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;}
.fb-grid .field--full{grid-column:1/-1;}
.fb-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;}
.fb-privacy{grid-column:1/-1;font-size:.82rem;color:var(--ink-3);line-height:1.6;}
.fb-done{display:none;padding:1.4rem 0 .4rem;}
.fb-done p{max-width:44em;color:var(--ink-2);}
.feedback-band .sent form{display:none;}
.feedback-band .sent .fb-done{display:block;animation:rise .6s var(--ease) both;}
.fb-count{font-size:.78rem;color:var(--ink-3);}

/* ---------- 7 · Video slots ---------- */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,2rem);margin-top:clamp(1.4rem,3vw,2.2rem);}
.video-slot{background:var(--cream);border:1px solid var(--hairline);display:flex;flex-direction:column;}
.video-slot .vs-frame{position:relative;aspect-ratio:16/9;background:var(--espresso);overflow:hidden;}
.video-slot .vs-frame iframe,.video-slot .vs-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-slot .vs-poster{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  color:var(--on-dark);text-align:center;padding:1.4rem;background:
    radial-gradient(120% 90% at 50% 110%,rgba(194,162,124,.22),transparent 60%),var(--espresso);
}
.video-slot .vs-poster .vs-play{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--bronze-soft);display:flex;align-items:center;justify-content:center;
  color:var(--bronze-soft);background:rgba(0,0,0,.18);transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.video-slot .vs-poster .vs-play svg{margin-left:4px;}
.video-slot .vs-poster .vs-state{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint);}
.video-slot .vs-poster .vs-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,.6vw+1rem,1.5rem);line-height:1.2;max-width:18em;}
.video-slot button.vs-poster{border:0;cursor:pointer;width:100%;font:inherit;}
.video-slot .vs-poster.has-still .vs-title{text-shadow:0 1px 8px rgba(0,0,0,.45);}
.video-slot button.vs-poster:hover .vs-play{transform:scale(1.06);background:rgba(194,162,124,.16);}
.video-slot button.vs-poster:focus-visible{outline:2px solid var(--bronze-soft);outline-offset:-4px;}
.video-slot .vs-cap{padding:1.1rem 1.3rem 1.3rem;}
.video-slot .vs-cap .vs-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:.4rem;}
.video-slot .vs-cap h3{font-size:clamp(1.1rem,.4vw+1rem,1.35rem);margin-bottom:.4rem;}
.video-slot .vs-cap p{font-size:.88rem;color:var(--ink-2);}
.video-slot .vs-cap p + p{margin-top:.4rem;}
.video-slot .vs-cap .vs-dur{color:var(--ink-3);font-size:.8rem;}
.video-note{font-size:.82rem;color:var(--ink-3);margin-top:1.1rem;max-width:56em;line-height:1.6;}
.on-dark .video-slot{background:rgba(244,238,227,.05);border-color:var(--on-dark-line);}
.on-dark .video-slot .vs-cap h3{color:var(--on-dark);}
.on-dark .video-slot .vs-cap p{color:var(--on-dark-soft);}
.on-dark .video-note{color:var(--on-dark-faint);}

/* ---------- 8 · Per-procedure guide (patient-information) ---------- */
.pg-select{display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem;}
.pg-select label{font-weight:700;font-size:.92rem;letter-spacing:.01em;}
.pg-select select{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--ivory);border:1px solid var(--hairline-2);
  border-radius:var(--radius);padding:.85rem 2.6rem .85rem 1rem;min-height:48px;min-width:16rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5' stroke='%236F5233' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.pg-select select:hover{border-color:var(--bronze-soft);}
.pg-select select:focus{outline:2px solid var(--bronze-deep);outline-offset:1px;border-color:var(--bronze-deep);background-color:#fff;}
.pg-panels{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem);}
.pg-panel{background:var(--cream);border:1px solid var(--hairline);padding:clamp(1.4rem,2.6vw,2.1rem);}
.pg-panel[hidden]{display:none !important;}
.pg-panel .pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--hairline);padding-bottom:.9rem;margin-bottom:1.2rem;}
.pg-panel h4{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,.7vw+1.1rem,1.8rem);line-height:1.15;margin:0;}
.pg-panel .pg-cov{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);}
.pg-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 1.6rem;}
.pg-cols h5{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem;display:flex;align-items:center;gap:.6rem;}
.pg-cols h5::before{content:"";width:1.1rem;height:1px;background:var(--bronze);}
.pg-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;}
.pg-cols li{font-size:.9rem;color:var(--ink-2);line-height:1.5;padding-left:1rem;position:relative;}
.pg-cols li::before{content:"";position:absolute;left:0;top:.7em;width:.45rem;height:1px;background:var(--bronze-soft);}
.pg-links{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.92rem;}
.pg-panel .pg-video{margin-top:1.2rem;border-top:1px solid var(--hairline);padding-top:1rem;font-size:.86rem;color:var(--ink-3);}

/* ---------- 9 · Instagram feed ---------- */
.ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,2.4vw,1.8rem);}
.ig-head .ig-handle{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);text-decoration:none;font-size:.95rem;}
.ig-head .ig-handle:hover{color:var(--bronze-deep);}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1vw,.8rem);list-style:none;padding:0;margin:0;}
.ig-grid li{display:block;min-width:0;}
.ig-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--linen);border:1px solid var(--hairline);}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.ig-item:hover img{transform:scale(1.04);}
.ig-item .ig-cap{
  position:absolute;inset:auto 0 0 0;padding:.7rem .8rem;font-size:.72rem;line-height:1.4;color:var(--on-dark);
  background:linear-gradient(to top,rgba(33,29,24,.78),transparent);opacity:0;transition:opacity var(--t-fast) var(--ease);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ig-item:hover .ig-cap,.ig-item:focus-visible .ig-cap{opacity:1;}
.ig-item .ig-type{position:absolute;top:.55rem;right:.55rem;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.ig-fallback{
  border:1px dashed var(--hairline-2);background:var(--cream);padding:clamp(1.6rem,3vw,2.4rem);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.ig-fallback p{max-width:36em;color:var(--ink-2);font-size:.95rem;}
.ig-fallback[hidden]{display:none !important;}
.ig-embed-slot:empty{display:none;}
.ig-note{font-size:.8rem;color:var(--ink-3);margin-top:1rem;}

/* ---------- 10 · Service-area footer row ---------- */
.footer-areas{position:relative;z-index:1;border-top:1px solid var(--on-dark-line);padding-block:1.4rem 1.5rem;font-size:.84rem;color:var(--on-dark-faint);display:grid;gap:.5rem;}
.footer-areas .fa-k{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint);}
.footer-areas p{color:var(--on-dark-soft);max-width:78em;line-height:1.7;}
.footer-areas p a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--on-dark-line);}
.footer-areas p a:hover{color:var(--bronze-soft);border-bottom-color:var(--bronze-soft);}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:1.4rem;}
.area-grid .area{background:var(--cream);border:1px solid var(--hairline);padding:1.2rem 1.3rem;}
.area-grid .area .ar-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:.45rem;}
.area-grid .area p{font-size:.9rem;color:var(--ink-2);}

/* ---------- 11 · Clinical trials page furniture ---------- */
.trial-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem);}
.trial-facts .tf{background:var(--cream);border:1px solid var(--hairline);padding:1.4rem 1.5rem;}
.trial-facts .tf .tf-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem;}
.trial-facts .tf .tf-k::before{content:"";width:1.2rem;height:1px;background:var(--bronze);flex:none;}
.trial-facts .tf p{font-size:.93rem;color:var(--ink-2);}
.focus-list{display:grid;gap:1rem;margin-top:1.2rem;}
.focus-list .fl{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:start;padding:1.2rem 0;border-top:1px solid var(--hairline);}
.focus-list .fl:last-child{border-bottom:1px solid var(--hairline);}
.focus-list .fl-n{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1;color:var(--bronze-deep);}
.focus-list .fl h3{font-size:clamp(1.15rem,.4vw+1rem,1.4rem);margin-bottom:.35rem;}
.focus-list .fl p{font-size:.93rem;color:var(--ink-2);max-width:52em;}
.focus-list .fl .fl-s{display:inline-block;margin-top:.5rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- 12 · Compact steps (a .steps list inside a half-width split) ---------- */
.steps--compact li{grid-template-columns:3.4rem 1fr;gap:.35rem 1.2rem;padding:1.5rem 0;}
.steps--compact li::before{grid-row:1/3;}
.steps--compact h3{grid-column:2;padding-top:.15rem;}
.steps--compact p{grid-column:2;padding-top:0;}

/* ---------- 13 · Placeholder "swap when supplied" marker ---------- */
.needs-asset{outline:1px dashed var(--bronze-soft);outline-offset:-1px;}

/* ---------- 14 · v4.2: referring-physicians page ---------- */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(1.6rem,3vw,2.4rem);}
.checklist .cl-col{background:var(--cream);border:1px solid var(--hairline);padding:clamp(1.4rem,2.6vw,2rem);}
.checklist .cl-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;}
.checklist .cl-k::before{content:"";width:1.2rem;height:1px;background:var(--bronze);}
.checklist ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;}
.checklist li{font-size:.93rem;color:var(--ink-2);line-height:1.55;padding-left:1.7rem;position:relative;}
.checklist li::before{
  content:"";position:absolute;left:0;top:.2em;width:.95rem;height:.95rem;border:1px solid var(--bronze-soft);border-radius:2px;background:var(--ivory);
}
.checklist li::after{
  content:"";position:absolute;left:.3rem;top:.42em;width:.32rem;height:.55rem;border-right:1.5px solid var(--bronze-deep);border-bottom:1.5px solid var(--bronze-deep);transform:rotate(42deg);
}
.dl-row{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;gap:1rem;}
.dl-card{
  display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.5rem;max-width:46rem;
  background:var(--cream);border:1px solid var(--hairline);border-left:2px solid var(--bronze);border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.dl-card:hover{border-color:var(--bronze-soft);border-left-color:var(--bronze);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.dl-card .dl-ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--bronze-soft);display:flex;align-items:center;justify-content:center;color:var(--bronze-deep);flex:none;}
.dl-card .dl-body{flex:1 1 14rem;min-width:0;display:grid;gap:.25rem;}
.dl-card .dl-t{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.2;}
.dl-card .dl-s{font-size:.84rem;color:var(--ink-3);line-height:1.5;}
.dl-card .dl-a{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-deep);white-space:nowrap;}

/* ---------- 15 · v4.2: condition pages ---------- */
.sym-box{background:var(--cream);border:1px solid var(--hairline);border-top:2px solid var(--bronze);padding:clamp(1.4rem,2.6vw,2rem);}
.sym-box .sym-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:1rem;}
.sym-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}
.sym-list li{font-size:.95rem;color:var(--ink-2);line-height:1.5;padding-left:1.4rem;position:relative;}
.sym-list li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:1px;background:var(--bronze);}
.sym-box .sym-note{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--hairline);font-size:.82rem;color:var(--ink-3);line-height:1.55;}
.cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.7rem);}
.cond-card{
  display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.5rem,2.5vw,2rem);min-height:15rem;
  background:var(--cream);border:1px solid var(--hairline);color:var(--ink);text-decoration:none;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease);
}
a.cond-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:var(--hairline-2);}
a.cond-card:focus-visible{outline:2px solid var(--bronze-deep);outline-offset:2px;}
.cond-card .cc-k{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-deep);display:flex;align-items:center;gap:.65rem;}
.cond-card .cc-k::before{content:"";width:1.3rem;height:1px;background:var(--bronze);}
.cond-card .cc-t{font-family:var(--serif);font-weight:600;font-size:clamp(1.45rem,.7vw+1.2rem,1.9rem);line-height:1.15;color:var(--ink);}
.cond-card .cc-s{font-size:.93rem;color:var(--ink-2);line-height:1.6;}
.cond-card .cc-a{margin-top:auto;padding-top:1rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-deep);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;}
.cond-card .cc-a .ar{transition:transform var(--t-fast) var(--ease);}
a.cond-card:hover .cc-a .ar{transform:translateX(4px);}
.cond-card--static{background:var(--linen);}
.cond-card--static .cc-a:hover{color:var(--ink);}
.cmp caption.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- 16 · v4.2: gated before-and-after gallery ---------- */
.gal-notice{max-width:58rem;background:var(--cream);border:1px solid var(--hairline);border-top:2px solid var(--bronze);padding:clamp(1.5rem,3vw,2.4rem);}
.gal-terms{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.8rem;}
.gal-terms li{font-size:.95rem;color:var(--ink-2);line-height:1.6;padding-left:1.5rem;position:relative;}
.gal-terms li::before{content:"";position:absolute;left:0;top:.78em;width:.8rem;height:1px;background:var(--bronze);}
.gal-terms strong{color:var(--ink);font-weight:700;}
.gal-gate summary{list-style:none;}
.gal-gate summary::-webkit-details-marker{display:none;}
.gal-gate-btn{
  display:inline-flex;align-items:center;gap:.9rem;cursor:pointer;
  font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-dark);background:var(--espresso);border:1px solid var(--espresso);border-radius:var(--radius);
  padding:.9rem 1.5rem;min-height:48px;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.gal-gate-btn:hover{background:var(--bronze-deep);border-color:var(--bronze-deep);}
.gal-gate-btn:focus-visible{outline:2px solid var(--bronze-deep);outline-offset:3px;}
.gal-gate-btn .gg-x{width:12px;height:12px;position:relative;flex:none;}
.gal-gate-btn .gg-x::before,.gal-gate-btn .gg-x::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:transform var(--t-fast) var(--ease);}
.gal-gate-btn .gg-x::before{width:12px;height:1px;}
.gal-gate-btn .gg-x::after{width:1px;height:12px;}
.gal-gate[open] .gal-gate-btn .gg-x::after{transform:rotate(90deg);}
.gal-body{margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--hairline);padding-top:clamp(1.6rem,3vw,2.4rem);}
.gal-empty{border:1px dashed var(--hairline-2);padding:clamp(1.4rem,2.6vw,2rem);max-width:44em;}
.gal-empty p{color:var(--ink-2);font-size:.95rem;}
.gal-empty p + p{margin-top:.7rem;}
.gal-empty .eyebrow{margin-bottom:.6rem;}
.ba-cases{margin-top:0;}
.ba-case{background:var(--ivory);border:1px solid var(--hairline);}
.ba-case .tc-body{padding:clamp(1.4rem,2.6vw,2rem);}
.ba-case .ba-summary{margin-top:1.1rem;font-size:.95rem;color:var(--ink-2);max-width:52em;}
.ba-case .ba-consent{margin-top:.5rem;}
.ba-half{aspect-ratio:1/1;}
.ba-half picture{display:block;width:100%;height:100%;}

/* ---------- 17 · v4.2 audit fixes ---------- */
/* C9 signature sub-line: bronze-soft measured 4.1:1 on the espresso-2 panel at 8px;
   one step lighter clears WCAG AA (4.77:1) without changing the look. */
.c9-sig .c9-wm-sub{color:#CDB08C;}

/* ---------- 18 · v4.3 mobile pass ---------- */
/* iOS inflates text in landscape unless told not to */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Grid columns shrink below their content's intrinsic width. Without this, a
   <select> whose longest option is ~300px wide forced the consultation and
   trial-interest forms to 364px on every phone narrower than ~400px, clipping
   the right edge of the form (found in the v4.3 320/375px sweep). */
.split>*,.form-shell,.form-grid,.field,.fb-grid,.fb-grid>*{min-width:0;}
.field input,.field select,.field textarea,.pg-select select{width:100%;max-width:100%;min-width:0;}
/* Lite tier (phones and tablets): a shorter hero arrival so the portrait, which
   is the page's largest paint, is on screen sooner. The desktop choreography is
   unchanged. */
.motion-lite .hero-anim.play .c1-portrait .plate-media{animation-duration:.4s;animation-delay:0s;}
.motion-lite .hero-anim.play [data-stage]{animation-duration:.35s;animation-delay:calc(var(--stage) * 45ms);}
/* Touch screens have no hover: drop the lift effects that only make sense
   under a pointer (the Instagram captions stay in the alt text). */
@media (hover:none){
  a.cond-card:hover,.soc-badge:hover,.reviews-cta:hover,.dl-card:hover{transform:none;box-shadow:none;}
  .ig-item:hover img{transform:none;}
}
/* Phones narrower than 360px (iPhone SE, small Androids): a little less
   letter-spacing and padding so the wordmark, glance grid and badges fit. */
@media (max-width:359.98px){
  .wordmark--name .wm-name{font-size:1.02rem;letter-spacing:.09em;}
  /* (the .44rem wm-sub shrink that lived here proved illegible at 7px and is
     superseded by the .54rem mobile size in section 19c) */
  .glance .g-item{padding:.75rem .8rem;}
  .soc-row{grid-template-columns:1fr 1fr;gap:.5rem;}
  .soc-badge{padding:.9rem .5rem;min-height:6.8rem;}
  .soc-badge img{height:52px;}
  .cond-card{padding:1.2rem 1.1rem;}
  .checklist .cl-col,.sym-box,.gal-notice,.pg-panel,.bio-card{padding:1.2rem 1.1rem;}
  .dl-card{padding:1.1rem 1.1rem;}
}
/* viewport-fit=cover lets the bottom bar extend into the iPhone home-indicator area;
   in landscape the notch sits at the sides, so keep content out of it there. */
@supports (padding-left: env(safe-area-inset-left)){
  @media (max-width:1099.98px){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
    .site-header,.mobile-bar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
    /* v4.4 fix: v4.3 listed .mobile-panel in the rule above, which replaced its
       var(--pad) side padding with env() — 0 on notchless phones — and pressed
       the open menu flush against the screen edge. Pad and safe area together. */
    .mobile-panel{padding-left:calc(var(--pad) + env(safe-area-inset-left));padding-right:calc(var(--pad) + env(safe-area-inset-right));}
  }
}
/* Larger, better-spaced tap targets in the mobile menu and footer lists */
@media (max-width:1099.98px){
  .m-sub a{display:block;padding:.6rem 0;min-height:44px;}
}
@media (max-width:759.98px){
  .footer-list a,.footer-lines a{display:inline-block;padding:.35rem 0;min-height:44px;line-height:1.4;}
  .footer-areas p a{display:inline-block;padding:.2rem 0;}
  .crumbs a{padding:.35rem 0;display:inline-block;}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .soc-row{grid-template-columns:repeat(2,1fr);}
  .cond-grid{grid-template-columns:1fr 1fr;}
  .ig-grid{grid-template-columns:repeat(3,1fr);}
  .pg-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .bio-grid,.video-grid,.trial-facts,.fb-grid,.area-grid,.checklist,.cond-grid{grid-template-columns:1fr;}
  .cond-card{min-height:0;}
  .dl-card{flex-wrap:wrap;}
  .dl-card .dl-a{margin-left:0;}
  .pg-cols{grid-template-columns:1fr;}
  .coe{grid-template-columns:1fr;}
  .coe .coe-seal{width:84px;height:84px;}
  .call-note{grid-template-columns:1fr;}
  .reviews-cta .rv-arrow{margin-left:0;}
  .pg-select select{min-width:0;width:100%;}
  .feedback-band .fb-inner{padding-bottom:calc(clamp(1.6rem,3vw,2.4rem) + 4px);}
}
@media (max-width:430px){
  .soc-row{grid-template-columns:1fr 1fr;gap:.6rem;}
  .soc-badge{min-height:7.4rem;padding:1rem .7rem;}
  .soc-badge img{height:60px;}
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:.35rem;}
}
/* ---------- 19 · v4.4 mobile design pass (26 Aug 2026) ---------- */
/* Audited first: 23 pages x 9 widths (320-1440) in headless Chromium plus a
   per-section visual review at 390. Zero horizontal overflow and zero
   one-word-per-line headings were found, so this section is refinement, not
   rescue: the phone/tablet hero fold, touch-target depth on inline links,
   micro-label legibility, and density on the conditions index. Every rule is
   gated to the mobile-header range (<=1099.98px) or narrower; the desktop
   composition (1100px+) is untouched. */

/* 19a · Hero fold. The 82px/60px stage paddings exist for the desktop pinned
   scene (motion.css: .motion-on .stage); on the unpinned phone/tablet tiers
   they are dead space above the portrait — at 390x844 the headline's second
   line sat under the bottom bar. Tighten them and cap the portrait by
   viewport height (42svh wide at 4:5 = a plate about 52svh tall) so the
   kicker and full headline always enter the first screen. Browsers without
   svh drop the whole min() and keep the engine's 560px/92vw caps. */
@media (max-width:1080px){
  .motion-lite .c1-stage,.motion-static .c1-stage{padding-top:1rem;padding-bottom:calc(2.2rem + env(safe-area-inset-bottom,0px));}
  .hero-inner{padding-block:.9rem 1.5rem;}
  .hero-figure{max-width:min(560px,92vw,42svh);}
}
@media (max-width:760px){
  /* The decorative CPSO micro-line under the hero CTAs repeats the kicker's
     wording; on a phone it is the third repetition on one screen-height. */
  .c1-micro{display:none;}
}
@media (max-width:359.98px){
  /* On the narrowest phones the tracked-uppercase kicker wrapped to three
     lines right at the fold; slightly tighter tracking brings it to two. */
  .hero-kicker{font-size:.66rem;letter-spacing:.12em;}
}

/* 19b · Touch targets. Inline links in running copy cannot be 44px tall
   without wrecking the line box, so grow the hit area with block padding and
   pull it back with an equal negative margin: nothing moves visually, the
   thumb gets a ~44px target. Applied to the links people actually chase on a
   phone: telephone numbers, breadcrumbs, the service-area line. */
@media (max-width:1099.98px){
  main a[href^="tel:"],.ent-rows a,main a[href^="mailto:"]{padding-block:.62rem;margin-block:-.62rem;}
  .crumbs a{padding-block:.75rem;margin-block:-.75rem;}
  .footer-areas p a{padding-block:.55rem;margin-block:-.55rem;}
}

/* 19c · Micro-label legibility. The uppercase keys (glance labels, card
   kickers, register keys, the wordmark sub-line) measured 7-10.9px on
   phones; nudge them to legible sizes in the mobile range only. The desktop
   marginalia scale is part of the design and stays. */
@media (max-width:1080px){
  .glance .g-k,.cond-card .cc-k,.pg-panel .pg-cov,.ent-rows .k,.footer-lines .k,.pr-meta .k,.instl-k{font-size:.7rem;}
  .wordmark--name .wm-sub{font-size:.54rem;letter-spacing:.13em;}
  .coe-seal small,.coe .coe-seal small{font-size:.52rem;}
}
@media (max-width:700px){
  .cmp td::before{font-size:.68rem;}
}

/* 19d · Conditions index density: six similar cards made one very long
   single-file scroll. Tighter cards on phones; two-up in the 600-760px band,
   where the short teasers pair comfortably. */
@media (max-width:760px){
  .cond-grid{gap:.9rem;}
  .cond-card{padding:1.25rem 1.2rem;gap:.5rem;}
  .cond-card .cc-a{padding-top:.55rem;}
}
@media (min-width:600px) and (max-width:760px){
  .cond-grid{grid-template-columns:1fr 1fr;}
}

/* 19e · The 1024-1080px window band. main.css stacks the hero and split
   scenes below 1081px, but motion.js chooses the full desktop tier from
   1024px up — so the pinned 100svh stage clipped the stacked hero: at
   1040x800 the hero CTAs were never fully visible at any scroll position
   (measured on this pass). In this band, collapse pinned scenes to their
   composed state — the same !important collapse motion.css itself applies
   for reduced-motion and motion-failed — and hide the chapter rail that
   narrates the pins. At 1100px the 2-column composition returns and the pin
   works as designed. */
@media (min-width:1024px) and (max-width:1080px){
  .motion-full .scene[data-runway]{height:auto !important;--p:1 !important;}
  .motion-full .scene[data-runway] .stage{position:static !important;height:auto !important;overflow:visible !important;contain:none !important;}
  .motion-full .c1-stage{padding-top:1rem;padding-bottom:2.2rem;}
  .motion-full .chapter-rail{display:none;}
}

/* 19f · Header squeeze band (1100-1199.98px). The desktop header returns at
   1100px, but five nav links plus the page CTA only truly fit from ~1180px:
   the CTA hung 41-81px past the right edge on the pages with longer labels
   (404, patient-information, non-surgical), adding sideways scroll. Tighten
   the nav rhythm and CTA in this band only; from 1200px the header breathes
   as designed. */
@media (min-width:1100px) and (max-width:1199.98px){
  .header-inner{gap:1rem;}
  .nav-link{padding-inline:.42rem;font-size:.86rem;}
  .header-actions .btn{padding-inline:.95rem;font-size:.78rem;}
  .wordmark--name .wm-name{font-size:1.05rem;letter-spacing:.09em;}
}
/* Same story one band up: the header phone number returns at 1280px, and on
   the page with the longest CTA label (non-surgical) the row overflowed by
   39px until ~1360px. A lighter squeeze, nav and CTA only. */
@media (min-width:1200px) and (max-width:1359.98px){
  .nav-link{padding-inline:.45rem;}
  .header-actions .btn{padding-inline:1.05rem;font-size:.8rem;}
}

/* ---------- 20 · v4.5 editorial refinement pass (26 Aug 2026) ---------- */
/* Direction: the folio's desktop presence was quieter than its content
   deserves — display type sat close to body scale (h1 65px / h2 39px at
   1440), paragraphs ran a wide 62ch measure, and the long reading pages
   (About, coverage and FAQ sections) stacked prose with little relief. This
   pass raises the editorial scale on large screens, opens the reading
   measure and register rhythm, and adds restrained pointer feedback. No
   layout structure, no copy, no engine file is touched; phone and tablet
   scales were tuned in v4.4 and stay as they are. */

/* 20a · Type authority from 1200px up, token-level so the hero, the page
   heroes, every section head and lede move together. At 1440 the display
   reaches 80px and section heads 49px; both cap so 1920 stays composed. */
@media (min-width:1200px){
  :root{
    --text-display:clamp(4.25rem,3.9vw + 1.4rem,5rem);
    --text-h2:clamp(2.625rem,2vw + 1.05rem,3.05rem);
    --text-statement:clamp(2.375rem,1.7vw + 1.05rem,2.7rem);
    --text-lede:1.3125rem;
  }
  .display{line-height:1.03;letter-spacing:-.01em;}
  h2{letter-spacing:-.008em;}
  .section-head{margin-bottom:clamp(2.6rem,4.5vw,4.75rem);}
  .section-head h2{margin-bottom:1.35rem;}
  .split{gap:clamp(2.4rem,5vw,6.5rem);}
}

/* 20b · Reading comfort everywhere: a bookish measure and a touch more
   paragraph separation. (58ch at body size is wider than any phone column,
   so this only changes desktop line lengths.) */
.prose{max-inline-size:58ch;}
.prose p + p{margin-top:1.5em;}

/* 20c · Register and accordion rhythm on large screens — the About
   credential rows, colophon registers and FAQ accordions are the site's
   longest reads; open their row spacing so they scan as set pieces. */
@media (min-width:1200px){
  .fact-rows>div{padding:1.2rem 0;}
  .instl-item{padding:1rem 0 1.05rem;}
  .glance .g-item{padding:1.55rem 1.65rem;}
  .acc-btn{padding-block:1.5rem;}
  .acc-body{padding-bottom:1.9rem;font-size:1rem;}
}

/* 20d · Pointer feedback: buttons acknowledge hover and press. Guarded so
   touch screens and reduced-motion users see none of it. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);}
  .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(33,29,24,.4);}
  .btn:active{transform:translateY(0);box-shadow:none;transition-duration:.08s;}
  .arrow-link .ar{transition:transform var(--t-fast) var(--ease);}
  .arrow-link:hover .ar{transform:translateX(4px);}
}

/* ---------- 21 · v4.5.1 material & atmosphere pass (26 Aug 2026) ---------- */
/* The scale and rhythm passes left the surfaces themselves flat: solid band
   fills, shadowless photo plates, default selection/scrollbar chrome. This
   section adds the material layer — soft light on the paper bands, a warm
   cinematic floor on the espresso bands, weight under the mounted plates,
   and the small craft details people feel more than see. Pure CSS washes
   (no filters, no images); every wash is faint enough that axe re-verifies
   all text contrast after the change. */

/* 21a · Light on the paper. A single soft wash falling from the top-left,
   as if the page were lit, on the cream and linen bands; plain ivory
   sections stay flat as the calm beats between them. */
.band-cream{background-color:var(--cream);background-image:radial-gradient(140% 120% at 12% -10%,rgba(194,162,124,.07),transparent 55%);}
.band-linen{background-color:var(--linen);background-image:radial-gradient(140% 120% at 12% -10%,rgba(138,104,66,.06),transparent 55%);}

/* 21b · The espresso bands borrow the video poster's warm floor glow — the
   dark sections read as lit rooms instead of flat panels. */
.band-espresso{background-color:var(--espresso);background-image:radial-gradient(120% 90% at 50% 112%,rgba(194,162,124,.13),transparent 62%),radial-gradient(150% 100% at 50% -20%,rgba(0,0,0,.25),transparent 55%);}

/* 21c · Weight under the photography: mounted plates cast the folio's soft
   shadow, so the portraits sit on the page instead of in it. */
.plate--mounted .plate-media{box-shadow:var(--shadow-soft);}

/* 21d · The phone action bar separates from content with a lifted edge
   instead of a bare hairline. */
.mobile-bar{box-shadow:0 -14px 34px -18px rgba(33,29,24,.35);}

/* 21e · Craft details: themed text selection, and a themed thin scrollbar
   on desktop (left native on touch devices). */
::selection{background:var(--bronze-tint);color:var(--ink);}
.on-dark ::selection,.band-espresso ::selection,.mobile-panel ::selection{background:rgba(194,162,124,.4);color:var(--on-dark);}
@media (min-width:1100px){
  html{scrollbar-color:var(--hairline-2) var(--ivory);scrollbar-width:thin;}
  ::-webkit-scrollbar{width:12px;}
  ::-webkit-scrollbar-track{background:var(--ivory);}
  ::-webkit-scrollbar-thumb{background:var(--hairline-2);border:3px solid var(--ivory);border-radius:8px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--bronze-soft);}
}

/* ---------- 22 · v4.6 below-the-hero clarity pass (26 Aug 2026) ---------- */
/* The brief: everything under the hero is hard to visually process. The
   audit showed the architecture is already structured — a labelled register,
   a numbered step list, an accordion, panelled pathways — but on phones
   every section opens with the same kicker/heading/lede stack in one
   unbroken column, so section boundaries smear and structured content reads
   as a wall. This pass makes each section a clearly separated chapter on
   phones and turns two tall stacked runs into compact pieces. Desktop
   compositions are untouched. */

/* 22a · Chapter separation on phones: real air between sections, a firmer
   band tint at each chapter start (deepened §21 washes), and a touch more
   room under each section head. Net page length still goes DOWN via 22b/c. */
@media (max-width:700px){
  .section{padding-block:clamp(3.4rem,9vw,5rem);}
  .section-head{margin-bottom:2rem;}
  .band-cream{background-image:radial-gradient(150% 130% at 12% -10%,rgba(194,162,124,.1),transparent 58%);}
  .band-linen{background-image:radial-gradient(150% 130% at 12% -10%,rgba(138,104,66,.09),transparent 58%);}
}

/* 22b · The "Beyond the operating room" trio was a ~1,300px single-file
   read of three same-weight tiles. On phones it becomes a swipeable rail —
   one tile in view, the next peeking 18% to invite the swipe. Nothing is
   hidden: the rail scrolls, every tile stays in the accessibility tree and
   tab order (tabbing to a tile's link scrolls it into view). Desktop keeps
   the three-up grid. */
@media (max-width:700px){
  .c7b .tiles-3{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1.1rem;margin-inline:-.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .c7b .tiles-3::-webkit-scrollbar{display:none;}
  .c7b .tile{scroll-snap-align:start;min-width:0;}
}

/* 22c · The society badges: the 2x2 boxed grid ran ~700px tall. Compacted —
   smaller logos, tighter boxes, every word kept (the Member/Listed
   relationship labels are factual qualifiers and stay visible). */
@media (max-width:700px){
  .soc-row{gap:.6rem;}
  .soc-badge{min-height:0;padding:.85rem .6rem;gap:.5rem;}
  .soc-badge img{height:44px;}
  .soc-badge .soc-name{font-size:.68rem;max-width:none;}
}

/* ---------- 23 · v4.7 credibility band (FORM-benchmark pass) ---------- */
/* A quiet affiliations ticker directly under the home hero — the
   hero → credibility → principle → contents progression. Reference studied
   live (formfacebody.ca): their ticker is a CSS transform loop of authority
   logos; ours carries the practice's published credentials and the four
   society marks. Transform-only motion, edge-masked, static wrapped row
   under reduced motion. The duplicate track exists only for the seamless
   loop and is aria-hidden. v5.0: the hover pause is deleted — a marquee
   that stops under every passing cursor reads as broken; the logos still
   regain colour on hover. */
.cred-band{background:var(--ivory);border-block:1px solid var(--hairline);padding-block:1.15rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.cred-mask{display:flex;width:max-content;animation:cred-scroll 64s linear infinite;}
.cred-track{display:flex;align-items:center;list-style:none;padding:0;margin:0;}
.cred-track li{display:flex;align-items:center;white-space:nowrap;padding-right:1.7rem;margin-right:1.7rem;position:relative;}
.cred-track li::after{content:"";position:absolute;right:-2px;top:50%;margin-top:-2px;width:4px;height:4px;border-radius:50%;background:var(--bronze-soft);}
.cred-track .ct{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.cred-track img{height:30px;width:auto;filter:grayscale(1);opacity:.66;transition:filter var(--t-med) var(--ease),opacity var(--t-med) var(--ease);}
.cred-band:hover .cred-track img{filter:none;opacity:1;}
@keyframes cred-scroll{to{transform:translateX(-50%);}}
@media (max-width:700px){
  .cred-band{padding-block:.9rem;}
  .cred-mask{animation-duration:46s;}
  .cred-track .ct{font-size:.64rem;}
  .cred-track img{height:24px;}
  .cred-track li{padding-right:1.2rem;margin-right:1.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .cred-mask{animation:none;width:auto;}
  .cred-track{flex-wrap:wrap;justify-content:center;gap:.55rem 0;}
  .cred-track[aria-hidden]{display:none;}
  .cred-track img{filter:none;opacity:1;}
  .cred-band{-webkit-mask-image:none;mask-image:none;}
}
/* The principle line that follows the band */
.principle-break .statement{margin-inline:auto;text-align:center;max-width:none;}

/* ---------- 24 · full-bleed hero (v4.8 demo, SHIPPED DEFAULT since v5.0) ---------- */
/* The hero-bleed class is on <html> in index.html's markup: the photograph
   edge to edge at full viewport height, headline set over the lower third
   on a scrim, mount chrome removed, pathway hints and micro-line dropped
   for sparseness. The image is bright at the top, so the ink header stays
   as it is. The engine's wipe still plays. ?hero=boxed strips the class in
   js/features.js and restores the v4.x mounted-plate hero for review. */
.hero-bleed .hero.c1{background:var(--espresso);
  /* v5.0: a full bleed runs BEHIND the transparent header, not below it —
     this also puts the whole 100svh composition on screen at scroll 0
     (before, the last 78px of the hero always sat under the fold). */
  margin-top:calc(-1 * var(--header-h));}
.hero-bleed .c1-stage{display:block;height:100vh !important;height:100svh !important;
  /* v5.0: a floor AND a viewport guarantee — the collapse tiers (lite,
     static, the 1024-1080 window band) force height:auto with a higher
     specificity, and min-height is the property they leave alone */
  min-height:540px;min-height:max(540px,100svh);padding:0 !important;}
/* the engine's stage-progress entrances would hold the overlay copy at
   opacity 0 until scroll; in the bleed composition the copy is present
   from the first frame, as the reference does it */
.hero-bleed .c1-copy [data-stage]{opacity:1 !important;transform:none !important;animation:none !important;}
.hero-bleed .c1-figure{position:absolute;inset:0;z-index:0;max-width:none;width:100%;}
.hero-bleed .c1-portrait{max-width:none;width:100%;height:100%;}
.hero-bleed .c1-portrait .plate-media{height:100%;aspect-ratio:auto;max-height:none;box-shadow:none;}
.hero-bleed .c1-portrait .plate-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;}
@media (max-width:760px){
  .hero-bleed .c1-portrait .plate-media img{object-position:50% 18%;}
}
.hero-bleed .c1-portrait .plate-cap,.hero-bleed .c1-backing,.hero-bleed .c1-tick,
.hero-bleed .c1-tk1,.hero-bleed .c1-tk2,.hero-bleed .c1-tk3,.hero-bleed .c1-tk4,
.hero-bleed .c1-hints,.hero-bleed .c1-micro{display:none !important;}
.hero-bleed .c1-portrait.plate--mounted::before,.hero-bleed .c1-figure .figure-mount::before{content:none;}
/* the figure is a child of .hero-inner, so the scrim and copy layer INSIDE
   that container: figure 0, scrim 1, copy 2 */
/* v5.0 scrim, re-graded against per-pixel sampling of the real crops: the
   lower zone (where every line of type sits) runs near-espresso so even the
   small ivory text clears 4.5:1 over the brightest hallway pixels, then the
   veil falls away fast so the faces in the upper half stay photographic. */
.hero-bleed .hero-inner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(38,33,27,.97) 0%,rgba(38,33,27,.93) 26%,rgba(38,33,27,.86) 40%,rgba(38,33,27,.52) 54%,rgba(38,33,27,.16) 68%,rgba(38,33,27,0) 82%);}
.hero-bleed .hero-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;max-width:none;padding:0 var(--pad) clamp(2.4rem,6svh,4rem);}
.hero-bleed .c1-copy{color:var(--on-dark);display:flex;flex-direction:column;align-items:center;max-width:56rem;position:relative;z-index:2;}
/* small type over a photograph: ivory, not bronze — the bronze stays on the
   kicker rules and the arrow glyph, which are decoration, not text */
.hero-bleed .hero-kicker{color:var(--on-dark);text-shadow:0 1px 10px rgba(0,0,0,.5);}
.hero-bleed .hero-kicker::before,.hero-bleed .hero-kicker::after{background:var(--bronze-soft);}
.hero-bleed #hero-h{color:var(--on-dark);font-size:clamp(2.5rem,4.4vw,4.1rem);text-shadow:0 2px 26px rgba(0,0,0,.4);}
.hero-bleed .hero .lede{color:var(--on-dark);font-size:1.0313rem;max-inline-size:46ch;text-shadow:0 1px 12px rgba(0,0,0,.45);margin-top:1rem;}
.hero-bleed .hero-ctas{justify-content:center;margin-bottom:0;margin-top:1.4rem;}
.hero-bleed .hero-ctas .btn-solid{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark);}
.hero-bleed .hero-ctas .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink);}
.hero-bleed .hero-ctas .arrow-link{color:var(--on-dark);}
.hero-bleed .hero-ctas .arrow-link .ar{color:var(--bronze-soft);}
/* short desktop viewports (e.g. 1024x768 laptops): compress the copy block
   so it stays inside the scrimmed lower third instead of climbing onto the
   faces in the middle of the photograph */
@media (min-width:761px) and (max-height:840px){
  .hero-bleed #hero-h{font-size:clamp(2.2rem,3.6vw,3.1rem);}
  .hero-bleed .hero .lede{font-size:.95rem;max-inline-size:44ch;margin-top:.7rem;}
  .hero-bleed .hero-ctas{margin-top:1rem;}
  .hero-bleed .hero-inner{padding-bottom:2rem;}
  /* on short laptops the copy block reaches proportionally higher into the
     photograph, so the veil has to hold longer before it releases */
  .hero-bleed .hero-inner::after{background:linear-gradient(to top,rgba(38,33,27,.97) 0%,rgba(38,33,27,.94) 30%,rgba(38,33,27,.9) 48%,rgba(38,33,27,.66) 62%,rgba(38,33,27,.22) 75%,rgba(38,33,27,0) 87%);}
}
/* very short phones (SE-class, landscape phones): an overlay cannot both
   keep the face clear and carry four text blocks in 640px, so the lower
   zone becomes a solid espresso panel the photograph dissolves into — the
   face keeps the top of the screen, the copy gets guaranteed ground */
@media (max-width:760px) and (max-height:700px){
  .hero-bleed #hero-h{font-size:1.9rem;}
  /* five text blocks cannot share 640px with a photograph. The lede's
     credential sentence is restated in the cred-band one swipe below (the
     same v4.4 reasoning that dropped .c1-micro on phones), so on SE-class
     screens the hero states kicker, headline and the two actions. */
  .hero-bleed .hero .lede{display:none;}
  .hero-bleed .hero-inner::after{background:linear-gradient(to top,#26211B 0%,#26211B 44%,rgba(38,33,27,.9) 56%,rgba(38,33,27,.42) 70%,rgba(38,33,27,0) 84%);}
}
@media (max-width:1080px){
  .hero-bleed .hero-figure{max-width:none;}
  .hero-bleed .hero-inner{padding-bottom:calc(2rem + 52px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:760px){
  /* the copy block must stay below the face in the portrait crop: smaller
     type, a scrim that starts higher, tighter CTA spacing */
  .hero-bleed #hero-h{font-size:2.15rem;}
  .hero-bleed .hero .lede{font-size:.95rem;}
  .hero-bleed .hero-inner::after{background:linear-gradient(to top,rgba(38,33,27,.97) 0%,rgba(38,33,27,.94) 30%,rgba(38,33,27,.88) 44%,rgba(38,33,27,.55) 58%,rgba(38,33,27,.18) 72%,rgba(38,33,27,0) 84%);}
  .hero-bleed .hero-ctas .btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .soc-badge,.reviews-cta,.ig-item img,.video-slot .vs-poster .vs-play,.cond-card,.dl-card{transition:none;}
  .ig-item:hover img{transform:none;}
}
@media print{
  .feedback-band,.ig-feed,.video-slot .vs-frame{display:none !important;}
  .gal-gate{display:none !important;}
}

/* ---------- 25 · v4.9 patient education centre (27 Aug 2026) ---------- */
/* The practice's three retired 2016 tri-fold patient brochures (Endoscopic,
   Nasal Septoplasty, Post-Op), digitised as a Patient Resources hub
   (patient-resources.html) plus two new guide pages and the existing
   post-operative page. Built for the QR use case: a patient on a phone,
   possibly post-operatively, hunting for one instruction. Components:
   25a resource sub-navigation (sticky in-page index), 25b hub cards,
   25c do/don't lists, 25d guide furniture, 25p print. */

/* 25a · Resource sub-navigation. A quiet sticky index under the site
   header: small-caps items, a hairline underneath, the active section
   marked by a bronze underline (scrollspy in js/features.js). On phones it
   is a one-line horizontal scroller with edge fades; without JS it is a
   plain row of in-page links, which is exactly what it degrades to. */
.resnav{position:sticky;top:var(--header-h);z-index:90;background:rgba(252,250,245,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);}
/* the motion engine tucks the header 16px once scrolled (motion.css
   .hdr-compact .site-header{top:-16px}); the index rides the same tuck so no
   content strip shows between them. Static tier never gets .hdr-compact. */
.hdr-compact .resnav{top:62px;}
.motion-on .resnav{transition:top .26s var(--ease);}
.resnav-inner{display:flex;align-items:center;gap:.4rem;}
.resnav-label{flex:0 0 auto;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-deep);padding-right:1rem;
  border-right:1px solid var(--hairline);margin-right:.6rem;}
.resnav-track{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;min-width:0;}
.resnav-track::-webkit-scrollbar{display:none;}
.resnav a{flex:0 0 auto;display:inline-block;padding:.9rem .85rem .8rem;
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink-3);text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  white-space:nowrap;}
.resnav a:hover{color:var(--ink);}
.resnav a[aria-current="true"]{color:var(--bronze-deep);border-bottom-color:var(--bronze);}
.resnav a:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px;}
/* soft edge fade where the row scrolls on narrow screens */
@media (max-width:900px){
  .resnav-label{display:none;}
  .resnav-inner{-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 22px),transparent);}
  .resnav a{padding:.85rem .7rem .75rem;font-size:.78rem;}
}
/* anchor targets land clear of the sticky index. The header is already
   accounted for by the site-wide scroll-padding-top (main.css / the
   hdr-compact override in motion.css); this margin only adds the index's
   own height plus breathing room — do not add --header-h here. */
.res-section{scroll-margin-top:3.4rem;}

/* 25b · Hub cards. Three numbered editorial panels: folio number, serif
   title, one-line purpose, contents preview, arrow. The whole card is the
   link (a stretched pseudo-element on the single anchor keeps the
   accessible name simple). */
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,2.8rem);}
.res-card{position:relative;display:flex;flex-direction:column;background:var(--cream);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.4rem,2.4vw,1.9rem);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease);}
.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);border-color:var(--hairline-2);}
.res-card .rc-n{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--bronze);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;}
.res-card .rc-n::after{content:"";flex:1;height:1px;background:var(--hairline);}
.res-card h3{font-size:clamp(1.35rem,1.8vw,1.6rem);margin-bottom:.55rem;}
.res-card h3 a{color:inherit;text-decoration:none;}
.res-card h3 a::after{content:"";position:absolute;inset:0;}
.res-card:focus-within{outline:2px solid var(--bronze);outline-offset:2px;}
.res-card:focus-within h3 a{outline:none;}
.res-card .rc-p{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin-bottom:1.1rem;}
.res-card .rc-list{list-style:none;margin:0 0 1.5rem;padding:.9rem 0 0;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;}
.res-card .rc-list li{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.res-card .rc-go{margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:.9rem;color:var(--bronze-deep);}
.res-card .rc-go .ar{transition:transform var(--t-fast) var(--ease);}
.res-card:hover .rc-go .ar{transform:translateX(4px);}
@media (max-width:980px){.res-cards{grid-template-columns:1fr;gap:1rem;}}

/* 25c · Do / Don't lists. The 2016 brochure used giant green/red thumb
   buttons; this is the folio's version: two labelled columns, each item
   opening with a thin engraved ring glyph (check / dash) in the margin.
   Calm, scannable, nothing childish. */
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start;}
@media (max-width:860px){.dd-grid{grid-template-columns:1fr;}}
.dd-col h3{display:flex;align-items:center;gap:.75rem;font-size:1.35rem;margin-bottom:.4rem;}
.dd-col .dd-sub{font-size:.85rem;color:var(--ink-3);margin-bottom:1.1rem;}
.dd-list{list-style:none;margin:0;padding:0;}
.dd-list li{position:relative;padding:.95rem 0 .95rem 2.4rem;border-top:1px solid var(--hairline);
  font-size:.95rem;line-height:1.62;color:var(--ink-2);}
.dd-list li:last-child{border-bottom:1px solid var(--hairline);}
.dd-list li strong{color:var(--ink);font-weight:700;}
.dd-list .dd-g{position:absolute;left:0;top:1.05rem;width:1.35rem;height:1.35rem;color:var(--bronze-deep);}
.dd-list .dd-g svg{display:block;width:100%;height:100%;}
.dd-col--dont .dd-list .dd-g{color:var(--ink-3);}

/* 25d · Guide furniture. */
/* the "your instructions come first" notice used on every resource page */
.res-note{display:flex;gap:.9rem;align-items:flex-start;max-width:52em;
  margin-top:clamp(1.6rem,3vw,2.2rem);padding:1.1rem 1.3rem;background:var(--cream);
  border:1px solid var(--hairline);border-left:3px solid var(--bronze-soft);border-radius:var(--radius);}
.res-note p{font-size:.85rem;line-height:1.6;color:var(--ink-2);margin:0;}
/* source line: where this information comes from */
.res-src{font-size:.78rem;color:var(--ink-3);margin-top:1rem;}
/* related-resources footer band on each guide */
.res-related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem;}
.res-related a{display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.25rem;
  background:var(--cream);border:1px solid var(--hairline);border-radius:var(--radius);
  text-decoration:none;transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);}
.res-related a:hover{border-color:var(--bronze-soft);transform:translateY(-2px);}
.res-related .rr-k{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);}
.res-related .rr-t{font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--ink);}
@media (max-width:860px){.res-related{grid-template-columns:1fr;}}
/* prep rules: the medication / smoking stop-lists on the guide pages */
.prep-rules{list-style:none;margin:1.2rem 0 0;padding:0;max-width:52em;}
.prep-rules li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--hairline);}
.prep-rules li:last-child{border-bottom:1px solid var(--hairline);}
.prep-rules .pr-k{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze-deep);white-space:nowrap;padding-top:.2rem;}
.prep-rules p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-2);}
.prep-rules p strong{color:var(--ink);}
@media (max-width:640px){.prep-rules li{grid-template-columns:1fr;gap:.3rem;}}

/* 25p · Print. A patient printing a guide gets the information, not the
   chrome: navigation, action bars, videos, feedback and decorative motion
   are dropped; accordions and reveals are forced open/visible; the office
   contact line is stated at the end of the page (.print-contact is hidden
   on screen). Applies site-wide; written for the resource pages. */
.print-contact{display:none;}
@media print{
  .site-header .site-nav,.site-header .header-actions,.nav-toggle,.mobile-bar,
  .resnav,.crumbs,.m-sub,.mobile-panel,.video-slot,.res-related,
  .site-footer .footer-social,.site-footer .footer-list,.site-footer .btn,
  .footer-areas,.skip-link{display:none !important;}
  .js .reveal,.js .reveal-l,.js .reveal-r{opacity:1 !important;transform:none !important;transition:none !important;}
  .acc-panel{grid-template-rows:1fr !important;}
  .acc-panel>div{overflow:visible !important;}
  .acc-btn{min-height:0;padding:.6rem 0;}
  .acc-x{display:none !important;}
  .section,.section-tight{padding:1.2rem 0 !important;}
  .page-hero{padding:1.4rem 0 .6rem !important;}
  .band-espresso,.band-cream,.band-linen{background:none !important;color:var(--ink) !important;}
  .on-dark,.on-dark *{color:var(--ink) !important;}
  .res-section,.acc-item,.dd-list li,.prep-rules li,.urgent-note,.glance{break-inside:avoid;}
  h2,h3{break-after:avoid;}
  .print-contact{display:block;margin:1.6rem 0;padding-top:1rem;border-top:1px solid var(--hairline-2);
    font-size:.9rem;color:var(--ink);}
  a{text-decoration:none;color:inherit;}
  /* on the patient-education pages (recognised by their sub-navigation),
     printing means the instructions: photography, video shells, CTA buttons
     and the on-screen cross-navigation stay on the screen */
  body:has(.resnav) .plate,body:has(.resnav) .figure-mount,
  body:has(.resnav) #videos,body:has(.resnav) .section:has(.res-related),
  body:has(.resnav) .btn{display:none !important;}
}

/* ---------- 26 · v5.0 button & CTA system ---------- */
/* One voice for every action, three tiers, all echoing the plate/figure
   language (the offset frame is the corner-tick motif applied to a
   control). Timing discipline: ~180ms in, 120ms out, var(--ease), nothing
   over 250ms; hover behaviour is gated to pointer devices and stripped
   under reduced motion. */

/* shared label voice: the kicker register, set on a control */
.btn{
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.9rem;position:relative;isolation:isolate;
  transition:background-color .12s var(--ease),border-color .12s var(--ease),
    color .12s var(--ease),transform .12s var(--ease),box-shadow .12s var(--ease);
}
.btn:hover{transition-duration:.18s;}
.btn:focus-visible{outline:2px solid var(--bronze-deep);outline-offset:2px;}
.on-dark .btn:focus-visible,.band-espresso .btn:focus-visible{outline-color:var(--bronze-soft);}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn .ar{transition:transform .18s var(--ease);display:inline-block;}
@media (hover:hover){
  .btn:hover .ar{transform:translateX(4px);}
}

/* PRIMARY — espresso fill with the offset bronze frame (::after), the
   site's plate mount worn by a button. The frame rests at 45% and closes
   from -5px to -3px on hover. */
.btn-solid{background:var(--espresso);border-color:var(--espresso);}
.btn-solid:hover{background:var(--espresso-2);border-color:var(--espresso-2);color:#fff;}
.btn-solid::after{
  content:"";position:absolute;inset:-5px;border:1px solid var(--bronze);
  border-radius:calc(var(--radius) + 2px);opacity:.45;pointer-events:none;
  transition:opacity .12s var(--ease),inset .12s var(--ease);
}
@media (hover:hover){
  .btn-solid:hover::after{opacity:1;inset:-3px;transition-duration:.18s;}
}
.on-dark .btn-solid::after,.band-espresso .btn-solid::after,.hero-bleed .hero .btn-solid::after{border-color:var(--bronze-soft);}
/* the header CTA sits in a dense utility row: it keeps the compact
   sentence-case spec the v4.4 squeeze bands were measured for (pages with
   long labels — "Ask About Non-Surgical Treatment" — overflow at tracked
   uppercase), and the frame stays quiet there */
.header-actions .btn{text-transform:none;letter-spacing:.04em;font-size:.84rem;padding:.68rem 1.3rem;}
.header-actions .btn-solid::after{inset:-4px;}
@media (hover:hover){ .header-actions .btn-solid:hover::after{inset:-3px;} }

/* SECONDARY — hairline ghost; a bronze-tinted fill sweeps in from the
   left (transform-only ::before under the label). */
.btn-line{background:transparent;}
.btn-line::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bronze-tint);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s var(--ease);
}
@media (hover:hover){
  .btn-line:hover{border-color:var(--bronze);color:var(--ink);background:transparent;}
  .btn-line:hover::before{transform:scaleX(1);transition-duration:.18s;}
  .on-dark .btn-line:hover,.band-espresso .btn-line:hover{background:transparent;color:var(--on-dark);border-color:var(--bronze-soft);}
}
.on-dark .btn-line::before,.band-espresso .btn-line::before{background:rgba(194,162,124,.16);}

/* TERTIARY — the editorial arrow link keeps its nudge and gains an
   underline that draws in from the left. */
.arrow-link{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 calc(100% - .1em);
  transition:color .12s var(--ease),background-size .12s var(--ease);
}
@media (hover:hover){
  .arrow-link:hover{background-size:100% 1px;transition-duration:.18s;}
}

/* the mobile action bar picks up the same label voice at its own scale */
.mobile-bar a{letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;}

/* §19f's header squeeze bands, re-asserted after the §26 header spec so
   the 1100-1360 fit measurements still hold */
@media (min-width:1100px) and (max-width:1199.98px){
  .header-actions .btn{padding-inline:.95rem;font-size:.78rem;}
}
@media (min-width:1200px) and (max-width:1359.98px){
  .header-actions .btn{padding-inline:1.05rem;font-size:.8rem;}
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after,.btn .ar,.arrow-link{transition:none;}
}

/* ---------- 27 · v5.0 header & navigation ---------- */
/* Triggers: the four chevrons are gone from the markup; open/hover state is
   a bronze underline drawn left to right. The geometry matches main.css's
   current-page underline so hover, open and current read as one system. */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.15rem;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left center;
  transition:transform .16s var(--ease);}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after,
.nav-list>li.current>.nav-link::after{transform:scaleX(1);}
/* Contact has no panel; the plain link keeps the same underline */
.nav-list>li:not(.has-dd)>.nav-link::after{bottom:.15rem;}

/* Dropdown: an ivory plate in the folio's language — square corners, a
   2px bronze top rule, hairline border, serif item names. Opens with a
   4px rise + fade. */
.dropdown{background:var(--ivory);border:1px solid var(--hairline-2);border-radius:0;
  border-top:2px solid var(--bronze);box-shadow:var(--shadow-soft);
  padding:.55rem .45rem .65rem;transform:translate(-50%,4px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;}
.nav-list>li.open>.dropdown{transform:translate(-50%,0);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s;}
.dropdown a{border-radius:0;padding:.66rem .85rem;}
.dropdown .dd-t{font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.2;}
.dropdown .dd-s{margin-top:.16rem;}
/* the split (Procedures) panel: links left, a pre-drawn anatomy plate on a
   hairline-divided right column; single column below 1080 (moot — the
   desktop nav exists from 1100 up) */
.dropdown--split{min-width:480px;}
.dd-cols{display:grid;grid-template-columns:minmax(0,1fr) 168px;}
.dd-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  border-left:1px solid var(--hairline);margin:.15rem 0 .15rem .45rem;padding:.6rem 1.05rem;}
.dd-art svg{width:100%;max-height:236px;color:var(--bronze);opacity:.75;}
.dd-art .dda-k{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}

/* the phone number: a fact, not a control — tabular figures, quiet ink,
   an underline that draws on hover */
.header-phone{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0% 1px;background-position:0 calc(100% - .5rem);
  transition:color .16s var(--ease),background-size .16s var(--ease);}
@media (hover:hover){
  .header-phone:hover{color:var(--ink);background-size:100% 1px;}
}

/* compact state reads as a material change: quicker background/shadow fade
   (the height tuck and wm-sub fade already live in motion.css) */
.site-header{transition:background-color .2s var(--ease),box-shadow .2s var(--ease);}

/* mobile panel: firmer serif items; the two care pathways' numbers sit at
   the bottom as an opposed register above a bronze rule (the numbers stay
   separated — ENT vs cosmetic — as everywhere else on the site) */
.m-link,.m-group-btn{font-weight:600;}
.m-meta{border-top:1px solid rgba(194,162,124,.35);padding-top:1.3rem;margin-top:2.4rem;}
.m-meta .m-phone{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:left;}

@media (prefers-reduced-motion:reduce){
  .nav-link::after,.dropdown,.header-phone,.site-header{transition:none;}
}

/* ---------- 28 · v5.0 typographic scale & heading compositions ---------- */
/* Chapter heads stop annotating the page and start owning it: the five key
   moments take the display scale, the statement scale rises, and three
   chapters get their own head composition instead of the uniform
   kicker/heading/lede stack. Chapter kickers carry roman indices (I-VIII),
   one system with the router's "I · Contents". */
:root{--text-statement:clamp(1.9rem,3.4vw,2.9rem);}

/* promoted display moments */
.c3-head h2,.c6 .split-copy h2,.c9-copy h2,.c5-headmain h2{
  font-size:var(--text-display);line-height:1.06;letter-spacing:-.015em;max-width:14em;}
/* the c4 dual titles rise as far as the pinned stage allows: the two titles
   share one grid cell inside a 100svh scene, so the full display size would
   overflow short laptops — this is the display gesture at stage-safe scale */
@media (min-width:1200px){
  .s4-t1,.s4-t2{font-size:clamp(2.625rem,2.4vw + 1.1rem,3.6rem);line-height:1.08;}
}

/* c5 · asymmetric head: index rail left (sticky on tall screens), display
   heading and an offset lede right */
.c5-head{max-width:none;}
@media (min-width:1080px){
  .c5-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 2rem;align-items:start;}
  .c5-head .c5-index{position:sticky;top:calc(var(--header-h) + 2.2rem);margin-bottom:0;}
  .c5-headmain .lede{margin-left:34%;max-width:30em;}
}

/* c7 · the ethical thesis: centred statement under a drawn bronze rule */
.c7-head{max-width:52em;margin-inline:auto;text-align:center;}
.c7-head::before{content:"";display:block;width:1px;height:2.6rem;background:var(--bronze);
  margin:0 auto 1.5rem;transform-origin:top center;}
.js .c7-head.reveal::before{transform:scaleY(0);transition:transform .5s var(--ease) .12s;}
.js .c7-head.reveal.in::before{transform:scaleY(1);}
.c7-head h2{font-size:var(--text-statement);line-height:1.18;}
.c7-head .lede{margin-inline:auto;}

@media (prefers-reduced-motion:reduce){
  .js .c7-head.reveal::before{transform:none;transition:none;}
}

/* ---------- 29 · v5.0 chapter rhythm: the dark authority chapter ---------- */
/* c6 (the credentials register) moves onto espresso: the strongest content
   on the page now sits in its strongest band, and the c4->c9 run alternates
   espresso / ivory / espresso / linen / cream instead of four light bands. */

/* the register as an on-dark ledger: rule left, category label right, the
   registrable fact beneath in serif ivory */
.c6 .s6-colophon .instl-item{grid-template-columns:auto 1fr auto;border-bottom-color:var(--on-dark-line);}
.c6 .s6-colophon .instl-item:first-child{border-top-color:rgba(244,238,227,.28);}
.c6 .s6-colophon .instl-k{grid-column:3;justify-self:end;color:var(--on-dark-faint);}
.c6 .s6-colophon .instl-org{color:var(--on-dark);}
.c6 .s6-colophon .instl-verify{color:var(--bronze-soft);}
.c6 .s6-colophon .instl-verify:hover{color:var(--on-dark);}

/* the portrait plate keeps its mount, framed for the dark ground, with the
   corner ticks of the cover plate; full column width on large screens */
.c6-plate .plate-media{border:1px solid rgba(244,238,227,.2);}
.c6 .plate-cap{color:var(--on-dark-faint);}
.c6 .plate-cap .fig-n{color:var(--bronze-soft);}
@media (min-width:1080px){
  .c6-plate{max-width:none;width:100%;}
}
.kv-tick{position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;opacity:.85;}
.kv-tk1{top:10px;left:10px;border-top:1px solid var(--bronze-soft);border-left:1px solid var(--bronze-soft);}
.kv-tk2{top:10px;right:10px;border-top:1px solid var(--bronze-soft);border-right:1px solid var(--bronze-soft);}
.kv-tk3{bottom:10px;left:10px;border-bottom:1px solid var(--bronze-soft);border-left:1px solid var(--bronze-soft);}
.kv-tk4{bottom:10px;right:10px;border-bottom:1px solid var(--bronze-soft);border-right:1px solid var(--bronze-soft);}

/* the society marks cannot sit raw on espresso (grayscale placeholder art,
   licensing pending): they keep an inset ivory plate card inside the dark
   band, hairline-bordered, with the kicker on the card */
.c6 .soc-strip{background:var(--cream);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.4rem,2.6vw,2rem) clamp(1.2rem,2.2vw,1.7rem);
  margin-top:clamp(2.4rem,4.5vw,3.6rem);}
.c6 .soc-strip .soc-k{color:var(--ink-3);}
.c6 .soc-badge{background:var(--ivory);border-color:var(--hairline);}
.c6 .soc-badge .soc-name{color:var(--ink-2);}
.c6 .soc-note{color:var(--ink-3);}
.c6 .soc-note a{color:var(--bronze-deep);}

/* ---------- c7b: one feature card, two quiet cards ---------- */
/* breaks the three-identical-boxes template moment: the polyps/biologics
   position (the practice's flagship stance) carries the consultation
   photograph and twice the width; trials and teaching stack beside it. */
@media (min-width:701px){
  .c7b .tiles-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tile--feature{grid-column:1 / span 2;grid-row:1 / span 2;
    display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.5rem 1.7rem;align-items:start;}
  .tile--feature .tf-plate{margin:0;}
  .tile--feature .tf-body{min-width:0;}
}
@media (max-width:700px){
  /* on the phone rail the feature card rides as text like its siblings;
     the lazy photograph is never fetched */
  .tile--feature .tf-plate{display:none;}
}

/* ---------- 30 · v5.0 imagery: the method chapter's half-bleed ---------- */
/* The team photograph in c7 runs to the viewport's right edge on large
   screens — the midsection's one architectural image moment. The section
   clips the scrollbar-width excess of the 50vw arithmetic so the standing
   zero-overflow gate holds with classic scrollbars. */
@media (min-width:1080px){
  .c7{overflow-x:clip;}
  .c7 .s7-plate{margin-right:calc(-1 * max((100vw - var(--wrap)) / 2, var(--pad)));
    border-left:1px solid var(--hairline-2);padding-left:clamp(1rem,2vw,1.8rem);}
  .c7 .s7-plate .plate-cap{padding-right:var(--pad);}
}

/* ---------- 31 · v5.0 mobile pass ---------- */
/* Plate strokes draw in half the time on phones: a thumb-scroll settles in
   well under a second, and the plates must be drawn by the time it does.
   Selectors mirror motion.css verbatim (equal specificity, later file). */
@media (max-width:760px){
  .motion-on .c3 [data-cross] .s3-stroke{transition:stroke-dashoffset .45s var(--ease) calc(var(--i,0) * 70ms + .08s);}
  .motion-on .c3 [data-cross] .s3-stroke-soft{transition:stroke-dashoffset .45s var(--ease) calc(var(--i,0) * 70ms + .2s);}
  .motion-on .c3 [data-cross] .s3-lead{transition:stroke-dashoffset .25s var(--ease) calc(var(--i,0) * 70ms + .45s);}
  .motion-on .c3 .s3-label{transition:opacity .25s var(--ease) calc(var(--i,0) * 70ms + .5s),transform .25s var(--ease) calc(var(--i,0) * 70ms + .5s);}
  .motion-on .sp-seq .sp-dev{transition:stroke-dashoffset .55s var(--ease);}
  .motion-on .sp-seq .sp-str{transition:stroke-dashoffset .55s var(--ease) .6s;}
  .motion-on .sn-seq .sn-inner{transition:stroke-dashoffset .35s var(--ease);}
  .motion-on .sn-seq .sn-mid{transition:stroke-dashoffset .35s var(--ease) .38s;}
  .motion-on .sn-seq .sn-outer{transition:stroke-dashoffset .35s var(--ease) .75s;}
  .motion-on .sn-seq .sn-stem{transition:stroke-dashoffset .2s var(--ease) 1.05s;}
  .motion-on .sn-seq .sn-dot{transition:transform .15s var(--ease) 1.1s;}
  .motion-on .nf-contour .nf-path{transition:stroke-dashoffset .7s var(--ease) .1s;}
}

/* ---------- 32 · v6.0 identity: the brand mark arrives ---------- */
/* The client sketched his own mark (logo-concept PDFs, 8 Aug 2026): one
   continuous bronze line, an abstract nasal profile that reads as a drawn
   signature. Rebuilt by hand as SVG (assets/img/brand/) and deployed as a
   system: header lockup on every page, chapter-kicker glyph ritual on the
   home page, one low-opacity watermark per page at most (dark chapters
   only), mobile-panel signature, monogram favicon and 404/offline marks.
   The wordmark TEXT stays "Dr. Justin Khetani" until the name decision
   (CB1) closes — the mark, not the name, is what is safe to ship. */

/* 32a · header lockup: mark beside the two-line wordmark. Grid, not a
   wrapper span, so the existing wm-name/wm-sub markup order is untouched
   and the wm-sub's flanking hairlines keep their flex layout inside the
   grid cell. */
.wordmark.has-mark{display:grid;grid-template-columns:auto auto;column-gap:.72rem;align-items:center;justify-content:start;}
.wordmark.has-mark .wm-mark{grid-row:1/3;grid-column:1;display:block;}
.wordmark.has-mark .wm-name{grid-column:2;}
.wordmark.has-mark .wm-sub{grid-column:2;}
.wm-mark svg{display:block;height:32px;width:auto;color:var(--bronze);}
/* dark grounds: the footer lockup (phase 5), the espresso open-menu header */
.site-footer .wm-mark svg,.nav-open .site-header .wm-mark svg,.mobile-panel .wm-mark svg{color:var(--bronze-soft);}
@media (max-width:1099.98px){
  .wm-mark svg{height:25px;}
  .wordmark.has-mark{column-gap:.6rem;}
}
@media (max-width:359.98px){
  /* the 320 band: the sub-line is the widest row, so it returns to full
     lockup width under the mark (grid-column 1/3) instead of sharing the
     mark's column — the mark only has to fit beside the NAME row, which
     it does (measured: nav-toggle clipped +14px before this). */
  .wm-mark svg{height:18px;}
  .wordmark.has-mark{column-gap:.45rem;}
  .wordmark.has-mark .wm-sub{grid-column:1/3;}
}

/* 32b · draw-on: the header mark strokes itself in once on first paint on
   the motion tiers (motion.js adds .motion-on after first paint, so the
   600ms draw begins exactly then; static tier and no-JS render the mark
   complete because the animation never arms). No layout is touched —
   stroke-dashoffset only, the same pattern as the plate strokes. */
.motion-on .wm-mark .wm-mark-p{stroke-dasharray:1;stroke-dashoffset:1;animation:wm-draw .6s var(--ease) .1s forwards;}
@keyframes wm-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){
  .motion-on .wm-mark .wm-mark-p{animation:none;stroke-dashoffset:0;}
}

/* 32c · the chapter-kicker glyph: the mark at marginalia scale opens each
   roman-index device on the home page (I · Contents through VIII · Visit) —
   the identity as ritual, not a sticker. */
.ey-glyph{display:inline-block;height:1.25em;width:auto;vertical-align:-.3em;margin-right:.5em;color:var(--bronze);}
.on-dark .ey-glyph,.band-espresso .ey-glyph{color:var(--bronze-soft);}

/* 32d · one watermark per page at most, dark chapters only: the line-mark
   at architectural scale, 2.5% opacity, clipped by its section. Decorative;
   never intercepts the pointer. */
.chapter-watermark{position:absolute;top:50%;right:-6%;transform:translateY(-50%);height:130%;width:auto;color:var(--on-dark);opacity:.025;pointer-events:none;z-index:0;}
.c6{position:relative;overflow:clip;}
.c6 .wrap{position:relative;z-index:1;}

/* 32e · mobile-panel signature: the mark closes the menu above the contact
   register, the same way the c9 signature closes the home page. */
.mp-sig{display:flex;justify-content:flex-start;margin-top:2.2rem;}
.mp-sig svg{height:30px;width:auto;color:var(--bronze-soft);opacity:.85;}

/* 32f · 404 monogram */
.nf-mono{margin-bottom:1.3rem;}
.nf-mono svg{height:44px;width:auto;color:var(--bronze);}

/* ---------- 33 · v6.0 page-cover system ---------- */
/* Interior pages stop opening as text-only title bands: each opens like the
   cover of a chapter. One system, four compositions:
     pc--bleed  espresso, photograph edge-bleeds right   (rhinoplasty)
     pc--split  ivory, photograph half-bleeds left       (about)
     pc--band   wide photograph band, copy set into it   (patient-info, contact)
     pc--art    espresso, drawn line-art figure right    (sinus, septo, conditions)
   Shared rules: 55–70svh desktop, never 100svh; body content visible at
   scroll 0 at 1440×900; breadcrumbs kept; <picture> pattern kept with
   explicit dimensions; the LCP photograph is fetchpriority=high and
   preloaded per page; copy is present from the first frame (the v5 hero
   lesson — no entrance choreography on cover text); phones read title-first
   with the photograph below the copy. Cover display heads are two-tone
   (.pc-l1 / .pc-l2) and therefore carry no data-lines (splitLines would
   flatten the spans). */

.page-cover{position:relative;overflow:clip;display:flex;align-items:center;}
.page-cover .pc-inner{position:relative;z-index:2;width:100%;padding-block:clamp(2.6rem,5vw,4rem);}
.page-cover .crumbs{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:.78rem;font-weight:600;color:var(--ink-3);margin-bottom:1.7rem;}
.page-cover .crumbs a{color:var(--ink-3);text-decoration:none;}
.page-cover .crumbs a:hover{color:var(--bronze-deep);}
.page-cover .crumbs .sep{color:var(--bronze-soft);}
/* covers carry lede + facts + action as well as the head, and must leave
   body content visible at scroll 0 at 1440×900 — so the cover head sits one
   step below the §20a display scale (premium ≠ oversized). */
.page-cover h1{max-width:16em;margin-bottom:1.2rem;text-wrap:balance;font-size:clamp(2.4rem,1.9vw + 1.5rem,3.45rem);line-height:1.06;}
.page-cover .lede{color:var(--ink-2);max-inline-size:46ch;}
.page-cover .eyebrow{display:flex;align-items:center;gap:.65rem;}
.page-cover .eyebrow::before{content:"";width:1.3rem;height:1px;background:var(--bronze);flex:none;}
/* two-tone display head: line one in the ground's text colour, line two in
   bronze. Display-size type, so the 3:1 large-text bar is what applies —
   bronze on ivory measures 4.6:1, bronze-soft on espresso 6.6:1. */
.pc-l1,.pc-l2{display:block;}
.pc-l2{color:var(--bronze);}
.on-dark .pc-l2{color:var(--bronze-soft);}
/* facts: a two-entry ledger in the footer-lines register */
.pc-facts{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;margin:1.6rem 0 0;padding:0;}
.pc-facts>div{margin:0;}
.pc-facts dt{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem;}
.pc-facts dd{margin:0;font-size:.92rem;color:var(--ink-2);}
.on-dark .pc-facts dt{color:var(--on-dark-faint);}
.on-dark .pc-facts dd{color:var(--on-dark-soft);}
.pc-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem;}
/* dark grounds recolour the shared furniture */
.page-cover.on-dark{background:var(--espresso);}
.page-cover.on-dark .crumbs,.page-cover.on-dark .crumbs a{color:var(--on-dark-faint);}
.page-cover.on-dark .crumbs a:hover{color:var(--bronze-soft);}
.page-cover.on-dark .crumbs [aria-current="page"]{color:var(--on-dark-soft);}
.page-cover.on-dark .eyebrow{color:var(--bronze-soft);}
.page-cover.on-dark .eyebrow::before{background:var(--bronze-soft);}
.page-cover.on-dark h1{color:var(--on-dark);}
/* over a photograph, small type runs SOLID ivory with a faint shadow (the
   hero-bleed rule): translucent on-dark-soft would dip under 4.5:1 on the
   brightest pixels beneath it */
.page-cover.on-dark .lede{color:var(--on-dark);text-shadow:0 1px 12px rgba(0,0,0,.35);}
.page-cover.on-dark .pc-facts dd{color:var(--on-dark);text-shadow:0 1px 10px rgba(0,0,0,.35);}
/* dark covers give actions the hero-bleed treatment: a solid espresso
   button would vanish on its own ground */
.page-cover.on-dark .btn-solid{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink);}
.page-cover.on-dark .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink);}
.page-cover.on-dark .arrow-link{color:var(--on-dark);}
.page-cover.on-dark .arrow-link .ar{color:var(--bronze-soft);}
/* the media block: absolute composition on desktop, stacked block on phones */
.pc-media{position:relative;}
.pc-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);}
.pc-media picture{display:block;width:100%;height:100%;}

/* 33a · pc--bleed: espresso left field, photograph edge-bleeding right.
   The scrim runs espresso→clear left-to-right so the copy sits on true
   espresso and the photograph keeps its own ground on the right. */
@media (min-width:1081px){
  .pc--bleed{min-height:clamp(540px,64svh,690px);}
  .pc--bleed .pc-media{position:absolute;inset:0 0 0 auto;width:46vw;z-index:0;}
  .pc--bleed .pc-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to right,var(--espresso) 0%,rgba(38,33,27,.55) 22%,rgba(38,33,27,.08) 55%,rgba(38,33,27,0) 75%),
               linear-gradient(to top,rgba(38,33,27,.5) 0%,rgba(38,33,27,0) 30%);}
  .pc--bleed .pc-inner>*{max-width:50%;}
}
@media (min-width:1081px) and (max-width:1279.98px){
  .pc--bleed .pc-media{width:42vw;}
  .pc--bleed .pc-inner>*{max-width:54%;}
}

/* 33b · pc--split: photograph half-bleeds to the viewport's left edge,
   ivory copy field right. */
@media (min-width:1081px){
  .pc--split{min-height:clamp(520px,60svh,660px);}
  .pc--split .pc-media{position:absolute;inset:0 auto 0 0;width:42vw;z-index:0;}
  .pc--split .pc-media::after{content:"";position:absolute;inset:0;border-right:1px solid var(--hairline-2);}
  .pc--split .pc-inner{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);}
  .pc--split .pc-inner>*{grid-column:2;padding-left:clamp(2rem,4vw,4rem);}
}

/* 33c · pc--band: a short cinematic band, the title set into the
   photograph's quiet third over a directional scrim. */
@media (min-width:1081px){
  .pc--band{min-height:clamp(400px,52svh,580px);background:var(--espresso);}
  .pc--band .pc-media{position:absolute;inset:0;z-index:0;}
  .pc--band .pc-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to right,rgba(38,33,27,.96) 0%,rgba(38,33,27,.9) 32%,rgba(38,33,27,.68) 55%,rgba(38,33,27,.18) 76%,rgba(38,33,27,0) 90%),
               linear-gradient(to top,rgba(38,33,27,.5) 0%,rgba(38,33,27,0) 34%);}
  .pc--band .pc-inner>*{max-width:46%;}
  .pc--band .lede{max-inline-size:42ch;}
}

/* 33d · pc--art: espresso with the drawn anatomy figure at architectural
   scale. The figure draws itself on the motion tiers (data-play + .play
   from js/main.js); static tiers and no-JS render it complete. */
.pc-cover-art{position:absolute;inset:0 0 0 auto;width:44vw;display:none;align-items:center;justify-content:center;z-index:0;pointer-events:none;color:var(--bronze-soft);}
.pc-cover-art svg{height:82%;max-height:560px;width:auto;opacity:.6;}
@media (min-width:1081px){
  .pc--art{min-height:clamp(520px,60svh,660px);}
  .pc--art .pc-cover-art{display:flex;}
  .pc--art .pc-inner>*{max-width:52%;}
}
.motion-on .pc-cover-art .pc-art-p{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .65s var(--ease) calc(var(--i,0) * 140ms + .15s);}
.motion-on .page-cover.play .pc-cover-art .pc-art-p{stroke-dashoffset:0;}
@media (prefers-reduced-motion:reduce){
  .motion-on .pc-cover-art .pc-art-p{stroke-dashoffset:0;transition:none;}
}

/* 33e · phones and tablets: title-first, photograph below the copy as a
   fixed-height block (no CLS), the drawn figure as a quiet backdrop. */
@media (max-width:1080px){
  /* markup order is media-then-copy (desktop composites the media
     absolutely); phones re-order so the title enters the first screen and
     the photograph follows the copy — the v5 hero lesson. */
  .page-cover{display:flex;flex-direction:column;align-items:stretch;}
  .page-cover .pc-inner{order:1;padding-block:2.2rem 2rem;}
  .page-cover .pc-media,.page-cover .pc-cover-art{order:2;}
  .pc--bleed .pc-media,.pc--split .pc-media,.pc--band .pc-media{position:relative;height:min(46svh,420px);}
  .pc--band .pc-media{height:min(38svh,360px);}
  .pc--bleed .pc-media::before,.pc--band .pc-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(38,33,27,.28) 0%,rgba(38,33,27,0) 30%);}
  .pc--art .pc-cover-art{display:flex;position:absolute;inset:0;width:100%;justify-content:flex-end;align-items:flex-end;}
  .pc--art .pc-cover-art svg{height:88%;max-height:none;opacity:.14;margin-right:-8%;}
  .pc-facts{gap:.9rem 2rem;}
}
@media (max-width:359.98px){
  .page-cover .pc-inner{padding-block:1.8rem 1.6rem;}
  .pc-ctas .btn{width:100%;justify-content:center;}
}

@media print{
  .page-cover{display:block !important;min-height:0 !important;background:none !important;padding:1.4rem 0 .6rem !important;}
  .page-cover .pc-media,.pc-cover-art{display:none !important;}
  .page-cover.on-dark h1,.page-cover.on-dark .lede,.page-cover.on-dark .eyebrow{color:var(--ink) !important;}
  .pc-l2{color:var(--ink) !important;}
}

/* ---------- 34 · v6.0 rhinoplasty flagship: funding + cost ---------- */
/* The hybrid pathway as a designed two-column moment (34a) and the cost
   section (34b): factors → the quotation → the client-instructed starting
   figure, set as a quiet ruled statement, never a price tag. */

/* 34a · the two funding columns */
.fund-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,2rem);}
.fund-col{background:var(--ivory);border:1px solid var(--hairline);border-top:2px solid var(--hairline-2);padding:clamp(1.5rem,2.8vw,2.2rem);}
.fund-col--private{border-top-color:var(--bronze);}
.fund-col .fc-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;}
.fund-col--private .fc-k{color:var(--bronze-deep);}
.fund-col p:not(.fc-k){font-size:.97rem;color:var(--ink-2);line-height:1.65;}
.fund-note{margin-top:clamp(1.4rem,2.6vw,2rem);max-width:56em;font-size:.95rem;color:var(--ink-2);padding-left:1.1rem;border-left:2px solid var(--bronze-soft);}
@media (max-width:860px){.fund-cols{grid-template-columns:1fr;}}

/* 34b · the cost section */
.cost-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start;}
.cost-cols h3{font-size:clamp(1.15rem,.4vw+1rem,1.4rem);margin-bottom:.8rem;}
.cost-cols p{font-size:.95rem;color:var(--ink-2);max-width:34em;}
.cost-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;}
.cost-list li{font-size:.95rem;color:var(--ink-2);line-height:1.55;padding-left:1.4rem;position:relative;}
.cost-list li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;height:1px;background:var(--bronze);}
@media (max-width:860px){.cost-cols{grid-template-columns:1fr;}}
/* the figure: a ruled serif statement in the page's own registers */
.cost-figure{margin-top:clamp(1.8rem,3.4vw,2.6rem);padding-top:clamp(1.2rem,2.2vw,1.6rem);border-top:1px solid var(--hairline-2);
  font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,.9vw+1.05rem,1.7rem);line-height:1.35;color:var(--ink);max-width:34em;text-wrap:pretty;}

/* ---------- 35 · v6.0 access & wait times (shared block) ---------- */
/* Dated access facts as a ledger: label left, fact right, one bronze-ruled
   review stamp whose date lives in a single data-reviewed attribute per
   page (the office edits one attribute; CSS renders it). Used on
   rhinoplasty (private stream), sinus-surgery, patient-information and
   referring-physicians (OHIP stream). No superlatives; the facts carry it. */
.aw-block{margin-top:clamp(2rem,4vw,3rem);background:var(--cream);border:1px solid var(--hairline);border-left:3px solid var(--bronze);border-radius:var(--radius);padding:clamp(1.4rem,2.6vw,2rem) clamp(1.4rem,2.8vw,2.2rem);}
.on-dark .aw-block,.band-espresso .aw-block{background:rgba(244,238,227,.06);border-color:var(--on-dark-line);border-left-color:var(--bronze-soft);}
.aw-block .aw-k{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:1rem;}
.on-dark .aw-block .aw-k{color:var(--bronze-soft);}
.aw-rows{margin:0;display:grid;gap:0;}
.aw-rows>div{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:.3rem 1.6rem;padding:.85rem 0;border-top:1px solid var(--hairline);align-items:baseline;}
.aw-rows>div:last-child{border-bottom:1px solid var(--hairline);}
.on-dark .aw-rows>div{border-color:var(--on-dark-line);}
.aw-rows dt{font-size:.9rem;font-weight:700;color:var(--ink);}
.aw-rows dd{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.55;}
.on-dark .aw-rows dt{color:var(--on-dark);}
.on-dark .aw-rows dd{color:var(--on-dark-soft);}
.aw-note{margin-top:.9rem;font-size:.85rem;color:var(--ink-3);line-height:1.6;max-width:56em;}
.on-dark .aw-note{color:var(--on-dark-faint);}
.aw-stamp{margin-top:1rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.on-dark .aw-stamp{color:var(--on-dark-faint);}
.aw-date::after{content:attr(data-reviewed);}
.on-dark .aw-block a{color:var(--on-dark);}
.on-dark .aw-block a:hover{color:var(--bronze-soft);}
/* inside the patient-information pathway panel the ledger loses its
   two-column geometry (the panel is a half-width card) */
.c-panel .aw-block{margin-top:1.4rem;padding:1.2rem 1.3rem;}
.c-panel .aw-rows>div{grid-template-columns:1fr;gap:.2rem 0;padding:.7rem 0;}
@media (max-width:640px){.aw-rows>div{grid-template-columns:1fr;padding:.75rem 0;}}

/* ---------- 36 · v6.0 the footer becomes a coda ---------- */
/* 862px at 1440 → ≤520px, by information architecture: one full-weight row,
   a nav strip, one graded legal bar. Nothing removed — recomposed. */

/* 36a · row one */
.site-footer--v6 .footer-main{grid-template-columns:1.5fr .9fr 1fr 1.2fr;gap:clamp(1.6rem,3vw,3rem);
  padding-block:clamp(1.7rem,2.8vw,2.3rem) clamp(.9rem,1.4vw,1.1rem);}
.site-footer--v6 .footer-desc{margin-top:.85rem;font-size:.87rem;max-width:26em;}
.site-footer--v6 .footer-social{margin-top:.9rem;display:flex;gap:.6rem;}
.site-footer--v6 .footer-h{margin-bottom:.8rem;}
.site-footer--v6 address{font-style:normal;font-size:.92rem;line-height:1.7;color:var(--on-dark-soft);}
.site-footer--v6 .footer-lines li{margin-bottom:.5rem;}
/* the stacked lockup: mark above the two-line wordmark */
.wordmark--stack{display:block;}
.wordmark--stack .wm-mark{display:block;margin-bottom:.7rem;}
.wordmark--stack .wm-mark svg{height:34px;width:auto;}
.wordmark--stack .wm-sub::before,.wordmark--stack .wm-sub::after{content:"";height:1px;background:var(--bronze-soft);flex:1;opacity:.5;}
/* appointments: two quiet lines + the page's pathway CTA as an arrow-link */
.f-appt{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.f-appt li{font-size:.88rem;line-height:1.55;color:var(--on-dark-soft);padding-left:1.1rem;position:relative;}
.f-appt li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--bronze-soft);}
.site-footer--v6 .f-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-soft);}
.site-footer--v6 .f-cta:hover{color:var(--on-dark);}
.site-footer--v6 .f-cta .ar{color:var(--bronze-soft);}

/* 36b · row two: the Explore links as one wrapped strip with dot separators */
.footer-nav{position:relative;z-index:1;border-top:1px solid var(--on-dark-line);padding-block:.3rem;}
.footer-list--row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:.1rem;}
.footer-list--row li{display:flex;align-items:center;}
.footer-list--row li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--bronze-soft);opacity:.7;margin-inline:.55rem;}
.footer-list--row a{font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--on-dark-soft);text-decoration:none;padding-block:.4rem;display:inline-block;}
.footer-list--row a:hover{color:var(--bronze-soft);}
.footer-nav .fd>summary{min-height:0;}
@media (min-width:760px){
  .footer-nav .fd>summary{display:none;}
  .footer-nav .fd .footer-list--row{display:flex !important;}
}

/* 36c · row three: one graded legal bar (areas → disclaimer → legal line) */
.footer-legal{position:relative;z-index:1;border-top:1px solid var(--on-dark-line);padding-block:.9rem .95rem;display:grid;gap:.45rem;}
.fl-areas{font-size:.78rem;line-height:1.55;color:var(--on-dark-faint);max-width:none;}
.fl-areas .fa-k{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);margin-right:.5rem;}
.fl-areas a{color:var(--on-dark-soft);text-decoration:none;border-bottom:1px solid var(--on-dark-line);}
.fl-areas a:hover{color:var(--bronze-soft);border-bottom-color:var(--bronze-soft);}
/* the faint token alone: any extra opacity on it dips below 4.5:1 (axe) */
.fl-disc{font-size:.75rem;line-height:1.5;color:var(--on-dark-faint);max-width:none;}

/* ---------- 37 · v6.0 ambient atmosphere (v6-assets textures) ---------- */
/* Abstract brand-palette textures only where they beat a flat band; every
   placement is an absolutely-positioned lazy layer (zero CLS), the loop is
   FULL-tier-only via motion.js watchLoops, and each ground's text contrast
   is re-verified per-pixel. Compliance: no people, no clinic depictions,
   no outcomes — recorded in the v6.0 ledger entry. */

/* 37a · home c4: espresso-plaster behind the pinned scene; the loop sits
   over the still and only paints once it actually plays */
.c4-stage{position:relative;}
.c4-tex{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.38;pointer-events:none;}
.c4-tex img,.c4-tex video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.c4-tex video{z-index:1;}
.c4-stage .c4-inner{position:relative;z-index:1;}

/* 37b · home c9: architectural-light, masked to the upper region so the
   faint ledger rows keep their measured contrast */
.c9{position:relative;}
.c9-tex{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.06;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 62%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 62%);}
.c9-tex img{width:100%;height:100%;object-fit:cover;}
.c9>.wrap,.c9 .c9-approach{position:relative;z-index:1;}

/* 37c · the one bronze-silk moment site-wide: the rhinoplasty closing CTA */
.cta-silk{position:relative;overflow:clip;}
.cta-tex{position:absolute;inset:0;z-index:0;opacity:.07;pointer-events:none;}
.cta-tex img{width:100%;height:100%;object-fit:cover;}
.cta-silk>.wrap{position:relative;z-index:1;}

@media print{
  .c4-tex,.c9-tex,.cta-tex{display:none !important;}
}

/* ---------- 38 · v6.0 site-wide polish ---------- */
/* 38a · the kicker ritual on every section lead: the small bronze dash the
   covers introduced, applied to interior section-head eyebrows. Home's
   roman-index kickers already carry the mark glyph and keep it (:has
   guards the double decoration; older engines show dash+glyph, which still
   reads as intentional). */
.section-head .eyebrow{display:flex;align-items:center;gap:.65rem;}
.section-head .eyebrow::before{content:"";width:1.3rem;height:1px;background:var(--bronze);flex:none;}
.section-head .eyebrow:has(.ey-glyph)::before{content:none;}
.on-dark .section-head .eyebrow::before,.band-espresso .section-head .eyebrow::before{background:var(--bronze-soft);}
.section-head .eyebrow.centered{justify-content:center;}

/* 38b · patient-information #surgery re-grid: the accordion opens into two
   columns, and the three always-present procedure panels sit side by side
   (auto-fit, so the JS-narrowed single panel stretches back to full width;
   the inner columns respond to their panel's width the same way). Measured
   3401px → the section reads in under two viewports without a single type
   change. */
@media (min-width:1081px){
  #surgery .acc{max-width:none !important;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.5rem);align-content:start;}
  .pg-panels{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
  .pg-cols{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
}

/* 38c · contact "finding the office" re-grid: map plate left, the three
   practical tiles stacked beside it (measured 2385px section). */
@media (min-width:1081px){
  .find-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(1.4rem,2.6vw,2rem);align-items:stretch;}
  .find-grid .map-card{height:100%;}
  .find-grid .tiles-3{grid-template-columns:1fr;margin-top:0 !important;gap:1rem;}
}

/* 38d · timing discipline: nothing animates longer than 600ms (the cover
   figure draw was 650ms) */
.motion-on .pc-cover-art .pc-art-p{transition-duration:.55s;}
.site-footer--v6 .legal-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.6rem;
  border-top:1px solid var(--on-dark-line);padding-top:.7rem;font-size:.78rem;color:var(--on-dark-faint);}
.site-footer--v6 .legal-row p{margin:0;}

/* 36d · phones: single column, the v3.4 details collapse re-armed by the
   inline script; target ≤700px at 390 */
@media (max-width:759.98px){
  .site-footer--v6 .footer-main{grid-template-columns:1fr;gap:.3rem;padding-block:.9rem .35rem;}
  .site-footer--v6 .fd>summary{padding-block:.3rem;margin-bottom:0;}
  .site-footer--v6 .footer-nav{padding-block:0;}
  .site-footer--v6 .footer-legal{padding-block:.75rem .8rem;gap:.4rem;}
  .fl-areas,.fl-disc{line-height:1.45;}
  /* the sub-line stays in the page header; the footer lockup runs name-only
     on phones */
  .site-footer--v6 .wordmark--stack .wm-sub{display:none;}
  .site-footer--v6 .wordmark--stack .wm-mark{grid-row:1;}
  /* main.css (v3.4) hides the footer wordmark and description on phones;
     v6 restores the LOCKUP as one compact row with the social icons inline
     (the description stays hidden — the legal bar carries the geography). */
  .site-footer--v6 .wordmark--stack{display:grid;grid-template-columns:auto auto;column-gap:.6rem;align-items:center;justify-content:start;}
  .site-footer--v6 .wordmark--stack .wm-mark{grid-row:1/3;margin-bottom:0;}
  .site-footer--v6 .wordmark--stack .wm-mark svg{height:24px;}
  .site-footer--v6 .wordmark--stack .wm-name{grid-column:2;font-size:1.05rem;}
  .site-footer--v6 .wordmark--stack .wm-sub{grid-column:2;font-size:.48rem;letter-spacing:.1em;}
  .site-footer--v6 .footer-main>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem;}
  .site-footer--v6 .footer-social{margin-top:0;}
  .site-footer--v6 .footer-social a{width:36px;height:36px;}
  .site-footer--v6 .footer-social{gap:.4rem;flex:none;}
  /* contact: label and number share the line, m-meta style */
  .site-footer--v6 .footer-lines li{margin-bottom:.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 .8rem;}
  .site-footer--v6 .footer-lines .k{margin-bottom:0;font-size:.62rem;}
  .fl-areas{font-size:.73rem;}
  .fl-disc{font-size:.71rem;}
  .footer-list--row{display:block;padding-bottom:.4rem;}
  .footer-list--row li{display:block;}
  .footer-list--row li+li::before{content:none;}
  .footer-list--row a{display:block;min-height:44px;line-height:1.4;padding:.55rem 0;}
  .footer-nav{padding-block:.2rem;}
  .site-footer--v6 .footer-social{margin-top:.8rem;}
  .wordmark--stack .wm-mark{margin-bottom:.5rem;}
  .wordmark--stack .wm-mark svg{height:26px;}
  .f-appt li{font-size:.85rem;}
  .footer-legal{padding-block:1rem 1.2rem;}
}


/* ---------- 39 · v7.0 foundation: grounds, territory, type scale, measure ---------- */
/* V7 is a structural redesign rather than another polish pass, and this
   section is the foundation the nine later phases sit on. Nothing visible is
   rebuilt here: what changes is the vocabulary — a third and fourth ground,
   the territory accent, a type scale with a working middle rank, three
   paragraph ranks, and a measure enforced in code instead of by eye.

   The engine's own scale tokens (--text-*, declared in the frozen main.css)
   are RE-POINTED at the new --t-* scale rather than left standing beside it.
   Declaring a parallel scale would have moved nothing on its own: every rule
   in main.css and in sections 1-38 above consumes --text-*, so the site would
   have kept its old proportions until each of those rules was rewritten by
   hand. Driving the old names from the new ones moves the whole site in one
   step, which is the entire point of doing this in Phase 1. */

:root{
  /* GROUNDS — two usable grounds became four. The missing mid ground is the
     single biggest reason eight homepage chapters read as one page. Stone is
     a full-bleed band colour, used once or twice per page, never for cards. */
  --stone:#DCD2C2;

  /* TERRITORY ACCENT — the one cool value in the palette, and the fastest
     way to tell AIRWAY from PROFILE without reading a heading. Airway only;
     rhinoplasty keeps bronze. Never a ground, never body copy on stone. */
  --slate:#4C5A5E;
  --slate-soft:#93A3A4;

  /* TYPE SCALE — the old ranks collapsed in the middle, so card titles read
     as bold body rather than as headings. --t-h3 is the rank that fixes it. */
  --t-display:clamp(2.75rem,5.2vw,4.25rem);   /* 44-68px · hero only, 1/page */
  --t-statement:clamp(2.25rem,3.6vw,3.25rem); /* 36-52px · max 2 per page    */
  --t-h2:clamp(1.75rem,2.4vw,2.25rem);        /* 28-36px · section headings  */
  --t-h3:clamp(1.35rem,1.6vw,1.6rem);         /* 22-26px · THE FIXED RANK    */
  --t-lede:clamp(1.15rem,1.3vw,1.3rem);       /* 18-21px · first paragraph   */
  --t-body:1.0625rem;                         /* 17px                        */
  --t-note:.9375rem;                          /* 15px · supporting rank      */
  --t-label:.6875rem;                         /* 11px caps                   */

  --measure:62ch;
  --measure-lede:54ch;                        /* ledes run shorter, never longer */

  /* Re-point the engine scale. This also supersedes the section 20a
     (>=1200px) and section 27 scale overrides above: identical specificity,
     later in source order, so these win at every width. */
  --text-display:var(--t-display);
  --text-statement:var(--t-statement);
  --text-h2:var(--t-h2);
  --text-h3:var(--t-h3);
  --text-lede:var(--t-lede);
  --text-body:var(--t-body);
}

/* 39a · Font budget: 7 woff2 files fetched, down to 4.
   The design direction assumed Mulish 500 and 700 were the removal
   candidates. A computed-usage audit across 26 pages x 2 widths
   (tools/qa/font-audit.py) says otherwise, and the audit wins: Mulish 700 is
   the second most used face on the entire site (2,888 elements, all 26
   pages) because it carries the tracked-caps label register, and Mulish 500
   carries another 1,002. Mulish 600 is the cheaper cut — 1,482 elements, all
   of it UI chrome (nav links, skip link, header phone, accordion buttons,
   breadcrumbs), where 500 is if anything the more measured weight for a site
   whose voice is deliberately quiet. Retired: Mulish 600, Cormorant 500,
   Cormorant italic.

   main.css is frozen, so its @font-face blocks cannot be deleted. Re-
   declaring the same family/weight/style here wins on source order and
   re-points each retired rank at a file that is already being fetched, so
   the three retired files are never requested. The files stay in the package
   because main.css still names them and a 404 is worse than an unused file
   that costs nothing over the wire. */
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/mulish-v18-latin-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");}
/* The only italic Cormorant on the site is the guide folio number. Say that
   in the rule, rather than letting a re-pointed face render it upright and
   leave the markup claiming an italic that no longer exists. */
.rc-n{font-style:normal;}

/* 39b · Three paragraph ranks, not one. A long page cannot be skimmed when
   every paragraph is the same size and colour; the claim, the explanation
   and the caveat now sit at different ranks. Existing markup already carries
   .lede (77), .note (56), .prose (51) and .copy (30), so this is a
   re-specification, not a re-tagging. */
.lede{font-size:var(--t-lede);font-weight:500;max-inline-size:var(--measure-lede);}
/* main.css scopes lede colour per context at (0,2,0); match that reach so
   the claim actually darkens, while leaving the on-dark rules — which are
   more specific still — to keep espresso bands readable. */
.lede,.section-head .lede,.page-hero .lede{color:var(--ink);}
.note{font-size:var(--t-note);color:var(--ink-3);max-inline-size:var(--measure);}

/* 39c · Measure enforced in code. Over-long lines are the most common
   failure in this category — 135-character first paragraphs on one
   competitor, 150-character intros on another. Section 20b had narrowed
   .prose to 58ch; the scale change makes 62ch the correct cap again. */
.prose,.copy{max-inline-size:var(--measure);}

/* 39d · The collapsed middle rank, at the component level. These four card
   titles sit at 17-20px today, close enough to body that they read as bold
   sentences rather than headings. Nav and dropdown titles are deliberately
   NOT promoted: they are chrome, and 22-26px in a menu would be wrong. */
.res-related .rr-t,.dl-card .dl-t,.reviews-cta .rv-t,.feedback-band summary .fb-t{font-size:var(--t-h3);line-height:1.2;}

/* 39e · The stone ground, and the guards the note rank needs on it.
   Stone is a genuinely new ground, so every rank has to be re-checked
   against it rather than assumed (tools/qa/contrast.py). Two results
   matter: --ink-3, the note rank's colour on paper, drops to 3.91:1 on
   stone and 2.73:1 on espresso — both fail for body-size text — and
   --bronze falls to 3.39:1 and is forbidden for any text on this ground.
   The guards below are the reason stone can be used at all. */
.band-stone{background:var(--stone);color:var(--ink);}
.band-stone .note{color:var(--ink-2);}                    /* 3.91 -> 6.43 */
.band-espresso .note,.on-dark .note{color:var(--on-dark-faint);}  /* 2.73 -> 5.15 */
/* On stone the accent is ink, bronze-deep or slate — never bronze. */
.band-stone .accent,.band-stone .kicker,.band-stone .eyebrow{color:var(--bronze-deep);}

/* 39f · Line art that survives being small.
   The FIG plates were failing for a reason the eye reads as "thin" but the
   numbers put on opacity, not stroke width. Measured against --linen: the
   contour wash sat at 1.44:1 and the anatomical profile at 2.58:1, both
   below the 3:1 that WCAG 1.4.11 asks of a graphic carrying meaning, so the
   drawings genuinely disappeared at card scale. Raising the two meaningful
   layers to .85 puts them at 3.8-4.1:1 on linen and ivory.

   The contour wash is a different case: it is an <img> of an external SVG,
   so the container's `color` never reached it and only opacity ever did. It
   stays decorative and below the threshold on purpose, but it comes up far
   enough to be seen at all — at .3 it was paying for a request and
   rendering nothing.

   27 paths inside the figure art still carry a 1px presentation attribute;
   CSS outranks a presentation attribute, so the floor is set here rather
   than by hand-editing the markup on every page. */
.figure-art .fa-profile,.figure-art .fa-motif{opacity:.85;}
.figure-art .fa-contours{opacity:.45;}
.s3-art .fa-contours{opacity:.36;}
.figure-art svg [stroke-width="1"],.figure-art svg[stroke-width="1"]{stroke-width:1.5;}

/* 39g · A declared weight has to match the face that serves it.
   Retiring the Mulish 600 file (§39a) left the sans UI chrome declaring 600
   while a 500 face rendered it. That mismatch is invisible on a warm load and
   costs real CLS on a cold one: the fallback lays the nav out at 600, the
   narrower 500 face arrives, and the header re-flows. Measured on staging,
   desktop home went from a flat 0.000 to a reproducible 0.008 across all
   three runs — `nav.site-nav` 497.7 -> 485.2 px wide, `.header-actions`
   262.2 -> 269.6 px.

   Restoring the Mulish 700 preload did NOT fix it, which is what proved the
   cause was the weight declaration and not the preload budget. The honest
   fix is to declare the weight actually being served. Only sans elements are
   listed: .acc-btn, .m-link/.m-group-btn, .timeline .tl-t and
   .s6-colophon .instl-org are Cormorant and keep their 600. */
.skip-link,.nav-link,.ul-link,.header-phone,.ig-head .ig-handle,
.soc-badge .soc-name,.field .f-err,.field-check .f-err,
.page-hero .crumbs,.page-cover .crumbs,.footer-list--row a,
.instl-org,.glance .g-v{font-weight:500;}

/* The hero lede is the other half of the same shift. §39b moved every lede
   to 500, which quietly moved THIS one off the preloaded Mulish 400 face and
   onto a face discovered from CSS — so it re-flowed on arrival and took
   25.6 px (one line) out of .hero-copy. It is the one lede on the site set
   over a photograph, at its own size, with its own text-shadow; it keeps the
   preloaded face. */
.hero-bleed .hero .lede{font-weight:400;}