/* ===========================================================
   Harrison Kitchens & Cabinets
   Design system — charcoal #3d3e3f on warm cream, sage accent
   =========================================================== */

:root{
  /* Ground */
  --cream:      #faf7f2;
  --cream-deep: #f3eee4;
  --white:      #ffffff;

  /* Ink — built on the Harrison brand charcoal */
  --charcoal:   #3d3e3f;
  --charcoal-d: #2c2d2e;   /* pressed / deepest surfaces */
  --ink:        #3d3e3f;
  --ink-soft:   #5c5d5f;
  --muted:      #8b8c8d;

  /* Accent — muted sage */
  --sage:       #8f9789;
  --sage-dark:  #6d7568;
  --sage-pale:  #dfe3db;
  --sage-tint:  #eef0eb;

  /* Structure — hairlines, tinted to the charcoal rather than the cream */
  --line:       #e3ded6;
  --line-soft:  #efeae2;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script: 'Parisienne', 'Snell Roundhand', cursive;

  /* Rhythm */
  --gutter: 28px;
  --maxw: 1280px;
  --section-y: clamp(64px, 8vw, 124px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

h1,h2,h3,h4,h5{
  margin:0;
  font-weight:300;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-.022em;
}

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

::selection{ background:var(--sage); color:#fff; }

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

/* ---------- Layout primitives ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
.wrap--narrow{ max-width:860px; }

.section{ padding:var(--section-y) 0; }
.section--tight{ padding:clamp(48px,5vw,76px) 0; }
.section--cream{ background:var(--cream-deep); }
.section--white{ background:var(--white); }
.section--sage{ background:var(--sage-tint); }

/* ---------- Type helpers ---------- */

.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--sage-dark);
  margin:0 0 18px;
}

.script{
  font-family:var(--script);
  font-weight:400;
  letter-spacing:0;
  line-height:1.05;
  color:var(--ink);
}

/* Large sizes carry less weight — at display scale 200 reads sharper than 300. */
.h-display{ font-size:clamp(38px,6.2vw,74px); font-weight:200; }
.h-1{ font-size:clamp(31px,4.4vw,52px); font-weight:200; }
.h-2{ font-size:clamp(25px,3vw,38px); font-weight:250; }
.h-3{ font-size:clamp(19px,2vw,25px); letter-spacing:-.01em; }

.h-rule{
  font-size:clamp(22px,2.4vw,30px);
  text-transform:uppercase;
  letter-spacing:2.2px;
  font-weight:300;
}

.lede{
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.8;
  color:var(--ink-soft);
  max-width:60ch;
}

.section-head{ margin-bottom:clamp(36px,4vw,60px); }
.section-head--center{ text-align:center; }
.section-head--center .lede{ margin-inline:auto; }
/* Headings sit tight to their own line-height, so the lede needs its own air. */
.section-head h1 + .lede,
.section-head h2 + .lede{ margin-top:20px; }

/* Thin sage rule used under centred headings */
.rule{
  width:52px; height:1px;
  background:var(--sage);
  border:0; margin:22px 0 0;
}
.section-head--center .rule{ margin-inline:auto; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 28px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:1.3px;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}

.btn--solid{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.btn--solid:hover{ background:var(--charcoal-d); border-color:var(--charcoal-d); }

.btn--sage{ background:var(--sage); color:#fff; border-color:var(--sage); }
.btn--sage:hover{ background:var(--sage-dark); border-color:var(--sage-dark); }

/* Hairline outline — the charcoal at 22% keeps it quiet until hover. */
.btn--outline{ background:transparent; color:var(--charcoal); border-color:rgba(61,62,63,.28); }
.btn--outline:hover{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--charcoal); }

.btn--sm{ padding:11px 20px; font-size:10px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:1px solid var(--sage);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ gap:15px; color:var(--sage-dark); }

/* ---------- Announcement bar ---------- */

.topbar{
  background:var(--ink);
  color:rgba(255,255,255,.86);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:400;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap;
  min-height:38px; padding:8px var(--gutter);
  text-align:center;
}
.topbar a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; }
.topbar a:hover{ border-color:#fff; }
.topbar__sep{ color:rgba(255,255,255,.35); }

/* New showroom announcement. Three lengths of the same line; the bar shows the
   one that fits on a single row at each width. */
.topbar a.topbar__news{
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:0; padding-bottom:0; color:#fff;
}
.topbar__badge{
  flex:none; padding:2px 7px 1px;
  background:var(--sage-pale); color:var(--charcoal-d);
  font-size:9.5px; letter-spacing:1.4px; font-weight:600; line-height:1.5;
}
.topbar__news-text{ border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; }
.topbar__news:hover .topbar__news-text{ border-color:#fff; }
.topbar__arrow{ transition:transform .3s var(--ease); }
.topbar__news:hover .topbar__arrow{ transform:translateX(3px); }
.topbar__mid,.topbar__short{ display:none; }
@media (max-width:1180px){
  .topbar__long{ display:none; }
  .topbar__mid{ display:inline; }
}

/* ---------- Header ---------- */

.header{
  position:sticky; top:0; z-index:200;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.header--scrolled{ box-shadow:0 1px 24px rgba(61,62,63,.08); }

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
  min-height:124px;
  padding:16px var(--gutter);
  max-width:var(--maxw); margin:0 auto;
}

/* flex:none stops the wordmark being squashed when the bar gets tight. */
.header__logo{ flex:none; line-height:0; }
/* The logo PNG has a solid white background; multiply drops it into the cream. */
.header__logo img{ height:84px; width:auto; mix-blend-mode:multiply; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav__link{
  font-size:11.5px; font-weight:400; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink); padding:6px 0; position:relative;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--sage);
  transition:width .35s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ width:100%; }
.nav__link[aria-current="page"]{ color:var(--sage-dark); }

.header__actions{ display:flex; align-items:center; gap:18px; }
.header__phone{
  font-size:12px; letter-spacing:1.2px; font-weight:500; color:var(--ink);
  white-space:nowrap;
}
.header__phone span{ display:block; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:400; }

/* Burger */
.burger{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  display:block; width:22px; height:1px; background:var(--ink); position:relative;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:22px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:190;
  background:var(--cream);
  padding:120px var(--gutter) 48px;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  overflow-y:auto;
}
.drawer[data-open="true"]{ transform:translateX(0); }
.drawer__nav{ display:flex; flex-direction:column; gap:6px; }
.drawer__nav a{
  font-size:22px; font-weight:300; color:var(--ink);
  padding:16px 0; border-bottom:1px solid var(--line);
}
.drawer__cta{ display:flex; flex-direction:column; gap:12px; margin-top:34px; }
.drawer__meta{ margin-top:36px; font-size:13px; color:var(--muted); line-height:2; }
.drawer__nav a{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.drawer__badge{
  flex:none; padding:6px 9px 5px;
  background:var(--charcoal); color:#fff;
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase; font-weight:500; line-height:1.3;
}

/* ---------- Hero ---------- */

.hero{ position:relative; background:var(--charcoal-d); overflow:hidden; }

/* The hero is never still. Each frame drifts continuously, a soft light
   travels across the room, and the photographs cross-fade between them —
   so the motion is constant rather than a slide that jumps on a timer.
   Layering: photography 0 < light 1 < scrim 2 < copy 3. */
.hero__media{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; }

.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.8s var(--ease);
}
.hero__slide.is-on{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
  /* The reference runs 34s because real footage sits on top of it and carries
     the motion. This drift is the motion, so it travels further and faster. */
  animation:hero-drift 24s ease-in-out infinite alternate;
}

/* A slow push in and across, so a still photograph reads as a moving picture. */
@keyframes hero-drift{
  from{ transform:scale(1.05) translate3d(1%,.8%,0); }
  to{   transform:scale(1.18) translate3d(-2.2%,-2%,0); }
}

/* Sunlight travelling across the surface. */
.hero__glow{
  position:absolute; inset:-30%; z-index:1; pointer-events:none;
  background:radial-gradient(42% 55% at 30% 40%, rgba(255,250,240,.16), rgba(255,250,240,0) 70%);
  animation:hero-sweep 19s ease-in-out infinite alternate;
}
@keyframes hero-sweep{
  from{ transform:translate3d(-14%,6%,0); }
  to{   transform:translate3d(20%,-8%,0); }
}

/* Parallax needs headroom, so the media box runs taller than the section and
   the photograph can drift without revealing an edge. Desktop only, as on the
   reference site — phones get the drift alone. */
@media (min-width:1081px){
  .hero__media{ top:-12%; bottom:-12%; }
}

/* Scrim lives on the section, not the media, so it stays put while the
   photography drifts and parallaxes underneath it. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  /* Kitchen photography is bright, so the scrim has to carry the text contrast. */
  background:linear-gradient(180deg, rgba(34,35,36,.64) 0%, rgba(34,35,36,.56) 45%, rgba(34,35,36,.78) 100%);
}

.hero__inner{
  position:relative; z-index:3;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(96px,15vw,190px) var(--gutter) clamp(84px,12vw,150px);
  color:#fff;
  text-align:center;
}
.hero__eyebrow{
  font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase;
  color:rgba(255,255,255,.82); font-weight:400; margin:0 0 26px;
}
.hero__title{
  color:#fff;
  font-size:clamp(46px,8vw,104px);
  margin:0 0 6px;
}
.hero__sub{
  font-size:clamp(13px,1.5vw,18px);
  font-weight:300; letter-spacing:4.5px; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin:10px 0 28px;
}
.hero__copy{
  max-width:56ch; margin:0 auto 40px;
  color:rgba(255,255,255,.88);
  font-size:clamp(15px,1.3vw,17.5px); line-height:1.85;
}
.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Hero video (the TV-ad loop). The footage carries the motion, so it sits
   still under the scrim; the parallax above still applies on desktop. */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  background:var(--charcoal-d);
}

/* No controls, ever: hide the play glyph iOS draws over a video it has
   not been allowed to autoplay yet (Low Power Mode). */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-panel{ display:none !important; -webkit-appearance:none; }

/* Page hero (interior pages) */
.pagehero{
  background:var(--cream-deep);
  border-bottom:1px solid var(--line);
  padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);
  text-align:center;
}
.pagehero .eyebrow{ margin-bottom:14px; }
.pagehero__title{ font-size:clamp(34px,5.4vw,62px); }
.pagehero .lede{ margin:22px auto 0; }
.pagehero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* ---------- Marquee of trust points ---------- */

.points{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.points__inner{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,5vw,72px); flex-wrap:wrap;
  padding:26px var(--gutter);
}
.points__item{
  display:flex; align-items:center; gap:11px;
  font-size:11.5px; letter-spacing:1.9px; text-transform:uppercase;
  color:var(--ink); font-weight:400;
}
.points__dot{ width:5px; height:5px; border-radius:50%; background:var(--sage); flex:none; }
a.points__item{ transition:color .3s var(--ease); }
a.points__item:hover{ color:var(--sage-dark); }

/* Jump-link targets must clear the sticky header. */
[id]{ scroll-margin-top:120px; }

/* ---------- Journey cards (3-up) ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,34px);
}
/* Borderless: the image does the framing, so the card can sit flat on the ground. */
.card{
  background:transparent;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease);
}
.card:hover{ transform:translateY(-4px); }
.card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--cream-deep); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.card:hover .card__media img{ transform:scale(1.04); }
.card__body{ padding:26px 2px 0; display:flex; flex-direction:column; flex:1; }
.card__title{ font-size:19px; margin-bottom:11px; }
.card__text{ font-size:14.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:20px; }
.card__body .link-arrow{ margin-top:auto; align-self:flex-start; }

/* ---------- Alternating feature rows ---------- */

.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(32px,5vw,80px);
}
.feature + .feature{ margin-top:clamp(56px,7vw,110px); }
.feature__media{ position:relative; }
/* height:auto is load-bearing. These images carry an HTML height attribute,
   which maps to a used height and beats aspect-ratio - without this the frame
   is as tall as whatever the source file happens to be. */
.feature__media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.feature--flip .feature__media{ order:2; }
.feature__title{ margin-bottom:20px; }
.feature__list{
  list-style:none; margin:26px 0 30px; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.feature__list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14.5px; letter-spacing:.3px; color:var(--ink);
}
.feature__list svg{ flex:none; margin-top:5px; color:var(--sage); }

/* ---------- Stats ---------- */

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat{
  padding:clamp(34px,4vw,52px) 22px;
  text-align:center;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:0; }
.stat__num{
  font-size:clamp(34px,4vw,50px); font-weight:200; color:var(--ink);
  line-height:1; letter-spacing:-.02em;
}
.stat__label{
  margin-top:14px;
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--sage-dark); font-weight:500;
}
.stat__sub{ margin-top:7px; font-size:13.5px; color:var(--muted); }

/* ---------- Gallery grid ---------- */

.grid-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(12px,1.4vw,20px);
}
/* Fixed three-up for the six-image homepage preview, so no ragged last row. */
.grid-gallery--three{ grid-template-columns:repeat(3,1fr); }
.tile{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--cream-deep);
  cursor:zoom-in;
  border:0; padding:0; display:block; width:100%;
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile::after{
  content:''; position:absolute; inset:0;
  background:rgba(61,62,63,0); transition:background .4s var(--ease);
}
.tile:hover::after{ background:rgba(61,62,63,.16); }
/* Every tile stays 4:3. A taller or wider one overruns its grid row and leaves
   a hole in the next, so portrait source images are cropped to fit instead. */

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:400;
  background:rgba(34,35,36,.95);
  display:none; align-items:center; justify-content:center;
  padding:32px;
}
.lightbox[data-open="true"]{ display:flex; }
.lightbox img{ max-width:min(1100px,92vw); max-height:88vh; object-fit:contain; }
.lightbox__close{
  position:absolute; top:22px; right:26px;
  width:46px; height:46px; border:1px solid rgba(255,255,255,.4);
  background:none; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease);
}
.lightbox__close:hover{ background:rgba(255,255,255,.14); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:1px solid rgba(255,255,255,.35);
  background:none; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease);
}
.lightbox__nav:hover{ background:rgba(255,255,255,.14); }
.lightbox__nav--prev{ left:24px; }
.lightbox__nav--next{ right:24px; }

/* ---------- Testimonials ---------- */

.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}
/* A hairline rule above each quote instead of a box around it. */
.quote{
  background:transparent;
  border-top:1px solid rgba(61,62,63,.16);
  padding:26px 0 0;
  display:flex; flex-direction:column;
}
.quote__stars{ color:var(--sage); font-size:13px; letter-spacing:3px; margin-bottom:16px; }
.quote__title{ font-size:17px; margin-bottom:14px; }
.quote__text{
  font-size:14.5px; line-height:1.85; color:var(--ink-soft);
  margin-bottom:22px; flex:1;
}
.quote__by{ font-size:12px; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink); font-weight:500; }
.quote__loc{ font-size:12px; color:var(--muted); margin-top:3px; }

.quotes-more{ text-align:center; margin-top:38px; }
.quote.is-hidden{ display:none; }

/* ---------- Split CTA with video ---------- */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(32px,5vw,72px);
}
.split__video{ position:relative; aspect-ratio:16/9; background:var(--charcoal-d); }
.split__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Film grid ---------- */

.films{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(22px,2.6vw,38px);
}
.film{ display:flex; flex-direction:column; }
.film__frame{
  position:relative; aspect-ratio:16/9;
  background:var(--charcoal-d); overflow:hidden;
}
.film__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--sage-dark); font-weight:500; margin:22px 0 10px;
}
.film__title{ font-size:18px; line-height:1.4; }

/* ---------- Banner CTA ---------- */

.banner{
  position:relative; overflow:hidden;
  background:var(--ink);
}
.banner__media{ position:absolute; inset:0; }
.banner__media img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.banner__inner{
  position:relative; z-index:2; text-align:center; color:#fff;
  padding:clamp(64px,9vw,120px) var(--gutter);
  max-width:800px; margin:0 auto;
}
.banner__inner h2{ color:#fff; margin-bottom:20px; }
.banner__inner p{ color:rgba(255,255,255,.85); margin-bottom:34px; }

/* ---------- Blog ---------- */

.posts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.6vw,36px);
}
.post{ display:flex; flex-direction:column; background:transparent; }
.post__media{ aspect-ratio:3/2; overflow:hidden; background:var(--cream-deep); }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.post:hover .post__media img{ transform:scale(1.04); }
.post__body{ padding:24px 2px 0; display:flex; flex-direction:column; flex:1; }
.post__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--sage-dark); font-weight:500; margin-bottom:14px;
}
.post__meta span:nth-child(2){ color:var(--muted); font-weight:400; }
.post__title{ font-size:19px; line-height:1.35; margin-bottom:13px; }
.post__excerpt{ font-size:14.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:22px; }
.post__body .link-arrow{ margin-top:auto; align-self:flex-start; }

/* Article */
.article{ padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px); }
.article__head{ text-align:center; margin-bottom:clamp(36px,4vw,56px); }
.article__meta{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--sage-dark); font-weight:500; margin-bottom:20px;
}
.article__meta span:nth-child(2){ color:var(--muted); font-weight:400; }
.article__title{ font-size:clamp(28px,4.2vw,48px); max-width:20ch; margin:0 auto; }
.article__body{ font-size:16.5px; line-height:1.9; color:var(--ink-soft); }
.article__body h2{ font-size:clamp(23px,2.6vw,32px); margin:52px 0 20px; }
.article__body h3{ font-size:clamp(19px,2vw,24px); margin:44px 0 16px; }
.article__body h4{ font-size:17px; margin:32px 0 12px; letter-spacing:0; }
.article__body img{
  width:100%; margin:34px 0; border:1px solid var(--line);
}
.article__body ul,.article__body ol{ margin:0 0 1.3em; padding-left:22px; }
.article__body li{ margin-bottom:9px; }
.article__body strong{ font-weight:600; color:var(--ink); }
.article__body blockquote{
  margin:36px 0; padding:6px 0 6px 26px;
  border-left:2px solid var(--sage);
  font-size:19px; font-weight:300; color:var(--ink); line-height:1.7;
}
.article__body a{ color:var(--sage-dark); border-bottom:1px solid var(--sage-pale); }
.article__body a:hover{ border-color:var(--sage-dark); }

.article__foot{
  margin-top:clamp(48px,6vw,76px); padding-top:34px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}

/* ---------- Services page ---------- */

.svc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,76px); align-items:center; }
.svc + .svc{ margin-top:clamp(56px,7vw,104px); }
.svc--flip .svc__media{ order:2; }
.svc__num{
  font-size:11px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--sage-dark); font-weight:500; margin-bottom:16px;
}
.svc__title{ margin-bottom:20px; }

/* Slider inside service media */
.slider{ position:relative; overflow:hidden; background:var(--cream-deep); }
.slider__track{ display:flex; transition:transform .65s var(--ease); }
.slider__slide{ min-width:100%; }
.slider__slide img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.slider__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  background:rgba(255,255,255,.9); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--ink);
  transition:background .3s var(--ease);
}
.slider__btn:hover{ background:#fff; }
.slider__btn--prev{ left:14px; }
.slider__btn--next{ right:14px; }
.slider__dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px;
}
.slider__dot{
  width:6px; height:6px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); transition:background .3s var(--ease);
}
.slider__dot[aria-selected="true"]{ background:#fff; }

/* ---------- Partners ---------- */

.partners{
  display:flex; align-items:center; justify-content:center;
  /* The marks are wider now they sit on a shared canvas, so the gutters close up. */
  gap:clamp(4px,1.6vw,26px); flex-wrap:wrap;
}
/* Each file is pre-trimmed and scaled to equal optical area on one 400x144
   canvas, so a single height renders them all at a consistent weight - setting
   height on the raw supplier files made Blum a third the size of Wilson. */
.partners img{
  height:clamp(48px,5.6vw,72px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:filter .4s var(--ease), opacity .4s var(--ease);
}
.partners img:hover{ filter:grayscale(0); opacity:1; }

/* ---------- Contact ---------- */

.contact-grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(36px,5vw,76px); align-items:start;
}
.contact-detail{ display:flex; gap:15px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-detail:first-of-type{ border-top:1px solid var(--line); }
.contact-detail svg{ flex:none; margin-top:3px; color:var(--sage); }
.contact-detail__label{
  font-size:10px; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:4px;
}
.contact-detail__value{ font-size:15.5px; color:var(--ink); }
.contact-detail a:hover{ color:var(--sage-dark); }
.contact-detail__sub{ font-size:14px; color:var(--ink-soft); margin:6px 0 0; }
.contact-detail__links{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:12px; }

.form{ background:var(--white); border:1px solid var(--line); padding:clamp(28px,3.4vw,44px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink); font-weight:500; margin-bottom:8px;
}
.field .req{ color:var(--sage); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px;
  font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386837c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:38px;
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.7; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sage); background:var(--white);
}
.field__error{
  display:none; margin-top:7px; font-size:12.5px; color:#b04a3f;
}
.field.has-error input,.field.has-error select{ border-color:#c9776c; }
.field.has-error .field__error{ display:block; }

.form__note{ font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.7; }

.alert{
  padding:16px 20px; margin-bottom:26px;
  font-size:14.5px; border:1px solid;
}
.alert--ok{ background:var(--sage-tint); border-color:var(--sage-pale); color:var(--sage-dark); }
.alert--err{ background:#fdf1ef; border-color:#f0d3ce; color:#a8493d; }

.map{ margin-top:0; border:1px solid var(--line); line-height:0; }
.map iframe{ width:100%; height:340px; border:0; display:block; }

/* ---------- Newsletter ---------- */

.newsletter{ background:var(--ink); color:#fff; }
.newsletter__inner{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center;
  gap:clamp(32px,5vw,72px);
}
.newsletter h2{ color:#fff; margin-bottom:18px; }
.newsletter p{ color:rgba(255,255,255,.78); margin-bottom:0; }
.newsletter .eyebrow{ color:var(--sage-pale); }
.nl-form{ display:flex; flex-direction:column; gap:14px; }
.nl-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nl-form input{
  width:100%; padding:14px 16px;
  font-family:var(--sans); font-size:15px; font-weight:300;
  color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22); border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nl-form input::placeholder{ color:rgba(255,255,255,.45); }
.nl-form input:focus{ outline:none; border-color:var(--sage); background:rgba(255,255,255,.11); }
.nl-form__msg{ font-size:13.5px; min-height:20px; }
.nl-form__msg[data-state="ok"]{ color:var(--sage-pale); }
.nl-form__msg[data-state="err"]{ color:#f0b6ac; }

/* ---------- Footer ---------- */

.footer{ background:var(--cream-deep); border-top:1px solid var(--line); }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(28px,3.6vw,54px);
  padding:clamp(52px,6vw,84px) 0 clamp(40px,4vw,60px);
}
.footer__logo img{ height:100px; width:auto; margin-bottom:26px; mix-blend-mode:multiply; }
.footer h4{
  font-size:11px; letter-spacing:1.9px; text-transform:uppercase;
  color:var(--ink); font-weight:600; margin:0 0 20px;
}
.footer__text{ font-size:14px; line-height:1.85; color:var(--ink-soft); }
.footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer__links a{ font-size:14px; color:var(--ink-soft); transition:color .3s var(--ease); }
.footer__links a:hover{ color:var(--sage-dark); }

.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; justify-content:space-between; gap:14px;
  font-size:13.5px; padding:6px 0; color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.hours li:last-child{ border-bottom:0; }
.hours__note{ font-size:12.5px; color:var(--muted); margin-bottom:14px; line-height:1.7; }

.footer__contact{ display:flex; flex-direction:column; gap:12px; margin:20px 0 24px; }
.footer__contact a{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink-soft); }
.footer__contact a:hover{ color:var(--sage-dark); }
.footer__contact svg{ flex:none; color:var(--sage); }

.socials{ display:flex; gap:11px; margin-top:22px; }
.socials a{
  width:38px; height:38px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); background:var(--white);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ background:var(--sage); color:#fff; border-color:var(--sage); }

.footer__tag{
  display:inline-block; margin-left:6px; padding:1px 6px 0;
  background:var(--sage-pale); color:var(--charcoal-d);
  font-size:9px; letter-spacing:1.3px; text-transform:uppercase; font-weight:600;
  vertical-align:2px; white-space:nowrap;
}
.footer__more{ margin-top:22px; }

.footer__bottom{
  border-top:1px solid var(--line);
  padding:22px 0 30px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:var(--sage-dark); }
.footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- New showroom ---------- */

/* Opening-night content. The head script puts .opening-over on <html> once
   the night has finished (and build.py leaves it out of later builds), so it
   comes down on time without a redeploy. data-opening-after is what shows in
   its place afterwards. */
html.opening-over [data-opening]{ display:none !important; }
html:not(.opening-over) [data-opening-after]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Home page band, straight under the hero. */
.notice{ background:var(--sage-tint); border-bottom:1px solid var(--line); }
.notice__inner{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:clamp(24px,4vw,64px);
  padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px);
}
.notice .eyebrow{ margin-bottom:14px; }
.notice__title span{ color:var(--ink-soft); }
.notice__text{ margin:16px 0 0; max-width:62ch; }
.notice__text strong{ font-weight:500; color:var(--ink); }
.notice__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Opening / Time / Where, under the showroom page title. */
.facts{
  display:flex; justify-content:center; flex-wrap:wrap;
  max-width:900px; margin:34px auto 0; padding-top:28px;
  border-top:1px solid var(--line);
}
.facts__item{ padding:4px clamp(20px,3.4vw,44px); }
.facts__item + .facts__item{ border-left:1px solid var(--line); }
.facts dt{
  font-size:10px; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:6px;
}
.facts dd{ margin:0; font-size:clamp(17px,1.7vw,21px); color:var(--ink); letter-spacing:-.01em; }

/* What to expect */
.expect{
  display:grid; grid-template-columns:5fr 6fr;
  gap:clamp(36px,6vw,96px); align-items:start;
}
.expect__intro .lede{ margin-top:20px; }
.expect__media{ margin-top:clamp(28px,3vw,40px); overflow:hidden; background:var(--cream-deep); }
.expect__media img{ width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; }
.expect__list{ list-style:none; margin:0; padding:0; }
.expect__list li{ border-top:1px solid var(--line); padding:clamp(24px,2.6vw,34px) 0; }
.expect__list li:first-child{ border-top-color:var(--ink); }
.expect__list li:last-child{ border-bottom:1px solid var(--line); }
.expect__list h3{ margin-bottom:12px; }
.expect__list p{ font-size:15.5px; max-width:56ch; }
.expect__list a{ color:var(--sage-dark); border-bottom:1px solid var(--sage-pale); }
.expect__list a:hover{ border-color:var(--sage-dark); }
.expect__label{
  font-size:10px; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:10px !important;
}

.rsvp .contact-detail:first-of-type{ margin-top:30px; }

/* Good to know */
.faq{ display:grid; grid-template-columns:4fr 7fr; gap:clamp(28px,6vw,96px); align-items:start; }
.faq__list{ margin:0; }
.faq__item{ border-top:1px solid var(--line); padding:clamp(20px,2.2vw,28px) 0; }
.faq__item:first-child{ border-top-color:var(--ink); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq dt{ font-size:17px; color:var(--ink); font-weight:400; margin-bottom:8px; }
.faq dd{ margin:0; font-size:15.5px; max-width:62ch; }
.faq dd a{ color:var(--sage-dark); border-bottom:1px solid var(--sage-pale); }
.faq dd a:hover{ border-color:var(--sage-dark); }

/* Find us */
.findus{ display:grid; grid-template-columns:4fr 8fr; gap:clamp(28px,5vw,72px); align-items:start; }
.findus__state{ margin:14px 0 22px; font-size:16px; color:var(--ink-soft); }
.findus__ask{ margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.findus__ask p{ margin:0; }
.findus__ask a:hover{ color:var(--sage-dark); }
.findus__phone{ font-size:24px; color:var(--ink); letter-spacing:-.02em; margin:6px 0 4px !important; }
.findus .map iframe{ height:420px; }

/* ---------- Reveal on scroll ---------- */

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

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

/* ---------- Responsive ---------- */

@media (max-width:1080px){
  .nav,.header__phone{ display:none; }
  .burger{ display:flex; }
  .header__inner{ min-height:100px; }
  .header__logo img{ height:68px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .posts,.quotes,.cards{ grid-template-columns:repeat(2,1fr); }
  .grid-gallery--three{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n){ border-right:0; }
}

@media (max-width:860px){
  :root{ --gutter:20px; }
  .feature,.svc,.split,.contact-grid,.newsletter__inner{ grid-template-columns:1fr; }
  .notice__inner,.expect,.faq,.findus{ grid-template-columns:1fr; }
  .notice__inner > *,.expect > *,.faq > *,.findus > *{ min-width:0; }
  .findus .map iframe{ height:320px; }
  /* Room for the announcement: the phone number stays, the policy line goes. */
  html:not(.opening-over) .topbar__news ~ .topbar__contact .topbar__appt{ display:none; }
  .feature--flip .feature__media,.svc--flip .svc__media{ order:0; }
  .article__body img{ margin:24px 0; }

  /* A grid item's default min-width:auto lets un-shrinkable content (an address
     line, an iframe) push a track wider than its share and scroll the page. */
  .footer__top > *,
  .feature > *,.svc > *,.split > *,.contact-grid > *,
  .cards > *,.posts > *,.quotes > *,.films > *{ min-width:0; }

  /* auto-fit's 320px floor is wider than the content box on small phones. */
  .films{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  /* ---- Rhythm: the desktop scale stacked one-per-row is punishingly long ---- */
  :root{ --section-y:52px; }
  .section--tight{ padding:38px 0; }
  .section-head{ margin-bottom:28px; }
  .section-head .rule{ margin-top:18px; }

  .posts,.quotes,.cards{ grid-template-columns:1fr; gap:34px; }
  .form__row,.nl-form__row{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .hero__eyebrow{ letter-spacing:1.6px; }

  /* ---- Photography: 4:3 at full bleed eats most of a phone screen ---- */
  .hero__inner{ padding:76px var(--gutter) 66px; }
  .card__media,.post__media{ aspect-ratio:16/10; }
  /* These two carry an HTML height attribute, which maps to a used height and
     beats aspect-ratio; height:auto hands control back to the ratio. */
  .feature__media img,
  .slider__slide img{ aspect-ratio:16/10; height:auto; }
  .card__body{ padding-top:20px; }
  .post__body{ padding-top:18px; }
  .feature{ gap:26px; }
  .feature + .feature{ margin-top:46px; }
  .svc + .svc{ margin-top:46px; }

  /* Keep the top bar to one line so the sticky header sits at a known height. */
  .topbar__inner{ gap:10px; font-size:10px; min-height:34px; }
  .topbar__tagline,
  .topbar__sep{ display:none; }
  .topbar a.topbar__news{ gap:8px; }
  .topbar__badge,.topbar__mid{ display:none; }
  .topbar__short{ display:inline; }

  .notice__actions{ flex-direction:column; }
  .notice__actions .btn{ width:100%; }
  .pagehero__cta{ flex-direction:column; }
  .pagehero__cta .btn{ width:100%; }
  .facts{ flex-direction:column; align-items:center; gap:14px; padding-top:22px; }
  .facts__item + .facts__item{ border-left:0; }

  /* Logo + burger only; the appointment CTA lives in the drawer. */
  .header__actions > .btn{ display:none; }
  .header__inner{ gap:16px; min-height:88px; }
  .header__logo img{ height:58px; }
  .drawer{ padding-top:154px; }
  .drawer__nav a{ font-size:20px; padding:14px 0; }

  .grid-gallery{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__nav--prev{ left:8px; }
  .lightbox__nav--next{ right:8px; }

  /* ---- Reviews: nine full-length reviews in a column is a wall ---- */
  .quotes:not(.is-expanded) .quote:nth-child(n+4){ display:none; }
  .quote{ padding-top:22px; }
  .quote__text{ font-size:14px; }

  /* ---- Footer: one column. Two tracks could not fit and overflowed. ---- */
  .footer__top{
    grid-template-columns:1fr;
    gap:36px;
    padding:44px 0 32px;
  }
  .footer h4{ margin-bottom:16px; }
  .footer__logo img{ height:80px; margin-bottom:20px; }
  .map iframe{ height:200px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }

  /* ---- Long-form ---- */
  .article{ padding:34px 0 44px; }
  .article__body{ font-size:16px; }
  .article__body h2{ margin:36px 0 16px; }
  .article__body h3{ margin:30px 0 14px; }
  .article__foot{ flex-direction:column; align-items:flex-start; gap:18px; }

  .contact-detail{ padding:16px 0; }
  .stat{ padding:26px 14px; }
}

/* Very small phones — the last places content can still bind. */
@media (max-width:380px){
  :root{ --gutter:16px; }
  .grid-gallery{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; }
  .btn{ padding:13px 20px; letter-spacing:1px; }
}


/* ---------- Showroom: the building ---------- */

.sr-building{
  position:relative; margin:0;
  height:clamp(300px,46vw,620px);
  overflow:hidden; background:#2a5aa8;
}
.sr-building img{
  width:100%; height:100%; object-fit:cover;
  object-position:70% 100%;
}
.sr-building__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 var(--gutter) 18px;
}
.sr-building__cap span{
  display:inline-block;
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--charcoal); background:rgba(250,247,242,.9);
  padding:8px 12px;
}
@media (max-width:700px){
  .sr-building{ height:62vw; min-height:260px; }
  .sr-building img{ object-position:64% 100%; }
}

/* ---------- Showroom opening pop-up ---------- */

.sr-pop{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(28,27,25,.55);
  opacity:0; transition:opacity .3s var(--ease);
}
.sr-pop[hidden]{ display:none; }
.sr-pop.is-shown{ opacity:1; }

.sr-pop__card{
  position:relative; width:100%; max-width:540px;
  max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto;
  background:var(--cream); color:var(--ink);
  box-shadow:0 24px 60px rgba(28,27,25,.28);
  transform:translateY(18px) scale(.98);
  transition:transform .3s var(--ease);
  outline:none;
}
.sr-pop.is-shown .sr-pop__card{ transform:none; }

.sr-pop__close{
  position:absolute; top:10px; right:10px; z-index:1;
  width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(250,247,242,.92); color:var(--charcoal);
  font-size:24px; line-height:1; cursor:pointer;
}
.sr-pop__close:hover{ background:#fff; }
.sr-pop__close:focus-visible{ outline:2px solid var(--charcoal); outline-offset:2px; }

.sr-pop__media{ aspect-ratio:16/8; overflow:hidden; background:#2a5aa8; }
.sr-pop__media img{ width:100%; height:100%; object-fit:cover; object-position:68% 100%; }

.sr-pop__body{ padding:26px 30px 30px; text-align:center; }
.sr-pop__body .eyebrow{ margin-bottom:8px; }
.sr-pop__title{ font-size:clamp(32px,6vw,44px); margin:0 0 14px; }
.sr-pop__when{ margin:0; font-size:17px; font-weight:400; color:var(--ink); }
.sr-pop__where{ margin:4px 0 0; font-size:15px; color:var(--ink-soft); }
.sr-pop__text{ margin:14px auto 0; max-width:38ch; font-size:15px; line-height:1.7; color:var(--ink-soft); }
.sr-pop__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

@media (max-width:520px){
  .sr-pop{ padding:12px; align-items:flex-end; }
  .sr-pop__body{ padding:22px 20px 22px; }
  .sr-pop__actions{ flex-direction:column; }
  .sr-pop__actions .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .sr-pop, .sr-pop__card{ transition:none; }
}

/* ---------- Keystone lead form (contact page) ---------- */
.keystone-form[hidden], .local-form[hidden]{ display:none; }
.keystone-form{ margin:0 auto; }