/* =========================================================================
   Pinestraw Place — Homepage.

   Two sources, both approved, both used:
     · pp-css/page-home.css        — carried over VERBATIM (marquee keyframes,
                                     hero clip-path + scrim, final-CTA clip,
                                     review card classes, phone overrides).
                                     Only `.elementor-*` selectors are renamed
                                     to this theme's own elements; no value is
                                     changed.
     · final_html/Homepage.dc.html — every inline `style` attribute, and the
                                     `style-hover` attributes that could never
                                     have worked as HTML, transcribed here.

   Where the two disagree, pp-css wins: it is the later artifact and it records
   the reasons (see the hero scrim comment — the stops were re-cut after a
   contrast check against the brightest slides).
   ========================================================================= */

/* ---- Marquees -----------------------------------------------------------
   pp-css verbatim. Keyframes, width:max-content and animation-play-state
   have no Elementor controls, which is why they lived in the sheet. */
@keyframes pp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; gap: 36px; padding-right: 36px; }

.marquee-track--trust { gap: 0; animation: pp-marquee 40s linear infinite; }
.marquee-track--trust:hover { animation-play-state: paused; }
/* Pause on focus too — a keyboard user tabbing into the reel needs it to
   stop, not just a mouse user hovering it (PP_TEXT_home.md, review marquee). */
.marquee-track--trust:focus-within,
.marquee-track--reviews:focus-within { animation-play-state: paused; }

.review-reel-wrap { overflow: hidden; }
.marquee-track--reviews { gap: 20px; padding: 0 10px; animation: pp-marquee 70s linear infinite; }
.marquee-track--reviews:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---- Trust band --------------------------------------------------------- */
.trust-band {
  background: #2D5441; padding: 18px 0; overflow: hidden; position: relative;
}
.trust-spacer { background: #141915; height: 60px; }
.trust-item {
  display: flex; align-items: center; gap: 36px; white-space: nowrap;
}
.trust-item__text {
  font-size: 13.5px; font-weight: 600; color: #FFFBE6;
  border: none; padding: 0; border-radius: 99px;
}
.trust-item__stars { color: #F7B51C; letter-spacing: 2px; }
.trust-item__sep { color: rgba(200, 230, 216, 0.4); }

/* ---- Hero: clip-path + slideshow layers + gradient overlay --------------
   pp-css verbatim. Two background-slideshow containers (desktop 16:9 set /
   mobile 3:4 set) sit absolutely under the content; the scrim is the ::before
   at z-index 1, between the slides (z 0) and the copy (z 2). */
.hero-home {
  position: relative; min-height: 680px; display: flex; align-items: center;
  background-color: #141915;   /* legible before any image arrives (§3.8) */
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.hero-home > .hero-bg-d,
.hero-home > .hero-bg-m { position: absolute; inset: 0; z-index: 0; min-height: 0; padding: 0; }
.hero-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* Stops adjusted from John's spec after the contrast check: the brightest
     slides (pale sky) washed out the nav, eyebrow and upper H1 line. The
     bottom-up layer now reaches 75% (was 58%) so the whole H1 sits on scrim,
     and the top scrim reaches 30% (was 20%) so the transparent-header nav and
     eyebrow stay readable. Bottom darkness and overall intent unchanged. */
  background:
    linear-gradient(0deg,   rgba(22,22,22,0.92) 0%,
                            rgba(22,22,22,0.55) 35%,
                            rgba(22,22,22,0)    75%),
    linear-gradient(180deg, rgba(22,22,22,0.60) 0%,
                            rgba(22,22,22,0.30) 16%,
                            rgba(22,22,22,0)    30%);
}
/* Matches the design of record: the hero copy does not capture pointer
   events, the CTA row does. */
.hero-content { position: relative; z-index: 2; pointer-events: none; }
.hero-ctas { pointer-events: auto; }
/* Local contrast for light-on-photo text: on the brightest slides (pale sky)
   no reasonable scrim stop covers an 11px sage micro-label or the
   transparent-header nav without blacking out the photography, so those get
   soft dark halos instead. Homepage only. */
.hero-eyebrow { text-shadow: 0 1px 2px rgba(22,22,22,0.9), 0 0 6px rgba(22,22,22,0.85), 0 2px 16px rgba(22,22,22,0.7); }
.hero-h1, .hero-standfirst { text-shadow: 0 2px 6px rgba(22,22,22,0.45), 0 2px 18px rgba(22,22,22,0.4); }
body.home .pp-header .nav-links a { text-shadow: 0 1px 3px rgba(22,22,22,0.75), 0 1px 10px rgba(22,22,22,0.6); }

/* Slides + Ken Burns — behavior-spec §3.3.
   opacity and transform only: both are compositor properties. Never
   background-position, width or top. */
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  will-change: opacity;
}
.hero-slide[data-pp-active],
.hero-slide[data-index="0"] { opacity: 1; }   /* slide 1 visible with no JS */
.hero-slide img,
.hero-slide picture { width: 100%; height: 100%; display: block; }
.hero-slide img { object-fit: cover; }

.pp-js .hero-slide[data-index="0"]:not([data-pp-active]) { opacity: 0; }

.hero-slide[data-pp-kenburns] img {
  transform: scale(1);
  transition: transform 7200ms linear;
}
.hero-slide[data-pp-kenburns][data-pp-active] img { transform: scale(1.08) translate(-1.5%, -1%); }
.hero-slide[data-pp-kenburns][data-index="1"][data-pp-active] img,
.hero-slide[data-pp-kenburns][data-index="3"][data-pp-active] img,
.hero-slide[data-pp-kenburns][data-index="5"][data-pp-active] img,
.hero-slide[data-pp-kenburns][data-index="7"][data-pp-active] img,
.hero-slide[data-pp-kenburns][data-index="9"][data-pp-active] img {
  transform: scale(1.08) translate(0, -1%);
}
.hero-slide[data-pp-kenburns][data-index="1"] img,
.hero-slide[data-pp-kenburns][data-index="3"] img,
.hero-slide[data-pp-kenburns][data-index="5"] img,
.hero-slide[data-pp-kenburns][data-index="7"] img,
.hero-slide[data-pp-kenburns][data-index="9"] img { transform: scale(1) translate(-1.5%, 0); }

/* ONE track, not two.
   pp-css names two sibling containers (.hero-bg-d / .hero-bg-m) because
   Elementor's background-slideshow widget cannot emit a <picture>, so the only
   way to serve a different crop per breakpoint was to build two slideshows and
   toggle them with hide_mobile / hide_desktop. In a PHP theme that constraint
   is gone: behavior-spec §3.2 specifies <picture> per slide, and the browser
   downloads exactly one file. Two containers would mean two slideshows to keep
   in sync and, on phones, a second set of ten images already committed to.
   The .hero-bg-d class is kept so pp-css's positioning rule above still binds;
   .hero-bg-m is intentionally not rendered. */

/* Pause control — NOT VISIBLE. John's call, 2026-08-16: no pause button on the
   hero banner.

   It is not deleted, because WCAG 2.2.2 (Level A) requires a mechanism to
   pause, stop or hide anything that animates automatically for more than five
   seconds, and this hero runs a 60-second loop. So the control still exists and
   is still keyboard-reachable — it is clipped out of view until it receives
   focus, exactly like the skip link. A visitor never sees it; a keyboard or
   screen-reader user tabs to it and it appears.

   Belt and braces: prefers-reduced-motion already stops the hero dead (§3.7),
   so anyone who has expressed a motion preference gets a static photo and no
   control at all. */
.hero-pause {
  position: absolute; z-index: 4; right: 20px; bottom: 96px;
  align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 9px 16px;
  background: rgba(20, 25, 21, 0.72); color: #FFFBE6;
  border: 1px solid rgba(200, 230, 216, 0.4); border-radius: 6px;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(4px);

  /* Clipped, not display:none — display:none would take it out of the tab
     order and defeat the point. */
  width: 1px; height: 1px; min-width: 0; min-height: 0;
  padding: 0; margin: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border-width: 0;
}
.pp-js .hero-pause { display: inline-flex; }
.hero-pause:focus-visible,
.hero-pause:focus {
  width: auto; height: auto; min-width: 44px; min-height: 44px;
  padding: 9px 16px; overflow: visible;
  clip: auto; clip-path: none; border-width: 1px;
}
.hero-pause:hover { background: #F7B51C; color: #2D5441; border-color: #F7B51C; }

/* Reduced motion — behavior-spec §3.7. Hard stop: no Ken Burns, no
   auto-advance, slide 1 held indefinitely, pause button hidden.
   NOTE: pp-css's original comment proposed keeping the cross-fade and killing
   only the zoom. That was written about what Elementor's CSS could reach — it
   could not stop the slideshow advancing. behavior-spec §3 owns behavior and
   calls for the hard stop, which is also what WCAG 2.2.2 wants. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide img { transition: none; transform: none !important; }
  .pp-js .hero-pause { display: none; }
}

/* ---- Hero copy ---------------------------------------------------------- */
.hero-content {
  width: 100%; text-align: center; padding: 200px 48px 120px;
}
.hero-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: #C8E6D8;
}
.hero-eyebrow::before,
.hero-eyebrow::after { content: ""; width: 56px; height: 1px; background: #F7B51C; flex: none; }
/* MOBILE-COPY rule 4 — the only homepage string that changes on a phone.
   Both are in the markup; CSS picks. The hidden one is display:none so a
   screen reader never announces the label twice. */
.pp-eyebrow-short { display: none; }
.hero-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 76px; font-weight: 700; line-height: 1.02; color: #FFFBE6;
  margin: 22px auto 0; letter-spacing: -0.015em; max-width: 900px;
}
.hero-standfirst {
  font-size: 17px; line-height: 1.7; color: rgba(255, 251, 230, 0.88);
  max-width: 640px; margin: 22px auto 0; text-wrap: pretty;
}
.hero-ctas {
  display: flex; gap: 16px; justify-content: center; margin-top: 34px; flex-wrap: wrap;
}
.hero-ctas .pp-btn-gold {
  font-size: 15px; font-weight: 700; padding: 15px 36px;
}
.hero-ctas .pp-btn-ghost {
  font-size: 15px; font-weight: 600; padding: 13px 32px;
}

/* ---- Text Editor <p> margins -------------------------------------------
   pp-css verbatim: wpautop wraps content in <p>; widget Margin controls
   define the spacing.

   These selectors are (0,1,1) and therefore beat a bare class like
   .hero-standfirst (0,1,0), which silently killed the `margin: … auto` that
   centres the hero standfirst. The named-paragraph rules below restate the
   spacing at matching specificity rather than reaching for !important. */
.hero-content p, .sub-hero p, .two-lane p, .who p, .reviews-head p,
.cat-section p, .why-section p, .final-cta p { margin: 0; }

.hero-content p.hero-standfirst  { margin: 22px auto 0; }
.sub-hero p.sub-hero__body       { margin: 22px auto 0; }
.two-lane p.lane-body            { margin: 14px 0 24px; }
.who p.who__body                 { margin: 20px 0 0; }
.why-section p.why-item__body    { margin: 10px 0 0; }
.final-cta p.final-cta__body     { margin: 14px auto 0; }

/* ---- Sub-hero ----------------------------------------------------------- */
.sub-hero { background: #F7F5F0; padding: 88px 48px 76px; text-align: center; }
.sub-hero__inner { max-width: 820px; margin: 0 auto; }
.sub-hero h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px; font-weight: 700; line-height: 1.14; color: #2C2218; margin: 0;
}
.sub-hero__body {
  font-size: 15.5px; line-height: 1.75; color: #4A3F35;
  max-width: 700px; text-wrap: pretty;
}

/* ---- Two-lane band ------------------------------------------------------ */
.two-lane { background: #F7F5F0; padding: 0 48px 88px; }
.two-lane__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.lane-sage, .lane-pine {
  border-radius: 10px; padding: 44px 42px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.lane-sage { background: #EAF3EC; border: 1px solid #C8E6D8; }
.lane-pine { background: #2D5441; }
/* pp-css: margin-top:auto — the Margin control is numeric and cannot express it. */
.lane-sage > .pp-btn-gold,
.lane-pine > .pp-btn-gold { margin-top: auto; }
.lane-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: #3A6B52;
}
.lane-eyebrow::before { content: ""; width: 30px; height: 2px; background: #F7B51C; flex: none; }
.lane-pine .lane-eyebrow { color: #C8E6D8; }
.lane-sage h3, .lane-pine h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; margin: 14px 0 0;
}
.lane-sage h3 { color: #2C2218; }
.lane-pine h3 { color: #FFFBE6; }
.lane-body { font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }
.lane-sage .lane-body { color: #4A3F35; }
.lane-pine .lane-body { color: rgba(255, 251, 230, 0.8); }

/* ---- Who we are --------------------------------------------------------- */
.who { background: #F7F5F0; padding: 0 48px 88px; }
.who__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 56px; align-items: center;
}
.who-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: #3A6B52;
}
.who-eyebrow::before { content: ""; width: 36px; height: 1px; background: #F7B51C; flex: none; }
.who h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 40px; font-weight: 700; line-height: 1.12; color: #2C2218; margin: 16px 0 0;
}
.who__body { font-size: 15px; line-height: 1.75; color: #4A3F35; text-wrap: pretty; }
.who .pp-btn-gold { margin-top: 26px; }
.who__photos {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; height: 440px;
}
.who__photo { min-width: 0; min-height: 0; border-radius: 8px; overflow: hidden; }
.who__photo:first-child { grid-row: 1 / -1; }
.who__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Social proof ------------------------------------------------------- */
.reviews { background: #F7F5F0; padding: 80px 0 88px; }
.reviews-head { text-align: center; padding: 0 48px; }
.reviews-rating {
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: #3A6B52;
}
.reviews-rating .trust-item__stars { letter-spacing: 2px; }
.reviews-head h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 40px; font-weight: 700; color: #2C2218; margin: 14px 0 0;
}
.review-reel-wrap { margin-top: 44px; }
.reviews__cta { text-align: center; margin-top: 38px; }
.reviews__cta a {
  display: inline-block; border: 2px solid #2D5441; color: #2D5441;
  font-size: 14px; font-weight: 600; padding: 12px 30px; border-radius: 6px;
}
.reviews__cta a:hover { border-color: #F7B51C; color: #3A6B52; }

/* ---- Review cards -------------------------------------------------------
   pp-css verbatim: styled by class (not inline) so the phone-width overrides
   below can apply without !important. */
.marquee-set { display: flex; gap: 20px; }
.review-card {
  /* 284px: stars + SIX full 22.4px quote lines + meta + padding. The old
     256px was ~28px short, so flex squeezed the clamped quote and clipped
     the sixth line mid-letter (John, launch day). */
  flex: none; width: 344px; height: 284px;
  background: #2D5441; border: 1px solid #234135; border-radius: 12px;
  padding: 26px 26px 24px; display: flex; flex-direction: column;
}
.review-stars { color: #F7B51C; font-size: 14px; letter-spacing: 2px; }
.review-quote {
  flex: none;
  font-size: 14px; line-height: 1.6; color: #FFFBE6; margin: 14px 0 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}
.review-meta { margin-top: auto; padding-top: 16px; }
.review-name { font-size: 14px; font-weight: 700; color: #FFFBE6; }
.review-src {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C8E6D8; margin-top: 3px;
}

/* ---- Shop by category --------------------------------------------------- */
.cat-section { background: #F7F5F0; padding: 84px 48px 88px; }
.cat-section__inner { max-width: 1180px; margin: 0 auto; }
.cat-section__head { text-align: center; }
.cat-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: #3A6B52;
}
.cat-eyebrow::before,
.cat-eyebrow::after { content: ""; width: 34px; height: 2px; background: #3A6B52; flex: none; }
.cat-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px; font-weight: 700; color: #2C2218; margin: 12px 0 0;
}
.cat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 44px;
}
.cat-card {
  background: #2D5441; border: 1px solid #234135; border-radius: 8px;
  overflow: hidden; display: block;
  /* pp-css: the transition shorthand has no control. */
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(44, 34, 24, 0.12); }
.cat-card__thumb { height: 130px; overflow: hidden; }
.cat-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px;
}
.cat-card__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16.5px; font-weight: 600; color: #FFFBE6;
}
.cat-card__arrow { color: #F7B51C; font-weight: 700; }
.cat-card--all {
  background: #2D5441; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; text-align: center;
}
.cat-card--all span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px; font-weight: 600; color: #FFFBE6; line-height: 1.3;
}
.cat-card--all .pp-btn-gold { font-size: 13px; padding: 11px 22px; }

/* ---- Why we're different ------------------------------------------------ */
.why-section { background: #F7F5F0; padding: 88px 48px; }
.why-section__inner { max-width: 1180px; margin: 0 auto; }
.why-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 40px; font-weight: 700; color: #2C2218; margin: 0; text-align: center;
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: 52px;
}
.why-item { padding: 0 28px; border-left: 1px dashed #D8CFAF; }
.why-item__num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; color: #F7B51C;
}
.why-item__title { font-size: 15.5px; font-weight: 700; color: #2C2218; margin-top: 12px; }
.why-item__body { font-size: 13.5px; line-height: 1.7; color: #4A3F35; text-wrap: pretty; }

/* ---- Final CTA: clip-path + gradient overlay ----------------------------
   Overlay is the HERO's scrim verbatim (John, 2026-08-17: "exact same
   overlay as the header hero banner") — it replaced the original heavier
   3-stop gradient. */
.final-cta-section { padding: 88px 0 0; }
.final-cta {
  position: relative; min-height: 480px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-color: #141915;
  clip-path: polygon(0 0, 50% 6%, 100% 0, 100% 100%, 0 100%);
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* Hero scrim + a flat 25% darkening layer (John, 2026-08-17). */
  background:
    linear-gradient(rgba(22,22,22,0.25), rgba(22,22,22,0.25)),
    linear-gradient(0deg,   rgba(22,22,22,0.92) 0%,
                            rgba(22,22,22,0.55) 35%,
                            rgba(22,22,22,0)    75%),
    linear-gradient(180deg, rgba(22,22,22,0.60) 0%,
                            rgba(22,22,22,0.30) 16%,
                            rgba(22,22,22,0)    30%);
}
.final-cta__bg { position: absolute; inset: 0; z-index: 0; }
.final-cta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-cta__inner {
  position: relative; z-index: 2; text-align: center; padding: 96px 40px; max-width: 720px;
}
.final-cta-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: #C8E6D8;
}
.final-cta-eyebrow::before,
.final-cta-eyebrow::after { content: ""; width: 44px; height: 1px; background: #F7B51C; flex: none; }
.final-cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px; font-weight: 700; color: #FFFBE6; margin: 16px 0 0;
}
.final-cta__body {
  font-size: 15px; color: rgba(255, 251, 230, 0.85);
  max-width: 480px; line-height: 1.65;
}
.final-cta__ctas { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.final-cta__ctas .pp-btn-gold { font-size: 14px; padding: 14px 34px; }
.final-cta-reviewlink {
  display: inline-block; font-size: 13px; font-weight: 600; color: #C8E6D8;
  margin-top: 22px; border-bottom: 1px solid rgba(247, 181, 28, 0.6); padding-bottom: 2px;
}
/* pp-css: inline-styled anchor hover. */
.final-cta-reviewlink:hover,
.final-cta-reviewlink a:hover { color: #F7B51C; }

/* =========================================================================
   TABLET — 768–1024px
   ========================================================================= */
@media (max-width: 1024px) {
  .hero-home { min-height: 560px; }
  .hero-content { padding: 150px 32px 100px; }
  .hero-h1 { font-size: 54px; }
  /* At 96px the pause control landed level with the secondary CTA and the two
     collided. Dropping it below the CTA row keeps both reachable. */
  .hero-pause { bottom: 40px; right: 16px; }

  .sub-hero { padding: 64px 32px 56px; }
  .sub-hero h2 { font-size: 34px; }

  .two-lane { padding: 0 32px 64px; }
  .lane-sage, .lane-pine { padding: 34px 30px; }
  .lane-sage h3, .lane-pine h3 { font-size: 26px; }

  .who { padding: 0 32px 64px; }
  .who__grid { grid-template-columns: 1fr; gap: 34px; }
  .who__photos { height: 340px; }
  .who h2 { font-size: 32px; }

  .cat-section { padding: 64px 32px; }
  .cat-section h2 { font-size: 34px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .why-section { padding: 64px 32px; }
  .why-section h2 { font-size: 32px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }

  .final-cta-section { padding: 64px 0 0; }
  .final-cta h2 { font-size: 40px; }
  .final-cta__inner { padding: 72px 32px; }

  .reviews { padding: 64px 0 72px; }
  .reviews-head { padding: 0 32px; }
  .reviews-head h2 { font-size: 32px; }
}

/* =========================================================================
   PHONE — <=767px
   pp-css's phone block is carried over verbatim; the rest transcribes the
   mobile spec (H1 32 / H2 26 / H3 20 from the style guide) and frame-2.
   ========================================================================= */
@media (max-width: 767px) {
  /* pp-css verbatim: hero clip flattens on phones */
  .hero-home { clip-path: polygon(0 0, 100% 0, 100% 96%, 50% 100%, 0 96%); }

  .review-reel-wrap { overflow: visible; }
  .marquee-track--reviews {
    animation: none;
    width: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
  }
  .marquee-set { display: contents; }
  .marquee-track--reviews .review-card {
    scroll-snap-align: start;
    width: 300px;
    height: auto;
    min-height: 230px;
  }
  /* The duplicate track is decorative on desktop and pure noise here — it is
     aria-hidden in the markup and hidden outright once the reel is a
     swipeable row, so the same five reviews are not listed twice. */
  .marquee-track--reviews .marquee-set[aria-hidden="true"] { display: none; }

  /* ---- Hero ---- */
  .hero-home { min-height: 620px; }
  .hero-content { padding: 120px 16px 90px; }
  .hero-eyebrow { font-size: 10.5px; gap: 10px; letter-spacing: 0.24em; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 26px; }
  .pp-eyebrow-full { display: none; }
  .pp-eyebrow-short { display: inline; }
  .hero-h1 { font-size: 32px; line-height: 1.1; }
  .hero-standfirst { font-size: 15px; margin-top: 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .hero-ctas .pp-btn-gold,
  .hero-ctas .pp-btn-ghost { width: 100%; text-align: center; min-height: 48px; padding: 14px 20px; font-size: 14px; }
  .hero-pause { right: 12px; bottom: 60px; }

  /* ---- Trust band ---- */
  .trust-spacer { height: 36px; }
  .trust-item { gap: 22px; }
  .marquee-group { gap: 22px; padding-right: 22px; }
  .trust-item__text { font-size: 12.5px; }

  /* ---- Sections ---- */
  .sub-hero { padding: 48px 16px 40px; }
  .sub-hero h2 { font-size: 26px; }
  .sub-hero__body { font-size: 15px; }

  .two-lane { padding: 0 16px 48px; }
  .two-lane__grid { grid-template-columns: 1fr; gap: 16px; }
  .lane-sage, .lane-pine { padding: 28px 22px; }
  .lane-sage h3, .lane-pine h3 { font-size: 20px; }
  .lane-sage .pp-btn-gold, .lane-pine .pp-btn-gold { min-height: 48px; display: inline-flex; align-items: center; }

  .who { padding: 0 16px 48px; }
  .who__grid { gap: 26px; }
  .who h2 { font-size: 26px; }
  .who__body { font-size: 15px; }
  .who__photos { height: 300px; gap: 8px; }

  .reviews { padding: 48px 0 56px; }
  .reviews-head { padding: 0 16px; }
  .reviews-head h2 { font-size: 26px; }
  .review-reel-wrap { margin-top: 28px; }
  .reviews__cta { margin-top: 26px; }

  .cat-section { padding: 48px 16px; }
  .cat-section h2 { font-size: 26px; }
  .cat-eyebrow { font-size: 10px; letter-spacing: 0.2em; }
  /* frame-2: category grid is 2-col on phone, all cards present. */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .cat-card__thumb { height: 104px; }
  .cat-card__name { font-size: 14.5px; }

  .why-section { padding: 48px 16px; }
  .why-section h2 { font-size: 26px; }
  .why-grid { grid-template-columns: 1fr; row-gap: 26px; margin-top: 32px; }
  .why-item { padding: 0 0 0 18px; }

  .final-cta-section { padding: 48px 0 0; }
  .final-cta { min-height: 420px; }
  .final-cta__inner { padding: 56px 16px; }
  .final-cta h2 { font-size: 28px; }
  .final-cta-eyebrow { font-size: 10px; gap: 10px; letter-spacing: 0.22em; }
  .final-cta-eyebrow::before, .final-cta-eyebrow::after { width: 22px; }
  .final-cta__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .final-cta__ctas .pp-btn-gold,
  .final-cta__ctas .pp-btn-ghost { width: 100%; text-align: center; min-height: 48px; }
}

/* ---- No JS -------------------------------------------------------------
   behavior-spec §3.8: slide 1 is the only slide painted, the hero is a static
   photo exactly as it is today, and Ken Burns never starts because the class
   that drives it is added by JS. */
.no-js .hero-slide:not([data-index="0"]) { display: none; }
.no-js .hero-pause { display: none; }

/* Review cards are links to the Google listing (John, punch item 8, built
   2026-08-16): keep the card look on an <a>, spans stack like the old
   figure children, gold ring on hover/focus. */
a.review-card { text-decoration: none; color: inherit; }
a.review-card:hover, a.review-card:focus-visible { border-color: #F7B51C; }
.review-card .review-stars, .review-card .review-quote,
.review-card .review-meta, .review-card .review-name, .review-card .review-src { display: block; }
.review-card .review-quote {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}