/* Pondasi Theme — main stylesheet
   Sections: tokens, base, buttons, masthead, page hero, item index, item section + box,
   page designs, design preview bar, home, sections, about, projects, contact, catalogue,
   footer, quotation dialog, photo viewer.

   Colours, type and motifs are tokens (the first block). The values here are neutral; a child theme
   sets the site's own in its style.css, which loads after this file. */

/* ---------- Tokens ---------- */
:root {
  /* the accent: --accent-mark for lines and marks, --accent behind white text (dark enough for
     WCAG AA), --accent-dark on hover, --accent-on-dark for text on dark bars */
  --accent-mark: #1d64c8;
  --accent: #1a5bb5;
  --accent-dark: #144a94;
  --accent-on-dark: #9cc4ff;
  --second: #334155;
  --second-light: #52637a;
  --second-pale: #e7ebf0;
  --ink: #1f2328;
  --ink-soft: #3a3f46;
  --ink-deep: #16181c;
  --grey: #8a939e;
  --grey-light: #d5dae0;
  --mist: #eef1f4;
  --paper: #ffffff;
  /* tints of the second colour: a page background, text on the second colour, soft lines */
  --second-tint-1: #f5f7fa;
  --second-tint-2: #e4e9ef;
  --second-tint-3: #cbd3dd;
  --second-tint-4: #c3ccd7;
  --header-gradient: linear-gradient(100deg, var(--paper) 0%, var(--paper) 20%, var(--grey-light) 40%, var(--ink-soft) 64%, var(--ink) 100%);

  --text: #22252a;
  --muted: #5a616b;
  --rule: rgba(35, 38, 43, 0.14);
  --rule-on-dark: rgba(213, 218, 224, 0.2);
  --shadow: 0 30px 70px -28px rgba(15, 16, 19, 0.5);

  --font-display: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-ui: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --masthead-h: 80px;
  --index-h: 50px;
  /* how far sticky things sit below the top: the header height, 0 while a hiding header is away */
  --masthead-offset: var(--masthead-h);

  /* the header's colours; each header style (html[data-header]) sets its own, see "Header styles" */
  --masthead-bg: var(--header-gradient);
  --nav-bg: var(--ink);
  --nav-text: #fff;
  --nav-hover-bg: var(--second);
  --nav-hover-text: #fff;
  --nav-current-bg: var(--accent);
  --nav-current-text: #fff;
  --nav-current-line: transparent;
  --sub-bg: var(--ink);
  --sub-text: #fff;
  --sub-muted: #b8bec6;
  --sub-hover-bg: var(--second);
  --sub-hover-text: #fff;
  --lang-line: rgba(255, 255, 255, 0.35);
  --lang-text: #fff;
  --lang-current-bg: #fff;
  --lang-current-text: var(--ink);
  --logo-plate: transparent;
}

@media (max-width: 1099px) {
  :root {
    --masthead-h: 64px;
    --index-h: 46px;
    /* keep the logo on white when the bar is narrow */
    --header-gradient: linear-gradient(100deg, var(--paper) 0%, var(--paper) 46%, var(--grey-light) 68%, var(--ink-soft) 90%, var(--ink) 100%);
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--masthead-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 96%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* headings: Archivo narrowed and heavy, the way stencilled lettering reads on site boards */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--second);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--second-light);
  outline-offset: 3px;
  border-radius: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* small label above a heading: mono, spaced, with a short red rule */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--grey-light);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 3px;
  background: var(--accent-mark);
}

.kicker--dark {
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--large {
  min-height: 54px;
  padding: 0 28px;
  font-size: 1rem;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-dark);
}

.btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* on photos and dark bands */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn__meta {
  font-weight: 400;
  opacity: 0.75;
}

/* ---------- Masthead: sticky main menu ----------
   Logo on white; the bar darkens to the dark colour behind the menu, the accent quotation button and the
   language switch. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--masthead-bg);
  box-shadow: 0 1px 0 rgba(35, 38, 43, 0.2);
  transition: transform 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--masthead-h);
  transition: height 0.2s ease;
}

.masthead__logo {
  flex: none;
  display: block;
  padding: 0;
  background: var(--logo-plate);
  border-radius: 4px;
}

.masthead__logo img {
  width: auto;
  height: 60px;
  transition: height 0.2s ease;
}

.masthead__menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: 14px;
}

.primary-nav > ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--nav-bg);
  border-radius: 4px;
}

.primary-nav > ul > li {
  position: relative;
}

.primary-nav > ul > li:first-child > a {
  border-radius: 4px 0 0 4px;
}

.primary-nav > ul > li:last-child > a {
  border-radius: 0 4px 4px 0;
}

.primary-nav > ul > li > a,
.primary-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 clamp(12px, 1.3vw, 18px);
  border: 0;
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  font-size: 0.96875rem;
  font-weight: 600;
  font-stretch: 90%;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-nav > ul > li > a:hover,
.primary-nav__toggle:hover,
.primary-nav__toggle[aria-expanded="true"] {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

/* "Services" and "Products" are a link plus a small arrow button: the link navigates, the arrow
   opens the list. They read as one item, so they light up together. */
.has-submenu {
  display: flex;
}

.has-submenu > a {
  padding-right: 4px;
}

.has-submenu > .primary-nav__toggle {
  padding: 0 12px 0 6px;
}

.has-submenu:hover > a,
.has-submenu:hover > .primary-nav__toggle,
.has-submenu.is-open > a {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

.primary-nav > ul > li > a[aria-current="page"],
.has-submenu:has([aria-current="page"]) > a,
.has-submenu:has([aria-current="page"]) > .primary-nav__toggle {
  /* the underline is a background layer: an inset box-shadow leaves a hairline at the side in Chromium */
  background: linear-gradient(var(--nav-current-line), var(--nav-current-line)) bottom / 100% 3px no-repeat, var(--nav-current-bg);
  color: var(--nav-current-text);
}

/* chevron drawn with borders, so it follows the text colour */
.primary-nav__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.primary-nav__toggle[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  width: max-content;
  max-width: min(360px, 90vw);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--sub-bg);
  border-top: 3px solid var(--accent-mark);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 24px 40px -18px rgba(15, 16, 19, 0.65);
}

/* invisible bridge so the pointer can travel from the button to the list */
.submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 6px;
}

.has-submenu.is-open > .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 10px 20px;
  color: var(--sub-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.submenu a:hover {
  background: var(--sub-hover-bg);
  color: var(--sub-hover-text);
}

.submenu a[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* the photo, the line under the name and the product list belong to the mega menu only */
.submenu__thumb,
.submenu__meta,
.submenu__items {
  display: none;
}

.masthead__cta {
  white-space: nowrap;
}

.lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--lang-line);
  border-radius: 999px;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--lang-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lang-switch a:hover {
  background: rgba(128, 128, 128, 0.16);
}

.lang-switch a[aria-current="true"] {
  background: var(--lang-current-bg);
  color: var(--lang-current-text);
}

.masthead__toggle {
  display: none;
}

@media (max-width: 1099px) {
  .masthead__bar {
    justify-content: space-between;
  }

  .masthead__logo img {
    height: 48px;
  }

  .masthead__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
  }

  .masthead__toggle-bars,
  .masthead__toggle-bars::before,
  .masthead__toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.18s ease;
  }

  .masthead__toggle-bars {
    position: relative;
  }

  .masthead__toggle-bars::before,
  .masthead__toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .masthead__toggle-bars::before {
    top: -6px;
  }

  .masthead__toggle-bars::after {
    top: 6px;
  }

  .masthead__toggle[aria-expanded="true"] .masthead__toggle-bars {
    background: transparent;
  }

  .masthead__toggle[aria-expanded="true"] .masthead__toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .masthead__toggle[aria-expanded="true"] .masthead__toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .masthead__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    height: auto;
    max-height: calc(100svh - var(--masthead-h));
    overflow-y: auto;
    padding: 4px var(--gutter) 24px;
    background: var(--ink);
    border-top: 3px solid var(--accent-mark);
    box-shadow: 0 24px 40px -24px rgba(15, 16, 19, 0.65);
  }

  .masthead__menu.is-open {
    display: block;
  }

  /* the panel is dark whatever the header style, so its links are light */
  .masthead__menu {
    --nav-bg: transparent;
    --nav-text: #fff;
    --nav-hover-text: var(--accent-on-dark);
    --nav-current-text: var(--accent-on-dark);
    --nav-current-line: transparent;
    --sub-text: #fff;
    --sub-hover-bg: rgba(255, 255, 255, 0.08);
    --sub-hover-text: #fff;
    --lang-line: rgba(255, 255, 255, 0.35);
    --lang-text: #fff;
    --lang-current-bg: #fff;
    --lang-current-text: var(--ink);
  }

  /* on light bars the menu button is dark */
  :is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"].is-scrolled, [data-header="overlay"]:not([data-has-hero])) .masthead__toggle {
    background: var(--ink);
    color: #fff;
  }

  /* the contact bar keeps only the phone on small screens */
  .topbar__contact li:not(:first-child),
  .topbar .lang-switch {
    display: none;
  }

  /* full-screen menu: the panel fills the screen below the bar, links set large */
  [data-mobile-menu="full"] .masthead__menu {
    height: calc(100svh - var(--masthead-h));
    max-height: none;
    padding-top: 12px;
  }

  [data-mobile-menu="full"] .primary-nav > ul > li > a {
    padding: 14px 0;
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 800;
    font-stretch: 72%;
  }

  [data-mobile-menu="full"] .submenu a {
    font-size: 1.0625rem;
  }

  [data-mobile-menu="full"].menu-open {
    overflow: hidden;
  }

  .primary-nav > ul {
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .primary-nav > ul > li {
    border-bottom: 1px solid var(--rule-on-dark);
  }

  .primary-nav > ul > li > a,
  .primary-nav__toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    padding: 15px 0;
    border-radius: 0 !important;
    font-size: 1.0625rem;
  }

  .primary-nav > ul > li > a:hover,
  .primary-nav__toggle:hover,
  .primary-nav__toggle[aria-expanded="true"],
  .primary-nav > ul > li > a[aria-current="page"],
  .has-submenu:hover > a,
  .has-submenu:hover > .primary-nav__toggle,
  .has-submenu.is-open > a,
  .has-submenu:has([aria-current="page"]) > a,
  .has-submenu:has([aria-current="page"]) > .primary-nav__toggle {
    background: transparent;
    color: #fff;
  }

  /* only the page being shown, and the item under a finger or pointer, are marked; an open group is not */
  .primary-nav > ul > li > a:hover,
  .primary-nav > ul > li > a[aria-current="page"],
  .has-submenu:has([aria-current="page"]) > a {
    color: var(--accent-on-dark);
  }

  /* link on the left, arrow button on the right, the list wraps underneath */
  .has-submenu {
    flex-wrap: wrap;
  }

  .has-submenu > a {
    flex: 1;
    width: auto;
  }

  .has-submenu > .primary-nav__toggle {
    flex: none;
    justify-content: center;
    width: 52px;
    padding: 0;
  }

  .submenu {
    flex-basis: 100%;
    position: static;
    width: auto;
    max-width: none;
    padding: 0 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .submenu a {
    padding: 10px 12px 10px 16px;
    border-radius: 3px;
  }

  .masthead__end {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
  }

  .masthead__cta {
    flex: 1 1 220px;
  }
}

/* ---------- Header styles ----------
   One header markup, six arrangements, chosen in Settings > Header and main menu (or
   tried from "Header preview" in the admin bar, or ?header=clean in the address):
     html[data-header]         gradient | clean | dark | twoline | overlay | centered
     html[data-submenu-style]  list | mega
     html[data-mobile-menu]    panel | full
     html[data-header-scroll]  static | shrink | hide   (main.js adds .is-scrolled, .is-header-hidden)
   Most styles only set the colour variables declared in the tokens. */

/* the contact bar belongs to "Two rows" */
.topbar {
  display: none;
  background: var(--ink-deep);
  color: var(--grey-light);
  font-size: 0.84375rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

.topbar a:hover {
  color: #fff;
}

.topbar__label {
  margin-right: 6px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar .lang-switch {
  --lang-line: rgba(255, 255, 255, 0.35);
  --lang-text: #fff;
  --lang-current-bg: #fff;
  --lang-current-text: var(--ink);
}

.topbar .lang-switch a {
  min-height: 26px;
}

/* light bars: clean, two rows, centred, and the transparent header once it turns solid */
:is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"]) {
  --masthead-bg: #fff;
  --nav-bg: transparent;
  --nav-text: var(--ink);
  --nav-hover-bg: transparent;
  --nav-hover-text: var(--second);
  --nav-current-bg: transparent;
  --nav-current-text: var(--ink);
  --nav-current-line: var(--accent-mark);
  --sub-bg: #fff;
  --sub-text: var(--ink);
  --sub-muted: var(--muted);
  --sub-hover-bg: var(--mist);
  --sub-hover-text: var(--second);
  --lang-line: var(--rule);
  --lang-text: var(--ink);
  --lang-current-bg: var(--ink);
  --lang-current-text: #fff;
}

:is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"]) .masthead {
  box-shadow: 0 1px 0 var(--rule);
}

:is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"]) .submenu {
  box-shadow: 0 24px 40px -18px rgba(15, 16, 19, 0.35), 0 0 0 1px var(--rule);
}

/* dark bar: the dark colour, the logo on a white plate */
[data-header="dark"] {
  --masthead-bg: var(--ink);
  --nav-bg: transparent;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-current-bg: transparent;
  --nav-current-line: var(--accent-mark);
  --logo-plate: #fff;
}

[data-header="dark"] .masthead__logo,
[data-header="overlay"][data-has-hero] .masthead__logo {
  padding: 5px 10px;
}

[data-header="dark"] .masthead__logo img,
[data-header="overlay"][data-has-hero] .masthead__logo img {
  height: 50px;
}

/* two rows: the contact bar above scrolls away, the main bar stays */
[data-header="twoline"] .topbar {
  display: block;
}

/* transparent: over the home photo in white, solid white once the visitor scrolls. On pages
   without the big photo it is simply the light bar. */
[data-header="overlay"][data-has-hero]:not(.is-scrolled) {
  --masthead-bg: transparent;
  --nav-text: #fff;
  --nav-hover-text: #fff;
  --nav-hover-bg: rgba(255, 255, 255, 0.12);
  --nav-current-text: #fff;
  --lang-line: rgba(255, 255, 255, 0.45);
  --lang-text: #fff;
  --lang-current-bg: #fff;
  --lang-current-text: var(--ink);
  --logo-plate: #fff;
}

[data-header="overlay"][data-has-hero] .masthead {
  position: fixed;
  left: 0;
  right: 0;
}

[data-header="overlay"][data-has-hero]:not(.is-scrolled) .masthead {
  box-shadow: none;
}

[data-header="overlay"][data-has-hero] .home-hero {
  padding-top: calc(var(--masthead-h) + clamp(40px, 7vw, 96px));
}

@media (min-width: 1100px) {
  /* menu items get a little air between them when they are plain text */
  :is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"], [data-header="dark"]) .primary-nav > ul {
    gap: 2px;
  }

  /* two rows: the language switch lives in the contact bar */
  [data-header="twoline"] .masthead .lang-switch {
    display: none;
  }

  /* centred logo: the logo in the middle of its own row, the menu centred below it, the language
     switch on the left and the quotation button on the right of the logo row */
  [data-header="centered"] {
    --masthead-h: 136px;
  }

  [data-header="centered"] .masthead__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 82px 1fr;
    grid-template-areas: "lang logo cta" "nav nav nav";
    align-items: center;
    gap: 0 24px;
  }

  [data-header="centered"] .masthead__menu,
  [data-header="centered"] .masthead__end {
    display: contents;
  }

  [data-header="centered"] .masthead__logo {
    grid-area: logo;
  }

  [data-header="centered"] .primary-nav {
    grid-area: nav;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--rule);
  }

  [data-header="centered"] .masthead__cta {
    grid-area: cta;
    justify-self: end;
  }

  [data-header="centered"] .masthead .lang-switch {
    grid-area: lang;
    justify-self: start;
  }

  /* mega menu: a wide panel under the whole bar, a photo per entry, a category's products under it */
  [data-submenu-style="mega"] .masthead__bar {
    position: relative;
  }

  [data-submenu-style="mega"] .primary-nav > ul > li.has-submenu {
    position: static;
  }

  [data-submenu-style="mega"] .submenu {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 22px;
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [data-submenu-style="mega"] .has-submenu.is-open > .submenu {
    display: grid;
  }

  [data-submenu-style="mega"] .submenu::before {
    top: -12px;
    height: 12px;
  }

  [data-submenu-style="mega"] .submenu > li {
    min-width: 0;
  }

  [data-submenu-style="mega"] .submenu__link {
    padding: 0;
    border-radius: 3px;
  }

  [data-submenu-style="mega"] .submenu__link:hover,
  [data-submenu-style="mega"] .submenu__link[aria-current="page"] {
    background: transparent;
    color: var(--sub-text);
  }

  [data-submenu-style="mega"] .submenu__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--grey-light);
    border-radius: 3px;
  }

  [data-submenu-style="mega"] .submenu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  [data-submenu-style="mega"] .submenu__link:hover .submenu__thumb img {
    transform: scale(1.05);
  }

  [data-submenu-style="mega"] .submenu__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    font-stretch: 72%;
    line-height: 1.1;
  }

  [data-submenu-style="mega"] .submenu__link:hover .submenu__name,
  [data-submenu-style="mega"] .submenu__link[aria-current="page"] .submenu__name {
    text-decoration: underline;
    text-decoration-color: var(--accent-mark);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }

  [data-submenu-style="mega"] .submenu__meta {
    display: block;
    margin-top: 4px;
    color: var(--sub-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
  }

  [data-submenu-style="mega"] .submenu--groups .submenu__meta {
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  [data-submenu-style="mega"] .submenu__items {
    display: block;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--rule-on-dark);
    list-style: none;
  }

  :is([data-header="clean"], [data-header="twoline"], [data-header="centered"], [data-header="overlay"])[data-submenu-style="mega"] .submenu__items {
    border-top-color: var(--rule);
  }

  [data-submenu-style="mega"] .submenu__items a {
    padding: 4px 0;
    color: var(--sub-muted);
    font-size: 0.875rem;
  }

  [data-submenu-style="mega"] .submenu__items a:hover {
    background: transparent;
    color: var(--sub-hover-text);
  }

  [data-submenu-style="mega"] .submenu__all a {
    color: var(--sub-text);
    font-weight: 600;
  }

  [data-submenu-style="mega"] .submenu__all a::after {
    content: " \2192";
  }
}

/* scrolling: shrink the bar, or slide it away going down and back going up */
[data-header-scroll="shrink"].is-scrolled {
  --masthead-h: 62px;
}

[data-header-scroll="shrink"].is-scrolled .masthead__logo img {
  height: 44px;
}

@media (min-width: 1100px) {
  [data-header="centered"][data-header-scroll="shrink"].is-scrolled {
    --masthead-h: 112px;
  }

  [data-header="centered"][data-header-scroll="shrink"].is-scrolled .masthead__bar {
    grid-template-rows: 62px 1fr;
  }
}

@media (max-width: 1099px) {
  [data-header-scroll="shrink"].is-scrolled {
    --masthead-h: 54px;
  }

  [data-header-scroll="shrink"].is-scrolled .masthead__logo img {
    height: 38px;
  }
}

[data-header-scroll="hide"].is-header-hidden {
  --masthead-offset: 0px;
}

[data-header-scroll="hide"].is-header-hidden .masthead {
  transform: translateY(-110%);
}

@media (prefers-reduced-motion: reduce) {
  .masthead,
  .masthead__bar,
  .masthead__logo img,
  .brand-index {
    transition: none;
  }
}

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--grey-light);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-x, 50%) var(--bg-y, 50%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(35, 38, 43, 0.9) 42%, rgba(35, 38, 43, 0.35) 100%);
}

.page-hero__inner {
  padding-block: clamp(56px, 9vw, 112px);
}

.page-hero h1 {
  max-width: 18ch;
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
}

.page-hero__intro {
  max-width: 58ch;
  margin-top: 20px;
  font-size: 1.125rem;
}

/* ---------- Item index: sticky in-page nav under the masthead ---------- */
.brand-index {
  position: sticky;
  top: var(--masthead-offset);
  transition: top 0.25s ease;
  z-index: 90;
  background: var(--ink);
  border-top: 1px solid var(--rule-on-dark);
}

.brand-index ul {
  display: flex;
  gap: 28px;
  height: var(--index-h);
  margin-block: 0; /* keep .container's auto inline margins */
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.brand-index ul::-webkit-scrollbar {
  display: none;
}

.brand-index a {
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 3px solid transparent;
  color: var(--grey-light);
  font-size: 0.9375rem;
  font-stretch: 88%;
  white-space: nowrap;
  text-decoration: none;
}

.brand-index a:hover {
  color: #fff;
}

.brand-index a.is-active {
  border-bottom-color: var(--accent-mark);
  color: #fff;
  font-weight: 600;
}

/* ---------- Item section ----------
   One per product or service: a wide centred box with the photo on one side and the details on
   the other. Configure from HTML, no new CSS needed:
     data-media  left | right | top      which side of the box the photo sits on
     data-box    paper | ink             colour of the box
     data-photo  cutout                  a product photo on a transparent background: shown whole
     --media-w                           width of the photo column (default 50%)
     --bg-x / --bg-y                     focal point of the photo (default 50% 50%)
     --tone                              colour behind the box in some designs */
.brand {
  padding: clamp(36px, 6vw, 88px) var(--gutter);
  background-color: var(--tone, var(--mist));
  scroll-margin-top: var(--index-h);
}

.brand-box {
  display: grid;
  grid-template-columns: var(--media-w, 50%) minmax(0, 1fr);
  width: min(100%, var(--container));
  min-height: clamp(460px, 62vh, 640px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper);
  color: var(--text);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(35, 38, 43, 0.06), var(--shadow);
}

.brand-box__media {
  position: relative;
  min-height: 300px;
  margin: 0;
  background: var(--ink);
}

.brand-box__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--bg-fit, cover);
  object-position: var(--bg-x, 50%) var(--bg-y, 50%);
}

/* product photos on a transparent background stand on a light steel panel, whole, not cropped */
.brand[data-photo="cutout"] .brand-box__media {
  background:
    radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f1f3f6 48%, #d9dee4 100%);
}

.brand[data-photo="cutout"] .brand-box__media img {
  inset: 9%;
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: 50% 50%;
  filter: drop-shadow(0 22px 26px rgba(35, 38, 43, 0.22));
}

.brand-box__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4.6vw, 64px);
}

/* swap: photo on the right, details on the left */
.brand[data-media="right"] .brand-box {
  grid-template-columns: minmax(0, 1fr) var(--media-w, 50%);
}

.brand[data-media="right"] .brand-box__media {
  order: 2;
}

/* photo as a banner across the top of the box */
.brand[data-media="top"] .brand-box {
  grid-template-columns: minmax(0, 1fr);
}

.brand[data-media="top"] .brand-box__media {
  min-height: 0;
  aspect-ratio: 21 / 8;
}

@media (max-width: 859px) {
  /* small screens: always photo first, details underneath.
     [data-media] keeps these as specific as the left/right/top rules above, so they win. */
  .brand[data-media] .brand-box {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .brand[data-media] .brand-box__media {
    order: 0;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

.brand-box__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand-box__kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 3px;
  background: var(--accent-mark);
}

.brand-box__number {
  color: var(--accent);
  font-weight: 600;
}

.brand-box__number + * {
  margin-left: 2px;
}

.brand-box__name {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.brand-box__tagline {
  margin-top: 12px;
  color: var(--second);
  font-size: 1.0625rem;
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.4;
}

.brand-box__text {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--muted);
}

/* material, finishing, size: ruled like a datasheet, labels in mono */
.brand-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 26px 0 0;
  border-block: 1px solid var(--rule);
}

.brand-facts > div {
  padding: 13px 16px 13px 0;
}

.brand-facts > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.brand-facts dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-facts dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* what a service includes: a list with red ticks */
.brand-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.brand-scope li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.brand-scope li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.brand-range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.brand-range li {
  padding: 5px 12px;
  background: var(--mist);
  border-radius: 2px;
  color: var(--ink);
  font-size: 0.875rem;
  font-stretch: 92%;
}

.brand-range li:has(a) {
  padding: 0;
}

.brand-range a {
  display: block;
  padding: 5px 12px;
  color: inherit;
  text-decoration: none;
}

.brand-range a::after {
  content: " \2192";
}

.brand-range a:hover {
  background: var(--ink);
  color: #fff;
}

.brand-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.brand-more {
  margin-top: 24px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}

.brand-more dl {
  margin: 0;
}

.brand-more dl > div {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.brand-more dt {
  color: var(--muted);
}

.brand-more dd {
  margin: 0;
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .brand-more:not([hidden]) {
    animation: reveal 0.24s ease;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* dark variant of the box, for bright photos */
.brand[data-box="ink"] .brand-box {
  background: var(--ink);
  color: var(--grey-light);
  --rule: var(--rule-on-dark);
}

.brand[data-box="ink"] .brand-box__name,
.brand[data-box="ink"] .brand-facts dd,
.brand[data-box="ink"] .brand-more dd,
.brand[data-box="ink"] .brand-scope li {
  color: #fff;
}

.brand[data-box="ink"] .brand-box__tagline {
  color: var(--second-tint-4);
}

.brand[data-box="ink"] .brand-box__text,
.brand[data-box="ink"] .brand-box__kicker,
.brand[data-box="ink"] .brand-facts dt,
.brand[data-box="ink"] .brand-more dt {
  color: #b8bec6;
}

.brand[data-box="ink"] .brand-box__number {
  color: var(--accent-on-dark);
}

.brand[data-box="ink"] .brand-range li {
  background: rgba(213, 218, 224, 0.12);
  color: var(--grey-light);
}

.brand[data-box="ink"] .btn--secondary {
  color: var(--grey-light);
}

.brand[data-box="ink"] .btn--secondary:hover {
  background: var(--grey-light);
  border-color: var(--grey-light);
  color: var(--ink);
}

@media (max-width: 479px) {
  .brand-box__actions .btn {
    width: 100%;
  }

  .brand-more dl > div {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brand-facts > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* closing band: a question and the quotation button */
.range-close {
  background: var(--mist);
  padding-block: clamp(48px, 7vw, 80px);
  border-top: 4px solid var(--accent-mark);
}

.range-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

.range-close h2 {
  font-size: clamp(2rem, 3.8vw, 2.875rem);
}

.range-close p {
  max-width: 58ch;
  margin-top: 10px;
  color: var(--muted);
}

/* ---------- Page designs ----------
   Group pages and the pages of types shown as sections share one HTML structure;
   <html data-design="..."> picks the look:
     wall       panels over a parallax wall of ribs (default)
     blueprint  a technical-drawing grid, ruled details, no cards; the photo stays in view
     offset     big photo with the details card overlapping its edge
     showcase   one panel in the item's --tone colour, photo bleeding in from one side
     bands      full-width colour bands behind each box (the base rules above, using --tone) */

/* ---------- Design: wall ----------
   The hero, the boxes and the closing band float as panels over a wall of corrugated sheet. The wall is a fixed layer, so the page scrolls over it; where the browser
   supports scroll-driven animation the horizontal seams drift more slowly than the page, which
   gives the parallax. All of it is gradients: no image to download. */
[data-design="wall"] body {
  background: #b9c0c8;
}

[data-design="wall"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    /* seams between sheets: a dark joint with a lit edge, every 360px */
    repeating-linear-gradient(180deg,
      transparent 0 334px,
      rgba(35, 38, 43, 0.42) 334px 342px,
      rgba(255, 255, 255, 0.55) 342px 344px,
      transparent 344px 360px),
    /* light from above, darker towards the bottom so the panels stand out */
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(35, 38, 43, 0) 40%, rgba(35, 38, 43, 0.3)),
    /* the corrugation: highlight, face, shadow, face */
    repeating-linear-gradient(90deg, #e3e7eb 0 6px, #c6ccd3 6px 20px, #a7afb8 20px 24px, #c6ccd3 24px 40px);
  background-color: #c6ccd3;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-design="wall"] body::before {
      animation: wall-seams linear both;
      animation-timeline: scroll(root);
    }

    /* one full seam period per page, so the drift is slow and ends where it started */
    @keyframes wall-seams {
      from {
        background-position: 0 0, 0 0, 0 0;
      }

      to {
        background-position: 0 -360px, 0 0, 0 0;
      }
    }
  }
}

[data-design="wall"] .page-hero {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(20px, 3vw, 36px) auto 0;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

[data-design="wall"] .page-hero .container {
  width: auto;
  margin-inline: clamp(22px, 4.6vw, 68px);
}

/* the index is the bottom edge of the hero panel; once it sticks it sits flush under the menu */
[data-design="wall"] .brand-index {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  border: 0;
  border-radius: 0 0 6px 6px;
  background: var(--ink-deep);
  box-shadow: 0 24px 50px -26px rgba(15, 16, 19, 0.8);
}

[data-design="wall"] .brand-index ul.container {
  width: auto;
  margin-inline: clamp(22px, 4.6vw, 68px);
}

[data-design="wall"] .brand {
  padding-block: clamp(14px, 2vw, 22px);
  background: transparent;
  scroll-margin-top: calc(var(--index-h) + 20px);
}

[data-design="wall"] .brand-index + .brand {
  padding-top: clamp(24px, 3.4vw, 40px);
}

[data-design="wall"] .brand-box {
  border-radius: 6px;
  box-shadow: 0 34px 80px -30px rgba(15, 16, 19, 0.75);
}

[data-design="wall"] .range-close {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(14px, 2vw, 22px) auto clamp(48px, 7vw, 96px);
  padding: clamp(28px, 4.6vw, 68px);
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 34px 80px -30px rgba(15, 16, 19, 0.75);
}

[data-design="wall"] .range-close .container {
  width: auto;
}

/* ---------- Shared by offset + showcase: the hero and index become one container-width panel ---------- */
:is([data-design="offset"], [data-design="showcase"]) .page-hero {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(20px, 3vw, 36px) auto 0;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

:is([data-design="offset"], [data-design="showcase"]) .page-hero .container,
:is([data-design="offset"], [data-design="showcase"]) .brand-index ul.container {
  width: auto;
  margin-inline: clamp(22px, 4.6vw, 68px);
}

:is([data-design="offset"], [data-design="showcase"]) .brand-index {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  border: 0;
  border-radius: 0 0 6px 6px;
}

:is([data-design="offset"], [data-design="showcase"]) .brand {
  background: transparent;
  scroll-margin-top: calc(var(--index-h) + 20px);
}

/* the photo drifts inside its frame as the item scrolls through the viewport (not the cutouts:
   they would slide out of their panel) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is([data-design="offset"], [data-design="showcase"]) .brand:not([data-photo="cutout"]) .brand-box__media img {
      animation: photo-drift linear both;
      animation-timeline: view();
    }

    @keyframes photo-drift {
      from {
        transform: scale(1.16) translateY(-5%);
      }

      to {
        transform: scale(1.16) translateY(5%);
      }
    }
  }
}

/* ---------- Design: blueprint ----------
   Light and ruled, like a technical drawing: a grid in the second colour on pale paper, no cards, each item
   numbered and separated by a drawn line; the photo sits in a framed panel that stays in view
   while the details scroll past. */
[data-design="blueprint"] body {
  background-color: var(--second-tint-1);
  background-image:
    linear-gradient(rgba(45, 48, 145, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 48, 145, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(45, 48, 145, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 48, 145, 0.045) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

[data-design="blueprint"] .page-hero {
  background: transparent;
  border-bottom: 2px solid var(--second);
  color: var(--text);
}

[data-design="blueprint"] .page-hero::before {
  display: none;
}

[data-design="blueprint"] .page-hero__inner {
  padding-block: clamp(40px, 6vw, 84px);
}

[data-design="blueprint"] .page-hero h1 {
  color: var(--ink);
}

[data-design="blueprint"] .page-hero .kicker {
  color: var(--second);
}

[data-design="blueprint"] .page-hero__intro {
  color: var(--muted);
}

[data-design="blueprint"] .page-hero__media {
  border: 1px solid var(--second);
  border-radius: 2px;
}

[data-design="blueprint"] .brand-index {
  background: rgba(246, 247, 252, 0.94);
  border-top: 0;
  border-bottom: 1px solid rgba(45, 48, 145, 0.35);
  backdrop-filter: blur(4px);
}

[data-design="blueprint"] .brand-index a {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-stretch: 100%;
}

[data-design="blueprint"] .brand-index a:hover,
[data-design="blueprint"] .brand-index a.is-active {
  color: var(--second);
  border-bottom-color: var(--second);
}

[data-design="blueprint"] main {
  counter-reset: blueprint;
}

[data-design="blueprint"] .brand {
  padding-block: 0;
  background: transparent;
  counter-increment: blueprint;
}

[data-design="blueprint"] .brand-box,
[data-design="blueprint"] .brand[data-box="ink"] .brand-box {
  min-height: 0;
  padding-block: clamp(36px, 6vw, 88px);
  overflow: visible;
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid rgba(45, 48, 145, 0.35);
  border-radius: 0;
  box-shadow: none;
  --rule: rgba(45, 48, 145, 0.22);
}

[data-design="blueprint"] .brand[data-box="ink"] .brand-box__name,
[data-design="blueprint"] .brand[data-box="ink"] .brand-facts dd,
[data-design="blueprint"] .brand[data-box="ink"] .brand-scope li {
  color: var(--ink);
}

[data-design="blueprint"] .brand[data-box="ink"] .brand-box__text {
  color: var(--muted);
}

[data-design="blueprint"] .brand-box__media {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--second);
  border-radius: 2px;
}

/* corner ticks, like the crop marks on a drawing */
[data-design="blueprint"] .brand-box__media::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--second), var(--second)) top left / 14px 1.5px,
    linear-gradient(var(--second), var(--second)) top left / 1.5px 14px,
    linear-gradient(var(--second), var(--second)) top right / 14px 1.5px,
    linear-gradient(var(--second), var(--second)) top right / 1.5px 14px,
    linear-gradient(var(--second), var(--second)) bottom left / 14px 1.5px,
    linear-gradient(var(--second), var(--second)) bottom left / 1.5px 14px,
    linear-gradient(var(--second), var(--second)) bottom right / 14px 1.5px,
    linear-gradient(var(--second), var(--second)) bottom right / 1.5px 14px;
  background-repeat: no-repeat;
}

[data-design="blueprint"] .brand-box__body {
  padding: 0;
  justify-content: flex-start;
}

[data-design="blueprint"] .brand-box__kicker {
  color: var(--second);
}

[data-design="blueprint"] .brand-box__kicker::before {
  content: counter(blueprint, decimal-leading-zero);
  width: auto;
  height: auto;
  padding: 2px 7px;
  background: var(--second);
  color: #fff;
  font-weight: 600;
}

[data-design="blueprint"] .brand-box__number {
  display: none; /* the drawing numbers the items itself */
}

[data-design="blueprint"] .brand-box__name {
  font-size: clamp(2.375rem, 5vw, 4rem);
}

[data-design="blueprint"] .brand-facts dt {
  color: var(--second);
}

[data-design="blueprint"] .range-close {
  background: transparent;
  border-top: 2px solid var(--second);
}

@media (min-width: 860px) {
  [data-design="blueprint"] .page-hero__media {
    inset: 50% max(var(--gutter), calc((100% - var(--container)) / 2)) auto auto;
    width: min(36%, 440px);
    height: 72%;
    transform: translateY(-50%);
  }

  [data-design="blueprint"] .page-hero__inner > * {
    max-width: 56%;
  }

  [data-design="blueprint"] .brand-box {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }

  [data-design="blueprint"] .brand[data-media="right"] .brand-box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  }

  [data-design="blueprint"] .brand-box__media {
    position: sticky;
    top: calc(var(--masthead-offset) + var(--index-h) + 24px);
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 859px) {
  [data-design="blueprint"] .page-hero__media {
    position: static;
    height: 200px;
  }

  [data-design="blueprint"] .brand-box {
    gap: 24px;
  }
}

/* ---------- Design: offset ----------
   A big photo with the details card overlapping its inner edge, and a block of the item's
   --tone colour stepping out behind the photo. */
[data-design="offset"] .brand {
  padding-block: clamp(32px, 5vw, 72px);
}

[data-design="offset"] .brand-box,
[data-design="offset"] .brand[data-box="ink"] .brand-box {
  min-height: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

[data-design="offset"] .brand-box__media {
  overflow: hidden;
  border-radius: 6px;
}

[data-design="offset"] .brand-box__body {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(35, 38, 43, 0.08), var(--shadow);
}

[data-design="offset"] .brand[data-box="ink"] .brand-box__body {
  background: var(--ink);
}

@media (min-width: 860px) {
  [data-design="offset"] .brand-box {
    grid-template-columns: 60% minmax(0, 1fr);
    align-items: center;
    padding: 0 28px 28px;
  }

  [data-design="offset"] .brand[data-media="right"] .brand-box {
    grid-template-columns: minmax(0, 1fr) 60%;
  }

  [data-design="offset"] .brand-box__media {
    min-height: clamp(440px, 60vh, 600px);
    box-shadow: -28px 28px 0 var(--tone, var(--mist));
  }

  [data-design="offset"] .brand[data-media="right"] .brand-box__media {
    box-shadow: 28px 28px 0 var(--tone, var(--mist));
  }

  [data-design="offset"] .brand-box__body {
    margin: 56px 0 56px -120px;
  }

  [data-design="offset"] .brand[data-media="right"] .brand-box__body {
    margin: 56px -120px 56px 0;
  }
}

@media (max-width: 859px) {
  [data-design="offset"] .brand-box__body {
    margin: -40px 12px 0;
  }
}

/* ---------- Design: showcase ----------
   One panel per item in its --tone colour. The photo bleeds in from one side and fades into
   the colour; the details sit on a card at the other side. */
[data-design="showcase"] body {
  background: var(--mist);
}

[data-design="showcase"] .brand {
  padding-block: clamp(14px, 2vw, 22px);
}

[data-design="showcase"] .brand-index + .brand {
  padding-top: clamp(24px, 3.4vw, 40px);
}

[data-design="showcase"] .brand-box,
[data-design="showcase"] .brand[data-box="ink"] .brand-box {
  position: relative;
  isolation: isolate;
  background: var(--tone, var(--ink));
  border-radius: 8px;
  box-shadow: 0 30px 70px -32px rgba(15, 16, 19, 0.6);
}

[data-design="showcase"] .brand-box__body {
  background: var(--paper);
  border-radius: 6px;
}

[data-design="showcase"] .brand[data-box="ink"] .brand-box__body {
  background: var(--ink);
}

[data-design="showcase"] .range-close {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(14px, 2vw, 22px) auto clamp(48px, 7vw, 96px);
  padding: clamp(28px, 4.6vw, 68px);
  background: var(--paper);
  border-radius: 8px;
}

[data-design="showcase"] .range-close .container {
  width: auto;
}

@media (min-width: 860px) {
  [data-design="showcase"] .brand-box,
  [data-design="showcase"] .brand[data-media="right"] .brand-box {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(540px, 70vh, 680px);
  }

  [data-design="showcase"] .brand-box__media {
    position: absolute;
    inset: 0 30% 0 0;
    z-index: -1;
    min-height: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
    mask-image: linear-gradient(90deg, #000 60%, transparent);
  }

  [data-design="showcase"] .brand[data-media="right"] .brand-box__media {
    inset: 0 0 0 30%;
    -webkit-mask-image: linear-gradient(270deg, #000 60%, transparent);
    mask-image: linear-gradient(270deg, #000 60%, transparent);
  }

  /* a cutout keeps its light panel; the colour of the item frames it */
  [data-design="showcase"] .brand[data-photo="cutout"] .brand-box__media {
    inset: 28px 34% 28px 28px;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f1f3f6 48%, #d9dee4 100%);
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-design="showcase"] .brand[data-photo="cutout"][data-media="right"] .brand-box__media {
    inset: 28px 28px 28px 34%;
  }

  [data-design="showcase"] .brand-box__body {
    justify-self: end;
    width: min(47%, 560px);
    margin: 40px;
  }

  [data-design="showcase"] .brand[data-media="right"] .brand-box__body {
    justify-self: start;
  }
}

@media (max-width: 859px) {
  [data-design="showcase"] .brand-box__body {
    margin: 12px;
  }
}

/* ---------- Home ---------- */
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(86svh, 820px);
  padding-block: clamp(72px, 10vw, 128px) clamp(28px, 4vw, 44px);
  background: var(--ink);
  color: var(--grey-light);
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 25, 29, 0.94) 0%, rgba(23, 25, 29, 0.82) 38%, rgba(23, 25, 29, 0.28) 100%),
    linear-gradient(0deg, rgba(23, 25, 29, 0.85) 0%, rgba(23, 25, 29, 0) 45%);
}

.home-hero__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
}

.home-hero h1 {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.875rem, 7.4vw, 6rem);
  line-height: 0.96;
}

.home-hero__text {
  max-width: 54ch;
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* the numbers along the bottom of the hero */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: clamp(48px, 7vw, 88px) 0 0;
  border-top: 1px solid var(--rule-on-dark);
}

/* the label above the number (column-reverse keeps the number first for screen readers); packed
   at the bottom, so the numbers line up even when a label takes two lines */
.stats-row > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  padding: 20px 20px 4px 0;
}

.stats-row > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--rule-on-dark);
}

.stats-row dt {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1;
}

/* a short red rule over each number; no "+" after it: the numbers are exact */
.stats-row dt::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--accent-mark);
}

.stats-row dd {
  margin: 8px 0 0;
  max-width: 22ch;
  color: var(--grey-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

@media (max-width: 559px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .stats-row > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .stats-row > div:nth-child(n + 3) {
    border-top: 1px solid var(--rule-on-dark);
  }
}

/* ---------- Home hero styles: <html data-home-hero="photo|split|center|card"> ----------
   One structure (front-page.php), four arrangements; "photo" is the base above. Split and card put
   the numbers on a band as wide as the screen (--band), drawn with a spread shadow clipped to the
   height of the row, so the markup stays the same. */
:is([data-home-hero="split"], [data-home-hero="card"]) .home-hero {
  padding-bottom: 0;
}

:is([data-home-hero="split"], [data-home-hero="card"]) .stats-row {
  position: relative;
  padding-bottom: clamp(18px, 3vw, 30px);
  border-top: 0;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}

/* split: the text on the dark colour on the left, the photo uncovered on the right */
[data-home-hero="split"] .home-hero {
  --band: var(--ink-deep);
}

[data-home-hero="split"] .home-hero::before {
  background: linear-gradient(180deg, rgba(23, 25, 29, 0.6) 0, rgba(23, 25, 29, 0) 190px);
}

[data-home-hero="split"] .home-hero h1 {
  max-width: none;
  font-size: clamp(2.5rem, 4.3vw, 4rem);
}

@media (min-width: 900px) {
  [data-home-hero="split"] .home-hero__media {
    left: 50%;
    width: 50%;
    border-left: 6px solid var(--accent-mark);
  }

  [data-home-hero="split"] .home-hero::before {
    left: 50%;
  }

  /* padding in % counts from the width of the hero: the text ends left of the middle of the page */
  [data-home-hero="split"] .home-hero__inner {
    padding-right: calc(50% + clamp(24px, 4vw, 56px));
  }
}

/* centred: a large title in the middle of the photo, the numbers centred at the bottom */
[data-home-hero="center"] .home-hero {
  text-align: center;
}

[data-home-hero="center"] .home-hero::before {
  background: linear-gradient(0deg, rgba(23, 25, 29, 0.94) 0%, rgba(23, 25, 29, 0.66) 42%, rgba(23, 25, 29, 0.74) 100%);
}

/* auto margins share the free height: the title in the middle, the numbers pushed down */
[data-home-hero="center"] .home-hero__inner {
  margin-block: auto;
}

[data-home-hero="center"] .home-hero h1 {
  max-width: 17ch;
  margin-inline: auto;
}

[data-home-hero="center"] .home-hero__text {
  margin-inline: auto;
}

[data-home-hero="center"] .home-hero__actions {
  justify-content: center;
}

[data-home-hero="center"] .stats-row {
  max-width: 1000px;
  margin-inline: auto;
}

[data-home-hero="center"] .stats-row > div {
  align-items: center;
}

[data-home-hero="center"] .stats-row dt::before {
  margin-inline: auto;
}

/* card: the photo stays bright, the text on a white card with a red edge, numbers on a light band */
[data-home-hero="card"] .home-hero {
  --band: var(--mist);
}

[data-home-hero="card"] .home-hero::before {
  background: linear-gradient(180deg, rgba(23, 25, 29, 0.55) 0, rgba(23, 25, 29, 0) 200px);
}

/* margin in % counts from the width of the hero: the card starts where the container starts */
[data-home-hero="card"] .home-hero__inner {
  width: min(100% - 2 * var(--gutter), 640px);
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--paper);
  border-top: 5px solid var(--accent-mark);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 30px 60px -30px rgba(15, 16, 19, 0.65);
  color: var(--muted);
}

[data-home-hero="card"] .home-hero .kicker {
  color: var(--muted);
}

[data-home-hero="card"] .home-hero h1 {
  max-width: none;
  color: var(--ink);
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1;
}

[data-home-hero="card"] .home-hero__text {
  margin-top: 18px;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

[data-home-hero="card"] .home-hero__actions {
  margin-top: 26px;
}

[data-home-hero="card"] .home-hero .btn--ghost {
  border-color: var(--ink);
  color: var(--ink);
}

[data-home-hero="card"] .home-hero .btn--ghost:hover {
  background: var(--ink);
  color: #fff;
}

[data-home-hero="card"] .stats-row > div + div {
  border-left-color: var(--rule);
}

[data-home-hero="card"] .stats-row dt {
  color: var(--ink);
}

[data-home-hero="card"] .stats-row dd {
  color: var(--muted);
}

/* phones: the photo on top, the text below it (split) or on a card over its lower edge (card).
   The second selector outweighs the transparent header's room for itself above the text. */
@media (max-width: 899px) {
  [data-home-hero="split"] .home-hero,
  [data-header][data-has-hero][data-home-hero="split"] .home-hero {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 0;
  }

  [data-home-hero="split"] .home-hero__media {
    position: relative;
    height: auto;
    max-height: 60svh;
    aspect-ratio: 4 / 3;
    margin-bottom: clamp(28px, 6vw, 44px);
    border-bottom: 5px solid var(--accent-mark);
  }
}

@media (max-width: 759px) {
  [data-home-hero="card"] .home-hero,
  [data-header][data-has-hero][data-home-hero="card"] .home-hero {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 0;
    background: var(--mist);
  }

  [data-home-hero="card"] .home-hero__media {
    position: relative;
    height: auto;
    max-height: 60svh;
    aspect-ratio: 4 / 3;
  }

  [data-home-hero="card"] .home-hero__inner {
    width: auto;
    margin: -56px var(--gutter) 0;
  }

  [data-home-hero="card"] .stats-row > div:nth-child(n + 3) {
    border-top-color: var(--rule);
  }
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(64px, 9vw, 120px);
}

.section--mist,
.section--grey {
  background: var(--mist);
}

.section--grey {
  background-image: repeating-linear-gradient(90deg, rgba(35, 38, 43, 0.025) 0 2px, transparent 2px 40px);
}

.section--ink {
  background: var(--ink);
  color: var(--grey-light);
}

.section--ink h2 {
  color: #fff;
}

.section--second {
  background: var(--second);
  color: var(--second-tint-2);
}

.section h2 {
  max-width: 22ch;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.section__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  font-stretch: 92%;
  text-decoration: none;
  border-bottom: 2px solid var(--accent-mark);
}

.section__more::after {
  content: "\2192";
  transition: transform 0.15s ease;
}

.section__more:hover::after {
  transform: translateX(4px);
}

/* services on the home page */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--ink);
  box-shadow: 0 18px 36px -24px rgba(15, 16, 19, 0.55);
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.service-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__body {
  padding: 20px 22px 24px;
  border-top: 3px solid var(--accent-mark);
}

.service-card__name {
  font-size: 1.625rem;
}

.service-card__name a {
  color: inherit;
  text-decoration: none;
}

/* the title link covers the whole card */
.service-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-card__name a:focus-visible {
  outline: none;
}

.service-card:has(a:focus-visible) {
  outline: 3px solid var(--second-light);
  outline-offset: 3px;
}

.service-card__body p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* product categories on the home page */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.range-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(280px, 34vw, 420px);
  padding: 22px;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}

.range-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.range-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 25, 29, 0.05) 25%, rgba(23, 25, 29, 0.92) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .range-tile:hover .range-tile__media {
    transform: scale(1.05);
  }
}

.range-tile__count {
  color: var(--grey-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.range-tile__name {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 3px solid var(--accent-mark);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1.02;
  text-wrap: balance;
}

.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(32px, 6vw, 88px);
  margin: clamp(28px, 4vw, 48px) 0 0;
}

.reasons > div {
  display: grid;
  grid-template-columns: 13em 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-on-dark);
}

.reasons dt {
  display: flex;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-stretch: 92%;
}

.reasons__number {
  color: var(--accent-on-dark);
  font-family: var(--font-mono);
  font-weight: 500;
}

.reasons dd {
  margin: 0;
  color: var(--grey-light);
}

.contact {
  background: var(--ink-deep);
  color: var(--grey-light);
}

.contact h2 {
  color: #fff;
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 6vw, 88px);
  align-items: start;
}

.contact p {
  max-width: 52ch;
  margin-top: 16px;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px !important;
}

/* address, phone, WhatsApp, email */
.contact-list {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
}

.contact-list > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.contact-list dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
}

.contact-list dd {
  margin: 0;
  color: var(--ink);
}

.contact-list a {
  color: inherit;
  font-weight: 600;
}

.contact-list--dark > div {
  border-color: var(--rule-on-dark);
}

.contact-list--dark dt {
  color: var(--grey);
}

.contact-list--dark dd {
  color: #fff;
}

@media (max-width: 899px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reasons,
  .contact__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .range-tile {
    min-height: 220px;
  }

  .reasons > div,
  .contact-list > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.about img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

.about p {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--muted);
}

.about .about__lead {
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.4;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-cards li {
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper);
  border-top: 4px solid var(--accent-mark);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 0 var(--rule);
}

.about-cards h2 {
  font-size: 1.875rem;
}

.about-cards p {
  margin-top: 12px;
  color: var(--muted);
}

.vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px clamp(40px, 7vw, 104px);
}

.vision .kicker {
  color: var(--second-tint-3);
}

.vision__text {
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.45;
}

@media (max-width: 899px) {
  .about,
  .vision {
    grid-template-columns: 1fr;
  }

  .about-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Projects ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 48px);
}

.project-grid--page {
  margin-top: 28px;
}

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  scroll-margin-top: calc(var(--masthead-offset) + 20px);
}

.project-card[hidden] {
  display: none;
}

.project-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .project-card__media:hover img {
    transform: scale(1.04);
  }
}

.project-card__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(23, 25, 29, 0.82);
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.project-card__body {
  padding: 18px 20px 22px;
  border-top: 3px solid var(--accent-mark);
}

.project-card__name {
  font-size: 1.5rem;
}

.project-card__meta {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-card__text {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.project-card .brand-range {
  margin-top: 14px;
}

.filter-list--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-list--chips button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-list--chips button:hover {
  background: var(--grey-light);
}

.filter-list--chips button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

@media (max-width: 999px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Projects page layouts: <html data-portfolio-style="cards|rows|gallery|table"> ----------
   Only the Projects page (.project-grid--page); the featured projects on the home page keep their
   cards. "cards" is the base above. The filter hides cards with [hidden], whatever the layout. */

/* rows: one project per row, a large photo beside the full details */
[data-portfolio-style="rows"] .project-grid--page {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

@media (min-width: 760px) {
  [data-portfolio-style="rows"] .project-grid--page .project-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  [data-portfolio-style="rows"] .project-grid--page .project-card:not(:has(> .project-card__media)) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* no aspect ratio: the photo stretches to the height of the details */
  [data-portfolio-style="rows"] .project-grid--page .project-card__media {
    aspect-ratio: auto;
    min-height: clamp(220px, 21vw, 300px);
  }

  [data-portfolio-style="rows"] .project-grid--page .project-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3vw, 44px);
    border-top: 0;
    border-left: 4px solid var(--accent-mark);
  }
}

[data-portfolio-style="rows"] .project-grid--page .project-card__name {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
}

[data-portfolio-style="rows"] .project-grid--page .project-card__text {
  max-width: 60ch;
  font-size: 1rem;
}

/* gallery: a mosaic of photos, the name and place written over each; every ninth one is large */
[data-portfolio-style="gallery"] .project-grid--page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 19vw, 280px);
  grid-auto-flow: dense;
  gap: 10px;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card {
  position: relative;
  justify-content: flex-end;
  background: var(--ink);
  border: 0;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card:nth-child(9n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* the text lets clicks through to the photo under it, which opens the viewer */
[data-portfolio-style="gallery"] .project-grid--page .project-card__body {
  position: relative;
  padding: 56px 18px 16px;
  border-top: 0;
  background: linear-gradient(0deg, rgba(23, 25, 29, 0.92) 0%, rgba(23, 25, 29, 0.62) 55%, rgba(23, 25, 29, 0) 100%);
  pointer-events: none;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card__name {
  color: #fff;
  font-size: 1.25rem;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card:nth-child(9n + 1) .project-card__name {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

[data-portfolio-style="gallery"] .project-grid--page .project-card__meta {
  color: var(--grey-light);
}

[data-portfolio-style="gallery"] .project-grid--page .project-card__text,
[data-portfolio-style="gallery"] .project-grid--page .brand-range {
  display: none;
}

[data-portfolio-style="gallery"] .project-grid--page .project-card:nth-child(9n + 1) .project-card__text {
  display: block;
  max-width: 56ch;
  color: var(--grey-light);
}

[data-portfolio-style="gallery"] .project-grid--page .project-card__count {
  top: 12px;
  bottom: auto;
}

@media (max-width: 899px) {
  [data-portfolio-style="gallery"] .project-grid--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  [data-portfolio-style="gallery"] .project-grid--page {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 240px;
  }

  [data-portfolio-style="gallery"] .project-grid--page .project-card:nth-child(9n + 1) {
    grid-column: auto;
    grid-row: span 1;
  }

  [data-portfolio-style="gallery"] .project-grid--page .project-card:nth-child(9n + 1) .project-card__text {
    display: none;
  }
}

/* table: a reference list, one project per line with a small photo */
[data-portfolio-style="table"] .project-grid--page {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}

[data-portfolio-style="table"] .project-grid--page .project-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  overflow: visible;
}

[data-portfolio-style="table"] .project-grid--page .project-card__media {
  border-radius: 3px;
}

[data-portfolio-style="table"] .project-grid--page .project-card__count {
  right: 5px;
  bottom: 5px;
  padding: 2px 6px;
  font-size: 0.625rem;
}

/* fixed columns: a project without client or place leaves its column empty, the rest stays aligned */
[data-portfolio-style="table"] .project-grid--page .project-card__body {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 6px 24px;
  align-items: center;
  padding: 0;
  border-top: 0;
}

[data-portfolio-style="table"] .project-grid--page .project-card__name {
  grid-column: 1;
  font-size: 1.25rem;
}

[data-portfolio-style="table"] .project-grid--page .project-card__meta {
  grid-column: 2;
  margin-top: 0;
}

[data-portfolio-style="table"] .project-grid--page .project-card__text {
  display: none;
}

[data-portfolio-style="table"] .project-grid--page .brand-range {
  grid-column: 3;
  gap: 6px;
  margin-top: 0;
}

[data-portfolio-style="table"] .project-grid--page .brand-range li {
  padding: 3px 9px;
  font-size: 0.8125rem;
}

@media (max-width: 759px) {
  [data-portfolio-style="table"] .project-grid--page .project-card {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  [data-portfolio-style="table"] .project-grid--page .project-card__body {
    display: block;
  }

  [data-portfolio-style="table"] .project-grid--page .project-card__name {
    font-size: 1.125rem;
  }

  [data-portfolio-style="table"] .project-grid--page .project-card__meta {
    margin-top: 4px;
  }

  [data-portfolio-style="table"] .project-grid--page .brand-range {
    margin-top: 8px;
  }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.contact-grid h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
}

.contact-grid__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.map {
  position: relative;
}

.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 4px;
  background: var(--mist);
  box-shadow: 0 0 0 1px var(--rule);
}

.map__link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Catalogue (Products page): category sidebar + product cards ---------- */
.catalogue {
  padding-block: clamp(48px, 7vw, 96px);
}

.catalogue__intro h2 {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
}

.catalogue__intro p {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--muted);
}

.catalogue__layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 48px);
}

.catalogue__intro + .catalogue__layout {
  margin-top: clamp(28px, 4vw, 48px);
}

.catalogue__layout:first-child {
  margin-top: 0;
}

.catalogue__filters {
  position: sticky;
  top: calc(var(--masthead-offset) + 24px);
  padding: 22px 14px 14px;
  background: var(--mist);
  border-top: 4px solid var(--accent-mark);
  border-radius: 0 0 4px 4px;
}

.catalogue__filters h3 {
  padding: 0 10px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.5rem;
}

.filter-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.filter-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 3px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.filter-list a:hover {
  background: rgba(35, 38, 43, 0.08);
}

.filter-list a[aria-current="true"] {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.filter-list__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.catalogue__status {
  margin-bottom: 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--ink);
  box-shadow: 0 18px 36px -24px rgba(15, 16, 19, 0.55);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mist);
}

/* absolute, so a portrait photo cannot stretch the 4:3 frame taller */
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-x, 50%) var(--bg-y, 50%);
}

.product-card[data-photo="cutout"] .product-card__media {
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f1f3f6 50%, #dde2e7 100%);
}

.product-card[data-photo="cutout"] .product-card__media img {
  inset: 10%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(35, 38, 43, 0.2));
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}

.product-card__range {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-card__name {
  margin-top: 6px;
  font-size: 1.5rem;
  line-height: 1.05;
}

/* the title link covers the whole card, so the card is one big target */
.product-card__name a {
  color: inherit;
  text-decoration: none;
}

.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-card__name a:focus-visible {
  outline: none;
}

.product-card:has(.product-card__name a:focus-visible) {
  outline: 3px solid var(--second-light);
  outline-offset: 3px;
}

.product-card__text {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.product-card__more {
  margin-top: auto;
  padding-top: 16px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 92%;
  text-decoration: underline;
  text-decoration-color: var(--accent-mark);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

@media (max-width: 1099px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 859px) {
  .catalogue__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the sidebar becomes a row of scrollable chips above the grid */
  .catalogue__filters {
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .catalogue__filters h3 {
    padding: 0 0 10px;
    border: 0;
    font-size: 1.25rem;
  }

  .filter-list {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-list::-webkit-scrollbar {
    display: none;
  }

  .filter-list a {
    padding: 9px 14px;
    background: var(--mist);
    white-space: nowrap;
  }
}

@media (max-width: 559px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-deep);
  color: #b8bec6;
  font-size: 0.9375rem;
  border-top: 4px solid var(--accent-mark);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 32px 48px;
  padding-block: clamp(48px, 6vw, 72px) 40px;
}

/* the logo sits on a white plate on the dark footer, whatever its colours */
.footer__logo {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 4px;
}

.footer__logo img {
  width: auto;
  height: 44px;
}

.footer__brand {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1.1;
}

.footer__grid p {
  max-width: 34ch;
  margin-top: 12px;
}

.footer h2 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.footer li + li {
  margin-top: 8px;
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__contact {
  margin: 10px 0 0;
}

.footer__contact > div + div {
  margin-top: 10px;
}

.footer__contact dt {
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__contact dd {
  margin: 2px 0 0;
}

.footer__legal {
  padding-block: 18px 28px;
  border-top: 1px solid var(--rule-on-dark);
  font-size: 0.84375rem;
}

@media (max-width: 899px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 519px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Quotation dialog ---------- */
.inquiry {
  width: min(100% - 32px, 640px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-top: 5px solid var(--accent-mark);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 40px 90px -20px rgba(15, 16, 19, 0.75);
}

.inquiry::backdrop {
  background: rgba(23, 25, 29, 0.74);
}

@media (prefers-reduced-motion: no-preference) {
  .inquiry[open] {
    animation: dialog-in 0.2s ease;
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.inquiry__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(20px, 5vw, 36px) 0;
}

.inquiry__head h2 {
  font-size: 2.25rem;
}

.inquiry__close {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
}

.inquiry__close:hover {
  color: var(--ink);
}

.inquiry__body {
  padding: 8px clamp(20px, 5vw, 36px) 32px;
}

.inquiry__lead {
  color: var(--muted);
}

.inquiry__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1.5px solid rgba(35, 38, 43, 0.35);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--second);
}

.inquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.inquiry__hint {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.875rem;
}

.inquiry__done h3 {
  font-size: 1.875rem;
}

.inquiry__done p {
  margin-top: 12px;
}

@media (max-width: 519px) {
  .inquiry__fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- Photo viewer (project photos) ---------- */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 16, 19, 0.96);
  color: #fff;
}

.lightbox::backdrop {
  background: rgba(15, 16, 19, 0.9);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 64px 72px 32px;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100svh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
}

.lightbox__figure figcaption {
  color: var(--grey-light);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lightbox__close:hover {
  background: #fff;
  color: var(--ink);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(23, 25, 29, 0.6);
  cursor: pointer;
}

.lightbox__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
}

.lightbox__nav--prev {
  left: 14px;
}

.lightbox__nav--prev::after {
  transform: translate(-30%, -50%) rotate(135deg);
}

.lightbox__nav--next {
  right: 14px;
}

.lightbox__nav--next::after {
  transform: translate(-70%, -50%) rotate(-45deg);
}

@media (max-width: 599px) {
  .lightbox__figure {
    padding: 72px 12px 24px;
  }

  .lightbox__nav {
    top: auto;
    bottom: 18px;
    margin-top: 0;
  }
}