/* =========================================================================
   CF Design — site styles
   Three surfaces share this file: the hero (index.html, dark, never scrolls),
   the inquiry form (overlay + inquiries.html, dark), and the reviews wall
   (reviews.html, light, Google-styled). Brand tokens from the original site.
   ========================================================================= */
:root {
  --arch-black:    #121212;
  --arch-charcoal: #1A1A1A;
  --arch-mineral:  #4A5D4F;
  --arch-stone:    #E5E4E2;
  --arch-concrete: #F5F5F4;
  --arch-white:    #FFFFFF;
  --arch-bronze:   #8C7A6B;

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  --hero-image: url('assets/hero-fence.jpg');   /* default; overridden by [data-img] */
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--arch-black);
  color: var(--arch-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* =========================================================================
   HERO (index.html) — one screen, never scrolls. Swap photo with ?img=…
   ========================================================================= */
body.hero-page { overflow: hidden; }

[data-img="main"]    { --hero-image: url('assets/cal-fynn-fence-building.jpg'); }
[data-img="deck"]    { --hero-image: url('assets/hero-deck.jpg'); }
[data-img="deck2"]   { --hero-image: url('assets/hero-deck-2.jpg'); }
[data-img="team"]    { --hero-image: url('assets/hero-team.jpg'); }
[data-img="team2"]   { --hero-image: url('assets/hero-team-2.jpg'); }
[data-img="fence"]   { --hero-image: url('assets/hero-fence.jpg'); }
[data-img="bench"]   { --hero-image: url('assets/hero-bench.jpg'); }
[data-img="pergola"] { --hero-image: url('assets/hero-pergola.jpg'); }

.hero {
  position: relative;
  display: grid;
  height: 100vh;            /* fallback */
  height: 100dvh;           /* tracks mobile browser chrome */
  overflow: hidden;
  isolation: isolate;
}
.hero > * { grid-area: 1 / 1; }   /* stack photo, scrim, content in one cell */

.hero__media {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* The wide cal-&-fynn hero is anchored to its RIGHT edge: as the viewport
   narrows, the left side is cropped off first, so the rightmost part of the
   photo always stays in frame (until the phone breakpoint swaps the image). */
[data-img="main"] .hero__media { background-position: right center; }

.hero__scrim {
  z-index: 1;
  /* left-anchored darkening for the left-aligned copy + bottom vignette */
  background:
    linear-gradient(90deg, rgba(18,18,18,.92) 0%, rgba(18,18,18,.6) 45%, rgba(18,18,18,.12) 100%),
    linear-gradient(180deg, rgba(18,18,18,.3) 0%, rgba(18,18,18,.1) 45%, rgba(18,18,18,.82) 100%);
}

.hero__inner {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 820px;
  padding: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: clamp(6rem, 16vh, 11rem);   /* room for the bottom strip */
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
  /* Floor at ~48px on phones (achievable because the mobile media query
     decouples the parent's horizontal padding); scales up to ~61px on wide
     desktops via the 5vw middle term. */
  font-size: clamp(3rem, 5vw, 3.8rem);
  margin-bottom: clamp(.75rem, 2vh, 1.5rem);
  /* black halo to lift the type off the photo — layered radii give an even,
     wider-spreading glow than a single shadow can. */
  text-shadow:
    0 0 10px rgba(0,0,0,.7),
    0 0 26px rgba(0,0,0,.6),
    0 0 48px rgba(0,0,0,.5),
    0 1px 3px rgba(0,0,0,.65);
}
.hero h1 .italic {
  display: inline-block;
  margin-top: .1em;
  font-style: italic;
  font-weight: 300;
  line-height: 1.0;
  color: rgba(255,255,255,.92);
}

.subhead {
  /* Floor at mobile (~18px), scales modestly on desktop (~20px) */
  font-size: clamp(1.15rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-width: 40ch;
  /* added top margin → a little more separation from the title */
  margin: clamp(.5rem, 1.5vh, 1rem) 0 clamp(1.25rem, 4vh, 2.75rem);
  /* visible layered halo (was too faint over the dark photo); lighter than the
     headline so the hierarchy holds. */
  text-shadow:
    0 0 10px rgba(0,0,0,.75),
    0 0 22px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.7);
}

/* keep a phrase on one line → the natural wrap falls *before* it. Used in the
   subhead so it breaks after "solutions" without a hard <br>. */
.nowrap { white-space: nowrap; }

/* ---- buttons (also reused on the reviews page CTA) ---- */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  width: 100%;
  max-width: 340px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 2rem;
  border-radius: 3px;
  /* Tight: ~13px → ~14px so button heights are virtually identical (~45px)
     across mobile and desktop — matches the mobile feel everywhere. */
  font-size: clamp(.82rem, .9vw, .88rem);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }

.btn--primary {
  background: var(--arch-white);
  color: var(--arch-black);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.btn--primary:hover { background: var(--arch-stone); }
.btn--primary:hover .arrow { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--arch-white);
  border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); }

/* Soft black glow behind the HERO buttons, to lift them off the busy photo.
   Scoped to .cta-group so the form's submit button (also .btn--primary) is
   unaffected. The ghost "Read reviews" button gets ~half the strength. */
.cta-group .btn--primary { box-shadow: 0 8px 30px -6px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.4); }
.cta-group .btn--ghost   { box-shadow: 0 8px 15px -6px rgba(0,0,0,.28), 0 0 12px rgba(0,0,0,.2); }

.arrow { transition: transform .2s ease; }

.cta-note {
  font-size: clamp(.72rem, 1.5vw, .85rem);
  font-style: italic;
  color: rgba(255,255,255,.55);
  margin: -.2rem 0 .4rem .2rem;
}

/* ---- bottom strip: client login, pinned bottom-left under the copy ---- */
.hero__footer {
  position: absolute;
  left: 0; right: 0;
  bottom: max(env(safe-area-inset-bottom, 0px), 1.1rem);
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 5rem);   /* line up with .hero__inner */
}
.footer-login {
  font-size: clamp(.72rem, 1.5vw, .85rem);
  color: rgba(255,255,255,.5);
}
.footer-login a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.35);
  transition: color .2s ease;
}
.footer-login a:hover { color: #fff; }

/* short viewports (landscape phones) */
@media (max-height: 560px) {
  .hero h1 { font-size: clamp(1.9rem, 6vh, 3rem); margin-bottom: .5rem; }
  .subhead { margin-bottom: .9rem; }
  .btn     { padding: .7rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   INQUIRY FORM — full-screen overlay (index.html) + standalone (inquiries.html)
   ========================================================================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  background: var(--arch-black);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .22s ease;
}
.overlay[hidden] { display: none; }
.overlay.is-open { opacity: 1; }

/* inquiry overlay backdrop = the same site photo, but under a much heavier
   scrim than the hero — here it should read as a dark texture, not a photo,
   so the form stays the focus. */
#inquiry-overlay,
body.success-page {
  background-color: var(--arch-black);
  background-image:
    linear-gradient(rgba(18,18,18,.93), rgba(18,18,18,.965)),
    url('assets/cal-fynn-fence-building.jpg');
  background-size: cover;
  background-position: center;
}

/* Standalone confirmation page — same dark backdrop as the overlay, content
   centered, ✕ pinned top-right (it's a link home, reusing .overlay__close). */
body.success-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2.5rem, 9vh, 6rem) 1.25rem;
}
body.success-page .overlay__close { position: fixed; }

/* Narrow phones: the wide landscape hero crops badly to a tall, thin viewport,
   so swap in the portrait "lumber yard" photo. Applies to BOTH the index hero
   and the inquiry overlay backdrop. Placed after the base rules above so it wins
   the cascade. The portrait photo is centered (the right-anchor above is only
   for the wide cal-&-fynn image). */
@media (max-width: 600px) {
  [data-img="main"] { --hero-image: url('assets/lumber-yard.jpg'); }
  /* re-center (override the desktop right-anchor) + slight 2° clockwise tilt;
     the 1.1× scale only covers the corners the rotation would otherwise expose. */
  [data-img="main"] .hero__media {
    background-position: center;
    transform: rotate(2deg) scale(1.1);
  }
  #inquiry-overlay,
  body.success-page {
    background-image:
      linear-gradient(rgba(18,18,18,.93), rgba(18,18,18,.965)),
      url('assets/lumber-yard.jpg');
  }
  /* Phone scrim: left→right darkening + darker top/bottom gradients that reach
     toward the center. No flat overlay, so the middle stays bright. */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(18,18,18,.8) 0%, rgba(18,18,18,.5) 45%, rgba(18,18,18,.1) 100%),
      linear-gradient(to bottom, rgba(18,18,18,.8) 0%, rgba(18,18,18,0) 56%),
      linear-gradient(to top,    rgba(18,18,18,.82) 0%, rgba(18,18,18,0) 56%);
  }
  /* Mobile layout:
       1. Horizontal alignment switches to center (desktop is left-aligned).
       2. DECOUPLE horizontal padding so the title can grow nearly edge-to-edge.
          Without this the parent's padding caps the title's effective max size
          on phones, no matter how big the clamp ceiling is. The buttons keep
          their own padding so they don't go edge-to-edge; the cta-group's
          max-width is bumped to absorb that padding (border-box), so inner
          button width stays the same as before. */
  .hero__inner  { padding-left: 0; padding-right: 0;
                  align-items: center; text-align: center; }
  .hero h1      { padding: 0 .4rem; }
  .subhead      { padding: 0 1.25rem; }
  .cta-group    { padding: 0 1.5rem; max-width: 388px; }
  .hero__footer { text-align: center; }
}

.overlay__panel {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2.5rem, 9vh, 6rem) 1.25rem;
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.overlay.is-open .overlay__panel { transform: none; }

.overlay__close {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: var(--arch-stone);
  cursor: pointer;
  transition: background-color .2s ease;
}
.overlay__close:hover { background: rgba(255,255,255,.14); }

/* reviews overlay variant — full-bleed iframe of reviews.html (light page),
   so the close button needs a dark, high-contrast treatment + to sit on top. */
.overlay--reviews { display: block; }
.reviews-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.overlay--reviews.is-open .reviews-frame { transform: none; }
.overlay__close--onlight {
  z-index: 2;
  background: rgba(26,26,26,.92);
  border-color: rgba(0,0,0,.18);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.overlay__close--onlight:hover { background: #000; }

.form-wrap { width: 100%; max-width: 560px; margin: 0 auto; color: var(--arch-white); }

.form-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--arch-stone);
  margin-bottom: 1rem;
}
.form-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  margin-bottom: 3.5rem;   /* clear breathing room so it reads as a heading above the form */
}
.form-blurb {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(229,228,226,.65);
  margin-bottom: .5rem;
}
.form-blurb:last-of-type { margin-bottom: 2rem; }

.field { margin-bottom: 2.6rem; }
.field label,
.field .label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arch-stone);
  margin-bottom: .65rem;
}
.field .label .hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-style: italic;
  color: rgba(229,228,226,.4);
}

.field input[type="text"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding: .5rem 0;
  font-family: var(--font-sans);   /* Inter — matches the field labels, far more legible than the serif */
  font-size: 1.05rem;
  color: var(--arch-white);
  outline: none;
  transition: border-color .2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.3); }
/* A required select with no real option chosen is :invalid → gray the visible
   text so "Select" reads like a placeholder. Picking an option makes the
   select valid → reverts to white. */
.field select:invalid { color: rgba(255,255,255,.3); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--arch-white); }
.field textarea { resize: none; }

.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E5E4E2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
}
.field select option { background: var(--arch-charcoal); color: var(--arch-stone); }

.field-row { display: grid; gap: 1.75rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* address autocomplete (Google Places) — dark dropdown matching the form */
.autocomplete { position: relative; }
.autocomplete__list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 5;
  margin-top: .45rem;
  list-style: none;
  background: var(--arch-charcoal);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.7);
}
.autocomplete__list[hidden] { display: none; }
.autocomplete__item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .65rem .9rem;
  cursor: pointer;
  transition: background-color .12s ease;
}
.autocomplete__item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.06); }
.autocomplete__item:hover,
.autocomplete__item.is-active { background: rgba(255,255,255,.08); }
.autocomplete__item .ac-main { font-size: .98rem; color: var(--arch-white); }
.autocomplete__item .ac-sub  { font-size: .8rem; color: rgba(229,228,226,.55); }

.radio-row { display: flex; gap: 2rem; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio .dot {
  width: 1.15rem; height: 1.15rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid; place-items: center;
}
.radio .dot::after {
  content: "";
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--arch-white);
  transform: scale(0);
  transition: transform .15s ease;
}
.radio input:checked + .dot::after { transform: scale(1); }

/* Submit reuses the hero "Book Consultation" button verbatim (.btn.btn--primary
   in the markup) so its text + styling are identical. Only the form-specific
   footprint is set here — matching that button's max 400px width. */
.submit-btn {
  margin-top: 1rem;
  width: 100%;
  max-width: 400px;
}
.submit-btn:disabled { opacity: .6; cursor: default; }

.form-success { text-align: center; padding: 1rem 0; }
.form-success h3 {
  font-family: var(--font-serif);
  font-size: 2rem;
  margin-bottom: .75rem;
}
.form-success p {
  color: rgba(229,228,226,.7);
  font-weight: 300;
  line-height: 1.6;
}
.serving {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  color: var(--arch-stone);
  font-size: .9rem;
}
.serving svg { width: 1.1em; height: 1.1em; stroke: var(--arch-white); }

/* standalone form page (scrollable, unlike the hero) */
body.form-page {
  background: var(--arch-black);
  min-height: 100dvh;
  padding: clamp(2rem, 8vh, 6rem) 1.25rem;
}
body.form-page .back-link {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
body.form-page .back-link:hover { color: var(--arch-white); }

/* =========================================================================
   REVIEWS (reviews.html) — light, styled to mirror Google. Own tab, scrollable.
   ========================================================================= */
body.reviews-page {
  background: #f6f6f4;
  color: #202124;
  min-height: 100dvh;
}
.reviews-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vh, 7rem);
}
.visually-hidden {            /* no visible title; heading kept for a11y/SEO */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* map: a pin per review (Leaflet + free CartoDB light tiles, no API key) */
.reviews-map {
  height: clamp(240px, 38vh, 420px);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  border: 1px solid #e8eaed;
  box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.05);
  background: #eef0ee;        /* shown while tiles load */
  z-index: 0;
}
.leaflet-container { font-family: var(--font-sans); }
/* A plain circle, not a teardrop: a circle has no tip, so it never "points"
   at one exact house — it just marks the general spot. (Privacy, see app.js §7.) */
.map-pin {
  width: 1.05rem; height: 1.05rem;
  background: var(--arch-black);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  transition: transform .15s ease, background-color .15s ease;
}
.map-pin:hover, .map-pin.is-active {
  background: var(--arch-bronze);
  transform: scale(1.3);
}
.leaflet-popup-content { font-family: var(--font-sans); font-size: .85rem; margin: .55rem .75rem; }
.leaflet-popup-content .pin-name { font-weight: 600; color: #202124; }   /* the project blurb */

/* topic chips (Google review-topics: label + live count) */
.review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.filter-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 500;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip .count { font-size: .82rem; font-weight: 400; color: #80868b; }
.filter-chip:hover { background: #f1f3f4; border-color: #c9ccd0; }
.filter-chip.is-active { background: #e8f0fe; color: #1967d2; border-color: #e8f0fe; }
.filter-chip.is-active .count { color: #1967d2; opacity: .7; }

/* the wall (masonry via CSS columns) */
.reviews-wall { columns: 1; column-gap: 1.25rem; }
.reviews-empty { color: #5f6368; font-size: .95rem; text-align: center; padding: 2rem 0; }
@media (min-width: 640px)  { .reviews-wall { columns: 2; } }
@media (min-width: 1024px) { .reviews-wall { columns: 3; } }

.review-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.25rem;
  box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.05);
  transition: box-shadow .2s ease;
}
.review-card[hidden] { display: none; }
.review-card:hover { box-shadow: 0 1px 3px rgba(60,64,67,.16), 0 4px 12px rgba(60,64,67,.1); }

/* card head: clickable person (avatar + name/meta) + platform mark */
.rc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.rc-person { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; color: inherit; }
.rc-person:hover .rc-name { text-decoration: underline; text-underline-offset: 2px; }
.rc-avatar {
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 1.15rem; font-weight: 500;
}
.rc-who { flex: 1; min-width: 0; line-height: 1.3; }
.rc-name { display: block; font-size: .98rem; font-weight: 500; color: #202124; }
.rc-meta { display: block; font-size: .8rem; color: #70757a; }
.rc-source {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
  border: 1px solid #e8eaed;
}
.rc-source.google   { color: #4285f4; }
.rc-source.nextdoor { color: #00b246; }

.rc-rating { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.rc-stars { color: #fbbc04; letter-spacing: .08em; font-size: 1rem; }
.rc-date { font-size: .82rem; color: #70757a; }

.rc-body { font-size: .96rem; line-height: 1.6; color: #3c4043; margin-bottom: 1.1rem; }
.review-card.is-placeholder .rc-body { color: #5f6368; }

.rc-link { display: inline-block; font-size: .85rem; font-weight: 500; color: #1a73e8; }
.rc-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* bottom CTA (dark button on the light page) */
.reviews-cta { text-align: center; margin-top: clamp(3rem, 8vh, 5rem); }
.reviews-cta p {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #1a1a1a;
  margin-bottom: 1.5rem;
}
.reviews-cta .btn { display: inline-flex; max-width: none; width: auto; }
.reviews-cta .btn--primary { background: #1a1a1a; color: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); }
.reviews-cta .btn--primary:hover { background: #000; }