/* ============================================================
   Sparkez Electrical — site design system
   Palette: brand navy #001871 · white · brand orange #fa4c03
            (sampled from the logo — no other hues)
   Type:    Fraunces (display serif) + Source Sans 3 (text)
   Idea:    authority through restraint. White for air, navy for
            punctuation, orange strictly as signal — never as tint.
   ============================================================ */

:root{
  /* --- brand --- */
  --navy:#001871;         /* logo navy — CTA band, accents        */
  --ink:#0a1733;          /* text + deep surfaces                 */
  --ink-2:#00102e;        /* deepest ground — footer, dark bands  */
  --orange:#fa4c03;       /* logo orange — actions + marks only   */
  --orange-d:#d94102;
  --orange-ink:#ce3c02;   /* text + fills on light  — AA 4.92:1, closest to brand */
  --orange-ink-d:#ad3202; /* its hover                                          */
  --orange-lift:#ff7336;  /* text on mid-dark photographic grounds              */

  /* --- neutrals --- */
  --bg:#ffffff;           /* page is white now, not grey          */
  --surface:#ffffff;
  --tint:#f4f6fa;         /* alternating band                     */
  --tint-2:#eef1f7;       /* image placeholder / deeper tint      */
  --muted:#58637d;
  --muted-2:#8a93a8;
  --line:#e3e7f0;
  --line-dk:rgba(255,255,255,.14);

  /* --- metrics --- */
  --maxw:1180px;
  --sec:clamp(3.5rem, 9vw, 8.5rem);   /* generous on desktop, tighter on phones */
  --radius:8px;                        /* was 5px — softer, modern */
  --radius-lg:16px;

  /* ---- spacing scale (8px base). The ONLY spacing values used site-wide. ---- */
  --space-1:.25rem;    /*   4px */
  --space-2:.5rem;     /*   8px */
  --space-3:.75rem;    /*  12px */
  --space-4:1rem;      /*  16px */
  --space-5:1.5rem;    /*  24px */
  --space-6:2rem;      /*  32px */
  --space-7:3rem;      /*  48px */
  --space-8:4rem;      /*  64px */
  --space-9:6rem;      /*  96px */
  --space-10:8rem;     /* 128px */

  /* ---- responsive aliases: declared once here, re-pointed at the two
         breakpoints below. Components reference these, never a raw value. ---- */
  --gutter:var(--space-5);            /* container horizontal padding      */
  --section-y:var(--space-8);         /* section vertical padding          */
  --section-y-major:var(--space-8);   /* hero / major breaks               */
  --card-pad:var(--space-5);          /* card + panel inner padding        */
  --row-pad:var(--space-5);           /* service row card padding          */
  --grid-gap:var(--space-4);          /* gap between cards in a grid       */
  --head-gap:var(--space-6);          /* intro paragraph -> content below  */
  --media-gap:var(--space-3);         /* gallery / image grid gap          */
  --col-gap:var(--space-6);           /* two-column layout gap             */
  --footer-gap:var(--space-5);        /* footer column groups              */
  --tap:44px;                         /* WCAG touch minimum — not spacing  */

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shadow:0 18px 50px -28px rgba(10,23,51,.38);
  --shadow-lg:0 34px 80px -36px rgba(10,23,51,.45);
}


/* =========================================================
   Breakpoints — declared ONCE. mobile <=640 - tablet 641-1024 - desktop >=1025
   Only the spacing aliases change; components never restate a breakpoint.
   ========================================================= */
@media (min-width:641px){
  :root{ --gutter:var(--space-6); }
}
@media (min-width:1025px){
  :root{
    --gutter:var(--space-7);
    --section-y:var(--space-9);
    --section-y-major:var(--space-10);
    --card-pad:var(--space-6);
    --row-pad:var(--space-7);
    --grid-gap:var(--space-5);
    --head-gap:var(--space-7);
    --media-gap:var(--space-4);
    --col-gap:var(--space-8);
    --footer-gap:var(--space-6);
    --tap:38px;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.65;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.012em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);margin-block:0}
/* a page that opens on a breadcrumb instead of a hero needs less lead-in */
.alt{background:var(--tint)}
.narrow{max-width:760px}

/* ---- type helpers ---- */
.eyebrow{
  font-family:var(--text);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-ink);margin:0 0 var(--space-2);
  display:flex;align-items:center;gap:var(--space-2);
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.why .eyebrow,.quote .eyebrow{color:var(--orange)}  /* brand orange reads correctly on navy */
.sec-head.center .eyebrow{justify-content:center}
.lede{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--muted);line-height:1.6;max-width:52ch}
.h2{font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.018em}
.muted{color:var(--muted)}
.prose p{color:var(--muted);margin-bottom:var(--space-5);max-width:68ch}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--orange-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--orange-d)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);justify-content:center;
  padding:var(--space-3) var(--space-5);border-radius:999px;font-weight:600;font-size:1rem;
  border:1.5px solid transparent;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange-ink);color:#fff;border-color:var(--orange-ink)}
.btn-primary:hover{background:var(--orange-ink-d);border-color:var(--orange-ink-d)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.38)}
.btn-ghost.on-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:var(--space-3) var(--space-6);font-size:1.04rem}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:3px
}

/* =========================================================
   Header
   ========================================================= */
/* ---- skip link: off-screen until a keyboard user focuses it ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--navy);font-weight:600;padding:var(--space-3) var(--space-4);border-radius:0 0 var(--radius) 0;box-shadow:var(--shadow)}
.skip-link:focus{left:0}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:var(--space-5);min-height:76px;padding-block:var(--space-4)}
.brand{display:flex;align-items:center;min-height:var(--tap);gap:var(--space-3);margin-right:auto}
.brand img{width:44px;height:44px;border-radius:50%}
.brand-name{display:flex;flex-direction:column;align-items:center;font-family:var(--text);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;line-height:1;color:var(--ink);white-space:nowrap}
.brand-name span{display:block;text-align:center;font-family:var(--text);font-weight:600;font-size:.64rem;letter-spacing:.22em;color:var(--orange-ink);text-transform:uppercase;margin-top:.34em}
.nav{display:flex;align-items:center;gap:var(--space-2)}  /* +12px link padding each side = --space-6 between link text */
.nav a,.nav .dropdown>button{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-3);border-radius:var(--radius);font-weight:500;font-size:.98rem;color:var(--ink);background:none;border:none}
.nav a:hover,.nav .dropdown>button:hover{color:var(--orange-ink)}
.nav a[aria-current="page"]{color:var(--orange-ink);font-weight:600}
.dropdown{position:relative}
.dropdown>button::after{content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.dropdown[data-open="true"]>button::after{transform:translateY(1px) rotate(-135deg)}
.dropdown-menu{position:absolute;top:calc(100% + var(--space-2));left:0;min-width:226px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:var(--space-2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.dropdown[data-open="true"] .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:var(--space-3);border-radius:var(--radius);font-weight:500;font-size:.96rem}
.dropdown-menu a:hover{background:var(--tint);color:var(--orange-ink)}
.header-cta{display:flex;align-items:center;gap:var(--space-3)}
.header-quote{padding:var(--space-3) var(--space-5);font-size:.95rem}
.nav .header-fb{display:grid;place-items:center;margin-left:var(--space-4);width:var(--tap);height:var(--tap);padding:0;border-radius:50%;border-bottom:0;color:var(--ink);transition:background .16s,color .16s;flex:none}
.nav .header-fb .fb-label{display:none}
.nav .header-fb:hover{background:var(--orange);color:#fff}
.nav .header-fb svg{width:19px;height:19px}
.phone-btn{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--ink);padding:var(--space-3)}
.phone-btn:hover{color:var(--orange-ink)}
.phone-btn svg{width:17px;height:17px;flex:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;min-height:var(--tap);gap:var(--space-1);padding:var(--space-3);border:none;background:none;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.25s}

/* =========================================================
   Page hero (inner pages) — cinematic, photo-led
   ========================================================= */
.page-hero{position:relative;background:var(--ink-2);color:#fff;overflow:hidden;isolation:isolate}
.page-hero.has-img .page-hero-img{position:absolute;inset:0;z-index:-2}
.page-hero.has-img .page-hero-img img{width:100%;height:100%;object-fit:cover}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg, rgba(0,8,26,.92) 0%, rgba(0,8,26,.74) 38%, rgba(0,8,26,.34) 70%, rgba(0,8,26,.18) 100%),
    linear-gradient(180deg, rgba(0,8,26,.34) 0%, rgba(0,8,26,0) 30%, rgba(0,8,26,0) 72%, rgba(0,8,26,.42) 100%);
}
.page-hero .inner{position:relative;z-index:2;padding-block:var(--section-y-major)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:.85rem;color:#9fabc4;margin-bottom:var(--space-5)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:#6b7794}
.breadcrumb-light{color:var(--muted);margin-bottom:0}
.breadcrumb-light a:hover{color:var(--orange-ink)}
.breadcrumb-light span{color:var(--muted-2)}
.page-hero h1{font-size:clamp(2.4rem,5.2vw,4.1rem);color:#fff;letter-spacing:-.018em;line-height:1.04;max-width:16ch;text-wrap:balance}
.page-hero p:not(.eyebrow){margin-top:var(--space-4);font-size:clamp(1.05rem,1.5vw,1.22rem);color:#d6dcea;max-width:54ch;line-height:1.65}
.page-hero .hero-actions{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* =========================================================
   Credentials ribbon — the transition from hero photo to page
   Dark, compact, no boxes. Reads as a seal under the hero and
   hands off to the white page below.
   ========================================================= */
.creds{background:var(--ink-2);color:#fff;padding-block:var(--section-y);position:relative}
.creds::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(250,76,3,.55),transparent)}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.cred-tile{border-top:2px solid var(--orange);padding-top:var(--space-4)}
.cred-k{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.5rem);color:#fff;letter-spacing:-.015em;line-height:1.12}
.cred-v{margin:var(--space-2) 0 0;font-size:.86rem;color:#9fabc4;line-height:1.5}

/* =========================================================
   Section header
   ========================================================= */
.sec-head{max-width:640px;margin-bottom:var(--head-gap)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p:not(.eyebrow){margin-top:var(--space-4)}   /* the eyebrow is a <p> too — must not inherit the lede spacing */
.section-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--head-gap)}
.section-head-row .sec-head{margin-bottom:0}

/* =========================================================
   Services split (home)
   ========================================================= */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.service-card{
  position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(10,23,51,.5);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.service-card:hover{border-color:#cfd6e6;box-shadow:var(--shadow);transform:translateY(-3px)}
.service-card .pic{aspect-ratio:16/10;overflow:hidden;background:var(--tint-2)}
.service-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .pic img{transform:scale(1.045)}
.service-card .body{padding:var(--card-pad)}
.service-card h3{font-size:clamp(1.45rem,2.2vw,1.8rem)}
.service-card p{margin-top:var(--space-2);color:var(--muted)}
.service-card .card-note{margin-top:var(--space-3);font-size:.95rem}
.service-card .card-note strong{color:var(--ink)}
.service-card .more{margin-top:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--orange-ink)}
.service-card .more .arw{width:17px;height:17px;transition:transform .22s}
.service-card:hover .more .arw{transform:translateX(5px)}
.service-card .tag{position:absolute;top:var(--space-4);left:var(--space-4);background:rgba(0,16,46,.74);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:var(--space-1) var(--space-3);border-radius:6px;backdrop-filter:blur(4px)}

/* location-page intro: full-width lead-in that flows straight into the
   service rows below (one heading, no separate "what we do" block) */
/* location pages go straight from the hero into the services; these two
   links close the block and keep the electrical <-> air-con cross-link */
.loc-actions{margin-top:var(--head-gap);display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* =========================================================
   Service detail blocks — bigger photography, more air
   ========================================================= */
/* ---- service pages: white rows on a brand-navy ground ---- */
.svc-section .svc-row{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--row-pad);margin-bottom:var(--grid-gap);
  box-shadow:0 10px 30px -22px rgba(10,23,51,.5);
}
.svc-section .svc-row:last-of-type{margin-bottom:0}

.svc-row{display:grid;grid-template-columns:1fr 1.08fr;gap:var(--col-gap);align-items:center;padding-block:var(--space-7)}
.svc-row+.svc-row{border-top:1px solid var(--line)}
.svc-row .pic{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--tint-2)}
.svc-row .pic img{width:100%;height:100%;object-fit:cover}
/* for tall photos whose subject sits high in frame — keep the top, crop the bottom */
.svc-row .pic-top img{object-position:top}
.svc-row.reverse .txt{order:2}
.svc-row h3{font-size:clamp(1.55rem,2.8vw,2.15rem)}
.svc-row p{margin-top:var(--space-4);color:var(--muted);max-width:52ch}
.svc-row ul.ticks{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.svc-row ul.ticks li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--ink);font-weight:500}
.svc-row ul.ticks li::before{
  content:"";width:19px;height:19px;margin-top:3px;flex:none;border-radius:50%;
  background:rgba(250,76,3,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fa4c03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* =========================================================
   Why Sparkez — dark band
   ========================================================= */
.why{background:var(--ink-2);color:#fff}
.why-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--col-gap);align-items:start}
.why h2{color:#fff;font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.018em}
.why .lede{color:#c2cbdd;margin-top:var(--space-4)}
/* same language as the credentials ribbon: orange rule, serif head, no box */
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.why-item{display:block;padding:var(--space-4) 0 0;border-top:2px solid var(--orange);border-bottom:none}
.why-item:last-child{padding-bottom:0}
/* odd item count: let the last one span, so it reads deliberate not orphaned */
.why-item:last-child:nth-child(odd){grid-column:1/-1}
.why-item .tick{display:none}
.why-item h3{font-size:1.2rem;color:#fff;line-height:1.2}
.why-item p{color:#a0abc2;font-size:.93rem;margin-top:var(--space-2);line-height:1.6}

/* =========================================================
   Reviews
   ========================================================= */
.reviews{background:var(--tint)}
.rv-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-4)}
.rv-summary .stars{color:var(--orange-ink);letter-spacing:2px;font-size:1.15rem}
.rv-summary .score{font-family:var(--text);font-weight:600;font-size:1.1rem}
.rv-summary .txt{color:var(--muted);font-size:.95rem}
.rv-summary .rv-link{color:var(--orange-ink);font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.reviews-grid{columns:3 300px;column-gap:var(--grid-gap);margin-top:0}
.reviews-grid.is-carousel{columns:auto;column-gap:0}
.review{break-inside:avoid;margin:0 0 var(--grid-gap);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad)}
.review .stars{color:var(--orange-ink);letter-spacing:2px;font-size:1rem}
.review blockquote{margin:var(--space-4) 0 var(--space-5);font-size:1.06rem;line-height:1.62;color:var(--ink)}
.review .who{display:flex;align-items:center;gap:var(--space-3);border-top:1px solid var(--line);padding-top:var(--space-4)}
.review .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.82rem;flex:none}
.review .nm{font-weight:600;line-height:1.2}
.review .src{display:flex;align-items:center;gap:var(--space-1);font-size:.78rem;color:var(--muted);margin-top:var(--space-1)}
.review .src svg{width:13px;height:13px}
.rev-carousel{position:relative}
.rev-track{display:flex;gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .review{flex:0 0 calc((100% - 2 * var(--grid-gap)) / 3);scroll-snap-align:start;margin:0;display:flex;flex-direction:column}
.rev-track .review .who{margin-top:auto}
.rev-ctrls{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}
.rev-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.rev-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rev-btn:disabled{opacity:.32;cursor:default}
.rev-btn:disabled:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.rev-btn svg{width:20px;height:20px;pointer-events:none}

/* =========================================================
   Gallery
   ========================================================= */
.gal-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--media-gap)}
.gal-preview a{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);background:var(--tint-2);display:block}
.gal-preview img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal-preview a:hover img{transform:scale(1.05)}

.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--media-gap);align-items:start}
.photo-pair img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}
@media (max-width:640px){.photo-pair{grid-template-columns:1fr}}

.filters{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--head-gap)}
.filters button{padding:var(--space-3) var(--space-5);border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.92rem;color:var(--ink);transition:.18s}
.filters button:hover{border-color:var(--ink)}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--media-gap);align-items:start}
.g-item{aspect-ratio:var(--ar,1.333);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;position:relative;background:var(--tint-2)}
.g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.g-item:hover img{transform:scale(1.045)}
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,8,26,.94);display:none;align-items:center;justify-content:center;padding:var(--space-7)}
#lightbox.open{display:flex}
#lightbox img{max-width:92vw;max-height:82vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;transition:.18s}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn svg{width:22px;height:22px;pointer-events:none}
.lb-btn[data-lb="close"]{top:3vw;right:3vw;width:46px;height:46px}
.lb-btn[data-lb="prev"]{left:2vw;top:50%;transform:translateY(-50%)}
.lb-btn[data-lb="next"]{right:2vw;top:50%;transform:translateY(-50%)}

/* =========================================================
   Trust tiles (about)
   ========================================================= */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6) var(--grid-gap);margin-top:var(--head-gap)}
.trust-tile{background:none;border:none;border-top:2px solid var(--orange);border-radius:0;padding:var(--space-4) 0 0;box-shadow:none;transition:none}
.trust-tile:hover{border-color:var(--orange);box-shadow:none}
.trust-tile .tick{display:none}
.trust-tile h3{font-size:1.2rem;color:var(--ink);line-height:1.2}
.trust-tile p{margin-top:var(--space-2);color:var(--muted);font-size:.93rem;line-height:1.6}
@media (max-width:700px){.trust-grid{grid-template-columns:1fr;gap:var(--space-5)}}

/* about intro — split screen: copy left, one photo right.
   Photo keeps its natural aspect (no crop, no stretch). */
.about-split{display:grid;grid-template-columns:1fr clamp(280px,30vw,400px);gap:var(--col-gap);align-items:start;margin-top:var(--space-5)}
.about-split .sec-head{max-width:none;margin-bottom:var(--space-5)}
.about-copy h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:var(--space-4)}  /* subordinate to the hero h1, dominant over the copy */
.about-split .prose p{max-width:none}
/* box stretches to the copy's exact height so the photo's top sits on the
   eyebrow and its bottom on the last line; the column width is chosen so the
   box lands on ~3:4 — the photo's own ratio — so almost nothing is cropped */
.about-photo{align-self:start;position:sticky;top:calc(84px + var(--space-5));aspect-ratio:3/4;height:auto}  /* follows the longer copy instead of stretching to a sliver */
.about-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);display:block}
@media (max-width:860px){
  .about-split{grid-template-columns:1fr}
  .about-photo{position:static;aspect-ratio:auto;height:auto;max-width:360px}
  .about-photo img{height:auto}
}

/* =========================================================
   Service area
   ========================================================= */
.area-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--col-gap);align-items:center}
.area-switch{display:inline-flex;gap:var(--space-1);margin-bottom:var(--space-5);padding:var(--space-1);background:#fff;border:1px solid var(--line);border-radius:999px}
.area-switch button{padding:var(--space-3) var(--space-5);border:none;border-radius:999px;background:none;font-weight:600;font-size:.92rem;color:var(--muted);transition:background .15s,color .15s}
.area-switch button:hover{color:var(--ink)}
.area-switch button.is-on{background:var(--ink);color:#fff}
.suburbs[hidden]{display:none}
.suburbs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--space-5)}
.suburbs li a,.suburbs li span{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-weight:500;transition:color .15s}
.suburbs li a:hover{color:var(--orange-ink)}
.suburbs li a::before,.suburbs li span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.alt .suburbs li a,.alt .suburbs li span{border-bottom-color:#dde3ee}

.areas-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.area-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);transition:border-color .22s,transform .22s,box-shadow .22s}
.area-card:hover{border-color:#cfd6e6;transform:translateY(-3px);box-shadow:var(--shadow)}
.area-card h3{font-size:1.3rem}
.area-card p{margin-top:var(--space-2);color:var(--muted);font-size:.93rem}
.area-links{margin-top:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap}
.area-links a{font-weight:600;font-size:.85rem;color:var(--orange-ink);padding:var(--space-3) var(--space-4);border:1.5px solid var(--line);border-radius:999px;transition:.15s}
.area-links a:hover{background:var(--orange-ink);color:#fff;border-color:var(--orange-ink)}

/* =========================================================
   Forms
   ========================================================= */
.quote{background:var(--ink-2);color:#fff}
.quote-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--col-gap);align-items:start}
.quote h2{color:#fff;font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.018em}
.quote .lede{color:#c2cbdd;margin-top:var(--space-4)}
.quote-aside{margin-top:var(--space-6);display:grid;gap:var(--space-4)}
.quote-aside a,.quote-aside .row{display:flex;align-items:center;gap:var(--space-3);color:#fff;font-weight:600}
.quote-aside .ic{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none}
.quote-aside .ic svg{width:18px;height:18px}
.quote-aside a:hover .ic{background:rgba(250,76,3,.22)}
.quote-aside small{display:block;color:#9aa6be;font-weight:400;font-size:.82rem}
.quote-aside small a{color:#c3cce0;text-decoration:underline}

.form-card{background:#fff;border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow-lg);color:var(--ink)}
.form-head{margin-bottom:var(--space-5)}
.form-head h2,.form-head h3{font-size:1.6rem;color:var(--ink)}
.form-head p{margin-top:var(--space-2);color:var(--muted);font-size:.96rem}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-weight:600;font-size:.92rem;color:var(--ink);margin-bottom:var(--space-2)}
.field label .req{color:var(--orange-ink)}
.field input,.field textarea{width:100%;padding:var(--space-3) var(--space-4);border:1.5px solid var(--line);border-radius:var(--radius);font:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(250,76,3,.14)}
.field textarea{resize:vertical;min-height:124px}
.form-card .btn{width:100%;margin-top:var(--space-2)}
.form-note{margin-top:var(--space-3);font-size:.84rem;color:var(--muted);text-align:center}
.form-error{margin-top:var(--space-3);color:#b3261e;font-size:.9rem;font-weight:600;line-height:1.45}
.form-success{display:none;text-align:center;padding:var(--space-5) var(--space-2)}
.form-success.show{display:block}
.form-success .check{width:64px;height:64px;border-radius:50%;background:rgba(250,76,3,.1);color:var(--orange);display:grid;place-items:center;margin:0 auto var(--space-4)}
.form-success .check svg{width:30px;height:30px}
.form-success h3{font-size:1.6rem;color:var(--ink)}
.form-success p{margin-top:var(--space-3);color:var(--muted)}
.form-success a{color:var(--orange-ink);font-weight:600}
.form-card.sent form{display:none}

/* =========================================================
   CTA band — brand navy, the one saturated moment
   ========================================================= */
.cta-band{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.cta-band .pic{position:absolute;inset:0;z-index:-2;opacity:.2}
.cta-band .pic img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,12,56,.6),rgba(0,8,38,.86))}
.cta-band .inner{position:relative;z-index:2;text-align:center;max-width:680px;margin-inline:auto;color:#fff}
.cta-band h2{color:#fff;font-size:clamp(2rem,3.8vw,3rem)}
.cta-band p{margin-top:var(--space-4);color:#c8d1e4;font-size:1.06rem}
.cta-band .hero-actions{justify-content:center;margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--ink-2);color:#c2cbdd;font-size:.95rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--footer-gap);padding-block:var(--space-8)}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-name span{color:var(--orange)}  /* wordmark on navy */
.footer-brand p{margin-top:var(--space-4);max-width:34ch;color:#9aa6be;line-height:1.65}
.f-social{margin-top:var(--space-5);display:flex;gap:var(--space-3)}
.f-social a{width:42px;height:42px;border-radius:10px;border:1px solid var(--line-dk);display:grid;place-items:center;color:#fff;transition:.18s}
.f-social a:hover{background:var(--orange);border-color:var(--orange)}
.f-social svg{width:18px;height:18px}
.footer-col h4{font-family:var(--text);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--space-4)}
.footer-col li{margin-bottom:var(--space-2)}
.footer-col a:hover{color:var(--orange)}
.footer-col .muted-line{color:#9aa6be}
.footer-legal{border-top:1px solid var(--line-dk);padding-block:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;justify-content:space-between}
.footer-legal .licence{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);color:#9aa6be;font-size:.82rem}
.footer-legal .licence b{color:#c2cbdd;font-weight:600}
.footer-legal .copy{color:#7b86a0;font-size:.82rem}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .page-hero::after{background:linear-gradient(180deg,rgba(0,8,26,.74),rgba(0,8,26,.9))}
  .page-hero h1{max-width:none}
}
@media (max-width:860px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn{padding:var(--space-3) var(--space-4);font-size:.9rem}
  .cred-grid{grid-template-columns:1fr 1fr}
  .services-grid,.why-grid,.area-grid,.quote-grid,.svc-row{grid-template-columns:1fr}
  .svc-row.reverse .txt{order:0}
  .gal-preview{grid-template-columns:repeat(2,1fr)}
  .areas-cards{grid-template-columns:1fr 1fr}
  .suburbs{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:var(--space-2) var(--gutter) var(--space-5);box-shadow:var(--shadow);transform:translateY(-130%);transition:transform .3s ease;z-index:55}
  .nav.open{display:flex;transform:none}
  .nav a,.nav .dropdown>button{padding:var(--space-4) 0;font-size:1.05rem;width:100%;border-bottom:1px solid var(--line);border-radius:0}
  .nav .header-fb{display:flex;align-items:center;margin-left:0;justify-content:flex-start;gap:var(--space-3);width:100%;height:auto;min-height:var(--tap);padding:var(--space-4) 0;border-radius:0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:500}
  .nav .header-fb .fb-label{display:inline}
  .dropdown{width:100%}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 var(--space-2) var(--space-4);display:none}
  .dropdown[data-open="true"] .dropdown-menu{display:block}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:640px){
  /* header CTA would overflow the 390px viewport; Contact is in the nav */
  .header-quote{display:none}
}
@media (max-width:900px){.rev-track .review{flex-basis:calc((100% - var(--grid-gap)) / 2)}}
@media (max-width:600px){.rev-track .review{flex-basis:100%}}
@media (max-width:560px){
  .why-list{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .cta-band .hero-actions{align-items:stretch}
  .brand img{width:38px;height:38px}
  .brand-name{font-size:1rem}
  .brand-name span{font-size:.58rem;letter-spacing:.18em;margin-top:.22em}
  .gal-preview{grid-template-columns:1fr 1fr}
  .areas-cards{grid-template-columns:1fr}
  .cred-grid{grid-template-columns:1fr 1fr}
  .suburbs{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev-track{scroll-behavior:auto}
}

/* =========================================================
   Scroll reveals
   The hidden state is scoped to .js (set by a one-line script
   in <head>), so with JavaScript off — or if main.js fails to
   load — every block renders normally and nothing is lost.
   The transition itself is applied inline by main.js and
   removed once it finishes, so the card hover lifts below are
   left completely untouched afterwards.
   ========================================================= */
.js .sec-head:not(.in),
.js .cred-tile:not(.in),
.js .service-card:not(.in),
.js .why-item:not(.in),
.js .area-card:not(.in),
.js .g-item:not(.in),
.js .gal-preview a:not(.in),
.js .reviews-grid:not(.in){opacity:0;transform:translateY(10px)}