/* ==========================================================================
   Sections — desktop-first layout (1440px Figma reference).
   Small-screen adaptation lives in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
/* Sticky glass pill — floats ~110px from each desktop edge, stays translucent
   at every scroll position and adapts its foreground to the section beneath. */
.site-header {
  position: fixed;
  inset: var(--sp-4) 0 auto 0;
  z-index: var(--z-nav);
  pointer-events: none;                 /* only the pill itself is interactive */
  transition: inset var(--dur-2) var(--ease-out);
}
.site-header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  /* aligns with the container's content box — ~110px from each edge at 1440,
     and always keeps at least a small float on narrower screens */
  max-width: min(var(--content-max), calc(100% - 2 * var(--sp-6)));
  margin-inline: auto;
  padding: 0.9rem 1.15rem 0.9rem 1.8rem;
  border-radius: var(--nav-radius);
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    max-width var(--dur-2) var(--ease-out),
    padding-inline var(--dur-2) var(--ease-out);
}
/* section-aware foreground: header carries data-over="dark" | "light" (set in JS) */
.site-header {
  --nav-fg: var(--nav-fg-dark);
  --nav-plate: rgba(15, 24, 37, 0.62);
  --nav-hairline: rgba(255, 255, 255, 0.18);
  --nav-plate-strong: rgba(13, 21, 33, 0.76);
}
.site-header[data-over="light"] {
  --nav-fg: var(--nav-fg-light);
  --nav-plate: rgba(255, 255, 255, 0.82);
  --nav-hairline: rgba(20, 30, 45, 0.12);
  --nav-plate-strong: rgba(255, 255, 255, 0.92);
}
.site-header__inner {
  background: var(--nav-plate);
  border-color: var(--nav-hairline);
  color: var(--nav-fg);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.45);
}
.site-header.is-scrolled .site-header__inner {
  background: var(--nav-plate-strong);
  box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.42);
}
.site-header.is-scrolled { inset: 0.6rem 0 auto 0; }

/* at the top of the page (over the hero): no plate, no blur — the nav sits
   clear on the background. The glass pill fades in once the page scrolls. */
.site-header:not(.is-scrolled) .site-header__inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* full-background state only: sit flush with the page's own --gutter (same
   column the rest of the page content uses) instead of the pill's own fixed
   1218px box — the scrolled pill below keeps its existing width untouched.
   Scoped above the mobile breakpoint so the ≤860px hamburger layout (which
   sets its own max-width/padding in responsive.css) is unaffected. */
@media (min-width: 861px) {
  .site-header:not(.is-scrolled) .site-header__inner {
    max-width: none;
    padding-inline: var(--gutter);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}
.brand__mark { color: var(--c-mint); flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: -0.04em;
  line-height: 1;
}

.site-nav { display: flex; align-items: center; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding-inline: var(--sp-3);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-md);
  color: inherit;
  padding-block: 0.4rem;
  position: relative;
  transition: opacity var(--dur-2) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-mint);
  transition: right var(--dur-2) var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link:active::after { right: 0; }
.nav-link:active { opacity: 0.65; }

.nav-toggle { display: none; }
.nav-list__close-item { display: none; }

/* Work preview — a small hover/focus menu off the "My work" nav link,
   jumping straight to a case study without opening the Work page first.
   CSS-only (hover + focus-within) so it needs no extra JS wiring; desktop
   only — the mobile menu already lists every page as a plain link. */
.nav-item--preview { position: relative; }
.nav-preview {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding-top: var(--sp-3);              /* closes the hover gap to the link above */
  width: max-content;
  min-width: 15rem;
  max-width: 18rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  z-index: 5;
}
.nav-preview__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-soft);
}
.nav-item--preview:hover .nav-preview,
.nav-item--preview:focus-within .nav-preview {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-preview__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  transition: background-color var(--dur-2) var(--ease-out);
}
.nav-preview__item:hover,
.nav-preview__item:focus-visible { background: var(--c-field-bg); }
.nav-preview__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.2;
}
.nav-preview__ctx {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  color: var(--c-grey-soft);
}
@media (prefers-reduced-motion: reduce) {
  .nav-preview { transition: none; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  padding-top: clamp(7rem, 5rem + 9vw, 10rem);
  padding-bottom: clamp(4rem, 2rem + 10vw, 7rem);
  color: var(--c-white);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.hero__bg-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 42, 66, 0.35) 0%, rgba(30, 52, 78, 0.15) 32%, rgba(41, 64, 89, 0.55) 78%, rgba(41, 64, 89, 0.92) 100%);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  /* tighter than the section-level rhythm elsewhere on purpose — the
     support line reads as part of the headline, so the body content
     (lede, CTA, photo) should feel like it follows on directly rather
     than sitting in its own separated block. */
  gap: clamp(1.25rem, 0.9rem + 1.75vw, 2rem);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.08;
}
/* the support line sits outside .hero__body-text's 468px column — its own
   flex wrapper with the H1 so it spans the full hero width and reads as
   one line, instead of being squeezed into the narrow lede column. */
.hero__headline {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.55rem + 0.9vw, 1.25rem);
}
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 468px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 5vw, 4.5rem);
  align-items: start;
}
.hero__body-text { max-width: 468px; }
/* an italic aside under the H1 — same treatment as .hero__loc's "Nairobi,
   working globally" below — kept a size and weight down from .hero__lede
   so it reads as a quiet gloss on the headline, not a second lede
   competing with the real one underneath it. */
.hero__support {
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-support);
  line-height: var(--lh-body);
  color: var(--c-grey-e8);
  white-space: nowrap;
}
.hero__lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
}
.hero .btn--glass { margin-top: 2.25rem; }
.hero__loc {
  margin-top: 1.1rem;
  font-size: var(--fs-body);
  color: var(--c-grey-e8);
}
.hero__loc em { font-style: italic; font-weight: 500; }

.hero__media {
  align-self: start;
  margin-top: clamp(0.5rem, 0.2rem + 2vw, 2.5rem);
  max-width: 700px;
  justify-self: end;
}
.hero__media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  transform: rotate(1.2deg);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.stat:first-child { text-align: left; }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
}
.stat__label {
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--c-grey-df);
}

/* --------------------------------------------------------------------------
   PHILOSOPHY
   -------------------------------------------------------------------------- */
.philosophy__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  column-gap: var(--sp-8);
  row-gap: 0;
}
.philosophy__aside { grid-column: 1; grid-row: 1; }
.philosophy__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-grey-soft);
  max-width: 30ch;
}
.philosophy__statement {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: var(--fs-manifesto);
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-align: right;
  color: var(--c-ink);
  align-self: start;
  /* nudged down from the aside label beside it so the statement reads
     closer to the image cluster below, uniting text and photos as one
     block instead of the text sitting up near the section's own top edge. */
  margin-top: var(--sp-8);
}

/* the connected image composition — two staggered photos with a rough
   hand-drawn rectangle tucked behind them, linking the pair (matches Figma) */
.philosophy__cluster {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  /* was a large negative pull-up (as much as -80px) tuned for one exact
     copy length — any longer statement collided with the photos below it.
     A small, fixed, always-positive gap keeps the cluster tucked close
     (reading as one composition with the statement) without ever
     overlapping the text, regardless of how many lines it wraps to. */
  margin-top: 0.5rem;
  /* taller than a plain 100/37 crop to give the enlarged second photo
     (below) room to grow without its bottom edge running into the next
     section — the staggered look (right photo extending lower than the
     left one) is already the existing rhythm, just carried a bit further. */
  aspect-ratio: 100 / 50;
}
.philosophy__img {
  position: absolute;
  width: 38.5%;
  aspect-ratio: 468 / 255;
  margin: 0;
  z-index: 2;
}
.philosophy__img--1 { left: 0; top: 0; }
/* the source photo is much taller per unit width than this box's 468:255
   crop — bias the cover crop toward the top so it keeps the face and the
   laptop/hands both in frame instead of a plain center crop, which cuts
   into the top of the head. */
.philosophy__img--1 img { object-position: center 33%; }
/* same top-left anchor as before (so the mint connector below still reads
   as pointing at this exact corner) — just bigger, extending further right
   and down to fill the space instead of leaving it empty. */
.philosophy__img--2 { left: 41%; top: 44%; width: 50%; }
.philosophy__link {
  position: absolute;
  left: 25%;
  top: 32%;
  width: 33.3%;
  aspect-ratio: 404 / 204;
  z-index: 1;
  border: 5px solid var(--c-mint);
  /* keep the connector a bolder scribble than the photo frames */
  border-image: url("../assets/brush-image.svg") 54 / 18px / 6px round;
  border-radius: 20px;
  transform: rotate(-0.6deg);
  pointer-events: none;
}

/* the image cluster already carries its own visual weight down to the edge
   of the section — the enlarged second photo now reaches close to the
   section's own bottom edge, so its own padding-bottom (from .section) is
   trimmed too, on top of the existing trim on the section that follows. */
.philosophy { padding-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); }
.philosophy + .work { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* --------------------------------------------------------------------------
   FEATURED PORTFOLIO
   -------------------------------------------------------------------------- */
/* Featured Portfolio header — unlike the shared .section-head (title left,
   lede right, for sections where the two sit comfortably side by side),
   this header stacks label → title → supporting copy so the statement
   reads as a lead-in to the work below it, not a separate two-column
   block floating above a large gap. Width widened so the copy comfortably
   holds ~3 sentences; margin-bottom trimmed so the grid follows it as a
   continuation of the same thought rather than a new, distant block. */
.work__head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.work__head .section-head__lede {
  text-align: left;
  max-width: 62ch;
}

.work__collage {
  --gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* one clean, equal grid — every cell the same size, no stagger or tilt */
.work-item { grid-column: auto; margin: 0; }

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: inherit;
}
.work-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;            /* every card visual is the same shape */
  overflow: hidden;
  border-radius: var(--r-xl);
  transform: scale(1);
  transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
/* YONA's preview doesn't share the 16:9 crop everyone else does (it's
   1600:1045, a little taller per unit width) — object-fit:contain avoided
   cropping but left visible letterboxing either side, which reads as
   empty space in the grid. Cover fills the box completely; the box is
   nudged to 8:5 (a little taller than 16:9, short of the asset's own
   ratio) so the phones keep their full top/bottom edges without
   exaggerating the card's height next to its row partner. */
.work-card__media--contain {
  aspect-ratio: 8 / 5;
  background: var(--c-ink-3);
}
.work-card__media--contain img {
  object-fit: cover;
  object-position: center 40%;
}

/* --- hover reveal: the case-study summary slides over the visual -------
   (landing page only). On touch devices the overlay is hidden and the
   summary below is shown instead — see .work-card__summary. */
.work-card__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  color: #fff;
  background: linear-gradient(to top,
    rgba(19, 6, 10, 0.94) 0%,
    rgba(19, 6, 10, 0.82) 38%,
    rgba(19, 6, 10, 0.18) 80%,
    rgba(19, 6, 10, 0) 100%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.work-card__reveal-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.work-card__view {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.work-card__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.work-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.22;
  letter-spacing: normal;
  color: var(--c-ink);
}
.work-card__context {
  font-size: var(--fs-sm);
  color: var(--c-grey-mid);
}
/* high-level story — shown below the visual on touch devices (where the
   hover overlay can't work); hidden where hover is available. Clamped to a
   short teaser at any width so it always reads as high-level, matching the
   brevity of the hover-reveal text it stands in for. */
.work-card__summary {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-grey-dark);
  max-width: 48ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.work-card__cta span { transition: transform var(--dur-2) var(--ease-out); }
/* the arrow CTA only applies to projects that expose a real destination
   (a real <a>, or an <article> upgraded to a link via [data-href]) */
.work-card:not([data-href]):not(a) .work-card__cta--link { display: none; }
.work-card[data-href] .work-card__cta--note,
a.work-card .work-card__cta--note { display: none; }
a.work-card { text-decoration: none; }

@media (hover: hover) {
  /* premium lift: the container expands a touch (no layout shift — this is
     a transform, not a size change) and picks up a soft elevation shadow;
     the image inside zooms a little further still for depth. Both share the
     same refined ease-out so the motion reads as one considered move. */
  .work-card:hover .work-card__media,
  .work-card:focus-within .work-card__media {
    transform: scale(1.015);
    box-shadow: var(--shadow-soft);
  }
  .work-card:hover .work-card__media img,
  .work-card:focus-within .work-card__media img {
    transform: scale(1.04);
  }
  .work-card:hover .work-card__cta span,
  .work-card:focus-within .work-card__cta span {
    transform: translateX(4px);
  }
  /* landing-page cards: summary + read link live in the hover overlay,
     so only the name and context sit under the visual */
  .work__collage--reveal .work-card__summary,
  .work__collage--reveal .work-card__cta--link { display: none; }
  .work__collage--reveal .work-card:hover .work-card__reveal,
  .work__collage--reveal .work-card:focus-within .work-card__reveal {
    opacity: 1;
  }
}
@media (hover: none) {
  /* touch: no overlay — the summary below carries the story */
  .work__collage--reveal .work-card__reveal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card__media { transition: none; }
  .work-card__media img { transition: none; }
  .work-card__reveal { transition: none; }
}
.work-card:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 6px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   SERVICES (dark)
   -------------------------------------------------------------------------- */
/* dark torn slab — the section is a hand-cut dark panel, not a clean rectangle.
   The light sections above/below show through the torn notches. */
/* Services ground — a dark #0B121C panel with VERITE torn top + bottom edges
   (recipe 04). The panel is a ::before layer so it can bleed past the section
   and tear into the light sections above and below without clipping content. */
.services {
  position: relative;
  background: transparent;                              /* the ::before slab is the only dark surface */
  padding-top: calc(var(--section-pad-y) + 19px);
  padding-bottom: calc(var(--section-pad-y) + 19px);
}
/* the dark slab = the Services background image itself, cut to a torn silhouette
   by an alpha mask, so the edge blends into the texture (no flat fill band) */
.services::before {
  content: "";
  position: absolute;
  inset: -15px 0;                                       /* torn edges bleed into the light sections */
  z-index: 0;
  pointer-events: none;
  background:
    url("../assets/img/services-bg.jpg") center / cover no-repeat,
    var(--c-ink-3);
  -webkit-mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
          mask:
    url("../assets/mask-slab-top.svg?v=8")    top    / 100% 29px no-repeat,
    url("../assets/mask-slab-bottom.svg?v=8") bottom / 100% 29px no-repeat,
    linear-gradient(#000, #000)               center / 100% calc(100% - 54px) no-repeat;
}
.services > .container { position: relative; z-index: 1; }
.services__head { margin-bottom: clamp(3rem, 1.5rem + 6vw, 5rem); }
.services__title { font-size: var(--fs-section); }
.services__subtitle {
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: 1.125rem;          /* Figma: 18px */
  line-height: 1.6;
  color: var(--c-white);
  max-width: 55ch;
  /* prevents a short orphaned last line by balancing line lengths instead
     of always filling to max-width — no copy change, no manual <br> */
  text-wrap: balance;
}

.svc-item {
  position: relative;
  /* one source of truth for the label gutter — keeps the panel body flush with the title */
  --svc-gap: clamp(1.5rem, 0.5rem + 6vw, 10rem);   /* Figma: 160px between (00x) and name */
}
/* VERITE decorative divider between rows (recipe 05 · #B8B8BD) */
.svc-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 12px;
  background: var(--brush-divider) repeat-x;
  background-size: 340px 12px;
  opacity: 0.4;
  pointer-events: none;
}
.svc-item:last-of-type::after { display: none; }
.svc-item__heading { margin: 0; font: inherit; }
.svc-item__trigger {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  column-gap: var(--svc-gap);
  width: 100%;
  padding-block: var(--sp-4);
  text-align: left;
  color: var(--c-white);
}
.svc-item__num { font-size: var(--fs-xs); color: var(--c-white); }
.svc-item__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.5rem;            /* Figma: 24px Archivo Medium */
}
.svc-item__icon {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--c-white);   /* Figma: 40px rounded square, white hairline */
  border-radius: 20px;
  flex: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
.svc-item__icon::before,
.svc-item__icon::after {
  content: "";
  position: absolute;
  inset: 50% 28% auto 28%;
  height: 1.5px;
  background: var(--c-white);
  transform: translateY(-50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.svc-item__icon::after { transform: translateY(-50%) rotate(90deg); }
.svc-item.is-open .svc-item__icon::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.svc-item__trigger:hover .svc-item__icon { border-color: var(--c-mint); }
.svc-item__trigger:hover .svc-item__icon::before,
.svc-item__trigger:hover .svc-item__icon::after { background: var(--c-mint); }

.svc-item__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-8);
  /* left inset = num column (60px) + label gutter, so body copy starts exactly under the title */
  padding: 0 56px var(--sp-8) calc(60px + var(--svc-gap));
}
.svc-item__panel-inner:has(.svc-item__body--wide) {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.svc-item__mock {
  width: 260px;
  aspect-ratio: 260 / 170;
  border-radius: var(--r-sm);
  flex: none;
}
.svc-item__pitch {
  font-size: var(--fs-body);
  color: var(--c-white);
  margin-bottom: 0.75rem;
}
.svc-item__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-white);
}
.svc-item__cats-label {
  font-size: var(--fs-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  margin-bottom: var(--sp-4);
}

/* --- Services: hover / focus reveal (replaces the accordion click) --------
   Rows sit collapsed; hovering the row (mouse) or focusing the trigger
   (keyboard) expands the panel. Touch devices — where hover is unreliable —
   show every panel open, matching the Figma default. A max-height transition
   keeps the reveal smooth; the panels are short and near-uniform in height so
   the cap never shows. */
.svc-item__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-3) var(--ease-out);
}
.svc-item:hover > .svc-item__heading + .svc-item__panel,
.svc-item:hover .svc-item__panel,
.svc-item:focus-within .svc-item__panel,
.svc-item.is-open .svc-item__panel { max-height: 34rem; }
/* no JS yet, or a touch device: reveal everything with no cap */
html:not(.js-ready) .svc-item__panel { max-height: none; }
@media (hover: none) {
  .svc-item__panel { max-height: none; }
  .svc-item__icon { display: none; }
  .svc-item__trigger { cursor: default; }
}
/* the +/− glyph reads as a state cue, so rotate it when the row is active */
.svc-item:hover .svc-item__icon::after,
.svc-item:focus-within .svc-item__icon::after,
.svc-item.is-open .svc-item__icon::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.svc-item:hover .svc-item__icon,
.svc-item:focus-within .svc-item__icon { border-color: var(--c-mint); }
.svc-item:hover .svc-item__icon::before,
.svc-item:focus-within .svc-item__icon::before,
.svc-item:hover .svc-item__icon::after,
.svc-item:focus-within .svc-item__icon::after { background: var(--c-mint); }
@media (prefers-reduced-motion: reduce) {
  .svc-item__panel { transition: none; }
}

/* 004 — the integrated offer (row label stays white, like the rest) */
.svc-item--feature .svc-item__num,
.svc-item--feature .svc-item__name { color: var(--c-white); }

.services__closing {
  margin-top: var(--sp-8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-grey-70);
  max-width: 90ch;
}

/* mid-page CTA */
.mid-cta {
  position: relative;
  margin-top: clamp(6rem, 3rem + 12vw, 13rem);
  padding-block: clamp(2rem, 1rem + 6vw, 6rem) clamp(3rem, 1rem + 8vw, 8rem);
  text-align: center;
}
.mid-cta__scatter { position: absolute; inset: 0; z-index: 0; }
/* orbit wrapper — traces a slow, continuous *circle* around its anchor point
   (keeping the photo upright), so the work literally orbits the idea */
.mid-cta__orbit {
  position: absolute;
  animation: mid-orbit-cw var(--orbit-dur, 24s) linear infinite;
  animation-delay: var(--orbit-delay, 0s);
  will-change: transform;
}
.mid-cta__ph {
  position: relative;
  display: block;
  opacity: 1;
  transform: rotate(var(--ph-rot, 0deg));
  transform-origin: center;
  transition: transform var(--dur-3) var(--ease-out);
}
.mid-cta__ph--3 img { object-position: 50% 42%; }
.mid-cta__ph--4 img { object-position: 46% 38%; }
/* secondary organic drift on the photo itself, layered on the orbit */
.mid-cta__ph img {
  animation: mid-drift var(--drift-dur, 12s) var(--ease-in-out) infinite alternate;
  animation-delay: var(--drift-delay, 0s);
}

/* wider sweep around the centred statement — the work orbits the idea */
.mid-cta__orbit--1 { left: 3%;  top: 0;     --orbit-r: 40px; --orbit-dur: 18s; --orbit-delay: -3s;  --drift-dur: 11s; --drift-delay: -2s;  }
.mid-cta__orbit--2 { right: 2%; top: 4%;    --orbit-r: 52px; --orbit-dur: 22s; --orbit-delay: -13s; --drift-dur: 13s; --drift-delay: -6s;  animation-name: mid-orbit-ccw; }
.mid-cta__orbit--3 { left: 5%;  bottom: 4%; --orbit-r: 44px; --orbit-dur: 20s; --orbit-delay: -8s;  --drift-dur: 12s; --drift-delay: -9s;  }
.mid-cta__orbit--4 { right: 3%; bottom: 0;  --orbit-r: 56px; --orbit-dur: 24s; --orbit-delay: -19s; --drift-dur: 14s; --drift-delay: -4s;  animation-name: mid-orbit-ccw; }
.mid-cta__ph--1 { width: clamp(150px, 18vw, 240px); aspect-ratio: 237 / 250; --ph-rot: -15deg; }
.mid-cta__ph--2 { width: clamp(180px, 22vw, 312px); aspect-ratio: 310 / 200; --ph-rot:  15deg; }
.mid-cta__ph--3 { width: clamp(150px, 18vw, 240px); aspect-ratio: 237 / 250; --ph-rot: -15deg; }
.mid-cta__ph--4 { width: clamp(170px, 21vw, 296px); aspect-ratio: 294 / 200; --ph-rot:  15deg; }

@keyframes mid-orbit-cw {
  from { transform: rotate(0)      translateX(var(--orbit-r, 14px)) rotate(0); }
  to   { transform: rotate(1turn)  translateX(var(--orbit-r, 14px)) rotate(-1turn); }
}
@keyframes mid-orbit-ccw {
  from { transform: rotate(0)       translateX(var(--orbit-r, 14px)) rotate(0); }
  to   { transform: rotate(-1turn)  translateX(var(--orbit-r, 14px)) rotate(1turn); }
}
@keyframes mid-drift {
  from { transform: translateY(-6px) rotate(-2deg); }
  to   { transform: translateY(6px)  rotate(2deg); }
}

/* hover / focus — the photo grows to twice its size and lifts above the rest */
@media (hover: hover) {
  .mid-cta__orbit:hover,
  .mid-cta__orbit:focus-within { z-index: 6; }
  .mid-cta__orbit:hover .mid-cta__ph,
  .mid-cta__orbit:focus-within .mid-cta__ph {
    transform: rotate(var(--ph-rot, 0deg)) scale(1.3);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mid-cta__orbit,
  .mid-cta__ph img { animation: none; }
}

.mid-cta__statement {
  position: relative;
  z-index: 1;
  max-width: 612px;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3rem);
  font-family: var(--font-body);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.5rem);
  line-height: 2;
  letter-spacing: 0.4px;
  color: var(--c-grey);          /* second sentence — #b8b8bd, per the reference */
}
.mid-cta__statement-lead { color: var(--c-white); }   /* first sentence */
.mid-cta .btn--glass { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
.about__head { align-items: flex-end; }
.about__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(3rem, 1.5rem + 6vw, 5.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.about__copy { display: flex; flex-direction: column; gap: 1.4rem; max-width: 62ch; }
.about__copy p { font-size: 1.25rem; line-height: 1.6; }
.about__portrait {
  width: 100%;
  aspect-ratio: 430 / 465;
  border-radius: var(--r-xl);
}
.about__portrait img { filter: grayscale(1) contrast(1.03); }
.about__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.about__gallery li {
  flex: 1 1 240px;
  max-width: 406px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
}
.about__gallery li:nth-child(2) { margin-top: 2.5rem; }
.about__gallery li:nth-child(3) { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   HOW I WORK — bento
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
.bento .step:nth-child(1) { grid-column: span 3; } /* Understand   — wide  */
.bento .step:nth-child(2) { grid-column: span 2; } /* Define       — narrow */
.bento .step:nth-child(3) { grid-column: span 2; } /* Design & Test — narrow */
.bento .step:nth-child(4) { grid-column: span 3; } /* Ship         — wide  */

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7);
  border: var(--bw-thin) solid var(--c-mint);
  border-image: var(--brush-step);   /* verite stroke with a 20px round corner baked in */
  border-radius: var(--r-xl);        /* 20px — every step card */
}
.step__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-ink);
}
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--c-grey-dark);
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}
.step__title { font-size: var(--fs-card-title); line-height: 1.2; letter-spacing: normal; }
.step__pitch {
  font-size: var(--fs-sm);
  color: var(--c-ink);
  font-weight: 400;
}
.step__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.step__outputs {
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--c-grey-dark);
  background: var(--brush-divider) top left / 300px 12px repeat-x;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-9);
  align-items: start;
}
.faq__title { font-size: var(--fs-section-sm); line-height: 0.95; }
.faq__intro {
  margin-top: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-grey-mid);
  max-width: 40ch;
}
.faq__aside .meta-table { margin-top: clamp(2rem, 1rem + 6vw, 6rem); }

.faq__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: var(--c-white);
  border: var(--bw-thin) solid var(--c-mint);     /* recipe 02 — UI control, solid fallback */
  border-image: var(--brush-step);                /* match How I Work — 20px round corner baked in */
  border-radius: var(--r-xl);                     /* 20px */
  transition: filter var(--dur-2) var(--ease-out);
}
.faq-item:hover { filter: drop-shadow(0 0 8px rgba(0, 255, 188, 0.4)); }
.faq-item__heading { margin: 0; font: inherit; }
.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  color: var(--c-ink);
}
/* open/close control — mirrors the Services accordion icon (hairline circle, rotating crossbar, mint on hover) */
.faq-item__icon {
  position: relative;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--c-ink);
  border-image: none;
  border-radius: 20px;
  transition: border-color var(--dur-2) var(--ease-out);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 50% 28% auto 28%;
  height: 1.5px;
  background: var(--c-ink);
  transform: translateY(-50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.faq-item__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon::after { opacity: 0; transform: translateY(-50%) rotate(0); }
.faq-item__trigger:hover .faq-item__icon { border-color: var(--c-mint); }
.faq-item__trigger:hover .faq-item__icon::before,
.faq-item__trigger:hover .faq-item__icon::after { background: var(--c-mint); }
.faq-item__panel > * { padding: 0 var(--sp-6) var(--sp-6); }
.faq-item__panel p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-grey-mid);
}

/* --------------------------------------------------------------------------
   CLOSING — Contact + Footer share ONE full-bleed landscape photograph.
   The image begins behind Contact and continues, seamless, through the
   whole Footer. No solid panel, no seam.
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  isolation: isolate;
  background: transparent;
  /* breathing room before the closing photo/CTA/footer block, so it reads
     as a deliberate, separate final section rather than butting straight
     up against whatever content happens to precede it on a given page.
     Shared here (rather than on each page's last section) so the gap is
     identical everywhere .closing is used. */
  margin-top: clamp(2rem, 1.4rem + 3vw, 4rem);
}
/* the closing photo panel itself carries the torn top edge (alpha mask), so the
   tear blends into the landscape image instead of a flat strip */
.closing__bg {
  position: absolute;
  inset: -15px 0 0 0;             /* torn top bleeds up into the white FAQ */
  z-index: 0;
  overflow: hidden;
  background: var(--c-ink-3);      /* base colour behind the photo while it loads */
  -webkit-mask:
    url("../assets/mask-slab-top.svg?v=8") top / 100% 29px no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - 27px) no-repeat;
          mask:
    url("../assets/mask-slab-top.svg?v=8") top / 100% 29px no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - 27px) no-repeat;
}
.closing__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.closing__bg-tint {
  position: absolute;
  inset: 0;
  /* deep-blue wash — dark enough for white type over the photo, light enough
     that the sky and hills stay visible from Contact through the Footer */
  background:
    linear-gradient(180deg,
      rgba(14, 23, 36, 0.82) 0%,
      rgba(17, 28, 43, 0.68) 38%,
      rgba(22, 35, 51, 0.55) 68%,
      rgba(25, 39, 57, 0.72) 100%);
}

/* --------------------------------------------------------------------------
   CLOSING CTA — the "Start with a Launch Audit" block. Lives inside .closing,
   over the shared landscape photo, directly above the footer, so the CTA and
   footer read as one concluding section. Copy/hierarchy from Figma node
   566:11844; the image background + torn top edge come from .closing/.closing__bg.
   -------------------------------------------------------------------------- */
/* Closing CTA — the final, most consequential statement on any page it
   appears on, so it's set left-aligned to the same content column as every
   other editorial header on the site (Philosophy, Work, Services, About),
   at a size that matches its weight (the existing --fs-contact-h token,
   previously reserved for a since-unused contact layout) rather than the
   smaller centered treatment a generic "Contact Me" block would use. */
.closing-cta {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem) clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem);
  /* the nav's "Contact" link now scrolls here in-page rather than loading a
     separate page — this keeps the section clear of the floating nav pill
     when the browser jumps straight to #contact. */
  scroll-margin-top: 6rem;
}
.closing-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-contact-h);
  line-height: 1.15;
  color: var(--c-white);
  margin: 0 0 var(--sp-4);
  max-width: 16ch;
}
.closing-cta__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-white);
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}
.closing-cta__email {
  display: block;
  width: fit-content;
  margin: var(--sp-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.closing-cta__email:hover { color: var(--c-mint); }
.closing-cta__rule {
  border: 0;
  height: 12px;
  background: var(--brush-divider) repeat-x;
  background-size: 320px 12px;
  opacity: 0.5;
  max-width: var(--content-max);
  margin: clamp(2.5rem, 2rem + 3vw, 4rem) auto 0;
}
.closing-cta__points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  max-width: 44rem;
}
.closing-cta__point {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-white);
}
.closing-cta__point .icon--check { color: var(--c-mint); flex: none; }

/* --------------------------------------------------------------------------
   FOOTER (dark)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;                 /* sits over the shared .closing photograph */
  background: transparent;
  color: var(--c-white);
}
.site-footer__main {
  position: relative;
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  gap: var(--sp-8);
  align-items: start;
  /* was a flat --sp-9 (80px) regardless of viewport — on mobile that read
     as a large dead gap between the CTA's divider and the footer nav,
     since nothing else fills that width to justify the height. Responsive
     so the two feel like one continuous closing section at every size. */
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: var(--sp-6);
}
.footer-col__title {
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.footer-col a {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.footer-col a:hover { color: var(--c-mint); }
.footer-col__social .icon--arrow { transition: transform var(--dur-2) var(--ease-out); }
.footer-col__social a:hover .icon--arrow { transform: translate(2px, -2px); }

.footer-wordmark {
  justify-self: end;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--fs-brand);
  line-height: 0.8;
  letter-spacing: -0.02em;
}
.footer-wordmark span { display: block; font-size: var(--fs-brand-sub); line-height: 1; }

.site-footer__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-size: var(--fs-3xs);
}
.site-footer__legal { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.site-footer__legal a:hover { color: var(--c-mint); }

/* ---- .closing--centered: centres the CTA text only. The footer below it
   (nav / social / wordmark / bottom bar) stays in its default left-anchored
   layout, spread end to end across the same 111px container gutter every
   other page uses — deliberately NOT centred, so it reads consistently
   with the rest of the site's footer treatment. ---- */
.closing--centered .closing-cta {
  text-align: center;
}
.closing--centered .closing-cta__title,
.closing--centered .closing-cta__text,
.closing--centered .closing-cta__email,
.closing--centered .closing-cta__points {
  margin-left: auto;
  margin-right: auto;
}
.closing--centered .closing-cta__points {
  align-items: center;
  text-align: center;
}
.closing--centered .closing-cta__point {
  justify-content: center;
}