/* ===== Desktop-only forced top-right placement of intro photo ===== */

/* Non-desktop stack */




/* ===== Desktop + Landscape tablet: top-right corner placement ===== */
@media (min-width: 700px){
  section.card.home-services {
    position: relative !important;
    padding-right: 240px !important;
  }
  section.card.home-services img.intro-photo {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 180px !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
  }
}

/* ===== Narrow portrait/mobile: stack normally ===== */
@media (max-width: 699.98px){
  section.card.home-services img.intro-photo {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0.5rem auto !important;
    display: block !important;
    float: none !important;
  }
}



/* ===== Desktop + Landscape tablet: photo top-right, text flows underneath ===== */
@media (min-width: 700px){
  section.card.home-services {
    position: relative !important;
    padding-right: 0 !important; /* allow text under photo */
  }
  section.card.home-services img.intro-photo {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 180px !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    z-index: 1 !important;
  }
}

/* ===== Narrow portrait/mobile: stack normally ===== */
@media (max-width: 699.98px){
  section.card.home-services img.intro-photo {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0.5rem auto !important;
    display: block !important;
    float: none !important;
  }
}



/* ===== Desktop + Landscape tablet: float-right photo with wrapping text ===== */
@media (min-width: 700px){
  section.card.home-services img.intro-photo {
    float: right !important;
    width: 180px !important;
    height: auto !important;
    margin: 0 0 0.75rem 1rem !important; /* spacing around text */
    position: static !important;
    display: block !important;
  }
}

/* ===== Narrow portrait/mobile: stack normally ===== */
@media (max-width: 699.98px){
  section.card.home-services img.intro-photo {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0.5rem auto !important;
  }
}



/* ===== Fix: allow wrapping beside the floated image on desktop/landscape ===== */
@media (min-width: 700px){
  section.card.home-services .lede{
    clear: none !important; /* previously added clear caused text to drop below image */
  }
}



/* ===== FINAL: Desktop + Landscape tablet - float-right image with proper text wrap ===== */
@media (min-width: 700px){
  section.card.home-services img.intro-photo {
    float: right !important;
    width: 170px !important;
    height: auto !important;
    margin: 0 0 0.75rem 1rem !important; /* gap to left/bottom */
    position: static !important;
    display: block !important;
  }
  section.card.home-services .lede {
    clear: none !important; /* ensure wrap instead of forcing text below image */
  }
}

/* ===== Narrow portrait/mobile: stack normally ===== */
@media (max-width: 699.98px){
  section.card.home-services img.intro-photo {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0.5rem auto !important;
  }
}



/* ========= FINAL: Desktop/Landscape wrap — photo top-right, text wraps down the left and continues underneath ========= */
@media (min-width: 700px){
  section.card.home-services { 
    position: relative !important;
    overflow: visible !important; /* ensure floats aren't clipped */
    padding-right: 0 !important;  /* no reserved space; allow true wrap */
  }
  section.card.home-services img.intro-photo{
    float: right !important;
    position: static !important;
    width: 170px !important;   /* adjust if needed */
    height: auto !important;
    margin: 0 0 0.85rem 1rem !important; /* space left & below photo */
    display: block !important;
  }
  section.card.home-services .lede{
    clear: none !important;    /* allow paragraph to wrap beside photo */
  }
}

/* ========= Mobile/portrait: stack ========= */



/* Default (mobile portrait): one rotating slot */
.intro-photos{
  width: 100%;
  max-width: 380px;
  margin: 0.5rem auto 0.75rem auto;
}

.intro-photos .intro-img{ display: none; width: 100%; height: auto; object-fit: contain; }
.intro-photos .intro-img.active{ display: block; }

/* ===== Intro photos: tile system with 3/4 images ===== */

/* Mobile portrait: show ONE tile at a time (rotating), keep layout narrow */
.intro-photos{
  width: 100%;
  max-width: 380px;
  margin: 0.5rem auto 0.75rem auto;
}


.intro-photos .intro-img{ width: 100%; height: auto; display: block; object-fit: contain; }

/* Desktop + landscape: show all five tiles, same spacing, bigger images, no cropping */


.intro-photos{
  position: static;
  width: 100%;
  max-width: 380px;            /* same as before */
  margin: 0.5rem auto 0.75rem; /* same spacing */
}
.intro-photos .intro-img{
  display: none;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.intro-photos .intro-img.active{ display: block; }


@media (orientation: landscape) and (min-width: 600px),
       (min-width: 900px){
  section.card.home-services{ position: static; padding-top: 0; }
  .intro-photos{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0.5rem 0 1rem;
    width: clamp(1100px, 95vw, 2200px);  /* wider row allows larger images */
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 24px;                     /* same outer padding */
  }
  .intro-photos .intro-img{
    display: block !important;           /* show all */
    width: calc((100% - 96px)/5);        /* 4 gaps (12*4) + 2*24 padding = 96px */
    height: 520px;                       /* big images */
    object-fit: contain;                 /* preserve proportions; no cropping */
  }
}

/* === Restore vertical mobile EXACT behavior: single .intro-photo, center, fixed width === */
@media (orientation: portrait) and (max-width: 900px){
  section.card.home-services img.intro-photo{
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;   /* original width cap */
    margin: 0.5rem auto !important;
    display: block !important;
  }
  /* Hide the 5-up row in portrait */
  .intro-photos{ display: none !important; }
}

/* === Desktop & Landscape: show 5-up row under heading, hide single === */
@media (orientation: landscape) and (min-width: 600px),
       (min-width: 900px){
  section.card.home-services img.intro-photo{ display: none !important; }
  .intro-photos{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0.5rem 0 1rem;
    width: clamp(1100px, 95vw, 2200px);
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 24px;
  }
  .intro-photos .intro-img{
    display: block !important;
    width: calc((100% - 96px)/5);
    height: 520px;
    object-fit: contain;
  }
}



/* === Home page under-heading photos: portrait slider + landscape/desktop 5-up row === */
/* Default (mobile portrait): show a single image (rotated via JS) */
.card.home-services .intro-photos { 
  width: 100%;
  max-width: 420px;
  margin: 0.5rem auto 1rem auto;
}
.card.home-services .intro-photos .intro-img { 
  display: none; 
  width: 100%; 
  height: auto; 
  object-fit: contain; 
}
.card.home-services .intro-photos .intro-img.active { 
  display: block; 
}

/* The standalone portrait image shown above the text */
.card.home-services img.intro-photo { 
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0.25rem auto 0.5rem auto;
}

/* Landscape OR wider screens: show all five at once, spaced evenly */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services img.intro-photo { display: none; }
  .card.home-services .intro-photos {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 1rem 0;
  }
  .card.home-services .intro-photos .intro-img {
    display: block !important;
    height: 240px;        /* consistent row height without cropping content */
    width: auto;
    flex: 1 1 0;
    object-fit: contain;
  }
}



/* === PATCH: Center 5-up row and ensure it fits the card background on desktop/landscape === */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services .intro-photos{
    /* center the whole strip inside the card */
    max-width: 1100px;
    width: min(100%, 1100px);
    margin-left: auto;
    margin-right: auto;
    transform: none;            /* cancel any earlier translation */
    justify-content: center;    /* center the group */
    gap: 14px;
  }
  .card.home-services .intro-photos .intro-img{
    /* scale to fit the card, maintain aspect, no cropping */
    flex: 0 1 auto;
    height: clamp(120px, 22vh, 180px);
    width: auto;
    object-fit: contain;
  }
}



/* === PATCH: Center the home page heading only === */
.card.home-services > h1{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}



/* === PATCH: Make desktop/landscape intro photos a bit larger (portrait unchanged) === */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services .intro-photos{
    max-width: 1200px; /* allow a touch more width while staying centered */
  }
  .card.home-services .intro-photos .intro-img{
    height: clamp(140px, 26vh, 210px); /* was 120px–180px; slightly larger */
  }
}



/* === PATCH: Bigger desktop/landscape photos + extra top space above heading on home page === */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services .intro-photos{
    max-width: 1300px; /* allow a bit more width so larger images still fit */
  }
  .card.home-services .intro-photos .intro-img{
    height: clamp(160px, 28vh, 240px); /* slightly bigger than last version */
  }
}

/* Add more breathing room between the menu bar and the home heading */
.card.home-services{
  margin-top: clamp(16px, 6vw, 56px);
}



/* === PATCH 2: Desktop spacing inside the card + keep photos fully inside the card === */

/* 1) Give the home card more top padding only on desktop/landscape */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services{
    padding-top: clamp(36px, 7vw, 84px); /* extra breathing room inside the background box */
  }
}

/* 2) Ensure the 5-up photo row never oozes past the card edges */
@media (orientation: landscape), (min-width: 900px){
  .card.home-services .intro-photos{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;   /* cancel any earlier translate rules */
    overflow: hidden;  /* safety: hide accidental overflow */
    padding: 0;        /* keep snug to card padding */
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap; /* stay one line */
  }
  .card.home-services .intro-photos .intro-img{
    /* Bigger than before, but constrained so all five always fit */
    height: clamp(180px, 30vh, 260px);      /* bump size */
    width: auto;
    max-width: calc((100% - (4 * 14px)) / 5); /* five across within available width (account for gaps) */
    object-fit: contain;
    flex: 0 1 auto;
  }
}



/* === PATCH 3: Move heading text down on desktop, and hard-center the photo row === */
@media (orientation: landscape), (min-width: 900px){
  /* Nudge heading text down inside the card (without moving the box itself) */
  .card.home-services > h1{
    margin-top: clamp(12px, 2.8vw, 32px);
  }

  /* Center the 5-up row by shrink-wrapping to its content and auto-centering */
  .card.home-services .intro-photos{
    width: fit-content;   /* shrink to content width */
    max-width: 100%;      /* but never exceed card width */
    margin-left: auto;
    margin-right: auto;   /* centers the strip */
    justify-content: center;
    transform: none;      /* ensure no previous translate offsets apply */
  }
}



/* === PATCH 4: Ensure true centering of heading + photo row within the home card (desktop only) === */
@media (orientation: landscape), (min-width: 900px){
  /* Heading: block-level and centered within the card content */
  .card.home-services > h1{
    display: block;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Photo row: shrink-wrap to content and center horizontally */
  .card.home-services .intro-photos{
    width: fit-content;     /* shrink to the actual total width of images + gaps */
    max-width: 100%;        /* never exceed the card */
    margin-left: auto;
    margin-right: auto;     /* centers within the card */
    display: flex;
    gap: 14px;
    justify-content: center;
    transform: none;        /* cancel any previous translations */
  }

  /* Images: keep consistent height, let width flow naturally; avoid calc caps that can skew centering */
  .card.home-services .intro-photos .intro-img{
    height: clamp(180px, 30vh, 260px);
    width: auto;
    max-width: none;        /* remove earlier max-width constraints */
    object-fit: contain;
    flex: 0 0 auto;         /* fixed-size items so the row's width is the true sum of children */
  }
}



/* === PATCH 5: Fix desktop cut-off (no overflow), keep 5-up inside card, and nudge landscape left === */
/* Desktop & larger landscape: center row, let images scale to fit inside the card without cropping */
@media (min-width: 900px){
  .card.home-services .intro-photos{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    gap: 14px;
    overflow: visible;   /* override earlier hidden to avoid clipping */
    transform: none;     /* ensure no offset */
  }
  .card.home-services .intro-photos .intro-img{
    /* Allow proportional scaling so five always fit inside the card */
    height: auto;
    width: auto;
    max-height: clamp(180px, 30vh, 240px);                /* consistent visual height target */
    max-width: calc((100% - (4 * 14px)) / 5);             /* five across within available width */
    flex: 0 1 auto;
    object-fit: contain;
  }
}

/* Tablet/landscape subtle centering nudge (tiny left shift); portrait unchanged */
@media (orientation: landscape) and (max-width: 1199.98px){
  .card.home-services .intro-photos{
    transform: translateX(-6px);
  }
}



/* === PATCH 6: Nudge photo row slightly left on BOTH desktop and landscape (portrait unchanged) === */
@media (orientation: landscape){
  .card.home-services .intro-photos{
    transform: translateX(-10px) !important; /* slight left shift */
  }
}
@media (min-width: 900px){
  .card.home-services .intro-photos{
    transform: translateX(-10px) !important; /* ensure desktops (which may not report orientation) also shift */
  }
}



/* === PATCH 7: Tiny additional left nudge for desktop & landscape (portrait unchanged) === */
@media (orientation: landscape){
  .card.home-services .intro-photos{
    transform: translateX(-12px) !important; /* was -10px */
  }
}
@media (min-width: 900px){
  .card.home-services .intro-photos{
    transform: translateX(-12px) !important; /* was -10px */
  }
}



/* === GLOBAL: Make the purple menu bar stick to the top on scroll (all views) === */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000; /* keep above content and dropdown visible */
}

/* Ensure dropdown renders above content while stuck */
.site-nav .submenu{ z-index: 1010; }



/* === STICKY NAV (robust): use fixed + dynamic body padding; applies site-wide === */
.site-nav{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  width: 100%;
}
.site-nav .submenu{ z-index: 2010; } /* keep dropdown above content */



/* === RESET: Keep nav under logo, stick on scroll (all views) === */
.site-nav{
  position: sticky !important;
  top: 0;
  left: auto; right: auto; /* cancel previous fixed values */
  z-index: 1200;
}

/* Make sure the header (logo/tagline) stays above the nav while at the top */
.site-header{ position: relative; z-index: 1300; }

/* Keep dropdown menus above page content while stuck */
.site-nav .submenu{ z-index: 1310; }



/* === STICKY-UNDER-LOGO (robust): default under header; fixed only when .is-stuck === */
.site-nav{ position: relative !important; z-index: 1200; }
.site-nav.is-stuck{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 2000; width: 100%; }
.nav-spacer{ height: 0; }
.site-header{ position: relative; z-index: 1300; } /* keep logo above at top of page */
.site-nav .submenu{ z-index: 2010; }               /* dropdown above content */



/* === About page headshot: slightly larger, same alignment/spacing === */
.bio-headshot img{
  max-width: 160px; /* was 140px */
}
@media (orientation: landscape){
  .bio-headshot img{
    max-width: 235px !important; /* was 210px */
  }
}
@media (min-width: 900px){
  .bio-headshot img{
    max-width: 250px !important; /* desktop refinement */
  }
}



/* === About page (portrait/vertical only): bigger headshot, nudge down, tighten gap to text === */
@media (orientation: portrait) and (max-width: 899.98px){
  .bio-headshot{ 
    margin-top: 14px;                  /* slightly bigger space at top of card */
    margin-bottom: 36px !important;    /* was inline 60px; make text come a bit closer */
  }
  .bio-headshot img{
    max-width: 180px;                  /* was 160px in portrait; a little bigger now */
    display: block;
    margin-inline: auto;
  }
}



/* === About page (portrait/vertical): center headshot between top of card and text === */
@media (orientation: portrait) and (max-width: 899.98px){
  /* Equalize gaps above/below the headshot block */
  .bio-headshot{
    margin-top: 28px;             /* space from top of background box */
    margin-bottom: 28px !important; /* equal space before the text block */
  }
  /* Remove default paragraph top margin so our 28px is the only bottom gap */
  .bio-text > p:first-child{ margin-top: 0 !important; }

  /* Keep the slightly larger portrait size from earlier */
  .bio-headshot img{
    max-width: 180px;
    display: block;
    margin-inline: auto;
  }
}



/* === Landscape-only (not desktop): click-to-enlarge homepage photos === */
@media (orientation: landscape) and (max-width: 899.98px){
  .card.home-services .intro-photos{
    overflow: visible; /* allow a touch of grow without clipping */
  }
  .card.home-services .intro-photos .intro-img{
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
    transform-origin: center center;
  }
  .card.home-services .intro-photos .intro-img.enlarged{
    transform: scale(1.12); /* subtle, classy grow */
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 2;
  }
}



/* === Landscape-only fullscreen lightbox for homepage photos === */
@media (orientation: landscape) and (max-width: 899.98px){
  .ic-lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 4vw;
  }
  .ic-lightbox img{
    max-width: 92vw;
    max-height: 92vh;
    height: auto;
    width: auto;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }

  /* Neutralize the earlier gentle-enlarge class so clicks only open the lightbox */
  .card.home-services .intro-photos .intro-img{
    cursor: pointer;
    transition: none !important;
  }
  .card.home-services .intro-photos .intro-img.enlarged{
    transform: none !important;
    box-shadow: none !important;
  }
}



/* === Home: service thumbnails in bottom button boxes (grid-3) === */
.grid-3 .card .service-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 10px 0;
}
.grid-3 .card .service-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* === PATCH: Robust image tiles for bottom home button boxes (works everywhere) === */
.grid-3 .card .service-thumb{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 10px 0;
  /* Preferred modern way: */
  aspect-ratio: 4 / 3;
}
/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 4 / 3){
  .grid-3 .card .service-thumb::before{
    content: "";
    display: block;
    padding-top: 75%; /* 4:3 ratio */
  }
  .grid-3 .card .service-thumb img{
    position: absolute;
    inset: 0;
  }
}

.grid-3 .card .service-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* === Home button boxes: smaller thumbnails after text, above button, keep original aspect === */
.grid-3 .card .service-thumb{
  /* smaller than card width and centered */
  max-width: 92%;
  width: 360px;            /* will shrink on narrow screens */
  margin: 10px auto 12px auto;
  border-radius: 14px;
  overflow: hidden;
}
/* remove any forced aspect ratio from earlier rules */
.grid-3 .card .service-thumb{ aspect-ratio: auto; }
@supports not (aspect-ratio: 1 / 1){
  .grid-3 .card .service-thumb::before{ content: none; padding-top: 0; display: none; }
  .grid-3 .card .service-thumb img{ position: static; }
}

.grid-3 .card .service-thumb img{
  display: block;
  width: 100%;    /* scale within the container */
  height: auto;   /* keep original aspect */
  object-fit: contain; /* ensure no cropping if any height is implied */
}



/* === Service thumbs back at top of each card (above text) === */
.grid-3 .card .service-thumb{
  margin: 0 auto 10px auto; /* no top margin; small gap below image before text */
}



/* === FIX: Keep 3 service boxes centered and contained on desktop/landscape === */
/* Remove the fixed 360px width in wider layouts so columns don't overflow */
@media (min-width: 768px){
  .grid-3{ width: 100%; margin-inline: auto; } /* ensure centered within container */
  .grid-3 .card .service-thumb{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0; /* keep small gap above text */
  }
  .grid-3 .card .service-thumb img{
    width: 100% !important;
    height: auto !important;   /* keep original aspect ratio */
    object-fit: contain !important;
  }
}



/* === Uniform sizes for service boxes & photos on desktop + landscape === */
/* Keep portrait as-is; normalize only desktop and landscape so all three match */
@media (min-width: 768px), (orientation: landscape){
  /* Make each card stretch to same height in the grid row */
  .grid-3{ align-items: stretch; }
  .grid-3 .card{ height: 100%; display: flex; flex-direction: column; }

  /* Thumbnail at top: fixed visual frame so all three are identical */
  .grid-3 .card .service-thumb{
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3;   /* consistent frame */
    margin: 0 0 10px 0;
    border-radius: 14px;
    overflow: hidden;
  }
  .grid-3 .card .service-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;      /* fill frame evenly so dimensions match */
    display: block;
  }
}



/* === ROLLBACK: Restore previous service-box/photos behavior (pre-uniform-sizing) === */
/* Desktop & landscape: keep grid centered and contained, images above text, 
   smaller and preserving original aspect ratio (no forced 4:3, no equal-height cards). */
@media (min-width: 768px), (orientation: landscape){
  .grid-3{ width: 100%; margin-inline: auto; align-items: initial; }
  .grid-3 .card{ height: auto; display: flex; flex-direction: column; }

  .grid-3 .card .service-thumb{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: auto;          /* undo forced frame */
  }
  @supports not (aspect-ratio: 1 / 1){
    .grid-3 .card .service-thumb::before{ content: none; padding-top: 0; display: none; }
    .grid-3 .card .service-thumb img{ position: static; }
  }

  .grid-3 .card .service-thumb img{
    width: 100% !important;
    height: auto !important;     /* preserve original aspect */
    object-fit: contain !important;
    display: block;
  }
}



/* === Caregivers/Parents: slightly smaller image ONLY on desktop & landscape === */
@media (orientation: landscape), (min-width: 900px){
  .grid-3 .card .service-thumb.service-thumb--care{
    max-width: 88% !important;   /* scale down just a touch */
    margin: 0 auto 10px auto !important;  /* keep centered and same gap to text */
  }
  .grid-3 .card .service-thumb.service-thumb--care img{
    width: 100% !important;
    height: auto !important;     /* preserve original aspect */
    object-fit: contain !important;
  }
}



/* === Caregivers/Parents: one more tiny size nudge (desktop & landscape only) === */
@media (orientation: landscape), (min-width: 900px){
  .grid-3 .card .service-thumb.service-thumb--care{
    max-width: 86% !important;   /* was 88% */
    margin: 0 auto 10px auto !important;
  }
  .grid-3 .card .service-thumb.service-thumb--care img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* === Home top photos: apply same soft/rounded corners as bottom tiles (all views) === */
.card.home-services .intro-photos .intro-img{
  border-radius: 14px;
}
.card.home-services img.intro-photo{
  border-radius: 14px;
}

/* === Unified header spacing across all pages ===
   Ensures the space ABOVE the logo equals the space BETWEEN the tagline and the menu.
   Applies to pages using .site-header/.brand-block as well as the 'thanks' page header. */
:root{
  --header-gap-top: 28px;
  --header-gap-bottom: 24px;
}

/* Primary header used on most pages */
.site-header{
  padding-top: var(--header-gap-top) !important;
  padding-bottom: var(--header-gap-bottom) !important;
}

/* 'Thanks' page (no .site-header class): match the same look/spacing */
header:not(.site-header){
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-top: var(--header-gap-top) !important;
  padding-bottom: var(--header-gap-bottom) !important;
  padding-left: 10px; padding-right: 10px;
  display:flex;
  justify-content:center;
}

/* Make 'thanks' header logo block behave like .brand-block */
header:not(.site-header) .brand{
  inline-size: clamp(200px, 50vw, 320px);
  text-align:center;
  margin:0 auto;
}
header:not(.site-header) .brand .logo{
  inline-size:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Small, consistent breathing room between logo and tagline (all pages) */
.tagline{
  margin-top: 6px;
}
/* === Global reset to remove default top whitespace on all pages === */
html, body{
  margin: 0 !important;
  padding: 0;
}


/* Inline photo beside 'My work... transformation begins.' paragraph */
.about-float {
  display: none; /* hidden on small screens */
}

@media (min-width: 900px) {
  .about-float {
    display: block;
    float: right;
    width: clamp(200px, 28%, 320px);
    margin: 0 0 8px 20px;
    border-radius: 10px;
  }
  .about-inline-photo { display: block; }
}








/* ===== Desktop-only side photo rails for About page (v8) ===== */
@media (min-width: 1024px) {
  /* Default positions (tuned): start ~0.5 photo lower; tweak inline if needed */
  .about-body { position: relative; --rail-top: 500px; --rail-bottom: 360px; --rail-gap: 50px; }

  img.about-inline-img { display: none !important; }

  .photo-rail {
    position: absolute;
    top: var(--rail-top);
    bottom: var(--rail-bottom);
    width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--rail-gap);
    pointer-events: none;
  }
  .photo-rail--left  { left:  -180px; }
  .photo-rail--right { right: -180px; top: calc(var(--rail-top) + 20px); }

  .polaroid {
    position: relative;
    width: 150px;
    background: #fff;
    padding: 10px 10px 18px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    transform: rotate(var(--rot, 0deg));
    margin: 0;
  }
  .polaroid .ph {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(180deg, #f0f0f0, #e5e5e5);
    border: 1px dashed rgba(0,0,0,0.15);
    border-radius: 2px;
  }
  .polaroid::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--purple, #6a43a7);
    box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  }
}

@media (max-width: 1023.98px) {
  .photo-rail { display: none !important; }
  img.about-inline-img { display: none !important; }
}

/* END RAILS */