/* =========================================================================
   MARK — main stylesheet

   Unbounded display + Poppins body, deep navy on white, flat square geometry,
   cool-gray cards and blue-tinted bands, statement-scale headings.

   The brand blue is placed in three weights:
     accent        fills and rules on light — buttons, icon squares, rules
     accent-deep   small text on light surfaces
     accent-light  anything sitting on the navy ground
   Dark sections use `navy` rather than `ink` so they read blue, not black.

   All colour, type and spacing tokens come from theme.json; this file
   contains no raw hex values.
   ========================================================================= */

/* ---------- 1. Reset & base ------------------------------------------- */

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

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* <picture> only wraps the <img> for WebP delivery — keep it out of the box tree
   so every existing `.media img` rule sizes the image exactly as before. */
picture {
  display: contents;
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-deep);
  outline-offset: 3px;
}

.is-dark :focus-visible {
  outline-color: var(--wp--preset--color--accent-light);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
}

.skip-link:focus-visible {
  left: var(--wp--preset--spacing--30);
  top: var(--wp--preset--spacing--30);
}

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

/* ---------- 2. Layout primitives --------------------------------------- */

/* Inset for the fixed corner controls. Back-to-top stacks 66px above the
   WhatsApp bubble, so both read off the same pair and never drift apart. */
:root {
  --mark-float-right: var(--wp--preset--spacing--50);
  --mark-float-bottom: var(--wp--preset--spacing--60);
}

.wrap {
  width: min(var(--wp--style--global--wide-size), 100% - 2 * var(--wp--preset--spacing--40));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--preset--spacing--40));
}

.section {
  padding-block: var(--wp--preset--spacing--70);
}

.section--chapter {
  padding-block: var(--wp--preset--spacing--80);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--band {
  background: var(--wp--preset--color--band);
}

/* Dark grounds use `navy` rather than the near-black `ink` so the bands read
   blue. Ink stays for headings and body text. */
.is-dark {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--card);
}

.is-dark :is(h1, h2, h3, h4) {
  color: var(--wp--preset--color--paper);
}

.is-dark a {
  color: var(--wp--preset--color--accent-light);
}

.is-dark a:hover {
  color: var(--wp--preset--color--paper);
}

/* ---------- 3. Rules & section heads ------------------------------------ */

/* A short solid bar, used under section headings in place of a full-width
   hairline. */
.stitch {
  border: 0;
  width: 72px;
  height: 3px;
  margin: 0;
  background: var(--wp--preset--color--accent);
}

.stitch--line {
  background: var(--wp--preset--color--line);
}

.stitch--sage {
  background: var(--wp--preset--color--sage);
}

.stitch--short {
  width: 72px;
}

.section-head {
  max-width: 720px;
  margin-block-end: var(--wp--preset--spacing--60);
}

.section-head .stitch {
  margin-block-start: var(--wp--preset--spacing--40);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Wider variant so a two-line heading with a manual break does not re-wrap. */
.section-head--wide {
  max-width: none;
}

/* Centred heads carry the same bar, centred. */
.section-head--center .stitch {
  margin-inline: auto;
  width: 72px;
  height: 3px;
  background: var(--wp--preset--color--accent);
}

.is-dark .stitch,
.is-dark .section-head--center .stitch {
  background: var(--wp--preset--color--accent-light);
}

/* ---------- 3b. Breadcrumb ---------------------------------------------- */

.breadcrumb {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--slate);
  margin-block-end: var(--wp--preset--spacing--40);
}

.breadcrumb a {
  color: var(--wp--preset--color--accent-deep);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--wp--preset--color--ink);
}

.breadcrumb__sep {
  margin-inline: 0.5em;
  color: var(--wp--preset--color--accent);
}

/* ---------- 4. Type components ----------------------------------------- */

.eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 var(--wp--preset--spacing--30);
}

.is-dark .eyebrow {
  color: var(--wp--preset--color--accent-light);
}

.eyebrow--sage {
  color: var(--wp--preset--color--sage-deep);
}

.lede {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  line-height: 1.55;
  max-width: 56ch;
}

/* Semibold carries a one- or two-line lede. Over three or four lines it reads
   as a wall, so the page introductions step down a weight and keep the size. */
.lede--long {
  font-weight: 500;
}

h1,
h2 {
  margin-block: 0 var(--wp--preset--spacing--40);
  text-wrap: balance;
}

/* ---------- 5. Buttons — square, display face, flat --------------------- */

.btn {
  display: inline-block;
  border: 1.5px solid transparent;
  border-radius: 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wp--custom--transition--base),
    color var(--wp--custom--transition--base),
    border-color var(--wp--custom--transition--base);
}

/* The primary action carries the brand blue. */
.btn--solid {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
}

.btn--solid:hover {
  background: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--paper);
}

/* On navy the button flips to white for separation from the ground. */
.is-dark .btn--solid {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

.is-dark .btn--solid:hover {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

.btn--ghost {
  background: transparent;
  border-color: currentcolor;
  color: var(--wp--preset--color--ink);
}

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

.is-dark .btn--ghost,
.hero .btn--ghost {
  color: var(--wp--preset--color--paper);
}

.is-dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--paper);
}

.btn--quiet {
  padding-inline: 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--accent-deep);
  position: relative;
}

.btn--quiet::after {
  content: "  →";
  color: var(--wp--preset--color--accent-deep);
  white-space: pre;
  transition: transform var(--wp--custom--transition--base);
  display: inline-block;
}

.btn--quiet:hover::after {
  transform: translateX(4px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------- 7. Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--paper);
  border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Front page: the header floats transparent over the hero with white nav. */
.home .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-block-end: 0;
}

/* Past the hero the header pins to the top as a solid bar, so navigation is
   always reachable on the way back up. */
.home .site-header--pinned {
  position: fixed;
  top: 0;
  background: var(--wp--preset--color--paper);
  border-block-end: 1px solid var(--wp--preset--color--line);
  animation: header-drop 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes header-drop {
  from {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .site-header--pinned {
    animation: none;
  }
}

/* Pinned, the bar is white — so the brand and nav return to their dark forms. */
.home .site-header--pinned .brand__logo {
  filter: none;
}

.home .site-header--pinned .site-nav a {
  color: var(--wp--preset--color--ink);
}

.home .site-header--pinned .site-nav a:hover,
.home .site-header--pinned .site-nav .current-menu-item > a,
.home .site-header--pinned .site-nav .current_page_item > a {
  border-block-end-color: var(--wp--preset--color--accent);
}

.home .site-header--pinned .header-cta .btn--ghost {
  color: var(--wp--preset--color--ink);
}

.home .site-header--pinned .nav-toggle__line {
  background: var(--wp--preset--color--ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  min-height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  text-decoration: none;
}

/* The MARK logo. One asset, recoloured to the brand blue; dark grounds get a
   white knockout via filter rather than a second file. */
.brand__logo {
  width: auto;
  height: 56px;
}

.home .brand__logo,
.brand__logo--footer {
  filter: brightness(0) invert(1);
}

.brand__logo--footer {
  height: 72px;
  margin-block-end: var(--wp--preset--spacing--30);
}

@media (max-width: 599px) {
  .brand__logo {
    height: 44px;
  }
}

.site-nav ul {
  display: flex;
  gap: var(--wp--preset--spacing--50);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  padding-block: var(--wp--preset--spacing--20);
  border-block-end: 2px solid transparent;
  transition: color var(--wp--custom--transition--base),
    border-color var(--wp--custom--transition--base);
}

.home .site-nav a {
  color: var(--wp--preset--color--paper);
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  border-block-end-color: var(--wp--preset--color--accent);
}

/* On the front page the header floats over the dark hero, so the underline
   takes the light blue to stay visible. */
.home .site-nav a:hover,
.home .site-nav .current-menu-item > a,
.home .site-nav .current_page_item > a {
  border-block-end-color: var(--wp--preset--color--accent-light);
}

/* Products dropdown --------------------------------------------------- */

.site-nav .menu-item-has-children {
  position: relative;
}

.site-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 7px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}

.site-nav .sub-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--20) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--wp--preset--color--ink);
  box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--wp--preset--color--ink) 75%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--wp--custom--transition--base),
    transform var(--wp--custom--transition--base),
    visibility var(--wp--custom--transition--base);
  z-index: 60;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav .sub-menu li {
  margin: 0;
}

.site-nav .sub-menu a,
.home .site-nav .sub-menu a {
  display: block;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--card);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  white-space: nowrap;
  border-block-end: 0;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu .current-menu-item > a {
  color: var(--wp--preset--color--accent-light);
  background: color-mix(in srgb, var(--wp--preset--color--card) 8%, transparent);
  border-block-end: 0;
}

.submenu-toggle {
  display: none;
}

/* On phones the dropdown becomes an inline, indented list (no hover). */
@media (max-width: 899px) {
  .site-nav .menu-item-has-children {
    position: static;
  }

  .site-nav .menu-item-has-children > a::after {
    display: none;
  }

  .site-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0 0 var(--wp--preset--spacing--30);
  }

  .site-nav .sub-menu a,
  .home .site-nav .sub-menu a {
    padding-block: var(--wp--preset--spacing--20);
    padding-inline-start: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--large);
    font-family: var(--wp--preset--font-family--body);
    color: color-mix(in srgb, var(--wp--preset--color--card) 78%, transparent);
  }
}

.header-cta {
  white-space: nowrap;
}

.home .header-cta .btn--ghost {
  color: var(--wp--preset--color--paper);
}

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  padding: var(--wp--preset--spacing--20);
  cursor: pointer;
}

.nav-toggle__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wp--preset--color--ink);
  margin-block: 5px;
  transition: transform var(--wp--custom--transition--base),
    opacity var(--wp--custom--transition--base);
}

.home .nav-toggle__line {
  background: var(--wp--preset--color--paper);
}

@media (max-width: 899px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 2;
  }

  .header-cta {
    display: none;
  }

  /* Full-screen menu: the panel fills everything below the header bar, and the
     bar itself turns dark while it is open so the two read as one surface. */
  .site-nav {
    position: fixed;
    inset-inline: 0;
    top: var(--mark-nav-top, 84px);
    bottom: 0;
    z-index: 1;
    display: none;
    background: var(--wp--preset--color--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  /* auto margins, not justify-content: center. Centred flex content overflows
     BOTH ends of its box and the top overflow cannot be scrolled to, so on a
     short viewport the first menu items were unreachable. Auto margins centre
     the list while it fits and collapse to 0 once it does not. */
  .site-nav.is-open > ul {
    margin-block: auto;
  }

  /* The page behind must not scroll while the menu covers it. */
  html.nav-open,
  body.nav-open {
    overflow: hidden;
  }

  /* Fixed, not sticky: the scroll lock above stops the document scrolling,
     which also stops a sticky header sticking — it would fall back to its
     static position and take the close button off-screen with it. */
  body.nav-open .site-header {
    position: fixed;
    inset-inline: 0;
    top: var(--mark-header-top, 0px);
    background: var(--wp--preset--color--ink);
    border-block-end: 0;
  }

  body.nav-open .brand__logo {
    filter: brightness(0) invert(1);
  }

  body.nav-open .nav-toggle__line {
    background: var(--wp--preset--color--paper);
  }

  /* The corner floats sit above the header's stacking context, so while the
     menu is open they would land on top of the links. They belong to the page,
     not the menu. */
  body.nav-open .wa-float,
  body.nav-open .to-top {
    display: none;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }

  .site-nav a,
  .home .site-nav a {
    display: block;
    padding-block: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--xx-large);
    font-family: var(--wp--preset--font-family--display);
    line-height: 1.2;
    color: var(--wp--preset--color--paper);
    border-block-end: 0;
  }

  /* Child 1 is the screen-reader label, so the three bars are children 2-4.
     Counting from 1 rotated the label and left the third bar horizontal. */
  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- 8. Hero — statement type over full-bleed photo -------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(100vh, 1000px);
  overflow: hidden;
  background: var(--wp--preset--color--ink);
}

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

/* The background is already dark where the headline sits, so this only steadies
   the type rather than dimming the photograph. Neutral — no colour cast. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.22) 42%,
    rgba(0, 0, 0, 0) 78%
  );
}

/* Phones crop to the middle of a landscape frame, so the left-to-right ramp
   no longer sits under the type. Shift toward the quieter left of the picture
   and shade top-to-bottom instead. */
@media (max-width: 899px) {
  .hero__media img {
    object-position: 22% center;
  }

  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.58) 48%,
      rgba(0, 0, 0, 0.72) 100%
    );
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  color: var(--wp--preset--color--paper);
  padding-block: calc(var(--wp--preset--spacing--80) + 84px) var(--wp--preset--spacing--80);
}

/* White over photography, where the pale blue loses contrast. */
.hero__content .eyebrow {
  color: var(--wp--preset--color--paper);
}

/* The statement: hero headline set huge in Unbounded, left-aligned. */
.hero__content h1 {
  font-size: var(--wp--preset--font-size--hero);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wp--preset--color--paper);
  margin-block-end: var(--wp--preset--spacing--50);
  max-width: 14ch;
}

.hero__content .lede {
  color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent);
  font-size: var(--wp--preset--font-size--large);
  max-width: 46ch;
}

.hero__stamp {
  position: absolute;
  z-index: 1;
  bottom: var(--wp--preset--spacing--50);
  right: var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-light);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-light) 55%, transparent);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

@media (max-width: 599px) {
  .hero__stamp {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-rise 640ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  .hero__content > *:nth-child(2) {
    animation-delay: 110ms;
  }

  .hero__content > *:nth-child(3) {
    animation-delay: 220ms;
  }

  .hero__content > *:nth-child(4) {
    animation-delay: 330ms;
  }

  @keyframes hero-rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ---------- 9. Category ticker ------------------------------------------ */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--paper);
}

.marquee__track {
  display: flex;
  gap: var(--wp--preset--spacing--60);
  width: max-content;
  padding-block: var(--wp--preset--spacing--40);
}

.marquee__dup {
  display: flex;
  gap: var(--wp--preset--spacing--60);
}

.marquee__item {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  white-space: nowrap;
  color: var(--wp--preset--color--ink);
}

.marquee__item::before {
  content: "→ ";
  color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee-scroll 44s linear infinite;
  }

  @keyframes marquee-scroll {
    to {
      transform: translateX(-50%);
    }
  }
}

/* ---------- 11. Icon service cards -------------------------------------- */

.icon-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}

/* minmax(0, 1fr), not 1fr: a long unbreakable word sets a grid item's minimum
   to its min-content width, which pushes the columns out of true and overflows
   the page on a narrow phone. */
@media (max-width: 1099px) {
  .icon-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* These four sit between two strong photographic sections, so they need enough
   weight to hold their own: a brand rule along the top, real padding, and a
   lift on hover. */
.icon-card {
  position: relative;
  background: var(--wp--preset--color--card);
  padding: var(--wp--preset--spacing--50);
  border-block-start: 3px solid var(--wp--preset--color--accent);
  transition: background var(--wp--custom--transition--base),
    transform var(--wp--custom--transition--base),
    box-shadow var(--wp--custom--transition--base);
}

.icon-card:hover {
  background: var(--wp--preset--color--band);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

.icon-card__glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
  margin-block-end: var(--wp--preset--spacing--40);
}

.icon-card__glyph svg {
  width: 30px;
  height: 30px;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-card h3 {
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.2;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.icon-card p {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--medium);
}

.icon-card .btn--quiet {
  font-size: var(--wp--preset--font-size--x-small);
}

/* Kept two-up on phones. Stacked, these four turned a supporting section into a
   long scroll, so the card is trimmed to fit the narrower column instead. */
@media (max-width: 599px) {
  .icon-card {
    padding: var(--wp--preset--spacing--40);
  }

  .icon-card__glyph {
    width: 44px;
    height: 44px;
    margin-block-end: var(--wp--preset--spacing--30);
  }

  .icon-card__glyph svg {
    width: 22px;
    height: 22px;
  }

  .icon-card h3 {
    font-size: var(--wp--preset--font-size--large);
    overflow-wrap: break-word;
  }

  .icon-card p {
    font-size: var(--wp--preset--font-size--small);
  }
}

/* ---------- 12. Headline figures ---------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

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

.stat {
  border-block-start: 2px solid var(--wp--preset--color--accent);
  padding-block-start: var(--wp--preset--spacing--40);
}

.stat__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: 600;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  margin: 0 0 var(--wp--preset--spacing--20);
}

.is-dark .stat__value {
  color: var(--wp--preset--color--paper);
}

.stat__label {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- 13. Cards & grids ------------------------------------------- */

.grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}

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

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

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

@media (max-width: 599px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--card);
  overflow: hidden;
  transition: background var(--wp--custom--transition--base);
}

.card:hover {
  background: var(--wp--preset--color--band);
}

.card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wp--preset--color--line);
}

/* Wide variant for cards that sit two-up. The ratio holds while the column is
   narrow; past ~510px it would run the photo to 450px tall and push the copy
   off the fold, so the height caps and the image crops to a band instead. */
.card__media--wide {
  /* Width stated explicitly so the ratio only ever resolves the height —
     otherwise the capped height would pull the box narrower than its column. */
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 340px;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--transition--slow);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: var(--wp--preset--spacing--40);
}

.card__kicker {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 var(--wp--preset--spacing--10);
}

.card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  margin: 0 0 var(--wp--preset--spacing--20);
}

.card__text {
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
}

.badge-eco {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--paper);
  background: var(--wp--preset--color--sage-deep);
  padding: 2px var(--wp--preset--spacing--20);
}

/* ---------- 14. Proof list ---------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

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

/* Modifier classes rather than an inline grid-template-columns: an inline
   style outranks the media query above, so the pair would never collapse. */
.proof--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* One column of four, so the list stands as tall as the photograph beside it
   instead of leaving the section half empty. */
.proof--stack {
  grid-template-columns: 1fr;
  align-content: space-between;
}

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

.proof__item {
  border-block-start: 1px solid var(--wp--preset--color--line);
  padding-block-start: var(--wp--preset--spacing--40);
}

.is-dark .proof__item {
  border-block-start-color: color-mix(in srgb, var(--wp--preset--color--card) 25%, transparent);
}

.proof__label {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 var(--wp--preset--spacing--20);
}

.is-dark .proof__label {
  color: var(--wp--preset--color--accent-light);
}

.proof__item h3 {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
}

.proof__item p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

/* ---------- 15. Split sections ------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--70);
  align-items: center;
}

@media (max-width: 899px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);
  }
}

.split__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.split__media--landscape {
  aspect-ratio: 3 / 2;
}

/* Collection page hero: matches the 3:4 crop of the category photography, so
   the image is placed rather than cropped a second time. */
.split__media--hero {
  aspect-ratio: 3 / 4;
}

/* For squarer photography that would lose detail in the 3:2 box. */
.split__media--4x3 {
  aspect-ratio: 4 / 3;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 16. Collections mosaic (front page, About) -----------------
   A five-card editorial mosaic: two wide feature cards over a three-up row.
   Full-bleed photography with a bottom scrim carrying kicker + title + CTA. */

.collections {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--wp--preset--spacing--40);
}

.collection {
  position: relative;
  display: block;
  overflow: hidden;
  grid-column: span 2;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  background: var(--wp--preset--color--slate);
}

.collection--feature {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}

.collection img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--transition--slow);
}

.collection:hover img {
  transform: scale(1.05);
}

.collection__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 45%,
    transparent 100%
  );
  color: var(--wp--preset--color--paper);
}

.collection__kicker {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* White, not the pale blue: this label sits over photography, where a light
     tint loses legibility against bright areas of the image. */
  color: var(--wp--preset--color--paper);
  margin-block-end: var(--wp--preset--spacing--10);
}

.collection__title {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500;
  line-height: 1.15;
  color: var(--wp--preset--color--paper);
}

.collection__cta {
  display: inline-block;
  margin-block-start: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--wp--custom--transition--base),
    transform var(--wp--custom--transition--base);
}

.collection__cta::after {
  content: "  →";
  color: currentcolor;
  white-space: pre;
}

.collection:hover .collection__cta,
.collection:focus-visible .collection__cta {
  opacity: 1;
  transform: none;
}

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

  .collection,
  .collection--feature {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
}

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

  /* On phones the CTA can't be hovered — show it by default. */
  .collection__cta {
    opacity: 1;
    transform: none;
  }
}

/* Even variant — all five collections at equal size, one row on desktop.
   Used on the About page's "what we manufacture" band. Declared after the
   base rules so its columns win. */

.collections--even {
  grid-template-columns: repeat(5, 1fr);
}

.collections--even .collection,
.collections--even .collection--feature {
  grid-column: span 1;
  aspect-ratio: 4 / 5;
}

.collections--even .collection__body {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.collections--even .collection__title {
  font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 1099px) {
  .collections--even {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .collections--even {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .collections--even {
    grid-template-columns: 1fr;
  }
}

/* ---------- 16b. Product gallery (collection pages) ---------------------
   Same card as the material list on the sustainable page: photo, name, one line
   of description, and the WhatsApp enquiry. No dialog — the card carries
   everything a visitor needs before they message. */

/* The bar stays hidden until main.js marks it ready, so a visitor without JS
   gets the full grid instead of buttons that cannot do anything. */
.filter-bar {
  display: none;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  margin-block-end: var(--wp--preset--spacing--50);
}

.filter-bar--ready {
  display: flex;
}

.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--slate);
  cursor: pointer;
  transition: border-color var(--wp--custom--transition--base),
    color var(--wp--custom--transition--base),
    background var(--wp--custom--transition--base);
}

.filter-bar__btn:hover {
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
}

.filter-bar__btn.is-active {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
}

.filter-bar__count {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.75em;
  opacity: 0.6;
}

.filter-bar__empty {
  margin-block-start: var(--wp--preset--spacing--50);
  text-align: center;
  color: var(--wp--preset--color--slate);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}

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

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

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

/* The author-level `display: flex` above outranks the UA sheet's `[hidden]`,
   so the filter could not hide a card without this. */
.product-card[hidden] {
  display: none;
}

.product-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--line);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--transition--slow);
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

/* Column, so the button can be pushed to the bottom edge — descriptions run to
   different lengths and the actions should still line up across a row. */
.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--wp--preset--spacing--40);
}

.product-card__name {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--large);
}

.product-card__text {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small);
}

.product-card .btn--wa {
  margin-block-start: auto;
  align-self: flex-start;
}

/* Brand dark blue: on a product card this is a MARK enquiry that happens to
   open WhatsApp, so it stays in the brand rather than the channel's colour.
   The glyph still names the channel. */
.btn--wa {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--paper);
}

.btn--wa:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.btn--wa svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentcolor;
}

/* ---------- 17. Process ------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--50);
  counter-reset: step;
}

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

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

.step {
  counter-increment: step;
  border-block-start: 1px solid var(--wp--preset--color--line);
  padding-block-start: var(--wp--preset--spacing--40);
}

.step::before {
  content: "0" counter(step);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
}

.step h3 {
  font-size: var(--wp--preset--font-size--medium);
  margin: var(--wp--preset--spacing--20) 0;
}

.step p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

/* ---------- 18. Chips --------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

.chip {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--line);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--slate);
  text-decoration: none;
  transition: border-color var(--wp--custom--transition--base),
    color var(--wp--custom--transition--base),
    background var(--wp--custom--transition--base);
}

.chip:hover {
  border-color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.is-dark .chip {
  border-color: color-mix(in srgb, var(--wp--preset--color--card) 30%, transparent);
  color: var(--wp--preset--color--card);
}

.is-dark .chip:hover {
  border-color: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent-light);
  background: transparent;
}

/* ---------- 19. Offices & map ------------------------------------------- */

.offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}

/* Four-up variant: the eight locations fall into two clean rows. The
   narrower breakpoints below still apply, since they come later. */
.offices--4 {
  grid-template-columns: repeat(4, 1fr);
}

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

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

.office {
  background: var(--wp--preset--color--card);
  padding: var(--wp--preset--spacing--40);
}

.office h3 {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--medium);
}

.office p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.7;
}

.office__hq {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
}

.map-embed {
  overflow: hidden;
  margin-block-start: var(--wp--preset--spacing--60);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---------- 20. FAQ ------------------------------------------------------ */

/* Two independent stacks rather than a two-column grid. In a grid each row
   sizes to its tallest cell, so an open answer left dead space beside it;
   here each column flows on its own and an open item only pushes the items
   below it. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--20);
  align-items: start;
}

.faq__col {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

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

.faq details {
  background: var(--wp--preset--color--card);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 300;
  color: var(--wp--preset--color--accent-deep);
  transition: transform var(--wp--custom--transition--base);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  margin: 0;
  padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--medium);
  max-width: 68ch;
}

/* ---------- 21. Contact ------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--wp--preset--spacing--70);
  align-items: start;
}

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

.form-field {
  margin-block-end: var(--wp--preset--spacing--40);
}

.form-field label {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--slate);
  margin-block-end: var(--wp--preset--spacing--20);
}

.form-field :is(input, textarea, select) {
  width: 100%;
  padding: var(--wp--preset--spacing--30);
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--card);
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color var(--wp--custom--transition--base),
    background var(--wp--custom--transition--base);
}

.form-field :is(input, textarea):focus {
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--ink);
  outline: none;
}

.form-field textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Anti-spam field: removed from the accessibility tree and from view, but
   still submitted, so automated fillers reveal themselves. */
.form-field--website {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-notice {
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  margin-block-end: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--medium);
}

.form-notice--ok {
  background: color-mix(in srgb, var(--wp--preset--color--sage) 14%, var(--wp--preset--color--paper));
  border: 1px solid var(--wp--preset--color--sage);
  color: var(--wp--preset--color--sage-deep);
}

.form-notice--error {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--paper));
  border: 1px solid var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--slate);
}

/* ---------- 22. CTA band ------------------------------------------------ */

.cta-band {
  text-align: center;
}

.cta-band h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.cta-band .btn-row {
  justify-content: center;
}

/* ---------- 23. WhatsApp float ------------------------------------------ */

/* Back to top — sits above the WhatsApp bubble, appears once the visitor is
   far enough down the page for it to be useful. */
.to-top {
  position: fixed;
  right: var(--mark-float-right);
  bottom: calc(var(--mark-float-bottom) + 66px);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 50%;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--wp--custom--transition--base),
    transform var(--wp--custom--transition--base),
    visibility var(--wp--custom--transition--base),
    background var(--wp--custom--transition--base),
    color var(--wp--custom--transition--base);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
}

.to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentcolor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-float {
  position: fixed;
  right: var(--mark-float-right);
  bottom: var(--mark-float-bottom);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wp--preset--color--whatsapp-deep);
  color: var(--wp--preset--color--paper);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent);
  transition: background var(--wp--custom--transition--base),
    transform var(--wp--custom--transition--base);
}

.wa-float:hover {
  background: var(--wp--preset--color--whatsapp);
  transform: translateY(-2px);
}

.wa-float svg {
  width: 26px;
  height: 26px;
  fill: currentcolor;
}

/* ---------- 24. Materials list (sustainable page) ------------------------ */

.materials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}

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

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

.material {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

.material__swatch {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--line);
}

.material__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--transition--slow);
}

.material:hover .material__swatch img {
  transform: scale(1.04);
}

.material__body {
  padding: var(--wp--preset--spacing--40);
}

.material h3 {
  margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--large);
}

.material p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

.is-eco .eyebrow,
.is-eco .card__kicker,
.is-eco .proof__label {
  color: var(--wp--preset--color--sage-deep);
}

.is-eco .stitch {
  background: linear-gradient(
    to right,
    var(--wp--preset--color--sage) 0 56px,
    var(--wp--preset--color--line) 56px
  );
}

/* ---------- 25. Footer --------------------------------------------------- */

.site-footer {
  /* Deeper than the navy bands so the page still steps down at the end, but
     mixed toward navy so the footer reads blue rather than black. */
  background: color-mix(in srgb, var(--wp--preset--color--navy) 60%, var(--wp--preset--color--ink));
  color: var(--wp--preset--color--card);
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.site-footer .stitch {
  background: linear-gradient(
    to right,
    var(--wp--preset--color--accent-light) 0 56px,
    color-mix(in srgb, var(--wp--preset--color--card) 20%, transparent) 56px
  );
  margin-block-end: var(--wp--preset--spacing--60);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--wp--preset--spacing--60);
}

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

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

.site-footer h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--paper);
  margin: 0 0 var(--wp--preset--spacing--30);
}

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

.site-footer li {
  margin-block-end: var(--wp--preset--spacing--20);
}

.site-footer a {
  color: var(--wp--preset--color--card);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
}

.site-footer a:hover {
  color: var(--wp--preset--color--accent-light);
}

.footer-brand p {
  font-size: var(--wp--preset--font-size--small);
  max-width: 34ch;
  margin: 0;
}


.footer-legal {
  margin-block-start: var(--wp--preset--spacing--60);
  padding-block-start: var(--wp--preset--spacing--40);
  border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--card) 20%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--wp--preset--color--card) 65%, transparent);
}

/* ---------- 26. Scroll reveal ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 27. Utility -------------------------------------------------- */

.text-center {
  text-align: center;
}

.mt-0 {
  margin-block-start: 0;
}

/* ---------- 28. Quote modal --------------------------------------------- */

.quote-modal {
  border: 0;
  padding: 0;
  width: min(560px, calc(100% - 2 * var(--wp--preset--spacing--40)));
  max-width: 560px;
  max-height: calc(100dvh - 2 * var(--wp--preset--spacing--40));
  overflow: auto;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--slate);
  box-shadow: 0 40px 100px -30px color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
}

.quote-modal::backdrop {
  background: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);
}

.modal-open {
  overflow: hidden;
}

.quote-modal__panel {
  position: relative;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.quote-modal h2 {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.1;
}

.quote-modal__lede {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.55;
  margin: 0 0 var(--wp--preset--spacing--50);
}

.quote-modal .form-field {
  margin-block-end: var(--wp--preset--spacing--30);
}

.quote-modal textarea {
  min-height: 6rem;
}

.quote-modal .btn--solid {
  width: 100%;
  text-align: center;
}

.quote-modal__alt {
  margin: var(--wp--preset--spacing--40) 0 0;
  font-size: var(--wp--preset--font-size--small);
}

.quote-modal__close {
  position: absolute;
  top: var(--wp--preset--spacing--30);
  right: var(--wp--preset--spacing--30);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}

.quote-modal__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.quote-modal__close:hover {
  color: var(--wp--preset--color--accent-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .quote-modal[open] {
    animation: quote-rise 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @keyframes quote-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}

/* ---------- 29. Mobile touch targets ------------------------------------- */

@media (max-width: 899px) {
  /* 44x44 minimum tap area on every contact link. Padding is negated with a
     matching negative margin so the visual rhythm is unchanged. */
  .site-footer a[href^="tel:"],
  .site-footer a[href^="mailto:"],
  .site-footer a[href*="wa.me"],
  .office a[href^="tel:"],
  .office a[href^="mailto:"],
  .quote-modal__alt a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--wp--preset--spacing--20);
    margin-block: calc(-1 * var(--wp--preset--spacing--20));
  }

  .to-top {
    width: 48px;
    height: 48px;
  }
}

/* Placeholder shown until the map embed is attached. */
.map-embed {
  position: relative;
  min-height: 400px;
  background: var(--wp--preset--color--card);
}

.map-embed__load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--wp--preset--spacing--10);
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--accent-deep);
}

.map-embed__load span {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.map-embed__load small {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--slate);
}

.map-embed__load:hover span {
  color: var(--wp--preset--color--ink);
}

/* Add to Quote opens WhatsApp, but it is a MARK action inside a MARK dialog,
   so it carries the brand's dark blue rather than WhatsApp green. */
.btn--order {
  background: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--paper);
}

.btn--order:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

/* ---------- Contact hero band -------------------------------------------- */

.contact-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--wp--preset--spacing--80);
}

.contact-hero__media,
.contact-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.4) 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.contact-hero__content {
  position: relative;
  z-index: 1;
}

.contact-hero__content h1 {
  color: var(--wp--preset--color--paper);
}

.contact-hero__content .lede {
  color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
}

/* The deferred map should read as a card waiting to be opened, not as a hole
   in the page. */
.map-embed {
  border: 1px solid var(--wp--preset--color--line);
}

.map-embed__load::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto var(--wp--preset--spacing--20);
  border: 2px solid currentcolor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}