/* ==========================================================================
   Lion Windows & Doors — v2 Architectural Design System
   Aesthetic reference: architecture-firm portfolio sites.
   Palette: stone / charcoal / near-black + warm wood accent.
   Type: Fraunces (serif, display) + Archivo (grotesk, UI/body).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Archivo:wght@400;500;600;700;800&display=swap");

:root {
  /* --- Core palette --- */
  --black: #12110d;
  --charcoal: #201e18;
  --stone-900: #2b2822;
  --stone-700: #514c41;
  --stone-500: #6a6357;
  --stone-400: #b5ad9c;
  --stone-300: #c9c1b0;
  --stone-200: #ddd6c6;
  --stone-100: #eee9dd;
  --paper: #f6f3ec;
  --white: #fbfaf6;

  /* --- Wood accent --- */
  --wood: #6b3d18;
  --wood-dark: #5a3210;
  --wood-light: #d5a269;
  --wood-on-dark: #e0b483;

  /* --- Lion yellow (from logo) --- */
  --lion-yellow: #febf00;
  --lion-yellow-dark: #e0a800;

  --ink: var(--black);
  --muted: var(--stone-700);
  --line: rgba(18, 17, 13, 0.12);
  --line-invert: rgba(251, 250, 246, 0.2);

  /* --- Type scale --- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --max: 1440px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 2px;
  --shadow-lg: 0 40px 90px -20px rgba(18, 17, 13, 0.35);
  --shadow-sm: 0 18px 40px -12px rgba(18, 17, 13, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

.serif {
  font-family: var(--serif);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - (var(--gutter) * 2), 860px);
  margin-inline: auto;
}

.bleed {
  width: 100%;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

section {
  position: relative;
}

.section-pad {
  padding: clamp(52px, 6vw, 88px) 0;
}

.section-pad-sm {
  padding: clamp(40px, 5vw, 64px) 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
}

.on-dark .rule,
.dark-section .rule {
  border-top-color: var(--line-invert);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--wood);
}

.eyebrow.center {
  justify-content: center;
}
.fine-print {
  margin-top: 30px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--stone-700);
}

h1, .h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(40px, 5.5vw, 72px);
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 4.4vw, 58px);
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  font-size: clamp(22px, 2.2vw, 28px);
}

h4, .h4 {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}

.body-copy {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.7;
}

.small-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-700);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-family: var(--grotesk);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}

.btn:hover {
  background: var(--wood-dark);
  border-color: var(--wood-dark);
  transform: translateY(-1px);
}

.btn.outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn.outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn.on-dark {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.btn.on-dark:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn.wood {
  background: var(--lion-yellow);
  border-color: var(--lion-yellow);
  color: var(--black);
}

.btn.wood:hover {
  background: var(--lion-yellow-dark);
  border-color: var(--lion-yellow-dark);
  color: var(--black);
}

.btn.full {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  color: var(--white);
  transition: background 260ms var(--ease), color 260ms var(--ease), padding 260ms var(--ease), box-shadow 260ms var(--ease);
}

.site-header.scrolled,
.site-header.solid {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--ink);
  background: rgba(246, 243, 236, 0.94);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
  /* Never let the flex row squeeze the brand below its content width — the
     wordmark would spill over whatever sits beside it. */
  flex-shrink: 0;
  min-width: 0;
}

.brand-emblem {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.brand-emblem img {
  display: block;
  width: auto;
  height: 60px;
}

/* The transparent header sits over dark hero imagery, so the emblem's black
   ground plane has to invert until the header picks up its solid background. */
.site-header .brand-emblem .on-light {
  display: none;
}

.site-header.scrolled .brand-emblem .on-light,
.site-header.solid .brand-emblem .on-light {
  display: block;
}

.site-header.scrolled .brand-emblem .on-dark,
.site-header.solid .brand-emblem .on-dark {
  display: none;
}

.footer-brand .brand {
  display: block;
}

.brand-full {
  display: block;
  width: auto;
  height: 92px;
}

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
}

.brand-name small {
  display: block;
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 1;
  margin-top: 4px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
}

/* Nav tabs get a pill background so they read clearly against any hero. */
.desktop-nav a {
  padding: 10px 16px;
  border-radius: 9px;
  background: rgba(18, 17, 13, 0.07);
  transition: background 180ms ease, color 180ms ease;
}

.desktop-nav a:hover {
  background: rgba(18, 17, 13, 0.14);
}

.desktop-nav a.active {
  background: var(--ink);
  color: var(--white);
}

/* Transparent header over dark hero imagery: invert the pill treatment. */
.site-header:not(.scrolled):not(.solid) .desktop-nav a {
  background: rgba(255, 255, 255, 0.14);
}

.site-header:not(.scrolled):not(.solid) .desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.26);
}

.site-header:not(.scrolled):not(.solid) .desktop-nav a.active {
  background: var(--wood);
  color: var(--white);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.phone-link {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.header-actions .btn {
  min-height: 44px;
  padding: 0 22px;
}

.site-header.scrolled .btn,
.site-header.solid .btn {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  /* Keep the 40px hit target instead of letting flex shrink it. */
  flex: 0 0 auto;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 100px var(--gutter) 60px;
  background: var(--black);
  color: var(--white);
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 420ms var(--ease), visibility 420ms;
}

.mobile-nav.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-invert);
  font-family: var(--serif);
  font-size: 30px;
}

.mobile-nav a.active {
  color: var(--wood-light);
}

.mobile-nav .mobile-nav-foot {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-nav .mobile-nav-foot a {
  border: 0;
  font-family: var(--grotesk);
  font-size: 17px;
  font-weight: 700;
}

.mobile-nav .mobile-nav-foot > a:not(.btn) {
  color: var(--white);
  background: var(--black);
}

.mobile-nav .mobile-nav-foot .btn.wood,
.mobile-nav .mobile-nav-foot .btn.wood.active {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 150px var(--gutter) 80px;
  color: var(--white);
  overflow: hidden;
  background: var(--black);
}

.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: hero-in 2400ms var(--ease) forwards;
}

/* Homepage hero only: bright summer look */
.hero .hero-media {
  filter: brightness(1.22) saturate(1.12);
}

@keyframes hero-in {
  from { transform: scale(1.12); opacity: 0.7; }
  to { transform: scale(1.04); opacity: 1; }
}

.hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 17, 13, 0.28) 0%, rgba(18, 17, 13, 0.16) 42%, rgba(18, 17, 13, 0.72) 100%);
}

/* Homepage hero only: keep the photo bright, shade just the text area */
.hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(18, 17, 13, 0.05) 0%, rgba(18, 17, 13, 0.02) 42%, rgba(18, 17, 13, 0.34) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(48px, 6.6vw, 92px);
  text-shadow: 0 2px 22px rgba(18, 17, 13, 0.55), 0 1px 3px rgba(18, 17, 13, 0.4);
}

.hero .eyebrow,
.page-hero .eyebrow {
  color: #47280f;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(251, 250, 246, 0.9);
}

.hero-copy {
  max-width: 660px;
  margin-top: 26px;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(18, 17, 13, 0.5);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  max-width: 900px;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 250, 246, 0.35);
}

.hero-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--white);
}

.hero-meta span a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-meta span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(251, 250, 246, 0.92);
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(251, 250, 246, 0.9);
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: rgba(251, 250, 246, 0.4);
  animation: cue-move 1800ms ease-in-out infinite;
}

@keyframes cue-move {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Interior/sub-page hero (shorter, static) */
.page-hero {
  position: relative;
  display: block;
  padding: 170px var(--gutter) 60px;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

.page-hero .hero-media {
  animation: none;
  transform: none;
}

.page-hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  gap: 48px;
  align-items: end;
}

.page-hero h1 {
  font-size: clamp(44px, 5vw, 68px);
}

.page-hero-grid .lede {
  margin-top: 0;
  color: var(--white);
  max-width: none;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.6;
}

.one-stop-note {
  margin-top: 18px;
  max-width: 680px;
  color: var(--white);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}

.one-stop-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.one-stop-process > div {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--white);
}

.one-stop-process strong,
.one-stop-process span {
  display: block;
}

.one-stop-process strong {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
}

.one-stop-process span {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.9);
}

.hero-top-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 24px;
}

.hero-top-row .breadcrumb {
  margin-bottom: 0;
}

.editor-login {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid rgba(251, 250, 246, 0.9);
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.92);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.editor-login:hover,
.editor-login:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.hero .btn.on-dark {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.hero .btn.on-dark:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.dark-section .eyebrow,
.wood-section .eyebrow {
  color: var(--white);
}

.dark-section .eyebrow::before,
.wood-section .eyebrow::before {
  background: var(--wood-on-dark);
}

.step-head span,
.product-tag,
.event-banner-kicker {
  color: var(--stone-700);
}

/* --------------------------------------------------------------------------
   Section heading pattern
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-head .lede {
  max-width: 480px;
}

.section-head.center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.section-head.center .lede {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Numbered index list (services, process)
   -------------------------------------------------------------------------- */
.index-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.4fr auto;
  align-items: center;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  transition: background 260ms var(--ease);
}

.index-row:last-child {
  border-bottom: 1px solid var(--line);
}

.index-list a.index-row:hover {
  background: rgba(164, 112, 63, 0.06);
}

.index-num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--stone-700);
}

.index-row h3 {
  font-size: clamp(24px, 2.6vw, 34px);
}

.index-row p {
  color: var(--muted);
  line-height: 1.6;
  max-width: 480px;
}

.index-arrow {
  justify-self: end;
  font-size: 24px;
  transition: transform 260ms var(--ease);
}

.index-list a.index-row:hover .index-arrow {
  transform: translateX(8px);
}

/* --------------------------------------------------------------------------
   Cards / grids
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
}

.media-card {
  overflow: hidden;
}

.media-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.media-card:hover img {
  transform: scale(1.045);
}

.media-card .media-card-body {
  padding: 26px 4px 4px;
}

.media-card h3 {
  font-size: 22px;
}

.media-card p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.tri-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.four-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

/* --------------------------------------------------------------------------
   Split / feature bands
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.split.reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.split.reverse > :first-child {
  order: 2;
}

.split img,
.split .frame {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.stat-list {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

.stat-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.stat-list strong {
  font-family: var(--serif);
  font-size: 34px;
}

.stat-list span {
  color: var(--muted);
  align-self: center;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Dark / wood sections
   -------------------------------------------------------------------------- */
.dark-section {
  background: var(--black);
  color: var(--white);
}

.dark-section .body-copy,
.dark-section .lede {
  color: rgba(251, 250, 246, 0.88);
}

.dark-section .card {
  background: rgba(251, 250, 246, 0.04);
  border-color: var(--line-invert);
}

.wood-section {
  background: var(--stone-900);
  color: var(--white);
}

.wood-section .body-copy,
.wood-section .lede {
  color: rgba(251, 250, 246, 0.9);
}

/* --------------------------------------------------------------------------
   Quote / testimonial
   -------------------------------------------------------------------------- */
.quote-block {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 60px;
  align-items: center;
}

.quote-block blockquote {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.3;
}

.quote-block cite {
  display: block;
  margin-top: 24px;
  font-family: var(--grotesk);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stone-700);
}

.review-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.review-strip article {
  padding-top: 24px;
  border-top: 1px solid var(--line-invert);
}

.review-strip .stars {
  color: var(--wood-light);
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.review-strip p {
  line-height: 1.65;
}

.review-strip footer {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--stone-300);
}

/* --------------------------------------------------------------------------
   Gallery / lightbox
   -------------------------------------------------------------------------- */
.gallery-grid {
  --gallery-gap: clamp(16px, 2vw, 26px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gallery-gap);
}

.gallery-item {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  /* Three per row, so every gallery image sits on one horizontal line and
     the whole set fits across the page. */
  width: calc((100% - (var(--gallery-gap) * 2)) / 3 - 1px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  padding: 0;
  background: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item figcaption,
.gallery-item .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  color: var(--white);
  font-size: 14px;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, transparent, rgba(18, 17, 13, 0.72));
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
  text-align: left;
}

.gallery-item:hover figcaption,
.gallery-item:hover .cap {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy span classes kept in markup; uniform squares ignore them. */
.gallery-item.span-2,
.gallery-item.span-1 {
  width: calc((100% - (var(--gallery-gap) * 2)) / 3 - 1px);
}

/* Below this the three-up row would shrink past the old thumbnail size, so
   drop to two and then one per row. */
@media (max-width: 760px) {
  .gallery-item,
  .gallery-item.span-2,
  .gallery-item.span-1 {
    width: calc(50% - (var(--gallery-gap) / 2) - 1px);
  }
}

@media (max-width: 480px) {
  .gallery-item,
  .gallery-item.span-2,
  .gallery-item.span-1 {
    width: 100%;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(18, 17, 13, 0.94);
}

.lightbox.open {
  display: flex;
}

.lightbox-frame {
  position: relative;
  max-width: 1100px;
  width: 100%;
}

.lightbox-frame img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.lightbox-cap {
  margin-top: 16px;
  color: var(--stone-200);
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: 1px solid var(--line-invert);
  background: rgba(251, 250, 246, 0.06);
  color: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lightbox-close {
  top: -56px;
  right: 0;
  width: 40px;
  height: 40px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: -60px;
}

.lightbox-next {
  right: -60px;
}

@media (max-width: 900px) {
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close { top: -46px; right: 0; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 40px;
  align-items: center;
  padding: clamp(64px, 8vw, 110px) 0;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Forms — shared field styling
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: 8px;
}

.field > label,
.field-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--stone-700);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wood);
  box-shadow: 0 0 0 3px rgba(164, 112, 63, 0.16);
}

/* Visible keyboard focus for links and buttons (accessibility) */
a:focus-visible,
button:focus-visible,
.option-tile:focus-within,
.checkbox-line:focus-within,
summary:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 2px;
  border-radius: 2px;
}

.field.error input,
.field.error select,
.field.error textarea {
  border-color: #a63b2e;
}

.field-error {
  display: none;
  font-size: 14px;
  font-weight: 600;
  color: #8f2f24;
}

.field.error .field-error {
  display: block;
}

.form-error-summary {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid #a63b2e;
  border-left-width: 5px;
  border-radius: 8px;
  background: #fdf1ef;
  color: #8f2f24;
  font-size: 16px;
  line-height: 1.5;
}

.form-error-summary ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.form-error-summary,
.field {
  scroll-margin-top: 120px;
}

.option-grid.field.error .option-tile {
  border-color: #a63b2e;
}

.address-autocomplete {
  position: relative;
}

.address-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.address-suggestion {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  color: var(--stone-700);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.address-suggestion:last-child {
  border-bottom: 0;
}

.address-suggestion:hover,
.address-suggestion:focus {
  background: var(--stone-100);
  color: var(--ink);
  outline: none;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--stone-900);
  line-height: 1.55;
}

.checkbox-line input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  accent-color: var(--wood);
}

/* Option tiles (radio/checkbox groups styled as cards) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.option-tile {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  cursor: pointer;
  background: var(--white);
  transition: border-color 200ms ease, background 200ms ease;
}

.option-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-tile .opt-title {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
}

.option-tile .opt-sub {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
}

.option-tile:hover {
  border-color: var(--wood);
}

.option-tile.is-selected {
  border-color: var(--wood);
  background: rgba(164, 112, 63, 0.07);
}

.option-grid .field-error {
  grid-column: 1 / -1;
}

.option-tile.is-selected::after {
  content: "✓";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wood);
  color: var(--white);
  font-size: 14px;
}

.upload-zone {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--stone-300);
  border-radius: var(--radius);
  background: var(--stone-100);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.upload-zone.drag {
  border-color: var(--wood);
  background: rgba(164, 112, 63, 0.08);
}

.upload-zone input {
  display: none;
}

.upload-zone .up-title {
  font-weight: 700;
  font-size: 16px;
}

.upload-zone .up-sub {
  font-size: 14px;
  color: var(--stone-700);
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.upload-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 14px;
  background: var(--white);
}

.upload-chip button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--stone-700);
  font-size: 18px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Multi-step funnel (estimate.html)
   -------------------------------------------------------------------------- */
.funnel {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.funnel-progress {
  padding: 30px clamp(24px, 4vw, 56px) 0;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--stone-700);
}

.progress-track {
  height: 3px;
  background: var(--stone-200);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 8%;
  background: var(--wood);
  transition: width 420ms var(--ease);
}

.funnel-steps {
  padding: clamp(28px, 4vw, 56px);
}

.funnel-step {
  display: none;
}

.funnel-step.active {
  display: grid;
  gap: 26px;
  animation: step-in 460ms var(--ease);
}

@keyframes step-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

.step-head span {
  color: var(--stone-700);
}

.step-head h2 {
  margin-top: 10px;
  font-size: clamp(26px, 3vw, 38px);
}

.step-head p {
  margin-top: 10px;
  color: var(--muted);
}

.funnel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(24px, 4vw, 56px) clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

.funnel-actions .step-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--stone-700);
  letter-spacing: 0.03em;
  text-transform: none;
}

.funnel-nav-btns {
  display: flex;
  gap: 12px;
}

.success-state {
  display: none;
  text-align: center;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 4vw, 56px);
}

.success-state.active {
  display: block;
  animation: step-in 500ms var(--ease);
}

.success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid var(--wood);
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--wood);
}

.success-state h2 {
  margin-bottom: 14px;
}

.success-state p {
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

.summary-list {
  margin-top: 34px;
  text-align: left;
  display: grid;
  gap: 10px;
  max-width: 480px;
  margin-inline: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}

.summary-list dt {
  color: var(--stone-700);
}

.summary-list dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 30px);
}

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  transition: box-shadow 260ms ease, transform 260ms ease;
}

.product-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.product-card img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.product-card-body {
  padding: 22px;
}

.product-tag {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-700);
}

.product-card h3 {
  margin-top: 10px;
  font-size: 20px;
}

.product-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.product-price strong {
  font-family: var(--serif);
  font-size: 17px;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr {
  border-top: 1px solid var(--line);
}

.spec-table td {
  padding: 16px 4px;
  vertical-align: top;
}

.spec-table td:first-child {
  width: 220px;
  color: var(--stone-700);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.post-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.post-meta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--stone-700);
}

.post-card h3 {
  margin-top: 12px;
  font-size: 23px;
}

.post-card p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.post-card.featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.post-card.featured img {
  aspect-ratio: 5 / 4;
}

.article-body {
  max-width: 720px;
  margin-inline: auto;
}

.article-body > * + * {
  margin-top: 24px;
}

.article-body h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin-top: 52px;
}

.article-body h3 {
  font-size: 22px;
  margin-top: 40px;
}

.article-body p,
.article-body li {
  color: var(--stone-900);
  line-height: 1.8;
  font-size: 17px;
}

.article-body ul,
.article-body ol {
  padding-left: 22px;
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body blockquote {
  padding-left: 24px;
  border-left: 2px solid var(--wood);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
}

.article-body figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.article-body figcaption {
  margin-top: 10px;
  font-size: 15px;
  color: var(--stone-700);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
}
.article-body th,
.article-body td {
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--line);
  vertical-align: top;
}
.article-body th {
  background: var(--stone-100);
  color: var(--black);
  font-weight: 700;
}
.article-body td {
  color: var(--stone-700);
}
.article-body .text-link,
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .article-body table {
    font-size: 15px;
  }
  .article-body th,
  .article-body td {
    padding: 8px 10px;
  }
}

.article-hero-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  font-size: 15px;
  color: var(--stone-700);
}

/* --------------------------------------------------------------------------
   City pages
   -------------------------------------------------------------------------- */
.city-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.city-chip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
}

.city-chip.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--stone-300);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1fr;
  gap: 32px;
  padding: clamp(64px, 8vw, 100px) 0 60px;
}

.footer-brand p {
  margin-top: 20px;
  max-width: 300px;
  color: var(--stone-300);
  line-height: 1.65;
  font-size: 16px;
}

.footer-col h4 {
  color: var(--white);
  margin-bottom: 18px;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.footer-service-note {
  margin: -6px 0 16px;
  color: var(--stone-500);
  font-size: 13px;
  line-height: 1.45;
}

.footer-col ul {
  display: grid;
  gap: 12px;
}

.footer-col a {
  color: var(--stone-300);
  font-size: 16px;
  transition: color 180ms ease;
}

.footer-col a:hover {
  color: var(--white);
}

.footer-newsletter form {
  display: flex;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--line-invert);
}

.footer-newsletter input {
  flex: 1;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
}

.footer-newsletter input::placeholder {
  color: var(--stone-300);
}

.footer-newsletter p {
  color: var(--stone-300) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.footer-newsletter button {
  border: 0;
  padding: 0 20px;
  background: var(--wood);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--line-invert);
  font-size: 14px;
  color: var(--stone-300);
}

.footer-bottom a {
  color: var(--stone-300);
}

.footer-bottom a:hover {
  color: var(--white);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: none;
}

/* --------------------------------------------------------------------------
   Toast (form confirmations, newsletter, etc.)
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  padding: 14px 22px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.center-text { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.tag-row span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Review strip
   -------------------------------------------------------------------------- */
.review-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  margin-top: 44px;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.review-stars {
  color: #8a6508;
  font-size: 17px;
  letter-spacing: 3px;
}
.review blockquote {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  flex: 1 1 auto;
}
.review figcaption {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--stone-700);
}
@media (max-width: 860px) {
  .review-strip {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Journal carousel (single-line entry with prev/next arrows)
   -------------------------------------------------------------------------- */
.journal-carousel {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  margin-top: 40px;
}

.journal-arrow {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: 20px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.journal-arrow:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.journal-entry {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}

.journal-entry .post-meta {
  font-size: 15px;
}

.journal-title {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-entry:hover .journal-title {
  color: var(--wood);
}
/* --------------------------------------------------------------------------
   Journal index (all entries, compact rows)
   -------------------------------------------------------------------------- */
.journal-index {
  margin-top: 44px;
  display: grid;
  gap: 14px;
}
.journal-item {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: clamp(16px, 2.5vw, 26px);
  align-items: center;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.journal-item:hover {
  border-color: var(--wood);
  box-shadow: 0 10px 30px rgba(24, 24, 22, 0.08);
  transform: translateY(-2px);
}
.journal-item-thumb img {
  display: block;
  width: 128px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.journal-item-body {
  min-width: 0;
}
.journal-item-meta {
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--stone-700);
}
.journal-item-title {
  display: block;
  margin-top: 7px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.journal-item:hover .journal-item-title {
  color: var(--wood);
}
.journal-item-arrow {
  font-size: 22px;
  color: var(--stone-400);
  transition: color 180ms ease, transform 180ms ease;
}
.journal-item:hover .journal-item-arrow {
  color: var(--wood);
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .journal-item {
    grid-template-columns: 84px 1fr auto;
    padding: 10px 12px;
  }
  .journal-item-thumb img {
    width: 84px;
  }
  .journal-item-title {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  /* Header is wider with the larger type; drop the phone number first. */
  .phone-link {
    display: none;
  }
}

@media (max-width: 1080px) {
  .desktop-nav,
  .phone-link {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .section-head,
  .split,
  .split.reverse,
  .quote-block,
  .cta-band,
  .page-hero-grid,
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .split.reverse > :first-child {
    order: 0;
  }

  .cta-band-actions {
    justify-content: flex-start;
  }

  .tri-grid,
  .two-grid,
  .four-grid,
  .product-grid,
  .post-grid,
  .review-strip,
  .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-card.featured {
    grid-column: span 2;
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-top {
    gap: 44px;
  }

}

@media (max-width: 720px) {
  /* The fixed bottom CTA bar takes over the estimate action at this width, so
     the header drops its own CTA rather than crowding the brand wordmark. */
  .header-actions {
    display: none;
  }

  .hero {
    min-height: 92vh;
    padding: 112px 20px 44px;
  }

  .hero h1 {
    font-size: clamp(40px, 11vw, 56px);
  }

  .hero-copy {
    font-size: 18px;
  }

  .brand-emblem img {
    height: 46px;
  }

  .brand-name {
    font-size: 23px;
  }

  .brand-name small {
    font-size: 14px;
  }

  .brand-full {
    height: 78px;
  }

  /* Keep the fixed bottom CTA bar from covering footer content. */
  .site-footer {
    padding-bottom: 80px;
  }

  .journal-carousel {
    gap: 12px;
  }

  .journal-title {
    white-space: normal;
  }

  .hero-meta {
    gap: 26px;
  }

  .page-hero {
    padding: 132px 20px 50px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .one-stop-process {
    grid-template-columns: 1fr;
  }

  .index-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }

  .index-arrow {
    justify-self: start;
  }

  .tri-grid,
  .two-grid,
  .four-grid,
  .product-grid,
  .post-grid,
  .review-strip,
  .option-grid,
  .form-row,
  .form-row.three,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .post-card.featured {
    grid-column: 1;
  }

  .quote-block {
    gap: 30px;
  }

  .lightbox-prev,
  .lightbox-next {
    display: none;
  }

  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

  .mobile-cta {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--black);
    border-top: 1px solid var(--line-invert);
  }

  .mobile-cta a {
    min-height: 62px;
    display: grid;
    place-items: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    border-right: 1px solid var(--line-invert);
  }

  .mobile-cta a:last-child {
    border-right: 0;
  }

  body {
    padding-bottom: 62px;
  }
}

/* ==========================================================================
   Brand row
   ========================================================================== */
.brand-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(26px, 5vw, 56px);
  margin-top: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.brand-row a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* Heights are tuned per logo so every mark reads at the same optical
     height (~26px of actual artwork) despite different artwork padding. */
  height: calc(var(--logo-h, 26px) * var(--logo-scale, 1));
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-row a:hover,
.brand-row a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.brand-row img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

.brand-logo--all-weather { --logo-h: 26.5px; }
.brand-logo--milgard { --logo-h: 26px; }
.brand-logo--pella { --logo-h: 30px; }
.brand-logo--jeld-wen { --logo-h: 36px; }
.brand-logo--fleetwood { --logo-h: 29px; }
.brand-logo--lacantina { --logo-h: 26px; }
.brand-logo--velux { --logo-h: 28px; }

@media (max-width: 700px) {
  .brand-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 18px;
    padding: 32px 0;
  }

  .brand-row a {
    --logo-scale: 0.82;
    width: 100%;
    max-width: 150px;
    margin-inline: auto;
  }

  .brand-row img {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .brand-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .brand-row a {
    --logo-scale: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-row a,
  .brand-row a:hover,
  .brand-row a:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   FAQ list (details/summary accordion)
   ========================================================================== */
.faq-list {
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}

.faq-list details[open] {
  background: rgba(164, 112, 63, 0.03);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4px;
  font-family: var(--grotesk);
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: var(--stone-400);
  transition: transform 0.3s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-list details[open] summary::after {
  content: "\2212";
  color: var(--wood);
}

.faq-list summary:hover {
  color: var(--wood);
}

.faq-list details p {
  padding: 0 4px 24px;
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.75;
  color: var(--stone-700);
  max-width: 68ch;
}

/* ==========================================================================
   Map embed
   ========================================================================== */
.map-embed {
  margin-top: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.map-embed iframe {
  display: block;
  width: 100%;
  filter: grayscale(0.4) contrast(1.05);
}


/* ==========================================================================
   Event page (Velux training) + side banner
   ========================================================================== */
.event-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.event-layout .fine-print {
  margin-top: 22px;
}

.event-flyer {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}

.event-flyer img {
  display: block;
  width: 100%;
  height: auto;
}

.event-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  margin: 40px 0 0 auto;
  padding: 14px 18px 14px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wood);
  border-radius: 5px;
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.event-banner:hover {
  border-color: var(--wood);
  box-shadow: 0 12px 30px rgba(28, 25, 23, 0.08);
  transform: translateY(-2px);
}

.event-banner img {
  width: 56px;
  height: 74px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
}

.event-banner-body {
  min-width: 0;
}

.event-banner-kicker {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-700);
}

.event-banner-title {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

.event-banner-meta {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  color: var(--stone-700);
}

.event-banner-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--wood);
  transition: transform 0.3s ease;
}

.event-banner:hover .event-banner-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .event-layout {
    grid-template-columns: 1fr;
  }
  .event-flyer {
    max-width: 520px;
  }
  .event-banner {
    max-width: none;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   404 — page not found
   -------------------------------------------------------------------------- */
/* The header is fixed, so the top padding has to clear it (96px desktop,
   78px mobile) plus breathing room, matching the clearance on other pages. */
.not-found {
  padding: clamp(140px, 13vw, 176px) 0 clamp(64px, 9vw, 120px);
}

.not-found-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}

.not-found-mark {
  width: auto;
  height: clamp(104px, 13vw, 152px);
  margin-bottom: 36px;
}

.not-found h1 {
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.not-found .lede {
  margin-top: 22px;
  max-width: 540px;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}

.not-found-links {
  width: 100%;
  margin-top: clamp(46px, 6vw, 68px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.not-found-links h2 {
  font-family: var(--grotesk);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-700);
}

.not-found-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin-top: 22px;
}

.not-found-links a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
}

.not-found-links a:hover {
  border-color: var(--wood);
  background: var(--paper);
  transform: translateY(-1px);
}

.article-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.not-found-help {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--stone-700);
}

.not-found-help a {
  color: var(--wood);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Narrow phones (<= 480px)
   Long CTA labels such as "Existing Customer? Request Service" cannot fit on
   one line here, and because .btn is nowrap they would widen the whole page.
   Let them wrap and go full width instead.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .btn {
    max-width: 100%;
    padding: 14px 22px;
    white-space: normal;
    text-align: center;
  }

  .stat-list li {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .stat-list span {
    overflow-wrap: anywhere;
  }

  .funnel-actions,
  .funnel-nav-btns {
    flex-wrap: wrap;
    gap: 12px;
  }

  .event-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-table,
  .article-body table {
    table-layout: fixed;
    overflow-wrap: anywhere;
  }

  .spec-table td:first-child {
    width: 30%;
  }

  .cta-band-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .cta-band-actions .btn {
    width: 100%;
    height: auto;
    padding: 14px 22px;
    white-space: normal;
    text-align: center;
  }
}