/* Fimbria — Frauenärztinnen in Berlin (fictional gynaecology practice, demo by FIB Consulting).
   Look from Filip's reference #9 (an editorial campaign): a huge heavy grotesque across the page, pink colour fields,
   small typewriter labels in the corners, a glossy pink object instead of a photograph — here the 3D model of the inner
   genital organs. Square corners, rules instead of cards, black buttons. Bricolage Grotesque (text, headings) and
   DM Mono (labels), both SIL OFL, served by the site itself. No serif, no italics in headings. Light theme only. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --pink:#F4C7DC; --pink-2:#EBA9C7; --pink-3:#FBE4EE; --cream:#FFF7F4; --ink:#16090F; --ink-2:#55333F; --ink-3:#6E4A57;
  --berry:#9E1448; --night:#16090F; --night-2:#E9D3DC; --night-3:#C9AEBA; --night-rule:rgba(255,255,255,.22);
  --rule:rgba(22,9,15,.9); --line:rgba(22,9,15,.16); --line-2:rgba(22,9,15,.32);
  --sans:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --m:max(20px,3.6vw); --maxw:1560px; --ease:cubic-bezier(.2,.7,.2,1);
  --kit-bar-bg:#16090F; --kit-bar-fg:#F6DCE7; --kit-focus:#9E1448; --kit-accent:#9E1448; --kit-font:var(--sans); --kit-line:var(--line);
  --kit-msg-bg:#FBE4EE; --kit-msg-fg:#16090F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
p,li{text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--kit-focus);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.mono{font:500 11.5px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.muted{color:var(--ink-3)}
.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.link:hover{color:var(--berry)}
.big{font:800 clamp(24px,2.4vw,34px)/1.05 var(--sans);letter-spacing:-.03em;text-decoration:none}

/* ---------- buttons: rectangles, typewriter labels ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 22px;border:0;background:var(--ink);color:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--berry)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-pink{background:var(--pink);color:var(--ink)}
.btn-pink:hover{background:#fff;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.top{position:relative;z-index:50;background:var(--pink)}
.top-bar{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:grid;gap:3px;text-decoration:none;line-height:1}
.brand b{font:800 25px/1 var(--sans);letter-spacing:-.04em}
.brand span{font-size:10.5px}
.menu{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu ul{display:flex;gap:24px;list-style:none}
.menu ul a{display:block;padding:8px 0;text-decoration:none;white-space:nowrap}
.menu ul a:hover,.menu ul a[aria-current="page"]:not([href*="#"]){text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1.5px}
.menu .btn{min-height:42px}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--ink)}
.burger,.burger::before,.burger::after{position:absolute;left:12px;width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger{top:22px}.burger::before,.burger::after{content:"";left:0}.burger::before{top:-7px}.burger::after{top:7px}
.menu-btn[aria-expanded="true"] .burger{background:transparent}
.menu-btn[aria-expanded="true"] .burger::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1060px){
  .menu-btn{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:16px;padding:8px var(--m) 24px;background:var(--pink);border-bottom:2px solid var(--ink)}
  .menu.is-open{display:flex}
  .menu ul{flex-direction:column;gap:0}
  .menu ul a{font:800 30px/1.1 var(--sans);letter-spacing:-.03em;text-transform:none;padding:8px 0}
}
.crumb{display:flex;gap:10px;padding-top:18px;color:var(--ink-2)}
.crumb a{color:var(--ink-2)}
.ph+.crumb,.top+main .crumb{background:var(--pink)}

/* ---------- page head of sub pages: a pink field with a giant heading ---------- */
.ph{background:var(--pink);padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(44px,6vw,90px)}
.ph-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px 48px;align-items:end}
.ph h1{font-size:clamp(52px,9.5vw,168px);line-height:.86;letter-spacing:-.05em}
.ph .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-2);max-width:30em}
.ph .acts{margin-top:22px}
.ph-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(28px,4vw,48px);padding-top:12px;border-top:1.5px solid var(--ink)}
main>.crumb{background:var(--pink);max-width:none;padding-left:max(var(--m),calc((100vw - var(--maxw)) / 2 + var(--m)))}
@media(max-width:860px){.ph-in{grid-template-columns:1fr}}

/* ---------- the cover (home) ---------- */
.cover{position:relative;display:flex;flex-direction:column;background:var(--pink);min-height:max(700px,calc(100svh - 74px - 34px));overflow:hidden}
.cover>.wrap{position:relative;flex:1;width:100%}
.word{position:relative;z-index:1;margin-top:clamp(4px,1vw,14px);font:800 31vw/.8 var(--sans);letter-spacing:-.035em;margin-left:-.035em;white-space:nowrap;width:max-content;color:var(--ink)}
/* the model stands in front of the masthead, like the cover model in front of the magazine title */
.model{position:absolute;z-index:2;left:50%;top:calc(-16px + 7vw);width:min(1120px,80vw);aspect-ratio:16/10;transform:translateX(-50%)}
.model .kit-3d-still{object-fit:contain}
.model canvas{cursor:default}
.side{position:absolute;z-index:3;top:calc(-16px + 30vw)}
.side.l{left:var(--m)}.side.r{right:var(--m);text-align:right}
.side{line-height:2.1}
.side a{display:inline-block;min-height:24px;text-decoration:none}.side a:hover{text-decoration:underline}
.cover-foot{position:absolute;z-index:3;left:var(--m);right:var(--m);bottom:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end}
.cover-foot h1{font-size:clamp(38px,4.2vw,72px);line-height:.95;letter-spacing:-.035em;max-width:7em}
.cover-foot>div:last-child{justify-self:end;max-width:27em}
.cover-foot .lead{font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:var(--ink-2);margin-bottom:20px}
@media(max-width:760px){
  .cover{display:block;min-height:0;padding-bottom:34px}
  .model{position:relative;left:auto;top:auto;transform:none;width:calc(100% + 2 * var(--m));margin:-36vw calc(-1 * var(--m)) 0;aspect-ratio:1/1}
  .sides{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:-20vw;position:relative;z-index:3}
  .side{position:static}.side.r{text-align:right}
  .cover-foot{position:static;grid-template-columns:1fr;margin-top:34px}.cover-foot>div:last-child{justify-self:start}
}

/* ---------- sections ---------- */
.sec{padding-top:clamp(70px,9vw,140px);padding-bottom:clamp(70px,9vw,140px)}
.sec-pink{background:var(--pink)}
.sec-blush{background:var(--pink-3)}
.sec-ink{background:var(--night);color:#fff}
.sec-ink h2{color:var(--pink)}
.sec-ink p{color:var(--night-2)}
.sec-ink .link{color:#fff}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
h2.xl,.sec-h h2{font-size:clamp(44px,6.2vw,108px);line-height:.92;letter-spacing:-.045em}
.sec-h p{color:var(--ink-2);max-width:32em}
.sec-ink .sec-h p{color:var(--night-2)}
.sec-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(28px,4vw,48px)}
@media(max-width:760px){.sec-h{grid-template-columns:1fr}}

/* screening by age */
.ages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.age{padding:22px 22px 26px 0;border-right:1px solid var(--line)}
.age+.age{padding-left:22px}.age:last-child{border-right:0}
.age .n{color:var(--berry);font:800 clamp(48px,5.2vw,92px)/.9 var(--sans);letter-spacing:-.045em;white-space:nowrap}
.age .n small{display:block;margin-top:10px;font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.age h3{margin-top:18px;font-size:19px;line-height:1.25;letter-spacing:-.01em;font-weight:700}
.age p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.sec-pink .age{border-color:rgba(22,9,15,.22)}
@media(max-width:1000px){.ages{grid-template-columns:repeat(2,minmax(0,1fr))}.age{border-bottom:1px solid var(--line)}.age+.age{padding-left:0}.age:nth-child(even){padding-left:22px}.age:nth-child(odd){border-right:1px solid var(--line)}}
@media(max-width:600px){.ages{grid-template-columns:1fr}.age,.age:nth-child(even),.age:nth-child(odd){padding-left:0;border-right:0}}

/* pregnancy: a ruler of 40 weeks with the three ultrasound windows */
.ruler{position:relative;margin-top:10px;padding-top:56px}
.ruler .ticks{position:relative;height:56px;border-top:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100% / 40)) top/100% 12px no-repeat}
.ruler .win{position:absolute;top:-56px;height:112px;background:var(--ink);color:#fff;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between}
.ruler .win b{font:800 clamp(22px,2.4vw,38px)/1 var(--sans);letter-spacing:-.03em}
.ruler .win span{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.ruler .lab{display:flex;justify-content:space-between;margin-top:10px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px;margin-top:44px}
.cols3 h3{font-size:20px;line-height:1.2;letter-spacing:-.015em;font-weight:700}
.cols3 p{margin-top:8px;color:var(--ink-2);font-size:16px}
@media(max-width:760px){
  .ruler .win{top:0;height:56px;padding:0}
  .ruler .win b{position:absolute;bottom:calc(100% + 8px);left:0;color:var(--ink);font-size:18px;white-space:nowrap}
  .ruler .win span{display:none}
  .cols3{grid-template-columns:1fr}
}

/* the 28-day example dial */
.cycle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.cycle ul.phases{list-style:none;margin-top:26px;border-top:1px solid var(--night-rule)}
.cycle .phases li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--night-rule)}
.cycle .phases b{font:700 17px var(--sans)}
.cycle .phases span{color:var(--night-2)}
.cycle .btn{margin-top:28px}
.dial{position:relative;width:min(100%,460px);margin-inline:auto}
.dial svg{width:100%;height:auto}
.dial path{fill:none;stroke-width:38;stroke:#3A1C29;transition:stroke .4s}
.dial path.l{stroke:#4D2537}.dial path.m{stroke:var(--berry)}.dial path.o{stroke:var(--pink)}
.dial path.on{stroke:#fff}
.dial-c{position:absolute;inset:0 0 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;pointer-events:none}
.dial-c b{font:800 clamp(72px,9vw,128px)/.85 var(--sans);letter-spacing:-.05em;color:var(--pink)}
.dial-c span{color:var(--night-2)}
.dial figcaption{margin-top:14px;text-align:center;color:var(--night-3)}
@media(max-width:760px){.cycle{grid-template-columns:1fr}}

/* services: numbered rows */
.svc{list-style:none;border-top:2px solid var(--ink)}
.svc li{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr) auto;gap:8px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.svc .n{font:500 12px var(--mono);color:var(--ink-3)}
.svc h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.svc p{color:var(--ink-2)}
.svc a.go{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media(max-width:860px){.svc li{grid-template-columns:44px minmax(0,1fr)}.svc p,.svc a.go{grid-column:2}}

/* practice */
.prax{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;border-top:2px solid var(--ink);padding-top:26px}
.prax h3{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.prax .note{margin-top:10px;font-size:14px;color:var(--ink-2)}
.status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;border:1.5px solid currentColor}
.status[data-open="true"]::before{background:#1F7A55;border-color:#1F7A55}
@media(max-width:900px){.prax{grid-template-columns:1fr}}

/* next free times */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.next a{display:grid;gap:2px;padding:18px 18px 18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.next a+a{padding-left:18px;border-left:1px solid var(--line)}
.next a:hover b{text-decoration:underline;text-underline-offset:.2em}
.next b{font-size:19px;letter-spacing:-.01em}
.next span{font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink-2)}
@media(max-width:820px){.next{grid-template-columns:1fr}.next a+a{padding-left:0;border-left:0}}

/* absence notice: the sign on the practice door */
.notice{margin-top:28px}
.notice-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 40px;padding:24px 28px;background:var(--ink);color:#fff}
.notice .mono{color:var(--pink);margin-bottom:8px}
.notice h2{font-size:clamp(21px,2vw,28px);letter-spacing:-.025em}
.notice p{margin-top:6px;color:var(--night-2)}
.notice ul{list-style:none;display:grid;gap:6px;align-content:end;font-size:15px;color:var(--night-2)}
.notice a{color:#fff;font-weight:700}
@media(max-width:820px){.notice-in{grid-template-columns:1fr}}

/* text blocks of the content pages */
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:2px solid var(--ink)}
.blocks>div{padding:26px 0;border-bottom:1px solid var(--line)}
.blocks h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.025em}
.blocks p,.blocks li{margin-top:8px;color:var(--ink-2)}
.blocks ul{padding-left:20px}
.blocks .mono{display:block;margin-top:12px;color:var(--berry)}
.sec-pink .blocks>div{border-color:rgba(22,9,15,.22)}
@media(max-width:760px){.blocks{grid-template-columns:1fr}}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:baseline;padding:24px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.callout b{font:800 clamp(40px,5vw,84px)/.9 var(--sans);letter-spacing:-.05em;color:var(--berry)}
.callout p{color:var(--ink-2);max-width:40em}
@media(max-width:600px){.callout{grid-template-columns:1fr}}
.steps{list-style:none;counter-reset:s;display:grid;gap:0;border-top:2px solid var(--ink)}
.steps li{counter-increment:s;display:grid;grid-template-columns:70px minmax(0,1fr);gap:4px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 12px var(--mono);color:var(--ink-3);padding-top:6px}
.steps h3{font-size:21px;letter-spacing:-.02em}
.steps p{grid-column:2;color:var(--ink-2)}
.sec-pink .steps li{border-color:rgba(22,9,15,.22)}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px 48px;align-items:start}
.reasons{display:grid;border-top:2px solid var(--ink)}
.reason{position:relative;display:block;cursor:pointer}
.reason input{position:absolute;opacity:0;inset:0}
.reason span{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:15px 14px;border-bottom:1px solid var(--line);transition:background .2s}
.reason b{font-weight:700;font-size:18px}.reason small{grid-column:1;color:var(--ink-2);font-size:14px}
.reason em{grid-row:1/3;grid-column:2;align-self:center;font:500 12px var(--mono);font-style:normal;color:var(--ink-2)}
.reason:hover span{background:var(--pink-3)}
.reason input:checked+span{background:var(--pink)}
.reason input:checked+span b::before{content:"→ "}
.reason input:focus-visible+span{outline:2.5px solid var(--kit-focus);outline-offset:-3px}
.panel{padding:22px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cal-head h3{font-size:18px;letter-spacing:-.01em}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:42px;height:42px;border:0;background:var(--pink-3);cursor:pointer;font-size:17px;color:var(--ink)}
.cal-nav button:hover{background:var(--pink)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.day h4{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:8px;text-align:center}
.day h4 b{display:block;font:700 16px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.day ul{list-style:none;display:grid;gap:6px}
.slot{width:100%;min-height:42px;border:0;background:var(--pink-3);font:500 14px var(--mono);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.slot:hover{background:var(--pink)}
.slot[aria-pressed="true"]{background:var(--ink);color:#fff}
.day .off{font-size:13px;color:var(--ink-2);text-align:center;padding:8px 0}
.cal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cal-foot p{font-size:14.5px;color:var(--ink-2)}
.form{display:grid;gap:14px;margin-top:16px}
.field{display:grid;gap:5px}
.field label{font-weight:700;font-size:15px}
.field input{min-height:48px;padding:0 14px;border:1.5px solid var(--ink);border-radius:0;background:#fff;font:400 16px var(--sans);color:var(--ink)}
.field input:focus{outline:2.5px solid var(--kit-focus);outline-offset:1px}
.hint,.form-note{font-size:14px;color:var(--ink-2)}
.phone-card{margin-top:20px;padding:20px 0;border-top:2px solid var(--ink)}
@media(max-width:900px){.book{grid-template-columns:minmax(0,1fr)}.days{grid-template-columns:repeat(5,minmax(112px,1fr));overflow-x:auto;padding-bottom:6px}}

/* holographic appointment ticket (reference #19), in Fimbria's pinks */
.ticket-wrap{margin-top:18px;perspective:1100px}
.ticket{--mx:.5;--my:.3;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 124px;max-width:580px;color:var(--ink);transform-style:preserve-3d;
  transform:rotateX(calc((var(--my) - .5) * -10deg)) rotateY(calc((var(--mx) - .5) * 14deg));transition:transform .15s linear;
  background:linear-gradient(115deg,#FBE4EE,#FFFFFF 40%,#F6E8FF);box-shadow:0 30px 60px -30px rgba(22,9,15,.5),0 0 0 1.5px var(--ink)}
.ticket::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background:linear-gradient(calc(110deg + var(--mx) * 60deg),#FF9AB8 0%,#FFE0A8 18%,#FF7FBF 36%,#C79BFF 54%,#9FB4FF 70%,#FFC7E2 86%,#FF9AB8 100%);
  background-size:220% 220%;background-position:calc(var(--mx) * 100%) calc(var(--my) * 100%)}
.ticket::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),rgba(255,255,255,.75),rgba(255,255,255,0) 42%)}
.ticket-main{position:relative;z-index:1;padding:20px 22px;display:grid;gap:10px}
.ticket-main h3{font-size:30px;letter-spacing:-.04em}
.ticket-main dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px}
.ticket-main dt{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding-top:3px}
.ticket-bar{height:34px;margin-top:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px);opacity:.85}
.ticket-stub{position:relative;z-index:1;display:grid;place-content:center;gap:8px;text-align:center;padding:16px 10px;border-left:2px dashed rgba(22,9,15,.4);cursor:grab;touch-action:none;transition:transform .6s var(--ease),opacity .6s}
.ticket-stub b{font:800 32px var(--sans);letter-spacing:-.04em}
.ticket-stub small{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ticket-stub button{border:0;background:var(--ink);color:#fff;padding:8px 10px;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.ticket.is-torn .ticket-stub{transform:translate(40px,30px) rotate(14deg);opacity:0}
.ticket-note{margin-top:12px;font-size:14px;color:var(--ink-2);max-width:580px}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ticket-wrap .kit-form-msg{max-width:580px;border-radius:0}
@media(max-width:560px){.ticket{grid-template-columns:1fr}.ticket-stub{border-left:0;border-top:2px dashed rgba(22,9,15,.4)}}

/* ---------- 3D page ---------- */
.v3d{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.v3d-stage{position:relative;background:var(--pink);min-height:min(78vh,760px)}
.v3d-stage .kit-3d{position:absolute;inset:0}
.v3d-stage .kit-3d-still{object-fit:contain;padding:4%}
.v3d-tag{position:absolute;left:18px;bottom:16px;z-index:3;color:var(--ink-2);pointer-events:none}
.v3d-load{position:absolute;left:18px;top:16px;z-index:3;color:var(--ink-2);pointer-events:none;transition:opacity .4s}
.v3d-stage .kit-3d.is-live~.v3d-load{opacity:0}
.v3d-side{padding:24px clamp(18px,2vw,30px) 28px;border-left:2px solid var(--ink);display:flex;flex-direction:column;gap:18px;min-width:0}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5px;background:var(--ink);border:1.5px solid var(--ink)}
.tabs button{min-height:46px;padding:0 4px;border:0;background:var(--cream);font:500 11px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.tabs button:hover{background:var(--pink-3)}
@media(max-width:1280px) and (min-width:981px),(max-width:520px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.mode h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em}
.mode>p{margin-top:8px;color:var(--ink-2);font-size:15.5px}
.parts{list-style:none;margin-top:14px;border-top:1px solid var(--line)}
.parts button{display:grid;grid-template-columns:1fr auto;gap:0 12px;width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.parts button b{font-size:16.5px}
.parts button span{grid-row:1;grid-column:2;font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink-2);align-self:center;text-align:right}
.parts button small{grid-column:1/3;color:var(--ink-2);font-size:14.5px;line-height:1.45;display:none}
.parts button[aria-pressed="true"]{background:var(--pink-3)}
.parts button[aria-pressed="true"] small{display:block;margin-top:4px}
.parts .tx{display:none;padding:4px 2px 12px;border-bottom:1px solid var(--line);background:var(--pink-3);color:var(--ink-2);font-size:14.5px;line-height:1.45}
.parts button[aria-pressed="true"]+.tx{display:block}
.dayctl{margin-top:16px}
.dayctl-top{display:flex;align-items:end;justify-content:space-between;gap:12px}
.dayctl-top b{font:800 clamp(56px,5vw,84px)/.85 var(--sans);letter-spacing:-.05em;color:var(--berry)}
.dayctl input[type=range]{width:100%;margin-top:14px;accent-color:var(--berry);height:30px}
.dayctl .scale{display:flex;justify-content:space-between;color:var(--ink-2)}
.phase{margin-top:14px;padding-top:14px;border-top:1.5px solid var(--ink)}
.phase h3{font-size:22px;letter-spacing:-.025em}
.phase p{margin-top:6px;color:var(--ink-2);font-size:15.5px}
.legend{list-style:none;display:grid;gap:6px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(22,9,15,.3)}
.v3d-note{color:var(--ink-2);font-size:14px}
@media(max-width:980px){.v3d{grid-template-columns:1fr}.v3d-stage{min-height:0;aspect-ratio:1/1}.v3d-side{border-left:0;border-top:2px solid var(--ink)}}

/* ---------- prose, FAQ, sources, footer, dock ---------- */
.prose{max-width:780px;padding-top:36px;padding-bottom:48px}
.prose h1{font-size:clamp(44px,6vw,84px);line-height:.92;letter-spacing:-.045em;margin-bottom:22px}
.prose h2{font-size:22px;letter-spacing:-.02em;margin:30px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px;display:grid;gap:4px}
.prose a{color:var(--ink)}
.faq{max-width:900px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:22px 2px;font-weight:700;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--mono);color:var(--ink-2);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 22px;color:var(--ink-2);max-width:64ch}
.src{padding-top:56px;padding-bottom:72px}
.src h2{font-size:16px;letter-spacing:-.005em}.src h2 span{font-weight:400;color:var(--ink-2);margin-left:8px}
.src ol{margin-top:10px;padding-left:22px;display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.src a{color:var(--ink-2)}
sup.fn{font:500 .7em var(--mono);margin-left:1px}sup.fn a{text-decoration:none;color:var(--berry)}
.sec-ink sup.fn a{color:var(--pink)}
.foot{background:var(--pink);padding:0 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden}
.foot-word{font:800 31vw/.78 var(--sans);letter-spacing:-.035em;white-space:nowrap;width:max-content;margin-left:-.035em;padding-top:2vw;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px 48px;margin-top:clamp(28px,4vw,56px);padding-top:24px;border-top:2px solid var(--ink)}
.foot h2{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.foot nav h2+ul+h2{margin-top:18px}
.foot ul{list-style:none;display:grid;gap:4px;font-size:15.5px}
.foot a{color:var(--ink)}
.foot-brand p+p{margin-top:12px;font-size:15.5px}
.foot .kit-hours th,.foot .kit-hours td{border-color:rgba(22,9,15,.2)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:16px;border-top:1px solid rgba(22,9,15,.25);color:var(--ink-2)}
.foot-base strong{font-weight:500;color:var(--ink)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr}}
.dock{display:none}
@media(max-width:760px){
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:0;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--ink)}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;min-height:54px;text-decoration:none;font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#fff}
  .dock .dock-main{background:var(--berry)}
  .foot{padding-bottom:84px}
}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.ticket{transform:none}.ticket-stub{transition:none}}