/* DreamView Realty: site layer on top of scrollcraft.css.
   Theme is the owner's: royal blue, gold, black. Grounds step from royal blue
   down to black (sky to earth). Gold owns the horizon line, the frame under the
   owner's photographs and the primary action. White is for type and fields. */
:root {
  --blue:   #0537B5;            /* royal blue, from the current site */
  --gold:   #CDB726;            /* gold, from the current site */
  --gold-hi:#DFCB3F;
  --black:  #0B0C10;

  /* the transect bands, light to dark */
  --band-1: #0537B5;
  --band-2: #0A2E8F;
  --band-3: #0A2266;
  --band-4: #0B1638;
  --band-5: #0C1020;
  --band-6: #0B0C10;

  --sc-canvas:     var(--black);
  --sc-surface:    #14161D;
  --sc-ink:        #F6F7F9;
  --sc-ink-soft:   #CDD3E0;          /* lighter for contrast (was #B4BBCC) */
  --sc-accent:     var(--gold);
  --sc-accent-ink: #0B0C10;
  --sc-font-display: "Source Serif 4", Georgia, serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;
  --sc-font-mono:    "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 228 60% 4%;
  --sc-maxw: 84rem;
  --bar-h: 4.25rem;
  --r: 4px;                      /* one radius scale, square-ish, held everywhere */
}

/* Light type on dark grounds: a touch more leading, a touch more weight. */
body { line-height: 1.66; font-weight: 450; letter-spacing: 0; }
.sc-display { font-weight: 600; letter-spacing: -0.022em; font-optical-sizing: auto; }
.sc-display--xl { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); line-height: 1.0; }
.sc-display--lg { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); line-height: 1.04; }
.sc-display--md { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.08; }
.sc-body { color: var(--sc-ink-soft); }
h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.012em; margin: 0; }
p { margin: 0; }
.eyebrow { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); max-width: 40ch; text-wrap: pretty; }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bands. Restate color with the token, or inherited text keeps the old ink. */
.band { position: relative; }
.band--1 { background: var(--band-1); --sc-ink-soft: #E6EBFA; color: var(--sc-ink); }
.band--2 { background: var(--band-2); --sc-ink-soft: #DFE5F8; color: var(--sc-ink); }
.band--3 { background: var(--band-3); --sc-ink-soft: #D9E0F4; color: var(--sc-ink); }
.band--4 { background: var(--band-4); --sc-ink-soft: #D3DAEE; color: var(--sc-ink); }
.band--5 { background: var(--band-5); color: var(--sc-ink); }
.band--6 { background: var(--band-6); color: var(--sc-ink); }

/* The horizon line: the logo's gold rule, used as the page's one divider. */
.horizon { height: 2px; background: var(--gold); border: 0; margin: 0; width: 100%; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0.8rem 1.35rem; border-radius: var(--r);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.02em; white-space: nowrap;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--black); box-shadow: var(--sc-e1); }
.btn--line { border-color: color-mix(in oklab, var(--sc-ink) 55%, transparent); color: var(--sc-ink); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-hi); }
  .btn--line:hover { border-color: var(--gold); color: var(--gold); }
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.link {
  color: var(--sc-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  transition: color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--gold); } }
.link--arrow::after { content: " \2192"; }

/* ------------------------------------------------------------------ bar -- */
/* Four sections, two of them menus, and one action. Compact and fixed. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  background: var(--black); border-bottom: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--sc-ink); margin-right: auto; }
.brand img { width: 3.4rem; height: auto; }
.brand span { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; white-space: nowrap; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0.25rem, 1vw, 0.75rem); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.7rem;
  color: var(--sc-ink); text-decoration: none; background: none; border: 0; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: var(--sc-t-sm); font-weight: 500; white-space: nowrap; position: relative;
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.nav__link::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.45rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--sc-ease-out); }
.nav__link[aria-current="page"]::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__chev { width: 0.7rem; height: auto; flex: none; transition: transform 200ms var(--sc-ease-out); }
.nav__trigger[aria-expanded="true"] { color: var(--gold); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--gold); } }

/* the dropdown: a dark panel with a gold lip. The padding above it is a bridge,
   so the pointer can travel from the trigger into the menu without it closing */
.menu {
  position: absolute; top: 100%; left: 50%; min-width: 21rem; padding-top: 0.6rem;
  translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s 180ms;
}
.has-menu.is-open > .menu { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out); }
.menu__list {
  list-style: none; margin: 0; padding: 0.45rem; display: grid; gap: 0.1rem;
  background: #0E1016; border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r) var(--r); box-shadow: var(--sc-e3);
}
.menu__list a { display: grid; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: var(--r); color: var(--sc-ink); text-decoration: none; transition: background-color 140ms var(--sc-ease-out); }
.menu__list b { font-weight: 600; font-size: var(--sc-t-sm); }
.menu__list span { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.menu__list a[aria-current="page"] b { color: var(--gold); }
.menu__list a:hover, .menu__list a:focus-visible { background: color-mix(in oklab, var(--blue) 30%, transparent); }
.menu__list a:focus-visible { outline-offset: -2px; }

.bar__tel { color: var(--sc-ink); text-decoration: none; font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .bar__tel:hover { color: var(--gold); } }
/* English / Español: in the header at every width. Each option is a link to the
   same page in that language; the current one is filled. Narrow headers show
   EN / ES, and the full names stay as the links' accessible names. */
.lang { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; flex: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 38%, transparent); border-radius: 999px; }
.lang__globe { width: 1.05rem; height: 1.05rem; color: var(--gold); margin: 0 0.2rem 0 0.4rem; flex: none; }
.lang__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0 0.75rem;
  border-radius: 999px; color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 600; white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.lang__opt[aria-current] { background: var(--sc-ink); color: var(--black); }
@media (hover: hover) and (pointer: fine) { .lang__opt:not([aria-current]):hover { color: var(--gold); } }
.lang__opt:focus-visible { outline-offset: 1px; }
.lang__short { display: none; }
@media (max-width: 1360px) {
  .lang__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang__short { display: inline; }
  .lang__opt { padding: 0 0.6rem; }
}
@media (max-width: 600px) {
  .lang { padding: 0.15rem; }
  .lang__globe { display: none; }
  .lang__opt { min-height: 2.3rem; padding: 0 0.5rem; font-size: 0.78rem; }
}
.bar .btn { min-height: 2.6rem; padding: 0.55rem 1.1rem; }
.bar__quick { display: none; }
.menu-btn { display: none; align-items: center; justify-content: center; gap: 0.55rem; background: none; border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); color: var(--sc-ink); border-radius: var(--r); min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; }
/* three bars that fold into a cross while the menu is open */
.menu-btn__icon { display: grid; gap: 4px; width: 1.05rem; flex: none; }
.menu-btn__icon i { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--sc-ease-out), opacity 160ms var(--sc-ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn__icon i { transition: none; } }
@media (max-width: 1240px) { .bar__tel { display: none; } }
@media (max-width: 1020px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .brand img { width: 3.6rem; }
}
/* with the language switch in the bar: the name sits on two lines on tablets, and
   the four sections tighten a little where the bar is at its fullest */
@media (max-width: 760px) { .brand span { font-size: 1rem; line-height: 1.05; white-space: normal; width: min-content; } }   /* DreamView / Realty */
@media (min-width: 1021px) and (max-width: 1360px) { .nav__list { gap: 0.15rem; } .nav__link { padding: 0 0.45rem; } .nav__link::after { left: 0.45rem; right: 0.45rem; } }
/* phones: two rows, every control labelled in words. Row one: the larger mark with the
   name beside it, the language switch and the Menu button. Row two: Call us and Book
   Your Appointment, full width and easy to tap. --bar-h grows to match, so every page
   (and the drawer) still starts below the bar. */
@media (max-width: 600px) {
  :root { --bar-h: 7.25rem; }
  .bar { flex-wrap: wrap; align-content: flex-start; column-gap: 0.5rem; row-gap: 0; padding-inline: 0.75rem; }
  .brand { gap: 0.5rem; min-width: 0; height: 4rem; }
  .brand img { width: clamp(2.75rem, 14vw, 4rem); }
  .brand span { font-size: clamp(0.85rem, 3.8vw, 1.1rem); }
  .bar__book { display: none; }
  .lang__opt { min-height: 2.75rem; padding: 0 0.6rem; font-size: 0.95rem; }
  .menu-btn { gap: 0.45rem; padding: 0 0.7rem; font-size: 1rem; }
  .bar__quick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; flex: 0 0 100%; }
  .bar .bar__quick .btn { min-height: 2.75rem; padding: 0.4rem 0.9rem; font-size: 1rem; letter-spacing: 0; }
  .bar__call svg { width: 1.15rem; height: 1.15rem; color: var(--gold); flex: none; }
}
/* the narrowest phones: everything tightens a little so the name still fits */
@media (max-width: 359px) {
  .bar { column-gap: 0.35rem; padding-inline: 0.6rem; }
  .brand { gap: 0.4rem; }
  .brand span { font-size: 0.8rem; }
  .lang__opt { padding: 0 0.45rem; }
  .menu-btn { padding: 0 0.55rem; gap: 0.35rem; font-size: 0.95rem; }
  .bar .bar__quick .btn { padding-inline: 0.7rem; font-size: 0.95rem; }
}

/* drawer: the same four sections, menus expand on tap */
.drawer { position: fixed; inset: var(--bar-h) 0 0 0; z-index: calc(var(--sc-z-chrome) - 1); background: var(--black); padding: var(--sc-5) clamp(1.25rem, 5vw, 3rem) var(--sc-8); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s 220ms; }
.drawer.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
.drawer__list, .drawer__sub { list-style: none; margin: 0; padding: 0; }
.drawer__list > li > a, .drawer__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: 0.7rem 0;
  color: var(--sc-ink); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--sc-hairline); cursor: pointer;
  font-family: var(--sc-font-display); font-size: 1.55rem; font-weight: 600; text-align: left;
}
.drawer__toggle .nav__chev { width: 0.95rem; color: var(--gold); }
.drawer__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.drawer__sub { padding: 0.35rem 0 0.8rem 0.9rem; border-left: 2px solid var(--gold); margin: 0.6rem 0 0.4rem; }
.drawer__sub a { display: flex; align-items: center; min-height: 2.9rem; color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-base); }
.drawer__sub a[aria-current="page"], .drawer__list a[aria-current="page"] { color: var(--gold); }
.drawer__book { margin-top: var(--sc-6); width: 100%; min-height: 3.25rem; }
.drawer__meta { margin-top: var(--sc-5); display: grid; gap: var(--sc-2); }
.drawer__meta a { color: var(--sc-ink); text-decoration: none; padding: 0.45rem 0; }
body.menu-open { overflow: hidden; }

main { display: block; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--black); padding: 0.6rem 1rem; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 0.6rem; }

/* -------------------------------------------------------- home: promise -- */
.promise { padding-block: clamp(5rem, 12vw, 10rem) clamp(4.5rem, 10vw, 8.5rem); }
.promise__lead { max-width: 22ch; }
.promise__turn { margin-top: var(--sc-5); font-size: var(--sc-t-xl); font-family: var(--sc-font-display); font-weight: 600; color: var(--gold); }
.ledger { margin: clamp(3rem, 7vw, 5.5rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: var(--sc-7); }
.ledger div { border-top: 2px solid var(--gold); padding-top: var(--sc-4); }
.ledger dt { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.2; }
.ledger dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 30ch; }
@media (max-width: 900px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ledger { grid-template-columns: 1fr; row-gap: var(--sc-6); } }

/* page-hero shortcuts */
.paths { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.paths a {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3.1rem; padding: 0.7rem 1.2rem 0.7rem 1.1rem;
  background: var(--black); color: var(--sc-ink); text-decoration: none; border-radius: var(--r);
  font-weight: 600; font-size: var(--sc-t-base); box-shadow: var(--sc-e2);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.paths a::after { content: "\2192"; color: var(--gold); transition: transform 160ms var(--sc-ease-out); }
.paths a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .paths a:hover { background: var(--blue); }
  .paths a:hover::after { transform: translateX(3px); }
}

/* -------------------------------------------------- home: where to start -- */
/* The main services, one door each, on the royal-blue band. Same grammar as the
   rest of the site: gold top rules, serif names, staggered in on scroll. */
.start { padding-block: clamp(5rem, 12vw, 10rem) clamp(4.5rem, 10vw, 8.5rem); }
.start__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.start__head .lede { color: #E9EDF8; max-width: 34ch; }
.start__grid { list-style: none; margin: clamp(3rem, 7vw, 5.5rem) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.start__grid > li { display: flex; }
.start__card {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3);
  min-height: 15.5rem; padding: clamp(1.4rem, 2.6vw, 2rem); color: var(--sc-ink); text-decoration: none;
  background: color-mix(in oklab, var(--black) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); border-top: 2px solid var(--gold); border-radius: var(--r);
  transition: background-color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.start__icon { width: 2.5rem; height: 2.5rem; margin-bottom: var(--sc-2); color: var(--gold);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.start__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.012em; }
.start__desc { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 34ch; }
.start__go { margin-top: auto; padding-top: var(--sc-3); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--sc-t-sm); }
.start__go::after { content: "\2192"; color: var(--gold); transition: transform 200ms var(--sc-ease-out); }
.start__card--book { background: var(--black); border-color: color-mix(in oklab, var(--gold) 45%, transparent); }
.start__card--book .start__go { padding: 0.6rem 1rem; background: var(--gold); color: var(--black); border-radius: var(--r); }
.start__card--book .start__go::after { color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .start__card:hover { background: color-mix(in oklab, var(--black) 42%, transparent); transform: translateY(-3px); box-shadow: var(--sc-e2); }
  .start__card:hover .start__go::after { transform: translateX(4px); }
  .start__card--book:hover { background: #12141B; }
  .start__card--book:hover .start__go { background: var(--gold-hi); }
}
.start__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 900px) { .start__head { grid-template-columns: 1fr; } .start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .start__grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .start__card { min-height: 0; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--sc-4); row-gap: 0.3rem; padding: 1.15rem 1.1rem; }
  .start__icon { width: 2.1rem; height: 2.1rem; margin: 0.1rem 0 0; grid-row: 1 / span 3; }
  .start__name { font-size: var(--sc-t-lg); }
  .start__go { padding-top: 0.35rem; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .start__card, .start__go::after { transition: none; } .start__card:hover { transform: none; } }

/* ------------------------------------------------------------ altimeter -- */
.alti {
  position: fixed; left: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem); z-index: 50;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem; border-radius: var(--r);
  background: color-mix(in oklab, var(--black) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  color: var(--sc-ink); text-decoration: none; box-shadow: var(--sc-e2);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.alti svg { width: 1.6rem; height: auto; flex: none; }
.alti__num { font-weight: 600; font-size: 1.05rem; color: var(--gold); display: inline-flex; align-items: baseline; line-height: 1; }
.alti__unit { font-size: 0.72rem; color: var(--sc-ink-soft); margin-left: 0.3em; font-weight: 500; }
.alti__place { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.2rem; white-space: nowrap; }
/* odometer digits: each digit is a 0-9 column translated by the page script */
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.odo__col { display: block; transition: transform 0ms; }
.odo__col span { display: block; height: 1em; line-height: 1; }
.odo__sep { display: inline-block; }
.alti.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .alti:hover { border-color: var(--gold); } }
@media (max-width: 640px) {
  .alti { padding: 0.4rem 0.7rem 0.4rem 0.55rem; gap: 0.5rem; }
  .alti svg { width: 1.25rem; }
  .alti__num { font-size: 0.92rem; }
  .alti__place { font-size: 0.62rem; }
}

/* -------------------------------------------------------- home: summit -- */
.summit { position: relative; height: 100svh; min-height: 40rem; overflow: clip; background: #9fb6cf; }
.summit__layer { position: absolute; pointer-events: none; will-change: transform; }
.summit__far { inset: 0; }
.summit__far img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.summit__haze { inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(232, 214, 170, 0.0) 0%, rgba(240, 222, 182, 0.28) 45%, rgba(240, 222, 182, 0) 100%); }
.summit__mid, .summit__near { left: 50%; bottom: 0; width: max(118vw, 210svh); max-width: none; translate: -50% 0; }
.summit__mid img, .summit__near img { width: 100%; height: auto; max-width: none; }
.summit__mid { bottom: -22svh; }
.summit__near { bottom: -38svh; }
/* natural-flow parallax: the hero is already half through its visible life at
   load (p = 0.5), so motion is mapped across 0.5..1 only */
.summit { --t: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1); }
.summit__far  { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--t) * 22svh + var(--my, 0) * -4px), 0) scale(1.04); }
.summit__mid  { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--t) * 10svh), 0); }
.summit__near { transform: translate3d(calc(var(--mx, 0) * -26px), calc(var(--t) * -6svh), 0) scale(calc(1 + var(--t) * 0.06)); transform-origin: 50% 100%; }
.summit__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(2.5rem, 9svh, 6.5rem)); max-width: min(44rem, 62vw); }
.summit__copy h1 { color: var(--black); }
.summit__copy .lede { color: #16213F; margin-top: var(--sc-4); max-width: 34ch; font-weight: 500; }
.summit__scrim { position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: radial-gradient(70% 62% at 18% 26%, rgba(236, 242, 248, 0.62) 0%, rgba(236, 242, 248, 0.3) 45%, rgba(236, 242, 248, 0) 75%); }
.paths__alt { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: #16213F; font-weight: 500; }
.paths__alt a { color: var(--black); }
@media (max-width: 860px) {
  .summit__copy { max-width: none; right: var(--sc-gutter); top: calc(var(--bar-h) + 1.75rem); }
  .summit__scrim { background: linear-gradient(to bottom, rgba(236, 242, 248, 0.66) 0%, rgba(236, 242, 248, 0.4) 40%, rgba(236, 242, 248, 0) 62%); }
  .summit__mid, .summit__near { width: max(150vw, 200svh); }
  .summit__mid { bottom: -24svh; }
  .summit__near { bottom: -6svh; }
}
@media (max-width: 700px) {
  .summit__copy h1 { font-size: clamp(2.3rem, 9.4vw, 3rem); }
  .summit__copy .paths a { flex: 1 1 auto; justify-content: space-between; }
}

/* -------------------------------------------------------- home: descent -- */
.descent .sc-stage, .descent [data-sc-stage] { background: #b9c7d6; }
.descent__stage { --p: var(--sc-p, 0);
  --a: clamp(0, calc(var(--p) / 0.36), 1);
  --b: clamp(0, calc((var(--p) - 0.10) / 0.46), 1);
  --c: clamp(0, calc((var(--p) - 0.40) / 0.30), 1);
  --d: clamp(0, calc((var(--p) - 0.56) / 0.24), 1);
  --e: clamp(0, calc((var(--p) - 0.74) / 0.16), 1);
  --s: clamp(0, calc((var(--p) - 0.68) / 0.08), 1);   /* the copy's scrim leads the copy */
}
.d-layer { position: absolute; pointer-events: none; will-change: transform; max-width: none; }
.d-far { inset: 0; transform-origin: 50% 70%; transform: translate3d(0, calc(var(--p) * -2svh), 0) scale(calc(1.02 + var(--p) * 0.16)); }
.d-far img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.d-dusk { inset: 0; background: linear-gradient(to bottom, rgba(5, 23, 80, 0.55), rgba(5, 23, 80, 0.12) 55%, rgba(5, 23, 80, 0) 75%); opacity: calc(var(--p) * 0.85); }
/* Plane width drives every landing position: the grass line in valley-grass
   sits at 54% of the plane's height (measured), so the house base goes at 57%
   and the logo's ridgeline and gold lines hang off the house. */
.descent__stage { --pw: max(118vw, 210svh); --hb: calc(var(--pw) * 0.2428 - 2svh); --hx: 68%; --hw: clamp(15rem, 25vw, 27rem); }
.d-mid, .d-near, .d-valley { left: 50%; width: var(--pw); translate: -50% 0; }
.d-mid img, .d-near img, .d-valley img { width: 100%; height: auto; max-width: none; }
.d-mid { bottom: -22svh; transform-origin: 50% 0; transform: translate3d(0, calc(var(--b) * var(--b) * 112svh), 0) scale(calc(1 + var(--b) * 0.45)); }
.d-near { bottom: -38svh; transform-origin: 50% 0; transform: translate3d(0, calc(var(--a) * var(--a) * 120svh), 0) scale(calc(1 + var(--a) * 0.7)); }
.d-valley { bottom: -2svh; transform: translate3d(0, calc((1 - var(--c)) * (1 - var(--c)) * 70svh), 0); }
/* the same grass, masked to its foreground, so the house sits between the plane's mountains and its grass */
.d-valley--front img { -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 58.5%); mask-image: linear-gradient(to bottom, transparent 55%, #000 58.5%); }
.d-house { left: var(--hx); bottom: var(--hb); width: var(--hw); translate: -50% 0; transform-origin: 50% 100%;
  transform: translate3d(0, calc((1 - var(--d)) * 110svh), 0) scale(calc(0.86 + var(--d) * 0.14)); }
.d-house img { width: 100%; height: auto; }
.d-ridge { left: var(--hx); bottom: calc(var(--hb) + var(--hw) * 0.16); width: min(calc(var(--hw) * 2.5), 92vw); translate: -50% 0;
  clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0); filter: drop-shadow(0 2px 6px rgba(4, 16, 60, 0.45)); }
.d-ridge img { width: 100%; height: auto; }
.d-gold { bottom: calc(var(--hb) + var(--hw) * 0.04); height: 3px; background: var(--gold); width: calc(var(--hw) * 0.7); border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.d-gold--l { left: calc(var(--hx) - var(--hw) * 0.54); translate: -100% 0; transform-origin: 100% 50%; transform: scaleX(var(--e)); }
.d-gold--r { left: calc(var(--hx) + var(--hw) * 0.54); transform-origin: 0 50%; transform: scaleX(var(--e)); }
.d-copy { position: absolute; z-index: 10; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 6svh, 4rem)); max-width: min(30rem, 36vw); }
.d-caption { position: absolute; z-index: 10; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 6svh, 4rem)); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; color: var(--black); max-width: 22ch; line-height: 1.2; }
.d-copy h2 { color: #fff; }
.d-copy p { color: #fff; margin-top: var(--sc-4); max-width: 44ch; }
.d-copy .link { color: #fff; margin-top: var(--sc-5); display: inline-block; }
.d-scrim { position: absolute; z-index: 9; inset: 0; pointer-events: none; opacity: var(--s);
  background: linear-gradient(90deg, rgba(4, 16, 60, 0.9) 0%, rgba(4, 16, 60, 0.76) 28%, rgba(4, 16, 60, 0.3) 42%, rgba(4, 16, 60, 0) 52%); }
@media (max-width: 860px) {
  .descent__stage { --pw: max(150vw, 200svh); --hx: 50%; --hw: clamp(12rem, 56vw, 18rem); }
  .d-mid { bottom: -24svh; }
  .d-near { bottom: -6svh; }
  /* clear the altimeter, which sits bottom-left through the descent */
  .d-copy { max-width: none; right: var(--sc-gutter); top: auto; bottom: calc(clamp(0.75rem, 2vw, 1.5rem) + 4.25rem); }
  .d-copy p { font-size: var(--sc-t-sm); }
  .d-scrim { background: linear-gradient(to top, rgba(4, 16, 60, 0.94) 0%, rgba(4, 16, 60, 0.84) 40%, rgba(4, 16, 60, 0.5) 56%, rgba(4, 16, 60, 0) 68%); }
}

/* ---------------------------------------------------------- home: range -- */
.range .sc-stage { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); align-items: stretch; padding-top: calc(var(--bar-h) + 1rem); }
.rail > *, .rail__track > * { flex: none; }
.rail__track { display: contents; }   /* larger screens: the cards sit straight in the travelling rail */
.rail__nav { display: none; }
.rail__lead { width: clamp(17rem, 26vw, 24rem); display: flex; flex-direction: column; justify-content: center; padding-right: var(--sc-5); }
.rail__lead p { margin-top: var(--sc-4); color: var(--sc-ink-soft); }
.way { width: clamp(16.5rem, 23vw, 21rem); display: flex; flex-direction: column; }
.way__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); background: var(--band-3); box-shadow: var(--sc-e2); }
.way__img img { width: 100%; height: 100%; object-fit: cover; }
.way h3 { margin-top: var(--sc-4); }
.way p { margin-top: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.way__links { margin-top: auto; padding-top: var(--sc-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--sc-t-sm); }
.rail__end { width: clamp(16rem, 24vw, 22rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); padding-left: var(--sc-4); border-left: 2px solid var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .range .way { opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 6 - var(--i, 0) * 0.9) * 0.45), 1); }
}
@media (max-height: 760px) and (min-width: 861px) { .way__img { aspect-ratio: 4 / 4.2; } }
@media (max-width: 860px) { .way__img { aspect-ratio: 4 / 4.4; } .way p { font-size: 1rem; } }

/* ----------------------------------------------------------- home: team -- */
/* Scoped to the homepage's live .team so the shared .team--static lineup on other pages is untouched. */
.team-intro { padding-block: clamp(5rem, 11vw, 9rem) clamp(1rem, 3vw, 2rem); }
.team-intro__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-6); align-items: end; }
.team-intro .sc-body { max-width: 34ch; }
@media (max-width: 760px) { .team-intro__inner { grid-template-columns: 1fr; gap: var(--sc-4); } }

/* Static lineup: what no-script and reduced-motion visitors get, and the
   layout the live sequence resolves to. Five people standing on the line. */
/* position is left to the engine: .sc-stage makes the live stage sticky */
:where(.team:not(.team--static)) .team__stage { overflow: clip; }
.team:where(:not(.team--static)):not(.is-live) .team__stage { position: relative; }
:where(.team:not(.team--static)) .team__line { height: 2px; background: var(--gold); }
:where(.team:not(.team--static)) .team__captions, :where(.team:not(.team--static)) .team__glow { display: none; }
:where(.team:not(.team--static)) .team__people { list-style: none; margin: 0; padding: clamp(2rem, 5vw, 4rem) var(--sc-gutter) 0; display: flex; justify-content: center; align-items: flex-end; }
:where(.team:not(.team--static)) .team__person { flex: 0 1 15rem; margin-inline: -0.9rem; position: relative; }
:where(.team:not(.team--static)) .team__person a { display: block; color: inherit; text-decoration: none; }
:where(.team:not(.team--static)) .team__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; object-position: 50% 100%; }
:where(.team:not(.team--static)) .team__label { display: block; text-align: center; padding: 0.9rem 0.6rem 0; font-size: var(--sc-t-sm); line-height: 1.35; }
:where(.team:not(.team--static)) .team__label b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); }
:where(.team:not(.team--static)) .team__label > span { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
:where(.team:not(.team--static)) .team__people::after { content: none; }
.team:where(:not(.team--static)):not(.is-live) .team__people { border-bottom: 2px solid var(--gold); padding-bottom: 0; }
.team:where(:not(.team--static)):not(.is-live) .team__person { order: var(--o, 0); }
.team:where(:not(.team--static)):not(.is-live) .team__label { position: absolute; top: 100%; left: 0; right: 0; }
.team:where(:not(.team--static)):not(.is-live) .team__line { display: none; }          /* the list's own border is the line */
.team:where(:not(.team--static)):not(.is-live) .team__end { margin-top: 5.5rem; }       /* clear the names under the line */
:where(.team:not(.team--static)) .team__end { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3) var(--sc-7); padding: var(--sc-6) var(--sc-gutter) var(--sc-8); }
@media (hover: hover) and (pointer: fine) { :where(.team:not(.team--static)) .team__person a:hover .team__label b { color: var(--gold); } }
@media (max-width: 640px) {
  :where(.team:not(.team--static)) .team__person { margin-inline: -0.6rem; }
  :where(.team:not(.team--static)) .team__label > span, :where(.team:not(.team--static)) .team__last { display: none; }
  :where(.team:not(.team--static)) .team__label b { font-size: var(--sc-t-xs); }
}

/* Live sequence: home.js owns position, size and clip. CSS only sets layers. */
.team:where(:not(.team--static)).is-live .team__stage { height: 100vh; height: 100svh; }
.team:where(:not(.team--static)).is-live .team__people { position: absolute; inset: 0; padding: 0; display: block; }
.team:where(:not(.team--static)).is-live .team__person { position: static; margin: 0; }
.team:where(:not(.team--static)).is-live .team__photo { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform, clip-path;
  filter: drop-shadow(0 18px 28px rgba(2, 8, 30, 0.45)); }
.team:where(:not(.team--static)).is-live .team__label { position: absolute; top: 0; left: 0; padding: 0.8rem 0.3rem 0; opacity: 0; will-change: opacity; }
.team:where(:not(.team--static)).is-live .team__line { position: absolute; left: 0; right: 0; top: var(--line, 78%); transform-origin: 0 50%; z-index: 20; box-shadow: 0 1px 10px rgba(205, 183, 38, 0.25), 0 1px 0 rgba(0, 0, 0, 0.35); }
.team:where(:not(.team--static)).is-live .team__glow { display: block; position: absolute; width: 60vmin; height: 60vmin; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 150, 230, 0.22), rgba(120, 150, 230, 0.08) 55%, transparent); will-change: transform; }
.team:where(:not(.team--static)).is-live .team__captions { display: block; position: absolute; inset: 0; pointer-events: none; }
:where(.team:not(.team--static)) .team__cap { position: absolute; left: var(--sc-gutter); top: 0; width: min(30rem, 38vw); opacity: 0; will-change: opacity, transform; }
:where(.team:not(.team--static)) .team__name { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
:where(.team:not(.team--static)) .team__role { margin-top: var(--sc-4); color: var(--gold); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.04em; }
:where(.team:not(.team--static)) .team__fact { margin-top: var(--sc-3); color: var(--sc-ink-soft); max-width: 34ch; }
:where(.team:not(.team--static)) .team__lang { margin-top: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink); }
.team:where(:not(.team--static)).is-live .team__end { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 4svh, 2.5rem); padding: 0; opacity: 0; will-change: opacity; }
@media (max-width: 860px) {
  :where(.team:not(.team--static)) .team__cap { width: auto; right: var(--sc-gutter); }
  :where(.team:not(.team--static)) .team__name { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  :where(.team:not(.team--static)) .team__fact { font-size: var(--sc-t-sm); }
  .team:where(:not(.team--static)).is-live .team__label > span, .team:where(:not(.team--static)).is-live .team__last { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .team:where(:not(.team--static))[data-sc-act] { height: auto !important; }
  .team:where(:not(.team--static)) .sc-stage, .team:where(:not(.team--static)) [data-sc-stage] { position: relative; height: auto; }
}

/* ------------------------------------------------- the agents' lineup -- */
/* Five people standing on the gold line, each name over a direct number.
   The static composition used on inner pages; the homepage has the live
   sequence (home.js) and Meet the Agents the sticky portraits (agents.js). */
:where(.team--static) .team__stage { overflow: clip; position: relative; }
:where(.team--static) .team__people { list-style: none; margin: 0; padding: clamp(2rem, 5vw, 4rem) var(--sc-gutter) 0; display: flex; justify-content: center; align-items: flex-end; border-bottom: 2px solid var(--gold); }
:where(.team--static) .team__person { flex: 0 1 15rem; margin-inline: -0.9rem; position: relative; order: var(--o, 0); }
:where(.team--static) .team__face { display: block; }
:where(.team--static) .team__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; object-position: 50% 100%; }
:where(.team--static) .team__label { position: absolute; top: 100%; left: 0; right: 0; text-align: center; padding: 0.9rem 0.6rem 0; font-size: var(--sc-t-sm); line-height: 1.35; }
:where(.team--static) .team__name { display: block; color: var(--sc-ink); text-decoration: none; }
:where(.team--static) .team__name b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); transition: color 160ms var(--sc-ease-out); }
:where(.team--static) .team__role { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
:where(.team--static) .team__call { display: inline-flex; align-items: center; min-height: 2rem; margin-top: 0.15rem; color: var(--gold); font-weight: 600; font-size: var(--sc-t-xs); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  :where(.team--static) .team__person:hover .team__name b, :where(.team--static) .team__name:hover b { color: var(--gold); }
  :where(.team--static) .team__call:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.team--static .team__people { max-width: 66rem; margin-inline: auto; }
.team--static .team__person { flex-basis: 12.5rem; }
.team--static .team__stage { padding-bottom: 7.5rem; }       /* clear the names and numbers under the line */

/* phones: the lineup keeps the faces and first names; full names and direct
   numbers repeat as a short directory below, where they have room */
:where(.team--static) .team__dir { display: none; list-style: none; margin: 0; padding: var(--sc-5) var(--sc-gutter) 0; }
:where(.team--static) .team__dir li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.15rem var(--sc-4); padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline-strong); }
:where(.team--static) .team__dir-name { color: var(--sc-ink); text-decoration: none; display: grid; }
:where(.team--static) .team__dir-name b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); }
:where(.team--static) .team__dir-name span { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
:where(.team--static) .team__dir .team__call { font-size: var(--sc-t-sm); margin: 0; min-height: 2.75rem; }
@media (max-width: 820px) {
  :where(.team--static) .team__person { margin-inline: -0.6rem; }
  :where(.team--static) .team__last, :where(.team--static) .team__label .team__role, :where(.team--static) .team__label .team__call { display: none; }
  :where(.team--static) .team__name b { font-size: var(--sc-t-xs); }
  :where(.team--static) .team__dir { display: block; }
  .team--static .team__stage { padding-bottom: 2.75rem; }
}

/* ---------------------------------------------------------- home: proof -- */
.proof__quote { margin: 0; max-width: 54rem; }
.proof__quote blockquote { margin: 0; }
.proof__quote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.1; letter-spacing: -0.02em; }
.proof__quote figcaption { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.qmark { font-family: var(--sc-font-display); color: var(--gold); font-size: 5rem; line-height: 0.6; display: block; height: 2.6rem; }
.quotes { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-7) clamp(1.5rem, 3vw, 3rem); }
.q { margin: 0; border-top: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); padding-top: var(--sc-4); }
.q:nth-child(1) { grid-column: 1 / span 5; }
.q:nth-child(2) { grid-column: 7 / span 5; }
.q:nth-child(3) { grid-column: 2 / span 5; }
.q:nth-child(4) { grid-column: 8 / span 5; }
.q blockquote { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; }
.q figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.q figcaption b { color: var(--sc-ink); font-weight: 600; }
.proof__links { margin-top: clamp(3rem, 6vw, 4.5rem); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-7); }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } .q:nth-child(n) { grid-column: auto; } }

/* ------------------------------------------------------ disclosure (faq) -- */
.faq { border-top: 1px solid var(--sc-hairline-strong); }
.faq details { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5); padding: 1.15rem 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div { padding: 0 0 1.4rem; color: var(--sc-ink-soft); max-width: 62ch; }
.faq details > div p + p { margin-top: var(--sc-3); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--gold); } }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- home: places -- */
.profile { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 0.35rem; }
.profile__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: var(--sc-4); font-size: var(--sc-t-sm); }
.profile__name { font-weight: 600; }
.profile__name small { display: block; font-weight: 400; color: var(--sc-ink-soft); font-size: 0.78rem; }
.profile__bar { height: 0.9rem; position: relative; }
.profile__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in oklab, var(--sc-ink) 40%, transparent); border-radius: 1px; transform-origin: 0 50%; }
.profile__row--cochise .profile__bar i { background: var(--gold); }
.profile__row--home .profile__name { color: var(--gold); }
.profile__ft { text-align: right; font-variant-numeric: tabular-nums; color: var(--sc-ink); }
.places .profile__bar i { transform: scaleX(clamp(0, calc((var(--sc-p, 1) - 0.18 - var(--i, 0) * 0.018) / 0.16), 1)); }
.legend { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.legend span::before { content: ""; display: inline-block; width: 1.4rem; height: 0.6rem; margin-right: 0.5rem; background: color-mix(in oklab, var(--sc-ink) 40%, transparent); vertical-align: 0.05em; }
.legend .legend--gold::before { background: var(--gold); }
@media (max-width: 560px) { .profile__row { grid-template-columns: 7rem minmax(0, 1fr) 4.4rem; gap: var(--sc-3); } }

/* ------------------------------------------------------- home: doorstep -- */
.doorstep { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; background: var(--black); }
.doorstep__img { position: absolute; inset: -6% 0; will-change: transform; transform: translate3d(0, calc((var(--sc-p, 0.5) - 0.5) * -8%), 0); }
.doorstep__img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.doorstep__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 30, 0.86) 0%, rgba(5, 10, 30, 0.62) 38%, rgba(5, 10, 30, 0) 66%); }
.doorstep__copy { position: relative; z-index: 2; padding-block: calc(var(--bar-h) + 3rem) 4rem; max-width: 36rem; }
/* narrow desktops: the copy reaches further across the photo than the scrim's dense part, so carry the density with it */
@media (min-width: 861px) and (max-width: 1180px) {
  .doorstep__scrim { background: linear-gradient(90deg, rgba(5, 10, 30, 0.88) 0%, rgba(5, 10, 30, 0.78) 48%, rgba(5, 10, 30, 0.42) 70%, rgba(5, 10, 30, 0) 88%); }
}
.doorstep__copy .lede { margin-top: var(--sc-4); color: #E9EDF8; }
.doorstep__actions { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; }
@media (max-width: 860px) {
  .doorstep { align-items: flex-end; }
  .doorstep__img img { object-position: 78% 50%; }
  .doorstep__scrim { background: linear-gradient(to top, rgba(5, 10, 30, 0.94) 0%, rgba(5, 10, 30, 0.72) 42%, rgba(5, 10, 30, 0) 70%); }
}

/* ------------------------------------------------------------- footer -- */
.foot { background: var(--black); border-top: 2px solid var(--gold); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; font-size: var(--sc-t-sm); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--sc-7); }
.foot__brand img { width: 9rem; height: auto; }
.foot__brand p { margin-top: var(--sc-3); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; }
.foot h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--sc-3); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot a { color: var(--sc-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--gold); text-decoration: underline; } }
.foot address { font-style: normal; display: grid; gap: 0.45rem; color: var(--sc-ink-soft); }
.foot__book { margin-top: var(--sc-5); }
.foot__social { margin-top: var(--sc-4) !important; display: flex !important; flex-wrap: wrap; gap: 0.4rem 1.1rem !important; }
.foot li a, .foot address a { display: inline-block; padding-block: 0.15rem; }
.foot__badges { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5) var(--sc-7); }
.foot__badges img { height: 3.4rem; width: auto; }
.foot__legal { flex: 1 1 22rem; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); line-height: 1.6; }
@media (max-width: 980px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- inner pages -- */
.page-hero { position: relative; min-height: min(78svh, 46rem); display: flex; align-items: flex-end; overflow: clip; background: var(--band-2); padding-top: var(--bar-h); }
.page-hero__img { position: absolute; inset: 0; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
/* density where the copy sits: a lead column plus the bottom band, never a full-frame wash */
.page-hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4, 12, 40, 0.74) 0%, rgba(4, 12, 40, 0.48) 38%, rgba(4, 12, 40, 0) 64%),
  linear-gradient(to top, rgba(4, 12, 40, 0.9) 0%, rgba(4, 12, 40, 0.5) 40%, rgba(4, 12, 40, 0.04) 75%); }
@media (max-width: 860px) { .page-hero__scrim { background: linear-gradient(to top, rgba(4, 12, 40, 0.94) 0%, rgba(4, 12, 40, 0.82) 50%, rgba(4, 12, 40, 0.6) 80%, rgba(4, 12, 40, 0.42) 100%); } }
/* very narrow phones: one step down so headlines stay in the dense part of the scrim */
@media (max-width: 400px) { .page-hero .sc-display--xl { font-size: clamp(2.05rem, 9.6vw, 2.45rem); } }
.page-hero__copy { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5.5rem); }
.page-hero__copy .lede { margin-top: var(--sc-4); color: #E9EDF8; }
.page-hero__copy .paths { margin-top: var(--sc-5); }
.page-hero--plain { min-height: auto; background: var(--band-1); }
.page-hero--plain .page-hero__copy { padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.steps { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6); counter-reset: step; }
.steps li { border-top: 2px solid var(--gold); padding-top: var(--sc-4); counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--gold); margin-bottom: var(--sc-3); }
.steps h3 { font-size: var(--sc-t-lg); }
.steps p { margin-top: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.facts { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 0; }
/* the marker is positioned, not a grid column, so mixed text and links wrap as prose */
.facts li { position: relative; padding: 0.85rem 0 0.85rem 2rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.facts li::before { content: ""; position: absolute; left: 0.2rem; top: calc(0.85rem + 0.5em); width: 0.6rem; height: 0.6rem; background: var(--gold); transform: rotate(45deg); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.panel { background: color-mix(in oklab, var(--black) 35%, transparent); border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent); border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--sc-edge); }
.panel h2 + p, .panel h3 + p { margin-top: var(--sc-3); color: var(--sc-ink-soft); }
.figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e3); }
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); padding-top: 0.5rem; background: transparent; }
.quote-line { margin: 0; border-left: 2px solid var(--gold); padding-left: var(--sc-5); }
.quote-line blockquote { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; font-weight: 500; }
.quote-line figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.cta-band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-5); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; }

/* agents page */
.agents-hero { flex-direction: column; align-items: stretch; }
.agents { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.agents__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); }
.agents__stage { display: none; }
.agents.is-live .agents__stage { display: block; position: sticky; top: calc(var(--bar-h) + 1.5rem); height: calc(100svh - var(--bar-h) - 3rem); align-self: start; }
.agents__frame { position: absolute; inset: 0 0 2px 0; overflow: hidden; }
.agents__photo { position: absolute; left: 50%; bottom: 0; max-width: none; width: min(100%, calc((100svh - var(--bar-h) - 5rem) * 0.75)); height: auto;
  translate: -50% 0; transform: translate3d(0, 104%, 0); will-change: transform; filter: drop-shadow(0 18px 28px rgba(2, 8, 30, 0.45)); }
.agents__photo[data-k="0"] { transform: none; }
.agents__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); box-shadow: 0 1px 10px rgba(205, 183, 38, 0.25); }
.agent { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--sc-hairline-strong); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.agent:first-child { border-top: 0; padding-top: 0; }
.agents.is-live .agent { min-height: 74svh; }
.agents.is-live .agent:last-child { min-height: calc(100svh - var(--bar-h)); }
.agent__inline { margin: 0 0 var(--sc-5); max-width: 18rem; border-bottom: 2px solid var(--gold); }
.agent__inline img { display: block; width: 100%; height: auto; }
.agents.is-live .agent__inline { display: none; }
.agent__role { margin-top: var(--sc-2); color: var(--gold); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.04em; }
.agent__body { margin-top: var(--sc-5); display: grid; gap: var(--sc-3); color: var(--sc-ink-soft); max-width: 60ch; }
.agent__meta { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .agents__grid { grid-template-columns: 1fr; }
  .agents.is-live .agents__stage { display: none; }
  .agents.is-live .agent__inline { display: block; }
  .agents.is-live .agent, .agents.is-live .agent:last-child { min-height: 0; }
}
/* the same people on the Spanish page, standing on the line */
.es-agent { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: end; }
.es-agent .agent__inline { margin: 0; }
@media (max-width: 520px) { .es-agent { grid-template-columns: 1fr; } }

/* "your agents" strip on service pages: the static lineup with one line */
.strip { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.strip__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-3) var(--sc-6); }
.strip__head .sc-body { max-width: 40ch; }

/* reviews page filter */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sc-5); }
.chip { min-height: 2.6rem; padding: 0.45rem 1rem; border-radius: var(--r); border: 1px solid color-mix(in oklab, var(--sc-ink) 35%, transparent); background: transparent; color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.chip[aria-pressed="true"] { background: var(--gold); color: var(--black); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--gold); } }
.review-list { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) clamp(1.5rem, 4vw, 3.5rem); }
.review-list .q { grid-column: auto !important; }
.review-list .q[hidden] { display: none; }
@media (max-width: 760px) { .review-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- forms -- */
.form { display: grid; gap: var(--sc-5); }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.form legend { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); margin-bottom: var(--sc-3); padding: 0; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label, .field .label { font-weight: 600; font-size: var(--sc-t-sm); }
.field .hint { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border-radius: var(--r);
  background: #fff; color: #0B0C10; border: 1px solid #fff; font-size: 1rem;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: #FF8A7A; box-shadow: 0 0 0 2px #FF8A7A; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: var(--r); border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); font-weight: 600; font-size: var(--sc-t-sm); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.choice input:checked + span { background: var(--gold); color: var(--black); border-color: var(--gold); }
.choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice:hover span { border-color: var(--gold); } }
.form__status { padding: var(--sc-4); border-radius: var(--r); border: 1px solid var(--gold); background: color-mix(in oklab, var(--black) 40%, transparent); }
.form__status[hidden] { display: none; }
/* sending, sent and the honeypot: the result replaces the form on the page */
.form__hp { display: none !important; }
.form.is-sending button[type="submit"] { opacity: 0.7; cursor: progress; }
.form.is-sent > :not(.form__status) { display: none; }
.form__ok[hidden], .form__fail[hidden], .form__confirm[hidden] { display: none; }
.form__confirm { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); overflow-wrap: anywhere; }
.form__ok { font-size: var(--sc-t-lg); line-height: 1.5; }
.form__ok b { color: var(--gold); }
.form__again { display: block; margin-top: var(--sc-4); padding: 0; background: none; border: 0; font: inherit; font-size: var(--sc-t-sm); cursor: pointer; }
.form__fail { color: #FFD9D2; }
.form__error { color: #FFB4A8; font-size: var(--sc-t-sm); font-weight: 600; }
.form__note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.contact-list li { display: grid; gap: 0.15rem; }
.contact-list b { font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 600; }
.contact-list a { color: var(--sc-ink); font-size: var(--sc-t-lg); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-list a:hover { color: var(--gold); } }
.badges { display: flex; gap: var(--sc-6); align-items: center; margin-top: var(--sc-6); }
.badges img { height: 3.4rem; width: auto; }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .summit__layer, .doorstep__img { transform: none !important; }
  /* the descent becomes its landed composition, no pinned travel */
  .descent[data-sc-act] { height: auto !important; }
  .descent .sc-stage, .descent [data-sc-stage] { position: relative; }
  .descent__stage { --p: 1 !important; }
  /* no travel, so the scripted captions have nothing to narrate: show the landed scene and its story */
  .descent .d-caption { display: none; }
  .descent .d-copy { opacity: 1 !important; transform: none !important; }
  .places .profile__bar i { transform: none !important; }
  .alti { transition: none; }
}

/* home search: the criteria, read back in plain language */
.search-summary { margin: 0; padding: 0.85rem 1rem; border-left: 2px solid var(--gold); background: color-mix(in oklab, var(--black) 30%, transparent); font-size: var(--sc-t-sm); }
.search-summary span { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--sc-t-xs); margin-right: 0.4rem; }
.search-summary[hidden] { display: none; }
.field input[type="date"] { color-scheme: light; }

/* spacing utilities on the 4px scale (replace one-off inline styles) */
.mt-2 { margin-top: var(--sc-2); } .mt-3 { margin-top: var(--sc-3); } .mt-4 { margin-top: var(--sc-4); }
.mt-5 { margin-top: var(--sc-5); } .mt-6 { margin-top: var(--sc-6); }
.mt-7 { margin-top: clamp(2.5rem, 5vw, 4rem); } .mt-8 { margin-top: clamp(3rem, 6vw, 4.5rem); }
[id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }
.duo--center { align-items: center; }
.duo--airy { row-gap: clamp(2.5rem, 5vw, 4rem); }
.lede--wide { max-width: 52ch; }
/* a short note (service areas, a local fact): gold rule at the left */
.note { max-width: 52ch; padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid var(--gold); font-size: var(--sc-t-sm); line-height: 1.55; }
.note b { color: var(--gold); font-weight: 600; }
.split--form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.split--aside { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
@media (max-width: 860px) { .split--form, .split--aside { grid-template-columns: 1fr; } }
.legend--small { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); margin-bottom: 0.4rem; }
.contact-list .contact-list__email { font-size: var(--sc-t-base); word-break: break-all; }
.contact-list .contact-list__plain { font-size: var(--sc-t-base); }
.contact-list .contact-list__map, .foot a.foot__map { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.contact-list .contact-list__map { font-weight: 500; line-height: 1.5; }
.contact-list .link--small { font-size: var(--sc-t-sm); }

/* ================================================================ v3 ==== */
/* ------------------------------------------------------- hero (property) --
   The owner's photograph at its native proportions in a frame that stands on
   the gold line from the logo. Scroll eases the frame; nothing pins. */
.hero { position: relative; background: var(--black); padding-top: calc(var(--bar-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); overflow: clip;
  --t: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 78% 45%, color-mix(in oklab, var(--blue) 34%, transparent), transparent 70%); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy .lede { margin-top: var(--sc-5); color: #E4E9F6; max-width: 38ch; }
.hero__actions { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; }
.hero__jump { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; }
.hero__jump a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--gold) 60%, transparent); padding-bottom: 0.15rem; }
@media (hover: hover) and (pointer: fine) { .hero__jump a:hover { color: var(--gold); } }
.hero__photo { margin: 0; transform: translate3d(0, calc(var(--t) * -3.5vh), 0); }
.hero__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r) var(--r) 0 0; border-bottom: 3px solid var(--gold);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); background: #1A1D26; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.0 + var(--t) * 0.05)); transform-origin: 50% 70%; will-change: transform; }
.hero__photo figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.hero__photo figcaption a { color: var(--sc-ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .hero__photo figcaption a:hover { color: var(--gold); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__frame { animation: frame-rise 900ms var(--sc-ease-out) both 120ms; }
  @keyframes frame-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { order: 2; transform: none; }
  .hero__frame { aspect-ratio: 4 / 3.4; }
}
.hero--page { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ------------------------------------------------------- showcase (photo) --
   The neighborhood photograph opens from an inset frame to the full width as
   it scrolls into view: one deliberate move, tied to the scroll position. */
.showcase { background: var(--black); padding-top: clamp(4rem, 9vw, 7rem);
  --k: clamp(0, calc((var(--sc-p, 0) - 0.12) / 0.32), 1); }
.showcase__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sc-6); align-items: end; }
.showcase__head .sc-body { max-width: 40ch; }
.showcase__pano { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.showcase__window { overflow: hidden; aspect-ratio: 3 / 2; max-height: 88svh; width: 100%;
  clip-path: inset(0 calc((1 - var(--k)) * 9vw) round calc((1 - var(--k)) * 8px)); background: #1A1D26; }
.showcase__window img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc((0.5 - var(--sc-p, 0.5)) * 6%), 0) scale(1.08); will-change: transform; }
.showcase__pano figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.showcase__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-4) var(--sc-7); padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }
.showcase__foot .sc-body { max-width: 56ch; }
.showcase--page { background: var(--band-2); padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }
.showcase--page .showcase__pano { margin-top: 0; }
@media (max-width: 860px) {
  .showcase__head { grid-template-columns: 1fr; gap: var(--sc-4); }
  .showcase__window { aspect-ratio: 4 / 3; clip-path: inset(0 calc((1 - var(--k)) * 5vw) round calc((1 - var(--k)) * 6px)); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__window { clip-path: none; }
  .showcase__window img, .hero__frame img, .hero__photo { transform: none !important; }
}

/* ------------------------------------------------------ services (index) -- */
.svc-list { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.svc-list li { border-bottom: 1px solid var(--sc-hairline-strong); }
.svc-list a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 2.5rem; gap: var(--sc-5); align-items: center; padding: clamp(1.2rem, 2.4vw, 1.8rem) 0; color: var(--sc-ink); text-decoration: none; }
.svc-list__name { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em; transition: color 160ms var(--sc-ease-out); }
.svc-list__desc { color: var(--sc-ink-soft); max-width: 46ch; }
.svc-list__go { justify-self: end; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--gold) 70%, transparent); position: relative; transition: background-color 160ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.svc-list__go::after { content: "\2192"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .svc-list a:hover .svc-list__name { color: var(--gold); }
  .svc-list a:hover .svc-list__go { background: var(--gold); transform: translateX(4px); }
  .svc-list a:hover .svc-list__go::after { color: var(--black); }
}
@media (max-width: 760px) { .svc-list a { grid-template-columns: minmax(0, 1fr) 2.5rem; } .svc-list__desc { grid-column: 1; grid-row: 2; } .svc-list__go { grid-row: 1 / span 2; grid-column: 2; } }

/* --------------------------------------------------------------- closing -- */
.closing { background: var(--black); border-top: 1px solid var(--sc-hairline); padding-block: clamp(5rem, 11vw, 9rem); text-align: center; }
.closing__inner { display: grid; justify-items: center; gap: var(--sc-4); }
.closing__mark { width: 7.5rem; height: auto; margin-bottom: var(--sc-3); }
.closing .lede { margin-inline: auto; color: #E4E9F6; }
.closing__actions { margin-top: var(--sc-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3); }
.closing .small { margin-top: var(--sc-4); max-width: 52ch; }

/* ------------------------------------------------- an agent's number -- */
.agent__call { color: var(--gold); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .agent__call:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* ------------------------------------------------------ contact directory -- */
.directory { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.directory li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--sc-4); align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--sc-hairline-strong); }
.directory__who b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
.directory__who span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.directory .agent__call { font-size: var(--sc-t-lg); }
@media (max-width: 640px) { .directory li { grid-template-columns: 1fr auto; } .directory__who { grid-column: 1 / -1; } }
.mb-6 { margin-bottom: var(--sc-6); }
.figure--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ------------------------------------------- "Where we work" (the finder) --
   Replaces the old floating "9,470 ft · Miller Peak" altimeter. A discreet
   shortcut that opens a panel: the elevation story it used to tell, the
   counties we serve, and the two useful next steps. */
.finder {
  position: fixed; left: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem); z-index: 50;
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.45rem 1.05rem 0.45rem 0.85rem;
  background: color-mix(in oklab, var(--black) 94%, transparent); color: var(--sc-ink); cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); border-radius: 999px; box-shadow: var(--sc-e2);
  font: inherit; text-align: left; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
              gap 260ms var(--sc-ease-out), padding 260ms var(--sc-ease-out);
}
.finder.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.finder svg { width: 1.3rem; height: 1.3rem; color: var(--gold); flex: none; }
.finder__text { display: block; max-width: 12rem; overflow: hidden; white-space: nowrap; transition: max-width 280ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
.finder b { display: block; font-size: var(--sc-t-sm); font-weight: 600; line-height: 1.15; }
.finder small { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
/* after its introduction it settles to a pin in the margin; pointing at it or focusing it brings the label back */
.finder.is-compact:not(:hover):not(:focus-visible):not([aria-expanded="true"]) { gap: 0; padding-inline: 0.8rem; }
.finder.is-compact:not(:hover):not(:focus-visible):not([aria-expanded="true"]) .finder__text { max-width: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .finder:hover { border-color: var(--gold); } }
@media (max-width: 640px) { .finder { min-height: 2.75rem; padding: 0.35rem 0.9rem 0.35rem 0.7rem; } .finder small { display: none; }
  .finder.is-compact:not(:hover):not(:focus-visible):not([aria-expanded="true"]) { padding-inline: 0.7rem; } }

.finder-panel { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) + 5); display: grid; align-items: end; justify-items: start; }
.finder-panel[hidden] { display: none; }
.finder-panel__scrim { position: absolute; inset: 0; background: rgba(4, 8, 22, 0.62); opacity: 0; transition: opacity 220ms var(--sc-ease-out); }
.finder-panel__sheet {
  position: relative; width: min(33rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow-y: auto; margin: 1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem); background: #0E1016; color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); border-top: 3px solid var(--gold); border-radius: var(--r);
  box-shadow: var(--sc-e3); opacity: 0; transform: translateY(14px); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.finder-panel.is-open .finder-panel__scrim { opacity: 1; }
.finder-panel.is-open .finder-panel__sheet { opacity: 1; transform: none; }
.finder-panel__sheet:focus { outline: none; }
.finder-panel__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--sc-ink); cursor: pointer; }
.finder-panel__close svg { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .finder-panel__close:hover { background: var(--sc-hairline); } }
.finder-panel h2 { padding-right: 2.5rem; }
.finder-panel__lede { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.finder__profile { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: grid; gap: 0.55rem; }
.finder__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 4.6rem; gap: var(--sc-3); align-items: center; font-size: var(--sc-t-sm); }
.finder__place b { display: block; font-weight: 600; }
.finder__place small { display: block; color: var(--sc-ink-soft); font-size: 0.72rem; line-height: 1.25; }
.finder__bar { height: 0.55rem; position: relative; }
.finder__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 1px; background: color-mix(in oklab, var(--sc-ink) 38%, transparent); transform-origin: 0 50%; }
.finder__row--home .finder__bar i { background: var(--gold); }
.finder__row--home b { color: var(--gold); }
.finder__row--peak .finder__bar i { background: color-mix(in oklab, var(--blue) 70%, white 10%); }
.finder__ft { text-align: right; font-variant-numeric: tabular-nums; }
.finder-panel.is-open .finder__bar i { animation: bar-grow 700ms var(--sc-ease-out) both; }
.finder-panel.is-open .finder__row:nth-child(2) .finder__bar i { animation-delay: 60ms; }
.finder-panel.is-open .finder__row:nth-child(3) .finder__bar i { animation-delay: 120ms; }
.finder-panel.is-open .finder__row:nth-child(4) .finder__bar i { animation-delay: 180ms; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.finder__counties { list-style: none; margin: var(--sc-4) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.finder__counties li { padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline); display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: var(--sc-3); align-items: baseline; font-size: var(--sc-t-sm); line-height: 1.45; }
.finder__counties b { color: var(--gold); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.finder__counties span { color: var(--sc-ink-soft); }
.finder-panel__actions { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); align-items: center; }
.finder-panel__outside { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.finder-panel__src { margin-top: var(--sc-4); font-size: 0.7rem; color: var(--sc-ink-soft); }
body.finder-open { overflow: hidden; }
@media (max-width: 640px) {
  .finder-panel { justify-items: stretch; }
  .finder-panel__sheet { width: auto; margin: 0; border-radius: var(--r) var(--r) 0 0; max-height: 88svh; transform: translateY(40px); }
  .finder__row { grid-template-columns: 6.6rem minmax(0, 1fr) 4.2rem; }
  .finder__counties li { grid-template-columns: 5.6rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .finder, .finder__text, .finder-panel__sheet, .finder-panel__scrim { transition-duration: 1ms; transform: none; }
  .finder-panel.is-open .finder__bar i { animation: none; }
}

/* ------------------------------------------------------------ areas page --
   Rebuilt with the finder: the elevation story, then county by county. */
.areas-hero { background: var(--band-1); padding-top: calc(var(--bar-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(3rem, 7vw, 5rem); }
.areas-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.areas-hero .lede { margin-top: var(--sc-5); color: #E9EDF8; }
.county-jump { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.county-jump a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent); color: var(--sc-ink); text-decoration: none; font-weight: 600; font-size: var(--sc-t-sm); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .county-jump a:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } }
.areas-hero__facts { margin: 0; display: grid; gap: var(--sc-5); }
.areas-hero__facts div { border-top: 2px solid var(--gold); padding-top: var(--sc-3); }
.areas-hero__facts dt { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; }
.areas-hero__facts dd { margin: 0.35rem 0 0; color: #D7DFF7; font-size: var(--sc-t-sm); }
.profile__row--peak .profile__bar i { background: color-mix(in oklab, var(--blue) 75%, white 12%); }
.profile__row--peak .profile__name { color: #C9D6FF; }
.counties { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.county-card { grid-column: span 2; display: flex; flex-direction: column; gap: var(--sc-4); padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--sc-hairline-strong); border-top: 2px solid color-mix(in oklab, var(--gold) 70%, transparent); border-radius: var(--r); background: color-mix(in oklab, var(--black) 25%, transparent); }
.county-card--home { grid-column: span 4; border-top-color: var(--gold); }
.county-card:nth-child(2) { grid-column: span 2; }
.county-card h3 { font-size: var(--sc-t-xl); }
.county-card header p { margin-top: 0.25rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.county-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.county-card li { padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 9%, transparent); font-size: var(--sc-t-sm); }
.county-card .link { margin-top: auto; }
@media (max-width: 900px) { .counties { grid-template-columns: repeat(2, minmax(0, 1fr)); } .county-card, .county-card--home, .county-card:nth-child(2) { grid-column: auto; } .county-card--home { grid-column: 1 / -1; } }
@media (max-width: 560px) { .counties { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .areas-hero__grid { grid-template-columns: 1fr; } .areas-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .areas-hero__facts { grid-template-columns: 1fr; } }

/* ======================================================== easier reading ==
   For every visitor, and older visitors especially: larger type, lighter grey
   text for contrast (see the tokens at the top), and controls at least 44px
   tall so they are easy to tap. The look is unchanged; only sizes grow. */
:root {
  --sc-t-xs:   clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);       /* 15-16px (was 12-13) */
  --sc-t-sm:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16-17px (was 14-15) */
  --sc-t-base: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);     /* 18-20px (was 16-18) */
  --sc-t-lg:   clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem);        /* ledes */
}
.field input, .field select, .field textarea { font-size: 1.0625rem; }
.alti__unit, .alti__place { font-size: 0.8rem; }
.finder small { font-size: 0.8rem; }
@media (max-width: 640px) { .alti__num { font-size: 1rem; } .alti__place { font-size: 0.75rem; } }
/* the header keeps its own sizes so the four sections still fit on one line */
.nav__link, .bar__tel, .menu-btn { font-size: 1rem; }
.bar .bar__book, .lang__opt { font-size: 0.95rem; }
.lang__opt { min-height: 2.5rem; }
@media (max-width: 600px) { .lang__opt { min-height: 2.75rem; } }
/* small tablets: the globe steps out so the name keeps its room beside the larger type */
@media (min-width: 601px) and (max-width: 760px) {
  .lang__globe { display: none; }
  .bar .bar__book { padding-inline: 0.9rem; }
  .menu-btn { padding: 0 0.7rem; }
}
@media (min-width: 1021px) and (max-width: 1100px) { .nav__link { padding: 0 0.38rem; } .nav__link::after { left: 0.38rem; right: 0.38rem; } .brand { gap: 0.55rem; } }
@media (min-width: 601px) and (max-width: 640px) { .brand img { width: 3.1rem; } .brand span { font-size: 0.9rem; } .bar { column-gap: 0.6rem; } }
/* below 320px (very few phones): a slightly smaller mark and name keep row one on one line */
@media (max-width: 319px) {
  .bar { column-gap: 0.3rem; }
  .brand img { width: 2.4rem; }
  .brand span { font-size: 0.75rem; }
  .lang__opt { padding: 0 0.4rem; }
  .menu-btn { padding: 0 0.5rem; font-size: 0.9rem; }
}

/* tap targets: anything you tap that isn't a link inside a sentence */
.chip, .county-jump a, .choice span { min-height: 2.75rem; }
.hero__jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-bottom: 0; }
/* arrow links stay inline so the gold underline runs unbroken under the text and its arrow;
   padding gives them the same 44px tap height */
.link.link--arrow { display: inline-block; min-height: 0; padding-block: 0.55rem; }
.proof__links a, .way__links a, .agent__meta a, .link--small { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot ul, .foot address { gap: 0; }
.foot li a, .foot address a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.25rem; }
.drawer__meta { gap: 0; }
.drawer__meta a { display: flex; align-items: center; min-height: 2.75rem; padding: 0; }
.drawer__sub a { min-height: 3rem; }
:where(.team--static) .team__call { min-height: 2.75rem; }
:where(.team--static) .team__name { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; }
.team--static .team__stage { padding-bottom: 10rem; }       /* names, roles and numbers under the line, at the larger size */
@media (max-width: 820px) { .team--static .team__stage { padding-bottom: 3.5rem; } }
@media (max-width: 340px) { :where(.team--static) .team__name b { font-size: 0.8rem; } }
.agent__call, .contact-list a, .contact-list .contact-list__plain { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* "Scroll down to explore" on the homepage's first screen: a dark pill so it reads
   over sky or rock, with an arrow that nudges downward. It is also a link to the next part. */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: var(--sc-5);
  min-height: 3.1rem; padding: 0.4rem 1.25rem 0.4rem 0.45rem; border-radius: 999px;
  background: var(--black); color: var(--sc-ink); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--gold) 70%, transparent); box-shadow: var(--sc-e2);
  font-weight: 600; font-size: var(--sc-t-base); line-height: 1.2;
}
.scroll-cue__arrow { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--gold); color: var(--black); flex: none; }
.scroll-cue__arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  animation: cue-nudge 1.8s var(--sc-ease-out) infinite; }
@keyframes cue-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (hover: hover) and (pointer: fine) { .scroll-cue:hover { border-color: var(--gold); background: #12141B; } }
.scroll-cue:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .scroll-cue__arrow svg { animation: none; } }
@media (max-width: 640px) { .summit__copy { top: calc(var(--bar-h) + 1.25rem); } .scroll-cue { margin-top: var(--sc-4); } }
/* small phones: long button labels wrap onto two lines instead of pushing the page sideways */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; line-height: 1.25; } .bar .btn { white-space: nowrap; } }
.note .link { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* contrast fixes: the footer's gold button keeps black text (the footer link colour was
   turning it white on gold), and the homepage story text over the valley photo gets a soft shadow */
.foot a.btn--gold { color: var(--black); }
@media (hover: hover) and (pointer: fine) { .foot a.btn--gold:hover { color: var(--black); text-decoration: none; background: var(--gold-hi); } }
.d-copy h2, .d-copy p, .d-copy .link { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 22px rgba(5, 23, 80, 0.65); }
/* the first screen on phones: the four start buttons sit two by two, so the scroll cue
   still fits above the fold; the altimeter waits until the visitor scrolls (home.js) */
.cue-on .alti { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 640px) {
  .summit__copy .paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: var(--sc-5); }
  .summit__copy .paths a { min-height: 3.25rem; padding: 0.55rem 0.8rem; line-height: 1.2; font-size: 1.05rem; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .summit__copy { top: calc(var(--bar-h) + 0.85rem); }
  .summit__copy h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .summit__copy .lede { margin-top: var(--sc-3); }
}
.cta-band__actions .link { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* larger screens: the four start buttons stay on one line where the screen allows */
@media (min-width: 641px) { .summit__copy .paths { width: max-content; max-width: calc(100vw - 2 * var(--sc-gutter)); } }
/* short phones: the family story in the valley scene tightens so it stays below the header */
@media (max-width: 640px) and (max-height: 700px) {
  .d-copy { bottom: calc(0.75rem + 3.6rem); }
  .d-copy h2 { font-size: 1.85rem; }
  .d-copy p { margin-top: 0.6rem; line-height: 1.5; }
  .d-copy .link { margin-top: 0.4rem; }
}
@media (max-width: 640px) and (max-height: 600px) { .d-copy h2 { font-size: 1.6rem; } .d-copy p { font-size: 0.95rem; line-height: 1.45; } }
.alti { line-height: 1.2; }   /* the larger type kept the badge compact */
@media (min-width: 861px) and (max-width: 1180px) { .d-copy { max-width: min(34rem, 44vw); } }

/* "How we can help" on phones (860px and under). The section no longer travels with the
   page: it is an ordinary band, the cards sit in a row you swipe, and the arrows below move
   one card at a time. Nothing moves unless the visitor swipes or taps. Desktop is unchanged. */
@media (max-width: 860px) {
  .range { height: auto !important; }                 /* the engine pins it at 300vh; not here */
  .range .sc-stage { position: relative; height: auto; overflow: visible; display: block; }
  .range .rail { display: block !important; transform: none !important; padding: var(--sc-8) 0; }
  .range .rail__lead { width: auto; padding: 0 var(--sc-gutter); }
  .rail__track {
    position: relative; display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter);
    padding: var(--sc-6) var(--sc-gutter) var(--sc-2); scrollbar-width: none;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__track > * { width: min(80vw, 22rem); scroll-snap-align: start; }
  .range .way { opacity: 1; }
  .rail__track .way__img { aspect-ratio: 5 / 4; }       /* shorter photos so a card and the arrows fit on one screen */
  .rail__track .rail__end { justify-content: center; }
  .rail__nav { display: flex; align-items: center; justify-content: center; gap: var(--sc-5); margin-top: var(--sc-5); padding-inline: var(--sc-gutter); }
  .rail__btn {
    display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--black); color: var(--sc-ink); border: 2px solid var(--gold);
  }
  .rail__btn svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .rail__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  .rail__btn:disabled { opacity: 0.35; cursor: default; }
  .rail__count { min-width: 4.5em; text-align: center; font-weight: 600; font-size: var(--sc-t-base); }
}

/* Laptops and desktops (861px and wider): the line under the homepage headline is larger,
   heavier and near-black, with a soft light halo so it stays readable where the photo behind
   it turns from sky to hills (14-inch laptops at 150% scaling, about 1280x650, put it there).
   No panel: the photo shows through as before. Shorter laptop screens also get a headline that
   scales with the screen height, so the copy sits higher in the sky. Phones and tablets are unchanged. */
@media (min-width: 861px) {
  .summit__copy .lede {
    max-width: 36ch; margin-top: var(--sc-5);
    font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.75rem); font-weight: 650; line-height: 1.4; color: #0B0C10;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.85), 0 0 16px rgba(255, 255, 255, 0.7);
  }
}
@media (min-width: 861px) and (max-height: 820px) {
  .summit__copy { top: calc(var(--bar-h) + clamp(1.5rem, 6svh, 4rem)); }
  .summit__copy h1 { font-size: clamp(2.6rem, 11svh, 5.6rem); }
  .summit__copy { max-width: min(52rem, 68vw); }
  html[lang="es"] .summit__copy h1 { font-size: clamp(2.4rem, 9svh, 5rem); }   /* the Spanish headline is longer */
}

/* ------------------------------------------------------- reviews by agent --
   One group per agent: portrait, name and role, then two review cards in the
   site's card style (dark glass, gold top rule). Reviews are word for word;
   long ones fold to about six lines with "Read full review" (site.js). */
.rgroups { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
.rgroup[hidden] { display: none; }
.rgroup { scroll-margin-top: calc(var(--bar-h) + 1rem); }
.rgroup__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); padding-bottom: var(--sc-5);
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); }
.rgroup__faces { display: flex; flex: none; }
.rgroup__faces img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 8%;
  background: var(--band-3); border: 2px solid var(--gold); }
.rgroup__faces img + img { margin-left: -1.1rem; }
.rgroup__who { flex: 1 1 16rem; min-width: 0; }
.rgroup__name { font-size: var(--sc-t-xl); }
.rgroup__role { margin-top: 0.25rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.rgroup__more { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--sc-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.rgroup__ext { width: 1.05rem; height: 1.05rem; color: var(--gold); flex: none; }
@media (hover: hover) and (pointer: fine) { .rgroup__more:hover { color: var(--gold); } }
.rgroup__cards { margin-top: var(--sc-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.rcard { margin: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in oklab, var(--black) 24%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent);
  border-top: 2px solid var(--gold); border-radius: var(--r); box-shadow: var(--sc-e1); }
.rcard__for { align-self: flex-start; margin-bottom: var(--sc-3); padding: 0.2rem 0.65rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 70%, transparent); color: var(--gold); font-size: var(--sc-t-xs); font-weight: 600; }
.rcard__mark { font-family: var(--sc-font-display); font-weight: 600; font-size: 3.6rem; line-height: 0.8; height: 2rem; color: var(--gold); }
.rcard__text { margin: var(--sc-2) 0 0; font-size: var(--sc-t-base); line-height: 1.65; color: var(--sc-ink); }
.rcard__text p + p { margin-top: 0.9em; }
.rcard__text.is-folded { max-height: calc(1.65em * 7); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.rcard__toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; margin-top: var(--sc-2); padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--sc-t-sm); color: var(--gold);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.rcard__toggle::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--sc-ease-out); }
.rcard__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.rcard__toggle[hidden] { display: none; }
.rcard__toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .rcard__toggle:hover { color: var(--gold-hi); } }
.rcard__by { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.rcard__by b { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-base); }
@media (max-width: 860px) { .rgroup__cards { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rgroup__faces img { width: 3.75rem; height: 3.75rem; } .rgroup__more { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .rcard__toggle::after { transition: none; } }

/* No gold stripe across the top of cards and lists (owner, Oct 2026): cards keep one even,
   subtle border all round; numbered steps and fact lists get a quiet neutral hairline */
.start__card, .rcard, .county-card { border-top: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.county-card { border-top-color: var(--sc-hairline-strong); }
.start__card--book { border-top-color: color-mix(in oklab, var(--gold) 45%, transparent); }
.steps li, .ledger div, .areas-hero__facts div { border-top: 1px solid var(--sc-hairline-strong); }
/* the Miller Peak elevation badge (bottom left of the homepage) is a pill, like the other floating controls */
.alti { border-radius: 999px; padding-inline: 0.8rem 1.15rem; }
@media (max-width: 640px) { .alti { padding-inline: 0.65rem 0.95rem; } }

/* Menus without the gold rules (owner, Oct 2026): the desktop dropdown is an even, softly
   rounded panel, and the phone menu's sub-pages are indented without the gold side line */
.menu__list { border-top: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); border-radius: calc(var(--r) * 2); }
.drawer__sub { border-left: 0; padding-left: 1rem; }

/* Hover: small, quiet motion on things you can click (mouse and trackpad only;
   none when the visitor asks for reduced motion) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .menu__list b { display: inline-block; transition: transform 180ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
  .menu__list a:hover b { transform: translateX(4px); }
  .btn { transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
                     transform 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out); }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--sc-e2); }
  .btn:active { transform: translateY(0); }
  .rcard, .county-card { transition: transform 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out); }
  .rcard:hover, .county-card:hover { transform: translateY(-3px); box-shadow: var(--sc-e2); border-color: color-mix(in oklab, var(--gold) 45%, transparent); }
  .way__img img { transition: transform 600ms var(--sc-ease-out); }
  .way:hover .way__img img { transform: scale(1.04); }
  .rgroup__faces img { transition: transform 220ms var(--sc-ease-out); }
  .rgroup:hover .rgroup__faces img { transform: translateY(-2px); }
  .scroll-cue { transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 180ms var(--sc-ease-out); }
  .scroll-cue:hover { transform: translateY(-2px); }
  .alti { transition: opacity 260ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
  .alti:not(.is-hidden):hover { transform: translateY(-2px); }
}
.drawer__sub a, .drawer__list > li > a, .drawer__toggle { transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .drawer__sub a:hover, .drawer__list > li > a:hover, .drawer__toggle:hover { color: var(--gold); } }

/* "Where we work" pill: a plain link to Service Areas, styled like the site's other pills.
   Neutral hairline instead of the gold rule; the pin icon carries the gold */
.finder { border-color: color-mix(in oklab, var(--sc-ink) 22%, transparent); text-decoration: none; }
.finder.is-compact:not(:hover):not(:focus-visible) { gap: 0; padding-inline: 0.8rem; }
.finder.is-compact:not(:hover):not(:focus-visible) .finder__text { max-width: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .finder:hover { border-color: color-mix(in oklab, var(--gold) 60%, transparent); } }
@media (max-width: 640px) { .finder.is-compact:not(:hover):not(:focus-visible) { padding-inline: 0.7rem; } }

/* ======================================================== Service Areas ==
   Oct 2026 layout. The five counties are the way in (a large typographic index),
   then "the ride": the county list scrolls past a pinned elevation chart while a
   pin rides the real terrain line, a gold trail follows, and the readout names the
   nearest town (areas.js). */
.atlas { background: var(--band-1); padding-block: calc(var(--bar-h) + clamp(3rem, 8vw, 6rem)) clamp(3.5rem, 7vw, 6rem); }
.atlas__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.atlas .lede { margin-top: var(--sc-5); color: #E9EDF8; }
.atlas__facts { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.atlas__index ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.atlas__index a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem;
  padding: clamp(0.7rem, 1.4vw, 1rem) 0; color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.atlas__index li:first-child a { border-top: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.atlas__name { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em;
  transition: transform 220ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.atlas__meta { color: #DCE3F7; font-size: var(--sc-t-sm); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .atlas__index a:hover .atlas__name { transform: translateX(6px); } }
@media (hover: hover) and (pointer: fine) { .atlas__index a:hover .atlas__name { color: var(--gold); } }
.atlas__index a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.ride__head { max-width: 46rem; }
.ride__head .sc-body { margin-top: var(--sc-4); }
.ride__grid { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ride__stage { position: sticky; top: calc(var(--bar-h) + 1.5rem); padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: calc(var(--r) * 2);
  background: color-mix(in oklab, var(--black) 26%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.ride__readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; min-height: 3.4rem; }
.ride__place { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; }
.ride__where { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.ride__ft { margin-left: auto; color: var(--gold); font-weight: 600; font-size: var(--sc-t-lg); }
.ride__svg { display: block; width: 100%; height: auto; margin-top: var(--sc-4); overflow: hidden; }
.ride__area { fill: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.ride__line { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 38%, transparent); stroke-width: 2; stroke-linejoin: round; }
.ride__trail { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.ride__dot { fill: var(--band-2); stroke: color-mix(in oklab, var(--sc-ink) 60%, transparent); stroke-width: 2;
  transform-box: fill-box; transform-origin: center; transition: transform 240ms var(--sc-ease-out), fill 240ms var(--sc-ease-out), stroke 240ms var(--sc-ease-out); }
.ride__dot.is-on { fill: var(--gold); stroke: var(--gold); transform: scale(1.5); }
.ride__pin { transform: translate(var(--x), var(--y)); }
.ride__stem { stroke: color-mix(in oklab, var(--gold) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ride__knob { fill: var(--sc-ink); stroke: var(--gold); stroke-width: 4; }
.ride__list { display: grid; }
.ride__county { padding-block: clamp(2rem, 4vw, 3rem); min-height: 62vh; border-bottom: 1px solid var(--sc-hairline); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.ride__county:last-child { border-bottom: 0; min-height: 0; }
.ride__county h3 { font-size: var(--sc-t-2xl); }
.ride__sub { margin-top: 0.35rem; color: var(--sc-ink-soft); }
.ride__towns { list-style: none; margin: var(--sc-5) 0 var(--sc-4); padding: 0; }
.ride__towns li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline); }
.ride__towns li span:last-child { color: var(--sc-ink-soft); }
.ride__county > .sc-body { margin-block: var(--sc-4); }
.ride.is-live .ride__county { opacity: 0.5; transition: opacity 300ms var(--sc-ease-out); }
.ride.is-live .ride__county.is-active { opacity: 1; }
@media (max-width: 860px) {
  .atlas__grid { grid-template-columns: 1fr; align-items: start; }
  .ride__grid { grid-template-columns: 1fr; gap: 0; }
  /* phones: the chart pins under the header and the counties scroll beneath it */
  .ride__stage { top: var(--bar-h); z-index: 2; margin-inline: calc(var(--sc-gutter) * -1); border-radius: 0; border-width: 0 0 1px;
    background: var(--band-2); padding: 0.75rem var(--sc-gutter) 0.6rem; }
  .ride__readout { min-height: 2.4rem; }
  .ride__place { font-size: 1.35rem; }
  .ride__svg { margin-top: 0.35rem; max-height: 22svh; }
  .ride__county { min-height: 55svh; }
}
@media (prefers-reduced-motion: reduce) { .ride__dot, .ride.is-live .ride__county, .atlas__name { transition: none; } }

.atlas__facts span { white-space: nowrap; }

/* chart points are buttons: a larger invisible hit area, a hover/focus state, and a brief
   highlight on the matching town in the list after a click */
.ride__pt { cursor: pointer; outline: none; }
.ride__hit { fill: transparent; }
.ride__dot.is-hover { fill: var(--sc-ink); stroke: var(--gold); transform: scale(1.9); }
.ride__pt:focus-visible .ride__dot { stroke: var(--gold); stroke-width: 3; transform: scale(1.9); }
.ride__towns li.is-picked { animation: town-pick 1.6s var(--sc-ease-out); }
@keyframes town-pick { 0%, 30% { background: color-mix(in oklab, var(--gold) 22%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ride__towns li.is-picked { animation: none; background: color-mix(in oklab, var(--gold) 16%, transparent); } }
.ride__readout { pointer-events: none; position: relative; z-index: 0; }   /* display only: taps reach the chart points beneath */
@media (max-width: 860px) {
  .ride__dot { transform: scale(1.5); }
  .ride__dot.is-on { transform: scale(2); }
  .ride__dot.is-hover, .ride__pt:focus-visible .ride__dot { transform: scale(2.3); }
}
/* phones: the readout keeps one fixed line, so a changing town name never shifts the chart under a finger */
@media (max-width: 860px) {
  .ride__readout { flex-wrap: nowrap; height: 2.4rem; min-height: 0; overflow: hidden; white-space: nowrap; }
  .ride__where { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ride__place, .ride__ft { flex: none; }
}

/* Header bar: no hard edge. The bar is solid black behind its controls and keeps fading
   below its own edge, so it melts into whatever section sits under it (owner, Oct 2026).
   The controls stay on near-solid black, so everything remains readable. */
.bar { border-bottom: 0; background: linear-gradient(to bottom, var(--black) 0%, var(--black) 55%, color-mix(in oklab, var(--black) 88%, transparent) 100%); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: clamp(2rem, 4vw, 3.25rem); pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--black) 88%, transparent), color-mix(in oklab, var(--black) 45%, transparent) 45%, transparent); }
body.menu-open .bar::after { opacity: 0; }

/* the ride's pinned chart can shrink with its column (a long county note no longer widens the page) */
.ride__stage { min-width: 0; }
/* softer header fade (owner, Oct 2026): a shorter, lighter tail with eased stops, so the
   bar settles into the section below instead of casting a dark band over it */
.bar { background: linear-gradient(to bottom, var(--black) 0%, var(--black) 70%, color-mix(in oklab, var(--black) 94%, transparent) 100%); }
.bar::after { height: clamp(1.25rem, 2.2vw, 1.75rem);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--black) 55%, transparent) 0%,
    color-mix(in oklab, var(--black) 30%, transparent) 35%,
    color-mix(in oklab, var(--black) 12%, transparent) 65%,
    transparent 100%); }
.bar { background: linear-gradient(to bottom, var(--black) 0%, var(--black) 60%, color-mix(in oklab, var(--black) 90%, transparent) 100%); }
.bar::after { height: clamp(1.75rem, 3vw, 2.5rem);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--black) 62%, transparent) 0%,
    color-mix(in oklab, var(--black) 34%, transparent) 30%,
    color-mix(in oklab, var(--black) 14%, transparent) 60%,
    color-mix(in oklab, var(--black) 4%, transparent) 85%,
    transparent 100%); }
/* the tail starts exactly where the bar's own gradient ends, so there is no step between them */
.bar::after { height: clamp(2rem, 3.4vw, 2.75rem);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--black) 90%, transparent) 0%,
    color-mix(in oklab, var(--black) 58%, transparent) 22%,
    color-mix(in oklab, var(--black) 30%, transparent) 48%,
    color-mix(in oklab, var(--black) 11%, transparent) 74%,
    transparent 100%); }
/* the fade sits higher (owner, Oct 2026): it begins inside the bar, just below the controls'
   centre line, and is nearly gone by the bar's bottom edge, with only a short wisp beneath */
.bar { background: linear-gradient(to bottom,
  var(--black) 0%, var(--black) 38%,
  color-mix(in oklab, var(--black) 86%, transparent) 62%,
  color-mix(in oklab, var(--black) 62%, transparent) 82%,
  color-mix(in oklab, var(--black) 40%, transparent) 100%); }
.bar::after { height: clamp(0.9rem, 1.6vw, 1.25rem);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--black) 40%, transparent) 0%,
    color-mix(in oklab, var(--black) 14%, transparent) 50%, transparent 100%); }

/* =================================================== homepage: summit depth ==
   Pointer depth, turned up (owner, Oct 2026): the three planes travel about three
   times further, the front rocks tilt a touch, the headline floats against them,
   and a warm golden-hour light follows the cursor across the scene. Fine pointers
   only (home.js adds .is-pointer); touch and reduced motion keep the still scene. */
.summit.is-pointer .summit__far  { transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--t) * 22svh + var(--my, 0) * -14px), 0) scale(1.07); }
.summit.is-pointer .summit__mid  { transform: translate3d(calc(var(--mx, 0) * -48px), calc(var(--t) * 10svh + var(--my, 0) * -16px), 0); }
.summit.is-pointer .summit__near { transform: translate3d(calc(var(--mx, 0) * -92px), calc(var(--t) * -6svh + var(--my, 0) * -26px), 0) rotate(calc(var(--mx, 0) * -0.8deg)) scale(calc(1.02 + var(--t) * 0.06)); }
.summit.is-pointer .summit__copy { transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 8px), 0); }
.summit.is-pointer::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 214, 140, 0.55), rgba(255, 214, 140, 0) 42%); }

/* altimeter on phones: keep the rolling digits on their own layer so the
   counter never repaints the page around it while you scroll */
.alti { contain: layout paint; }
.odo__col { will-change: transform; }

/* Rebecca's edits: a larger mark and name in the bar on tablets and desktops (phones keep
   their two-row bar), and the name beside a larger mark in the footer */
@media (min-width: 601px) {
  :root { --bar-h: 5rem; }
  .brand { gap: 0.85rem; }
  .brand img { width: 4.6rem; }
  .brand span { font-size: 1.5rem; }
}
@media (min-width: 601px) and (max-width: 760px) { .brand img { width: 4rem; } .brand span { font-size: 1.15rem; } }
@media (min-width: 1021px) and (max-width: 1120px) { .brand { gap: 0.6rem; } .brand img { width: 3.6rem; } .brand span { font-size: 1.25rem; } }
@media (min-width: 1500px) { .brand img { width: 5.2rem; } .brand span { font-size: 1.7rem; } }
.brand { flex-shrink: 0; }
.foot__logo { display: inline-flex; align-items: center; gap: 1rem; color: var(--sc-ink); text-decoration: none; }
.foot__brand .foot__logo img { width: 9.5rem; }
.foot__logo span { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.45rem, 1.9vw, 1.85rem); line-height: 1.1; letter-spacing: -0.01em; }
@media (max-width: 480px) { .foot__brand .foot__logo img { width: 8.5rem; } }
/* desktop: the grandfather copy runs a little wider and, on shorter laptop screens,
   a little tighter, so "Our story" always ends above the elevation badge */
@media (min-width: 861px) {
  .d-copy { top: calc(var(--bar-h) + clamp(1rem, 4.5svh, 3.5rem)); }
  .d-copy p { max-width: 52ch; }
}
@media (min-width: 1181px) { .d-copy { max-width: min(36rem, 40vw); } }
@media (min-width: 861px) and (max-height: 820px) {
  .d-copy h2 { font-size: clamp(2.4rem, 7.5svh, 3.2rem); }
  .d-copy p { margin-top: 0.75rem; line-height: 1.55; }
  .d-copy .link { margin-top: 0.75rem; }
}
@media (min-width: 861px) and (max-height: 640px) {
  .d-copy p { font-size: 1rem; line-height: 1.5; }
}
/* with the larger mark, the four sections stay a little tighter up to 1460px so the
   bar never runs to the window edge */
@media (min-width: 1361px) and (max-width: 1460px) { .nav__list { gap: 0.15rem; } .nav__link { padding: 0 0.5rem; } .nav__link::after { left: 0.5rem; right: 0.5rem; } }