/* Cairn & Copper Plumbing Co. — fictional demonstration by Work Covered.
   Direction One: Surface Tension / The First Drop. Single committed theme: chalk and slate. */
:root{
  --slate:#1B1F22; --slate-deep:#101315; --slate-2:#262C30; --slate-3:#333A3F;
  --storm:#5A6670; --storm-light:#8A949B; --storm-faint:#B3BBC0;
  --chalk:#EFEDE8; --chalk-warm:#F6F4EF; --chalk-deep:#E6E3DC; --mist:#DAD9D3; --mist-2:#C9CAC4;
  --copper:#B5714A; --copper-deep:#8F5533; --copper-light:#C98B5F; --copper-pale:#E8D5C6;
  --water:#7C9AA6; --water-deep:#4F6E7A; --water-pale:#D7E1E5;
  --ink:var(--slate); --ground:var(--chalk);
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:180ms; --t-settle:520ms;
  --measure:64ch;
  --pad:clamp(20px,4vw,48px);
  --section:clamp(64px,9vw,128px);
  --radius:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;font-feature-settings:"kern","liga";overflow-x:hidden}
img,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.012em;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(2.5rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
p{margin:0}
ul,ol,dl,dd,figure{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--copper-deep)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--chalk-deep);padding:.06em .36em;border-radius:3px}
:focus-visible{outline:3px solid var(--water-deep);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.final :focus-visible,.site-footer :focus-visible,.menu-panel :focus-visible{outline-color:var(--water)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--section) 0}
[id]{scroll-margin-top:84px}
.label{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--storm);margin-bottom:1rem}
.dark .label{color:var(--storm-faint)}
.label.copper{color:var(--copper-deep)}
.dark .label.copper{color:var(--copper-light)}
.lede{font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.5;max-width:var(--measure);margin-top:1.1rem;color:var(--slate-2)}
.dark .lede{color:var(--storm-faint)}
.measure{max-width:var(--measure)}
.muted{color:var(--storm)}
.dark{background:var(--slate);color:var(--chalk)}
.dark .muted{color:var(--storm-faint)}
.rule{border:0;border-top:1px solid var(--mist);margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--slate);color:var(--chalk);padding:.7rem 1rem;border-radius:var(--radius)}
.skip:focus{left:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.5rem;border:1px solid var(--slate);border-radius:var(--radius);font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.01em;text-decoration:none;position:relative;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn-primary{background:var(--slate);color:var(--chalk)}
.btn-primary:hover{background:var(--slate-2);color:var(--chalk)}
.btn-secondary{background:transparent;color:var(--slate)}
.btn-secondary:hover{background:var(--chalk-deep);color:var(--slate)}
.dark .btn,.final .btn{border-color:var(--chalk)}
.dark .btn-primary,.final .btn-primary{background:var(--chalk);color:var(--slate)}
.dark .btn-primary:hover,.final .btn-primary:hover{background:#fff;color:var(--slate)}
.dark .btn-secondary,.final .btn-secondary{color:var(--chalk)}
.dark .btn-secondary:hover,.final .btn-secondary:hover{background:rgba(239,237,232,.1);color:var(--chalk)}
.hero .btn-secondary{background:rgba(246,244,239,.55)}
.hero .btn-secondary:hover{background:rgba(246,244,239,.9)}
/* the single ripple: one ring, once, on activation — settles, never bounces */
.btn::after,.opt::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid currentColor;opacity:0;pointer-events:none}
.btn.is-rippling::after,.opt.is-rippling::after{animation:ripple var(--t-settle) var(--ease) 1}
@keyframes ripple{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.12,1.35)}}
@media (prefers-reduced-motion:reduce){.btn.is-rippling::after,.opt.is-rippling::after{animation:none}}

/* ---------- demo notice ---------- */
.demo-notice{background:var(--slate-deep);color:#E6E4DE;font-size:.84rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-notice .wrap{display:flex;align-items:center;gap:.7rem;padding-top:.55rem;padding-bottom:.55rem}
.demo-notice .dot{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--copper-light)}
.demo-notice a{color:#fff}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(27,31,34,.92);-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);color:var(--chalk);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit}
.brand svg{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav-links a{text-decoration:none;font-size:.97rem;padding:.6rem 0;border-bottom:1px solid transparent;color:var(--chalk)}
.nav-links a:hover{color:#fff;border-bottom-color:var(--copper-light)}
.nav-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(239,237,232,.35);padding:.42rem .65rem;border-radius:3px;color:var(--chalk);white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:.6rem;min-height:44px;min-width:44px;padding:.4rem .6rem;border:1px solid rgba(239,237,232,.35);border-radius:var(--radius);color:var(--chalk);font-size:.95rem}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:5px}
.menu-btn .bars i{display:block;width:20px;height:2px;background:currentColor}
@media (max-width:860px){.nav-links,.nav-tag{display:none}.menu-btn{display:inline-flex}}
.menu-panel{position:fixed;inset:0;z-index:60;background:var(--slate);color:var(--chalk);padding:var(--pad);display:none;flex-direction:column;overflow:auto}
.menu-panel[data-open="true"]{display:flex}
.menu-panel .menu-top{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.menu-panel .close-btn{min-height:44px;min-width:44px;border:1px solid rgba(239,237,232,.4);border-radius:var(--radius);padding:.4rem .9rem}
.menu-panel nav{margin-top:2rem;display:flex;flex-direction:column}
.menu-panel nav a{font-family:var(--serif);font-size:2rem;text-decoration:none;padding:.9rem 0;border-bottom:1px solid rgba(239,237,232,.14)}
.menu-panel .menu-intents{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem}
.menu-panel .menu-intents .btn{border-color:var(--chalk)}
.menu-panel .menu-intents .btn-primary{background:var(--chalk);color:var(--slate)}
.menu-panel .menu-intents .btn-secondary{color:var(--chalk)}
.menu-panel .menu-note{margin-top:auto;padding-top:2rem;font-size:.85rem;color:var(--storm-faint)}
body[data-menu-open="true"]{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;background:#E9E8E2;color:var(--slate);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media picture,.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%}
.hero-media img,.hero-media video{object-fit:cover;object-position:70% 50%}
.hero-media video{opacity:0;transition:opacity 900ms var(--ease)}
.hero-media video.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,236,230,.92) 0%,rgba(238,236,230,.72) 30%,rgba(238,236,230,.15) 52%,rgba(238,236,230,0) 62%)}
@media (max-width:1000px) and (min-width:761px) and (orientation:landscape){.hero-media img,.hero-media video{object-position:85% 50%}.hero-media::after{background:linear-gradient(90deg,rgba(238,236,230,.94) 0%,rgba(238,236,230,.8) 40%,rgba(238,236,230,.2) 68%,rgba(238,236,230,0) 78%)}}
@media (max-width:1000px) and (min-width:761px) and (orientation:portrait){.hero-media img{object-position:50% 50%}.hero-copy{max-width:30rem}.hero-media::after{background:linear-gradient(180deg,rgba(238,236,230,.9) 0%,rgba(238,236,230,.75) 45%,rgba(238,236,230,0) 70%)}}
@media (max-width:760px){.hero-media img,.hero-media video{object-position:50% 50%}.hero-media::after{background:linear-gradient(180deg,rgba(238,236,230,.92) 0%,rgba(238,236,230,.8) 38%,rgba(238,236,230,.1) 62%,rgba(238,236,230,0) 72%)}}
.hero-inner{position:relative;z-index:1;min-height:min(86svh,900px);display:grid;align-items:center;padding-top:clamp(56px,10vh,120px);padding-bottom:clamp(72px,10vh,120px)}
.hero-copy{max-width:36rem}
.eyebrow{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);margin-bottom:1.2rem}
.hero h1{max-width:12ch}
.hero .sub{margin-top:1.4rem;max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--slate-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-actions .btn{min-width:200px}
@media (max-width:480px){.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}}
.film-line{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--slate);margin-top:2.2rem}
.hero-controls{position:absolute;z-index:2;left:var(--pad);bottom:1.1rem;display:flex;gap:.6rem;align-items:center}
.film-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;border:1px solid rgba(27,31,34,.35);border-radius:var(--radius);background:rgba(246,244,239,.75);color:var(--slate);font-size:.85rem;letter-spacing:.04em}
.film-btn[hidden]{display:none}
.film-note{font-size:.78rem;color:var(--storm);letter-spacing:.03em;background:rgba(246,244,239,.6);padding:.3rem .5rem;border-radius:3px}
@media (max-width:760px){.hero-inner{min-height:min(92svh,860px);align-items:start;padding-top:clamp(28px,6vh,60px)}.hero h1{max-width:9ch;font-size:clamp(2.6rem,12.5vw,3.4rem)}.hero-copy{max-width:100%}.hero .sub{max-width:22rem}}

/* ---------- service standard ---------- */
.standard .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:880px){.standard .grid{grid-template-columns:1fr}}
.standards{margin-top:2rem;border-top:1px solid var(--copper)}
.standards li{padding:1rem 0;border-bottom:1px solid var(--mist);display:grid;gap:.25rem}
.standards b{font-family:var(--serif);font-weight:500;font-size:1.2rem;letter-spacing:-.005em}
.standards span{color:var(--slate-2);font-size:.98rem}
.standard figure{position:sticky;top:96px}
.standard figure img{border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover;width:100%}
figcaption.ill{font-size:.8rem;color:var(--storm);margin-top:.6rem;letter-spacing:.02em}

/* ---------- what do you need ---------- */
.need{background:var(--chalk-warm);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.need-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.5rem);margin-top:2.4rem}
.need-item{display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:inherit;padding:1.4rem 0 1.6rem;border-top:1px solid var(--slate);position:relative}
.need-item:hover .need-go{color:var(--copper-deep);text-decoration:underline}
.need-item.lead{grid-column:span 6;border-top:3px solid var(--copper);padding-top:1.6rem}
.need-item.second{grid-column:span 6}
.need-item.third,.need-item.fourth{grid-column:span 6}
@media (min-width:980px){.need-item.lead{grid-column:span 5;grid-row:span 2}.need-item.second{grid-column:span 7}.need-item.third{grid-column:span 4}.need-item.fourth{grid-column:span 3}}
@media (max-width:640px){.need-item,.need-item.lead,.need-item.second,.need-item.third,.need-item.fourth{grid-column:span 12}}
.need-k{font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1;letter-spacing:-.01em}
.need-item.lead .need-k{font-size:clamp(2rem,3.6vw,3rem)}
.need-d{color:var(--slate-2);max-width:40ch}
.need-item.lead .need-d{font-size:1.05rem;max-width:44ch}
.need-go{margin-top:auto;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-deep);padding-top:.6rem}
.safety-box{margin-top:1rem;padding:1rem 1.1rem;background:var(--chalk);border:1px solid var(--mist-2);border-radius:var(--radius);font-size:.93rem;line-height:1.5;color:var(--slate-2)}
.safety-box strong{font-weight:600;color:var(--slate)}
.safety-box p+p{margin-top:.5rem}

/* ---------- workmanship study ---------- */
.study{background:var(--slate);color:var(--chalk)}
.study .lede{color:#C9CDCB}
.study-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
@media (max-width:760px){.study-head{grid-template-columns:1fr}}
.study-tag{font-size:.8rem;letter-spacing:.06em;color:var(--copper-light);border:1px solid rgba(201,139,95,.5);padding:.5rem .8rem;border-radius:3px;white-space:normal;max-width:32ch}
.study-list{margin-top:3rem;display:grid;gap:clamp(2rem,4vw,3.5rem)}
.study-item{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.2rem,3vw,3rem);align-items:center}
.study-item:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.study-item:nth-child(even) figure{order:2}
@media (max-width:760px){.study-item,.study-item:nth-child(even){grid-template-columns:1fr}.study-item:nth-child(even) figure{order:0}}
.study-item figure img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
.study-item figure figcaption{font-size:.78rem;color:var(--storm-faint);margin-top:.5rem;letter-spacing:.02em}
.study-note{position:relative;padding-left:1.4rem;border-left:1px solid var(--copper-light)}
.study-note .n{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-light)}
.study-note h3{margin-top:.5rem;color:var(--chalk)}
.study-note p{margin-top:.7rem;color:#C9CDCB;max-width:38ch}

/* ---------- journey ---------- */
.journey-list{margin-top:2.6rem;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4rem;position:relative;padding-top:1.6rem;counter-reset:step}
.journey-list::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mist-2)}
.journey-list::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--copper);transition:width 1600ms var(--ease)}
.journey-list.is-filled::after{width:100%}
@media (prefers-reduced-motion:reduce){.journey-list::after{transition:none}.journey-list.is-filled::after{width:100%}}
.journey-list li{position:relative;counter-increment:step;display:grid;gap:.4rem;font-size:.95rem;color:var(--slate-2)}
.journey-list li::before{content:counter(step,decimal-leading-zero);font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;color:var(--copper-deep)}
.journey-list .stop{position:absolute;top:calc(-1.6rem - 6px);left:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--copper);background:var(--chalk)}
.journey-list li:last-child .stop{background:var(--copper)}
.journey-list b{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.2;color:var(--slate)}
@media (max-width:900px){.journey-list{grid-template-columns:1fr;padding-top:0;padding-left:1.8rem;gap:1.2rem}.journey-list::before,.journey-list::after{top:0;bottom:0;left:5px;right:auto;width:2px;height:auto}.journey-list::after{height:0;width:2px;transition:height 1600ms var(--ease)}.journey-list.is-filled::after{height:100%;width:2px}.journey-list .stop{top:.35rem;left:calc(-1.8rem - 1px)}}
.journey-foot{margin-top:2rem;font-size:.9rem;color:var(--storm)}

/* ---------- enquiry assistant ---------- */
.assist{background:var(--chalk-warm);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.assist-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.assist-grid{grid-template-columns:1fr}}
.disclosure{margin-top:1.4rem;padding:1rem 1.1rem;border:1px solid var(--mist-2);background:var(--chalk);border-radius:var(--radius);font-size:.93rem;color:var(--slate-2);display:grid;gap:.5rem}
.disclosure b{color:var(--slate);font-weight:600}
.assist-rules{margin-top:1.4rem;display:grid;gap:.45rem;font-size:.93rem;color:var(--slate-2)}
.assist-rules li{padding-left:1.1rem;position:relative}
.assist-rules li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;border:1.5px solid var(--copper)}
.console{background:var(--chalk);border:1px solid var(--mist-2);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.console-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--mist);background:var(--chalk-deep)}
.console-top .who{font-family:var(--serif);font-size:1.05rem;margin-right:auto}
.console-top .who small{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--storm)}
.ctl{min-height:40px;padding:.45rem .8rem;border:1px solid var(--mist-2);border-radius:var(--radius);background:var(--chalk);font-size:.86rem;color:var(--slate)}
.ctl[aria-pressed="true"]{background:var(--slate);color:var(--chalk);border-color:var(--slate)}
.ctl:disabled{opacity:.45;cursor:not-allowed}
.intents{display:flex;flex-wrap:wrap;gap:.7rem;padding:1.1rem 1rem;border-bottom:1px solid var(--mist)}
.intents .btn{flex:1 1 220px}
.intents .btn[aria-pressed="true"]{background:var(--slate);color:var(--chalk)}
.transcript{flex:1;padding:1.1rem 1rem;display:grid;gap:.9rem;align-content:start;overflow:auto;max-height:60vh}
.msg{max-width:52ch;padding:.85rem 1rem;border-radius:8px;font-size:.98rem;line-height:1.5}
.msg.a{background:#fff;border:1px solid var(--mist);border-top-left-radius:2px}
.msg.a .tag{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--storm);margin-bottom:.3rem}
.msg.u{background:var(--slate);color:var(--chalk);justify-self:end;border-top-right-radius:2px}
.msg.s{background:var(--water-pale);border:1px solid #BFCFD5;color:var(--slate);max-width:60ch}
.msg.s strong{font-weight:600}
.msg.s a{color:#3B5763}
.msg.done{background:var(--copper-pale);border:1px solid #D9B99F;max-width:60ch;color:var(--slate)}
.msg.done strong{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:.3rem;font-weight:500}
.msg-summary dl{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.25rem .8rem;margin-top:.5rem;font-size:.92rem}
.msg-summary dt{color:var(--storm)}
.opts{display:flex;flex-wrap:wrap;gap:.55rem;padding:0 1rem 1.1rem}
.opts fieldset{border:0;padding:0;margin:0;display:contents}
.opts legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.opt{position:relative;min-height:44px;padding:.6rem 1rem;border:1px solid var(--slate);border-radius:var(--radius);background:var(--chalk);font-size:.95rem;color:var(--slate);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.opt:hover{background:var(--chalk-deep)}
.opt.is-chosen{background:var(--slate);color:var(--chalk)}
.opt-file{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:.9rem;color:var(--slate-2)}
.opt-file label{display:inline-flex;align-items:center;gap:.5rem}
.opt-file input{font-size:.9rem;max-width:100%}
.console-foot{padding:.75rem 1rem;border-top:1px solid var(--mist);font-size:.8rem;color:var(--storm);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.assist-static{margin-top:1.2rem;font-size:.9rem;color:var(--storm)}
.assist-static a{color:var(--slate)}
.console[data-paused="true"] .opts{opacity:.5;pointer-events:none}

/* ---------- practical information ---------- */
.practical .items{margin-top:2rem;border-top:1px solid var(--slate)}
.practical details{border-bottom:1px solid var(--mist)}
.practical summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.35rem);min-height:48px}
.practical summary::-webkit-details-marker{display:none}
.practical summary .pm{flex:none;width:28px;height:28px;border:1px solid var(--slate);border-radius:50%;position:relative}
.practical summary .pm::before,.practical summary .pm::after{content:"";position:absolute;background:var(--slate);left:50%;top:50%;transform:translate(-50%,-50%)}
.practical summary .pm::before{width:12px;height:1.5px}
.practical summary .pm::after{width:1.5px;height:12px;transition:transform var(--t-fast) var(--ease)}
.practical details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.practical .body{padding:0 0 1.4rem;max-width:var(--measure);color:var(--slate-2);display:grid;gap:.7rem}
.practical .body ul{display:grid;gap:.35rem;padding-left:1.1rem}
.practical .body li{list-style:disc}
.practical .body a{color:var(--slate)}

/* ---------- final conversion ---------- */
.final{background:var(--slate-deep);color:var(--chalk);position:relative;overflow:hidden}
.final .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:820px){.final .wrap{grid-template-columns:1fr}}
.final h2{color:var(--chalk)}
.final-actions{display:grid;gap:1rem}
.final-card{display:block;text-decoration:none;color:var(--chalk);padding:1.4rem 1.4rem 1.5rem;border:1px solid rgba(239,237,232,.25);border-radius:6px;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.final-card:hover{border-color:var(--copper-light);background:rgba(239,237,232,.04);color:var(--chalk)}
.final-card b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:.3rem}
.final-card span{color:#C9CDCB;font-size:.95rem}
.final-card i{display:block;margin-top:.9rem;font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-light)}
.final .fine{margin-top:1.6rem;font-size:.9rem;color:#B3B9BC;max-width:46ch}

/* ---------- footer ---------- */
.site-footer{background:var(--slate);color:#C9CDCB;padding:3.5rem 0 3rem;font-size:.92rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}
.site-footer h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--storm-faint);margin-bottom:.8rem}
.site-footer p+p{margin-top:.7rem}
.site-footer .brand svg{height:44px}
.site-footer a{color:var(--chalk)}
.site-footer ul{display:grid;gap:.35rem}
.site-footer .sitemap li{color:#AEB4B7}
.foot-legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#AEB4B7;display:grid;gap:.5rem}
.demo-number{font-variant-numeric:tabular-nums}

/* ---------- committed dark theme (after review): slate ground throughout, chalk type, copper as accent ---------- */
body{background:var(--slate);color:var(--chalk)}
:focus-visible{outline-color:var(--water)}
code{background:var(--slate-3);color:var(--chalk)}
.section{color:var(--chalk)}
.deep{background:var(--slate-deep)}
h1,h2,h3,h4{color:var(--chalk)}
.label{color:var(--storm-faint)}
.label.copper{color:var(--copper-light)}
.lede{color:#C9CDCB}
.muted{color:var(--storm-faint)}
.btn{border-color:var(--chalk)}
.btn-primary{background:var(--chalk);color:var(--slate)}
.btn-primary:hover{background:#fff;color:var(--slate)}
.btn-secondary{color:var(--chalk);background:transparent}
.btn-secondary:hover{background:rgba(239,237,232,.1);color:var(--chalk)}
/* hero back to the dark treatment */
.hero{background:var(--slate-deep);color:var(--chalk)}
.hero-media img,.hero-media video{object-position:72% 50%}
.hero-media::after{background:linear-gradient(90deg,rgba(16,19,21,.72) 0%,rgba(16,19,21,.5) 34%,rgba(16,19,21,.08) 56%,rgba(16,19,21,0) 64%),linear-gradient(180deg,rgba(16,19,21,.35) 0%,rgba(16,19,21,0) 20%)}
@media (max-width:1000px) and (min-width:761px) and (orientation:landscape){.hero-media img,.hero-media video{object-position:82% 50%}.hero-media::after{background:linear-gradient(90deg,rgba(16,19,21,.8) 0%,rgba(16,19,21,.6) 42%,rgba(16,19,21,.1) 70%,rgba(16,19,21,0) 80%)}}
@media (max-width:1000px) and (min-width:761px) and (orientation:portrait){.hero-media img{object-position:50% 50%}.hero-media::after{background:linear-gradient(180deg,rgba(16,19,21,.75) 0%,rgba(16,19,21,.5) 45%,rgba(16,19,21,0) 70%)}}
@media (max-width:760px){.hero-media img,.hero-media video{object-position:50% 50%}.hero-media::after{background:linear-gradient(180deg,rgba(16,19,21,.72) 0%,rgba(16,19,21,.5) 40%,rgba(16,19,21,.05) 68%)}}
.eyebrow{color:var(--copper-light)}
.hero .sub{color:#D5D8D6}
.film-line{color:#E4E2DC}
.film-btn{border-color:rgba(239,237,232,.4);background:rgba(16,19,21,.5);color:var(--chalk)}
.film-note{color:#B9BEC1;background:rgba(16,19,21,.45)}
.hero .btn-secondary{background:rgba(16,19,21,.35)}
.hero .btn-secondary:hover{background:rgba(239,237,232,.12)}
.hero-media picture{opacity:1;transform:scale(1);transition:opacity 900ms var(--ease),transform 1200ms var(--ease)}
.hero-media::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 72% 42%,rgba(201,139,95,.24),transparent 32%),linear-gradient(90deg,rgba(16,19,21,.86) 0%,rgba(16,19,21,.6) 38%,rgba(16,19,21,.08) 72%);transition:opacity 900ms var(--ease)}
.hero.is-settled .hero-media video{opacity:0}
.hero.is-settled .hero-media picture{transform:scale(1.025)}
.hero.is-settled .hero-media::before{opacity:1}
/* service standard */
.standards{border-top-color:var(--copper-light)}
.standards li{border-bottom-color:rgba(255,255,255,.12)}
.standards b{color:var(--chalk)}
.standards span{color:#C9CDCB}
figcaption.ill{color:var(--storm-faint)}
/* what do you need */
.need{background:var(--slate-deep);border-top-color:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.08)}
.need-item{border-top-color:rgba(239,237,232,.35);color:var(--chalk)}
.need-item.lead{border-top-color:var(--copper-light)}
.need-k{color:var(--chalk)}
.need-d{color:#C9CDCB}
.need-go{color:var(--copper-light)}
.need-item:hover .need-go{color:#E0A97F}
.safety-box{background:var(--slate-2);border-color:rgba(255,255,255,.14);color:#D5D8D6}
.safety-box strong{color:var(--chalk)}
/* study already dark; keep on slate */
/* journey */
.journey-list::before{background:rgba(255,255,255,.18)}
.journey-list li{color:#C9CDCB}
.journey-list li::before{color:var(--copper-light)}
.journey-list .stop{background:var(--slate-deep);border-color:var(--copper-light)}
.journey-list li:last-child .stop{background:var(--copper-light)}
.journey-list b{color:var(--chalk)}
.journey-foot{color:var(--storm-faint)}
/* assistant */
.assist{background:var(--slate);border-top-color:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.08)}
.disclosure{background:var(--slate-2);border-color:rgba(255,255,255,.14);color:#D5D8D6}
.disclosure b{color:var(--chalk)}
.assist-rules{color:#C9CDCB}
.assist-rules li::before{border-color:var(--copper-light)}
.assist-static{color:var(--storm-faint)}
.assist-static a{color:var(--chalk)}
.console{background:var(--slate-2);border-color:rgba(255,255,255,.14);color:var(--chalk)}
.console-top{background:#2E353A;border-bottom-color:rgba(255,255,255,.1)}
.console-top .who{color:var(--chalk)}
.console-top .who small{color:var(--storm-faint)}
.ctl{background:transparent;border-color:rgba(239,237,232,.35);color:var(--chalk)}
.ctl[aria-pressed="true"]{background:var(--chalk);color:var(--slate);border-color:var(--chalk)}
.intents{border-bottom-color:rgba(255,255,255,.1)}
.intents .btn[aria-pressed="true"]{background:var(--copper-light);color:var(--slate);border-color:var(--copper-light)}
.msg.a{background:#2E353A;border-color:rgba(255,255,255,.1);color:var(--chalk)}
.msg.a .tag{color:var(--storm-faint)}
.msg.u{background:var(--chalk);color:var(--slate)}
.msg.s{background:#23343B;border-color:#3E5661;color:#DCE6EA}
.msg.s strong{color:#fff}
.msg.s a{color:#B7D3DD}
.msg.done{background:#4A3324;border-color:#7A5237;color:var(--chalk)}
.msg-summary dt{color:var(--storm-faint)}
.opt{background:transparent;border-color:rgba(239,237,232,.45);color:var(--chalk)}
.opt:hover{background:rgba(239,237,232,.08)}
.opt.is-chosen{background:var(--chalk);color:var(--slate);border-color:var(--chalk)}
.opt-file{color:#D5D8D6}
.console-foot{border-top-color:rgba(255,255,255,.1);color:var(--storm-faint)}
/* practical */
.practical{background:var(--slate-deep)}
.practical .items{border-top-color:rgba(239,237,232,.35)}
.practical details{border-bottom-color:rgba(255,255,255,.12)}
.practical summary{color:var(--chalk)}
.practical summary .pm{border-color:var(--chalk)}
.practical summary .pm::before,.practical summary .pm::after{background:var(--chalk)}
.practical .body{color:#C9CDCB}
.practical .body a{color:var(--chalk)}
/* final + footer */
.final{background:var(--slate)}
.site-footer{background:var(--slate-deep)}
.study{background:var(--slate-deep)}