:root {
    --header-h: 68px;
    --accent: #15803D;
    --accent-strong: #14532D;
    --ink: #111418;
    --ink-soft: #5b6470;
    --ink-faint: #6b7480; /* 4.74:1 on white — WCAG AA for small text incl. placeholders */
    --bg: #FFFFFF;
    --bg-soft: #F5F6F8;
    --border: #E5E8EC;
    --black: #0C0D0F;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  body {
    font-family: 'Ubuntu', system-ui, -apple-system, sans-serif;
    font-size: 17px; line-height: 1.6;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
  a { color: inherit; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px;
  }

  /* ---------- Header ---------- */
  header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }
  .wordmark {
    font-weight: 700; font-size: 21px; letter-spacing: -.03em;
    text-decoration: none; color: var(--ink); white-space: nowrap;
  }
  .wordmark em { font-style: normal; color: var(--accent); }
  .nav-links { display: flex; gap: 34px; }
  .nav-links a {
    text-decoration: none; font-size: 15.5px; font-weight: 500; color: var(--ink-soft);
    padding: 8px 0; transition: color .15s ease;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-phone {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 15.5px; text-decoration: none;
    color: #fff; background: var(--accent-strong);
    padding: 11px 26px; border-radius: 999px; white-space: nowrap;
    transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
  }
  .nav-phone svg { color: #fff; flex-shrink: 0; transition: transform .18s ease; }
  .nav-phone:hover {
    background: var(--black); transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 16px rgba(12, 13, 15, .18);
  }
  .nav-phone:hover svg { transform: translateX(2px); }

  /* ---------- Hero ---------- */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 44px; padding-bottom: 44px;
    position: relative;
  }
  .hero::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(50% - 50vw); width: 100vw; pointer-events: none;
    background:
      radial-gradient(900px 620px at 100% 0%, #F4F9FC, transparent 62%),
      radial-gradient(640px 460px at 72% 48%, rgba(0, 109, 154, .06), transparent 70%),
      radial-gradient(520px 400px at 12% 92%, rgba(249, 115, 22, .045), transparent 70%);
  }
  .hero-net {
    position: absolute; top: 0; right: 0; height: 100%; width: 58%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(75% 80% at 60% 45%, #000 55%, transparent 100%);
    mask-image: radial-gradient(75% 80% at 60% 45%, #000 55%, transparent 100%);
    transition: opacity .5s ease, filter .5s ease;
  }
  .hero-net circle { animation: net-breathe 7s ease-in-out infinite; }
  .hero-net circle:nth-of-type(2n) { animation-delay: -2.3s; }
  .hero-net circle:nth-of-type(3n) { animation-delay: -4.1s; }
  .hero-net circle:nth-of-type(5n) { animation-delay: -5.6s; }
  @keyframes net-breathe {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
  }
  .hero-net.net-pulse { filter: saturate(1.6) brightness(1.05); }
  .net-dot { offset-rotate: 0deg; }
  .net-dot-a {
    offset-path: path('M120 130 L290 80 L470 150 L640 95');
    animation: net-travel 11s linear infinite;
  }
  .net-dot-b {
    offset-path: path('M250 280 L110 430 L300 560 L520 620');
    animation: net-travel 14s linear infinite; animation-delay: -6s;
  }
  @keyframes net-travel {
    0% { offset-distance: 0%; opacity: 0; }
    6% { opacity: 1; }
    42% { opacity: 1; }
    50% { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  .hero-copy > * { animation: hero-rise .5s ease-out both; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .24s; }
  .hero-copy > *:nth-child(5) { animation-delay: .32s; }
  .spotlight { animation: hero-rise .5s ease-out .3s backwards; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .scroll-cue {
    position: absolute; left: 50%; bottom: 18px;
    width: 44px; height: 44px; display: grid; place-items: center;
    color: var(--ink-faint); opacity: 0;
    transform: translateX(-50%);
    animation: cue-in .6s ease-out 2s forwards, cue-bob 5s ease-in-out 2.8s infinite;
    transition: color .18s ease;
  }
  .scroll-cue:hover { color: var(--accent-warm); }
  @keyframes cue-in { to { opacity: 1; } }
  @keyframes cue-bob {
    0%, 24%, 100% { transform: translate(-50%, 0); }
    6%, 18% { transform: translate(-50%, 7px); }
    12% { transform: translate(-50%, 2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue { opacity: 1; }
  }
  .stars { display: flex; gap: 2px; color: var(--accent); }
  .hero h1 {
    font-size: clamp(2.75rem, 7.2vw, 4.75rem); font-weight: 700;
    margin-bottom: 28px;
  }
  .hero .lede {
    font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink-soft);
    max-width: 42ch; margin-bottom: 14px;
  }
  .type-line {
    font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-weight: 700;
    color: var(--ink); margin-bottom: 34px; min-height: 1.5em;
  }
  .type-word { color: var(--accent); }
  .hero-trust {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 22px; font-size: 14px; color: var(--ink-soft);
  }
  .trust-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--bg-soft); border: 1px solid var(--border);
    font-weight: 500; white-space: nowrap;
  }
  .trust-pill strong { color: var(--ink); }
  .stars-gold { color: #FBBC04 !important; }
  .dot-sep { color: var(--ink-faint); margin: 0 2px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: inherit; font-weight: 500; font-size: 16.5px;
    background: var(--black); color: #fff;
    border: 1.5px solid var(--black); border-radius: 12px;
    padding: 23px 36px; min-height: 63px;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  }
  .btn svg { transition: transform .18s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(12, 13, 15, .16); }
  .btn:hover svg { transform: translateX(3px); }
  .btn:active { transform: scale(.98); box-shadow: none; }
  .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn:active { transform: scale(.98); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
  .btn-ghost:hover { background: var(--bg-soft); border-color: var(--border); }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

  /* ---------- Section headings ---------- */
  section { border-top: 1px solid var(--border); }
  .sec-head { padding-top: 88px; margin-bottom: 56px; }
  .sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 14px; }
  .sec-head p { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }

  /* ---------- Services grid ---------- */
  .services { padding-bottom: 96px; }
  .svc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    background: var(--border); gap: 1px;
  }
  .svc {
    background: var(--bg); padding: 44px 38px 40px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  }
  .svc .icon { color: var(--accent); margin-bottom: 26px; }
  .svc h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
  .svc p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 26px; }
  .enquire {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-weight: 500; font-size: 16px; color: var(--ink);
    padding: 6px 0; min-height: 44px;
    transition: color .15s ease;
  }
  .enquire:hover { color: var(--accent); }
  .enquire svg { transition: transform .18s ease; }
  .enquire:hover svg { transform: translateX(3px); }
  .svc-cta { background: var(--black); color: #fff; justify-content: center; }
  .svc-cta h3 { color: #fff; font-size: 1.45rem; margin-bottom: 12px; }
  .svc-cta p { color: rgba(255,255,255,.65); margin-bottom: 26px; }
  .svc-cta a {
    display: inline-flex; align-items: center; gap: 9px;
    color: #4FB3DC; font-weight: 700; font-size: 1.15rem; text-decoration: none;
    padding: 6px 0; min-height: 44px;
  }
  .svc-cta a:hover { text-decoration: underline; }

  /* ---------- Stats + Reviews ---------- */
  .social { padding-bottom: 96px; }
  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    padding: 88px 0 72px;
  }
  .stat b { display: block; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; }
  .stat span { font-size: 15px; color: var(--ink-soft); }
  .social h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 40px; }
  .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .review {
    border: 1px solid var(--border); border-radius: 16px;
    padding: 30px 28px;
  }
  .review .stars { margin-bottom: 18px; }
  .review p { font-size: 15.5px; margin-bottom: 20px; }
  .review footer { font-size: 15px; color: var(--ink-faint); border: none; padding: 0; }
  .all-reviews {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 36px;
    font-weight: 500; font-size: 16px; color: var(--accent); text-decoration: none;
    padding: 6px 0; min-height: 44px;
  }
  .all-reviews:hover { text-decoration: underline; }

  /* ---------- Contact ---------- */
  .contact { padding-bottom: 110px; }
  .contact-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px;
    padding-top: 88px;
  }
  .contact h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 14px; }
  .contact .sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 40ch; margin-bottom: 44px; }
  .channels { display: flex; flex-direction: column; gap: 26px; margin-bottom: 44px; }
  .channel { display: flex; align-items: center; gap: 18px; text-decoration: none; }
  .channel .icon {
    width: 52px; height: 52px; flex-shrink: 0;
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 13px; color: var(--accent);
  }
  .channel b { display: block; font-size: 17px; font-weight: 700; }
  .channel span { font-size: 14.5px; color: var(--ink-soft); }
  .price-box {
    background: var(--bg-soft); border-radius: 16px; padding: 28px 30px;
  }
  .price-box .label { font-size: 15px; color: var(--ink-soft); margin-bottom: 4px; }
  .price-box .price { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
  .price-box .price small { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
  .price-box .note { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
  .topic-pill {
    display: none; width: fit-content; margin-bottom: 24px;
    align-items: center; gap: 9px;
    background: #E8F4EC; color: var(--accent-strong);
    font-size: 14.5px; font-weight: 500;
    padding: 8px 16px; border-radius: 999px;
  }
  .topic-pill.show { display: flex; }
  .topic-pill button {
    background: none; border: none; cursor: pointer; color: var(--accent-strong);
    display: grid; place-items: center; padding: 2px;
  }
  .field { margin-bottom: 22px; }
  .field label { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 8px; }
  .field input, .field textarea {
    width: 100%; font: inherit; font-size: 16px;
    padding: 14px 16px; min-height: 52px;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--bg); color: var(--ink);
    transition: border-color .18s ease;
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
  .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
  .field textarea { min-height: 130px; resize: vertical; }
  .submit { width: 100%; margin-top: 4px; }
  .success { display: none; text-align: center; padding: 60px 10px; }
  .success.show { display: block; }
  .success .tick {
    width: 60px; height: 60px; margin: 0 auto 18px;
    display: grid; place-items: center;
    background: #E8F4EC; color: var(--accent); border-radius: 50%;
  }
  .success h3 { font-size: 1.4rem; margin-bottom: 8px; }
  .success p { color: var(--ink-soft); }

  /* ---------- Footer ---------- */
  .site-footer { border-top: 1px solid var(--border); padding: 32px 0; font-size: 14.5px; color: var(--ink-soft); }
  .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .foot a { color: var(--ink); font-weight: 500; text-decoration: none; }
  .foot a:hover { color: var(--accent); }


  /* ---------- Linked card titles ---------- */
  .svc h3 a { color: inherit; text-decoration: none; }
  .svc h3 a:hover { color: var(--accent); }

  /* ---------- FAQ ---------- */
  .faq { padding-bottom: 100px; }
  .faq-list { border-top: 1px solid var(--border); }
  .faq-list details { border-bottom: 1px solid var(--border); }
  .faq-list summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 24px 4px; min-height: 44px;
    font-weight: 500; font-size: 1.08rem;
    transition: color .15s ease;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary:hover { color: var(--accent); }
  .faq-list summary .chev { flex-shrink: 0; color: var(--ink-faint); transition: transform .2s ease; }
  .faq-list details[open] summary .chev { transform: rotate(45deg); color: var(--accent); }
  .faq-list .answer { padding: 0 4px 28px; color: var(--ink-soft); font-size: 15.5px; max-width: 72ch; }

  /* ---------- Footer nav ---------- */
  .foot-nav {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    padding-bottom: 22px; margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
  }
  .foot-nav a {
    font-size: 14px; color: var(--ink-soft); text-decoration: none;
    padding: 4px 0; font-weight: 500;
  }
  .foot-nav a:hover { color: var(--accent); }


  /* ---------- Warm accent: hover + active states ----------
     --accent-warm (#D97706, 3.32:1) for large type and UI graphics (≥3:1);
     --accent-warm-ink (#B45309, 4.62:1) wherever gold colours small text
     or sits behind white text (needs ≥4.5:1). */
  :root { --accent-warm: #D97706; --accent-warm-ink: #B45309; }
  .h1-accent { color: #166534; }
  .h1-brisbane { color: var(--accent-warm); }
  /* Allow the second line to wrap naturally so the h1 never overflows the
     copy column into the spotlight card (city names longer than "Perth"
     made the nowrap line wider than the column). */
  .h1-line2 { white-space: normal; }
  .hero-grid > * { min-width: 0; }
  .btn:hover { background: var(--accent-warm-ink); border-color: var(--accent-warm-ink); }
  .btn:active { background: var(--accent-warm-ink); border-color: var(--accent-warm-ink); }
  .btn-ghost:hover { background: var(--bg-soft); border-color: var(--accent-warm); color: var(--ink); }
  .nav-links a:hover, .enquire:hover, .svc h3 a:hover,
  .foot a:hover, .foot-nav a:hover, .all-reviews:hover { color: var(--accent-warm-ink); }
  .faq-list summary:hover { color: var(--accent-warm-ink); }
  .faq-list details[open] summary .chev { color: var(--accent-warm); }
  .topic-pill button:hover, .modal-close:hover { color: var(--accent-warm); }

  /* ---------- Support modal ---------- */
  .support-modal {
    margin: auto; /* the global reset removes the UA default that centres <dialog> */
    border: none; border-radius: 18px; padding: 0;
    width: min(520px, 92vw);
    max-height: calc(100svh - 40px); overflow-y: auto;
    box-shadow: 0 24px 64px rgba(4,17,47,.28);
  }
  .support-modal::backdrop { background: rgba(12,13,15,.45); backdrop-filter: blur(3px); }
  .modal-inner { padding: 36px 34px 34px; }
  .modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
  .modal-head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
  .modal-close {
    background: none; border: none; cursor: pointer; color: var(--ink-faint);
    padding: 6px; margin: -6px -6px 0 0; display: grid; place-items: center;
    transition: color .15s ease;
  }
  .modal-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 26px; }


  /* ---------- Hero spotlight ---------- */
  .hero-grid { display: grid; grid-template-columns: 1.36fr 0.87fr; gap: 60px; align-items: center; }
  /* h1 sizes below are fitted (with ~12% slack) so both lines fit the copy
     column on one line each and never reach the spotlight card. */
  @media (min-width: 961px) and (max-width: 1180px) {
    .hero h1 { font-size: clamp(2.3rem, 4.9vw - 6px, 3.25rem); }
  }
  @media (min-width: 1181px) {
    /* Exact column proportions so the spotlight card is the same width on every
       hero (a long h1 line otherwise inflates the copy column's min-content). */
    .hero-grid { grid-template-columns: minmax(0, 1.36fr) minmax(0, 0.87fr); }
    .hero h1 { font-size: 3.25rem; }
  }
  .spotlight {
    background: #fff; border-radius: 18px;
    padding: 30px 32px 24px; position: relative;
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(12, 13, 15, .07), 0 2px 8px rgba(12, 13, 15, .04);
    transition: transform .25s ease, box-shadow .25s ease;
    /* own compositing layer: stops Safari re-rasterising the small star/shield
       SVGs (subpixel shimmer) on every repaint of the animated network behind */
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
  }
  .spotlight:hover {
    transform: translateZ(0) translateY(-4px);
    box-shadow: 0 22px 44px rgba(12, 13, 15, .1), 0 4px 12px rgba(12, 13, 15, .05);
  }
  .spot-rating { display: flex; align-items: center; gap: 9px; }
  .spotlight blockquote {
    font-size: .98rem; font-weight: 400; line-height: 1.6;
    margin: 0 0 18px; min-height: 5em; color: var(--ink);
    transition: opacity .25s ease, transform .25s ease;
  }
  .spot-status {
    position: absolute; top: -14px; left: 26px;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
    box-shadow: 0 4px 12px rgba(12, 13, 15, .08);
  }
  .status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
    animation: status-pulse 2.4s ease-out infinite;
  }
  @keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
  }
  .spot-foot { display: flex; align-items: center; justify-content: space-between; }
  .spot-count { font-size: 13.5px; color: var(--ink-faint); }
  .spot-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; transition: opacity .25s ease, transform .25s ease;
  }
  .spot-who { display: flex; align-items: center; gap: 12px; }
  .spot-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 700;
  }
  .spot-id { display: flex; flex-direction: column; gap: 2px; }
  .spot-id #spot-name { font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.2; }
  .spot-verified {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--ink-faint);
  }
  .spot-google {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--ink-soft);
    margin-bottom: 24px;
  }
  .spot-dots { display: flex; gap: 4px; }
  .spot-dots button {
    width: 28px; height: 28px; display: grid; place-items: center;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .spot-dots button::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--border); display: block; transition: background .2s ease, transform .2s ease;
  }
  .spot-dots button:hover::before { background: var(--accent-warm); }
  .spot-dots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.25); }


  /* ---------- Whole-card hover/click ---------- */
  .svc { cursor: pointer; transition: background .18s ease; }
  .svc:hover { background: var(--bg-soft); }
  .svc:hover .enquire { color: var(--accent-warm-ink); }
  .svc:hover .enquire svg { transform: translateX(3px); }
  .svc:hover h3 a { color: var(--accent-warm-ink); }
  .svc-cta:hover { background: #16181D; }
  .svc-cta:hover a { text-decoration: underline; }


  /* ---------- Typewriter lede ---------- */
  .lede { min-height: calc(2 * 1.6em); }
  .caret {
    display: inline-block; width: 2px; height: 1.05em;
    background: var(--accent-warm); margin-left: 3px;
    vertical-align: -0.12em;
    animation: caret-blink 1.05s steps(1) infinite;
  }
  @keyframes caret-blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .caret { display: none; } }


  /* ---------- Clients ---------- */
  .clients { padding-bottom: 96px; }
  .client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .client {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    border: 1px solid var(--border); border-radius: 16px;
    padding: 36px 24px; text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
  }
  .client img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
  .client span { font-size: 13.5px; color: var(--ink-soft); letter-spacing: .02em; transition: color .18s ease; }
  .client:hover { border-color: var(--accent-warm); background: var(--bg-soft); }
  .client:hover span { color: var(--accent-warm-ink); }


  /* ---------- Two-step forms ---------- */
  .field select {
    width: 100%; font: inherit; font-size: 16px;
    padding: 14px 44px 14px 16px; min-height: 52px;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--bg); color: var(--ink); cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    transition: border-color .18s ease;
  }
  .field select:focus { border-color: var(--accent); outline: none; }
  .field-err { color: #C62828; font-size: 14px; margin-top: 8px; }
  .step-note {
    background: #E7F5EC; border-radius: 12px;
    padding: 16px 18px; font-size: 15px; line-height: 1.55;
    margin-bottom: 24px; color: var(--ink-soft);
  }
  .step-note b { color: #1B7F4B; }
  .skip {
    display: block; width: 100%; margin-top: 12px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 14.5px; color: var(--ink-soft);
    padding: 10px; min-height: 44px; transition: color .15s ease;
  }
  .skip:hover { color: var(--accent-warm-ink); }
  .form-note { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .client-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
    .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  }
  @media (max-width: 640px) {
    .hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .scroll-cue { display: none; }
    .client-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .nav-phone span { display: none; }
    .hero { padding-top: 40px; padding-bottom: 40px; }
    .svc-grid { grid-template-columns: 1fr; }
    .svc { padding: 34px 26px 32px; }
    .sec-head { padding-top: 64px; margin-bottom: 40px; }
    .stats { padding: 64px 0 48px; }
    .contact-grid { padding-top: 64px; }
    .contact { padding-bottom: 72px; }
  }

/* ---------- See all services ---------- */
.svc-more { text-align: center; margin-top: 32px; }
.svc-more a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15.5px; color: var(--ink-soft);
  text-decoration: none; padding: 10px 4px; min-height: 44px;
  transition: color .15s ease;
}
.svc-more a:hover { color: var(--accent-warm-ink); }
.svc-more a svg { transition: transform .18s ease; }
.svc-more a:hover svg { transform: translateX(3px); }

  /* ---------- Founder (under the contact form) ---------- */
  .founder {
    display: flex; gap: 20px; align-items: flex-start;
    margin-top: 40px; padding-top: 32px;
    border-top: 1px solid var(--border);
  }
  .founder-photo {
    width: 84px; height: 84px; border-radius: 14px; flex-shrink: 0;
    object-fit: cover; object-position: top;
  }
  .founder-copy h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
  .founder-copy p { font-size: 14.5px; color: var(--ink-soft); }
  .founder-meta { margin-top: 10px; }
  .founder-meta a {
    font-weight: 700; color: var(--ink); text-decoration: none;
    padding: 6px 0; transition: color .15s ease;
  }
  .founder-meta a:hover { color: var(--accent-warm-ink); }

  /* ---------- Paperclip assistant ---------- */
  .clippy {
    position: fixed; right: 22px; bottom: 22px; z-index: 950;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    opacity: 0; transform: translateY(18px); pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
  }
  .clippy.show { opacity: 1; transform: none; pointer-events: auto; }
  .clippy-bubble {
    background: #FFFBEA; border: 1px solid #E8DCA8; border-radius: 14px;
    padding: 16px 18px 14px; max-width: 250px;
    box-shadow: 0 12px 28px rgba(12, 13, 15, .14);
    position: relative;
  }
  .clippy-bubble::after {
    content: ""; position: absolute; bottom: -8px; right: 26px;
    width: 14px; height: 14px; background: #FFFBEA;
    border-right: 1px solid #E8DCA8; border-bottom: 1px solid #E8DCA8;
    transform: rotate(45deg);
  }
  .clippy-bubble p { font-size: 14.5px; line-height: 1.45; margin: 0 0 12px; color: var(--ink); }
  .clippy-actions { display: flex; gap: 8px; }
  .clippy-actions button {
    font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
    border-radius: 999px; padding: 7px 14px; min-height: 32px;
    transition: background .15s ease, color .15s ease;
  }
  .clippy-yes { background: var(--accent-strong); color: #fff; border: 1px solid var(--accent-strong); }
  .clippy-yes:hover { background: var(--black); border-color: var(--black); }
  .clippy-no { background: none; color: var(--ink-soft); border: 1px solid var(--border); }
  .clippy-no:hover { color: var(--ink); border-color: var(--ink-faint); }
  .clippy-char { margin-right: 16px; animation: clippy-wiggle 6s ease-in-out 1s infinite; transform-origin: 50% 85%; }
  @keyframes clippy-wiggle {
    0%, 86%, 100% { transform: rotate(0); }
    90% { transform: rotate(-5deg); }
    94% { transform: rotate(4deg); }
    98% { transform: rotate(-2deg); }
  }
  @media (max-width: 640px) {
    .clippy { right: 14px; bottom: 14px; }
    .clippy-bubble { max-width: 220px; }
  }