/* =========================================================
   ATILIANDOZZY GLOBAL NIG LTD
   Wrought iron, steel and glass works — one page site
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --black:#000000;
  --orange:#FF6000;
  --gray:#F2F2F2;
  --white:#FFFFFF;

  --ink:#000000;
  --ink-soft:rgba(0,0,0,.62);
  --ink-faint:rgba(0,0,0,.12);
  --light:#FFFFFF;
  --light-soft:rgba(255,255,255,.66);
  --light-faint:rgba(255,255,255,.16);

  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --max:1320px;
  --section:clamp(72px,10vw,140px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.32s var(--ease);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(15px,.5vw + 14px,17px);
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}

body.is-locked{overflow:hidden;}

img{display:block;max-width:100%;}
a{color:inherit;}

h1,h2,h3{
  margin:0;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange);color:var(--white);
  padding:12px 20px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0;}

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

/* ---------- 3. Shared type ---------- */
.h2{font-size:clamp(30px,4.2vw,58px);}

.eyebrow{
  margin:0 0 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::after{
  content:"";
  flex:0 0 40px;
  height:1px;
  background:var(--orange);
}
.eyebrow--light{color:var(--orange);}

.link-arrow{
  display:inline-block;
  margin-top:8px;
  font-weight:600;
  text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding-bottom:3px;
  transition:color var(--t);
}
.link-arrow:hover{color:var(--orange);}
.link-arrow--light{color:var(--light);}

.section-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,4vw,60px);
  align-items:end;
  padding-bottom:clamp(32px,4vw,56px);
  border-bottom:1px solid var(--ink-faint);
  margin-bottom:clamp(32px,4vw,56px);
}
.section-head__sub{
  font-size:clamp(16px,1.4vw,20px);
  font-weight:500;
  color:var(--ink-soft);
  max-width:38ch;
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 30px;
  font:600 14px/1 var(--font);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  background:none;
  cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn--primary{background:var(--orange);color:var(--white);}
.btn--primary:hover{background:var(--black);}
.btn--ghost{border-color:rgba(255,255,255,.5);color:var(--white);}
.btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white);}
.btn--dark{background:var(--black);color:var(--white);}
.btn--dark:hover{background:var(--orange);}
.btn--sm{min-height:42px;padding:0 20px;font-size:12px;}
.btn--block{width:100%;}

/* ---------- 5. Image frames + photo-slot fallback ---------- */
.frame{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#0a0a0a;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.frame.is-empty img{display:none;}
.frame.is-empty{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),
    #0d0d0d;
}
.frame.is-empty::after{
  content:attr(data-slot);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.frame.is-empty::before{
  content:"";
  position:absolute;
  left:14px;top:14px;
  width:20px;height:20px;
  border-left:2px solid var(--orange);
  border-top:2px solid var(--orange);
}

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top,0px);
  transition:border-color var(--t);
}
/* Blur lives on a separate layer, not on .nav itself: backdrop-filter/filter on
   an element creates a new containing block for position:fixed descendants,
   which breaks the full-screen mobile menu panel (most visible in Safari on
   iOS, where the panel gets pinned to the header's own small height instead
   of the viewport). Keeping .nav filter-free avoids that entirely. */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background var(--t);
}
.nav.is-stuck{border-bottom-color:var(--light-faint);}
.nav.is-stuck::before{background:rgba(0,0,0,.96);}
.nav__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav__brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--white);
}
.nav__logo{height:34px;width:auto;}
.nav__brandtext{
  font-size:15px;
  font-weight:500;
  letter-spacing:.1em;
  white-space:nowrap;
}
.nav__brandtext b{font-weight:800;}
.nav__logo:not([hidden]) + .nav__brandtext{display:none;}

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,32px);
}
.nav__links a{
  font-size:14px;
  font-weight:600;
  color:var(--light-soft);
  text-decoration:none;
  transition:color var(--t);
}
.nav__links a:hover,
.nav__links a.is-active{color:var(--white);}
.nav__links a.is-active{color:var(--orange);}
.nav__cta,
.nav__cta.is-active{color:var(--white);}

.nav__toggle{
  display:none;
  position:relative;
  z-index:95;
  width:44px;height:44px;
  padding:0;
  border:0;background:none;cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav__toggle span{
  display:block;
  width:24px;height:2px;
  background:var(--white);
  transition:transform var(--t),opacity var(--t);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  background:var(--black);
  overflow:hidden;
}
.hero__frames{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.hero__frames .frame{height:100%;}
.hero__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.5) 100%);
}
.hero__content{
  position:relative;
  z-index:2;
  padding-top:140px;
  padding-bottom:clamp(90px,12vh,150px);
  max-width:var(--max);
}
.hero__title{
  font-size:clamp(40px,7.2vw,104px);
  max-width:14ch;
  margin-bottom:26px;
}
.hero__lead{
  max-width:52ch;
  font-size:clamp(16px,1.3vw,20px);
  color:rgba(255,255,255,.82);
  margin-bottom:34px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  z-index:2;
  width:26px;height:44px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
  display:flex;
  justify-content:center;
  padding-top:9px;
}
.hero__scroll span{
  width:3px;height:8px;
  border-radius:2px;
  background:var(--orange);
}

/* ---------- 8. Intro ---------- */
.intro{padding:var(--section) 0;background:var(--white);}
.intro__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(32px,6vw,90px);
  align-items:center;
}
.intro__copy p{color:var(--ink-soft);max-width:54ch;}
.intro__copy .h2{margin-bottom:26px;}

.intro__stack{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto auto;
  gap:18px;
}
.intro__stack .frame--tall{
  grid-column:1/6;
  aspect-ratio:4/5;
}
.intro__stack .frame--wide{
  grid-column:3/7;
  grid-row:2;
  aspect-ratio:16/10;
  margin-top:-26%;
  border:10px solid var(--white);
}

/* ---------- 9. Dark sections / About ---------- */
.section--dark{
  background:var(--black);
  color:var(--white);
  padding:var(--section) 0;
}
.section--dark .section-head{border-bottom-color:var(--light-faint);}

.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,96px);
  align-items:start;
}
.about__lead{
  margin-top:26px;
  font-size:clamp(16px,1.4vw,20px);
  color:var(--light-soft);
  max-width:48ch;
}
.pillars{list-style:none;margin:0;padding:0;}
.pillars li{
  padding:26px 0;
  border-top:1px solid var(--light-faint);
  position:relative;
}
.pillars li::before{
  content:"";
  position:absolute;
  top:-1px;left:0;
  width:52px;height:1px;
  background:var(--orange);
}
.pillars li:last-child{border-bottom:1px solid var(--light-faint);}
.pillars h3{
  font-size:clamp(17px,1.5vw,21px);
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:8px;
}
.pillars p{color:var(--light-soft);max-width:46ch;}

/* ---------- 10. Services ---------- */
.services{padding:var(--section) 0;background:var(--gray);}
.services__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.service{
  position:relative;
  display:block;
  grid-column:span 2;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  text-decoration:none;
  min-height:300px;
}
/* editorial rhythm: first two are wide feature tiles */
.service:nth-child(1){grid-column:span 4;min-height:420px;}
.service:nth-child(2){grid-column:span 2;min-height:420px;}
.service:nth-child(3){grid-column:span 2;}
.service:nth-child(4){grid-column:span 4;}

.service .frame{position:absolute;inset:0;}
.service::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9) 8%,rgba(0,0,0,.28) 60%,rgba(0,0,0,.1) 100%);
  transition:background var(--t);
}
.service:hover::after{background:linear-gradient(to top,rgba(0,0,0,.94) 12%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.2) 100%);}
.service:hover .frame img{transform:scale(1.04);}

.service__body{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(22px,2.4vw,32px);
}
.service__rule{
  width:44px;height:2px;
  background:var(--orange);
  margin-bottom:16px;
}
.service__title{
  font-size:clamp(19px,1.9vw,28px);
  font-weight:700;
  margin-bottom:8px;
}
.service__desc{
  font-size:14.5px;
  color:rgba(255,255,255,.76);
  max-width:40ch;
  margin:0;
}

/* ---------- 11. Projects ---------- */
.projects{padding:var(--section) 0;background:var(--white);}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(24px,3vw,40px);
}
.filter{
  min-height:40px;
  padding:0 18px;
  border:1px solid var(--ink-faint);
  background:none;
  font:600 12px/1 var(--font);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.filter:hover{color:var(--ink);border-color:var(--ink);}
.filter.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
}

.gallery-wrap{
  position:relative;
}
/* Edge fades hint that the strip scrolls, without needing a label */
.gallery-wrap::before,
.gallery-wrap::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(20px,4vw,64px);
  z-index:2;
  pointer-events:none;
}
.gallery-wrap::before{left:0;background:linear-gradient(to right,var(--white),rgba(255,255,255,0));}
.gallery-wrap::after{right:0;background:linear-gradient(to left,var(--white),rgba(255,255,255,0));}

.gallery{
  display:flex;
  gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scroll-padding-left:var(--gut);
  padding:2px var(--gut) 14px;
  margin:0 calc(var(--gut) * -1);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-faint) transparent;
}
.gallery::-webkit-scrollbar{height:5px;}
.gallery::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:3px;}

.tile{
  position:relative;
  flex:0 0 auto;
  width:clamp(220px,26vw,320px);
  aspect-ratio:4/5;
  padding:0;
  border:0;
  background:var(--black);
  cursor:pointer;
  overflow:hidden;
  border-radius:3px;
  scroll-snap-align:start;
  transition:opacity .25s var(--ease);
}
.tile .frame{position:absolute;inset:0;}
.tile::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0) 55%);
  opacity:0;
  transition:opacity var(--t);
}
.tile:hover::after,.tile:focus-visible::after{opacity:1;}
.tile:hover .frame img,.tile:focus-visible .frame img{transform:scale(1.05);}

.tile__label{
  position:absolute;
  z-index:2;
  left:0;right:0;bottom:0;
  padding:20px;
  text-align:left;
  color:var(--white);
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--t),transform var(--t);
}
.tile:hover .tile__label,.tile:focus-visible .tile__label{opacity:1;transform:none;}
.tile__title{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
}
.tile__cat{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}
.gallery__empty{
  padding:48px 0;
  color:var(--ink-soft);
  text-align:center;
}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;height:44px;
  border:1px solid var(--ink-faint);
  background:var(--white);
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.gallery-nav:hover{background:var(--orange);border-color:var(--orange);color:var(--white);}
.gallery-nav--prev{left:-4px;}
.gallery-nav--next{right:-4px;}
@media (max-width:640px){
  .gallery-nav{display:none;}
}

/* ---------- 12. Lightbox ---------- */
/* The [hidden] attribute must stay in control of display:none here — an
   author rule that sets display unconditionally overrides the browser's
   own [hidden] default, which would leave this full-screen, full-height
   overlay sitting invisibly (opacity:0) on top of the entire page,
   swallowing every click, tap and keystroke site-wide. */
.lightbox:not([hidden]){
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,56px);
  padding-top:calc(clamp(16px,4vw,56px) + env(safe-area-inset-top,0px));
  background:rgba(0,0,0,.95);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox__inner{
  margin:0;
  width:min(1020px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.lightbox__media{
  flex:1 1 auto;
  min-height:0;
  background:#0a0a0a;
}
.lightbox__media img{
  width:100%;
  height:100%;
  max-height:64vh;
  object-fit:contain;
}
.lightbox__caption{color:var(--white);}
.lightbox__cat{
  margin:0 0 6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
}
.lightbox__title{font-size:clamp(20px,2.4vw,30px);margin-bottom:8px;}
.lightbox__desc{color:var(--light-soft);max-width:60ch;margin:0;}

.lightbox__close,
.lightbox__nav{
  position:absolute;
  z-index:2;
  width:48px;height:48px;
  border:1px solid var(--light-faint);
  background:rgba(0,0,0,.4);
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.lightbox__close:hover,
.lightbox__nav:hover{background:var(--orange);border-color:var(--orange);}
.lightbox__close{
  top:calc(16px + env(safe-area-inset-top,0px));
  right:16px;
  font-size:30px;
}
.lightbox__nav{top:50%;transform:translateY(-50%);}
.lightbox__nav--prev{left:10px;}
.lightbox__nav--next{right:10px;}

/* ---------- 13. Quote ---------- */
.quote__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,6vw,90px);
  align-items:start;
}
.quote__intro p{color:var(--light-soft);max-width:44ch;}
.quote__intro .h2{margin-bottom:22px;}
.quote__note{
  font-size:13.5px;
  color:rgba(255,255,255,.5);
  border-left:2px solid var(--orange);
  padding-left:14px;
}
.quote__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.field label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--light-soft);
}
.field input,
.field select,
.field textarea{
  font:400 15px/1.5 var(--font);
  color:var(--white);
  background:rgba(255,255,255,.05);
  border:1px solid var(--light-faint);
  border-radius:0;
  padding:14px 16px;
  min-height:52px;
  transition:border-color var(--t),background var(--t);
}
.field textarea{resize:vertical;min-height:120px;}
.field select{appearance:none;background-image:none;}
.field select option{color:#000;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--orange);
  background:rgba(255,255,255,.08);
  outline:none;
}
.field input::placeholder,
.field textarea::placeholder{color:rgba(255,255,255,.35);}
.field.has-error input,
.field.has-error select{border-color:var(--orange);}
.quote__form .btn{grid-column:1/-1;}
.form-error{
  grid-column:1/-1;
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--orange);
}

/* ---------- 14. Contact + location ---------- */
.contact{padding:var(--section) 0;background:var(--white);}
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,90px);
  align-items:start;
}
.contact__lead{
  margin:24px 0 32px;
  font-size:clamp(16px,1.4vw,19px);
  color:var(--ink-soft);
  max-width:40ch;
}
.contact__list{margin:0;display:grid;gap:0;}
.contact__list > div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--ink-faint);
}
.contact__list > div:first-child{border-top:1px solid var(--ink-faint);}
.contact__list dt{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.contact__list dd{margin:0;font-weight:600;}
.contact__list dd a{text-decoration:none;border-bottom:1px solid var(--orange);transition:color var(--t);}
.contact__list dd a:hover{color:var(--orange);}

.location{padding:0 0 var(--section);background:var(--white);}
.location__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,70px);
  align-items:center;
  background:var(--gray);
  padding:clamp(28px,4vw,56px);
}
.location__name{font-weight:700;letter-spacing:.04em;margin-bottom:2px;}
.location__area{color:var(--ink-soft);margin-bottom:28px;}
.location__map{
  aspect-ratio:16/10;
  background:#ddd;
  overflow:hidden;
}
.location__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05);}

/* ---------- 15. Footer ---------- */
.footer{
  background:var(--black);
  color:var(--white);
  padding:clamp(54px,7vw,90px) 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(38px,5vw,64px);
}
.footer__logo{height:42px;width:auto;margin-bottom:18px;}
.footer__name{font-weight:700;letter-spacing:.05em;margin-bottom:6px;}
.footer__tag{
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}
.footer h3{
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--light-soft);
  margin-bottom:16px;
}
.footer__nav,.footer__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.footer__nav a,.footer__col a{
  font-size:14.5px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  transition:color var(--t);
}
.footer__nav a:hover,.footer__col a:hover{color:var(--orange);}
.footer__muted{font-size:14.5px;color:rgba(255,255,255,.45);margin:0;}

.footer__base{
  border-top:1px solid var(--orange);
  padding-top:22px;
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
}
.footer__base p{
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin:0;
}

/* ---------- 16. WhatsApp affordance ---------- */
.wa-fab{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:70;
  width:46px;height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  border:1px solid var(--light-faint);
  color:var(--white);
  transition:background var(--t),transform var(--t);
}
.wa-fab svg{width:22px;height:22px;fill:currentColor;}
.wa-fab:hover{background:var(--orange);border-color:var(--orange);}

/* ---------- 17. Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.is-in{opacity:1;transform:none;}

/* ---------- 18. Responsive ---------- */
@media (max-width:1080px){
  .services__grid{grid-template-columns:repeat(4,1fr);}
  .service,
  .service:nth-child(1),
  .service:nth-child(2),
  .service:nth-child(3),
  .service:nth-child(4){grid-column:span 2;min-height:320px;}
  .tile{width:clamp(190px,42vw,260px);}
}

@media (max-width:900px){
  html{scroll-padding-top:74px;}

  .nav__toggle{display:flex;}
  .nav__links{
    position:fixed;
    inset:0 0 auto 0;
    z-index:90;
    padding:calc(90px + env(safe-area-inset-top,0px)) var(--gut) 40px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    background:var(--black);
    transform:translateY(-102%);
    visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s;
    height:100svh;
    justify-content:center;
  }
  .nav__links.is-open{
    transform:none;
    visibility:visible;
    transition:transform .35s var(--ease);
  }
  .nav__links a{font-size:24px;font-weight:700;padding:12px 0;}
  .nav__cta{margin-top:22px;font-size:13px;}

  .section-head{grid-template-columns:1fr;align-items:start;gap:16px;}
  .intro__grid,
  .about__grid,
  .quote__grid,
  .contact__grid,
  .location__grid{grid-template-columns:1fr;}

  .intro__stack{gap:12px;}
  .intro__stack .frame--tall{grid-column:1/6;aspect-ratio:3/4;}
  .intro__stack .frame--wide{grid-column:3/7;margin-top:-22%;border-width:8px;}

  .hero{align-items:stretch;}
  .hero__content{
    padding-top:calc(110px + env(safe-area-inset-top,0px));
    padding-bottom:96px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .hero__veil{
    background:linear-gradient(to top,rgba(0,0,0,.95) 6%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.42) 100%);
  }
  .hero__scroll{display:none;}
  .hero__actions .btn{flex:1 1 auto;}

  .contact__list > div{grid-template-columns:1fr;gap:4px;}
}

@media (max-width:640px){
  .services__grid{grid-template-columns:1fr;}
  .service,
  .service:nth-child(1),
  .service:nth-child(2),
  .service:nth-child(3),
  .service:nth-child(4){grid-column:1/-1;min-height:280px;}

  .tile{width:78vw;}
  .gallery{scroll-snap-type:x mandatory;}

  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
  }
  .filters::-webkit-scrollbar{display:none;}
  .filter{flex:0 0 auto;}

  .quote__form{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .tile__label{opacity:1;transform:none;}
  .tile::after{opacity:1;}
  .lightbox__nav{width:42px;height:42px;}
}

@media (max-width:420px){
  .footer__grid{grid-template-columns:1fr;}
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
}