/* Angies Hernandez — the "survey" system
   Every colour and face traces to a token. Radius is 0 everywhere, on purpose:
   the page is a survey sheet, and survey sheets do not have rounded corners. */

:root {
  /* ground: warm greys and off-white, not pure white */
  --base:      #F5F4F1;
  --base-2:    #EBE9E4;
  --base-3:    #E1DED8;
  --line:      #D2CDC5;
  --line-2:    #BDB7AD;

  /* ink */
  --ink:       #171412;   /* 16.4:1 on --base */
  --muted:     #6A645D;   /* 5.3:1 on --base */

  /* the one accent */
  --accent:      #D63A22;  /* fills and linework; white on it is 4.68:1 */
  --accent-ink:  #FFFFFF;  /* text on accent fills */
  --accent-lift: #B3301B;  /* 5.6:1 on --base, for small accent text */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --wrap: 82rem;
  --hdr-h: 68px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--body);
  font-variation-settings: "wdth" 100;
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

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

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

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 90;
  background: var(--accent); color: var(--accent-ink);
  padding: .7rem 1.1rem; font: 500 .9rem/1 var(--body);
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

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

/* ─── type ──────────────────────────────────────────────────────────────── */

.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .92;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.35rem, 1.5rem + 2.8vw, 3.95rem); }
.d2 { font-size: clamp(2.1rem, 1.1rem + 4.3vw, 4.5rem); }
.d3 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); letter-spacing: -.02em; }

.lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
  margin: 0;
}

/* Mono is reserved for values that are actually data — coordinates, counts,
   prices, distances. It is never decoration. */
.mono {
  font: 400 .75rem/1.4 var(--mono);
  letter-spacing: .01em;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}
.mono--accent { color: var(--accent-lift); }
.mono--note { max-width: 44ch; }

/* ─── buttons ───────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: 0;
  font: 500 .9375rem/1 var(--body);
  text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover  { --btn-bd: var(--ink); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}
.btn--fill { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); }
.btn--fill:hover { --btn-bg: #B32E19; --btn-bd: #B32E19; }
.btn--ghost:hover { --btn-bg: var(--base-2); }
.btn--sm { padding: .65rem 1rem; font-size: .875rem; }

.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  color: var(--btn-fg); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── the canvas, and the scrim that keeps type legible over it ─────────── */

.stage {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.stage canvas { width: 100%; height: 100%; display: block; }
.stage[data-interactive="true"] { pointer-events: auto; }

.stage__grain {
  position: absolute; inset: 0; opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--base) 0%, var(--base) 26%, rgba(245,244,241,.92) 44%, rgba(245,244,241,.35) 62%, rgba(245,244,241,0) 78%);
  opacity: var(--scrim, 1);
  transition: opacity .5s var(--ease);
}

/* Town labels projected out of the scene each frame. */
.pins { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  font: 400 .6875rem/1 var(--mono);
  color: var(--muted); white-space: nowrap;
  opacity: 0; transition: opacity .35s var(--ease), color .25s var(--ease);
  display: flex; align-items: center; gap: .4rem;
}
.pin::before {
  content: ""; width: 5px; height: 5px; background: currentColor;
  transform: rotate(45deg); flex: none;
}
.pin.is-on { opacity: 1; }
.pin.is-hot { color: var(--accent-lift); }

main { position: relative; z-index: 3; }

/* ─── header ────────────────────────────────────────────────────────────── */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: var(--hdr-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hdr.is-stuck {
  background: rgba(245,244,241,.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* The phone drawer is cream. Over the video the header paints its links cream
   too, so an open menu used to be cream on cream and read as blank. While the
   drawer is open the header drops the over-video treatment entirely. */
.hdr.is-nav-open {
  background: rgba(245,244,241,.97);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 1.5rem; width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.hdr__brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }
.hdr__logo { height: 26px; width: auto; opacity: .92; }
.hdr__rule { width: 1px; height: 26px; background: var(--line); }
.hdr__name { font: 500 .9375rem/1.25 var(--body); }
.hdr__name span { display: block; font: 400 .6875rem/1.3 var(--mono); color: var(--muted); }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  font: 400 .875rem/1 var(--body); color: var(--muted);
  text-decoration: none; padding: .4rem 0; position: relative;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.lang { display: flex; border: 1px solid var(--line); }
.lang a {
  padding: .35rem .6rem; font: 400 .6875rem/1 var(--mono);
  color: var(--muted); text-decoration: none; transition: all .2s var(--ease);
}
.lang a[aria-current="page"] { background: var(--ink); color: var(--base); }
.lang a:not([aria-current="page"]):hover { color: var(--ink); }

/* The page must not scroll away underneath an open drawer. */
body.nav-locked { overflow: hidden; }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: none; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 1px; background: var(--ink); margin: 4px auto; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ─── sections ──────────────────────────────────────────────────────────── */

section { position: relative; }
main section[id] { scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.sec { padding-block: clamp(5rem, 11vh, 9rem); }
.sec--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }

.solid { background: var(--base); }
.solid--2 { background: var(--base-2); }

.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 52rem; }

/* hero */
.hero { min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--hdr-h) + 3rem) 4rem; }
.hero__in { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); max-width: 59rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 1.75rem;
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}

.scrollcue { display: flex; align-items: center; gap: .6rem; }
.scrollcue i {
  width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent);
  animation: cue 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* survey / towns */
.survey__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.town {
  display: grid; gap: .3rem; padding: 1.15rem 1.25rem 1.3rem;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  background: rgba(245,244,241,.80); backdrop-filter: blur(3px);
  text-align: left; cursor: pointer; color: inherit;
  font: inherit; position: relative; overflow: hidden;
  transition: background .25s var(--ease);
}
.town::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s var(--ease);
}
.town:hover, .town[aria-current="true"] { background: rgba(225,222,216,.95); }
.town:hover::before, .town[aria-current="true"]::before { transform: scaleY(1); }
.town b { font: 500 1.0625rem/1.25 var(--body); }
.town .mono { font-size: .6875rem; }

/* work */
.work__list { border-top: 1px solid var(--line); }
.work__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.work__n { font: 400 .75rem/1 var(--mono); color: var(--accent-lift); padding-top: .55rem; }
.work__body { display: grid; gap: .9rem; }
.work__body p { margin: 0; color: var(--muted); }
.work__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.work__pts li { display: flex; gap: .7rem; font-size: .9375rem; color: var(--muted); }
.work__pts li::before { content: ""; width: 5px; height: 5px; margin-top: .6rem; background: var(--line); flex: none; }

/* listings */
.feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.feat--nomedia { grid-template-columns: minmax(0, 42rem); }
.feat__media { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.feat__stage { position: relative; aspect-ratio: 4 / 3; background: var(--base-2); border: 1px solid var(--line); overflow: hidden; }
.feat__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat__strip { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.feat__thumb {
  flex: none; width: 5.25rem; aspect-ratio: 4 / 3; border: 1px solid var(--line);
  background: var(--base-2); padding: 0; cursor: pointer; position: relative; overflow: hidden;
}
.feat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.feat__thumb[aria-current="true"] { border-color: var(--accent); }
.feat__thumb span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 .6875rem/1 var(--mono); background: rgba(23,20,18,.62); color: #F5F4F1; }

.feat__info { display: grid; gap: 1.1rem; align-content: start; }
.tag {
  display: inline-flex; align-items: center; gap: .45rem; align-self: start;
  padding: .3rem .6rem; border: 1px solid var(--line);
  font: 400 .6875rem/1 var(--mono); color: var(--muted);
}
.tag::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
.tag[data-status="sold"]::before { background: var(--muted); }
.price { font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--display); font-variation-settings: "wdth" 112; letter-spacing: -.02em; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.specs div { background: var(--base); padding: .8rem .9rem; display: grid; gap: .25rem; }
.specs b { font: 500 1.0625rem/1 var(--body); }

.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.lcard { border: 1px solid var(--line); background: var(--base); display: grid; }
.lcard__img { aspect-ratio: 4 / 3; background: var(--base-2); object-fit: cover; width: 100%; }
.lcard__b { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .5rem; }

.empty { border: 1px dashed var(--line); padding: 2.5rem; text-align: center; color: var(--muted); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(23,20,18,.94); display: grid; place-items: center; padding: var(--gutter); }
.lb[hidden] { display: none; }
.lb__fig { max-width: 100%; max-height: 100%; }
.lb__fig > * { max-width: 100%; max-height: 82svh; object-fit: contain; }
.lb__close { position: absolute; top: 1rem; right: 1rem; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__nav--p { left: 1rem; } .lb__nav--n { right: 1rem; }

/* reviews ── a slider, not a grid. All 37 sit in one horizontal track you
   swipe or drag through. Nothing moves on its own: an auto-advancing carousel
   takes the reading away from the reader, and she asked for it not to. */
.rslide { display: grid; gap: 1rem; }
.rslide__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.rslide__count { margin: 0; font-size: .8125rem; letter-spacing: .06em; color: var(--muted); }
.rslide__nav { display: flex; gap: .5rem; }
.rnav {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--base); color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.rnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.rnav:hover:not([disabled]) { border-color: var(--ink); background: var(--base-2); }
.rnav[disabled] { color: var(--line-2); border-color: var(--line); cursor: default; }

.rtrack {
  display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: .25rem;
}
.rtrack::-webkit-scrollbar { display: none; }
.rtrack:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rtrack.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.rtrack.is-dragging .rev { user-select: none; }
.rtrack > .rev {
  flex: 0 0 clamp(17.5rem, 30vw, 23rem); scroll-snap-align: start;
  /* One 700-word review would otherwise set the height of all 31 cards and
     push a one-line review into 800px of empty space. Clamp the quote and
     pin the byline to the bottom; the full text is one tap away on Google. */
  grid-template-rows: auto 1fr auto; align-content: stretch;
}
.rtrack > .rev .rev__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;
  overflow: hidden;
}
@media (min-width: 60rem) { .rtrack > .rev .rev__text { -webkit-line-clamp: 12; } }
@media (prefers-reduced-motion: reduce) { .rtrack { scroll-behavior: auto; } }

.rev { border: 1px solid var(--line); background: var(--base); padding: 1.35rem 1.4rem; display: grid; gap: .8rem; align-content: start; }
.rev__stars { display: flex; gap: .15rem; color: var(--accent); }
.rev__stars svg { width: 15px; height: 15px; fill: currentColor; }
.rev__stars svg[data-off] { fill: var(--line-2); }
.rev__text { margin: 0; color: var(--ink); }
.rev__by { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .7rem; }
.rev__by b { font: 500 .9375rem/1.3 var(--body); }

/* valuation wizard */
.wiz { border: 1px solid var(--line); background: var(--base); max-width: 40rem; }

/* The wizard sat in a narrow column with a wide empty gutter beside it, so the
   heading and the form share the row instead. */
#value .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
#value .head { margin-bottom: 0; }
#value .wiz { max-width: none; }
.wiz__bar { display: flex; border-bottom: 1px solid var(--line); }
.wiz__bar div { flex: 1; padding: .8rem 1rem; font: 400 .6875rem/1 var(--mono); color: var(--muted); border-right: 1px solid var(--line); }
.wiz__bar div:last-child { border-right: 0; }
.wiz__bar div[aria-current="step"] { color: var(--ink); background: var(--base-2); }
.wiz__step { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.wiz__step[hidden] { display: none; }
.wiz__act { display: flex; gap: .75rem; flex-wrap: wrap; }

.field { display: grid; gap: .4rem; position: relative; }
.field > label { font: 400 .75rem/1 var(--mono); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .9rem; background: var(--base-2);
  border: 1px solid var(--line); border-radius: 0; color: var(--ink);
  font: 400 1rem/1.4 var(--body);
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A837A; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-lift); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent); }
.err { font: 400 .75rem/1.3 var(--mono); color: var(--accent-lift); min-height: 1em; }
.err:empty { display: none; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.sugg {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--base-2); border: 1px solid var(--line); border-top: 0;
  max-height: 15rem; overflow-y: auto;
}
.sugg[hidden] { display: none; }
.sugg button {
  display: block; width: 100%; text-align: left; padding: .7rem .9rem;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: 400 .9375rem/1.4 var(--body); cursor: pointer;
}
.sugg button:last-child { border-bottom: 0; }
.sugg button:hover, .sugg button[aria-selected="true"] { background: var(--base-3); }
.sugg small { display: block; color: var(--muted); font: 400 .75rem/1.3 var(--mono); }

.pinline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pinline a { color: var(--accent-lift); }

.choice { display: grid; gap: .5rem; }
.choice__opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice label {
  padding: .6rem 1rem; border: 1px solid var(--line); cursor: pointer;
  font: 400 .875rem/1 var(--body); transition: all .2s var(--ease);
}
.choice label:hover { border-color: var(--line-2); }
.choice input:focus-visible + label { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
.choice input:checked + label { background: var(--ink); color: var(--base); border-color: var(--ink); }

.done { color: var(--accent-lift); font: 400 .875rem/1.5 var(--mono); }
.done:empty { display: none; }

/* the drone band: full-bleed footage under a left-weighted gradient */
.ground {
  position: relative; isolation: isolate; overflow: hidden;
  background: #171412;
  min-height: min(78svh, 620px);
  display: grid; align-content: center;
  padding-block: clamp(4rem, 9vh, 7rem);
  border-block: 1px solid var(--line);
}
.ground__media { position: absolute; inset: 0; z-index: -2; }
.ground__media > * { width: 100%; height: 100%; object-fit: cover; }
.ground__video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.ground.is-playing .ground__video { opacity: 1; }
.ground::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23,20,18,.94) 0%, rgba(23,20,18,.86) 34%, rgba(23,20,18,.5) 62%, rgba(23,20,18,.3) 100%);
}
/* This one section stays dark, so its type flips. */
.ground, .ground .lede { color: #F5F4F1; }
.ground .lede { color: #D8D3CC; }
.ground__in { display: grid; gap: 1.25rem; justify-items: start; }
.ground__in > * { max-width: 50rem; }

/* about */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.about__fig { position: relative; display: grid; gap: .7rem; }
/* The headshot runs in full colour (Michael, 17 Sep 2026). It is shot on white,
   so the border is what separates the plate from the off-white ground, and the
   red of her dress happens to land on the page's one accent. */
.about__fig img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  border: 1px solid var(--line);
}
.about__fig figcaption {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-left: 2px solid var(--accent); padding-left: .7rem;
}
.about__body { display: grid; gap: 1.1rem; }
.about__body p { margin: 0; color: var(--muted); }


/* contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts li { background: var(--base); padding: 1rem 1.1rem; display: grid; gap: .25rem; }
.facts a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.facts a:hover { border-bottom-color: var(--accent); }

.social { display: flex; gap: .6rem; flex-wrap: wrap; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); transition: all .2s var(--ease); }
.social a:hover { border-color: var(--ink); background: var(--base-2); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* footer */
.foot { position: relative; z-index: 3; border-top: 1px solid var(--line); padding-block: 3rem 2rem; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; }
.foot__note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gap { border: 1px dashed var(--accent); color: var(--accent-lift); padding: .5rem .7rem; font: 400 .75rem/1.4 var(--mono); display: inline-block; }

/* sticky call bar, phone only */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; gap: 1px; background: var(--line);
  transform: translateY(100%); transition: transform .35s var(--ease);
}
.bar.is-on { transform: none; }
.bar a { flex: 1; padding: 1rem; text-align: center; text-decoration: none; font: 500 .9375rem/1 var(--body); background: var(--base-2); }
.bar a.is-primary { background: var(--accent); color: var(--accent-ink); }

/* loader */
.load {
  position: fixed; inset: 0; z-index: 100; background: var(--base);
  display: grid; place-content: center; gap: 1rem; justify-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.load.is-done { opacity: 0; visibility: hidden; }
.load__bar { width: min(58vw, 22rem); height: 1px; background: var(--line); overflow: hidden; }
.load__bar i { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left;
  background: var(--accent); transition: transform .3s linear; }

/* ─── reveal ────────────────────────────────────────────────────────────── */

[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }

/* ─── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .feat, .about__grid, .contact__grid, #value .wrap { grid-template-columns: 1fr; }
  .work__row { grid-template-columns: 3rem 1fr; }
  .work__row .work__pts { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --hdr-h: 60px; }
  .nav {
    position: fixed; inset: var(--hdr-h) 0 auto; flex-direction: column; gap: 0;
    background: rgba(245,244,241,.97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); padding: .5rem 0;
    transform: translateY(-120%); visibility: hidden; pointer-events: none;
    transition: transform .35s var(--ease), visibility .35s var(--ease);
  }
  .nav.is-open { transform: none; visibility: visible; pointer-events: auto; }
  .nav a { padding: .9rem var(--gutter); font-size: 1rem; }
  .nav a::after { display: none; }
  .burger { display: block; }
  .hdr__name span { display: none; }
  .scrim { background: linear-gradient(180deg, rgba(245,244,241,.30) 0%, rgba(245,244,241,.80) 46%, rgba(245,244,241,.94) 100%); }
  .bar { display: flex; }
  body { padding-bottom: 0; }
  .row2 { grid-template-columns: 1fr; }
  .hero__foot { position: static; margin-top: 2.5rem; }
}

@media (max-width: 420px) {
  .survey__grid { grid-template-columns: 1fr; }
  .lgrid { grid-template-columns: 1fr; }
}

/* ─── reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  .stage { display: none; }
  .scrim { background: var(--base); opacity: 1; }
  .pins { display: none; }
}

/* Canvas absent (no WebGL2, or the scene failed) — the page still has to read. */
.no-gl .stage { display: none; }
.no-gl .scrim { background: var(--base); opacity: 1; }
.no-gl .pins { display: none; }

/* ═══ v4 additions: Claribel-shaped blocks ═══════════════════════════════ */

/* header sits over the video hero until you scroll past it */
.hdr--over { background: transparent; border-bottom-color: transparent; }
.hdr--over:not(.is-stuck):not(.is-nav-open) .hdr__name { color: #F5F4F1; }
.hdr--over:not(.is-stuck):not(.is-nav-open) .hdr__name span { color: rgba(245,244,241,.72); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .nav a { color: rgba(245,244,241,.82); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .nav a:hover,
.hdr--over:not(.is-stuck):not(.is-nav-open) .nav a[aria-current="true"] { color: #F5F4F1; }
.hdr--over:not(.is-stuck):not(.is-nav-open) .lang { border-color: rgba(245,244,241,.4); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .lang a { color: rgba(245,244,241,.8); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .lang a[aria-current="page"] { background: #F5F4F1; color: var(--ink); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .burger { border-color: rgba(245,244,241,.4); }
.hdr--over:not(.is-stuck):not(.is-nav-open) .burger span { background: #F5F4F1; }
.hdr--over:not(.is-stuck):not(.is-nav-open) .hdr__rule { background: rgba(245,244,241,.4); }

/* video hero */
.vhero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; align-content: center;
  background: #171412; color: #F5F4F1;
  padding-block: calc(var(--hdr-h) + 4rem) 5rem;
}
.vhero__media { position: absolute; inset: 0; z-index: -2; }
.vhero__media > * { width: 100%; height: 100%; object-fit: cover; }
.vhero__video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.vhero.is-playing .vhero__video { opacity: 1; }
.vhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,20,18,.72) 0%, rgba(23,20,18,.48) 38%, rgba(23,20,18,.86) 100%);
}
.vhero__in { display: grid; gap: clamp(1.25rem, 3vw, 2rem); justify-items: start; }
.vhero__in > * { max-width: 56rem; }
.vhero .lede { color: #D8D3CC; max-width: 44ch; }
.vhero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn--clear { --btn-bg: transparent; --btn-fg: #F5F4F1; --btn-bd: rgba(245,244,241,.5); }
.btn--clear:hover { --btn-bg: rgba(245,244,241,.12); --btn-bd: #F5F4F1; }

/* six tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 15rem; display: grid; align-content: end; gap: .3rem;
  padding: 1.2rem 1.3rem 1.3rem; background: var(--base-2);
  text-decoration: none; color: #F5F4F1;
}
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,20,18,.1) 0%, rgba(23,20,18,.78) 100%); transition: background .3s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile:hover::after { background: linear-gradient(180deg, rgba(23,20,18,.25) 0%, rgba(23,20,18,.85) 100%); }
.tile b { font: 600 1.125rem/1.25 var(--body); }
.tile span { font: 400 .875rem/1.4 var(--body); color: #D8D3CC; }

/* two tall panels */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(62svh, 32rem); display: grid; align-content: end; gap: .5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem); text-decoration: none; color: #F5F4F1;
}
.panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--img); background-size: cover; background-position: center; transition: transform .7s var(--ease); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,20,18,.2) 0%, rgba(23,20,18,.82) 100%); }
.panel:hover::before { transform: scale(1.05); }
.panel__n { color: var(--accent-ink); opacity: .75; }
.panel__h { display: block; }
.panel__b { font: 400 .9375rem/1.5 var(--body); color: #D8D3CC; max-width: 24rem; }

/* the map, now scoped to its own section instead of the whole page */
.areas { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 11vh, 9rem); border-block: 1px solid var(--line); }
.areas .stage { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.areas .pins { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.areas::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--base) 0%, rgba(245,244,241,.86) 40%, rgba(245,244,241,.25) 72%, rgba(245,244,241,0) 100%); }
.areas__in { display: grid; gap: 2rem; }

/* sales ledger */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.ledger th { font: 400 .75rem/1 var(--mono); color: var(--muted); }
.ledger td { font: 400 .9375rem/1.4 var(--body); }
.ledger td.p { font: 600 1rem/1 var(--body); }
.ledger__th-img { width: 10rem; }
.ledger__img { width: 10rem; padding-right: 0; }
.ledger__img img { display: block; width: 10rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* On a phone five auto-width columns crush the photo cell to a few pixels, and
   the global img max-width:100% then collapses the photo to nothing. Each sale
   becomes a stacked row instead: photo on the left, the facts labelled beside
   it. Same hairlines, same mono labels, still radius 0. */
@media (max-width: 44rem) {
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
  .ledger thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .55rem 1rem; align-items: start;
    padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  }
  .ledger tr:has(.ledger__img:empty) { grid-template-columns: minmax(0, 1fr); }
  .ledger td { padding: 0; border-bottom: 0; }
  .ledger__img { grid-row: 1 / span 4; }
  .ledger__img:empty { display: none; }
  .ledger__img img { width: 7.5rem; }
  .ledger td:not(.ledger__img)::before {
    content: attr(data-label); display: block;
    font: 400 .6875rem/1 var(--mono); color: var(--muted); margin-bottom: .25rem;
  }
}

@media (max-width: 1040px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 20rem; }
}

/* visually hidden, still read out */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }