/* ==========================================================================
   Excello — design system (fresh build to the 14 October 2026 master guide)
   DM Sans · light-forward editorial surface with intentional dark emphasis.
   Restrained motion only (no scroll film, scrub, GSAP/Lenis/Three.js).
   ========================================================================== */

:root {
  /* Master palette */
  --surface: #EFF0E8;   /* light reading surface */
  --ink:     #293B32;   /* text on light */
  --canvas:  #171D19;   /* dark canvas */
  --olive:   #414733;   /* dark olive emphasis */
  --cream:   #F2EBDD;   /* warm surface */
  --inverse: #F5F2E9;   /* text on dark */
  --terra:   #7A432B;   /* terracotta accent */

  --muted:   #59625c;
  --line:    #cdd2c8;
  --line-dk: #3a4740;
  --panel:   #fafaf6;
  --focus:   #7A432B;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 56px);
  --hdr-h: 66px;
  --sp: clamp(56px, 8vw, 104px);   /* section rhythm */

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t1: 180ms;  /* control feedback */
  --t2: 260ms;
  --reveal: 460ms;

  --r: 4px;     /* small radius, flat system */
  --r-card: 20px;
}

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: #e0c3b1; color: var(--canvas); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--canvas); color: var(--inverse);
  padding: 10px 16px; border-radius: var(--r); transition: top var(--t2) var(--ease); }
.skip:focus { top: 12px; }

/* ----- type ----- */
.kicker { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--terra); }
.kicker::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .55; flex: none; }
.display { font-size: clamp(44px, 8vw, 94px); line-height: .99; letter-spacing: -.035em; font-weight: 600; }
.h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.022em; font-weight: 600; }
.h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.22; font-weight: 600; }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--muted); max-width: 60ch; }

/* ----- header ----- */
/* Fixed + transparent over the hero; surface colour + shadow fade in on scroll. */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.hdr.scrolled { background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(6px); border-bottom-color: var(--line); box-shadow: 0 8px 24px rgba(23,29,25,.05); }
/* On a dark hero the transparent header uses light text until it turns solid. */
body[data-hero="dark"] .hdr:not(.scrolled) .brand,
body[data-hero="dark"] .hdr:not(.scrolled) .nav a,
body[data-hero="dark"] .hdr:not(.scrolled) .burger { color: var(--inverse); }
body[data-hero="dark"] .hdr:not(.scrolled) .brand span { color: color-mix(in srgb, var(--inverse) 72%, transparent); }
body[data-hero="dark"] .hdr:not(.scrolled) .burger { border-color: color-mix(in srgb, var(--inverse) 55%, transparent); }
body[data-hero="dark"] .hdr:not(.scrolled) .hdr__cta { background: var(--inverse); color: var(--canvas); }
.hdr__in { max-width: var(--wrap); margin-inline: auto; padding: 14px var(--gut); display: flex; align-items: center; gap: 28px; }
.brand { font-weight: 700; letter-spacing: .14em; font-size: 15px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.brand b { color: var(--terra); font-weight: 700; }
.brand span { display: block; font-size: 9.5px; letter-spacing: .22em; color: var(--muted); font-weight: 500; margin-top: 2px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { position: relative; font-size: 13.5px; font-weight: 500; padding: 8px 0; color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--terra);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__cta { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; background: var(--canvas);
  color: var(--inverse); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; border-radius: var(--r);
  transition: transform var(--t1) var(--ease), background var(--t2) var(--ease); }
.hdr__cta:hover { background: var(--olive); transform: translateY(-1px); }
.burger { display: none; margin-left: auto; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; font-weight: 600; }

/* ----- mobile menu ----- */
.mnav { position: fixed; inset: 0; z-index: 90; background: var(--surface); padding: 20px var(--gut) 40px;
  display: flex; flex-direction: column; gap: 18px; transform: translateY(-101%); transition: transform var(--reveal) var(--ease); overflow: auto; }
.mnav[data-open="true"] { transform: none; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__links { display: grid; margin-top: 8px; }
.mnav__links a { padding: 15px 0; font-size: 19px; font-weight: 500; border-top: 1px solid var(--line); }
.mnav__links a:last-child { border-bottom: 1px solid var(--line); }
.mnav__act { display: grid; gap: 10px; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .mnav[data-open="true"] .mnav__links a, .mnav[data-open="true"] .mnav__act > * { animation: rise var(--t2) var(--ease) both; }
  .mnav[data-open="true"] .mnav__links a:nth-child(2){animation-delay:40ms}
  .mnav[data-open="true"] .mnav__links a:nth-child(3){animation-delay:70ms}
  .mnav[data-open="true"] .mnav__links a:nth-child(4){animation-delay:100ms}
  .mnav[data-open="true"] .mnav__links a:nth-child(5){animation-delay:130ms}
  .mnav[data-open="true"] .mnav__links a:nth-child(6){animation-delay:160ms}
  .mnav[data-open="true"] .mnav__links a:nth-child(7){animation-delay:190ms}
}

/* ----- buttons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 24px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--inverse); font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em; border-radius: var(--r);
  transition: transform var(--t1) var(--ease), background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t1) var(--ease); }
.btn:hover { background: var(--olive); border-color: var(--olive); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23,29,25,.14); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--inverse); }
.btn--light { background: var(--inverse); color: var(--canvas); border-color: var(--inverse); }
.btn--light:hover { background: var(--cream); border-color: var(--cream); color: var(--canvas); }
.btn--line-light { background: transparent; color: var(--inverse); border-color: color-mix(in srgb, var(--inverse) 55%, transparent); }
.btn--line-light:hover { background: var(--inverse); color: var(--canvas); }
.btn--block { width: 100%; }
.btn .ar { width: 14px; height: 14px; }

.textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--terra); }
.textlink .ar { width: 13px; height: 13px; transition: transform var(--t2) var(--ease); }
.textlink:hover .ar { transform: translateX(4px); }

/* ----- sections ----- */
.sec { padding: var(--sp) 0; }
.sec--light { background: var(--surface); }
.sec--cream { background: var(--cream); }
.sec--olive { background: var(--olive); color: var(--inverse); }
.sec--dark  { background: var(--canvas); color: var(--inverse); }
.sec--olive .lead, .sec--dark .lead { color: #d7ddd7; }
.sec--olive .kicker, .sec--dark .kicker { color: #e6c3ab; }
.sec__head { display: grid; gap: 12px; max-width: 72ch; margin-bottom: clamp(32px, 5vw, 56px); }
.sec__head--row { max-width: none; grid-auto-flow: row; }
@media (min-width: 760px) { .sec__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } }

/* ----- hero ----- */
.hero { background: var(--canvas); color: var(--inverse); padding: calc(var(--hdr-h) + clamp(24px, 5vw, 84px)) 0 clamp(56px, 9vw, 120px); position: relative; overflow: hidden; }
.hero--light { background: var(--surface); color: var(--ink); }
.hero--cream { background: var(--cream); color: var(--ink); }
.hero__in { position: relative; display: grid; gap: 24px; }
.hero p.lead { color: #d7ddd7; }
.hero--light p.lead, .hero--cream p.lead { color: var(--muted); }
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.hero__media { position: absolute; inset: 0; z-index: 0; opacity: .34; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero__in { z-index: 1; }

/* ----- journey ----- */
.journey { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: 8px; }
@media (min-width: 720px) { .journey { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .journey { grid-template-columns: repeat(6, 1fr); } }
.journey__i { background: var(--surface); padding: 20px 18px; min-height: 118px; display: flex; flex-direction: column; gap: 6px; }
.journey__i b { font-size: 14.5px; font-weight: 600; }
.journey__i b::before { content: "0" counter(j); counter-increment: j; color: var(--terra); font-weight: 700; margin-right: 8px; }
.journey { counter-reset: j; }
.journey__i span { font-size: 13px; color: var(--muted); }

/* ----- choices / cards ----- */
.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); } }
.start { align-items: start; }

/* services rows: narrower headline column, vertically centred so a short
   headline sits level with the taller detail column (no big empty block). */
.svc-row { padding: 40px 0; border-top: 1px solid var(--line); align-items: center; }
@media (min-width: 720px) { .svc-row { grid-template-columns: 0.85fr 1.15fr; column-gap: clamp(32px, 5vw, 72px); } }

.choice { display: flex; flex-direction: column; gap: 12px; }
.choice__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--line); }
.choice__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.choice:hover .choice__media img { transform: scale(1.03); }
.choice h3 { font-size: 22px; font-weight: 600; }
.choice p { color: var(--muted); font-size: 15px; }

/* generic bordered card */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px;
  display: flex; flex-direction: column; gap: 10px; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,29,25,.08); }
.card--bare { background: transparent; border: 0; border-top: 2px solid currentColor; border-radius: 0; padding: 16px 0 0; }
.card--bare:hover { transform: none; box-shadow: none; }
.card h3 { font-size: 20px; font-weight: 600; }
.card p { color: var(--muted); font-size: 14.5px; }
.sec--olive .card, .sec--dark .card { background: #1f2a24; border-color: var(--line-dk); }
.sec--olive .card p, .sec--dark .card p { color: #c4ccc6; }

/* ----- project previews ----- */
.projs { display: grid; gap: clamp(26px, 3vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 680px) { .projs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .projs--3 { grid-template-columns: repeat(3,1fr); } }
.proj { display: flex; flex-direction: column; gap: 12px; }
.proj__media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--line); }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 550ms var(--ease); }
.proj:hover .proj__media img { transform: scale(1.03); }
.proj__meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.proj h3 { font-size: 20px; font-weight: 600; }
.proj:hover h3 { color: var(--terra); }
.proj p { font-size: 14px; color: var(--muted); }

/* ----- insights ----- */
.insights { display: grid; gap: clamp(22px, 2.6vw, 36px); grid-template-columns: 1fr; }
@media (min-width: 680px) { .insights { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .insights--3 { grid-template-columns: repeat(3,1fr); } }
.insight { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.insight__media { aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--panel); margin-bottom: 2px; }
.insight__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.insight:hover .insight__media img { transform: scale(1.02); }
.insight:hover h3 { color: var(--terra); }
.article__cover { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--panel); aspect-ratio: 16 / 9; }
.article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* team members (real photos/bios from admin) */
.member { display: flex; flex-direction: column; gap: 10px; }
.member__photo { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member h3 { font-size: 20px; font-weight: 600; }
.member__role { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.member__bio { color: var(--muted); font-size: 15px; line-height: 1.6; }
.insight span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.insight h3 { font-size: 19px; font-weight: 600; line-height: 1.28; }
.insight p { color: var(--muted); font-size: 14.5px; }

/* ----- steps (process) ----- */
.steps { display: grid; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-size: 14px; font-weight: 700; color: var(--terra); letter-spacing: .04em; }
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; max-width: 64ch; }
.sec--olive .step, .sec--dark .step { border-color: var(--line-dk); }
.sec--olive .step p, .sec--dark .step p { color: #c4ccc6; }

/* ----- facts / definition rows ----- */
.facts { display: grid; gap: 18px 28px; grid-template-columns: 1fr; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 15px; }

/* ----- forms ----- */
.form { display: grid; gap: 16px; max-width: 580px; }
.form--wide { max-width: none; }
.row2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field > label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { min-height: 50px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: #fff; color: var(--ink); font: inherit; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline-offset: 1px; }
.field.err input, .field.err select, .field.err textarea { border-color: #a3341f; }
.field__err { display: none; font-size: 12.5px; color: #a3341f; }
.field.err .field__err { display: block; }
.note { font-size: 12.5px; color: var(--muted); }
.msg { font-size: 14px; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r); }
.msg[hidden] { display: none; }
.msg--ok { border-color: #4b8a63; background: #ecf5ef; color: #205433; }
.msg--err { border-color: #a3341f; background: #fbeeea; color: #7a2515; }
/* dark surface fields */
.sec--olive .field input, .sec--olive .field select, .sec--olive .field textarea,
.sec--dark .field input, .sec--dark .field select, .sec--dark .field textarea { background: #1f2a24; color: var(--inverse); border-color: var(--line-dk); }
.sec--olive .field > label, .sec--dark .field > label { color: #c4ccc6; }
.sec--olive fieldset, .sec--dark fieldset { border: 1px solid var(--line-dk); border-radius: var(--r-card); padding: 20px; display: grid; gap: 14px; }
.sec--olive legend, .sec--dark legend { padding: 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c4ccc6; }

/* ----- availability table ----- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
table.units { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
table.units th, table.units td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); }
table.units th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: #f3f4ed; }
table.units tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); }
.pill--available { background: #e9f3ec; color: #205433; border-color: #c0dbca; }
.pill--reserved { background: #fff3e5; color: #7a4a0f; border-color: #e9c99a; }
.pill--sold { background: #efefed; color: #4a4a46; border-color: #d7d7d1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { min-height: 38px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500;
  transition: transform var(--t1) var(--ease), background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--inverse); border-color: var(--ink); }

/* ----- prose (articles / legal) ----- */
.prose { max-width: 70ch; }
/* article pages: centre the reading column so it isn't pinned to the left */
body[data-route="insights"] .prose,
body[data-route="insights"] .hero__in { margin-inline: auto; }
body[data-route="insights"] .article__cover { max-width: 1000px; margin-inline: auto; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin-top: 36px; }
.prose h3 { font-size: 18px; font-weight: 600; margin-top: 26px; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; color: #35433b; }
.prose p { text-align: justify; text-justify: inter-word; hyphens: auto; }
@media (max-width: 560px) { .prose p { hyphens: none; } }
.prose ul { margin-left: 20px; } .prose li { list-style: disc; margin-top: 6px; }
.prose a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose figure { margin: 20px 0; overflow-x: auto; }

/* ----- media band ----- */
.band { aspect-ratio: 16/7; overflow: hidden; border-radius: var(--r-card); background: var(--canvas); border: 1px solid var(--line); }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band--emph img { transition: transform 1200ms var(--ease); }
.band--emph.in img { transform: scale(1.03); }

/* ----- notice ----- */
.notice { border: 1px solid var(--line); border-left: 3px solid var(--terra); background: #f7f6ee; color: var(--ink);
  padding: 14px 16px; border-radius: var(--r); font-size: 13.5px; }

/* ----- breadcrumb ----- */
.crumb { font-size: 12.5px; color: var(--muted); padding-top: 4px; }
.crumb a { color: var(--terra); }

/* ----- footer ----- */
.ft { background: var(--canvas); color: var(--inverse); padding: clamp(56px,8vw,88px) 0 40px; }
.ft__lead { font-size: clamp(24px,3vw,38px); font-weight: 600; letter-spacing: -.015em; max-width: 20ch; }
.ft__p { color: #d7ddd7; max-width: 52ch; margin-top: 12px; }
.ft__form { margin-top: 26px; max-width: 720px; }
.ft__cols { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: #d7ddd7; }
@media (min-width: 720px) { .ft__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.ft__cols h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin-bottom: 12px; }
.ft__cols li { padding: 4px 0; } .ft__cols a:hover { color: var(--inverse); text-decoration: underline; }
.ft__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12px; color: #96a19a; }
.ft .field > label { color: #c4ccc6; }
.ft .field input, .ft .field textarea { background: #1f2a24; color: var(--inverse); border-color: var(--line-dk); }

/* ----- floats + mobile bar ----- */
.floats { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.float { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; box-shadow: 0 8px 22px rgba(23,29,25,.22); transition: transform var(--t2) var(--ease), background var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.float--wa { background: #25d366; color: #0b2d17; }
.float--wa:hover { background: #1fb857; transform: translateY(-2px); }
.float--top { background: var(--ink); visibility: hidden; opacity: 0; }
.float--top:hover { background: var(--olive); }
.mobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  padding: 10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
  background: color-mix(in srgb, var(--surface) 96%, transparent); border-top: 1px solid var(--line); }

/* ----- reveal + motion (restrained; only JS-added below-fold elements hide) ----- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__in > * { animation: rise 560ms var(--ease) both; }
  .hero__in > *:nth-child(1){animation-delay:40ms} .hero__in > *:nth-child(2){animation-delay:110ms}
  .hero__in > *:nth-child(3){animation-delay:180ms} .hero__in > *:nth-child(4){animation-delay:250ms}
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__in > *, .mnav__links a, .mnav__act > * { animation: none !important; }
  .choice__media img, .proj__media img, .band--emph img, .btn, .card, .chip { transition: none !important; }
  .choice:hover .choice__media img, .proj:hover .proj__media img, .band--emph.in img, .card:hover { transform: none !important; }
}

/* ----- page-enter transition (every page slides up from below) ----- */
@media (prefers-reduced-motion: no-preference) {
  #main { animation: page-in 620ms var(--ease) both; }
}
@keyframes page-in { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #main { animation: none !important; } }

/* ----- home preloader (home page only) ----- */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--canvas); color: var(--inverse);
  transition: opacity 520ms var(--ease), visibility 520ms var(--ease);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader__in { display: grid; justify-items: center; gap: 10px; text-align: center; }
.preloader__mark { font-size: clamp(30px, 6vw, 48px); font-weight: 600; letter-spacing: -.02em; }
.preloader__sub { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #c9d0c8; }
.preloader__bar { width: 128px; height: 2px; margin-top: 16px; background: rgba(245,242,233,.18); border-radius: 2px; overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0; background: var(--terra); animation: pl-load 1.1s var(--ease) forwards; }
@keyframes pl-load { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .preloader__in > * { animation: rise 520ms var(--ease) both; }
  .preloader__sub { animation-delay: 90ms; } .preloader__bar { animation-delay: 160ms; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__bar i { animation: none; width: 100%; }
  .preloader__in > * { animation: none !important; }
}

/* ----- responsive header ----- */
@media (max-width: 880px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
  .mobar { display: block; }
  body { padding-bottom: 78px; }
  .floats { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ----- project gallery + lightbox ----- */
.gallery { display: grid; gap: clamp(12px,1.6vw,18px); grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__i { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--panel); }
.gallery__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.gallery__i:hover img, .gallery__i:focus-visible img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gallery__i img { transition: none !important; } .gallery__i:hover img { transform: none !important; } }

.lb { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(17,21,19,.92); }
.lb[data-open="true"] { display: grid; grid-template-rows: auto 1fr; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: var(--inverse); }
.lb__count { font-size: 13px; letter-spacing: .08em; color: #c4ccc6; }
.lb__x { color: var(--inverse); font-size: 15px; font-weight: 600; padding: 8px 12px; border: 1px solid rgba(245,242,233,.4); border-radius: var(--r); }
.lb__stage { position: relative; display: grid; place-items: center; padding: 0 clamp(14px,6vw,80px) 28px; min-height: 0; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; background: rgba(245,242,233,.14); color: var(--inverse); display: grid; place-items: center; font-size: 20px; }
.lb__nav:hover { background: rgba(245,242,233,.26); }
.lb__prev { left: clamp(8px,3vw,28px); } .lb__next { right: clamp(8px,3vw,28px); }

/* ----- full-viewport hero + layered scroll-over (home) -----
   Pure CSS: the hero pins behind, the following sections rise over it as a
   single layer. No scroll library, no scrubbing. Disabled under reduced motion. */
.hero--cover { min-height: 100svh; display: flex; align-items: center; position: sticky; top: 0; z-index: 0; }
.hero--cover > .wrap { width: 100%; }
/* following sections sit above the pinned hero so they scroll over it */
body[data-route="home"] main > section:not(.hero--cover) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero--cover { position: relative; top: auto; }
}

/* ----- hero scroll parallax -----
   The image layer is taller than the viewport so it can travel smoothly as you
   scroll, while the headline eases up and fades as the next section rises over
   it. Scroll-linked transforms are set per-frame in app.js (no transition, so
   it tracks the scroll exactly). Desktop only; static under reduced motion. */
.hero--cover .hero__media { height: 132svh; bottom: auto; opacity: 1; will-change: transform; }
.hero--cover .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,26,22,.80) 0%, rgba(20,26,22,.46) 46%, rgba(20,26,22,.12) 100%),
    linear-gradient(180deg, rgba(20,26,22,.22) 0%, rgba(20,26,22,0) 28%, rgba(20,26,22,.55) 100%);
}
.hero--cover .hero__in { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero__media { height: 100svh; transform: none !important; }
  .hero--cover .hero__in { transform: none !important; opacity: 1 !important; }
}

/* ========================================================================
   Craft refinements — execution polish within the guide's fixed direction.
   (Palette, type family, motion rules unchanged.)
   ======================================================================== */

/* Elevation: ink-tinted, soft, hierarchy-aware (not a flat grey on everything) */
.card { box-shadow: 0 1px 2px rgba(23,29,25,.04);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(23,29,25,.12);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); }
.card--bare, .card--bare:hover { box-shadow: none; }

/* Image framing: slightly tighter media radii + a warm lift on hover */
.proj__media { border-radius: 16px; }
.choice__media { border-radius: 18px; }
.choice:hover .choice__media, .proj:hover .proj__media { box-shadow: 0 18px 40px rgba(23,29,25,.14); }

/* Section heads: a touch more air */
.sec__head { gap: 14px; }

/* Buttons: a hair more presence */
.btn { letter-spacing: .015em; }

/* Prose (articles, legal): terracotta markers, framed tables/figures */
.prose li::marker { color: var(--terra); }
.prose h2 { padding-top: 6px; }
.prose table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.prose th { background: #f3f4ed; font-weight: 700; }
.prose figure { border-radius: 14px; }

/* Journey row: calmer numerals, a little more room */
.journey__i { padding: 22px 20px; }
.journey__i b::before { font-variant-numeric: tabular-nums; margin-right: 10px; }

/* Footer: more air and a confident lead */
.ft { padding-top: clamp(64px, 9vw, 104px); }
.ft__lead { letter-spacing: -.02em; }
.ft__cols { gap: 40px; }

/* Facts rows: quiet, aligned */
.facts dd { color: var(--ink); }
.facts { gap: 20px 32px; }