@import url("../font/fonts.css");

/* ==========================================================================
   Brown Wilson Roofing design system
   Direction: editorial premium, dark-anchored.
   Ink is a near-black navy, paper is a warm off-white, one muted steel accent.
   The brand royal navy (#0C2577) lives in the logo only. It is too saturated
   to carry large areas without reading as a trade-business blue.
   ========================================================================== */

:root {
  /* Surfaces */
  --ink:        #0C1626;
  --ink-2:      #16223A;
  --ink-3:      #22304C;
  --paper:      #F6F4F1;
  --surface:    #FFFFFF;

  /* Rules and borders */
  --rule:       #E2DED8;
  --rule-2:     #D2CCC3;
  --rule-ink:   rgba(255, 255, 255, .10);
  --rule-ink-2: rgba(255, 255, 255, .18);

  /* Text */
  --text:       #0C1626;   /* on paper, 16.8:1 */
  --text-muted: #6E6A64;   /* on paper, 4.83:1 */
  --text-ink:   #F6F4F1;   /* on ink, 17.8:1 */
  --text-ink-muted: #9AA3B4; /* on ink, 7.65:1 */

  /* Accent. One muted steel blue, used sparingly */
  --cool:       #62697A;   /* cool grey on paper, 4.95:1 */
  --cool-ink:   #8A93A3;   /* cool grey on ink, 6.28:1 */
  --accent:     #3E5B85;   /* focus rings and links only */
  --brand:      #0C2577;   /* logo only */

  /* Type */
  --display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.4rem, 5vw, 4.35rem);
  --t-h1:    clamp(1.95rem, 3.8vw, 3.1rem);
  --t-h2:    clamp(1.5rem, 2.5vw, 2.2rem);
  --t-h3:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-lead:  clamp(1.0625rem, 1.2vw, 1.1875rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-label: 0.75rem;

  /* Space */
  --gutter:  clamp(20px, 4.5vw, 64px);
  --maxw:    1440px;
  --section: clamp(88px, 11vw, 168px);

  /* Radius, architectural and near square */
  --r-btn:   4px;
  --r-input: 4px;

  /* Motion */
  --e-out:   cubic-bezier(.2, 0, 0, 1);
  --e-in:    cubic-bezier(.4, 0, 1, 1);
  --d-micro: 160ms;
  --d-comp:  280ms;
  --d-reveal: 700ms;

  --nav-h: 76px;
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

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

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.on-ink :focus-visible { outline-color: var(--cool-ink); }

::selection { background: var(--ink); color: var(--paper); }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 14px 20px;
  transition: top var(--d-micro) var(--e-out);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.on-ink {
  background: var(--ink);
  color: var(--text-ink);
}
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--text-ink); }
.on-ink .muted { color: var(--text-ink-muted); }
.on-ink .rule { background: var(--rule-ink); }
.on-ink .eyebrow { color: var(--cool-ink); }

.muted { color: var(--text-muted); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

/* Eyebrow: a short tracked label with a steel rule. Used once per section,
   never with the company name in it. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cool);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  flex: none;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text-muted);
}
.on-ink .lead { color: var(--text-ink-muted); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-btn);
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out),
              transform var(--d-micro) var(--e-out);
}
/* Wipe fill rather than a colour fade. Reads as deliberate, not hover-glow. */
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--e-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }
.btn:active { transform: translateY(1px); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-2); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost-ink { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--rule-ink-2); }
.btn--ghost-ink::after { background: var(--paper); }
.btn--ghost-ink:hover, .btn--ghost-ink:focus-visible { color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text link with a sliding arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .04em;
  padding-block: 6px;
  border-bottom: 1px solid var(--rule-2);
  transition: border-color var(--d-micro) var(--e-out);
}
.arrow-link svg { transition: transform var(--d-comp) var(--e-out); flex: none; }
.arrow-link:hover, .arrow-link:focus-visible { border-color: currentColor; }
.arrow-link:hover svg, .arrow-link:focus-visible svg { transform: translateX(6px); }
.on-ink .arrow-link { border-color: var(--rule-ink-2); }

/* ------------------------------------------------------------ nav bar --- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--paper);
  background: var(--ink);
  transition: border-color var(--d-comp) var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(28px, 5vw, 88px);
}
.nav__logo { flex: none; display: block; }
.nav__logo img { height: 30px; width: auto; }

.nav__links {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px);
  margin-left: auto;
  list-style: none; padding: 0; margin-block: 0;
}
.nav__link {
  font-family: var(--body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(246, 244, 241, .78);
  position: relative;
  padding-block: 10px;
  transition: color var(--d-micro) var(--e-out);
}
.nav__link:hover, .nav__link:focus-visible,
.nav__link[aria-current="page"] { color: var(--text-ink); }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-comp) var(--e-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { font-weight: 500; }

.nav__cta { margin-left: clamp(6px, 1vw, 18px); min-height: 40px; padding: 0 22px;
  font-size: .6875rem; letter-spacing: .14em; }

/* Once the page has moved under it, the bar earns a hairline to sit on. */
.nav.is-stuck { border-bottom-color: var(--rule-ink); }

.nav__toggle { display: none; }

/* ------------------------------------------------------ mobile nav ------ */

.navpanel {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  color: var(--text-ink);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 480ms var(--e-out);
  visibility: hidden;
  overflow: hidden auto;
  /* A fixed panel is not clipped by body's overflow, so an unbreakable child
     inside it pushes the whole document sideways. Pin the width and let the
     children shrink. */
  width: 100%;
  max-width: 100%;
}
.navpanel > *, .navpanel__links, .navpanel__links li,
.navpanel__links a, .navpanel__foot { min-width: 0; }
.navpanel__links a { flex-wrap: wrap; }
.navpanel.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.navpanel__links { list-style: none; margin: 0; padding: 0; }
.navpanel__links li {
  border-top: 1px solid var(--rule-ink);
  opacity: 0; transform: translateY(14px);
  transition: opacity 380ms var(--e-out), transform 380ms var(--e-out);
}
.navpanel__links li:last-child { border-bottom: 1px solid var(--rule-ink); }
.navpanel.is-open .navpanel__links li { opacity: 1; transform: none; }
.navpanel.is-open .navpanel__links li:nth-child(1) { transition-delay: 120ms; }
.navpanel.is-open .navpanel__links li:nth-child(2) { transition-delay: 170ms; }
.navpanel.is-open .navpanel__links li:nth-child(3) { transition-delay: 220ms; }
.navpanel.is-open .navpanel__links li:nth-child(4) { transition-delay: 270ms; }
.navpanel.is-open .navpanel__links li:nth-child(5) { transition-delay: 320ms; }
.navpanel.is-open .navpanel__links li:nth-child(6) { transition-delay: 370ms; }

.navpanel__links a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 20px 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 500; letter-spacing: -.03em;
}
.navpanel__links a span {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  color: var(--cool-ink);
}
.navpanel__foot {
  margin-top: auto; padding-top: 40px;
  display: grid; gap: 18px;
  opacity: 0; transition: opacity 400ms var(--e-out) 420ms;
}
.navpanel.is-open .navpanel__foot { opacity: 1; }
.navpanel__foot a[href^="tel"] {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.03em;
}

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

/* Editorial split on the page grid. A narrow measure of type on the left, one
   framed photograph inset from the right gutter, and the logo silhouette
   sitting behind the copy at very low opacity. */

.hero {
  position: relative;
  background: var(--paper);
  color: var(--text);
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(32px, 3.6vw, 52px));
  padding-bottom: clamp(44px, 4.6vw, 68px);
}

.hero__grid {
  position: relative;
  display: grid;
  row-gap: clamp(32px, 4vw, 56px);
  column-gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: repeat(12, 1fr); }
}

/* ---- the words ---- */

.hero__copy { position: relative; z-index: 2; padding-top: clamp(0px, 1vw, 14px); }
@media (min-width: 940px) { .hero__copy { grid-column: 1 / span 5; } }
@media (min-width: 1240px) { .hero__copy { grid-column: 1 / span 5; } }

.hero__eyebrow {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--cool);
  margin: 0 0 clamp(20px, 2.2vw, 28px);
}

.hero h1 {
  font-size: clamp(1.95rem, 3.3vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.036em;
  line-height: 1.08;
  color: var(--text);
  max-width: 13ch;
}

.hero__sub {
  margin-top: clamp(18px, 2vw, 24px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 34ch;
}

.hero__actions {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}

/* ---- the photograph ---- */

.hero__shot {
  position: relative;
  z-index: 2;
  margin: 0;
}
@media (min-width: 940px) {
  .hero__shot { grid-column: 8 / span 5; margin-right: clamp(0px, 2vw, 30px); }
}
@media (min-width: 1240px) {
  /* Four columns, not six. Narrow enough to read as a framed plate rather
     than a slab, and it is what keeps the section short. */
  .hero__shot { grid-column: 8 / span 4; }
}

.hero__shot img {
  position: relative; z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 56% 46%;
  background: var(--ink);
}
/* A navy block stepped out behind the picture. It carries the brand colour
   into the composition instead of leaving it only on the button. */
.hero__shot::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 1.9vw, 26px) calc(clamp(16px, 1.9vw, 26px) * -1)
         calc(clamp(16px, 1.9vw, 26px) * -1) clamp(16px, 1.9vw, 26px);
  background: var(--ink);
  z-index: 0;
}
.hero__cap {
  position: relative; z-index: 1;
  margin-top: clamp(10px, 1.1vw, 14px);
  padding-left: calc(clamp(16px, 1.9vw, 26px) + 16px);
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-ink-muted);
}
.hero__cap i { font-style: normal; opacity: .45; }

/* ---- the silhouette behind the copy ---- */

.hero__mark {
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: 36%;
  bottom: 0;          /* the mark rises off the navy strip below the hero */
  z-index: 0;
  color: var(--ink);
  opacity: .09;
  pointer-events: none;
}
@media (max-width: 939px) { .hero__mark { right: 0; opacity: .05; } }
.roofline { width: 100%; height: auto; display: block; }
.rl-line {
  stroke: currentColor; stroke-width: 1.4; fill: none;
  stroke-linejoin: miter; stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 939px) {
  .hero { padding-top: calc(var(--nav-h) + 34px); }
  .hero h1 { max-width: none; }
  .hero__shot img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Trust strip, sitting under the hero rather than floating inside it
   ========================================================================== */

.trustbar {
  border-block: 1px solid var(--rule-ink);
  background: var(--ink);
}
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.trustbar__item {
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 32px);
  border-left: 1px solid var(--rule-ink);
  display: flex; align-items: center; gap: 12px;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-ink-muted);
}
.trustbar__item:first-child { border-left: 0; padding-left: 0; }
.trustbar__item b { font-weight: 500; color: var(--text-ink); }
.trustbar .stars { margin: 0; color: var(--text-ink); }
.trustbar .stars svg { width: 11px; height: 11px; }
@media (max-width: 700px) {
  .trustbar__item { border-left: 0; border-top: 1px solid var(--rule-ink); padding-inline: 0; }
  .trustbar__item:first-child { border-top: 0; }
}

/* ------------------------------------------------------- trust strip ---- */

.stats {
  background: var(--ink-2);
  color: var(--text-ink);
  border-block: 1px solid var(--rule-ink);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
/* Deliberately not four identical tiles: rules divide, the last cell carries
   words instead of a number so the row does not read as a dashboard. */
.stats__item {
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 40px);
  border-left: 1px solid var(--rule-ink);
}
.stats__item:first-child { border-left: 0; padding-left: 0; }
.stats__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__num sup {
  font-size: .5em; vertical-align: super; letter-spacing: 0;
  color: var(--text-ink-muted); margin-left: 2px;
}
.stats__label {
  display: block; margin-top: 12px;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-ink-muted);
}
.stats__word {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
}
.stats .wrap { padding-inline: var(--gutter); }

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

.svc-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
@media (min-width: 900px) {
  .svc-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

.svc-grid { display: grid; gap: clamp(14px, 1.6vw, 24px); }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(12, 1fr); } }

/* Asymmetric spans so no two rows are identical. */
.svc-card { grid-column: span 12; }
@media (min-width: 760px) {
  .svc-card:nth-child(1) { grid-column: span 7; }
  .svc-card:nth-child(2) { grid-column: span 5; }
  .svc-card:nth-child(3) { grid-column: span 5; }
  .svc-card:nth-child(4) { grid-column: span 7; }
  .svc-card:nth-child(5) { grid-column: span 6; }
  .svc-card:nth-child(6) { grid-column: span 6; }
}

.svc-card a {
  display: block;
  position: relative;
  height: 100%;
  min-height: clamp(300px, 34vw, 460px);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.svc-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--e-out);
  z-index: -2;
}
.svc-card a::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12,22,38,.92) 4%, rgba(12,22,38,.45) 46%, rgba(12,22,38,.10) 82%);
  transition: opacity var(--d-comp) var(--e-out);
}
.svc-card a:hover img, .svc-card a:focus-visible img { transform: scale(1.05); }

.svc-card__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(22px, 2.6vw, 40px);
  color: var(--text-ink);
  display: grid; gap: 10px;
}
.svc-card__body h3 { font-size: var(--t-h3); }
.svc-card__body p {
  font-size: var(--t-sm); color: var(--text-ink-muted);
  max-width: 40ch;
  /* Description slides up on hover on pointer devices, always visible on touch. */
}
.svc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  color: var(--cool-ink);
  margin-top: 4px;
}
.svc-card__go svg { transition: transform var(--d-comp) var(--e-out); }
.svc-card a:hover .svc-card__go svg,
.svc-card a:focus-visible .svc-card__go svg { transform: translateX(6px); }

@media (hover: hover) and (min-width: 760px) {
  .svc-card__body p, .svc-card__go {
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--d-comp) var(--e-out), transform var(--d-comp) var(--e-out);
  }
  .svc-card a:hover .svc-card__body p,
  .svc-card a:focus-visible .svc-card__body p { opacity: 1; transform: none; }
  .svc-card a:hover .svc-card__go,
  .svc-card a:focus-visible .svc-card__go { opacity: 1; transform: none; transition-delay: 50ms; }
}

/* ----------------------------------------------------------- projects --- */

.proj-grid { display: grid; gap: clamp(12px, 1.4vw, 20px); }
@media (min-width: 700px) {
  .proj-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 15vw, 220px); }
}

.proj { grid-column: span 12; }
.proj a {
  display: block; position: relative; height: 100%;
  min-height: 280px; overflow: hidden; background: var(--ink-2);
  isolation: isolate;
}
.proj img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 900ms var(--e-out);
}
.proj a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(12, 22, 38, .95) 0%, rgba(12, 22, 38, .88) 28%,
    rgba(12, 22, 38, .48) 60%, transparent 90%);
  opacity: 1;
  transition: opacity var(--d-comp) var(--e-out);
}
.proj a:hover img, .proj a:focus-visible img { transform: scale(1.055); }
.proj a:hover::before, .proj a:focus-visible::before { opacity: 1; }

.proj__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(18px, 2vw, 30px);
  color: var(--text-ink);
}
.proj__loc {
  font-family: var(--display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #D8DBE0;
}
.proj__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  letter-spacing: -.015em; line-height: 1.25; margin-top: 8px;
}
.proj__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
}
@media (hover: hover) and (min-width: 700px) {
  .proj__go { opacity: 0; transform: translateY(8px);
    transition: opacity var(--d-comp) var(--e-out), transform var(--d-comp) var(--e-out); }
  .proj a:hover .proj__go, .proj a:focus-visible .proj__go { opacity: 1; transform: none; }
}

/* The lead project gets genuinely more room. Nothing else in the grid matches it. */
@media (min-width: 700px) {
  .proj--lead { grid-column: span 7; grid-row: span 3; }
  .proj--tall { grid-column: span 5; grid-row: span 2; }
  .proj--wide { grid-column: span 5; grid-row: span 1; }
  .proj--half { grid-column: span 4; grid-row: span 2; }
  .proj--third { grid-column: span 4; grid-row: span 2; }
  .proj--quart { grid-column: span 4; grid-row: span 2; }
}

/* Filter pills */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.filter {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--rule-ink-2); border-radius: 999px;
  font-family: var(--display); font-size: .8125rem; font-weight: 600;
  letter-spacing: -.01em;
  transition: background var(--d-micro) var(--e-out),
              color var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out);
}
.filter:hover { border-color: var(--cool-ink); }
.filter[aria-pressed="true"] {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.proj[hidden] { display: none; }

/* --------------------------------------------------- before / after ----- */

.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-2);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
@media (max-width: 640px) { .ba { aspect-ratio: 4 / 5; } }

.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px; background: var(--paper);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 28px rgba(12, 22, 38, .35);
}
.ba__tag {
  position: absolute; top: 18px;
  font-family: var(--display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: rgba(12, 22, 38, .72);
  color: var(--paper);
  padding: 7px 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ba__tag--before { left: 18px; }
.ba__tag--after  { right: 18px; }

/* Keyboard slider sits on top, invisible but focusable. */
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
}
.ba__range:focus-visible + .ba__handle .ba__grip { outline: 3px solid var(--cool-ink); outline-offset: 3px; }

/* -------------------------------------------------------------- about --- */

.split {
  display: grid; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--reverse > :first-child { order: 2; }
}
/* Let the portrait run past the container edge. */
.bleed-left { margin-left: calc(var(--gutter) * -1); }
/* Beau's cutout in the About section. The caption class existed in the markup
   with no rule behind it, so the name and the role ran together as raw text. */
.portrait { position: relative; }
.portrait img { display: block; width: 100%; height: auto; }
.portrait__cap {
  margin: 18px 0 0; padding-left: var(--gutter);
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  letter-spacing: -.01em; color: var(--text);
}
.portrait__cap span {
  display: block; margin-top: 4px;
  font-weight: 500; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
@media (min-width: 1500px) {
  .portrait__cap { padding-left: calc((100vw - var(--maxw)) / 2 + var(--gutter)); }
}

@media (min-width: 1500px) { .bleed-left { margin-left: calc((100vw - var(--maxw)) / -2 - var(--gutter)); } }

.figure { position: relative; overflow: hidden; background: var(--ink-2); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure__cap {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--text-ink);
  padding: 16px 22px;
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  letter-spacing: -.01em;
}
.figure__cap span {
  display: block; font-weight: 500; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cool-ink); margin-top: 3px;
}

/* Facts list, not a card row. */
.facts { margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.facts li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts b {
  font-family: var(--display); font-weight: 500; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cool);
  padding-top: 3px; min-width: 8ch;
}
.on-ink .facts li { border-color: var(--rule-ink); }
.on-ink .facts b { color: var(--cool-ink); }

/* --------------------------------------------------------- logo strip --- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: clamp(26px, 3vw, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 90px);
  width: max-content;
  animation: marquee 46s linear infinite;
}
/* Pause on hover ONLY where there is a real pointer. On a touch screen a tap
   sticks :hover permanently, which froze the marquee the moment she scrolled. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: .62;
  transition: opacity var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__item { opacity: .45; }
  .marquee__item:hover { opacity: 1; color: var(--text); }
}

/* ---------------------------------------- second person in the About block --
   Thea sits under Beau, smaller, because her cut-out is only 344px wide. */
.second {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 34px);
  align-items: center;
  margin-top: clamp(46px, 5vw, 72px);
  padding-top: clamp(34px, 3.6vw, 50px);
  border-top: 1px solid var(--rule);
}
.second__pic {
  align-self: center; max-width: 300px;
  background: var(--ink);
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 4 / 5; overflow: hidden;
}
.second__pic img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}
.second__body h3 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; color: var(--text);
}
.second__role {
  margin: 6px 0 0; font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.second__body p + p { margin-top: 1em; }
.second__body .second__role + p { margin-top: clamp(18px, 2vw, 26px); }
@media (min-width: 900px) {
  .second { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(34px, 4vw, 60px); }
}

/* ------------------------------------------------------- meet the team ----
   Fixed width tiles that wrap, so two people read as deliberate and adding
   the crew later just fills the row out. Each portrait is a cut-out sitting
   on a navy panel, which is what makes a scrappy phone photo of one of the
   boys land the same as a proper shot. */
.team {
  list-style: none; margin: clamp(34px, 4vw, 54px) 0 0; padding: 0;
  display: grid; gap: clamp(26px, 3vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(190px, 220px));
  justify-content: start;
}
.tm { margin: 0; }
.tm__pic {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink);
  display: flex; align-items: flex-end; justify-content: center;
}
.tm__pic img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}
.tm__initials {
  align-self: center;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: .02em;
  color: var(--cool-ink);
}
.tm__name {
  margin: 18px 0 0; font-family: var(--display); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -.01em; color: var(--text);
}
.tm__role {
  margin: 5px 0 0; font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.tm__role i { font-style: normal; opacity: .5; }
.tm__line {
  margin: 12px 0 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted);
}
@media (max-width: 520px) {
  .team { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ------------------------------------------ the Google reviews rolling past --
   Same mechanic as the agency marquee, carrying quotes instead of names. */
.rmark { margin-top: clamp(46px, 5vw, 74px); }
.rmark .eyebrow { margin-bottom: clamp(18px, 2vw, 26px); }
.marquee--rev {
  border-block: 1px solid var(--rule-ink);
  padding-block: clamp(28px, 3vw, 40px);
}
.marquee__track--rev {
  gap: 0;
  align-items: stretch;
  animation-duration: 120s;
}
.rev {
  flex: 0 0 auto; width: clamp(268px, 26vw, 350px);
  margin: 0; padding: 0 clamp(26px, 2.6vw, 38px);
  border-left: 1px solid var(--rule-ink);
  display: flex; flex-direction: column; gap: 14px;
}
.rev .stars--sm { margin-bottom: 0; color: var(--text-ink); }
.rev .stars--sm svg { width: 12px; height: 12px; }
.rev blockquote {
  margin: 0; flex: 1;
  font-size: .9375rem; line-height: 1.72; color: var(--text-ink-muted);
}
.rev figcaption {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-ink);
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track--rev { animation: none; }
}

/* -------------------------------------------------------- testimonial --- */

/* Editorial quotation, not a wall of bold type. Narrow measure, quiet weight,
   a mark set in the margin, and the attribution under a hairline. */

.quote {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .quote { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.quote figure { margin: 0; position: relative; }

.quote__mark {
  display: block;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: .7;
  font-weight: 500;
  color: var(--text-ink);
  opacity: .22;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  user-select: none;
}
.on-paper .quote__mark { color: var(--text); opacity: .16; }

.quote blockquote {
  margin: 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -.005em;
  max-width: 52ch;
  color: var(--text-ink);
  transition: opacity 200ms var(--e-out);
}

.quote figcaption {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-ink);
  max-width: 52ch;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: .8125rem;
}
.quote figcaption b {
  font-weight: 500; letter-spacing: -.005em; font-size: .9375rem;
  color: var(--text-ink);
}
.quote figcaption span {
  color: var(--text-ink-muted);
  letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem;
}

.stars { display: inline-flex; gap: 3px; color: var(--text-ink-muted); margin-bottom: 18px; }
.stars svg { width: 12px; height: 12px; }

/* Google rating above the quotes. Type and a rule, no card. */
.grating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
  padding-bottom: clamp(26px, 3vw, 38px);
  margin-bottom: clamp(30px, 3.4vw, 46px);
  border-bottom: 1px solid var(--rule-ink);
}
.grating__score { display: flex; align-items: center; gap: 14px; }
.grating__score b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.9rem); line-height: 1;
  letter-spacing: -.02em; color: var(--text-ink);
}
.grating .stars--lg { margin-bottom: 0; color: var(--text-ink); }
.grating .stars--lg svg { width: 17px; height: 17px; }
.grating__meta {
  margin: 0; max-width: 46ch;
  font-size: .9375rem; line-height: 1.65; color: var(--text-ink-muted);
}
.grating__meta b { color: var(--text-ink); font-weight: 500; }
.grating__meta a {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 4px; color: var(--text-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-ink-2); padding-bottom: 1px;
  transition: border-color var(--d-micro) var(--e-out);
}
.grating__meta a:hover { border-bottom-color: var(--text-ink); }
.grating__meta a svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .grating { display: block; }
  .grating__meta { margin-top: 14px; }
  /* own line, and tall enough to be a real touch target */
  .grating__meta a { display: flex; margin: 6px 0 0; padding: 11px 0; }
}

/* Numbered navigation rather than a stack of pressed buttons. */
.quote__nav { display: grid; gap: 0; align-self: start; }
.quote__item {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--rule-ink);
  color: var(--text-ink-muted);
  transition: color var(--d-micro) var(--e-out), padding-left var(--d-comp) var(--e-out);
}
.quote__nav .quote__item:last-child { border-bottom: 1px solid var(--rule-ink); }
.quote__item i {
  font-style: normal; font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; color: var(--text-ink-muted); opacity: .7;
}
.quote__item b { display: block; font-weight: 500; font-size: .9375rem; letter-spacing: -.005em; }
.quote__item em { font-style: normal; display: block; margin-top: 3px; font-size: .75rem; opacity: .8; }
.quote__item:hover { color: var(--text-ink); padding-left: 8px; }
.quote__item[aria-pressed="true"] { color: var(--text-ink); }
.quote__item[aria-pressed="true"] i { opacity: 1; }

/* ---------------------------------------------------------- locations --- */

.loc-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 820px) { .loc-grid { grid-template-columns: 1fr 1fr; } }

.loc a {
  position: relative; display: block;
  min-height: clamp(360px, 40vw, 540px);
  overflow: hidden; background: var(--ink); isolation: isolate;
}
.loc img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 1000ms var(--e-out);
}
.loc a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(12, 22, 38, .95) 0%, rgba(12, 22, 38, .88) 32%,
    rgba(12, 22, 38, .46) 64%, transparent 92%);
}
.loc a:hover img, .loc a:focus-visible img { transform: scale(1.05); }
.loc__body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(24px, 2.8vw, 40px); color: var(--text-ink);
}
.loc__body h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 500; letter-spacing: -.025em; }
.loc__body p { margin-top: 10px; color: #D8DBE0; font-size: var(--t-sm); max-width: 34ch; }
.loc__body .arrow-link { margin-top: 18px; }

/* ---------------------------------------------------------------- CTA --- */

.cta { text-align: left; }
.cta h2 { font-size: var(--t-h1); max-width: 16ch; }
.cta__row {
  margin-top: clamp(30px, 3.6vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 40px);
}
.cta__phone {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.035em;
  display: inline-flex; align-items: center; gap: 12px;
}
.cta__phone small {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cool-ink); margin-bottom: 4px;
}

/* --------------------------------------------------------------- form --- */

.form { display: grid; gap: 18px; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--display); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-input);
  color: var(--text);
  transition: border-color var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 91, 133, .16);
}
.field input[type="file"] { padding: 12px; background: var(--surface); }
.field .hint { font-size: .8125rem; color: var(--text-muted); }

.on-ink .field input, .on-ink .field select, .on-ink .field textarea {
  background: var(--ink-2); border-color: var(--rule-ink-2); color: var(--text-ink);
}
.on-ink .field label { color: var(--text-ink-muted); }

/* ------------------------------------------------------- mobile CTA ----- */

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  background: rgba(12, 22, 38, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule-ink);
  padding: 10px calc(var(--gutter) * .6) calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  transform: translateY(110%);
  transition: transform 320ms var(--e-out);
}
.mobile-cta.is-in { transform: none; }
.mobile-cta .btn { flex: 1; min-height: 50px; padding: 0 16px; font-size: .875rem; }
@media (max-width: 860px) { .mobile-cta { display: flex; } body { padding-bottom: 0; } }

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

.footer { background: var(--ink); color: var(--text-ink-muted); font-size: var(--t-sm); }
.footer__top {
  display: grid; gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(56px, 6vw, 88px);
}
@media (min-width: 820px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer h4 {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-ink); margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { transition: color var(--d-micro) var(--e-out); }
.footer a:hover, .footer a:focus-visible { color: var(--text-ink); }
.footer__logo img { height: 34px; width: auto; margin-bottom: 20px; }
.footer__bottom {
  border-top: 1px solid var(--rule-ink);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center;
  font-size: .8125rem;
}
.footer__bottom .spacer { margin-left: auto; }

/* ----------------------------------------------------------- reveals ---- */

/* Section entrances: transform + opacity only, once, never on scroll back. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-reveal) var(--e-out),
              transform var(--d-reveal) var(--e-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Staggered children, capped at 8 so nothing crawls in late. */
.js [data-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 560ms var(--e-out), transform 560ms var(--e-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 300ms; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 360ms; }
[data-stagger].is-in > *:nth-child(n+8) { transition-delay: 420ms; }

/* Image clip reveal.
   The clip goes on the image, never on the observed element. An element with
   clip-path: inset(0 0 100% 0) has zero visible area, so IntersectionObserver
   never reports it intersecting and the reveal class never lands. */
.js [data-clip] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--e-out);
}
[data-clip].is-in img { clip-path: inset(0 0 0 0); }
.js [data-clip] .figure__cap {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--e-out) 480ms, transform 420ms var(--e-out) 480ms;
}
[data-clip].is-in .figure__cap { opacity: 1; transform: none; }

/* Hero entrance, on load rather than on scroll. */
.js .hero [data-enter] {
  opacity: 0; transform: translateY(24px);
  animation: enter 900ms var(--e-out) forwards;
}
.hero [data-enter="1"] { animation-delay: 180ms; }
.hero [data-enter="2"] { animation-delay: 300ms; }
.hero [data-enter="3"] { animation-delay: 400ms; }
.hero [data-enter="4"] { animation-delay: 500ms; }
@keyframes enter { to { opacity: 1; transform: none; } }

/* Very low intensity parallax. */
[data-parallax] { will-change: transform; }

/* ---------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *, .hero [data-enter] {
    opacity: 1 !important; transform: none !important;
  }
  [data-clip] img { clip-path: none !important; }
  [data-clip] .figure__cap { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .hero__scroll::after { animation: none; }
}

/* --------------------------------------------------------- page bits ---- */

.pagehead {
  background: var(--ink); color: var(--text-ink);
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 120px));
  padding-bottom: clamp(48px, 6vw, 96px);
  position: relative; overflow: hidden;
}
.pagehead--media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,22,38,.96), rgba(12,22,38,.76));
  z-index: 1;
}
.pagehead__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { font-size: var(--t-h1); max-width: 18ch; }
.pagehead .lead { margin-top: 20px; max-width: 52ch; }

.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--display); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cool-ink);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.crumbs a { transition: color var(--d-micro) var(--e-out); }
.crumbs a:hover { color: var(--text-ink); }
.crumbs span { opacity: .5; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.1em; }
.prose h2 { font-size: var(--t-h2); margin-top: 1.6em; margin-bottom: .5em; }
.prose h3 { font-size: var(--t-h3); margin-top: 1.6em; margin-bottom: .4em; }
.prose ul { padding-left: 0; list-style: none; margin: 1.1em 0; display: grid; gap: 12px; }
.prose ul li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.prose ul li::before {
  content: ""; width: 7px; height: 7px; margin-top: .62em;
  background: var(--accent); flex: none;
}
.prose a { color: var(--cool); text-decoration: underline; text-underline-offset: 3px; }
.on-ink .prose a { color: var(--cool-ink); }

.gal { display: grid; gap: clamp(10px, 1.2vw, 16px); }
@media (min-width: 640px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gal figcaption {
  margin-top: 10px; font-size: .8125rem; color: var(--text-muted);
  font-family: var(--body); font-weight: 500;
}
.on-ink .gal figcaption { color: var(--text-ink-muted); }

.spec { display: grid; gap: 1px; background: var(--rule); margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 700px) { .spec { grid-template-columns: repeat(4, 1fr); } }
.spec div { background: var(--paper); padding: clamp(20px, 2.2vw, 30px); }
.spec dt {
  font-family: var(--display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cool);
  margin-bottom: 8px;
}
.spec dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.015em; }
.on-ink .spec { background: var(--rule-ink); }
.on-ink .spec div { background: var(--ink); }
.on-ink .spec dt { color: var(--cool-ink); }

.notice {
  border-left: 2px solid var(--accent);
  padding: 18px 22px;
  background: rgba(98, 105, 122, .07);
  font-size: var(--t-sm);
  margin-top: 28px;
}

/* ==========================================================================
   Nav toggle + responsive collapse
   ========================================================================== */

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  align-items: center; justify-content: center;
}
.nav__toggle-bars { display: block; width: 24px; height: 12px; position: relative; }
.nav__toggle-bars i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform var(--d-comp) var(--e-out), opacity var(--d-micro) var(--e-out);
}
.nav__toggle-bars i:first-child { top: 0; }
.nav__toggle-bars i:last-child  { bottom: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child  { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__toggle[aria-expanded="true"] { position: relative; z-index: 101; }
}
@media (min-width: 1081px) {
  .navpanel { display: none; }
}

/* Hero trust list: flat row with dot separators. */
.hero__trust { padding-left: 0; }
.hero__trust li { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }

/* Stats: on narrow screens the left rule reads better than a hairline grid. */
@media (max-width: 720px) {
  .stats__item { border-left: 0; border-top: 1px solid var(--rule-ink); padding-inline: 0; }
  .stats__item:first-child { border-top: 0; padding-top: clamp(30px, 6vw, 44px); }
}

/* Details/summary: no native marker, a plus that turns into a minus. */
details summary::-webkit-details-marker { display: none; }
details summary { position: relative; padding-right: 40px; }
details summary::after {
  content: ""; position: absolute; right: 6px; top: .55em;
  width: 13px; height: 1.5px; background: var(--cool);
}
details summary::before {
  content: ""; position: absolute; right: 11.75px; top: -.25em;
  width: 1.5px; height: 13px; background: var(--cool);
  transform: translateY(.8em);
  transition: transform var(--d-comp) var(--e-out), opacity var(--d-micro) var(--e-out);
}
details[open] summary::before { opacity: 0; transform: translateY(.8em) rotate(90deg); }
details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* The About "how we work" cells carry a paragraph, so they need looser padding
   than the four-up spec row on a project page. */
.on-ink .spec div p { max-width: 30ch; }

/* Contact page: keep the form column from stretching taller than it needs. */
@media (min-width: 900px) {
  .split { align-items: start; }
  .split.split--center { align-items: center; }
}

/* Project spec row: four across is too tight under 1100px. */
@media (min-width: 700px) and (max-width: 1099px) {
  .spec { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Touch targets: nothing tappable falls under 44px on a phone
   ========================================================================== */

@media (max-width: 860px) {
  .footer ul { gap: 0; }
  .footer ul li { display: flex; align-items: center; min-height: 44px; }
  .footer ul li a { display: flex; align-items: center; min-height: 44px; width: 100%; }
  .footer__bottom { gap: 4px 24px; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .prose a { display: inline; }
}

/* The logo is a 30px lockup, so the hit area is padded out around it. */
.nav__logo {
  display: flex; align-items: center;
  min-height: 46px;
  padding-block: 8px;
}

/* Footer body links and the Instagram link need the same floor. */
@media (max-width: 860px) {
  .footer p a { display: inline-flex; align-items: center; min-height: 44px; }
  .marquee__item { pointer-events: none; }
}

/* Real 44px targets rather than an invisible pseudo overlay, so the hit area
   is the box an assistive tool and an audit both actually measure. */
.arrow-link { min-height: 44px; }

@media (max-width: 860px) {
  .facts a, .footer p a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   Hero video sits on top of the poster and only fades in once it is playing.
   The poster is the LCP element, so the video never blocks first paint.
   ========================================================================== */

.hero__media video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--e-out);
}
.hero__media video.is-playing { opacity: 1; }

/* ==========================================================================
   Service areas: grouped prose beats sixty three pills
   ========================================================================== */

.areas {
  display: grid;
  gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
}
@media (min-width: 720px)  { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .areas { grid-template-columns: repeat(3, 1fr); } }

.areas__group h3 {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cool);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.areas__group p {
  font-size: .9375rem; line-height: 1.7; color: var(--text-muted);
  text-wrap: pretty;
}
.on-ink .areas__group h3 { color: var(--cool-ink); border-bottom-color: var(--rule-ink); }
.on-ink .areas__group p { color: var(--text-ink-muted); }

/* ==========================================================================
   Services preview: one large shot, a numbered list beside it
   Replaces the six equal cards, which read as a grid of blocks.
   ========================================================================== */

.feature { display: grid; gap: clamp(28px, 3.4vw, 56px); }
@media (min-width: 920px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: start; }
}

.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
@media (max-width: 919px) { .feature__media { aspect-ratio: 16 / 10; } }

.feature__shot {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 520ms var(--e-out);
}
.feature__shot.is-active { opacity: 1; }
.feature__shot img { width: 100%; height: 100%; object-fit: cover; }
/* a slow drift so the pane is never completely still */
.feature__shot.is-active img { animation: driftin 9s var(--e-out) forwards; }
@keyframes driftin { from { transform: scale(1.0); } to { transform: scale(1.055); } }

.feature__list { list-style: none; margin: 0; padding: 0; }
.feature__list li { border-top: 1px solid var(--rule); }
.feature__list li:last-child { border-bottom: 1px solid var(--rule); }

.feature__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  padding: clamp(20px, 2.3vw, 30px) 0;
  transition: padding-left var(--d-comp) var(--e-out);
}
.feature__list a:hover, .feature__list a:focus-visible { padding-left: clamp(8px, 1.2vw, 18px); }

.feature__n {
  font-family: var(--display); font-weight: 500;
  font-size: .75rem; letter-spacing: .12em;
  color: var(--cool);
  padding-top: .5em;
}
.feature__t {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
  letter-spacing: -.02em; line-height: 1.2;
}
.feature__d {
  display: block; margin-top: 9px;
  font-size: .9375rem; line-height: 1.55;
  color: var(--text-muted); max-width: 44ch;
}
.feature__go {
  color: var(--cool);
  padding-top: .7em;
  transition: transform var(--d-comp) var(--e-out);
}
.feature__list a:hover .feature__go,
.feature__list a:focus-visible .feature__go { transform: translateX(6px); }

/* ==========================================================================
   Video section: contained and framed, not a slab dropped on the page
   ========================================================================== */

/* A step lighter than the property section above it, so the two dark
   sections read as two chapters rather than one long block. */
.filmstrip {
  background: var(--ink-2);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.film {
  margin: clamp(32px, 4vw, 60px) 0 0;
  position: relative;
}
.film video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--rule);
}
.on-ink .film video, .pm .film video { border-color: var(--rule-ink); }
@media (max-width: 640px) { .film video { aspect-ratio: 4 / 3; } }

.film__cap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 28px;
  padding-top: 18px;
  font-family: var(--body); font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.on-ink .film__cap, .pm .film__cap { color: var(--text-ink-muted); }
.film__cap .arrow-link { text-transform: none; letter-spacing: -.01em; }

/* Reviews on paper as well as on ink. */
.quote--light .quote__list { background: var(--rule); }
.quote--light .quote__mini {
  background: var(--paper); color: var(--text-muted);
  border-left-color: transparent;
}
.quote--light .quote__mini b { color: var(--text); }
.quote--light .quote__mini:hover,
.quote--light .quote__mini[aria-pressed="true"] {
  border-left-color: var(--cool); background: var(--surface);
}
.quote--light figcaption span { color: var(--text-muted); }

/* The shot pane tracks the list rather than running out halfway down it. */
@media (min-width: 920px) {
  .feature__media {
    position: sticky;
    top: calc(var(--nav-h) + clamp(24px, 4vh, 56px));
  }
}

/* The credential chip sits on the arch edge, not across Beau's arm. */
@media (max-width: 939px) { .hero__chip { left: auto; right: -4px; bottom: 22%; } }

/* ==========================================================================
   Services index: editorial rows, not a card grid
   Alternating sides, a ghost numeral behind the title, the image running past
   its column so the page stops reading as stacked rectangles.
   ========================================================================== */

.srow {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 128px);
  border-top: 1px solid var(--rule);
}
.srow:first-child { border-top: 0; padding-top: clamp(40px, 5vw, 80px); }

@media (min-width: 900px) {
  .srow { grid-template-columns: repeat(12, 1fr); }
  .srow__media { grid-column: 1 / span 6; }
  .srow__body  { grid-column: 8 / span 5; }
  .srow--flip .srow__media { grid-column: 7 / span 6; order: 2; }
  .srow--flip .srow__body  { grid-column: 1 / span 5; order: 1; }

  /* let the image run to the page edge on the outer side */
  .srow__media { margin-left: calc(var(--gutter) * -1); }
  .srow--flip .srow__media { margin-left: 0; margin-right: calc(var(--gutter) * -1); }
}
@media (min-width: 1500px) {
  .srow__media { margin-left: calc((100vw - var(--maxw)) / -2 - var(--gutter)); }
  .srow--flip .srow__media { margin-left: 0; margin-right: calc((100vw - var(--maxw)) / -2 - var(--gutter)); }
}

.srow__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.srow__media img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 5 / 4;
  transition: transform 1100ms var(--e-out);
}
.srow:hover .srow__media img { transform: scale(1.035); }
@media (min-width: 900px) {
  .srow:nth-child(odd)  .srow__media img { aspect-ratio: 5 / 4; }
  .srow:nth-child(even) .srow__media img { aspect-ratio: 4 / 5; }
}

.srow__body { position: relative; }

/* A small index number on a rule. Quieter than a giant ghost numeral, and it
   still gives the row an editorial anchor. */
.srow__num {
  display: flex; align-items: center; gap: 12px;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; color: var(--cool);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.srow__num::after { content: ""; height: 1px; width: 42px; background: var(--rule-2); }

.srow__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  letter-spacing: -.028em;
  max-width: 16ch;
}
.srow__short {
  margin-top: 14px;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--text-muted); max-width: 38ch;
}
.srow__points {
  list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0;
  display: grid; gap: 10px;
}
.srow__points li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
  font-size: .9375rem; color: var(--text-muted);
}
.srow__points li::before {
  content: ""; width: 6px; height: 6px; margin-top: .58em;
  background: var(--accent); flex: none;
}
.srow__cta { margin-top: clamp(24px, 2.8vw, 34px); }

.srow__warranty {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px;
  font-family: var(--body); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cool);
}
.srow__warranty::before {
  content: ""; width: 18px; height: 1px; background: currentColor;
}

/* The plus marker has to change colour on a dark section or it vanishes. */
.on-ink details summary::after,
.on-ink details summary::before { background: var(--cool-ink); }
.on-ink details summary:focus-visible { outline-color: var(--cool-ink); }

/* ==========================================================================
   Service detail: a pull statement, then a panel overlapping a full bleed shot
   Replaces four identical split rows stacked on each other.
   ========================================================================== */

.statement { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: start; }
}
.statement__text {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.45; letter-spacing: -.015em;
  max-width: 42ch; text-wrap: pretty;
}

/* Full bleed shot with a panel sitting over its lower edge. */
.overlap { position: relative; }
.overlap__media {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: clamp(320px, 46vw, 620px);
  overflow: hidden;
  background: var(--ink-2);
}
.overlap__media img { width: 100%; height: 100%; object-fit: cover; }

.overlap__panel {
  position: relative;
  margin-top: clamp(-88px, -9vw, -40px);
  background: var(--ink);
  color: var(--text-ink);
  padding: clamp(28px, 3.6vw, 56px);
  max-width: 62ch;
  border: 1px solid var(--rule-ink);
}
@media (min-width: 900px) { .overlap__panel { margin-left: clamp(0px, 4vw, 72px); } }
.overlap__panel .eyebrow { color: var(--cool-ink); }
.overlap__panel h2 { font-size: var(--t-h2); color: var(--text-ink); }
.overlap__panel p { margin-top: 18px; color: var(--text-ink-muted); }

/* Included list, two columns, with the warranty called out beside it. */
.incl { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 900px) { .incl { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } }
.incl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 680px) { .incl__list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 3vw, 52px); } }
.incl__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px solid var(--rule-ink);
  font-size: .9375rem; color: var(--text-ink-muted);
}
.incl__list li::before {
  content: ""; width: 6px; height: 6px; margin-top: .62em;
  background: var(--cool-ink); flex: none;
}
.warranty-chip {
  display: block;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-ink);
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--text-ink);
  max-width: 24ch;
}
.warranty-chip span {
  display: block; margin-top: 6px;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-ink-muted);
}

/* Reviews page: quotations stacked with the index in the margin. */
.review {
  display: grid; gap: clamp(14px, 3vw, 48px);
  margin: 0;
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.review:first-child { border-top: 0; padding-top: clamp(20px, 3vw, 40px); }
@media (min-width: 800px) { .review { grid-template-columns: auto minmax(0, 1fr); } }

.review__n {
  font-size: .75rem; font-weight: 500; letter-spacing: .16em;
  color: var(--cool); padding-top: .5em; min-width: 4ch;
}
.review blockquote {
  margin: 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 400; line-height: 1.7;
  max-width: 56ch; color: var(--text);
}
.review figcaption {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 56ch;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.review figcaption b { font-weight: 500; font-size: .9375rem; letter-spacing: -.005em; }
.review figcaption span {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* The page head is always dark, so its muted text has to use the on-ink grey.
   The warm grey is for paper and fails contrast here. */
.pagehead .lead { color: var(--text-ink-muted); }
.pagehead .muted { color: var(--text-ink-muted); }

/* Smaller, more refined primary button for the hero. */
.btn--sm { min-height: 50px; padding: 0 34px; font-size: .6875rem; letter-spacing: .15em; }

/* A text CTA with an arrow, no box and no underline until it is wanted. */
.arrow-link--bare { border-bottom-color: transparent; padding-block: 4px; }
.arrow-link--bare:hover, .arrow-link--bare:focus-visible { border-bottom-color: currentColor; }

/* Figures, sitting under the About block rather than in a band near the top. */
.figures {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures__item {
  padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.4vw, 40px) 0 0;
}
@media (max-width: 759px) {
  .figures__item { border-top: 1px solid var(--rule); padding-right: 0; }
  .figures__item:first-child { border-top: 0; }
}
.figures__num {
  display: block;
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figures__num sup {
  font-size: .5em; vertical-align: super; letter-spacing: 0;
  color: var(--text-muted); margin-left: 2px;
}
.figures__word {
  display: block;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
}
.figures__label {
  display: block; margin-top: 10px;
  font-size: .75rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Primary call to action
   ========================================================================== */

.btn--go { overflow: visible; }
.btn--go::after { display: none; }
.btn--go::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(246, 244, 241, .34);
  border-radius: calc(var(--r-btn) + 3px);
  opacity: 0;
  transform: scale(.965);
  transition: opacity 260ms var(--e-out), transform 260ms var(--e-out);
  pointer-events: none;
}
/* the fill stays, so the label must keep its own colour rather than
   inheriting the inversion the wipe used to need */
.btn--go:hover, .btn--go:focus-visible { color: var(--btn-fg); }
.btn--go:hover::before, .btn--go:focus-visible::before { opacity: 1; transform: none; }

/* ==========================================================================
   Navigation
   Navy from the top on every page, so the brand colour frames the page rather
   than appearing only on a button.
   ========================================================================== */

.nav__logo img { display: block; }

.nav__cta { --btn-fg: var(--paper); --btn-bd: var(--rule-ink-2); }
.nav__cta::after { background: var(--paper); }
.nav__cta:hover, .nav__cta:focus-visible { color: var(--ink); }
.nav__toggle-bars i { background: var(--paper); }

/* ==========================================================================
   Audience pathways
   Two routes, no cards. A rule, a photograph, a heading and a link.
   ========================================================================== */

.paths {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 820px) { .paths { grid-template-columns: 1fr 1fr; gap: 0; } }

.path {
  min-width: 0;
  padding: clamp(36px, 4.4vw, 64px) 0 clamp(32px, 4vw, 56px);
}
@media (min-width: 820px) {
  .path + .path { border-left: 1px solid var(--rule); padding-left: clamp(36px, 4.4vw, 72px); }
  .path:first-child { padding-right: clamp(36px, 4.4vw, 72px); }
}

.path__eyebrow {
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cool);
}
.path h3 {
  margin-top: 14px;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 400; letter-spacing: -.03em;
}
.path p {
  margin-top: 14px; max-width: 40ch;
  font-size: 1rem; line-height: 1.7; color: var(--text-muted);
}
.path__shot {
  margin-top: clamp(24px, 2.8vw, 34px);
  overflow: hidden;
  background: var(--ink);
}
.path__shot img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 900ms var(--e-out);
}
.path:hover .path__shot img { transform: scale(1.03); }
.path .arrow-link { margin-top: clamp(20px, 2.2vw, 26px); }

/* ==========================================================================
   Property management, the differentiator
   ========================================================================== */

/* The surface only. Text colours come from .on-ink, which the section also
   carries, so there is one dark-surface system rather than two. */
.pm { background: var(--ink); }
.pm__head { display: grid; gap: clamp(20px, 3vw, 48px); }
@media (min-width: 900px) {
  .pm__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
.pm__head h2 { font-size: var(--t-h2); max-width: 16ch; }

.pm__grid {
  margin-top: clamp(44px, 5vw, 76px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-ink);
}
@media (min-width: 760px) { .pm__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pm__grid { grid-template-columns: repeat(3, 1fr); } }

.pm__item {
  min-width: 0;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 2.6vw, 44px) clamp(30px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--rule-ink);
}
@media (min-width: 760px) {
  .pm__item:nth-child(2n) { padding-left: clamp(24px, 2.6vw, 44px); border-left: 1px solid var(--rule-ink); }
}
@media (min-width: 1100px) {
  .pm__item:nth-child(2n) { padding-left: 0; border-left: 0; }
  .pm__item:not(:nth-child(3n+1)) { padding-left: clamp(24px, 2.6vw, 44px); border-left: 1px solid var(--rule-ink); }
}
.pm__item h3 {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em;
  color: var(--text-ink);
}
.pm__item p {
  margin-top: 11px; font-size: .9375rem; line-height: 1.68;
  color: var(--text-ink-muted); max-width: 38ch;
}
.pm__cta { margin-top: clamp(38px, 4.4vw, 60px); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }

/* ==========================================================================
   Service directory, a list rather than a grid of cards
   ========================================================================== */

.dir { border-top: 1px solid var(--rule); }
.dir__row { border-bottom: 1px solid var(--rule); }
.dir__row a {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px) 0;
  transition: padding-left var(--d-comp) var(--e-out);
}
.dir__row a:hover, .dir__row a:focus-visible { padding-left: clamp(8px, 1.2vw, 20px); }
.dir__n {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em;
  color: var(--cool); min-width: 3ch;
}
.dir__t {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.2;
}
.dir__d {
  display: block; margin-top: 7px;
  font-size: .9375rem; line-height: 1.6; color: var(--text-muted); max-width: 46ch;
}
.dir__go { color: var(--cool); transition: transform var(--d-comp) var(--e-out); }
.dir__row a:hover .dir__go { transform: translateX(6px); }

/* A single shot follows the list on wide screens. */
.dir__wrap { display: grid; gap: clamp(28px, 3.4vw, 56px); }
@media (min-width: 1000px) { .dir__wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.dir__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
@media (min-width: 1000px) { .dir__media { position: sticky; top: calc(var(--nav-h) + 40px); } }
.dir__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 520ms var(--e-out); }
.dir__shot.is-active { opacity: 1; }
.dir__shot img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 999px) { .dir__media { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   Selected work, editorial rather than a uniform grid
   ========================================================================== */

.work { display: grid; gap: clamp(40px, 5vw, 84px); }
@media (min-width: 860px) { .work { grid-template-columns: repeat(12, 1fr); } }

/* The span belongs inside the query. On the single column grid below 860px,
   span 12 makes the grid invent twelve empty tracks, and eleven gaps of 40px
   push the row 440px wide inside a 350px column. body's clip hides that, but
   every fixed element still stretches to the wider scroll area, which is how
   one line here moved the whole header off screen. */
.work__item { min-width: 0; }
.work__item a, .work__shot { min-width: 0; }
@media (min-width: 860px) {
  .work__item { grid-column: span 12; }
  .work__item:nth-child(2) { grid-column: span 7; }
  .work__item:nth-child(3) { grid-column: span 5; }
  .work__item:nth-child(5) { grid-column: span 5; }
  .work__item:nth-child(6) { grid-column: span 7; }
}

.work__shot { overflow: hidden; background: var(--ink); }
.work__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms var(--e-out);
}
.work__item:nth-child(1) .work__shot img,
.work__item:nth-child(4) .work__shot img { aspect-ratio: 21 / 9; }
.work__item:nth-child(2) .work__shot img,
.work__item:nth-child(6) .work__shot img { aspect-ratio: 4 / 3; }
.work__item:nth-child(3) .work__shot img,
.work__item:nth-child(5) .work__shot img { aspect-ratio: 4 / 5; }
@media (max-width: 859px) { .work__shot img { aspect-ratio: 4 / 3 !important; } }
.work__item a:hover .work__shot img,
.work__item a:focus-visible .work__shot img { transform: scale(1.03); }

.work__meta {
  margin-top: clamp(16px, 1.8vw, 22px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cool);
}
.work__meta i { font-style: normal; opacity: .45; }
.work__title {
  margin-top: 12px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 400; letter-spacing: -.025em; line-height: 1.25;
}
.work__outcome {
  margin-top: 9px; max-width: 44ch;
  font-size: .9375rem; line-height: 1.65; color: var(--text-muted);
}

/* ==========================================================================
   Enquiry, asked in three short steps rather than one long form
   ========================================================================== */

.wiz { max-width: 44rem; }
.wiz__bar {
  display: flex; align-items: center; gap: 16px;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: clamp(26px, 3vw, 38px);
}
.wiz__track { flex: 1; height: 1px; background: var(--rule); position: relative; }
.wiz__fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--text);
  transition: width 420ms var(--e-out);
}

.wiz__step { display: none; }
.wiz__step.is-current { display: block; }

.wiz__q {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.2;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

/* Choices are rows on rules, not pills or boxes. */
.wiz__choices { border-top: 1px solid var(--rule); }
.wiz__choice {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
  width: 100%; text-align: left;
  padding: clamp(16px, 1.9vw, 22px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--d-comp) var(--e-out);
}
.wiz__choice:hover, .wiz__choice:focus-visible { padding-left: 10px; }
.wiz__choice b {
  display: block; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.015em;
}
.wiz__choice span {
  display: block; margin-top: 5px;
  font-size: .875rem; color: var(--text-muted);
}
.wiz__choice svg { color: var(--cool); }
.wiz__choice[aria-pressed="true"] { padding-left: 10px; }
.wiz__choice[aria-pressed="true"] b::after {
  content: "";
  display: inline-block; width: 6px; height: 6px; margin-left: 10px;
  background: var(--text); vertical-align: middle;
}

.wiz__fields { display: grid; gap: 18px; }
@media (min-width: 620px) { .wiz__fields { grid-template-columns: 1fr 1fr; } }
.wiz__fields .field--full { grid-column: 1 / -1; }

.wiz__actions {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
}
.wiz__back {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 0;
  transition: color var(--d-micro) var(--e-out);
}
.wiz__back:hover { color: var(--text); }
.wiz__note { font-size: .875rem; color: var(--text-muted); }

/* A summary of what was chosen, so step three still shows the context. */
.wiz__recap {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding-bottom: clamp(18px, 2vw, 24px);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--rule);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
}
.wiz__recap b { color: var(--text); font-weight: 500; }