/* ============================================================ treatment.css — Phase 1D · Treatment Detail refinement Scoped to treatment.html only. Uses tokens from style.css. AD: "Information-first, expressed editorially" — data-rows + hairlines + oversized light type + one human quote. RTL-first (logical properties). No shadows/blobs/cards. ============================================================ */ /* hide any new section until JS confirms it has data */ [data-opt]{display:none} [data-opt].on{display:block} /* ---------- custom quick-fact icon set (1.5px hairline, warm-black) ---------- QA verdict: typographic (no icons) reads more premium/editorial, so icons are OFF by default. To re-enable the custom glyph set: . */ .qic{width:20px;height:20px;display:none;color:var(--ink);flex:none} body[data-icons="on"] .qic{display:block} .qic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} /* ---------- data strip (Quick-Facts / Results) — reusable hairline grid, now nested inside a section (bottom of Overview / Outcome), not a full band ---------- */ .factstrip{margin-top:clamp(30px,4.5vh,52px);padding-top:clamp(22px,3vh,32px); border-top:1px solid var(--line)} .din{display:grid;grid-template-columns:repeat(var(--cols,5),1fr)} .dcell{padding:6px clamp(14px,2vw,30px);display:flex;flex-direction:column;gap:10px} .dcell + .dcell{border-inline-start:1px solid var(--line)} .dcell .dtop{display:flex;align-items:center;gap:10px} .dcell .dl{font-size:13px;letter-spacing:.16em;color:var(--mut);font-weight:600} .dcell .dv{font-size:clamp(17px,1.35vw,21px);font-weight:300;color:var(--ink); line-height:1.35;letter-spacing:-.01em} .factstrip.res .din{--cols:3} /* Outcome section internal spacing (quote → benefits → results) */ .outcome-benx{margin-top:clamp(40px,6vh,72px)} /* provisional-data markers (QA) — never let an unverified value look final */ .tc{display:inline-block;font-size:10px;line-height:1.4;letter-spacing:.12em;font-weight:700; color:#a6884f;border:1px dashed #cbb37f;border-radius:3px;padding:2px 6px; vertical-align:middle;margin-inline-start:8px;white-space:nowrap} .dcell .dv .tc{margin:5px 0 0} .equote.ph blockquote{color:#6b6459} /* ---------- concern tags — outlined, no fill ---------- */ .tagrow{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px} .tag{font-size:13px;font-weight:600;letter-spacing:.02em;color:#6b6459; border:1px solid var(--line);border-radius:999px;padding:7px 15px;line-height:1; transition:color .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out)} .tag:hover{color:var(--ink);border-color:var(--greige)} .tag:active{transform:scale(.96)} /* ---------- Benefits — editorial large-type, hairline-separated (no bullets) ---------- */ .benx{max-width:1080px;margin-inline:auto;border-top:1px solid var(--line)} .benx .b{border-bottom:1px solid var(--line);padding:clamp(18px,2.6vh,30px) 2px; font-size:clamp(21px,2.5vw,32px);font-weight:300;line-height:1.28; letter-spacing:-.012em;color:var(--ink);text-align:right} .benx .b .em{font-weight:700} /* ---------- Process ladder — oversized numerals + thin spine ---------- */ .ladder{max-width:1000px;margin-inline:auto} .step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px); align-items:start;padding:clamp(22px,3.4vh,40px) 0;border-top:1px solid var(--line)} .step:first-child{border-top:0} .step .num{font-size:clamp(44px,6vw,86px);font-weight:200;line-height:.9; color:var(--greige);letter-spacing:-.02em;font-feature-settings:"tnum"; min-width:1.4em;text-align:start} .step .st{padding-top:clamp(4px,1vw,12px)} .step .st h4{font-size:clamp(19px,1.8vw,25px);font-weight:500;color:var(--ink); line-height:1.2;letter-spacing:-.01em;margin-bottom:10px} .step .st p{font-size:clamp(15px,1.05vw,17px);color:#5a544a;line-height:1.8;max-width:60ch} .ladder-note{max-width:1000px;margin:clamp(20px,3vh,34px) auto 0; font-size:14px;color:var(--mut);line-height:1.7; padding-top:18px;border-top:1px solid var(--line)} .ladder-note b{color:var(--ink);font-weight:600} /* ---------- Expert note / pull-quote ---------- */ .equote{max-width:1040px;margin-inline:auto;text-align:right} .equote blockquote{font-size:clamp(24px,3.1vw,40px);font-weight:300;line-height:1.32; letter-spacing:-.012em;color:var(--ink);position:relative} .equote .qmark{display:block;font-size:clamp(40px,5vw,64px);line-height:.6; color:var(--greige);font-weight:400;margin-bottom:6px} .equote figcaption{margin-top:22px;font-size:13px;letter-spacing:.16em; color:var(--mut);font-weight:600} .equote figcaption b{color:var(--ink);font-weight:600;letter-spacing:.02em} /* ---------- sticky booking rail (mobile) ---------- */ .bookbar{position:fixed;inset-inline:0;bottom:0;z-index:50;display:none; align-items:center;justify-content:space-between;gap:14px; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:var(--ink);color:#fff;box-shadow:0 -6px 24px rgba(60,52,42,.16); transition:transform .3s cubic-bezier(.32,.72,0,1)} .bookbar.hide{transform:translateY(130%)} .bookbar .bn{font-size:14px;font-weight:600;line-height:1.2;opacity:.92; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bookbar .bcta{flex:none;display:inline-flex;align-items:center;gap:9px; background:#fff;color:var(--ink);border-radius:var(--r-btn); font-size:14px;font-weight:600;letter-spacing:.03em;padding:11px 18px;min-height:44px; transition:transform .2s var(--ease-out)} .bookbar .bcta:active{transform:scale(.96)} /* the process ladder already owns the numerals on this page — keep the "more treatments" list clean (no index numerals here) */ #more .trow{grid-template-columns:1fr auto} #more .trow::before{content:none} /* ---------- responsive ---------- NB: --cols is set inline (desktop count) so media rules use !important to win over it. Row-start cells drop their inline-start hairline and wrapped rows gain a top hairline, so the grid reads cleanly at any count. */ @media(max-width:900px){ .din{--cols:3 !important} .dcell{padding:14px clamp(12px,2.5vw,20px);border-inline-start:1px solid var(--line)} .dcell:nth-child(3n+1){border-inline-start:0} .dcell:nth-child(n+4){border-top:1px solid var(--line)} /* a lone last cell fills its row so the strip never leaves an orphan slot */ .dcell:last-child:nth-child(3n+1){grid-column:1 / -1} .dcell:last-child:nth-child(3n+2){grid-column:span 2} } @media(max-width:640px){ .din{--cols:2 !important} .dcell:nth-child(even){border-inline-start:1px solid var(--line)} .dcell:nth-child(odd){border-inline-start:0} .dcell:nth-child(n+3){border-top:1px solid var(--line)} .dcell:last-child:nth-child(odd){grid-column:1 / -1} .bookbar{display:flex} /* no body padding needed: the rail retracts before the footer, so nothing is trapped under it */ }