/* =========================================================================
   S³AI — global stylesheet
   Extracted from the one-page dummy; values are kept identical.

   The header and the home page follow the 2026 redesign
   (S3AI_HOMEPAGE_FINAL_150926.pdf). Their measurements are taken from that
   1920 × 1280 artboard and written as artboard pixels times --u, so the page
   matches the design at a 1920px wide window and scales with the viewport.
   Everything else still uses the original tokens below.
   ========================================================================= */

/* Nunito Sans stands in for Avenir, which the design uses but which has no
   web licence here. Its advance widths are within a few percent of Avenir's,
   so the design's sizes and tracking carry over unchanged. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo and Hanken Grotesk are the original site's display and body faces,
   still used by the footer and the pages that have not been redesigned. Like
   Nunito Sans they are served from here, not from Google Fonts: the files are
   the variable fonts Google serves, split into the same two subsets. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- 2026 redesign ---- */
  /* One pixel of the 1920px artboard. Redefined for smaller screens at the
     end of this file, where it turns into a fixed size. */
  --u: calc(min(100vw, 1880px) / 1920);
  --sans: 'Nunito Sans', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
  /* Nunito weights whose stroke weight matches the design's Avenir cuts,
     measured by comparing rendered ink against the artboard. */
  --book: 380;
  --roman: 465;
  --heavy: 725;
  --black: 850;
  --medium: 550;
  --navy: #0a223c;
  --navy-line: #1a3564;
  --navy-text: #102348;
  --orange: #f29a00;
  --sand-top: #faf6ef;
  --sand-bottom: #efe7dc;
  --panel: #f8f4ed;
  --panel-border: #d2c7b8;
  --panel-rule: #ddd4c8;
  --panel-shadow: #a89c8e;
  --tile: #faf7f1;
  --tile-border: #ded5c9;
  --header-rule: #d8cec1;
  /* Every page's content edge, left and right, and the space between the
     navigation and a page's eyebrow. Both become fixed sizes on smaller
     screens (see breakpoints). */
  --gutter: calc(90 * var(--u));
  --page-top: calc(104 * var(--u));

  /* ---- original site ---- */
  --bg: #F5F1EC;
  --ink: #1B2C5D;
  --accent: #eca80b;
  --muted: #3c4666;
  --meta: #8a8574;
  --surface: #FBFAF6;
  --hair: rgba(27, 44, 93, .1);
  --hair-strong: rgba(27, 44, 93, .18);
  /* Foreground on an --accent background. Flip to var(--ink) if --accent ever
     becomes a light colour again. */
  --on-accent: #fff;
  /* Stands in for --accent wherever it would sit on one of the navy surfaces,
     where the accent itself is too dark to read. */
  --accent-on-dark: #fff;
  --footer-bg: #16244d;
  --footer-fg: #dfe3ef;
  --footer-dim: #aab2cf;
  --footer-label: #7f89ab;
  --display: 'Archivo', sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .18s;
}

a:hover { color: var(--accent); }

button, input, textarea, select { font-family: inherit; }

img { max-width: 100%; }

/* Selection is a translucent tint, so text keeps its own colour instead of
   being repainted — a solid fill hid dark copy on the dark accent. The
   color-mix line wins where supported and follows whatever --accent is; the
   rgba above it is the fallback. */
::selection {
  background: rgba(27, 44, 93, .2);
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: inherit;
}

/* The same tint disappears on the dark surfaces, so lighten it there. */
.site-footer::selection, .site-footer ::selection,
.btn--primary::selection, .btn--primary ::selection,
.header-cta ::selection, .hero-btn--solid ::selection, .savings-badge ::selection {
  background: rgba(255, 255, 255, .3);
  color: inherit;
}

/* Headings replace the dummy's <div>s; drop the UA margins they bring along. */
.confirm__title, .split__title, .legal__h { margin-top: 0; }

/* Hidden visually, still read by screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Utilities for the handful of one-off measure caps in the layouts. */
.u-mw-20ch { max-width: 20ch; }
.u-mw-22ch { max-width: 22ch; }
.u-mw-64ch { max-width: 64ch; }

@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  color: #fff;
}

/* ---------- shell ---------- */

/* clip rather than hidden: hidden would make .page a scroll container and
   stop the sticky header from sticking. */
.page {
  width: 100%;
  max-width: 1880px;
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* The artboard's diagonal sand gradient, one artboard tall. The angle is the
   artboard's diagonal (1920 × 1280). */
.page--home {
  background:
    linear-gradient(123.69deg, var(--sand-top) 0%, #f7f2ea 50%, #f5efe7 75%, var(--sand-bottom) 100%)
    0 0 / 100% calc(1280 * var(--u)) no-repeat,
    var(--sand-bottom);
}

.page-main { flex: 1; }

.page-enter { animation: fadeUp .5s ease both; }

/* The content box of every page and the footer: the same edge on both sides
   everywhere. Sections carry the full-width backgrounds and put their content
   in here; whatever a page places in artboard pixels is placed against this
   box, so its x values count from the content edge. */
.container {
  position: relative;
  margin-inline: var(--gutter);
}

/* ---------- page intro ---------- */

/* The first thing in every page's first container (see page-intro.twig):
   the eyebrow, and the h1 and lead where they belong to it. Positioned, so
   it paints above a section's absolutely placed background picture. */
.page-intro {
  position: relative;
  padding-top: var(--page-top);
}

.page-eyebrow {
  position: relative;
  margin: 0;
  font-family: var(--sans);
  font-size: calc(26.67 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}

/* The short rule over the eyebrow, as the added value artboard draws it:
   31.2 × 2.5, ending where the text begins and 22.3px clear of the capitals.
   With line-height: 1, Nunito Sans puts its cap tops .124em below the top of
   the box. */
.page-eyebrow::before {
  content: '';
  position: absolute;
  top: calc(.124em - 24.83 * var(--u));
  right: 100%;
  width: calc(31.2 * var(--u));
  height: max(1px, calc(2.5 * var(--u)));
  background: currentColor;
}

/* A hairline that runs on from the eyebrow to the content edge (contact).
   The gap follows the letter-spacing CSS adds after the last letter. */
.page-intro--lined .page-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
}

.page-intro--lined .page-eyebrow::after {
  content: '';
  flex: 1;
  height: max(1px, calc(1.05 * var(--u)));
  background: var(--rule, #d9d4ca);
}

/* ---------- shared bits of the redesign ---------- */

.arrow {
  display: block;
  flex: none;
  overflow: visible;
}

.arrow--hero  { width: calc(21 * var(--u));    height: calc(20 * var(--u)); }
.arrow--solid { width: calc(18.75 * var(--u)); height: calc(20 * var(--u)); }
.arrow--small { width: calc(14.33 * var(--u)); height: calc(11.67 * var(--u)); }
.arrow--link  { width: calc(23.83 * var(--u)); height: calc(17 * var(--u)); }

.site-header a:focus-visible,
.drawer a:focus-visible,
.hero a:focus-visible,
.home-panel a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- header ---------- */

/* Sticky, and translucent like the artboard's header band. Once the page
   scrolls, the band turns nearly opaque where scroll-driven animations are
   supported, so copy passing underneath stays out of the way. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: calc(100 * var(--u));
  background: rgba(255, 255, 255, .39);
  border-bottom: 1px solid var(--header-rule);
  backdrop-filter: blur(12px);
  font-family: var(--sans);
}

@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-settle linear both;
    animation-timeline: scroll(root);
    animation-range: 0 calc(120 * var(--u));
  }

  @keyframes header-settle {
    to { background-color: rgba(250, 247, 242, .94); }
  }
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-inline: calc(82.8 * var(--u)) calc(30.3 * var(--u));
}

.site-header__brand {
  display: block;
  width: calc(72.93 * var(--u));
  margin-top: calc(22.8 * var(--u));
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.nav {
  display: flex;
  gap: calc(43.4 * var(--u));
  margin: calc(39.6 * var(--u)) 0 0 auto;
}

/* Line box and margin put the baseline where the artboard has it (54.7px). */
.nav__link {
  position: relative;
  display: block;
  font-size: max(calc(15.46 * var(--u)), 12px);
  font-weight: var(--book);
  line-height: calc(20 * var(--u));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.nav__link:hover { color: var(--navy); }

/* The artboard shows this rule under TECHNOLOGY: used for the current page
   and on hover. */
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: calc(28.9 * var(--u));
  height: max(1px, calc(1.67 * var(--u)));
  background: var(--orange);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.site-header__social {
  display: block;
  width: calc(27.5 * var(--u));
  margin: calc(31.8 * var(--u)) 0 0 calc(43.85 * var(--u));
  color: var(--navy);
}

.site-header__social:hover { color: var(--navy-line); }

.icon-linkedin {
  display: block;
  width: 100%;
  height: auto;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: calc(11.6 * var(--u));
  height: calc(32.5 * var(--u));
  margin: calc(29.3 * var(--u)) 0 0 calc(35.3 * var(--u));
  padding-inline: calc(13.8 * var(--u)) calc(10.87 * var(--u));
  border-radius: calc(3.25 * var(--u));
  background: var(--navy);
  color: #fff;
  font-size: max(calc(8.125 * var(--u)), 8px);
  font-weight: var(--heavy);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s;
}

.header-cta:hover {
  background: var(--navy-line);
  color: #fff;
}

/* Centring alone sits the label 1.4px above the artboard's baseline. */
.header-cta__label { translate: 0 calc(1.4 * var(--u)); }

.menu-toggle {
  display: none;
  align-self: center;
  margin-left: 16px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
}

/* ---------- mobile drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 30, 60, .4);
  display: none;
}

.is-menu-open .drawer { display: block; }

.is-menu-open, .is-menu-open body { overflow: hidden; }

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 360px);
  background: var(--bg);
  box-shadow: -14px 0 40px rgba(20, 30, 60, .2);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  animation: drawerIn .28s cubic-bezier(.2, .7, .3, 1);
}

.drawer__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  padding: 4px;
}

.drawer__link {
  padding: 16px 0;
  border-bottom: 1px solid var(--header-rule);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: var(--book);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}

.drawer__link:hover,
.drawer__link.is-active {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.drawer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--navy);
}

.drawer__social:hover { color: var(--navy-line); }

.drawer__social .icon-linkedin { width: 26px; }

.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding: 16px 24px;
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: var(--heavy);
  text-transform: uppercase;
}

.drawer__cta:hover {
  background: var(--navy-line);
  color: #fff;
}

.drawer__cta .arrow {
  width: 17px;
  height: 18px;
}

/* ---------- buttons & inline CTAs ---------- */

.btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 26px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 10px;
  transition: background .18s, color .18s, border-color .18s;
}

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

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

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2.5px solid var(--ink);
}

.btn--ghost:hover {
  background: rgba(27, 44, 93, .06);
  color: var(--ink);
}

.btn--sm {
  padding: 14px 22px;
  font-size: 13px;
  letter-spacing: .06em;
  gap: 12px;
}

.btn--lg {
  padding: 18px 26px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
  justify-content: center;
  padding: 17px 24px;
  font-size: 14px;
  gap: 12px;
}

.btn__icon { font-size: 17px; }

.btn--sm .btn__icon { font-size: 16px; }

.btn__badge { font-size: 24px; }

.link-cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ---------- shared blocks ---------- */

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.eyebrow--dim { color: var(--meta); }

/* h1 and lead of the pages that still use the original styles, set under
   their page intro. */
.page-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 20px 0;
}

.page-title--lg {
  font-size: clamp(34px, 5vw, 58px);
  margin-bottom: 24px;
}

.page-lead {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

.page-lead--wide {
  font-size: clamp(17px, 1.7vw, 21px);
  max-width: 62ch;
}

.cta {
  padding-block: clamp(44px, 6vw, 80px);
  text-align: center;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- home: hero ---------- */

/* Artboard band between the header (y 100) and the panel (y 812.5). Copy sits
   in normal flow; the visual is laid over the whole band. */
.hero {
  position: relative;
  height: calc(714.6 * var(--u));
  overflow: clip;
  font-family: var(--sans);
  color: var(--navy);
}

.hero__copy {
  position: relative;
  z-index: 2;
  padding: calc(62.93 * var(--u)) 0 0 calc(80 * var(--u));
}

.hero__title {
  margin: 0;
  font-size: calc(52.5 * var(--u));
  font-weight: var(--black);
  line-height: calc(59.6 * var(--u));
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero__line { display: block; }

/* line-height: 1 keeps the smaller glyph from deepening the first line box. */
.hero__plus {
  font-size: .6825em;
  line-height: 1;
}

.hero__line--accent {
  font-size: calc(47.5 * var(--u));
  line-height: calc(54.48 * var(--u));
  color: var(--orange);
}

.hero__quote {
  margin: calc(52.49 * var(--u)) 0 0 calc(2.5 * var(--u));
  font-size: max(calc(22.5 * var(--u)), 15px);
  font-weight: var(--book);
  line-height: max(calc(27 * var(--u)), 18px);
  letter-spacing: .05em;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18.7 * var(--u));
  margin: calc(29.6 * var(--u)) 0 0 calc(4.4 * var(--u));
}

/* Labels are centred between a 20px inset and the arrow; the solid button
   leaves more room before its arrow, as the artboard does. No minimum font
   size here: the fixed width only fits the labels at artboard proportions. */
.hero-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(225 * var(--u));
  height: calc(61.2 * var(--u));
  padding: 0 calc(34 * var(--u)) 0 calc(20 * var(--u));
  border: max(1px, calc(1.67 * var(--u))) solid var(--navy-line);
  border-radius: calc(5 * var(--u));
  font-size: calc(17.5 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transition: background .18s, color .18s, border-color .18s;
}

.hero-btn:hover {
  background: rgba(10, 34, 60, .06);
  color: var(--navy);
}

.hero-btn .arrow {
  position: absolute;
  top: 50%;
  right: calc(22 * var(--u));
  translate: 0 -50%;
}

.hero-btn--solid {
  padding-right: calc(54 * var(--u));
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: calc(16.25 * var(--u));
}

.hero-btn--solid:hover {
  border-color: var(--navy-line);
  background: var(--navy-line);
  color: #fff;
}

/* The visual is positioned in artboard pixels. --ox shifts the artboard to
   the left and --cu scales it, so smaller screens can show just its right
   part (see breakpoints). */
.hero__visual {
  --ox: 0;
  --cu: var(--u);
  position: absolute;
  inset: 0;
}

.hero__stage {
  position: absolute;
  inset: 0;
}

.hero__backdrop,
.hero__conductor {
  position: absolute;
  max-width: none;
  height: auto;
}

.hero__backdrop {
  top: calc(-80.2 * var(--cu));
  left: calc((-150 - var(--ox)) * var(--cu));
  width: calc(2146.7 * var(--cu));
}

.hero__conductor {
  top: calc(44.6 * var(--cu));
  left: calc((725 - var(--ox)) * var(--cu));
  width: calc(538.4 * var(--cu));
}

/* Positions inside the badge are in its own artboard pixels (--bu), so the
   badge can also be shown larger than the rest of the visual. */
.savings-badge {
  --bu: var(--cu);
  position: absolute;
  top: calc(359.6 * var(--cu));
  left: calc((1225.4 - var(--ox)) * var(--cu));
  width: calc(339.1 * var(--bu));
  aspect-ratio: 1;
  color: #fff;
}

.savings-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.savings-badge p { margin: 0; }

.savings-badge__figure,
.savings-badge__label {
  position: absolute;
  line-height: 1;
  white-space: nowrap;
  translate: -50% 0;
}

.savings-badge__figure { font-weight: var(--heavy); }

.savings-badge__label {
  font-size: calc(20 * var(--bu));
  font-weight: var(--book);
  text-transform: uppercase;
}

.savings-badge__saving .savings-badge__figure {
  top: calc(127.94 * var(--bu));
  left: calc(181.75 * var(--bu));
  font-size: calc(40 * var(--bu));
}

.savings-badge__percent { font-size: .5em; }

/* Carries the white rule under ENERGY SAVINGS. The padding balances the
   letter-spacing CSS adds after the last letter. */
.savings-badge__saving .savings-badge__label {
  top: calc(168.52 * var(--bu));
  left: calc(181.75 * var(--bu));
  padding-left: .04em;
  letter-spacing: .04em;
}

.savings-badge__saving::after {
  content: '';
  position: absolute;
  top: calc(193.4 * var(--bu));
  left: calc(69.6 * var(--bu));
  width: calc(224.4 * var(--bu));
  height: max(1px, calc(.83 * var(--bu)));
  background: #fff;
}

.savings-badge__cost .savings-badge__figure {
  top: calc(206.48 * var(--bu));
  left: calc(169.6 * var(--bu));
  font-size: calc(35 * var(--bu));
}

.savings-badge__unit {
  font-size: .5714em;
  font-weight: var(--book);
}

.savings-badge__unit sup {
  font-size: .583em;
  line-height: 0;
  vertical-align: calc(6.7 * var(--bu));
}

.savings-badge__cost .savings-badge__label {
  top: calc(242.92 * var(--bu));
  left: calc(172.7 * var(--bu));
  text-transform: none;
}

/* Anchored on the left, so the minimum size grows it away from the badge.
   The indent lines "for" up with the text after the asterisk. */
.hero__footnote {
  position: absolute;
  z-index: 2;
  top: calc(660 * var(--u));
  left: calc(1496.1 * var(--u));
  margin: 0;
  padding-left: calc(7 * var(--u));
  text-indent: calc(-7 * var(--u));
  font-size: max(calc(13.33 * var(--u)), 9px);
  font-weight: 300;
  line-height: max(calc(16 * var(--u)), 11px);
  white-space: nowrap;
  color: rgba(16, 35, 72, .44);
}

/* ---------- home: panel ---------- */

/* The artboard strokes its outlines on the centre of the path; the boxes here
   are sized to the outer edge of those strokes. */

.home-panel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 454.375fr 432.5fr 435fr 489.375fr;
  height: calc(388.75 * var(--u));
  margin: calc(-2.725 * var(--u)) calc(54.375 * var(--u)) calc(79.375 * var(--u)) calc(51.875 * var(--u));
  border: max(1px, calc(1.25 * var(--u))) solid var(--panel-border);
  border-radius: calc(14.375 * var(--u));
  background: var(--panel);
  box-shadow: calc(.3 * var(--u)) calc(17 * var(--u)) calc(18 * var(--u)) calc(-7.5 * var(--u)) var(--panel-shadow);
  font-family: var(--sans);
  color: var(--navy);
}

.home-panel__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: calc(32.315 * var(--u)) calc(26.3 * var(--u)) calc(37.695 * var(--u));
}

.home-panel__col:nth-child(1) { padding-inline: calc(36.25 * var(--u)) calc(23.075 * var(--u)); }
.home-panel__col:nth-child(3) { padding-inline: calc(26.2 * var(--u)) calc(30 * var(--u)); }
.home-panel__col:nth-child(4) { padding-inline: calc(25 * var(--u)); }

/* Column rules stop short of the panel edges. */
.home-panel__col + .home-panel__col::before {
  content: '';
  position: absolute;
  top: calc(25.675 * var(--u));
  bottom: calc(34.375 * var(--u));
  left: calc(-.625 * var(--u));
  width: max(1px, calc(1.25 * var(--u)));
  background: var(--panel-rule);
}

.home-panel__title {
  margin: 0;
  font-size: max(calc(17.5 * var(--u)), 12px);
  font-weight: var(--heavy);
  line-height: max(calc(20 * var(--u)), 15px);
  letter-spacing: .085em;
  text-transform: uppercase;
}

.home-panel__col:nth-child(1) .home-panel__title { margin-left: calc(1.825 * var(--u)); }

.home-panel__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 185.5;
  margin-top: calc(12.06 * var(--u));
  border-radius: calc(5 * var(--u));
  object-fit: cover;
}

.home-panel__img--muted { opacity: .79; }

.home-panel__name {
  margin: calc(5.92 * var(--u)) 0 0;
  font-size: max(calc(20 * var(--u)), 13px);
  font-weight: var(--heavy);
  line-height: calc(24 * var(--u));
  text-transform: uppercase;
}

.home-panel__link {
  display: inline-flex;
  align-items: center;
  gap: calc(18.7 * var(--u));
  margin-top: auto;
  font-size: max(calc(13.75 * var(--u)), 11px);
  font-weight: var(--book);
  line-height: max(calc(20 * var(--u)), 14px);
  text-transform: uppercase;
  color: var(--navy);
}

.home-panel__link:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Short labels keep their arrow at the artboard's minimum offset. */
.home-panel__link-label { min-width: calc(83.9 * var(--u)); }

.home-panel__link .arrow {
  translate: 0 calc(-2.9 * var(--u));
  transition: transform .18s;
}

.home-panel__link:hover .arrow { transform: translateX(4px); }

/* Logo tile. The three alliance members share the card in the proportions of
   the design. The tile is a size container: everything inside is measured in
   tile pixels (--tu, one pixel of the 395.05px wide tile in the design), so
   the composition scales as a whole at every tile width, including the
   breakpoints where --u is fixed but the tile keeps growing. */
.alliance {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 395.05 / 184.95;
  margin: calc(11.435 * var(--u)) 0 0;
  border: max(1px, calc(1.25 * var(--u))) solid var(--tile-border);
  border-radius: calc(3.75 * var(--u));
  background: var(--tile);
}

/* Resolved where it is used, so cqi refers to the tile. Only valid on
   descendants of .alliance, never on .alliance itself. */
.alliance > * { --tu: calc(100cqi / 395.05); }

.alliance__intro {
  position: absolute;
  top: 20.9%;
  left: 0;
  right: 0;
  margin: 0;
  /* Fallback for browsers without container query units */
  font-size: max(calc(10.25 * var(--u)), 7px);
  font-size: max(calc(10.25 * var(--tu)), 7px);
  font-weight: var(--roman);
  line-height: 1;
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
  color: #c8cdd1;
}

.alliance__logos {
  position: absolute;
  top: 36.8%;
  left: 0;
  right: 0;
  bottom: 10%;
  display: grid;
  grid-template-columns: 40.6% 33.8% 25.6%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alliance__logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Divider between columns, limited to the logo row. */
.alliance__logo:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -7%;
  right: 0;
  width: max(1px, calc(.75 * var(--u)));
  width: max(1px, calc(.75 * var(--tu)));
  height: 36%;
  /*background: rgba(16, 35, 72, .55);*/
   background: #cfc8bd;
}

/* Logos hang from a shared cap line instead of being centred. Centring
   pushed the taller Ochsner mark (155 with JAHRE underneath) upwards and
   left the wordmarks on three different lines. */
.alliance__mark {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 30%;
}

/* Width drives the size, height follows the aspect ratio. No max-height:
   together with a percentage width it would squash the image. The shift is
   an optical correction in tile pixels, set per logo below. */
.alliance__mark img {
  display: block;
  width: var(--logo-w, 80%);
  max-width: 100%;
  height: auto;
  translate: 0 calc(var(--logo-shift, 0) * var(--tu));
}

/* Share of the column each mark takes, as measured on the design. */
.alliance__logo--ochsner { --logo-w: 85%; }
.alliance__logo--sorcool { --logo-w: 70%; --logo-shift: -6.5; }
.alliance__logo--rehos   { --logo-w: 62%; }


.alliance__caption {
  width: 100%;
  margin-top: 5.5%;
  font-size: max(calc(10.5 * var(--u)), 8px);
  font-size: max(calc(10.5 * var(--tu)), 8px);
  font-weight: var(--book);
  line-height: 1.45;
  letter-spacing: .12em;
  text-align: center;
  color: #5e5d5c;
}

/* Short rule under each caption. */
.alliance__caption::after {
  content: '';
  display: block;
  width: calc(57 * var(--u));
  width: calc(57 * var(--tu));
  height: max(1px, calc(.65 * var(--u)));
  height: max(1px, calc(.65 * var(--tu)));
  margin: calc(10 * var(--u)) auto 0;
  margin: calc(10 * var(--tu)) auto 0;
  background: #cfc8bd;
}

.event {
  display: flex;
  align-items: flex-start;
  gap: calc(13.7 * var(--u));
  margin: calc(14.56 * var(--u)) 0 0 calc(-5 * var(--u));
}

.event__logo {
  flex: none;
  width: calc(107.5 * var(--u));
  height: auto;
}

.event__text {
  margin: calc(10.06 * var(--u)) 0 0;
  font-size: max(calc(15 * var(--u)), 12px);
  font-weight: var(--book);
  line-height: max(calc(20 * var(--u)), 16px);
}

/* ---------- mission ----------
   Design page 02 on a 1920 × 810 artboard: the claim, with the copy set off
   to the lower right. Artboard pixels times --u, text tops derived from the
   design's baselines. The artboard sets the eyebrow 121.29px lower than the
   shared page intro does; the claim, the copy and the closing rule move up
   with it, and the section is that much shorter. */

/* Same sand as the artboard's lighter corner, for any window taller than the
   page. */
.page--mission { background: var(--sand-top); }

/* The artboard's diagonal sand gradient, corner to corner of the shortened
   section. */
.mission {
  overflow: clip;
  height: calc(688.71 * var(--u));
  background: linear-gradient(109.73deg, var(--sand-top) 0%, #f5f0e8 72%, var(--sand-bottom) 100%);
  font-family: var(--sans);
  color: #091a2e;
}

:where(.mission) :where(p, h1) { margin: 0; }

.mission__title {
  position: absolute;
  top: calc(108.47 * var(--u));
  left: calc(406.9 * var(--u));
  font-size: calc(92.69 * var(--u));
  font-weight: var(--medium);
  line-height: calc(96.5 * var(--u));
  white-space: nowrap;
}

.mission__line { display: block; }

.mission__line + .mission__line { margin-left: calc(7.2 * var(--u)); }

.mission__body {
  position: absolute;
  top: calc(343.57 * var(--u));
  left: calc(1146.7 * var(--u));
  font-size: calc(23.33 * var(--u));
  font-weight: var(--book);
  line-height: calc(41.32 * var(--u));
  white-space: nowrap;
  color: #4e5964;
}

/* The short rule that closes the copy. */
.mission .container::after {
  content: '';
  position: absolute;
  top: calc(590.86 * var(--u));
  left: calc(1652.7 * var(--u));
  width: calc(71 * var(--u));
  height: max(1px, calc(2.5 * var(--u)));
  background: var(--orange);
}

/* ---------- technology ----------
   Design pages 05–10, stacked into four sections. Sections 1–3 are 1920 × 810
   artboards, section 4 is the 1440pt page scaled to 1920 × 1080. As on the
   home page, positions are artboard pixels times --u; text tops are derived
   from the design's baselines. Everything, the backdrops included, is placed
   against the section's container, so x values count from the content edge;
   the right-hand parts that ran past that edge on the artboards (the cooling
   module card, the AI diagram, the charts) now end on it. */

.tech-section {
  overflow: clip;
  font-family: var(--sans);
  color: var(--navy);
}

/* Zero-specificity resets, so every rule below can set its own spacing. */
:where(.tech-section) :where(p, h1, h2, h3, figure, ol, ul, dl, dd) { margin: 0; }

:where(.tech-section) :where(ol, ul) {
  padding: 0;
  list-style: none;
}

.tech-sizes,
.tech-modules,
.tech-ai { height: calc(810 * var(--u)); }

.tech-cycles { height: calc(1080 * var(--u)); }

.tech-sizes__bg,
.tech-modules__bg,
.tech-ai__bg {
  position: absolute;
  max-width: none;
  height: auto;
}

.tech-section a:focus-visible,
.spec__size:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* "S³AI TECHNOLOGY" with its short rule. Each artboard draws the rule a
   little differently, hence the variables. */
.tech-eyebrow {
  font-size: calc(21.22 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--orange);
}

.tech-eyebrow::after {
  content: '';
  display: inline-block;
  width: calc(var(--rule-w, 35.5) * var(--u));
  height: max(1px, calc(.83 * var(--u)));
  margin-left: calc(var(--rule-gap, 8.7) * var(--u));
  vertical-align: calc(var(--rule-drop, .8) * -1 * var(--u));
  background: currentColor;
}

/* ---------- technology: 1. sizes ---------- */

.tech-sizes__bg {
  top: calc(-15.3 * var(--u));
  left: calc(-233.9 * var(--u));
  width: calc(2155.2 * var(--u));
}

/* Set under the page intro's eyebrow. */
.tech-sizes__claim {
  margin-top: calc(9.09 * var(--u));
  font-size: calc(23.33 * var(--u));
  font-weight: var(--book);
  line-height: calc(35 * var(--u));
  letter-spacing: .05em;
  white-space: nowrap;
}

/* The spec block starts on the content edge: 14.83px to the right of where
   the artboard has it. */
.spec__sizes-label {
  position: absolute;
  top: calc(313.07 * var(--u));
  left: calc(.725 * var(--u));
  font-size: calc(13.79 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.spec__size-options {
  position: absolute;
  top: calc(295.5 * var(--u));
  left: calc(206.425 * var(--u));
  display: flex;
  gap: calc(4.85 * var(--u));
}

.spec__size {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(50.37 * var(--u));
  aspect-ratio: 1;
  border: max(1px, calc(1.67 * var(--u))) solid #aeb7bb;
  border-radius: 50%;
  font-size: calc(17.66 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  color: #092844;
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}

.spec__size--m { font-size: calc(16.25 * var(--u)); }

.spec__size input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.spec__size:hover { border-color: #7d888e; }

/* The design draws all three sizes alike; the chosen one gets a darker ring. */
.spec__size:has(input:checked) { border-color: #092844; }

/* Only the chosen size's values show. Without :has() the switch cannot work,
   so the S values stay visible. */
.spec [data-size]:not([data-size="s"]) { display: none; }

@supports selector(:has(*)) {
  .spec:has(input[value="m"]:checked) [data-size="s"],
  .spec:has(input[value="l"]:checked) [data-size="s"] { display: none; }

  .spec:has(input[value="m"]:checked) [data-size="m"],
  .spec:has(input[value="l"]:checked) [data-size="l"] { display: inline; }
}

.spec-card {
  position: absolute;
  top: calc(363.275 * var(--u));
  height: calc(334.75 * var(--u));
  border: max(1px, calc(1.25 * var(--u))) solid #d8cec0;
  border-radius: calc(11.6 * var(--u));
}

.spec-card--heat {
  --bar-x: 8.175;
  --bar-y: 57.675;
  --bar-w: 372.5;
  --size-x: 14.975;
  --size-y: 18.275;
  left: 0;
  width: calc(401.25 * var(--u));
}

.spec-card--cool {
  --bar-x: 17.475;
  --bar-y: 58.275;
  --bar-w: 337.5;
  --size-x: 19.475;
  --size-y: 17.375;
  left: calc(425 * var(--u));
  width: calc(376.25 * var(--u));
}

/* Colour bar under the heading. */
.spec-card::before {
  content: '';
  position: absolute;
  top: calc(var(--bar-y) * var(--u));
  left: calc(var(--bar-x) * var(--u));
  width: calc(var(--bar-w) * var(--u));
  height: calc(10.8 * var(--u));
  border-radius: calc(5.4 * var(--u));
  opacity: .84;
}

.spec-card--heat::before { background: linear-gradient(90deg, #fc8600, #ff2800); }

.spec-card--cool::before { background: linear-gradient(90deg, #007fe9, #0001d4); }

.spec-card__size {
  position: absolute;
  top: calc(var(--size-y) * var(--u));
  left: calc(var(--size-x) * var(--u));
  display: grid;
  place-items: center;
  width: calc(30.87 * var(--u));
  aspect-ratio: 1;
  border: max(1px, calc(1.67 * var(--u))) solid #aeb7bb;
  border-radius: 50%;
  font-size: calc(9.74 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  color: #092844;
}

.spec-card__title {
  position: absolute;
  top: calc(22.1 * var(--u));
  left: calc(71.875 * var(--u));
  font-size: calc(16.25 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  white-space: nowrap;
}

.spec-card__rows {
  position: absolute;
  top: calc(67.45 * var(--u));
  left: calc(18.175 * var(--u));
}

.spec-card--heat .spec-card__rows { width: calc(362.5 * var(--u)); }

.spec-card--cool .spec-card__rows { width: calc(337.5 * var(--u)); }

/* Rows hang their text a fixed distance above the rule, so the cooling card's
   taller rows keep it at the bottom like the artboard. */
.spec-card__row {
  display: flex;
  align-items: last baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  height: calc(36.25 * var(--u));
  padding: 0 calc(4.4 * var(--u)) calc(9.3 * var(--u)) calc(3.1 * var(--u));
  border-bottom: max(1px, calc(1.25 * var(--u))) solid #e1d9cd;
}

.spec-card--cool .spec-card__row {
  padding: 0 calc(3.8 * var(--u)) calc(7.6 * var(--u)) calc(3.7 * var(--u));
}

.spec-card--cool .spec-card__row:nth-child(2) { height: calc(81.4 * var(--u)); }

.spec-card--cool .spec-card__row:nth-child(3) { height: calc(94.2 * var(--u)); }

/* The heating card closes with an empty row. */
.spec-card--heat .spec-card__rows::after {
  content: '';
  display: block;
  height: calc(36.25 * var(--u));
  border-bottom: max(1px, calc(1.25 * var(--u))) solid #e1d9cd;
}

.spec-card__row dt {
  font-size: calc(13.75 * var(--u));
  font-weight: var(--book);
  line-height: calc(15 * var(--u));
  white-space: nowrap;
  color: #566474;
}

.spec-card__row dd {
  font-size: calc(15 * var(--u));
  font-weight: var(--heavy);
  line-height: calc(15 * var(--u));
  white-space: nowrap;
}

/* ---------- technology: 2. modules ---------- */

.tech-modules { background: #f3efe9; }

.tech-modules__bg {
  top: calc(-1.3 * var(--u));
  left: calc(-294.2 * var(--u));
  width: calc(2355 * var(--u));
  opacity: .9;
}

.tech-modules__intro {
  position: absolute;
  top: calc(46.31 * var(--u));
  left: 0;
}

.tech-modules .tech-eyebrow {
  --rule-gap: 4.5;
  --rule-drop: 6.9;
}

.tech-modules__claim {
  margin: calc(28.5 * var(--u)) 0 0 calc(44 * var(--u));
  font-size: calc(21.22 * var(--u));
  font-weight: var(--book);
  line-height: calc(30 * var(--u));
  letter-spacing: .075em;
  white-space: nowrap;
  color: var(--navy-text);
}

.tech-modules__claim strong { font-weight: var(--black); }

.module-card {
  --accent: #ef5437;
  --list-indent: 31.3;
  --dash-x: -29.4;
  position: absolute;
  top: calc(258.2 * var(--u));
  height: calc(434.2 * var(--u));
  padding: calc(27.72 * var(--u)) 0 0 calc(37.3 * var(--u));
  border: max(1px, calc(.83 * var(--u))) solid rgba(107, 107, 107, .5);
  border-radius: calc(22.6 * var(--u));
  background: rgba(255, 255, 255, .5);
}

.module-card--heat {
  left: calc(30.4 * var(--u));
  width: calc(370.2 * var(--u));
}

.module-card--cool {
  --accent: #3377ca;
  --list-indent: 28.5;
  --dash-x: -25.2;
  left: calc(1323.6 * var(--u));
  width: calc(416.4 * var(--u));
  padding-top: calc(26.52 * var(--u));
  padding-left: calc(17.8 * var(--u));
}


.module-card__number {
  font-size: calc(20 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--accent);
}

.module-card--cool .module-card__number { color: #1582cc; }

.module-card__title {
  margin-top: calc(20.05 * var(--u));
  font-size: calc(33.33 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}


.module-card__subtitle {
  margin-top: calc(9.05 * var(--u));
  font-size: calc(16.25 * var(--u));
  font-weight: var(--book);
  line-height: calc(25 * var(--u));
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--accent);
}

.module-card__lead {
  margin-top: calc(24.27 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: var(--book);
  line-height: calc(24 * var(--u));
  color: #566474;
}

.module-card__list {
  margin-top: calc(8.9 * var(--u));
  padding-left: calc(var(--list-indent) * var(--u));
}

.module-card__list li {
  position: relative;
  font-size: calc(20 * var(--u));
  font-weight: var(--book);
  line-height: calc(45 * var(--u));
  color: #334557;
}

.module-card__list li::before {
  content: '';
  position: absolute;
  top: calc(22.05 * var(--u));
  left: calc(var(--dash-x) * var(--u));
  width: calc(17 * var(--u));
  height: max(1px, calc(1.67 * var(--u)));
  background: var(--accent);
}

/* The artboard sets the cooling card's lines a pixel or two apart from the
   heating card's. */
.module-card--cool .module-card__title {
  margin-top: calc(21.25 * var(--u));
  letter-spacing: -.01em;
}

.module-card--cool .module-card__subtitle { margin-top: calc(11.45 * var(--u)); }

.module-card--cool .module-card__lead { margin-top: calc(22.87 * var(--u)); }

.module-card--cool .module-card__list { margin-top: calc(8.5 * var(--u)); }

/* ---------- technology: 3. AI ---------- */

.tech-ai { background: #fff; }

.tech-ai__bg {
  top: calc(-130.4 * var(--u));
  left: calc(-149.1 * var(--u));
  width: calc(2231.9 * var(--u));
}

.tech-ai__intro {
  position: absolute;
  top: calc(88.11 * var(--u));
  left: 0;
}

.tech-ai .tech-eyebrow {
  --rule-w: 24.3;
  --rule-gap: 3.4;
  --rule-drop: 4.1;
}

.tech-ai__title {
  margin: calc(18.8 * var(--u)) 0 0 calc(.7 * var(--u));
  font-size: calc(26.67 * var(--u));
  font-weight: var(--black);
  line-height: calc(32 * var(--u));
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #071c3c;
}

/* The shapes are the designer's raster; every label on them is live text,
   placed in the panel's own artboard pixels. */
.ai-diagram {
  position: absolute;
  top: calc(92.1 * var(--u));
  left: calc(642.1 * var(--u));
  width: calc(1097.9 * var(--u));
  height: calc(488.1 * var(--u));
  border-radius: calc(22.9 * var(--u));
  background: #ede9e0;
  box-shadow: calc(16.65 * var(--u)) calc(15.45 * var(--u)) calc(18.2 * var(--u)) rgba(0, 0, 0, .6);
  color: #112b40;
}

.ai-diagram::after {
  content: '';
  position: absolute;
  inset: calc(13.19 * var(--u)) calc(12.19 * var(--u)) calc(9.99 * var(--u)) calc(12.09 * var(--u));
  border: max(1px, calc(.83 * var(--u))) solid rgba(0, 0, 0, .18);
  border-radius: calc(15 * var(--u));
  pointer-events: none;
}

.ai-diagram > * { position: absolute; }

.ai-diagram__shapes {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ai-diagram__mark {
  top: calc(37.7 * var(--u));
  left: calc(85.5 * var(--u));
  width: calc(36.15 * var(--u));
  height: auto;
}

.ai-diagram__mark--module {
  top: calc(102.5 * var(--u));
  left: calc(156.7 * var(--u));
}

.ai-diagram__tagline {
  top: calc(59.44 * var(--u));
  left: calc(116.1 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}

.ai-diagram__module {
  top: calc(119.7 * var(--u));
  left: calc(186.1 * var(--u));
  font-size: calc(18.34 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}

.ai-diagram__module::after {
  content: '';
  position: absolute;
  top: calc(22.99 * var(--u));
  left: calc(-6.7 * var(--u));
  width: calc(26.9 * var(--u));
  height: max(1px, calc(.83 * var(--u)));
  background: #f19900;
}

.ai-diagram__steps { inset: 0; }

.ai-step > span { position: absolute; }

.ai-step__number {
  left: calc(106.1 * var(--u));
  font-size: calc(19.64 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  color: #fff;
  translate: -50% 0;
}

.ai-step__text {
  left: calc(143.9 * var(--u));
  font-size: calc(16.51 * var(--u));
  font-weight: var(--book);
  line-height: calc(23.4 * var(--u));
  white-space: nowrap;
  color: #65788f;
}

.ai-step--1 .ai-step__number {
  top: calc(202.54 * var(--u));
  font-size: calc(17.08 * var(--u));
}

.ai-step--2 .ai-step__number { top: calc(261.02 * var(--u)); }
.ai-step--3 .ai-step__number { top: calc(321.72 * var(--u)); }
.ai-step--4 .ai-step__number { top: calc(382.62 * var(--u)); }

.ai-step--1 .ai-step__text,
.ai-step--4 .ai-step__text { line-height: calc(18.2 * var(--u)); }

.ai-step--1 .ai-step__text {
  top: calc(187.37 * var(--u));
  color: #112b40;
}

.ai-step--2 .ai-step__text { top: calc(245.67 * var(--u)); }

.ai-step--3 .ai-step__text {
  top: calc(306.27 * var(--u));
  color: #f88f15;
}

.ai-step--4 .ai-step__text { top: calc(375.77 * var(--u)); }

.ai-tile {
  font-size: calc(20 * var(--u));
  font-weight: var(--medium);
  line-height: calc(20 * var(--u));
  text-align: center;
  white-space: nowrap;
  color: #fff;
  translate: -50% 0;
}

.ai-tile--heat,
.ai-tile--cool { top: calc(98.92 * var(--u)); }

.ai-tile--heat { left: calc(455 * var(--u)); }
.ai-tile--cool { left: calc(696.6 * var(--u)); }

.ai-tile__sub {
  display: block;
  margin-top: calc(15.54 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: var(--book);
  line-height: calc(15 * var(--u));
}

.ai-tile--thermal,
.ai-tile--cold {
  top: calc(366.73 * var(--u));
  font-size: calc(17.08 * var(--u));
  line-height: calc(17.7 * var(--u));
}

.ai-tile--thermal { left: calc(455.3 * var(--u)); }
.ai-tile--cold { left: calc(696.1 * var(--u)); }

.ai-result { display: contents; }

.ai-result > p {
  position: absolute;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  translate: -50% 0;
}

.ai-result__label {
  top: calc(237.64 * var(--u));
  left: calc(915.6 * var(--u));
  font-size: calc(21.06 * var(--u));
  font-weight: var(--black);
}

.ai-result__value {
  top: calc(289.28 * var(--u));
  left: calc(919.55 * var(--u));
  font-size: calc(42.97 * var(--u));
  font-weight: 650;
  letter-spacing: -.05em;
  color: #f88f15;
}

.ai-result__value span {
  font-size: .6558em;
  font-weight: var(--book);
  letter-spacing: 0;
}

.ai-result__caption {
  top: calc(328.52 * var(--u));
  left: calc(924.6 * var(--u));
  font-size: calc(14.23 * var(--u));
  font-weight: var(--book);
}

.ai-result__caption strong {
  display: block;
  margin-bottom: calc(4.74 * var(--u));
  font-size: calc(19.64 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
}

.ai-result > .ai-result__ref {
  top: calc(410.77 * var(--u));
  left: calc(983.5 * var(--u));
  font-size: calc(11.38 * var(--u));
  font-weight: var(--book);
  color: #747474;
  translate: none;
}

.ai-result__ref a:hover { color: var(--navy); }

.tech-ai__source {
  position: absolute;
  top: calc(659.92 * var(--u));
  left: calc(1379.3 * var(--u));
  font-size: calc(16.67 * var(--u));
  font-weight: var(--book);
  line-height: calc(20 * var(--u));
  white-space: nowrap;
  color: rgba(96, 96, 96, .51);
}

.tech-ai .container::after {
  content: '';
  position: absolute;
  top: calc(730.87 * var(--u));
  left: calc(1673 * var(--u));
  width: calc(67 * var(--u));
  height: max(1px, calc(1.67 * var(--u)));
  background: #f19900;
}

/* ---------- technology: 4. seasonal cycles ---------- */

.tech-cycles { background: linear-gradient(90deg, #fcfaf7, #f8f5ef 62%, #f3ede6); }

/* The bar beside the text and the rule under it hang into the margin, as
   the eyebrow rules do; the rule ends on the content edge. */
.tech-cycles .container::before,
.tech-cycles .container::after {
  content: '';
  position: absolute;
}

.tech-cycles .container::before {
  top: calc(152 * var(--u));
  left: calc(-23.5 * var(--u));
  width: calc(3 * var(--u));
  height: calc(813 * var(--u));
  background: #eb7041;
}

.tech-cycles .container::after {
  top: calc(1002.5 * var(--u));
  left: calc(-24 * var(--u));
  right: 0;
  height: max(1px, var(--u));
  background: var(--header-rule);
}

.tech-cycles__text {
  position: absolute;
  top: calc(150.92 * var(--u));
  left: 0;
}

.tech-cycles .tech-eyebrow { font-size: calc(16.98 * var(--u)); }

.tech-cycles .tech-eyebrow::after { content: none; }

.tech-cycles__title {
  margin-top: calc(21.73 * var(--u));
  font-size: calc(32.41 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tech-cycles__heading {
  margin-top: calc(26.66 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cf2f2b;
}

.tech-cycles__heading--cool {
  margin: calc(80.72 * var(--u)) 0 0 calc(-3.5 * var(--u));
  color: #3377ca;
}

.tech-cycles__body {
  margin: calc(15.68 * var(--u)) 0 0 calc(.3 * var(--u));
  font-size: calc(21.33 * var(--u));
  font-weight: var(--book);
  line-height: calc(28 * var(--u));
  letter-spacing: .05em;
  white-space: nowrap;
}

.tech-cycles__body--cool { margin: calc(9.78 * var(--u)) 0 0 calc(-2.9 * var(--u)); }

.combined-effect {
  position: relative;
  width: calc(625 * var(--u));
  height: calc(114.9 * var(--u));
  margin: calc(42.82 * var(--u)) 0 0 calc(7.7 * var(--u));
  border: max(1px, var(--u)) solid #d7cec2;
  border-radius: calc(9.5 * var(--u));
}

.combined-effect > p {
  position: absolute;
  line-height: 1;
  white-space: nowrap;
}

.combined-effect__label {
  top: calc(14.75 * var(--u));
  left: calc(40 * var(--u));
  font-size: calc(17.43 * var(--u));
  font-weight: var(--book);
  letter-spacing: .285em;
  text-transform: uppercase;
  color: var(--navy-text);
}

.combined-effect__formula {
  top: calc(51.97 * var(--u));
  left: calc(43.9 * var(--u));
  font-size: calc(32.37 * var(--u));
  font-weight: var(--heavy);
}

.combined-effect__formula sub {
  font-size: .51em;
  line-height: 0;
  vertical-align: calc(-9.8 * var(--u));
}

/* Underline tied to the result itself instead of a fixed x offset,
   so it survives text or font changes. */

.combined-effect__result {
  position: relative;
  display: inline-block;
}

.combined-effect__result::after {
  content: '';
  position: absolute;
  top: 1.4em;           /* 45.43 / 32.37 */
  left: 0;
  right: 0;
  height: max(1px, .062em); /* 2 / 32.37 */
  background: #ef7900;
}

.cycle-chart {
  --accent: #cf2f2b;
  position: absolute;
  width: calc(849 * var(--u));
  height: calc(355 * var(--u));
  border: max(1px, var(--u)) solid #d7cec2;
  border-radius: calc(15 * var(--u));
}

.cycle-chart--heat {
  top: calc(163.9 * var(--u));
  left: calc(891 * var(--u));
}

.cycle-chart--cool {
  --accent: #3377ca;
  top: calc(599.5 * var(--u));
  left: calc(891 * var(--u));
}

.cycle-chart > * { position: absolute; }

.cycle-chart__module {
  top: calc(34.04 * var(--u));
  left: calc(30.7 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .222em;
  text-transform: uppercase;
  color: var(--accent);
}

.cycle-chart__name {
  top: calc(52.34 * var(--u));
  left: calc(30.4 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

.cycle-chart--cool .cycle-chart__module {
  top: calc(34.54 * var(--u));
  left: calc(32.4 * var(--u));
}

.cycle-chart--cool .cycle-chart__name {
  top: calc(50.54 * var(--u));
  left: calc(31 * var(--u));
}

.effect-badge {
  --badge: #cf2f2b;
  --label-x: 18.3;
  --label-y: 10.95;
  --value-y: 18.4;
  top: calc(90 * var(--u));
  left: calc(31.3 * var(--u));
  width: calc(151.33 * var(--u));
  height: calc(47.33 * var(--u));
  border: max(1px, calc(1.33 * var(--u))) solid var(--badge);
  border-radius: calc(9.67 * var(--u));
  background: #fff9f3;
  color: var(--badge);
}

.effect-badge--cool {
  --badge: #3377ca;
  --label-x: 6.7;
  --label-y: 9.95;
  --value-y: 17.4;
  top: calc(88.8 * var(--u));
  border-color: #197eb6;
  background: #f3f9fc;
}

.effect-badge--recycling {
  --label-x: 7.6;
  --label-y: 11;
  --value-y: 18.5;
  top: calc(214 * var(--u));
}

.effect-badge > * {
  position: absolute;
  left: calc(var(--label-x) * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.effect-badge__label {
  top: calc(var(--label-y) * var(--u));
  font-size: calc(6.5 * var(--u));
  font-weight: var(--book);
  letter-spacing: .308em;
  text-transform: uppercase;
}

.effect-badge__value {
  top: calc(var(--value-y) * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: var(--heavy);
}

.effect-badge > .effect-badge__swatch {
  top: calc(7.7 * var(--u));
  left: calc(111.5 * var(--u));
  width: calc(29.13 * var(--u));
  height: auto;
  border: max(1px, calc(1.33 * var(--u))) solid #3377ca;
  border-radius: 50%;
}

.effect-badge--recycling > .effect-badge__swatch { border-color: #ec797b; }

/* Rotated to read bottom to top; the origin sits on the text baseline. */
.cycle-chart__axis {
  top: calc(254.7 * var(--u));
  left: calc(268.05 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .333em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #737a7e;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.cycle-chart__plot {
  top: calc(33.9 * var(--u));
  left: calc(383.3 * var(--u));
  width: calc(372.6 * var(--u));
  height: calc(278.9 * var(--u));
}

.cycle-chart__y,
.cycle-chart__x,
.cycle-chart__months {
  inset: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(8.09 * var(--u));
  line-height: 1;
  color: #555;
}

.cycle-chart__y li,
.cycle-chart__x li,
.cycle-chart__months li {
  position: absolute;
  white-space: nowrap;
}

.cycle-chart__y li {
  top: calc((34.75 + 45.04 * var(--i)) * var(--u));
  right: calc((849 - 2 - 380.8) * var(--u));
}

.cycle-chart__x li {
  top: calc(311.85 * var(--u));
  left: calc((388 + 30.4 * var(--i)) * var(--u));
  translate: -50% 0;
}

.cycle-chart__months {
  --top: 332.8;
  --jan: 396.8;
  --jun: 585.45;
  --dec: 748.35;
  font-family: var(--sans);
  font-size: calc(7 * var(--u));
  font-weight: var(--book);
  text-transform: uppercase;
  color: #737a7e;
}

.cycle-chart--cool .cycle-chart__months {
  --top: 281.5;
  --jan: 320;
  --jun: 544.3;
  --dec: 770.05;
}

.cycle-chart__months li {
  top: calc(var(--top) * var(--u));
  translate: -50% 0;
}

.cycle-chart__months li:nth-child(1) { left: calc(var(--jan) * var(--u)); }
.cycle-chart__months li:nth-child(2) { left: calc(var(--jun) * var(--u)); }
.cycle-chart__months li:nth-child(3) { left: calc(var(--dec) * var(--u)); }

/* Frame around the cooling chart. */
.cycle-chart--cool::after {
  content: '';
  position: absolute;
  top: calc(51.7 * var(--u));
  left: calc(312.8 * var(--u));
  width: calc(471.3 * var(--u));
  height: calc(216.6 * var(--u));
  border: max(1px, var(--u)) solid rgba(107, 107, 107, .48);
  border-radius: calc(5.5 * var(--u));
  pointer-events: none;
}

.cycle-chart__area {
  top: calc(102.5 * var(--u));
  left: calc(313.3 * var(--u));
  width: calc(470.3 * var(--u));
  height: calc(165.3 * var(--u));
}

.cycle-chart__note {
  top: calc(306.95 * var(--u));
  left: calc(40 * var(--u));
  font-size: calc(10.67 * var(--u));
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: rgba(16, 35, 72, .34);
}

/* ---------- added value ----------
   Design pages 03–04 as two sections: the benefit cards on a 1920 × 1280
   artboard and "applies to" on a 1920 × 1080 one. Same model as the
   technology page — artboard pixels times --u, placed against the section's
   container, text tops derived from the design's baselines. Photos, card
   grid and rules that ended 10px short of the content edge now reach it. */

/* Both artboards are the same flat sand, so the wrapper carries it too and no
   seam shows above or below the sections on a tall window. */
.page--added-value { background: #f8f5ef; }

.av-section {
  overflow: clip;
  background: #f8f5ef;
  font-family: var(--sans);
  color: var(--navy);
}

/* Zero-specificity resets, so every rule below can set its own spacing. */
:where(.av-section) :where(p, h1, h2, h3, figure, ul) { margin: 0; }

:where(.av-section) :where(ul) {
  padding: 0;
  list-style: none;
}

:where(.av-section) :where(img) { display: block; }

.av-benefits { height: calc(1280 * var(--u)); }

.av-applies { height: calc(1080 * var(--u)); }

/* ---------- added value: 1. the benefits ---------- */

/* The photo carries its own soft edge, so only the lower corners are cut. */
.av-benefits__photo {
  position: absolute;
  top: calc(240 * var(--u));
  left: 0;
  width: 100%;
  height: calc(317.5 * var(--u));
  border-radius: calc(17.5 * var(--u));
  object-fit: cover;
}

.av-grid {
  position: absolute;
  top: calc(595 * var(--u));
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(22.5 * var(--u)) calc(21.25 * var(--u));
}

/* The outline is an inset shadow rather than a border, so the offsets below
   stay measured from the card edge instead of from inside the border. */
.av-card {
  position: relative;
  height: calc(225 * var(--u));
  border-radius: calc(16.25 * var(--u));
  background: #01162b;
  box-shadow: inset 0 0 0 max(1px, calc(.88 * var(--u))) #16334c;
  color: #fff;
}

.av-card__icon {
  position: absolute;
  top: calc(15 * var(--u));
  right: calc(14 * var(--u));
  /* The line-icon set's native raster is only ~64px; anything bigger
     upscales and blurs it, so the box is capped at that size instead
     of the artboard-derived 95 * var(--u). */
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.av-card__title,
.av-card__text,
.av-card__lead,
.av-card__figure {
  position: absolute;
  left: calc(32.5 * var(--u));
}

.av-card__title {
  top: calc(var(--title-y) * var(--u));
  max-width: calc(100% - 150 * var(--u));
  font-size: calc(var(--title-size, 19.38) * var(--u));
  font-weight: var(--roman);
  line-height: calc(var(--title-lh, 19.38) * var(--u));
}

.av-card__text {
  top: calc(var(--text-y) * var(--u));
  right: calc(22.5 * var(--u));
  font-size: calc(var(--text-size, 15) * var(--u));
  font-weight: var(--roman);
  line-height: calc(var(--text-lh, 17.5) * var(--u));
}

/* Both amounts sit in a line box fixed by --text-lh, so the larger one does
   not push the lines below it apart. */
.av-card__amount { font-weight: var(--black); }

.av-card__amount--now { color: #00a442; }

.av-card__amount--retrofit {
  font-size: calc(15 * var(--u));
  color: #f20d18;
}

.av-card--energy {
  --text-y: 136;
}

.av-card__lead {
  top: calc(37.73 * var(--u));
  font-size: calc(19.38 * var(--u));
  font-weight: var(--roman);
  line-height: 1;
}

.av-card__figure {
  top: calc(63.57 * var(--u));
  font-size: calc(42.5 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  color: #00a5d8;
}

.av-card__figure span {
  font-size: calc(26.25 / 42.5 * 1em);
  font-weight: var(--book);
}

.av-card--risk {
  --title-y: 28.57;
  --title-lh: 22.5;
  --text-y: 136;
}

.av-card--alliance {
  --title-y: 38.03;
  --text-y: 128;
  --text-size: 13.5;
}

.av-card--esg {
  --title-y: 37.47;
  --title-lh: 19.9;
  --text-y: 128;
}

.av-card--deployment {
  --title-y: 38.93;
  --text-y: 134;
}

.av-card--downtime {
  --title-y: 38.93;
  --text-y: 128;
}

.av-card--capital {
  --title-y: 30;
  --title-lh: 18;
  --text-y: 126;
  --text-size: 12.62;
  --text-lh: 15;
}

.av-card--partner {
  --title-y: 33.72;
  --title-lh: 22.4;
  --text-y: 122;
}

.av-benefits__note {
  position: absolute;
  top: calc(1103.75 * var(--u));
  left: 0;
  width: 100%;
  height: calc(76.25 * var(--u));
  padding: calc(26.4 * var(--u)) 0 0 calc(45 * var(--u));
  border-radius: calc(15 * var(--u));
  background: #01162b;
  font-size: calc(22.5 * var(--u));
  font-weight: 300;
  line-height: 1;
  color: #fff;
}

/* ---------- added value: 2. who it applies to ---------- */

.av-applies {
  /* This artboard's orange; the rest of the site uses a shade less of it. */
  --orange: #f2a000;
  --heading: #13283a;
  --rule: #d8d6d0;
}

/* Only the picture is cut to the rounded shape — the orange edge stays square
   and covers its left corners, as on the artboard. */
.av-applies__photo {
  position: absolute;
  top: calc(96 * var(--u));
  left: 0;
  width: calc(484 * var(--u));
  height: calc(888 * var(--u));
}

.av-applies__photo img {
  width: 100%;
  height: 100%;
  border-radius: calc(26 * var(--u));
}

.av-applies__photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(12 * var(--u));
  height: 100%;
  background: var(--orange);
}

.av-applies__intro {
  position: absolute;
  top: calc(113.91 * var(--u));
  left: calc(539.8 * var(--u));
}

.av-applies__intro::after {
  content: '';
  position: absolute;
  top: calc(81.39 * var(--u));
  left: 0;
  width: calc(1200.2 * var(--u));
  height: max(1px, calc(1.4 * var(--u)));
  background: var(--rule);
}

.av-applies__eyebrow {
  font-size: calc(34 * var(--u));
  font-weight: var(--roman);
  line-height: 1;
  text-transform: uppercase;
  color: var(--orange);
}

.av-applies__title {
  margin-top: calc(9.37 * var(--u));
  font-size: calc(32.47 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--heading);
}

.av-applies__heading {
  position: absolute;
  left: calc(566 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: var(--medium);
  line-height: 1;
  color: var(--heading);
}

.av-applies__heading--who { top: calc(258.79 * var(--u)); }

.av-applies__heading--types { top: calc(584.79 * var(--u)); }

.av-applies__heading--types::before {
  content: '';
  position: absolute;
  top: calc(-57.49 * var(--u));
  left: 0;
  width: calc(1174 * var(--u));
  height: max(1px, calc(1.4 * var(--u)));
  background: var(--rule);
}

/* Both lists are set item by item: the artboard spaces its columns by eye,
   so there is no grid to derive them from. */
.av-who__item,
.av-types__item {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
}

.av-who__item span,
.av-types__label {
  display: block;
  font-size: calc(21.93 * var(--u));
  font-weight: var(--medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--heading);
}

.av-who__item {
  padding-left: calc(49.2 * var(--u));
}

.av-who__item img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: calc(35.3 * var(--u));
}

.av-who__item span { margin-top: calc(10.21 * var(--u)); }

.av-who__item:nth-child(1) { --x: 564.3;  --y: 337; }
.av-who__item:nth-child(2) { --x: 911.3;  --y: 337; }
.av-who__item:nth-child(3) { --x: 1202.9; --y: 337; }
.av-who__item:nth-child(4) { --x: 1507;   --y: 337; }
.av-who__item:nth-child(5) { --x: 567.4;  --y: 384.6; }
.av-who__item:nth-child(6) { --x: 916;    --y: 384.6; padding-left: calc(46 * var(--u)); }
.av-who__item:nth-child(7) { --x: 1206;   --y: 384.6; }

.av-types__item { padding-left: calc(54.9 * var(--u)); }

.av-types__mark {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(38.18 * var(--u));
  height: calc(38.18 * var(--u));
  border-radius: 50%;
  background: #01162b;
}

.av-types__mark img {
  width: auto;
  height: calc(20 * var(--u));
}

.av-types__label { margin-top: calc(10.4 * var(--u)); }

.av-types__item:nth-child(1) { --x: 576.57;  --y: 666.9; }
.av-types__item:nth-child(2) { --x: 875.39;  --y: 666.9; }
.av-types__item:nth-child(3) { --x: 1178.89; --y: 666.9; }
.av-types__item:nth-child(4) { --x: 1510.18; --y: 666.9; }
.av-types__item:nth-child(5) { --x: 576.57;  --y: 738.9; }
.av-types__item:nth-child(6) { --x: 875.39;  --y: 738.9; }
.av-types__item:nth-child(7) { --x: 1178.89; --y: 738.9; }
.av-types__item:nth-child(8) { --x: 1510.18; --y: 738.9; }

/* Right-aligned on the content edge. The artboard sets this line in a font
   it never embedded, so its width there means nothing — only the right edge
   carries any intent. */
.av-applies__note {
  position: absolute;
  top: calc(919.37 * var(--u));
  right: 0;
  font-size: calc(15.6 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  white-space: nowrap;
  color: #87919a;
}

/* ---------- references ----------
   Design page 11 on a 1920 × 810 artboard: two built projects side by side
   under a 2020–2026 range. Artboard pixels times --u, placed against the
   section's container, as on the other redesigned pages. The shared page
   intro sets a larger eyebrow a little lower than the artboard, so the title,
   the range and the cards sit 13.21px lower; each card is 8px narrower, so
   the pair spans the content box. */

/* Same sand as the artboard's lighter corner, for any window taller than the
   page. */
.page--references { background: var(--sand-top); }

/* The artboard's diagonal sand gradient, corner to corner. */
.ref-projects {
  --body: #536171;
  --rule: #d8cec0;
  --mark: #ef7900;
  overflow: clip;
  height: calc(823.21 * var(--u));
  background: linear-gradient(113.21deg, var(--sand-top) 0%, #f5f0e8 70%, var(--sand-bottom) 100%);
  font-family: var(--sans);
  color: var(--navy);
}

:where(.ref-projects) :where(p, h1, h2) { margin: 0; }

/* Set under the page intro's eyebrow. */
.ref-projects__title {
  margin: calc(6.77 * var(--u)) 0 0 calc(.8 * var(--u));
  font-size: calc(52.5 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Years and rail are placed against the block's left edge rather than laid
   out in a row, so the rail keeps the artboard's position whatever width the
   substitute font gives the years. The block starts where the artboard's
   "2026" would end on the content edge. */
.ref-range {
  position: absolute;
  top: calc(147.09 * var(--u));
  left: calc(1376.5 * var(--u));
  height: calc(30 * var(--u));
}

.ref-range__year {
  position: absolute;
  left: 0;
  font-size: calc(30 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .16em;
  color: var(--mark);
}

.ref-range__year--to { left: calc(277.5 * var(--u)); }

.ref-range__rail {
  position: absolute;
  top: calc(16.75 * var(--u));
  left: calc(115 * var(--u));
  width: calc(141.25 * var(--u));
  height: max(1px, calc(1.25 * var(--u)));
  background: var(--rule);
}

.ref-range__rail::before,
.ref-range__rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border: max(1px, calc(1.25 * var(--u))) solid var(--mark);
  border-radius: 50%;
  background: #f5f0e8;
  translate: 0 -50%;
}

.ref-range__rail::before { left: calc(-1.25 * var(--u)); }

.ref-range__rail::after { right: calc(-1.25 * var(--u)); }

.ref-card {
  position: absolute;
  top: calc(240.71 * var(--u));
  left: 0;
  width: calc(838 * var(--u));
  height: calc(542.5 * var(--u));
}

.ref-card--greenhub { left: calc(902 * var(--u)); }

/* Both photos are cropped to the middle of their frame, which is what
   object-fit: cover gives at this box. */
.ref-card__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(467.5 * var(--u));
  height: calc(542.5 * var(--u));
  border-radius: calc(10 * var(--u));
  object-fit: cover;
}

.ref-card__place,
.ref-card__tagline,
.ref-card__body,
.ref-card__source,
.ref-card__name,
.ref-card__role {
  position: absolute;
  left: calc(497.5 * var(--u));
}

.ref-card__place {
  top: calc(23.6 * var(--u));
  font-size: calc(13.75 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .109em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mark);
}

/* Baseline alignment puts the version on the bottom edge of the S, which is
   where the artboard sets it. */
.ref-card__system {
  position: absolute;
  top: calc(59 * var(--u));
  left: calc(498.2 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
}

.ref-card__mark {
  width: calc(26.56 * var(--u));
  height: calc(26.31 * var(--u));
  color: var(--navy-text);
}

.ref-card__system span {
  font-size: calc(13.33 * var(--u));
  font-weight: var(--black);
  line-height: 1;
}

.ref-card__tagline {
  top: calc(100.37 * var(--u));
  font-size: calc(13.12 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy-text);
}

.ref-card__body {
  top: calc(139.73 * var(--u));
  font-size: calc(14.12 * var(--u));
  font-weight: var(--book);
  line-height: calc(21.25 * var(--u));
  color: var(--body);
}

.ref-card__source {
  top: calc(300.83 * var(--u));
  font-size: calc(11.67 * var(--u));
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--body);
}

.ref-card__name {
  top: calc(327.82 * var(--u));
  font-size: calc(13.12 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
}

.ref-card__role {
  top: calc(346.62 * var(--u));
  font-size: calc(13.12 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  color: var(--body);
}

.ref-card::after {
  content: '';
  position: absolute;
  top: calc(424.38 * var(--u));
  left: calc(497.5 * var(--u));
  width: calc(338.3 * var(--u));
  height: max(1px, calc(1.25 * var(--u)));
  background: var(--rule);
}

/* ---------- q&a ----------
   Design page 12 on a 1920 × 1080 artboard: five questions, each a shaded
   card butted against its answer on white. Artboard pixels times --u, placed
   against the section's container. The shared page intro sets a larger
   eyebrow lower than the artboard's; the list keeps its distance to it and
   moves down by 56.43px, and the section grows by as much. */

.page--qa { background: #faf8f3; }

.qa {
  --question-ink: #061d35;
  --answer-ink: #6b6b6b;
  --mark: #ef9600;
  overflow: clip;
  height: calc(1136.43 * var(--u));
  background: #faf8f3;
  font-family: var(--sans);
  color: var(--question-ink);
}

:where(.qa) :where(p, h1, dl, dd) { margin: 0; }

/* The hairline that closes the page. */
.qa .container::after {
  content: '';
  position: absolute;
  top: calc(1102.93 * var(--u));
  left: 0;
  right: 0;
  height: max(1px, calc(1 * var(--u)));
  background: #d9d5cc;
}

.qa-list {
  position: absolute;
  top: calc(179.43 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}

/* Question and answer butt together, so only the outer corners are round. */
.qa-row {
  display: grid;
  grid-template-columns: calc(560 * var(--u)) 1fr;
  height: calc(160 * var(--u));
}

.qa-question {
  position: relative;
  border-radius: calc(14 * var(--u));
  background: #f0ede6;
}

/* The artboard nudges this bar by a few pixels per row; centred splits the
   difference within 4px. */
.qa-question::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(28 * var(--u));
  width: calc(3 * var(--u));
  height: calc(118.3 * var(--u));
  background: var(--mark);
  translate: 0 -50%;
}

.qa-question__number,
.qa-question__text,
.qa-question__label,
.qa-formula {
  position: absolute;
  left: calc(42 * var(--u));
}

.qa-question__number {
  top: calc(21.22 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  color: var(--mark);
}

.qa-question__text {
  top: calc(46.23 * var(--u));
  font-size: calc(19.5 * var(--u));
  font-weight: var(--black);
  line-height: calc(24.7 * var(--u));
}

.qa-question__label {
  top: calc(103.54 * var(--u));
  left: calc(44 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  letter-spacing: .333em;
  text-transform: uppercase;
}

.qa-formula {
  top: calc(122.57 * var(--u));
  left: calc(44 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: var(--black);
  line-height: 1;
  white-space: nowrap;
}

/* line-height 0 keeps a subscript from stretching the line box it sits in,
   so a line carrying one is spaced like every other. */
.qa-formula sub {
  font-size: .667em;
  line-height: 0;
  vertical-align: -.2em;
}

/* The rule under the result runs a little wider than the text it marks.
   Measured in em so it follows the formula's font size on every breakpoint;
   the values equal the artboard's 15.94, 3 and 4 px at a 15 px formula. */
.qa-formula__result {
  position: relative;
  display: inline-block;
  padding-inline: .267em;
  margin-inline: -.267em;
}

.qa-formula__result::after {
  content: '';
  position: absolute;
  top: 1.063em;
  left: 0;
  right: 0;
  height: max(1px, .2em);
  background: var(--mark);
}

.qa-answer {
  border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
  padding: calc(var(--answer-top) * var(--u)) calc(14 * var(--u)) 0 calc(29.6 * var(--u));
  background: #fffdfa;
  font-size: calc(var(--answer-size) * var(--u));
  font-weight: var(--book);
  line-height: calc(var(--answer-leading) * var(--u));
  letter-spacing: .025em;
  color: var(--answer-ink);
}

.qa-answer sub {
  font-size: .58em;
  line-height: 0;
  vertical-align: -.33em;
}

/* Every row sets its own type size and first baseline. */
.qa-row:nth-child(1) { --answer-top: 5.39; --answer-size: 14; --answer-leading: 18; }
.qa-row:nth-child(2) { --answer-top: 21.96; --answer-size: 13.5; --answer-leading: 20; }
.qa-row:nth-child(3) { --answer-top: 8.19; --answer-size: 14; --answer-leading: 21; }
.qa-row:nth-child(4) { --answer-top: 24.99; --answer-size: 14; --answer-leading: 21; }
.qa-row:nth-child(5) { --answer-top: 33.19; --answer-size: 14; --answer-leading: 21; }

/* The one row the artboard sets taller, and the one paragraph it sets off. */
.qa-row:nth-child(2) {
  height: calc(201.67 * var(--u));
  margin-bottom: calc(6 * var(--u));
}

.qa-row:nth-child(1) .qa-answer p:last-child { margin-top: calc(4 * var(--u)); }

/* ---------- contact ----------
   Design page 13 on a 1920 × 1080 artboard: the claim on a dark panel beside
   the request form. Artboard pixels times --u, placed against the section's
   container. The artboard draws the form's labels as outlines rather than
   text, so their sizes come from cap heights. The shared page intro, with the
   hairline beside the eyebrow, sits lower than the artboard's eyebrow; the
   panels keep their distance to it and move down by 34.32px, and the section
   grows by as much. */

.page--contact { background: #fbf9f4; }

.contact {
  --label: #6e6b68;
  --box: #d4cec4;
  --rule: #d9d4ca;
  --mark: #ee9700;
  overflow: clip;
  height: calc(1114.32 * var(--u));
  background: linear-gradient(119.36deg, #fbf9f4, #f6f3ed);
  font-family: var(--sans);
  color: var(--navy);
}

:where(.contact) :where(p, h1, label) { margin: 0; }

/* The hairline that closes the page. */
.contact .container::after {
  content: '';
  position: absolute;
  top: calc(1068.8 * var(--u));
  left: 0;
  right: 0;
  height: max(1px, calc(1.05 * var(--u)));
  background: var(--rule);
}

/* Both panels cast the artboard's hard offset shadow — no blur. */
.contact-intro {
  position: absolute;
  top: calc(169.32 * var(--u));
  left: 0;
  width: calc(615 * var(--u));
  height: calc(846 * var(--u));
  border-radius: calc(16.5 * var(--u));
  background: linear-gradient(143.97deg, #071d35, #00172d);
  box-shadow: calc(6 * var(--u)) calc(10.5 * var(--u)) 0 rgba(38, 54, 74, .1);
}

.contact-intro__title {
  position: absolute;
  top: calc(102.24 * var(--u));
  left: calc(38.2 * var(--u));
  font-size: calc(49.56 * var(--u));
  font-weight: var(--black);
  line-height: calc(59.5 * var(--u));
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.contact-intro::after {
  content: '';
  position: absolute;
  top: calc(255.4 * var(--u));
  left: calc(39.6 * var(--u));
  width: calc(76.5 * var(--u));
  height: max(1px, calc(3 * var(--u)));
  background: var(--mark);
}

/* The outline is an inset shadow, so the offsets below stay measured from the
   panel edge instead of from inside a border. */
.contact-form {
  position: absolute;
  top: calc(169.32 * var(--u));
  left: calc(645 * var(--u));
  width: calc(1095 * var(--u));
  height: calc(846 * var(--u));
  border-radius: calc(16.5 * var(--u));
  background: #fffefb;
  box-shadow:
    inset 0 0 0 max(1px, calc(1.05 * var(--u))) #ded8ce,
    calc(6 * var(--u)) calc(10.5 * var(--u)) 0 rgba(38, 54, 74, .08);
}

.contact-form__legend {
  position: absolute;
  top: calc(42.09 * var(--u));
  left: calc(44.9 * var(--u));
  font-size: calc(12.8 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mark);
}

.contact-form__alert {
  position: absolute;
  top: calc(72 * var(--u));
  left: calc(45 * var(--u));
  width: calc(1002 * var(--u));
  margin: 0;
  font-size: calc(10.5 * var(--u));
  font-weight: var(--medium);
  line-height: 1.25;
  color: #9f1d18;
}

/* Bot trap: people and assistive technology never need to interact with it. */
.contact-form__website {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field { position: absolute; }

.contact-field label {
  display: block;
  font-size: calc(11 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--label);
}

.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  margin-top: calc(5.52 * var(--u));
  border: max(1px, calc(1.05 * var(--u))) solid var(--box);
  border-radius: calc(7.5 * var(--u));
  background: none;
  font-family: inherit;
  font-size: calc(12.5 * var(--u));
  font-weight: var(--book);
  letter-spacing: .05em;
  color: var(--navy);
}

.contact-field input {
  height: calc(40.5 * var(--u));
  padding: 0 calc(12 * var(--u));
}

.contact-field textarea {
  height: calc(78 * var(--u));
  padding: calc(8.5 * var(--u)) calc(12 * var(--u)) 0;
  line-height: calc(18 * var(--u));
  resize: none;
}

.contact-field ::placeholder {
  color: var(--label);
  opacity: 1;
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible,
.contact-consent input:focus-visible,
.contact-submit:focus-visible,
.contact-consent a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.contact-field--invalid input,
.contact-field--invalid textarea { border-color: #b42318; }

.contact-field__error {
  position: absolute;
  top: 0;
  right: 0;
  font-size: calc(9.5 * var(--u));
  font-weight: var(--medium);
  line-height: 1;
  color: #9f1d18;
}

.contact-field--name    { top: calc(107.98 * var(--u)); left: calc(45 * var(--u));    width: calc(480 * var(--u)); }
.contact-field--company { top: calc(107.98 * var(--u)); left: calc(541.5 * var(--u)); width: calc(505.5 * var(--u)); }
.contact-field--email   { top: calc(190.48 * var(--u)); left: calc(45 * var(--u));    width: calc(480 * var(--u)); }
.contact-field--phone   { top: calc(190.48 * var(--u)); left: calc(541.5 * var(--u)); width: calc(505.5 * var(--u)); }
.contact-field--message { top: calc(271.48 * var(--u)); left: calc(45 * var(--u));    width: calc(1002 * var(--u)); }

/* The artboard sets the first row 1.5px further from its labels. */
.contact-field--name input,
.contact-field--company input { margin-top: calc(7.02 * var(--u)); }

.contact-form__rule {
  position: absolute;
  top: calc(400.5 * var(--u));
  left: calc(45 * var(--u));
  width: calc(1002 * var(--u));
  height: max(1px, calc(1.05 * var(--u)));
  margin: 0;
  border: 0;
  background: var(--rule);
}

.contact-consent {
  position: absolute;
  top: calc(669 * var(--u));
  left: calc(45 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(11.7 * var(--u));
  cursor: pointer;
}

.contact-consent input {
  appearance: none;
  flex: none;
  width: calc(16.5 * var(--u));
  height: calc(16.5 * var(--u));
  margin: 0;
  border: max(1px, calc(1.5 * var(--u))) solid #6f7f8e;
  border-radius: calc(2.25 * var(--u));
  background: none;
  cursor: pointer;
}

.contact-consent input:checked {
  border-color: var(--navy);
  background: var(--navy);
}

.contact-consent input:checked::after {
  content: '';
  display: block;
  width: 28%;
  height: 55%;
  margin: 8% auto;
  border: solid #fff;
  border-width: 0 max(1px, calc(1.8 * var(--u))) max(1px, calc(1.8 * var(--u))) 0;
  rotate: 45deg;
}

.contact-consent span {
  margin-top: calc(3.55 * var(--u));
  font-size: calc(12.25 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  letter-spacing: .05em;
  color: #061d35;
}

/* The artboard sets this line as plain text; the link keeps its look. */
.contact-consent a {
  color: inherit;
  text-decoration: none;
}

.contact-consent a:hover { text-decoration: underline; }

.contact-consent--invalid input { border-color: #b42318; }

.contact-consent__error {
  position: absolute;
  top: calc(23 * var(--u));
  left: calc(28.2 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: var(--medium);
  line-height: 1;
  color: #9f1d18;
}

.contact-submit {
  position: absolute;
  top: calc(717 * var(--u));
  left: calc(45 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(240 * var(--u));
  height: calc(42 * var(--u));
  padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(27.8 * var(--u));
  border: 0;
  border-radius: calc(21 * var(--u));
  background: #061d35;
  font-family: inherit;
  font-size: calc(12.1 * var(--u));
  font-weight: var(--heavy);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background .18s;
}

.contact-submit:hover { background: var(--navy-line); }

.contact-submit .arrow { color: var(--mark); }

.arrow--form {
  width: calc(15 * var(--u));
  height: calc(12 * var(--u));
}

.contact-form__note {
  position: absolute;
  top: calc(734.23 * var(--u));
  left: calc(304.8 * var(--u));
  font-size: calc(10.1 * var(--u));
  font-weight: var(--book);
  line-height: 1;
  color: var(--label);
}

/* ---------- shared split layouts ---------- */

/* Follows a page intro, so it starts as close to the eyebrow as a title
   would. */
.split {
  padding-block: 20px clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.split--center { align-items: center; }

.split--top { align-items: start; }

.split__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}

.split__lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 48ch;
}

.split__lead--spaced { margin-bottom: 30px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--hair);
  padding: clamp(26px, 3vw, 40px);
}

.confirm {
  text-align: center;
  padding: 30px 6px;
}

.confirm__icon {
  font-size: 44px;
  color: var(--accent);
  margin-bottom: 14px;
}

.confirm__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 10px;
}

.confirm p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px;
}

/* ---------- legal ---------- */

.legal { padding-bottom: clamp(44px, 6vw, 80px); }

/* The text column keeps a reading width; it starts on the content edge like
   everything else. */
.legal__blocks {
	/* max-width: 764px; */
}

.legal__intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 64ch;
}

.legal__block {
  border-top: 1px solid rgba(27, 44, 93, .15);
  padding: 24px 0;
}

.legal__block--wide { padding: 26px 0; }

.legal__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 10px;
}

.legal__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  margin: 0 0 10px;
}

.legal__t {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  /*max-width: 66ch;*/
  white-space: pre-line;
}

.legal__updated {
  font-size: 13px;
  color: var(--meta);
  margin: 28px 0 0;
  line-height: 1.6;
}

/* ---------- 404 ---------- */

.notfound { padding-bottom: clamp(60px, 10vw, 140px); }

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  margin-top: auto;
}

.site-footer__inner {
  padding-block: clamp(44px, 5vw, 68px) clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.wordmark {
  display: flex;
  align-items: flex-start;
  line-height: .8;
  font-family: var(--display);
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}

.wordmark__s { font-size: 34px; }

.wordmark__3 {
  font-size: 17px;
  color: var(--accent-on-dark);
  margin-left: 1px;
}

.wordmark__ai {
  font-size: 14px;
  margin-top: 14px;
  margin-left: 2px;
}

.site-footer__about {
  font-size: 14px;
  line-height: 1.6;
  color: var(--footer-dim);
  margin: 0 0 20px;
  max-width: 34ch;
}

.site-footer__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--footer-label);
  margin-bottom: 18px;
}

.site-footer__label--tight { margin-bottom: 14px; }

.social {
  display: flex;
  gap: 12px;
}

.social a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  transition: background .18s, color .18s;
}

/* An --accent fill would be indistinguishable from the footer itself, so the
   hover brightens the existing tint instead. */
.social a:hover {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Explore's two link columns under its one label. The row gap matches the link
   gap, so if the column gets too narrow they wrap into a single list. */
.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(24px, 3vw, 48px);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__links a { font-size: 15px; }

/* The global a:hover paints links in --accent, which is unreadable against the
   navy footer. Brighten them instead. */
.site-footer a:hover { color: var(--accent-on-dark); }

/* Brightening alone is a small step from the already light link colour, so the
   text links also underline. The social icons are pills and stay undecorated. */
.site-footer__links a:hover,
.site-footer__legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }

.site-footer__bottom-inner {
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--footer-label);
}

.site-footer__legal {
  display: flex;
  gap: 24px;
}

.site-footer__legal a { color: var(--footer-label); }

/* ---------- breakpoints ----------
   From 1200px up the header and home page are the artboard, scaled with the
   window. Below that --u becomes a fixed size, the hero stacks its copy above
   the visual and the panel wraps, and the content edge and the space above
   the page intro become fixed sizes that shrink once more on phones. Below
   900px the navigation moves into the drawer. */

/* Also hides a drawer left open while the window grows past 900px. */
@media (min-width: 900px) {
  .drawer,
  .is-menu-open .drawer { display: none; }
}

@media (max-width: 1199.98px) {
  /* 0.8px on tablets; on phones small enough that the widest headline line
     (606 artboard px) fits between 20px gutters. */
  :root {
    --u: min(.8px, (100vw - 40px) / 606);
    --gutter: 40px;
    --page-top: 56px;
  }

  /* The eyebrow gets 14px of padding on top and the rule moves into it,
     over the start of the text. */
  .page-eyebrow {
    padding-top: 14px;
    font-size: 15px;
  }

  .page-eyebrow::before {
    top: 0;
    right: auto;
    left: 0;
    width: 22px;
    height: 2px;
  }

  .page--home { background-size: 100% 100%; }

  .hero {
    height: auto;
    overflow: visible;
  }

  .hero__copy { padding: calc(62.93 * var(--u)) 40px 0; }

  .hero__quote { margin-left: 0; }

  /* One shared width for the three buttons, as wide as the longest label. */
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(220px, max-content);
    gap: 12px;
    margin-left: 0;
  }

  .hero-btn,
  .hero-btn--solid {
    gap: 14px;
    width: auto;
    height: 48px;
    padding: 0 22px;
    border-radius: 5px;
    font-size: 14px;
  }

  .hero-btn .arrow {
    position: static;
    translate: none;
    width: 17px;
    height: 16px;
  }

  /* Shows the right-hand 1290 artboard pixels, where the visual is. */
  .hero__visual {
    --ox: 630;
    --cu: calc(100vw / 1290);
    position: relative;
    inset: auto;
    margin-top: 32px;
  }

  .hero__stage {
    position: relative;
    inset: auto;
    aspect-ratio: 1290 / 714.6;
    overflow: hidden;
  }

  .hero__footnote {
    position: static;
    margin: 12px 40px 0;
    padding-left: 0;
    text-indent: 0;
    text-align: right;
    white-space: normal;
  }

  .hero__footnote br { display: none; }

  .home-panel {
    grid-template-columns: 1fr 1fr;
    height: auto;
    margin: 40px 40px 64px;
  }

  .home-panel__col:nth-child(n) { padding: 28px 26px 32px; }

  .home-panel__col + .home-panel__col::before { display: none; }

  .home-panel__col:nth-child(even) { border-left: 1px solid var(--panel-rule); }

  .home-panel__col:nth-child(n + 3) { border-top: 1px solid var(--panel-rule); }

  .home-panel__name {
    margin-top: 10px;
    line-height: 1.3;
  }

  .home-panel__link { margin-top: 20px; }
}

@media (max-width: 899.98px) {
  .site-header { height: 64px; }

  .site-header__inner {
    align-items: center;
    padding-inline: 20px 10px;
  }

  .site-header__brand {
    width: 50px;
    margin-top: 0;
  }

  .nav,
  .site-header__social { display: none; }

  .header-cta {
    gap: 10px;
    height: 36px;
    margin: 0 0 0 auto;
    padding-inline: 14px 12px;
    border-radius: 4px;
    font-size: 11px;
  }

  .header-cta__label { translate: none; }

  .header-cta .arrow {
    width: 13px;
    height: 11px;
  }

  .menu-toggle {
    display: flex;
    margin-left: 6px;
  }
}

@media (max-width: 699.98px) {
  :root {
    --gutter: 20px;
    --page-top: 40px;
  }

  .hero__copy { padding-inline: 20px; }

  .hero__quote br { display: none; }

  .hero__visual { margin-top: 28px; }

  /* Too small to read inside the visual, so the badge drops below it at a
     fixed size, overlapping the stage. */
  .savings-badge {
    --bu: .62px;
    position: relative;
    top: auto;
    left: auto;
    margin: -72px 20px 0 auto;
  }

  .hero__footnote { margin-inline: 20px; }

  .home-panel {
    grid-template-columns: 1fr;
    margin: 32px 20px 48px;
  }

  .home-panel__col:nth-child(n) { padding: 24px 20px 28px; }

  .home-panel__col:nth-child(even) { border-left: 0; }

  .home-panel__col:nth-child(n + 2) { border-top: 1px solid var(--panel-rule); }
}

/* ---------- breakpoints: mission ----------
   Below 1200px the claim and the copy stack. The claim reflows as one
   sentence; the copy keeps to the right while there is room beside it. */

@media (max-width: 1199.98px) {
  .mission {
    height: auto;
    padding-bottom: 56px;
  }

  .mission__title,
  .mission__body {
    position: relative;
    inset: auto;
  }

  .mission__title {
    margin-top: 16px;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.1;
    white-space: normal;
    text-wrap: balance;
  }

  .mission__line,
  .mission__line + .mission__line {
    display: inline;
    margin-left: 0;
  }

  .mission__body {
    max-width: 34em;
    margin: 36px 0 0 auto;
    font-size: 18px;
    line-height: 1.75;
    white-space: normal;
  }

  /* The closing rule follows the copy, at its right edge. */
  .mission .container::after {
    position: static;
    display: block;
    width: 56px;
    height: 2px;
    margin: 18px 0 0 auto;
  }
}

/* Too narrow to set the copy off to the right. */
@media (max-width: 899.98px) {
  .mission__body {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 699.98px) {
  .mission { padding-bottom: 40px; }

  .mission__body {
    margin-top: 28px;
    font-size: 16px;
  }
}

/* ---------- breakpoints: technology ----------
   Below 1200px the sections stack. Cards, the AI diagram and the charts keep
   their artboard layout at a fixed unit (a local --u); the diagram and the
   charts scroll sideways where they do not fit. */

@media (max-width: 1199.98px) {
  .br-wide { display: none; }

  .tech-modules,
  .tech-ai,
  .tech-cycles {
    height: auto;
    padding-block: 56px;
  }

  /* The page intro brings the space on top, the picture closes the section. */
  .tech-sizes { height: auto; }

  .tech-sizes .container,
  .tech-ai .container {
    display: flex;
    flex-direction: column;
  }

  .tech-modules__intro,
  .tech-ai__intro,
  .tech-cycles__text,
  .spec__sizes-label,
  .spec__size-options,
  .spec-card,
  .module-card,
  .tech-ai__source {
    position: static;
  }

  .tech-eyebrow { font-size: 15px; }

  .tech-sizes__claim,
  .tech-modules__claim,
  .tech-ai__title,
  .tech-ai__source,
  .tech-cycles__title,
  .tech-cycles__body {
    white-space: normal;
  }

  .tech-sizes__claim {
    margin-top: 14px;
    font-size: 21px;
    line-height: 1.45;
  }

  /* Backdrops turn into cropped pictures between the blocks, running out to
     the window edges. */
  .tech-sizes__bg,
  .tech-modules__bg,
  .tech-ai__bg {
    position: static;
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    object-fit: cover;
  }

  .tech-sizes__bg {
    order: 3;
    margin-top: 40px;
    aspect-ratio: 1.6;
    object-position: 88% 50%;
  }

  .spec {
    --u: .8px;
    margin-top: 32px;
  }

  .spec__sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }

  .spec__sizes-label { font-size: 13px; }

  .spec__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
  }

  .spec-card {
    position: relative;
    top: auto;
    left: auto;
  }

  .tech-modules .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px;
  }

  .tech-modules__intro { grid-column: 1 / -1; }

  .tech-modules__claim {
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.5;
  }

  .tech-modules__bg {
    order: 1;
    grid-column: 1 / -1;
    margin-block: 8px;
    aspect-ratio: 1.7;
    object-position: 50% 60%;
  }

  .module-card {
    --u: .8px;
    order: 2;
    width: 100%;
    max-width: calc(416.4 * var(--u));
    height: auto;
    padding-bottom: 24px;
  }

  .module-card--cool { padding-left: calc(37.3 * var(--u)); }

  .tech-ai__title {
    margin-top: 14px;
    font-size: 23px;
    line-height: 1.3;
  }

  .tech-ai__bg {
    order: 1;
    margin-top: 24px;
    aspect-ratio: 16 / 10;
    max-height: 460px;
    object-position: 22% 90%;
  }

  .tech-ai__scroller {
    order: 2;
    margin: 24px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 40px;
    overflow-x: auto;
  }

  .ai-diagram {
    --u: .72px;
    position: relative;
    top: auto;
    left: auto;
  }

  .tech-ai__source {
    order: 3;
    font-size: 13px;
    line-height: 1.5;
  }

  .tech-ai .container::after,
  .tech-cycles .container::before,
  .tech-cycles .container::after { content: none; }

  .tech-cycles .tech-eyebrow { font-size: 14px; }

  .tech-cycles__title {
    margin-top: 14px;
    font-size: 25px;
    line-height: 1.25;
  }

  .tech-cycles__heading,
  .tech-cycles__heading--cool {
    margin: 32px 0 0;
    font-size: 18px;
  }

  .tech-cycles__body,
  .tech-cycles__body--cool {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .combined-effect {
    --u: min(.8px, (100vw - 2 * var(--gutter)) / 625);
    margin: 32px 0 0;
  }

  .tech-cycles__charts {
    display: grid;
    gap: 24px;
    margin-top: 40px;
  }

  .cycle-chart-scroller {
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
  }

  .cycle-chart {
    --u: max(.8px, min(1px, (100vw - 2 * var(--gutter)) / 849));
    position: relative;
    top: auto;
    left: auto;
  }
}

@media (max-width: 699.98px) {
  .tech-modules,
  .tech-ai,
  .tech-cycles { padding-block: 40px; }

  .tech-sizes__bg { margin-top: 32px; }

  .tech-sizes__claim { font-size: 18px; }

  .tech-modules__claim { font-size: 17px; }

  .tech-ai__title,
  .tech-cycles__title { font-size: 21px; }
}

/* ---------- breakpoints: added value ----------
   Below 1200px both sections stack. The benefit cards keep their artboard
   layout at a fixed unit, so they wrap as whole tiles; the two photos turn
   into bands that bleed to the window edges. */

@media (max-width: 1199.98px) {
  .av-benefits,
  .av-applies { height: auto; }

  .av-benefits { padding-bottom: 56px; }

  .av-applies { padding-block: 56px; }

  /* Everything the artboard pinned to a coordinate returns to the flow.
     They stay relative so the rules and marks attached to them still line up
     against their own box. */
  .av-benefits__photo,
  .av-grid,
  .av-benefits__note,
  .av-applies__photo,
  .av-applies__intro,
  .av-applies__heading,
  .av-who,
  .av-types,
  .av-applies__note {
    position: relative;
    inset: auto;
  }

  .av-benefits__photo {
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    height: auto;
    margin: 28px calc(-1 * var(--gutter)) 0;
    aspect-ratio: 2.2;
    border-radius: 0;
    object-position: 58% 50%;
  }

  .av-grid {
    /* A card is 415 artboard px wide, so it has to shrink below ~500px. */
    --u: min(.8px, (100vw - 2 * var(--gutter)) / 415);
    margin-top: 28px;
    grid-template-columns: repeat(auto-fit, calc(415 * var(--u)));
    justify-content: center;
  }

  .av-benefits__note {
    width: auto;
    height: auto;
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .av-applies__photo {
    width: calc(100% + 2 * var(--gutter));
    height: auto;
    margin: 0 calc(-1 * var(--gutter)) 30px;
    aspect-ratio: 2.6;
  }

  .av-applies__photo img {
    border-radius: 0;
    object-fit: cover;
  }

  .av-applies__photo::after { width: 8px; }

  /* The two hairlines become plain blocks between the parts they separate. */
  .av-applies__intro::after,
  .av-applies__heading--types::before {
    position: static;
    display: block;
    width: auto;
  }

  .av-applies__intro::after { margin-top: 18px; }

  .av-applies__eyebrow { font-size: 18px; }

  .av-applies__title {
    margin-top: 8px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: .06em;
    white-space: normal;
  }

  .av-applies__heading { font-size: 19px; }

  .av-applies__heading--who { margin: 28px 0 18px; }

  .av-applies__heading--types { margin-bottom: 18px; }

  .av-applies__heading--types::before { margin: 32px 0 28px; }

  .av-who,
  .av-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 24px;
  }

  .av-who__item,
  .av-who__item:nth-child(6),
  .av-types__item {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 0;
  }

  .av-who__item img {
    position: static;
    height: 24px;
  }

  .av-who__item span,
  .av-types__label {
    margin-top: 0;
    font-size: 15px;
    white-space: normal;
  }

  .av-types__mark {
    position: static;
    flex: none;
    width: 30px;
    height: 30px;
  }

  .av-types__mark img { height: 16px; }

  .av-applies__note {
    margin-top: 26px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 699.98px) {
  .av-benefits { padding-bottom: 40px; }

  .av-applies { padding-block: 40px; }

  .av-benefits__photo { aspect-ratio: 1.7; }

  .av-applies__photo { aspect-ratio: 2; }
}

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

  .av-card { width: 100%; }
}

/* ---------- breakpoints: references ----------
   Below 1200px the two projects stop being an artboard and stack: photo
   beside the copy while there is room, above it on a phone. */

@media (max-width: 1199.98px) {
  .ref-projects {
    height: auto;
    padding-bottom: 56px;
  }

  .ref-range,
  .ref-range__year,
  .ref-range__rail,
  .ref-card,
  .ref-card__photo,
  .ref-card__place,
  .ref-card__system,
  .ref-card__tagline,
  .ref-card__body,
  .ref-card__source,
  .ref-card__name,
  .ref-card__role {
    position: relative;
    inset: auto;
  }

  .ref-projects__title {
    margin: 10px 0 0;
    font-size: clamp(26px, 4.4vw, 44px);
    letter-spacing: .04em;
    white-space: normal;
  }

  .ref-range {
    display: flex;
    align-items: center;
    gap: 16px;
    height: auto;
    margin-top: 20px;
  }

  .ref-range__year { font-size: 22px; }

  .ref-range__rail {
    flex: 0 1 120px;
    margin-inline: 4px;
  }

  .ref-range__rail::before,
  .ref-range__rail::after {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  .ref-range__rail::before { left: -1px; }

  .ref-range__rail::after { right: -1px; }

  .ref-card {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 34px;
    width: auto;
    height: auto;
    margin-top: 44px;
  }

  /* The photo runs the height of the copy beside it, cropping as it goes. */
  .ref-card__photo {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 10px;
  }

  .ref-card__place { font-size: 13px; }

  .ref-card__system {
    margin-top: 14px;
    gap: 8px;
  }

  .ref-card__mark {
    width: 27px;
    height: 27px;
  }

  .ref-card__system span { font-size: 14px; }

  .ref-card__tagline {
    margin-top: 14px;
    font-size: 13px;
    white-space: normal;
  }

  .ref-card__body {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.55;
  }

  .ref-card__source {
    margin-top: 14px;
    font-size: 12px;
  }

  .ref-card__name {
    margin-top: 22px;
    font-size: 14px;
  }

  .ref-card__role {
    margin-top: 6px;
    font-size: 14px;
  }

  /* The hairline closes the card, across both columns. */
  .ref-card::after {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    margin-top: 10px;
  }
}

@media (max-width: 699.98px) {
  .ref-projects { padding-bottom: 40px; }

  .ref-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 36px;
  }

  .ref-card__photo {
    aspect-ratio: 1.1;
    height: auto;
  }
}

/* ---------- breakpoints: q&a ----------
   Below 1200px the question card sits on top of its answer instead of beside
   it, and the answers reflow instead of keeping the artboard's line breaks. */

@media (max-width: 1199.98px) {
  .qa {
    height: auto;
    padding-bottom: 56px;
  }

  .qa-list {
    position: relative;
    inset: auto;
    gap: 18px;
    margin-top: 26px;
  }

  /* The two cards stay one block, rounded at the outside only. */
  .qa-row,
  .qa-row:nth-child(2) {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    margin-bottom: 0;
  }

  .qa-question {
    border-radius: 12px 12px 0 0;
    padding: 22px 24px 24px 44px;
  }

  .qa-question::before {
    top: 24px;
    bottom: 24px;
    left: 22px;
    height: auto;
    width: 3px;
    translate: none;
  }

  .qa-question__number,
  .qa-question__text,
  .qa-question__label,
  .qa-formula {
    position: static;
    display: block;
  }

  .qa-question__number { font-size: 12px; }

  .qa-question__text {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.3;
  }

  .qa-question__label {
    margin-top: 18px;
    font-size: 9px;
  }

  .qa-formula {
    margin-top: 10px;
    font-size: 15px;
  }

  .qa-answer {
    border-radius: 0 0 12px 12px;
    padding: 22px 24px 26px;
    font-size: 15px;
    line-height: 1.6;
  }

  .qa-answer p + p,
  .qa-row:nth-child(1) .qa-answer p:last-child { margin-top: .8em; }

  .qa .container::after {
    position: static;
    display: block;
    margin-top: 34px;
  }
}

@media (max-width: 699.98px) {
  .qa { padding-bottom: 40px; }

  .qa-question { padding: 20px 20px 22px 38px; }

  .qa-question::before { left: 18px; }

  .qa-question__text { font-size: 17px; }

  .qa-formula { font-size: 13px; }

  .qa-answer {
    padding: 20px 20px 24px;
    font-size: 14px;
  }
}

/* ---------- breakpoints: contact ----------
   Below 1200px the page leaves the artboard. The two panels stay side by
   side, in the artboard's proportions, down to 900px and stack below that.
   The form sets its fields on a grid, two columns and one on phones; the
   fields use 16px type, so phones do not zoom in on focus. */

@media (max-width: 1199.98px) {
  .contact {
    height: auto;
    padding-bottom: 56px;
  }

  .contact .container {
    display: grid;
    grid-template-columns: minmax(0, 615fr) minmax(0, 1095fr);
    gap: 28px 24px;
  }

  .contact .page-intro,
  .contact .container::after { grid-column: 1 / -1; }

  /* The closing hairline follows the panels. */
  .contact .container::after {
    position: static;
    margin-top: 12px;
  }

  .contact-intro,
  .contact-form,
  .contact-form__legend,
  .contact-form__alert,
  .contact-field,
  .contact-form__rule,
  .contact-consent,
  .contact-submit,
  .contact-form__note {
    position: relative;
    inset: auto;
  }

  .contact-intro,
  .contact-form {
    width: auto;
    height: auto;
    border-radius: 12px;
  }

  .contact-intro {
    padding: 40px 32px;
    box-shadow: 5px 8px 0 rgba(38, 54, 74, .1);
  }

  /* One sentence, wrapped where the panel needs it. */
  .contact-intro__title {
    position: static;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    text-wrap: balance;
  }

  .contact-intro__title br { display: none; }

  /* The orange rule follows the claim. */
  .contact-intro::after {
    position: static;
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 28px;
  }

  .contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 22px 20px;
    padding: 32px;
    box-shadow:
      inset 0 0 0 1px #ded8ce,
      5px 8px 0 rgba(38, 54, 74, .08);
  }

  .contact-form__legend,
  .contact-form__alert,
  .contact-field--message,
  .contact-form__rule,
  .contact-consent,
  .contact-form__actions { grid-column: 1 / -1; }

  .contact-form__legend {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .contact-form__alert {
    width: auto;
    margin: -8px 0 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .contact-field { width: auto; }

  .contact-field__error {
    top: 0;
    font-size: 11px;
  }

  .contact-field label { font-size: 12px; }

  .contact-field input,
  .contact-field textarea {
    margin-top: 8px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 16px;
  }

  .contact-field input {
    height: 48px;
    padding: 0 14px;
  }

  .contact-field textarea {
    height: 132px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
  }

  .contact-form__rule {
    width: auto;
    margin-block: 4px;
  }

  /* The padding makes the whole line a 24px tall target. */
  .contact-consent {
    gap: 12px;
    padding-block: 2px;
  }

  .contact-consent input {
    width: 20px;
    height: 20px;
    border-width: 1.5px;
    border-radius: 3px;
  }

  .contact-consent input:checked::after { border-width: 0 2px 2px 0; }

  .contact-consent span {
    margin-top: 1px;
    font-size: 14px;
    line-height: 1.35;
  }

  .contact-consent__error {
    top: 25px;
    left: 32px;
    font-size: 11px;
  }

  /* The note sits beside the button while there is room, under it after. */
  .contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 6px;
  }

  .contact-submit {
    gap: 32px;
    width: auto;
    height: 48px;
    padding: 1px 26px 0 28px;
    border-radius: 24px;
    font-size: 13px;
  }

  .contact-submit .arrow {
    width: 15px;
    height: 12px;
  }

  .contact-form__note { font-size: 13px; }
}

@media (max-width: 899.98px) {
  .contact .container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .contact-intro {
    margin-top: 8px;
    padding-block: 36px;
  }

  .contact-intro__title { font-size: clamp(24px, 5vw, 34px); }
}

@media (max-width: 699.98px) {
  .contact { padding-bottom: 40px; }

  .contact-intro { padding: 30px 24px; }

  .contact-intro::after { margin-top: 22px; }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px 20px 28px;
  }
}