/* Ofelia Global. Tokens and rules come from DESIGN.md. */

@font-face { font-family: "Nohemi"; src: url("../assets/fonts/nohemi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/nohemi-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../assets/fonts/open-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../assets/fonts/open-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --color-navy: #001F5C;
  --color-navy-soft: #1D3A70;
  --color-peach: #FFEDE6;
  --color-bg: #FFFFFF;
  --color-surface: #F1F3F8;
  --color-text: #001F5C;
  --color-text-muted: #4B5675;
  --color-text-muted-dark: #C3C8D8;
  --color-border: #7A84A0;
  --color-divider: #D9DDE7;
  --color-divider-dark: rgba(255, 237, 230, 0.25);
  --color-error: #B3261E;

  --font-display: "Nohemi", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Type scale (DESIGN.md). Every step reaches its desktop size by 1440px. */
  --text-display: clamp(2.75rem, 7.04vw - 0.33rem, 6rem); /* split hero: fits the half-width column from 901px */
  --text-closing: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  --text-number: clamp(4rem, 2.4rem + 6.6vw, 7.5rem);
  --text-h2: clamp(1.875rem, 1.27rem + 2.48vw, 3.5rem);
  --text-title: clamp(1.375rem, 1.05rem + 1.33vw, 2.25rem);
  --text-h3: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-small: 0.875rem;

  /* Spacing scale (DESIGN.md): 8px base */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;
  --space-10: 200px;
  /* Named gaps, smallest to largest */
  --space-head: var(--space-3);                                     /* heading to its intro line */
  --space-head-content: clamp(48px, 2.63rem + 1.52vw, 64px);        /* section intro to its content */
  --space-block: clamp(64px, 2.6rem + 6vw, 128px);                  /* between large blocks in a section */

  /* One entrance curve everywhere: the CSS twin of GSAP's power3.out */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-hover: 0.2s;
  --dur-enter: 0.7s;

  --gutter: clamp(20px, 3.4vw, 48px);
  --max: 1320px;
  --wl: max(var(--gutter), calc((100% - var(--max)) / 2));
  --radius: 12px;
  --panel-radius: 40px;
  --header-h: 104px;
  --section-y: clamp(96px, 6rem + 4vw, 160px);
  --section-end: calc(var(--section-y) / 2); /* bottom of a panel section, so the gap between sections is 1.5 × --section-y */
}
/* Stacked hero (phones and tablets): the headline gets the full width */
@media (max-width: 900px) { :root { --text-display: clamp(2.625rem, 0.6875rem + 10vw, 5rem); } }

*, *::before, *::after { box-sizing: border-box; }
/* Nothing may widen the page sideways. html takes overflow-x: clip so the body's own clip
   applies to the body (instead of passing up to the window), and the body is positioned so
   it also clips the travelling globe, which bleeds past the right edge like the hero globe,
   and the team row while it glides in on phones. Without this, phones lay the page out wider
   than the screen and the Menu button ends up off-screen. clip, unlike hidden, creates no
   scroll container, so sticky and pinned elements are unaffected. */
html { -webkit-text-size-adjust: 100%; background: var(--color-navy); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-navy);
  color: var(--color-peach);
  font: 400 var(--text-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}
/* Browser surfaces in the brand: selection, scrollbar and text caret */
::selection { background: var(--color-peach); color: var(--color-navy); }
.panel ::selection, .form-card ::selection { background: var(--color-navy); color: var(--color-peach); }
html { scrollbar-color: var(--color-border) var(--color-navy); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h3 { letter-spacing: 0; line-height: 1.2; }
p, ul, ol, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--color-peach); color: var(--color-navy); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 16px; }

/* Stacking: sections set no z-index so the travelling globe (z 1) can sit
   between a section's background (z 0) and its content (z 2). The white
   panel (z 3) slides over the globe. */
section, footer { position: relative; scroll-margin-top: 72px; }
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bg img { width: 100%; height: 100%; object-fit: cover; }
.tint { position: absolute; inset: 0; background: var(--color-navy-soft); mix-blend-mode: multiply; }
.content { position: relative; z-index: 2; }

.lead { font-size: var(--text-lead); line-height: 1.5; max-width: 34rem; }
.small { font-size: var(--text-small); line-height: 1.5; }

/* Focus */
:focus-visible { outline: 2px solid var(--color-peach); outline-offset: 3px; }
.panel :focus-visible, .form-card :focus-visible { outline-color: var(--color-navy); }

/* Buttons: rounded rectangle, no arrows */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px; border-radius: var(--radius);
  font: 600 1.0625rem/1 var(--font-text); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.08s; }
.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.btn--peach { background: var(--color-peach); color: var(--color-navy); }
.btn--peach:hover { background: #FFFFFF; }
.btn--navy { background: var(--color-navy); color: var(--color-peach); }
.btn--navy:hover { background: var(--color-navy-soft); }
/* Secondary (DESIGN.md): navy outline on white, fills on hover. Used where a primary would compete. */
.btn--line { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn--line:hover { background: var(--color-navy); color: var(--color-peach); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--color-peach); transition: height 0.25s var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; background: var(--color-navy); opacity: 0; transition: opacity 0.25s var(--ease); }
.site-header.is-condensed { height: 84px; }
.site-header.is-condensed::before { opacity: 1; }
.site-header .bar { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; border-radius: 4px; }
.logo img { height: 72px; width: auto; transition: height 0.25s var(--ease); }
.is-condensed .logo img { height: 64px; }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav .link, .footer-links a { position: relative; text-decoration: none; }
.nav .link { padding: 14px 0; font: 600 1rem/1 var(--font-text); }
.nav .link::after, .footer-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.22s var(--ease); }
.footer-links a::after { height: 1px; }
.nav .link:hover::after, .nav .link[aria-current="true"]::after, .footer-links a:hover::after { transform: scaleX(1); }
.nav .btn { min-height: 48px; padding: 0 24px; font-size: 1rem; }
.menu-btn { display: none; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--color-peach); border-radius: var(--radius); background: transparent; color: var(--color-peach); font: 600 1rem/1 var(--font-text); cursor: pointer; transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--color-peach); color: var(--color-navy); }
.menu-panel { position: fixed; inset: 0; z-index: 45; background: var(--color-navy); color: var(--color-peach); padding: var(--space-8) var(--gutter) var(--space-5); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.menu-panel[hidden] { display: none; }
.menu-panel a:not(.btn) { font: 500 2.5rem/1.2 var(--font-display); letter-spacing: -0.02em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--color-divider-dark); }
.menu-panel a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.menu-panel .btn { margin-top: 32px; align-self: flex-start; }
@media (max-width: 960px) {
  :root { --header-h: 84px; }
  .nav .link, .nav .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .logo img, .is-condensed .logo img { height: 64px; }
}

/* ---------- Hero ---------- */
.hero { min-height: max(100svh, 760px); display: flex; align-items: center; overflow: hidden; }
.meridians { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.meridians path, .meridians ellipse, .meridians line { fill: none; stroke: var(--color-navy-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-inner { position: relative; z-index: 2; align-items: center; padding: calc(var(--header-h) + 24px) 0 64px; }
.hero-text { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
/* 7.2em gives the same four lines at every size: Access is / everything. / Memories are / forever. */
.hero h1 { font-size: var(--text-display); font-weight: 600; line-height: 1; letter-spacing: -0.02em; max-width: 7.2em; text-wrap: wrap; }
.hero .lead { max-width: 31rem; }
.porthole { grid-column: 7 / 13; width: min(100%, 76vh, 640px); justify-self: end; margin-right: calc(-1 * clamp(0px, 4vw, 80px)); }

/* The lens: the photo seen through the supplied globe (approved by the client) */
.lens { position: relative; aspect-ratio: 1; }
.lens-pic { position: absolute; inset: 0.6%; border-radius: 50%; overflow: hidden; background: var(--color-navy); }
.lens-pic img { width: 100%; height: 100%; object-fit: cover; }
.lens-globe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Travelling globe: hidden unless the journey runs (768px and up, motion allowed).
   Positioned in page coordinates, so once it lands it scrolls with the page. */
.traveller { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; z-index: 1; pointer-events: none; display: none; will-change: transform; }

/* Longitude lines drawn on the landed globe so its spin reads as a turning sphere */
.globe-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.globe-lines path, .globe-lines line { fill: none; stroke: rgba(255, 237, 230, 0.34); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Hero lines on phones turn by transform alone: each is half the rim circle, squeezed about the centre */
.gl-turn path { transform-box: view-box; transform-origin: 500px 500px; }
.traveller .lens-pic img, .traveller .lens-globe { position: absolute; inset: 0; }
.journey .traveller { display: block; }
.journey .globe-slot > * { visibility: hidden; }

/* ---------- Proof ---------- */
.proof { padding: clamp(24px, 4vh, 48px) 0 clamp(200px, 36vh, 360px); }
.stat { grid-column: span 4; }
/* Keeps the numbers in the columns they had beside the old heading */
.stat:first-child { grid-column: 5 / span 4; }
.num { font: 500 var(--text-number)/1 var(--font-display); letter-spacing: -0.03em; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.num-vis { display: inline-block; white-space: nowrap; }
.num-plus { display: inline-block; }
.stat p:last-child { color: var(--color-text-muted-dark); max-width: 19rem; margin-top: var(--space-2); }

/* ---------- White panel ---------- */
.panel { position: relative; z-index: 3; color: var(--color-text); }
.panel-bg { position: absolute; inset: 0; z-index: -1; background: var(--color-bg); border-radius: var(--panel-radius); transform-origin: 50% 0; }
.sec-head { display: flex; flex-direction: column; gap: var(--space-head); max-width: 46rem; }
.sec-head h2 { font-size: var(--text-h2); }
.sec-head .lead { color: var(--color-text-muted); }
/* A long-form intro statement in place of a short heading (What we do): title size, wider measure */
.sec-head--statement { max-width: 52rem; }
.sec-head--statement h2 { font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.01em; }

/* What we do: alternating splits, photos run to the screen edge through the grid */
.what { padding: var(--section-y) 0 var(--section-end); }
.what .sec-head { margin-bottom: var(--space-head-content); }
/* Text sits near the top of its photo so it reads straight on from the section intro */
.split { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--max) / 2)) minmax(0, calc(var(--max) / 2)) minmax(var(--gutter), 1fr); align-items: start; margin-bottom: var(--space-block); }
.split:last-of-type { margin-bottom: 0; }
.split .frame { position: relative; grid-column: 1 / 3; grid-row: 1; aspect-ratio: 5 / 4; border-radius: 0 var(--radius) var(--radius) 0; }
/* Taller than the frame so the scroll parallax never shows an edge */
.split .frame img { position: absolute; left: 0; top: -7%; height: 114%; }
.split > div { grid-column: 3; grid-row: 1; padding-top: var(--space-6); padding-left: clamp(var(--space-4), 6vw, var(--space-8)); }
.split--flip .frame { grid-column: 3 / 5; border-radius: var(--radius) 0 0 var(--radius); }
.split--flip > div { grid-column: 2; padding-left: 0; padding-right: clamp(var(--space-4), 6vw, var(--space-8)); }
/* Service text: eyebrow (the service name), heading (the line that sells it), text, then a quiet button.
   The eyebrow is sentence case Open Sans, never all caps or monospace (Adam asked for it, 2026-10-23). */
.split .eyebrow { font: 600 var(--text-small)/1.4 var(--font-text); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.split h3 { font-size: var(--text-title); letter-spacing: -0.015em; line-height: 1.15; max-width: 16ch; margin-bottom: var(--space-3); }
.split h3 + p { color: var(--color-text-muted); max-width: 30rem; }
.split .btn { margin-top: var(--space-4); }

/* Photo frames */
.frame { overflow: hidden; border-radius: var(--radius); background: var(--color-surface); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s var(--ease); }
.has-hover:hover .frame img { transform: scale(1.03); }

/* Experiences: the index from direction B */
.exp { padding: var(--section-y) 0 var(--section-end); }
.exp-left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-head-content); }
.index { border-top: 1px solid var(--color-divider); }
.index button {
  width: 100%; display: block; text-align: left; border: 0;
  background: linear-gradient(var(--color-divider), var(--color-divider)) left bottom / 100% 1px no-repeat;
  padding: var(--space-2) 0; min-height: 52px; font: 500 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.015em;
  color: var(--color-text-muted); cursor: pointer; position: relative;
  transition: color var(--dur-hover) var(--ease), padding-left 0.3s var(--ease);
}
/* The dash starts 8px in so it sits inside the focus outline rather than crossing it */
.index button::before { content: ""; position: absolute; left: var(--space-1); top: 50%; width: 0; height: 2px; background: var(--color-navy); transition: width 0.3s var(--ease); }
.index button:hover, .index button[aria-pressed="true"] { color: var(--color-navy); }
.index button[aria-pressed="true"] { padding-left: 40px; }
.index button[aria-pressed="true"]::before { width: 24px; }
.index button:focus-visible { outline-offset: -2px; border-radius: 8px; }
.exp-right { grid-column: 7 / 13; align-self: end; }
.stage { position: relative; aspect-ratio: 5 / 4; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity var(--dur-enter) var(--ease), transform 1.1s var(--ease); }
.stage img.is-active { opacity: 1; transform: none; }
.caption { margin-top: var(--space-2); min-height: 3.2em; color: var(--color-text-muted); max-width: 32rem; }

/* Team: a swipeable rail on phones and tablets; four portraits side by side from 1024px */
.team { padding-bottom: var(--section-y); }
.team-pin { position: relative; }
.team-intro { padding: var(--section-y) var(--wl) var(--space-head-content); display: flex; flex-direction: column; gap: var(--space-head); }
.team-intro h2 { font-size: var(--text-h2); max-width: 46rem; }
.team-intro .lead { color: var(--color-text-muted); }
.team-track { display: flex; gap: var(--space-4); padding: 0 var(--wl); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wl); scrollbar-width: none; overscroll-behavior-x: contain; }
.team-track::-webkit-scrollbar { display: none; }
.team-track:focus-visible { outline-offset: -2px; }
.person { flex: none; width: min(78vw, 340px); scroll-snap-align: start; }
.person .frame { aspect-ratio: 3 / 4; margin-bottom: var(--space-2); }
.person h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }
.person p { color: var(--color-text-muted); font-size: var(--text-small); }
@media (min-width: 1024px) {
  .team-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-3); overflow: visible; scroll-snap-type: none; }
  .person { width: auto; }
}

/* ---------- Our reach ---------- */
.reach { padding: var(--section-y) 0; text-align: center; }
.reach h2 { font-size: var(--text-h2); max-width: 17ch; margin: 0 auto var(--space-head-content); }
.reach-globe { width: min(440px, 72vw, 46vh); margin: 0 auto; }
.reach-label { margin: var(--space-5) 0 var(--space-2); color: var(--color-text-muted-dark); font-size: var(--text-small); }
.places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); max-width: 1120px; margin: 0 auto; text-align: left; border-top: 1px solid var(--color-divider-dark); }
.places li { font: 500 var(--text-h3)/1.2 var(--font-display); padding: var(--space-2) 0; background: linear-gradient(var(--color-divider-dark), var(--color-divider-dark)) left bottom / 100% 1px no-repeat; }
.reach .lead { margin: var(--space-5) auto var(--space-4); }

/* ---------- FAQs (navy, between Our reach and the form) ---------- */
/* A hairline separates it from Our reach, since both are navy */
.faq { padding-bottom: var(--section-y); }
.faq .content { padding-top: var(--section-y); background: linear-gradient(var(--color-divider-dark), var(--color-divider-dark)) left top / 100% 1px no-repeat; align-items: start; }
.faq-head { grid-column: 1 / 5; position: sticky; top: 140px; }
.faq-head h2 { font-size: var(--text-h2); max-width: 9ch; }
.faq-list { grid-column: 6 / 13; border-top: 1px solid var(--color-divider-dark); }
.faq-item { background: linear-gradient(var(--color-divider-dark), var(--color-divider-dark)) left bottom / 100% 1px no-repeat; }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; min-height: 64px; padding: var(--space-3) var(--space-6) var(--space-3) 0;
  font: 500 var(--text-h3)/1.25 var(--font-display); color: var(--color-peach);
  border-radius: 8px; transition: color var(--dur-hover) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus that turns to minus: two drawn bars, no icon set */
.faq-item summary::before, .faq-item summary::after {
  content: ""; position: absolute; right: var(--space-1); top: 50%; width: 18px; height: 2px; margin-top: -1px;
  background: currentColor; opacity: 0.7; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(90deg) scaleX(0); }
.faq-item summary:hover { color: #FFFFFF; }
.faq-item summary:hover::before, .faq-item summary:hover::after { opacity: 1; }
.faq-item summary:focus-visible { outline-offset: 4px; }
.faq-a { padding: 0 var(--space-6) var(--space-4) 0; color: var(--color-text-muted-dark); max-width: 38rem; }
.faq-a a { color: var(--color-peach); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness var(--dur-hover) var(--ease); }
.faq-a a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-in 0.3s var(--ease) both; }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Closing and form ---------- */
.closing { padding: var(--section-y) 0; }
.closing .bg img { position: absolute; left: 0; top: -12%; height: 124%; }
.closing .content { align-items: start; }
.closing-text { grid-column: 1 / 6; position: sticky; top: 140px; display: flex; flex-direction: column; gap: var(--space-head); }
.closing-text h2 { font-size: var(--text-closing); line-height: 1; letter-spacing: -0.03em; }
.form-card { grid-column: 7 / 13; background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); padding: clamp(var(--space-3), 3.4vw, var(--space-5)); }
.form-card > h3 { font-size: var(--text-h3); margin-bottom: var(--space-4); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* Each field spans three shared rows (label, control, error), so side-by-side boxes stay level
   even when one label wraps. Room for the fixed header when a field is scrolled to. */
.field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); align-content: start; scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
.field label { align-self: end; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 0.875rem/1.3 var(--font-text); }
.field .opt { font-weight: 400; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font: 400 1rem/1.4 var(--font-text); color: var(--color-navy); caret-color: var(--color-navy);
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 8px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field select { appearance: none; padding-right: 44px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23001F5C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.field textarea { min-height: 140px; resize: vertical; }
.field :is(input, select, textarea):hover { border-color: var(--color-navy); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--color-navy); box-shadow: 0 0 0 1px var(--color-navy); }
.field :is(input, select, textarea):disabled { background: var(--color-surface); color: var(--color-text-muted); cursor: not-allowed; }
.field .error { display: none; font-size: 0.875rem; color: var(--color-error); }
.field.is-invalid :is(input, select, textarea) { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
/* A field with an error still shows it has focus: red edge, white gap, navy ring */
.field.is-invalid :is(input, select, textarea):focus { box-shadow: 0 0 0 1px var(--color-error), 0 0 0 3px #FFFFFF, 0 0 0 5px var(--color-navy); }
.field.is-invalid .error { display: block; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot .small { color: var(--color-text-muted); }
.form-foot a { display: inline-block; padding: 12px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-hover) var(--ease); }
.form-foot a:hover { text-decoration-thickness: 2px; }
/* Turnstile takes no space unless Cloudflare shows its tick box */
.turnstile { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-3)); }
.turnstile.is-visible { margin-top: 0; }
.form-error { grid-column: 1 / -1; color: var(--color-error); font-size: 0.9375rem; }
.form-error[hidden] { display: none; }
.thanks { display: none; }
.is-sent .form, .is-sent > h3 { display: none; }
.is-sent .thanks { display: block; animation: thanks-in var(--dur-enter) var(--ease) both; }
.thanks:focus { outline: none; }
.thanks h3 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
.thanks .lead { color: var(--color-text-muted); }
@keyframes thanks-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--section-y) 0 var(--space-5); }
.footer-logo { width: min(100%, 940px); height: auto; margin-bottom: var(--space-5); }
.footer-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: var(--space-3); padding-top: var(--space-4); background: linear-gradient(var(--color-divider-dark), var(--color-divider-dark)) left top / 100% 1px no-repeat; }
.footer-row .tagline { grid-column: 1 / 6; color: var(--color-text-muted-dark); }
.footer-links { grid-column: 7 / 13; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); justify-content: flex-end; }
.footer-links a { padding: 12px 0; }
.footer-row .small { grid-column: 1 / -1; color: var(--color-text-muted-dark); }
.footer-privacy { display: inline-block; padding: 12px 0; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.footer-privacy:hover { color: var(--color-peach); text-decoration-thickness: 2px; }

.frame img.pos-right { object-position: right center; }
.nowrap { white-space: nowrap; }
section:focus { outline: none; }

/* ---------- Motion: hidden start states only when motion is allowed and JS is running ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) [data-reveal], .js:not(.motion-off) .traveller { opacity: 0; }
}
/* Phone hero globe entrance. Pure CSS so it plays from first paint rather than waiting for
   the motion script: the globe rises into place while the light sweeps round its rim
   (turning the globe image turns its baked-in light), then the photo fades in. About 1.5s.
   main.js takes over for the ongoing motion once these have finished. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .porthole .lens[data-reveal] { opacity: 1; }
  .porthole .lens { animation: globe-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both, globe-fade 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .porthole .lens-globe { animation: globe-sweep 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .porthole .lens-pic img { animation: globe-fade 0.8s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
}
@keyframes globe-rise { from { transform: translateY(56px) scale(0.9); } }
@keyframes globe-fade { from { opacity: 0; } }
@keyframes globe-sweep { from { transform: rotate(-150deg); } }

/* Room inside each line mask for descenders and the blur */
.line-mask { padding: 0.06em 0 0.14em; margin: -0.06em 0 -0.14em; }
/* With GSAP running, the experiences stage is animated by script rather than CSS */
.stage.is-scripted img { transition: none; opacity: 0; transform: none; }
.stage.is-scripted img.is-active { opacity: 1; }

/* ?debug badge */
.debug-badge { position: fixed; right: 12px; bottom: 12px; z-index: 400; background: #FFE36E; color: #1B1B1F; font: 600 12px/1 system-ui, sans-serif; padding: 8px 10px; border-radius: 6px; pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid > *, .footer-row > * { grid-column: 1 / -1 !important; }
  .hero-inner { padding-bottom: 48px; }
  .porthole { order: -1; justify-self: center; width: min(78vw, 420px); margin: 0 0 24px; }
  .proof { padding-bottom: 64px; }
  .stat { margin-bottom: var(--space-5); }
  .stat:last-child { margin-bottom: 0; }
  :root { --panel-radius: 24px; }
  .split, .split--flip { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .split .frame, .split--flip .frame { grid-column: 1; grid-row: 1; border-radius: 0; }
  .split > div, .split--flip > div { grid-column: 1; grid-row: 2; padding: 0 var(--gutter); }
  /* Phones: heading, then the names, then photo and caption, so the photo a name
     changes is on screen at the same time as the name */
  .exp .grid { display: flex; flex-direction: column; }
  .exp-left { display: contents; }
  .exp-left .sec-head { order: 1; }
  .exp .index { order: 2; margin-top: var(--space-head-content); }
  .exp-right { order: 3; margin-top: var(--space-4); align-self: stretch; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-head { position: static; margin-bottom: var(--space-head-content); }
  .faq-head h2 { max-width: none; }
  .faq-item summary { padding-right: var(--space-5); }
  .faq-a { padding-right: 0; }
  .closing-text { position: static; margin-bottom: var(--space-5); }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .form { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
}