:root{
    --paddock: #1E3A2D;
    --paddock-deep: #142A20;
    --parchment: #F3ECDA;
    --parchment-soft: #FAF6EA;
    --rust: #BC5B2E;
    --rust-deep: #9A4622;
    --wattle: #D9A441;
    --ink: #2A2620;
    --ink-soft: #5A5246;
    --line: rgba(42,38,32,0.14);
    --white: #FFFEFB;
    --sky: #A9C2B8;
    --radius: 4px;
    --max: 1180px;
    --font-display: "Fraunces", serif;
    --font-body: "Inter", sans-serif;
    --font-label: "JetBrains Mono", monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:600; color:var(--paddock-deep); letter-spacing:-0.01em;}
  p{margin:0;}
  .eyebrow{
    font-family:var(--font-label);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--rust-deep);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--rust-deep);
    display:inline-block;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15.5px;
    padding:13px 24px;
    border-radius:var(--radius);
    text-decoration:none;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--rust); color:var(--white); box-shadow:0 3px 0 var(--rust-deep);}
  .btn-primary:hover{box-shadow:0 4px 0 var(--rust-deep);}
  .btn-ghost{background:transparent; color:var(--paddock-deep); border-color:var(--paddock-deep);}
  .btn-ghost:hover{background:var(--paddock-deep); color:var(--parchment);}
  .btn-light{background:var(--parchment-soft); color:var(--paddock-deep); border-color:var(--line);}
  .btn-light:hover{background:var(--white);}
  .btn-sm{padding:9px 16px; font-size:13.5px;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--paddock-deep);
    border-bottom:3px solid var(--rust);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    white-space:nowrap; min-width:0;
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    color:var(--parchment);
    text-decoration:none;
    letter-spacing:-0.01em;
  }
  .logo span{color:var(--wattle);}
  .logo-mark{display:block; flex-shrink:0;}
  .logo-mark img{height:44px; width:auto; display:block;}
  .nav-links{
    display:flex; align-items:center; gap:28px;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    color:var(--parchment);
    text-decoration:none;
    font-size:14.5px;
    font-weight:500;
    opacity:.88;
    transition:opacity .15s;
  }
  .nav-links a:hover{opacity:1;}
  /* The page you are currently on. aria-current also tells a screen reader,
     so the highlight is not the only way of knowing. */
  .nav-links a[aria-current="page"]{
    opacity:1;
    color:var(--wattle);
    font-weight:600;
    border-bottom:2px solid var(--wattle);
    padding-bottom:3px;
  }
  .nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--rust); color:var(--white);
    border:1.5px solid transparent;
    padding:10px 18px;
    border-radius:var(--radius);
    text-decoration:none;
    font-family:var(--font-body);
    font-weight:600;
    font-size:14.5px;
    white-space:nowrap;
    box-shadow:0 3px 0 var(--rust-deep);
    transition:background .15s ease, transform .15s ease;
  }
  .nav-cta:hover{background:var(--rust-deep); transform:translateY(-1px);}
  .nav-cta:focus-visible{outline:2px solid var(--wattle); outline-offset:3px;}
  .nav-right{display:flex; align-items:center; gap:22px;}
  .nav-toggle{display:none; background:none; border:none; color:var(--parchment); font-size:26px; cursor:pointer;}

  @media (max-width:880px){
    .nav-links{
      position:fixed; inset:62px 0 0 0; background:var(--paddock-deep);
      flex-direction:column; padding:30px 28px; gap:22px;
      transform:translateX(100%); transition:transform .25s ease;
      align-items:flex-start;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{font-size:18px;}
    .nav-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--paddock);
    color:var(--parchment);
    overflow:hidden;
    padding:88px 0 70px;
  }
  .hero::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:54px;
    background:
      linear-gradient(180deg, transparent 0%, var(--parchment) 92%);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
    position:relative; z-index:2;
  }
  .hero h1{
    color:var(--white);
    font-size:clamp(34px, 4.6vw, 56px);
    line-height:1.06;
  }
  .hero h1 em{font-style:italic; color:var(--wattle);}
  .hero-sub{
    margin-top:20px;
    font-size:18px;
    color:rgba(243,236,218,0.86);
    max-width:520px;
    line-height:1.65;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .hero-trust{
    margin-top:34px;
    display:flex; flex-wrap:wrap; gap:10px 22px;
    font-family:var(--font-label);
    font-size:12px; letter-spacing:0.04em;
    color:rgba(243,236,218,0.65);
  }
  .hero-trust span{display:flex; align-items:center; gap:7px;}
  .hero-trust span::before{content:"●"; color:var(--wattle); font-size:8px;}

  .hero-art{position:relative;}
  .hero-art svg{width:100%; height:auto;}

  /* ---------- TRUST STRIP ---------- */
  .strip{
    background:var(--parchment-soft);
    border-bottom:1px solid var(--line);
    padding:22px 0;
  }
  .strip-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px;
    text-align:center;
  }
  .strip-item{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:13.5px; color:var(--ink-soft); max-width:200px;
  }
  .strip-item strong{font-family:var(--font-display); color:var(--paddock-deep); font-size:15px; font-weight:600;}

  /* ---------- SECTION GENERAL ---------- */
  section{padding:84px 0;}
  .section-head{
    max-width:680px; margin-bottom:44px;
  }
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px); line-height:1.12;}
  .section-head p{margin-top:16px; font-size:17px; color:var(--ink-soft); line-height:1.65;}

  .band-dark{background:var(--paddock-deep); color:var(--parchment);}
  .band-dark .section-head h2{color:var(--white);}
  .band-dark .section-head p{color:rgba(243,236,218,.78);}
  .band-dark .eyebrow{color:var(--wattle);}
  .band-dark .eyebrow::before{background:var(--wattle);}

  /* ---------- SERVICE CARDS ---------- */
  .card-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  }
  .card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:760px){
    .card-grid, .card-grid.cols-3{grid-template-columns:1fr;}
  }

  .card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px 28px;
    scroll-margin-top:120px;
    transition: box-shadow .4s ease, background .4s ease;
  }
  .card:target{
    background:#FFF7E8;
    box-shadow:0 0 0 2px var(--wattle), 0 14px 30px -16px rgba(0,0,0,.25);
    animation: settle 1.8s ease 1;
  }
  @keyframes settle{
    0%{box-shadow:0 0 0 5px var(--wattle), 0 14px 30px -16px rgba(0,0,0,.25);}
    100%{box-shadow:0 0 0 2px var(--wattle), 0 14px 30px -16px rgba(0,0,0,.25);}
  }
  .card-icon{
    width:42px;height:42px; margin-bottom:18px;
    color:var(--rust);
  }
  .tag{
    display:inline-block; margin-bottom:12px;
    font-family:var(--font-label); font-size:10.5px;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--paddock-deep); background:var(--wattle);
    padding:4px 9px; border-radius:3px;
  }
  .band-note{
    margin-top:28px; max-width:780px;
    font-size:15px; line-height:1.65;
    color:rgba(243,236,218,.74);
    border-left:3px solid var(--wattle); padding-left:16px;
  }
  .card h3{font-size:20px; margin-bottom:10px;}
  .card p{color:var(--ink-soft); font-size:15px; line-height:1.6;}
  .card .btn{margin-top:18px;}
  .card-feat{
    grid-column:1/-1;
    background:linear-gradient(135deg, var(--paddock) 0%, var(--paddock-deep) 100%);
    color:var(--parchment);
    border:none;
  }
  .card-feat h3{color:var(--white); font-size:24px;}
  .card-feat p{color:rgba(243,236,218,.84); font-size:16px;}
  /* The generic .card:target highlight is a cream background, which would wash out
     the dark feature cards and make their light text unreadable. Keep the gradient. */
  .card-feat:target{
    background:linear-gradient(135deg, var(--paddock) 0%, var(--paddock-deep) 100%);
    box-shadow:0 0 0 2px var(--wattle), 0 14px 30px -16px rgba(0,0,0,.25);
  }
  .card-feat .eyebrow{color:#F2CE84; font-size:14px; font-weight:700; letter-spacing:.16em;}
  .card-feat .eyebrow::before{background:#F2CE84; width:26px; height:2.5px;}
  .feat-list{
    list-style:none; margin:22px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:14px 30px;
    max-width:840px;
  }
  @media (max-width:760px){ .feat-list{grid-template-columns:1fr;} }
  .feat-list li{
    position:relative; padding-left:20px;
    font-size:15.5px; line-height:1.6; color:rgba(243,236,218,.84);
  }
  .feat-list li::before{
    content:""; position:absolute; left:0; top:9px;
    width:8px; height:8px; border-radius:50%; background:var(--wattle);
  }
  .feat-list strong{color:var(--white); font-weight:600;}

  /* ---------- MAP / SIGNATURE ---------- */
  .map-section{
    background:var(--parchment-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .map-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  }
  @media (max-width:880px){ .map-grid{grid-template-columns:1fr;} }
  .map-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px;
  }
  .town-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .town-list li{
    display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-soft);
  }
  .town-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rust); flex-shrink:0;}

  /* ---------- HOW IT WORKS ---------- */
  .steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step;
  }
  @media (max-width:880px){ .steps{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .steps{grid-template-columns:1fr;} }
  .step{position:relative; padding-top:8px;}
  .step-num{
    font-family:var(--font-display); font-size:42px; font-weight:600;
    color:var(--rust); opacity:.9; line-height:1;
  }
  .step h4{margin-top:14px; font-size:17px; color:var(--paddock-deep);}
  .step p{margin-top:8px; font-size:14.5px; color:var(--ink-soft);}

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:54px; align-items:center;
  }
  @media (max-width:880px){ .about-grid{grid-template-columns:1fr;} }
  .about-photo{
    background:var(--paddock); border-radius:var(--radius); aspect-ratio:4/5;
    display:flex; align-items:center; justify-content:center; padding:30px;
  }
  .about-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px;}
  .stat{border-top:2px solid var(--rust); padding-top:10px;}
  .stat strong{display:block; font-family:var(--font-display); font-size:30px; color:var(--paddock-deep);}
  .stat span{font-size:13.5px; color:var(--ink-soft);}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px; margin:0 auto;}
  details{
    border-bottom:1px solid var(--line);
    padding:20px 0;
  }
  details summary{
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
    font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--paddock-deep);
  }
  details summary::-webkit-details-marker{display:none;}
  details summary::after{
    content:"+"; font-size:24px; color:var(--rust); font-weight:400; transition:transform .2s;
  }
  details[open] summary::after{transform:rotate(45deg);}
  details p{margin-top:14px; color:var(--ink-soft); font-size:15.5px; max-width:640px;}

  /* ---------- CONTACT ---------- */
  .contact-section{background:var(--paddock-deep); color:var(--parchment);}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px;}
  @media (max-width:880px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-details{display:flex; flex-direction:column; gap:18px; margin-top:28px;}
  .contact-row{display:flex; gap:14px; align-items:flex-start;}
  .contact-row svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--wattle);}
  .contact-row a, .contact-row span, .contact-row button{color:var(--parchment); text-decoration:none; font-size:15.5px;}
  .contact-row a:hover, .contact-row button:hover{color:var(--wattle);}
  .contact-row button{
    background:none;
    border:0;
    padding:0;
    font-family:var(--font-body);
    cursor:pointer;
    text-align:left;
  }
  .contact-row button:focus-visible{outline:2px solid var(--wattle); outline-offset:4px; border-radius:4px;}

  form{background:var(--parchment-soft); border-radius:var(--radius); padding:32px; color:var(--ink);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--paddock-deep);}
  .field input, .field select, .field textarea{
    width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius);
    font-family:var(--font-body); font-size:15px; background:var(--white); color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--rust); outline-offset:1px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
  form .btn{width:100%; justify-content:center; margin-top:6px;}
  .form-note{font-size:12.5px; color:var(--ink-soft); margin-top:12px; text-align:center;}

  /* ---------- CALLOUT ---------- */
  .callout{
    margin-top:24px;
    display:flex; align-items:flex-start; gap:14px;
    background:var(--white);
    border:1px solid var(--line);
    border-left:4px solid var(--wattle);
    border-radius:var(--radius);
    padding:18px 22px;
  }
  .callout svg{width:22px; height:22px; flex-shrink:0; color:var(--wattle); margin-top:2px;}
  .callout p{font-size:15px; color:var(--ink-soft);}
  .callout strong{color:var(--paddock-deep);}

  /* ---------- TESTIMONIALS ---------- */
  .quote-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 26px;
    display:flex; flex-direction:column; gap:16px;
  }
  .quote-card blockquote{margin:0; font-size:16px; line-height:1.65; color:var(--ink-soft);}
  .quote-card blockquote::before{
    content:"\201C";
    font-family:var(--font-display); font-size:46px; color:var(--wattle);
    line-height:0; display:block; height:24px;
  }
  .quote-who{
    margin-top:auto;
    font-family:var(--font-label); font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--paddock-deep);
  }
  .quote-who span{
    display:block; margin-top:4px;
    font-family:var(--font-body); font-size:13.5px;
    text-transform:none; letter-spacing:0; color:var(--ink-soft);
  }

  /* ---------- FORM VALIDATION & STATUS ---------- */
  .field .err{display:none; margin-top:6px; font-size:13px; font-weight:600; color:var(--rust-deep);}
  .field.invalid .err{display:block;}
  .field.invalid input, .field.invalid select, .field.invalid textarea{
    border-color:var(--rust); background:#FFF6F1;
  }
  /* Spam trap: hidden from people, filled in by bots. Not display:none, which some bots skip. */
  .hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
  .form-status{
    margin-top:14px; padding:13px 16px; border-radius:var(--radius);
    font-size:14.5px; line-height:1.55; display:none;
  }
  .form-status.show{display:block;}
  .form-status.err{background:#FDECE4; border:1px solid #E9BFA9; color:#8B3E1E;}
  .btn[aria-busy="true"]{opacity:.72; cursor:progress;}
  form.sent{display:none;}
  .form-sent{
    display:none;
    background:var(--parchment-soft); border:1px solid var(--line);
    border-left:4px solid var(--paddock);
    border-radius:var(--radius); padding:30px 28px;
  }
  .form-sent.show{display:block;}
  .form-sent h3{font-size:22px; margin-bottom:10px;}
  .form-sent p{color:var(--ink-soft); font-size:15.5px;}

  /* ---------- FOOTER SOCIALS ---------- */
  .socials{display:flex; gap:12px; list-style:none; margin:0; padding:0;}
  .socials a{
    display:grid; place-items:center; width:38px; height:38px;
    border:1px solid rgba(243,236,218,.28); border-radius:50%;
    color:rgba(243,236,218,.8);
    transition:background .15s, color .15s, border-color .15s;
  }
  .socials a:hover{background:var(--wattle); color:var(--paddock-deep); border-color:var(--wattle);}
  .socials a:focus-visible{outline:2px solid var(--wattle); outline-offset:3px;}
  .socials svg{width:18px; height:18px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--paddock-deep); border-top:1px solid rgba(243,236,218,.12); padding:36px 0;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-row p{color:rgba(243,236,218,.6); font-size:13px;}
  .footer-links{display:flex; gap:20px; list-style:none; padding:0; margin:0;}
  .footer-links a{color:rgba(243,236,218,.75); text-decoration:none; font-size:13.5px;}
  .footer-links a:hover{color:var(--wattle);}

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed; right:24px; bottom:24px; z-index:45;
    display:grid; place-items:center;
    width:48px; height:48px; padding:0;
    color:var(--white); background:var(--rust);
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    box-shadow:0 4px 0 var(--rust-deep), 0 12px 30px rgba(20,42,32,.28);
    cursor:pointer;
    opacity:0; visibility:hidden;
    transform:translateY(14px);
    transition:opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease;
  }
  .back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
  .back-to-top:hover{background:var(--rust-deep); transform:translateY(-2px);}
  .back-to-top:focus-visible{outline:3px solid var(--wattle); outline-offset:3px;}
  .back-to-top svg{width:22px; height:22px;}

  /* ---------- TABLET & MOBILE ---------- */
  @media (max-width:880px){
    body.nav-open{overflow:hidden;}
    section[id]{scroll-margin-top:68px;}
    .hero-grid > *, .map-grid > *, .about-grid > *, .contact-grid > *{min-width:0;}

    .wrap{padding-inline:22px;}
    .nav{min-height:64px; padding:9px 0;}
    .logo{font-size:19px;}
    .nav-right{gap:8px;}
    .nav-cta{padding:9px 14px; font-size:13.5px;}
    .nav-toggle{
      width:44px; height:44px; padding:0;
      place-items:center; border-radius:4px;
      line-height:1;
    }
    .nav-links{
      inset:64px 0 0 0;
      height:calc(100vh - 64px);
      height:calc(100dvh - 64px);
      padding:28px 22px 40px;
      overflow-y:auto;
      visibility:hidden;
      pointer-events:none;
    }
    .nav-links.open{visibility:visible; pointer-events:auto;}
    .nav-links li{width:100%;}
    .nav-links a{
      display:flex; align-items:center;
      min-height:48px; width:100%;
      border-bottom:1px solid rgba(243,236,218,.12);
    }

    .hero{padding:64px 0 48px;}
    .hero-grid{grid-template-columns:1fr; gap:34px;}
    .hero-art{width:min(100%, 440px); margin-inline:auto;}
    .hero-art svg{max-height:360px;}

    section{padding:64px 0;}
    .section-head{margin-bottom:36px;}
    .map-grid, .about-grid, .contact-grid{gap:38px;}
    .about-photo{width:min(100%, 520px); margin-inline:auto;}
  }

  @media (max-width:600px){
    .wrap{padding-inline:18px;}
    .logo{font-size:17px; gap:8px;}
    .logo-mark img{height:34px;}
    /* On a narrow screen the business name, the button and the menu icon were
       fighting for the same row and "Care" was being squeezed against the button.
       Below 600px the button drops its label and becomes a round envelope icon,
       which frees roughly 80px and lets the name sit on one line. font-size:0
       hides the words visually but leaves them readable by a screen reader. */
    .nav-cta{
      width:44px; height:44px; padding:0;
      justify-content:center;
      font-size:0;
      border-radius:50%;
      box-shadow:0 3px 0 var(--rust-deep);
    }
    .nav-cta svg{width:18px; height:18px;}

    .hero{padding:46px 0 34px;}
    .hero::after{height:34px;}
    .hero h1{font-size:clamp(34px, 10.5vw, 44px);}
    .hero-sub{font-size:16px; line-height:1.58; margin-top:18px;}
    .hero-ctas{flex-direction:column; gap:10px; margin-top:26px;}
    .hero-ctas .btn{width:100%; justify-content:center; min-height:50px;}
    .hero-trust{margin-top:25px; gap:9px 16px; line-height:1.45;}
    .hero-art{width:min(100%, 330px);}
    .hero-art svg{max-height:285px;}

    .strip{padding:20px 0;}
    .strip-row{
      display:grid; grid-template-columns:1fr 1fr;
      align-items:start; gap:20px 14px;
    }
    .strip-item{font-size:12.5px; max-width:none; line-height:1.45;}
    .strip-item strong{font-size:14px;}

    section{padding:52px 0;}
    .section-head{margin-bottom:28px;}
    .section-head h2{font-size:clamp(28px, 8.5vw, 36px);}
    .section-head p{font-size:15.5px; line-height:1.6; margin-top:13px;}
    .section-head.center{text-align:left;}
    .eyebrow{
      display:block; font-size:10.5px; line-height:1.6;
      letter-spacing:.11em; overflow-wrap:anywhere;
    }
    .eyebrow::before{margin:0 9px 3px 0;}

    .card-grid{gap:14px;}
    .card{padding:23px 20px;}
    .card-icon{width:38px; height:38px; margin-bottom:15px;}
    .card .btn{width:100%; justify-content:center; min-height:46px;}
    .card-feat h3{font-size:22px;}

    .map-grid, .about-grid, .contact-grid{gap:30px;}
    .map-card{padding:10px;}
    .town-list{margin-top:20px; gap:9px;}
    .steps{gap:28px;}
    .step{padding-left:58px; min-height:48px;}
    .step-num{position:absolute; left:0; top:7px; font-size:36px;}
    .step h4{margin-top:0;}

    .about-photo{aspect-ratio:4/3; padding:20px;}
    .about-photo svg{height:100%; width:auto;}
    .about-stats{gap:14px; margin-top:25px;}
    .stat strong{font-size:26px;}

    details{padding:18px 0;}
    details summary{gap:16px; align-items:flex-start; font-size:17px; line-height:1.35;}
    details summary::after{flex-shrink:0; line-height:1;}

    .contact-details{gap:16px; margin-top:24px;}
    .contact-row{gap:11px; min-width:0;}
    .contact-row a, .contact-row span, .contact-row button{font-size:14.5px; overflow-wrap:anywhere;}
    form{padding:23px 18px;}
    .field-row{grid-template-columns:1fr; gap:0;}
    .field input, .field select, .field textarea{font-size:16px; min-height:46px;}

    footer{padding:30px 0;}
    .footer-row{flex-direction:column; align-items:flex-start;}
    .footer-links{flex-wrap:wrap; gap:12px 20px;}
    .back-to-top{right:16px; bottom:16px; width:46px; height:46px;}
  }

  @media (max-width:360px){
    .wrap{padding-inline:15px;}
    .logo{font-size:16px;}
    .nav-right{gap:2px;}
    .strip-row{grid-template-columns:1fr;}
    .about-stats{grid-template-columns:1fr;}
  }

  ::selection{background:var(--wattle); color:var(--paddock-deep);}
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* On mobile the menu items are already full-width rows with their own divider,
     so the current page just recolours that divider instead of adding a second one. */
  @media (max-width:880px){
    .nav-links a[aria-current="page"]{padding-bottom:0;}
  }

  /* ---------- INNER PAGE HERO ---------- */
  .hero-compact{padding:66px 0 54px;}
  .hero-compact .wrap{position:relative; z-index:2;}
  .hero-compact h1{
    color:var(--white);
    font-size:clamp(30px, 3.9vw, 46px);
    line-height:1.08;
    max-width:900px;
  }
  .hero-compact .hero-sub{max-width:720px;}
  @media (max-width:600px){
    .hero-compact{padding:44px 0 36px;}
    .hero-compact h1{font-size:clamp(28px, 8.6vw, 38px);}
  }