/* Owner: package S1 (shell, publishing and images). Tokens, reset, type, buttons, links, notes and the toast. */
@font-face{font-family:Manrope;src:url('assets/fonts/a30ddcd349703aff7464.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fonts/f7bb788a9bd23361b409.woff2') format('woff2');font-style:italic;font-weight:500;font-display:swap}
:root{--ink:#14372f;--paper:#f1eee5;--muted:#5b6b61;--line:#c6cbbd;--lime:#d8e6a7;--dark:#0c2823;--gutter:clamp(22px,4.7vw,82px);--text-min:12px;--label-min:13px;--spec-min:14px;--target-min:24px;--touch-min:44px;color-scheme:light;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-size:15px;line-height:1.65}
h1{margin:0;font-weight:400;letter-spacing:-.055em;line-height:1.03;font-size:clamp(60px,7.5vw,120px)}
h2{margin:0;font-weight:400;letter-spacing:-.055em;line-height:1.03;font-size:clamp(38px,4.8vw,74px)}
h3{margin:0;font-weight:400;letter-spacing:-.055em;line-height:1.03;font-size:clamp(25px,2.5vw,38px)}
h4,figure{margin:0}
em{font-family:Fraunces,Georgia,serif;font-weight:500}
p{margin:0;max-width:66ch}
p+p{margin-top:18px}
a{color:inherit;text-decoration:none;touch-action:manipulation;outline-offset:6px}
img{width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation;outline-offset:6px}
button:disabled{cursor:wait}
input{font:inherit;touch-action:manipulation;outline-offset:6px}
select{font:inherit;outline-offset:6px}
textarea{font:inherit}
summary{touch-action:manipulation;outline-offset:6px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
::selection{background:var(--lime);color:var(--dark)}
[hidden]{display:none!important}
button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.container{width:100%;max-width:1700px;margin:auto;padding-inline:var(--gutter)}
.section{padding-block:110px}
.eyebrow{font-size:var(--text-min);font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1.6;display:block}
.eyebrow+h1,.eyebrow+h2,.eyebrow+h3{margin-top:25px}
.fineprint,.control-note{font-size:var(--text-min);line-height:1.7;color:var(--muted)}
.button{border-radius:100px;display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:15px 25px;font-size:12px;font-weight:600;background:var(--ink);color:var(--paper);border:1px solid var(--ink);transition:background .2s,transform .2s;text-align:center;max-width:100%}
.button:hover{background:#315849;transform:translateY(-2px)}
.button-light{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.button-light:hover{background:#ecf6c7}
.button-light:focus-visible{outline-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}
.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.button.secondary:hover{background:#e2e6d6}
.text-link{display:inline-flex;align-items:center;gap:25px;border-bottom:1px solid currentColor;padding-bottom:6px;font-size:12px;min-height:var(--target-min)}
@media(hover:none) and (pointer:coarse){.text-link{min-height:var(--touch-min)}}
.actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
/* studio/build/units.mjs: <div class="units-toggle" role="group"><button data-units-choice="in|cm" aria-pressed>.
   The pressed fill comes from the button[aria-pressed=true] rule above; this is the pill frame and target size. */
.units-toggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px}
.units-toggle button{min-height:var(--target-min);min-width:var(--target-min);padding:2px 12px;border-radius:100px;font-size:var(--text-min);font-weight:600}
@media(hover:none) and (pointer:coarse){.units-toggle button{min-height:var(--touch-min);min-width:var(--touch-min)}}
figcaption{display:flex;justify-content:space-between;gap:20px;font-size:var(--text-min);margin-top:13px;color:var(--muted)}
.toast{position:fixed;z-index:200;bottom:25px;left:50%;transform:translate(-50%,25px);background:var(--ink);color:var(--paper);border:1px solid #547762;padding:15px 22px;font-size:var(--text-min);max-width:min(600px,90vw);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 6px 25px #001a1520}
.toast.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{text-decoration:underline;color:var(--lime);margin-left:10px;display:inline-flex;align-items:center;min-height:var(--target-min);padding:2px}
@media(hover:none) and (pointer:coarse){.toast button{min-height:var(--touch-min);min-width:var(--touch-min)}}
.modal-open{overflow:hidden}
@media(max-width:800px){:root{--gutter:22px}
.section{padding-block:70px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.note{font-size:var(--text-min);line-height:1.7;color:var(--muted);margin-top:28px;max-width:90ch}
/* The host's switch (data-motion=reduce) stops what the device setting stops. */
:root[data-motion=reduce]{scroll-behavior:auto}
:root[data-motion=reduce] *,:root[data-motion=reduce] *:before,:root[data-motion=reduce] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* Owner: package S1 (shell, publishing and images). Skip link, header, phone menu, footer and the privacy page. */
.skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-180%);background:var(--lime);padding:12px}
.skip-link:focus{transform:none}
.site-header{height:84px;position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;padding-inline:var(--gutter);justify-content:space-between;gap:20px}
.brand{display:block;white-space:nowrap;font-size:21px;letter-spacing:-.06em;line-height:.9;font-weight:700}
.brand>span{display:block;font-size:8px;letter-spacing:.36em;margin-top:8px;text-align:center;font-weight:500}
.site-header nav{display:flex;align-items:center;gap:24px}
.site-header nav a{font-size:var(--text-min);white-space:nowrap;display:inline-flex;align-items:center;min-height:var(--target-min)}
.site-header nav a[aria-current=page]:not(.button){text-decoration:underline;text-underline-offset:8px}
.site-header nav .button{min-height:40px;padding:10px 19px}
.menu-toggle,[data-menu-toggle]{display:none}
.menu-icon{position:relative;width:12px;height:12px;flex-shrink:0}
.menu-icon i{position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor;transition:transform .2s}
.menu-icon i:last-child{transform:rotate(90deg)}
[data-menu-toggle][aria-expanded=true] .menu-icon i:first-child{transform:rotate(45deg)}
[data-menu-toggle][aria-expanded=true] .menu-icon i:last-child{transform:rotate(-45deg)}
.header-cta{font-size:var(--text-min);min-height:42px;padding:15px 19px}
.site-footer{background:var(--dark);color:var(--paper);padding:65px var(--gutter) 20px}
.footer-main{display:grid;grid-template-columns:1fr 1.1fr .7fr;gap:50px;padding:0}
.footer-main>.footer-links{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:20px}
.footer-links .text-link{border:0;padding:0;align-self:start;font-size:var(--text-min);display:inline-flex;align-items:center;min-height:var(--target-min)}
.footer-brand{font-size:42px;display:inline-block}
.footer-main>div>p{font-size:var(--text-min);margin-top:24px}
.footer-invitation{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:28px;line-height:1.3}
.footer-bottom{border-top:1px solid #456157;padding-top:20px;display:flex;justify-content:space-between;font-size:var(--text-min);gap:20px}
.footer-bottom>div{display:flex;gap:25px}
.footer-bottom.container{margin-top:40px;padding-inline:0}
.footer-bottom p{font-size:var(--text-min);max-width:88ch}
@media(hover:none) and (pointer:coarse){
.site-header nav a{min-height:var(--touch-min);padding-inline:10px}
.footer-links .text-link{min-height:var(--touch-min)}
.header-cta{min-height:var(--touch-min)}
[data-menu-toggle]{min-height:var(--touch-min)}
/* The wordmark stacks two block lines (STILLWATER, the aria-hidden ATELIER line below it), so it cannot become
   an inline-flex row without breaking that stack. Padding grows the invisible hit area instead: the header brand
   (~32px tall) reaches exactly 44, the taller footer brand clears it with room to spare. min-height is the floor,
   since the brand's own font size (and so its unpadded height) differs by breakpoint (fix 14: 43px measured at
   the 1024 touch tablet, one short of 44, at the font-size the max-width:1100px rule sets there). */
.brand{padding-block:6px;min-height:var(--touch-min)}
}
@media(max-width:1100px){.site-header nav{gap:16px}
.brand{font-size:18px}
.header-cta{padding:13px 14px}
.footer-main{gap:30px}
.footer-invitation{font-size:24px}
}
@media(max-width:800px){.site-header{height:70px;gap:10px}
.brand{font-size:19px}
.site-header nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:25px;box-shadow:0 15px 25px #041b1720;align-items:stretch;gap:0;order:3}
.site-header nav.is-open{display:flex;flex-direction:column}
.site-header nav a{font-size:14px;padding:14px;min-height:var(--touch-min)}
.site-header nav .button{margin-top:10px}
.menu-toggle,[data-menu-toggle]{display:inline-flex;align-items:center;gap:10px;order:2;border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:var(--text-min);min-height:var(--touch-min)}
.site-header>.header-cta{margin-left:auto;order:1;font-size:var(--text-min);min-height:var(--touch-min);padding:12px 16px}
.footer-main{grid-template-columns:1fr 1fr;gap:35px}
.footer-invitation{grid-column:1/-1;font-size:24px}
.footer-main>.footer-links{grid-template-columns:1fr}
.footer-brand{font-size:30px}
.footer-bottom{display:block;line-height:2}
.footer-bottom>div{margin-top:14px}
.footer-bottom.container>span{display:block;margin-top:20px}
}
/* Fix 7: below 450px the header button shows "Design" alone (full word, no ellipsis) and carries the complete
   name in aria-label, set on the link in lib.mjs. .cta-rest is the "your aquarium" remainder, visible again
   above 450px where the full label already fits. */
@media(max-width:450px){.cta-rest{display:none}}
.prose{max-width:960px;margin-inline:auto}
.prose h2{font-size:32px;margin-block:42px 18px}
.prose p{max-width:70ch}
/* Owner: package S2 (content pages). Home hero, editorial intro, concept cards, ecosystems, process list, closing band. */
.home-hero{height:calc(100svh - 84px);min-height:650px;max-height:1200px;position:relative;isolation:isolate;color:white;overflow:hidden;background:#375045}
.home-hero>[data-photo-approach]{position:absolute;inset:0;z-index:-2}
.home-hero>[data-photo-approach] img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(calc(1 + var(--approach,0)*.12));transform-origin:70% 40%;will-change:transform}
.home-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,20,14,.76),transparent 75%),linear-gradient(90deg,rgba(3,20,14,.35),transparent 55%)}
.hero-content h1{font-size:clamp(70px,7.7vw,128px);max-width:9.2em;line-height:.95;letter-spacing:-.07em}
.hero-content .text-link{color:white}
.hero-content .button{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.hero-caption{position:absolute;top:25px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.hero-scroll{position:absolute;bottom:15px;right:var(--gutter);font-size:12px}
/* The whole card is one link (item 28): .card-title carries a stretched ::after, so the article needs position. */
.concept-card{position:relative}
.concept-card img{aspect-ratio:4/4.8;object-fit:cover;transition:transform .6s}
.concept-card .card-image{overflow:hidden;display:block}
.concept-card:hover .card-image img{transform:scale(1.035)}
.concept-card h3{font-size:30px;margin:22px 0 12px}
.concept-card p{font-size:13px;color:var(--muted)}
.concept-card .eyebrow{margin-top:18px}
/* Prices and specifications read at 14 px or more (accessibility floor): the base example price sits here. */
.concept-card .card-meta,.concept-card .specs{display:flex;gap:15px;justify-content:space-between;font-size:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.concept-card .text-link{margin-top:20px}
.concept-card .price{font-size:16px;display:block;margin:15px 0}
.ecosystem-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:1100px){.hero-content h1{font-size:78px}
}
@media(max-width:800px){.home-hero{height:calc(100svh - 70px);min-height:720px}
.home-hero>[data-photo-approach] img{object-position:63% center}
.hero-content h1{font-size:clamp(60px,10vw,88px);max-width:10ch;margin:20px 0}
}
@media(max-width:450px){.home-hero{min-height:720px}
.hero-content h1{font-size:64px}
}
.hero-content.container{width:auto;max-width:none;padding:0}
.hero-content{position:absolute;inset:auto var(--gutter) 62px;display:block}
.hero-content h1{max-width:10em}
.hero-content em{font-family:inherit;font-style:normal;font-weight:400}
.hero-content p:not(.eyebrow){font-size:14px;max-width:34ch}
@media(min-width:1700px){.hero-content{bottom:90px}
}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:26px}
.hero-bottom>.actions{gap:15px;flex-shrink:0}
/* Explore the aquarium: a text-link that opens the 3D explorer, not a page. It carries no arrow (item 27) and
   needs its own touch target, since base.css's .text-link is sized for reading, not for a standalone control. */
.hero-explore{min-height:24px}
@media(hover:none) and (pointer:coarse){.hero-explore{min-height:44px}
}
.hero-content .button-outline{border-color:#ced8c3;background:transparent;color:white}
.hero-content .button-outline:hover{background:#f2f5e515}
/* Standalone text-links (items 9, 10): base.css's .text-link has no minimum touch height, so these containers
   grow it on touch without changing base.css. */
@media(hover:none) and (pointer:coarse){.intro-aside .text-link,.ecosystem-options .text-link,.process-preview .text-link{min-height:44px}
}
.editorial-intro{display:grid;grid-template-columns:1.8fr 1fr;gap:50px;align-items:start;padding-block:110px}
.editorial-intro>.section-head{display:block;max-width:720px;margin:0}
.editorial-intro>.section-head .eyebrow{margin-bottom:25px}
.editorial-intro>.section-head>p:last-child{font-size:14px;max-width:52ch;margin-top:30px}
.intro-aside{align-self:end;max-width:250px;justify-self:end;font-size:13px}
.intro-aside .text-link{margin-top:25px}
.editorial-intro>.concept-grid,.editorial-intro>.note{grid-column:1/-1}
.concept-grid{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:25px;align-items:start}
.concept-card:nth-child(2){margin-top:110px}
.concept-card:nth-child(3){margin-top:45px}
.ecosystem-split.container{grid-template-columns:.85fr 1.4fr;gap:70px;background:var(--paper);align-items:start}
.ecosystem-split h2{font-size:clamp(38px,4.3vw,65px);margin:20px 0 30px;max-width:13ch}
.ecosystem-split>div>p:not(.eyebrow){font-size:14px;max-width:35ch}
.ecosystem-options{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.ecosystem-options article:nth-child(2){margin-top:85px}
.ecosystem-options img{height:350px;object-fit:cover}
.ecosystem-options h3{font-size:28px;margin:25px 0 15px}
.ecosystem-options p{font-size:12px}
.ecosystem-options .text-link{margin-top:22px}
.process-preview{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.process-preview .text-link{margin-top:28px}
.process-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:32px}
.process-list li{display:grid;grid-template-columns:45px 1fr;gap:20px;border-top:1px solid var(--line);padding-top:22px}
.process-list li>span{font-size:13px}
.process-list h3{font-size:27px;margin-bottom:15px}
.process-list p{font-size:13px}
.cta-section{background:var(--lime);text-align:center;position:relative;overflow:hidden}
.cta-section h2{font-size:clamp(48px,6.6vw,100px);max-width:12ch;margin:25px auto}
.cta-section p:not(.eyebrow){margin-inline:auto;max-width:46ch;font-size:14px}
.cta-section .actions{justify-content:center;margin-top:30px}
@media(max-width:1100px){.hero-bottom{align-items:start;flex-direction:column}
.hero-content h1{font-size:84px}
.editorial-intro{grid-template-columns:.4fr 1fr}
.ecosystem-split.container{gap:35px}
.ecosystem-options img{height:280px}
.process-preview{gap:50px}
}
@media(max-width:800px){.hero-content h1{font-size:clamp(54px,9vw,76px);max-width:11ch}
.hero-content{display:block;bottom:45px}
.hero-content p:not(.eyebrow){font-size:13px;max-width:38ch}
.hero-content .button{font-size:12px;padding:12px 18px;min-height:48px}
.hero-bottom{gap:22px}
.hero-bottom>.actions{flex-wrap:wrap}
.editorial-intro{display:block;padding-block:75px;gap:25px}
.editorial-intro>.section-head h2{font-size:45px;max-width:15ch}
.intro-aside{max-width:none;margin:35px 0}
.editorial-intro>.concept-grid{margin-top:45px}
.concept-grid{grid-template-columns:1fr;gap:45px}
.concept-card:nth-child(n){margin-top:0}
.concept-card img{aspect-ratio:1.35}
.concept-card h3{font-size:33px}
.ecosystem-split.container{grid-template-columns:1fr;gap:40px}
.ecosystem-split h2{max-width:16ch}
.ecosystem-split{grid-template-columns:1fr}
.ecosystem-options{gap:20px}
.ecosystem-options img{height:300px}
.ecosystem-options h3{font-size:25px}
.ecosystem-options article:nth-child(2){margin-top:40px}
.process-preview{grid-template-columns:1fr;gap:40px}
.cta-section h2{font-size:55px}
}
@media(max-width:450px){.hero-content h1{font-size:58px}
.hero-bottom>.actions{align-items:start;flex-direction:column;gap:10px}
.hero-content .button{min-height:44px;padding:11px 18px}
.home-hero{min-height:700px}
.hero-content{bottom:40px}
.ecosystem-options{grid-template-columns:1fr}
.ecosystem-options article:nth-child(2){margin-top:15px}
.ecosystem-options img{height:340px}
}
/* Owner: package S2 (content pages). Page heads, section heads, splits, figures, lists, cards, pricing, care, projects, before and after. */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:50px}
.section-head>div:last-child{max-width:390px}
.section-head h2{max-width:14ch}
.section-head p:not(.eyebrow){font-size:14px;color:var(--muted)}
.section-head .text-link{margin-top:20px}
.page-head{padding-block:85px 65px;display:grid;grid-template-columns:1.45fr .65fr;gap:45px;align-items:end;border-bottom:1px solid var(--line)}
.page-head h1{max-width:12ch}
.page-head>.eyebrow{grid-column:1/-1;margin-bottom:-20px}
.page-head p:not(.eyebrow){font-size:15px;max-width:42ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split>img,.split>figure>img{aspect-ratio:5/6;object-fit:cover}
.split h2{margin-bottom:25px}
.split .button,.split .text-link{margin-top:25px}
.full-image img{max-height:760px;object-fit:cover}
/* C2 (fix round 15.5): on the concept and ecosystem pages the opening photograph is the first screen's main image,
   so its height follows the viewport and leaves room for the h1's first line, with 16px to spare, at 1440x900 and
   390x844. About, Care and How it works use the same .full-image figure and keep the flat 760px cap above. */
body[data-page="aquarium-detail"] .full-image img,body[data-page="ecosystem"] .full-image img{max-height:clamp(260px,calc(100svh - 420px),760px)}
.feature-list{padding:0;list-style:none;margin-top:30px}
.feature-list li{border-top:1px solid var(--line);padding:17px 0}
/* Item 27: no arrow on a bullet that isn't a link. */
.project-card{min-width:0;position:relative}
.project-card img{aspect-ratio:1.3;object-fit:cover}
.project-card h3{margin-top:24px}
.project-card p{font-size:13px;margin-block:15px}
.project-card .eyebrow{margin-top:20px}
.project-card:nth-child(2){margin-top:100px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.team-grid img{aspect-ratio:4/5;object-fit:cover}
.team-grid h3{margin:25px 0 10px}
.team-grid p{font-size:14px}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Item 14: the default split favors the aquarium (70%). The compare-labels chip is styled below, near .price. */
[data-before-after]{position:relative;overflow:hidden;aspect-ratio:1672/941;--split:70%}
[data-before-after]>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-before-after]>img:nth-child(2){clip-path:inset(0 calc(100% - var(--split)) 0 0)}
[data-before-after]>input{-webkit-appearance:none;appearance:none;position:absolute;bottom:20px;left:10%;width:80%;height:24px;background:transparent;accent-color:var(--lime);z-index:5;cursor:ew-resize}
[data-before-after]>input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);cursor:ew-resize;filter:drop-shadow(0 1px 5px #0006)}
[data-before-after]>input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);cursor:ew-resize;filter:drop-shadow(0 1px 5px #0006)}
[data-before-after]>input::-webkit-slider-runnable-track{height:24px;background:transparent}
[data-before-after]>input::-moz-range-track{height:24px;background:transparent}
@media(hover:none) and (pointer:coarse){[data-before-after]>input{height:44px}
[data-before-after]>input::-webkit-slider-thumb{width:44px;height:44px}
[data-before-after]>input::-moz-range-thumb{width:44px;height:44px}
}
/* Solid chip (item 14): readable at 4.5:1 on either photograph, unlike text over the image. */
[data-before-after] .compare-labels{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between}
[data-before-after] .compare-labels span{background:var(--ink);color:var(--paper);font-size:12px;padding:6px 14px;border-radius:100px;display:inline-flex;align-items:center}
.spec-list{font-size:12px;margin:0}
.spec-list div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}
.spec-list dd{margin:0;text-align:right}
@media(max-width:1100px){.section-head{gap:35px}
.care-grid{gap:15px}
}
@media(max-width:800px){.section-head{display:block;margin-bottom:35px}
.section-head h2{font-size:43px;max-width:16ch}
.page-head{padding-block:50px 40px;grid-template-columns:1fr;gap:25px}
.page-head h1{font-size:clamp(48px,9vw,70px);max-width:13ch}
.page-head>.eyebrow{grid-column:auto;margin-bottom:0}
.page-head p:not(.eyebrow){font-size:14px}
.split{grid-template-columns:1fr;gap:35px}
.split>img,.split>figure>img{aspect-ratio:1.3}
.project-card:nth-child(2){margin-top:0}
.team-grid{gap:25px}
.team-grid h3{font-size:26px}
.team-grid p{font-size:12px}
.care-grid{grid-template-columns:1fr}
}
@media(max-width:450px){.team-grid{grid-template-columns:1fr}
}
.section-head{display:grid;grid-template-columns:1.35fr .65fr;gap:20px 60px}
.section-head>.eyebrow{grid-column:1/-1}
.section-head>p:not(.eyebrow){align-self:end}
.section-head>h2{max-width:16ch}
.image-figure>img{object-fit:cover}
.project-overview{display:grid;grid-template-columns:.6fr 1.4fr;gap:100px}
.project-narrative h2{margin:25px 0}
.project-narrative h3{margin:40px 0 20px;font-size:30px}
.project-narrative p{font-size:14px}
.project-lessons ul{list-style:none;padding:0}
.project-lessons li{padding:20px 0;border-top:1px solid var(--line);font-size:14px}
.concept-details{display:grid;grid-template-columns:1.2fr .8fr;gap:80px}
.concept-details h2{margin-bottom:25px}
.concept-details>div>p{font-size:14px}
.concept-details .units-toggle{margin-top:24px}
.finish-list{display:flex;gap:25px;margin-top:35px}
.price-factors{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.notice-panel{background:#e0e7d1;padding:35px;margin-block:40px}
.notice-panel h2,.notice-panel h3{font-size:30px;margin-bottom:20px}
.notice-panel p{font-size:13px}
.care-grid>article{padding:30px;border:1px solid var(--line)}
.care-grid h3{font-size:30px;margin:20px 0}
.care-grid p{font-size:13px}
.care-grid strong{font-size:27px}
/* One link per card (item 28): .card-title carries a stretched ::after over its .concept-card/.project-card
   ancestor (position:relative is on .concept-card in home.css and on .project-card above). */
.card-title::after{content:'';position:absolute;inset:0}
/* The pricing cards now carry a concept photograph (item 22). */
.units-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
/* Item 22: a compact head so the three price cards start in the first screen. Scoped to this one page (the
   generated body carries data-page), so every other pageHead() stays at its normal editorial scale. */
body[data-page="pricing"] .page-head{padding-block:50px 36px}
body[data-page="pricing"] .page-head h1{font-size:clamp(32px,3.4vw,46px);max-width:24ch;line-height:1.15}
body[data-page="pricing"] main>section:first-of-type{padding-top:40px}
/* Item 22: a compact head so the cards (aquariums) or rail (the journal) reach the first screen. */
body[data-page="aquariums"] .page-head,body[data-page="projects"] .page-head{padding-block:50px 36px}
body[data-page="aquariums"] .page-head h1,body[data-page="projects"] .page-head h1{font-size:clamp(32px,3.4vw,46px);max-width:24ch;line-height:1.15}
body[data-page="aquariums"] main>section:first-of-type{padding-top:50px}
.pricing-grid .card-image{overflow:hidden;margin-bottom:20px}
.pricing-grid .card-image img{aspect-ratio:4/3;object-fit:cover}
/* Standalone text-links (items 9, 10): base.css's .text-link has no minimum touch height, so these containers
   grow it on touch without changing base.css. */
@media(hover:none) and (pointer:coarse){.split .text-link,.care-grid>article .text-link{min-height:44px}
}
@media(max-width:1100px){.concept-details{gap:40px}
.project-overview{gap:40px}
}
@media(max-width:800px){.section-head{display:block}
.section-head>h2{margin-top:20px}
.section-head>p:not(.eyebrow){margin-top:20px}
.project-overview{grid-template-columns:1fr;gap:40px}
.project-narrative h2{font-size:43px}
.concept-details{grid-template-columns:1fr;gap:35px}
.pricing-grid{grid-template-columns:1fr}
.price-factors{grid-template-columns:1fr;gap:25px}
.finish-list{flex-wrap:wrap}
}
.pricing-grid>article,.care-grid>article{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;align-items:start;gap:22px}
.pricing-grid>article h2,.care-grid>article h3{font-size:30px}
.pricing-grid>article p,.care-grid>article p{font-size:13px}
.pricing-grid>article .price,.care-grid>article .price{font-size:34px;line-height:1.2}
.price span{font-size:14px}
.pricing-grid>article .button,.care-grid>article .text-link{margin-top:auto}
.care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.finish-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.finish-list article{min-width:0}
.finish-list h3{font-size:26px;margin:18px 0 12px}
.finish-list p{font-size:13px}
.finish-list .finish-swatch{display:block;width:64px;height:64px;border-radius:50%;background:var(--swatch);border:1px solid var(--line)}
.process-full h2{font-size:clamp(32px,4vw,54px)}
@media(max-width:800px){.finish-list{grid-template-columns:1fr;gap:30px}
.care-grid{grid-template-columns:1fr}
.pricing-grid>article,.care-grid>article{padding:26px}
}
/* What to expect (item 34): every block carries a small sample tag. */
.expect-section .section-head{margin-bottom:40px}
.expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.expect-block{background:var(--paper);padding:30px}
.expect-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.expect-block h3{font-size:22px;margin-bottom:16px}
.expect-block p{font-size:13px}
.expect-block .note{margin-top:14px}
.expect-team{display:flex;gap:16px}
.expect-team figure{flex:1;min-width:0}
.expect-team img{aspect-ratio:3/4;object-fit:cover}
.expect-team figcaption{font-size:13px;margin-top:10px}
.expect-team figcaption span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
@media(max-width:1100px){.expect-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){.expect-grid{grid-template-columns:1fr}
}
/* Owner: package S4 (stories and explorer). Scroll stories, 3D stage sections, stage labels, the day story and the project rail. */
.scroll-story{position:relative;height:220vh;background:#e7e7db}
.story-sticky{position:sticky;top:84px;min-height:0;height:calc(100svh - 84px);display:flex;flex-direction:column;overflow:hidden}
.story-caption{position:relative;z-index:3;display:grid;grid-template-columns:1.35fr .65fr;padding:26px var(--gutter) 0;gap:22px;pointer-events:none;margin-bottom:20px}
.story-caption h2{font-size:clamp(32px,3.7vw,54px);max-width:20ch}
.story-caption .eyebrow{grid-column:1/-1;margin-bottom:-9px}
.story-caption p:not(.eyebrow){font-size:13px;max-width:38ch;align-self:end}
.story-caption a,.story-caption button{pointer-events:auto}
.aquarium-stage{position:relative;flex:1;min-height:280px;overflow:hidden}
.aquarium-stage>img{position:absolute;inset:0;height:100%;object-fit:cover}
.stage-labels{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:10px;z-index:4;font-size:var(--label-min,13px)}
.stage-labels>span{padding:9px 14px;background:#f7f5e8e6;border:1px solid #c2c9b9;border-radius:40px}
.stage-labels>span.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.story-progress{position:absolute;bottom:0;left:0;height:3px;width:calc(var(--progress,0)*100%);background:var(--ink);z-index:4}
.stage-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:72px;z-index:4;margin:0;font-size:13px;background:#f7f5e8ea;padding:9px 16px;border-radius:2px}
.stage-caption:empty{display:none}
.scroll-story[data-scroll-story=day]{height:180vh;color:white;background:#1e3026}
.scroll-story[data-scroll-story=day] .story-caption{text-shadow:0 1px 20px #000;z-index:4;display:block}
.scroll-story[data-scroll-story=day] .story-caption h2{max-width:12ch}
.scroll-story[data-scroll-story=day] .story-caption p:not(.eyebrow){max-width:34ch;margin-top:14px}
.scroll-story[data-scroll-story=day] .story-sticky:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#071710d9 0%,#071710a6 32%,transparent 62%);z-index:2}
[data-daylight]{position:absolute;inset:0}
[data-daylight] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-daylight] img:nth-child(2){opacity:var(--evening,0)}
.project-rail,[data-project-rail]{height:220vh;position:relative;overflow:clip}
.rail-sticky{position:sticky;top:84px;height:calc(100svh - 84px);padding-block:35px;overflow:hidden}
.project-track{display:flex;gap:35px;width:max-content;padding-inline:var(--gutter);will-change:transform}
.project-track .project-card{width:min(55vw,740px);margin:0}
.project-track .project-card img{height:43vh;min-height:270px;aspect-ratio:auto}
.project-track .card-meta{display:flex;justify-content:space-between;font-size:12px;margin-top:18px}
.project-track .project-card h3{font-size:28px;margin-top:10px}
.project-track .project-card p{max-width:48ch}
.rail-controls{display:flex;gap:12px;margin:20px var(--gutter)}
.rail-controls button{border:1px solid var(--line);border-radius:50px;min-width:50px;height:44px}
.rail-controls button:hover{background:var(--lime)}
.rail-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}
.rail-heading .section-head{display:block;margin-bottom:0}
.rail-heading .section-head h2{font-size:clamp(35px,3.5vw,56px);margin-top:20px;max-width:22ch}
.rail-heading .rail-controls{margin:0}
.is-preview .scroll-story{height:auto}
.is-preview .story-sticky{position:relative;top:0;height:680px}
.is-preview [data-project-rail]{height:auto}
.daylight-section{padding:0}
.daylight-labels{position:absolute;bottom:20px;display:flex;justify-content:space-between;z-index:4;font-size:12px}
.daylight-labels span{background:#112d25aa;padding:8px 14px;border-radius:40px}
@media(max-width:1100px){.story-caption{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){.scroll-story{height:190vh}
.story-sticky{top:70px;height:calc(100svh - 70px);min-height:610px}
.story-caption{display:block;padding-top:22px;gap:15px}
.story-caption .eyebrow{margin-bottom:0}
.story-caption h2{font-size:34px;max-width:18ch}
.story-caption p:not(.eyebrow){font-size:12px;max-width:45ch;margin-top:15px}
.stage-labels{bottom:14px;gap:6px;flex-wrap:wrap}
.stage-labels>span{padding:6px 9px}
.scroll-story[data-scroll-story=day] .story-caption h2{font-size:44px}
.project-rail,[data-project-rail]{height:auto!important;padding-block:50px;overflow:hidden}
.rail-sticky{height:auto;position:relative;top:0;padding:0}
.rail-heading{align-items:end;gap:15px}
.rail-heading .section-head h2{font-size:35px}
.rail-heading .rail-controls{flex-shrink:0}
.rail-controls button{min-width:44px;width:44px;height:44px}
.project-track{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;transform:none!important;padding-bottom:20px}
.project-track .project-card{width:85%;flex-shrink:0;scroll-snap-align:center}
.project-track .project-card img{height:300px;min-height:0}
.project-track .card-meta{font-size:12px}
}
@media(max-width:450px){.stage-labels{max-width:340px}
.project-track .project-card{width:88%}
}
@media(max-height:520px){.scroll-story{height:auto}
.story-sticky{position:relative;top:auto;height:auto;min-height:0}
.aquarium-stage{height:420px;flex:none}
.stage-labels{bottom:16px}
.scroll-story[data-scroll-story=day] .story-sticky{min-height:540px}
.rail-sticky{height:auto;position:relative;top:auto}
.project-rail,[data-project-rail]{height:auto}
.project-track{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}
.project-track .project-card{flex-shrink:0;scroll-snap-align:start}
}
:root[data-motion=reduce] .scroll-story{height:auto}
:root[data-motion=reduce] .story-sticky{position:relative;top:0;height:auto;min-height:650px}
:root[data-motion=reduce] .aquarium-stage{min-height:450px}
:root[data-motion=reduce] .project-rail,:root[data-motion=reduce] [data-project-rail]{height:auto}
:root[data-motion=reduce] .rail-sticky{position:relative;top:0;height:auto}
:root[data-motion=reduce] .project-track{width:100%;overflow-x:auto;transform:none!important}
:root[data-motion=reduce] .project-track .project-card{flex-shrink:0}
:root[data-motion=reduce] [data-daylight]{position:static;display:grid;grid-template-columns:1fr 1fr;gap:2px;height:420px}
:root[data-motion=reduce] [data-daylight] img{position:static;width:100%;height:100%;opacity:1}
:root[data-motion=reduce] .daylight-labels{position:static;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:14px;bottom:auto}
:root[data-motion=reduce] .daylight-labels span{text-align:center}
/* Fix 3 (verifier-tested): the caption and the pills stack in their shared .stage-index wrapper, so wrapped pills on a
   phone push the caption up instead of printing over it. */
.stage-index{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;z-index:4;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.stage-index>.stage-caption,.stage-index>.stage-labels{position:static}
@media(max-width:800px){.stage-index{bottom:14px;gap:8px}}
@media(max-height:520px){.stage-index{bottom:16px}}
/* Owner: package S4 (stories and explorer). The 3D explorer dialog. */
.inspector label{display:block;font-size:12px;margin:22px 0 8px}
.inspector select{display:block;width:100%;margin-top:8px;border:1px solid var(--line);padding:12px;color:var(--ink);background:var(--paper);border-radius:0;font-size:13px}
.inspector input[type=range]{display:block;width:100%;height:24px;accent-color:var(--ink);margin:15px 0;cursor:pointer}
.inspector{border:0;width:96vw;max-width:1600px;height:93svh;max-height:100svh;padding:35px;background:var(--paper);color:var(--ink);overflow:auto}
.inspector::backdrop{background:#041c18dd;backdrop-filter:blur(8px)}
.inspector-header{display:flex;justify-content:space-between;align-items:start;gap:30px}
.inspector-header h2{font-size:35px;margin-top:12px}
.close-inspector{border:1px solid var(--ink);border-radius:40px;padding:12px 20px;font-size:12px}
.inspector-layout{display:grid;grid-template-columns:1fr 260px;gap:30px;margin-top:20px}
.inspector-stage{position:relative;min-height:480px;height:65svh;overflow:hidden;background:#e5e6d9;touch-action:none}
.inspector-layout aside>p{font-size:12px}
.inspector-layout .button{width:100%;margin-top:15px}
.inspector-layout .fineprint{margin-top:20px;font-size:12px}
/* Without WebGL (item 25): a smaller dialog, the still and its status line only (from aquarium-scene.js), no
   rotate/zoom instructions, no view or cabinet controls that mean nothing without a live model. Sized down only
   above the phone breakpoint below, which already gives .inspector its own (higher-specificity-safe) phone size. */
.inspector.is-still .inspector-stage{touch-action:auto}
@media(min-width:801px){.inspector.is-still{width:auto;max-width:820px;height:auto;max-height:85svh}
.inspector.is-still .inspector-stage{height:55svh;min-height:340px}
}
@media(max-width:1100px){.inspector-layout{grid-template-columns:1fr 235px}
.inspector-stage{height:58svh}
}
@media(max-width:800px){.inspector{width:100vw;height:100svh;max-height:100svh;padding:20px;margin:0}
.inspector-layout{grid-template-columns:1fr;gap:20px}
.inspector-stage{height:44svh;min-height:330px}
.inspector-header h2{font-size:28px}
.inspector-header .eyebrow{font-size:var(--text-min,12px)}
.close-inspector{padding:9px 15px;white-space:nowrap}
.inspector-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inspector-layout aside>p{grid-column:1/-1}
.inspector-layout label{margin:5px 0}
.inspector-layout .button{margin:0}
}
@media(max-width:450px){.inspector-layout aside{grid-template-columns:1fr}
.inspector-stage{height:340px}
}
@media(hover:none) and (pointer:coarse){.inspector select,.close-inspector{min-height:var(--touch-min,44px);display:inline-flex;align-items:center}
.inspector input[type=range]{height:var(--touch-min,44px)}
}
/* Owner: package S3 (studio and saved designs). Design Studio, estimate, saved designs, comparison, consultation, share panel. */
/* Local token: the site header's own height (shell.css .site-header), duplicated here rather than added to base.css's
   :root, since no --header-height token exists yet. 84px desktop, 70px under shell.css's own 800px breakpoint. */
:root{--studio-header-h:84px}
@media(max-width:800px){:root{--studio-header-h:70px}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Item 6: reserve roughly the script-filled height so nothing below these three sections shifts once js/studio.js,
   js/saved.js and js/consultation.js replace the empty div. Measured against perf.mjs's CLS score (0 on a fresh
   profile) and, for saved-project, against two seeded designs too (a returning visitor's common case), then sized
   with a small margin rather than to the exact pixel. */
#design-studio{padding:0 var(--gutter) 70px;min-height:1500px}
#saved-project{min-height:1000px}
/* Fix 9: 800px (1100px on phones) reserved well past its own rendered content (753px at 1440, 1043px at 390 wide,
   measured with js/consultation.js's own markup, with and without a studio link's query string, since the two
   Concept, Ecosystem and Finish strings that vary by config never change how many lines this panel wraps to). The
   leftover slack showed as an oversized band beneath it. 760px and 1050px keep the same small margin as the two
   reservations above instead of the exact pixel. */
#consultation-preview{min-height:760px}
@media(max-width:800px){#design-studio{min-height:1800px}#saved-project{min-height:1600px}#consultation-preview{min-height:1050px}}
/* Item 22/7: a compact head, eyebrow and h1 only, so the studio tool itself starts in the first screen. */
.studio-head{padding-block:30px 22px;display:block;border-bottom:1px solid var(--line)}
.studio-head .eyebrow{margin-bottom:8px}
.studio-head h1{max-width:none;margin-top:0;font-size:clamp(30px,4vw,46px)}

.studio-steps{display:flex;border-bottom:1px solid var(--line);margin-bottom:30px;gap:10px}
.studio-steps button{display:flex;align-items:center;gap:18px;padding:22px;flex:1;font-size:13px;text-align:left;border-bottom:3px solid transparent}
.studio-steps button[aria-selected=true]{border-color:var(--ink);background:#e5e9da}
.studio-steps button>span{font-size:12px}

/* Item 7: above 800px the estimate (with Save) sits at the top of the control column, sticky, via grid-area
   placement, independent of DOM order. The workspace's actual DOM order (render, controls, bar) is chosen so that
   under the 800px block layout below, the bar naturally falls last, per the phone rule further down. */
.studio-workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-areas:"render bar" "render controls";gap:20px 35px;align-items:start}
.studio-render{grid-area:render;min-width:0}
.studio-controls{grid-area:controls;border:1px solid var(--line);padding:28px;background:#f6f5ec}
.estimate-bar{grid-area:bar;position:sticky;top:var(--studio-header-h);z-index:2;background:#f6f5ec;border:1px solid var(--line);padding:16px 24px 20px}
.studio-render{position:sticky;top:calc(var(--studio-header-h) + 20px)}
/* Found inside socialspirellc.com's own viewer at a laptop's short frame height (576px, V6): the sticky estimate bar
   (up to ~262px tall once its own content is in) can otherwise sit exactly where scrollIntoView({block:'center'})
   parks a button from the control column beneath it, such as Share this design, so the click meant for the control
   lands on the bar instead. Applies at every width, not only short ones, since nothing here depends on viewport width. */
.studio-controls :is(input,select,button,a){scroll-margin-top:calc(var(--studio-header-h) + 280px)}
.studio-scene{position:relative;height:520px;background:#e5e6d9;overflow:hidden}
.scene-tools{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:15px 0;flex-wrap:wrap}
.scene-tools button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-min,24px);padding:8px 12px;border-radius:30px;font-size:var(--label-min,13px);border:1px solid var(--line)}
/* Fix 14: at 1024 touch the row's own padding held these to 39px. min-height wins over the padding-driven box only
   on a coarse pointer, so the mouse-driven size elsewhere is untouched. */
@media(hover:none) and (pointer:coarse){.scene-tools button{min-height:var(--touch-min,44px)}}
.interaction-hint{font-size:var(--text-min,12px);color:var(--muted);padding-top:10px}
.studio-controls h2{font-size:35px;margin:20px 0 25px}
.studio-controls label{display:block;font-size:12px;margin:22px 0 8px}
.studio-controls select{display:block;width:100%;margin-top:8px;border:1px solid var(--line);padding:12px;color:var(--ink);background:var(--paper);border-radius:0;font-size:13px}
.studio-controls input[type=range]{display:block;width:100%;height:24px;accent-color:var(--ink);margin:15px 0;cursor:pointer}
@media(hover:none) and (pointer:coarse){.studio-controls input[type=range]{height:44px}}
.studio-controls output{float:right;font-weight:600}
.studio-controls .control-note,.studio-controls [data-ecosystem-note]{color:var(--muted)}
.studio-controls .button{width:100%;margin-top:24px}
.length-control{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.length-control label{flex:1;min-width:170px;margin-bottom:0}
.estimate-box{border-top:1px solid var(--line);margin-top:30px;padding-top:22px}
.estimate-bar .estimate-box{border-top:0;margin-top:0;padding-top:0}
.estimate-box strong{display:block;font-size:29px;font-weight:400;letter-spacing:-.05em;margin:8px 0}
.estimate-box p{font-size:12px}
.estimate-box small{display:block;font-size:var(--text-min,12px);color:var(--muted);margin-top:14px}
.estimate-bar>.button{width:100%;margin-top:16px}
.finish-chips{display:flex;gap:8px;margin:15px 0}
.finish-chips button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:var(--target-min,24px);padding:9px 4px;border:1px solid var(--line);font-size:var(--label-min,13px)}
@media(hover:none) and (pointer:coarse){.finish-chips button{min-height:var(--touch-min,44px)}}
.finish-chips i{width:35px;height:35px;border-radius:50%;display:block;background:var(--swatch);border:1px solid #7777}
.range-ends{display:flex;justify-content:space-between;font-size:var(--text-min,12px)}
.brief-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:20px}
.brief-actions .button{margin-top:10px}
.brief-actions .text-link{font-size:var(--text-min,12px);min-height:var(--target-min,24px);padding-block:8px}
@media(hover:none) and (pointer:coarse){.brief-actions .text-link{min-height:var(--touch-min,44px)}}
/* base.css's shared .text-link has no minimum height of its own: enforce the target floor on the plain text-links
   inside my own sections (the studio's own guidance link, the consultation actions, and the consultation notice). */
.studio-guidance .text-link,.consult-actions .text-link,.notice-panel .actions .text-link{display:inline-flex;align-items:center;min-height:var(--target-min,24px)}
@media(hover:none) and (pointer:coarse){.studio-guidance .text-link,.consult-actions .text-link,.notice-panel .actions .text-link{min-height:var(--touch-min,44px)}}
.studio-fineprint{display:grid;grid-template-columns:1fr 1fr;gap:40px;font-size:var(--text-min,12px);color:var(--muted);margin-top:35px}
.studio-fineprint p{margin:0}
/* Moved out of studio-render (item 7): nested inside it, equipment-info's revealed height joined the sticky panel's
   own height, which grew from the ~266px the plan calls for to over 600px and, combined with a status toast, could
   cover the whole phone viewport with nowhere left for a click to land (found by testing: journeys.mjs's Download
   and Save both landed on the wrong element). Here, inside studio-controls, it is ordinary scrolling content instead. */
.equipment-info{padding:20px;background:#e2e8d6;font-size:13px;margin-bottom:25px}
.equipment-info p{font-size:var(--text-min,12px);margin-top:15px}
.hotspot-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.hotspot-buttons button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-min,24px);border:1px solid var(--ink);padding:6px 12px;border-radius:30px;font-size:var(--label-min,13px)}
@media(hover:none) and (pointer:coarse){.hotspot-buttons button{min-height:var(--touch-min,44px)}}
.saved-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;gap:20px}
.saved-toolbar p{font-size:12px}
.saved-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.saved-card{border:1px solid var(--line)}
.saved-card>img{aspect-ratio:1.7;object-fit:cover}
.saved-card>div{padding:25px}
.saved-card h2{font-size:34px;margin:17px 0}
.saved-card p{font-size:12px}
.saved-card strong{display:block;font-size:25px;font-weight:400;margin:15px 0 8px}
.saved-card small{display:block;font-size:var(--text-min,12px);color:var(--muted)}
.saved-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:25px}
.saved-actions button,.saved-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-min,24px);font-size:var(--text-min,12px);padding:8px 10px;border:1px solid var(--line)}
@media(hover:none) and (pointer:coarse){.saved-actions button,.saved-actions a{min-height:var(--touch-min,44px)}}
.comparison{margin-top:80px}
.comparison h2{font-size:40px}
.comparison p{font-size:13px;margin-top:20px}
.table-scroll{overflow-x:auto;margin-top:30px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:18px;border-bottom:1px solid var(--line)}
thead{background:#e0e6d1}
.comparison caption{text-align:left;font-size:var(--text-min,12px);padding-block:20px}
/* Item 31: differing rows carry a tinted background AND a text tag, never colour alone. Each column header carries a
   small picture of that design. */
.compare-head{display:flex;align-items:center;gap:10px}
.compare-thumb{width:36px;height:36px;object-fit:cover;flex:none;border:1px solid var(--line)}
tr.differs{background:#eef2e1}
.differs-tag{display:inline-block;font-size:var(--text-min,12px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--lime);border-radius:20px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.empty-state{padding:60px 0;max-width:650px}
.empty-state p{margin:25px 0}
.consultation-summary{display:grid;grid-template-columns:1.2fr .8fr;gap:60px}
.consultation-summary>img{height:100%;object-fit:cover;min-height:400px}
.consultation-summary h2{font-size:43px;margin:20px 0}
/* Item 33/38: Return-to-design and Download no longer sit on the same line touching one another. */
.consult-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:25px}
.demo-notice{padding:45px;background:#e1e8d2;margin-top:40px}
.demo-notice h2{font-size:38px;max-width:22ch;margin:20px 0}
.demo-notice p{font-size:14px}
@media(min-width:1700px){.studio-scene{height:650px}
}
@media(max-width:1100px){.studio-workspace{grid-template-columns:minmax(0,1fr) 320px}
.studio-scene{height:450px}
}
@media(max-width:800px){
#design-studio{min-height:2600px}
.studio-steps{gap:0}
.studio-steps button{padding:17px 10px;gap:8px;display:block;font-size:13px}
.studio-steps span{display:block;margin-top:6px}
/* Item 7, the compact sticky model on phone. display:contents on studio-render (an earlier attempt at this) turned
   out to make Chrome compute studio-scene's position as relative instead of sticky: found by testing (a debug script
   confirmed getComputedStyle().position was "relative" with display:contents in the chain, "sticky" without it), so
   this does not use it. Instead studio-workspace stays a (single-column) grid, and studio-render and studio-controls
   share the same grid row: the row's height is set by controls (the taller one), and studio-render, a normal grid
   item with the default stretch alignment, stretches to that same full height even though its own visible content
   (the scene and the tool row) is short. That gives the sticky scene inside it a containing block tall enough to stay
   stuck for the whole controls scroll, exactly the "grid item's sticky range is its own grid area" mechanism this
   plan warns a first attempt gets backwards, deliberately used here instead of fought. studio-controls' top margin
   below equals studio-render's own visible height, so its fields start right under the sticky panel rather than
   under its (invisible) stretched remainder.
*/
.studio-workspace{display:grid;grid-template-columns:1fr;grid-template-areas:none;row-gap:0}
/* align-self:start, not stretch: the shared row's own box (sized by studio-controls, the taller participant) is what
   gives the sticky containing block its height. Stretching studio-render to match would make its own box as tall as
   that containing block too, leaving sticky no slack to hold position (found by testing: it let go again almost the
   moment it engaged). Kept compact, it has the full row's height to stay stuck through. */
.studio-render{grid-column:1;grid-row:1;position:sticky;top:var(--studio-header-h);z-index:5;align-self:start;background:var(--paper);box-shadow:0 10px 12px -12px #0a1f1a66}
.studio-scene.aquarium-scene,.studio-scene{min-height:0}
.studio-render .interaction-hint{display:none}
/* Fix 2 (verifier, tested): the hint text is hidden here, and scene.css's own 280px minimum on the canvas holder is
   overridden above so the explicit 220px height below actually applies. Together those bring studio-render's own
   content (scene, tool row) from a fixed 421.5px down to about 312px, opaque now via the paper background, so it no
   longer prints over studio-controls while sticky. 300px clears it with margin, so controls' fields never sit under
   studio-render's z-index:5 box. */
.studio-controls{grid-column:1;grid-row:1;align-self:start;margin-top:300px;padding:25px}
.studio-scene{height:220px}
.scene-tools{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-inline:2px}
/* scrollIntoView({block:'center'}) can otherwise park one of these normal-flow buttons at a point the sticky scene
   still covers (found by testing: the cabinet button was briefly unclickable there). scroll-margin-top makes every
   automated or keyboard scroll-into-view clear the sticky band first. */
.scene-tools button,[data-equipment]{scroll-margin-top:calc(var(--studio-header-h) + 240px)}
.studio-controls h2{font-size:37px}
/* Matches studio-render's current ~312px height (the same measurement above) with margin, now that its height no
   longer changes with the cabinet. scroll-margin-bottom clears the status toast (base.css, up to ~91px tall,
   bottom: 25px) for the same reason: a control scrolled to must not land underneath it either. */
.studio-controls :is(input,select,button,a){scroll-margin-top:calc(var(--studio-header-h) + 310px);scroll-margin-bottom:150px}
.studio-fineprint{grid-template-columns:1fr;gap:18px}
.saved-grid{grid-template-columns:1fr}
.saved-toolbar{align-items:start}
.saved-toolbar .button{font-size:12px;padding:12px 16px}
.consultation-summary{grid-template-columns:1fr;gap:35px}
.consultation-summary>img{min-height:0;aspect-ratio:1.4}
.demo-notice{padding:25px}
.demo-notice h2{font-size:32px}
.comparison h2{font-size:35px}
.table-scroll{font-size:11px}
th,td{padding:13px}
/* Item 7: a sticky bottom bar carrying the estimate range and Save, workspace's last child, never fixed (the Aster
   lesson): it shows only while the workspace itself is on screen and never sits over the footer. Its own grid row
   (row 2) starts only after row 1's full stretched height, which is exactly where studio-controls' real content ends. */
.estimate-bar{grid-column:1;grid-row:2;position:sticky;bottom:0;top:auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#f6f5ec;border:1px solid var(--line);border-inline:0;box-shadow:0 -6px 16px #0a1f1a1a}
.estimate-bar .estimate-box{flex:1;min-width:0}
.estimate-bar .estimate-box .eyebrow,.estimate-bar .estimate-box p,.estimate-bar .estimate-box small{display:none}
.estimate-bar .estimate-box strong{font-size:18px;margin:0}
.estimate-bar>.button{flex:none;width:auto;margin-top:0;min-height:44px;padding:10px 18px}
}
.studio-section>#design-studio{padding-inline:0}
.share-panel{min-width:0;padding:14px;border:1px solid var(--line);background:var(--paper)}
.share-panel label{margin:0;font-size:12px}
.share-panel input{width:100%;min-width:0;min-height:var(--target-min,24px);border:1px solid var(--line);padding:10px;margin-top:8px;background:white;color:var(--ink);font-size:12px}
@media(hover:none) and (pointer:coarse){.share-panel input{min-height:var(--touch-min,44px)}}
.share-panel .control-note{margin-top:10px}
/* Owner: ARCHITECT. The Care flow diagram (audit item 4, markup studio/build/diagram.mjs) and the project drawing
   reveal (audit item 5, markup studio/build/sketch.mjs, script js/reveal.js). */

/* ---- Care flow: the drawing fits its stage (a frame with the drawing's aspect ratio, sized in container units),
   wide or tall by the stage's shape, labels in HTML at 13 px, and the caption and pills below it, never over it. */
.care-flow .flow-diagram{position:relative;flex:1 1 auto;min-height:320px;container-type:size;display:grid;place-items:center;padding:14px 0 140px}
.flow-frame{position:relative;display:none;color:var(--ink)}
.flow-wide{display:block;width:min(100cqw,100cqh * 660 / 510);aspect-ratio:660/510}
.flow-tall{width:min(100cqw,100cqh * 480 / 700);aspect-ratio:480/700}
@container (orientation: portrait){.flow-wide{display:none}.flow-tall{display:block}}
.flow-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-frame svg *{vector-effect:non-scaling-stroke}
.flow-tank,.flow-cabinet,.flow-filter{stroke:currentColor;stroke-width:1.5;transition:stroke-width .3s}
.flow-cabinet rect{fill:#14372f08}
.flow-filter rect{fill:#e7e7db}
.flow-water,.flow-bed,.flow-plinth{opacity:.5}
.flow-loop{stroke:currentColor;stroke-width:2;opacity:.2;transition:opacity .3s}
.flow-dash{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 11;animation:flow-travel 1.1s linear infinite;transition:stroke-width .3s}
@keyframes flow-travel{to{stroke-dashoffset:-14}}
.flow-arrows{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-motion=reduce] .flow-dash{animation:none}
.flow-label{position:absolute;transform:translate(-50%,-50%);padding:3px 7px;background:#e7e7db;color:var(--ink);font:600 13px/1.25 Manrope,Arial,sans-serif;white-space:nowrap}
.flow-label-start{transform:translate(0,-50%)}
.flow-label-end{transform:translate(-100%,-50%)}
@container (max-width: 460px){.flow-label{padding:2px 5px;font-size:12px}}
/* The part in view follows the pill js/scroll.js marks. */
.care-flow:has([data-stage-label="0"].is-current) .flow-tank,.care-flow:has([data-stage-label="1"].is-current) .flow-cabinet,.care-flow:has([data-stage-label="1"].is-current) .flow-filter{stroke-width:3}
.care-flow:has([data-stage-label="2"].is-current) .flow-dash{stroke-width:3.6}
.care-flow:has([data-stage-label="2"].is-current) .flow-loop{opacity:.35}
@media(max-width:800px){.care-flow .flow-diagram{padding-bottom:176px}}
/* Unpinned stories (reduced motion, the host switch, short screens) give the story no height to grow into, and a
   size-contained frame with no definite height draws at 0 x 0: give the drawing a height of its own there. */
:root[data-motion=reduce] .care-flow .flow-diagram{flex:none;height:clamp(420px,70vh,640px)}
@media(max-height:520px){.care-flow .flow-diagram{flex:none;height:420px}}

/* ---- Project drawing reveal: the box has the photograph's aspect ratio (no min-height), the image covers it and the
   drawing is sliced the same way, so the lines stay on the objects. Fully drawn first, the photograph on scroll. */
.project-hero{position:relative;isolation:isolate;overflow:hidden;background:#e9e6dc;aspect-ratio:1672/941;max-height:min(850px,calc(100svh - 84px))}
.project-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--reveal,0)}
.project-hero>.drawing-overlay{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);opacity:calc(1 - var(--reveal,0));pointer-events:none}
.drawing-overlay path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.sketch-aquarium{stroke-width:1.7}
.sketch-cabinet{stroke-width:1.4;opacity:.85}
.sketch-room{stroke-width:1;opacity:.45}
.sketch-notes{position:absolute;inset:0;pointer-events:none;color:var(--ink);opacity:calc(1 - var(--reveal,0) * 1.4);font:700 12px/1.45 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sketch-notes p{position:absolute;left:clamp(14px,4vw,64px);margin:0;max-width:62%;padding:4px 8px;background:#e9e6dce6}
.sketch-title{top:clamp(12px,4.2vw,60px)}
.sketch-title>span{display:block;font-weight:600;letter-spacing:.1em}
.sketch-note{bottom:clamp(12px,3.8vw,54px)}
/* Phones: the page heading already names the project, so only the note stays, on one line. */
@media(max-width:600px){.sketch-title{display:none}.sketch-notes .sketch-note{max-width:calc(100% - 28px);letter-spacing:.03em;text-transform:none;font-weight:600}}
:root[data-motion=reduce] .project-hero>img{opacity:1}
:root[data-motion=reduce] .project-hero>.drawing-overlay,:root[data-motion=reduce] .sketch-notes{opacity:0}