@font-face{font-family:"Clash Display";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/clash-display-400.woff2) format("woff2")}
@font-face{font-family:"Clash Display";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/clash-display-500.woff2) format("woff2")}
@font-face{font-family:"Clash Display";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/clash-display-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}

  :root{
    --headerH:84px;
    --shell:#F5F3EF;
    --stone:#EBE8E2;
    --white:#FFFFFF;
    --ink:#131315;
    --ink-2:#1C1D20;
    --blue:#0A84FF;
    --blue-2:#0064D6;
    /* section tokens: dark is the house style, light sections opt in */
    --bg:var(--ink);
    --fg:#F0EEE9;
    --fg-2:#C7C5C0;
    --mute:#8B8984;
    --rule:rgba(240,238,233,.13);
    --rule-2:rgba(240,238,233,.30);
    --panel:#1C1D20;
    --accent:#4DA3FF;
    --display:"Clash Display", "Poppins", "Helvetica Neue", Arial, sans-serif;
    --sans:"Poppins", "Helvetica Neue", Arial, sans-serif;
    --wrap:1280px;
    --gutter:clamp(20px, 5vw, 72px);
  }
  .on-light{--bg:var(--shell); --fg:#17181B; --fg-2:#4B4D53; --mute:#7C7A76; --rule:rgba(23,24,27,.13); --rule-2:rgba(23,24,27,.28); --panel:#E7E4DE; --accent:var(--blue)}
  .on-light.white{--bg:var(--white); --panel:#F1EFEB}
  .on-light.stone{--bg:var(--stone); --panel:#E1DDD6}

  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html{color-scheme:light; scroll-behavior:smooth}
  body{margin:0; background:var(--ink); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip}
  img{max-width:100%; height:auto; display:block}
  a{color:inherit}
  p{margin:0}
  h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.04; margin:0; letter-spacing:-.025em; text-wrap:balance}
  h1{font-size:clamp(2.9rem, 5.8vw, 5.2rem)}
  h2{font-size:clamp(2.1rem, 3.8vw, 3.2rem)}
  h3{font-family:var(--display); font-weight:500; font-size:clamp(1.4rem, 1.9vw, 1.75rem); letter-spacing:-.02em}
  em{font-style:normal; font-weight:400}
  .section{background:var(--bg); color:var(--fg); padding-block:clamp(84px, 10vw, 148px)}
  .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
  .muted{color:var(--mute)}
  .lede{color:var(--fg-2); font-size:1.05rem; max-width:58ch}

  /* Mono details: labels, coordinates, data */
  .label{font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
  .label.blue{color:var(--accent)}
  .label.quiet{color:var(--mute)}
  .coord{font-family:var(--sans); font-weight:400; font-size:.62rem; letter-spacing:.14em; color:var(--mute); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:8px; opacity:.85}
  .coord::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none}
  .terms{font-family:var(--sans); font-weight:300; font-size:.72rem; letter-spacing:.01em; color:var(--mute); line-height:1.8}

  /* Buttons and links */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:500; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; padding:17px 28px; border:1px solid transparent; border-radius:2px; cursor:pointer; text-decoration:none; line-height:1; transition:background .2s, color .2s, border-color .2s}
  .btn-ink{background:var(--fg); color:var(--bg); border-color:var(--fg)}
  .btn-ink:hover{background:var(--accent); border-color:var(--accent); color:#fff}
  .btn-blue{background:var(--blue); color:#fff; border-color:var(--blue)}
  .btn-blue:hover{background:var(--blue-2); border-color:var(--blue-2)}
  .btn-line{background:transparent; color:var(--fg); border-color:var(--rule-2)}
  .btn-line:hover{border-color:var(--accent); color:var(--accent)}
  .btn svg{width:15px; height:15px; flex:none}
  @media (max-height: 820px){ .first-screen .hero-note{display:none} }
  .quietlink{position:relative; z-index:1}
  /* The supporting line sits under the lede, quieter than it. */
  .guide-support{margin-top:.9rem; color:var(--mute); font-size:1rem}
  .quietlink{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.08em; color:var(--accent); transition:gap .2s}
  .quietlink:hover{gap:15px}
  .quietlink svg{width:14px; height:14px}
  .ruled{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); padding-bottom:7px; border-bottom:1px solid var(--rule-2); transition:color .2s, border-color .2s}
  .ruled:hover{color:var(--accent); border-color:var(--accent)}
  .ruled svg{width:14px; height:14px}
  :focus-visible{outline:2px solid var(--blue); outline-offset:3px}

  /* Header */
  .header{position:sticky; top:0; z-index:40; background:rgba(245,243,239,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(23,24,27,.1); --fg:#17181B; --fg-2:#4B4D53; --mute:#7C7A76; --rule:rgba(23,24,27,.12); --rule-2:rgba(23,24,27,.28); --accent:var(--blue); --bg:var(--shell); color:var(--fg)}
  .header .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px; height:var(--headerH)}
  .wordmark{font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; line-height:1}
  .nav{display:flex; gap:34px}
  .nav a{font-family:var(--sans); font-size:.8rem; font-weight:400; text-decoration:none; color:var(--fg-2); padding-bottom:4px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
  .nav a:hover, .nav a.active{color:var(--fg); border-color:var(--blue)}
  .header .btn{padding:14px 22px}
  .menu-btn{display:none; background:none; border:1px solid var(--rule-2); border-radius:2px; width:44px; height:44px; place-items:center; cursor:pointer; color:var(--fg)}
  .menu-btn svg{width:20px; height:20px}
  .mobile-nav{display:none; border-top:1px solid rgba(23,24,27,.1); background:var(--shell)}
  .mobile-nav .wrap{display:flex; flex-direction:column; height:auto; padding-block:6px}
  .mobile-nav a{padding:15px 0; text-decoration:none; font-size:.9rem; border-bottom:1px solid var(--rule)}
  .mobile-nav a:last-child{border-bottom:0}
  .header.open .mobile-nav{display:block}

  /* Hero */
  .hero{position:relative; overflow:hidden; background:radial-gradient(78% 88% at 70% 46%, #34353A 0%, #1B1C1F 48%, #0F1012 100%); color:var(--fg)}
  /* Hero and the stats strip together fill one viewport, below the sticky header */
  .first-screen{min-height:100svh; margin-top:calc(-1 * (var(--headerH) + 1px));
    padding-top:calc(var(--headerH) + 1px); background:var(--ink); display:flex; flex-direction:column}
  .first-screen .hero{flex:1 1 auto; display:flex; align-items:center}
  .first-screen .stats{flex:0 0 auto}
  /* The peninsula note is pinned to the hero's bottom-left, so the centred copy has to
     leave it room or the tertiary link lands on top of it. */
  .first-screen .hero .wrap{padding-block:clamp(16px, 4.2vh, 104px) calc(clamp(16px, 4.2vh, 104px) + 34px)}
  .first-screen .hero-copy{gap:clamp(10px, 2.2vh, 26px)}
  .first-screen .hero-copy h1{font-size:clamp(2.2rem, min(5.6vw, 7.4vh), 5.2rem)}
  .first-screen .hero-copy .lede{font-size:clamp(.97rem, 1.7vh, 1.08rem)}
  .first-screen .hero-actions{margin-top:0}
  .hero .wrap{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(28px, 5vw, 80px); align-items:center; padding-block:clamp(56px, 7vw, 104px) clamp(56px, 7vw, 96px); width:100%}
  .hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:26px}
  /* Sits below the buttons with real air either side, so it reads as a deliberate
     third option rather than a stray member of the button group. */
  .hero-copy .quietlink{margin-top:clamp(10px, 1.6vh, 20px); margin-bottom:clamp(6px, 1.2vh, 14px)}
  .hero-copy h1{max-width:13ch}
  .hero-copy .lede{font-size:1.08rem; max-width:48ch}
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap}
  .hero-figure{position:relative; margin:0; justify-self:end; width:100%; max-width:560px}
  .hero-glow{position:absolute; inset:0; background:radial-gradient(52% 66% at 70% 58%, rgba(255,255,255,.14), transparent 70%); pointer-events:none}
  .first-screen .hero-figure img{max-height:min(54vh, 600px); width:auto; margin-inline:auto}
  .hero-figure img{position:relative; width:100%; -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%); mask-image:linear-gradient(to bottom, #000 82%, transparent 100%)}
  .hero-note{position:absolute; left:var(--gutter); bottom:26px; z-index:0; pointer-events:none; display:flex; align-items:center; gap:10px; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute)}
  .hero-note::before{content:""; width:26px; height:1px; background:var(--rule-2)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s} .d2{animation-delay:.16s} .d3{animation-delay:.27s} .d4{animation-delay:.38s} .d5{animation-delay:.48s}
  .hero-figure{opacity:0; animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .12s forwards}
  @keyframes rise{to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ .rise, .hero-figure{opacity:1; transform:none; animation:none} html{scroll-behavior:auto} *{transition:none !important} }

  /* Stats */
  .stats{background:var(--ink); color:var(--fg); border-top:1px solid var(--rule)}
  .stats .wrap{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
  .stat{padding:clamp(18px, 3.6vh, 38px) 40px clamp(20px, 3.8vh, 40px) 0; display:flex; flex-direction:column; gap:clamp(4px, 1vh, 10px); border-right:1px solid var(--rule)}
  .stat + .stat{padding-left:40px}
  .stat:last-child{border-right:0}
  .stat b{font-family:var(--display); font-weight:500; font-size:2.3rem; line-height:1; letter-spacing:-.025em}
  .stat span{font-family:var(--sans); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}

  /* Editorial split */
  .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:clamp(28px, 5vw, 88px)}
  .split-head{display:flex; flex-direction:column; gap:14px}
  .prose{display:flex; flex-direction:column; gap:1.3rem; max-width:62ch; color:var(--fg-2); margin-top:1.8rem}
  .prose p{font-size:1.03rem}
  .statement{font-family:var(--display); font-weight:500; font-size:clamp(1.8rem, 3vw, 2.7rem); line-height:1.16; letter-spacing:-.025em; max-width:21ch}
  .statement em{font-weight:400; color:var(--fg-2)}

  /* Reel */
  .reel-wrap{margin:clamp(48px, 6vw, 80px) 0 0; display:flex; flex-direction:column; gap:16px; max-width:360px}
  /* The reel lives in the left column under the section label, so the copy keeps its
     full measure on the right and the section stops running so long. */
  .split-head .reel-wrap{margin:14px 0 0; max-width:none}
  .reel{position:relative; aspect-ratio:9/16; background:var(--panel); border:1px solid var(--rule); display:grid; place-items:center; width:100%; cursor:pointer; color:var(--fg); padding:0; border-radius:2px; overflow:hidden}
  .reel video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
  .reel.playing{cursor:default}
  .reel.playing .reel-ring{opacity:0; pointer-events:none}
  .reel:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
  .reel-ring{position:relative; z-index:1; width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.55); background:rgba(19,19,21,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; transition:border-color .25s, background .25s, color .25s, opacity .3s}
  .reel:hover .reel-ring{border-color:var(--blue); background:var(--blue); color:#fff}
  .reel-wrap .reel-caption{position:static; display:flex; flex-direction:column; gap:5px}
  .reel-ring svg{width:20px; height:20px; margin-left:3px}
  .reel-caption{display:flex; flex-direction:column; gap:7px; text-align:left}
  .reel-caption b{font-family:var(--display); font-weight:500; font-size:1.25rem; line-height:1.15; letter-spacing:-.02em}
  .reel-caption span{font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
  .reel-msg{margin-top:12px; font-family:var(--sans); font-size:.7rem; color:var(--mute)}

  /* Areas */
  .areas-head{display:flex; justify-content:space-between; align-items:flex-end; gap:36px; flex-wrap:wrap}
  .areas-head > div{display:flex; flex-direction:column; gap:14px; max-width:40ch}
  .areas{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; margin-top:clamp(48px, 6vw, 76px); border-top:1px solid var(--rule)}
  .area{display:flex; flex-direction:column; gap:16px; padding:44px 40px 44px 0; border-right:1px solid var(--rule); text-decoration:none; color:inherit}
  .area + .area{padding-left:40px}
  .area:last-child{border-right:0}
  .area h3{font-size:clamp(1.8rem, 2.4vw, 2.3rem); transition:color .2s}
  .area:hover h3{color:var(--accent)}
  .area p{color:var(--fg-2); font-size:.97rem}
  .area .terms{padding-top:14px; border-top:1px solid var(--rule)}
  .area .quietlink{margin-top:auto; padding-top:18px}
  .secondary{margin-top:44px; padding-top:26px; border-top:1px solid var(--rule); display:flex; gap:12px 28px; flex-wrap:wrap; align-items:baseline}
  .secondary p{color:var(--mute); font-size:.92rem}
  .secondary a{color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule-2); transition:color .2s, border-color .2s}
  .secondary a:hover{color:var(--accent); border-color:var(--accent)}

  /* Listings */
  .list-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:2.4rem}
  .list-head > div{display:flex; flex-direction:column; gap:14px}
  .list-head.second{margin-top:clamp(60px, 7vw, 96px)}
  .cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 34px)}
  .card{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:none}
  .card-media{position:relative; aspect-ratio:4/3; background:var(--panel); overflow:hidden; border-radius:2px}
  .card-media::after{content:attr(data-note); position:absolute; inset:auto 0 0 0; padding:12px 14px; font-family:var(--sans); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
  .card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .card:hover .card-media img{transform:scale(1.03)}
  .card-body{padding-top:18px; display:flex; flex-direction:column; gap:7px; flex:1; border-top:1px solid var(--rule); margin-top:18px}
  .card-body h3{font-size:1.4rem; transition:color .2s}
  .card:hover .card-body h3{color:var(--accent)}
  .card-meta{font-size:.88rem; color:var(--mute)}
  .card-status{margin-top:12px; font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); display:inline-flex; align-items:center; gap:9px}
  .card-status svg{width:13px; height:13px; flex:none}
  .card.text-card{justify-content:center; background:var(--panel); padding:32px 28px; border-radius:2px}
  .card.text-card .card-body{border-top:0; margin-top:0; padding-top:0}
  .card-status.live{color:var(--accent)}
  .card-note{margin-top:2rem; font-family:var(--sans); font-size:.66rem; color:var(--mute); letter-spacing:.04em}

  /* Reviews */
  .words{text-align:center}
  .quote{max-width:28ch; margin:2rem auto 0; font-family:var(--display); font-weight:400; font-style:normal; font-size:clamp(1.65rem, 3vw, 2.7rem); line-height:1.24; letter-spacing:-.025em}
  /* Sizer and live quote share one grid cell, so the block never changes height. */
  .quote-stack{display:grid}
  .quote-stack > *{grid-area:1 / 1}
  .quote-sizer{display:grid; visibility:hidden; pointer-events:none}
  .quote-sizer > *{grid-area:1 / 1}
  /* A coloured block behind the words read as browser-selected text. The emphasis is
     carried by weight and brightness instead: the quote sits lighter than full white and
     the highlighted phrase steps up to it. */
  .quote{color:var(--fg-2)}
  .quote mark{background:none; color:var(--fg); font-weight:500; padding:0}
  .quote-by{margin-top:1.6rem; display:flex; flex-direction:column; gap:7px; align-items:center}
  .quote-by b{font-weight:500; font-size:.92rem}
  .quote-by span{font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
  .quote-nav{margin-top:2.4rem; display:flex; align-items:center; justify-content:center; gap:20px}
  .quote-nav button{background:none; border:1px solid var(--rule-2); color:var(--fg); width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:border-color .2s, color .2s}
  .quote-nav button:hover{border-color:var(--blue); color:var(--blue)}
  .quote-nav button svg{width:15px; height:15px}
  .quote-nav .count{font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; color:var(--mute); min-width:5ch; font-variant-numeric:tabular-nums}
  .stars{color:var(--accent); letter-spacing:.22em; font-size:.8rem}
  .reviews-cta{margin-top:3.2rem; padding-top:2.6rem; border-top:1px solid var(--rule); display:flex; flex-direction:column; align-items:center; gap:16px}
  .btn-lg{font-size:.82rem; padding:22px 40px; letter-spacing:.12em}
  .reviews-cta-note{font-family:var(--sans); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
  .trust{margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid var(--rule); font-family:var(--sans); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:center; gap:16px; flex-wrap:wrap}

  /* FAQ */
  .faq-list{border-top:1px solid var(--rule); margin-top:1.6rem}
  .faq-list details{border-bottom:1px solid var(--rule)}
  .faq-list summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; font-family:var(--display); font-weight:500; font-size:clamp(1.1rem, 1.5vw, 1.3rem); line-height:1.35; letter-spacing:-.02em; transition:color .2s}
  .faq-list summary:hover{color:var(--accent)}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary::after{content:""; width:10px; height:10px; flex:none; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-3px,-3px); transition:transform .25s}
  .faq-list details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
  /* Answers slide open rather than snapping. grid-template-rows animates from 0fr to
     1fr, which is the one way to transition to a height the content decides. */
  .faq-list details > div.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s cubic-bezier(.3,.7,.2,1)}
  .faq-list details[open] > div.faq-a{grid-template-rows:1fr}
  /* Held open by script while it animates shut, so the close is visible too. */
  .faq-list details[open].is-closing > div.faq-a{grid-template-rows:0fr}
  .faq-list details[open].is-closing p{opacity:0; transform:translateY(-4px); transition-delay:0s}
  .faq-list details > div.faq-a > div{overflow:hidden; min-height:0}
  .faq-list details p{padding:0 40px 26px 0; color:var(--fg-2); max-width:64ch; font-size:1rem; margin:0; opacity:0; transform:translateY(-4px); transition:opacity .3s ease .06s, transform .3s ease .06s}
  .faq-list details[open] p{opacity:1; transform:none}
  @media (prefers-reduced-motion: reduce){
    .faq-list details > div.faq-a{transition:none}
    .faq-list details p{transition:none; opacity:1; transform:none}
  }

  /* Appraisal */
  .appraise .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 80px); align-items:start}
  .appraise-copy{display:flex; flex-direction:column; gap:20px}
  .appraise-copy h2{max-width:11ch}
  .details{display:flex; flex-direction:column; gap:20px; margin-top:1rem; padding-top:26px; border-top:1px solid var(--rule)}
  .details a, .details div{text-decoration:none; display:flex; flex-direction:column; gap:5px}
  .details span{font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
  .details b{font-family:var(--display); font-weight:500; font-size:1.3rem; line-height:1.15; letter-spacing:-.02em; transition:color .2s}
  .details a:hover b{color:var(--accent)}
  .form-card{background:var(--white); border:1px solid var(--rule); border-radius:2px; padding:clamp(28px, 3.4vw, 44px); box-shadow:0 30px 60px -45px rgba(23,24,27,.5)}
  form{display:flex; flex-direction:column; gap:24px}
  .field{display:flex; flex-direction:column; gap:7px}
  .field label{font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
  .field input, .field textarea, .field select{font:inherit; font-size:1rem; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--rule-2); border-radius:0; padding:9px 0 11px; width:100%; transition:border-color .2s}
  .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--blue)}
  .field input::placeholder{color:var(--mute); opacity:.75}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
  /* Validation: say what is wrong, under the field it belongs to. */
  .field-msg{font-family:var(--sans); font-size:.72rem; letter-spacing:.01em; line-height:1.4; color:#D0342C; margin:7px 0 0}
  .on-dark .field-msg, .funnel-card .field-msg{color:#FF8A80}
  .field input.is-bad, .field textarea.is-bad, .field select.is-bad,
  .step-input.is-bad, .step-fields input.is-bad{border-color:#D0342C}
  .on-dark .field input.is-bad, .funnel-card input.is-bad{border-color:#FF8A80}
  .step-input.is-bad + .field-msg, .opts + .field-msg{margin-top:10px}
  .field-row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
  .form-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px}
  .form-foot small{font-family:var(--sans); font-size:.66rem; color:var(--mute); letter-spacing:.02em}
  .field textarea{resize:vertical; min-height:96px; line-height:1.5}
  /* Contact page: the direct line out, for people who will not fill in a form. */
  .reach{margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:18px; align-items:flex-start}
  .reach-lead{color:var(--fg-2); max-width:44ch}
  .reach-actions{display:flex; gap:12px; flex-wrap:wrap}
  .reach-note{font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
  .form-done{display:flex; flex-direction:column; gap:12px}
  .form-done h3{font-size:1.7rem}
  .form-done p{color:var(--fg-2)}

  /* Footer */
  .footer{background:var(--ink); color:var(--fg); border-top:1px solid var(--rule); padding-block:56px 40px}
  .footer .wrap{display:flex; flex-direction:column; gap:40px}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap}
  .footer-coords{display:flex; gap:28px; flex-wrap:wrap}
  .footer-links{display:flex; gap:26px; flex-wrap:wrap}
  .footer-links a{font-family:var(--sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-decoration:none; transition:color .2s}
  .footer-links a:hover{color:#F3F1ED}
  .footer-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--rule); font-family:var(--sans); font-size:.64rem; color:var(--mute); letter-spacing:.04em}

  /* Guide modal */
  .modal{border:0; padding:0; background:var(--ink-2); color:var(--fg); width:min(92vw, 500px); border-radius:2px; position:relative}
  .modal::backdrop{background:rgba(10,10,12,.7); backdrop-filter:blur(6px)}
  .modal-body{padding:44px 40px 46px; display:flex; flex-direction:column; gap:14px}
  .modal-body h3{font-size:1.9rem}
  .modal-body form{margin-top:12px; gap:22px}
  .modal-close{position:absolute; top:14px; right:14px; width:38px; height:38px; background:none; border:1px solid var(--rule-2); border-radius:50%; color:var(--fg); font-size:1.3rem; line-height:1; cursor:pointer}
  .modal-close:hover{border-color:var(--blue); color:var(--blue)}

  /* Sticky mobile CTA */
  .sticky{display:none; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:12px var(--gutter); background:rgba(19,19,21,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--rule)}
  .sticky .btn{width:100%}

  @media (max-width: 1020px){
    .split, .appraise .wrap{grid-template-columns:minmax(0,1fr)}
    .split-head .reel-wrap{max-width:340px}
    .areas{grid-template-columns:minmax(0,1fr)}
    .area, .area + .area{border-right:0; border-bottom:1px solid var(--rule); padding:34px 0}
    .area:last-child{border-bottom:0}
    .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
    .hero .wrap{grid-template-columns:minmax(0,1fr)}
    .hero-figure{order:-1; justify-self:center; max-width:420px}
  }
  @media (max-width: 860px){
    .nav{display:none}
    .header .btn{display:none}
    .menu-btn{display:grid}
    :root{--headerH:72px}
    .hero-note{display:none}
    .stats .wrap{grid-template-columns:minmax(0,1fr)}
    .stat, .stat + .stat{border-right:0; border-bottom:1px solid var(--rule); padding:24px 0}
    .stat:last-child{border-bottom:0}
  }
  @media (max-width: 640px){
    body{padding-bottom:76px}
    .sticky{display:block}
    .cards{grid-template-columns:minmax(0,1fr)}
    .field-row{grid-template-columns:minmax(0,1fr)}
    .hero-actions{width:100%}
    .hero-actions .btn{flex:1; white-space:normal; text-align:center}
    .modal-body{padding:36px 24px}
  }

  /* ---- Breadcrumbs ---- */
  .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.06em; color:var(--mute)}
  .crumbs a{text-decoration:none; color:var(--mute); border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
  .crumbs a:hover{color:var(--accent); border-color:var(--accent)}
  .crumbs span[aria-current]{color:var(--fg-2)}
  .crumbs i{font-style:normal; opacity:.5}

  /* ---- Interior page hero ---- */
  .page-hero{position:relative; overflow:hidden; background:radial-gradient(78% 92% at 74% 44%, #34353A 0%, #1B1C1F 48%, #0F1012 100%); color:var(--fg); padding-block:clamp(48px, 6vw, 84px) clamp(64px, 8vw, 110px)}
  .page-hero .wrap{display:flex; flex-direction:column; gap:26px}
  .page-hero h1{max-width:20ch}
  .page-hero h1 br{display:block}
  .page-hero .lede{font-size:1.06rem; max-width:62ch}
  .page-hero-meta{display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center; margin-top:6px; padding-top:24px; border-top:1px solid var(--rule)}
  .page-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

  /* ---- Long-form content ---- */
  .content{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:clamp(28px, 5vw, 88px)}
  .content-main{display:flex; flex-direction:column; gap:clamp(40px, 5vw, 64px); max-width:70ch}
  .block{display:flex; flex-direction:column; gap:1.1rem}
  .block h2{font-size:clamp(1.7rem, 2.6vw, 2.3rem)}
  .block h3{font-size:1.15rem; font-weight:500; letter-spacing:-.01em; margin-top:.4rem}
  .block p{color:var(--fg-2); font-size:1.02rem}
  .block ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem}
  .block ul li{position:relative; padding-left:20px; color:var(--fg-2); font-size:1.02rem}
  .block ul li::before{content:""; position:absolute; left:0; top:.68em; width:5px; height:5px; border-radius:50%; background:var(--accent)}
  .aside{display:flex; flex-direction:column; gap:14px; position:sticky; top:104px; order:1}
  .content-main{order:2}
  .aside .panel{background:var(--panel); border:1px solid var(--rule); border-radius:2px; padding:26px; display:flex; flex-direction:column; gap:12px}
  .aside .panel h3{font-size:1.2rem}
  .aside .panel p{font-size:.92rem; color:var(--fg-2)}
  .aside .panel .btn{margin-top:6px}
  /* Appraisal page: the four facts as one quiet line under the hero, rather than a
     boxed table competing with the first section. */
  .hero-facts{list-style:none; margin:clamp(26px, 3vw, 36px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px;
    font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
  .hero-facts li{display:flex; align-items:center; gap:10px}
  .hero-facts li + li::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--blue); flex:none}
  /* Numbered steps across two columns, so the page stops running as one thin ribbon. */
  .how-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(34px, 4vw, 56px) clamp(34px, 5vw, 72px); margin-top:clamp(42px, 5vw, 64px)}
  .how-step{display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid var(--rule)}
  .how-n{font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; color:var(--blue); font-weight:600}
  .how-step h3{font-size:clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing:-.02em}
  .how-step p{color:var(--fg-2); font-size:.98rem; max-width:44ch}
  .keyfacts{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
  .keyfacts div{display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--rule); font-size:.9rem}
  .keyfacts dt{color:var(--mute); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}
  .keyfacts dd{margin:0; color:var(--fg); text-align:right}

  /* ---- Suburb switcher ---- */
  .switch{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); margin-top:44px}
  .switch a{display:flex; flex-direction:column; gap:10px; padding:32px 32px 32px 0; border-right:1px solid var(--rule); text-decoration:none; color:inherit}
  .switch a + a{padding-left:32px}
  .switch a:last-child{border-right:0}
  .switch a h3{transition:color .2s}
  .switch a:hover h3{color:var(--accent)}
  .switch a h3{font-size:clamp(1.9rem, 2.7vw, 2.5rem)}
  .switch a .coord{font-size:.55rem; letter-spacing:.1em; gap:7px}
  .switch a .coord::before{width:3px; height:3px}
  .switch a p{font-size:.92rem; color:var(--mute)}
  .switch a[aria-current]{opacity:.55; pointer-events:none}

  @media (max-width: 1020px){
    .content, .how-grid{grid-template-columns:minmax(0,1fr)}
    .aside{position:static; order:2}
    .content-main{order:1}
    .switch{grid-template-columns:minmax(0,1fr)}
    .switch a, .switch a + a{border-right:0; border-bottom:1px solid var(--rule); padding:24px 0}
    .switch a:last-child{border-bottom:0}
  }

  /* ---- Scroll reveal (class applied by script, so content is visible without JS) ---- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important} }

  /* ---- Paid-ads funnel ---- */
  .funnel-header{position:static}
  .funnel-header .wrap{justify-content:space-between}
  .phone-link{font-size:.92rem; font-weight:500; text-decoration:none; color:var(--fg); font-variant-numeric:tabular-nums}
  .phone-link:hover{color:var(--accent)}

  .funnel-hero{position:relative; overflow:hidden; color:var(--fg);
    background:radial-gradient(80% 70% at 50% 22%, #35363B 0%, #1B1C1F 52%, #0F1012 100%);
    padding-block:clamp(44px, 6vw, 76px) clamp(52px, 7vw, 88px)}
  .funnel-stack{max-width:680px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
  .funnel-stack h1{font-size:clamp(2.2rem, 5vw, 3.5rem); max-width:16ch}
  .funnel-stack .lede{max-width:52ch; margin-bottom:6px}

  .funnel-card{width:100%; margin-top:10px; text-align:left; background:var(--white); color:var(--ink);
    border-radius:4px; padding:clamp(22px, 3vw, 34px); box-shadow:0 36px 70px -40px rgba(0,0,0,.85);
    --fg:#17181B; --fg-2:#4B4D53; --mute:#75767A; --rule:rgba(23,24,27,.12); --rule-2:rgba(23,24,27,.26); --accent:var(--blue)}
  /* No rule under the head: the progress bar is already the divider. */
  .card-head{display:flex; flex-direction:column; gap:11px; padding-bottom:2px}
  .progress{height:2px; background:rgba(23,24,27,.09); border-radius:2px; overflow:hidden}
  .progress span{display:block; height:100%; width:20%; background:var(--blue); border-radius:2px; transition:width .45s cubic-bezier(.2,.7,.2,1)}
  .progress-meta{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
  /* The cue carries the urgency, so it takes the accent colour and the count recedes. */
  .step-cue{font-family:var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--blue)}
  .step-count{font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; color:var(--mute); font-variant-numeric:tabular-nums}
  .step-count b{font-weight:600; color:var(--fg-2)}
  .step-count i{font-style:normal; opacity:.4; margin:0 4px}
  .step{border:0; margin:0; padding:22px 0 0; min-width:0}
  .step-q{font-family:var(--display); font-weight:500; font-size:clamp(1.35rem, 2.1vw, 1.75rem);
    letter-spacing:-.02em; line-height:1.18; padding:0; color:var(--ink)}
  .step-help{margin-top:8px; font-size:.9rem; color:var(--mute)}
  .step-input{width:100%; margin-top:18px; font:inherit; font-size:1.05rem; color:var(--ink);
    background:transparent; border:0; border-bottom:1px solid var(--rule-2); padding:10px 0 12px}
  .step-input:focus{outline:none; border-color:var(--blue)}
  .step-input.bad, .step-fields input.bad{border-color:#D0342C}
  .opts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:18px}
  .opt{font:inherit; font-size:.95rem; font-weight:500; text-align:left; padding:16px 18px; background:transparent;
    border:1px solid var(--rule-2); border-radius:3px; cursor:pointer; color:var(--ink);
    transition:border-color .18s, background .18s, color .18s, transform .18s}
  .opt:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}
  .opt.on{background:var(--blue); border-color:var(--blue); color:#fff}
  .step-fields{display:flex; flex-direction:column; gap:16px; margin-top:18px}
  .step-fields .field label{color:var(--mute)}
  .step-fields input{font:inherit; font-size:1.02rem; color:var(--ink); background:transparent; border:0;
    border-bottom:1px solid var(--rule-2); padding:9px 0 11px; width:100%}
  .step-fields input:focus{outline:none; border-color:var(--blue)}
  .step-nav{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap}
  .step-nav .btn{flex:1 1 auto; padding-block:18px}
  .step-back{background:none; border:0; font:inherit; font-size:.78rem; letter-spacing:.06em; color:var(--mute);
    cursor:pointer; text-decoration:underline; text-underline-offset:4px; padding:6px 0}
  .step-back:hover{color:var(--ink)}
  .step-foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--rule); font-size:.78rem; color:var(--mute)}
  .funnel-done{display:flex; flex-direction:column; gap:12px}
  .funnel-done h2{font-size:clamp(1.6rem, 2.4vw, 2rem); color:var(--ink)}
  .funnel-done p{color:var(--fg-2)}
  .done-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}

  .trust-row{list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--rule);
    width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
  .trust-row li{display:flex; flex-direction:column; gap:5px}
  .trust-row b{font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:-.02em}
  .trust-row span{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}

  .funnel-section{padding-block:clamp(56px, 7vw, 96px)}
  .funnel-head{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
    margin-bottom:clamp(32px, 4vw, 48px)}
  .funnel-narrow{max-width:760px}
  .promises{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px, 2.6vw, 36px);
    max-width:900px; margin-inline:auto}
  .promise{display:flex; flex-direction:column; gap:8px; padding:24px 26px; background:var(--panel); border-radius:3px}
  .promise-n{font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.1em; color:var(--accent)}
  .promise h3{font-size:1.2rem}
  .promise p{color:var(--fg-2); font-size:.96rem}

  .funnel-close{background:var(--ink); color:var(--fg); text-align:center}
  .funnel-close .wrap{max-width:620px; display:flex; flex-direction:column; align-items:center; gap:16px}
  .funnel-close h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem)}
  .funnel-close .lede{max-width:44ch}
  .funnel-close .or{font-size:.9rem; color:var(--mute)}
  .funnel-close .or a{color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule-2)}
  .funnel-footer{border-top:1px solid var(--rule)}
  .funnel-section .quote{max-width:24ch}

  @media (max-width: 560px){
    .opts{grid-template-columns:minmax(0,1fr)}
    .promises{grid-template-columns:minmax(0,1fr)}
    .trust-row{grid-template-columns:minmax(0,1fr); gap:14px; text-align:left}
    .trust-row li{flex-direction:row; align-items:baseline; gap:10px}
    .step-nav{flex-direction:column-reverse; align-items:stretch}
    .step-nav .btn{width:100%}
  }

  /* ---- Selling guide page ---- */
  .guide-hero .wrap{padding-block:0}
  /* ---------------------------------------------------------------- market updates
     Deliberately built from the guide page's parts: same hero grid, same section
     rhythm, same label and heading treatment. Nothing new was invented for it. */
  .visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

  .mu-hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px, 5vw, 64px); align-items:center}
  .mu-hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
  .mu-hero-copy h1{max-width:none; font-size:clamp(2rem, 3.6vw, 3.3rem)}
  .mu-hero-copy .lede{max-width:46ch}
  .mu-hero-chart{margin:0; width:100%; display:flex; flex-direction:column; gap:16px; align-self:center}
  .mu-hero-chart figcaption{font-family:var(--sans); font-size:.68rem; line-height:1.6; color:var(--mute); max-width:44ch}

  /* The chart inherits the section's tokens, so it reads correctly on dark and light. */
  .mu-chart{width:100%; height:auto; display:block; aspect-ratio:1000 / 320; overflow:visible}
  .mu-grid{stroke:var(--rule); stroke-width:1}
  .mu-line{stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
  .mu-dot{fill:var(--accent)}
  .mu-stop-a{stop-color:var(--accent); stop-opacity:.22}
  .mu-stop-b{stop-color:var(--accent); stop-opacity:0}
  .mu-ylab, .mu-xlab{fill:var(--mute); font-family:var(--sans); font-size:28px; letter-spacing:.04em}
  .mu-ylab{text-anchor:end}
  .mu-xlab{text-anchor:middle}

  .mu-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3vw, 44px); margin-top:clamp(36px, 4vw, 54px)}
  .mu-stat{display:flex; flex-direction:column; gap:7px; padding-top:20px; border-top:1px solid var(--rule)}
  .mu-stat b{font-family:var(--display); font-weight:500; font-size:clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing:-.03em; line-height:1}
  .mu-stat span{font-family:var(--sans); font-size:.82rem; color:var(--fg-2); max-width:26ch}
  .mu-source{margin-top:clamp(32px, 4vw, 48px); font-family:var(--sans); font-size:.72rem; color:var(--mute)}

  .mu-prose p{margin-bottom:1.1em}
  .mu-prose p:last-child{margin-bottom:0}

  .mu-suburbs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(34px, 4vw, 56px); margin-top:clamp(40px, 5vw, 60px)}
  .mu-suburb{display:flex; flex-direction:column; gap:16px; padding-top:24px; border-top:1px solid var(--rule)}
  .mu-suburb h3{font-size:clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing:-.02em}
  .mu-suburb p{color:var(--fg-2); font-size:.98rem; max-width:46ch}
  .mu-figures{display:flex; flex-wrap:wrap; gap:10px 36px; margin:0}
  .mu-figures div{display:flex; flex-direction:column; gap:3px}
  .mu-figures dt{font-family:var(--sans); font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; color:var(--mute)}
  .mu-figures dd{margin:0; font-family:var(--display); font-weight:500; font-size:1.25rem; letter-spacing:-.02em; display:flex; align-items:baseline; gap:9px}
  .mu-figures i{font-style:normal; font-family:var(--sans); font-size:.68rem; letter-spacing:.04em}
  .mu-up{color:#1E9E63}
  .mu-down{color:#C0462F}
  .mu-flat{color:var(--mute)}

  .dl-frame{margin-top:clamp(28px, 4vw, 44px); border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--panel)}
  .dl-frame object{display:block; width:100%; height:min(78vh, 900px); border:0}
  .dl-fallback{padding:40px; text-align:center; color:var(--fg-2)}
  .dl-fallback a{color:var(--accent)}

  .mu-list{display:grid; gap:0; border-top:1px solid var(--rule); margin-top:clamp(28px, 4vw, 44px)}
  .mu-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px, 4vw, 60px); align-items:start;
    padding:clamp(28px, 3.4vw, 42px) 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit}
  .mu-card h3{font-size:clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing:-.025em; margin-top:10px; transition:color .2s}
  .mu-card:hover h3{color:var(--accent)}
  .mu-card-lede{grid-column:2; grid-row:1 / span 2; color:var(--fg-2); font-size:.98rem; max-width:44ch}
  .mu-card-stats{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 30px}
  .mu-card-stats li{display:flex; flex-direction:column; gap:2px}
  .mu-card-stats b{font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:-.02em}
  .mu-card-stats span{font-family:var(--sans); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); max-width:22ch}
  .mu-card .card-status{margin-top:18px}

  .guide-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:clamp(32px, 5vw, 72px); align-items:center}
  .guide-copy{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
  .guide-copy h1{max-width:15ch}
  .guide-copy .lede{max-width:50ch}
  .guide-copy .page-actions{margin-top:2px}
  .guide-cover{margin:0; justify-self:center}
  .guide-cover img{width:100%; max-width:390px; border-radius:3px;
    box-shadow:0 36px 70px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08)}
  .guide-inside{max-width:840px}
  .guide-note{text-align:center; color:var(--mute); font-size:.95rem; max-width:52ch;
    margin:0 auto clamp(28px, 3.5vw, 40px)}
  .guide-contents{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(24px, 4vw, 56px)}
  .guide-contents ul{list-style:none; margin:0; padding:0}
  .guide-contents li{padding:14px 0; border-bottom:1px solid var(--rule); font-size:1rem; color:var(--fg-2)}
  .guide-contents ul:first-child li:first-child, .guide-contents ul:last-child li:first-child{border-top:1px solid var(--rule)}
  .guide-pull{margin:clamp(36px, 4.5vw, 56px) auto 0; max-width:34ch; text-align:center;
    font-family:var(--display); font-weight:500; font-size:clamp(1.3rem, 2.2vw, 1.75rem);
    line-height:1.25; letter-spacing:-.02em; color:var(--fg)}
  .micro-fallback{font-size:.85rem; color:var(--mute); margin-top:4px}
  .micro-fallback a{color:var(--accent)}
  .send-failed{margin-top:18px; padding:14px 16px; border:1px solid #D0342C; border-radius:3px;
    background:rgba(208,52,44,.06); font-size:.9rem}
  .send-failed a{color:var(--accent)}

  @media (max-width: 900px){
    .guide-grid, .mu-suburbs, .mu-card{grid-template-columns:minmax(0,1fr)}
    .mu-hero .wrap{grid-template-columns:minmax(0,1fr)}
    .mu-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
    .mu-card-lede{grid-column:1; grid-row:auto}
    .mu-hero-chart{order:-1}
    .mu-ylab, .mu-xlab{font-size:26px}
    .guide-cover{order:-1; justify-self:start}
    .guide-cover img{max-width:200px}
    .guide-contents{grid-template-columns:minmax(0,1fr)}
    .guide-contents ul:last-child li:first-child{border-top:0}
  }

  /* ---- Empty listings state ---- */
  .empty-state{display:flex; flex-direction:column; gap:12px; align-items:flex-start;
    padding:clamp(28px, 4vw, 48px); background:var(--panel); border-radius:3px; max-width:56ch}
  .empty-state h3{font-size:clamp(1.4rem, 2.2vw, 1.9rem)}
  .empty-state p{color:var(--fg-2)}
  .empty-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

  /* ---- Testimonial slide ---- */
  .quote-slide{transition:opacity .3s ease, transform .3s cubic-bezier(.3,.7,.2,1); will-change:opacity, transform}
  .quote-slide.to-left{opacity:0; transform:translateX(-36px)}
  .quote-slide.to-right{opacity:0; transform:translateX(36px)}
  .quote-slide.from-right{opacity:0; transform:translateX(36px); transition:none}
  .quote-slide.from-left{opacity:0; transform:translateX(-36px); transition:none}
  @media (prefers-reduced-motion:reduce){
    .quote-slide{transition:none !important; opacity:1 !important; transform:none !important}
  }