/* Theme Name: ZeroY Starter */
:root{font-family:var(--font-body);color:#000000;background:var(--color-background)}body{margin:0}main{max-width:1100px;margin:auto;padding:var(--space-section)}h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;letter-spacing:-.03em}.hero h1{font-size:clamp(3rem,8vw,7rem);line-height:1.02;letter-spacing:-.05em}a{color:inherit}p{line-height:1.7;max-width:65ch}.hero{padding-block:90px}button,.button{display:inline-block;padding:15px 24px;background:var(--color-solid);color:#000000;border-radius:var(--radius-control);text-decoration:none}img{max-width:100%;height:auto}:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
/* A list page is read by scanning, so the heading is sized for a page rather than a poster. */
.post-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-section)}.post-list h2{margin:0 0 .4em;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.15;letter-spacing:-.02em}.post-list h2 a{text-decoration:none}.post-list__image{display:block;margin-bottom:1rem}.pagination{display:flex;gap:1rem;margin-top:var(--space-section)}
/* Breadcrumbs are structure, not decoration: quiet text, a separator, no bullets. */
.zeroy-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;padding:0;margin:0 0 1.5rem;font-size:.9rem;opacity:.8}.zeroy-breadcrumbs li+li::before{content:"/";margin-right:.5em;opacity:.5}

/* ---------- Shared bits ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--color-solid);color:#000000;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
.nav-list{list-style:none;margin:0;padding:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;max-width:none;margin:0;padding:0;background:var(--color-background);border-bottom:1px solid var(--color-line);transition:box-shadow .2s ease}
.site-header[data-scrolled="true"]{box-shadow:0 12px 30px rgba(13,60,74,.32)}
/* A logged-in editor sees WordPress's fixed admin bar above the page, so the sticky header starts below it instead of under it. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.skip-link:focus{z-index:100000}
.site-header__inner{max-width:var(--wrap);margin-inline:auto;padding:12px 24px;display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand__img{display:block;width:auto;height:40px;mix-blend-mode:multiply}
.brand__name{font-size:1.35rem;font-weight:650;letter-spacing:-.02em;color:#000000}
.site-nav--desktop{margin-inline-start:auto}
.site-nav--desktop .nav-list{display:flex;align-items:center;gap:26px}
.site-nav--desktop a{color:#000000;text-decoration:none;font-size:.95rem;padding-block:8px;border-bottom:2px solid transparent}
.site-nav--desktop a:hover{border-bottom-color:var(--color-accent)}
.site-nav--desktop a[aria-current="page"]{border-bottom-color:var(--color-accent)}
.site-header__cta{margin:0;padding:12px 22px;background:var(--color-accent);color:#000000;font-size:.95rem;font-weight:600;white-space:nowrap;box-shadow:0 4px 0 rgba(13,60,74,.30)}
.site-header__cta:hover{background:var(--color-accent-deep)}
.site-header__cta-icon{display:inline-flex;align-items:center}
.site-header__cta-short{display:none}
.site-nav--mobile{display:none;margin-inline-start:auto}
.site-nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;color:#000000;border:1px solid var(--color-line);border-radius:14px;cursor:pointer}
.site-nav__bars,.site-nav__bars::before,.site-nav__bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.site-nav__bars{position:relative}
.site-nav__bars::before,.site-nav__bars::after{content:"";position:absolute;left:0}
.site-nav__bars::before{top:-6px}
.site-nav__bars::after{top:6px}
.site-nav__panel .nav-list{display:grid;gap:2px;padding:10px 0 4px}
.site-nav__panel a{display:block;padding:11px 2px;color:#000000;text-decoration:none;border-bottom:1px solid var(--color-line)}
.nav-list__contact{display:inline-block;margin:12px 0 6px;padding:11px 20px;background:var(--color-accent);color:#000000;font-weight:600;text-decoration:none;border-radius:var(--radius-control)}

/* ---------- Footer ---------- */
.site-footer{max-width:none;margin:0;padding:0;background:var(--color-surface);border-top:1px solid var(--color-line);color:#000000}
.site-footer__inner{max-width:var(--wrap);margin-inline:auto;padding:64px 24px 44px;display:grid;grid-template-columns:1.7fr 1fr 1.35fr 1fr;gap:40px}
.site-footer__brand .brand__img{height:44px}
.site-footer__tagline{margin:16px 0 0;max-width:34ch;color:#000000;line-height:1.6;font-size:.95rem}
.site-footer__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#000000;margin:0 0 14px;font-weight:650}
.site-footer__col .nav-list{display:grid;gap:10px}
.site-footer__col a{color:#000000;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.site-footer__col a:hover{border-bottom-color:var(--color-accent)}
.site-footer__col span{color:#000000}
.site-footer__note{margin:16px 0 0;font-size:.85rem;line-height:1.6;color:#000000;max-width:32ch}
.site-footer__base{max-width:var(--wrap);margin-inline:auto;padding:18px 24px 28px;border-top:1px solid var(--color-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#000000}
.site-footer__base p{margin:0;max-width:none}

/* ---------- Narrow screens ---------- */
@media (max-width:1000px){.site-footer__inner{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:900px){
	.site-nav--desktop{display:none}
	.site-nav--mobile{display:block;margin-inline-start:0}
	/* The quote button stays: without it the first screen has no way to ask for a price. */
	.site-header__lang{margin-inline-start:auto}
	.site-header__cta{padding:9px 13px;font-size:.85rem;box-shadow:0 3px 0 rgba(13,60,74,.30)}
	.site-header__cta-icon,.site-header__cta-long{display:none}
	.site-header__cta-short{display:inline}
}
@media (max-width:600px){
	.site-header__inner{padding:10px 18px;gap:12px}
	/* The wordmark is 3.6 times wider than it is tall, so on a phone it is set smaller than on the desktop header to leave room for the quote button. */
	.brand__img{height:32px}
	.site-footer__inner{grid-template-columns:1fr;padding:48px 18px 32px}
	.site-footer__base{padding-inline:18px;flex-direction:column}
}

/* ---------- Home ---------- */
.home{max-width:none;margin:0;padding:0}
.home-hero{--hero-fade:0;--hero-tail:0px;position:relative;z-index:0;isolation:isolate;overflow:visible;opacity:calc(1 - var(--hero-fade));display:grid;grid-template-columns:minmax(0,35rem);gap:26px;align-content:center;min-height:clamp(500px,62vh,660px);padding-block:84px 72px;padding-inline:max(24px,calc((100% - var(--wrap)) / 2))}
.home-hero__bg{position:absolute;top:0;left:0;right:0;height:calc(100% + var(--hero-tail));z-index:-2;display:block;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.74) 82%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.26) 94%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.74) 82%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.26) 94%,transparent 100%)}
.home-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% top}
.home-hero__scrim{position:absolute;inset:0;z-index:-1;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);background:linear-gradient(96deg,rgba(10,26,32),.88) 0%,rgba(10,26,32),.6) 22%,rgba(10,26,32),.3) 42%,rgba(10,26,32),.08) 58%,rgba(10,26,32),0) 66%)}
.home-hero h1{text-shadow:0 1px 14px rgba(10,26,32),.7)}
.home-hero__copy>p{color:#ffffff;font-weight:500;text-shadow:0 1px 1px rgba(10,26,32),.95),0 2px 12px rgba(10,26,32),.85)}
.home-hero h1{font-size:clamp(2.35rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px}
.home-hero p{font-size:1.06rem;line-height:1.7;color:#ffffff;max-width:52ch;margin:0}
.home-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.home-facts__maker{margin:18px 0 0;max-width:62rem;font-size:.78rem;line-height:1.65;letter-spacing:.01em;color:#000000}
.home-hero__side{max-width:30rem;background:rgba(10,26,32,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-card);padding:26px 24px}
.home-hero__sidetitle{font-size:1rem;margin:0 0 14px;letter-spacing:-.01em;color:#ffffff}
.home-hero__list{margin:0;padding-left:20px;display:grid;gap:9px;font-size:.95rem;line-height:1.5}
.home-hero__sidefoot{margin:16px 0 0;font-size:.82rem;color:#ffffff}
/* The three things are a self-check, not a paragraph: a buyer ticks off what they already have while
 * reading, and when the last box is filled the card stops asking and says the mail is ready. Pure
 * CSS — :has() counts "one checked and nothing unchecked" for the third-brick state, so no script
 * has to track it, and nothing depends on JavaScript being on.
 */
.home-hero__item{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.home-hero__item .home-hero__icon,.home-hero__item .ico{flex:0 0 auto}
.home-hero__text{flex:1 1 auto}
.home-hero__check{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid rgba(255,255,255,.5);border-radius:6px;background:transparent;position:relative;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.home-hero__check:hover{border-color:#ffffff}
.home-hero__check:checked{background:var(--color-brand);border-color:var(--color-brand)}
.home-hero__check:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid #12201f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.home-hero__check:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.home-hero__ready{display:none;margin:16px 0 0;font-size:.86rem;line-height:1.5;color:var(--color-brand)}
.home-hero__side:has(.home-hero__check:checked):not(:has(.home-hero__check:not(:checked))) .home-hero__sidefoot{display:none}
.home-hero__side:has(.home-hero__check:checked):not(:has(.home-hero__check:not(:checked))) .home-hero__ready{display:block}
@media screen and (max-width:782px){
	.home-hero__bg img{object-position:84% center}
	.home-hero__scrim{background:linear-gradient(180deg,rgba(10,26,32),.9) 0%,rgba(10,26,32),.78) 46%,rgba(10,26,32),.46) 100%)}
	.home-hero__side{max-width:none}
}
.home-section{position:relative;z-index:1;padding-block:64px;padding-inline:max(24px,calc((100% - var(--wrap)) / 2))}
.home-facts{position:relative;z-index:1}
.home-section--tint{background:var(--color-surface)}
.home-section--ink{background:var(--color-solid);color:#000000}
.section-head{max-width:64ch;margin-bottom:34px}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:#000000;font-weight:650;margin:0 0 10px}
.eyebrow--light{color:#000000}
.section-head h2,.home-contact h2,.evidence h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 12px}
.lead{color:#000000;line-height:1.7;margin:0}
.button--ghost{background:transparent;color:#000000;border:1px solid rgba(255,255,255,.42)}
.button--ghost:hover{background:var(--color-mint);border-color:var(--color-accent)}
.series-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px}
.series-card{background:var(--color-background);border:1px solid var(--series-line,var(--color-line));border-radius:var(--radius-card);padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:border-color .18s ease,box-shadow .18s ease}
.series-card h3{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.series-card h3 a{color:#000000;text-decoration:none}
.series-card h3 a:hover{color:#000000;text-decoration:underline}
.series-card__items{margin:0;color:#000000;font-size:.92rem;line-height:1.6}
.series-card__who{margin:auto 0 0;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--series-ink,#000000)}
.series-card__note{margin:0;align-self:flex-start;font-size:.8rem;background:var(--color-accent-soft);color:#000000;border-radius:var(--radius-control);padding:5px 12px}
/* the same drawing as the panel, but on a plate: the card and the category head read before they are read */
.series-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--series-soft,var(--color-brand));color:var(--series-ink,#0a1a20);transition:transform .18s ease}
.series-mark svg{display:block;width:26px;height:26px}
.series-mark--head{width:54px;height:54px;border-radius:16px;margin:0 0 18px}
.series-mark--head svg{width:30px;height:30px}
/* A line with a drawing of its own shows the drawing instead of the line icon: the plate grows to fit
 * it and keeps the line's hue as its ground, so a picture with a transparent or near-matching edge
 * sits on the card without a seam. The category page prints the same drawing in its banner. */
.series-mark--art{width:84px;height:84px;border-radius:20px;padding:0;overflow:hidden}
.series-mark--art.series-mark--head{width:96px;height:96px;border-radius:22px}
.series-mark__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* The line's colour, read once per card: the tile above, the model count and the browse pill all take
 * the two values the card carries, so one hue ties a card together and seven cards read as seven
 * kinds of tool before a word is read. The pill is the only place the hue goes solid, on hover. */
.series-card:hover{border-color:var(--series-line,var(--color-line));box-shadow:var(--shadow-soft)}
.series-card:hover .series-mark{transform:translateY(-2px)}
.series-card .linkband__link{background:var(--series-soft,var(--color-background));border-color:var(--series-line,var(--color-line));color:var(--series-ink,#000000);font-weight:600}
.series-card .linkband__link:hover{background:var(--series-ink,#000000);border-color:var(--series-ink,#000000);color:#ffffff}
.section-note{margin:22px 0 0;max-width:72ch;font-size:.86rem;line-height:1.6;color:#000000}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:26px 22px}
.step__num,.flow__num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--color-mint);color:#000000;font-weight:650;font-size:.88rem;margin-bottom:14px}
.step h3,.flow__item h3,.guide h3{margin:0 0 8px;font-size:1.02rem;letter-spacing:-.01em}
.step p,.flow__item p{margin:0;color:#000000;font-size:.92rem;line-height:1.6}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.flow__item{border-top:2px solid var(--color-line);padding-top:20px}
.flow__num{background:transparent;border:1px solid var(--color-line);color:#000000}
.evidence{display:grid;grid-template-columns:1.4fr 1fr;gap:52px;align-items:start}
.evidence h2{color:#000000}
.evidence p{color:#000000;line-height:1.75;margin:0 0 14px;max-width:56ch}
.evidence__list{list-style:none;margin:0;padding:0;display:grid}
.evidence__list li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.94rem}
.evidence__list li::before{content:"→";color:#000000;margin-right:10px}
.guide-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide{background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.guide h3 a{color:#000000;text-decoration:none}
.guide h3 a:hover{color:#000000}
.guide p{margin:0;color:#000000;font-size:.9rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.guide time{margin-top:auto;font-size:.78rem;color:#000000;letter-spacing:.04em}
.home-contact{display:grid;grid-template-columns:1.3fr 1fr;gap:52px;align-items:start}
.home-contact p{color:#000000;line-height:1.7;margin:0 0 22px;max-width:54ch}
.home-contact__facts{list-style:none;margin:0;padding:28px 26px;background:var(--color-mint);border-radius:var(--radius-card);display:grid;gap:18px}
.home-contact__facts li{font-size:.95rem;line-height:1.5}
.home-contact__facts span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#000000;margin-bottom:4px}
.home-contact__facts a{color:#000000}
@media (max-width:980px){
	.home-hero{grid-template-columns:1fr;gap:34px;padding-block:52px}
	.steps,.flow,.guide-grid{grid-template-columns:1fr 1fr}
	.evidence,.home-contact{grid-template-columns:1fr;gap:32px}
}
@media (max-width:600px){
	.steps,.flow,.guide-grid{grid-template-columns:1fr}
	.home-section{padding-block:44px}
}

/* ---------- Catalogue and product pages ---------- */
.page-main{max-width:1180px;margin:0 auto;padding:48px 24px 72px}
.page-main--narrow{max-width:620px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:#000000;margin-bottom:22px}
.crumbs a{color:#000000;text-decoration:none}
.crumbs a:hover{color:#000000}
.page-head{max-width:70ch;margin-bottom:26px}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.03em;margin:0 0 14px;line-height:1.1}
.page-head__intro{color:#000000;line-height:1.7;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.chip{display:inline-block;padding:8px 15px;border-radius:var(--radius-control);border:1px solid var(--series-line,var(--color-line));background:var(--series-soft,var(--color-background));font-size:.85rem;color:var(--series-ink,#000000);text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.chip:hover{border-color:var(--color-accent);color:#000000}
.chip.is-current{background:var(--color-accent);border-color:var(--color-accent);color:#000000}
.product-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.product-card{display:flex;flex-direction:column;background:var(--color-background);border:1px solid #000000;border-radius:var(--radius-card);overflow:hidden}
/* One frame for every product photograph: square, the picture contained inside it, never cropped and
 * never sized by the file's own proportions, so a row of cards reads as one catalogue and a tall pack
 * shot is not shown smaller than a wide one. */
.product-card__media{position:relative;display:grid;place-items:center;aspect-ratio:1 / 1;background:#ffffff;text-decoration:none;overflow:hidden}
.product-card__img{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;object-fit:contain;object-position:center center;padding:14px;display:block}
.product-card__empty{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#000000;text-align:center;padding:0 18px;line-height:1.6}
.product-card__body{display:flex;flex-direction:column;gap:7px;padding:20px}
.product-card__cat{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#000000}
.product-card__name{margin:0;font-size:1.05rem;line-height:1.3}
.product-card__name a{color:#000000;text-decoration:none}
.product-card__name a:hover{color:#000000}
.product-card__model{margin:0;font-size:.85rem;color:#000000;font-variant-numeric:tabular-nums}
.product-card__cta{margin-top:10px;font-size:.9rem;font-weight:600;color:#000000;text-decoration:none}
.product-card__cta::after{content:" →"}
.product-card__cta:hover{color:#000000}
.empty-state{color:#000000;max-width:60ch;line-height:1.7}
.pager{display:flex;gap:8px;margin-top:32px;font-size:.9rem}
.pager .page-numbers{padding:7px 12px;border:1px solid var(--color-line);border-radius:var(--radius-control);text-decoration:none;color:#000000}
.pager .current{background:var(--color-mint);border-color:var(--color-accent)}
.product{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;margin-bottom:48px}
.product__media{min-width:0}
/* Only the specification sits under the picture: two columns of label and value read fine in a
   narrow column. The size and colour table has six columns and needs the full page width — inside
   this column it is cut off, so it stays below. */
.product__left{display:grid;gap:34px;align-content:start;min-width:0}
.product__left .product__specs{margin:0;max-width:none}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery__img{box-sizing:border-box;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:contain;object-position:center center;padding:14px;border-radius:var(--radius-card);border:1px solid var(--color-line);background:#ffffff}
.gallery--empty{display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;border:1px dashed var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);color:#000000;font-size:.85rem;text-align:center;padding:24px}
.gallery--empty span{max-width:26ch;line-height:1.6}
/* One frame and a row of dots: the buyer can see that there is more without a wall of stacked
 * photographs pushing the specification off the screen. */
.pmedia{margin:0}
.pmedia__frame{position:relative}
.pmedia__slide{margin:0}
.pmedia__nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--color-line);border-radius:999px;background:var(--color-background);color:#1d1915;cursor:pointer;opacity:.92;transition:opacity .15s ease}
.pmedia__nav:hover{opacity:1}
.pmedia__nav--prev{left:10px}
.pmedia__nav--next{right:10px}
.pmedia__nav svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pmedia__nav:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.pmedia__img{box-sizing:border-box;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:contain;object-position:center center;padding:18px;display:block;border-radius:var(--radius-card);border:1px solid var(--color-line);background:#ffffff}
.pmedia__dots{display:flex;justify-content:center;gap:4px;margin-top:12px}
.pmedia__dot{width:26px;height:26px;padding:0;border:0;background:transparent;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.pmedia__dot::after{content:"";width:8px;height:8px;border-radius:999px;background:rgba(29,25,21,.24);transition:background .15s ease,transform .15s ease}
.pmedia__dot:hover::after{background:rgba(29,25,21,.5)}
.pmedia__dot[aria-current="true"]::after{background:#1d1915;transform:scale(1.18)}
.pmedia__dot:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.pmedia__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Hover zoom: the lens marks the spot under the cursor and the panel shows that spot magnified
   beside the photograph. Both are made by assets/js/product-zoom.js, and only where a pointer can
   hover; a touch screen keeps the plain picture. */
.zoom-stage{position:relative;cursor:zoom-in}
.zoom-stage.is-zooming{cursor:crosshair}
.zoom-lens{position:absolute;left:0;top:0;width:1px;height:1px;border:1px solid rgba(255,255,255,.92);outline:1px solid rgba(13,60,74,.34);background:rgba(13,60,74,.18);border-radius:4px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:3;will-change:transform}
.zoom-pane{position:absolute;top:50%;left:calc(100% + 14px);width:min(360px,34vw);aspect-ratio:1 / 1;translate:0 -50%;border:1px solid var(--color-line);border-radius:var(--radius-card);background-color:#ffffff;background-repeat:no-repeat;box-shadow:0 26px 60px rgba(13,60,74,.2);opacity:0;visibility:hidden;transition:opacity .14s ease;pointer-events:none;z-index:40}
.zoom-pane--flip{left:auto;right:calc(100% + 14px)}
.zoom-stage.is-zooming .zoom-lens,.zoom-stage.is-zooming .zoom-pane{opacity:1;visibility:visible}
@media (max-width:899px){
	.zoom-lens,.zoom-pane{display:none}
}
@media (hover:none),(pointer:coarse){
	.zoom-lens,.zoom-pane{display:none}
}
.gallery > *:only-child{grid-column:1 / -1}
.product__info h1{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.03em;margin:0 0 14px}
.product__summary{color:#000000;line-height:1.7;margin:0 0 22px}
.product__facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 24px;padding:18px 20px;background:var(--color-surface);border-radius:var(--radius-card);font-size:.92rem}
.product__facts dt{color:#000000;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;align-self:center}
.product__facts dd{margin:0;color:#000000}
.product__note{margin:14px 0 0;font-size:.82rem;color:#000000;line-height:1.6;max-width:38ch}
/* The enquiry form runs the full page width under both columns. Inside the information column it
   made that column twice the height of the pictures and the space under the pictures stayed empty;
   full width it also reads as two columns again instead of one field per row. */
.product__quote{margin:0 0 48px}
.product__quote .quote-form{margin:0}
.product__body,.product__specs,.product__custom,.product__related{margin:0 0 44px;max-width:920px}
.product__specs h2,.product__custom h2,.product__related h2,.product__body h2{font-size:1.25rem;letter-spacing:-.015em;margin:0 0 16px}
.product__body p{line-height:1.75;color:#000000}
.spec-table{width:100%;border-collapse:collapse;font-size:.94rem}
.spec-table tr{border-bottom:1px solid var(--color-line)}
.spec-table th{text-align:left;font-weight:500;color:#000000;padding:12px 16px 12px 0;width:38%;vertical-align:top}
.spec-table td{padding:12px 0;color:#000000}
.product__variants{margin:0 0 44px;max-width:920px}
.product__variants h2{font-size:1.25rem;letter-spacing:-.015em;margin:0 0 16px}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table--variants{min-width:660px}
.spec-table--variants thead th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:#000000;padding:0 20px 10px 0;width:auto;white-space:nowrap;border-bottom:1px solid var(--color-line)}
.spec-table--variants tbody th{width:auto;white-space:nowrap;padding-right:20px}
.spec-table--variants td{padding:12px 20px 12px 0;vertical-align:top}
.spec-table--variants th:last-child,.spec-table--variants td:last-child{padding-right:0}
.spec-table--variants tbody tr:nth-child(even){background:var(--color-solid)}
.spec-table--variants tbody tr:nth-child(even) th,.spec-table--variants tbody tr:nth-child(even) td{padding-left:12px}
/* choosing a version beside the photographs: the buttons the picker script listens to */
.variant-pick{margin:0 0 24px;padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.variant-pick__group+.variant-pick__group{margin-top:16px}
.variant-pick__label{margin:0 0 9px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink)}
.variant-pick__buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:8px}
.variant-btn{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:9px 14px;font:inherit;font-size:.88rem;line-height:1.3;text-align:left;white-space:normal;overflow-wrap:break-word;color:var(--color-ink);background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-control);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.variant-btn__text{flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:none}
.variant-btn:hover{border-color:var(--color-ink)}
.variant-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
/* the chosen version is filled, not merely tinted, and carries a tick so it reads at a glance */
.variant-btn[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:#ffffff;font-weight:650}
.variant-btn[aria-pressed="true"]::after{content:"✓";flex:0 0 auto;font-size:.92em;line-height:1}
.variant-btn__swatch{flex:0 0 auto;width:16px;height:16px;border-radius:999px;border:1px solid rgba(0,0,0,.28);box-sizing:border-box}
.variant-btn[aria-pressed="true"] .variant-btn__swatch{border-color:rgba(255,255,255,.6)}
.variant-pick__hint{margin:14px 0 0;font-size:.8rem;line-height:1.55;max-width:44ch;color:var(--color-ink)}
/* one version only: said in a line, with what that version is, instead of a choice of one */
.variant-single{margin:0 0 22px;padding:14px 16px;background:var(--color-brand-soft);border-radius:var(--radius-card);font-size:.9rem;line-height:1.55;color:var(--color-ink)}
.product__unbranded{margin:0 0 22px;padding:14px 16px;background:var(--color-brand-soft);border-radius:var(--radius-card);font-size:.9rem;line-height:1.55;color:var(--color-ink)}
.custom-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.custom-list li{background:var(--color-mint);border-radius:var(--radius-control);padding:11px 15px;font-size:.9rem}
.product__sheet{margin:0 0 44px}
@media (max-width:900px){
	.product{grid-template-columns:1fr;gap:28px}
	.gallery{grid-template-columns:1fr}
	.page-main{padding:34px 20px 56px}
	/* One column: the wrapper stops being a box, so the buying column sits between the photographs
	   and the specification again instead of being pushed under it. */
	.product__left{display:contents}
	.product__media{order:1}
	.product__info{order:2}
	.product__specs{order:3}
	.product__left .product__specs{margin:0}
}
@media (max-width:560px){
	.variant-pick{padding:16px}
	.variant-pick__buttons{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
	.variant-btn{font-size:.85rem;padding:9px 12px}
}

/* ---------- Floating WhatsApp ---------- */
.wa-button{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;display:inline-flex;align-items:center;gap:9px;padding:12px 17px 12px 15px;border-radius:999px;background:#178045;color:#ffffff;text-decoration:none;font-size:.88rem;font-weight:650;letter-spacing:.01em;box-shadow:0 8px 22px rgba(29,87,64,.28);transition:background .15s ease,transform .15s ease}
.wa-button:hover{background:#136b3a;transform:translateY(-1px)}
.wa-button:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.wa-button__icon{width:22px;height:22px;flex:none}
@media (max-width:640px){
	.wa-button{padding:13px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
	.wa-button__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
	.wa-button{transition:none}
	.wa-button:hover{transform:none}
}

/* ---------- Header submenu ---------- */
.nav-item--has-children{position:relative}
.nav-list--sub{position:absolute;top:calc(100% + 10px);left:-14px;z-index:70;display:none;min-width:238px;padding:10px;background:var(--color-background);border:1px solid var(--color-line);border-radius:14px;box-shadow:0 18px 40px rgba(13,60,74,.26)}
.nav-list--sub li{margin:0}
.nav-list--sub a{display:block;padding:9px 12px;border-bottom:0;border-radius:10px;font-size:.92rem;white-space:nowrap}
.nav-list--sub a:hover{background:var(--color-mint);border-bottom-color:transparent}
.site-nav--desktop .nav-list--sub{display:none}
.site-nav--desktop .nav-item--has-children:hover>.nav-list--sub,
.site-nav--desktop .nav-item--has-children:focus-within>.nav-list--sub{display:grid}
/* The header panel's card never leaks into a footer column: a nested list there stays in the column. */
.site-footer__col .nav-list--sub{position:static;display:grid;gap:10px;min-width:0;padding:0 0 0 12px;background:transparent;border:0;box-shadow:none}

/* ---------- Facts strip ---------- */
.home-facts{padding-inline:max(24px,calc((100% - var(--wrap)) / 2));padding-bottom:4px}
.home-facts__panel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 44px;color:#000000}
.home-facts__eyebrow{margin:0;flex:0 0 auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#000000}
.fact-strip{list-style:none;margin:0;padding:0;flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 34px}
.fact{display:grid;gap:9px}

.home-facts .fact__value{font-size:clamp(1.9rem,4.2vw,2.75rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:#000000;font-variant-numeric:tabular-nums}
.home-facts .fact__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#000000}
.fact--link{align-content:center}
.fact__link{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:#000000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.28);padding-bottom:3px;white-space:nowrap}
.fact__link:hover{border-bottom-color:#000000}

/* ---------- A text column beside photographs ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.split--text-only{grid-template-columns:1fr}
.split--text-only .split__text{max-width:74ch}
.split__text h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 14px}
.split__text .lead{margin:0 0 22px}
.photo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.photo-grid__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--color-line)}
.photo-grid--wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.media-slot{display:grid;gap:10px;align-content:center;min-height:260px;padding:32px;border:1px dashed var(--color-line);border-radius:var(--radius-card);background:var(--color-surface)}
.media-slot--wide{min-height:200px;width:100%}
.media-slot__title{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:#000000;font-weight:650}
.media-slot__note{font-size:.9rem;line-height:1.65;color:#000000;max-width:48ch}

/* ---------- Certificates and client logos ---------- */
.cert-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.cert{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-control);padding:12px 16px;font-size:.92rem}
.cert__meta{font-size:.76rem;color:#000000;text-transform:uppercase;letter-spacing:.1em}
.cert__body{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
.cert__thumb{flex:0 0 84px;width:84px;height:84px;display:grid;place-items:center;border-radius:12px;background:#f7f3ea;overflow:hidden}
.cert__thumb-img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}
/* A certificate or report is shown as the document itself: the scan sits on a paper-toned mount with a
 * caption underneath, the way a framed sheet is shown in a catalogue, and it opens at full size. */
.doc-grid{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* With only one or two documents a multi-column grid would leave half the row empty, so each sheet
 * takes the full width and the small print stays readable. */
.doc-grid:has(> .doc:only-child),.doc-grid:has(> .doc:nth-child(2):last-child){grid-template-columns:1fr}
.doc{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.doc__frame{display:block;padding:14px;background:#f7f3ea;border:1px solid #e8e0d2;border-radius:var(--radius-card);box-shadow:0 12px 32px rgba(61,50,36,.10);text-decoration:none;transition:box-shadow .2s ease}
.doc__frame:hover,.doc__frame:focus-visible{box-shadow:0 18px 42px rgba(61,50,36,.20)}
.doc__img{display:block;width:100%;height:auto;border-radius:4px}
.doc__name{margin:0;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink)}
.doc__meta{margin:0;text-align:center;font-size:.76rem;color:var(--color-muted);letter-spacing:.05em}
/* The workshop is one photograph at a time with an arrow on each side, so it is looked through on the
 * customer's own click. The runtime hides the other slides itself; this rule keeps that hidden state
 * from being overridden by the slide's own display. */
.ws-carousel{position:relative}
.ws-stage{position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface)}
.ws-slide{margin:0;aspect-ratio:16 / 10;border-radius:var(--radius-card);overflow:hidden}
.ws-slide[hidden]{display:none}
.ws-slide__img{display:block;width:100%;height:100%;object-fit:cover}
.ws-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(255,255,255,.92);color:var(--color-ink);cursor:pointer;box-shadow:0 6px 18px rgba(16,32,40,.22);transition:background .15s ease,box-shadow .15s ease}
.ws-nav:hover{background:#fff;box-shadow:0 8px 22px rgba(16,32,40,.30)}
.ws-nav:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.ws-nav--prev{left:16px}
.ws-nav--next{right:16px}
.ws-count{position:absolute;bottom:16px;left:16px;margin:0;padding:5px 13px;border-radius:100px;background:rgba(16,24,30,.70);color:#fff;font-size:.78rem;letter-spacing:.1em}
@media (max-width:600px){
.ws-slide{aspect-ratio:4 / 3}
.ws-nav{width:38px;height:38px}
.ws-nav--prev{left:8px}
.ws-nav--next{right:8px}
.ws-count{bottom:8px;left:8px}
}
/* The factory page is long, so it opens with its sections as entries: a card per section that jumps
 * straight to it, and a bar under the site header that keeps the same entries to hand while reading.
 * A section a link lands on sits clear of the two sticky bars instead of under them. */
.jump-band{margin:30px 0 0}
.jump-band__title{margin:0 0 14px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);font-weight:600}
.jump-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.jump{position:relative;display:grid;align-content:start;gap:6px;height:100%;padding:16px 40px 16px 16px;background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card);color:inherit;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.jump:hover,.jump:focus-visible{border-color:var(--color-accent);box-shadow:var(--shadow-soft);transform:translateY(-1px)}
.jump:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.jump__num{font-size:.72rem;letter-spacing:.14em;color:var(--color-muted)}
.jump__title{font-size:1rem;font-weight:650;line-height:1.35}
.jump__text{font-size:.86rem;line-height:1.55;color:var(--color-muted)}
.jump__go{position:absolute;top:14px;right:15px;color:var(--color-accent);font-size:1.05rem;line-height:1}
.jump-bar{position:sticky;top:68px;z-index:50;margin:20px 0 0;background:rgba(255,255,255,.96);border:1px solid var(--color-line);border-radius:100px;box-shadow:0 8px 22px rgba(16,32,40,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jump-bar__list{list-style:none;margin:0;padding:6px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.jump-bar__list::-webkit-scrollbar{display:none}
.jump-bar a{display:block;padding:8px 14px;border-radius:100px;font-size:.86rem;color:var(--color-muted);text-decoration:none;white-space:nowrap}
.jump-bar a:hover{background:var(--color-surface);color:var(--color-ink)}
.jump-bar a[aria-current="location"]{background:var(--color-ink);color:#fff}
.jump-bar a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
#story,.framework-section[id]{scroll-margin-top:150px}
body.admin-bar .jump-bar{top:100px}
@media (max-width:782px){
body.admin-bar .jump-bar{top:114px}
}
@media (max-width:640px){
.jump-band{margin-top:22px}
/* On a phone the entries stay two to a row and the description line is dropped, so the six of them do
 * not become a screen and a half of cards before the page starts. */
.jump-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jump{padding:12px 28px 12px 12px}
.jump__title{font-size:.9rem}
.jump__text{display:none}
.jump__num{font-size:.68rem}
.jump__go{top:11px;right:11px;font-size:.95rem}
.jump-bar{top:60px;margin-top:16px}
.jump-bar a{padding:7px 12px;font-size:.82rem}
#story,.framework-section[id]{scroll-margin-top:132px}
}
.logo-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.logo-wall__item{display:flex;align-items:center;justify-content:center;min-height:104px;padding:22px;background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.logo-wall__img{width:auto;height:auto;max-width:100%;max-height:52px;object-fit:contain}

/* ---------- Framework pages ---------- */
.page-framework .prose{max-width:72ch}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em;margin:36px 0 12px}
.prose h3{font-size:1.08rem;margin:24px 0 8px}
.prose p,.prose li{line-height:1.75}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose a{color:#000000}
.framework-section{margin:56px 0 0;padding-top:44px;border-top:1px solid var(--color-line)}
.framework-section h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.025em;margin:0 0 22px}

/* ---------- Questions, as an accordion from the behaviour library ---------- */
.faq{display:grid;gap:10px;max-width:84ch}
.faq__item{background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 22px;background:transparent;border:0;border-radius:0;color:#000000;font:inherit;font-weight:600;line-height:1.4;text-align:left;cursor:pointer}
.faq__q::after{content:"+";flex:0 0 auto;font-size:1.25rem;line-height:1;color:#000000}
.faq__item[data-state="open"] .faq__q::after{content:"\2013"}
.faq__q:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px}
.faq__a{padding:0 22px}
.faq__a p{margin:0 0 18px;max-width:70ch;color:#000000;line-height:1.75}
.faq__split{display:grid;gap:20px;align-items:start}
@media (min-width:900px){.faq__split--media{grid-template-columns:minmax(0,1fr) 300px}}
.faq__ask{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#000000;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.faq__ask:hover{text-decoration-thickness:2px}
.faq__ask:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.faq__evidence{margin:0 0 18px;border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden;background:var(--color-background)}
.faq__evidence-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* ---------- Closing call to action ---------- */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;margin:64px 0 0;padding:38px 36px;background:var(--color-mint);border-radius:var(--radius-card)}
.cta-band h2{font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em;margin:0 0 8px}
.cta-band p{margin:0;max-width:56ch;color:#000000;line-height:1.65}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Contact page ---------- */
.contact-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.contact-card{padding:26px 24px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.contact-card__title{font-size:1rem;margin:0 0 16px}
.contact-card__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.contact-card__list span{display:block;margin-bottom:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#000000}
.contact-card__list a,.contact-card__list li{font-size:.95rem;line-height:1.5}
.contact-card__note{margin:20px 0 0;font-size:.82rem;line-height:1.65;color:#000000}

@media (max-width:980px){
	.split,.contact-layout{grid-template-columns:1fr;gap:30px}
	.cta-band{padding:30px 24px}
}
@media (max-width:900px){
	.site-nav__panel .nav-list--sub{position:static;display:grid;min-width:0;padding:0 0 4px 14px;border:0;background:transparent;box-shadow:none}
	.site-nav__panel .nav-list--sub a{padding:8px 2px;font-size:.92rem}
}
@media (max-width:600px){
	.home-facts{padding-inline:18px}
	.home-facts__panel{gap:18px}
	.fact-strip{grid-template-columns:1fr;gap:16px}

	.fact+.fact{padding-top:4px}

	.photo-grid{gap:8px}
	.framework-section{margin-top:40px;padding-top:32px}
	.faq__q{padding:15px 16px}
	.faq__a{padding:0 16px}
	.cta-band{margin-top:44px}
}

/* ---------- Language entry (the owner's globe) ---------- */
.site-header__lang{display:flex;align-items:center;flex:0 0 auto}
.lang{position:relative}
.lang__toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:transparent;border:1px solid var(--color-line);border-radius:var(--radius-control);color:#000000;font-size:.9rem;font-weight:550;line-height:1;cursor:pointer}
.lang__toggle:hover{border-color:var(--color-accent)}
.lang__toggle[aria-expanded="true"]{border-color:var(--color-accent);background:var(--color-surface)}
.lang__glyph{display:block;width:18px;height:18px;object-fit:contain}
.lang__glyph--plain{width:18px;height:18px;border-radius:50%;background:currentColor;opacity:.7}
.lang__panel{position:absolute;z-index:70;top:calc(100% + 8px);right:0;min-width:172px;margin:0;padding:6px;list-style:none;background:var(--color-background);border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-soft)}
.lang__panel[hidden]{display:none}
.lang__panel a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;color:#000000;font-size:.92rem}
.lang__panel a:hover{background:var(--color-surface)}
.lang__panel a[aria-current="true"]{color:#000000;font-weight:650}

/* ---------- Cross-links ---------- */
/* One band, used everywhere a page offers the next step, so the site is walked rather than
   scrolled back up: model -> range -> catalogue -> how it is made -> a person. */
.linkband{margin-top:clamp(34px,4vw,56px);padding-top:22px;border-top:1px solid var(--color-line)}
.linkband__title{margin:0 0 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#000000;font-weight:650}
.linkband__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.linkband__link{display:inline-block;padding:7px 15px;border:1px solid var(--color-line);border-radius:var(--radius-control);text-decoration:none;font-size:.92rem;color:#000000;background:var(--color-background)}
.linkband__link:hover{border-color:var(--color-accent);background:var(--color-surface)}
.chips--models{margin-bottom:0}

/* Five footer columns: the site map reaches the product lines without opening a menu. */
.site-footer__inner{grid-template-columns:1.6fr .85fr 1fr 1.3fr .85fr}
@media (max-width:1000px){.site-footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
	.site-header__lang{margin-inline-start:auto}
	.lang__toggle{padding:7px 10px}
}

/* A link inside a column card sits on the card's own width, not stretched across it. */
.series-card .linkband__link{align-self:flex-start}
/* The category overview and the catalogue grid need air between them. */
.framework-section + .product-grid,.product-grid + .framework-section{margin-top:clamp(28px,4vw,44px)}
/* Chinese text sets a little tighter than English at the same size. */
:lang(zh) h1,:lang(zh) h2{letter-spacing:0}

/* text sitting on the brand face: its own deeper tone keeps every label above AA */
.home-contact__facts,.cta-band,.custom-list li,.button--ghost:hover,.nav-list--sub a:hover,.pager .current{color:#000000}
.step__num,.flow__num{color:#000000}
.eyebrow--light{color:#000000}

/* hero headline: cartoon sticker treatment */
.home-hero h1{
  color:#ffffff;
  opacity:.97;
  -webkit-text-stroke:0;
  font-family:"Comic Sans MS","Chalkboard SE","Segoe UI Rounded","Hiragino Maru Gothic ProN","Varela Round","PingFang SC",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.005em;
  line-height:1.12;
  /* no outline: a soft shadow pool behind the letters makes them sit inside the photograph */
  text-shadow:0 0 16px rgba(9,62,82,.62),0 0 40px rgba(9,62,82,.46),0 18px 44px rgba(9,62,82,.26);
}

/* ---- pairing pass: the pale hero lettering sets the key for the rest of the page ---- */

/* 1 - the hero scrim carries a breath of the brand blue, so the pale headline sits on its own colour */
.home-hero__scrim{background:
  linear-gradient(96deg,rgba(135,206,250,.34) 0%,rgba(135,206,250,.24) 22%,rgba(135,206,250,.12) 40%,rgba(135,206,250,.04) 56%,rgba(135,206,250,0) 66%),
  linear-gradient(96deg,rgba(10,26,32),.88) 0%,rgba(10,26,32),.6) 22%,rgba(10,26,32),.3) 42%,rgba(10,26,32),.08) 58%,rgba(10,26,32),0) 66%)}
@media (max-width:782px){.home-hero__scrim{background:
  linear-gradient(180deg,rgba(135,206,250,.30) 0%,rgba(135,206,250,.22) 46%,rgba(135,206,250,.12) 100%),
  linear-gradient(180deg,rgba(10,26,32),.9) 0%,rgba(10,26,32),.78) 46%,rgba(10,26,32),.46) 100%)}}

/* 2 - the page settles onto a deeper paper once the curtain has gone */
#series{background:var(--color-surface)}

/* 3 - green narrows to the one call to action; every other label and link speaks in the blue family */
.eyebrow,.site-footer__title,.home-hero__sidefoot,.series-card__who,
.fact__label,.product__facts dt,.media-slot__title,.contact-card__list span,.linkband__title,
.product-card__cat,.flow__num,.prose a,.product-card__cta,.faq__q::after{color:#000000}
.home-contact__facts,.home-contact__facts span,.cta-band p{color:#000000}
.series-card__note{background:var(--color-brand-soft);color:#000000}
.prose a,.product-card__cta{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.chip.is-current{background:var(--color-ink-deep);border-color:var(--color-ink-deep);color:#000000}
.site-nav--desktop a:hover,.site-nav--desktop a[aria-current="page"]{border-bottom-color:var(--color-ink)}
.site-footer__col a:hover{border-bottom-color:var(--color-ink)}
.chip:hover,.crumbs a:hover,.series-card h3 a:hover,.guide h3 a:hover,.product-card__name a:hover,.product-card__cta:hover,.lang__panel a[aria-current="true"]{color:#000000}
.linkband__link:hover,.button--ghost:hover,.lang__toggle:hover,.lang__toggle[aria-expanded="true"]{border-color:var(--color-ink)}

/* ---- all-light pass: no filled dark surface anywhere ---- */
.home-section--ink{background:var(--color-surface);color:#000000}
.evidence h2,.evidence p{color:#000000}
.site-header__cta{background:var(--color-brand-soft);color:#000000;border:1px solid var(--color-brand);box-shadow:none}
.site-header__cta:hover{background:var(--color-brand);color:#000000}
.nav-list__contact{background:var(--color-brand-soft);color:#000000;border:1px solid var(--color-brand)}
.button{border:1px solid var(--color-brand)}
.button--ghost{border-color:var(--color-brand)}
.chip.is-current{background:var(--color-brand-soft);border-color:var(--color-brand);color:#000000}
.skip-link{background:var(--color-brand-soft);color:#000000}
.wa-button{background:var(--color-accent-soft);color:#ffffff;border:1px solid #2f8f77;box-shadow:var(--shadow-soft)}
.wa-button:hover{background:#176c88;transform:none;border-color:var(--color-whatsapp)}

/* ---- monochrome pairing: white paper and black type everywhere except the hero panel,
   which stays a dark photograph so the one white headline still has a ground to sit on ---- */
.home-hero{color:#ffffff}
.home-hero__side{color:#ffffff}
.home-hero .button--ghost{color:#ffffff;border-color:rgba(255,255,255,.55)}
.home-hero .button--ghost:hover{background:rgba(255,255,255,.14);border-color:#ffffff}
.wa-button{background:#000;border-color:#000;color:#ffffff;box-shadow:0 10px 26px rgba(16,32,40,.28)}
.wa-button:hover{background:#16232a;border-color:#16232a;transform:translateY(-1px)}
.home-hero__scrim{background:linear-gradient(96deg,rgba(10,26,32,.9) 0%,rgba(10,26,32,.72) 24%,rgba(10,26,32,.4) 44%,rgba(10,26,32,.12) 60%,rgba(10,26,32,0) 70%)}
@media (max-width:782px){.home-hero__scrim{background:linear-gradient(180deg,rgba(10,26,32,.92) 0%,rgba(10,26,32,.8) 46%,rgba(10,26,32,.52) 100%)}}
.home-hero__sidefoot,.home-hero__side p,.home-hero__side li,.home-hero__list{color:#ffffff}

/* ---- reference pass: a lighter scrim, and no edge at all where the hero meets the page ---- */

/* 1 — lighter hand on the scrim: the dispenser, bowls and coiled lead stay visible on the left */
.home-hero__scrim{background:linear-gradient(96deg,rgba(10,26,32,.62) 0%,rgba(10,26,32,.5) 22%,rgba(10,26,32,.32) 42%,rgba(10,26,32,.1) 58%,rgba(10,26,32,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 88%)}
@media (max-width:782px){.home-hero__scrim{background:linear-gradient(180deg,rgba(10,26,32,.72) 0%,rgba(10,26,32,.56) 46%,rgba(10,26,32,.3) 100%)}}

/* 2 — the lettering keeps its own shade where the ground got brighter */
.home-hero h1{text-shadow:0 2px 6px rgba(10,26,32,.48),0 0 18px rgba(10,26,32,.6),0 0 46px rgba(10,26,32,.4)}
.home-hero__copy>p,.home-hero p{text-shadow:0 1px 2px rgba(10,26,32,.9),0 2px 14px rgba(10,26,32,.78)}

/* 3 — the photograph dissolves into the paper: the hero has no bottom edge and no overhang */
.home-hero__bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.2) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.2) 92%,transparent 100%)}

/* the band under the hero starts on the same white as the page: no edge under the photograph */
#series{background:transparent}

/* the quote card keeps its own dark ground, so its lettering stays as crisp as it was */
.home-hero__side{background:rgba(8,22,28,.86)}

/* crisper lettering: no wide haze pooled around the glyphs, no half-opacity text layer */
.home-hero h1{
  opacity:1;
  text-shadow:0 1px 2px rgba(8,20,26,.62),0 2px 9px rgba(8,20,26,.28);
}
.home-hero__copy>p,.home-hero p{
  text-shadow:0 1px 1px rgba(8,20,26,.85),0 1px 5px rgba(8,20,26,.4);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}

/* crisp lettering needs a quieter ground behind it, not a halo: the photo's left third sits one shade deeper */
@media (min-width:783px){
  .home-hero__scrim{
    background:
      linear-gradient(96deg,rgba(10,26,32,.34) 0%,rgba(10,26,32,.24) 26%,rgba(10,26,32,.10) 46%,rgba(10,26,32,0) 64%),
      linear-gradient(96deg,rgba(10,26,32,.62) 0%,rgba(10,26,32,.5) 22%,rgba(10,26,32,.32) 42%,rgba(10,26,32,.1) 58%,rgba(10,26,32,0) 70%);
  }
}
.home-hero h1{
  letter-spacing:0;
  text-shadow:0 1px 1px rgba(8,20,26,.42);
}

/* ---------- Header: the Products panel ----------
 * The lines run down the left of a dark panel, the models of the line under the pointer or the
 * caret in the right half. Everything is in the HTML and revealed by :hover / :focus-within, so it
 * opens before the runtime arrives, needs no script, and Tab walks the same path a pointer does.
 * Geometry is one column of 236px, a 24px gutter and the panel's own 24px padding.
 */
/* The pointer has to be able to walk from the label down into the panel without leaving the item
 * that opened it. The label only covers the middle of the header, so the nav stretches over the
 * header's whole height (the negative block margin takes back the inner padding) and every item
 * centres its own label: the strip under the words belongs to the same hover target as the words. */
.site-nav--desktop{align-self:stretch;margin-block:-12px}
.site-nav--desktop .nav-list{height:100%;align-items:stretch}
.site-nav--desktop .nav-list>li{display:flex;align-items:center}
.site-nav--desktop .nav-item--mega{position:static}
.site-nav--desktop .nav-item--mega>.mega{position:absolute;top:100%;left:0;right:0;z-index:70;display:none;background:linear-gradient(180deg,rgba(var(--panel-rgb),.90),rgba(var(--panel-rgb),.86));-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);color:#eef3f6;border-top:1px solid var(--panel-edge);box-shadow:0 30px 60px var(--panel-shadow)}
.site-nav--desktop .nav-item--mega:hover>.mega,
.site-nav--desktop .nav-item--mega:focus-within>.mega{display:block}
/* The thin sheet belongs where a photograph is behind it, and there only: at the top of the front
 * page the hero is under the panel, so 62–70% tint plus a 26px blur still leaves the room readable
 * through the glass. Everywhere else — an inner page, or the front page once it has scrolled onto
 * white paper — a 62% sheet over white would composite to mid grey-brown and the white type on it
 * would fall to about 2.4:1, so the tint goes back up. The header's own data-scrolled attribute is
 * the switch: it is already maintained for the bar's shadow.
 */
body.home .site-header:not([data-scrolled="true"]) .site-nav--desktop .nav-item--mega>.mega{background:linear-gradient(180deg,rgba(var(--panel-rgb),.70),rgba(var(--panel-rgb),.62))}

/* A few pixels of apron over the header's border, so rounding cannot reopen a gap. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px}
.mega__inner{position:relative;overflow:hidden;max-width:var(--wrap);margin-inline:auto;padding:40px 24px 24px;display:grid;grid-template-columns:306px minmax(0,1fr);column-gap:24px;min-height:340px}
.mega__inner::before{content:"";position:absolute;top:40px;bottom:24px;left:342px;width:1px;background:rgba(255,247,238,.22)}
.mega__lines{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:2px}
.mega__line{margin:0}
.site-nav--desktop .mega a{color:#ffffff;border-bottom:0;font-size:.92rem;padding-block:0}
.mega__line-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:600;line-height:1.25}
.mega__line:hover>.mega__line-link,
.mega__line:focus-within>.mega__line-link,
.mega__line-link:hover{background:rgba(185,212,222,.92);color:#1d1915}
.mega__line-name{min-width:0}
/* the drawing takes the row's colour, so it is pale on the sheet and dark on the mint row */
.mega__icon{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;opacity:.92}
.mega__icon svg{display:block;width:22px;height:22px}
.mega__line:hover>.mega__line-link .mega__icon,
.mega__line:focus-within>.mega__line-link .mega__icon{opacity:1}
.mega__count{margin-left:auto;font-size:.72rem;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums}
.mega__line:hover>.mega__line-link .mega__count,
.mega__line:focus-within>.mega__line-link .mega__count{opacity:.85;color:#1d1915}
/* The pane starts at the line's own right edge, not past the gutter: the pointer crosses from the
 * line into the pane without ever leaving the line's box, so the hover chain holds all the way. */
.mega__pane{position:absolute;top:40px;bottom:24px;left:330px;right:24px;display:none;overflow:auto;padding-left:24px}
.mega__line:hover>.mega__pane,
.mega__line:focus-within>.mega__pane{display:block}
.mega__models{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.mega__models li{break-inside:avoid;margin:0}
.site-nav--desktop .mega__models a{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;line-height:1.35;font-size:.92rem;color:#f2f7f9}
.mega__models a::before{content:"\203A";margin-right:9px;opacity:.5}
.site-nav--desktop .mega__models a:hover{background:rgba(255,255,255,.10);color:#ffffff}
.mega__all{display:inline-block;margin-top:14px;font-size:.85rem;text-decoration:none;color:var(--color-brand)}
.mega__all:hover{text-decoration:underline}
.mega__empty{margin:0;color:#eef3f6;font-size:.9rem;line-height:1.6;max-width:44ch}

/* ---------- Header: the page panels ----------
 * One entry per page that has more to say than its own address: what the page holds on the left,
 * the page's own sections and the pages that follow on the right. It borrows the catalogue panel's
 * sheet and its hover rules, so a buyer learns one gesture, not two.
 */
.mega__inner--page{grid-template-columns:300px minmax(0,1fr);column-gap:32px;min-height:0;padding:44px 24px 30px}
.mega__inner--page::before{top:44px;bottom:30px;left:332px}
.mega__lead{display:grid;align-content:start;gap:14px}
.mega__intro{margin:0;font-size:.92rem;line-height:1.6;color:#eef3f6;max-width:36ch}
.mega__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-content:start;gap:6px 32px}
.mega__group{min-width:0}
.mega__group-title{margin:0 0 8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(238,243,246,.72)}
.mega__links{list-style:none;margin:0;padding:0}
.site-nav--desktop .mega__links a{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;line-height:1.35;font-size:.92rem;color:#f2f7f9}
.mega__links a::before{content:"\203A";margin-right:9px;opacity:.5}
.site-nav--desktop .mega__links a:hover{background:rgba(255,255,255,.10);color:#ffffff}
/* a panel link lands on the section it names, below the sticky header rather than under it */
.step[id],.faq__item[id]{scroll-margin-top:120px}

/* ---------- Interface icons: one pen ----------
 * The category drawings' pen, used again where a row holds two kinds of information (a label and
 * its value, a button and what it sends) or where a frame is empty and has to say what belongs in
 * it. Never as an ornament: where the words alone are unambiguous there is no drawing. CSS decides
 * only placement — the glyph, its stroke and its colour come from heehan_icon().
 */
.ico{flex:0 0 auto;vertical-align:-.16em}
.contact-card__list span .ico,.home-contact__facts span .ico{margin-right:7px;vertical-align:-.2em;opacity:.7}
.site-footer__col .nav-list .ico{margin-right:8px;vertical-align:-.18em;opacity:.55}
.button .ico{margin-right:8px;vertical-align:-.2em}
.home-hero__list{list-style:none;padding-left:0}
.home-hero__list li{display:flex;gap:10px;align-items:flex-start}
.home-hero__list .ico{margin-top:2px;opacity:.85}
.evidence__list li{display:flex;gap:10px;align-items:flex-start}
.evidence__list li::before{content:none}
.evidence__mark{flex:0 0 16px;margin-top:2px;opacity:.5}
.product-card__empty .ico{display:block;margin:0 auto 8px;vertical-align:0;opacity:.45}
.media-slot__icon{opacity:.45}
.gallery--empty .ico{margin-right:8px;vertical-align:-.2em;opacity:.5}

/* ---------- Header: the sheet drops instead of blinking ----------
 * The panel used to be a display switch, so it arrived between two frames. Now the sheet is drawn
 * down from the header's edge and its rows are released one after another, each falling into its
 * place with a short overshoot — the difference between a menu appearing and a column of things
 * landing in front of you. Only the arrival is animated: on the way out the panel still goes at
 * once, because nothing should stand between the pointer and the page, and `display:none` stays
 * the resting state so a closed panel can never hold a click.
 *
 * The stagger is set through --row-delay rather than animation-delay directly: the `animation`
 * shorthand resets the delay to 0, and it would win over a plainer nth-child rule.
 */
@media (prefers-reduced-motion: no-preference){
	@keyframes heehan-sheet-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
	@keyframes heehan-row-drop{
		0%{opacity:0;transform:translateY(-34px);filter:blur(4px)}
		20%{opacity:1}
		70%{transform:translateY(3px);filter:blur(0)}
		87%{transform:translateY(-1.5px)}
		100%{opacity:1;transform:translateY(0);filter:blur(0)}
	}
	@keyframes heehan-pane-in{from{opacity:0}to{opacity:1}}

	.site-nav--desktop .nav-item--mega:hover>.mega,
	.site-nav--desktop .nav-item--mega:focus-within>.mega{animation:heehan-sheet-in .22s cubic-bezier(.22,.9,.3,1) backwards}

	.site-nav--desktop .nav-item--mega:hover>.mega :is(.mega__lines>li,.mega__lead>*,.mega__groups>.mega__group),
	.site-nav--desktop .nav-item--mega:focus-within>.mega :is(.mega__lines>li,.mega__lead>*,.mega__groups>.mega__group){animation:heehan-row-drop .5s cubic-bezier(.34,.06,.36,1) backwards;animation-delay:var(--row-delay,0s)}

	/* each row is released a beat after the one above it: a waterfall, not one block */
	.mega__lines>li:nth-child(2),.mega__lead>:nth-child(2),.mega__groups>.mega__group:nth-child(2){--row-delay:.08s}
	.mega__lines>li:nth-child(3),.mega__lead>:nth-child(3),.mega__groups>.mega__group:nth-child(3){--row-delay:.16s}
	.mega__lines>li:nth-child(4){--row-delay:.24s}
	.mega__lines>li:nth-child(5){--row-delay:.32s}
	.mega__lines>li:nth-child(6){--row-delay:.4s}
	.mega__lines>li:nth-child(7){--row-delay:.48s}
	.mega__lines>li:nth-child(8){--row-delay:.56s}

	/* the models of the line under the pointer settle in rather than replace each other */
	.mega__pane{animation:heehan-pane-in .22s ease-out .18s backwards}
}




/* The inquiry form — one grammar wherever it appears: homepage band, Contact page, model page.
 * Paper-coloured fields on a surface band, black type, the one accent on the submit button. */
.home-contact__form{grid-column:1/-1}
.quote-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:start;margin:56px 0 0;padding:38px 36px;background:var(--color-surface);border-radius:var(--radius-card)}
.quote-form__intro h2{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.quote-form__lede{margin:0 0 14px;line-height:1.7;max-width:52ch}
.quote-form__reply{margin:0;font-size:.9rem;line-height:1.6;max-width:52ch}
.quote-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:block;min-width:0}
.field--wide{grid-column:1/-1}
.field__label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#000000;margin-bottom:6px}
.field__input{width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;font-size:.95rem;line-height:1.4;color:var(--color-ink);background:var(--color-background);border:1px solid var(--color-line);border-radius:12px}
.field__input::placeholder{color:#000000;opacity:.45}
.field__input:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
.field__input--area{resize:vertical;min-height:96px}
.field__hint{display:block;margin:7px 0 0;font-size:.85rem;line-height:1.5;color:var(--color-muted)}
.field__hint a{text-decoration:underline;text-underline-offset:3px}
.field--check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:12px;cursor:pointer}
.field__check{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--color-brand)}
.field__check-text{font-size:.9rem;line-height:1.45;color:var(--color-ink)}
.field--check:has(.field__check:focus-visible){outline:2px solid var(--color-focus);outline-offset:1px}
.field__input[aria-invalid="true"]{border-color:var(--color-focus);box-shadow:inset 0 0 0 1px var(--color-focus)}
.quote-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.quote-form__status{margin:0;font-size:.9rem;line-height:1.5}
.quote-form__status:empty{display:none}
.quote-form__privacy{margin:14px 0 0;font-size:.8rem;line-height:1.55}
@media (max-width:900px){
	.quote-form{grid-template-columns:1fr;gap:26px;padding:30px 24px}
}
@media (max-width:600px){
	.quote-form__grid{grid-template-columns:1fr}
}

/* Brand relationship — the footer line and the company facts on the factory page */
.site-footer__brand-line{margin-top:5px;font-size:.82rem}
.brand-proof .company-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:26px 0 0;padding:0}
.brand-proof .company-facts > div{margin:0;padding-top:14px;border-top:1px solid var(--color-line)}
.brand-proof .company-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;font-weight:650;color:#000000}
.brand-proof .company-facts dd{margin:8px 0 0;font-weight:600;line-height:1.45}

/* The small label above a product title keeps its own room: the title's ascenders were reaching it. */
.product__info .eyebrow{display:block;margin:0 0 14px;line-height:1.45}
.product__info h1{line-height:1.2;margin:0 0 16px}
/* A colour the chosen size is not made in is removed from the page, not dimmed. */
.variant-btn[hidden],.field__input option[hidden]{display:none}

/* ---------- Factory page: plant and equipment ----------
 * The cards are the `.step` cards the rest of the site already uses, laid out for a count above a
 * machine name rather than a numeral above a sentence. The count is the workshop's own figure, so
 * it sets in tabular numerals and keeps a fixed box whether it reads "5+" or "30+" — nothing here
 * introduces a colour or a typeface the tokens do not already hold.
 */
.plant-list{margin-top:24px}
.plant{display:grid;gap:10px;align-content:start}
.plant h3{margin:0}
.plant__count{justify-self:start;display:inline-flex;align-items:center;min-width:56px;height:34px;padding:0 14px;border-radius:var(--radius-control);background:var(--color-surface);border:1px solid var(--color-line);color:#000000;font-weight:700;font-size:1.05rem;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:900px){.plant-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plant-list{grid-template-columns:1fr;gap:12px}}

/* Page hero: the front page's opening, on every page.
   A photograph runs the full width of the window, the page's name is set on it in the same white
   type the front page uses, and the bottom edge dissolves into the paper with a mask rather than
   stopping at a line — the same three parts as `.home-hero`, so a page reached from the navigation
   opens the way the home page does. The whole banner thins out with the scroll (`--hero-fade`, set by
   `assets/js/hero-fade.js`): opacity only, nothing moves. */
.page-hero{--hero-fade:0;position:relative;z-index:0;isolation:isolate;color:#ffffff;opacity:calc(1 - var(--hero-fade));display:grid;align-content:end;min-height:clamp(300px,42vh,460px);padding-block:64px 46px;padding-inline:max(24px,calc((100% - var(--wrap)) / 2))}
.page-hero__bg{position:absolute;inset:0;z-index:-2;display:block;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 83%,rgba(0,0,0,.34) 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 83%,rgba(0,0,0,.34) 92%,transparent 100%)}
.page-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% top}
.page-hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(10,26,32,.92) 0%,rgba(10,26,32,.78) 22%,rgba(10,26,32,.46) 44%,rgba(10,26,32,.16) 62%,rgba(10,26,32,0) 74%)}
.page-hero__copy{max-width:min(100%,74ch)}
.page-hero .crumbs,.page-hero .crumbs span{color:rgba(255,255,255,.86)}
.page-hero .crumbs a{color:rgba(255,255,255,.86)}
.page-hero .crumbs a:hover{color:#ffffff}
.page-hero .eyebrow{color:rgba(255,255,255,.76);text-shadow:0 1px 2px rgba(10,26,32,.8)}
.page-hero h1{color:#ffffff;font-size:clamp(1.95rem,3.7vw,3.05rem);line-height:1.06;letter-spacing:-.035em;margin:0 0 16px;text-shadow:0 2px 6px rgba(10,26,32,.5),0 0 20px rgba(10,26,32,.55)}
.page-hero__intro{color:rgba(255,255,255,.93);font-size:1.02rem;line-height:1.65;max-width:58ch;margin:0;text-shadow:0 1px 2px rgba(10,26,32,.85),0 2px 14px rgba(10,26,32,.7)}
.page-hero .series-mark--head{margin:0 0 16px}

/* The contact page's figure strip, at the foot of its banner: live type on the photograph rather
   than figures painted into the picture, so they stay sharp at any width and follow the language. */
.page-hero__facts{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.26)}
.page-hero__facts-inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px}
.page-hero__facts-list{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none}
.page-hero__facts-list li{display:grid;gap:3px}
.page-hero__facts-value{font-size:1.35rem;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.page-hero__facts-label{font-size:.72rem;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.page-hero__facts-link{flex:0 0 auto;display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-control);color:#ffffff;font-size:.86rem;text-decoration:none;transition:background .18s ease}
.page-hero__facts-link:hover,.page-hero__facts-link:focus-visible{background:rgba(255,255,255,.18)}
@media (max-width:700px){
  .page-hero{min-height:clamp(260px,40vh,380px);padding-block:44px 34px}
  .page-hero__bg img{object-position:84% center}
  .page-hero__scrim{background:linear-gradient(180deg,rgba(10,26,32,.82) 0%,rgba(10,26,32,.52) 46%,rgba(10,26,32,.72) 100%)}
  .page-hero h1{font-size:clamp(1.72rem,7vw,2.2rem)}
  .page-hero__intro{font-size:.98rem}
  .page-hero__facts-inner{display:block}
  .page-hero__facts-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
  .page-hero__facts-value{font-size:1.2rem}
  .page-hero__facts-link{margin-top:14px}
}

/* The search tool, beside the language chip rather than among the pages. */
.site-header__tool{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-control);border:1px solid transparent;color:#000000}
.site-header__tool:hover,.site-header__tool:focus-visible{border-color:var(--color-line);background:var(--color-surface)}
@media (max-width:900px){.site-header__tool{display:none}}

/* A search field in the header, the catalogue's way in without pressing a magnifier first.
   The pill stays in the bar while the desktop bar fits; in the tight 901–1000 band it hands back
   to the magnifier, and on a phone it takes its own full-width row under the bar. */
.site-header__search{display:none;align-items:center;gap:4px;flex:0 0 auto;width:clamp(104px,7.5vw,126px);height:38px;padding:0 3px 0 11px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.site-header__search:focus-within{border-color:var(--color-ink);background:var(--color-background);box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.site-header__search-input{flex:1 1 auto;min-width:0;width:100%;margin:0;padding:0;border:0;background:transparent;color:#000000;font:inherit;font-size:.88rem;line-height:1;appearance:none;-webkit-appearance:none}
.site-header__search-input:focus{outline:0}
.site-header__search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-header__search-input::placeholder{color:#5b6b74;opacity:1}
.site-header__search-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:#000000;cursor:pointer}
.site-header__search-btn:hover,.site-header__search-btn:focus-visible{background:var(--color-brand-soft);outline:0}
@media (min-width:1180px){.site-header__search{display:flex}.site-header__tool{display:none}}
@media (max-width:900px){
	.site-header__inner{flex-wrap:wrap}
	.site-header__search{display:flex;order:20;flex:1 1 100%;height:42px;margin-top:2px;padding-left:16px}
	.site-header__search-input{font-size:.95rem}
}


/* OEM and ODM on the customization page: two tracks, each with the stages it goes through. */
.tracks{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.track{background:var(--color-background);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:26px 22px}
.track h3{margin:0 0 8px;font-size:1.02rem;letter-spacing:-.01em}
.track p{margin:0}
.track__steps{list-style:none;counter-reset:track;margin:16px 0 0;padding:0;display:grid;gap:7px;font-size:.92rem}
.track__steps li{counter-increment:track;display:grid;grid-template-columns:20px 1fr;gap:8px}
.track__steps li::before{content:counter(track);font-weight:650}
.tracks__note{margin:0;font-size:.92rem}
@media (max-width:700px){.tracks{grid-template-columns:1fr}}

/* What a reorder depends on: the machines under the first point, read from the company record. */
.why__facts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:.85rem}

/* The guide rail — the left column a long page leaves standing empty, used for the numbers the page
   can stand behind and the one door that answers them. The rail is printed as the first child of
   `main`, so the layout gives it column one and keeps every other block in column two: no template
   has to wrap its content, and the source order still reads page-first. On a phone the grid becomes
   one column and the rail turns into a compact box above the page, because a sticky column there
   would follow the thumb and cover the text it is meant to accompany. */
.page-main:has(>.guide-rail){max-width:1460px;margin-inline:0 auto;padding-left:clamp(20px,2.6vw,44px);padding-right:clamp(20px,2.6vw,44px);display:grid;grid-template-columns:minmax(0,clamp(276px,26vw,376px)) minmax(0,1fr);column-gap:clamp(28px,3vw,52px);align-items:start}
.page-main:has(>.guide-rail)>*{grid-column:2;min-width:0}
.page-main:has(>.guide-rail)>.guide-rail{grid-column:1;grid-row:1 / span 200}
.guide-rail{position:sticky;top:104px;z-index:2;align-self:start;display:grid;gap:16px}
.guide-rail__title{margin:0;padding-bottom:12px;border-bottom:1px solid var(--color-line);font-size:.72rem;letter-spacing:.12em;line-height:1.4}
.guide-rail__facts{margin:0;display:grid;gap:16px}
.guide-rail__fact{display:grid;gap:4px}
.guide-rail__fact dt{font-size:.72rem;letter-spacing:.08em;line-height:1.4}
.guide-rail__fact dd{margin:0;font-size:clamp(1.15rem,1.5vw,1.45rem);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.guide-rail__cta{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:2px;padding:10px 20px;border-radius:var(--radius-control);background:var(--color-ink);color:#ffffff;font-size:.86rem;line-height:1.2;text-decoration:none;transition:transform .18s ease}
.guide-rail__cta:hover{transform:translateY(-1px)}
.guide-rail__links{margin:2px 0 0;padding:14px 0 0;border-top:1px solid var(--color-line);list-style:none;display:grid;gap:9px}
.guide-rail__links a{font-size:.86rem;line-height:1.4;text-decoration:none;color:var(--color-ink)}
.guide-rail__links a:hover{text-decoration:underline}
@media (max-width:1024px){
  .page-main:has(>.guide-rail){display:block;max-width:1180px;margin-inline:auto;padding-left:24px;padding-right:24px}
  .page-main:has(>.guide-rail)>.guide-rail{position:static;display:grid;gap:12px;margin:0 0 26px;padding:18px 20px;background:var(--color-surface);border-radius:var(--radius-card)}
  .guide-rail__facts{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:13px 18px}
  .guide-rail__title{padding-bottom:10px}
  .guide-rail__links{display:none}
}
@media (prefers-reduced-motion:reduce){.guide-rail__cta:hover{transform:none}}

/* The line icons at card size: a tile names a product line, and the same mark the category page
   carries in its header sits above that name, so a buyer scanning the grid matches the two without
   reading a word. */
.series-card__mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--color-brand-soft);color:#0a1a20}
.series-card__mark svg{display:block;width:22px;height:22px}

/* The rail answers the scroll instead of standing in it: the hairline under its title fills as the
   page is read, so the column beside the text shows where in the page the reader is rather than
   sitting there like a panel glued to the window. Plain CSS scroll progress where the browser has
   it; where it does not, the rail keeps following at its offset and nothing else changes. */
@supports (animation-timeline:scroll()){
  .guide-rail__title{position:relative}
  .guide-rail__title::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--color-ink);transform:scaleX(0);transform-origin:0 50%;animation:guide-rail-progress linear both;animation-timeline:scroll(root block)}
  @keyframes guide-rail-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){
  .guide-rail__title::after{animation:none;transform:scaleX(0)}
}

/* ---------- Floating contact cluster: an email pill above the WhatsApp pill ----------
   Not every buyer can use WhatsApp: some corporate networks block web.whatsapp.com, some markets
   simply answer by mail, and many want a written trail before they talk. The email pill therefore
   rides above the WhatsApp one at the same anchor, opens the site's prefilled quote mailto, and
   stays reachable on a phone as an icon. The WhatsApp pill keeps its own colours from the blocks
   above; only its positioning moves into this flex column. */
.contact-fabs{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.contact-fabs .wa-button{position:static;right:auto;bottom:auto;z-index:auto;background:var(--color-whatsapp);border-color:var(--color-whatsapp);color:#ffffff}
.contact-fabs .wa-button:hover{background:#1b6b3f;border-color:#1b6b3f;color:#ffffff}
.contact-fabs__mail{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 13px;border-radius:999px;background:#000000;color:#ffffff;border:1px solid #000000;box-shadow:0 6px 18px rgba(16,32,40,.14);text-decoration:none;font-size:.84rem;font-weight:600;letter-spacing:.01em;transition:background .15s ease,color .15s ease,border-color .15s ease}
.contact-fabs__mail svg{width:16px;height:16px;flex:none}
.contact-fabs__mail:hover{background:#16232a;color:#ffffff;border-color:#16232a}
.contact-fabs__mail:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
@media (max-width:640px){
  .contact-fabs{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:9px}
  .contact-fabs__mail{padding:13px}
  .contact-fabs__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .contact-fabs__mail{transition:none}
}

/* The thank-you page: confirmation first, then what happens next. No band, no photograph. */
.page-thank .thanks{max-width:44rem}
.thanks__mark{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--color-brand-soft);color:var(--color-ink);margin-bottom:20px}
.thanks__lede{margin-top:14px;font-size:1.05rem;line-height:1.65;max-width:56ch}
.thanks__grid{display:grid;gap:20px;margin-top:40px}
@media (min-width:900px){.thanks__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:24px}}
.thanks__side{display:grid;gap:20px}
.thanks__panel{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:26px 28px;background:var(--color-background)}
.thanks__title{margin:0 0 18px;font-size:1.02rem;letter-spacing:.01em}
.thanks__steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.thanks__step{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:14px;padding-top:16px;border-top:1px solid var(--color-line)}
.thanks__step:first-child{padding-top:0;border-top:0}
.thanks__num{font-size:.74rem;letter-spacing:.14em;color:var(--color-muted);font-variant-numeric:tabular-nums;padding-top:4px}
.thanks__step p{margin:0;line-height:1.6}
.thanks__links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.thanks__links a,.thanks__body a,.thanks__note a{text-decoration:underline;text-underline-offset:3px}
.thanks__body{margin:0;line-height:1.6;color:var(--color-ink)}
.thanks__contact{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--color-line);display:grid;gap:10px;font-size:.94rem}
.thanks__contact li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thanks__contact li>span{display:inline-flex;align-items:center;gap:6px;min-width:6.5rem;color:var(--color-muted)}
.thanks__note{margin-top:32px;max-width:64ch;font-size:.9rem;line-height:1.6;color:var(--color-muted)}
@media (max-width:600px){.thanks__panel{padding:22px 20px}.thanks__step{grid-template-columns:1.8rem minmax(0,1fr);gap:10px}}
/* The test address prints this bar; a buyer's arrival never does. */
.thank-test{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 28px;padding:12px 16px;border-radius:12px;background:#111111;color:#ffffff;font-size:.86rem;line-height:1.5}
.thank-test strong{font-weight:600;letter-spacing:.02em}
.thank-test span{opacity:.78}

/* ---- The thank-you page is a photograph page -------------------------------
 * The home hero photograph is burned into the whole page as its ground. Three decisions here:
 *
 *   layer    the ground is fixed to the viewport, so it runs edge to edge whatever the window is:
 *            `main` carries the reading column's width, and a ground laid inside it stopped short
 *            of both margins. A fixed child of a positioned main does paint above the next in-flow
 *            block, so the footer is lifted into its own layer below (`.site-footer`), and the
 *            photograph ends where the footer's paper begins instead of running under it. Fixed
 *            also keeps the picture one viewport tall: laid across the whole document box it was
 *            stretched on a phone and went soft.
 *
 *   opacity  the scrim is a gradient, not one flat wash, because the type sits in two places.
 *            Over the confirmation block it runs at .70 -> .60, which clears 7:1 for white
 *            lettering even on the brightest patch of that white sofa. Where the panels start
 *            it drops to .46, so the room, the two dogs and the cat stay readable as a
 *            photograph rather than a dark texture. It deepens again to .72 at the foot.
 *   glass    every line a buyer has to read sits on smoked panels (.62 graphite), so the
 *            brightest part of the photograph never runs underneath a sentence. Inside the
 *            panels the glass holds white type at ~11:1 and still lets the room show through.
 */
.page-thank{position:relative;isolation:isolate}
.thank-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0a1a20}
.thank-bg__img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% top}
.thank-bg__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,24,.70) 0%,rgba(8,18,24,.60) 24%,rgba(8,18,24,.46) 52%,rgba(8,18,24,.58) 82%,rgba(8,18,24,.72) 100%)}
.page-thank>*:not(.thank-bg){position:relative;z-index:1}
/* the ground is fixed, so the block that follows `main` needs a layer of its own: the footer's paper
   sits on top of the photograph instead of the photograph running over it */
.site-footer{position:relative;z-index:1}
@media (max-width:600px){.thank-bg__img{object-position:84% center}.thank-bg__scrim{background:linear-gradient(180deg,rgba(8,18,24,.74) 0%,rgba(8,18,24,.62) 26%,rgba(8,18,24,.52) 54%,rgba(8,18,24,.74) 100%)}}
/* type that stands on the photograph itself */
.page-thank .crumbs,.page-thank .crumbs span{color:rgba(255,255,255,.86)}
.page-thank .crumbs a{color:rgba(255,255,255,.86)}
.page-thank .crumbs a:hover{color:#ffffff}
.page-thank .eyebrow{color:rgba(255,255,255,.74)}
.page-thank .thanks h1{color:#ffffff}
.page-thank .thanks__lede{color:rgba(255,255,255,.88)}
.page-thank .thanks__mark{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#ffffff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* the smoked glass the reading sits on */
.page-thank .thanks__panel{background:rgba(9,19,25,.62);border-color:rgba(255,255,255,.16);color:#ffffff;-webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08);box-shadow:0 22px 60px rgba(4,12,17,.32)}
.page-thank .thanks__title,.page-thank .thanks__step p,.page-thank .thanks__body{color:#ffffff}
.page-thank .thanks__num,.page-thank .thanks__contact li>span{color:rgba(255,255,255,.62)}
.page-thank .thanks__step,.page-thank .thanks__contact{border-top-color:rgba(255,255,255,.14)}
.page-thank .thanks__links a,.page-thank .thanks__body a{color:#ffffff}
.page-thank .thanks__note{color:rgba(255,255,255,.66)}
.page-thank .thanks__note a{color:rgba(255,255,255,.86)}
/* the test bar keeps its own surface, so it still reads as a notice on top of a photograph */
.page-thank .thank-test{background:#0d1418;border:1px solid rgba(255,255,255,.24)}
@media (max-width:600px){.page-thank .thanks__panel{background:rgba(9,19,25,.72)}}
/* what to send so the first quotation is the last round: a four-row list, then one way to send it */
.page-thank .thanks__need{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;font-size:.94rem;line-height:1.55}
.page-thank .thanks__need li{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:12px}
.page-thank .thanks__need-label{color:rgba(255,255,255,.62)}
.page-thank .thanks__need li>span:last-child{color:#ffffff}
.page-thank .thanks__cta{margin-top:22px;background:#ffffff;border-color:#ffffff;color:#000000}
.page-thank .thanks__cta:hover{background:#eef3f6;border-color:#eef3f6;color:#000000}
@media (max-width:600px){.page-thank .thanks__need li{grid-template-columns:1fr;gap:2px}}
@media print{.page-thank .thank-bg{display:none}.page-thank .thanks__panel{background:#ffffff;border-color:#e1e8ec}.page-thank .thanks h1,.page-thank .thanks__lede,.page-thank .thanks__title,.page-thank .thanks__step p,.page-thank .thanks__body,.page-thank .crumbs,.page-thank .crumbs a,.page-thank .crumbs span{color:#000000}}