/* Fife & Kimmitt 2026 — shared styles (split from index.html 24 Sep 2026) */

  /* ============ TOKENS ============ */
  :root{
    --paper:      #F5F0F3;   /* warm plum-biased light ground */
    --paper-alt:  #EAE0E8;   /* deeper plum tone for alt sections */
    --card:       #FDFBFD;
    --ink:        #2E2135;
    --ink-soft:   #635B68;
    --purple-950: #2A102F;
    --purple-900: #451C4E;
    --purple-800: #5F2669;   /* brand — matches landmarks.png */
    --purple-700: #7A3A85;
    --purple-600: #8F4A9B;
    --purple-tint:#EBDFED;
    --honey:      #E5A33C;   /* warm secondary */
    --honey-dark: #B87710;
    --honey-tint: #F8ECD5;
    --star:       #F4B400;
    --line:       #E2D6E0;
    --line-strong:#8A7D90;  /* ≥3:1 on white — form field borders */
    --radius:     14px;
    --radius-sm:  10px;
    --shadow-soft: 0 18px 40px -18px rgba(58, 22, 66, .22);
    --shadow-lift: 0 26px 60px -24px rgba(58, 22, 66, .32);
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; /* realestics type, Dave 24 Sep */
    --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --ctabar-h: 80px;
  }

  /* ============ RESET / BASE ============ */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-padding-top:88px; }
  @media (prefers-reduced-motion: no-preference){
    html{ scroll-behavior:smooth; }
  }
  body{
    font-family:var(--font-body);
    font-size:1.0625rem;
    line-height:1.6;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:var(--purple-700); }
  ul{ list-style:none; }
  button{ font:inherit; cursor:pointer; }
  input,select,textarea{ font:inherit; color:inherit; }

  h1,h2,h3{ font-family:var(--font-display); line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
  h1{ font-size:clamp(2.4rem, 5.6vw, 4.1rem); font-weight:800; }
  h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); font-weight:800; }
  h3{ font-size:1.28rem; font-weight:700; }

  .container{ width:min(1140px, 100% - 2.5rem); margin-inline:auto; }
  section{ padding:clamp(4rem, 8vw, 6.5rem) 0; }

  /* Two-colour focus indicator: purple outline + white inner ring
     passes 3:1 on both light (paper) and dark (purple) surfaces. */
  :focus-visible{
    outline:3px solid var(--purple-800);
    outline-offset:3px;
    border-radius:4px;
    box-shadow:0 0 0 3px #fff !important;
  }

  .skip-link{
    position:absolute; left:-9999px; top:0;
    background:var(--purple-800); color:#fff;
    padding:.75rem 1.25rem; z-index:200; border-radius:0 0 var(--radius-sm) 0;
    text-decoration:none; font-weight:600;
  }
  .skip-link:focus{ left:0; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--purple-700);
  }
  .eyebrow::before{
    content:""; width:26px; height:3px; border-radius:2px; background:var(--honey);
  }
  .section-head{ max-width:640px; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
  .section-head p{ color:var(--ink-soft); margin-top:.7rem; font-size:1.1rem; }
  .section-head .eyebrow{ margin-bottom:.65rem; }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-weight:700; text-decoration:none; border:0;
    padding:.95rem 1.7rem; border-radius:var(--radius-sm);
    font-size:1.02rem; line-height:1.2;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .btn svg{ flex:none; }
  .btn-honey{ background:var(--honey); color:var(--purple-950); box-shadow:0 10px 24px -10px rgba(229,163,60,.55); }
  .btn-honey:hover{ background:var(--honey-dark); transform:translateY(-2px); }
  .btn-outline{
    background:transparent; color:var(--purple-800);
    box-shadow:inset 0 0 0 2px var(--purple-800);
  }
  .btn-outline:hover{ background:var(--purple-800); color:#fff; transform:translateY(-2px); }

  /* ============ HEADER (realestics nav) ============ */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent; transition:background-color .25s ease, box-shadow .25s ease;
  }
  .site-header.is-solid{ background:var(--purple-950); box-shadow:0 6px 24px -12px rgba(42,16,47,.6); }
  .header-inner{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem;
    padding:clamp(14px, 1.4vw, 24px) 0;
  }
  .site-header.is-solid .header-inner{ padding-block:12px; }
  .brand{ display:inline-flex; align-items:center; text-decoration:none; }
  .brand img{ height:clamp(36px, 2.6vw, 48px); width:auto; }
  .main-nav ul{ display:flex; justify-content:center; gap:clamp(1.2rem, 2.2vw, 2.6rem); }
  .main-nav a{
    color:#fff; text-decoration:none; font-weight:600; font-size:.98rem;
    padding:.45rem 0; border-bottom:2px solid transparent;
    transition:border-color .15s ease, opacity .15s ease;
  }
  .main-nav a:hover{ border-color:var(--honey); }
  .header-actions{ display:flex; align-items:center; gap:.9rem; }
  .header-phone{
    display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
    background:#fff; color:var(--purple-800); text-decoration:none;
    font-weight:700; font-size:.95rem; padding:.55rem 1.15rem; border-radius:999px;
    transition:background-color .15s ease, color .15s ease;
  }
  .header-phone:hover{ background:var(--honey); color:var(--purple-950); }
  .panel-opener, .panel-closer{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:#fff;
  }
  .panel-opener{ width:auto; min-width:44px; gap:.5rem; padding:0 .4rem; font-weight:700; font-size:.92rem; }
  .panel-opener-label{ display:none; }
  @media (max-width: 1100px){ .panel-opener-label{ display:inline; } }
  .site-panel{ overscroll-behavior:contain; }
  .panel-opener:hover, .panel-closer:hover{ background:rgba(255,255,255,.12); }
  @media (max-width: 1100px){ .main-nav{ display:none; } .header-inner{ grid-template-columns:auto 1fr auto; } .header-actions{ grid-column:3; } }
  @media (max-width: 480px){ .header-phone{ display:none; } }

  /* Side panel */
  .panel-scrim{ position:fixed; inset:0; z-index:110; background:rgba(20,6,26,.55); }
  .site-panel{
    position:fixed; top:0; right:0; bottom:0; z-index:120; width:min(420px, 100%);
    background:var(--purple-950); color:rgba(255,255,255,.85);
    padding:1.4rem clamp(1.2rem, 3vw, 2rem) 2rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.9,.3,1);
    display:flex; flex-direction:column; gap:1.6rem;
  }
  .site-panel.open{ transform:none; }
  @media (prefers-reduced-motion: reduce){ .site-panel{ transition:none; } }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; }
  .panel-head img{ height:40px; width:auto; }
  .panel-nav a{
    display:block; padding:.8rem 0; color:#fff; text-decoration:none; font-weight:600; font-size:1.1rem;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .panel-nav a:hover{ color:var(--honey); }
  .panel-descr{ font-size:.98rem; line-height:1.65; }
  .panel-actions{ display:grid; gap:.7rem; margin-top:auto; }
  .panel-actions .btn{ width:100%; justify-content:center; }
  .panel-btn{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); background:transparent; }
  .panel-btn:hover{ background:rgba(255,255,255,.1); }

  /* Hero sits under the fixed header */
  section.hero{ padding-top:clamp(84px, 7vw, 150px); }

  /* ============ HERO ============ */
  .hero{
    position:relative; overflow:hidden; padding:0;
    background:
      radial-gradient(52rem 30rem at 85% -12%, rgba(95,38,105,.10), transparent 60%),
      radial-gradient(40rem 26rem at -10% 30%, rgba(229,163,60,.08), transparent 55%),
      var(--paper);
  }
  /* Hero video backdrop */
  .hero-media{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    background:url("../../assets/img/hero-house.jpg") center / cover no-repeat;
  }
  .hero-media video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .hero-media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(42,16,47,.88) 0%, rgba(69,28,78,.74) 42%, rgba(42,16,47,.82) 100%),
      radial-gradient(60rem 28rem at 50% 115%, rgba(229,163,60,.22), transparent 62%);
  }
  @media (prefers-reduced-motion: reduce){
    .hero-media video{ display:none; }
  }
  /* Pause/play control for the background video (WCAG 2.2.2) */
  .video-toggle{
    position:absolute; top:1rem; right:1rem; z-index:5;
    width:44px; height:44px; border-radius:50%;
    display:none; align-items:center; justify-content:center;
    background:var(--purple-950); color:var(--honey);
    border:1px solid rgba(255,255,255,.35);
  }
  .video-toggle svg{ width:20px; height:20px; }
  .video-toggle .icon-play{ display:none; }
  .video-toggle[aria-pressed="false"] .icon-pause{ display:none; }
  .video-toggle[aria-pressed="false"] .icon-play{ display:block; }
  .js .video-toggle.is-available{ display:inline-flex; }
  @media (prefers-reduced-motion: reduce){
    .video-toggle{ display:none !important; }
  }
  .hero-inner{
    position:relative; z-index:1;
    text-align:center;
    padding:clamp(3.6rem, 7vw, 5.6rem) 0 clamp(2rem, 4vw, 3rem);
    max-width:850px; margin-inline:auto;
  }
  .hero-badge{
    display:inline-flex; align-items:center; gap:.55rem;
    background:var(--purple-tint); color:var(--purple-800);
    border:1px solid rgba(95,38,105,.18);
    font-weight:700; font-size:.86rem; letter-spacing:.04em;
    padding:.45rem 1rem; border-radius:999px; margin-bottom:1.4rem;
  }
  .hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--honey); }
  .hero h1{ margin-bottom:1.1rem; position:relative; z-index:0; }
  .hero h1 em{ font-style:normal; color:var(--purple-700); position:relative; white-space:nowrap; }
  .hero h1 em::after{
    content:""; position:absolute; left:0; right:0; bottom:.04em; height:.14em;
    background:var(--honey); opacity:.45; border-radius:3px; z-index:-1;
  }
  .hero-sub{
    font-size:clamp(1.1rem, 2vw, 1.28rem); color:var(--ink-soft);
    max-width:620px; margin:0 auto 1.9rem;
  }
  .hero-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.2rem; }
  .hero-trust{
    display:flex; align-items:center; justify-content:center; gap:1.1rem; flex-wrap:wrap;
  }
  .trust-chip{
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--card); border:1px solid var(--line);
    padding:.55rem .95rem; border-radius:var(--radius-sm);
    font-weight:600; font-size:.92rem; color:var(--ink);
    box-shadow:var(--shadow-soft);
  }
  .trust-chip img{ height:38px; width:auto; }
  .trust-chip .stars{ color:var(--star); letter-spacing:.06em; font-size:1rem; }

  /* Contrast overrides while the video sits behind the hero */
  .hero h1{ color:#fff; }
  .hero h1 em{ color:var(--honey); }
  .hero .hero-sub{ color:rgba(255,255,255,.92); }
  .hero .hero-badge{
    background:rgba(255,255,255,.14); color:#fff;
    border-color:rgba(255,255,255,.3);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .hero .video-toggle{ top:auto; bottom:1rem; }
  .hero-ctas .btn-outline{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); }
  .hero-ctas .btn-outline:hover{ background:#fff; color:var(--purple-800); }
  .hero .area-ticker{ position:relative; z-index:1; }
  .hero .skyline-wrap{ z-index:1; }
  .hero .skyline{ background-color:var(--purple-950); }

  /* Hero intro orchestration */
  .hero-anim{ opacity:0; transform:translateY(22px); }
  @media (prefers-reduced-motion: no-preference){
    .hero-anim{ animation:heroRise .8s cubic-bezier(.22,.9,.3,1) forwards; animation-delay:var(--d, 0s); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-anim{ opacity:1; transform:none; }
  }
  @keyframes heroRise{
    to{ opacity:1; transform:translateY(0); }
  }

  /* Area ticker (hero-level areas feature) */
  .area-ticker{
    position:relative; margin-top:.6rem; padding:.4rem 0 1rem;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker-track{ display:flex; gap:.7rem; width:max-content; }
  @media (prefers-reduced-motion: no-preference){
    .ticker-track{ animation:tickerScroll 36s linear infinite; }
    .area-ticker:hover .ticker-track,
    .area-ticker:focus-within .ticker-track{ animation-play-state:paused; }
  }
  @keyframes tickerScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-50% - .35rem)); } /* half the flex gap keeps the loop seamless */
  }
  @media (prefers-reduced-motion: reduce){
    .area-ticker{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  }
  .ticker-track a{
    display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
    background:var(--card); border:1px solid var(--line);
    color:var(--purple-800); text-decoration:none; font-weight:600; font-size:.95rem;
    padding:.62rem 1rem; border-radius:999px; /* ≥44px touch target */
    transition:background-color .15s ease, border-color .15s ease;
  }
  .ticker-toggle{
    position:absolute; right:clamp(12px, 2vw, 32px); top:50%; transform:translateY(-60%); z-index:2;
    min-height:36px; padding:.3rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.4);
    background:rgba(42,16,47,.75); color:#fff; font-size:.8rem; font-weight:700;
  }
  .area-ticker.is-paused .ticker-track{ animation-play-state:paused !important; }
  @media (prefers-reduced-motion: reduce){ .ticker-toggle{ display:none; } }
  .ticker-track a:hover{ background:var(--purple-tint); border-color:var(--purple-600); }
  .ticker-track a svg{ color:var(--honey); }

  /* Skyline — landmarks.png recoloured via CSS mask */
  .skyline-wrap{ position:relative; height:clamp(90px, 14vw, 170px); overflow:hidden; }
  .skyline{
    position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
    width:max(1100px, 100%); height:100%;
    background-color:var(--purple-800);
    -webkit-mask:url("../../assets/landmarks.png") no-repeat center bottom / contain;
    mask:url("../../assets/landmarks.png") no-repeat center bottom / contain;
    will-change:transform;
  }
  .skyline--footer{ background-color:rgba(255,255,255,.14); }


  /* ============ HERO v2: realestics layout, concept 2 styling ============ */
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(2rem, 4.5vw, 4.5rem); align-items:center;
    padding:clamp(3.4rem, 7vw, 5.4rem) 0 clamp(1.8rem, 3vw, 2.6rem);
  }
  .hero-shadow{
    position:absolute; z-index:-1; top:clamp(.5rem, 2vw, 1.6rem); left:-.04em;
    font-family:var(--font-display); font-weight:800; line-height:1; letter-spacing:.01em;
    font-size:clamp(4.5rem, 14vw, 12rem); white-space:nowrap; pointer-events:none;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14);
  }
  /* Hero type: realestics (sub-title, title, descr, outlined shadow word) */
  .hero-kicker{
    display:inline-block; color:rgba(255,255,255,.92);
    font-weight:400; font-size:clamp(13px, .84vw, 16px); letter-spacing:.25em; text-transform:uppercase;
    margin-bottom:clamp(10px, 1.26vw, 24px);
  }
  .hero-copy h1{
    font-size:clamp(34px, 4.6vw, 84px); font-weight:800; line-height:1.12; letter-spacing:-.02em;
    margin-bottom:clamp(10px, 1vw, 18px);
  }
  .hero-copy .hero-sub{ font-size:clamp(16px, 1.16vw, 20px); margin-bottom:clamp(20px, 2.4vw, 44px); }
  .hero-shadow{ top:clamp(30px, 3.4vw, 70px); font-size:clamp(50px, 15.76vw, 300px); letter-spacing:-.03em; -webkit-text-stroke:2px rgba(255,255,255,.2); }
  .hero-copy{ text-align:left; }
  /* Realestics width for header + hero: 1920px max, generous side gutters */
  .container--wide{ width:min(1920px, 100% - 2 * clamp(18px, 4.62vw, 88px)); }
  .hero-grid{ grid-template-columns:minmax(0, 1fr) minmax(340px, 520px); }
  .hero-copy h1{ font-size:clamp(34px, 5.25vw, 100px); max-width:14ch; }
  .hero-copy .hero-sub{ max-width:44rem; }

  .hero-copy .hero-sub{ margin:0 0 1.9rem; max-width:34rem; }
  .hero-copy .hero-ctas{ justify-content:flex-start; margin-bottom:0; }
  .hero-finder .fk-finder{ box-shadow:0 34px 70px -26px rgba(12,3,16,.75); }
  .hero .hero-trust{ position:relative; z-index:1; padding-bottom:.4rem; }
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-copy{ text-align:center; }
    .hero-copy .hero-sub{ margin-inline:auto; }
    .hero-copy .hero-ctas{ justify-content:center; }
    .hero-shadow{ left:50%; transform:translateX(-50%); }
  }


  /* Phones: the call bar already carries Call / WhatsApp / Quote, so the hero drops its buttons
     and the finder (the key selling point) moves up above the bar. */
  @media (max-width: 900px){
    .hero-copy .hero-ctas{ display:none; }
    .hero-grid{ gap:1.4rem; padding-top:1.2rem; }
  }
  @media (max-width: 600px){
    section.hero{ padding-top:64px; }
    .hero-grid{ padding-top:.6rem; gap:1rem; }
    .hero-copy h1{ font-size:clamp(30px, 8.6vw, 40px); margin-bottom:0; }
    .hero-finder .fk-finder__step .fk-finder__opt small{ display:none; }
    .hero-copy .hero-sub{ display:none; }
    .hero-kicker{ letter-spacing:.14em; font-size:12px; }
  }

  /* Form errors */
  .field-error{ color:#B3261E; font-size:.9rem; font-weight:600; margin-top:.35rem; }
  [aria-invalid="true"]{ border-color:#B3261E !important; }
  .req{ color:#B3261E; }

  .fk-sister-logo{ filter:brightness(0) invert(1); }

  /* ============ ADDRESS BAND ============ */
  .addr-band{ background:var(--purple-950); color:rgba(255,255,255,.85); padding:1rem 0; font-size:.95rem; }
  .addr-band-inner{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; justify-content:center; text-align:center; }
  .addr-band strong{ color:#fff; font-family:var(--font-display); }
  .addr-band a{ color:var(--honey); font-weight:700; text-decoration:none; }
  .addr-band a:hover{ text-decoration:underline; }

  /* ============ STATS BAND ============ */
  .stats{ background:var(--purple-950); color:#fff; padding:clamp(3rem,6vw,4.2rem) 0; }
  .stats-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; text-align:center;
  }
  .stat b{
    display:block; font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.1rem, 4vw, 3rem); letter-spacing:-.02em; color:#fff;
    font-variant-numeric:tabular-nums;
  }
  .stat b .stat-star{ color:var(--star); }
  .stat span{ display:block; margin-top:.3rem; color:#CBB8D1; font-weight:600; font-size:.95rem; }
  @media (max-width: 760px){
    .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:1.6rem 1rem; }
  }

  /* ============ SCROLL REVEALS ============ */
  [data-reveal]{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: no-preference){
    .js [data-reveal]{
      opacity:0; transform:translateY(26px);
      transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1);
      transition-delay:var(--d, 0s);
    }
    .js [data-reveal].in-view{ opacity:1; transform:none; }
  }

  /* ============ SURVEY CHOOSER ============ */
  .chooser{ background:var(--paper); }
  .chooser-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; align-items:stretch; }
  @media (max-width: 940px){ .chooser-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
  .survey-card{
    position:relative; display:flex; flex-direction:column;
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:1.9rem 1.7rem 1.7rem;
    box-shadow:var(--shadow-soft);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .survey-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
  .survey-card.featured{ border:2px solid var(--purple-700); }
  .card-flag{
    position:absolute; top:-13px; left:1.5rem;
    background:var(--purple-700); color:#fff;
    font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    padding:.28rem .8rem; border-radius:999px;
  }
  .card-flag--honey{ background:var(--honey); color:var(--purple-950); }
  .survey-card h3{ margin-bottom:.2rem; }
  .card-price{
    font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--purple-700);
    margin:.35rem 0 .55rem;
  }
  .card-price small{ font-family:var(--font-body); font-weight:600; font-size:.85rem; color:var(--ink-soft); }
  .card-bestfor{
    background:var(--honey-tint); color:#7C3A1D;
    border-radius:var(--radius-sm); padding:.65rem .85rem;
    font-size:.93rem; font-weight:600; line-height:1.45; margin-bottom:1.1rem;
  }
  .card-bullets{ flex:1; display:grid; gap:.55rem; margin-bottom:1.4rem; }
  .card-bullets li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.97rem; color:var(--ink); }
  .card-bullets svg{ flex:none; margin-top:.22rem; color:var(--purple-600); }
  .survey-card .btn{ width:100%; }
  /* Photo tops on survey cards — real streets, graded to the brand */
  .card-photo{
    position:relative; margin:-1.9rem -1.7rem 1.3rem;
    aspect-ratio:16/9; overflow:hidden;
    border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
    background:var(--purple-tint);
  }
  .card-photo img{ width:100%; height:100%; object-fit:cover; }
  .card-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(165deg, rgba(95,38,105,.28) 0%, rgba(95,38,105,.06) 45%, rgba(229,163,60,.16) 100%);
  }

  /* ============ EXPLAINER ============ */
  .explainer{ background:var(--paper-alt); }
  .explainer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
  @media (max-width: 800px){ .explainer-grid{ grid-template-columns:1fr; } }
  .explainer-panel{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.8rem 1.7rem; box-shadow:var(--shadow-soft);
  }
  .explainer-panel .tag{
    display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
    color:var(--purple-700); background:var(--purple-tint); border-radius:999px;
    padding:.3rem .85rem; margin-bottom:.9rem;
  }
  .explainer-panel h3{ margin-bottom:.55rem; }
  .explainer-panel p{ color:var(--ink-soft); }
  .explainer-note{
    margin-top:1.6rem; text-align:center; color:var(--ink-soft); font-size:1.02rem;
  }
  .explainer-note a{ color:var(--purple-800); font-weight:700; }

  /* ============ AREAS ============ */
  .areas{
    background:
      linear-gradient(rgba(245,240,243,.92), rgba(245,240,243,.96)),
      repeating-linear-gradient(0deg, transparent 0 46px, rgba(95,38,105,.10) 46px 47px),
      repeating-linear-gradient(90deg, transparent 0 46px, rgba(95,38,105,.10) 46px 47px),
      var(--paper);
  }
  .areas-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.9rem;
  }
  .area-tile{
    display:flex; align-items:center; gap:.7rem;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.95rem 1.05rem; text-decoration:none;
    color:var(--ink); font-weight:700; font-size:1.02rem;
    box-shadow:0 8px 20px -14px rgba(42,16,47,.25);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .area-tile:hover{ transform:translateY(-3px); border-color:var(--purple-600); box-shadow:var(--shadow-soft); }
  .area-tile svg{ flex:none; color:var(--honey); }
  .area-tile small{ display:block; font-weight:600; font-size:.78rem; color:var(--ink-soft); }
  .area-tile.priority{
    /* Heavy purple wash over the estate photo keeps white text ≥4.5:1
       even where the underlying photo is pure white. */
    background:
      linear-gradient(160deg, rgba(42,16,47,.92), rgba(69,28,78,.84)),
      var(--purple-800) url("../../assets/img/estate-street.jpg") center 55% / cover no-repeat;
    color:#fff; border-color:var(--purple-800);
  }
  .area-tile.priority small{ color:#DCCEE1; }
  .area-tile.priority svg{ color:var(--honey); }
  .areas-note{
    margin-top:1.5rem; display:flex; align-items:center; gap:.6rem;
    color:var(--ink-soft); font-size:.98rem;
  }
  .areas-note svg{ flex:none; color:var(--purple-700); }

  /* ============ PHOTO BAND ============ */
  .photo-band{ background:var(--purple-950); padding:4px 0 0; }
  .photo-band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
  .photo-band figure{ position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; }
  .photo-band figure img{ width:100%; height:100%; object-fit:cover; }
  .photo-band figure::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(42,16,47,.20), rgba(229,163,60,.14));
  }
  .photo-band-caption{
    text-align:center; color:#CBB8D1; font-weight:600; font-size:.92rem;
    padding:.75rem 1.25rem .95rem; margin:0;
  }
  @media (max-width: 760px){
    .photo-band-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ============ REVIEWS ============ */
  .reviews{ background:var(--card); }
  .reviews-summary{
    display:flex; align-items:center; gap:.8rem; margin-bottom:1.8rem; flex-wrap:wrap;
  }
  .reviews-summary .big{
    font-family:var(--font-display); font-weight:800; font-size:2.4rem; letter-spacing:-.02em;
  }
  .reviews-summary .stars{ color:var(--star); font-size:1.3rem; letter-spacing:.1em; }
  .reviews-summary span{ color:var(--ink-soft); font-weight:600; }
  .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
  @media (max-width: 900px){ .reviews-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
  .review-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.5rem 1.45rem; display:flex; flex-direction:column; gap:.85rem;
    box-shadow:var(--shadow-soft);
  }
  .review-top{ display:flex; align-items:center; gap:.8rem; }
  .review-avatar{
    width:44px; height:44px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:1.05rem; font-family:var(--font-display);
  }
  .review-top b{ display:block; font-size:1rem; }
  .review-top small{ color:var(--ink-soft); font-weight:600; }
  .review-stars{ color:var(--star); letter-spacing:.14em; font-size:1.05rem; }
  .review-card p{ font-size:.98rem; color:var(--ink); flex:1; }
  .review-meta{
    display:flex; align-items:center; gap:.45rem;
    color:var(--ink-soft); font-size:.85rem; font-weight:600;
  }
  .g-mark{
    width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid var(--line);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:.75rem; color:#4285F4;
  }
  .reviews-cta{ margin-top:1.8rem; text-align:center; }

  /* ============ TEAM ============ */
  .team{ background:var(--paper-alt); }
  .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; max-width:900px; margin-inline:auto; }
  @media (max-width: 900px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width: 640px){ .team-grid{ grid-template-columns:1fr; gap:.9rem; max-width:340px; } }
  .team-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:2rem 1.2rem 1.7rem; text-align:center; box-shadow:var(--shadow-soft);
  }
  .team-avatar{
    width:84px; height:84px; border-radius:50%; margin:0 auto 1rem;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:#fff;
    background:var(--purple-700); border:2px solid var(--purple-tint);
  }
  .team-avatar img{ width:100%; height:100%; object-fit:cover; }
  .team-card h3{ font-size:1.12rem; margin-bottom:.15rem; }
  .team-card p{ color:var(--ink-soft); font-weight:600; font-size:.92rem; }
  .team-card .creds{
    display:inline-block; margin-top:.55rem; font-size:.78rem; font-weight:700;
    color:var(--purple-700); background:var(--purple-tint); border-radius:999px; padding:.22rem .7rem;
  }

  /* ============ QUOTE ============ */
  .quote{ background:var(--paper); }
  .quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:start; }
  @media (max-width: 900px){ .quote-grid{ grid-template-columns:minmax(0,1fr); } }
  .quote-grid > *{ min-width:0; }
  .quote-grid a[href^="mailto:"], .site-footer a[href^="mailto:"]{ overflow-wrap:anywhere; }
  .quote-info p{ color:var(--ink-soft); margin:.7rem 0 1.6rem; font-size:1.08rem; }
  .quote-contacts{ display:grid; gap:.9rem; }
  .quote-contacts li{ display:flex; gap:.8rem; align-items:flex-start; }
  .quote-contacts svg{ flex:none; margin-top:.2rem; color:var(--honey); }
  .quote-contacts a{ color:var(--purple-800); font-weight:700; text-decoration:none; }
  .quote-contacts a:hover{ text-decoration:underline; }
  .quote-rics{
    margin-top:1.8rem; display:inline-flex; align-items:center; gap:.9rem;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.9rem 1.2rem; box-shadow:var(--shadow-soft);
  }
  .quote-rics img{ height:52px; width:auto; }
  .quote-rics span{ font-size:.88rem; font-weight:600; color:var(--ink-soft); max-width:200px; line-height:1.4; }

  .quote-form-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-lift);
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }
  .field{ margin-bottom:1rem; }
  .field label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:.35rem; }
  .field input, .field select, .field textarea{
    width:100%; background:#fff; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
    padding:.8rem .95rem; font-size:1rem; color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--purple-600);
    box-shadow:0 0 0 3px rgba(143,74,155,.25);
  }
  .quote-form-card .btn{ width:100%; margin-top:.4rem; }
  .form-small{ margin-top:.8rem; text-align:center; font-size:.85rem; color:var(--ink-soft); }

  .form-success{
    display:none; text-align:center; padding:2.5rem 1rem;
  }
  .form-success.show{ display:block; }
  .form-success .tick{
    width:70px; height:70px; border-radius:50%; background:var(--purple-tint);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
    color:var(--purple-700);
  }
  .form-success h3{ margin-bottom:.5rem; }
  .form-success p{ color:var(--ink-soft); }

  /* ============ CHECKLIST CAPTURE ============ */
  .checklist{
    background:linear-gradient(140deg, var(--purple-900), var(--purple-800));
    color:#fff;
  }
  .checklist-inner{ max-width:680px; text-align:center; }
  .checklist .eyebrow{ color:var(--honey); }
  .checklist .eyebrow::before{ background:var(--honey); }
  .checklist h2{ color:#fff; margin:.65rem 0 .7rem; }
  .checklist p{ color:#E6D8EA; font-size:1.06rem; max-width:540px; margin-inline:auto; }
  .checklist-form{
    display:flex; gap:.7rem; max-width:520px; margin:1.7rem auto 0;
  }
  .checklist-form input{
    flex:1; min-width:0; background:#fff; border:1.5px solid transparent;
    border-radius:var(--radius-sm); padding:.85rem 1rem; font-size:1rem; color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .checklist-form input:focus{
    outline:none; border-color:var(--honey);
    box-shadow:0 0 0 3px rgba(229,163,60,.35);
  }
  /* Keyboard focus on form fields: restore the two-colour ring —
     the :focus rules above set outline:none (fine for mouse), but keyboard
     users need the purple outline + white ring like everything else. */
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
  .checklist-form input:focus-visible{
    outline:3px solid var(--purple-800); outline-offset:2px;
  }
  .checklist-form .btn{ flex:none; }
  @media (max-width: 560px){ .checklist-form{ flex-direction:column; } }
  .checklist-success{
    display:none; margin:1.7rem auto 0; max-width:520px;
    align-items:center; justify-content:center; gap:.6rem;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
    border-radius:var(--radius-sm); padding:.95rem 1.2rem;
    font-weight:700; font-size:1.02rem; color:#fff;
  }
  .checklist-success.show{ display:flex; }
  .checklist-success svg{ flex:none; color:var(--honey); }
  .checklist-small{ margin-top:.85rem; font-size:.85rem; color:#CBB8D1; }

  .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;
  }

  /* ============ FOOTER ============ */
  .site-footer{ background:var(--purple-950); color:#CBB8D1; padding:0 0 2rem; }
  .footer-skyline{ background:var(--purple-900); }
  .footer-grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem;
    padding:3.2rem 0 2.4rem;
  }
  @media (max-width: 820px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }
  .site-footer img.footer-logo{ height:48px; width:auto; margin-bottom:1.1rem; }
  .site-footer h3{
    font-family:var(--font-display); color:#fff; font-size:1.02rem; font-weight:700;
    margin-bottom:.9rem; letter-spacing:.02em;
  }
  .site-footer p{ font-size:.96rem; }
  .site-footer ul{ display:grid; gap:.5rem; }
  .site-footer a{ color:#CBB8D1; text-decoration:none; }
  .site-footer a:hover{ color:#fff; text-decoration:underline; }
  .footer-rics{
    display:inline-flex; align-items:center; gap:.8rem;
    background:#fff; border-radius:var(--radius-sm); padding:.7rem .95rem; margin-top:1.2rem;
  }
  .footer-rics img{ height:44px; width:auto; }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem;
    display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    font-size:.88rem; color:#A08BA6;
  }

  /* ============ MOBILE CTA BAR ============ */
  .cta-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    display:none;
    background:var(--purple-950);
    border-top:1px solid rgba(255,255,255,.14);
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
    box-shadow:0 -12px 30px -12px rgba(42,16,47,.55);
  }
  .cta-bar-inner{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:.55rem; }
  .cta-bar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    text-decoration:none; font-weight:700; font-size:.92rem;
    padding:.75rem .5rem; border-radius:var(--radius-sm); line-height:1.1;
    color:#fff;
  }
  .cta-bar a svg{ flex:none; }
  .cta-bar .cta-call{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
  .cta-bar .cta-wa{ background:#0E7A43; } /* WhatsApp-family green, ≥4.5:1 with white at 14.7px bold */
  .cta-bar .cta-quote{ background:var(--honey); color:var(--purple-950); }
  .cta-bar a:active{ transform:scale(.97); }
  @media (max-width: 767px){
    .cta-bar{ display:block; }
    body{ padding-bottom:calc(var(--ctabar-h) + env(safe-area-inset-bottom)); }
    html{ scroll-padding-bottom:calc(var(--ctabar-h) + 16px); }
  }

  /* ============ SURVEY FINDER (.fk-finder) ============ */
  .fk-finder-section{ background:var(--paper-alt); }
  .fk-finder-grid{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:start;
  }
  @media (max-width: 900px){
    .fk-finder-grid{ grid-template-columns:1fr; gap:1.4rem; }
    .fk-finder-intro h2{ font-size:clamp(1.65rem, 6vw, 2.2rem); }
    .fk-finder-intro p{ margin-bottom:0; font-size:1.02rem; }
    .fk-finder-intro .fk-finder-points{ display:none; } /* keep the finder itself near the top on phones */
  }
  .fk-finder-intro p{ color:var(--ink-soft); margin:.7rem 0 1.4rem; font-size:1.08rem; }
  .fk-finder-intro .eyebrow{ margin-bottom:.65rem; }
  .fk-finder-points{ display:grid; gap:.6rem; }
  .fk-finder-points li{ display:flex; gap:.6rem; align-items:flex-start; font-weight:600; font-size:.97rem; }
  .fk-finder-points svg{ flex:none; margin-top:.25rem; color:var(--honey-dark); }
  @media (min-width: 901px){ .fk-finder-intro{ position:sticky; top:104px; } }

  .fk-finder{
    position:relative; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem);
    box-shadow:var(--shadow-lift); scroll-margin-top:96px; overflow:hidden;
  }
  .fk-finder::before{
    content:""; position:absolute; left:0; right:0; top:0; height:5px;
    background:linear-gradient(90deg, var(--purple-800) 0 60%, var(--honey) 60%);
  }
  .fk-finder__head{
    display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.1rem;
  }
  .fk-finder__kicker{
    display:inline-flex; align-items:center; gap:.5rem;
    font-weight:700; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--purple-700);
  }
  .fk-finder__kicker::before{ content:""; width:26px; height:3px; border-radius:2px; background:var(--honey); }
  .fk-finder__progress{
    display:inline-block; font-weight:700; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
    color:var(--purple-700); background:var(--purple-tint); border-radius:999px; padding:.3rem .8rem; white-space:nowrap;
  }
  .fk-finder__step[hidden], .fk-finder__result[hidden]{ display:none; }
  .fk-finder__q{
    font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.12;
    font-size:clamp(1.4rem, 2.6vw, 1.85rem); color:var(--ink); margin-bottom:1.1rem;
  }
  .fk-finder__q:focus{ outline:none; }
  .fk-finder__opt{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    width:100%; text-align:left; min-height:64px;
    background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm);
    color:var(--ink); font-weight:700; font-size:1.02rem; line-height:1.3;
    padding:.9rem 1rem .9rem 1.1rem; margin-bottom:.7rem;
    transition:border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .fk-finder__opt:last-child{ margin-bottom:0; }
  .fk-finder__opt:hover{
    border-color:var(--purple-600); background:#FBF7FA;
    transform:translateY(-2px); box-shadow:var(--shadow-soft);
  }
  .fk-finder__opt:active{ transform:translateY(0); }
  .fk-finder__opt small{
    display:block; font-weight:500; color:var(--ink-soft); font-size:.88rem; margin-top:.15rem; line-height:1.4;
  }
  .fk-finder__arrow{
    flex:none; width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--honey-tint); color:var(--honey-dark);
    transition:background-color .18s ease, color .18s ease, transform .18s ease;
  }
  .fk-finder__opt:hover .fk-finder__arrow{ background:var(--honey); color:var(--purple-950); transform:translateX(3px); }
  .fk-finder__foot{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem;
    margin-top:1.2rem; padding-top:.9rem; border-top:1px solid var(--line);
  }
  .fk-finder__link{
    display:inline-flex; align-items:center; min-height:44px;
    background:none; border:0; padding:.4rem 0; color:var(--purple-800);
    font-weight:700; font-size:.92rem; text-decoration:underline; text-underline-offset:3px;
    text-decoration-thickness:1.5px; cursor:pointer; transition:color .15s ease;
  }
  .fk-finder__link:hover{ color:var(--honey-dark); }
  .fk-finder__link[hidden]{ display:none; }
  .fk-finder__foot-nav{ display:flex; gap:1.2rem; align-items:center; }
  .fk-finder__foot-nav:empty{ display:none; }
  .fk-finder__result-title{
    font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.08;
    font-size:clamp(1.55rem, 3vw, 2.15rem); color:var(--ink); margin:.7rem 0 .35rem;
  }
  .fk-finder__result-title:focus{ outline:none; }
  .fk-finder__price{
    font-family:var(--font-display); font-weight:800; font-size:1.55rem; color:var(--purple-700); margin-bottom:.7rem;
  }
  .fk-finder__price small{ font-family:var(--font-body); font-weight:600; font-size:.85rem; color:var(--ink-soft); }
  .fk-finder__why{ color:var(--ink-soft); margin-bottom:1.3rem; max-width:52ch; }
  .fk-finder__actions{ display:flex; flex-direction:column; gap:.7rem; }
  .fk-finder__actions .btn{ width:100%; }
  @media (min-width: 560px){
    .fk-finder__actions{ flex-direction:row; flex-wrap:wrap; }
    .fk-finder__actions .btn{ width:auto; }
  }
  @media (max-width: 559px){
    .fk-finder__result{ display:flex; flex-direction:column; }
    .fk-finder__why{ order:1; margin-bottom:0; margin-top:1rem; }
  }
  @media (prefers-reduced-motion: no-preference){
    .fk-finder__step, .fk-finder__result{ animation:fkStepIn .28s cubic-bezier(.22,.9,.3,1); }
  }
  @keyframes fkStepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  /* highlight the matching survey card when the finder jumps to it */
  .survey-card{ scroll-margin-top:110px; }
  .survey-card.fk-flash{ box-shadow:0 0 0 4px var(--honey), var(--shadow-lift); border-color:var(--honey); }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }

  /* Print: reveal everything the IntersectionObserver would normally fade in */
  @media print{
    [data-reveal], .hero-anim{ opacity:1 !important; transform:none !important; }
    .cta-bar, .video-toggle{ display:none !important; }
  }


.fk-sister{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);max-width:320px}
.fk-sister span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;white-space:nowrap;color:#fff}
.fk-sister img{height:34px;width:auto;display:block}


.btn-honey{background:#6faa43!important;color:#241031!important;box-shadow:0 10px 24px -10px rgba(111,170,67,.55)!important}
.btn-honey:hover{background:#5c8f36!important}
.cta-bar .cta-quote{background:#6faa43!important;color:#241031!important}

/* =====================================================================
   INNER PAGES (24 Sep 2026) — same tokens, type and header as the homepage
   ===================================================================== */
.page-hero{ position:relative; overflow:hidden; color:#fff; background:var(--purple-950); padding:clamp(110px, 9vw, 170px) 0 clamp(2.4rem, 4vw, 3.6rem); }
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(42,16,47,.94) 0%, rgba(42,16,47,.82) 45%, rgba(42,16,47,.55) 100%); }
.page-hero-inner{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size:clamp(32px, 4.2vw, 68px); font-weight:800; line-height:1.1; letter-spacing:-.02em; max-width:20ch; margin-bottom:.9rem; text-wrap:balance; }
.page-hero-lead{ font-size:clamp(16px, 1.16vw, 20px); color:rgba(255,255,255,.9); max-width:44rem; margin-bottom:1.6rem; }
.page-hero-meta{ color:rgba(255,255,255,.8); font-size:.95rem; margin:-.6rem 0 1.4rem; }
.page-hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }
.page-hero .btn-outline{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); }
.page-hero .btn-outline:hover{ background:#fff; color:var(--purple-800); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.3rem .5rem; list-style:none; font-size:.88rem; margin-bottom:1.2rem; color:rgba(255,255,255,.75); }
.crumbs li + li::before{ content:"/"; margin-right:.5rem; opacity:.6; }
.crumbs a{ color:#fff; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
@media (max-width: 600px){ .page-hero-ctas{ display:none; } .page-hero{ padding-top:96px; } }

.page-body{ padding:clamp(2.6rem, 5vw, 4.5rem) 0; }
.page-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 360px); gap:clamp(2rem, 4vw, 4.5rem); align-items:start; }
@media (max-width: 960px){ .page-grid{ grid-template-columns:minmax(0, 1fr); } }
.page-body--single .prose{ max-width:760px; }

/* Long-form text */
.prose{ font-size:1.06rem; line-height:1.72; color:var(--ink); max-width:72ch; min-width:0; }
.prose > * + *{ margin-top:1.05em; }
.prose h2{ font-size:clamp(1.45rem, 2.3vw, 1.95rem); margin-top:2.1em; line-height:1.2; text-wrap:balance; }
.prose h3{ font-size:1.2rem; margin-top:1.8em; }
.prose h4{ font-size:1.05rem; margin-top:1.5em; font-family:var(--font-display); }
.prose > h2:first-child, .prose > h3:first-child{ margin-top:0; }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.4em; }
.prose li::marker{ color:var(--purple-700); }
.prose a{ color:var(--purple-700); text-underline-offset:3px; overflow-wrap:anywhere; }
.prose a:hover{ color:var(--purple-900); }
.prose blockquote{ border-left:4px solid var(--honey); padding:.4em 0 .4em 1em; color:var(--ink-soft); }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.prose table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.prose th, .prose td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th{ background:var(--purple-tint); color:var(--purple-900); font-weight:700; }

/* FAQ accordion (question headings from the old pages) */
.faq{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden; }
.faq-item + .faq-item{ border-top:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:1rem 3rem 1rem 1.2rem; font-weight:700; position:relative; min-height:44px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--purple-700); font-weight:600; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item summary:hover{ background:var(--paper); }
.faq-a{ padding:0 1.2rem 1.1rem; }
.faq-a > * + *{ margin-top:.8em; }

/* Sidebar */
.page-side{ display:grid; gap:1.2rem; position:sticky; top:96px; }
@media (max-width: 960px){ .page-side{ position:static; } }
.side-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-soft); }
.side-card--quote{ border-top:4px solid var(--honey); display:grid; gap:.7rem; }
.side-card--quote .btn{ width:100%; justify-content:center; }
.side-kicker{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--ink); }
.side-price{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--purple-700); line-height:1.1; }
.side-price small{ font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.side-price--text{ font-size:1.05rem; }
.side-note{ font-size:.92rem; color:var(--ink-soft); }
.side-note a{ color:var(--purple-700); font-weight:700; }
.side-h{ font-size:1rem; margin-bottom:.6rem; }
.side-list{ display:grid; }
.side-list a{ display:block; padding:.55rem 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-weight:600; font-size:.97rem; }
.side-list li:last-child a{ border-bottom:0; }
.side-list a:hover{ color:var(--purple-700); }
.side-list a[aria-current="page"]{ color:var(--purple-700); }
.side-list a[aria-current="page"]::before{ content:"\2192  "; }

/* Finder call-to-action band */
.cta-band{ background:var(--purple-900); color:#fff; padding:clamp(2.6rem, 5vw, 4rem) 0; }
.cta-band-inner{ display:flex; flex-wrap:wrap; gap:1.4rem 3rem; align-items:center; justify-content:space-between; }
.cta-band h2{ color:#fff; font-size:clamp(1.5rem, 2.6vw, 2.2rem); }
.cta-band p{ color:rgba(255,255,255,.85); margin-top:.4rem; }
.cta-band-btns{ display:flex; flex-wrap:wrap; gap:.8rem; }
.cta-band .btn-outline{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); }
.cta-band .btn-outline:hover{ background:#fff; color:var(--purple-800); }

/* Guides listing */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:1.3rem; }
.post-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem; display:grid; gap:.55rem; align-content:start; transition:border-color .15s ease, box-shadow .15s ease; }
.post-card:hover{ border-color:var(--purple-600); box-shadow:var(--shadow-soft); }
.post-card h2{ font-size:1.18rem; line-height:1.3; }
.post-card h2 a{ color:var(--ink); text-decoration:none; }
.post-card h2 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.post-card-meta{ font-size:.85rem; color:var(--ink-soft); font-weight:600; }
.post-card p:last-child{ color:var(--ink-soft); font-size:.97rem; }

/* Footer: four columns across all pages */
.footer-grid--4{ grid-template-columns:1.3fr 1fr 1fr 1.1fr; }
@media (max-width: 960px){ .footer-grid--4{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid--4{ grid-template-columns:minmax(0, 1fr); } }
.footer-h{ font-size:1.02rem; color:#fff; margin-bottom:.9rem; }
.footer-bottom a{ color:inherit; }

/* =====================================================================
   UI KIT v2 (24 Sep 2026): modules for service, about and area pages
   ===================================================================== */
.kit-ico{ flex:none; color:var(--purple-700); }

/* Page hero extras */
.hero-price{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem, 2.4vw, 2.1rem); color:var(--honey); margin:-.4rem 0 1.4rem; }
.hero-price small{ font-family:var(--font-body); font-size:.9rem; font-weight:600; color:rgba(255,255,255,.8); }
.page-hero-trust{ position:relative; z-index:1; margin-top:clamp(1.6rem, 3vw, 2.6rem); }
.page-hero-trust .hero-trust{ justify-content:flex-start; }
.page-hero .area-ticker{ position:relative; z-index:1; margin-top:clamp(1.4rem, 3vw, 2.4rem); }
.page-hero .ticker-toggle{ right:clamp(12px, 2vw, 32px); }
.page-hero--tall{ padding-bottom:1.2rem; }

/* At a glance */
.glance{ background:var(--card); border-bottom:1px solid var(--line); }
.glance-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.glance-item{ display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; align-items:center; padding:1.4rem clamp(1rem, 2vw, 1.8rem); border-right:1px solid var(--line); }
.glance-item:last-child{ border-right:0; }
.glance-item .kit-ico{ grid-row:span 2; width:30px; height:30px; padding:6px; box-sizing:content-box; border-radius:12px; background:var(--purple-tint); }
.glance-label{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.glance-item b{ font-family:var(--font-display); font-size:1.02rem; line-height:1.3; }
@media (max-width: 980px){ .glance-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .glance-item:nth-child(2){ border-right:0; } .glance-item:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
@media (max-width: 520px){ .glance-grid{ grid-template-columns:minmax(0, 1fr); } .glance-item{ border-right:0; border-bottom:1px solid var(--line); } }

/* Finder in the sidebar */
.side-finder .fk-finder{ box-shadow:var(--shadow-soft); }
.page-side{ position:static; }

/* How it works */
.steps{ background:var(--paper-alt); }
.steps-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.2rem; counter-reset:none; }
.step{ position:relative; background:var(--card); border-radius:var(--radius); padding:1.6rem 1.4rem 1.5rem; border:1px solid var(--line); }
.step-n{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--purple-800); color:#fff; font-family:var(--font-display); font-weight:800; margin-bottom:1rem; }
.step h3{ font-size:1.1rem; margin-bottom:.4rem; }
.step p{ color:var(--ink-soft); font-size:.97rem; }
.step:not(:last-child)::after{ content:""; position:absolute; top:2.9rem; right:-1.2rem; width:1.2rem; height:2px; background:var(--honey); }
@media (max-width: 980px){ .steps-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .step::after{ display:none; } }
@media (max-width: 560px){ .steps-grid{ grid-template-columns:minmax(0, 1fr); } }

/* Current card in the survey chooser */
.survey-card[data-current]{ outline:3px solid var(--honey); outline-offset:4px; }
.survey-card[data-current]::after{ content:"You\2019re looking at this one"; position:absolute; top:-14px; right:16px; background:var(--purple-950); color:#fff; font-size:.75rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; }
.survey-card{ position:relative; }

/* Media + text split */
.split-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.split--flip .split-media{ order:2; }
.split-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:calc(var(--radius) + 6px); box-shadow:var(--shadow-lift); }
.split-body .eyebrow{ margin-bottom:.6rem; }
.split-body h2{ margin-top:0; }
@media (max-width: 900px){ .split-grid{ grid-template-columns:minmax(0, 1fr); } .split--flip .split-media{ order:0; } }
.cred-chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none !important; padding:0 !important; margin-top:1.4rem !important; }
.cred-chips li{ margin:0 !important; padding:.4rem .85rem; border-radius:999px; background:var(--purple-tint); color:var(--purple-900); font-weight:700; font-size:.85rem; }

/* Values */
.values-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem; }
.value-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.6rem; }
.value-card .kit-ico{ width:34px; height:34px; padding:9px; box-sizing:content-box; border-radius:14px; background:var(--honey-tint); color:var(--honey-dark); margin-bottom:1rem; }
.value-card h3{ margin-bottom:.45rem; }
.value-card p{ color:var(--ink-soft); }
@media (max-width: 900px){ .values-grid{ grid-template-columns:minmax(0, 1fr); } }

/* Story timeline (CustomerKnect pattern): spine fills on scroll, discs light up, alternating photo cards */
.story{ background:var(--purple-950); color:rgba(255,255,255,.88); overflow:hidden; }
.story .section-head h2{ color:#fff; }
.story .section-head p{ color:rgba(255,255,255,.75); }
.story .eyebrow{ color:var(--honey); }
.story-tl{ position:relative; list-style:none; margin:clamp(2.4rem, 5vw, 4rem) auto 0; padding:0; max-width:1100px; }
.story-tl::before, .story-prog{ content:""; position:absolute; left:50%; top:0; width:4px; transform:translateX(-50%); border-radius:4px; }
.story-tl::before{ bottom:0; background:rgba(255,255,255,.14); }
.story-prog{ height:0; background:linear-gradient(var(--purple-600), var(--honey)); transition:height .15s linear; }
.story-item{ position:relative; display:grid; grid-template-columns:1fr 96px 1fr; align-items:center; margin-bottom:clamp(2.4rem, 5vw, 4rem); }
.story-item:last-child{ margin-bottom:0; }
.story-yr{ grid-column:2; grid-row:1; justify-self:center; z-index:2; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; background:var(--purple-950); border:5px solid rgba(255,255,255,.28);
  font-family:var(--font-display); font-weight:800; font-size:.95rem; color:#fff;
  transition:transform .45s cubic-bezier(.22,.9,.3,1), background-color .45s ease, border-color .45s ease, color .45s ease; }
.story-item.in .story-yr{ background:var(--honey); border-color:var(--honey); color:var(--purple-950); transform:scale(1.08); }
.story-card{ grid-row:1; background:#fff; color:var(--ink); border-radius:calc(var(--radius) + 4px); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.story-item.in .story-card{ opacity:1; transform:none; }
.story-item:nth-child(odd of .story-item) .story-card{ grid-column:1; }
.story-item:nth-child(even of .story-item) .story-card{ grid-column:3; }
.story-ph{ margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--purple-900); }
.story-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.story-item.in .story-ph img{ transform:scale(1.02); }
.story-ph figcaption{ position:absolute; left:12px; bottom:12px; background:rgba(42,16,47,.85); color:#fff; font-size:.8rem; font-weight:600; padding:.35rem .7rem; border-radius:8px; }
.story-txt{ padding:1.3rem 1.5rem 1.5rem; }
.story-txt h3{ font-size:1.3rem; margin-bottom:.4rem; }
.story-txt p{ color:var(--ink-soft); }
.story-credit{ text-align:center; margin-top:2.4rem; font-size:.85rem; color:rgba(255,255,255,.55); }
.js-off .story-card, .no-js .story-card{ opacity:1; transform:none; }
@media (max-width: 820px){
  .story-tl::before, .story-prog{ left:22px; }
  .story-item{ grid-template-columns:44px minmax(0, 1fr); gap:.75rem; align-items:start; }
  .story-yr{ grid-column:1; width:44px; height:44px; border-width:3px; font-size:.72rem; }
  .story .container{ width:min(1140px, 100% - 1.5rem); }
  .story-item:nth-child(odd of .story-item) .story-card, .story-item:nth-child(even of .story-item) .story-card{ grid-column:2; }
}
@media (prefers-reduced-motion: reduce){
  .story-card{ opacity:1; transform:none; transition:none; }
  .story-yr, .story-ph img, .story-prog{ transition:none; }
}

/* Team profiles */
.profiles-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:1.3rem; align-items:start; }
.profile{ display:grid; grid-template-columns:96px 1fr; gap:1.2rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.profile-face img, .profile-mono{ width:96px; height:96px; border-radius:50%; object-fit:cover; }
.profile-mono{ display:grid; place-items:center; background:var(--purple-tint); color:var(--purple-800); font-family:var(--font-display); font-weight:800; font-size:1.6rem; }
.profile h3{ font-size:1.15rem; }
.profile .creds{ display:inline-block; margin-left:.3rem; font-size:.72rem; font-weight:800; padding:.15rem .5rem; border-radius:999px; background:var(--purple-tint); color:var(--purple-800); vertical-align:middle; }
.profile-role{ color:var(--ink-soft); font-size:.95rem; margin:.2rem 0 .6rem; }
.profile-bio summary{ cursor:pointer; color:var(--purple-700); font-weight:700; font-size:.95rem; min-height:32px; }
.profile-bio p{ margin-top:.7rem; font-size:.96rem; color:var(--ink); }
@media (max-width: 420px){ .profile{ grid-template-columns:minmax(0, 1fr); } }

/* Client quotes (real, from the old About page) */
.cq-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:1.3rem; max-width:900px; margin:0 auto; }
.client-quote{ background:var(--card); border-radius:var(--radius); padding:1.8rem; border-left:5px solid var(--honey); box-shadow:var(--shadow-soft); }
.client-quote blockquote{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; line-height:1.4; color:var(--ink); }
.client-quote figcaption{ margin-top:.9rem; color:var(--ink-soft); font-weight:600; }

/* Local panel (areas + contact) */
.local{ background:var(--card); }
.local-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(2rem, 4vw, 4rem); align-items:stretch; }
.local-facts h2{ margin:.5rem 0 1.4rem; }
.local-dl{ display:grid; gap:.9rem; margin-bottom:1.6rem; }
.local-dl dt{ display:flex; gap:.5rem; align-items:center; font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.local-dl dt .kit-ico{ width:18px; height:18px; }
.local-dl dd{ font-size:1.05rem; margin-top:.2rem; }
.local-sub{ font-size:1rem; margin:1.4rem 0 .7rem; }
.local-services{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
.local-services a{ display:flex; gap:.5rem; align-items:center; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); font-weight:700; font-size:.95rem; background:var(--paper); }
.local-services a:hover{ border-color:var(--purple-600); color:var(--purple-700); }
.local-services .kit-ico{ width:20px; height:20px; color:var(--honey-dark); }
.pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill-list li{ padding:.4rem .85rem; border-radius:999px; border:1px solid var(--line); background:var(--paper); font-weight:600; font-size:.9rem; }
.local-map{ min-height:360px; border-radius:calc(var(--radius) + 4px); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.local-map iframe{ width:100%; height:100%; min-height:360px; border:0; display:block; }
@media (max-width: 900px){ .local-grid{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 480px){ .local-services{ grid-template-columns:minmax(0, 1fr); } }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:repeat(2, minmax(0, 1fr)); gap:1rem; }
.gallery-item{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; min-height:220px; }
.gallery-item--big{ grid-row:span 2; min-height:460px; }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.03); }
.gallery-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem .9rem; color:#fff; font-weight:700; font-size:.95rem; background:linear-gradient(transparent, rgba(20,6,26,.8)); }
.gallery-credit{ margin-top:.8rem; font-size:.85rem; color:var(--ink-soft); }
@media (max-width: 760px){ .gallery-grid{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; } .gallery-item--big{ grid-row:auto; min-height:280px; } }
@media (prefers-reduced-motion: reduce){ .gallery-item img{ transition:none; } }
.glance{ padding:0; }

/* ---------- Town landing pages ---------- */
.housing-sub{ font-size:1rem; margin-top:1.4rem !important; }
.type-chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none !important; padding:0 !important; }
.type-chips li{ margin:0 !important; padding:.45rem .9rem; border-radius:999px; background:var(--card); border:1px solid var(--line); font-weight:600; font-size:.9rem; }
.watch{ background:var(--paper-alt); }
.watch-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.1rem; }
.watch-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.3rem; }
.watch-card .kit-ico{ width:30px; height:30px; padding:8px; box-sizing:content-box; border-radius:12px; background:var(--purple-tint); margin-bottom:.9rem; }
.watch-card h3{ font-size:1.08rem; margin-bottom:.4rem; }
.watch-card p{ color:var(--ink-soft); font-size:.97rem; }
@media (max-width: 1000px){ .watch-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .watch-grid{ grid-template-columns:minmax(0, 1fr); } }
.which-note{ padding-top:clamp(2.4rem, 5vw, 3.6rem); }
.which-note p{ max-width:760px; margin:0 auto; font-size:1.12rem; line-height:1.65; text-align:center; font-family:var(--font-display); font-weight:600; color:var(--ink); }
.which-note + .explainer{ padding-top:clamp(1.6rem, 3vw, 2.4rem); }
.faq-wrap{ max-width:860px; }
.gallery-grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; }
.gallery-grid--2 .gallery-item, .gallery-grid--2 .gallery-item--big{ grid-row:auto; min-height:360px; }
@media (max-width: 760px){ .gallery-grid--2{ grid-template-columns:minmax(0, 1fr); } .gallery-grid--2 .gallery-item{ min-height:260px; } }

/* Areas hub cards */
.town-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:1.2rem; }
.town-card{ display:grid; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.town-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--purple-600); }
.town-card-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--purple-900); }
.town-card-img img{ width:100%; height:100%; object-fit:cover; }
.town-card-body{ display:grid; gap:.2rem; padding:1rem 1.2rem 1.2rem; }
.town-card-body b{ font-family:var(--font-display); font-size:1.2rem; }
.town-card-body small{ color:var(--ink-soft); font-size:.9rem; }
@media (prefers-reduced-motion: reduce){ .town-card{ transition:none; } .town-card:hover{ transform:none; } }

/* Town advice as the intro of the "Which survey?" section */
.explainer-lead{ max-width:820px; margin:-.4rem 0 clamp(1.6rem, 3vw, 2.4rem); padding:1.1rem 1.3rem; border-left:4px solid var(--honey);
  background:var(--card); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:1.05rem; line-height:1.65; color:var(--ink); }
.explainer-lead-k{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--purple-700); margin-bottom:.3rem; }
.watch + .explainer{ padding-top:0; }

/* ---------- Cookie banner ---------- */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin:0 auto;background:var(--purple-950);color:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 12px 40px rgba(42,16,47,.35);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-size:.95rem;line-height:1.45}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;flex:1 1 260px}
.cookie-bar a{color:var(--honey)}
.cookie-bar .cookie-actions{display:flex;gap:10px}
.cookie-bar button{font:inherit;font-weight:700;border-radius:999px;padding:10px 18px;cursor:pointer;border:2px solid var(--honey)}
.cookie-bar .cookie-yes{background:var(--honey);color:var(--purple-950)}
.cookie-bar .cookie-no{background:transparent;color:#fff}
.cookie-bar button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:520px){.cookie-bar{bottom:84px}.cookie-bar .cookie-actions{width:100%}.cookie-bar button{flex:1}}