/* ================================================================================
   RADIANCE BY HOLLIE — RESPONSIVE STYLESHEET
   ================================================================================
  

   BREAKPOINT MAP (still used for structural changes only)
   ---------------------------------------------------------
   1024px  → services grid 4→3 columns; small laptops / large tablets landscape.
   900px   → the big "two columns become one" point (about, lessons, contact,
             service-detail rows, gallery feature photos) + services 3→2.
   860px   → NAV BREAKPOINT: burger menu replaces the inline links + CTA.
   768px   → tablets in portrait (iPad ≈ 768).
   640px   → large phones landscape / phablets.
   580px   → phones in portrait (most iPhones/Android phones sit here).
   480px   → smaller / older phones.
   380px   → the smallest phones still in common use.
   Orientation query → short, wide viewports (phone held sideways).
   ================================================================================ */




:root {
  --nav-h: clamp(56px, calc(2.9vw + 45.6px), 75px);
  --logo-size: clamp(68px, calc(7.3vw + 41.7px), 128px);
}
.nav-logo {
  top: clamp(-20px, calc(-3.1vw + 17px), 6px);
}
.nav-logo img {
  width: var(--logo-size);
  height: var(--logo-size);
}

/* ---- Hero headline gap ----
 */
.hero-decorative {
  margin-bottom: clamp(-14px, calc(-2.9vw + 20.5px), 10px);
}

/* ---- Services background photo ----
 */
#services::before {
  background-attachment: fixed;
  background-position: center;
}

/* ---- About handwritten note ----
 */
.about-note {
  left: max(
    clamp(-88px, calc(-23.16vw + 208.4px), 0px),
    calc(-1 * (max(0px, (100vw - var(--max-w)) / 2) + clamp(20px, 4vw, 56px) - 6px))
  );
  top: clamp(-34px, calc(-3.5vw + 10.8px), -6px);
  width: clamp(150px, calc(18.75vw + 60px), 300px);
  height: clamp(150px, calc(18.75vw + 60px), 300px);
}

/* ---- Service card photos ----
 */

/* ---- Service card price/arrow alignment ----
*/
.svc-price {
  margin-top: auto;
}
.svc-arrow {
  margin-top: 14px;
}

/* ---- Service-detail media frame & photo ----
  */
.detail-frame {
  padding: clamp(10px, 1.5vw, 15px);
}
.detail-slide {
  aspect-ratio: 4 / 5;
  height: auto;
}

/* ---- Testimonial ----
    */
/* ---- Testimonial RESP CSS ---- */
#testimonial {
  padding-left: clamp(0px, calc(-2.22vw + 28.4px), 20px);
  padding-right: clamp(0px, calc(-2.22vw + 28.4px), 20px);
}
.t-inner {
  min-height: clamp(340px, 38vw, 480px);
  margin: 0 auto;
}
.t-inner::before {
  inset: clamp(8px, 2vw, 14px);
}
.t-ornament {
  font-size: clamp(2.6rem, 10vw, 8rem);
  transform: translateY(clamp(16px, 3.9vw, 50px));
  margin-bottom: clamp(13px, 3.13vw, 40px);
}

/* Mobile only — force the card to a fixed square, so its size can
   never change no matter which testimonial (long or short) is showing.
   The quote scrolls inside the card instead of pushing it taller. */
@media (max-width: 768px) {
  .t-inner {
    width: min(88vw, 420px);
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    padding: 28px 24px;
  }

  .t-quote {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;

    /* rose scrollbar, visible on the browsers that support styling it */
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: var(--c-rose) transparent;          /* Firefox: thumb, track */
  }

  /* Chrome / Safari / Edge */
  .t-quote::-webkit-scrollbar {
    width: 4px;
  }
  .t-quote::-webkit-scrollbar-track {
    background: transparent;
  }
  .t-quote::-webkit-scrollbar-thumb {
    background: var(--c-rose);
    border-radius: 999px;
  }

  /* Fallback for iOS Safari, which ignores scrollbar styling entirely and
     hides native scrollbars until mid-scroll — a bottom fade is the only
     reliable way to hint there's more content there before someone touches it */
  .t-quote {
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  }
}
/* ---- Service-detail numerals (I. II. III. IV.) ----
 */
.detail-num {
  font-size: clamp(1.8rem, 5vw, 4rem);
}

@media (max-width: 580px) {
  .hero-caption { display: none; }
  .cf-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

  .carousel-slide { flex: 0 0 100%; }
  .gallery-feature-photo { aspect-ratio: 4/3.2; }

  .rad-widget { right: 16px; bottom: 16px; }
  .rad-bubble { width: 52px; height: 52px; }
  .rad-bubble svg { width: 23px; height: 23px; }

  .car-arrow {
    width: 34px;
    height: 34px;
    font-size: .8rem;
  }
  .car-prev { left: 6px; }
  .car-next { right: 6px; }

  /* --- Service cards: horizontal layout, phones only ---
     Image moves beside the text instead of above it, so each
     card's height ≈ text height, not image height + text height.
     Single column stays (no squeeze), scroll drops by roughly half. */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .svc {
    flex-direction: row;
      
  }
  .svc-img {
    width: 34%;
    flex: 0 0 34%;
    height: auto;
    aspect-ratio: 3 / 4; /* portrait crop — same ratio, just a smaller frame */
  }
  .svc-body {
    padding: 14px 16px 14px 18px;
    flex: 1;
    min-width: 0; /* stops long words/prices forcing overflow */
  }
  .svc-name {
    font-size: .8rem;
    margin-bottom: 6px;
  }
.svc-desc {
    font-size: .7rem;
    line-height: 1.5;
    margin-bottom: 10px;
    overflow: visible !important;
   /* max-height: calc(1.5em * 3);  3 lines at this line-height 
    overflow: hidden;*/
  }
  .svc-price { font-size: .95rem; }
  .svc-price em { font-size: .5rem; }
  .svc-arrow { display: none; } /* redundant once the card is clearly a tappable row */
}

/* ================================================================================
  CALENDLY ADDED IF DOESNT WORK N MOBILE THEN
   ================================================================================ */
 @media (max-width: 480px) {
  .btn { padding: 13px 22px; font-size: .54rem; }
  .about-corner-deco { display: none; }
  .s-decorative { font-size: clamp(1.6rem, 9vw, 3.6rem); }
  .cd { padding: 14px 0; }
  .cd-val { font-size: .92rem; }
  .calendly-card { padding: 22px 16px 24px; }

  /* Contain the widget in a shorter visible window instead of forcing its
     own height — Calendly's script fully renders and manages the iframe
     inside, we just don't show all of it at once. Fully clickable since
     nothing about the widget's own size or layout is touched. */
 .calendly-frame {
    max-height: 480px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ================================================================================
   1. NAV — BURGER MENU MODULE (structural: a menu is either inline links or
      a burger, there's no "in-between" state)
   ================================================================================ */

/* ---- burger button: resting (desktop-hidden) state ---- */
.nav-burger {
  display: none;              /* revealed at 860px and below */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 8;                 /* above the absolutely-centred logo */
  position: relative;
}
.nav-burger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-dark);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
}
/* all three lines share the same width for a clean, even burger icon */
.nav-burger-line:nth-child(2) { width: 22px; }

/* morph into an "X" when open */
.nav-burger.is-open .nav-burger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  width: 22px;
}
.nav-burger.is-open .nav-burger-line:nth-child(2) {
  opacity: 0;
}
.nav-burger.is-open .nav-burger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  width: 22px;
}

/* ---- backdrop ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46,36,32,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---- drop-down panel ---- */
.nav-mobile-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  background: var(--c-cream);
  border-bottom: 1px solid rgba(210,140,110,.25);
  box-shadow: 0 18px 40px rgba(46,36,32,.18);
  padding: calc(var(--nav-h) + 28px) clamp(24px,8vw,56px) 40px;
  text-align: center;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.nav-mobile-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .4;
  pointer-events: none;
}

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.nav-mobile-links a {
  display: inline-block;
  font-family: var(--f-cinzel);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-dark);
  padding: 14px 0;
  transition: opacity .2s;
}
.nav-mobile-links a:active,
.nav-mobile-links a:hover { opacity: .6; }

.nav-mobile-divider {
  display: block;
  font-size: .6rem;
  color: var(--c-peach);
  opacity: .8;
  line-height: 1;
}

.nav-mobile-cta {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
  position: relative;
  z-index: 1;
}

body.nav-open { overflow: hidden; }


/* ================================================================================
   2. STRUCTURAL BREAKPOINT: max-width 1024px
   ================================================================================ */
@media (max-width: 1024px) {
  /* four service cards start to feel squeezed before the 900px stack point —
     drop to 3 across one step early so copy doesn't wrap awkwardly */
  .services-grid { grid-template-columns: repeat(2, 2fr); }
  .svc-img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  /* tighten the generous desktop gutter between image/copy in each
     service-detail row a touch, since there's less width to spare */
  .detail-row { gap: 40px; }

  /* about section columns get a little cramped right before the 900px
     stack — narrow the gap so text doesn't wrap on every third word */
  .about-inner { gap: 48px; }
}


/* ================================================================================
   3. STRUCTURAL BREAKPOINT: max-width 900px — two columns become one
   ================================================================================ */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .lessons-inner { grid-template-columns: 1fr; gap: 36px; }

/* Once .about-inner stacks to one column, .about-img-frame's
     aspect-ratio (3/4) scales height directly off the column's width.
     On a phone that width stays narrow enough to look fine, but on
     tablet-width stacked layouts (e.g. iPad Air portrait, 820px) the
     column gets wide enough that the resulting height becomes huge.
     Capping the image column's own width — independent of the section's
     full width — keeps the photo a sane, consistent size at any
     stacked width instead of scaling up indefinitely. */
     .about-text .s-body {
    text-align: center; /* explicit — .s-body's own base rule (likely
      text-align:left somewhere in main.css) directly matches the
      element, so it wins over the inherited center from .about-text
      above unless overridden here explicitly */}
  .about-img-col {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Text column centered to match the now-centered image above it —
     same treatment already used for .lessons-text at this breakpoint. */
  .about-text { text-align: center; }
  .about-text .s-title ,
  .about-text .s-eyebrow,
  .about-text .s-decorative,
  .about-text .s-rule {
    margin-left: auto;
    margin-right: auto;
  }
  .about-text .s-body { max-width: 450px; margin-left: auto; margin-right: auto; }
  .about-features { max-width: 420px; margin: 32px auto 0; text-align: left; }
  .about-text .btn { margin-left: auto; margin-right: auto; }


  @media (max-width: 900px) {
  /* Section headers centered on mobile/tablet — same treatment as
     .about-text and .lessons-text. Scoped only to .details-head and
     .services-head so the rest of each section (cards, frames, images)
     is completely untouched. */
  .details-head,
  .services-head {
    text-align: center;
  }
  .details-head .s-title,
  .details-head .s-decorative,
  .services-head .s-title,
  .services-head .s-decorative {
    margin-left: auto;
    margin-right: auto;
  }
}
  /* Once the lessons section stacks to a single column, a left-aligned
     block of text + a left-aligned button reads off-centre under the
     centred photo above it. Centre the whole text column, and the CTA
     button along with it, so the section feels balanced top-to-bottom. */
  .lessons-text { text-align: center; }
  .lessons-text .s-decorative,
  .lessons-text .s-rule { margin-left: auto; margin-right: auto; }
  .lessons-text .s-body { max-width: 480px; margin-left: auto; margin-right: auto; }
  .lessons-types { max-width: 420px; margin: 32px auto 0; text-align: left; }
  .lessons-text .btn { margin-left: auto; margin-right: auto; }

  .services-grid { grid-template-columns: 1fr 1fr; }
  .gallery-features { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }

  .contact-inner-v4 { grid-template-columns: 1fr; gap: 36px; }
  .contact-inner-v4 .contact-info { text-align: center; }
  .contact-inner-v4 .s-decorative,
  .contact-inner-v4 .s-rule { margin-left: auto; margin-right: auto; }

  /* matches the JS visCount() breakpoint at 900px in index.html, so the
     dot-count and slide width stay in sync with the visual layout */
  .carousel-slide { flex: 0 0 calc(50% - 4px); }

  .detail-row,
  .detail-row.reverse { grid-template-columns: 1fr; gap: 28px; }
  .detail-row.reverse .detail-media { order: 1; }
  .detail-row.reverse .detail-copy  { order: 2; }
  /* .detail-slide height is now handled fluidly across all widths in
     Section 0 above, so no override is needed here any more. */
}


/* ================================================================================
   4. STRUCTURAL BREAKPOINT: max-width 860px — nav switches to burger
   ================================================================================ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-book  { display: none; }
  .nav-burger { display: flex; }

  /* The logo's "top" offset is tuned for the desktop overlap effect
     (part of it deliberately hangs above/below the bar), not for sitting
     centered next to the burger icon. Below this breakpoint the burger
     replaces the links entirely, so recompute the logo's top position to
     put its vertical center exactly on the bar's vertical center — which
     is also where the burger sits, since it's centered via flexbox. Using
     the same --nav-h / --logo-size variables the rest of the nav is built
     from means this stays correct at every width down to the smallest
     phone, not just at one tested size. */
  .nav-logo {
    top: calc((var(--nav-h) - var(--logo-size)) / 2);
  }
}


/* ================================================================================
   5. max-width 768px — tablets portrait (mostly padding/positioning, not sizing)
   ================================================================================ */
@media (max-width: 768px) {
  #about, #services, #service-details, #gallery, #lessons, #contact {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* .about-note and .detail-frame are now handled fluidly across the
     whole range in Section 0 above, so no overrides are needed here. */
}


/* ================================================================================
   6. max-width 640px — large phones landscape / phablets
   ================================================================================ */
@media (max-width: 640px) {
  .hero-content { padding: 0 clamp(18px, 6vw, 40px); }
  .hero-caption { padding: 0 20px 18px; }

  .about-stamp {
    width: 96px; height: 96px;
    bottom: -12px; right: -12px;
  }
  .about-stamp-num { font-size: 1.5rem; }

  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 18px;
  }
  .footer-links-left,
  .footer-links-right { justify-content: center; flex-wrap: wrap; }
  .footer-right { flex-direction: column; justify-content: center; }
}


/* ================================================================================
   7. max-width 580px — phones in portrait
   ================================================================================ */
@media (max-width: 580px) {
  :root {
    --nav-h: 68px;
  }

  .hero-caption { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

  /* matches visCount() in index.html, which returns 1 below 580px */
  .carousel-slide { flex: 0 0 100%; }
  .gallery-feature-photo { aspect-ratio: 4/3.2; }

  .rad-widget { right: 16px; bottom: 16px; }
  .rad-bubble { width: 52px; height: 52px; }
  .rad-bubble svg { width: 23px; height: 23px; }
}


/* ================================================================================
   8. max-width 480px — smaller / older phones
   ================================================================================ */
@media (max-width: 480px) {
  .btn { padding: 13px 22px; font-size: .54rem; }

  /* .about-note is handled fluidly across the whole range in Section 0
     above, so no override is needed here. */
  .about-corner-deco { display: none; }

  .s-decorative { font-size: clamp(1.6rem, 9vw, 3.6rem); }

  .cd { padding: 14px 0; }
  .cd-val { font-size: .92rem; }

  .calendly-card { padding: 22px 16px 24px; }

}


/* ================================================================================
   9. max-width 380px — smallest phones (iPhone SE and similar)
   ================================================================================ */
@media (max-width: 380px) {
  .hero-h1 { letter-spacing: .12em; }
  .hero-sub { margin-bottom: 30px; }

  .btn { padding: 12px 18px; }

  .about-stamp { width: 82px; height: 82px; }
  .about-stamp-num { font-size: 1.25rem; }
  .about-stamp-lbl { font-size: .46rem; }

  .nav-mobile-panel { padding-left: 20px; padding-right: 20px; }
  .nav-mobile-links a { font-size: .78rem; }
}


/* ================================================================================
   10. ORIENTATION: short/landscape phones
   ================================================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  #hero { height: auto; min-height: 100vh; padding-top: calc(var(--nav-h) + 10px); padding-bottom: 24px; }
  .hero-content { height: auto; padding-top: 10px; padding-bottom: 10px; }
  .hero-decorative { font-size: clamp(2.2rem, 6vw, 4rem); }
  .hero-h1 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
  .hero-caption { display: none; }

  .nav-mobile-panel { max-height: 100vh; overflow-y: auto; padding-top: calc(var(--nav-h) + 14px); padding-bottom: 20px; }
}


/* ================================================================================
   11. TOUCH DEVICES — remove hover-only affordances that can "stick" on tap
   ================================================================================ */
@media (hover: none) and (pointer: coarse) {
  .svc:hover { box-shadow: none; }
  .svc:hover .svc-img img { transform: none; }
  .svc:hover .svc-arrow { opacity: .55; transform: none; }
  .carousel-slide:hover img { transform: none; }
  .car-arrow:hover { background: var(--c-cream); color: var(--c-dark); border-color: var(--c-blush); }
}


@media (max-width: 580px) {
  .detail-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px 0;
    box-sizing: border-box;
  }

  .detail-nav-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
  }

  .detail-controls .car-dots {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .rad-card {
    width: calc(100vw - 32px);
  }

  .rad-card-media {
    aspect-ratio: 4 / 3.9;
    position: relative;
    overflow: hidden; /* clip to this box's own shape, belt-and-braces
                          alongside .rad-card-frame's own overflow:hidden */
    /* border-radius intentionally left alone — the base rule
       (50% 50% / 18% 18%) is a % of this box's own width/height, so it
       already recalculates into a correct, smooth dome at any size.
       My previous fixed-px override is what broke the match with the
       frame. */
  }

  .rad-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


@media (max-width: 900px) {
  /* Arrows removed on mobile/tablet — swipe (already wired up on both
     carousels) replaces them entirely. Desktop above 900px keeps arrows
     untouched. Dots stay everywhere as the position indicator. */
  .car-arrow,
  .detail-nav-btn {
    display: none;
  }
   .detail-controls {
    justify-content: center;
    padding-bottom: 20px; /* buttons used to give this row its height,
                              so hiding them collapsed the row down to
                              just the dots — this restores the space
                              that was there before */}
  
}


/* ================================================================================
   RAD-WIDGET — LANDSCAPE PHONES (iPhone + Android), fluid units only
   Scoped strictly to short-height + landscape, so portrait phones, tablets
   in landscape, and all of desktop are completely untouched.
   ================================================================================ */

@media (orientation: landscape) and (max-height: 550px) and (max-width: 957px) {

  .rad-widget {
    right: clamp(0.6rem, 2vw, 1rem);
    bottom: clamp(0.4rem, 2vh, 0.9rem);
  }

  .rad-bubble {
    width: clamp(2.4rem, 9vh, 3rem);
    height: clamp(2.4rem, 9vh, 3rem);
  }
  .rad-bubble svg {
    width: clamp(1rem, 4vh, 1.3rem);
    height: clamp(1rem, 4vh, 1.3rem);
  }

  /* Card becomes a wide, short row instead of a tall stack. Height is
     capped to the viewport with internal scroll as a fallback, but the
     side-by-side layout means it should rarely need to scroll at all. */
  .rad-card {
    width: min(92vw, 30rem);
    max-height: calc(100vh - 1.2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .rad-card-close {
    width: clamp(1.3rem, 5vh, 1.5rem);
    height: clamp(1.3rem, 5vh, 1.5rem);
    top: clamp(0.35rem, 1.5vh, 0.6rem);
    right: clamp(0.35rem, 1.5vh, 0.6rem);
    z-index: 5; /* sits above both columns now that they're side by side */
  }

  /* --- Left column: photo --- */
  .rad-card-media-wrap {
    flex: 0 0 38%;
    padding: clamp(0.6rem, 3vh, 1rem) 0 clamp(0.6rem, 3vh, 1rem) clamp(0.6rem, 3vh, 1rem);
    display: flex;
    align-items: center;
  }
  .rad-card-frame {
    padding: clamp(0.35rem, 1.5vh, 0.55rem);
    height: 100%;
    /* Arch shape (rounded top only) doesn't suit a card that's now
       wider than it is tall — a fully rounded rectangle reads better
       running down the left edge of a horizontal card. */
    border-radius: var(--r-photo-sm);
  }
  .rad-card-media {
    aspect-ratio: auto;
    height: 100%;
    border-radius: calc(var(--r-photo-sm) - 4px);
  }
  .rad-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Right column: copy --- */
  .rad-card-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: clamp(0.6rem, 3vh, 1rem) clamp(0.8rem, 4vw, 1.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .rad-card-eyebrow    { margin-bottom: clamp(0.2rem, 0.8vh, 0.35rem); }
  .rad-card-title      { font-size: clamp(0.9rem, 3vh, 1.05rem); margin-bottom: clamp(0.05rem, 0.3vh, 0.15rem); }
  .rad-card-decorative { font-size: clamp(0.85rem, 2.8vh, 1.05rem); margin-bottom: clamp(0.25rem, 1vh, 0.4rem); }
  .rad-card-copy {
    font-size: clamp(0.68rem, 2vh, 0.76rem);
    line-height: 1.45;
    margin-bottom: clamp(0.4rem, 1.5vh, 0.7rem);
    /* Trim to 3 lines so a long discovery-call paragraph can't push the
       CTA button out of a short viewport — same pattern used for the
       service card descriptions. */
    max-height: calc(1.45em * 3);
    overflow: hidden;
  }
  .rad-card-cta {
    align-self: flex-start;
    padding: clamp(0.5rem, 2vh, 0.7rem) clamp(1rem, 4vw, 1.3rem);
  }
}



@media(max-width:900px){
 

  /* Text column centered to match the now-centered/full-width image
     above it once the row stacks. */
  .detail-copy { text-align: center; }
  .detail-num { margin-left: auto; margin-right: auto; }
  .detail-copy .s-body {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  /* .detail-foot is a flex row (price + button), not plain text, so it
     needs justify-content rather than text-align to actually center. */
  .detail-foot { justify-content: center; }
}