/* ==========================================================================
   Whitaker Residential
   One stylesheet. No framework, no build step.
   Sections: tokens, reset, type, controls, nav, hero, then page blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Light theme is locked. Navy panels are the one dark device, used twice
   (valuation band and footer) so the page never reads as two websites.
   -------------------------------------------------------------------------- */
:root{
  --paper:#fcfcfd;
  --paper-2:#f4f6fa;
  --mist:#e7edf6;
  --line:#dce3ee;
  --line-soft:#eaeff7;

  --ink:#0b1a30;
  --ink-2:#41516b;
  --ink-3:#616f89;

  --blue:#2b5fac;
  --blue-deep:#17427e;
  --blue-light:#4c86dc;
  --blue-wash:#eff4fc;

  --navy:#0b1a30;
  --navy-2:#102544;

  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:'Jost',var(--sans);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);

  --gut:clamp(1.25rem,5vw,5.5rem);
  --max:1560px;
  --rule:1px solid var(--line);

  /* Every corner on this site is square. One shape system, no exceptions. */
  --r:0px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Skip link so keyboard users are not dragged through the whole nav. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.9rem 1.4rem;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   3. Typography
   Jost carries display, Inter Tight carries anything you actually read.
   -------------------------------------------------------------------------- */
.d1,.d2,.d3,.d4{
  font-family:var(--display);
  font-weight:200;
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.d1{font-size:clamp(2.9rem,7.4vw,6.6rem)}
.d2{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.05}
.d3{font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-.016em}
.d4{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.2;font-weight:300;letter-spacing:-.01em}

/* A single accent treatment for the one word that carries the sentence.
   Same family, heavier weight. No second font dropped into a headline. */
.em{font-weight:400;color:var(--blue)}

.lede{
  font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:44ch;
}
.body{color:var(--ink-2);max-width:62ch}
.body + .body{margin-top:1.1em}
.small{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.tiny{font-size:.78rem;line-height:1.5;color:var(--ink-3)}

/* Eyebrows are rationed. Three on the home page, no more. */
.eyebrow{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  margin-bottom:1.5rem;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Measure helpers for display type. The ch unit resolves against the body
   font size, so it is useless for sizing a column of 70px Jost. */
.mw-sm{max-width:min(90%,480px)}
.mw-md{max-width:min(92%,660px)}
.mw-lg{max-width:min(94%,820px)}
.head-gap{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec{position:relative;padding-block:clamp(5rem,11vw,10.5rem)}
.sec-tight{padding-block:clamp(3.5rem,7vw,6rem)}
.grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}

/* Grain. Fixed, non-interactive, painted once. Never on a scrolling layer. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 2rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:var(--display);font-size:.78rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
/* Fill sweeps up from the base on hover. Cheap, transform only. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--blue);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{border-color:var(--blue);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.45)}
.btn-light:hover,.btn-light:focus-visible{border-color:#fff}
.btn-solid-light{--bg:#fff;--fg:var(--navy);--bd:#fff}

/* Text link with a rule that draws in from the left. */
.link{
  display:inline-flex;align-items:center;gap:.55rem;position:relative;
  font-family:var(--display);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;padding-bottom:.5rem;color:var(--ink);
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}
.link .ar{transition:transform .45s var(--ease)}
.link:hover .ar{transform:translateX(4px)}
.link-blue{color:var(--blue)}

/* Fields. Label above, input below, error under that. No placeholder labels. */
.field{display:grid;gap:.45rem}
.field > label{
  font-family:var(--display);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);
}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .95rem;
  background-color:#fff;color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);font-size:.98rem;line-height:1.4;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#c3cfe2}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,95,172,.14);
}
.field textarea{resize:vertical;min-height:6.5rem}

/* Native select arrows do not survive appearance:none, so the chevron is
   painted as a background image and the text is padded clear of it. */
.field select{
  appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23616f89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
}
.field .hint{font-size:.76rem;color:var(--ink-3)}
.field .err{font-size:.76rem;color:#b0303a;display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#b0303a;box-shadow:0 0 0 3px rgba(176,48,58,.12);
}
.field.is-bad .err{display:block}

/* Dark-panel variant. Contrast checked against --navy. */
.on-dark .field > label{color:#a9bdd9}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  color:#fff;
  background-color:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.24);
}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:#8ba1c0}
.on-dark .field input:hover,.on-dark .field select:hover,.on-dark .field textarea:hover{
  border-color:rgba(255,255,255,.4);
}
.on-dark .field input:focus,.on-dark .field select:focus,.on-dark .field textarea:focus{
  border-color:#fff;background-color:rgba(255,255,255,.13);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.on-dark .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9bdd9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.on-dark .field .hint{color:#8ba1c0}

.form-row{display:grid;gap:1.6rem 2rem;grid-template-columns:repeat(2,1fr)}
.form-row .span-2{grid-column:1/-1}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}

/* Form status message, one element, three states. */
.form-note{
  margin-top:1.2rem;font-size:.86rem;display:none;padding:.85rem 1rem;
  border-left:2px solid var(--blue);background:var(--blue-wash);color:var(--ink);
}
.form-note.is-on{display:block}
.on-dark .form-note{background:rgba(255,255,255,.08);border-left-color:#fff;color:#fff}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.78rem;color:var(--ink-3);line-height:1.5}
.consent input{margin-top:.22rem;accent-color:var(--blue);width:14px;height:14px;flex:none}
.on-dark .consent{color:#8ba1c0}

/* --------------------------------------------------------------------------
   6. Navigation
   64px tall, one line at desktop, hides going down and returns going up.
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;height:72px;
  display:flex;align-items:center;
  color:#fff;
  transition:transform .5s var(--ease),background-color .5s var(--ease),
             color .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{background:rgba(252,252,253,.92);backdrop-filter:blur(14px);color:var(--ink);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-101%)}
.nav-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:flex;align-items:baseline;gap:.6rem;font-family:var(--display);line-height:1}
.brand b{font-weight:300;font-size:1.28rem;letter-spacing:.02em}
.brand span{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.66}

.menu{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2.1rem)}
.menu a{
  font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;position:relative;padding-block:.4rem;white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current]::after{transform:scaleX(1);transform-origin:left}

.nav-cta{
  padding:.72rem 1.35rem;border:1px solid currentColor;
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.nav-cta:hover::before,.nav-cta:focus-visible::before{transform:translateY(0)}
.nav-cta:hover,.nav-cta:focus-visible{color:#fff;border-color:var(--blue)}

.burger{display:none;width:40px;height:40px;position:relative;margin-right:-8px}
.burger i{position:absolute;left:9px;right:9px;height:1px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s linear}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:23px}
.burger.is-on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.is-on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:49;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:6rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
.sheet.is-on{clip-path:inset(0 0 0 0);visibility:visible}
.sheet a{
  font-family:var(--display);font-weight:200;font-size:clamp(1.9rem,7vw,3rem);
  line-height:1.25;padding-block:.24rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s linear;
}
.sheet.is-on a{opacity:1;transform:none}
.sheet a:hover{color:var(--blue-light)}
.sheet-foot{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;
  font-size:.85rem;color:#a9bdd9;opacity:0;transition:opacity .6s var(--ease) .3s}
.sheet.is-on .sheet-foot{opacity:1}

@media (max-width:1080px){
  .menu,.nav-cta{display:none}
  .burger{display:block}
}

/* --------------------------------------------------------------------------
   7. Hero
   Four backdrops cross-fade behind a fixed cut-out portrait. The portrait
   hangs past the bottom edge of the hero and onto the strip below, which is
   where the whole composition gets its depth.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  --hero-pb:clamp(3.5rem,8vh,6rem);
  padding-block:clamp(7rem,14vh,10rem) var(--hero-pb);
  color:#fff;
  isolation:isolate;
  z-index:3;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:-2;background:var(--navy)}
.hero-bg figure{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.9s var(--ease-soft);
}
.hero-bg figure.is-on{opacity:1}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.09);
  transform-origin:60% 45%;
}
/* Slow drift on the live frame only. Reads as a photograph breathing. */
.hero-bg figure.is-on img{animation:drift 16s ease-out forwards}
@keyframes drift{from{transform:scale(1.09)}to{transform:scale(1.0)}}

/* Two scrims. A base wash for overall legibility, a left ramp so the
   headline sits on something dark no matter which photo is showing. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,16,32,.92) 0%,rgba(6,16,32,.74) 30%,rgba(6,16,32,.28) 58%,rgba(6,16,32,.5) 100%),
    linear-gradient(to top,rgba(6,16,32,.78) 0%,rgba(6,16,32,.1) 48%);
}

.hero-in{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  align-items:end;gap:2rem;
}
.hero-copy{max-width:min(56vw,690px);position:relative;z-index:3}
/* ch resolves against the body font, not the display font, so the hero
   headline gets an explicit ceiling instead. */
.hero .d1{color:#fff;font-size:clamp(2.7rem,5.7vw,5.3rem)}
.hero .em{color:#8ebbff}
.hero-sub{
  margin-top:1.6rem;max-width:41ch;
  font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.6;color:#d3dfee;
}

/* Lead capture, first thing on the page. */
.hero-search{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:0;max-width:560px}
.hero-search .f{
  flex:1 1 260px;display:flex;align-items:center;gap:.8rem;
  padding:1.05rem 1.2rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease),background-color .4s var(--ease);
}
.hero-search .f:focus-within{border-color:#fff;background:rgba(255,255,255,.17)}
.hero-search input{
  flex:1;min-width:0;background:none;border:0;color:#fff;font-size:.95rem;
}
.hero-search input::placeholder{color:#c2d2e6;opacity:1}
.hero-search input:focus{outline:0}
.hero-search .go{
  flex:none;padding:1.05rem 1.9rem;background:#fff;color:var(--navy);
  border:1px solid #fff;
  font-family:var(--display);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.hero-search .go:hover,.hero-search .go:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.hero-alt{margin-top:1.5rem;display:inline-flex}
.hero-alt.link{color:#cfe0f6}

/* The cut-out. Anchored to the bottom of the hero and allowed to overhang. */
.hero-figure{
  position:relative;z-index:3;justify-self:end;align-self:end;
  width:min(52vw,700px);
  /* --overhang is the distance she actually clears the hero's bottom edge by.
     Cancelling the hero's own bottom padding keeps that true at every width
     rather than leaving it as the difference between two clamps. */
  --overhang:clamp(5rem,7vw,7.5rem);
  margin-bottom:calc(-1 * (var(--hero-pb) + var(--overhang)));
  pointer-events:none;
}
.hero-figure img{
  width:100%;
  /* No drop shadow. The cut-out crosses onto the white strip below, and a
     shadow that reads as depth over the dark photograph becomes a navy
     rectangle the moment it lands on white.
     The short fade only softens the hard crop at her forearms. */
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 3%);
          mask-image:linear-gradient(to top,transparent 0,#000 3%);
}

@media (max-width:1080px){
  .hero{overflow:hidden}
  .hero-in{grid-template-columns:1fr}
  .hero-figure{
    position:absolute;right:calc(var(--gut) * -.4);bottom:0;
    width:min(64vw,420px);margin-bottom:0;opacity:.5;z-index:-1;
  }
  .hero-copy{max-width:none}
}
@media (max-width:620px){
  /* flex-basis sizes the HEIGHT once the row turns into a column, so the
     search field stretched to 260px tall until this reset it. */
  .hero-search{flex-direction:column;max-width:none;gap:.7rem}
  .hero-search .f{flex:0 0 auto}
  .hero-search .go{width:100%;justify-content:center;text-align:center}
  /* On a phone the cut-out lands directly behind the headline and the search
     field, so the photograph carries the hero on its own down here. */
  .hero-figure{display:none}
  .hero{min-height:86svh}
}

/* --------------------------------------------------------------------------
   8. Proof strip
   Sits directly under the hero so the portrait has something to land on.
   -------------------------------------------------------------------------- */
.proof{position:relative;z-index:1;background:var(--paper);border-bottom:var(--rule)}
.proof-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding-block:clamp(3rem,6vw,5rem);
}
/* Headroom for the overhang. The portrait hangs into the top right of this
   strip and the figures sit clear underneath it, so the top padding has to
   beat the largest overhang the clamp above can produce. */
@media (min-width:1081px){
  .proof-in{padding-block:clamp(7.5rem,9vw,10rem) clamp(3rem,6vw,5rem)}
}
.stat{padding-right:2rem}
.stat b{
  display:block;font-family:var(--display);font-weight:200;
  font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.02em;
}
.stat > span{
  display:block;margin-top:.85rem;font-size:.8rem;line-height:1.45;
  color:var(--ink-3);max-width:16ch;
}
@media (max-width:900px){
  .proof-in{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem;width:auto}
  .stat{padding-right:1rem}
}

/* --------------------------------------------------------------------------
   9. Intro
   Asymmetric split. Statement left, photograph right, offset plate behind.
   -------------------------------------------------------------------------- */
.intro-in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,7rem);align-items:center;
}
.intro-copy .d2{margin-bottom:2.2rem}
.intro-meta{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem}
.sig{font-family:var(--display);font-weight:300;font-size:1.05rem;letter-spacing:.01em}
.sig span{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}

.plate{position:relative}
.plate .mask{display:block}
.plate img{width:100%;object-fit:cover;aspect-ratio:4/5}
.plate::before{
  content:"";position:absolute;z-index:-1;
  inset:clamp(1.2rem,2.4vw,2.4rem) calc(clamp(1.2rem,2.4vw,2.4rem) * -1) calc(clamp(1.2rem,2.4vw,2.4rem) * -1) clamp(1.2rem,2.4vw,2.4rem);
  background:var(--mist);
}
@media (max-width:900px){
  .intro-in{grid-template-columns:1fr}
  .plate{order:-1}
  .plate img{aspect-ratio:5/4}
}

/* --------------------------------------------------------------------------
   10. Paths
   Three strips that open on hover. One layout family, used once.
   -------------------------------------------------------------------------- */
.paths{display:flex;height:clamp(430px,62vh,640px);border-block:var(--rule)}
.path{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  display:flex;align-items:flex-end;
  color:#fff;text-align:left;
  transition:flex-grow .85s var(--ease);
}
.path + .path{border-left:1px solid rgba(255,255,255,.18)}
.path img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.06);transition:transform 1.1s var(--ease);
}
.path::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,19,38,.93) 0%,rgba(7,19,38,.62) 34%,rgba(7,19,38,.2) 72%,rgba(7,19,38,.12) 100%);
  transition:background-color .7s var(--ease);
}
.path-in{padding:clamp(1.6rem,2.6vw,2.6rem);width:100%}
.path h3{font-family:var(--display);font-weight:200;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1}
.path p{
  margin-top:.9rem;max-width:34ch;font-size:.92rem;line-height:1.55;color:#cdd9e8;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.path .link{margin-top:1.4rem;color:#fff;opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease) .06s,transform .6s var(--ease) .06s}
.path:hover,.path:focus-within{flex-grow:2.3}
.path:hover img,.path:focus-within img{transform:scale(1)}
.path:hover p,.path:focus-within p,
.path:hover .link,.path:focus-within .link{opacity:1;transform:none}
/* Touch devices never hover, so show the copy up front there. */
@media (hover:none){
  .path p,.path .link{opacity:1;transform:none}
}
@media (max-width:860px){
  .paths{flex-direction:column;height:auto}
  .path{min-height:320px;flex:none}
  .path + .path{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
}

/* --------------------------------------------------------------------------
   11. Listings, horizontal pan
   The section pins itself with position:sticky and the track slides across.
   JS only supplies the progress number.
   -------------------------------------------------------------------------- */
.pan{position:relative;background:var(--paper-2)}
.pan-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pan-head{padding:0 var(--gut);max-width:var(--max);margin-inline:auto;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.8rem,3.4vw,3rem)}
.pan-track{
  display:flex;gap:clamp(1rem,1.8vw,1.75rem);padding-inline:var(--gut);
  transform:translate3d(var(--pan,0px),0,0);
  will-change:transform;
  backface-visibility:hidden;
}
.pan-end{flex:none;width:clamp(3rem,12vw,14rem)}
.card{flex:none;width:clamp(270px,27vw,400px);position:relative}
.card-img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.card-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}
.card-body{padding-top:1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.card-price{font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:-.01em}
.card-spec{font-size:.78rem;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.card-addr{margin-top:.35rem;font-size:.92rem;color:var(--ink-2)}
.card-status{
  position:absolute;top:0;left:0;
  background:var(--navy);color:#fff;
  padding:.5rem .85rem;font-family:var(--display);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.card-status.is-new{background:var(--blue)}
.pan-rail{height:1px;background:var(--line);margin:clamp(1.8rem,3vw,2.6rem) var(--gut) 0;position:relative;max-width:var(--max)}
.pan-rail i{position:absolute;left:0;top:-1px;height:3px;background:var(--blue);
  width:var(--panpct,12%);transition:width .12s linear}
@media (max-width:860px){
  .pan-stick{position:static;height:auto;padding-block:clamp(4rem,10vw,7rem)}
  .pan-track{transform:none;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:1rem}
  .card{scroll-snap-align:start;width:min(78vw,340px)}
  .pan-rail{display:none}
  .pan-head{flex-direction:column;align-items:flex-start}
}

/* --------------------------------------------------------------------------
   12. Navy band
   The one dark device on the page, reused by the valuation form and footer.
   -------------------------------------------------------------------------- */
.band{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.band > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.2;
}
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 0%,rgba(43,95,172,.5) 0%,rgba(11,26,48,0) 62%),
    linear-gradient(180deg,rgba(11,26,48,.78) 0%,rgba(11,26,48,.94) 100%);
}
.band .d2,.band .d3{color:#fff}
.band .lede,.band .body{color:#bccfe6}
.band .eyebrow{color:#8ebbff}

.value-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start}
.value-points{margin-top:2.4rem;display:grid;gap:1.15rem}
.value-points li{display:flex;gap:.9rem;font-size:.94rem;color:#bccfe6;line-height:1.5}
.value-points .ar{flex:none;margin-top:.35rem;color:#8ebbff}
.value-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  padding:clamp(1.6rem,3vw,2.8rem)}
@media (max-width:900px){.value-in{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   13. Tools grid
   Five tools, five cells, no filler tile. Two cells carry photography and
   one carries a flat blue so the grid is not six white boxes.
   -------------------------------------------------------------------------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:var(--rule)}
.tool{
  position:relative;background:var(--paper);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(230px,25vw,320px);
  padding:clamp(1.5rem,2.4vw,2.4rem);
  transition:background-color .5s var(--ease);
}
.tool:nth-child(1){grid-column:span 2;min-height:clamp(280px,30vw,400px)}
.tool > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.04);transition:transform 1.2s var(--ease)}
.tool:hover > img{transform:scale(1.09)}
.tool.on-img{color:#fff}
.tool.on-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,19,38,.9) 8%,rgba(7,19,38,.3) 62%,rgba(7,19,38,.15) 100%)}
.tool.on-blue{background:var(--blue);color:#fff}
.tool.on-blue:hover{background:var(--blue-deep)}
.tool:not(.on-img):not(.on-blue):hover{background:var(--blue-wash)}
.tool h3{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2}
.tool p{margin-top:.7rem;font-size:.88rem;line-height:1.5;color:var(--ink-2);max-width:32ch}
.tool.on-img p,.tool.on-blue p{color:rgba(255,255,255,.82)}
.tool .go{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.tool .go .ar{transition:transform .45s var(--ease)}
.tool:hover .go .ar{transform:translateX(5px)}
.tool::before{content:"";position:absolute;inset:0}
@media (max-width:900px){
  .tools{grid-template-columns:repeat(2,1fr)}
  .tool:nth-child(1){grid-column:span 2}
}
@media (max-width:600px){
  .tools{grid-template-columns:1fr}
  .tool:nth-child(1){grid-column:span 1}
}

/* --------------------------------------------------------------------------
   14. Process
   Sticky heading on the left, steps scroll past on the right and light up
   as they arrive. The rule between them fills with scroll progress.
   -------------------------------------------------------------------------- */
.proc-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem)}
.proc-stick{position:sticky;top:clamp(6rem,14vh,9rem);align-self:start}
.proc-steps{position:relative;padding-left:clamp(2rem,4vw,3.5rem)}
.proc-steps::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.proc-steps::after{content:"";position:absolute;left:0;top:.6rem;width:1px;
  height:var(--procpct,0%);background:var(--blue);transition:height .18s linear}
.step{position:relative;padding-block:clamp(1.6rem,3vw,2.6rem)}
.step + .step{border-top:1px solid var(--line-soft)}
.step::before{
  content:"";position:absolute;left:calc(clamp(2rem,4vw,3.5rem) * -1);top:calc(clamp(1.6rem,3vw,2.6rem) + .55rem);
  width:9px;height:9px;margin-left:-4px;background:var(--line);
  transition:background-color .5s var(--ease),transform .5s var(--ease);
}
.step.is-on::before{background:var(--blue);transform:scale(1.35)}
.step h3{font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,2.1vw,1.7rem);
  color:var(--ink-3);transition:color .5s var(--ease)}
.step.is-on h3{color:var(--ink)}
.step p{margin-top:.8rem;font-size:.95rem;line-height:1.62;color:var(--ink-2);max-width:52ch}
@media (max-width:900px){
  .proc-in{grid-template-columns:1fr}
  .proc-stick{position:static}
}

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.say{border-top:2px solid var(--ink);padding-top:1.6rem}
.says .say:nth-child(2){margin-top:clamp(1rem,2.4vw,2.4rem)}
.says .say:nth-child(3){margin-top:clamp(2rem,4.8vw,4.8rem)}
.say blockquote{font-family:var(--display);font-weight:300;
  font-size:clamp(1.18rem,1.75vw,1.52rem);line-height:1.4;letter-spacing:-.012em;text-wrap:pretty}
.say-by{margin-top:1.6rem;display:flex;align-items:center;gap:.85rem}
.say-by img{width:48px;height:48px;object-fit:cover;flex:none;filter:grayscale(1) contrast(1.05)}
.say-by b{display:block;font-weight:500;font-size:.88rem}
.say-by span{display:block;font-size:.76rem;color:var(--ink-3)}
@media (max-width:860px){
  .says{grid-template-columns:1fr;gap:2.5rem}
  .says .say:nth-child(2),.says .say:nth-child(3){margin-top:0}
}

/* --------------------------------------------------------------------------
   16. Neighbourhoods
   -------------------------------------------------------------------------- */
.hoods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
.hood{position:relative;display:block;overflow:hidden;background:var(--mist)}
.hood img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(1.03);
  transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.hood::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,19,38,.82) 0%,rgba(7,19,38,.18) 46%,rgba(7,19,38,0) 72%);
  transition:opacity .6s var(--ease)}
.hood:hover img{transform:scale(1.09)}
.hood-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.1rem,2vw,1.8rem);color:#fff}
.hood-in b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.7vw,1.42rem)}
.hood-in span{display:block;margin-top:.3rem;font-size:.78rem;color:#c2d3e8}
.hoods .hood:nth-child(2),.hoods .hood:nth-child(5){margin-top:clamp(1rem,3vw,3rem)}
@media (max-width:860px){
  .hoods{grid-template-columns:repeat(2,1fr)}
  .hoods .hood:nth-child(2),.hoods .hood:nth-child(5){margin-top:0}
}
@media (max-width:520px){.hoods{gap:.7rem}.hood-in{padding:.85rem}.hood-in b{font-size:1rem}.hood-in span{font-size:.72rem}}

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.cta-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem)}
.cta-lines{margin-top:2.6rem;display:grid;gap:1.4rem}
.cta-lines a,.cta-lines p{display:flex;align-items:center;gap:.9rem;font-size:.98rem;color:var(--ink-2)}
.cta-lines .ar{color:var(--blue);flex:none}
.cta-lines a:hover{color:var(--blue)}
@media (max-width:900px){.cta-in{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.foot{background:var(--navy);color:#fff;padding-block:clamp(4rem,8vw,6.5rem) 2.5rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.75fr));
  gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid rgba(255,255,255,.14)}
.foot h4{font-family:var(--display);font-size:.72rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:#7e93b3;margin-bottom:1.4rem}
.foot-nav{display:grid;gap:.75rem}
.foot-nav a{font-size:.92rem;color:#c8d7e9;transition:color .3s linear}
.foot-nav a:hover{color:#fff}
.foot-brand .brand{color:#fff;margin-bottom:1.2rem}
.foot-brand p{font-size:.92rem;color:#9db2ce;line-height:1.6;max-width:34ch}
.foot-sub{margin-top:1.8rem;display:flex;max-width:380px;border-bottom:1px solid rgba(255,255,255,.28)}
.foot-sub input{flex:1;min-width:0;background:none;border:0;color:#fff;padding:.8rem 0;font-size:.92rem}
.foot-sub input::placeholder{color:#7e93b3}
.foot-sub input:focus{outline:0}
.foot-sub button{padding:.8rem .4rem;color:#fff;display:flex;align-items:center}
.foot-sub button:hover{color:#8ebbff}
.foot-bot{padding-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;font-size:.78rem;color:#7e93b3}
.foot-bot a:hover{color:#fff}
.foot-legal{max-width:78ch;margin-top:1.6rem;font-size:.74rem;line-height:1.6;color:#7a8fae}
.socials{display:flex;gap:1.4rem}
@media (max-width:860px){.foot-top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   19. Persistent call dock
   -------------------------------------------------------------------------- */
.dock{
  position:fixed;right:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,2.4vw,2.2rem);z-index:45;
  display:flex;align-items:center;gap:.65rem;
  padding:.95rem 1.4rem;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 16px 40px rgba(11,26,48,.28);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .4s var(--ease);
}
.dock.is-on{opacity:1;transform:none;pointer-events:auto}
.dock:hover{background:var(--blue)}
@media (max-width:620px){.dock{display:none}}

/* --------------------------------------------------------------------------
   20. Reveal system
   One class per behaviour, all driven by IntersectionObserver adding .is-in.
   -------------------------------------------------------------------------- */
.ar{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}

.rv{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-1{transition-delay:.09s}
.rv-2{transition-delay:.18s}
.rv-3{transition-delay:.27s}
.rv-4{transition-delay:.36s}
.rv-5{transition-delay:.45s}

/* Photograph wipes open from the bottom edge.
   Never clip the observed element itself: a zero-area intersection rectangle
   stops IntersectionObserver firing and stops lazy images loading at all. */
.mask{position:relative;overflow:hidden;background:var(--mist)}
.mask > img{transform:scale(1.1);transition:transform 1.7s var(--ease)}
.mask.is-in > img{transform:scale(1)}
.mask::after{
  content:"";position:absolute;inset:0;z-index:2;background:var(--mist);
  transform:scaleY(1);transform-origin:50% 100%;
  transition:transform 1.15s var(--ease);
}
.mask.is-in::after{transform:scaleY(0)}

/* Statement lands one word at a time. */
.words span{display:inline-block;overflow:hidden;vertical-align:bottom}
.words span > i{
  display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .9s var(--ease);
}
.words.is-in span > i{transform:none}

.js .hero-copy > *{opacity:0;transform:translateY(26px)}
.js .hero-copy.is-in > *{opacity:1;transform:none;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .hero-copy.is-in > *:nth-child(2){transition-delay:.14s}
.js .hero-copy.is-in > *:nth-child(3){transition-delay:.26s}
.js .hero-copy.is-in > *:nth-child(4){transition-delay:.36s}
.js .hero-figure{opacity:0;transform:translateY(40px) scale(.99)}
.js .hero-figure.is-in{opacity:1;transform:none;
  transition:opacity 1.5s var(--ease) .2s,transform 1.5s var(--ease) .2s}

/* Parallax layers. JS writes --py, CSS does the moving. */
[data-par]{transform:translate3d(0,var(--py,0px),0)}

/* --------------------------------------------------------------------------
   21. Page header for interior pages
   -------------------------------------------------------------------------- */
.phead{position:relative;color:#fff;padding-block:clamp(9rem,18vh,13rem) clamp(4rem,8vw,7rem);overflow:hidden;isolation:isolate}
.phead > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(6,16,32,.94) 0%,rgba(6,16,32,.76) 40%,rgba(6,16,32,.52) 100%)}
.phead .d1{color:#fff;max-width:min(94%,900px);font-size:clamp(2.4rem,4.7vw,4.4rem)}
.phead .lede{color:#cddcee;margin-top:1.5rem}
.crumb{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#9db2ce;margin-bottom:1.6rem}
.crumb a:hover{color:#fff}

/* --------------------------------------------------------------------------
   22. Reduced motion
   Everything above collapses to its finished state. Nothing moves.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rv,.js .hero-copy > *,.js .hero-figure{opacity:1;transform:none}
  .mask::after{transform:scaleY(0)}
  .mask > img{transform:none}
  .words span > i{transform:none}
  .path p,.path .link{opacity:1;transform:none}
  .hero-bg figure.is-on img{animation:none;transform:scale(1)}
  [data-par]{transform:none}
  .pan-track{transform:none;overflow-x:auto}
  .pan-stick{position:static;height:auto;padding-block:5rem}
}

/* --------------------------------------------------------------------------
   23. Interior page blocks
   -------------------------------------------------------------------------- */

/* Listings index -------------------------------------------------------- */
.filters{
  display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:1.4rem 1.6rem;align-items:end;
  padding-bottom:clamp(1.8rem,3vw,2.6rem);border-bottom:var(--rule);
}
.filters .btn{padding-block:.86rem}
@media (max-width:1000px){.filters{grid-template-columns:repeat(2,1fr)}.filters .btn{grid-column:1/-1;justify-content:center}}
@media (max-width:560px){.filters{grid-template-columns:1fr}}

.results{
  margin-top:clamp(1.4rem,2.4vw,2rem);display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;font-size:.86rem;color:var(--ink-2);
}
.grid-listings{
  margin-top:clamp(2rem,4vw,3.4rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.6vw,2.6rem);
}
@media (max-width:900px){.grid-listings{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-listings{grid-template-columns:1fr}}
.grid-listings .card{width:auto}

/* Generic two column split ---------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split-flip > *:first-child{order:2}
@media (max-width:900px){
  .split,.split-wide{grid-template-columns:1fr}
  .split-flip > *:first-child{order:0}
}

/* Checklists ------------------------------------------------------------- */
.checks{display:grid;gap:1.15rem;margin-top:2rem}
.checks li{display:flex;gap:.9rem;line-height:1.55;color:var(--ink-2)}
.checks .ar{flex:none;margin-top:.32rem;color:var(--blue)}

/* Numbered feature rows, used where a checklist would be too flat -------- */
.rows{margin-top:clamp(2rem,4vw,3rem);border-top:var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1rem clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.5rem,2.8vw,2.4rem);border-bottom:var(--rule)}
.row h3{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2}
.row p{font-size:.95rem;line-height:1.62;color:var(--ink-2);max-width:58ch}
@media (max-width:720px){.row{grid-template-columns:1fr;gap:.6rem}}

/* Callout ---------------------------------------------------------------- */
.note{border-left:2px solid var(--blue);background:var(--blue-wash);padding:1.3rem 1.5rem;margin-top:2rem}
.note p{font-size:.92rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.note b{color:var(--ink)}

/* FAQ -------------------------------------------------------------------- */
.faq{border-top:var(--rule);margin-top:clamp(2rem,4vw,3rem)}
.faq details{border-bottom:var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:1.5rem;align-items:baseline;justify-content:space-between;
  padding-block:clamp(1.25rem,2.2vw,1.75rem);
  font-family:var(--display);font-weight:300;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.35;
  transition:color .3s linear;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary .pm{flex:none;position:relative;width:14px;height:14px;margin-top:.4rem}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:currentColor;
  transition:transform .4s var(--ease);
}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary{color:var(--blue)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .ans{padding-bottom:clamp(1.25rem,2.2vw,1.75rem);max-width:70ch}
.faq .ans p{font-size:.95rem;line-height:1.65;color:var(--ink-2)}
.faq .ans p + p{margin-top:.9rem}
.faq .ans a{color:var(--blue);border-bottom:1px solid currentColor}

/* Calculators ------------------------------------------------------------ */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
  border:var(--rule);background:var(--paper);
}
.calc-in{padding:clamp(1.6rem,3vw,2.8rem);display:grid;gap:1.5rem}
.calc-out{
  align-self:stretch;background:var(--navy);color:#fff;
  padding:clamp(1.6rem,3vw,2.8rem);display:flex;flex-direction:column;justify-content:center;gap:1.3rem;
}
.calc-out .big{font-family:var(--display);font-weight:200;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.4rem,4.4vw,3.5rem)}
.calc-out .cap{font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#8ebbff}
.calc-out dl{display:grid;gap:.7rem;margin:0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16)}
.calc-out .line{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:#bccfe6}
.calc-out .line b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.calc-out .warn{font-size:.82rem;line-height:1.5;color:#ffd9a8;display:none}
.calc-out .warn.is-on{display:block}
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (max-width:980px){.calc{grid-template-columns:1fr}}
@media (max-width:520px){.calc-grid{grid-template-columns:1fr}}

/* Range input, themed to match the fields. */
.field input[type="range"]{
  padding:0;height:30px;appearance:none;cursor:pointer;
  border:0;background:transparent;box-shadow:none;
}
.field input[type="range"]:focus{box-shadow:none;outline:0}
.field input[type="range"]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.field input[type="range"]::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.field input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:16px;height:16px;margin-top:-7px;background:var(--blue);border:0;
}
.field input[type="range"]::-moz-range-track{height:2px;background:var(--line)}
.field input[type="range"]::-moz-range-thumb{width:16px;height:16px;background:var(--blue);border:0;border-radius:0}
.field .val{font-family:var(--display);font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* About ------------------------------------------------------------------ */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem;margin-top:2.4rem}
.cred b{display:block;font-family:var(--display);font-weight:300;font-size:1.05rem}
.cred span{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.25rem}
@media (max-width:560px){.creds{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.4vw,1.25rem)}
.gallery .mask:nth-child(odd){margin-top:clamp(1rem,3vw,3rem)}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   24. Phone and small tablet
   Everything above is already fluid. This block fixes the things that are
   specifically wrong on a touch device rather than merely narrow.
   -------------------------------------------------------------------------- */
@media (max-width:860px){

  /* iOS Safari zooms the whole page when a focused field is under 16px.
     Nothing else in here matters as much as this does. */
  .field input,.field select,.field textarea,
  .hero-search input,.foot-sub input,.filters input,.filters select{
    font-size:16px;
  }
  .field input,.field select{padding-block:.92rem}
  .field textarea{min-height:7rem}

  /* Labels and helper text were down at 11 and 12px, which is under the
     comfortable floor once the screen is at arm's length. */
  .field > label{font-size:.8rem;letter-spacing:.16em}
  .field .hint,.field .err{font-size:.82rem}
  .eyebrow{font-size:.8rem;letter-spacing:.2em;margin-bottom:1.1rem}
  .consent{font-size:.85rem;line-height:1.55}
  .sig span{font-size:.8rem}
  .field > label{font-size:.82rem}
  .stat > span{font-size:.86rem;max-width:22ch}
  .cred span,.tiny,.card-spec{font-size:.84rem}
  .say-by span{font-size:.82rem}
  .hood-in span{font-size:.8rem}
  .foot-legal{font-size:.8rem}

  /* Tap targets. A transparent extension keeps the 44px touch area without
     moving the underline away from the text it belongs to. */
  .link{position:relative}
  .link::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:46px;
  }
  .foot-nav{gap:.2rem}
  .foot-nav a{display:block;padding-block:.62rem}
  .crumb{font-size:.78rem}
  .crumb a{display:inline-block;padding-block:.7rem}
  .brand{padding-block:.7rem}
  .socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-11px}
  .foot-bot .socials{gap:.6rem}
  .foot-sub button{padding-inline:.9rem}

  /* Checkboxes are 14px of hit area inside a label that runs three lines, so
     the box gets bigger and the label keeps its own generous target. */
  .consent{gap:.85rem;padding-block:.35rem}
  .consent input{width:20px;height:20px;margin-top:.1rem}

  /* Buttons already clear 44px, but full width reads better on a phone and
     removes any chance of a cramped label. */
  .btn{width:100%;justify-content:center;padding-block:1.1rem}
  .cta-lines{gap:.4rem}
  .cta-lines a,.cta-lines p{padding-block:.6rem}
}

@media (max-width:600px){
  /* Three figures in a two column grid leaves an orphan, so on a phone they
     become a list with the number reading across into its label. */
  .proof-in{grid-template-columns:1fr;gap:0}
  .stat{
    display:flex;align-items:baseline;gap:1.1rem;padding-right:0;
    padding-block:1.15rem;border-top:1px solid var(--line-soft);
  }
  .stat:first-child{border-top:0;padding-top:0}
  .stat b{font-size:2.5rem;flex:none;min-width:3.4ch}
  .stat > span{margin-top:0;max-width:none}

  /* The nav sheet is the whole navigation on a phone, so its links get real
     height rather than relying on the font size alone. */
  .sheet a{padding-block:.5rem}
  .sheet-foot{gap:1rem 1.5rem;font-size:.9rem}
  .sheet-foot a{padding-block:.4rem}

  /* Calculator output reads as the answer, so it keeps its weight. */
  .calc-out{padding-block:2rem}
  .calc-out .big{font-size:clamp(2.2rem,11vw,3rem)}

  /* Listing cards carry the price and address, which should not shrink. */
  .card-price{font-size:1.25rem}
  .card-addr{font-size:.95rem}
}