/* ============================================================================
   SKWD Consulting landing page — the page layer on top of the Modernist system.

   Everything here reads from the tokens in modernist.css. The page carries its
   own display type scale (larger than the system's interface scale), which is
   the one thing it legitimately adds; colours, dividers and states all come
   from the system.
   ========================================================================= */

/* — base ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
::selection { background: color-mix(in srgb, var(--color-accent) 20%, transparent); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Content columns. Heroes run to the full 1440px; every other stop narrows to
   1120px so the fixed character has an outer margin to stand in. */
.shell {
  position: relative;
  max-width: var(--shell-max, 1120px);
  margin-inline: auto;
  padding-inline: 32px;
}
.hero .shell { --shell-max: 1440px; }

.section { border-bottom: 2px solid var(--color-text); }
.section--dark { background: var(--color-text); color: var(--color-bg); }
.section--accent { position: relative; overflow: hidden; background: var(--color-accent); color: #fff; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.section--dark .eyebrow { color: var(--color-accent-400); }

.section-title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.section-lede {
  margin: 22px 0 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}

/* Buttons — the page's display-weight variants of the system button. */
.btn--display {
  justify-content: flex-start;
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 26px;
}
.btn--outline {
  border: 2px solid var(--color-text);
  color: var(--color-text);
  padding: 16px 26px;
}
.btn--outline:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn--inverse { background: #fff; color: var(--color-accent); }
.btn--inverse:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.btn--compact { font-size: 13px; padding: 14px 18px; }

/* — the 3D room ----------------------------------------------------------- */
/* One perspective box drawn twice: a resting copy, and a brighter copy masked
   to a disc under the cursor so the lines it passes over light up. Line
   colours come in per-section via the --line-* custom properties. */

.room { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.room__space {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 26%;
  transform-style: preserve-3d;
}

.room__plane {
  position: absolute;
  background-image:
    linear-gradient(var(--line) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--line) 1.5px, transparent 1.5px);
  background-size: 38px 38px;
}
.room__plane--back  { inset: 0; transform: translateZ(-900px); --line: var(--line-back); }
.room__plane--floor { left: 0; right: 0; bottom: 0; height: 900px; transform-origin: center bottom; transform: rotateX(90deg); --line: var(--line-floor); }
.room__plane--left  { left: 0; top: 0; bottom: 0; width: 900px; transform-origin: left center; transform: rotateY(90deg); --line: var(--line-side); }
.room__plane--right { right: 0; top: 0; bottom: 0; width: 900px; transform-origin: right center; transform: rotateY(-90deg); --line: var(--line-side); }

.room__lens { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
.room__lens .room__plane--back  { --line: var(--lens-back); }
.room__lens .room__plane--floor { --line: var(--lens-floor); }
.room__lens .room__plane--left,
.room__lens .room__plane--right { --line: var(--lens-side); }

.room__fade { position: absolute; inset: 0; background: var(--room-fade); }

/* A soft accent glow that follows the pointer. */
.room__light {
  position: absolute;
  left: 0;
  top: 0;
  width: 120vmax;
  height: 120vmax;
  margin-left: -60vmax;
  margin-top: -60vmax;
  will-change: transform;
  pointer-events: none;
  background: radial-gradient(circle, var(--light-tint) 0%, transparent 55%);
}

/* — the character --------------------------------------------------------- */

.character-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  will-change: transform;
}
.character-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.character-tilt {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 92%;
  transition: filter 0.3s;
}
.character-shadow {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 60%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--color-text) 33%, transparent), transparent 70%);
  filter: blur(2px);
}
.character-img {
  display: block;
  height: 70vh;
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--color-text) 28%, transparent));
}
.character-tag {
  position: absolute;
  left: 50%;
  bottom: -52px;
  transform: translateX(-50%);
  padding: 7px 12px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

/* — header ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}
.site-header .nav {
  max-width: 1440px;
  margin-inline: auto;
  padding: 14px 32px;
  gap: 32px;
  border-bottom: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.brand__mark { width: 14px; height: 14px; background: var(--color-accent); display: block; }

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-links a { color: var(--color-text); }
.nav-links a:hover { color: var(--color-accent); }

.nav-cta {
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
}

/* Hamburger toggle — hidden on desktop, shown at the same 900px breakpoint
   that hides .nav-links (see that media query below). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--color-text);
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Morphs into an X when open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen link panel, populated from .nav-links / .nav-cta by
   js/skwd.js so the link set lives in exactly one place. Sits just under
   the fixed header (--header-h, measured in JS) rather than a hardcoded
   height, since header padding itself changes at narrower breakpoints. */
.mobile-nav {
  position: fixed;
  inset: var(--header-h, 70px) 0 0 0;
  z-index: 59;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a {
  padding: 20px 0;
  border-bottom: 2px solid var(--color-divider);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.mobile-nav__links a:hover { color: var(--color-accent); }
.mobile-nav__cta { display: block; }

/* Applied to <html> while the mobile menu is open, so the page behind it
   can't be scrolled — see js/skwd.js. */
html.nav-open { overflow: hidden; }

/* — hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 70px;
  border-bottom: 2px solid var(--color-text);
  overflow: hidden;

  --line-back: color-mix(in srgb, var(--color-text) 15%, transparent);
  --line-floor: color-mix(in srgb, var(--color-text) 20%, transparent);
  --line-side: color-mix(in srgb, var(--color-text) 17%, transparent);
  --lens-back: color-mix(in srgb, var(--color-text) 33%, transparent);
  --lens-floor: color-mix(in srgb, var(--color-text) 44%, transparent);
  --lens-side: color-mix(in srgb, var(--color-text) 37%, transparent);
  --light-tint: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --room-fade: linear-gradient(
    var(--color-bg) 0%,
    transparent 22%,
    transparent 78%,
    color-mix(in srgb, var(--color-bg) 80%, transparent) 100%
  );
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 70px);
  padding-block: 96px 64px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.hero__rule { width: 36px; height: 2px; background: var(--color-accent); display: block; }

.hero__title {
  margin: 0;
  font-size: clamp(48px, 6.6vw, 104px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--color-accent); }

.hero__lede {
  margin: 32px 0 0;
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 2px solid var(--color-divider);
}
.stat { padding: 20px; border-right: 2px solid var(--color-text); }
.stat:first-child { padding: 20px 20px 0 0; }
.stat:last-child { border-right: 0; }
.stat__value { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; }
.stat__label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* — hero entrance ----------------------------------------------------------
   Pure CSS, no JS gate needed: the hero is always in view on load, so a
   scroll observer would just fire instantly anyway. Staggered delays via
   animation-fill-mode: both hold each element at its 0% frame until its turn. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow, .hero__lede, .hero__actions, .hero__stats {
  animation: hero-rise 0.8s cubic-bezier(.16, .8, .24, 1) both;
}
.hero__eyebrow { animation-delay: 0.05s; }
.hero__lede    { animation-delay: 0.4s; }
.hero__actions { animation-delay: 0.56s; }
.hero__stats   { animation-delay: 0.68s; }

/* Each title line sits in its own overflow-hidden mask (.reveal-line) so the
   text itself can rise up from behind it, rather than just fading in. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: inline-block;
  animation: line-rise 0.9s cubic-bezier(.16, .8, .24, 1) both;
}
.reveal-line:nth-child(1) > span { animation-delay: 0.1s; }
.reveal-line:nth-child(2) > span { animation-delay: 0.2s; }
.reveal-line:nth-child(3) > span { animation-delay: 0.3s; }
.reveal-line:nth-child(4) > span { animation-delay: 0.4s; }
@keyframes line-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Stat values count up via JS (see js/skwd.js); a tabular-nums lock keeps the
   digits from jittering the layout width as they change. */
.stat__value { font-variant-numeric: tabular-nums; }

/* — scroll-triggered reveals -------------------------------------------------
   [data-reveal] / [data-reveal-group] mark section copy and card grids; JS
   toggles .is-visible via IntersectionObserver as each scrolls into view.
   Group children stagger through --reveal-i, set once by JS per child. */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(.16, .8, .24, 1), transform 0.7s cubic-bezier(.16, .8, .24, 1);
}
[data-reveal][data-reveal-delay] { transition-delay: 0.15s; }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(.16, .8, .24, 1), transform 0.6s cubic-bezier(.16, .8, .24, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }

/* The two decorative blocks are positioned against the two-column split; the
   narrow breakpoint below drops them and lets the text run full width. */
.plinth { position: absolute; will-change: transform; }
.plinth--solid { right: 19%; top: 14%; width: 24%; height: 66%; background: var(--color-accent); }
.plinth--outline { right: 13%; bottom: 8%; width: 18%; height: 26%; border: 2px solid var(--color-text); }

/* — marquee --------------------------------------------------------------- */

.marquee { border-bottom: 2px solid var(--color-text); overflow: hidden; padding: 26px 0; background: var(--color-bg); }
.marquee__track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 30.9s linear infinite;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  white-space: nowrap;
}

/* Second row runs the same keyframe backwards rather than duplicating it.
   The first row's existing border-bottom already separates the two rows. */
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* — services -------------------------------------------------------------- */

.services__head { padding-block: 96px 0; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 64px;
  margin-bottom: 96px;
  border-top: 2px solid var(--color-text);
  border-left: 2px solid var(--color-text);
}

.service {
  padding: 40px;
  background: transparent;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}
.service--filled { background: #fff; }
.service__num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-accent);
}
.service__title {
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.service__body {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.service__tags { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.service__cta { display: block; margin-top: 20px; }

.tag--rule {
  border: 2px solid var(--color-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
}

/* — process --------------------------------------------------------------- */

.process .shell { padding-block: 96px; }
.process__head { margin-bottom: 56px; }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-bg);
}
.step { padding: 32px 28px; border-right: 2px solid var(--color-neutral-800); }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; border-right: 0; }
.step__num { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--color-accent-400); }
.step__title { margin: 16px 0 0; font-size: 20px; font-weight: 800; }
.step__body { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-400); }

/* — work ------------------------------------------------------------------ */

.work .shell { padding-block: 96px; }
.work__head { margin-bottom: 56px; }

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 2px solid var(--color-text);
}
.case { padding: 36px; background: transparent; border-right: 2px solid var(--color-text); }
.case:last-child { border-right: 0; }
.case--filled { background: #fff; }
.case__client {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.case__metric {
  margin-top: 26px;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-accent);
}
.case__label { margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.case__body { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }

/* — engagement -------------------------------------------------------------- */

.engagement .shell { padding-block: 96px; }
.engagement__head { margin-bottom: 56px; }
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 2px solid var(--color-text);
}
.plan {
  padding: 36px;
  gap: 18px;
  background: transparent;
  border-right: 2px solid var(--color-text);
}
.plan:last-child { border-right: 0; }
.plan__name {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan__price { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.plan__price span { font-size: 15px; font-weight: 700; color: var(--color-neutral-700); }
.plan__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
.plan__list {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 2px solid var(--color-text);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-neutral-800);
}
.plan__cta { margin-top: auto; }

.plan--featured { background: var(--color-accent); color: #fff; }
.plan--featured .plan__price span { color: inherit; opacity: 0.8; }
.plan--featured .plan__body { color: inherit; }
.plan--featured .plan__list { border-top-color: #fff; color: inherit; }

/* — testimonials ---------------------------------------------------------- */

.quotes .shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  padding-block: 96px;
  border-left: 2px solid var(--color-text);
}
.quote { margin: 0; padding: 0 48px 0 40px; border-right: 2px solid var(--color-text); }
.quote:last-child { padding-right: 0; border-right: 0; }
.quote p {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quote footer {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* — faq ------------------------------------------------------------------- */

.faq .shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  padding-block: 96px;
}
.faq__title { margin: 16px 0 0; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; font-weight: 900; letter-spacing: -0.03em; }
.faq__list { border-top: 2px solid var(--color-text); }
.faq__item { border-bottom: 2px solid var(--color-text); padding: 22px 0; }
.faq__item summary { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; }
.faq__item summary::marker { color: var(--color-accent); }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }

/* — contact --------------------------------------------------------------- */

.contact {
  --line-back: rgb(255 255 255 / 0.19);
  --line-floor: rgb(255 255 255 / 0.28);
  --line-side: rgb(255 255 255 / 0.22);
  --lens-back: rgb(255 255 255 / 0.48);
  --lens-floor: rgb(255 255 255 / 0.62);
  --lens-side: rgb(255 255 255 / 0.54);
  --room-fade: linear-gradient(
    var(--color-accent) 0%,
    transparent 18%,
    transparent 82%,
    var(--color-accent) 100%
  );
}
.contact .shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: start;
  padding-block: 110px;
}
.contact__title { margin: 0; font-size: clamp(40px, 6vw, 92px); line-height: 0.92; font-weight: 900; letter-spacing: -0.04em; }
.contact__lede { margin: 28px 0 0; max-width: 44ch; font-size: 19px; line-height: 1.55; }
.contact__details {
  font-style: normal; /* <address> defaults to italic; the system sets type upright */
  margin-top: 48px;
  padding-top: 20px;
  border-top: 2px solid #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2.1;
}
.contact__details a { color: inherit; }
.contact__details a:hover { color: var(--color-accent-200); }

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  background: var(--color-bg);
  color: var(--color-text);
}
.contact__form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact__form .input {
  min-height: 52px;
  padding: 14px;
  background: #fff;
  border: 2px solid var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
}
.contact__form textarea.input { resize: vertical; }

/* Honeypot — moved off screen rather than display:none, which bots detect.
   Never focusable (tabindex="-1" on the input) and never read out. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__submit {
  border: 0;
  margin-top: 0;
  padding: 18px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.contact__submit[disabled] { opacity: 0.5; cursor: progress; }

.contact__status { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; }
.contact__status:empty { display: none; }
.contact__status[data-state='error'] { color: var(--color-accent-700); }
.contact__status[data-state='sending'] { color: var(--color-neutral-700); }
.contact__status[data-state='sent'] { color: var(--color-neutral-800); }
.contact__status a { color: var(--color-accent-700); text-decoration: underline; }

/* — footer ---------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px;
  background: var(--color-text);
  color: var(--color-neutral-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--color-neutral-700); }
.footer-links a:hover { color: #fff; }

/* — legal pages ------------------------------------------------------------
   Privacy, Terms, Refund. Reading pages, not marketing pages — headings use a
   more moderate scale than `.section-title`'s shouty display size, and the
   shell narrows to a comfortable line length instead of the site's usual
   1120px. */

.legal .shell { --shell-max: 760px; padding-block: 160px 96px; }

.legal__head { margin-bottom: 48px; }
.legal__title {
  margin: 16px 0 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.legal__updated {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* Markdown-rendered body copy. h1–h6/p/a/hr[.hr]/img already carry global
   type from modernist.css; this fills in the tags Markdown produces that the
   system doesn't otherwise style — lists, quotes, code, a raw <hr>. */
.prose { font-size: 16px; line-height: 1.7; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); font-size: 26px; }
.prose h3 { margin-top: var(--space-6); font-size: 20px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose li > ul, .prose li > ol { margin-top: var(--space-2); }
.prose blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  color: var(--color-neutral-800);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-surface);
  padding: 0.15em 0.4em;
}
.prose pre {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose hr {
  height: 2px;
  border: 0;
  background: var(--color-divider);
}
/* Markdown tables reuse modernist.css's .table component for their look; the
   wrapper only handles overflow. min-width is deliberate — on a narrow phone
   a multi-column table should scroll sideways within this box rather than
   wrap down to one word per cell (and the box, not the page, is what
   scrolls). */
.prose .table-wrap { overflow-x: auto; }
.prose .table-wrap .table { min-width: 480px; }
/* Figures. The artwork's own off-white ground is a shade lighter than the
   page, so a hairline keeps it from looking like it's bleeding into the
   column; modernist.css already makes img block-level and fluid. */
.prose figure { margin: 0; }
.prose figure img { width: 100%; border: 2px solid var(--color-divider); }
.prose figcaption {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-700);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.back-link:hover { color: var(--color-accent); }

/* — blog --------------------------------------------------------------- */

.blog-head { padding-block: 160px 0; }
.blog-head .section-lede { max-width: 62ch; }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 56px;
  margin-bottom: 96px;
  border-top: 2px solid var(--color-text);
  border-left: 2px solid var(--color-text);
}
.post-card {
  padding: 36px;
  gap: 0;
  background: transparent;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}
.post-card__meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.post-card__title {
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
/* Without this, .card's align-items:stretch stretches the ghost link to the
   card's full width, and .btn's justify-content:center then centres the text
   inside that box — breaking the system's flush-left rule. */
.post-card__cta { margin-top: 20px; align-self: flex-start; }

.post-header { margin-bottom: 48px; }
.post-header__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.post-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 2px solid var(--color-text);
}

.blog-empty {
  padding: 56px 0 96px;
  font-size: 16px;
  color: var(--color-neutral-700);
}

/* — responsive ------------------------------------------------------------
   The original relied on the runtime to collapse hero A below 1040px; the
   breakpoints below do the same work in CSS, so the layout is correct before
   a single frame of script runs. */

@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__spacer { display: none; }
  .plinth { display: none; }
}

@media (max-width: 900px) {
  .character-layer { display: none; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; } /* the links carried the auto margin */
  .nav-toggle { display: flex; }
  .quotes .shell { border-left: 0; }
  .quote { padding: 0; border-right: 0; }
  .quote + .quote { padding-top: 32px; border-top: 2px solid var(--color-text); }
  .service, .case, .plan, .post-card { border-right: 0; }
  .services__grid, .posts { border-left: 0; }
  .step { padding-inline: 0; border-right: 0; }
  .step + .step { border-top: 2px solid var(--color-neutral-800); }
}

@media (max-width: 700px) {
  .shell { padding-inline: 20px; }
  .site-header .nav { padding: 12px 20px; gap: 16px; }
  .services__head, .process .shell, .work .shell, .engagement .shell,
  .quotes .shell, .faq .shell { padding-block: 64px; }
  .services__grid, .posts { margin-top: 40px; margin-bottom: 64px; }
  .contact .shell { padding-block: 64px; gap: 40px; }
  .hero__grid { padding-block: 72px 48px; }
  .service, .case, .plan, .post-card { padding: 28px; }
  .legal .shell { padding-block: 96px 64px; }
  .blog-head { padding-block: 96px 0; }
  .contact__form { padding: 24px; }
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat:first-child { padding: 16px 0; border-right: 0; border-bottom: 2px solid var(--color-text); }
  .stat:last-child { border-bottom: 0; }
  .site-footer { padding: 24px 20px; }
}

/* — reduced motion --------------------------------------------------------
   The character, the pointer lens and the marquee are all decoration. When
   the visitor asks for less motion, the page keeps every layout decision and
   drops the movement. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .character-layer { display: none; }
  .room__lens { display: none; }
  .room__light { display: none; }

  .hero__eyebrow, .hero__lede, .hero__actions, .hero__stats,
  .reveal-line > span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav-toggle__bar { transition: none; }
  .mobile-nav { transition: none; transform: none; }
  .mobile-nav.is-open { transition: none; }
}