/* Smart Lancs
   Palette taken from the brand gradient ("Crimson sky"). */
:root {
  --crimson: #9B0000;
  --wine: #2B0510;
  --wine-ink: #4A0A16;
  --salmon: #F29A8C;
  --mist: #FFD9D0;
  --paper: #FFF3EF;
  --paper-muted: rgba(255, 243, 239, 0.74);
  --paper-faint: rgba(255, 243, 239, 0.22);
  --live: #B8F0C8;
  --build: #FFD58A;
  --research: #C9C3FF;

  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1280px;
  --bar-h: 64px;
  --bar-top: 16px;
  --veil: 0.8;
  /* Page content lines up with the logo inside the glass bar */
  --content-inset: calc(var(--gutter) + 22px);
  --content-max: calc(var(--max) + var(--gutter) * 2);

  /* Glass material: animated by GSAP on load ("materialize") */
  --glass-blur: 24px;
  --glass-alpha: 0.1;   /* white sheen */
  --glass-tint: 0.32;   /* wine tint keeps white text legible over the light side of the gradient */
}

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

/* The base colour matches what each page looks like once the sky and veil have painted,
   so a frame before they appear (page load, WebGL warm-up) is never a red flash. */
html { -webkit-text-size-adjust: 100%; background: #3F040D; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--paper);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--mist);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--wine-ink);
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Page transitions ----------
   Cross-document view transitions: the browser crossfades between pages instead of
   blanking and repainting. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
/* Note: the header deliberately has no view-transition-name. Naming it would make it a
   backdrop root and kill the glass blur; it is identical on every page, so the root
   crossfade already reads as static. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Elements the intro animates start hidden until GSAP has set them up,
   so they never paint once and then vanish. (.anim-done is also set by a fallback timer.) */
.js:not(.anim-done) :is(.hero-title, .hero-lede, .hero-actions, .page-title, .page-intro) {
  visibility: hidden;
}

/* ---------- Background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg > div { position: absolute; inset: 0; }
.bg-field { background: linear-gradient(90deg, #9B0000 0%, #A21416 45%, #F29A8C 75%, #F0998A 100%); }
.bg-field canvas { display: block; width: 100%; height: 100%; }
.no-webgl .bg-field { background: #FFD9D0 url("../assets/gradient.jpg") center / cover no-repeat; }
.bg-grain {
  background: url("../assets/grain.png") repeat;
  background-size: 256px;
  opacity: 0.125;
  mix-blend-mode: overlay;
}
/* Inner pages sit on a wine veil for legibility; the home page shows the pure gradient. */
.bg-veil {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(155, 0, 0, 0.35), transparent 60%),
    var(--wine);
  opacity: var(--veil);
}
/* Home starts on the pure sky; JS deepens the veil as you scroll into Approach. */
.page-home { --veil: var(--veil-start, 0); }

/* ---------- Glass navigation bar ---------- */
.site-header {
  position: fixed;
  top: max(var(--bar-top), env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 50;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.glass-bar {
  position: relative;
  isolation: isolate;
  max-width: var(--max);
  height: var(--bar-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 8px 0 22px;
  border-radius: 22px;
  pointer-events: auto;
}
/* The material lives on a pseudo-element so the bar itself is not a backdrop root:
   the mobile sheet inside it can then blur the page too. */
.glass-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--glass-alpha) + 0.06)), rgba(255, 255, 255, var(--glass-alpha))),
    rgba(43, 5, 16, var(--glass-tint));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),   /* light catching the top edge */
    0 12px 32px -8px rgba(43, 5, 16, 0.35);
}

.brand { display: block; flex-shrink: 0; border-radius: 6px; }
.brand img { height: 30px; width: auto; }

.site-nav { position: relative; }
.site-nav ul { position: relative; display: flex; gap: 2px; }
.site-nav a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #fff; }

/* Pill that marks the current page and follows the pointer */
.nav-indicator {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
}
/* Without JS, still mark the current page */
.no-js .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 0.9375rem var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle-bars,
.menu-toggle-bars::before {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(.3, .7, .2, 1);
}
.menu-toggle-bars { position: relative; transform: translateY(-3px); }
.menu-toggle-bars::before { content: ""; position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(-6px) rotate(-90deg); }

/* Instant press feedback (on pointer-down, not release) */
.site-nav a:active,
.menu-toggle:active,
.btn:active,
.filter:active,
.brand:active { transform: scale(0.97); transition: transform 100ms ease-out; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 1rem var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.btn-solid { background: var(--paper); color: var(--wine-ink); }
.btn-solid:hover { background: var(--mist); }
.btn-ghost { border-color: var(--paper-muted); color: var(--paper); }
.btn-ghost:hover { background: rgba(255, 243, 239, 0.12); border-color: var(--paper); }
.btn-small { min-height: 44px; padding: 0 20px; background: var(--paper); color: var(--wine-ink); }
.btn-small:hover { background: var(--mist); }

/* ---------- Home: full-screen hero, then Approach ---------- */
.home {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--content-inset) clamp(96px, 14vh, 160px);
}
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* stop the logo track from widening the page */
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--bar-top) + var(--bar-h) + 24px);
}
.hero-copy { align-self: center; padding-block: 32px; }
.home-section {
  --section-gap: clamp(140px, 22vh, 240px);
  --panel-bleed: clamp(20px, 3.5vw, 56px);
  scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + 24px);
  padding-top: clamp(64px, 10vh, 112px);
}
.home-section + .home-section { margin-top: var(--section-gap); padding-top: 0; }

/* Alternate sections sit on a large translucent panel, the same material family as
   the nav bar, so the page reads as distinct chapters rather than one long column.
   The panel bleeds outward so its content stays aligned with the open sections. */
.home-section.home-section--panel {
  position: relative;
  margin-inline: calc(var(--panel-bleed) * -1);
  padding: clamp(56px, 8vw, 112px) var(--panel-bleed);
  border-radius: clamp(24px, 3vw, 40px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(43, 5, 16, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -40px rgba(20, 0, 6, 0.55);
  scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + 16px);
}
.home-section--panel .page-head { margin-bottom: clamp(48px, 7vh, 80px); }
/* Keep the hero copy on the red side of the sky (roughly the left 54% of the
   viewport). The box is sized in viewport terms, accounting for the centred
   content column, and the headline scales to its width via container units. */
.hero-copy {
  --red-edge: 54vw;
  --content-left: calc(max((100vw - var(--content-max)) / 2, 0px) + var(--content-inset));
  width: min(100%, calc(var(--red-edge) - var(--content-left)));
  container-type: inline-size;
}
.hero-title {
  font-weight: 300;
  font-size: clamp(1.25rem, 7.4cqi, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .line-inner { display: block; }
.hero-title .line-nowrap { white-space: nowrap; }
.hero-title .line-strong { font-weight: 700; letter-spacing: -0.03em; }
/* Supporting line inside the h1, set at a heading-3 scale relative to the main line */
.hero-title .line-sub {
  margin-top: 0.6em;
  font-size: max(0.5em, 1rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mist);
}
.hero-lede {
  max-width: 42ch;
  margin-top: clamp(20px, 3.5vh, 32px);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  color: var(--paper-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4.5vh, 40px); }

/* ---------- Inner pages ---------- */
.page-main {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(var(--bar-top) + var(--bar-h) + clamp(56px, 10vh, 112px)) var(--content-inset) clamp(96px, 14vh, 160px);
}
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(56px, 9vh, 96px);
}
.page-title {
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.page-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.page-title .line-inner { display: block; }
.page-intro { max-width: 52ch; font-size: 1.1875rem; color: var(--paper-muted); }
.block + .block { margin-top: clamp(88px, 12vh, 140px); }
.sub-title { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 32px; }

/* ---------- Approach ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-top: 40px;
}
.steps::before,
.steps-progress {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--paper-faint);
}
.steps-progress { background: var(--mist); transform-origin: left; transform: scaleX(0); }
.step-num {
  display: block;
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--salmon);
  margin-bottom: 24px;
}
.step h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; }
.step p { color: var(--paper-muted); max-width: 32ch; }

.services { margin-top: clamp(96px, 12vh, 140px); }
.services-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
}
.services-list > div { padding: 28px 0; border-top: 1px solid var(--paper-faint); }
.services-list dt { font-size: 1.25rem; font-weight: 500; margin-bottom: 8px; }
.services-list dd { color: var(--paper-muted); max-width: 34ch; }

.engagements { margin-top: clamp(96px, 12vh, 140px); }
.engagement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.engagement {
  padding: 32px;
  background: rgba(255, 243, 239, 0.05);
  border-top: 2px solid var(--salmon);
}
.engagement h4 { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; }
.engagement-meta { margin: 4px 0 20px; font-weight: 500; color: var(--mist); }
.engagement p:last-child { color: var(--paper-muted); }

/* ---------- Portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--paper-faint);
  background: transparent;
  color: var(--paper);
  font: 500 0.9375rem var(--font);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.filter:hover { border-color: var(--paper-muted); }
.filter.is-active { background: var(--paper); color: var(--wine-ink); border-color: var(--paper); }

.cases { border-top: 1px solid var(--paper-faint); }
.case { border-bottom: 1px solid var(--paper-faint); overflow: hidden; }
.case-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) 32px;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
}
.case-client { font-size: 0.9375rem; font-weight: 500; color: var(--mist); }
.case-title {
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.case-toggle:hover .case-title { transform: translateX(8px); }
.case-icon { position: relative; width: 20px; height: 20px; justify-self: end; }
.case-icon::before,
.case-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.35s ease;
}
.case-icon::after { transform: rotate(90deg); }
.case-toggle[aria-expanded="true"] .case-icon::after { transform: rotate(0deg); }
.case-body { overflow: hidden; }
.case-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 0 0 40px;
  margin-left: calc(30% + 7px);
}
.case-cols h4 { font-size: 0.9375rem; font-weight: 500; color: var(--mist); margin-bottom: 8px; }
.case-cols p { color: var(--paper-muted); font-size: 1rem; }

/* ---------- Projects ---------- */
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.project { padding: 36px 0; border-top: 1px solid var(--paper-faint); }
.project h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; letter-spacing: -0.025em; margin: 16px 0 10px; }
.project p { color: var(--paper-muted); max-width: 44ch; }
.project-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; }
.project-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-live { color: var(--live); }
.status-build { color: var(--build); }
.status-research { color: var(--research); }

/* ---------- Testimonial ---------- */
.testimonial figure { max-width: 30ch; font-size: clamp(1.75rem, 3.6vw, 3.25rem); }
.testimonial blockquote p {
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-indent: -0.4em;
}
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { margin-top: 28px; font-size: 1rem; font-weight: 500; color: var(--mist); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
.about-story p { max-width: 58ch; color: var(--paper-muted); }
.about-story p + p { margin-top: 20px; }
.about-story .about-lead {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 32px;
}
.values-list li { padding: 20px 0; border-top: 1px solid var(--paper-faint); }
.values-list h4 { font-size: 1.125rem; font-weight: 500; margin-bottom: 4px; }
.values-list p { color: var(--paper-muted); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--paper-faint); max-width: 920px; }
.faq-list details { border-bottom: 1px solid var(--paper-faint); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: 1.25rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.75rem; font-weight: 300; line-height: 1; transition: transform 0.3s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 28px; max-width: 64ch; color: var(--paper-muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
.contact-info .section-title { margin-bottom: 24px; }
.contact-details { margin-top: 48px; display: grid; gap: 20px; }
.contact-details dt { font-size: 0.875rem; font-weight: 500; color: var(--mist); }
.contact-details dd { font-size: 1.125rem; }
.contact-details a { text-decoration: none; border-bottom: 1px solid var(--paper-faint); }
.contact-details a:hover { border-color: var(--paper); }

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  align-content: start;
}
.field { display: grid; gap: 8px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.9375rem; font-weight: 500; }
.optional { font-weight: 400; color: var(--paper-muted); }
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--paper-muted);
  border-radius: 0;
  color: var(--paper);
  font: 400 1.0625rem var(--font);
  transition: border-color 0.25s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FFF3EF' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right 4px center no-repeat; }
.field select option { color: #2B0510; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--mist); box-shadow: 0 1px 0 var(--mist); }
.field [aria-invalid="true"] { border-bottom-color: var(--build); }
.field-error { min-height: 0; font-size: 0.875rem; color: var(--build); }
.field-error:empty { display: none; }
.field-check { grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.field-check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--mist); }
.field-check label { font-weight: 400; font-size: 0.9375rem; color: var(--paper-muted); }
.field-check .field-error { grid-column: 2; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form-status { color: var(--mist); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 64px var(--content-inset) 40px;
  border-top: 1px solid var(--paper-faint);
}
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr minmax(0, 360px);
  gap: 48px;
  align-items: start;
}
.footer-brand { display: block; width: clamp(160px, 18vw, 220px); }
.footer-brand img { width: 100%; height: auto; }
.footer-nav ul { display: grid; gap: 10px; }
.footer-nav a, .legal a { text-decoration: none; color: var(--paper-muted); }
.footer-nav a:hover, .legal a:hover { color: var(--paper); }
.footer-newsletter p { color: var(--paper-muted); font-size: 0.9375rem; }
.newsletter-form { display: flex; gap: 8px; margin-top: 16px; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--paper-faint);
  background: rgba(255, 243, 239, 0.06);
  color: var(--paper);
  font: 400 1rem var(--font);
}
.newsletter-form input::placeholder { color: var(--paper-muted); }
.newsletter-status { margin-top: 10px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  font-size: 0.875rem;
  color: var(--paper-muted);
}
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Vision & mission ---------- */
.mission { display: grid; gap: clamp(56px, 8vh, 96px); }
.mission-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mist);
  margin-bottom: 20px;
}
.vision-statement {
  max-width: 24ch;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.mission-body {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 16px 64px;
  padding-top: clamp(32px, 5vh, 48px);
  border-top: 1px solid var(--paper-faint);
}
.mission-body .mission-label { margin: 0; }
.mission-statement {
  max-width: 58ch;
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.55;
}

/* ---------- Who we work with ---------- */
.audience-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.audience { padding-top: 24px; border-top: 2px solid var(--salmon); }
.audience h4 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.audience p { color: var(--paper-muted); max-width: 38ch; }

/* ---------- Funded / featured project ---------- */
.project--featured { grid-column: 1 / -1; }
.project--featured h3 { font-size: clamp(2rem, 4vw, 3.25rem); }
.project--featured p { max-width: 60ch; }
.project-funder { margin: -4px 0 10px; font-weight: 500; color: var(--mist); }

/* ---------- Worked with: logo strip at the foot of the hero ---------- */
/* Same width and corner radius as the glass nav bar (which spans the gutters, max var(--max)). */
.worked-with {
  min-width: 0;
  justify-self: center;
  width: min(var(--max), calc(100vw - 2 * var(--gutter)));
  margin-bottom: clamp(24px, 6vh, 64px);    /* lift the strip off the bottom edge */
}
.worked-with-title {
  margin-bottom: 12px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--paper);
  opacity: 0.85;
}
.marquee {
  position: relative;
  isolation: isolate;
  padding: 18px 0;
  border-radius: 22px;
}
/* Tinted glass, matching the nav bar, so white logos stay legible over the light side of the sky */
.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)),
    rgba(43, 5, 16, 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 32px -8px rgba(43, 5, 16, 0.35);
}
/* The fade mask lives on an inner viewport so it doesn't fade the glass itself */
.marquee-viewport {
  overflow: hidden;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-group { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); }
.partner { flex: none; }
/* Seal-style logos get their name alongside, set like a wordmark */
.partner--labelled { display: flex; align-items: center; gap: 12px; }
.partner-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: 0.92;
  white-space: nowrap;
}
.partner-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 182px;
  object-fit: contain;
  filter: url(#logo-white);
  opacity: 0.92;
}
/* Logos supplied as pre-made white artwork skip the filter (it would turn pure white transparent) */
.partner-logo img.is-white { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee-viewport { -webkit-mask-image: none; mask-image: none; padding-inline: 24px; }
  .marquee-track { animation: none; width: auto; }
  .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: 20px; padding: 0; }
  .marquee-group[aria-hidden="true"] { display: none; }
}

/* ---------- Team ---------- */
.team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.profile { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 28px; align-items: start; }
.profile-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(242, 154, 140, 0.55), transparent 60%),
    rgba(255, 243, 239, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
}
.profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-initials { font-size: 4rem; font-weight: 300; letter-spacing: -0.04em; color: rgba(255, 243, 239, 0.55); }
.profile-name { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.profile-role { margin-top: 4px; font-weight: 500; color: var(--mist); }
.profile-bio { margin-top: 14px; color: var(--paper-muted); max-width: 42ch; }
.profile-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--paper-faint);
}
.profile-link:hover { border-color: var(--paper); }

/* Overrides for the multi-page layout */
.services, .engagements { margin-top: 0; }
.testimonial { padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .services-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engagement-grid { grid-template-columns: 1fr; }
  .case-cols { margin-left: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-newsletter { grid-column: 1 / -1; }
  .team-list { grid-template-columns: 1fr; }
  .site-nav a { padding-inline: 12px; }
}

@media (max-width: 860px) {
  :root { --bar-h: 58px; --bar-top: 12px; }
  .page-home { --veil-start: 0.45; }
  :root { --content-inset: calc(var(--gutter) + 18px); }
  .glass-bar { padding: 0 6px 0 18px; border-radius: 20px; }
  .brand img { height: 26px; }
  .menu-toggle { display: inline-flex; }

  /* The nav becomes a glass sheet that grows out of the bar, anchored top-right */
  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    padding: 10px;
    border-radius: 22px;
    background: rgba(43, 5, 16, 0.55);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 48px -12px rgba(20, 0, 6, 0.5);
    transform-origin: top right;
    visibility: hidden;
    opacity: 0;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; }
  .site-nav ul { flex-direction: column; gap: 2px; }
  .site-nav a { padding: 14px 16px; font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; border-radius: 14px; }
  .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); }
  .nav-indicator { display: none; }

  .page-head,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .case-toggle { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 16px; }
  .case-client, .case-title { grid-column: 1; }
  .case-icon { grid-column: 2; grid-row: 1 / span 2; }
  .case-cols { grid-template-columns: 1fr; gap: 20px; }
  .project-list { grid-template-columns: 1fr; }
  .team-list { grid-template-columns: 1fr; }
  .audience-list { grid-template-columns: 1fr; gap: 32px; }
  .mission-body { grid-template-columns: 1fr; }
  .hero-copy { width: 100%; }
  .partner-logo img { height: 30px; max-width: 140px; }
  .partner-label { font-size: 0.75rem; }
  .marquee { border-radius: 20px; padding: 14px 0; }
}

@media (max-width: 560px) {
  .steps, .services-list { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  .profile { grid-template-columns: 1fr; gap: 20px; }
  .profile-photo { width: 160px; }
  .profile-initials { font-size: 3rem; }
}

/* Very short screens: let the home page scroll rather than clip */
@media (max-height: 560px) {
  .hero { min-height: 0; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .marquee::before { background: var(--wine); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-bar::before { background: var(--wine); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav { background: var(--wine); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass-bar::before { background: #1C0309; border-color: #fff; }
  .site-nav a { color: #fff; }
  .page-intro, .hero-lede { color: var(--paper); }
}