/* Self-hosted webfonts (variable, latin + latin-ext). The woff2 files were taken from the
   Google Fonts CSS API (css2?family=Archivo:wght@500..700 / Nunito+Sans:wght@400..700, Chrome
   user agent) and copied into assets/fonts/, so no third-party request is on the critical path. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Cleanworx brand stylesheet
   Type: Archivo (headings, a grotesque with the brochure's straight-sided caps) + Nunito Sans (text)
   Colour: logo blue #00A0D8 / green #80B840 as accents, navy ink for text,
   white and cool greys for surfaces. Blue/green never used as small text on white.
   Artwork: the supplied hero photo (images/hero-photo*.webp) and an inline-SVG bubble band (src/templates/bubbles.mjs).
   ========================================================================== */
:root {
  --ink: #0F2A3D;
  --ink-900: #0B1F2E;
  --ink-800: #12303F;
  --ink-700: #1E4257;
  --blue: #00A0D8;
  --blue-700: #0077A8;
  --blue-800: #005F87;
  --blue-50: #E6F6FC;
  --blue-100: #BFE6F5;
  --green: #80B840;
  --green-700: #5C8F1F;
  --green-800: #4A751A;
  --green-50: #EEF6E3;
  --green-100: #D7E8BE;
  --grey-50: #F5F8FA;
  --grey-100: #EDF1F4;
  --grey-200: #DCE3E9;
  --grey-300: #C3CDD6;
  --grey-500: #5B6B78;
  --grey-700: #34495A;
  --white: #fff;
  --warn: #B45309;
  --warn-50: #FEF6E7;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-text: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --radius: 6px; --radius-lg: 8px; --radius-btn: 8px;
  --container: 1240px;
  --shadow: 0 1px 2px rgba(15,42,61,.05), 0 10px 28px -14px rgba(15,42,61,.22);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Anchor targets clear the sticky header; category sections also clear the sticky sub-nav (see .cat-section) */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
body {
  margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--white); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-800); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }
address { font-style: normal; }
code, .sku { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--blue-800); outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
.footer :focus-visible, .utility :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 5px rgba(15,42,61,.65); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 1000; background: var(--ink); color: var(--white); padding: 10px 16px; font-weight: 700; border-radius: 0 0 var(--radius) var(--radius); }
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width: 900px) { .container { padding: 0 var(--s-6); } }

.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---- Typography helpers ---- */
/* .eyebrow is used once: the category name above a product title on detail pages. */
.eyebrow { font-family: var(--font-text); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; color: var(--blue-700); margin: 0 0 var(--s-3); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.section-title { font-size: clamp(28px, 3.2vw, 38px); }
.lead { font-size: 18px; color: var(--grey-700); max-width: 62ch; }
.muted { color: var(--grey-500); }
.t-right { text-align: right; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--blue-700); text-decoration: none; min-height: 44px; }
.text-link:hover { color: var(--ink); text-decoration: underline; }
/* The brochure's spec line: a small grey label, then the sizes */
.spec-label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--grey-500); margin-right: 4px; }

.section { padding: var(--s-8) 0; }
@media (min-width: 900px) { .section { padding: var(--s-9) 0; } }
.section--grey { background: var(--grey-50); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); }
.section-head .lead { margin: var(--s-3) 0 0; }
@media (max-width: 560px) { .section-head__right { width: 100%; } .section-head__right .btn { width: 100%; } }

/* ---- Buttons (sentence case, 8px corners) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: var(--radius-btn); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0;
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn--sm { min-height: 40px; padding: 7px 16px; font-size: 15px; }
.btn--lg { min-height: 52px; padding: 12px 28px; font-size: 17px; }
.btn--block { width: 100%; }
.btn--green { background: var(--green); color: var(--ink-900); border-color: var(--green); }
.btn--green:hover { background: #8fc74c; color: var(--ink-900); }
.btn--blue { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
.btn--blue:hover { background: var(--blue-800); color: var(--white); }
.btn--outline-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: var(--white); }
.btn .ico { width: 1.05em; height: 1.05em; }

/* ---- Utility bar ---- */
.utility { background: var(--ink-900); color: #C9D6E0; font-size: 14px; }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 40px; }
.utility__note { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility__actions { display: flex; align-items: center; gap: var(--s-5); flex: 0 0 auto; margin-left: auto; }
.utility a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.utility__phone strong { color: var(--green); font-weight: 700; letter-spacing: .01em; }
.utility__quote { font-weight: 700; font-size: 14px; color: #9BD9F1 !important; }
.utility a:hover { text-decoration: underline; }
@media (max-width: 720px) { .utility__note { display: none; } .utility__quote { display: none !important; } .utility__actions { margin-left: 0; } .utility__inner { justify-content: center; } }

/* ---- Header ---- */
.header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--grey-200); transition: box-shadow .2s; }
.header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(15,42,61,.3); }
.header__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.header__logo img { width: 164px; height: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--s-1); list-style: none; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.nav__link:hover { color: var(--blue-700); background: var(--grey-50); }
.nav__link[aria-current="page"] { background: var(--blue-50); color: var(--blue-800); box-shadow: inset 0 -3px 0 var(--blue); }
.menu-toggle { display: none; margin-left: auto; min-width: 48px; height: 48px; padding: 0 12px 0 10px; background: none; border: 2px solid var(--grey-200); border-radius: var(--radius-btn); cursor: pointer; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.menu-toggle__bars { display: flex; flex-direction: column; justify-content: center; gap: 4.5px; width: 22px; }
.menu-toggle__bar { width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; border-top: 1px solid var(--grey-200); background: var(--white); }
.mobile-menu__list { list-style: none; padding: var(--s-2) var(--s-5); }
.mobile-menu__link { display: flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--grey-100); }
.mobile-menu__link[aria-current="page"] { color: var(--blue-700); }
.mobile-menu__actions { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); }
@media (max-width: 899px) {
  .nav, .header__cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__logo img { width: 140px; }
  .mobile-menu.is-open { display: block; }
  html:not(.js) .mobile-menu { display: block; }   /* JS-off fallback: always show the menu */
  html:not(.js) .menu-toggle { display: none; }
}
@media (min-width: 900px) and (max-width: 1080px) { .nav__link { font-size: 15.5px; padding: 0 10px; } }

/* ---- Hero (home): white ground, the photo flush against the right edge, and a band of soap bubbles (the
   three bubbles from the "o" of the wordmark, repeated at many sizes) rising along the seam between the
   hero and the Signature Collection. The band is inline SVG at a fixed pixel size, anchored bottom-left and
   clipped by its own wrapper, so the bubbles stay the same size on every screen and simply run further
   right on wide ones. It hangs 56px below the hero, into the top padding of the next section. ---- */
.hero { position: relative; background: var(--white); }
.hero__bubbles { position: absolute; left: 0; right: 0; bottom: -56px; height: 270px; overflow: hidden; pointer-events: none; z-index: 0; }
.hero__bubbles-svg { display: block; position: absolute; left: 0; bottom: 0; width: 3000px; height: 270px; max-width: none; }
.bb { transform-box: fill-box; transform-origin: center; }
.bb-cyan { color: #00B8F0; }
.bb-blue { color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .bb-d1 { animation: bob 5.6s ease-in-out -1.2s infinite alternate; }
  .bb-d2 { animation: bob 7.1s ease-in-out -3.9s infinite alternate; }
  .bb-d3 { animation: bob 6.3s ease-in-out -2.5s infinite alternate; }
  .bb-d4 { animation: bob 8.4s ease-in-out -0.6s infinite alternate; }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Hero photo: fills the hero height; on wide viewports it also grows to at least half the width so the
   spray-bottle hand on its left stays in frame (edges are pre-feathered into its alpha). */
.hero__figure { position: absolute; right: 0; bottom: 0; height: 100%; width: 52vw; max-width: none; object-fit: cover; object-position: left bottom; }
.hero__inner { position: relative; z-index: 1; min-height: clamp(580px, 49vw, 720px); display: flex; align-items: flex-start; padding-top: var(--s-7); padding-bottom: 210px; } /* bottom padding clears the bubble band */
.hero__copy { max-width: 50%; }
.hero__title { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.04; margin-bottom: var(--s-5); max-width: 24ch; }
.hero__lead { font-size: 19px; color: var(--ink); max-width: 56ch; margin-bottom: var(--s-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero__facts { font-size: 15.5px; color: var(--grey-700); max-width: 56ch; margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--grey-200); }
@media (max-width: 1199px) { .hero__copy { max-width: 52%; } .hero__inner { min-height: 620px; } }
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; }
  .hero__art { position: relative; inset: auto; order: -1; height: clamp(260px, 72vw, 320px); overflow: hidden; }
  .hero__figure { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; object-fit: cover; object-position: right bottom; }
  .hero__bubbles { bottom: -40px; height: 190px; }
  .hero__bubbles-svg { transform: scale(.7); transform-origin: left bottom; }
  .hero__inner { min-height: 0; display: block; padding-top: var(--s-5); padding-bottom: 165px; }
  .hero__copy { max-width: none; }
  .hero__title { max-width: none; font-size: clamp(30px, 8vw, 40px); }
  .hero__lead { font-size: 17px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---- Category bands (home) ---- */
.cat-bands { list-style: none; border-top: 2px solid var(--ink); }
.cat-band__link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--grey-200); text-decoration: none; color: var(--ink); transition: background .15s, padding .15s; }
.cat-band__link:hover { background: var(--grey-50); box-shadow: inset 6px 0 0 var(--green); padding-left: var(--s-3); }
.cat-band__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; }
.cat-band__blurb { display: block; color: var(--grey-500); font-size: 15px; max-width: 60ch; margin-top: 4px; }
.cat-band__thumbs { display: flex; gap: 6px; }
.cat-band__thumbs img { width: 64px; height: 64px; object-fit: contain; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 4px; }
.cat-band__count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--blue-700); white-space: nowrap; }
.cat-band__link:hover .cat-band__count { color: var(--ink); }
.cat-bands__all { margin: var(--s-4) 0 0; }
.cat-bands__all a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; text-decoration: none; min-height: 44px; }
.cat-bands__all a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .cat-band__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text thumbs" "count count"; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-4) 0; }
  .cat-band__text { grid-area: text; }
  .cat-band__thumbs { grid-area: thumbs; flex-direction: column; }
  .cat-band__thumbs img:not(:first-child) { display: none; }
  .cat-band__count { grid-area: count; justify-self: start; }
  .cat-band__name { font-size: 20px; }
  .cat-band__blurb { font-size: 14px; }
  .cat-band__thumbs img { width: 56px; height: 56px; }
}

/* ---- Grids & product cards ---- */
.grid { display: grid; gap: var(--s-4); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid--5, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid--5, .grid--4 { grid-template-columns: 1fr; gap: var(--s-3); } }

.card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.card:hover { box-shadow: var(--shadow); border-color: var(--grey-300); }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--white); border-bottom: 1px solid var(--grey-100); }
.card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.card__media .ph { position: absolute; inset: 0; }
.card__badge { position: absolute; left: 8px; top: 8px; width: 64px; padding: 4px; background: var(--white); border: 1px solid var(--grey-200); border-radius: 4px; }
.card__badge img { width: 100%; height: auto; }
.card__flag { position: absolute; right: 8px; top: 8px; font-family: var(--font-text); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--white); padding: 3px 8px; border-radius: 3px; }
.card__body { padding: var(--s-4) var(--s-4) var(--s-3); flex: 1; display: flex; flex-direction: column; }
.card__cat { font-size: 12px; font-weight: 700; color: var(--grey-500); margin: 0 0 4px; }
.card__title { font-size: 19px; line-height: 1.2; margin-bottom: 6px; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--blue-700); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__short { font-size: 14px; color: var(--grey-700); margin: 0 0 var(--s-3); flex: 1; }
.card__meta { display: grid; gap: 3px; }
.card__sizes { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.card__codes { margin: 0; font-size: 12.5px; color: var(--grey-500); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .01em; }
.card__codes .sep { color: var(--grey-300); }
.code-reg { color: var(--blue-800); }
.card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px var(--s-3); padding: 10px var(--s-4); border-top: 1px solid var(--grey-100); background: var(--grey-50); position: relative; z-index: 1; }
.card__link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--blue-700); text-decoration: none; min-height: 32px; }
.card__link:hover { color: var(--ink); }
.card__sheet { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--grey-500); text-decoration: none; min-height: 32px; }
.card__sheet:hover { color: var(--ink); text-decoration: underline; }
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--grey-50) 0 12px, var(--grey-100) 12px 24px); color: var(--grey-500); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ph img { width: 40%; opacity: .5; }

/* Compact row cards on phones: photo left, details right, keeps long lists scannable */
@media (max-width: 480px) {
  .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "media body" "foot foot"; }
  .card__media { grid-area: media; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--grey-100); min-height: 150px; }
  .card__media > img { padding: 8px; }
  .card__badge { display: none; } /* the photo already carries the brand mark; keeps the flag clear */
  .card__flag { font-size: 10px; padding: 2px 7px; right: auto; left: 6px; top: 6px; }
  .card__body { grid-area: body; padding: var(--s-3) var(--s-3) var(--s-2); }
  .card__foot { grid-area: foot; }
  .card__title { font-size: 17px; }
  .card__short { font-size: 13.5px; margin-bottom: var(--s-2); }
  .card--wide { grid-column: span 1; }
}

/* Wide card for sparse categories (1 or 2 products) */
@media (min-width: 481px) {
  .card--wide { grid-column: span 2; display: grid; grid-template-columns: 38% 1fr; grid-template-areas: "media body" "media foot"; }
  .card--wide .card__media { grid-area: media; aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--grey-100); }
  .card--wide .card__body { grid-area: body; padding: var(--s-5); }
  .card--wide .card__foot { grid-area: foot; }
  .card--wide .card__title { font-size: 23px; }
  .card--wide .card__short { font-size: 15px; }
}
@media (min-width: 481px) and (max-width: 560px) { .card--wide { grid-column: span 1; grid-template-columns: 1fr; grid-template-areas: "media" "body" "foot"; } .card--wide .card__media { aspect-ratio: 4 / 3; min-height: 0; border-right: 0; border-bottom: 1px solid var(--grey-100); } }

/* ---- Why buy from us: three paragraphs beside one product photograph ---- */

/* ---- Signature Collection badge wall (brochure treatment: dotted rule either side, badges loose on white) ---- */
.collection { padding-top: var(--s-9); padding-bottom: var(--s-7); } /* extra top room: the hero bubbles hang into it */
.collection__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-6); }
.collection__title { display: flex; align-items: center; gap: var(--s-4); font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-700); margin-bottom: var(--s-3); }
.collection__title::before, .collection__title::after { content: ""; flex: 1; border-top: 3px dotted var(--grey-300); }
.collection__head .lead { margin-inline: auto; font-size: 16px; }
.badge-wall { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.badge-wall a { position: relative; display: block; aspect-ratio: 5 / 3; border-radius: var(--radius); transition: background .15s; }
.badge-wall a:hover { background: var(--grey-50); }
.badge-wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px 18px; }
@media (max-width: 860px) { .badge-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .badge-wall { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } .badge-wall img { padding: 8px; } .collection__title { letter-spacing: .14em; } .collection__title::before, .collection__title::after { display: none; } }

/* ---- Downloads teaser ---- */
.downloads-teaser__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.dl-list { list-style: none; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.dl-list li + li { border-top: 1px solid var(--grey-100); }
.dl-list a { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s-3); padding: 14px var(--s-4); min-height: 52px; color: var(--ink); text-decoration: none; font-weight: 700; }
.dl-list a:hover { background: var(--blue-50); color: var(--blue-800); }
.dl-list .ico { color: var(--blue-700); }
.dl-list small { color: var(--grey-500); font-weight: 600; white-space: nowrap; }
.dl-list__more a { grid-template-columns: 1fr auto; color: var(--blue-700); background: var(--grey-50); }
@media (max-width: 860px) { .downloads-teaser__inner { grid-template-columns: minmax(0,1fr); gap: var(--s-6); } }
@media (max-width: 480px) {
  .dl-list a { grid-template-columns: 24px 1fr; }
  .dl-list small { grid-column: 2; }
  /* The "N more" row has no file icon, so keep its two-column layout here too;
     inheriting the 24px icon column squeezed the label to one word per line. */
  .dl-list__more a { grid-template-columns: 1fr auto; }
}

/* ---- Distributor block (home only): who to call, on white above the footer ---- */
.distributor { border-top: 3px solid var(--ink); padding: var(--s-8) 0; }
.distributor__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--s-7); align-items: start; }
.distributor__copy .lead { margin: var(--s-3) 0 var(--s-5); }
.distributor__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.distributor__address { font-size: 16px; line-height: 1.7; padding-left: var(--s-5); border-left: 1px solid var(--grey-200); }
.distributor__address strong { font-family: var(--font-display); font-size: 18px; }
@media (max-width: 860px) { .distributor__inner { grid-template-columns: minmax(0,1fr); gap: var(--s-5); } .distributor__address { padding-left: 0; border-left: 0; } }

/* ---- Footer ---- */
.footer { background: var(--ink-900); color: #B7C6D2; font-size: 15px; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { color: var(--green); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--s-7); padding: var(--s-8) var(--s-6); }
.footer__brand img { width: 190px; margin-bottom: var(--s-4); }
.footer__brand p { max-width: 44ch; }
.footer__mfg { font-size: 14px; color: #B7C6D2; }
.footer__heading { font-size: 14px; font-family: var(--font-display); font-weight: 600; color: var(--green); margin-bottom: var(--s-3); }
.footer__col ul { list-style: none; display: grid; gap: 8px; }
.footer__col li a { display: inline-block; padding: 2px 0; }
.footer__hours { color: #8CA1B1; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.footer__bottom p { margin: 0; }
.footer__credit { display: inline-block; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55); }
.footer__credit a { color: inherit; }
.footer__credit a:hover { color: var(--white); }
@media (max-width: 480px) { .footer__credit { display: block; margin: 6px 0 0; padding-left: 0; border-left: 0; } }
.footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer .footer__order { display: inline-flex; align-items: center; gap: 6px; }
.footer .footer__order svg { display: inline-block; width: 16px; height: 16px; flex: none; transition: transform .15s; }
.footer .footer__order:hover svg { transform: translateX(3px); }
@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); padding-inline: var(--s-5); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0,1fr); } }

/* ---- Page hero (inner pages) ---- */
.page-hero { background: var(--grey-50); padding: var(--s-6) 0 var(--s-7); border-bottom: 1px solid var(--grey-200); }
.page-hero--slim { padding: var(--s-3) 0; }
.page-hero__title { font-size: clamp(30px, 4vw, 46px); max-width: 22ch; margin-bottom: var(--s-4); }
.page-hero__lead { font-size: 18px; color: var(--grey-700); max-width: 64ch; margin: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--grey-500); margin-bottom: var(--s-4); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--grey-300); }
.crumbs a { color: var(--grey-700); }
.crumbs a:hover { color: var(--blue-800); }
.page-hero--slim .crumbs ol { margin-bottom: 0; }

/* ---- Touch targets ----
   On coarse pointers every inline control gets a 44px hit area. Desktop keeps its
   tighter rhythm; only the tappable box grows, not the type. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; padding: 9px 18px; }
  .utility a { min-height: 44px; }
  .card__link, .card__sheet { min-height: 44px; }
  .footer__col a, .footer__bottom a, .distributor__address a { min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs ol { gap: 0 8px; }
  .dl-list a, .sheet-list a { min-height: 44px; }
}

/* ---- Products subnav ---- */
.subnav { position: sticky; top: var(--header-h); z-index: 90; background: var(--white); border-bottom: 1px solid var(--grey-200); box-shadow: 0 6px 16px -14px rgba(15,42,61,.4); }
.subnav__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__list { display: flex; gap: 4px; list-style: none; min-width: max-content; padding: 6px 0; }
.subnav__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--grey-700); text-decoration: none; border-radius: var(--radius); white-space: nowrap; }
.subnav__link:hover { color: var(--ink); background: var(--grey-50); }
.subnav__link.is-active { color: var(--ink-900); background: var(--green-50); box-shadow: inset 0 -3px 0 var(--green); }
.subnav__count { font-family: var(--font-text); font-size: 12px; font-weight: 700; color: var(--grey-500); }
.subnav__link.is-active .subnav__count { color: var(--green-800); }
.subnav__short { display: none; }
/* On phones the category links are the navigation that matters: the header scrolls away and the sub-nav sticks alone */
@media (max-width: 899px) { .page-products .header { position: static; } .subnav { top: 0; } }
@media (max-width: 640px) { .subnav__full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .subnav__short { display: inline; } .subnav__link { padding: 0 11px; gap: 6px; font-size: 15px; } }

/* ---- Catalogue sections (brochure convention: title, coloured count, dotted rule) ---- */
.cat-section { padding: var(--s-7) 0; scroll-margin-top: 150px; } /* header 76 + sub-nav 57 + breathing room */
@media (max-width: 899px) { .cat-section { scroll-margin-top: 72px; } } /* header scrolls away on phones; only the sub-nav sticks */
.cat-section:nth-child(even) { background: var(--grey-50); }
.cat-section__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-5); align-items: end; margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 3px dotted var(--grey-300); }
.cat-section__title { font-size: clamp(24px, 3vw, 32px); }
.cat-section__blurb { margin: 4px 0 0; color: var(--grey-500); max-width: 70ch; }
.cat-section__count { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--blue-700); white-space: nowrap; }
@media (max-width: 720px) { .cat-section__head { grid-template-columns: 1fr; align-items: start; } }
/* One plain sentence after the last category: where to get an SDS */
.catalogue__note { max-width: 72ch; margin: 0; padding: var(--s-4) 0 var(--s-8); color: var(--grey-700); border-top: 3px dotted var(--grey-300); padding-top: var(--s-6); }

/* ---- Notices ---- */
.notice { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4); padding: var(--s-5); background: var(--white); border: 1px solid var(--grey-200); border-left: 5px solid var(--blue-700); border-radius: var(--radius); }
.notice--single { max-width: 720px; }
.notice .ico { width: 32px; height: 32px; color: var(--blue-700); stroke-width: 1.7; }
.notice--warn { border-left-color: var(--warn); background: var(--warn-50); border-color: #F3DDB6; }
.notice--warn .ico { color: var(--warn); }
.notice__title { font-size: 20px; margin-bottom: 6px; }
.notice p:last-child { margin: 0; }
@media (max-width: 480px) { .notice { grid-template-columns: 1fr; padding: var(--s-4); } .notice .ico { display: none; } }

/* ---- Product detail page ---- */
.pdp__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-6); padding-bottom: var(--s-7); }
.gallery__main { margin: 0; position: relative; aspect-ratio: 1; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery__main img.gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; padding: 28px; }
.gallery__img--small { padding: 18%; }
.gallery__main--empty .ph { border-radius: var(--radius-lg); }
.gallery__badge { position: absolute; left: 12px; top: 12px; width: 110px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 6px; }
.gallery__thumbs { list-style: none; display: flex; gap: 8px; margin-top: var(--s-3); flex-wrap: wrap; }
.gallery__thumb { display: block; width: 76px; height: 76px; background: var(--white); border: 2px solid var(--grey-200); border-radius: var(--radius); padding: 4px; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb:hover { border-color: var(--grey-300); }
.gallery__thumb.is-active { border-color: var(--blue-700); }
.pdp__title { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: var(--s-3); }
.pdp__short { font-size: 19px; color: var(--grey-700); margin-bottom: var(--s-4); }
.tag { display: inline-block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--blue-50); color: var(--blue-800); vertical-align: middle; }
.din-banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin: 0 0 var(--s-4); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); color: var(--blue-800); font-weight: 700; font-size: 14.5px; }
.din-banner .ico { width: 22px; height: 22px; color: var(--blue-700); }
.pdp__specs { margin: 0 0 var(--s-5); border-top: 1px solid var(--grey-200); }
.pdp__specs > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--grey-200); font-size: 15px; }
.pdp__specs dt { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-500); font-size: 12.5px; padding-top: 3px; }
.pdp__specs dd { margin: 0; }
.pdp__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.sheet-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px dashed var(--grey-300); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; max-width: 100%; }
.sheet-btn:hover { border-color: var(--blue-700); background: var(--blue-50); }
.sheet-btn .ico { width: 26px; height: 26px; color: var(--blue-700); }
.sheet-btn strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.sheet-btn small { color: var(--grey-500); }
.pdp__nosheet { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--grey-500); }
.pdp__nosheet .ico { flex: none; margin-top: 2px; }
.pdp__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); padding-bottom: var(--s-8); align-items: start; }
.pdp__main, .pdp__aside, .pdp__summary, .pdp__gallery { min-width: 0; }
.pdp__section { margin-bottom: var(--s-6); }
.pdp__section h2 { font-size: 24px; margin-bottom: var(--s-3); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.pdp__section p { max-width: 70ch; }
.pdp__safety { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--warn); background: var(--warn-50); padding: 10px 12px; border-radius: var(--radius); }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list .ico { color: var(--green-700); margin-top: 3px; stroke-width: 2.5; }
.pdp__aside { position: sticky; top: calc(var(--header-h) + 16px); }
.order-panel { background: var(--grey-50); border: 1px solid var(--grey-200); border-top: 5px solid var(--green); border-radius: var(--radius-lg); padding: var(--s-5); }
.order-panel__title { font-size: 22px; margin-bottom: var(--s-4); }
.order-panel__how { margin-bottom: var(--s-5); }
.order-panel__how p { margin: 0 0 var(--s-3); line-height: 1.6; }
.order-panel__how p:last-child { margin-bottom: 0; }
.order-panel__how a { font-weight: 700; overflow-wrap: break-word; }
/* Keep the trailing "opens in a new tab" glyph on the last line of its link rather than
   letting it drop to a line of its own. */
.order-panel__how a .ico { display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -1px; }
.order-panel__note { font-size: 13px; color: var(--grey-500); margin: var(--s-3) 0 0; }
@media (max-width: 1023px) { .pdp__body { grid-template-columns: minmax(0,1fr); } .pdp__aside { position: static; } }
@media (max-width: 899px) { .pdp__top { grid-template-columns: minmax(0,1fr); gap: var(--s-5); } .pdp__specs > div { grid-template-columns: 100px 1fr; } }
@media (max-width: 480px) { .pdp__actions .btn { flex: 1 1 100%; } .sheet-btn { width: 100%; } .gallery__thumb { width: 64px; height: 64px; } }

/* ---- Tables (stack into labelled rows on phones) ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grey-100); }
.table th { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--grey-500); background: var(--grey-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FAFCFD; }
.sku { font-size: 14px; font-weight: 600; background: var(--grey-100); padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.sku--din { background: var(--blue-50); color: var(--blue-800); }
.table-link { white-space: nowrap; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.table-note { font-size: 13px; color: var(--grey-500); margin: 8px 0 0; }
.table-sub { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
@media (min-width: 641px) { .table--variants, .table--downloads { min-width: 560px; } }
@media (max-width: 640px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--grey-200); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 4px 14px; border: 0; }
  .table--stack td::before { content: attr(data-label); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; color: var(--grey-500); padding-top: 2px; }
  .table--stack td.t-right { text-align: left; }
  .table--stack .sku { white-space: normal; }
  .table--downloads td[data-label="Type"] { display: none; } /* every document is a PDF; the button says so */
  .table--downloads td[data-label="Download"] { grid-template-columns: 1fr; }
  .table--downloads td[data-label="Download"]::before { display: none; }
  .table--downloads td[data-label="Download"] .btn { width: 100%; }
}

/* ---- Resources: the brochure card shows the real cover, page 2 peeking out behind it ---- */
.brochure-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-7); align-items: center; }
.brochure-card__art { position: relative; display: block; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 600 / 776; }
.brochure-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--grey-300); background: var(--white); box-shadow: 0 12px 30px -16px rgba(15,42,61,.45); }
.brochure-card__page2 { transform: rotate(4deg) translate(22px, 6px); opacity: .95; }
.brochure-card__cover { transform: rotate(-1.5deg); }
.brochure-card__art:hover .brochure-card__cover { transform: rotate(-1.5deg) translateY(-3px); }
.brochure-card__title { font-size: clamp(24px, 3vw, 34px); margin-bottom: var(--s-3); }
.brochure-card__meta { color: var(--grey-500); font-size: 14px; font-weight: 700; margin-bottom: var(--s-4); }
@media (max-width: 760px) { .brochure-card { grid-template-columns: minmax(0,1fr); gap: var(--s-6); } .brochure-card__art { width: min(100%, 260px); } }

/* ---- Contact ---- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-6); align-items: start; }
.info-card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.info-card__kicker { font-size: 15px; color: var(--grey-500); margin: 0 0 4px; }
.contact__sds { font-size: 15px; color: var(--grey-700); margin: var(--s-4) var(--s-2) 0; line-height: 1.55; }
.info-card__title { font-size: 24px; margin-bottom: var(--s-4); }
.info-block { margin: 0 0 var(--s-4); line-height: 1.7; }
.info-block:last-child { margin-bottom: 0; }
.info-block a { font-weight: 700; overflow-wrap: break-word; }
.info-block a .ico { display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -1px; }
.form-card { background: var(--white); border: 1px solid var(--grey-200); border-top: 6px solid var(--green); border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow); }
.form-card__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s-2); }
.form-card__lead { color: var(--grey-700); margin-bottom: var(--s-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field label { font-weight: 700; font-size: 15px; }
.field__hint { margin: 0; font-size: 14px; color: var(--grey-500); }
.req { color: var(--warn); }
.opt { color: var(--grey-500); font-weight: 400; font-size: 14px; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--white); border: 2px solid var(--grey-500); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field textarea { resize: vertical; min-height: 140px; }
.field__error { margin-top: 6px; font-size: 14px; font-weight: 600; color: #B3261E; display: flex; align-items: flex-start; gap: 6px; }
.field__error::before { content: "\26A0"; font-weight: 400; }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue-700); outline: none; box-shadow: 0 0 0 3px rgba(0,160,216,.28); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C2410C; }
.field--hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field--turnstile { margin-bottom: var(--s-4); }
.field--turnstile .cf-turnstile { min-height: 65px; }
.form__legal { font-size: 13px; color: var(--grey-500); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form__alt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.form__status { margin-top: var(--s-4); }
.form__status:empty { display: none; }
.form__status .alert, .form-status { padding: 14px 16px; border-radius: var(--radius); border: 1px solid; font-size: 15px; }
.form__status .alert p { margin: 0; }
.form__status .alert p + p { margin-top: 6px; }
.alert--ok, .form-status--ok { background: var(--green-50); border-color: #B9D98E; color: var(--green-800); }
.alert--err, .form-status--err { background: var(--warn-50); border-color: #F3DDB6; color: #7C2D12; }
.form-status--err a { color: #7C2D12; font-weight: 700; }
.alert--info { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); }
/* No-JS form states: the Function 303-redirects to /contact#sent|#error|#not-configured */
.form-status { display: none; margin: 0 0 var(--s-4); }
.form-status:target { display: block; }
.btn[disabled] { opacity: .6; cursor: progress; }
/* On desktop the single info card follows the reader down the taller form instead of leaving white space beside it */
@media (min-width: 900px) { .contact__info { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 899px) { .contact__grid { grid-template-columns: minmax(0,1fr); } .contact__form { order: -1; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; gap: 0; } .form-card { padding: var(--s-5) var(--s-4); } .form__actions .btn { width: 100%; } }

/* ---- 404 ---- */
.notfound__inner { max-width: 760px; text-align: center; padding-block: var(--s-6); }
.notfound__title { font-size: clamp(28px, 5vw, 46px); margin-bottom: var(--s-3); }
.notfound__inner .lead { margin-inline: auto; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin: var(--s-5) 0; }
.notfound__cats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.notfound__cats a { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; font-weight: 700; }

/* ---- Fade-in (progressive) ---- */
.fade-in { opacity: 1; transform: none; }
.js .fade-in { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .fade-in { opacity: 1; transform: none; }
}

@media print {
  .utility, .header, .footer, .subnav, .btn, .hero__art, .hero__bubbles { display: none !important; }
  body { color: #000; }
}