/* 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; } }

/* home.css */
/* Homepage sections */

/* Who we are */
.intro .section-heading { gap: 16px; }
.intro .eyebrow { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.5rem); }

/* Trust */
.trust { padding-top: var(--space-heading); }
.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 621fr) minmax(0, 750fr);
  gap: clamp(32px, 8vw, 153px);
  align-items: start;
}
.trust__list-wrap { display: grid; gap: 24px; }
.trust__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; }
.trust__list { display: grid; gap: 16px; }
.trust__item { display: flex; align-items: flex-start; gap: 24px; font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }
.trust__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal);
}
.trust__icon .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.trust__note { margin-top: clamp(8px, 1.05vw, 20px); font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }
.trust__media { position: relative; }
.trust__media .media { aspect-ratio: 750 / 408; }
/* Founder strip */
.founder-strip { margin-top: var(--space-heading); }
.founder-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  padding: clamp(28px, 2.4vw, 46px) clamp(24px, 3.1vw, 60px);
  border-radius: 0;
  background: var(--surface);
}
.founder-strip__text { display: grid; gap: 40px; max-width: 621px; }
.founder-strip__text .copy { display: grid; gap: 20px; }
.founder-strip h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; }
.founder-strip p { font-size: var(--fs-body); line-height: var(--lh-body, 1.55); }
.founder-card { display: grid; gap: 24px; justify-items: center; text-align: center; flex: none; }
.founder-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top; }
.founder-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; line-height: 1.7; }
.founder-card__role { font-size: var(--fs-body); line-height: var(--lh-body, 1.55); }

/* Featured spaces (dark carousel) */
.spaces { padding-block: var(--space-dark); }
.spaces__head {
  display: grid;
  grid-template-columns: minmax(0, 621fr) minmax(0, 718fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: start;
  margin-bottom: var(--space-heading);
}
.spaces__head p { font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }
.spaces .carousel__track > * { width: calc(var(--container-w) * 0.345); }
.spaces .card__text { color: rgba(255, 255, 255, 0.85); }
.spaces__controls { display: flex; justify-content: center; margin-top: var(--space-heading); }

/* Services */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.7vw, 32px) 24px;
  margin-top: 48px;
}
@media (max-width: 1199px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.services .media { aspect-ratio: 492 / 320; }
.services__cta { display: flex; justify-content: center; margin-top: var(--space-heading); }

/* Featured projects */
.projects-feat__head { display: grid; gap: 20px; max-width: 999px; margin: 0 auto var(--space-heading); text-align: center; }
.projects-feat .carousel__track > * { width: calc(var(--container-w) * 0.4724); }
.projects-feat__controls { display: flex; justify-content: center; margin-top: var(--space-heading); }

/* Why choose */
.why { margin-top: var(--section-space); padding-block: var(--space-dark); }
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 621fr) minmax(0, 750fr);
  gap: clamp(32px, 8vw, 153px);
  align-items: center;
}
.why__text { display: grid; gap: 40px; }
.why__text .copy { display: grid; gap: 20px; }
.why__eyebrow { color: var(--teal); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); }
.why__text h2 { color: var(--white); }
.why__text p { font-size: var(--fs-lead); line-height: var(--lh-body, 1.4); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare__panel {
  display: grid;
  gap: 24px;
  align-content: start;
  padding: clamp(24px, 1.7vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--navy);
}
.compare__panel--ours { background: var(--teal-50); }
.compare__head { display: grid; gap: 8px; justify-items: center; text-align: center; }
.compare__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.4; text-transform: uppercase; }
.compare__sub { font-size: 1rem; line-height: 1.75; color: var(--text-muted); }
.compare__mark { width: 55px; height: 56px; }
.compare__list { display: grid; gap: 24px; }
.compare__list li { display: flex; gap: 16px; align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-body, 1.45); }
.compare__icon { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 2px; }
.compare__icon--no { color: var(--text-muted); }
.compare__icon--no .icon { width: 20px; height: 20px; stroke-width: 1.75; }
.compare__icon--yes img { width: 20px; height: 20px; display: block; }

/* FAQ */
.faq__head { margin-bottom: var(--space-heading); }
.faq__head h2 { text-transform: uppercase; }


/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .spaces .carousel__track > * { width: clamp(280px, 62vw, 526px); }
  .projects-feat .carousel__track > * { width: clamp(300px, 70vw, 720px); }
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Stacked: heading + copy, then the two comparison cards, then the buttons */
  .why__text { display: contents; }
  .why__text .copy { order: 1; }
  .compare { order: 2; }
  .why__text .btn-row { order: 3; }
}

@media (max-width: 899px) {
  .trust__grid,
  .spaces__head { grid-template-columns: minmax(0, 1fr); }
  .trust__media { margin-left: clamp(24px, 6vw, 56px); }
  .founder-strip__inner { flex-direction: column; align-items: flex-start; }
  .founder-card { justify-items: start; text-align: left; order: -1; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  /* Phones: image -> title 24px, title -> text 16px, text -> next card 32px */
  .services__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .services .card { gap: 24px; }
  .services .card__body { gap: 16px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .trust__media { margin-left: 36px; }
  .spaces .carousel__track > * { width: min(86vw, 420px); }
  .projects-feat .carousel__track > * { width: min(88vw, 520px); }
  .btn-row .btn { flex: 1 1 auto; }
  .accordion__content { padding-right: 0; }
}


/* 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; }
}