/* ==========================================================================
   CAREFINITY — BASE  (v2)
   --------------------------------------------------------------------------
   Reset, element defaults, layout primitives and the motion system.

   The motion system is the biggest change in v2. The client liked how
   animated the reference sites feel, so reveals here are richer: elements
   rise, images un-mask, headings clip in line by line, and children of a
   .reveal-group stagger. Everything is opt-in per element and everything
   collapses to "just show it" under prefers-reduced-motion or without JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nothing may scroll the page sideways. `clip` rather than `hidden` because
   hidden would make these elements scroll containers and break the sticky
   header and sticky sidebars. */
html, body { overflow-x: clip; max-width: 100%; }

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* The hidden attribute has to win.

   Every component that gets shown and hidden by script — the success panel,
   the error notice, the finder's Back and Submit buttons, the Calendly embed —
   also carries a display in this stylesheet, and an author display beats the
   user agent's [hidden] { display: none }. Without this line all of them are
   visible from the moment the page loads. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Fieldsets are used for every grouped control on this site, so clear the
   user-agent border, padding and min-width rather than fighting them per
   component. min-inline-size:0 is what stops a fieldset refusing to shrink
   inside a grid column. */
fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--c-teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-teal); }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-teal-tint); color: var(--c-teal-darker); }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-10) 0; }

/* --------------------------------------------------------------------------
   2. Headings and text
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--c-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Small headings inside cards read better in the UI sans. */
h4, h5, h6 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  color: var(--c-heading);
}

p { text-wrap: pretty; }
strong, b { font-weight: var(--fw-bold); color: var(--c-heading); }
address { font-style: normal; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--c-muted);
  max-width: 62ch;
}
.lead--on-dark { color: var(--c-on-teal-muted); }

/* Eyebrow — small teal label above a heading, with a short rule. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-teal);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow--on-dark { color: var(--c-on-teal); opacity: .85; }

.section-head { max-width: 58ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head--center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section grounds */
.bg-white     { background: var(--c-white); }
.bg-cream     { background: var(--c-cream); }
.bg-offwhite  { background: var(--c-cream); }
.bg-sand      { background: var(--c-cream-deep); }
.bg-teal-soft { background: var(--c-teal-light); }
.bg-lav-soft  { background: var(--c-lavender-light); }
.bg-teal      { background: var(--c-teal-darker); color: var(--c-on-teal); }

.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--c-on-teal); }
.on-dark p { color: var(--c-on-teal-muted); }

/* Media frames — the aspect ratios the layouts are built on. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-teal-light);
  box-shadow: var(--sh-media);
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* Long-form editorial column (legal pages, blog posts, page content). */
.prose { color: var(--c-text); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  scroll-margin-top: calc(var(--header-h) + var(--sp-8));
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose ul, .prose ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--c-teal); }
.prose a { color: var(--c-teal-dark); font-weight: var(--fw-medium); }

/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-teal);
  color: var(--c-white);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { top: var(--sp-4); color: var(--c-white); }

/* ==========================================================================
   5. MOTION SYSTEM
   --------------------------------------------------------------------------
   Elements carrying .reveal start hidden and are un-hidden by site.js when
   they scroll into view. Variants change how they arrive. A .reveal-group
   staggers its .reveal children automatically via --i, set in JS.
   ========================================================================== */

/* Default: rise and fade. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 58px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Directional variants */
.reveal--left  { transform: translate3d(-72px, 0, 0); }
.reveal--right { transform: translate3d(72px, 0, 0); }
.reveal--scale { transform: scale(.92); }
.reveal--fade  { transform: none; }

/* Image reveal.

   The frame itself uses the ordinary opacity + rise, and the picture inside
   settles out of a slight zoom on top of it. This used to clip the frame with
   clip-path, which looked better but was not fail-safe: if the reveal class
   never arrived the image stayed clipped to nothing and the column read as
   empty. The zoom degrades to "very slightly zoomed image", which nobody
   will ever notice. */
.media.reveal img { transform: scale(1.14); transition: transform 3.4s var(--ease-out); }
.media.reveal.is-visible img { transform: scale(1); }

/* Heading line reveal — each line rises out of its own mask. */
.reveal-lines .line-mask { display: block; overflow: hidden; }
.reveal-lines .line-inner {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1950ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 260ms);
}
.reveal-lines.is-visible .line-inner { transform: none; }

/* Counters and other JS-driven numbers must not jump about before they run. */
.count-up { font-variant-numeric: tabular-nums; }

/* Slow ambient drift for the decorative blobs. */
/* Blob movement. Deliberately larger than a designer's instinct would
   suggest, because a heavily blurred shape needs real travel before the eye
   registers that it is moving at all. */
@keyframes cf-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(7%, -8%, 0) scale(1.14); }
  50%  { transform: translate3d(-5%, -3%, 0) scale(0.94); }
  75%  { transform: translate3d(6%, 7%, 0) scale(1.09); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cf-drift-alt {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  25%  { transform: translate3d(-8%, 6%, 0) scale(0.92); }
  50%  { transform: translate3d(4%, 9%, 0) scale(1.16); }
  75%  { transform: translate3d(-6%, -5%, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1.05); }
}

/* The outline breathes between organic shapes rather than staying a circle. */
@keyframes cf-morph {
  0%   { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
  33%  { border-radius: 42% 58% 38% 62% / 60% 42% 58% 40%; }
  66%  { border-radius: 50% 50% 62% 38% / 40% 60% 40% 60%; }
  100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

@keyframes cf-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.03); }
}
@keyframes cf-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes cf-spin-slow { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Motion opt-outs
   Without JS nothing would ever be un-hidden, so show everything. Under
   prefers-reduced-motion, show everything and stop all ambient movement.
   -------------------------------------------------------------------------- */
.no-js .reveal,
.no-js .reveal-lines .line-inner {
  opacity: 1;
  transform: none;
}
.no-js .media.reveal img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-lines .line-inner {
    opacity: 1 !important;
    transform: none !important;
  }
  .media.reveal img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-drawer, .skip-link, .btn,
  .care-finder, .nav-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}