/* ============================================================
   Termite Treatment Ipswich: shared stylesheet
   Loaded by every page (index.html, thank-you/index.html, and
   any future pages). Keep all shared styling here.

   Structure:
   1) Homepage + shared component styles (design tokens, buttons,
      header, sections, form, footer, etc.)
   2) Thank-you page styles (scoped under [data-page="thank-you"]
      and prefixed .ty-* so they never collide with homepage rules)

   NOTE: Do not redesign. This file preserves the original look.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   Identity: deep forest green dominant, cream/white supporting,
   gold accent, terracotta used sparingly for urgency only.
   Type: Fraunces (display) + Plus Jakarta Sans (body/UI).
   ============================================================ */
:root{
  --green-900:#0c281e;
  --green-800:#12372A;
  --green-700:#1a4836;
  --green-600:#256048;
  --green-500:#3a7a5e;
  --cream:#F7F3EA;
  --cream-200:#efe7d6;
  --cream-300:#e6dcc6;
  --white:#FFFFFF;
  --gold:#D99A2B;
  --gold-700:#b97f1c;
  --gold-100:#f7e7c4;
  --soft-green:#EAF3EC;
  --terracotta:#B75D2A;
  --ink:#1E1E1E;
  --ink-soft:#3a4540;
  --muted:#5a6760;
  --muted-on-green:#cdded4;
  --line:#e4ddcd;
  --line-green:rgba(247,243,234,.16);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(12,40,30,.06),0 2px 6px rgba(12,40,30,.06);
  --shadow-md:0 6px 18px -6px rgba(12,40,30,.14),0 2px 6px rgba(12,40,30,.06);
  --shadow-lg:0 24px 50px -18px rgba(12,40,30,.30),0 10px 24px -14px rgba(12,40,30,.18);
  --shadow-gold:0 10px 26px -10px rgba(217,154,43,.55);

  --container:1180px;
  --gutter:clamp(1.1rem,4vw,2.5rem);

  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.1;letter-spacing:-0.015em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:1000;
  background:var(--green-800);color:var(--cream);
  padding:.7rem 1.1rem;border-radius:var(--radius-sm);font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.2rem,7vw,6rem)}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}
.section--soft{background:var(--soft-green)}
.section--green{background:var(--green-800);color:var(--cream)}
.section-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-body);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700);
  margin-bottom:1rem;
}
.section--green .eyebrow{color:var(--gold)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
h2.title{font-size:clamp(1.85rem,1.2rem + 2.6vw,2.85rem)}
.section--green h2.title{color:var(--white)}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.2rem);color:var(--muted);margin-top:1rem}
.section--green .lead{color:var(--muted-on-green)}

/* ---------- Icons ---------- */
.icon{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-fill{fill:currentColor;stroke:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ff-body);font-weight:700;font-size:1rem;
  padding:.95rem 1.5rem;border-radius:var(--radius-pill);
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  text-align:center;line-height:1.1;
}
.btn .icon{width:20px;height:20px}
.btn-primary{background:var(--gold);color:var(--green-900);box-shadow:var(--shadow-gold)}
.btn-primary:hover{background:#e7a838;transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-green{background:var(--green-800);color:var(--cream)}
.btn-green:hover{background:var(--green-700);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--green-800);border-color:var(--green-800)}
.btn-outline:hover{background:var(--green-800);color:var(--cream);transform:translateY(-2px)}
.btn-ghost-light{background:transparent;color:var(--cream);border-color:rgba(247,243,234,.55)}
.btn-ghost-light:hover{background:var(--cream);color:var(--green-800);transform:translateY(-2px)}
.btn-block{width:100%}
.btn-lg{padding:1.05rem 1.7rem;font-size:1.05rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,243,234,.86);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.site-header.scrolled{box-shadow:0 6px 20px -12px rgba(12,40,30,.4);border-bottom-color:var(--line);background:rgba(247,243,234,.95)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--ff-display);font-weight:600;color:var(--green-800)}
.brand .seal{width:40px;height:40px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-size:1.12rem;letter-spacing:-.02em}
.brand-text span{font-family:var(--ff-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.nav-desktop{display:none;align-items:center;gap:1.6rem}
.nav-desktop a{font-weight:600;font-size:.95rem;color:var(--ink-soft);position:relative;padding:.25rem 0}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);transition:width .2s ease}
.nav-desktop a:hover{color:var(--green-800)}
.nav-desktop a:hover::after{width:100%}
.header-cta{display:none;align-items:center;gap:1rem}
.header-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--green-800)}
.header-phone .icon{width:18px;height:18px;color:var(--gold-700)}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);color:var(--green-800);cursor:pointer;
}
.menu-toggle .icon{width:24px;height:24px}
.menu-toggle .close-i{display:none}
.menu-toggle[aria-expanded="true"] .open-i{display:none}
.menu-toggle[aria-expanded="true"] .close-i{display:block}

/* Mobile menu panel */
.mobile-menu{
  display:none;
  position:fixed;inset:72px 0 auto 0;z-index:55;
  background:var(--cream);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  padding:1.2rem var(--gutter) 1.6rem;
}
.mobile-menu.open{display:block;animation:menuDrop .22s ease}
@keyframes menuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mobile-menu a.m-link{display:flex;align-items:center;justify-content:space-between;padding:.85rem .25rem;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.mobile-menu a.m-link .icon{width:18px;height:18px;color:var(--gold-700)}
.mobile-menu .m-actions{display:grid;gap:.7rem;margin-top:1.2rem}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--green-800);color:var(--cream)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(217,154,43,.20),transparent 55%),
    radial-gradient(90% 80% at 6% 110%,rgba(58,122,94,.45),transparent 60%),
    linear-gradient(160deg,#163d2e 0%,#12372A 45%,#0e2f23 100%);
}
/* subtle organic woodgrain/contour texture */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M-50 70 C 250 20 450 120 700 70 C 950 20 1100 110 1300 70'/%3E%3Cpath d='M-50 150 C 250 100 450 200 700 150 C 950 100 1100 190 1300 150'/%3E%3Cpath d='M-50 230 C 250 180 450 280 700 230 C 950 180 1100 270 1300 230'/%3E%3Cpath d='M-50 320 C 250 270 450 370 700 320 C 950 270 1100 360 1300 320'/%3E%3Cpath d='M-50 410 C 250 360 450 460 700 410 C 950 360 1100 450 1300 410'/%3E%3Cpath d='M-50 500 C 250 450 450 550 700 500 C 950 450 1100 540 1300 500'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(2rem,4.5vw,3rem);padding-block:clamp(2.2rem,5vw,3.6rem) clamp(2rem,4vw,3rem)}
.hero-copy{max-width:40rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(247,243,234,.10);border:1px solid var(--line-green);
  padding:.5rem .9rem;border-radius:var(--radius-pill);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--cream);
  margin-bottom:1.1rem;
}
.hero-badge .icon{width:16px;height:16px;color:var(--gold)}
.hero h1{
  font-size:clamp(2.3rem,1.5rem + 3.6vw,4rem);
  font-weight:600;line-height:1.04;color:var(--white);letter-spacing:-.02em;
}
.hero h1 .hl{position:relative;white-space:nowrap;color:var(--gold)}
.hero h1 .hl svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.4em;stroke:var(--gold);opacity:.9}
.hero-sub{font-size:clamp(1.05rem,1rem + .55vw,1.28rem);color:var(--muted-on-green);margin-top:1.1rem;max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem}
.hero-actions .btn{flex:1 1 auto;min-width:min(100%,15rem)}
.hero-microtrust{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.3rem;color:var(--muted-on-green);font-size:.92rem}
.hero-microtrust li{display:flex;align-items:center;gap:.45rem}
.hero-microtrust .icon{width:17px;height:17px;color:var(--gold)}

/* Hero right column: service image + compact trust card */
.hero-media{position:relative;z-index:1;display:grid;gap:1.1rem;align-self:center}
.service-image-card.hero-service-image img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;max-height:300px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.22);
}
.hero-card{
  position:relative;z-index:1;
  background:var(--cream);color:var(--ink);
  border-radius:var(--radius-lg);padding:clamp(1.3rem,2.6vw,1.8rem);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);
}
.hero-card .hc-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.hero-card .hc-icon{width:44px;height:44px;border-radius:13px;background:var(--soft-green);display:grid;place-items:center;color:var(--green-700);flex:none}
.hero-card .hc-icon .icon{width:24px;height:24px}
.hero-card h2{font-size:1.22rem;color:var(--green-800)}
.hero-card .hc-kicker{font-family:var(--ff-body);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.hc-list{display:grid;gap:.65rem;margin:.9rem 0 1.1rem}
.hc-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;color:var(--ink-soft)}
.hc-list .icon{width:19px;height:19px;color:var(--green-600);margin-top:.12rem}
.hc-call{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.8rem;font-size:.92rem;color:var(--muted)}
.hc-call a{font-weight:700;color:var(--green-800)}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--green-900);color:var(--cream);border-top:1px solid var(--line-green)}
.trust-strip .container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.4rem;padding-block:1.2rem}
.trust-item{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--cream)}
.trust-item .icon{width:22px;height:22px;color:var(--gold);flex:none}

/* ---------- Problem / urgency ---------- */
.problem-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.problem-points{display:grid;gap:1rem;margin-top:1.5rem}
.problem-points li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.02rem;color:var(--ink-soft)}
.problem-points .icon{width:24px;height:24px;color:var(--green-600);margin-top:.15rem;flex:none}
.signs-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,1.9rem);box-shadow:var(--shadow-md);
}
.signs-card .sc-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.signs-card .sc-tag{display:inline-flex;align-items:center;gap:.45rem;background:rgba(183,93,42,.12);color:var(--terracotta);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .7rem;border-radius:var(--radius-pill)}
.signs-card .sc-tag .icon{width:16px;height:16px}
.signs-card h3{font-size:1.2rem;color:var(--green-800)}
.signs-list{display:grid;gap:.65rem}
.signs-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
.signs-list .icon{width:19px;height:19px;color:var(--gold-700);margin-top:.15rem;flex:none}
.signs-note{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.92rem;color:var(--muted)}

/* ---------- Cards grid (services) ---------- */
.grid-cards{display:grid;gap:1.1rem;grid-template-columns:1fr}
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.6rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--cream-300)}
.card .c-icon{width:52px;height:52px;border-radius:14px;background:var(--soft-green);color:var(--green-700);display:grid;place-items:center;margin-bottom:1.1rem}
.card .c-icon .icon{width:27px;height:27px}
.card h3{font-size:1.18rem;color:var(--green-800);margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.96rem;flex:1}
.card .best{margin-top:.6rem;font-size:.88rem;color:var(--ink-soft)}
.card .best b{color:var(--green-700)}
.card-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:700;font-size:.93rem;color:var(--gold-700)}
.card-link .icon{width:17px;height:17px;transition:transform .2s ease}
.card:hover .card-link .icon{transform:translateX(3px)}


/* ---------- Areas / suburbs ---------- */
.suburb-grid{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.suburb-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--white);border:1px solid var(--line);
  padding:.7rem 1.05rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.95rem;color:var(--green-800);
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.suburb-chip .icon{width:16px;height:16px;color:var(--gold-700)}
.suburb-chip:hover{transform:translateY(-2px);border-color:var(--gold);background:var(--cream)}
.areas-note{margin-top:1.6rem;font-size:.92rem;color:var(--muted);max-width:48rem}

/* ---------- Why local ---------- */
.why-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
.why-list{display:grid;gap:1rem}
.why-list li{display:flex;gap:.9rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm)}
.why-list .icon{width:24px;height:24px;color:var(--green-600);margin-top:.12rem;flex:none}
.why-list b{display:block;color:var(--green-800);font-family:var(--ff-display);font-size:1.05rem}
.why-list span{color:var(--muted);font-size:.94rem}

/* ---------- Quote form ---------- */
.quote-section{position:relative;overflow:hidden}
.quote-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(80% 60% at 90% 0%,rgba(217,154,43,.16),transparent 55%),
    linear-gradient(160deg,#15402f,#12372A 60%,#0e2f23);
}
.quote-wrap{position:relative;z-index:1;display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.quote-intro h2{color:var(--white)}
.quote-intro .lead{color:var(--muted-on-green)}
.quote-reassure{display:grid;gap:.8rem;margin-top:1.6rem}
.quote-reassure li{display:flex;gap:.6rem;align-items:flex-start;color:var(--cream);font-size:.98rem}
.quote-reassure .icon{width:21px;height:21px;color:var(--gold);margin-top:.12rem;flex:none}
.quote-phone-box{margin-top:1.8rem;padding:1.1rem 1.3rem;background:rgba(247,243,234,.08);border:1px solid var(--line-green);border-radius:var(--radius);display:flex;align-items:center;gap:.9rem}
.quote-phone-box .icon{width:26px;height:26px;color:var(--gold)}
.quote-phone-box .qp-text{font-size:.9rem;color:var(--muted-on-green)}
.quote-phone-box a{display:block;font-family:var(--ff-display);font-size:1.3rem;color:var(--white);font-weight:600}

.form-card{
  background:var(--cream);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3.5vw,2.3rem);box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.5);
}
.form-card h3{font-size:1.35rem;color:var(--green-800);margin-bottom:.4rem}
.form-card .fc-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem}
.form-grid{display:grid;gap:1.05rem;grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.field label .req{color:var(--terracotta)}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);
  padding:.8rem .9rem;border:1.5px solid var(--cream-300);border-radius:12px;
  background:var(--white);width:100%;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(--green-600);box-shadow:0 0 0 3px rgba(37,96,72,.16)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.4rem}
.consent{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;background:var(--white);border:1.5px solid var(--cream-300);border-radius:12px;padding:.95rem 1rem}
.consent input{width:20px;height:20px;margin-top:.15rem;flex:none;accent-color:var(--green-700)}
.consent label{font-size:.88rem;color:var(--muted);font-weight:500;line-height:1.55}
.form-actions{grid-column:1/-1;margin-top:.4rem}
.form-foot{grid-column:1/-1;margin-top:.5rem;font-size:.82rem;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:.45rem}
.form-foot .icon{width:15px;height:15px;color:var(--green-600)}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Thank-you */
.thank-you{
  display:none;text-align:center;padding:1rem .5rem 1.4rem;
}
.thank-you.show{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.thank-you .ty-icon{width:74px;height:74px;border-radius:50%;background:var(--soft-green);color:var(--green-700);display:grid;place-items:center;margin:0 auto 1.2rem}
.thank-you .ty-icon .icon{width:38px;height:38px;stroke-width:2}
.thank-you h3{font-size:1.5rem;color:var(--green-800);margin-bottom:.6rem}
.thank-you p{color:var(--muted);max-width:30rem;margin:0 auto .6rem}
.thank-you .ty-call{margin-top:1.1rem}
.form-error{display:none;grid-column:1/-1;background:rgba(183,93,42,.10);border:1px solid rgba(183,93,42,.35);color:var(--terracotta);border-radius:12px;padding:.8rem 1rem;font-size:.9rem;font-weight:600}
.form-error.show{display:block}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:.8rem;max-width:54rem;margin-inline:auto}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:1.15rem 1.3rem;font-family:var(--ff-display);font-weight:600;
  font-size:1.05rem;color:var(--green-800);
}
.faq-q .chev{width:22px;height:22px;color:var(--gold-700);flex:none;transition:transform .25s ease}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{padding:0 1.3rem 1.3rem;color:var(--muted);font-size:.97rem}

/* ---------- Transparency ---------- */
.transparency{position:relative}
.transp-card{
  background:linear-gradient(160deg,var(--white),var(--soft-green));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-md);
  max-width:60rem;margin-inline:auto;
}
.transp-card .tc-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.transp-card .tc-ic{width:50px;height:50px;border-radius:14px;background:var(--green-800);color:var(--gold);display:grid;place-items:center;flex:none}
.transp-card .tc-ic .icon{width:26px;height:26px}
.transp-card h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem);color:var(--green-800)}
.transp-list{display:grid;gap:.85rem;margin-top:1.2rem}
.transp-list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft);font-size:.98rem}
.transp-list .icon{width:21px;height:21px;color:var(--green-600);margin-top:.12rem;flex:none}

/* ---------- Service / illustrative images ---------- */
.service-image-card{margin:0}
.service-image-card img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;max-height:420px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--line);
  background:var(--cream);
}
.service-image-card figcaption{margin-top:.65rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
@media (max-width:640px){
  .service-image-card img{max-height:300px}
}

.media-section{padding-block:clamp(1.6rem,3.4vw,2.4rem)}
.media-grid{display:grid;gap:1.6rem;align-items:center}
.media-copy h3{color:var(--green-800);font-size:1.15rem;margin-bottom:.5rem}
.media-copy p{color:var(--muted);font-size:.97rem;line-height:1.6}
@media (min-width:900px){
  .media-grid{grid-template-columns:1.05fr .95fr;gap:2.4rem}
  .media-grid .service-image-card img{aspect-ratio:4/3;max-height:380px}
}

/* Compact "what this can involve" checklist section: replaces a sparse
   single-sentence block, so it gets noticeably tighter padding than the
   default .section and no image (the service photo stays in the hero). */
.checklist-section{padding-block:clamp(1.3rem,2.6vw,2rem)}
.checklist-heading{font-family:var(--ff-display);font-weight:600;color:var(--green-800);font-size:1.2rem;margin-bottom:1rem}
.checklist-grid{display:grid;gap:.75rem;grid-template-columns:1fr}
.checklist-card{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1rem;
}
.checklist-card .icon{width:19px;height:19px;color:var(--gold);flex:none;margin-top:.12rem}
.checklist-card span{font-size:.92rem;font-weight:600;color:var(--ink-soft);line-height:1.35}
@media (min-width:640px){
  .checklist-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .checklist-grid{grid-template-columns:repeat(3,1fr)}
}

/* Homepage: compact supporting cards, not full banners */
.service-image-card.home-image-band{margin-top:2rem}
.service-image-card.home-image-band img{aspect-ratio:16/7;max-height:360px}
@media (max-width:640px){
  .service-image-card.home-image-band img{aspect-ratio:4/3;max-height:280px}
}
.service-image-card.quote-thumb{max-width:22rem;margin:1.4rem 0}
.service-image-card.quote-thumb img{aspect-ratio:4/3}
.service-image-card.quote-thumb figcaption{color:var(--muted-on-green)}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:var(--cream)}
.footer-top{display:grid;gap:2.2rem;padding-block:clamp(2.8rem,6vw,4rem)}
.footer-brand .brand{color:var(--cream)}
.footer-brand .brand-text b{color:var(--white)}
.footer-brand p{color:var(--muted-on-green);font-size:.93rem;margin-top:1rem;max-width:24rem}
.footer-col h4{font-family:var(--ff-body);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a,.footer-col li{color:var(--muted-on-green);font-size:.93rem}
.footer-col a:hover{color:var(--white)}
/* Service areas: two independent stacked columns (not a shared-row grid),
   so a wrapped suburb name in one column never opens a gap in the other. */
.footer-area-grid{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));column-gap:1.6rem;row-gap:0;align-items:start}
.footer-area-grid .footer-links{display:flex;flex-direction:column;gap:.65rem;margin:0;padding:0;list-style:none}
.footer-area-grid .footer-links a{display:inline-block;line-height:1.35;color:var(--muted-on-green);font-size:.93rem}
.footer-area-grid .footer-links a:hover{color:var(--white)}
.footer-contact a{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--cream)}
.footer-contact .icon{width:18px;height:18px;color:var(--gold)}
.footer-transp{border-top:1px solid var(--line-green);padding-block:1.6rem}
.footer-transp p{color:var(--muted-on-green);font-size:.84rem;max-width:62rem;line-height:1.6}
.footer-bottom{border-top:1px solid var(--line-green);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between}
.footer-bottom p{color:var(--muted-on-green);font-size:.84rem}
.footer-legal{display:flex;gap:1.2rem}
.footer-legal a{color:var(--muted-on-green);font-size:.84rem}
.footer-legal a:hover{color:var(--white)}

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom,0));
  background:rgba(247,243,234,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(12,40,30,.5);
}
.sticky-bar .btn{padding:.85rem 1rem;font-size:.98rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:600px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr 1fr}
  .trust-strip .container{grid-template-columns:repeat(3,1fr)}
  .hero-actions .btn{flex:0 1 auto;min-width:auto}
  .footer-top{grid-template-columns:1.6fr 1fr 1fr}
}
@media (min-width:900px){
  .nav-desktop{display:flex}
  .header-cta{display:flex}
  .menu-toggle{display:none}
  .grid-cards{grid-template-columns:repeat(3,1fr)}
  .trust-strip .container{grid-template-columns:repeat(5,1fr);padding-block:1.35rem}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}
  .problem-grid{grid-template-columns:1.2fr .8fr}
  .why-grid{grid-template-columns:.9fr 1.1fr}
  .quote-wrap{grid-template-columns:.95fr 1.05fr}
  .footer-top{grid-template-columns:2fr 1fr 1.6fr 1.3fr}
  .sticky-bar{display:none}
  body{padding-bottom:0 !important}
}
@media (max-width:899px){
  body{padding-bottom:80px}
}
@media (max-width:640px){
  .footer-area-grid{column-gap:1rem}
  .footer-area-grid .footer-links{gap:.55rem}
  .footer-area-grid .footer-links a{font-size:.95rem;line-height:1.3}
}
/* Only collapse to one column if two genuinely can't fit cleanly */
@media (max-width:360px){
  .footer-area-grid{grid-template-columns:1fr;row-gap:.55rem}
}

/* scroll offset for sticky header */
[id]{scroll-margin-top:90px}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   2) THANK-YOU PAGE  (/thank-you/)
   Scoped so it can safely share this stylesheet with the homepage.
   ============================================================ */
body[data-page="thank-you"]{
  color:var(--cream);
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(217,154,43,.16), transparent 60%),
    radial-gradient(120% 90% at 0% 110%, rgba(58,122,94,.30), transparent 55%),
    linear-gradient(160deg,var(--green-800) 0%,var(--green-900) 100%);
}
body[data-page="thank-you"] .brand{color:var(--cream)}
body[data-page="thank-you"] .brand-text b{color:var(--white)}
body[data-page="thank-you"] .brand-text span{color:var(--gold-100)}

.ty-header{padding-block:1.15rem}
.ty-main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding-block:clamp(1.5rem,5vw,3.5rem)}
.ty-card{
  background:var(--cream);color:var(--ink);
  max-width:640px;width:100%;margin-inline:auto;
  border-radius:var(--radius-lg);padding:clamp(1.6rem,5vw,3rem);
  box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--cream-200);
}
.ty-card-icon{
  width:84px;height:84px;border-radius:50%;background:var(--soft-green);color:var(--green-700);
  display:grid;place-items:center;margin:0 auto 1.4rem;box-shadow:inset 0 0 0 2px rgba(37,96,72,.14)
}
.ty-card-icon svg{width:44px;height:44px}
.ty-card h1{font-size:clamp(1.6rem,4.6vw,2.25rem);color:var(--green-800);margin-bottom:.85rem}
.ty-lead{color:var(--muted);max-width:34rem;margin:0 auto;font-size:1.04rem}
.ty-urgent{
  margin:1.5rem auto 0;max-width:32rem;background:var(--soft-green);
  border:1px solid rgba(37,96,72,.18);border-radius:var(--radius);
  padding:.85rem 1.1rem;color:var(--green-700);font-weight:600;font-size:.97rem
}
.ty-urgent strong{color:var(--green-800)}
.ty-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:1.8rem}
.ty-transparency{
  margin:1.9rem auto 0;max-width:36rem;border-top:1px solid var(--line);
  padding-top:1.2rem;color:var(--muted);font-size:.85rem;line-height:1.6
}
.ty-footer{padding-block:1.6rem;text-align:center;color:var(--muted-on-green);font-size:.82rem}
.ty-footer a{color:var(--cream);font-weight:600}
@media (max-width:520px){ .ty-actions .btn{flex:1 1 100%} }

/* ============================================================
   3) SEO CONTENT PAGES (service / suburb / contact)
   Reuses the tokens, buttons, form, FAQ and footer above.
   ============================================================ */
.breadcrumbs{background:var(--green-900)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  padding-block:.7rem;margin:0;font-size:.82rem;color:var(--muted-on-green)}
.breadcrumbs a{color:var(--gold-100)}
.breadcrumbs a:hover{color:var(--white)}
.breadcrumbs .sep{opacity:.45}
.breadcrumbs [aria-current]{color:var(--cream)}

.page-hero{position:relative;color:var(--cream);
  padding:clamp(2.4rem,6vw,4.2rem) 0 clamp(2rem,5vw,3.2rem);
  background:
    radial-gradient(120% 120% at 85% -20%, rgba(217,154,43,.18), transparent 60%),
    linear-gradient(165deg,var(--green-700) 0%,var(--green-900) 100%);}
.page-hero .eyebrow{color:var(--gold-100)}
.page-hero h1{font-family:var(--ff-display);font-weight:600;letter-spacing:-.015em;
  color:var(--white);font-size:clamp(1.95rem,5vw,3rem);line-height:1.1;margin:.5rem 0 0}
.page-hero .lead{color:var(--muted-on-green);max-width:48rem;margin-top:1rem;font-size:1.07rem}
.page-hero .hero-actions{margin-top:1.6rem}

.content-section{padding-block:clamp(2.4rem,6vw,4rem)}
.prose{max-width:72ch}
.prose>p{margin:0 0 1rem;color:var(--ink)}
.prose h2{font-family:var(--ff-display);font-weight:600;color:var(--green-800);
  font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.15;margin:2rem 0 .8rem;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--ff-display);font-weight:600;color:var(--green-700);
  font-size:1.18rem;margin:1.4rem 0 .5rem}
.prose ul.checklist{list-style:none;display:grid;gap:.6rem;margin:1rem 0;padding:0}
.prose ul.checklist li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink)}
.prose ul.checklist .icon{width:20px;height:20px;flex:none;color:var(--green-600);margin-top:.15rem}
.prose ul.disc{margin:1rem 0 1rem 1.1rem}
.prose ul.disc li{margin-bottom:.4rem}

.info-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.4rem}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.info-card .icon{width:26px;height:26px;color:var(--gold-700)}
.info-card h3{font-family:var(--ff-display);font-weight:600;color:var(--green-800);font-size:1.05rem;margin:.6rem 0 .4rem}
.info-card p{color:var(--muted);font-size:.94rem;margin:0}

.img-slot{border:2px dashed var(--line);border-radius:var(--radius-lg);background:var(--soft-green);
  min-height:220px;display:grid;place-items:center;text-align:center;color:var(--green-700);
  padding:1.4rem;font-size:.9rem;font-weight:600}
.img-slot span{opacity:.8;font-weight:500}

.related-wrap{border-top:1px solid var(--line)}
.related-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.3rem}
.related-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.related-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.related-card b{display:block;font-family:var(--ff-display);font-weight:600;color:var(--green-800);font-size:1.05rem;margin-bottom:.2rem}
.related-card span{color:var(--muted);font-size:.9rem}

.page-transp{background:var(--soft-green);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-transp .inner{display:flex;gap:.9rem;align-items:flex-start;padding-block:1.3rem}
.page-transp .icon{width:22px;height:22px;color:var(--green-600);flex:none;margin-top:.15rem}
.page-transp p{color:var(--green-800);font-size:.92rem;margin:0;max-width:74ch}

/* ============================================================
   3) SUB-PAGES (service, suburb, contact) shared elements
   Reuses the homepage tokens/components; adds a page hero,
   breadcrumbs, prose, related-link cards and an image slot.
   ============================================================ */
.page-hero{
  position:relative;color:var(--cream);
  padding:clamp(1.3rem,4vw,2.2rem) 0 clamp(2rem,6vw,3.2rem);
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(217,154,43,.18), transparent 60%),
    linear-gradient(160deg,var(--green-800) 0%,var(--green-900) 100%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.08;margin:.2rem 0 .7rem;color:var(--white)}
.page-hero .lead{color:var(--muted-on-green);max-width:46rem;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem)}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.page-hero .eyebrow{color:var(--gold-100)}
.page-hero .eyebrow .dot{background:var(--gold)}

.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.82rem;color:var(--muted-on-green);margin-bottom:1.05rem}
.crumbs a{color:var(--gold-100);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.45}
.crumbs [aria-current="page"]{color:var(--cream)}

.rich{max-width:none}
.rich h2{font-family:var(--ff-display);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.4rem,3.4vw,1.9rem);color:var(--green-800);margin:0 0 .7rem}
.rich h3{font-family:var(--ff-display);font-weight:600;font-size:1.16rem;color:var(--green-700);margin:1.4rem 0 .5rem}
.rich p{margin:0 0 1rem;color:var(--ink)}
.rich p.muted{color:var(--muted)}
.rich ul{margin:0 0 1.1rem;padding:0;list-style:none;display:grid;gap:.55rem}
.rich ul li{position:relative;padding-left:1.7rem;color:var(--ink)}
.rich ul li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;background:var(--soft-green);box-shadow:inset 0 0 0 2px var(--green-500)}
.rich a:not(.btn){color:var(--green-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.rich a:not(.btn):hover{color:var(--gold-700)}
.content-narrow{max-width:780px}

.callout{background:var(--soft-green);border:1px solid rgba(37,96,72,.18);border-left:4px solid var(--green-600);border-radius:var(--radius);padding:1.05rem 1.2rem;margin:1.3rem 0;color:var(--green-800)}
.callout strong{color:var(--green-900)}

.img-slot{display:grid;place-items:center;text-align:center;min-height:190px;border:2px dashed var(--line);border-radius:var(--radius-lg);background:var(--cream-200);color:var(--muted);font-size:.84rem;padding:1.4rem;margin:1.3rem 0}

.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.related-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.15rem;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.related-card h3{font-family:var(--ff-display);font-size:1.04rem;color:var(--green-800);margin:0 0 .3rem}
.related-card p{margin:0;font-size:.89rem;color:var(--muted)}
.related-card .rc-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;color:var(--green-600);font-weight:700;font-size:.84rem}
.related-card .rc-go .icon{width:16px;height:16px}

/* ============================================================
   3) SEO CONTENT PAGES (service & suburb pages)
   Reuses the existing design tokens; no redesign.
   ============================================================ */
.breadcrumb{font-size:.85rem;color:var(--muted);padding:1rem 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.45rem}
.breadcrumb a{color:var(--green-600);font-weight:600}
.breadcrumb a:hover{color:var(--green-800)}
.breadcrumb [aria-current]{color:var(--muted)}

.page-hero{
  position:relative;color:var(--cream);
  padding:clamp(2.2rem,6vw,4rem) 0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(217,154,43,.18), transparent 60%),
    radial-gradient(120% 90% at 0% 110%, rgba(58,122,94,.30), transparent 55%),
    linear-gradient(160deg,var(--green-800) 0%,var(--green-900) 100%);
}
.page-hero .eyebrow{color:var(--gold-100)}
.page-hero h1{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;color:var(--white);
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.08;margin:.5rem 0 .7rem;max-width:20ch}
.page-hero .hero-lead{color:var(--muted-on-green);max-width:56ch;font-size:1.06rem}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
@media (max-width:520px){.page-hero .actions .btn{flex:1 1 100%}}

/* Image-backed hero variant, used on the 7 core Ipswich service pages */
.page-hero-grid{display:grid;gap:1.8rem;align-items:center}
.page-hero-copy{min-width:0}
.service-image-card.page-hero-image img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;max-height:320px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.22);
}
@media (min-width:900px){
  .page-hero-grid{grid-template-columns:1.1fr .9fr;gap:2.6rem}
  .service-image-card.page-hero-image img{max-height:360px}
}

.prose{max-width:70ch}
.prose>p{margin:0 0 1rem;color:var(--ink)}
.prose h2{font-family:var(--ff-display);font-weight:600;color:var(--green-800);
  font-size:clamp(1.35rem,3.2vw,1.8rem);margin:0 0 .7rem;letter-spacing:-.01em}
.prose h3{font-family:var(--ff-display);font-weight:600;color:var(--green-700);
  font-size:1.15rem;margin:1.4rem 0 .5rem}
.prose .lead{font-size:1.08rem;color:var(--muted)}
.ul-check{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;gap:.55rem}
.ul-check li{position:relative;padding-left:1.9rem;color:var(--ink)}
.ul-check li svg{position:absolute;left:0;top:.18rem;width:1.2rem;height:1.2rem;color:var(--gold-700)}

.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.link-card{display:flex;align-items:center;gap:.7rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;color:var(--green-800);font-weight:600;
  box-shadow:0 10px 24px -18px rgba(12,40,30,.30);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.link-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 16px 30px -18px rgba(12,40,30,.40)}
.link-card svg{width:1.3rem;height:1.3rem;color:var(--gold-700);flex:none}

.img-slot{border:2px dashed #cdbb90;border-radius:var(--radius);background:var(--soft-green);
  display:grid;place-items:center;text-align:center;color:var(--muted);min-height:200px;padding:1.5rem;font-size:.9rem}
.img-slot b{display:block;color:var(--green-700);font-family:var(--ff-display)}

/* ============================================================
   4) HEADER DROPDOWN NAVIGATION (Services / Areas)
   Matches the existing light header palette; no redesign.
   ============================================================ */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-trigger{
  display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-weight:600;font-size:.95rem;
  color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:.25rem 0;
}
.nav-dd-trigger .chev{width:.95rem;height:.95rem;color:var(--gold-700);transition:transform .2s ease}
.nav-dd:hover .nav-dd-trigger,.nav-dd.open .nav-dd-trigger{color:var(--green-800)}
.nav-dd:hover .nav-dd-trigger .chev,.nav-dd.open .nav-dd-trigger .chev{transform:rotate(180deg)}
/* scroll long menus (e.g. 16 areas) */
.nav-dd-menu{max-height:min(70vh,560px);overflow:auto;
  position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:252px;z-index:70;background:var(--white);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:.4rem;display:grid;gap:.05rem;
  opacity:0;visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-dd-menu a{display:block;padding:.6rem .85rem;border-radius:9px;color:var(--ink-soft);
  font-weight:600;font-size:.92rem;white-space:nowrap}
.nav-dd-menu a::after{display:none}
.nav-dd-menu a:hover{background:var(--soft-green);color:var(--green-900)}

/* Mobile collapsible groups inside the mobile menu */
.mobile-menu .m-group{border-bottom:1px solid var(--line)}
.m-group-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font:inherit;
  font-weight:600;font-size:1.05rem;color:var(--ink-soft);background:none;border:0;cursor:pointer;
  padding:.85rem .25rem;
}
.m-group-trigger .chev{width:1.1rem;height:1.1rem;color:var(--gold-700);transition:transform .2s ease}
.m-group.open .m-group-trigger .chev{transform:rotate(180deg)}
.m-group-menu{display:none;padding:.1rem 0 .7rem .7rem}
.m-group.open .m-group-menu{display:block}
.m-group-menu a{display:block;padding:.6rem .25rem;color:var(--muted);font-weight:600;font-size:.98rem;
  border-bottom:1px dashed var(--line)}
.m-group-menu a:last-child{border-bottom:0}
.m-group-menu a:hover{color:var(--green-800)}

/* Service card actions: Learn more + Request a quote */
.card-actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.1rem}
.card-actions .card-link{margin-top:0}
.card-learn{font-weight:700;font-size:.93rem;color:var(--green-800);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.card-learn:hover{color:var(--gold-700)}