/*
Theme Name:  Warringah Certifiers
Theme URI:   https://warringahcertifiers.com.au
Author:      Custom
Description: Custom theme for Warringah Certifiers — Building & Pool Barrier Certification
Version:     1.2.0
License:     GNU General Public License v2 or later
Text Domain: warringah-certifiers
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    :root {
      --navy:       #0e2336;
      --navy-mid:   #19405e;
      --teal:       #0d7d95;
      --aqua:       #27b5c8;
      --aqua-light: #e0f5f8;
      --cream:      #f7f4f0;
      --white:      #ffffff;
      --amber:      #d9891a;
      --amber-lt:   #fef3e2;
      --text:       #1e2d3d;
      --text-mid:   #4a6880;
      --text-light: #7b9db0;
      --border:     #d1e8f0;
      --sh:         0 4px 24px rgba(13,35,54,.10);
      --sh-lg:      0 8px 48px rgba(13,35,54,.15);
    }

    body { font-family:'Outfit',sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; }
    h1,h2,h3,h4 { font-family:'Fraunces',serif; font-weight:600; line-height:1.2; }
    h1 { font-size:clamp(2.4rem,5vw,4.5rem); }
    h2 { font-size:clamp(1.8rem,3vw,2.8rem); }
    h3 { font-size:clamp(1.2rem,2vw,1.7rem); }
    p  { line-height:1.75; color:var(--text-mid); }
    a  { text-decoration:none; color:inherit; }

    .container { max-width:1200px; margin:0 auto; padding:0 2rem; }

    .tag {
      display:inline-block; font-size:.72rem; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase;
      color:var(--teal); background:var(--aqua-light);
      padding:.35rem .9rem; border-radius:2rem; margin-bottom:1rem;
    }

    /* ── BUTTONS ── */
    .btn {
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.85rem 2rem; border-radius:4px;
      font-family:'Outfit',sans-serif; font-weight:600;
      font-size:.9rem; letter-spacing:.03em;
      cursor:pointer; transition:all .25s; border:none;
    }
    .btn-amber  { background:var(--amber); color:#fff; }
    .btn-amber:hover  { background:#bf7312; transform:translateY(-2px); box-shadow:0 6px 20px rgba(217,137,26,.4); }
    .btn-outline{ border:2px solid #fff; color:#fff; background:transparent; }
    .btn-outline:hover { background:#fff; color:var(--navy); }
    .btn-teal   { background:var(--teal); color:#fff; }
    .btn-teal:hover   { background:#0a6678; transform:translateY(-2px); }
    .btn-white  { background:#fff; color:var(--teal); font-weight:700; }
    .btn-white:hover  { background:var(--aqua-light); }

    /* ═══════════════════════════════
       HEADER
    ═══════════════════════════════ */
    .site-header {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      background:rgba(14,35,54,.97); backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .header-top { background:var(--teal); padding:.42rem 0; }
    .header-top .container { display:flex; justify-content:flex-end; gap:2.5rem; }
    .header-top a {
      color:#fff; font-size:.82rem; font-weight:500;
      display:flex; align-items:center; gap:.4rem;
      opacity:.88; transition:opacity .2s;
    }
    .header-top a:hover { opacity:1; }

    .header-main .container {
      display:flex; align-items:center;
      justify-content:space-between; padding:.9rem 2rem;
    }
    .logo { display:flex; flex-direction:column; gap:.1rem; }
    .logo-name {
      font-family:'Fraunces',serif; font-size:1.45rem;
      font-weight:700; color:#fff; letter-spacing:-.02em;
    }
    .logo-name span { color:var(--aqua); }
    .logo-sub { font-size:.67rem; color:var(--text-light); letter-spacing:.1em; text-transform:uppercase; }

    .main-nav { display:flex; list-style:none; gap:.2rem; align-items:center; }
    .main-nav a {
      color:rgba(255,255,255,.72); font-size:.875rem; font-weight:500;
      padding:.5rem .9rem; border-radius:4px; transition:all .2s;
    }
    .main-nav a:hover  { color:#fff; background:rgba(255,255,255,.08); }
    .nav-cta a { background:var(--amber)!important; color:#fff!important; padding:.5rem 1.2rem!important; }
    .nav-cta a:hover  { background:#bf7312!important; }

    .hamburger {
      display:none; flex-direction:column; gap:5px;
      cursor:pointer; padding:.5rem; background:none; border:none;
    }
    .hamburger span { width:22px; height:2px; background:#fff; border-radius:2px; transition:all .3s; display:block; }

    /* ═══════════════════════════════
       HERO
    ═══════════════════════════════ */
    #home {
      min-height:100vh; background:var(--navy);
      position:relative; display:flex; align-items:center;
      overflow:hidden;
    }
    .hero-bg {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(13,125,149,.28) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 15% 85%, rgba(39,181,200,.13) 0%, transparent 50%),
        linear-gradient(135deg,#0e2336 0%,#0e2e46 55%,#0a2540 100%);
    }
    .hero-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(13,125,149,.07) 1px, transparent 1px),
        linear-gradient(90deg,rgba(13,125,149,.07) 1px,transparent 1px);
      background-size:60px 60px;
    }
    .hero-ring {
      position:absolute; right:-5%; top:50%; transform:translateY(-50%);
      width:640px; height:640px;
      border:1px solid rgba(39,181,200,.1); border-radius:50%;
    }
    .hero-ring::before {
      content:''; position:absolute; inset:70px;
      border:1px solid rgba(39,181,200,.07); border-radius:50%;
    }
    .hero-ring::after {
      content:''; position:absolute; inset:140px;
      border:1px solid rgba(39,181,200,.05); border-radius:50%;
    }

    .hero-inner { position:relative; z-index:2; padding:8rem 2rem 6rem; max-width:1200px; margin:0 auto; width:100%; }

    .hero-eyebrow { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; }
    .hero-eyebrow span { font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--aqua); }
    .eyebrow-line { width:40px; height:2px; background:var(--teal); flex-shrink:0; }

    .hero-title { color:#fff; font-weight:700; margin-bottom:1.25rem; max-width:700px; }
    .hero-title em { font-style:italic; color:var(--aqua); }
    .hero-sub { font-size:1.1rem; color:rgba(255,255,255,.62); margin-bottom:2.5rem; font-weight:300; max-width:560px; }

    .hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:4rem; }

    .hero-stats {
      display:inline-grid; grid-template-columns:repeat(3,1fr);
      border:1px solid rgba(255,255,255,.08); border-radius:8px;
      overflow:hidden; background:rgba(255,255,255,.04);
    }
    .hstat {
      padding:1.2rem 1.75rem;
      background:rgba(14,35,54,.55);
      backdrop-filter:blur(10px);
      border-right:1px solid rgba(255,255,255,.06);
    }
    .hstat:last-child { border-right:none; }
    .hstat-num { font-family:'Fraunces',serif; font-size:1.7rem; font-weight:700; color:var(--aqua); line-height:1; margin-bottom:.25rem; }
    .hstat-lbl { font-size:.7rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.06em; }

    /* ═══════════════════════════════
       ABOUT
    ═══════════════════════════════ */
    #about { padding:7rem 0; background:var(--white); }
    .about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }

    .about-visual { position:relative; }
    .about-img {
      width:100%; aspect-ratio:4/3; border-radius:10px;
      background:linear-gradient(135deg,var(--navy-mid) 0%,var(--teal) 100%);
      display:flex; align-items:center; justify-content:center;
      font-size:5rem; position:relative; overflow:hidden;
    }
    .about-img::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
      background-size:30px 30px;
    }
    .about-badge {
      position:absolute; bottom:-1.75rem; right:-1.75rem;
      background:var(--amber); color:#fff;
      padding:1.3rem 1.6rem; border-radius:10px;
      text-align:center; box-shadow:var(--sh-lg);
    }
    .badge-num { font-family:'Fraunces',serif; font-size:2rem; font-weight:700; line-height:1; display:block; }
    .badge-txt { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }

    .about-txt h2 { color:var(--navy); margin-bottom:1.1rem; }

    .about-tiles { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:2rem 0; }
    .about-tile {
      display:flex; align-items:flex-start; gap:.7rem;
      padding:.9rem; background:var(--cream);
      border-radius:6px; border-left:3px solid var(--teal);
    }
    .tile-ico { font-size:1.2rem; flex-shrink:0; }
    .about-tile p { font-size:.82rem; font-weight:500; color:var(--text); margin:0; line-height:1.4; }

    /* ═══════════════════════════════
       SERVICES GRID
    ═══════════════════════════════ */
    #services { padding:7rem 0; background:var(--cream); }
    .sec-hd { text-align:center; max-width:600px; margin:0 auto 3.5rem; }
    .sec-hd h2 { color:var(--navy); margin-bottom:.75rem; }

    .svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .svc-card {
      background:#fff; border-radius:8px; padding:2rem 1.5rem;
      border:1px solid var(--border); transition:all .3s; position:relative; overflow:hidden;
    }
    .svc-card::after {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg,var(--teal),var(--aqua));
      transform:scaleX(0); transition:transform .3s; transform-origin:left;
    }
    .svc-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:transparent; }
    .svc-card:hover::after { transform:scaleX(1); }
    .svc-ico {
      width:52px; height:52px; background:var(--aqua-light); border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:1.5rem; margin-bottom:1.2rem; transition:background .3s;
    }
    .svc-card:hover .svc-ico { background:var(--teal); }
    .svc-card h3 { font-family:'Outfit',sans-serif; font-weight:600; font-size:.98rem; color:var(--navy); margin-bottom:.45rem; }
    .svc-card p  { font-size:.82rem; line-height:1.55; }

    /* ═══════════════════════════════
       RESIDENTIAL
    ═══════════════════════════════ */
    #residential { padding:7rem 0; background:#fff; }
    .two-col { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .content-block h2 { color:var(--navy); margin-bottom:1rem; }

    .badges { display:flex; gap:.8rem; flex-wrap:wrap; margin:1.5rem 0; }
    .cbadge { background:var(--navy); color:#fff; padding:.5rem 1.2rem; border-radius:4px; font-size:.82rem; font-weight:700; letter-spacing:.04em; }
    .cbadge.t { background:var(--teal); }

    .dot-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin:1.5rem 0; }
    .dot-list li { display:flex; align-items:center; gap:.65rem; font-size:.88rem; color:var(--text); }
    .dot-list li::before { content:''; width:8px; height:8px; background:var(--teal); border-radius:50%; flex-shrink:0; }

    .vis-block {
      border-radius:12px; aspect-ratio:4/3;
      background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,var(--teal) 100%);
      display:flex; align-items:center; justify-content:center;
      position:relative; overflow:hidden;
    }
    .vis-block::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:40px 40px;
    }
    .vis-ghost {
      font-family:'Fraunces',serif; font-size:7rem; font-weight:700;
      color:rgba(255,255,255,.06); position:absolute; line-height:1;
    }
    .vis-icon { font-size:4rem; position:relative; z-index:1; }

    /* ═══════════════════════════════
       POOL BARRIERS
    ═══════════════════════════════ */
    #pool-barriers {
      padding:7rem 0; background:var(--navy);
      position:relative; overflow:hidden;
    }
    #pool-barriers::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(39,181,200,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(39,181,200,.04) 1px,transparent 1px);
      background-size:60px 60px;
    }
    #pool-barriers .sec-hd { position:relative; z-index:1; }
    #pool-barriers .tag   { background:rgba(39,181,200,.14); color:var(--aqua); }
    #pool-barriers h2     { color:#fff; }
    #pool-barriers .sec-hd p { color:rgba(255,255,255,.58); }

    .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; z-index:1; margin-bottom:3.5rem; }
    .step {
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      border-radius:8px; padding:2rem; position:relative; transition:all .3s;
    }
    .step:hover { background:rgba(255,255,255,.07); border-color:rgba(39,181,200,.28); }
    .step-n { font-family:'Fraunces',serif; font-size:3.5rem; font-weight:700; color:rgba(39,181,200,.14); line-height:1; position:absolute; top:1.2rem; right:1.5rem; }
    .step-ico { font-size:1.75rem; margin-bottom:1rem; }
    .step h3 { font-family:'Outfit',sans-serif; font-weight:600; font-size:.98rem; color:#fff; margin-bottom:.7rem; }
    .step p  { font-size:.83rem; color:rgba(255,255,255,.54); line-height:1.6; }

    .nc-wrap { position:relative; z-index:1; }
    .nc-title { font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); margin-bottom:1.5rem; }
    .nc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .nc-item {
      display:flex; align-items:flex-start; gap:1rem;
      padding:1.25rem; background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06); border-radius:6px;
    }
    .nc-num {
      background:var(--teal); color:#fff;
      width:28px; height:28px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:700; flex-shrink:0; margin-top:.1rem;
    }
    .nc-item p { font-size:.81rem; color:rgba(255,255,255,.57); line-height:1.55; margin:0; }

    /* ═══════════════════════════════
       PROPERTY SALE BANNER
    ═══════════════════════════════ */
    #cta-banner {
      padding:4.5rem 0; background:var(--teal); text-align:center;
    }
    #cta-banner .tag { background:rgba(255,255,255,.16); color:#fff; }
    #cta-banner h2   { color:#fff; margin-bottom:1rem; }
    #cta-banner p    { color:rgba(255,255,255,.78); max-width:640px; margin:0 auto 2rem; }

    /* ═══════════════════════════════
       FEES
    ═══════════════════════════════ */
    #fees { padding:7rem 0; background:var(--cream); }
    .fees-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .fee-card {
      background:#fff; border-radius:10px; padding:2.5rem 2rem;
      border:2px solid var(--border); text-align:center;
      transition:all .3s; position:relative;
    }
    .fee-card.feat { border-color:var(--teal); background:var(--navy); }
    .fee-card:hover:not(.feat) { border-color:var(--teal); transform:translateY(-5px); box-shadow:var(--sh); }

    .fee-ribbon {
      position:absolute; top:-.75rem; left:50%; transform:translateX(-50%);
      background:var(--teal); color:#fff;
      font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      padding:.28rem 1rem; border-radius:2rem; white-space:nowrap;
    }
    .fee-ico { font-size:2.5rem; margin-bottom:1rem; }
    .fee-card h3 { font-family:'Outfit',sans-serif; font-weight:600; font-size:.98rem; color:var(--navy); margin-bottom:.7rem; }
    .fee-card.feat h3 { color:rgba(255,255,255,.78); }
    .fee-card p  { font-size:.81rem; line-height:1.55; margin-bottom:1.5rem; }
    .fee-card.feat p { color:rgba(255,255,255,.48); }
    .fee-price { font-family:'Fraunces',serif; font-size:2.5rem; font-weight:700; color:var(--teal); line-height:1; display:block; }
    .fee-card.feat .fee-price { color:var(--aqua); }
    .fee-note { font-size:.73rem; color:var(--text-light); margin-top:.3rem; display:block; }
    .fee-card.feat .fee-note  { color:rgba(255,255,255,.32); }

    /* ═══════════════════════════════
       TESTIMONIALS
    ═══════════════════════════════ */
    #testimonials { padding:7rem 0; background:#fff; }
    .test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    .test-card {
      background:var(--cream); border-radius:10px; padding:2rem;
      border:1px solid var(--border); position:relative; transition:box-shadow .3s;
    }
    .test-card:hover { box-shadow:var(--sh); }
    .qmark { font-family:'Fraunces',serif; font-size:5rem; line-height:.5; color:var(--teal); opacity:.18; position:absolute; top:1.5rem; right:1.5rem; }
    .stars { color:var(--amber); font-size:.85rem; margin-bottom:.6rem; }
    .test-body { font-size:.88rem; font-style:italic; color:var(--text); line-height:1.72; margin-bottom:1.5rem; }
    .test-author { display:flex; align-items:center; gap:.75rem; }
    .author-av {
      width:40px; height:40px; border-radius:50%;
      background:linear-gradient(135deg,var(--teal),var(--navy-mid));
      display:flex; align-items:center; justify-content:center;
      font-size:1rem; flex-shrink:0;
    }
    .author-name { font-weight:600; font-size:.88rem; color:var(--navy); }
    .author-loc  { font-size:.76rem; color:var(--text-light); }

    /* ═══════════════════════════════
       ABOUT BEN
    ═══════════════════════════════ */
    #team { padding:7rem 0; background:var(--aqua-light); }
    .team-card {
      max-width:900px; margin:0 auto;
      background:#fff; border-radius:16px; padding:3.5rem;
      display:grid; grid-template-columns:auto 1fr; gap:3rem;
      align-items:start; box-shadow:var(--sh-lg);
    }
    .team-av {
      width:160px; height:160px;
      background:linear-gradient(135deg,var(--navy),var(--teal));
      border-radius:16px; display:flex; align-items:center;
      justify-content:center; font-size:4rem; flex-shrink:0;
      position:relative;
    }
    .team-av::after {
      content:'Principal Certifier'; position:absolute;
      bottom:-.85rem; left:50%; transform:translateX(-50%);
      background:var(--teal); color:#fff;
      font-size:.63rem; font-weight:700; letter-spacing:.05em;
      padding:.3rem .9rem; border-radius:2rem; white-space:nowrap;
    }
    .team-info h2 { color:var(--navy); margin-bottom:.2rem; }
    .team-role  { color:var(--teal); font-weight:600; font-size:.95rem; margin-bottom:1.25rem; }
    .creds { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0; }
    .cred {
      background:var(--aqua-light); border:1px solid var(--border);
      color:var(--teal); font-size:.76rem; font-weight:600;
      padding:.35rem .85rem; border-radius:4px;
    }

    /* ═══════════════════════════════
       CONTACT
    ═══════════════════════════════ */
    #contact {
      padding:7rem 0; background:var(--navy);
      position:relative; overflow:hidden;
    }
    #contact::before {
      content:''; position:absolute; bottom:-80px; right:-80px;
      width:560px; height:560px;
      background:radial-gradient(circle,rgba(13,125,149,.18) 0%,transparent 70%);
      pointer-events:none;
    }
    .contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; position:relative; z-index:1; }
    #contact h2 { color:#fff; margin-bottom:1.2rem; }
    #contact > .container > .contact-wrap > div > p { color:rgba(255,255,255,.58); }
    #contact .tag { background:rgba(39,181,200,.14); color:var(--aqua); }

    .c-details { display:flex; flex-direction:column; gap:1.25rem; margin:2.5rem 0; }
    .c-item { display:flex; align-items:center; gap:1rem; }
    .c-ico {
      width:44px; height:44px; background:rgba(255,255,255,.07);
      border-radius:8px; display:flex; align-items:center; justify-content:center;
      font-size:1.1rem; flex-shrink:0;
    }
    .c-lbl { font-size:.68rem; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.08em; }
    .c-val { color:#fff; font-size:.95rem; }
    .c-val a { color:var(--aqua); font-weight:500; transition:color .2s; }
    .c-val a:hover { color:#fff; }

    .contact-btns { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.75rem 0 2rem; }
    .btn-outline-aqua {
      border:2px solid var(--aqua); color:var(--aqua); background:transparent;
      padding:.85rem 2rem; border-radius:4px;
      font-family:'Outfit',sans-serif; font-weight:600; font-size:.9rem;
      display:inline-flex; align-items:center; gap:.5rem;
      transition:all .25s; cursor:pointer;
    }
    .btn-outline-aqua:hover { background:var(--aqua); color:var(--navy); }

    .areas h3 { font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); margin-bottom:1.1rem; }
    .area-group { margin-bottom:1.6rem; }
    .area-group-name { font-weight:600; font-size:.84rem; color:rgba(255,255,255,.78); margin-bottom:.6rem; }
    .tags { display:flex; flex-wrap:wrap; gap:.4rem; }
    .atag { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.52); font-size:.73rem; padding:.25rem .6rem; border-radius:3px; }

    /* ═══════════════════════════════
       FOOTER
    ═══════════════════════════════ */
    .site-footer { background:#07182a; padding:4rem 0 2rem; border-top:1px solid rgba(255,255,255,.06); }
    .footer-wrap { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
    .flogo { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:#fff; }
    .flogo span { color:var(--aqua); }
    .fsub { font-size:.66rem; color:rgba(255,255,255,.28); letter-spacing:.09em; text-transform:uppercase; margin-top:.2rem; }
    .fdesc { font-size:.83rem; color:rgba(255,255,255,.42); margin-top:1rem; line-height:1.65; }
    .faccreds { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
    .facc { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:.72rem; padding:.25rem .7rem; border-radius:3px; }
    .fcol h4 { font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:1.25rem; }
    .flinks { list-style:none; }
    .flinks li { margin-bottom:.6rem; }
    .flinks a { color:rgba(255,255,255,.52); font-size:.875rem; transition:color .2s; }
    .flinks a:hover { color:var(--aqua); }
    .fbot {
      border-top:1px solid rgba(255,255,255,.07); padding-top:2rem;
      display:flex; justify-content:space-between; align-items:center;
      font-size:.78rem; color:rgba(255,255,255,.28);
    }
    .fbot a { color:rgba(255,255,255,.38); transition:color .2s; }
    .fbot a:hover { color:var(--aqua); }

    /* ═══════════════════════════════
       SCROLL ANIMATIONS
    ═══════════════════════════════ */
    .fade { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
    .fade.on { opacity:1; transform:none; }

    /* ═══════════════════════════════
       CONTACT FORM
    ═══════════════════════════════ */
    .contact-wrap { grid-template-columns: 1fr 1.3fr; }

    .form-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 2.25rem;
    }
    .form-card h3 {
      font-family: 'Outfit', sans-serif;
      font-weight: 600; font-size: 1.05rem;
      color: #fff; margin-bottom: 1.5rem;
    }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
    .form-group label {
      font-size: .75rem; font-weight: 600;
      letter-spacing: .06em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 6px;
      padding: .75rem 1rem;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: .9rem;
      outline: none;
      transition: border-color .2s, background .2s;
      -webkit-appearance: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(255,255,255,.25); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--aqua);
      background: rgba(255,255,255,.1);
    }
    .form-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }
    .form-group select option { background: #1a3050; color: #fff; }
    .form-group textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

    .form-submit {
      width: 100%; padding: .95rem;
      background: var(--amber); color: #fff;
      border: none; border-radius: 6px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700; font-size: .95rem;
      letter-spacing: .03em; cursor: pointer;
      transition: background .25s, transform .2s;
      margin-top: .25rem;
    }
    .form-submit:hover { background: #bf7312; transform: translateY(-2px); }
    .form-submit:disabled { background: rgba(255,255,255,.2); cursor: not-allowed; transform: none; }

    /* Success / error messages */
    .form-msg {
      display: none; padding: 1rem 1.25rem;
      border-radius: 6px; font-size: .88rem;
      font-weight: 500; margin-top: 1rem; line-height: 1.5;
    }
    .form-msg.success {
      display: block;
      background: rgba(39,181,200,.15);
      border: 1px solid rgba(39,181,200,.3);
      color: var(--aqua);
    }
    .form-msg.error {
      display: block;
      background: rgba(220,80,60,.15);
      border: 1px solid rgba(220,80,60,.3);
      color: #f08070;
    }

    /* ═══════════════════════════════
       STICKY MOBILE CTA
    ═══════════════════════════════ */
    .sticky-cta {
      display:none; position:fixed; bottom:0; left:0; right:0; z-index:998;
      background:rgba(14,35,54,.97); backdrop-filter:blur(12px);
      padding:.75rem 1rem; gap:.6rem;
      border-top:1px solid rgba(255,255,255,.1);
      box-shadow:0 -4px 24px rgba(13,35,54,.35);
    }
    .sticky-cta a {
      flex:1; text-align:center; padding:.85rem 1rem;
      border-radius:6px; font-family:'Outfit',sans-serif;
      font-weight:700; font-size:.88rem; letter-spacing:.03em;
    }
    .sticky-cta .cta-call  { background:var(--amber); color:#fff; }
    .sticky-cta .cta-email { background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.15); }

    /* ─── Testimonial scroll dots ─── */
    .test-dots { display:none; justify-content:center; gap:.5rem; margin-top:1.25rem; }
    .test-dot  {
      width:8px; height:8px; border-radius:50%;
      background:var(--border); border:none; cursor:pointer;
      padding:0; transition:background .2s, width .2s;
    }
    .test-dot.active { background:var(--teal); width:22px; border-radius:4px; }

    /* ═══════════════════════════════
       RESPONSIVE — TABLET 1024px
    ═══════════════════════════════ */
    @media (max-width:1024px) {
      .svc-grid  { grid-template-columns:repeat(2,1fr); }
      .fees-grid { grid-template-columns:repeat(2,1fr); }
      .test-grid { grid-template-columns:repeat(2,1fr); }
      .steps     { grid-template-columns:repeat(2,1fr); }
      .two-col   { gap:3rem; }
      .about-wrap { gap:3rem; }
    }

    /* ═══════════════════════════════
       RESPONSIVE — MOBILE 768px
    ═══════════════════════════════ */
    @media (max-width:768px) {
      /* Global spacing */
      .container { padding:0 1.25rem; }
      #about, #services, #residential,
      #fees, #testimonials, #team { padding:4.5rem 0; }
      #pool-barriers, #contact     { padding:4.5rem 0; }
      #cta-banner                  { padding:3rem 0; }
      .sec-hd { margin-bottom:2.5rem; }

      /* ── Header ── */
      .hamburger { display:flex; }
      .main-nav  { display:none; }
      .main-nav.open {
        display:flex; flex-direction:column; gap:.15rem;
        position:absolute; top:100%; left:0; right:0;
        background:rgba(14,35,54,.98); backdrop-filter:blur(14px);
        padding:1rem 1.25rem 1.5rem; border-top:1px solid rgba(255,255,255,.08);
        max-height:calc(100dvh - 120px); overflow-y:auto;
      }
      .main-nav.open li a {
        display:block; padding:.9rem 1rem; border-radius:6px;
        font-size:.95rem; border-bottom:1px solid rgba(255,255,255,.05);
        color:rgba(255,255,255,.78);
      }
      .main-nav.open li:last-child a { border-bottom:none; }
      .nav-cta a { text-align:center; margin-top:.5rem !important; }
      /* Hamburger → X */
      .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
      .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
      .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

      /* ── Hero ── */
      .hero-inner { padding:6.5rem 1.25rem 2.5rem; }
      .hero-sub   { font-size:1rem; max-width:100%; }
      .hero-btns  { flex-direction:column; gap:.75rem; margin-bottom:2.5rem; }
      .hero-btns .btn { width:100%; justify-content:center; font-size:.95rem; }
      .hero-stats { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
      .hstat      { padding:.9rem .75rem; }
      .hstat-num  { font-size:1.3rem; }
      .hstat-lbl  { font-size:.62rem; }
      .hero-ring  { display:none; }

      /* ── About ── */
      .about-wrap  { grid-template-columns:1fr; gap:3rem; }
      .about-img   { aspect-ratio:16/7; font-size:3.5rem; }
      .about-badge { bottom:-1rem; right:1rem; padding:1rem 1.2rem; }
      .badge-num   { font-size:1.6rem; }
      .about-tiles { grid-template-columns:1fr; }

      /* ── Services ── */
      .svc-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
      .svc-card { padding:1.5rem 1.25rem; }

      /* ── Residential ── */
      .two-col   { grid-template-columns:1fr; gap:2rem; }
      .vis-block { display:none; }
      .dot-list  { grid-template-columns:1fr; }

      /* ── Pool barriers ── */
      .steps   { grid-template-columns:1fr; gap:1rem; }
      .nc-grid { grid-template-columns:1fr; }

      /* ── Fees ── */
      .fees-grid { grid-template-columns:1fr 1fr; gap:1rem; }
      .fee-card  { padding:2rem 1.25rem; }

      /* ── Testimonials: horizontal snap scroll ── */
      .test-grid {
        display:flex; overflow-x:auto; gap:1rem;
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
        padding-bottom:.5rem; margin:0 -1.25rem; padding-left:1.25rem;
        padding-right:1.25rem; scrollbar-width:none;
      }
      .test-grid::-webkit-scrollbar { display:none; }
      .test-card { flex:0 0 80vw; max-width:320px; scroll-snap-align:start; }
      .test-dots { display:flex; }

      /* ── Team ── */
      .team-card {
        grid-template-columns:1fr; text-align:center;
        padding:2.5rem 1.75rem; gap:2rem;
      }
      .team-av { margin:0 auto; }
      .creds   { justify-content:center; }

      /* ── Contact ── */
      .contact-wrap  { grid-template-columns:1fr; gap:2.5rem; }
      .form-row      { grid-template-columns:1fr; }
      .contact-btns  { flex-direction:column; }
      .contact-btns .btn,
      .contact-btns .btn-outline-aqua { width:100%; justify-content:center; }

      /* ── Footer ── */
      .footer-wrap { grid-template-columns:1fr; gap:2rem; }
      .fbot { flex-direction:column; gap:.6rem; text-align:center; }
      .site-footer { padding-bottom:5rem; } /* room for sticky CTA */

      /* ── Sticky CTA ── */
      .sticky-cta { display:flex; }
    }

    /* ═══════════════════════════════
       RESPONSIVE — SMALL MOBILE 480px
    ═══════════════════════════════ */
    @media (max-width:480px) {
      h1 { font-size:2.05rem; }
      h2 { font-size:1.6rem; }

      /* Reduce section padding further */
      #about, #services, #residential,
      #fees, #testimonials, #team  { padding:3.5rem 0; }
      #pool-barriers, #contact     { padding:3.5rem 0; }

      /* Header top: phone only */
      .header-top .container { justify-content:center; }
      .header-top a:last-child { display:none; }

      /* Hero */
      .hero-inner { padding:6rem 1.25rem 2rem; }
      .hero-stats { grid-template-columns:1fr; }
      .hstat { border-right:none; border-bottom:1px solid rgba(255,255,255,.06); padding:.85rem 1.25rem; }
      .hstat:last-child { border-bottom:none; }

      /* Services: single column */
      .svc-grid  { grid-template-columns:1fr; }

      /* Fees: single column */
      .fees-grid { grid-template-columns:1fr; }
      .fee-card.feat { margin-top:.75rem; }

      /* Testimonials wider card */
      .test-card { flex:0 0 88vw; }

      /* Team avatar smaller */
      .team-card { padding:2rem 1.25rem; }
      .team-av   { width:120px; height:120px; font-size:3rem; }

      /* Non-compliance items */
      .nc-item { padding:1rem; }

      /* CTA banner */
      #cta-banner h2 { font-size:1.5rem; }
      #cta-banner p  { font-size:.88rem; }
    }

    /* ═══════════════════════════════
       RESPONSIVE — EXTRA SMALL 360px
    ═══════════════════════════════ */
    @media (max-width:360px) {
      .container { padding:0 1rem; }
      h1 { font-size:1.85rem; }
      .hero-btns .btn { padding:.8rem 1.5rem; font-size:.85rem; }
      .about-badge { right:.75rem; padding:.85rem 1rem; }
      .badge-num   { font-size:1.4rem; }
      .badge-txt   { font-size:.62rem; }
      .sticky-cta a { font-size:.82rem; padding:.8rem .75rem; }
    }