/* ==========================================================================
   Beacon Hill Kitchen & Bath Pros
   Design tokens, layout, components
   ========================================================================== */

:root{
  /* Brand palette, taken from the logo */
  --navy-900:#0B2140;
  --navy-800:#0F2846;
  --navy-700:#16314F;
  --gold-500:#C1934F;  /* accents and fills. Not for text on light backgrounds */
  --gold-700:#8A6528;  /* text weight gold. 5.0:1 on cream, meets WCAG AA */
  --gold-300:#DCBB88;  /* text weight gold on navy. 8.7:1 */
  --cream-50:#F8F5F0;
  --cream-100:#F2EDE5;
  --stone-200:#E6E0D6;
  --stone-300:#D6CEC1;
  --ink-900:#1A1A1A;
  --ink-600:#56565A;
  --ink-500:#6E6E6E;
  --white:#FFFFFF;

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap:1280px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --section-y:clamp(3.25rem, 6vw, 6rem);

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

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(.975rem,.35vw + .9rem,1.0625rem);
  font-weight:400;
  line-height:1.75;
  color:var(--ink-600);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
/* Focus ring keeps a 3:1 contrast against whichever background it lands on */
:focus-visible{outline:2px solid var(--gold-700); outline-offset:3px}
.hero :focus-visible,
.topbar :focus-visible,
.why :focus-visible,
.reviews :focus-visible,
.contact :focus-visible,
.footer :focus-visible,
.lightbox :focus-visible,
.callbar:focus-visible{outline-color:var(--gold-300)}

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy-900); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{left:0}

/* ---------- Type ---------- */
.eyebrow{
  font-size:.6875rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-700); margin-bottom:1.5rem;
}
.eyebrow--light{color:var(--gold-300)}

.h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.6vw,3.375rem);
  font-weight:400; line-height:1.14; letter-spacing:-.015em;
  color:var(--navy-900);
}
.h2 em{font-style:italic; color:var(--gold-700)}
.h2--light{color:var(--white)}
.h2--light em{color:var(--gold-300)}

.lede{
  font-size:1.0625rem; line-height:1.8; color:var(--ink-500); max-width:56ch;
}

.link-rule{
  display:inline-block; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy-900); padding-bottom:.5rem; border-bottom:1px solid var(--gold-500);
  transition:color var(--t), border-color var(--t);
}
.link-rule:hover{color:var(--gold-700)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.05rem 2.25rem;
  font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent; border-radius:0; cursor:pointer;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.btn--solid{background:var(--navy-900); color:var(--white); border-color:var(--navy-900)}
.btn--solid:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900)}
.btn--ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:var(--white); color:var(--navy-900); border-color:var(--white)}
.btn--outline{background:transparent; color:var(--navy-900); border-color:var(--gold-500); padding:.8rem 1.5rem}
.btn--outline:hover{background:var(--gold-500); color:var(--white)}
.btn--full{width:100%}
.btn[disabled]{opacity:.55; cursor:progress}

/* ---------- Image slots ----------
   Every <img> lives inside an .img-slot that paints a labelled placeholder
   underneath it, naming the file it expects. A loaded photo covers it. This is
   pure CSS, so it works with lazy loading and with scripting disabled. JS only
   adds .is-empty to hide the broken-image glyph when a file is genuinely
   missing. Drop the file into assets/img and the placeholder disappears.     */
.img-slot{
  display:block; position:relative; overflow:hidden;
  background:repeating-linear-gradient(45deg, var(--stone-200) 0 12px, var(--cream-100) 12px 24px);
}
.img-slot::after{
  content:attr(data-slot) " · " attr(data-file);
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-900); background:rgba(248,245,240,.82);
  pointer-events:none;
}
.img-slot img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.img-slot--3x4{aspect-ratio:3/4}
.img-slot--4x5{aspect-ratio:4/5}
.img-slot--fill{position:absolute; inset:0}
.img-slot--logo{background:none}
.img-slot--logo img{width:auto; height:100%; object-fit:contain}

/* JS confirms the outcome: clear the placeholder on success,
   hide the broken-image glyph on failure. */
.img-slot.is-filled{background:none}
.img-slot.is-filled::after{display:none}
.img-slot.is-empty img{display:none}
.img-slot.is-empty:not(.img-slot--logo):not(.img-slot--fill){min-height:220px}
.img-slot--logo.is-empty{min-width:180px}

/* Placeholders behind light text stay dark, so contrast holds
   even before the real photography is uploaded. */
.img-slot--fill{
  background:repeating-linear-gradient(45deg, var(--navy-700) 0 12px, var(--navy-800) 12px 24px);
}
.img-slot--fill::after{background:rgba(11,33,64,.55); color:var(--gold-300)}

/* Scrim behind the mobile menu. Inert until the menu opens. */
.nav-scrim{display:none}

/* Elements that drift against the scroll. JS sets --py; if JS never runs the
   element simply sits still. */
[data-parallax]{will-change:transform}

/* ---------- Reveal on scroll ----------
   Scoped to .js so the content is visible by default. If scripting fails or is
   blocked, the page still renders in full rather than staying blank. */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar{background:var(--navy-900); color:rgba(255,255,255,.72); font-size:.75rem; letter-spacing:.08em}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px}
.topbar__note{text-transform:uppercase; letter-spacing:.16em; font-size:.6875rem}
.topbar__tel{display:inline-block; color:var(--gold-300); font-weight:500; letter-spacing:.1em; padding-block:.65rem}
.topbar__tel:hover{color:var(--white)}

.header{
  position:sticky; top:0; z-index:60;
  background:var(--cream-50);
  border-bottom:1px solid var(--stone-200);
  transition:background-color var(--t), box-shadow var(--t);
}
.header.is-stuck{box-shadow:0 1px 24px rgba(11,33,64,.07)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:clamp(72px, 6.4vw, 92px)}

/* Horizontal lockup, 1044x200, ratio 5.22:1. The height scales with the viewport
   so the "Kitchen & Bath Pros" line stays legible on wide screens without
   crowding the nav on narrow ones. 52px tall renders 271px wide. */
.brand{display:flex; align-items:center; height:clamp(38px, 3.4vw, 52px)}
.brand .img-slot--logo{height:100%}

.nav{display:flex; align-items:center; gap:2.5rem}
.nav__list{display:flex; align-items:center; gap:2rem}
.nav__list a{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-900);
  padding-block:.5rem; position:relative;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-500); transition:width var(--t);
}
.nav__list a:hover::after{width:100%}

.burger{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:5px; padding:0}
.burger span{display:block; height:1px; width:24px; background:var(--navy-900); margin-inline:auto; transition:transform var(--t), opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative; display:flex; align-items:center; min-height:clamp(560px,86vh,880px); overflow:hidden}

/* ---------- Hero slideshow ----------
   Three images cross fade. The active one drifts and scales very slowly, which
   reads as movement without ever calling attention to itself. Transform and
   opacity only, so it stays on the compositor and never repaints. */
.hero__media{position:absolute; inset:0; z-index:0; will-change:transform}
.hero__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transform-origin:52% 46%;
}
.hero__slide.is-active img{animation:kenburns 11s linear forwards}
@keyframes kenburns{
  from{transform:scale(1.04)}
  to{transform:scale(1.16)}
}

.hero__dots{
  position:absolute; left:50%; bottom:6.5rem; z-index:3; transform:translateX(-50%);
  display:flex; gap:.15rem;
}
.hero__dots button{width:26px; height:26px; display:grid; place-items:center; padding:0}
.hero__dots button::before{
  content:""; width:24px; height:2px; background:rgba(255,255,255,.3);
  transition:background var(--t);
}
.hero__dots button.is-active::before{background:var(--gold-300)}
.hero__dots button:hover::before{background:rgba(255,255,255,.7)}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(11,33,64,.92) 0%, rgba(11,33,64,.78) 38%, rgba(11,33,64,.34) 72%, rgba(11,33,64,.12) 100%);
}
.hero__inner{position:relative; z-index:2; padding-block:clamp(5rem,12vw,8rem)}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.75rem,6.4vw,5.5rem);
  font-weight:400; line-height:1.06; letter-spacing:-.02em;
  color:var(--white); max-width:16ch; margin-bottom:1.75rem;
}
.hero__title em{font-style:italic; color:var(--gold-300)}
.hero__lede{max-width:44ch; color:rgba(255,255,255,.82); font-size:1.0625rem; line-height:1.85; margin-bottom:2.5rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem}
.hero__actions .btn--solid{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900)}
.hero__actions .btn--solid:hover{background:var(--white); border-color:var(--white)}

.hero__scroll{
  position:absolute; left:50%; bottom:2.25rem; z-index:3; transform:translateX(-50%);
  width:1px; height:56px; background:rgba(255,255,255,.3); overflow:hidden;
}
.hero__scroll span{display:block; width:1px; height:24px; background:var(--gold-300); animation:scrollLine 2.4s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateY(-24px)}60%,100%{transform:translateY(56px)}}

/* ==========================================================================
   Services strip
   ========================================================================== */
.services{background:var(--white); border-bottom:1px solid var(--stone-200)}
.services__inner{display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(3.5rem,6vw,5.5rem)}
.services__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-700);
  align-self:start; padding-top:.25rem; position:relative; padding-bottom:3rem;
}
.services__label::after{content:""; position:absolute; left:50%; bottom:0; width:1px; height:2.25rem; background:var(--stone-300)}

.services__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.service{padding-inline:clamp(1rem,2.4vw,2.25rem); border-left:1px solid var(--stone-200)}
.service:first-child{padding-left:0; border-left:0}
.service__icon{width:34px; height:34px; color:var(--gold-500); margin-bottom:1.5rem}
.service__title{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--navy-900); margin-bottom:.85rem;
}
.service__text{font-size:.9375rem; line-height:1.75; color:var(--ink-500)}

/* ==========================================================================
   Selected work
   ========================================================================== */
.work{background:var(--cream-100); padding-block:var(--section-y)}
.work__inner{display:grid; grid-template-columns:minmax(220px,.85fr) 3fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.work__title{margin-bottom:1.5rem}
.work__note{font-size:.9375rem; line-height:1.8; color:var(--ink-500); max-width:34ch; margin-bottom:2rem}
.work__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.5rem)}
.project figure{margin:0}
.project figcaption{padding-top:1.1rem}
.project__name{display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-900); font-weight:500}
.project__type{display:block; font-family:var(--font-display); font-style:italic; font-size:1rem; color:var(--gold-700); margin-top:.15rem}
.project:hover .img-slot img{transform:scale(1.05)}

/* ==========================================================================
   Philosophy
   ========================================================================== */
.philosophy{background:var(--cream-50); padding-block:var(--section-y)}
.philosophy__inner{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(180px,.55fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.philosophy__body .h2{margin-bottom:1.75rem; max-width:18ch}
.pillars{display:grid; gap:1.1rem; align-self:center}
.pillars li{
  display:flex; align-items:center; gap:.9rem;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-900);
}
.pillars li::before{content:""; width:22px; height:1px; background:var(--gold-500); flex:none}

/* ==========================================================================
   Process
   ========================================================================== */
.process{background:var(--white); padding-block:var(--section-y)}
.process__inner{display:grid; grid-template-columns:minmax(240px,.9fr) 3fr; gap:clamp(2.5rem,5vw,5rem)}
.process__steps{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1rem,2vw,2rem); position:relative}
.process__steps::before{
  content:""; position:absolute; left:0; right:0; top:2.35rem; height:1px; background:var(--stone-200);
}
.step{position:relative; padding-right:1rem}
.step__num{
  display:block; font-family:var(--font-display); font-size:1.75rem; color:var(--gold-700);
  line-height:1; margin-bottom:1.85rem; position:relative; z-index:1;
}
.step__num::after{
  content:""; position:absolute; left:0; bottom:-1.05rem; width:9px; height:9px;
  border:1px solid var(--gold-500); background:var(--white); border-radius:50%;
}
.step__title{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-900); font-weight:600; margin-bottom:.75rem}
.step__text{font-size:.9375rem; line-height:1.75; color:var(--ink-500)}

/* ==========================================================================
   Why us
   ========================================================================== */
.why{background:var(--navy-900); color:rgba(255,255,255,.72); padding-block:var(--section-y); position:relative; overflow:hidden}
.why__inner{position:relative; z-index:1}
.why__intro{max-width:22ch; margin-bottom:clamp(2.5rem,5vw,4rem)}
.why__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3.5rem) clamp(2.5rem,6vw,5rem)}
.why__grid li{padding-top:1.75rem; border-top:1px solid rgba(220,187,136,.28)}
.why__grid h3{
  font-family:var(--font-display); font-size:1.5rem; font-weight:500; line-height:1.3;
  color:var(--white); margin-bottom:.9rem;
}
.why__grid p{font-size:.9375rem; line-height:1.8}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{background:var(--cream-50); padding-block:var(--section-y)}
.gallery__head{max-width:58ch; margin-bottom:2.5rem}
.gallery__head .h2{margin-bottom:1.1rem}

.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem}
.filter{
  padding:.7rem 1.4rem; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-500); border:1px solid var(--stone-200); background:var(--white);
  transition:all var(--t);
}
.filter:hover{border-color:var(--gold-500); color:var(--navy-900)}
.filter.is-active{background:var(--navy-900); border-color:var(--navy-900); color:var(--white)}

.gallery__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,1.4vw,1.25rem)}
.tile{overflow:hidden}
.tile.is-hidden{display:none}
.tile:nth-child(6n+1),.tile:nth-child(6n+4){grid-row:span 2}
.tile__btn{display:block; width:100%; height:100%; position:relative; padding:0; text-align:left}
.tile__btn .img-slot{height:100%; min-height:220px}
.tile__btn .img-slot img{height:100%}
.tile__meta{
  position:absolute; inset:auto 0 0 0; padding:1.5rem 1.25rem 1.1rem;
  background:linear-gradient(to top, rgba(11,33,64,.9), rgba(11,33,64,0));
  color:var(--white); opacity:0; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t);
}
.tile__meta b{display:block; font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.tile__meta i{display:block; font-family:var(--font-display); font-size:1rem; color:var(--gold-300)}
.tile__btn:hover .tile__meta,.tile__btn:focus-visible .tile__meta{opacity:1; transform:none}
.tile__btn:hover .img-slot img{transform:scale(1.06)}
/* Five reference images: two wide on top, three below. Aspect ratios are forced
   so the row edges line up despite the sources having different proportions. */
.gallery__grid--five{grid-template-columns:repeat(6,1fr)}
.gallery__grid--five .tile{grid-row:auto}
.gallery__grid--five .tile:nth-child(-n+2){grid-column:span 3}
.gallery__grid--five .tile:nth-child(n+3){grid-column:span 2}
.gallery__grid--five .tile:nth-child(-n+2) .img-slot{aspect-ratio:16/10}
.gallery__grid--five .tile:nth-child(n+3) .img-slot{aspect-ratio:4/3}
.gallery__grid--five .tile__btn .img-slot{min-height:0}

.gallery__empty{text-align:center; padding:3rem 0; color:var(--ink-500); font-style:italic}

/* Bridge to real project photography, which is not on the site yet */
.portfolio-note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:2rem clamp(2rem,4vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--stone-200);
}
.portfolio-note h3{
  font-family:var(--font-display); font-size:1.75rem; font-weight:500; line-height:1.3;
  color:var(--navy-900); margin-bottom:.65rem;
}
.portfolio-note p{font-size:.9375rem; line-height:1.8; color:var(--ink-500); max-width:52ch}
.portfolio-note .btn{flex:none}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{background:var(--navy-800); padding-block:var(--section-y); position:relative; overflow:hidden}
.reviews__head{margin-bottom:clamp(2.5rem,5vw,3.5rem); max-width:24ch}
.slider{position:relative}
.slider__quote{
  position:absolute; top:-2.5rem; left:-.5rem;
  font-family:var(--font-display); font-size:9rem; line-height:1; color:var(--gold-500);
  opacity:.25; pointer-events:none;
}
.slider__viewport{overflow:hidden}
.slider__track{display:flex; transition:transform .65s var(--ease)}
.slide{flex:0 0 100%; padding-right:1px}
.slide blockquote{
  font-family:var(--font-display); font-size:clamp(1.375rem,2.6vw,2.125rem);
  font-weight:400; line-height:1.5; color:var(--white); max-width:34ch;
}
.slide cite{display:block; margin-top:2rem; font-style:normal}
.slide cite b{display:block; font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--white)}
.slide cite i{display:block; font-family:var(--font-display); font-size:1rem; color:var(--gold-300); margin-top:.2rem}

.slider__controls{display:flex; align-items:center; gap:1.5rem; margin-top:3rem}
.slider__arrow{
  width:48px; height:48px; border:1px solid rgba(220,187,136,.35); color:var(--gold-300);
  display:grid; place-items:center; transition:all var(--t);
}
.slider__arrow:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900)}
.slider__dots{display:flex; gap:.15rem}
/* 24px hit area around a 7px dot, so the target meets WCAG 2.5.8 */
.slider__dots button{
  width:24px; height:24px; display:grid; place-items:center; background:none; padding:0;
}
.slider__dots button::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.28); transition:background var(--t), transform var(--t);
}
.slider__dots button.is-active::before{background:var(--gold-500); transform:scale(1.35)}
.slider__dots button:hover::before{background:var(--gold-300)}

/* ==========================================================================
   About
   ========================================================================== */
.about{background:var(--cream-100); padding-block:var(--section-y)}
.about__inner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center}
.about__body .h2{margin-bottom:1.75rem}
.about__body p + p{margin-top:1.1rem}
.about__note{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--stone-300);
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-900);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{background:var(--white); padding-block:var(--section-y)}
.faq__inner{display:grid; grid-template-columns:minmax(260px,.9fr) 1.9fr; gap:clamp(2.5rem,5vw,5rem)}
.acc{border-bottom:1px solid var(--stone-200)}
.acc:first-child{border-top:1px solid var(--stone-200)}
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; text-align:left;
  font-family:var(--font-display); font-size:1.25rem; font-weight:500; line-height:1.4; color:var(--navy-900);
  transition:color var(--t);
}
.acc__q:hover{color:var(--gold-700)}
.acc__icon{position:relative; width:14px; height:14px; flex:none}
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--gold-700);
  transition:transform var(--t), opacity var(--t);
}
.acc__icon::before{width:14px; height:1px}
.acc__icon::after{width:1px; height:14px}
.acc__q[aria-expanded="true"] .acc__icon::after{transform:rotate(90deg); opacity:0}
.acc__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.acc__a > p{overflow:hidden; font-size:.9375rem; line-height:1.8; color:var(--ink-500); max-width:62ch}
.acc.is-open .acc__a{grid-template-rows:1fr}
.acc.is-open .acc__a > p{padding-bottom:1.6rem}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{position:relative; background:var(--navy-900); padding-block:var(--section-y); overflow:hidden}
.contact__bg{z-index:0}
.contact__bg img{width:100%; height:100%; object-fit:cover}
.contact__scrim{position:absolute; inset:0; z-index:1; background:rgba(11,33,64,.88)}
.contact__inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start}
.contact__lede{color:rgba(255,255,255,.75); max-width:42ch; margin-top:1.5rem}
.contact__details{margin-top:3rem; display:grid; gap:1.75rem}
.contact__details dt{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300); margin-bottom:.4rem}
.contact__details dd{color:var(--white); font-size:1.0625rem; line-height:1.6}
.contact__details a:hover{color:var(--gold-300)}

/* ---------- Form ---------- */
.form{background:var(--cream-50); padding:clamp(1.75rem,3.5vw,2.75rem)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.field{margin-bottom:1.25rem; display:flex; flex-direction:column}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.field label{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-900); margin-bottom:.6rem}
.field input,.field select,.field textarea{
  width:100%; padding:.9rem 1rem; background:var(--white);
  border:1px solid var(--stone-200); border-radius:0; font-size:.9375rem; color:var(--ink-900);
  transition:border-color var(--t);
}
.field textarea{resize:vertical; min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:#A9A9A9}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-500); outline:none}
.field__error{display:none; font-size:.8125rem; color:#B3402F; margin-top:.45rem}
.field.has-error input,.field.has-error select{border-color:#B3402F}
.field.has-error .field__error{display:block}
.form__status{margin-top:1rem; font-size:.9375rem; min-height:1.5rem}
.form__status.is-ok{color:#2E6B4F}
.form__status.is-error{color:#B3402F}
.form__note{margin-top:.75rem; font-size:.8125rem; color:var(--ink-500)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--navy-900); color:rgba(255,255,255,.62); padding-top:clamp(3.5rem,6vw,5.5rem)}
.footer__inner{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem)}
.footer__brand .img-slot--logo{height:40px; margin-bottom:1.5rem; max-width:100%}
.footer__brand p{font-size:.9375rem; line-height:1.8; max-width:34ch}
.social{display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.75rem}
.social a{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); transition:color var(--t)}
.social a:hover{color:var(--white)}
.footer__col h3{font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--white); font-weight:500; margin-bottom:1.4rem}
.footer__col li{margin-bottom:.75rem; font-size:.9375rem}
.footer__col a{transition:color var(--t)}
.footer__col a:hover{color:var(--gold-300)}
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:clamp(3rem,5vw,4.5rem); padding-block:1.75rem;
  border-top:1px solid rgba(255,255,255,.1); font-size:.8125rem;
}
.footer__bottom a:hover{color:var(--gold-300)}

/* ==========================================================================
   Mobile call bar + lightbox
   ========================================================================== */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:1rem; text-align:center; background:var(--gold-500); color:var(--navy-900);
  font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}

.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  gap:1rem; padding:clamp(1rem,4vw,3rem); background:rgba(11,33,64,.96);
}
.lightbox[hidden]{display:none}
.lightbox__figure{max-width:min(1100px,90vw); margin:0; text-align:center}
.lightbox__figure img{max-height:78vh; width:auto; margin-inline:auto}
.lightbox__figure figcaption{
  margin-top:1.25rem; color:var(--gold-300);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
}
.lightbox__close{position:absolute; top:1.5rem; right:1.75rem; font-size:2.25rem; line-height:1; color:#fff}
.lightbox__nav{width:52px; height:52px; flex:none; border:1px solid rgba(255,255,255,.3); color:#fff; transition:all var(--t)}
.lightbox__nav:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .work__inner{grid-template-columns:1fr}
  .work__title{max-width:none}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .philosophy__inner{grid-template-columns:1fr 1fr}
  .pillars{grid-column:1 / -1; grid-template-columns:repeat(4,1fr); gap:1rem 2rem}
  .process__inner,.faq__inner{grid-template-columns:1fr}
  .process__steps{grid-template-columns:repeat(3,1fr); gap:2.5rem 1.5rem}
  .process__steps::before{display:none}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .gallery__grid--five{grid-template-columns:repeat(6,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr; gap:2.5rem}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:1280px) and (min-width:1151px){
  .nav{gap:1.5rem}
  .nav__list{gap:1.25rem}
  .btn--outline{padding:.75rem 1.1rem}
}

@media (max-width:1150px){
  .header__inner{min-height:74px}
  .brand{height:46px}
  .burger{display:flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,88vw);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:2.5rem;
    padding:2.5rem var(--gutter); background:var(--cream-50);
    box-shadow:-16px 0 48px rgba(11,33,64,.12);
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:80;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column; align-items:flex-start; gap:.25rem; width:100%}
  .nav__list li{width:100%}
  /* Full width rows so the whole line is tappable, not just the glyphs */
  .nav__list a{display:block; width:100%; font-size:.8125rem; padding:.95rem 0}
  .nav__list a::after{display:none}
  .nav__list a:active{color:var(--gold-700)}
  .nav__cta{width:100%}
  body.nav-open{overflow:hidden}
  /* The overlay must sit BELOW .header, because .header is a sticky stacking
     context and .nav lives inside it. Anything above 60 here would cover the
     menu, tint it, and swallow every tap. */
  .nav-scrim{display:block}
  .nav-scrim{
    position:fixed; inset:0; z-index:55;
    background:rgba(11,33,64,.5); opacity:0; pointer-events:none;
    transition:opacity .45s var(--ease);
  }
  body.nav-open .nav-scrim{opacity:1; pointer-events:auto}

  .services__inner{grid-template-columns:1fr; gap:2rem}
  .services__label{writing-mode:horizontal-tb; transform:none; padding-bottom:0}
  .services__label::after{display:none}
  .services__grid{grid-template-columns:repeat(2,1fr); gap:2.5rem 0}
  .service{padding-inline:0; border-left:0; padding-right:1.5rem}
  .service:nth-child(2n){padding-left:1.5rem; border-left:1px solid var(--stone-200)}

  .philosophy__inner{grid-template-columns:1fr}
  .philosophy__media{max-width:420px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:1fr}
  .about__inner{grid-template-columns:1fr}
  .about__media{max-width:440px}
  .contact__inner{grid-template-columns:1fr}
  .slider__quote{font-size:6rem; top:-1.75rem}
}

@media (max-width:640px){
  html{scroll-padding-top:80px}
  .brand{height:40px}
  .topbar__note{display:none}
  .topbar__inner{justify-content:center}
  /* Content sits high in the frame and keeps 7.5rem of clearance at the bottom,
     so the last button never lands under the fixed Call Now bar. */
  .hero{min-height:auto; padding-block:0}
  .hero__inner{padding-block:3.5rem 7.5rem}
  .hero__title{margin-bottom:1.25rem}
  .hero__lede{margin-bottom:1.75rem}
  .hero__scroll{display:none}
  .hero__actions{gap:.75rem}
  .hero__actions .btn{width:100%}
  .hero__dots{bottom:3.5rem}
  .hero__slide.is-active img{animation-duration:13s}
  /* On a narrow screen the diagonal scrim covers the whole frame and the photo
     disappears. Go vertical instead: dark where the text sits, open below. */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(11,33,64,.94) 0%, rgba(11,33,64,.88) 42%,
      rgba(11,33,64,.62) 72%, rgba(11,33,64,.42) 100%);
  }
  .work__grid{grid-template-columns:1fr 1fr; gap:1rem}
  /* A 4:5 portrait costs almost 500px of scroll here. Landscape instead. */
  .about__media .img-slot--4x5{aspect-ratio:3/2}
  .about__media{max-width:none}
  /* Two up, so five steps take three rows instead of five screens-worth */
  .process__steps{grid-template-columns:1fr 1fr; gap:1.75rem 1.25rem}
  .step{padding-right:0}
  /* Square crops keep four directions to two compact rows */
  .work__grid .img-slot--3x4{aspect-ratio:1/1}
  .gallery__grid{grid-template-columns:1fr 1fr}
  .tile:nth-child(6n+1),.tile:nth-child(6n+4){grid-row:span 1}
  /* Two columns with one lead image. Five stacked full width images turned this
     section into a third of the page on a phone. */
  .gallery__grid--five{grid-template-columns:1fr 1fr}
  .gallery__grid--five .tile:first-child{grid-column:span 2}
  .gallery__grid--five .tile:nth-child(n+2){grid-column:span 1}
  .gallery__grid--five .tile:first-child .img-slot{aspect-ratio:16/10}
  .gallery__grid--five .tile:nth-child(n+2) .img-slot{aspect-ratio:1/1}
  .field-row{grid-template-columns:1fr; gap:0}
  .portfolio-note{flex-direction:column; align-items:flex-start}
  .portfolio-note .btn{width:100%}
  .footer__inner{grid-template-columns:1fr}
  /* Thumb sized rows in the footer lists */
  .footer__col li{margin-bottom:0}
  .footer__col li a{display:inline-block; padding-block:.55rem}
  .social a{display:inline-block; padding-block:.4rem}
  .footer__bottom{flex-direction:column; align-items:flex-start}
  .footer__bottom a{display:inline-block; padding-block:.35rem}
  .callbar{display:block}
  body{padding-bottom:56px}
  .lightbox__nav{position:absolute; bottom:1.5rem}
  .lightbox__nav--prev{left:1.5rem}
  .lightbox__nav--next{right:1.5rem}
}

/* Single column only on the very smallest phones. Two columns keeps the
   services strip from eating a whole screen on a 375px device. */
@media (max-width:340px){
  .services__grid{grid-template-columns:1fr}
  .service:nth-child(2n){padding-left:0; border-left:0}
  .pillars{grid-template-columns:1fr}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .reveal{opacity:1; transform:none}
  /* No drifting, no zooming, no auto advancing */
  .hero__slide img{transform:none !important; animation:none !important}
  [data-parallax]{transform:none !important}
}

/* ---------- Print ---------- */
@media print{
  .header,.topbar,.callbar,.hero__scroll,.filters,.slider__controls,.form{display:none}
  body{background:#fff; color:#000}
}