/* ---------- tokens ---------- */
:root{
  --night:#000;           /* header, hero, footer: black */
  --dusk:#141414;         /* final CTA band, lifted just off black */
  --glow:#FFB23F;         /* warm amber: CTAs and the lights */
  --glow-deep:#E8931A;
  --warm:#FFD9A0;         /* warm-white light, small accents on dark */
  --ink-amber:#8A5200;    /* amber that holds contrast on the light page */
  --paper:#F7F4EE;
  --line:#DCD8CE;
  --body:#3A4A52;
  --white:#fff;
  --error:#B3261E;

  --wrap:1180px;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],#quote-form{scroll-margin-top:88px}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:'Archivo',sans-serif;
  color:var(--night);
  margin:0 0 .5em;
  line-height:1.05;
  letter-spacing:-.015em;
}
h1{
  font-weight:800;
  font-stretch:94%;
  font-size:clamp(2.3rem,5.4vw,3.6rem);
  color:var(--white);
  text-wrap:balance;
}
h2{
  font-weight:800;
  font-stretch:94%;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  text-wrap:balance;
}
h3{font-weight:700;font-size:1.22rem;line-height:1.25}
p{margin:0 0 1rem;max-width:68ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.55}
.eyebrow{
  font-weight:700;font-size:.9rem;
  color:var(--ink-amber);margin:0 0 .6rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--glow);color:var(--night);
  font-weight:800;font-size:1.02rem;font-stretch:96%;
  text-decoration:none;
  padding:.95rem 1.7rem;border:none;border-radius:var(--r);cursor:pointer;
  box-shadow:0 2px 0 var(--glow-deep);
  transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:var(--glow-deep)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--glow-deep)}
.btn--lg{padding:1.15rem 2.2rem;font-size:1.1rem}
.btn--ghost{
  background:transparent;color:var(--night);
  border:2px solid var(--night);box-shadow:none;
}
.btn--ghost:hover{background:var(--night);color:var(--white)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--warm);outline-offset:2px;
}
.quote-card a:focus-visible,.quote-card button:focus-visible,
.quote-card input:focus-visible,.quote-card select:focus-visible,
.faq summary:focus-visible{outline-color:var(--glow-deep)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--night);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-head .wrap{
  display:flex;align-items:center;gap:1.5rem;
  padding-top:.7rem;padding-bottom:.7rem;
}
/* placeholder wordmark until the real logo file is dropped in */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--white);line-height:1}
.logo .sun{width:38px;height:38px;flex:none}
.logo b{display:block;white-space:nowrap;font-weight:800;font-size:1.22rem;font-stretch:96%;letter-spacing:-.01em}
.logo small{display:block;font-size:.8rem;font-weight:600;color:var(--warm);margin-top:.18rem}
.site-foot .logo{margin-bottom:1.2rem;color:var(--white)}
.site-foot .logo .sun{width:48px;height:48px}
.site-foot .logo b{font-size:1.45rem}
@media(max-width:560px){.logo .sun{width:30px;height:30px}.logo b{font-size:1.02rem}}
@media(max-width:420px){
  .site-head .wrap{gap:.75rem}
  .logo{gap:.45rem}.logo .sun{width:26px;height:26px}.logo b{font-size:.95rem}.logo small{font-size:.74rem}
  .head-phone{font-size:.92rem}
}
.head-phone{
  margin-left:auto;
  color:var(--white);text-decoration:none;font-weight:800;font-size:1.02rem;
  white-space:nowrap;text-align:right;
}
.head-phone span{display:block;font-size:.74rem;font-weight:600;color:var(--warm)}

/* ---------- hero ---------- */
.hero{
  padding:0;                 /* .wrap below owns the hero's spacing */
  position:relative;
  background:var(--night);
  color:#E6E6E6;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.4) 60%,rgba(0,0,0,.65));
}
@media (prefers-reduced-motion:reduce){.hero-bg{display:none}}
.hero .wrap{position:relative;z-index:2;padding-top:2.8rem;padding-bottom:2.8rem}
.hero-grid{
  display:grid;grid-template-columns:1fr;justify-items:center;
  gap:1.7rem;max-width:960px;margin:0 auto;text-align:center;
}
.hero-copy{max-width:720px;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.hero h1{text-transform:uppercase;letter-spacing:0}
.h1-break{display:block;color:#FFD23F}
.hero p.lede{color:#CFCFCF;max-width:46ch;margin-left:auto;margin-right:auto}

/* ---------- the lit-house demo ---------- */
/* Two photos of one house from one spot: house-dark.jpg (lights off) sits
   underneath and house-lit.jpg (lights on) sits over it, with --reveal
   deciding where the wipe between them falls. Everyday = the lit photo as
   shot. Colour scenes dim the lit areas and retint them with
   mix-blend-mode:color through a mask of those areas, so the bulbs and the
   wall wash change colour while the sky and the lawn stay as shot. */
.scene{width:100%;max-width:620px;margin:0 auto}
.scene-frame{
  --reveal:42%;
  position:relative;aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  /* The frame itself is the drag surface. pan-y keeps a vertical swipe as page
     scroll while a sideways swipe stays with the wipe, and the no-select rules
     stop a finger held on the photo raising the iOS "save image" sheet. */
  cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.scene-frame img{-webkit-user-drag:none}
.scene-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The wipe is a sliding window rather than a changing clip. .scene-lit is a
   full-width aperture pushed right by --reveal, and .scene-svg inside it is
   pushed left by the same amount, which holds the lit photo still over the
   dark one while the aperture's left edge becomes the wipe. Both moves are
   plain transforms on promoted layers, so a drag is a compositor translate of
   two finished rasters. They stay 2D: a 3D transform inside the frame's
   rounded overflow:hidden is the shape of an old iOS Safari corner-clipping
   bug, and will-change already gets each one its own layer. Animating clip-path instead repainted the lit layer on every
   pointer event, and that layer is an image mask applied three times over two
   full-canvas Gaussian blurs, which is far too much work for a phone to do at
   60fps. Percentages are safe here: both elements are exactly as wide as the
   frame, so the two translations always cancel. */
.scene-lit{
  position:absolute;inset:0;overflow:hidden;
  transform:translateX(var(--reveal));
  will-change:transform;
}
.scene-svg{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  transform:translateX(calc(-1 * var(--reveal)));
  will-change:transform;
  /* The blend modes are meant for the lit photo beside them and nothing
     below, and being explicit lets this layer's raster be reused as it moves. */
  isolation:isolate;
}
.scene-svg .fx{opacity:0;transition:opacity .35s ease}
.scene-svg .fx-dim{mix-blend-mode:multiply}
.scene-svg .fx-tint{mix-blend-mode:color}
.scene-svg .fx-glow{mix-blend-mode:screen}
.scene-svg.is-color .fx-dim{opacity:.32}
.scene-svg.is-color .fx-tint{opacity:.92}
.scene-svg.is-color .fx-glow{opacity:.28}
/* A full-bleed range input, invisible, kept as a real slider for keyboard and
   assistive tech. It takes no pointer events: a native range only moves when
   you grab its thumb, which on a touch screen means a finger anywhere else on
   the photo does nothing, so JS drives the drag from the frame instead. */
.scene-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:3;
  -webkit-appearance:none;appearance:none;background:none;
  pointer-events:none;
}
.scene-range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:100%;opacity:0}
.scene-range::-moz-range-thumb{width:46px;height:100%;border:0;opacity:0}
.scene-range:focus-visible{outline:2px solid #FFD23F;outline-offset:-4px}
/* Frame-wide and transparent so it can be moved by a transform like the
   layers above; `left` would have put a layout pass in every dragged frame.
   The visible 2px line is the ::before, sitting on the box's left edge. */
.scene-handle{
  position:absolute;top:0;bottom:0;left:0;width:100%;z-index:2;
  pointer-events:none;
  transform:translateX(var(--reveal));
  will-change:transform;
}
.scene-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 14px rgba(0,0,0,.6);
}
.scene-handle::after{
  content:"\2039\2002\203A";
  position:absolute;top:50%;left:1px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--night);
  font-size:1.05rem;font-weight:800;line-height:1;
}
.scene-tag{
  position:absolute;bottom:.65rem;z-index:2;pointer-events:none;
  padding:.25rem .62rem;border-radius:100px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;transition:opacity .25s ease;
}
.scene-tag--off{left:.65rem}
.scene-tag--on{right:.65rem}
/* Once the wipe is all the way over, the label for the hidden photo goes too. */
.scene-frame[data-end="on"] .scene-tag--off,
.scene-frame[data-end="off"] .scene-tag--on{opacity:0}

.scenes{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.75rem}
.scene-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .95rem .55rem .7rem;border-radius:100px;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:700;
  color:#E0E0E0;background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.18);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.scene-btn:hover{border-color:rgba(255,255,255,.45)}
.scene-btn[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--night)}
.scene-btn i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
/* The prompt sits between the photo and the scene buttons, so it reads as an
   instruction for the row below it. The amber pill and slow pulse are there to
   catch the eye; both stop under prefers-reduced-motion (global rule below). */
.scene-cap{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  margin:1rem auto 0;max-width:none;
}
.scene-cap-lead{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem 1.05rem;border-radius:100px;
  background:rgba(255,210,63,.14);border:1.5px solid rgba(255,210,63,.6);
  color:#FFD23F;font-weight:800;font-size:1.02rem;
  animation:cap-pulse 2.6s ease-in-out infinite;
}
.scene-cap-arrow{font-size:.9em;line-height:1;animation:cap-bob 1.8s ease-in-out infinite}
.scene-cap-sub{font-size:.9rem;color:#A6A6A6}
@keyframes cap-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.4)}
  70%{box-shadow:0 0 0 10px rgba(255,210,63,0)}
}
@keyframes cap-bob{
  0%,100%{transform:translateY(-1px)}
  50%{transform:translateY(2px)}
}

/* ---------- form card ---------- */
.quote-card{
  background:var(--white);border-radius:var(--r);
  padding:1.6rem;width:100%;max-width:440px;text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
  border-top:5px solid var(--glow);
}
@media(max-width:400px){.quote-card{padding:1.25rem}}
.quote-card h3{margin-bottom:.15rem;font-weight:800}
.quote-card .sub{font-size:.9rem;margin-bottom:1.1rem;color:#66757C}
.field{margin-bottom:.75rem}
.field label{
  display:block;font-size:.8rem;font-weight:700;color:var(--night);
  margin-bottom:.25rem;
}
.field input,.field select{
  /* must stay >=16px: below that, iOS Safari zooms the page on focus */
  width:100%;padding:.75rem .8rem;font:inherit;font-size:16px;
  border:1.5px solid var(--line);border-radius:4px;background:#FCFCFB;color:var(--night);
}
.field select:invalid{color:#8D979C}
.field select option{color:var(--night)}
.form-note{font-size:.82rem;color:#7C888D;margin:.7rem 0 0;line-height:1.45}
.form-note a{color:var(--ink-amber)}
.quote-card .btn{width:100%;margin-top:.4rem}
.hp{position:absolute;left:-9999px}

.fsteps{display:flex;gap:.35rem;margin-bottom:1.15rem}
.fstep{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .2s ease}
.fstep.is-on{background:var(--glow)}
.fpane{display:none}
.fpane.is-on{display:block}
.fcount{font-size:.8rem;font-weight:700;color:#8D979C;margin:0 0 .35rem}
.lnk{
  display:block;margin:.7rem auto 0;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:700;color:#7C888D;padding:.3rem;
}
.lnk:hover{color:var(--night)}
.err{
  display:none;background:#FBEAE9;border-left:3px solid var(--error);
  color:var(--error);font-size:.85rem;font-weight:600;
  padding:.55rem .7rem;border-radius:3px;margin-bottom:.8rem;
}
.err.is-on{display:block}

/* ---------- section frame ---------- */
section{padding:4.6rem 0}
@media(max-width:700px){section{padding:2.9rem 0}}
.section-head{max-width:60ch;margin-bottom:2.4rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:.7rem;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;
  font-weight:700;color:var(--night);position:relative;font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.2rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2.5px solid var(--glow-deep);border-bottom:2.5px solid var(--glow-deep);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .answer{padding:0 1.2rem 1.15rem;font-size:.98rem}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- final CTA ---------- */
/* the row of dots along the top edge echoes the roofline lights */
.finale{
  position:relative;background:var(--dusk);color:#CFCFCF;text-align:center;
  padding-top:5.2rem;
}
.finale::before{
  content:"";position:absolute;left:0;right:0;top:18px;height:18px;
  background:radial-gradient(circle,#FFF3DC 0 2px,rgba(255,178,63,.55) 3px,rgba(255,178,63,0) 8px) 0 50% / 26px 18px repeat-x;
}
.finale h2{color:var(--white)}
.finale p{margin-left:auto;margin-right:auto}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:#9A9A9A;font-size:.95rem;padding:3.4rem 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr;gap:1.8rem}}
.site-foot h4{
  color:var(--white);font-size:.95rem;font-weight:800;margin:0 0 .8rem;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-foot a{color:#9A9A9A;text-decoration:none}
.site-foot a:hover{color:var(--white)}
.legal{
  border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.83rem;
}

/* ---------- mobile sticky call bar ---------- */
.mobile-bar{display:none}
@media(max-width:700px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--night);padding:.6rem;
    box-shadow:0 -6px 20px rgba(0,0,0,.25);
  }
  .mobile-bar .btn{width:100%;padding:.85rem 1rem;font-size:.95rem}
  .mobile-bar .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
  body{padding-bottom:74px}

  .hero .wrap{padding-top:2rem;padding-bottom:2.4rem}
  .hero-grid{gap:1.4rem}
  .scene-btn{font-size:.85rem;padding:.5rem .8rem .5rem .6rem}
  .scene-cap-lead{font-size:.95rem;padding:.45rem .9rem}
  .scene-cap-sub{font-size:.85rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
/* ===================== SEO PAGE LAYER =====================
   Added for the service + city pages. Nothing above this line
   was changed, so the homepage renders exactly as it does today.
   ========================================================= */
.page-nav{position:sticky;top:0;z-index:60;background:var(--night);border-bottom:1px solid #1d1d1d}
.page-nav .wrap{display:flex;align-items:center;gap:26px;height:68px}
.page-nav a{color:#CFCBC3;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.page-nav a:hover,.page-nav a[aria-current="page"]{color:var(--glow)}
.page-nav .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;overflow-x:auto}
.page-nav .btn{padding:10px 18px;font-size:14px}
@media(max-width:860px){.page-nav .nav-links{gap:16px}.page-nav a{font-size:14px}}

.crumbs{font-size:13px;color:#8A8F93;padding:18px 0 0}
.crumbs a{color:#8A8F93;text-decoration:none}
.crumbs a:hover{color:var(--ink-amber);text-decoration:underline}

.phero{background:var(--night);color:#fff;padding:52px 0 64px}
.phero h1{color:#fff;max-width:17ch}
.phero .lede{color:#CFCBC3;max-width:60ch;font-size:19px;margin:18px 0 28px}
.phero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.phero .trust{color:#8A8F93;font-size:14px;margin-top:18px}

.band{padding:68px 0}
.band--paper{background:var(--paper)}
.band--tint{background:#EFEBE3}
.band--dark{background:var(--night);color:#CFCBC3}
.band--dark h2,.band--dark h3{color:#fff}

.cols{display:grid;gap:34px}
@media(min-width:820px){.cols--2{grid-template-columns:1fr 1fr}.cols--3{grid-template-columns:repeat(3,1fr)}}

.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.band--dark .tile{background:#111;border-color:#242424}
.tile h3{font-size:19px;margin-bottom:10px}
.tile p{margin:0;font-size:16px}

.steps{counter-reset:s;display:grid;gap:22px}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:46px}
.step:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--glow)}
.step h3{font-size:18px;margin-bottom:8px}
.step p{margin:0;font-size:16px}

.hoods{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding:0;list-style:none}
.hoods li{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14px;background:#fff}
.band--dark .hoods li{border-color:#2a2a2a;background:#111;color:#CFCBC3}

.rev-grid{display:grid;gap:20px}
@media(min-width:820px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.rev .stars{color:var(--glow);letter-spacing:3px;font-size:15px;margin-bottom:12px}
.rev blockquote{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--body)}
.rev cite{font-style:normal;font-weight:700;color:var(--night);font-size:15px;margin-top:auto}
.rev .where{display:block;font-weight:400;color:#7A8A92;font-size:13px;margin-top:2px}

.shots{display:grid;gap:14px}
@media(min-width:720px){.shots{grid-template-columns:1fr 1fr}}
.shots figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;background:#0b0b0b}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;color:#F1EDE4;font-size:13px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82))}

.linkgrid{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.linkgrid a{display:inline-block;border:1px solid var(--line);border-radius:var(--r);padding:11px 16px;
  font-size:15px;text-decoration:none;background:#fff;color:var(--night);font-weight:500}
.linkgrid a:hover{border-color:var(--glow);color:var(--ink-amber)}
.band--dark .linkgrid a{background:#111;border-color:#2a2a2a;color:#CFCBC3}
.band--dark .linkgrid a:hover{border-color:var(--glow);color:var(--glow)}

.pfaq{max-width:760px}
.pfaq details{border-bottom:1px solid var(--line);padding:18px 0}
.pfaq summary{cursor:pointer;font-weight:700;color:var(--night);font-size:17px;list-style:none}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary:after{content:"+";float:right;color:var(--glow);font-weight:800}
.pfaq details[open] summary:after{content:"\2013"}
.pfaq p{margin:12px 0 0;font-size:16px}

/* fixes: ghost button is black-on-black inside the dark hero; lock the photo ratio */
.phero .btn--ghost,.band--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.phero .btn--ghost:hover,.band--dark .btn--ghost:hover{background:#fff;color:var(--night);border-color:#fff}
.shots figure img{height:auto;aspect-ratio:4/3;object-fit:cover}
.shots figure{display:block;line-height:0}

/* ===================== PREMIUM LAYER =====================
   Typographic scale, rhythm, and finish. Nothing here touches
   the homepage hero — it is all scoped to the new page classes.
   ========================================================= */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --maxtext:68ch; }

.band{padding:clamp(64px,8vw,116px) 0}
.band + .band{border-top:1px solid rgba(0,0,0,.05)}
.band--dark + .band--dark{border-top:1px solid rgba(255,255,255,.07)}

/* display type */
.phero h1{font-size:clamp(2.5rem,5.6vw,4.25rem);letter-spacing:-.028em;line-height:1.02}
.band h2{font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.024em;line-height:1.06;max-width:20ch}
.band h3{letter-spacing:-.012em}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.band p{max-width:var(--maxtext)}
.lead-xl{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;letter-spacing:-.012em;
  color:var(--night);max-width:30ch;font-weight:600}
.band--dark .lead-xl{color:#fff}

/* a quiet hairline the eye reads as craft */
.rule-gold{height:2px;width:54px;background:var(--glow);border:0;margin:0 0 26px}

/* figures */
.fig{margin:0;border-radius:10px;overflow:hidden;position:relative;background:#0b0b0b;
  box-shadow:0 18px 44px -24px rgba(0,0,0,.55)}
.fig img{width:100%;display:block}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;color:#F1EDE4;
  font-size:13px;letter-spacing:.02em;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8))}
.shots figure,.tile,.rev{box-shadow:0 14px 34px -26px rgba(0,0,0,.5)}
.shots figure{border-radius:10px}
.tile,.rev{border-radius:10px;transition:transform .35s var(--ease),border-color .25s}
.tile:hover,.rev:hover{transform:translateY(-3px);border-color:var(--glow)}

/* split hero used on About */
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}
  .split--flip>*:first-child{order:2}}

/* credibility strip */
.facts{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;overflow:hidden;margin-top:40px}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--night);padding:26px 22px}
.fact b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;color:#fff;
  letter-spacing:-.02em;line-height:1.1}
.fact span{display:block;margin-top:7px;font-size:13.5px;color:#9BA2A6;line-height:1.45}
.band--paper .facts{background:var(--line);border-color:var(--line)}
.band--paper .fact{background:#fff}
.band--paper .fact b{color:var(--night)}
.band--paper .fact span{color:#6C7A81}

/* pull quote */
.pull{border-left:3px solid var(--glow);padding:4px 0 4px 26px;margin:34px 0;max-width:46ch}
.pull p{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.45;color:var(--night);
  font-weight:600;letter-spacing:-.012em;margin:0}
.band--dark .pull p{color:#fff}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:#7A8A92;font-weight:500}
.band--dark .pull cite{color:#9BA2A6}

/* signature block */
.sig{display:flex;align-items:center;gap:16px;margin-top:34px}
.sig img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.sig b{display:block;color:var(--night);font-size:16px}
.band--dark .sig b{color:#fff}
.sig span{font-size:14px;color:#7A8A92}

/* reveal on scroll — respects reduced motion */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .rv.in{opacity:1;transform:none}
}

/* nav CTA must beat `.page-nav a` on specificity, or it renders amber-on-amber */
.page-nav a.btn{color:var(--night)}
.page-nav a.btn:hover{color:var(--night)}
/* let the display headline breathe across 2–3 lines instead of 4 */
.phero h1{max-width:22ch}
@media(min-width:1100px){.phero h1{max-width:24ch}}
/* keep the portrait from towering over its column */
.split .fig img{max-height:620px;object-fit:cover}

/* grid `1fr` defaults to min-width:auto, so a large image forces its column
   wider and crushes the text beside it. Clamp both tracks. */
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.split > *{min-width:0}
.cols > *{min-width:0}
.fig img{max-width:100%;height:auto}

/* ===================== REVIEWS PAGE ===================== */
.rating-band{padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(44px,5vw,70px)}
.big-rating{display:flex;align-items:center;gap:clamp(24px,4vw,52px);flex-wrap:wrap}
.big-rating .score{font-size:clamp(5rem,13vw,9.5rem);font-weight:900;line-height:.82;
  letter-spacing:-.05em;color:var(--night)}
.score-side{min-width:0}
.stars{color:var(--glow);letter-spacing:4px;font-size:17px;display:inline-block}
.stars.big{font-size:clamp(26px,4vw,38px);letter-spacing:7px;display:block}
.score-sub{margin:12px 0 18px;font-size:17px;color:#5C6A72;max-width:34ch}
.rating-band .btn--ghost{color:var(--night);border-color:var(--night)}
.rating-band .btn--ghost:hover{background:var(--night);color:#fff}

.rev-wall{display:grid;gap:18px;margin-top:30px}
@media(min-width:820px){.rev-wall{grid-template-columns:repeat(3,1fr)}
  .rev-card.feature{grid-column:span 3}}
.rev-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;
  box-shadow:0 14px 34px -26px rgba(0,0,0,.5);display:flex;flex-direction:column}
.rev-card.feature{background:var(--night);border-color:#23262B}
.rev-card.feature blockquote{color:#EDE9E0;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.42;
  font-weight:600;letter-spacing:-.015em}
.rev-card.feature figcaption{color:#fff}
.rev-card.feature figcaption span{color:#8A8D92}
.rev-card h3{font-size:16px;margin:12px 0 0;color:var(--night)}
.rev-card blockquote{margin:12px 0 18px;font-size:15.5px;line-height:1.6;color:var(--body)}
.rev-card figcaption{margin-top:auto;font-weight:700;color:var(--night);font-size:15px}
.rev-card figcaption span{display:block;font-weight:400;color:#7A8A92;font-size:13px;margin-top:2px}

.proj-grid{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
@media(min-width:720px){.proj-grid{grid-template-columns:repeat(3,1fr)}
  .proj.wide{grid-column:span 2;grid-row:span 2}}
.proj{position:relative;border:1px solid #23262B;border-radius:10px;overflow:hidden;background:#0b0b0b;
  line-height:0}
.proj img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.proj.wide img{aspect-ratio:auto;height:100%}
.pcap{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 10px;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:#F1EDE4;line-height:1.3;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.84))}