/* ==========================================================================
   J&J Home Solutions — Design System
   Buffalo, NY / Western New York general contracting site

   Mobile-first: unqualified rules below target the smallest viewport.
   Larger viewports are opted into with min-width media queries only,
   using the common three-tier scale:
     sm: 640px  — large phones / small tablets
     md: 768px  — tablets
     lg: 1024px — small laptops and up (the site's "desktop" layout)
   ========================================================================== */

/* ---------- Fonts (self-hosted) ----------
   Previously an @import to fonts.googleapis.com, which made every page
   view a serial 3-hop dependency on a third party (HTML -> this file ->
   Google CSS -> gstatic woff2). The subsetted woff2 files now live in
   ../fonts/ (see that dir's OFL.txt for licensing). Relative url()s
   resolve correctly both from the front-end enqueue and from
   add_editor_style() (WP rewrites them against this file's location).

   Only the weights the design actually uses are shipped: Open Sans is a
   variable font (one file spans 400-700); Poppins is static at 600/700/
   800. Each subset keeps the exact unicode-range Google served, so the
   browser still only downloads latin-ext when the page needs it. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Color */
  --color-primary: #1D4E89;
  --color-primary-dark: #143A68;
  --color-primary-light: #3B7DD8;
  --color-accent: #D9622B;
  --color-accent-dark: #B84F1F;
  --color-bg: #F7FAFD;
  --color-surface: #FFFFFF;
  --color-muted: #EAF1FA;
  --color-border: #D3E3F3;
  --color-text: #16233A;
  --color-text-muted: #52657E;
  --color-on-primary: #FFFFFF;
  --color-success: #1E8E5A;
  --color-star: #F2A93B;

  /* Type */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Layout */
  --container-w: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(22, 35, 58, 0.06), 0 1px 3px rgba(22, 35, 58, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 35, 58, 0.10);
  --shadow-lg: 0 20px 48px rgba(22, 35, 58, 0.16);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
svg { display: block; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { color: var(--color-text-muted); }
p.c-lede { font-size: 1.15rem; color: var(--color-text); }
/* A lede that follows a heading inside a section head / service-area
   intro needs a little space above it. Was an inline style on several
   block render callbacks. */
.c-lede--spaced { margin-top: var(--space-3); }

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

.o-container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* Narrower content wells for single-column pages (404, contact intro,
   generic page.php) — previously set with inline max-width. */
.o-container--narrow { max-width: 640px; }
.o-container--prose { max-width: 760px; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.c-skip-link {
  position: absolute; left: var(--space-3); top: -60px;
  background: var(--color-primary-dark); color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  z-index: 200; transition: top 150ms ease;
}
.c-skip-link:focus { top: var(--space-3); }

/* ---------- Buttons ---------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  border: 2px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.c-btn:active { transform: translateY(1px); }
.c-btn--accent { background: var(--color-accent); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.c-btn--accent:hover { background: var(--color-accent-dark); }
.c-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.c-btn--primary:hover { background: var(--color-primary-dark); }
.c-btn--outline { background: transparent; border-color: var(--color-border); color: var(--color-primary-dark); }
.c-btn--outline:hover { border-color: var(--color-primary); background: var(--color-muted); }
.c-btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--color-on-primary); }
.c-btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--color-on-primary); }
.c-btn--block { width: 100%; }
.c-btn--lg { min-height: 56px; padding: 0 var(--space-5); font-size: 1.05rem; }

/* ---------- Header ---------- */
.c-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* The tint/blur lives on a ::before layer rather than directly on
   .c-header: backdrop-filter on an actual ancestor of the fixed
   mobile nav would make that ancestor the nav's containing block,
   collapsing it to the header's own height instead of the viewport. */
.c-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(247, 250, 253, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
}
.c-header.is-scrolled { border-color: var(--color-border); box-shadow: var(--shadow-sm); }

.c-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: var(--space-4);
}

.c-brand { display: flex; align-items: center; gap: var(--space-2); }
.c-brand__mark {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-on-primary); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem;
  flex-shrink: 0;
}
/* Real logo image (Custom Logo or Site Icon) replacing the "JJ" lettermark:
   drop the gradient box and let the artwork keep its own aspect ratio, so a
   wide logo and a square site icon both sit correctly on the 42px header row. */
.c-brand__mark-img {
  background: none;
  border-radius: 0;
  width: auto;
  height: 42px;
  max-width: 120px;
  object-fit: contain;
}
.c-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.c-brand__name { font-family: var(--font-heading); font-weight: 800; font-size: 1.12rem; color: var(--color-primary-dark); }
.c-brand__tag { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }

/* Mobile base: nav-list only appears inside the open slide-out menu.
   Restored to an inline row at lg (see bottom of this section). */
.c-nav__list { align-items: center; gap: var(--space-5); display: none; }
.c-nav__list a {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.96rem;
  color: var(--color-text); position: relative; padding: var(--space-2) 0;
}
.c-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--color-accent); transition: right 200ms ease;
}
.c-nav__list a:hover::after,
.c-nav__list a[aria-current="page"]::after,
.c-nav__list .current-menu-ancestor > a::after { right: 0; }
.c-nav__list a[aria-current="page"],
.c-nav__list .current-menu-ancestor > a { color: var(--color-primary-dark); }

.c-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.c-header__phone { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-dark); }
.c-header__phone svg { color: var(--color-accent); }
.c-header--desktop-only { display: none; }

/* The full CTA label only reappears once there's room for it (see the
   1280px tier below) — between 1024–1279px the header uses the short CTA
   label so nav items never get squeezed into wrapping. */
.c-header__cta-full { display: none; }

.c-nav__toggle {
  display: flex; background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); width: 44px; height: 44px;
  align-items: center; justify-content: center;
}

.c-nav {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--color-surface);
  padding: var(--space-5) var(--space-4); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.c-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.c-nav.is-open .c-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.c-nav .c-nav__list a { display: block; padding: var(--space-3); border-radius: var(--radius-sm); font-size: 1.1rem; }
.c-nav .c-nav__list a:hover { background: var(--color-muted); }

.c-nav__mobile-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }

@media (min-width: 1024px) {
  .c-nav__toggle { display: none; }
  .c-header--desktop-only { display: inline-flex; }
  .c-nav__mobile-actions { display: none; }

  .c-nav {
    position: static; inset: auto; background: none; padding: 0; overflow: visible;
    transform: none; opacity: 1; pointer-events: auto; transition: none;
  }
  .c-nav__list { display: flex; }
  .c-nav .c-nav__list a { display: inline; padding: var(--space-2) 0; font-size: 0.96rem; }
  .c-nav .c-nav__list a:hover { background: none; }

  /* Condensed tier (1024–1279px): the CTA uses its short label, freeing up
     room so the nav row doesn't get squeezed into wrapping. */
  .c-header__inner { gap: var(--space-3); }
  .c-nav__list { gap: var(--space-4); }
  .c-header__actions { gap: var(--space-2); }
  .c-btn.c-header--desktop-only { padding-inline: var(--space-3); }
}

@media (min-width: 1280px) {
  /* Full tier: room for the complete CTA copy. */
  .c-header__inner { gap: var(--space-4); }
  .c-nav__list { gap: var(--space-5); }
  .c-header__actions { gap: var(--space-3); }
  .c-header__cta-short { display: none; }
  .c-header__cta-full { display: inline; }
  .c-btn.c-header--desktop-only { padding-inline: var(--space-4); }
}

/* ---------- Hero ---------- */
.c-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, var(--color-primary-light) 130%);
  color: var(--color-on-primary);
  padding-block: var(--space-7);
}
.c-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 64px);
  opacity: 0.5; pointer-events: none;
}
.c-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; position: relative; }
.c-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.03em; margin-bottom: var(--space-3);
}
.c-hero h1 { color: var(--color-on-primary); margin-bottom: var(--space-3); }
.c-hero__lede { color: rgba(255,255,255,0.86); font-size: 1.15rem; max-width: 46ch; margin-bottom: var(--space-5); }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.c-hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.c-hero__trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.92rem; color: rgba(255,255,255,0.88); }
.c-hero__trust-item svg { color: var(--color-star); flex-shrink: 0; }

.c-hero__art {
  position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  max-width: 420px; margin-inline: auto;
}
.c-hero__art svg { width: 62%; height: 62%; color: rgba(255,255,255,0.92); }
.c-hero__art-badge {
  position: absolute; bottom: var(--space-4); left: var(--space-4);
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: var(--space-3);
}
.c-hero__art-badge strong { display: block; font-family: var(--font-heading); color: var(--color-primary-dark); font-size: 1rem; }
.c-hero__art-badge span { font-size: 0.82rem; color: var(--color-text-muted); }
.c-hero__art-badge svg { width: 28px; height: 28px; color: var(--color-primary); flex-shrink: 0; }

@media (min-width: 1024px) {
  .c-hero { padding-block: var(--space-8); }
  .c-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .c-hero__art { max-width: none; margin-inline: 0; }
}

/* ---------- Sections ---------- */
.o-section { padding-block: var(--space-8); }
.o-section--tight { padding-block: var(--space-7); }
.o-section--muted { background: var(--color-muted); }
.o-section--dark { background: var(--color-primary-dark); color: var(--color-on-primary); }
.o-section--dark h2, .o-section--dark h3 { color: var(--color-on-primary); }
.o-section--dark p { color: rgba(255,255,255,0.78); }

.c-section-head { max-width: 640px; margin-bottom: var(--space-6); }
.c-section-head.c-section-head--center { margin-inline: auto; text-align: center; }
/* Same shape as .c-section-head.c-section-head--center, minus its margin-bottom — for
   content that's alone in its own section (nothing follows it inside
   the section, so that bottom margin is just redundant extra space on
   top of the section's own padding). Used by the "Where We Work"
   service-area section (front-page.php / index.html). */
.c-service-area { max-width: 640px; margin-inline: auto; text-align: center; }
.c-eyebrow {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-2);
}
.o-section--dark .c-eyebrow { color: #F5B98E; }

/* ---------- Grids & Cards ---------- */
.o-grid { display: grid; gap: var(--space-5); }
.o-grid--2, .o-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .o-grid--2, .o-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .o-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.c-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.c-icon-tile {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--color-muted); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.c-icon-tile svg { width: 26px; height: 26px; }
/* Icon tile used inline beside a heading/paragraph (Why Choose Us value
   rows, contact info items) rather than at the top of a card. */
.c-icon-tile--flush { margin-bottom: 0; }

.c-card--service h3 { margin-bottom: var(--space-2); }
.c-card--service p { margin-bottom: var(--space-3); }
.c-card--service:hover .c-card__link svg { transform: translateX(3px); }

/* Stats */
.c-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (min-width: 640px) {
  .c-stats { grid-template-columns: repeat(4, 1fr); }
}
.c-stats__item { text-align: center; }
.c-stats__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.6rem); color: var(--color-primary-dark); }
.o-section--dark .c-stats__num { color: var(--color-on-primary); }
.c-stats__label { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600; }
.o-section--dark .c-stats__label { color: rgba(255,255,255,0.75); }

/* Steps / process */
.c-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }
@media (min-width: 640px) { .c-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-steps { grid-template-columns: repeat(4, 1fr); } }
.c-steps__item { position: relative; padding-top: var(--space-6); }
.c-steps__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: 1.6rem; color: var(--color-border);
  -webkit-text-stroke: 1px var(--color-primary-light);
}

/* Testimonials */
.c-testimonial { position: relative; display: flex; flex-direction: column; }
/* The random-3 "Testimonials" block (.o-grid.o-grid--3, not the carousel)
   always renders 3 cards, but .o-grid--3 is only 2 columns from 640px —
   3-in-2-columns wraps a lone 3rd card onto its own row. Hide it below
   the 1024px tier where .o-grid--3 becomes 3 columns, so there's always a
   full row (2 cards / 2 columns below 1024px, 3 cards / 3 columns from
   1024px) instead of an orphaned wrap. Scoped to a direct .o-grid--3 child
   so it doesn't touch the carousel's cards (nested inside
   .c-carousel__item, never a direct .o-grid--3 child) or the What
   We Do grid (.c-card--service, not .c-testimonial — and 6 services
   divide evenly into 2 or 3 columns anyway). */
.o-grid--3 > .c-testimonial:nth-child(3) { display: none; }
@media (min-width: 1024px) {
  .o-grid--3 > .c-testimonial:nth-child(3) { display: flex; }
}
.c-stars { display: flex; gap: 3px; margin-bottom: var(--space-3); }
.c-stars__star { position: relative; width: 16px; height: 16px; color: var(--color-border); }
.c-stars__fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; color: var(--color-star); }
/* jj_stars() (plugin inc/icons.php) only ever fills a star slot half or
   whole, so the width is a class, never an inline style. */
.c-stars__fill--half { width: 50%; }
.c-stars__fill--full { width: 100%; }
.c-stars__fill svg { position: absolute; top: 0; left: 0; }
.c-testimonial blockquote { color: var(--color-text); font-size: 1.02rem; margin-bottom: var(--space-4); }
.c-testimonial__author { display: flex; align-items: center; gap: var(--space-3); }
/* .c-testimonial__author is always pinned to the card's base, whether or not
   a "View this project" link is present between it and the quote:
   - No link: .c-testimonial__author directly follows the blockquote, so this
     adjacent-sibling rule gives *it* the margin-top:auto.
   - Link present: the link (below) carries margin-top:auto instead and
     sits right above .c-testimonial__author, which then just follows it in
     normal flow — only one auto margin is ever active per card, so the
     two never end up pushed apart from each other. */
.c-testimonial blockquote + .c-testimonial__author { margin-top: auto; }
/* "View this project" link (see jj_render_testimonial_card()) — pinned to
   sit right above .c-testimonial__author via margin-top:auto, so it lines up
   the same across cards regardless of how long the quote above it is. */
.c-testimonial__project-link { margin-top: auto; margin-bottom: var(--space-4); }
/* A single linked testimonial on a project's own page
   (single-jj_project.php) — full-width would look stretched, so cap and
   center it like a normal reading measure. */
.c-testimonial--solo { max-width: 640px; margin-inline: auto; }
.c-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-muted); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700;
}
/* Avatar background by first letter — one of 26 light spectrum-order
   tints (violet through red), applied via .c-avatar--a .. .c-avatar--z
   alongside .c-avatar so it overrides the default background above. Each
   is tuned to ~6-7.4:1 contrast against the avatar's blue letter
   (--color-primary #1D4E89), so it stays legible while still reading as
   a distinct color per letter. .c-avatar with no letter-specific class
   (e.g. an untitled entry) falls back to the default background. */
.c-avatar--a { background: #E8D6F5; } /* Ultra Violet */
.c-avatar--b { background: #E4D6F5; } /* Deep Violet */
.c-avatar--c { background: #E1D6F5; } /* Violet */
.c-avatar--d { background: #DDD6F5; } /* Blue-Violet */
.c-avatar--e { background: #D9D6F5; } /* Indigo */
.c-avatar--f { background: #D6D8F5; } /* Navy Blue */
.c-avatar--g { background: #D6E0F5; } /* Blue */
.c-avatar--h { background: #D6E8F5; } /* Dodger Blue */
.c-avatar--i { background: #D6EDF5; } /* Cyan-Blue */
.c-avatar--j { background: #D6F3F5; } /* Cyan */
.c-avatar--k { background: #D6F5F3; } /* Turquoise */
.c-avatar--l { background: #D6F5E8; } /* Emerald Green */
.c-avatar--m { background: #CCF5D3; } /* Green */
.c-avatar--n { background: #D3F5CC; } /* Lime Green */
.c-avatar--o { background: #E0F5CC; } /* Yellow-Green */
.c-avatar--p { background: #EBF5CC; } /* Chartreuse */
.c-avatar--q { background: #F5F2CC; } /* Yellow */
.c-avatar--r { background: #F5EDD6; } /* Gold */
.c-avatar--s { background: #F5EBD6; } /* Amber */
.c-avatar--t { background: #F5E6D6; } /* Orange */
.c-avatar--u { background: #F5E1D6; } /* Dark Orange */
.c-avatar--v { background: #F5DDD6; } /* Red-Orange */
.c-avatar--w { background: #F5D9D6; } /* Scarlet */
.c-avatar--x { background: #F5D6D6; } /* Red */
.c-avatar--y { background: #F5D6DB; } /* Crimson */
.c-avatar--z { background: #F5D6E0; } /* Deep Red */
.c-testimonial__author strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; color: var(--color-primary-dark); }
.c-testimonial__author span { font-size: 0.82rem; color: var(--color-text-muted); }

/* Testimonials carousel — CSS-first: .c-carousel__viewport is a
   native horizontally-scrolling, scroll-snapping strip, so it's fully
   usable (touch, trackpad, scrollwheel, or focus + arrow keys) with zero
   JavaScript. The Previous/Next buttons and dots are a progressive
   enhancement (see assets/js/testimonials-carousel.js) that ship
   [disabled] until that script enables them. */
.c-carousel__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  gap: var(--space-5); border-radius: var(--radius-md);
  /* overflow-x: auto forces overflow-y to auto too (per the CSS overflow
     spec), which would otherwise clip .c-card:hover's -4px lift + shadow-md
     on hover — pad the scroll area on all sides to give that room. The
     vertical padding needs a matching negative margin so it doesn't shift
     surrounding layout/spacing; the horizontal padding doesn't, since it
     only affects the scrollable area's own edges, not its footprint in
     the page. scroll-padding-inline keeps scroll-snap alignment measured
     from the padded edge, not the raw box edge. */
  padding-block: var(--space-5);
  padding-inline: var(--space-4);
  margin-block: calc(var(--space-5) * -1);
  scroll-padding-inline: var(--space-4);
  /* The viewport stays natively scrollable (touch/trackpad/scrollwheel/
     keyboard) — only the browser's own scrollbar chrome is hidden, since
     the Prev/Next buttons + dots (testimonials-carousel.js) already give
     a visible scroll affordance and the raw OS scrollbar under the cards
     is just redundant clutter. */
  scrollbar-width: none;
}
.c-carousel__viewport::-webkit-scrollbar { display: none; }
/* Each item's width matches .o-grid--3's own breakpoints exactly (1 per row
   below 640px, 2 from 640px, 3 from 1024px), so however many fit without
   wrapping in the equivalent grid is exactly how many the carousel shows
   per view too — see this file's "Testimonials carousel" comment above. */
/* .c-carousel__viewport's default align-items: stretch already
   makes each item match the tallest sibling's height — but that only
   stretches this wrapper, not the .c-testimonial inside it (a plain
   block sizes to its own content regardless of its parent's height).
   display: flex here + flex: 1 on the card below makes the card itself
   fill that stretched height, so cards in the same view are equal
   height instead of each keeping its own natural (quote-length-driven)
   height — the same effect .o-grid's own stretch already gives the
   regular (non-carousel) testimonials grid for free, since there the
   card has no such wrapper in between. */
/* scroll-snap-stop is deliberately NOT "always" here — that forces the
   browser to stop at every single card and never skip past one, which
   breaks Prev/Next's scrollBy(viewport.clientWidth): on desktop (3
   cards/view) that call means "jump 3 cards," but "always" would force
   it to stop at the very next card instead, so a second click often did
   nothing (already sitting on a card scroll-snap-stop refused to pass).
   Default ("normal") lets a requested scroll land on whichever snap
   point is closest to the target instead of the first one encountered. */
.c-carousel__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; }
.c-carousel__item .c-testimonial { flex: 1; min-width: 0; }
@media (min-width: 640px) {
  .c-carousel__item { flex-basis: calc((100% - var(--space-5)) / 2); }
}
@media (min-width: 1024px) {
  .c-carousel__item { flex-basis: calc((100% - var(--space-5) * 2) / 3); }
}
.c-carousel__nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-5);
}
.c-carousel__btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.c-carousel__btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.c-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.c-carousel__icon-prev { transform: rotate(180deg); }

/* Badges (licensed / insured) */
.c-badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Why Choose Us block: badges sit next to a taller value list, so their
   row shouldn't stretch its wrapped lines to fill the column height. */
.c-badge-row--top { align-content: flex-start; }
.c-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 999px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem;
  color: var(--color-primary-dark);
}
.c-badge svg { color: var(--color-success); }

/* CTA band */
.c-cta-band {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-on-primary); border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; gap: var(--space-5);
}
.c-cta-band h2 { color: var(--color-on-primary); margin-bottom: var(--space-2); }
.c-cta-band p { color: rgba(255,255,255,0.82); margin: 0; }
.c-cta-band__actions { display: flex; flex-direction: column; width: 100%; gap: var(--space-3); }
@media (min-width: 768px) {
  .c-cta-band { flex-direction: row; text-align: left; }
  .c-cta-band__actions { flex-direction: row; width: auto; flex-shrink: 0; }
}

/* "Flat" style variation (is-style-flat) of the "Like what you see?"
   block — used on the About page's closing CTA band, which sits on a
   .o-section--dark background and needs the pill/gradient card look
   suppressed so it reads as part of the section rather than a nested
   card. Selector is scoped to this block's own generated wrapper class
   so it can never collide with an unrelated block that someday
   registers its own "flat" style. */
.wp-block-jj-home-solutions-like-what-you-see.is-style-flat .c-cta-band {
  background: none;
  padding: 0;
}

/* ---------- Page header (interior pages) ---------- */
.c-page-header {
  background: linear-gradient(155deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-on-primary); padding-block: var(--space-6);
}
.c-page-header h1 { color: var(--color-on-primary); margin-bottom: var(--space-2); }
.c-page-header__breadcrumb { display: flex; gap: var(--space-2); font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-bottom: var(--space-3); }
.c-page-header__breadcrumb a:hover { color: var(--color-on-primary); }
.c-page-header p { color: rgba(255,255,255,0.85); max-width: 60ch; }

/* ---------- Placeholder photo tiles ---------- */
.c-photo-tile {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--color-border);
  background:
    repeating-linear-gradient(45deg, var(--color-muted) 0 12px, #fff 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center; padding: var(--space-3);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.c-photo-tile svg { width: 34px; height: 34px; color: var(--color-primary-light); }
.c-photo-tile span { font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; color: var(--color-primary-dark); }
.c-photo-tile small { font-size: 0.76rem; color: var(--color-text-muted); }
.c-photo-tile.has-image { padding: 0; background: var(--color-muted); }
/* Shared with the Our Story / Hero block illustrations — a plain
   object-fit cover fill. (display:block comes from the img reset.) */
.c-photo-tile__img, .c-our-story__image, .c-hero__image { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Filter bar (gallery) ---------- */
.c-filter__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.c-filter__btn {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: 999px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--color-text);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.c-filter__btn:hover { border-color: var(--color-primary-light); }
.c-filter__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.c-gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .c-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.c-gallery__item { position: relative; display: block; transition: opacity 200ms ease, transform 200ms ease; }
.c-gallery__item[hidden] { display: none; }
.c-gallery__item:hover .c-photo-tile,
.c-gallery__item:focus-visible .c-photo-tile { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.c-gallery__item:hover .c-card__link svg,
.c-gallery__item:focus-visible .c-card__link svg { transform: translateX(3px); }

.c-gallery__rating {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
  background: rgba(255,255,255,0.92); border-radius: 999px;
  padding: 6px 10px; box-shadow: var(--shadow-sm);
  transition: transform 200ms ease;
}
.c-gallery__rating .c-stars { margin-bottom: 0; }
.c-gallery__item:hover .c-gallery__rating,
.c-gallery__item:focus-visible .c-gallery__rating { transform: translateY(-4px); }
.c-gallery__caption { padding-top: var(--space-2); }
.c-gallery__caption strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; color: var(--color-primary-dark); }
.c-gallery__caption span { font-size: 0.82rem; color: var(--color-text-muted); }
.c-gallery__caption .c-card__link { margin-left: var(--space-2); font-size: 0.86rem; color: var(--color-primary); }
.c-card__link { color: var(--color-primary); font-weight: 700; font-family: var(--font-heading); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; }
.c-card__link svg { transition: transform 200ms ease; }

/* ---------- Forms ---------- */
.c-form__panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.c-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .c-form__row { grid-template-columns: 1fr 1fr; } }
.c-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.c-form__field label { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--color-text); }
.c-form__field .c-form__hint { font-size: 0.78rem; color: var(--color-text-muted); }
.c-form__field input, .c-form__field select, .c-form__field textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3); background: var(--color-bg); color: var(--color-text);
  min-height: 48px; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.c-form__field textarea { min-height: 128px; resize: vertical; }
.c-form__field input:focus, .c-form__field select:focus, .c-form__field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.c-form__error { font-size: 0.8rem; color: #B3261E; min-height: 1em; }
.c-form__success {
  display: none; align-items: center; gap: var(--space-3);
  background: #EAF7EF; border: 1px solid #BFE6CC; color: #1E6B3E;
  border-radius: var(--radius-sm); padding: var(--space-4); font-weight: 600;
}
.c-form__success.is-visible { display: flex; }
.c-form__success svg { flex-shrink: 0; }

/* Submitting state: belt-and-braces on top of the JS click guard in
   assets/js/main.js — while a submit is in flight the button ignores
   pointer events entirely and reads visually disabled, even in the
   brief gap before submitBtn.disabled is actually set. */
.is-submitting button[type="submit"] { pointer-events: none; }
.c-form__panel button[type="submit"][aria-busy="true"] { opacity: 0.7; cursor: not-allowed; }

/* Thank-you page */
.c-thank-you {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-5); max-width: 640px; margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
}
.c-thank-you .c-icon-tile {
  width: 64px; height: 64px; margin-bottom: 0; border-radius: 50%;
}
.c-thank-you .c-icon-tile svg { width: 28px; height: 28px; }
.c-thank-you h2 { font-size: 1.9rem; letter-spacing: -0.01em; }
.c-thank-you__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Contact Form block (blocks/contact-form/) */
.c-contact__grid { align-items: start; gap: var(--space-7); }
.c-contact__heading { margin-bottom: var(--space-2); }
.c-contact__intro { margin-bottom: var(--space-5); }
.c-contact__service-area { margin-top: var(--space-4); font-size: 0.9rem; }
.c-contact__service-area strong { color: var(--color-primary-dark); font-family: var(--font-heading); }

/* Contact info list */
.c-contact__info-list { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.c-contact__info-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.c-contact__info-item .c-icon-tile { margin-bottom: 0; flex-shrink: 0; }
.c-contact__info-item strong { display: block; font-family: var(--font-heading); color: var(--color-primary-dark); }
.c-contact__info-item p { margin: 0; }

.c-contact__map {
  aspect-ratio: 16/9; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background:
    linear-gradient(var(--color-muted) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--color-muted) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--color-bg);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2);
  color: var(--color-text-muted); text-align: center; padding: var(--space-4);
}
.c-contact__map svg { width: 34px; height: 34px; color: var(--color-primary); }
.c-contact__map strong { font-family: var(--font-heading); color: var(--color-primary-dark); }

/* Contact Form block, "form hidden" variant — the details column on its
   own, centered in a readable measure so it fills the section without
   the form beside it. The info list stays vertically stacked. */
.c-contact__details--full { max-width: 640px; margin-inline: auto; }
.c-contact__details--full .c-contact__map { aspect-ratio: auto; min-height: 240px; }
.c-contact__details--full .c-contact__service-area { text-align: center; }

/* ---------- Footer ---------- */
.c-footer { background: #0F2242; color: rgba(255,255,255,0.82); padding-block: var(--space-7) var(--space-4); }
.c-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (min-width: 640px) { .c-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .c-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.c-footer__brand p { color: rgba(255,255,255,0.68); margin-block: var(--space-3); max-width: 34ch; }
.c-footer__brand .c-brand__name { color: #fff; }
.c-footer__brand .c-brand__tag { color: rgba(255,255,255,0.6); }
.c-footer__heading { font-family: var(--font-heading); color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: var(--space-3); }
.c-footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.c-footer__links a { color: rgba(255,255,255,0.7); font-size: 0.92rem; transition: color 150ms ease; }
.c-footer__links a:hover { color: #fff; }
.c-footer__contact li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.92rem; color: rgba(255,255,255,0.75); margin-bottom: var(--space-2); }
.c-footer__contact svg { flex-shrink: 0; color: #F5B98E; margin-top: 2px; }
.c-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.c-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; transition: background-color 150ms ease, border-color 150ms ease;
}
.c-footer__social a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.c-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); font-size: 0.82rem; color: rgba(255,255,255,0.6); flex-wrap: wrap; }
.c-footer__bottom-links { display: flex; gap: var(--space-4); }

/* ---------- Misc pages: about ---------- */
.o-split { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .o-split { grid-template-columns: 1fr 1fr; } }
.o-split--top { align-items: start; }
.wp-block-jj-home-solutions-our-story p { margin-top: var(--space-3); }
/* The Our Story block (blocks/our-story/) reuses .c-hero__art's shape/layout
   for its illustration but on a light section background, so this
   overrides .c-hero__art's dark-hero-tuned colors instead of duplicating
   the shape rules. Scoped to the block's own wrapper class rather than
   an extra class on the element, so the markup stays as close as
   possible to what a plain .c-hero__art usage looks like everywhere else. */
.wp-block-jj-home-solutions-our-story .c-hero__art { background: var(--color-muted); border-color: var(--color-border); color: var(--color-primary); box-shadow: var(--shadow-md); }
.c-hero__art.has-image { overflow: hidden; }
.c-our-story__image-controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
ul.c-value-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.c-value-list__item { display: flex; align-items: center; gap: var(--space-3); }
.c-value-list__item strong { display: block; color: var(--color-primary-dark); font-family: var(--font-heading); margin-bottom: 4px; }
/* li.c-value-list__item (not the icon-tile-wrapped div.c-value-list__item above, used by
   Why Choose Us) is the plain checkmark-bullet feature list from the
   Services Listing block. */
li.c-value-list__item svg { color: var(--color-success); flex-shrink: 0; }

/* Services Listing block (blocks/services-listing/) — tweaks scoped to
   this block's own elements, not the shared .o-section--tight/.o-split
   classes those elements also carry (both are used as-is, unmodified,
   everywhere else on the site). */
.c-services-quick-nav { padding-bottom: 0; }
.c-service-row { align-items: start; }
.c-card__cta { margin-top: var(--space-5); }

.c-timeline { border-left: 2px solid var(--color-border); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; margin-inline: auto; }
.c-timeline__item { position: relative; }
.c-timeline__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-5) - 6px); top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--color-bg);
}
.c-timeline__year { font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); font-size: 0.85rem; }

/* ---------- Misc pages: legal (privacy / terms) ---------- */
.c-legal { max-width: 72ch; margin-inline: auto; }
.c-legal__updated { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.c-legal h2 { margin-top: var(--space-6); }
.c-legal h2:first-of-type { margin-top: 0; }
.c-legal p { margin-top: var(--space-3); }
.c-legal ul, .c-legal ol { margin-top: var(--space-3); padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2); }
.c-legal li { padding-left: var(--space-1); }
.c-legal a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.c-legal a:hover { color: var(--color-primary-dark); }

/* ---------- Block-editor content areas ---------- */
.entry-content > * + * { margin-top: var(--space-3); }
.entry-content h2, .entry-content h3 { margin-top: var(--space-5); }
.entry-content ul, .entry-content ol { padding-left: 1.25em; color: var(--color-text-muted); }
.entry-content a { color: var(--color-primary); text-decoration: underline; }
.entry-content img { border-radius: var(--radius-md); }

/* ---------- Generic blog fallback (index/archive/single/search/404) ----------
   Not used by the site's real pages — only renders if a blog index or search
   is ever set up. Kept simple and reusing the existing form/card/button
   language rather than introducing a parallel unstyled design. */
.search-form { display: flex; gap: var(--space-2); }
.search-form label { flex: 1; }
.search-field {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3); background: var(--color-bg); color: var(--color-text);
  min-height: 48px; font: inherit;
}
.search-field:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 600; border: 2px solid transparent;
  background: var(--color-accent); color: var(--color-on-primary);
}
.search-submit:hover { background: var(--color-accent-dark); }

.entry-header { margin-bottom: var(--space-4); }
.entry-title a { color: var(--color-primary-dark); }
.entry-title a:hover { color: var(--color-primary); }
.entry-footer, .posted-on, .byline { font-size: 0.85rem; color: var(--color-text-muted); }
article + article { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }

.nav-subtitle { display: block; font-size: 0.78rem; color: var(--color-text-muted); }
.nav-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-dark); }
.post-navigation, .posts-navigation, .paging-navigation { margin-top: var(--space-6); }

.comments-area { margin-top: var(--space-7); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: var(--space-5); }

.widget-area { margin-top: var(--space-7); }
.widget { margin-bottom: var(--space-5); }
.widget-title { font-family: var(--font-heading); font-size: 1rem; margin-bottom: var(--space-2); }