/* =========================================================
   Hermanus Plumbing Co. — placeholder site
   Layout adapted from client-supplied roofing reference,
   recoloured red -> professional blue.
   ========================================================= */

:root{
  /* Brand palette - The Hermanus Plumbers */
  --blue:      #3e64a7;   /* primary accent */
  --blue-dark: #2c4a82;   /* hover / deeper */
  --blue-soft: #eceff8;   /* light tint */
  --light-blue:#5f8cc0;   /* accents on dark */
  --navy:      #1f376c;   /* dark sections, footer, hero */
  --navy-2:    #24407c;
  --navy-3:    #2c4c85;
  --ink:       #16233b;
  --muted:     #4c5c74;
  --muted-2:   #8a97a6;
  --paper:     #f3f6fb;
  --line:      #e2e8f1;
  --white:     #ffffff;
  --gold:      #f5a623;

  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 10px 30px -18px rgba(15,30,50,.16);
  --shadow-sm: 0 4px 14px -10px rgba(15,30,50,.13);
  --container: 1340px;
  --font:      "Barlow", system-ui, -apple-system, sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-display: "Bebas Neue", "Barlow Semi Condensed", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,.hero__title,.section__title,.quotecard__title,.ctaband__text h2,.stat strong{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
}
h3,h4,h5,h6{ font-family:var(--font-head); }
input,select,textarea{ font-weight:500; color:var(--ink); }
::placeholder{ color:#8794a5; opacity:1; font-weight:500; }
.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* icons that are filled shapes */
.topbar .ic, .rating__logo svg, .floater svg{ fill:currentColor; stroke:none; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:.95rem; line-height:1;
  padding:.95em 1.5em; border-radius:12px; border:2px solid transparent;
  cursor:pointer; transition:.25s ease; white-space:nowrap;
}
.btn .ic{ width:1.1em; height:1.1em; }
.btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--primary:hover{ background:#16233b; border-color:#16233b; }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.3); }
.btn--ghost:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5); }
.btn--dark{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--dark:hover{ background:#081321; }
.btn--sm{ padding:.7em 1.15em; font-size:.85rem; border-radius:10px; }
.btn--lg{ padding:1.05em 1.75em; font-size:1rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--navy); color:#c7d2de; font-size:.82rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; }
.topbar__tag{ color:#9fb0c0; }
.topbar__right{ display:flex; align-items:center; gap:22px; }
.topbar__link{ display:inline-flex; align-items:center; gap:7px; color:#dbe4ee; transition:.2s; }
.topbar__link:hover{ color:#fff; }
.topbar__link .ic{ width:15px; height:15px; color:var(--blue); }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--line); transition:.3s; }
.header.is-stuck{ box-shadow:0 10px 30px -18px rgba(11,27,46,.45); }
.header__inner{ display:flex; align-items:center; gap:24px; min-height:76px; }

.logo{ display:inline-flex; align-items:center; gap:12px; }
.logo__badge{ height:52px; width:auto; display:block; }
.logo__name{ display:flex; flex-direction:column; line-height:1; }
.logo__name strong{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.03em; font-weight:400; color:var(--navy); }
.logo__name em{ font-size:.6rem; letter-spacing:.2em; font-style:normal; font-weight:600; color:var(--blue); text-transform:uppercase; margin-top:3px; }
/* The header name shrinks to fit its row; it never stacks onto a second line. */
.header .logo__name strong, .header .logo__name em{ white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav__link{ position:relative; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:.6em .95em; font-weight:600; font-size:.94rem; color:var(--ink); border-radius:8px; transition:.2s; }
.nav__link:hover, .nav__link.is-active{ color:var(--blue); }
.nav__link .caret{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.nav__item--drop{ position:relative; }
.nav__drop{
  position:absolute; top:calc(100% + 14px); left:-12px; width:min(560px, calc(100vw - 48px));
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 48px -22px rgba(15,30,50,.35); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.24s cubic-bezier(.2,.7,.2,1);
  /* 15 services will not fit one column without scrolling, and a scrolling
     dropdown is horrible to use. Two columns fit them all, so no cap is needed. */
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(8,auto);
  grid-auto-flow:column; gap:1px 6px; z-index:2;
}
.nav__item--drop:hover .nav__drop{ opacity:1; visibility:visible; transform:translateY(0); }
/* Arrow: positioned against .nav__item--drop, which is already position:relative. */
.nav__item--drop::before{ content:""; position:absolute; left:14px; top:calc(100% + 8px); width:12px; height:12px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); opacity:0; visibility:hidden; transition:.24s cubic-bezier(.2,.7,.2,1); z-index:3; }
.nav__item--drop:hover::before{ opacity:1; visibility:visible; }
/* Hover bridge across the 14px gap, so the menu survives the trip down. */
.nav__item--drop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; }
.nav__drop a{ display:flex; align-items:center; gap:12px; padding:.62em .7em; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--ink); transition:.15s; }
.nav__drop a:hover{ background:var(--navy); color:#fff; }
.ndi{ width:20px; height:20px; flex:none; background:var(--muted-2); transition:.15s; }
.nav__drop a:hover .ndi{ background:#fff; }
.ndsvg{ width:20px; height:20px; flex:none; fill:var(--muted-2); transition:.15s; }
.nav__drop a:hover .ndsvg{ fill:#fff; }

.header__actions{ display:flex; align-items:center; gap:14px; margin-left:6px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:40px; background:transparent; border:none; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ width:20px; height:2px; background:var(--blue); border-radius:2px; transition:.3s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,30,60,.95) 0%, rgba(18,30,60,.82) 30%, rgba(22,38,74,.5) 56%, rgba(22,38,74,.15) 100%),
    url("../assets/images/hero-bg.jpg") center right / cover no-repeat;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,24,48,.4) 0%, transparent 20%, transparent 66%, rgba(14,24,48,.55) 100%);
}
.hero__inner{ position:relative; display:flex; align-items:center; min-height:620px; padding:100px 24px 160px; }
.hero__content{ max-width:720px; }
/* Hero content animates in on load via CSS (never relies on JS reveal, so it
   is never blank on first paint / with JS disabled) */
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero__content, .hero__media{ animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero__media{ animation-delay:.14s; }
@media (prefers-reduced-motion:reduce){ .hero__content, .hero__media{ animation:none; } }

.hero__customers{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; }
.avatars{ display:flex; }
.avatars img{ width:38px; height:38px; border-radius:50%; border:2px solid var(--navy); object-fit:cover; margin-left:-10px; }
.avatars img:first-child{ margin-left:0; }
.hero__proof{ display:inline-flex; align-items:center; gap:16px; margin-bottom:26px; }
.hero__proof .avatars img{ border-color:rgba(255,255,255,.8); }
.hero__rating{ display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:1px solid rgba(255,255,255,.28); }
.hero__rating .stars{ color:var(--gold); font-size:1.05rem; letter-spacing:2px; line-height:1; }
.hero__rating-txt{ font-size:.85rem; color:#c7d2de; }
.hero__rating-txt strong{ color:#fff; font-weight:700; }
.avatars--sm img{ width:34px; height:34px; }
.hero__customers span{ font-size:.9rem; color:#c7d2de; }
.hero__customers strong{ color:#fff; }

.hero__title{ font-size:clamp(3rem,6.5vw,5.3rem); font-weight:400; line-height:.94; letter-spacing:.015em; }
.hero__sub{ margin:20px 0 26px; max-width:520px; color:#b9c6d4; font-size:1.05rem; }

.hero__ratings{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.rating{ display:inline-flex; align-items:center; gap:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:9px 16px; border-radius:8px; }
.rating__logo{ display:grid; place-items:center; }
.rating__logo svg{ width:22px; height:22px; }
.rating__meta{ display:flex; flex-direction:column; line-height:1.15; }
.rating__meta strong{ font-size:.95rem; }
.rating__meta .stars{ color:var(--gold); font-size:.72rem; letter-spacing:1px; }
.rating__meta em{ font-style:normal; font-size:.7rem; color:#9fb0c0; }

.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__media{ position:relative; }
.hero__media img{ width:100%; border-radius:var(--radius-lg); object-fit:cover; aspect-ratio:82/96; box-shadow:0 20px 44px -30px rgba(0,0,0,.5); }
.hero__media::before{ content:""; position:absolute; inset:-12px -12px 18px 18px; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); }
.hero__media-note{ position:absolute; bottom:14px; left:14px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(11,27,46,.72); color:#c7d2de; padding:5px 10px; border-radius:6px; }

/* ---------- Quote card (overlap) ---------- */
:root{ --quotecard-lift:80px; }
.quotecard{ position:relative; margin-top:calc(-1 * var(--quotecard-lift)); z-index:5; }
/* The card is lifted over the section above it. Below that lift the strip has to
   carry the same ground as the section underneath, or you see a white band between
   the card and a section--alt. Transparent for the lift, then matched. */
.quotecard:has(+ .section--alt){
  background:linear-gradient(to bottom, transparent 0 var(--quotecard-lift), var(--paper) var(--quotecard-lift));
}
.quotecard__box{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:38px clamp(24px,4vw,54px); border:1px solid var(--line); }
.quotecard__title{ text-align:center; font-size:clamp(1.6rem,3vw,2.15rem); font-weight:800; text-wrap:balance; }
.quotecard__title span{ color:var(--blue); }
.quotecard__lead{ text-align:center; color:var(--muted); margin:8px 0 26px; }
.qform{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.field label{ display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.field__wrap{ position:relative; display:flex; align-items:center; }
.field__wrap .ic{ position:absolute; left:13px; width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; }
.field__wrap input, .field__wrap select{ width:100%; padding:.72em .9em .72em 40px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.93rem; background:var(--paper); transition:.2s; }
.field__wrap input:focus, .field__wrap select:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(62,100,167,.15); }
.qform__submit{ height:48px; }
.form-msg{ grid-column:1/-1; margin-top:4px; font-size:.9rem; font-weight:600; color:var(--blue); }
.form-msg--light{ color:#eaf1fc; }

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section--alt{ background:var(--paper); }
.section__head{ max-width:720px; margin:0 auto 54px; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.eyebrow i{ width:26px; height:2px; background:var(--blue); display:inline-block; border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:#7fb0f5; }
.eyebrow--light i{ background:#7fb0f5; }
.section__title{ font-size:clamp(2.2rem,4.2vw,3.4rem); font-weight:400; line-height:1; letter-spacing:.02em; text-wrap:balance; }
.section__title--light{ color:#fff; }
.section__text{ color:var(--muted); margin-top:16px; font-size:1.02rem; text-wrap:pretty; }
.section__text--center{ text-align:center; }
.section__text--light{ color:#a9bacb; }

/* ---------- About ---------- */
.about__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; border-radius:var(--radius-lg); aspect-ratio:76/88; object-fit:cover; box-shadow:var(--shadow); }
.stats{ display:flex; gap:30px; margin:30px 0; flex-wrap:wrap; }
.stat strong{ display:block; font-size:2.4rem; font-weight:800; color:var(--ink); line-height:1; }
.stat span{ font-size:.86rem; color:var(--muted); display:block; margin-top:8px; white-space:nowrap; }
.about__cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.about__trust{ display:flex; align-items:center; gap:12px; }
.about__trust span{ font-size:.82rem; color:var(--muted); }

/* ---------- Services ---------- */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.scard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; transition:border-color .2s ease, box-shadow .2s ease; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; }
.scard:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
/* Masked plumbing icons (reusable via data-icon) */
[data-icon]{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
[data-icon="plumber"]{  -webkit-mask-image:url(../assets/images/icons/plumber.png);   mask-image:url(../assets/images/icons/plumber.png); }
[data-icon="water-tap"]{ -webkit-mask-image:url(../assets/images/icons/water-tap.png); mask-image:url(../assets/images/icons/water-tap.png); }
[data-icon="plumbing"]{ -webkit-mask-image:url(../assets/images/icons/plumbing.png); mask-image:url(../assets/images/icons/plumbing.png); }
[data-icon="leak"]{     -webkit-mask-image:url(../assets/images/icons/leak.png);      mask-image:url(../assets/images/icons/leak.png); }
[data-icon="faucet"]{   -webkit-mask-image:url(../assets/images/icons/faucet.png);    mask-image:url(../assets/images/icons/faucet.png); }
[data-icon="pipe"]{     -webkit-mask-image:url(../assets/images/icons/pipe.png);      mask-image:url(../assets/images/icons/pipe.png); }
[data-icon="plunger"]{  -webkit-mask-image:url(../assets/images/icons/plunger.png);   mask-image:url(../assets/images/icons/plunger.png); }
[data-icon="pressure"]{  -webkit-mask-image:url(../assets/images/icons/pressure.png);   mask-image:url(../assets/images/icons/pressure.png); }
[data-icon="commercial"]{-webkit-mask-image:url(../assets/images/icons/commercial.png); mask-image:url(../assets/images/icons/commercial.png); }
[data-icon="price"]{     -webkit-mask-image:url(../assets/images/icons/price.png);      mask-image:url(../assets/images/icons/price.png); }
[data-icon="borehole"]{  -webkit-mask-image:url(../assets/images/icons/borehole.png);   mask-image:url(../assets/images/icons/borehole.png); }
[data-icon="geyser"]{    -webkit-mask-image:url(../assets/images/icons/geyser.png);     mask-image:url(../assets/images/icons/geyser.png); }
[data-icon="geyser-install"]{ -webkit-mask-image:url(../assets/images/icons/geyser-install.png); mask-image:url(../assets/images/icons/geyser-install.png); }
[data-icon="drain-camera"]{  -webkit-mask-image:url(../assets/images/icons/drain-camera.png);  mask-image:url(../assets/images/icons/drain-camera.png); }
[data-icon="solar"]{     -webkit-mask-image:url(../assets/images/icons/solar.png);      mask-image:url(../assets/images/icons/solar.png); }
[data-icon="valve"]{     -webkit-mask-image:url(../assets/images/icons/valve.png);      mask-image:url(../assets/images/icons/valve.png); }
[data-icon="bath"]{      -webkit-mask-image:url(../assets/images/icons/bath.png);       mask-image:url(../assets/images/icons/bath.png); }
[data-icon="toilet"]{    -webkit-mask-image:url(../assets/images/icons/toilet.png);     mask-image:url(../assets/images/icons/toilet.png); }
[data-icon="jojo"]{      -webkit-mask-image:url(../assets/images/icons/jojo.png);       mask-image:url(../assets/images/icons/jojo.png); }
[data-icon="location"]{  -webkit-mask-image:url(../assets/images/icons/location.png);   mask-image:url(../assets/images/icons/location.png); }
[data-icon="maintenance"]{ -webkit-mask-image:url(../assets/images/icons/maintenance.png); mask-image:url(../assets/images/icons/maintenance.png); }
[data-icon="callout"]{   -webkit-mask-image:url(../assets/images/icons/callout.png);    mask-image:url(../assets/images/icons/callout.png); }
[data-icon="insurance"]{ -webkit-mask-image:url(../assets/images/icons/insurance.png);  mask-image:url(../assets/images/icons/insurance.png); }
[data-icon="afterhours"]{-webkit-mask-image:url(../assets/images/icons/afterhours.png); mask-image:url(../assets/images/icons/afterhours.png); }
[data-icon="agreed"]{    -webkit-mask-image:url(../assets/images/icons/agreed.png);     mask-image:url(../assets/images/icons/agreed.png); }
[data-icon="invoice"]{   -webkit-mask-image:url(../assets/images/icons/invoice.png);    mask-image:url(../assets/images/icons/invoice.png); }
[data-icon="pool"]{      -webkit-mask-image:url(../assets/images/icons/pool.svg);       mask-image:url(../assets/images/icons/pool.svg); }
.scard__icon{ display:block; width:44px; height:44px; flex:none; background:var(--blue); }
.scard__svg{ color:var(--blue); display:flex; }
.scard__svg svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.scard h3{ font-size:1.18rem; font-weight:700; margin:0; }
.scard p{ grid-column:1 / -1; color:var(--muted); font-size:.94rem; margin:16px 0; }
.scard__link{ grid-column:1 / -1; font-weight:700; font-size:.9rem; color:var(--blue); }
.scard__link:hover{ color:var(--blue-dark); }
.services__foot{ text-align:center; margin-top:40px; color:var(--muted); font-weight:600; }
.services__foot a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------- CTA band ---------- */
.ctaband{ background:linear-gradient(120deg,var(--blue),var(--blue-dark)); color:#fff; }
.ctaband__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; padding:44px 24px; }
.ctaband__eyebrow{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.ctaband__text h2{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; margin-top:8px; line-height:1.2; }
.ctaband__text a{ text-decoration:underline; text-underline-offset:4px; }
.ctaband__form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ctaf{ position:relative; display:block; }
.ctaf .ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; pointer-events:none; z-index:1; }
.ctaband__form input, .ctaband__form select{ width:100%; padding:.72em 1em .72em 40px; border:none; border-radius:9px; font:inherit; font-size:.93rem; font-weight:500; color:var(--ink); background:#fff; }
.ctaband__form input::placeholder{ color:#6f7d90; }
.ctaband__form input:focus, .ctaband__form select:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.ctaband__form .btn--dark{ justify-content:center; }
.ctaband__form .form-msg{ grid-column:1/-1; }

/* ---------- Owner story ---------- */
.owner__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.owner__sub{ color:var(--blue); font-size:1rem; font-weight:700; margin-top:14px; }
.owner__signature{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.owner__signature strong{ display:block; font-size:1.1rem; }
.owner__signature span{ color:var(--muted); font-size:.88rem; }
.vm{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; }
.vm__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.vm__icon{ color:var(--blue); margin-bottom:12px; }
.vm__icon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vm__card h4{ font-size:1.05rem; margin-bottom:8px; }
.vm__card p{ color:var(--muted); font-size:.9rem; }
.owner__points{ list-style:none; margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; }
.owner__points li{ position:relative; padding-left:26px; }
.owner__points li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:11px; border-radius:50%; background:var(--blue); }
.owner__points h4{ font-size:1.08rem; margin-bottom:4px; }
.owner__points p{ color:var(--muted); font-size:.95rem; }

/* Breadcrumb (service pages) */
.crumb{ font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:18px; letter-spacing:.02em; }
.crumb a{ color:rgba(255,255,255,.9); }
.crumb a:hover{ color:#fff; }
.crumb span{ margin:0 6px; opacity:.6; }
.owner__media{ position:relative; }
.owner__media img{ width:100%; border-radius:var(--radius-lg); aspect-ratio:68/82; object-fit:cover; box-shadow:var(--shadow); }
.owner__namecard{ position:absolute; left:20px; bottom:20px; background:rgba(11,27,46,.85); backdrop-filter:blur(6px); color:#fff; padding:14px 18px; border-radius:14px; }
.owner__namecard strong{ display:block; font-size:1rem; }
.owner__namecard span{ font-size:.78rem; color:#b9c6d4; }

/* ---------- Why choose us ---------- */
.why{ background:var(--navy); position:relative; overflow:hidden; }
.why .container{ position:relative; }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.wcard{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:34px 28px; text-align:center; transition:border-color .2s ease, background .2s ease; }
.wcard:hover{ background:rgba(255,255,255,.05); border-color:rgba(95,140,192,.55); }
.wcard--link{ text-decoration:none; display:block; }
.wcard__more{ display:inline-block; margin-top:12px; color:var(--light-blue); font-weight:700; font-size:.85rem; }
.wcard--link:hover .wcard__more{ color:#fff; }
.wcard__icon{ color:var(--light-blue); margin:0 auto 14px; display:flex; justify-content:center; }
.wcard__icon svg{ width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.wcard h3{ color:#fff; font-size:1.02rem; margin-bottom:8px; }
.wcard p{ color:#9fb0c0; font-size:.85rem; }

/* ---------- Areas ---------- */
.areas__list{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:840px; margin:0 auto; }
.areas__list li{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.7em 1.35em; font-weight:600; font-size:.95rem; transition:border-color .2s ease, color .2s ease; }
.areas__list li:hover{ border-color:var(--blue); color:var(--blue); }
.areas__list li::before{
  content:""; width:16px; height:16px; flex:none; background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Areas: photo cards ---------- */
.areagrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 28px; }
.areacard{ display:block; color:inherit; text-decoration:none; }
.areacard img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:14px; display:block;
  box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.areacard:hover img{ transform:translateY(-4px); box-shadow:var(--shadow); }
.areacard h3{ font-size:1.32rem; font-weight:700; color:var(--ink); margin:17px 0 5px; transition:color .2s; }
.areacard:hover h3{ color:var(--blue); }
.areacard p{ color:var(--muted); font-size:.95rem; margin:0; line-height:1.5; }
.areagrid__credit{ margin-top:34px; text-align:center; font-size:.8rem; color:var(--muted); }
.areagrid__credit a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Work gallery ---------- */
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work__item{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.work__item img{ width:100%; aspect-ratio:6/5; object-fit:cover; transition:.4s; }
.work__item:hover img{ transform:scale(1.04); }
.work__item figcaption{ position:absolute; left:0; bottom:0; right:0; padding:26px 18px 16px; color:#fff; font-weight:700; font-size:.95rem; background:linear-gradient(transparent,rgba(11,27,46,.85)); }

/* ---------- Testimonials ---------- */
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); }
.tcard__stars{ color:var(--gold); letter-spacing:2px; margin-bottom:14px; }
.tcard p{ font-size:1rem; color:var(--ink); margin-bottom:22px; }
.tcard footer{ display:flex; align-items:center; gap:8px; }
.tcard footer img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.tcard__g{ display:grid; place-items:center; flex:none; }
.tcard__g svg{ width:26px; height:26px; }
.tcard footer strong{ color:var(--ink); font-size:.92rem; font-weight:700; }
.tcard__loc{ color:var(--muted); font-size:.88rem; }
.tcard__loc::before{ content:"·"; margin:0 6px 0 2px; color:var(--muted-2); }

/* ---------- Work & Reviews marquee ---------- */
.showcase .section__head{ margin-bottom:40px; }
.marquee{ overflow:hidden; padding:6px 2px;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.marquee__track{ display:flex; gap:20px; width:max-content; animation:mqscroll 55s linear infinite; will-change:transform; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes mqscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-card{ flex:none; height:290px; border-radius:var(--radius); }
.mq-photo{ position:relative; width:360px; overflow:hidden; box-shadow:var(--shadow-sm); margin:0; }
.mq-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mq-photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:28px 16px 15px; color:#fff; font-weight:700; font-size:.95rem; background:linear-gradient(transparent,rgba(15,26,52,.86)); }
.mq-review{ width:400px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); margin:0; }
.mq-review .tcard__stars{ color:var(--gold); letter-spacing:2px; }
.mq-review p{ font-size:1.02rem; color:var(--ink); margin:14px 0 auto; line-height:1.5; }
.mq-review footer{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.mq-review footer strong{ color:var(--ink); font-size:.92rem; font-weight:700; }

/* Diagnostic cards in the "what usually turns out to be wrong" marquee.
   align-self:stretch lets the flex track level every card to the tallest,
   so no fixed height has to be guessed at. */
.mq-diag{
  flex:none; width:400px; align-self:stretch; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 28px 24px;
  display:flex; flex-direction:column; gap:13px;
}
.mq-diag__head{ display:flex; align-items:center; gap:11px; }
.mq-diag__icon{ width:26px; height:26px; flex:none; background:var(--blue); }
.mq-diag__tag{ font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); }
.mq-diag__symptom{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; line-height:1.35; color:var(--ink); margin:0; }
.mq-diag__means{ font-size:.94rem; line-height:1.6; color:var(--muted); margin:0; }
.mq-diag__needs{ margin:auto 0 0; padding-top:15px; border-top:1px solid var(--line); font-size:.9rem; line-height:1.55; color:var(--ink); }
.mq-diag__needs strong{ color:var(--blue); font-weight:800; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }
@media (max-width:600px){
  .mq-card{ height:250px; }
  .mq-photo{ width:280px; }
  .mq-review{ width:320px; padding:24px; }
  .mq-diag{ width:300px; padding:22px 24px 20px; gap:11px; }
}

/* ---------- Service page: local content ---------- */
.local__inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start; }
.local__inner .section__title{ margin-bottom:6px; }
.local__inner .section__text{ margin-top:16px; }
.local__card{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:34px 32px; position:sticky; top:100px; }
.local__card h3{ font-size:1.3rem; color:#fff; margin-bottom:12px; }
.local__card p{ color:#c7d2de; font-size:.95rem; margin-bottom:20px; }
.ticklist{ list-style:none; display:grid; gap:11px; margin-bottom:24px; }
.ticklist li{ position:relative; padding-left:30px; font-size:.94rem; color:#e6ecf3; }
.ticklist li::before{ content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--light-blue); color:var(--navy); font-size:11px; font-weight:800; display:grid; place-items:center; }
/* A navy button on the navy local card is invisible. Invert it. */
.local__card .btn--primary{ background:#fff; color:var(--navy); border-color:#fff; }
.local__card .btn--primary:hover{ background:var(--light-blue); border-color:var(--light-blue); color:var(--navy); }

/* ---------- Service page: FAQ ---------- */
.faq{ background:var(--paper); }
.faq__list{ max-width:840px; margin:34px auto 0; display:grid; gap:30px; }
.faq__q{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--ink); margin-bottom:9px; }
.faq__a{ color:var(--muted); font-size:.98rem; line-height:1.7; }
.faq__a p{ margin:0; }
.faq__a p + p{ margin-top:12px; }

/* ---------- Service page: related services ---------- */
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.related__card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:border-color .2s ease, box-shadow .2s ease; color:var(--ink); }
.related__card:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
.related__card .scard__icon{ margin-bottom:16px; }
.related__card h3{ font-size:1.15rem; margin-bottom:8px; }
.related__card p{ color:var(--muted); font-size:.92rem; margin-bottom:14px; }

/* ---------- Contact ---------- */
.contact__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; }
.contact__list{ list-style:none; margin-top:28px; display:grid; gap:18px; }
.contact__list li{ display:flex; align-items:center; gap:16px; }
.contact__ic{ width:40px; color:var(--blue); display:grid; place-items:center; flex:none; }
.contact__ic svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact__list strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.contact__list a, .contact__list div span{ font-weight:700; font-size:1.02rem; color:var(--ink); }
.hours{ display:grid; grid-template-columns:auto 1fr; column-gap:26px; row-gap:0; margin-top:9px; max-width:250px; }
.hours b{ font-weight:600; color:var(--ink); font-size:.85rem; letter-spacing:.02em; padding:6px 0; border-top:1px solid var(--line); }
.hours em{ font-style:normal; color:var(--muted); font-size:.85rem; text-align:right; padding:6px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.hours b:first-of-type, .hours em:first-of-type{ border-top:none; }
.hours em.closed{ color:var(--blue); font-weight:600; }
.contact__map{ margin-top:44px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0; box-shadow:var(--shadow-sm); }
.contact__map iframe{ width:100%; height:360px; display:block; }
.contact__form{ background:linear-gradient(150deg,var(--blue),var(--blue-dark)); border:none; border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.contact__form .form-title{ grid-column:1 / -1; font-family:var(--font-head); font-weight:700; font-size:1.35rem; margin:0 0 6px; color:#fff; }
.contact__form .field2 > .ic{ color:var(--blue); }
.contact__form .field2 input, .contact__form .field2 select, .contact__form .field2 textarea{ background:#fff; border-color:transparent; }
.contact__form .field2 input:focus, .contact__form .field2 select:focus, .contact__form .field2 textarea:focus{ border-color:transparent; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.contact__form .btn--primary{ background:var(--navy); border-color:var(--navy); }
.contact__form .btn--primary:hover{ background:#16233b; border-color:#16233b; }
.field2{ margin:0; position:relative; }
.field2--full, .contact__form .btn, .contact__form .form-msg{ grid-column:1 / -1; }
.contact__form .form-msg{ color:#fff; }
.field2 > .ic{ position:absolute; left:13px; top:13px; width:18px; height:18px; color:var(--blue); fill:currentColor; stroke:none; pointer-events:none; z-index:1; }
.field2 input, .field2 select, .field2 textarea{ width:100%; padding:.72em 1em .72em 40px; border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.93rem; background:var(--paper); transition:.2s; resize:vertical; }
.field2 input:focus, .field2 select:focus, .field2 textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(62,100,167,.15); }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#a9bacb; padding-top:70px; }
.footer__inner{ display:grid; grid-template-columns:1.6fr .8fr .9fr 1.15fr .8fr 1fr; gap:34px 30px; padding-bottom:50px; }
.footer__logo{ display:inline-flex; align-items:center; gap:13px; background:#fff; border-radius:14px; padding:13px 18px; text-decoration:none; }
.footer__logo img{ height:54px; width:auto; display:block; }
.footer__brand p{ margin:0 0 18px; font-size:.92rem; max-width:320px; }

/* ---------- Blog ---------- */
.bloghub{ padding:74px 0 88px; }
.bloghub__title{ font-size:clamp(2.6rem,5.5vw,4rem); line-height:1; margin:14px 0 14px; }
.bloghub__lead{ color:var(--muted); font-size:1.05rem; max-width:620px; margin-bottom:42px; }
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease; }
.blog-card:hover{ border-color:var(--blue); box-shadow:var(--shadow); }
.blog-card__tag{ align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--navy); padding:5px 12px; border-radius:50px; margin-bottom:16px; }
.blog-card h3{ font-size:1.18rem; margin-bottom:10px; line-height:1.25; }
.blog-card p{ color:var(--muted); font-size:.94rem; margin-bottom:0; }
.blog-card__soon{ margin-top:auto; font-size:.82rem; font-weight:700; color:var(--muted-2); }
.blog-card--link{ text-decoration:none; color:inherit; }
.blog-card__more{ margin-top:auto; padding-top:16px; font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.blog-card__more .ic{ width:1em; height:1em; }

/* ---------- Blog article ---------- */
.arthead{ background:linear-gradient(150deg,var(--navy),var(--navy-3)); color:#fff; padding:60px 0 60px; overflow:hidden; }
.arthead__inner{ display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; }
.arthead .crumb a:hover{ color:#fff; }
.arthead__tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); padding:5px 13px; border-radius:50px; margin-bottom:18px; }
.arthead__title{ font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.05; margin-bottom:20px; max-width:28ch; color:#fff; }
.arthead__lead{ color:#cdd8e6; font-size:1.12rem; line-height:1.6; max-width:60ch; }
.arthead__media{ position:relative; }
.arthead__media img{ width:100%; height:420px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.arthead__media::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:26px; font-size:.86rem; color:#a9bacb; }
.postmeta span{ display:inline-flex; align-items:center; gap:7px; }
.postmeta .ic{ width:15px; height:15px; color:var(--light-blue); }
.postmeta em{ font-style:normal; opacity:.5; }

.article{ padding:56px 0 20px; }
.article__layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; align-items:start; }
.toc{ grid-column:1; grid-row:1; }
.article__body{ grid-column:2; grid-row:1; min-width:0; max-width:960px; }
.article p{ color:var(--muted); font-size:1.06rem; line-height:1.75; margin-bottom:22px; }
.article h2{ font-family:var(--font-head); font-weight:800; letter-spacing:0; color:var(--ink); font-size:clamp(1.5rem,2.6vw,1.95rem); line-height:1.2; margin:44px 0 16px; scroll-margin-top:120px; }
.article h3{ font-size:1.25rem; color:var(--ink); margin:30px 0 12px; }
.article ul, .article ol{ margin:0 0 22px; padding-left:0; list-style:none; display:grid; gap:12px; }
.article ul li{ position:relative; padding-left:30px; color:var(--muted); font-size:1.04rem; line-height:1.6; }
.article ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.article ol{ counter-reset:step; }
.article ol li{ position:relative; padding-left:42px; color:var(--muted); font-size:1.04rem; line-height:1.6; counter-increment:step; }
.article ol li::before{ content:counter(step)"."; position:absolute; left:0; top:-1px; width:26px; text-align:center; color:var(--blue-dark); font-family:var(--font-head); font-weight:800; font-size:1.05rem; }
.article li strong{ color:var(--ink); }
.article__body a:not(.btn){ color:var(--blue-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(62,100,167,.35); }
.article__body a:not(.btn):hover{ text-decoration-color:var(--blue-dark); }

/* Sticky table of contents */
.toc{ position:sticky; top:104px; align-self:start; }
.toc__title{ font-family:var(--font-head); font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; padding-left:15px; }
.toc__nav{ display:grid; gap:2px; border-left:2px solid var(--line); }
.toc__nav a{ display:block; padding:8px 0 8px 15px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); font-size:.92rem; line-height:1.35; text-decoration:none; transition:color .15s ease, border-color .15s ease; }
.toc__nav a:hover{ color:var(--ink); }
.toc__nav a.is-active{ color:var(--blue-dark); font-weight:700; border-left-color:var(--blue); }

.callout{ border:1px solid var(--line); background:var(--blue-soft); border-radius:12px; padding:22px 26px; margin:0 0 26px; }
.callout--warn{ background:#fff9ee; border-color:#f3e2c0; }
.callout__label{ font-family:var(--font-head); font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-dark); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.callout--warn .callout__label{ color:#b9791a; }
.callout__label .ic{ width:17px; height:17px; }
.callout p{ margin-bottom:0; font-size:1rem; color:var(--ink); }
.callout p + p{ margin-top:12px; }

.takeaways{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 30px; margin:0 0 34px; }
.takeaways h2{ margin:0 0 14px; font-size:1.15rem; }
.takeaways ul{ margin:0; }

.artfoot{ padding-top:6px; }
.artfoot__note{ font-size:.86rem; color:var(--muted-2); line-height:1.6; border-top:1px solid var(--line); padding-top:22px; }
.footer .col-title{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:.95rem; margin-bottom:18px; letter-spacing:.03em; }
.footer__brand .col-title{ margin-top:22px; }
.footer .col-title--sub{ margin-top:26px; }
.footer__col a, .footer__col span{ display:block; font-size:.9rem; margin-bottom:11px; color:#a9bacb; transition:.2s; }
.footer__links2{ display:grid; grid-template-columns:1fr 1fr; column-gap:26px; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.09); padding:20px 0; }
.footer__bottom-inner{ display:flex; justify-content:space-between; gap:16px; font-size:.82rem; color:#9aa9bb; }
.footer__bottom em{ font-style:normal; color:#5f6f80; }

/* ---------- Floaters ---------- */
.floaters{ position:fixed; right:20px; bottom:20px; z-index:70; display:flex; flex-direction:column; gap:12px; }
.floater{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 12px 26px -8px rgba(0,0,0,.4); transition:.25s; }
.floater svg{ width:26px; height:26px; fill:currentColor; }
.floater--call{ background:var(--blue); }
.floater:hover{ transform:scale(1.06); }
.ctaband__note{ margin-top:10px; color:rgba(255,255,255,.85); font-size:.95rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
/* Cards win the transition cascade so hover (border/shadow) stays snappy and
   isn't governed by the slower reveal transition */
.services__grid .scard{ transition:opacity .55s ease, transform .55s ease, border-color .15s ease, box-shadow .15s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; padding-bottom:120px; }
  .hero__media{ display:none; }
  .about__inner, .owner__inner, .contact__inner{ grid-template-columns:1fr; gap:40px; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .areagrid{ grid-template-columns:repeat(2,1fr); }
  .qform{ grid-template-columns:repeat(2,1fr); }
  .qform__submit{ grid-column:1/-1; }
  .ctaband__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:repeat(3,1fr); }
}
/* Straight above the drawer the nav is back inline and the full-size logo only
   just clears it, so ease the name in over the next 100px instead of stepping
   to 1.5rem at the breakpoint. */
@media (min-width:961px) and (max-width:1060px){
  .header .logo__name strong{ font-size:clamp(1.35rem, calc(2.42vw - 1.7px), 1.5rem); }
}
/* The horizontal nav and the call-out button need about 936px of room beside a
   full-size logo. Below that there is none, and the old 820px breakpoint left a
   band where the nav stayed inline and shoved the logo onto two lines. Hand that
   range to the drawer instead. */
@media (max-width:960px){
  /* .nav goes position:fixed below, leaving the flex flow, so its margin-left:auto
     stops pushing anything. Without these the burger sits immediately after the
     logo instead of against the right edge. */
  .header__actions{ margin-left:auto; margin-right:0; }
  .nav-toggle{ margin-right:-12px; }   /* optical: align the bars, not the 44px box */
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:#fff;
    flex-direction:column; align-items:stretch; gap:2px; padding:90px 22px 30px;
    box-shadow:-20px 0 60px -20px rgba(11,27,46,.4); transform:translateX(100%);
    transition:.32s; margin-left:0; overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ padding:.85em .6em; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__item--drop{ border-bottom:1px solid var(--line); }
  .nav__item--drop .nav__link{ border-bottom:none; }
  .nav__drop{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 8px 12px; min-width:0; display:none; max-height:none; overflow:visible; }
  .nav__item--drop::before, .nav__item--drop::after{ display:none; }
  .nav__item--drop.is-open .nav__drop{ display:block; }
  .nav-toggle{ display:flex; }
  .hide-sm{ display:none; }
}
@media (max-width:820px){
  .topbar__tag{ display:none; }
  .topbar__right{ flex:1; justify-content:space-between; }
  .services__grid, .work__grid, .testi__grid{ grid-template-columns:1fr; }
  .areagrid{ grid-template-columns:1fr; gap:28px; }
  .why__grid{ grid-template-columns:1fr 1fr; }
  .vm{ grid-template-columns:1fr; }
  .ctaband__form{ grid-template-columns:1fr; }
  .contact__form{ grid-template-columns:1fr; }
  .owner__points{ grid-template-columns:1fr; }
  .local__inner{ grid-template-columns:1fr; gap:36px; }
  .local__card{ position:static; }
  .related__grid{ grid-template-columns:1fr; }
  .blog__grid{ grid-template-columns:1fr; }
  .arthead{ padding:52px 0 44px; }
  .arthead__inner{ grid-template-columns:1fr; gap:34px; }
  .arthead__media{ order:-1; }
  .arthead__media img{ height:260px; }
  .article{ padding:44px 0 10px; }
  .article__layout{ grid-template-columns:1fr; gap:0; }
  .article__body{ max-width:none; }
  .toc{ display:none; }
  .section{ padding:70px 0; }
  .stats{ gap:26px; }
}
@media (max-width:480px){
  .header__inner{ gap:12px; }
  .header .logo{ gap:9px; min-width:0; }
  .header .logo__badge{ height:44px; }
  .header .logo__name strong{ font-size:clamp(1rem,5.2vw,1.28rem); }
  .header .logo__name em{ font-size:.52rem; letter-spacing:.16em; }
  .qform{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__bottom-inner{ flex-direction:column; text-align:center; }
  .why__grid{ grid-template-columns:1fr; }
  .hero__ratings{ flex-direction:column; align-items:flex-start; }
  .floater{ width:48px; height:48px; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}