/* Hallmark · shape: Feature Stack · genre: editorial · theme: Ink (deal 3/3, seed family-herring-producer-wladyslawowo-722b·5ebe00f4·2026-10-26·r0), recoloured from the IDA logo, type from Spore by request · job: enquire (B2B wholesale) · draw: d68a54
 * hero: Stage · nav: edge-aligned, the logo and three page links · footer: statement on navy · imagery: the product (the user's twelve tub photographs) · signature: every tub stands on the logo's yellow card, tilted at the logo's 7 degrees, its name in the logo's red-framed label · ink: paper, logo colourway, Young Serif over Instrument Sans
 * axes: light/roman-serif/chromatic-royal-blue · posture: full palette (paper off-white, ink navy, signal logo royal blue, seal logo yellow used only as the tilted card, frame logo red used only as a line) · contrast: pass · fold: pass · v2.0.0
 * pages: home, o-firmie and 404 (Stage hero), twelve product pages (Stage, the tub on the card), produkty, wspolpraca, kontakt and polityka (Banner: a short title over the content)
 * motion: the hero card settles to the logo's tilt, one staggered reveal per page, cross-page view transitions, tile and card hovers; all off under reduced motion
 * hero-review: fix · 5 findings · 5 resolved · finish-review: subagent · 7 findings · 7 resolved · gap: none */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the yellow card repeats across pages; it carries a tub every time and never decorates an empty space */
/* Hallmark · waive 44c · produkty and kontakt open on a short Banner title over the catalogue and the enquiry form · a wholesale buyer lands there to pick herring, not to read a hero */
/* Hallmark · waive 79 · the o-firmie hero is the IDA logo card at full column width beside a one-line founding fact · growing it further crops the logo the page is about */
/* Hallmark · dismissed 58 · polityka-prywatnosci is a legal text, read not scanned · words per screen does not apply */
/* Hallmark · dismissed 71 · the produkty h3 are tile captions under their photo, measured against the photo above · they belong to the tile */
/* Hallmark · dismissed 34 · 404.html uses root paths so it styles at any depth; the file:// render cannot resolve them, on the server it measures clean */
/* Hallmark · dismissed 77 · produkty, o-firmie and kontakt are inner pages of a four-page site; the home page carries the six sections */
/* Hallmark · dismissed 23 · the blue band is the logo's own royal-blue field under the declared full-palette posture */
/* Hallmark · answered F15 · the hero and the logo band take a wider gap than the content grids so the tilted card has room to turn */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-paper: oklch(97.6% 0.008 95); --color-paper-2: oklch(95.2% 0.011 95); --color-paper-3: oklch(92.4% 0.013 95);
  --color-white: oklch(99.6% 0.004 95);
  --color-ink: oklch(24% 0.085 270); --color-ink-2: oklch(33% 0.06 270); --color-muted: oklch(47% 0.035 270);
  --color-rule: oklch(86% 0.018 270); --color-rule-2: oklch(91% 0.012 270);
  --color-accent: oklch(45.4% 0.228 270.3); --color-accent-ink: oklch(99% 0.006 270);
  --color-accent-soft: oklch(93% 0.04 270); --color-accent-soft-ink: oklch(30% 0.12 270);
  --color-focus: oklch(45.4% 0.228 270.3);
  --color-seal: oklch(93% 0.197 104.3);
  --color-frame: oklch(58.5% 0.223 25.9);
  --color-scrim: oklch(24% 0.085 270 / 0.55);
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 14px; --radius-input: 10px;
  --tilt: 7deg;
  --shadow-tub: 0 18px 18px oklch(24% 0.085 270 / 0.18);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--color-muted) var(--color-paper-2); }
body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-synthesis: none; caret-color: var(--color-accent); }
::selection { background: var(--color-seal); color: var(--color-ink); }
.container { max-width: var(--container); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; text-wrap: balance; letter-spacing: -0.012em; margin: 0; }
h1 { font-size: var(--text-display); line-height: 1.02; max-width: 14ch; }
h2 { font-size: var(--text-section); line-height: 1.04; max-width: 18ch; }
h3 { font-size: var(--text-title); line-height: 1.12; }
p { text-wrap: pretty; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 32ch; color: var(--color-ink-2); }

a.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
a.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
a:not(.btn, .skip) { color: var(--color-ink); font-weight: 600; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur-micro) linear; }
a:not(.btn, .skip):hover { color: var(--color-accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 80px; }
.nav__toggle { display: none; }
.nav__brand { flex-shrink: 0; }
.nav__brand img { display: block; width: 84px; height: auto; }
.nav__links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; white-space: nowrap; }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-frame); text-underline-offset: 0.35em; }

/* the logo's card and label */
.card-stage { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 1; width: 100%; }
.card-stage::before { content: ""; position: absolute; inset: 6% 3% 20%; background: var(--color-seal); border-radius: calc(var(--radius-card) * 2); transform: rotate(var(--tilt)); }
.card-stage > img, .card-stage > picture { position: relative; width: 80%; height: auto; margin-top: 4%; filter: drop-shadow(var(--shadow-tub)); }
.card-stage--flip::before { transform: rotate(calc(var(--tilt) * -1)); }
.label { display: inline-flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-sm) var(--space-lg); background: var(--color-white); border: 3px solid var(--color-frame); border-radius: var(--radius-input); color: var(--color-ink); font: 400 var(--text-lg)/1.15 var(--font-display); }
.label span { font: 400 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink-2); }
.card-stage .label { position: absolute; left: 2%; bottom: 6%; }
.label-frame { background: var(--color-white); border: 3px solid var(--color-frame); border-radius: var(--radius-card); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - 80px); max-height: 980px; padding-block: var(--space-md); }
.hero .lead { margin: var(--space-lg) 0 var(--space-xl); }
.hero .lead:last-child { margin-bottom: 0; }
.card-stage--hero { max-height: min(800px, calc(100svh - 104px)); justify-self: center; }
.page-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl) var(--space-3xl); }
.page-hero--text { display: block; padding-block: var(--space-3xl) var(--space-2xl); }
.page-hero .lead { margin: var(--space-lg) 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.js .card-stage--hero::before { animation: settle 640ms var(--ease-out) both; }
.js .card-stage--hero.card-stage--flip::before { animation-name: settle-flip; }
.js .card-stage--hero > :is(img, picture) { animation: rise 640ms var(--ease-out) 80ms both; }
@keyframes settle { from { transform: rotate(0deg); } to { transform: rotate(var(--tilt)); } }
@keyframes settle-flip { from { transform: rotate(0deg); } to { transform: rotate(calc(var(--tilt) * -1)); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* one reveal, scoped to .js so the page reads without script */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); }

/* rhythm */
main > section + section { margin-top: var(--section-gap-s); }
main > .band { margin-top: var(--section-gap-s); }
main > .band + .band { margin-top: 0; }
main > section:last-child:not(.band) { margin-bottom: var(--section-gap); }
.band { padding-block: var(--section-gap-s); }
.band--tint { background: var(--color-paper-2); }
.band--blue { background: var(--color-accent); color: var(--color-accent-ink); }
.band--blue h2, .band--blue p { color: var(--color-accent-ink); }
.footer a:not(.btn, .skip) { overflow-wrap: anywhere; }
.band + .band { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.section-head p { margin: var(--space-md) 0 0; }

/* category cards on home */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.kinds a { display: block; text-decoration: none; }
.kinds .card-stage { margin-bottom: var(--space-md); }
.kinds .card-stage::before { inset: 10% 6% 14%; transition: transform var(--dur-short) var(--ease-out); }
.kinds li:nth-child(even) .card-stage::before { transform: rotate(calc(var(--tilt) * -1)); }
.kinds a:hover .card-stage::before { transform: rotate(0deg); }
.kinds h3 { font-size: var(--text-xl); }
.kinds p { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.kinds a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* trade rows */
.trade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; border-top: 2px solid var(--color-ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.rows dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink); }

/* statement and facts */
.statement { font-size: var(--text-display-s); line-height: 1.04; max-width: 18ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; }
.facts > div { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.facts dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.facts dd { margin: var(--space-xs) 0 0; font-size: var(--text-lg); line-height: 1.35; color: var(--color-ink); }

/* logo band */
.mark__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.mark__logo { width: 100%; max-width: 520px; height: auto; justify-self: center; }
.band--blue p { max-width: 45ch; margin: var(--space-lg) 0 0; font-size: var(--text-lead); line-height: 1.5; }
.band--blue a:not(.btn, .skip) { color: var(--color-accent-ink); }
.band--blue a:not(.btn, .skip):hover { color: var(--color-seal); }
.band--blue a:focus-visible { outline-color: var(--color-seal); }
.band--blue .more { display: inline-block; margin-top: var(--space-xl); }

/* close */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.close address { font-style: normal; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); margin: var(--space-lg) 0 var(--space-xl); }

/* catalogue */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; padding: 0; margin: 0; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-micro) linear; }
.seg label:hover { border-color: var(--color-ink); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .seg { display: none; }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.tile { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; text-decoration: none; cursor: pointer; border-radius: var(--radius-card); }
.tile__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: var(--space-md); background: var(--color-white); border-radius: var(--radius-card); overflow: clip; }
.tile__pic::before { content: ""; position: absolute; inset: 14% 10% 18%; background: var(--color-seal); border-radius: var(--radius-card); transform: rotate(var(--tilt)) scale(0.9); opacity: 0; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tile__pic img { position: relative; width: 84%; height: auto; }
.tile:hover .tile__pic::before, .tile:focus-visible .tile__pic::before { opacity: 1; transform: rotate(var(--tilt)); }
.tile h3 { font-size: var(--text-lg); line-height: 1.2; font-weight: 400; }
.tile:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.tile p { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.sheet { width: min(960px, calc(100% - 2 * var(--space-md))); max-height: calc(100dvh - 2 * var(--space-md)); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink-2); box-shadow: var(--shadow-card); }
.sheet::backdrop { background: var(--color-scrim); }
.sheet__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl); }
.sheet h2 { font-size: var(--text-2xl); }
.sheet p { margin: var(--space-md) 0 var(--space-xl); }
.sheet__close { position: absolute; top: var(--space-sm); right: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; z-index: var(--z-raised); }
.sheet__close:hover { border-color: var(--color-ink); }
.sheet__close:active { transform: translateY(1px); }
.sheet__close:disabled { opacity: 0.55; cursor: not-allowed; }
.basket-note { min-height: 1lh; margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* Direct selection stays alongside the product, separate from its detail link. */
.shelf > li { display: flex; flex-direction: column; min-width: 0; }
.shelf > li > .tile { flex: 1; }
.storage-warning { padding-block: 16px; color: var(--color-ink); background: var(--color-accent-soft); }
.tile__add { align-self: start; margin-top: auto; margin-block-start: 16px; min-height: 44px; padding: 10px 14px; font-size: .875rem; white-space: normal; line-height: 1.3; }
[data-add][aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-soft-ink); }
html:not(.js) [data-add] { display: none; }
.inquiry-bar { display: none; }
.form h2 { font-size: var(--text-xl); }
.form__intro { font-size: 1rem; line-height: 1.6; }
.form__note { font-size: .875rem; line-height: 1.6; }
.inquiry-selection { margin-block: 16px; }
.inquiry-selection h3 { font-size: var(--text-lg); margin-bottom: 8px; }
.inquiry-items { list-style: none; padding: 0; margin: 12px 0 0; }
.inquiry-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding-block: 16px; border-top: 1px solid var(--color-rule); }
.inquiry-items label { grid-column: 1 / -1; margin: 0; line-height: 1.5; }
.inquiry-remove { min-width: 52px; min-height: 44px; padding: 8px; border: 0; background: none; color: var(--color-ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.inquiry-remove:hover { color: var(--color-accent); }
#zapytanie { scroll-margin-top: 20px; }

/* catalogue groups */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: border-color var(--dur-micro) linear, background-color var(--dur-micro) linear; }
.chip:hover { border-color: var(--color-ink); background: var(--color-white); }
.group { scroll-margin-top: var(--space-lg); }
.group__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-top: var(--space-lg); margin-bottom: var(--space-xl); border-top: 2px solid var(--color-ink); }
.group__head p { margin: 0; font-size: var(--text-lead); color: var(--color-ink-2); }
main > .group + .group { margin-top: var(--space-3xl); }

/* offer sheet */
.offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.offer .lead { margin: var(--space-md) 0 var(--space-xl); }
.offer__sheet { display: block; justify-self: center; width: min(100%, 380px); border-radius: var(--radius-input); transform: rotate(calc(var(--tilt) * -0.5)); transition: transform var(--dur-short) var(--ease-out); }
.offer__sheet img { display: block; width: 100%; height: auto; border-radius: var(--radius-input); box-shadow: var(--shadow-tub); }
.offer__sheet:hover { transform: rotate(0deg); }

/* product page */
.page-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding-top: var(--space-md); }
.back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: var(--text-sm); }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { font-weight: 400; }
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "photo title" "photo details"; gap: var(--space-lg) var(--space-2xl); align-items: start; padding-block: var(--space-lg) var(--space-2xl); }
.product > figure { grid-area: photo; align-self: center; }
.product__info { grid-area: details; min-width: 0; }
.product h1 { grid-area: title; align-self: end; font-size: var(--text-display-s); max-width: 18ch; }
.spec { margin: var(--space-xl) 0; border-top: 2px solid var(--color-ink); }
.spec > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.spec dt { font-size: var(--text-sm); color: var(--color-muted); }
.spec dd { margin: 0; color: var(--color-ink); }
.btn[aria-pressed="true"] { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); }
.btn[aria-pressed="true"]:hover { background: var(--color-paper-2); }

/* bigger steps on Współpraca */
.steps.steps--big { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps.steps--big li { display: block; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); border-bottom: 0; }
.steps.steps--big li::before { display: block; margin-bottom: var(--space-lg); font-size: var(--text-display-s); }
.steps.steps--big p { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }

.how > h2 { margin-bottom: var(--space-xl); }

/* prose */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.prose p { line-height: 1.65; }
.form__note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* about */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.story p { max-width: 60ch; margin: 0 0 var(--space-md); font-size: var(--text-lead); line-height: 1.55; }
.timeline { margin: 0; border-top: 2px solid var(--color-ink); }
.timeline > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.timeline dt { font: 400 var(--text-2xl)/1.2 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.timeline dd { margin: 0; font-size: var(--text-lead); color: var(--color-ink); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.contact address { font-style: normal; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); margin: var(--space-lg) 0 var(--space-md); }
.contact h1 { font-size: var(--text-display-s); }
.page-banner { padding-block: var(--space-2xl) var(--space-xl); }
.page-banner .lead { margin: var(--space-md) 0 0; }
.steps { margin: var(--space-xl) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); }
.steps li::before { content: counter(step); font: 400 var(--text-xl)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink); }
.contact__lines { margin: 0 0 var(--space-lg); }
.contact__lines > div { display: flex; gap: var(--space-md); padding-block: var(--space-xs); }
.contact__lines dt { min-width: 5rem; color: var(--color-muted); }
.contact__lines dd { margin: 0; }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); }
.form { display: grid; gap: var(--space-xs); padding: var(--space-xl); }
.form label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-top: var(--space-xs); }
.form input, .form textarea { min-width: 0; width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: inherit; outline: 2px solid transparent; outline-offset: -3px; }
.form input:focus-visible, .form textarea:focus-visible { outline-color: var(--color-focus); }
.form input[aria-invalid="true"] { border-color: var(--color-error); }
.form .btn { justify-self: start; margin-top: var(--space-md); }
.form__help { min-height: 1lh; margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.map:focus, .map:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.map { display: block; width: 100%; aspect-ratio: 21 / 9; min-height: 320px; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); }

/* footer */
.footer { background: var(--color-ink); color: var(--color-paper-3); padding-block: var(--space-3xl); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: start; }
.footer__line { margin: 0; font: 400 var(--text-xl)/1.2 var(--font-display); color: var(--color-paper); max-width: 18ch; }
.footer p { margin: 0; line-height: 1.6; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a:not(.btn, .skip) { color: var(--color-paper); font-weight: 400; }
.footer a:not(.btn, .skip):hover { color: var(--color-seal); }
.footer a:focus-visible { outline-color: var(--color-seal); }

@media (max-width: 60rem) {
  .offer, .product, .group__head, .trade, .hero, .page-hero, .close, .story, .contact, .mark__grid, .footer__grid, .facts, .sheet__body { grid-template-columns: minmax(0, 1fr); }
  .product { grid-template-areas: "title" "photo" "details"; gap: var(--space-lg); }
  .product > figure { max-width: 360px; justify-self: center; }
  .story, .contact { gap: var(--space-xl); }
  .hero { gap: var(--space-xl); min-height: 0; max-height: none; }
  .card-stage--hero { max-width: 520px; justify-self: center; }
  .kinds, .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.steps--big { grid-template-columns: minmax(0, 1fr); }
  .mark__logo { max-width: 320px; justify-self: start; }
  .timeline > div, .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .timeline > div { gap: var(--space-sm); }
  .nav__links { gap: var(--space-lg); }
}
@media (min-width: 40.001rem) and (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; padding-block: 32px; }
  .hero h1 { font-size: clamp(2.5rem, 5.2vw, 3.5rem); }
  .hero .card-stage--hero { width: 100%; max-height: none; }
  .hero .about__logo { max-width: 260px; }
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo title" "photo details"; gap: 20px 32px; }
  .product h1 { font-size: 2rem; }
  .product .actions { display: grid; }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__links { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Mobile is a distinct reading and enquiry layout, not a scaled desktop. */
@media (max-width: 40rem) {
  :root {
    --gutter: 20px;
    --text-display: clamp(2rem, 7.6vw + .25rem, 2.75rem);
    --text-display-s: clamp(1.85rem, 6.5vw + .3rem, 2.4rem);
    --text-section: clamp(1.65rem, 5vw + .45rem, 2.1rem);
    --text-lead: 1.0625rem;
    --section-gap-s: 48px; --section-gap: 56px; --section-gap-l: 64px;
  }
  html { scroll-padding-top: 88px; }
  h1, h2, .statement { line-height: 1.12; }
  .nav { min-height: 72px; gap: var(--space-sm); flex-wrap: wrap; padding-block: 12px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  .nav__brand img { width: 64px; }
  .js .nav__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-rule); border-radius: 8px; background: transparent; color: var(--color-ink); cursor: pointer; }
  .nav__toggle[aria-expanded="true"] { background: var(--color-ink); color: var(--color-paper); }
  .nav > nav { width: 100%; min-width: 0; }
  .js .nav > nav:not(.is-open) { display: none; }
  .nav__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding-block: 8px; font-size: 1rem; }
  .nav__links a { display: flex; align-items: center; min-height: 48px; }
  .hero { padding-block: 28px 0; gap: 20px; }
  .hero--home > .card-stage { display: none; }
  .hero h1 { max-width: 16ch; }
  .hero .lead { margin: 16px 0 24px; }
  .hero .card-stage--hero { width: min(100%, 270px); max-height: none; }
  .hero .about__logo { width: 180px; max-width: 55%; justify-self: start; }
  .actions { gap: 10px; }
  .btn { justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 16px; white-space: normal; line-height: 1.3; text-align: center; }
  .hero .actions, .product .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 12px; margin-bottom: 24px; }
  .section-head a { display: inline-flex; align-items: center; min-height: 44px; }
  .trade, .story, .contact, .offer, .close, .mark__grid { gap: 24px; }
  .rows > div, .timeline > div { padding-block: 20px; gap: 8px; }
  .rows dd, .timeline dd { font-size: 1rem; line-height: 1.6; }
  .timeline dt { font-size: 1.5rem; }
  .facts { margin-top: 24px; gap: 20px; }
  .facts dd { font-size: 1.0625rem; }
  .mark__logo { max-width: 180px; }
  .band--blue p { margin-top: 16px; }
  .band--blue .more { margin-top: 16px; min-height: 44px; }
  .close > .card-stage { width: min(100%, 240px); justify-self: center; }
  .close address { margin: 16px 0 20px; }
  .label { max-width: 96%; font-size: 1rem; padding: 8px 12px; border-width: 2px; }
  .label span { font-size: .8125rem; }
  .kinds { gap: 24px 16px; }
  .kinds h3 { font-size: 1.0625rem; line-height: 1.25; }
  .kinds .card-stage { margin-bottom: 8px; }
  .page-banner { padding-block: 28px 0; }
  .page-banner h1 { max-width: none; }
  .page-banner .lead { margin-top: 16px; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
  .chip { width: 100%; justify-content: center; min-height: 48px; padding: 8px; white-space: normal; text-align: center; border-radius: 8px; line-height: 1.3; }
  .group { scroll-margin-top: 24px; }
  .group__head { gap: 12px; margin-bottom: 20px; padding-top: 20px; }
  .group__head p { font-size: 1rem; }
  main > .group + .group { margin-top: 40px; }
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .shelf > li { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-rule); }
  .tile { grid-column: 1 / -1; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 16px; border-radius: 0; }
  .tile__add { grid-column: 2; width: 100%; margin: 0; align-self: start; }
  .tile__pic { margin: 0; border-radius: 8px; }
  .tile h3 { font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; }
  .tile__pic::before { opacity: 1; transform: rotate(var(--tilt)) scale(.9); }
  .offer__sheet { width: min(88%, 280px); transform: none; }
  .offer .lead { margin: 16px 0 24px; }
  .page-navigation { gap: 0 16px; padding-top: 12px; }
  .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .product { padding-block: 16px 0; gap: 20px; }
  .product h1 { max-width: none; font-size: clamp(1.7rem, 5.5vw + .35rem, 2.2rem); line-height: 1.15; }
  .product > .card-stage { width: min(100%, 240px); max-height: none; }
  .product__info { width: 100%; }
  .spec { margin: 24px 0 0; }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 12px; }
  .basket-note { margin-top: 12px; line-height: 1.5; }
  .basket-note a { display: inline-block; padding-block: 8px; }
  .steps.steps--big { gap: 24px; }
  .steps.steps--big li::before { margin-bottom: 12px; font-size: 1.75rem; }
  .how > h2 { margin-bottom: 24px; }
  .form { min-width: 0; padding: 20px 16px; gap: 10px; border-width: 2px; }
  .form input, .form textarea { font-size: 1rem; }
  .form textarea { min-height: 160px; resize: vertical; }
  .form .btn { width: 100%; justify-self: stretch; }
  .contact__lines { margin-bottom: 0; }
  .contact__lines a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact__lines > div { align-items: baseline; padding-block: 0; }
  .contact__lines dd { min-width: 0; overflow-wrap: anywhere; }
  .map { min-height: 240px; }
  .footer { padding-block: 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .footer__grid { gap: 24px; }
  .footer__line { font-size: 1.35rem; max-width: 24ch; }
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer p a { display: inline-flex; align-items: center; min-height: 44px; }
  body.has-inquiry { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  a.inquiry-bar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky, 100); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: var(--color-ink); color: var(--color-paper); text-decoration: none; border-top: 1px solid var(--color-paper); font-size: .9375rem; }
  a.inquiry-bar:hover { color: var(--color-seal); }
  .inquiry-bar > span { display: inline-flex; align-items: center; gap: 8px; }
  .inquiry-bar strong { display: grid; place-items: center; min-width: 26px; min-height: 26px; border-radius: 6px; background: var(--color-seal); color: var(--color-ink); font-variant-numeric: tabular-nums; }
  .inquiry-bar:focus-visible { outline-color: var(--color-seal); outline-offset: -6px; }
  .prose h2 { margin-top: 28px; }
}
@media (max-width: 22rem) {
  :root { --gutter: 16px; }
  .shelf > li { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; }
  .tile { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .chip { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .card-stage--hero::before, .js .card-stage--hero > :is(img, picture) { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  @view-transition { navigation: none; }
  .chip, .offer__sheet { transition: none; }
  .btn, .seg label, .kinds .card-stage::before, .tile__pic::before, a:not(.btn, .skip) { transition: none; }
}
.about__logo { max-width: 440px; width: 100%; justify-self: center; }
@media (max-width: 40rem) { .hero .about__logo { width: 180px; max-width: 55%; justify-self: start; } }