/* ============================================
   Shoreline Cabinet Company — Design System
   Built by Crispline Digital
   ============================================ */

:root {
  --navy: #0d2438;
  --navy-light: #16324a;
  --navy-deep: #081726;
  --sand: #f6f1e7;
  --sand-dark: #e9dfc9;
  --brass: #b3894f;
  --brass-light: #cca86e;
  --ink: #23303f;
  --ink-soft: #5c6b7a;
  --white: #ffffff;
  --line: rgba(13, 36, 56, 0.12);
  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans: 'Jost', 'Inter', -apple-system, sans-serif;
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--navy);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  display: block;
  margin-bottom: 14px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.logo span { color: var(--brass); }

.logo-sub {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

nav.main-nav { display: flex; align-items: center; gap: 40px; }

nav.main-nav a {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  position: relative;
  padding: 4px 0;
}
nav.main-nav a.active,
nav.main-nav a:hover { color: var(--brass); }

.header-cta {
  display: inline-block;
  background: var(--navy);
  color: var(--white) !important;
  padding: 13px 26px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.2s ease;
}
.header-cta:hover { background: var(--brass); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* lighter tint (2026-10-01): darkest only behind the text, photo stays bright on the right */
  background:
    linear-gradient(90deg, rgba(8,23,38,0.58) 0%, rgba(8,23,38,0.30) 45%, rgba(8,23,38,0) 75%),
    linear-gradient(0deg, rgba(8,23,38,0.55) 0%, rgba(8,23,38,0.10) 45%, rgba(8,23,38,0) 70%);
}
.hero h1, .hero .lede, .hero .eyebrow { text-shadow: 0 2px 14px rgba(8,23,38,.55); }
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(0deg, rgba(8,23,38,0.78) 0%, rgba(8,23,38,0.48) 50%, rgba(8,23,38,0.22) 100%); }
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
  width: 100%;
}
.hero-dots {
  position: absolute;
  right: 40px;
  bottom: 36px;
  z-index: 3;
  display: flex;
  gap: 9px;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: transparent; cursor: pointer; padding: 0;
  transition: background 0.2s ease;
}
.hero-dots button.active { background: var(--white); }
.hero h1 {
  color: var(--white);
  font-size: clamp(42px, 6vw, 78px);
  max-width: 850px;
  margin-bottom: 22px;
}
.hero p.lede {
  font-size: 18px;
  max-width: 560px;
  color: rgba(255,255,255,0.86);
  margin-bottom: 34px;
  font-weight: 300;
}
.hero .eyebrow { color: var(--brass-light); }

.btn {
  display: inline-block;
  padding: 16px 34px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.98); }
.btn-brass { background: var(--brass); color: var(--white); }
.btn-brass:hover { background: var(--brass-light); }
.btn-outline { border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--brass); }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.trust-bar {
  position: relative;
  z-index: 2;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.trust-bar .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 24px;
  padding: 22px 40px;
}
.trust-item {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust-item strong { color: var(--brass-light); font-family: var(--serif); font-size: 17px; }

/* ---------- Sections ---------- */
section { padding: 110px 0; }
section.tight { padding: 70px 0; }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2 { color: var(--white); }

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); }
.section-head p { color: var(--ink-soft); font-size: 16.5px; margin-top: 16px; }

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split img { border-radius: 2px; }
.split.reverse .split-text { order: 2; }
.split.reverse .split-img { order: 1; }
.split-text p { color: var(--ink-soft); margin-bottom: 16px; font-size: 16px; }
.split-text h2 { margin-bottom: 22px; font-size: clamp(28px, 3vw, 40px); }

/* ---------- Cards / grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 40px 34px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,36,56,0.08); }
.service-card .num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--brass);
  margin-bottom: 18px;
  display: block;
}
.service-card h3 { font-size: 21px; margin-bottom: 12px; }
.service-card p { color: var(--ink-soft); font-size: 15px; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--sand-dark);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 20px;
  background: linear-gradient(0deg, rgba(8,23,38,0.85), transparent);
  color: var(--white);
  font-family: var(--serif);
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .cap { opacity: 1; }
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }

/* ---------- Testimonials ---------- */
.testi-card {
  background: var(--white);
  padding: 38px;
  border-left: 3px solid var(--brass);
}
.testi-stars { color: var(--brass); letter-spacing: 3px; margin-bottom: 18px; font-size: 15px; }
.testi-card p.quote { font-family: var(--serif); font-size: 19px; color: var(--navy); margin-bottom: 20px; line-height: 1.5; }
.testi-name { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--white); font-size: clamp(32px, 4vw, 52px); margin-bottom: 20px; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 36px; font-size: 17px; }

/* ---------- Footer ---------- */
footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 {
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--sans);
  font-weight: 600;
}
.footer-grid a, .footer-grid p { display: block; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 10px; }
.footer-grid a:hover { color: var(--brass-light); }
.footer-logo { font-family: var(--serif); font-size: 24px; color: var(--white); margin-bottom: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 26px; font-size: 12.5px; color: rgba(255,255,255,0.45);
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: 200px 0 90px;
  text-align: center;
}
.page-header h1 { color: var(--white); font-size: clamp(38px, 5vw, 60px); }
.page-header p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 18px auto 0; font-size: 16px; }

/* ---------- Utility ---------- */
.badge-row { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.badge-row .badge { text-align: center; }
.badge-row .badge strong { display: block; font-family: var(--serif); font-size: 28px; color: var(--navy); }
.badge-row .badge span { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }

.brand-strip {
  display: flex; gap: 50px; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 34px 0; opacity: 0.75;
}
.brand-strip span { font-family: var(--serif); font-size: 19px; color: var(--ink-soft); letter-spacing: 0.03em; }

/* Brand logos: official logos shown in one tone so mixed colors and white logos sit evenly */
.brand-logos {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 52px;
}
.brand-logos li { width: 150px; height: 58px; display: flex; align-items: center; justify-content: center; }
.brand-logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; filter: brightness(0); opacity: .62; }
.brand-logos.on-dark img { filter: brightness(0) invert(1); opacity: .85; }
.brands-band .section-head { margin-bottom: 34px; }
.brand-group + .brand-group { margin-top: 46px; }
.brand-group-label {
  text-align: center; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 24px;
}
@media (max-width: 600px) {
  .brand-logos { gap: 22px 24px; }
  .brand-logos li { width: 96px; height: 44px; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; }
.contact-info-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.contact-info-card:first-child { padding-top: 0; }
.contact-info-card .icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--sand); color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 18px;
}
.contact-info-card h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 6px; font-family: var(--sans); font-weight: 600; }
.contact-info-card p, .contact-info-card a { color: var(--ink-soft); font-size: 15px; display: block; }
.contact-info-card a:hover { color: var(--brass); }

.map-embed { margin-top: 34px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }

.form-card { background: var(--sand); padding: 48px; border-radius: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 14px 16px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); background: var(--white); border: 1px solid var(--line);
  border-radius: 2px; outline: none; transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brass); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.45s cubic-bezier(.23,1,.32,1), transform 0.45s cubic-bezier(.23,1,.32,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-text { order: 1; }
  .split.reverse .split-img { order: 2; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .hero-dots { right: 22px; bottom: 20px; }
  nav.main-nav { position: fixed; top: 84px; left: 0; right: 0; height: calc(100vh - 84px); background: var(--white); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 40px 30px; gap: 26px; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; }
  nav.main-nav.open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-bar .wrap { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px; }
  section { padding: 70px 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 30px 24px; }
}

/* ---------- Process / Rooms / Audience (added from competitor study) ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sand-dark); border: 1px solid var(--sand-dark); }
.process-step { background: var(--white); padding: 30px 26px 32px; }
.process-step .step-n { font-family: var(--serif); font-size: 13px; letter-spacing: 0.18em; color: var(--brass); }
.process-step h3 { font-size: 20px; margin: 10px 0 8px; }
.process-step p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }

.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .room-grid { grid-template-columns: 1fr; } }
.room-card { display: block; text-decoration: none; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--sand); }
.room-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.room-card:hover img { transform: scale(1.05); }
.room-card .room-cap { position: absolute; inset: auto 0 0 0; padding: 46px 22px 22px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(8,23,38,.88)); }
.room-card .room-cap h3 { font-size: 25px; margin: 0 0 5px; color: #fff; }
.room-card .room-cap span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light); }

.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .aud-grid { grid-template-columns: 1fr; } }
.aud-card { border: 1px solid var(--sand-dark); background: var(--white); padding: 38px 34px; }
.aud-card .eyebrow { color: var(--brass); }
.aud-card h3 { font-size: 26px; margin: 12px 0 10px; }
.aud-card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }
.aud-card ul { list-style: none; margin: 0 0 22px; padding: 0; }
.aud-card li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 14.5px; color: var(--ink-soft); }
.aud-card li:before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--brass); }
.room-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .room-grid.two { grid-template-columns: 1fr; } }

/* Story image — fixed portrait frame so it can never stretch again */
.split-img { position: relative; }
.split-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
@media (max-width: 860px) { .split-img img { aspect-ratio: 3 / 2; } }

/* ============================================
   Finish pages — added 20 Sep 2026
   ============================================ */
.fin-hero{background:var(--sand);padding:70px 0 58px;border-bottom:1px solid var(--line)}
.fin-crumb{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:18px}
.fin-crumb a{color:var(--brass)}
.fin-crumb a:hover{text-decoration:underline}
.fin-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,46px);
  line-height:1.1;color:var(--navy);max-width:20ch;text-wrap:balance}
.fin-lede{font-family:var(--serif);font-size:clamp(18px,2.1vw,21px);line-height:1.55;
  color:var(--ink-soft);max-width:60ch;margin-top:18px}
.fin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.fin-body{padding:60px 0}
.fin-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.6vw,27px);
  color:var(--navy);margin-top:34px;line-height:1.2}
.fin-body h2:first-child{margin-top:0}
.fin-body p{margin-top:12px;max-width:66ch;color:var(--ink-soft);font-size:17px}
.fin-body p a{color:var(--brass);text-decoration:underline}
.fin-pairs{margin-top:34px !important;padding:16px 20px;background:var(--sand);
  border-left:3px solid var(--brass);font-size:16px !important;color:var(--ink) !important}
.fin-need{margin-top:26px;border:2px dashed var(--brass);background:rgba(179,137,79,.08);
  padding:16px 19px;font-size:15px;color:var(--ink);max-width:72ch}
.fin-need b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:6px}

.fin-other{background:var(--sand);padding:56px 0;border-top:1px solid var(--line)}
.fin-other h2{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--navy)}
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:22px}
a.fin-card{display:block;background:var(--white);border:1px solid var(--line);padding:20px 22px;
  transition:border-color .15s,transform .15s}
a.fin-card:hover{border-color:var(--brass);transform:translateY(-2px)}
a.fin-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
a.fin-card span{display:block;font-family:var(--serif);font-size:20px;color:var(--navy)}
a.fin-card em{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
a.fin-card.big span{font-size:23px}

.fin-cta{background:var(--navy);color:var(--sand);padding:60px 0;text-align:center}
.fin-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.2vw,32px);color:var(--white)}
.fin-cta p{margin:14px auto 26px;max-width:52ch;color:rgba(246,241,231,.82)}
.fin-cta .btn-ghost{border-color:rgba(246,241,231,.5);color:var(--sand)}
.fin-cta .btn-ghost:hover{background:rgba(246,241,231,.12)}
@media (prefers-reduced-motion:reduce){a.fin-card{transition:none}a.fin-card:hover{transform:none}}

/* homepage finishes strip */
.home-finishes{padding:64px 0;background:var(--white);border-top:1px solid var(--line)}
.hf-kick{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:500}
.home-finishes h2{font-family:var(--serif);font-weight:500;font-size:clamp(25px,3.4vw,34px);
  color:var(--navy);margin-top:10px}
.hf-lede{margin-top:12px;max-width:60ch;color:var(--ink-soft);font-size:17px}
.hf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-top:26px}
.hf-grid a{display:block;background:var(--sand);border:1px solid var(--line);padding:19px 21px;
  transition:border-color .15s,transform .15s}
.hf-grid a:hover{border-color:var(--brass);transform:translateY(-2px)}
.hf-grid a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.hf-grid span{display:block;font-family:var(--serif);font-size:19px;color:var(--navy)}
.hf-grid em{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);margin-top:5px}
.hf-grid a.hf-all{background:var(--navy)}
.hf-grid a.hf-all span{color:var(--white)}
.hf-grid a.hf-all em{color:rgba(246,241,231,.75)}
@media (prefers-reduced-motion:reduce){.hf-grid a{transition:none}.hf-grid a:hover{transform:none}}

/* cost page */
.cost-band{border:1px solid var(--line);background:var(--sand)}
.cb-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:baseline;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.cb-row:last-child{border-bottom:0}
.cb-label{font-size:16.5px;color:var(--ink)}
.cb-num{font-family:var(--serif);font-size:20px;color:var(--brass);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cost-list{margin:14px 0 0 0;padding-left:20px;max-width:66ch;color:var(--ink-soft);font-size:17px}
.cost-list li{margin:9px 0}
.cost-list strong{color:var(--ink)}
mark.tbc{background:rgba(179,137,79,.18);color:var(--brass);padding:1px 5px;
  border-bottom:1px dashed var(--brass);font-style:italic}
.tbc-chip{display:inline-block;border:1px dashed var(--brass);color:var(--brass);
  padding:6px 14px;font-size:13px;font-style:italic;background:rgba(179,137,79,.10)}


/* nav-burger-1150 — 8 nav items no longer fit inline below this, so switch to the
   slide-in menu here instead of at 720. Same markup, same script. */
@media (max-width:1150px){
  nav.main-nav{position:fixed;top:84px;left:0;right:0;height:calc(100vh - 84px);
    background:var(--white);flex-direction:column;justify-content:flex-start;
    align-items:flex-start;padding:40px 30px;gap:26px;transform:translateX(100%);
    transition:transform .3s ease;overflow-y:auto;z-index:60}
  nav.main-nav.open{transform:translateX(0)}
  nav.main-nav a{font-size:19px;letter-spacing:.02em}
  .nav-toggle{display:flex}
  .header-cta{display:inline-block;margin-top:8px}
  .site-header .logo-sub{display:block}
}
@media (prefers-reduced-motion:reduce){nav.main-nav{transition:none}}

/* touch-targets-390 — phone QA, 20 Sep 2026. Three things the probe measured at 375px:
   the ☰ button was 40×32, the slide-in menu links 30px tall, and the hero dots 8×8.
   Thumbs need ~44px. The dots keep their 8px look and gain an invisible tap area, so
   nothing changes visually; the wider spacing is only on touch widths. */
/* The ☰ and its links follow the burger breakpoint (1150), not the phone one — a
   laptop at 1024 gets the same slide-in menu and the same easy targets. The dot and
   phone-link rules stay on touch widths so the hero dots keep their tight spacing on
   a laptop. */
@media (max-width:1150px){
  .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  nav.main-nav a{min-height:44px;display:flex;align-items:center}
  nav.main-nav{gap:10px}
}
@media (max-width:900px){
  .hero-dots{gap:0;right:26px}
  .hero-dots button{width:40px;height:40px;border:0;background:transparent;position:relative}
  .hero-dots button::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.7);background:transparent;transition:background .2s ease}
  .hero-dots button.active{background:transparent}
  .hero-dots button.active::after{background:var(--white)}
  a[href^="tel:"]:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}
/* The slide-in menu is position:fixed and parked at translateX(100%), which inflates
   documentElement.scrollWidth to 2× the viewport. It does not actually scroll (scrollX
   stays 0) but clip removes the phantom width without breaking position:sticky. */
@media (max-width:1150px){ html{overflow-x:clip} }

/* footer-areas — one line of town links in the shared footer. The nine town pages were
   two clicks deep (only reachable via Areas), which is the weakest possible internal
   linking for the pages meant to rank for "cabinets in <town>". Now every page links
   to every town. The current page's own town is plain text, not a self-link. */
.footer-areas{margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,0.12);
  font-size:13.5px;line-height:2;color:rgba(255,255,255,0.55)}
.footer-areas .fa-lead{text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  color:var(--brass);margin-right:12px}
.footer-areas a{color:rgba(255,255,255,0.72);text-decoration:none}
.footer-areas a:hover{color:var(--white);text-decoration:underline}
.footer-areas span:not(.fa-lead){color:rgba(255,255,255,0.45)}

/* finish-page project photos (2026-10-01) */
.fin-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.fin-photos figure{margin:0}
.fin-photos img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
@media(max-width:640px){.fin-photos{grid-template-columns:1fr}}

/* gallery page: real project photos are all landscape (2026-10-01) */
.gallery-grid.gallery-wide { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery-grid.gallery-wide .gallery-item { aspect-ratio: 3/2; }
@media (max-width: 640px) { .gallery-grid.gallery-wide { grid-template-columns: 1fr; } }

/* Details page (2026-10-01) */
.det-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.det-jump a{padding:8px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;text-decoration:none;font-size:13px;letter-spacing:.06em}
.det-jump a:hover{background:rgba(255,255,255,.12)}
.det-lede{max-width:720px;margin:14px 0 26px}
.det-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.det-grid.three{grid-template-columns:repeat(3,1fr)}
.det-grid.one{grid-template-columns:1fr;max-width:900px}
.det-fig{margin:0}
.det-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.det-fig figcaption{font-size:13px;color:var(--ink-soft,#5b6670);margin-top:7px}
@media(max-width:860px){.det-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.det-grid,.det-grid.three{grid-template-columns:1fr}}

/* Google Business Profile tie-in (1 Oct 2026) */
footer .foot-google { margin-top: 14px; }
footer .foot-google a { display: block; }
.footer-bottom .credit { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 1px; transition: color .15s, border-color .15s; }
.footer-bottom .credit:hover, .footer-bottom .credit:focus-visible { color: #fff; border-bottom-color: rgba(255,255,255,.75); }
.home-map .map-embed { margin-top: 0; }
.home-map .map-embed iframe { height: 380px; }
.map-links { text-align: center; margin-top: 16px; font-size: 15px; }
@media (max-width: 600px) { .home-map .map-embed iframe { height: 300px; } }

/* Browse by room: 5 cards (3 + 2) */
.room-grid.five { grid-template-columns: repeat(6, 1fr); }
.room-grid.five .room-card { grid-column: span 2; }
.room-grid.five .room-card:nth-child(n+4) { grid-column: span 3; aspect-ratio: 3/2; }
@media (max-width: 860px) {
  .room-grid.five { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .room-grid.five .room-card, .room-grid.five .room-card:nth-child(n+4) { grid-column: span 1; aspect-ratio: 4/5; }
  .room-grid.five .room-card:last-child { grid-column: span 2; aspect-ratio: 16/9; }
  .room-grid.five .room-cap { padding: 30px 14px 14px; }
  .room-grid.five .room-cap h3 { font-size: 20px; }
  .room-grid.five .room-cap span { font-size: 11px; letter-spacing: .08em; }
}

/* closed phone menu sits off-screen right; stop it creating sideways scroll */
html, body { overflow-x: clip; }

/* two Google reviews on home (9 Oct 2026) */
.grid-3.testi-two{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:720px){.grid-3.testi-two{grid-template-columns:1fr}}


/* ---- Pre-launch fixes (Oct 2026) ---- */
nav.main-nav a.header-cta { padding: 13px 26px; font-size: 12.5px; letter-spacing: .08em; min-height: 0; }
@media (max-width: 1150px) { nav.main-nav a.header-cta { font-size: 13px; padding: 14px 26px; display: inline-flex; } }
.aud-card .btn-outline { color: var(--navy); border-color: var(--navy); }
.aud-card .btn-outline:hover { background: var(--navy); color: var(--white); }
.section-head p.eyebrow, .page-header p.eyebrow { font-size: 12px; color: var(--brass); margin-top: 0; letter-spacing: .22em; }
.page-header h1, .fin-hero h1, .section-head h2 { text-wrap: balance; }
@media (hover: none) { .gallery-item .cap { opacity: 1; } }
@media (max-width: 980px) { .contact-grid .form-card { order: -1; } }
.hero h1 { text-wrap: balance; }
nav.main-nav a.header-cta { white-space: nowrap; padding: 12px 20px; }
.logo { white-space: nowrap; }
@media (min-width: 1151px) { nav.main-nav { margin-left: 28px; } nav.main-nav a { font-size: 12.5px; } }

/* ===== Brands & topic portal (16 Oct 2026) ===== */
.room-grid.portal{grid-template-columns:repeat(4,1fr)}
.room-grid.portal .room-card{aspect-ratio:1/1}
@media (max-width:1100px){.room-grid.portal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.room-grid.portal{gap:12px}.room-grid.portal .room-cap{padding:30px 12px 12px}.room-grid.portal .room-cap h3{font-size:18px}.room-grid.portal .room-cap span{font-size:10px;letter-spacing:.1em}}
.press-band{padding:64px 0 56px;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.press-title{text-align:center;margin:0 0 34px;font-size:clamp(30px,3.6vw,46px)}
.press-title a{color:var(--navy);text-decoration:none}
.press-title::after{content:"";display:block;width:64px;height:2px;background:var(--brass);margin:16px auto 0}
.press-logos{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 52px}
.press-logos li{width:150px;height:58px}
.press-logos a,.brand-logos a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.press-logos img{width:auto;height:auto;max-width:100%;max-height:100%;filter:brightness(0);opacity:.5;transition:opacity .25s,transform .25s}
.press-logos a:hover img,.press-logos a:focus-visible img,.brand-logos a:hover img{opacity:.9;transform:scale(1.06)}
.press-more{text-align:center;margin:30px 0 0}
.press-more a,.topic-more a{color:var(--brass);font-weight:600;text-decoration:none}
.press-more a{letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.topic-more{margin:24px 0 0;text-align:center;font-size:15px}
.topic-band-text{text-align:center;font-family:var(--serif);font-size:22px;color:var(--navy);margin:0 0 26px}
@media (max-width:600px){.press-logos{gap:22px 24px}.press-logos li{width:96px;height:44px}}
.det-grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.det-grid.four,.det-grid.three{grid-template-columns:repeat(2,1fr)}}
.tag-fig{position:relative;outline:none}
.brand-pop{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);padding:8px 12px;border-radius:4px;text-decoration:none;color:var(--navy);font-size:13px;font-weight:600;box-shadow:0 4px 18px rgba(8,23,38,.18);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}
.brand-pop img{height:22px;width:auto;max-width:90px;filter:brightness(0);opacity:.8}
.tag-fig:hover .brand-pop,.tag-fig:focus-within .brand-pop{opacity:1;transform:none;pointer-events:auto}
.ph-tile{aspect-ratio:4/3;border:1.5px dashed var(--brass);background:rgba(179,137,79,.06);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--ink-soft);font-size:13px;line-height:1.5}
.ph-tile b{color:var(--navy)}
.brand-hero-logo{height:64px;width:auto;max-width:260px;object-fit:contain;filter:brightness(0) invert(1);margin:0 auto 22px;display:block}
.brand-facts{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand-facts li{border-top:2px solid var(--brass);padding-top:12px}
.brand-facts strong{display:block;font-family:var(--serif);font-size:21px;color:var(--navy)}
.brand-facts span{font-size:13px;color:var(--ink-soft)}
@media (max-width:600px){.brand-facts{grid-template-columns:1fr}}
.brand-out{margin-top:28px;text-align:center}
.brand-out a{color:var(--brass);font-weight:600}
.brand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.brand-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.brand-cards{grid-template-columns:1fr}}
.brand-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);padding:26px;text-decoration:none;color:var(--ink);transition:box-shadow .25s,transform .25s}
.brand-card:hover{box-shadow:0 10px 30px rgba(8,23,38,.10);transform:translateY(-2px)}
.brand-card-logo{height:56px;display:flex;align-items:center;margin-bottom:18px}
.brand-card-logo img{max-height:56px;max-width:170px;width:auto;height:auto;filter:brightness(0);opacity:.7}
.brand-card h3{font-size:21px;margin:0 0 8px;color:var(--navy)}
.brand-card p{font-size:14px;color:var(--ink-soft);margin:0 0 16px;flex:1}
.brand-card-go{color:var(--brass);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ===== Brand galleries (16 Oct 2026) ===== */
.gal-grid.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:1100px){.gal-grid.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal-grid.tiles{grid-template-columns:1fr}}
.gal-grid.tiles figure{margin:0;position:relative;overflow:hidden}
.gal-grid.tiles img{aspect-ratio:61/42;object-fit:cover}
.gal-grid.tiles figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gal-grid.tiles figure::after{content:"VIEW +";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,23,38,.45);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.18em;opacity:0;transition:opacity .25s;pointer-events:none}
.gal-grid.tiles figure:hover::after{opacity:1}
.gal-grid.big{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gal-grid.big figure{margin:0}
.gal-grid.big img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:700px){.gal-grid.big{grid-template-columns:1fr}}
.gal-grid img{width:100%;height:auto;display:block}
.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,23,38,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1400px,100%);text-align:center}
.lb img{max-width:100%;max-height:82vh;width:auto;height:auto}
.lb figcaption{color:#fff;margin-top:12px;font-size:14px;letter-spacing:.04em}
.det-fig.prod img{object-fit:contain;background:#fff}
.det-grid.portrait .det-fig img{aspect-ratio:3/4}
.photo-credit{display:block;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);opacity:.8;margin-top:2px}
.lb-x{position:absolute;top:14px;right:18px;width:44px;height:44px;font-size:34px;line-height:1;color:#fff;background:none;border:0;cursor:pointer}

/* Owner bio photo (portrait) */
.split-img.bio img{aspect-ratio:4/5;object-position:center top}
@media (max-width:860px){.split-img.bio img{aspect-ratio:4/5;max-height:560px}}

/* Brand photo credit on hero slides */
.hero-credit{position:absolute;left:16px;bottom:14px;z-index:3;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (max-width:600px){.hero-credit{left:auto;right:12px;top:12px;bottom:auto}}

/* Finishes page: hardware/faucet product swatches */
.det-grid.swatch .det-fig img{aspect-ratio:1/1;object-fit:contain;background:#fff;padding:8px}
.sub-head{font-size:20px;margin:34px 0 14px;color:var(--navy)}

/* Doors page: 6 door tiles across */
.det-grid.six{grid-template-columns:repeat(6,1fr);gap:10px}
.det-grid.six figcaption{font-size:12px;line-height:1.35}
@media (max-width:1000px){.det-grid.six{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.det-grid.six{grid-template-columns:repeat(2,1fr)}}
.det-grid.six .brand-pop{left:6px;top:6px;padding:6px 8px;font-size:11px}
.det-grid.six .brand-pop img{height:16px}

/* Tap targets at every width (pre-launch QA 16 Oct): banner dots get a 40px hit area
   with the same 8px dot drawn inside; phone links get 44px height. */
.hero-dots{gap:0}
.hero-dots button{width:40px;height:40px;border:0;background:transparent;position:relative;padding:0}
.hero-dots button::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,0.7);background:transparent;transition:background .2s ease}
.hero-dots button.active{background:transparent}
.hero-dots button.active::after{background:var(--white)}
a[href^="tel:"]:not(.btn){display:inline-flex;align-items:center;min-height:44px}

/* Shoreline lighthouse beside the name (from Josh's business card, 16 Oct) */
.logo.has-mark{display:inline-flex;align-items:center;gap:10px}
.logo .logo-mark{height:60px;width:auto;flex:none;display:block}
.logo .logo-text{color:inherit;display:block}
@media (max-width:600px){.logo .logo-mark{height:50px}.logo.has-mark{gap:8px}}

/* NC flag in the home footer (Ryan, 16 Oct) */
.footer-flag{margin:14px 0 0}
.footer-flag .nc-flag{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* CrispLine credit badge (Ryan, 16 Oct): bigger, cleaner */
.footer-bottom{align-items:center}
.site-credit{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.6);letter-spacing:.02em}
.footer-bottom .site-credit .credit{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-size:15px;font-weight:500;letter-spacing:.02em;text-decoration:none;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.footer-bottom .site-credit .credit strong{color:var(--brass-light);font-weight:600}
.footer-bottom .site-credit .credit .credit-mark{color:var(--brass-light);flex:none}
.footer-bottom .site-credit .credit:hover,.footer-bottom .site-credit .credit:focus-visible{border-color:var(--brass-light);background:rgba(255,255,255,.07);color:#fff}
@media (max-width:600px){.footer-bottom{flex-direction:column;align-items:flex-start}}

/* FAQ + blog */
.faq-list{margin-top:14px;border-top:1px solid var(--line);max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;font-family:var(--serif);
  font-size:clamp(17px,2vw,19px);color:var(--navy);line-height:1.4;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--sans,inherit);
  font-size:26px;color:var(--brass);line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--brass)}
.faq-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.faq-a{padding:0 0 18px}
.faq-a p{margin-top:0}
.faq-body h2{margin-top:40px}
.post-meta{margin-top:14px;font-size:14px;letter-spacing:.04em;color:var(--ink-soft)}
.post-hero{margin:0 0 26px;max-width:880px}
.post-hero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:2px}
.post-body ul{margin:12px 0 0 20px;max-width:66ch;color:var(--ink-soft);font-size:17px}
.post-body li{margin-top:8px}
.post-body li a,.post-faq-link a{color:var(--brass);text-decoration:underline}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
a.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:border-color .2s,transform .2s}
a.post-card:hover{border-color:var(--brass);transform:translateY(-2px)}
a.post-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
a.post-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.post-card-text{display:block;padding:18px 20px 22px}
.post-card-text time{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.post-card-text strong{display:block;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.3;color:var(--navy);margin-top:8px}
.post-card-text em{display:block;font-style:normal;font-size:15px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.post-faq-link{margin-top:28px}
.home-advice .post-grid{margin-top:26px}
.home-advice .advice-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:reduce){a.post-card{transition:none}a.post-card:hover{transform:none}}

/* lighthouse beam: sweeps three turns from the lamp for 5 seconds, then fades */
.logo-mark-wrap{position:relative;display:block;flex:none;line-height:0}
.logo.has-mark .logo-text{position:relative;z-index:1}
.beam{position:absolute;left:49%;top:4.6%;width:0;height:0;pointer-events:none;opacity:0;z-index:0}
.beam::before{content:"";position:absolute;left:0;top:-14px;width:210px;height:28px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(236,176,52,.95) 0%,rgba(240,190,80,.6) 30%,rgba(245,205,110,.22) 70%,rgba(245,205,110,0) 100%);
  clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);filter:drop-shadow(0 0 3px rgba(236,176,52,.55))}
.beam::after{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe08a 30%,rgba(236,176,52,.75) 50%,rgba(236,176,52,0) 74%)}
.beam.on{animation:beamLife 6.25s ease-in-out forwards}
.beam.on::before{animation:beamSweep 2.08s ease-in-out 3}
.beam.on::after{animation:beamFlash 2.08s ease-in-out 3}
@keyframes beamLife{0%{opacity:0}6%{opacity:.6}86%{opacity:.6}100%{opacity:0}}
@keyframes beamSweep{0%{transform:scaleX(1)}25%{transform:scaleX(.04)}50%{transform:scaleX(-1)}75%{transform:scaleX(.04)}100%{transform:scaleX(1)}}
@keyframes beamFlash{0%,50%,100%{transform:scale(1);opacity:.75}25%,75%{transform:scale(2.4);opacity:1}}
@media (max-width:600px){.beam::before{width:140px;height:22px;top:-11px}}
@media (prefers-reduced-motion:reduce){.beam{display:none}}

/* homepage gallery buttons: spaced row, stacked full-width with gaps on phones */
.gal-actions{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
@media (max-width:640px){.gal-actions{flex-direction:column;align-items:center;gap:16px}.gal-actions .btn{width:100%;max-width:340px;text-align:center}}

/* nav-9-items (17 Oct 2026) — Brands added after About; tighten the gap so all 9 stay on one line on laptops */
@media (min-width:1151px) and (max-width:1500px){nav.main-nav{gap:24px;margin-left:20px}}