/* =============================================================================
   Homeplan Designs — mockup stylesheet
   Palette and lettering taken from the practice's own 2026 social identity:
   navy, cream, brass, spaced serif caps, EST. 1979.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Light "paper" scheme. The legacy token NAMES are kept because the markup
     and a number of inline styles reference them; what they mean is now
     semantic rather than literal:
         --navy-*   surfaces, lightest to deepest
         --cream*   ink, strongest to faintest
     Dark contexts (.film, .footer, .on-dark, the nav over the film) re-scope
     exactly these names, so one component works correctly in either. Nothing
     hard-codes a colour, which is what makes the flip a five-line change. */

  /* Dark scheme, restored Sep 2026 at the client's request: he and Jill both
     found the light version hard to read, and specifically mentioned failing
     eyesight. The muted and body inks below are a step brighter than the
     original dark scheme for exactly that reason.

     Contrast on the #06101a ground:
       --cream      17.6:1   --cream-dim  12.4:1
       --cream-mut   8.1:1   --brass-light 9.2:1
     All well clear of WCAG AA, and the faintest of them clears AAA. */

  --navy-900: #06101a;
  --navy-800: #0a1622;
  --navy-700: #0f2233;
  --navy-600: #16324a;
  --line:     rgba(244, 241, 234, 0.16);

  --cream:     #f4f1ea;  /* primary ink */
  --cream-dim: #d7d2c7;  /* body ink, lifted from #cdc7bb */
  --cream-mut: #aaa49a;  /* meta ink, lifted from #9a958c */

  --brass:       #b08d4f;
  --brass-light: #dcc28c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,.2), 0 12px 32px -14px rgba(0,0,0,.55);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale — one ramp, so a heading holds the same optical weight on a
     phone as on a 4K monitor. This is what makes the page "act the same". */
  --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.13rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.36rem + 1.10vw, 2.25rem);
  --step-3:  clamp(2.05rem, 1.60rem + 2.10vw, 3.30rem);
  --step-4:  clamp(2.60rem, 1.75rem + 3.90vw, 5.00rem);
  --step-5:  clamp(3.10rem, 1.60rem + 6.60vw, 7.20rem);

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 34ch;
  --radius: 2px;

  --vh: 1vh;
}

/* The whole site is dark again, so these no longer need to re-declare the
   palette. The hook is kept because the token names are semantic rather than
   literal: if a light section is ever wanted, invert the names here and any
   component dropped inside inverts with it, exactly as the light build did. */
.film,
.footer,
.on-dark {
  color: var(--cream);
  background: var(--navy-900);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

/* height:auto is load-bearing. Every <img> here carries width/height
   attributes so the browser can reserve space and avoid layout shift, but
   without this the attribute height is USED as the height: constraining the
   width alone then stretches the picture, and any aspect-ratio set in CSS is
   ignored because neither dimension is auto. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--cream); color: var(--navy-900);
  padding: 0.75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* --- Shared bits ---------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1320px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 940px); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 1.25rem;
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--cream-dim); }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--line), transparent);
}

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 1.9em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover { transform: translateY(-2px); }
/* Stated explicitly rather than derived, because the foreground has to stay
   legible in both contexts and the token pair inverts between them. */
.btn--primary { background: var(--brass); color: #06101a; }
.btn--primary:hover { background: var(--brass-light); }

.btn--ghost { border-color: rgba(244,241,234,0.34); color: var(--cream); }
.btn--ghost:hover { border-color: var(--brass-light); color: var(--brass-light); }

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
[data-reveal][data-revealed] { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .10s; }
[data-reveal][data-delay="2"] { transition-delay: .20s; }
[data-reveal][data-delay="3"] { transition-delay: .30s; }

/* --- Brand mark ----------------------------------------------------------- */

.mark { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mark__roof { width: 2.4em; height: auto; margin-bottom: .35em; color: var(--brass-light); }
.mark__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}
.mark__sub {
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-top: .5em;
}

/* --- Navigation ----------------------------------------------------------- */

/* The bar floats over the film at the top of the homepage, so it starts in the
   dark palette and swaps to the paper one the moment it is over page content.
   Inner pages have no film, so they mark it solid from the first paint via
   data-solid and never flash light-on-light. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  transition: background-color .4s, backdrop-filter .4s, padding .4s, color .4s;

  color: var(--cream);
}
.nav[data-scrolled],
.nav[data-solid] {
  background: rgba(6, 16, 26, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding-block: 0.75rem;
}
.nav__brand { text-decoration: none; color: inherit; }
.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); }
.nav__menu a {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  transition: color .3s;
}
.nav__menu a:hover { color: var(--brass-light); }
.nav__cta { white-space: nowrap; }
.nav__tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
}
.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--cream); padding: .6rem .9rem; cursor: pointer;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 5.5rem var(--gutter) 2rem;
    background: rgba(6,16,26,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.2,.7,.3,1);
    border-bottom: 1px solid var(--line);
  }
  .nav__menu a { padding: 1rem 0; font-size: var(--step-1); width: 100%; border-bottom: 1px solid var(--line); }

  .nav__menu .btn { margin-top: 1.25rem; }
  .nav[data-open] .nav__menu { transform: translateY(0); }
}

/* --- The scroll film ------------------------------------------------------ */

.film { position: relative; }

/* Tall scroll track. 640vh gives roughly 6.4 screens of scroll for 6 chapters —
   enough that each chapter reads without the film feeling slow. */
/* svh is the small viewport height — the height with the mobile browser's
   toolbars EXPANDED. Using it means the stage is sized for the worst case, so
   the film never gets taller than the visible area when the toolbar drops back
   down. That, plus viewport-fit=cover on the meta tag, is the whole of the
   "does not fit my iPhone" fix. The --vh JS shim below is kept only as a
   fallback for engines that predate svh. */
.film__track { height: 640vh; height: 640svh; position: relative; }

.film__stage {
  position: sticky; top: 0;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  overflow: hidden;
  background: var(--navy-800);
}

.film__canvas { width: 100%; height: 100%; display: block; }

/* Legibility scrim. Weighted to the bottom-left, because that's where the
   chapter copy sits — the film stays clear on the right where the building is. */
.film__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,16,26,.56) 0%, rgba(6,16,26,0) 22%, rgba(6,16,26,0) 48%, rgba(6,16,26,.84) 100%),
    linear-gradient(100deg, rgba(6,16,26,.88) 0%, rgba(6,16,26,.46) 32%, rgba(6,16,26,0) 60%);
}
@media (max-width: 700px) {
  .film__grade {
    background:
      linear-gradient(180deg, rgba(6,16,26,.62) 0%, rgba(6,16,26,0) 20%, rgba(6,16,26,.52) 46%, rgba(6,16,26,.93) 72%);
  }
}

.film__chapters { position: absolute; inset: 0; }

.chapter {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(4.5rem, 11vh, 9rem);
  width: min(52ch, calc(100% - var(--gutter) * 2));
  opacity: 0;
  will-change: opacity, transform;
}
.chapter__no {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 1rem;
}
.chapter__title { font-size: var(--step-3); margin-bottom: 1rem; }
.chapter__body { color: var(--cream-dim); max-width: 46ch; }
.chapter__quote {
  margin: 1.6rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brass);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.4;
  color: var(--cream);
}
.chapter__quote cite {
  display: block; margin-top: .7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-mut);
}
.chapter__tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.chapter__tags li {
  font-size: var(--step--1);
  letter-spacing: .06em;
  padding: .45em 1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cream-dim);
}

/* Opening title, sits over chapter one */
.film__intro {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--gutter);
  pointer-events: none;
}
.film__intro .mark { margin-bottom: 2.5rem; }
.film__intro h1 {
  font-size: var(--step-5);
  max-width: 16ch;
  margin-inline: auto;
}
.film__intro p {
  margin: 1.75rem auto 0;
  max-width: 44ch;
  color: var(--cream-dim);
  font-size: var(--step-1);
}

.film__scrollcue {
  position: absolute;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-mut);
}
.film__scrollcue::after {
  content: ''; width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--brass-light), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.4); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

.film__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
}

.film__loader {
  position: absolute; inset: auto var(--gutter) 3.5rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-mut);
}
.film__loader-rail { flex: 1; height: 1px; background: var(--line); }
.film__loader-bar {
  display: block; height: 100%; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}

/* Reduced motion: unstack the film into a readable static sequence */
.film[data-reduced] .film__track { height: auto; }
.film[data-reduced] .film__stage { position: relative; height: 70vh; }
.film[data-reduced] .film__chapters {
  position: relative; inset: auto;
  display: grid; gap: 4rem;
  padding: 4rem var(--gutter);
}
.film[data-reduced] .chapter { position: relative; left: auto; bottom: auto; width: auto; }
.film[data-reduced] .film__scrollcue,
.film[data-reduced] .film__loader { display: none; }

/* Short and narrow viewports: the chapter must never run off the bottom of the
   stage. Type steps down and the pull-quote is dropped where there isn't room
   for it — the same quote still appears in the Clients section below. */
@media (max-width: 700px) {
  /* Lift clear of the pinned notice bar */
  .chapter {
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    width: calc(100% - var(--gutter) * 2);
  }
  .chapter__no { margin-bottom: .65rem; }
  .chapter__title { font-size: var(--step-2); margin-bottom: .75rem; }
  .chapter__body { font-size: var(--step--1); line-height: 1.6; }
  .chapter__quote { font-size: var(--step-0); margin-top: 1.1rem; padding-left: 1rem; }
  .chapter__quote cite { margin-top: .5rem; }
  .chapter__tags { margin-top: 1rem; }
  .film__intro h1 { font-size: var(--step-4); }
  .film__intro p { font-size: var(--step-0); }
}

/* Phone-height budget: a 4-line quote plus body copy plus a heading will not
   fit above the fold on a 390x844 handset. The body copy carries the argument,
   so the pull-quote steps aside — it reappears in full in the Clients section. */
@media (max-width: 700px) {
  .chapter__quote { display: none; }
}

@media (max-height: 560px) {
  .chapter__body { display: none; }
  .film__intro p { display: none; }
}

@media (max-width: 600px) {
  .notice__long { display: none; }
}

/* --- Generic sections ----------------------------------------------------- */

.section { padding-block: clamp(5rem, 12vh, 9rem); position: relative; }
.section--tint { background: var(--navy-800); }
.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section__head h2 { font-size: var(--step-3); margin-bottom: 1.25rem; }

/* Services */
.grid-services {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.service { background: var(--navy-900); padding: clamp(1.75rem, 3vw, 2.75rem); }
.service h3 { font-size: var(--step-1); margin-bottom: .75rem; }
.service p { color: var(--cream-dim); font-size: var(--step--1); line-height: 1.7; }
.service__no {
  font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: .2em; color: var(--brass); display: block; margin-bottom: 1.5rem;
}

/* Process */
.process { display: grid; gap: 0; counter-reset: step; }
.process__item {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.process__item:last-child { border-bottom: 1px solid var(--line); }
.process__no {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--brass);
  line-height: 1;
}
.process__item h3 { font-size: var(--step-2); margin-bottom: .75rem; }
.process__item p { color: var(--cream-dim); max-width: 58ch; }
.process__meta {
  display: block; margin-top: .9rem;
  font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mut);
}

@media (max-width: 620px) {
  .process__item { grid-template-columns: 1fr; gap: .5rem; }
}

/* Proof / testimonials */
.proof {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.proof__card {
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
  background: linear-gradient(180deg, rgba(244,241,234,.045), transparent);
}
.proof__card blockquote {
  margin: 0; font-family: var(--font-display);
  font-size: var(--step-1); font-style: italic; line-height: 1.45;
}
.proof__card figcaption {
  font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-light); margin-top: auto;
}
.proof__card figcaption span { display: block; color: var(--cream-mut); letter-spacing: .06em; text-transform: none; margin-top: .35rem; }

/* Stats */
.stats {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.stat { background: var(--navy-900); padding: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.stat__fig {
  display: block; font-family: var(--font-display);
  font-size: var(--step-4); line-height: 1; color: var(--brass-light);
}
.stat__label {
  display: block; margin-top: .85rem;
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-mut);
}

/* Split feature */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
}
.split__media { border: 1px solid var(--line); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: var(--step-3); margin-bottom: 1.5rem; }
.split p + p { margin-top: 1.15rem; }
.split p { color: var(--cream-dim); }

/* Contact */
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact__list dt, .contact__label {
  font-size: var(--step--1); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream-mut); margin-bottom: .35rem;
}
.contact__value { font-size: var(--step-1); font-family: var(--font-display); }
.contact__value a { text-decoration: none; transition: color .3s; }
.contact__value a:hover { color: var(--brass-light); }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-mut); }
.field input, .field textarea, .field select {
  background: rgba(244,241,234,.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--cream);
  font: inherit;
  padding: .9rem 1rem;
  width: 100%;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brass);
  background: rgba(244,241,234,.10);
  box-shadow: 0 0 0 3px rgba(176,141,79,.25);
  outline: none;
}
.field textarea { min-height: 8rem; resize: vertical; }

/* Footer */
.footer { padding-block: clamp(3rem, 7vh, 5rem) 2rem; border-top: 1px solid var(--line); background: var(--navy-800); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.footer h4 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-mut); margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: var(--cream-dim); text-decoration: none; font-size: var(--step--1); transition: color .3s; }
.footer a:hover { color: var(--brass-light); }
.footer__base {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--step--1); color: var(--cream-mut);
}

/* --- Utility -------------------------------------------------------------- */

.u-center { text-align: center; }
.u-mt { margin-top: 2rem; }

/* --- Inner-page header ---------------------------------------------------- */
/* Inner pages have no film, so they need something to sit under the fixed bar.
   The band is tinted rather than dark: Chris's note was that the site read too
   dark, and a full-bleed navy header on every page would put that straight
   back. */

.phead {
  background: var(--navy-800);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(7.5rem, 16vh, 10.5rem) clamp(3rem, 7vh, 4.5rem);
}
.phead__inner { max-width: 62ch; }
.phead h1 { font-size: var(--step-4); margin-bottom: 1.25rem; }
.phead .lede { margin-top: 1rem; }

.crumb {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-mut);
}
.crumb a { color: var(--cream-mut); text-decoration: none; transition: color .3s; }
.crumb a:hover { color: var(--brass-light); }
.crumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }

/* --- Long-form prose ------------------------------------------------------ */
/* Used by blog posts, the privacy and cookie pages, and service detail copy.
   Measure is capped at 68ch because these are read, not scanned. */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.35rem; }
.prose p { color: var(--cream-dim); line-height: 1.75; }
.prose h2 {
  font-size: var(--step-2); margin-top: 3rem; margin-bottom: -.35rem;
  color: var(--cream);
}
.prose h3 { font-size: var(--step-1); margin-top: 2.25rem; color: var(--cream); }
.prose ul, .prose ol { color: var(--cream-dim); padding-left: 1.35rem; line-height: 1.75; }
.prose li + li { margin-top: .5rem; }
.prose a { color: var(--brass-light); text-underline-offset: .2em; }
.prose strong { color: var(--cream); font-weight: 600; }
.prose img { margin-block: 2rem; border: 1px solid var(--line); }
.prose blockquote {
  margin: 2rem 0; padding-left: 1.5rem;
  border-left: 2px solid var(--brass);
  font-family: var(--font-display); font-size: var(--step-1);
  font-style: italic; line-height: 1.5; color: var(--cream);
}
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.5rem; }

/* --- Blog ----------------------------------------------------------------- */

.posts {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.post-card {
  background: var(--navy-900);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none; color: inherit;
  transition: background-color .35s;
}
.post-card:hover { background: var(--navy-700); }
.post-card__date {
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-mut);
}
.post-card__title {
  font-family: var(--font-display); font-size: var(--step-1);
  line-height: 1.2; letter-spacing: -.01em;
}
.post-card__excerpt { font-size: var(--step--1); color: var(--cream-dim); line-height: 1.7; }
.post-card__more {
  margin-top: auto; padding-top: .5rem;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-light);
}

.post-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: baseline;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-mut);
  margin-bottom: 2rem;
}

.pager {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; margin-top: 3.5rem;
  border-top: 1px solid var(--line); padding-top: 2rem;
}
.pager a {
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--brass-light);
}
.pager span { font-size: var(--step--1); color: var(--cream-mut); letter-spacing: .12em; }

/* --- Service detail ------------------------------------------------------- */

.svc-list { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.svc-row {
  background: var(--navy-900);
  display: grid; gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  text-decoration: none; color: inherit;
  transition: background-color .35s;
}
.svc-row:hover { background: var(--navy-700); }
.svc-row__no {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--brass-light); min-width: 2.5ch;
}
.svc-row h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.svc-row p { font-size: var(--step--1); color: var(--cream-dim); max-width: 62ch; line-height: 1.7; }
.svc-row__go { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light); white-space: nowrap; }
@media (max-width: 720px) {
  .svc-row { grid-template-columns: auto 1fr; }
  .svc-row__go { grid-column: 2; }
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checks li {
  position: relative; padding-left: 1.75rem;
  color: var(--cream-dim); line-height: 1.6;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .7rem; border: 1px solid var(--brass);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* --- Enquiry form --------------------------------------------------------- */
/* Chris cherry-picks jobs, so the form's job is to qualify before it sends.
   Two columns on desktop, one on a phone, with the free-text box full width. */

.form--enquiry {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem clamp(1rem, 2vw, 1.5rem);
  background: var(--navy-900);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.field--wide { grid-column: 1 / -1; }
.field__hint { font-size: var(--step--1); color: var(--cream-mut); line-height: 1.5; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.35em, calc(100% - .85rem) 1.35em;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.form__consent { display: flex; gap: .75rem; align-items: flex-start; grid-column: 1 / -1; }
.form__consent input { width: auto; margin-top: .3rem; flex: none; }
.form__consent label {
  font-size: var(--step--1); color: var(--cream-dim);
  letter-spacing: 0; text-transform: none; line-height: 1.6;
}
.form__submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form__note { font-size: var(--step--1); color: var(--cream-mut); }

/* --- Map ------------------------------------------------------------------ */

.map {
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 320px;
  background: var(--navy-800);
}
.map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* --- Call to action band -------------------------------------------------- */

.cta {
  background: var(--navy-800);
  border-block: 1px solid var(--line);
  padding-block: clamp(3.5rem, 9vh, 6rem);
  text-align: center;
}
.cta h2 { font-size: var(--step-3); margin-bottom: 1rem; }
.cta p { color: var(--cream-dim); max-width: 52ch; margin-inline: auto; }
.cta .btn { margin-top: 2rem; }

/* --- Late additions ------------------------------------------------------- */
/* .service became an anchor when the cards started linking to real pages. */

a.service { text-decoration: none; color: inherit; display: block; transition: background-color .35s; }
a.service:hover { background: var(--navy-700); }
.section--tint a.service:hover { background: var(--navy-600); }
.service h3 { transition: color .3s; }
a.service:hover h3 { color: var(--brass-light); }

.nav__menu a.is-current { color: var(--brass-light); }
.nav__menu a.is-current.btn { color: inherit; }

/* Inner pages start below a fixed, opaque bar, so the first band needs the
   clearance the film used to provide on the homepage. */
.phead + .section { padding-top: clamp(3rem, 8vh, 5rem); }

/* --- Legibility over a bright film ---------------------------------------- */
/* The old sequence was an overcast grey house that went dark at dusk, so the
   corner-weighted scrim was enough. The replacement is bright from the first
   frame to the last, and the opening title sits dead centre where that scrim
   is at its most transparent. This puts a soft pool of shade behind the title
   block only, which keeps the frame open on the right where the building is. */

.film__intro { isolation: isolate; }
.film__intro::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 56% 42% at 50% 44%,
              rgba(6,16,26,.56) 0%,
              rgba(6,16,26,.34) 46%,
              rgba(6,16,26,.08) 72%,
              rgba(6,16,26,0) 88%);
}
.film__intro h1,
.film__intro p,
.film__intro .mark {
  text-shadow: 0 1px 28px rgba(6,16,26,.55), 0 1px 3px rgba(6,16,26,.4);
}

/* The chapter copy has the left-hand gradient behind it, but the new frames
   are light enough that the body text needed a touch more separation too. */
.chapter__title,
.chapter__body,
.chapter__no { text-shadow: 0 1px 16px rgba(6,16,26,.5); }

.film__scrollcue { text-shadow: 0 1px 14px rgba(6,16,26,.6); }

/* --- Portrait framing ----------------------------------------------------- */
/* The film now ships in three compositions and the engine picks by viewport
   aspect ratio, not width. The scrim has to follow the same split, because a
   scrim tuned for a wide frame is wrong on a tall one.
       Landscape: the building sits centre-right, the copy runs down the left,
                  so the wash is left-weighted and the right stays clear.
       Portrait:  the building spans the full width in the upper half and the
                  copy sits underneath it on the lawn. A left-weighted wash
                  would darken the house itself, which is exactly the
                  complaint the new film was meant to answer, so the wash goes
                  bottom-up and the house band is left alone.
   11/10 rather than a pixel width, so an upright tablet and an upright phone
   are treated the same and a rotated phone flips to the landscape rules. */

@media (max-aspect-ratio: 11/10) {
  .film__grade {
    background:
      linear-gradient(180deg,
        rgba(6,16,26,.52) 0%,
        rgba(6,16,26,0) 17%,
        rgba(6,16,26,0) 44%,
        rgba(6,16,26,.60) 60%,
        rgba(6,16,26,.93) 100%);
  }

  /* Put the opening title on the grass below the house rather than across it.
     On a tall frame there is room to do that, and it means the title needs
     far less shade behind it to stay legible. */
  .film__intro {
    align-content: end;
    padding-bottom: 20svh;
  }
  .film__intro::before {
    background: linear-gradient(180deg,
      rgba(6,16,26,0) 38%,
      rgba(6,16,26,.38) 62%,
      rgba(6,16,26,.58) 100%);
  }
  .film__intro h1 { font-size: var(--step-4); }

  /* The lockup lands across the roofline on a tall frame and is unreadable
     there. The fixed bar already carries the brand two centimetres above it,
     so dropping it costs nothing and the title gets the clear air. */
  .film__intro .mark { display: none; }
}

/* Phones specifically: the chapter copy is bottom-anchored and the frame is
   taller still, so the ramp starts a little lower and finishes harder. */
@media (max-width: 700px) {
  .film__grade {
    background:
      linear-gradient(180deg,
        rgba(6,16,26,.52) 0%,
        rgba(6,16,26,0) 15%,
        rgba(6,16,26,0) 46%,
        rgba(6,16,26,.66) 64%,
        rgba(6,16,26,.95) 100%);
  }
  .film__intro { padding-bottom: 24svh; }
}

/* --- Enquiry form states -------------------------------------------------- */

.form__status {
  grid-column: 1 / -1;
  margin: 0;
  padding: .85rem 1rem;
  border-left: 2px solid var(--brass);
  background: rgba(176,141,79,.12);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--cream-dim);
}
.form__status--error {
  border-left-color: #e0705f;
  background: rgba(224,112,95,.12);
  color: #f0b3a8;
}

/* Replaces the form outright once it has sent. Matching the form's own box so
   the block does not jump when it swaps in. */
.form__done {
  border: 1px solid var(--line);
  background: var(--navy-900);
  box-shadow: var(--shadow-md);
  padding: clamp(2rem, 5vw, 3.25rem);
  display: grid;
  gap: 1rem;
  align-content: center;
  min-height: 16rem;
}
.form__done h3 { font-size: var(--step-2); }
.form__done p { color: var(--cream-dim); max-width: 44ch; }
.form__done a { color: var(--brass-light); }

/* A disabled submit should read as busy, not as broken. */
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* --- Case study, real photographs ----------------------------------------- */
/* Before and after sit side by side at the top because that comparison is the
   whole argument; the second "after" runs full width underneath as support.
   Hairline gaps rather than cards, so the three read as one piece of evidence. */

.case {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.case__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
@media (max-width: 720px) {
  .case__pair { grid-template-columns: 1fr; }
}

.case__item {
  margin: 0;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
}
.case__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;   /* matches the source, so the pair is not cropped */
  object-fit: cover;
  display: block;
}
/* The full-width shot is supporting evidence, not the headline, and the
   original has a lot of sky and a lot of driveway. Cropping it to a band keeps
   the building the subject and stops it dwarfing the comparison above. */
.case__item--wide img { aspect-ratio: 16 / 9; }
.case__item figcaption {
  padding: 1rem clamp(1rem, 2vw, 1.5rem) 1.25rem;
  font-size: var(--step--1);
  color: var(--cream-dim);
  line-height: 1.6;
}
.case__tag {
  display: inline-block;
  margin-right: .65rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-mut);
}
.case__tag--after { color: var(--brass-light); }

/* --- Blog figures --------------------------------------------------------- */
/* Placed where they sat in the original posts. Many of Chris's images are
   technical drawings and 3D renders on white, so they sit on a white mat
   rather than straight on the dark ground, where the white would read as a
   hole in the page. */
.prose .post-fig {
  margin: 2.25rem 0;
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(.5rem, 1.5vw, 1rem);
}
.prose .post-fig img {
  margin: 0;
  border: 0;
  width: 100%;
  height: auto;
}
/* A post that opens on an image should not have dead space above it. */
.prose > .post-fig:first-child { margin-top: 0; }