@font-face{font-family:Hanken;src:url('assets/shared/HankenGrotesk.813b3f8fa0.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Sora;src:url('assets/brand/SoraVariable.84ff7096ae.ttf') format('truetype');font-weight:100 800;font-display:swap}

:root{--paper:#fff;--ink:#222725;--muted:#5e6561;--surface:#f5f5f5;--field:#e9ebec;--focus:#375d55;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--page-gutter:clamp(24px,5vw,88px);--section-gap:128px;--font-display:clamp(44px,4.3vw,64px);--product-ground:#eeeef0}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:94px;scrollbar-color:#9ca49e #f4f5f3}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Hanken,Arial,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{color:#fff;background:#3a5048}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button{border:0}
button,select{touch-action:manipulation}
input,textarea{caret-color:var(--focus)}
:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
button img{pointer-events:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--font-display)}
h3{font-size:22px;letter-spacing:-.025em}
p{max-width:70ch}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--page-gutter)}
.section{padding-block:var(--section-gap)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:64px;margin-bottom:56px}
.section-head>p{font-size:18px;line-height:1.65;max-width:410px;padding-bottom:4px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:15px 24px;background:var(--ink);color:#fff;border-radius:0;font-size:16px;font-weight:500;transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.button:active,.document:active{transform:scale(.98)}
.text-link{display:inline-flex;align-items:center;gap:20px;font-weight:500;font-size:16px;background:none;padding:0;min-height:44px;transition:color 160ms var(--ease-out)}
.text-link svg,.button svg{transition:transform 180ms var(--ease-out)}
.skip{position:fixed;top:8px;left:16px;padding:12px 20px;background:var(--ink);color:#fff;transform:translateY(-160%);z-index:100}
.skip:focus{transform:translateY(0)}

.header{height:88px;padding-inline:var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:32px;background:#fff;position:relative;z-index:20}
.wordmark{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;font-family:Sora,Hanken,sans-serif;font-size:31px;font-weight:800;letter-spacing:.025em;line-height:1;white-space:nowrap}
.brand-symbol{width:34px;height:46px;stroke:none}
.brand-name{display:block}
.desktop-nav{display:flex;align-items:center;gap:clamp(18px,1.8vw,30px);margin-left:auto;margin-right:10px;font-size:14px;white-space:nowrap}
.desktop-nav a{padding:12px 0;transition:color 160ms var(--ease-out)}
.header-cta{min-height:44px;padding:11px 18px;font-size:14px;gap:22px}
.header-cta svg{width:18px;height:18px}
.menu-toggle{display:none}
/* P021 Products category menu (desktop dropdown + mobile group), shared by all pages. */
/* P023 Products mega menu: anchored to the header (not the button), so it always stays inside the viewport. */
.nav-products{position:static}
.nav-products-toggle,.mobile-products-toggle{display:inline-flex;align-items:center;gap:6px;background:transparent;padding:12px 0;font-size:inherit;font-weight:inherit;line-height:inherit;transition:color 160ms var(--ease-out)}
.nav-chevron{width:14px;height:14px;transition:transform 180ms var(--ease-out)}
[aria-expanded=true]>.nav-chevron{transform:rotate(180deg)}
.products-menu{position:absolute;top:100%;left:var(--page-gutter);right:var(--page-gutter);z-index:25;white-space:normal}
.products-menu-panel{max-width:1180px;margin-left:auto;background:#fff;border-top:1px solid #e3e6e4;padding:24px 28px 16px;/* taste-skill-ignore: dropdown needs lift above page content. */box-shadow:0 18px 40px #1d232014,0 2px 6px #1d23200d;animation:menu-in 180ms var(--ease-out)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.products-menu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px}
.products-menu-item{display:flex;align-items:center;gap:16px;padding:8px 10px 8px 8px;min-height:96px;transition:background-color 160ms var(--ease-out)}
.products-menu-item img{width:80px;height:80px;flex-shrink:0;object-fit:contain;background:var(--product-ground)}
.products-menu-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.products-menu-name{font-size:15px;font-weight:500;line-height:1.25}
.products-menu-hint{font-size:13px;color:var(--muted);line-height:1.35}
.products-menu-item>svg{width:16px;height:16px;color:var(--muted);transition:transform 160ms var(--ease-out),color 160ms var(--ease-out)}
.products-menu-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;padding-top:6px;font-size:14px;font-weight:500;transition:color 160ms var(--ease-out)}
.products-menu-all svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.nav-products-toggle:hover,.products-menu-all:hover,.mobile-products-list a:hover{color:var(--focus)}
.products-menu-item:hover{background:#f5f6f6}
.products-menu-item:hover>svg{color:var(--ink);transform:translateX(3px)}}
.products-menu-item:focus-visible{outline-offset:2px}
@media(max-width:1240px){.products-menu-item{gap:12px;min-height:88px}.products-menu-item img{width:72px;height:72px}.products-menu-name{font-size:14px}}
@media(prefers-reduced-motion:reduce){.products-menu-panel{animation:none}}
/* Owner-selected product pixels blend with an empty studio plate. Products are not regenerated. */
.hero{--hero-silver:#e7e9ec;position:relative;isolation:isolate;background:var(--hero-silver) url('assets/brand/quanhu-studio-background-v2.917db0974d.webp') center/cover no-repeat;overflow:hidden;padding-block:28px 24px}
.hero-content{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);align-items:center;gap:12px;min-height:610px;padding-right:0}
.hero-copy{position:relative;z-index:1;padding-block:36px}
.hero h1{font-size:clamp(32px,3vw,49px);font-weight:500;line-height:1.12;letter-spacing:-.04em;text-wrap:initial}
.hero-intro{margin-top:28px}
.hero-intro>p{font-size:17px;line-height:1.7;max-width:43ch;margin-bottom:30px}
@media(min-width:1101px){
.hero-copy{align-self:start;padding-top:48px}
.hero-intro>p{width:calc(100% + 12px);max-width:60ch;font-size:16px}
}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-actions .text-link{gap:12px}
.hero-visual{width:calc(100% + 52px);max-width:none;aspect-ratio:1448/600;margin:24px 0 0 -26px;overflow:hidden;mix-blend-mode:multiply}
.hero-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 57%}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:0;font-size:13px;line-height:1.6}
.hero-bottom>a{display:flex;gap:18px;align-items:center;min-height:44px}
.hero-bottom>a svg{transform:rotate(90deg);width:18px;height:18px}

.products{background:var(--surface)}
.collection-bottom{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.collection-bottom>p{font-size:15px}
/* P023 catalog, category and product pages (generated by scripts/products.mjs). */
.shop-page{padding-bottom:var(--section-gap)}
.crumbs{padding-top:28px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";color:#a3aaa6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;transition:color 160ms var(--ease-out)}
.crumbs [aria-current]{color:var(--ink)}
.shop-head{padding-block:24px 48px;max-width:860px}
.shop-head h1{font-size:clamp(38px,4vw,58px);letter-spacing:-.04em}
.shop-head p{font-size:18px;line-height:1.65;color:var(--muted);margin-top:20px;max-width:62ch}
.shop-grid-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
.shop-count{font-size:15px;color:var(--muted);margin:-20px 0 28px;font-variant-numeric:tabular-nums}
.shop-grid .collection-photo img{object-fit:contain}
.shop-help{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:64px;padding-top:36px;border-top:1px solid #dfe2e0}
.shop-help p{font-size:16px;line-height:1.65}
.model-feature,.range-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:center;max-width:1180px}
.model-feature-photo,.range-feature-photo{display:block;background:var(--product-ground);aspect-ratio:1/1;overflow:hidden}
.model-feature-photo img,.range-feature-photo img{width:100%;height:100%;object-fit:contain;padding:5%}
.model-feature-body h2,.range-feature-body h2{font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.model-feature-body h2 a{transition:color 160ms var(--ease-out)}
.model-feature-body>p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:18px}
.model-feature-body .button,.range-feature-body .button{margin-top:28px}
.facts{margin:18px 0 0;display:grid;gap:8px}
.facts div{display:flex;gap:16px;font-size:16px}
.facts dt{color:var(--muted);min-width:80px}
.facts dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500}
.need-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;border-top:1px solid #dfe2e0}
.need-list li{padding:13px 0;border-bottom:1px solid #dfe2e0;font-size:16px}
.pdp-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 72px;align-items:start;padding-top:16px}
.pdp-media{background:var(--product-ground);aspect-ratio:1/1;overflow:hidden}
.pdp-media img{width:100%;height:100%;object-fit:contain;padding:3%}
.pdp-info{padding-top:12px}
.pdp-cat{font-size:14px;color:var(--muted)}
.pdp-cat a{display:inline-flex;align-items:center;min-height:44px;transition:color 160ms var(--ease-out)}
.pdp-info h1{font-size:clamp(32px,3.2vw,48px);letter-spacing:-.035em;margin-top:4px}
.pdp-summary{font-size:17px;line-height:1.7;margin-top:22px;color:var(--muted)}
.pdp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:30px}
.pdp-note{font-size:14px;line-height:1.65;color:var(--muted);margin-top:20px;max-width:46ch}
.pdp-section{margin-top:88px;padding-top:40px;border-top:1px solid #dfe2e0}
.pdp-section>h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:28px}
.spec-table{width:100%;max-width:860px;border-collapse:collapse;font-size:16px}
.spec-table th,.spec-table td{text-align:left;padding:14px 0;border-bottom:1px solid #e3e6e4;vertical-align:top}
.spec-table th{font-weight:500;width:34%;padding-right:24px;color:var(--muted)}
.custom-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.custom-list li{background:var(--surface);padding:24px}
.custom-list h3{font-size:19px}
.custom-list p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:10px}
.pdp-faq{max-width:860px;border-top:1px solid #dfe2e0}
.pdp-faq details{border-bottom:1px solid #dfe2e0}
.pdp-faq summary{cursor:pointer;min-height:56px;display:flex;align-items:center;font-size:17px;font-weight:500;padding:12px 0}
.pdp-faq p{font-size:16px;line-height:1.7;color:var(--muted);padding-bottom:20px}
@media(hover:hover) and (pointer:fine){.crumbs a:hover,.pdp-cat a:hover,.model-feature-body h2 a:hover{color:var(--focus)}}
@media(max-width:850px){.model-feature,.range-feature,.pdp-top{grid-template-columns:1fr;gap:28px}
.model-feature-photo,.range-feature-photo{max-width:520px}
.custom-list{grid-template-columns:1fr;gap:12px}
.pdp-section{margin-top:64px}}
@media(max-width:600px){.shop-head{padding-block:12px 32px}
.shop-head p{font-size:16px}
.shop-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-help{flex-direction:column;align-items:flex-start;gap:12px;margin-top:44px}
.pdp-info{padding-top:0}
.pdp-summary{font-size:16px}
.spec-table{font-size:15px}
.spec-table th{width:40%}
.custom-list li{padding:18px}
.pdp-section{margin-top:48px;padding-top:32px}}

/* P020 product collections: homepage #products range grid and products.html catalog. Scoped to these blocks only. */
.collection-head{align-items:flex-end}
.collection-head h2{font-size:clamp(34px,3.2vw,48px);line-height:1.1}
.collection-head p{margin-top:18px;font-size:17px;line-height:1.65;max-width:56ch;color:var(--muted)}
.collection-head>.text-link{flex-shrink:0}
.collection-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.collection-card{display:flex;flex-direction:column;height:100%}
.collection-photo{display:block;background:var(--product-ground);aspect-ratio:4/3;overflow:hidden}
.collection-photo img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform 450ms var(--ease-out)}
.collection-name{display:block;font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:20px 0 0}
.collection-text{font-size:15px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:42ch}
.collection-action{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;min-height:44px;font-size:15px;font-weight:500}
.collection-action svg{width:18px;height:18px;transition:transform 180ms var(--ease-out)}
.collection-card:focus-visible{outline-offset:6px}
.catalog-page{padding-bottom:var(--section-gap)}
.catalog-intro{padding-block:72px 40px}
.catalog-intro h1{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.04em}
.catalog-intro>p{font-size:18px;line-height:1.65;color:var(--muted);margin-top:22px;max-width:62ch}
.catalog-nav{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:32px 0 0;padding:20px 0 0;border-top:1px solid #dfe2e0}
.catalog-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;transition:color 160ms var(--ease-out)}
.catalog-section{padding-block:56px;border-top:1px solid #dfe2e0;scroll-margin-top:24px}
.catalog-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 64px;margin-bottom:36px}
.catalog-section-head h2{font-size:clamp(28px,2.6vw,38px);line-height:1.1}
.catalog-section-head p{font-size:16px;line-height:1.7;color:var(--muted)}
.model-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.model-list-single{grid-template-columns:minmax(0,1fr)}
.model-list-single .model{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px 56px;align-items:center}
.model{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start}
.model-photo,.range-photo{display:block;background:var(--product-ground);aspect-ratio:1/1;overflow:hidden}
.model-photo img,.range-photo img{width:100%;height:100%;object-fit:contain;padding:6%}
.model h3{font-size:21px;line-height:1.2}
.model-facts{margin:16px 0 0;display:grid;gap:8px}
.model-facts div{display:flex;gap:12px;font-size:15px}
.model-facts dt{color:var(--muted);min-width:72px}
.model-facts dd{margin:0;font-variant-numeric:tabular-nums}
.model-note{font-size:15px;line-height:1.65;margin-top:14px;color:var(--muted)}
.model .button,.range .button{margin-top:22px;min-height:48px;padding:12px 20px;gap:18px;font-size:15px}
.range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 64px;align-items:center}
.range-photo{max-width:440px}
.range-body h2{font-size:clamp(28px,2.6vw,38px);line-height:1.1;margin-bottom:18px}
.range-body p{font-size:16px;line-height:1.7;color:var(--muted)}
.catalog-help{border-top:1px solid #dfe2e0;padding-top:48px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.catalog-help p{font-size:16px;line-height:1.65}
@media(hover:hover) and (pointer:fine){.collection-card:hover .collection-photo img{transform:scale(1.03)}
.collection-card:hover .collection-action svg{transform:translateX(4px)}
.catalog-nav a:hover{color:var(--focus)}}
@media(max-width:1100px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.model-list{grid-template-columns:1fr}
.model,.model-list-single .model{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
@media(max-width:850px){.collection-head{flex-direction:column;align-items:flex-start;gap:20px}
.catalog-section-head,.range{grid-template-columns:1fr}
.catalog-intro{padding-block:48px 28px}}
@media(max-width:600px){.collection-grid{gap:28px 14px}
.collection-photo{aspect-ratio:1/1}
.collection-photo img{padding:4%}
.collection-name{font-size:17px;margin-top:14px}
.collection-text{font-size:14px;line-height:1.55}
.collection-action{font-size:14px;gap:8px}
.collection-head p{font-size:15px}
.catalog-intro>p{font-size:16px}
.catalog-section{padding-block:40px}
.model,.model-list-single .model{grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:18px}
.model h3{font-size:18px}
.model-facts div,.model-note{font-size:14px}
.model-facts dt{min-width:64px}
.catalog-help{flex-direction:column;align-items:flex-start;gap:12px}}
/* P020: short desktop/tablet description lines keep the right-column text clear of the fixed contact rail. */
@media(min-width:601px){.collection-text{max-width:28ch}}
@media(max-width:359px){.collection-grid{grid-template-columns:1fr}
.model,.model-list-single .model{grid-template-columns:1fr}
.model-photo{max-width:240px}}
.factory-photo{width:100%;position:relative;padding:0;display:block;background:var(--surface);overflow:hidden}
.factory-photo>img{width:100%;height:540px;object-fit:cover;object-position:center 55%;transition:opacity 220ms var(--ease-out)}
#factory-image[data-crop=forming]{object-position:center 72%}
#factory-image[data-crop=dispatch]{object-position:center 62%}
.photo-expand{position:absolute;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;color:var(--ink);background:#fff;padding:12px 17px;font-size:14px}
.photo-expand svg{height:18px;width:18px}
.process-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.process-switch button{background:var(--surface);text-align:left;padding:23px;min-height:93px;transition:color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
.process-switch span,.process-switch small{display:block}
.process-switch span{font-size:18px;font-weight:500}
.process-switch small{font-size:14px;color:var(--muted);margin-top:5px}
.process-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.process-switch button[aria-pressed=true] small{color:#d7ded8}
.stage-caption{margin-top:20px;font-size:15px;color:var(--muted);min-height:24px}
.services{display:grid;grid-template-columns:1fr 1.25fr;gap:90px;margin-top:90px}
.services h3{font-size:34px;line-height:1.15}
.services p{font-size:16px;line-height:1.75;color:var(--muted);margin:24px 0;max-width:42ch}
.service-options{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.service-options dt{font-size:20px;font-weight:500;letter-spacing:-.02em}
.service-options dd{font-size:15px;line-height:1.75;color:var(--muted);margin:12px 0 0;max-width:30ch}
.blog-page{min-height:70vh}
.blog-page h1{font-size:clamp(44px,5vw,72px);max-width:850px}
.blog-intro{font-size:21px;line-height:1.6;margin-block:32px 56px;max-width:56ch;color:var(--muted)}
.resource-links{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.resource-links a{padding-block:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.resource-links strong{font-size:23px;font-weight:500}
.resource-links span{font-size:16px;color:var(--muted)}
.quality{background:var(--surface)}
.quality-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:72px}
.testing-figure{margin:0;align-self:start}
.testing-figure>button{position:relative;width:100%;display:block;padding:0;background:#e4e7e2}
.testing-figure img{width:100%;height:460px;object-fit:cover;object-position:center}
.testing-figure figcaption{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.testing-figure strong{font-size:23px;letter-spacing:-.02em;font-weight:500}
.testing-figure figcaption span{font-size:15px;color:var(--muted)}
.documents{display:flex;flex-direction:column;gap:12px}
.document{display:flex;align-items:center;gap:24px;padding:18px 20px;text-align:left;background:#fff;min-height:135px;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.document>img{width:70px;height:100px;object-fit:contain}
.document>span{display:flex;flex:1;flex-direction:column;gap:3px}
.document strong{font-size:23px;font-weight:500;letter-spacing:-.02em}
.document>span>span{font-size:15px}
.document small{font-size:13px;color:var(--muted);margin-top:6px}
.document>svg{width:18px;height:18px}
.document-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:6px}
.partnership{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:100px}
.partnership>img{width:100%;height:360px;object-fit:cover;object-position:center 45%}
.partnership h3{font-size:clamp(29px,2.65vw,40px);line-height:1.1;max-width:500px}
.partnership p{font-size:16px;color:var(--muted);margin:25px 0;max-width:45ch;line-height:1.75}
.buyer-questions>h2{align-self:start}
.buyer-questions{display:grid;grid-template-columns:1fr 1.3fr;gap:96px}
.questions details{padding-block:22px}
.questions details+details{margin-top:7px}
.questions summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:20px;letter-spacing:-.02em;cursor:pointer;min-height:44px}
.questions summary::-webkit-details-marker{display:none}
.questions summary svg{width:19px;height:19px;transition:transform 160ms var(--ease-out)}
.questions details[open] summary svg{transform:rotate(45deg)}
.questions details p{font-size:16px;color:var(--muted);line-height:1.8;max-width:61ch;padding-top:20px;padding-right:30px}

.project{background:#e9ebed}
.project-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:100px}
.project-intro>p{font-size:17px;line-height:1.8;margin-top:32px}
.project-location{display:flex;flex-direction:column;font-size:14px;gap:7px;margin-top:65px;color:var(--muted)}
.project-location strong{font-size:18px;color:var(--ink);font-weight:500}
label{display:flex;flex-direction:column;font-size:14px;gap:10px}
input,select,textarea{width:100%;border:0;border-radius:0;padding:14px 16px;background:#fff;color:var(--ink);font-size:16px;min-height:52px}
input::placeholder,textarea::placeholder{color:#686f6a;opacity:1}
textarea{resize:vertical;min-height:125px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
form>.button{margin-top:28px}
.form-note{font-size:13px;color:var(--muted);margin-top:15px}
.brief-result{background:white;padding:32px}
.brief-result h3{font-size:30px}
.brief-result>p{font-size:14px;color:var(--muted);margin-top:14px}
.brief-result dl>div{margin-top:18px}
.brief-result dt{font-size:13px;color:var(--muted)}
.brief-result dd{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px}
.brief-actions{display:flex;gap:24px;margin-top:26px;align-items:center;flex-wrap:wrap}
/* Site-wide footer (P015-P017): src/partials/footer.html. Deep graphite-green field, Sora headings, Hanken body; right inset keeps contact and Back to top clear of the fixed rail. */
.site-footer{--footer-bg:#263c36;--footer-title:#f4f2e9;--footer-text:#c5d1c7;--footer-accent:#d1dec2;--footer-line:#536a5d;background:var(--footer-bg);color:var(--footer-text);isolation:isolate;padding-block:64px 28px;font-size:15px;font-weight:450;line-height:1.6;letter-spacing:.005em}
.site-footer .wordmark{color:var(--footer-title)}
/* Source emblem is an opaque RGB PNG (black mark on white): invert it and screen it onto the footer field so only the mark remains, light on dark. */
.site-footer .brand-symbol{filter:invert(1);mix-blend-mode:screen}
.site-footer ::selection{background:var(--footer-accent);color:var(--footer-bg)}
.site-footer :focus-visible{outline-color:var(--footer-accent)}
.footer-main{display:grid;grid-template-columns:1.45fr 1.1fr 1.05fr .95fr 1.45fr;gap:clamp(20px,1.9vw,40px);align-items:start;padding-right:max(var(--page-gutter),164px)}
.footer-main>*{min-width:0}
.footer-brand .wordmark{font-size:clamp(28px,2.3vw,32px);font-weight:750;letter-spacing:.03em}
.footer-brand .brand-symbol{width:39px;height:53px}
.footer-brand p{margin-top:20px;max-width:32ch;font-size:15px;line-height:1.75;text-wrap:pretty;color:var(--footer-text)}
.footer-brand-link{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-top:10px;font-size:14px;font-weight:500;color:var(--footer-accent);transition:color 160ms var(--ease-out)}
.footer-brand-link svg{width:16px;height:16px;transition:transform 180ms var(--ease-out)}
.footer-heading{font-family:Sora,Hanken,sans-serif;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;min-height:2.8em;margin:6px 0 14px;text-wrap:balance;color:var(--footer-title)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer address{font-style:normal}
.footer-col li>a,.footer-col li>span{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:15px;line-height:1.6;text-wrap:balance;color:var(--footer-text);transition:color 160ms var(--ease-out)}
.footer-col li>a.footer-project{color:var(--footer-accent);font-weight:500}
.footer-project svg{width:16px;height:16px;transition:transform 180ms var(--ease-out)}
.footer-email{overflow-wrap:anywhere}
.footer-col li.footer-note{font-size:13px;line-height:1.6;color:var(--footer-text);margin-top:2px;max-width:30ch}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--footer-line);padding-right:max(var(--page-gutter),164px)}
.footer-bottom p{font-size:13px;color:var(--footer-text)}
.back-top{display:inline-flex;align-items:center;gap:12px;min-height:32px;font-size:14px;color:var(--footer-accent)}
.back-top svg{transform:rotate(-90deg);height:18px;width:18px}
@media(hover:hover) and (pointer:fine){.footer-col li>a:hover,.footer-col li>a.footer-project:hover,.footer-brand-link:hover,.site-footer .back-top:hover{color:var(--footer-title);text-decoration:underline}
.footer-project:hover svg,.footer-brand-link:hover svg{transform:translateX(4px)}}
/* Five columns need ~1241px beside the fixed rail; below that the footer uses three columns (two between 601 and 760px) so no label is squeezed. */
@media(max-width:1240px){.footer-main{grid-template-columns:repeat(3,minmax(0,1fr))}
.footer-brand{grid-column:1/-1}
.footer-contact{grid-column:span 2}}
@media(min-width:601px) and (max-width:760px){.footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}}

dialog{border:0;padding:28px;max-width:1000px;width:calc(100% - 48px);max-height:calc(100dvh - 48px);overflow:auto;color:var(--ink);background:#fff;/* taste-skill-ignore: native dialog is a floating overlay, not an element at rest. */box-shadow:0 20px 80px #0003}
dialog::backdrop{background:#161c19b8}
.viewer-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px}
.viewer-head h2{font-size:26px}
.close-viewer{background:var(--surface);height:44px;width:44px;flex-shrink:0;display:grid;place-items:center}
.viewer-image{background:var(--surface);display:flex;justify-content:center;padding:16px}
.viewer-image img{max-height:62dvh;width:auto;object-fit:contain}
#viewer-note{font-size:14px;color:var(--muted);margin:20px 0 8px;max-width:90ch}
body:has(dialog[open]){overflow:hidden}

@media(hover:hover) and (pointer:fine){.button:hover{background:#414b44}
.button:hover svg,.text-link:hover svg{transform:translateX(4px)}
.text-link:hover,.desktop-nav a:hover{color:var(--focus)}
.document:hover{background:#e9eeea}
.process-switch button:not([aria-pressed=true]):hover{background:#e4e8e3}
}

@media(min-width:1101px) and (prefers-reduced-motion:no-preference){.hero-visual{animation:lineup-settle 900ms var(--ease-out) both}
@keyframes lineup-settle{from{transform:translateY(10px)}to{transform:translateY(0)}}}

@media(max-width:1100px){:root{--section-gap:100px}
.desktop-nav{gap:22px;margin-right:0}
.header{gap:24px}




.project-layout{gap:56px}
.quality-layout,.partnership{gap:36px}
.process-switch button{padding:18px}
.process-switch span{font-size:16px}
.testing-figure img{height:440px}
.document{gap:16px;padding:14px}
.document>img{width:58px}
.document>span>span{font-size:14px}
}

@media(max-width:1100px){
.desktop-nav,.header-cta{display:none}
.menu-toggle{display:flex;align-items:center;gap:14px;background:transparent;font-size:15px;padding:12px 0 12px 12px;min-height:44px}
.menu-lines{width:22px;height:12px;position:relative}
.menu-lines:before,.menu-lines:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:transform 160ms var(--ease-out)}
.menu-lines:before{top:1px}
.menu-lines:after{bottom:1px}
.menu-toggle[aria-expanded=true] .menu-lines:before{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines:after{transform:translateY(-4px) rotate(-45deg)}
#mobile-nav{position:absolute;left:0;right:0;top:88px;background:#fff;padding:20px var(--page-gutter) 30px;/* taste-skill-ignore: mobile navigation is a floating overlay. */box-shadow:0 24px 36px #00000012}
#mobile-nav a{display:block;font-size:22px;padding:14px 0}
#mobile-nav{max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
.mobile-products-toggle{display:flex;width:100%;justify-content:space-between;font-size:22px;padding:14px 0;min-height:44px;text-align:left}
.mobile-products-toggle .nav-chevron{width:20px;height:20px}
.mobile-products-list{list-style:none;margin:0 0 8px;padding:0 0 0 16px;border-left:1px solid #e3e6e4}
#mobile-nav .mobile-products-list a{display:flex;align-items:center;min-height:44px;font-size:17px;padding:10px 0}
.hero-content{min-height:540px;gap:16px}
.hero h1{font-size:clamp(28px,3vw,33px)}
.hero-intro>p{font-size:16px}
.hero-visual{width:calc(100% + 40px);margin-left:-20px}
.hero-actions{gap:16px}
.hero-actions .button{gap:16px;padding-inline:18px;font-size:15px}
.hero-actions .text-link{font-size:15px}
.hero{padding-top:20px}
.services{gap:48px}
}

@media(max-width:850px){:root{--section-gap:80px;--page-gutter:32px;--font-display:44px}
.header{height:76px}
#mobile-nav{top:76px;max-height:calc(100dvh - 76px);overflow-y:auto}
.hero{padding-top:32px;background-position:62% center}
.hero-content{grid-template-columns:1fr;gap:28px;min-height:0;padding-right:var(--page-gutter)}
.hero-copy{padding:30px 24px}
.hero h1{font-size:clamp(44px,6.4vw,54px)}
.hero-intro{margin-top:26px}
.hero-intro>p{font-size:16px;max-width:65ch;margin-bottom:24px}
.hero-actions{gap:24px}
.hero-visual{width:calc(100% + var(--page-gutter)*2);margin:0 0 0 calc(-1*var(--page-gutter));aspect-ratio:1448/550}
.services{grid-template-columns:1fr;gap:36px;margin-top:64px}
.services p{max-width:60ch}
.service-options dd{max-width:40ch}
.resource-links{gap:24px}
.wordmark{font-size:29px}
.brand-symbol{width:31px;height:42px}
.hero-bottom{font-size:12px}
.section-head{gap:40px;margin-bottom:42px}
.section-head>p{font-size:16px;max-width:290px}
.factory-photo>img{height:420px}
.process-switch{gap:8px}
.process-switch button{padding:14px 12px}
.process-switch small{font-size:12px}
.quality-layout{grid-template-columns:1fr;gap:40px}
.testing-figure img{height:430px}
.documents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.document{flex-direction:column;align-items:flex-start;padding:22px 16px;position:relative;gap:16px}
.document>img{width:100%;height:160px}
.document>svg{position:absolute;right:14px;bottom:18px}
.document>span>span{font-size:13px}
.document small{padding-right:15px;font-size:12px}
.document-note{grid-column:1/-1;font-size:12px}
.partnership{gap:36px;margin-top:64px}
.partnership>img{height:320px}
.partnership h3{font-size:29px}
.buyer-questions{grid-template-columns:1fr;gap:30px}
.buyer-questions h2 br{display:none}
.questions summary{font-size:19px}
.project-layout{gap:35px;grid-template-columns:.85fr 1.15fr}
.form-row{grid-template-columns:1fr;gap:20px;margin-bottom:20px}
}

@media(max-width:600px){:root{--page-gutter:24px;--section-gap:72px;--font-display:40px}
html{scroll-padding-top:24px}
body{font-size:16px}
.header{height:72px}
.hero{padding-block:24px 16px}
.hero-content{padding-inline:16px}
.hero-copy{padding:26px 16px}
.hero h1{font-size:clamp(24px,7.5vw,40px);line-height:1.12;max-width:100%}
.hero-content{gap:24px}
.hero-intro{display:block;margin-top:24px}
.hero-intro>p{font-size:15px;line-height:1.7;max-width:42ch;margin-bottom:22px}
.hero-visual{width:calc(100% + 32px);margin:4px 0 0 -16px}
.hero-actions{gap:16px}
.hero-actions .text-link{font-size:14px;gap:8px}
.hero-bottom{gap:16px;font-size:12px;margin-top:16px}
.hero-bottom>span{max-width:150px}
.services h3{font-size:30px}
.services p{font-size:15px}
.service-options{gap:28px 24px}
.service-options dt{font-size:18px}
.service-options dd{font-size:14px}
.blog-intro{font-size:18px;margin-block:26px 40px}
.resource-links{grid-template-columns:1fr;gap:12px}
.wordmark{font-size:26px;gap:10px}
.brand-symbol{width:28px;height:38px}
#mobile-nav{top:72px;max-height:calc(100dvh - 72px)}




.hero .button{min-height:48px;padding:12px 20px;font-size:14px;gap:24px}





.hero-bottom>a{gap:8px}
.hero-bottom>a svg{height:16px;width:16px}
.section-head{display:block;margin-bottom:34px}
.section-head>p{font-size:15px;max-width:40ch;margin-top:24px;line-height:1.65}
.collection-bottom{align-items:flex-start;flex-direction:column;gap:16px;margin-top:32px}
.collection-bottom>p{font-size:13px}
.text-link{font-size:14px}
.factory-photo>img{height:300px;object-position:center}
#factory-image{object-position:center 55%}
#factory-image[data-crop=forming]{object-position:78% 70%}
#factory-image[data-crop=dispatch]{object-position:22% 60%}
.photo-expand{right:14px;bottom:14px;padding:10px}
.photo-expand>span{display:none}
.process-switch{grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.process-switch button{padding:16px;min-height:80px}
.process-switch span{font-size:15px}
.process-switch small{font-size:12px}
.stage-caption{font-size:13px;line-height:1.7;min-height:44px}




.testing-figure img{height:290px}
.testing-figure strong{font-size:22px}
.testing-figure figcaption span{font-size:13px}
.quality-layout{gap:32px}
.documents{display:flex;gap:10px}
.document{flex-direction:row;align-items:center;gap:20px;padding:16px;min-height:130px}
.document>img{width:60px;height:95px}
.document>span>span{font-size:13px}
.document>svg{position:static;width:16px;height:16px}
.document strong{font-size:23px}
.document small{font-size:12px}
.document-note{font-size:12px;margin-top:7px}
.partnership{grid-template-columns:1fr;gap:32px;margin-top:64px}
.partnership>img{height:280px}
.partnership h3{font-size:29px}
.partnership p{font-size:15px;margin-block:22px}
.buyer-questions h2 br{display:block}
.buyer-questions{gap:22px}
.questions details{padding-block:16px}
.questions summary{font-size:17px;gap:22px;line-height:1.4}
.questions details p{font-size:14px;padding-right:0}
.project-layout{grid-template-columns:1fr;gap:40px}
.project-intro>p{font-size:15px;margin-top:26px}
.project-location{margin-top:30px;font-size:13px}
.project-location strong{font-size:17px}
.form-row{gap:20px}
label{font-size:13px}
.form-note{font-size:12px}
.brief-result{padding:24px}
.brief-result h3{font-size:27px}
.site-footer{padding-top:48px}
.footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding-right:var(--page-gutter)}
.footer-contact{grid-column:1/-1}
.footer-brand .wordmark{font-size:29px}
.footer-brand .brand-symbol{width:32px;height:44px}
.footer-col li>a,.footer-col li>span,.footer-brand-link,.back-top{min-height:44px}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:4px;padding-right:var(--page-gutter)}
.footer-bottom p{font-size:12px}
dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:18px}
.viewer-head h2{font-size:21px}
.viewer-image{padding:8px}
.viewer-image img{max-height:55dvh}
#viewer-note{font-size:12px}
}

@media(max-width:380px){
.footer-contact{grid-column:1/-1}
.footer-heading{font-size:15px}
}

/* Site-wide inquiry rail (P009/P010): fixed bottom-right, labels always visible; fixed, so it never shifts page content. */
.inquiry-dock{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));top:auto;transform:none;z-index:30;display:flex;flex-direction:column;gap:10px}
.inquiry-dock-link{display:flex;align-items:center;gap:6px;width:124px;height:44px;padding:0 10px;border-radius:22px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;/* taste-skill-ignore: floating control needs lift above content. */box-shadow:0 3px 10px #1d232014,0 1px 2px #1d232014;transition:background-color 160ms var(--ease-out)}
.inquiry-dock-link svg{width:20px;height:20px;flex-shrink:0}
.inquiry-dock-form{background:#264b68;color:#fff}
.inquiry-dock-whatsapp svg{color:#147d43}
.inquiry-dock-email svg{color:#006d77}
.inquiry-dock-label{white-space:nowrap}
.inquiry-dock-link:focus-visible{outline-offset:3px}
@media(hover:hover) and (pointer:fine){.inquiry-dock-link:hover{background:#eef1f0}
.inquiry-dock-form:hover{background:#1d3b52}}
@media(pointer:coarse) and (min-width:601px){.inquiry-dock-link{height:auto;min-height:44px}}
body:has(#mobile-nav:not([hidden])) .inquiry-dock,body:has(dialog[open]) .inquiry-dock{display:none}
@media(max-width:600px){/* Compact bottom-right column (no full-width bar): three 116x48 pills, gap 10 = 164px tall, 12px from the right and 24px from the bottom. */
.inquiry-dock{left:auto;top:auto;transform:none;right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:auto;flex-direction:column;gap:10px}
.inquiry-dock-link{width:116px;height:48px;min-height:48px;padding:0 9px;gap:6px;border-radius:24px;font-size:12px}
.inquiry-dock-link svg{width:20px;height:20px;flex-shrink:0}
.inquiry-dock-link:focus-visible{outline-offset:2px}
/* Rail stays visible; reserve its height (24 + 164 + 8 = 196) so focused fields, the submit button and the footer scroll clear of it. */
html{scroll-padding-bottom:calc(196px + env(safe-area-inset-bottom))}
input,select,textarea,button,.brief-result{scroll-margin-bottom:calc(196px + env(safe-area-inset-bottom))}
.project{padding-bottom:calc(var(--section-gap) + 180px + env(safe-area-inset-bottom))}
.footer{padding-bottom:calc(48px + 180px + env(safe-area-inset-bottom))}}

.seo-reading{max-width:72ch;line-height:1.7;margin:0 0 1em}
.seo-context-links{display:flex;flex-wrap:wrap;gap:18px 32px;margin:28px 0 0}
.shop-page .pdp-section .custom-list p{line-height:1.65}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}

}

/* P031: category overview/comparison, focus-model gallery and local inquiry brief. Scoped .p031-* only. */
.p031-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p031-overview{display:grid;gap:0;max-width:860px;margin:0;font-size:16px}
.p031-overview>div{display:grid;grid-template-columns:34% 1fr;padding:14px 0;border-bottom:1px solid #e3e6e4}
.p031-overview dt{color:var(--muted);font-weight:500;padding-right:24px}
.p031-overview dd{margin:0}
.p031-gap{color:var(--muted);font-size:14px}
.p031-table-wrap{overflow-x:auto;max-width:100%}
.p031-table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.p031-compare{min-width:560px;table-layout:fixed;width:100%}
.p031-compare .p031-c-model{width:18%}
.p031-compare .p031-c-product{width:42%}
.p031-compare .p031-c-cap,.p031-compare .p031-c-mat{width:20%}
.p031-compare th,.p031-compare td{overflow-wrap:anywhere;padding-right:16px}
.p031-compare th:last-child,.p031-compare td:last-child{padding-right:0}
.p031-table-note{font-size:14px;color:var(--muted);margin-top:12px;max-width:62ch}
.p031-compare thead th{font-size:14px;color:var(--muted);font-weight:500}
.p031-compare th[scope="row"]{width:auto;color:var(--ink)}
.p031-compare a{text-decoration:underline;text-underline-offset:3px}
.p031-sub{font-size:18px;margin-top:28px}
.p031-related{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.p031-related li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.p031-related span{font-size:15px;color:var(--muted)}
.p031-steps{margin:18px 0 0;padding-left:22px;max-width:62ch;font-size:16px;line-height:1.7;color:var(--muted)}
.p031-gallery{margin-top:16px}
.p031-gallery-label{font-size:14px;color:var(--muted)}
.p031-thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.p031-thumb{display:block;width:72px;height:72px;padding:0;border:1px solid #d9dddb;background:var(--product-ground);cursor:pointer}
.p031-thumb img{width:100%;height:100%;object-fit:contain}
.p031-thumb:not([data-main]){background:#fff}
.pdp-media.p031-white{background:#fff}
.p031-thumb[aria-pressed="true"]{border:2px solid var(--ink)}
.p031-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.p031-caption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:52ch}
.p031-inquiry form{max-width:860px;margin-top:20px}
.p031-inquiry input,.p031-inquiry select,.p031-inquiry textarea{border:1px solid #cfd4d2}
.p031-inquiry input[readonly]{background:var(--surface);color:var(--muted)}
.p031-inquiry form>label{margin-bottom:24px}
.p031-intent{border:0;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px}
.p031-intent legend{font-size:14px;margin-bottom:10px;padding:0}
.p031-intent label{flex-direction:row;align-items:center;gap:8px;font-size:16px}
.p031-intent input{width:18px;min-height:18px;height:18px;padding:0}
.p031-fixed{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;margin-bottom:24px}
.p031-brief{max-width:860px;margin-top:20px;background:var(--surface);padding:28px}
.p031-brief h3{font-size:22px}
.p031-brief textarea{margin-top:16px;font-size:15px;border:1px solid #cfd4d2;white-space:pre-wrap}
.p031-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.p031-inquiry .form-status{min-height:1.5em;font-size:14px;color:#8a2a1f;margin-top:4px}
@media(max-width:850px){.p031-fixed{grid-template-columns:1fr}.p031-overview>div{grid-template-columns:1fr;gap:4px}}

/* P032 category pagination: static numbered links after the product grid; flat graphite, no animation. */
.product-list{scroll-margin-top:24px}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:56px;max-width:100%}
.pager-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.pager-num,.pager-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding-inline:12px;border:1px solid #cfd4d2;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.pager-num[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pager-prev svg{transform:scaleX(-1)}
.pager-step svg{width:18px;height:18px}
.pager-void{visibility:hidden}
.pager a:focus-visible{outline-offset:2px}
@media(hover:hover) and (pointer:fine){.pager a:not([aria-current]):hover{border-color:var(--ink)}}
@media(max-width:600px){.pager{margin-top:40px;gap:6px;flex-wrap:nowrap}.pager-list{gap:6px;flex:0 1 auto;min-width:0}.pager-step{flex:none}
.pager-list:has(>li:nth-child(5)){display:grid;grid-template-columns:repeat(3,44px)}}
@media(max-width:360px){.pager-list:has(>li:nth-child(4)){display:grid;grid-template-columns:repeat(2,44px)}.pager-list:has(>li:nth-child(5)){grid-template-columns:repeat(3,44px)}}
/* P037c contact page (contact.html), scoped to .iq-* */
.iq-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start;padding-bottom:96px}
.iq-preview{font-size:14px;line-height:1.6;color:var(--ink);background:var(--surface);padding:14px 18px;margin-bottom:28px;max-width:62ch}
.iq-context{font-size:16px;font-weight:600;margin-bottom:24px}
.iq-form{background:var(--surface);padding:32px}
.iq-form label{margin-bottom:0}
.iq-form>label{margin-bottom:24px}
.iq-req,.iq-opt{color:var(--muted);font-weight:400}
.iq-intent{border:0;padding:0;margin:0 0 24px;display:flex;gap:28px;flex-wrap:wrap}
.iq-intent legend{font-size:14px;margin-bottom:12px}
.iq-radio{flex-direction:row;align-items:center;gap:10px;font-size:16px}
.iq-radio input{width:20px;min-height:20px;height:20px;accent-color:var(--focus)}
.iq-error{color:#9b2c1f;font-size:14px;margin-top:4px}
.iq-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.iq-status{font-size:16px;line-height:1.6;background:var(--surface);padding:16px 20px;margin-bottom:24px;max-width:62ch}
.iq-status[data-kind="error"]{color:#9b2c1f}
.iq-brief{background:var(--surface);padding:32px}
.iq-brief h2{font-size:26px}
.iq-brief-note{font-size:14px;color:var(--muted);margin-top:12px}
.iq-brief textarea{margin-top:18px;border:1px solid #cfd4d2;font-size:16px;white-space:pre-wrap}
.iq-side h2{font-size:20px;margin-bottom:14px}
.iq-side h2+*{margin-bottom:32px}
.iq-side p{margin-bottom:10px;font-size:16px}
.iq-side p+h2{margin-top:32px}
@media (max-width:900px){.iq-layout{grid-template-columns:1fr;gap:48px}.iq-form,.iq-brief{padding:22px 18px}}
/* P043 products.html hub: intro actions, jump links and editorial sections below the nine cards. Scoped .catalog-hub* only. */
.catalog-hub-page{--hub-line:#dfe2e0}
.catalog-hub-page [id^="catalog-"]{scroll-margin-top:24px}
.catalog-hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:32px}
.catalog-hub-jumps ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.catalog-hub-jumps a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;text-decoration:underline;text-decoration-color:#b9bfbc;text-underline-offset:5px;transition:color 160ms var(--ease-out),text-decoration-color 160ms var(--ease-out)}
.catalog-hub{margin-top:var(--section-gap);padding-top:56px;border-top:1px solid var(--hub-line)}
.catalog-hub h2{font-size:clamp(30px,2.8vw,40px);line-height:1.12;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.catalog-hub h3{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.catalog-hub p{font-size:17px;line-height:1.7;color:var(--muted);max-width:66ch}
.catalog-hub-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.catalog-hub-row-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.catalog-hub-copy>h2{margin-bottom:24px}
.catalog-hub-copy>p+p{margin-top:16px}
.catalog-hub-copy>.text-link{margin-top:24px}
.catalog-hub p.catalog-hub-note{font-size:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hub-line)}
.catalog-hub-photo{margin:0}
.catalog-hub-photo img{display:block;width:100%;height:auto;background:var(--surface);object-fit:cover}
.catalog-hub-photo-tall img{aspect-ratio:4/5}
.catalog-hub-photo-wide img{aspect-ratio:4/3}
.catalog-hub-photo figcaption{font-size:14px;color:var(--muted);margin-top:12px}
.catalog-hub-options{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px}
.catalog-hub-options li{padding-top:20px;border-top:1px solid var(--ink)}
.catalog-hub-options p,.catalog-hub-steps p{font-size:16px;margin-top:10px}
.catalog-hub-terms,.catalog-hub-process,.catalog-hub-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:32px 80px;align-items:start}
.catalog-hub-lead p{margin-top:20px}
.catalog-hub-dl{margin:0;border-top:1px solid var(--ink)}
.catalog-hub-dl>div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:8px 40px;padding:18px 0;border-bottom:1px solid var(--hub-line)}
.catalog-hub-dl dt{font-size:17px;font-weight:500}
.catalog-hub-dl dd{margin:0;font-size:17px;line-height:1.65;color:var(--muted);font-variant-numeric:tabular-nums;max-width:60ch}
.catalog-hub-checks{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hub-line)}
.catalog-hub-checks li{font-size:17px;line-height:1.5;padding:12px 0;border-bottom:1px solid var(--hub-line)}
.catalog-hub-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;counter-reset:hub-step}
.catalog-hub-steps li{counter-increment:hub-step;padding-top:18px;border-top:1px solid var(--hub-line)}
.catalog-hub-steps h3::before{content:counter(hub-step) ". ";color:var(--muted);font-weight:450}
.catalog-hub-qa{border-top:1px solid var(--ink)}
.catalog-hub-qa details{border-bottom:1px solid var(--hub-line)}
.catalog-hub-qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:14px 0;font-size:18px;font-weight:500;line-height:1.4;cursor:pointer}
.catalog-hub-qa summary::-webkit-details-marker{display:none}
.catalog-hub-qa summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform 160ms var(--ease-out)}
.catalog-hub-qa details[open] summary svg{transform:rotate(45deg)}
.catalog-hub-qa details p{padding:0 40px 22px 0}
.catalog-hub-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px 80px;background:var(--surface);border-top:0;padding:64px clamp(24px,5vw,72px)}
.catalog-hub-cta-copy p{margin-top:18px;max-width:56ch}
.catalog-hub-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:none}
.catalog-hub-cta-actions .button{margin-bottom:12px}
@media(hover:hover) and (pointer:fine){.catalog-hub-jumps a:hover{color:var(--focus);text-decoration-color:currentColor}.catalog-hub-qa summary:hover{color:var(--focus)}}
@media(max-width:1100px){.catalog-hub-row,.catalog-hub-row-flip{gap:40px 48px}
.catalog-hub-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
.catalog-hub-terms,.catalog-hub-process,.catalog-hub-faq{grid-template-columns:1fr;gap:32px}
.catalog-hub-lead{max-width:66ch}}
@media(max-width:850px){.catalog-hub-row,.catalog-hub-row-flip{grid-template-columns:1fr}
.catalog-hub-row-flip>.catalog-hub-photo{order:-1}
.catalog-hub-photo-tall img{aspect-ratio:4/3}
.catalog-hub-cta{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.catalog-hub-page [id^="catalog-"]{scroll-margin-top:16px}
.catalog-hub{padding-top:40px}
.catalog-hub h2{font-size:30px}
.catalog-hub p,.catalog-hub-dl dd,.catalog-hub-checks li{font-size:17px}
.catalog-hub-actions{gap:12px}
.catalog-hub-jumps ul{gap:0 22px}
.catalog-hub-options,.catalog-hub-steps{grid-template-columns:1fr;gap:28px;margin-top:40px}
.catalog-hub-steps{margin-top:0}
.catalog-hub-dl>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
.catalog-hub-qa summary{font-size:17px;gap:16px}
.catalog-hub-qa details p{padding-right:0}
.catalog-hub-cta{padding:40px 20px;margin-inline:calc(var(--page-gutter) * -1);padding-inline:var(--page-gutter);}
.catalog-hub-cta-copy p{padding-right:0}}
/* P044 #catalog-factory: owner-pinned horizontal promo banner. Flat cyan band bleeding across the wrap gutters, lavender image field, two own-product cutouts. Scoped .catalog-hub-promo* only. */
.catalog-hub.catalog-hub-promo{--promo-band:var(--surface);--promo-field:var(--surface);display:grid;grid-template-columns:minmax(0,63fr) minmax(0,37fr);min-height:380px;margin-inline:calc(var(--page-gutter) * -1);padding:0;border-top:0;background:var(--promo-band)}
.catalog-hub-promo-copy{align-self:center;padding:52px clamp(32px,4.5vw,72px) 52px var(--page-gutter)}
.catalog-hub-promo h2{font-size:clamp(28px,2.45vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.025em;max-width:24ch;color:var(--ink)}
.catalog-hub-promo p{font-size:17.5px;line-height:1.58;color:var(--ink);max-width:68ch;margin-top:18px}
.catalog-hub-promo .catalog-hub-promo-cta{min-height:46px;margin-top:28px;padding:11px 26px;gap:16px;border-radius:999px}
.catalog-hub-promo-stage{position:relative;min-height:380px;background:var(--promo-field);overflow:hidden}
.catalog-hub-promo-stage .catalog-hub-promo-scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;border-radius:0}
@media(min-width:851px) and (max-width:1199px){.catalog-hub-promo-stage .catalog-hub-promo-scene{object-fit:contain}}
@media(max-width:850px){.catalog-hub.catalog-hub-promo{grid-template-columns:1fr;min-height:0}
.catalog-hub-promo-copy{padding:44px var(--page-gutter) 40px}
.catalog-hub-promo-stage{height:clamp(260px,58vw,500px);min-height:0}}
@media(max-width:600px){.catalog-hub.catalog-hub-promo{padding:0}
.catalog-hub-promo h2{font-size:28px}
.catalog-hub-promo p{font-size:17px}
.catalog-hub-promo-copy{padding:36px var(--page-gutter) 36px}}
/* P054 products.html #catalog-customization: four-option selector, dominant image left, copy and controls right. Scoped .custom-* inside .catalog-hub-custom only. */
.catalog-hub-custom{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-areas:"media head" "media switch" "media panel" "media foot";grid-template-rows:auto auto auto 1fr;column-gap:clamp(40px,5vw,80px);align-items:start}
.custom-head{grid-area:head}
.custom-head p{margin-top:16px}
.custom-switch{grid-area:switch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:32px}
.custom-switch[hidden]{display:none}
.custom-switch button{display:flex;align-items:center;min-height:56px;padding:14px 18px;background:var(--surface);text-align:left;font-size:16px;font-weight:500;line-height:1.3;transition:color 180ms var(--ease-out),background-color 180ms var(--ease-out)}
.custom-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.custom-switch button:active{transform:scale(.98)}
/* P057: .custom-media is now an unframed stack; each figure = bordered .custom-frame (same 5/4, 4/3, 1/1 ratios and padding as before) + figcaption below it.
   With JS all figures share one grid cell and inactive ones are visibility:hidden, so the stack keeps the tallest caption and nothing below jumps. */
.custom-media{grid-area:media;display:grid}
.custom-figure{grid-area:1/1;margin:0;min-width:0}
.custom-figure[hidden]{display:none}
.custom-media[data-ready] .custom-figure[data-active=false]{visibility:hidden}
.custom-frame{position:relative;aspect-ratio:5/4;background:var(--paper);border:1px solid var(--hub-line);overflow:hidden}
.custom-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:clamp(20px,3vw,44px);object-fit:contain}
.custom-caption{display:block;margin-top:16px;max-width:60ch}
.custom-caption-title{display:block;font-size:17px;font-weight:500;line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.custom-caption-text{display:block;margin-top:4px;font-size:16px;line-height:1.6;color:var(--muted)}
.custom-panels{grid-area:panel;display:grid;margin-top:32px;padding-top:24px;border-top:1px solid var(--hub-line)}
.custom-panel{grid-area:1/1}
.custom-panels[data-ready] .custom-panel[data-active=false]{visibility:hidden}
.catalog-hub-custom .custom-panel p{font-size:17px;margin-top:10px;max-width:52ch}
.custom-foot{grid-area:foot;margin-top:24px}
.catalog-hub-custom p.custom-note{font-size:15px;line-height:1.6}
.custom-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:24px}
@media(hover:hover) and (pointer:fine){.custom-switch button:not([aria-pressed=true]):hover{background:#e4e8e3}}
@media(max-width:1100px){.custom-switch button{font-size:15px;padding:12px 14px}}
@media(max-width:850px){.catalog-hub-custom{grid-template-columns:1fr;grid-template-areas:"head" "switch" "media" "panel" "foot";grid-template-rows:none}
.custom-switch{margin-top:28px}
.custom-media{margin-top:20px}
.custom-frame{aspect-ratio:4/3}
.custom-panels{margin-top:24px;padding-top:0;border-top:0}}
@media(max-width:600px){.custom-switch{gap:6px;margin-top:24px}
.custom-switch button{min-height:52px;padding:10px 12px;font-size:14px}
.custom-frame{aspect-ratio:1/1}
.custom-frame img{padding:16px}
.custom-caption{margin-top:14px}
.custom-caption-text{font-size:15px}
.custom-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.custom-switch button{transition:none}.custom-switch button:active{transform:none}}
/* P054 rail exception (owner-approved): ONLY <=600px AND while #catalog-customization intersects the viewport (body.p054-dock-bar set by customization.js),
   the same three sidebar links sit as three equal columns at the bottom. Media-gated, so a lingering class can never affect >600px. Rail markup/hrefs/labels unchanged. */
@media(max-width:600px){body.p054-dock-bar .inquiry-dock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));flex-direction:row;gap:6px}
body.p054-dock-bar .inquiry-dock-link{flex:1 1 0;width:auto;min-width:0;height:52px;min-height:52px;flex-direction:column;justify-content:center;gap:3px;padding:4px;border-radius:12px;font-size:12px;text-align:center}
body.p054-dock-bar .inquiry-dock-link svg{width:18px;height:18px}}
/* /P054 */
/* P056 products.html lower blocks after #catalog-customization: applications, process (P058: why-choose advantages), FAQ, inquiry. Scoped .hub-* only; reuses .catalog-hub type and spacing. */
.hub-uses-head p{margin-top:16px}
.hub-uses-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.hub-use{display:flex;flex-direction:column}
.hub-use-media{aspect-ratio:4/3;background:var(--paper);border:1px solid var(--hub-line);padding:clamp(16px,2vw,28px);overflow:hidden}
.hub-use-media img{display:block;width:100%;height:100%;object-fit:contain}
.hub-use h3{margin-top:24px}
.catalog-hub .hub-use p{font-size:16px;line-height:1.65;margin-top:10px;max-width:42ch}
.hub-use-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:auto;padding-top:12px}
/* P058 #catalog-process "Why Choose Quanhu" — P060: open white three-column reasons, 1px hairline dividers between them, forest h3, 18px dark body, forest CTA. No panels/shadow/gradient/icon. */
.hub-adv>h2{margin-inline:auto;text-align:center;font-size:clamp(32px,2.9vw,42px);font-weight:600;line-height:1.12;color:var(--ink)}
.hub-adv-list{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px}
.hub-adv-panel{position:relative;scroll-margin-top:24px}
.hub-adv-panel+.hub-adv-panel::before{content:"";position:absolute;top:0;bottom:0;left:-22px;width:1px;background:var(--hub-line)}
.catalog-hub .hub-adv-panel h3{font-size:23px;font-weight:600;line-height:30px;letter-spacing:-.015em;color:var(--focus)}
.catalog-hub .hub-adv-panel p{margin-top:14px;max-width:none;font-size:18px;font-weight:400;line-height:30px;color:#303a35}
.hub-adv-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 48px;margin-top:56px}
.catalog-hub p.hub-adv-scope{font-size:16px;line-height:1.6;color:#4a524e}
.hub-adv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.hub-adv-actions .button{background:var(--focus);color:#fff}
@media(hover:hover) and (pointer:fine){.hub-adv-actions .button:hover{background:#2a4740}}
/* P060 gap fix: >1100px, h3 and p rows are shared across the three columns via subgrid (natural height, paragraphs align when a title wraps). No subgrid = simple stacked fallback with the same 14px gap. */
@supports(grid-template-rows:subgrid){@media(min-width:1101px){.hub-adv-panel{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:14px}
.catalog-hub .hub-adv-panel p{margin-top:0}}}
.hub-faq>h2,.hub-faq-list{max-width:1080px;margin-inline:auto}
.hub-faq-list{margin-top:36px;border-top:1px solid var(--ink)}
.hub-faq-list details{border-bottom:1px solid var(--hub-line);scroll-margin-top:24px}
.hub-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:14px 0;font-size:18px;font-weight:500;line-height:1.4;cursor:pointer}
.hub-faq-list summary::-webkit-details-marker{display:none}
.hub-faq-list summary:focus-visible{outline-offset:2px}
.hub-faq-list summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform 160ms var(--ease-out)}
.hub-faq-list details[open] summary svg{transform:rotate(45deg)}
.hub-faq-list details p{padding-right:48px;max-width:70ch}
.hub-faq-list details p+p{margin-top:12px}
.hub-faq-list details p:last-child{padding-bottom:22px}
.catalog-hub.hub-inquiry{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 80px;margin-inline:calc(var(--page-gutter) * -1);margin-bottom:calc(var(--section-gap) * -1);padding:72px var(--page-gutter);background:var(--surface);border-top:0}
.hub-inquiry h2{font-size:clamp(32px,3vw,44px)}
.hub-inquiry-copy p{margin-top:16px;max-width:58ch;color:var(--ink)}
.hub-inquiry-actions{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none}
.hub-inquiry-actions .button{margin-bottom:12px}
@media(hover:hover) and (pointer:fine){.hub-faq-list summary:hover{color:var(--focus)}}
@media(max-width:1100px){.hub-adv-list,.hub-adv-foot{max-width:720px;margin-inline:auto}
.hub-adv-list{grid-template-columns:1fr;gap:0;margin-top:48px}
.hub-adv-panel+.hub-adv-panel{margin-top:32px;padding-top:32px;border-top:1px solid var(--hub-line)}
.hub-adv-panel+.hub-adv-panel::before{content:none}
.hub-adv-foot{margin-top:48px}}
@media(max-width:850px){.hub-uses-list{grid-template-columns:1fr;gap:48px;max-width:560px}
.catalog-hub.hub-inquiry{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.hub-uses-list{margin-top:32px;gap:40px}
.catalog-hub.hub-adv>h2{font-size:32px}
.hub-adv-list{margin-top:36px}
.hub-adv-panel+.hub-adv-panel{margin-top:28px;padding-top:28px}
.catalog-hub .hub-adv-panel h3{font-size:22px;line-height:29px}
.hub-adv-foot{margin-top:40px}
.hub-adv-foot{flex-direction:column;align-items:flex-start}
.hub-adv-actions{align-self:stretch}
.hub-adv-actions .button{width:100%}
.hub-faq-list summary{font-size:17px;gap:16px}
.hub-faq-list details p{padding-right:0}
.catalog-hub.hub-inquiry{padding:44px var(--page-gutter)}
.hub-inquiry h2{font-size:30px}
.hub-inquiry-actions{align-self:stretch}
.hub-inquiry-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.hub-faq-list summary svg{transition:none}}
/* P056 rail clearance, >=601px only: the unchanged fixed rail occupies the right 144px of the viewport (124px pills + 20px offset).
   --hub-rail-clear = 160px (rail + 16px air) minus what the wrap gutter and centered-wrap margin already leave; 0 when the gutter is wide enough.
   FAQ gets it on both sides so its column stays centered (right side only at 601-1100px, where the column already fills the width). <=600px uses the existing bottom bar, so no gutter there. */
@media(min-width:601px){.catalog-hub-page{--hub-rail-clear:max(0px,calc(160px - var(--page-gutter) - max(0px,(100vw - 1600px) / 2)))}
.hub-uses,.hub-adv{padding-right:var(--hub-rail-clear)}
.hub-faq{padding-inline:var(--hub-rail-clear)}
.hub-faq-list summary,.hub-faq-list details p{overflow-wrap:anywhere}
.catalog-hub.hub-inquiry{padding-right:max(var(--page-gutter),calc(160px - max(0px,(100vw - 1600px) / 2)))}}
@media(min-width:601px) and (max-width:1100px){.hub-faq{padding-left:0}}
/* /P056 */
/* P062 products.html top header: copy left, multi-product image right (>900px); stacked copy then image below. Scoped .catalog-hub-head only. */
.shop-head.catalog-hub-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.catalog-hub-head>h1,.catalog-hub-head>p,.catalog-hub-head>.catalog-hub-actions{max-width:860px}
.catalog-hub-head-img{display:block;width:100%;max-width:340px;height:auto;margin-top:36px;justify-self:center}
@media(min-width:901px){.shop-head.catalog-hub-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(40px,4vw,72px);padding-right:var(--hub-rail-clear)}
.catalog-hub-head>h1,.catalog-hub-head>p,.catalog-hub-head>.catalog-hub-actions{grid-column:1}
.catalog-hub-head-img{grid-column:2;grid-row:1/-1;align-self:center;max-width:500px;margin-top:0;transform:translate(clamp(0px,calc((100vw - 901px) * .07),38px),-56px)}}
@media(max-width:600px){.catalog-hub-head-img{margin-top:28px}}
@media(min-width:601px) and (max-width:900px){.catalog-hub-head-img{width:min(340px,calc(100% - var(--hub-rail-clear)));margin-right:var(--hub-rail-clear)}}
@media(max-width:359px){.catalog-hub-head-img{width:calc(100% + 2 * var(--page-gutter));max-width:none;margin-inline:calc(-1 * var(--page-gutter))}}
/* /P062 */

/* P042B factory block: #about photo intro + #manufacturing facts, five-stage switch and equipment line. Scoped to #about and #manufacturing factory children; #services untouched. */
#about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:center;padding-bottom:calc(var(--section-gap)*.5)}
#about .about-copy .lead{font-size:24px;line-height:1.4;letter-spacing:-.02em;max-width:34ch;margin:32px 0 20px}
#about .about-copy>p:not(.lead){font-size:17px;color:var(--muted);line-height:1.75;max-width:52ch}
#about .about-copy>.about-company{font-size:14px;margin-top:18px;line-height:1.5}
#about .about-copy>.text-link{margin-top:32px}
#about .about-media{margin:0;min-width:0}
#about .about-photo>img{height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}
#about .about-media figcaption{margin-top:14px;font-size:14px;color:var(--muted)}
#manufacturing{padding-top:calc(var(--section-gap)*.5)}
#manufacturing>.factory-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
#manufacturing>.factory-facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:12px;min-width:0}
#manufacturing>.factory-facts dt{font-size:16px;color:var(--muted);line-height:1.45}
#manufacturing>.factory-facts dd{font-size:64px;line-height:1;letter-spacing:-.04em;margin:0;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
#manufacturing>.factory-note{font-size:14px;color:var(--muted);margin:24px 0 36px}
#manufacturing .process-switch{grid-template-columns:repeat(5,minmax(0,1fr))}
#manufacturing>.factory-equipment{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.6}
@media(max-width:1100px){#about{gap:56px}#manufacturing>.factory-facts dd{font-size:52px}}
@media(max-width:850px){#about{grid-template-columns:1fr;gap:36px}
#about .about-copy .lead{font-size:22px;margin-top:26px}
#about .about-copy>p:not(.lead){font-size:16px}
#manufacturing>.factory-facts{gap:24px}
#manufacturing>.factory-facts dd{font-size:40px}
#manufacturing>.factory-facts dt{font-size:14px}
#manufacturing .process-switch{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#about .about-copy .lead{font-size:20px;line-height:1.45;margin:22px 0 16px}
#about .about-copy>p:not(.lead){font-size:15px}
#about .about-copy>.about-company{font-size:13px}
#about .about-copy>.text-link{margin-top:24px}
#about .about-media figcaption{font-size:13px}
#manufacturing>.factory-facts{grid-template-columns:max-content minmax(0,1fr);grid-auto-flow:row dense;gap:14px 18px;align-items:baseline}
#manufacturing>.factory-facts>div{display:contents}
#manufacturing>.factory-facts dd{grid-column:1;font-size:clamp(28px,9vw,34px)}
#manufacturing>.factory-facts dt{grid-column:2;font-size:13px}
#manufacturing>.factory-note{font-size:13px;margin:20px 0 28px}
#manufacturing .process-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
#manufacturing .process-switch>button:last-child{grid-column:1/-1}
#manufacturing>.factory-equipment{font-size:13px}}

/* P054 customization block (#services): head + intro, large manual carousel of concept illustrations | OEM and ODM copy, both always visible, plus contacts. Scoped to #services only. */
#services.custom-block{display:block;margin-top:112px;padding-top:96px;border-top:1px solid var(--field)}
#services .custom-head{display:flex;align-items:flex-end;justify-content:space-between;gap:64px;margin-bottom:48px}
#services .custom-head h2{font-size:var(--font-display);line-height:1.05;max-width:16ch;text-wrap:balance}
#services .custom-head p{font-size:18px;line-height:1.65;color:var(--muted);margin:0;max-width:44ch;padding-bottom:4px}
#services .cz-layout{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:64px;align-items:start}
#services .cz-carousel{min-width:0}
#services .cz-frame{display:grid;aspect-ratio:4/3;background:#fafafa;border:1px solid var(--field);overflow:hidden;touch-action:pan-y}
#services .cz-slide{grid-area:1/1;margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out),visibility 0s 180ms}
#services .cz-slide.is-active{opacity:1;visibility:visible;transition:opacity 180ms var(--ease-out),visibility 0s}
#services .cz-slide img{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain}
#services .cz-slide figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#services .cz-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
#services .cz-count{font-size:15px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:64px}
#services .cz-now{color:var(--ink);font-weight:500}
#services .cz-dots{display:flex;flex:1;justify-content:center}
#services .cz-dot{width:28px;height:44px;padding:0;background:none;display:flex;align-items:center;justify-content:center}
#services .cz-dot span{display:block;width:16px;height:2px;background:#c9ceca;transition:background-color 160ms var(--ease-out),width 160ms var(--ease-out)}
#services .cz-dot[aria-current=true] span{background:var(--ink);width:22px}
#services .cz-arrows{display:flex;gap:8px}
#services .cz-arrows button{width:44px;height:44px;padding:0;background:var(--paper);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background-color 160ms var(--ease-out)}
#services .cz-arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
#services .cz-caption{font-size:17px;font-weight:500;letter-spacing:-.01em;margin-top:14px}
#services .cz-note{font-size:14px;line-height:1.55;color:var(--muted);margin-top:4px}
#services .cz-copy{min-width:0}
#services .cz-route+.cz-route{margin-top:32px;padding-top:32px;border-top:1px solid var(--field)}
#services .cz-route h3{font-size:28px;line-height:1.15;letter-spacing:-.03em;scroll-margin-top:110px}
#services .cz-route p{font-size:17px;line-height:1.65;color:var(--muted);margin-top:12px;max-width:52ch}
#services .cz-route ul{list-style:none;margin:16px 0 0;padding:0}
#services .cz-route li{position:relative;padding:5px 0 5px 22px;font-size:16px;line-height:1.5}
#services .cz-route li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--ink)}
#services .cz-fine{font-size:14px;line-height:1.6;color:var(--muted);margin-top:28px;padding-top:16px;border-top:1px solid var(--field)}
#services .cz-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
#services .cz-wa{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
@media(hover:hover) and (pointer:fine){#services .cz-arrows button:hover,#services .cz-wa:hover{background:var(--surface)}#services .cz-dot:hover span{background:#7d857f}}
#services :is(.cz-arrows button,.cz-dot):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* No-JS: first slide and its caption shown; carousel controls hidden; both routes and contacts stay readable. */
#services:not([data-cz=ready]) .cz-bar{display:none}
#services:not([data-cz=ready]) .cz-slide:first-child{opacity:1;visibility:visible}
@media(max-width:1100px){#services .cz-layout{gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#services .cz-route h3{font-size:25px}#services .cz-route p{font-size:16px}}
@media(max-width:850px){#services.custom-block{margin-top:80px;padding-top:72px}
#services .custom-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px}
#services .custom-head p{font-size:17px;max-width:60ch}
#services .cz-layout{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){#services.custom-block{margin-top:64px;padding-top:56px}
#services .custom-head p{font-size:16px}
#services .cz-count{min-width:0;font-size:14px}
#services .cz-dot{width:22px}#services .cz-dot span{width:12px}#services .cz-dot[aria-current=true] span{width:18px}
#services .cz-caption{font-size:16px}
#services .cz-note{font-size:13px}
#services .cz-route h3{font-size:23px}
#services .cz-route li{font-size:15px}
#services .cz-cta .button{flex:1 1 100%}}
@media(max-width:360px){#services .cz-dot{width:18px}#services .cz-dot span{width:10px}#services .cz-arrows{gap:6px}}
/* P053: app.js sets this while the fixed rail (non-phone) overlaps the customization stage or contacts, so it never covers controls; geometry kept. */
body[data-home-dock-services="cover"] .inquiry-dock{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){#services .cz-slide,#services .cz-slide.is-active,#services .cz-dot span{transition:none}}
/* P042D quality block: heading + intro, testing photo + three buyer checks | three document cards + note + CTA. Scoped to #quality and .quality-* classes only. */
#quality .quality-head{margin-bottom:48px}
#quality .quality-head h2{font-size:var(--font-display);line-height:1.05;max-width:20ch;flex-shrink:0}
#quality .quality-head p{font-size:18px;line-height:1.65;color:var(--muted);margin:0;max-width:44ch;padding-bottom:4px}
#quality .quality-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
#quality .quality-main{min-width:0}
#quality .testing-figure img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}
#quality .testing-figure figcaption{display:block;margin-top:14px;font-size:14px;color:var(--muted)}
#quality .quality-checks{margin:28px 0 0;border-top:1px solid var(--field)}
#quality .quality-checks>div{padding:18px 0;border-bottom:1px solid var(--field)}
#quality .quality-checks dt{font-size:19px;font-weight:500;letter-spacing:-.02em}
#quality .quality-checks dd{font-size:16px;line-height:1.6;color:var(--muted);margin:6px 0 0;max-width:52ch}
#quality .documents{display:flex;flex-direction:column;gap:12px}
#quality .document{display:flex;flex-direction:row;align-items:center;gap:24px;padding:18px 22px;min-height:0}
#quality .document>img{width:84px;height:112px;object-fit:contain;flex-shrink:0}
#quality .document>span{gap:4px}
#quality .document strong{font-size:23px;line-height:1.15}
#quality .document>span>span{font-size:16px;line-height:1.4}
#quality .document small{font-size:13px;margin-top:4px}
#quality .document>svg{position:static;width:18px;height:18px;flex-shrink:0}
#quality .document-note{font-size:14px;line-height:1.65;margin-top:8px}
#quality .quality-cta{margin-top:16px}
@media(max-width:1100px){#quality .quality-layout{gap:44px}#quality .document{gap:18px;padding:16px 18px}#quality .document>img{width:70px;height:94px}}
@media(max-width:850px){#quality .quality-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px}
#quality .quality-head p{font-size:17px;max-width:60ch}
#quality .quality-layout{grid-template-columns:1fr;gap:40px}
#quality .documents{display:flex;flex-direction:column;gap:12px}
#quality .document{padding:16px 20px;gap:20px}
#quality .document>img{width:72px;height:96px}
#quality .document>span>span{font-size:15px}
#quality .document small{padding-right:0;font-size:13px}}
@media(max-width:600px){#quality .quality-head{display:block;margin-bottom:32px}
#quality .quality-head p{font-size:16px;margin-top:20px;max-width:none}
#quality .testing-figure img{height:auto}
#quality .testing-figure figcaption{font-size:13px}
#quality .quality-checks{margin-top:22px}
#quality .quality-checks>div{padding:16px 0}
#quality .quality-checks dt{font-size:18px}
#quality .quality-checks dd{font-size:15px}
#quality .document{gap:16px;padding:14px 16px}
#quality .document>img{width:60px;height:80px}
#quality .document strong{font-size:21px}
#quality .document>span>span{font-size:14px}
#quality .document small{font-size:12px}
#quality .document-note{font-size:13px}
#quality .quality-cta .button{width:100%}}
@media(max-width:380px){#quality .quality-cta .button{gap:14px;padding-inline:16px}}
/* P042E: #capabilities six-question FAQ (scoped). */
#capabilities{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:96px;align-items:start}
#capabilities .faq-intro h2{max-width:13ch}
#capabilities .faq-intro p{font-size:16px;color:var(--muted);line-height:1.7;margin-top:22px;max-width:44ch}
#capabilities .faq-intro .text-link{margin-top:18px}
#capabilities .questions{border-top:1px solid #dfe2e0}
#capabilities .questions details{padding-block:18px;border-bottom:1px solid #dfe2e0}
#capabilities .questions details+details{margin-top:0}
#capabilities .questions summary{font-size:20px;line-height:1.35}
#capabilities .questions summary svg{flex:none}
#capabilities .faq-answer{padding:14px 30px 4px 0;max-width:61ch}
#capabilities .faq-answer p,#capabilities .faq-answer li{font-size:16px;color:var(--muted);line-height:1.75;max-width:none;padding:0}
#capabilities .faq-answer p+p,#capabilities .faq-answer ul+p{margin-top:12px}
#capabilities .faq-answer ul{margin:8px 0 0;padding-left:1.2em;list-style:disc}
#capabilities .faq-answer li+li{margin-top:4px}
#capabilities .faq-answer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#capabilities summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media(hover:hover) and (pointer:fine){#capabilities .faq-answer a:hover{color:var(--focus)}}
@media(max-width:850px){#capabilities{grid-template-columns:1fr;gap:32px}#capabilities .faq-intro h2{max-width:none}}
@media(max-width:600px){#capabilities{gap:26px}#capabilities .questions details{padding-block:14px}#capabilities .questions summary{font-size:18px;gap:18px}#capabilities .faq-answer{padding-right:0}#capabilities .faq-answer p,#capabilities .faq-answer li{font-size:16px}}
/* P042F: homepage inquiry (#project). Scoped to #project; earlier rules untouched. */
#project .project-intro>p{max-width:46ch}
#project .project-location{font-style:normal;margin-top:48px;gap:10px}
#project .project-contact{display:flex;gap:12px;color:var(--ink);font-size:16px;min-height:44px;align-items:center;text-decoration:none}
#project .project-contact>span:first-child{flex:none;width:84px;font-size:13px;color:var(--muted)}
#project .project-contact-value{text-decoration:underline;text-decoration-color:#9aa29d;text-underline-offset:4px;white-space:nowrap}
#project .req{color:#8a2a1f;margin-left:2px}
#project .form-required{font-size:13px;color:var(--muted);margin-top:14px}
#project .form-status{min-height:1.5em;font-size:13px;color:var(--muted);margin-top:6px}
#project form>.button{margin-top:18px}
#project .brief-actions .text-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:44px}
@media(hover:hover) and (pointer:fine){#project .project-contact:hover .project-contact-value{text-decoration-color:currentColor}}
@media(max-width:1100px){#project .project-contact{flex-direction:column;align-items:flex-start;gap:2px;justify-content:center}#project .project-contact>span:first-child{width:auto}}
@media(max-width:600px){#project .project-location{margin-top:30px}#project .project-contact{font-size:15px}}

/* P043 homepage-only phone contact (scoped to body:has(.home-contact-row), i.e. index.html). Phones = <=600px wide, or coarse-pointer landscape <=600px tall.
   The fixed rail is hidden by default there and app.js shows it (data-home-rail="front") only while #about is still below the rail; #top/#products are untouched. */
.home-contact-row{display:none}
@media(max-width:600px),(pointer:coarse) and (max-height:600px) and (orientation:landscape){
body:has(.home-contact-row):not([data-home-rail="front"]) .inquiry-dock{display:none}
#about>.home-contact-row{display:flex;grid-column:1/-1;gap:8px;margin:0 0 4px}
.home-contact-link{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;border-radius:24px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;border:1px solid #d9dddb}
.home-contact-form{background:#264b68;border-color:#264b68;color:#fff}
.home-contact-link:focus-visible{outline-offset:2px}}
@media(max-width:600px){/* Rear state: the rail is hidden, so the 180px rail clearance under #project and the footer is not needed on the homepage. */
body:has(.home-contact-row):not([data-home-rail="front"]) .project{padding-bottom:calc(var(--section-gap) + env(safe-area-inset-bottom))}
body:has(.home-contact-row):not([data-home-rail="front"]) .footer{padding-bottom:calc(48px + env(safe-area-inset-bottom))}}

/* P046 #about: three intro paragraphs with clear gaps, then an Email/WhatsApp pill row (desktop + phone). Scoped to #about only. */
#about .about-copy>p:not(.lead)+p{margin-top:16px}
#about .about-copy>.about-actions.home-contact-row{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
#about .about-action{min-height:48px;padding:12px 26px;border-radius:24px;font-size:15px;font-weight:600;gap:0}
#about .about-action:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#about .about-action-whatsapp{background:var(--focus);color:#fff}
@media(hover:hover) and (pointer:fine){#about .about-action-whatsapp:hover{background:#3a5048}}
@media(max-width:600px){#about .about-copy>.about-actions.home-contact-row{margin-top:24px;gap:10px}
#about .about-action{flex:1 1 0;min-width:0;padding-inline:14px}}
/* P046: app.js sets this homepage-only attribute while the fixed rail overlaps the #about photo/video at non-phone widths. */
body[data-home-dock-media="cover"] .inquiry-dock{visibility:hidden;pointer-events:none}
/* P047: owner-selected #about factory video (moved unchanged from the P046 preview-only inline style). Scoped to #about. */
#about .about-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--surface)}#about .about-video video:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* P047B/C #manufacturing header (owner layout): one-line title beside the unchanged intro on desktop, vertically centered. Three facts keep the existing P042B grid. Scoped to #manufacturing>.section-head; #services untouched. */
#manufacturing>.section-head{align-items:center}
#manufacturing>.section-head>h2{font-size:clamp(28px,2.4vw,40px);line-height:1.15;flex:1 1 auto;min-width:0}
#manufacturing>.section-head>p{flex:0 0 auto}
@media(min-width:1101px){#manufacturing>.section-head>h2{white-space:nowrap}}
@media(max-width:1100px){#manufacturing>.section-head>h2{font-size:36px}}
@media(max-width:600px){#manufacturing>.section-head>h2{font-size:30px}}

/* P057 #partners: owner-requested partner-logo strip after #manufacturing, before #quality. Company-supplied list (cooperative-clients image), not independently verified. Raster logos are SVG viewBox windows over the unchanged supplied PNG; Disney uses the old-site SVG. Logos keep their source colours (no filters). Scoped to #partners only. */
#partners{background:var(--paper)}
#partners .pt-inner{padding-block:44px 52px;border-top:1px solid var(--field)}
#partners .pt-head{margin-bottom:32px;text-align:center}
#partners .pt-head h2{font-size:30px;line-height:1.15;letter-spacing:-.03em}
#partners .pt-viewport{overflow:hidden}
#partners .pt-viewport:focus{outline:none}
#partners .pt-viewport:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
#partners .pt-track{display:flex}
#partners .pt-group{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 64px;flex:1 1 100%;min-width:0;max-width:100%}
#partners .pt-item{flex:none;display:flex;align-items:center;height:72px}
#partners .pt-logo{display:block;width:auto;height:var(--pt-h);aspect-ratio:var(--pt-ar);fill:initial;stroke:none;overflow:hidden}
#partners .pt-starbucks{--pt-h:70px;--pt-ar:159/158}
#partners .pt-disney{--pt-h:56px;--pt-ar:141/60}
#partners .pt-rtic{--pt-h:46px;--pt-ar:275/80}
#partners .pt-pacoo{--pt-h:48px;--pt-ar:249/71}
#partners .pt-montigo{--pt-h:40px;--pt-ar:252/51}
/* Running marquee (JS adds data-pt=run only when motion is allowed): one row, cloned groups with an equal trailing gap; translate by exactly one group width. */
#partners[data-pt=run] .pt-viewport{width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
#partners[data-pt=run] .pt-track{width:max-content;animation:pt-marquee var(--pt-dur,40s) linear infinite;will-change:transform}
#partners[data-pt=run] .pt-group{flex-wrap:nowrap;justify-content:flex-start;gap:0;flex:none;max-width:none}
#partners[data-pt=run] .pt-item{margin-right:var(--pt-gap,96px)}
#partners[data-pt=run]:is([data-pt-user=paused],[data-pt-off],[data-pt-focus]) .pt-track{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){#partners[data-pt=run]:not([data-pt-user=running]) .pt-viewport:hover .pt-track{animation-play-state:paused}}
@keyframes pt-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1*var(--pt-shift,0px)),0,0)}}
@media(max-width:600px){#partners .pt-inner{padding-block:32px 40px}
#partners .pt-head{margin-bottom:22px}
#partners .pt-head h2{font-size:24px}
#partners .pt-group{gap:20px 40px}
#partners .pt-item{height:52px}
#partners .pt-starbucks{--pt-h:48px}#partners .pt-disney{--pt-h:40px}#partners .pt-rtic{--pt-h:33px}#partners .pt-pacoo{--pt-h:34px}#partners .pt-montigo{--pt-h:29px}}
@media(prefers-reduced-motion:reduce){#partners .pt-track{animation:none!important}}

/* P059 quality section: heading | intro, three ordered checkpoints, one documentary band (three real documents, scope line, single CTA). Scoped to #quality and ql-* classes. */
#quality .ql-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px 64px;align-items:start;margin-bottom:64px}
#quality .ql-head h2{font-size:clamp(40px,3.7vw,56px);line-height:1.08;max-width:17ch}
#quality .ql-head p{font-size:18px;line-height:1.65;color:var(--muted);max-width:46ch;padding-top:6px}
#quality .ql-steps{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;counter-reset:ql}
#quality .ql-steps>li{counter-increment:ql;border-top:1px solid #cfd4d1;padding-top:22px}
#quality .ql-steps>li::before{content:counter(ql);display:block;font-size:14px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:18px}
#quality .ql-steps h3{font-size:22px;line-height:1.2}
#quality .ql-steps p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:38ch}
#quality .ql-band{background:var(--paper);padding:40px}
#quality .ql-docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
#quality .ql-doc-button{display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr);gap:24px;align-items:end;width:100%;min-height:44px;padding:0;background:none;text-align:left}
#quality .ql-doc-frame{display:flex;align-items:center;justify-content:center;background:var(--surface);padding:12px;transition:background-color 160ms var(--ease-out)}
#quality .ql-doc-frame img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;box-shadow:none;border:1px solid var(--field)}
#quality .ql-doc-text{display:flex;flex-direction:column;gap:4px;min-width:0;padding-bottom:4px}
#quality .ql-doc-name{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
#quality .ql-doc-desc{font-size:16px;line-height:1.45}
#quality .ql-doc-date{font-size:16px;line-height:1.45;color:var(--muted)}
#quality .ql-doc-action{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:16px;font-weight:500;text-underline-offset:5px;transition:color 160ms var(--ease-out)}
#quality .ql-doc-action svg{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){#quality .ql-doc-button:hover .ql-doc-frame{background:#e9eeea}
#quality .ql-doc-button:hover .ql-doc-action{color:var(--focus);text-decoration:underline}}
#quality .ql-scope{font-size:16px;line-height:1.6;color:var(--muted);margin-top:28px}
#quality .ql-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:28px;padding-top:28px;border-top:1px solid var(--field)}
#quality .ql-cta p{font-size:18px;line-height:1.55;max-width:52ch}
/* Fixed contact rail (non-phone): 124px wide, 20px from the right. Reserve that column so no quality content passes under it. */
@media(min-width:601px){#quality .ql-wrap{padding-right:max(var(--page-gutter),164px)}}
@media(min-width:1928px){#quality .ql-wrap{padding-right:var(--page-gutter)}}
@media(max-width:1100px){#quality .ql-head{grid-template-columns:1fr;gap:20px;margin-bottom:48px}
#quality .ql-head h2{font-size:clamp(36px,5.2vw,48px)}
#quality .ql-head p{max-width:60ch;padding-top:0}
#quality .ql-steps{gap:32px;margin-bottom:44px}
#quality .ql-band{padding:28px}
#quality .ql-docs{gap:20px}
#quality .ql-doc-button{grid-template-columns:1fr;gap:16px;align-items:start}
#quality .ql-doc-frame{padding:10px}
#quality .ql-doc-frame img{width:auto;max-height:240px}
#quality .ql-doc-name{font-size:22px}}
@media(max-width:850px){#quality .ql-steps{grid-template-columns:1fr;gap:0}
#quality .ql-steps>li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;padding:20px 0 24px}
#quality .ql-steps>li::before{grid-row:1/3;margin:6px 0 0}
#quality .ql-steps p{max-width:60ch}}
@media(max-width:600px){#quality .ql-head h2{font-size:clamp(28px,8.4vw,36px);max-width:none}
#quality .ql-head p{font-size:16px}
#quality .ql-steps h3{font-size:20px}
#quality .ql-band{padding:20px}
#quality .ql-docs{grid-template-columns:1fr;gap:0}
#quality .ql-docs>li+li{border-top:1px solid var(--field)}
#quality .ql-doc-button{grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;padding:16px 0}
#quality .ql-doc-frame{padding:6px}
#quality .ql-doc-frame img{width:100%;max-height:none}
#quality .ql-doc-name{font-size:21px}
#quality .ql-doc-action{margin-top:8px}
#quality .ql-scope{margin-top:12px}
#quality .ql-cta{margin-top:20px;padding-top:20px}
#quality .ql-cta p{font-size:16px}
#quality .ql-cta .button{width:100%;justify-content:space-between}}
@media(max-width:359px){#quality .ql-doc-button{grid-template-columns:80px minmax(0,1fr);gap:14px}
#quality .ql-cta .button{padding:15px 18px;gap:12px}}
#quality .ql-doc-action{white-space:nowrap}
/* P061 quality rebuild: heading | intro, real finishing/assembly clip (left) beside three statements + CTA (right), compact document strip. Scoped to #quality and qr-* classes; the P059 ql-* rules above no longer match any markup. */
#quality.qr{padding-block:80px}
#quality .qr-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 64px;align-items:end;margin-bottom:40px}
#quality .qr-head h2{font-size:clamp(36px,3.4vw,52px);line-height:1.08;text-wrap:balance}
#quality .qr-head p{font-size:18px;line-height:1.6;color:var(--muted);max-width:52ch}
#quality .qr-main{display:grid;grid-template-columns:minmax(0,59fr) minmax(0,41fr);gap:48px;align-items:start}
#quality .qr-media{margin:0}
#quality .qr-frame{background:var(--surface);aspect-ratio:16/10;overflow:hidden}
#quality .qr-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface)}
#quality .qr-media figcaption{font-size:16px;line-height:1.5;margin-top:12px}
#quality .qr-media figcaption span{color:var(--muted)}
#quality .qr-side{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
#quality .qr-points{display:flex;flex-direction:column;gap:24px}
#quality .qr-point h3{font-size:21px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
#quality .qr-point p{font-size:17px;line-height:1.6;color:var(--muted);margin-top:6px;max-width:48ch}
@media(min-width:601px){#quality .qr-wrap{padding-right:max(var(--page-gutter),164px)}}
@media(min-width:1928px){#quality .qr-wrap{padding-right:var(--page-gutter)}}
@media(max-width:1100px){#quality .qr-head{grid-template-columns:1fr;gap:14px;margin-bottom:32px}
#quality .qr-head p{max-width:60ch}
#quality .qr-main{grid-template-columns:1fr;gap:28px}
#quality .qr-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media(max-width:850px){#quality .qr-points{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){#quality.qr{padding-block:64px}
#quality .qr-head h2{font-size:clamp(28px,8.4vw,36px)}
#quality .qr-head p{font-size:16px}
#quality .qr-main{gap:24px}
#quality .qr-media figcaption{font-size:16px}
#quality .qr-side{gap:24px;align-items:stretch}
#quality .qr-point h3{font-size:19px}
#quality .qr-point p{font-size:16px}
#quality .qr-cta{width:100%;justify-content:space-between}}
@media(max-width:359px){#quality .qr-cta{padding:15px 18px;gap:12px}}
/* P063A #quality alignment only: .qr-head shares .qr-main's desktop tracks (59/41) and column gap (48px) so the intro starts on the right-column line and the H2 on the media line; heads align to top. Copy unchanged. Scoped to #quality. */
#quality .qr-wrap{--qr-columns:minmax(0,59fr) minmax(0,41fr);--qr-gap:48px}
@media(min-width:1101px){#quality .qr-head{grid-template-columns:var(--qr-columns);column-gap:var(--qr-gap);align-items:start}
#quality .qr-main{grid-template-columns:var(--qr-columns);column-gap:var(--qr-gap)}
#quality .qr-head h2,#quality .qr-head p{margin:0;padding:0;justify-self:stretch}
#quality .qr-head p{max-width:none}}
/* P066 #quality: intro moved from .qr-head into .qr-side (first child) so its top aligns with the video frame top; head is title-only at natural height. Certificate gallery removed. Scoped to #quality. */
#quality .qr-head{display:block}
#quality .qr-intro{margin:0;padding:0;font-size:18px;line-height:1.6;color:var(--muted);max-width:none}
@media(max-width:1100px){#quality .qr-intro{max-width:60ch}}
@media(max-width:600px){#quality .qr-intro{font-size:16px}}
/* P067 #quality type refinement: desktop right-column content inset 24px (border-box keeps the grid track; video untouched); intro/point copy 500 #414945, point titles 600. Sizes/line heights unchanged. */
@media(min-width:1101px){#quality .qr-side{padding-inline-start:24px}}
#quality .qr-intro,#quality .qr-point p{font-weight:500;color:#414945}
#quality .qr-point h3{font-weight:600}
/* P071 #factory-visit: centered head, three equal real-photo panels, one CTA to factory.html. Scoped to #factory-visit and .factory-page. */
#factory-visit .fv-head{text-align:center;margin:0 auto 48px;max-width:860px}
#factory-visit .fv-head h2{font-size:clamp(36px,3.4vw,52px);line-height:1.08;text-wrap:balance}
#factory-visit .fv-head p{margin:18px auto 0;font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch}
#factory-visit .fv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#factory-visit .fv-item{margin:0}
#factory-visit .fv-photo{position:relative;height:clamp(260px,28vw,400px);overflow:hidden;background:var(--surface)}
#factory-visit .fv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#factory-visit img[data-pos="workshop"]{object-position:50% 62%}
#factory-visit img[data-pos="showroom"]{object-position:50% 50%}
#factory-visit img[data-pos="packing"]{object-position:50% 70%}
#factory-visit figcaption{margin-top:14px;font-size:16px;font-weight:600;line-height:1.4;text-align:center}
#factory-visit .fv-cta{display:flex;justify-content:center;margin-top:44px}
@media(max-width:850px){#factory-visit .fv-grid{gap:14px}#factory-visit .fv-photo{height:auto;aspect-ratio:4/5}}
@media(max-width:600px){#factory-visit .fv-head{margin-bottom:32px}#factory-visit .fv-head h2{font-size:clamp(28px,8.4vw,36px)}#factory-visit .fv-head p{font-size:16px}
#factory-visit .fv-grid{grid-template-columns:1fr;gap:24px}#factory-visit .fv-photo{aspect-ratio:4/3}#factory-visit .fv-cta{margin-top:32px}#factory-visit .fv-cta .button{width:100%}}
.factory-page .fp-hero{padding-block:72px 64px}
.factory-page .fp-crumb{font-size:14px;color:var(--muted);margin-bottom:24px}.factory-page .fp-crumb a{text-decoration:underline}
.factory-page h1{font-size:clamp(40px,4.3vw,64px);line-height:1.04}
.factory-page .fp-lead{margin-top:24px;font-size:18px;line-height:1.65;color:var(--muted);max-width:62ch}
.factory-page .fp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px;border-top:1px solid var(--field);padding-top:24px}
.factory-page .fp-facts dt{font-size:14px;color:var(--muted)}.factory-page .fp-facts dd{margin:6px 0 0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.factory-page .fp-hero-img{margin:48px 0 0;aspect-ratio:16/7;overflow:hidden;background:var(--surface)}.factory-page .fp-hero-img img{width:100%;height:100%;object-fit:cover}
.factory-page .fp-area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-block:56px;border-top:1px solid var(--field)}
.factory-page .fp-area h2{font-size:clamp(30px,2.8vw,42px);line-height:1.1}.factory-page .fp-area p{margin-top:18px;font-size:17px;line-height:1.65;color:#414945}
.factory-page .fp-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.factory-page .fp-pics img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface)}
.factory-page .fp-pics.one{grid-template-columns:1fr}.factory-page .fp-pics.one img{aspect-ratio:16/10}
.factory-page .fp-end{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding-block:64px 112px;border-top:1px solid var(--field)}
.factory-page .fp-end .text-link{min-height:52px;display:inline-flex;align-items:center}
@media(max-width:850px){.factory-page .fp-area{grid-template-columns:1fr;gap:24px;padding-block:40px}.factory-page .fp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.factory-page .fp-hero-img{aspect-ratio:4/3}}
@media(max-width:600px){.factory-page .fp-hero{padding-block:40px}.factory-page .fp-lead,.factory-page .fp-area p{font-size:16px}.factory-page .fp-facts dd{font-size:24px}.factory-page .fp-pics{grid-template-columns:1fr}.factory-page .fp-end{padding-bottom:120px}.factory-page .fp-end .button{width:100%}}
/* P072 #certifications: centered head, single-row horizontal track of document images (contain on white, equal frames), arrow buttons browse only. Images are display-only. Also .faq-page spacing. */
#certifications .ct-head{text-align:center;margin:0 auto 48px;max-width:860px}
#certifications .ct-head h2{font-size:clamp(36px,3.4vw,52px);line-height:1.08;text-wrap:balance}
#certifications .ct-head p{margin:18px auto 0;font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch}
#certifications .ct-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#certifications .ct-viewport::-webkit-scrollbar{display:none}
#certifications .ct-viewport:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
#certifications .ct-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;margin:0;padding:0;list-style:none}
#certifications .ct-item{scroll-snap-align:start;min-width:0}
#certifications .ct-frame{height:clamp(300px,26vw,380px);background:#fff;border:1px solid var(--field);display:flex;align-items:center;justify-content:center;padding:12px}
#certifications .ct-frame img{width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;cursor:default}
#certifications .ct-name{margin-top:14px;font-size:16px;font-weight:600;line-height:1.35;text-align:center;max-width:none}
#certifications .ct-meta{margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted);text-align:center;max-width:none}
#certifications .ct-controls{display:flex;justify-content:center;gap:12px;margin-top:32px}
#certifications .ct-arrow{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0;cursor:pointer;transition:background-color 160ms var(--ease-out)}
#certifications .ct-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
#certifications .ct-arrow[data-dir="-1"] svg{transform:scaleX(-1)}
#certifications .ct-arrow:disabled{opacity:.3;cursor:default}
#certifications .ct-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){#certifications .ct-arrow:not(:disabled):hover{background:var(--surface)}}
#certifications .ct-note{margin:24px auto 0;font-size:14px;line-height:1.6;color:var(--muted);text-align:center;max-width:70ch}
@media(prefers-reduced-motion:no-preference){#certifications .ct-viewport{scroll-behavior:smooth}}
@media(max-width:1100px){#certifications .ct-track{grid-auto-columns:calc((100% - 40px)/3)}}
@media(max-width:850px){#certifications .ct-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:600px){#certifications .ct-head{margin-bottom:32px}#certifications .ct-head h2{font-size:clamp(28px,8.4vw,36px)}#certifications .ct-head p{font-size:16px}
#certifications .ct-track{grid-auto-columns:82%;gap:14px}#certifications .ct-frame{height:auto;aspect-ratio:3/4}}
.faq-page .fp-crumb{font-size:14px;color:var(--muted);margin-bottom:32px}.faq-page .fp-crumb a{text-decoration:underline}
.faq-page h1{font-size:clamp(36px,3.4vw,52px);line-height:1.08}
.faq-page{padding-block:72px 112px}
@media(max-width:600px){.faq-page{padding-block:40px 120px}.faq-page h1{font-size:clamp(28px,8.4vw,36px)}}

/* P074 homepage #project: purchasing process (5 numbered steps). Scoped to #project / .op-*; earlier .project rules kept. */
#project.op{background:#e9ebed}
#project .op-head{text-align:center;margin:0 auto 48px;max-width:860px}
#project .op-head h2{font-size:clamp(36px,3.4vw,52px);line-height:1.08;text-wrap:balance}
#project .op-head p{margin:18px auto 0;font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch}
#project .op-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:none}
#project .op-step{background:var(--paper);padding:28px 24px 30px;display:flex;flex-direction:column;min-width:0}
#project .op-num{font-size:32px;line-height:1;font-weight:500;color:var(--focus);font-variant-numeric:tabular-nums}
#project .op-step h3{font-size:21px;line-height:1.25;font-weight:600;margin-top:18px}
#project .op-time .op-time-next{margin-top:8px}
#project .op-time{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px 14px;background:#f2f3f4;font-size:15px;line-height:1.4}
#project .op-time strong{font-weight:600;color:var(--ink)}
#project .op-time span{color:var(--muted);font-size:14px}
#project .op-text{font-size:16px;line-height:1.6;color:var(--muted);margin-top:14px}
#project .op-notes{margin:28px auto 0;max-width:100ch;text-align:center;font-size:14px;line-height:1.6;color:var(--muted)}
#project .op-notes p+p{margin-top:4px}
#project .op-notes p{max-width:none}
#project .op-nowrap{white-space:nowrap}
#project .op-actions{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;margin-top:32px}
@media(max-width:1180px){#project .op-steps{grid-template-columns:1fr;gap:12px;max-width:720px;margin-inline:auto}#project .op-step{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:24px}#project .op-num{grid-row:1/span 3}#project .op-step h3{margin-top:0;min-height:0}#project .op-step>*:not(.op-num){grid-column:2}}
@media(max-width:600px){#project .op-head{margin-bottom:32px}#project .op-head h2{font-size:clamp(28px,8.4vw,36px)}#project .op-head p{font-size:16px}#project .op-step{grid-template-columns:40px 1fr;column-gap:12px;padding:20px 18px}#project .op-num{font-size:28px}#project .op-step h3{font-size:20px}#project .op-text{font-size:15px}#project .op-notes{text-align:left}#project .op-actions{flex-direction:column;align-items:stretch;gap:12px}#project .op-actions .text-link{justify-content:center}}
/* P074B: rail hidden (visibility only) while it intersects the #project process block; state set by app.js. */
body[data-home-dock-process="cover"] .inquiry-dock{visibility:hidden;pointer-events:none}

/* P075 homepage vertical rhythm (owner: too much white space). Scoped to the homepage only via #main:has(>#top.hero) (index.html is the only page with #top.hero).
   Padding/margins only; type, images, widths, card content and #products internals unchanged. Earlier rules untouched. */
#main:has(>#top.hero){--section-gap:64px}
#main:has(>#top.hero) #quality.qr{padding-block:var(--section-gap)}
#main:has(>#top.hero) #services.custom-block{margin-top:40px;padding-top:32px}
#main:has(>#top.hero) #manufacturing>.section-head,#main:has(>#top.hero) #services .custom-head,#main:has(>#top.hero) #quality .qr-head,#main:has(>#top.hero) #factory-visit .fv-head,#main:has(>#top.hero) #certifications .ct-head,#main:has(>#top.hero) #project .op-head{margin-bottom:32px}
#main:has(>#top.hero) #partners .pt-inner{padding-block:28px 32px}
#main:has(>#top.hero) #partners .pt-head{margin-bottom:24px}
#main:has(>#top.hero) #factory-visit .fv-cta{margin-top:28px}
#main:has(>#top.hero) #certifications .ct-controls{margin-top:20px}
#main:has(>#top.hero) #certifications .ct-note{margin-top:16px}
#main:has(>#top.hero) #project .op-notes{margin-top:20px}
#main:has(>#top.hero) #project .op-actions{margin-top:24px}
@media(max-width:1100px){#main:has(>#top.hero){--section-gap:56px}
#main:has(>#top.hero) #services.custom-block{margin-top:32px;padding-top:28px}
#main:has(>#top.hero) #manufacturing>.section-head,#main:has(>#top.hero) #services .custom-head,#main:has(>#top.hero) #quality .qr-head,#main:has(>#top.hero) #factory-visit .fv-head,#main:has(>#top.hero) #certifications .ct-head,#main:has(>#top.hero) #project .op-head{margin-bottom:28px}}
@media(max-width:600px){#main:has(>#top.hero){--section-gap:40px}
#main:has(>#top.hero) #services.custom-block{margin-top:24px;padding-top:24px}
#main:has(>#top.hero) #manufacturing>.section-head,#main:has(>#top.hero) #services .custom-head,#main:has(>#top.hero) #quality .qr-head,#main:has(>#top.hero) #factory-visit .fv-head,#main:has(>#top.hero) #certifications .ct-head,#main:has(>#top.hero) #project .op-head{margin-bottom:24px}
#main:has(>#top.hero) #partners .pt-inner{padding-block:24px 28px}
#main:has(>#top.hero) #partners .pt-head{margin-bottom:18px}
#main:has(>#top.hero) #factory-visit .fv-cta{margin-top:24px}}
/* P075 tweak after screenshots: #factory-visit and #certifications share the white page ground, so their two full paddings read as one 128px blank. Halve the shared edge, like #about/#manufacturing (64px desktop, 56 tablet, 40 phone). */
#main:has(>#top.hero) #factory-visit{padding-bottom:calc(var(--section-gap)*.5)}
#main:has(>#top.hero) #certifications{padding-top:calc(var(--section-gap)*.5)}
/* CAT-bottles-v1: stainless-steel-bottles.html first page only (main.bottle-category-page). Same white/graphite world, Hanken, square shapes. CAT-bottles-v2 (2026-10-30): selection guide section, order photo/facts split, FAQ aside; right-rail clearance only >900px (<=900px uses the bottom dock). */
.bottle-category-page{--b-line:#dfe2e0;--b-rail:0px}
.bottle-category-page [id^="bottle-"],.bottle-category-page #product-list{scroll-margin-top:24px}
@media(min-width:901px){.bottle-category-page{--b-rail:max(0px,calc(160px - var(--page-gutter) - max(0px,(100vw - 1600px) / 2)))}}
.bottle-category-page ::selection{background:#d7ded8;color:var(--ink)}
.bottle-hero.shop-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px clamp(32px,4vw,72px);align-items:center;padding-block:16px 56px;padding-right:var(--b-rail)}
.bottle-hero h1{max-width:13ch;text-wrap:balance}
.bottle-hero-copy>p{color:#4a514d;max-width:52ch}
.bottle-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:30px}
.bottle-jumps ul{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--b-line);display:flex;flex-wrap:wrap;gap:4px 24px}
.bottle-jumps a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#4a514d;text-decoration:underline;text-decoration-color:#c3c9c5;text-underline-offset:5px;transition:color 160ms var(--ease-out),text-decoration-color 160ms var(--ease-out)}
.bottle-hero-stage{background:var(--product-ground);aspect-ratio:5/4;display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,48px);padding:7% 8% 0}
.bottle-hero-item{display:flex;flex-direction:column;align-items:center;height:calc(var(--h) * 82%);justify-content:flex-end}
.bottle-hero-item img{height:100%;width:auto;min-height:0}
.bottle-hero-stage{position:relative}
.bottle-hero-label{display:flex;flex-direction:column;align-items:center;font-size:13px;line-height:1.35;color:var(--ink);font-weight:500;padding:12px 0 14px;font-variant-numeric:tabular-nums}
.bottle-hero-label>span{color:#4a514d;font-weight:400}
.bottle-hero-item{height:calc(var(--h) * 100%)}
.bottle-hero-item img{flex:1 1 auto}
.bottle-guide{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:40px;padding:20px 0;border-block:1px solid var(--b-line);font-size:17px;color:#3f4642;padding-right:var(--b-rail)}
.bottle-section{margin-top:112px;padding-right:var(--b-rail)}
.bottle-section h2{font-size:clamp(32px,3.2vw,46px);line-height:1.08;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.bottle-section h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:500}
.bottle-section p,.bottle-section dd{font-size:17px;line-height:1.65;color:#3f4642}
.bottle-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:40px}
.bottle-head p{max-width:58ch}
.bottle-note{font-size:15px!important;color:#4f5652!important;margin-top:24px}
/* compare */
.bottle-table-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
.bottle-table-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.bottle-table{width:100%;min-width:860px;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.bottle-table th,.bottle-table td{text-align:left;vertical-align:middle;padding:16px 20px 16px 0;border-bottom:1px solid var(--b-line)}
.bottle-table thead th{font-size:14px;font-weight:500;color:#4f5652;padding-block:14px;vertical-align:bottom}
.bottle-table tbody th a{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:44px;padding-block:4px;white-space:nowrap;cursor:pointer;color:var(--ink);transition:color 160ms var(--ease-out)}.bottle-table-sku{font-weight:500;font-size:17px;text-decoration:underline;text-decoration-color:var(--focus);text-decoration-thickness:1px;text-underline-offset:4px}.bottle-table-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--focus)}.bottle-table-cta svg{width:16px;height:16px;flex:none;transition:transform 180ms var(--ease-out)}.bottle-table a.bottle-table-photo-link{display:block;width:72px;height:96px;cursor:pointer}.bottle-table a.bottle-table-photo-link img{transition:opacity 160ms var(--ease-out)}.bottle-table tbody th a:focus-visible,.bottle-table a.bottle-table-photo-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.bottle-table td.bottle-table-photo{width:88px;padding-right:24px}
.bottle-scroll-hint{display:none;font-size:14px!important;color:#4f5652!important;margin-top:12px}
.bottle-table td.bottle-table-photo img{display:block;width:72px;height:96px;object-fit:contain;background:var(--product-ground)}
.bottle-table ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bottle-table td:nth-child(3),.bottle-table td:nth-child(4){white-space:nowrap}
.bottle-decide{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px clamp(40px,5vw,88px);align-items:start}
.bottle-select{margin-top:96px;border-top:1px solid var(--b-line);padding-top:56px}
.bottle-decide-lids>p{margin-top:12px;max-width:56ch}
.bottle-lids{list-style:none;margin:24px 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bottle-lids figure{margin:0}
.bottle-lids img,.bottle-colors img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#fff}
.bottle-lids figcaption{font-size:15px;line-height:1.35;color:var(--ink);font-weight:500;padding-top:10px}
.bottle-decide-notes{display:grid;gap:0;border-top:1px solid var(--b-line)}
.bottle-decide-notes>div{padding:24px 0;border-bottom:1px solid var(--b-line)}
.bottle-decide-notes p{margin-top:8px}
/* customization */
.bottle-custom{background:var(--surface);margin-inline:calc(-1 * var(--page-gutter));padding:88px var(--page-gutter);padding-right:max(var(--page-gutter),calc(var(--page-gutter) + var(--b-rail)))}
.bottle-colors{margin:0}
.bottle-colors ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:var(--surface)}
.bottle-colors li span{display:block;font-size:14px;color:#3f4642;padding-top:10px}
.bottle-colors figcaption{font-size:15px;color:#4f5652;margin-top:16px;max-width:70ch}
.bottle-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:48px 0 0}
.bottle-options>div{border-top:1px solid var(--ink);padding-top:18px}
.bottle-options dt{font-size:19px;font-weight:500;letter-spacing:-.015em}
.bottle-options dd{margin:8px 0 0}
/* factory */
.bottle-factory{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,5vw,88px);align-items:start}
.bottle-factory figure{margin:0}
.bottle-factory img{display:block;width:100%;height:auto;object-fit:cover}
.bottle-factory-main img{aspect-ratio:4/5}
.bottle-factory figcaption{font-size:14px;color:#4f5652;padding-top:10px}
.bottle-factory-copy>p{margin-top:20px;max-width:56ch}
.bottle-factory-side{margin-top:36px!important;max-width:520px}
.bottle-factory-side img{aspect-ratio:4/3}
.bottle-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:20px!important}
/* ordering (v2): full-width head, real photos ~42% + facts ~58% */
.bottle-order{border-top:1px solid var(--b-line);padding-top:56px}
.bottle-order-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:44px}
.bottle-order-head p{max-width:58ch}
.bottle-order-body{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:40px clamp(40px,5vw,80px);align-items:start}
.bottle-order-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0}
.bottle-order-media figure{margin:0}
.bottle-order-media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.bottle-order-product img{background:#fff;outline:1px solid var(--b-line);outline-offset:-1px}
.bottle-order-media figcaption{font-size:14px;line-height:1.45;color:#4f5652;padding-top:10px}
.bottle-terms{margin:0;display:grid;border-top:1px solid var(--ink)}
.bottle-terms>div{display:grid;grid-template-columns:minmax(120px,.32fr) minmax(0,1fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--b-line)}
.bottle-terms dt{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.bottle-terms dd{margin:0}
.bottle-terms strong{color:var(--ink);font-weight:600}
/* faq (v2): list ~60% + model help aside ~40% */
.bottle-faq{max-width:none}
.bottle-faq h2{margin-bottom:32px}
.bottle-faq-grid{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:40px clamp(40px,5vw,80px);align-items:start}
.bottle-faq-list{border-top:1px solid var(--ink)}
.bottle-faq-list details{border-bottom:1px solid var(--b-line)}
.bottle-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:16px 0;font-size:18px;font-weight:500;color:var(--ink)}
.bottle-faq-list summary::-webkit-details-marker{display:none}
.bottle-faq-list summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform 180ms var(--ease-out)}
.bottle-faq-list details[open] summary svg{transform:rotate(45deg)}
.bottle-faq-list summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.bottle-faq-list details p{padding:0 0 22px;max-width:68ch}
.bottle-faq-aside{position:sticky;top:24px;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px 24px;background:var(--surface);padding:24px}
.bottle-faq-aside figure{margin:0}
.bottle-faq-aside img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#fff}
.bottle-faq-aside figcaption{font-size:14px;color:#4f5652;padding-top:8px}
.bottle-faq-help h3{font-size:20px}
.bottle-faq-help p{font-size:16px!important;margin-top:10px}
.bottle-faq-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;border-top:1px solid var(--b-line);padding-top:16px}
.bottle-faq-actions .button{flex:1 0 100%;justify-content:space-between;margin-bottom:8px;white-space:nowrap}
.bottle-faq-actions .text-link{overflow-wrap:anywhere}
/* inquiry */
.bottle-inquiry{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px 64px;align-items:center;background:var(--ink);color:#fff;margin-inline:calc(-1 * var(--page-gutter));padding:72px var(--page-gutter);padding-right:max(var(--page-gutter),calc(var(--page-gutter) + var(--b-rail)))}
.bottle-inquiry h2{color:#fff}
.bottle-inquiry p{color:#dfe5e1;margin-top:18px;max-width:60ch}
.bottle-inquiry-actions{display:grid;gap:4px;justify-items:start}
.bottle-inquiry-actions .button{background:#fff;color:var(--ink);margin-bottom:12px}
.bottle-inquiry-actions .text-link{color:#fff}
.bottle-inquiry a:focus-visible{outline-color:#cfe0d7}
.bottle-category-page:has(.bottle-inquiry){padding-bottom:0}
@media(hover:hover) and (pointer:fine){.bottle-jumps a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.bottle-hero-item:hover .bottle-hero-label{color:var(--focus)}
.bottle-table tbody th a:hover{color:var(--focus)}.bottle-table tbody th a:hover .bottle-table-sku{text-decoration-thickness:2px}.bottle-table tbody th a:hover .bottle-table-cta svg{transform:translateX(3px)}.bottle-table a.bottle-table-photo-link:hover img{opacity:.82}
.bottle-inquiry-actions .button:hover{background:#e8ece9}
.bottle-inquiry-actions .text-link:hover{color:#cfe0d7}}
@media(max-width:1100px){.bottle-hero.shop-head{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.bottle-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.bottle-decide{grid-template-columns:1fr}
}
@media(max-width:900px){.bottle-hero.shop-head{grid-template-columns:1fr}
.bottle-hero-stage{aspect-ratio:16/10;max-width:640px}
.bottle-head,.bottle-factory,.bottle-order-head,.bottle-order-body,.bottle-faq-grid,.bottle-inquiry{grid-template-columns:1fr}
.bottle-order-media{max-width:640px}
.bottle-faq-aside{position:static;grid-template-columns:minmax(0,200px) minmax(0,1fr);max-width:720px}
.bottle-faq-aside img{aspect-ratio:4/5}
.bottle-factory-main img{aspect-ratio:16/10}}
@media(max-width:600px){.bottle-hero.shop-head{padding-block:8px 36px}
.bottle-hero h1{font-size:clamp(32px,9vw,40px)}
.bottle-hero-copy>p{font-size:17px}
.bottle-hero-actions .button{width:100%}
.bottle-hero-stage{aspect-ratio:16/11;padding:5% 5% 0;gap:10px}
.bottle-hero-label{font-size:12px}
.bottle-section{margin-top:80px}
.bottle-section h2{font-size:32px}
.bottle-head{margin-bottom:28px}
.bottle-guide{font-size:16px}
.bottle-table{min-width:720px;font-size:15px}
.bottle-table td.bottle-table-photo img{width:56px;height:75px}.bottle-table a.bottle-table-photo-link{width:56px;height:75px}
.bottle-lids{gap:8px}
.bottle-colors ul{grid-template-columns:repeat(5,minmax(0,1fr))}
.bottle-colors li span{font-size:13px;line-height:1.3;text-align:center;padding-inline:2px}
.bottle-scroll-hint{display:block!important}
.bottle-custom{padding-block:64px}
.bottle-options{grid-template-columns:1fr;gap:20px}
.bottle-terms>div{grid-template-columns:1fr;gap:6px;padding:18px 0}
.bottle-order-head{margin-bottom:28px}
.bottle-select{margin-top:72px;padding-top:40px}
.bottle-faq-aside{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}
.bottle-faq-help p{font-size:15px!important}
.bottle-faq-help h3{font-size:18px}
.bottle-faq-actions .button{width:100%}
.bottle-faq-list summary{font-size:17px}
.bottle-inquiry{padding-block:56px}
.bottle-inquiry-actions .button{width:100%}
/* <=600px: this page lays the existing contact rail out as the 3-cell bottom bar (same as products.html P054) so it never covers photos or controls. */
body:has(main.bottle-category-page) .inquiry-dock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));flex-direction:row;gap:6px}
body:has(main.bottle-category-page) .inquiry-dock-link{flex:1 1 0;width:auto;min-width:0;height:52px;min-height:52px;flex-direction:column;justify-content:center;gap:3px;padding:4px;border-radius:12px;font-size:12px;text-align:center}
body:has(main.bottle-category-page) .inquiry-dock-link svg{width:18px;height:18px}
body:has(main.bottle-category-page) .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.bottle-faq-list summary svg,.bottle-jumps a{transition:none}}
/* 601–900px: same 3-cell bottom bar on this page only, so the right rail never covers product card titles at tablet widths. Desktop (>900px) keeps the right rail. */
@media(min-width:601px) and (max-width:900px){body:has(main.bottle-category-page) .inquiry-dock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));flex-direction:row;gap:6px}
body:has(main.bottle-category-page) .inquiry-dock-link{flex:1 1 0;width:auto;min-width:0;height:52px;min-height:52px;flex-direction:column;justify-content:center;gap:3px;padding:4px;border-radius:12px;font-size:12px;text-align:center}
body:has(main.bottle-category-page) .inquiry-dock-link svg{width:18px;height:18px}
body:has(main.bottle-category-page) .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
/* /CAT-bottles-v1 */
/* BLOG-001 (local preview 2026-10-30): blog index card + article page. Scoped to .blog-page / .blog-article-page only. */
.blog-page .blog-list{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:40px}
.blog-card-link{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;padding-block:28px;border-top:1px solid var(--field)}
.blog-card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.blog-card-title{font-size:clamp(24px,2.1vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.blog-card-summary{font-size:18px;line-height:1.6;color:var(--muted);max-width:56ch}
.blog-card-link:hover .blog-card-title{color:var(--focus)}
.blog-card-link:hover .blog-card-more svg{transform:translateX(4px)}
@media(max-width:850px){.blog-card-link{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){.blog-page .blog-list{margin-top:36px}
.blog-card-summary{font-size:17px}}
/* BLOG-004 (local preview 2026-10-30): article page follows the owner-selected cable-site reference
   (chinacablefactory.com/blog/acsr-…, measured in ../cable-layout-measurements.json). Full-width #18181b title band
   (crumb, full H1, meta) + separate white body column (768px incl. 32px gutters). Arial throughout the article.
   Scoped to .blog-article-page / body.blog-article-dock; nav and footer untouched. Replaces the BLOG-002/003 rules. */
.blog-article-page{--article-link:#005ea8;--article-link-hover:#003f73;padding:0;max-width:none;font-family:Arial,Helvetica,sans-serif}
.blog-article-page .article{display:block}
.article-band{background:#18181b;color:#fff}
.article-band-inner{box-sizing:border-box;max-width:896px;margin-inline:auto;padding:64px 32px}
.article-crumb ol{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;line-height:20px;color:#a1a1aa}
.article-crumb li{display:flex;align-items:center;gap:8px}
.article-crumb li+li::before{content:"/";color:#71717a}
.article-crumb a{color:#d4d4d8;text-decoration:none}
.article-crumb a:hover{color:#fff;text-decoration:underline}
.article-crumb a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.article-band h1{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:48px;line-height:48px;font-weight:700;letter-spacing:-.025em;color:#fff;max-width:none;text-wrap:wrap}
.article-meta{margin-top:16px;font-size:14px;line-height:20px;color:#a1a1aa;max-width:none}
.article-body{background:#fff;padding:48px 0}
.article-body-inner{box-sizing:border-box;max-width:768px;margin-inline:auto;padding-inline:32px}
.article-body p{font-size:16px;line-height:26px;font-weight:400;color:#3f3f46;margin:0 0 16px;max-width:none}
.article-summary{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:24px;margin-bottom:32px}
.article-body .article-summary-label{font-size:12px;line-height:16px;font-weight:700;color:#1d4ed8;margin:0 0 8px}
.article-body .article-summary .article-intro p{font-size:16px;line-height:26px;font-weight:500;color:#27272a;margin:0}
.article-section h2{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#18181b;letter-spacing:normal;margin:40px 0 16px;text-wrap:wrap}
.article-figure{margin:32px 0}
.article-figure img{display:block;width:100%;height:auto;background:var(--surface)}
.article-figure figcaption{font-size:14px;line-height:20px;color:#71717a;margin-top:8px;max-width:none}
.article-figure-product img{max-width:440px;margin-inline:auto;aspect-ratio:1/1;object-fit:contain;background:var(--product-ground)}
.article-figure-product figcaption{text-align:center}
.article-intro a,.article-section a,.article-faq a,.article-explore a{color:var(--article-link);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:currentColor}
.article-intro a:hover,.article-section a:hover,.article-faq a:hover,.article-explore a:hover{color:var(--article-link-hover)}
.article-intro a:focus-visible,.article-section a:focus-visible,.article-faq a:focus-visible,.article-explore a:focus-visible{outline:3px solid var(--article-link);outline-offset:3px;border-radius:2px}
.article-section,.article-faq{scroll-margin-top:110px}
.article-table-wrap{max-width:100%;overflow-x:auto;margin:24px 0 32px}
.article-table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px;color:#3f3f46}
.article-table th,.article-table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid #e4e4e7}
.article-table thead th{font-weight:700;color:#18181b;background:#f4f4f5}
.article-table tbody th{font-weight:700;color:#27272a}
.article-explore{margin-top:40px;padding-top:24px;border-top:1px solid #e4e4e7}
.article-body .article-explore-title{font-size:18px;line-height:28px;font-weight:700;color:#18181b;margin:0 0 12px}
.article-explore ul{margin:0;padding-left:20px;font-size:16px;line-height:26px;color:#3f3f46}
.article-explore li{margin-bottom:8px}
/* BLOG-005 (local preview 2026-10-30): inquiry CTA cards between sections (owner: at least 3 per article, top/middle/bottom).
   Cable-site inquiry block structure (text left, one button right) in Quanhu neutrals; no shadow, icon, badge or animation. */
.article-inquiry-card{display:block;margin:40px 0;padding:30px;background:#f4f4f5;border:1px solid #e4e4e7;border-radius:12px;scroll-margin-top:110px}
.article-inquiry-text{min-width:0}
.article-inquiry-card h3{font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:28px;font-weight:700;letter-spacing:normal;color:#18181b;margin:0 0 8px;max-width:none;text-wrap:wrap}
.article-body .article-inquiry-card p{font-size:16px;line-height:26px;font-weight:400;color:#3f3f46;margin:0;max-width:none}
.article-inquiry-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;gap:12px;margin-top:20px}
.article-inquiry-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;box-sizing:border-box;color:#fff;border:2px solid transparent;border-radius:8px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:20px;font-weight:700;text-decoration:none;white-space:nowrap}
.article-inquiry-button svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none}
.article-inquiry-button,.article-inquiry-button:hover,.article-inquiry-button:focus-visible,.article-inquiry-button:visited{text-decoration:none}
.article-inquiry-form,.article-inquiry-form:visited{background:#222725;border-color:#222725;color:#fff}
.article-inquiry-form:hover{background:#fff;color:#222725}
.article-inquiry-form:focus-visible{outline:3px solid #222725;outline-offset:3px}
.article-inquiry-whatsapp,.article-inquiry-whatsapp:visited{background:#147d43;border-color:#147d43;color:#fff}
.article-inquiry-whatsapp:hover{background:#fff;color:#147d43}
.article-inquiry-whatsapp:focus-visible{outline:3px solid #147d43;outline-offset:3px}
@media(max-width:639px){.article-inquiry-card{padding:24px}
.article-inquiry-actions{flex-direction:column}
.article-inquiry-button{width:100%;white-space:normal;text-align:center}}
/* BLOG-007 (local preview 2026-10-30): FAQ after the last section, cable-site style: white, same column, questions bold,
   answers always shown. No cards, icons, numbers, dividers or toggles. */
.article-faq{margin:0}
.article-faq h2{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#18181b;letter-spacing:normal;margin:40px 0 16px;text-wrap:wrap}
.article-faq-item+.article-faq-item{margin-top:24px}
.article-faq h3{font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:26px;font-weight:700;letter-spacing:normal;color:#18181b;margin:0 0 8px;max-width:none;text-wrap:wrap}
.article-body .article-faq p{margin:0;overflow-wrap:break-word}
/* BLOG-009 (local preview 2026-11-01): real author box after the FAQ, before the bottom inquiry card. White, same column,
   no card, border, shadow or gradient. Photo is the owner-supplied original, shown as a CSS circle only. */
.article-author{margin:0 0 40px;scroll-margin-top:110px}
.article-author h2{font-family:Arial,Helvetica,sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#18181b;letter-spacing:normal;margin:40px 0 16px;text-wrap:wrap}
.article-author-card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:24px;align-items:start}
.article-author-photo{grid-column:1;grid-row:1/span 3;display:block;width:112px;height:112px;object-fit:cover;border-radius:50%;box-shadow:none}
.article-author-head,.article-author-bio,.article-author-links{grid-column:2;min-width:0}
.article-body .article-author-name{font-size:20px;line-height:28px;font-weight:700;color:#18181b;margin:0 0 5px}
.article-body .article-author-role{font-size:16px;line-height:24px;font-weight:400;color:#3f3f46;margin:0}
.article-body .article-author-bio{font-size:16px;line-height:26px;margin:12px 0 0;overflow-wrap:break-word}
.article-body .article-author-bio p{font-size:16px;line-height:26px;margin:0;overflow-wrap:break-word}
.article-body .article-author-bio p+p{margin-top:12px}
.article-body .article-author-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px;line-height:26px;margin:12px 0 0}
.article-author-links a{color:var(--article-link);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:currentColor}
.article-author-links a:hover{color:var(--article-link-hover)}
.article-author-links a:focus-visible{outline:3px solid var(--article-link);outline-offset:3px;border-radius:2px}
.article-meta .article-author-byline{color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-meta .article-author-byline:hover{text-decoration-thickness:2px}
.article-meta .article-author-byline:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
@media(max-width:639px){.article-author-card{grid-template-columns:88px minmax(0,1fr);column-gap:16px;grid-template-rows:auto}
.article-author-photo{grid-row:1;width:88px;height:88px}
.article-author-head{grid-column:2;grid-row:1;align-self:center}
.article-author-bio,.article-author-links{grid-column:1/-1}
.article-body .article-author-bio{margin-top:12px}}
/* Fixed contact rail: below 1100px the right column would reach the 800px text column, so article pages use the bottom bar
   (same owner-approved style as P054) up to 1099px; the footer gets room for it. */
@media(max-width:1099px){body.blog-article-dock .inquiry-dock{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));flex-direction:row;gap:6px}
body.blog-article-dock .inquiry-dock-link{flex:1 1 0;width:auto;min-width:0;height:52px;min-height:52px;flex-direction:column;justify-content:center;gap:3px;padding:4px;border-radius:12px;font-size:12px;text-align:center}
body.blog-article-dock .inquiry-dock-link svg{width:18px;height:18px}
body.blog-article-dock .site-footer{padding-bottom:calc(28px + 72px + env(safe-area-inset-bottom))}}
@media(max-width:1023px){.article-band-inner{padding-inline:24px}
.article-band h1{font-size:36px;line-height:40px}
.article-body-inner{padding-inline:24px}}
@media(max-width:639px){.article-band-inner{padding-inline:16px}
.article-band h1{font-size:30px;line-height:36px}
.article-body-inner{padding-inline:16px}
.article-figure-product img{max-width:100%}}
/* /BLOG-001 */
/* OEM-ODM-FOUR-FIX-20261101 release: OEM/ODM service page + Custom Services menu rules, verbatim from the approved local preview (oem-odm-v4-visual-20261030); every selector scoped to .cs-/.cs2-/.v4-/.oem-/data-route/services menu classes. Production CSS above is unchanged. */
.nav-services{position:relative}
/* OEM/ODM v2 Custom Services menu: same panel, item and hover styles as Products; narrower two-item panel under its own button. */
.nav-services-toggle{display:inline-flex;align-items:center;gap:6px;background:transparent;padding:12px 0;font-size:inherit;font-weight:inherit;line-height:inherit;transition:color 160ms var(--ease-out)}
.nav-services[data-current] .nav-services-toggle{color:var(--ink);font-weight:500}
.services-menu{position:absolute;top:calc(100% + 22px);left:-28px;z-index:25;white-space:normal;width:440px}
.services-menu-panel{background:#fff;border-top:1px solid #e3e6e4;padding:14px 14px;/* taste-skill-ignore: dropdown needs lift above page content. */box-shadow:0 18px 40px #1d232014,0 2px 6px #1d23200d;animation:menu-in 180ms var(--ease-out)}
.services-menu-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
@media(hover:hover) and (pointer:fine){.nav-services-toggle:hover{color:var(--focus)}}
@media(prefers-reduced-motion:reduce){.services-menu-panel{animation:none}}
.services-menu-item,.products-menu-item.services-menu-item{min-height:84px;padding:14px 16px}
/* CS-v1 custom-water-bottles.html (local preview). Scoped to .cs-page; reuses .wrap, .button, .text-link, .crumbs, .hub-faq-list. */
.cs-page{--cs-line:#dfe2e0;--hub-line:#dfe2e0;--section-gap:72px}
.cs-page section{scroll-margin-top:24px}
.cs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:32px var(--section-gap)}
.cs-hero h1{font-size:clamp(40px,4.3vw,64px);line-height:1.04}
.cs-lead{margin-top:22px;font-size:19px;line-height:1.6;color:var(--muted);max-width:52ch}
.cs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--cs-line)}
.cs-facts dt{font-size:14px;color:var(--muted)}
.cs-facts dd{margin:6px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cs-facts dd.cs-fact-note{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);line-height:1.45}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:36px}
.cs-hero-img{margin:0;background:var(--product-ground)}
.cs-hero-img img{width:100%;aspect-ratio:1;object-fit:contain}
.cs-page figcaption{font-size:14px;color:var(--muted);padding:10px 0 0;background:var(--paper)}
.cs-page h2{font-size:clamp(32px,3vw,46px);line-height:1.08}
.cs-band{background:var(--surface);padding-block:var(--section-gap)}
.cs-band figcaption{background:var(--surface)}
.cs-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.cs-route{background:var(--paper);padding:32px}
.cs-route-tag{font-size:14px;font-weight:600;color:var(--focus)}
.cs-route h3{margin-top:10px;font-size:26px}
.cs-route dl{margin:24px 0 0}
.cs-route dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding-block:14px;border-top:1px solid var(--cs-line)}
.cs-route dt{font-size:14px;color:var(--muted)}
.cs-route dd{margin:0;font-size:16px;line-height:1.55}
.cs-route-img{margin:20px 0 0}
.cs-route-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cs-route-img figcaption{background:var(--paper)}
.cs-options{padding-block:var(--section-gap)}
.cs-opt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;padding-block:36px;border-top:1px solid var(--cs-line)}
.cs-options h2+.cs-opt{margin-top:32px}
.cs-opt:not(:has(.cs-opt-media)){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cs-opt h3{font-size:26px}
.cs-opt-text p{margin-top:12px;font-size:16px;line-height:1.6;color:#414945}
.cs-opt-text b{font-weight:600;color:var(--ink)}
.cs-opt-media{margin:0;display:grid;gap:12px}
.cs-opt-media figcaption{grid-column:1/-1;padding-top:0}
.cs-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-swatches img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--product-ground)}
.cs-lids img{width:100%;max-width:620px;background:#fff}
.cs-pack{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-pack img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface)}
.cs-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;counter-reset:cs}
.cs-steps li{counter-increment:cs;padding-top:16px;border-top:2px solid var(--ink)}
.cs-steps li::before{content:counter(cs,decimal-leading-zero);display:block;font-size:14px;font-weight:600;color:var(--focus)}
.cs-steps h3{margin-top:8px;font-size:18px}
.cs-steps p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.cs-steps a,.cs-faq details a,.cs-scope a{text-decoration:underline;text-underline-offset:3px}
.cs-note{margin-top:32px;font-size:14px;color:var(--muted)}
.cs-scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-block:var(--section-gap)}
.cs-scope p{margin-top:16px;color:#414945}
.cs-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cs-links li{border-bottom:1px solid var(--cs-line)}
.cs-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-weight:500;text-decoration:none;transition:color 160ms var(--ease-out)}
.cs-links svg{width:18px;height:18px}
.cs-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.cs-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.cs-checklist li{padding:14px 0 14px 28px;border-bottom:1px solid var(--cs-line);position:relative;font-size:16px}
.cs-checklist li::before{content:"";position:absolute;left:4px;top:22px;width:10px;height:6px;border-left:2px solid var(--focus);border-bottom:2px solid var(--focus);transform:rotate(-45deg)}
.cs-faq{padding-block:var(--section-gap)}
.cs-faq>h2{max-width:1080px;margin-inline:auto}
.cs-more{max-width:1080px;margin:20px auto 0}
.cs-end{background:var(--surface);padding-block:var(--section-gap) calc(var(--section-gap) + 40px)}
.cs-end .cs-actions{margin-top:24px}
@media(hover:hover) and (pointer:fine){.cs-links a:hover{color:var(--focus)}}
@media(max-width:1100px){.cs-page{--section-gap:56px}.cs-steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}}
@media(max-width:850px){.cs-hero,.cs-scope,.cs-brief,.cs-opt{grid-template-columns:1fr;gap:28px}.cs-routes{grid-template-columns:1fr}.cs-hero-img{order:2}}
@media(max-width:600px){.cs-page{--section-gap:40px}.cs-hero{padding-top:12px}.cs-lead{font-size:17px}.cs-facts{grid-template-columns:1fr;gap:16px}.cs-route{padding:22px}.cs-route dl>div{grid-template-columns:1fr;gap:4px}
.cs-steps{grid-template-columns:1fr;gap:18px}.cs-checklist{grid-template-columns:1fr}.cs-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-actions .button{width:100%}.cs-end{padding-bottom:calc(var(--section-gap) + 180px)}}
/* /CS-v1 */
/* CS-v1 fix: cards align to top; color set image; lids row stacks own photos + illustration. */
.cs-routes{align-items:start}
.cs-colorset img{width:100%;background:#fff}
.cs-opt-stack{display:grid;gap:28px}
/* /CS-v1 fix */
/* CS-v1 r2: tabs, development steps, terms table, secondary button. Scoped to .cs-page. */
.cs-page .button-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cs-fact-foot{margin-top:14px;font-size:14px;color:var(--muted)}
.cs-fact-foot a,.cs-route-link{text-decoration:underline;text-underline-offset:3px}
.cs-route{display:flex;flex-direction:column}
.cs-route dl{flex:1}
.cs-route-link{margin-top:20px;align-self:flex-start;text-decoration:none}
.cs-sub{margin-top:12px;color:var(--muted);max-width:62ch}
.cs-tabs{margin-top:32px}
.cs-tablist{display:flex;gap:0;border-bottom:1px solid var(--cs-line);overflow-x:auto;scrollbar-width:none}
.cs-tablist[hidden]{display:none}
.cs-tablist button{flex:0 0 auto;appearance:none;border:0;background:none;padding:16px 22px;font:inherit;font-size:16px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.cs-tablist button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--focus)}
.cs-tablist button:focus-visible,.cs-panel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cs-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;padding-block:36px;border-top:1px solid var(--cs-line)}
.cs-tabs.is-tabbed .cs-panel{border-top:0}
.cs-panel[hidden]{display:none}
.cs-panel-media{margin:0}
.cs-panel-media img{width:100%;display:block;background:#fff}
.cs-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-media-grid .cs-wide{grid-column:1/-1}
.cs-media-grid img:not(.cs-wide){aspect-ratio:4/3;object-fit:cover}
.cs-media-pack{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-media-pack img:not(.cs-wide){aspect-ratio:3/4;object-fit:cover}
.cs-media-pack img:first-child{object-fit:contain;background:var(--product-ground)}
.cs-panel-media figcaption{grid-column:1/-1;padding-top:2px}
.cs-panel-text h3{font-size:28px}
.cs-spec{margin:20px 0 24px}
.cs-spec>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding-block:12px;border-top:1px solid var(--cs-line)}
.cs-spec dt{font-size:14px;color:var(--muted)}
.cs-spec dd{margin:0;line-height:1.55}
.cs-dev-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:end}
.cs-dev-img{margin:0}
.cs-dev-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cs-dev{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:dev}
.cs-dev li{counter-increment:dev;background:var(--paper);padding:22px 20px}
.cs-dev li::before{content:counter(dev,decimal-leading-zero);display:block;font-size:14px;font-weight:600;color:var(--focus)}
.cs-dev h3{margin-top:8px;font-size:18px}
.cs-dev dl{margin:14px 0 0}
.cs-dev dl>div{padding-block:10px;border-top:1px solid var(--cs-line)}
.cs-dev dt{font-size:13px;color:var(--muted)}
.cs-dev dd{margin:4px 0 0;font-size:14px;line-height:1.5}
.cs-terms{padding-block:var(--section-gap)}
.cs-terms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.cs-terms-grid>div{border-top:2px solid var(--ink);padding-top:18px}
.cs-terms-grid h3{font-size:20px}
.cs-terms-grid dl{margin:12px 0 0}
.cs-terms-grid dl>div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--cs-line)}
.cs-terms-grid dt{font-size:15px;color:#414945}
.cs-terms-grid dd{margin:0;font-weight:600;text-align:right}
.cs-terms-grid p{margin-top:12px;font-size:14px;color:var(--muted)}
.cs-brief-cta{grid-column:2;margin-top:8px}
@media(max-width:1100px){.cs-dev{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.cs-panel,.cs-dev-head{grid-template-columns:1fr;gap:24px}.cs-terms-grid{grid-template-columns:1fr}.cs-dev{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-brief-cta{grid-column:auto}}
@media(max-width:600px){.cs-tablist{margin-inline:-20px;padding-inline:20px}.cs-tablist button{padding:14px 14px;font-size:15px}.cs-spec>div{grid-template-columns:1fr;gap:2px}.cs-dev{grid-template-columns:1fr}.cs-media-pack{grid-template-columns:1fr 1fr}.cs-media-pack img:first-child{grid-column:1/-1;aspect-ratio:1}.cs-actions .button-secondary{width:100%}}
/* /CS-v1 r2 */
/* CS-v1 r2 fix: terms rows stack label above value (no cramped wrapping); dev header top-aligned. */
.cs-terms-grid dl>div{display:block}
.cs-terms-grid dt{font-size:14px;color:var(--muted)}
.cs-terms-grid dd{margin-top:4px;text-align:left;font-size:17px;line-height:1.4}
.cs-dev-head{align-items:start}
/* /CS-v1 r2 fix */
/* CS-v1 r3 (rev 01:49): contact rail vs content on custom-water-bottles.html only (body:has(main.cs-page)); other pages untouched.
   >=1280px: rail stays a right column; page content uses the SAME safe margin on both sides (padding-inline), so it stays centred.
     Safe margin = 164px (rail 124px + right 20px + 20px gap) minus the non-negative space outside the 1600px container, never below the page gutter.
   <=1279px: rail becomes a solid bottom bar (three buttons); normal page gutters; footer gets matching bottom padding. */
@media(min-width:1280px){body:has(main.cs-page) main.cs-page .wrap{padding-inline:max(var(--page-gutter),calc(164px - max(0px,(100vw - 1600px) / 2)))}
/* Hero title keeps two lines inside the narrower rail-mode column (content width = 100vw - 2*164px below 1600px). */
body:has(main.cs-page) .cs-hero h1{font-size:clamp(40px,calc((100vw - 328px) * .049),64px)}}
@media(max-width:1279px){
body:has(main.cs-page) .inquiry-dock{left:0;right:0;bottom:0;flex-direction:row;justify-content:center;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--paper);border-top:1px solid #dfe3e1}
body:has(main.cs-page) .inquiry-dock-link{flex:1 1 0;max-width:220px;width:auto;min-width:0;height:48px;min-height:48px;justify-content:center;box-shadow:none;border:1px solid #dfe3e1}
body:has(main.cs-page) .inquiry-dock-form{border-color:#264b68}
body:has(main.cs-page) .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
@media(max-width:600px){body:has(main.cs-page) .inquiry-dock-link{flex-direction:column;gap:3px;height:52px;min-height:52px;padding:4px;border-radius:12px;font-size:12px;text-align:center}
body:has(main.cs-page) .inquiry-dock-link svg{width:18px;height:18px}}
@media(max-width:600px){body:has(main.cs-page) .cs-tablist{display:grid;grid-template-columns:1fr 1fr;margin-inline:0;padding-inline:0;border-bottom:0;gap:0}
body:has(main.cs-page) .cs-tablist[hidden]{display:none}
body:has(main.cs-page) .cs-tablist button{padding:14px 8px;border-bottom:1px solid var(--cs-line);margin-bottom:0;text-align:center}
body:has(main.cs-page) .cs-tablist button[aria-selected="true"]{border-bottom:2px solid var(--focus)}}
/* /CS-v1 r3 */
/* OEM/ODM v2 (local preview): custom-water-bottles.html only, scoped to .cs2-page. Reuses v1 .cs-* tokens, .button, .text-link, .hub-faq-list. */
.cs2-page{--cs2-gap:56px}
.cs2-page [id]{scroll-margin-top:16px}
.cs2-page .cs2-hero{padding-block:24px 56px;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.cs2-hero .cs-hero-img img{aspect-ratio:1;max-height:520px;margin-inline:auto}
.cs2-routes{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cs2-routes a{display:flex;flex-direction:column;height:100%;padding:20px 22px;border:1px solid var(--cs-line);border-top:2px solid var(--ink);transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.cs2-route-tag{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--focus)}
.cs2-route-name{margin-top:6px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.cs2-route-text{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted);flex:1}
.cs2-route-go{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;font-weight:500}
.cs2-down{width:16px;height:16px;transform:rotate(90deg)}
@media(hover:hover) and (pointer:fine){.cs2-routes a:hover{background:#f7f8f7;border-color:#c9cfcb}.cs2-routes a:hover .cs2-route-go{color:var(--focus)}}
.cs2-sec{padding-block:var(--cs2-gap)}
.cs2-sec:not(.cs-band){border-top:1px solid var(--cs-line)}
.cs2-tag{font-size:14px;font-weight:600;color:var(--focus)}
.cs2-page .cs2-sec h2{margin-top:8px;font-size:clamp(30px,2.8vw,44px);line-height:1.08}
.cs2-h3{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.cs2-page h4{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.cs2-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.cs2-intro-oem{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cs2-intro-img{margin:0}
.cs2-intro-img img{width:100%;display:block;background:#fff}
.cs2-intro-copy>p:not(.cs2-tag):not(.cs2-small):not(.cs2-cta){margin-top:16px;font-size:17px;line-height:1.65;color:#414945;max-width:60ch}
.cs2-intro-copy a:not(.button),.cs2-small a,.cs2-faq details a{text-decoration:underline;text-underline-offset:3px}
.cs2-keyfacts,.cs2-scope{margin:24px 0 0}
.cs2-keyfacts>div,.cs2-scope>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding-block:12px;border-top:1px solid var(--cs-line)}
.cs2-keyfacts>div:last-child,.cs2-scope>div:last-child{border-bottom:1px solid var(--cs-line)}
.cs2-keyfacts dt{font-size:15px;color:var(--muted)}
.cs2-keyfacts dd{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.cs2-scope>div{grid-template-columns:200px minmax(0,1fr)}
.cs2-scope dt{font-size:15px;font-weight:600}
.cs2-scope dd{margin:0;font-size:15px;line-height:1.55;color:#414945}
.cs2-small{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted);max-width:90ch}
.cs2-cta{margin-top:24px}
.cs2-page figcaption{font-size:13px;color:var(--muted);padding-top:8px;background:transparent}
.cs2-options{margin-top:var(--cs2-gap)}
.cs2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;margin-top:24px}
.cs2-opt{display:flex;flex-direction:column;padding-top:20px;border-top:1px solid var(--ink)}
.cs2-opt figure{margin:0 0 16px}
.cs2-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--product-ground)}
.cs2-opt p{margin-top:8px;font-size:16px;line-height:1.6;color:#414945}
.cs2-opt .cs2-provide{font-size:14px;color:var(--muted)}
.cs2-opt .cs2-provide b{font-weight:600;color:var(--ink)}
.cs2-set{margin-top:var(--cs2-gap);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;align-items:start;padding-top:24px;border-top:1px solid var(--cs-line)}
.cs2-set-head p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.cs2-set-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs2-set-list figure{margin:0}
.cs2-set-list img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--product-ground)}
.cs2-set-list figcaption{font-size:14px;color:var(--ink)}
.cs2-terms{margin-top:var(--cs2-gap);padding-top:24px;border-top:1px solid var(--cs-line)}
.cs2-flow{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;counter-reset:fl;font-size:15px}
.cs2-flow li{counter-increment:fl;display:flex;align-items:center}
.cs2-flow li::before{content:counter(fl);display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border:1px solid var(--ink);font-size:12px;font-weight:600}
.cs2-flow li:not(:last-child)::after{content:"";width:28px;height:1px;background:#a9b0ac;margin-inline:12px}
.cs2-termrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;border-top:2px solid var(--ink)}
.cs2-termrow>div{padding:14px 16px 14px 0}
.cs2-termrow>div+div{padding-left:16px;border-left:1px solid var(--cs-line)}
.cs2-termrow dt{font-size:14px;color:var(--muted)}
.cs2-termrow dd{margin:4px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.cs2-faq{margin-top:var(--cs2-gap);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;padding-top:24px;border-top:1px solid var(--cs-line)}
.cs2-faq .hub-faq-list{max-width:none;margin:0}
.cs2-start{margin-top:var(--cs2-gap)}
.cs2-start-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cs2-start-list li{padding-top:16px;border-top:1px solid var(--ink)}
.cs2-start-list p{margin-top:8px;font-size:15px;line-height:1.6;color:#414945}
.cs2-dev{margin-top:var(--cs2-gap)}
.cs2-steps{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.cs2-steps>li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding-block:18px;border-bottom:1px solid var(--cs-line)}
.cs2-steps>li.cs2-step-media{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr)}
.cs2-steps h4{font-size:18px;display:flex;gap:12px}
.cs2-steps h4 span{font-size:14px;font-weight:600;color:var(--focus);padding-top:2px}
.cs2-steps dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs2-step-media dl{grid-template-columns:1fr;gap:6px}
.cs2-step-media dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px}
.cs2-steps dt{font-size:13px;color:var(--muted)}
.cs2-steps dd{margin:2px 0 0;font-size:15px;line-height:1.5}
.cs2-step-media dd{margin:0}
.cs2-steps figure{margin:0}
.cs2-steps figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cs2-end{background:var(--surface);padding-block:var(--cs2-gap)}
.cs2-end .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.cs2-end-copy p{margin-top:12px;font-size:16px;line-height:1.6;color:#414945;max-width:52ch}
.cs2-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@media(max-width:1100px){.cs2-page{--cs2-gap:48px}.cs2-steps>li,.cs2-steps>li.cs2-step-media{grid-template-columns:1fr;gap:12px}.cs2-step-media figure{max-width:480px}
.cs2-set,.cs2-faq{grid-template-columns:1fr;gap:20px}.cs2-termrow{grid-template-columns:repeat(2,minmax(0,1fr))}.cs2-termrow>div:nth-child(3){padding-left:0;border-left:0}.cs2-termrow>div:nth-child(n+3){border-top:1px solid var(--cs-line)}}
@media(max-width:850px){.cs2-page .cs2-hero,.cs2-intro,.cs2-intro-oem,.cs2-end .wrap{grid-template-columns:1fr;gap:28px}.cs2-intro-oem .cs2-intro-img{order:-1}
.cs2-hero .cs-hero-img{order:2;max-width:420px}.cs2-start-list{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){.cs2-page{--cs2-gap:40px}.cs2-routes{grid-template-columns:1fr;gap:12px;margin-top:24px}.cs2-routes a{padding:16px 18px}.cs2-route-name{font-size:20px}
.cs2-grid{grid-template-columns:1fr;gap:32px}.cs2-set-list{gap:8px}.cs2-set-list figcaption{font-size:12px}
.cs2-steps dl{grid-template-columns:1fr;gap:8px}.cs2-steps dl>div,.cs2-step-media dl>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px}
.cs2-scope>div{grid-template-columns:1fr;gap:2px}.cs2-keyfacts>div{grid-template-columns:1fr;gap:2px}
.cs2-flow{flex-direction:column;align-items:flex-start;gap:8px}.cs2-flow li:not(:last-child)::after{display:none}
.cs2-cta .button,.cs2-end-actions .button{width:100%}.cs2-h3{font-size:23px}}
/* /OEM/ODM v2 */
/* v2 visual fixes (browser review 1): h4 has no global reset; align tops; one rule above FAQs; caption outside gray mount. */
.cs2-page h4{margin:0}
.cs2-page .cs-hero-img{background:transparent}
.cs2-page .cs-hero-img img{background:var(--product-ground)}
.cs2-intro{align-items:start}
.cs2-intro-img{margin-top:6px}
.cs2-faq{border-top:0;padding-top:0}
.cs2-faq .cs2-faq-side{padding-top:16px}
.cs2-steps>li{align-items:start}
.cs2-steps h4{padding-top:16px}
.cs2-steps dl{align-content:start}
.cs2-step-media dl{gap:10px}
.cs2-page .cs2-end h2{font-size:clamp(30px,2.8vw,44px);line-height:1.08}
.cs2-start-list li{display:flex;flex-direction:column;gap:8px}
.cs2-start-list p{margin-top:0}
@media(max-width:1100px){.cs2-steps h4{padding-top:0}}
/* /v2 visual fixes */
/* v2 visual fixes 2: no mix-blend (project rule, check.mjs); white-background product images sit on white mounts. */
.cs2-opt figure,.cs2-set-list li:not(:last-child) img,.cs2-opt img.cs2-blend,.cs2-intro-img.cs2-mount img,.cs2-set-list img.cs2-blend{background:#fff}
.cs2-opt img.cs2-blend,.cs2-set-list img.cs2-blend,.cs2-intro-img.cs2-mount img{outline:1px solid var(--cs-line);outline-offset:-1px}
.cs2-page .cs-hero-img img{background:#fff}
/* /v2 visual fixes 2 */
/* v2 visual fixes 3: ODM flow as one even 5-column row (no orphan wrap); stacks on narrow screens. */
.cs2-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;font-size:15px}
.cs2-flow li{align-items:flex-start;padding-top:10px;border-top:1px solid #a9b0ac;line-height:1.4}
.cs2-flow li::before{flex-shrink:0}
.cs2-flow li:not(:last-child)::after{display:none}
@media(max-width:850px){.cs2-flow{grid-template-columns:1fr;gap:0}.cs2-flow li{padding-block:10px;border-top:0;border-bottom:1px solid var(--cs-line)}}
/* /v2 visual fixes 3 */
/* v2 visual fixes 4: step 03 keeps the same 3-column You send / We do / Result layout; tooling photo sits beneath, beside the step. */
.cs2-steps>li.cs2-step-media{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.cs2-step-media dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs2-step-media dl>div{display:block}
.cs2-step-media dd{margin:2px 0 0}
.cs2-step-media figure{grid-column:2;max-width:400px}
@media(max-width:1100px){.cs2-step-media figure{grid-column:auto}}
@media(max-width:600px){.cs2-step-media dl{grid-template-columns:1fr;gap:8px}.cs2-step-media dl>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px}.cs2-step-media dd{margin:0}}
/* /v2 visual fixes 4 */
/* v2 fix 5: header is not sticky, so the site-wide 94px scroll padding only leaves a gap above #oem/#odm; this page lands sections 16px from the top. */
html:has(main.cs2-page){scroll-padding-top:0}
/* /v2 fix 5 */





/* OEM/ODM v3 (local preview): separate /oem-water-bottles and /odm-water-bottles pages (main.cs2-route-page) + short overview (main.cs2-overview).
   Same v2 section markup; the route section is the first screen: compact top, H1 in the v2 section-title style scaled up. */
.cs2-route-page .cs2-sec.cs2-first{border-top:0;padding-top:16px}
.cs2-route-page .cs2-first h1{margin-top:8px;font-size:clamp(34px,3.4vw,52px);line-height:1.06;letter-spacing:-.035em}
.cs2-route-page .cs2-first .cs2-intro-copy>p:not(.cs2-tag):not(.cs2-small):not(.cs2-cta){margin-top:18px}
.cs2-xlink a{text-decoration:underline;text-underline-offset:3px}
.cs2-end-actions .cs2-xlink{flex-basis:100%;margin:0;font-size:15px;color:var(--muted)}
.cs2-overview .cs2-hero{padding-bottom:var(--cs2-gap)}
/* Phones/tablets: H1 and copy first, route image after it (v2 put the OEM image first). */
@media(max-width:850px){.cs2-route-page .cs2-first .cs2-intro-img{order:2}}
@media(max-width:600px){.cs2-route-page .cs2-sec.cs2-first{padding-top:8px}.cs2-route-page .cs2-first h1{font-size:clamp(30px,8.4vw,38px)}}
/* /OEM/ODM v3 */

/* INQ-connect-20261029: appended to style.css only when INQUIRY_MODE is local or live (scripts/build.mjs). */
.button:disabled{opacity:.62;cursor:progress}
.button:disabled:active{transform:none}
.iq-status[data-kind="pending"]{color:var(--muted)}
.iq-status[data-kind="ok"]{color:var(--ink)}
.iq-status:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.iq-status-actions{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:8px}
.iq-status-actions .text-link{min-height:44px;padding:0;background:none;border:0;font:inherit;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.project .iq-status,.p031-inquiry .iq-status{background:#fff;margin-top:24px}
.iq-local-notice{border:1px dashed var(--muted)}
#project-form .iq-intent{margin-top:0}
[aria-invalid="true"]{outline:2px solid #9b2c1f;outline-offset:1px}