/* ==========================================================================
   LW Services
   Swiss Design system: strict grid, bold grotesk headlines, flat colour,
   square corners, rules as structure. No gradients, no glass, no blobs.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third party font CDN) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-latin-variable.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink:        #12141a;
  --ink-soft:   #2b2f39;
  --paper:      #f2f0eb;
  --paper-2:    #e7e4dc;
  --white:      #ffffff;
  --blue:       #1b4db1;
  --blue-deep:  #12367f;
  --timber:     #b86a2e;
  --grey:       #666c77;

  --head: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Lora', Georgia, 'Times New Roman', serif;

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 6.5rem;  --s8: 9rem;

  --rule: 1px solid var(--ink);
  --rule-soft: 1px solid rgba(18,20,26,.14);
  --wrap: 1280px;
  --head-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .22vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; font-family: var(--head); font-weight: 700;
  transition: top .18s ease;
}
.skip-link:focus { top: var(--s2); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.2rem); text-transform: uppercase; }
.h-lg { font-size: clamp(2.1rem, 1.4rem + 3.1vw, 4rem); text-transform: uppercase; }
.h-md { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); }
.h-sm { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); letter-spacing: -.02em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.5; color: var(--ink-soft); }
.muted { color: var(--grey); }

/* Coverage note: makes clear the area list is not a hard boundary */
.reach-note {
  margin-top: var(--s4);
  padding: var(--s3);
  border-left: 3px solid var(--timber);
  background: var(--white);
  font-size: .95rem; max-width: 74ch;
}
.section-alt .reach-note { background: var(--paper); }
.reach-note a { color: var(--blue); font-weight: 500; }
.reach-note a:hover { color: var(--timber); }

/* Swiss section marker: 01 / LABEL */
.marker {
  display: flex; align-items: baseline; gap: .75rem;
  font-family: var(--head); font-weight: 700;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
  padding-bottom: .75rem; margin-bottom: var(--s4);
  border-bottom: var(--rule);
}
.marker .num { color: var(--blue); font-variant-numeric: tabular-nums; }
.marker.on-ink { color: rgba(242,240,235,.6); border-bottom-color: rgba(242,240,235,.3); }
.marker.on-ink .num { color: var(--timber); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 2rem); } }

.section { padding-block: var(--s7); }
.section-tight { padding-block: var(--s6); }
.section-ink { background: var(--ink); color: var(--paper); }
.section-ink p { color: rgba(242,240,235,.76); }
.section-alt { background: var(--paper-2); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--head); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 1.05rem 1.9rem; border-radius: 0;
  border: 2px solid var(--btn-bg);
  position: relative; overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { background: transparent; color: var(--btn-bg); }
.btn-accent { --btn-bg: var(--blue); --btn-fg: var(--white); }
.btn-timber { --btn-bg: var(--timber); --btn-fg: var(--white); }
.btn-sm { padding: .72rem 1.15rem; font-size: .72rem; }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.section-ink .btn-ghost { --btn-fg: var(--paper); border-color: rgba(242,240,235,.55); }
.section-ink .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Scroll progress rail ---------- */
.scroll-rail {
  /* Inside the sticky header, pinned to its lower edge, so the bar reads as
     belonging under the nav rather than floating over it. */
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 3px; z-index: 1;
  background: transparent; pointer-events: none;
}
.scroll-rail-fill {
  display: block; height: 100%; width: 100%;
  background: var(--blue); transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 150;
  /* anchor for the scroll rail */
  background: var(--paper);
  border-bottom: var(--rule);
  transition: box-shadow .2s ease;
}
.site-header[data-condensed] { box-shadow: 0 1px 0 rgba(18,20,26,.15); }
.header-inner {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--head-h);
  transition: min-height .22s ease;
}
.site-header[data-condensed] .header-inner { min-height: 60px; }
.brand { flex-shrink: 0; display: block; }
.brand-mark { height: 46px; width: auto; transition: height .22s ease; }
.site-header[data-condensed] .brand-mark { height: 36px; }

.nav { margin-inline-start: auto; }
.nav-list { display: flex; gap: var(--s4); }
.nav-list a {
  font-family: var(--head); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  padding-block: .35rem; position: relative; display: block;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--blue); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .22s ease;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--s2); }
.header-phone {
  font-family: var(--head); font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em; white-space: nowrap;
  border-bottom: 2px solid var(--timber);
}
.header-phone:hover { color: var(--timber); }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 9px; }
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--ink); transition: transform .22s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0;
    background: var(--paper); border-bottom: var(--rule);
    padding: var(--s3) 1.25rem var(--s4);
    display: none;
  }
  .nav[data-open] { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { font-size: 1.15rem; padding-block: .95rem; border-bottom: var(--rule-soft); }
  .nav-list a::after { display: none; }
}

/* ---------- Hero (signature moment) ---------- */
.hero {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(var(--s6), 9vw, var(--s8));
  position: relative; overflow: hidden;
  isolation: isolate;
}
/* Photograph of real work sits behind the type. Two layers: the image itself,
   then a weighted scrim so the headline keeps AA contrast at every viewport. */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .52;
  will-change: transform;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Lighter than before so the photograph reads, but still weighted left where
     the headline sits. Worst case measured contrast on the facts column is
     about 5:1 against --paper, which clears AA for body text. */
  background:
    linear-gradient(to right, rgba(18,20,26,.90) 0%, rgba(18,20,26,.74) 45%, rgba(18,20,26,.64) 100%),
    linear-gradient(to top, rgba(18,20,26,.80) 0%, rgba(18,20,26,.10) 60%);
}
@media (max-width: 900px) {
  .hero-bg { opacity: .40; }
  .hero::before { background: linear-gradient(to top, rgba(18,20,26,.90) 0%, rgba(18,20,26,.70) 100%); }
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items: end; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s4); } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--head); font-weight: 700;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(242,240,235,.35);
  padding: .45rem .85rem; margin-bottom: var(--s3);
}
.hero-eyebrow .dot { width: 7px; height: 7px; background: var(--timber); }

.hero h1 { color: var(--paper); }
/* each headline line is its own overflow-clipped row so the mask reveal reads cleanly */
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: block; }
.hero-line .accent { color: var(--timber); }

.hero-sub { margin-top: var(--s3); max-width: 46ch; color: rgba(242,240,235,.78); }
.hero-actions { margin-top: var(--s4); }

.hero-facts { display: grid; gap: 0; border-top: 1px solid rgba(242,240,235,.38); }
.hero-fact { padding-block: 1.35rem; border-bottom: 1px solid rgba(242,240,235,.22); display: flex; gap: var(--s3); align-items: baseline; }
.hero-fact dt {
  font-family: var(--head); font-weight: 700; font-size: .78rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--timber);
  min-width: 9.5ch; flex-shrink: 0;
}
.hero-fact dd { font-size: 1.12rem; line-height: 1.45; color: #f2f0eb; }

/* ---------- Strip of service words under hero ---------- */
.strip {
  background: var(--blue); color: var(--white); border-block: var(--rule);
  overflow: hidden;
}
/* Marquee, same technique as the reel: the list is rendered twice and the
   track animates to -50%, which is exactly one set wide, so the loop is
   seamless. Pure CSS so it always runs. */
.strip-track {
  display: flex; width: max-content;
  padding-block: 1.1rem;
  animation: strip-scroll 46s linear infinite;
  will-change: transform;
}
/* Six copies, moved by exactly one of them. Two copies was not enough: six
   short service names is roughly 1200px, so on any normal monitor the band ran
   out of content before the loop point and visibly restarted. Deliberately no
   hover pause here, that behaviour belongs to the work reel only. */
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-16.666667%); }
}
.strip-set { display: flex; align-items: center; gap: var(--s5); padding-right: var(--s5); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip-track { animation: none !important; }
}
.strip-item {
  font-family: var(--head); font-weight: 700; font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .65rem;
}
.strip-item::before { content: ""; width: 6px; height: 6px; background: var(--white); flex-shrink: 0; }

/* ---------- Section head (asymmetric Swiss) ---------- */
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; margin-bottom: var(--s5); }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s4); } }
.sec-head .lede { max-width: 52ch; }

/* ---------- Services index ---------- */
.svc-list { border-top: var(--rule); }
.svc-row {
  cursor: pointer;
  display: grid; grid-template-columns: 4.5rem 1fr 1.15fr auto;
  gap: var(--s3); align-items: center;
  padding-block: var(--s3);
  border-bottom: var(--rule-soft);
  position: relative;
}
.svc-row:hover { border-bottom-color: var(--ink); }
.svc-num { font-family: var(--head); font-weight: 800; font-size: .95rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.svc-row h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); text-transform: uppercase; }
.svc-row p { font-size: .95rem; color: var(--grey); max-width: 46ch; }
.svc-go {
  font-family: var(--head); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.svc-go .arrow { display: inline-block; }
.svc-go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 3rem 1fr; gap: .5rem var(--s2); padding-block: var(--s3); }
  .svc-row p { grid-column: 2; }
  .svc-go { grid-column: 2; }
}

/* ---------- Work gallery ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s2); }
.work-item { position: relative; overflow: hidden; background: var(--paper-2); grid-column: span 4; }
.work-item.is-feature { grid-column: span 6; }
.work-item.is-wide { grid-column: span 8; }
.work-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; will-change: transform; }
.work-item.is-tall img { aspect-ratio: 3 / 4; }
.work-cap {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2);
  padding: 1.5rem 1.15rem .9rem;
  background: linear-gradient(to top, rgba(18,20,26,.92), rgba(18,20,26,0));
  color: var(--paper);
}
.work-cap .t { font-family: var(--head); font-weight: 700; font-size: .95rem; line-height: 1.15; }
.work-cap .c {
  font-family: var(--head); font-weight: 700; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--timber);
  display: block; margin-bottom: .2rem;
}
@media (max-width: 900px) {
  .work-item, .work-item.is-feature, .work-item.is-wide { grid-column: span 6; }
}
@media (max-width: 560px) {
  .work-item, .work-item.is-feature, .work-item.is-wide { grid-column: span 12; }
}


/* ---------- Work carousel ----------
   Native scroll snap does the work, so it swipes on touch and scrolls with a
   trackpad even if JS never loads. Motion only animates the button jumps. */
/* ---------- Work reel ----------
   Full bleed band of photographs that scrolls on its own, forever.

   Pure CSS keyframes. There is deliberately no JavaScript here: an earlier
   version drove this from JS and the whole thing died silently whenever the
   module failed to load. A CSS animation cannot fail to start.

   The seam: the track holds the photo set twice and animates to
   translateX(-50%), which is exactly one set's width, so the final frame is
   pixel identical to the first. --reel-duration is set per instance in the
   markup from the item count, so every reel moves at the same apparent speed.
   ---------------------------------------------------------------- */
.reel {
  --reel-w: clamp(250px, 21vw, 330px);
  --reel-h: clamp(230px, 24vw, 340px);
  --reel-gap: 1rem;
  --reel-push: 20px;

  width: 100%;
  overflow: hidden;
  /* Vertical room so a scaled up photo is not clipped by the overflow box */
  padding-block: 2.75rem;
}

.reel-track {
  display: flex;
  /* Spacing is a per item margin, NOT flex gap. With `gap`, a track holding two
     sets is 2N*W + (2N-1)*G wide, so -50% lands half a gap short of the loop
     point and the seam visibly jumps every cycle. With margin-right the track
     is exactly 2N*(W+G), so -50% is precisely one set. */
  width: max-content;
  animation: reel-2 var(--reel-duration, 80s) linear infinite;
  will-change: transform;
}
/* One keyframe set per copy count. The track is animated by exactly one set,
   which is 100%/copies of the track, so the loop point is pixel identical to
   the start. Written out literally rather than with a var() inside the
   keyframe, because this has to work and not be clever. */
@keyframes reel-2 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reel-3 { from { transform: translateX(0); } to { transform: translateX(-33.333333%); } }
@keyframes reel-4 { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes reel-5 { from { transform: translateX(0); } to { transform: translateX(-20%); } }
@keyframes reel-6 { from { transform: translateX(0); } to { transform: translateX(-16.666667%); } }
.reel[data-copies="3"] .reel-track { animation-name: reel-3; }
.reel[data-copies="4"] .reel-track { animation-name: reel-4; }
.reel[data-copies="5"] .reel-track { animation-name: reel-5; }
.reel[data-copies="6"] .reel-track { animation-name: reel-6; }

/* Hovering anywhere on the band stops it, so the photo under the pointer is
   not a moving target. */
.reel:hover .reel-track,
.reel:focus-within .reel-track { animation-play-state: paused; }

.reel-item {
  flex: 0 0 auto;
  width: var(--reel-w);
  margin-right: var(--reel-gap);
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  transform-origin: center center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
}
.reel-item img {
  width: 100%; height: var(--reel-h);
  object-fit: cover; display: block;
}

.reel-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .95rem .8rem;
  background: linear-gradient(to top, rgba(18,20,26,.92), rgba(18,20,26,0));
  color: var(--paper);
}
.reel-cap .c {
  display: block;
  font-family: var(--head); font-weight: 700; font-size: .6rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--timber);
  margin-bottom: .15rem;
}
.reel-cap .t { font-family: var(--head); font-weight: 700; font-size: .92rem; line-height: 1.15; }

/* Hover: the photo under the pointer grows and nudges its neighbours aside.
   This is done with transform only, never width. Changing widths would change
   the track width, which would move the -50% target and break the loop. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reel-track:hover .reel-item:hover {
    transform: scale(1.17);
    z-index: 3;
  }
  .reel-track:hover .reel-item:hover + .reel-item {
    transform: translateX(var(--reel-push));
  }
  /* :has lets us push the item before the hovered one the other way */
  .reel-track:hover .reel-item:has(+ .reel-item:hover) {
    transform: translateX(calc(var(--reel-push) * -1));
  }
  .reel-track:hover .reel-item:not(:hover) {
    filter: brightness(.58) saturate(.85);
  }
}

/* No motion: stop the animation and let it be scrolled by hand instead */
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; }
  .reel-track { animation: none; }
}

@media (max-width: 560px) {
  .reel { --reel-w: 68vw; --reel-h: 62vw; padding-block: 1.75rem; }
}

/* ---------- Cards / area grid ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--s2); }
.card {
  cursor: pointer;
  background: var(--white); border: var(--rule); padding: var(--s3);
  display: flex; flex-direction: column; gap: .6rem;
  position: relative;
}
.card h3 { font-size: 1.2rem; text-transform: uppercase; }
.card p { font-size: .92rem; color: var(--grey); }
.card .pc {
  font-family: var(--head); font-weight: 800; font-size: .7rem;
  letter-spacing: .14em; color: var(--blue);
}
.card-go { margin-top: auto; padding-top: var(--s2); font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.card-go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover { border-color: var(--blue); }

/* ---------- Split content ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.split-wide { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; gap: var(--s4); } }
.split img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---------- Tick list ---------- */
.ticks { display: grid; gap: .55rem; }
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .97rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: 10px; height: 10px;
  background: var(--blue);
}
.ticks li strong { margin-right: .3rem; }
.section-ink .ticks li::before { background: var(--timber); }
.ticks-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .55rem var(--s4); }

/* ---------- Problem blocks ---------- */
.prob { border-top: var(--rule); }
.prob-item { padding-block: var(--s3); border-bottom: var(--rule-soft); display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s3); }
.prob-item h3 { font-size: 1.12rem; }
.prob-item p { color: var(--grey); font-size: .95rem; }
@media (max-width: 760px) { .prob-item { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- FAQ ---------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: var(--s3);
  display: flex; gap: var(--s2); align-items: flex-start; justify-content: space-between;
  font-family: var(--head); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: .3rem;
  background: var(--blue);
  clip-path: polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding-bottom: var(--s3); max-width: 68ch; color: var(--grey); }

/* ---------- Form ---------- */
.form-panel { background: var(--white); border: var(--rule); padding: clamp(1.5rem, 4vw, var(--s5)); }
.field { margin-bottom: var(--s3); }
.field label {
  display: block; font-family: var(--head); font-weight: 700;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .45rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem;
  background: var(--paper); border: 2px solid transparent; border-bottom: 2px solid var(--ink);
  border-radius: 0; outline: none;
  transition: border-color .16s ease, background .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: var(--white); }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.req { color: var(--blue); }
.hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--grey); margin-top: var(--s2); }

/* ---------- Contact panel ---------- */
.contact-line { display: flex; gap: var(--s2); align-items: baseline; padding-block: 1rem; border-bottom: var(--rule-soft); }
.contact-line dt {
  font-family: var(--head); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
  min-width: 9ch; flex-shrink: 0;
}
.contact-line dd { font-size: 1rem; }
.contact-line a { color: var(--blue); font-weight: 500; }
.contact-line a:hover { color: var(--timber); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--timber); color: var(--white); border-block: var(--rule); }
.cta-inner { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding-block: var(--s5); }
.cta-inner h2 { color: var(--white); max-width: 20ch; }
.cta-band .btn { --btn-bg: var(--ink); --btn-fg: var(--white); }
.cta-band .btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---------- Page header ---------- */
.page-head { background: var(--ink); color: var(--paper); padding-block: var(--s6) var(--s5); }

/* Photographic variant. Same two layer treatment as the home hero: the image,
   then a weighted scrim so the heading keeps AA contrast over any part of it. */
.page-head-photo { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--s7) var(--s6); }
.page-head-photo .page-head-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .48;
}
.page-head-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(18,20,26,.90) 0%, rgba(18,20,26,.74) 55%, rgba(18,20,26,.60) 100%),
    linear-gradient(to top, rgba(18,20,26,.78) 0%, rgba(18,20,26,.12) 65%);
}
@media (max-width: 900px) {
  .page-head-photo .page-head-bg { opacity: .36; }
  .page-head-photo::before { background: linear-gradient(to top, rgba(18,20,26,.90) 0%, rgba(18,20,26,.72) 100%); }
}
.page-head h1 { color: var(--paper); }
.page-head .lede { color: rgba(242,240,235,.78); max-width: 58ch; margin-top: var(--s3); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: rgba(242,240,235,.6); margin-bottom: var(--s3); }
.crumbs a { border-bottom: 1px solid rgba(242,240,235,.35); }
.crumbs a:hover { color: var(--timber); border-bottom-color: var(--timber); }

/* ---------- Prose ---------- */
.prose { max-width: 70ch; }
.prose p + p { margin-top: var(--s2); }
.prose h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); margin-top: var(--s4); margin-bottom: var(--s2); }
.prose h3 { font-size: 1.15rem; margin-top: var(--s3); margin-bottom: .5rem; }
.prose ul { margin: var(--s2) 0; display: grid; gap: .5rem; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .58rem; width: 8px; height: 8px; background: var(--blue); }
.prose a:not(.btn) { color: var(--blue); border-bottom: 1px solid currentColor; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(242,240,235,.72); padding-block: var(--s6) var(--s3); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: var(--s4); padding-bottom: var(--s5); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-mark { height: 56px; width: auto; }
.footer-blurb { margin-top: var(--s2); max-width: 34ch; font-size: .92rem; }
.footer-ig { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s3); font-size: .9rem; }
.footer-ig:hover { color: var(--timber); }
.footer-head {
  font-family: var(--head); font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
  padding-bottom: .65rem; margin-bottom: var(--s2);
  border-bottom: 1px solid rgba(242,240,235,.22);
}
.footer-list { display: grid; gap: .55rem; font-size: .92rem; }
.footer-list a:hover { color: var(--timber); }
.footer-plain { color: rgba(242,240,235,.55); }
.footer-contact a { border-bottom: 1px solid rgba(242,240,235,.3); }
.footer-cta { margin-top: var(--s3); }
.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  padding-top: var(--s3); border-top: 1px solid rgba(242,240,235,.18);
  font-size: .8rem; color: rgba(242,240,235,.5);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer-legal a:hover { color: var(--timber); }

/* ---------- Motion initial states ----------
   Only applied when JS is running AND the user has not asked for reduced
   motion, so content is always visible if either is not true. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(20px); }
  .js .hero-line > span { transform: translateY(105%); }
  .js [data-hero-fade] { opacity: 0; }
  /* .hero-bg is deliberately excluded: the backdrop must always render */
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .scroll-rail, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}