/* ============================================================
   Solivita Assisted Living — shared stylesheet
   Used by index.html, about.html, care-services.html.
   Design tokens: about/brand-assets/guidelines. Fonts: KT Quantum
   Light (display), Mattone (secondary display), DM Sans (body),
   DM Mono (labels/buttons where used).
   ============================================================ */

@font-face {
  font-family: 'KT Quantum Light';
  src: url('../fonts/kt-quantum-light.woff') format('woff');
}
@font-face {
  font-family: 'Mattone';
  src: url('../fonts/mattone.woff') format('woff');
}
/* DM Sans ships as two subset files (Google Fonts convention):
   latin-ext covers accented/extended Latin characters, latin covers
   standard ASCII. Both declare the same family/weight; the browser
   picks whichever subset a given character needs. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #F8F8F4;
  overflow-x: hidden;
}

a { color: inherit; }

/* ---- Site nav -------------------------------------------------
   Fixed, transparent over the hero, glass (blurred translucent
   card) once scrolled past it. Submark logo left, page links right.
   Same markup on every page — see js/main.js for the scroll toggle. */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 60px;
  background: transparent;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.site-nav.site-nav-glass {
  background: rgba(248, 248, 244, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site-nav-logo { display: flex; align-items: center; }
.site-nav-logo img { height: 46px; width: auto; display: block; }
.site-nav-links { display: flex; align-items: center; gap: 40px; }
/* Home link: only shown in the mobile/tablet overlay menu (see the
   override below at the nav-collapse breakpoint) — on desktop the
   logo already links home, so a redundant text link is hidden here. */
.site-nav-home { display: none; }
.site-nav-links a {
  font-family: 'DM Sans';
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: opacity 0.3s ease;
}
.site-nav-links a:hover { opacity: 0.6; }
.site-nav-cta { transition: letter-spacing 0.5s ease, opacity 0.3s ease; }
.site-nav-cta:hover { letter-spacing: 0.16em; opacity: 1; }
.site-nav.site-nav-glass .site-nav-links a { text-shadow: none; }

/* ---- Nav hamburger toggle (tablet/mobile only) --------------------
   Hidden entirely on desktop, where .site-nav-links shows inline.
   Below 1400px it becomes the trigger for a full-screen overlay menu
   (see .site-nav-links.site-nav-links-open in the tablet/mobile
   breakpoints) — toggled via a class in js/main.js. */
.site-nav-toggle {
  display: none;
  position: relative; z-index: 620;
  width: 26px; height: 20px; padding: 0; border: none; background: none; cursor: pointer;
}
.site-nav-toggle span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: #000;
  transition: transform 0.35s ease, opacity 0.25s ease, top 0.35s ease;
}
.site-nav-toggle span:nth-child(1) { top: 0; }
.site-nav-toggle span:nth-child(2) { top: 9px; }
.site-nav-toggle span:nth-child(3) { top: 18px; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---- Hero: sticky-pinned "lift" transition ---------------------
   The hero starts in normal document flow, then switches to
   position:fixed once you scroll past it and never releases — it
   stays pinned behind everything for the rest of the page. The next
   section (opaque background, higher stacking order) scrolls
   normally over it, creating the "lift" look. See js/main.js. */
.cs-hero-stage { position: relative; }
.cs-hero {
  position: relative;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  min-height: 785px;
  height: 785px;
  background: #F8F8F4;
  overflow: hidden;
}
.cs-hero.cs-hero-fixed { position: fixed; }
.cs-hero-spacer { display: none; height: 785px; }
.cs-hero-spacer.cs-hero-spacer-active { display: block; }
.cs-hero-text { flex: 0 0 43%; padding: 140px 60px 0 70px; }
.cs-hero-image { position: relative; flex: 1 1 auto; align-self: stretch; }
.cs-hero-img-bg { position: absolute; top: 0; right: 0; width: 624px; height: 100%; object-fit: cover; }
.cs-hero-img-fg { position: absolute; top: 67px; left: calc(100% - 624px - 95px); width: 216px; height: 257px; object-fit: cover; }

/* Care & Services hero (this page only): narrower text column, wider
   photo — the dining room photo reads better with more width and less
   empty gap between the text block and the image edge. */
.cs-hero-text-narrow { flex-basis: 34%; }
.cs-hero-image-wide .cs-hero-img-bg { width: 100%; }

/* Staggered pair (About hero): two equal-sized frames, top-left and
   bottom-right, overlapping slightly at the center. Images are
   transparent PNGs (framed art on a transparent background) — no
   object-fit crop, no box-shadow (the frame + hardware are the
   photo's own edge, not a card that needs one). */
.cs-hero-image-staggered { overflow: visible; }
.cs-hero-img-stagger { position: absolute; width: 440px; height: auto; }
.cs-hero-img-stagger-1 { top: 40px; left: 10px; z-index: 1; }
.cs-hero-img-stagger-2 { top: 254px; left: 216px; z-index: 2; }

/* ---- Homepage hero (index.html only) ----------------------------
   Distinct from the About/Care hero: 844px tall (not 785px), scrolls
   away normally with the page (no sticky-pin — that mechanism is
   About/Care-only). Every child is absolutely positioned inside a
   1200px container centered in the viewport, matching Showit's own
   canvas coordinates exactly — values extracted via
   getBoundingClientRect against the pre-rebuild page, not
   approximated with flexbox. */
.cs-hero-home { display: block; padding: 0; height: 844px; min-height: 844px; overflow: hidden; }
.cs-hero-home-container { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; }
.cs-hero-home-wordmark { position: absolute; left: 35px; top: 169px; width: 471px; height: auto; }
.cs-hero-home-tagline { position: absolute; left: 67px; top: 280px; width: 421px; margin: 0; text-align: center; font-family: 'DM Sans'; font-weight: 300; font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; color: #000; }
.cs-hero-home-body { position: absolute; left: -35px; top: 336px; width: 640px; text-align: center; }
.cs-hero-home-body .cs-intro-text { text-align: center; max-width: none; margin: 0 0 24px; }
.cs-hero-home-btn { position: absolute; left: 220px; top: 595px; }
.cs-hero-home-image { position: absolute; left: 634px; top: 0; width: 687px; height: 844px; overflow: hidden; }
.cs-hero-home-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.86; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cs-h1 {
  font-family: 'KT Quantum Light';
  font-weight: 400;
  font-size: 55px;
  letter-spacing: 0.02em;
  color: #000;
  margin: 0 0 24px;
}
.cs-intro-text {
  font-family: 'DM Sans';
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: #000;
  max-width: 420px;
  margin: 0 0 24px;
}
.cs-hero-list {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 20px;
  font-family: 'DM Sans';
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: #000;
  max-width: 420px;
}
.cs-hero-list li { margin-bottom: 8px; }
.cs-hero-wordmark { margin: 0 0 28px; }

/* The "lift" section: sits right after the hero in normal flow,
   scrolls over the pinned hero. */
.cs-lift { position: relative; z-index: 10; background: #F8F8F4; }

/* ---- Standard content sections --------------------------------
   Shared 1200px container. Paragraph text gets its own readable
   max-width inside that wider container. */
.cs-section { max-width: 1200px; margin: 0 auto; text-align: center; padding: 110px 60px; }
.cs-section-tight { padding-top: 0; }
.cs-section-inner { max-width: 760px; margin: 0 auto; }
.cs-h2 { font-family: 'KT Quantum Light'; font-weight: 400; font-size: 31px; text-align: center; color: #000; margin: 0 0 28px; }
.cs-body { font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.7; color: rgba(0, 0, 0, 0.8); text-align: left; margin: 0 0 20px; }
.cs-list { list-style: disc; margin: 0 0 20px; padding: 0 0 0 22px; font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.7; color: rgba(0, 0, 0, 0.8); text-align: left; }
.cs-list li { margin-bottom: 10px; }
.cs-body-note { font-style: italic; }

/* ---- Our Story (about): photo left in an organic blob shape, text
   right. The blob uses an asymmetric border-radius (a common CSS trick
   for an irregular, rounded "abstract" frame — not a true SVG shape,
   just four very different corner radii). The blob's own aspect ratio
   matches the source photo's (1206x1487) so object-fit: cover only
   trims empty sky/road at top and bottom — never the family at the
   sides, who fill nearly the photo's full width. ---- */
.cs-story-section { max-width: 1320px; margin: 0 auto; padding: 110px 60px; display: flex; align-items: center; gap: 70px; }
.cs-story-photo-wrap { flex: 0 0 437px; }
.cs-story-photo-blob { position: relative; width: 437px; height: 538px; border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%; overflow: hidden; background: #EDE7DC; display: flex; align-items: center; justify-content: center; }
.cs-story-photo-blob img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.cs-story-text { flex: 1 1 auto; text-align: left; }
.cs-story-text .cs-h2 { text-align: left; }
.cs-story-text .cs-body { text-wrap: pretty; }

/* Our Story, full-bleed variant: photo runs edge to edge on the left
   (mirrors the home page's Our Approach photo, which runs full-bleed
   right — see .cs-approach-split/.cs-approach-text/.cs-house-rotator
   above), a plain rectangular photo instead of the blob shape, text
   column keeps the site's normal right margin. */
.cs-story-section-full { display: flex; align-items: center; gap: 70px; padding: 110px 60px; }
.cs-story-photo-full { position: relative; flex: 0 0 33%; height: 460px; overflow: hidden; background: #EDE7DC; border-radius: 4px; }
.cs-story-photo-full img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.cs-story-text-full { flex: 1 1 auto; min-width: 0; text-align: left; padding-right: max(0px, calc(50vw - 600px)); }
.cs-story-text-full .cs-h2 { text-align: left; }
.cs-story-text-full .cs-body { text-align: left; text-wrap: pretty; }

/* ---- Team pair (about): Angelica and Giovanni side by side, each
   column its own photo-beside-text row (not stacked) so the photo
   anchors the outer edge of the section and text fills the wide
   middle space — both photos left, text right. Two full-width
   columns rather than two narrow centered blocks gives each side
   real breathing room instead of both being squeezed toward the
   page center. Name + title sit centered above the bio paragraph
   (inside .cs-story-text), not under the photo. */
/* align-items: flex-start (not center) on both levels — anchors
   photo and name/title to the same top edge across both columns
   regardless of how many lines each bio wraps to, so Angelica's and
   Giovanni's name/title land at identical heights instead of drifting
   based on their own column's content length. */
.cs-team-pair { display: flex; align-items: flex-start; gap: 50px; }
.cs-team-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 28px; }
.cs-team-col .cs-story-photo-wrap { flex: 0 0 auto; }
.cs-team-col .cs-story-photo-blob { width: 290px; height: 355px; margin: 0 auto; }
.cs-team-col .cs-story-text { flex: 1 1 auto; min-width: 0; text-align: left; }
.cs-team-col .cs-story-text .cs-body { text-align: left; margin: 0; }
/* Name + title use an absolute pixel line-height (not a font-size
   multiplier) — KT Quantum Light's own internal leading is tall
   enough that even a tight multiplier like 1.1 still left visible
   whitespace; a fixed px value gives exact control regardless of the
   font's metrics. Left-aligned to share the bio's own left edge
   rather than centered against the full (wider) column width, which
   is what made them visually drift left of where the bio's text
   actually sits. */
.cs-story-text .cs-team-name { text-align: left; font-size: 22px; line-height: 24px; margin: 0 0 4px; }
.cs-team-title {
  margin: 0 0 14px; text-align: left; line-height: 16px;
  font-family: 'DM Sans'; font-weight: 300; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.6);
}

/* ---- Our Approach (index) --------------------------------------- */
.cs-approach-section { position: relative; background: #F8F8F4; padding: 110px 0; }
.cs-shape-divider { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; line-height: 0; overflow: hidden; z-index: 2; }
.cs-shape-divider svg { display: block; position: relative; left: 50%; width: calc(100% + 1.3px); height: 60px; transform: translateX(-50%); }
.cs-shape-divider svg path { fill: #EDE7DC; }

/* Chevron dividers on the About page (Our Story → Our Values →
   Our Team): same mechanism as .cs-shape-divider above — nested as
   the LAST CHILD of the section it overlaps (not a standalone
   element between two sections, which left a rendering seam since
   there was no shared edge to sit flush against). Needs
   position: relative on the parent section for the divider's
   position: absolute to anchor to bottom: -1px of that section,
   exactly like .cs-approach-section does on the home page.
   -cream announces the #EDE7DC Our Values background coming next;
   -linen announces the #F8F8F4 background Our Team returns to. */
.cs-story-section-with-divider { position: relative; }
.cs-shape-divider-cream svg path { fill: #EDE7DC; }
.cs-shape-divider-linen svg path { fill: #F8F8F4; }

/* ---- Boutique Senior Living / About the House (index) ---------------
   Text column keeps the site's normal left margin; photo column runs
   full-bleed to the true right edge of the viewport (not just the
   1200px content container) for an airy, breathing-room feel. */
.cs-approach-split { display: flex; align-items: center; gap: 70px; }
.cs-approach-text { flex: 1 1 0; min-width: 0; padding-left: max(0px, calc(50vw - 600px)); }
.cs-approach-text .cs-btn { margin-top: 12px; }
.cs-h2-left { text-align: left; }
.cs-approach-text .cs-body { text-align: left; text-wrap: pretty; }


.cs-house-rotator { position: relative; flex: 1 1 auto; height: 520px; overflow: hidden; background: #EDE7DC; }
.cs-house-rotator-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 1s ease;
}
.cs-house-rotator-slide-active { opacity: 1; }
.cs-house-rotator-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-house-photo-placeholder { font-family: 'DM Sans'; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.35); }

/* ---- Care & Services summary grid (index) ------------------------ */
.cs-services-section { position: relative; background: #EDE7DC; padding: 60px 60px 70px; }
.cs-services-inner { max-width: 1200px; margin: 0 auto; }
.cs-services-title { text-align: center; font-family: 'KT Quantum Light'; font-weight: 400; font-size: 31px; color: #000; margin: 0 0 32px; }
.cs-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0 0 32px; }
.cs-service-card-photo { position: relative; width: 100%; height: 200px; margin: 0 0 18px; border-radius: 2px; overflow: hidden; }
.cs-service-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-service-card h3 { font-family: 'KT Quantum Light'; font-weight: 400; font-size: 20px; color: #000; margin: 0 0 10px; }
.cs-service-card p { font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.55; color: rgba(0, 0, 0, 0.75); margin: 0; }
.cs-services-cta { text-align: center; }
.cs-services-cta .cs-btn { border-color: #000; color: #000; }

/* ---- Service rows (care-services detail) --------------------------
   Full-bleed split, one side a full-height photo (purely visual, no
   text ever overlays it), the other a solid-color text panel. Replaces
   the old .cs-cat-row white-text-on-photo pattern, which had
   inconsistent contrast depending on the photo underneath. */
.svc-row { display: flex; align-items: stretch; height: 660px; }
.svc-row:nth-child(even) { flex-direction: row-reverse; }
.svc-row + .svc-row { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.svc-photo { flex: 0 0 50%; position: relative; overflow: hidden; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-text { flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 32px 90px; background: #F8F8F4; }
.svc-row:nth-child(2) .svc-text { background: #FFFCF6; }
.svc-text .cs-h2 { margin: 0 0 14px; }
.svc-text .cs-body { margin: 0 0 20px; }

/* Our Home: short facts, two-column bullet grid */
.svc-home-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 4px 32px; margin: 0; padding: 0; list-style: none; font-family: 'DM Sans'; font-weight: 300; font-size: 17px; color: rgba(0, 0, 0, 0.8); line-height: 1.5; text-align: left; }
.svc-home-grid li { position: relative; padding-left: 20px; }
.svc-home-grid li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #7A9BB5; }
/* Our Home: single column so every item — including the longer ones
   like "5 Beautifully Designed Bedrooms" — stays on exactly one line.
   A multi-column grid forced several items to wrap, breaking alignment. */
.svc-home-grid-3col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 8px; }

/* Our Home section: wider photo (shows the full landscape shot instead
   of a heavily cropped narrow column), text shifted right to fill the
   remaining space. Scoped so it doesn't affect Our Story on About. */
.svc-home-section { gap: 50px; }
.svc-home-photo { flex: 0 0 48%; height: 360px; }
.svc-home-photo img { object-position: center center; }

/* Additional Support: a narrow vertical photo strip on the edge
   (matches the brochure's panel treatment) instead of a 50/50 split —
   text panel takes up the majority of the row. */
.svc-photo-strip { flex: 0 0 26%; }
/* These two portrait photos (724x2172) are extremely tall relative to
   their box at every breakpoint, and the box's own aspect ratio flips
   from tall-narrow (desktop strip) to short-wide (mobile stacked band)
   — object-fit: cover crops a completely different amount of the image
   at each, so the vertical anchor needs separate values per breakpoint
   rather than one position working everywhere. */
.cs-photo-faq { object-position: center 20%; }
.cs-photo-additional-support { object-position: center 15%; }
.svc-text-wide { flex: 1 1 auto; }

/* FAQ row: taller than the tightest-fit version so there's room to
   read a couple of expanded answers, but the list itself scrolls
   internally (see .cs-faq-list-scroll) so expanding every question at
   once never gets clipped or forces the whole row to grow unbounded.
   Also forced to row (not row-reverse) so the photo strip sits on the
   left and text on the right, overriding the even/odd row default. */
.svc-row.svc-row-faq { height: 560px; flex-direction: row; scroll-margin-top: 100px; }

/* Personalized Care & Support: tan background, photo strip on the
   right (placeholder until a real photo is provided). Descriptions
   are sized down slightly and kept to one line — the fuller-width
   .svc-support-list used in Additional Support can afford 17px, but
   this row's narrower text column (photo strip takes 26%) cannot. */
.svc-row.svc-row-tan { background: #EDE7DC; flex-direction: row; }
.svc-row-tan .svc-text-wide { background: transparent; }
.svc-photo-placeholder { background: repeating-linear-gradient(45deg, #D8D0C2, #D8D0C2 10px, #EDE7DC 10px, #EDE7DC 20px); display: flex; align-items: center; justify-content: center; }

/* Comprehensive Services: bold label + short inline description */
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.svc-list li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.svc-list-label { font-family: 'DM Sans'; font-weight: 700; font-size: 17px; color: #000; }
.svc-list-desc { font-family: 'DM Sans'; font-weight: 300; font-size: 17px; color: rgba(0, 0, 0, 0.65); margin-left: 6px; }

/* Additional Support: bold label on its own line + fuller description */
.svc-support-list { list-style: none; margin: 0; padding: 0; }
.svc-support-list li { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.svc-support-list li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.svc-support-list-centered { max-width: 1100px; margin: 0 auto; padding: 0 60px; text-align: left; display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
.svc-support-list-centered li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.svc-support-list-centered li:nth-child(1), .svc-support-list-centered li:nth-child(2) { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.svc-support-label { font-family: 'DM Sans'; font-weight: 700; font-size: 17px; color: #000; display: block; margin-bottom: 4px; }
.svc-support-desc { font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.7; color: rgba(0, 0, 0, 0.7); }

/* ---- Our Rooms carousel (index) ----------------------------------
   Light wash over the seashell/plaster photo (not a dark scrim) plus
   near-opaque white cards and dark text — matches the Get in Touch
   page's card treatment (.cs-gform-section/.cs-gform-card) instead of
   the frosted dark-glass look this section used before. */
.cs-rooms-section { position: relative; padding: 60px 0 70px; background-size: cover; background-position: center; }
.cs-rooms-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 248, 244, 0.7), rgba(237, 231, 220, 0.8)); }
.cs-rooms-title { position: relative; z-index: 1; text-align: center; font-family: 'KT Quantum Light'; font-weight: 400; font-size: 31px; color: #000; margin: 0 0 12px; }
.cs-rooms-sub { position: relative; z-index: 1; text-align: center; font-family: 'DM Sans'; font-weight: 300; font-size: 17px; color: rgba(0, 0, 0, 0.7); margin: 0 0 32px; }
.cs-rooms-track { position: relative; z-index: 1; display: flex; gap: 24px; overflow-x: auto; padding: 4px 60px 20px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cs-room-card { scroll-snap-align: start; flex: 0 0 384px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
.cs-room-photo { height: 190px; display: flex; align-items: center; justify-content: center; font-family: 'KT Quantum Light'; font-weight: 400; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0, 0, 0, 0.4); background-size: cover; background-position: center; }
.cs-room-body { padding: 24px 24px 28px; }
.cs-room-name { font-family: 'KT Quantum Light'; font-weight: 400; font-size: 20px; color: #000; margin: 0 0 10px; }
.cs-room-name-note { font-family: 'DM Sans'; font-weight: 300; font-size: 13px; color: rgba(0, 0, 0, 0.6); }
.cs-room-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-family: 'DM Sans'; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #3D6B8E; }
.cs-room-tag::after { content: '\00b7'; margin-left: 10px; font-size: 18px; line-height: 0; color: rgba(0, 0, 0, 0.3); position: relative; top: 2px; }
.cs-room-tag:last-child::after { content: ''; margin: 0; }
.cs-room-desc { font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, 0.75); margin: 0; }

/* ---- FAQ accordion (index) ---------------------------------------
   Native <details>/<summary> — no JS required for open/close. Styled
   to match Additional Support's bold-label list (same photo-strip
   row layout, same 17px DM Sans type) instead of the old oversized
   110px ghost-text title treatment. */
.cs-faq-list { margin: 0; }
.cs-faq-list-scroll { max-height: 400px; overflow-y: auto; padding-right: 12px; }
.cs-faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cs-faq-item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.cs-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; font-family: 'DM Sans'; font-weight: 700; font-size: 17px; color: #000; }
.cs-faq-item summary::-webkit-details-marker { display: none; }
.cs-faq-icon { flex: 0 0 auto; position: relative; width: 14px; height: 14px; }
.cs-faq-icon::before, .cs-faq-icon::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.6); transition: transform 0.25s ease; }
.cs-faq-icon::before { top: 50%; left: 0; width: 14px; height: 1px; transform: translateY(-50%); }
.cs-faq-icon::after { left: 50%; top: 0; width: 1px; height: 14px; transform: translateX(-50%); }
.cs-faq-item[open] .cs-faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.cs-faq-answer { padding: 0 0 14px; margin: 0; font-family: 'DM Sans'; font-weight: 300; font-size: 17px; line-height: 1.7; color: rgba(0, 0, 0, 0.7); }
.cs-faq-cta { display: inline-block; margin: 0 0 14px; font-family: 'DM Sans'; font-weight: 700; font-size: 15px; color: #3D6B8E; text-decoration: none; transition: opacity 0.3s ease; }
.cs-faq-cta:hover { opacity: 0.7; }

/* ---- Parallax image bands ----------------------------------------
   Background photo drifts slower than page scroll. See js/main.js. */
.cs-parallax-band { position: relative; height: 694px; overflow: hidden; background: #F8F8F4; }
.cs-parallax-band img { position: absolute; top: 0; left: 0; width: 100%; height: 145%; object-fit: cover; will-change: transform; }

/* ---- Our Values (about) -------------------------------------------
   Compact table: name + description per row, hairline dividers.
   Tighter padding/gap than the original version so 5 rows don't add
   up to a huge section. */
.cs-values-section { position: relative; background: #EDE7DC; padding: 70px 60px 80px; }

/* ---- Team (about) ---------------------------------------------------
   Section wrapper — see .cs-team-pair/.cs-team-col above for the
   Angelica/Giovanni layout. */
.cs-team-section { position: relative; z-index: 10; background: #F8F8F4; padding: 70px 60px; }
.cs-team-inner { max-width: 1200px; margin: 0 auto; }
.cs-team-section .cs-h2 { margin: 0 0 40px; }
.cs-team-photo-placeholder { font-family: 'DM Sans'; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.35); }

/* ---- Get in Touch form (get-in-touch.html) --------------------------- */
.cs-gform-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 170px 40px 100px; overflow: hidden; background: #EDE7DC; }
.cs-gform-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.cs-gform-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 248, 244, 0.55), rgba(237, 231, 220, 0.75)); }
.cs-gform-card {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
  padding: 56px 56px 48px;
}
.cs-gform-title { text-align: center; }
.cs-gform-intro { max-width: none; text-align: center; margin: 0 auto 40px; }
.cs-gform { display: flex; flex-direction: column; gap: 22px; }
.cs-gform-row { display: flex; gap: 20px; }
.cs-gform-row .cs-gform-field { flex: 1 1 0; }
.cs-gform-field { display: flex; flex-direction: column; gap: 8px; }
.cs-gform-field label { font-family: 'DM Sans'; font-weight: 300; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); }
.cs-gform-required { color: #8a4a2a; }
.cs-gform-field input, .cs-gform-field textarea {
  font-family: 'DM Sans'; font-weight: 300; font-size: 16px; color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 13px 14px;
  background: #FFF; width: 100%; transition: border-color 0.25s ease;
}
.cs-gform-field input:focus, .cs-gform-field textarea:focus {
  outline: none; border-color: #3D6B8E;
}
.cs-gform-field textarea { resize: vertical; font-family: 'DM Sans'; }

/* Sleek select: native element styled to match text inputs, custom
   chevron via background-image (no JS dropdown needed), brand blue
   focus ring to match the site's Horizon accent color. */
.cs-gform-select-wrap { position: relative; }
.cs-gform-select-wrap select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: 'DM Sans'; font-weight: 300; font-size: 15px; color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 13px 40px 13px 14px;
  background-color: #FFF; width: 100%; cursor: pointer; transition: border-color 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%233D6B8E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.cs-gform-select-wrap select:focus { outline: none; border-color: #3D6B8E; }
.cs-gform-field-other { margin-top: -6px; padding-left: 4px; border-left: 2px solid rgba(61, 107, 142, 0.3); padding-left: 16px; }

/* button.cs-gform-submit (element + class) beats the shared .cs-btn
   rule's black border/text on specificity, regardless of which comes
   later in the file — .cs-btn's border: 1px solid #000 was winning
   the cascade tie since both are single-class selectors and .cs-btn
   is defined after this rule. */
button.cs-gform-submit {
  align-self: center; margin-top: 12px; cursor: pointer;
  background: #3D6B8E; border: none; color: #FFF;
}
button.cs-gform-submit:hover { letter-spacing: 0.2em; background: #345c7a; color: #FFF; }
button.cs-gform-submit:disabled { opacity: 0.6; cursor: default; }
.cs-gform-status { text-align: center; font-family: 'DM Sans'; font-weight: 300; font-size: 14px; margin: 4px 0 0; min-height: 20px; }
.cs-gform-status.cs-gform-status-error { color: #8a2a2a; }
.cs-gform-status.cs-gform-status-success { color: #2a6a3a; }

/* ---- CTA band (every page) ------------------------------------------ */
/* CTA band: same recipe as Get in Touch's form section — light
   seashell photo + light wash gradient behind a near-opaque white
   card, instead of the old flat solid-tan background. */
.cs-cta { position: relative; z-index: 20; overflow: hidden; text-align: center; background: #EDE7DC; padding: 130px 40px; }
.cs-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.cs-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 248, 244, 0.7), rgba(237, 231, 220, 0.8)); }
.cs-cta-card {
  position: relative; z-index: 1; max-width: 680px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
  padding: 56px 56px 48px;
}
.cs-cta-eyebrow { font-family: 'DM Sans'; font-weight: 300; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); margin: 0 0 20px; }
.cs-cta-text { font-family: 'KT Quantum Light'; font-weight: 400; font-size: 31px; line-height: 1.35; color: #000; margin: 0 auto 40px; max-width: 680px; }
.cs-btn-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cs-btn { display: inline-block; padding: 15px 32px; border: 1px solid #000; border-radius: 2px; font-family: 'DM Sans'; font-weight: 300; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #000; text-decoration: none; transition: letter-spacing 0.5s ease; }
.cs-btn:hover { letter-spacing: 0.2em; }
.cs-btn-dark { border-color: #000; color: #000; }

/* ---- Footer (every page) --------------------------------------------
   Real flex layout — no absolute positioning, no separate mobile
   markup. Three columns: page nav | logo + license blurb | contact
   details, divided by hairline rules, matching the original layout. */
/* z-index above the About/Care sticky-pinned hero (position:fixed,
   never releases — see initHeroPin() in js/main.js) so the footer
   renders on top of it instead of the pinned photo bleeding through. */
.site-footer { position: relative; z-index: 30; background: #F8F8F4; padding: 90px 60px 50px; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: stretch; justify-content: space-between; gap: 40px; }
.site-footer-nav { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-right: 40px; border-right: 1px solid rgba(0, 0, 0, 0.12); }
.site-footer-nav a { font-family: 'DM Sans'; font-weight: 300; font-size: 14px; color: #000; text-decoration: none; transition: opacity 0.3s ease; }
.site-footer-nav a:hover { opacity: 0.6; }
.site-footer-brand { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; }
.site-footer-brand img { height: 60px; width: auto; }
.site-footer-license { font-family: 'DM Sans'; font-weight: 300; font-size: 13px; line-height: 1.7; color: rgba(0, 0, 0, 0.75); max-width: 300px; margin: 0; }
.site-footer-contact { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 40px; border-left: 1px solid rgba(0, 0, 0, 0.12); font-family: 'DM Sans'; font-weight: 300; font-size: 14px; text-align: left; }
.site-footer-contact p { margin: 0; }
.site-footer-contact a { text-decoration: none; color: #000; transition: opacity 0.3s ease; }
.site-footer-contact a:hover { opacity: 0.6; }
.site-footer-contact-line { display: flex; align-items: center; gap: 8px; }
.site-footer-icon { flex: 0 0 auto; width: 14px; height: 14px; color: rgba(0, 0, 0, 0.55); }
.site-footer-bottom { max-width: 1200px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12); text-align: center; font-family: 'DM Sans'; font-weight: 300; font-size: 12px; color: rgba(0, 0, 0, 0.6); }

/* ============================================================
   Nav collapse (tablet + mobile, <=1400px)
   Hamburger replaces the inline link row; tapping it toggles
   .site-nav-links-open (set in js/main.js), which switches the links
   container from display:none to a full-screen translucent overlay
   with large centered links — shared by both the tablet and mobile
   breakpoints below since the interaction is identical at both sizes.
   ============================================================ */
@media (max-width: 1400px) {
  .site-nav-toggle { display: block; }
  /* backdrop-filter on .site-nav-glass (applied once you scroll past
     the hero) creates a new containing block for any descendant
     position:fixed element — including .site-nav-links below. That
     silently shrinks the "full-screen" menu overlay down to the nav
     bar's own small box instead of the viewport, but only once
     you've scrolled (i.e. the nav has gone "glass"), which is why the
     bug only showed up away from the very top of the page. Drop the
     nav's own blur while the menu is open so .site-nav-links regains
     a real viewport-relative fixed position. */
  .site-nav.site-nav-menu-open {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-nav-links {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    z-index: 610;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 36px;
    background: rgba(248, 248, 244, 0.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    /* On a short viewport (small phone, landscape, browser chrome
       eating vertical space), 3 links + gaps centered via
       justify-content: center can be taller than the screen — with no
       scroll, the overflow just clips silently and the first link(s)
       vanish above the visible top edge. Let it scroll instead of
       clipping, and pad top/bottom so items never sit flush against
       the edge even when scrolled all the way. */
    overflow-y: auto;
    padding: 100px 24px 40px;
    box-sizing: border-box;
  }
  .site-nav-links.site-nav-links-open { display: flex; }
  .site-nav-links a { font-size: 16px; text-shadow: none; flex: 0 0 auto; }
  .site-nav-home { display: block; }
  .site-nav-cta { padding: 14px 30px; border: 1px solid #000; border-radius: 2px; }
}

/* ============================================================
   Tablet (iPad and similar, 744-1400px)
   Covers real iPad portrait widths across the current lineup — iPad
   Mini (744px) through iPad Pro 12.9" (1024px) — plus landscape
   iPads up to ~1400px (covers landscape iPads, which run 1133-1366px wide and previously fell through to the desktop layout). (An earlier version of this breakpoint started
   at 901px, which only caught the largest iPad in portrait; smaller
   iPads fell through to the phone-stacked mobile layout instead.)

   The desktop hero layout below relies on hardcoded pixel
   left/top/width coordinates sized for a 1200px container — on an
   iPad-width viewport that container shrinks but the
   absolutely-positioned children keep their full-size offsets, so
   text and images spill outside the visible frame. Reuse a
   side-by-side flow layout here instead of the fixed-coordinate one.

   min-height uses min(100svh, 900px) rather than a bare 100vh/100svh:
   iPad Pro 12.9" is much taller (1366px) than an iPad Mini (1133px),
   and letting the hero fill the full viewport height on the tallest
   device left a lot of empty space below the content since nothing
   was set up to grow to fill it. Capping the height keeps the hero
   proportioned to its content across all iPad heights instead of
   stretching to match whatever screen it's on.

   Typography is scaled here too — the tablet block previously only
   resized hero-specific classes, leaving h1/h2 headlines at desktop's
   1200px-container sizing on a much narrower column. Sized roughly
   midway between mobile and desktop, matching the same size ratio
   already used at the mobile breakpoint. ============================================================ */
@media (min-width: 744px) and (max-width: 1400px) {
  .cs-h1 { font-size: 44px; }
  .cs-h2 { font-size: 28px; }
  .cs-hero-stage { height: auto; }
  .cs-hero, .cs-hero.cs-hero-fixed { position: relative !important; flex-direction: column; min-height: auto; height: auto; padding-top: 90px; }
  .cs-hero-spacer { display: none !important; }
  .cs-hero-text { flex: 1 1 auto; padding: 40px 50px; }
  .cs-hero-image { flex: 1 1 auto; height: 480px; width: 100%; }
  .cs-hero-img-bg { top: 0; left: 0; right: 0; width: 100%; height: 100%; }
  .cs-hero-img-fg { display: none; }

  .cs-hero-image-staggered { height: auto; padding: 40px; box-sizing: border-box; }
  .cs-hero-img-stagger { position: static; width: 70%; height: auto; display: block; }
  .cs-hero-img-stagger-1 { margin: 0; }
  .cs-hero-img-stagger-2 { margin: -80px 0 0 auto; }

  .cs-hero-home {
    height: auto; min-height: min(100svh, 900px); min-height: min(100vh, 900px); overflow: visible;
    display: flex; align-items: center; padding: 110px 0 40px;
  }
  /* Side-by-side on iPad (text left, photo right) rather than the
     mobile stacked layout — enough width at 744-1400px for a split,
     and stacking made the hero read as too tall/stretched. The photo
     uses aspect-ratio instead of a hard crop so nothing gets cut off,
     just scaled to fit the available column width. */
  .cs-hero-home-container {
    max-width: none; width: 100%; height: auto; padding: 0 50px;
    display: flex; align-items: center; gap: 48px;
  }
  .cs-hero-home-text-col { flex: 1 1 0; min-width: 0; }
  .cs-hero-home-image { position: static; flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 3 / 4; margin: 0; border-radius: 6px; }
  .cs-hero-home-wordmark { position: static; display: block; width: 100%; max-width: 340px; margin: 0 0 20px; }
  .cs-hero-home-tagline { position: static; display: block; width: 100%; text-align: left; margin: 0 0 24px; }
  .cs-hero-home-body { position: static; width: 100%; text-align: left; margin: 0 0 28px; }
  .cs-hero-home-body .cs-intro-text { text-align: left; }
  .cs-hero-home-btn { position: static; display: inline-block; margin: 0 0 40px; }
  .cs-intro-text, .cs-hero-list { max-width: none; }
}

/* Home hero, iPad portrait only: the side-by-side split above reads
   well in landscape (short, wide viewport), but in portrait the
   forced min-height fills the whole tall screen while the
   now-narrower squeezed columns run out of content well before that,
   leaving a block of empty space at the bottom. Stack text above
   image instead, same pattern as mobile — no forced full-screen
   height, so the section is only ever as tall as its own content. */
@media (min-width: 744px) and (max-width: 1400px) and (orientation: portrait) {
  .cs-hero-home {
    height: auto; min-height: auto; overflow: visible;
    display: block; padding: 110px 0 40px;
  }
  .cs-hero-home-container { display: block; padding: 0 50px; }
  .cs-hero-home-text-col { text-align: center; }
  .cs-hero-home-wordmark { max-width: 400px; margin: 0 auto 20px; }
  .cs-hero-home-tagline { text-align: center; }
  .cs-hero-home-body { text-align: center; margin: 0 auto 28px; }
  .cs-hero-home-body .cs-intro-text { text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; }
  .cs-hero-home-btn { display: inline-block; margin: 0 auto 40px; }
  .cs-hero-home-image {
    flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 auto;
  }
}

@media (min-width: 744px) and (max-width: 1400px) {
  /* Service rows: stack photo above text at iPad width — the wide
     90px side padding gets cramped once the split narrows. */
  .svc-row, .svc-row:nth-child(even) { flex-direction: column; height: auto; }
  .svc-photo { flex: 0 0 auto; width: 100%; height: 240px; }
  .svc-text { padding: 40px 50px; }
  .svc-photo-strip { height: 420px; }
  .cs-photo-faq { object-position: center 30%; }
  .cs-photo-additional-support { object-position: center 27%; }
  .cs-photo-services { object-position: center 35%; }
  .svc-home-grid, .svc-home-grid-3col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .svc-home-photo { width: 100%; height: 260px; }
  .svc-row-tan .svc-support-desc, .svc-row-tan .svc-support-label { white-space: normal; font-size: 17px; }
  .svc-photo-placeholder { height: 200px; }
  /* Our Comprehensive Services (svc-row-tan) has text before photo in
     the DOM (needed for the desktop row-reverse layout), so the
     generic column stacking above puts the photo last — reverse it
     here so photo still leads on mobile like every other row. */
  .svc-row.svc-row-tan { flex-direction: column-reverse; }

  /* Our Story: stack photo above text at iPad width — the 437px blob
     + text side-by-side has no room to breathe once the 1200px
     container shrinks to tablet width. */
  .cs-story-section { flex-direction: column; text-align: center; padding: 60px 50px; gap: 32px; }
  .cs-story-photo-wrap { flex: 0 0 auto; }
  .cs-story-photo-blob { width: 340px; height: 419px; margin: 0 auto; }
  .cs-story-text { text-align: center; }
  .cs-story-text .cs-h2 { text-align: center; }

  /* Our Story full-bleed variant: a 33%-width photo has no room to
     breathe at tablet width either — stack it full-width, text
     first. The photo is the first child in markup (it has to lead
     for the desktop full-bleed-left layout), so column-reverse flips
     the visual order to put it after the text/heading instead of
     before, matching the mobile treatment below. */
  .cs-story-section-full { flex-direction: column-reverse; padding: 60px 50px; gap: 32px; }
  .cs-story-photo-full { flex: 0 0 auto; width: 100%; height: 340px; }
  .cs-story-text-full { text-align: center; padding: 0; }
  .cs-story-text-full .cs-h2 { text-align: center; }
  .cs-story-text-full .cs-body { text-align: center; }
  .cs-story-section-full.svc-home-section { flex-direction: column; }

  /* Team pair: stack Angelica/Giovanni vertically at iPad width — two
     380px columns plus gap don't fit side by side once the container
     narrows this much. */
  .cs-team-pair { flex-direction: column; align-items: center; gap: 60px; }
  /* .cs-team-col itself keeps its row layout (photo left, text
     right) at this width, but align-items: center on the pair above
     can shrink each column to content width — pin the name/title
     explicitly left so nothing drifts centered. */
  .cs-team-col .cs-story-text .cs-team-name { text-align: left; }
  .cs-team-col .cs-team-title { text-align: left; }

  /* Our Approach: the desktop left padding formula
     (calc(50vw - 600px)) is tuned for the 1200px content container
     and resolves to 0px at every tablet width up to ~1366px, leaving
     the text flush against the true screen edge with no breathing
     room. Use a fixed padding here instead. */
  .cs-approach-text { padding-left: 50px; }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 743px) {
  .site-nav { padding: 20px 24px; }
  .site-nav-logo img { height: 36px; }
  .site-nav-links.site-nav-links-open { gap: 30px; }
  .site-nav-links.site-nav-links-open a { font-size: 15px; }

  /* Care & Services hero photo: crop is anchored fully left on
     desktop (object-position: left center, set inline) to show the
     dining table; at mobile crop width that same anchor shows too
     much of the wood accent wall on the left edge. Shift the visible
     crop right (toward center) by ~20%. Needs !important since an
     inline style attribute otherwise always wins over a class rule
     regardless of specificity or source order. */
  .cs-hero-dining-photo { object-position: 20% center !important; }

  .cs-hero-stage { height: auto; }
  .cs-hero, .cs-hero.cs-hero-fixed { position: relative !important; flex-direction: column; min-height: auto; height: auto; padding-top: 70px; }
  .cs-hero-spacer { display: none !important; }
  .cs-hero-text { flex: 1 1 auto; padding: 40px 24px; }
  .cs-hero-image { flex: 1 1 auto; height: 400px; width: 100%; }
  .cs-hero-img-bg { top: 0; left: 0; right: 0; width: 100%; height: 100%; }
  .cs-hero-img-fg { display: none; }

  .cs-hero-image-staggered { height: auto; padding: 24px; box-sizing: border-box; }
  .cs-hero-img-stagger { position: static; width: 85%; height: auto; display: block; }
  .cs-hero-img-stagger-1 { margin: 0 0 0 0; }
  .cs-hero-img-stagger-2 { margin: -60px 0 0 auto; }

  /* Mobile: the original's absolute-position coordinates were tuned
     for Showit's own runtime JS to re-layout at the mobile breakpoint;
     that JS never runs in this static rebuild (same situation as the
     footer — see the note in about.html), so squeezing the desktop
     coordinates into a narrow viewport just overlaps everything.
     Stack in flow instead: photo on top, text centered below.

     min-height uses 100svh ("small viewport height," excludes browser
     chrome like the URL bar) with a 100vh fallback for older
     browsers, so the hero reliably fills the visible screen across
     iPhone sizes instead of a fixed pixel guess that over/undershoots
     depending on the device. The photo uses aspect-ratio instead of a
     fixed height so it scales proportionally rather than cropping
     differently per screen size. */
  .cs-hero-home {
    height: auto; min-height: 100svh; min-height: 100vh; overflow: visible;
    display: flex; align-items: center; padding: 90px 0 30px;
  }
  .cs-hero-home-container { max-width: none; width: 100%; height: auto; padding: 0 24px; text-align: center; }
  .cs-hero-home-image { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 28px; border-radius: 6px; }
  .cs-hero-home-wordmark { position: static; display: block; width: 100%; max-width: 320px; margin: 0 auto 20px; }
  .cs-hero-home-tagline { position: static; display: block; width: 100%; margin: 0 0 24px; }
  .cs-hero-home-body { position: static; width: 100%; margin: 0 auto 24px; }
  .cs-hero-home-body .cs-intro-text { max-width: 420px; margin-left: auto; margin-right: auto; text-wrap: balance; }
  .cs-hero-home-btn { position: static; display: inline-block; margin: 0 0 32px; }
  .cs-h1 { font-size: 36px; }
  .cs-intro-text, .cs-hero-list { max-width: none; }

  .cs-section { padding: 70px 24px; }
  .cs-h2 { font-size: 26px; }

  .cs-story-section { flex-direction: column; padding: 70px 24px; gap: 32px; text-align: center; }
  .cs-story-photo-wrap { flex: 0 0 auto; }
  .cs-story-photo-blob { width: 322px; height: 397px; margin: 0 auto; }
  .cs-story-text { text-align: center; }
  .cs-story-text .cs-h2 { text-align: center; }
  .cs-story-text .cs-body { text-align: center; }

  /* Our Story full-bleed variant: text first (full width, fully
     visible), photo stacked below it — same pattern as Our Approach
     on the home page. The photo is the first child in markup (it's
     full-bleed on desktop, so it has to lead for the left-edge
     layout), so column-reverse flips the visual order to put it
     after the text without changing the HTML. */
  .cs-story-section-full { flex-direction: column-reverse; padding: 60px 24px; gap: 28px; }
  .cs-story-photo-full { flex: 0 0 auto; width: 100%; height: 260px; }
  .cs-story-text-full { width: 100%; text-align: center; padding: 0; }
  .cs-story-text-full .cs-h2 { text-align: center; }
  .cs-story-text-full .cs-body { text-align: center; }
  /* Our Home: photo leads in markup and should stay first visually
     (unlike Our Story, which reverses to put photo after text). */
  .cs-story-section-full.svc-home-section { flex-direction: column; }

  .cs-approach-section { padding: 70px 0 90px; }
  .cs-approach-split { flex-direction: column; gap: 36px; }
  .cs-approach-text { padding-left: 24px; padding-right: 24px; }
  .cs-h2-left { text-align: center; }
  .cs-approach-text .cs-body { text-align: center; }
  .cs-approach-text .cs-btn { margin-left: auto; margin-right: auto; display: table; }
  .cs-house-rotator { flex: 1 1 auto; width: 100%; height: 300px; }

  .cs-services-section { padding: 70px 24px; }
  .cs-services-title { font-size: 26px; margin-bottom: 40px; }
  .cs-services-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-service-card-photo { height: 220px; }

  /* Service rows: stack photo above text, simple padding — no
     overlap-card treatment needed since photos no longer carry text. */
  .svc-row, .svc-row:nth-child(even) { flex-direction: column; height: auto; }
  .svc-photo { flex: 0 0 auto; width: 100%; height: 200px; }
  .svc-text { padding: 32px 24px; }
  .cs-photo-faq { object-position: center 30%; }
  .cs-photo-additional-support { object-position: center 30%; }
  .cs-photo-services { object-position: center 33%; }
  .svc-home-grid, .svc-home-grid-3col { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .svc-home-photo { width: 100%; height: 260px; }
  .svc-row.svc-row-tan { flex-direction: column-reverse; }
  .svc-row-tan .svc-support-desc, .svc-row-tan .svc-support-label { white-space: normal; font-size: 17px; }
  .svc-photo-placeholder { height: 180px; }

  .cs-rooms-section { padding: 40px 0 50px; }
  .cs-rooms-title { font-size: 24px; }
  .cs-rooms-track { padding: 4px 24px 16px; gap: 16px; }
  .cs-room-card { flex: 0 0 260px; }


  .cs-parallax-band { height: 400px; }
  /* The parallax drift math (see initParallax() in js/main.js) was
     tuned against the desktop 694px band height, where the image's
     145% oversize gives ~157px of overflow buffer on each side —
     enough to always stay covered by the calculated translateY
     offset. At mobile's shorter 400px band, that same 145% only
     gives ~90px of buffer per side, which isn't enough: the offset
     can shift the image far enough to expose the band's own
     background color at the bottom edge. Oversize further here to
     give mobile a bigger buffer. */
  .cs-parallax-band img { height: 220%; }

  .cs-values-section { padding: 50px 24px 60px; }
  .svc-support-list-centered { padding: 0; grid-template-columns: 1fr; }
  .svc-support-list-centered li:nth-child(2) { border-top: none; }

  .cs-team-section { padding: 60px 24px; }
  .cs-team-pair { flex-direction: column; gap: 48px; }
  .cs-team-col { flex-direction: column; align-items: center; gap: 20px; }
  /* Photo (fixed width, centered by its own margin) stays centered;
     name/title/bio left-align as one consistent text block instead
     of centering under the photo. */
  .cs-team-col .cs-story-text { width: 100%; max-width: 320px; text-align: left; }
  .cs-team-col .cs-story-text .cs-body { text-align: left; }
  .cs-team-col .cs-story-text .cs-team-name { text-align: left; }
  .cs-team-col .cs-team-title { text-align: left; }

  .cs-gform-section { padding: 110px 20px 60px; min-height: auto; }
  .cs-gform-card { padding: 36px 24px 32px; }
  .cs-gform-row { flex-direction: column; gap: 22px; }

  .cs-cta { padding: 80px 24px; }
  .cs-cta-text { font-size: 26px; }

  .site-footer { padding: 60px 24px 40px; }
  .site-footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 32px; }
  .site-footer-nav, .site-footer-contact { border: none; padding: 0; align-items: center; text-align: center; }
  .site-footer-nav { order: 3; }
  .site-footer-brand { order: 1; }
  .site-footer-contact { order: 2; }
}