/* Brand type: Roboto Flex, narrow display cut for headings and the regular width for text. OFL, see assets/fonts. */
/* block, not swap: with swap the page first rendered in a wider system font and then re-wrapped
   every heading when the brand font arrived (3-4 lines collapsing to 1-2). The font is preloaded
   and cached for a year, so the wait is the first visit only, under the loading screen. */
@font-face {
  font-family: "Flovant Grotesk";
  src: url("/v4/assets/fonts/RobotoFlex-Flovant.woff2?v=12d811431a") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Flovant Hand";
  src: url("/v4/assets/fonts/caveat-variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* Colours come from themes.css (one block per theme); everything here is theme-independent. */
  /* Pace of entrance animations: 1 is the original speed, higher is slower. motion.js and script.js read it too. */
  --motion-tempo: 1.25;
  --font-sans: "Flovant Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 430;
  --stretch-display: 84%;
  --stretch-heading: 90%;
  --header-height: 72px;
  --shell: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius-small: 10px;
  --radius-media: 10px;
  --radius-panel: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-scene: cubic-bezier(0.65, 0, 0.35, 1);
  --section-space: clamp(88px, 9vw, 144px);
}

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

html {
  scroll-behavior: smooth;
  background: var(--canvas);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.mobile-menu-open,
body.modal-open { overflow: hidden; }

main { display: block; }

main :where(section, h1, h2, h3)[id] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

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

p, h1, h2, h3, figure, dl, dd { margin: 0; }

h1, h2 {
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
}

h3 {
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-heading);
}

/* Secondary text is ordinary text: sentence case, the same typeface, just smaller and quieter. */
.featured-scene__meta,
.client-ruler__counter,
.project-copy small,
.selected-work-card__caption small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

p { color: var(--muted); text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* One accent per section, not a panel per item:
   shader cards for services, a single raised surface for the process,
   plain typography for guarantees and prices, a light block for the final call. */

::selection {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--ink);
}

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

/* The effects hide their canvas until the first frame (and on light themes for good); display: block below would otherwise win over the attribute. */
canvas[hidden] { display: none; }

.site-ambience {
  position: fixed;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: var(--canvas);
}

.shell,
.nav-shell {
  width: min(calc(100% - (var(--gutter) * 2)), var(--shell));
  margin-inline: auto;
}

.visually-hidden,
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  left: 20px;
  top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--canvas);
  transform: translateY(-160%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: max(10px, env(safe-area-inset-top));
  pointer-events: none;
}

.nav-shell {
  min-height: 58px;
  padding: 0 10px 0 18px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-panel);
  /* No backdrop-filter: the header sits over animated shaders and scrolling content, so the blur
     was recomputed every frame and cost more than anything else during scroll. The panel is dark
     enough that the blur barely showed; the scrolled state is nearly opaque instead. */
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  pointer-events: auto;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.scrolled .nav-shell {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.brand {
  min-height: 44px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 23px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transform: skewX(-12deg);
}

.brand-mark i {
  width: 5px;
  height: 13px;
  display: block;
  border-radius: 2px;
  background: currentColor;
}

.brand-mark i:nth-child(2) { transform: translateY(-3px); }
.brand-mark i:nth-child(3) { transform: translateY(2px); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.2vw, 38px);
}

.nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--weight-medium);
  transition: color 180ms ease;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }

.nav-cta {
  min-height: 40px;
  padding: 0 17px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--canvas);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: transform 180ms var(--ease-out), background 180ms ease;
}

.nav-cta:hover { background: var(--ink); }
.nav-cta:active { transform: scale(0.98); }

.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  justify-self: end;
  place-items: center;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  cursor: pointer;
}

.mobile-menu-toggle span,
.mobile-menu-toggle span::before,
.mobile-menu-toggle span::after {
  width: 20px;
  height: 1px;
  display: block;
  background: var(--ink);
  transition: transform 220ms var(--ease-out), opacity 180ms ease;
}

.mobile-menu-toggle span { position: relative; }
.mobile-menu-toggle span::before,
.mobile-menu-toggle span::after { content: ""; position: absolute; left: 0; }
.mobile-menu-toggle span::before { transform: translateY(-6px); }
.mobile-menu-toggle span::after { transform: translateY(6px); }
.mobile-menu-toggle[aria-expanded="true"] span { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.mobile-menu-panel {
  position: fixed;
  z-index: 90;
  inset: 0;
  padding: calc(var(--header-height) + 48px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--canvas);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 320ms var(--ease-out), visibility 0s 320ms;
}

.mobile-menu-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-menu-links { display: grid; align-content: center; }
.mobile-menu-links a {
  min-height: 68px;
  display: flex;
  align-items: center;
  font-size: clamp(30px, 9vw, 50px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.018em;
}

.mobile-menu-links a.active { color: var(--ink); }
.mobile-menu-bottom { display: grid; gap: 14px; }
.mobile-menu-contacts { display: flex; flex-wrap: wrap; gap: 0 24px; }
.mobile-menu-contacts a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 6px;
}
.mobile-menu-action {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--canvas);
  font-weight: var(--weight-semibold);
}

/* Shared type and actions */
.button {
  min-height: 48px;
  width: fit-content;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button-primary,
.button-light {
  background: var(--ink);
  color: var(--canvas);
}

.button-primary:hover,
.button-light:hover { background: var(--ink); }
.button-primary:active,
.button-light:active { transform: scale(0.98); }

.button-ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.button-ghost:hover { border-color: var(--ink); }

.text-action,
.service-text-link {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.text-action:hover,
.service-text-link:hover { color: var(--ink); text-decoration-color: currentColor; }

.case-category {
  color: var(--muted);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

/* Home hero */
.home-hero {
  /* svh, not dvh: on iOS dvh changes whenever the address bar hides or shows, so the hero resized
     mid-scroll, shifted the page and re-rendered the black hole. */
  min-height: max(720px, 94svh);
  position: relative;
  padding: calc(var(--header-height) + 76px) 0 clamp(60px, 7vh, 88px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-base);
}

.home-hero-canvas {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}

.home-hero[data-webgl="ready"] .home-hero-canvas {
  opacity: 1;
}

.home-hero:not([data-webgl="ready"]):not([data-webgl="off"])::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(50vw, 680px);
  aspect-ratio: 1;
  right: -4vw;
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 50%;
  transform: translateY(-50%);
}

.home-hero-grid {
  min-height: calc(max(720px, 94svh) - var(--header-height) - 164px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(40px, 7vh, 72px) clamp(20px, 2.2vw, 36px);
  align-items: end;
}

/* The hero dissolves into the page instead of ending on a hard edge. */
.home-hero { --hero-fade: 140px; background: transparent; }
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--hero-base) calc(100% - var(--hero-fade)), transparent);
}
/* The black hole fades out in its own shader (shaders.js). A mask on a canvas that changes every
   frame cost a full extra compositing pass per frame; it remains only for the no-blend fallback. */
.home-hero[data-hero-fade="css"] .home-hero-canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--hero-fade)), transparent);
}

.home-hero-copy {
  grid-column: 1 / 9;
}

.home-hero-copy h1 {
  max-width: none;
  font-size: clamp(64px, 7.4vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.018em;
}

.home-hero-copy h1 span { display: block; }

.home-hero-context {
  grid-column: 1 / 7;
  align-self: end;
}

.home-hero-context > p {
  max-width: 580px;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
}

.hero-actions,
.service-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-enter {
    animation: hero-enter calc(840ms * var(--motion-tempo)) var(--ease-out) both;
  }
  .home-hero-copy.hero-enter { animation: none; }
  .home-hero-copy h1 span {
    animation: hero-line-enter calc(880ms * var(--motion-tempo)) var(--ease-out) both;
  }
  .home-hero-copy h1 span:nth-child(2) { animation-delay: calc(55ms * var(--motion-tempo)); }
  .home-hero-copy h1 span:nth-child(3) { animation-delay: calc(110ms * var(--motion-tempo)); }
  .home-hero-context.hero-enter { animation-delay: calc(150ms * var(--motion-tempo)); }
}

@keyframes hero-enter {
  from { opacity: 0.72; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-line-enter {
  from { opacity: 0.6; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Perspective word runway */
.perspective-marquee {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.perspective-marquee__viewport {
  --marquee-distance: 1600px;
  --marquee-duration: 22s;
  --marquee-delay: 0s;
  --marquee-font-size: 84px;
  --marquee-word-gap: 72px;
  --marquee-rotate-x: 8deg;
  --marquee-rotate-y: -28deg;
  --marquee-perspective: 1200px;
  position: relative;
  height: clamp(300px, 31vw, 450px);
  overflow: hidden;
  perspective: var(--marquee-perspective);
  perspective-origin: 48% 50%;
  isolation: isolate;
}

.perspective-marquee__viewport::before,
.perspective-marquee__viewport::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: min(16vw, 220px);
  pointer-events: none;
}

.perspective-marquee__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--canvas), transparent);
}

.perspective-marquee__viewport::after {
  right: 0;
  background: linear-gradient(-90deg, var(--canvas), transparent);
}

.perspective-marquee__scene {
  position: absolute;
  inset: 0 -10%;
  transform: rotateX(var(--marquee-rotate-x)) rotateY(var(--marquee-rotate-y));
  transform-origin: center;
  transform-style: preserve-3d;
}

.perspective-marquee__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.perspective-marquee__layer--blur {
  opacity: 0.38;
}

/* The blur is painted into the glyphs once (a text-shadow with blur 2σ matches filter: blur(σ)),
   so the moving track is only translated. A filter on the moving layer re-blurred it every frame. */
.perspective-marquee__layer--blur .perspective-marquee__word {
  color: transparent;
  text-shadow: 0 0 calc(var(--marquee-blur, 8px) * 2) var(--ink);
}

.perspective-marquee__layer--focus {
  z-index: 2;
  -webkit-mask-image: var(--marquee-focus-mask);
  mask-image: var(--marquee-focus-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.perspective-marquee__track {
  width: max-content;
  display: flex;
  flex: none;
  align-items: center;
  animation: perspective-marquee-flow var(--marquee-duration) linear infinite;
  animation-delay: var(--marquee-delay);
  animation-play-state: paused;
  will-change: transform;
}

.perspective-marquee__viewport.is-visible .perspective-marquee__track {
  animation-play-state: running;
}

.perspective-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-word-gap);
  padding-right: var(--marquee-word-gap);
}

.perspective-marquee__word {
  flex: none;
  white-space: nowrap;
  color: var(--ink);
  font-size: clamp(44px, 6vw, var(--marquee-font-size));
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.perspective-marquee__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: none;
  color: var(--muted);
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1;
  transform: translate(-50%, -50%) rotateY(-16deg);
}

@keyframes perspective-marquee-flow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
}

/* Shared editorial headings */
.section-heading-inline h2,
.capabilities-intro h2,
.expertise-copy h2,
.trust-lead h2,
.process-story-intro h2,
.price-preview-heading h2,
.final-cta h2,
.archive-heading h2,
.featured-intro h2 {
  max-width: 980px;
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1;
  letter-spacing: -0.012em;
}

.section-heading-inline p,
.process-story-intro p,
.price-preview-heading p,
.archive-heading p,
.featured-intro p {
  max-width: 600px;
  margin-top: 22px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}

/* Selected work */
.selected-work {
  padding: var(--section-space) 0;
  overflow: hidden;
  background: transparent;
}

.section-heading-inline {
  margin-bottom: clamp(42px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
}

.works-viewport {
  width: 100%;
  display: grid;
  gap: 18px;
  overflow-x: clip;
}

.works-track,
.selected-work-row {
  width: max-content;
  display: flex;
  gap: 18px;
  padding-inline: var(--gutter);
  transform: translateX(0);
}

.selected-work-card,
.work-card {
  width: clamp(300px, 34vw, 520px);
  display: block;
}

.selected-work-card__media,
.work-card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface-raised);
  object-fit: cover;
  object-position: top center;
}

.selected-work-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 420ms var(--ease-out);
}

.selected-work-card__caption,
.work-card figcaption {
  padding-top: 14px;
  display: grid;
  justify-content: start;
  gap: 4px;
  color: var(--ink);
  font-size: 17px;
}

.selected-work-card__caption strong { font-weight: var(--weight-medium); }
.selected-work-card__caption small { order: 2; }

/* Home editorial sections */
.capabilities,
.expertise,
.trust,
.process-story,
.price-preview,
.final-cta { position: relative; padding: var(--section-space) 0; }

.capabilities-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 82px);
}

.capabilities-intro > div { grid-column: 1 / 10; }
.capabilities-intro > .text-action { grid-column: 10 / 13; justify-self: end; }
.capabilities-intro > div > p,
.expertise-copy > p,
.trust-lead > p {
  max-width: 600px;
  margin-top: 24px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}

.capability-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.feature-card {
  --feature-card-base: var(--surface);
  --feature-card-canvas: var(--surface);
  min-height: clamp(330px, 27vw, 410px);
  position: relative;
  grid-column: span 4;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--feature-card-base);
  isolation: isolate;
  transition: border-color 220ms ease, transform 260ms var(--ease-out);
}

.feature-card:nth-child(1) { grid-column: 1 / 9; min-height: clamp(380px, 31vw, 470px); }
.feature-card:nth-child(2) { grid-column: 9 / 13; }
.feature-card:nth-child(3) { grid-column: 1 / 5; }
.feature-card:nth-child(4) { grid-column: 5 / 13; min-height: clamp(360px, 29vw, 440px); }
.feature-card:nth-child(5) { grid-column: 1 / 7; }
.feature-card:nth-child(6) { grid-column: 7 / 13; }

.feature-card__shader {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.015);
  background: var(--feature-card-canvas);
  transition: transform 700ms var(--ease-out), filter 300ms ease;
}

.feature-card__content {
  min-height: inherit;
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.feature-card__copy { display: block; }



.feature-card h3 {
  max-width: 720px;
  color: var(--ink);
  font-size: clamp(28px, 2.6vw, 40px);
  font-stretch: var(--stretch-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.feature-card p {
  max-width: 480px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.feature-card:nth-child(2) h3,
.feature-card:nth-child(3) h3 { font-size: clamp(26px, 2.2vw, 34px); }

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
  }

  .feature-card:hover .feature-card__shader {
    transform: scale(1.035);
    filter: brightness(1.06);
  }
}

.expertise { background: transparent; }
.expertise-grid { display: block; }
.expertise-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: 24px clamp(54px, 8vw, 126px);
  align-items: start;
}
.expertise-copy h2 { grid-column: 1; grid-row: 1 / span 2; }
.expertise-copy > p { grid-column: 2; margin-top: 0; }
.expertise-copy > p + p { color: var(--muted); }

.trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  gap: clamp(48px, 8vw, 136px);
}
.trust-support { display: grid; gap: clamp(26px, 2.6vw, 36px); align-self: start; }
.trust-support h3 { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.15; letter-spacing: 0; }
.trust-support p { margin-top: 8px; font-size: 17px; line-height: 1.5; }

.process-story { background: transparent; }
.process-story-intro { max-width: 920px; }
.process-story-flow {
  margin: clamp(48px, 6vw, 80px) 0 32px;
  padding: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(28px, 3vw, 48px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.process-story-flow article { min-height: 0; }
.process-story-flow h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -0.006em; }
.process-story-flow p { margin-top: 10px; font-size: 17px; line-height: 1.5; }

.price-preview-heading { margin-bottom: clamp(44px, 6vw, 80px); }
.price-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 3vw, 48px); }
.price-band { display: flex; flex-direction: column; gap: 14px; }
.price-band h3 { max-width: 320px; min-height: 2.8em; color: var(--muted); font-size: 17px; font-weight: 400; font-stretch: 100%; line-height: 1.4; letter-spacing: 0; transition: color 180ms ease; }
.price-band strong { font-size: clamp(34px, 3.2vw, 48px); font-weight: var(--weight-display); font-stretch: var(--stretch-display); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.price-band:hover h3 { color: var(--ink); }

.price-preview .price-band > p { max-width: 430px; font-size: 17px; line-height: 1.58; }
.price-band:hover strong { color: var(--ink); }

.final-cta { padding-top: clamp(76px, 8vw, 124px); padding-bottom: clamp(76px, 8vw, 124px); background: transparent; }
.final-cta-inner {
  padding: clamp(36px, 5vw, 72px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--canvas);
}
.final-cta h2 { max-width: 900px; color: var(--canvas); font-size: clamp(40px, 4.6vw, 68px); }
.final-cta .button-primary { background: var(--canvas); color: var(--ink); }
.final-cta ::selection { background: color-mix(in srgb, var(--canvas) 22%, transparent); color: var(--canvas); }

/* Portfolio */
.page-hero {
  min-height: min(560px, 62svh);
  padding: calc(var(--header-height) + 70px) 0 64px;
  display: flex;
  align-items: end;
}

.portfolio-hero { min-height: min(680px, 74svh); }
.portfolio-hero .shell {
  display: block;
}
.portfolio-hero h1 {
  max-width: 1080px;
  font-size: clamp(64px, 7.2vw, 108px);
  line-height: 0.97;
  letter-spacing: -0.019em;
}
.portfolio-hero h1 > span:first-child { display: block; }
.handwriting-word {
  width: max-content;
  max-width: 100%;
  /* The drawn SVG is 1.08em tall; reserving it keeps the heading from growing when it replaces the text. */
  min-height: 1.08em;
  display: block;
  margin-top: -0.04em;
  color: var(--accent);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: -0.01em;
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
.handwriting-word svg {
  max-width: 100%;
  display: block;
  overflow: visible;
}
.handwriting-word[data-handwriting-state="drawing"] { color: color-mix(in srgb, var(--ink) 88%, var(--canvas)); }
/* script.js draws the word as an SVG, and its handwriting font downloads after the brand font.
   The CSS face is only for the fallback (no script, or drawing failed), so the browser does not
   fetch 400 KB in parallel with the font the first render waits for. Until then the word keeps its
   place but stays invisible. */
html:not(.js) .handwriting-word,
.handwriting-word[data-handwriting-state="fallback"] { font-family: "Flovant Hand", cursive; }
html.js .handwriting-word:not([data-handwriting-state]) { visibility: hidden; }
.portfolio-hero p {
  max-width: 620px;
  margin-top: 28px;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
}

.featured-showcase { padding-bottom: var(--section-space); }
.featured-intro {
  padding: clamp(44px, 5vw, 72px) 0 clamp(42px, 5vw, 64px);
  display: block;
}
.featured-intro h2 { font-size: clamp(40px, 4.4vw, 66px); }
.featured-intro p { max-width: 720px; margin-top: 22px; }
.featured-stage { position: relative; }
.featured-scenes { display: grid; gap: 28px; }
.featured-scene {
  min-height: min(760px, 88svh);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface);
}
.featured-scene.is-reversed { grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); }
.featured-scene.is-reversed .featured-scene__media { grid-column: 2; grid-row: 1; }
.featured-scene.is-reversed .featured-scene__copy { grid-column: 1; grid-row: 1; }
.featured-scene__media,
.featured-scene__copy { min-width: 0; }
.featured-scene__media {
  padding: clamp(22px, 3vw, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-raised);
}
.featured-scene__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.featured-scene__copy {
  padding: clamp(46px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.featured-scene__meta {
  margin-bottom: auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}
.featured-scene__body { margin-block: auto; }
.featured-scene h3 {
  font-stretch: var(--stretch-display);
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.featured-scene__body p {
  max-width: 580px;
  margin-top: 24px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.58;
}
.featured-scene__open {
  width: fit-content;
  min-height: 44px;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: var(--weight-medium);
  transition: color 180ms ease;
}
.featured-scene__open { gap: 0.55em; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 7px; }
.featured-scene__open:hover { color: var(--ink); text-decoration-color: currentColor; }
.featured-showcase.is-sticky {
  --featured-step: 78svh;
  --featured-offset: calc(var(--header-height) + 12px);
  position: relative;
  padding-bottom: 0;
}
.featured-showcase.is-sticky .featured-intro { padding-bottom: 36px; }
.featured-showcase.is-sticky .featured-stage {
  height: 256svh;
  position: relative;
}
.featured-showcase.is-sticky .featured-scenes {
  height: calc(100svh - var(--featured-offset));
  position: sticky;
  top: var(--featured-offset);
  display: block;
  overflow: hidden;
  background: var(--canvas);
}
.featured-showcase.is-sticky .featured-scene {
  position: absolute;
  inset: 0;
  min-height: calc(100svh - var(--featured-offset));
  border-radius: 0;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
}
.featured-showcase.is-sticky .featured-scene[data-state="active"],
.featured-showcase.is-sticky .featured-scene.is-adjacent { visibility: visible; }
.featured-showcase.is-sticky .featured-scene[data-state="active"] { z-index: 3; pointer-events: auto; }
.featured-showcase.is-sticky .featured-scene.is-adjacent { z-index: 2; }
.featured-showcase.is-sticky .featured-scene__media,
.featured-showcase.is-sticky .featured-scene__copy {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 620ms var(--ease-scene), opacity 420ms ease;
}
.featured-showcase.is-sticky.is-direct-jump .featured-scene__media,
.featured-showcase.is-sticky.is-direct-jump .featured-scene__copy {
  transition: none;
}
.featured-showcase.is-sticky .featured-scene[data-state="after"][data-entry="from-bottom"] .featured-scene__media,
.featured-showcase.is-sticky .featured-scene[data-state="before"][data-entry="from-top"] .featured-scene__media {
  transform: translate3d(0, 100%, 0);
  opacity: 0.72;
}
.featured-showcase.is-sticky .featured-scene[data-state="after"][data-entry="from-bottom"] .featured-scene__copy,
.featured-showcase.is-sticky .featured-scene[data-state="before"][data-entry="from-top"] .featured-scene__copy {
  transform: translate3d(0, -100%, 0);
  opacity: 0.72;
}
.featured-showcase.is-sticky .featured-scene[data-state="after"][data-entry="from-top"] .featured-scene__media,
.featured-showcase.is-sticky .featured-scene[data-state="before"][data-entry="from-bottom"] .featured-scene__media {
  transform: translate3d(0, -100%, 0);
  opacity: 0.72;
}
.featured-showcase.is-sticky .featured-scene[data-state="after"][data-entry="from-top"] .featured-scene__copy,
.featured-showcase.is-sticky .featured-scene[data-state="before"][data-entry="from-bottom"] .featured-scene__copy {
  transform: translate3d(0, 100%, 0);
  opacity: 0.72;
}
.featured-sentinels {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-rows: repeat(var(--featured-count, 3), 1fr);
  pointer-events: none;
}
.featured-sentinel { min-height: var(--featured-step, 78svh); }

.portfolio-archive { padding: var(--section-space) 0; }
.archive-heading {
  margin-bottom: 42px;
  display: block;
}
.archive-heading p { margin-top: 22px; }
.portfolio-toolbar {
  position: sticky;
  z-index: 20;
  top: calc(var(--header-height) + 10px);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  /* Opaque instead of a backdrop blur: it sticks over the scrolling grid, where a blur is redone every frame. */
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
}
.filter-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter-list::-webkit-scrollbar { display: none; }
.filter-button {
  min-height: 40px;
  padding: 0 13px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.filter-button:hover { color: var(--ink); }
.filter-button.active { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.search-box input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  outline: none;
}
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box input:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.portfolio-count { min-height: 56px; display: flex; align-items: center; color: var(--muted); font-size: 14px; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 62px) clamp(18px, 2.2vw, 34px);
}
.project-card {
  min-width: 0;
  display: block;
  cursor: pointer;
}
.project-media {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface-raised);
}
.project-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 380ms var(--ease-out);
}
.project-copy { padding-top: 16px; display: flex; flex-direction: column; }
.project-copy small { order: 2; margin-top: 4px; }
.project-copy small { color: var(--subtle); }
.project-copy h2,
.project-copy h3 { margin-top: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -0.01em; }
.project-copy p { display: none; }
.project-arrow { display: none; }
.no-results {
  grid-column: 1 / -1;
  min-height: 300px;
  padding: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  color: var(--muted);
  text-align: center;
}
.no-results button { margin-top: 16px; }
.filter-reset {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.filter-reset:hover { border-color: var(--ink); }

/* Project modal */
.project-modal {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 44px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s 240ms;
}
.project-modal.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.modal-panel {
  width: min(1280px, 100%);
  max-height: calc(100dvh - 32px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--surface);
  transform: translateY(18px) scale(0.99);
  transition: transform 240ms var(--ease-out);
}
.project-modal.open .modal-panel { transform: translateY(0) scale(1); }
.modal-close {
  width: 44px;
  height: 44px;
  position: fixed;
  z-index: 3;
  right: clamp(12px, 3vw, 44px);
  top: clamp(12px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-media { min-height: min(760px, calc(100dvh - 34px)); padding: 24px; display: grid; place-items: center; background: var(--surface-raised); }
.modal-media img { width: 100%; max-height: calc(100dvh - 82px); object-fit: contain; opacity: 0.72; transition: opacity 240ms ease; }
.modal-media img.is-loaded { opacity: 1; }
.modal-copy { padding: clamp(48px, 5vw, 76px); align-self: center; }
.modal-copy h2 { margin-top: 12px; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.03; letter-spacing: -0.015em; }
.modal-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 14px; }
.story { margin-top: 26px; }
.story p { font-size: 17px; line-height: 1.62; }
.story p + p { margin-top: 14px; }
.modal-copy .button { margin-top: 30px; }

/* Footer */
.site-footer-v5 { padding: 74px 0 34px; background: transparent; }
.footer-v5-grid {
  display: flex;
  justify-content: space-between;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.footer-v5-brand { margin-right: auto; }
.footer-v5-brand p { max-width: 340px; margin-top: 16px; font-size: 16px; }
.footer-v5-col { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 24px; }
.footer-v5-col h3 { grid-column: 1 / -1; margin-bottom: 6px; color: var(--ink); font-size: 15px; font-weight: var(--weight-medium); }
.footer-v5-col a { color: var(--muted); font-size: 15px; transition: color 160ms ease; }
.footer-v5-col a:hover { color: var(--ink); }
.footer-v5-bottom { margin-top: 58px; padding-top: 0; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 14px; }
.footer-v5-bottom a:hover { color: var(--ink); }

/* Services */

.service-hero { padding: calc(var(--header-height) + 72px) 0 54px; }
.service-hero h1 { max-width: 1000px; font-size: clamp(54px, 6.9vw, 100px); line-height: 0.98; letter-spacing: -0.016em; }
.service-hero p { max-width: 600px; margin-top: 28px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; }
.service-hero .service-actions { margin-top: 32px; }

.client-ruler-section,
.service-feature-board-section,
.service-map-section {
  padding: var(--section-space) 0;
}

.client-ruler-heading {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: end;
}

.client-ruler-heading h2 {
  max-width: 1040px;
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.017em;
}

.client-ruler-heading p {
  max-width: 600px;
  margin-top: 22px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}

.client-ruler-heading .text-action { justify-self: end; }
.client-ruler {
  position: relative;
  margin-top: clamp(48px, 6vw, 82px);
  overflow: hidden;
}

.client-ruler::before,
.client-ruler::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 32%, transparent) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 60%, transparent) 0 1px, transparent 1px 84px);
  background-size: auto 13px, auto 25px;
  background-repeat: repeat-x;
}

.client-ruler::before { top: 0; background-position: left top; }
.client-ruler::after { bottom: 70px; background-position: left bottom; transform: scaleY(-1); }

.client-ruler__viewport {
  height: clamp(300px, 30vw, 410px);
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 48px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: calc(50vw - clamp(130px, 15vw, 230px));
}

.client-ruler__viewport::-webkit-scrollbar { display: none; }
.client-ruler__item {
  width: clamp(260px, 30vw, 460px);
  min-width: clamp(260px, 30vw, 460px);
  height: 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 62px);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0.16;
  transform: scale(0.9);
  transition: opacity 260ms ease, transform 360ms var(--ease-out);
}

.client-ruler__item[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.client-ruler__controls {
  height: 70px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px;
}

.client-ruler__button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.client-ruler__button:hover,
.client-ruler__button:focus-visible { color: var(--ink); background: var(--surface-raised); }
.client-ruler__counter { min-width: 68px; padding-bottom: 15px; color: var(--muted); text-align: center; }
.client-ruler__fallback {
  width: max-content;
  align-self: center;
  color: var(--muted);
  font-size: clamp(32px, 4vw, 58px);
  white-space: nowrap;
}

.service-feature-board-section { padding: 0 0 48px; }
.service-feature-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.service-feature-card { grid-column: span 2; position: relative; min-width: 0; padding: 26px; display: flex; flex-direction: column; gap: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scroll-margin-top: 110px; }
.service-feature-card__copy { position: relative; z-index: 1; }
.service-feature-card h2 { color: var(--ink); font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.006em; }
.service-feature-card p { max-width: 480px; margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.service-feature-card--wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; min-height: 320px; }
.service-feature-card--wide .service-feature-card__copy { display: flex; flex-direction: column; justify-content: flex-end; }

/* Product fragments instead of abstract icons: what the client will actually get. */
.service-visual {
  min-height: 210px;
  padding: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.service-visual--wide { min-height: 0; }
.ui-frag {
  width: 100%;
  max-width: 300px;
  padding: 14px 14px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.ui-frag__head {
  margin-bottom: 2px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--weight-medium);
}
.ui-chip { color: var(--muted); font-weight: 400; }
.ui-row { padding: 9px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); }
.ui-row:last-child { border-bottom: 0; }
.ui-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row em { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.ui-row--total span,
.ui-row--total em { color: var(--ink); font-weight: var(--weight-medium); }
.ui-field { margin-top: 10px; display: grid; gap: 5px; }
.ui-field small { color: var(--muted); font-size: 13px; }
.ui-field span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.ui-btn { margin: 12px 0 8px; padding: 9px; border-radius: 6px; background: var(--ink); color: var(--canvas); font-weight: 550; text-align: center; }
.ui-frag--log { max-width: 100%; }
.ui-log { padding: 8px 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 10px; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-log:last-child { border-bottom: 0; }
.ui-log time { grid-row: 1 / span 2; color: var(--subtle); }
.ui-log span { color: var(--ink); }
.ui-log em { color: var(--muted); font-style: normal; }
.ui-chat { width: 100%; max-width: 340px; display: grid; gap: 8px; }
.ui-chat__bubble { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface-strong); color: var(--ink); font-size: 14px; line-height: 1.45; }
.ui-chat__bubble small { margin-bottom: 4px; display: block; color: var(--muted); font-size: 13px; }
.ui-chat__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ui-chat__actions span { padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-size: 13px; text-align: center; }
.ui-frag--crm { max-width: 100%; margin-top: 6px; padding: 4px 14px; }
.service-board-note { margin-top: 26px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.service-board-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
@media (max-width: 1100px) {
  .service-feature-card { grid-column: span 3; }
  .service-feature-card--site { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .service-feature-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .service-hero { padding-top: calc(var(--header-height) + 40px); }
  .service-hero h1 { font-size: clamp(44px, 12vw, 60px); }
  .service-feature-card,
  .service-feature-card--site,
  .service-feature-card--wide { grid-column: 1 / -1; padding: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; min-height: 0; }
  .service-feature-card--wide .service-visual { order: -1; }
  .service-visual { min-height: 0; padding: 18px; }
}

.service-map-section {
  overflow: hidden;
  padding-top: clamp(88px, 9vw, 132px);
}
.service-map-heading {
  display: block;
  max-width: 900px;
  margin-bottom: 28px;
  text-align: center;
}
.service-map-heading h2 {
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.017em;
}
.service-map-heading p {
  margin: 24px auto 0;
  max-width: 620px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}
.service-map-heading .service-map-hint {
  display: none;
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}
.service-map-scroll {
  width: min(calc(100% - (var(--gutter) * 2)), var(--shell));
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.service-map {
  width: 100%;
  min-width: 1100px;
  display: block;
  color: var(--ink);
}
.service-map__background {
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1200px) {
  .service-map-heading .service-map-hint { display: block; }
}
.service-map__route {
  fill: none;
  stroke: url("#servicePathGradient");
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.service-map__pin {
  fill: var(--accent);
  pointer-events: none;
}
.service-map__marker {
  transform-box: fill-box;
  transform-origin: center;
}
.service-map__hit { pointer-events: all; }
.service-map__pulse {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.service-map__city foreignObject { overflow: visible; pointer-events: none; }
.service-map__label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}
.service-map__label span {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.service-map__traveler {
  fill: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.privacy-hero h1,
.service-final h2 {
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.015em;
}
.service-final p {
  max-width: 600px;
  margin-top: 22px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}
.service-final { position: relative; padding: clamp(86px, 10vw, 148px) 0; background: transparent; }
.service-final-inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: 64px; align-items: end; }
.service-final .service-actions { justify-content: flex-end; }

/* Process */

/* Prices */

/* Editorial pages: process, prices, contacts */
.editorial-page { --editorial-accent: var(--accent); }
.editorial-shell { max-width: 1160px; }
.editorial-hero { padding: calc(var(--header-height) + 100px) 0 84px; }
.editorial-hero h1 { font-size: clamp(54px, 6.9vw, 100px); line-height: 0.98; letter-spacing: -0.016em; }
.editorial-lead { max-width: 640px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin-top: 28px; }
/* One-colour headlines: the accent is motion (a light sweep), not a second colour. */
.accent-phrase { display: inline-block; max-width: 100%; position: relative; color: var(--ink); vertical-align: top; }
.accent-phrase.has-accent-layer { color: var(--subtle); }
.accent-layer { position: absolute; inset: 0; color: var(--ink); pointer-events: none; }
.accent-unit { display: inline-block; }
.editorial-final { padding-block: 70px 120px; }
.editorial-final h2 { max-width: 800px; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.1; letter-spacing: -0.014em; }
.editorial-final p { max-width: 560px; margin-top: 22px; font-size: 19px; line-height: 1.6; }
.editorial-final .button { margin-top: 30px; }

/* A chapter index, not a looping carousel. */
.workflow-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.workflow-index a { min-width: 0; padding: 24px; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color 180ms ease, background 180ms ease; }
.workflow-index a:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.workflow-index strong { display: block; font-size: 22px; font-weight: var(--weight-display); font-stretch: var(--stretch-heading); letter-spacing: 0; }
.workflow-index small { display: block; color: var(--muted); font-size: 15px; margin-top: 5px; }
.workflow-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 90px; padding-block: 90px; align-items: start; }
.workflow-chapter-title { position: sticky; top: 120px; }
.workflow-chapter h2 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -0.016em; }
.workflow-chapter-title > p { max-width: 380px; margin-top: 24px; font-size: 18px; line-height: 1.6; }
.workflow-notes { display: grid; gap: 48px; }
.workflow-notes h3 { font-size: 24px; line-height: 1.22; letter-spacing: -0.008em; }
.workflow-notes p { margin-top: 10px; line-height: 1.5; }
.workflow-notes .workflow-result { color: var(--ink); margin-top: 20px; font-size: 16px; }
.workflow-note-featured { background: var(--surface); border: 1px solid var(--line-strong); padding: 30px; border-radius: 12px; }
.workflow-checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; color: var(--muted); font-size: 16px; }
.workflow-checklist li { display: flex; gap: 10px; align-items: baseline; }
.workflow-checklist li::before { content: "—"; color: var(--subtle); }
.workflow-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 72px; }
.workflow-changes h2 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.12; letter-spacing: -0.012em; }
.workflow-changes p { line-height: 1.65; }
.workflow-changes p + p { margin-top: 20px; }

/* The real quote stays still; only the heading and media enter. */
.estimate-hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.estimate-hero-bottom .button { flex: 0 0 auto; }
.estimate-hero-bottom .editorial-lead { max-width: 600px; }
.estimate-formats { display: grid; gap: 20px; }
.estimate-format { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; padding: 40px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; align-items: start; }
.estimate-format-heading h2 { max-width: 430px; margin-top: 0; font-size: clamp(26px, 2.7vw, 36px); letter-spacing: -0.01em; line-height: 1.15; }
.estimate-value { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: var(--weight-display); font-stretch: var(--stretch-display); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 24px; }
.estimate-format-body { padding-top: 4px; }
.estimate-format-body > p { font-size: 18px; line-height: 1.65; }
.estimate-disclosure { margin-top: 20px; }
.estimate-disclosure summary { min-height: 48px; width: fit-content; display: flex; gap: 14px; align-items: center; cursor: pointer; font-size: 16px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 7px; list-style: none; }
.estimate-disclosure summary:hover { text-decoration-color: currentColor; }
.estimate-disclosure summary::-webkit-details-marker { display: none; }
.disclosure-symbol { width: 16px; height: 16px; position: relative; flex: 0 0 16px; color: var(--editorial-accent); }
.disclosure-symbol::before, .disclosure-symbol::after { content: ""; position: absolute; top: 7px; left: 1px; width: 14px; height: 1px; background: currentColor; }
.disclosure-symbol::after { transform: rotate(90deg); transition: transform 180ms ease; }
.estimate-disclosure[open] .disclosure-symbol::after { transform: rotate(0); }
.estimate-details { display: grid; gap: 22px; padding-block: 12px 26px; }
.estimate-details dt { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.estimate-details dd { font-size: 16px; color: var(--muted); line-height: 1.55; }
.estimate-format-body .text-action { margin-top: 8px; }
.estimate-factors { padding-block: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 90px; }
.estimate-factors h2, .estimate-payment h2 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -0.014em; }
.estimate-factors header p, .estimate-payment header p { max-width: 430px; margin-top: 24px; line-height: 1.65; font-size: 18px; }
.estimate-factor-list { display: grid; gap: 32px; }
.estimate-factor-list article { display: block; }
.estimate-factor-list h3 { font-size: 24px; }
.estimate-factor-list p { margin-top: 8px; line-height: 1.5; }
.estimate-payment { padding-block: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.estimate-payment-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.estimate-payment-steps li { position: relative; }
.estimate-payment-steps h3 { font-size: 22px; }
.estimate-payment-steps p { margin-top: 8px; }
.estimate-agreement { padding-block: 48px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.estimate-agreement article { padding: 30px; border-radius: 12px; background: var(--surface); }
.estimate-agreement h2 { font-size: 25px; line-height: 1.22; letter-spacing: -0.008em; }
.estimate-agreement p { margin-top: 16px; line-height: 1.6; }

/* An invitation to talk; the message is an example, not a live chat. */
.conversation-hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.conversation-message { display: flex; width: fit-content; align-items: center; gap: 16px; padding: 16px 22px; border: 1px solid var(--line-strong); border-radius: 20px 20px 20px 4px; background: var(--surface); font-size: 19px; }
.conversation-start .text-action { margin-top: 20px; gap: 14px; }

@media (max-width: 1023px) {
  .workflow-index a { padding: 22px; }
  .workflow-chapter, .workflow-changes, .estimate-factors, .estimate-payment { gap: 44px; }
  .estimate-format { gap: 36px; padding: 30px; }
  .estimate-hero-bottom { align-items: start; flex-direction: column; gap: 28px; }
  .conversation-hero-inner { gap: 38px; grid-template-columns: 1fr; }
  .conversation-start { max-width: 600px; }
}
@media (max-width: 767px) {
  .editorial-hero { padding: calc(var(--header-height) + 44px) 0 52px; }
  .editorial-hero h1 { font-size: clamp(44px, 10vw, 70px); letter-spacing: -0.018em; line-height: 1.08; }
  .editorial-lead { font-size: 18px; margin-top: 24px; }
  .workflow-index { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .workflow-index a { padding: 18px 20px; }
  .workflow-index strong { font-size: 20px; }
  .workflow-index small { font-size: 14px; }
  .workflow-chapter, .workflow-changes { grid-template-columns: 1fr; gap: 34px; padding-block: 52px; }
  .workflow-chapter-title { position: static; }
  .workflow-chapter h2 { font-size: clamp(36px, 9.5vw, 48px); }
  .workflow-chapter-title > p { max-width: none; }
  .workflow-notes { gap: 30px; }
  .workflow-note-featured { padding: 24px; }
  .workflow-changes h2 { font-size: 34px; }
  .estimate-format { grid-template-columns: 1fr; padding: 26px 22px; gap: 26px; }
  .estimate-format-heading h2 { font-size: 28px; margin-top: 0; }
  .estimate-value { font-size: clamp(28px, 8vw, 38px); margin-top: 20px; }
  .estimate-format-body > p { font-size: 17px; }
  .estimate-disclosure { margin-top: 22px; }
  .estimate-factors, .estimate-payment { grid-template-columns: 1fr; gap: 36px; padding-block: 58px; }
  .estimate-factors h2, .estimate-payment h2 { font-size: 38px; }
  .estimate-agreement { grid-template-columns: 1fr; gap: 16px; padding-block: 0 40px; }
  .estimate-agreement article { padding: 26px; }
  .editorial-final { padding-block: 40px 80px; }
  .editorial-final h2 { font-size: 36px; }
  .editorial-final p { font-size: 18px; }
  .conversation-message { font-size: 17px; padding: 15px 18px; }
}

/* Contacts */
.contacts-layout {
  padding-bottom: var(--section-space);
  display: grid;
  grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
  gap: clamp(52px, 8vw, 128px);
  align-items: start;
}
.contacts-details { position: sticky; top: 116px; }
.contacts-details h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.012em; }
.contacts-details > p { max-width: 470px; margin-top: 20px; font-size: 17px; line-height: 1.6; }
.contacts-details__links { margin-top: 32px; display: grid; gap: 12px; }
.contacts-details__links a { padding: 20px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); transition: border-color 180ms ease; }
.contacts-details__links a:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.contacts-details__links small { display: block; color: var(--muted); font-size: 14px; }
.contacts-details__links strong { display: block; margin-top: 5px; font-size: clamp(18px, 1.8vw, 26px); font-weight: var(--weight-medium); letter-spacing: -0.008em; }

.contacts-form {
  padding: clamp(28px, 4vw, 54px);
  display: grid;
  gap: 24px;
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.form-intro { margin-bottom: 8px; }
.form-intro h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.014em; }
.form-intro p { max-width: 560px; margin-top: 14px; }
.contacts-form__row,
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form label { min-width: 0; display: grid; gap: 9px; color: var(--ink); font-size: 14px; font-weight: var(--weight-medium); }
.contacts-form__optional { color: var(--muted); font-size: 13px; font-weight: var(--weight-regular); }
.contact-form input:not([type="checkbox"]):not([type="file"]):not(.honeypot),
.contact-form select,
.contact-form textarea,
.contact-form input[type="file"] {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--canvas);
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.contact-form textarea { min-height: 154px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.contact-form input[type="file"] { padding: 10px; color: var(--muted); }
.contact-form input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
}
.contact-form .honeypot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.attachment-note { color: var(--muted); font-size: 13px; font-weight: var(--weight-regular); }
.consent-field { grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--muted); font-weight: var(--weight-regular); }
.consent-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--focus); }
.consent-field a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-form button[type="submit"] {
  min-height: 50px;
  width: fit-content;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--canvas);
  font-weight: 550;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), opacity 180ms ease;
}
.contact-form button[type="submit"]:hover { opacity: 0.92; }
.contact-form button[type="submit"]:active { transform: scale(0.98); }
.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: wait; }
.contacts-form__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center; }
.form-status { min-height: 24px; font-size: 14px; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.contacts-next-note {
  grid-column: 1 / -1;
  padding-top: 20px;
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 22px;
  font-size: 15px;
}
.contacts-next-note strong { color: var(--ink); font-weight: var(--weight-medium); }
.contacts-next-note span { color: var(--muted); }

/* Privacy */
.privacy-page { padding: calc(var(--header-height) + 104px) 0 var(--section-space); }
.privacy-page__inner { max-width: 1160px; }
.privacy-hero { max-width: 900px; }
.privacy-hero p:last-child { max-width: 680px; margin-top: 22px; font-size: 18px; line-height: 1.6; }
.privacy-document { margin-top: clamp(68px, 9vw, 116px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: clamp(52px, 8vw, 126px); align-items: start; }
.privacy-document__group { display: grid; }
.privacy-document__group--actions { position: sticky; top: 116px; padding: 28px; border-radius: var(--radius-panel); background: var(--surface); }
.privacy-section { padding: 0 0 clamp(36px, 4vw, 48px); }
.privacy-document__group--actions .privacy-section:last-child { padding-bottom: 0; }
.privacy-section h2 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.08; letter-spacing: -0.014em; }
.privacy-section p { max-width: 680px; margin-top: 13px; line-height: 1.65; }
.privacy-section a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .button-primary:hover,
  .button-light:hover,
  .contact-form button[type="submit"]:hover { transform: translateY(-1px); }

}

/* Responsive */
@media (max-width: 1100px) {
  :root { --gutter: clamp(20px, 3.2vw, 38px); }
  .home-hero-grid { gap: 40px 24px; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .nav-links,
  .nav-cta { display: none; }
  .mobile-menu-toggle { display: grid; }
  .works-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .works-viewport::-webkit-scrollbar { display: none; }
  .works-viewport[data-motion="scroll"] { overflow-x: clip; scroll-snap-type: none; }
  .works-track,
  .selected-work-row { padding-inline: var(--gutter); transform: none; }
  .selected-work-card,
  .work-card { width: min(55vw, 420px); scroll-snap-align: start; }
  .home-hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 42px; }
  .home-hero-copy,
  .home-hero-context { grid-column: 1; }
  .home-hero-copy h1 { font-size: clamp(48px, 8.2vw, 76px); }
  .portfolio-hero .shell,
.featured-intro,
.archive-heading,
.expertise-grid,
.trust-layout,
.service-final-inner,
.contacts-layout,
.privacy-document { grid-template-columns: 1fr; }
  .portfolio-hero p,
  .featured-intro p,
  .archive-heading p { margin-top: 18px; }
  .capabilities-intro > div { grid-column: 1 / 9; }
  .capabilities-intro > .text-action { grid-column: 9 / 13; }
  .capability-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card,
  .feature-card:nth-child(1),
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:nth-child(4),
  .feature-card:nth-child(5),
  .feature-card:nth-child(6) { grid-column: auto; min-height: 360px; }
  .feature-card--wide { grid-column: 1 / -1; }
  .client-ruler-heading { grid-template-columns: 1fr; gap: 24px; }
  .client-ruler-heading .text-action { justify-self: start; }
  .contacts-details,
  .privacy-document__group--actions { position: static; }
  .service-final .service-actions { justify-content: flex-start; }
  .process-story-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root {
    --gutter: 18px;
    --section-space: 72px;
  }
  html { scroll-behavior: auto; }
  body { font-size: 17px; }
  .nav-shell { width: calc(100% - 24px); min-height: 54px; padding-left: 14px; }
  .site-header { padding-top: max(6px, env(safe-area-inset-top)); }
  .page-hero {
    min-height: auto;
    padding: calc(var(--header-height) + 44px) 0 60px;
  }
  .home-hero {
    min-height: max(720px, 100svh);
    padding: calc(var(--header-height) + 42px) 0 44px;
    align-items: stretch;
  }
  .home-hero-grid {
    min-height: calc(max(720px, 100svh) - var(--header-height) - 86px);
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    gap: 28px;
  }
  .home-hero:not([data-webgl="ready"])::before {
    width: min(88vw, 460px);
    right: 50%;
    top: 73%;
    transform: translate(50%, -50%);
  }  .home-hero { --hero-fade: 56px; }
  .home-hero-copy h1 { font-size: clamp(46px, 13.4vw, 64px); line-height: 0.96; letter-spacing: -0.015em; }
  .home-hero-copy h1 span { display: inline; }
  .home-hero-copy h1 span + span::before { content: " "; }
  .home-hero-context { max-width: 560px; }
  .home-hero-context > p { font-size: 17px; }
  .hero-actions { margin-top: 24px; align-items: center; gap: 12px 24px; }
  .perspective-marquee__viewport {
    height: 172px;
    perspective-origin: 43% 50%;
  }
  .perspective-marquee__scene { inset-inline: -24%; }
  .perspective-marquee__viewport::before,
  .perspective-marquee__viewport::after { width: 44px; }
  .perspective-marquee__word { font-size: 44px; }
  .section-heading-inline h2,
.capabilities-intro h2,
.expertise-copy h2,
.trust-lead h2,
.process-story-intro h2,
.price-preview-heading h2,
.final-cta h2,
.archive-heading h2,
.featured-intro h2,
.contacts-details h2,
.privacy-hero h1,
.service-final h2 { font-size: clamp(36px, 10vw, 50px); line-height: 1.04; letter-spacing: -0.012em; }
  .section-heading-inline { display: block; }
  .section-heading-inline .text-action { margin-top: 22px; }
  .works-viewport { scroll-padding-inline: 18px; }
  .works-track,
  .selected-work-row { padding-inline: 18px; }
  .selected-work-card,
  .work-card { width: min(82vw, 360px); scroll-snap-align: start; }
  .capabilities-intro { display: block; margin-bottom: 40px; }
  .capabilities-intro > .text-action { margin-top: 24px; }
  .capability-cards { grid-template-columns: 1fr; gap: 10px; }
  .feature-card,
  .feature-card:nth-child(1),
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:nth-child(4),
  .feature-card:nth-child(5),
  .feature-card:nth-child(6),
  .feature-card--wide { grid-column: 1; min-height: 210px; }
  .feature-card h3,
  .feature-card:nth-child(2) h3,
  .feature-card:nth-child(3) h3 { font-size: 30px; }
  .feature-card p { font-size: 17px; }
  .expertise-copy { display: block; }
  .expertise-copy > p { margin-top: 22px; }
  .trust-layout { gap: 40px; }
  .trust-support { gap: 28px; }
  .process-story-flow { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; padding: 26px 22px; border-radius: 16px; }
  .process-story-flow p { margin-top: 6px; }
  .price-bands { grid-template-columns: 1fr; gap: 30px; }
  .price-band { gap: 6px; }
  .price-band h3 { min-height: 0; }
  .price-band strong { font-size: 36px; white-space: normal; }
  .final-cta-inner { display: block; padding: 32px 22px 24px; border-radius: 16px; }
  .final-cta .button { margin-top: 28px; }
  .portfolio-hero h1 { font-size: clamp(50px, 14vw, 70px); }
  .portfolio-hero .handwriting-word { font-size: 0.9em; margin-top: 0; }
  .featured-intro { padding-bottom: 34px; }
  .featured-scenes { gap: 22px; }
  .featured-scene,
  .featured-scene.is-reversed { min-height: 0; grid-template-columns: 1fr; }
  .featured-scene.is-reversed .featured-scene__media,
  .featured-scene.is-reversed .featured-scene__copy { grid-column: 1; grid-row: auto; }
  .featured-scene__media { padding: 16px; aspect-ratio: 16 / 11; }
  .featured-scene__copy { padding: 26px 22px 30px; }
  .featured-scene__meta { margin-bottom: 42px; }
  .featured-scene h3 { font-size: 38px; }
  .featured-scene__body p { font-size: 16px; }
  .portfolio-toolbar { position: static; grid-template-columns: 1fr; padding: 10px; }
  .filter-list { margin-inline: -2px; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .project-copy { padding-top: 10px; }
  .project-copy h2,
  .project-copy h3 { font-size: 18px; line-height: 1.2; }
  .modal-panel { grid-template-columns: 1fr; max-height: calc(100dvh - 16px); }
  .modal-media { min-height: 0; padding: 12px; }
  .modal-media img { max-height: 48dvh; }
  .modal-copy { padding: 32px 22px 38px; }
  .modal-copy h2 { font-size: 40px; }
  .footer-v5-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
  .footer-v5-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .footer-v5-col a { min-height: 40px; display: flex; align-items: center; font-size: 16px; }
  .footer-v5-bottom { margin-top: 40px; display: grid; }
  .client-ruler__viewport {
    height: 280px;
    gap: 16px;
    padding-inline: 15vw;
  }
  .client-ruler__item {
    width: 70vw;
    min-width: 70vw;
    font-size: clamp(34px, 10vw, 46px);
  }
  .client-ruler::after { bottom: 64px; }
  .client-ruler__controls { height: 64px; }
  .service-map-scroll {
    width: 100%;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .service-final-inner { gap: 36px; }
  .contacts-layout { gap: 54px; }
  .contacts-form { padding: 24px 18px; }
  .contact-form textarea { min-height: 180px; }
  .contacts-form__row,
  .two-cols { grid-template-columns: 1fr; }
  .contacts-form__actions { grid-template-columns: 1fr; }
  .contacts-next-note { grid-template-columns: 1fr; gap: 8px; }
  .privacy-document { gap: 48px; }
  .privacy-page { padding-top: calc(var(--header-height) + 52px); }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .home-hero-copy h1 { font-size: clamp(40px, 11.8vw, 50px); }
  .button { width: 100%; }
  .hero-actions .button { width: auto; }
  .hero-actions .text-action { min-height: 40px; }
  .section-heading-inline p,
  .process-story-intro p,
  .price-preview-heading p,
  .archive-heading p,
  .featured-intro p { font-size: 16px; }
  .contact-form button[type="submit"] { width: 100%; }
}

/* Scroll showcase on phones and tablets: projects arrive as cards from below and the
   previous one settles back, instead of the desktop split motion. */
@media (max-width: 1023px) {
  .featured-showcase.is-sticky { --featured-step: 70svh; }
  .featured-showcase.is-sticky .featured-intro { padding-bottom: 24px; }
  .featured-showcase.is-sticky .featured-stage { height: 230svh; }
  .featured-showcase.is-sticky .featured-scenes { background: transparent; }
  .featured-showcase.is-sticky .featured-scene,
  .featured-showcase.is-sticky .featured-scene.is-reversed {
    inset: 0 var(--gutter);
    min-height: 0;
    height: fit-content;
    max-height: 100%;
    max-width: 720px;
    margin: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 0;
    transition: transform 760ms var(--ease-out), opacity 640ms ease;
  }
  .featured-showcase.is-sticky .featured-scene__media,
  .featured-showcase.is-sticky .featured-scene__copy,
  .featured-showcase.is-sticky .featured-scene[data-state] .featured-scene__media,
  .featured-showcase.is-sticky .featured-scene[data-state] .featured-scene__copy {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .featured-showcase.is-sticky .featured-scene__media {
    flex: none;
    margin: 10px 10px 0;
    padding: 0;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }
  .featured-showcase.is-sticky .featured-scene__media img { object-fit: cover; object-position: top center; }
  .featured-showcase.is-sticky .featured-scene__copy {
    min-height: 0;
    padding: 20px 20px 18px;
    background: transparent;
  }
  .featured-showcase.is-sticky .featured-scene__meta { margin-bottom: 8px; }
  .featured-showcase.is-sticky .featured-scene__body { margin: 0; }
  .featured-showcase.is-sticky .featured-scene h3 { font-size: clamp(30px, 8.4vw, 44px); }
  .featured-showcase.is-sticky .featured-scene__body p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .featured-showcase.is-sticky .featured-scene__open { margin-top: 10px; }
  .featured-showcase.is-sticky .featured-scene[data-state="after"] { transform: translate3d(0, 100svh, 0); }
  .featured-showcase.is-sticky .featured-scene[data-state="before"] { transform: translate3d(0, -3%, 0) scale(0.92); opacity: 0.4; }
  .featured-showcase.is-sticky .featured-scene.is-adjacent[data-state="after"] { z-index: 4; }
  .featured-showcase.is-sticky.is-direct-jump .featured-scene { transition: none; }
}
@media (max-width: 1023px) and (max-height: 760px) {
  .featured-showcase.is-sticky .featured-scene__body p + p { display: none; }
}

/* ==========================================================================
   Motion: page transitions, text reveals and feedback on controls.
   Hidden states only apply to classes that motion.js adds, so the site reads fine without it.
   ========================================================================== */
.site-header { view-transition-name: site-header; }
.site-ambience { view-transition-name: site-ambience; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 300ms cubic-bezier(0.65, 0, 0.35, 1) both vt-leave; }
  ::view-transition-new(root) { animation: 700ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both vt-enter; }

  html.no-vt main,
  html.no-vt .site-footer-v5 { animation: page-enter 700ms var(--ease-out) backwards; }
  html.is-leaving main,
  html.is-leaving .site-footer-v5 {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
    transition: opacity 220ms ease, transform 260ms var(--ease-scene);
  }

  /* Mobile menu: links arrive one after another */
  .mobile-menu-links a,
  .mobile-menu-bottom > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 320ms ease, transform 560ms var(--ease-out);
  }
  .mobile-menu-panel.open .mobile-menu-links a,
  .mobile-menu-panel.open .mobile-menu-bottom > * { opacity: 1; transform: none; }
  .mobile-menu-panel.open .mobile-menu-links a:nth-child(1) { transition-delay: 60ms; }
  .mobile-menu-panel.open .mobile-menu-links a:nth-child(2) { transition-delay: 100ms; }
  .mobile-menu-panel.open .mobile-menu-links a:nth-child(3) { transition-delay: 140ms; }
  .mobile-menu-panel.open .mobile-menu-links a:nth-child(4) { transition-delay: 180ms; }
  .mobile-menu-panel.open .mobile-menu-links a:nth-child(5) { transition-delay: 220ms; }
  .mobile-menu-panel.open .mobile-menu-bottom > :nth-child(1) { transition-delay: 280ms; }
  .mobile-menu-panel.open .mobile-menu-bottom > :nth-child(2) { transition-delay: 330ms; }
}

@keyframes vt-leave { to { opacity: 0; transform: translate3d(0, -24px, 0) scale(0.99); } }
@keyframes vt-enter { from { opacity: 0; transform: translate3d(0, 36px, 0); } }
@keyframes page-enter { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* Headings rise word by word from under their own baseline */
.tr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.12em;
  margin-block: -0.12em;
}
.tr-inner {
  display: inline-block;
  transform: translate3d(0, calc(100% + 0.2em), 0);
  transition: transform calc(900ms * var(--motion-tempo)) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 38ms * var(--motion-tempo));
}
.is-revealed .tr-inner { transform: none; }
.home-hero .tr-inner { transition-duration: calc(1100ms * var(--motion-tempo)); transition-delay: calc((var(--i, 0) * 46ms + 120ms) * var(--motion-tempo)); }
.home-hero-copy h1 .tr-word,
.home-hero-copy h1 .tr-inner { display: inline-block; animation: none; }
.home-hero-copy h1.tr-heading > span { animation: none; }
.home-hero-copy h1 .tr-word::before { content: none; }

.tr-follow {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity calc(700ms * var(--motion-tempo)) ease, transform calc(800ms * var(--motion-tempo)) var(--ease-out);
  transition-delay: var(--tr-delay, 200ms);
}
.tr-follow.is-revealed { opacity: 1; transform: none; }

/* Cards and steps arrive in order */
.rv-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity calc(700ms * var(--motion-tempo)) ease, transform calc(900ms * var(--motion-tempo)) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms * var(--motion-tempo));
}
.rv-group.is-revealed > .rv-item { opacity: 1; transform: none; }

/* Buttons: the label rolls to a fresh copy, the button gives under the finger */
.btn-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
  vertical-align: middle;
}
.btn-roll > span {
  display: inline-block;
  transition: transform 480ms var(--ease-out);
}
.btn-roll::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  text-align: center;
  transition: transform 480ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a:hover > .btn-roll > span,
  a:hover > .btn-roll::after,
  button:hover > .btn-roll > span,
  button:hover > .btn-roll::after { transform: translate3d(0, -100%, 0); }
}
.button,
.nav-cta,
.mobile-menu-action,
.filter-button,
.contact-form button[type="submit"] {
  transition: transform 200ms var(--ease-out), background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:active,
.nav-cta:active,
.mobile-menu-action:active,
.filter-button:active,
.contact-form button[type="submit"]:active { transform: scale(0.96); transition-duration: 90ms; }

/* Links: the underline draws in from the left */
.text-action,
.service-text-link,
.featured-scene__open,
.mobile-menu-contacts a,
.service-board-note a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  background-position: 0 calc(50% + 0.78em), 0 calc(50% + 0.78em);
  transition: background-size 460ms var(--ease-out), color 180ms ease;
}
.service-board-note a { background-position: 0 100%, 0 100%; }
.text-action:hover,
.service-text-link:hover,
.featured-scene__open:hover,
.mobile-menu-contacts a:hover,
.service-board-note a:hover { background-size: 100% 1px, 100% 1px; }

.nav-links a {
  padding-block: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: color 180ms ease, background-size 420ms var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active { background-size: 100% 1px; }

/* Portfolio filters: one indicator slides between categories */
.filter-list { position: relative; isolation: isolate; }
.filter-indicator {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  pointer-events: none;
  transition: transform 480ms var(--ease-out), width 480ms var(--ease-out);
}
.filter-list.has-indicator .filter-button.active { border-color: transparent; background: transparent; }

/* Work previews lean in on hover */
.selected-work-card__media img,
.project-media img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .selected-work-card:hover .selected-work-card__media img,
  .project-card:hover .project-media img { transform: scale(1.035); }
}

/* Contact form: sending, errors and confirmation are visible, not only written */
.contact-form button[type="submit"].is-loading {
  cursor: progress;
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--canvas) 18%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: button-sheen 1.1s linear infinite;
}
.contact-form button[type="submit"].is-shaking,
.contact-form label.is-invalid { animation: field-shake 380ms ease; }
.contact-form label.is-invalid :is(input, select, textarea) { border-color: var(--danger); }
.form-status.is-announced { animation: status-in 460ms var(--ease-out) both; }
@keyframes button-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes field-shake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes status-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .featured-showcase.is-sticky { min-height: auto; padding-bottom: var(--section-space); }
  .featured-showcase.is-sticky .featured-stage { height: auto; }
  .featured-showcase.is-sticky .featured-scenes { height: auto; position: static; display: grid; overflow: visible; }
  .featured-showcase.is-sticky .featured-scene { min-height: 0; position: static; visibility: visible; pointer-events: auto; border-radius: var(--radius-media); }
  .featured-sentinels { display: none; }
  .works-track { transform: none; }
  .perspective-marquee__track {
    animation: none;
    transform: translate3d(-18%, 0, 0);
  }
}

/* ==========================================================================
   Loading screen: once per session, while fonts load and the shaders compile and
   show their first frame (motion.js lifts it). Only opacity animates, on the compositor,
   so it stays smooth while the page is busy underneath.
   ========================================================================== */
.site-intro { display: none; }

html.intro-on .site-intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: var(--canvas);
  color: var(--ink);
}

.site-intro__brand {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.site-intro .brand-mark { scale: 1.7; }
.site-intro .brand-mark i { animation: intro-bar 900ms ease-in-out infinite alternate both; }
.site-intro .brand-mark i:nth-child(2) { animation-delay: 150ms; }
.site-intro .brand-mark i:nth-child(3) { animation-delay: 300ms; }

.site-intro__name {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 420ms ease;
}
/* The wordmark waits for its font, so the fallback face never flashes. */
html.fonts-ready .site-intro__name { opacity: 1; }

.site-intro__progress {
  position: relative;
  width: 132px;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}
.site-intro__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  animation: intro-progress 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

html.intro-leaving .site-intro {
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms ease, visibility 0s linear 520ms;
}

/* Until the brand font has loaded the page content stays hidden, so nothing is laid out in a
   fallback face and re-wrapped in front of the visitor. If it takes longer than 4.5 s (see <head>),
   the page shows in the system font and keeps it until the next page, when the font is cached:
   a late swap re-wrapped every heading, most often in Safari on a slow mobile connection. */
html.fonts-pending main,
html.fonts-pending .site-header,
html.fonts-pending .site-footer-v5 { visibility: hidden; }
html.font-fallback { --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* The hero's entrance waits under the screen and starts as it lifts. */
html.intro-on:not(.intro-leaving) .hero-enter,
html.intro-on:not(.intro-leaving) .home-hero-copy h1 span { animation-play-state: paused; }

@keyframes intro-bar { from { opacity: 0.28; } to { opacity: 1; } }
@keyframes intro-progress { to { transform: scaleX(0.92); } }

/* Safari before 16 ignores overflow: clip, and the page could scroll sideways. */
@supports not (overflow: clip) {
  body,
  .works-viewport,
  .works-viewport[data-motion="scroll"] { overflow-x: hidden; }
}

/* Rows that fit the screen sit in the middle when they do not move (reduced motion). */
.works-viewport[data-motion="static"] .selected-work-row { margin-inline: auto; }