/*
 * Pure Charlotte — Design System
 * Colors & Type
 *
 * Source of truth: brand colors specified for Pure Charlotte (the Charlotte,
 * NC branch of Pure Air Pros, going independent as its own company) —
 * a single-hue sky-blue family, no separate "logo navy" yet exists.
 *
 * Primary brand color:       #27AFE9
 * Brand light (tint):        #76CEF5
 * Brand mid (muted):         #3EA5D3
 * Brand deep (dark anchor):  #157099
 *
 * Deep/dark anchor tones (800/900/950, used for navbar bg, footer bg,
 * dark-band gradients) are DERIVED by blending the brand deep (#157099)
 * toward the neutral charcoal (#2E3138) from the pureairpros neutral
 * scale — the same way the PAA system this brand was adapted from
 * derived its deepest navy tones from its own logo navy. There is no
 * separate "navy" brand color for Pure Charlotte; the deep anchors ARE
 * the secondary/navy-equivalent role.
 *
 * Type, scale, radii, shadow and motion tokens are inherited from the
 * parent design system this brand was adapted from.
 *
 * Use: link this file from any HTML file in this project to inherit the brand.
 *   <link rel="stylesheet" href="../colors_and_type.css">
 *
 * Plus Jakarta Sans   = body / UI. Rounded, airy — reads clean and modern.
 * Schibsted Grotesk   = display headings. A confident modern grotesque
 *                       that reads as clean-air / clinical-trust; kept
 *                       from the parent system (no Pure Charlotte
 *                       wordmark/type spec exists yet — interim only).
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  /* ── Brand color ───────────────────────────────────────────────── */
  --color-brand-primary:   #27AFE9;   /* Pure Charlotte primary blue. */
  --color-brand-secondary: #1C5E7E;   /* Deep anchor — derived from brand deep (#157099) blended ~28% toward neutral charcoal (#2E3138). Use for navbar bg, footer bg, primary CTA fills, gradient text endpoints on light surfaces. */

  /* Tonal variants of the brand blues, derived for hover/press,
     overlays, tinted surfaces, and the deeper tones needed for accessible
     text/CTA contrast against white. */
  /* Brand-blue scale — deep tones derive from blending the brand-deep
     stop (#157099) toward the neutral charcoal (#2E3138, ~10% sat);
     light tones derive from the brand-light stop (#76CEF5, diluted
     toward white). So the dark gradient reads as "the brand blue,
     deepened toward charcoal" and the pale washes read as "the brand
     light tint, diluted". All stops share the same ~198° hue family. */
  --color-brand-primary-950:   #293E4B;  /* Deepest brand anchor — footer, mission bg, dark band end-stop */
  --color-brand-primary-900:   #234D64;  /* Deep brand anchor — closing CTA bg, surface dark anchor */
  --color-brand-primary-800:   #1C5E7E;  /* The "logo navy"-equivalent deep tone — mid-stop in dark gradient */
  --color-brand-primary-700:   #157099;  /* = brand deep. CTA fill / hover-press / text gradient end on light bg */
  --color-brand-primary-500:   #1F93C5;  /* Mid brand blue — link hover, lifted gradient stop */
  --color-brand-primary-400:   #3EA5D3;  /* = brand mid. Lifted brand blue — soft hover, gradient transition */
  --color-brand-primary-300:   #27AFE9;  /* = brand primary — the brand color itself. */
  --color-brand-primary-200:   #76CEF5;  /* = brand light. Pale sky wash — pill bg, soft surface tint. */
  --color-brand-primary-100:   #DDF3FC;  /* Lightest sky wash — gradient bottom, surface bg. */
  --color-brand-secondary-900: #1F2E38;  /* Deepest anchor — pressed */
  --color-brand-secondary-700: #1C5E7E;  /* Default deep anchor (same as --color-brand-secondary). */
  --color-brand-secondary-500: #1F769E;  /* Lifted anchor — hover */
  --color-brand-secondary-100: #EDF2F5;  /* Pale anchor tint — chip background */

  /* ── Brand RGB channels ────────────────────────────────────────────
     The bare R,G,B triples behind the three brand colors below, exposed
     so any rgba() overlay, scrim, glow or shadow can be composed at an
     arbitrary opacity without re-hardcoding the brand's RGB:
         background: rgba(var(--rgb-navy), 0.04);
         box-shadow: 0 12px 28px -8px rgba(var(--rgb-navy), 0.45);
     Change the brand here and every alpha-composited surface follows.
     Keep each triple in sync with its hex token (noted alongside).
     ("--rgb-navy*" names are kept from the parent system for drop-in
     compatibility — Pure Charlotte has no navy, they hold the deep
     brand-anchor RGB instead.) */
  --rgb-navy:      28, 94, 126;   /* = --color-brand-secondary   #1C5E7E */
  --rgb-navy-deep: 41, 62, 75;    /* = --color-brand-primary-950  #293E4B */
  --rgb-sky:       39, 175, 233;  /* = --color-brand-primary      #27AFE9 */

  /* Brand gradient — the primary → light sweep.
     This is the brand's most recognisable visual stamp; reserve for
     soft surface bands, eyebrow washes, and TEXT GRADIENTS ON DARK
     BACKGROUNDS ONLY. For text on light surfaces, use --gradient-brand-deep. */
  --gradient-brand:        linear-gradient(135deg, #27AFE9 0%, #C7ECFB 100%);

  /* Dark band variant — the brand's ONE dark gradient.
     Starts at the deepest brand anchor, passes through the deep
     "logo navy"-equivalent tone at 60%, then lifts toward a saturated
     mid-blue. The intermediate stop keeps the interpolation inside the
     brand-blue family so neither buttons nor short text spans show
     unrelated hues. */
  --gradient-brand-dark:   linear-gradient(135deg, #293E4B 0%, #1C5E7E 60%, #1F93C5 100%);

  /* Compact-element variant of the dark gradient — same blue family,
     same start point, but TRIMMED before the bright lift. Use for
     buttons, text emphasis (.t-gradient), small numbered circles, bar
     fills, map pin icons — anywhere the rendered element is small
     enough that the lifted end would dominate the visible area. Large
     surfaces keep --gradient-brand-dark so the full sweep still lands
     near the brand primary. */
  --gradient-brand-deep:   linear-gradient(135deg, #293E4B 0%, #1C5E7E 60%, #157099 100%);

  /* Accent gradient — the brand primary, the bright direction.
     For TEXT GRADIENTS ON DARK BACKGROUNDS (e.g. inside the dark
     "Home health specialists" or mission sections). */
  --gradient-accent:       linear-gradient(90deg, #27AFE9 0%, #76CEF5 60%, #EAF7FD 100%);

  /* Hero radial accents — pure brand-hue family. */
  --gradient-hero-accent:  radial-gradient(circle at 80% 20%, rgba(var(--rgb-sky),0.16), transparent 40%);
  --gradient-hero-accent-2:radial-gradient(circle at 12% 90%, rgba(21,112,153,0.18), transparent 45%);

  /* Decorative 64px grid overlay for dark bands — paint on a ::before.
     `--surface-grid-mask` is the default radial fade; sections with a
     different ellipse ratio (hero, closing) override it locally. */
  --surface-grid-image:    linear-gradient(var(--color-white-grid) 1px, transparent 1px),
                           linear-gradient(90deg, var(--color-white-grid) 1px, transparent 1px);
  --surface-grid-size:     64px 64px;
  --surface-grid-mask:     radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);

  /* ── Text ──────────────────────────────────────────────────────── */
  --color-text-primary:    #2E3138;   /* All headings, primary body. <body> color — darkest stop of the pureairpros neutral scale. */
  --color-text-secondary:  #5F6674;   /* Lead paragraphs, descriptions under headings. */
  --color-text-tertiary:   #95A0B2;   /* Muted metadata, eyebrow micro-labels. */
  --color-text-body:       #50555F;   /* Secondary button text. */
  --color-text-inverse:    #ffffff;   /* Text on gradient or dark backgrounds. */

  /* ── Surface ───────────────────────────────────────────────────── */
  --color-surface-app:     #F5F7F8;   /* App background — pureairpros neutral scale's lightest stop. <body> + App root. */
  --color-surface-section: #FAFBFC;   /* Alternate section background. */
  --color-surface-card:    #ffffff;   /* Card backgrounds, navbar fill (under glass). */
  --color-surface-subtle:  #DDF3FC;   /* Icon-chip backgrounds (sky tint). */
  --color-surface-subtle-2:#EDF0F2;   /* Alternate icon-chip background (neutral tint), use sparingly. */

  /* ── Border ────────────────────────────────────────────────────── */
  --color-border-subtle:    #EDF0F2;  /* Default card and divider border. */
  --color-border-default:   #DDE3E8;  /* Section dividers, secondary button border. */
  --color-border-brand-30:  rgba(21, 112, 153, 0.30); /* Card border on hover. */
  --color-border-accent-30: rgba(28, 94, 126, 0.22);   /* Alt accent border, used sparingly. */

  /* ── Status / accent ───────────────────────────────────────────── */
  --color-status-success:  #16a34a;   /* Independent success green (brand is blue-only, so success stays neutral). */
  --color-status-danger:   #f43f5e;   /* rose-500. Comparison-table X marks. */
  --color-accent-gold:     #fbbf24;   /* Star ratings (filled). */

  /* ── Glass / overlays ──────────────────────────────────────────── */
  --color-glass-bg:          rgba(255, 255, 255, 0.85);
  --color-glass-border:      rgba(255, 255, 255, 0.50);
  --color-glass-bg-dark:     rgba(255, 255, 255, 0.10);
  --color-glass-border-dark: rgba(255, 255, 255, 0.20);

  /* ── White-alpha scale (for use on dark sections) ──────────────
     One tier per role. If a new opacity is needed, add a token here
     rather than hand-rolling rgba(255,255,255,X) inline. */
  --color-white-grid:        rgba(255, 255, 255, 0.04);  /* grid-pattern overlays */
  --color-white-surface:     rgba(255, 255, 255, 0.06);  /* glass-card fill on dark */
  --color-white-surface-hi:  rgba(255, 255, 255, 0.10);  /* hover state for above */
  --color-white-border:      rgba(255, 255, 255, 0.14);  /* glass-card border */
  --color-white-border-hi:   rgba(255, 255, 255, 0.28);  /* hover state border */
  --color-white-divider:     rgba(255, 255, 255, 0.18);  /* hero-trust dividers */
  --color-white-outline:     rgba(255, 255, 255, 0.55);  /* ghost-button outline */
  --color-white-text-muted:  rgba(255, 255, 255, 0.72);  /* body text on dark */
  --color-white-text-lead:   rgba(255, 255, 255, 0.85);  /* lead text on dark */

  /* ── Typography: family ────────────────────────────────────────── */
  --font-family-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-display: "Schibsted Grotesk", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;   /* Confident modern grotesque — used for h1/h2 display headings. */
  --font-family-script:  var(--font-family-display);   /* No script accent in the Pure Charlotte interim brand — alias kept for compatibility. */
  /* Legacy alias retained for any code still referencing --font-family-slab. */
  --font-family-slab:    var(--font-family-display);

  /* ── Typography: weight ────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;   /* Body, descriptions */
  --font-weight-bold:      700;   /* Strong text, button text */
  --font-weight-extrabold: 800;   /* Emphasized labels, eyebrows */
  --font-weight-black:     900;   /* All headlines. **Default for display.** */

  /* ── Typography: scale (desktop values) ────────────────────────── */
  --font-size-h1:         4.2rem;     /* 67.2px */
  --font-size-h2:         3rem;       /* 48px */
  --font-size-h3:         2.25rem;    /* 36px */
  --font-size-lead:       1.25rem;    /* 20px */
  --font-size-body:       1.125rem;   /* 18px */
  --font-size-body-small: 0.9375rem;  /* 15px */
  --font-size-button:     1rem;       /* 16px desktop / 11–13px nav buttons */
  --font-size-eyebrow:    0.6875rem;  /* 11px */

  /* ── Typography: tracking ──────────────────────────────────────── */
  --tracking-display: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-body:    -0.01em;
  --tracking-label:   0.10em;
  --tracking-eyebrow: 0.40em;

  /* ── Typography: leading ───────────────────────────────────────── */
  --leading-display: 1.05;
  --leading-heading: 1.10;
  --leading-tight:   1.25;
  --leading-body:    1.625;

  /* ── Spacing & layout ──────────────────────────────────────────── */
  --container-max:        1400px;
  --container-max-wide:   1440px;
  --container-pad-x-mob:  1rem;
  --container-pad-x-tab:  1.5rem;
  --container-pad-x-desk: 2rem;

  --section-py-compact:  5rem;
  --section-py-default:  7rem;
  --section-py-spacious: 8rem;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-button:  1.8rem;
  --radius-card:    3rem;
  --radius-card-lg: 3.5rem;
  --radius-hero:    4.5rem;
  --radius-pill:    9999px;
  --radius-sm:      0.75rem;
  --radius-md:      1rem;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-subtle:       0 4px 20px rgba(var(--rgb-navy-deep),0.02);
  --shadow-glass:        0 10px 30px -10px rgba(var(--rgb-navy-deep),0.05);
  --shadow-card:         0 20px 50px -15px rgba(var(--rgb-navy-deep),0.04);
  --shadow-menu:         0 30px 60px -15px rgba(var(--rgb-navy-deep),0.10);
  --shadow-card-hover:   0 40px 80px -20px rgba(var(--rgb-navy-deep),0.06);
  --shadow-image:        0 50px 100px -20px rgba(var(--rgb-navy-deep),0.10);
  --shadow-image-large:  0 60px 120px -30px rgba(var(--rgb-navy-deep),0.15);
  --shadow-brand-button: 0 15px 30px -5px rgba(var(--rgb-navy),0.40);
  --shadow-accent-button:0 15px 30px -5px rgba(var(--rgb-navy),0.35);

  /* ── Motion ────────────────────────────────────────────────────── */
  --duration-standard:  300ms;

  --ease-out:   ease-out;
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────── */

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-sans);
  background-color: var(--color-surface-app);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #DDF3FC;        /* pale sky */
  color:      #1C5E7E;        /* deep brand anchor */
}

/* ── Semantic typography classes ───────────────────────────────── */
/* Use these for "set me a heading"-style needs without thinking about
   tracking/leading/weight every time.                              */

.t-h1,
h1 {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1));
  font-weight: 800;                        /* Schibsted reads confident at 800 — 900 crowds the counters. */
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin: 0;
}

.t-h2,
h2 {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--color-text-primary);
  margin: 0;
}

.t-h3,
h3 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.t-lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.t-body,
p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin: 0;
}

.t-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}

.t-button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.t-mono { /* not in the brand; exposed for code samples in tooling only */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The signature gradient text used on the differentiator phrase in
   display headlines. Reserve for the brand name or differentiator —
   never for a full sentence. Default uses the deep-anchor gradient; pair
   the `.t-gradient-accent` modifier when the phrase sits on a dark band
   and wants the bright primary family instead. */
.t-gradient {
  background-image: var(--gradient-brand-deep);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Use when you want the actual brand gradient (primary → light) behind
   text. Only readable on DARK backgrounds. */
.t-gradient-soft {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.t-gradient-accent {
  background-image: var(--gradient-accent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Brand utilities ───────────────────────────────────────────── */
/* Button definitions (.btn-brand, .btn-accent, .btn-secondary) live in
   site.css. Don't redeclare them here — site.css loads second and the
   richer version wins anyway. */

.text-brand  { color: var(--color-brand-primary-700); }      /* readable on white — use --color-brand-primary itself only on dark surfaces */
.text-accent { color: var(--color-brand-secondary); }
.t-slab      { font-family: var(--font-family-slab);   font-weight: 800; letter-spacing: var(--tracking-tight); }
.t-script    { font-family: var(--font-family-display); font-weight: 800; letter-spacing: var(--tracking-tight); }   /* Legacy hook — the Pure Charlotte interim brand has no script face. */

/* Brand wordmark — inline lockup for headlines or footers. Interim
   styled-text wordmark (no logo file exists yet — sign-off pending);
   single grotesque voice, no mixed faces. */
.brand-wordmark {
  font-family: var(--font-family-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-brand-secondary);
}

.glass-panel {
  background-color: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-glass);
}

@keyframes pm-marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: pm-marquee 80s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

@keyframes pm-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping {
  animation: pm-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: pm-fade-up 700ms var(--ease-out) both;
}