/* ==========================================================================
   JASJEET SINGH · eXp REALTY — PREMIUM LANDING SYSTEM
   One design system, three pages: Buyer, Seller/Valuation, Relocation.

   Direction (approved from reference art direction):
     quiet authority · high-end editorial · cinematic but uncluttered
     deep ink grounds · editorial serif display · Inter body
     signature red used as a scalpel, never as decoration
     baby blue reserved for data, map pulses and selected states

   Nothing warm. No orange, gold, beige or cream anywhere in this file.
   ========================================================================== */

:root{
  /* --- grounds --- */
  --ink:#0B0C0E;          /* deepest ground */
  --ink-2:#121316;        /* raised ground */
  --ink-3:#191B1F;        /* card ground */
  --charcoal:#1F1F1F;
  --pearl:#F4F5F7;        /* cool pearl grey */
  --pearl-2:#E8EAEE;
  --white:#FFFFFF;

  /* --- signature --- */
  --red:#D9381E;
  --blue:#89CFF0;

  /* --- opacity-derived tones (no new hues are ever introduced) --- */
  --w-92:rgba(255,255,255,.92);
  --w-72:rgba(255,255,255,.72);
  --w-56:rgba(255,255,255,.56);
  --w-40:rgba(255,255,255,.40);
  --w-22:rgba(255,255,255,.22);
  --w-12:rgba(255,255,255,.12);
  --w-07:rgba(255,255,255,.07);
  --w-04:rgba(255,255,255,.04);

  --k-72:rgba(11,12,14,.72);
  --k-40:rgba(11,12,14,.40);
  --k-16:rgba(11,12,14,.16);
  --k-08:rgba(11,12,14,.08);

  --red-90:rgba(217,56,30,.90);
  --red-56:rgba(217,56,30,.56);
  --red-32:rgba(217,56,30,.32);
  --red-18:rgba(217,56,30,.18);
  --red-10:rgba(217,56,30,.10);
  --blue-72:rgba(137,207,240,.72);
  --blue-38:rgba(137,207,240,.38);
  --blue-18:rgba(137,207,240,.18);

  /* --- type --- */
  --serif:"Instrument Serif",Georgia,"Times New Roman","Noto Serif",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- rhythm --- */
  --gut:22px;
  --max:1280px;
  --sec:clamp(64px,9vw,124px);

  /* --- motion --- */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-in:cubic-bezier(.65,0,.35,1);
  --t-1:.28s;
  --t-2:.6s;
  --t-3:1.05s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--w-72);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,dl,dd,dt,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--red);color:#fff;padding:14px 20px;font-weight:600}
.skip:focus{left:10px;top:10px}

/* controlled atmospheric grain — one tiny inline texture, no extra request */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:overlay;
}

/* ------------------------------------------------------------- structure */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
.sec{position:relative;padding:var(--sec) 0;z-index:2}
.sec--pearl{background:var(--pearl);color:rgba(31,31,31,.74)}
.sec--ink2{background:var(--ink-2)}
.sec--flush{padding-top:0}
.hr{height:1px;background:var(--w-12);border:0;margin:0}
.sec--pearl .hr{background:var(--k-16)}

/* ------------------------------------------------------------------ type */
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red);flex:none}
.eyebrow--plain::before{display:none}
.sec--pearl .eyebrow{color:var(--red)}

.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7.6vw,86px);line-height:1.02;letter-spacing:-.012em;
  color:var(--white);text-transform:uppercase;
}
.display em{font-style:normal;color:var(--red)}
.sec--pearl .display{color:var(--charcoal)}

.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.008em;
  color:var(--white);text-transform:uppercase;
}
.h2 em{font-style:normal;color:var(--red)}
.sec--pearl .h2{color:var(--charcoal)}

.h3{
  font-family:var(--sans);font-weight:600;font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.3;letter-spacing:.01em;color:var(--white);
}
.sec--pearl .h3{color:var(--charcoal)}

.lede{font-size:clamp(16px,1.6vw,19px);line-height:1.62;color:var(--w-72);max-width:46ch}
.sec--pearl .lede{color:rgba(31,31,31,.72)}
.body{font-size:15.5px;line-height:1.65;color:var(--w-56)}
.sec--pearl .body{color:rgba(31,31,31,.66)}
.fine{font-size:12.5px;line-height:1.55;color:var(--w-40)}
.sec--pearl .fine{color:rgba(31,31,31,.52)}

/* stage / label caps used instead of numerals */
.cap{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--w-56)}
.sec--pearl .cap{color:rgba(31,31,31,.58)}

/* ------------------------------------------------------------- controls */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:17px 28px;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  isolation:isolate;overflow:hidden;transition:transform var(--t-1) var(--e),box-shadow var(--t-1) var(--e);
  will-change:transform;
}
.btn__i{flex:none;width:15px;height:15px;transition:transform var(--t-1) var(--e)}
.btn:hover .btn__i{transform:translateX(4px)}

.btn--red{background:var(--red);color:#fff;box-shadow:0 14px 34px -18px var(--red-90)}
/* the light sweep — pure transform, no repaint of the button itself */
.btn--red::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0));
  transform:translateX(0) skewX(-18deg);transition:transform .85s var(--e);
}
.btn--red:hover::after{transform:translateX(340%) skewX(-18deg)}
.btn--red:hover{box-shadow:0 18px 44px -16px var(--red-90)}

.btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--w-22)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--white)}
.sec--pearl .btn--ghost{color:var(--charcoal);box-shadow:inset 0 0 0 1px var(--k-16)}
.sec--pearl .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--charcoal)}

.btn--line{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--red-32);min-height:50px;padding:14px 22px}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--red);background:var(--red-10)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* text link with a drawn underline */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);
}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--red);
  transform:scaleX(1);transform-origin:left;transition:transform var(--t-1) var(--e)}
.tlink:hover::after{transform:scaleX(.4)}

/* ---------------------------------------------------------------- header */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:linear-gradient(180deg,rgba(11,12,14,.86),rgba(11,12,14,0));
  transition:background var(--t-2) var(--e),box-shadow var(--t-2) var(--e),backdrop-filter var(--t-2) var(--e);
}
.nav.is-stuck{
  background:rgba(11,12,14,.88);backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 var(--w-07);
}
.nav__in{display:flex;align-items:center;gap:18px;min-height:76px}
.nav__logo{display:flex;align-items:center;min-height:48px;flex:none}
.nav__logo img{width:clamp(138px,17vw,186px);height:auto}
.nav__sp{flex:1}
.nav__tel{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;min-width:48px;justify-content:center;
  padding:0 16px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--w-22);
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--white);
  transition:box-shadow var(--t-1) var(--e),color var(--t-1) var(--e);
}
.nav__tel:hover{box-shadow:inset 0 0 0 1px var(--red);color:#fff}
.nav__tel svg{color:var(--red);flex:none}
.nav__tel span{display:none}
.nav__cta{display:none}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:104px 0 48px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* the interim treatment while photography is pending — an architectural
   light study, not a flat colour. Replaced wholesale by a photograph. */
.hero__bg--study{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(137,207,240,.10), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(217,56,30,.12), transparent 60%),
    linear-gradient(160deg,#15171B 0%, #0D0E11 46%, #08090B 100%);
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(11,12,14,.94) 0%,rgba(11,12,14,.76) 34%,rgba(11,12,14,.22) 62%,rgba(11,12,14,.55) 100%);
}
.hero__veil--btm{background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,transparent 30%,rgba(11,12,14,.85) 100%)}
.hero__in{position:relative;z-index:3;display:grid;gap:38px;align-items:center;width:100%}
.hero__copy{max-width:640px}
.hero__h1{margin:20px 0 0}
.hero__sub{margin-top:20px;max-width:38ch}
.hero__cta{margin-top:30px}
.hero__note{margin-top:22px;display:flex;align-items:flex-start;gap:9px}
.hero__note svg{flex:none;width:14px;height:14px;color:var(--w-40);margin-top:3px}

/* the advisor portrait, cut into the composition */
.hero__figure{position:relative;z-index:2;align-self:end;justify-self:center;max-width:520px}
.hero__figure img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,0) 99%);
  mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,0) 99%);
}

/* ------------------------------------------------------------- lead card */
.lead{
  position:relative;background:rgba(18,19,22,.90);backdrop-filter:saturate(140%) blur(12px);
  box-shadow:inset 0 0 0 1px var(--w-12), 0 40px 80px -40px rgba(0,0,0,.9);
  border-radius:3px;padding:26px 22px 24px;
}
.lead::before{content:"";position:absolute;left:0;top:0;width:52px;height:2px;background:var(--red)}
.lead__t{font-family:var(--serif);font-size:clamp(22px,2.4vw,27px);line-height:1.12;color:var(--white);text-transform:uppercase;letter-spacing:.005em}
.lead__s{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--w-56)}
.lead__form{margin-top:20px;display:grid;gap:10px}
.lead__priv{margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.lead__priv svg{flex:none;width:13px;height:13px;color:var(--w-40);margin-top:2px}

/* fields */
.f{position:relative;display:block}
.f__i{
  width:100%;min-height:54px;padding:15px 15px 15px 44px;border:0;border-radius:2px;
  background:var(--w-04);box-shadow:inset 0 0 0 1px var(--w-12);
  color:var(--white);font-size:16px;
  transition:box-shadow var(--t-1) var(--e),background var(--t-1) var(--e);
}
.f__i::placeholder{color:var(--w-40)}
.f__i:focus{outline:0;background:var(--w-07);box-shadow:inset 0 0 0 1px var(--blue),0 0 0 4px var(--blue-18)}
.f__i[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--red),0 0 0 4px var(--red-18)}
.f__ic{position:absolute;left:16px;top:19px;width:16px;height:16px;color:var(--w-40);pointer-events:none}
.f--bare .f__i{padding-left:15px}
select.f__i{appearance:none;padding-right:40px;cursor:pointer}
.f__chev{position:absolute;right:15px;top:20px;width:14px;height:14px;color:var(--w-40);pointer-events:none}
textarea.f__i{min-height:96px;resize:vertical;line-height:1.5;padding-top:15px}

.err{display:none;font-size:12.5px;color:var(--red);margin-top:6px}
.err.on{display:block}
.formmsg{
  display:none;margin-top:14px;padding:14px 16px;border-radius:2px;
  background:var(--red-10);box-shadow:inset 0 0 0 1px var(--red-32);
  font-size:13.5px;line-height:1.5;color:var(--white);
}
.formmsg.on{display:block}
.chk{display:flex;gap:11px;align-items:flex-start;padding:9px 0;cursor:pointer}
.chk input{flex:none;width:19px;height:19px;margin:2px 0 0;accent-color:#D9381E}
.chk span{font-size:13px;line-height:1.5;color:var(--w-56)}

/* --------------------------------------------------------------- plates */
/* photography slots — fixed ratios so a swap never shifts layout */
.plate{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--ink-3)}
.plate img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--w-12);pointer-events:none;border-radius:2px}
.plate--16x9{aspect-ratio:16/9}
.plate--4x3{aspect-ratio:4/3}
.plate--3x4{aspect-ratio:3/4}
.plate--1x1{aspect-ratio:1/1}
.plate--21x9{aspect-ratio:21/9}
/* interim architectural study fills — removed the moment a photo lands */
.plate--study{
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(137,207,240,.09), transparent 60%),
    radial-gradient(70% 70% at 80% 90%, rgba(217,56,30,.09), transparent 60%),
    linear-gradient(155deg,#1B1D21,#0E0F12);
}
.plate--study-2{
  background:
    radial-gradient(70% 60% at 70% 20%, rgba(137,207,240,.12), transparent 60%),
    linear-gradient(200deg,#181A1E,#0C0D10);
}
.plate__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px 15px;
  background:linear-gradient(180deg,transparent,rgba(11,12,14,.88));
}
.plate__tag{
  position:absolute;left:12px;top:12px;z-index:2;padding:6px 10px;border-radius:2px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.plate__name{font-family:var(--serif);font-size:20px;line-height:1.1;color:#fff;text-transform:uppercase}
.plate__meta{font-size:12.5px;color:var(--w-56);margin-top:3px}

/* floating card cluster */
.floaters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.floaters .plate{transform:translateY(var(--fy,0));transition:transform var(--t-2) var(--e),box-shadow var(--t-2) var(--e)}
.floaters .plate:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}

/* --------------------------------------------------- lifestyle selector */
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pick{
  position:relative;display:block;overflow:hidden;border-radius:2px;cursor:pointer;
  aspect-ratio:3/4;background:var(--ink-3);text-align:left;border:0;padding:0;width:100%;
  transition:transform var(--t-1) var(--e);
}
.pick img{width:100%;height:100%;object-fit:cover}
.pick__v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.15),rgba(11,12,14,.86));transition:background var(--t-1) var(--e)}
.pick__b{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.pick__ic{width:22px;height:22px;color:#fff}
.pick__l{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.pick::after{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:inset 0 0 0 1px var(--w-12);transition:box-shadow var(--t-1) var(--e)}
.pick:hover{transform:translateY(-3px)}
.pick:hover .pick__v{background:linear-gradient(180deg,rgba(11,12,14,.05),rgba(11,12,14,.78))}
.pick[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--red)}
.pick[aria-pressed="true"] .pick__ic{color:var(--red)}

/* --------------------------------------------------------- stage ribbon */
/* named stages, connected by a drawn line. No numerals, ever. */
.stages{position:relative;display:grid;gap:26px}
.stages__line{display:none}
.stage{position:relative;text-align:center}
.stage__d{
  width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.06),transparent 70%);
  box-shadow:inset 0 0 0 1px var(--w-22);
  transition:box-shadow var(--t-2) var(--e),transform var(--t-2) var(--e);
}
.stage__d svg{width:28px;height:28px;color:var(--white);transition:color var(--t-2) var(--e)}
.stage.is-in .stage__d{box-shadow:inset 0 0 0 1px var(--red-56),0 0 0 8px var(--red-10)}
.stage.is-in .stage__d svg{color:var(--red)}
.stage__n{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--white)}
.stage__c{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--w-56)}

/* ------------------------------------------------------------------ map */
.map{position:relative;width:100%}
.map svg{width:100%;height:auto;overflow:visible}
.map__route{fill:none;stroke:var(--blue-38);stroke-width:1.6;stroke-linecap:round}
.map__route--live{stroke:var(--blue);stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.map.is-in .map__route--live{animation:route 2.4s var(--e) forwards}
@keyframes route{to{stroke-dashoffset:0}}
.node__core{fill:var(--blue)}
.node__ring{fill:none;stroke:var(--blue);stroke-width:1.4;opacity:0}
.map.is-in .node__ring{animation:pulse 3s ease-out infinite}
.map.is-in .node--hub .node__ring{animation-delay:.2s}
@keyframes pulse{0%{opacity:.7;transform:scale(.4)}70%{opacity:0;transform:scale(2.1)}100%{opacity:0;transform:scale(2.1)}}
.node__l{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:#fff}
.node--hub .node__core{fill:#fff}
.node--hub .node__l{font-size:14px}

/* ------------------------------------------------------------ quote band */
.quote{position:relative;display:grid;gap:0;align-items:stretch;background:var(--ink-2)}
.quote__b{padding:clamp(30px,5vw,58px);display:flex;flex-direction:column;justify-content:center}
.quote__m{font-family:var(--serif);font-size:clamp(20px,2.5vw,29px);line-height:1.32;color:var(--white);text-transform:none}
.quote__q{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--red);margin-bottom:10px}
.quote__a{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--w-40)}

/* ---------------------------------------------------------------- accordion */
.acc{border-top:1px solid var(--w-12)}
.acc__i{border-bottom:1px solid var(--w-12)}
.sec--pearl .acc,.sec--pearl .acc__i{border-color:var(--k-16)}
.acc__q{
  width:100%;display:flex;gap:18px;align-items:flex-start;text-align:left;
  background:none;border:0;padding:22px 0;cursor:pointer;min-height:60px;
}
.acc__q h3{flex:1}
.acc__pm{position:relative;flex:none;width:18px;height:18px;margin-top:3px}
.acc__pm::before,.acc__pm::after{content:"";position:absolute;background:var(--red);transition:transform var(--t-1) var(--e)}
.acc__pm::before{left:0;top:8px;width:18px;height:1.5px}
.acc__pm::after{left:8px;top:0;width:1.5px;height:18px}
.acc__i.on .acc__pm::after{transform:scaleY(0)}
.acc__a{display:none;padding:0 0 24px;max-width:70ch}
.acc__i.on .acc__a{display:block}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink);padding:clamp(46px,6vw,72px) 0 calc(34px + env(safe-area-inset-bottom));position:relative;z-index:2}
.foot__top{display:grid;gap:30px}
.foot__logo img{width:clamp(150px,20vw,208px);height:auto}
.foot__c{display:grid;gap:12px}
.foot__c a{display:inline-flex;align-items:center;gap:11px;font-size:15px;color:var(--w-72);min-height:36px}
.foot__c a:hover{color:#fff}
.foot__c svg{width:16px;height:16px;color:var(--red);flex:none}
.foot__legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--w-07)}

/* ------------------------------------------------------- sticky mobile bar */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:rgba(11,12,14,.94);backdrop-filter:saturate(150%) blur(12px);
  box-shadow:0 -1px 0 var(--w-12);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(115%);transition:transform var(--t-2) var(--e);
}
.dock.on{transform:none}
.dock__in{display:flex;gap:10px;align-items:center;max-width:var(--max);margin:0 auto}
.dock__tel{
  flex:none;min-height:50px;min-width:50px;display:grid;place-items:center;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--w-22);color:#fff;
}
.dock__tel svg{color:var(--red)}
.dock .btn{flex:1;min-height:50px;padding:14px 18px;font-size:12.5px}

/* ==========================================================================
   MOTION
   Everything below animates transform / opacity / clip only.
   ========================================================================== */

/* cinematic entrance */
.js body{opacity:0}
.js body.is-ready{opacity:1;transition:opacity .5s var(--e)}

/* headline mask reveal — the clip is expanded vertically so no descender
   is ever sliced, whatever font the OS substitutes */
.js .mask{display:block;overflow:hidden;padding-bottom:.34em;margin-bottom:-.34em}
.js .mask > span{display:block;transform:translateY(112%);opacity:0}
.js .mask.in > span{
  animation:maskUp 1.05s var(--e) forwards;
  animation-delay:calc(var(--i,0) * 90ms + var(--d,0ms));
}
@keyframes maskUp{to{transform:none;opacity:1}}

/* generic scroll reveal */
.js .rev{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-3) var(--e),transform var(--t-3) var(--e);
  transition-delay:var(--d,0ms)}
.js .rev.in{opacity:1;transform:none}

/* staggered group */
.js .stag > *{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.js .stag.in > *{opacity:1;transform:none}
.js .stag.in > *:nth-child(1){transition-delay:.04s}
.js .stag.in > *:nth-child(2){transition-delay:.12s}
.js .stag.in > *:nth-child(3){transition-delay:.20s}
.js .stag.in > *:nth-child(4){transition-delay:.28s}
.js .stag.in > *:nth-child(5){transition-delay:.36s}
.js .stag.in > *:nth-child(6){transition-delay:.44s}
.js .stag.in > *:nth-child(7){transition-delay:.52s}
.js .stag.in > *:nth-child(8){transition-delay:.60s}

/* image reveal mask — a curtain over the plate, never a clip on the plate */
.js .curtain{position:relative}
.js .curtain::before{
  content:"";position:absolute;inset:0;z-index:3;background:var(--ink);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform 1s var(--e-in);transition-delay:var(--d,0ms);pointer-events:none;
}
.js .curtain.in::before{transform:scaleY(0)}

/* layered parallax — driven by a single rAF-throttled scroll handler */
.par{will-change:transform}

/* cursor-follow lighting, desktop only */
.glow{
  position:fixed;top:0;left:0;width:640px;height:640px;z-index:1;pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,rgba(137,207,240,.07),transparent 62%);
  transition:opacity .6s var(--e);
}
.glow.on{opacity:1}

/* elegant progress line */
.prog{position:relative;height:1px;background:var(--w-12);overflow:hidden}
.prog__f{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red);transition:width .5s var(--e)}

/* ------------------------------------------------------------ breakpoints */
@media (min-width:620px){
  :root{--gut:30px}
  .picks{grid-template-columns:repeat(3,1fr)}
  .nav__tel span{display:inline}
  .foot__top{grid-template-columns:auto 1fr;align-items:center;gap:40px}
}

@media (min-width:960px){
  :root{--gut:40px}
  .nav__in{min-height:88px}
  .nav__cta{display:inline-flex}
  .hero{padding:120px 0 60px}
  .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px}
  .hero__copy{max-width:none}
  .picks{grid-template-columns:repeat(4,1fr)}
  .picks--6{grid-template-columns:repeat(6,1fr)}
  .stages{grid-template-columns:repeat(5,1fr);gap:20px}
  .stages--6{grid-template-columns:repeat(6,1fr)}
  .stages__line{
    display:block;position:absolute;left:11%;right:11%;top:37px;height:1px;
    background:var(--w-12);z-index:0;
  }
  .stages__line i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--red-56);transition:width 1.6s var(--e)}
  .stages.is-in .stages__line i{width:100%}
  .quote{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dock{display:none}
  .foot__top{grid-template-columns:auto 1fr auto}
}

@media (min-width:1200px){
  .hero__in{gap:64px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js body{opacity:1}
  .js .mask > span{transform:none;opacity:1}
  .js .rev,.js .stag > *{opacity:1;transform:none}
  .js .curtain::before{display:none}
  .map__route--live{stroke-dashoffset:0}
  .node__ring{display:none}
  .glow{display:none}
  .par{transform:none !important}
  body::after{display:none}
}

/* ------------------------------------------------------------------ print */
@media print{
  .nav,.dock,.glow,body::after{display:none}
  body{background:#fff;color:#000}
}

/* --------------------------------------------------- page-level grids */
@media (min-width:960px){
  .lifegrid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px;align-items:center}
  .stratgrid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:52px;align-items:center}
}
/* the hero lead card must not exceed the fold on tall desktop */
@media (min-width:960px){
  .lead{max-width:460px;margin-left:auto}
}

/* ------------------------------------------------- seller page pieces */
.hero--split{min-height:auto;padding-top:120px}
.hero--split .hero__in{align-items:center}
.hero__side{align-self:stretch;min-height:320px}
.mkstrip{display:grid;gap:16px}
.twocol{display:grid;gap:48px}
.threecol{display:grid;gap:34px;align-items:center}
.curve{margin-top:30px}
.curve__l{display:flex;justify-content:space-between;margin-top:8px;gap:10px}
.stages--5{grid-template-columns:repeat(2,1fr)}
.stages--5 .stage__d{width:60px;height:60px;margin-bottom:12px}
.stages--5 .stage__d svg{width:24px;height:24px}
@media (min-width:620px){ .mkstrip{grid-template-columns:1fr 1fr} }
@media (min-width:960px){
  .hero--split{padding-top:150px}
  .twocol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  .threecol{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:40px}
  .stages--5{grid-template-columns:repeat(5,1fr)}
  .stages--5 .stages__line{top:30px;left:10%;right:10%}
}

/* ---------------------------------------------- relocation page pieces */
.planrow{display:grid;gap:10px}
.stages--6{grid-template-columns:repeat(2,1fr)}
.advgrid{display:grid;gap:32px}
@media (min-width:620px){ .planrow{grid-template-columns:1fr 1fr} .stages--6{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){
  .stages--6{grid-template-columns:repeat(6,1fr)}
  .stages--6 .stages__line{left:8%;right:8%}
  .advgrid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:52px;align-items:center}
}

/* mobile-only above-the-fold CTA pair (desktop keeps the card-in-hero) */
.only-mobile{display:flex}
@media (min-width:960px){ .only-mobile{display:none} }
/* aspect-ratio plus min-height drives WIDTH, which overflowed at 390px */
.hero__side{min-height:0;width:100%}
@media (min-width:960px){ .hero__side{min-height:320px} }
.curve__svg{width:100%;height:auto;display:block}

/* the seller hero runs a taller plate than the 4:3 source, so it gets its own
   ratio rather than being stretched by the grid */
.hero__side{aspect-ratio:4/3}
@media (min-width:960px){
  .hero__side{aspect-ratio:4/5;align-self:center}
  /* the split hero carries a form as well as a headline — hold the display
     type back a step so the card clears the fold */
  .hero--split .display{font-size:clamp(36px,5.4vw,64px)}
}