/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /assets/css/bankasi-refresh-v1.css */
/* Editorial refresh. Scoped additions leave the Creations motion and card effects intact. */
.workbench-editorial{display:block!important;background:none!important;border:0!important}
.workbench-chapter{margin:0 0 clamp(48px,7vw,100px)}
.chapter-heading{font:400 clamp(28px,3vw,40px)/1.15 'Cormorant Garamond',serif;border-top:1px solid #c9ccc6;padding-top:22px;margin:0 0 28px;color:#30332f}
.chapter-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workbench-editorial .workbench-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.workbench-editorial .workbench-card:hover{background:transparent}
.workbench-editorial .workbench-card-image,.workbench-editorial .workbench-feature-image{border:0;border-radius:3px;overflow:hidden;background:#edeeea}
.workbench-editorial .workbench-card-body{padding:24px 0!important}
.workbench-editorial .card-title{font:400 clamp(27px,3vw,38px)/1.15 'Cormorant Garamond',serif;color:#30332f;margin:14px 0}
.workbench-editorial .card-excerpt{max-width:52ch;line-height:1.75}
.workbench-editorial .card-footer{padding-top:16px;margin-top:24px}
.workbench-editorial .chapter-featured .chapter-stories{display:block}
.workbench-editorial .chapter-featured .workbench-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.workbench-editorial .chapter-featured .card-title{font-size:clamp(36px,4.5vw,60px)}
.workbench-editorial .chapter-featured img{width:100%;height:100%;max-height:520px;object-fit:cover;aspect-ratio:5/4}
.workbench-editorial .chapter-guides .workbench-card{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.workbench-editorial .chapter-guides .workbench-card-body{padding:0!important}
.workbench-editorial .chapter-guides img{width:100%;height:150px;object-fit:cover;padding:0}
.workbench-editorial .chapter-guides .card-title{font-size:30px}
.workbench-editorial .chapter-studio img{height:auto;aspect-ratio:3/2;object-fit:cover}
.chapter-archive .chapter-stories{display:block}
.workbench-editorial .archive-card{display:grid;grid-template-columns:1fr;min-height:0;border-bottom:1px solid #d6d8d2}
.workbench-editorial .archive-card .workbench-card-image,.workbench-editorial .archive-card .card-excerpt,.workbench-editorial .archive-card .card-footer{display:none}
.workbench-editorial .archive-card .workbench-card-body{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding:22px 0!important}
.workbench-editorial .archive-card .card-meta{flex-direction:column;align-items:flex-start;gap:6px}
.workbench-editorial .archive-card .card-title{font-size:27px;margin:0}
.workbench-editorial.is-filtered .chapter-heading{display:none}
.workbench-editorial.is-filtered .workbench-chapter{margin:0}
.workbench-editorial.is-filtered .chapter-stories{display:block}
.workbench-editorial.is-filtered .workbench-card{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:24px 0!important;border-bottom:1px solid #d4d6d0}
.workbench-editorial.is-filtered .workbench-card-body{display:block;padding:0!important}
.workbench-editorial.is-filtered .workbench-card img{width:100%;height:120px;aspect-ratio:auto;object-fit:cover}
.workbench-editorial.is-filtered .workbench-card .card-title{font-size:30px}
.workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
.workbench-editorial [hidden]{display:none!important}
/* Reading layouts: wide material, narrow prose. */
.article-refresh .post-body{max-width:1120px!important;margin-inline:auto}
.article-refresh .post-body>p,.article-refresh .post-body>h2,.article-refresh .post-body>ul,.article-refresh .post-body>ol,.article-refresh .post-body>.article-toc,.article-refresh .post-body>.archive-context,.article-refresh .post-body>.test-notebook{max-width:712px;margin-left:auto;margin-right:auto}
.article-refresh .post-body>figure{max-width:900px;margin:44px auto}
.article-refresh .post-body>figure img{width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:3px}
.article-refresh .post-body figcaption{font-size:13px;line-height:1.65;color:#62675f;max-width: 70ch;margin-top:12px}
.article-refresh .post-body>.fan-comparison{max-width:100%;margin:32px 0 48px}
.article-refresh .archive-context{padding:18px 0;border-block:1px solid #cfd2ca;font:400 14px/1.7 'DM Sans',sans-serif;color:#62665e;margin-bottom:32px}
.article-refresh .test-notebook{padding:24px;border-left:2px solid #8b9388;background:#edeFE9}
.article-refresh .post-body .test-notebook p{font-size:15px;line-height:1.75}
.article-refresh .post-body .test-notebook h3{font:500 15px/1.5 'DM Sans',sans-serif;margin:22px 0 8px}
.article-refresh .post-body>h2{margin-top:56px}
/* Static instructional figures. */
.fit-illustration{margin:24px 0 28px;padding:20px 24px;background:#eeefea;border:1px solid #d8dbd3;border-radius:3px;break-inside:avoid}
.fit-illustration img{width:100%;max-width:540px;height:auto;display:block;margin:auto}
.fit-illustration figcaption{font:400 12px/1.7 'DM Sans',sans-serif;color:#62675e;margin:10px 0 0}
.help-answer .fit-illustration{max-width:620px}
.help-answer .fit-illustration img{max-height:250px}
/* Concise model reading hierarchy. */
#modelPreview #modelDescription{font-size:15px;line-height:1.7;margin:0 0 12px}
#modelPreview .model-essential{font-size:13px;font-weight:500;margin:0 0 18px;color:#3b4038}
#modelPreview .model-note-details{border-top:1px solid #d6d8d1;padding:14px 0;margin:0}
#modelPreview .model-note-details>summary{display:list-item;cursor:pointer;font:500 13px/1.6 'DM Sans',sans-serif}
#modelPreview .model-note-details p{font-size:13px;line-height:1.7;color:#5b6057;margin:12px 0}
#modelPreview .product-guidance{border-top:0;margin-top:0;padding-top:0}
#modelPreview .product-fit{margin-top:0}
#modelPreview .model-design-credit{margin-bottom:14px}
.page-creations .creation-card .model-spec{min-height:2.8em;display:flex;align-items:flex-end}
/* Comparison is only present within the existing fan comparison. */
.fan-visual-comparison{margin:24px 0 32px}
.fan-compare-intro{font-size:13px!important;color:#62675f}
.fan-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fan-compare-side{min-width:0;border-top:1px solid #c9cdc4;padding-top:20px}
.fan-compare-side h3{font:500 16px/1.4 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-options{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 20px}
.fan-compare-options button{font:400 12px/1.5 'DM Sans',sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:#64695f;padding:6px 0;cursor:pointer}
.fan-compare-options button[aria-pressed=true]{color:#20261c;border-color:#20261c;font-weight:500}
.fan-compare-options button:focus-visible{outline:2px solid #545c50;outline-offset:4px}
/* Phones: one sideways row of size tabs with full-height tap targets, as in the [creations] comparison (audit 2026-10-13). */
@media (max-width:760px){.fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fan-compare-options::-webkit-scrollbar{display:none}.fan-compare-options button{flex:none;min-height:44px;min-width:24px;white-space:nowrap}.fan-compare-options button:focus-visible{outline-offset:-2px}}
.fan-compare-side img{display:block;width:100%;height:240px;object-fit:contain;background:#f7f8f4;border-radius:3px}
.fan-compare-side dl{display:grid;grid-template-columns:100px 1fr;font:13px/1.6 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-side dt,.fan-compare-side dd{border-top:1px solid #d7dad1;padding:9px 0;margin:0}
.fan-compare-side dt{color:#62685c}
.fan-compare-side a{font-size:13px;text-underline-offset:4px}
/* Founder-led About. */
.page-about .founder{border-block:1px solid #d4d7cf}
.about-closing{padding:48px var(--page-gutter,5vw) 64px;border-top:1px solid #cfd3c9}
.about-closing h2{font:400 42px/1.1 'Cormorant Garamond',serif;margin:12px 0 24px}
.editorial-links{display:flex;flex-wrap:wrap;gap:18px 30px;font:400 14px/1.5 'DM Sans',sans-serif}
.editorial-links a{color:inherit;text-underline-offset:5px}
/* Contact form leads in DOM and visual order. */
.page-contact .page-hero{padding-top:128px!important;padding-bottom:38px!important;min-height:0}
.page-contact .page-hero h1{font-size:clamp(42px,5vw,64px);margin-bottom:16px}
.page-contact .contact-section{padding-top:48px!important}
.page-contact .contact-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:clamp(32px,7vw,100px);align-items:start}
.inquiry-design-reference{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid #cbd0c5;font:14px/1.65 'DM Sans',sans-serif}
.inquiry-design-reference p{margin:6px 0}.inquiry-design-reference a{color:inherit;text-underline-offset:4px;font-size:13px}
/* A statement rather than a title page. */
.page-mission .mission-hero{padding-top:140px;padding-bottom:36px;min-height:0}
.page-mission .mission-hero h1{max-width:20ch;font-size:clamp(58px,7vw,100px)}
.page-mission .statement-section{padding-top:0!important;padding-bottom:64px!important}
.page-mission .statement-body{max-width:760px}
.page-mission .pillars-section{padding-top:32px!important;padding-bottom:64px!important}
.page-mission .pillar{background:none;border:0;border-top:1px solid #555850;border-radius:0;box-shadow:none;padding:26px 0}
.page-mission .pillar::before,.page-mission .pillar::after{display:none}
.page-mission .pillars-grid{background:none;gap:40px}
.page-mission .cta-section{padding-top:40px;padding-bottom:48px}
/* Short recovery and readable privacy. */
.recovery-simple{max-width:1000px;margin:auto;padding:160px 32px 90px;min-height:65vh;color:#343830}
.recovery-simple h1{font:400 clamp(48px,7vw,80px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.recovery-simple>p{max-width: 50ch;font:16px/1.7 'DM Sans',sans-serif}
.recovery-simple nav{display:flex;flex-wrap:wrap;gap:20px 40px;margin:36px 0;border-block:1px solid #d0d4c9;padding:24px 0}
.recovery-simple a{color:inherit;text-underline-offset:5px}
.recovery-simple .recovery-contact{font-size:14px}
.page-privacy{background:#f4f4f0;color:#343830;font-family:'DM Sans',sans-serif}
.privacy-reading{max-width:776px;margin:auto;padding:56px 32px 80px}
.privacy-wordmark{color:inherit;text-decoration:none;font-size:16px;letter-spacing:.18em}
.privacy-wordmark sup{font-size:8px}
.privacy-reading h1{font:400 clamp(40px,6vw,60px)/1.05 'Cormorant Garamond',serif;margin:48px 0 24px}
.privacy-reading h2{font:400 30px/1.2 'Cormorant Garamond',serif;margin:0 0 18px}
.privacy-reading p{font-size:16px;line-height:1.85;margin:0 0 22px}
.privacy-reading .panel{border:0;border-top:1px solid #cdd2c5;border-radius:0;background:none;box-shadow:none;padding:32px 0 10px;margin-top:32px}
.privacy-reading a{color:inherit;text-underline-offset:4px}
.privacy-reading .muted{font-size:13px;color:#62675e}
.metric-context{display:block;font:400 11px/1.5 'DM Sans',sans-serif;margin-top:5px;color:inherit;opacity:.8}
.service-period-inline{font:400 12px/1.7 'DM Sans',sans-serif;color:#c5c8c1;max-width:36ch}
.page-home .service-feature{margin-top:40px;padding-top:40px}
@media(max-width:760px){
 .chapter-stories{grid-template-columns:1fr;gap:32px}
 .workbench-editorial .chapter-featured .workbench-card{grid-template-columns:1fr;gap:0}
 .workbench-editorial .chapter-featured img{max-height:320px;aspect-ratio:3/2}
 .workbench-editorial .chapter-guides .workbench-card{grid-template-columns:90px 1fr;gap:18px}
 .workbench-editorial .chapter-guides img{height:110px}
 .workbench-editorial .chapter-guides .card-title{font-size:27px}
 .workbench-editorial .archive-card .workbench-card-body{grid-template-columns:1fr;gap:8px}
 .workbench-editorial .archive-card .card-meta{flex-direction:row}
 .workbench-editorial.is-filtered .workbench-card{grid-template-columns:80px 1fr;gap:16px}
 .workbench-editorial.is-filtered .workbench-card img{height:90px}
 .workbench-editorial.is-filtered .workbench-card .card-title{font-size:26px}
 .workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
 .fan-compare-pair{gap:16px}.fan-compare-side img{height:150px}.fan-compare-side dl{display:block}.fan-compare-side dd{border-top:0;padding-top:0}.fan-compare-side dt{padding-bottom:2px}.fan-compare-options{gap:2px 10px}.fan-compare-side h3{font-size:14px}
 .article-refresh .post-body>figure{margin-block:30px}
 .fit-illustration{padding:14px 8px}.article-refresh .test-notebook{padding:18px}
 .page-contact .contact-grid{grid-template-columns:1fr}.page-contact .page-hero{padding-top:114px!important}
 .page-mission .mission-hero{padding-top:120px}.page-mission .pillars-grid{grid-template-columns:1fr;gap:16px}
 .recovery-simple{padding:130px 24px 64px}.recovery-simple nav{gap:20px 26px}
 .privacy-reading{padding:36px 24px 60px}
}
@media print{.fit-illustration{background:none;max-width:420px;padding:10pt;margin:12pt 0}.fit-illustration img{max-height:150pt}.fan-compare-options{display:none}.article-refresh .post-body{max-width:100%!important}}
.article-refresh .tour-chapter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;border-top:1px solid #cdd0c8;padding:36px 0;margin:40px 0}
.article-refresh .tour-chapter h2{margin-top:0}.article-refresh .tour-chapter figure{margin:0}.article-refresh .tour-chapter img{width:100%;height:auto;border-radius:3px}
.article-refresh .tour-text{display:block;max-width:712px;margin-inline:auto}
@media(max-width:760px){.article-refresh .tour-chapter{grid-template-columns:1fr;gap:20px}}
/* Keep expanded preview copy inside its allocated grid row, so overflow can scroll. */
#modelPreview .model-details{align-self:stretch;overscroll-behavior-y:contain}
@media(min-width:761px){#modelPreview .model-details{height:100%;max-height:100%;box-sizing:border-box}}
/* /assets/css/site-refresh-v1.css */
/* 2026-10 site-wide refresh: same-origin page transitions and the site search dialog. */

/* Cross-document view transitions (Chromium/Safari 18.2+; other browsers navigate normally). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width: 0px){@view-transition{navigation:none}}

/* Site search (⌘K / Ctrl+K / "/"). */
.site-search-open{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.site-search-open:hover{border-color:currentColor}
#mainNav .site-search-open{color:#f5f5f5}
#mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff12}
.site-search-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-search-open svg{width:17px;height:17px}

/* Desktop header: logo left, links centred, search bar and CTA grouped on the right. The links sit centred in the
   space between logo and search, and exactly on the page centre once there is room (>=1400px). The bar matches
   the CTA's height and corner radius; below 1101px it is a square icon button. */
@media(min-width:769px){
 #mainNav .nav-links{margin:0 auto}
 #mainNav .site-search-open{width:40px;height:40px;margin:0 12px 0 auto;border:1px solid #ffffff2e;border-radius:8px;background:#ffffff0d;color:#f5f5f5c2;transition:border-color .2s,background-color .2s,color .2s}
 #mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff17;color:#f5f5f5}
 #mainNav .site-search-open svg{width:16px;height:16px;flex:none}
}
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:1rem}}
@media(min-width:1101px){
 #mainNav .site-search-open{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;padding:0 14px;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-align:left}
 #mainNav .site-search-open::after{content:"Search"}
}
@media(min-width:1400px){
 #mainNav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 #mainNav .site-search-open{width:220px}
}
.site-search{width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));margin:72px auto auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d;overflow:hidden}
.site-search::backdrop{background:#0c0c0c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-search form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e3e0da}
.site-search form svg{flex:none;width:18px;height:18px;color:#6b6b6b}
.site-search input{flex:1;min-width:0;border:0;background:none;color:#151515;font:400 17px 'DM Sans',sans-serif;outline:none}
.site-search input::placeholder{color:#6b6b6b}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search kbd{font:500 11px 'DM Sans',sans-serif;padding:3px 6px;border:1px solid #d7d4ce;border-radius:5px;color:#6b6b6b;background:#fff}
.site-search-results{list-style:none;margin:0;padding:8px;max-height:min(520px,calc(100vh - 170px));overflow:auto}
.site-search-results li{margin:0}
.site-search-results a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:9px;color:inherit;text-decoration:none}
.site-search-results a[aria-selected="true"],.site-search-results a:hover{background:#ecebe6}
.site-search-type{grid-row:span 2;align-self:center;min-width:76px;font:500 10px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b675f}
.site-search-title{font:500 15px/1.3 'DM Sans',sans-serif}
.site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#5f5f5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-empty{padding:22px 16px;font:400 14px 'DM Sans',sans-serif;color:#5f5f5f}
@media(max-width:760px){.site-search{margin-top:16px;max-height:calc(100vh - 32px)}.site-search-type{min-width:0;grid-row:auto}.site-search-results a{grid-template-columns:1fr}.site-search kbd{display:none}}
/* Site search v2 (site-search-v2.js, owner-approved 2026-10-06): start view, grouped results with headers,
   design thumbnails (their [creations] card image), a Cancel button on phones, and the inline variant (404 page). */
dialog.site-search-v2[open]{display:flex;flex-direction:column}
.site-search-v2 form{flex:none}
.site-search-v2 .site-search-results{flex:1 1 auto;min-height:0;max-height:none;padding:6px 8px 12px}
.site-search-v2 .site-search-group{margin:14px 12px 6px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.site-search-v2 .site-search-group:first-child{margin-top:8px}
.site-search-v2 .site-search-results a.site-search-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 10px;border-radius:11px;color:inherit;text-decoration:none}
.site-search-v2 .site-search-results a.site-search-item[aria-selected="true"],.site-search-v2 .site-search-results a.site-search-item:hover{background:#ecebe6}
.site-search-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#f6f6f5;box-shadow:inset 0 0 0 1px #15151512;color:#6b675f;overflow:hidden}
.site-search-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-search-thumb.is-video{width:80px;background:#151515}
.site-search-thumb svg{width:22px;height:22px}
.site-search-body{display:grid;gap:2px;min-width:0}
.site-search-v2 .site-search-title{font:500 15px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-v2 .site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#66625b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-tag{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid #15151533;border-radius:999px;font:500 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.site-search-v2 .site-search-results a.site-search-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 12px;font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.site-search-more svg{width:18px;height:18px;flex:none}
.site-search-v2 .site-search-results .site-search-empty a{display:inline;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-search-cancel{display:none;flex:none;padding:8px 2px 8px 8px;border:0;background:none;color:#151515;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.site-search-cancel:focus-visible{outline:2px solid #151515;outline-offset:2px;border-radius:6px}
@media(max-width:760px){
 .site-search-v2{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .site-search-v2 form{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .site-search-v2 input{font-size:16px}
 .site-search-v2 kbd{display:none}
 .site-search-cancel{display:block}
 .site-search-v2 .site-search-results{padding:4px 6px calc(16px + env(safe-area-inset-bottom))}
 .site-search-v2 .site-search-results a.site-search-item{grid-template-columns:auto minmax(0,1fr);gap:12px}
}
.site-search-inline{display:block;width:100%;max-width:640px;margin:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 18px 48px #00000014;overflow:hidden;text-align:left}
.site-search-inline .site-search-results{max-height:420px;overflow:auto}
@media(max-width:760px){.site-search-inline{border-radius:12px}.site-search-inline .site-search-results{max-height:none}}

/* Footer edges follow the nav (owner 2026-10-06: the footer reached past the nav's edge on wide screens). */
body>footer{padding-left:var(--page-gutter,clamp(24px,5vw,80px));padding-right:var(--page-gutter,clamp(24px,5vw,80px))}

/* iOS 26 Safari tints the status bar and bottom bar from the page's root background (theme-color is ignored).
   The root is therefore the header/footer charcoal, and the light page surface moves onto <main>, which with the
   footer fills the whole page, so nothing else changes visually. Mission (already dark) and privacy (no header) keep theirs. */
body[data-surface="light"]{--page-surface:#f4f4f2}
body.page-product{--page-surface:#f4f2ee}
html:has(body[data-surface="light"]){background-color:#151515!important}
body[data-surface="light"]{background-color:#151515!important}
body[data-surface="light"]>#main-content{background-color:var(--page-surface)}

/* Phone/tablet header: logo, search and menu share one centre line; the menu lines end on the page gutter
   and search sits beside the menu (desktop layout is unchanged). */
@media(max-width:768px){
 #mainNav .site-search-open{margin-left:auto;margin-right:4px}
 body:not(.page-creations) #hamburgerBtn{justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-right:-11px}
}

/* Phone menu on the main site, matching the [creations] menu (owner 2026-10-05): a frosted panel that drops under
   the header, left-aligned DM Sans rows with dividers, a "Menu / Close" text toggle, and the last two links
   (Shop on Etsy, YouTube; Old tech above them since 2026-10-10) as quieter secondary links. [creations] keeps its own rules (88 px header). */
@media (max-width: 768px) {
 body:not(.page-creations) #hamburgerBtn { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0; min-width: 64px; min-height: 44px; padding: 10px 0 10px 12px; color: #f2f2ec; font: 400 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; }
 body:not(.page-creations) #hamburgerBtn::after { content: "Menu"; }
 body:not(.page-creations) #hamburgerBtn.open::after { content: "Close"; }
 body:not(.page-creations) #hamburgerBtn span { display: none; }
 body:not(.page-creations) #hamburgerBtn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
 body:not(.page-creations) #mobileMenu {
  display: flex; flex-direction: column; position: fixed; inset: var(--nav-h, 80px) 0 auto; height: auto; max-height: calc(100dvh - var(--nav-h, 80px));
  padding: 18px 24px 26px; gap: 0; align-items: stretch; justify-content: flex-start; text-align: left;
  background: #20201ff5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff22; box-shadow: 0 18px 32px #0003;
  overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
 }
 body:not(.page-creations) #mobileMenu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
 body:not(.page-creations) #mobileMenu a {
  display: flex; align-items: center; justify-content: flex-start; min-height: 54px; padding: 12px 0; margin: 0;
  font: 400 17px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #edede7;
  border-bottom: 1px solid #ffffff14; text-decoration: none; opacity: 1; transform: none;
 }
 body:not(.page-creations) #mobileMenu a:nth-last-child(2) { margin-top: 14px; }
 body:not(.page-creations) #mobileMenu a:nth-last-child(-n+2) { font-size: 14px; color: #bdbdb7; border: 0; min-height: 44px; }
 body:not(.page-creations) #mobileMenu a:focus-visible { outline: 1px solid #edede7; outline-offset: 3px; }
}
@media (max-width: 0px) { body:not(.page-creations) #mobileMenu { transition: none; } }

/* Wayfinding (site-wayfinding-v1.js, owner-approved 2026-10-06). */
/* 1. You are here (owner 2026-10-07: no dot, the page name glows): the current section's header link and phone-menu
   row are lit white with a soft silver-white glow, the [creations] wordmark's light language kept quiet; no underline
   (Contact: the CTA is lit instead). */
#mainNav .nav-links a[aria-current="page"],
html body.page-creations #mainNav .nav-links a[href][aria-current="page"]{color:#fff!important;text-decoration:none!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}
#mainNav .nav-cta[aria-current="page"]{text-decoration:none;background:#ffffff26!important;border-color:#f2f2f0!important;color:#fff;text-shadow:0 0 7px #ffffff8c,0 0 16px #e6ecf855}
#mobileMenu a[aria-current="page"]{color:#fff!important;font-weight:500;text-shadow:0 0 1px #ffffffb3,0 0 9px #ffffff99,0 0 20px #e6ecf880,0 0 36px #dce5f540}
#mobileMenu a[aria-current="page"]::after{content:none}
/* 2. Phone menu backdrop: dims the page under the open menu; a tap on it closes the menu. */
.menu-scrim{display:none}
@media(max-width:768px){
 .menu-scrim{display:block;position:fixed;inset:0;z-index:198;background:#0c0c0c73;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
 .menu-scrim.is-shown{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
}
/* 3. Back to top: one rounded, frosted button in the right page gutter; colour-only hover, no lift. The script
   sets --to-top-lift to rise above the footer or the product pages' action bar. */
.to-top{position:fixed;z-index:190;right:max(12px,calc(env(safe-area-inset-right) + 12px),calc((var(--to-top-gutter,var(--page-gutter,clamp(24px,5vw,80px))) - 44px) / 2));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #15151524;border-radius:50%;background:#faf9f6c9;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#151515;box-shadow:0 8px 24px #00000026,0 1px 0 #ffffffb3 inset;cursor:pointer;transform:translateY(calc(-1 * var(--to-top-lift,0px)));opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s,background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.to-top.is-shown{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .2s,border-color .2s,box-shadow .2s}
.to-top:hover{background:#fff;border-color:#15151566;box-shadow:0 8px 24px #0000002e,0 0 0 3px #1515150f}
.to-top:focus-visible{outline:2px solid #151515;outline-offset:2px;box-shadow:0 0 0 5px #faf9f6}
.to-top svg{width:18px;height:18px}
@media print{.to-top,.menu-scrim{display:none}}

/* Footer (owner-approved 2026-10-06): four columns (Explore, Designs, Connect, Good to know) beside the brand on
   wide screens, a 2 x 2 grid on phones. "Privacy" sits on the copyright line (owner 2026-10-11; it was a lone
   "Analytics privacy" row under a filler line). */
body>footer .footer-nav{gap:clamp(28px,3.4vw,52px)}
body>footer .footer-privacy{display:inline-flex;align-items:center;min-height:32px;color:#cecece;font-size:13px;text-decoration:none;transition:color .2s}
body>footer .footer-privacy::before{content:"\00b7";margin:0 .7em 0 .4em;color:#8a8a8a}
body>footer .footer-privacy:hover{color:#fff}
@media(max-width:760px){
 body>footer .footer-top>div:first-child{flex:0 0 auto}
 body>footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%}
}

/* Chrome system (2026-10-09 audit): one header, menu and footer across the main site, Workbench, Help and [creations].
   1. Header labels share one centre line: nav links are 40 px flex boxes like the search bar and the CTA (they sat
      1.5-2 px low because the inline padding box hung off the text baseline). */
@media(min-width:769px){
 #mainNav .nav-links li{display:flex}
 #mainNav .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
/* 2. Phones: [creations] and product pages end "Menu" on the page gutter like the main site (it sat 11 px inside). */
@media(max-width:768px){
 html body.page-creations #hamburgerBtn{margin-right:-11px}
}
/* 3. Footer: the same column headings and brand line everywhere (Workbench headings were light, the homepage brand
      line was larger and narrower than every other page's). */
html body>footer .footer-col .footer-heading{font-weight:700}
html body>footer .footer-top>div>p.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8}
/* 4. One focus ring weight: the phone menu toggle, menu rows and the footer privacy link drew 1 px rings while every other
      header, footer and search control draws 2 px. */
html body #hamburgerBtn:focus-visible,
html body #mobileMenu a:focus-visible,
html body>footer .footer-privacy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Six header links since "Partnerships" (2026-10-10): at 769-900px the links tighten and the search button keeps its
   square, so the logo, links, search and CTA never touch. */
@media(min-width:769px) and (max-width:900px){
 #mainNav .nav-links{gap:.8rem;margin:0 10px 0 22px}
 #mainNav .nav-links a{font-size:11.5px;letter-spacing:.05em}
 #mainNav .site-search-open{flex:none;margin-left:8px}
}
/* Same reason at 1101-1279px (the search becomes a bar) and 1400-1599px (links centred on the page; the [creations]
   labels are longer): a little less space between links so they never run into the search bar. */
@media(min-width:1101px) and (max-width:1279px){#mainNav .nav-links{gap:1.25rem}#mainNav .site-search-open{width:150px}}
@media(min-width:1400px) and (max-width:1599px){#mainNav .nav-links{gap:1.5rem}body.page-creations #mainNav .nav-links{gap:1.1rem}}
/* Old tech in the desktop header (owner 2026-10-10: "without adding too much clutter"): not a seventh centred link but a
   quiet utility link (box icon + label, no frame) on the right, beside the search bar, so the six section links keep
   their spacing. Shown from 1280px where the right group has room; the phone menu lists it after Partnerships. */
#mainNav .nav-util{display:none}
@media(min-width:1280px){
 #mainNav .nav-util{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0 14px 0 auto;padding:0 2px;flex:none;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#f5f5f5a8;text-decoration:none;white-space:nowrap;transition:color .2s}
 #mainNav .nav-util svg{width:16px;height:16px;flex:none}
 #mainNav .nav-util:hover,#mainNav .nav-util[aria-current="page"]{color:#fff}
 #mainNav .nav-util[aria-current="page"]{text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866}
 #mainNav .nav-util:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
 #mainNav .nav-util+.site-search-open{margin-left:0}
}
@media(min-width:1280px) and (max-width:1399px){#mainNav .nav-util+.site-search-open{width:150px}}
/* With the extra link the right group is wider, so the links stay centred between logo and search (as below 1400px)
   until 1900px, where page-centred links clear it again (the homepage's wider gutter included). */
@media(min-width:1400px) and (max-width:1899px){#mainNav:has(.nav-util) .nav-links{position:static;transform:none;margin:0 auto}}

/* Phone footer (owner 2026-10-11): the Designs column is dropped on phones; [creations] in Explore leads there. */
@media (max-width: 760px) { body > footer .footer-col:has(a[href$="#cooling"]) { display: none; } }
/* ...so Good to know spans the row and lists its four links in two columns under Explore and Connect (owner 2026-10-11). */
@media (max-width: 760px) {
 body > footer .footer-nav > .footer-col:last-child { grid-column: 1 / -1; }
 body > footer .footer-nav > .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; }
}


/* Link buttons (owner 2026-10-11: "every one"): every standalone link and link button is a rounded button with a
   filled circle in the text colour; the arrow is cut out of the circle, so it shows the button's own colour and
   contrasts on dark and light. Arrow: up-right to another page, toward the target on the same page, right for a
   pop-up preview. Plain text links (first list) get the whole button; existing pill buttons (second list) keep their
   own fill and get the radius and the circle. Add new standalone links to one of the two lists. */
html body.page-home .text-link,html body .model-contact,html body .product-secondary>a,html body.page-home .home-build-story .feature-actions a:not(.build-watch),html body .review-design-link,html body .help-back,html body .journey-link,html body .editorial-links a,html body .founder-links a,html body .fan-compare-side>a:not(.fan-compare-image-link),html body.page-creations p>a[href$="#test-notes"]:only-child,html body .pw-all,html body .rail-all,html body .wb-rail-all,html body .product-guide-link a,html body .bento-note-link,html body .custom-note-link,html body .wwu-review-link a,html body .wwu-kit-link,html body.page-work .wwu-go,html body.page-work .wwu-direct ul a,html body.page-work .wwu-review figcaption a,html body.page-work .wwu-proof-link a,html body.page-work .wwu-case-rel,html body .product-case-more,html body .pr-all,html body .workbench-rss-link,html body .privacy-end p>a,html body .channel-link,html body .contact-setup-note a,html body .contact-detail-value a,html body .post-back,html body .post-3d-link,html body .help-toc-back,html body .help-toc-help,html body .help-toc-close,html body .help-shop{display:inline-block!important;position:relative!important;width:fit-content!important;max-width:100%;align-self:flex-start;padding:12px 54px 12px 18px!important;min-height:46px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;background-image:none!important;font-family:'DM Sans',sans-serif;font-size:14px!important;font-weight:500!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:normal!important;opacity:1!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch:hover,html body.page-home .text-link:hover,html body .model-contact:hover,html body .product-secondary>a:hover,html body.page-home .home-build-story .feature-actions a:not(.build-watch):hover,html body .review-design-link:hover,html body .help-back:hover,html body .journey-link:hover,html body .editorial-links a:hover,html body .founder-links a:hover,html body .fan-compare-side>a:not(.fan-compare-image-link):hover,html body.page-creations p>a[href$="#test-notes"]:only-child:hover,html body .pw-all:hover,html body .rail-all:hover,html body .wb-rail-all:hover,html body .product-guide-link a:hover,html body .bento-note-link:hover,html body .custom-note-link:hover,html body .wwu-review-link a:hover,html body .wwu-kit-link:hover,html body.page-work .wwu-go:hover,html body.page-work .wwu-direct ul a:hover,html body.page-work .wwu-review figcaption a:hover,html body.page-work .wwu-proof-link a:hover,html body.page-work .wwu-case-rel:hover,html body .product-case-more:hover,html body .pr-all:hover,html body .workbench-rss-link:hover,html body .privacy-end p>a:hover,html body .channel-link:hover,html body .contact-setup-note a:hover,html body .contact-detail-value a:hover,html body .post-back:hover,html body .post-3d-link:hover,html body .help-toc-back:hover,html body .help-toc-help:hover,html body .help-toc-close:hover,html body .help-shop:hover{border-color:color-mix(in srgb,currentColor 70%,transparent)!important;background-color:color-mix(in srgb,currentColor 11%,transparent)!important}
html body .home-oldtech-link,html body .model-page-cta,html body .studio-details-link,html body .home-forum-cta,html body a.ot-btn,html body a.wwu-btn,html body a.btn-primary,html body .product-buy,html body a.product-actionbar-btn,html body .review-etsy-button,html body .hero-shop-link,html body .model-shop,html body .rb-all,html body .wb-link,html body .help-contact>a,html body .post-cta>a,html body .help-end-link,html body .mto-cta a,html body .help-toc-page,html body .sv-start{position:relative!important;display:inline-flex!important;align-items:center;min-height:46px;box-sizing:border-box;padding-right:54px!important;border-radius:12px!important;text-decoration:none!important}
html body.page-home .text-link *,html body .model-contact *,html body .product-secondary>a *,html body.page-home .home-build-story .feature-actions a:not(.build-watch) *,html body .review-design-link *,html body .help-back *,html body .journey-link *,html body .editorial-links a *,html body .founder-links a *,html body .fan-compare-side>a:not(.fan-compare-image-link) *,html body.page-creations p>a[href$="#test-notes"]:only-child *,html body .pw-all *,html body .rail-all *,html body .wb-rail-all *,html body .product-guide-link a *,html body .bento-note-link *,html body .custom-note-link *,html body .wwu-review-link a *,html body .wwu-kit-link *,html body.page-work .wwu-go *,html body.page-work .wwu-direct ul a *,html body.page-work .wwu-review figcaption a *,html body.page-work .wwu-proof-link a *,html body.page-work .wwu-case-rel *,html body .product-case-more *,html body .pr-all *,html body .workbench-rss-link *,html body .privacy-end p>a *,html body .channel-link *,html body .contact-setup-note a *,html body .contact-detail-value a *,html body .post-back *,html body .post-3d-link *,html body .home-oldtech-link *,html body .model-page-cta *,html body .studio-details-link *,html body .home-forum-cta *,html body a.ot-btn *,html body a.wwu-btn *,html body a.btn-primary *,html body .product-buy *,html body a.product-actionbar-btn *,html body .review-etsy-button *,html body .hero-shop-link *,html body .model-shop *,html body .rb-all *,html body .wb-link *,html body .help-contact>a *,html body .post-cta>a *,html body .help-end-link *,html body .mto-cta a *,html body .help-toc-back *,html body .help-toc-help *,html body .help-toc-close *,html body .help-shop *,html body .help-toc-page *,html body .sv-start *{text-decoration:none!important}
html body.page-home .text-link svg,html body .model-contact svg,html body .product-secondary>a svg,html body.page-home .home-build-story .feature-actions a:not(.build-watch) svg,html body .review-design-link svg,html body .help-back svg,html body .journey-link svg,html body .editorial-links a svg,html body .founder-links a svg,html body .fan-compare-side>a:not(.fan-compare-image-link) svg,html body.page-creations p>a[href$="#test-notes"]:only-child svg,html body .pw-all svg,html body .rail-all svg,html body .wb-rail-all svg,html body .product-guide-link a svg,html body .bento-note-link svg,html body .custom-note-link svg,html body .wwu-review-link a svg,html body .wwu-kit-link svg,html body.page-work .wwu-go svg,html body.page-work .wwu-direct ul a svg,html body.page-work .wwu-review figcaption a svg,html body.page-work .wwu-proof-link a svg,html body.page-work .wwu-case-rel svg,html body .product-case-more svg,html body .pr-all svg,html body .workbench-rss-link svg,html body .privacy-end p>a svg,html body .channel-link svg,html body .contact-setup-note a svg,html body .contact-detail-value a svg,html body .post-back svg,html body .post-3d-link svg,html body .home-oldtech-link svg,html body .model-page-cta svg,html body .studio-details-link svg,html body .home-forum-cta svg,html body a.ot-btn svg,html body a.wwu-btn svg,html body a.btn-primary svg,html body .product-buy svg,html body a.product-actionbar-btn svg,html body .review-etsy-button svg,html body .hero-shop-link svg,html body .model-shop svg,html body .rb-all svg,html body .wb-link svg,html body .help-contact>a svg,html body .post-cta>a svg,html body .help-end-link svg,html body .mto-cta a svg,html body .help-toc-back svg,html body .help-toc-help svg,html body .help-toc-close svg,html body .help-shop svg,html body .help-toc-page svg,html body .sv-start svg{display:none!important}
html body.page-home .text-link::before,html body .model-contact::before,html body .product-secondary>a::before,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::before,html body .review-design-link::before,html body .help-back::before,html body .journey-link::before,html body .editorial-links a::before,html body .founder-links a::before,html body .fan-compare-side>a:not(.fan-compare-image-link)::before,html body.page-creations p>a[href$="#test-notes"]:only-child::before,html body .pw-all::before,html body .rail-all::before,html body .wb-rail-all::before,html body .product-guide-link a::before,html body .bento-note-link::before,html body .custom-note-link::before,html body .wwu-review-link a::before,html body .wwu-kit-link::before,html body.page-work .wwu-go::before,html body.page-work .wwu-direct ul a::before,html body.page-work .wwu-review figcaption a::before,html body.page-work .wwu-proof-link a::before,html body.page-work .wwu-case-rel::before,html body .product-case-more::before,html body .pr-all::before,html body .workbench-rss-link::before,html body .privacy-end p>a::before,html body .channel-link::before,html body .contact-setup-note a::before,html body .contact-detail-value a::before,html body .post-back::before,html body .post-3d-link::before,html body .home-oldtech-link::before,html body .model-page-cta::before,html body .studio-details-link::before,html body .home-forum-cta::before,html body a.ot-btn::before,html body a.wwu-btn::before,html body a.btn-primary::before,html body .product-buy::before,html body a.product-actionbar-btn::before,html body .review-etsy-button::before,html body .hero-shop-link::before,html body .model-shop::before,html body .rb-all::before,html body .wb-link::before,html body .help-contact>a::before,html body .post-cta>a::before,html body .help-end-link::before,html body .mto-cta a::before,html body .help-toc-back::before,html body .help-toc-help::before,html body .help-toc-close::before,html body .help-shop::before,html body .help-toc-page::before,html body .sv-start::before{display:none!important}
html body.page-home .home-build-story .feature-actions a.build-watch::after,html body.page-home .text-link::after,html body .model-contact::after,html body .product-secondary>a::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::after,html body .review-design-link::after,html body .help-back::after,html body .journey-link::after,html body .editorial-links a::after,html body .founder-links a::after,html body .fan-compare-side>a:not(.fan-compare-image-link)::after,html body.page-creations p>a[href$="#test-notes"]:only-child::after,html body .pw-all::after,html body .rail-all::after,html body .wb-rail-all::after,html body .product-guide-link a::after,html body .bento-note-link::after,html body .custom-note-link::after,html body .wwu-review-link a::after,html body .wwu-kit-link::after,html body.page-work .wwu-go::after,html body.page-work .wwu-direct ul a::after,html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-proof-link a::after,html body.page-work .wwu-case-rel::after,html body .product-case-more::after,html body .pr-all::after,html body .workbench-rss-link::after,html body .privacy-end p>a::after,html body .channel-link::after,html body .contact-setup-note a::after,html body .contact-detail-value a::after,html body .post-back::after,html body .post-3d-link::after,html body .home-oldtech-link::after,html body .model-page-cta::after,html body .studio-details-link::after,html body .home-forum-cta::after,html body a.ot-btn::after,html body a.wwu-btn::after,html body a.btn-primary::after,html body .product-buy::after,html body a.product-actionbar-btn::after,html body .review-etsy-button::after,html body .hero-shop-link::after,html body .model-shop::after,html body .rb-all::after,html body .wb-link::after,html body .help-contact>a::after,html body .post-cta>a::after,html body .help-end-link::after,html body .mto-cta a::after,html body .help-toc-back::after,html body .help-toc-help::after,html body .help-toc-close::after,html body .help-shop::after,html body .help-toc-page::after,html body .sv-start::after{content:""!important;display:block!important;position:absolute!important;inset:50% 7px auto auto!important;translate:0 -50%;width:32px!important;height:32px!important;margin:0!important;border:0!important;border-radius:50%;background:currentColor!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.page-home .home-build-story .feature-actions a.build-watch:focus-visible,html body.page-home .text-link:focus-visible,html body .model-contact:focus-visible,html body .product-secondary>a:focus-visible,html body.page-home .home-build-story .feature-actions a:not(.build-watch):focus-visible,html body .review-design-link:focus-visible,html body .help-back:focus-visible,html body .journey-link:focus-visible,html body .editorial-links a:focus-visible,html body .founder-links a:focus-visible,html body .fan-compare-side>a:not(.fan-compare-image-link):focus-visible,html body.page-creations p>a[href$="#test-notes"]:only-child:focus-visible,html body .pw-all:focus-visible,html body .rail-all:focus-visible,html body .wb-rail-all:focus-visible,html body .product-guide-link a:focus-visible,html body .bento-note-link:focus-visible,html body .custom-note-link:focus-visible,html body .wwu-review-link a:focus-visible,html body .wwu-kit-link:focus-visible,html body.page-work .wwu-go:focus-visible,html body.page-work .wwu-direct ul a:focus-visible,html body.page-work .wwu-review figcaption a:focus-visible,html body.page-work .wwu-proof-link a:focus-visible,html body.page-work .wwu-case-rel:focus-visible,html body .product-case-more:focus-visible,html body .pr-all:focus-visible,html body .workbench-rss-link:focus-visible,html body .privacy-end p>a:focus-visible,html body .channel-link:focus-visible,html body .contact-setup-note a:focus-visible,html body .contact-detail-value a:focus-visible,html body .post-back:focus-visible,html body .post-3d-link:focus-visible,html body .home-oldtech-link:focus-visible,html body .model-page-cta:focus-visible,html body .studio-details-link:focus-visible,html body .home-forum-cta:focus-visible,html body a.ot-btn:focus-visible,html body a.wwu-btn:focus-visible,html body a.btn-primary:focus-visible,html body .product-buy:focus-visible,html body a.product-actionbar-btn:focus-visible,html body .review-etsy-button:focus-visible,html body .hero-shop-link:focus-visible,html body .model-shop:focus-visible,html body .rb-all:focus-visible,html body .wb-link:focus-visible,html body .help-contact>a:focus-visible,html body .post-cta>a:focus-visible,html body .help-end-link:focus-visible,html body .mto-cta a:focus-visible,html body .help-toc-back:focus-visible,html body .help-toc-help:focus-visible,html body .help-toc-close:focus-visible,html body .help-shop:focus-visible,html body .help-toc-page:focus-visible,html body .sv-start:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Same page: toward the target (down unless it sits above). */
html body.page-home .text-link[href^="#"]::after,html body .model-contact[href^="#"]::after,html body .product-secondary>a[href^="#"]::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)[href^="#"]::after,html body .review-design-link[href^="#"]::after,html body .help-back[href^="#"]::after,html body .journey-link[href^="#"]::after,html body .editorial-links a[href^="#"]::after,html body .founder-links a[href^="#"]::after,html body .fan-compare-side>a:not(.fan-compare-image-link)[href^="#"]::after,html body.page-creations p>a[href$="#test-notes"]:only-child[href^="#"]::after,html body .pw-all[href^="#"]::after,html body .rail-all[href^="#"]::after,html body .wb-rail-all[href^="#"]::after,html body .product-guide-link a[href^="#"]::after,html body .bento-note-link[href^="#"]::after,html body .custom-note-link[href^="#"]::after,html body .wwu-review-link a[href^="#"]::after,html body .wwu-kit-link[href^="#"]::after,html body.page-work .wwu-go[href^="#"]::after,html body.page-work .wwu-direct ul a[href^="#"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after,html body.page-work .wwu-proof-link a[href^="#"]::after,html body.page-work .wwu-case-rel[href^="#"]::after,html body .product-case-more[href^="#"]::after,html body .pr-all[href^="#"]::after,html body .workbench-rss-link[href^="#"]::after,html body .privacy-end p>a[href^="#"]::after,html body .channel-link[href^="#"]::after,html body .contact-setup-note a[href^="#"]::after,html body .post-back[href^="#"]::after,html body .post-3d-link[href^="#"]::after,html body .home-oldtech-link[href^="#"]::after,html body .model-page-cta[href^="#"]::after,html body .studio-details-link[href^="#"]::after,html body .home-forum-cta[href^="#"]::after,html body a.ot-btn[href^="#"]::after,html body a.wwu-btn[href^="#"]::after,html body a.btn-primary[href^="#"]::after,html body .product-buy[href^="#"]::after,html body a.product-actionbar-btn[href^="#"]::after,html body .review-etsy-button[href^="#"]::after,html body .hero-shop-link[href^="#"]::after,html body .model-shop[href^="#"]::after,html body .rb-all[href^="#"]::after,html body .wb-link[href^="#"]::after,html body .help-contact>a[href^="#"]::after,html body .post-cta>a[href^="#"]::after,html body .help-end-link[href^="#"]::after,html body .mto-cta a[href^="#"]::after,html body .help-toc-help[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
html body .help-back[href="#your-product"]::after,html body .help-toc-back[href="#your-product"]::after,html body .help-toc-close::after,html body .help-end-link[href="#your-product"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* [creations] comparison "Explore this mount" opens the preview: a pop-up. */
html body.page-creations:not(.page-product) .fan-compare-side>a:not(.fan-compare-image-link)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* "Start step-by-step setup" (Help and product pages) opens the step viewer: a pop-up. */
html body .sv-start::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* Smaller versions: inside review cards and the sticky product action bar. */
html body .review-design-link{padding:8px 40px 8px 14px!important;min-height:36px;font-size:12.5px!important;border-radius:10px!important}
html body .review-design-link::after,html body a.product-actionbar-btn::after{width:24px!important;height:24px!important;right:6px!important}
html body a.product-actionbar-btn{min-height:36px;padding-right:38px!important}
html body .review-design-link strong{font-weight:600}
/* Hero chapter tiles: same filled circle; Channel and Community scroll down the page. */
.page-home .hero-chapters a:not(.hero-chapter-out) .ui-arrow{background:#f4f4f1;color:#151515;border-color:#f4f4f1!important}

/* Plain text links that sat in the pill list: give them the whole button. */
html body .rb-all,html body .hero-shop-link{padding:12px 54px 12px 18px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important}
/* The forum call to action keeps its own padding rule; make room for the circle. */
html body.page-home .forum-stage .forum-stage-cta .home-forum-cta{padding-right:62px!important}
/* [creations] preview: keep the studio's own show/hide for these two (single-column studio shows Details, hides Ask). */
html body #modelPreview.is-studio .studio-details-link{display:none!important}
html body #modelPreview .model-contact{display:none!important}
@media (min-width: 761px) and (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html body #modelPreview .model-contact{display:inline-block!important}
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .studio-details-link{display:inline-flex!important}
  html body #modelPreview .model-contact{display:none!important}
}
@media (max-width: 760px) {
  html body #modelPreview .studio-details-link,html body #modelPreview .model-shop{padding-right:40px!important;white-space:nowrap}
  html body #modelPreview .studio-details-link::after,html body #modelPreview .model-shop::after{width:26px!important;height:26px!important;right:7px!important}
}
html body .channel-link{white-space:nowrap!important;flex:none}

/* Header: [creations] keeps its lowercase brand spelling inside the uppercase nav (owner 2026-10-11). */
html body #mainNav .nav-links a[href="https://creations.bankasimedia.com/"]{text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
/* Footer column headings glow like the current-page link (owner 2026-10-11; weight stays 700). */
html body .footer-col .footer-heading{color:#fff!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}

/* BANKASI MEDIA lockup (owner 2026-10-13): 800 extra bold, MEDIA cap-top on BANKASI's cap-top line.
   MEDIA sits on the baseline and is raised by cap height x (size ratio - 1), in its own em:
   main 0.71 x (16.8/7.36 - 1) = .911em (Geist); [creations] 0.70 x (1/.58 - 1) = .507em (DM Sans).
   [creations] uses 'DM Sans Print' (same DM Sans file, 100-1000) because its 'DM Sans' face stops at 700. */
html body #mainNav .nav-logo,html body footer .nav-logo{align-items:baseline!important}
html body .nav-logo .logo-main{font-weight:800!important}
html body .nav-logo .logo-sup{font-weight:800!important;vertical-align:baseline!important;position:relative!important;top:-.911em!important;margin-top:0!important}
html body .creations-parent-name,html body .creations-parent-name sup{font-weight:800!important;font-family:'DM Sans Print','DM Sans',sans-serif!important}
html body .creations-parent-name sup{vertical-align:baseline!important;position:relative!important;top:-.507em!important}
/* [creations] wordmark (owner 2026-10-13): 500 medium in the header, hero (incl. the loading mark and typewriter layers) and footer, was 300. */
html body.page-creations .creations-bracket{font-weight:500!important}
/* /assets/css/qol-pages-v1.css */
/* Quality-of-life fixes for the smaller content pages (owner-approved 2026-10-06). Loaded last on About, Contact,
   Mission, Privacy and the 404 page; every rule is scoped to its page. */

/* Mission: one page edge (the nav's gutter) for hero, statement, pillars and call to action; a readable intro. */
.page-mission .statement-section { background: none; }
.page-mission .statement-body { max-width: 780px; border-top-color: rgba(255, 255, 255, .16); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.8; color: rgba(242, 242, 240, .84); }
.page-mission .pillar-desc { color: rgba(242, 242, 240, .72); font-size: 15px; }
.page-mission .cta-section { border-top-color: rgba(255, 255, 255, .1); }
.page-mission .pillars-grid { border: 0; }

/* Privacy: the standard header and footer; the reading column sits on the light page surface under the nav. */
.page-privacy #main-content { padding-top: var(--nav-h, 76px); }
.page-privacy .privacy-reading { padding-top: clamp(40px, 6vw, 72px); }
.page-privacy .privacy-reading h1 { margin-top: 0; }
.page-privacy .privacy-end { margin-top: 48px; padding-top: 24px; border-top: 1px solid #cdd2c5; }
.page-privacy .privacy-end p { margin: 0 0 8px; }

/* Contact: every field has the same inner padding, border and radius as the inquiry select. */
.page-contact .form-group input,
.page-contact .form-group textarea,
.page-contact .form-group select {
  box-sizing: border-box; padding: 12px 14px; border: 1px solid #777; border-radius: 8px; background-color: #fafafa;
  font-size: 16px; line-height: 1.4; color: #151515;
}
.page-contact .form-group input:focus,
.page-contact .form-group textarea:focus,
.page-contact .form-group select:focus { border-color: #151515; box-shadow: 0 0 0 3px rgba(21, 21, 21, .08); outline: none; }
.page-contact .form-group input::placeholder,
.page-contact .form-group textarea::placeholder { font-size: 15px; color: rgba(0, 0, 0, .42); }
.page-contact .form-group textarea { min-height: 140px; }

/* About: the product render in "A closer look" sits on a neutral panel graded to match its own studio background (no white strips). */
.page-about .about-photo-card .about-product-photo { object-fit: contain; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .02)), linear-gradient(90deg, #f7f7f7, #f1f1f1); }

/* 404: inline search (site-search-v2.js) and a way into Help's product picker. */
.page-404 .recovery-search { margin: 32px 0 8px; }
.page-404 .recovery-search .site-search-results:empty { display: none; }
.page-404 .recovery-guide {
  display: inline-flex; flex-direction: column; gap: 4px; margin: 20px 0 4px; padding: 14px 20px; border: 1px solid #d0d4c9;
  border-radius: 12px; background: #faf9f6; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.page-404 .recovery-guide:hover { border-color: #151515; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.page-404 .recovery-guide-kicker { font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-404 .recovery-guide-label { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.3 'DM Sans', sans-serif; color: #151515; }
.page-404 .recovery-guide-label .ui-arrow { width: 16px; height: 16px; }

/* Contact (owner-approved 2026-10-06): a quiet "Already have your part? Setup guides" line above the form, and
   the prefilled design box links to the design's page and its setup guide (product-inquiry-v2.js). */
.page-contact .contact-setup-note { margin: 0 0 22px; font: 400 14px/1.6 'DM Sans', sans-serif; color: #5f5d58; }
.page-contact .contact-setup-note a { display: inline-flex; align-items: center; gap: 2px; color: #151515; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(21, 21, 21, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.page-contact .contact-setup-note a:hover { text-decoration-color: #151515; }
.page-contact .inquiry-design-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.page-contact .inquiry-design-links a { display: inline-flex; align-items: center; gap: 2px; }

/* Mission (owner-approved 2026-10-06): each pillar word links to its proof ([creations], Workbench, YouTube) with a
   small caption under the word; colour-only hover, no lift. */
.page-mission .pillar-link { display: inline-block; color: inherit; text-decoration: none; }
.page-mission .pillar-link em { transition: color .2s; }
.page-mission .pillar-proof { display: flex; align-items: center; gap: 2px; margin-top: 14px; font: 500 13.5px/1.3 'DM Sans', sans-serif; font-style: normal; letter-spacing: .01em; color: #b4b4ae; text-decoration: underline; text-decoration-color: rgba(180, 180, 174, .35); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.page-mission .pillar-link:hover em { color: #fff; }
.page-mission .pillar-link:hover .pillar-proof { color: #f2f2f0; text-decoration-color: currentColor; }
.page-mission .pillar-link:focus-visible { outline: 1px solid #f2f2f0; outline-offset: 6px; }

/* ---------------------------------------------------------------------------------------------------------------
   Secondary-page fixes (2026-10-09).
   One column edge: every section of About, Contact, Mission, Privacy and the 404 page starts on the nav gutter, and
   from 1464 px the content (hero included) sits in one centred 1320 px column, the same rule as the Workbench hero
   and the Help hero. Before, heroes used the gutter while the content below was centred at 1000-1200 px, so the two
   edges disagreed by 50-260 px on desktop. */
.page-about, .page-contact, .page-mission, .page-privacy, .page-404 {
  --pc-edge: max(var(--page-gutter, 24px), calc((100% - 1320px) / 2));
}
.page-about #main-content > *,
.page-contact #main-content > *,
.page-mission #main-content > * { padding-left: var(--pc-edge) !important; padding-right: var(--pc-edge) !important; }

/* About: inner blocks fill the column instead of re-centring at their own widths. */
.page-about .founder-inner,
.page-about .story-grid,
.page-about .about-section-head,
.page-about .journey-years,
.page-about .journey-track,
.page-about .about-photo-grid,
.page-about .about-shop-note { max-width: none; margin-left: 0; margin-right: 0; }
/* The opening paragraphs share the founder profile's two columns, so both text columns start on one line. */
.page-about .story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.page-about .story-body { max-width: 62ch; }
.page-about .story-stat { padding-top: calc(2rem + 1px); }
.page-about .about-closing h2 { text-wrap: balance; }
@media (max-width: 760px) { .page-about .story-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Mission: one continuous charcoal surface (the hero was #171717 on top of the body gradient, so a seam showed under
   it and between sections); rules stay inside the column; tighter two-line statement. */
.page-mission #main-content { background: #151515; }
.page-mission .mission-hero { background: none; }
.page-mission .mission-hero::before { display: none; }
.page-mission .statement-section, .page-mission .pillars-section, .page-mission .cta-section { border-top: 0; }
.page-mission .cta-section { position: relative; }
.page-mission .cta-section::before { content: ''; position: absolute; top: 0; left: var(--pc-edge); right: var(--pc-edge); height: 1px; background: rgba(255, 255, 255, .12); }
.page-mission .mission-hero h1 { line-height: 1; }
.page-mission .pillars-kicker { font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: #b4b4ae; font-weight: 400; margin-bottom: .8rem; }
.page-mission .pillars-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: #f2f2f0; line-height: 1.1; text-wrap: balance; }

/* Contact: the inquiry select matches the text fields (same inset and size, a drawn chevron instead of the
   platform arrow, which sat at a different inset on every browser). */
.page-contact .form-group select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; font-size: 16px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.page-contact .form-group select:invalid { color: rgba(0, 0, 0, .42); }
.page-contact .form-group select option { color: #151515; }

/* 404: the inline search took the phone search sheet's 100dvh height (an empty 800 px panel under one line of
   results); it stays a normal box on the page. Content starts on the column edge. */
.page-404 .site-search-inline { width: 100%; max-width: 640px; height: auto; max-height: none; border: 1px solid #d7d4ce; border-radius: 14px; }
.page-404 .recovery-simple { max-width: none; margin: 0; padding-left: var(--pc-edge); padding-right: var(--pc-edge); }
.page-404 .recovery-simple nav { max-width: 640px; }

/* Privacy: every topic is its own section with the same rule and spacing. */
.page-privacy .privacy-reading .panel { margin-top: 40px; padding-top: 36px; }
.page-privacy .privacy-reading .panel > h2 + p { margin-top: 0; }
.page-privacy .privacy-reading .panel > p + h2 { margin-top: 36px; }
.page-privacy .privacy-reading h1 { text-wrap: balance; }
.page-privacy .privacy-questions { margin-top: 40px; }
.page-about .story-sticky { position: static; align-self: start; }
.page-about .nowrap { white-space: nowrap; }
/* /assets/css/qol-pages-v2.css */
/* Secondary pages, quality of life (2026-10-09). Loaded after qol-pages-v1.css on About, Contact, Mission, Privacy
   and the 404 page; every rule is scoped to its page. Reuses existing site patterns: the homepage hero's frosted
   chapter tiles (home-refresh-v1.css), the 404 setup-guide card, and the product-page "On this page" index.
   Hovers change border, glow or colour only. */

/* About: three frosted chapter tiles in the hero (same tile, border, blur and round arrow as the homepage hero),
   leading to the founder profile, the timeline and the workshop. */
.page-about .about-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.page-about .about-chapters a {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px;
  padding: 16px 76px 16px 22px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px; background: rgba(24, 26, 29, .52);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  color: #fff; text-decoration: none; transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.page-about .about-chapters a:hover { background: rgba(44, 47, 52, .66); border-color: rgba(255, 255, 255, .62); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(214, 228, 242, .14); }
.page-about .about-chapters a:focus-visible { outline: 2px solid #f2f2f0; outline-offset: 3px; }
.page-about .about-chapter-kicker { font: 500 11px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c9d1d8; }
.page-about .about-chapter-label { font: 500 17px/1.25 'DM Sans', sans-serif; letter-spacing: -.005em; color: #fff; }
.page-about .about-chapter-label .ui-arrow {
  position: absolute; right: 20px; top: 50%; width: 38px; height: 38px; padding: 10px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; transform: translateY(-50%); transition: background-color .25s, border-color .25s;
}
.page-about .about-chapters a:hover .ui-arrow { background: rgba(255, 255, 255, .12); border-color: #fff; }
.page-about #chapters, .page-about #workshop { scroll-margin-top: 84px; }
@media (max-width: 760px) {
  .page-about .about-chapters { grid-template-columns: 1fr; gap: 8px; margin-top: 28px; }
  .page-about .about-chapters a { min-height: 60px; padding: 12px 64px 12px 16px; gap: 3px; }
  .page-about .about-chapter-kicker { font-size: 10px; }
  .page-about .about-chapter-label { font-size: 15px; }
  .page-about .about-chapter-label .ui-arrow { right: 14px; width: 34px; height: 34px; padding: 9px; }
}

/* Contact: Copy beside the email address (product-inquiry-v4.js); it wraps under the address in narrow columns. */
.page-contact .contact-detail-value:has(.contact-copy) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.page-contact .contact-copy {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px;
  border: 1px solid #cfd0ca; border-radius: 999px; background: #faf9f6; color: #3d3d3a; cursor: pointer;
  font: 500 12px/1.2 'DM Sans', sans-serif; letter-spacing: .02em; transition: border-color .2s, color .2s, background-color .2s;
}
.page-contact .contact-copy svg { width: 14px; height: 14px; }
.page-contact .contact-copy:hover { border-color: #151515; color: #151515; }
.page-contact .contact-copy.is-copied { border-color: #151515; background: #151515; color: #f4f3ef; }
.page-contact .contact-copy:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }

/* Contact: "Quicker answers" in the side column, as the 404 page's setup-guide cards. */
.page-contact .contact-quick { display: grid; gap: 10px; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(0, 0, 0, .1); }
.page-contact .contact-quick .contact-detail-label { margin: 0 0 4px; font-weight: 400; }
.page-contact .contact-quick a {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 18px; border: 1px solid #d0d4c9; border-radius: 12px; background: #faf9f6;
  color: #151515; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.page-contact .contact-quick a:hover { border-color: #151515; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.page-contact .contact-quick a:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
.page-contact .contact-quick-kicker { font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-contact .contact-quick-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 15px/1.35 'DM Sans', sans-serif; }
.page-contact .contact-quick-label .ui-arrow { width: 16px; height: 16px; flex: none; }

/* Contact: the prefilled design box (product-inquiry-v4.js) as a small card with the design's [creations] picture. */
.page-contact .inquiry-design-reference { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid #d0d4c9; border-radius: 14px; background: #faf9f6; }
.page-contact .inquiry-design-reference.has-image { grid-template-columns: 88px minmax(0, 1fr); padding: 12px 18px 12px 12px; }
.page-contact .inquiry-design-image { display: block; width: 88px; height: 88px; object-fit: contain; border-radius: 10px; background: #f6f6f5; }
.page-contact .inquiry-design-reference .section-label { margin: 0 0 4px; font: 500 10.5px/1.3 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-contact .inquiry-design-text > p:nth-child(2) { margin: 0 0 6px; font: 500 16px/1.35 'DM Sans', sans-serif; color: #151515; }
.page-contact .inquiry-design-text .inquiry-design-links { margin: 0; }

/* Privacy: "On this page" contents. Phones/tablets: a compact numbered list under the introduction. From 1200 px:
   a sticky index in the left column beside the reading column (the product pages' "On this page" look). */
.page-privacy .privacy-toc { margin: 8px 0 8px; padding: 18px 20px 14px; border: 1px solid #d0d4c9; border-radius: 14px; background: #faf9f6; }
.page-privacy .privacy-toc-title { margin: 0 0 8px !important; font: 500 10.5px/1.3 'DM Sans', sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: #6b675f; }
.page-privacy .privacy-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: ptoc; }
.page-privacy .privacy-toc li { counter-increment: ptoc; border-top: 1px solid #e3e5de; }
.page-privacy .privacy-toc li:first-child { border-top: 0; }
.page-privacy .privacy-toc a { display: flex; gap: 12px; padding: 9px 0; font: 400 14.5px/1.4 'DM Sans', sans-serif; color: #343830; text-decoration: none; transition: color .2s; }
.page-privacy .privacy-toc a::before { content: counter(ptoc, decimal-leading-zero); min-width: 20px; font-variant-numeric: tabular-nums; color: #8a8d84; }
.page-privacy .privacy-toc a:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.page-privacy .privacy-reading .panel { scroll-margin-top: 92px; }
@media (min-width: 1200px) {
  .page-privacy .privacy-reading {
    display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 712px) minmax(0, 1fr); column-gap: 48px; align-content: start;
    max-width: none; margin: 0; padding-left: var(--pc-edge); padding-right: var(--pc-edge);
  }
  .page-privacy .privacy-reading > * { grid-column: 2; }
  .page-privacy .privacy-reading > .privacy-toc { grid-column: 1; grid-row: 1 / span 40; align-self: stretch; max-width: 220px; margin: 0; padding: 14px 0 0; border: 0; border-radius: 0; background: none; }
  .page-privacy .privacy-toc-inner { position: sticky; top: 104px; }
  .page-privacy .privacy-toc li { border-top: 0; }
  .page-privacy .privacy-toc a { padding: 6px 0; font-size: 13.5px; color: #5d6058; }
}

/* Partner links (owner 2026-10-10: Work with us must be easy to find): About's hero has a fourth tile (2 x 2 on
   tablets), Contact links it in the hero line, above the form and first in Quicker answers. */
@media (min-width: 1101px) { .page-about .about-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .page-about .about-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fifth tile, Old tech (2026-10-10): five across on desktop; on tablets it takes the full last row. */
@media (min-width: 1101px) { .page-about .about-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .page-about .about-chapters a:nth-child(5):last-child { grid-column: 1 / -1; } }
.page-contact .contact-hero-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.page-contact .contact-hero-link:hover { text-decoration-color: currentColor; }
.page-contact .contact-partner-note { margin-bottom: 6px; }

/* Privacy on phones (owner 2026-10-11): privacy-v1.js folds each section like a Help question; the folded headings
   replace the "On this page" box. */
@media (max-width: 760px) {
  .page-privacy .privacy-reading.is-folding > .privacy-toc { display: none; }
  .page-privacy .privacy-reading.is-folding .panel { margin-top: 0; padding: 0; }
  .page-privacy .privacy-reading.is-folding > .panel:first-of-type { margin-top: 28px; }
  .page-privacy .privacy-reading.is-folding .panel:last-of-type { border-bottom: 1px solid #cdd2c5; }
  .page-privacy .privacy-reading.is-folding .panel > h2 { margin: 0; font-size: 20px; }
  .page-privacy .privacy-fold { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 64px; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .page-privacy .privacy-fold:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
  .page-privacy .privacy-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
  .page-privacy .privacy-plus::before, .page-privacy .privacy-plus::after { content: ''; position: absolute; left: 1px; top: 7px; width: 14px; height: 1.5px; background: currentColor; }
  .page-privacy .privacy-plus::after { transform: rotate(90deg); }
  .page-privacy .panel.is-open .privacy-plus::after { display: none; }
  .page-privacy .privacy-fold-body { padding: 0 0 10px; }
}


/* Link buttons on Contact and 404 (owner 2026-10-11): the cards, the way-back links and Send message use the
   filled circle with the arrow cut out (up-right to another page, right to send), like site-refresh-v1.css. */
.page-contact .contact-quick a, .page-404 .recovery-guide { position: relative; padding-right: 60px; }
.page-contact .contact-quick a .ui-arrow, .page-404 .recovery-guide .ui-arrow { display: none; }
.page-contact .contact-quick a::after, .page-404 .recovery-guide::after { content:"";position:absolute;top:50%;right:14px;width:30px;height:30px;translate:0 -50%;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat; color: #151515; }
.page-contact .contact-form .btn-submit { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 12px 56px 12px 22px; border-radius: 12px; text-transform: none; letter-spacing: 0; font: 500 15px/1.2 'DM Sans', sans-serif; }
.page-contact .contact-form .btn-submit::after { content:"";position:absolute;top:50%;right:7px;width:32px;height:32px;translate:0 -50%;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.page-404 .recovery-simple nav { gap: 10px; padding: 24px 0; }
.page-404 .recovery-simple nav a { position: relative; display: inline-flex; align-items: center; min-height: 46px; box-sizing: border-box; padding: 12px 54px 12px 18px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); font: 500 14px/1.2 'DM Sans', sans-serif; text-decoration: none; transition: border-color .2s; }
.page-404 .recovery-simple nav a:hover { border-color: currentColor; }
.page-404 .recovery-simple nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.page-404 .recovery-simple nav a::after { content:"";position:absolute;top:50%;right:7px;width:32px;height:32px;translate:0 -50%;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* 404 on phones: recovery-v1.js keeps the first five search results and adds "Show all N results". */
.page-404 .recovery-search .is-extra { display: none !important; }
.page-404 .recovery-more-row { list-style: none; padding: 6px 8px 8px; }
.page-404 .recovery-more { width: 100%; min-height: 44px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px; background: none; color: #151515; font: 500 14px/1.2 'DM Sans', sans-serif; cursor: pointer; }
.page-404 .recovery-more:hover { border-color: #151515; }
.page-404 .recovery-more:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }

/* Contact on phones: Quicker answers come before the form, so order questions find their answer first. */
@media (max-width: 760px) {
  .page-contact .contact-grid { display: flex; flex-direction: column; gap: 0; }
  .page-contact .contact-grid > div:first-child { width: 100%; margin-bottom: 48px; }
  .page-contact .contact-info { display: contents; }
  .page-contact .contact-quick { order: -1; margin: 0 0 40px; padding-top: 0; border-top: 0; }
  .page-contact .contact-info > h2 { margin-top: 16px; }
}
/* /assets/creations/product-page-v1.css */
/* [creations] product pages (generated by scripts/build_products.py). Warm off-white, charcoal,
   Cormorant section titles and DM Sans product names, matching the collection. No hover lift. */
.page-product{color:#151515}
.page-product main{padding:calc(var(--nav-h,76px) + 28px) clamp(16px,4vw,56px) clamp(56px,8vw,110px);max-width:1280px;margin:0 auto}
.product-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 clamp(20px,3vw,36px);padding:0;list-style:none;font:400 12px/1.4 'DM Sans',sans-serif;letter-spacing:.04em;color:#6b6862}
.product-breadcrumb li+li:before{content:"/";margin-right:6px;color:#aaa59d}
.product-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.product-breadcrumb a:hover{color:#151515;border-color:currentColor}
.product-breadcrumb [aria-current]{color:#151515}

.product-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.product-stage{position:relative;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle at 50% 42%,#fff 0,#f1efea 58%,#e6e3dc 100%);border:1px solid #e1ddd5;overflow:hidden}
.product-stage img,.product-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-stage canvas{opacity:0;transition:opacity .35s}
.product-stage.is-ready canvas{opacity:1}
.product-stage.is-ready img{opacity:0;transition:opacity .35s .1s}
@media(max-width: 0px){.product-stage canvas{display:none}.product-stage.is-ready img{opacity:1}}

.product-spec{margin:0 0 12px;font:500 11px/1.5 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5d5a55}
.product-title{margin:0 0 14px;font:500 clamp(30px,3.6vw,48px)/1.08 'DM Sans',sans-serif;letter-spacing:-.02em;color:#151515}
.page-product .product-summary .stock-badge{margin:0 0 18px}
.product-description{margin:0 0 14px;font:400 16px/1.7 'DM Sans',sans-serif;color:#2c2b29;max-width:60ch}
.product-note{margin:0 0 18px;font:400 13px/1.7 'DM Sans',sans-serif;color:#5f5c57;max-width:62ch}
.product-credit{margin:0 0 18px;font:400 12px/1.5 'DM Sans',sans-serif}
.product-credit a{color:#3a3a3a;text-underline-offset:3px}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:8px 0 18px}
.product-buy{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid #555;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-buy:hover{border-color:#aaa;box-shadow:0 0 0 3px #1515151a}
.product-buy:focus-visible,.product-secondary a:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-secondary{display:flex;flex-wrap:wrap;gap:8px 20px}
.product-secondary a{font:500 13px/1.4 'DM Sans',sans-serif;color:#222;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.product-secondary a:hover{text-decoration-thickness:2px}
.product-material{margin:0;font:400 12px/1.6 'DM Sans',sans-serif;color:#6b6862}
.product-soon{flex-basis:100%;margin:0;font:500 12px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#4a4a4a}
.product-notify{flex-basis:100%;max-width:460px}
.product-notify label{display:block;margin:0 0 8px;font:400 14px/1.4 'DM Sans',sans-serif;color:#2c2b29}
.product-notify-row{display:flex;gap:8px}
.product-notify input[type=email]{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid #c9c6c0;background:#fff;color:#151515;font:400 15px 'DM Sans',sans-serif}
.product-notify input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
.product-notify button{height:46px;padding:0 20px;border:1px solid #555;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.product-notify button:hover{border-color:#aaa}
.product-notify button:disabled{opacity:.6;cursor:progress}
.product-notify-status{min-height:1em;margin:8px 0 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#4a4a4a}
.product-notify.is-sent .product-notify-row,.product-notify.is-sent label{display:none}
.product-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.product-section-title{margin:0 0 14px;font:300 clamp(28px,3vw,38px)/1.1 'Cormorant Garamond',serif;color:#151515;letter-spacing:-.01em}
.product-section-intro{margin:-6px 0 18px;font:400 14px/1.6 'DM Sans',sans-serif;color:#5f5c57}
.product-intent,.product-guide,.product-video,.product-related{margin-top:clamp(52px,7vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1px solid #dcd8d0}
.product-related ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.product-related a{display:flex;flex-direction:column;gap:8px;height:100%;padding:10px 10px 14px;border:1px solid #e1ddd5;border-radius:12px;background:#faf9f6;color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-related a:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.product-related a:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-related img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:8px;background:#f1efea}
.product-related ul{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product-related-spec{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b6862}
.product-related-title{font:500 16px/1.3 'DM Sans',sans-serif}
.product-intent p{max-width:68ch;margin:0;font:400 17px/1.75 'DM Sans',sans-serif;color:#2c2b29}

.product-guide .help-answer{max-width:none}
.product-guide .help-answer ul{max-width:72ch;margin:0 0 30px;padding-left:20px;font:400 15px/1.75 'DM Sans',sans-serif;color:#2c2b29}
.product-guide .help-answer>p{max-width:72ch;font:400 14px/1.75 'DM Sans',sans-serif;color:#4a4844}
.product-guide .help-answer .install-steps{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));max-width:none}
.product-guide-link{margin:18px 0 0;font:500 13px 'DM Sans',sans-serif}
.product-guide-link a{color:#222;text-underline-offset:4px}

.product-video-card{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:center;max-width:860px;padding:12px;border:1px solid #e1ddd5;border-radius:14px;background:#faf9f6;color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-video-card:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.product-video-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.product-video-card strong{display:block;margin-bottom:8px;font:500 17px/1.35 'DM Sans',sans-serif}
.product-video-card small{display:block;font:400 14px/1.6 'DM Sans',sans-serif;color:#4a4844}

@media(max-width:900px){.product-hero{grid-template-columns:1fr}.product-stage{max-width:560px;width:100%;margin:0 auto}}
@media(max-width:560px){.product-video-card{grid-template-columns:1fr}.product-notify-row{flex-direction:column}.product-notify button{width:100%}.product-buy{width:100%}}

/* In-page viewer: the views play here, with the same View buttons and drag behaviour as the collection preview. */
.product-viewer{min-width:0}
.product-stage{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* D9 (product-viewer-v9): GPU-height stages also let vertical swipes scroll the page; the viewer takes the swipe only
   when it starts on the model or after a short hold. */
.product-stage:active{cursor:grabbing}
.product-stage:focus-visible{outline:2px solid #151515;outline-offset:4px}
.product-stage img,.product-stage canvas{pointer-events:none;-webkit-user-drag:none}
.product-viewer-hint{margin:12px 0 0;text-align:center;font:400 12px/1.4 'DM Sans',sans-serif;color:#6b6862}
.product-views{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0}
.product-view-label{flex:none;padding-top:7px;font:400 16px 'DM Sans',sans-serif;color:#151515}
.product-view-rows{display:grid;gap:8px;min-width:0}
.product-view-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.product-view-group{min-width:64px;font:500 11px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b6862}
.product-views button{min-height:36px;padding:8px 12px;border:1px solid #bdbdb7;border-radius:6px;background:transparent;color:#454541;font:400 12px/1.35 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.product-views button:hover{border-color:#6b6862;color:#151515}
.product-views button[aria-pressed="true"]{background:#222;border-color:#222;color:#fff}
.product-views button:focus-visible{outline:2px solid #151515;outline-offset:2px}
@media(max-width:560px){.product-views{flex-direction:column;gap:8px}.product-view-label{padding-top:0}}

/* Previous version of a design (EliteDesk legacy four-fan mount): a quiet "See legacy version" fold-out with its own
   in-place viewer (started only when opened) and a short what-changed table. No hover lift. */
.product-legacy{margin-top:clamp(40px,5vw,64px)}
.product-legacy-fold{border:1px solid #dcd8d0;border-radius:14px;background:#faf9f6}
.product-legacy-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px clamp(16px,2.4vw,26px);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.product-legacy-fold>summary::-webkit-details-marker{display:none}
.product-legacy-fold>summary:hover{box-shadow:0 0 0 3px #b9c6d633}
.product-legacy-fold>summary:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-legacy-kicker{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6862}
.product-legacy-cta{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#151515}
.product-legacy-cta:after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.product-legacy-fold[open] .product-legacy-cta:after{margin-top:3px;transform:rotate(-135deg)}
.product-legacy-body{padding:0 clamp(16px,2.4vw,26px) clamp(20px,3vw,30px)}
.product-legacy-summary{max-width:68ch;margin:0 0 22px;font:400 15px/1.7 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,48px);align-items:start}
.product-legacy-viewer .product-stage{max-width:460px}
.product-legacy-compare table{width:100%;border-collapse:collapse;font:400 14px/1.55 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-compare caption{text-align:left;margin:0 0 10px;font:300 26px/1.1 'Cormorant Garamond',serif;color:#151515}
.product-legacy-compare th,.product-legacy-compare td{padding:11px 12px 11px 0;border-bottom:1px solid #e1ddd5;text-align:left;vertical-align:top}
.product-legacy-compare thead th{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862}
.product-legacy-compare tbody th{width:24%;font:500 13px/1.5 'DM Sans',sans-serif;color:#151515}
.product-legacy-compare td:first-of-type{color:#6b6862}
.product-legacy-compare td:last-child{color:#151515;font-weight:500}
.product-legacy-guide{margin:16px 0 0;font:500 13px 'DM Sans',sans-serif}
.product-legacy-guide a{color:#222;text-underline-offset:4px}
@media(max-width:900px){.product-legacy-grid{grid-template-columns:1fr}.product-legacy-viewer .product-stage{margin:0 auto}}
@media(max-width:560px){.product-legacy-fold>summary{flex-wrap:wrap;gap:6px}.product-legacy-cta{margin-left:0}.product-legacy-compare tbody th{width:30%}}
@media(max-width: 0px){.product-legacy-cta:after{transition:none}}

/* Studio viewer (owner 2026-10-04: same studio design as the [creations] preview; product-viewer-v4 adds .is-studio; since
   v9 / audit Q13 the rules key on [data-product-viewer] so the studio layout and its dock height are in place before the
   script runs, which removes the layout shift when it starts).
   The viewer is the studio: the stage fills it on the render's own ground (--stage-bg) with no frame, the View choices
   float in a frosted dock over its bottom edge, the canvas sits above the dock, and the hint disappears after the first
   interaction. Phones: the studio runs edge to edge. No hover lift. */
.product-viewer[data-product-viewer]{--stage-bg:#f7f7f6;--dock-h:56px;position:relative;aspect-ratio:1/1.06;border-radius:24px;overflow:hidden;background:var(--stage-bg);transition:background-color .4s ease;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.06)}
.product-viewer[data-product-viewer] .product-stage{position:absolute;inset:0;aspect-ratio:auto;max-width:none;margin:0;border:0;border-radius:0;background:transparent}
.product-viewer[data-product-viewer] .product-stage img,.product-viewer[data-product-viewer] .product-stage canvas{inset:28px 20px auto 20px;height:calc(100% - var(--dock-h) - 92px);width:calc(100% - 40px)}
.product-viewer[data-product-viewer] .product-stage:focus-visible{outline:2px solid #151515;outline-offset:-4px}
.product-viewer[data-product-viewer] .product-viewer-hint{position:absolute;z-index:3;left:50%;bottom:calc(var(--dock-h) + 30px);transform:translateX(-50%);margin:0;white-space:nowrap;pointer-events:none;color:#4a4a46;font:400 12.5px/1.35 'DM Sans',sans-serif;text-shadow:0 0 6px var(--stage-bg),0 0 2px var(--stage-bg);transition:opacity .35s ease,visibility 0s linear .35s}
.product-viewer[data-product-viewer].is-touched .product-viewer-hint{opacity:0;visibility:hidden}
.product-viewer[data-product-viewer] .product-views{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);margin:0;padding:6px;display:block;border:1px solid rgba(0,0,0,.07);border-radius:18px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 14px 44px rgba(0,0,0,.13),0 1px 0 rgba(255,255,255,.7) inset}
.product-viewer[data-product-viewer] .product-view-label{display:none}
.product-viewer[data-product-viewer] .product-view-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px}
.product-viewer[data-product-viewer] .product-view-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.product-viewer[data-product-viewer] .product-view-row+.product-view-row{padding-left:12px;border-left:1px solid rgba(0,0,0,.1)}
.product-viewer[data-product-viewer] .product-view-group{min-width:0;padding:0 5px 0 7px;font:500 10.5px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6a66;white-space:nowrap}
.product-viewer[data-product-viewer] .product-view-group:empty{display:none}
.product-viewer[data-product-viewer] .product-views button{min-height:36px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:#33332f;font:500 13px/1.2 'DM Sans',sans-serif;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.product-viewer[data-product-viewer] .product-views button:hover{background:rgba(0,0,0,.06);border-color:transparent}
.product-viewer[data-product-viewer] .product-views button[aria-pressed="true"]{background:#151515;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.product-viewer[data-product-viewer] .product-views button:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-legacy-viewer[data-product-viewer]{max-width:460px}
@media(max-width:900px){.product-viewer[data-product-viewer]{max-width:none;width:100%}}
@media(max-width:760px){
 .product-hero>.product-viewer[data-product-viewer]{width:auto;margin:0 calc(-1 * clamp(16px,4vw,56px));border-radius:0;aspect-ratio:4/5;box-shadow:none}
 .product-viewer[data-product-viewer] .product-stage img,.product-viewer[data-product-viewer] .product-stage canvas{inset:16px 8px auto 8px;width:calc(100% - 16px);height:calc(100% - var(--dock-h) - 70px)}
 .product-viewer[data-product-viewer] .product-viewer-hint{bottom:calc(var(--dock-h) + 22px);font-size:12px}
 .product-viewer[data-product-viewer] .product-views{bottom:10px;width:calc(100% - 20px);max-width:none;padding:5px}
 .product-viewer[data-product-viewer] .product-view-rows{flex-direction:column;flex-wrap:nowrap;gap:4px}
 .product-viewer[data-product-viewer] .product-view-row{display:flex;flex-wrap:nowrap}
 .product-viewer[data-product-viewer] .product-view-row+.product-view-row{padding:4px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.07)}
 .product-viewer[data-product-viewer] .product-view-group{flex:none;width:78px;box-sizing:border-box}
 .product-viewer[data-product-viewer] .product-view-row{overflow-x:auto;scrollbar-width:none}
 .product-viewer[data-product-viewer] .product-view-row::-webkit-scrollbar{display:none}
 .product-viewer[data-product-viewer] .product-view-row.is-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:16px}
 .product-viewer[data-product-viewer] .product-views button{flex:1 0 auto;padding:8px 12px}
}
@media(max-width: 0px){.product-viewer[data-product-viewer],.product-viewer[data-product-viewer] .product-viewer-hint{transition:none}}

/* Legacy: measured test 9 (legacy) vs. test 10 (five-fan) beside the what-changed table (owner 2026-10-04). */
.product-legacy-tested{width:100%;margin-top:26px;border-collapse:collapse;font:400 14px/1.5 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-tested caption{text-align:left;margin:0 0 10px;font:300 26px/1.1 'Cormorant Garamond',serif;color:#151515}
.product-legacy-tested th,.product-legacy-tested td{padding:10px 12px 10px 0;border-bottom:1px solid #e1ddd5;text-align:left;vertical-align:top;white-space:nowrap}
.product-legacy-tested thead th{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862;white-space:normal}
.product-legacy-tested tbody th{font:500 13px/1.5 'DM Sans',sans-serif;color:#151515;white-space:normal}
.product-legacy-tested td:nth-of-type(1){color:#6b6862}
.product-legacy-tested td:last-child strong{color:#1e3346}
.product-legacy-note{margin:10px 0 0;font:400 12px/1.6 'DM Sans',sans-serif;color:#6b6862}

/* Airflow pause/play (product-viewer-v7): airflow views loop on their own; light frosted twin of the hero video's
   pause button, top right of the stage. */
.product-air-toggle{position:absolute;top:14px;right:14px;z-index:4;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(21,21,21,.12);border-radius:50%;background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 16px rgba(0,0,0,.08);color:#151515;cursor:pointer;transition:background .2s,border-color .2s}
.product-air-toggle:hover{background:rgba(255,255,255,.9);border-color:rgba(21,21,21,.24)}
.product-air-toggle:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-air-toggle svg{width:16px;height:16px}
.product-air-toggle .motion-play{display:none;transform:translateX(1px)}
.product-air-toggle[aria-pressed="true"] .motion-play{display:block}
.product-air-toggle[aria-pressed="true"] .motion-pause{display:none}
.product-air-toggle[hidden]{display:none}

/* Wide-screen layout (owner 2026-10-06: put the dark side bars to use). The light page now runs edge to edge; from
   1500 px a sticky collection browser sits on the left and an "On this page" index with previous / next design on the
   right. Below 1500 px the rails are hidden and the page is as before. No lift on hover (house rule). */
.page-product main{max-width:none}
.product-center{max-width:1168px;margin:0 auto;min-width:0}
.product-rail{display:none}
.product-page>header,.product-page>section{scroll-margin-top:calc(var(--nav-h,76px) + 24px)}
@media (min-width:1500px){
 .product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1168px) minmax(0,1fr);column-gap:clamp(36px,3.2vw,72px);align-items:start}
 .product-center{margin:0;max-width:none;width:100%}
 .product-rail{display:block;position:sticky;top:calc(var(--nav-h,76px) + 28px);max-height:calc(100vh - var(--nav-h,76px) - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(21,21,21,.18) transparent}
 .product-rail-browse{justify-self:end;width:min(264px,100%)}
 .product-rail-page{justify-self:start;width:min(264px,100%)}
}
.rail-inner{padding:2px 4px 28px;font-family:'DM Sans',sans-serif}
.rail-eyebrow{margin:0 0 16px;padding-left:8px;font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.rail-eyebrow a{color:#151515;text-decoration:none;letter-spacing:.02em;text-transform:none;font-size:13px;border-bottom:1px solid transparent;transition:border-color .2s}
.rail-eyebrow a:hover{border-color:currentColor}
.product-rail ul{list-style:none;margin:0;padding:0}
.rail-group{margin:0 0 18px}
.rail-group-name{margin:0 0 6px;padding-left:8px;font:500 10.5px/1.4 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#6b675f}
.product-rail-browse li a{display:flex;align-items:center;gap:11px;padding:5px 8px;border-radius:11px;color:#3a3833;text-decoration:none;font:400 13.5px/1.25 'DM Sans',sans-serif;transition:background-color .2s,color .2s,box-shadow .2s}
.product-rail-browse li a:hover{background:rgba(21,21,21,.05);color:#151515}
.product-rail-browse li a:focus-visible,.rail-toc a:focus-visible,.rail-step:focus-visible,.rail-all:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-rail-browse li a[aria-current="page"]{background:#fff;color:#151515;font-weight:500;box-shadow:0 0 0 1px rgba(21,21,21,.08),0 6px 18px rgba(0,0,0,.05)}
.rail-thumb{flex:none;width:38px;height:38px;border-radius:9px;background:#fbfbfa;box-shadow:inset 0 0 0 1px rgba(21,21,21,.06);overflow:hidden}
.rail-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.rail-toc ul{border-left:1px solid rgba(21,21,21,.12)}
.rail-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:#6b675f;text-decoration:none;font:400 14px/1.35 'DM Sans',sans-serif;transition:color .2s,border-color .2s}
.rail-toc a:hover{color:#151515}
.rail-toc a.is-current{color:#151515;font-weight:500;border-left-color:#151515}
.rail-steps{display:grid;gap:10px;margin-top:30px}
.rail-step{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;background:#fff;border:1px solid rgba(21,21,21,.08);color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.rail-step:hover{border-color:rgba(21,21,21,.22);box-shadow:0 10px 26px rgba(0,0,0,.07)}
.rail-step .rail-thumb{width:54px;height:54px;border-radius:11px}
.rail-step-label{display:block;margin-bottom:3px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#6b675f}
.rail-step .rail-name{display:block;font:500 13.5px/1.3 'DM Sans',sans-serif}
.rail-all{display:inline-block;margin:20px 0 0 8px;font:500 13px/1.4 'DM Sans',sans-serif;color:#151515;text-decoration:underline;text-underline-offset:3px}
@media (min-width:1500px){
 /* The design list scrolls inside its rail on shorter screens: soft fade at the edges instead of a hard cut. */
 .product-rail-browse{-webkit-mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent)}
 .product-rail-browse .rail-inner{padding-top:16px}
 .product-rail-browse{top:calc(var(--nav-h,76px) + 12px)}
 .product-rail-browse li a{padding-top:4px;padding-bottom:4px}
 .rail-group{margin-bottom:14px}
}

/* Q13 (product-viewer-v9): reserve the dock's height before the script measures it (it then publishes the exact
   --dock-h). Desktop: one line (50 px) unless four or more choices wrap to two (about 90 px); phones stack one row per
   group (48 px + 45 px per extra row). */
.product-viewer[data-product-viewer]{--dock-h:50px}
@media(min-width:901px){.product-viewer[data-product-viewer]:has(.product-views button:nth-of-type(4)),.product-viewer[data-product-viewer]:has(.product-view-row:nth-child(2) button:nth-of-type(2)){--dock-h:90px}}
@media(max-width:760px){
 .product-viewer[data-product-viewer]{--dock-h:48px}
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(2)){--dock-h:93px}
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(3)){--dock-h:138px}
}
.product-viewer[data-product-viewer]:not(:has(.product-views)){--dock-h:0px}

/* W3 (product-viewer-v9): while autoplay buffers after a stall, a thin ring on the pause/play button fills as the next
   sheets become ready. */
.product-air-toggle .motion-buffer{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);fill:none;stroke:#151515;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 100;opacity:0;transition:opacity .25s ease,stroke-dasharray .3s ease;pointer-events:none}
.product-air-toggle.is-buffering .motion-buffer{opacity:.85}

/* W5 (product-viewer-v9): "See it in 3D" on step cards whose drawing is an installation stage. Quiet chip; colour and
   border change on hover, no lift. */
.install-step-copy .step-3d{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:32px;margin-top:12px;padding:0 13px 0 10px;border:1px solid rgba(21,21,21,.16);border-radius:999px;background:rgba(255,255,255,.7);color:#33332f;font:500 12.5px/1 'DM Sans',sans-serif;letter-spacing:.01em;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.install-step-copy .step-3d svg{width:15px;height:15px;flex:none}
.install-step-copy .step-3d:hover{border-color:rgba(21,21,21,.42);background:#fff;color:#151515}
.install-step-copy .step-3d:focus-visible{outline:2px solid #151515;outline-offset:2px}
@media(max-width:680px){.install-step-copy .step-3d{grid-column:1;margin-top:4px;min-height:36px}}

/* W10: very wide screens (>= 1900 px) give the design more room: a wider centre column and a 55 % studio. */
@media (min-width:1900px){
 .product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1400px) minmax(0,1fr)}
 .product-hero{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
}
/* /assets/css/work-with-us-v1.css */
/* Work with us (bankasimedia.com/work-with-us, 2026-10-10). Last in the page's second bundle.
   One column edge for every section (the secondary pages' --pc-edge), warm off-white / charcoal / graphite,
   DM Sans interface type with Cormorant Garamond accents. "Made to order" is a set of commission cases (brief,
   studio, what we made, a dated track and the related [creations] design), deliberately not the Inside the build
   drawing sheet. The 3D previews are product-viewer-v10 studios (product-page-v1.css "Studio viewer" styles).
   No lift on hover anywhere (owner rule): hovers change border, colour or background only. */
.page-work{--pc-edge:max(var(--page-gutter,24px),calc((100% - 1320px)/2));--ink:#141516;--soft:#55595e;--line:#2224261f;
 --paper:#f2f2ef;--draw:#2a2d31;--warm:#f6f5f2;--char:#151515;--graphite:#232527;--cold:#3484e2;--hot:#e44836}
.page-work #main-content{background:var(--warm)}
.page-work #main-content>section{position:relative;padding:clamp(56px,8vw,112px) var(--pc-edge)}
.page-work #main-content>section::before{display:none}
.page-work .wwu-eyebrow{margin:0 0 14px;font:500 12px/1.2 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);font-variant-numeric:tabular-nums}
.page-work .wwu-h2{margin:0;max-width:22ch;font:400 clamp(34px,4.4vw,58px)/1.04 "Cormorant Garamond",Georgia,serif;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.page-work .wwu-lede{margin:18px 0 0;max-width:62ch;font:400 17px/1.65 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-lede a,.page-work .wwu-text a{color:var(--ink);text-decoration:underline;text-decoration-color:#14151655;text-underline-offset:3px}
.page-work .wwu-lede a:hover,.page-work .wwu-text a:hover{text-decoration-color:var(--ink)}
.page-work .wwu-head{display:grid;gap:0;margin-bottom:clamp(32px,4vw,56px)}
.page-work .wwu-asof{margin:14px 0 0;font:400 13px/1.5 "DM Sans",sans-serif;color:#6b6f74}

/* Buttons: the site's 8 px radius. */
.page-work .wwu-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:8px;border:1px solid transparent;
 font:500 14px/1 "DM Sans",sans-serif;letter-spacing:.04em;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.page-work .wwu-btn svg{width:16px;height:16px;flex:none}
.page-work .wwu-btn-primary{background:#f2f2f0;color:#111;border-color:#f2f2f0}
.page-work .wwu-btn-primary:hover{background:#fff;border-color:#fff}
.page-work .wwu-btn-ghost{background:#ffffff0d;color:#fff;border-color:#ffffff38}
.page-work .wwu-btn-ghost:hover{background:#ffffff1f;border-color:#ffffff80}
.page-work .wwu-btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.page-work .wwu-btn-dark:hover{background:#2c2e31;border-color:#2c2e31}
.page-work .wwu-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Hero: the secondary-page dark hero, on the column edge. */
.page-work .page-hero{padding-left:var(--pc-edge);padding-right:var(--pc-edge);padding-bottom:clamp(64px,8vw,104px)}
.page-work .page-hero h1{max-width:13ch}
.page-work .page-hero p.wwu-hero-copy{max-width:52ch;font-size:clamp(16px,1.3vw,18px);color:rgba(255,255,255,.66)}
.page-work .wwu-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Reach. */
.page-work .wwu-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #22242633;border-bottom:1px solid #22242633}
.page-work .wwu-fig{display:grid;align-content:start;gap:8px;padding:28px 24px 30px 0;min-width:0}
.page-work .wwu-fig+.wwu-fig{padding-left:24px;border-left:1px solid #2224261f}
.page-work .wwu-fig-value{margin:0;font:300 clamp(40px,4.6vw,68px)/1 "DM Sans",sans-serif;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-work .wwu-fig-value small{font-size:.42em;letter-spacing:0;color:var(--soft)}
.page-work .wwu-fig-label{margin:0;font:500 15px/1.35 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-fig-source{margin:0;font:400 12.5px/1.45 "DM Sans",sans-serif;color:#6b6f74}
.page-work .wwu-traffic{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(36px,5vw,64px)}
.page-work .wwu-traffic h3{margin:0;font:400 clamp(26px,2.6vw,36px)/1.15 "Cormorant Garamond",Georgia,serif;color:var(--ink);text-wrap:balance}
.page-work .wwu-traffic p{margin:12px 0 0;font:400 15px/1.6 "DM Sans",sans-serif;color:var(--soft);max-width:48ch}
.page-work .wwu-spark{width:100%;height:auto;display:block;overflow:visible}
.page-work .wwu-spark text{font:500 11px "DM Sans",sans-serif;fill:#5d6166;font-variant-numeric:tabular-nums}
.page-work .wwu-spark .bar{fill:#22242638}
.page-work .wwu-spark .bar.is-early{fill:#2224266b}
.page-work .wwu-spark .bar.is-late{fill:var(--ink)}
.page-work .wwu-spark .avg{stroke:#14151699;stroke-width:1;stroke-dasharray:3 3}
.page-work .wwu-spark .axis{stroke:#22242640;stroke-width:1}

/* Videos: one dark screening band, like the homepage channel panel. */
.page-work .wwu-videos{background:var(--char)!important;color:#f2f2f0}
.page-work .wwu-videos .wwu-eyebrow{color:#9a9ea3}
.page-work .wwu-videos .wwu-h2{color:#f4f4f2}
.page-work .wwu-videos .wwu-lede{color:#b9bcc0}
.page-work .wwu-vlist{display:grid;grid-template-columns:1.35fr repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:18px;margin:0;padding:0;list-style:none}
.page-work .wwu-vlist li{min-width:0}
.page-work .wwu-vlist li:first-child{grid-row:span 2}
.page-work .wwu-video{display:grid;gap:12px;height:100%;padding:12px;border-radius:14px;border:1px solid #ffffff1a;background:#ffffff08;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.page-work .wwu-video:hover{border-color:#ffffff4d;background:#ffffff10}
.page-work .wwu-video:focus-visible{outline:2px solid #fff;outline-offset:3px}
.page-work .wwu-video-media{position:relative;overflow:hidden;border-radius:9px;background:#0d0d0d;aspect-ratio:16/9}
.page-work .wwu-vlist li:first-child .wwu-video-media{aspect-ratio:auto;height:100%;min-height:280px}
.page-work .wwu-video-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-work .wwu-video-kind{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:999px;background:#0d0d0dcc;color:#f2f2f0;font:500 11px/1 "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(8px)}
.page-work .wwu-video-title{margin:0;font:500 15.5px/1.35 "DM Sans",sans-serif;color:#f4f4f2;text-wrap:pretty}
.page-work .wwu-vlist li:first-child .wwu-video-title{font-size:19px}
.page-work .wwu-video-meta{margin:0;display:flex;gap:10px;flex-wrap:wrap;font:400 13px/1.3 "DM Sans",sans-serif;color:#a7abb0;font-variant-numeric:tabular-nums}
.page-work .wwu-video-meta b{font-weight:500;color:#f2f2f0}
.page-work .wwu-vlist li:first-child .wwu-video{grid-template-rows:1fr auto auto}
.page-work .wwu-videos .wwu-more{margin-top:28px}

/* Made to order: commission cases. Each project reads like a short case study: who it was for, the brief, the
   studio preview, what we made, a dated track from request to outcome (the homepage workshop strip, per project)
   and the [creations] design it grew from. Light, warm and card-based like the rest of this page. */
.page-work .wwu-orders{background:linear-gradient(#ecebe6,var(--warm) 520px)!important}
/* Made to order (owner 2026-10-10: professional for brands; the cardboard, tape, stamps and tickets stay on
   [creations]): a calm header (copy beside a card on how a custom order works), the same figure row as Reach, the
   project index, then each project as a plain case card with a quiet number, name and month. */
.page-work .wwu-orders{--paper:#fff}
.page-work .wwu-mto-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(28px,4vw,72px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.page-work .wwu-mto-copy{min-width:0}
.page-work .wwu-mto-facts{display:grid;gap:14px;padding:clamp(22px,2.4vw,30px);border:1px solid #22242626;border-radius:14px;background:#fff}
.page-work .wwu-mto-facts-title{margin:0;font:500 12px/1.2 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.page-work .wwu-mto-policy{margin:0;font:400 16px/1.6 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-mto-routes{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.page-work .wwu-mto-routes p{margin:0;font:400 14px/1.55 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-mto-routes b{font-weight:500;color:var(--ink)}
.page-work .wwu-mto-routes a{color:var(--ink);text-decoration:underline;text-decoration-color:#14151666;text-underline-offset:3px}
.page-work .wwu-mto-routes a:hover{text-decoration-color:currentColor}
.page-work .wwu-mto-figures{margin-bottom:clamp(8px,1vw,12px)}
.page-work .wwu-case{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main";padding:0;overflow:hidden;
 border:1px solid #22242626;border-radius:14px;background:#fff;scroll-margin-top:96px}
.page-work .wwu-case>.wwu-case-head{grid-area:head;padding:clamp(20px,2.6vw,32px) clamp(20px,2.6vw,36px) 0}
.page-work .wwu-case-main{grid-area:main;display:grid;gap:clamp(18px,2vw,28px);min-width:0;padding:clamp(18px,2vw,26px) clamp(20px,2.6vw,36px) clamp(22px,2.6vw,32px)}
.page-work .wwu-case-index{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 clamp(28px,3vw,40px)}
.page-work .wwu-case-index a{display:inline-flex;align-items:baseline;gap:8px;min-height:38px;padding:9px 15px;border:1px solid #22242629;border-radius:999px;background:#fff;color:var(--soft);text-decoration:none;
 font:400 13px/1.2 "DM Sans",sans-serif;transition:border-color .2s,color .2s}
.page-work .wwu-case-index b{font-weight:500;color:var(--ink)}
.page-work .wwu-case-index a:hover{border-color:var(--ink);color:var(--ink)}
.page-work .wwu-case-index a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.page-work .wwu-cases{display:grid;gap:clamp(20px,2.4vw,32px)}

.page-work .wwu-case-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who rel" "title rel";gap:6px 24px;align-items:start}
.page-work .wwu-case-who{grid-area:who;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:0;font:400 13px/1.3 "DM Sans",sans-serif;color:var(--soft);font-variant-numeric:tabular-nums}
.page-work .wwu-case-who b{font-weight:500;font-size:15px;color:var(--ink)}
.page-work .wwu-case-no{font:500 12px/1.3 "DM Sans",sans-serif;letter-spacing:.12em;color:#62666b;font-variant-numeric:tabular-nums}
.page-work .wwu-case h3{grid-area:title;margin:0;font:500 clamp(22px,2.2vw,30px)/1.18 "DM Sans",sans-serif;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.page-work .wwu-case.is-feature h3{font-size:clamp(26px,2.8vw,38px)}
.page-work .wwu-case-rel{grid-area:rel;display:grid;gap:3px;max-width:240px;padding:11px 15px;border:1px solid #22242629;border-radius:12px;background:var(--warm);color:var(--ink);text-decoration:none;
 font:500 14px/1.3 "DM Sans",sans-serif;transition:border-color .2s}
.page-work .wwu-case-rel span{font:500 10.5px/1.2 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.page-work .wwu-case-rel b{font-weight:500;white-space:normal}
.page-work .wwu-case-rel svg{display:inline-block;width:13px;height:13px;vertical-align:-1px;margin-left:6px}
.page-work .wwu-case-rel:hover{border-color:var(--ink)}
.page-work .wwu-case-rel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.page-work .wwu-case-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.4vw,52px);align-items:start}
.page-work .wwu-case.is-feature .wwu-case-body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.page-work .wwu-case-studio{display:grid;gap:12px;min-width:0}
.page-work .wwu-case-copy{display:grid;align-content:start;gap:10px;min-width:0}
.page-work .wwu-case-label{margin:12px 0 0;font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.page-work .wwu-case-label:first-child{margin-top:0}
.page-work .wwu-text{margin:0;font:400 15.5px/1.65 "DM Sans",sans-serif;color:#33363a;max-width:62ch}
.page-work .wwu-specs{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-top:1px solid #2224261f}
.page-work .wwu-specs dt,.page-work .wwu-specs dd{margin:0;padding:8px 0;border-bottom:1px solid #2224261f;font:400 13.5px/1.4 "DM Sans",sans-serif}
.page-work .wwu-specs dt{padding-right:18px;padding-top:10px;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.page-work .wwu-specs dd{color:var(--ink);font-variant-numeric:tabular-nums}
.page-work .wwu-quote{margin:8px 0 0;padding:4px 0 0 18px;border-left:2px solid var(--ink)}
.page-work .wwu-quote p{margin:0;font:italic 400 clamp(20px,1.8vw,24px)/1.3 "Cormorant Garamond",Georgia,serif;color:var(--ink)}
.page-work .wwu-quote-src{display:block;margin-top:6px;font:400 13px/1.4 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-credit{margin:0;font:400 13px/1.5 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-credit a,.page-work .wwu-review-link a{color:var(--ink);text-underline-offset:3px}
.page-work .wwu-review-link{margin:0;font:500 13.5px/1.4 "DM Sans",sans-serif}
.page-work .wwu-case .product-viewer[data-product-viewer]{width:100%;max-width:none;margin:0;border-radius:14px}
.page-work .wwu-viewer-note{margin:0;font:400 12px/1.45 "DM Sans",sans-serif;color:#6b6f74}
/* The dated track: request to outcome. The last step (the result) is filled. */
.page-work .wwu-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 18px;margin:0;padding:0;list-style:none;border-top:1px solid #22242633}
.page-work .wwu-track li{position:relative;display:grid;align-content:start;gap:5px;padding:18px 0 0}
.page-work .wwu-track li::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;box-sizing:border-box}
.page-work .wwu-track li:last-child::before{background:var(--ink)}
.page-work .wwu-track time{font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-variant-numeric:tabular-nums}
.page-work .wwu-track span{font:400 14px/1.45 "DM Sans",sans-serif;color:#2a2c2f}
/* See it installed. */
.page-work .wwu-installed{border-top:1px solid #2224261f;padding-top:12px}
.page-work .wwu-installed>summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid #22242633;border-radius:999px;background:#fff;cursor:pointer;list-style:none;
 font:500 13.5px/1 "DM Sans",sans-serif;color:var(--ink);transition:border-color .2s}
.page-work .wwu-installed>summary::-webkit-details-marker{display:none}
.page-work .wwu-installed>summary:hover{border-color:var(--ink)}
.page-work .wwu-installed>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.page-work .wwu-installed>summary svg{width:15px;height:15px;transition:transform .25s}
.page-work .wwu-installed[open]>summary svg{transform:rotate(180deg)}
.page-work .wwu-photos{display:flex;gap:12px;margin:14px 0 0;padding:0 0 6px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.page-work .wwu-photos li{flex:none;scroll-snap-align:start;margin:0}
.page-work .wwu-photos figure{margin:0}
.page-work .wwu-photos img{display:block;height:260px;width:auto;max-width:none;border-radius:10px;background:#ddd;box-shadow:0 0 0 1px #22242626}
.page-work .wwu-photos figcaption{max-width:260px;margin-top:7px;font:400 12px/1.4 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-orders-note{margin:clamp(28px,3vw,40px) 0 0;max-width:80ch;font:400 12.5px/1.6 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-kit-link{color:#f4f4f2;font-weight:500}

/* What we make. */
.page-work .wwu-make{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
.page-work .wwu-make-card{display:grid;align-content:start;gap:12px;padding:22px;border-radius:14px;border:1px solid #22242626;background:#fff;color:inherit;text-decoration:none;transition:border-color .2s}
.page-work .wwu-make-card:hover{border-color:#141516}
.page-work .wwu-make-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.page-work .wwu-make-card h3{margin:0;font:500 19px/1.25 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-make-card p{margin:0;font:400 14.5px/1.6 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-make-card .wwu-go{display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-make-card .wwu-go svg{width:14px;height:14px}
.page-work .wwu-make-creations{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"h flag" "p flag" "go flag";grid-template-rows:auto auto 1fr;column-gap:clamp(24px,4vw,56px);background:var(--char);border-color:var(--char);color:#f2f2f0}
.page-work .wwu-make-creations h3{grid-area:h}.page-work .wwu-make-creations>p{grid-area:p}.page-work .wwu-make-creations .wwu-flag{grid-area:flag}.page-work .wwu-make-creations>.wwu-go{grid-area:go;align-self:end}
@media (min-width:761px){.page-work .wwu-make{grid-template-columns:repeat(3,minmax(0,1fr))}.page-work .wwu-make-creations{grid-column:1/-1}}
.page-work .wwu-make-creations:hover{border-color:#5a5d61}
.page-work .wwu-make-creations h3{color:#f4f4f2;font-size:22px}
.page-work .wwu-make-creations p{color:#b9bcc0}
.page-work .wwu-flag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.page-work .wwu-flag a{display:grid;gap:8px;color:#e9e9e7;text-decoration:none;font:500 12.5px/1.3 "DM Sans",sans-serif}
.page-work .wwu-flag img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#f4f4f3}
.page-work .wwu-flag a:hover img{box-shadow:0 0 0 2px #f4f4f2}
.page-work .wwu-flag a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:10px}
.page-work .wwu-make-creations .wwu-go{color:#f4f4f2;text-decoration:none}
.page-work .wwu-make-creations .wwu-go:hover{text-decoration:underline;text-underline-offset:3px}

/* Proof. */
.page-work .wwu-proof{background:#ecedeb!important}
.page-work .wwu-proof-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px}
.page-work .wwu-proof-card{padding:26px;border-radius:14px;background:#fff;border:1px solid #22242626;display:grid;align-content:start;gap:18px}
.page-work .wwu-proof-card h3{margin:0;font:500 12px/1.3 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4a4e53}
.page-work .wwu-proof-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px}
.page-work .wwu-proof-figs div{display:grid;gap:6px;align-content:start}
.page-work .wwu-proof-figs b{font:300 clamp(40px,3.8vw,56px)/1 "DM Sans",sans-serif;letter-spacing:-.03em;color:#16314f;font-variant-numeric:tabular-nums;white-space:nowrap}
.page-work .wwu-proof-figs b small{font-size:.4em;letter-spacing:0;color:#3d5f86}
.page-work .wwu-proof-figs span{font:500 14px/1.35 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-proof-figs em{font:400 12.5px/1.4 "DM Sans",sans-serif;font-style:normal;color:#5d6166}
.page-work .wwu-proof-card p{margin:0;font:400 14px/1.6 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-proof-card p a{color:var(--ink);text-underline-offset:3px}

/* Ways to work together. */
.page-work .wwu-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #22242633}
.page-work .wwu-way{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:28px 28px 30px 0;border-bottom:1px solid #22242626}
.page-work .wwu-way:nth-child(even){padding-left:28px;padding-right:0;border-left:1px solid #22242626}
.page-work .wwu-way h3{margin:0;font:500 20px/1.25 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-way p{margin:0;font:400 15px/1.6 "DM Sans",sans-serif;color:var(--soft);max-width:54ch}
.page-work .wwu-way p a{color:var(--ink);text-underline-offset:3px}
.page-work .wwu-rates{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px;font:400 15px/1.5 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-rates strong{font:500 15px/1 "DM Sans",sans-serif;color:var(--ink);letter-spacing:.04em}

/* Customers. */
.page-work .wwu-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.page-work .wwu-review{display:grid;grid-template-rows:auto 1fr;height:100%;margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #22242626}
.page-work .wwu-review img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:#e6e6e4}
.page-work .wwu-review-body{display:grid;align-content:start;gap:12px;padding:20px 22px 22px}
.page-work .wwu-stars{display:flex;gap:3px;color:#1d1d1f}
.page-work .wwu-stars svg{width:15px;height:15px}
.page-work .wwu-review blockquote{margin:0}
.page-work .wwu-review blockquote p{margin:0;font:400 15.5px/1.6 "DM Sans",sans-serif;color:#2a2c2f}
.page-work .wwu-review blockquote p+p{margin-top:8px}
.page-work .wwu-review .review-translation{font-size:14px;color:var(--soft)}
.page-work .wwu-review .review-translation span{display:block;font:500 10.5px/1.4 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6f74}
.page-work .wwu-review figcaption{display:grid;gap:3px;font:400 13px/1.4 "DM Sans",sans-serif;color:var(--soft)}
.page-work .wwu-review figcaption strong{font:500 14.5px/1.3 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-review figcaption a{color:var(--ink);font-weight:500;text-underline-offset:3px}

/* Contact. */
.page-work .wwu-contact{background:var(--graphite)!important;color:#f2f2f0}
.page-work .wwu-contact .wwu-eyebrow{color:#9a9ea3}
.page-work .wwu-contact .wwu-h2{color:#f4f4f2}
.page-work .wwu-contact .wwu-lede{color:#b9bcc0}
.page-work .wwu-contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start}
.page-work .wwu-contact .contact-form label{color:#c9ccd0}
.page-work .wwu-contact .contact-form input,.page-work .wwu-contact .contact-form textarea{width:100%;padding:12px 14px;background:#ffffff0d;border:1px solid #ffffff2e;color:#f4f4f2;border-radius:8px;font:400 15px/1.4 "DM Sans",sans-serif}
.page-work .wwu-contact .contact-form textarea{min-height:150px;resize:vertical}
.page-work .wwu-contact .contact-form input::placeholder,.page-work .wwu-contact .contact-form textarea::placeholder{color:#8e9297}
.page-work .wwu-contact .contact-form input:focus,.page-work .wwu-contact .contact-form textarea:focus{border-color:#f2f2f0;outline:none;box-shadow:0 0 0 2px #f2f2f040}
.page-work .wwu-contact .btn-submit{border-radius:8px;background:#f2f2f0;color:#111;border-color:#f2f2f0}
.page-work .wwu-contact .btn-submit:hover{background:#fff}
.page-work .wwu-contact .form-status{color:#f2f2f0}
.page-work .wwu-direct{display:grid;gap:18px;padding:24px;border-radius:14px;border:1px solid #ffffff1f;background:#ffffff08}
.page-work .wwu-direct h3{margin:0;font:500 12px/1.3 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a9ea3}
.page-work .wwu-direct p{margin:0;font:400 15px/1.6 "DM Sans",sans-serif;color:#d2d4d7}
.page-work .wwu-direct a{color:#f4f4f2;text-underline-offset:3px}
.page-work .wwu-direct ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.page-work .wwu-print-url{display:none}
.page-work .wwu-direct li{font:400 14.5px/1.5 "DM Sans",sans-serif;color:#d2d4d7}
.page-work .wwu-smallprint{margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid #ffffff1f;font:400 12.5px/1.6 "DM Sans",sans-serif;color:#9a9ea3;max-width:90ch}

/* Responsive. */
@media (max-width:1060px){
 .page-work .wwu-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-work .wwu-fig:nth-child(3){padding-left:0;border-left:0}
 .page-work .wwu-fig:nth-child(n+3){border-top:1px solid #2224261f}
 .page-work .wwu-traffic,.page-work .wwu-proof-grid,.page-work .wwu-contact-grid{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-vlist{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-work .wwu-vlist li:first-child{grid-column:1/-1;grid-row:auto}
 .page-work .wwu-vlist li:first-child .wwu-video-media{aspect-ratio:16/9;height:auto;min-height:0}
 .page-work .wwu-case-body,.page-work .wwu-case.is-feature .wwu-case-body{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-mto-head{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-mto-facts{max-width:560px}
 .page-work .wwu-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
 .page-work .wwu-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .page-work #main-content>section{padding-top:56px;padding-bottom:56px}
 .page-work .wwu-figures{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-fig,.page-work .wwu-fig+.wwu-fig{padding:22px 0;border-left:0}
 .page-work .wwu-fig+.wwu-fig{border-top:1px solid #2224261f}
 .page-work .wwu-vlist{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-make{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-make-creations{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "flag" "go"}
 .page-work .wwu-ways{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-way,.page-work .wwu-way:nth-child(even){padding:22px 0;border-left:0}
 .page-work .wwu-reviews{grid-template-columns:minmax(0,1fr)}
 .page-work .wwu-photos img{height:200px}
 .page-work .wwu-case-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "rel"}
 .page-work .wwu-case-head{grid-template-areas:"who" "title" "rel"}
 .page-work .wwu-case-rel{justify-self:start;margin-top:6px}
 .page-work .wwu-case-index{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1*var(--pc-edge));margin-right:calc(-1*var(--pc-edge));padding:0 var(--pc-edge) 4px;scrollbar-width:none}
 .page-work .wwu-case-index a{flex:none}
 .page-work .wwu-track{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid #22242633;margin-left:5px;gap:0}
 .page-work .wwu-track li{padding:0 0 16px 20px}
 .page-work .wwu-track li::before{left:-6px;top:2px}
 .page-work .wwu-hero-actions .wwu-btn{flex:1 1 auto;justify-content:center}
}

/* Print: a 3-page media kit ("Save as PDF"; published copy in /assets/docs/). No nav, no motion, posters instead
   of canvases; reach figures, the made-to-order cases, test results, formats, reviews and contact. */
@media print{
 @page{size:Letter;margin:12mm 12mm 14mm}
 :root:root,html,html body.page-work.page-work,.page-work,.page-work #main-content{background:#fff!important}
 .page-work *{box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
 .page-work a{text-decoration:none!important}
 .page-work a::after,.page-work a::before{content:none!important}
 .page-work #mainNav,.page-work #mobileMenu,.page-work .menu-scrim,.page-work .to-top,.page-work .skip-link,.page-work body>footer,.page-work>footer,
 .page-work .wwu-hero-actions,.page-work .wwu-videos,.page-work .wwu-whatwemake,.page-work .wwu-installed,.page-work .product-views,
 .page-work .product-viewer-hint,.page-work .product-air-toggle,.page-work .product-stage canvas,.page-work .product-stage-row,
 .page-work .wwu-contact form,.page-work .form-status,.page-work .wwu-more,.page-work .wwu-reviews img,.page-work .wwu-viewer-note,
 .page-work .wwu-case-index,.page-work .wwu-mto-routes,.page-work .wwu-track,.page-work .wwu-case-rel,.page-work .wwu-case-label,
 .page-work .wwu-case .wwu-text,.page-work .wwu-review-link,.page-work .wwu-lede,.page-work .wwu-proof-card p,.page-work .wwu-way p,
 .page-work .wwu-contact .wwu-head,.page-work .wwu-kit-link{display:none!important}
 .page-work .wwu-reach .wwu-lede,.page-work .wwu-mto-copy .wwu-lede{display:block!important;font-size:8.5pt;margin-top:1mm}
 .page-work #main-content>section{padding:3.5mm 0!important;border:0!important}
 .page-work .page-hero{padding:0 0 3mm!important;background:#fff!important;color:#111!important}
 .page-work .page-hero::before{display:none!important}
 .page-work .page-hero h1{font-size:24pt!important;color:#111!important;max-width:none}
 .page-work .page-hero h1 em{color:#555!important}
 .page-work .page-hero .section-label{color:#333!important}
 .page-work .page-hero p.wwu-hero-copy{font-size:9.5pt;margin-top:2mm;color:#333!important}
 .page-work .wwu-eyebrow{margin-bottom:2mm;font-size:7.5pt}
 .page-work .wwu-h2{font-size:18pt;max-width:none}
 .page-work .wwu-head{margin-bottom:3mm;break-after:avoid}
 .page-work .wwu-figures{grid-template-columns:repeat(4,1fr)!important}
 .page-work .wwu-fig{padding:3mm 3mm 3mm 0!important}
 .page-work .wwu-fig+.wwu-fig{padding-left:3mm!important}
 .page-work .wwu-fig-value{font-size:22pt}
 .page-work .wwu-fig-label{font-size:9pt}.page-work .wwu-fig-source{font-size:7.5pt}
 .page-work .wwu-traffic{grid-template-columns:1fr 1.2fr!important;margin-top:3mm!important}
 .page-work .wwu-traffic h3{font-size:14pt}.page-work .wwu-traffic p{font-size:8.5pt}
 .page-work .wwu-spark{max-height:34mm}
 .page-work .wwu-orders{background:#fff!important}
 .page-work .wwu-mto-head{display:grid;grid-template-columns:1.4fr 1fr!important;gap:6mm;align-items:end;margin:0 0 3mm;padding:0!important;background:none!important;box-shadow:none!important;color:#111}
 .page-work .wwu-mto-title{font-size:22pt}
 .page-work .wwu-mto-facts{gap:1mm;padding:2mm 3mm;border:1px solid #bbb;border-radius:2mm}
 .page-work .wwu-mto-facts-title{font-size:7pt}.page-work .wwu-mto-policy{font-size:8.5pt;line-height:1.45}
 .page-work .wwu-mto-figures{margin:0 0 3mm}
 .page-work .wwu-cases{grid-template-columns:1fr 1fr;gap:3mm 4mm}
 .page-work .wwu-case{display:grid;grid-template-columns:20mm 1fr;grid-template-areas:"studio head" "studio copy";gap:1.5mm 3mm;padding:2.5mm;border-width:1px;border-radius:3mm;break-inside:avoid;background:#fff}
 .page-work .wwu-case-main{display:contents}
 .page-work .wwu-case>.wwu-case-head{padding:0}
 .page-work .wwu-case-who{display:flex!important}
 .page-work .wwu-case-body{display:contents}
 .page-work .wwu-case-head{grid-area:head;display:block}
 .page-work .wwu-case-studio{grid-area:studio}
 .page-work .wwu-case-copy{grid-area:copy;gap:1.2mm}
 .page-work .wwu-case .product-viewer[data-product-viewer]{width:20mm!important;height:20mm!important;aspect-ratio:auto;min-height:0!important;background:#f4f4f3!important;border-radius:2mm}
 .page-work .wwu-case .product-stage{position:absolute!important;inset:0!important;height:auto!important}
 .page-work .wwu-case .product-stage img{opacity:1!important;visibility:visible!important;transform:none!important;width:100%!important;height:100%!important;object-fit:contain}
 .page-work .wwu-case-who{font-size:7pt}.page-work .wwu-case-who b{font-size:8pt}
 .page-work .wwu-case h3,.page-work .wwu-case.is-feature h3{font-size:10pt;margin-top:.5mm}
 .page-work .wwu-specs dt,.page-work .wwu-specs dd{font-size:7pt;padding:.6mm 0}
 .page-work .wwu-specs dt{padding-right:3mm}
 .page-work .wwu-specs dt:nth-of-type(n+3),.page-work .wwu-specs dd:nth-of-type(n+3){display:none!important}
 .page-work .wwu-quote{margin-top:1mm;padding:1mm 0 0 3mm}.page-work .wwu-quote p{font-size:9pt}.page-work .wwu-quote-src{font-size:6.5pt}
 .page-work .wwu-credit{font-size:7pt}
 .page-work .wwu-orders-note{font-size:6.5pt;margin-top:3mm!important}
 .page-work .wwu-proof{background:#fff!important}
 .page-work .wwu-proof-grid{grid-template-columns:3fr 2fr!important}
 .page-work .wwu-proof-card{padding:3mm!important;gap:2mm;break-inside:avoid}
 .page-work .wwu-proof-figs{gap:3mm}.page-work .wwu-proof-figs b{font-size:18pt}.page-work .wwu-proof-figs span{font-size:8pt}
 .page-work .wwu-ways{grid-template-columns:repeat(4,1fr)!important;break-inside:avoid}
 .page-work .wwu-way,.page-work .wwu-way:nth-child(even){padding:1mm 3mm 1mm 0!important;border-left:0!important}
 .page-work .wwu-way h3{font-size:9.5pt}
 .page-work .wwu-rates{margin-top:3mm;font-size:8.5pt}
 .page-work .wwu-reviews{grid-template-columns:repeat(3,1fr)!important;break-inside:avoid}
 .page-work .wwu-review-body{padding:3mm;gap:1.5mm}
 .page-work .wwu-stars svg{width:9px;height:9px}
 .page-work .wwu-review blockquote p{font-size:8pt}.page-work .wwu-review figcaption{font-size:7pt}.page-work .wwu-review .review-translation{font-size:7.5pt}
 .page-work .wwu-contact{background:#fff!important;color:#111!important;padding-top:2mm!important}
 .page-work .wwu-contact-grid{grid-template-columns:1fr!important}
 .page-work .wwu-direct{padding:2.5mm 3mm;gap:1.5mm;border-color:#ccc;background:#fff;break-inside:avoid}
 .page-work .wwu-direct h3::after{content:" · Work with Bankasi Media"}
 .page-work .wwu-direct ul{display:flex;flex-wrap:wrap;gap:1mm 5mm}
 .page-work .wwu-direct p,.page-work .wwu-direct li,.page-work .wwu-direct a,.page-work .wwu-smallprint{color:#111!important;font-size:8.5pt!important}
 .page-work .wwu-smallprint{font-size:7pt!important;margin-top:2mm;padding-top:2mm}
 .page-work .wwu-print-url{display:inline!important}
}
/* Phones: the four Made to order figures are short, so they sit 2 x 2 instead of one per row. */
@media (max-width:760px){
 .page-work .wwu-mto-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-work .wwu-mto-figures .wwu-fig,.page-work .wwu-mto-figures .wwu-fig+.wwu-fig{padding:20px 14px 22px 0;border-top:0;border-left:0}
 .page-work .wwu-mto-figures .wwu-fig:nth-child(even){padding-left:16px;border-left:1px solid #2224261f}
 .page-work .wwu-mto-figures .wwu-fig:nth-child(n+3){border-top:1px solid #2224261f}
}
/* What we make, the three channels (owner 2026-10-10: each its own design with real content, like the [creations]
   card): YouTube shows three clickable videos, Workbench three stories, Discussion the six forum categories as
   message bubbles. Colour and border hovers only, never movement. */
.page-work .wwu-make-yt,.page-work .wwu-make-wb,.page-work .wwu-make-forum{display:flex;flex-direction:column;gap:14px;padding:24px}
.page-work .wwu-make-yt:hover,.page-work .wwu-make-wb:hover,.page-work .wwu-make-forum:hover{border-color:#22242626}
.page-work .wwu-make-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.page-work .wwu-make-meta{font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#62666b}
.page-work .wwu-make-yt>.wwu-go,.page-work .wwu-make-wb>.wwu-go,.page-work .wwu-make-forum>.wwu-go{margin-top:auto;padding-top:4px;text-decoration:none}
.page-work .wwu-make-yt>.wwu-go:hover,.page-work .wwu-make-wb>.wwu-go:hover,.page-work .wwu-make-forum>.wwu-go:hover{text-decoration:underline;text-underline-offset:3px}
.page-work .wwu-make-card a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
/* YouTube: a strip of three videos */
.page-work .wwu-yt-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:2px 0 0;padding:0;list-style:none}
.page-work .wwu-yt-list a{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 14px;align-items:start;color:inherit;text-decoration:none}
.page-work .wwu-yt-thumb{grid-row:1/3}
.page-work .wwu-yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#151515;box-shadow:0 0 0 1px #22242626;transition:box-shadow .2s}
.page-work .wwu-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.page-work .wwu-yt-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#151515b3;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s}
.page-work .wwu-yt-play svg{width:14px;height:14px;margin-left:1px}
.page-work .wwu-yt-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:500 14px/1.35 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-yt-views{font:400 11.5px/1.3 "DM Sans",sans-serif;color:#62666b;font-variant-numeric:tabular-nums}
.page-work .wwu-yt-list a:hover .wwu-yt-thumb{box-shadow:0 0 0 2px var(--ink)}
.page-work .wwu-yt-list a:hover .wwu-yt-play{background:#151515}
/* Workbench: three stories on warm paper */
.page-work .wwu-make-wb{background:#fbfaf7}
.page-work .wwu-wb-list{display:grid;margin:2px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.page-work .wwu-wb-list li{border-bottom:1px solid var(--line)}
.page-work .wwu-wb-list a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:11px 0;color:inherit;text-decoration:none}
.page-work .wwu-wb-list img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#f2f2ef;box-shadow:0 0 0 1px #22242614}
.page-work .wwu-wb-list span{display:grid;gap:3px;font:500 14px/1.35 "DM Sans",sans-serif;color:var(--ink)}
.page-work .wwu-wb-list small{font:500 10.5px/1.2 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#62666b}
.page-work .wwu-wb-list a:hover span{text-decoration:underline;text-decoration-color:#14151666;text-underline-offset:3px}
.page-work .wwu-wb-list a:hover small{text-decoration:none}
/* Discussion: the forum's six categories as message bubbles on a cool panel */
.page-work .wwu-make-forum{background:#eef1f4;border-color:#dfe4ea}
.page-work .wwu-forum-cats{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.page-work .wwu-forum-cats a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid #d3dae2;border-radius:16px 16px 16px 5px;background:#fff;color:var(--ink);text-decoration:none;font:500 13px/1.25 "DM Sans",sans-serif;transition:border-color .2s,background-color .2s}
.page-work .wwu-forum-cats a:hover{border-color:var(--ink)}
.page-work .wwu-bubble-ic{width:15px;height:15px;flex:none;color:#5c6a79}
/* Tablets: one channel per row, so each card has room for its content. The videos are rows at every width. */
@media (min-width:761px) and (max-width:1060px){.page-work .wwu-make{grid-template-columns:minmax(0,1fr)}}

/* Audit round 1 (owner-approved 2026-10-11). */
/* Hero: the heading's two lines sit close, on the column edge. The drawing (owner 2026-10-11, replaces the
   handshake): two people chatting at a desk (no arms), a laptop with a play button between them, speech bubbles above, in the Old tech
   language (dark fills, silver gradient outlines, soft glow, a slow float; the bubble's dots type). It sits right of
   the copy from 1101 px and under the buttons on phones and tablets; hidden in print. */
.page-work .page-hero{position:relative}
.page-work .page-hero h1{line-height:1.04;padding-inline:0}
.page-work .wwu-hero-art{display:block;width:min(100%,400px);margin:44px auto 0;pointer-events:none}
.page-work .wwu-hero-art svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 18px #cfd6e42e) drop-shadow(0 0 2px #ffffff40)}
.page-work .wwu-hp{animation:wwu-float 7s ease-in-out infinite alternate}
.page-work .wwu-hp-dot{animation:wwu-type 1.4s ease-in-out infinite}
.page-work .wwu-hp-dot:nth-of-type(2){animation-delay:.2s}
.page-work .wwu-hp-dot:nth-of-type(3){animation-delay:.4s}
@media (min-width:1101px){
 .page-work .page-hero{padding-right:calc(var(--pc-edge) + clamp(300px,30vw,480px) + 40px)}
 .page-work .wwu-hero-art{display:flex;align-items:center;justify-content:center;position:absolute;z-index:0;margin:0;right:var(--pc-edge);top:96px;bottom:clamp(64px,8vw,104px);width:clamp(300px,30vw,480px)}
 .page-work .wwu-hero-art svg{max-height:100%}
 .page-work .page-hero>:not(.wwu-hero-art){position:relative;z-index:1}
}
@keyframes wwu-float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes wwu-type{0%,60%,100%{opacity:.35}30%{opacity:1}}

/* Visitors chart: the averages are a key under the bars, not labels inside them. */
.page-work .wwu-spark-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;font:500 13px/1.3 "DM Sans",sans-serif;color:var(--soft);font-variant-numeric:tabular-nums}
.page-work .wwu-spark-key span{display:inline-flex;align-items:center;gap:8px}
.page-work .wwu-spark-key i{width:10px;height:10px;border-radius:2px;background:#2224266b}
.page-work .wwu-spark-key i.is-late{background:var(--ink)}

/* Tested in our builds: the caveat, then the link as a button. */
.page-work .wwu-proof-card p.wwu-proof-link{margin-top:-4px}

/* Customers: the link under each review reads as a button. */
.page-work .wwu-review figcaption a{margin-top:10px}

/* Made to order: the "Its page on [creations]" chip is a link button; its small label sits above the name. */
.page-work .wwu-case-rel span,.page-work .wwu-case-rel b{display:block}
.page-work .wwu-case-thumb,.page-work .wwu-case-toggle{display:none}

/* Inquiry: the four ways to work together sit above the form; Rates on request under Send. */
.page-work .wwu-contact .wwu-ways{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0 0 clamp(28px,3vw,40px);border-top:0}
.page-work .wwu-ways-title{grid-column:1/-1;margin:0 0 4px;padding-bottom:12px;border-bottom:1px solid #ffffff24;font:500 12px/1.3 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a9ea3}
.page-work .wwu-contact .wwu-way,.page-work .wwu-contact .wwu-way:nth-child(even){align-content:start;gap:4px;padding:14px 0 16px;border-left:0;border-bottom:1px solid #ffffff24}
.page-work .wwu-contact .wwu-way h3{font:500 15.5px/1.3 "DM Sans",sans-serif;color:#f4f4f2}
.page-work .wwu-contact .wwu-way p{font:400 13.5px/1.55 "DM Sans",sans-serif;color:#b9bcc0}
.page-work .wwu-contact .wwu-way p a{color:#f4f4f2}
.page-work .wwu-contact .wwu-rates{margin-top:16px;gap:6px;font-size:14px;color:#b9bcc0}
.page-work .wwu-contact .wwu-rates strong{font-size:14px;letter-spacing:0;color:#f4f4f2}
/* Send inquiry: the rounded button with a filled circle (light on the graphite panel). */
.page-work .wwu-contact .btn-submit{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 54px 0 20px;border-radius:12px;text-transform:none;letter-spacing:0;font:500 14px/1 "DM Sans",sans-serif}
.page-work .wwu-contact .btn-submit::after{content:"";position:absolute;right:7px;top:50%;translate:0 -50%;width:32px;height:32px;border-radius:50%;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.page-work .wwu-contact .btn-submit:focus-visible{outline:2px solid #f2f2f0;outline-offset:3px}

/* Phones (screen only: the print page is narrower than 760 px too). */
@media screen and (max-width:760px){
 /* Reach figures 2 x 2, like the Made to order figures. */
 .page-work .wwu-reach .wwu-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-work .wwu-reach .wwu-fig,.page-work .wwu-reach .wwu-fig+.wwu-fig{padding:20px 12px 22px 0;border-top:0;border-left:0}
 .page-work .wwu-reach .wwu-fig:nth-child(even){padding-left:16px;padding-right:0;border-left:1px solid #2224261f}
 .page-work .wwu-reach .wwu-fig:nth-child(n+3){border-top:1px solid #2224261f}
 .page-work .wwu-reach .wwu-fig-value{font-size:34px}
 .page-work .wwu-reach .wwu-fig-label{font-size:13.5px}
 .page-work .wwu-reach .wwu-fig-source{font-size:11.5px}
 /* Chart dates stay readable when the chart scales down. */
 .page-work .wwu-spark text{font-size:21px}
 /* Videos: thumbnail-left rows. */
 .page-work .wwu-vlist{gap:10px}
 .page-work .wwu-video,.page-work .wwu-vlist li:first-child .wwu-video{grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:6px;padding:10px;align-items:start}
 .page-work .wwu-video-media,.page-work .wwu-vlist li:first-child .wwu-video-media{grid-row:1/3;aspect-ratio:16/10;height:auto;min-height:0}
 .page-work .wwu-video-title,.page-work .wwu-vlist li:first-child .wwu-video-title{font-size:14.5px;line-height:1.3}
 .page-work .wwu-video-meta{font-size:12.5px;gap:8px}
 .page-work .wwu-video-kind{left:6px;top:6px;padding:3px 6px;font-size:9px}
 /* Tested: the figures in one row. */
 .page-work .wwu-proof-figs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .page-work .wwu-proof-figs b{font-size:30px}
 .page-work .wwu-proof-figs span{font-size:12.5px}
 .page-work .wwu-proof-card{padding:22px}
 /* Inquiry: one way per row. */
 .page-work .wwu-contact .wwu-ways{grid-template-columns:minmax(0,1fr)}
 /* Projects on phones (work-with-us-cases-v1.js): a compact row each (picture, name, month, title, Open the
    project); the case opens in place. The name chips above are redundant here. */
 .page-work .wwu-cases.is-collapsible{gap:10px}
 .page-work .wwu-orders:has(.wwu-cases.is-collapsible) .wwu-case-index{display:none}
 .page-work .is-collapsible .wwu-case-head{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"thumb who" "thumb title" "thumb toggle" "rel rel";gap:4px 14px;align-items:start}
 .page-work .is-collapsible .wwu-case>.wwu-case-head{padding:14px}
 .page-work .is-collapsible .wwu-case-thumb{display:block;grid-area:thumb;width:88px;height:88px;object-fit:contain;border-radius:10px;background:#f2f2f0}
 .page-work .is-collapsible .wwu-case-who{gap:4px 8px}
 .page-work .is-collapsible .wwu-case-no{display:none}
 .page-work .is-collapsible .wwu-case-who b{font-size:13.5px}
 .page-work .is-collapsible .wwu-case h3,.page-work .is-collapsible .wwu-case.is-feature h3{font-size:16.5px;line-height:1.25;letter-spacing:0}
 .page-work .is-collapsible .wwu-case-toggle{grid-area:toggle;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:38px;margin-top:6px;padding:4px 4px 4px 12px;border:1px solid #22242633;border-radius:12px;background:#fff;color:var(--ink);font:500 13px/1 "DM Sans",sans-serif;cursor:pointer}
 .page-work .is-collapsible .wwu-case-toggle i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff}
 .page-work .is-collapsible .wwu-case-toggle svg{width:14px;height:14px;transition:transform .25s}
 .page-work .is-collapsible .wwu-case.is-open .wwu-case-toggle svg{transform:rotate(180deg)}
 .page-work .is-collapsible .wwu-case-toggle:hover{border-color:var(--ink)}
 .page-work .is-collapsible .wwu-case-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
 .page-work .is-collapsible .wwu-case-rel{grid-area:rel;margin-top:12px}
 .page-work .is-collapsible .wwu-case:not(.is-open) .wwu-case-rel,.page-work .is-collapsible .wwu-case:not(.is-open)>.wwu-case-main{display:none!important}
 .page-work .is-collapsible .wwu-case-main{padding:4px 14px 20px}
}
@media print{
 .page-work .wwu-hero-art,.page-work .wwu-case-thumb,.page-work .wwu-case-toggle,.page-work .wwu-ways-title,.page-work .wwu-spark-key{display:none!important}
 .page-work .page-hero{padding-right:0!important}
 .page-work .wwu-contact .wwu-ways{grid-template-columns:repeat(4,1fr)!important;margin:0 0 2mm!important;border-top:1px solid #bbb!important}
 .page-work .wwu-contact .wwu-way,.page-work .wwu-contact .wwu-way:nth-child(even){border-color:#ddd!important}
 .page-work .wwu-contact .wwu-way h3,.page-work .wwu-contact .wwu-rates,.page-work .wwu-contact .wwu-rates strong{color:#111!important}
 .page-work .wwu-contact .wwu-rates{margin:0 0 2mm!important;font-size:8.5pt!important}
}
@media print{
 /* The link buttons print as plain text (the media kit predates them); the [creations] chip stays hidden. */
 html body.page-work .wwu-case-rel{display:none!important}
 html body.page-work .wwu-review figcaption a,html body.page-work .wwu-direct ul a{display:inline!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;font-size:inherit!important;font-weight:500!important}
 html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-direct ul a::after{display:none!important}
 html body.page-work .wwu-review figcaption a{margin-top:0!important}
}