/* tokens.css */
/* Design tokens + self-hosted fonts.
   Values extracted from "Heavenly Outdoor.fig" (1920px design canvas). */

@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://heavenlyoutdoor.com/wp-content/themes/heavenly-outdoor-theme/css/../assets/fonts/fahkwang-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://heavenlyoutdoor.com/wp-content/themes/heavenly-outdoor-theme/css/../assets/fonts/fahkwang-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://heavenlyoutdoor.com/wp-content/themes/heavenly-outdoor-theme/css/../assets/fonts/fahkwang-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://heavenlyoutdoor.com/wp-content/themes/heavenly-outdoor-theme/css/../assets/fonts/fahkwang-700.woff2") format("woff2");
}
/* Google Sans Flex is a variable font; one file covers 400 and 500. */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("https://heavenlyoutdoor.com/wp-content/themes/heavenly-outdoor-theme/css/../assets/fonts/google-sans-flex-latin.woff2") format("woff2");
}

:root {
  /* Colour */
  --navy: #0c141d;
  --teal: #1f8ead;
  --teal-50: #eff9fb;
  --teal-200: #c2d8de;
  --surface: #f2f6f7;
  --border: #e7e6e3;
  --border-cool: #edf3fa;
  --text: #0c141d;
  --text-muted: #4d5266;
  --text-on-dark-muted: #9ca3af;
  --white: #ffffff;
  --star: #ff9c11;

  /* Typography */
  --font-display: "Fahkwang", Georgia, "Times New Roman", serif;
  --font-body: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-h1: clamp(2rem, 1.2rem + 3.4vw, 4rem);        /* 64 */
  --fs-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);      /* 40 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 24 */
  --fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);    /* 18 (was 20) */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);    /* 18 */

  /* Layout */
  --container-max: 1524px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --container-w: min(100vw - 2 * var(--gutter), var(--container-max));
  --section-space: clamp(72px, 19.5vw, 150px);     /* 150 from 768px up: gap between sections */
  --space-heading: clamp(32px, 3.125vw, 60px);        /* 60: heading -> content */
  --space-dark: clamp(56px, 6.25vw, 120px);           /* 120: padding inside dark sections */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 200ms;
  --t-med: 400ms;
}

/* Desktop (1441px+): body text is 18px / 26px line height. Rules use var(--lh-body, <old value>) so tablet and phone keep their own line heights. */
@media (min-width: 1441px) {
  :root { --lh-body: 26px; }
}

/* base.css */
/* Reset, typography, layout primitives */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 128px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body, 1.4);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.nav-open,
html.nav-open body { overflow: hidden; }

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Fahkwang is set in capitals throughout the design. */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); line-height: 1.125; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.42; font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.cta-banner :focus-visible { outline-color: var(--white); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

.section { padding-top: var(--section-space); }
.section--dark { background: var(--navy); color: var(--white); }

.section-heading {
  display: grid;
  gap: 20px;
  max-width: 999px;
  margin-inline: auto;
  text-align: center;
}
.section-heading p { font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.33;
  text-transform: uppercase;
}
.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--white);
}
.eyebrow--rule::before {
  content: "";
  width: 48px;
  height: 4px;
  background: var(--white);
  flex: none;
}

/* Scroll reveal (progressively enhanced: content is visible without JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* components.css */
/* Shared components: buttons, header, carousel, cards, accordion, CTA banner, footer */

/* ---------- Icons ---------- */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 15px 31px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn .icon { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.btn:hover .icon--arrow,
.btn:focus-visible .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover { background: #197590; }

.btn--white { background: var(--white); color: var(--teal); border-color: var(--border-cool); }
.btn--white:hover { background: var(--teal-50); border-color: var(--teal); }
.btn--white .icon--phone { width: 20px; height: 20px; }

.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: #1b2a3a; }

.btn--sm { min-height: 42px; padding: 12px 20px; font-size: 0.875rem; line-height: 18px; letter-spacing: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Button hover animation (js/btn-fx.js adds .has-fx + the layers) ----------
   A block led by two skewed squares wipes across the button (pattern from helloaria.eu),
   the label recolours mid-wipe and the arrow swaps. --fx is the wipe colour, --fx-text
   the label colour on hover. The button's own background never changes. */
.btn.has-fx {
  --fx-sq: 52px;            /* square size = button height */
  --fx-gap: 6px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 250ms var(--ease) 0ms, border-color 250ms var(--ease) 0ms;
}
.btn--sm.has-fx { --fx-sq: 42px; }
.btn--primary.has-fx { --fx: var(--navy); --fx-text: var(--white); }
.btn--white.has-fx   { --fx: var(--teal); --fx-text: var(--white); }
.btn--dark.has-fx    { --fx: var(--teal); --fx-text: var(--white); }
/* On dark sections a navy wipe would vanish into the background, so teal buttons wipe to white */
:is(.hero, .page-hero, .section--dark) .btn--primary.has-fx { --fx: var(--white); --fx-text: var(--navy); }

/* Keep the base colour on hover: the wipe provides the new colour */
.btn--primary.has-fx:hover { background: var(--teal); }
.btn--white.has-fx:hover   { background: var(--white); }
.btn--dark.has-fx:hover    { background: var(--navy); }

.btn__fx {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(100% + 2px);
  z-index: -1;
  pointer-events: none;
  transform: translateX(calc(-100% - 2 * var(--fx-sq) - 3 * var(--fx-gap)));
  transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
}
.btn__fx > span { position: absolute; top: 0; bottom: 0; background: var(--fx); }
.btn__fx-block { left: 0; width: 100%; }
.btn__fx-sq { width: var(--fx-sq); }
.btn__fx-sq--1 { left: calc(100% + var(--fx-gap)); clip-path: polygon(15% 11%, 100% 0, 82% 90%, 0 100%); }
.btn__fx-sq--2 { left: calc(100% + var(--fx-sq) + 2 * var(--fx-gap)); clip-path: polygon(15% 14%, 100% 0, 81% 85%, 0 100%); }

.btn.has-fx:is(:hover, :focus-visible) { color: var(--fx-text); border-color: var(--fx); transition-delay: 180ms, 180ms; }
.btn.has-fx:is(:hover, :focus-visible) .btn__fx { transform: translateX(0); transition-duration: 650ms; }

/* Arrow: the original slides out to the right, its copy slides in from the left */
.btn__arrow { position: relative; display: inline-flex; overflow: hidden; }
.btn.has-fx .btn__arrow .icon { transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms var(--ease); }
.btn.has-fx .btn__arrow-in { position: absolute; inset: 0; transform: translateX(-150%); opacity: 0; }
.btn.has-fx:is(:hover, :focus-visible) .btn__arrow .icon { transform: translateX(150%); opacity: 0; transition-delay: 120ms; }
.btn.has-fx:is(:hover, :focus-visible) .btn__arrow .btn__arrow-in { transform: none; opacity: 1; transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .btn__fx { transform: none; opacity: 0; transition: opacity 200ms linear; }
  .btn.has-fx:is(:hover, :focus-visible) .btn__fx { opacity: 1; }
  .btn.has-fx .btn__arrow-in { display: none; }
  .btn.has-fx:is(:hover, :focus-visible) .btn__arrow .icon { transform: none; opacity: 1; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--teal);
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
a.link-arrow:hover .icon { transform: translateX(4px); }
a.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: clamp(12px, 2vw, 32px) 0 auto;
  z-index: 50;
}
.site-header__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 19px 24px;
}
/* Glass pill is a pseudo-element so backdrop-filter does not create a
   containing block for the fixed mobile menu. */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--white);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.8));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.site-header.is-stuck .site-header__bar::before {
  box-shadow: 0 10px 32px rgba(12, 20, 29, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
}

.logo { display: block; flex: none; }
.logo img { width: 230px; height: auto; }

.site-nav__list { display: flex; align-items: center; gap: 24px; }
.site-nav__item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}
.nav-link .icon { width: 16px; height: 16px; stroke-width: 2; }
a.nav-link:hover { color: var(--teal); }
/* Current page: bold text only (no underline marker) */
.nav-link[aria-current="page"] { font-weight: 600; }
.is-pending { cursor: default; }

.site-header__actions { display: flex; align-items: center; gap: 24px; flex: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.header-phone .icon { width: 20px; height: 20px; }
.header-phone:hover { color: var(--teal); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-sm);
  background: var(--white);
  align-items: center;
  justify-content: center;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav__mobile-extras { display: none; }

/* ---------- Services mega menu ("Header - Services Menu - Open") ---------- */
.mega-toggle { border: 0; background: none; padding-inline: 0; }
.mega-toggle .icon { transition: transform var(--t-fast) var(--ease); }
.mega-toggle:hover { color: var(--teal); }
.mega-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

@media (min-width: 1360px) {
  /* Panel is positioned against the header bar, not the nav item. */
  .site-nav__item.has-mega { position: static; }
  .mega {
    position: absolute;
    top: calc(100% - 12px);
    left: clamp(24px, 50% - 421px, 100% - 972px);
    z-index: 5;
    width: min(948px, 100% - 48px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.985);
    transform-origin: 30% 0;
    transition: opacity 260ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
  }
  /* Hover bridge across the gap between the link and the panel */
  .mega::before { content: ""; position: absolute; inset: -20px 0 100%; }
  .has-mega.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .mega__panel {
    display: flex;
    gap: 32px;
    padding: 32px;
    border: 1px solid var(--white);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 5px 20px rgba(0, 0, 0, 0.05), 0 24px 48px -24px rgba(12, 20, 29, 0.28);
  }
  .mega__list { display: grid; align-content: start; gap: 16px; }
  .mega__list:first-child { flex: 0 1 259px; }
  .mega__list:nth-child(2) { flex: 0 1 300px; }
  .mega__list > li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  }
  .has-mega.is-open .mega__list > li {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  .mega__list > li:nth-child(2) { --i: 1; }
  .mega__list > li:nth-child(3) { --i: 2; }
  .mega__list > li:nth-child(4) { --i: 3; }
  .mega__list > li:nth-child(5) { --i: 4; }
  .mega__list:nth-child(2) > li { --i: 1; }
  .mega__list:nth-child(2) > li:nth-child(2) { --i: 2; }
  .mega__list:nth-child(2) > li:nth-child(3) { --i: 3; }
  .mega__list:nth-child(2) > li:nth-child(4) { --i: 4; }

  .mega__link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: var(--navy);
    transition: color var(--t-fast) var(--ease);
  }
  .mega__link span {
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0 1px no-repeat;
    transition: background-size 320ms var(--ease);
  }
  .mega__link .icon {
    width: 0;
    height: 16px;
    margin-right: 0;
    opacity: 0;
    stroke-width: 2;
    transform: translateX(-6px);
    transition: width 260ms var(--ease), margin-right 260ms var(--ease), opacity 200ms var(--ease), transform 260ms var(--ease);
  }
  .mega__link.is-active { color: var(--teal); font-weight: 600; }
  .mega__link.is-active span { background-size: 100% 1px; }
  .mega__link.is-active .icon { width: 16px; margin-right: 8px; opacity: 1; transform: none; }

  /* Image stack: the active image wipes in over the previous one while settling from a zoom. */
  .mega__media {
    position: relative;
    flex: 0 0 276px;
    align-self: start;
    aspect-ratio: 3 / 2;
    margin-left: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .mega__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.22);
    filter: brightness(1.15) saturate(0.85);
  }
  .mega__media[data-dir="up"] .mega__img:not(.is-active):not(.is-prev) { clip-path: inset(0 0 100% 0); }
  .mega__media .mega__img.is-prev { z-index: 1; clip-path: inset(0); transform: scale(1); filter: none; }
  .mega__media .mega__img.is-active {
    z-index: 2;
    clip-path: inset(0);
    transform: scale(1);
    filter: none;
    transition: clip-path 720ms cubic-bezier(0.76, 0, 0.24, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms var(--ease);
  }
  /* Teal light-sweep that rides the wipe edge */
  .mega__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0 40%, rgba(31, 142, 173, 0.45) 50%, transparent 60% 100%) 0 0 / 100% 250% no-repeat;
    background-position: 0 100%;
    opacity: 0;
  }
  .mega__media.is-sweeping::after { animation: mega-sweep 720ms cubic-bezier(0.76, 0, 0.24, 1); }
  .mega__media[data-dir="up"].is-sweeping::after { animation-name: mega-sweep-up; }
}
/* Area we serve ("Header - Area We Serve Menu - Open"): same panel, four fixed-width
   columns, 60px apart, no image. Fixed widths keep columns still when the hovered
   link grows by its arrow (it runs into the gap, as in the design). */
@media (min-width: 1360px) {
  .mega--areas {
    left: clamp(24px, 50% - 94px, 100% - 910px);
    width: auto;
  }
  .mega--areas .mega__list,
  .mega--areas .mega__list:first-child { flex: 0 0 auto; width: 160px; }
  .mega--areas .mega__link { white-space: nowrap; }
  /* columns of 5 links: a new .mega__list starts after every fifth area */
  .mega--areas .mega__panel { gap: 60px; }
}

@keyframes mega-sweep {
  0% { opacity: 1; background-position: 0 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 0 100%; }
}
@keyframes mega-sweep-up {
  0% { opacity: 1; background-position: 0 100%; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}

@media (max-width: 1599px) {
  .header-phone { display: none; }
  .site-nav__list { gap: 16px; }
  .site-header__bar { gap: 20px; }
}

@media (max-width: 1359px) {
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: 96px var(--gutter) 40px;
    overflow-y: auto;
    background: var(--navy);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .nav-link {
    width: 100%;
    padding-block: 20px;
    font-size: 1.125rem;
    color: var(--white);
  }
  a.nav-link:hover { color: var(--teal-200); }
  .site-nav__mobile-extras { display: grid; gap: 16px; margin-top: 32px; }
  .site-nav__mobile-extras .btn { width: 100%; }
  /* keep toggle above the open menu */
  .site-header__bar { z-index: 70; }
  .site-nav { z-index: 65; }
  .site-header__actions { position: relative; z-index: 70; }
  html.nav-open .nav-toggle { background: var(--white); }

  /* Services becomes an accordion inside the drawer; no images on small screens. */
  .mega-toggle { justify-content: space-between; color: var(--white); text-align: left; }
  .mega-toggle .icon { width: 20px; height: 20px; }
  .mega-toggle:hover,
  .mega-toggle[aria-expanded="true"] { color: var(--teal-200); }
  .mega {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .has-mega.is-open .mega { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .mega__panel { min-height: 0; overflow: hidden; }
  .mega__list { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
  .mega__list:first-child { margin-top: 4px; }
  .mega__list:nth-child(2) { margin-top: 4px; margin-bottom: 20px; }
  .mega__link {
    display: block;
    padding-block: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.85);
  }
  .mega__link:hover { color: var(--teal-200); }
  .mega__link .icon,
  .mega__media { display: none; }
  /* 5 areas: one column in the drawer */
  .mega--areas .mega__list:nth-child(n) { margin: 4px 0 20px; }
}

@media (max-width: 480px) {
  .site-header__bar { padding: 14px 16px; min-height: 68px; }
  .logo img { width: 184px; height: auto; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;   /* one-fold hero: fills the first screen on every device */
  min-height: 100svh;
  padding: 150px 0 clamp(48px, 5.2vw, 100px);
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.hero__media,
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.hero__title { display: grid; gap: 16px; max-width: 750px; }
.hero__aside { display: grid; gap: 32px; max-width: 621px; flex: 0 1 621px; }
.hero__aside p { font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.hero [data-hero-step] { animation: rise 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }

@media (max-width: 899px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__aside { flex-basis: auto; }
}

/* ---------- Carousel (native scroll-snap) ---------- */
.carousel__track {
  --edge: max(var(--gutter), (100% - var(--container-max)) / 2);
  display: flex;
  gap: 24px;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: none; scroll-snap-align: start; }
.carousel__track:focus-visible { outline-offset: -3px; }
/* Every carousel: touch scrolls natively, a mouse can drag the track (js/carousel.js) */
@media (hover: hover) and (pointer: fine) {
  .carousel__track { cursor: grab; -webkit-user-select: none; user-select: none; }
  .carousel__track.is-dragging { cursor: grabbing; }
}
.carousel__track img { -webkit-user-drag: none; }

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 621px);
}
.carousel__progress {
  flex: 1;
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.carousel__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(var(--progress, 1));
  transition: transform var(--t-med) var(--ease);
}
.carousel__buttons { display: flex; gap: 16px; }
.carousel__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
/* 32px visual, 44px touch target */
.carousel__btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.carousel__btn .icon { width: 14px; height: 14px; stroke-width: 2; }
.carousel__btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.carousel__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.on-dark .carousel__progress { background: rgba(255, 255, 255, 0.2); }
.on-dark .carousel__progress-bar { background: var(--white); }
.on-dark .carousel__btn { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); color: var(--white); }
.on-dark .carousel__btn:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--navy); }
/* ---------- Media card (image + title + copy) ---------- */
.media {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 526 / 320;
  background: var(--surface);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card:hover .media img,
.card:focus-within .media img { transform: scale(1.05); }

.card { display: grid; gap: 32px; align-content: start; }
/* Whole service card is one link (title link stretched over the card) */
.card:has(.card__link) { position: relative; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--teal); outline-offset: 6px; border-radius: var(--radius-md); }
.card__body { display: grid; gap: 16px; }
.card__title { font-size: var(--fs-h3); }
.card__text { font-size: var(--fs-body); line-height: var(--lh-body, 1.55); }

/* ---------- Review card ---------- */
.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 33px 25px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.review__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.review__stars { display: flex; gap: 2px; color: var(--star); }
.review__stars .icon { width: 20px; height: 20px; }
.review__source { width: 72px; height: 24px; }
.review__text { font-size: var(--fs-body); line-height: var(--lh-body, 1.55); color: var(--text-muted); }
.review__author { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.review__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; text-transform: uppercase; }

/* ---------- Project card (overlay variant) ---------- */
.project { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); }
.project .media { aspect-ratio: 720 / 435; border-radius: 0; }
.project__panel {
  position: absolute;
  left: clamp(12px, 1.7vw, 32px);
  right: clamp(12px, 1.7vw, 32px);
  bottom: clamp(12px, 1.25vw, 24px);
  display: grid;
  gap: 24px;
  padding: clamp(16px, 1.25vw, 24px);
  border-radius: var(--radius-sm);
  isolation: isolate;
  background: rgba(12, 20, 29, 0.7);   /* Figma: #0C141D @ 70% + progressive background blur 0 -> 20 (top to bottom) */
  color: var(--white);
}
/* Progressive blur: 4 stacked backdrop layers, each ramping in over a band of the panel (~0px at top, ~20px at bottom) */
.project__blur { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.project__blur i { position: absolute; inset: 0; }
.project__blur i:nth-child(1) { -webkit-backdrop-filter: blur(8px);    backdrop-filter: blur(8px);    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);   mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); }
.project__blur i:nth-child(2) { -webkit-backdrop-filter: blur(9px);    backdrop-filter: blur(9px);    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%);  mask-image: linear-gradient(to bottom, transparent 40%, #000 60%); }
.project__blur i:nth-child(3) { -webkit-backdrop-filter: blur(10.5px); backdrop-filter: blur(10.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 80%);  mask-image: linear-gradient(to bottom, transparent 60%, #000 80%); }
.project__blur i:nth-child(4) { -webkit-backdrop-filter: blur(12px);   backdrop-filter: blur(12px);   -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); }
.project__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-body, 24px); }
.project__meta-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.2); }
.project__name {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  margin-top: 12px;
}
.project__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.project__place { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.project__place .icon { width: 24px; height: 24px; }
.project .link-arrow { color: var(--white); text-decoration: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.project .link-arrow::after { content: ""; position: absolute; inset: 0; }   /* whole card is the hit area */
.project:has(a.link-arrow) { cursor: pointer; }
.project a.link-arrow:focus-visible { outline: none; }
.project:has(a.link-arrow:focus-visible) { outline: 3px solid var(--teal); outline-offset: 4px; }
/* "view more details" fades in while the card is hovered/focused, its .u-line underline growing in.
   Touch screens have no hover, so there it always shows. */
.project:is(:hover, :focus-within) .link-arrow .u-line { transition-delay: 100ms; }
@media (hover: hover) {
  .project .link-arrow { opacity: 0; transform: translateX(-6px); }
  .project:is(:hover, :focus-within) .link-arrow { opacity: 1; transform: none; }
}

/* Hover gallery (js/project-hover-gallery.js): instead of zooming, the project's other photos
   cross-fade over the cover, with thin progress bars along the top. */
.project .media { position: relative; }
.project .media__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease); }
.project .media__frame.is-on { opacity: 1; }
.project .media__bars {
  position: absolute;
  top: clamp(12px, 1.25vw, 20px);
  left: clamp(12px, 1.7vw, 32px);
  right: clamp(12px, 1.7vw, 32px);
  z-index: 1;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.project.is-cycling .media__bars { opacity: 1; }
.project .media__bars i { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.35); }
.project .media__bars i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.project .media__bars i.is-done::after { transform: scaleX(1); }
.project .media__bars i.is-run::after { animation: project-bar var(--hover-step, 800ms) linear forwards; }
@keyframes project-bar { to { transform: scaleX(1); } }

/* Phones: the panel sits under the photo instead of over it */
@media (max-width: 639px) {
  .project { display: flex; flex-direction: column; }
  .project__panel { position: static; border-radius: 0; background: var(--navy); }
  .project__blur { display: none; }
}

/* ---------- Accordion ---------- */
.accordion { max-width: 1008px; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item:first-child .accordion__trigger { padding-top: 0; }
.accordion__heading { margin: 0; font: inherit; text-transform: none; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.33;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.accordion__trigger:hover { color: var(--teal); }
.accordion__icon { position: relative; width: 24px; height: 24px; flex: none; }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.accordion__icon::before { transform: translate(-50%, -50%); }
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel-inner { overflow: hidden; min-height: 0; }
.accordion__content { padding: 0 64px 24px 0; font-size: var(--fs-body); line-height: var(--lh-body, 1.55); color: var(--text-muted); }
.accordion__content[data-placeholder] { font-style: italic; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 24.9vw, 380px);
  padding: clamp(32px, 3.75vw, 72px) clamp(24px, 4.17vw, 80px);
  border-radius: var(--radius-lg);   /* 16px */
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.cta-banner__media,
.cta-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.cta-banner__inner { position: relative; display: grid; gap: 40px; justify-items: start; max-width: 797px; }
.cta-banner .btn--white { border-color: var(--white); }
.cta-banner .btn--white:hover { background: var(--teal-50); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: calc(-1 * clamp(110px, 8.65vw, 166px));
  padding-top: calc(clamp(110px, 8.65vw, 166px) + clamp(48px, 5.2vw, 100px));
  background: var(--navy);
  color: var(--white);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 48px);
}
.footer__brand { display: grid; gap: 24px; align-content: start; }
.footer__brand .logo img { width: min(100%, 315px); }
.footer__contact { display: grid; gap: 16px; font-weight: 500; font-size: 1rem; line-height: 20px; color: var(--text-on-dark-muted); }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
/* Filled teal icons (location / call / mail) from the design, 20px box */
.footer__contact .icon { width: 20px; height: 20px; color: var(--teal); }
.footer__contact span { line-height: 24px; margin-top: -2px; } /* two-line address: 48px tall, first line aligned with the icon */
.footer__contact a { overflow-wrap: anywhere; }
/* Social links: 28px white discs, 16px apart, 32px below the contact rows */
.footer__social { display: flex; gap: 16px; margin-top: 8px; }
.footer__social a { display: block; border-radius: 50%; color: var(--white); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.footer__social .icon { width: 28px; height: 28px; }
.footer__social a:hover { color: var(--teal); transform: translateY(-2px); }
.footer__contact a:hover { color: var(--white); }
.footer__col h2 {
  font-size: 1rem;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 32px;
}
.footer__links { display: grid; gap: 12px; color: var(--text-on-dark-muted); font-size: 1rem; line-height: 26px; }
.footer__links a { transition: color var(--t-fast); }
.footer__links a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 4vw, 80px);
  padding-block: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 26px;
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }
.footer__legal li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  margin-right: 12px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__col h2 { margin-bottom: 16px; }
}

/* ---------- Reviews section (home + about) ---------- */
.reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: var(--space-heading);
}
.reviews__head .carousel__controls { flex: 0 1 621px; }
.reviews .carousel__track { align-items: stretch; }
.reviews .carousel__track > * { width: calc((var(--container-w) - 48px) / 3); }
@media (max-width: 1099px) {
  .reviews .carousel__track > * { width: clamp(290px, 62vw, 492px); }
  .reviews__head { flex-direction: column; align-items: stretch; }
  .reviews__head .carousel__controls { flex-basis: auto; width: 100%; }
}
@media (max-width: 639px) {
  .reviews .carousel__track > * { width: min(86vw, 420px); }
}

/* ---------- Award badge (home trust + about journey) ---------- */
.badge {
  --badge: clamp(104px, 8.4vw, 160px);
  position: absolute;
  left: 0;
  top: calc(var(--badge) * 0.308);   /* Figma: box top 49px of 160 below the image top */
  width: var(--badge);
  transform: translateX(-55.4%) rotate(15deg);   /* Figma: tilted +15deg, centre 9px outside the image's left edge */
  filter: drop-shadow(0 6px 16px rgba(12, 20, 29, 0.18));
}

/* Phones: keep the tilted badge fully inside the viewport (image sits ~44px from the screen edge) */
@media (max-width: 639px) {
  .trust__media .badge { --badge: 92px; transform: translateX(-45%) rotate(15deg); }
}

/* Size slides from the carousel's own width (excludes the scrollbar, unlike 100vw). */
[data-carousel] {
  container-type: inline-size;
  --container-w: min(100cqw - 2 * var(--gutter), var(--container-max));
}


/* Buttons stay on one line when there is room, and wrap instead of overflowing on very narrow screens */
@media (min-width: 480px) { .btn { white-space: nowrap; } }
@media (max-width: 479px) { .btn { padding-inline: 20px; } .btn-row .btn { flex: 1 1 100%; } }

/* ---------- Page hero (About + Projects) ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;   /* Figma: content sits 100px above the image bottom on every hero */
  min-height: 100vh;   /* one-fold hero: fills the first screen on every device */
  min-height: 100svh;
  padding: 140px 0 clamp(48px, 5.2vw, 100px);
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
/* Projects page keeps its short hero */
.page-hero--short { min-height: clamp(380px, 26vw, 500px); padding-bottom: clamp(48px, 5.2vw, 100px); }
.page-hero__media,
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.page-hero__inner { position: relative; display: grid; gap: 40px; max-width: 1008px; }
.page-hero__title { display: grid; gap: 16px; }
/* Content must be positioned to paint above the absolutely positioned media + gradient */
.page-hero > .container { position: relative; }

/* Multi-paragraph copy: Figma uses 8px paragraph spacing (12px on the homepage spaces intro) */
.para-stack { display: grid; gap: var(--para-gap, 8px); }

/* ---------- CTA banner spacing ---------- */
.cta-wrap { padding-top: var(--section-space); }

/* ---------- Animated title underline (card titles) ----------
   Same technique as augment.org/blog: an inline span with a currentColor gradient
   background, size 0 -> 100% x 2px, anchored bottom-left, 150ms cubic-bezier(.4,0,.2,1).
   Sits directly at the bottom of the text box (no offset) and follows wrapped lines. */
.u-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  transition: background-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
:is(.card, .project, .portfolio-card):is(:hover, :focus-within) .u-line { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { .u-line { transition: none; } }

/* projects.css */
/* Projects page */

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.portfolio-card {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(16px, 1.3vw, 25px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.portfolio-card:hover { border-color: var(--teal-200); box-shadow: 0 16px 40px rgba(12, 20, 29, 0.08); }
.portfolio-card .media { aspect-ratio: 442 / 276; }
.portfolio-card:hover .media img { transform: scale(1.05); }
.portfolio-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-body); line-height: var(--lh-body, 24px); }
.portfolio-card__sep { align-self: center; width: 1px; height: 20px; background: rgba(156, 163, 175, 0.4); } /* vertical rule, as in Figma */
.portfolio-card__name {
  margin-top: 12px;
  font-size: var(--fs-h3);
  line-height: 1.33;
}
.portfolio-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.portfolio-card__place { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.portfolio-card__place .icon { width: 24px; height: 24px; }

/* Projects listing: the whole card links to the case study (the CTA's ::after
   covers the card), and "view more details" fades in only while the card is hovered
   or focused, with the shared .u-line underline growing in (same effect as the
   homepage and blog cards). Touch screens have no hover, so there it always shows. */
.portfolio--listing .portfolio-card .link-arrow { transition: opacity var(--t-fast) var(--ease); }
.portfolio--listing .portfolio-card a.link-arrow::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.portfolio--listing .portfolio-card:has(a.link-arrow) { cursor: pointer; }
.portfolio--listing .portfolio-card a.link-arrow:focus-visible { outline: none; }
.portfolio--listing .portfolio-card:has(a.link-arrow:focus-visible) { outline: 3px solid var(--teal); outline-offset: 4px; }
.portfolio--listing .portfolio-card a.link-arrow { text-decoration: none; }
.portfolio--listing .portfolio-card:is(:hover, :focus-within) .link-arrow .u-line { transition-delay: 100ms; }
@media (hover: hover) {
  .portfolio--listing .portfolio-card .link-arrow { opacity: 0; }
  .portfolio--listing .portfolio-card:is(:hover, :focus-within) .link-arrow { opacity: 1; }
}

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

/* Projects listing: homepage overlay cards (.project in components.css), two per row */
.portfolio__grid--overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio__grid--overlay .project[hidden] { display: none; }
@media (max-width: 639px) {
  .portfolio__grid--overlay { grid-template-columns: minmax(0, 1fr); }
}

.section.portfolio { padding-top: var(--section-space); }

/* ---------- "Recent projects" heading + type filters (Figma: 100px under the hero, rule, then 40px to the cards) ---------- */
.section.portfolio--listing { padding-top: clamp(56px, 5.2vw, 100px); }
.portfolio__head { display: grid; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.portfolio__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; font-weight: 600; }
.portfolio__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--navy);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.filter-chip.is-active,
.filter-chip.is-active:hover { border-color: var(--teal); background: var(--teal); color: var(--white); }
.portfolio-card[hidden] { display: none; }

/* Mobile: filters become one swipe row (same as the blog topics) */
@media (max-width: 767px) {
  .portfolio__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio__filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; white-space: nowrap; }
}

/* case-study.css */
/* Project case study page (Dashingly). Builds on page-hero + portfolio-card. */

/* ---------- Hero ---------- */
/* Case study keeps its original (not one-fold) hero height */
.page-hero--case {
  align-items: flex-end;
  min-height: clamp(460px, 36.5vw, 700px);
  padding-bottom: clamp(48px, 5.2vw, 100px);
}
.case-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.case-hero__copy { display: grid; gap: 32px; max-width: 750px; }
.case-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }
.page-hero--case h1 { font-size: var(--fs-h1); }
.page-hero--case [data-hero-step] { animation: rise 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }

/* "+3 More" gallery thumbnail, bottom-right of the hero */
.case-hero__more {
  position: relative;
  flex: none;
  width: clamp(120px, 10.7vw, 205px);
  aspect-ratio: 205 / 115;
  border: 2px solid var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy);
}
.case-hero__more img { width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 767px) {
  .case-hero { flex-direction: column; align-items: flex-start; }
  .case-hero__more { width: 160px; }
}

/* ---------- Facts bar ---------- */
.case-facts { background: #f3f2ee; }
.case-facts__list {
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.case-facts__list > div {
  display: flex;
  flex-direction: column;   /* label (dt) above value (dd), as in the design */
  justify-content: center;
  gap: 8px;
  padding: 46px clamp(20px, 3.3vw, 64px);
}
.case-facts__list > div:first-child { padding-left: 0; }
.case-facts__list > div:last-child { padding-right: 0; }
.case-facts__list > div + div { border-left: 1px solid #d8d7d5; }
.case-facts dt {
  font-size: 0.875rem;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-facts__more { color: var(--teal); font-size: 16px; text-decoration: none; }   /* "+more" after Project Type -> What We Built */
.case-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

@media (max-width: 1099px) {
  .case-facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-facts__list > div,
  .case-facts__list > div:first-child,
  .case-facts__list > div:last-child { padding: 28px 24px; border-left: 1px solid #d8d7d5; }
  .case-facts__list > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .case-facts__list > div:nth-child(n + 4) { border-top: 1px solid #d8d7d5; }
}
/* Phones: no vertical dividers. Project Type gets its own row, the other facts pair up two per row. */
@media (max-width: 639px) {
  .case-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts__list > div,
  .case-facts__list > div + div,
  .case-facts__list > div:first-child,
  .case-facts__list > div:last-child,
  .case-facts__list > div:nth-child(3n + 1) { padding: 20px 16px 20px 0; border-left: 0; }
  .case-facts__list > div:first-child { grid-column: 1 / -1; }
  .case-facts__list > div:nth-child(n + 2) { border-top: 1px solid #d8d7d5; }
}

/* ---------- Body ---------- */
.case-body { padding-top: clamp(48px, 5.2vw, 100px); }
.case-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 490px) minmax(0, 750px);
  justify-content: space-between;
  gap: 40px 48px;
  align-items: start;
}
/* The side column spans the full height of the main column so its heading has room to stick */
.case-body__side { align-self: stretch; }
.case-body__sticky {
  position: sticky;
  top: calc(140px + var(--rest-lift, 0px));   /* + the hero-parallax lift of .page-rest, so it stays below the header */
  display: grid;
  gap: 20px;
  padding-top: clamp(0px, 2.4vw, 45px);
}
.case-body__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--teal);
}
/* "Back to Projects" link (arrow nudges left on hover) */
.case-body__back { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.case-body__back .icon { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.case-body__back:hover .icon { transform: translateX(-4px); }
.case-body__back:is(:hover, :focus-visible) .u-line { background-size: 100% 2px; }
.case-body__main { display: grid; gap: clamp(36px, 3.125vw, 60px); padding-top: clamp(0px, 2.4vw, 45px); }
.case-block { display: grid; gap: 20px; scroll-margin-top: 140px; }   /* "+more" in the facts strip jumps here, below the fixed header */
.case-block h3 { font-weight: 600; font-size: var(--fs-h3); line-height: 1.33; }
.case-block p { font-size: var(--fs-lead); line-height: var(--lh-body, 1.5); }
/* Figma: 8px paragraph spacing between consecutive paragraphs */
.case-block p + p { margin-top: -12px; }   /* grid gap 20 - 8 = 8px paragraph spacing */
.inline-link { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inline-link:hover { text-decoration-thickness: 2px; }

.check-list { display: grid; gap: 20px; }
.check-list li { display: flex; align-items: flex-start; gap: 16px; font-size: var(--fs-lead); line-height: var(--lh-body, 1.5); }
.check-list .icon { width: 24px; height: 24px; margin-top: 3px; color: var(--teal); stroke-width: 1.5; }
.check-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 1023px) {
  .case-body__grid { grid-template-columns: minmax(0, 1fr); }
  .case-body__sticky { position: static; padding-top: 0; }
  .case-body__main { padding-top: 0; }
}
@media (max-width: 479px) {
  .check-list--grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- More projects ---------- */
.case-more .section-heading { margin-bottom: var(--space-heading); }
/* Three overlay cards per row are narrower than the listing/carousel ones: tighter panel so more photo shows */
@media (min-width: 640px) {
  .portfolio__grid--more .project__panel { left: 16px; right: 16px; bottom: 16px; gap: 12px; padding: 16px; }
  .portfolio__grid--more .project__name { margin-top: 4px; font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.375rem); }
  .portfolio__grid--more :is(.project__meta, .project__place) { font-size: 0.875rem; }
  .portfolio__grid--more .project__meta-sep { height: 18px; }
  .portfolio__grid--more .project__place .icon { width: 20px; height: 20px; }
  .portfolio__grid--more .media__bars { top: 16px; left: 16px; right: 16px; }
}

/* gallery.css */
/* Project gallery lightbox: dark navy glass stage, theme typography, teal accents. */

html.gallery-open { overflow: hidden; }

.gallery {
  --g-pad: clamp(16px, 2.6vw, 48px);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--g-pad);
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.gallery[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.6vw, 24px);
  animation: gallery-in 320ms var(--ease) both;
}
.gallery::backdrop {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(31, 142, 173, 0.18), transparent 60%),
    rgba(12, 20, 29, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@keyframes gallery-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* ---------- Top bar ---------- */
.gallery__bar { display: flex; align-items: center; gap: 16px 24px; }
.gallery__heading { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.gallery__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.gallery__eyebrow::before { content: ""; width: 32px; height: 3px; background: var(--teal); flex: none; }
.gallery__title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--white);
}
.gallery__counter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--white);
}
.gallery__counter-sep { color: var(--text-on-dark-muted); }

/* ---------- Buttons ---------- */
.gallery__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery__btn .icon { width: 20px; height: 20px; stroke-width: 2; }
.gallery__btn:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.gallery__btn:active { transform: scale(0.94); }
.gallery__btn:focus-visible { outline: 3px solid var(--teal-200); outline-offset: 3px; }
.gallery__close { flex: none; }
.gallery__close:hover { transform: rotate(90deg); }

/* ---------- Stage ---------- */
.gallery__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-height: 0;
}
.gallery__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 12px;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.gallery__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 220ms var(--ease), transform 260ms var(--ease);
}
.gallery__frame { height: 100%; }
.gallery__frame::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--teal);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  animation: gallery-spin 800ms linear infinite;
  pointer-events: none;
}
.gallery__frame.is-loading::after { opacity: 1; transition-delay: 250ms; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery__caption { font-size: var(--fs-body); line-height: var(--lh-body, 1.45); text-align: center; color: var(--text-on-dark-muted); }
.gallery__caption[hidden] { display: none; }

/* ---------- Thumbnails ---------- */
.gallery__thumbs {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs[hidden] { display: none; }
.gallery__thumb {
  display: block;
  width: clamp(72px, 8vw, 128px);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--navy);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 0.9; }
.gallery__thumb.is-active { opacity: 1; border-color: var(--teal); }
.gallery__thumb:focus-visible { outline: 3px solid var(--teal-200); outline-offset: 2px; }

/* ---------- Small screens: arrows overlay the image bottom corners ---------- */
@media (max-width: 719px) {
  .gallery__stage { grid-template-columns: minmax(0, 1fr); position: relative; align-content: center; }
  .gallery__figure { grid-template-rows: auto auto; height: auto; align-content: center; }
  .gallery__frame { height: auto; aspect-ratio: 16 / 9; }
  .gallery__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; background: rgba(12, 20, 29, 0.6); }
  .gallery__nav:active { transform: scale(0.94); }
  .gallery__nav--prev { left: 8px; }
  .gallery__nav--next { right: 8px; }
  .gallery__eyebrow { display: none; }
  .gallery__thumbs { justify-content: flex-start; }
}
@media (max-height: 520px) {
  .gallery__thumbs { display: none; }
}

/* ---------- Trigger in the case-study hero ---------- */
.case-hero__more-link { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.case-hero__more-link img { transition: transform 600ms var(--ease); }
.case-hero__more-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 20, 29, 0.35), transparent 60%);
  transition: opacity var(--t-med) var(--ease);
}
.case-hero__more-link:hover img { transform: scale(1.06); }
.case-hero__more-count {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: rgba(12, 20, 29, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease);
}
.case-hero__more-count .icon { width: 14px; height: 14px; stroke-width: 2; }
.case-hero__more-link:hover .case-hero__more-count { background: var(--teal); }
.case-hero__more-link:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* hero-parallax.css */
/* Hero parallax for every page with a hero (home + .page-hero pages), modelled on olympic.no's hero:
   as you scroll the first viewport the background image slides DOWN inside the hero
   (to 0.8 x the scroll distance), so it travels at only ~0.2x page speed while the
   text scrolls normally on top. Scrubbed to scroll position (no easing), like theirs.
   To remove the trial: delete the <link> and <script> for hero-parallax in index.html. */
/* The hero image itself never moves: it is pinned to the viewport (position: fixed) and the hero's
   clip-path crops it to the hero box, so the page and white content slide over a still image.
   No scroll animation on the image = nothing to lag or jitter. */
.hero, .page-hero { clip-path: inset(0); }
.hero__media, .page-hero__media { position: fixed; inset: 0; height: 100vh; height: 100lvh; }
@property --rest-lift { syntax: "<length>"; inherits: true; initial-value: 0px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-parallax {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 80vh, 0); }
  }
  /* Text + buttons also drift down, but only at 0.15x (it rises to about the menu bar, then the white section covers it), so they lag the page and the next
     (white) section slides over them while the hero clips them - the "curtain" look. */
  @keyframes hero-parallax-text {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 15vh, 0); }
  }
  /* The white content below rises 0.2x faster than the page, so it reaches the text sooner.
     main gets an equal negative margin so the footer follows the shifted content (no gap). */
  /* --rest-lift tracks the same lift as a length, so sticky blocks inside .page-rest can add it to their
     `top` and still stop just below the header (css/case-study.css, css/blog-article.css). */
  /* Only the transform lives here: animating a custom property is main-thread work, and on .page-rest it
     restyled the whole page every scroll frame (the hero jerk). --rest-lift is animated separately,
     on just the two sticky blocks that use it (see below). */
  @keyframes page-rest-rise {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -20vh, 0); }
  }
  @keyframes rest-lift {
    from { --rest-lift: 0px; }
    to   { --rest-lift: 20vh; }
  }
  /* White backdrop for the content, except the last 166px: the CTA banner overlaps the footer there (Figma), and the footer must show behind it. */
  .page-rest {
    position: relative;
    z-index: 2;
    background: linear-gradient(var(--white), var(--white)) top / 100% calc(100% - clamp(110px, 8.65vw, 166px)) no-repeat;
  }
  /* Negative margins between main and the footer collapse to the largest one, so the footer's own
     overlap (166px) has to be included here or it would be swallowed. */
  main { margin-bottom: calc(-20vh - clamp(110px, 8.65vw, 166px)); }
  @supports (animation-timeline: scroll()) {
    .page-rest {
      animation: page-rest-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .article-aside__inner,
    .case-body__sticky {
      animation: rest-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero__inner,
    .page-hero > .container {
      animation: hero-parallax-text linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
  /* With Lenis running, js/hero-parallax.js drives the same transforms in the scroll frame (see smooth-scroll.js). */
  html.js-parallax .article-aside__inner,
  html.js-parallax .case-body__sticky,
  html.js-parallax .page-rest,
  html.js-parallax .hero__media,
  html.js-parallax .page-hero__media,
  html.js-parallax .hero__inner,
  html.js-parallax .page-hero > .container { animation: none; }
  .hero__inner, .page-hero > .container { will-change: transform; }
}

/* responsive-tablet.css */
/* Tablet + small-laptop tuning (768px - 1440px). Loaded last on every page.
   The 1920px desktop design (1441px and up) and phones (767px and below) are not touched:
   everything here lives inside the media query below. Typography and section spacing are
   reduced ~20-25% / ~35% through the shared tokens so every page follows. */

@media (min-width: 768px) and (max-width: 1440px) {
  :root {
    --fs-h1: clamp(1.75rem, 0.8rem + 2.6vw, 3rem);          /* 64 -> ~40-48 */
    --fs-h2: clamp(1.5rem, 0.9rem + 1.6vw, 2rem);           /* 40 -> ~27-32 */
    --fs-h3: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);       /* 24 -> ~19-20 */
    --fs-lead: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); /* 20 -> ~16-17 */
    --fs-body: clamp(0.9375rem, 0.88rem + 0.15vw, 1rem);     /* 18 -> ~16 */

    --section-space: clamp(72px, 9.4vw, 100px);              /* 150 -> ~96-100 */
    --space-heading: clamp(24px, 2.4vw, 36px);               /* 60 -> ~25-35 */
    --space-dark: clamp(48px, 4.6vw, 72px);                  /* 120 -> ~48-66 */
  }

  /* Eyebrows */
  .eyebrow,
  .intro .eyebrow,
  .why__eyebrow,
  .pool-services .eyebrow { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); }
  .eyebrow--rule { font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); }
  .eyebrow--rule::before { width: 40px; height: 3px; }

  /* Sub-headings that carry their own clamp() */
  .trust__title,
  .founder-strip h2,
  .blog__title,
  .portfolio__title,
  .service-row h2,
  .service-row h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.5rem); }
  .project__name,
  .gallery__title { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
  .accordion__trigger { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem); padding-block: 18px; }
  .case-facts dd,
  .case-body__sticky p { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem); }

  /* Heroes */
  .hero { padding-top: 120px; }
  .page-hero { padding-top: 120px; }
  .blog-hero,
  .page-hero--case { min-height: clamp(400px, 32vw, 500px); }
  .page-hero--short { min-height: clamp(340px, 24vw, 420px); }
  .hero__title,
  .page-hero__title { gap: 12px; }
  .hero__aside,
  .page-hero__aside,
  .blog-hero__aside { gap: 24px; }
  .page-hero__inner { gap: 28px; }
  .case-hero__copy { gap: 24px; }

  /* Gaps between a heading and its copy, and between blocks of copy */
  .section-heading,
  .projects-feat__head,
  .water__head,
  .areas__head,
  .process__text,
  .journey__block { gap: 14px; }
  .why__text,
  .founder-strip__text { gap: 28px; }
  .why__text .copy,
  .founder-strip__text .copy,
  .trust__list-wrap,
  .case-block { gap: 14px; }
  .cta-banner__inner { gap: 28px; }
  .cta-banner { min-height: clamp(260px, 22vw, 320px); }
  .card,
  .post-card { gap: 20px; }
  .card__body,
  .post-card__body { gap: 10px; }
  .services__grid { margin-top: 32px; }
  .blog__grid { margin-top: 32px; gap: 32px 24px; }
  .blog__head,
  .portfolio__head { gap: 20px; padding-bottom: 28px; }
  .portfolio__head { margin-bottom: 28px; }
  .case-body__main { gap: clamp(28px, 2.6vw, 40px); }
  .article__head { gap: 32px; }
  .article__body { gap: 40px; margin-top: 32px; }
  .journey__subs { gap: 32px; }
  .process__steps { gap: 28px; }
  .start__section { padding-top: clamp(104px, 8vw, 132px); }
  .case-facts__list > div { padding-block: 32px; }

  /* Dark band / footer rhythm */
  .site-footer { padding-top: calc(clamp(110px, 8.65vw, 166px) + clamp(40px, 4.2vw, 64px)); }
  .footer__bottom { margin-top: 40px; padding-block: 24px; }
}