/* =====================================================================
   Newark NJ Wallpaper Installer — style.css
   Warm-neutral interior aesthetic · muted sage accent
   Type: Besley (display serif) + Figtree (body sans)
   All palette pairs verified WCAG AA (contrast_check.py).
   Built with broadly-supported CSS (flexbox, grid, clamp, columns).
===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ivory:#F6F2EA;
  --porcelain:#FCFAF5;
  --stone:#EDE7DB;
  --taupe-tint:#E4DBCC;
  --charcoal:#23231F;
  --deep:#191915;

  --ink:#201F1A;
  --body:#3A3A32;
  --muted:#5C5A4E;
  --on-dark:#F0ECE2;
  --on-dark-muted:#B7B2A5;

  --accent:#3C5241;
  --accent-hover:#2E4132;
  --accent-dark:#A9BFA8;   /* accent tuned for dark backgrounds */

  --taupe:#B3A48D;         /* decorative only — never text */
  --rule:#DCD3C4;
  --rule-dark:#3A3A33;
  --line:#837A6A;          /* control borders (non-text, >=3:1) */
  --error:#A3302A;
  --footer-link:#C4BFB2;

  --serif:"Besley", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:1200px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:4px;
  --radius-lg:6px;
  --shadow-sm:0 1px 2px rgba(35,35,31,.05), 0 6px 18px rgba(35,35,31,.06);
  --shadow-md:0 12px 34px rgba(35,35,31,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--sans);
  color:var(--body);
  background:var(--ivory);
  line-height:1.65;
  font-size:clamp(16px,.55vw + 14.7px,17.5px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select { font:inherit; color:inherit; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family:var(--serif); color:var(--ink); line-height:1.12; font-weight:600; letter-spacing:-.012em; }
h2 { font-size:clamp(1.9rem,3.6vw,3rem); }
h3 { font-size:clamp(1.25rem,1.8vw,1.5rem); line-height:1.2; }
p { text-wrap:pretty; }
.serif-italic { font-family:var(--serif); font-style:italic; }

/* ---------- Layout helpers ---------- */
.wrap { width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.section { padding-block:clamp(64px,8vw,120px); }
.section--stone { background:var(--stone); }
.section--porcelain { background:var(--porcelain); }
.eyebrow {
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--taupe); display:inline-block; }
.eyebrow--center::after { content:""; width:26px; height:1px; background:var(--taupe); display:inline-block; }
.eyebrow--ondark { color:var(--accent-dark); }
.section-head { max-width:640px; }
.section-head.center { max-width:720px; margin-inline:auto; text-align:center; }
.section-head h2 { margin-top:18px; }
.section-head p { margin-top:16px; color:var(--muted); font-size:1.06rem; }
.lead { font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--body); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.92em 1.55em; border-radius:var(--radius); font-family:var(--sans);
  font-weight:600; font-size:.98rem; letter-spacing:.005em; line-height:1;
  transition:background .25s var(--ease), color .25s var(--ease),
             transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  border:1.5px solid transparent; text-align:center;
}
.btn svg { width:1.05em; height:1.05em; }
.btn--primary { background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(60,82,65,.24); }
.btn--primary:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 12px 26px rgba(60,82,65,.30); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--ondark { background:transparent; color:var(--on-dark); border-color:rgba(240,236,226,.32); }
.btn--ondark:hover { background:rgba(240,236,226,.08); border-color:var(--on-dark); transform:translateY(-2px); }
.btn--block { width:100%; }
.btn--lg { padding:1.05em 1.8em; font-size:1.02rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:60;
  background:rgba(246,242,234,.86);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { box-shadow:0 1px 0 var(--rule), 0 10px 30px rgba(35,35,31,.07); border-bottom-color:var(--rule); }
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:24px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand__mark { width:38px; height:38px; border-radius:9px; flex-shrink:0; }
.brand__text { display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand__name { font-family:var(--serif); font-weight:600; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; }
.brand__loc { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; }

.nav__links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav__links a {
  position:relative; padding:.55em .85em; border-radius:var(--radius);
  font-weight:500; font-size:.96rem; color:var(--body); transition:color .2s var(--ease);
}
.nav__links a::after {
  content:""; position:absolute; left:.85em; right:.85em; bottom:.32em; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__links a:hover { color:var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform:scaleX(1); }
.nav__links a.is-active { color:var(--accent); }
.nav__right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav__call { display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.95rem; color:var(--ink); }
.nav__call svg { width:1em; height:1em; color:var(--accent); }
.nav__cta { padding:.72em 1.2em; }

.nav__toggle { display:none; width:44px; height:44px; border-radius:var(--radius); align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span::before { position:absolute; transform:translateY(-7px); }
.nav__toggle span::after { position:absolute; transform:translateY(7px); }
.nav__toggle span { position:relative; }
body.menu-open .nav__toggle span { background:transparent; }
body.menu-open .nav__toggle span::before { transform:rotate(45deg); }
body.menu-open .nav__toggle span::after { transform:rotate(-45deg); }

/* ---------- Hero (split) ---------- */
.hero { position:relative; background:var(--ivory); }
.hero__inner {
  display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch;
  width:min(100% - var(--gutter)*2, 1320px); margin-inline:auto; gap:0;
}
.hero__text { padding:clamp(40px,6vw,88px) clamp(20px,4vw,72px) clamp(40px,6vw,88px) 0; align-self:center; max-width:620px; }
.hero__text .eyebrow { margin-bottom:22px; }
.hero h1 {
  font-size:clamp(2.5rem,5.2vw,4.15rem); line-height:1.04; letter-spacing:-.02em;
}
.hero h1 em { font-style:italic; color:var(--accent); }
.hero__sub { margin-top:22px; font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--muted); max-width:46ch; }
.hero__cta { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.hero__meta { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px 30px; padding-top:26px; border-top:1px solid var(--rule); }
.hero__meta div { display:flex; align-items:center; gap:.6em; font-size:.92rem; color:var(--body); }
.hero__meta svg { width:1.15em; height:1.15em; color:var(--accent); flex-shrink:0; }
.hero__media { position:relative; min-height:clamp(360px,60vh,660px); }
.hero__media img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); }
.hero__chip {
  position:absolute; left:22px; bottom:22px; right:22px;
  display:flex; align-items:center; gap:12px;
  background:rgba(246,242,234,.94); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:14px 18px; border-radius:var(--radius); box-shadow:var(--shadow-sm); max-width:330px;
}
.hero__chip .dot { width:34px; height:34px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.hero__chip .dot svg { width:17px; height:17px; color:#fff; }
.hero__chip b { display:block; font-family:var(--serif); font-size:.98rem; color:var(--ink); }
.hero__chip span { font-size:.8rem; color:var(--muted); }

/* ---------- Intro / marquee strip ---------- */
.intro { background:var(--charcoal); color:var(--on-dark); }
.intro__inner { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.intro h2 { color:var(--on-dark); font-size:clamp(1.55rem,2.6vw,2.15rem); }
.intro p { margin-top:18px; color:var(--on-dark-muted); }
.intro__points { display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; }
.intro__point { border-top:1px solid var(--rule-dark); padding-top:16px; }
.intro__point b { font-family:var(--serif); font-size:1.06rem; color:var(--on-dark); display:block; }
.intro__point span { font-size:.9rem; color:var(--on-dark-muted); }

/* ---------- Services ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px; }
.svc-card {
  background:var(--porcelain); border:1px solid var(--rule); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--taupe); }
.svc-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.svc-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc-card:hover .svc-card__media img { transform:scale(1.05); }
.svc-card__num {
  position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:50%;
  background:rgba(35,35,31,.72); color:var(--on-dark); font-family:var(--serif); font-size:.95rem;
  display:grid; place-items:center; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.svc-card__body { padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.svc-card__body h3 { color:var(--ink); }
.svc-card__body p { margin-top:11px; color:var(--muted); font-size:.96rem; }
.svc-card__link { margin-top:18px; display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.92rem; color:var(--accent); }
.svc-card__link svg { width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.svc-card:hover .svc-card__link svg { transform:translateX(4px); }

/* ---------- Why choose us ---------- */
.why__head { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:end; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:52px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; }
.why-cell { background:var(--stone); padding:30px 26px; display:flex; flex-direction:column; gap:14px; }
.why-cell__ico { width:46px; height:46px; border-radius:12px; background:var(--porcelain); border:1px solid var(--rule); display:grid; place-items:center; color:var(--accent); }
.why-cell__ico svg { width:22px; height:22px; }
.why-cell h3 { font-size:1.12rem; color:var(--ink); }
.why-cell p { font-size:.92rem; color:var(--muted); }

/* ---------- Process ---------- */
.process__inner { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,72px); align-items:center; }
.process__media { position:relative; }
.process__media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.process__media::before {
  content:""; position:absolute; inset:auto -18px -18px auto; width:62%; height:62%;
  border:1px solid var(--taupe); border-radius:var(--radius-lg); z-index:-1;
}
.steps { display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:auto 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--rule); }
.step:first-of-type { border-top:none; padding-top:0; }
.step__num { font-family:var(--serif); font-size:clamp(2rem,3vw,2.6rem); color:var(--accent); line-height:1; font-weight:600; }
.step__num small { display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; color:var(--muted); font-weight:600; margin-top:6px; }
.step h3 { color:var(--ink); }
.step p { margin-top:8px; color:var(--muted); font-size:.98rem; }

/* ---------- Gallery (CSS-columns masonry) ---------- */
.gallery { columns:3 280px; column-gap:18px; margin-top:52px; }
.gallery__item {
  break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-lg); overflow:hidden;
  position:relative; display:block; width:100%; background:var(--stone); box-shadow:var(--shadow-sm);
}
.gallery__item img { width:100%; height:auto; transition:transform .7s var(--ease); }
.gallery__item::after {
  content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(35,35,31,.42),transparent 55%);
  opacity:0; transition:opacity .35s var(--ease);
}
.gallery__cap {
  position:absolute; left:16px; bottom:14px; z-index:2; color:var(--on-dark);
  font-weight:600; font-size:.9rem; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); display:flex; align-items:center; gap:.5em;
}
.gallery__cap svg { width:1em; height:1em; }
.gallery__item:hover img { transform:scale(1.06); }
.gallery__item:hover::after { opacity:1; }
.gallery__item:hover .gallery__cap { opacity:1; transform:none; }

/* ---------- About ---------- */
.about__inner { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,76px); align-items:center; }
.about__media { position:relative; }
.about__media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.about__media::before {
  content:""; position:absolute; inset:-16px auto auto -16px; width:56%; height:56%;
  border:1px solid var(--taupe); border-radius:var(--radius-lg); z-index:-1;
}
.about__badge {
  position:absolute; right:-14px; bottom:-14px; background:var(--charcoal); color:var(--on-dark);
  border-radius:var(--radius-lg); padding:18px 22px; box-shadow:var(--shadow-md); max-width:220px;
}
.about__badge b { font-family:var(--serif); font-size:1.5rem; display:block; }
.about__badge span { font-size:.82rem; color:var(--on-dark-muted); letter-spacing:.03em; }
.about__body h2 { margin-top:18px; }
.about__body > p { margin-top:18px; color:var(--body); }
.about__list { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; list-style:none; }
.about__list li { display:flex; gap:.7em; align-items:flex-start; font-size:.96rem; color:var(--body); }
.about__list svg { width:1.15em; height:1.15em; color:var(--accent); flex-shrink:0; margin-top:.2em; }
.about__sign { margin-top:28px; display:flex; align-items:center; gap:16px; padding-top:22px; border-top:1px solid var(--rule); }
.about__sign .init { width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--serif); font-size:1.2rem; display:grid; place-items:center; }
.about__sign b { font-family:var(--serif); color:var(--ink); font-size:1.05rem; display:block; }
.about__sign span { font-size:.86rem; color:var(--muted); }

/* ---------- Contact (dark) ---------- */
.contact { background:var(--charcoal); color:var(--on-dark); }
.contact__inner { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,72px); align-items:start; }
.contact__intro h2 { color:var(--on-dark); }
.contact__intro .eyebrow { color:var(--accent-dark); }
.contact__intro p { margin-top:16px; color:var(--on-dark-muted); font-size:1.06rem; }
.contact__nap { margin-top:34px; list-style:none; display:flex; flex-direction:column; gap:2px; }
.contact__nap a, .contact__nap div { display:flex; gap:15px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--rule-dark); transition:color .2s var(--ease); }
.contact__nap li:first-child a, .contact__nap li:first-child div { border-top:none; }
.contact__nap .ico { width:40px; height:40px; border-radius:11px; background:rgba(169,191,168,.12); display:grid; place-items:center; color:var(--accent-dark); flex-shrink:0; }
.contact__nap .ico svg { width:19px; height:19px; }
.contact__nap .lbl { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.contact__nap .val { font-size:1.02rem; color:var(--on-dark); font-weight:500; overflow-wrap:anywhere; }
.contact__nap span { min-width:0; }
.contact__nap a:hover .val { color:var(--accent-dark); }

/* form */
.form-card { background:var(--porcelain); border-radius:var(--radius-lg); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow-md); }
.form-card h3 { color:var(--ink); font-size:1.35rem; }
.form-card > p { margin-top:8px; color:var(--muted); font-size:.95rem; margin-bottom:22px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label { font-size:.82rem; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.field label .req { color:var(--accent); }
.field input, .field textarea {
  width:100%; padding:.82em .95em; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius); color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color:#9a9080; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(60,82,65,.14); }
.field textarea { resize:vertical; min-height:118px; }
.form-note { margin-top:6px; font-size:.82rem; color:var(--muted); display:flex; gap:.5em; align-items:center; }
.form-note svg { width:1em; height:1em; color:var(--accent); flex-shrink:0; }
.error-message { color:#ff6b6b; }  /* supplied script injects inline styles; base color kept legible on porcelain via override below */
.form-card .error-message { color:var(--error); }

/* success */
#form-success { display:none; text-align:center; padding:26px 20px; }
#form-success .tick { width:66px; height:66px; border-radius:50%; background:rgba(60,82,65,.12); display:grid; place-items:center; margin:0 auto 18px; }
#form-success .tick svg { width:32px; height:32px; color:var(--accent); }
#form-success h3 { color:var(--ink); font-size:1.4rem; }
#form-success p { margin-top:10px; color:var(--muted); }

/* ---------- Map ---------- */
.map-section { background:var(--stone); }
.map-wrap { margin-top:44px; display:grid; grid-template-columns:1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--rule); }
.map-frame { position:relative; min-height:clamp(300px,44vw,460px); background:var(--taupe-tint); }
.map-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-fallback {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:30px; background:var(--taupe-tint); color:var(--ink); z-index:0;
}
.map-fallback svg { width:38px; height:38px; color:var(--accent); }
.map-bar { display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center; justify-content:space-between; background:var(--porcelain); padding:22px clamp(20px,3vw,34px); }
.map-bar__addr { display:flex; align-items:center; gap:14px; }
.map-bar__addr .ico { width:44px; height:44px; border-radius:12px; background:var(--stone); display:grid; place-items:center; color:var(--accent); flex-shrink:0; }
.map-bar__addr .ico svg { width:21px; height:21px; }
.map-bar__addr b { font-family:var(--serif); color:var(--ink); display:block; font-size:1.02rem; }
.map-bar__addr span { font-size:.9rem; color:var(--muted); }

/* ---------- Footer ---------- */
.footer { background:var(--deep); color:var(--on-dark-muted); padding-block:clamp(52px,6vw,76px) 0; }
.footer__top { display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:clamp(30px,5vw,64px); }
.footer__brand .brand__name { color:var(--on-dark); }
.footer__brand .brand__loc { color:var(--on-dark-muted); }
.footer__tag { margin-top:18px; font-size:.95rem; color:var(--on-dark-muted); max-width:34ch; }
.footer h4 { color:var(--on-dark); font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:18px; }
.footer__nav { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer__nav a { color:var(--footer-link); font-size:.98rem; transition:color .2s var(--ease); width:max-content; }
.footer__nav a:hover { color:var(--accent-dark); }
.footer__contact { list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer__contact a, .footer__contact li > span { display:flex; gap:11px; align-items:flex-start; color:var(--footer-link); font-size:.97rem; transition:color .2s var(--ease); overflow-wrap:anywhere; }
.footer__contact a:hover { color:var(--accent-dark); }
.footer__contact svg { width:1.05em; height:1.05em; color:var(--accent-dark); flex-shrink:0; margin-top:.28em; }
.footer__bottom { margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--rule-dark); padding-block:26px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; font-size:.86rem; color:var(--on-dark-muted); }
.footer__bottom a { color:var(--on-dark-muted); }
.footer__bottom a:hover { color:var(--accent-dark); }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(25,25,21,.9); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lightbox.is-open { display:flex; }
.lightbox img { max-width:100%; max-height:86vh; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav {
  position:absolute; background:rgba(246,242,234,.12); border:1px solid rgba(240,236,226,.28); color:var(--on-dark);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:background .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background:rgba(246,242,234,.22); }
.lightbox__close { top:24px; right:24px; }
.lightbox__close svg, .lightbox__nav svg { width:22px; height:22px; }
.lightbox__nav { top:50%; transform:translateY(-50%); }
.lightbox__nav--prev { left:24px; }
.lightbox__nav--next { right:24px; }
.lightbox__nav:hover { transform:translateY(-50%) scale(1.06); }

/* =====================================================================
   Scroll-reveal — progressive enhancement.
   Content is VISIBLE by default. Only when JS adds .enhance to <html>
   (after confirming IntersectionObserver) do reveal targets start hidden.
   Motion itself is gated behind prefers-reduced-motion.
===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .enhance [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .enhance [data-reveal].is-in{ opacity:1; transform:none; }
  .enhance [data-reveal][data-reveal="stagger"] > *{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .enhance [data-reveal].is-in > *{ opacity:1; transform:none; }
  .enhance [data-reveal].is-in > *:nth-child(2){ transition-delay:.08s; }
  .enhance [data-reveal].is-in > *:nth-child(3){ transition-delay:.16s; }
  .enhance [data-reveal].is-in > *:nth-child(4){ transition-delay:.24s; }
  .enhance [data-reveal].is-in > *:nth-child(5){ transition-delay:.32s; }
  .enhance [data-reveal].is-in > *:nth-child(6){ transition-delay:.40s; }
}
/* Print: force everything visible */
@media print {
  [data-reveal], [data-reveal] > *{ opacity:1 !important; transform:none !important; }
  .site-header, .nav__toggle, .lightbox { display:none !important; }
}

/* =====================================================================
   Responsive
===================================================================== */
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  :root{ --header-h:66px; }
  /* keep the long brand from pushing the toggle off-screen */
  .brand__name{ font-size:.98rem; }
  .brand__loc{ font-size:.62rem; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  /* mobile nav drawer */
  .nav__toggle{ display:inline-flex; }
  .nav__links, .nav__call { display:none; }
  .nav__menu {
    position:fixed; inset:var(--header-h) 0 auto 0; background:var(--porcelain);
    border-bottom:1px solid var(--rule); box-shadow:var(--shadow-md);
    padding:22px var(--gutter) 30px; flex-direction:column; align-items:stretch; gap:4px;
    transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  body.menu-open .nav__menu{ transform:none; opacity:1; pointer-events:auto; visibility:visible; }
  .nav__menu .nav__links{ display:flex; flex-direction:column; align-items:stretch; gap:2px; }
  .nav__menu .nav__links a{ padding:.85em .4em; font-size:1.08rem; border-bottom:1px solid var(--rule); border-radius:0; }
  .nav__menu .nav__links a::after{ display:none; }
  .nav__menu .nav__call{ display:inline-flex; margin-top:16px; font-size:1.05rem; }
  .nav__menu .btn{ margin-top:16px; }
  .nav__cta.nav__cta--desktop{ display:none; }

  .hero__inner{ grid-template-columns:1fr; width:min(100% - var(--gutter)*2, var(--wrap)); }
  .hero__text{ padding:clamp(34px,7vw,56px) 0 clamp(28px,5vw,40px); order:2; max-width:none; }
  .hero__media{ order:1; min-height:clamp(300px,52vw,460px); }
  .intro__inner{ grid-template-columns:1fr; }
  .process__inner, .about__inner, .contact__inner, .why__head{ grid-template-columns:1fr; }
  .process__media{ order:-1; }
  .about__media{ max-width:560px; }
  .contact__intro{ margin-bottom:8px; }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .intro__points{ grid-template-columns:1fr; }
  .about__list{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .gallery{ columns:2 150px; column-gap:12px; }
  .gallery__item{ margin-bottom:12px; }
  .hero__meta{ gap:12px 22px; }
  .about__media::before, .process__media::before{ display:none; }
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__nav--prev{ left:12px; } .lightbox__nav--next{ right:12px; } .lightbox__close{ top:14px; right:14px; }
  .map-bar{ flex-direction:column; align-items:flex-start; }
  .map-bar .btn{ width:100%; }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width:380px){
  .gallery{ columns:1; }
  .hero__chip{ left:14px; right:14px; bottom:14px; }
}