/* =========================================================================
   Stamford Wallpaper Installation — style.css
   Warm ivory / charcoal with a muted Atlantic slate-blue accent.
   Type: Newsreader (display) + Hanken Grotesk (body).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#F6F3EC;        /* warm ivory */
  --paper:#FCFAF5;     /* near-white panel */
  --greige:#ECE6DA;    /* soft greige */
  --stone:#DED7C8;     /* deeper warm neutral */
  --ink:#232A2E;       /* headings */
  --body:#3E4348;      /* body text */
  --muted:#54585E;     /* labels, captions */
  --accent:#33506B;    /* Atlantic slate — fills, links, UI */
  --accent-deep:#29435A; /* hover */
  --accent-light:#9FB8C9;/* accent on dark */
  --brass:#B98B4E;     /* decorative only */
  --dark:#1B2429;      /* dark band */
  --soot:#141A1E;      /* footer */
  --on-dark:#EDF0F2;
  --on-dark-muted:#AEB8BF;
  --line:#6E6B63;      /* control borders (UI) */
  --rule:#DED7C8;      /* hairlines */
  --rule-strong:#C9C0AF;
  --error:#A32B22;

  --maxw:1200px;
  --gutter:clamp(1rem, 5vw, 3.5rem);
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(30,26,22,.05), 0 6px 18px rgba(30,26,22,.06);
  --shadow-md:0 10px 30px rgba(27,36,41,.12), 0 2px 8px rgba(27,36,41,.08);
  --shadow-lg:0 26px 70px rgba(27,36,41,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;

  --font-display:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
figure{margin:0}
img,picture,svg,iframe{display:block; max-width:100%}
img{height:auto}
ul,ol{margin:0; padding:0; list-style:none}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-deep)}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); font-weight:500; line-height:1.1; margin:0; letter-spacing:-.01em}
p{margin:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:3px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}

.skip-link{position:absolute; left:12px; top:-60px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; z-index:1000; transition:top .2s}
.skip-link:focus{top:12px; color:#fff}

/* ---------- Shared type helpers ---------- */
.eyebrow{font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.55rem}
.eyebrow-light{color:rgba(255,255,255,.86)}
.pin{width:8px; height:8px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(185,139,78,.25); display:inline-block}
.section-index{font-family:var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 1.1rem}
.section-index-light{color:var(--accent-light)}
.section-head{max-width:42rem; margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.section-head h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.15rem)}
.section-head .section-lead{margin-top:1.1rem; color:var(--muted); font-size:1.075rem}
.section-head-dark .section-index{color:var(--accent-light)}
.section-head-dark h2{color:var(--on-dark)}
.section-head-dark .section-lead{color:var(--on-dark-muted)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(51,80,107,.28)}
.btn-accent:hover{background:var(--accent-deep); color:#fff; box-shadow:0 12px 28px rgba(51,80,107,.34)}
.btn-outline{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn-outline:hover{background:var(--accent); color:#fff}
.btn-outline-light{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.7); backdrop-filter:blur(2px)}
.btn-outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-ghost{background:var(--greige); color:var(--ink)}
.btn-ghost:hover{background:var(--stone); color:var(--ink)}
.btn-sm{padding:.62rem 1.1rem; font-size:.88rem}
.btn-lg{padding:1rem 1.7rem; font-size:1rem}
.btn-block{display:flex; width:100%}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; gap:1.5rem; min-height:var(--header-h)}
.brand{display:inline-flex; align-items:center; gap:.7rem; color:var(--ink)}
.brand-mark{border-radius:9px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--font-display); font-size:1.22rem; font-weight:600; color:var(--ink); letter-spacing:.005em}
.brand-sub{font-family:var(--font-body); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:.28rem; font-weight:600}

.nav{margin-left:auto}
.nav ul{display:flex; gap:.35rem}
.nav a{color:var(--body); font-weight:500; font-size:.95rem; padding:.55rem .8rem; border-radius:8px; transition:color .2s, background .2s}
.nav a:hover{color:var(--accent); background:var(--greige)}
.header-cta{display:flex; align-items:center; gap:1rem}
.tel-link{font-weight:600; color:var(--ink); font-size:.95rem; white-space:nowrap}
.tel-link:hover{color:var(--accent)}

/* transparent over hero (JS-added) */
.site-header.at-top{background:transparent; border-color:transparent; box-shadow:none}
.site-header.at-top .brand-name,
.site-header.at-top .nav a,
.site-header.at-top .tel-link{color:#fff}
.site-header.at-top .brand-sub{color:rgba(255,255,255,.75)}
.site-header.at-top .nav a:hover{background:rgba(255,255,255,.14); color:#fff}
.site-header.at-top .menu-toggle span{background:#fff}

.menu-toggle{display:none; width:44px; height:44px; border:none; background:transparent; padding:10px; margin-left:auto; flex-direction:column; justify-content:center; gap:5px}
.menu-toggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:var(--shadow-md); overflow:hidden}
.mobile-nav ul{padding:.5rem var(--gutter) 0}
.mobile-nav a{display:block; padding:.9rem .25rem; font-size:1.1rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--rule)}
.mobile-nav-actions{display:flex; flex-direction:column; gap:.7rem; padding:1.2rem var(--gutter) 1.5rem}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(20,26,30,.80) 0%, rgba(20,26,30,.55) 38%, rgba(20,26,30,.20) 68%, rgba(20,26,30,.10) 100%),
    linear-gradient(0deg, rgba(20,26,30,.72) 0%, rgba(20,26,30,.18) 42%, rgba(20,26,30,.28) 100%);
}
.hero-inner{padding-block:clamp(7rem,16vh,11rem) clamp(4.5rem,10vh,7rem); max-width:52rem}
.hero h1{color:#fff; font-size:clamp(2.5rem,1.6rem + 4.6vw,4.75rem); font-weight:500; letter-spacing:-.02em; text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero h1 em{font-style:italic; color:#fff}
.hero-lead{color:rgba(255,255,255,.92); font-size:clamp(1.05rem,1rem + .5vw,1.28rem); max-width:38rem; margin-top:1.4rem; text-shadow:0 1px 16px rgba(0,0,0,.35)}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem}
.hero-scroll{position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:14px; z-index:1}
.hero-scroll span{position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px; background:#fff; transform:translateX(-50%); animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0; transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1; transform:translate(-50%,12px)}100%{opacity:0; transform:translate(-50%,16px)}}

/* =========================================================================
   INTRO / BRAND STATEMENT
   ========================================================================= */
.intro{padding-block:clamp(3.5rem,8vw,6rem)}
.intro-grid{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(1.5rem,5vw,4rem); align-items:start}
.intro .section-index{white-space:nowrap; padding-top:.6rem}
.intro-statement{font-family:var(--font-display); font-size:clamp(1.45rem,1.1rem + 1.9vw,2.35rem); line-height:1.32; color:var(--ink); font-weight:400; letter-spacing:-.01em}

/* =========================================================================
   SERVICES
   ========================================================================= */
.services{padding-block:clamp(3.5rem,8vw,6.5rem)}
.service-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.1rem,2.4vw,1.9rem)}
.service-card{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--rule-strong)}
.service-media{overflow:hidden; aspect-ratio:4/3}
.service-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.service-card:hover .service-media img{transform:scale(1.06)}
.service-body{padding:1.5rem 1.5rem 1.7rem}
.service-body h3{font-size:1.3rem; margin-bottom:.55rem}
.service-body p{color:var(--muted); font-size:.98rem; line-height:1.65}

/* =========================================================================
   WHY IT MATTERS
   ========================================================================= */
.why{padding-block:clamp(3.5rem,8vw,6.5rem)}
.why-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.why-media{position:relative}
.why-media img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md); position:relative; z-index:1}
.why-frame{position:absolute; z-index:0; inset:auto -18px -18px auto; width:62%; height:70%; border:2px solid var(--brass); border-radius:var(--radius); opacity:.6}
.why-text h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem)}
.why-list{margin-top:2rem; display:grid; gap:1.15rem}
.why-list li{position:relative; padding-left:1.7rem; color:var(--body); font-size:1rem; line-height:1.6}
.why-list li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; background:var(--accent); transform:rotate(45deg); border-radius:1px}
.why-list li span{display:block; font-family:var(--font-display); font-size:1.12rem; color:var(--ink); font-weight:500; margin-bottom:.15rem}

/* =========================================================================
   PROCESS (dark band)
   ========================================================================= */
.process{background:var(--dark); color:var(--on-dark); padding-block:clamp(3.8rem,8vw,6.5rem); position:relative}
.process::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(159,184,201,.10) 1px, transparent 1px); background-size:26px 26px; opacity:.5; pointer-events:none}
.process .wrap{position:relative}
.process-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.5rem; counter-reset:step}
.process-steps li{border-top:1px solid rgba(159,184,201,.28); padding-top:1.4rem}
.step-num{font-family:var(--font-display); font-size:2.6rem; font-weight:400; color:var(--accent-light); display:block; line-height:1; margin-bottom:1rem; font-variant-numeric:tabular-nums}
.process-steps h3{color:var(--on-dark); font-size:1.28rem; margin-bottom:.5rem}
.process-steps p{color:var(--on-dark-muted); font-size:.95rem; line-height:1.6}

/* =========================================================================
   GALLERY (CSS-columns masonry)
   ========================================================================= */
.gallery{padding-block:clamp(3.5rem,8vw,6.5rem)}
.masonry{columns:3; column-gap:clamp(.9rem,2vw,1.4rem)}
.masonry-item{break-inside:avoid; margin-bottom:clamp(.9rem,2vw,1.4rem)}
.masonry-item .lightbox-open{display:block; width:100%; padding:0; border:none; background:none; border-radius:var(--radius-sm); overflow:hidden; position:relative}
.masonry-item img{width:100%; border-radius:var(--radius-sm); transition:transform .6s var(--ease), filter .4s var(--ease); box-shadow:var(--shadow-sm)}
.masonry-item .lightbox-open::after{content:"View"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-weight:600; letter-spacing:.05em; font-size:.85rem; color:#fff; background:rgba(27,36,41,.42); opacity:0; transition:opacity .35s var(--ease); border-radius:var(--radius-sm)}
.masonry-item .lightbox-open:hover img,
.masonry-item .lightbox-open:focus-visible img{transform:scale(1.04)}
.masonry-item .lightbox-open:hover::after,
.masonry-item .lightbox-open:focus-visible::after{opacity:1}

/* =========================================================================
   STAMFORD LOCAL + MAP
   ========================================================================= */
.stamford{padding-block:clamp(3.5rem,8vw,6rem); background:var(--greige)}
.stamford-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; margin-bottom:clamp(2rem,4vw,3rem)}
.stamford-text h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
.stamford-text p{color:var(--body); margin-top:1.1rem; max-width:34rem}
.stamford-address{margin-top:1.5rem; color:var(--ink); line-height:1.7; font-size:1.05rem}
.stamford-address strong{font-family:var(--font-display); font-weight:600; font-size:1.15rem}
.stamford-text .btn{margin-top:1.6rem}
.stamford-media img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md)}

.map-card{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); gap:0; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.map-embed{position:relative; min-height:340px}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1}
.map-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem; background:var(--stone); color:var(--ink); z-index:0}
.map-side{padding:clamp(1.5rem,3vw,2.2rem); display:flex; flex-direction:column; justify-content:center; gap:.35rem; border-left:1px solid var(--rule)}
.map-name{font-family:var(--font-display); font-size:1.3rem; color:var(--ink); font-weight:600}
.map-addr{color:var(--muted); margin-bottom:1rem}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about{padding-block:clamp(3.5rem,8vw,6.5rem)}
.about-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about-media img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow-md)}
.about-text h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem); margin-bottom:1.1rem}
.about-text p{color:var(--body); margin-top:1rem}
.about-text p strong{color:var(--ink)}
.about-sign{margin-top:1.8rem !important; padding-top:1.3rem; border-top:1px solid var(--rule); display:flex; flex-direction:column; color:var(--muted); font-size:.9rem; letter-spacing:.02em}
.about-sign span{font-family:var(--font-display); font-size:1.5rem; color:var(--ink); font-weight:500; font-style:italic; margin-bottom:.2rem}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{background:var(--dark); color:var(--on-dark); padding-block:clamp(3.8rem,8vw,6.5rem)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.contact-intro h2{color:var(--on-dark); font-size:clamp(2.1rem,1.5rem + 2.8vw,3.4rem)}
.contact-lead{color:var(--on-dark-muted); margin-top:1.1rem; font-size:1.08rem; max-width:32rem}
.contact-details{margin-top:2rem; display:grid; gap:1.1rem}
.contact-details li{display:flex; flex-direction:column; gap:.15rem}
.cd-label{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-light); font-weight:600}
.contact-details a{color:var(--on-dark); font-size:1.1rem; font-weight:500; word-break:break-word; overflow-wrap:anywhere}
.contact-details a:hover{color:var(--accent-light)}
.contact-details li span:not(.cd-label){color:var(--on-dark); font-size:1.1rem}
.contact-media{margin-top:2.2rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); max-width:22rem}
.contact-media img{width:100%}

/* form */
.contact-form-wrap{background:var(--paper); border-radius:var(--radius); padding:clamp(1.5rem,3.5vw,2.6rem); box-shadow:var(--shadow-lg); position:relative}
.contact-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field-full{grid-column:1 / -1}
.contact-form label{font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink); text-transform:uppercase}
.contact-form label .opt{text-transform:none; letter-spacing:0; color:var(--muted); font-weight:500}
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:.8rem .9rem; width:100%; transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#8a877f}
.contact-form input:focus,
.contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(51,80,107,.14); background:var(--paper)}
.contact-form textarea{resize:vertical; min-height:110px}
.form-note{font-size:.8rem; color:var(--muted); margin-top:.7rem; text-align:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-success{display:none; text-align:center; padding:1rem}
.form-success .fs-mark{width:64px; height:64px; border-radius:50%; background:var(--accent); color:#fff; font-size:2rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem}
.form-success h3{font-size:1.5rem; margin-bottom:.6rem}
.form-success p{color:var(--muted)}

/* error messages injected by client script (inline red is overridden for AA contrast) */
.error-message{color:var(--error) !important}
@keyframes fadeIn{from{opacity:0; transform:translateY(-3px)}to{opacity:1; transform:none}}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--soot); color:var(--on-dark); padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.3fr); gap:clamp(2rem,4vw,3rem); padding-bottom:2.5rem; border-bottom:1px solid rgba(159,184,201,.2)}
.brand-footer .brand-name{color:var(--on-dark)}
.brand-footer .brand-sub{color:var(--on-dark-muted)}
.footer-tagline{color:var(--on-dark-muted); margin-top:1rem; max-width:22rem}
.site-footer h4{font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-light); margin-bottom:1.1rem; font-weight:600}
.footer-nav a,.footer-contact a{color:var(--on-dark); font-weight:400}
.footer-nav li,.footer-contact li{margin-bottom:.65rem; color:var(--on-dark-muted); line-height:1.5}
.footer-nav a:hover,.footer-contact a:hover{color:var(--accent-light)}
.footer-contact a{overflow-wrap:anywhere}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; color:var(--on-dark-muted); font-size:.88rem}
.footer-bottom a{color:var(--on-dark-muted)}
.footer-bottom a:hover{color:var(--accent-light)}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox{position:fixed; inset:0; z-index:2000; background:rgba(16,20,23,.94); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lightbox-figure{max-width:min(92vw,1100px); max-height:88vh; margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem}
.lightbox-figure img{max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:8px; box-shadow:var(--shadow-lg)}
.lightbox-figure figcaption{color:rgba(255,255,255,.82); font-size:.9rem; text-align:center; max-width:46rem}
.lightbox-close{position:absolute; top:1rem; right:1.2rem; width:48px; height:48px; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:2rem; line-height:1; border-radius:50%; display:flex; align-items:center; justify-content:center}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center}
.lightbox-nav:hover{background:rgba(255,255,255,.25)}
.lightbox-prev{left:1.2rem}
.lightbox-next{right:1.2rem}

/* =========================================================================
   MOBILE STICKY BAR
   ========================================================================= */
.mobile-bar{position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:.7rem; padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--rule); box-shadow:0 -6px 20px rgba(27,36,41,.1)}
.mobile-bar .btn{flex:1}
.mobile-bar.hidden{transform:translateY(120%)}
.mobile-bar{transition:transform .35s var(--ease)}

/* =========================================================================
   REVEAL ANIMATION (gated — visible by default)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  html.js-reveal-ready .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
  html.js-reveal-ready .reveal.is-in{opacity:1; transform:none}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1140px){
  .nav, .header-cta{display:none}
  .menu-toggle{display:flex}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1.8rem}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .why-grid{grid-template-columns:1fr; gap:2.2rem}
  .why-frame{display:none}
  .about-grid{grid-template-columns:1fr; gap:2rem}
  .about-media{max-width:26rem}
  .stamford-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-media{display:none}
  .map-card{grid-template-columns:1fr}
  .map-side{border-left:none; border-top:1px solid var(--rule)}
  .masonry{columns:2}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:768px){
  section[id]{scroll-margin-top:66px}
  .intro-grid{grid-template-columns:1fr; gap:1rem}
  .intro .section-index{padding-top:0}
  .mobile-bar{display:flex}
  body{padding-bottom:74px}
}
@media (max-width:620px){
  .service-grid{grid-template-columns:1fr}
  .service-media{aspect-ratio:16/10}
  .process-steps{grid-template-columns:1fr; gap:0}
  .process-steps li{border-top:1px solid rgba(159,184,201,.28); padding:1.3rem 0}
  .step-num{margin-bottom:.5rem; font-size:2.2rem}
  .contact-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; gap:.4rem}
  .hero-scroll{display:none}
}
@media (max-width:420px){
  :root{--gutter:1.1rem}
  .masonry{columns:1}
  .hero h1{font-size:2.35rem}
  .brand-sub{display:none}
}

/* default scroll-margin for anchors under fixed header */
section[id]{scroll-margin-top:var(--header-h)}

/* =========================================================================
   PRINT
   ========================================================================= */
@media print{
  .site-header,.mobile-nav,.mobile-bar,.hero-scroll,.lightbox,.menu-toggle{display:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  *{box-shadow:none !important}
  body{color:#000; background:#fff}
  .process,.contact,.site-footer{background:#fff; color:#000}
}