:root{
  --bg:#0A0A0A;
  --bg-2:#0F0F0F;
  --surface:#141414;
  --surface-2:#1A1A1A;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.28);
  --text:#FFFFFF;
  --text-2:#D4D4D4;
  --muted:#9A9A9A;
  --muted-2:#7A7A7A;
  --green:#FFFFFF;
  --green-2:#E6E6E6;
  --green-ink:#0A0A0A;
  --green-soft:rgba(255,255,255,.07);
  --green-line:rgba(255,255,255,.45);
  --brass:#FFFFFF;
  --brass-soft:rgba(255,255,255,.08);
  --sky:#141414;
  --crn-color:#3A3A3A;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --display:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --wrap:1220px;
  --r-btn:16px;--r-card:28px;--r-lg:36px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text-2);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
h1,h2{font-family:var(--display);color:var(--text);font-weight:700;line-height:1.1;letter-spacing:-.032em}
h3,h4{font-family:var(--sans);color:var(--text);font-weight:600;line-height:1.3;letter-spacing:-.012em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:9px;font-family:var(--sans)}
.eyebrow::before{content:"";width:18px;height:1.5px;border-radius:2px;background:var(--brass)}
.eyebrow.center::before{display:none}
.lead{font-size:clamp(17px,1.35vw,19.5px);color:var(--text-2);line-height:1.72}
.muted{color:var(--muted)}
::selection{background:var(--green);color:var(--green-ink)}
.section{padding:clamp(64px,7.5vw,110px) 0}
/* Section tones ramp into each other instead of butting up as a hard edge.
   Every toned section is bracketed by plain --bg sections, so the gradient
   starts and ends on --bg and the seam disappears from both sides.
   The stops are a smoothstep curve, not a straight ramp: a linear ramp holds a
   constant slope and then stops dead where it meets the flat colour, and that
   corner is what the eye picks up as a banded strip. Smoothstep arrives at
   both ends with zero slope so there is no corner to see. Fades are a
   percentage of section height, so tall and short sections both ease over a
   proportional distance. Regenerate with tools/gradient-stops.py. */
.section.alt{background:linear-gradient(180deg,
    #0a0a0a 0%,#0a0a0a 3.5%,#0b0b0b 7%,#0c0c0c 10.5%,#0c0c0c 14%,#0d0d0d 17.5%,
    #0e0e0e 21%,#0f0f0f 24.5%,#0f0f0f 75.5%,#0e0e0e 79%,#0d0d0d 82.5%,#0c0c0c 86%,
    #0c0c0c 89.5%,#0b0b0b 93%,#0a0a0a 96.5%,#0a0a0a 100%)}
.section.deep{color:var(--text-2);background:linear-gradient(180deg,
    #0a0a0a 0%,#0a0a0a 3.5%,#090909 7%,#090909 10.5%,#080808 14%,#070707 17.5%,
    #070707 21%,#060606 24.5%,#060606 75.5%,#070707 79%,#070707 82.5%,#080808 86%,
    #090909 89.5%,#090909 93%,#0a0a0a 96.5%,#0a0a0a 100%)}
.section.deep h2,.section.deep h3{color:#fff}
.section.deep .eyebrow{color:var(--brass)}
.section.deep .eyebrow::before{background:var(--brass)}
.center{text-align:center}
.h-sec{font-size:clamp(28px,3.5vw,44px);margin:14px 0 14px}
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto 46px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s,box-shadow .18s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--brass);color:var(--green-ink)}
.btn-primary:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(30,89,67,.65)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--green-line);background:rgba(30,89,67,.05);transform:translateY(-2px)}
.btn-light{background:var(--text);color:var(--bg)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
.btn-lg{padding:15px 27px;font-size:16px}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-block{width:100%}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--green);font-family:var(--sans)}
.arrow-link svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.arrow-link:hover svg{transform:translateX(3px)}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}
  .lamp,.typing i{animation:none!important}}

/* demo strip */
.demobar{background:#FFFFFF;color:rgba(10,10,10,.72);font-size:13px;position:relative;z-index:70}
.demobar .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:40px;padding-top:9px;padding-bottom:9px;text-align:center}
.demobar b{color:#0A0A0A;font-weight:700}
.demobar .dot{width:6px;height:6px;border-radius:50%;background:#0A0A0A;flex:none}
.demobar a{color:#0A0A0A;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* nav */
/* Flush editorial bar. The main Loomi site already owns the collapse-into-a-
   floating-pill move, so this one stays edge to edge and square and never
   detaches: at the top it is transparent over the hero, and on scroll it
   compresses height, drops the phone number, and resolves into a blurred plate
   under a hairline rule. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:96px;display:flex;align-items:center;
  background:transparent;border-bottom:0;
  transition:height .42s var(--ease),background .42s,box-shadow .42s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:18px;height:100%}
/* the rule is its own layer so it can wipe in from the centre rather than
   just appearing along with the plate */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line-2);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .55s var(--ease)}
/* Opaque, not a blurred plate. A translucent bar only reads as a bar where
   there is content behind it to blur, so the middle looked solid while the
   ends dissolved into the page background. */
.nav.scrolled{height:64px;background:#101010;
  box-shadow:0 10px 30px -20px rgba(0,0,0,.95)}
.nav.scrolled::after{transform:scaleX(1)}
.nav.scrolled .nav-tel{opacity:0;width:0;overflow:hidden;pointer-events:none}
.nav-tel{transition:opacity .35s,width .45s var(--ease)}
/* the wordmark's second line folds away as the bar tightens */
.brand small{transition:opacity .3s,max-height .42s var(--ease),margin-top .42s}
.nav.scrolled .brand small{opacity:0;max-height:0;margin-top:0;overflow:hidden}

/* anchors must clear the fixed bar */
section[id],div[id]{scroll-margin-top:96px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--text);letter-spacing:-.02em;flex:none}
.brand .mark{width:24px;height:24px;border-radius:0;background:none;color:var(--text);display:grid;place-items:center;flex:none}
.brand .mark svg{width:24px;height:24px}
.brand small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.3vw,34px);list-style:none}
.nav-links a{position:relative;display:block;padding:6px 0;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
.nav-tel{font-size:14.5px;font-weight:600;color:var(--text);white-space:nowrap}
.menu-btn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:transparent;cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px;stroke:var(--text)}
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--bg);transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;padding:26px}
.mobile-menu.open{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.mobile-menu ul a{font-family:var(--display);font-size:28px;font-weight:600;color:var(--text);padding:9px 0;display:block}
.mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(52px,6.5vw,88px) 0 clamp(56px,6.5vw,92px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 460px at 78% 4%,rgba(176,141,87,.14),transparent 64%),radial-gradient(700px 380px at 2% 96%,rgba(176,141,87,.07),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,62px);align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.038em;margin:16px 0 18px}

.hero .lead{max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 22px}
.hero-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.hero-note svg{width:15px;height:15px;stroke:var(--green);flex:none}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(21,33,28,.55)}
.lamp{animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
.hero-badge{position:absolute;right:-16px;bottom:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 17px;box-shadow:0 22px 44px -26px rgba(21,33,28,.45);display:flex;align-items:center;gap:12px}
.hero-badge .hb-ico{width:38px;height:38px;border-radius:11px;background:var(--green-soft);display:grid;place-items:center;flex:none}
.hero-badge .hb-ico svg{width:19px;height:19px;stroke:var(--green);border:0;box-shadow:none;border-radius:0}
.hero-badge b{display:block;font-family:var(--display);font-size:17px;color:var(--text)}
.hero-badge span{font-size:12px;color:var(--muted)}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:38px;padding-bottom:38px}
.stat{text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,42px);color:var(--green);font-weight:600;letter-spacing:-.02em;line-height:1}
.stat span{display:block;font-size:13px;color:var(--muted);margin-top:9px;letter-spacing:.02em}

/* listings */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 56px -34px rgba(21,33,28,.42);border-color:var(--green-line)}
.card-art{position:relative;background:var(--sky)}
.card-art svg{width:100%;height:auto;display:block}
.tag{position:absolute;top:13px;left:13px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:var(--green);color:var(--green-ink)}
.tag.open{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.tag.pending{background:transparent;color:var(--muted);border:1px solid var(--line)}
.card-body{padding:20px 21px 22px}
.price{font-family:var(--sans);font-size:23px;color:var(--text);font-weight:600;letter-spacing:-.02em}
.addr{font-size:14.5px;color:var(--text-2);margin-top:3px}
.hood{font-size:12.5px;color:var(--muted);margin-top:2px}
.specs{display:flex;gap:16px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.specs b{color:var(--text);font-weight:600}
.card-foot{margin-top:17px}

/* chat / instant reply */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,66px);align-items:center}
.chat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(8px)}
.chat-top{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:18px}
.chat-av{width:36px;height:36px;border-radius:50%;background:#FFFFFF;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--green);font-size:15px;flex:none}
.chat-top b{display:block;color:#fff;font-size:14.5px;font-family:var(--sans);font-weight:600}
.chat-top span{font-size:12px;color:var(--brass)}
.chat-time{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.5)}
.bub{max-width:82%;padding:12px 15px;border-radius:15px;font-size:14.5px;line-height:1.5;margin-bottom:11px}
.bub.them{background:rgba(255,255,255,.10);color:rgba(255,255,255,.9);border-bottom-left-radius:5px}
.bub.us{background:#FFFFFF;color:#0A0A0A;margin-left:auto;border-bottom-right-radius:5px}
.bub small{display:block;font-size:11px;opacity:.6;margin-top:5px}
.typing{display:inline-flex;gap:4px;align-items:center;padding:13px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:17px;margin-top:26px}
.feat-list li{display:flex;gap:14px;align-items:flex-start}
.feat-ico{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.10);display:grid;place-items:center;flex:none}
.feat-ico svg{width:18px;height:18px;stroke:var(--brass)}
.feat-list b{display:block;color:#fff;font-size:15.5px;font-family:var(--sans);font-weight:600;margin-bottom:2px}
.feat-list p{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.55}

/* valuation */
.val-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);box-shadow:0 34px 70px -46px rgba(21,33,28,.4)}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px;letter-spacing:.01em}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-btn);padding:12px 14px;transition:border-color .18s,background .18s;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-line);background:#fff;box-shadow:0 0 0 3px var(--green-soft)}
.field textarea{resize:vertical;min-height:92px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236E7D76' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:36px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:13px;text-align:center}
.success{display:none;text-align:center;padding:30px 10px}
.success.show{display:block}
.success .s-ico{width:56px;height:56px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 17px}
.success .s-ico svg{width:27px;height:27px;stroke:var(--green)}
.success h3{font-size:24px;margin-bottom:9px}

/* hoods */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hood-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;transition:transform .22s var(--ease),border-color .22s}
.hood-card:hover{transform:translateY(-4px);border-color:var(--green-line)}
.hood-card .hc-ico{width:40px;height:40px;border-radius:11px;background:var(--green-soft);display:grid;place-items:center;margin-bottom:15px}
.hood-card .hc-ico svg{width:20px;height:20px;stroke:var(--green)}
.hood-card h3{font-family:var(--sans);font-weight:600;font-size:19px;margin-bottom:7px}
.hood-card p{font-size:14px;color:var(--muted);line-height:1.55}
.hood-meta{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.hood-meta b{color:var(--green);font-weight:600}

/* steps */

/* reviews */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.quote .stars{display:flex;gap:3px;margin-bottom:14px}
.quote .stars svg{width:15px;height:15px;fill:var(--text)}
.quote p{font-size:15.5px;color:var(--text-2);line-height:1.65}
.quote footer{margin-top:17px;padding-top:15px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.q-av{width:38px;height:38px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--green);font-size:14px;flex:none}
.quote footer b{display:block;font-size:14px;color:var(--text);font-family:var(--sans);font-weight:600}
.quote footer span{font-size:12.5px;color:var(--muted)}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:19px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--sans);font-size:17.5px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:transform .22s var(--ease),background .22s,border-color .22s}
.faq summary .pm svg{width:12px;height:12px;stroke:var(--text)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--green);border-color:var(--green)}
.faq details[open] summary .pm svg{stroke:#fff}
.faq p{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.65;max-width:660px}

/* cta band */
.band{background:var(--surface);border:1px solid var(--green-line);border-radius:var(--r-lg);padding:clamp(36px,4.6vw,64px);text-align:center;color:rgba(255,255,255,.8)}
.band h2{color:#fff;font-size:clamp(28px,3.6vw,44px);margin-bottom:14px}
.band .lead{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto}
.band-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* footer */
.foot{color:var(--muted);padding:60px 0 30px;font-size:14px;
  background:linear-gradient(180deg,
    #0a0a0a 0%,#0a0a0a 4.25%,#080808 8.5%,#070707 12.75%,#050505 17%,#030303 21.25%,
    #020202 25.5%,#000000 29.75%,#000000 100%)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.11)}
.foot .brand{color:#fff}
.foot .brand small{color:rgba(255,255,255,.5)}
.foot h4{color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:15px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a:hover{color:#fff}
.foot-p{margin-top:17px;max-width:300px;line-height:1.6;color:rgba(255,255,255,.55)}
.foot-bot{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}
.foot-bot a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.disclaimer{margin-top:22px;padding:15px 18px;border:1px dashed rgba(255,255,255,.22);border-radius:12px;font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.6}

@media (max-width:980px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .hero-art{order:-1}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-tel{display:none}
  .menu-btn{display:grid}
}
@media (max-width:640px){
  .nav-cta .btn{display:none}
  .nav .wrap{gap:10px}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:28px}
  .grid-3,.grid-4,.row-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-badge{position:static;margin-top:16px}
}

/* ============ filter bar ============ */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;display:grid;grid-template-columns:1.6fr repeat(3,1fr) auto;gap:12px;align-items:end;margin-bottom:30px;box-shadow:0 18px 40px -34px rgba(21,33,28,.4)}
.filters .field{margin:0}
.filters label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.filters input,.filters select{padding:10px 13px;font-size:14.5px}
.filter-reset{background:none;border:0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;padding:11px 6px;transition:color .18s}
.filter-reset:hover{color:var(--green)}
.results-line{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;font-size:14px;color:var(--muted)}
.results-line b{color:var(--text);font-weight:600}
.no-results{display:none;text-align:center;padding:56px 20px;border:1px dashed var(--line-2);border-radius:var(--r-card)}
.no-results.show{display:block}
.no-results h3{font-size:22px;margin-bottom:8px}
.card.hidden{display:none}
.card-link{display:block;color:inherit}

/* ============ agent roster ============ */
.agent{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;text-align:center;transition:transform .22s var(--ease),border-color .22s}
.agent:hover{transform:translateY(-4px);border-color:var(--green-line)}
.agent .av{width:78px;height:78px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-family:var(--display);font-size:26px;font-weight:600;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line)}
.agent h3{font-family:var(--sans);font-weight:600;font-size:19px;margin-bottom:4px}
.agent .role{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:11px}
.agent p{font-size:14px;color:var(--muted);line-height:1.55}
.agent .areas{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

/* ============ listing detail ============ */
.crumbs{font-size:13.5px;color:var(--muted);padding:100px 0 22px}
.crumbs a:hover{color:var(--green)}
.crumbs span{margin:0 7px;opacity:.5}
.gallery{display:grid;gap:12px}
.gal-main{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--sky);position:relative}
.gal-main svg{width:100%;height:auto;display:block}
.gal-caption{position:absolute;left:14px;bottom:14px;background:rgba(21,33,28,.78);color:#fff;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;backdrop-filter:blur(6px)}
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal-thumb{border-radius:14px;overflow:hidden;aspect-ratio:400/230;border:2px solid transparent;background:var(--sky);cursor:pointer;padding:0;transition:border-color .18s,transform .18s var(--ease)}
.gal-thumb svg{width:100%;height:100%;display:block;object-fit:cover}
.gal-main [data-slide][hidden]{display:none}
.gal-thumb:hover{transform:translateY(-2px)}
.gal-thumb[aria-current="true"]{border-color:var(--green)}
.listing-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding:30px 0 24px;border-bottom:1px solid var(--line)}
.listing-head .price{font-size:clamp(30px,3.6vw,44px);line-height:1}
.listing-head .addr{font-size:17px;margin-top:8px}
.spec-row{display:flex;gap:32px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line)}
.spec{font-size:13px;color:var(--muted)}
.spec b{display:block;font-family:var(--sans);font-size:21px;letter-spacing:-.02em;color:var(--text);font-weight:600;margin-bottom:3px}
.detail-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,56px);align-items:start;padding-top:38px}
.detail-body h3{font-size:22px;margin:32px 0 12px}
.detail-body h3:first-child{margin-top:0}
.detail-body p{font-size:15.5px;line-height:1.7;color:var(--text-2);margin-bottom:14px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px}
.feat-grid div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.feat-grid svg{width:16px;height:16px;stroke:var(--green);flex:none;margin-top:3px}
.aside{position:sticky;top:98px;display:flex;flex-direction:column;gap:18px}
.aside-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.aside-card h4{font-family:var(--sans);font-size:14px;color:var(--text);font-weight:600;margin-bottom:14px;letter-spacing:.1em;text-transform:uppercase}
.agent-mini{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.agent-mini .av{width:52px;height:52px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green-line);display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--green);font-size:18px;flex:none}
.agent-mini b{display:block;font-size:15.5px;color:var(--text);font-family:var(--sans);font-weight:600}
.agent-mini span{font-size:12.5px;color:var(--muted)}
.reply-chip{display:flex;align-items:center;gap:8px;background:var(--green-soft);border:1px solid var(--green-line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--green);font-weight:600;margin-bottom:16px}
.reply-chip svg{width:15px;height:15px;stroke:var(--green);flex:none}
/* mortgage calc */
.calc-out{background:var(--green);color:#fff;border-radius:14px;padding:18px;text-align:center;margin-bottom:16px}
.calc-out b{display:block;font-family:var(--sans);font-size:32px;font-weight:600;line-height:1;letter-spacing:-.02em}
.calc-out span{font-size:12.5px;color:rgba(255,255,255,.72);display:block;margin-top:7px}
.calc-row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;color:var(--muted)}
.calc-row b{color:var(--text);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0;margin-top:4px}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--green);margin-top:-6px;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.25)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--line-2)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--green);cursor:pointer;border:2px solid #fff}
.range-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.range-label b{color:var(--text);font-weight:600}
/* map */
.map-wrap{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.map-wrap svg{width:100%;height:auto;display:block}

@media (max-width:980px){
  .filters{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .aside{position:static}
}
@media (max-width:640px){
  .filters{grid-template-columns:1fr}
  .listing-head{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .spec-row{gap:20px}
}


/* ============ raster imagery ============ */
.hero-art img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);display:block}
.card-art{aspect-ratio:900/506;overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.card:hover .card-art img{transform:scale(1.03)}
.agent img.av{object-fit:cover;background:var(--surface-2)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-main{aspect-ratio:16/9}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.agent-mini img.av{object-fit:cover}


/* ============ corner brackets ============ */
/* Two marks on the diagonal: top-left from .crn, bottom-right from its <i class="crn-i">. */
.crn{position:relative}
.crn::before,
.crn>.crn-i::after{
  content:"";position:absolute;width:var(--crn-size,14px);height:var(--crn-size,14px);
  border:1px solid var(--crn-color);pointer-events:none;z-index:2;
}
.crn::before{top:0;left:0;border-right:0;border-bottom:0}
.crn>.crn-i{position:absolute;inset:0;pointer-events:none}
.crn>.crn-i::after{bottom:0;right:0;border-left:0;border-top:0}
/* inset variant so the marks float off the edge of an image or card */
.crn-inset::before,
.crn-inset>.crn-i::after{margin:var(--crn-gap,12px)}
.crn-lg{--crn-size:22px}
.crn-sm{--crn-size:9px}
/* over photography, dark marks read against the mostly-light exteriors */
.card-art.crn{--crn-color:rgba(0,0,0,.42)}

/* eyebrow: tighter, tracked, brass */
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--brass)}
.eyebrow::before{width:22px;background:var(--brass)}

/* cards get a hairline + bracket accent instead of soft shadow */
.card{border-color:var(--line-2);box-shadow:none}
.card:hover{box-shadow:0 0 0 1px var(--green-line);border-color:var(--green-line);transform:translateY(-3px)}
.hood-card:hover,.agent:hover{box-shadow:0 0 0 1px var(--green-line)}

/* buttons: square, tracked, uppercase */
.btn{border-radius:var(--r-btn);letter-spacing:.08em;text-transform:uppercase;font-size:12.5px;font-weight:600;padding:14px 24px}
.btn-lg{padding:16px 30px;font-size:13px}
.btn-sm{padding:11px 17px;font-size:11.5px}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--brass);background:transparent;color:var(--brass)}
.btn-primary:hover{box-shadow:none;background:var(--green-2)}

/* form fields: square, hairline */
.field input,.field select,.field textarea{border-radius:var(--r-btn);background:var(--bg-2);border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:none;border-color:var(--brass);background:var(--bg)}
.val-card,.aside-card,.filters{border-radius:var(--r-card);box-shadow:none;border-color:var(--line-2)}
.tag{border-radius:9px;letter-spacing:.14em;font-size:10px}
.reply-chip{border-radius:var(--r-btn)}
.calc-out{border-radius:var(--r-card);background:transparent;border:1px solid var(--green-line);color:var(--text)}
.calc-out span{color:var(--muted)}
.bub{border-radius:16px}
.chat{border-radius:var(--r-card);background:rgba(255,255,255,.04)}
.chat-av,.q-av,.agent .av,.agent-mini .av{border-radius:14px}
.band{border-radius:var(--r-lg)}


/* ============ full-bleed hero ============ */
.hero-full{position:relative;min-height:min(92vh,920px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block;
  /* the hero is wider than the photo, so cover crops vertically. Anchor the
     crop to the bottom so it eats sky instead of slicing the house off at the
     baseline, and scale up slightly to give the house presence over the
     very large sky. */
  object-position:50% 100%;transform:scale(1.05);transform-origin:50% 100%}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(10,10,10,.60) 0%,rgba(10,10,10,.12) 20%,rgba(10,10,10,.10) 40%,
    rgba(10,10,10,.66) 74%,rgba(10,10,10,.94) 92%,#0A0A0A 100%)}
.hero-inner{position:relative;z-index:2;display:block;width:100%;padding-bottom:clamp(70px,9vh,124px);padding-left:0;padding-right:26px}
.hero-copy{max-width:none;width:100%;padding:26px 30px 26px 34px;border-radius:var(--r-lg)}

.hero-full .lead{max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* vertical rail */
.hero-rail{position:absolute;left:24px;top:0;bottom:150px;z-index:3;display:flex;align-items:center;pointer-events:none}
.hero-rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hero-rail::before{content:"";position:absolute;left:9px;top:0;width:1px;height:calc(50% - 130px);background:linear-gradient(180deg,transparent,var(--line-2))}
.hero-rail::after{content:"";position:absolute;left:9px;bottom:0;width:1px;height:calc(50% - 130px);background:linear-gradient(0deg,transparent,var(--line-2))}

/* floating timestamp card */
.hero-card{position:relative;padding:20px 24px;background:rgba(10,10,10,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:210px}
.hero-card-time{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hero-card b{display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--text);line-height:1.1}
.hero-card-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}

/* stats strip overlapping the photo */

@media (max-width:980px){
  .hero-full{min-height:auto;padding-top:120px}
  .hero-inner{padding-left:20px;padding-bottom:44px}
}
@media (max-width:640px){
  .hero-copy{padding:24px 22px}
}


/* ============ hero: company name + mission ============ */
.hero-mission{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--text-2);max-width:540px;font-weight:400}



/* ---- one form serving both intents ------------------------------------- */
.anchor{display:block;height:0;scroll-margin-top:96px}
.intent-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-btn)}
.intent-switch button{font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;
  padding:10px 12px;border:0;border-radius:calc(var(--r-btn) - 5px);background:none;color:var(--muted);
  transition:background .18s var(--ease),color .18s var(--ease)}
.intent-switch button:hover{color:var(--text)}
.intent-switch button[aria-selected="true"]{background:var(--text);color:var(--bg)}
.i-copy,.i-fields,.i-block{display:none}
.i-copy.on{display:inline}
.i-fields.on{display:block}
.i-block.on{display:block}

/* ============ hero lockup ============ */
.hero-name{font-family:var(--display);font-weight:800;color:var(--text);
  font-size:clamp(46px,8.1vw,180px);line-height:.96;letter-spacing:-.042em;margin:0;
  white-space:nowrap}
/* set tight under the name so the two read as one lockup, not a heading plus a rule */
.hero-sub{display:block;margin:12px 0 0;font-family:var(--sans);
  font-size:clamp(11px,1.05vw,13.5px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-2);font-weight:500}
.hero-sub span{color:var(--muted-2);margin:0 4px}
.hero-sub::after{content:none}
.hero-mission{margin-top:clamp(26px,2.6vw,38px)}
@media (max-width:640px){
  .hero-sub{letter-spacing:.2em}
  .hero-mark-float{top:auto;bottom:auto;right:20px;top:96px}
  .hero-mark-float svg{width:26px;height:26px}
}

/* mark sits opposite the wordmark, balancing the left-weighted stack */
.hero-mark-float{position:absolute;top:clamp(96px,12vh,150px);right:clamp(26px,4vw,64px);
  z-index:3;color:var(--text);opacity:.9;pointer-events:none}
.hero-mark-float svg{width:clamp(28px,3.4vw,52px);height:clamp(28px,3.4vw,52px);display:block}


/* ============ scroll progress ============ */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--text);z-index:75;
  transition:width .08s linear;pointer-events:none}

/* ============ compare ============ */
.cmp-btn{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(10,10,10,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-2);color:var(--text);
  opacity:0;transform:translateY(-4px);transition:opacity .22s var(--ease),transform .22s var(--ease),background .18s}
.card:hover .cmp-btn,.cmp-btn:focus-visible,.cmp-btn[aria-pressed="true"]{opacity:1;transform:none}
.cmp-btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.cmp-btn:hover{background:rgba(10,10,10,.85);border-color:var(--text)}
.cmp-btn[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.cmp-btn[aria-pressed="true"] svg{transform:rotate(45deg)}

.cmp-tray{position:fixed;left:0;right:0;bottom:0;z-index:88;
  background:rgba(10,10,10,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);transform:translateY(100%);transition:transform .38s var(--ease)}
.cmp-tray.in{transform:none}
.cmp-tray-inner{max-width:var(--wrap);margin:0 auto;padding:14px 26px;
  display:flex;align-items:center;gap:20px}
.cmp-tray-label{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);flex:none}
.cmp-items{display:flex;gap:10px;flex:1;min-width:0;overflow:hidden}
.cmp-chip{position:relative;width:74px;height:50px;flex:none;border:1px solid var(--line-2);overflow:hidden;border-radius:11px}
.cmp-chip img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-chip button{position:absolute;inset:0;background:rgba(10,10,10,.7);color:var(--text);
  border:0;cursor:pointer;opacity:0;transition:opacity .2s;display:grid;place-items:center;font-size:16px}
.cmp-chip:hover button{opacity:1}
.cmp-slot{width:74px;height:50px;flex:none;border:1px dashed var(--line);border-radius:11px}
.cmp-tray-actions{display:flex;align-items:center;gap:14px;flex:none}
.cmp-clear{background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .18s}
.cmp-clear:hover{color:var(--text)}

.cmp-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:26px;
  background:rgba(6,6,6,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmp-modal[hidden]{display:none}
.cmp-modal-panel{position:relative;width:100%;max-width:960px;max-height:86vh;overflow:auto;
  background:var(--bg-2);border:1px solid var(--line-2);padding:34px;border-radius:var(--r-lg)}
.cmp-modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
.cmp-modal-x:hover{color:var(--text);border-color:var(--text)}
.cmp-modal-x svg{width:14px;height:14px}
.cmp-modal-title{font-size:clamp(26px,3vw,38px);margin-bottom:26px}
.cmp-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cmp-col img{width:100%;aspect-ratio:900/506;object-fit:cover;display:block;margin-bottom:14px;border-radius:14px}
.cmp-col h3{font-size:17px;margin-bottom:2px}
.cmp-col .cmp-price{font-size:22px;font-weight:600;color:var(--text);margin-bottom:3px}
.cmp-col .cmp-hood{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cmp-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.cmp-row b{color:var(--text);font-weight:600}
.cmp-row.best b{position:relative}
.cmp-row.best b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--text)}


@media (max-width:760px){
  .cmp-tray-inner{padding:12px 16px;gap:12px}
  .cmp-tray-label{display:none}
  .cmp-modal-panel{padding:24px 18px}
}

/* the notice sits above the compare tray whenever the tray is up */


/* ============ always-on: phone that breaks the section ============ */
.alwayson{overflow:clip visible;overflow-clip-margin:220px;position:relative;
  padding-top:clamp(40px,4vw,62px);padding-bottom:clamp(40px,4vw,62px)}
.alwayson-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);
  gap:clamp(30px,5vw,84px);align-items:start}
.alwayson-copy .h-sec{max-width:19ch}
.alwayson-copy .lead{max-width:44ch}

/* numbered capability lines - no icons, hairline separated */
.capline{list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;counter-reset:cap}
.capline li{display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.capline li:last-child{border-bottom:1px solid var(--line)}
.capline-n{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--muted-2)}
.capline-t{font-family:var(--sans);font-size:clamp(17px,1.6vw,20px);font-weight:600;color:#fff;letter-spacing:-.015em}

/* the device */
.phone-wrap{position:relative;z-index:6;display:flex;justify-content:center;
  margin-top:clamp(-132px,-8vw,-88px);margin-bottom:clamp(-132px,-8vw,-88px);perspective:1600px}
.phone{position:relative;width:min(392px,30vw);transform-style:preserve-3d;
  transform:rotateY(-17deg) rotateX(3deg) rotateZ(6deg);
  transform-style:preserve-3d}
/* ---- device shell -------------------------------------------------------
   Geometry is iPhone 16 Pro reduced to a 392px reference width:
   device 71.5 x 149.6 x 8.25mm, 2.45mm bezel, 62pt display corner.
     --pad  bezel, device edge -> glass (13px)   --band  titanium on the face
     --d    body thickness (11.5% of width)
   Corners are Apple's continuous (G2) curve, not a circular arc: each shape
   carries an SVG superellipse mask built with figma-squircle's construction
   at cornerSmoothing 0.6. The border-radius values are the circular-arc
   fallback for anything without mask support; where masks work they are
   zeroed out below so the mask alone defines the silhouette. Regenerate the
   masks with tools/squircle.py if the proportions ever change. */
.phone{--band:4px;--pad:13px;--d:45px}

/* the cast shadow lives on its own layer: a mask would clip it away */
.phone-cast{position:absolute;inset:-3px;border-radius:73px;
  transform:translateZ(calc(-1 * var(--d) - 1px));
  box-shadow:0 56px 74px rgba(0,0,0,.78)}
/* back slab: reads as the far edge of the body, never as an outline */
.phone-side{position:absolute;inset:-3px;border-radius:73px;
  transform:translateZ(calc(-1 * var(--d)));
  background:linear-gradient(100deg,#4a4744 0%,#252423 18%,#0d0d0d 52%,#2a2927 86%,#514d49 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22398%22%20height%3D%22826.2%22%20viewBox%3D%220%200%20398%20826.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20281.2%200%20c%2040.884%200%2061.326%200%2076.941%207.957%20a%2073%2073%200%200%201%2031.902%2031.902%20c%207.957%2015.616%207.957%2036.057%207.957%2076.941%20L%20398%20709.4%20c%200%2040.884%200%2061.326%20-7.957%2076.941%20a%2073%2073%200%200%201%20-31.902%2031.902%20c%20-15.616%207.957%20-36.057%207.957%20-76.941%207.957%20L%20116.8%20826.2%20c%20-40.884%200%20-61.326%200%20-76.941%20-7.957%20a%2073%2073%200%200%201%20-31.902%20-31.902%20c%20-7.957%20-15.616%20-7.957%20-36.057%20-7.957%20-76.941%20L%200%20116.8%20c%200%20-40.884%200%20-61.326%207.957%20-76.941%20a%2073%2073%200%200%201%2031.902%20-31.902%20c%2015.616%20-7.957%2036.057%20-7.957%2076.941%20-7.957%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22398%22%20height%3D%22826.2%22%20viewBox%3D%220%200%20398%20826.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20281.2%200%20c%2040.884%200%2061.326%200%2076.941%207.957%20a%2073%2073%200%200%201%2031.902%2031.902%20c%207.957%2015.616%207.957%2036.057%207.957%2076.941%20L%20398%20709.4%20c%200%2040.884%200%2061.326%20-7.957%2076.941%20a%2073%2073%200%200%201%20-31.902%2031.902%20c%20-15.616%207.957%20-36.057%207.957%20-76.941%207.957%20L%20116.8%20826.2%20c%20-40.884%200%20-61.326%200%20-76.941%20-7.957%20a%2073%2073%200%200%201%20-31.902%20-31.902%20c%20-7.957%20-15.616%20-7.957%20-36.057%20-7.957%20-76.941%20L%200%20116.8%20c%200%20-40.884%200%20-61.326%207.957%20-76.941%20a%2073%2073%200%200%201%2031.902%20-31.902%20c%2015.616%20-7.957%2036.057%20-7.957%2076.941%20-7.957%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---- the right-hand rim: side button + camera control -------------------- */
.phone-wall{position:absolute;right:0;top:0;bottom:0;width:var(--d);z-index:1;
  transform-origin:right center;transform:rotateY(-90deg);
  /* shading runs ACROSS the depth (back -> front chamfer), not along the
     length: shading it lengthwise is what produced the blown wedges that
     stopped dead at the corners */
  background:
    linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 22%,
      rgba(255,255,255,0) 78%,rgba(255,255,255,.04) 100%),
    linear-gradient(90deg,#141210 0%,#262320 6%,#443f39 15%,#332f2b 26%,#443f37 43%,
      #575148 59%,#6e675d 74%,#8b8378 87%,#b6ada1 94%,#cdc4b6 96.5%,#b3aa9f 99%,#a79f94 100%);
  /* The squircle's right edge only runs straight between y=p and y=h-p, where
     p = 1.6r = 112px of 820.2 -> 13.66%..86.34%. Outside that the silhouette
     curves away from this plane, so the rim has to be fully faded by then or
     it hangs off the corner as a detached wedge. */
  -webkit-mask-image:linear-gradient(180deg,transparent 6.5%,rgba(0,0,0,.35) 10%,
    #000 13.66%,#000 86.34%,rgba(0,0,0,.35) 90%,transparent 93.5%);
  mask-image:linear-gradient(180deg,transparent 6.5%,rgba(0,0,0,.35) 10%,
    #000 13.66%,#000 86.34%,rgba(0,0,0,.35) 90%,transparent 93.5%)}
/* antenna band splits */
.phone-wall::before,.phone-wall::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.4) 55%,
    rgba(255,255,255,.16) 86%,rgba(255,255,255,.26) 96%,rgba(0,0,0,.3) 100%);
  opacity:.8}
.phone-wall::before{top:17%}
.phone-wall::after{top:83%}

/* keys share the wall's plane, so lift them 1px proud of it - which is also
   how a real button sits, and it settles the depth-sort fight */
.phone-keys{position:absolute;right:0;top:0;bottom:0;width:var(--d);z-index:2;
  transform-origin:right center;transform:rotateY(-90deg) translateZ(-1px)}
.phone-keys i{position:absolute;left:9px;width:27px;border-radius:3px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 4%,rgba(0,0,0,0) 9%,
      rgba(0,0,0,0) 91%,rgba(0,0,0,.25) 96%,rgba(0,0,0,.9) 100%),
    linear-gradient(90deg,#38342f 0%,#8a837a 15%,#4d4944 38%,#332f2c 58%,
      #7a736a 80%,#c0b8ac 94%,#6d675f 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 3px 7px rgba(0,0,0,.7),
             inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5)}
/* side button: 26.5% -> 41% down the right rim */
.phone-keys .k-power{top:26.5%;height:14.5%}
/* camera control: shorter, below the side button, sapphire face */
.phone-keys .k-cam{top:46.5%;height:7.2%;left:11px;width:24px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 7%,rgba(0,0,0,0) 15%,
      rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 93%,rgba(0,0,0,.9) 100%),
    linear-gradient(90deg,#332f2b 0%,#6f6961 16%,#403c38 46%,#2b2825 66%,
      #6a645b 86%,#aaa298 96%,#615b54 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 3px 6px rgba(0,0,0,.65),
             inset 0 1px 0 rgba(255,255,255,.22)}
.phone-keys .k-cam::after{content:"";position:absolute;inset:2px 4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(120,150,185,.18),rgba(20,26,34,.6) 55%,rgba(150,180,215,.24));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* ---- the face ----------------------------------------------------------- */
.phone-body{position:relative;aspect-ratio:71.5/149.6;border-radius:70px;padding:var(--pad);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22392%22%20height%3D%22820.2%22%20viewBox%3D%220%200%20392%20820.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20280%200%20c%2039.204%200%2058.806%200%2073.779%207.63%20a%2070%2070%200%200%201%2030.591%2030.591%20c%207.63%2014.974%207.63%2034.576%207.63%2073.779%20L%20392%20708.2%20c%200%2039.204%200%2058.806%20-7.63%2073.779%20a%2070%2070%200%200%201%20-30.591%2030.591%20c%20-14.974%207.63%20-34.576%207.63%20-73.779%207.63%20L%20112%20820.2%20c%20-39.204%200%20-58.806%200%20-73.779%20-7.63%20a%2070%2070%200%200%201%20-30.591%20-30.591%20c%20-7.63%20-14.974%20-7.63%20-34.576%20-7.63%20-73.779%20L%200%20112%20c%200%20-39.204%200%20-58.806%207.63%20-73.779%20a%2070%2070%200%200%201%2030.591%20-30.591%20c%2014.974%20-7.63%2034.576%20-7.63%2073.779%20-7.63%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.42%29%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(90deg,rgba(255,255,255,0) 96%,rgba(255,255,255,.045) 98.4%,
      rgba(255,255,255,.16) 100%),
    linear-gradient(155deg,#6a6660 0%,#3a3835 6%,#1c1b1a 26%,#101010 56%,
      #232220 84%,#5c5852 100%);
  background-size:100% 100%;background-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22392%22%20height%3D%22820.2%22%20viewBox%3D%220%200%20392%20820.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20280%200%20c%2039.204%200%2058.806%200%2073.779%207.63%20a%2070%2070%200%200%201%2030.591%2030.591%20c%207.63%2014.974%207.63%2034.576%207.63%2073.779%20L%20392%20708.2%20c%200%2039.204%200%2058.806%20-7.63%2073.779%20a%2070%2070%200%200%201%20-30.591%2030.591%20c%20-14.974%207.63%20-34.576%207.63%20-73.779%207.63%20L%20112%20820.2%20c%20-39.204%200%20-58.806%200%20-73.779%20-7.63%20a%2070%2070%200%200%201%20-30.591%20-30.591%20c%20-7.63%20-14.974%20-7.63%20-34.576%20-7.63%20-73.779%20L%200%20112%20c%200%20-39.204%200%20-58.806%207.63%20-73.779%20a%2070%2070%200%200%201%2030.591%20-30.591%20c%2014.974%20-7.63%2034.576%20-7.63%2073.779%20-7.63%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22392%22%20height%3D%22820.2%22%20viewBox%3D%220%200%20392%20820.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20280%200%20c%2039.204%200%2058.806%200%2073.779%207.63%20a%2070%2070%200%200%201%2030.591%2030.591%20c%207.63%2014.974%207.63%2034.576%207.63%2073.779%20L%20392%20708.2%20c%200%2039.204%200%2058.806%20-7.63%2073.779%20a%2070%2070%200%200%201%20-30.591%2030.591%20c%20-14.974%207.63%20-34.576%207.63%20-73.779%207.63%20L%20112%20820.2%20c%20-39.204%200%20-58.806%200%20-73.779%20-7.63%20a%2070%2070%200%200%201%20-30.591%20-30.591%20c%20-7.63%20-14.974%20-7.63%20-34.576%20-7.63%20-73.779%20L%200%20112%20c%200%20-39.204%200%20-58.806%207.63%20-73.779%20a%2070%2070%200%200%201%2030.591%20-30.591%20c%2014.974%20-7.63%2034.576%20-7.63%2073.779%20-7.63%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* black bezel plate sitting inside the titanium band */
.phone-body::before{content:"";position:absolute;inset:var(--band);border-radius:66px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22384%22%20height%3D%22812.2%22%20viewBox%3D%220%200%20384%20812.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20278.4%200%20c%2036.963%200%2055.445%200%2069.563%207.194%20a%2066%2066%200%200%201%2028.843%2028.843%20c%207.194%2014.118%207.194%2032.6%207.194%2069.563%20L%20384%20706.6%20c%200%2036.963%200%2055.445%20-7.194%2069.563%20a%2066%2066%200%200%201%20-28.843%2028.843%20c%20-14.118%207.194%20-32.6%207.194%20-69.563%207.194%20L%20105.6%20812.2%20c%20-36.963%200%20-55.445%200%20-69.563%20-7.194%20a%2066%2066%200%200%201%20-28.843%20-28.843%20c%20-7.194%20-14.118%20-7.194%20-32.6%20-7.194%20-69.563%20L%200%20105.6%20c%200%20-36.963%200%20-55.445%207.194%20-69.563%20a%2066%2066%200%200%201%2028.843%20-28.843%20c%2014.118%20-7.194%2032.6%20-7.194%2069.563%20-7.194%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.07%29%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"),#050505;
  background-size:100% 100%;background-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22384%22%20height%3D%22812.2%22%20viewBox%3D%220%200%20384%20812.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20278.4%200%20c%2036.963%200%2055.445%200%2069.563%207.194%20a%2066%2066%200%200%201%2028.843%2028.843%20c%207.194%2014.118%207.194%2032.6%207.194%2069.563%20L%20384%20706.6%20c%200%2036.963%200%2055.445%20-7.194%2069.563%20a%2066%2066%200%200%201%20-28.843%2028.843%20c%20-14.118%207.194%20-32.6%207.194%20-69.563%207.194%20L%20105.6%20812.2%20c%20-36.963%200%20-55.445%200%20-69.563%20-7.194%20a%2066%2066%200%200%201%20-28.843%20-28.843%20c%20-7.194%20-14.118%20-7.194%20-32.6%20-7.194%20-69.563%20L%200%20105.6%20c%200%20-36.963%200%20-55.445%207.194%20-69.563%20a%2066%2066%200%200%201%2028.843%20-28.843%20c%2014.118%20-7.194%2032.6%20-7.194%2069.563%20-7.194%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22384%22%20height%3D%22812.2%22%20viewBox%3D%220%200%20384%20812.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20278.4%200%20c%2036.963%200%2055.445%200%2069.563%207.194%20a%2066%2066%200%200%201%2028.843%2028.843%20c%207.194%2014.118%207.194%2032.6%207.194%2069.563%20L%20384%20706.6%20c%200%2036.963%200%2055.445%20-7.194%2069.563%20a%2066%2066%200%200%201%20-28.843%2028.843%20c%20-14.118%207.194%20-32.6%207.194%20-69.563%207.194%20L%20105.6%20812.2%20c%20-36.963%200%20-55.445%200%20-69.563%20-7.194%20a%2066%2066%200%200%201%20-28.843%20-28.843%20c%20-7.194%20-14.118%20-7.194%20-32.6%20-7.194%20-69.563%20L%200%20105.6%20c%200%20-36.963%200%20-55.445%207.194%20-69.563%20a%2066%2066%200%200%201%2028.843%20-28.843%20c%2014.118%20-7.194%2032.6%20-7.194%2069.563%20-7.194%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Dynamic Island: 125 x 36.7pt on a 402pt-wide display, 11pt below the glass,
   front camera inset from the right end - no earpiece slit, real ones have
   none inside the pill */
.phone-island{position:absolute;top:calc(var(--pad) + 10px);left:50%;transform:translateX(-50%);
  width:114px;height:33px;border-radius:16.5px;background:#000;z-index:3;
  display:flex;align-items:center;justify-content:flex-end;padding-right:19px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.phone-lens{width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#242c36 0%,#0e1319 52%,#04060a 82%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

.phone-screen{position:relative;z-index:2;height:100%;border-radius:57px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22366%22%20height%3D%22794.2%22%20viewBox%3D%220%200%20366%20794.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20274.8%200%20c%2031.923%200%2047.884%200%2060.077%206.213%20a%2057%2057%200%200%201%2024.91%2024.91%20c%206.213%2012.193%206.213%2028.154%206.213%2060.077%20L%20366%20703%20c%200%2031.923%200%2047.884%20-6.213%2060.077%20a%2057%2057%200%200%201%20-24.91%2024.91%20c%20-12.193%206.213%20-28.154%206.213%20-60.077%206.213%20L%2091.2%20794.2%20c%20-31.923%200%20-47.884%200%20-60.077%20-6.213%20a%2057%2057%200%200%201%20-24.91%20-24.91%20c%20-6.213%20-12.193%20-6.213%20-28.154%20-6.213%20-60.077%20L%200%2091.2%20c%200%20-31.923%200%20-47.884%206.213%20-60.077%20a%2057%2057%200%200%201%2024.91%20-24.91%20c%2012.193%20-6.213%2028.154%20-6.213%2060.077%20-6.213%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.11%29%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"),#0c0c0c;
  background-size:100% 100%;background-repeat:no-repeat;
  display:flex;flex-direction:column;
  /* the mask does the corner clipping, so overflow:hidden would only re-clip
     it back to a circular arc */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22366%22%20height%3D%22794.2%22%20viewBox%3D%220%200%20366%20794.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20274.8%200%20c%2031.923%200%2047.884%200%2060.077%206.213%20a%2057%2057%200%200%201%2024.91%2024.91%20c%206.213%2012.193%206.213%2028.154%206.213%2060.077%20L%20366%20703%20c%200%2031.923%200%2047.884%20-6.213%2060.077%20a%2057%2057%200%200%201%20-24.91%2024.91%20c%20-12.193%206.213%20-28.154%206.213%20-60.077%206.213%20L%2091.2%20794.2%20c%20-31.923%200%20-47.884%200%20-60.077%20-6.213%20a%2057%2057%200%200%201%20-24.91%20-24.91%20c%20-6.213%20-12.193%20-6.213%20-28.154%20-6.213%20-60.077%20L%200%2091.2%20c%200%20-31.923%200%20-47.884%206.213%20-60.077%20a%2057%2057%200%200%201%2024.91%20-24.91%20c%2012.193%20-6.213%2028.154%20-6.213%2060.077%20-6.213%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22366%22%20height%3D%22794.2%22%20viewBox%3D%220%200%20366%20794.2%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M%20274.8%200%20c%2031.923%200%2047.884%200%2060.077%206.213%20a%2057%2057%200%200%201%2024.91%2024.91%20c%206.213%2012.193%206.213%2028.154%206.213%2060.077%20L%20366%20703%20c%200%2031.923%200%2047.884%20-6.213%2060.077%20a%2057%2057%200%200%201%20-24.91%2024.91%20c%20-12.193%206.213%20-28.154%206.213%20-60.077%206.213%20L%2091.2%20794.2%20c%20-31.923%200%20-47.884%200%20-60.077%20-6.213%20a%2057%2057%200%200%201%20-24.91%20-24.91%20c%20-6.213%20-12.193%20-6.213%20-28.154%20-6.213%20-60.077%20L%200%2091.2%20c%200%20-31.923%200%20-47.884%206.213%20-60.077%20a%2057%2057%200%200%201%2024.91%20-24.91%20c%2012.193%20-6.213%2028.154%20-6.213%2060.077%20-6.213%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.phone-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 22%,
    rgba(255,255,255,0) 46%,rgba(255,255,255,0) 100%)}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  /* the mask is the shape; border-radius would only clip its corners back to
     an arc. It stays above purely as the fallback for anything without masks. */
  .phone-side,.phone-body,.phone-body::before,.phone-screen{border-radius:0}
}
/* home indicator: 140 x 5pt, 8pt off the bottom */
.phone-home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:127px;height:5px;border-radius:3px;background:rgba(255,255,255,.62);z-index:5}

.phone-bar{display:flex;align-items:center;gap:9px;padding:54px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.phone-av{width:28px;height:28px;flex:none;display:grid;place-items:center;background:#fff;color:#0A0A0A;
  font-family:var(--display);font-weight:600;font-size:14px}
.phone-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.phone-who b{font-size:12.5px;color:#fff;font-weight:600}
.phone-who em{font-style:normal;font-size:10.5px;color:var(--muted)}
.phone-time{margin-left:auto;font-size:10px;color:var(--muted-2);white-space:nowrap}
.phone-thread{flex:1;padding:14px 14px 20px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.pb{max-width:84%;padding:9px 12px;font-size:12.5px;line-height:1.45;border-radius:14px}
.pb.them{background:rgba(255,255,255,.09);color:#E6E6E6;border-bottom-left-radius:4px}
.pb.us{background:#fff;color:#0A0A0A;margin-left:auto;border-bottom-right-radius:4px}
.pb.us strong{font-weight:600}
.typing-b{display:inline-flex;gap:4px;align-items:center;width:auto;max-width:none;align-self:flex-start;padding:12px}
.typing-b i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);animation:bounce 1.2s infinite}
.typing-b i:nth-child(2){animation-delay:.15s}.typing-b i:nth-child(3){animation-delay:.3s}
.phone-glow{position:absolute;inset:-10% -14%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent 72%)}

@media (prefers-reduced-motion:reduce){.typing-b i{animation:none}}
@media (max-width:980px){
  .alwayson-grid{grid-template-columns:1fr}
  .phone-wrap{margin-top:26px;margin-bottom:-60px;perspective:none}
  .phone{transform:rotateZ(-3deg);width:min(310px,74vw)}
}
@media (max-width:640px){
  .phone-wrap{margin-top:18px;margin-bottom:-40px}
  .phone-glow{display:none}
  .phone{transform:none}
  .capline li{grid-template-columns:auto 1fr;gap:14px}
}


/* ============ browse by town (under the hero) ============ */

/* ============ listings header ============ */
.listings-head{margin-bottom:20px}
.listings-head .h-sec{margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.info-dot{width:23px;height:23px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  background:none;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:12px;
  font-style:italic;font-weight:600;line-height:1;display:grid;place-items:center;
  transition:color .18s,border-color .18s;align-self:center}
.info-dot:hover,.info-dot[aria-expanded="true"]{color:var(--text);border-color:var(--text)}
.info-tip{max-width:62ch;margin-top:14px;padding-left:15px;border-left:1px solid var(--line-2);
  font-size:15px;line-height:1.6;color:var(--muted)}
.info-tip[hidden]{display:none}

/* ============ the island ============ */
.listbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin-bottom:22px;flex-wrap:wrap}
.results-count{font-size:14px;color:var(--muted);padding-top:11px;flex:none}
.results-count b{color:var(--text);font-weight:600}

.island{position:relative;margin-left:auto;width:100%;max-width:232px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  transition:max-width .44s var(--ease),border-radius .34s var(--ease),background .3s var(--ease),box-shadow .3s}
.island[data-open="true"]{border-radius:var(--r-card);max-width:100%;background:var(--bg-2);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.9)}
.island-btn{display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;cursor:pointer;color:var(--text);
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:12px 20px;white-space:nowrap}
.island-btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.island[data-open="true"] .island-btn svg{transform:rotate(90deg)}
.island-badge{margin-left:auto;min-width:19px;height:19px;padding:0 6px;display:grid;place-items:center;
  background:var(--text);color:var(--bg);font-size:11px;border-radius:999px;letter-spacing:0}
.island-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.island[data-open="true"] .island-wrap{grid-template-rows:1fr}
.island-wrap>.island-panel{overflow:hidden;min-height:0}
.island-panel{display:grid;grid-template-columns:1.5fr repeat(3,1fr) auto;gap:14px;
  align-items:end;padding:0 20px;transition:padding .4s var(--ease)}
.island[data-open="true"] .island-panel{padding:4px 20px 20px}
.island-panel .field{margin:0}
.island-panel label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.island-panel input,.island-panel select{padding:10px 12px;font-size:14px}
.active-filters{font-size:13px;color:var(--muted);margin:-8px 0 20px;min-height:1em}

@media (max-width:860px){
  .island{max-width:100%;margin-left:0}
  .island-panel{grid-template-columns:1fr 1fr}
  .listbar{flex-direction:column;align-items:stretch}
  .results-count{padding-top:0}
}
@media (max-width:560px){.island-panel{grid-template-columns:1fr}}


/* ============ squircle corners ============ */
/* corner-shape turns the radius into a true superellipse where supported;
   browsers without it fall back to the plain rounded radius already set above. */
.btn,.card,.card-art,.tag,.cmp-btn,.cmp-chip,.cmp-slot,.cmp-col img,.cmp-modal-panel,.cmp-modal-x,
.field input,.field select,.field textarea,.val-card,.aside-card,.filters,.island,.island-btn,
.hood-card,.agent,.agent img.av,.agent-mini .av,.quote,.q-av,.chat,.chat-av,.bub,.reply-chip,
.calc-out,.band,.gal-main,.gal-thumb,.map-wrap,.hero-copy,.phone-body,
.phone-screen,.phone-side,.info-dot,.demo-pop,.mobile-menu ul a{
  corner-shape:squircle;
}
/* pills stay pills */
.island:not([data-open="true"]),.island-badge{corner-shape:round}

/* bracket marks pull inside the curve so they don't clip the corner */
.crn::before,.crn>.crn-i::after{margin:9px}
.crn-inset::before,.crn-inset>.crn-i::after{margin:var(--crn-gap,14px)}

/* controls sitting inside the nav pill match its geometry */
.nav-cta .btn,.nav .menu-btn{border-radius:999px;corner-shape:round}


/* ============ hero footer row ============ */
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-top:clamp(18px,2.2vw,30px)}
.hero-foot .hero-sub{margin:0;padding-bottom:6px}
.hero-foot .hero-cta{margin-top:0}
@media (max-width:820px){
  .hero-name{white-space:normal}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:20px}
}

/* ============ brand lockup: tight leading ============ */
.brand{line-height:.92}
.brand small{margin-top:0;line-height:1;letter-spacing:.15em}
.brand>span{display:block}

.nav.scrolled .nav-links a{color:var(--muted)}
.nav.scrolled .nav-links a:hover{color:#fff}
.nav.scrolled .brand{color:#fff}