/* =========================================================
   Squarenook — design tokens
   ========================================================= */
:root {
  --bg: #f5f4ea;
  --panel-warm: #f1f0e3;
  --panel-warm-border: #cdcbbd;
  --ink: #06170f;
  --ink-soft: #4d4d4d;
  --grey-1: #5a5a5a;
  --grey-2: #6e6e6e;
  --line: #dedede;
  --line-soft: #e8e8e8;
  --checkbox-border: #d9d9d9;
  --panel: #f7f7f7;
  --panel-2: #f5f4f4;
  /* Warm neutral the case-study gallery blocks sit on. */
  --panel-sand: #ebeade;
  /* Warning/alert accent — used only where the copy is flagging a problem
     (e.g. the "you selected a pain point" hint in the outgrown quiz). */
  --accent: #b81744;
  /* Brand green — the new primary accent for positive/selected/process UI
     (checked states, process-step markers, checklists, the italic "fix"). */
  --accent-green: #3e6517;
  --accent-green-tint: #f7f7eb;
  --tag-text: #655d17;
  --quote-ink: #3f3c20;
  --black-grad-from: #0b0a0a;
  --black-grad-to: #424242;
  --footer-bg: #06170f;
  --footer-text-dim: #959f9a;

  --font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow: "Inria Sans", Georgia, serif;
  --font-serif-italic: "Newsreader", Georgia, serif;

  --max: 1440px;
  --pad: 130px;
  --radius: 8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Case study detail page: how far below the sticky site nav the
     scroll-synced accordion column pins. Read by js/case-study.js
     (getComputedStyle) so the CSS value stays the single source of truth. */
  --cs-sticky-top: 112px;
}

@media (max-width: 900px) {
  :root {
    --pad: 24px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   Page transitions — curtain wipe (MPA, no router).
   .pt-fade/.pt-panel are fixed, unstyled-by-default siblings of a page's
   real content (inserted right after <body> on every page), so animating
   them never touches layout or content. All behavior is driven by classes
   on <html>: js/page-transition-init.js adds "pt-entering" synchronously
   before the incoming page's first paint (so it appears already covered,
   no flash), and js/script.js drives "pt-leaving" (outgoing) and
   "pt-revealing" (incoming). Rest state (no class) = fully hidden.
   ========================================================= */
.pt-fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
}
.pt-panel {
  position: fixed;
  inset: 0;
  background: var(--footer-bg);
  transform: translateY(100%);
  z-index: 10000;
  pointer-events: none;
}

/* Leaving the current page: fade + panel rise together, ~600ms. */
html.pt-leaving .pt-fade {
  opacity: 0.5;
  transition: opacity 0.6s var(--ease);
}
html.pt-leaving .pt-panel {
  transform: translateY(0);
  transition: transform 0.6s var(--ease);
}

/* Landing on the next page: pre-painted already fully covered, with no
   transition, so nothing animates before js/script.js starts the reveal. */
html.pt-entering .pt-fade {
  opacity: 0.5;
  transition: none;
}
html.pt-entering .pt-panel {
  transform: translateY(0);
  transition: none;
}
html.pt-entering body > :not(.pt-fade):not(.pt-panel) {
  opacity: 0.9;
  transform: translateY(24px);
  transition: none;
}

/* Revealing the next page: panel/fade continue upward off-screen while the
   content settles in — same duration/easing on both, kept in sync. */
html.pt-revealing .pt-fade {
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
html.pt-revealing .pt-panel {
  transform: translateY(-100%);
  transition: transform 0.32s var(--ease);
}
html.pt-revealing body > :not(.pt-fade):not(.pt-panel) {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.32s var(--ease),
    transform 0.32s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .pt-fade,
  .pt-panel {
    display: none;
  }
}

/* =========================================================
   Type helpers
   ========================================================= */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 16px;
  color: var(--grey-2);
}
.eyebrow--left {
  text-align: left;
  font-size: 16px;
}
.eyebrow--center {
  text-align: center;
  font-size: 16px;
  margin-bottom: 0;
}

.serif-italic {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
}
.serif-italic.accent {
  color: var(--accent-green);
}
.oblique {
  font-style: normal;
}

.h-plain {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.h-serif {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}
.h-serif--center {
  text-align: center;
}

.body-muted {
  color: var(--grey-1);
  font-size: 14px;
  line-height: 1.7;
}
.body-muted--sm {
  max-width: 815px;
}

.tag {
  display: inline-flex;
  align-items: center;
  background: var(--accent-green-tint);
  color: var(--tag-text);
  font-family: var(--font-eyebrow);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    filter 0.35s var(--ease);
}
.btn--dark {
  padding: 8px 28px;
  color: #fff;
  background: linear-gradient(
    0deg,
    var(--black-grad-from) 0%,
    var(--black-grad-to) 100%
  );
  background-size: 100% 200%;
  background-position: bottom;
}
.btn--dark:hover {
  background-position: top;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.btn--small {
  padding: 5px 16px;
}
.btn--small:hover {
  background: #06170f;
  border-radius: 8px;
  border-top: 1px solid #0d3c26;
  border-right: 1px solid #0d3c26;
  border-bottom: 2px solid #0d3c26;
  border-left: 1px solid #0d3c26;
  color: #fdfdfd;
}

/* White/bordered outline button — nav "Contact Us" CTA and "See all work". */
.btn--outline {
  padding: 8px 28px;
  background: #fff;
  border-top: 1px solid #b0b9a7;
  border-right: 1px solid #b0b9a7;
  border-left: 1px solid #b0b9a7;
  border-bottom: 2px solid #b0b9a7;
  color: #06170f;
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.btn--outline:hover {
  background: #06170f;
  border-color: #0d3c26;
  color: #fdfdfd;
  transform: translateY(-2px);
}
.nav .btn--outline {
  padding: 5px 22px;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    0deg,
    var(--black-grad-from) 0%,
    var(--black-grad-to) 100%
  );
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
  z-index: 60;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-to-top:hover {
  filter: brightness(1.2);
}

/* =========================================================
   Layout helpers
   ========================================================= */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px var(--pad);
}
.panel {
  border-radius: 0;
  padding: 48px 40px;
  border: 1px solid var(--panel-warm-border);
}
.panel--warm {
  background: var(--panel-warm);
}
.panel--white {
  background: #fff;
}

@media (max-width: 700px) {
  .panel {
    padding: 32px 20px;
  }
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 244, 234, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-warm-border);
  transition: box-shadow 0.3s var(--ease);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__left {
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav__logo img {
  height: 28px;
  width: auto;
}
.nav__divider {
  width: 1px;
  height: 24px;
  background: var(--line);
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  color: var(--ink-soft);
  font-size: 14px;
}
.nav__links a {
  position: relative;
  padding: 2px 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s var(--ease);
}
.nav__links a:hover::after {
  width: 100%;
}
.nav__links a:hover {
  color: var(--ink);
}

@media (max-width: 780px) {
  .nav__links {
    display: none;
  }
  .nav__left {
    gap: 16px;
  }
  .nav__divider {
    display: none;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
}
.hero__intro {
  padding: 0 var(--pad);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.hero__title {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  max-width: 900px;
}
.hero__body {
  max-width: 948px;
  font-size: 14px;
  line-height: 1.7;
}
.hero__entire {
  max-width: 100%;
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .hero__title {
    font-size: 32px;
  }
}

/* =========================================================
   Decorative background washes (Figma "image 121/122/123")
   Full-bleed, non-interactive photo layers that fade into the
   page background (--bg) at their top/bottom edges. Reuses the
   same full-bleed centering trick as .portfolio-slider below
   (a 100vw-wide box, centered via left:50%/translateX(-50%),
   lands on the true viewport edges because its ancestor section
   is itself centered on the page) and the same img+overlay
   layering already used for .footer::before.
   ========================================================= */
.bg-wash {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - var(--scrollbar-w, 0px));
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-wash img {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.bg-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(245, 244, 234, 0) 16%,
    rgba(245, 244, 234, 0) 95%,
    var(--bg) 100%
  );
}
.bg-wash--hero-top {
  top: 26.4%;
  height: 32.5%;
}
/* Per-layer crop, matched to the Figma frame's own image transform
   (top/height % of that layer's own box) rather than a plain cover
   crop, since some of these layers are deliberately shorter than
   their box (leaving a gap) instead of filling it edge to edge. */
.bg-wash--hero-top img {
  top: -32.06%;
  height: 169.11%;
  transform: scaleY(-1);
}
.bg-wash--hero-bottom {
  top: 53.3%;
  height: 48.7%;
}
.bg-wash--hero-bottom img {
  top: -0.03%;
  height: 112.65%;
}
.bg-wash--section {
  top: 0;
  height: 100%;
}
#review .bg-wash img {
  top: 24.88%;
  height: 100%;
  transform: scaleY(-1);
}
.bg-wash--flip img {
  top: -32.15%;
  height: 82.78%;
}

/* =========================================================
   Portfolio slider
   Full-bleed, autoplay, true translating filmstrip. Every .pf-card
   slot is the same fixed size (a fluid match of the Figma "portfolio
   carousel" active frame, node 17:294, 1440px reference: 693x520,
   40px gap) and stays that size — the active card is centered purely
   by the track's translateX, and .pf-card itself is never transformed,
   so JS's getBoundingClientRect-based step/translate math (measure(),
   computeBaseTranslate()) sees the exact same geometry it always has.
   The active/inactive *look* (~20% smaller, softened, dimmed) is done
   one level down, on the <img>, which is purely a paint-time effect
   layered inside that fixed-size, overflow:hidden slot.
   ========================================================= */
:root {
  /* Pure viewport-relative fractions (693/1440 and 40/1440 as vw),
     deliberately uncapped so the exact Figma proportions — including
     how much of each neighbor peeks past the viewport edge — hold
     identically from 1024px through 2560px and beyond. */
  --pf-card-w: 48.125vw;
  --pf-gap: 0.1vw;
  --pf-duration: 900ms;
}
@media (max-width: 900px) {
  :root {
    /* Bounded by this query's own 900px ceiling, so no extra clamp is
       needed. Slightly larger share so the active card stays dominant. */
    --pf-card-w: 58vw;
    --pf-gap: 2.2vw;
  }
}
@media (max-width: 700px) {
  :root {
    /* Mobile: active card takes up most of the viewport while the
       neighbors still peek in at the edges. */
    --pf-card-w: 78vw;
    --pf-gap: 3.2vw;
  }
}

/* `.hero` lays out its children with `display:flex; align-items:center`,
   and this section's cross-axis size (full page width, see --scrollbar-w
   above) is wider than `.hero`'s own (max-width-capped) box on any screen
   above 1440px. align-items:center
   already centers that overflow symmetrically around .hero's own center —
   which, because .hero itself is centered in the viewport, lands this
   section exactly on the true viewport edges with zero extra offset math.
   (A `left:50%; transform:translateX(-50%)` trick here would double up
   with that built-in centering and shove the whole section off-center —
   that was the earlier bug that left empty space on the right.) */
.portfolio-slider {
  position: relative;
  z-index: 1;
  /* Not plain 100vw — see --scrollbar-w in js/script.js. Falls back to the
     old 100vw behavior (0px subtracted) until that JS runs. */
  width: calc(100vw - var(--scrollbar-w, 0px));
  overflow: hidden;
}
.portfolio-slider__viewport {
  width: calc(100vw - var(--scrollbar-w, 0px));
  overflow: hidden;
}
.portfolio-slider__track {
  display: flex;
  align-items: center;
  gap: var(--pf-gap);
  /* Shrink-wraps to the sum of all (uniform-width) cards + gaps, which
     with 10 cards is always many multiples of 100vw — so the strip
     never runs out of content at either edge, at any viewport size. */
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform var(--pf-duration) var(--ease);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio-slider__track.is-dragging {
  cursor: grabbing;
  transition: none;
}
.portfolio-slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-card {
  position: relative;
  flex: none;
  width: var(--pf-card-w);
  aspect-ratio: 693 / 520;
  overflow: hidden;
}
.pf-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  /* Inactive (prev/next) look, applied here rather than on .pf-card so
     the scale never touches the box JS measures. transform-origin is
     the default center, and inset:0 means this box exactly matches
     .pf-card's, so scaling here reads identically to scaling the card. */
  transform: scale(0.8);
  opacity: 0.85;
  z-index: 1;
  transition:
    transform var(--pf-duration) var(--ease),
    opacity var(--pf-duration) var(--ease),
    filter var(--pf-duration) var(--ease);
}
/* Steady state: index 1 (nth-child 2) is always the centered/active card. */
.portfolio-slider__track > .pf-card:nth-child(2) img {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  z-index: 2;
}
/* Mid-transition: pf-shift-next/-prev (toggled by animateTo(), cleared once
   the DOM re-settles) pre-apply the destination active/inactive look to the
   cards about to swap places, so the size/opacity/blur change animates in
   sync with the track's own translateX transition instead of popping once
   the DOM reorders below. */
.portfolio-slider__track.pf-shift-next > .pf-card:nth-child(2) img,
.portfolio-slider__track.pf-shift-prev > .pf-card:nth-child(2) img {
  transform: scale(0.8);
  opacity: 0.85;
  filter: blur(1.5px);
  z-index: 1;
}
.portfolio-slider__track.pf-shift-next > .pf-card:nth-child(3) img,
.portfolio-slider__track.pf-shift-prev > .pf-card:nth-child(1) img {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-slider__track {
    transition: none;
  }
  .pf-card img {
    transition: none;
  }
}

/* Trust logos */
.trust {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.trust__label {
  color: var(--grey-2);
  font-size: 14px;
  text-align: center;
}
.logo-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.logo-marquee__item {
  width: 180px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.3s var(--ease);
}
.logo-marquee__item:hover {
  filter: none;
}
.logo-marquee__item img {
  width: 100%;
  object-fit: contain;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   Outgrown / quiz section
   ========================================================= */
.outgrown {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 60px;
  align-items: start;
}
.outgrown__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.outgrown__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outgrown__status {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outgrown__count {
  font-family: var(--font-eyebrow);
  font-size: 16px;
  color: var(--grey-2);
}
.outgrown__hint {
  font-size: 14px;
  line-height: 1.7;
  color: #067526;
  transition: color 0.3s var(--ease);
}
.outgrown__hint.is-active {
  color: var(--accent);
}

.outgrown__list {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signal {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: #fff;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.15s var(--ease);
}
.signal:hover {
  transform: translateY(-1px);
  border-color: #cfcfcf;
}
.signal__box {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--checkbox-border);
  flex-shrink: 0;
  position: relative;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.signal__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l2.6 2.6L12.5 4.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.signal__text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.signal.is-selected {
  background: var(--accent-green-tint);
  border-color: var(--accent-green);
}
.signal.is-selected .signal__box {
  background: var(--accent-green);
  border-color: var(--accent-green);
}
.signal.is-selected .signal__box::after {
  opacity: 1;
  transform: none;
}

.outgrown__result {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  background: var(--panel);
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition:
    max-height 0.5s var(--ease),
    opacity 0.4s var(--ease),
    padding 0.5s var(--ease),
    background 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.outgrown__result.is-active {
  max-height: 260px;
  opacity: 1;
  padding-top: 18px;
  padding-bottom: 18px;
  border: none;
  background:
    linear-gradient(90deg, #f5f4ea 53.77%, rgba(255, 255, 255, 0) 100%),
    url(/img/homepage/outgrown_bg.png) lightgray 50% / cover no-repeat;
}
.outgrown__result-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.outgrown__result-title {
  font-size: 20px;
  color: var(--ink);
}
.outgrown__result-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 383px;
}

@media (max-width: 900px) {
  .outgrown {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Webdesign / services section
   ========================================================= */
.webdesign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.webdesign__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 472px;
}
.webdesign__col h2 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
}

.webdesign__services {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.webdesign__service-card {
  flex: 1;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.webdesign__service-card--branding {
  background: #e8e4dd;
}
.webdesign__service-card--websites {
  background: #dde3df;
}
.webdesign__service-card--growth {
  background: #e6e1e8;
}
.webdesign__service-card h3 {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 400;
  color: #35372f;
}
.webdesign__service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.webdesign__service-list li {
  padding-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #686b60;
}
.webdesign__service-list li:first-child {
  padding-top: 0;
}
.webdesign__service-list li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .webdesign {
    flex-direction: column;
    align-items: flex-start;
  }
  .webdesign__col {
    max-width: 100%;
  }
  .webdesign__services {
    flex-direction: column;
  }
}

/* =========================================================
   Review section
   ========================================================= */
#review {
  position: relative;
}
.review {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
}
.review__card {
  flex-shrink: 0;
  background: #fff;
  padding: 36px;
  width: 430px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.review__logo {
  width: 112px;
  height: auto;
  align-self: flex-start;
}
.review__quote-title {
  font-size: 24px;
  line-height: 1.33;
  color: var(--quote-ink);
}
.review__quote-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-2);
}
.review__author-name {
  font-size: 14px;
  color: var(--ink);
}
.review__author-role {
  font-size: 12px;
  color: var(--grey-2);
  font-family: var(--font-eyebrow);
}

.review__media {
  flex: 1;
  min-width: 0;
  aspect-ratio: 750 / 473;
  overflow: hidden;
  background: var(--panel-2);
}
.review__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .review {
    flex-direction: column;
  }
  .review__card {
    width: 100%;
  }
  .review__media {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 700px) {
  .review__card {
    padding: 24px;
  }
}

/* =========================================================
   How we work
   ========================================================= */
.how-we-work {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.how-we-work__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.how-we-work__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.how-we-work__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.how-we-work__kickoff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #f3e8eb;
  border-radius: 14px;
  padding: 24px;
}
.how-we-work__kickoff-grid {
  display: flex;
  gap: 48px;
}
.how-we-work__kickoff-grid > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.how-we-work__kickoff-grid h3 {
  font-size: 18px;
  font-weight: 700;
}

.phase-grid {
  display: flex;
  width: 100%;
}
.phase-card {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.4s var(--ease);
}
.phase-card h3 {
  font-size: 24px;
  font-weight: 700;
}
.phase-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 70px;
  box-sizing: border-box;
}

.phase-step {
  display: flex;
  align-items: center;
  width: 100%;
}
.phase-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 8px 0;
  border-radius: 8px;
  flex-shrink: 0;
}
.phase-step__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-green);
  flex-shrink: 0;
  display: block;
}
.phase-step__label {
  font-family: var(--font-eyebrow);
  font-size: 14px;
  color: var(--accent-green);
  white-space: nowrap;
}
.phase-step__line {
  flex: 1 0 0;
  height: 1px;
  min-width: 0;
  background: var(--accent-green);
}

.how-we-work__divider {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--line) 0 2px,
    transparent 4px 9px
  );
}

.how-we-work__footnote {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 900px) {
  .how-we-work__kickoff-grid {
    flex-direction: column;
    gap: 24px;
  }
  .phase-grid {
    flex-direction: column;
    gap: 32px;
  }
  .phase-card__body {
    padding-right: 0;
  }
  .how-we-work__footnote {
    flex-direction: column;
  }
}

/* =========================================================
   Case studies
   ========================================================= */
.case-studies {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.case-studies__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.case-studies__head h2 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  max-width: 690px;
}
.case-studies__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  row-gap: 48px;
}
/* 24px sits between the image and the caption, 7px between the two lines of
   the caption — hence the gap/margin split rather than one uniform gap. */
.case-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.case-card__img {
  aspect-ratio: 580/435;
  margin-bottom: 17px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-2);
}
.case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.case-card:hover .case-card__img img {
  transform: scale(1.04);
}
.case-card__eyebrow {
  font-weight: 700;
  font-size: 18px;
}
.case-card__title {
  font-size: 24px;
  line-height: 1.33;
}

@media (max-width: 900px) {
  .case-studies__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .case-studies__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.faq__title {
  font-size: 48px;
  line-height: 1.1;
  flex-shrink: 0;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
  width: 100%;
}
.faq__item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
}
.faq__icon {
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
  color: var(--ink);
}
.faq__item.is-open .faq__icon {
  transform: scaleY(-1);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.4s var(--ease),
    opacity 0.3s var(--ease);
  opacity: 0;
  padding: 0 14px;
}
.faq__a > p {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-2);
}
.faq__a {
  overflow: hidden;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
}
.faq__a > * {
  min-height: 0;
}

@media (max-width: 900px) {
  .faq {
    flex-direction: column;
    gap: 24px;
  }
  .faq__title {
    font-size: 36px;
  }
}

/* =========================================================
   Book a call CTA
   ========================================================= */
#book-a-call {
  position: relative;
}
.book-call {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 60px;
  justify-content: flex-end;
  align-items: stretch;
}
.book-call__left {
  display: flex;
  flex-direction: column;
  gap: 84px;
  width: 430px;
  flex-shrink: 0;
}
.book-call__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.book-call__intro h2 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
.book-call__expect {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-call__expect-title {
  font-family: var(--font-eyebrow);
  font-size: 16px;
}
.book-call__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-call__checklist li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent-green);
}

.book-call__img {
  flex: 1;
  aspect-ratio: 610 / 475;
  overflow: hidden;
}

.book-call__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .book-call {
    flex-direction: column;
    gap: 32px;
  }
  .book-call__left {
    width: 100%;
  }
  .book-call__img {
    align-self: stretch;
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   Case studies (case-studies.html) — page hero heading
   Grid of case cards below reuses .case-studies__grid /
   .case-card as-is (already sized 580x435 / 2-col from the
   homepage's "Our Work" section — no new grid needed).
   ========================================================= */
.case-studies-hero {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.case-studies-hero__title {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  max-width: 1040px;
}

@media (max-width: 700px) {
  .case-studies-hero__title {
    font-size: 32px;
  }
}

/* =========================================================
   Website Design (web-design.html) — Figma node 157:782
   The page reuses the shared blocks wherever the design does
   (.trust/.logo-marquee, .webdesign__service-card, .faq,
   .book-call, .bg-wash); everything below is only what this
   page adds. .wd-band is this page's own section rhythm —
   the Figma frame alternates 120px-padded bands with flush
   ones, rather than the uniform 96px of .section.
   ========================================================= */
.wd-band {
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--pad);
}
.wd-band--flush {
  padding-top: 0;
  padding-bottom: 0;
}
.wd-band--pb0 {
  padding-bottom: 0;
}

/* ---- Hero ---- */
/* Figma places the title 180px from the frame top with the menu floating
   over it; here the nav is sticky and takes ~70px of flow, so the padding
   is that much smaller to land the title in the same optical spot. */
.wd-hero {
  position: relative;
  overflow: hidden;
  padding: 110px var(--pad) 120px;
}
.wd-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* mix-blend-mode:color keeps the page's own luminosity and takes only the
   hue/saturation from the photo, which is what turns this blurred frame
   into the pale wash behind the headline rather than a literal image. */
.wd-hero__wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: color;
}
.wd-hero__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 244, 234, 0) 0%, var(--bg) 100%);
}
.wd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 924px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.wd-hero__title {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}
.wd-hero__body {
  font-size: 16px;
  line-height: 26px;
  color: var(--grey-2);
  margin-top: -12px;
}

.wd-trust {
  max-width: var(--max);
  margin: 0 auto;
}

/* ---- Working process (horizontal numeral accordion) ---- */
.wd-process {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.wd-process__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}
.wd-process__head .eyebrow {
  margin-bottom: 2px;
}

/* The row is a swap between two fixed widths: every step is a numeral
   column, and whichever one is open borrows the whole leftover track. Both
   bases are lengths that add up to exactly the band's content width, and the
   closing step hands back the same amount the opening one takes over the
   same curve — so the row cannot grow past .wd-band, at rest or mid-swap.
   flex-shrink stays at 1 as a floor in case the font falls back wider than
   the metric assumed below. */
.wd-steps {
  --wd-gap: 20px;
  --wd-num-fs: clamp(120px, 17.4vw, 250px);
  /* 0.58em ≈ Helvetica's digit advance (0.556em) plus slack, so a numeral
     always clears its own column without having to measure it in JS. */
  --wd-num-w: calc(var(--wd-num-fs) * 0.58);
  --wd-row-w: min(
    calc(100vw - var(--scrollbar-w, 0px) - 2 * var(--pad)),
    calc(var(--max) - 2 * var(--pad))
  );
  --wd-open-w: calc(var(--wd-row-w) - 4 * (var(--wd-num-w) + var(--wd-gap)));
  --wd-open-ease: cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;
  align-items: flex-start;
  gap: var(--wd-gap);
}
.wd-step {
  position: relative;
  flex: 0 1 var(--wd-num-w);
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 32px 0 0;
  text-align: left;
  border-top: 1px solid rgba(31, 31, 31, 0.15);
  transition: flex-basis 0.8s var(--wd-open-ease);
}
.wd-step.is-active {
  flex-basis: var(--wd-open-w);
}
/* Inset so the ring survives the overflow clip that guards the column. */
.wd-step:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: -2px;
}
/* The dark rule over the open step draws in from the left as the column
   widens, rather than switching colour on the frame the class lands. */
.wd-step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: #1f1f1f;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--wd-open-ease);
}
.wd-step.is-active::after {
  transform: scaleX(1);
}
/* line-height 0.72 ≈ Helvetica's cap height, which reproduces the Figma
   text-box-trim on these numerals: the rule above sits directly on the
   digit's cap line with no leading gap. */
.wd-step__num {
  flex: 0 0 var(--wd-num-w);
  font-size: var(--wd-num-fs);
  line-height: 0.72;
  color: rgba(31, 31, 31, 0.1);
  transition: color 0.55s var(--wd-open-ease);
}
.wd-step.is-active .wd-step__num {
  color: #1f1f1f;
}
/* The body carries no width of its own — it is the slack in the step, so it
   is exactly 0 when closed. .wd-step__inner holds the open measure at all
   times so the copy never re-wraps while the column moves; without it the
   text reflows on every frame and the row visibly churns. */
.wd-step__body {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.wd-step__inner {
  width: calc(var(--wd-open-w) - var(--wd-num-w));
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Title and copy trail the column instead of riding it, so the text lands
   in space that has already opened. Closing drops the delay, so they leave
   ahead of the width. */
.wd-step__title,
.wd-step__copy {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--wd-open-ease);
}
.wd-step.is-active .wd-step__title,
.wd-step.is-active .wd-step__copy {
  opacity: 1;
  transform: none;
}
.wd-step.is-active .wd-step__title {
  transition-delay: 0.2s;
}
.wd-step.is-active .wd-step__copy {
  transition-delay: 0.28s;
}
.wd-step__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.wd-step__copy {
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-2);
}

@media (prefers-reduced-motion: reduce) {
  .wd-step,
  .wd-step::after,
  .wd-step__num,
  .wd-step__title,
  .wd-step__copy {
    transition: none;
  }
}

/* Below the width where five numeral columns still leave the open one a
   readable measure, the row becomes a stacked accordion: same open/closed
   model, but the body expands downward instead of sideways. */
@media (max-width: 1150px) {
  .wd-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .wd-step,
  .wd-step.is-active {
    flex: none;
    width: 100%;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
  }
  .wd-step__num {
    flex: 0 0 auto;
    font-size: clamp(56px, 7.5vw, 96px);
  }
  .wd-step__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--wd-open-ease);
  }
  .wd-step.is-active .wd-step__body {
    grid-template-rows: 1fr;
  }
  .wd-step__inner {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    padding-left: 0;
  }
  .wd-step__title {
    white-space: normal;
  }
  @media (prefers-reduced-motion: reduce) {
    .wd-step__body {
      transition: none;
    }
  }
}

/* ---- Client statement ---- */
.wd-quote {
  display: flex;
  align-items: stretch;
  gap: 5px;
}
/* flex-basis is a percentage rather than 0 because these are border-box
   items: a 0 basis floors at the card's own padding + border, which would
   hand it ~74px more than the media column and break the even split. */
.wd-quote__card {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 720px;
  background: #fff;
  border: 1px solid var(--panel-warm-border);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}
.wd-quote__lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wd-quote__logo {
  width: 216px;
  max-width: 60%;
  height: auto;
}
.wd-quote__title {
  font-size: 36px;
  line-height: 44px;
  color: var(--quote-ink);
}
.wd-quote__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
.wd-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wd-quote__media {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wd-quote__tile {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-2);
}
/* Percentages below are the Figma layers' own crops, kept as ratios so the
   same framing survives the tile being fluid rather than a fixed 577px. */
.wd-quote__tile-bg {
  position: absolute;
  left: -143.98%;
  top: 0.06%;
  width: 258.35%;
  height: 285.3%;
  max-width: none;
  object-fit: cover;
}
.wd-quote__tile-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 49.4%;
  height: auto;
}
.wd-quote__tile--shot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 125.78%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---- Pillars (reuses .webdesign__service-card, minus the link lists) ---- */
.webdesign__service-card--partnership {
  background: #e8e4dd;
}
.webdesign__services--pillars .webdesign__service-card {
  min-height: 320px;
  justify-content: space-between;
}
.webdesign__service-copy {
  font-size: 14px;
  line-height: 24px;
  color: #686b60;
}

/* ---- What we design (media panel + service switcher) ---- */
.wd-showcase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.wd-showcase__panel {
  flex: 0 1 598px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.wd-showcase__media {
  position: relative;
  width: 100%;
  aspect-ratio: 598 / 400;
  overflow: hidden;
  background: var(--panel-2);
}
.wd-showcase__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Full-height screenshots deliberately run past the bottom of the frame —
   the crop is the composition, so no object-fit here. */
.wd-showcase__mockup {
  position: absolute;
  left: 8.44%;
  top: 20.49%;
  width: 83.03%;
  height: auto;
  max-width: none;
  transition: opacity 0.35s var(--ease);
}
.wd-showcase__media.is-swapping .wd-showcase__mockup {
  opacity: 0;
}
.wd-showcase__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.wd-showcase__copy p {
  transition: opacity 0.35s var(--ease);
}
.wd-showcase__copy.is-swapping p {
  opacity: 0;
}

.wd-showcase__list {
  flex: 0 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.wd-showcase__item {
  padding: 0;
  text-align: left;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 300;
  color: rgba(6, 23, 15, 0.25);
  transition: color 0.3s var(--ease);
}
.wd-showcase__item:hover {
  color: rgba(6, 23, 15, 0.5);
}
.wd-showcase__item.is-active,
.wd-showcase__item.is-active:hover {
  color: var(--accent-green);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .wd-showcase {
    gap: 40px;
  }
  .wd-showcase__item {
    font-size: 36px;
  }
}

@media (max-width: 900px) {
  .wd-band {
    padding: 72px var(--pad);
  }
  .wd-hero {
    padding: 72px var(--pad) 72px;
  }
  .wd-hero__inner {
    gap: 28px;
  }

  .wd-quote {
    flex-direction: column;
  }
  .wd-quote__card,
  .wd-quote__media {
    flex: none;
  }
  .wd-quote__card {
    min-height: 0;
  }
  .wd-quote__tile {
    flex: none;
    aspect-ratio: 577 / 358;
  }

  /* Stacked, the fixed card height just opens a gap between the heading and
     the copy, so the pair closes up instead. */
  .webdesign__services--pillars .webdesign__service-card {
    min-height: 0;
    justify-content: flex-start;
    gap: 16px;
  }

  .wd-showcase {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
  .wd-showcase__panel,
  .wd-showcase__list {
    flex: none;
    width: 100%;
  }
  .wd-showcase__list {
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .wd-hero__title {
    font-size: 32px;
  }
  .wd-hero__body {
    font-size: 14px;
    line-height: 24px;
    margin-top: -8px;
  }
  .wd-quote__card {
    padding: 24px;
  }
  .wd-quote__title {
    font-size: 26px;
    line-height: 34px;
  }
  .wd-showcase__item {
    font-size: 28px;
  }
  .wd-step__title {
    font-size: 20px;
  }
}

/* =========================================================
   Footer (Figma Contact page — single source of truth,
   node 85:2280 — shared across every page)
   ========================================================= */
.footer {
  position: relative;
  background: var(--footer-bg);
  color: #fff;
  padding: 64px var(--pad);
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.figma.com/api/mcp/asset/fafdaa42-0f8d-4706-abf7-e50aac3b6ba2.png");
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 480px;
}
.footer__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__heading p {
  font-size: 32px;
  line-height: 1.15;
  color: var(--footer-text-dim);
}
.footer__heading a {
  font-size: 32px;
  line-height: 1.15;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}
.footer__heading a:hover {
  color: var(--footer-text-dim);
}
.footer__brand-copy {
  font-size: 14px;
  line-height: 1.7;
  color: var(--footer-text-dim);
  max-width: 420px;
}
.footer__cta {
  background: #f7f2f1;
  border-top: 1px solid #ebe4e2;
  border-right: 1px solid #ebe4e2;
  border-left: 1px solid #ebe4e2;
  border-bottom: 2px solid #ebe4e2;
  color: #06170f;
  padding: 8px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.footer__cta:hover {
  background: #fff;
  transform: translateY(-2px);
}

.footer__links {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
}
.footer__link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s var(--ease);
}
.footer__links > :last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__link-row:hover,
.footer__link-row[aria-current="page"] {
  color: #fff;
}
.footer__link-row svg {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.footer__link-row:hover svg {
  transform: translateX(3px);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  width: 100%;
}
.footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__copyright {
  font-size: 14px;
  color: var(--footer-text-dim);
}
.footer__legal {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 16px;
  color: #fff;
}
.footer__legal a {
  transition: color 0.25s var(--ease);
}
.footer__legal a:hover {
  color: var(--footer-text-dim);
}

@media (max-width: 900px) {
  .footer {
    padding: 72px 24px;
  }
  .footer__inner {
    gap: 56px;
  }
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .footer__links {
    width: 100%;
  }
  .footer__heading p,
  .footer__heading a {
    font-size: 26px;
  }
}
@media (max-width: 700px) {
  .footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer__heading p,
  .footer__heading a {
    font-size: 22px;
    word-break: break-word;
  }
}

/* =========================================================
   Case study detail page (case-study-reaktion.html)
   ========================================================= */

/* ---- Intro / hero row ---- */
.cs-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
/* Only the text column is dropped down — the media runs flush to the top of
   the page, as in the design. */
.cs-hero__left {
  width: 360px;
  flex-shrink: 0;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cs-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
}
.cs-hero__heading h1 {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
}
.cs-hero__heading p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-1);
}
.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cs-hero__media {
  flex: 1;
  min-width: 0;
  aspect-ratio: 781 / 585;
  overflow: hidden;
  background: var(--panel-2);
}
.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .cs-hero {
    flex-direction: column;
  }
  .cs-hero__left {
    width: 100%;
    padding-top: 32px;
  }
  .cs-hero__heading {
    max-width: 100%;
  }
  .cs-hero__media {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

/* ---- Scroll-synced accordion + gallery ---- */
.cs-gallery-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad) 80px;
}
.cs-gallery-section__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.cs-nav {
  width: 360px;
  flex-shrink: 0;
  /* Pinned column: stays put while .cs-gallery scrolls past it, released
     automatically by the browser once the flex row's own box (sized by
     the taller .cs-gallery) scrolls out from under it. */
  position: sticky;
  top: var(--cs-sticky-top);
}
.cs-nav__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-nav__item {
  display: flex;
  flex-direction: column;
}
.cs-nav__label {
  font-size: 14px;
  line-height: 24px;
  color: var(--accent-green);
}
.cs-nav__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.6s var(--ease),
    opacity 0.45s var(--ease),
    margin-top 0.6s var(--ease);
}
.cs-nav__body > p {
  min-height: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: var(--grey-2);
}
.cs-nav__item.is-active .cs-nav__body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
}

.cs-gallery {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Every block spans the full gallery column; only the ratio changes. */
.cs-gallery__cell {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--panel-sand);
}
.cs-gallery__cell--wide {
  aspect-ratio: 781 / 585;
}
.cs-gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phone-in-frame cell. The handset is drawn here rather than baked into the
   screenshot so the long pricing page stays crisp at 2x, and its geometry is
   expressed in cqw so the whole thing scales with the column. */
.cs-gallery__cell--phone {
  position: relative;
  container-type: inline-size;
}
.cs-gallery__phone {
  position: absolute;
  left: 21.842%;
  top: 9.211%;
  width: 56.316%;
  height: 163.421%;
  padding: 3.947cqw;
  background: #dfddcd;
  border-radius: 6.316cqw;
}
.cs-gallery__phone-screen {
  position: relative;
  height: 100%;
  border-radius: 2.368cqw;
  overflow: hidden;
}
/* Crop matches the design's own image transform: the page is anchored partway
   down so the block opens on the $299 plan rather than the top of the screen. */
.cs-gallery__phone-screen img {
  position: absolute;
  left: 0;
  top: -78.83%;
  width: 100%;
  height: 142.35%;
  max-width: none;
}

@media (max-width: 900px) {
  .cs-gallery-section {
    padding-top: 0;
  }
  .cs-gallery-section__inner {
    flex-direction: column;
    gap: 32px;
  }
  .cs-nav {
    position: static;
    top: auto;
    width: 100%;
  }
  .cs-gallery {
    width: 100%;
  }
}

/* ---- Next projects (reuses .case-studies__grid / .case-card as-is) ---- */
.cs-next {
  background: var(--bg);
  padding: 120px var(--pad);
}
.cs-next__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.cs-next__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.cs-next__head h2 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  max-width: 690px;
}

@media (max-width: 900px) {
  .cs-next {
    padding: 72px 24px;
  }
  .cs-next__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Book a Call (book-a-call.html)
   Hero heading + Cal.com scheduling embed. The embed's own
   markup/script (inside .book-hero__widget) is left untouched —
   only the surrounding container is styled here, matching the
   site's shared max-width/padding rhythm. No placeholder fill:
   the Cal embed renders directly against the page background.
   ========================================================= */
.book-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.book-hero__title {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  max-width: 980px;
}

/* Cal's inline embed div is styled width:100%;height:100% inline in the
   embed code itself (left as provided) — this wrapper is what actually
   gives that 100% something to resolve against; it carries no visual
   styling of its own, so the calendar reads as a native part of the page. */
.book-hero__widget {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .book-hero {
    padding: 64px 24px 96px;
    gap: 32px;
  }
  .book-hero__widget {
    height: 700px;
  }
}
@media (max-width: 700px) {
  .book-hero__title {
    font-size: 32px;
  }
  .book-hero__widget {
    height: 780px;
  }
}

/* =========================================================
   Contact (contact.html) — Figma node 85:2238
   ========================================================= */
.contact-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px var(--pad) 160px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}
.contact-hero__left {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.contact-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-hero__title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}
.contact-hero__body {
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-2);
}

.contact-hero__panel {
  background: #fff;
  border: 1px solid var(--panel-warm-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.contact-hero__panel-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-hero__panel-title {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.contact-hero__panel-body {
  font-size: 14px;
  line-height: 24px;
  color: var(--grey-2);
}

.contact-form {
  width: 580px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 69px;
}
.contact-form__row {
  display: flex;
  gap: 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.form-field--full {
  width: 100%;
}
.form-field__label {
  font-size: 12px;
  line-height: 24px;
  color: var(--ink);
}
.form-field__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field__input,
.form-field__textarea,
.form-field__select {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--grey-2);
}
.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form-field__textarea {
  resize: vertical;
  min-height: 24px;
  font-family: inherit;
}
.form-field__select-wrap {
  position: relative;
}
.form-field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 28px;
}
.form-field__select-icon {
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
  color: var(--ink);
}

.contact-form__submit {
  align-self: flex-start;
  border: none;
}
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-form__status {
  font-size: 14px;
  line-height: 1.6;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: none;
}
.contact-form__status.is-visible {
  display: block;
}
.contact-form__status--success {
  background: #eef7f0;
  color: #0f5132;
}
.contact-form__status--error {
  background: #fdecee;
  color: #7a1224;
}

@media (max-width: 900px) {
  .contact-hero {
    flex-direction: column;
    padding: 64px 24px 96px;
    gap: 40px;
  }
  .contact-hero__left {
    width: 100%;
    flex-direction: column;
    gap: 32px;
  }
  .contact-form {
    width: 100%;
    padding-top: 0;
  }
}
@media (max-width: 700px) {
  .contact-hero__title {
    font-size: 32px;
  }
  .contact-form__row {
    flex-direction: column;
    gap: 24px;
  }
}