:root{
    --bg:#0C0B09;
    --bg-alt:#121110;
    --panel:#1A1815;
    --panel-2:#242019;
    --gold:#C9A45C;
    --gold-bright:#E8C77E;
    --gold-dim:rgba(201,164,92,0.16);
    --cream:#F3EEE2;
    --muted:#A79E8E;
    /* Was #7A7266, which measured 3.73:1 on the panel colour and 4.15:1 on the
       page background. Everything wearing it is small: review attributions,
       the footer copyright, form micro copy, filter labels, the wordmark's
       second line. Small text needs 4.5:1, so this is two steps lighter on the
       same hue and clears it on all three dark surfaces. */
    --muted-dim:#8A8175;
    --line:rgba(243,238,226,0.09);
    --line-strong:rgba(243,238,226,0.18);
    --gold-line:rgba(201,164,92,0.35);
    --maxw:1280px;
    
    
    
    
    --ease:cubic-bezier(.22,.68,0,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--cream);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  input{font-family:inherit;}

  h1,h2,h3,h4,.display{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.04;
    color:var(--cream);
  }

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  .eyebrow{
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
  }

  /* ---------- GRAIN OVERLAY ---------- */
  .grain{
    position:fixed; inset:0; z-index:999; pointer-events:none;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{
    opacity:0; transform:translateY(26px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.08s; }
  .reveal-delay-2{ transition-delay:.16s; }
  .reveal-delay-3{ transition-delay:.24s; }
  .reveal-delay-4{ transition-delay:.32s; }
  .reveal-delay-5{ transition-delay:.4s; }

  /* ---------- BUTTONS ---------- */
  .btn{
    /* Centred, not the flex default of flex-start. A pill button is normally
       shrink to fit, so this shows up only where one is stretched full width
       inside a .field-group, and there the label was sitting off to the left. */
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 28px;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.02em;
    border-radius:100px;
    transition:transform .3s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
    white-space:nowrap;
  }
  .btn-gold{
    background:var(--gold);
    color:#161310;
  }
  .btn-gold:hover{ background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(201,164,92,0.55); }
  .btn-outline{
    background:transparent;
    color:var(--cream);
    border:1px solid var(--line-strong);
  }
  .btn-outline:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
  .btn-text{
    font-size:0.85rem; font-weight:600;
    position:relative; padding-bottom:2px;
  }
  .btn-text::after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(1); transform-origin:left;
  }
  .btn-icon{
    width:46px; height:46px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    transition:all .3s var(--ease);
  }
  .btn-icon:hover{ border-color:var(--gold); background:var(--gold-dim); }
  .btn-icon svg{ width:17px; height:17px; stroke:var(--cream); transition:stroke .3s ease; }
  .btn-icon:hover svg{ stroke:var(--gold-bright); }
  .btn-icon:disabled{ opacity:0.3; pointer-events:none; }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:rgba(12,11,9,0.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    transition:border-color .3s ease, background .3s ease;
  }
  header.site-nav.scrolled{ background:rgba(12,11,9,0.97); border-bottom-color:var(--line-strong); }
  header.site-nav.scrolled .nav-inner{ padding-top:12px; padding-bottom:12px; }
  .nav-inner{ transition:padding .35s var(--ease); }

  /* ---------- STICKY MOBILE CTA ---------- */
  .mobile-cta{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:110;
    background:rgba(12,11,9,0.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--line-strong);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .mobile-cta .btn{ flex:1; justify-content:center; padding:13px 10px; font-size:0.8rem; }
  @media (max-width:768px){
    .mobile-cta{ display:flex; }
    footer{ padding-bottom:110px; }
  }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:760px; margin:0 auto; }

  /* ---------- FORM SUCCESS ---------- */
  .form-success{
    display:none; align-items:center; gap:10px;
    font-size:0.88rem; color:var(--gold-bright); margin-top:14px;
  }
  .form-success svg{ width:16px; height:16px; stroke:var(--gold-bright); flex-shrink:0; }
  .form-success.show{ display:flex; }

  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:18px 40px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{ display:flex; flex-direction:column; line-height:1; }
  .logo .word{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700; font-size:1.3rem; color:var(--cream);
    letter-spacing:-0.01em;
  }
  .logo .word span{ color:var(--gold); }
  .logo .sub{
    font-size:0.56rem; font-weight:600; letter-spacing:0.26em;
    color:var(--muted-dim); margin-top:4px; text-transform:uppercase;
  }
  nav.primary-links{ display:flex; gap:34px; }
  nav.primary-links a{
    font-size:0.85rem; font-weight:500; color:var(--cream);
    opacity:0.78; transition:opacity .2s ease, color .2s ease;
    position:relative; padding-bottom:4px;
  }
  nav.primary-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold); transition:width .3s var(--ease);
  }
  nav.primary-links a:hover{ opacity:1; }
  nav.primary-links a:hover::after{ width:100%; }
  .nav-right{ display:flex; align-items:center; gap:22px; }
  .nav-phone{
    display:flex; align-items:center; gap:8px;
    font-size:0.85rem; font-weight:600; color:var(--cream);
  }
  .nav-phone svg{ width:15px; height:15px; stroke:var(--gold); }
  .nav-toggle{ display:none; width:26px; height:20px; position:relative; }
  .nav-toggle span{
    position:absolute; left:0; width:100%; height:2px; background:var(--cream);
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:9px; }
  .nav-toggle span:nth-child(3){ top:18px; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(201,164,92,0.10) 0%, transparent 45%),
      radial-gradient(ellipse at 80% 70%, rgba(201,164,92,0.08) 0%, transparent 45%),
      linear-gradient(180deg, #141210 0%, #0C0B09 100%);
    overflow:hidden;
    padding:120px 24px 80px;
  }
  .hero-photo-zone{
    position:absolute; inset:0;
    background-image:var(--hero-photo);
    background-position:center top; background-size:cover;
    -webkit-mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 94%);
    mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 94%);
  }
  .hero-photo-zone::before{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(12,11,9,0.5) 0%, rgba(12,11,9,0.22) 38%, rgba(12,11,9,0.55) 100%),
      radial-gradient(ellipse 55% 62% at 50% 40%, rgba(12,11,9,0.48) 0%, rgba(12,11,9,0.05) 65%);
  }
  .hero-content{ position:relative; z-index:2; max-width:820px; width:100%; }
  .hero .eyebrow{ display:inline-block; margin-bottom:22px; }
  .hero-word{
    font-size:clamp(3rem, 10vw, 7.6rem);
    font-weight:700;
    letter-spacing:-0.03em;
    line-height:1;
  }
  .hero-word .hw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.08em; margin-bottom:-0.08em; }
  .hero-word .hw > span{
    display:inline-block;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--gold-bright) 130%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    transform:translateY(112%);
    animation:riseUp 1s var(--ease) forwards;
  }
  .hero-word .hw:nth-child(2) > span{ animation-delay:.14s; }
  @keyframes riseUp{ to{ transform:translateY(0); } }
  .hero-h1{
    margin-top:16px;
    font-family:'Bricolage Grotesque';
    font-size:clamp(1.05rem, 2.2vw, 1.5rem);
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--cream);
  }
  .hero-about{
    margin:26px auto 34px;
    max-width:560px;
    font-size:1.08rem; line-height:1.6;
    color:var(--muted);
  }
  .hero-capture{
    display:flex; align-items:center; gap:6px;
    max-width:520px; margin:0 auto 18px;
    padding:7px;
    background:rgba(26,24,21,0.72);
    border:1px solid var(--line-strong);
    border-radius:100px;
    backdrop-filter:blur(10px);
    transition:border-color .3s ease, box-shadow .3s ease;
    /* backdrop-filter makes this a stacking context, which traps the address
       suggestions inside it no matter how high their z-index goes. Without a
       z-index here the trust row below paints straight through the dropdown,
       because it comes later in the markup and .reveal gives it a transform
       of its own. */
    position:relative; z-index:20;
  }
  .hero-capture:focus-within{ border-color:var(--gold-line); box-shadow:0 0 0 4px rgba(201,164,92,0.08); }
  .hero-capture input{
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:var(--cream); font-size:0.94rem; padding:12px 18px;
  }
  .hero-capture input::placeholder{ color:var(--muted-dim); }
  .hero-actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
  .hero-trust{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:26px; flex-wrap:wrap;
  }
  .hero-trust .stars{ display:flex; gap:3px; }
  .hero-trust .stars svg{ width:14px; height:14px; fill:var(--gold); }
  .hero-trust span{ font-size:0.8rem; color:var(--muted); }
  .hero-trust b{ color:var(--cream); font-weight:600; }

  /* ---------- MARQUEE ---------- */
  .marquee{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    padding:16px 0;
  }
  .marquee-track{
    display:flex; width:max-content;
    animation:scroll-left 34s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  .marquee-item{
    display:flex; align-items:center; gap:14px;
    font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--muted); padding:0 26px; white-space:nowrap;
  }
  .marquee-item .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); }
  @keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
    .reveal{ transition:none; opacity:1; transform:none; }
  }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{ padding:120px 0; }
  section.alt{ background:var(--bg-alt); }
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
    max-width:var(--maxw); margin:0 auto 52px; flex-wrap:wrap;
  }
  .section-head .copy{ max-width:560px; }
  .section-head h2{
    font-size:clamp(1.9rem, 3.2vw, 2.6rem);
    margin-top:14px;
  }
  .section-head p{
    margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.6;
  }

  /* ---------- FEATURED PROPERTIES SLIDER ---------- */
  .prop-slider-wrap{ position:relative; }
  .prop-slider{
    display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; scrollbar-width:none;
    /* A card leaving the container used to be cut off at a hard edge. The mask
       fades the last 48px on whichever sides still have content to scroll to,
       so the cut reads as a fade instead. Applied to the track, not the wrap,
       so the arrows and dots below are never dimmed. */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  }
  .prop-slider::-webkit-scrollbar{ display:none; }
  /* At the very start nothing is hidden on the left, so the left fade would
     dim the first card for no reason. The scroll handler toggles these. */
  .prop-slider.at-start{
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
    mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
  }
  .prop-slider.at-end{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 100%);
  }
  .prop-slider.at-start.at-end{ -webkit-mask-image:none; mask-image:none; }
  .prop-card{
    flex:0 0 340px; scroll-snap-align:start;
    border:1px solid var(--line); border-radius:8px; overflow:hidden;
    background:var(--panel);
    transition:transform .4s var(--ease), border-color .4s ease;
  }
  .prop-card:hover{ transform:translateY(-6px); border-color:var(--gold-line); }
  .prop-media{
    aspect-ratio:4/3; position:relative; overflow:hidden;
  }
  .prop-media .art{
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:saturate(0.75) sepia(0.16) brightness(0.7) contrast(1.08);
    transition:transform .6s var(--ease);
  }
  .prop-card:hover .prop-media .art{ transform:scale(1.06); }
  .prop-media::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(12,11,9,0.18) 0%, rgba(12,11,9,0.05) 45%, rgba(12,11,9,0.8) 100%);
  }
  .prop-tag{
    position:absolute; top:14px; left:14px; z-index:2;
    background:rgba(12,11,9,0.7); backdrop-filter:blur(4px);
    border:1px solid var(--gold-line);
    color:var(--gold-bright); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px;
  }
  .prop-price{
    position:absolute; bottom:14px; left:14px; z-index:2;
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.35rem; color:var(--cream);
  }
  .prop-body{ padding:20px 22px 24px; }
  .prop-body h4{ font-size:1.02rem; margin-bottom:6px; }
  .prop-body .loc{ font-size:0.82rem; color:var(--muted); margin-bottom:16px; }
  .prop-specs{ display:flex; gap:16px; padding-top:14px; border-top:1px solid var(--line); }
  .prop-specs span{ display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--muted); }
  .prop-specs svg{ width:14px; height:14px; stroke:var(--gold); }

  .slider-controls{
    display:flex; align-items:center; justify-content:space-between; margin-top:30px; flex-wrap:wrap; gap:20px;
  }
  .slider-arrows{ display:flex; gap:10px; }
  .prop-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .slider-dots{ display:flex; gap:8px; }
  .slider-dots span{
    width:6px; height:6px; border-radius:50%; background:var(--line-strong);
    transition:all .35s var(--ease);
  }
  .slider-dots span.active{ background:var(--gold); width:22px; border-radius:100px; }

  /* ---------- SERVICES ---------- */
  .video-frame{
    position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
    border:1px solid var(--line);
    background-image:var(--video-thumb);
    background-size:cover; background-position:center 30%;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:64px; cursor:pointer;
  }
  .video-frame::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(0deg, rgba(12,11,9,0.75) 0%, rgba(12,11,9,0.15) 45%, rgba(12,11,9,0.35) 100%);
  }
  .video-frame .play-btn{
    position:relative; z-index:2;
    width:82px; height:82px; border-radius:50%; border:1px solid var(--gold-line);
    background:rgba(12,11,9,0.55); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    transition:transform .4s var(--ease), background .3s ease;
  }
  .video-frame .play-btn svg{ width:22px; height:22px; fill:var(--gold-bright); margin-left:4px; }
  .video-frame:hover .play-btn{ transform:scale(1.1); background:var(--gold-dim); }
  .video-frame .video-caption{
    position:absolute; left:26px; bottom:22px; z-index:2;
  }
  .video-caption .eyebrow{ margin-bottom:6px; display:block; }
  .video-caption p{ font-size:0.92rem; color:var(--muted); }
  .video-note{
    position:absolute; top:20px; right:24px; z-index:2; font-size:0.62rem; letter-spacing:0.08em;
    color:var(--muted); text-transform:uppercase;
    background:rgba(12,11,9,0.55); backdrop-filter:blur(4px);
    padding:6px 12px; border-radius:100px; border:1px solid var(--line);
  }
  /* Once the team video has been clicked the frame becomes the player: the
     poster gradient and hover affordance are no longer wanted. */
  .video-frame.is-playing{ cursor:default; background:#000; }
  .video-frame.is-playing::before{ display:none; }
  .video-frame .video-player{
    position:absolute; inset:0; z-index:3;
    width:100%; height:100%; object-fit:contain; background:#000;
    border:0; display:block;
  }
  /* Ambient preview. The film runs silently underneath the poster treatment,
     so the play button still reads as the way to hear it and the whole frame
     stays clickable. Clicks pass straight through to the frame, which opens
     the fullscreen player. */
  .video-frame.is-preview{ background:#000; }
  .video-frame .video-preview{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover; background:#000;
    border:0; display:block; pointer-events:none;
  }

  .services-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  }
  .service-card{
    background:var(--bg); padding:38px 32px;
    transition:background .35s ease;
  }
  .service-card:hover{ background:var(--panel); }
  .service-card .icon-wrap{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center;
    margin-bottom:24px; transition:background .3s ease;
  }
  .service-card:hover .icon-wrap{ background:var(--gold-dim); }
  .service-card .icon-wrap svg{ width:19px; height:19px; stroke:var(--gold); }
  .service-card h3{ font-size:1.08rem; margin-bottom:10px; }
  .service-card p{ font-size:0.88rem; color:var(--muted); line-height:1.6; }

  /* ---------- WHY US COMBINED ---------- */
  .why-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:70px; align-items:center; }
  .reason{
    border-top:1px solid var(--line); padding:26px 0;
  }
  .reason:last-child{ border-bottom:1px solid var(--line); }
  .reason-head{
    display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  }
  .reason-head h3{ font-size:1.12rem; font-weight:600; }
  .reason-teaser{ font-size:0.86rem; color:var(--muted); margin-top:6px; }
  .reason-toggle{
    flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
  }
  .reason-toggle svg{ width:14px; height:14px; stroke:var(--cream); transition:transform .35s var(--ease); }
  .reason.open .reason-toggle{ border-color:var(--gold); background:var(--gold-dim); }
  .reason.open .reason-toggle svg{ transform:rotate(45deg); stroke:var(--gold-bright); }
  .reason-body{
    max-height:0; overflow:hidden; transition:max-height .5s var(--ease), margin-top .5s var(--ease);
  }
  .reason.open .reason-body{ max-height:320px; margin-top:16px; }
  .reason-body p{ font-size:0.9rem; color:var(--muted); line-height:1.7; max-width:460px; }

  .duo-photos{ position:relative; height:480px; max-width:440px; margin:0 auto; }
  .duo-photo{
    position:absolute; width:58%; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
    border:1px solid var(--line-strong); background-size:cover; background-repeat:no-repeat;
    box-shadow:0 24px 50px -22px rgba(0,0,0,0.65);
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .duo-photo.one{ left:0; top:4%; background-image:var(--ryan-photo); background-position:center top; transform:rotate(-4deg); z-index:1; }
  .duo-photo.two{ right:0; bottom:4%; background-image:var(--paul-photo); background-position:center top; transform:rotate(4deg); z-index:1; }
  .duo-photo.one:hover{ transform:rotate(-4deg) translateY(-8px); z-index:3; box-shadow:0 30px 60px -20px rgba(0,0,0,0.75); }
  .duo-photo.two:hover{ transform:rotate(4deg) translateY(-8px); z-index:3; box-shadow:0 30px 60px -20px rgba(0,0,0,0.75); }
  .duo-photo .name-plate{
    position:absolute; left:0; right:0; bottom:0; padding:16px 18px 14px;
    background:linear-gradient(0deg, rgba(9,8,6,0.92) 0%, rgba(9,8,6,0.55) 55%, transparent 100%);
  }
  .duo-photo .role{ font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright); }
  .duo-photo .name{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.02rem; color:var(--cream); display:block; margin-top:2px; }
  .duo-team-link{ display:flex; justify-content:center; margin-top:26px; }

  /* ---------- HOME EVALUATION ---------- */
  .eval-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .eval-inner h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
  .eval-inner p.lede{ margin:18px 0 30px; color:var(--muted); font-size:1rem; line-height:1.6; max-width:460px; }
  .eval-form{ display:flex; flex-direction:column; gap:14px; max-width:420px; }
  .eval-form input{
    padding:16px 20px; border:1px solid var(--line-strong); border-radius:100px;
    background:var(--panel); color:var(--cream); font-family:'Inter'; font-size:0.92rem; outline:none;
    transition:border-color .25s ease, background .25s ease;
  }
  .eval-form input::placeholder{ color:var(--muted-dim); }
  .eval-form input:focus{ border-color:var(--gold); background:var(--panel-2); }
  .eval-form .btn{ align-self:flex-start; }
  .eval-micro{ margin-top:16px; font-size:0.78rem; color:var(--muted-dim); }
  .eval-card{
    background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:38px;
  }
  .eval-card .eyebrow{ margin-bottom:14px; display:block; }
  .eval-card h3{ font-size:1.3rem; margin-bottom:14px; }
  .eval-card p{ font-size:0.9rem; color:var(--muted); line-height:1.65; }
  .eval-stat-row{ display:flex; gap:34px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
  .eval-stat b{ display:block; font-family:'Bricolage Grotesque'; font-size:1.6rem; color:var(--gold-bright); }
  .eval-stat span{ font-size:0.7rem; color:var(--muted-dim); letter-spacing:0.03em; }

  /* ---------- EXPLORE AREAS, FILTERABLE ---------- */
  .filter-group{ margin-bottom:14px; }
  .filter-label{ font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:12px; }
  .filter-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    padding:9px 18px; border-radius:100px; border:1px solid var(--line-strong);
    font-size:0.8rem; font-weight:500; color:var(--muted); transition:all .3s var(--ease);
  }
  .chip:hover{ border-color:var(--gold-line); color:var(--cream); }
  .chip.active{ background:var(--gold); border-color:var(--gold); color:#161310; font-weight:600; }
  .filter-bar{ display:flex; flex-wrap:wrap; gap:36px; margin-bottom:20px; }
  .filter-result-count{ font-size:0.8rem; color:var(--muted-dim); margin-bottom:34px; }
  .filter-result-count b{ color:var(--gold); }

  .neigh-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  .neigh-card{
    border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel);
    transition:opacity .4s var(--ease), transform .4s var(--ease), border-color .3s ease;
  }
  .neigh-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .neigh-card.hidden{ display:none; }
  .neigh-art{
    height:140px; position:relative; display:flex; align-items:flex-start; padding:16px;
    overflow:hidden; background:var(--bg-alt);
  }
  .neigh-art .n-photo{
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:saturate(0.75) sepia(0.16) brightness(0.62) contrast(1.08);
    transition:transform .6s var(--ease);
  }
  .neigh-card:hover .n-photo{ transform:scale(1.06); }
  .neigh-art::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(12,11,9,0.4) 0%, rgba(12,11,9,0.1) 45%, rgba(12,11,9,0.5) 100%);
  }
  .neigh-art .pin{
    position:relative; z-index:1;
    width:26px; height:26px; border-radius:50%; border:1px solid var(--gold-line);
    background:rgba(12,11,9,0.55); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
  }
  .neigh-art .pin svg{ width:12px; height:12px; stroke:var(--gold-bright); }
  /* Tags run from the left and stop short of the arrow button (.card-go sits
     bottom-right at 34px wide), so the arrow can never cover a tag. */
  .neigh-tags{ position:absolute; left:16px; right:58px; bottom:14px; z-index:1; display:flex; flex-wrap:wrap; gap:6px; }
  .neigh-tags span{
    font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream);
    border:1px solid var(--line-strong); background:rgba(12,11,9,0.55); backdrop-filter:blur(4px);
    padding:4px 9px; border-radius:100px; white-space:nowrap;
  }
  .neigh-body{ padding:20px; }
  .neigh-body h4{ font-size:1.02rem; margin-bottom:9px; }
  .neigh-body p{ font-size:0.85rem; color:var(--muted); line-height:1.55; }
  .empty-state{
    grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted-dim);
    display:none;
  }
  .empty-state.show{ display:block; }
  .empty-state .btn-text{ display:inline-block; margin-top:14px; color:var(--gold); }

  /* ---------- TESTIMONIALS SLIDER ---------- */
  .testi-wrap{ max-width:760px; margin:0 auto; text-align:center; position:relative; }
  .testi-track{ position:relative; min-height:300px; }
  .testi-slide{
    position:absolute; inset:0; opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
    background:var(--panel); border:1px solid var(--line-strong); border-radius:14px;
    padding:48px 44px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .testi-slide.active{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .testi-mark{ font-family:'Bricolage Grotesque'; font-size:3rem; color:var(--gold); line-height:1; margin-bottom:10px; }
  .testi-slide p.quote{ font-size:1.2rem; line-height:1.6; color:var(--cream); max-width:620px; margin:0 auto 26px; }
  .testi-who{ display:flex; align-items:center; justify-content:center; gap:12px; }
  .testi-avatar{
    width:42px; height:42px; border-radius:50%; background:var(--panel-2); border:1px solid var(--gold-line);
    display:flex; align-items:center; justify-content:center; color:var(--gold-bright);
    font-family:'Bricolage Grotesque'; font-size:0.9rem; font-weight:700;
  }
  .testi-who b{ display:block; font-size:0.9rem; }
  .testi-who span{ font-size:0.78rem; color:var(--muted); }
  .testi-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:40px; }
  .testi-note{ margin-top:38px; font-size:0.78rem; color:var(--muted-dim); text-align:center; }

  /* ---------- CTA BANNER ---------- */
  .cta-banner{
    background:linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
    text-align:center; padding:130px 0; position:relative; overflow:hidden;
  }
  .cta-banner::before{
    content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:700px; height:700px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,164,92,0.10) 0%, transparent 70%);
    pointer-events:none;
  }
  .cta-banner h2{ font-size:clamp(2rem,4vw,3.2rem); max-width:680px; margin:16px auto 20px; position:relative; }
  .cta-banner p{ color:var(--muted); max-width:460px; margin:0 auto 34px; font-size:1rem; position:relative; }
  .cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:80px 0 30px; }
  .footer-top{
    display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 0.8fr 1fr; gap:40px;
    padding-bottom:60px; border-bottom:1px solid var(--line);
  }
  .footer-top .logo .word{ font-size:1.3rem; }
  .footer-blurb{ font-size:0.85rem; color:var(--muted); line-height:1.6; margin-top:18px; max-width:260px; }
  .footer-col h5{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
  .footer-col a, .footer-col p{ display:block; font-size:0.86rem; color:var(--muted); margin-bottom:11px; }
  .footer-col a:hover{ color:var(--gold-bright); }
  .footer-social{ display:flex; gap:12px; margin-top:6px; }
  .footer-social a{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
  }
  .footer-social a svg{ width:15px; height:15px; stroke:var(--cream); }
  .footer-social a:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .footer-social a:hover svg{ stroke:var(--gold-bright); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:28px;
    font-size:0.75rem; color:var(--muted-dim); flex-wrap:wrap; gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .wrap, .nav-inner{ padding-left:24px; padding-right:24px; }
    nav.primary-links{ display:none; }
    .nav-toggle{ display:block; }
    .services-grid{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:1fr; gap:40px; }
    .duo-photos{ height:400px; max-width:420px; margin:0 auto; }
    .eval-inner{ grid-template-columns:1fr; gap:40px; }
    .neigh-grid{ grid-template-columns:1fr 1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; }
    section{ padding:80px 0; }
  }
  @media (max-width:640px){
    .hero-capture{ flex-direction:column; border-radius:18px; padding:14px; gap:10px; }
    .hero-capture input{ width:100%; padding:8px 10px; text-align:center; }
    .hero-capture .btn{ width:100%; justify-content:center; }
    .hero-actions .btn{ flex:1 1 40%; justify-content:center; }
    .eval-form{ max-width:100%; }
    .nav-phone span{ display:none; }
    /* the header pill overflowed 375px viewports by ~126px, forcing sideways
       pan sitewide; the fixed .mobile-cta bar already carries this CTA */
    .nav-right .btn{ display:none; }
    .nav-right{ gap:14px; }
    .footer-top{ grid-template-columns:1fr; }
    .neigh-grid{ grid-template-columns:1fr; }
    .prop-card{ flex-basis:280px; }
    .filter-bar{ gap:22px; }
    .testi-slide{ padding:34px 22px; }
  }

  /* ================================================== */
  /* SHARED INTERIOR PAGE COMPONENTS                    */
  /* ================================================== */

  /* Footer gold button keeps dark text despite footer link color rules */
  .footer-col a.btn-gold, footer .btn-gold{ color:#161310; }
  .footer-col a.btn-gold:hover{ color:#161310; }

  /* Interior page hero */
  .page-hero{
    position:relative; text-align:center;
    padding:110px 24px 80px;
    background:
      radial-gradient(ellipse at 22% 20%, rgba(201,164,92,0.10) 0%, transparent 45%),
      radial-gradient(ellipse at 78% 80%, rgba(201,164,92,0.07) 0%, transparent 45%),
      linear-gradient(180deg, #141210 0%, #0C0B09 100%);
    border-bottom:1px solid var(--line);
  }
  .page-hero h1{
    font-size:clamp(2.4rem, 6vw, 4.4rem);
    font-weight:700; letter-spacing:-0.03em;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--gold-bright) 130%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    max-width:820px; margin:0 auto;
  }
  .page-hero .lede{
    margin:22px auto 0; max-width:600px;
    font-size:1.06rem; line-height:1.65; color:var(--muted);
  }
  .page-hero .page-hero-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* Breadcrumbs */
  .crumbs{
    display:flex; gap:8px; justify-content:center; align-items:center;
    font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--muted-dim); margin-bottom:22px;
  }
  .crumbs a{ color:var(--muted); transition:color .2s ease; }
  .crumbs a:hover{ color:var(--gold-bright); }
  .crumbs .sep{ color:var(--muted-dim); }

  /* Stacked form fields */
  .field-group{ display:flex; flex-direction:column; gap:12px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .field{
    width:100%;
    padding:15px 18px; border:1px solid var(--line-strong); border-radius:12px;
    background:var(--panel-2); color:var(--cream); font-family:'Inter'; font-size:0.92rem; outline:none;
    transition:border-color .25s ease, background .25s ease;
  }
  .field::placeholder{ color:var(--muted-dim); }
  .field:focus{ border-color:var(--gold); }
  textarea.field{ resize:vertical; min-height:110px; }
  select.field{ appearance:none; cursor:pointer; }
  .form-card{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:14px; padding:34px;
  }
  .form-card h3{ font-size:1.25rem; margin-bottom:8px; }
  .form-card .sub{ font-size:0.86rem; color:var(--muted); margin-bottom:22px; line-height:1.55; }
  .form-card .btn{ width:100%; justify-content:center; margin-top:4px; }
  .form-card .micro{ margin-top:14px; font-size:0.75rem; color:var(--muted-dim); text-align:center; }

  /* Listing grid */
  .listing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .listing-grid .prop-card{ flex:none; }
  .idx-note{
    margin-top:34px; text-align:center; font-size:0.8rem; color:var(--muted-dim);
    border:1px dashed var(--line-strong); border-radius:12px; padding:18px 22px;
  }
  .idx-note b{ color:var(--gold); font-weight:600; }

  /* Numbered step timeline */
  .steps{ max-width:800px; margin:0 auto; }
  .step{
    display:grid; grid-template-columns:70px 1fr; gap:26px;
    padding:34px 0; border-top:1px solid var(--line); position:relative;
  }
  .step:last-child{ border-bottom:1px solid var(--line); }
  .step-num{
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.9rem;
    color:var(--gold); line-height:1;
  }
  .step h3{ font-size:1.2rem; margin-bottom:10px; }
  .step p{ font-size:0.93rem; color:var(--muted); line-height:1.65; max-width:560px; }

  /* Calculator */
  .calc-shell{ display:grid; grid-template-columns:1fr 0.9fr; gap:40px; align-items:start; }
  .calc-result{
    background:var(--panel); border:1px solid var(--gold-line); border-radius:14px; padding:34px;
    position:sticky; top:110px; text-align:center;
  }
  .calc-result .label{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
  .calc-result .big{
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:clamp(2.2rem, 4.5vw, 3.4rem); color:var(--gold-bright); margin:10px 0 4px;
  }
  .calc-result .per{ font-size:0.85rem; color:var(--muted); }
  .calc-result .breakdown{
    margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:10px; text-align:left;
  }
  .calc-result .breakdown div{ display:flex; justify-content:space-between; font-size:0.85rem; }
  .calc-result .breakdown span{ color:var(--muted); }
  .calc-result .breakdown b{ color:var(--cream); font-weight:600; }
  .calc-label{ font-size:0.78rem; font-weight:600; color:var(--muted); margin-bottom:8px; display:block; }
  .calc-field-wrap{ margin-bottom:18px; }
  .calc-disclaimer{ margin-top:18px; font-size:0.72rem; color:var(--muted-dim); line-height:1.6; }
  .tool-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }

  /* Quick fact tiles */
  .fact-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .fact-tile{ background:var(--bg); padding:28px 24px; text-align:center; }
  .fact-tile b{ display:block; font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.7rem; color:var(--gold-bright); }
  .fact-tile span{ font-size:0.75rem; color:var(--muted); letter-spacing:0.03em; }

  /* Prose blocks for SEO content */
  .prose{ max-width:760px; margin:0 auto; }
  .prose h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem); margin:54px 0 18px; }
  .prose h2:first-child{ margin-top:0; }
  .prose h3{ font-size:1.15rem; margin:34px 0 12px; }
  .prose p{ font-size:0.97rem; color:var(--muted); line-height:1.75; margin-bottom:18px; }
  .prose strong{ color:var(--cream); font-weight:600; }
  .prose ul{ margin:0 0 18px 0; }
  .prose ul li{
    position:relative; padding-left:26px; margin-bottom:10px;
    font-size:0.97rem; color:var(--muted); line-height:1.65;
  }
  .prose ul li::before{
    content:''; position:absolute; left:2px; top:10px;
    width:6px; height:6px; border-radius:50%; background:var(--gold);
  }

  /* Two column feature rows */
  .feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .feature-row + .feature-row{ margin-top:90px; }
  .feature-row .art-panel{
    border-radius:12px; overflow:hidden; border:1px solid var(--line);
    aspect-ratio:4/3; background-size:cover; background-position:center;
    filter:saturate(0.8) sepia(0.12) brightness(0.78) contrast(1.06);
  }
  .feature-row h3{ font-size:1.5rem; margin-bottom:14px; }
  .feature-row p{ font-size:0.95rem; color:var(--muted); line-height:1.7; margin-bottom:14px; }

  /* Contact info tiles */
  .contact-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .contact-tile{
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:30px;
    text-align:center; transition:border-color .3s ease, transform .3s var(--ease);
  }
  .contact-tile:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .contact-tile .icon-wrap{
    width:46px; height:46px; border-radius:50%; margin:0 auto 18px;
    border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center;
  }
  .contact-tile .icon-wrap svg{ width:19px; height:19px; stroke:var(--gold); }
  .contact-tile h4{ font-size:1rem; margin-bottom:8px; }
  .contact-tile a, .contact-tile p{ font-size:0.88rem; color:var(--muted); }
  .contact-tile a:hover{ color:var(--gold-bright); }

  @media (max-width:980px){
    .calc-shell{ grid-template-columns:1fr; }
    .calc-result{ position:static; }
    .listing-grid{ grid-template-columns:1fr 1fr; }
    .fact-tiles{ grid-template-columns:1fr 1fr; }
    .feature-row{ grid-template-columns:1fr; gap:30px; }
    .feature-row + .feature-row{ margin-top:60px; }
    .contact-tiles{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .listing-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .step{ grid-template-columns:48px 1fr; gap:16px; }
  }

  /* ================================================== */
  /* V3: DROPDOWN NAV, SLIDERS, EDITORIAL COMPONENTS    */
  /* ================================================== */

  /* Dropdown nav */
  .nav-drop{ position:relative; }
  .nav-drop > a{ display:inline-flex; align-items:center; gap:6px; }
  .nav-drop > a svg{ width:11px; height:11px; stroke:currentColor; transition:transform .3s var(--ease); }
  .nav-drop:hover > a svg, .nav-drop.open > a svg{ transform:rotate(180deg); }
  .drop-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
    padding-top:16px; opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
    z-index:60;
  }
  .nav-drop:hover .drop-menu, .nav-drop.open .drop-menu{
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .drop-inner{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:14px;
    padding:10px; min-width:250px;
    box-shadow:0 26px 60px -22px rgba(0,0,0,0.8);
  }
  .drop-inner a{
    display:flex; flex-direction:column; gap:2px;
    padding:12px 15px; border-radius:9px;
    transition:background .2s ease;
  }
  .drop-inner a:hover{ background:var(--gold-dim); }
  .drop-inner a b{ font-size:0.86rem; font-weight:600; color:var(--cream); }
  .drop-inner a span{ font-size:0.72rem; color:var(--muted-dim); }
  .drop-inner a:hover b{ color:var(--gold-bright); }
  .drop-inner .soon{ opacity:0.45; pointer-events:none; }
  .drop-inner .soon b::after{ content:' · soon'; color:var(--muted-dim); font-weight:500; }
  @media (max-width:980px){
    .drop-menu{ position:static; transform:none; padding-top:8px; display:none; }
    .nav-drop.open .drop-menu{ display:block; opacity:1; transform:none; }
    .drop-inner{ box-shadow:none; background:transparent; border:none; padding:0 0 4px 14px; }
  }

  /* Draggable range sliders */
  .range-wrap{ margin-bottom:26px; }
  .range-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; gap:14px; }
  .range-head label{ font-size:0.78rem; font-weight:600; color:var(--muted); letter-spacing:0.02em; }
  .range-head output{
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.2rem; color:var(--gold-bright);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  input[type="range"].range{
    -webkit-appearance:none; appearance:none;
    width:100%; height:6px; border-radius:100px; outline:none; cursor:grab;
    background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill,50%), rgba(243,238,226,0.12) var(--fill,50%));
    transition:box-shadow .2s ease;
  }
  input[type="range"].range:active{ cursor:grabbing; }
  input[type="range"].range::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:24px; height:24px; border-radius:50%;
    background:var(--gold-bright); border:3px solid #0C0B09;
    box-shadow:0 0 0 1px var(--gold-line), 0 4px 14px -4px rgba(201,164,92,0.7);
    transition:transform .2s var(--ease);
  }
  input[type="range"].range::-webkit-slider-thumb:hover{ transform:scale(1.18); }
  input[type="range"].range::-moz-range-thumb{
    width:24px; height:24px; border-radius:50%;
    background:var(--gold-bright); border:3px solid #0C0B09;
    box-shadow:0 0 0 1px var(--gold-line), 0 4px 14px -4px rgba(201,164,92,0.7);
  }
  .range-limits{ display:flex; justify-content:space-between; margin-top:8px; font-size:0.66rem; color:var(--muted-dim); }

  /* Chip toggles */
  .chip-toggle{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip-toggle .chip{ flex:1; text-align:center; justify-content:center; }

  /* Big animated result */
  .result-hero{
    background:linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--gold-line); border-radius:18px; padding:40px;
    position:sticky; top:104px; text-align:center; overflow:hidden;
  }
  .result-hero::before{
    content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
    width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,164,92,0.14) 0%, transparent 70%);
    pointer-events:none;
  }
  .result-hero .label{ font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); position:relative; }
  .result-hero .big{
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:clamp(2.6rem, 5vw, 3.9rem); color:var(--gold-bright); margin:12px 0 4px;
    font-variant-numeric:tabular-nums; position:relative; line-height:1;
  }
  .result-hero .per{ font-size:0.85rem; color:var(--muted); position:relative; }
  .result-hero .breakdown{
    margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:11px; text-align:left; position:relative;
  }
  .result-hero .breakdown div{ display:flex; justify-content:space-between; font-size:0.85rem; }
  .result-hero .breakdown span{ color:var(--muted); }
  .result-hero .breakdown b{ color:var(--cream); font-weight:600; font-variant-numeric:tabular-nums; }
  .split-bar{
    margin-top:22px; height:10px; border-radius:100px; overflow:hidden;
    background:rgba(243,238,226,0.1); display:flex; position:relative;
  }
  .split-bar .p{ background:var(--gold); transition:width .5s var(--ease); }
  .split-legend{ display:flex; justify-content:space-between; margin-top:10px; font-size:0.68rem; color:var(--muted-dim); }
  .split-legend i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; font-style:normal; }
  .split-legend .li-p i{ background:var(--gold); }
  .split-legend .li-i i{ background:rgba(243,238,226,0.25); }

  /* Pull quote testimonial */
  .pull-quote{
    max-width:820px; margin:0 auto; text-align:center; position:relative; padding:20px 20px 0;
  }
  .pull-quote .mark{
    font-family:'Bricolage Grotesque'; font-size:5rem; line-height:0.6; color:var(--gold);
    display:block; margin-bottom:26px; opacity:0.9;
  }
  .pull-quote blockquote{
    font-family:'Bricolage Grotesque'; font-weight:500;
    font-size:clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.4; letter-spacing:-0.01em;
    color:var(--cream);
  }
  .pull-quote .who{ margin-top:26px; font-size:0.85rem; color:var(--muted); }
  .pull-quote .who b{ color:var(--gold-bright); font-weight:600; }
  .pull-quote .ph-note{ margin-top:10px; font-size:0.68rem; color:var(--muted-dim); }

  /* Editorial numbered rows */
  .ed-rows{ }
  .ed-row{
    display:grid; grid-template-columns:120px 1fr auto; gap:34px; align-items:center;
    padding:44px 0; border-top:1px solid var(--line); position:relative;
    transition:padding .35s var(--ease);
  }
  .ed-row:last-child{ border-bottom:1px solid var(--line); }
  .ed-row:hover{ padding-left:14px; }
  .ed-num{
    font-family:'Bricolage Grotesque'; font-weight:800; font-size:3.2rem; line-height:1;
    color:transparent; -webkit-text-stroke:1px var(--gold-line);
    transition:color .35s ease;
  }
  .ed-row:hover .ed-num{ color:var(--gold); -webkit-text-stroke:1px var(--gold); }
  .ed-row h3{ font-size:1.35rem; margin-bottom:8px; }
  .ed-row p{ font-size:0.93rem; color:var(--muted); line-height:1.65; max-width:520px; }
  .ed-arrow{
    width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all .35s var(--ease);
  }
  .ed-arrow svg{ width:18px; height:18px; stroke:var(--cream); transition:transform .35s var(--ease); }
  .ed-row:hover .ed-arrow{ border-color:var(--gold); background:var(--gold-dim); }
  .ed-row:hover .ed-arrow svg{ transform:translateX(3px); stroke:var(--gold-bright); }

  /* Photo collage */
  .collage{
    display:grid; gap:16px;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:220px 220px;
  }
  .collage .c-item{
    position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line);
    background-size:cover; background-position:center;
  }
  .collage .c-item::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(12,11,9,0.85) 0%, rgba(12,11,9,0.1) 50%);
  }
  .collage .c-item .cap{
    position:absolute; left:16px; bottom:14px; right:16px; z-index:2;
  }
  .collage .c-item .cap b{ display:block; font-size:0.88rem; color:var(--cream); font-weight:600; }
  .collage .c-item .cap span{ font-size:0.7rem; color:var(--muted); }
  .collage .c-item .c-img{
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:saturate(0.8) sepia(0.12) brightness(0.78) contrast(1.06);
    transition:transform .6s var(--ease);
  }
  .collage .c-item:hover .c-img{ transform:scale(1.05); }
  .collage .c-a{ grid-column:span 2; grid-row:span 2; }
  .collage .c-b{ grid-column:span 2; }
  .collage .c-c{ grid-column:span 1; }
  .collage .c-d{ grid-column:span 1; }
  @media (max-width:900px){
    .collage{ grid-template-columns:1fr 1fr; grid-template-rows:200px 200px 200px; }
    .collage .c-a{ grid-column:span 2; grid-row:span 1; }
    .collage .c-b{ grid-column:span 2; }
  }

  /* Tool hub rows */
  .hub-row{
    display:block; position:relative; overflow:hidden;
    border:1px solid var(--line); border-radius:18px; margin-bottom:22px;
    padding:52px 48px; transition:border-color .35s ease;
  }
  .hub-row .hub-bg{
    position:absolute; inset:0; opacity:0; background-size:cover; background-position:center;
    filter:saturate(0.7) sepia(0.15) brightness(0.42) contrast(1.05);
    transition:opacity .5s var(--ease), transform .8s var(--ease);
    transform:scale(1.04);
  }
  .hub-row:hover{ border-color:var(--gold-line); }
  .hub-row:hover .hub-bg{ opacity:1; transform:scale(1); }
  .hub-row .hub-content{
    position:relative; z-index:2; display:grid; grid-template-columns:110px 1fr auto; gap:36px; align-items:center;
  }
  .hub-row .ed-num{ font-size:3.6rem; }
  .hub-row:hover .ed-num{ color:var(--gold); -webkit-text-stroke:1px var(--gold); }
  .hub-row h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom:10px; }
  .hub-row p{ font-size:0.95rem; color:var(--muted); line-height:1.6; max-width:520px; }
  .hub-row .hub-q{
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block;
  }
  @media (max-width:820px){
    .hub-row{ padding:34px 26px; }
    .hub-row .hub-content{ grid-template-columns:1fr; gap:18px; }
    .hub-row .ed-num{ font-size:2.6rem; }
    .ed-row{ grid-template-columns:1fr; gap:14px; padding:30px 0; }
    .ed-num{ font-size:2.4rem; }
    .ed-arrow{ display:none; }
    .result-hero{ position:static; }
  }

  /* Split tool hero */
  .tool-hero{
    padding:90px 0 70px; border-bottom:1px solid var(--line);
    background:
      radial-gradient(ellipse at 15% 15%, rgba(201,164,92,0.09) 0%, transparent 45%),
      linear-gradient(180deg, #141210 0%, var(--bg) 100%);
  }
  .tool-hero .tool-hero-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
  }
  .tool-hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.7rem); font-weight:700; letter-spacing:-0.03em;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--gold-bright) 130%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tool-hero .lede{ margin-top:18px; font-size:1.02rem; line-height:1.65; color:var(--muted); max-width:480px; }
  @media (max-width:980px){
    .tool-hero .tool-hero-grid{ grid-template-columns:1fr; gap:44px; }
  }

  /* Mini team strip */
  .team-strip{
    display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center;
    background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px 34px;
  }
  .team-strip .faces{ display:flex; }
  .team-strip .face{
    width:64px; height:64px; border-radius:50%; border:2px solid var(--bg);
    background-size:cover; background-position:center top;
  }
  .team-strip .face + .face{ margin-left:-16px; }
  .team-strip h3{ font-size:1.15rem; margin-bottom:5px; }
  .team-strip p{ font-size:0.85rem; color:var(--muted); }
  @media (max-width:760px){
    .team-strip{ grid-template-columns:1fr; text-align:center; }
    .team-strip .faces{ justify-content:center; }
  }

  /* ================================================== */
  /* V4: LUXURY EDITORIAL LANGUAGE                      */
  /* ================================================== */

  /* Script accent font */
  .script{
    font-family:'Ephesis', cursive; font-weight:400;
    color:var(--gold-bright); letter-spacing:0;
  }
  .script-line{
    display:block; font-size:clamp(2.2rem, 5vw, 3.6rem);
    transform:rotate(-2deg); margin-top:-0.15em; line-height:1.1;
  }
  .script-over{
    display:block; font-size:clamp(1.6rem, 3.4vw, 2.4rem);
    margin-bottom:-0.2em; transform:rotate(-2deg);
  }

  /* Ghost watermark word */
  .ghost-wrap{ position:relative; }
  .ghost-word{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    font-family:'Bricolage Grotesque'; font-weight:800;
    font-size:clamp(4.4rem, 15vw, 12rem); letter-spacing:-0.04em; line-height:1;
    color:transparent; -webkit-text-stroke:1px rgba(201,164,92,0.16);
    white-space:nowrap; pointer-events:none; user-select:none; z-index:0;
  }
  .ghost-wrap > *:not(.ghost-word){ position:relative; z-index:1; }

  /* Light cream sections */
  section.light{
    background:var(--cream); color:#211D18;
    border-top:1px solid rgba(33,29,24,0.08);
    border-bottom:1px solid rgba(33,29,24,0.08);
  }
  section.light h1, section.light h2, section.light h3, section.light h4{ color:#211D18; }
  section.light .eyebrow{ color:#8A6A2F; }
  section.light .section-head p,
  section.light p{ color:#5E5749; }
  section.light .ghost-word{ -webkit-text-stroke:1px rgba(33,29,24,0.10); }
  section.light .btn-outline{ color:#211D18; border-color:rgba(33,29,24,0.28); }
  section.light .btn-outline:hover{ border-color:#8A6A2F; color:#8A6A2F; }
  section.light .btn-text{ color:#211D18; }
  section.light .pull-quote blockquote{ color:#211D18; }
  section.light .pull-quote .who{ color:#5E5749; }
  section.light .pull-quote .who b{ color:#8A6A2F; }
  section.light .pull-quote .mark{ color:#B98D4F; }
  section.light .pull-quote .ph-note{ color:rgba(33,29,24,0.4); }
  section.light .ed-row{ border-color:rgba(33,29,24,0.12); }
  section.light .ed-row p{ color:#5E5749; }
  section.light .ed-num{ -webkit-text-stroke:1px rgba(138,106,47,0.5); }
  section.light .ed-row:hover .ed-num{ color:#B98D4F; -webkit-text-stroke:1px #B98D4F; }
  section.light .ed-arrow{ border-color:rgba(33,29,24,0.22); }
  section.light .ed-arrow svg{ stroke:#211D18; }
  section.light .ed-row:hover .ed-arrow{ border-color:#B98D4F; background:rgba(185,141,79,0.12); }
  section.light .ed-row:hover .ed-arrow svg{ stroke:#8A6A2F; }
  section.light .prose p, section.light .prose ul li{ color:#5E5749; }
  section.light .prose strong{ color:#211D18; }
  section.light .fact-tiles{ background:rgba(33,29,24,0.1); border-color:rgba(33,29,24,0.1); }
  section.light .fact-tile{ background:var(--cream); }
  section.light .fact-tile b{ color:#8A6A2F; }
  section.light .fact-tile span{ color:#5E5749; }
  section.light .steps .step{ border-color:rgba(33,29,24,0.12); }
  section.light .step p{ color:#5E5749; }
  section.light .step-num{ color:#B98D4F; }
  /* 2.6:1 on cream as #B98D4F. Display sized, so the floor is 3:1, not 4.5. */
  section.light .script{ color:#A87C3E; }
  section.light .crumbs a{ color:#5E5749; }
  section.light .team-strip{ background:#EDE6D6; border-color:rgba(33,29,24,0.1); }
  section.light .team-strip p{ color:#5E5749; }
  section.light .idx-note{ color:#8A8070; border-color:rgba(33,29,24,0.2); }
  section.light .idx-note b{ color:#8A6A2F; }
  section.light .filter-result-count{ color:#8A8070; }
  section.light .chip{ color:#5E5749; border-color:rgba(33,29,24,0.25); }
  section.light .chip:hover{ color:#211D18; border-color:#B98D4F; }
  section.light .chip.active{ background:#211D18; border-color:#211D18; color:var(--cream); }

  /* Framed offset photo, Audrey style */
  .framed{ position:relative; display:block; }
  .framed .f-img{
    position:relative; z-index:1; border-radius:4px; overflow:hidden;
    aspect-ratio:3/3.8; background-size:cover; background-position:center top;
    filter:saturate(0.85) sepia(0.08) brightness(0.92) contrast(1.04);
  }
  .framed::after{
    content:''; position:absolute; top:20px; left:20px; right:-20px; bottom:-20px;
    border:1px solid var(--gold-line); border-radius:4px; z-index:0;
    transition:transform .5s var(--ease);
  }
  .framed:hover::after{ transform:translate(6px, 6px); }
  .framed.flip::after{ left:-20px; right:20px; }
  .framed .f-cap{
    position:absolute; z-index:2; left:22px; bottom:20px; right:22px;
  }
  .framed .f-cap b{ display:block; font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.1rem; color:var(--cream); }
  .framed .f-cap span{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-bright); }
  .framed .f-img::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(12,11,9,0.72) 0%, transparent 40%);
  }

  /* Photo triptych, Royal Park style */
  .triptych{
    display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:18px; align-items:center;
    max-width:1000px; margin:0 auto;
  }
  .triptych .t{
    border-radius:8px; overflow:hidden; aspect-ratio:3/3.6;
    background-size:cover; background-position:center;
    filter:saturate(0.85) sepia(0.08) brightness(0.9) contrast(1.04);
  }
  .triptych .t.mid{ aspect-ratio:3/4.1; }
  @media (max-width:760px){
    .triptych{ grid-template-columns:1fr 1fr; }
    .triptych .t.mid{ grid-column:span 2; aspect-ratio:16/10; }
  }

  /* Royal numbered list */
  .royal-list .r-row{
    display:grid; grid-template-columns:minmax(200px, 0.7fr) 1fr auto; gap:40px; align-items:center;
    padding:36px 0; border-top:1px solid var(--line);
    transition:padding .35s var(--ease);
  }
  .royal-list .r-row:last-child{ border-bottom:1px solid var(--line); }
  .royal-list .r-row:hover{ padding-left:12px; }
  .r-name{
    font-family:'Bricolage Grotesque'; font-weight:600; font-size:clamp(1.2rem, 2.2vw, 1.7rem);
    letter-spacing:-0.01em; position:relative; display:inline-block;
  }
  .r-name sup{
    font-size:0.62rem; font-weight:600; color:var(--gold); letter-spacing:0.08em;
    margin-left:8px; top:-0.9em; position:relative;
  }
  .r-desc{ font-size:0.9rem; color:var(--muted); line-height:1.6; max-width:460px; }
  .r-link{
    font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold); white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
    transition:gap .3s var(--ease);
  }
  .r-row:hover .r-link{ gap:14px; }
  .r-link svg{ width:13px; height:13px; stroke:var(--gold); }
  section.light .royal-list .r-row{ border-color:rgba(33,29,24,0.12); }
  section.light .r-desc{ color:#5E5749; }
  section.light .r-link{ color:#8A6A2F; }
  section.light .r-link svg{ stroke:#8A6A2F; }
  @media (max-width:820px){
    .royal-list .r-row{ grid-template-columns:1fr; gap:10px; padding:26px 0; }
  }

  /* Centered display heading, Royal Park style */
  .display-center{ text-align:center; max-width:820px; margin:0 auto 88px; position:relative; }
  .display-center h2{
    font-size:clamp(2rem, 4.4vw, 3.3rem); font-weight:700; letter-spacing:-0.02em; line-height:1.05;
    text-transform:none;
  }
  .display-center .eyebrow{ display:block; margin-bottom:18px; }
  .display-center p.sub{ margin-top:20px; font-size:1rem; line-height:1.65; max-width:560px; margin-left:auto; margin-right:auto; }

  /* ================================================== */
  /* V5: LEAD MODAL, AUTOCOMPLETE, COMMUNITY, AGENTS    */
  /* ================================================== */

  /* Lead capture modal */
  .lead-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; }
  .lead-modal[hidden]{ display:none; }
  .lm-backdrop{ position:absolute; inset:0; background:rgba(8,7,5,0.8); backdrop-filter:blur(6px); }
  .lm-card{
    position:relative; z-index:2; width:100%; max-width:480px;
    background:var(--panel); border:1px solid var(--gold-line); border-radius:18px;
    padding:40px 38px; box-shadow:0 40px 100px -30px rgba(0,0,0,0.9);
    animation:lmIn .4s var(--ease);
  }
  @keyframes lmIn{ from{ opacity:0; transform:translateY(22px) scale(0.98); } to{ opacity:1; transform:none; } }
  .lm-close{
    position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
    transition:border-color .25s ease;
  }
  .lm-close:hover{ border-color:var(--gold); }
  .lm-close svg{ width:14px; height:14px; stroke:var(--cream); }
  .lm-step{ display:none; }
  .lm-step.active{ display:block; }
  .lm-progress{ display:flex; gap:6px; margin-bottom:22px; }
  .lm-progress span{ height:3px; flex:1; border-radius:100px; background:rgba(243,238,226,0.12); transition:background .3s ease; }
  .lm-progress span.done{ background:var(--gold); }
  .lm-card h3{ font-size:1.35rem; margin-bottom:8px; }
  .lm-card .lm-sub{ font-size:0.87rem; color:var(--muted); margin-bottom:22px; line-height:1.55; }
  .lm-addr-chip{
    display:inline-flex; align-items:center; gap:8px; max-width:100%;
    background:var(--gold-dim); border:1px solid var(--gold-line); border-radius:100px;
    padding:8px 16px; margin-bottom:18px; font-size:0.82rem; color:var(--gold-bright);
  }
  .lm-addr-chip button{ font-size:0.7rem; color:var(--muted); text-decoration:underline; }
  .lm-success{ text-align:center; padding:14px 0; }
  .lm-success .ring{
    width:66px; height:66px; border-radius:50%; border:1px solid var(--gold-line);
    background:var(--gold-dim); display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  }
  .lm-success .ring svg{ width:26px; height:26px; stroke:var(--gold-bright); }

  /* Address autocomplete */
  .ac-wrap{ position:relative; }
  .ac-list{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
    background:var(--panel-2); border:1px solid var(--line-strong); border-radius:12px;
    overflow:hidden; box-shadow:0 24px 50px -18px rgba(0,0,0,0.8);
    /* Five suggestions plus the note fit without scrolling. The height used to
       cut the last row in half and put a native scrollbar down the side of it,
       which is the one piece of raw browser chrome anywhere on the site. */
    max-height:min(340px, 60vh); overflow-y:auto;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .ac-list::-webkit-scrollbar{ display:none; }
  .ac-list[hidden]{ display:none; }
  .ac-item{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:12px 15px; font-size:0.86rem; color:var(--cream);
    transition:background .15s ease; cursor:pointer;
  }
  .ac-item svg{ width:13px; height:13px; stroke:var(--gold); flex-shrink:0; }
  .ac-item:hover, .ac-item.hl{ background:var(--gold-dim); }
  /* The street name takes what is left and truncates. Without this it wraps
     onto a second line and the row heights stop matching. */
  .ac-item .ac-label{
    flex:1; min-width:0; font-weight:400;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ac-item span{ color:var(--muted-dim); font-size:0.76rem; flex-shrink:0; white-space:nowrap; }
  .ac-note{ padding:8px 15px; font-size:0.64rem; color:var(--muted-dim); border-top:1px solid var(--line); }

  /* Accent phone */
  .phone-accent{ color:var(--gold-bright); font-weight:700; white-space:nowrap; }
  .phone-accent:hover{ color:var(--gold); }

  /* Clickable card arrow */
  .card-go{
    position:absolute; right:14px; bottom:14px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--gold-line); background:rgba(12,11,9,0.6); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    transition:all .3s var(--ease);
  }
  .card-go svg{ width:14px; height:14px; stroke:var(--gold-bright); transition:transform .3s var(--ease); }
  .neigh-card:hover .card-go{ background:var(--gold); border-color:var(--gold); }
  .neigh-card:hover .card-go svg{ stroke:#161310; transform:translateX(2px); }
  .neigh-card.clickable{ cursor:pointer; }

  /* Community page components */
  /* Toggles above, map below. The old layout put the list beside the map,
     which squeezed both; stacked, the map gets the full width and the
     neighbourhood buttons read as the controls they are. */
  .map-shell{ display:flex; flex-direction:column; gap:24px; }
  .map-frame{
    border-radius:16px; overflow:hidden; border:1px solid var(--line-strong);
    aspect-ratio:16/8; position:relative; background:var(--panel);
  }
  .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(0.5) contrast(1.02) brightness(0.94); }
  .map-note{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:0.64rem; color:var(--muted); background:rgba(12,11,9,0.75); backdrop-filter:blur(4px); padding:6px 12px; border-radius:100px; border:1px solid var(--line); }
  .map-hoods{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px;
  }
  .hood-row{
    text-align:left; padding:18px; cursor:pointer;
    border:1px solid var(--line-strong); border-radius:14px; background:var(--panel);
    transition:border-color .25s ease, background .25s ease;
  }
  .hood-row:hover{ border-color:var(--gold-line); }
  .hood-row.active{ background:var(--gold-dim); border-color:var(--gold-line); }
  .hood-row h4{ font-size:0.98rem; display:flex; align-items:center; gap:9px; }
  .hood-row h4 svg{ width:14px; height:14px; stroke:var(--gold); flex-shrink:0; }
  .hood-row p{ font-size:0.8rem; color:var(--muted); margin-top:6px; line-height:1.5; }
  @media (max-width:640px){ .map-frame{ aspect-ratio:4/3.4; } }

  .biz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .biz-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px;
    transition:border-color .3s ease, transform .3s var(--ease);
  }
  .biz-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .biz-card .icon-wrap{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-line);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .biz-card .icon-wrap svg{ width:18px; height:18px; stroke:var(--gold); }
  .biz-card h4{ font-size:0.98rem; margin-bottom:6px; }
  .biz-card p{ font-size:0.82rem; color:var(--muted); line-height:1.55; }
  .biz-card .tag{ display:inline-block; margin-top:12px; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
  section.light .biz-card{ background:#EDE6D6; border-color:rgba(33,29,24,0.1); }
  section.light .biz-card p{ color:#5E5749; }
  section.light .biz-card .tag{ color:#8A6A2F; }
  @media (max-width:820px){ .biz-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .biz-grid{ grid-template-columns:1fr; } }

  .hscroll{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; scrollbar-width:none; margin:0 -40px; padding-left:40px; padding-right:40px;
  }
  .hscroll::-webkit-scrollbar{ display:none; }
  .hs-card{
    flex:0 0 280px; scroll-snap-align:start;
    border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel);
    transition:border-color .3s ease, transform .35s var(--ease);
  }
  .hs-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .hs-card .hs-img{
    height:150px; background-size:cover; background-position:center;
    filter:saturate(0.8) sepia(0.1) brightness(0.8) contrast(1.05);
  }
  .hs-card .hs-body{ padding:20px 22px; }
  .hs-card h4{ font-size:0.98rem; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
  .hs-card h4 svg{ width:15px; height:15px; stroke:var(--gold); flex-shrink:0; }
  .hs-card p{ font-size:0.82rem; color:var(--muted); line-height:1.55; }

  /* Agent profile sections */
  .agent-block{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
  .agent-block.flip{ grid-template-columns:1.15fr 0.85fr; }
  .agent-block.flip .agent-photo-col{ order:2; }
  .agent-kicker{
    font-family:'Bricolage Grotesque'; font-weight:800; font-size:clamp(2rem, 4.4vw, 3.2rem);
    letter-spacing:-0.03em; line-height:1; margin-bottom:6px;
  }
  .agent-kicker .last{ color:transparent; -webkit-text-stroke:1px var(--gold-line); }
  section.light .agent-kicker .last{ -webkit-text-stroke:1px rgba(138,106,47,0.55); }
  .agent-role-line{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:22px; display:block; }
  section.light .agent-role-line{ color:#8A6A2F; }
  .agent-body p{ font-size:0.95rem; line-height:1.75; margin-bottom:16px; color:var(--muted); }
  section.light .agent-body p{ color:#5E5749; }
  .cred-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
  .cred-chips span{
    display:inline-flex; align-items:center; gap:7px;
    font-size:0.72rem; padding:8px 14px; border-radius:100px;
    border:1px solid var(--line-strong); color:var(--muted);
  }
  .cred-chips span svg{ width:12px; height:12px; stroke:var(--gold); }
  section.light .cred-chips span{ border-color:rgba(33,29,24,0.22); color:#5E5749; }
  section.light .cred-chips span svg{ stroke:#8A6A2F; }
  .broker-card{
    display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
    background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--gold-line); border-radius:18px; padding:34px 38px;
  }
  .broker-card .icon-ring{
    width:60px; height:60px; border-radius:50%; border:1px solid var(--gold-line);
    background:var(--gold-dim); display:flex; align-items:center; justify-content:center;
  }
  .broker-card .icon-ring svg{ width:24px; height:24px; stroke:var(--gold-bright); }
  .broker-card h3{ font-size:1.2rem; margin-bottom:6px; }
  .broker-card p{ font-size:0.88rem; color:var(--muted); line-height:1.6; }
  @media (max-width:900px){
    .agent-block, .agent-block.flip{ grid-template-columns:1fr; gap:36px; }
    .agent-block.flip .agent-photo-col{ order:0; }
    .broker-card{ grid-template-columns:1fr; text-align:center; }
    .broker-card .icon-ring{ margin:0 auto; }
  }

  /* ================================================== */
  /* V6: FIXES + FUNNELS + SOCIAL + FILTERS             */
  /* ================================================== */

  /* FIX: autocomplete wrapper must inherit the input's layout role */
  .ac-wrap{ position:relative; display:block; width:100%; flex:1 1 auto; min-width:0; }
  .ac-wrap input{ width:100%; }
  .hero-capture .ac-wrap{ flex:1; min-width:0; }
  .hero-capture .ac-wrap input{ padding:12px 18px; }

  /* FIX: nav vertical alignment with dropdowns present */
  nav.primary-links{ align-items:center; }
  .nav-drop{ display:flex; align-items:center; }
  .nav-drop > a{ padding-bottom:4px; }

  /* KILL the outlined thin text treatment site wide */
  .ghost-word{ display:none !important; }
  .ghost-wrap{ padding-top:120px !important; }
  .agent-kicker .last{ color:var(--gold); -webkit-text-stroke:0 !important; }
  section.light .agent-kicker .last{ color:#8A6A2F; -webkit-text-stroke:0 !important; }
  .sell-hero .giant .l2{ color:var(--gold-bright) !important; -webkit-text-stroke:0 !important; }
  .ed-num{ color:var(--gold); opacity:0.5; -webkit-text-stroke:0 !important; transition:opacity .35s ease; }
  .ed-row:hover .ed-num, .hub-row:hover .ed-num{ color:var(--gold); opacity:1; -webkit-text-stroke:0 !important; }
  section.light .ed-num{ color:#B98D4F; -webkit-text-stroke:0 !important; }
  section.light .ed-row:hover .ed-num{ color:#8A6A2F; -webkit-text-stroke:0 !important; }

  /* Social post cards */
  .social-card{
    flex:0 0 260px; scroll-snap-align:start;
    border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel);
    transition:transform .35s var(--ease), border-color .3s ease;
  }
  .social-card:hover{ transform:translateY(-4px); border-color:var(--gold-line); }
  .social-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
  .social-head .avatar{
    width:30px; height:30px; border-radius:50%; background-size:cover; background-position:center top;
    border:1px solid var(--gold-line);
  }
  .social-head b{ font-size:0.76rem; color:var(--cream); display:block; }
  .social-head span{ font-size:0.64rem; color:var(--muted-dim); }
  .social-head svg{ width:15px; height:15px; stroke:var(--gold); margin-left:auto; }
  .social-img{ aspect-ratio:1/1; background-size:cover; background-position:center; filter:saturate(0.85) brightness(0.9); }
  .social-body{ padding:12px 14px 16px; }
  .social-body p{ font-size:0.76rem; color:var(--muted); line-height:1.5; }
  .social-meta{ display:flex; gap:14px; margin-top:10px; font-size:0.66rem; color:var(--muted-dim); }
  .social-meta svg{ width:12px; height:12px; stroke:var(--muted-dim); vertical-align:-2px; margin-right:4px; }
  section.light .social-card{ background:#EDE6D6; border-color:rgba(33,29,24,0.12); }
  section.light .social-head b{ color:#211D18; }
  section.light .social-body p{ color:#5E5749; }

  /* Sold tag */
  .prop-tag.sold{ background:var(--gold); color:#161310; border-color:var(--gold); font-weight:700; }

  /* Listing filter bar */
  .filter-panel{
    display:grid; grid-template-columns:repeat(4, 1fr) auto; gap:12px; align-items:end;
    background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; padding:22px;
    margin-bottom:40px;
  }
  .filter-panel label{ display:block; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:8px; }
  .filter-panel .btn{ height:51px; }
  @media (max-width:900px){ .filter-panel{ grid-template-columns:1fr 1fr; } .filter-panel .btn{ grid-column:span 2; } }

  /* Contact split hero */
  .contact-hero{
    padding:100px 0 90px; border-bottom:1px solid var(--line);
    background-image:linear-gradient(180deg, rgba(12,11,9,0.88) 0%, rgba(12,11,9,0.74) 55%, var(--bg) 100%), url('https://picsum.photos/seed/fsc-hero/1800/800');
    background-size:cover; background-position:center;
  }
  .contact-hero-grid{ display:grid; grid-template-columns:1fr 0.95fr; gap:70px; align-items:center; }
  .contact-hero h1{
    font-size:clamp(2.4rem, 5vw, 4rem); font-weight:700; letter-spacing:-0.03em;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--gold-bright) 130%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  @media (max-width:900px){ .contact-hero-grid{ grid-template-columns:1fr; gap:40px; } }

  /* ============ FULL SCREEN FUNNELS ============ */
  .funnel-body{ min-height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 0%, #17140F 0%, var(--bg) 60%); }
  .funnel-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 34px;
  }
  .funnel-top .logo .word{ font-size:1.1rem; }
  .funnel-top .f-phone{ font-size:0.82rem; color:var(--muted); }
  .funnel-top .f-phone b{ color:var(--gold-bright); }
  .funnel-progress{ height:3px; background:rgba(243,238,226,0.08); }
  .funnel-progress .bar{ height:100%; background:var(--gold); width:0%; transition:width .5s var(--ease); border-radius:0 100px 100px 0; }
  .funnel-stage{
    flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px 80px;
  }
  .f-step{ display:none; width:100%; max-width:560px; text-align:center; animation:fIn .45s var(--ease); }
  .f-step.active{ display:block; }
  @keyframes fIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  .f-step .f-kicker{ font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block; }
  .f-step h1, .f-step h2{
    font-size:clamp(1.7rem, 4vw, 2.6rem); font-weight:700; letter-spacing:-0.02em; margin-bottom:12px;
  }
  .f-step .f-sub{ font-size:0.95rem; color:var(--muted); margin-bottom:30px; line-height:1.6; }
  .f-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:12px; margin-bottom:28px; }
  .f-opt{
    padding:20px 12px; border:1px solid var(--line-strong); border-radius:14px;
    font-family:'Bricolage Grotesque'; font-weight:600; font-size:1.15rem; color:var(--cream);
    transition:all .25s var(--ease); cursor:pointer;
  }
  .f-opt small{ display:block; font-family:'Inter'; font-weight:500; font-size:0.64rem; color:var(--muted-dim); margin-top:4px; letter-spacing:0.04em; }
  .f-opt:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
  .f-opt.selected{ background:var(--gold); border-color:var(--gold); color:#161310; }
  .f-opt.selected small{ color:rgba(22,19,16,0.6); }
  .f-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:8px; }
  .f-back{ font-size:0.82rem; color:var(--muted-dim); transition:color .2s ease; }
  .f-back:hover{ color:var(--cream); }
  .f-trust{
    display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
    margin-top:34px; font-size:0.72rem; color:var(--muted-dim);
  }
  .f-trust span{ display:flex; align-items:center; gap:7px; }
  .f-trust svg{ width:13px; height:13px; stroke:var(--gold); }
  .funnel-thanks{ display:none; }
  .funnel-thanks.show{ display:block; }
  .f-video{
    position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
    border:1px solid var(--line); background-image:var(--video-thumb);
    background-size:cover; background-position:center 30%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    max-width:860px; margin:0 auto;
  }
  /* z-index keeps the wash above the looping video below */
  .f-video::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(12,11,9,0.7) 0%, rgba(12,11,9,0.2) 50%); }
  /* Silent looping preview inside the tile. The tile keeps its poster image as
     the background, so a blocked autoplay or reduced motion still looks right. */
  .f-video-loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  @media (prefers-reduced-motion: reduce){ .f-video-loop{ display:none; } }
  .f-video .play-btn{
    position:relative; z-index:2; width:74px; height:74px; border-radius:50%;
    border:1px solid var(--gold-line); background:rgba(12,11,9,0.55); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease);
  }
  .f-video:hover .play-btn{ transform:scale(1.1); }
  .f-video .play-btn svg{ width:20px; height:20px; fill:var(--gold-bright); margin-left:3px; }

  /* ---------- V8: funnel page furniture ----------
     Everything below is scoped to .funnel-body, which only the two paid
     traffic pages use (free-home-evaluation.html, home-search.html). It
     cannot reach the other sixteen pages. */

  /* Photo behind the top of the funnel. The dark wash is heaviest at the
     bottom and thins out toward the top, so the picture reads through up top
     and the form below it stays on clean background. Set --funnel-photo on
     the page; the file itself lives in photos.css. */
  .funnel-body{ position:relative; }
  .funnel-backdrop{
    position:absolute; top:0; left:0; right:0; height:min(760px, 82vh);
    z-index:0; pointer-events:none;
    background-image:var(--funnel-photo); background-size:cover; background-position:center 35%;
    /* Masked rather than covered by an opaque gradient: the photo and its wash
       fade out together to nothing, so whatever the page background happens to
       be shows through underneath and there is no edge to see. */
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0) 100%);
  }
  /* The wash thins toward the top, so the photo is most present up there and
     the questions below always sit on something calm. */
  .funnel-backdrop::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(12,11,9,0.50) 0%,
      rgba(12,11,9,0.70) 45%,
      rgba(12,11,9,0.86) 100%);
  }
  .funnel-top, .funnel-progress, .funnel-stage, .funnel-thanks{ position:relative; z-index:1; }
  /* The logo is plain text on these pages: paid traffic should not be handed
     an exit link before it converts. */
  .funnel-top .logo{ cursor:default; }
  /* On a narrow phone the logo and the phone number ran into each other. Most
     of this traffic arrives from a phone, so this is the first thing they see. */
  @media (max-width:560px){
    .funnel-top{ padding:16px 18px; gap:14px; align-items:flex-start; }
    .funnel-top .logo .word{ font-size:0.95rem; }
    .funnel-top .logo .sub{ font-size:0.52rem; }
    .funnel-top .f-phone{ font-size:0.7rem; text-align:right; line-height:1.5; }
  }

  /* The funnel name, said plainly, above the first question. */
  .f-badge{
    display:inline-flex; align-items:center; gap:9px;
    padding:9px 18px; margin-bottom:20px; border-radius:100px;
    border:1px solid var(--gold-line); background:rgba(201,164,92,0.10);
    color:var(--gold-bright); font-size:0.72rem; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase;
  }
  .f-badge svg{ width:13px; height:13px; stroke:var(--gold-bright); fill:none; }

  /* A heading sitting 12px off its own input reads as one blurred lump. */
  .f-step h1 + form, .f-step h2 + form,
  .f-step h1 + .f-options, .f-step h2 + .f-options,
  .f-step .f-sub + form{ margin-top:26px; }

  /* Button labels centre, not left, once a button goes full width. */
  .funnel-body .btn{ justify-content:center; text-align:center; }

  /* ---------- Fullscreen video player ----------
     Used by about.html and free-home-evaluation.html. Same backdrop and close
     button language as the lead modal above. */
  .story-modal{
    position:fixed; inset:0; z-index:400;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .story-modal[hidden]{ display:none; }
  .sm-backdrop{ position:absolute; inset:0; background:rgba(6,5,4,0.92); backdrop-filter:blur(8px); }
  .sm-stage{ position:relative; z-index:2; width:100%; max-width:1180px; }
  .sm-video{
    display:block; width:100%; max-height:84vh; background:#000;
    border-radius:14px; box-shadow:0 40px 100px -30px rgba(0,0,0,0.9);
    animation:lmIn .4s var(--ease);
  }
  .sm-close{ position:absolute; top:-52px; right:0; background:rgba(8,7,5,0.6); }
  @media (max-width:760px){
    .story-modal{ padding:16px; }
    .sm-close{ top:-46px; }
  }

  /* Four presets meant to read as one row of choices, not a grid. */
  .f-options.f-row4{ grid-template-columns:repeat(4, 1fr); }
  .f-options.f-row4 .f-opt{ padding:16px 10px; font-size:0.88rem; line-height:1.3; }
  @media (max-width:620px){
    .f-options.f-row4{ grid-template-columns:repeat(2, 1fr); }
  }

  /* Free text alternative sitting under a row of preset choices. */
  .f-other{ margin-top:14px; }
  .f-other summary{
    list-style:none; cursor:pointer; font-size:0.82rem; color:var(--muted);
    text-decoration:underline; text-underline-offset:4px; transition:color .2s ease;
  }
  .f-other summary::-webkit-details-marker{ display:none; }
  .f-other summary:hover{ color:var(--gold-bright); }
  .f-other .field{ margin-top:14px; }

  /* ================================================== */
  /* V7: IDX BROKER WIDGET CONTAINER                    */
  /* ================================================== */
  .idx-widget-shell{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:16px;
    padding:32px; min-height:420px;
    /* NOTE: IDX Broker widgets render their own markup and resist external CSS
       by design. Match the site's palette from the IDX Broker dashboard under
       Design > Widgets > Manage > (this widget) > Modify Widget CSS. */
  }
  .idx-widget-shell iframe{ width:100%; border:0; }
  section.light .idx-widget-shell{ background:#EDE6D6; border-color:rgba(33,29,24,0.14); }
  @media (max-width:640px){
    .idx-widget-shell{ padding:14px; }
  }

  /* ================================================== */
  /* V8: LISTING TEMPLATE + INTERNAL ADMIN SYSTEM       */
  /* ================================================== */

  /* Status pills */
  .status-pill{
    display:inline-flex; align-items:center; gap:7px;
    font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:8px 15px; border-radius:100px;
  }
  .status-pill.coming-soon{ border:1px solid var(--gold-line); color:var(--gold-bright); background:var(--gold-dim); }
  .status-pill.coming-soon .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-bright); animation:pulseDot 1.6s infinite; }
  @keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
  .status-pill.active{ background:var(--gold); color:#161310; }
  .status-pill.sold{ background:#2a2620; color:var(--gold-bright); border:1px solid var(--gold-line); }

  /* Listing hero */
  .listing-hero{
    padding:60px 0 40px; border-bottom:1px solid var(--line);
  }
  .listing-hero .lh-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
  .listing-hero h1{ font-size:clamp(1.9rem, 4vw, 3rem); font-weight:700; letter-spacing:-0.02em; }
  .listing-hero .lh-loc{ font-size:1rem; color:var(--muted); margin-top:6px; }
  .listing-hero .lh-price{
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--gold-bright);
  }
  .lh-share{ display:flex; gap:8px; }
  .lh-share button{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
  }
  .lh-share button:hover{ border-color:var(--gold); }
  .lh-share button svg{ width:15px; height:15px; stroke:var(--cream); }
  .spec-row{ display:flex; flex-wrap:wrap; gap:26px; margin-top:22px; }
  .spec-row .spec{ display:flex; align-items:center; gap:9px; font-size:0.92rem; color:var(--cream); }
  .spec-row .spec svg{ width:18px; height:18px; stroke:var(--gold); }
  .spec-row .spec b{ font-weight:700; }
  .spec-row .spec span{ color:var(--muted); font-size:0.82rem; }

  /* Gallery */
  .gallery-grid{
    display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:10px;
    border-radius:16px; overflow:hidden; max-height:520px; position:relative;
  }
  .gallery-grid .g-main{ grid-row:span 2; }
  .gallery-grid .g-item{
    position:relative; background-size:cover; background-position:center; cursor:pointer;
    filter:saturate(0.88) brightness(0.92); transition:filter .3s ease;
  }
  .gallery-grid .g-item:hover{ filter:saturate(1) brightness(1); }
  .gallery-grid .g-item.g-more::after{
    content:attr(data-count); position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,11,9,0.6); color:var(--cream); font-weight:700; font-size:1.1rem;
  }
  @media (max-width:800px){
    .gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:180px 180px; max-height:none; }
    .gallery-grid .g-main{ grid-column:span 2; grid-row:span 1; }
  }
  .gallery-lightbox{
    position:fixed; inset:0; z-index:400; background:rgba(6,5,4,0.96);
    display:flex; align-items:center; justify-content:center; padding:30px;
  }
  .gallery-lightbox[hidden]{ display:none; }
  .gallery-lightbox img{ max-width:90vw; max-height:82vh; border-radius:8px; object-fit:contain; }
  .gallery-lightbox .lb-close{
    position:absolute; top:24px; right:28px; width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  }
  .gallery-lightbox .lb-close svg{ width:16px; height:16px; stroke:var(--cream); }
  .gallery-lightbox .lb-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
  }
  .gallery-lightbox .lb-nav svg{ width:17px; height:17px; stroke:var(--cream); }
  .gallery-lightbox .lb-prev{ left:24px; }
  .gallery-lightbox .lb-next{ right:24px; }
  .gallery-lightbox .lb-count{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:0.78rem; color:var(--muted); }

  /* Two column listing layout */
  .listing-layout{ display:grid; grid-template-columns:1.65fr 1fr; gap:54px; align-items:start; }
  .listing-main h2{ font-size:1.35rem; margin-bottom:14px; }
  .listing-main .desc{ font-size:0.96rem; color:var(--muted); line-height:1.75; margin-bottom:8px; }
  .listing-block{ padding:38px 0; border-top:1px solid var(--line); }
  .listing-block:first-child{ border-top:0; padding-top:0; }
  .fact-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:6px; }
  .fact-grid .ft{ background:var(--panel); padding:18px 16px; }
  .fact-grid .ft span{ display:block; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:6px; }
  .fact-grid .ft b{ font-size:0.98rem; color:var(--cream); }
  @media (max-width:700px){ .fact-grid{ grid-template-columns:1fr 1fr; } }
  .upgrade-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
  .upgrade-chips span{ font-size:0.78rem; padding:8px 14px; border-radius:100px; border:1px solid var(--line-strong); color:var(--muted); }
  .iguide-frame{
    border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10;
    background:var(--panel); display:flex; align-items:center; justify-content:center; position:relative;
  }
  .iguide-frame iframe{ width:100%; height:100%; border:0; }
  .iguide-empty{ text-align:center; color:var(--muted-dim); font-size:0.85rem; padding:0 30px; }
  .fp-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
  .fp-grid img, .fp-grid .fp-img{
    border-radius:10px; border:1px solid var(--line); aspect-ratio:4/3; background-size:contain; background-repeat:no-repeat; background-position:center;
  }

  /* Sticky contact card for listing */
  .listing-sidebar{ position:sticky; top:104px; display:flex; flex-direction:column; gap:20px; }
  .agent-mini{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .agent-mini .faces .face{ width:44px; height:44px; border-radius:50%; border:2px solid var(--panel); background-size:cover; background-position:center top; }
  .agent-mini .faces .face + .face{ margin-left:-14px; }
  .agent-mini span{ font-size:0.78rem; color:var(--muted); }
  .agent-mini b{ display:block; font-size:0.9rem; color:var(--cream); }

  /* ============ INTERNAL ADMIN TOOL ============ */
  .admin-shell{ min-height:100vh; background:var(--bg); }
  .admin-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 30px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; background:rgba(12,11,9,0.92); backdrop-filter:blur(10px);
  }
  .admin-badge{ font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim); border:1px solid var(--line-strong); padding:5px 11px; border-radius:100px; }
  .admin-wrap{ max-width:1200px; margin:0 auto; padding:44px 30px 100px; }
  .admin-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:30px; }
  .admin-head h1, .admin-head h2{ font-size:1.7rem; }
  .admin-tabs{ display:flex; gap:8px; margin-bottom:28px; }
  .admin-tabs button{
    font-size:0.8rem; padding:9px 18px; border-radius:100px; border:1px solid var(--line-strong); color:var(--muted);
    transition:all .2s ease; display:flex; align-items:center; gap:8px;
  }
  .admin-tabs button svg{ width:13px; height:13px; stroke:currentColor; flex-shrink:0; }
  .admin-tabs button .ct{ font-size:0.68rem; background:rgba(243,238,226,0.1); padding:1px 7px; border-radius:100px; }
  .admin-tabs button.active{ background:var(--gold); border-color:var(--gold); color:#161310; }
  .admin-tabs button.active .ct{ background:rgba(22,19,16,0.18); color:#161310; }

  .admin-table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
  .admin-table thead th{ text-align:left; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-dim); padding:0 16px 8px; }
  .admin-row{ background:var(--panel); }
  .admin-row td{ padding:14px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:0.86rem; vertical-align:middle; }
  .admin-row td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; }
  .admin-row td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
  .admin-thumb{ width:54px; height:44px; border-radius:7px; background-size:cover; background-position:center; }
  .admin-row .addr b{ display:block; color:var(--cream); }
  .admin-row .addr span{ font-size:0.76rem; color:var(--muted-dim); }
  .admin-actions{ display:flex; gap:8px; }
  .icon-btn{
    width:32px; height:32px; border-radius:8px; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
  }
  .icon-btn:hover{ border-color:var(--gold); }
  .icon-btn svg{ width:14px; height:14px; stroke:var(--muted); }
  .icon-btn:hover svg{ stroke:var(--gold-bright); }
  .icon-btn.danger:hover{ border-color:#b5544a; }
  .icon-btn.danger:hover svg{ stroke:#e08a80; }
  .admin-empty{ text-align:center; padding:60px 20px; color:var(--muted-dim); }

  /* Admin form */
  .admin-form-shell{ display:grid; grid-template-columns:1fr 0.7fr; gap:40px; align-items:start; }
  .af-section{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px 30px; margin-bottom:20px; }
  .af-section h3{ font-size:0.95rem; margin-bottom:18px; display:flex; align-items:center; gap:9px; }
  .af-section h3 svg{ width:16px; height:16px; stroke:var(--gold); }
  .af-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .af-grid .full{ grid-column:1 / -1; }
  .af-label{ display:block; font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:7px; }
  .segmented{ display:flex; gap:8px; }
  .segmented button{
    flex:1; padding:11px; border-radius:9px; border:1px solid var(--line-strong); font-size:0.82rem; color:var(--muted);
    transition:all .2s ease;
  }
  .segmented button.sel-coming-soon.active{ background:var(--gold-dim); border-color:var(--gold-line); color:var(--gold-bright); }
  .segmented button.sel-active.active{ background:var(--gold); border-color:var(--gold); color:#161310; }
  .segmented button.sel-sold.active{ background:#2a2620; border-color:var(--gold-line); color:var(--gold-bright); }
  .img-url-row{ display:flex; gap:10px; align-items:center; margin-bottom:9px; }
  .img-url-row input{ flex:1; }
  .img-url-row .thumb-prev{ width:52px; height:40px; border-radius:6px; background-size:cover; background-position:center; border:1px solid var(--line-strong); flex-shrink:0; }
  .img-url-row .hero-star{
    width:36px; height:36px; border-radius:8px; border:1px solid var(--line-strong); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:all .2s ease;
  }
  .img-url-row .hero-star.is-hero{ background:var(--gold); border-color:var(--gold); }
  .img-url-row .hero-star svg{ width:15px; height:15px; stroke:var(--muted); }
  .img-url-row .hero-star.is-hero svg{ stroke:#161310; fill:#161310; }
  .img-url-row .icon-btn{ flex-shrink:0; }
  .link-preview-box{
    background:var(--gold-dim); border:1px solid var(--gold-line); border-radius:10px; padding:16px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;
  }
  .link-preview-box span{ font-size:0.8rem; color:var(--gold-bright); word-break:break-all; }
  .link-preview-box button{ flex-shrink:0; font-size:0.72rem; font-weight:700; color:#161310; background:var(--gold); padding:8px 14px; border-radius:8px; white-space:nowrap; }
  .af-note{ font-size:0.72rem; color:var(--muted-dim); margin-top:8px; line-height:1.55; }
  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:var(--gold); color:#161310; font-size:0.82rem; font-weight:600;
    padding:13px 22px; border-radius:100px; z-index:500; transition:all .3s var(--ease); pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  @media (max-width:900px){ .admin-form-shell{ grid-template-columns:1fr; } .af-grid{ grid-template-columns:1fr; } }
  @media (max-width:900px){ .listing-layout{ grid-template-columns:1fr; } .listing-sidebar{ position:static; } }

  /* ================================================== */
  /* V9: LISTING PAGE — WHITE THEME + SKELETON PHOTOS   */
  /* ================================================== */
  body.listing-page{ background:#FFFFFF; }
  body.listing-page .grain{ opacity:0.015; }

  /* Base text/section colors for the listing content area (header/footer stay dark) */
  body.listing-page .listing-hero,
  body.listing-page .listing-content{ background:#FFFFFF; color:#22201C; }
  body.listing-page .listing-hero{ border-bottom:1px solid #E7E4DC; }
  body.listing-page .listing-hero h1{ color:#1A1816; }
  body.listing-page .lh-loc{ color:#6B6659; }
  body.listing-page .lh-price{ color:#B5842E; }
  body.listing-page .lh-share button{ border-color:#DFDACD; }
  body.listing-page .lh-share button svg{ stroke:#3A362E; }
  body.listing-page .lh-share button:hover{ border-color:var(--gold); }
  body.listing-page .spec-row .spec{ color:#1A1816; }
  body.listing-page .spec-row .spec span{ color:#847E6E; }
  body.listing-page .spec-row .spec svg{ stroke:#B5842E; }
  body.listing-page .status-pill.coming-soon{ background:#FCF4E4; border-color:#E8CE9B; color:#9A6F1E; }
  body.listing-page .status-pill.sold{ background:#22201C; color:#E9C77E; border-color:#22201C; }

  body.listing-page .listing-block{ border-color:#E7E4DC; }
  body.listing-page .listing-main h2{ color:#1A1816; }
  body.listing-page .desc{ color:#4A4638; }
  body.listing-page .read-more-toggle{ color:#B5842E; font-size:0.85rem; font-weight:600; margin-top:4px; }
  body.listing-page .upgrade-chips span{ border-color:#DFDACD; color:#4A4638; background:#FAF8F3; }
  body.listing-page .fact-grid{ background:#E7E4DC; border-color:#E7E4DC; }
  body.listing-page .fact-grid .ft{ background:#FFFFFF; }
  body.listing-page .fact-grid .ft span{ color:#9A9484; }
  body.listing-page .fact-grid .ft b{ color:#1A1816; }
  body.listing-page .iguide-empty{ color:#9A9484; }
  body.listing-page .af-note{ color:#9A9484; }
  body.listing-page .map-frame{ border-color:#E7E4DC; }
  body.listing-page .fp-grid .fp-img{ border-color:#E7E4DC; }
  body.listing-page .iguide-frame{ border-color:#E7E4DC; background:#FAF8F3; }
  body.listing-page .map-note{ background:rgba(255,255,255,0.9); color:#4A4638; border-color:#E7E4DC; }

  /* Sidebar cards */
  body.listing-page .listing-sidebar .form-card,
  body.listing-page .price-card{
    background:#FFFFFF; border:1px solid #E7E4DC; box-shadow:0 10px 30px -18px rgba(20,18,14,0.15);
  }
  body.listing-page .form-card h3{ color:#1A1816; }
  body.listing-page .form-card .sub{ color:#847E6E; }
  body.listing-page .form-card .micro{ color:#9A9484; }
  body.listing-page .agent-mini b{ color:#1A1816; }
  body.listing-page .agent-mini span{ color:#847E6E; }
  body.listing-page .field{ background:#FAF8F3; border-color:#DFDACD; color:#1A1816; }
  body.listing-page .field::placeholder{ color:#A29C8C; }
  body.listing-page .field:focus{ border-color:var(--gold); background:#FFFFFF; }
  body.listing-page .btn-outline{ color:#1A1816; border-color:#DFDACD; }
  body.listing-page .btn-outline:hover{ border-color:var(--gold); color:#9A6F1E; }
  body.listing-page .price-card .pc-label{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#847E6E; }
  body.listing-page .price-card .pc-price{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.9rem; color:#1A1816; margin:6px 0 16px; }

  /* Skeleton placeholder photos, used until real listing photos exist */
  .skel{
    position:relative; background:#E9E7E1;
    background-image:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    background-size:250% 100%;
    animation:skelShimmer 2.6s ease-in-out infinite;
  }
  @keyframes skelShimmer{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }
  .skel .skel-icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .skel .skel-icon svg{ width:26px; height:26px; stroke:#B7B2A4; }
  .skel .skel-label{
    position:absolute; left:0; right:0; bottom:14px; text-align:center;
    font-size:0.66rem; letter-spacing:0.05em; color:#9A9484;
  }
  .gallery-grid .g-item.skel:hover{ filter:none; }
  .gallery-grid .g-view-all{
    position:absolute; right:16px; bottom:16px; z-index:3;
    background:#FFFFFF; color:#1A1816; font-size:0.78rem; font-weight:600;
    padding:9px 16px; border-radius:100px; display:flex; align-items:center; gap:7px;
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.35);
  }
  .gallery-grid .g-view-all svg{ width:14px; height:14px; stroke:#1A1816; }
  .lightbox-skel-note{ color:#D8D3C6; font-size:0.85rem; text-align:center; }

  @media (max-width:900px){
    body.listing-page .listing-layout{ grid-template-columns:1fr; }
  }

  /* ================================================== */
  /* V10: HERO IMAGE, 20-BOX GALLERY, ADMIN DND + TRASH */
  /* ================================================== */

  /* ---- Listing hero: the listing's own photos, rotating ---- */
  /* Until the photos arrive this is a shimmering skeleton, which is also what a
     listing with no photos at all keeps showing. */
  body.listing-page .listing-hero{
    position:relative; min-height:50vh; display:flex; align-items:center;
    padding:60px 0 44px; border-bottom:0; overflow:hidden;
    background-color:#DAD6CC;
    background-image:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
    background-size:250% 100%;
    animation:heroSkelShimmer 3.2s ease-in-out infinite;
  }
  @keyframes heroSkelShimmer{
    0%{ background-position:180% 0; }
    100%{ background-position:-80% 0; }
  }
  /* Real photos are in: the skeleton has done its job. */
  body.listing-page .listing-hero.has-photos{
    animation:none; background-image:none; background-color:#0A0907;
  }
  .lh-media{ position:absolute; inset:0; }
  .lh-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    /* Listing photos run from dim interiors to blown-out snow. Knocking them
       back here means the headline sits on a predictable base whatever the
       agent uploaded, instead of being legible on one photo and not the next. */
    filter:saturate(0.92) brightness(0.72);
    opacity:0; transition:opacity 1.1s ease;
  }
  .lh-slide.on{ opacity:1; }
  /* Sits above the photos so the copy stays readable on any of them. The second
     layer is for the breadcrumb, which would otherwise sit on open sky. */
  .lh-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(to top, rgba(10,9,7,0.90) 0%, rgba(10,9,7,0.74) 40%, rgba(10,9,7,0.48) 72%, rgba(10,9,7,0.40) 100%),
      linear-gradient(to bottom, rgba(10,9,7,0.55) 0%, rgba(10,9,7,0.10) 34%);
  }
  @media (prefers-reduced-motion: reduce){
    .lh-slide{ transition:none; }
  }
  body.listing-page .listing-hero .wrap{ position:relative; width:100%; }
  body.listing-page .listing-hero h1{ color:#FFFFFF; }
  body.listing-page .lh-loc{ color:rgba(255,255,255,0.72); }
  body.listing-page .lh-price{ color:var(--gold-bright); }
  body.listing-page .lh-share button{ border-color:rgba(255,255,255,0.35); }
  body.listing-page .lh-share button svg{ stroke:#FFFFFF; }
  body.listing-page .lh-share button:hover{ border-color:var(--gold); }
  body.listing-page .spec-row .spec{ color:#FFFFFF; }
  body.listing-page .spec-row .spec span{ color:rgba(255,255,255,0.65); }
  body.listing-page .spec-row .spec svg{ stroke:var(--gold-bright); }
  body.listing-page .crumbs a{ color:rgba(255,255,255,0.68); }
  body.listing-page .crumbs a:hover{ color:var(--gold-bright); }
  body.listing-page .crumbs span:not(.sep){ color:rgba(255,255,255,0.9); }
  body.listing-page .crumbs .sep{ color:rgba(255,255,255,0.35); }
  @media (max-width:700px){
    body.listing-page .listing-hero{ min-height:42.5vh; padding:40px 0 30px; }
  }

  /* ---- Uniform 20 box gallery grid ---- */
  .gallery-grid-20{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;
  }
  .gallery-grid-20 .g-item{
    aspect-ratio:1/1; border-radius:10px; cursor:pointer;
    position:relative; background-size:cover; background-position:center;
    filter:saturate(0.88) brightness(0.94); transition:filter .3s ease, transform .3s ease;
  }
  .gallery-grid-20 .g-item:hover{ filter:saturate(1) brightness(1); transform:translateY(-2px); }
  .gallery-grid-20 .g-item.skel .skel-icon svg{ width:18px; height:18px; }
  .gallery-view-all{
    margin-top:16px; width:100%; justify-content:center;
    background:transparent; border:1px solid #DFDACD; color:#1A1816;
    font-size:0.85rem; font-weight:600; padding:13px; border-radius:12px;
    display:flex; align-items:center; gap:9px; transition:border-color .2s ease;
  }
  .gallery-view-all:hover{ border-color:var(--gold); color:#9A6F1E; }
  .gallery-view-all svg{ width:15px; height:15px; stroke:currentColor; }
  @media (max-width:900px){ .gallery-grid-20{ grid-template-columns:repeat(4, 1fr); } }
  @media (max-width:640px){ .gallery-grid-20{ grid-template-columns:repeat(3, 1fr); } }

  /* ---- Admin: drag and drop photo manager ---- */
  .photo-dropzone{
    border:1.5px dashed var(--line-strong); border-radius:12px; padding:26px;
    text-align:center; margin-bottom:18px; transition:all .2s ease; cursor:pointer;
  }
  .photo-dropzone.drag-over{ border-color:var(--gold); background:var(--gold-dim); }
  .photo-dropzone svg{ width:22px; height:22px; stroke:var(--muted); margin-bottom:8px; }
  .photo-dropzone p{ font-size:0.82rem; color:var(--muted); }
  .photo-dropzone p b{ color:var(--gold-bright); }
  .photo-dropzone input[type="file"]{ display:none; }

  .photo-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:12px;
  }
  .photo-tile{
    position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
    border:1px solid var(--line-strong); background-size:cover; background-position:center;
    background-color:var(--panel-2); cursor:grab; transition:transform .2s ease, box-shadow .2s ease;
  }
  .photo-tile:active{ cursor:grabbing; }
  .photo-tile.dragging{ opacity:0.35; }
  .photo-tile.drag-target{ box-shadow:0 0 0 2px var(--gold) inset; }
  .photo-tile .pt-top{
    position:absolute; top:6px; left:6px; right:6px; display:flex; justify-content:space-between; z-index:2;
  }
  .photo-tile .pt-hero-badge{
    font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    background:var(--gold); color:#161310; padding:3px 8px; border-radius:100px;
    opacity:0; transition:opacity .2s ease;
  }
  .photo-tile.is-hero .pt-hero-badge{ opacity:1; }
  .photo-tile .pt-remove{
    width:22px; height:22px; border-radius:50%; background:rgba(12,11,9,0.65); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; margin-left:auto;
  }
  .photo-tile .pt-remove svg{ width:11px; height:11px; stroke:#fff; }
  .photo-tile .pt-bottom{
    position:absolute; left:6px; right:6px; bottom:6px; z-index:2;
    display:flex; justify-content:space-between; align-items:flex-end;
  }
  .photo-tile .pt-star{
    width:26px; height:26px; border-radius:50%; background:rgba(12,11,9,0.55); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
  }
  .photo-tile.is-hero .pt-star{ background:var(--gold); }
  .photo-tile .pt-star svg{ width:12px; height:12px; stroke:#fff; }
  .photo-tile.is-hero .pt-star svg{ stroke:#161310; fill:#161310; }
  .photo-tile .pt-drag{
    width:22px; height:22px; border-radius:6px; background:rgba(12,11,9,0.5); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
  }
  .photo-tile .pt-drag svg{ width:12px; height:12px; stroke:#fff; }
  .photo-tile-add{
    aspect-ratio:1/1; border-radius:10px; border:1.5px dashed var(--line-strong);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--muted-dim); font-size:0.7rem; transition:all .2s ease;
  }
  .photo-tile-add:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .photo-tile-add svg{ width:18px; height:18px; stroke:currentColor; }

  /* ---- Admin: trash tab ---- */
  .admin-row.is-trashed{ opacity:0.65; }
  .status-pill.trashed{ background:rgba(180,84,74,0.14); color:#D98276; border:1px solid rgba(180,84,74,0.35); }

  /* ---- Admin: link preview box ---- */
  .link-preview-box{ flex-direction:column; align-items:stretch; gap:10px; }
  .link-preview-box .lp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .link-preview-box .lp-url{
    font-size:0.82rem; color:var(--gold-bright); font-family:monospace;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
  }
  .link-preview-box .lp-note{ font-size:0.68rem; color:var(--muted-dim); line-height:1.5; }

  /* ================================================== */
  /* V9: BUYER PAGE COMPONENTS                          */
  /* Built for buying.html. Every class here is new, so  */
  /* no existing page picks any of it up.                */
  /* ================================================== */

  /* Credibility strip under the hero. Four plain facts, no invented numbers. */
  .proof-bar{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; max-width:1000px; margin:0 auto;
  }
  .proof-item{ background:var(--bg); padding:26px 22px; text-align:center; }
  .proof-item b{
    display:block; font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:1.45rem; color:var(--gold-bright); margin-bottom:6px; letter-spacing:-0.01em;
  }
  .proof-item span{ font-size:0.78rem; color:var(--muted); line-height:1.5; display:block; }
  @media (max-width:820px){
    .proof-bar{ grid-template-columns:repeat(2, 1fr); }
  }

  /* The two of them, side by side, because the pairing is the pitch. */
  .duo-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .duo-card{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:18px;
    padding:36px 34px; transition:border-color .3s ease, transform .3s var(--ease);
  }
  .duo-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .duo-card .duo-role{
    display:inline-block; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-bright); border:1px solid var(--gold-line); background:var(--gold-dim);
    padding:6px 12px; border-radius:100px; margin-bottom:18px;
  }
  .duo-card h3{ font-size:1.45rem; margin-bottom:6px; }
  .duo-card .duo-what{ font-size:0.82rem; color:var(--gold-bright); margin-bottom:16px; display:block; }
  .duo-card p{ font-size:0.93rem; color:var(--muted); line-height:1.72; margin-bottom:14px; }
  .duo-card p:last-child{ margin-bottom:0; }
  @media (max-width:820px){ .duo-split{ grid-template-columns:1fr; } }


  /* Tools and resources, as things you can actually go and use. */
  .res-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; }
  .res-card{
    display:flex; flex-direction:column; gap:10px;
    background:var(--panel); border:1px solid var(--line-strong); border-radius:16px;
    padding:30px 28px; transition:border-color .3s ease, transform .3s var(--ease);
  }
  .res-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .res-card .icon-wrap{
    width:42px; height:42px; border-radius:11px; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; margin-bottom:6px;
    transition:background .3s ease;
  }
  .res-card:hover .icon-wrap{ background:var(--gold-dim); }
  .res-card .icon-wrap svg{ width:18px; height:18px; stroke:var(--gold); }
  .res-card h4{ font-size:1.08rem; }
  .res-card p{ font-size:0.87rem; color:var(--muted); line-height:1.6; flex:1; }
  .res-card .res-go{
    font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--gold-bright); font-weight:600; display:inline-flex; align-items:center; gap:7px;
  }
  .res-card .res-go svg{ width:13px; height:13px; stroke:var(--gold-bright); transition:transform .3s var(--ease); }
  .res-card:hover .res-go svg{ transform:translateX(4px); }

  /* Where they actually work, as a way in rather than a list of links. */
  .place-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  .place-card{
    position:relative; min-height:290px; border-radius:16px; overflow:hidden;
    border:1px solid var(--line-strong); display:flex; align-items:flex-end;
    background-size:cover; background-position:center;
    transition:transform .35s var(--ease), border-color .3s ease;
  }
  .place-card:hover{ transform:translateY(-5px); border-color:var(--gold-line); }
  .place-card::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(12,11,9,0.94) 12%, rgba(12,11,9,0.45) 60%, rgba(12,11,9,0.15) 100%);
  }
  .place-card .place-body{ position:relative; z-index:2; padding:26px 24px; }
  .place-card h4{ font-size:1.25rem; margin-bottom:6px; }
  .place-card p{ font-size:0.84rem; color:var(--muted); line-height:1.55; }
  /* The text sits on the photograph's dark fade, so it keeps the dark-section
     colours even when the card is used on the light band, where the section
     defaults painted it near-black on near-black. */
  section.light .place-card h4{ color:var(--cream); }
  section.light .place-card p{ color:var(--muted); }
  @media (max-width:860px){ .place-grid{ grid-template-columns:1fr; } }

  /* ================================================== */
  /* V10: EDITORIAL LAYOUT SYSTEM                       */
  /* Built on buying.html first, then rolled out. Same   */
  /* palette as everything else — this is structure and  */
  /* rhythm, not new colour. All class names are new.    */
  /* ================================================== */

  /* --- Section rhythm. Consecutive sections should not
         breathe identically or the page reads as one block. --- */
  .sec-air{ padding:150px 0; }
  .sec-air-sm{ padding:100px 0; }
  .sec-flush-top{ padding-top:0; }
  .rule-top{ border-top:1px solid var(--line); }

  /* --- Eyebrow with a rule running off it --- */
  .eyebrow-rule{
    display:inline-flex; align-items:center; gap:16px;
    font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold-bright); font-weight:600; margin-bottom:22px;
  }
  .eyebrow-rule::after{ content:''; width:54px; height:1px; background:var(--gold-line); }
  .eyebrow-rule.centered{ justify-content:center; }
  .eyebrow-rule.centered::before{ content:''; width:54px; height:1px; background:var(--gold-line); }
  section.light .eyebrow-rule{ color:#8A6A2F; }
  section.light .eyebrow-rule::after, section.light .eyebrow-rule::before{ background:rgba(138,106,47,0.35); }

  /* --- A card that breaks the boundary between two sections.
         The single most repeated device in the references. --- */
  .overlap{ position:relative; z-index:5; margin-top:-78px; }
  @media (max-width:760px){ .overlap{ margin-top:-46px; } }

  /* --- Heading left, supporting line right. Stops every section
         head being centred. --- */
  .head-split{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px;
    align-items:end; margin-bottom:64px;
  }
  .head-split h2{ font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-0.025em; line-height:1.12; }
  .head-split p{ font-size:0.97rem; color:var(--muted); line-height:1.75; }
  @media (max-width:860px){ .head-split{ grid-template-columns:1fr; gap:24px; } }

  /* --- One large statement, lots of air around it. Used to slow
         the page down between dense sections. --- */
  .statement{
    max-width:880px; margin:0 auto; text-align:center;
    font-family:'Bricolage Grotesque'; font-weight:500;
    font-size:clamp(1.15rem,2.15vw,1.6rem); line-height:1.55; letter-spacing:-0.012em;
    color:var(--cream);
  }
  .statement em{ font-style:normal; color:var(--gold-bright); }
  .statement .fade{ color:var(--muted); }
  /* For a statement short enough to land on one line. It breaks in two at the
     default size, which reads as two half thoughts rather than one sentence.
     Still wraps below roughly 1000px, where one line stops being possible. */
  .statement.one-line{
    max-width:960px;
    font-size:clamp(1.05rem, 1.95vw, 1.45rem);
  }

  /* --- Numbered rows on hairlines. Reads as considered rather than
         as another grid of cards. --- */
  .num-list{ border-top:1px solid var(--line); }
  .num-row{
    position:relative; display:grid; grid-template-columns:52px 56px 1fr; gap:24px;
    padding:34px 0; border-bottom:1px solid var(--line);
    align-items:start;
  }
  /* Hover paints, it never reflows. The wash and the rail are both absolutely
     positioned so nothing in the row can be nudged out of place. */
  .num-row::before{
    content:''; position:absolute; inset:0 -20px; border-radius:12px;
    background:linear-gradient(90deg, rgba(201,164,92,0.07) 0%, rgba(201,164,92,0) 65%);
    opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
  }
  .num-row::after{
    content:''; position:absolute; left:-20px; top:12px; bottom:12px; width:2px;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    border-radius:2px; transform:scaleY(0); transform-origin:top;
    transition:transform .38s var(--ease);
  }
  .num-row:hover::before{ opacity:1; }
  .num-row:hover::after{ transform:scaleY(1); }
  .num-row .n{
    position:relative; font-family:'Bricolage Grotesque'; font-weight:600; font-size:0.82rem;
    letter-spacing:0.12em; color:var(--gold); padding-top:16px;
  }
  /* Icon per step. A wall of text is a bounce. */
  .num-icon{
    position:relative; width:52px; height:52px; border-radius:14px;
    border:1px solid var(--line-strong);
    background:linear-gradient(150deg, rgba(201,164,92,0.12) 0%, rgba(201,164,92,0.02) 70%);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .35s ease, box-shadow .35s ease;
  }
  .num-icon svg{ width:21px; height:21px; stroke:var(--gold-bright); fill:none; }
  .num-row:hover .num-icon{ border-color:var(--gold-line); box-shadow:0 0 26px -8px rgba(201,164,92,0.55); }
  .num-row .row-body{ position:relative; display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:baseline; }
  .num-row h4{ font-size:1.28rem; letter-spacing:-0.015em; }
  .num-row p{ font-size:0.93rem; color:var(--muted); line-height:1.72; }
  @media (max-width:820px){
    .num-row{ grid-template-columns:38px 44px 1fr; gap:14px; }
    .num-icon{ width:44px; height:44px; border-radius:12px; }
    .num-icon svg{ width:18px; height:18px; }
    .num-row .n{ padding-top:13px; }
    .num-row .row-body{ grid-template-columns:1fr; gap:10px; }
  }

  /* --- Anchored heading on the left, content scrolling past on the
         right. Gives long sections somewhere to rest. --- */
  .split-anchor{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:76px; align-items:start; }
  .split-anchor .anchor-col{ position:sticky; top:112px; }
  .split-anchor .anchor-col h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.15; letter-spacing:-0.025em; }
  .split-anchor .anchor-col p{ font-size:0.95rem; color:var(--muted); line-height:1.75; margin-top:18px; }
  @media (max-width:900px){
    .split-anchor{ grid-template-columns:1fr; gap:40px; }
    .split-anchor .anchor-col{ position:static; }
  }

  /* --- The pairing, as two editorial rows rather than two identical
         cards sitting side by side. --- */
  .pair-row{
    /* A wider portrait column, and the text centred against it rather than
       hanging off the top. Two short paragraphs beside a tall card left a
       block of dead space underneath them. */
    display:grid; grid-template-columns:0.86fr 1.14fr; gap:56px;
    padding:52px 0; border-bottom:1px solid var(--line); align-items:center;
  }
  .pair-row:first-child{ border-top:1px solid var(--line); }
  .pair-name{ font-size:1.75rem; letter-spacing:-0.02em; margin-bottom:8px; }
  .pair-role{
    font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--gold-bright); display:block;
  }
  .pair-mark{
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:2.6rem;
    color:var(--gold-dim); line-height:1; margin-bottom:16px;
    -webkit-text-stroke:1px var(--gold-line); color:transparent;
  }
  .pair-row .pair-body p{ font-size:1.02rem; color:var(--muted); line-height:1.8; margin-bottom:16px; }
  .pair-row .pair-body p:last-child{ margin-bottom:0; }
  .pair-row .pair-body strong{ color:var(--cream); font-weight:600; }
  @media (max-width:820px){ .pair-row{ grid-template-columns:1fr; gap:20px; padding:40px 0; } }

  /* --- Quote cards, three across, instead of one rotating quote. --- */
  .quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .quote-card{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:16px;
    padding:34px 30px; display:flex; flex-direction:column; gap:18px;
    transition:border-color .3s ease, transform .3s var(--ease);
  }
  .quote-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
  .quote-card .qm{
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:2.4rem;
    color:var(--gold-line); line-height:0.8; height:22px;
  }
  .quote-card p{ font-size:0.94rem; line-height:1.72; color:var(--cream); flex:1; }
  .quote-who{ display:flex; align-items:center; gap:12px; padding-top:6px; border-top:1px solid var(--line); }
  .quote-who .av{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--gold-dim); border:1px solid var(--gold-line);
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque'; font-weight:600; font-size:0.78rem; color:var(--gold-bright);
  }
  .quote-who b{ display:block; font-size:0.88rem; color:var(--cream); }
  .quote-who span{ font-size:0.72rem; color:var(--muted-dim); }
  @media (max-width:900px){ .quote-grid{ grid-template-columns:1fr; } }

  /* --- A closing band that is a destination, not another form. --- */
  .final-band{
    position:relative; overflow:hidden; border-radius:22px;
    border:1px solid var(--gold-line);
    background:linear-gradient(140deg, rgba(201,164,92,0.13) 0%, var(--panel) 58%);
    padding:70px 60px; text-align:center;
  }
  .final-band h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-0.025em; line-height:1.15; max-width:680px; margin:0 auto; }
  .final-band p{ font-size:1rem; color:var(--muted); line-height:1.7; max-width:560px; margin:18px auto 0; }
  .final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
  @media (max-width:620px){ .final-band{ padding:48px 24px; } }

  /* --- V10 on the light band. Hairlines and numerals are drawn in cream by
         default, which is invisible on cream. --- */
  section.light .num-list{ border-top-color:rgba(33,29,24,0.14); }
  section.light .num-row{ border-bottom-color:rgba(33,29,24,0.14); }
  /* The tint belongs on ::before, not on the row. On the row it was a square
     edged rectangle exactly the row's width, fading in at the same moment as
     the ::before wash, which is rounded and runs 20px wider. Two shapes
     appearing together read as a glitch down the left and right edges. */
  section.light .num-row::before{
    background:linear-gradient(90deg, rgba(138,106,47,0.10) 0%, rgba(138,106,47,0.02) 65%, rgba(138,106,47,0) 100%);
  }
  section.light .num-row .n{ color:#B98D4F; }
  section.light .head-split p{ color:#5E5749; }
  section.light .pair-row{ border-color:rgba(33,29,24,0.14); }
  section.light .pair-row .pair-body strong{ color:#211D18; }
  section.light .pair-role{ color:#8A6A2F; }
  section.light .statement{ color:#211D18; }
  section.light .statement .fade{ color:#5E5749; }
  section.light .statement em{ color:#8A6A2F; }
  section.light .quote-who{ border-top-color:rgba(33,29,24,0.14); }

  /* ================================================== */
  /* V11: CENTRED HEADS, CAROUSEL, AND THE POLISH PASS  */
  /* ================================================== */

  /* --- Section head, centred. Replaces the left/right split, which left
         people unsure which column to read first. --- */
  .head-center{ max-width:760px; margin:0 auto 92px; text-align:center; }
  .head-center h2{
    font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-0.025em; line-height:1.14;
  }
  .head-center p{
    font-size:0.99rem; color:var(--muted); line-height:1.75; margin:24px auto 0; max-width:620px;
  }
  section.light .head-center p{ color:#5E5749; }

  /* --- Horizontal card rail with arrows. Holds any number of cards. --- */
  .rail{ position:relative; }
  /* Flex, not grid. A percentage grid track inside a horizontal scroll
     container resolves circularly — the track sizes to the content and the
     content sizes to the track — and the cards collapse to a fraction of
     their width while blowing out in height. A flex-basis percentage resolves
     against the container's real inner width, which is what we want. */
  .rail-track{
    display:flex; align-items:stretch;
    gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; padding-bottom:6px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .rail-track::-webkit-scrollbar{ display:none; }
  .rail-track > *{ flex:0 0 min(84%, 360px); scroll-snap-align:start; }
  /* Three across on a desktop, the rest waiting off the right edge. */
  @media (min-width:1000px){ .rail-track > *{ flex-basis:calc((100% - 40px) / 3); } }
  .rail-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:34px; }
  .rail-nav .btn-icon{ width:46px; height:46px; }
  .rail-nav .btn-icon svg{ width:18px; height:18px; }
  /* Review cards in a rail do not respond to hover. They are something you
     scroll past, not something you pick, and a card lifting under the cursor
     while the track is moving reads as a glitch. Cards that are actually
     links, like the tour cards, keep theirs. */
  .rail-track .quote-card,
  .rail-track .quote-card:hover{
    transform:none; border-color:var(--line-strong); transition:none;
    box-shadow:0 1px 0 rgba(243,238,226,0.03) inset;
  }

  /* --- Polish. Depth and light, applied lightly. --- */

  /* A soft pool of light behind a section, so flat black stops being flat. */
  .glow{ position:relative; }
  .glow::before{
    content:''; position:absolute; left:50%; top:-10%; transform:translateX(-50%);
    width:min(1100px, 120%); height:70%; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse at center, rgba(201,164,92,0.10) 0%, rgba(201,164,92,0.03) 38%, transparent 70%);
  }
  .glow > *{ position:relative; z-index:1; }

  /* Hairline that fades out at both ends instead of stopping dead. */
  .rule-fade{
    height:1px; border:0; margin:0;
    background:linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
  }

  /* A lit top edge on panels, the way a real material catches light. */
  .lit-edge{ position:relative; }
  .lit-edge::after{
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(232,199,126,0.55), transparent);
  }

  /* Cards lift into a warm glow rather than just moving up. */
  .biz-card, .res-card, .quote-card, .duo-card{
    box-shadow:0 1px 0 rgba(243,238,226,0.03) inset;
  }
  .biz-card:hover, .res-card:hover, .quote-card:hover{
    box-shadow:0 24px 60px -30px rgba(0,0,0,0.9), 0 0 34px -18px rgba(201,164,92,0.45);
  }
  .place-card:hover{ box-shadow:0 26px 64px -30px rgba(0,0,0,0.95), 0 0 40px -20px rgba(201,164,92,0.5); }

  /* The proof bar reads as one machined object rather than four boxes. */
  .proof-bar{
    background:linear-gradient(180deg, rgba(26,24,21,0.96) 0%, rgba(18,17,15,0.96) 100%);
    box-shadow:0 30px 70px -34px rgba(0,0,0,0.95);
    backdrop-filter:blur(8px);
  }
  .proof-item{ background:transparent; position:relative; }
  .proof-item + .proof-item::before{
    content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px;
    background:linear-gradient(180deg, transparent, var(--line-strong), transparent);
  }
  @media (max-width:820px){ .proof-item + .proof-item::before{ display:none; } }

  /* --- PILLARS. Centred icon tile, short heading, a few lines, fading
         dividers between. This is the treatment that reads best on the page,
         so it is the default for any "here are the N reasons" section. --- */
  .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; max-width:1060px; margin:0 auto; }
  .pillar{ position:relative; text-align:center; padding:0 8px; }
  .pillar + .pillar::before{
    content:''; position:absolute; left:-22px; top:6%; bottom:6%; width:1px;
    background:linear-gradient(180deg, transparent, var(--line-strong), transparent);
  }
  .pillar-icon{
    width:58px; height:58px; margin:0 auto 20px; border-radius:16px;
    border:1px solid var(--gold-line);
    background:linear-gradient(150deg, rgba(201,164,92,0.16) 0%, rgba(201,164,92,0.03) 70%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 30px -12px rgba(201,164,92,0.5);
  }
  .pillar-icon svg{ width:23px; height:23px; stroke:var(--gold-bright); fill:none; }
  .pillar h4{ font-size:1.12rem; margin-bottom:10px; letter-spacing:-0.01em; }
  .pillar p{ font-size:0.9rem; color:var(--muted); line-height:1.72; }
  @media (max-width:860px){
    .pillars{ grid-template-columns:1fr; gap:38px; }
    .pillar + .pillar::before{ left:12%; right:12%; top:-19px; bottom:auto; width:auto; height:1px;
      background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
  }

  /* Six pillars wrap onto a second row, so the divider must not appear at the
     start of each row. */
  .pillars.rows{ row-gap:56px; }
  .pillars.rows .pillar:nth-child(3n+1)::before{ display:none; }
  @media (max-width:860px){ .pillars.rows .pillar:nth-child(3n+1)::before{ display:block; } }

  /* Headshots. Shane's rule: the more of Ryan and Paul, the better. */
  /* The portrait is the card. Name and role sit on the photo, over a fade
     deep enough to read against any part of the image. */
  .pair-card{
    position:relative; display:flex; align-items:flex-end;
    width:100%; max-width:none; aspect-ratio:5/4;
    border-radius:18px; overflow:hidden;
    border:1px solid var(--line-strong);
    /* Both headshots are square with the face just above the middle. Centred
       on a 5:4 card that lands the face comfortably inside the frame; the old
       22% pushed it up under the top edge. */
    background-size:cover; background-position:center center;
    background-clip:padding-box;
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.95);
    transition:border-color .35s ease, box-shadow .35s ease;
  }
  .pair-card:hover{
    border-color:var(--gold-line);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.95), 0 0 44px -20px rgba(201,164,92,0.5);
  }
  .pair-card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(0deg,
      rgba(12,11,9,0.96) 0%,
      rgba(12,11,9,0.80) 22%,
      rgba(12,11,9,0.30) 48%,
      rgba(12,11,9,0.05) 72%,
      rgba(201,164,92,0.08) 100%);
  }
  .pair-card-body{ position:relative; z-index:2; padding:26px 24px; width:100%; }
  .pair-card .pair-name{ margin-bottom:6px; }
  .pair-card .pair-role{ letter-spacing:0.12em; }
  /* The caption sits on the photograph, not on the band behind it, so it keeps
     the dark-section colours wherever the card is used. Without this the
     homepage's light team section paints the name near-black over a dark fade
     and the role in the dark gold meant for cream backgrounds. */
  section.light .pair-card .pair-name{ color:var(--cream); }
  section.light .pair-card .pair-role{ color:var(--gold-bright); }
  @media (max-width:820px){ .pair-card{ max-width:340px; aspect-ratio:4/3; } }

  /* Section level call to action. Most sections get one, and they all say the
     same thing, so the action never has to be re-learned. */
  .sec-cta{ text-align:center; margin-top:56px; }

  /* The photo must not paint under the border, or a hairline of it shows
     around the overlay at every edge. */
  .place-card{ background-clip:padding-box; }

  /* ================================================== */
  /* V12: LIGHT FUNNEL                                  */
  /* Paid ad traffic bounces off a dark screen, so the   */
  /* two funnel pages can run light. Every funnel        */
  /* component already draws from the tokens below, so    */
  /* redefining them here flips the whole thing without   */
  /* touching a single component rule.                    */
  /* ================================================== */

  .funnel-light{
    --bg:#FFFFFF;
    --bg-alt:#F6F4EF;
    --panel:#FFFFFF;
    --panel-2:#FBFAF7;
    --cream:#1C1A17;                        /* body and heading text */
    --muted:#5E5749;
    --muted-dim:#756F61;                     /* was #8B8474, 3.72:1 on white */
    --line:rgba(28,26,23,0.10);
    --line-strong:rgba(28,26,23,0.16);
    /* Was #B08430, which is 3.39:1 on white and 3.09:1 on the off white band.
       This carries the wordmark and the inline links, both small text. */
    --gold:#8A6A2F;
    --gold-bright:#8A6A2F;
    --gold-dim:rgba(176,132,48,0.10);
    --gold-line:rgba(176,132,48,0.32);
    color:var(--cream);
    background:
      radial-gradient(ellipse 120% 80% at 50% -10%, #FFFFFF 0%, #FCFBF8 45%, #F4F1EA 100%);
  }
  /* The photo Shane drops in later replaces this gradient and nothing else. */
  .funnel-light .funnel-backdrop{ opacity:0.5; }
  .funnel-light .funnel-backdrop::after{
    background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.80) 45%, rgba(252,251,248,0.96) 100%);
  }
  .funnel-light .grain{ display:none; }
  .funnel-light .funnel-progress{ background:rgba(28,26,23,0.07); }
  /* Superseded by the .funnel-light .btn-gold rule further down, which is what
     actually paints; kept in step so the two never disagree. */
  .funnel-light .btn-gold{ color:#211D18; background:#C08A22; }
  .funnel-light .btn-gold:hover{ background:#D2A03A; box-shadow:0 12px 30px -10px rgba(169,121,31,0.45); }
  .funnel-light .btn-outline{ color:#1C1A17; border-color:rgba(28,26,23,0.22); }
  .funnel-light .btn-outline:hover{ border-color:#A9791F; color:#8A6A2F; }
  .funnel-light .field{ background:#FFFFFF; border-color:rgba(28,26,23,0.16); color:#1C1A17; }
  .funnel-light .field::placeholder{ color:#9C9585; }
  .funnel-light .field:focus{ border-color:#A9791F; box-shadow:0 0 0 4px rgba(169,121,31,0.10); }
  .funnel-light .f-opt{ background:#FFFFFF; border-color:rgba(28,26,23,0.14); color:#1C1A17; box-shadow:0 2px 10px -6px rgba(28,26,23,0.20); }
  .funnel-light .f-opt:hover{ border-color:#A9791F; box-shadow:0 12px 26px -14px rgba(28,26,23,0.35); }
  .funnel-light .f-opt.selected{ background:#C08A22; border-color:#C08A22; color:#211D18; }
  .funnel-light .f-opt.selected small{ color:rgba(33,29,24,0.66); }
  .funnel-light .f-badge{ background:rgba(176,132,48,0.10); border-color:rgba(176,132,48,0.35); color:#8A6A2F; }
  .funnel-light .f-badge svg{ stroke:#8A6A2F; }
  .funnel-light .form-card{ background:#FFFFFF; border-color:rgba(28,26,23,0.12); box-shadow:0 30px 70px -40px rgba(28,26,23,0.30); }
  .funnel-light .lm-success .ring{ border-color:rgba(176,132,48,0.35); background:rgba(176,132,48,0.10); }
  .funnel-light .lm-success .ring svg{ stroke:#8A6A2F; }
  .funnel-light .testi-slide, .funnel-light .quote-card{ background:#FFFFFF; border-color:rgba(28,26,23,0.12); }
  .funnel-light .f-trust svg{ stroke:#A9791F; }

  /* --- The one bar: address plus action, as one object --- */
  .hero-search{
    display:flex; align-items:stretch; gap:0;
    max-width:640px; margin:34px auto 0;
    background:#FFFFFF; border:1px solid rgba(28,26,23,0.16);
    border-radius:100px;
    /* No overflow:hidden here. It clipped the address suggestions, which are
       absolutely positioned inside this bar. The button rounds its own end. */
    box-shadow:0 24px 60px -34px rgba(28,26,23,0.42);
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .hero-search:focus-within{
    border-color:#A9791F;
    box-shadow:0 24px 60px -30px rgba(28,26,23,0.42), 0 0 0 4px rgba(169,121,31,0.10);
  }
  .hero-search .hs-field{
    flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0 6px 0 24px;
  }
  .hero-search .hs-field svg{ width:19px; height:19px; stroke:#A9791F; flex-shrink:0; }
  .hero-search input{
    flex:1; min-width:0; border:0; outline:none; background:transparent;
    font-family:'Inter'; font-size:1rem; color:#1C1A17; padding:20px 0;
  }
  .hero-search input::placeholder{ color:#9C9585; }
  .hero-search > button{
    flex-shrink:0; border:0; cursor:pointer; padding:0 34px;
    border-radius:0 100px 100px 0;
    background:#A9791F; color:#FFFFFF;
    font-family:'Inter'; font-weight:600; font-size:0.92rem; letter-spacing:0.01em;
    transition:background .3s ease;
  }
  .hero-search > button:hover{ background:#8A6A2F; }
  @media (max-width:620px){
    /* Stacked, the field is no longer the full bar, so anchor the suggestions
       to the bar itself. Otherwise they drop over the submit button. */
    .hero-search{ flex-direction:column; border-radius:20px; position:relative; }
    .hero-search .ac-wrap{ position:static; }
    .hero-search .ac-list{ top:calc(100% + 8px); }
    .hero-search .hs-field{ padding:4px 18px; }
    .hero-search > button{ padding:17px 24px; width:100%; border-radius:0 0 19px 19px; }
  }

  /* --- The glowing stroke that travels the edge --- */
  @property --edge-spin{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
  .glow-edge{ position:relative; isolation:isolate; }
  .glow-edge::before{
    content:''; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--edge-spin),
      transparent 0deg, transparent 268deg,
      rgba(232,199,126,0.65) 300deg, #E8C77E 330deg, rgba(232,199,126,0.65) 352deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:edgeSpin 5.5s linear infinite;
    pointer-events:none; z-index:2;
  }
  @keyframes edgeSpin{ to{ --edge-spin:360deg; } }
  .funnel-light .glow-edge::before{
    background:conic-gradient(from var(--edge-spin),
      transparent 0deg, transparent 268deg,
      rgba(169,121,31,0.45) 300deg, #C79A3A 330deg, rgba(169,121,31,0.45) 352deg,
      transparent 360deg);
  }
  @media (prefers-reduced-motion: reduce){ .glow-edge::before{ animation:none; } }

  /* --- Live review notice, lower left --- */
  .proof-toast{
    position:fixed; left:24px; bottom:24px; z-index:120; max-width:340px;
    display:flex; gap:14px; align-items:flex-start;
    background:#FFFFFF; border:1px solid rgba(28,26,23,0.12); border-radius:16px;
    padding:16px 18px; box-shadow:0 26px 60px -30px rgba(28,26,23,0.45);
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .proof-toast.show{ opacity:1; transform:none; pointer-events:auto; }
  .proof-toast .pt-av{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:rgba(176,132,48,0.12); border:1px solid rgba(176,132,48,0.32);
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque'; font-weight:600; font-size:0.8rem; color:#8A6A2F;
  }
  .proof-toast .pt-stars{ display:flex; gap:2px; margin-bottom:5px; }
  .proof-toast .pt-stars svg{ width:12px; height:12px; fill:#E0A93B; stroke:none; }
  .proof-toast p{ font-size:0.8rem; line-height:1.5; color:#3D382F; }
  .proof-toast .pt-who{ font-size:0.72rem; color:#756F61; margin-top:5px; }
  .proof-toast .pt-close{
    position:absolute; top:8px; right:10px; font-size:1rem; line-height:1;
    color:#B3AC9C; cursor:pointer; background:none; border:0; padding:4px;
  }
  .proof-toast .pt-close:hover{ color:#5E5749; }
  @media (max-width:620px){ .proof-toast{ left:12px; right:12px; bottom:12px; max-width:none; } }

  /* --- The working screen while the submission is in flight --- */
  .calc-stage{ text-align:center; max-width:520px; margin:0 auto; }
  .calc-ring{
    width:104px; height:104px; margin:0 auto 30px; border-radius:50%;
    border:2px solid rgba(176,132,48,0.18); border-top-color:#A9791F;
    animation:calcSpin 1.05s linear infinite;
  }
  @keyframes calcSpin{ to{ transform:rotate(360deg); } }
  .calc-stage h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; }
  .calc-steps{ margin-top:26px; display:grid; gap:12px; text-align:left; max-width:380px; margin-left:auto; margin-right:auto; }
  .calc-step{
    display:flex; align-items:center; gap:12px; font-size:0.9rem; color:var(--muted-dim);
    opacity:0.35; transition:opacity .4s ease, color .4s ease;
  }
  .calc-step.done{ opacity:1; color:var(--muted); }
  .calc-step .cs-dot{
    width:19px; height:19px; border-radius:50%; flex-shrink:0;
    border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  }
  .calc-step.done .cs-dot{ border-color:#A9791F; background:rgba(176,132,48,0.12); }
  .calc-step .cs-dot svg{ width:10px; height:10px; stroke:#A9791F; opacity:0; transition:opacity .3s ease; }
  .calc-step.done .cs-dot svg{ opacity:1; }

  .f-microline{ margin-top:16px; font-size:0.85rem; color:var(--muted-dim); }
  /* The opener earns more room than the questions that follow it. */
  .funnel-light .f-step[data-step="1"] h1{ font-size:clamp(2.1rem, 5.2vw, 3.5rem); line-height:1.08; letter-spacing:-0.03em; }
  .funnel-light .f-step[data-step="1"]{ max-width:760px; }
  .funnel-light .f-step[data-step="1"] .f-sub{ max-width:560px; margin-left:auto; margin-right:auto; }

  /* ================================================== */
  /* V13: FUNNEL POLISH                                 */
  /* ================================================== */

  /* Solid header, so it reads as a real site rather than a floating overlay. */
  /* Header and progress bar travel together. Pinning the bar at a fixed
     offset left it floating whenever the header was a different height. */
  .funnel-light .funnel-head{
    position:sticky; top:0; z-index:60; background:#FFFFFF;
    box-shadow:0 1px 0 rgba(28,26,23,0.06), 0 10px 30px -24px rgba(28,26,23,0.35);
  }
  .funnel-light .funnel-top{ background:#FFFFFF; }
  .funnel-light .funnel-progress{ position:static; }

  /* Objection links in the header, each opening its answer. */
  .f-nav-mid{ display:flex; align-items:center; gap:4px; }
  .f-nav-mid > div{ position:relative; }
  .f-ask{
    background:none; border:0; cursor:pointer; padding:9px 14px; border-radius:100px;
    font-family:'Inter'; font-size:0.83rem; font-weight:500; color:#4A443A;
    display:inline-flex; align-items:center; gap:7px; transition:background .2s ease, color .2s ease;
  }
  .f-ask:hover, .f-ask[aria-expanded="true"]{ background:rgba(176,132,48,0.10); color:#8A6A2F; }
  .f-ask svg{ width:11px; height:11px; stroke:currentColor; transition:transform .3s var(--ease); }
  .f-ask[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .f-answer{
    position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
    width:min(340px, calc(100vw - 32px)); background:#FFFFFF; z-index:70;
    border:1px solid rgba(28,26,23,0.12); border-radius:16px; padding:20px 22px;
    box-shadow:0 30px 70px -30px rgba(28,26,23,0.45);
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .f-answer[data-open="true"]{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
  .f-answer h4{ font-size:0.95rem; margin-bottom:8px; color:#1C1A17; }
  .f-answer p{ font-size:0.85rem; line-height:1.65; color:#5E5749; }
  .f-answer p + p{ margin-top:10px; }
  @media (max-width:900px){ .f-nav-mid{ display:none; } }

  /* Gold with depth: a gradient face, a lit top edge, and a coloured shadow
     rather than a flat fill. */
  .funnel-light .btn-gold, .hero-search > button{
    /* White on this gold is 3.04:1, which is under AA for a 13.6px label and
       these are the only buttons on the two paid funnels. Dark text on the
       same gold is 5.5:1 and matches .btn-gold on the rest of the site, so the
       colour stays and only the label flips. Hover goes lighter rather than
       darker for the same reason: darkening dropped it back to 4.34:1. */
    background:#C08A22; color:#211D18; font-weight:600; letter-spacing:0.005em;
    box-shadow:0 6px 18px -8px rgba(192,138,34,0.55);
    transition:background .22s ease, box-shadow .22s ease, transform .22s var(--ease);
  }
  .funnel-light .btn-gold:hover, .hero-search > button:hover{
    background:#D2A03A; color:#211D18;
    box-shadow:0 10px 26px -8px rgba(192,138,34,0.6); transform:translateY(-1px);
  }
  .funnel-light .btn-gold:active, .hero-search > button:active{ transform:translateY(0); }
  .funnel-light .f-opt.selected{
    background:#C08A22; border-color:#C08A22; color:#211D18;
    box-shadow:0 6px 18px -8px rgba(192,138,34,0.5);
  }

  /* The stroke, now with a glow behind it so it actually reads. */
  .glow-edge{ filter:drop-shadow(0 0 10px rgba(224,169,59,0.28)); }
  .glow-edge::before{ inset:-2.5px; padding:2.5px; }
  .funnel-light .glow-edge::before{
    background:conic-gradient(from var(--edge-spin),
      transparent 0deg, transparent 250deg,
      rgba(240,190,85,0.35) 285deg, #F0BE55 320deg, #FFD98A 335deg, #F0BE55 350deg,
      transparent 360deg);
  }

  /* Accent underline that draws itself on load. */
  .accent-word{ position:relative; white-space:nowrap; color:#B5842A; }
  .accent-word::after{
    content:''; position:absolute; left:0; right:0; bottom:-0.12em; height:0.09em; border-radius:100px;
    background:linear-gradient(90deg, #E0A93B, #F0BE55 55%, #E0A93B);
    box-shadow:0 2px 12px rgba(224,169,59,0.55);
    transform:scaleX(0); transform-origin:left;
    animation:drawUnderline .9s var(--ease) .55s forwards;
  }
  @keyframes drawUnderline{ to{ transform:scaleX(1); } }
  @media (prefers-reduced-motion: reduce){ .accent-word::after{ animation:none; transform:scaleX(1); } }

  /* The badge and the trust row were disappearing into the background. */
  .funnel-light .f-badge{
    background:linear-gradient(180deg, rgba(240,190,85,0.24), rgba(224,169,59,0.14));
    border-color:rgba(181,132,42,0.55); color:#7A5A16; font-size:0.76rem; padding:10px 20px;
    box-shadow:0 6px 18px -10px rgba(192,138,34,0.5);
  }
  .funnel-light .f-badge svg{ width:15px; height:15px; stroke:#8A6A2F; }
  .funnel-light .f-trust{ font-size:0.84rem; color:#4A443A; gap:26px; margin-top:40px; }
  .funnel-light .f-trust span{ gap:10px; }
  .funnel-light .f-trust svg{ width:19px; height:19px; stroke:#B5842A; }

  /* Upgrades: one compact row, with room to add anything not listed. */
  .f-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:20px; }
  @media (max-width:620px){
    /* A half filled last row reads as a mistake when it is centred. */
    .f-chips{ justify-content:flex-start; }
    .f-options{ justify-items:stretch; }
  }
  .f-chips .f-opt{ padding:11px 18px; font-size:0.88rem; border-radius:100px; }
  .f-more{ max-width:560px; margin:0 auto 28px; }
  .f-more textarea{ min-height:132px; font-size:0.94rem; line-height:1.6; }
  @media (max-width:620px){ .f-more textarea{ min-height:120px; } }

  /* Autocomplete inside the one-bar search. */
  .hero-search .ac-wrap{ flex:1; min-width:0; display:flex; }
  .hero-search .ac-wrap input{ width:100%; }
  .funnel-light .ac-list{ background:#FFFFFF; border-color:rgba(28,26,23,0.12); box-shadow:0 26px 60px -30px rgba(28,26,23,0.4); text-align:left; }
  .funnel-light .ac-item{ color:#1C1A17; }
  .funnel-light .ac-item span{ color:#8B8474; }
  .funnel-light .ac-item:hover, .funnel-light .ac-item.hl{ background:rgba(224,169,59,0.14); }

  /* Closing banner on the thank you screen. */
  .f-closing{
    max-width:900px; margin:0 auto; text-align:center; border-radius:20px; padding:52px 40px;
    background:linear-gradient(150deg, rgba(224,169,59,0.14) 0%, rgba(255,255,255,0.9) 60%);
    border:1px solid rgba(181,132,42,0.30);
  }
  @media (max-width:620px){ .f-closing{ padding:36px 22px; } }

  /* Small print under a submit, and inline field errors. */
  .f-legal{
    margin-top:14px; font-size:0.72rem; line-height:1.55; color:var(--muted-dim);
    max-width:420px; margin-left:auto; margin-right:auto;
  }
  .f-field-error{ margin-top:8px; font-size:0.78rem; color:#B04A3C; text-align:left; }
  .funnel-light .field.has-error{ border-color:#C4665A; box-shadow:0 0 0 3px rgba(196,102,90,0.12); }

  /* ================================================== */
  /* V14: DUAL RANGE + QUICK MODAL                      */
  /* ================================================== */

  /* Two handles pinching a band. Built from two native range inputs so it
     stays keyboard accessible; the visible track is drawn underneath. */
  .range-dual{ position:relative; height:44px; max-width:520px; margin:0 auto 6px; }
  .range-dual .rd-track{
    position:absolute; left:0; right:0; top:19px; height:6px; border-radius:100px;
    background:rgba(28,26,23,0.12);
  }
  .range-dual .rd-fill{
    position:absolute; top:0; bottom:0; border-radius:100px;
    background:linear-gradient(90deg, #C08A22, #E0A93B);
  }
  .range-dual input[type="range"]{
    position:absolute; left:0; top:0; width:100%; height:44px; margin:0;
    -webkit-appearance:none; appearance:none; background:transparent;
    pointer-events:none;   /* only the thumbs take the pointer */
  }
  .range-dual input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; pointer-events:auto;
    width:26px; height:26px; border-radius:50%; cursor:grab;
    background:#FFFFFF; border:2px solid #C08A22;
    box-shadow:0 4px 14px -4px rgba(28,26,23,0.4);
    transition:transform .18s var(--ease), box-shadow .18s ease;
  }
  .range-dual input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.1); }
  .range-dual input[type="range"]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.15); }
  .range-dual input[type="range"]::-moz-range-thumb{
    pointer-events:auto; width:24px; height:24px; border-radius:50%; cursor:grab;
    background:#FFFFFF; border:2px solid #C08A22; box-shadow:0 4px 14px -4px rgba(28,26,23,0.4);
  }
  .range-dual input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(192,138,34,0.25); }
  .rd-values{
    display:flex; justify-content:space-between; max-width:520px; margin:0 auto 8px;
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.35rem; color:#1C1A17;
    font-variant-numeric:tabular-nums;
  }
  .rd-caption{ font-size:0.82rem; color:var(--muted-dim); margin-bottom:30px; }

  /* Small modal for the one extra thing we ask on the way out. */
  .quick-modal{
    position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:22px;
  }
  .quick-modal[hidden]{ display:none; }
  .qm-backdrop{ position:absolute; inset:0; background:rgba(28,26,23,0.55); backdrop-filter:blur(5px); }
  .qm-card{
    position:relative; z-index:2; width:100%; max-width:460px; background:#FFFFFF;
    border:1px solid rgba(28,26,23,0.10); border-radius:20px; padding:38px 34px; text-align:center;
    box-shadow:0 40px 90px -34px rgba(28,26,23,0.55); animation:lmIn .35s var(--ease);
  }
  .qm-card h3{ font-size:1.4rem; margin-bottom:10px; color:#1C1A17; }
  .qm-card p{ font-size:0.9rem; color:#5E5749; line-height:1.65; margin-bottom:22px; }
  .qm-close{
    position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%;
    border:1px solid rgba(28,26,23,0.14); background:#FFFFFF; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:#5E5749; font-size:1.05rem; line-height:1;
  }
  .qm-close:hover{ border-color:#C08A22; color:#8A6A2F; }

  /* The phone is the login, so say so where they type it. */
  .f-passnote{
    display:flex; gap:11px; align-items:flex-start; text-align:left;
    background:rgba(224,169,59,0.10); border:1px solid rgba(181,132,42,0.28);
    border-radius:12px; padding:14px 16px; font-size:0.82rem; line-height:1.6; color:#4A443A;
  }
  .f-passnote svg{ width:17px; height:17px; stroke:#B5842A; flex-shrink:0; margin-top:1px; }
  .f-passnote b{ color:#1C1A17; }

  /* ================================================== */
  /* V15: HOMEPAGE                                      */
  /* ================================================== */

  /* The fork. Three ways in, sized so none of them looks like the default. */
  .path-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .path-card{
    display:flex; flex-direction:column; gap:14px;
    background:var(--panel); border:1px solid var(--line-strong); border-radius:18px;
    padding:36px 32px; transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
  }
  .path-card:hover{
    border-color:var(--gold-line); transform:translateY(-5px);
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.9), 0 0 36px -18px rgba(201,164,92,0.45);
  }
  .path-icon{
    width:54px; height:54px; border-radius:15px; margin-bottom:4px;
    border:1px solid var(--gold-line);
    background:linear-gradient(150deg, rgba(201,164,92,0.16) 0%, rgba(201,164,92,0.03) 70%);
    display:flex; align-items:center; justify-content:center;
  }
  .path-icon svg{ width:22px; height:22px; stroke:var(--gold-bright); fill:none; }
  .path-card h3{ font-size:1.35rem; letter-spacing:-0.015em; }
  .path-card p{ font-size:0.92rem; color:var(--muted); line-height:1.7; flex:1; }
  .path-go{
    font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    color:var(--gold-bright); display:inline-flex; align-items:center; gap:8px;
  }
  .path-go svg{ width:13px; height:13px; stroke:var(--gold-bright); transition:transform .3s var(--ease); }
  .path-card:hover .path-go svg{ transform:translateX(4px); }
  @media (max-width:900px){ .path-grid{ grid-template-columns:1fr; } }

  /* Two bios side by side under the film. */
  .bio-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1000px; margin:64px auto 0; }
  .bio-face{
    width:100%; aspect-ratio:5/4; border-radius:18px; margin-bottom:22px;
    background-size:cover; background-position:center 20%; background-clip:padding-box;
    border:1px solid rgba(33,29,24,0.12);
    box-shadow:0 26px 60px -34px rgba(33,29,24,0.55);
  }
  .bio h3{ font-size:1.5rem; margin-bottom:4px; letter-spacing:-0.02em; }
  .bio-role{
    display:block; font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
    color:#8A6A2F; margin-bottom:18px;
  }
  .bio p{ font-size:0.96rem; line-height:1.78; margin-bottom:14px; }
  .bio p:last-child{ margin-bottom:0; }
  section.light .bio p{ color:#5E5749; }
  @media (max-width:860px){ .bio-split{ grid-template-columns:1fr; gap:48px; margin-top:48px; } }

  /* The film sits on the light band now, so it needs its own frame there. */
  section.light .video-frame{ border-color:rgba(33,29,24,0.14); box-shadow:0 34px 80px -40px rgba(33,29,24,0.5); }

  /* Light band variants for the components that now sit on one. */
  section.light .res-card{ background:#FFFFFF; border-color:rgba(33,29,24,0.12); box-shadow:0 18px 44px -30px rgba(33,29,24,0.4); }
  section.light .res-card:hover{ border-color:rgba(138,106,47,0.4); box-shadow:0 26px 60px -30px rgba(33,29,24,0.45); }
  section.light .res-card p{ color:#5E5749; }
  section.light .res-card .icon-wrap{ border-color:rgba(33,29,24,0.14); }
  section.light .res-card .icon-wrap svg{ stroke:#B98D4F; }
  section.light .res-card:hover .icon-wrap{ background:rgba(184,141,79,0.12); }
  section.light .res-go{ color:#8A6A2F; }
  section.light .res-go svg{ stroke:#8A6A2F; }
  section.light .sec-cta .btn-gold{ background:var(--gold); color:#161310; }

  /* A closing banner that glows rather than sitting flat. */
  .cta-banner{ position:relative; overflow:hidden; }
  .cta-banner::before{
    content:''; position:absolute; left:50%; top:-30%; transform:translateX(-50%);
    width:min(1200px,130%); height:150%; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse at center, rgba(201,164,92,0.13) 0%, rgba(201,164,92,0.04) 40%, transparent 72%);
  }
  .cta-banner > *{ position:relative; z-index:1; }

  /* The hero dissolves into the section below it instead of stopping. */
  .hero::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
    pointer-events:none; z-index:3;
    background:linear-gradient(180deg, rgba(12,11,9,0) 0%, rgba(12,11,9,0.72) 55%, var(--bg) 100%);
  }
  .hero-content{ position:relative; z-index:4; }

  /* Bios read horizontally, matching the buy page. Faces centred so nobody
     gets cropped at the forehead. */
  .bio-split{ grid-template-columns:1fr; gap:44px; max-width:960px; }
  .bio{
    display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center;
    padding:34px 0; border-top:1px solid rgba(33,29,24,0.12);
  }
  .bio:last-child{ border-bottom:1px solid rgba(33,29,24,0.12); }
  .bio-face{
    width:100%; aspect-ratio:5/4; margin-bottom:0;
    background-position:center center;
  }
  .bio h3{ margin-bottom:4px; }
  @media (max-width:820px){
    .bio{ grid-template-columns:1fr; gap:22px; }
    .bio-face{ max-width:340px; }
  }

  /* Property tours: the marketing, shown rather than described. */
  .tour-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .tour-card{
    display:block; border-radius:16px; overflow:hidden;
    border:1px solid var(--line-strong); background:var(--panel);
    transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
  }
  .tour-card:hover{
    border-color:var(--gold-line); transform:translateY(-4px);
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.9), 0 0 34px -18px rgba(201,164,92,0.45);
  }
  .tour-media{
    position:relative; aspect-ratio:16/9; background-size:cover; background-position:center;
    background-color:#15130F; display:flex; align-items:center; justify-content:center;
  }
  .tour-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,9,0.5), rgba(12,11,9,0.05)); }
  .tour-play{
    position:relative; z-index:2; width:56px; height:56px; border-radius:50%;
    border:1px solid var(--gold-line); background:rgba(12,11,9,0.55); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
  }
  .tour-card:hover .tour-play{ transform:scale(1.1); }
  .tour-play svg{ width:18px; height:18px; fill:var(--gold-bright); margin-left:3px; }
  .tour-body{ padding:20px 22px; }
  .tour-body h4{ font-size:1.05rem; margin-bottom:4px; }
  .tour-body p{ font-size:0.84rem; color:var(--muted); }
  @media (max-width:900px){ .tour-grid{ grid-template-columns:1fr; } }

  /* ================================================== */
  /* V16: SELLER PAGE                                   */
  /* ================================================== */

  /* --- The evaluation band. The paid funnel's opener, rebuilt for the core
         site: same photo backdrop, badge, headline and address bar, but it
         asks for the contact details in place instead of redirecting anyone
         into a multi step funnel. --- */
  .sell-eval{
    position:relative; text-align:center;
    padding:100px 24px;
  }
  /* A contained panel rather than a full bleed photo band. The photo version
     read as a second hero dropped into the middle of the page; this is the
     same machined-object language as the proof bar and the result card, so
     it belongs to the page it sits on. */
  .sell-eval > .wrap{
    position:relative; z-index:2; max-width:900px;
    padding:68px 48px 60px;
    background:linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--gold-line); border-radius:24px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,0.9);
    overflow:hidden;
  }
  .sell-eval > .wrap::before{
    content:''; position:absolute; top:-90px; left:50%; transform:translateX(-50%);
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,164,92,0.13) 0%, transparent 70%);
    pointer-events:none;
  }
  .sell-eval > .wrap > *{ position:relative; }
  @media (max-width:620px){ .sell-eval{ padding:70px 16px; } .sell-eval > .wrap{ padding:48px 22px 44px; } }
  .sell-eval h2{
    font-size:clamp(2.1rem, 5.2vw, 3.4rem); line-height:1.08; letter-spacing:-0.03em;
    max-width:760px; margin:0 auto;
  }
  .sell-eval .f-sub{
    font-size:1rem; color:var(--muted); line-height:1.65;
    max-width:560px; margin:20px auto 0;
  }
  /* The underlined word is tuned for the light funnel's cream background. */
  .sell-eval .accent-word{ color:var(--gold-bright); }
  .sell-eval .accent-word::after{
    background:linear-gradient(90deg, var(--gold), var(--gold-bright) 55%, var(--gold));
    box-shadow:0 2px 14px rgba(201,164,92,0.5);
  }
  .sell-eval .hero-search{ margin-top:34px; }
  /* The details card takes the bar's place rather than appearing under it, so
     the section never grows a second competing input while you are reading. */
  .sell-eval .eval-card{
    max-width:520px; margin:34px auto 0; text-align:left;
    animation:fIn .45s var(--ease);
  }
  .sell-eval .eval-card h3{ font-size:1.15rem; margin-bottom:6px; }
  .sell-eval .eval-card .sub{ font-size:0.88rem; color:var(--muted); margin-bottom:20px; }
  .sell-eval [hidden]{ display:none; }

  /* --- Instagram reels. Portrait media, so the rail carries more of them
         across than the review rail does. --- */
  .rail-track.reels > *{ flex:0 0 min(62%, 250px); }
  @media (min-width:1000px){ .rail-track.reels > *{ flex-basis:calc((100% - 80px) / 5); } }
  .reel-card{
    position:relative; display:flex; align-items:flex-end;
    aspect-ratio:9/16; border-radius:16px; overflow:hidden;
    border:1px solid var(--line-strong); background:#15130F;
    background-size:cover; background-position:center;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .reel-card:hover{
    border-color:var(--gold-line);
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.9), 0 0 34px -18px rgba(201,164,92,0.45);
  }
  .reel-card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(0deg, rgba(12,11,9,0.92) 0%, rgba(12,11,9,0.45) 34%, rgba(12,11,9,0.05) 62%, rgba(12,11,9,0.30) 100%);
  }
  .reel-card .reel-body{ position:relative; z-index:2; padding:18px 16px; width:100%; }
  .reel-card .reel-body p{ font-size:0.84rem; line-height:1.45; color:var(--cream); }
  .reel-mark{
    position:absolute; top:12px; right:12px; z-index:2;
    width:30px; height:30px; border-radius:9px;
    border:1px solid var(--gold-line); background:rgba(12,11,9,0.55); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
  }
  .reel-mark svg{ width:15px; height:15px; stroke:var(--gold-bright); fill:none; }

  /* --- Sold gallery. The old track record was a plain scroller of photos;
         a seller is here for the result, so the result is the headline and
         the photograph is the evidence under it. --- */
  .sold-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .sold-card{
    display:block; border-radius:16px; overflow:hidden;
    border:1px solid var(--line-strong); background:var(--panel);
    text-decoration:none; color:inherit;
    transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
  }
  .sold-card:hover{
    border-color:var(--gold-line); transform:translateY(-4px);
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.9), 0 0 34px -18px rgba(201,164,92,0.45);
  }
  .sold-media{
    position:relative; aspect-ratio:4/3; background-size:cover; background-position:center;
    background-color:#15130F;
  }
  .sold-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,11,9,0.55), transparent 55%); }
  .sold-flag{
    position:absolute; top:12px; left:12px; z-index:2;
    font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
    background:var(--gold); color:#161310; border-radius:100px; padding:6px 13px;
  }
  .sold-body{ padding:22px 22px 24px; }
  .sold-result{
    display:block; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-bright); margin-bottom:9px;
  }
  .sold-price{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.5rem; letter-spacing:-0.02em; margin-bottom:6px; }
  .sold-addr{ font-size:0.9rem; color:var(--cream); margin-bottom:12px; }
  .sold-spec{
    display:flex; gap:14px; flex-wrap:wrap; padding-top:12px;
    border-top:1px solid var(--line); font-size:0.78rem; color:var(--muted);
  }
  section.light .sold-card{ background:#FFFFFF; border-color:rgba(33,29,24,0.14); }
  section.light .sold-addr{ color:#211D18; }
  section.light .sold-result{ color:#8A6A2F; }
  section.light .sold-spec{ border-color:rgba(33,29,24,0.12); color:#5E5749; }
  @media (max-width:900px){ .sold-grid{ grid-template-columns:1fr; } }

  /* ================================================== */
  /* V17: TOOL PAGES AS CENTRED STEPS                   */
  /* ================================================== */

  /* The three tools used to be a column of sliders beside a sticky result
     card. On a phone that meant dragging a slider while the number you are
     watching sits off screen. These take the funnel shape instead: one
     question at a time, centred, with the result as its own screen. The site
     nav stays, because unlike the paid funnels these are core site pages and
     nobody needs trapping. */
  .tool-funnel{
    position:relative;
    display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100vh - 68px);
    padding:0 0 40px;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201,164,92,0.09) 0%, transparent 52%),
      linear-gradient(180deg, #17140F 0%, var(--bg) 62%);
    border-bottom:1px solid var(--line);
  }
  .tool-funnel .funnel-progress{ position:absolute; top:0; left:0; right:0; }
  .tool-funnel .tool-stage{
    display:flex; align-items:center; justify-content:center;
    padding:56px 24px 24px;
  }
  /* Pinned, not in the flow. The stage is vertically centred and each step is
     a different height, so a breadcrumb in the flow slides up and down as you
     answer. */
  .tool-funnel > .wrap{ position:absolute; top:30px; left:0; right:0; }
  .tool-funnel .crumbs{ margin:0; }
  /* A little wider than the paid funnels, because the result screen carries a
     breakdown rather than one line of copy. */
  .tool-funnel .f-step{ max-width:600px; }
  .tool-funnel .f-step h1,
  .tool-funnel .f-step h2{
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 58%, var(--gold-bright) 135%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  /* The opener's headline gets the room to sit on one line on a desktop. At
     600px "What is your home worth right now?" broke after "right", which
     left one word dangling underneath. Narrow screens still wrap naturally. */
  .tool-funnel .f-step[data-step="1"]{ max-width:860px; }
  .tool-funnel .f-step[data-step="1"] .f-sub{ max-width:600px; margin-left:auto; margin-right:auto; }
  .tool-funnel .f-step[data-step="1"] h1{ font-size:clamp(1.8rem, 3.4vw, 2.55rem); }

  /* --- The one big number you type. Centred, so the value you are setting is
         the largest thing on the screen rather than a label beside a slider. */
  .f-amount{
    display:block; width:100%; max-width:420px; margin:0 auto 8px;
    text-align:center; background:transparent; border:0;
    border-bottom:1px solid var(--line-strong);
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:clamp(2.2rem, 6vw, 3.2rem); line-height:1.2; letter-spacing:-0.02em;
    color:var(--gold-bright); font-variant-numeric:tabular-nums;
    padding:6px 0 12px; outline:none;
    transition:border-color .3s ease;
  }
  .f-amount::placeholder{ color:var(--muted-dim); }
  .f-amount:focus{ border-color:var(--gold-line); }
  .f-hint{ font-size:0.76rem; color:var(--muted-dim); margin-bottom:26px; }

  /* Quick picks under the field. Typing is always available; these are just
     the answers most people give. */
  .f-picks{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
  .f-picks button{
    padding:9px 16px; border-radius:100px; border:1px solid var(--line-strong);
    font-size:0.82rem; color:var(--muted); cursor:pointer;
    transition:border-color .25s ease, color .25s ease, background .25s ease;
  }
  .f-picks button:hover{ border-color:var(--gold-line); color:var(--cream); }
  .f-picks button.selected{ background:var(--gold); border-color:var(--gold); color:#161310; }

  /* --- The result screen. Same card the old layout used, no longer sticky
         because it is now the only thing on screen. --- */
  .tool-funnel .result-hero{ position:static; text-align:center; }
  .tool-funnel .f-step .result-hero + .f-nav{ margin-top:24px; }
  .tool-result-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
  .tool-result-actions .btn{ flex:1 1 220px; justify-content:center; }

  /* The evaluation tool ends on a plain thank you. No countdown, no working
     screen, and nothing that redirects. */
  .tool-thanks{ text-align:center; }
  .tool-thanks .lm-success{ padding:0; }
  .tool-thanks p{ color:var(--muted); max-width:520px; margin:16px auto 0; line-height:1.7; }

  /* On a phone this used to collapse to `min-height:0`, so a step was only as
     tall as its content and the next band showed underneath it. That is what
     made the three tools feel cramped: a stack of small elements crushed
     together at the top of the screen with the page continuing behind them.

     They are tools, so they get to behave like one. The stage takes the whole
     screen below the header, the step is centred in it, and every gap opens
     up. svh rather than vh because vh on iOS is the height with the address
     bar hidden, which overshoots and pushes the Continue button under the fold
     on load. */
  @media (max-width:620px){
    .tool-funnel{
      min-height:calc(100vh - 90px);
      min-height:calc(100svh - 90px);
      padding-bottom:calc(96px + env(safe-area-inset-bottom));
      justify-content:center;
    }
    .tool-funnel .tool-stage{ padding:60px 22px 8px; }
    .tool-funnel > .wrap{ top:24px; }
    .tool-funnel .crumbs{ font-size:0.66rem; }

    /* Room around each part of the question, sized so a whole step still fits
       between the header and the Get In Touch bar. Two full width gold pills
       touching each other reads as one broken control, so Continue has to keep
       clear air under it. */
    .tool-funnel .f-badge{ margin-bottom:22px; }
    .tool-funnel .f-step h1,
    .tool-funnel .f-step h2{ font-size:1.72rem; line-height:1.18; }
    .tool-funnel .f-step[data-step="1"] h1{ font-size:1.72rem; }
    .tool-funnel .f-sub{ font-size:0.95rem; margin-bottom:28px; line-height:1.65; }
    .tool-funnel .f-kicker{ margin-bottom:20px; }
    .tool-funnel .f-amount{ font-size:2.6rem; padding:10px 0 16px; margin-bottom:14px; }
    .tool-funnel .f-hint{ margin-bottom:26px; font-size:0.8rem; }
    /* Four quick picks wrapped three then one, which reads as a mistake. They
       are always short values, so an even auto-fit row fits all four across a
       375px screen and saves the row that pushed the densest step (rate plus
       amortization) under the fold. */
    .tool-funnel .f-picks{
      display:grid; grid-template-columns:repeat(auto-fit, minmax(68px, 1fr));
      gap:8px; margin-bottom:22px;
    }
    .tool-funnel .f-picks button{ padding:13px 6px; font-size:0.85rem; }
    /* Every option group on the three tool pages is short values: "15 yr",
       "5%", "1.5", "Biweekly". auto-fit at a small floor puts three, four or
       five of them on one line instead of wrapping four-then-one, which is
       what pushed the rate and amortization step under the fold. */
    .tool-funnel .f-options{
      grid-template-columns:repeat(auto-fit, minmax(52px, 1fr));
      gap:8px; margin-bottom:22px;
    }
    .tool-funnel .f-opt{ padding:16px 6px; }
    /* The upgrades step carries eight multi-select chips and a free text box,
       which is the one step that genuinely wants more than a screen. Tighter
       chips and a shorter box bring it back inside; the box still grows as it
       is typed into. */
    .tool-funnel .f-chips{ gap:8px; margin-bottom:16px; }
    .tool-funnel .f-chips .f-opt{ padding:11px 15px; font-size:0.86rem; }
    .tool-funnel .f-more textarea{ min-height:76px; }
    .tool-funnel .f-sub{ margin-bottom:24px; }
    .tool-funnel .f-nav{ margin-top:4px; }
    /* The one action on the screen, so it takes the width. */
    .tool-funnel .f-nav .btn{ width:100%; justify-content:center; padding:17px 20px; font-size:0.95rem; }
    .tool-funnel .f-nav{ flex-direction:column-reverse; gap:12px; }
    .tool-funnel .f-nav .btn-text{ width:auto; padding:6px 0; }

    .tool-funnel .result-hero{ padding:30px 22px; }
    .tool-result-actions .btn{ flex:1 1 100%; }
  }

  /* --- Syndication tiles. Where a listing actually ends up, shown as marks
         rather than described in a paragraph. --- */
  .media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .media-tile{
    display:flex; flex-direction:column; gap:14px;
    background:var(--panel); border:1px solid var(--line-strong); border-radius:18px;
    padding:30px 28px;
    transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
  }
  .media-tile:hover{
    border-color:var(--gold-line); transform:translateY(-4px);
    box-shadow:0 26px 60px -30px rgba(0,0,0,0.9), 0 0 34px -18px rgba(201,164,92,0.45);
  }
  .media-mark{
    width:52px; height:52px; border-radius:15px;
    border:1px solid var(--gold-line);
    background:linear-gradient(150deg, rgba(201,164,92,0.16) 0%, rgba(201,164,92,0.03) 70%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 28px -12px rgba(201,164,92,0.5);
  }
  .media-mark svg{ width:22px; height:22px; stroke:var(--gold-bright); fill:none; }
  .media-tile h4{ font-size:1.08rem; letter-spacing:-0.01em; }
  .media-tile p{ font-size:0.89rem; color:var(--muted); line-height:1.7; }
  .media-tile .tag{
    align-self:flex-start; margin-top:auto; padding-top:4px;
    font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-bright);
  }
  @media (max-width:900px){ .media-grid{ grid-template-columns:1fr; } }

  /* Contact details sit inside pillars on the contact page, where the pillar
     paragraph colour is deliberately muted. Links in there need to read as
     links without turning the block into a wall of gold. */
  .pillar p .mail-link{ color:var(--cream); border-bottom:1px solid var(--line-strong); }
  .pillar p .mail-link:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-line); }
  .pillar p + p{ margin-top:12px; }

  /* --- Rotating page hero. Used on communities.html: the three markets
         crossfade with a slow Ken Burns drift. Each slide owns a third of the
         cycle; the pan runs the whole time so a slide is always moving while
         visible. Reduced motion, or anything that stops CSS animation, leaves
         the first photo standing. --- */
  .hero-rotator{ overflow:hidden; }
  .hero-rotator > *{ position:relative; z-index:1; }
  .hero-rotator .hero-rotate{ position:absolute; inset:0; z-index:0; }
  .hero-rotate .slide{
    position:absolute; inset:-4%;
    background-size:cover; background-position:center;
    opacity:0;
    animation:heroSlide 27s linear infinite;
  }
  .hero-rotate .slide:nth-child(1){ animation-delay:0s; }
  .hero-rotate .slide:nth-child(2){ animation-delay:9s; }
  .hero-rotate .slide:nth-child(3){ animation-delay:18s; }
  /* Visible for a third of the cycle with soft edges either side. The drift
     is small: -4% inset gives the frame room to move without showing edge. */
  @keyframes heroSlide{
    0%   { opacity:0; transform:scale(1) translateX(0); }
    5%   { opacity:1; }
    33%  { opacity:1; }
    40%  { opacity:0; transform:scale(1.07) translateX(-1.6%); }
    100% { opacity:0; transform:scale(1.07) translateX(-1.6%); }
  }
  /* Same veil the static hero carried inline, now above the slides. */
  .hero-rotate .veil{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(12,11,9,0.84) 0%, rgba(12,11,9,0.64) 45%, rgba(12,11,9,0.92) 100%);
  }
  @media (prefers-reduced-motion: reduce){
    .hero-rotate .slide{ animation:none; }
    .hero-rotate .slide:first-child{ opacity:1; }
  }

  /* --- Community page practical tiles: linked lists inside .media-tile. --- */
  .media-tile ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
  .media-tile ul li{
    font-size:0.89rem; color:var(--muted); line-height:1.55;
    padding-left:16px; position:relative;
  }
  .media-tile ul li::before{
    content:''; position:absolute; left:0; top:0.62em; width:7px; height:1px;
    background:var(--gold);
  }
  .media-tile ul a{ color:var(--cream); border-bottom:1px solid var(--line-strong); }
  .media-tile ul a:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-line); }
  .map-out-link{ text-align:center; margin-top:34px; font-size:0.85rem; color:var(--muted); }
  .map-out-link a{ color:var(--gold-bright); border-bottom:1px solid var(--gold-line); }

  /* ================================================== */
  /* V18: PAGE BANNERS, DESKTOP AND PORTRAIT             */
  /* ================================================== */

  /* Two crops of every banner: a very wide desktop file and a portrait mobile
     file. The switch is on ORIENTATION, not width, which is what makes a
     tablet behave the way Shane asked — held upright it gets the portrait
     crop, turned sideways it gets the wide one. A phone in landscape also
     gets the wide crop, which is correct: it is a short, wide viewport.

     Named .hero-banner rather than .hero-photo to stay clear of
     .hero-photo-zone and the --hero-photo variable on the homepage. */
  .hero-banner{
    background-size:cover;
    background-repeat:no-repeat;
    /* The photos are composed for wide screens with the subjects up top, so
       the crop hangs from the top edge and loses foreground, never faces. */
    background-position:center top;
  }
  .hero-banner-buy{
    background-image:
      linear-gradient(180deg, rgba(12,11,9,0.84) 0%, rgba(12,11,9,0.54) 42%,
                              rgba(12,11,9,0.78) 72%, rgba(12,11,9,0.94) 100%),
      var(--buy-banner);
  }
  .hero-banner-sell{
    background-image:
      linear-gradient(180deg, rgba(12,11,9,0.84) 0%, rgba(12,11,9,0.58) 42%,
                              rgba(12,11,9,0.80) 72%, rgba(12,11,9,0.94) 100%),
      var(--sell-banner);
  }
  .hero-banner-sold{
    background-image:
      linear-gradient(180deg, rgba(12,11,9,0.84) 0%, rgba(12,11,9,0.58) 42%,
                              rgba(12,11,9,0.80) 72%, rgba(12,11,9,0.94) 100%),
      var(--sold-banner);
  }
  /* Contact is the exception to centre top. Ryan and Paul sit hard left in the
     desktop frame with the rest of the room empty, so a centred crop would
     slice them off the edge at anything under about 1900px. Anchored left they
     stay whole and the headline floats over the open half. */
  .hero-banner-contact{
    background-image:
      linear-gradient(180deg, rgba(12,11,9,0.82) 0%, rgba(12,11,9,0.62) 42%,
                              rgba(12,11,9,0.84) 74%, rgba(12,11,9,0.95) 100%),
      var(--contact-banner);
    background-position:left top;
  }

  /* Portrait phones and upright tablets. 1024px is the long edge of a 12.9in
     iPad in portrait, so that size and everything under it counts as a
     vertical tablet. */
  @media (orientation:portrait) and (max-width:1024px){
    .hero-banner-buy{
      background-image:
        linear-gradient(180deg, rgba(12,11,9,0.80) 0%, rgba(12,11,9,0.50) 38%,
                                rgba(12,11,9,0.80) 74%, rgba(12,11,9,0.95) 100%),
        var(--buy-banner-mobile);
    }
    .hero-banner-sell{
      background-image:
        linear-gradient(180deg, rgba(12,11,9,0.80) 0%, rgba(12,11,9,0.54) 38%,
                                rgba(12,11,9,0.82) 74%, rgba(12,11,9,0.95) 100%),
        var(--sell-banner-mobile);
    }
    /* The portrait contact crop is centred, so it goes back to centre top. */
    .hero-banner-contact{
      background-image:
        linear-gradient(180deg, rgba(12,11,9,0.80) 0%, rgba(12,11,9,0.56) 38%,
                                rgba(12,11,9,0.84) 74%, rgba(12,11,9,0.95) 100%),
        var(--contact-banner-mobile);
      background-position:center top;
    }
    .hero-banner-sold{
      background-image:
        linear-gradient(180deg, rgba(12,11,9,0.80) 0%, rgba(12,11,9,0.54) 38%,
                                rgba(12,11,9,0.82) 74%, rgba(12,11,9,0.95) 100%),
        var(--sold-banner-mobile);
    }
    /* Same swap for the homepage hero, which paints through a variable. */
    .hero-photo-zone{ background-image:var(--hero-photo-mobile); }
    /* In the portrait crop their faces sit at the same height as the wordmark,
       so the centre scrim has to work harder than it does on desktop. Wider
       and deeper, which beds the type without flattening the whole photo. */
    .hero-photo-zone::before{
      background:
        linear-gradient(180deg, rgba(12,11,9,0.58) 0%, rgba(12,11,9,0.40) 26%, rgba(12,11,9,0.74) 100%),
        radial-gradient(ellipse 92% 52% at 50% 44%, rgba(12,11,9,0.68) 0%, rgba(12,11,9,0.10) 72%);
    }
  }

  /* --- Reel cards that can hold real video ----------------------------------
     Instagram's own embed will not autoplay for a logged out visitor: the
     /embed/ response carries no <video> element at all, just a login prompt.
     So the card is built to take a self-hosted or API-supplied MP4 instead.
     Give a REELS entry a `video` and it autoplays muted on loop at 9:16; leave
     it null and the card falls back to a poster. Either way the whole card
     links out to the real reel. */
  .reel-card video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
    background:#15130F;
  }
  .reel-card .reel-mark,
  .reel-card .reel-body{ z-index:2; }
  /* The play affordance only belongs on a card that is not already moving. */
  .reel-card .reel-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:2; width:52px; height:52px; border-radius:50%;
    border:1px solid var(--gold-line); background:rgba(12,11,9,0.55);
    backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s var(--ease);
  }
  .reel-card:hover .reel-play{ transform:translate(-50%,-50%) scale(1.1); }
  .reel-card .reel-play svg{ width:17px; height:17px; fill:var(--gold-bright); margin-left:3px; }
  @media (prefers-reduced-motion: reduce){
    .reel-card video{ display:none; }
  }

  /* Sold gallery: three across, nine at a time, the rest behind Load More. */
  .sold-grid.gallery{ grid-template-columns:repeat(3,1fr); }
  .sold-card.is-hidden{ display:none; }
  .load-more{ text-align:center; margin-top:52px; }
  .load-more .btn[hidden]{ display:none; }
  .sold-count{ text-align:center; font-size:0.8rem; color:var(--muted-dim); margin-top:18px; }
  section.light .sold-count{ color:#8A8070; }
  @media (max-width:900px){ .sold-grid.gallery{ grid-template-columns:1fr; } }

  /* --- Reel viewer -----------------------------------------------------
     Cards open here instead of linking out. The reel files arrived without
     their Instagram shortcodes, so per card permalinks could not be trusted;
     playing the video in place removes the guess entirely and keeps people on
     the site. Swipe or arrow through the set from inside. --- */
  .reel-modal{
    position:fixed; inset:0; z-index:400;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .reel-modal[hidden]{ display:none; }
  .rm-backdrop{ position:absolute; inset:0; background:rgba(6,5,4,0.94); backdrop-filter:blur(10px); }
  .rm-stage{
    position:relative; z-index:2;
    display:flex; align-items:center; gap:26px;
  }
  .rm-frame{
    position:relative;
    height:min(84vh, 780px); aspect-ratio:9/16;
    border-radius:16px; overflow:hidden; background:#000;
    box-shadow:0 40px 100px -30px rgba(0,0,0,0.9);
    animation:lmIn .35s var(--ease);
    /* Nothing here should be draggable or selectable while swiping. */
    touch-action:pan-y; user-select:none;
  }
  .rm-frame video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
  .rm-close{
    position:absolute; top:-52px; right:0; z-index:3;
    background:rgba(8,7,5,0.6);
  }
  .rm-count{
    position:absolute; left:0; right:0; bottom:-40px; text-align:center;
    font-size:0.76rem; letter-spacing:0.1em; color:var(--muted-dim);
  }
  /* Arrows sit outside the frame on a desktop and overlay it on a phone. */
  .rm-nav{
    flex-shrink:0; width:52px; height:52px; border-radius:50%;
    border:1px solid var(--line-strong); background:rgba(12,11,9,0.72);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .25s ease, transform .25s var(--ease);
  }
  .rm-nav:hover{ border-color:var(--gold-line); transform:scale(1.08); }
  .rm-nav svg{ width:20px; height:20px; stroke:var(--gold-bright); fill:none; }
  @media (max-width:900px){
    .reel-modal{ padding:16px; }
    .rm-stage{ gap:0; }
    .rm-frame{ height:min(76vh, 680px); }
    .rm-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; }
    .rm-nav:hover{ transform:translateY(-50%) scale(1.08); }
    .rm-prev{ left:10px; }
    .rm-next{ right:10px; }
    .rm-close{ top:-44px; }
  }
  /* The card is a button now, not a link. */
  .reel-card{ text-align:left; width:100%; font:inherit; }

  /* ================================================== */
  /* V19 — RESPONSIVE PASS                              */
  /* Phones and tablets, gone over section by section.  */
  /* Everything below is a small-screen override, so it */
  /* sits last and nothing above it needs to change.    */
  /* ================================================== */

  /* --- 1. Card counts -------------------------------------------------------
     The grids above mostly went straight from three across to one, which meant
     an upright tablet showed a single column of very wide cards. The rule is
     three on a desktop, two on a tablet, one on a phone. 641px is the floor of
     the tablet band because .hero-capture and the nav already turn over at
     640px. */
  @media (min-width:641px) and (max-width:1000px){
    .place-grid,
    .quote-grid,
    .path-grid,
    .tour-grid,
    .sold-grid,
    .sold-grid.gallery,
    .media-grid,
    .services-grid,
    .contact-tiles,
    .pillars{ grid-template-columns:repeat(2, 1fr); }
    /* The fading divider between pillars is drawn as a left edge on every
       pillar after the first. In two columns that paints a line down the
       middle of the second row as well, at the wrong height. Two columns are
       already separated by the gap, so drop it. */
    .pillars .pillar + .pillar::before,
    .pillars.rows .pillar::before{ display:none; }
    .pillars{ gap:44px 36px; }
    /* Four pillars in two columns want a little more room per tile than the
       three-across desktop version gives them. */
    .pillars, .place-grid, .quote-grid, .path-grid,
    .tour-grid, .sold-grid, .media-grid{ max-width:none; }
  }
  @media (max-width:640px){
    .place-grid,
    .quote-grid,
    .path-grid,
    .tour-grid,
    .sold-grid,
    .sold-grid.gallery,
    .media-grid,
    .services-grid,
    .contact-tiles,
    .listing-grid,
    .biz-grid,
    .pillars{ grid-template-columns:1fr; }
  }

  /* --- 2. Section rhythm ----------------------------------------------------
     .sec-air is 150px top and bottom and .sec-air-sm is 100px. Both beat the
     plain `section` rule in the responsive block on specificity, so on a phone
     they never came down and every band opened with a third of a screen of
     nothing. That is the gap under the hero and the space above the free
     tools section. */
  @media (max-width:980px){
    .sec-air{ padding:104px 0; }
    .sec-air-sm{ padding:84px 0; }
  }
  @media (max-width:640px){
    .sec-air{ padding:72px 0; }
    .sec-air-sm{ padding:58px 0; }
    section{ padding:62px 0; }
    .cta-banner{ padding:76px 0; }
    /* Air under a headline stays generous, per the house rule. 92px is a lot
       of a 375px screen, but it steps down, it does not go away: taking it to
       zero ran the standfirst straight into the first card. */
    .head-center{ margin-bottom:52px; }
    .head-center h2{ font-size:clamp(1.7rem, 7.4vw, 2.2rem); }
    .head-center p{ font-size:0.95rem; margin-top:18px; }
  }
  @media (min-width:641px) and (max-width:900px){
    .head-center{ margin-bottom:68px; }
  }
  /* The free tools band follows a full width photo section, so it carries the
     separation already and does not need its own opening gap on top of it. */
  @media (max-width:640px){
    #tools.sec-air{ padding-top:52px; }
  }

  /* --- 3. Header ------------------------------------------------------------
     The phone link went beside the toggle, which put two tap targets within a
     thumb width of each other and repeated a number the sticky bar already
     carries. The header also sat tight against the top and bottom of the
     wordmark. */
  @media (max-width:980px){
    .nav-phone{ display:none; }
    .nav-inner{ padding-top:22px; padding-bottom:22px; }
    header.site-nav.scrolled .nav-inner{ padding-top:16px; padding-bottom:16px; }
    /* A 26x20 hamburger is a small target. The box grows, the bars do not. */
    .nav-toggle{
      width:46px; height:44px; margin-right:-10px;
      display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
    }
    .nav-toggle span{ left:auto; right:0; width:26px; }
    .nav-toggle span:nth-child(1){ top:12px; }
    .nav-toggle span:nth-child(2){ top:21px; }
    .nav-toggle span:nth-child(3){ top:30px; }
    .nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
    .nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
  }

  /* --- 4. The mobile menu ---------------------------------------------------
     This used to be positioned by JavaScript at a hard coded top:68px, which
     is where the header ends only before it shrinks on scroll. Every other
     state left a strip of page showing between the two. Anchoring it to the
     bottom of the header in CSS keeps them joined at any header height, and
     means the panel can be styled here rather than in a style object. */
  @media (max-width:980px){
    nav.primary-links.open{
      display:flex; flex-direction:column;
      position:absolute; top:100%; left:0; right:0;
      /* Flat and fully opaque, with no backdrop-filter. A blurred panel over
         the page looked right on paper and painted the section underneath
         straight through it: backdrop-filter makes its own stacking context
         and composites the backdrop back over the fill. There is nothing worth
         seeing behind a menu anyway. */
      background:#0C0B09;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line-strong);
      box-shadow:0 30px 60px -24px rgba(0,0,0,0.9);
      padding:8px 24px 22px;
      gap:0;
      max-height:calc(100vh - 100%); overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    /* Rows, not a list of small links. Each one is a full width target with a
       hairline under it, so the whole strip is tappable rather than just the
       few characters of the word. */
    nav.primary-links.open > a,
    nav.primary-links.open .nav-drop > a{
      font-size:1.12rem; font-weight:500; opacity:1;
      padding:17px 2px; width:100%;
      border-bottom:1px solid var(--line);
      justify-content:space-between;
    }
    nav.primary-links.open > a::after,
    nav.primary-links.open .nav-drop > a::after{ display:none; }
    nav.primary-links.open .nav-drop{ display:block; width:100%; }
    nav.primary-links.open .nav-drop > a svg{ width:15px; height:15px; }
    /* Submenu rows are indented and a step down in size, so the level reads
       without needing a rule between them. */
    nav.primary-links.open .drop-inner{ padding:2px 0 10px 4px; }
    nav.primary-links.open .drop-inner a{ padding:13px 12px; border-radius:10px; }
    nav.primary-links.open .drop-inner a b{ font-size:0.98rem; }
    nav.primary-links.open .drop-inner a span{ font-size:0.8rem; line-height:1.45; }
    nav.primary-links.open .nav-drop.open > a{ color:var(--gold-bright); }
    /* Last row has the panel's own bottom edge under it already. */
    nav.primary-links.open > *:last-child > a,
    nav.primary-links.open > a:last-child{ border-bottom:none; }
  }

  /* --- 5. Homepage hero -----------------------------------------------------
     The portrait crop was stretched over the full height of the hero, which on
     a phone is around 765px against an 819px image. That put Ryan and Paul's
     faces at 259 to 382px down the page and the wordmark at 241 to 337px, so
     the type sat across both of them.

     On a phone the hero splits in two instead: the photograph gets a band of
     its own at the top, sized and positioned so both faces are whole and
     nothing is cropped off the sides, and the type starts underneath it. The
     band fades into the page rather than ending on an edge. */
  @media (max-width:640px){
    .hero{
      --hero-band:clamp(240px, 35vh, 340px);
      display:block; min-height:0;
      padding:calc(var(--hero-band) + 8px) 22px 54px;
    }
    .hero-photo-zone{
      inset:0 0 auto 0; height:calc(var(--hero-band) + 46px);
      background-image:var(--hero-photo-mobile);
      background-size:cover;
      /* 14% down the portrait crop puts both heads in the middle of the band
         with the shoulders still in frame. */
      background-position:center 14%;
      -webkit-mask-image:linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
      mask-image:linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
    }
    /* No type crosses the photograph now, so the scrim only has to seat the
       bottom of the band into the page. */
    .hero-photo-zone::before{
      background:linear-gradient(180deg,
        rgba(12,11,9,0.30) 0%, rgba(12,11,9,0.06) 34%,
        rgba(12,11,9,0.10) 62%, rgba(12,11,9,0.55) 100%);
    }
    /* The locality line was reading as a second headline: same weight as the
       h1 under it and wrapping onto two lines. It is a caption. */
    .hero .eyebrow{
      font-size:0.6rem; letter-spacing:0.14em;
      margin-bottom:14px; opacity:0.9;
    }
    .hero-word{ font-size:clamp(2.6rem, 13.5vw, 3.4rem); }
    .hero-h1{ margin-top:12px; font-size:1.02rem; line-height:1.4; }
    .hero-about{ margin:18px auto 26px; font-size:0.97rem; line-height:1.65; }
    .hero-trust{ margin-top:20px; }
  }

  /* --- 6. Portraits ---------------------------------------------------------
     .pair-card was capped at 340px wide on a phone, so the two bios under the
     team video sat as narrow tiles inside a full width column with a band of
     empty page beside them. They are the section's main image. */
  @media (max-width:820px){
    /* The cap was 340px, so once the row went to a single column the portrait
       stayed a tile in the corner of a full width column. It is the section's
       main image, so it takes the column.

       The aspect has to open out as the column widens or the card eats the
       screen: at 768px a 4/3.1 card is 546px tall, half a tablet. */
    .pair-card{ max-width:none; aspect-ratio:16/10; }
    .pair-row{ gap:26px; }
    .pair-row .pair-body p{ font-size:0.97rem; line-height:1.72; }
  }
  @media (max-width:640px){
    .pair-card{ aspect-ratio:4/3.4; border-radius:16px; }
    .pair-card-body{ padding:22px 20px; }
    .pair-card .pair-name{ font-size:1.4rem; }
    .pair-row{ padding:34px 0; }
    .pair-mark{ font-size:2rem; margin-bottom:12px; }
  }

  /* --- 7. Footer ------------------------------------------------------------
     A left aligned single column of 0.86rem links reads as an afterthought on
     a phone: a thin ribbon of text down the left with the rest of the width
     empty. Centred and stepped up, it fills the space and the links become
     real targets. */
  /* The fixed bar needs the footer to end above it. There has been a
     `footer{ padding-bottom:110px }` at max-width:768 since the bar was
     added, but it never applied: the base `footer{ padding:80px 0 30px }`
     sits later in the file at equal specificity and reset it, so the bar has
     been covering the copyright line the whole time. Setting it here, last,
     is what makes it stick. */
  @media (max-width:768px){
    footer{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  }
  @media (max-width:640px){
    /* Top only. A `padding` shorthand would undo the clearance just above. */
    footer{ padding-top:60px; }
    .footer-top{
      grid-template-columns:1fr; gap:42px;
      text-align:center; padding-bottom:44px;
    }
    .footer-top .logo{ align-items:center; }
    .footer-top .logo .word{ font-size:1.5rem; }
    .footer-top .logo .sub{ font-size:0.62rem; }
    .footer-blurb{
      font-size:0.95rem; line-height:1.7;
      max-width:340px; margin-left:auto; margin-right:auto; margin-top:16px;
    }
    .footer-social{ justify-content:center; margin-top:22px; gap:14px; }
    .footer-social a{ width:44px; height:44px; }
    .footer-social a svg{ width:18px; height:18px; }
    .footer-col h5{ font-size:0.74rem; letter-spacing:0.14em; margin-bottom:14px; }
    .footer-col a, .footer-col p{ font-size:1rem; margin-bottom:2px; padding:9px 0; }
    /* The gold button is a button, not a link in a list, so it keeps its own
       shape and does not take the row padding above. */
    .footer-col a.btn{ display:inline-flex; padding:15px 28px; margin-top:6px; font-size:0.88rem; }
    .footer-bottom{
      flex-direction:column; justify-content:center; text-align:center;
      gap:12px; padding-top:26px; font-size:0.8rem; line-height:1.6;
    }
  }

  /* --- 8. The sticky bar and the Get In Touch sheet -------------------------
     Two competing buttons at the bottom of every page made the visitor choose
     before they knew what either did. One button now, and the choice between
     calling and writing happens inside the sheet where both options can be
     labelled properly. */
  .mobile-cta .btn{ font-size:0.92rem; padding:16px 10px; }
  .mobile-cta .btn svg{ width:17px; height:17px; stroke:currentColor; fill:none; }

  .touch-sheet{ position:fixed; inset:0; z-index:150; }
  .touch-sheet[hidden]{ display:none; }
  .ts-backdrop{
    position:absolute; inset:0; background:rgba(6,5,4,0.62);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .28s ease;
  }
  .touch-sheet.in .ts-backdrop{ opacity:1; }
  .ts-card{
    position:absolute; left:0; right:0; bottom:0;
    max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--bg-alt);
    border-top:1px solid var(--line-strong);
    border-radius:22px 22px 0 0;
    padding:10px 22px calc(26px + env(safe-area-inset-bottom));
    box-shadow:0 -24px 60px -20px rgba(0,0,0,0.85);
    transform:translateY(100%);
    transition:transform .34s var(--ease);
  }
  .touch-sheet.in .ts-card{ transform:translateY(0); }
  /* While a finger is on the sheet the transform is written frame by frame, so
     the transition has to be off or it fights the drag. */
  .touch-sheet.dragging .ts-card{ transition:none; }
  .ts-grab{
    display:block; width:44px; height:4px; border-radius:100px;
    background:var(--line-strong); margin:6px auto 16px;
  }
  .ts-close{
    position:absolute; top:14px; right:16px;
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:transparent;
  }
  .ts-close svg{ width:16px; height:16px; stroke:var(--muted); fill:none; }
  .ts-card h3{ font-size:1.5rem; text-align:center; letter-spacing:-0.02em; }
  .ts-sub{
    text-align:center; color:var(--muted); font-size:0.92rem;
    line-height:1.6; margin:8px auto 22px; max-width:330px;
  }
  /* Calling is the shortest route to a person, so it is the one that looks
     like the answer. The form underneath is for anyone who would rather not. */
  .ts-call{ width:100%; padding:18px 20px; font-size:1rem; }
  .ts-call svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
  .ts-hours{
    text-align:center; font-size:0.78rem; color:var(--muted-dim); margin-top:10px;
  }
  .ts-or{
    display:flex; align-items:center; gap:14px;
    margin:22px 0 18px; color:var(--muted-dim);
    font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  }
  .ts-or::before, .ts-or::after{
    content:''; flex:1; height:1px; background:var(--line);
  }
  .ts-card .field{ padding:16px 18px; font-size:1rem; }
  .ts-card textarea.field{ min-height:84px; }
  .ts-card .field-group .btn{ width:100%; padding:17px 20px; font-size:0.95rem; }
  .ts-card .form-success{ justify-content:center; text-align:center; margin-top:18px; }
  .ts-card .form-error{
    display:none; text-align:center; color:#E2795F;
    font-size:0.85rem; margin-top:14px;
  }
  body.ts-open{ overflow:hidden; }
  /* Wider than a phone the sheet stops being a sheet and becomes a centred
     card, because the sticky bar it belongs to is a phone-only element that a
     tablet in landscape can still reach through the keyboard. */
  @media (min-width:620px){
    .ts-card{
      left:50%; right:auto; bottom:auto; top:50%;
      width:440px; max-height:86vh;
      border-radius:20px; border:1px solid var(--line-strong);
      transform:translate(-50%, -44%); opacity:0;
      transition:transform .3s var(--ease), opacity .3s ease;
      padding:10px 30px 30px;
    }
    .touch-sheet.in .ts-card{ transform:translate(-50%, -50%); opacity:1; }
    .ts-grab{ display:none; }
  }

  /* --- 9. Rails -------------------------------------------------------------
     The tracks are real scroll containers, so a finger already moved them. A
     cursor did not, and neither showed any sign that dragging was possible.
     initRails now drags on pointer events; these are the affordances. */
  .rail-track{ cursor:grab; }
  .rail-track.dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
  /* A drag that starts on a link must not end as a click on it. */
  .rail-track.dragging *{ pointer-events:none; }
  .rail-track.dragging img,
  .rail-track.dragging video{ -webkit-user-drag:none; user-select:none; }
  @media (max-width:640px){
    .rail-nav{ margin-top:26px; }
  }
  /* This was briefly `proximity`, on the theory that mandatory snapping fights
     a long flick. It does not: proximity lets a short swipe stop wherever the
     finger left it, so a rail settles showing two half cards and looks stuck.
     Mandatory always lands on a card edge, which is the app behaviour. */
  .rail-track{ scroll-snap-type:x mandatory; }
  /* A drag is a scroll the script is writing frame by frame, and a mandatory
     snap point fights it the whole way. Snapping comes back on release. */
  .rail-track.dragging{ scroll-snap-type:none; }

  /* --- 10. Light band corrections ------------------------------------------
     Not a screen size fix, but found while going over the pages at phone
     width, and wrong at every width.

     section.light repaints muted text as #5E5749 through `section.light p`.
     The bio paragraphs beat that rule on specificity, three classes to one, so
     they kept the dark theme's --muted and rendered at 2.29:1 against the
     cream band. That is well under the 4.5:1 a paragraph needs, and it is the
     longest stretch of reading on the homepage. */
  section.light .pair-row .pair-body p{ color:#5E5749; }
  section.light .pair-row .pair-body strong{ color:#211D18; }
  section.light .pair-row{ border-color:rgba(33,29,24,0.14); }
  section.light .pair-mark{ color:transparent; -webkit-text-stroke:1px rgba(138,106,47,0.45); }
  /* The eyebrow gold was 4.34:1 on cream. Uppercase at 11px counts as small
     text, so it needs 4.5. Two steps darker on the same hue reads identically
     and clears it at 5.05. */
  section.light .eyebrow,
  section.light .eyebrow-rule{ color:#7E6029; }

  /* --- 11. Contrast ---------------------------------------------------------
     Found by measuring every text node against the background actually painted
     behind it, on all seventeen pages. These are the ones that failed WCAG AA
     (4.5:1 for body and small text, 3:1 for large). Nothing here changes a
     layout; the hues are the same, moved far enough to be readable on a phone
     screen in daylight. */

  /* A dark .form-card inside a light band took the band's near-black heading
     colour, which put #211D18 on a #1A1815 panel: 1.06:1, an invisible
     heading. This is the sold gallery's empty state, the screen a visitor sees
     when no sold listings have been published yet. */
  section.light .form-card h3{ color:var(--cream); }
  section.light .form-card .sub,
  section.light .form-card p{ color:var(--muted); }
  section.light .form-card .micro{ color:var(--muted-dim); }

  /* The same specificity trap as the bios in block 10: a two class selector
     setting --muted beat `section.light p`, so the intro paragraph beside the
     contact FAQ rendered at 2.29:1 on cream. */
  section.light .split-anchor .anchor-col p{ color:#5E5749; }
  section.light .sold-count{ color:#5E5749; }
  section.light .biz-card .tag{ color:#785B26; }
  section.light .agent-role-line,
  section.light .agent-kicker .last{ color:#7E6029; }

  /* --- 12. Fact tiles and the proof bar ------------------------------------
     The three drive-time grids on the community pages carried their column
     count as an inline style, which an inline style always wins, so the
     responsive rule for .fact-tiles could never reach them: six tiles stayed
     three across down to 375px, giving 100px columns holding a 45 character
     label. The inline style is a class now, and the count steps down properly.

     Same idea for the proof bar, whose labels are sentences rather than the
     two or three words a two-up stat strip assumes. */
  .fact-tiles-3{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:900px){
    .fact-tiles-3{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .fact-tiles-3,
    .fact-tiles{ grid-template-columns:1fr; }
    .fact-tile{ text-align:center; }
    .proof-bar{ grid-template-columns:1fr; }
    .proof-item{ padding:20px 16px; }
    .proof-item + .proof-item{ border-top:1px solid var(--line); }
  }

  /* --- 13. The homepage hero on an upright tablet ---------------------------
     Block 5 splits the hero into a photo band and a type block below 640px.
     Between 641 and 1024 in portrait the full bleed treatment was still
     running, and it is worse there than it was on a phone: at 768x1024 the
     faces land at 469 to 716 down the page while the wordmark, the subhead and
     the whole opening paragraph sit at 386 to 682. The type crosses both of
     them. The photo is already top aligned, so there is no room to move it up.

     Same split as the phone, with the band and the crop tuned for this width.
     The band is deeper because the type below it is smaller relative to the
     screen, and 26% down the portrait crop lands both heads just under the top
     of the band across the whole 641 to 1024 range. */
  @media (orientation:portrait) and (min-width:641px) and (max-width:1024px){
    .hero{
      --hero-band:clamp(380px, 42vh, 520px);
      display:block; min-height:0;
      padding:calc(var(--hero-band) + 16px) 32px 76px;
    }
    .hero-photo-zone{
      inset:0 0 auto 0; height:calc(var(--hero-band) + 60px);
      background-size:cover;
      background-position:center 26%;
      -webkit-mask-image:linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
      mask-image:linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    }
    .hero-photo-zone::before{
      background:linear-gradient(180deg,
        rgba(12,11,9,0.32) 0%, rgba(12,11,9,0.06) 34%,
        rgba(12,11,9,0.10) 62%, rgba(12,11,9,0.55) 100%);
    }
    .hero .eyebrow{ font-size:0.66rem; letter-spacing:0.16em; margin-bottom:18px; }
    .hero-word{ font-size:clamp(3.4rem, 9vw, 4.6rem); }
    .hero-about{ margin:22px auto 30px; }
  }

  /* --- 14. The header between 981 and 1150 ---------------------------------
     The desktop nav returns at 981px but does not fit until about 1100. At
     1024, the width of a landscape iPad and plenty of laptops, the wordmark's
     right edge and the first nav link were both at 241px: "Sadler" printed on
     top of "Buy", and the phone link was squeezed from 130px to 62px so the
     number broke onto three lines.

     The phone link is the thing to drop. It is the least used item in the row,
     the footer and the Get In Touch sheet both carry the number, and removing
     it frees enough width for the rest to sit properly. */
  @media (min-width:981px) and (max-width:1150px){
    .nav-phone{ display:none; }
    nav.primary-links{ gap:26px; }
    .nav-inner{ padding-left:28px; padding-right:28px; }
    .nav-right{ gap:16px; }
  }
  /* Whatever the width, the number itself never breaks across lines. */
  .nav-phone{ white-space:nowrap; }

  /* --- 15. Hard line breaks in page headlines ------------------------------
     Four page heroes carry a <br> that balances the headline on a wide screen.
     On a phone the line is already wrapping, so the break lands mid phrase and
     the headline goes ragged: "Serving St. / Thomas, / Port Stanley and /
     London" instead of a clean three line wrap. Below 640 the break stands
     down and the browser wraps it.

     Each of those four headlines now carries a real space before its <br>.
     Without it, hiding the break closes the gap and the two words either side
     run together: "Serving St. Thomas,Port Stanley". The space is collapsed at
     the end of a line on a wide screen, so it costs nothing there. */
  @media (max-width:640px){
    .page-hero h1 br{ display:none; }
    .page-hero h1{ text-wrap:balance; }
  }

  /* ================================================== */
  /* V20 — SECOND RESPONSIVE ROUND                      */
  /* ================================================== */

  /* --- 1. Stacked buttons match width --------------------------------------
     Two buttons side by side wrap to two lines on a phone, and because a pill
     is shrink to fit they end up different widths, which reads as a mistake
     rather than a pair. Anywhere two or more of them stack, they stack to the
     same width. `:has` keeps a lone button its natural size. */
  @media (max-width:640px){
    .page-hero-actions:has(.btn + .btn),
    .hero-actions:has(.btn + .btn),
    .cta-actions:has(.btn + .btn),
    .tool-result-actions:has(.btn + .btn),
    .sec-cta:has(.btn + .btn),
    .f-closing:has(.btn + .btn){
      flex-direction:column; align-items:stretch; gap:12px;
    }
    .page-hero-actions:has(.btn + .btn) .btn,
    .hero-actions:has(.btn + .btn) .btn,
    .cta-actions:has(.btn + .btn) .btn,
    .tool-result-actions:has(.btn + .btn) .btn,
    .sec-cta:has(.btn + .btn) .btn,
    .f-closing:has(.btn + .btn) .btn{
      width:100%; flex:0 0 auto; justify-content:center;
    }
    /* The old rule gave these a 40% basis, which is what made a wrapped pair
       uneven in the first place. */
    .hero-actions .btn{ flex:0 0 auto; }
  }

  /* --- 2. Footer column headings -------------------------------------------
     Explore, Areas, Contact and Get Started are labels over a list, not
     headings. At 0.74rem with the links under them at 1rem they were reading
     as titles in their own right. Same treatment as the hero's locality line:
     small, wide tracked, and quiet. */
  @media (max-width:640px){
    .footer-col h5{
      font-size:0.62rem; letter-spacing:0.2em;
      color:var(--gold); opacity:0.85; margin-bottom:16px;
    }
    /* Still comfortably bigger than the 0.86rem this started at, just no
       longer competing with the label above it. */
    .footer-col a, .footer-col p{ font-size:0.94rem; }
  }

  /* --- 3. Funnel badge -----------------------------------------------------
     The pill above the question is a tagline, not a heading. On a phone it was
     0.72rem uppercase at 0.14em tracking inside 18px of padding, which made it
     the widest and loudest thing on the screen. */
  @media (max-width:640px){
    /* The paid funnels give the badge its own size at two classes deep, so
       this has to match that weight or it never lands. */
    .f-badge,
    .funnel-light .f-badge,
    .tool-funnel .f-badge{
      font-size:0.58rem; letter-spacing:0.14em;
      padding:7px 14px; gap:7px;
      /* One line. "Ontario's Fastest Home Search" wrapping inside a pill
         turns a tagline into a two line block with a border round it. */
      white-space:nowrap; max-width:100%;
    }
    .f-badge svg,
    .funnel-light .f-badge svg{ width:11px; height:11px; flex-shrink:0; }
    .f-step .f-kicker{ font-size:0.62rem; letter-spacing:0.18em; }
  }

  /* --- 4. Option bubbles centre, not left ----------------------------------
     A rule below 620px pushed the chips to flex-start on the theory that a
     half filled last row looks wrong centred. It looks worse left aligned
     under a centred question: the whole stage is centred and the chips were
     the only thing hanging off the left edge. */
  .f-chips{ justify-content:center; }
  @media (max-width:620px){
    .f-chips{ justify-content:center; }
  }

  /* --- 5. Home search needs air at the top ---------------------------------
     The paid funnels open straight into the first question with the header
     tight above it. */
  @media (max-width:640px){
    .funnel-stage{ padding:34px 20px 56px; }
    .funnel-light .funnel-stage{ padding-top:42px; }
    .funnel-top{ padding:18px 18px; }
  }

  /* --- 6. Page hero padding, out of the inline style -----------------------
     Five page heroes carried their padding as an inline style, which no media
     query can beat, so they held 132px of top padding down to 375px. It is a
     class now and steps down like everything else. */
  .page-hero-tall{ padding:132px 24px 128px; }
  @media (max-width:980px){ .page-hero-tall{ padding:104px 24px 96px; } }
  @media (max-width:640px){ .page-hero-tall{ padding:72px 22px 64px; } }

  /* --- 7. Contact hero on a phone ------------------------------------------
     The desktop crop sits Ryan and Paul hard left, and the portrait crop puts
     them across the top. Either way the headline and the standfirst were
     painting over both faces, and the scrim needed to be heavy enough to read
     against them, which left the photo looking like a dark texture rather
     than a picture of the two people you are about to message.

     Same split as the homepage: the photograph gets a band of its own at the
     top with both faces whole, and the type starts underneath it. The form
     still breaks the bottom edge, which is the point of the section. */
  @media (max-width:640px){
    .page-hero.hero-banner-contact{
      --contact-band:clamp(230px, 34vh, 320px);
      position:relative;
      padding-top:calc(var(--contact-band) + 14px);
      padding-bottom:74px;
      background-image:none;                 /* the band below paints it */
      background-color:var(--bg);
    }
    .page-hero.hero-banner-contact::before{
      content:''; position:absolute; left:0; right:0; top:0;
      height:calc(var(--contact-band) + 46px);
      background-image:var(--contact-banner-mobile);
      background-size:cover;
      /* 19% down the portrait crop centres both heads in the band across the
         whole phone range. */
      background-position:center 19%;
      -webkit-mask-image:linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
      mask-image:linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
    }
    /* A light wash only, since no type crosses the photograph now. */
    .page-hero.hero-banner-contact::after{
      content:''; position:absolute; left:0; right:0; top:0;
      height:calc(var(--contact-band) + 46px); pointer-events:none;
      background:linear-gradient(180deg,
        rgba(12,11,9,0.34) 0%, rgba(12,11,9,0.06) 34%,
        rgba(12,11,9,0.12) 62%, rgba(12,11,9,0.62) 100%);
    }
    .page-hero.hero-banner-contact > *{ position:relative; z-index:2; }
  }

  /* --- 8. Sliders sit centred on a phone -----------------------------------
     Cards snapped to the left edge, so a slide sat hard against the left of
     the screen with the next one cut off at the right. Centred, the card you
     are looking at is the middle of the screen and its neighbours peek in
     evenly either side, which is what a carousel on a phone should do.

     Two systems, because the homepage listings and the review rails were
     built separately. The rails clone their cards to loop, so there is always
     something either side and the browser can centre any card unaided. The
     listings slider is a finite list, so the first and last cards need side
     room to be able to reach the middle at all. */
  @media (max-width:640px){
    .rail-track > *{ scroll-snap-align:center; }

    .prop-slider{
      --card-w:min(76vw, 320px);
      /* Percentage padding resolves against the parent's width, not this
         element's, so it does not feed back into the card width. */
      padding-left:calc((100% - var(--card-w)) / 2);
      padding-right:calc((100% - var(--card-w)) / 2);
      scroll-padding-left:calc((100% - var(--card-w)) / 2);
      scroll-padding-right:calc((100% - var(--card-w)) / 2);
      /* The edge fade assumed a card bleeding off both sides. Centred, the
         gutters are empty, so the fade only dimmed the card itself. */
      -webkit-mask-image:none; mask-image:none;
    }
    .prop-slider .prop-card{
      flex:0 0 var(--card-w);
      scroll-snap-align:center;
    }
  }

  /* --- 9. Review cards, capped with a way to open them ---------------------
     Some of these reviews run to eight or nine lines, and because the cards in
     a rail stretch to match the tallest one, a single long review set the
     height of every card in the row. Clamped, they are a consistent, scannable
     block; anyone who wants the rest opens it themselves, which is a better
     trade than deciding for them what to cut.

     The clamp class is added by script and only where the text actually
     overflows, so a short review never gets a Read more that does nothing. */
  .quote-card.qc-clamp p{
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:7; line-clamp:7;
    overflow:hidden;
    /* -webkit-box ignores flex:1 from the base rule, which is what let the
       card size to the clamped text rather than to its tallest neighbour. */
    flex:0 1 auto;
  }
  @media (max-width:640px){
    .quote-card.qc-clamp p{ -webkit-line-clamp:6; line-clamp:6; }
  }
  .qc-more{
    align-self:flex-start; margin-top:-6px;
    font-size:0.82rem; font-weight:600; color:var(--gold-bright);
    background:none; border:0; padding:2px 0; cursor:pointer;
    border-bottom:1px solid var(--gold-line);
    transition:color .2s ease, border-color .2s ease;
  }
  .qc-more:hover{ color:var(--cream); border-bottom-color:var(--cream); }
  section.light .qc-more{ color:#7E6029; border-bottom-color:rgba(126,96,41,0.4); }
  section.light .qc-more:hover{ color:#211D18; border-bottom-color:#211D18; }

  /* --- 10. Numbered steps stack on a phone ---------------------------------
     The row is a three column grid: number, icon, body. Narrowing the first
     two columns kept that shape down to 375px, which left a 38px number and a
     44px icon stranded in a column of their own beside a very narrow block of
     text. The selling page's editorial rows stack instead, and these should
     match: number and icon together on their own line, the words underneath
     at full width. */
  @media (max-width:640px){
    .num-row{
      /* The body spans both columns, so two `auto` columns get stretched to
         its width and the icon drifts into the middle of the row. The second
         column takes the slack instead and the icon sits at the start of it,
         which keeps it beside the number. */
      grid-template-columns:auto 1fr;
      grid-template-areas:
        "num icon"
        "body body";
      align-items:center;
      gap:16px 14px;
      padding:30px 0;
    }
    .num-row .n{ grid-area:num; padding-top:0; font-size:0.9rem; }
    .num-row .num-icon{ grid-area:icon; justify-self:start; }
    .num-row .row-body{ grid-area:body; }
    .num-row h4{ font-size:1.18rem; margin-bottom:8px; }
    /* The hover rail sits off the left edge, which on a phone is off screen. */
    .num-row::after{ display:none; }
  }

  /* --- 11. Eyebrows and section labels on a phone --------------------------
     The hero's locality line was brought down in V19 block 5, but only there.
     Every other eyebrow on the site kept its desktop size, so a label like
     "Buying, Selling, Or Just Wondering" wrapped onto two lines at almost the
     weight of the headline under it. These are captions. They all step down
     together now, and the rule lines beside .eyebrow-rule come in with them
     so the whole mark stays in proportion. */
  @media (max-width:640px){
    .eyebrow{ font-size:0.6rem; letter-spacing:0.16em; }
    .eyebrow-rule{
      font-size:0.58rem; letter-spacing:0.18em;
      gap:12px; margin-bottom:18px;
    }
    .eyebrow-rule::after, .eyebrow-rule.centered::before{ width:32px; }
    /* The closing band's headline is the last thing on most pages and was
       still opening at a 2rem floor, which is a lot of a 375px screen. */
    .cta-banner h2{ font-size:clamp(1.7rem, 7.4vw, 2.2rem); margin:12px auto 16px; }
    /* The eyebrow in this band is a <p>, so it has to be excluded here or the
       standfirst size wins over the caption size set above. */
    .cta-banner p:not(.eyebrow){ font-size:0.95rem; }
    .cta-banner .eyebrow{ font-size:0.6rem; letter-spacing:0.16em; }
  }