/* ==========================================================================
   Gastonia Wallpaper Installer — design system
   Palette: warm ivory / stone / taupe / charcoal, muted brass accent.
   Type: EB Garamond (display serif) + Libre Franklin (UI/body).
   All text pairs contrast-checked (AA); --taupe and --rule are decorative
   only; --line is a non-text control border (>=3:1).
   ========================================================================== */

:root {
  --ivory:#F6F2E9; --porcelain:#FCFAF4; --stone:#EDE7DB; --taupe-tint:#E3DACB;
  --charcoal:#2A2723; --onyx:#1C1A16;
  --ink:#201E19; --body:#3C382F; --muted:#5C564A;
  --on-dark:#F1ECE0; --on-dark-muted:#BCB4A4;
  --accent:#7E5D22; --accent-hover:#674E1B; --accent-dark:#CDA75F;
  --taupe:#A99B84;               /* decorative only — never text */
  --rule:#DBD3C4; --rule-dark:#3C382F; --line:#70675A; --error:#A32B22;

  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --sans:"Libre Franklin", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --wrap:1200px;
  --gutter:clamp(1.15rem, 4vw, 3rem);
  --radius:3px;
  --shadow:0 1px 2px rgba(32,30,25,.05), 0 10px 30px -18px rgba(32,30,25,.28);
  --shadow-lg:0 2px 6px rgba(32,30,25,.06), 0 26px 60px -30px rgba(32,30,25,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ivory); color:var(--body);
  font-family:var(--sans); font-weight:400; font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:500; line-height:1.12; margin:0}
p{margin:0 0 1.05em}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px}
.skip-link{position:absolute; left:-999px; top:0; background:var(--onyx); color:var(--on-dark);
  padding:.7rem 1.1rem; z-index:200; border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* ---------- helpers ---------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(3.6rem,7vw,6.5rem)}
.section--stone{background:var(--stone)}
.section--tint{background:var(--taupe-tint)}
.eyebrow{
  font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; display:inline-block; flex:none}
.eyebrow--center{justify-content:center}
h2.h-lg{font-size:clamp(1.95rem,1.4rem + 2.4vw,3.2rem); letter-spacing:-.01em; max-width:20ch}
.lede{font-size:clamp(1.08rem,1.02rem + .35vw,1.28rem); color:var(--muted); max-width:60ch; line-height:1.65}
.serif-accent{font-style:italic; color:var(--accent)}
.center{text-align:center} .center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.94rem; letter-spacing:.01em;
  padding:.92em 1.7em; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-hover); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--ondark{background:var(--accent-dark); color:#241E15}
.btn--ondark:hover{background:#dcbb7c; color:#241E15}
.btn--ghost-dark{background:transparent; color:var(--on-dark); border-color:rgba(241,236,224,.32)}
.btn--ghost-dark:hover{border-color:var(--accent-dark); color:var(--accent-dark)}
.btn--block{width:100%}

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:100; background:rgba(246,242,233,.86);
  backdrop-filter:saturate(1.1) blur(9px); -webkit-backdrop-filter:saturate(1.1) blur(9px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s}
.header.is-stuck{border-bottom-color:var(--rule); box-shadow:0 8px 24px -22px rgba(32,30,25,.5)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); flex:none}
.brand__mark{width:34px; height:34px; flex:none; border-radius:6px}
.brand__name{font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.05; letter-spacing:.01em}
.brand__name small{display:block; font-family:var(--sans); font-weight:600; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:2px}
.nav__links{display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0}
.nav__links a{font-family:var(--sans); font-weight:500; font-size:.92rem; color:var(--body);
  text-decoration:none; padding:.5rem .7rem; border-radius:var(--radius); position:relative; transition:color .2s}
.nav__links a::after{content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; 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{color:var(--ink)} .nav__links a.is-active::after{transform:scaleX(1)}
.nav__cta{margin-left:.4rem}
.nav__toggle{display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent;
  border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:transform .3s var(--ease), opacity .2s}
.nav__toggle span::before{position:absolute; top:-6px} .nav__toggle span::after{position:absolute; top:6px}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:99; visibility:hidden; pointer-events:none}
.drawer__scrim{position:absolute; inset:0; background:rgba(28,26,22,.5); opacity:0; transition:opacity .3s}
.drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(84vw,340px);
  background:var(--ivory); box-shadow:var(--shadow-lg); padding:calc(72px + 1.4rem) var(--gutter) 2rem;
  transform:translateX(100%); transition:transform .34s var(--ease); display:flex; flex-direction:column; gap:.2rem; overflow-y:auto}
.drawer__panel a{font-family:var(--serif); font-size:1.35rem; color:var(--ink); text-decoration:none;
  padding:.6rem 0; border-bottom:1px solid var(--rule)}
.drawer__panel .btn{margin-top:1.3rem}
body.drawer-open{overflow:hidden}
body.drawer-open .drawer{visibility:visible; pointer-events:auto}
body.drawer-open .drawer__scrim{opacity:1}
body.drawer-open .drawer__panel{transform:translateX(0)}
body.drawer-open .nav__toggle span{background:transparent}
body.drawer-open .nav__toggle span::before{transform:translateY(6px) rotate(45deg)}
body.drawer-open .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero (split: copy left, photo right) ---------- */
.hero{background:var(--ivory); border-bottom:1px solid var(--rule)}
.hero__grid{display:grid; grid-template-columns:1.02fr 1.1fr; gap:clamp(1.6rem,4vw,4rem); align-items:center;
  padding-block:clamp(2.6rem,5vw,4.6rem)}
.hero__copy{max-width:33rem}
.hero h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.35rem); letter-spacing:-.015em; margin:.2rem 0 1.1rem}
.hero h1 em{font-style:italic; color:var(--accent); font-weight:500}
.hero__lede{font-size:clamp(1.08rem,1rem + .4vw,1.3rem); color:var(--muted); max-width:44ch; margin-bottom:1.9rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem}
.hero__figure{position:relative}
.hero__figure img{width:100%; aspect-ratio:1760/1000; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-lg)}
.hero__figure::before{content:""; position:absolute; top:-14px; left:-14px; width:58%; height:3px; background:var(--accent); border-radius:2px}
.hero__figure::after{content:""; position:absolute; right:-14px; bottom:-14px; width:120px; height:120px;
  border:1px solid var(--taupe); border-radius:var(--radius); z-index:-1}
.hero__chip{position:absolute; left:16px; bottom:16px; background:rgba(246,242,233,.94); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem .85rem; border-radius:var(--radius); box-shadow:var(--shadow)}
.hero__pillars{border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(3,1fr)}
.hero__pillars li{list-style:none; padding:1.15rem clamp(1rem,3vw,2rem); border-right:1px solid var(--rule);
  font-family:var(--sans); font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:.7rem}
.hero__pillars li:last-child{border-right:0}
.hero__pillars b{color:var(--ink); font-family:var(--serif); font-weight:600; font-size:1.06rem}
.pillar-mark{width:8px; height:8px; flex:none; background:var(--accent); transform:rotate(45deg); margin-top:1px}

/* ---------- section head ---------- */
.sec-head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head.center{margin-inline:auto}

/* ---------- services (editorial numbered rows) ---------- */
.services__list{border-top:1px solid var(--rule)}
.service{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.4rem); align-items:baseline;
  padding:clamp(1.5rem,3vw,2.3rem) 0; border-bottom:1px solid var(--rule)}
.service__num{font-family:var(--serif); font-size:clamp(1.3rem,1rem + 1vw,1.7rem); color:var(--accent);
  font-weight:500; min-width:2.6ch}
.service__body h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-bottom:.5rem; color:var(--ink)}
.service__body p{margin:0; color:var(--muted); max-width:64ch}
.service__tag{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; padding-top:.4rem}

/* ---------- why (dark band) ---------- */
.why{background:var(--charcoal); color:var(--on-dark)}
.why .eyebrow{color:var(--accent-dark)}
.why h2{color:var(--on-dark)}
.why__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.why__lede{color:var(--on-dark-muted); font-size:clamp(1.05rem,1rem + .3vw,1.2rem); max-width:46ch; margin-bottom:2rem}
.why__cells{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule-dark); border-radius:var(--radius); overflow:hidden}
.why__cells li{list-style:none; padding:1.15rem 1.25rem; border-right:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
  display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:var(--on-dark)}
.why__cells li:nth-child(2n){border-right:0}
.why__cells li:nth-last-child(-n+2){border-bottom:0}
.why__cells .tick{color:var(--accent-dark); flex:none; margin-top:1px}
.why__figure img{width:100%; aspect-ratio:1500/940; object-fit:cover; border-radius:var(--radius)}
.why__figure{position:relative}
.why__figure::after{content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(241,236,224,.14)}

/* ---------- about ---------- */
.about__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about__figure{position:relative; max-width:420px}
.about__figure img{width:100%; aspect-ratio:1000/1250; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.about__figure::before{content:""; position:absolute; top:18px; left:18px; right:-18px; bottom:-18px;
  border:1px solid var(--taupe); border-radius:var(--radius); z-index:-1}
.about__mark{position:absolute; right:-14px; top:-14px; width:62px; height:62px; background:var(--onyx); color:var(--accent-dark);
  border-radius:var(--radius); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:.04em; box-shadow:var(--shadow)}
.about__body p{color:var(--body); max-width:60ch}
.about__body p.first{font-size:clamp(1.1rem,1.02rem + .4vw,1.32rem); color:var(--ink); font-family:var(--serif); line-height:1.5}
.about__sign{margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--rule)}
.about__sign b{font-family:var(--serif); font-size:1.2rem; color:var(--ink); display:block}
.about__sign span{font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2rem); counter-reset:step; margin-top:1rem}
.step{position:relative; padding-top:2.6rem; border-top:2px solid var(--rule)}
.step::before{content:""; position:absolute; top:-2px; left:0; width:46px; height:2px; background:var(--accent)}
.step__num{font-family:var(--serif); font-size:1.05rem; color:var(--accent); font-weight:600; letter-spacing:.12em; margin-bottom:.65rem}
.step h3{font-size:1.28rem; margin-bottom:.5rem; color:var(--ink)}
.step p{color:var(--muted); font-size:.97rem; margin:0}

/* ---------- gallery (CSS-columns masonry) ---------- */
.gallery{columns:3; column-gap:16px; margin-top:.5rem}
.gallery__item{break-inside:avoid; margin:0 0 16px; padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden; position:relative; display:block; width:100%; box-shadow:var(--shadow)}
.gallery__item img{width:100%; transition:transform .55s var(--ease); background:var(--stone)}
.gallery__item::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(28,26,22,.34));
  opacity:0; transition:opacity .35s}
.gallery__cap{position:absolute; left:12px; bottom:10px; right:12px; color:#fff; font-family:var(--sans);
  font-size:.8rem; font-weight:500; letter-spacing:.01em; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; z-index:2; text-align:left}
.gallery__item:hover img{transform:scale(1.045)}
.gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1}
.gallery__item:hover .gallery__cap,.gallery__item:focus-visible .gallery__cap{opacity:1; transform:none}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(20,18,15,.92); display:none;
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem)}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1100px,94vw); max-height:88vh; width:auto; border-radius:var(--radius); box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lightbox__close,.lightbox__nav{position:absolute; background:rgba(246,242,233,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.4rem; display:grid; place-items:center; transition:background .2s}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(246,242,233,.24)}
.lightbox__close{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)}
.lightbox__nav{top:50%; transform:translateY(-50%)}
.lightbox__nav--prev{left:clamp(.6rem,2vw,1.5rem)} .lightbox__nav--next{right:clamp(.6rem,2vw,1.5rem)}
.lightbox__cap{position:absolute; bottom:clamp(1rem,3vw,2rem); left:0; right:0; text-align:center; color:var(--on-dark-muted); font-size:.85rem; padding-inline:1rem}

/* ---------- CTA band ---------- */
.cta{background:var(--onyx); color:var(--on-dark); text-align:center}
.cta .eyebrow{color:var(--accent-dark); justify-content:center}
.cta h2{color:var(--on-dark); font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem); margin-bottom:1rem}
.cta p{color:var(--on-dark-muted); max-width:52ch; margin:0 auto 2rem}
.cta__actions{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center}

/* ---------- contact ---------- */
.contact{background:var(--charcoal); color:var(--on-dark)}
.contact__grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.contact .eyebrow{color:var(--accent-dark)} .contact h2{color:var(--on-dark)}
.contact__intro{color:var(--on-dark-muted); max-width:44ch; margin-bottom:2rem}
.contact__list{list-style:none; margin:0; padding:0; display:grid; gap:1.15rem}
.contact__list li{display:flex; gap:.95rem; align-items:flex-start}
.contact__ic{width:40px; height:40px; flex:none; border:1px solid var(--rule-dark); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--accent-dark)}
.contact__list .lbl{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); display:block; margin-bottom:.15rem}
.contact__list a,.contact__list address{color:var(--on-dark); text-decoration:none; font-style:normal; font-size:1.02rem; line-height:1.45}
.contact__list a:hover{color:var(--accent-dark)}

/* form card */
.formcard{background:var(--porcelain); color:var(--body); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem,3vw,2.4rem)}
.formcard h3{font-size:1.5rem; margin-bottom:.35rem; color:var(--ink)}
.formcard .sub{color:var(--muted); font-size:.95rem; margin-bottom:1.6rem}
.field{margin-bottom:1.15rem}
.field label{display:block; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  color:var(--ink); margin-bottom:.4rem}
.field .req{color:var(--accent)}
.field input,.field textarea{width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; transition:border-color .2s, box-shadow .2s}
.field textarea{min-height:130px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9a9284}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(126,93,34,.16)}
.field.row2{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; margin-bottom:0}
.field.row2 .field{margin-bottom:1.15rem}
.error-message{color:var(--error)!important; margin-top:5px; font-size:.82rem; font-weight:500; display:flex; gap:.35rem; align-items:center}
.error-message::before{content:"!"; width:15px; height:15px; flex:none; border-radius:50%; background:var(--error); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; margin-top:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.form-success{display:none; text-align:center; padding:1.6rem .5rem}
.form-success .check{width:58px; height:58px; margin:0 auto 1rem; border-radius:50%; background:rgba(126,93,34,.12);
  color:var(--accent); display:grid; place-items:center}
.form-success h3{margin-bottom:.4rem}
.form-success p{color:var(--muted); margin:0}
.form-note{font-size:.78rem; color:var(--muted); margin-top:1rem; text-align:center}

/* ---------- location / map ---------- */
.location__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center}
.location dl{margin:1.4rem 0 1.7rem; display:grid; gap:.9rem}
.location dt{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.1rem}
.location dd{margin:0; font-family:var(--serif); font-size:1.15rem; color:var(--ink)}
.location__map{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--rule); background:var(--stone)}
.location__map iframe{display:block; width:100%; height:clamp(280px,40vw,430px); border:0}
.location__mapfallback{display:block; padding:2.5rem 1.5rem; text-align:center; color:var(--muted); font-size:.95rem}

/* ---------- footer ---------- */
.footer{background:var(--onyx); color:var(--on-dark-muted); padding-block:clamp(2.6rem,5vw,3.6rem)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.6rem,4vw,3rem); padding-bottom:2.2rem; border-bottom:1px solid var(--rule-dark)}
.footer__brand .brand__name{color:var(--on-dark)}
.footer__brand p{margin:1rem 0 0; max-width:34ch; font-size:.92rem}
.footer h4{color:var(--on-dark); font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; font-weight:600}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.footer a{color:var(--on-dark-muted); text-decoration:none; font-size:.94rem}
.footer a:hover{color:var(--accent-dark)}
.footer__bottom{padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.82rem}
.footer__bottom p{margin:0}

/* ---------- reveal animation (progressive enhancement) ----------
   Visible by default. JS adds .reveal-on to <html> only when
   IntersectionObserver exists; only then do targets start hidden. */
@media (prefers-reduced-motion: no-preference){
  html.reveal-on .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  html.reveal-on .reveal.is-visible{opacity:1; transform:none}
  html.reveal-on .reveal[data-delay="1"]{transition-delay:.08s}
  html.reveal-on .reveal[data-delay="2"]{transition-delay:.16s}
  html.reveal-on .reveal[data-delay="3"]{transition-delay:.24s}
}
@media print{.reveal{opacity:1!important; transform:none!important}
  .header,.drawer,.nav__toggle,.lightbox{display:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:2rem}
  .hero__figure{order:-1}
  .why__grid,.about__grid,.contact__grid,.location__grid{grid-template-columns:1fr}
  .about__figure{order:-1; margin-inline:auto}
  .why__figure{order:-1}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:2.4rem}
  .gallery{columns:2}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:920px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
}
@media (max-width:760px){
  .hero__pillars{grid-template-columns:1fr}
  .hero__pillars li{border-right:0; border-bottom:1px solid var(--rule)}
  .hero__pillars li:last-child{border-bottom:0}
  .service{grid-template-columns:auto 1fr; row-gap:.3rem}
  .service__tag{grid-column:2; padding-top:.2rem}
  .why__cells{grid-template-columns:1fr}
  .why__cells li{border-right:0}
  .why__cells li:nth-last-child(2){border-bottom:1px solid var(--rule-dark)}
  .field.row2{grid-template-columns:1fr; gap:0}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .gallery{columns:1}
  .steps{grid-template-columns:1fr}
  .hero__figure::after{display:none}
}