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

:root{
  /* Brand palette - The Alberton 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, .footer__social .ic, .topbar__social .ic{ 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); }
.topbar__social{ display:flex; align-items:center; gap:12px; }
.topbar__social span{ color:#7e8ea0; }
.topbar__social a{ color:#c7d2de; display:inline-flex; transition:.2s; }
.topbar__social a:hover{ color:#fff; }
.topbar__social .ic{ width:16px; height:16px; }

/* ---------- 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; min-width:284px;
  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);
  /* The services list is long enough to run off a short laptop screen, so cap it
     and let it scroll. The arrow and the hover bridge live on the parent instead,
     because overflow on this box would clip anything sitting outside it. */
  max-height:min(70vh, 620px); overflow-y:auto; overscroll-behavior:contain; 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) ---------- */
.quotecard{ position:relative; margin-top:-80px; z-index:5; }
.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; }
.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; }
.section__title--light{ color:#fff; }
.section__text{ color:var(--muted); margin-top:16px; font-size:1.02rem; }
.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); }
.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;
}

/* ---------- 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; }
@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; }
}

/* ---------- 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; }

/* ---------- 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.5fr .9fr 1fr 1fr 1.2fr; gap:36px; 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__social{ display:flex; gap:10px; }
.footer__social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#c7d2de; transition:.2s; }
.footer__social a:hover{ background:var(--blue); color:#fff; }
.footer__social .ic{ width:18px; height:18px; }
.footer__social a.social--brand{ background:transparent; }
.footer__social a.social--brand:hover{ background:transparent; transform:translateY(-2px); }
.footer__social .brand-ic{ width:26px; height:26px; display:block; }
.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:#7e8ea0; }
.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--wa{ background:#25d366; }
.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); }
  .qform{ grid-template-columns:repeat(2,1fr); }
  .qform__submit{ grid-column:1/-1; }
  .ctaband__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 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; }
  .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; }
  .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; }
}