:root {
  --page: #f4f6f8;
  --ink: #0a0a0a;
  --rule-subtle: #0a0a0a33;
  --placeholder: #e3e6ea;
  --band: #ffffff;              /* alternate section background */
  --section-y: clamp(48px, 5vw, 72px);  /* top/bottom padding inside a band */
  --gutter: clamp(16px, 3vw, 36px);
  --max-width: 1600px; /* content stops growing here; wider screens get even side margins */
  /* Gutter plus whatever is left over beyond --max-width, split evenly.
     % padding resolves against the full-width section, so this centres the content. */
  --side: max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
  /* Hero + header colours */
  --hero-bg: var(--page);
  --hero-ink: var(--ink);
  --hero-dot: rgba(10, 10, 10, 0.16);
}
/* Hero colour trials, picked with ?herobg= (temporary) */
:root[data-hero="sand"]  { --hero-bg: #ebe5da; --hero-dot: rgba(70, 50, 20, 0.18); }
:root[data-hero="green"] { --hero-bg: #00b140; --hero-dot: rgba(0, 40, 10, 0.18); }
:root[data-hero="blue"]  { --hero-bg: #2236ff; --hero-ink: #ffffff; --hero-dot: rgba(255, 255, 255, 0.22); }
:root[data-hero="dark"]  { --hero-bg: #0d0d0d; --hero-ink: #f4f6f8; --hero-dot: rgba(255, 255, 255, 0.14); }
/* The black Impuls ribbon would vanish on dark backgrounds, so flip it to white */
:root[data-hero="blue"] .hero-logo,
:root[data-hero="dark"] .hero-logo { filter: invert(1); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Anchor jumps land below the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.6; }

h1, h2, h3, p, ul { margin: 0; }
img { display: block; }

.page-x { padding-left: var(--side); padding-right: var(--side); }

/* Header: stays at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.wordmark { font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.025em; line-height: 1.2; }

/* Home | Shop switch: phones only (max-width 800px, as in main.js TABS_MQ) */
.tabs { display: none; }
@media (max-width: 800px) {
  .site-header { flex-wrap: wrap; padding-bottom: 12px; }
  .tabs {
    display: flex;
    flex-basis: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 99px;
    background: var(--placeholder);
  }
  .tabs a {
    flex: 1;
    padding: 9px 12px;
    border-radius: 99px;
    text-align: center;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.6;
  }
  .tabs a[aria-current="page"] { background: var(--band); opacity: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
  html[data-tab="home"] .shop { display: none; }
  html[data-tab="shop"] main > :not(.shop),
  html[data-tab="shop"] .site-footer { display: none; }
  /* On its own tab the shop starts right under the header */
  html[data-tab="shop"] .shop { padding-top: 12px; }
  html[data-tab="shop"] .shop-bar { display: none; }
  /* The frame fills the screen under the header and scrolls itself (fit=0), so the
     shop's sticky toolbar and "Review request" bar stay on screen. --header-h is set
     by main.js. */
  html[data-tab="shop"] .shop-frame {
    height: calc(100svh - var(--header-h, 120px) - 12px);
    min-height: 0;
    max-height: none;
  }
}
.lang-switch { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); }
.lang-switch button {
  all: unset;
  cursor: pointer;
  opacity: 0.4;
}
.lang-switch button[aria-pressed="true"] { opacity: 1; }
.lang-switch button:hover { opacity: 0.7; }
.lang-switch button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lang-switch span { opacity: 0.4; }

/* Hero */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px clamp(32px, 5vw, 80px);
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(64px, 9vw, 128px);
  position: relative;
  isolation: isolate; /* keeps the background layers below the content */
  background: var(--hero-bg);
  color: var(--hero-ink);
}

/* Animated dot grid behind the hero (canvas drawn by main.js) */
.hero-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* Even across the width; fades out only towards the far edges and bottom */
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 50%, transparent 100%);
}
.hero h1 {
  flex: 1 1 520px;
  max-width: 16ch;
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 104px);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
/* Phones: the reel is hidden, so the headline gets the whole width */
@media (max-width: 799px) {
  .hero h1 { font-size: clamp(44px, 12.5vw, 88px); }
}
.hero-logo {
  display: inline-block;
  height: 0.95em;
  width: auto;
  vertical-align: -0.16em;
  margin: 0 0.04em;
}

/* Product reel: one column scrolling up beside the headline. From 1440px wide
   it turns into one row scrolling sideways to fill the free space. */
.reel {
  flex: 0 1 300px;
  min-width: 220px;
  height: clamp(380px, 40vw, 560px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  /* main.js moves the track (auto-drift + drag). The page can't scroll vertically
     from a touch on the column; it's a narrow side column so that's acceptable. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}
.reel.is-dragging { cursor: grabbing; }
.reel img { -webkit-user-drag: none; pointer-events: none; }
.reel-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.reel-run {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
  flex-shrink: 0;
}
@media (min-width: 1440px) {
  /* Box hugs the text (longest line is ~13.5ch) so the row gets the freed space;
     the line breaks are the same as at 16ch. */
  .hero h1 { flex: 0 0 auto; max-width: 14ch; }
  /* The row takes the headline's height: it stretches to the flex line, and its
     own content is allowed to shrink to nothing so only the h1 sets that height. */
  .reel {
    flex: 1 1 0;
    height: auto;
    align-self: stretch;
    min-height: 0;
    /* Bleed past the content edge to the window's right edge. Same maths as
       --side, but in vw because % here would mean the hero's inner width. */
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max-width)) / 2 + var(--gutter)));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 96%, transparent);
    touch-action: pan-y;
  }
  /* 100vw includes the scrollbar, so the bleed overshoots by a few px; clip it
     rather than letting the page scroll sideways */
  .hero { overflow-x: clip; }
  .reel-track {
    flex-direction: row;
    width: max-content;
    height: 100%;
  }
  .reel-run {
    flex-direction: row;
    gap: 48px;
    padding-bottom: 0;
    padding-right: 48px;
  }
  .reel .product { width: 240px; }
  .reel .product-img { height: auto; flex: 1 1 0; min-height: 0; }
}
/* Below ~800px the reel would drop under the headline; leave it out on phones and small tablets */
@media (max-width: 799px) {
  .reel { display: none; }
}

/* Load-in: headline rises into place, the reel follows, header and dots fade in */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
  .reel { animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
  .site-header { animation: fade-in 0.8s ease both; }
  .hero-dots { animation: fade-in 1.4s ease 0.2s both; }
}

/* Scroll-in for everything below the hero. main.js tags the elements and adds
   .js-reveal to <html> only when motion is allowed, so without it nothing hides. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.product { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.product-img {
  height: clamp(120px, 13vw, 180px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
:root[data-hero="dark"] .product-img img { mix-blend-mode: normal; }
.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid currentColor;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 500;
}
.product-meta span:last-child { opacity: 0.55; }

/* Intro row */
.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(48px, 4vw, 72px);
  align-items: stretch; /* equal-height columns, so the school box can sit at the bottom */
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--band);
}
/* Each column is title + text (.intro-head), then its picture right under the
   text. Columns are as tall as the tallest, and the school box is pushed to the
   bottom of its column, so it ends level with the crew grid and studio photo. */
.intro-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro-col > .pill { align-self: start; justify-self: start; }
/* Callout in the first column (school discount) */
/* Bottom of its column, so it lines up with the bottom of the crew grid and
   studio photo when the columns sit side by side (no effect when stacked) */
.offer-box {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 6px;
  background: var(--page);
}
.offer-box h3 { font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.03em; }
.intro-col .offer-box p { font-size: 16px; max-width: none; }
.offer-link {
  all: unset;
  align-self: flex-start;
  margin-top: 10px;
  font-weight: 500;
  border-bottom: 1px solid currentColor; /* reads as a link inside the card */
  cursor: pointer;
}
.offer-link:hover { opacity: 0.6; }
.offer-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.offer-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.offer-contact:not([hidden]) { animation: rise-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--band);
  border: 1px solid var(--rule-subtle);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) { .offer-contact:not([hidden]) { animation: none; } }
.intro-col h2 {
  margin-top: 12px;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.intro-col p { max-width: 480px; font-size: 16px; text-wrap: pretty; }
.intro-text { display: flex; flex-direction: column; gap: 12px; }
.intro-head { display: flex; flex-direction: column; gap: 20px; }

.label-bar {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
}

/* The small numbered section labels are switched off at every size; the
   markup stays in index.html, so deleting these three rules brings them back. */
.label-bar { display: none; }
.intro-col h2 { margin-top: 0; }
.shop-bar > span { display: none; } /* the (04) beside the big Shop title */

.pill {
  align-self: flex-start;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 99px;
}
.pill--outline { border: 1px solid var(--ink); }
.pill--filled { background: var(--ink); color: var(--page); }
button.pill { font: inherit; color: var(--ink); background: transparent; cursor: pointer; }
button.pill:hover { opacity: 0.6; }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Studio specs pop-up (native <dialog>: Esc closes, focus stays inside) */
.specs {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--band);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}
.specs--wide { width: min(720px, calc(100% - 32px)); }
.specs { overflow-y: auto; overscroll-behavior: contain; }
.terms-body { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.terms-body h3 { margin-top: 12px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.terms-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.terms-note { font-size: 13px; opacity: 0.6; }
.faq-link { display: inline-block; margin-top: 8px; font-weight: 500; border-bottom: 1px solid currentColor; }
.faq-link:hover { opacity: 0.6; }
.specs::backdrop { background: rgba(10, 10, 10, 0.45); backdrop-filter: blur(3px); }
.specs[open] { animation: specs-in 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.specs[open]::backdrop { animation: specs-fade 0.25s ease; }
@keyframes specs-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes specs-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .specs[open], .specs[open]::backdrop { animation: none; }
}
html:has(.specs[open]) { overflow: hidden; } /* no page scroll behind the pop-up */
.specs-inner { display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 3vw, 32px); }
.specs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.specs-head h2 { font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.035em; }
.specs-close {
  all: unset;
  flex: none;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  cursor: pointer;
}
/* x drawn like the FAQ icon's bars */
.specs-close::before,
.specs-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: var(--ink);
  transform: rotate(45deg);
}
.specs-close::after { transform: rotate(-45deg); }
.specs-close:hover { opacity: 0.6; }
.specs-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.specs-list { margin: 0; border-top: 1px solid var(--rule-subtle); }
.specs-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-subtle);
  font-size: 16px;
}
.specs-list dt { opacity: 0.6; }
.specs-list dd { margin: 0; font-weight: 500; text-align: right; }
/* Price row stands out from the specs below it */
.specs-list .specs-price { font-size: 18px; }
.specs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.specs-list .specs-price dt { opacity: 1; font-weight: 500; }
.specs-list .specs-price dd { font-weight: 600; }

/* Crew: 2x2 square photo tiles, text on the photo */
.crew-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.crew-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--placeholder);
  color: #fff;
}
.crew-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
/* Dark fade top and bottom so white text reads on any photo */
.crew-card:not(.crew-card--empty)::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 30%),
    linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 40%);
}
.crew-role,
.crew-info { position: absolute; z-index: 1; left: 12px; right: 12px; }
.crew-role {
  top: 10px;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.crew-info {
  bottom: 10px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.crew-name { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.crew-card a { color: inherit; }
/* Small phones: tiles are ~165px, so tighten the text to keep faces visible */
@media (max-width: 480px) {
  .crew-role, .crew-info { left: 10px; right: 10px; }
  .crew-role { font-size: 17px; top: 8px; }
  .crew-info { bottom: 8px; font-size: 11px; line-height: 1.3; }
  .crew-name { font-size: 14px; }
}
.crew-card--empty { color: var(--ink); }

/* Studio */
.studio-media { position: relative; }
.price-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--band);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
}
/* "Show specs" sits on the photo, bottom-right */
.specs-chip {
  all: unset;
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 10px 16px;
  border-radius: 99px;
  background: var(--band);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.specs-chip:hover { transform: translateY(-2px); }
/* "Add to cart" on the studio photo: bottom-left, filled, so it reads as the main action */
.specs-chip--add { right: auto; left: 12px; background: var(--ink); color: var(--page); }
.specs-chip:focus-visible { outline: 2px solid var(--band); outline-offset: 3px; }
/* Square crop from the centre of the photo */
.studio-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 6px; /* matches the crew tiles */
  background: var(--placeholder);
}

/* Shop */
/* --shop-side + --shop-inset puts the bar's rule in line with the other
   sections. The frame gets the same inset, and the shop is embedded with
   pad=0 (no margins of its own), so its edges line up with the title and rule. */
.shop {
  --shop-side: max(clamp(8px, 2vw, 24px), calc((100% - var(--max-width)) / 2 + 24px));
  --shop-inset: clamp(8px, 1vw, 12px);
  padding: var(--section-y) var(--shop-side) 0;
}
.shop-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 0 var(--shop-inset) 16px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  font-weight: 500;
}
.shop-title {
  font-weight: 500;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.85;
  letter-spacing: -0.06em;
}
/* Until the shop reports its height (embed mode, see setupShopEmbed in main.js)
   it gets a screen-high window and scrolls inside it. Once it reports, the
   frame is as tall as the shop (.is-fit, height set inline) and the page scrolls. */
.shop-frame {
  display: block;
  width: calc(100% - 2 * var(--shop-inset));
  margin: 0 var(--shop-inset);
  height: calc(100vh - 24px);
  height: calc(100svh - 24px);
  min-height: 640px;
  max-height: 1400px;
  border: 0;
  background: transparent;
}
.shop-frame.is-fit { min-height: 0; max-height: none; }
.shop-screenshot { display: block; width: 100%; height: auto; }

/* FAQ */
.faq {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--band);
}
.faq-item { border-bottom: 1px solid var(--rule-subtle); }
.faq-item h3 { font: inherit; }
.faq-q {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2vw, 28px) 0;
  cursor: pointer;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.faq-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Plus drawn with two bars; the vertical one rotates flat to make the minus */
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }

/* Height animates via the 0fr → 1fr grid-row trick, no JS measuring */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
}
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; opacity: 1; }
.faq-panel-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .faq-panel, .faq-icon::before, .faq-icon::after { transition: none; }
}
.faq-a {
  padding-bottom: clamp(20px, 2vw, 28px);
  max-width: 640px;
  font-size: 16px;
  text-wrap: pretty;
}

/* Footer */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
  padding-top: var(--section-y);
  padding-bottom: 24px;
  background: var(--ink);
  color: var(--page);
}
.site-footer a { color: inherit; }
/* "Let's stay in touch": contact card (photo + text) beside a map of the office */
.footer-title {
  font-weight: 500;
  font-size: clamp(44px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.footer-hello {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.footer-card {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) 1.2fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.footer-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px; /* matches the crew tiles */
  background: #222;
}
.footer-card-text { display: flex; flex-direction: column; gap: 20px; }
.footer-who { display: flex; flex-direction: column; gap: 4px; }
.footer-name { font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }
.footer-role { opacity: 0.6; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-link,
.footer-address { display: inline-flex; align-items: center; gap: 0.4em; }
.footer-link,
.footer-address {
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.footer-address { align-items: flex-start; margin-top: 0.6em; } /* set apart from mail + phone */
.footer-address .footer-icon { margin-top: 0.15em; }
.footer-link:hover,
.footer-address:hover { opacity: 0.6; }
.footer-icon { flex: none; width: 0.8em; height: 0.8em; }
.footer-map { min-height: 300px; border-radius: 6px; overflow: hidden; background: #222; }
.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}
/* Narrow phones: photo above the text */
@media (max-width: 480px) {
  .footer-card { grid-template-columns: 1fr; }
  .footer-photo { max-width: 220px; }
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-weight: 500;
}