/* ============================================================
   OneStop Handyman · Bundaberg QLD
   POV: Queenslander veranda blue + honey hardwood on warm sand. Built from the
   business's own photographs (no logo exists), not from a stock trade palette.
   Fonts: Switzer (grotesk body) + Playfair Display italic accent — LOCKED.
   Signature: the batten rule (see .batten / .hero__batten).
   Brand tokens keep their --lime/--forest names for template portability.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --lime:#1D5D8C; --lime-2:#134662; --lime-ink:#FFFFFF; --accent-light:#E8A34E;
  --cream:#EFE8DD; --paper:#F8F4EC; --card:#FFFFFF;
  --forest:#11293B; --forest-2:#1B3B52; --on-forest:#EAF1F7; --on-forest-2:rgba(234,241,247,.68);
  --ink:#16232E; --ink-2:#41535F; --ink-3:rgba(22,35,46,.58);
  --line:rgba(22,35,46,.13); --line-2:rgba(22,35,46,.08); --line-g:rgba(234,241,247,.18);
  --batten:repeating-linear-gradient(90deg,
      #E8A34E 0 9px, #C7863A 9px 12px, rgba(0,0,0,0) 12px 20px);
  --maxw:1400px; --gut:clamp(1.1rem, 4vw, 3rem); --r:24px; --r-sm:14px; --r-pill:100px;
  --t-1:clamp(.74rem, .7rem + .14vw, .82rem);
  --t0:clamp(1rem, .96rem + .2vw, 1.12rem);
  --t1:clamp(1.14rem, 1rem + .55vw, 1.45rem);
  --h3:clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --h2:clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  --h1:clamp(2.8rem, 1.2rem + 5.6vw, 6rem);
  --shadow:0 24px 60px -28px rgba(10,20,40,.42);
}
html{ -webkit-text-size-adjust:100% }
html.js [data-reveal]{opacity:0}
body{background:var(--cream);color:var(--ink);font-family:"Switzer",system-ui,sans-serif;
  font-optical-sizing:auto;font-size:var(--t0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#fff}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4.5rem, 9vw, 8rem)}
.pt0{padding-top:0}
/* SIGNATURE — the batten rule. Vertical slats drawn from the balustrades this business builds.
   Used as a hairline welded under the nav, on the top edge of every dark band, and above the footer.
   It is a texture motif from the trade, not a brand mark (no emblem/monogram exists — see C0c). */
.batten{height:7px;background:var(--forest);background-image:var(--batten);background-size:20px 100%;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.h2{font-weight:600;font-size:var(--h2);line-height:1.04;letter-spacing:-.02em;margin-top:1.1rem}
.h2 em,.split__body em,.rcard em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}
.h2--light{color:var(--on-forest)}
.lead{font-size:var(--t1);line-height:1.5;color:var(--ink-2);margin-top:1.2rem;max-width:54ch}
.lead--light{color:var(--on-forest-2)}
.lead a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.center{text-align:center;max-width:40ch;margin-inline:auto}
.center .h2{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;line-height:1;
  padding:1rem 1.6rem;border-radius:14px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,border-color .35s;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s}.btn:hover svg{transform:translateX(4px)}
.btn svg.ph{width:1em;height:1em}.btn:hover svg.ph{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:1.15rem 1.9rem;font-size:1.04rem}
.btn--sm{padding:.7rem 1.1rem;font-size:.86rem}
.btn--lime{background:var(--lime);color:var(--lime-ink)}.btn--lime:hover{background:var(--lime-2)}
.btn--dark{background:var(--forest);color:var(--on-forest)}.btn--dark:hover{background:#0d1d33}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}.btn--line:hover{border-color:var(--ink);background:rgba(21,36,62,.04)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.24)}

/* NAV (floating bar, rounded corners) — logo left, links + CTA grouped right */
.nav{position:fixed;inset:.9rem 0 auto;z-index:60;padding-inline:var(--gut);transition:.4s}
.nav__pill{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  border-radius:14px;padding:.7rem .6rem .7rem 1.35rem;box-shadow:0 14px 40px -22px rgba(10,20,40,.5);position:relative}
/* signature: a 3px batten welded along the bottom edge of the nav pill */
.nav__pill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 14px 14px;
  background:var(--forest);background-image:var(--batten);background-size:20px 100%;opacity:.85;pointer-events:none}
.nav.scrolled{inset:.5rem 0 auto}.nav.scrolled .nav__pill{box-shadow:0 16px 44px -20px rgba(10,20,40,.6)}
.nav__right{display:flex;align-items:center;gap:.6rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:"Switzer",system-ui,sans-serif;white-space:nowrap}
/* C0c — this business has NO logo (its Facebook profile photo is a stock tool-pouch image), so the
   brand is the plain ALL-CAPS name. No emblem, monogram or invented icon anywhere on the site. */
.brand__word{display:inline-block;font-weight:700;font-size:1.02rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.brand__word i{font-style:normal;color:var(--lime)}
.brand--light .brand__word{color:var(--on-forest)}
.brand--light .brand__word i{color:var(--accent-light)}
.nav__links{display:flex;gap:1.4rem;align-items:center;margin-right:1.1rem}
.nav__links a{font-size:.88rem;font-weight:500;color:var(--ink-2);transition:.25s}
.nav__links a:hover,.nav__links a[aria-current=page]{color:var(--ink)}
/* drawer is the only nav on a phone, so it needs its own current-page affordance */
.menu__links a[aria-current=page]{color:var(--accent-light)}
.nav .btn{padding:.74rem 1.3rem;font-size:.94rem;border-radius:12px}
.navphone{font-weight:600;letter-spacing:-.01em}
.burger{display:none;width:2.8rem;height:2.8rem;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;position:relative}
.burger span{position:absolute;left:50%;top:50%;width:15px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:.3s}
.burger span:nth-child(1){margin-top:-5px}.burger span:nth-child(3){margin-top:5px}

.menu{position:fixed;inset:0;z-index:70;background:var(--forest);color:var(--on-forest);display:flex;flex-direction:column;padding:var(--gut);transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);visibility:hidden}
.menu.open{transform:none;visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;padding-block:.4rem}
.menu__close{width:2.8rem;height:2.8rem;border:1px solid var(--line-g);border-radius:50%;background:none;color:var(--on-forest);font-size:1.1rem;cursor:pointer}
.menu__links{margin:auto 0;display:flex;flex-direction:column;gap:.1rem}
.menu__links a{font-weight:600;font-size:clamp(2.2rem, 11vw, 3.6rem);line-height:1.24;letter-spacing:-.03em;display:flex;align-items:baseline;gap:1rem}
.menu__links a .n{font-size:.8rem;color:var(--accent-light);font-weight:600}
.menu__foot{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--on-forest-2);font-size:.95rem}

/* HERO */
/* LOCKED top padding: keeps the whole hero (nav → headline → sub → actions → proof card) inside one
   viewport so the bottom-aligned CTAs are never pushed below the fold. Do NOT raise the top clamp to
   reposition the headline (that clips the CTAs) and never set a fixed height (overflow:hidden clips).
   If a build still cuts off, trim hero__sub / hero__actions margins, not this. Enforced by audit K3d. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;padding:clamp(7.5rem, 10vh, 9.25rem) var(--gut) clamp(2rem, 4vw, 3.4rem)}
.hero__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(11,20,13,.80) 0%,rgba(11,20,13,.58) 40%,rgba(11,20,13,.20) 72%,rgba(11,20,13,.34) 100%),linear-gradient(180deg,rgba(11,20,13,.42) 0%,rgba(11,20,13,.08) 32%,rgba(11,20,13,.72) 100%)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.hero__copy{max-width:42rem}
.hero__h1{font-weight:600;font-size:var(--h1);line-height:.98;letter-spacing:-.025em}
.hero__h1 em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--accent-light)}
.hero__h1 .nb{white-space:nowrap}
.hero__sub{font-size:var(--t1);line-height:1.45;color:rgba(255,255,255,.92);margin-top:1.4rem;max-width:40ch}
.hero__actions{display:flex;flex-wrap:nowrap;gap:.8rem;margin-top:2rem}
.hero__card{display:flex;gap:.9rem;align-items:stretch;background:rgba(12,22,40,.5);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:.85rem;max-width:372px}
.hero__card-media{flex:none;width:5.4rem;border-radius:var(--r-sm);overflow:hidden}
.hero__card-media img{width:100%;height:100%;object-fit:cover}
.hero__card-body{display:flex;flex-direction:column;gap:.25rem}
.hero__card .stars{color:var(--accent-light);font-size:.82rem;letter-spacing:.08em}
/* honest proof: the real 4.9 rating set as a Playfair numeral rather than five filled stars */
.hero__card .hrate{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.6rem;line-height:1;color:var(--accent-light)}
.hero__card .hrate i{font-style:normal;font-size:.46em;vertical-align:.4em;margin-left:.14em}
.hero__card b{font-size:1.04rem;font-weight:600;line-height:1.1}
.hero__card small{color:rgba(255,255,255,.66);font-size:.74rem;line-height:1.3}
.hero__card .btn{margin-top:.5rem;align-self:flex-start}

/* SIGNATURE — hero balustrade. Slats sit on the RIGHT of the hero only (the headline and sub sit
   left), sit UNDER the scrim, and are hidden on phones, so hero contrast is never affected. */
.hero__batten{position:absolute;z-index:1;top:-8%;bottom:-8%;right:0;width:50%;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(232,163,78,.34) 0 11px, rgba(9,24,35,.42) 11px 16px, rgba(0,0,0,0) 16px 64px);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 60%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 60%,#000 100%);opacity:.6}
@media(max-width:900px){ .hero__batten{display:none} }

/* the batten rule welded to the top edge of every dark full-bleed band */
.trust,.foot{position:relative}
.trust::before,.feature::before,.bigcta::before,.foot::before{content:"";position:absolute;top:0;left:0;right:0;
  height:6px;z-index:4;background:var(--forest);background-image:var(--batten);background-size:20px 100%;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.26);pointer-events:none}

/* TRUST BAR */
.trust{background:var(--forest);color:var(--on-forest)}
.trust__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:clamp(2rem, 3.6vw, 2.8rem)}
.trust__item{display:flex;flex-direction:column;gap:.25rem;text-align:center;padding:.4rem;border-left:1px solid var(--line-g)}
.trust__item:first-child{border-left:0}
.trust__item b{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.8rem, 1rem + 2.4vw, 3rem);line-height:1;color:var(--accent-light)}
.trust__item b .star{font-style:normal;font-size:.46em;vertical-align:.08em;margin-left:.05em}
.trust__item span{font-size:.88rem;color:var(--on-forest-2)}

/* SPLIT (about) */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem, 4vw, 4.5rem);align-items:center}
.split__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.split__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.split__body .h2{font-size:clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem)}
.ticks{list-style:none;display:grid;gap:.8rem;margin:1.8rem 0}
.ticks li{position:relative;padding-left:2.1rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.1rem;width:1.45rem;height:1.45rem;background:var(--lime);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");background-size:64%;background-position:center;background-repeat:no-repeat}

/* SERVICES */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem, 4vw, 3.2rem)}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem, 1.5vw, 1.2rem)}
.scards--4{grid-template-columns:repeat(4,1fr)}
.scard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.scard__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.scard h3{font-size:var(--h3);font-weight:500;letter-spacing:-.02em;margin:0 0 .45rem}
.scard p{color:var(--ink-3);font-size:.95rem;margin-bottom:1.3rem}
.scard .go{margin-top:auto;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--lime);transition:.35s}
.scard .go svg{width:1.15rem;height:1.15rem}
.scard:hover .go{background:var(--forest);color:var(--accent-light);transform:translateX(3px)}

/* DARK FEATURE */
.feature{position:relative;overflow:hidden;color:#fff}
.feature__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(13,26,15,.88),rgba(13,26,15,.5))}
.feature__in{position:relative;z-index:2;padding-block:clamp(5.5rem, 11vw, 9rem);max-width:880px}
.feature__in .hero__actions{margin-top:2.2rem;flex-wrap:wrap}

/* REVIEWS / FEATURED TESTIMONIAL */
.tgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(.8rem, 1.5vw, 1.2rem);margin:clamp(2.4rem, 4.5vw, 3.4rem) 0 clamp(.8rem, 1.5vw, 1.2rem)}
.tfeature{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(2rem, 3vw, 3rem);display:flex;flex-direction:column;gap:1.4rem}
.tfeature .stars{color:var(--lime-2);font-size:1.05rem;letter-spacing:.06em}
.tfeature blockquote{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1.4rem, 1rem + 1.4vw, 2.1rem);line-height:1.3;color:var(--ink)}
.tmeta{display:flex;align-items:center;gap:1rem;margin-top:auto}
.tavatars{display:flex;flex:none}
.tavatars i{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--forest);color:var(--accent-light);display:grid;place-items:center;font-size:.72rem;font-weight:700;font-style:normal;border:2px solid var(--card);margin-left:-.65rem}
.tavatars i:first-child{margin-left:0}
.tmeta b{display:block;font-weight:600;font-size:.98rem}
.tmeta small{color:var(--ink-3);font-size:.84rem}
.tcta{background:var(--forest);color:var(--on-forest);border-radius:var(--r);padding:clamp(2rem, 3vw, 2.6rem);display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.tcta h3{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.tcta p{color:var(--on-forest-2);font-size:.96rem}
.tcta .btn{align-self:flex-start;margin-top:.3rem}
.tcta__ph{color:var(--on-forest-2);font-size:.9rem;font-weight:500}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem, 1.5vw, 1.2rem)}
.rcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.7rem, 2.5vw, 2.1rem);display:flex;flex-direction:column;gap:1.2rem}
.rcard .stars{color:var(--lime-2);font-size:.95rem;letter-spacing:.05em}
.rcard blockquote{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;font-size:var(--t1);line-height:1.4;color:var(--ink)}
.rcard cite{margin-top:auto;font-style:normal;font-size:.85rem;color:var(--ink-3);font-weight:500}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:clamp(.6rem, 1.2vw, .9rem)}
.gal figure{position:relative;overflow:hidden;border-radius:var(--r)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal .tag{position:absolute;top:.9rem;left:.9rem;background:var(--lime);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.34rem .7rem;border-radius:var(--r-pill)}
.g1{grid-column:span 5;grid-row:span 2}.g2{grid-column:span 7}.g3{grid-column:span 4}.g4{grid-column:span 3}

/* FAQ */
.faqwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem, 4vw, 4.5rem);align-items:start}
.faqhead{position:sticky;top:7rem}
.faqhead .lead{font-size:var(--t0)}
.faq details{border-bottom:1px solid var(--line);padding:1.4rem 0}.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;cursor:pointer;list-style:none;font-weight:600;font-size:var(--t1);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq .pl{flex:none;width:2.1rem;height:2.1rem;border:1px solid var(--line);border-radius:50%;position:relative;transition:.3s}
.faq .pl::before,.faq .pl::after{content:"";position:absolute;left:50%;top:50%;width:.82rem;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:.3s}
.faq .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pl{background:var(--lime);border-color:var(--lime)}
.faq details[open] .pl::before{background:#fff}
.faq details[open] .pl::after{opacity:0}
.faq p{color:var(--ink-3);max-width:60ch;margin-top:1rem}

/* BIG CTA */
.bigcta{position:relative;overflow:hidden;color:#fff;text-align:center}
.bigcta__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.bigcta__media img{width:100%;height:100%;object-fit:cover}
.bigcta__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,21,32,.60),rgba(8,21,32,.82))}
.bigcta__in{position:relative;z-index:2;padding-block:clamp(5.5rem, 12vw, 9.5rem);display:flex;flex-direction:column;align-items:center;gap:2rem}
.bigcta__h{font-weight:600;font-size:var(--h1);line-height:1;letter-spacing:-.025em;max-width:16ch}
.bigcta__h em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;color:var(--accent-light)}
.bigcta__sub{color:rgba(255,255,255,.84);font-size:var(--t1);line-height:1.5;max-width:44ch;margin-top:-.8rem}

/* FOOTER */
.foot{background:var(--forest);color:var(--on-forest);overflow:hidden}
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.6rem;padding-block:clamp(3.5rem, 6vw, 5rem) 2rem}
.foot__brand .brand{display:inline-flex;max-width:100%;padding:0;font-size:clamp(.82rem,4.4vw,1.08rem);letter-spacing:.1em}
.foot__brand p{color:var(--on-forest-2);font-size:.94rem;margin-top:1rem;max-width:34ch}
.foot__cols h5{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-forest-2);margin-bottom:1rem}
.foot__cols>div>a,.foot__cols>div>p{display:block;color:rgba(232,238,248,.78);padding:.25rem 0;font-size:.95rem}
.foot__cols a:hover{color:var(--accent-light)}
.socials{display:flex;gap:.6rem;margin-top:1.5rem}
.socials a{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-g);display:grid;place-items:center;color:var(--on-forest-2);transition:.3s}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:#fff;transform:translateY(-2px)}
.socials svg{width:1.1rem;height:1.1rem}
.foot__word{font-weight:600;line-height:.82;text-align:center;letter-spacing:-.04em;color:var(--on-forest);opacity:.09;white-space:nowrap;
  font-size:clamp(2.2rem, 12.4vw, 12rem);padding-bottom:.04em;user-select:none}
.foot__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;text-align:center;padding-block:1.6rem 2.2rem;border-top:1px solid var(--line-g);font-size:.8rem;color:var(--on-forest-2)}
.callbar{position:fixed;inset:auto .8rem .8rem;z-index:55;display:none;justify-content:center;align-items:center;gap:.5rem;background:var(--lime);color:#fff;font-weight:600;padding:1rem;border-radius:14px;box-shadow:0 18px 36px -12px rgba(0,0,0,.45)}
.callbar svg{width:1.05em;height:1.05em;flex:none}

/* ABOUT PAGE — sub-hero, values grid, process steps */
.pagehero{min-height:70svh;align-items:flex-end}
.pagehero .hero__in{justify-content:flex-start}
.pagehero .hero__copy{max-width:44rem}
/* stronger left+bottom scrim so sub-page hero text stays readable over bright images */
.pagehero .hero__shade{background:linear-gradient(95deg,rgba(13,26,15,.88) 0%,rgba(13,26,15,.62) 40%,rgba(13,26,15,.22) 72%,rgba(13,26,15,.42) 100%),linear-gradient(0deg,rgba(13,26,15,.55) 0%,rgba(13,26,15,0) 50%)}
.pagehero .hero__h1{font-size:clamp(2.3rem,1.3rem + 3.7vw,4.4rem)}
.pagehero .hero__sub{font-size:clamp(1.04rem,.98rem + .34vw,1.22rem);color:rgba(255,255,255,.9);max-width:46ch}
.center--wide{max-width:52ch}

.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2rem,4vw,3.2rem)}
.vcard{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.7rem,2.5vw,2.2rem);display:flex;flex-direction:column;gap:.9rem;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.vcard__ic{width:3rem;height:3rem;border-radius:14px;background:var(--cream);color:var(--lime);display:grid;place-items:center;flex:none}
.vcard__ic svg{width:1.5rem;height:1.5rem}
.vcard h3{font-size:var(--h3);font-weight:500;letter-spacing:-.02em}
.vcard p{color:var(--ink-3);font-size:.95rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2rem,4vw,3.2rem)}
.step{position:relative;padding-top:1.7rem;border-top:2px solid var(--line)}
.step::after{content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--lime)}
.step__n{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--lime-2)}
.step h3{font-size:var(--t1);font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .55rem}
.step p{color:var(--ink-3);font-size:.92rem;line-height:1.55}
@media(max-width:980px){ .vcards{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

/* SERVICE ROWS — full-width, alternating image + detail */
.srows{display:flex;flex-direction:column;gap:clamp(3rem,6.5vw,6.5rem);margin-top:clamp(2.6rem,5vw,4.5rem)}
.srow{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(1.8rem,4.5vw,5rem);align-items:center}
.srow__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow)}
.srow__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.srow:hover .srow__media img{transform:scale(1.04)}
.srow__tag{position:absolute;top:1rem;left:1rem;background:rgba(19,39,67,.7);backdrop-filter:blur(6px);color:var(--on-forest);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .8rem;border-radius:var(--r-pill)}
.srow__n{display:inline-block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:1.05rem;color:var(--lime-2);margin-bottom:.5rem}
.srow__body h2{font-size:clamp(1.7rem,1.1rem + 2.1vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.06}
.srow__body .lead{margin-top:.9rem}
.srow__body .ticks{margin:1.5rem 0 1.9rem}
.srow:nth-child(even) .srow__media{order:2}
@media(max-width:980px){
  .srow{grid-template-columns:1fr;gap:1.5rem}
  .srow__media,.srow:nth-child(even) .srow__media{order:-1;aspect-ratio:16/11}
}

/* GALLERY — masonry + lightbox */
.masonry{columns:4 250px;column-gap:clamp(.6rem,1.2vw,1rem);margin-top:clamp(2rem,4vw,3.2rem)}
.masonry figure{break-inside:avoid;margin:0 0 clamp(.6rem,1.2vw,1rem);position:relative;border-radius:var(--r-sm);overflow:hidden;cursor:zoom-in;background:var(--cream)}
.masonry img{width:100%;height:auto;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,26,15,.42));opacity:0;transition:.4s;pointer-events:none}
.masonry figure:hover::after{opacity:1}
.masonry .tag{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--lime);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .65rem;border-radius:var(--r-pill);opacity:0;transform:translateY(-4px);transition:.4s}
.masonry figure:hover .tag{opacity:1;transform:none}
@media(max-width:680px){ .masonry{columns:2 140px} }

.lb{position:fixed;inset:0;z-index:90;background:rgba(7,12,22,.93);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;border-radius:var(--r-sm);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb__btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.3s}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__btn svg{width:1.3rem;height:1.3rem}
.lb__close{top:1.2rem;right:1.2rem}
.lb__prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb__next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.72);font-size:.85rem;letter-spacing:.05em}
@media(max-width:560px){ .lb__prev{left:.4rem}.lb__next{right:.4rem} }

/* SERVICE AREAS — pills */
.arealist{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:clamp(2rem,4vw,3rem);max-width:62rem;margin-inline:auto}
.arealist li{display:inline-flex;align-items:center;gap:.55rem;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.7rem 1.3rem;font-weight:500;color:var(--ink-2);font-size:.95rem}
.arealist li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--lime);flex:none}

/* FOOTER contact links with leading icon */
.foot__cols a.fcontact{display:flex;align-items:center;gap:.6rem}
.foot__cols a.fcontact svg{width:1.05em;height:1.05em;color:var(--lime);flex:none}

/* REVIEWS — masonry of real reviews */
.rmason{columns:3 320px;column-gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2.2rem,4vw,3.4rem)}
.rmason .rcard{break-inside:avoid;margin:0 0 clamp(.8rem,1.5vw,1.2rem)}
.rmason .rcard blockquote{font-family:"Switzer",system-ui,sans-serif;font-style:normal;font-size:1rem;line-height:1.62;color:var(--ink-2)}
.rcard cite{display:flex;flex-direction:column;gap:.12rem;font-style:normal}
.rcard cite b{font-weight:600;color:var(--ink);font-size:.95rem}
.rcard cite span{font-size:.8rem;color:var(--ink-3)}
@media(max-width:680px){ .rmason{columns:1} }

/* Google + Facebook review buttons (only the platforms this business actually has) */
.btn--google,.btn--ls,.btn--fb{background:#fff;color:#1f2430;border-color:#fff}
.btn--google:hover,.btn--ls:hover,.btn--fb:hover{background:#e9f0f7}
.btn svg.fic{width:1.2em;height:1.2em}
.btn:hover svg.fic{transform:none}
.btn svg.gic,.btn svg.lic{width:1.2em;height:1.2em}
.btn img.lic{width:1.25em;height:1.25em;object-fit:contain;flex:none}
.btn:hover svg.gic,.btn:hover svg.lic{transform:none}

/* plain (image-free) dark CTA band — avoids clashing with an image section below */
.feature--plain{background:var(--forest)}
.feature--plain .feature__media,.feature--plain .feature__shade{display:none}

/* CONTACT — info card + form */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1rem,2.5vw,1.6rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.cinfo{background:var(--forest);color:var(--on-forest);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.3rem}
.cinfo h2{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.cinfo>p{color:var(--on-forest-2);font-size:.96rem;margin-top:-.4rem}
/* K2b — a long client email is an unbreakable string: without min-width:0 on the flex chain it sets
   an intrinsic min-width that pushes the dark panel past a 390px viewport and clips the form. */
.contact>*{min-width:0}
.cline{display:flex;gap:.85rem;align-items:center;min-width:0}
.cline>span{min-width:0}
.cline b,.cline small{overflow-wrap:anywhere;word-break:break-word}
.cline .ic{width:2.7rem;height:2.7rem;border-radius:12px;background:rgba(143,187,255,.12);border:1px solid var(--line-g);display:grid;place-items:center;flex:none;color:var(--accent-light)}
.cline .ic svg{width:1.2rem;height:1.2rem}
.cline small{display:block;color:var(--on-forest-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.1rem}
.cline b{font-weight:600;font-size:1.02rem}
.cline a{color:inherit}.cline a:hover b{color:var(--accent-light)}
.cinfo__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.cinfo__chips span{border:1px solid var(--line-g);color:var(--on-forest-2);border-radius:var(--r-pill);padding:.4rem .85rem;font-size:.82rem}
.cinfo__lic{margin-top:auto;color:var(--on-forest-2);font-size:.82rem;border-top:1px solid var(--line-g);padding-top:1.2rem}

.cform{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow)}
.cform h2{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.4rem}
.cform__intro{color:var(--ink-3);font-size:.95rem;margin-bottom:1.6rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;transition:border-color .25s,box-shadow .25s,background .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(47,125,51,.16);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field--hp{position:absolute;left:-9999px;opacity:0;height:0;margin:0}
.cform form .btn{width:100%;justify-content:center;margin-top:.3rem}
.cform__note{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:.9rem}
.cform__ok{display:none;text-align:center;padding:2.4rem 1rem}
.cform__ok .ok-ic{width:3.6rem;height:3.6rem;border-radius:50%;background:var(--lime);color:#fff;display:grid;place-items:center;margin:0 auto 1.1rem}
.cform__ok .ok-ic svg{width:1.7rem;height:1.7rem}
.cform__ok h3{font-size:var(--h3);font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}
.cform__ok p{color:var(--ink-3)}
.cform.sent form{display:none}
.cform.sent .cform__ok{display:block}
@media(max-width:880px){ .contact{grid-template-columns:1fr} .frow{grid-template-columns:1fr} }

/* reveals */
html.js [data-reveal]{transform:translateY(28px)}
html.js [data-reveal].in{opacity:1;transform:none}

/* switch to burger before the full nav gets cramped */
@media(max-width:1080px){ .nav__links,.navphone{display:none} .burger{display:block} }
@media(max-width:980px){
  .split{grid-template-columns:1fr}.split__media{aspect-ratio:16/11;order:-1}
  .scards{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:1fr}.rgrid{grid-template-columns:1fr}
  .faqwrap{grid-template-columns:1fr}.faqhead{position:relative;top:0}
  .trust__row{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
  .trust__item:nth-child(3){border-left:0}
  .gal{grid-template-columns:repeat(2,1fr)}.g1,.g2,.g3,.g4{grid-column:span 1;grid-row:span 1}
  .foot__cols{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}
  .hero__in{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  :root{--r:18px}
  .nav .btn--lime{display:none}
  .scards{grid-template-columns:1fr}
  .hero__actions{flex-wrap:wrap}.hero__actions .btn{flex:1;justify-content:center}
  /* M3: .btn is white-space:nowrap, so long labels overflow a 320px column and get sliced by
     body{overflow-x:hidden}. Dropping nowrap alone is NOT enough: it collapses min-content width,
     so flex:1 then packs both CTAs onto ONE row at half width and the labels wrap to 3 lines
     ("Get a free / quote" at iPhone width). Stack them instead, full width. Applies to every
     button row that can hold a long label, not just the hero. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{flex:none;width:100%;white-space:normal;text-align:center}
  .rbtns{width:100%}
  .rbtns .btn{flex:none;width:100%;white-space:normal;text-align:center;max-width:100%;padding-inline:1.1rem}
  .hero__h1 em{white-space:normal}
  .hero__card{display:none}
  .hero__shade{background:linear-gradient(180deg,rgba(11,20,13,.58) 0%,rgba(11,20,13,.34) 28%,rgba(11,20,13,.84) 100%)}
  .foot__cols{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-auto-rows:230px}
  .callbar{display:flex}body{padding-bottom:4.6rem}
  /* M2 — the sticky call-bar is fixed to the bottom, so any hero CTA must be lifted clear of it.
     Applies to EVERY hero (home .hero AND the .pagehero sub-heroes), not just the home page:
     scoping this to the home hero alone left /services and /about burying their Call CTA on short
     phones — one of them 107% covered, i.e. entirely behind the bar. */
  .hero{padding-bottom:6rem}
}
/* M2 (short phones) — padding alone cannot solve it. Below ~720px of viewport height the hero
   content column is taller than 100svh, so the hero grows past the viewport, bottom-alignment stops
   applying and the extra padding moves the buttons not at all. Compress the hero itself and drop the
   duplicate ghost Call CTA (the sticky call-bar already carries the identical tel: action). */
@media(max-width:560px) and (max-height:720px){
  .hero{padding-top:7.25rem;padding-bottom:5.5rem}
  .hero__h1{font-size:clamp(2rem,8.4vw,2.4rem)}
  .hero__sub{font-size:1rem;margin-top:.7rem}
  .hero__actions{margin-top:1rem}
  /* Drop the duplicate ghost Call ONLY where the hero has another CTA — the call-bar already carries
     the identical tel: action. `:not(:only-child)` is deliberate: /contact's hero has the ghost Call
     as its ONLY CTA, so hiding it unconditionally leaves that hero with no call to action at all. */
  .hero .hero__actions .btn--ghost:not(:only-child){display:none}
  /* Sub-hero pages stack two full-width platform buttons, so at 320x568 the .pagehero can
     overflow 100svh and push the second CTA under the call-bar. Tighten the sub-hero only.
     Do NOT shrink .btn padding instead: that collapses the single-CTA sub-heroes to ~38px,
     under the tap-target floor (tested and rejected by the mobile lens). */
  .pagehero .hero__sub{font-size:.95rem;margin-top:.55rem}
  .pagehero .hero__actions{gap:.55rem;margin-top:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1;transform:none}
}