/* ============================================================
   H4 GUTTERS — Oxford, MS
   Design system: "Blacktop & Signal" (matched to the H4 logo)
   paper  #F4F4F3  clean concrete
   ink    #161616  logo black
   slate  #454B51  steel gray
   line   #D6D6D3  galvanized
   red    #D50C13  logo signal red — CTA / accent
   Type: Barlow Condensed italic (display) / Public Sans (body) / IBM Plex Mono (spec)
   ============================================================ */

:root{
  --paper:#F4F4F3;
  --card:#FFFFFF;
  --mist:#ECECEA;
  --ink:#161616;
  --ink-soft:#3C3C3C;
  --slate:#454B51;
  --slate-soft:#6B7176;
  --line:#D6D6D3;
  --accent:#D50C13;
  --accent-deep:#A50A10;
  --accent-tint:#FBE9E8;
  --accent-bright:#F0443B;
  --ok:#3E6B4F;

  --font-display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", "Courier New", monospace;

  --wrap:1120px;
  --radius:6px;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:var(--slate); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-deep); }

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

.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ink);
  color:#fff;
  padding:.6rem 1rem;
  z-index:100;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
}
.skip:focus{ left:0; }

.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;
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.01em;
  margin:0 0 .5em;
  color:var(--ink);
  font-weight:700;
}
h1{ font-size:clamp(2.9rem, 7vw, 4.75rem); font-style:italic; padding-right:.06em; }
h2{ font-size:clamp(2rem, 4.4vw, 3rem); font-style:italic; padding-right:.06em; }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing:.03em; }

p{ margin:0 0 1em; max-width:62ch; }
.lede{ font-size:1.125rem; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--accent);
}

.mono{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  text-transform:uppercase;
  font-style:italic;
  letter-spacing:.05em;
  padding:.8rem 1.7rem .7rem;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-accent{
  background:var(--accent);
  color:#fff;
}
.btn-accent:hover{ background:var(--accent-deep); color:#fff; }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

.btn-light{
  background:var(--paper);
  color:var(--ink);
}
.btn-light:hover{ background:#fff; color:var(--accent-deep); }

/* ---------- header ---------- */
.site-head{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--ink);
}
.brand-badge{ flex:none; }
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
}
.brand-loc{
  display:block;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  color:var(--slate);
  margin-top:.15rem;
}

.nav{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.nav a:not(.btn){
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--ink-soft);
  padding:.25rem 0;
  border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover{ color:var(--accent-deep); }
.nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
.nav .btn{ font-size:1rem; padding:.55rem 1.1rem .5rem; }

.nav-toggle{
  display:none;
  background:none;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:.4rem .55rem;
  cursor:pointer;
  color:var(--ink);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, #E9EDEC 0%, var(--paper) 78%);
}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:3rem;
  align-items:center;
  padding:4.5rem 0 4rem;
  position:relative;
  z-index:2;
}
.hero h1{ margin-bottom:.35em; }
.hero h1 .accent{ color:var(--accent); }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.6rem;
}
.hero-note{
  margin-top:1.1rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--slate);
}

/* rain — subtle, hero only */
.rain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.rain span{
  position:absolute;
  top:-15%;
  width:1px;
  height:72px;
  background:linear-gradient(180deg, transparent, var(--slate));
  opacity:.16;
  animation:rainfall 2.6s linear infinite;
}
.rain span:nth-child(1){ left:6%;  animation-delay:.1s; }
.rain span:nth-child(2){ left:14%; animation-delay:1.3s; height:56px; }
.rain span:nth-child(3){ left:23%; animation-delay:.7s; }
.rain span:nth-child(4){ left:31%; animation-delay:1.9s; height:60px; }
.rain span:nth-child(5){ left:44%; animation-delay:.4s; }
.rain span:nth-child(6){ left:57%; animation-delay:1.6s; height:52px; }
.rain span:nth-child(7){ left:66%; animation-delay:.9s; }
.rain span:nth-child(8){ left:74%; animation-delay:2.2s; height:64px; }
.rain span:nth-child(9){ left:85%; animation-delay:.2s; }
.rain span:nth-child(10){ left:93%; animation-delay:1.1s; height:58px; }
@keyframes rainfall{
  to{ transform:translateY(120vh); }
}

/* spec diagram card */
.spec-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem 1.25rem 1rem;
}
.spec-card .spec-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.6rem;
  margin-bottom:.4rem;
}
.spec-card .spec-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.1rem;
}
.spec-card .spec-no{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--slate);
  letter-spacing:.1em;
}
.spec-card svg text{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  fill:var(--ink-soft);
}

/* ---------- roofline divider (signature) ---------- */
.roofline{
  height:56px;
  margin-top:-1px;
}
.roofline svg{ width:100%; height:100%; }
.roofline path{
  fill:none;
  stroke:var(--slate);
  stroke-width:2.5;
  opacity:.55;
}
.roofline.on-dark path{ stroke:var(--line); opacity:.4; }

/* ---------- sections ---------- */
.section{ padding:4.5rem 0; }
.section-mist{ background:var(--mist); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-ink h2, .section-ink h3{ color:var(--paper); }
.section-ink p{ color:#CFCFCF; }
.section-ink .eyebrow{ color:var(--accent-bright); }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.25rem;
  flex-wrap:wrap;
}
.section-head p{ margin-bottom:0; }

/* trust strip */
.trust{
  background:var(--ink);
  color:var(--paper);
  padding:.8rem 0;
}
.trust-in{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2.5rem;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.trust-in span{ display:inline-flex; align-items:center; gap:.55rem; }
.trust-in span::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  border-radius:1px;
  transform:rotate(45deg);
}

/* services */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1.25rem;
}
.svc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.35rem;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.svc:hover{
  border-color:var(--slate);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.svc h3{ margin-bottom:.1rem; }
.svc p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:0; }
.svc-icon{ color:var(--slate); margin-bottom:.4rem; }
.svc .tag-new{
  position:absolute;
  top:1rem; right:1rem;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  background:var(--accent);
  color:#fff;
  padding:.2rem .45rem;
  border-radius:3px;
}
.svc-link{
  margin-top:auto;
  padding-top:.5rem;
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.95rem;
  text-decoration:none;
}

/* ---------- photo placeholders ---------- */
.frame{
  aspect-ratio:4/3;
  border:1.5px dashed var(--slate-soft);
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(22,22,22,.05) 14px 15px),
    var(--mist);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  color:var(--slate);
  text-align:center;
  padding:1rem;
}
.frame .mono{ font-size:.68rem; }
.frame-cam{ opacity:.7; }

.pair{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem;
}
.pair-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:.9rem;
  align-items:center;
}
.pair-arrow{
  color:var(--accent);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.4rem;
}
.pair-caption{
  margin-top:.8rem;
  padding-top:.7rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--slate);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.5rem;
}

/* ---------- steps ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.25rem;
  counter-reset:step;
}
.step{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
  counter-increment:step;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--accent);
  display:block;
  margin-bottom:.6rem;
}
.step h3{ margin-bottom:.3rem; }
.step p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:0; }

/* ---------- service area ---------- */
.area-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;
  align-items:start;
}
.town-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
  margin:0; padding:0;
}
.town-list li{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.05rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem 1.1rem .4rem;
}
.town-list li.home-town{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* ---------- google band ---------- */
.google-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.google-band p{ margin-bottom:0; }

/* ---------- christmas band ---------- */
.xmas{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.xmas::before{
  /* a string of lights along the top edge */
  content:"";
  position:absolute;
  top:10px; left:0; right:0;
  height:14px;
  background-image:
    radial-gradient(circle 4px at 10px 4px,  #F5C542 96%, transparent),
    radial-gradient(circle 4px at 50px 10px, #E23B3B 96%, transparent),
    radial-gradient(circle 4px at 90px 5px,  #3FA557 96%, transparent),
    radial-gradient(circle 4px at 130px 9px, #2E8CD6 96%, transparent);
  background-size:160px 14px;
  background-repeat:repeat-x;
  opacity:.9;
}
.xmas-in{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:3rem;
  align-items:center;
  padding:4.5rem 0;
}
.xmas h2{ color:var(--paper); }
.xmas p{ color:#CFCFCF; }
.xmas .eyebrow{ color:#E8B84B; }
.xmas .eyebrow::before{ background:#E8B84B; }

/* packages (christmas page) */
.pkg{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.pkg .price{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2rem;
  color:var(--accent-deep);
  line-height:1;
}
.pkg .price small{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--slate);
  letter-spacing:.08em;
  display:block;
  margin-top:.35rem;
}
.pkg ul{
  margin:0; padding:0;
  list-style:none;
  font-size:.95rem;
  color:var(--ink-soft);
}
.pkg ul li{
  padding:.4rem 0 .4rem 1.4rem;
  position:relative;
  border-bottom:1px dashed var(--line);
}
.pkg ul li:last-child{ border-bottom:none; }
.pkg ul li::before{
  content:"";
  position:absolute;
  left:0; top:.85rem;
  width:8px; height:8px;
  background:var(--accent);
  border-radius:1px;
  transform:rotate(45deg);
}
.pkg .btn{ margin-top:auto; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--accent-deep), var(--accent));
  color:#fff;
  text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#FAD7D5; margin-inline:auto; }
.cta-band .btn-light{ margin-top:1rem; }

/* ---------- forms ---------- */
.quote-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:3rem;
  align-items:start;
}
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.95rem;
  margin-bottom:.35rem;
}
.field .hint{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--slate);
  letter-spacing:.05em;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:.7rem .8rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(213,12,19,.15);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.req{ color:var(--accent); }

.next-card{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem 1.6rem;
}
.next-card ol{
  margin:0; padding:0;
  list-style:none;
  counter-reset:nx;
}
.next-card ol li{
  counter-increment:nx;
  padding:.75rem 0 .75rem 2.4rem;
  position:relative;
  border-bottom:1px dashed var(--line);
  font-size:.97rem;
}
.next-card ol li:last-child{ border-bottom:none; }
.next-card ol li::before{
  content:"0" counter(nx);
  position:absolute;
  left:0; top:.85rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--accent);
}
.call-card{
  margin-top:1.25rem;
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
}
.call-card .mono{ color:#9C9C9C; }
.call-card a{
  color:#fff;
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
}
.call-card a:hover{ color:#F0443B; }

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  background:linear-gradient(180deg, #E9EDEC 0%, var(--paper) 100%);
  padding:3.5rem 0 2.5rem;
}
.page-hero p{ margin-bottom:0; }

/* ---------- footer ---------- */
.site-foot{
  background:var(--ink);
  color:#CFCFCF;
  padding:3.5rem 0 2rem;
  margin-top:0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid #2C2C2C;
}
.site-foot h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
  color:var(--paper);
  margin:0 0 .8rem;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:.45rem; font-size:.93rem; }
.site-foot a{ color:#CFCFCF; }
.site-foot a:hover{ color:#F0443B; }
.foot-brand .brand-name{ color:var(--paper); font-size:1.6rem; }
.foot-brand p{ font-size:.9rem; max-width:32ch; }
.foot-base{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.5rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:#8F8F8F;
}

/* ---------- thanks page ---------- */
.thanks{
  min-height:55vh;
  display:flex;
  align-items:center;
  text-align:left;
}
.thanks .mark{
  color:var(--ok);
  margin-bottom:1rem;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-in,
  .quote-grid,
  .area-grid,
  .xmas-in{
    grid-template-columns:1fr;
    gap:2.25rem;
  }
  .hero-in{ padding:3rem 0 2.5rem; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .nav{
    position:fixed;
    inset:64px 0 auto 0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    padding:1.25rem 1.25rem 1.5rem;
    gap:1rem;
    display:none;
    box-shadow:var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav a:not(.btn){ font-size:1.3rem; }
  .nav-toggle{ display:inline-flex; }
  .field-row{ grid-template-columns:1fr; }
  .pair-grid{ grid-template-columns:1fr; }
  .pair-arrow{ transform:rotate(90deg); justify-self:center; }
  .section{ padding:3.25rem 0; }
}

@media (max-width: 520px){
  .foot-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .hero-actions .btn{ width:100%; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rain{ display:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- brand logo images ---------- */
.brand-logo{ height:46px; width:auto; }
.foot-logo{ height:58px; width:auto; }
@media (max-width:640px){ .brand-logo{ height:38px; } }
.xmas-mark{ height:72px; width:auto; margin-bottom:1rem; }
.xmas-mark-lg{ height:118px; width:auto; margin-bottom:1.25rem; }

/* ---------- announcement bar ---------- */
.announce{ background:var(--ink); }
.announce a{
  display:flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.55rem 1rem;
  color:#fff; text-decoration:none;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; text-align:center;
}
.announce a:hover{ background:#0B1420; color:#fff; }
.announce .arrow{ color:var(--accent-bright); }
.bulbs{ display:inline-flex; gap:5px; }
.bulbs i{ width:7px; height:7px; border-radius:50%; }
.bulbs i:nth-child(1){ background:#F5C542; box-shadow:0 0 6px #F5C542; }
.bulbs i:nth-child(2){ background:#E23B3B; box-shadow:0 0 6px #E23B3B; }
.bulbs i:nth-child(3){ background:#3FA557; box-shadow:0 0 6px #3FA557; }
.bulbs i:nth-child(4){ background:#2E8CD6; box-shadow:0 0 6px #2E8CD6; }
@media (max-width:640px){ .announce a{ font-size:.6rem; letter-spacing:.08em; } }

/* ---------- christmas scene art ---------- */
.xmas-scene{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.xmas-scene img{ width:100%; height:auto; }
.scene-hero{ margin-top:2.75rem; }

/* ---------- real job photos ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.photo{
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.6rem .6rem .55rem;
}
.photo img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:3px;
  background:var(--mist);
}
.photo figcaption{
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate-soft);
  padding-top:.6rem;
}
.pair-note{
  margin-top:2.25rem;
  background:var(--card);
  border:1px dashed var(--slate-soft);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  text-align:center;
}
.pair-note .mono{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .6rem;
}
.pair-note p:not(.mono){ max-width:46ch; margin:0 auto 1.25rem; color:var(--ink-soft); }
@media (max-width:820px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------- services page ---------- */
.spec-line{
  font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate-soft);
  margin:1rem 0 1.5rem;
}
.svc-detail .hero-actions{ margin-top:0; }
section[id], [id="packages"]{ scroll-margin-top:88px; }
html{ scroll-behavior:smooth; }

/* ---------- christmas included-points (replaces photo slot) ---------- */
.xmas-points{ align-self:center; }
.xmas-points .mono{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:#E8B84B; margin:0 0 1rem;
}
.xmas-points ul{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.xmas-points li{
  position:relative; padding-left:1.5rem;
  color:#EDEDEB; font-size:1.06rem; line-height:1.55;
}
.xmas-points li::before{
  content:""; position:absolute; left:0; top:.48em;
  width:9px; height:9px; border-radius:50%;
  background:#F5C542; box-shadow:0 0 8px #F5C542;
}
.xmas-points li:nth-child(2)::before{ background:#3FA557; box-shadow:0 0 8px #3FA557; }