:root {
    --ink: #232524;
    --char: #39393A;
    --forest: #1E3318;
    --forest-2: #2C4A23;
    --leaf: #6F9A3D;
    --leaf-bright: #8CBA4D;
    --leaf-deep: #4E6E2A;
    --sage: #E6EBD8;
    --sage-2: #D6E0C1;
    --bone: #F4F3EA;
    --paper: #FAF9F1;
    --bark: #A9763C;
    --grey: #6E736A;
    --grey-light: #DEE2D6;
    --leaf-soft: rgba(140,186,77,0.12);
    --border: rgba(30,51,24,0.12);
    --border-warm: rgba(60,74,35,0.16);
    --shadow-sm: 0 2px 6px -2px rgba(30,51,24,0.10), 0 6px 16px -10px rgba(30,51,24,0.18);
    --shadow: 0 4px 10px -6px rgba(30,51,24,0.20), 0 28px 60px -30px rgba(30,51,24,0.42);
    --shadow-lg: 0 8px 18px -10px rgba(30,51,24,0.28), 0 40px 80px -34px rgba(30,51,24,0.50);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Hanken Grotesk', sans-serif;
    background: var(--bone);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  p { text-wrap: pretty; }
  h1, h2, h3, h4 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--ink);
    font-optical-sizing: auto;
    text-wrap: balance;
  }
  .ital { font-style: italic; font-weight: 600; color: var(--leaf-deep); }
  a { text-decoration: none; color: inherit; }
  /* Inline phone number links inside service-page body text and FAQs
     (e.g. "give us a call at 0450 460 123") - stay plain/invisible like
     surrounding text by default (inherits the reset above), only show as
     a link on hover so they don't look out of place mid-sentence. */
  .tel-inline:hover { color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 2px; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--leaf); color: #fff; }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

  /* eyebrow with leaf motif */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--leaf-deep);
  }
  .eyebrow svg { width: 17px; height: 17px; flex: none; }
  .eyebrow.on-dark { color: var(--leaf-bright); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700; font-size: 15px;
    padding: 14px 26px; border-radius: 999px;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn svg { width: 17px; height: 17px; }
  .btn-primary { background: var(--leaf); color: #fff; border-color: var(--leaf); }
  .btn-primary:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); transform: translateY(-2px); }
  .btn-dark { background: var(--ink); color: var(--bone); border-color: var(--ink); }
  .btn-dark:hover { background: var(--forest-2); border-color: var(--forest-2); transform: translateY(-2px); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
  .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
  .btn-ghost.on-dark { color: var(--bone); border-color: rgba(244,243,234,0.32); }
  .btn-ghost.on-dark:hover { border-color: var(--bone); background: rgba(244,243,234,0.08); }

  /* ============ TOP BAR ============ */
  .topbar {
    background: var(--forest);
    color: var(--sage);
    font-size: 13px;
    padding: 9px 28px;
    display: flex; align-items: center; justify-content: center; gap: 26px;
    flex-wrap: wrap; letter-spacing: 0.01em;
  }
  .topbar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--leaf-bright); display: inline-block; }
  .topbar strong { color: #fff; font-weight: 600; }
  .topbar a { color: var(--leaf-bright); font-weight: 600; }
  .topbar a:hover { color: #fff; }
  .topbar .tb-sep { opacity: 0.4; }
  @media (max-width: 720px){ .topbar .tb-hide { display: none; } }
  @media (max-width: 900px){ .topbar { display: none; } }

  /* ============ NAV ============ */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(244,243,234,0.88);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    max-width: 1240px; margin: 0 auto; padding: 13px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .brand { display: flex; align-items: center; gap: 13px; }
  .brand img { height: 52px; width: auto; display: block; }
  .nav-links { display: flex; gap: 30px; list-style: none; }
  .nav-links a {
    font-size: 14.5px; font-weight: 600; color: var(--char);
    position: relative; padding: 6px 0; transition: color .2s;
  }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--leaf); transition: width .25s ease;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--leaf); color: #fff; font-weight: 700; font-size: 14.5px;
    padding: 11px 20px; border-radius: 999px; transition: background .2s, transform .2s;
  }
  .nav-cta svg { width: 15px; height: 15px; }
  .nav-cta:hover { background: var(--leaf-deep); transform: translateY(-1px); }
  @media (max-width: 940px){ .nav-links { display: none; } .brand img { height: 46px; } }
  @media (max-width: 460px){ .nav-cta span { display: none; } .nav-cta { padding: 11px 14px; } }

  /* ============ HERO ============ */
  .hero {
    position: relative; background: var(--forest); color: var(--bone);
    overflow: hidden; min-height: 90vh;
    display: flex; align-items: flex-end; padding: 96px 0 56px;
  }
  .hero-bg { position: absolute; inset: 0; z-index: 1; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: brightness(0.55) saturate(1.05); }
  .hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(20,30,16,0.62) 0%, rgba(20,30,16,0.34) 42%, rgba(20,30,16,0.92) 100%),
      linear-gradient(95deg, rgba(20,30,16,0.88) 0%, rgba(20,30,16,0.5) 50%, rgba(20,30,16,0.12) 82%);
  }
  .hero-inner { position: relative; z-index: 3; width: 100%; }
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(140,186,77,0.16); border: 1px solid rgba(140,186,77,0.4);
    padding: 7px 15px; border-radius: 999px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--leaf-bright);
    margin-bottom: 24px;
  }
  .hero h1 {
    font-size: clamp(44px, 6.6vw, 92px); color: #fff; letter-spacing: -0.03em;
    margin-bottom: 22px; font-weight: 600;
    text-shadow: 0 2px 22px rgba(10,16,8,0.5);
  }
  .hero h1 .ital { color: var(--leaf-bright); font-weight: 600; }
  .hero .lead {
    font-size: clamp(17px, 1.5vw, 20px); color: rgba(244,243,234,0.82);
    max-width: 540px; margin-bottom: 30px;
  }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
  .feature-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-stats { display: flex; gap: 38px; flex-wrap: wrap; }
  .hstat .n { font-family: 'Fraunces', serif; font-size: 34px; font-weight: 600; color: #fff; line-height: 1; display: block; }
  .hstat .n .ital { color: var(--leaf-bright); }
  .hstat .l { font-size: 12.5px; color: rgba(244,243,234,0.7); letter-spacing: 0.04em; margin-top: 6px; display: block; }

  .hero-side { display: flex; flex-direction: column; gap: 16px; }
  .hero-card {
    background: rgba(244,243,234,0.07); border: 1px solid rgba(244,243,234,0.16);
    backdrop-filter: blur(6px); border-radius: 18px; padding: 22px 24px;
  }
  .hero-card .stars { color: var(--leaf-bright); letter-spacing: 2px; font-size: 15px; }
  .hero-card p { color: rgba(244,243,234,0.92); font-size: 15px; margin: 12px 0 16px; line-height: 1.55; }
  .hero-card .who { display: flex; align-items: center; gap: 12px; }
  .hero-card .ava {
    width: 40px; height: 40px; border-radius: 50%; background: var(--leaf); color:#fff;
    display: grid; place-items: center; font-weight: 700; font-size: 16px;
  }
  .hero-card .who .nm { font-weight: 700; color: #fff; font-size: 14.5px; }
  .hero-card .who .lo { font-size: 12.5px; color: rgba(244,243,234,0.6); }
  .hero-emergency {
    background: var(--leaf); color: #fff; border-radius: 18px; padding: 20px 24px;
    display: flex; align-items: center; gap: 16px;
  }
  .hero-emergency .big { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; line-height: 1; }
  .hero-emergency .desc { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.92); }
  @media (max-width: 900px){
    .hero { min-height: auto; padding: 64px 0 48px; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-side { flex-direction: row; flex-wrap: wrap; }
    .hero-card, .hero-emergency { flex: 1 1 260px; }
  }

  /* ============ MARQUEE ============ */
  .marquee {
    background: var(--ink); color: var(--sage); overflow: hidden;
    padding: 15px 0; white-space: nowrap; border-bottom: 4px solid var(--leaf);
  }
  .marquee-track { display: inline-flex; gap: 30px; animation: scroll 42s linear infinite; }
  .marquee-track span { font-family: 'Fraunces', serif; font-style: normal; font-size: 20px; display: inline-flex; align-items: center; gap: 30px; color: rgba(230,235,216,0.92); }
  .marquee-track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ============ INTRO ============ */
  .intro { background: var(--sage); padding: 92px 0; }
  .intro-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 64px; align-items: center; }
  .intro .big-text { font-family: 'Fraunces', serif; font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.28; color: var(--ink); letter-spacing: -0.015em; }
  .intro .big-text .hl { color: var(--leaf-deep); }
  .intro .sub { margin-top: 24px; color: var(--char); font-size: 16.5px; max-width: 520px; }
  .intro-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
  .intro-photo img { width: 100%; height: 100%; object-fit: cover; }
  .intro-photo .cap {
    position: absolute; left: 16px; bottom: 16px; background: rgba(30,51,24,0.82);
    color: var(--sage); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
    backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 8px;
  }
  .intro-photo .cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf-bright); }
  @media (max-width: 880px){ .intro-grid { grid-template-columns: 1fr; gap: 40px; } .intro-photo { aspect-ratio: 16/12; } }

  /* ============ SECTION HEAD ============ */
  .section { padding: 100px 0; }
  .sec-head { display: grid; grid-template-columns: 1fr 0.9fr; gap: 40px; align-items: end; margin-bottom: 52px; }
  .sec-head h2 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 600; }
  .sec-head .side { color: var(--char); font-size: 16px; }
  .sec-head .side .btn { margin-top: 18px; }
  @media (max-width: 820px){ .sec-head { grid-template-columns: 1fr; gap: 22px; } }

  /* ============ SERVICES ============ */
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .svc {
    background: var(--paper); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
  }
  .svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
  .svc .imgwrap { position: relative; aspect-ratio: 16/11; overflow: hidden; }
  .svc .imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .svc:hover .imgwrap img { transform: scale(1.05); }
  .svc .pill {
    position: absolute; top: 13px; left: 13px; background: var(--leaf); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
  }
  .svc .pill.urgent { background: var(--bark); }
  .svc .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
  .svc h3 { font-size: 24px; font-weight: 600; margin-bottom: 9px; }
  .svc p { color: var(--char); font-size: 15px; flex: 1; }
  .svc .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
  .svc .link { font-weight: 700; font-size: 14px; color: var(--leaf-deep); display: inline-flex; align-items: center; gap: 6px; }
  .svc:hover .link { gap: 10px; }
  .svc .tag { font-size: 13px; font-weight: 600; color: var(--grey); }
  @media (max-width: 900px){ .services-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px){ .services-grid { grid-template-columns: 1fr; } }

  /* mid cta */
  .midcta {
    grid-column: 2 / -1; margin-top: 0; background: var(--ink); color: var(--bone); border-radius: 22px;
    padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
    position: relative; overflow: hidden;
  }
  .midcta .rings { position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; opacity: 0.22; }
  .midcta h3 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; position: relative; }
  .midcta h3 .ital { color: var(--leaf-bright); }
  .midcta p { color: rgba(244,243,234,0.72); font-size: 15px; margin-top: 8px; max-width: 460px; position: relative; }
  .midcta .btn { position: relative; flex: none; margin-top: 12px; }
  @media (max-width: 900px){ .midcta { grid-column: 2 / -1; } }
  @media (max-width: 600px){ .midcta { grid-column: 1 / -1; } }

  /* ============ FEATURE ============ */
  .feature { background: var(--paper); }
  .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .feature h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; margin: 14px 0 16px; }
  .feature .lead { color: var(--char); font-size: 17px; margin-bottom: 30px; max-width: 460px; }
  .pointlist { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 30px; }
  .pointlist li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
  .pointlist li:last-child { border-bottom: 1px solid var(--border); }
  .pl-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sage); color: var(--leaf-deep); display: grid; place-items: center; }
  .pl-ic svg { width: 20px; height: 20px; }
  .pl-tx h4 { font-family: 'Hanken Grotesk', sans-serif; font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: 0; margin-bottom: 3px; }
  .pl-tx p { font-size: 14.5px; color: var(--char); }
  .feature-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5/6; }
  .feature-photo img { width: 100%; height: 100%; object-fit: cover; }
  .feature-badge {
    position: absolute; right: 18px; bottom: 18px; background: var(--bone); color: var(--ink);
    border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px;
  }
  .feature-badge .num { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 600; color: var(--leaf-deep); line-height: 1; }
  .feature-badge .lbl { font-size: 12.5px; color: var(--char); line-height: 1.35; font-weight: 600; }
  @media (max-width: 880px){ .feature-grid { grid-template-columns: 1fr; gap: 40px; } .feature-photo { aspect-ratio: 4/3; order: -1; } }

  /* ============ COMMUNITY BAND ============ */
  .community { background: var(--forest); color: var(--bone); position: relative; overflow: hidden; }
  .community .rings { position: absolute; left: -120px; bottom: -140px; width: 480px; height: 480px; opacity: 0.16; }
  .community-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
  .community h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; margin: 14px 0 0; }
  .community h2 .ital { color: var(--leaf-bright); }
  .community p { color: rgba(244,243,234,0.82); font-size: 16.5px; margin-top: 20px; }
  .community .creds { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .community .cred { display: inline-flex; align-items: center; gap: 9px; background: rgba(244,243,234,0.07); border: 1px solid rgba(244,243,234,0.16); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--sage); }
  .community .cred svg { width: 15px; height: 15px; color: var(--leaf-bright); }
  @media (max-width: 880px){ .community-grid { grid-template-columns: 1fr; gap: 30px; } }

  /* ============ GALLERY ============ */
  .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
  .gx { position: relative; border-radius: 16px; overflow: hidden; }
  .gx img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .gx:hover img { transform: scale(1.06); }
  .gx .glabel { position: absolute; left: 12px; bottom: 12px; background: rgba(30,51,24,0.82); color: var(--sage); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
  .gx.big { grid-column: span 2; grid-row: span 2; }
  .gx.tall { grid-row: span 2; }
  @media (max-width: 820px){ .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; } .gx.big { grid-column: span 2; } }

  /* ============ REVIEWS ============ */
  .reviews { background: var(--sage); }
  .reviews-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; }
  .reviews-top h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; }
  .rsum { text-align: right; }
  .rsum .stars { color: var(--leaf-deep); font-size: 22px; letter-spacing: 2px; }
  .rsum .meta { font-weight: 600; color: var(--char); font-size: 14.5px; margin-top: 4px; }
  .reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
  .rev { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; }
  .rev .stars { color: var(--leaf); letter-spacing: 2px; font-size: 15px; margin-bottom: 14px; }
  .rev p { color: var(--ink); font-size: 15.5px; line-height: 1.6; flex: 1; }
  .rev .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
  .rev .ava { width: 42px; height: 42px; border-radius: 50%; background: var(--leaf-deep); color: #fff; display: grid; place-items: center; font-weight: 700; }
  .rev .nm { font-weight: 700; font-size: 14.5px; }
  .rev .lo { font-size: 12.5px; color: var(--grey); }
  @media (max-width: 900px){ .reviews-grid { grid-template-columns: 1fr; } }

  /* ============ PROCESS ============ */
  .process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .step { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; position: relative; }
  .step .n { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf-deep); }
  .step h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; margin: 12px 0 8px; letter-spacing: -0.01em; }
  .step p { font-size: 14.5px; color: var(--char); }
  @media (max-width: 900px){ .process-steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .process-steps { grid-template-columns: 1fr; } }

  /* ============ FINAL CTA ============ */
  .final { position: relative; overflow: hidden; color: var(--bone); }
  .final-bg { position: absolute; inset: 0; z-index: 1; }
  .final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(0.5); }
  .final-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,16,0.82), rgba(20,30,16,0.6)); }
  /* padding-top/bottom only (not the shorthand) so this doesn't clobber
     the horizontal padding this element already gets from its other
     class, .wrap (padding: 0 28px) - the shorthand version was zeroing
     out left/right padding, leaving no gutter on mobile. */
  .final-inner { position: relative; z-index: 2; padding-top: 110px; padding-bottom: 110px; text-align: center; }
  .final h2 { color: #fff; font-size: clamp(34px, 5vw, 64px); font-weight: 600; max-width: 760px; margin: 18px auto 0; }
  .final h2 .ital { color: var(--leaf-bright); }
  .final .lead { color: rgba(244,243,234,0.85); font-size: 18px; max-width: 560px; margin: 22px auto 32px; }
  .final-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .final-meta { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
  .final-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(244,243,234,0.85); font-weight: 600; }
  .final-meta .ck { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf-bright); }

  /* ============ FOOTER ============ */
  footer { background: var(--ink); color: rgba(244,243,234,0.78); padding: 72px 0 0; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
  .foot-brand a { display: inline-block; }
  .foot-brand img { height: 86px; width: auto; margin-bottom: 18px; }
  .foot-brand p { font-size: 14.5px; line-height: 1.6; max-width: 320px; margin-bottom: 20px; }
  footer h5 { font-family: 'Hanken Grotesk', sans-serif; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
  footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  footer ul a, footer ul li { font-size: 14.5px; color: rgba(244,243,234,0.72); transition: color .2s; }
  footer ul a:hover { color: var(--leaf-bright); }
  .foot-contact a { display: flex; gap: 10px; align-items: flex-start; }
  .foot-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--leaf-bright); }
  .socials { display: flex; gap: 10px; margin-top: 18px; }
  .socials a { width: 38px; height: 38px; border-radius: 10px; background: rgba(244,243,234,0.08); display: grid; place-items: center; transition: background .2s; }
  .socials a:hover { background: var(--leaf); }
  .socials svg { width: 17px; height: 17px; color: var(--sage); }
  .foot-bottom { border-top: 1px solid rgba(244,243,234,0.1); padding: 22px 0; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: rgba(244,243,234,0.55); }
  @media (max-width: 880px){ .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
  @media (max-width: 520px){ .foot-grid { grid-template-columns: 1fr; } }

  /* ============ FLOATING CALL ============ */
  .fab { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: inline-flex; align-items: center; gap: 12px; background: var(--leaf); color: #fff; padding: 12px 20px 12px 14px; border-radius: 999px; box-shadow: 0 14px 34px -10px rgba(30,51,24,0.6); transition: transform .2s; }
  .fab:hover { transform: translateY(-2px); }
  .fab .ring { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; animation: pulsering 2s infinite; }
  .fab .ring svg { width: 19px; height: 19px; }
  @keyframes pulsering { 0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.4);} 50%{ box-shadow: 0 0 0 9px rgba(255,255,255,0);} }
  .fab .fl { font-size: 11px; opacity: 0.85; display: block; line-height: 1; }
  .fab .fn { font-size: 16px; font-weight: 700; display: block; line-height: 1.2; }
  /* On phones, shrink to just the circular icon+ring - drop the "Tap to
     call / 0450 460 123" text label so it doesn't crowd the screen */
  @media (max-width: 940px) {
    .fab {
      padding: 0;
      width: 52px;
      height: 52px;
      justify-content: center;
      gap: 0;
    }
    .fab .fl, .fab .fn { display: none; }
    .fab .ring { width: 100%; height: 100%; background: transparent; }
  }

  /* ============ BACK TO TOP ============ */
  .back-to-top {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 200;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--leaf);
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(30,51,24,0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
  }
  .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
  .back-to-top:hover { background: var(--leaf-deep); }
  /* .fab is now a 52px circle on mobile too (bottom:20px) - keep stacked
     above it at the same offset used on desktop */

  /* reveal */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    .reveal { opacity: 1; transform: none; transition: none; }
    .marquee-track, .fab .ring { animation: none; }
    html { scroll-behavior: auto; }
  }
  :focus-visible { outline: 3px solid var(--leaf-bright); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   EYEBROW FIX + INNER PAGE COMPONENTS
   ============================================================ */

/* refined hero eyebrow (overrides earlier rule) */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(140,186,77,0.12); border: 1px solid rgba(140,186,77,0.32);
  padding: 7px 16px 7px 13px; border-radius: 999px; margin-bottom: 26px;
  font-family: 'Fraunces', serif; font-style: normal; font-weight: 600;
  font-size: 15px; letter-spacing: 0.01em; text-transform: none; color: var(--leaf-bright);
}
.hero-eyebrow svg { width: 17px; height: 17px; flex: none; }

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  position: relative; background: var(--forest); color: var(--bone); overflow: hidden;
  padding: 64px 0 56px;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 1; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) saturate(1.02); }
.page-hero-bg::after { content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(20,30,16,0.9) 0%, rgba(20,30,16,0.55) 60%, rgba(20,30,16,0.3) 100%); }
.page-hero-inner { position: relative; z-index: 2; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(244,243,234,0.66); margin-bottom: 20px; flex-wrap: wrap; }
.crumb a { color: rgba(244,243,234,0.66); transition: color .2s; }
.crumb a:hover { color: var(--leaf-bright); }
.crumb .sep { opacity: 0.5; }
.crumb .cur { color: var(--leaf-bright); }
.page-hero .ph-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: 'Fraunces', serif; font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--leaf-bright);
}
.page-hero .ph-eyebrow svg { width: 17px; height: 17px; }
.page-hero h1 { color: #fff; font-size: clamp(38px, 5.4vw, 68px); font-weight: 600; letter-spacing: -0.025em; max-width: 16ch; }
.page-hero h1 .ital { color: var(--leaf-bright); }
.page-hero .ph-date { color: rgba(244,243,234,0.7); font-size: 15px; font-weight: 500; margin-top: 18px; }
.page-hero .ph-lead { color: rgba(244,243,234,0.82); font-size: clamp(16px,1.5vw,19px); max-width: 580px; margin-top: 18px; }
.page-hero .ph-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---- SERVICE DETAIL LAYOUT ---- */
.svc-detail { padding: 92px 0; }
.svc-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.svc-main h2 { font-size: clamp(28px, 3.3vw, 42px); font-weight: 600; margin: 0 0 18px; }
.svc-main h3 { font-size: 24px; font-weight: 600; margin: 40px 0 14px; }
.svc-main p { color: var(--char); font-size: 16.5px; margin-bottom: 16px; }
.svc-main p:first-of-type { font-size: 18px; color: var(--ink); }
.svc-figure { margin: 8px 0 36px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/9; }
.svc-figure img { width: 100%; height: 100%; object-fit: cover; }
.checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 8px 0 16px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--char); }
.checklist li svg { width: 21px; height: 21px; flex: none; color: var(--leaf-deep); margin-top: 1px; }
@media (max-width: 560px){ .checklist { grid-template-columns: 1fr; } }
/* Independent-column variant: each column sizes to its own content, so a
   longer item wrapping to 2 lines in one column doesn't stretch the row
   and open a gap above the shorter item next to it. Opt in per-list with
   .checklist-cols on the wrapper and .checklist-col added to each <ul
   class="checklist">, rather than changing the shared 2-col grid above
   (used on 5 other pages where rows currently line up fine). */
.checklist-cols { display: flex; gap: 12px 28px; margin: 8px 0 16px; }
.checklist-cols .checklist-col { display: flex; flex-direction: column; gap: 12px; margin: 0; flex: 1 1 0; }
@media (max-width: 560px){ .checklist-cols { flex-direction: column; gap: 12px; } }

/* sticky aside */
.svc-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.aside-card { background: var(--paper); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px; }
.aside-card.dark { background: var(--forest); color: var(--bone); border-color: transparent; position: relative; overflow: hidden; }
.aside-card.dark .rings { position: absolute; right: -70px; top: -70px; width: 230px; opacity: 0.18; }
.aside-card h4 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.aside-card.dark h4 { color: #fff; position: relative; }
.aside-card p { font-size: 14.5px; color: var(--char); margin-bottom: 16px; }
.aside-card.dark p { color: rgba(244,243,234,0.8); position: relative; }
.aside-card .btn { width: 100%; position: relative; }
.aside-facts { list-style: none; display: flex; flex-direction: column; gap: 0; }
.aside-facts li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--char); }
.aside-facts li:last-child { border-bottom: none; }
.aside-facts svg { width: 18px; height: 18px; color: var(--leaf-deep); flex: none; }
.aside-facts strong { color: var(--ink); font-weight: 700; }
@media (max-width: 880px){
  .svc-detail-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .aside-card { flex: 1 1 280px; }
}

/* ---- RELATED SERVICES ---- */
.related { background: var(--sage); padding: 84px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; }
.rel-card { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rel-card .ri { aspect-ratio: 16/10; overflow: hidden; }
.rel-card .ri img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rel-card:hover .ri img { transform: scale(1.05); }
.rel-card .rb { padding: 20px 22px 22px; }
.rel-card h4 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.rel-card p { font-size: 14px; color: var(--char); margin-bottom: 12px; }
.rel-card .link { font-weight: 700; font-size: 13.5px; color: var(--leaf-deep); display: inline-flex; gap: 6px; }
@media (max-width: 820px){ .related-grid { grid-template-columns: 1fr; } }

/* ---- GENERIC CTA BAND ---- */
.cta-band { background: var(--ink); color: var(--bone); position: relative; overflow: hidden; }
.cta-band .rings { position: absolute; right: -90px; bottom: -120px; width: 360px; opacity: 0.14; }
.cta-band-inner { padding-top: 80px; padding-bottom: 80px; text-align: center; position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(30px,4vw,50px); font-weight: 600; max-width: 18ch; margin: 0 auto; }
.cta-band h2 .ital { color: var(--leaf-bright); }
.cta-band p { color: rgba(244,243,234,0.78); font-size: 17px; margin: 18px auto 28px; max-width: 520px; }
.cta-band .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- ABOUT PAGE ---- */
.about-intro { padding: 90px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-grid h2 { font-size: clamp(28px,3.4vw,44px); font-weight: 600; margin-bottom: 18px; }
.about-grid p { color: var(--char); font-size: 16.5px; margin-bottom: 16px; }
.about-photo { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width:880px){ .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.values { background: var(--sage); padding: 84px 0; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }
.value { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px; }
.value .vic { width: 48px; height: 48px; border-radius: 13px; background: var(--sage); color: var(--leaf-deep); display: grid; place-items: center; margin-bottom: 16px; }
.value .vic svg { width: 23px; height: 23px; }
.value h4 { font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.value p { font-size: 15px; color: var(--char); }
@media (max-width: 820px){ .values-grid { grid-template-columns: 1fr; } }
.stats-band { background: var(--forest); color: var(--bone); padding: 70px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stats-grid .n { font-family: 'Fraunces', serif; font-size: clamp(38px,5vw,60px); font-weight: 600; color: #fff; line-height: 1; }
.stats-grid .n .ital { color: var(--leaf-bright); }
.stats-grid .l { font-size: 14px; color: rgba(244,243,234,0.74); margin-top: 10px; }
@media (max-width: 620px){ .stats-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }

/* ---- CONTACT PAGE ---- */
.contact-sec { padding: 90px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-info h2 { font-size: clamp(28px,3.4vw,42px); font-weight: 600; margin-bottom: 16px; }
.contact-info > p { color: var(--char); font-size: 16.5px; margin-bottom: 28px; max-width: 460px; }
.cinfo-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.cinfo-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border); }
.cinfo-list li:last-child { border-bottom: 1px solid var(--border); }
.cinfo-list .cic { width: 44px; height: 44px; border-radius: 12px; background: var(--sage); color: var(--leaf-deep); display: grid; place-items: center; flex: none; }
.cinfo-list .cic svg { width: 20px; height: 20px; }
.cinfo-list .ct { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.cinfo-list .cv { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.cinfo-list .cv:hover { color: var(--leaf-deep); }
.form-card { background: var(--paper); border: 1px solid var(--border); border-radius: 22px; padding: 32px; box-shadow: var(--shadow); }
.form-card h3 { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.form-card .fsub { font-size: 14.5px; color: var(--char); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--grey-light); border-radius: 12px; background: #fff; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--leaf); }
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--grey); margin-top: 12px; text-align: center; }
.map-embed { margin-top: 28px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); height: 280px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; gap: 40px; } .field-row { grid-template-columns: 1fr; } }

/* services overview intro */
.svc-overview { padding: 90px 0; }

/* nav active state */
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { width: 100%; }

/* ============================================================
   NAV DROPDOWN + MOBILE MENU + SOCIAL + BLOG + LEGAL
   ============================================================ */
.has-drop { position: relative; }
.has-drop > a .chev { width: 13px; height: 13px; margin-left: 3px; transition: transform .2s; vertical-align: -1px; }
.has-drop:hover > a .chev, .has-drop:focus-within > a .chev { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--paper); border: 1px solid var(--border); border-radius: 16px; padding: 10px;
  min-width: 250px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 120;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.drop a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--char); transition: background .15s, color .15s; }
.drop a::after { display: none; }
.drop a:hover { background: var(--sage); color: var(--ink); }
.drop a.active { background: var(--sage); color: var(--ink); }
.drop a svg { width: 17px; height: 17px; color: var(--leaf-deep); flex: none; }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--border); border-radius: 10px; width: 44px; height: 42px; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle svg { width: 22px; height: 22px; }
.mobile-menu { display: none; background: var(--paper); border-bottom: 1px solid var(--border); }
.mobile-menu.open {
  display: block;
  max-height: calc(100vh - 80px); /* ~nav height, so it doesn't run past the screen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu ul { list-style: none; padding: 12px 0; }
.mobile-menu a { display: block; padding: 13px 28px; font-size: 16px; font-weight: 600; color: var(--char); }
.mobile-menu a.sub { padding-left: 44px; font-size: 14.5px; font-weight: 500; color: var(--grey); }
.mobile-menu a:hover { color: var(--leaf-deep); }
.mobile-menu a.active { color: var(--leaf-deep); }
.mobile-menu .mm-label { position: relative; display: inline-block; }
.mobile-menu a.active .mm-label::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--leaf);
}
.mobile-menu .mob-cta { margin: 12px 28px 18px; }
@media (max-width: 940px){ .nav-toggle { display: inline-flex; } }

/* ---- SOCIAL FEED ---- */
.social { background: var(--paper); }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.social-col { background: var(--bone); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.social-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.social-head .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.social-head .ic.fb { background: #1877F2; }
.social-head .ic.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-head .ic svg { width: 22px; height: 22px; }
.social-head .nm { font-weight: 700; font-size: 16px; color: var(--ink); }
.social-head .hd { font-size: 13px; color: var(--grey); }
.social-head .follow { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--leaf-deep); display: inline-flex; align-items: center; gap: 5px; }
.social-body { flex: 1; padding: 18px; display: flex; }
.social-body iframe { width: 100%; border: none; border-radius: 12px; }
.ig-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; }
.ig-tile { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; display: block; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ig-tile:hover img { transform: scale(1.07); }
.ig-tile::after { content:''; position:absolute; inset:0; background: rgba(30,51,24,0); transition: background .3s; }
.ig-tile:hover::after { background: rgba(30,51,24,0.18); }
.ig-foot { padding: 0 18px 18px; }
.ig-foot .btn { width: 100%; }
@media (max-width: 860px){ .social-grid { grid-template-columns: 1fr; } }

/* ---- BLOG ---- */
.blog-list { padding: 90px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.post-card { background: var(--paper); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card .pi { aspect-ratio: 16/10; overflow: hidden; }
.post-card .pi img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .pi img { transform: scale(1.05); }
.post-card .pb { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .cat { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf-deep); }
.post-card h3 { font-size: 23px; font-weight: 600; margin: 10px 0 8px; line-height: 1.15; }
.post-card p { font-size: 14.5px; color: var(--char); flex: 1; }
.post-card .meta { font-size: 13px; color: var(--grey); margin-top: 16px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 880px){ .blog-grid { grid-template-columns: 1fr; } }

/* ---- ARTICLE ---- */
.article { padding: 80px 0; }
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.article-wrap p { font-size: 17.5px; line-height: 1.75; color: var(--char); margin-bottom: 22px; }
.article-wrap h2 { font-size: clamp(26px,3vw,36px); font-weight: 600; margin: 44px 0 16px; }
.article-wrap h3 { font-size: 23px; font-weight: 600; margin: 32px 0 12px; }
.article-wrap ul { margin: 0 0 22px 4px; padding-left: 22px; }
.article-wrap li { font-size: 17px; line-height: 1.7; color: var(--char); margin-bottom: 10px; }
.article-wrap .lead-p { font-size: 20px; color: var(--ink); line-height: 1.6; }
/* Internal links inside the article body (e.g. "tree removal" linking to
   /tree-removal/) inherit the theme's global reset - a { text-decoration:
   none; color: inherit; } (line 46) - which makes them completely
   invisible, same colour as surrounding text, no underline. The <a> tags
   themselves are present and working in the imported content; they just
   read as plain text. Give them their own colour + underline so they're
   recognisable as links again. */
.article-wrap p a,
.article-wrap li a {
  color: var(--leaf-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-wrap p a:hover,
.article-wrap li a:hover { color: var(--leaf); }
.article-fig { border-radius: 18px; overflow: hidden; margin: 8px 0 32px; box-shadow: var(--shadow); }
.article-fig img { width: 100%; display: block; }
.article-share { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.article-share span { font-weight: 700; font-size: 14px; }
.article-share a { width: 40px; height: 40px; border-radius: 10px; background: var(--sage); display: grid; place-items: center; color: var(--leaf-deep); }
.article-share a:hover { background: var(--leaf); color: #fff; }
.article-share svg { width: 18px; height: 18px; }

/* ---- LEGAL ---- */
.legal { padding: 70px 0 90px; }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-wrap h2 { font-size: 26px; font-weight: 600; margin: 38px 0 14px; }
.legal-wrap h2:first-child { margin-top: 0; }
.legal-wrap p, .legal-wrap li { font-size: 16px; line-height: 1.7; color: var(--char); margin-bottom: 14px; }
.legal-wrap ul { padding-left: 22px; }
.legal-wrap a { color: var(--leaf-deep); font-weight: 600; text-decoration: underline; }
.legal-updated { font-size: 14px; color: var(--grey); margin-bottom: 32px; }

/* footer legal row */
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: rgba(244,243,234,0.55); }
.foot-legal a:hover { color: var(--leaf-bright); }

/* ============================================================
   ACCREDITATION LOGO BAND
   ============================================================ */
.accred { background: var(--paper); padding: 64px 0; border-top: 1px solid var(--border); }
.accred-inner { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 48px; align-items: center; }
.accred-copy .eyebrow { margin-bottom: 14px; }
.accred-copy h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.accred-copy p { color: var(--char); font-size: 15.5px; margin-top: 12px; max-width: 40ch; }
.accred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.accred-chip {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  height: 132px; display: grid; place-items: center; padding: 22px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.accred-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(30,51,24,0.18); }
.accred-chip img { max-height: 78px; max-width: 100%; width: auto; object-fit: contain; }
@media (max-width: 900px){
  .accred-inner { grid-template-columns: 1fr; gap: 30px; }
  .accred-copy p { max-width: none; }
}
@media (max-width: 540px){
  .accred-row { grid-template-columns: 1fr; gap: 12px; }
  .accred-chip { height: 116px; }
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { padding: 84px 0; background: var(--paper); border-top: 1px solid var(--border); }
.faq .faq-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.faq .faq-head .eyebrow { justify-content: center; margin-bottom: 14px; }
.faq .faq-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.02em; }
.faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--bone); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: 'Fraunces', serif; font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-ic { flex: none; width: 22px; height: 22px; color: var(--leaf-deep); transition: transform .28s ease; }
.faq-item[open] summary .q-ic { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--leaf-deep); }
.faq-item .a { padding: 0 26px 24px; }
.faq-item .a p { color: var(--char); font-size: 15.5px; line-height: 1.62; margin-bottom: 10px; }
.faq-item .a p:last-child { margin-bottom: 0; }
.faq-item .a a { color: var(--leaf-deep); font-weight: 700; }
.faq-item .a a:hover { text-decoration: underline; }
.faq-item .a ul { margin: 4px 0 10px; padding-left: 20px; }
.faq-item .a li { color: var(--char); font-size: 15.5px; line-height: 1.55; margin-bottom: 5px; }

/* ============================================================
   HERO QUOTE FORM
   ============================================================ */
.hero-form {
  background: var(--paper); border-radius: 22px; padding: 26px 24px;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.45);
}
.hero-form h2 { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.hero-form .hf-sub { font-size: 14px; color: var(--char); margin: 6px 0 16px; line-height: 1.45; }
.hero-form .hf-field { margin-bottom: 12px; display: flex; flex-direction: column; }
.hero-form .hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-form label { font-size: 11px; font-weight: 700; color: var(--grey); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-form input, .hero-form textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; width: 100%;
}
.hero-form input::placeholder, .hero-form textarea::placeholder { color: #9ba29a; }
.hero-form input:focus, .hero-form textarea:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(140,186,77,0.2); }
.hero-form textarea { resize: vertical; min-height: 48px; }
.hero-form .hf-btn { width: 100%; justify-content: center; margin-top: 6px; }
.hero-form .hf-fine { font-size: 12.5px; color: var(--grey); margin-top: 11px; text-align: center; }
.hero-form .hf-fine a { color: var(--leaf-deep); font-weight: 700; }
.hero-form .hf-fine a:hover { text-decoration: underline; }
@media (max-width: 980px){ .hero-form { max-width: 460px; } }


/* ===== VISUAL POLISH LAYER · 2026-06-26 ===== */
.intro .big-text .hl { font-style: italic; color: var(--leaf-deep); }
.hero h1, .page-hero h1, .final h2, .cta-band h2 { letter-spacing: -0.032em; }
.sec-head h2, .feature h2, .reviews-top h2 { letter-spacing: -0.026em; }
.btn-primary { box-shadow: 0 6px 16px -8px rgba(78,110,42,0.55); }
.btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(78,110,42,0.6); transform: translateY(-2px); }
.btn-dark { box-shadow: 0 6px 16px -10px rgba(30,51,24,0.55); }
.btn-dark:hover { box-shadow: 0 12px 24px -12px rgba(30,51,24,0.6); }
.nav-cta { box-shadow: 0 6px 16px -9px rgba(78,110,42,0.5); }
.svc, .rev, .step, .post-card, .value, .rel-card, .aside-card:not(.dark),
.form-card, .social-col, .accred-chip, .faq-item { border-color: var(--border-warm); }
.svc, .step, .post-card, .value, .rel-card { box-shadow: var(--shadow-sm); }
.svc:hover, .post-card:hover, .rel-card:hover { box-shadow: var(--shadow-lg); }
.step { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rev { box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.rev:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.intro, .reviews, .related, .values {
  position: relative;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(110,154,61,0.10) 0%, rgba(110,154,61,0) 60%);
}
.hero-bg::after, .final-bg::after, .page-hero-bg::after { box-shadow: inset 0 60px 120px -60px rgba(0,0,0,0.45); }
.accred-chip { box-shadow: var(--shadow-sm); }
.hero-form { border: 1px solid var(--border-warm); box-shadow: var(--shadow-lg); padding: 28px 26px; position: relative; }
.hero-form::before { content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: linear-gradient(90deg, var(--leaf), var(--leaf-bright)); border-radius: 0 0 4px 4px; }
.hero-form input, .hero-form textarea { border-color: var(--grey-light); transition: border-color .2s, box-shadow .2s; }
.marquee { padding: 14px 0; border-bottom-width: 3px; }
.marquee-track span { font-size: 19px; letter-spacing: 0.01em; }
.eyebrow { font-weight: 700; }
.feature { border-top: 1px solid var(--border); }
footer ul a:hover, .foot-contact a:hover { color: var(--leaf-bright); }
.svc .imgwrap img, .gx img, .rel-card .ri img, .post-card .pi img, .ig-tile img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
@media (prefers-reduced-motion: reduce){
  .step, .value, .rev, .btn-primary, .btn-dark { transition: none; }
  .step:hover, .value:hover, .rev:hover { transform: none; }
}

/* ===== ORANGE CTA OVERRIDE · 2026-06-29 (client request) ===== */
:root { --cta: #F47A1A; --cta-deep: #E06A10; --cta-ink: #15201A; --cta-tint: rgba(244,122,26,0.5); }
.btn-primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); box-shadow: 0 8px 18px -8px var(--cta-tint); }
.btn-primary:hover { background: var(--cta-deep); border-color: var(--cta-deep); color: var(--cta-ink); box-shadow: 0 14px 26px -10px var(--cta-tint); transform: translateY(-2px); }
.btn-primary svg { stroke: var(--cta-ink); }
.nav-cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 16px -9px var(--cta-tint); }
.nav-cta:hover { background: var(--cta-deep); color: var(--cta-ink); }
.fab { background: var(--cta); color: var(--cta-ink); }
.fab:hover { background: var(--cta-deep); }
.fab .ring { background: rgba(0,0,0,0.14); }
.hero-form::before { background: linear-gradient(90deg, var(--cta-deep), var(--cta)); }


/* ============================================================
   HERO QUOTE FORM - Gravity Forms skin
   Clones the original .hero-form styling 1:1 for [gravityform id="1"].
   Scoped to .hero-form--gf so other GF forms are unaffected.
   ============================================================ */
.hero-form--gf .gform_wrapper { margin: 0; }
.hero-form--gf .gform_heading { margin: 0; padding: 0; }
.hero-form--gf .gform_title {
  font-family: var(--font-display, 'Fraunces', serif) !important; font-size: 24px !important; font-weight: 600 !important;
  color: var(--ink) !important; letter-spacing: -0.02em; margin: 0 !important; padding: 0 !important;
}
.hero-form--gf .gform_description {
  display: block; font-size: 14px; color: var(--char); margin: 6px 0 16px; line-height: 1.45; padding: 0;
}
.hero-form--gf .gform_required_legend { display: none !important; }
.hero-form--gf .gform_wrapper .gform_fields { grid-row-gap: 12px !important; grid-column-gap: 12px !important; }
.hero-form--gf .gfield { margin: 0 !important; }
.hero-form--gf .gfield_label {
  display: block; font-size: 11px !important; font-weight: 700 !important; color: var(--grey) !important;
  margin: 0 0 5px !important; padding: 0; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2;
}
.hero-form--gf .gfield_required,
.hero-form--gf .gfield_required_text,
.hero-form--gf .gfield_required_asterisk,
.hero-form--gf .gfield_label .gfield_required,
.hero-form--gf legend .gfield_required { display: none !important; }
.hero-form--gf .gform_wrapper input[type=text],
.hero-form--gf .gform_wrapper input[type=tel],
.hero-form--gf .gform_wrapper input[type=email],
.hero-form--gf .gform_wrapper input[type=number],
.hero-form--gf .gform_wrapper select,
.hero-form--gf .gform_wrapper textarea {
  font-family: inherit !important; font-size: 15px !important; color: var(--ink) !important;
  background: #fff !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
  padding: 11px 13px !important; width: 100%; box-shadow: none;
}
.hero-form--gf .gform_wrapper input::placeholder,
.hero-form--gf .gform_wrapper textarea::placeholder { color: #9ba29a !important; opacity: 1; }
.hero-form--gf .gform_wrapper input:focus,
.hero-form--gf .gform_wrapper select:focus,
.hero-form--gf .gform_wrapper textarea:focus {
  outline: none !important; border-color: var(--leaf) !important;
  box-shadow: 0 0 0 3px rgba(140,186,77,0.2) !important;
}
.hero-form--gf .gform_wrapper textarea { resize: vertical; min-height: 48px !important; height: 72px; }
.hero-form--gf .gform_footer { margin: 18px 0 0 !important; padding: 0 !important; }
.hero-form--gf .gform_footer,
.hero-form--gf .gform-footer { display: block !important; width: 100% !important; }
.hero-form--gf #gform_submit_button_1,
.hero-form--gf .gform_footer input[type=submit],
.hero-form--gf .gform-footer input[type=submit],
.hero-form--gf .gform_footer .gform_button,
.hero-form--gf button.gform_button,
.hero-form--gf input.gform_button,
.hero-form--gf input[type=submit] {
  width: 100% !important; max-width: 100% !important;
  display: flex !important; justify-content: center; align-items: center; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--cta-ink) !important;
  background: var(--cta) !important; border: none !important; border-radius: 999px !important;
  padding: 14px 26px !important; box-shadow: 0 6px 16px -8px rgba(78,110,42,0.55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero-form--gf #gform_submit_button_1:hover,
.hero-form--gf .gform_footer input[type=submit]:hover,
.hero-form--gf .gform_footer .gform_button:hover,
.hero-form--gf button.gform_button:hover,
.hero-form--gf input.gform_button:hover,
.hero-form--gf input[type=submit]:hover {
  background: var(--cta-deep) !important; transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(78,110,42,0.6);
}
.hero-form--gf .gform_ajax_spinner { margin-left: 10px; }
.hero-form--gf .gfield_validation_message,
.hero-form--gf .validation_message {
  font-size: 12px; color: #b3402a; background: none !important; border: none !important;
  padding: 4px 0 0 !important; margin: 0 !important;
}
.hero-form--gf .gform_validation_errors { border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.hero-form--gf .gform_confirmation_message { font-size: 15px; font-weight: 600; color: var(--leaf-deep); }


/* ============================================================
   CONTACT PAGE FORM - Gravity Forms skin for [gravityform id="2"]
   Clones the original .field / .field-row / .form-card styling.
   Scoped to .contact-form--gf only.
   ============================================================ */
.contact-form--gf .gform_wrapper { margin: 0; }
.contact-form--gf .gform_heading, .contact-form--gf .gform_required_legend { display: none !important; }
.contact-form--gf .gform_wrapper .gform_fields { grid-row-gap: 16px !important; grid-column-gap: 16px !important; }
.contact-form--gf .gfield { margin: 0 !important; }
.contact-form--gf .gfield_label {
  display: block; font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink) !important;
  margin: 0 0 6px !important; padding: 0; text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.contact-form--gf .ginput_complex label,
.contact-form--gf .gform-field-label--type-sub {
  font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink) !important;
  margin: 0 0 6px !important; padding-top: 0 !important;
}
.contact-form--gf .gfield_required,
.contact-form--gf .gfield_required_text,
.contact-form--gf .gfield_required_asterisk,
.contact-form--gf legend .gfield_required { display: none !important; }
.contact-form--gf .gform_wrapper input[type=text],
.contact-form--gf .gform_wrapper input[type=tel],
.contact-form--gf .gform_wrapper input[type=email],
.contact-form--gf .gform_wrapper input[type=number],
.contact-form--gf .gform_wrapper select,
.contact-form--gf .gform_wrapper textarea {
  font-family: inherit !important; font-size: 15px !important; color: var(--ink) !important;
  width: 100%; background: #fff !important; border: 1.5px solid var(--grey-light) !important;
  border-radius: 12px !important; padding: 13px 15px !important; box-shadow: none;
  transition: border-color .2s;
}
.contact-form--gf .gform_wrapper input::placeholder,
.contact-form--gf .gform_wrapper textarea::placeholder,
.contact-form--gf .gform_wrapper select:invalid { color: #9ba29a !important; opacity: 1; }
.contact-form--gf .gform_wrapper input:focus,
.contact-form--gf .gform_wrapper select:focus,
.contact-form--gf .gform_wrapper textarea:focus { outline: none !important; border-color: var(--leaf) !important; }
.contact-form--gf .gform_wrapper textarea { resize: vertical; min-height: 120px !important; }

/* reCAPTCHA is a fixed-width iframe (~304px) that Google doesn't offer a
   CSS-only way to reflow, so on narrow phones it can run past the form
   card's edge once the card's own padding is subtracted. Scale it down
   and pull the following field up to close the gap the scale leaves
   behind (transform doesn't shrink the layout box, just the visuals). */
@media (max-width: 400px) {
  .gform_wrapper .ginput_recaptcha,
  .gform_wrapper .ginput_container_captcha,
  .gform_wrapper .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
    margin-bottom: -14px;
  }
}
.contact-form--gf .gform_wrapper select,
.contact-form--gf .gform_wrapper select.large,
.contact-form--gf .gform_wrapper .ginput_container_select select {
  appearance: auto !important; -webkit-appearance: auto !important; -moz-appearance: auto !important;
  background-image: none !important; padding: 7px 15px !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  line-height: 1.4 !important;
}
.contact-form--gf .gform_wrapper input[type=file] {
  font-family: inherit; font-size: 14px; color: var(--char); width: 100%;
  background: #fff; border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px;
}
.contact-form--gf .gform_fileupload_rules,
.contact-form--gf .gform_delete_file .dashicons ~ .screen-reader-text { display: none !important; }
.contact-form--gf .gform_footer,
.contact-form--gf .gform-footer { display: block !important; width: 100% !important; margin: 22px 0 0 !important; padding: 0 !important; }
.contact-form--gf #gform_submit_button_2,
.contact-form--gf .gform_footer input[type=submit],
.contact-form--gf .gform_footer .gform_button,
.contact-form--gf button.gform_button,
.contact-form--gf input.gform_button,
.contact-form--gf input[type=submit] {
  width: 100% !important; max-width: 100% !important; display: flex !important;
  justify-content: center; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--cta-ink) !important;
  background: var(--cta) !important; border: none !important; border-radius: 999px !important;
  padding: 14px 26px !important; box-shadow: 0 6px 16px -8px rgba(78,110,42,0.55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-form--gf #gform_submit_button_2:hover,
.contact-form--gf input[type=submit]:hover,
.contact-form--gf .gform_button:hover {
  background: var(--cta-deep) !important; transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(78,110,42,0.6);
}
.contact-form--gf .gfield_validation_message,
.contact-form--gf .validation_message {
  font-size: 12px; color: #b3402a; background: none !important; border: none !important;
  padding: 4px 0 0 !important; margin: 0 !important;
}
.contact-form--gf .gform_validation_errors { border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.contact-form--gf .gform_confirmation_message { font-size: 15px; font-weight: 600; color: var(--leaf-deep); }


/* Footer credit link (Powered By Fresh Digital) */
.foot-bottom .fd-credit { color: inherit; text-decoration: none; transition: color .2s ease; }
.foot-bottom .fd-credit:hover { color: var(--leaf-bright); }


/* ============================================================
   BLOG PAGINATION (the_posts_pagination on /blog/)
   WordPress core outputs class="nav-links" for pagination too, which
   collided with the header's .nav-links menu selector, including its
   mobile rule "@media (max-width:940px){ .nav-links{display:none} }".
   That rule was hiding the pagination on mobile. Fix: scope pagination
   under .pagination and force it visible at all widths. No other visual
   change - it keeps inheriting the original (unstyled/plain) look.
   ============================================================ */
.pagination .nav-links { display: flex !important; }
@media (max-width: 940px) {
  .pagination .nav-links { display: flex !important; }
}


/* ============================================================
   GOOGLE REVIEWS - Trustindex widget skin (homepage only)
   [trustindex no-registration=google] replaces the old static .rev cards.
   Class names below were taken from DevTools on the LIVE rendered widget
   (data-layout-id="34", data-layout-category="slider", set-id
   "light-background") - not guessed. If Trustindex ships a markup update,
   re-inspect the same way before touching these selectors.

   NOTE: this widget is Trustindex's SLIDER layout (auto-rotating single
   track + .ti-controls arrows + .ti-controls-line dot), not a static
   3-column grid. Re-skinning below makes each visible card match .rev,
   but the row still slides/paginates rather than sitting still like the
   mockup's 3 fixed cards. If a static 3-up row is required, switch the
   widget's Layout from "Slider" to "Grid" inside the Trustindex.io
   dashboard (Customize > Layout) - that's a one-click, stable fix vs.
   fighting their slide-positioning JS with CSS.
   ============================================================ */
.reviews-grid--trustindex { display: block; }
.reviews-grid--trustindex .ti-widget { width: 100%; }
/* Gap between cards comes from THIS element's own padding, not from a
   flex `gap` + resized flex-basis (tried earlier). Trustindex's slider
   computes its slide/translateX offsets assuming each card is exactly
   33.333% wide; resizing cards to make room for a real `gap` changed
   that width and desynced the slide math, so the final slide position
   stopped short and clipped the last card. Padding lives *inside* the
   existing 33.333% box (box-sizing:border-box), so it doesn't change
   each card's outer footprint and the slider's own math stays correct. */
.reviews-grid--trustindex .ti-review-item {
  padding: 0 11px !important;
  overflow: visible;
}

/* ---- Top summary badge (EXCELLENT / ★★★★☆ / Based on 45 reviews / Google)
   app.js physically moves this element into .reviews-top (see app.js),
   so every selector below is scoped to .reviews-top, not
   .reviews-grid--trustindex - the badge no longer lives inside that
   element, and selectors still scoped to it stopped matching (that's why
   the stars went back to gold and "EXCELLENT" reappeared last round). */
.reviews-top { position: relative !important; }
.reviews-top .ti-header {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  max-width: 220px;
  width: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.reviews-top .ti-fade-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
/* "EXCELLENT" label and the Google logo - mockup's badge is just stars
   + one line of text underneath, so both are hidden entirely. */
.reviews-top .ti-rating.ti-rating-large { display: none !important; }
.reviews-top .ti-large-logo { display: none !important; }
.reviews-top .ti-stars.star-lg { display: flex; gap: 2px; }
/* "Based on 45 reviews" -> match old .rsum .meta styling exactly */
.reviews-top .ti-header .ti-rating-text .nowrap {
  font-weight: 600;
  color: var(--char);
  font-size: 14.5px;
}
/* "X.X average on Google" - added via JS (app.js), built from the site's
   own Google rating value since Trustindex's widget never exposes the
   precise number itself, only a qualitative label + review count. */
.reviews-top .ti-header .aa-rating-text {
  font-weight: 600;
  color: var(--char);
  font-size: 14.5px;
}

/* ---- Review cards -> match .rev exactly ----
   Card look lives one level in, on .ti-inner (not on .ti-review-item
   itself), so the padding set above stays visible as a real gap between
   cards instead of being swallowed into the card's own background. */
.reviews-grid--trustindex .ti-review-item .ti-inner {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.reviews-grid--trustindex .ti-review-item:hover .ti-inner {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

/* Per-review star row (small stars above each review's text). Visual
   order (stars -> text -> Read more -> avatar row) is handled by
   physically reordering these elements in the DOM via app.js, not via
   CSS `order` - Trustindex's own stylesheet uses a more specific
   selector chain that kept winning the specificity fight even against
   `!important`, so JS reordering is the reliable fix. */
.reviews-grid--trustindex.reviews-grid--trustindex .ti-review-item .ti-stars {
  margin-bottom: 14px;
  display: flex;
  gap: 2px;
}

/* Stars are <img> icons (Trustindex CDN svg), not inline SVG paths, so
   `fill`/`color` do nothing - recolor with a filter instead.
   IMPORTANT: this site's real Google rating is 4.7 (45 reviews), not a
   flat 5.0 - Trustindex's own star images represent that with a half-
   filled 5th star icon (gold on one side, grey/empty on the other,
   within the same image). The earlier filter started with
   `brightness(0)`, which turns EVERY non-transparent pixel pure black
   before recolouring - that erases the gold-vs-grey distinction inside a
   half star, so it rendered as a solid green star and silently overstated
   the rating as a perfect 5.0. This version only rotates/adjusts existing
   hue and tone (no brightness(0) reset), so the grey "empty" portion of a
   half star stays a muted grey instead of turning fully green.
   The exact source gold hex couldn't be fetched (cdn.trustindex.io isn't
   reachable from here), so this is tuned against a common Google-gold
   estimate (#FBBC04) - if it's slightly off once live, check Trustindex's
   dashboard for a native star-colour setting first (more reliable than
   any filter guess), or send a screenshot and the hue-rotate degree can
   be nudged to match exactly. */
#reviews .ti-star {
  filter: saturate(245%) hue-rotate(39deg) brightness(78%) contrast(52%);
}

/* Review text - Trustindex clamps this to a fixed pixel height inline and
   reveals the rest via its own "Read more" toggle (left untouched below). */
.reviews-grid--trustindex.reviews-grid--trustindex .ti-review-content {
  color: var(--ink) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  flex: 1;
}
.reviews-grid--trustindex .ti-review-content::before { content: '"'; }
.reviews-grid--trustindex .ti-review-content::after { content: '"'; }
/* Read more toggle - restored and themed. Trustindex clamps each review
   to a fixed pixel height and uses this toggle to expand it; hiding the
   toggle while keeping the clamp meant longer reviews just got cut off
   mid-sentence with no way to read the rest. */
.reviews-grid--trustindex.reviews-grid--trustindex .ti-read-more {
  display: inline-block !important;
  color: var(--leaf-deep) !important;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-top: 6px;
}

/* Reviewer row: avatar + name/date, pinned to the BOTTOM of the card
   (stars -> text -> Read more -> this), matching the mockup */
.reviews-grid--trustindex.reviews-grid--trustindex .ti-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
/* Avatar - use the reviewer's real Google profile photo when Trustindex
   provides one (this is the normal case); just size/round it to fit the
   card. Trustindex already falls back to its own generated colour+initial
   image when a reviewer has no photo, so no extra fallback logic is
   needed here. */
.reviews-grid--trustindex .ti-profile-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.reviews-grid--trustindex .ti-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.reviews-grid--trustindex .ti-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
/* Date -> replaced with a static "Google review" label, matching the old
   .rev .lo line, since the mockup doesn't show per-review dates */
.reviews-grid--trustindex .ti-date {
  font-size: 12.5px;
  color: var(--grey);
}
/* Date text is replaced with "Google review" directly via JS (see
   app.js) rather than a CSS pseudo-element trick - more reliable given
   Trustindex's stylesheet has been winning some of these fights. */
/* Small "posted on Google" icon that overlaps the top-left of the avatar
   - needs !important, Trustindex's own stylesheet was winning without it */
.reviews-grid--trustindex .ti-platform-icon { display: none !important; }
/* Small Google "posted on" icon per review - not part of the old .rev
   design, hide it to keep the card clean */
/* Slider arrows / pagination dots -> theme leaf green instead of default */
.reviews-grid--trustindex .ti-next,
.reviews-grid--trustindex .ti-prev { filter: grayscale(1) opacity(0.6); }
.reviews-grid--trustindex .ti-controls-line .dot { background: var(--leaf) !important; }

/* Responsive: keep the badge in the top-right corner next to "Highly
   rated" (same as desktop) instead of dropping below it - just shrink
   everything so it fits without overlapping the heading text. */
@media (max-width: 900px) {
  .reviews-top .ti-header {
    max-width: 108px;
    gap: 2px;
  }
  .reviews-top .ti-stars.star-lg .ti-star { width: 12px !important; height: 12px !important; }
  .reviews-top .ti-header .ti-rating-text .nowrap,
  .reviews-top .ti-header .aa-rating-text {
    font-size: 10.5px;
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .reviews-top .ti-header { max-width: 92px; }
}

/* ============ MOBILE: tighter section spacing ============
   Every section's vertical padding was sized for desktop (80-110px top
   and bottom). On phones that reads as a lot of empty space between
   sections - scale it down (roughly desktop x0.55) below 900px, the same
   breakpoint the rest of the site switches to its mobile layout at. */
@media (max-width: 900px) {
  .section,
  .about-intro,
  .contact-sec,
  .svc-overview,
  .blog-list { padding-top: 56px; padding-bottom: 56px; }

  .intro,
  .svc-detail { padding-top: 52px; padding-bottom: 52px; }

  .final-inner { padding-top: 64px; padding-bottom: 64px; }

  .related,
  .values { padding-top: 48px; padding-bottom: 48px; }

  .cta-band-inner,
  .article { padding-top: 46px; padding-bottom: 46px; }

  .stats-band { padding-top: 40px; padding-bottom: 40px; }

  .accred { padding-top: 38px; padding-bottom: 38px; }

  .faq { padding-top: 48px; padding-bottom: 48px; }

  /* Footer bottom bar - centre the copyright line and legal links
     instead of left-aligned/stacked awkwardly */
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .foot-legal { justify-content: center; }

  /* Buttons - smaller and consistent site-wide on mobile. Left to wrap
     normally (no forced nowrap) - on very narrow screens they'll drop
     to a new line rather than being squeezed or truncated. */
  .btn { padding: 11px 16px; font-size: 13.5px; gap: 7px; }
  .btn svg { width: 15px; height: 15px; flex: none; }
}