/* =====================================================================
   about.css — page-specific styles for /about.html
   ---------------------------------------------------------------------
   Loaded AFTER base/components/sections so it can override.
   Phases:
     2  hero — interactive spirit level (no photo)
     3  story
     4  values strip
     5  practical info  (removed 2026-04-30)
     7  reviews — empty-state CTA
     8  final CTA
     9  mascot poses (hero, story panel, values cards)
   ===================================================================== */


/* =====================================================================
   PHASE 2 — HERO (interactive spirit level)
   ---------------------------------------------------------------------
   Dark band, no photo. Stack:
     1. Eyebrow → rust rule → display heading → tagline (centered)
     2. The level (HTML/CSS, JS-driven tilt + bubble)
     3. Cursor hint (auto-hides on touch / after first interaction)

   Level metaphor: cursor moves right, level tilts down on the right,
   bubble runs UPHILL to the left — the way a real bubble level reads.
   Touch / reduced-motion gets a calm sine drift instead.
   ===================================================================== */

.about-hero {
  position: relative;
  /* Same dark→warm-brown gradient as the services hero — keeps the
     two inner-page heroes in the same family.                      */
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #3D2418 50%,
    #5A3520 100%
  );
  color: var(--cream-soft);
  /* Parallax stacking: hero sits at z:0 and is translated by JS at half
     scroll speed; every sibling section after it (story / values /
     reviews / cta) gets z:2 below, so they paint OVER the hero as
     they scroll up — the page covers the hero instead of scrolling
     alongside it.                                                    */
  z-index: 0;
  will-change: transform;
  /* Top padding accounts for the fixed header. */
  padding: 130px var(--gutter) 90px;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .about-hero {
    padding: 170px var(--gutter) 120px;
    min-height: 86vh;
    min-height: 86svh;
  }
}

/* Each hero-sibling section gets an explicit cream-soft background so
   it actually covers the hero (transparent .section--soft would let
   the dark hero leak through). Sections with their own explicit bg
   (.section--cream, etc.) override this via more-specific rules.    */
.about-hero ~ * {
  position: relative;
  z-index: 2;
  background-color: var(--cream-soft);
}

/* Honor reduced-motion: skip parallax. JS bails out for matching
   users; this rule resets any transform that may have been applied
   before the listener attached.                                    */
@media (prefers-reduced-motion: reduce) {
  .about-hero { transform: none !important; }
}

/* Thin cream divider strip between the hero and the story section —
   matches the services page divider so both inner-page heroes hand
   off into the cream content with the same visual seam.            */
.about-divider {
  height: 18px;
  background: var(--cream);
}

/* Same warm rust glow as the services hero — keeps the inner-page hero
   family visually consistent. */
.about-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    72%
  );
  pointer-events: none;
  z-index: 0;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
@media (min-width: 768px) {
  .about-hero__inner { gap: 72px; }
}

/* ---- INTRO COPY STACK ---- */
.about-hero__intro {
  text-align: center;
  max-width: 760px;
}

.about-hero__eyebrow,
.about-hero__rule,
.about-hero__title,
.about-hero__tagline,
.about-hero__cue {
  opacity: 0;
}
.about-hero__eyebrow {
  display: inline-block;
  color: var(--cream);
  transform: translateY(8px);
}
.about-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rusty);
  margin: 16px auto 28px;
  transform: scaleX(0);
  transform-origin: center;
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the homepage hero title — same clamp, cream face with the
     5-step ink extrusion + soft cast so all hero titles read as one
     family across the site. */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  transform: translateY(16px);
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}
/* Accent words inside the hero title render in plain Oswald. */
.about-hero__title .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
}
.about-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(12px);
}

/* Smaller "keep reading" cue under the main tagline. Visually separated:
   muted color, smaller scale, slight letter-spacing, and a downward
   chevron after the text so it reads as a scroll hint, not a second
   sentence of the tagline. */
.about-hero__cue {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.55);
  max-width: 520px;
  margin: 14px auto 0;
  opacity: 0;
  transform: translateY(12px);
}
.about-hero__cue::after {
  content: " \2193"; /* ↓ */
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
  color: rgba(251, 248, 241, 0.45);
}

/* Entrance — fired by inline script on next frame. */
.about-hero.is-entering .about-hero__eyebrow {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 100ms both;
}
.about-hero.is-entering .about-hero__rule {
  animation: aboutHeroSweep 700ms cubic-bezier(0.85, 0, 0.15, 1) 250ms both;
}
.about-hero.is-entering .about-hero__title {
  animation: aboutHeroFadeUp 700ms cubic-bezier(0, 0.55, 0.45, 1) 350ms both;
}
.about-hero.is-entering .about-hero__tagline {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 700ms both;
}
.about-hero.is-entering .about-hero__cue {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
}

@keyframes aboutHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aboutHeroSweep {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero.is-entering .about-hero__eyebrow,
  .about-hero.is-entering .about-hero__rule,
  .about-hero.is-entering .about-hero__title,
  .about-hero.is-entering .about-hero__tagline,
  .about-hero.is-entering .about-hero__cue {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* =====================================================================
   PHASE 3 — STORY
   ---------------------------------------------------------------------
   Two-column band: a typographic "panel" (no photo — we don't have one
   of Mike, and we won't fabricate) sits beside the body copy.
   ===================================================================== */
.about-story {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .about-story {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-story__grid {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .about-story__grid { gap: 88px; }
}

/* ---- Brand panel: corkboard with a pinned business card ----
   Composition is layered with no images:
     - .about-story__board    = wooden frame around a cork surface
       The cork surface is painted on the ::before pseudo via a stack of
       small radial-gradients (specks) + tonal blotches + base cork tint
       + an inset vignette.
     - .about-story__pin      = rust pushpin, made entirely of radial
       gradients with a small cast shadow. Counter-rotated to the card so
       it stays vertically pinned even as the card tilts.
     - .about-story__card     = the paper business card. Slightly rotated,
       two-stage drop shadow (close + ambient), faint paper grain.
       Inner content is built like a real builder's card: corner ink stamp,
       a level-icon "monogram", name, italic title, dotted divider, three
       fact rows, condensed wordmark footer.                              */
.about-story__panel {
  position: relative;
  isolation: isolate;
}

.about-story__board {
  position: relative;
  padding: 22px;
  border-radius: 6px;
  /* Wooden frame: subtle vertical striations + warm wood gradient.
     Inset highlight on top edge + inset shadow on bottom edge gives a
     thin bevel so the cork sinks into the frame.                        */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 7px),
    linear-gradient(180deg,
      #5C3A22 0%,
      #4A2D1A 50%,
      #5C3A22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 30px 60px -25px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) {
  .about-story__board { padding: 28px; }
}

/* Cork surface — 12 specks + 2 tonal blotches + base tan + vignette.
   Specks are tiled (300px tile) so the texture extends the full board
   no matter the column width.                                          */
.about-story__board::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 12% 18%,  #5A3D24 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 38% 9%,   #5A3D24 0 1px,   transparent 1.3px),
    radial-gradient(circle at 67% 22%,  #644028 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 89% 12%,  #543822 0 1px,   transparent 1.3px),
    radial-gradient(circle at 8% 47%,   #604027 0 1.3px, transparent 1.6px),
    radial-gradient(circle at 28% 55%,  #533720 0 1px,   transparent 1.3px),
    radial-gradient(circle at 56% 41%,  #5A3D24 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 81% 58%,  #604027 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 18% 78%,  #533720 0 1px,   transparent 1.3px),
    radial-gradient(circle at 44% 88%,  #5A3D24 0 1.3px, transparent 1.6px),
    radial-gradient(circle at 73% 79%,  #604027 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 92% 92%,  #543822 0 1px,   transparent 1.3px),
    radial-gradient(ellipse at 20% 30%, rgba(200, 158, 110, 0.28), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(120, 84, 50, 0.30), transparent 50%),
    linear-gradient(135deg, #C99A6A 0%, #BC8C58 100%);
  background-size:
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    auto, auto, auto;
  background-repeat:
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(0, 0, 0, 0.28);
  z-index: 0;
}

/* Business card on the cork. Margins around it expose cork edges, so
   the card reads as one item pinned to a larger surface, not a card
   that fills the whole frame.                                          */
.about-story__card {
  position: relative;
  z-index: 1;
  margin: 32px 24px;
  padding: 38px 28px 24px;
  text-align: center;
  color: var(--ink);
  background:
    /* Faint horizontal paper grain — barely-there warm stripes. */
    repeating-linear-gradient(180deg,
      rgba(170, 130, 80, 0.025) 0 2px,
      transparent 2px 5px),
    var(--cream-soft);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 2px;
  /* Two-stage shadow: tight contact + larger ambient. Slight bottom-
     right bias matches the card's CCW rotation (light from upper left). */
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.10),
    0 6px 14px -4px rgba(0, 0, 0, 0.22),
    0 22px 36px -12px rgba(0, 0, 0, 0.18);
  transform: rotate(-2.6deg);
  transform-origin: 50% 30%;
}
@media (min-width: 768px) {
  .about-story__card {
    margin: 50px 36px;
    padding: 46px 36px 28px;
  }
}

/* Corner stamp — looks like a circular ink stamp impression. Faded ink
   (rust @ 0.6 alpha) and a slight rotation sell the "applied with a
   physical stamp" feel.                                                 */
.about-story__card-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 2px solid rgba(158, 60, 14, 0.55);
  border-radius: 50%;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: rgba(158, 60, 14, 0.62);
  letter-spacing: 0.15em;
  line-height: 1;
  transform: rotate(8deg);
  /* Subtle worn / partially-inked feel via slight inset highlight. */
  box-shadow: inset 0 0 6px rgba(255, 248, 241, 0.4);
}
.about-story__card-stamp-top  { font-size: 9px;  font-weight: 500; margin-bottom: 3px; }
.about-story__card-stamp-year { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }

/* Tiny level icon as a brand mark on the card. */
.about-story__card-mark {
  display: block;
  width: 96px;
  height: 18px;
  margin: 4px auto 22px;
}

.about-story__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}

.about-story__card-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 15px);
  color: rgba(42, 27, 16, 0.65);
  margin: 0 0 22px;
}

.about-story__card-rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg,
    transparent,
    rgba(42, 27, 16, 0.4) 20%,
    rgba(42, 27, 16, 0.4) 80%,
    transparent);
}

/* Three fact rows — label/value, dotted underline, never boxed. */
.about-story__card-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-width: 260px;
  margin: 0 auto 20px;
  text-align: left;
}
.about-story__card-facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(42, 27, 16, 0.22);
}
.about-story__card-facts > div:last-child { border-bottom: 0; }
.about-story__card-facts dt {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 27, 16, 0.55);
}
.about-story__card-facts dd {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-align: right;
  letter-spacing: 0.02em;
}

/* Footer wordmark on the card — small condensed all-caps. */
.about-story__card-foot {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(42, 27, 16, 0.45);
  margin-top: 8px;
}

/* Pushpin — sits over the top-center of the card. Counter-rotated to the
   card so it stays plumb. Body is a layered radial gradient: small bright
   highlight + warm rust falloff + dark edge. Drop shadow extends onto the
   card. The ::after creates a faint indent halo around the pierce point. */
.about-story__pin {
  /* Positioned over the card top-edge so ~70% of the pin sits on the
     paper and ~30% sticks above into cork. Stays vertical (no rotation)
     because pins go in plumb regardless of paper angle.                 */
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 232, 210, 0.95) 0%,
      rgba(255, 232, 210, 0) 22%),
    radial-gradient(circle at 50% 50%,
      #D45A1F 0%,
      #B14213 60%,
      #6E2606 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    /* Tight cast shadow on the card immediately to the lower-right. */
    1px 2px 2px rgba(0, 0, 0, 0.45),
    /* Soft halo. */
    0 4px 6px -2px rgba(0, 0, 0, 0.25);
}
/* Tiny indent halo: only ~3px around the pin, like a ring of pressed
   fibers around the pinpoint. Subtle, not a saucer. */
.about-story__pin::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.06) 50%,
    transparent 75%);
  z-index: -1;
}
@media (min-width: 768px) {
  .about-story__pin { top: 52px; width: 24px; height: 24px; }
}

/* ---- Copy column ----
   Story title is intentionally LARGE so the section reads with the
   weight of the corkboard panel beside it. The lead paragraph is a
   touch heavier and larger than following body copy — gives the eye
   a deliberate first stop before the regular-weight follow-ups.    */
.about-story__title,
.about-story__copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 28px;
  text-wrap: balance;
}
.about-story__lead {
  /* Lead paragraph: bigger and slightly heavier than the rest of
     the body copy — gives the eye a deliberate first stop before
     the regular-weight follow-up paragraphs. */
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 22px;
}
.about-story__copy p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 56ch;
}
.about-story__copy p:last-child { margin-bottom: 0; }


/* =====================================================================
   PHASE 4 — VALUES STRIP
   ---------------------------------------------------------------------
   Three cards on the cream raised panel. Each card: rust-tinted icon
   square, title, paragraph. Cards stack on mobile, three-up at >= 768px.
   ===================================================================== */
.about-values {
  /* Inherits .section--cream styling — raised cream panel. */
}

.about-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .about-values__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
@media (min-width: 1100px) {
  .about-values__grid { gap: 36px; }
}

.about-values__card {
  position: relative;
  background: var(--cream-soft);
  border-radius: var(--radius-lg, 14px);
  padding: 32px 28px;
  border: 1px solid rgba(168, 85, 46, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 12px 28px -22px rgba(42, 27, 16, 0.35);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms ease;
}
@media (min-width: 768px) {
  .about-values__card { padding: 36px 32px; }
}

@media (hover: hover) and (pointer: fine) {
  .about-values__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 22px 40px -22px rgba(42, 27, 16, 0.45);
    border-color: rgba(168, 85, 46, 0.28);
  }
}

.about-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(150deg,
    rgba(168, 85, 46, 0.15) 0%,
    rgba(158, 60, 14, 0.10) 100%);
  border: 1px solid rgba(158, 60, 14, 0.25);
  color: var(--rusty-dark, #6E2A0A);
  margin-bottom: 20px;
}
.about-values__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.about-values__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 12px;
}

.about-values__card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}


/* =====================================================================
   PHASE 5 — PRACTICAL INFO
   ---------------------------------------------------------------------
   Removed 2026-04-30: section was redundant with info already covered
   in services.html, the homepage about teaser, and the footer.
   ===================================================================== */


/* =====================================================================
   PHASE 7 — REVIEWS
   ---------------------------------------------------------------------
   Single empty-state CTA on the dark band. Once 2+ real reviews come
   in this section can host a real testimonial layout.
   ===================================================================== */
.about-reviews {
  background: var(--ink);
  color: var(--cream-soft);
  padding-top: 80px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .about-reviews {
    padding-top: 110px;
    padding-bottom: 130px;
  }
}

.about-reviews__empty {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.about-reviews__empty-line {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.85);
  margin: 0 0 24px;
}
.about-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-reviews__cta-icon {
  width: 16px;
  height: 16px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-reviews__cta:hover .about-reviews__cta-icon {
  transform: translateX(3px);
}
.about-reviews__empty-fineprint {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(251, 248, 241, 0.5);
  margin: 22px 0 0;
}

/* When data-review-count is 2+, the empty state hides itself. Future
   carousel markup will live next to it. */
.about-reviews__empty[data-review-count="0"],
.about-reviews__empty[data-review-count="1"] {
  display: block;
}


/* =====================================================================
   PHASE 8 — FINAL CTA
   ---------------------------------------------------------------------
   Mirrors services-cta — quiet, centered, two buttons.
   ===================================================================== */
.about-cta {
  padding-top: 88px;
  padding-bottom: 120px;
}
@media (min-width: 768px) {
  .about-cta {
    padding-top: 120px;
    padding-bottom: 160px;
  }
}

.about-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.about-cta__inner .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.about-cta__inner h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.about-cta__inner p {
  font-size: 17px;
  color: var(--ink-soft, #5A4030);
  margin: 0 auto 28px;
  max-width: 460px;
}

.about-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}


/* =====================================================================
   PHASE 9 — MASCOT POSES (values cards only)
   ---------------------------------------------------------------------
   Three poses, one per values card. All aria-hidden; copy carries the
   meaning. Each pose has a different aspect ratio so the row sizes by
   HEIGHT (not width) to keep rhythm.
   ===================================================================== */

.about-values__mascot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 120px;
  margin-bottom: 16px;
  /* Reserve a fixed block so title baselines align across the 3 cards. */
}
.about-values__mascot img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 10px 18px rgba(42, 27, 16, 0.22));
}
@media (min-width: 768px) {
  .about-values__mascot { height: 140px; margin-bottom: 18px; }
}
@media (min-width: 1100px) {
  .about-values__mascot { height: 160px; margin-bottom: 20px; }
}


/* ==========================================================================
   FOOTER — recolor only.
   The inner-page footer uses the homepage's full layout (defined in
   sections.css). Override just the background so it sits on the dark
   --ink band the rest of the inner pages already use, instead of the
   homepage's rust climax.
   ========================================================================== */
.site-footer {
  background: var(--ink);
}