/* ==========================================================================
   Dukes Estate Fencing — "Nordic heritage" design system
   Nordic layout + restraint, warm linen ground, Roman serif display,
   iron-oxide accent taken from the fences themselves.
   ========================================================================== */

:root {
  /* Colour tokens */
  --linen: #F4F1EA;
  --paper: #FBFAF7;
  --stone: #E4DED2;
  --stone-2: #D3CBBB;
  --sage: #CDD6C3;
  --sage-deep: #8E9C85;
  --ink: #1F2A24;
  --ink-2: #4E5852;
  --ink-3: #646C65;
  --oxide: #8A4B2A;
  --oxide-deep: #6F3A1F;
  --oxide-soft: #EBDCCF;
  --night: #161C18;
  --night-2: #1F2721;
  --mist: #E9E6DE;
  --mist-2: #B9BDB5;
  --danger: #A3321E;
  --success: #2F6A3A;

  /* Type */
  --serif: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --section: clamp(80px, 11vw, 148px);
  --radius: 4px;
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-reveal: 1000ms;

  /* Layers */
  --z-header: 40;
  --z-menu: 50;
  --z-dialog: 100;

  interpolate-size: allow-keywords;
  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--oxide); color: #fff; }

.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: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--radius);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }

/* ---------- Typography ---------- */
.display, h1, .h1 {
  font-family: var(--serif);
  font-size: clamp(2.35rem, 5.4vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: .005em;
  font-weight: 500;
}
h2, .h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.5vw, 3.05rem);
  line-height: 1.1;
  font-weight: 500;
}
h3, .h3 { font-family: var(--sans); font-size: 1.28rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--ink-2); max-width: 38em; }
.muted { color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oxide);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%;
  flex: none;
}

.statement {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.3;
  font-weight: 400;
  max-width: 26em;
}
.statement em { font-style: normal; color: var(--oxide); }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: 2px;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
  touch-action: manipulation;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--oxide); transform: scaleY(0); transform-origin: bottom;
  transition: transform 420ms var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { border-color: var(--oxide); color: #fff; }
.btn:active { transform: scale(.98); }
.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--oxide { --btn-bg: var(--oxide); }
.btn--oxide::before { background: var(--ink); }
.btn--oxide:hover, .btn--oxide:focus-visible { border-color: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--stone-2); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size 420ms var(--ease-out), color var(--dur-2);
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1px; color: var(--oxide); }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  height: var(--header-h);
  transition: transform 420ms var(--ease-out), background-color var(--dur-2), box-shadow var(--dur-2), height var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(251, 250, 247, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--stone);
  --header-h: 66px;
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); line-height: 1; }
.brand-word { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: .26em; margin-right: -.26em; }
.brand-sub {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-family: var(--serif); font-size: .56rem; letter-spacing: .34em; margin-right: -.34em; font-weight: 500;
}
.brand-sub::before, .brand-sub::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .6; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.nav a:not(.btn) {
  text-decoration: none; font-weight: 500; font-size: .98rem; position: relative; padding: 10px 0;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--oxide);
  transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease-out);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--oxide); }
.nav .tel { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.nav .btn { min-height: 46px; padding: 0 20px; }

.menu-toggle {
  display: none; width: 48px; height: 48px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform 420ms var(--ease-out), opacity var(--dur-1); }
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 24px; }
.menu-toggle span:nth-child(3) { top: 30px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 640ms var(--ease-out), visibility 0s 640ms;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 640ms var(--ease-out), visibility 0s; }
.menu-open .site-header { z-index: calc(var(--z-menu) + 1); background: transparent; box-shadow: none; transform: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { border-bottom: 1px solid var(--stone); overflow: hidden; }
.mobile-menu li a {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 0;
  font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.4rem); text-decoration: none;
  transform: translateY(100%); transition: transform 700ms var(--ease-out);
}
.menu-open .mobile-menu li a { transform: none; }
.menu-open .mobile-menu li:nth-child(2) a { transition-delay: 60ms; }
.menu-open .mobile-menu li:nth-child(3) a { transition-delay: 120ms; }
.menu-open .mobile-menu li:nth-child(4) a { transition-delay: 180ms; }
.mobile-menu li a[aria-current="page"] { color: var(--oxide); }
.mobile-menu .menu-foot { display: grid; gap: 12px; }
.mobile-menu .menu-foot p { margin: 0; color: var(--ink-2); font-size: .95rem; }
body.menu-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
}

/* ---------- Hero ----------
   The whole hero, fence included, fits one screen at any size. The photo takes whatever height
   is left after the header, top padding and fence zone, and the copy scales with viewport height
   so it never pushes the fence off the bottom. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + var(--hero-pad-top));
  padding-bottom: var(--fence-zone);
  overflow: hidden;
  --hero-pad-top: clamp(16px, min(5vw, 5svh), 64px);
  --fence-zone: clamp(104px, min(12vw, 18svh), 168px);
  --hero-room: calc(100svh - var(--header-h) - var(--hero-pad-top) - var(--fence-zone));
}
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); align-items: center; position: relative; z-index: 2; }
.hero-copy { grid-column: 1 / span 7; }
.hero .eyebrow { margin-bottom: clamp(12px, 2.4svh, 22px); }
.hero-copy h1 { font-size: clamp(2.1rem, min(4.5vw, 7.2svh), 4.5rem); margin-bottom: clamp(14px, 3svh, 28px); }
.hero-copy .lead { font-size: clamp(1rem, min(1.6vw, 2.4svh), 1.32rem); margin-bottom: clamp(18px, 4svh, 36px); }
.hero-media { grid-column: 8 / span 5; position: relative; }
.hero-frame {
  position: relative; width: 100%; margin-left: auto;
  height: clamp(300px, var(--hero-room), 760px);
  overflow: hidden; border-radius: var(--radius); background: var(--stone);
}
.px { position: absolute; inset: -8% 0; will-change: transform; }
.px img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame img { object-position: 40% 62%; }
.hero-tag {
  position: absolute; left: clamp(-36px, -3vw, -16px); bottom: clamp(16px, 5svh, 48px); z-index: 2;
  background: var(--paper); padding: 14px 18px 14px 16px; border-radius: 2px;
  display: flex; align-items: center; gap: 12px; max-width: 290px;
  box-shadow: 0 12px 32px -18px rgba(31,42,36,.45);
  font-size: .88rem; line-height: 1.4;
}
.hero-tag .ring { flex: none; }
.hero-tag strong { display: block; font-weight: 600; color: var(--ink); }
.hero-tag span span { color: var(--ink-2); }
.hero-tag { text-decoration: none; color: var(--ink); transition: transform var(--dur-2) var(--ease-out); }
.is-loaded .hero-tag:hover { transform: translateY(-3px); transition-delay: 0ms; }

.hero-contours { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--stone-2); }
.hero-contours path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }

.hero-fence {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: calc(var(--fence-zone) - 6px); pointer-events: none; color: var(--oxide);
}
.hero-fence svg { width: 100%; height: 100%; overflow: visible; }
.hero-fence .ground { stroke: var(--stone-2); }
.hero-fence path, .hero-fence line, .hero-fence circle { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.scroll-cue {
  position: absolute; right: var(--gutter); bottom: calc(var(--fence-zone) + 12px); z-index: 4;
  writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.scroll-cue::after { content: ""; width: 1px; height: 54px; background: linear-gradient(var(--ink-2) 50%, transparent 0) 0 0 / 1px 200%; animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
@media (max-height: 700px) and (min-width: 961px) { .scroll-cue { display: none; } }

/* Stacked layout: copy, then the photo filling the remaining height, then the fence */
@media (max-width: 960px) {
  .hero { justify-content: flex-start; --fence-zone: clamp(96px, min(26vw, 15svh), 140px); }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; }
  .hero-copy { padding-bottom: clamp(16px, 3svh, 28px); }
  .hero-copy h1 { font-size: clamp(1.75rem, min(8.4vw, 5.4svh), 3.4rem); }
  .hero-copy .lead { font-size: 1rem; }
  .hero .btn-row .btn { padding: 0 18px; flex: 1 1 auto; }
  .hero-media { flex: 1 1 auto; display: flex; flex-direction: column; }
  .hero-frame { flex: 1 1 auto; height: auto; min-height: 104px; max-height: 460px; }
  .hero-tag { left: 12px; bottom: 12px; }
  .scroll-cue { display: none; }
}
@media (max-width: 960px) and (max-height: 700px) { .hero-tag { display: none; } }
@media (max-width: 400px) { .hero .btn-row { gap: 8px; } .hero .btn-row .btn { padding: 0 12px; font-size: .9rem; gap: 8px; } }

/* Hero load-in choreography */
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > span { display: inline-block; transform: translateY(105%); }
.is-loaded .split-line > span { transform: none; transition: transform 1100ms var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 110ms); }
.hero-fade { opacity: 0; transform: translateY(18px); }
.is-loaded .hero-fade { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(500ms + var(--i, 0) * 120ms); }
.hero-frame { clip-path: inset(100% 0 0 0); }
.hero-frame img { transform: scale(1.18); }
.is-loaded .hero-frame { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-out) 250ms; }
.is-loaded .hero-frame img { transform: scale(1); transition: transform 2200ms var(--ease-out) 250ms; }
.hero-tag { opacity: 0; transform: translateY(16px); }
.is-loaded .hero-tag { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 1300ms, transform 800ms var(--ease-out) 1300ms; }

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--stone); overflow: hidden; padding-block: clamp(18px, 2.4vw, 28px); background: var(--paper);
  /* soft edges: words drift in and out of view instead of being chopped at the screen edge */
  -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; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item {
  display: inline-flex; align-items: center; gap: clamp(22px, 3vw, 44px); padding-right: clamp(22px, 3vw, 44px);
  font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 2.2rem); white-space: nowrap; color: var(--ink);
}
.marquee-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--ink-2); }

/* ---------- Ring motif (from the paddock gates) ---------- */
.ring { width: 22px; height: 22px; color: var(--oxide); }
.ring circle { fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
/* Image reveal: a curtain in the section colour lifts off the photo. (A clip-path on the frame
   would hide the image from the browser's lazy-loader, so the photo would never load.) */
[data-reveal="image"] { opacity: 1; transform: none; position: relative; }
[data-reveal="image"]::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--reveal-bg, var(--linen)); transform-origin: bottom; pointer-events: none; }
[data-reveal="image"] img { transform: scale(1.14); }
[data-reveal="image"].is-in::after { transform: scaleY(0); transition: transform 1300ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal="image"].is-in img { transform: scale(1); transition: transform 1800ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: left; }
[data-reveal="line"].is-in { transform: scaleX(1); transition: transform 1400ms var(--ease-out); }
.no-js [data-reveal], .no-js .hero-fade, .no-js .hero-frame, .no-js .hero-tag, .no-js .split-line > span { opacity: 1; transform: none; clip-path: none; }
.no-js [data-reveal="image"]::after { display: none; }
.no-js .hero-frame img, .no-js [data-reveal="image"] img { transform: none; }

/* ---------- Intro / about ---------- */
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2.4vw, 32px); }
.intro-grid .statement { grid-column: 1 / span 8; }
.intro-grid .intro-side { grid-column: 9 / span 4; align-self: end; color: var(--ink-2); }
.intro-side .link-arrow { margin-top: 8px; }
@media (max-width: 960px) { .intro-grid .statement, .intro-grid .intro-side { grid-column: 1 / -1; } }

/* ---------- Section heads ---------- */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { max-width: 15em; }
.section-head p { max-width: 30em; margin: 0; color: var(--ink-2); }

/* ---------- Services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--stone-2); }
.service-card {
  position: relative; padding: 36px 28px 40px 0; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 16px; min-height: 340px;
}
.service-card + .service-card { padding-left: 28px; border-left: 1px solid var(--stone); }
.service-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--oxide);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out);
}
.service-card:hover::before, .service-card:focus-visible::before { transform: scaleX(1); }
.service-card .num { font-family: var(--serif); font-size: .9rem; color: var(--ink-3); letter-spacing: .1em; }
.service-card .icon { width: 56px; height: 56px; color: var(--ink); transition: color var(--dur-2), transform 600ms var(--ease-out); }
.service-card:hover .icon { color: var(--oxide); transform: translateY(-4px); }
.service-card .icon * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-card p { color: var(--ink-2); margin: 0; flex: 1; }
.service-card .link-arrow { align-self: flex-start; }
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:nth-child(3) { padding-left: 0; border-left: 0; }
  .service-card:nth-child(n+3) { border-top: 1px solid var(--stone); }
}
@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card + .service-card { padding: 28px 0 32px; border-left: 0; min-height: 0; }
  .service-card + .service-card { border-top: 1px solid var(--stone); }
}

/* ---------- Work cards (home) ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.work-card { text-decoration: none; color: inherit; display: block; }
.work-card .media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--stone); position: relative; }
.work-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out), filter 600ms; }
.work-card:hover .media img { transform: scale(1.06); }
.work-card .media .view {
  position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); color: var(--ink); display: grid; place-items: center;
  transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform 500ms var(--ease-out), opacity 300ms;
}
.work-card:hover .media .view, .work-card:focus-visible .media .view { transform: none; opacity: 1; }
.work-card .meta { display: flex; gap: 16px; align-items: baseline; margin-top: 20px; }
.work-card .meta .num { font-family: var(--serif); color: var(--oxide); font-size: 1rem; }
.work-card h3 { transition: color var(--dur-2); }
.work-card:hover h3 { color: var(--oxide); }
.work-card p { color: var(--ink-2); margin: 8px 0 0 calc(1ch + 24px); font-size: .98rem; }
@media (max-width: 960px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card .media { aspect-ratio: 4 / 3; }
}

/* ---------- Process ---------- */
.process { position: relative; }
.process-line { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--stone-2); }
.process-line span { position: absolute; inset: 0; background: var(--oxide); transform-origin: left; transform: scaleX(0); }
.process ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); position: relative; }
.process li .step {
  width: 56px; height: 56px; border-radius: 50%; background: var(--linen); border: 1.5px solid var(--oxide); color: var(--oxide);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; margin-bottom: 28px;
}
.process li h3 { margin-bottom: 10px; }
.process li p { color: var(--ink-2); margin: 0; }
@media (max-width: 960px) {
  .process ol { grid-template-columns: 1fr; gap: 36px; }
  .process-line { left: 27px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process-line span { transform-origin: top; transform: scaleY(0); }
  .process li { display: grid; grid-template-columns: 56px 1fr; gap: 0 24px; }
  .process li .step { margin: 0; grid-row: span 2; }
}

/* ---------- Benefits split ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2.4vw, 32px); align-items: center; }
.split .split-media { grid-column: 1 / span 6; }
.split .split-body { grid-column: 8 / span 5; }
.split--flip .split-media { grid-column: 7 / span 6; order: 2; }
.split--flip .split-body { grid-column: 1 / span 5; }
.split-media .frame { overflow: hidden; border-radius: var(--radius); background: var(--stone); position: relative; }
.split-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.split-media .frame.tall { aspect-ratio: 4 / 5; }
.split-media .frame.wide { aspect-ratio: 4 / 3; }
.split-body h2 { margin-bottom: 24px; }
@media (max-width: 960px) {
  .split .split-media, .split .split-body, .split--flip .split-media, .split--flip .split-body { grid-column: 1 / -1; order: 0; }
}

.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--stone); }
.ticks li:last-child { border-bottom: 1px solid var(--stone); }
.ticks li .ring { margin-top: 3px; }
.ticks li strong { display: block; font-weight: 600; margin-bottom: 2px; }
.ticks li span { color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--stone-2); }
.faq details:last-child { border-bottom: 1px solid var(--stone-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-weight: 600; font-size: 1.12rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 28px; height: 28px; flex: none; position: relative; border: 1px solid var(--stone-2); border-radius: 50%; transition: transform 500ms var(--ease-out), background-color var(--dur-2), border-color var(--dur-2); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 500ms var(--ease-out); }
.faq details[open] summary .plus { transform: rotate(180deg); background: var(--oxide); border-color: var(--oxide); color: #fff; }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover { color: var(--oxide); }
.faq details::details-content { height: 0; overflow: clip; transition: height 500ms var(--ease-out), content-visibility 500ms allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq .answer { padding: 0 56px 28px 0; color: var(--ink-2); }
.faq .answer p:last-child { margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--sage); position: relative; overflow: hidden; }
.cta-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.4vw, 32px); align-items: end; position: relative; z-index: 1; }
.cta-inner .cta-copy { grid-column: 1 / span 7; }
.cta-inner .cta-copy h2 { margin-bottom: 18px; }
.cta-inner .cta-copy p { color: var(--ink-2); max-width: 32em; margin: 0; }
.cta-inner .cta-actions { grid-column: 8 / span 5; justify-self: end; display: grid; gap: 12px; min-width: min(100%, 320px); }
.cta-band .ring-deco { position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; color: rgba(31,42,36,.08); pointer-events: none; }
.cta-band .ring-deco circle { fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 960px) {
  .cta-inner .cta-copy, .cta-inner .cta-actions { grid-column: 1 / -1; justify-self: stretch; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 14em; margin-bottom: 28px; font-size: clamp(2.25rem, 5vw, 4.25rem); }
.page-hero .lead { margin: 0; }
.crumbs { display: flex; gap: 10px; font-size: .88rem; color: var(--ink-3); margin-bottom: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--oxide); }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; list-style: none; padding: 0; }
.jump a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--stone-2); border-radius: 999px; text-decoration: none; font-weight: 500;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.jump a:hover, .jump a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.jump a .n { font-family: var(--serif); color: var(--oxide); font-size: .85rem; }
.jump a:hover .n { color: #E2B394; }

/* ---------- Services detail ---------- */
.service-detail { border-top: 1px solid var(--stone-2); }
.service-detail .num-big { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--oxide); display: block; margin-bottom: 16px; }
.spec { margin: 28px 0 32px; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--stone); }
.spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--stone); }
.spec dt { font-weight: 600; font-size: .92rem; letter-spacing: .02em; }
.spec dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .spec div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Our work: jobs ---------- */
.job { border-top: 1px solid var(--stone-2); }
.job-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.4vw, 32px); margin-bottom: clamp(40px, 5vw, 64px); }
.job-head .job-title { grid-column: 1 / span 7; }
.job-head .job-title .num-big { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--oxide); display: block; margin-bottom: 20px; }
.job-head .job-title h2 { margin-bottom: 24px; }
.job-head .job-title p { color: var(--ink-2); max-width: 36em; }
.job-head .job-facts { grid-column: 9 / span 4; align-self: end; }
.job-facts dl { margin: 0; border-top: 1px solid var(--stone); }
.job-facts dl div { padding: 14px 0; border-bottom: 1px solid var(--stone); display: grid; gap: 2px; }
.job-facts dt { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.job-facts dd { margin: 0; font-weight: 500; }
@media (max-width: 960px) { .job-head .job-title, .job-head .job-facts { grid-column: 1 / -1; } }

.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); grid-auto-flow: dense; }
.g-item {
  position: relative; padding: 0; border: 0; background: var(--stone); border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  grid-column: span 4; aspect-ratio: 4 / 5;
}
/* Spans are paired so every row lines up: 3-col items at 3:4 match a 6-col item at 3:2 */
.g-item.feature { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
.g-item.half { grid-column: span 3; aspect-ratio: 3 / 4; }
.g-item.wide6 { grid-column: span 6; aspect-ratio: 3 / 2; }
.g-item.wide8 { grid-column: span 8; aspect-ratio: 4 / 3; }
.g-item.tall4 { grid-column: span 4; aspect-ratio: auto; } /* takes its height from the wide photo beside it */
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.g-item:hover img { transform: scale(1.05); }
.g-item .zoom {
  position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251,250,247,.92); color: var(--ink); display: grid; place-items: center;
  opacity: 0; transform: scale(.7); transition: opacity 300ms, transform 500ms var(--ease-out);
}
.g-item:hover .zoom, .g-item:focus-visible .zoom { opacity: 1; transform: none; }
.g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font-size: .88rem; text-align: left; background: linear-gradient(transparent, rgba(22,28,24,.7)); opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-item, .g-item.half { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; }
  .g-item.feature, .g-item.tall4 { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 4.4; }
  .g-item.wide6, .g-item.wide8, .g-item.m-wide { grid-column: span 2; aspect-ratio: 4 / 3; }
  .g-item figcaption { opacity: 1; transform: none; font-size: .8rem; }
  .g-item .zoom { display: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: #111612; color: var(--mist);
}
.lightbox::backdrop { background: rgba(17, 22, 18, .9); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; animation: lb-in 360ms var(--ease-out); }
.lightbox.is-closing { animation: lb-out 220ms var(--ease-in-out) forwards; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-out { to { opacity: 0; } }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); }
.lb-count { font-family: var(--serif); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(8px, 6vw, 96px); }
.lb-stage img { max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 2px; animation: lb-img 520ms var(--ease-out); }
@keyframes lb-img { from { opacity: 0; transform: scale(.96); } }
.lb-caption { padding: 16px var(--gutter) 24px; text-align: center; color: var(--mist-2); font-size: .95rem; min-height: 3.2em; }
.lb-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(233,230,222,.3); background: rgba(22,28,24,.6);
  color: var(--mist); cursor: pointer; display: grid; place-items: center; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.lb-btn:hover { background: var(--oxide); border-color: var(--oxide); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb-prev { left: clamp(8px, 2vw, 28px); }
.lb-next { right: clamp(8px, 2vw, 28px); }
.lb-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px clamp(16px, 2.4vw, 32px); align-items: start; }
.contact-grid .form-wrap { grid-column: 1 / span 7; }
.contact-grid .contact-aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 960px) {
  .contact-grid .form-wrap, .contact-grid .contact-aside { grid-column: 1 / -1; position: static; }
}
.form { display: grid; gap: 22px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--oxide); margin-left: 2px; }
.field .hint { font-size: .88rem; color: var(--ink-3); margin: -2px 0 0; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--stone-2); border-radius: 2px;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--oxide); box-shadow: 0 0 0 3px rgba(138,75,42,.16); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field .error { color: var(--danger); font-size: .9rem; display: none; align-items: center; gap: 8px; margin: 0; }
.field.has-error .error { display: flex; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--stone-2); background: var(--paper); font-size: .95rem; font-weight: 500;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.chip span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background-color var(--dur-2), border-color var(--dur-2); }
.chip input:hover + span { border-color: var(--ink-3); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:checked + span::before { background: var(--oxide); border-color: var(--oxide); }
.chip input:focus-visible + span { outline: 2px solid var(--oxide); outline-offset: 2px; }
.form .consent { font-size: .9rem; color: var(--ink-3); margin: 0; }
.form .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form .btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.form .btn .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.form .btn[aria-busy="true"] .spinner { display: block; }
.form .btn[aria-busy="true"] .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { padding: 18px 20px; border-radius: 2px; display: none; gap: 12px; align-items: start; }
.form-status.is-visible { display: flex; }
.form-status.ok { background: #E3EDE2; color: var(--success); }
.form-status.err { background: #F4E1DC; color: var(--danger); }
.form-status.info { background: var(--oxide-soft); color: var(--oxide-deep); }
.form-status p { margin: 0; color: var(--ink); }
.form-status a { font-weight: 600; }
.hp { position: absolute; left: -9999px; }
/* Long email addresses wrap instead of overflowing narrow columns */
.form-status p, .contact-list a, .site-footer a, .menu-foot p { overflow-wrap: anywhere; }

.contact-card { background: var(--paper); border: 1px solid var(--stone); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.contact-card h2 { font-size: 1.6rem; margin-bottom: 20px; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--stone); }
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list svg { width: 22px; height: 22px; stroke: var(--oxide); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.contact-list .label { display: block; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--oxide); text-decoration: underline; }
.contact-list address { font-style: normal; }
.tel-big { font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.6rem; margin: 48px 0 16px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--mist-2); padding-top: clamp(64px, 8vw, 110px); position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 64px; }
.site-footer .brand { color: var(--paper); align-items: flex-start; }
.site-footer .brand-word { font-size: 2rem; }
.site-footer .footer-grid p { margin: 20px 0 0; max-width: 24em; font-size: .95rem; }
.site-footer h2 { font-family: var(--sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); font-weight: 600; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.site-footer a { text-decoration: none; color: var(--mist); display: inline-flex; align-items: center; min-height: 36px; transition: color var(--dur-2); }
.site-footer a:hover { color: #E2B394; }
.site-footer address { font-style: normal; font-size: .95rem; line-height: 1.7; }
.footer-base { border-top: 1px solid rgba(233,230,222,.12); padding-block: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; }
.footer-base a { min-height: 0; color: var(--mist-2); }
.footer-word {
  font-family: var(--serif); font-weight: 600; letter-spacing: .2em; line-height: .8;
  font-size: clamp(4rem, 17vw, 15rem); color: transparent; -webkit-text-stroke: 1px rgba(233,230,222,.14);
  white-space: nowrap; margin: 0 0 -.08em; text-align: center; user-select: none; pointer-events: none;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Deliberate choice (Oct 2026): every animation plays for every visitor, including those whose
   OS asks for reduced motion, so there is intentionally no prefers-reduced-motion block here. */