/* Realtor personal-site remake — structure modeled on a Squarespace "personal brand" realtor site.
   Display: Archivo Expanded (free stand-in for Pragmatica Extended). Body: Inter. */
:root{
  /* Skyler Albright — palette. Sunset is now a CORE colour, not just an accent:
     it carries the buttons, the second hero line and every section marker.
     It stays a background/large-type colour on light surfaces — 2.9:1 on
     white — so --warm-ink (5.9:1, AA) is what carries warm body text there.
     On the dark backdrop sunset reaches 6.4:1, so it can carry type freely. */
  --bg:#ffffff; --ink:#0a0a0a; --muted:#555555; --line:#e5e5e5;
  --ocean:#2f4a34; --ocean-deep:#22382a;
  /* Palette from the client's reference mockup (2026-10-08): forest green,
     sage, tan/brass, cream. Token NAMES are kept (--sunset, --ocean…) because
     ~200 rules key off them; the values are what changed.
     Text accents on dark use --sunset-glow (pale tan), never --sunset: tan
     #b08850 over the shader's brightest point is 2.8:1 and fails even the
     large-text bar; pale tan holds 5.1:1. --sunset is for fills and borders. */
  --sunset:#b08850; --sunset-deep:#8a6535; --sunset-glow:#d9bf93;
  --sage:#4f6b48; --cream:#f6f0e6;
  /* Light theme (2026-10-08): the page is tan/cream, text is deep forest. */
  --ink-d:#1e3124; --accent-text:#2f4a34;
  --warm-ink:#6e5128;
  --sand:#efe3cf;
  /* Panels on the dark backdrop. Solid white read as a hole punched in the
     page; this lets the gradient through and keeps the card part of it. */
  --glass:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.16);
  --glass-field:rgba(255,255,255,.05);
  --dark:#15231a; --on-dark:#1e3124; --field:#ffffff;
  --btn-grey:#2f4a34;
  --bg-core:#0f1a13; --bg-bloom:#2b3d2f; --bg-warm:176,136,80;
  /* kept for the swatch page, which still prints the old silk values */
  --silk-a:#15231a; --silk-b:#12292e; --silk-rgb:79,107,72;
  --display:"Archivo",system-ui,sans-serif; --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --wrap:1200px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
h1{font-size:clamp(36px,6vw,60px)} h2{font-size:clamp(26px,3.6vw,36px);line-height:1.2} h3{font-size:clamp(24px,3.2vw,36px)} h4{font-size:clamp(16px,1.8vw,21px);line-height:1.2}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Header — transparent over hero, logo left, nav, socials + CTA right */
.site-header{position:absolute;inset:0 0 auto;z-index:20;min-height:103px;padding:14px var(--gutter);display:flex;align-items:center;gap:32px}
.site-header.solid{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{display:flex;flex-direction:row;align-items:center;gap:10px;text-decoration:none;line-height:1;color:inherit}
.logo-mark{display:block;flex:0 0 auto;overflow:visible;--logo-accent:var(--sunset);--logo-tile:var(--ocean)}
.logo-word{font:700 13px/1 var(--display);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.logo-word.solo{font-size:15px;letter-spacing:.16em}
.logo-word i{font-style:normal;color:var(--accent-text)}
.site-header.shrunk .logo-mark{width:34px;height:34px;transition:width .2s ease,height .2s ease}
/* On the dark header the tile's ocean fill disappears into the background, so
   that one variant gets a lighter fill there. */
.on-dark .logo-mark{--logo-tile:#4f6b48}
@media (max-width:420px){.logo-word{font-size:11px;letter-spacing:.1em}}
.nav{display:flex;gap:24px;flex:1}
.nav a,.nav button{font:400 15px var(--body);text-decoration:none;background:none;border:0;cursor:pointer;color:inherit;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover,.nav button:hover{border-color:currentColor}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:-16px;background:var(--bg);color:var(--ink);padding:12px 16px;min-width:180px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}
.socials{display:flex;gap:14px;align-items:center}
.socials a{width:18px;height:18px;display:grid;place-items:center;opacity:.85;transition:opacity .2s,transform .2s}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:32px;height:24px;position:relative;color:inherit}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor}
.menu-toggle::before{top:4px}.menu-toggle span{top:11px}.menu-toggle::after{top:18px}
.mobile-menu{position:fixed;inset:0;background:var(--bg);color:var(--ink);z-index:30;padding:80px var(--gutter);display:none;flex-direction:column;gap:20px;overflow-y:auto;font:700 26px var(--display);font-stretch:125%;text-transform:uppercase}
.mobile-menu.open{display:flex}.mobile-menu a{text-decoration:none}
.mobile-menu .mobile-review summary{cursor:pointer;list-style:none}
.mobile-menu .mobile-review summary::-webkit-details-marker{display:none}
.mobile-menu .mobile-review summary::after{content:"+";margin-left:12px}
.mobile-menu .mobile-review[open] summary::after{content:"−"}
.mobile-menu .mobile-review div{display:grid;gap:12px;margin-top:14px;padding-left:16px;font:500 18px var(--body);text-transform:none}
.mobile-menu .close{position:absolute;top:20px;right:var(--gutter);font:400 32px/1 var(--body);
  color:inherit;background:none;border:0;cursor:pointer}
.on-dark{color:var(--on-dark)}

/* Hero — full-bleed photo, centered stacked headline */
.page-hero{min-height:70svh}

/* Image-left / text-right intro block */
.split{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  padding:clamp(56px,10vh,96px) 0;align-items:center}
.split .copy{text-align:left;max-width:52ch}
.stack img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split .copy h3{margin-bottom:20px;font-size:clamp(24px,3.2vw,40px);line-height:1.1}
.split .copy p{margin-bottom:18px;color:#222}
.stack{display:grid;gap:16px}
.ph{background:linear-gradient(135deg,#d9d9d9,#bdbdbd);aspect-ratio:4/3;display:grid;place-items:center;color:#777;font:500 12px var(--body);letter-spacing:.12em;text-transform:uppercase}
.ph.tall{aspect-ratio:3/4}.ph.sq{aspect-ratio:1}
.press{display:flex;gap:32px;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap}
.press span{font:800 20px var(--display);font-stretch:112%;color:#333}

/* Newsletter band (black) */
.band{padding:72px 0;text-align:center}
.band.dark{background:var(--dark);color:var(--on-dark)}
.band.warm{position:relative;color:var(--on-dark);isolation:isolate;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(176,136,80,.16), transparent 70%),
    linear-gradient(180deg, rgba(176,136,80,.10), rgba(176,136,80,.04) 50%, rgba(176,136,80,.09));
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(217,191,147,.28),inset 0 -1px 0 rgba(217,191,147,.18)}
/* Placeholders inside the warm band pick up the warmth rather than staying
   neutral, so an empty slot still looks like part of the panel. */
.band.warm .media-slot.is-empty{
  background:repeating-linear-gradient(45deg,rgba(255,252,246,0.30) 0 10px,rgba(255,252,246,0.12) 10px 20px);
  border-color:rgba(217,191,147,.3);color:rgba(255,236,222,.7)}
.band p.sub{margin:12px 0 32px;font-size:15px}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:0 auto 24px}
input,textarea,select{width:100%;padding:22px 32px;border:1px solid rgba(0,0,0,.12);background:var(--field);color:#000;font:400 15px var(--body)}
input:focus,textarea:focus,select:focus{outline:2px solid #000;outline-offset:1px}
.band.dark input:focus{outline-color:#fff}
.band h2.big{font-size:clamp(40px,7vw,72px)}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:88px;max-width:850px;margin:40px auto 24px}
.video{border:0;width:100%;aspect-ratio:380/324;background:#222;display:grid;place-items:center;color:#aaa;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.band .socials{justify-content:center;gap:10px}
.band .socials a{width:38px;height:38px;background:#fff;color:#000;border-radius:6px}

/* Grids: client wins, past projects, appearances */
.section{padding:96px 0}
.section-head{text-align:left;margin-bottom:40px}
/* The exception: a section whose content is a centred panel (a form) centres
   its heading too, so the two agree. */
.section.center{text-align:center}
.section.center .section-head{text-align:center}
.section.center .sub{margin-left:auto;margin-right:auto}
.section.center [data-form] .f-card,
.section.center [data-form] .f-done{margin-left:auto;margin-right:auto;text-align:left}
.section.center [data-form] .f-card .btn{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.section.center [data-form] .f-card .f-fine,
.section.center [data-form] .f-card .f-err{text-align:center}
.grid{display:grid;gap:32px;grid-template-columns:repeat(3,1fr)}
.card h2{font-size:20px;margin-top:14px}
.card p{font-size:14px;color:var(--muted)}
.form-card{max-width:720px;margin:0 auto;display:grid;gap:16px}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-card label{font-size:13px;font-weight:600;display:grid;gap:6px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{border:1px solid var(--line);padding:32px}
.review p{font-size:15px;margin-bottom:16px}
.review strong{font:700 13px var(--display);font-stretch:125%;text-transform:uppercase}

/* Footer */
.site-footer{padding:48px var(--gutter);font-size:13px}
.site-footer nav{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.site-footer nav a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.site-footer .socials a{color:#000}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}

@media (max-width:900px){
  .nav,.site-header .socials,.site-header .btn{display:none}
  .menu-toggle{display:block}
  .site-header{justify-content:space-between}
  .split,.grid,.reviews,.fields,.form-card .row,.videos{grid-template-columns:1fr}
  .split .copy{max-width:none}
}

/* ManyChat keyword pages (keyword.html + keyword-page.js) */
.kw-gate{min-height:100svh;display:grid;place-content:center;text-align:center;padding:24px 0 48px}
.kw-gate .wrap{max-width:560px}
.kw-gate-title{font-size:clamp(34px,5.5vw,56px);line-height:1.05;margin:0 0 24px}
.kw-gate .kw-card{padding:24px}
.kw-hero{background:#111 linear-gradient(160deg,#1c1c1c,#000 65%);color:var(--on-dark);padding:150px 0 80px}
.kw-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.kw-eyebrow{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--btn-grey);margin-bottom:18px}
.kw-hero h1{font-size:clamp(32px,4.6vw,54px);margin-bottom:20px}
.kw-sub{color:rgba(30,49,36,.89);font-size:18px;max-width:34em}
.kw-stats{display:flex;flex-wrap:wrap;gap:36px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(30,49,36,.16)}
.kw-stats b{display:block;font:700 28px var(--display);font-stretch:125%;text-transform:uppercase}
.kw-stats span{font-size:13px;color:rgba(30,49,36,.89)}
.kw-card{background:var(--bg);color:var(--ink);padding:32px}
.kw-card h2{font-size:18px;margin-bottom:4px}
.kw-brand{font-size:13px;color:var(--muted);margin-bottom:20px}
.kw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kw-field{display:grid;gap:6px;margin-bottom:14px;font-size:13px;font-weight:500}
.kw-field input,.kw-field select{padding:15px 18px}
.kw-card input[aria-invalid=true]{border-color:#b3261e}
.kw-err{color:#b3261e;font-size:12px;font-weight:400}
.kw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kw-card .btn{width:100%}
.kw-fine{font-size:12px;color:var(--muted);margin-top:12px}
.kw-done{text-align:center;padding:24px 0}.kw-done h2{margin-bottom:10px}
.kw-point{background:#f4f4f3;padding:28px}
.kw-point h3{font-size:15px;margin-bottom:10px}
.kw-point p{color:var(--muted);font-size:15px}
.kw-legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);max-width:820px}
.kw-legal p+p{margin-top:10px}
@media (max-width:900px){.kw-hero{padding:120px 0 48px}.kw-grid,.kw-row{grid-template-columns:1fr}.kw-grid{gap:36px}}

/* Image testimonial grid (21st.dev ravikatiyar162) — /buy client closings */
.itg{margin-top:96px}
.itg-title{text-align:center;margin-bottom:32px}
.itg-grid{column-count:3;column-gap:1rem}
.itg-card{position:relative;margin:0 0 1rem;break-inside:avoid;border-radius:16px;overflow:hidden;opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out}
.itg-card.in{opacity:1;transform:none}
.itg-card.in:hover{transform:scale(1.05);transition:transform .3s ease-in-out}
.itg-card img{display:block;width:100%;height:auto}
.itg-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.2),transparent);pointer-events:none}
.itg-card figcaption{position:absolute;top:0;left:0;z-index:1;padding:16px;color:var(--ink-d)}
.itg-who{display:flex;align-items:center;gap:12px;margin-bottom:8px;font:600 14px var(--body);text-shadow:0 1px 3px rgba(78,58,30,.24)}
.itg-avatar{width:32px;height:32px;border-radius:50%;border:2px solid rgba(30,49,36,.50);background:rgba(78,58,30,.18);display:grid;place-items:center;font:600 11px var(--body)}
.itg-line{font:500 14px/1.25 var(--body);text-shadow:0 1px 3px rgba(78,58,30,.24)}
@media (max-width:1023px){.itg-grid{column-count:2}}
@media (max-width:639px){.itg-grid{column-count:1}}
@media (prefers-reduced-motion:reduce){.itg-card{opacity:1;transform:none;transition:none}}

/* ── Silk zones (silk.js): homepage below the hero + every ManyChat page ─────────────
   A viewport-sized silk layer sticks behind the zone's content while it scrolls. */
/* ── Animated backdrop (shader-bg.js) ───────────────────────────
   ONE fixed canvas behind the whole document, on every page. It replaced a
   per-section sticky gradient; sections are therefore transparent now, and
   anything that paints its own opaque background would hide it.

   The scrim is not decoration. The mesh drifts a mid-sunset under body copy,
   and every page is white-on-dark — without it, contrast moves as the shader
   moves. With it the darkest composite stays put. */
.shader-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#f1e7d6}
.shader-bg canvas{display:block;width:100%;height:100%}
.shader-scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(246,240,230,0.41), rgba(246,240,230,0.28) 45%, rgba(246,240,230,0.43)),
    radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(246,240,230,0.32) 100%)}

/* No WebGL → the canvas is removed and this shows through instead. */
body{background:radial-gradient(125% 125% at 50% 10%, #f6f0e6 30%, #e2cfa9 100%) #f1e7d6;background-attachment:fixed}

.silk-zone{position:relative;isolation:isolate;background:transparent;color:var(--ink-d)}

/* Adapted from 21st.dev @ibelick "background-snippets" — background-radial-black-violet.
   The original is radial-gradient(125% 125% at 50% 10%, #000 40%, #63e 100%): a dark
   core with a bloom pushed to the edges from a point high on the canvas. Geometry kept
   as-is; the violet becomes brand ocean, and a low sunset bloom is layered underneath
   so the warm accent the rest of the site uses shows up in the backdrop too. */
.radial-backdrop{position:relative;background:
  radial-gradient(66% 38% at 50% 114%, rgba(var(--bg-warm),.13), transparent 70%),
  radial-gradient(125% 125% at 50% 10%, var(--bg-core) 40%, var(--bg-bloom) 100%);
  background-color:var(--bg-core)}
/* A very fine grain over the gradient. Without it a gradient this wide bands into
   visible steps on 8-bit displays, which is exactly what makes one look cheap. */
.radial-backdrop::after{content:"";position:absolute;inset:0;opacity:.035;pointer-events:none;
  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='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px}

/* Homepage on silk */
.silk-zone .split .copy p{color:rgba(30,49,36,.92)}
.silk-zone .press span{color:rgba(30,49,36,.93)}

/* ManyChat pages on silk */
.silk-zone .kw-point{background:rgba(255,252,246,0.42);box-shadow:inset 0 0 0 1px rgba(30,49,36,.11)}
.silk-zone .kw-point h3{color:var(--ink-d)}
.silk-zone .kw-point p{color:rgba(30,49,36,.87)}
.silk-zone .kw-legal{color:rgba(30,49,36,.82);border-color:rgba(30,49,36,.14)}
.silk-zone .itg-title{color:var(--ink-d)}

/* Homepage: 4 newest YouTube videos, bigger and tighter */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1200px;margin:40px auto 32px}
.videos .video{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#111}

/* Instagram strip under the Aloha bio */
.ig{padding:0 var(--gutter) 96px;max-width:1200px}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.ig-profile{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.ig-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 40%;box-shadow:0 0 0 2px #fff,0 0 0 4px #d62976}
.ig-profile b{display:block;font:600 17px var(--body)}
.ig-profile small{font-size:14px;opacity:.7}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,32px);
  justify-items:center;align-items:start;min-width:0}

/* Just the post. No bezel and no notch — the only chrome is Instagram's own.
   The aspect ratio is load-bearing, not decorative: the embed iframe takes its
   height from a cross-origin postMessage handshake, and when that does not
   complete it collapses to a sliver. A sized box plus height:100% below means
   the card holds its shape either way. */
.ig-post{position:relative;width:100%;max-width:360px;min-width:0;aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;background:rgba(255,252,246,0.24);
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.09)}
/* The blockquote is what Instagram replaces with its iframe. Until then (or if
   the embed never loads) it is the visible state, so it gets styled. */
.ig-post blockquote.instagram-media{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:16px!important;display:grid!important;place-items:center;text-align:center;
  width:100%!important;height:100%!important;margin:0!important}
.ig-post blockquote.instagram-media a{
  color:rgba(30,49,36,.87);text-decoration:none;font:600 12px/1.5 var(--body);
  letter-spacing:.04em;border-bottom:1px dotted rgba(30,49,36,.36);padding-bottom:2px}
.ig-post blockquote.instagram-media a:hover{color:var(--ink-d)}
/* height:100% is the point — it overrides whatever the resize handshake did or
   did not set, so the card can never collapse. */
.ig-post .instagram-media,
.ig-post iframe.instagram-media{
  width:100%!important;height:100%!important;min-width:0!important;max-width:100%!important;
  margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}

/* Instagram's embed will not render below ~326px wide — it returns a blank
   white iframe. So the grid drops to 2 then 1 column rather than ever handing
   the embed a box it cannot draw in. */
@media (max-width:1080px){.ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ig-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
@media (max-width:640px){.videos{grid-template-columns:1fr}}



/* Keep top-menu items on one line */
.nav a,.nav button{white-space:nowrap}

/* Keyword gate + details pages, and the embedded form on Buy / Sell */
.kw-inside{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:20px}
.kw-hero-details{padding-bottom:48px}
.kw-hero-details .kw-sub{max-width:44em}
.kw-steps{list-style:none;display:grid;gap:16px;max-width:860px}
.kw-step{display:flex;gap:24px;padding:28px;border-radius:14px;background:rgba(255,252,246,0.42);box-shadow:inset 0 0 0 1px rgba(30,49,36,.11)}
.kw-step-n{font:700 22px var(--display);font-stretch:125%;opacity:.5;min-width:44px}
.kw-step h3{font-size:17px;margin-bottom:8px}
.kw-step p{color:rgba(30,49,36,.89);font-size:16px}
.kw-nextbox{max-width:860px;margin-top:48px;padding:32px;border-radius:14px;background:#fff;color:var(--ink)}
.kw-nextbox h2{font-size:20px;margin-bottom:16px}
.kw-nextbox ol{margin:0 0 24px 20px;display:grid;gap:8px;color:#333}
.kw-next{font-weight:600;border-bottom:1px solid currentColor;text-decoration:none}
.kw-done p+p{margin-top:16px}
@media (max-width:600px){.kw-step{flex-direction:column;gap:8px}}

/* Keyword article (articles/<kw>.html): a readable light panel on the silk background */
.kw-article{max-width:860px;background:#fff;color:#1a1a1a;border-radius:14px;padding:clamp(24px,5vw,56px);font-size:17px;line-height:1.7}
.kw-article h2{font-size:clamp(22px,3vw,30px);line-height:1.15;margin-bottom:20px;color:#000}
.kw-article h3{font-size:17px;line-height:1.25;margin:36px 0 12px;color:#000}
.kw-article h4{font-size:15px;line-height:1.3;margin:24px 0 8px;color:#000;font-stretch:112%}
.kw-article p{margin-bottom:16px}
.kw-article ul,.kw-article ol{margin:0 0 18px 22px;display:grid;gap:8px}
.kw-article strong{font-weight:600;color:#000}
.kw-article details{border-top:1px solid var(--line);padding:14px 0}
.kw-article details:last-of-type{border-bottom:1px solid var(--line)}
.kw-article summary{cursor:pointer;font-weight:600;color:#000}
.kw-article details p{margin:10px 0 0}
.kw-article-note{margin-top:28px;font-size:13px;line-height:1.6;color:var(--muted)}

/* Qualifying questions on each keyword's main page, and the Sell form's "why" box */
.kw-qualify{max-width:860px;background:#fff;color:var(--ink);border-radius:14px;padding:clamp(20px,4vw,36px);margin-bottom:24px}
.kw-qualify h2{font-size:18px;line-height:1.25;margin-bottom:20px}
.kw-qualify-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.kw-qualify .btn{margin-top:8px}
.kw-qualify-done{padding:20px 28px;font-weight:600}
.kw-field textarea{padding:15px 18px;resize:vertical;min-height:88px;font:400 15px var(--body)}
.kw-card textarea[aria-invalid=true]{border-color:#b3261e}
@media (max-width:700px){.kw-qualify-grid{grid-template-columns:1fr}}

/* ── Media slots (media.js) ───────────────────────────────── */
.media-slot{position:relative;margin:0;overflow:hidden;border-radius:14px;background:#f4f4f4}
.media-slot img,.media-slot video,.media-slot iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.media-slot.is-empty{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,#f6f6f6 0 10px,#f1f1f1 10px 20px);
  border:1px dashed #d4d4d4;color:var(--muted);text-align:center;padding:16px}
.media-slot-label{font-size:.78rem;font-weight:500;letter-spacing:.02em;max-width:26ch;line-height:1.45}
.media-flag{position:absolute;top:8px;left:8px;background:var(--sunset);color:#241005;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:999px}

/* Sticky header shrink */
.site-header.shrunk{padding-top:6px;padding-bottom:6px;box-shadow:0 1px 0 rgba(10,61,46,.06)}
.site-header.shrunk .btn{padding:8px 16px;font-size:.84rem}

/* Footer additions */
.site-footer .foot-tag{font-weight:600;color:var(--ink);margin:14px 0 6px}
.site-footer .licence{font-size:.82rem;color:var(--muted);margin:0 0 6px}
.site-footer .foot-disclaimer{font-size:.76rem;color:var(--muted);max-width:70ch;line-height:1.6;margin:0 0 10px}
.site-footer .foot-copy{font-size:.76rem;color:var(--muted);margin:0}

/* ══════════════════════════════════════════════════════════════
   Phase 4 — sections rendered from site.config.js (render.js)
   ══════════════════════════════════════════════════════════════ */

/* Unconfirmed facts. Deliberately loud: a bracketed value must never be
   mistaken on screen for something the client has actually confirmed. */
.tbc{font-weight:700;font-style:normal;color:var(--warm-ink);
  border-bottom:1px dotted currentColor;padding-bottom:1px;
  text-decoration:none;background:none}
.tbc::before{content:"\203A";margin-right:.3em;opacity:.75;font-weight:700}
.silk-zone .tbc,.on-dark .tbc,.ah .tbc,.jstory .tbc{color:var(--accent-text)}
/* On the sand panel the sunset tint has too little separation, so the warm
   ink carries it there instead. */
.honesty .tbc{color:#7a3a0d}

/* An empty collection says so instead of vanishing. */
.empty-note{border:1px dashed var(--line);border-radius:14px;padding:clamp(20px,4vw,34px);
  background:#fafafa;max-width:60ch}
.empty-note b{display:block;font:600 15px var(--body);color:var(--ink);margin-bottom:8px}
.empty-note p{color:var(--muted);font-size:15px;line-height:1.65;margin:0}
.silk-zone .empty-note{background:rgba(255,252,246,0.36);border-color:rgba(30,49,36,.23)}
.silk-zone .empty-note b{color:var(--ink-d)}
.silk-zone .empty-note p{color:rgba(30,49,36,.90)}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{position:relative;min-height:88svh;display:grid;align-items:end;overflow:hidden;
  padding-top:clamp(112px,14vh,140px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .media-slot{height:100%;border-radius:0;margin:0;aspect-ratio:auto!important}
.hero-bg::after{content:"";position:absolute;inset:0;
  /* The hero now carries a photograph. Copy sits on the left, so the scrim is
     heaviest there and clears toward the right where the house is. At 0.9 the
     headline's ground is effectively cream regardless of what is behind it. */
  background:
    linear-gradient(90deg,rgba(246,240,230,.94) 0%,rgba(246,240,230,.88) 48%,rgba(246,240,230,.62) 66%,rgba(246,240,230,.14) 100%),
    linear-gradient(to top,rgba(246,240,230,.6) 0%,transparent 40%)}

/* ── Page hero (seller / lender) ──────────────────────────────── */
.page-hero{padding:clamp(120px,16vh,180px) clamp(16px,4vw,48px) clamp(32px,6vh,64px);color:var(--on-dark)}
.page-hero h1{font-size:clamp(30px,5vw,58px);line-height:1.05;max-width:24em;margin:0 0 18px;color:var(--ink-d)}
.page-sub{font-size:clamp(16px,1.8vw,20px);line-height:1.55;max-width:50ch;color:rgba(30,49,36,.95);margin:0}
.page-hero .eyebrow{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm-ink);margin:0 0 14px}
.hero-note{margin-top:20px;font-size:14px;line-height:1.6;max-width:56ch;color:rgba(30,49,36,.86);
  border-left:2px solid var(--sunset);padding-left:14px}

/* ── Steps / how it works ─────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step{padding:28px;border-radius:14px;background:rgba(255,252,246,0.42);
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.13);transition:transform .25s ease}
.step-n{display:block;font:700 26px var(--display);font-stretch:125%;color:var(--warm-ink);
  opacity:.85;margin-bottom:12px}
.step h3{font-size:17px;line-height:1.25;margin:0 0 8px;color:var(--ink-d)}
.step p{font-size:15px;line-height:1.6;color:rgba(30,49,36,.90);margin:0}

/* ── Bio strip portrait ───────────────────────────────────────── */
.bio-portrait{border-radius:16px}

/* ── Referral ─────────────────────────────────────────────────── */
.refer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.refer-fee{font:700 clamp(30px,5vw,52px) var(--display);font-stretch:125%;text-transform:uppercase;
  color:var(--warm-ink);margin:0 0 6px;line-height:1}
.refer-pending{font-size:13px;color:rgba(30,49,36,.84);margin:0 0 28px}
.refer-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.refer-step{border-top:1px solid rgba(30,49,36,.16)}
.refer-step:last-child{border-bottom:1px solid rgba(30,49,36,.16)}
.refer-dot{display:flex;align-items:center;gap:14px;width:100%;padding:18px 0;background:none;border:0;
  text-align:left;cursor:pointer;color:var(--ink-d);font:600 16px var(--body)}
.refer-dot span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:rgba(255,252,246,0.84);font:700 12px var(--body);transition:background .2s ease}
.refer-step.on .refer-dot span{background:var(--sunset);color:#241005}
.refer-dot:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.refer-step p{max-height:0;overflow:hidden;margin:0;padding-left:44px;
  color:rgba(30,49,36,.90);font-size:15px;line-height:1.6;transition:max-height .3s ease,padding .3s ease}
.refer-step.on p{max-height:14em;padding-bottom:20px}

/* ── Project wall + before/after ──────────────────────────────── */
.pw-islands{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pw-islands button{background:rgba(255,252,246,0.60);color:var(--ink-d);border:0;border-radius:999px;
  padding:9px 18px;font:600 14px var(--body);cursor:pointer}
.pw-islands button.on{background:var(--sunset);color:#241005}
.pw-islands button:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.pw-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pw-card{transition:transform .25s ease}
.pw-card h3{font-size:16px;margin:16px 0 4px;color:var(--ink-d)}
.pw-card p{font-size:14px;color:rgba(30,49,36,.89);margin:0}
.pw-year{opacity:.65;margin-top:4px!important}
.ba{--split:50%;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/2}
/* One shape for every card, whatever the source orientation — 10th Ave's
   "before" is portrait and stretched its card to twice the height. */
.ba .media-slot{position:absolute;inset:0;margin:0;height:100%;aspect-ratio:auto!important;border-radius:0}
.ba .media-slot img{width:100%;height:100%;object-fit:cover}
.ba .ba-after{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 var(--split))}
/* padding/border reset: the global `input` rule gives every input a 22px pad
   and a border, which turned this track into a large white field. */
.ba-range{padding:0;border:0;position:absolute;left:0;right:0;bottom:12px;width:calc(100% - 24px);margin:0 12px;
  appearance:none;height:4px;border-radius:999px;background:rgba(255,252,246,0.92);cursor:ew-resize}
.ba-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(78,58,30,.2);cursor:ew-resize}
.ba-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}
.ba-range:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}

/* ── Honesty panel (seller) ───────────────────────────────────── */
.honesty{max-width:70ch;background:var(--sand);color:#1a1208;border-radius:18px;
  padding:clamp(26px,5vw,52px);margin-left:auto;margin-right:auto}
.honesty h2{font-size:clamp(21px,3.2vw,34px);line-height:1.15;margin:0 0 18px;color:#0f0a04}
.honesty p{font-size:17px;line-height:1.7;margin:0;color:#2a1d0c}

/* ── As-is vs listing ─────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.cmp-col{background:rgba(255,252,246,0.42);box-shadow:inset 0 0 0 1px rgba(30,49,36,.13);
  border-radius:14px;padding:28px}
.cmp-col h3{font-size:17px;margin:0 0 16px;color:var(--ink-d)}
.cmp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cmp-col li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:rgba(30,49,36,.92)}
.cmp-col li::before{position:absolute;left:0;top:0;font-weight:700}
.cmp-col li.good::before{content:"✓";color:#7fd1a8}
.cmp-col li.bad::before{content:"—";color:var(--accent-text)}
.cmp-note{margin-top:20px;font-size:15px;color:rgba(30,49,36,.87);max-width:60ch}

/* ── Situations ───────────────────────────────────────────────── */
.sit-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.sit{background:rgba(255,252,246,0.42);box-shadow:inset 0 0 0 1px rgba(30,49,36,.13);
  border-radius:14px;padding:26px;transition:transform .25s ease}
.sit h3{font-size:16px;margin:0 0 8px;color:var(--ink-d)}
.sit p{font-size:15px;line-height:1.6;color:rgba(30,49,36,.90);margin:0}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq{max-width:70ch}
.faq details{border-top:1px solid rgba(30,49,36,.16)}
.faq details:last-of-type{border-bottom:1px solid rgba(30,49,36,.16)}
.faq summary{cursor:pointer;padding:18px 0;font:600 16px var(--body);color:var(--ink-d);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:400;font-size:20px;line-height:1;color:var(--warm-ink)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.faq details p{margin:0 0 20px;padding-right:2em;font-size:15px;line-height:1.65;color:rgba(30,49,36,.91)}

/* ── Lender process timeline ──────────────────────────────────── */
.proc{list-style:none;margin:0;padding:0;max-width:72ch;counter-reset:p}
.proc-step{border-top:1px solid rgba(30,49,36,.16)}
.proc-step:last-child{border-bottom:1px solid rgba(30,49,36,.16)}
.proc-head{display:flex;align-items:center;gap:16px;width:100%;padding:20px 0;background:none;border:0;
  cursor:pointer;text-align:left;color:var(--ink-d)}
.proc-n{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:rgba(255,252,246,0.84);font:700 13px var(--body);transition:background .2s ease}
.proc-step.on .proc-n{background:var(--sand);color:#1a1208}
.proc-t{font:600 16px var(--body)}
.proc-head:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.proc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.proc-step.on .proc-body{max-height:18em}
.proc-body p{margin:0 0 22px;padding-left:50px;font-size:15px;line-height:1.65;color:rgba(30,49,36,.91)}

/* ── What to ask ──────────────────────────────────────────────── */
.ask{list-style:none;margin:0;padding:0;max-width:72ch;display:grid;gap:14px;counter-reset:a}
.ask li{counter-increment:a;position:relative;padding-left:40px;font-size:16px;line-height:1.6;
  color:rgba(30,49,36,.93)}
.ask li::before{content:counter(a);position:absolute;left:0;top:1px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:rgba(255,252,246,0.84);
  font:700 12px var(--body);color:var(--ink-d)}

/* ── Disclosure ───────────────────────────────────────────────── */
.disclosure{max-width:78ch;padding-bottom:clamp(48px,8vh,96px)}
.disclosure p{font-size:13px;line-height:1.7;color:rgba(30,49,36,.83);margin:0;
  border-top:1px solid rgba(30,49,36,.16);padding-top:24px}

/* ── Forms (forms.js) ─────────────────────────────────────────── */
.f-card{background:var(--glass);color:var(--ink-d);border-radius:16px;padding:clamp(22px,4vw,38px);max-width:560px;
  box-shadow:inset 0 0 0 1px var(--glass-line),0 18px 50px rgba(78,58,30,.18);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
.f-progress{height:4px;border-radius:999px;background:rgba(255,252,246,0.84);overflow:hidden;margin-bottom:14px}
.f-progress i{display:block;height:100%;background:var(--sunset);transition:width .3s ease}
.f-count{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(30,49,36,.83);margin:0 0 22px}
.f-count b{color:var(--accent-text)}
.f-step{display:none}
.f-step.on{display:grid;gap:18px}
.f-field{display:grid;gap:7px;border:0;padding:0;margin:0}
.f-field>span,.f-field legend{font:600 14px var(--body);color:var(--ink-d);padding:0}
.f-field input,.f-field select{width:100%;padding:14px 16px;border:1px solid var(--glass-line);border-radius:10px;
  font:400 16px var(--body);background:var(--glass-field);color:var(--ink-d)}
.f-field input::placeholder{color:rgba(30,49,36,.82)}
/* A native select's own dropdown is painted by the OS, so its options need a
   colour that is readable outside this card. */
.f-field select option{background:#0b2730;color:var(--ink-d)}
.f-field input:focus,.f-field select:focus{outline:2px solid var(--accent-text);outline-offset:1px;border-color:var(--sunset)}
.f-radios{display:grid;gap:10px}
.f-radio{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid var(--glass-line);
  border-radius:10px;cursor:pointer;font-size:16px;color:var(--ink-d);background:var(--glass-field)}
.f-radio:has(input:checked){border-color:var(--sunset);background:rgba(176,136,80,.16);font-weight:600}
.f-radio input{width:18px;height:18px;accent-color:var(--sunset);margin:0}
.f-rule{border:0;border-top:1px solid var(--glass-line);color:inherit;margin:22px 0}
.f-fine{font-size:13px;line-height:1.6;color:rgba(30,49,36,.83);margin:4px 0 0}
.f-err{min-height:1.2em;margin:14px 0 0;font-size:14px;font-weight:600;color:#ff9b91}
.f-err:empty{min-height:0;margin:0}
.f-nav{display:flex;gap:10px;margin-top:22px}
.f-done{background:var(--glass);color:var(--ink-d);border-radius:16px;padding:clamp(24px,4vw,40px);max-width:560px;
  box-shadow:inset 0 0 0 1px var(--glass-line),0 18px 50px rgba(78,58,30,.18);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
.f-done h3{font-size:22px;margin:0 0 10px}
.f-done p{font-size:16px;line-height:1.65;color:rgba(30,49,36,.87);margin:0}
.f-card .btn{margin-top:4px}
.offer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.offer-aside h2{font-size:18px;margin:0 0 18px;color:var(--ink-d)}
.offer-aside .steps{grid-template-columns:1fr}

/* ── Floating mobile CTA ──────────────────────────────────────── */
.float-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:none;
  text-align:center;padding:16px;border-radius:999px;background:var(--sunset);color:#241005;
  font:600 16px var(--body);text-decoration:none;box-shadow:0 6px 24px rgba(78,58,30,.16);
  opacity:0;transform:translateY(120%);transition:opacity .25s ease,transform .25s ease}
.float-cta.on{opacity:1;transform:none}
@media (max-width:760px){.float-cta{display:block}}

/* ── Halide hero photo comes from config, not CSS ─────────────── */

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:860px){
  .refer-grid,.offer-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hero{min-height:78svh}
  .step{padding:22px}
  .f-card{padding:20px}
  .f-nav{flex-direction:column-reverse}
  .f-nav .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .step,.sit,.pw-card{transition:none}
  .refer-step p,.proc-body,.f-progress i,.float-cta{transition:none}
}


/* An empty media slot on a dark section: same hatched placeholder, but keyed to
   the dark background so a missing photo doesn't read as a white panel and
   doesn't blow out the headline sitting on top of it. */
.silk-zone .media-slot.is-empty,.hero-bg .media-slot.is-empty,
.ah .media-slot.is-empty,.strip .media-slot.is-empty,.ways-media .media-slot.is-empty{
  background:repeating-linear-gradient(45deg,rgba(255,252,246,0.27) 0 10px,rgba(255,252,246,0.12) 10px 20px);
  border-color:rgba(30,49,36,.20);color:rgba(30,49,36,.83)}
.silk-zone .media-slot,.hero-bg .media-slot,
.ah .media-slot,.strip .media-slot,.ways-media .media-slot{background:rgba(255,252,246,0.24)}

/* In a full-bleed slot (hero, About hero) the placeholder's centred label lands
   right on top of the headline. Park it at the top of the frame instead, so the
   required size is still legible but the copy stays readable over it. */

/* The hero and the About hero sit outside .silk-zone, so they carry the backdrop
   themselves — otherwise the page opens on flat black and only picks up the
   gradient once you scroll past the fold, which reads as a loading bug. */
/* Heroes keep a warm tint on top of the shader. The opaque gradient that used
   to close this stack is gone — it would paint the shader out. */
.hero::before,.page-hero::before,.ah::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(176,136,80,.14), transparent 70%),
    linear-gradient(180deg, rgba(246,240,230,0.21), rgba(246,240,230,0.08) 50%, rgba(246,240,230,0.24))}
/* ── Hero artwork ─────────────────────────────────────────────
   The page heroes are 70svh and their copy fills the top third, which left a
   dead band under each headline.

   A hand-drawn SVG, not a photograph and not a stock illustration: it asserts
   no particular property, which matters most on the lender page, where a row
   of real finished houses is one caption away from reading as a track record.
   Low-pitch roof, deep eave, lanai post — the shape he actually builds.

   The vertical dissolve lives inside the SVG's own mask; the horizontal one is
   here. Two mask layers on one element need mask-composite, and the legacy
   -webkit- keyword set is not the standard one — doing both in one place
   blanked the whole drawing the first time. */
.page-hero{display:flex;flex-direction:column}
/* `.page-hero > *` later in this file sets position:relative at the SAME
   specificity, so a bare `.hero-art` lost and the drawing fell back into
   normal flow — visible on one page, pushed out of frame on the other.
   Scoped to beat it. */
.page-hero>.hero-art{
  position:absolute;right:calc(var(--gutter) * -0.5);bottom:clamp(8px,4vh,40px);
  z-index:0;pointer-events:none;
  width:min(92%,1180px);height:auto;opacity:.58;
  /* The fade does not start until 42%, which is where the copy column ends —
     the drawing crossed the lender page's sub-head at 20%. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 42%,#000 90%,transparent)}

@media (max-width:900px){
  /* Scoped to match the base rule — an unscoped `.hero-art` loses to
     `.page-hero > *`. `right` goes to 0 here: the negative offset that pulls
     the drawing past the gutter on desktop overflowed the page at 375px. */
  .page-hero>.hero-art{right:0;width:100%;opacity:.3;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 22%,#000 92%,transparent)}
}

.page-hero{position:relative}
.page-hero>*{position:relative;z-index:1}
/* The hero's own media sits above the gradient; the gradient shows through
   wherever the photo hasn't arrived yet. */
.hero-bg{z-index:0}

/* The hero's media slot is full-bleed, so its hatched "no file yet" fill covers
   the whole backdrop. Drop the hatch there and keep only the size note — the
   gradient is the hero until a video arrives, and that is a perfectly good
   state to be in rather than a sheet of diagonal lines. */
.hero-bg .media-slot.is-empty{background:none;border:0;align-content:end;justify-items:end;
  padding:0 clamp(16px,4vw,48px) 18px}
.hero-bg .media-slot-label{opacity:.32;font-size:.62rem;letter-spacing:.08em;text-align:right;
  text-transform:uppercase}
@media (max-width:600px){.hero-bg .media-slot-label{display:none}}

/* ══════════════════════════════════════════════════════════════
   Homepage: three ways in (replaces the phone-mockup tab rail)
   ══════════════════════════════════════════════════════════════ */
.ways-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:start}
.ways{list-style:none;margin:0;padding:0}
.way{border-top:1px solid rgba(30,49,36,.16)}
.way:last-child{border-bottom:1px solid rgba(30,49,36,.16)}
.way a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:20px;
  padding:26px 0;text-decoration:none;color:inherit}
.way-n{font:700 13px var(--body);letter-spacing:.14em;color:var(--warm-ink);opacity:.7}
.way-t{display:block;font:700 clamp(22px,2.6vw,34px)/1.1 var(--display);font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink-d);transition:color .2s ease}
.way-s{display:block;margin-top:8px;font-size:15px;line-height:1.6;color:rgba(30,49,36,.87);max-width:44ch}
.way-go{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:600 13px var(--body);color:var(--warm-ink);opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease,transform .25s ease}
.way-go i{font-style:normal}
.way:is(:hover,:focus-within) .way-t{color:var(--accent-text)}
.way:is(:hover,:focus-within) .way-go{opacity:1;transform:none}
.way a:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:6px}

/* The media panel is a progressive extra: it mirrors whichever row is active,
   and the rows are fully usable with it hidden or empty. */
.ways-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.ways-shot{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.ways-shot.on{opacity:1}
.ways-shot .media-slot{height:100%;aspect-ratio:auto!important;border-radius:16px}

/* ── Where he buys ────────────────────────────────────────────── */
.areas{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.areas li{border-top:2px solid var(--sand);padding-top:18px}
.areas h3{font:700 clamp(20px,2.4vw,30px)/1.1 var(--display);font-stretch:112%;text-transform:uppercase;
  margin:0 0 8px;color:var(--ink-d)}
.areas p{margin:0;font-size:15px;line-height:1.6;color:rgba(30,49,36,.87)}

/* ══════════════════════════════════════════════════════════════
   About: editorial hero + contact strip
   ══════════════════════════════════════════════════════════════ */
.ah{position:relative;padding-top:clamp(130px,18vh,210px);color:var(--ink-d)}
.ah>*{position:relative;z-index:1}
.ah-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 22px;
  font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--warm-ink)}
.ah-meta span{position:relative}
.ah-meta span+span::before{content:"";position:absolute;left:-14px;top:.45em;width:5px;height:5px;
  border-radius:50%;background:currentColor;opacity:.5}
.ah-inner{container-type:inline-size}
.ah-title{font-size:clamp(38px,7.4vw,104px);line-height:.9;letter-spacing:-.03em;margin:0 0 26px;color:var(--ink-d)}
@supports (font-size:1cqi){
  .ah-title{font-size:clamp(38px,18cqi,112px)}
}
.ah-intro{max-width:34ch;font-size:clamp(16px,1.9vw,22px);line-height:1.5;color:rgba(30,49,36,.92);
  margin:0}
.ah-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(40px,7vh,80px)}
.ah-media{display:block}
.ah-band{aspect-ratio:1/1!important;border-radius:18px;
  box-shadow:0 30px 70px rgba(78,58,30,.22)}
.ah-media{max-width:min(400px,100%);margin-left:auto}
/* A warm edge light along the portrait, so it belongs to the backdrop rather
   than sitting on it as a cut-out. */
.ah-media{position:relative}
.ah-media::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.09),inset 0 -70px 70px -56px rgba(176,136,80,.35)}
@media (max-width:860px){
  .ah-grid{grid-template-columns:1fr;align-items:start}
  .ah-media{max-width:320px;margin-left:0}
}

.strip-sec{color:var(--ink-d);padding:clamp(48px,9vh,96px) 0}
.strip-head{margin-bottom:28px}
.strip-head h2{font-size:clamp(28px,4vw,48px);margin:0 0 10px}
.strip-head .sub{color:rgba(30,49,36,.86);max-width:52ch}
/* Sideways scroll. overflow-x on its own is a keyboard trap for sighted
   keyboard users, so the container is focusable and announced as a region. */
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px clamp(16px,4vw,48px) 18px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent}
.strip:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:rgba(255,252,246,0.92);border-radius:999px}
.strip-item{flex:0 0 clamp(200px,24vw,300px);margin:0;scroll-snap-align:start}
.strip-item.tall{align-self:stretch}
.strip-item .media-slot{height:100%;border-radius:12px}
.strip-foot{margin-top:28px;text-align:center}

/* ══════════════════════════════════════════════════════════════
   About: story. The grid lines, corner marks, floating dots, mouse glow
   and click ripple the template shipped are gone — only the word reveal
   and the chapter list remain.
   ══════════════════════════════════════════════════════════════ */
.jstory{position:relative;padding:clamp(64px,12vh,130px) 0}
.jstory-hero{padding:0 clamp(16px,4vw,48px) clamp(40px,7vh,80px)}
.jstory-inner{max-width:1200px;margin:0 auto}
.jstory-tag{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.jstory-tag p{margin:0;font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm-ink)}
.jstory-rule{flex:1;height:1px;background:rgba(255,252,246,0.92)}
.jstory-title{margin:0}
.jstory-main{display:block;font:700 clamp(32px,6vw,76px)/1 var(--display);font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--ink-d);margin-bottom:20px}
.jstory-sub{display:block;font:400 clamp(15px,1.8vw,20px)/1.55 var(--body);max-width:52ch;
  color:rgba(30,49,36,.89);text-transform:none;letter-spacing:0}
.word{display:inline-block;opacity:0;margin-right:.26em}
@keyframes js-word{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.jstory-chapters{list-style:none;margin:0 auto;padding:0 var(--gutter);display:grid;gap:2px;
  max-width:var(--wrap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.jstory-chapters li{padding:28px;background:rgba(255,252,246,0.30);
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.09);border-radius:14px;
  opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.jstory-chapters li.in{opacity:1;transform:none}
.jstory-year{display:block;font:700 12px var(--body);letter-spacing:.16em;color:var(--warm-ink);
  margin-bottom:12px}
.jstory-chapters h3{font-size:18px;margin:0 0 10px;color:var(--ink-d)}
.jstory-chapters p{font-size:15px;line-height:1.65;color:rgba(30,49,36,.89);margin:0}
.jstory-cta{max-width:var(--wrap);margin:40px auto 0;padding:0 var(--gutter);text-align:center}

@media (max-width:860px){
  .ways-grid{grid-template-columns:1fr}
  .ways-media{display:none}
  .way a{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .way-go{grid-column:2;opacity:1;transform:none;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .ways-shot,.way-t,.way-go,.jstory-chapters li{transition:none}
  .word{opacity:1;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════
   Hero — Variable Font Hover (21st.dev @cnippet-dev, m-variable-font-hover-2)
   ══════════════════════════════════════════════════════════════ */

.hero-inner{position:relative;z-index:1;display:grid;justify-items:start;
  padding-bottom:clamp(48px,8vh,96px);color:var(--on-dark);max-width:1200px}
.hero-inner>*{animation:hero-rise .8s cubic-bezier(.16,1,.3,1) both}
.hero-eyebrow{animation-delay:.05s}
.hero-h{animation-delay:.14s}
.hero-sub{animation-delay:.24s}
.hero-honest{animation-delay:.32s}
.hero-ctas{animation-delay:.4s}
.hero-cue{animation-delay:.55s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 20px;
  font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(30,49,36,.87)}
.hero-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sunset);
  animation:hero-pulse 2.6s ease-out infinite}
@keyframes hero-pulse{0%{box-shadow:0 0 0 0 rgba(176,136,80,.55)}
  70%{box-shadow:0 0 0 11px rgba(176,136,80,0)}100%{box-shadow:0 0 0 0 rgba(176,136,80,0)}}

.hero-h{font-size:clamp(40px,7.6vw,104px);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 26px;color:var(--ink-d);cursor:default}
.hero-l1,.hero-l2{display:block}
.hero-l2{color:var(--accent-text);transition:color .5s ease}
.hero-h:hover .hero-l2,.hero-h:focus-within .hero-l2{color:var(--accent-text)}

/* Each letter is its own span transitioning font-variation-settings; the
   per-letter transition-delay written inline by render.js is the stagger.
   Keeping it in CSS means no rAF loop, and reduced motion is a single rule. */
.vfh{display:inline-block}
.vfh-w{display:inline-block;white-space:nowrap}
.vfh-w>span{display:inline-block;padding-bottom:.08em;
  font-variation-settings:var(--vfh-from);
  transition:font-variation-settings .5s cubic-bezier(.34,1.56,.64,1)}
.hero-h:hover .vfh-w>span,.hero-h:focus-within .vfh-w>span{font-variation-settings:var(--vfh-to)}

.hero-sub{font-size:clamp(16px,1.8vw,20px);line-height:1.55;max-width:48ch;
  color:rgba(30,49,36,.95);margin:0 0 18px}
.hero-honest{position:relative;max-width:46ch;margin:0 0 32px;padding-left:16px;
  font-size:clamp(14px,1.5vw,17px);line-height:1.6;color:rgba(30,49,36,.86)}
.hero-honest::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;
  background:var(--sand);border-radius:2px}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.hero-cue{display:inline-flex;align-items:center;gap:10px;margin-top:38px;text-decoration:none;
  font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(30,49,36,.82)}
.hero-cue:hover{color:var(--ink-d)}
.hero-cue i{width:1px;height:26px;background:linear-gradient(to bottom,rgba(255,252,246,0.92),transparent);
  animation:hero-cue-flow 2s ease-in-out infinite}
@keyframes hero-cue-flow{0%,100%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}}

@media (max-width:600px){
  .hero-h{font-size:clamp(32px,8.4vw,52px)}
  .hero-sub{font-size:17px;max-width:36ch}
  .hero-cue{margin-top:26px}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1 1 150px}
}
@media (prefers-reduced-motion:reduce){
  .hero-inner>*{animation:none}
  .hero-eyebrow i,.hero-cue i{animation:none}
  .vfh-w>span,.hero-l2{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   Buttons — Pearl Button, dark shell.

A burnt-sunset pearl: the shell is the sunset family taken down into
   its dark register, so it sits into the backdrop instead of punching a
   pale hole in it. Three sheens move across it — a sunset bloom top left,
   a deeper sunset-deep bloom bottom right, and a vertical gloss — and a
   lustre band sweeps over on hover.

   No black and no grey anywhere: the body runs #3a5a3f to #1e3124, the rim
   and the glow are sunset. The label is WHITE, not --sunset-glow: on a
   shell that is itself a sunset tone the glow only reaches 3.3:1, while
   white holds 6.0:1 at the LIGHTEST point of the composited shell — the
   worst case — and 17.3:1 at the shaded edge.
   ══════════════════════════════════════════════════════════════ */

.btn{
  --pearl-1:#3a5a3f;          /* lit face of the shell */
  --pearl-2:#1e3124;          /* shaded edge */
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 30px;border-radius:999px;cursor:pointer;text-decoration:none;
  overflow:hidden;isolation:isolate;
  font:600 .95rem/1.2 var(--body);letter-spacing:.01em;
  color:#fff;
  border:1px solid rgba(176,136,80,.45);
  background:
    radial-gradient(120% 140% at 18% 6%, rgba(176,136,80,.30), transparent 58%),
    radial-gradient(130% 150% at 88% 96%, rgba(138,101,53,.30), transparent 60%),
    linear-gradient(168deg, var(--pearl-1) 0%, #2c4632 46%, var(--pearl-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(217,191,147,.34),
    inset 0 -1px 0 rgba(110,81,40,.5),
    0 1px 2px rgba(15,26,19,.5),
    0 8px 22px -10px rgba(176,136,80,.55);
  transition:box-shadow .25s ease,border-color .25s ease,color .25s ease,transform .12s ease;
}

/* Vertical gloss: a warm highlight across the top, gone by the waist. */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(217,191,147,.14) 0%, rgba(217,191,147,.05) 40%, transparent 64%)}

/* Lustre band. Parked off the left edge, swept across on hover. */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(217,191,147,.3), rgba(255,252,246,0.92), transparent);
  transition:left .65s cubic-bezier(.22,.61,.36,1)}
.btn:is(:hover,:focus-visible)::after{left:115%}

.btn:hover{
  color:#fff;
  border-color:rgba(217,191,147,.8);
  box-shadow:
    inset 0 1px 0 rgba(217,191,147,.45),
    inset 0 -1px 0 rgba(138,101,53,.4),
    0 2px 4px rgba(15,26,19,.55),
    0 12px 30px -12px rgba(176,136,80,.85);
}

.btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn[hidden]{display:none}

/* Secondary weight: the shell drops away and leaves its rim, so the pair
   reads as one family. */
.btn.ghost{
  color:var(--ink-d);border-color:rgba(176,136,80,.34);
  background:
    radial-gradient(130% 150% at 88% 96%, rgba(176,136,80,.14), transparent 62%),
    linear-gradient(168deg, rgba(255,252,246,0.48), rgba(255,252,246,0.12));
  box-shadow:inset 0 1px 0 rgba(30,49,36,.16), 0 6px 18px -12px rgba(176,136,80,.35);
}
.btn.ghost::before{background:linear-gradient(180deg, rgba(255,252,246,0.92) 0%, transparent 56%)}
.btn.ghost:hover{color:var(--ink-d);border-color:rgba(176,136,80,.62);
  box-shadow:inset 0 1px 0 rgba(30,49,36,.23), 0 10px 26px -12px rgba(176,136,80,.55)}

.btn.sm{padding:9px 20px;font-size:.84rem}

/* On a light surface the shell keeps its own dark body, so the label
   stays legible without an override. */

@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after{transition:none}
  .btn:is(:hover,:focus-visible)::after{left:-60%}
  .btn:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   The first deal — the About page's centre of gravity.

   Narrower measure than the rest of the page (60ch) because it is the one
   block anyone actually reads end to end. Sunset rule down the left rather
   than a card: a box would make it look like a testimonial, and it is not
   one — it is him describing what he did.
   ══════════════════════════════════════════════════════════════ */
.tp{position:relative;padding:clamp(56px,10vh,110px) 0}
.tp-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.tp-eyebrow{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 14px}
.tp-head{font-size:clamp(26px,3.6vw,46px);color:var(--ink-d);margin:0 0 26px;max-width:18ch}
.tp-body{position:relative;max-width:60ch;padding-left:22px;
  border-left:2px solid rgba(176,136,80,.45)}
.tp-body p{color:rgba(30,49,36,.92);margin:0 0 16px;line-height:1.75}
.tp-body p:last-child{margin-bottom:0}
.tp-pull{max-width:46ch;margin:30px 0 0;padding-left:24px;
  font-family:var(--display);font-stretch:112%;font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,2.1vw,25px);line-height:1.25;color:var(--accent-text)}
@media (max-width:640px){
  .tp-body{padding-left:16px}
  .tp-pull{padding-left:18px}
}

/* ── Header: page indicator ───────────────────────────────────
   The nav doubles as the page indicator: the current page is marked, and a
   pill slides to whichever item the pointer or keyboard is on, returning to
   the current page on leave. The pill is decorative — `aria-current` on the
   link is what actually carries the state. */
.nav{position:relative;align-items:center}
.nav a{position:relative;z-index:1;padding:7px 14px;border-radius:999px;border-bottom:0;
  color:rgba(30,49,36,.87);transition:color .2s ease}
.nav a:hover,.nav a:focus-visible{color:var(--ink-d);border-color:transparent}
.nav a.on{color:var(--ink-d);font-weight:600}
.nav a:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.nav-pill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;z-index:0;
  border-radius:999px;background:rgba(255,252,246,0.72);
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.16);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.34,1.3,.64,1),width .32s cubic-bezier(.34,1.3,.64,1),opacity .2s ease}
/* A sunset tick under the current page, so the state survives the pill moving
   away on hover — and survives it not rendering at all. */
.nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;
  border-radius:2px;background:var(--sunset)}
.site-header.solid .nav a{color:var(--muted)}
.site-header.solid .nav a.on,.site-header.solid .nav a:hover{color:var(--ink)}
.site-header.solid .nav-pill{background:rgba(10,61,46,.07);box-shadow:inset 0 0 0 1px var(--line)}
@media (prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s ease}}

/* Portrait in the homepage bio strip: same rounded frame and warm edge light
   as the About column, so the two readings of the same photograph match. */
.bio-portrait{border-radius:18px;box-shadow:0 24px 60px rgba(78,58,30,.2);aspect-ratio:1/1!important}
.split .stack{position:relative}
.split .stack::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(30,49,36,.09),inset 0 -70px 70px -56px rgba(176,136,80,.35)}
@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .split .stack{max-width:300px}
}

/* ── Quick rail, bottom-left ──────────────────────────────────
   The header is absolute and scrolls away on these long pages, so this keeps
   the mark and a route out within reach. It is not a copy of the top nav — it
   adds what the nav has no room for (questions, contact, Instagram).

   Hidden under 760px: the hamburger already covers navigation there, and the
   floating "Get a Cash Offer" bar owns the bottom of the screen. */
.quick{position:fixed;left:8px;bottom:14px;z-index:60;display:flex;flex-direction:column-reverse;
  align-items:flex-start;gap:9px;
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s}
.quick.in{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.quick-bar{display:flex;align-items:stretch;border-radius:999px;overflow:hidden;
  border:1px solid rgba(176,136,80,.3);
  background:linear-gradient(180deg,rgba(176,136,80,.14),rgba(176,136,80,.05));
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 10px 26px rgba(78,58,30,.2);transition:border-color .2s ease,transform .2s ease}
.quick-bar:hover{border-color:rgba(176,136,80,.6);transform:translateY(-1px)}
.quick-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;background:none;
  padding:9px 11px 9px 9px;color:var(--ink-d);font:600 11px var(--body);
  letter-spacing:.07em;text-transform:uppercase}
.quick-toggle:focus-visible,.quick-pin:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.quick-toggle .logo-mark{--logo-accent:var(--sunset)}
.quick-label{white-space:nowrap}
/* Pinned destination — Instagram. Its own button so it is one click, and the
   glyph carries it without needing a label. */
.quick-pin{display:grid;place-items:center;width:34px;text-decoration:none;color:rgba(30,49,36,.91);
  border-left:1px solid rgba(176,136,80,.26);transition:background .18s ease,color .18s ease}
.quick-pin:hover{background:rgba(176,136,80,.18);color:var(--ink-d)}
.quick-pin svg{width:15px;height:15px;fill:currentColor}
.quick-bars{display:grid;gap:3px}
.quick-bars i{display:block;width:12px;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .25s ease}
.quick.open .quick-bars i:first-child{transform:translateY(4.5px) rotate(45deg)}
.quick.open .quick-bars i:nth-child(2){opacity:0}
.quick.open .quick-bars i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.quick-list{list-style:none;margin:0;padding:7px;display:grid;gap:2px;min-width:178px;
  border-radius:16px;border:1px solid rgba(30,49,36,.13);
  background:rgba(8,20,25,.78);backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 18px 44px rgba(78,58,30,.24);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transform-origin:bottom left;
  transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.3,.64,1),visibility .22s}
.quick.open .quick-list{opacity:1;visibility:visible;transform:none}
.quick-list a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;
  text-decoration:none;color:rgba(30,49,36,.90);font:500 14px var(--body);
  transition:background .18s ease,color .18s ease}
.quick-list a:hover{background:rgba(176,136,80,.14);color:var(--ink-d)}
.quick-list a:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.quick-list a.on{color:var(--ink-d);font-weight:600}
.quick-list a.on::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--sunset);
  margin-left:auto}
.quick-ico{width:16px;height:16px;fill:currentColor;flex:0 0 auto;opacity:.85}
.quick-list a:hover .quick-ico{opacity:1}

@media (max-width:760px){.quick{display:none}}
@media (prefers-reduced-motion:reduce){
  .quick,.quick-list{transition:opacity .15s ease,visibility .15s}
  .quick-toggle,.quick-bars i{transition:none}
}

/* ── Work page ─────────────────────────────────────────────── */
.wk-index{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.wk-index a{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border-radius:999px;
  color:var(--ink-d);text-decoration:none;font:600 14px var(--body);
  background:rgba(255,252,246,0.30);box-shadow:inset 0 0 0 1px rgba(176,136,80,.28);
  transition:box-shadow .2s ease,background .2s ease}
.wk-index a:hover,.wk-index a:focus-visible{background:rgba(176,136,80,.1);box-shadow:inset 0 0 0 1px rgba(176,136,80,.6)}
.wk-index span{color:var(--accent-text);font-size:12px;letter-spacing:.12em}
.wk-index small{color:rgba(30,49,36,.82);font-weight:500;font-size:12px}
.wk-proj{padding:clamp(40px,7vh,72px) 0;border-top:1px solid rgba(30,49,36,.09);scroll-margin-top:90px}
.wk-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px}
.wk-num{font:700 13px var(--body);letter-spacing:.16em;color:var(--accent-text);padding-top:10px}
.wk-head h2{font-size:clamp(28px,4vw,48px);margin:0;color:var(--ink-d)}
.wk-island{margin:6px 0 0;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--warm-ink)}
.wk-body{max-width:62ch;color:rgba(30,49,36,.91);margin:0 0 20px;line-height:1.7}
.wk-facts{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0 0 26px}
.wk-facts dt{font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(30,49,36,.82)}
.wk-facts dd{margin:4px 0 0;font-size:14px;color:var(--ink-d)}
.wk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wk-frame{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:rgba(255,252,246,0.24)}
.wk-frame.wk-lead{grid-column:span 2;grid-row:span 2}
.wk-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wk-frame:hover img{transform:scale(1.03)}
.wk-note{margin:24px 0 0;font-size:13px;color:rgba(30,49,36,.82)}
@media (max-width:760px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.wk-frame img{transition:none}.wk-frame:hover img{transform:none}}

/* ── Buy page ──────────────────────────────────────────────── */
.agent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center}
.agent-photo .media-slot{border-radius:16px;aspect-ratio:4/5}
.agent-copy h2{font-size:clamp(28px,4vw,46px);margin:6px 0 8px;color:var(--ink-d)}
.agent-meta{margin:0 0 18px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--warm-ink)}
.agent-bio{max-width:56ch;color:rgba(30,49,36,.91);line-height:1.7}
.agent-lic{font-size:13px;color:rgba(30,49,36,.82)}
.bw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bw-card{padding:26px;border-radius:14px;background:rgba(255,252,246,0.30);box-shadow:inset 0 0 0 1px rgba(30,49,36,.09)}
.bw-card span{font:700 12px var(--body);letter-spacing:.16em;color:var(--accent-text)}
.bw-card h3{font-size:18px;margin:10px 0 8px;color:var(--ink-d)}
.bw-card p{margin:0;font-size:15px;line-height:1.65;color:rgba(30,49,36,.89)}
.bu-form{max-width:620px;margin:0 auto}
@media (max-width:860px){.agent,.bw{grid-template-columns:minmax(0,1fr)}}

/* ── About: mentorships ────────────────────────────────────── */
.ln{padding:clamp(56px,10vh,110px) 0}
.ln-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.ln-body{max-width:52ch;line-height:1.75;margin:0 0 24px}
.ln-programs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ln-programs li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px;
  border-radius:12px;background:rgba(255,252,246,.6);box-shadow:inset 0 0 0 1px rgba(30,49,36,.12)}
.ln-programs b{font:700 16px var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-d)}
.ln-programs span{font-size:14px;color:var(--warm-ink)}
.ln-photos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(70px,9vw,120px);gap:10px}
.ln-ph{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 14px 32px rgba(78,58,30,.18)}
.ln-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ln-ph-0{grid-column:1 / 4;grid-row:1 / 4}
.ln-ph-1{grid-column:4 / 7;grid-row:1 / 3}
.ln-ph-2{grid-column:4 / 6;grid-row:3 / 5}
.ln-ph-3{grid-column:6 / 7;grid-row:3 / 5}
.ln-ph-0 img{object-position:50% 30%}
/* Skyler stands on the left of this frame; centred, the narrow crop lost him. */
.ln-ph-3 img{object-position:14% 35%}
.ln-ph-2 img{object-position:70% 50%}
@media (max-width:860px){
  .ln-inner{grid-template-columns:minmax(0,1fr)}
  .ln-photos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .ln-ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5}
  .ln-ph-1{grid-column:1 / 3!important;aspect-ratio:4/3}
}

/* ── About gallery: Layout Grid ─────────────────────────────── */
.lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(200px,24vw,320px);gap:14px}
.lg-wide{grid-column:span 2}
.lg-card{position:relative;padding:0;border:0;margin:0;cursor:zoom-in;overflow:hidden;border-radius:14px;
  background:rgba(255,252,246,.5);box-shadow:0 14px 34px rgba(78,58,30,.16);
  transition:transform .3s ease,box-shadow .3s ease,opacity .2s ease}
.lg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .6s ease}
.lg-card:hover img,.lg-card:focus-visible img{transform:scale(1.04)}
.lg-card:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.lg-card.lg-hidden{opacity:0}
.lg-shade{position:fixed;inset:0;z-index:80;background:rgba(30,49,36,.42);opacity:0;pointer-events:none;
  transition:opacity .3s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lg-shade.on{opacity:1;pointer-events:auto}
.lg-panel{position:fixed;z-index:90;left:50%;top:50%;width:min(88vw,1000px);height:min(78vh,680px);
  margin-left:calc(min(88vw,1000px) / -2);margin-top:calc(min(78vh,680px) / -2);
  border-radius:16px;overflow:hidden;cursor:zoom-out;transform-origin:0 0;
  box-shadow:0 40px 90px rgba(30,49,36,.38);background:#1e3124}
.lg-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,32,24,.82),rgba(20,32,24,.15) 45%,transparent 70%)}
.lg-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(20px,3vw,36px);color:#fff;
  animation:lg-up .35s .12s ease both}
.lg-title{margin:0 0 6px;font:700 clamp(22px,3vw,36px)/1.1 var(--display);font-stretch:112%;text-transform:uppercase;color:#fff}
.lg-body{margin:0;max-width:56ch;font-size:16px;color:rgba(255,255,255,.88)}
.lg-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,252,246,.88);color:#1e3124;font:600 22px/1 var(--body);cursor:pointer}
.lg-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes lg-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .lg{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,44vw,240px)}
  .lg-wide{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){.lg-card,.lg-card img,.lg-shade{transition:none}.lg-cap{animation:none}}

/* ── Scroll-scrubbed hero ─────────────────────────────────────────
   The section is tall; .hero-pin sticks for the length of it while the
   canvas scrubs img/hero-film. --p (0→1) is set by hero-scrub.js.
   overflow:clip, not hidden — hidden would break position:sticky. */
.hero.hero-scrub{display:block;min-height:0;height:260svh;padding-top:0;overflow:clip;--p:0}
.hero-scrub .hero-pin{position:sticky;top:0;height:100svh;display:grid;align-items:end;overflow:hidden;
  padding-top:clamp(112px,14vh,140px)}
.hero-scrub .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Scrim and copy hand the frame to the kitchen as the sweep begins. */
.hero-scrub .hero-bg::after{opacity:calc(1 - min(var(--p) * 4, 1) * .85)}
.hero-scrub .hero-inner{opacity:calc(1 - min(var(--p) * 4, 1));
  transform:translate3d(0,calc(var(--p) * -60px),0)}
.hero-scrub .hero-inner>*{animation:none}
.hero-concept{position:absolute;right:clamp(16px,4vw,48px);justify-content:flex-end;bottom:clamp(16px,4vh,32px);z-index:2;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:calc(100% - 32px);
  font:500 12px/1.4 var(--body);color:var(--ink-d);opacity:min(calc(var(--p) * 5 - .5), 1)}
.hero-concept span{font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:rgba(255,252,246,.88);box-shadow:inset 0 0 0 1px rgba(30,49,36,.14)}
.hero-concept .hc-after{display:none}
.hero-scrub.is-after .hc-before{display:none}
.hero-scrub.is-after .hc-after{display:inline-block;background:var(--forest,#2f4a34);color:#fff}
.hero-concept em{font-style:normal;padding:6px 12px;border-radius:999px;background:rgba(255,252,246,.78)}
@media (prefers-reduced-motion:reduce){
  .hero.hero-scrub{height:auto}
  .hero-scrub .hero-pin{position:relative;min-height:88svh;height:auto}
  .hero-scrub .hero-inner{opacity:1;transform:none}
  .hero-concept{opacity:1}
}

/* ── Pearl everywhere ─────────────────────────────────────────────
   Every button on the site wears the forest pearl: the ghost variant,
   the floating mobile CTA and the island toggle's active state. */
.btn.ghost,.btn.ghost:hover{color:#fff;border-color:rgba(176,136,80,.45);
  background:
    radial-gradient(120% 140% at 18% 6%, rgba(176,136,80,.30), transparent 58%),
    radial-gradient(130% 150% at 88% 96%, rgba(138,101,53,.30), transparent 60%),
    linear-gradient(168deg, #3a5a3f 0%, #2c4632 46%, #1e3124 100%);
  box-shadow:inset 0 1px 0 rgba(217,191,147,.34),inset 0 -1px 0 rgba(110,81,40,.5),
    0 1px 2px rgba(15,26,19,.5),0 8px 22px -10px rgba(176,136,80,.55)}
.btn.ghost::before{background:linear-gradient(180deg, rgba(217,191,147,.14) 0%, rgba(217,191,147,.05) 40%, transparent 64%)}
.btn.float-cta{position:fixed;display:none;padding:16px;font-size:16px;color:#fff;transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease}
@media (max-width:760px){.btn.float-cta{display:flex}}
.pw-islands button.on{color:#fff;border:1px solid rgba(176,136,80,.45);
  background:radial-gradient(120% 140% at 18% 6%, rgba(176,136,80,.30), transparent 58%),
    linear-gradient(168deg, #3a5a3f 0%, #2c4632 46%, #1e3124 100%);
  box-shadow:inset 0 1px 0 rgba(217,191,147,.34),0 6px 16px -10px rgba(176,136,80,.55)}
/* Hidden float CTA is out of the tab order and the hit area, not just faded. */
.btn.float-cta:not(.on){visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}

/* ── Home: mentorship photos, full frame (no cropping) ─────────── */
.mentors-sec .ln-programs{margin-top:14px}
.mt-photos{display:grid;gap:clamp(12px,2vw,20px);margin-top:28px}
.mt-ph{margin:0;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(30,49,36,.12)}
.mt-ph img{display:block;width:100%;height:auto}
@media (min-width:760px){.mt-photos{display:block;columns:2;column-gap:20px}.mt-ph{break-inside:avoid;margin-bottom:20px}}
.btn{white-space:nowrap}

/* ── Video backdrop (all pages) ───────────────────────────────────
   The lot loop sits under a light cream gradient: heavy enough that body
   ink stays well above AA everywhere, light enough the machines still read. */
.video-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-bg .shader-scrim{background:
  linear-gradient(180deg, rgba(246,240,230,0.80) 0%, rgba(246,240,230,0.66) 45%, rgba(246,240,230,0.84) 100%),
  radial-gradient(120% 90% at 50% 0%, transparent 30%, rgba(246,240,230,0.25) 100%)}
.site-header .btn{flex-shrink:0}