:root {
  /* One dark register, the whole way down the page — no separate paper
     zone. Simpler, calmer, and the accent is used sparingly rather than on
     every hover/bullet/glow, so the colour that does appear (particles,
     the Planner's live state, the portfolio scenes) actually reads as
     intentional instead of automatic. */
  --ink: #f4efe3;
  --paper: #100e0c;
  --line: rgba(244, 239, 227, .10);
  --muted: #a89d87;
  --accent: #4f9b78;
  /* Planner feedback states. Success can't reuse green now that it's the
     brand accent (semantic colour must stay separate from the accent hue),
     so it moved to a soft blue instead. */
  --good: #6b9bc7;
  --warn: #d9a857;
  --bad: #d9634a;
  /* A distinct utility colour for the terms.html placeholder-note flag. */
  --flag: #8a9bb0;
  --mono: "Century Gothic", "Avenir Next", Avenir, Futura, Poppins, sans-serif;
  --sans: "Century Gothic", "Avenir Next", Avenir, Futura, Poppins, sans-serif;
  --serif: "New Baskerville", Baskerville, "Baskerville Old Face", "Libre Baskerville", "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
body {
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
/* Custom cursor only hides the native one once JS confirms it's running (see script.js) */
html.cursor-ready body { cursor: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 24px; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 4px; }
.skip-link:focus { top: 18px; }

/* Ambient layers */
.nebula { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nebula-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; will-change: transform; }
/* Single hue only — a wash, not a second brand colour. */
.nebula-1 { width: 60vw; height: 60vw; top: -20vw; left: -15vw; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .09; animation: drift-1 46s ease-in-out infinite; }
.nebula-2 { width: 46vw; height: 46vw; bottom: -18vw; right: -12vw; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .07; animation: drift-2 58s ease-in-out infinite; }
.nebula-3 { display: none; }
@keyframes drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6vw, 8vh); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8vw, -6vh); } }
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grain {
  position: fixed;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor {
  position: fixed;
  z-index: 95;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  transform: translate(-100px, -100px);
  transition: width .25s ease, height .25s ease, opacity .3s ease, background .25s ease;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cursor.active { opacity: 1; }
.cursor.hover { width: 88px; height: 88px; margin-left: -39px; margin-top: -39px; background: rgba(79,155,120,.1); box-shadow: 0 0 30px rgba(79,155,120,.35); }
.cursor-label { opacity: 0; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); transition: opacity .2s ease; white-space: nowrap; }
.cursor.hover .cursor-label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }


.site-header {
  position: sticky;
  top: 0;
  /* Must stay above .mobile-menu (65) — otherwise opening the menu buries
     the logo and the close button underneath its own overlay. */
  z-index: 75;
  padding: 22px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(16, 14, 12, .75);
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.site-header.header-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; text-decoration: none; }
.brand img { height: 22px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 12px; font-weight: 400; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.freelance-note { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.freelance-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 2px rgba(79,155,120,.5); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* Mobile menu (hidden above the 600px breakpoint where .site-nav shows instead) */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 70;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  cursor: pointer;
}
.menu-toggle span { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .3s ease, opacity .3s ease, width .3s ease, background .3s ease; }
.menu-toggle[aria-expanded="true"] span { background: var(--accent); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 22px; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }

/* Full-screen takeover that irises open from the toggle button itself,
   rather than a plain fade — the starfield stays visible through it so it
   reads as part of the same world, not a bolted-on panel. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(16, 14, 12, .93);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9vw 8vw;
  clip-path: circle(2% at calc(100% - 42px) 42px);
  visibility: hidden;
  transition: clip-path .65s cubic-bezier(.16,1,.3,1), visibility .65s;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 42px) 42px); visibility: visible; }

.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  transition: opacity .55s ease, filter .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.mobile-menu nav a:first-child { border-top: 1px solid var(--line); }
.mobile-menu.open nav a { opacity: 1; filter: blur(0); transform: none; }
.mobile-menu.open nav a:nth-child(1) { transition-delay: .22s; }
.mobile-menu.open nav a:nth-child(2) { transition-delay: .3s; }
.mobile-menu.open nav a:nth-child(3) { transition-delay: .38s; }
.mm-index { font: 500 12px/1 var(--mono); color: var(--accent); }
.mm-label { font: 500 clamp(30px, 10vw, 42px)/1.15 var(--sans); letter-spacing: -.02em; }
.mm-sub { margin-left: auto; font-style: italic; font-size: 12px; color: var(--muted); white-space: nowrap; }

.mobile-menu-footer {
  margin-top: 8vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .48s;
}
.mobile-menu.open .mobile-menu-footer { opacity: 1; }
.mobile-menu-footer span { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mobile-menu-footer span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 2px rgba(79,155,120,.5); }
.mobile-menu-footer a { text-decoration: none; font-style: italic; font-size: 12px; color: var(--accent); }

@media (max-width: 600px) {
  .menu-toggle { display: flex; }
}

main { display: block; position: relative; z-index: 2; }
section { width: min(100%, 1280px); margin: 0 auto; padding: 0 4vw; }

.hero {
  padding-top: clamp(60px, 11vh, 120px);
  padding-bottom: 9vh;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero-parallax { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; row-gap: 60px; width: 100%; will-change: transform, opacity; }
.hero-quote { position: relative; align-self: start; }
.hero-quote h1 { margin: 0; font: italic 400 clamp(20px, 2.1vw, 30px)/1.35 var(--serif); letter-spacing: -.01em; }

.kinetic-text .word { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(22px); transition: opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.kinetic-text.in-view .word { opacity: 1; filter: blur(0); transform: none; }

.hero-desc { grid-column: 2; justify-self: end; align-self: end; max-width: 420px; text-align: left; }
.hero-desc p { margin: 0 0 22px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; color: var(--muted); }

.text-link { text-decoration: none; font-style: italic; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; display: inline-block; }
.text-link:hover { border-color: var(--accent); }
.text-link.big { font-size: clamp(18px, 1.6vw, 24px); }

.services { list-style: none; margin: 8vh 0 0; padding: 22px 0 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 30px; border-top: 1px solid var(--line); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.section-head { max-width: 640px; margin: 0 0 40px; }
.eyebrow { margin: 0 0 16px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.section-head h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 42px)/1.2 var(--sans); letter-spacing: -.02em; }
/* Cascading headline — each line steps in from the last, borrowed from the
   Milkin reference's confident, staggered display type. Used on section
   openers only, never the hero (its wording is fixed by the brief). */
.section-head h2.cascade .cascade-line { display: block; }
.section-head h2.cascade .cascade-line + .cascade-line { margin-left: clamp(16px, 4vw, 44px); }
.section-intro { max-width: 520px; margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* Paper zone — daylight and room to read, per the Mixed Register recommendation.
   Redefining the tokens here (not the properties everywhere they're used) lets
   every descendant rule that already reads var(--ink)/var(--muted)/var(--line)/
   var(--accent) pick up the light-zone values automatically. */
.approach {
  padding-top: 9vh; padding-bottom: 9vh;
  border-top: 1px solid var(--line);
}

/* A real sequence, not a card grid — a thread runs down the step markers,
   each one lighting up as its step scrolls into view. This is the section
   where the site's own "understanding becomes structure" idea is made
   literal, in the plainest way that still reads as intentional. */
.approach-steps { position: relative; list-style: none; margin: 0; padding: 0; max-width: 760px; }
.approach-steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(79,155,120,.32) 10%, rgba(79,155,120,.32) 90%, transparent);
}
.approach-step { display: flex; align-items: flex-start; gap: 20px; padding: 34px 0; }
.approach-step:first-child { padding-top: 4px; }
.approach-step:last-child { padding-bottom: 4px; }
.step-node {
  position: relative;
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .25;
  transform: scale(.4);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s ease;
}
.approach-step.in-view .step-node { opacity: 1; transform: scale(1); box-shadow: 0 0 14px rgba(79,155,120,.5); }
.step-num { flex: 0 0 30px; margin-top: 5px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.step-body { flex: 1 1 auto; min-width: 0; }
.step-body h3 { margin: 0 0 12px; font: 500 clamp(19px, 1.9vw, 24px)/1.3 var(--sans); letter-spacing: -.01em; }
.step-body p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.work {
  padding-top: 9vh; padding-bottom: 9vh;
  border-top: 1px solid var(--line);
  /* This section's scenes need to run true full viewport width. Overriding
     the shared `section` max-width/padding here (rather than fighting it
     with a 100vw breakout on .scene) avoids the classic bug where 100vw
     ignores the scrollbar's width and causes a few pixels of horizontal
     overflow on a page this tall. */
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.work > .section-head { padding: 0 4vw; }

/* Portfolio — full-bleed scenes on a thread. Each project keeps its own
   colour and atmosphere (the .cover-* gradients, already defined below);
   the thread and node borrow the same connective device built for the
   Process section, so the two read as one idea rather than two patterns. */
.project-scenes { position: relative; list-style: none; margin: 44px 0 0; padding: 0; }
.project-scenes > li { margin-bottom: 3px; }
.project-scenes > li:last-child .scene { margin-bottom: 0; }

.scene {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.scene::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,9,7,.62), rgba(10,9,7,.22) 55%, rgba(10,9,7,.5));
  pointer-events: none;
}

.scene-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 68px 4vw 60px calc(4vw + 30px);
}
/* Thread + node live inside .scene-inner, so they always share the exact
   same coordinate frame as the text — no cross-container alignment math
   that would only line up at one accidental viewport width. */
.scene-inner::before {
  content: "";
  position: absolute;
  left: 4vw;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.4);
}
.scene-node {
  position: absolute; z-index: 3;
  left: calc(4vw - 4.5px); top: 68px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: .6;
  transition: opacity .3s ease, box-shadow .3s ease;
}
.scene:hover .scene-node, .scene:focus-visible .scene-node { opacity: 1; box-shadow: 0 0 12px rgba(255,255,255,.7); }
.scene-eyebrow { margin: 0 0 14px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.scene-title { margin: 0 0 14px; max-width: 24ch; font: 600 clamp(21px, 3vw, 32px)/1.25 var(--sans); letter-spacing: -.015em; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.scene:hover .scene-title, .scene:focus-visible .scene-title { transform: translateX(6px); }
.scene-copy { margin: 0 0 22px; max-width: 52ch; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.82); }
.scene-journey { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 26px; padding: 0; }
.scene-journey li { display: flex; align-items: center; }
.scene-journey li:not(:last-child)::after { content: "\2192"; margin: 0 10px; color: rgba(255,255,255,.5); font: 500 12px/1 var(--mono); }
.scene-journey .chip { padding: 10px 14px; background: rgba(10,9,7,.4); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; font: 500 12.5px/1 var(--sans); color: #fff; white-space: nowrap; }
.scene-cta { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.scene-cta span { transition: transform .3s ease; display: inline-block; }
.scene:hover .scene-cta span, .scene:focus-visible .scene-cta span { transform: translate(3px, -3px); }

@media (min-width: 640px) { .scene-inner { padding-top: 84px; padding-bottom: 76px; } }

/* Capability — a business need becomes a customer journey on click. A
   different interaction shape from the process thread and the planner
   blueprint, on purpose, so the page progresses rather than repeats. */
.capability { padding-top: 9vh; padding-bottom: 9vh; border-top: 1px solid var(--line); }
.capability-app { margin-top: 44px; }
.capability-needs { display: flex; flex-direction: column; margin-bottom: 48px; max-width: 640px; }
.capability-need {
  text-align: left; padding: 18px 4px; border: none; border-top: 1px solid var(--line);
  background: transparent; color: var(--muted); font: 500 17px/1.4 var(--sans); cursor: pointer;
  transition: color .2s ease, padding-left .2s ease;
}
.capability-needs .capability-need:last-child { border-bottom: 1px solid var(--line); }
.capability-need:hover { color: var(--ink); padding-left: 10px; }
.capability-need.is-active { color: var(--accent); padding-left: 10px; }
.capability-need:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.capability-flow { display: none; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.capability-flow.is-active { display: flex; }
.capability-flow li {
  display: flex; align-items: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.capability-flow li.in-view { opacity: 1; transform: none; }
.capability-flow .chip { padding: 12px 18px; border: 1px solid var(--line); border-radius: 3px; font: 500 13.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.capability-flow li:not(:last-child)::after { content: "\2192"; margin: 0 10px; color: var(--muted); font: 500 13px/1 var(--mono); }

/* Project Planner — a live blueprint, not a form. No live price anywhere;
   it ends in a real mailto brief instead. */
.planner { padding-top: 9vh; padding-bottom: 9vh; border-top: 1px solid var(--line); }
.planner-app { margin-top: 44px; }
.planner-progress { height: 2px; background: var(--line); margin-bottom: 40px; border-radius: 1px; overflow: hidden; }
.planner-progress-bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.16,1,.3,1); }
.planner-layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: start; }
.planner-step-count { margin: 0 0 20px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.planner-step { display: none; border: none; margin: 0; padding: 0; min-width: 0; }
.planner-step.is-active { display: block; }
.planner-step legend { padding: 0; margin: 0 0 26px; font: 500 clamp(21px, 2.2vw, 28px)/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.planner-hint { display: block; margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--muted); letter-spacing: 0; }

.planner-options { display: flex; flex-direction: column; }
.planner-option {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; text-align: left; padding: 18px 4px;
  border: none; border-top: 1px solid var(--line);
  background: transparent; color: var(--muted); font: 500 16px/1.4 var(--sans);
  cursor: pointer; transition: color .2s ease, padding-left .2s ease;
}
.planner-options .planner-option:last-child { border-bottom: 1px solid var(--line); }
.planner-option::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.planner-option:hover { color: var(--ink); padding-left: 10px; }
.planner-option[aria-pressed="true"] { color: var(--ink); }
.planner-option[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(79,155,120,.5); }
.planner-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.planner-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }
.planner-back, .planner-next {
  font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  padding: 13px 22px; cursor: pointer; transition: border-color .2s ease, opacity .2s ease;
}
.planner-back:disabled, .planner-next:disabled { opacity: .3; cursor: default; }
.planner-next:not(:disabled):hover, .planner-back:not(:disabled):hover { border-color: var(--accent); }

.planner-review h3 { margin: 0 0 22px; font: 500 clamp(21px, 2.2vw, 28px)/1.3 var(--sans); }
.planner-summary { list-style: none; margin: 0 0 26px; padding: 0; }
.planner-summary li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.planner-summary li:last-child { border-bottom: 1px solid var(--line); }
.planner-summary-q { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.planner-summary-a { font-size: 15px; color: var(--ink); }
.planner-review-note { margin: 0 0 26px; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.planner-send {
  display: inline-block; font: 600 12.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: var(--paper); padding: 15px 26px; text-decoration: none; transition: opacity .2s ease;
}
.planner-send:hover { opacity: .85; }
.planner-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.planner-blueprint {
  position: sticky; top: 100px; aspect-ratio: 1;
  border: 1px solid var(--line); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at center, rgba(79,155,120,.06), transparent 70%);
}
.planner-blueprint svg { width: 100%; height: 100%; }
.planner-line { stroke: var(--line); stroke-width: 1; opacity: 0; transition: opacity .5s ease, stroke .5s ease; }
.planner-line.is-active { stroke: rgba(79,155,120,.45); opacity: 1; }
.planner-node { fill: var(--paper); stroke: var(--line); stroke-width: 1; transition: fill .4s ease, stroke .4s ease; }
.planner-node.is-active { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(79,155,120,.6)); }
.planner-node-center { fill: var(--ink); stroke: var(--ink); }
.planner-blueprint-label { margin-top: 16px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.about { padding-top: 9vh; padding-bottom: 9vh; border-top: 1px solid var(--line); }
.about-copy { max-width: 640px; }
.about-copy h2 { margin: 16px 0 0; font: 500 clamp(26px, 3.4vw, 42px)/1.2 var(--sans); letter-spacing: -.02em; }
.about-copy p { margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

.contact { padding-top: 9vh; padding-bottom: 13vh; border-top: 1px solid var(--line); }
.contact h2 { margin: 16px 0 0; font: 500 clamp(28px, 4vw, 46px)/1.2 var(--sans); letter-spacing: -.02em; max-width: 640px; }
.contact p { max-width: 460px; margin: 18px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.contact .text-link.big { display: inline-block; margin-top: 26px; }

.placeholder-note { color: var(--flag); opacity: .8; font-size: 12px; font-style: italic; }

/* Case-study pages — each keeps its own accent tint, derived from that
   project's own cover gradient, so the page feels like it belongs to that
   business rather than every case study reading as identical Built by
   Clare furniture with a different photo up top. Hope Wellbeing and
   clarelangley.com aren't listed — their own tones already sit close
   enough to the site's own pine accent that no override is needed. */
body.case-jenna { --accent: #d98a6b; }
body.case-squishy { --accent: #7a95c4; }
body.case-theseus { --accent: #c9a05c; }
body.case-trades { --accent: #d9954a; }

/* Case-study pages */
.case-crumb { padding-top: clamp(40px, 8vh, 90px); }
.back-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.back-link:hover { color: var(--accent); }
.back-link b { font-weight: 400; }

.case-hero { padding-top: 24px; padding-bottom: 6vh; }
.case-hero .eyebrow { display: flex; align-items: center; gap: 12px; }
.case-hero h1 { margin: 14px 0 0; font: 700 clamp(34px, 5.4vw, 66px)/1.08 var(--sans); letter-spacing: -.03em; max-width: 900px; }
.case-hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.case-hero-tags { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.case-hero-summary { max-width: 640px; margin: 22px 0 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7; color: var(--muted); }

.case-cover { width: 100%; min-height: 46vh; display: flex; align-items: flex-end; padding: 32px; position: relative; overflow: hidden; margin-top: 5vh; text-decoration: none; }
.case-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%); }
.case-cover span { position: relative; z-index: 1; color: #fff; font: 500 clamp(22px, 2.6vw, 34px)/1.2 var(--sans); letter-spacing: -.01em; }

.case-content { padding-top: 8vh; padding-bottom: 8vh; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 260px; gap: 8vw; }
.case-prose { max-width: 640px; }
.case-prose h2 { margin: 0 0 18px; font: 500 clamp(20px, 2.4vw, 28px)/1.2 var(--sans); letter-spacing: -.02em; }
.case-prose h2:not(:first-child) { margin-top: 48px; }
.case-prose p { margin: 0 0 18px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.case-side { align-self: start; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 26px; }
.case-side-block .eyebrow { margin-bottom: 10px; }
.case-side-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.9; }

.case-nav { padding: 8vh 4vw; width: min(100%, 1280px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); }
.case-nav-link { text-decoration: none; padding: 22px; border: 1px solid var(--line); transition: border-color .3s ease, background .3s ease; }
.case-nav-link:hover { border-color: var(--accent); background: rgba(79,155,120,.04); }
.case-nav-link.next { text-align: right; }
.case-nav-label { display: block; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.case-nav-title { font: 500 20px/1.2 var(--sans); letter-spacing: -.02em; }

@media (max-width: 900px) {
  .case-content { grid-template-columns: 1fr; }
  .case-side { position: static; }
}
@media (max-width: 600px) {
  .case-nav { grid-template-columns: 1fr; padding: 6vh 6vw; }
  .case-nav-link.next { text-align: left; }
}

footer { width: min(100%, 1280px); margin: 0 auto; padding: 40px 4vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--muted); position: relative; z-index: 2; }
.footer-logo { height: 96px; width: auto; opacity: .9; }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
footer p { margin: 0; }
footer p span { margin: 0 8px; opacity: .4; }
.footer-legal { font-size: 10px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  z-index: 80;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 460px;
  margin-left: auto;
  padding: 22px;
  background: #0d0d12;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.cookie-banner.visible { transform: translateY(0); opacity: 1; }
.cookie-banner p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cookie-banner p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(79,155,120,.4); }
.cookie-actions { display: flex; gap: 12px; }
.cookie-btn { flex: 1; padding: 11px 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cookie-btn:hover { background: var(--accent); border-color: var(--accent); color: #07070a; }
.cookie-btn.ghost { background: transparent; color: var(--muted); }
.cookie-btn.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (max-width: 600px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 18px; }
}

/* Legal pages (Privacy / Cookies) */
.legal-hero { padding-top: 24px; padding-bottom: 6vh; }
.legal-hero h1 { margin: 14px 0 0; font: 700 clamp(32px, 4.6vw, 52px)/1.1 var(--sans); letter-spacing: -.03em; }
.legal-hero p { max-width: 640px; margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.legal-content { max-width: 720px; padding-top: 6vh; padding-bottom: 10vh; border-top: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 16px; font: 500 clamp(19px, 2.2vw, 24px)/1.3 var(--sans); letter-spacing: -.02em; }
.legal-content h2:not(:first-child) { margin-top: 44px; }
.legal-content p, .legal-content li { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 20px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--accent); }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.legal-table th { color: var(--ink); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 600px) {
  .legal-table { display: block; overflow-x: auto; }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* Pulled darker and warmer than the original set — same idea (each project
   keeps its own atmosphere), but all six now sit in the same moody, deep
   value range as the rest of the site, so they read as one palette with
   variation rather than six unrelated brand colours. The old Squishy Bit
   blue was the worst offender — a genuinely vivid, cool blue against an
   otherwise warm, dark, restrained site — now a muted navy-charcoal. */
.cover-hope { background: linear-gradient(135deg, #232f21, #4a4326); }
.cover-jenna { background: linear-gradient(135deg, #3a201d, #4a3319); }
.cover-squishy { background: linear-gradient(135deg, #12192a, #263349); }
.cover-theseus { background: linear-gradient(135deg, #14181c, #3a2f1e); }
.cover-cl { background: linear-gradient(135deg, #201f1d, #0a0a0a); }
.cover-trades { background: linear-gradient(135deg, #221510, #4a3015); }

@media (max-width: 900px) {
  .hero-parallax { grid-template-columns: 1fr; }
  .hero-desc { grid-column: 1; justify-self: start; text-align: left; }
  .approach-step { gap: 14px; }
  .planner-layout { grid-template-columns: 1fr; }
  .planner-blueprint { position: static; max-width: 280px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .site-header { padding: 16px 6vw; gap: 10px; }
  .site-nav { display: none; }
  section { padding: 0 6vw; }
  .hero { padding-top: 50px; padding-bottom: 60px; }
  .services { gap: 10px 20px; }
  footer { padding: 24px 6vw; flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-meta { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal, .kinetic-text .word { opacity: 1; transform: none; filter: none; }
  .cursor, .grain, #particles { display: none; }
}

/* Site-wide fallback for pages that use the shared legacy stylesheet. */
body,button,a,input,textarea,select,label,p,li,dt,dd,h1,h2,h3,h4,h5,h6{overflow-wrap:normal;word-break:normal;hyphens:none}