/* Central Coast Joinery — site stylesheet
   Re-themed from the BPM Group generator: softened Royal Blue #1B2C9B
   (primary), Wave Cyan #00A8FF (accent), Sun Yellow #F9C600 (garnish only,
   never text), Arial Black headings, Arial body.

   Blue softened from the logo's #000AB4 on 2026-08-24 (Kourtney): the pure
   logo blue read electric on screen, and it was also being used for every
   paragraph. Body copy is now near-black and the blue is structural only —
   headings, buttons, kickers, the CTA band. */

:root {
  --ink: #1B2C9B;        /* CCJ Royal Blue, softened — structural colour, headings */
  --text: #1a1a1a;       /* body copy — near-black, softened off pure #000 for screen */
  --text-soft: rgba(26, 26, 26, 0.78); /* secondary body copy — card/point/step/FAQ text */
  --navy: #14206F;       /* darker royal blue — hover states only */
  --blue: #00A8FF;       /* CCJ Wave Cyan — accent */
  --blue-deep: #1B2C9B;  /* same as ink — buttons, kickers, CTA band */
  --yellow: #F9C600;     /* CCJ Sun Yellow — small garnish accents only, never text */
  --paper: #ffffff;      /* CCJ white background */
  --stone: #eef2fb;      /* light cool-tinted card base */
  --line: rgba(27, 44, 155, 0.15);
  --white: #ffffff;
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.section-dark :focus-visible, .cta-band :focus-visible, footer :focus-visible,
.hero :focus-visible, .topbar :focus-visible { outline-color: #ffffff; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 800;
  text-decoration: none;
}
.skip:focus { left: 0; }

body {
  font-family: Arial, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: var(--white); }

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

h1, h2, h3, h4, .display {
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  line-height: 0.95;
}

a { color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Two-tone rule (Kourtney, 2026-08-24): white writing on the blue background,
   black writing on the white background. Nothing in between — the accent word
   in a heading no longer changes colour, it just sits in the page's text
   colour for that background. Blue stays as a background and button colour. */
.accent { color: inherit; }
.hero .accent, .section-dark .accent { color: var(--white); }

/* ---------- family bar (shared across all three BPM Group sites) ---------- */
.family-bar{background:#1B2C9B;color:#fff;font-size:.78rem;letter-spacing:.02em}
.family-bar .wrap{display:flex;gap:1rem;align-items:center;padding:.35rem 1rem;max-width:1100px;margin:0 auto;flex-wrap:wrap}
.family-bar .fam-name{font-weight:800;opacity:.85}
.family-bar a{color:#fff;text-decoration:none;opacity:.85}
.family-bar a:hover,.family-bar a:focus{opacity:1;text-decoration:underline}
.family-bar .fam-current{font-weight:700;border-bottom:2px solid #00A8FF}

/* ---------- top bar ---------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { color: var(--blue); }
.topbar .addr { display: none; }
@media (min-width: 720px) { .topbar .addr { display: inline; } }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { height: 37px; width: auto; }
.brand span {
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.03em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active { border-bottom-color: var(--blue); }
.nav-cta {
  background: var(--blue-deep);
  color: var(--white) !important;
  padding: 10px 20px;
  border-bottom: none !important;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--navy); }

.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
}
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 30px;
  flex-direction: column;
  gap: 6px;
}
.nav-toggle-label span {
  height: 3px;
  background: var(--ink);
  display: block;
}

@media (max-width: 980px) {
  .nav-toggle-label { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 24px;
    gap: 18px;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { display: block; padding: 8px 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 44, 155, 0.95) 0%, rgba(27, 44, 155, 0.45) 55%, rgba(27, 44, 155, 0.35) 100%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 72px;
}

/* Phone hero: show the photo whole instead of cropping it. See the painting
   site's stylesheet for the full explanation — a tall portrait box with
   background-size: cover turned a landscape photo into a zoomed vertical
   slice. Below 700px the photo sits as its own 4:3 band across the top. */
@media (max-width: 700px) {
  .hero {
    min-height: 0;
    background-color: var(--ink);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 75vw;
  }
  .hero::before {
    top: 75vw;
    background: var(--ink);
  }
  .hero .wrap {
    padding-top: 26px;
    padding-bottom: 40px;
  }
}
.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 6px 14px;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(44px, 8vw, 104px);
  margin-bottom: 26px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.hero-sub {
  max-width: 560px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 24px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn {
  display: inline-block;
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 30px;
  transition: all 0.25s;
}
.btn-blue { background: var(--blue-deep); color: var(--white); }
.btn-blue:hover { background: var(--white); color: var(--text); }
.btn-ghost { border: 2px solid rgba(255, 255, 255, 0.6); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--text); border-color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--blue); }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-dark { background: var(--ink); color: var(--paper); }

.kicker {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  margin-bottom: 14px;
}
.section-dark .kicker, .hero .kicker { color: var(--white); }
.section h2, .section h1.page-title { font-size: clamp(34px, 5.5vw, 68px); margin-bottom: 20px; }
.lede { max-width: 640px; font-size: 18px; font-weight: 500; }
.section-dark .lede { color: rgba(255, 255, 255, 0.75); }

/* ---------- stats strip ---------- */
.stats {
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--blue);
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (min-width: 860px) { .stats .wrap { grid-template-columns: repeat(4, 1fr); } }
.stat strong {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 42px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.stat span {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- service cards ---------- */
.cards {
  display: grid;
  gap: 28px;
  margin-top: 52px;
}
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 10px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.section-dark .card { color: var(--text); }
.card:hover {
  box-shadow: 8px 8px 0 0 var(--blue);
  transform: translate(-2px, -2px);
}
.card figure {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 18px;
}
.card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.35);
  transform: scale(1.06);
  transition: all 0.6s;
}
.card:hover figure img { filter: saturate(1); transform: scale(1); }
.card .tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--blue-deep);
  color: var(--white);
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
}
.card-body { padding: 0 10px 18px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 26px; margin-bottom: 10px; }
.card p { font-size: 15px; font-weight: 500; color: var(--text-soft); flex: 1; }
.card .card-link {
  margin-top: 20px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue-deep);
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

/* ---------- feature split ---------- */
.split {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-top: 52px;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-photo { position: relative; }
/* height: auto is load-bearing — see the painting site's stylesheet. Every
   <img> here carries HTML width/height attributes, and without height:auto the
   browser uses the height attribute as the box height, rendering the photo as
   a thin vertical strip and ignoring aspect-ratio. */
.split-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 8px solid var(--white);
  box-shadow: 12px 12px 0 0 var(--ink);
}
.section-dark .split-photo img {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 12px 12px 0 0 var(--blue);
}
.split-quote {
  position: absolute;
  bottom: -26px;
  left: -14px;
  background: var(--ink);
  color: var(--white);
  padding: 22px 26px;
  max-width: 300px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
.split-quote p { font-family: "Arial Black", Arial, sans-serif; text-transform: uppercase; font-size: 17px; line-height: 1.2; }

.points { display: grid; gap: 22px; margin-top: 32px; }
@media (min-width: 640px) { .points { grid-template-columns: 1fr 1fr; } }
.point { border-left: 4px solid var(--blue); padding-left: 18px; }
.point strong {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  margin-bottom: 4px;
}
.point p { font-size: 14px; font-weight: 500; color: var(--text-soft); }
.section-dark .point p { color: rgba(255, 255, 255, 0.65); }

/* ---------- gallery strip ---------- */
.gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 24px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
/* Landscape at every width. This used to be a fixed height: 320px, so on a
   narrow screen the tile kept its height while the width shrank and the frame
   went portrait. Matters more here than on the painting site, because several
   of the kitchen and laundry photos are portrait phone shots — the frame has
   to be a consistent landscape shape or the strip looks ragged. */
.gallery figure {
  flex: 0 0 auto;
  width: min(76vw, 420px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3);
  transition: all 0.6s;
}
.gallery figure:hover img { filter: saturate(1); transform: scale(1.05); }

/* ---------- checklist ---------- */
.checklist { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.checklist li {
  font-weight: 600;
  padding-left: 32px;
  position: relative;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background: var(--yellow);
}

/* ---------- process steps ---------- */
.steps { display: grid; gap: 28px; margin-top: 52px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 28px;
  counter-increment: step;
}
.step::before {
  content: '0' counter(step);
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 44px;
  color: var(--text);
  margin-bottom: 12px;
}
.step strong {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  margin-bottom: 8px;
}
.step p { font-size: 14px; font-weight: 500; color: var(--text-soft); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
  padding: 72px 24px;
}
.cta-band h2 { font-size: clamp(30px, 4.5vw, 54px); margin-bottom: 14px; }
.cta-band p { font-size: 17px; font-weight: 600; margin-bottom: 30px; }
.cta-band .btn-dark { background: var(--ink); border: 2px solid var(--white); }
.cta-band .btn-dark:hover { background: var(--white); color: var(--text); }

/* ---------- contact page ---------- */
.contact-grid { display: grid; gap: 40px; margin-top: 52px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 36px;
}
.contact-card h3 { font-size: 22px; margin-bottom: 20px; }
.contact-row { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.contact-row:last-child { border-bottom: none; }
.contact-row span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-deep);
  margin-bottom: 4px;
}
.contact-row a { text-decoration: none; font-weight: 700; font-size: 18px; }
.contact-row a:hover { color: var(--blue); }
.contact-row p { font-weight: 600; font-size: 17px; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 18px 0 0;
}
.crumbs a { text-decoration: none; color: rgba(26, 26, 26, 0.65); padding: 6px 0; display: inline-block; }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--blue-deep); }
.crumbs .sep { color: rgba(26, 26, 26, 0.3); padding: 0 6px; }

/* ---------- prose ---------- */
.prose { max-width: 720px; }
.prose p { margin-bottom: 18px; font-size: 17px; font-weight: 500; color: var(--text); }
.prose strong { color: var(--text); }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; max-width: 780px; }
.faq details {
  background: var(--white);
  border: 2px solid var(--ink);
  margin-bottom: 14px;
}
.faq summary {
  cursor: pointer;
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 18px 22px;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  font-size: 26px;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p { padding: 0 22px 20px; font-weight: 500; color: var(--text-soft); }

/* ---------- related services / links ---------- */
.related { margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 32px; }
.related .related-title { font-size: 22px; margin-bottom: 18px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.related-links a {
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--ink);
  padding: 10px 18px;
  transition: all 0.2s;
}
.section-dark .related-links a { border-color: var(--white); color: var(--white); }
.related-links a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---------- footer ---------- */
footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  border-top: 4px solid var(--blue);
  padding: 64px 0 32px;
}
.footer-grid { display: grid; gap: 36px; margin-bottom: 48px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
footer .footer-h {
  color: var(--white);
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
  margin-bottom: 14px;
}
footer p, footer li { font-size: 14px; font-weight: 500; }
footer ul { list-style: none; display: grid; gap: 8px; }
footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
footer a:hover { color: var(--blue); }

/* ---------- family footer (shared across all three BPM Group sites) ---------- */
.family-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 8px;
  padding-top: 32px;
  padding-bottom: 24px;
}
.family-footer h2 {
  color: var(--white);
  font-size: 19px;
  margin-bottom: 16px;
}
.family-footer ul { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.family-footer li { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.family-footer a { color: var(--blue); text-decoration: none; font-weight: 700; }
.family-footer a:hover { text-decoration: underline; }
.family-footer > p { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.footer-note {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- page hero (subpages) ---------- */
.page-hero { min-height: 56vh; }
.page-hero h1 { font-size: clamp(38px, 6vw, 80px); }