/* ==========================================================================
   Cedar & Slate Roofing: design system
   Every page uses these values. Change them here, never inline on a page.

   COLOUR ROLES
   --slate   #1E2A36  main brand colour. Headings on light bands, the hero band, the
                      closing call panel and the footer. Always carries white text.
   --copper  #C2672E  accent. Decorative only (rules, icons, drawing lines). It is 3.98:1
                      on white, so it is never used for body text on white.
   --copper-deep  #A4501C  fills the primary button (white text, 5.6:1) and colours links
                      and eyebrows on light bands.
   --copper-light #E0915A  eyebrows, icons and accents on dark bands (5.8:1 on slate).
   --cream   #F5EFE6  the tinted band. Cards on it are white.
   --forest  #2F4A3F  the second dark band (storm damage). Always white text.
   Rhythm: white, cream, white, dark band, white. Never two dark bands in a row.

   TYPE (Montserrat)             desktop            phone (<= 720px)
   h1                            60/1.05  800       38/1.1
   h2 section heading            44/1.1   800       30/1.15
   h3 sub-heading                22/1.3   700       20/1.3
   lead (line under a heading)   20/1.6   500       18/1.55
   body                          18/1.65  400       17/1.6
   small                         14/1.5   500       14/1.5
   eyebrow                       13/1     700  uppercase, 0.14em tracking
   button                        16/1     700

   SPACE
   content width 1200px. Side padding 32px desktop, 20px phone.
   section padding 120px desktop, 72px phone. Column gap 64px, card gap 24px.
   card padding 32px (24px phone). One radius, 14px. One shadow (--shadow).
   Border 1px solid --line.
   ========================================================================== */

:root {
  --slate: #1E2A36;
  --slate-2: #273644;
  --copper: #C2672E;
  --copper-deep: #A4501C;
  --copper-deeper: #8A4316;
  --copper-light: #E0915A;
  --cream: #F5EFE6;
  --cream-2: #EDE4D6;
  --forest: #2F4A3F;
  --white: #FFFFFF;
  --text: #36414C;
  --muted: #5B6672;
  --line: #E4DACB;
  --line-dark: rgba(255, 255, 255, 0.14);

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --pad: 32px;
  --section: 120px;
  --gap: 24px;
  --col-gap: 64px;
  --card-pad: 32px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(30, 42, 54, 0.06), 0 14px 36px rgba(30, 42, 54, 0.09);
  --header-h: 80px;
  --fab: 56px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 720px) {
  :root {
    --pad: 20px;
    --section: 72px;
    --col-gap: 40px;
    --card-pad: 24px;
    --header-h: 66px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (max-width: 720px) { body { font-size: 17px; line-height: 1.6; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--copper-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--copper-deeper); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { margin: 0; color: var(--slate); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: 60px; line-height: 1.05; }
h2 { font-size: 44px; line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: 0; }
@media (max-width: 720px) {
  h1 { font-size: 34px; line-height: 1.1; }
  h2 { font-size: 30px; line-height: 1.15; }
  h3 { font-size: 20px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copper-deep);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.lead { font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--text); }
@media (max-width: 720px) { .lead { font-size: 18px; line-height: 1.55; } }
.small { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 12px 18px; background: var(--slate); color: #fff; border-radius: var(--radius); font-weight: 700; }
.skip-link:focus { top: 12px; color: #fff; }

.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 20px; height: 20px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.section-white { background: var(--white); }
.section-cream { background: var(--cream); }
.section-dark { background: var(--slate); color: rgba(255, 255, 255, 0.86); }
.section-forest { background: var(--forest); color: rgba(255, 255, 255, 0.88); }
.section-dark h2, .section-dark h3, .section-forest h2, .section-forest h3 { color: #fff; }
.section-dark .eyebrow, .section-forest .eyebrow { color: var(--copper-light); }
.section-dark .lead, .section-forest .lead { color: rgba(255, 255, 255, 0.86); }

.section-head { margin-bottom: 56px; }
.section-head h2 + .lead, .section-head h2 + p { margin-top: 20px; }
@media (max-width: 720px) { .section-head { margin-bottom: 36px; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.split-wide { grid-template-columns: 5fr 7fr; }
.split-center { align-items: center; }
@media (max-width: 960px) { .split, .split-wide { grid-template-columns: 1fr; } }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  font: 700 16px/1 var(--font); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn .icon { width: 20px; height: 20px; stroke-width: 2; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--copper-deep); color: #fff; box-shadow: 0 8px 20px rgba(164, 80, 28, 0.28); }
.btn-primary:hover { background: var(--copper-deeper); color: #fff; }
.btn-dark { background: var(--slate); color: #fff; }
.btn-dark:hover { background: var(--slate-2); color: #fff; }
.btn-light { background: #fff; color: var(--slate); }
.btn-light:hover { background: var(--cream); color: var(--slate); }
.btn .nowrap { display: contents; }
.btn-sm { min-height: 46px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }

/* A phone button and a contact button side by side: same width, same height. */
.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 14px; }
.btn-pair .btn { width: 100%; }
@media (max-width: 560px) { .btn-pair { grid-template-columns: 1fr; } }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--copper-deep); text-decoration: none;
}
.text-link .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.2s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }
.section-dark .text-link, .section-forest .text-link { color: var(--copper-light); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(30, 42, 54, 0.06); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--slate); flex: none; }
.brand-mark { width: 42px; height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--slate); }
.brand-sub { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.32em; color: var(--copper-deep); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  white-space: nowrap;
  padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--slate); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav a:hover { background: var(--cream); color: var(--slate); }
.nav a[aria-current="page"] { color: var(--copper-deep); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
  font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--slate); border-radius: var(--radius);
}
.header-phone:hover { background: var(--slate-2); color: #fff; }
.header-phone .icon { width: 18px; height: 18px; stroke-width: 2; }

.menu-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--cream); color: var(--slate); border: 0; border-radius: var(--radius); cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-open .menu-toggle .icon-open { display: none; }
.menu-open .menu-toggle .icon-close { display: block; }

.mobile-menu { display: none; }

@media (max-width: 1240px) {
  .nav, .header-actions { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 18px; }
  .mobile-menu {
    position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 890;
    display: flex; flex-direction: column;
    padding: 12px var(--pad) calc(112px + env(safe-area-inset-bottom));
    background: #fff; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mobile-menu nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 4px; border-bottom: 1px solid var(--line);
    font-size: 18px; font-weight: 700; color: var(--slate); text-decoration: none;
  }
  .mobile-menu nav a .icon { color: var(--copper); width: 20px; height: 20px; }
  .mobile-menu-actions { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
  .mobile-menu-actions .btn { width: 100%; }
  .menu-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--slate); color: rgba(255, 255, 255, 0.86);
  padding: 88px 0 0;
}
.hero::before {
  /* fine roof pitch lines, 6 in 12, very faint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 70%);
  mask-image: linear-gradient(to right, transparent 0%, #000 70%);
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; }
.hero:not(.page-hero) h1 { font-size: clamp(42px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -0.035em; }
.hero:not(.page-hero) h1 em { display: block; }
@media (max-width: 720px) { .hero:not(.page-hero) h1 { font-size: clamp(32px, 8.2vw, 48px); line-height: 1.06; } .hero:not(.page-hero) h1 em { display: inline; } }
.hero-head { margin-bottom: 8px; }
.hero:not(.page-hero) .hero-grid { align-items: start; }
.hero:not(.page-hero) .hero-grid > div:first-child { padding-top: 20px; }
@media (min-width: 1101px) { .hero:not(.page-hero) .hero-art { margin-top: -100px; } }
.hero h1 em { font-style: normal; color: var(--copper-light); }
.hero .eyebrow { color: var(--copper-light); }
.hero-answer { margin: 26px 0 36px; font-size: 20px; line-height: 1.6; font-weight: 500; color: rgba(255, 255, 255, 0.84); }
.hero-art { position: relative; padding-bottom: 36px; }
.hero-art > svg { width: 100%; height: auto; }
.hero-float {
  position: absolute; left: -28px; bottom: 0; max-width: 330px;
  display: flex; align-items: center; gap: 14px; padding: 16px 20px 16px 16px;
  background: #fff; border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
.hero-float-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--copper-deep); color: #fff; }
.hero-float strong { display: block; font-size: 16px; line-height: 1.3; color: var(--slate); }
.hero-float strong + span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--muted); }
.hero-chip {
  position: absolute; right: 0; top: -8px; margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.06);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
}
.hero-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 0 4px rgba(224, 145, 90, 0.2); }
/* the copper roof line draws itself once, then the labels settle in */
.js .hero-art .draw { stroke-dasharray: 540; stroke-dashoffset: 540; animation: roof-draw 1.4s var(--ease) 0.5s forwards; }
.js .hero-art .callouts { opacity: 0; animation: fade-in 0.8s var(--ease) 1.5s forwards; }
@keyframes roof-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
.hero-proof {
  position: relative; margin-top: 88px;
  border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero-proof li { list-style: none; display: flex; align-items: center; gap: 14px; padding: 28px 20px 30px 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; }
.hero-proof li + li { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.hero-proof .icon { color: var(--copper-light); width: 26px; height: 26px; }
.page-hero { padding: 96px 0 104px; }

.page-hero .hero-answer { margin-bottom: 36px; }
@media (max-width: 1080px) {
  .hero-proof { grid-template-columns: repeat(2, 1fr); }
  .hero-proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-proof li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { max-width: 520px; }
  .hero-float { left: 0; }
}
@media (max-width: 720px) {
  .hero { padding-top: 48px; }
  .hero:not(.page-hero) .hero-grid > div:first-child { padding-top: 0; }
  .page-hero { padding: 48px 0 64px; }
  .hero-answer { font-size: 17px; margin: 18px 0 26px; }
  .hero-art { display: none; }
  .hero-proof { margin-top: 48px; }
  .hero-proof li { padding: 20px 12px 22px 0; font-size: 14px; gap: 10px; }
  .hero-proof li + li { padding-left: 14px; }
  .hero-proof .icon { width: 22px; height: 22px; }
}

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--card-pad);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.section-cream .card { background: #fff; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 16px; line-height: 1.6; }
.card-foot { margin-top: auto; padding-top: 24px; }
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card-lift:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(30, 42, 54, 0.06), 0 22px 44px rgba(30, 42, 54, 0.13); }
.card-icon {
  width: 52px; height: 52px; margin-bottom: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--slate); color: var(--copper-light);
}
.card-icon .icon { width: 26px; height: 26px; }

/* service card */
.service-card .price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-line .label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-line .value { font-size: 20px; font-weight: 800; color: var(--slate); }
.service-card .card-foot { padding-top: 20px; }
@media (max-width: 640px) { .service-card .card-foot { padding-top: 0; } }

/* fact card: a single complete statement with one big number */
.fact-card { padding: 28px; }
.fact-card .fact-num { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--slate); }
.fact-card .fact-num span { color: var(--copper); }
.fact-card p { margin-top: 14px; font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) {
  .fact-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fact-grid .fact-card { padding: 20px 16px; }
  .fact-grid .fact-num { font-size: 30px; }
  .fact-grid .fact-card p { font-size: 14px; }
}

/* cards on a dark band: a lighter panel of the band, never a light card with light text */
.section-dark .card, .section-forest .card { background: rgba(255, 255, 255, 0.06); border-color: var(--line-dark); box-shadow: none; color: rgba(255, 255, 255, 0.82); }
.section-dark .card h3, .section-forest .card h3, .section-dark .fact-num, .section-forest .fact-num { color: #fff; }
.section-dark .fact-num span, .section-forest .fact-num span { color: var(--copper-light); }

/* feature list with check marks */
.checks { list-style: none; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks .icon { color: var(--copper); margin-top: 3px; width: 22px; height: 22px; stroke-width: 2; }
.section-dark .checks .icon, .section-forest .checks .icon { color: var(--copper-light); }

/* ---------- Problems ---------- */
.problem-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.problem-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.problem-list .num { font-size: 15px; font-weight: 800; color: var(--copper-deep); padding-top: 4px; }
.problem-list h3 { font-size: 20px; margin-bottom: 6px; }
.problem-list p { font-size: 16px; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: linear-gradient(to right, var(--copper) 0 50%, transparent 50%) 0 0 / 12px 2px repeat-x; opacity: 0.5; }
.step { position: relative; display: flex; flex-direction: column; }
.step .step-time { margin-top: auto !important; padding-top: 14px; }
.step-num {
  position: relative; width: 56px; height: 56px; margin-bottom: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--slate); color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 0 8px var(--white);
}
.section-cream .step-num { box-shadow: 0 0 0 8px var(--cream); }
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 15.5px; line-height: 1.6; }
.step .step-time { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper-deep); }
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(to bottom, var(--copper) 0 50%, transparent 50%) 0 0 / 2px 12px repeat-y; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 24px; padding-bottom: 36px; }
  .step .step-time { padding-top: 10px; }
  .step:last-child { padding-bottom: 0; }
  .step-num { grid-row: span 3; }
}

/* ---------- Storm band ---------- */
.storm { position: relative; overflow: hidden; }
.storm::after {
  content: ""; position: absolute; right: -80px; top: -40px; width: 520px; height: 520px; pointer-events: none;
  background-image: repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}
.storm .wrap { position: relative; z-index: 1; }
.storm-panel { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 36px; }
.storm-panel h3 { margin-bottom: 18px; }
.storm-panel .checks li { font-size: 16px; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 720px) { .storm-panel { padding: 24px; } }

/* ---------- Reviews ---------- */
.review-card blockquote { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: var(--slate); font-weight: 500; }
.review-card .quote-mark { width: 34px; height: 34px; color: var(--copper); margin-bottom: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.review-who { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.review-who .avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--slate); color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.review-who strong { display: block; color: var(--slate); font-size: 16px; }
.review-who span { font-size: 14px; color: var(--muted); }

/* ---------- Areas ---------- */
.area-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.area-list li {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 700; color: var(--slate); font-size: 16px;
}
.area-list .icon { color: var(--copper); width: 20px; height: 20px; }
.map-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--slate); box-shadow: var(--shadow); aspect-ratio: 4 / 3;
}
.map-card svg { width: 100%; height: 100%; }
@media (max-width: 720px) { .area-list li { min-height: 52px; padding: 0 14px; font-size: 15px; gap: 10px; } }
@media (max-width: 359px) { .area-list { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--slate);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: 0; }
.faq .faq-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--copper-deep); transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq .faq-icon .icon { width: 18px; height: 18px; stroke-width: 2.25; }
.section-cream .faq .faq-icon { background: #fff; }
.faq details[open] .faq-icon { transform: rotate(45deg); background: var(--slate); color: #fff; }
.faq .faq-body { padding: 0 60px 28px 0; font-size: 17px; }
.faq summary:hover { color: var(--copper-deep); }
@media (max-width: 720px) {
  .faq summary { font-size: 17px; padding: 22px 0; }
  .faq .faq-body { padding-right: 0; font-size: 16px; }
}
.sticky-side { position: sticky; top: calc(var(--header-h) + 40px); }
@media (max-width: 960px) { .sticky-side { position: static; } }

/* ---------- Contact section and form ---------- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--col-gap); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-details { list-style: none; display: grid; gap: 14px; margin-top: 32px; }
.contact-details li { display: flex; gap: 14px; align-items: flex-start; }
.contact-details .icon { color: var(--copper); margin-top: 3px; }
.contact-details a { color: var(--slate); font-weight: 700; text-decoration: none; }
.contact-details a:hover { color: var(--copper-deep); }
.contact-details .small { display: block; }

.form-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line);
  padding: 36px; scroll-margin-top: calc(var(--header-h) + 16px);
}
.form-card .form-title { font-size: 22px; margin-bottom: 6px; }
.form-card .form-intro { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; color: var(--slate); }
.field label .opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 500 16px/1.4 var(--font); color: var(--slate);
  background: #FBF8F3; border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 104px; resize: vertical; }
.field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4501C' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #D3C5B1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; border-color: var(--copper); box-shadow: 0 0 0 4px rgba(194, 103, 46, 0.16); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B42318; background-color: #FFF8F7; }
.field-error { display: none; font-size: 13px; font-weight: 600; color: #B42318; }
.field.has-error .field-error { display: block; }
.form-actions { grid-column: 1 / -1; margin-top: 6px; }
.form-note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.form-success { display: none; text-align: center; padding: 24px 8px; }
.form-success .success-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--forest); color: #fff; }
.form-success .success-icon .icon { width: 30px; height: 30px; stroke-width: 2.25; }
.form-success h3 { margin-bottom: 12px; }
.form-success p { font-size: 16px; }
.form-success a { font-weight: 700; }
.form-card.is-sent form, .form-card.is-sent .form-head { display: none; }
.form-card.is-sent .form-success { display: block; }
@media (max-width: 720px) {
  /* compact enough that the whole form fits between the header and the round buttons */
  .form-card { padding: 18px 16px; }
  .form-card .form-head { display: none; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .form-grid .field:not(.field-pair) { grid-column: 1 / -1; }
  .field { gap: 4px; }
  .field label { font-size: 13px; }
  .field input, .field select { min-height: 44px; padding: 9px 12px; }
  .field textarea { min-height: 48px; height: 48px; }
  .form-actions { margin-top: 2px; }
  .form-note { margin-top: 8px; font-size: 12px; }
}

/* ---------- Hours ---------- */
.hours { list-style: none; display: grid; gap: 0; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.hours li span:first-child { font-weight: 700; color: var(--slate); }
.hours li.is-today span { color: var(--copper-deep); }

/* ---------- Price cards ---------- */
.price-card { position: relative; }
.price-card .price-from { margin: 18px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-card .price-big { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--slate); }
.price-card .price-big { margin-bottom: 0; }
.price-card .card-foot .text-link { min-height: 56px; }
.price-card .price-range { margin-top: 10px; font-size: 15px; color: var(--text); }
.price-card .checks { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; gap: 10px; }
.price-card .checks .icon { width: 18px; height: 18px; }
.price-card.is-featured { background: var(--slate); border-color: var(--slate); color: rgba(255, 255, 255, 0.86); }
.price-card.is-featured h3, .price-card.is-featured .price-big { color: #fff; }
.price-card.is-featured .price-from { color: rgba(255, 255, 255, 0.66); }
.price-card.is-featured .price-range { color: rgba(255, 255, 255, 0.86); }
.price-card.is-featured .checks { border-color: var(--line-dark); }
.price-card.is-featured .checks .icon { color: var(--copper-light); }
.price-card.is-featured .card-icon { background: var(--copper-deep); color: #fff; }
.price-tag { position: absolute; top: 24px; right: 24px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--copper-deep); color: #fff; }

/* label and value pairs, used where other sites would use a table */
.pairs { list-style: none; display: grid; gap: 0; }
.pairs li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pairs li span:first-child { color: var(--text); }
.pairs li span:last-child { font-weight: 800; color: var(--slate); text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .pairs li { flex-direction: column; gap: 2px; } .pairs li span:last-child { text-align: left; } }

/* ---------- Owners / about ---------- */
.owner-card { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.owner-mono { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--slate); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; position: relative; }
.owner-mono::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--copper); opacity: 0.6; }
.owner-card strong { display: block; font-size: 19px; color: var(--slate); }
.owner-card span { font-size: 15px; color: var(--muted); }
.owner-card strong + span { display: block; margin-top: 4px; line-height: 1.5; }
.owner-card .owner-mono { color: #fff; font-size: 26px; }
.art-card { aspect-ratio: 8 / 5; }
.founders-card {
  position: relative; overflow: hidden; margin: 0; padding: 36px;
  background: var(--slate); color: rgba(255, 255, 255, 0.86); border-radius: var(--radius); box-shadow: var(--shadow);
}
.founders-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 32px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 75%); mask-image: linear-gradient(to left, #000, transparent 75%);
}
.founders-card > * { position: relative; }
.founders-mark { width: 56px; height: 56px; margin-bottom: 22px; }
.founders-card blockquote { margin: 0 0 26px; font-size: 22px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.founders-card figcaption { padding-top: 20px; border-top: 1px solid var(--line-dark); }
.founders-card figcaption strong { display: block; font-size: 16px; color: var(--copper-light); }
.founders-card figcaption span { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
@media (max-width: 720px) { .founders-card { padding: 28px 24px; } .founders-card blockquote { font-size: 19px; } }

.crew-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); overflow: hidden;
}
.crew-stat { display: flex; flex-direction: column; gap: 10px; padding: 36px 32px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.crew-stat:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.crew-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
.crew-num { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #fff; }
.crew-num em { font-style: normal; color: var(--copper-light); }
@media (max-width: 720px) { .crew-stat { padding: 24px 18px; font-size: 14px; } .crew-num { font-size: 44px; } }
.value-card .value-num { font-size: 14px; font-weight: 800; color: var(--copper-deep); letter-spacing: 0.1em; margin-bottom: 18px; }

.timeline { list-style: none; border-left: 2px solid var(--line); margin-left: 8px; display: grid; gap: 30px; }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--copper); }
.timeline .year { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--copper-deep); margin-bottom: 4px; }
.timeline p { font-size: 16px; }

/* ---------- Final call panel ---------- */
.final-cta { padding: var(--section) 0; background: var(--white); }
.final-cta.flush { padding-top: 0; }
.cta-panel {
  position: relative; overflow: hidden;
  padding: 72px; border-radius: calc(var(--radius) * 2);
  background: var(--slate); color: rgba(255, 255, 255, 0.86);
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-26.57deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 36px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
  mask-image: linear-gradient(to left, #000, transparent 70%);
}
.cta-panel > * { position: relative; }
.cta-panel h2 { color: #fff; }
.cta-panel .eyebrow { color: var(--copper-light); }
.cta-panel p:not(.eyebrow) { margin-top: 16px; font-size: 18px; }
.cta-actions { display: grid; gap: 12px; min-width: 280px; }
.cta-actions .btn { width: 100%; }
.btn-ghost-light { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
@media (max-width: 960px) { .cta-panel { grid-template-columns: 1fr; padding: 48px 32px; } .cta-actions { min-width: 0; } }
@media (max-width: 720px) { .cta-panel { padding: 40px 22px; gap: 28px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--slate); color: rgba(255, 255, 255, 0.78); padding: 88px 0 0; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 48px; }
.site-footer h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-light); margin-bottom: 20px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--copper-light); }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-mark rect { fill: rgba(255, 255, 255, 0.08); }
.site-footer .brand-sub { color: var(--copper-light); }
.site-footer address { font-style: normal; margin: 22px 0 16px; line-height: 1.7; }
.footer-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; }
.footer-phone .icon { color: var(--copper-light); width: 20px; height: 20px; }
.footer-links { list-style: none; display: grid; gap: 12px; }
.footer-areas { margin-top: 20px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.66); }
.footer-hours { list-style: none; display: grid; gap: 6px; margin-bottom: 22px; }
.footer-hours li { display: flex; justify-content: space-between; gap: 12px; }
.footer-hours li span:last-child { color: #fff; font-weight: 600; }
.footer-cta { display: grid; gap: 14px; justify-items: start; }
.footer-cta .btn { width: 100%; }
.footer-bottom {
  margin-top: 72px; padding: 28px 0 36px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom p { margin: 0; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .site-footer { padding-top: 64px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; margin-top: 48px; }
}

/* ---------- Fixed buttons: call, contact, chat ---------- */
.fab-blur {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 980; height: 128px; pointer-events: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
}
.fab-row {
  position: fixed; left: 0; right: 0; z-index: 1000; pointer-events: none;
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.fab {
  pointer-events: auto;
  width: var(--fab); height: var(--fab); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px rgba(30, 42, 54, 0.28);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.fab:hover { transform: translateY(-2px); color: #fff; }
.fab .icon { width: 24px; height: 24px; stroke-width: 2; }
.fab-call { background: var(--slate); }
.fab-contact { background: var(--copper-deep); }
.fab-chat { background: var(--forest); }
.fab-chat .icon-close { display: none; }
.chat-open .fab-chat .icon-chat { display: none; }
.chat-open .fab-chat .icon-close { display: block; }

@media (min-width: 1241px) {
  .fab-blur, .fab-call, .fab-contact { display: none; }
  .fab-row { justify-content: flex-end; padding: 0 28px; bottom: 28px; }
  .fab { --fab: 60px; }
}
@media (max-width: 1240px) {
  .site-footer { padding-bottom: 104px; }
}

.chat-pop {
  position: fixed; z-index: 1001; right: 24px; bottom: calc(18px + var(--fab) + 16px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 48px));
  padding: 24px; border-radius: var(--radius);
  background: #fff; color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(30, 42, 54, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom right;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.chat-open .chat-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat-pop h2 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; padding-right: 28px; }
.chat-pop p { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
.chat-pop .chat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chat-pop .btn { min-height: 46px; padding: 0 14px; font-size: 14px; }
.chat-pop .chat-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--cream); color: var(--slate); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-pop .chat-close .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.chat-pop .chat-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); }
.chat-pop .chat-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3FA36B; }
@media (min-width: 1241px) { .chat-pop { right: 28px; bottom: 104px; } }
.menu-open .chat-pop { display: none; }

/* ---------- Misc ---------- */
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.divider-roof { display: block; width: 100%; height: 36px; color: var(--cream); }
.note-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--copper); box-shadow: var(--shadow); }
.note-card .icon { color: var(--copper); margin-top: 2px; }
.note-card p { font-size: 16px; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 40px; }
.prose h2 { margin: 56px 0 18px; font-size: 30px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
.notfound-num { font-size: 120px; line-height: 1; font-weight: 800; color: var(--copper-light); letter-spacing: -0.04em; margin-bottom: 12px; }

/* ---------- Scroll reveal ----------
   Only hidden when the script has run (html.js), so the page reads with scripts off.
   Fades and rises 24px over 0.8s. Turned off for reduced motion. */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .hero [data-reveal] { transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .hero-art .draw { stroke-dashoffset: 0; }
  .js .hero-art .callouts { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Narrow phones (360px and below) ---------- */
.grid > *, .split > *, .contact-grid > *, .hero-grid > * { min-width: 0; }
.contact-details a, .contact-details span, .site-footer a { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .price-card .price-big { font-size: 34px; }
  .price-tag { position: static; align-self: flex-start; margin-bottom: 16px; }
}