/* ============================================================
   Joe Simmons — Portfolio homepage
   Built from Figma. Plain HTML + CSS, no framework.
   Reference canvas: 1366px wide.
   ============================================================ */

:root {
  --blue: #0067ff;
  --blue-hover: #0055d6;
  /* button accent colour — flipped page-wide via [data-accent]: Blue (default) / Orange */
  --accent: var(--blue);
  --accent-hover: var(--blue-hover);
  --ink: #101010;
  --email: #c0cadb;
  --sans: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Volkhov", Georgia, "Times New Roman", serif;

  /* badge outline colours, pulled from the Figma ovals */
  --badge-amber: #ffb833;
  --badge-green: #4cca00;
  --badge-teal: #1f9a8b;
  --badge-red: #d4543d;
  --badge-purple: #6f4ace;

  /* sticky header */
  --header-h: 80px;
  --header-h-scrolled: 62px;

  /* hero content gutter + headline width (the floating pill matches these) */
  --gutter: 108px;
  --h1-width: 539px;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: calc(var(--header-h-scrolled) + 16px);
}

body {
  font-family: var(--sans);
  color: #fff;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 728px;
  color: #fff;
  overflow: visible;
  background-image:
    linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)),
    url("images/hero.jpg");
  background-size: cover;
  background-position: center 28%;
}

/* --- sticky header (fixed, transparent over hero) --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--header-h);
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height 0.28s ease, background 0.28s ease,
    border-color 0.28s ease, box-shadow 0.28s ease, transform 0.3s ease;
}

.site-header__inner {
  width: 100%;
  max-width: 1206px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* subtle frosted-glass condense once the page is scrolled */
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: rgba(16, 16, 16, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.075px;
  white-space: nowrap;
}
.nav__logo { display: block; width: 24px; height: 24px; flex: 0 0 auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 44px;
}

.nav__links a {
  font-weight: 600;
  font-size: 16px;
  opacity: 0.65;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav__links a:hover,
.nav__links a.is-active {
  opacity: 1;
}

/* mobile hamburger — hidden on desktop, shown ≤860px (see mobile media query) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin: -8px -6px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 0 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* bars morph into an X while the menu is open */
html.is-nav-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.is-nav-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
html.is-nav-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile-only "‹ Back" control (drill-down) — hidden everywhere except the mobile sub-view */
.nav__back { display: none; }

/* --- hero copy --- */
.hero__content {
  position: absolute;
  left: var(--gutter);
  top: 228px;
  width: 665px;
  max-width: calc(100% - 216px);
}

.hero__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -1px;
  max-width: var(--h1-width);
}

.hero__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 25px;
  line-height: 37px;
  margin-top: 16px;
}

.hero__body {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  max-width: 584px;
  margin-top: 24px;
}

/* --- scroll cue --- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  transition: transform 0.2s ease, opacity 0.45s ease, visibility 0.45s ease;
}

.hero__scroll:hover {
  transform: translateX(-50%) translateY(3px);
}

/* fade the cue out once the visitor starts scrolling — toggle via [data-herofade] */
html[data-herofade="on"].hero-scrolled .hero__scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* hero cue label copy — switch via [data-herolabel] (text swapped in JS) */
.hero__scroll-label {
  transition: opacity 0.2s ease;
}
/* action-style copy ("Scroll", "Scroll to explore") reads as a quiet label */
[data-herolabel="scroll"] .hero__scroll-label,
[data-herolabel="explore"] .hero__scroll-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}
[data-herolabel="none"] .hero__scroll-label {
  display: none;
}

/* ----------------------------------------------------------------
   Hero scroll-cue ICON — design variations (switch via [data-heroicon])
   Drawn in CSS so they share one element; all use currentColor.
   Patterns informed by Mobbin: chevron (Telescope, Maze),
   bold arrow (Instagram), and the mouse/scroll-wheel capsule.
   ---------------------------------------------------------------- */
.hero__scroll-icon {
  position: relative;
  flex: none;
  color: currentColor;
}

/* arrow — a clean down arrow (shaft + head) */
[data-heroicon="arrow"] .hero__scroll-icon {
  width: 2px;
  height: 22px;
  background: currentColor;
  border-radius: 2px;
}
[data-heroicon="arrow"] .hero__scroll-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, 1px) rotate(45deg);
}

/* chevron — a single down chevron (lighter, the most common cue) */
[data-heroicon="chevron"] .hero__scroll-icon {
  width: 16px;
  height: 16px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

/* circle — chevron inside a ring (button-like) */
[data-heroicon="circle"] .hero__scroll-icon {
  width: 38px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.85;
}
[data-heroicon="circle"] .hero__scroll-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
}

/* mouse — scroll-wheel capsule with a wheel that drifts down */
[data-heroicon="mouse"] .hero__scroll-icon {
  width: 24px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 13px;
  opacity: 0.8;
}
[data-heroicon="mouse"] .hero__scroll-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: currentColor;
  transform: translateX(-50%);
  animation: hero-wheel 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hero-wheel {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  18%  { opacity: 1; }
  55%  { opacity: 1; transform: translateX(-50%) translateY(11px); }
  85%  { opacity: 0; transform: translateX(-50%) translateY(11px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* ----------------------------------------------------------------
   Hero scroll-cue MOTION — switch via [data-heroarrow]
   Kept: float (gentle continuous drift) + nudge (hover-only).
   ---------------------------------------------------------------- */
@keyframes hero-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
/* float — the whole "My work" cue drifts gently */
[data-heroarrow="float"] .hero__scroll { animation: hero-float 2.6s ease-in-out infinite; }
/* nudge — no loop; the base :hover nudge is the only motion */

@media (prefers-reduced-motion: reduce) {
  [data-heroarrow] .hero__scroll,
  .hero__scroll-icon::after { animation: none !important; }
}

/* ============================================================
   "MY WORK" NAV DROPDOWN
   ============================================================ */
.nav__item--menu {
  position: relative;
}

/* trigger button styled to match the other nav links */
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  opacity: 0.65;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] {
  opacity: 1;
}

/* "Get in touch" call-to-action */
.nav__cta {
  display: inline-flex;
  align-items: center;
  opacity: 1;
  padding: 8px 16px;
  line-height: 1;
  border: 1px solid transparent; /* baseline; fill + border come from the [data-cta] variant */
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---- NAV BUTTON (CTA) STYLE VARIANTS — toggled via [data-cta] on <html> ---- */
/* soft — borderless translucent fill that strengthens on hover */
[data-cta="soft"] .nav__cta {
  background: rgba(255, 255, 255, 0.1);
}
[data-cta="soft"] .nav__cta:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* accent — filled with the brand accent colour; darkens on hover */
[data-cta="accent"] .nav__cta {
  background: var(--accent);
  color: #fff;
}
[data-cta="accent"] .nav__cta:hover {
  background: var(--accent-hover);
}
/* link — no button at all; renders exactly like the other nav links (Home / About me) */
[data-cta="link"] .nav__cta {
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
[data-cta="link"] .nav__cta:hover {
  background: transparent;
  opacity: 1;
}

/* ============================================================
   MY WORK — MEGA MENU  (connects to the header; styled via [data-connect])
   It is a sibling of the bar, spanning the content width (gutter-to-gutter),
   with only its BOTTOM corners rounded so it reads as part of the header.
   No notch, no close button. Rows layout always on; mobile = bottom-sheet.
   ============================================================ */
.work-menu {
  position: absolute;
  top: 68px; /* flush under the pill: header top 14 + (80-56)/2 + 56 */
  left: var(--gutter);
  right: var(--gutter);
  z-index: 50;
  padding: 30px 40px 38px;
  text-align: left;
  color: #fff;
  pointer-events: auto; /* the header is pointer-events:none in pill mode */
  /* frosted glass like the nav pill, + a top scrim so heading/first-row text stays crisp */
  background:
    linear-gradient(180deg, rgba(12, 12, 16, 0.35), rgba(12, 12, 16, 0) 120px),
    rgba(20, 20, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16); /* lit top edge — ties to the pill seam */
  border-radius: 0 0 18px 18px; /* rounded bottom only — reads as part of the bar */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* lit top edge only — no drop-shadow */
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

.work-menu[hidden] {
  display: none;
}

.work-menu__cols {
  display: flex;
  flex-direction: column;
}

/* Columns and Sections use different content groupings — show only the active one */
[data-layout="columns"] .work-menu__cols--sections,
[data-layout="sections"] .work-menu__cols--columns {
  display: none;
}

.work-menu__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0;
}
/* hairline divider between sections */
.work-menu__col + .work-menu__col {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* cards container — stacked on mobile, an auto-fill grid on desktop (see media query) */
.work-menu__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-menu__heading {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.81px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 4px;
  padding-left: 12px;
}

/* project card / link */
.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  white-space: normal;
  transition: background 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease, color 0.18s ease;
}

.work-card:focus-visible {
  outline: none;
}

/* ============================================================
   CARD HOVER VARIANTS  (toggled via [data-cardhover] on <html>)
   Each restyles .work-card on hover / keyboard focus. The extra space
   around the cards (padding) is shared and lives in the layout rules below.
   ============================================================ */
/* soft (default) — a clean translucent fill */
[data-cardhover="soft"] .work-card:hover,
[data-cardhover="soft"] .work-card:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.work-card__title {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}

.work-card__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  opacity: 0.6;
  margin: 4px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* category pills */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.tag--gold   { background: #97761c; }
.tag--blue   { background: #1f799a; }
.tag--teal   { background: #1f9a8b; }
.tag--purple { background: #5c26a4; }
.tag--rust   { background: #bc552f; }
.tag--slate  { background: #49464d; }

/* ============================================================
   MENU LAYOUT + CONNECTION  (desktop only; mobile keeps the bottom-sheet)
   layout  (columns | sections) via [data-layout] — each has its own content block
   connect (expand | gap)       via [data-connect]
   ============================================================ */
@media (min-width: 861px) {
  .work-menu__heading { margin: 0; }

  /* ---- LAYOUT: columns — 3 vertical category columns, underlined headings ---- */
  [data-layout="columns"] .work-menu__cols--columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  [data-layout="columns"] .work-menu__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }
  [data-layout="columns"] .work-menu__col + .work-menu__col { border-top: none; }
  [data-layout="columns"] .work-menu__heading {
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.81px;
    color: rgba(255, 255, 255, 0.5);
  }
  [data-layout="columns"] .work-menu__cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  [data-layout="columns"] .work-card {
    padding: 12px;
    margin: 0 -12px;
  }
  [data-layout="columns"] .work-card__title { font-size: 16px; }
  [data-layout="columns"] .work-card__desc {
    font-size: 16px;
    margin: 2px 0 8px;
    -webkit-line-clamp: 3;
  }

  /* ---- LAYOUT: sections — full-width underlined headings + aligned 4-col rows ---- */
  [data-layout="sections"] .work-menu__cols--sections {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  [data-layout="sections"] .work-menu__col {
    display: block;
    padding: 0;
  }
  [data-layout="sections"] .work-menu__col + .work-menu__col { border-top: none; }
  [data-layout="sections"] .work-menu__heading {
    width: 100%;
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.81px;
    color: rgba(255, 255, 255, 0.5);
  }
  /* 4 aligned columns: row 2 lines up under row 1, leaving a gap at the end of the shorter row */
  [data-layout="sections"] .work-menu__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 24px;
    align-items: start;
  }
  [data-layout="sections"] .work-card {
    padding: 12px;
    margin: 0 -12px;
  }
  [data-layout="sections"] .work-card__title { font-size: 16px; }
  [data-layout="sections"] .work-card__desc {
    font-size: 16px;
    margin: 2px 0 8px;
    -webkit-line-clamp: 3;
  }

  /* ---- CONNECTION: gap — small gap below the pill; the pill keeps its shape ---- */
  [data-connect="gap"] .work-menu {
    top: 80px;
    border-radius: 18px;
  }
}

/* ============================================================
   MENU OPEN ANIMATIONS  (toggled via [data-anim] on <html>)
   The menu is shown by removing [hidden]; a CSS animation plays each time it
   goes display:none → block, so it re-runs on every open.
   ============================================================ */
/* apple — the panel unfolds top-to-bottom (clip reveal) with Apple's smooth easing,
   while headings + cards fade and drop in with a soft stagger */
@keyframes wm-apple-panel {
  from { clip-path: inset(0 0 100% 0 round 18px); }
  to   { clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes wm-apple-item {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* frost ramps in slightly faster than the unfold, so the page-blur is fully present
   during the clip's slow tail instead of "snapping" in when the panel settles.
   (A static backdrop-filter isn't re-composited while clip-path animates — animating
   the filter value forces a per-frame update and removes the end-of-open pop.) */
@keyframes wm-apple-frost {
  from { -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
  to   { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
}
[data-anim="apple"] .work-menu {
  /* 'backwards' (not 'both') so neither the clip-path nor the partial blur is retained
     afterwards — both revert to the base (no clip, full blur) once the menu has opened */
  animation:
    wm-apple-panel 0.5s cubic-bezier(0.32, 0.72, 0, 1) backwards,
    wm-apple-frost 0.4s ease-out backwards;
}
[data-anim="apple"] .work-menu__heading {
  animation: wm-apple-item 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
  animation-delay: 0.1s;
}
[data-anim="apple"] .work-card {
  animation: wm-apple-item 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
}
[data-anim="apple"] .work-card:nth-child(1) { animation-delay: 0.14s; }
[data-anim="apple"] .work-card:nth-child(2) { animation-delay: 0.19s; }
[data-anim="apple"] .work-card:nth-child(3) { animation-delay: 0.24s; }
[data-anim="apple"] .work-card:nth-child(4) { animation-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] .work-menu,
  [data-anim] .work-menu__heading,
  [data-anim] .work-card { animation: none !important; }
}

/* ============================================================
   PAGE BACKDROP behind the open menu (Apple-style) — toggled via [data-scrim]
   Sits below the header (z 100) + menu (z 50, inside the header) so the pill and
   panel stay crisp, but above page content (z 1-3) so the rest of the page blurs
   and dims while the menu is open. Shown only while <html> has .is-menu-open.
   ============================================================ */
.page-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 8, 12, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
html[data-scrim="on"].is-menu-open .page-scrim,
html[data-scrim="on"].is-nav-open .page-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* clicking the dim dismisses — the outside-click handler closes the menu/panel */
}
@media (prefers-reduced-motion: reduce) {
  .page-scrim { transition: none; }
}

/* ============================================================
   HEADER  (toggled via [data-nav] on <html>)
   Both options use the SAME floating pill; they differ only on scroll:
     pill     — Static: the pill stays put
     autohide — the pill slides out of view on scroll-down, returns on scroll-up
   ============================================================ */

@media (min-width: 861px) {
/* FLOATING PILL — used by BOTH Static and Auto-hide; spans the page with equal gutters (desktop only) */
[data-nav="pill"] .site-header,
[data-nav="autohide"] .site-header {
  top: 14px;
  height: var(--header-h);
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none; /* the full-width bar must not blur — only the pill is visible */
  backdrop-filter: none;
  pointer-events: none; /* transparent gutters don't eat hero clicks */
}
[data-nav="pill"] .site-header__inner,
[data-nav="autohide"] .site-header__inner {
  pointer-events: auto;
  flex: 1;
  width: auto;
  max-width: none;
  margin: 0 var(--gutter); /* same distance from both edges → spans the page */
  height: 56px;
  padding: 0 28px 0 28px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55); /* translucent + blur below = frosted glass, clipped to the pill */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease,
    border-radius 0.28s ease, margin 0.28s ease;
}
[data-nav="pill"] .site-header.is-scrolled,
[data-nav="autohide"] .site-header.is-scrolled {
  height: var(--header-h);
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-nav="pill"] .site-header.is-scrolled .site-header__inner,
[data-nav="autohide"] .site-header.is-scrolled .site-header__inner {
  background: rgba(20, 20, 24, 0.72); /* a touch more opaque when scrolled; blur is inherited */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.18);
}
/* AUTO-HIDE — slide the floating pill fully out of view on scroll-down */
[data-nav="autohide"] .site-header.is-hidden {
  transform: translateY(calc(-100% - 24px));
}
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header,
  .work-menu,
  .btn,
  .hero__scroll,
  .nav__cta {
    transition: none !important;
  }
}

/* ============================================================
   CLIENT LOGO STRIP
   ============================================================ */
.logos {
  background: var(--ink);
  min-height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 40px;
}

.logos__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 40px;
  width: 100%;
  max-width: 1150px;
}

.logos__list img {
  opacity: 0.92;
  max-width: 100%; /* guard: scale down rather than overflow at extreme widths */
}

/* These SVGs use preserveAspectRatio="none" with no intrinsic ratio, so width AND
   height are set explicitly. Sized by CLASS (not nth-child) because .logos__pair uses
   display:contents below, which removes the pair <li> from the box tree. */
.logo--dyson   img { width: 95px;  height: 36px; }
.logo--airbus  img { width: 108px; height: 20px; }
.logo--zoe     img { width: 67px;  height: 24px; }
.logo--octopus img { width: 204px; height: 28px; }
.logo--virgin  img { width: 76px;  height: 44px; filter: brightness(0) invert(1); }  /* Virgin Media (raster → white) */

/* Logos are grouped in twos (Airbus·ZOE and Octopus·Virgin) so they wrap as units —
   Dyson + [Airbus·ZOE] / [Octopus·Virgin] (3+2), then Dyson alone over the two pairs
   (1+2+2). This avoids a single logo stranded mid-row. display:contents hoists each
   pair's spans to be direct flex items of .logos__list, so the wide 5-across
   space-between row is unchanged; the mobile override below makes each pair a unit. */
.logos__pair { display: contents; }

/* ============================================================
   WORK — full-bleed showcase sections
   ============================================================ */
.showcase {
  position: relative;
  min-height: 768px;
  overflow: hidden;
}

/* image lives on ::after (a transformable layer) so it can zoom on hover / drift on
   scroll — you can't transform a CSS background on the element itself. --bg inherits. */
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
}

.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}

/* ----- Project card on-enter REVEAL (rise) -----
   The caption AND the badge fade + rise in as they scroll into view. The
   IntersectionObserver watches each element (not the tall section) and toggles
   .is-inview on it, so the motion plays exactly when it's visible. */
/* Fade + rise only the title, button and badge — none have backdrop-filter, so they animate
   cleanly. The pills are deliberately NOT faded: an ancestor with opacity < 1 isolates
   backdrop-filter (the blur shows nothing, then pops in at opacity:1 — the "jolt"). Leaving
   the pills' container un-faded keeps the frost present from the moment the pills appear. */
[data-projscroll="rise"] .showcase__content .showcase__title,
[data-projscroll="rise"] .showcase__content .btn,
[data-projscroll="rise"] .badge {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Pills RISE with the rest but never FADE: an opacity fade on a backdrop-filter ancestor
   isolates the blur and makes it pop. A transform on the pill itself doesn't isolate its own
   backdrop, so the frost stays visible the whole way up. (transform timing on .showcase__tag.) */
[data-projscroll="rise"] .showcase__content .showcase__tag { opacity: 0; transform: translateY(16px); }
[data-projscroll="rise"] .showcase__content.is-inview .showcase__title,
[data-projscroll="rise"] .showcase__content.is-inview .btn,
[data-projscroll="rise"] .showcase__content.is-inview .showcase__tag,
[data-projscroll="rise"] .badge.is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-projscroll="rise"] .showcase__content .showcase__title,
  [data-projscroll="rise"] .showcase__content .btn,
  [data-projscroll="rise"] .showcase__content .showcase__tag,
  [data-projscroll="rise"] .badge { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.showcase__content {
  position: absolute;
  left: 120px;
  bottom: 120px; /* anchored to bottom-left; badge mirrors this on the bottom-right */
  z-index: 3;
  width: 451px;
  max-width: calc(100% - 360px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.showcase__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 34.6px;
}

/* laptop / device overlay (RemoteOne) */
.showcase__device {
  position: absolute;
  left: 54%;
  top: 47%;
  z-index: 2;
  width: 394px;
  max-width: 36%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

/* ============================================================
   BUTTON
   ============================================================ */
/* Accent themes: repoint the token; every accent-filled button follows it.
   A spread of oranges to compare (toggle via the "Button colour" switcher). */
[data-accent="tangerine"] { --accent: #e8702a; --accent-hover: #d1611f; }
[data-accent="amber"]     { --accent: #c47918; --accent-hover: #ab6912; }
[data-accent="marigold"]  { --accent: #d37c27; --accent-hover: #ba6c20; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.105px;
  padding: 16px 48px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ============================================================
   CIRCULAR ACHIEVEMENT BADGE
   ============================================================ */
.badge {
  position: absolute;
  bottom: 120px; /* mirrors .showcase__content's bottom-left insets on the bottom-right */
  right: 120px;
  z-index: 3;
  width: 234px;
  height: 234px;
  border-radius: 50%;
  border: 5px solid var(--badge-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  text-align: center;
}

.badge span {
  display: block;
  font-weight: 800;
  font-size: 27px;
  line-height: 34.6px;
  transform: rotate(-8deg);
}

.badge--amber  { --badge-color: var(--badge-amber); }
.badge--green  { --badge-color: var(--badge-green); }
.badge--teal   { --badge-color: var(--badge-teal); }
.badge--red    { --badge-color: var(--badge-red); }
.badge--purple { --badge-color: var(--badge-purple); }

/* ============================================================
   PROJECT-CARD TAG PILLS — a row of frosted pills (logo · discipline · sector)
   above the title. The brand pill shows the white client logo; if the logo file
   is missing, JS strips [data-logo] and the company name shows instead.
   ============================================================ */
.showcase__head { gap: 18px; } /* tags row → title spacing */
.showcase__tags {
  display: flex;
  flex-wrap: nowrap; /* one line on desktop; the row can extend past the text column (no badge collision) */
  align-items: center;
  gap: 10px;
}
.showcase__tag {
  flex: 0 0 auto; /* keep full size — don't shrink/wrap */
  display: inline-flex;
  align-items: center;
  height: 30px; /* fixed height so the logo pill and text pills line up exactly */
  padding: 0 14px;
  border-radius: 5px; /* matches the mono pill corners */
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.showcase__tag--brand { padding: 0 15px; }
.showcase__logo { display: block; }
/* explicit width+height per logo — these SVGs use preserveAspectRatio="none" (no intrinsic
   ratio), so BOTH must be set or the logo stretches. Ratios match the client-logo strip. */
.showcase[data-logo="zoe"] .showcase__logo { width: 44px; height: 16px; }
.showcase[data-logo="airbus"] .showcase__logo { width: 60px; height: 11.25px; }
/* octopus wordmark has low descenders (p/g/y) → nudge down a touch so the body looks
   vertically centred; relative offset keeps the pill height unchanged */
.showcase[data-logo="octopus"] .showcase__logo { width: 98px; height: 13.5px; position: relative; top: 2px; }
.showcase__brandname { display: none; font-weight: 800; }
/* We Can Move: horizontal wordmark in place of the square raster logo */
.showcase[data-logo="wecanmove"] .showcase__brandname--wcm {
  display: inline;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
}
/* logo missing → JS strips [data-logo] → show the company name instead of the broken logo */
.showcase:not([data-logo]) .showcase__logo { display: none; }
.showcase:not([data-logo]) .showcase__brandname { display: inline; }

/* ---- PILL STYLE VARIATIONS (switch via [data-pillstyle] on <html>) ----
   frosted = base .showcase__tag above (default, static frosted-look fill).
   mono = same fill, squared corners + monospace uppercase (below). */
.showcase__tag { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease; }

/* On resize-end the script briefly adds this class to force the frosted pills to re-raster.
   Works around a backdrop-filter compositing bug where the pill's border + text/logo can
   drop out (leaving just the blurred box) for several seconds after a window resize:
   removing then re-adding the blur rebuilds the layer and repaints the foreground. */
html.pills-repaint .showcase__tag {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* MONO — same fill as the default pill, but squared corners + monospace uppercase
   white text. Every pill one fixed height so the logo pill and text pills line up exactly. */
[data-pillstyle="mono"] .showcase__tag {
  height: 32px;
  padding: 0 13px;
  border-radius: 5px;
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ============================================================
   CONTACT FOOTER
   ============================================================ */
.contact {
  background: var(--ink);
  padding: 90px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact__photo {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  object-fit: cover;
}

.contact__title {
  font-weight: 700;
  font-size: 43px;
  line-height: 53px;
  letter-spacing: -1.04px;
  max-width: 580px;
  margin-top: 20px;
}

.contact__email {
  font-size: 18px;
  line-height: 29px;
  margin-top: 32px;
}

.contact__email strong {
  display: block;
  font-weight: 700;
}

.contact__email a {
  color: var(--email);
  font-weight: 300;
  transition: color 0.2s ease;
}

.contact__email a:hover {
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Below the design width: let the fixed-position blocks breathe */
@media (max-width: 1180px) {
  :root { --gutter: 48px; }
  .site-header__inner { padding: 0 32px; }
  .hero__content { max-width: calc(100% - 96px); }
  .showcase__content { left: 48px; max-width: calc(100% - 320px); }
  .badge { right: 48px; } /* match content's left inset */
}

/* Tablet / mobile: flow everything into a single column */
/* small-tablet / narrow desktop: the mega-menu columns get cramped, so trim the
   card body text a notch to keep descriptions from spilling onto a 3rd line */
@media (min-width: 861px) and (max-width: 1040px) {
  [data-layout="sections"] .work-card__title,
  [data-layout="columns"] .work-card__title { font-size: 15px; }
  [data-layout="sections"] .work-card__desc,
  [data-layout="columns"] .work-card__desc { font-size: 13.5px; line-height: 1.35; }
}

@media (max-width: 860px) {
  /* ============================================================
     MOBILE NAV — a floating PILL (closed) that opens to a FULL-PAGE menu.
     "My work" drills into a sub-view (‹ Back). Autohide preserved on the pill.
     ============================================================ */

  /* CLOSED: floating frosted pill (brand + hamburger) hovering at the top */
  .site-header,
  [data-nav="pill"] .site-header,
  [data-nav="autohide"] .site-header {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    height: auto;
    display: block;
    background: transparent;
    border: 0;
    pointer-events: none; /* transparent gutters don't eat taps */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform 0.3s ease;
  }
  .site-header__inner,
  [data-nav="pill"] .site-header__inner,
  [data-nav="autohide"] .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 16px;
    padding: 0 16px 0 20px;
    height: 52px;
    width: auto;
    max-width: none;
    border-radius: 999px;
    background: rgba(20, 20, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    pointer-events: auto;
  }
  .nav__brand { font-size: 16px; }
  .nav__toggle { display: flex; position: static; margin: 0; }
  .nav__back { display: none; }
  .site-nav { display: none; }   /* links live in the full-page menu */
  .work-menu { display: none; }  /* sub-view hidden until drilled */
  body.is-nav-locked { overflow: hidden; }

  /* autohide: the pill slides up on scroll-down (JS toggles .is-hidden) */
  [data-nav="autohide"] .site-header.is-hidden { transform: translateY(calc(-100% - 20px)); }

  /* ---- OPEN: the pill expands into a full-page dark menu ---- */
  html.is-nav-open .site-header,
  html.is-nav-open [data-nav="pill"] .site-header,
  html.is-nav-open [data-nav="autohide"] .site-header {
    position: fixed;
    inset: 0;
    top: 0;
    background: #0f0f10;
    overflow-y: auto;
    transform: none !important;
    pointer-events: auto;
  }
  html.is-nav-open .site-header__inner {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* top bar of the full-page menu: brand/back (left) + X (right), absolutely placed */
  html.is-nav-open .nav__brand { position: absolute; top: 16px; left: 24px; height: 42px; display: flex; align-items: center; font-size: 18px; }
  html.is-nav-open .nav__toggle { position: absolute; top: 16px; right: 18px; z-index: 60; }

  /* main link list */
  html.is-nav-open .site-nav { display: block; }
  .nav__item--menu { position: static; }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 72px 0 28px;
    border: 0;
  }
  .nav__links a,
  .nav__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 19px 24px;
    font-size: 19px;
    font-weight: 700;
    opacity: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav__links li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .nav__links a.nav__cta { padding: 19px 24px; border-radius: 0; opacity: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  /* "My work" drill indicator — switch the affordance via [data-arrow] */
  .nav__trigger::after {
    content: "";
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
  }
  /* chevron › (default) */
  [data-arrow="chevron"] .nav__trigger::after {
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  /* full arrow → */
  [data-arrow="arrow"] .nav__trigger::after {
    content: "\2192";
    font-size: 20px;
    line-height: 1;
  }
  /* chevron inside a circle */
  [data-arrow="circle"] .nav__trigger::after {
    content: "\203A";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding-bottom: 2px;
    font-size: 17px;
    line-height: 1;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
  }

  /* ---- DRILL-DOWN: "My work" sub-view ---- */
  .nav__back {
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }
  .nav__back-chev {
    width: 9px;
    height: 9px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
  html.is-nav-open.is-work-open .nav__back { display: inline-flex; position: absolute; top: 16px; left: 22px; height: 42px; align-items: center; z-index: 60; }
  html.is-work-open .nav__brand { display: none; }
  html.is-work-open .nav__links { display: none; }
  html.is-nav-open.is-work-open .work-menu { display: block; }
  .work-menu {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 72px 0 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    max-height: none;
    overflow: visible;
    animation: none !important;
  }

  /* ---- DRILL TRANSITION — how the projects sub-view enters; switch via [data-drill] ---- */
  html.is-nav-open .site-header { overflow-x: hidden; } /* clip the off-screen sliding panel */
  /* push & stagger keep BOTH views mounted and stacked so they can animate between each other */
  html.is-nav-open[data-drill="push"] .site-nav,
  html.is-nav-open[data-drill="stagger"] .site-nav,
  html.is-nav-open[data-drill="push"] .work-menu,
  html.is-nav-open[data-drill="stagger"] .work-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  html.is-nav-open[data-drill="push"] .work-menu,
  html.is-nav-open[data-drill="stagger"] .work-menu {
    display: block;
    pointer-events: none;
  }
  html.is-work-open[data-drill="push"] .work-menu,
  html.is-work-open[data-drill="stagger"] .work-menu { pointer-events: auto; }
  html.is-work-open[data-drill="push"] .site-nav,
  html.is-work-open[data-drill="stagger"] .site-nav { pointer-events: none; }
  /* keep the link list rendered (not display:none) so it can animate out */
  html.is-work-open[data-drill="push"] .nav__links,
  html.is-work-open[data-drill="stagger"] .nav__links { display: flex; }

  /* PUSH (and STAGGER) — list slides left & fades, projects slide in from the right (Back reverses it) */
  [data-drill="push"] .site-nav,
  [data-drill="push"] .work-menu,
  [data-drill="stagger"] .site-nav,
  [data-drill="stagger"] .work-menu {
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.34s ease;
  }
  [data-drill="push"] .work-menu,
  [data-drill="stagger"] .work-menu { transform: translateX(100%); opacity: 0; }
  html.is-work-open[data-drill="push"] .site-nav,
  html.is-work-open[data-drill="stagger"] .site-nav { transform: translateX(-28%); opacity: 0; }
  html.is-work-open[data-drill="push"] .work-menu,
  html.is-work-open[data-drill="stagger"] .work-menu { transform: translateX(0); opacity: 1; }

  /* STAGGER — the panel pushes in (above), then the rows cascade up into place.
     Disable the apple item animation here: in this mode the panel is mounted
     off-screen at nav-open, so that animation would play (and its forwards-fill
     would pin the rows visible) before the drill — killing the on-drill cascade. */
  [data-drill="stagger"] .work-menu__heading,
  [data-drill="stagger"] .work-card {
    animation: none !important;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  html.is-work-open[data-drill="stagger"] .work-menu__heading,
  html.is-work-open[data-drill="stagger"] .work-card {
    opacity: 1;
    transform: translateY(0);
  }
  /* One continuous top-to-bottom sweep that starts AFTER the ~0.34s push.
     --col-base offsets each category so the 2nd (and 3rd) only begin once the
     previous one's rows have finished — instead of all categories at once.
     The property inherits down to each heading + card within the column. */
  [data-drill="stagger"] .work-menu__col:nth-child(1) { --col-base: 0s; }
  [data-drill="stagger"] .work-menu__col:nth-child(2) { --col-base: 0.30s; }
  [data-drill="stagger"] .work-menu__col:nth-child(3) { --col-base: 0.60s; }
  html.is-work-open[data-drill="stagger"] .work-menu__heading { transition-delay: calc(0.32s + var(--col-base, 0s)); }
  html.is-work-open[data-drill="stagger"] .work-card:nth-child(1) { transition-delay: calc(0.37s + var(--col-base, 0s)); }
  html.is-work-open[data-drill="stagger"] .work-card:nth-child(2) { transition-delay: calc(0.42s + var(--col-base, 0s)); }
  html.is-work-open[data-drill="stagger"] .work-card:nth-child(3) { transition-delay: calc(0.47s + var(--col-base, 0s)); }
  html.is-work-open[data-drill="stagger"] .work-card:nth-child(4) { transition-delay: calc(0.52s + var(--col-base, 0s)); }

  /* INSTANT — no animation (display swap, handled by the base drill rules) */
  [data-drill="instant"] .site-nav,
  [data-drill="instant"] .work-menu { transition: none; }

  .work-menu__cols { gap: 0; }
  .work-menu__cards { gap: 0; } /* flush rows — no flex gap above each card */
  .work-menu__col { padding: 0; border: 0; gap: 0; }
  .work-menu__col + .work-menu__col { margin-top: 24px; border-top: 0; } /* section gap, no stray line */
  .work-menu__heading {
    padding: 22px 24px 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* underline below the heading */
  }
  .work-card {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 17px 24px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .work-menu .work-card:hover,
  .work-menu .work-card:focus-visible { background: none; }
  .work-card__title { font-size: 17px; font-weight: 700; }
  .work-card__desc { display: none; }
  /* tag → coloured TEXT (no pill) */
  .work-menu .tag {
    background: none !important;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
  }
  .work-menu .tag::before { content: "·\00a0\00a0"; color: rgba(255, 255, 255, 0.4); }
  .work-menu .tag--gold { color: #d2a44f; }
  .work-menu .tag--blue { color: #5aa9d6; }
  .work-menu .tag--teal { color: #36b9a4; }
  .work-menu .tag--purple { color: #a585e2; }
  .work-menu .tag--rust { color: #db7a45; }
  .work-menu .tag--slate { color: #a7a2ad; }

  .logos__list { flex-wrap: wrap; justify-content: center; gap: 22px 40px; }
  /* the pair becomes one wrapping unit so the last two logos drop to row 2 together;
     it wraps internally (Octopus over Virgin) at very small widths instead of overflowing */
  .logos__pair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 40px; }

  .hero {
    min-height: 0;
    padding-bottom: 96px;
  }
  .hero__content {
    position: static;
    width: auto;
    max-width: none;
    padding: 92px 24px 0;
  }
  .hero__title { font-size: 34px; line-height: 1.18; }
  .hero__subtitle { font-size: 21px; }
  .hero__scroll { bottom: 28px; }

  .showcase {
    min-height: 0;
    padding: 300px 24px 56px;
  }
  .showcase__content {
    position: relative; /* keep z-index:3 active so text/button stay ABOVE the ::before overlay (static would drop them behind it) */
    top: auto;          /* neutralise the desktop bottom:120px/left:120px — as relative offsets they'd shove the content */
    left: auto;
    bottom: auto;       /* off the section (overflow:hidden then clips it). Stay in normal flow. */
    width: auto;
    max-width: none;
  }
  .showcase__title { font-size: 24px; line-height: 1.25; }

  /* badge floats top-right (default); bigger than before for legibility on small screens */
  .badge {
    top: 28px;
    bottom: auto; /* override the desktop bottom-anchor */
    right: 24px;
    left: auto;
    width: 200px;
    height: 200px;
    padding: 22px;
  }
  .badge span { font-size: 22px; line-height: 1.25; }
  /* switchable on mobile only: align the badge to the top-left instead */
  [data-badgepos="left"] .badge { right: auto; left: 24px; }

  .showcase__device {
    top: 130px;
    left: 50%;
    max-width: 70%;
    width: 70%;
  }
  .showcase--device { padding-top: 360px; }

  /* tag pills scale down + may wrap on mobile (logo keeps its explicit per-logo ratio) */
  .showcase__tags { flex-wrap: wrap; }
  .showcase__tag { height: 28px; padding: 0 12px; font-size: 13px; }

  .contact { padding: 64px 24px; }
  .contact__title { font-size: 30px; line-height: 1.25; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 28px; }
  .showcase { padding-top: 240px; }
  .badge { width: 168px; height: 168px; padding: 16px; }
  .badge span { font-size: 18px; }

  /* ---- Single-line tag strategies on narrow mobile (switch via [data-mobiletags]) ----
     wrap = today's behaviour (falls through, pills wrap). shrink/trim force one line. */

  /* SHRINK — reduce every tag uniformly so all pills fit one line down to 360px (no removal) */
  [data-mobiletags="shrink"] .showcase__tags { flex-wrap: nowrap; gap: 6px; }
  [data-mobiletags="shrink"] .showcase__tag { height: 23px; padding: 0 8px; font-size: 11px; }
  [data-mobiletags="shrink"] .showcase[data-logo="zoe"] .showcase__logo { width: 35px; height: 12.7px; }
  [data-mobiletags="shrink"] .showcase[data-logo="airbus"] .showcase__logo { width: 47px; height: 8.8px; }
  [data-mobiletags="shrink"] .showcase[data-logo="octopus"] .showcase__logo { width: 76px; height: 10.5px; }

  /* TRIM — moderate shrink + drop the one lower-priority pill on cards that still overflow
     (.showcase__tag--optional: Airbus→Aviation, Octopus Hydrogen→Brand, Hatchery→Greentech,
     RemoteOne→Webapp). ZOE keeps all four; We Can Move keeps both. */
  [data-mobiletags="trim"] .showcase__tags { flex-wrap: nowrap; gap: 8px; }
  [data-mobiletags="trim"] .showcase__tag { height: 26px; padding: 0 10px; font-size: 12px; }
  [data-mobiletags="trim"] .showcase[data-logo="zoe"] .showcase__logo { width: 40px; height: 14.5px; }
  [data-mobiletags="trim"] .showcase[data-logo="airbus"] .showcase__logo { width: 54px; height: 10.1px; }
  [data-mobiletags="trim"] .showcase[data-logo="octopus"] .showcase__logo { width: 88px; height: 12.1px; }
  [data-mobiletags="trim"] .showcase__tag--optional { display: none; }
}

/* ============================================================
   CASE STUDY PAGES (zoe.html + future case studies)
   Reusable building blocks — hero, centered section container,
   text block ("text area"), project meta. Future case studies
   clone the page shell and reuse these classes with new content.
   ============================================================ */
:root {
  --cs-navy: #031b4e;   /* headings + meta values */
  --cs-muted: #828eaa;  /* eyebrows / labels */
  --cs-body: #5a6a85;   /* body copy */
  --cs-max: 1080px;     /* content column width */
}

/* Shared centered container: the hero content and every section share the
   same left/right rhythm so everything lines up down the page. */
.case-hero__content,
.case-section {
  width: 100%;
  max-width: calc(var(--cs-max) + 64px); /* content + 2×32px padding */
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* ---------- HERO (full-bleed image + overlay + eyebrow / title / tags) ---------- */
.case-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: visible; /* let the brand badge straddle the bottom edge */
  background: #0b1020;
}
.case-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* legibility overlay — stronger on the left (under the text) + a touch at the top */
.case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%);
}
.case-hero__content { position: relative; z-index: 2; }
.case-hero__eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #fff;
  opacity: 0.92;
  margin: 0 0 14px;
}
.case-hero__eyebrow span { opacity: 0.5; margin: 0 4px; }
.case-hero__title {
  font-family: var(--sans);
  font-weight: 700;
  color: #fff;
  font-size: 44px;
  line-height: 1.18;
  max-width: 560px;
  margin: 0 0 28px;
}
/* page-scoped: We Can Move's title is a touch longer — widen it so it sits on 2 lines, not 3 */
.case-hero--wide .case-hero__title { max-width: 680px; }
.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* frosted pills — matches the homepage showcase cards (.showcase__tag) */
.case-hero__tags li {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border-radius: 5px;
}

/* brand logo square straddling the hero's bottom edge */
.case-hero__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  width: 147px;
  height: 118px;
  background: #fff;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-hero__badge img { display: block; width: 96px; height: 34px; }
@media (max-width: 600px) {
  .case-hero__badge { width: 120px; height: 96px; border-radius: 5px 5px 0 0; }
  .case-hero__badge img { width: 78px; height: 28px; }
}

/* hero brand badge — on short + narrow viewports the badge would cover the centred title,
   so top-align the hero text and reserve badge-height space below it (the hero grows to fit) */
@media (max-width: 860px) and (max-height: 602px) {
  .case-hero { align-items: flex-start; }
  .case-hero__content { padding-top: 88px; padding-bottom: 134px; }
}

/* ---------- SECTION + TEXT BLOCK (the shared "text area") ---------- */
.case-section { padding-top: 104px; padding-bottom: 104px; }
/* Consecutive text sections (e.g. "The results" -> "Iterating post-launch") read as one
   story, so tighten the otherwise doubled gap (104 bottom + 104 top = 208px) down to ~80px. */
.case-section--text:has(+ .case-section--text) { padding-bottom: 40px; }
.case-section--text + .case-section--text { padding-top: 40px; }
/* tighten the gap between the intro block and the website scroll box (this page only) */
.case-intro:has(+ .case-section--webshot) { padding-bottom: 40px; }
.case-section--webshot { padding-top: 40px; }
.case-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--cs-muted);
  margin: 0 0 14px;
}
.case-block { max-width: 720px; }
.case-block__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--cs-navy);
  margin: 0 0 22px;
}
.case-block__body {
  font-size: 19px;
  line-height: 1.6;
  color: var(--cs-body);
  margin: 0;
}
/* skim emphasis: bold key phrases in navy so they lift out of the grey body copy */
.case-block__body strong { font-weight: 700; color: var(--cs-navy); }

/* ---------- INTRO (project meta + the challenge block) ---------- */
.case-intro {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 96px;
  align-items: start;
}
.case-meta { display: flex; flex-direction: column; gap: 24px; }
.case-meta__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--cs-muted);
  margin: 0 0 2px;
}
.case-meta__value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--cs-navy);
  margin: 0;
}
.case-meta__link { color: var(--accent); text-decoration: underline; }
.case-meta__link:hover { color: var(--accent-hover); }

/* ---------- CASE STUDY RESPONSIVE ---------- */
@media (max-width: 860px) {
  .case-hero { min-height: 68vh; }
  .case-hero__title { font-size: 32px; }
  .case-section { padding-top: 64px; padding-bottom: 64px; }
  /* tighten the gap between a text block and the image section directly below it */
  .case-section--text:has(+ .case-siteanno-section),
  .case-intro:has(+ .case-siteanno-section),
  .case-section--text:has(+ .case-phones) { padding-bottom: 32px; }
  .case-section.case-siteanno-section { padding-top: 32px; }
  .case-eyebrow { font-size: 21px; }
  .case-block__title { font-size: 30px; }
  .case-block__body { font-size: 17px; }
  .case-intro { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 480px) {
  .case-hero { min-height: 62vh; }
  .case-hero__eyebrow { font-size: 15px; }
  .case-hero__title { font-size: 27px; }
  .case-section { padding-top: 52px; padding-bottom: 52px; }
  .case-block__title { font-size: 26px; }
  .case-block__body { font-size: 16px; }
}

/* ============================================================
   CASE STUDY — section components (stat callout, 2-up imagery,
   phone row, stat row, gamification band, where-next pager)
   ============================================================ */
:root { --cs-body: #6b7c93; }
.case-block__body { font-size: 21px; line-height: 1.6; }
.case-block__body + .case-block__body { margin-top: 20px; }
.case-block__body + .case-bullets { margin-top: 20px; }

/* text blocks sit in a right-of-centre column (left margin stays airy);
   the intro's meta occupies that left margin. */
.case-intro { grid-template-columns: 264px 1fr; gap: 96px; }
.case-section--text .case-block { margin-left: 360px; }

/* bullets */
.case-bullets { margin: 0; padding-left: 22px; max-width: 700px; list-style: disc; }
.case-bullets li { font-size: 21px; line-height: 1.55; color: var(--cs-body); margin-bottom: 12px; padding-left: 6px; }
.case-bullets li::marker { color: #c3ccdb; }

/* 2-up imagery */
.case-figures2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-figure { margin: 0; }
.case-figure img { width: 100%; height: auto; display: block; border-radius: 20px; }

/* full-page screenshot in a scrollable framed window (website case studies) */
.case-shot { border-radius: 26px; overflow: hidden; background: #fff; filter: drop-shadow(0 16px 140px rgba(0, 0, 0, 0.12)); }
.case-shot__scroll { max-height: 540px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.case-shot__scroll img { display: block; width: 100%; height: auto; }
.case-shot__scroll::-webkit-scrollbar { width: 8px; }
.case-shot__scroll::-webkit-scrollbar-thumb { background: rgba(3, 27, 78, 0.18); border-radius: 8px; }
/* phone-width shots, centred row */
.case-shots-phones { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.case-shots-phones .case-shot { width: 300px; max-width: 82vw; }
.case-shots-phones .case-shot__scroll { max-height: 560px; }

/* 3-up phone mockups */
.case-phones__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: end; }
/* hide the carousel scrollbar (swipe/scroll still works) — it was landing in the next
   section's text because of the track's tall shadow-padding */
.case-phones__track { scrollbar-width: none; -ms-overflow-style: none; }
.case-phones__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* big soft drop shadow (Figma: X0 Y16, blur 140, #000 @ 20%). drop-shadow follows the phone's
   rounded silhouette in the transparent PNG, rather than a rectangular box-shadow. */
.case-phones__track img { width: 100%; height: auto; display: block; border-radius: 26px; filter: drop-shadow(0 16px 140px rgba(0, 0, 0, 0.12)); }

/* Airbus: the second carousel sits on a full-bleed navy aircraft backdrop. Break out of the
   centred .case-section, fill with the photo, keep the 3 phones in a centred column, and use a
   stronger shadow so the navy phones lift off the navy photo. */
.case-phones--bg { max-width: none; padding-left: 0; padding-right: 0; background: #15264d url('images/cs-airbus-bg.webp') center / cover no-repeat; }
.case-phones--bg .case-phones__track { max-width: 1080px; margin-left: auto; margin-right: auto; }
.case-phones--bg .case-phones__track img { filter: drop-shadow(0 16px 50px rgba(0, 0, 0, 0.40)); }
/* Airbus: a phone row on a full-bleed light band (matches the render's #f4f7fc backdrop) */
.case-phones--light { max-width: none; padding-left: 0; padding-right: 0; background: #f4f7fc; }
.case-phones--light .case-phones__track { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  /* Contain the carousel's negative margins so the coloured band background can't bleed into
     the text sections above and below it on mobile (overflow:hidden = a block-formatting context). */
  .case-phones--bg, .case-phones--light { overflow: hidden; padding-top: 18px; padding-bottom: 18px; }
}

/* stat rows — bold sans numerals + uppercase tracked labels, no dividers.
   Sans numerals (Nunito Sans) are lining, so 192,498 / 43% / £40k read evenly. */
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-stat { text-align: center; padding: 8px 24px; }
.case-stat__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #1d2233;
  margin: 0 0 14px;
}
.case-stat__cap {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #828eaa;
  margin: 0;
}

/* qualitative outcomes — results without hard numbers: a tick + a short statement */
.case-outcomes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-outcome { text-align: center; }
.case-outcome__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 999px; background: rgba(29, 34, 51, 0.06); color: #1d2233;
}
.case-outcome__tick svg { width: 22px; height: 22px; }
.case-outcome__text { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.45; color: #1d2233; margin: 0; }
@media (max-width: 760px) { .case-outcomes { grid-template-columns: 1fr; gap: 26px; max-width: 340px; margin-inline: auto; } }

/* gamification band — full-bleed warm cream; phones sit directly on the cream (no panels) */
.case-band { background: #f6f2ec; padding: 112px 0; }
.case-band__inner {
  width: 100%;
  max-width: calc(var(--cs-max) + 64px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* each row = 3 phones, given the same treatment as the top phone set:
   26px corners + the soft 12% drop shadow (drop-shadow follows the rounded silhouette) */
.case-band__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.case-band__track img { width: 100%; height: auto; display: block; border-radius: 26px; filter: drop-shadow(0 16px 140px rgba(0, 0, 0, 0.12)); }

/* where-next pager */
.case-next {
  width: 100%;
  max-width: calc(var(--cs-max) + 64px);
  margin: 0 auto;
  padding: 100px 32px;
  box-sizing: border-box;
}
.case-next__title {
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -1px;
  color: var(--cs-navy);
  margin: 0 0 48px;
}
/* image-top card: project image on top, content below (uniform grey eyebrow) */
.case-next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-next__panel {
  text-decoration: none; color: inherit; display: block;
  background: #fff; border: 1px solid #eef2f8; border-radius: 18px; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.case-next__panel:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(3, 27, 78, 0.1); }
.case-next__media { display: block; overflow: hidden; background: #eef2f8; aspect-ratio: 16 / 9; }
.case-next__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-next__body { display: block; padding: 26px 28px 30px; }
.case-next__eyebrow { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #828eaa; margin-bottom: 14px; }
.case-next__head { margin-bottom: 10px; }
.case-next__name { display: block; font-size: 23px; font-weight: 800; color: var(--cs-navy); }
.case-next__desc { display: block; font-size: 15px; line-height: 1.5; color: #4f5f84; margin-bottom: 18px; }
.case-next__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-next__tag { font-size: 12px; font-weight: 600; color: #4f5f84; background: #eef2f8; padding: 5px 11px; border-radius: 999px; }

/* ---- case study sections: responsive ---- */
@media (max-width: 1180px) {
  .case-intro { grid-template-columns: 200px 1fr; gap: 72px; }
  .case-section--text .case-block { margin-left: 264px; }
}
@media (max-width: 860px) {
  .case-intro { grid-template-columns: 1fr; gap: 36px; }
  .case-section--text .case-block { margin-left: 0; }
  .case-bullets li { font-size: 18px; }
  .case-figures2 { grid-template-columns: 1fr; gap: 18px; }
  /* phones: full-bleed horizontal scroll-snap carousel.
     A horizontal scroller clips overflow on BOTH axes, so to show the full 140px-blur shadow
     uncut we pad the track wide enough to contain it (≥124px up / ≥156px down) and then pull
     the box back with negative margins so the page rhythm stays normal. */
  .case-phones { padding: 0; }
  .case-phones__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 130px 40px 160px;
    margin: -100px 0 -130px;
    scroll-padding: 0 40px;
  }
  /* explicit width (not flex-basis) overrides the base width:100% cleanly — no odd gaps */
  .case-phones__track img { flex: 0 0 auto; width: 82vw; max-width: 380px; scroll-snap-align: center; }
  /* phone mockups: a touch smaller so the whole screen fits vertically, with a gap then ~33%
     of the next phone peeking on the right (375px: 67vw phone, 22px track inset, 20px gap). */
  .case-phones .case-phones__track img { width: 67vw; max-width: 340px; }
  .case-phones .case-phones__track { gap: 20px; padding-left: 22px; padding-right: 22px; scroll-padding: 0 22px; }
  /* two tall website pages: align at the top, not the bottom */
  .case-phones--two .case-phones__track { align-items: flex-start; }
  /* stats stack */
  .case-stats { grid-template-columns: 1fr; gap: 48px; }
  .case-stat { padding: 0; }
  .case-stat + .case-stat { border: 0; padding-top: 0; }
  .case-stat__num { font-size: 54px; }
  /* gamification rows: keep phones legible via horizontal scroll */
  /* each row becomes its own full-bleed swipe carousel — identical scroll/snap to the top set.
     big track padding contains the 140px shadow uncut; negative margins pull the three rows
     back together so they read as tidy stacked rows on the one cream band. */
  .case-band { padding: 24px 0; }
  .case-band__inner { padding: 0; gap: 0; }
  .case-band__track {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 120px 40px 150px;
    margin: -88px 0;
    scroll-padding: 0 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .case-band__track:first-child { margin-top: -40px; }
  .case-band__track:last-child { margin-bottom: -40px; }
  .case-band__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .case-band__track img { flex: 0 0 auto; width: 82vw; max-width: 380px; scroll-snap-align: center; }
  /* same treatment as the phone mockups above: whole screen fits vertically, ~33% of the next peeks */
  .case-band .case-band__track img { width: 67vw; max-width: 340px; }
  .case-band .case-band__track { gap: 20px; padding-left: 22px; padding-right: 22px; scroll-padding: 0 22px; }
  /* where-next mobile: two cards side by side, small image + name only */
  .case-next { padding: 64px 32px; }
  .case-next__title { font-size: 30px; }
  .case-next__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .case-next__media { aspect-ratio: 4 / 3; }
  .case-next__body { padding: 14px 16px 18px; }
  .case-next__eyebrow { font-size: 10px; letter-spacing: 0.06em; margin-bottom: 6px; }
  .case-next__name { font-size: 17px; }
  .case-next__head { margin-bottom: 0; }
  .case-next__desc { display: none; }
  .case-next__tags { display: none; }
}
@media (max-width: 480px) {
  .case-block__body { font-size: 17px; }
  .case-bullets li { font-size: 16px; }
  .case-phones__track img { width: 80vw; }
  .case-stat__num { font-size: 52px; }
}

/* ============================================================
   ZOE WEBSITE case study — review variations
   (annotation arrows, desktop/mobile views, scroll-box modes)
   ============================================================ */

.case-eyebrow--center { text-align: center; margin: 0 auto 52px; }

/* ---- Annotated pricing cards ---- */
.case-anno-section { text-align: center; max-width: 1320px; }
.case-anno { position: relative; max-width: 1320px; margin: 0 auto; padding: 34px 0; }
.case-anno .case-phones__track { max-width: 716px; margin: 0 auto; gap: 22px; }

.case-anno__item { position: absolute; z-index: 4; display: flex; gap: 9px; }
.case-anno__arrow { width: 74px; height: auto; display: block; flex: 0 0 auto; }
.case-anno__label { width: 150px; font-family: "Caveat", var(--sans); font-weight: 600; font-size: 22px; line-height: 1.05; color: #8a9bb0; }

/* card cluster is 716px wide and centred; anchor each arrowhead ~10px outside it
   (calc keeps the gap constant at any viewport width). */
/* LEFT column: label then arrow, pointing right */
.case-anno__item--plan, .case-anno__item--trial, .case-anno__item--anchor { right: calc(50% + 376px); flex-direction: row-reverse; }
.case-anno__item--trial .case-anno__label, .case-anno__item--anchor .case-anno__label { text-align: right; }
.case-anno__item--plan .case-anno__label { text-align: left; }
/* RIGHT column: arrow then label, pointing left */
.case-anno__item--incl, .case-anno__item--price { left: calc(50% + 376px); flex-direction: row; }
.case-anno__item--incl .case-anno__label, .case-anno__item--price .case-anno__label { text-align: left; }

/* vertical placement + cross-axis alignment so the label sits at the arrow's tail */
.case-anno__item--plan   { top: 4%;  align-items: center; }
.case-anno__item--incl   { top: 23%; align-items: center; }
.case-anno__item--price  { top: 67%; align-items: flex-start; }
.case-anno__item--trial  { top: 66%; align-items: flex-end; }
.case-anno__item--anchor { top: 83%; align-items: flex-end; }

/* arrow directions + angle (assets 1/2/3 point right, 4/5 point left) */
.case-anno__item--plan  .case-anno__arrow { transform: rotate(6deg); }
.case-anno__item--trial .case-anno__arrow { transform: scaleX(-1) rotate(10deg); }
.case-anno__item--anchor .case-anno__arrow { transform: rotate(-12deg); }
.case-anno__item--incl  .case-anno__arrow { transform: scaleX(-1) rotate(6deg); }
.case-anno__item--price .case-anno__arrow { transform: rotate(-8deg); }

/* Tablet (861–1240px): keep the arrows, but shrink the card cluster and arrows so they fit.
   The group width and the arrow offsets both scale with the viewport (vw) so they track
   together. Below 861px the cluster becomes a swipe carousel and the arrows hide (mobile block). */
@media (min-width: 861px) and (max-width: 1240px) {
  .case-anno .case-phones__track { max-width: 50vw; gap: 18px; }
  .case-anno__arrow { width: 54px; }
  .case-anno__label { width: 116px; font-size: 18px; }
  .case-anno__item--plan, .case-anno__item--trial, .case-anno__item--anchor { right: calc(50% + 25vw + 10px); }
  .case-anno__item--incl, .case-anno__item--price { left: calc(50% + 25vw + 10px); }
}

/* reveal-on-scroll modes (JS adds .is-revealed to [data-anno]) */
[data-arrowreveal="stagger"] .case-anno__item,
[data-arrowreveal="fade"] .case-anno__item,
[data-arrowreveal="draw"] .case-anno__item { opacity: 0; }
[data-arrowreveal="stagger"] .case-anno.is-revealed .case-anno__item,
[data-arrowreveal="fade"] .case-anno.is-revealed .case-anno__item,
[data-arrowreveal="draw"] .case-anno.is-revealed .case-anno__item { opacity: 1; transition: opacity 0.5s ease; }
[data-arrowreveal="stagger"] .case-anno.is-revealed .case-anno__item { transition-delay: calc(var(--i, 0) * 130ms); }
/* draw: clip the arrow open left-to-right, then fade the label in */
[data-arrowreveal="draw"] .case-anno__arrow { clip-path: inset(0 100% 0 0); }
[data-arrowreveal="draw"] .case-anno__label { opacity: 0; }
[data-arrowreveal="draw"] .case-anno.is-revealed .case-anno__item { opacity: 1; transition: none; }
[data-arrowreveal="draw"] .case-anno.is-revealed .case-anno__arrow { clip-path: inset(0 0 0 0); transition: clip-path 0.55s ease; transition-delay: calc(var(--i, 0) * 120ms); }
[data-arrowreveal="draw"] .case-anno.is-revealed .case-anno__label { opacity: 1; transition: opacity 0.4s ease; transition-delay: calc(var(--i, 0) * 120ms + 0.35s); }
/* static: no animation */
[data-arrowreveal="static"] .case-anno__item { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .case-anno__item { opacity: 1 !important; transition: none !important; }
  .case-anno__arrow { clip-path: none !important; }
  .case-anno__label { opacity: 1 !important; }
}

/* ---- Desktop + mobile views (pair / toggle) ---- */
.case-views { max-width: var(--cs-max); margin: 0 auto; }
.case-views__tabs { display: none; }

[data-webmob="pair"] .case-views { display: flex; gap: 30px; align-items: flex-start; justify-content: center; }
[data-webmob="pair"] .case-shot--desktop { flex: 1 1 auto; min-width: 0; max-width: 760px; }
[data-webmob="pair"] .case-shot--mobile { flex: 0 0 268px; }

[data-webmob="toggle"] .case-views { display: block; }
[data-webmob="toggle"] .case-views__tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
[data-webmob="toggle"] .case-views__tabs button {
  font-family: var(--sans); font-weight: 700; font-size: 14px; padding: 9px 22px;
  border-radius: 999px; border: 1px solid #dfe5f0; background: #fff; color: #4f5f84; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
[data-webmob="toggle"] .case-views__tabs button[aria-pressed="true"] { background: var(--cs-navy); color: #fff; border-color: var(--cs-navy); }
[data-webmob="toggle"] .case-shot--desktop { max-width: 820px; margin: 0 auto; }
[data-webmob="toggle"] .case-shot--mobile { max-width: 340px; margin: 0 auto; }
[data-webmob="toggle"] .case-views[data-active="desktop"] .case-shot--mobile { display: none; }
[data-webmob="toggle"] .case-views[data-active="mobile"] .case-shot--desktop { display: none; }

/* ---- Scroll-box chrome / cue / expand / fade affordances ---- */
.case-shot { position: relative; }
.case-shot__chrome { display: none; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #eef1f6; border-bottom: 1px solid #e2e7f0; }
.case-shot__chrome span { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e4; flex: 0 0 auto; }
.case-shot__chrome span:nth-child(1) { background: #ff5f57; }
.case-shot__chrome span:nth-child(2) { background: #febc2e; }
.case-shot__chrome span:nth-child(3) { background: #28c840; }
.case-shot__chrome i { margin-left: 10px; font-style: normal; font-family: var(--sans); font-size: 12px; color: #8a96ad; background: #fff; border-radius: 6px; padding: 4px 14px; flex: 1 1 auto; max-width: 300px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-shot--mobile .case-shot__chrome { justify-content: center; }
.case-shot--mobile .case-shot__chrome span { display: none; }
.case-shot--mobile .case-shot__chrome i { margin-left: 0; }

.case-shot__cue {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  display: none; color: rgba(3, 27, 78, 0.5); pointer-events: none; transition: opacity 0.4s ease;
}
.case-shot.is-end .case-shot__cue { opacity: 0; }
/* scroll cue: light-grey pill with "Scroll" + a static chevron */
.cue-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #e7ebf2; color: #44506b; }
.cue-pill > span:first-child { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.cue-chev { display: block; width: 9px; height: 9px; position: relative; margin-bottom: 3px; } /* margin optical-centres the V with the text */
.cue-chev::before { content: ""; position: absolute; inset: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

.case-shot__expand { display: none; position: absolute; inset: 0; z-index: 5; align-items: center; justify-content: center; background: rgba(3, 27, 78, 0); border: 0; cursor: pointer; transition: background 0.25s; }
.case-shot__expand span { padding: 11px 21px; background: #e7ebf2; color: #44506b; font-family: var(--sans); font-weight: 700; font-size: 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(3, 27, 78, 0.16); transform: translateY(6px); opacity: 0.95; transition: transform 0.25s, opacity 0.25s; }
.case-shot__expand:hover { background: rgba(20, 28, 46, 0.05); }
.case-shot__expand:hover span { transform: none; opacity: 1; }

/* top + bottom fade masks (fades mode) */
.case-shot::before, .case-shot::after { content: ""; position: absolute; left: 0; right: 0; height: 52px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.3s ease; }
.case-shot::before { top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)); }
.case-shot::after { bottom: 0; background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)); }

/* mode: chrome */
[data-shotmode="chrome"] .case-shot__chrome { display: flex; }
[data-shotmode="chrome"] .case-shot__cue { display: block; opacity: 1; }
/* mode: hint (one-time nudge pill that fades after first scroll) */
[data-shotmode="hint"] .case-shot__cue { display: block; opacity: 1; }
[data-shotmode="hint"] .case-shot.has-scrolled .case-shot__cue { opacity: 0; }
/* mode: fades */
[data-shotmode="fades"] .case-shot::before, [data-shotmode="fades"] .case-shot::after { opacity: 1; }
/* top fade only appears once scrolled away from the very top (no white blur at the start) */
[data-shotmode="fades"] .case-shot.is-top::before { opacity: 0; }
[data-shotmode="fades"] .case-shot.is-end::after { opacity: 0; }
[data-shotmode="fades"] .case-shot__cue { opacity: 1; }
/* mode: expand (crop preview, click to open lightbox) */
[data-shotmode="expand"] .case-shot__scroll { max-height: 360px; overflow: hidden; }
[data-shotmode="expand"] .case-shot__expand { display: flex; }

/* ---- Scroll-capture fix variations (data-scrollfix) ---- */
/* Locked state: overflow:hidden so the box isn't user-scrollable, AND overscroll-behavior:auto
   so the wheel CHAINS to the page. A hidden box is always "at its scroll boundary"; the base
   rule's `contain` would trap the wheel here and stop the page scrolling under the cursor. */
[data-scrollfix] .case-shot__scroll { overflow: hidden; overscroll-behavior: auto; }
[data-scrollfix="gate"] .case-shot.scroll-on .case-shot__scroll,
[data-scrollfix="click"] .case-shot.scroll-on .case-shot__scroll { overflow-y: auto; overscroll-behavior: auto; }
[data-scrollfix="click"] .case-shot:not(.scroll-on) .case-shot__scroll { cursor: pointer; }
[data-scrollfix="expand"] .case-shot__scroll { max-height: 360px; overflow: hidden; }
[data-scrollfix="expand"] .case-shot__expand { display: flex; }
/* cue: bottom 'Scroll' pill only in gate (click uses the click-hint; expand uses its button) */
[data-scrollfix="gate"] .case-shot__cue { display: block; }
/* click-to-scroll affordance + visual variants (data-clickcue) */
.case-shot__clickhint { display: none; position: absolute; inset: 0; z-index: 5; align-items: center; justify-content: center; pointer-events: none; }
[data-scrollfix="click"] .case-shot:not(.scroll-on) .case-shot__clickhint { display: flex; }
.case-shot__clickhint-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: #e7ebf2; color: #44506b; font-family: var(--sans); font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(3, 27, 78, 0.16); }
.case-shot__clickhint-ico { flex: 0 0 auto; }
[data-clickcue="overlay"] .case-shot__clickhint { background: rgba(247, 249, 252, 0.55); }
[data-clickcue="badge"] .case-shot__clickhint { align-items: flex-end; padding-bottom: 18px; }
[data-clickcue="pulse"] .case-shot:not(.scroll-on) .case-shot__clickhint-pill { animation: clickPulse 1.7s ease-in-out infinite; }
@keyframes clickPulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(3, 27, 78, 0.16); } 50% { transform: scale(1.05); box-shadow: 0 0 0 7px rgba(3, 27, 78, 0.05), 0 6px 18px rgba(3, 27, 78, 0.16); } }
@media (prefers-reduced-motion: reduce) { .case-shot__clickhint-pill { animation: none !important; } }

/* ---- Lightbox ---- */
.case-lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(2, 10, 30, 0.86); padding: 40px 20px; }
.case-lightbox.is-open { display: block; }
.case-lightbox__scroll { max-width: 1100px; max-height: 100%; margin: 0 auto; overflow-y: auto; border-radius: 14px; background: #fff; -webkit-overflow-scrolling: touch; }
.case-lightbox__scroll img { display: block; width: 100%; height: auto; }
.case-lightbox__close { position: fixed; top: 18px; right: 22px; z-index: 201; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.case-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .case-anno { padding: 0; }
  .case-anno__item { display: none; }
  /* pricing phones: full-bleed swipe carousel (match the .case-phones set) so it reads as
     clearly swipeable (the next card peeks) instead of a boxed strip with white side gutters */
  .case-anno-section { padding-left: 0; padding-right: 0; }
  .case-anno .case-phones__track { max-width: none; margin: -100px 0 -130px; gap: 22px; }
  /* a touch smaller than the full-width cards, with a wider gap, sized so ~33% of the next
     card peeks on the right (375px phone: 63vw card + 40px track inset + 22px gap). */
  .case-anno .case-phones__track img { width: 63vw; max-width: 320px; }
  [data-webmob="pair"] .case-views { flex-direction: column; align-items: center; gap: 26px; }
  [data-webmob="pair"] .case-shot--desktop, [data-webmob="pair"] .case-shot--mobile { flex: none; width: 100%; max-width: 420px; }
  .case-shot__chrome i { max-width: 180px; }
}

/* ---- Balance headings to avoid hanging/orphan words (site-wide) ---- */
h1, h2, h3, .case-next__name { text-wrap: balance; }
/* Body copy: prevent orphan / single-word last lines (the browser tidies the final few lines). */
p, li { text-wrap: pretty; }

/* ---- Wide feature render (the angled app hero shot on the Airbus page) ----
   Full-bleed band coloured to match the image's own #f4f7fc backdrop, so the capped image
   blends seamlessly into the band: edge-to-edge up to the cap, then the phone + band height
   stop growing on larger screens. (max-width on the img + the band padding are the tuning knobs.) */
.case-figure-wide { max-width: none; padding-left: 0; padding-right: 0; padding-top: 48px; padding-bottom: 48px; background: #f4f7fc; text-align: center; }
.case-figure-wide__fig { margin: 0; }
.case-figure-wide__fig img { display: block; width: 100%; max-width: 1120px; height: auto; margin: 0 auto; }

/* ---- Testimonial (Airbus) — centred editorial pull-quote, framed by decorative quote marks ---- */
.case-quote { position: relative; max-width: 1000px; margin: 0 auto; text-align: center; padding: 0 56px; }
.case-quote__eyebrow { font-family: var(--serif); font-style: italic; font-size: 22px; color: #8a96ad; margin: 0 0 22px; }
.case-quote__lead { position: relative; z-index: 1; margin: 0 auto 30px; max-width: 880px; font-family: var(--serif); font-style: italic; color: #0b1020; line-height: 1.18; font-size: clamp(30px, 4.6vw, 50px); text-wrap: balance; }
.case-quote__body { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.case-quote__body p { font-family: var(--sans); font-size: 18px; line-height: 1.6; color: #44506b; margin: 0; text-wrap: pretty; }
.case-quote__body strong { font-weight: 700; color: #1a2440; }
.case-quote__by { margin-top: 34px; }
.case-quote__name { display: block; font-family: var(--sans); font-weight: 800; font-size: 18px; color: #0b1020; }
.case-quote__role { display: block; font-family: var(--sans); font-size: 15px; color: #8a96ad; margin-top: 3px; }
/* decorative framing marks (SVG, #C9D4E8): open top-left, close bottom-right (rotated 180) */
.case-quote__q { position: absolute; width: clamp(40px, 4.6vw, 66px); height: auto; z-index: 0; pointer-events: none; }
.case-quote__q--open { top: 64px; left: 0; transform: translateY(-50%); }
.case-quote__q--close { bottom: 96px; right: 0; transform: translateY(50%) rotate(180deg); }
@media (max-width: 760px) {
  .case-quote { padding: 0 6px; }
  .case-quote__q { width: 32px; }
  .case-quote__q--open { top: 2px; left: 0; }
  .case-quote__q--close { bottom: 72px; right: 0; }
}
@media (max-width: 480px) {
  .case-quote__q { display: none; } /* too tight to frame the column cleanly on small phones */
}

/* Airbus hero badge: white tab like the ZOE badge, with the navy (#00205B) wordmark kept at its own aspect (not stretched) */
.case-hero__badge--airbus img { width: 68%; height: auto; max-width: 110px; }

/* ============================================================
   OCTOPUS HYDROGEN case study (octopus-hydrogen.html)
   ============================================================ */

/* Hero keeps the shared neutral overlay (.case-hero::after), same as the other case studies. */
/* octopus wordmark is a wide ~7:1 lockup, keep its aspect (don't stretch to the 96×34 default) */
.case-hero__badge--octopus img { width: 116px; height: auto; max-width: 80%; }
@media (max-width: 600px) { .case-hero__badge--octopus img { width: 92px; } }

/* ---------- The annotated full website: centred design with callouts alternating each side ---------- */
.case-siteanno-section { max-width: 1320px; text-align: center; }
.case-siteanno { position: relative; margin: 8px auto 0; }
.case-siteanno__stage {
  position: relative;
  width: clamp(440px, 46vw, 620px);
  margin: 0 auto; /* centred */
}
.case-siteanno__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(20, 10, 50, 0.20);
}
.case-siteanno__item {
  position: absolute;
  top: var(--y, 0);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 300px;
}
/* left-side callouts: label then arrow, arrow points right into the design */
.case-siteanno__item--left { right: calc(100% + 22px); flex-direction: row; }
.case-siteanno__item--left .case-siteanno__label { text-align: right; }
/* right-side callouts: arrow (nearest the design, pointing left) then label */
.case-siteanno__item--right { left: calc(100% + 22px); flex-direction: row-reverse; }
.case-siteanno__item--right .case-siteanno__label { text-align: left; }
.case-siteanno__label {
  width: 158px;
  font-family: "Caveat", var(--sans);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.08;
  color: #8a9bb0;
}
.case-siteanno__arrow {
  width: 76px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  transform: scaleX(var(--af, 1)) rotate(var(--ar, 0deg));
  transform-origin: center;
}
/* draw-in reveal (same idea as the ZOE annotations), staggered by --i; JS adds .is-revealed via [data-anno] */
.case-siteanno__item { opacity: 0; }
.case-siteanno__arrow { clip-path: inset(0 100% 0 0); }                                /* left items draw left -> right */
.case-siteanno__item--right .case-siteanno__arrow { clip-path: inset(0 0 0 100%); }   /* right items draw right -> left (toward the design) */
.case-siteanno__label { opacity: 0; }
.case-siteanno.is-revealed .case-siteanno__item { opacity: 1; }
.case-siteanno.is-revealed .case-siteanno__arrow {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.55s ease;
  transition-delay: calc(var(--i, 0) * 150ms);
}
.case-siteanno.is-revealed .case-siteanno__label {
  opacity: 1;
  transition: opacity 0.4s ease;
  transition-delay: calc(var(--i, 0) * 150ms + 0.32s);
}
@media (prefers-reduced-motion: reduce) {
  .case-siteanno__item { opacity: 1 !important; }
  .case-siteanno__arrow { clip-path: none !important; }
  .case-siteanno__label { opacity: 1 !important; }
}
/* tablet: shrink the design + labels so the alternating callouts keep clear of the page edge */
@media (max-width: 1199px) {
  .case-siteanno__stage { width: clamp(340px, 40vw, 500px); }
  .case-siteanno__label { width: 124px; font-size: 19px; }
  .case-siteanno__arrow { width: 54px; }
  .case-siteanno__item--left { right: calc(100% + 12px); }
  .case-siteanno__item--right { left: calc(100% + 12px); }
}
/* mobile: drop the annotations, show the full design centred */
@media (max-width: 860px) {
  .case-siteanno-section { padding-left: 22px; padding-right: 22px; }
  .case-siteanno__stage { width: 100%; max-width: 460px; }
  .case-siteanno__item { display: none; }
  .case-siteanno__shot { border-radius: 16px; }
}

/* ---------- CARBON LABS case study (carbon-labs.html) ----------
   app-screenshot figures + annotations, two-up landing pages,
   feedback masonry, results spreadsheet strip.
   Figures LEFT-ALIGN with the body-text column (360px rail, like the meta);
   all annotations sit in that left rail. Offsets restated per breakpoint
   because these selectors outrank the generic .case-siteanno__stage rules. */
.case-siteanno-section--left { max-width: calc(var(--cs-max) + 64px); }
.case-siteanno--app .case-siteanno__stage { width: auto; max-width: 700px; margin: 0 0 0 360px; }
/* annotated band variant: the stage shrink-wraps a track/grid rather than one fixed-width shot */
.case-phones--two .case-siteanno--band { max-width: 1080px; margin: 0 auto; }
/* the two long landing pages stay CENTRED (exempt from the left-aligned figure rule) */
.case-siteanno--band .case-siteanno__stage { width: fit-content; max-width: 720px; margin: 0 auto; }
@media (max-width: 1180px) {
  .case-siteanno--app .case-siteanno__stage { margin-left: 264px; }
}
@media (max-width: 860px) {
  .case-siteanno--app .case-siteanno__stage { width: 100%; max-width: 460px; margin: 0 auto; }
  .case-siteanno--band .case-siteanno__stage { width: 100%; max-width: none; margin: 0; }
}
/* app screenshots: tighter corners than the default tall site shot */
.case-siteanno--app .case-siteanno__shot { border-radius: 10px; }
/* consecutive annotated figures stack with a gap (sneak-peek stack) */
.case-siteanno-section--left .case-siteanno + .case-siteanno { margin-top: 44px; }
/* results: two tall landing pages side by side, tops aligned.
   Desktop-only overrides so the generic mobile swipe-carousel rules keep control below 861px. */
@media (min-width: 861px) {
  .case-phones--two .case-phones__track {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    gap: 100px;
    align-items: start;
    margin-left: auto;
    margin-right: auto;
  }
}
.case-phones--two .case-phones__track img { border-radius: 6px; filter: drop-shadow(0 12px 60px rgba(3, 27, 78, 0.16)); }
/* feedback masonry: two independent columns so varied heights flow like the design */
.case-masonry { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.case-masonry__col { display: flex; flex-direction: column; gap: 36px; }
.case-masonry__col img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 18px 60px rgba(20, 10, 50, 0.16); }
/* results: the demo-outcome data as a designed bar breakdown (replaces the raw sheet screenshot).
   Single measure (share of the 8 demos) so one hue: Carbon Labs teal on a recessive track;
   values wear ink colours, every row directly labelled. */
.case-sheet-section { padding-top: 72px; }
.case-demoresults {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eef2f8;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(20, 10, 50, 0.1);
  padding: 32px 36px 26px;
  box-sizing: border-box;
}
.case-demoresults__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #a9b3c9; margin: 0 0 14px; }
.case-demoresults__hero { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; }
.case-demoresults__big { font-family: var(--sans); font-weight: 800; font-size: 40px; line-height: 0.9; letter-spacing: -1.5px; color: #1f9a8b; flex: 0 0 auto; }
.case-demoresults__herolabel { display: flex; flex-direction: column; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--cs-navy); }
.case-demoresults__herolabel em { font-style: normal; font-weight: 500; font-size: 14px; color: #828eaa; margin-top: 5px; }
.case-demoresults__brk { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #a9b3c9; margin: 0 0 14px; padding-top: 20px; border-top: 1px solid #eef2f8; }
.case-demoresults__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case-demoresults__rows li { display: grid; grid-template-columns: 236px 1fr 96px; align-items: center; gap: 14px; }
.case-demoresults__label { font-size: 15px; font-weight: 600; color: #4f5f84; }
.case-demoresults__bar { height: 10px; border-radius: 999px; background: #eef2f8; overflow: hidden; }
.case-demoresults__bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: #1f9a8b; }
.case-demoresults__val { font-size: 15px; font-weight: 800; color: var(--cs-navy); text-align: right; white-space: nowrap; }
.case-demoresults__val em { font-style: normal; font-weight: 600; color: #828eaa; }
.case-demoresults__foot { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #eef2f8; font-size: 14px; color: #828eaa; }
.case-demoresults__foot strong { color: var(--cs-navy); font-weight: 800; }
.case-demoresults__foot span { margin: 0 6px; opacity: 0.6; }
@media (max-width: 860px) {
  .case-masonry { display: block; }
  .case-masonry__col { gap: 22px; }
  .case-masonry__col + .case-masonry__col { margin-top: 22px; }
  .case-sheet-section { padding-top: 48px; }
  .case-demoresults { padding: 24px 22px 18px; }
  .case-demoresults__hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .case-demoresults__big { font-size: 40px; }
  .case-demoresults__rows li { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .case-demoresults__bar { grid-column: 1 / -1; }
}

/* ---------- Brand showcase band (logo lockup) ---------- */
.case-brandband { text-align: center; padding-bottom: 56px; }
.case-brandband__logo {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(20, 10, 50, 0.18);
}

/* ---------- Colour palette swatches (I created these from the brand) ---------- */
.case-swatches-section { text-align: center; padding-top: 56px; padding-bottom: 56px; }
.case-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.case-swatch { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 132px; }
.case-swatch__chip { width: 108px; height: 108px; border-radius: 18px; background: var(--c, #ccc); box-shadow: 0 12px 30px rgba(20, 10, 50, 0.14); }
.case-swatch__chip--light { box-shadow: 0 12px 30px rgba(20, 10, 50, 0.1); border: 1px solid rgba(20, 10, 50, 0.08); }
.case-swatch__hex { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; color: var(--cs-navy); }
.case-swatch__name { font-family: var(--sans); font-size: 13px; color: var(--cs-muted); margin-top: -6px; }

/* ---------- Custom icon set (real SVGs to be dropped in) ---------- */
.case-icons-section { text-align: center; padding-top: 56px; }
.case-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.case-icon { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 132px; }
.case-icon__art { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.case-icon__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.case-icon__art--ph { border: 2px dashed #c7cfe0; border-radius: 20px; color: #aeb7cc; font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; }
.case-icon__name { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--cs-navy); }

@media (max-width: 600px) {
  .case-swatch { width: 30%; }
  .case-swatch__chip { width: 76px; height: 76px; }
  .case-icons { gap: 18px 20px; }
  .case-icon { width: 28%; }
}

/* ============================================================
   WE CAN MOVE case study (wecanmove.html)
   ============================================================ */

/* Hero badge: the We Can Move boxed logo (68x68 square) */
.case-hero__badge--wcm img { width: 64px; height: 64px; }
@media (max-width: 600px) { .case-hero__badge--wcm img { width: 54px; height: 54px; } }

/* Homepage scroll box: hide the scrollbar and drop the reserved gutter so the coloured
   full-bleed bands run flush to the right edge (no white gutter strip). The fades + Scroll
   pill remain the scroll affordance, matching how the carousels hide their scrollbars. */
.case-shot--hidebar .case-shot__scroll { scrollbar-gutter: auto; scrollbar-width: none; }
.case-shot--hidebar .case-shot__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Three full-page screenshots side by side: tops aligned; slimmer mobile carousel cards
   (these are ~1:6 page shots, so the phone-row 67vw sizing would be far too tall) */
.case-phones--pages .case-phones__track { align-items: start; }
/* website page shots, not phones: much smaller corner radius than the phone mockups' 26px */
.case-phones--pages .case-phones__track img { border-radius: 8px; }
@media (max-width: 860px) {
  .case-phones--pages .case-phones__track img { width: 56vw; max-width: 300px; }
}

/* Events booking flow: 2x2 grid of modal screenshots */
.case-grid2-section { padding-top: 24px; }
.case-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.case-grid2 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(3, 27, 78, 0.16);
}
@media (max-width: 700px) {
  .case-grid2 { grid-template-columns: 1fr; gap: 20px; max-width: 480px; }
  .case-grid2 img { border-radius: 12px; }
}

/* ---------- REMOTEONE case study (remoteone.html) ----------
   wide centred dashboard cards, gradient website band (3-up pages row),
   full-bleed purple banner grid */
/* hero badge: the RemoteOne wordmark (107x18 source) */
.case-hero__badge--remoteone img { width: 130px; height: 22px; }
/* wide centred app-screenshot card */
.case-widefig {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(20, 10, 50, 0.2);
}
/* website band: subtle blue gradient behind the 3-up pages row */
.case-phones--gradient { background: linear-gradient(180deg, #f2f6fe, #e9eff9); }
/* purple banner band: full-bleed brand purple; the banner tiles share the same purple so they blend */
.case-purpleband { max-width: none; padding-left: 0; padding-right: 0; background: #4e319a; }
.case-purpleband .case-grid2 { padding: 0 22px; box-sizing: border-box; }
/* trim the 1px lighter edge baked into the bottom of the exported slides:
   crop ~2px off the native 658 height, anchored to the top, so corners + shadow stay clean */
.case-purpleband .case-grid2 img { border-radius: 8px; box-shadow: 0 22px 50px rgba(18, 7, 52, 0.38); aspect-ratio: 1170 / 656; height: auto; object-fit: cover; object-position: top center; }
@media (max-width: 860px) {
  .case-widefig { border-radius: 8px; }
}

/* ---------- Floating-cards composition: a section screenshot with cards overhanging its edges.
   Cards carry a strong drop shadow and a slow, subtle vertical drift (staggered per card). ---------- */
.case-float-section { padding-top: 40px; }
.case-float { position: relative; max-width: 880px; margin: 0 auto; }
.case-float__bg {
  display: block;
  width: 78%;
  height: auto;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(3, 27, 78, 0.14);
}
.case-float__card {
  position: absolute;
  height: auto;
  box-shadow: 0 24px 60px rgba(3, 27, 78, 0.28);
  will-change: transform, opacity;
}
/* the real design uses square-corner cards */
.case-float__card { border-radius: 0; }
/* positions: A overhangs top-right, B overhangs mid-left, C overhangs bottom-right. Width + horizontal
   (left) are shared; verticals are tuned per composition below (the join and social panels differ in height). */
.case-float__card--a { width: 29%; left: 67%; top: 2%; right: auto; bottom: auto; }
.case-float__card--b { width: 29%; left: 5%; top: 45%; right: auto; bottom: auto; }
.case-float__card--c { width: 29%; left: 66%; top: 71.1%; right: auto; bottom: auto; }
/* the social panel is much taller than the join panel, so its cards sit lower */
.case-float--social .case-float__card--a { top: 33%; }
.case-float--social .case-float__card--b { top: 53%; }
.case-float--social .case-float__card--c { top: 90.8%; }

/* ---- Card reveal: rise & fade ----
   each card reveals independently as IT scrolls into view (JS adds .is-shown per card); soft + slow */
.case-float__card { opacity: 0; transform: translateY(38px); }
.case-float__card.is-shown {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .case-float__card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .case-float__bg { width: 84%; border-radius: 12px; }
  .case-float__card { box-shadow: 0 12px 30px rgba(3, 27, 78, 0.28); }
  .case-float__card--a { width: 30%; }
  .case-float__card--b { width: 30%; }
  .case-float__card--c { width: 30%; }
}

/* ===================================================================
   FOOTER CTA — round 4. Two type-led variants via [data-foot]:
   editorialA (identity ledger) and editorialB (statement).
   Theme per page via [data-foottheme]: dark on the homepage, light on
   case studies. Primary CTA = LinkedIn, filled (blue on dark, navy on
   light); Open email / Copy email are ghost. Square buttons throughout.
   =================================================================== */
.foot { font-family: var(--sans); background: var(--fbg); }
.foot__v { display: none; }
[data-foot="editorialA"] .foot__v--editorialA,
[data-foot="editorialB"] .foot__v--editorialB { display: block; }

[data-foottheme="dark"] .foot {
  --fbg: #0e1116; --fink: #f4f6f8; --fmuted: #98a2b1; --ffaint: rgba(255,255,255,0.44);
  --fborder: rgba(255,255,255,0.13); --flabel: #eef1f5; --fprimary: var(--accent, #0067ff);
  --fghost-bd: rgba(255,255,255,0.30); --fghost-ink: #eef1f5; --fglow: rgba(0,103,255,0.55);
}
[data-foottheme="light"] .foot {
  --fbg: #f4f7fc; --fink: #031b4e; --fmuted: #5a6a85; --ffaint: #96a2b6;
  --fborder: #e2e9f5; --flabel: #8a97ad; --fprimary: #0a1f4d;
  --fghost-bd: #c9d5e8; --fghost-ink: #031b4e; --fglow: rgba(10,31,77,0.3);
}

.foot__wrap { max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.foot__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ffaint); margin: 0; }
.foot__mail { color: var(--accent, #0067ff); font-weight: 700; font-size: 17px; text-decoration: none; }
.foot__mail:hover { text-decoration: underline; }

/* actions: LinkedIn primary (filled) + Open/Copy email ghost — square buttons */
.foot__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* SM size (one step below the previous MD: 15px/13-22/8/18px) */
.foot__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 7px; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.foot__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.foot__btn--primary { background: var(--fprimary); color: #fff; }
.foot__btn--primary:hover { transform: translateY(-2px); opacity: 0.92; }
/* optional glow around the primary (LinkedIn) button — toggled via [data-footglow] */
[data-footglow="on"] .foot__btn--primary { box-shadow: 0 12px 36px var(--fglow); }
[data-footglow="on"] .foot__btn--primary:hover { box-shadow: 0 16px 44px var(--fglow); }
.foot__btn--ghost { background: transparent; border-color: var(--fghost-bd); color: var(--fghost-ink); }
.foot__btn--ghost:hover { border-color: var(--fink); }

.foot__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ffaint); border-top: 1px solid var(--fborder); }
.foot__meta a { color: var(--fmuted); text-decoration: none; transition: color .2s ease; }
.foot__meta a:hover { color: var(--fink); }
.foot__toparrow { width: 9px; height: 12px; margin-left: 6px; vertical-align: -1px; }

/* quick links — quiet sitemap categorised like the main nav (Menu / Product / Website) */
.foot__links { display: none; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--fborder); }
[data-footlinks="quiet"] .foot__links--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 40px; }
.foot__linkcol { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot__linkhead { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ffaint); opacity: 0.75; margin: 0 0 3px; }
.foot__links a { color: var(--ffaint); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .2s ease; }
.foot__links a:hover { color: var(--fink); }
/* when links show, the meta becomes the closing line (no second divider) */
[data-footlinks="quiet"] .foot__meta--editorialA { margin-top: 30px; padding-top: 0; border-top: none; }

/* editorialA — identity ledger */
.foot__v--editorialA { padding: 116px 0 28px; }
.foot__ed { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; }
.foot__ed-label { font-size: 19px; font-weight: 700; color: var(--flabel); margin: 10px 0 0; }
.foot__ed-name { display: block; font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -1.2px; color: var(--fink); }
.foot__ed-role { display: block; font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -1.2px; color: var(--ffaint); margin-bottom: 0; }
/* optional email line under the role — toggled via [data-footmail] */
.foot__ed-mail { display: none; }
[data-footmail="on"] .foot__ed-mail {
  display: inline-block; margin: 20px 0 0; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px); color: var(--fink); text-decoration: none;
  border-bottom: 2px solid var(--fink); padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
[data-footmail="on"] .foot__ed-mail:hover { color: var(--accent, #0067ff); border-bottom-color: var(--accent, #0067ff); }
.foot__ed-block .foot__actions { margin-top: 30px; }
.foot__meta--editorialA { margin-top: 84px; padding-top: 22px; }
/* contact page: drop the identity ledger (repeats the page's own contact block), keep links + meta */
.foot--linksonly .foot__ed { display: none; }
.foot--linksonly .foot__v--editorialA { padding-top: 72px; }
.foot--linksonly .foot__links { margin-top: 0; padding-top: 0; border-top: none; }

/* editorialB — statement */
.foot__v--editorialB { padding: 116px 0 28px; }
.foot__stmt-h { font-weight: 800; font-size: clamp(42px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -2px; color: var(--fink); margin: 22px 0 0; max-width: 14ch; }
.foot__stmt-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.foot__meta--editorialB { margin-top: 84px; padding-top: 22px; }

@media (max-width: 780px) {
  .foot__ed { grid-template-columns: 1fr; gap: 16px; }
  .foot__v--editorialA, .foot__v--editorialB { padding-top: 80px; }
  .foot__meta { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .foot__stmt-row { margin-top: 28px; }
  [data-footlinks="quiet"] .foot__links--grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .foot__links { margin-top: 44px; padding-top: 28px; }
}

/* ===================================================================
   EMAIL CHOOSER MODAL (mailgo-style, custom). Opens from any footer
   email trigger (Open email button, or a displayed address). Light
   card on a dim scrim; works over both dark and light pages.
   =================================================================== */
.mailgo { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.mailgo.is-open { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.mailgo__backdrop { position: absolute; inset: 0; background: rgba(6, 12, 28, 0.6); }
.mailgo__card {
  position: relative; width: 100%; max-width: 384px; box-sizing: border-box;
  background: #fff; border-radius: 20px; padding: 26px 24px 20px;
  box-shadow: 0 30px 90px rgba(3, 12, 40, 0.4);
  transform: translateY(10px) scale(0.98); opacity: 0;
  transition: transform .24s cubic-bezier(0.16,1,0.3,1), opacity .24s ease;
}
.mailgo.is-open .mailgo__card { transform: none; opacity: 1; }
.mailgo__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: #f0f3f9; color: #56617a;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease;
}
.mailgo__close:hover { background: #e5eaf4; color: #031b4e; }
.mailgo__label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #96a2b6; margin: 0 0 4px; }
.mailgo__addr { font-family: var(--sans); font-size: 19px; font-weight: 800; color: #031b4e; margin: 0 0 20px; word-break: break-all; }
/* pull rows out by the row padding so the icon tiles line up with the header text */
.mailgo__actions { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
.mailgo__action {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: #031b4e;
  text-align: left; text-decoration: none; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px; padding: 10px 12px; width: 100%;
  transition: background .16s ease;
}
.mailgo__action:hover { background: #f2f5fb; }
.mailgo__ico {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px;
  background: #f2f5fb; display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s ease;
}
.mailgo__action:hover .mailgo__ico { background: #e7edf7; }
.mailgo__ico img { width: 22px; height: 22px; display: block; }
.mailgo__ico svg { width: 21px; height: 21px; color: #0a1f4d; }
.mailgo__txt { flex: 1 1 auto; }
.mailgo__ext { color: #b4becd; font-size: 15px; font-weight: 700; }
.mailgo__state { font-size: 13px; font-weight: 700; color: #3fae5a; opacity: 0; transition: opacity .16s ease; }
.mailgo__action.is-copied .mailgo__state { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mailgo, .mailgo__card { transition: none; } }
@media (max-width: 520px) {
  .mailgo { align-items: flex-end; padding: 0; }
  .mailgo__card { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: 28px; transform: translateY(100%); }
}

/* ===================================================================
   ===== ABOUT PAGE ===================================================
   about.html. Apple-clean: neutral bands, hairlines, minimal decoration.
   All review variants baked: editorial-C story collage, muted numbered
   values, no photo tape, dark footer.
   =================================================================== */
.about { font-family: var(--sans); color: #031b4e; }
.about-wrap { max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.about-band { padding: 96px 0; }
.about-band--grey { background: #f5f6f8; }

/* section heads */
.about-sechead { max-width: 1144px; margin: 0 auto 56px; padding: 0 32px; box-sizing: border-box; }
.about-eyebrow { font-family: var(--serif); font-style: italic; font-size: 21px; color: #8a97ad; margin: 0 0 10px; }
.about-title { font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.8px; line-height: 1.1; margin: 0; color: inherit; }

/* hero: one line, clean photo */
.about-hero { padding: 170px 0 36px; }
/* story merges up into the hero: no header, tight top */
.about-band.about-story { padding-top: 24px; }
.about-hero__inner { max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; display: grid; grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: center; }
.about-hero__title { font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -1.6px; line-height: 1.08; margin: 0 0 18px; color: #031b4e; }
.about-hero__sub { font-size: 19px; font-weight: 600; color: #5a6a85; margin: 0; }
.about-hero__photo { margin: 0; max-width: 460px; justify-self: end; }
.about-hero__photo img { display: block; width: 100%; height: auto; }

/* taped-photo treatment (hero portrait + story collage; rotation kept subtle) */
.about-taped { margin: 0; background: #fff; padding: 10px 10px 14px; box-shadow: 0 12px 34px rgba(3, 27, 78, 0.10); transform: rotate(var(--rot, 0deg)); position: relative; }
.about-taped img { display: block; width: 100%; height: auto; }

/* story: scrapbook-editorial (inspired by oliviatruong.design): left photo collage with a
   small overlapping image; right column offset photo, bold lead + body, scattered photo */
.about-editc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1140px; margin: 0 auto; align-items: start; }
.about-editc__img, .about-editc figure { margin: 0; }
.about-editc__collage { position: relative; padding-bottom: 40px; }
/* portrait sits in a fixed frame so it can be zoomed / recomposed; height trimmed 22px off top & bottom */
.about-editc__big { container-type: inline-size; translate: -24px 0; }
.about-editc__big .about-editc__frame { overflow: hidden; height: calc(100cqw * 1.25 - 44px); }
.about-editc__big img { display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.07); transform-origin: 0% 62%; }
.about-editc__cap { font-size: 13px; color: #8a97ad; padding: 10px 4px 0; }
.about-editc__small { position: absolute; right: -24px; bottom: 0; width: 48%; translate: -6px 33px; }
.about-editc__small img { display: block; width: 100%; height: auto; }
.about-editc__col { display: flex; flex-direction: column; }
.about-editc__top { width: 80%; margin-left: auto; }
.about-editc__top img, .about-editc__low img { display: block; width: 100%; height: auto; }
.about-editc__prose { margin: 44px 0 8px; }
.about-editc__lead { font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.32; letter-spacing: -0.3px; color: #031b4e; margin: 0 0 22px; }
.about-editc__prose p:not(.about-editc__lead) { font-size: 16px; line-height: 1.7; color: #4f5f84; margin: 0 0 16px; }
.about-editc__low { width: 62%; margin: 24px 0 0 auto; translate: 0 16px; }
/* per-image grade on the location shots (not the personal portrait) so they read
   less like polished stock — each tuned individually */
.about-editc__top img   { filter: saturate(0.87) brightness(1.03) contrast(0.99); }  /* Bristol */
.about-editc__small img { filter: saturate(0.76) brightness(0.99) contrast(0.94); }  /* Bali    */
.about-editc__low img   { filter: saturate(1) brightness(1.05) contrast(0.91); }     /* Lisbon  */

/* things I love */
.about-loves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.about-love { background: #fff; border: 1px solid #e6eaf2; border-radius: 14px; overflow: hidden; }
.about-love img { display: block; width: 100%; height: auto; }
.about-love h3 { font-size: 17px; font-weight: 800; margin: 16px 18px 6px; color: #031b4e; }
.about-love p { font-size: 14.5px; line-height: 1.5; color: #5a6a85; margin: 0 18px 18px; }

/* side projects: three equal neutral cards */
.about-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.about-pcard { background: #fff; border: 1px solid #e6eaf2; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.about-pcard > img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.about-pcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; align-items: flex-start; }
.about-pbadge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a97ad; margin-bottom: 10px; }
.about-pbadge__dot { width: 8px; height: 8px; border-radius: 50%; }
.about-pbadge__dot--gold { background: #ffb833; }
.about-pbadge__dot--teal { background: #1f9a8b; }
.about-pbadge__dot--slate { background: #a9b3c9; }
.about-pcard h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: #031b4e; }
.about-pcard p { font-size: 14.5px; line-height: 1.55; color: #5a6a85; margin: 0 0 16px; }
.about-pcard__cta { margin-top: auto; font-weight: 800; font-size: 14.5px; color: var(--accent, #0067ff); text-decoration: none; }
.about-pcard__cta:hover { text-decoration: underline; }
.about-pcard__cta[aria-disabled="true"] { color: #8a97ad; pointer-events: none; }

/* values: numbered editorial rows, muted oversized sans figures */
.about-vals2 { max-width: 1000px; margin: 4px auto 0; }
.about-val { display: grid; grid-template-columns: 108px 1fr; column-gap: 36px; align-items: start; padding: 34px 0; border-top: 1px solid rgba(3, 27, 78, 0.12); }
.about-val:last-child { border-bottom: 1px solid rgba(3, 27, 78, 0.12); }
.about-val__head { display: contents; }
.about-val__num { grid-column: 1; grid-row: 1 / 3; font-family: var(--sans); font-weight: 800; font-size: 58px; letter-spacing: -2px; line-height: 0.8; color: #c8d1e2; font-variant-numeric: tabular-nums; }
.about-val h3 { grid-column: 2; grid-row: 1; margin: 0; font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.3px; line-height: 1.25; color: #031b4e; }
.about-val p { grid-column: 2; grid-row: 2; margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: #4f5f84; }

/* reveal on scroll (JS adds .is-inview); disabled under reduced motion */
.about-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.about-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .about-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .about-taped { transform: none; }
}

/* responsive */
@media (max-width: 900px) {
  .about-band { padding: 64px 0; }
  .about-hero { padding: 140px 0 28px; }
  .about-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .about-hero__photo { justify-self: start; max-width: 320px; }
  .about-loves { grid-template-columns: 1fr 1fr; }
  .about-projects { grid-template-columns: 1fr; }
  .about-val { grid-template-columns: 80px 1fr; column-gap: 26px; }
  .about-val__num { font-size: 44px; }
  /* story collage: single column, stop the overlap/offsets */
  .about-editc { grid-template-columns: 1fr; gap: 32px; }
  .about-editc__collage { padding-bottom: 0; }
  .about-editc__big, .about-editc__small, .about-editc__low { translate: none; }
  .about-editc__small { position: static; width: 68%; margin: 16px 0 0 auto; }
  .about-editc__top, .about-editc__low { width: 100%; margin: 0; }
  .about-editc__prose { margin: 8px 0; }
  .about-editc__low { margin-top: 16px; }
}
@media (max-width: 560px) {
  .about-loves { grid-template-columns: 1fr; }
}

/* ===================================================================
   ===== CONTACT PAGE (contact.html) =================================
   A whole-page version of the footer's contact block: the "index" layout
   (lead column + label/value ledger). Reuses the footer button classes
   (.foot__btn) — tokens set locally below.
   =================================================================== */
.contact-page {
  font-family: var(--sans);
  /* footer light-theme tokens, scoped so .foot__btn works off-footer */
  --fbg: #ffffff; --fink: #031b4e; --fmuted: #5a6a85; --ffaint: #96a2b6;
  --fborder: #e2e9f5; --fprimary: #0a1f4d;
  --fghost-bd: #c9d5e8; --fghost-ink: #031b4e;
  color: var(--fink);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}
.cpage { display: block; width: 100%; padding: 140px 0 90px; }
.cpage__wrap { max-width: 1144px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.cpage__eyebrow { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ffaint); margin: 0 0 14px; }
.cpage__title { font-weight: 800; font-size: clamp(44px, 6vw, 84px); letter-spacing: -2px; line-height: 1.02; margin: 0 0 22px; color: var(--fink); }
.cpage__lead { font-size: 19px; line-height: 1.6; color: var(--fmuted); max-width: 30ch; margin: 0 0 30px; }
.cpage__actions { margin-top: 4px; }

/* B: index — lead column + label/value ledger */
.cpage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.cpage--index .cpage__title { font-size: clamp(40px, 4.6vw, 60px); }
.cpage--index .cpage__actions { margin-top: 34px; }
.cpage__index { margin: 6px 0 0; }
/* nudge the ledger down a touch from centre (desktop only) */
@media (min-width: 861px) { .cpage__index { transform: translateY(20px); } }
.cpage__row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--fborder); }
.cpage__row:last-child { border-bottom: 1px solid var(--fborder); }
.cpage__row dt { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ffaint); }
.cpage__row dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--fink); }
.cpage__row dd a { color: var(--fink); text-decoration: none; border-bottom: 1px solid var(--fborder); transition: border-color .2s ease; }
.cpage__row dd a:hover { border-bottom-color: var(--fink); }

@media (max-width: 860px) {
  .contact-page { min-height: 0; }
  .cpage { padding: 120px 0 72px; }
  .cpage__grid { grid-template-columns: 1fr; gap: 44px; }
}