/* ==========================================================================
   Aldo Bunker Solutions - main stylesheet

   1  Fonts            5  Layout            9  Services          13 Legal pages
   2  Tokens           6  Header and menu   10 About             14 Footer
   3  Base             7  Buttons, links    11 Contact form      15 Preloader, cursor
   4  Typography       8  Hero              12 Product pages     16 Motion states

   FONT SWAP: three roles, three CSS variables (section 2).
   - Titles:      "GT Super"  -> stand-in Playfair Display (no Light 300, renders 400)
   - Descriptions "neue-haas-grotesk-display" -> stand-in Inter
   - Statement    "Gotham"    -> stand-in Montserrat Light
   To use the licensed fonts, add their @font-face (or the Adobe Fonts kit link)
   and keep the family names below: the stack picks them up first.
   ========================================================================== */


/* 1  Fonts (self-hosted, Latin subset, no third-party requests)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2  Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour: two brand values plus tints derived from them */
  --bg: #F7F7F4;
  --ink: #003d85;
  --ink-soft: rgba(0, 61, 133, 0.75);   /* secondary text, placeholders (5:1 on --bg) */
  --line: rgba(0, 61, 133, 0.3);        /* thin input borders */
  --line-hover: rgba(0, 61, 133, 0.55);
  --rule: #C9C9C3;                      /* the grey divider */
  --white: #ffffff;
  --error: #a12a1f;                     /* functional state colour (6.8:1 on --bg) */

  /* Type families: see FONT SWAP above */
  --font-display: "GT Super", "Playfair Display", serif;
  --font-body: "neue-haas-grotesk-display", "Neue Haas Grotesk Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-statement: "Gotham", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-nav: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* header and menu only */

  /* Type scale
     title      brief: 34.125px at 1365px via clamp(26px, 2.5vw, 2.5vw)
     desc       brief: 36px / 40px on desktop; scales down on phones
     statement  brief: ~68px / 95% via clamp(55px, 5vw, 7.4vw) from 768px up;
                a smaller clamp below 768px keeps long words inside a phone screen */
  --fs-title: clamp(26px, 2.5vw, 2.5vw);
  --fs-desc: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  --lh-desc: 1.2;
  --fs-statement: clamp(2.125rem, 9.6vw, 3.4375rem);
  --lh-statement: 1.02;
  --fs-hero: clamp(2.75rem, 7.4vw, 6rem);
  --fs-body: 1.0625rem;

  /* Space and layout */
  --gutter: clamp(1rem, 4.4vw, 4rem);
  --maxw: 1400px;
  --header-h: 64px;
  --section-y: clamp(72px, 11vw, 168px);
  --col-gap: clamp(16px, 2vw, 32px);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* strong ease-in-out for movement across the screen */
}

@media (min-width: 768px) {
  :root {
    --fs-statement: clamp(55px, 5vw, 7.4vw);
    --lh-statement: 0.95;
    --lh-desc: 1.1111;
    --header-h: 72px;
  }
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 61, 133, 0.45) transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
picture { display: contents; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 400;
  padding: 12px 20px; background: var(--ink); color: var(--bg);
  font-weight: 500; font-size: 0.9375rem;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline-color: var(--bg); }

.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }


/* 4  Typography
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section-title > span { display: block; }

.desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.statement {
  font-family: var(--font-statement);
  font-weight: 300;
  font-size: var(--fs-statement);
  line-height: var(--lh-statement);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}


/* The underlined word in the About statement. The line is a real element with data-reveal="rule",
   so it draws in from the left when the statement scrolls into view, and is simply there without
   motion or JavaScript. */
.statement__mark { position: relative; display: inline-block; }
.statement__line { position: absolute; left: 0; right: 0; bottom: 0.03em; height: max(2px, 0.05em); background: currentColor; }

/* 5  Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule);
}

/* Two-column split: narrow side (title) and wide main. Stacks on phones. */
.split-grid { display: grid; gap: clamp(20px, 4vw, 40px); }
@media (min-width: 900px) {
  .split-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .split-grid__side { grid-column: 1 / 5; }
  .split-grid__main { grid-column: 5 / 13; }
}


/* 6  Header and menu
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--ink);
  background: rgba(247, 247, 244, 0.94);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .header { background: rgba(247, 247, 244, 0.92); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); }
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* Over the hero: transparent with white type until the page scrolls (needs JS) */
.js .header--overlay:not(.is-scrolled):not(.is-menu-open) {
  background: transparent;
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.js .header--overlay:not(.is-scrolled):not(.is-menu-open) :focus-visible { outline-color: var(--white); }
.header.is-menu-open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Brand: text placeholder until the logo file arrives */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 1; min-height: 44px; justify-content: center; }
.brand__mark { font-family: var(--font-display); font-weight: 300; font-size: 28px; letter-spacing: 0.16em; padding-left: 0.02em; }
.brand__sub { font-family: var(--font-body); font-weight: 500; font-size: 7.5px; letter-spacing: 0.44em; padding-left: 0.02em; }

/* Desktop nav */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
  .nav__list { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
}
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-nav); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.005em; white-space: nowrap;
}
.nav .btn { margin-left: 4px; }
.js .header--overlay:not(.is-scrolled):not(.is-menu-open) .btn {
  --btn-bg: transparent; --btn-fg: var(--white); --btn-hover-bg: var(--white); --btn-hover-fg: var(--ink);
  border-color: var(--white);
}

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 4px;
  font-family: var(--font-nav); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.menu-toggle__bars { position: relative; width: 26px; height: 10px; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: top 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 4.5px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }   /* must follow the base rule above */

/* Full-screen menu (phones and tablets) */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + clamp(24px, 6vh, 56px)) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.menu-open .menu {
  visibility: visible;
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.55s var(--ease-out), visibility 0s;
}
.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .menu { display: none; } }

.menu__list { display: grid; gap: 4px; }
.menu__link {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--font-nav); font-weight: 500;
  font-size: clamp(1.75rem, 7.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);   /* the divider spans the whole screen */
  border-bottom: 1px solid var(--rule);
}
.menu__list li,
.menu__cta,
.menu__legal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.menu-open .menu__list li,
.menu-open .menu__cta,
.menu-open .menu__legal {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(0.12s + var(--i, 0) * 0.055s);
}
.menu__cta { margin-top: clamp(24px, 5vh, 40px); }
.menu__cta .btn { width: 100%; }
.menu__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: auto; padding-top: 32px; font-size: 0.875rem; }
.menu__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* No JavaScript on a phone: the menu is a plain block under the header */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .menu { position: static; visibility: visible; clip-path: none; padding-top: calc(var(--header-h) + 16px); }
html:not(.js) .menu__list li,
html:not(.js) .menu__cta,
html:not(.js) .menu__legal { opacity: 1; transform: none; }
html:not(.js) .header { position: absolute; }


/* 7  Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-hover-bg: var(--bg); --btn-hover-fg: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em;
  white-space: nowrap; text-align: center;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.12s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover-bg);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--btn-hover-fg); }
  .btn:hover::before { transform: scaleY(1); }
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.header .btn,
.menu .btn { font-family: var(--font-nav); font-weight: 600; letter-spacing: 0.01em; }   /* the header and menu quote buttons */

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* Text link with underline that draws in */
.u-link { position: relative; display: inline-block; }
.u-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .u-link:hover::after,
  a:hover > .u-link::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.u-link:focus-visible::after,
a:focus-visible > .u-link::after,
.u-link[aria-current="page"]::after,
[aria-current="page"] > .u-link::after { transform: scaleX(1); }

/* "Discover Aldo Bunker" + arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-weight: 500; font-size: 1rem; letter-spacing: 0.01em;
}
.link-arrow__label {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em;
  transition: text-underline-offset 0.35s var(--ease-out);
}
.link-arrow .icon { transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .icon { transform: translateX(6px); }
  .link-arrow:hover .link-arrow__label { text-underline-offset: 0.5em; }
}


/* 8  Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  min-height: 100vh; min-height: 100svh;
  background: #00265a;
  color: var(--white);
}
.hero__media { grid-area: 1 / 1; position: relative; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); }
@media (max-aspect-ratio: 1/1) { .hero__img { object-position: var(--hero-pos-portrait, var(--hero-pos, 50% 50%)); } }   /* phones and tablets held upright */
.hero__heading { font: inherit; letter-spacing: inherit; }
.hero__title, .hero__sub { display: block; }
/* Legibility scrim: darker under the headline, soft at the top for the header. --scrim-top and --scrim-bottom
   set per photo on .hero__media: a photo that is already dark needs less, and less means a truer picture. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0, 20, 52, var(--scrim-bottom, 0.72)) 0%, rgba(0, 20, 52, calc(var(--scrim-bottom, 0.72) * 0.42)) 46%, rgba(0, 20, 52, 0) 72%),
    linear-gradient(to bottom, rgba(0, 20, 52, var(--scrim-top, 0.6)) 0%, rgba(0, 20, 52, 0) 32%);
}
.hero__content {
  grid-area: 1 / 1; position: relative; align-self: end;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(40px, 9vh, 104px);
}
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__sub {
  margin-top: clamp(16px, 2.4vw, 28px); max-width: 28ch;
  font-size: var(--fs-desc); line-height: var(--lh-desc); letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero--page { min-height: clamp(440px, 72vh, 720px); min-height: clamp(440px, 72svh, 720px); }


/* 9  Services
   -------------------------------------------------------------------------- */
.services { padding-block: var(--section-y) calc(var(--section-y) * 0.7); }
.services__head { margin-bottom: clamp(40px, 6vw, 88px); }

.service { display: grid; gap: clamp(20px, 3vw, 32px); }
.service + .service { margin-top: clamp(40px, 5vw, 72px); }   /* small gap: blocks never touch */

.media { display: block; position: relative; overflow: hidden; background: #dfe5ec; aspect-ratio: 4 / 3; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .media img, .media:hover img { transform: scale(1.035); }
}

.service__name {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-title); line-height: 1.2; letter-spacing: 0.01em;
}
.service__desc { margin-top: clamp(14px, 1.6vw, 20px); max-width: 20em; }
.service__link { margin-top: clamp(20px, 2.4vw, 32px); }

@media (min-width: 900px) {
  .service { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .service__media { grid-column: 1 / 8; grid-row: 1; }
  .service__body { grid-column: 8 / 13; grid-row: 1; padding-left: clamp(0px, 2.6vw, 40px); }
  .service--reverse .service__media { grid-column: 6 / 13; }
  .service--reverse .service__body { grid-column: 1 / 6; padding-left: 0; padding-right: clamp(0px, 2.6vw, 40px); }
}


/* 10 About
   -------------------------------------------------------------------------- */
.about { padding-top: calc(var(--section-y) * 0.5); }
.about__top { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 104px); }
@media (min-width: 900px) {
  .about__top .split-grid__side { grid-column: 1 / 5; }
  .about__top .split-grid__main { grid-column: 5 / 13; }
}
.about__bottom { display: grid; gap: clamp(28px, 4vw, 40px); padding-block: clamp(40px, 6vw, 88px) var(--section-y); align-items: start; }
.about__media { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .about__bottom { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .about__text { grid-column: 1 / 6; }            /* flush with the left edge of the page grid */
  .about__media { grid-column: 7 / 13; }
}


/* 11 Contact and quote form
   -------------------------------------------------------------------------- */
.contact {
  /* The one inverted band. These local tokens flip, so the form, buttons, focus rings
     and links inside follow without extra rules. */
  --ink: #ffffff;
  --bg: #003d85;
  --ink-soft: rgba(255, 255, 255, 0.78);   /* secondary text, placeholders (about 6.5:1 on the blue) */
  --line: rgba(255, 255, 255, 0.5);        /* input borders (3.8:1) */
  --line-hover: rgba(255, 255, 255, 0.8);
  --rule: rgba(255, 255, 255, 0.3);
  --error: #ffb4a8;                        /* 6.2:1 on the blue */
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(64px, 9vw, 136px);
  scroll-margin-top: -8px;   /* cancels the 8px in scroll-padding, so the band meets the header */
}
.contact__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
.contact__intro .desc { margin-top: clamp(16px, 2vw, 24px); max-width: 16em; }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .contact__intro { grid-column: 1 / 6; }
  .contact__form { grid-column: 7 / 13; }
}

.contact__form { scroll-margin-top: calc(var(--header-h) + 24px); }
.quote-form { display: grid; gap: 22px; align-content: start; }
.quote-form[hidden], .form-success[hidden], .field__error[hidden], .form-status[hidden] { display: none; }
.form-note { font-size: 0.875rem; color: var(--ink-soft); }

.field { display: grid; gap: 8px; }
.field__label { font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em; }
.field__control {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.4;
  caret-color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field__control[type="tel"] { font-variant-numeric: tabular-nums; }
.field__control::placeholder { color: var(--ink-soft); opacity: 1; }
textarea.field__control { min-height: 156px; resize: vertical; }
@media (hover: hover) and (pointer: fine) {
  .field__control:hover { border-color: var(--line-hover); }
}
.field__control:focus {
  outline: none; border-color: var(--ink); background: rgba(0, 61, 133, 0.035); box-shadow: 0 0 0 1px var(--ink);
}
.field.has-error .field__control { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.contact .field__control:focus { background: rgba(255, 255, 255, 0.07); }
.contact .field__control:-webkit-autofill,
.contact .field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--bg) inset;
}
.contact input::-webkit-calendar-picker-indicator { filter: invert(1); }
.field__error { font-size: 0.875rem; line-height: 1.4; color: var(--error); }

.check { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding-block: 4px; cursor: pointer; }
.check__box {
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center;
  width: 24px; height: 24px; margin: 1px 0 0; border: 1px solid var(--line-hover); border-radius: 0; background: transparent;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.check__box::after {
  content: ""; width: 11px; height: 6px; margin-top: -2px;
  border-left: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.18s var(--ease-out);
}
.check__box:checked { background: var(--ink); border-color: var(--ink); }
.check__box:checked::after { transform: rotate(-45deg) scale(1); }
.check__text { font-size: 0.9375rem; line-height: 1.5; }
.check__text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.field.has-error .check__box { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.form-status { padding: 14px 16px; border: 1px solid var(--error); color: var(--error); font-size: 0.9375rem; line-height: 1.45; }
.form-actions { display: grid; gap: 14px; }
.form-actions .btn { width: 100%; }
@media (min-width: 768px) { .form-actions .btn { width: auto; justify-self: start; } }

.form-success { display: grid; gap: 14px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); }
.form-success:focus { outline: none; }
.form-success__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-title); line-height: 1.2; }
.form-success__note { font-size: 0.875rem; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-soft); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* 12 Product pages
   -------------------------------------------------------------------------- */
.breadcrumb { padding-top: clamp(20px, 3vw, 32px); font-size: 0.875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.breadcrumb li { display: flex; align-items: center; min-height: 44px; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: 0.55; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

.block { padding-top: clamp(24px, 4vw, 56px); }
.block__inner { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 112px); }

/* Showcase: products as chapters. Without JavaScript, and on phones, each chapter is an image
   followed by its text. With JavaScript on a wide screen the images share one pinned stage and
   cross-fade as the text scrolls past (main.js marks the chapter in view with .is-active). */
.showcase { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: clamp(32px, 4.5vw, 64px); }
.chapter { display: grid; gap: clamp(20px, 3vw, 32px); align-content: start; }
.chapter__media { position: relative; overflow: hidden; background: #dfe5ec; aspect-ratio: 4 / 3; }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; }
.chapter__name { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-title); line-height: 1.2; letter-spacing: 0.01em; }
.chapter__text { margin-top: clamp(12px, 1.6vw, 18px); max-width: 32em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; text-wrap: pretty; }
.chapter__adv { margin-top: clamp(20px, 2.6vw, 32px); }
.chapter__adv-title { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.advantages { display: grid; gap: 2px; margin-top: 10px; max-width: 32em; }
.advantages li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 5px; font-size: 1.0625rem; line-height: 1.45; }
.advantages .icon { width: 20px; height: 20px; margin-top: 1px; }

@media (min-width: 900px) {
  html.js:not(.js-failed) .showcase {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(var(--n), auto);
    column-gap: var(--col-gap); row-gap: 0;
  }
  html.js:not(.js-failed) .chapter { display: contents; }
  html.js:not(.js-failed) .chapter__media {
    grid-column: 1 / 7; grid-row: 1 / span var(--n);
    position: sticky; top: calc(var(--header-h) + 32px); align-self: start;
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s var(--ease-out);
  }
  html.js:not(.js-failed) .chapter__media.is-active { opacity: 1; }
  html.js:not(.js-failed) .chapter__media img { transform: scale(1.05); transition: transform 1.2s var(--ease-out); }
  html.js:not(.js-failed) .chapter__media.is-active img { transform: scale(1); }
  html.js:not(.js-failed) .chapter__body {
    grid-column: 8 / 13; align-self: center;
    display: flex; flex-direction: column; justify-content: center;
    min-height: max(68svh, 440px); padding-block: clamp(32px, 5vw, 64px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js:not(.js-failed) .chapter__media { transition: opacity 0.2s ease-out; }
  html.js:not(.js-failed) .chapter__media img { transform: none; transition: none; }
}

.cta-band__inner { display: grid; gap: clamp(20px, 3vw, 32px); padding-block: clamp(40px, 6vw, 88px); align-items: center; }
.cta-band .desc { max-width: 18em; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .cta-band .desc { grid-column: 1 / 8; }
  .cta-band__action { grid-column: 9 / 13; justify-self: start; }
}
.spec-notes { display: grid; gap: 14px; max-width: 46em; margin-top: clamp(28px, 4vw, 44px); }
.spec-note { font-size: 0.9375rem; color: var(--ink-soft); }
.spec-note--guarantee { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }

/* More services: wide strips, one under the other */
.related-list { display: grid; gap: clamp(48px, 6vw, 88px); margin-top: clamp(28px, 4vw, 56px); }
.related-item__media { aspect-ratio: 16 / 9; }
.related-item__row { display: grid; gap: 10px var(--col-gap); margin-top: clamp(16px, 2vw, 24px); }
.related-item__name { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-title); line-height: 1.2; letter-spacing: 0.01em; }
.related-item__text { max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; text-wrap: pretty; }
.related-item__link { margin-top: 6px; }
@media (min-width: 900px) {
  .related-item__media { aspect-ratio: 3 / 1; }
  .related-item__row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .related-item__name { grid-column: 1 / 6; }
  .related-item__side { grid-column: 6 / 13; }
}


/* 13 Legal and text pages
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + clamp(40px, 8vw, 120px)); padding-bottom: var(--section-y); }
.legal__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
.legal__meta { margin-top: 20px; font-size: 0.9375rem; color: var(--ink-soft); }
.legal__rule { margin-top: clamp(36px, 6vw, 72px); }
.legal__body { padding-top: clamp(28px, 4vw, 48px); }

.prose { max-width: 68ch; font-size: var(--fs-body); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 {
  margin-top: 2.4em; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.2; text-wrap: balance;
}
.prose h3 { margin-top: 1.8em; font-weight: 500; font-size: 1.125rem; line-height: 1.35; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--ink-soft); }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Placeholder marker: every value still to be supplied by the company */
.ph { padding: 0 0.2em; background: rgba(0, 61, 133, 0.08); border-bottom: 1px dashed var(--ink); }

.not-found { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; padding-top: var(--header-h); }
.not-found__text { margin-top: 24px; max-width: 18em; }
.not-found__action { margin-top: 32px; }


/* 14 Footer
   -------------------------------------------------------------------------- */
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--col-gap); padding-block: clamp(24px, 3.2vw, 40px); }
.footer__brand { grid-column: 1 / -1; }
.footer__brand p { margin-top: 10px; max-width: 26ch; font-size: 0.9375rem; line-height: 1.5; }
.footer__heading { margin-bottom: 4px; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* Links sit as close as the standard allows: 24px rows are the minimum target size (WCAG 2.2 AA). */
.footer__list li { display: flex; }
.footer__list .footer__contact { align-items: center; gap: 0.4em; min-height: 24px; font-size: 0.9375rem; line-height: 1.2; }
.footer__list a { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.9375rem; line-height: 1.2; }
.footer__base { display: grid; gap: 2px; padding-block: 14px max(18px, env(safe-area-inset-bottom)); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}


/* 15 Preloader and cursor
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: var(--bg); color: var(--ink);
}
html.is-preloading .preloader { display: grid; }
html.is-preloading { overflow: hidden; }
.preloader .brand { align-items: center; gap: 12px; }
.preloader .brand__mark { font-size: clamp(48px, 10vw, 84px); }
.preloader .brand__sub { font-size: clamp(9px, 1.6vw, 12px); }

/* Route transition. A curtain in the brand blue sweeps up over the page before the browser leaves it
   (.is-leaving, set by main.js) and keeps going off the top when the next page opens (.is-entering,
   set in <head> for visitors arriving from another page of the site or with Back and Forward).
   The label names the destination. The reveal is pure CSS, so it cannot get stuck, and nothing is stored.
   Reduced motion swaps the sweep for a short fade in the page colour. */
.route {
  --route-curve: 9vw;
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  visibility: hidden; pointer-events: none;
  transform: translate3d(0, calc(100% + var(--route-curve)), 0);   /* parked below the screen, curve included */
}
.route::before,
.route::after { content: ""; position: absolute; left: 0; right: 0; height: var(--route-curve); background: inherit; }
.route::before { bottom: 100%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }   /* leading edge */
.route::after { top: 100%; border-radius: 0 0 50% 50% / 0 0 100% 100%; }       /* trailing edge */
.route__label {
  padding-inline: var(--gutter); opacity: 0; text-align: center; text-wrap: balance;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1.1; letter-spacing: 0.01em;
}
@keyframes route-out { to { transform: translate3d(0, calc(-100% - var(--route-curve)), 0); visibility: hidden; } }
@keyframes route-label-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes route-fade { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: no-preference) {
  html.js.is-leaving .route { visibility: visible; transform: translate3d(0, 0, 0); transition: transform 0.48s var(--ease-in-out); }
  html.js.is-leaving .route__label { animation: route-label-in 0.4s var(--ease-out) 0.16s forwards; }
  html.js.is-entering .route { visibility: visible; transform: translate3d(0, 0, 0); animation: route-out 0.56s var(--ease-in-out) 0.1s forwards; }
  html.js.is-entering .route__label { opacity: 1; }
  html.is-leaving .cursor, html.is-entering .cursor { --cursor-color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .route { transform: none; opacity: 0; background: var(--bg); color: var(--ink); }
  .route::before, .route::after { display: none; }
  html.js.is-leaving .route { visibility: visible; opacity: 1; transition: opacity 0.2s ease-out; }
  html.js.is-entering .route { visibility: visible; opacity: 1; animation: route-fade 0.25s ease-out 0.05s forwards; }
  html.js.is-leaving .route__label, html.js.is-entering .route__label { opacity: 1; }
}

.cursor { position: fixed; top: 0; left: 0; z-index: 300; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s ease-out; }
.cursor.is-visible { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
.cursor__ring {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  border: 1px solid var(--cursor-color, var(--ink)); border-radius: 50%;
  transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.cursor.is-active .cursor__ring { transform: scale(1.9); background: rgba(0, 61, 133, 0.08); }
.cursor.is-light { --cursor-color: var(--white); }
.cursor.is-light.is-active .cursor__ring { background: rgba(255, 255, 255, 0.14); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }


/* 16 Motion states
   Content is visible by default. It is hidden only when JavaScript is running,
   motion is allowed, and the script has not failed (a watchdog in <head> sets
   .js-failed after 4s if main.js never started).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  html.js:not(.js-failed) [data-reveal="up"] { opacity: 0; transform: translate3d(0, 28px, 0); }
  html.js:not(.js-failed) [data-reveal="media"] { clip-path: inset(0% 0% 100% 0%); }
  html.js:not(.js-failed) [data-reveal="rule"] { transform: scaleX(0); transform-origin: 0 50%; }
  html.js:not(.js-failed) [data-hero] { opacity: 0; transform: translate3d(0, 36px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .link-arrow .icon,
  .media img,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after { transition: none; }
  .menu { clip-path: none; opacity: 0; transition: opacity 0.2s ease-out, visibility 0s linear 0.2s; }
  .menu-open .menu { opacity: 1; transition: opacity 0.2s ease-out, visibility 0s; }
  .menu__list li, .menu__cta, .menu__legal { transform: none; transition: opacity 0.2s ease-out; }
  .menu-open .menu__list li, .menu-open .menu__cta, .menu-open .menu__legal { transition: opacity 0.2s ease-out; transition-delay: 0s; }
  .skip-link { transition: none; }
}