/* ==========================================================================
   Melody Inc. — Care in harmony
   Built by WeBuildApps · webuildapps.tech

   One hand-written stylesheet: no preprocessor, no framework, no build step.
   See docs/DESIGN-SYSTEM.md for the palette, type scale and components.

   CONTENTS (search for the "---------- Name" banners)
     Design tokens ........ colors, type, spacing, motion (light + dark)
     Base ................. reset, focus ring, skip link, icons
     Layout helpers ....... .container, .section, .section-head, .eyebrow, headings
     Buttons, Utilities
     Wordmark ............. the "Melo𝅘𝅥𝅯y" logo
     Header ............... sticky header, nav, theme toggle, mobile menu
     Hero ................. sunburst, app icon, notes, staff, trust strip
     Statement ............ scroll-lit paragraph
     Services ............. four "movement" cards
     Where & who
     Difference ........... dark band, feature cards, orbit
     Chord ................ three notes + three question cards
     Team, Process, Rates (+ estimator, ways to pay), FAQ, Careers
     Contact .............. info cards, notices, form, success overlay
     Footer, Back to top, Scroll reveal, 404 page
     Responsive ........... 1080px, 960px, 640px
     Motion preferences, Print

   CONVENTIONS
     - Naming is BEM-flavoured: .block, .block__part, .block--variant.
     - State classes are set by js/main.js: .is-in (revealed), .is-on (active),
       .is-open (menu), .is-lit (statement word), .is-scrolled (header).
     - Colors always come from tokens, never raw hex in components. The few
       exceptions are surfaces that look the same in both themes (careers card,
       who-card, team avatars); those are commented where they appear.
     - Components can be themed per instance with local custom properties,
       e.g. --accent / --accent-soft on cards and --c on team members.
     - Breakpoints are desktop-first (max-width) and live together at the
       end of the file.
   ========================================================================== */

/* ---------- Design tokens ----------
   Light theme is the default. Every component reads these variables, so the
   dark theme (and the always-dark bands) is just a different set of values. */
:root {
  /* Surfaces & text */
  --bg: #FFF9F1;            /* page background: warm cream */
  --bg-alt: #FFF0E1;        /* alternating sections (.section--alt) */
  --surface: #FFFFFF;       /* cards */
  --surface-2: #FFF8F0;     /* raised elements on cards */
  --ink: #17312D;           /* headings, strong text */
  --text: #354A47;          /* body copy */
  --muted: #566966;         /* secondary text, labels (≥4.5:1 on --bg and --bg-alt) */
  --line: rgba(27, 46, 43, .12);         /* hairline borders */
  --line-strong: rgba(27, 46, 43, .22);  /* input borders, ghost buttons */

  /* Brand colors. Each has a "soft" tint for backgrounds; honey and rose
     also have an "ink" shade dark enough for text on light backgrounds (AA). */
  --teal: #0C776F;          /* primary: trust, steadiness */
  --teal-strong: #0A625C;
  --teal-soft: #E0F5F0;
  --honey: #F6A623;         /* accent: warmth (the logo's flags) */
  --honey-ink: #8A5000;
  --honey-soft: #FFEDC6;
  --focus: #C47A08;         /* keyboard focus ring: darker marigold, 3:1 on cream */
  --rose: #FF7A59;          /* accent: care, clinical */
  --rose-ink: #B2391C;
  --rose-soft: #FFE2D8;

  /* Roles */
  --on-teal: #FFF9F1;       /* text on teal fills */
  --btn-bg: var(--teal);
  --btn-fg: #FFF9F1;
  --btn-bg-hover: var(--teal-strong);
  --ray: rgba(246, 166, 35, .10);   /* sunburst ray color */
  --glow: rgba(246, 166, 35, .35);  /* hero glow behind the app icon */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(27, 46, 43, .06), 0 4px 12px -6px rgba(27, 46, 43, .12);
  --shadow: 0 1px 2px rgba(27, 46, 43, .05), 0 18px 40px -18px rgba(27, 46, 43, .25);
  --shadow-lg: 0 2px 4px rgba(27, 46, 43, .04), 0 30px 70px -28px rgba(27, 46, 43, .35);

  /* Type: Fraunces (display, variable with a "SOFT" axis for rounder letters),
     Inter (body), JetBrains Mono (eyebrows, labels, codes). Loaded from
     Google Fonts in index.html. */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout & motion */
  --gutter: clamp(16px, 4vw, 32px);       /* page side padding */
  --radius: 24px;
  --radius-lg: 32px;
  --ease: cubic-bezier(.22, .8, .24, 1);  /* default: quick start, gentle settle */
  --ease-soft: cubic-bezier(.4, .1, .2, 1);
  --header-h: 76px;                        /* also offsets anchor jumps (scroll-padding-top) */

  color-scheme: light;
}

/* Dark tokens. Applied two ways:
   - :root[data-theme="dark"]: the whole site, when the visitor picks dark mode
   - .band-dark: always-dark sections (the "Melody difference" band, footer),
     whatever the theme. Any component placed inside picks up dark colors. */
:root[data-theme="dark"],
.band-dark {
  --bg: #0E1715;
  --bg-alt: #121E1B;
  --surface: #15221F;
  --surface-2: #1A2925;
  --ink: #F4EEE3;
  --text: #C9D2CD;
  --muted: #93A19C;
  --line: rgba(244, 238, 227, .10);
  --line-strong: rgba(244, 238, 227, .22);

  --teal: #5FD4C4;
  --teal-strong: #8EE5D9;
  --teal-soft: rgba(95, 212, 196, .12);
  --honey: #FFC15E;
  --honey-ink: #FFCB7A;
  --honey-soft: rgba(255, 193, 94, .13);
  --focus: #FFC15E;
  --rose: #FF9C82;
  --rose-ink: #FFB09A;
  --rose-soft: rgba(255, 156, 130, .13);

  --btn-bg: #F4EEE3;
  --btn-fg: #10201D;
  --btn-bg-hover: #FFFFFF;
  --ray: rgba(255, 193, 94, .06);
  --glow: rgba(255, 193, 94, .28);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px); /* anchor jumps land below the sticky header */
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* the oversized sunburst rays must never cause sideways scrolling */
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft); /* smooth theme switch */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--honey); color: #17312D; }

/* Keyboard focus ring for everything. Never remove it without a visible replacement. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* Line icons from the SVG library in index.html (<svg class="icon"><use href="#i-name"/></svg>).
   They draw with currentColor, so set `color` to recolor one; size defaults to 1.25em. */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout helpers ----------
   A typical section:
     <section class="section [section--alt]" id="…">
       <div class="container">
         <div class="section-head [section-head--center]">
           <p class="eyebrow">…</p> <h2 class="h2">… <em>accent.</em></h2> <p class="lead">…</p>
         </div>
         …
   The <em> inside a heading becomes the italic honey accent word. */
.container { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--narrow { width: min(880px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding-block: clamp(80px, 11vw, 140px); }
.section--alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Small monospace label above headings, with a hairline before it (and after it when centered). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--honey-ink);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6;
}
.section-head--center .eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6;
}

/* Section heading. "SOFT" 100 rounds Fraunces' letterforms for a friendlier feel;
   "opsz" picks the large-size optical design. */
.h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-variation-settings: "SOFT" 100, "opsz" 96;
  margin-bottom: 20px;
  text-wrap: balance;
}
.h2 em, .h1 em, .accent {
  font-style: italic;
  color: var(--honey-ink);
  font-variation-settings: "SOFT" 100, "opsz" 96;
}
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); max-width: 640px; text-wrap: pretty; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Buttons ----------
   .btn + one variant: --primary (teal; cream in dark mode), --ghost (outline),
   --honey (on dark/teal backgrounds). Sizes: default 54px, --sm 44px. --block = full width.
   Add <svg class="icon icon--arrow"> for an arrow that nudges right on hover. */
.btn {
  --h: 54px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15.5px; letter-spacing: .005em; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .35s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary::after { /* light sheen that sweeps across on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); transform: translateY(-2px); }
.btn--honey { background: var(--honey); color: #17312D; }
.btn--honey:hover { background: #FFB940; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--sm { --h: 44px; padding: 0 20px; font-size: 14.5px; }
.btn--block { width: 100%; }

/* ---------- Utilities ----------
   Not used on the current page, but kept for new content:
   .text-link: inline link whose underline draws in on hover
   .accent:    italic honey accent text outside headings (rule above, with .h2 em) */
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .4s var(--ease);
}
.text-link:hover { background-size: 100% 1.5px; }

/* ---------- Wordmark ----------
   Markup: <span class="wordmark">Melo<svg class="note-d"><use href="#note-d"/></svg>y<span class="wordmark__inc">Inc.</span></span>
   The "d" is the #note-d sixteenth-note symbol. Its viewBox puts the
   notehead on the text baseline and the stem at ascender height, so at
   width .52em × height 1em it sits in the word like a real letter. The flags
   use --flag (honey by default); the rest uses currentColor. */
.wordmark {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  color: var(--ink);
  white-space: nowrap;
  display: inline-block;
}
.note-d {
  display: inline-block;
  width: .52em; height: 1em;
  vertical-align: -.17em; /* drops the notehead onto the baseline */
  overflow: visible;
  --flag: var(--honey);
  transform-origin: 40% 80%; /* pivot near the notehead for the hover wiggle */
}
.note-d use { transform-box: fill-box; }
.wordmark__inc {
  font-family: var(--f-mono); font-weight: 500;
  font-size: .32em; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal);
  margin-left: .55em; vertical-align: .32em;
}
.brand:hover .note-d { animation: note-wiggle .9s var(--ease); }
@keyframes note-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-7deg) translateY(-1px); }
  60% { transform: rotate(4deg); }
}

/* ---------- Header ----------
   Transparent over the hero; main.js adds .is-scrolled after 10px of scroll
   (or while the mobile menu is open) for the frosted background. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  transition: background-color .4s var(--ease-soft), box-shadow .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
.header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; padding: 6px 2px; border-radius: 10px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--text);
  transition: color .25s, background-color .25s;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { /* honey dot under the section currently on screen */
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--honey); transform: translateX(-50%);
}
/* Staff portal link: last in the menu, set apart by a thin divider and a lock
   icon so families can see it's the staff sign-in, not a page section. */
.nav .nav__staff { display: inline-flex; align-items: center; gap: 6px; margin-left: 13px; white-space: nowrap; }
.nav .nav__staff::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 18px;
  background: var(--line-strong); transform: translateY(-50%);
}
.nav__staff .icon { width: 16px; height: 16px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink);
  transition: background-color .25s, border-color .25s, transform .35s var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--ink); transform: rotate(-12deg); }
.icon-btn .icon { width: 19px; height: 19px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
.menu-toggle { display: none; } /* shown below 961px, see Responsive */

/* Drop-down menu for phones and tablets; opened with .is-open by main.js. */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 4px;
  /* Scrolls inside itself when it is taller than the screen (short phones, landscape). */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease), opacity .3s, visibility .3s;
}
.mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; }
.mobile-nav a:not(.btn) {
  font-family: var(--f-display); font-size: 26px; color: var(--ink);
  padding: 10px 4px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
/* Staff links: after the button and smaller than the page sections, so
   families can tell they're for staff. */
.mobile-nav a.mobile-nav__staff { font-family: var(--f-body); font-size: 16px; font-weight: 600; color: var(--text); padding-block: 11px; }
.mobile-nav .btn + .mobile-nav__staff { margin-top: 14px; border-top: 1px solid var(--line); }
.mobile-nav a.mobile-nav__staff:last-child { border-bottom: 0; }
.mobile-nav__staff .icon { width: 20px; height: 20px; }
.mobile-nav .btn { margin-top: 18px; }

/* ---------- Hero ----------
   Layers, back to front: slowly turning sunburst rays (.hero__rays), a soft
   glow, then the content. The negative margin pulls the hero up under the
   transparent sticky header so the rays fill the top of the page. */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 56px));
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Sunburst: thin conic-gradient wedges faded out by a radial mask, one turn every 3 minutes. */
.hero__rays {
  position: absolute; left: 50%; top: 210px; z-index: -2;
  width: 2200px; height: 2200px;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, var(--ray) 0deg 3.2deg, transparent 3.2deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.6) 34%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.6) 34%, transparent 62%);
  animation: spin 180s linear infinite;
  pointer-events: none;
}
.hero__glow {
  position: absolute; left: 50%; top: 200px; z-index: -1;
  width: min(900px, 120vw); height: 620px; translate: -50% -50%;
  background:
    radial-gradient(closest-side at 50% 50%, var(--glow), transparent 70%),
    radial-gradient(closest-side at 30% 60%, rgba(255, 122, 89, .14), transparent 70%),
    radial-gradient(closest-side at 72% 58%, rgba(12, 119, 111, .12), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
@keyframes spin { to { rotate: 360deg; } }

.hero__icon-wrap { position: relative; width: 104px; height: 104px; margin: 0 auto 28px; }
.app-icon {
  width: 100%; height: 100%;
  border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 20px 50px -14px rgba(12, 119, 111, .55), 0 0 80px -10px var(--glow);
  animation: float 6.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}
/* Little eighth notes that drift up around the app icon. Each has an inline
   --d (seconds) so they take turns. Positions are per nth-child; child 1 is the icon. */
.floaty {
  position: absolute; width: 18px; height: 32px; color: var(--honey);
  opacity: 0; pointer-events: none;
  animation: drift 7s var(--ease-soft) infinite;
  animation-delay: calc(var(--d) * 1s);
}
.floaty svg { width: 100%; height: 100%; }
.floaty:nth-child(2) { left: -46px; top: 40px; color: var(--teal); }
.floaty:nth-child(3) { right: -44px; top: 14px; color: var(--rose); }
.floaty:nth-child(4) { left: -78px; top: -6px; color: var(--honey); width: 14px; height: 26px; }
.floaty:nth-child(5) { right: -84px; top: 56px; color: var(--teal); width: 14px; height: 26px; }
.floaty:nth-child(6) { left: 40px; top: -40px; color: var(--rose); width: 12px; height: 22px; }
@keyframes drift {
  0% { opacity: 0; transform: translateY(16px) rotate(-8deg) scale(.8); }
  15% { opacity: .9; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-46px) rotate(10deg) scale(1); }
}

.hero .eyebrow { margin-bottom: 22px; }
.hero .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.h1 {
  font-family: var(--f-display);
  font-size: clamp(46px, 8.4vw, 104px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  max-width: 13ch;
  margin: 0 auto 26px;
  text-wrap: balance;
}
.hero__lead { font-size: clamp(17px, 1.75vw, 21px); max-width: 660px; margin: 0 auto 36px; text-wrap: pretty; }
.hero__lead strong { color: var(--ink); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 22px; }
.hero__call { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.hero__call a { color: var(--ink); font-weight: 600; }
.hero__call .icon { color: var(--honey-ink); width: 18px; height: 18px; }

/* Wavy five-line music staff under the hero. The five paths are precomputed
   (gentle sine curves) in index.html. Lines "draw" in with a stroke-dashoffset
   animation, staggered by the inline --i; then the eight notes (.sn) pop in and
   take turns bouncing, like a melody playing. */
.staff {
  position: relative;
  margin-top: clamp(28px, 5vw, 56px);
  height: clamp(130px, 16vw, 210px);
}
.staff svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.staff-line {
  fill: none; stroke: var(--line-strong); stroke-width: 1.4;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: draw 2.6s var(--ease) forwards;
  animation-delay: calc(.3s + var(--i) * .12s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.sn {
  transform-box: fill-box; transform-origin: 30% 85%;
  opacity: 0;
  animation: note-in .8s var(--ease) forwards, note-play 5.6s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--i) * .14s), calc(2.6s + var(--i) * .32s);
}
.sn--teal { color: var(--teal); }
.sn--honey { color: var(--honey); }
.sn--rose { color: var(--rose); }
@keyframes note-in {
  from { opacity: 0; transform: translateY(14px) scale(.6); }
  to { opacity: 1; transform: none; }
}
@keyframes note-play {
  0%, 12%, 100% { transform: none; }
  5% { transform: translateY(-7px) scale(1.12) rotate(-6deg); }
}

/* Four-up "trust strip" at the bottom of the hero (2×2 on tablets and phones). */
.trust {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.trust__item {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 16px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-align: left;
}
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__item .icon { width: 22px; height: 22px; color: var(--teal); }

/* ---------- Statement ----------
   main.js wraps each word in <span class="w"> and adds .is-lit as you scroll,
   so the sentence "fills in". Words wrapped in .hl light up as honey italics.
   The dimmed start state only applies under .js, so without JavaScript the
   text reads normally. */
.statement { padding-block: clamp(90px, 12vw, 160px); }
.statement__text {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.9vw, 50px);
  line-height: 1.22;
  letter-spacing: -.018em;
  font-variation-settings: "SOFT" 100, "opsz" 96;
  color: var(--ink);
  max-width: 1000px;
  margin: 0;
  text-wrap: pretty;
}
.js .statement__text .w { color: color-mix(in srgb, var(--ink) 22%, transparent); transition: color .45s var(--ease-soft); }
.js .statement__text .w.is-lit { color: var(--ink); }
.js .statement__text .w.is-lit.hl { color: var(--honey-ink); font-style: italic; }
.statement__text .hl { font-style: italic; color: var(--honey-ink); }
.statement__sign {
  margin-top: 36px; display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.statement__sign::before { content: ""; width: 40px; height: 1px; background: var(--line-strong); }

/* ---------- Services ----------
   Four cards ("movements"). The color variant sets --accent / --accent-soft,
   which the number, icon bubble, list icons, hover border and corner glow all
   read. To add a color, add a .service-card--name rule that sets both. */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 40px);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent, var(--honey)) 55%, transparent); }
.service-card::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft, var(--honey-soft)), transparent);
  opacity: .9; transition: transform .8s var(--ease);
}
.service-card:hover::before { transform: scale(1.25); }
.service-card--teal { --accent: var(--teal); --accent-soft: var(--teal-soft); }
.service-card--rose { --accent: var(--rose); --accent-soft: var(--rose-soft); }
.service-card--honey { --accent: var(--honey); --accent-soft: var(--honey-soft); }
.service-card__top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.service-card__num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.service-card__num b { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: 0; color: var(--accent); margin-right: 8px; text-transform: none; }
/* Rounded-square icon tile, used across the site. Recolor per instance with --accent / --accent-soft. */
.bubble {
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--accent-soft, var(--honey-soft)); color: var(--accent, var(--honey-ink));
  transition: transform .6s var(--ease);
}
.bubble .icon { width: 26px; height: 26px; }
.service-card:hover .bubble { transform: rotate(-8deg) scale(1.06); }
.service-card h3 {
  position: relative;
  font-family: var(--f-display); font-size: clamp(25px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -.012em; font-variation-settings: "SOFT" 100;
  margin-bottom: 10px;
}
.service-card > p { position: relative; color: var(--text); margin-bottom: 22px; }
.service-list { position: relative; display: grid; gap: 2px; }
.service-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px dashed var(--line);
}
.service-list li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--accent, var(--honey)); }
.service-list strong { display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.service-list span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Where & who ---------- */
.where-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.place-cards { display: grid; gap: 16px; margin-top: 36px; }
.place-card {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.place-card:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.place-card h3 { font-family: var(--f-display); font-size: 23px; margin-bottom: 4px; font-variation-settings: "SOFT" 100; }
.place-card p { margin: 0; font-size: 15.5px; }
/* Teal "Who we care for" card. Its text colors are fixed (not tokens) because
   the card stays dark-teal in both themes. */
.who-card {
  position: relative;
  background: var(--teal); color: var(--on-teal);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .who-card { background: #103A36; }
.who-card::after {
  content: ""; position: absolute; inset: auto -30% -50% auto; width: 420px; height: 420px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 193, 94, .13) 0 3deg, transparent 3deg 11deg);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 75%); mask-image: radial-gradient(closest-side, #000, transparent 75%);
  animation: spin 120s linear infinite reverse;
}
.who-card .eyebrow { color: #FFCB7A; }
.who-card h3 { color: #FFF9F1; font-family: var(--f-display); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin-bottom: 22px; font-variation-settings: "SOFT" 100; }
.who-list { position: relative; z-index: 1; display: grid; gap: 14px; }
.who-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 16.5px; color: rgba(251, 246, 238, .9); }
.check {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251, 246, 238, .12); color: #FFCB7A;
}
.check .icon { width: 16px; height: 16px; stroke-width: 2.4; }

/* ---------- Difference (dark band) ---------- */
.band-dark { background: var(--bg); color: var(--text); }
.difference { overflow: hidden; isolation: isolate; }
.difference__rays {
  position: absolute; right: -500px; top: 50%; width: 1600px; height: 1600px; translate: 0 -50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 193, 94, .07) 0 3deg, transparent 3deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 65%); mask-image: radial-gradient(closest-side, #000 10%, transparent 65%);
  animation: spin 200s linear infinite;
}
.difference-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.feature {
  padding: 24px; border-radius: var(--radius);
  background: rgba(244, 238, 227, .035); border: 1px solid var(--line);
  transition: background-color .4s, border-color .4s, transform .5s var(--ease);
}
.feature:hover { background: rgba(244, 238, 227, .06); border-color: rgba(255, 193, 94, .35); transform: translateY(-4px); }
.feature .icon { width: 26px; height: 26px; color: var(--honey); margin-bottom: 14px; }
.feature h3 { font-family: var(--f-display); font-size: 21px; margin-bottom: 6px; font-variation-settings: "SOFT" 100; }
.feature p { font-size: 15px; margin: 0; color: var(--muted); }

/* Orbit: the four owners circling the Melody icon.
   .orbit__spin rotates once every 48s. Each .orbit__member is placed with
   rotate(angle) → move out by the radius → rotate(-angle), so it sits on the
   ring upright. Each .orbit__face counter-rotates at the same speed, so its
   letters always stay level.
   The radius --r is 50cqw (half the width of .orbit__spin, a size container),
   so members stay on the ring at any size. 185px is the fallback for browsers
   without container units. Angles come from the inline --a. */
.orbit { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin-inline: auto; }
.orbit__ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(244, 238, 227, .2); }
.orbit__ring--2 { inset: 24%; border-style: solid; border-color: rgba(255, 193, 94, .18); }
.orbit__center {
  position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%;
  filter: drop-shadow(0 0 40px rgba(255, 193, 94, .35));
}
.orbit__center .app-icon { animation-duration: 7s; }
.orbit__spin { position: absolute; inset: 8%; animation: spin 48s linear infinite; container-type: inline-size; }
.orbit__member {
  --r: 185px;
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
@supports (width: 1cqw) { .orbit__member { --r: 50cqw; } }
.orbit__face {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  animation: spin 48s linear infinite reverse;
}
.orbit__face b { display: block; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--c, var(--honey)); font-weight: 600; }
.orbit__face small { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.orbit__caption { text-align: center; margin-top: 26px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.orbit__caption em { font-family: var(--f-display); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--honey); display: block; margin-top: 6px; }

/* ---------- Chord ----------
   An SVG staff (viewBox 1200×230, five lines at y = 70…158, 22 apart) holding
   three notes that step up evenly (notehead centers at y = 158, 125, 92), so they
   read as a rising chord. The sound itself is C5–E5–G5 (see main.js). The notes'
   x positions (193.3 / 600 / 1006.7) are the centers of the three .q-card columns
   below, so each note lines up with its question on desktop. Note i ↔ card i is
   wired up in main.js. */
.chord { position: relative; }
.chord__staff { position: relative; margin: 0 auto 10px; }
.chord__staff svg { width: 100%; height: auto; overflow: visible; }
.chord__staff .cl { stroke: var(--line-strong); stroke-width: 1.5; }
.chord-note { cursor: pointer; outline: none; }
.chord-note .head { transition: transform .5s var(--ease), filter .4s; transform-box: fill-box; transform-origin: center; }
.chord-note .halo { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; }
.chord-note:hover .head, .chord-note:focus-visible .head, .chord-note.is-on .head { transform: scale(1.12) rotate(-4deg); }
.chord-note:focus-visible .halo, .chord-note.is-on .halo { opacity: 1; animation: halo 1.4s var(--ease) infinite; }
@keyframes halo { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.chord-note text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; fill: var(--muted); }

.chord-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.q-card {
  position: relative; padding: 30px 28px 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
  cursor: pointer;
}
.q-card::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--c); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease);
}
.q-card:hover, .q-card.is-on { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.q-card:hover::before, .q-card.is-on::before { transform: scaleX(1); }
.q-card__who { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink, var(--muted)); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.q-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.q-card blockquote { margin: 0 0 12px; font-family: var(--f-display); font-size: 25px; line-height: 1.2; color: var(--ink); font-variation-settings: "SOFT" 100; }
.q-card p { margin: 0; font-size: 15px; color: var(--muted); }
.q-card--teal { --c: var(--teal); --c-ink: var(--teal); }
.q-card--rose { --c: var(--rose); --c-ink: var(--rose-ink); }
.q-card--honey { --c: var(--honey); --c-ink: var(--honey-ink); }
.chord__play { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; }
.chord__hint { font-size: 13.5px; color: var(--muted); }
.chord__harmony {
  font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--honey-ink);
  opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease);
  min-height: 1.4em;
}
.chord__harmony.is-on { opacity: 1; transform: none; }

/* ---------- Team ----------
   Each .member--color sets --c, the avatar's gradient and note color. These are
   fixed hex values (not tokens) so each person keeps their color in both themes. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 26px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.avatar {
  position: relative; width: 84px; height: 84px; border-radius: 50%; margin-bottom: 20px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 35%, #fff), var(--c));
  color: #FFFFFF;
  font-family: var(--f-display); font-size: 36px; font-weight: 600; font-variation-settings: "SOFT" 100;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--c) 80%, transparent);
  transition: transform .6s var(--ease);
}
.member:hover .avatar { transform: rotate(-6deg) scale(1.04); }
.avatar__note {
  position: absolute; right: -6px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--c);
}
.avatar__note svg { width: 12px; height: 22px; }
.member--teal { --c: #12897F; }
.member--rose { --c: #E35F3E; }
.member--honey { --c: #C47A08; }
.member--plum { --c: #7A5CC7; }
.member__tag {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: var(--teal); background: var(--teal-soft);
}
.member h3 { font-family: var(--f-display); font-size: 27px; line-height: 1.1; margin-bottom: 6px; font-variation-settings: "SOFT" 100; }
.member__role { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--honey-ink); margin-bottom: 14px; line-height: 1.5; }
.member p { font-size: 15px; color: var(--text); }
.member__asks { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--muted); }
.member__asks em { display: block; font-family: var(--f-display); font-size: 17px; color: var(--ink); margin-top: 2px; }
.team-note { text-align: center; margin-top: 34px; color: var(--muted); font-size: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-note .icon { color: var(--honey-ink); }

/* ---------- Process ----------
   A hairline (::before) runs behind the four numbered circles. When main.js adds
   .is-in, a teal→honey→rose line (::after) draws over it and the circles fill one
   after another.
   Line geometry, for 4 columns with a 28px gap and 72px circles:
     left  = 36px              → center of the first circle
     right = 25% − 57px        → center of the last circle
   (one column = 25% − 21px; minus the 36px radius = 25% − 57px.)
   Change the gap or circle size and these two numbers need updating. The line
   is hidden below 961px, where the steps wrap. */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps::before, .steps::after {
  content: ""; position: absolute; left: 36px; right: calc(25% - 57px); top: 35px; height: 2px; border-radius: 2px;
}
.steps::before { background: var(--line); }
.steps::after {
  background: linear-gradient(90deg, var(--teal), var(--honey), var(--rose));
  transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease);
}
.steps.is-in::after { transform: scaleX(1); }
.step { position: relative; }
.step__num {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  font-family: var(--f-display); font-size: 28px; font-weight: 600; color: var(--ink);
  margin-bottom: 22px;
  transition: background-color .5s, color .5s, border-color .5s, transform .6s var(--ease);
}
.steps.is-in .step__num { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
:root[data-theme="dark"] .steps.is-in .step__num { color: #0E1715; }
.steps.is-in .step:nth-child(2) .step__num { transition-delay: .5s; }
.steps.is-in .step:nth-child(3) .step__num { transition-delay: 1s; }
.steps.is-in .step:nth-child(4) .step__num { transition-delay: 1.5s; }
.step:hover .step__num { transform: translateY(-4px) rotate(-6deg); }
.step h3 { font-family: var(--f-display); font-size: 24px; margin-bottom: 8px; font-variation-settings: "SOFT" 100; }
.step p { font-size: 15.5px; margin: 0; }

/* ---------- Rates ----------
   Left: tabs and rate panels. Right: the sticky estimator.
   minmax(0, 1fr) and min-width: 0 stop wide content (the tab row) from pushing
   the grid wider than a phone screen. Don't simplify them back to plain 1fr. */
.rates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.rates-layout > * { min-width: 0; }
.tabs {
  display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; margin-bottom: 22px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; border: 0; background: transparent; padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; color: var(--muted); white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--teal); color: var(--on-teal); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: #0E1715; }
.rate-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 8px clamp(18px, 3vw, 30px);
}
.rate-panel[hidden] { display: none; }
.js .rate-panel:not([hidden]) { animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* One service: name + billing code (.code), short description, price on the right. */
.rate-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px dashed var(--line);
}
.rate-row:last-child { border-bottom: 0; }
.rate-row h3 { font-family: var(--f-body); font-size: 16.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; font-weight: 500;
  padding: 3px 8px; border-radius: 6px; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line);
}
.rate-row p { grid-column: 1; margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.price { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.price b { display: block; font-family: var(--f-display); font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.1; font-variation-settings: "SOFT" 100; }
.price b small { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.price span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rates-notes { margin-top: 22px; display: grid; gap: 10px; }
.rates-notes li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; color: var(--muted); }
.rates-notes .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--honey-ink); }

.estimator {
  position: sticky; top: calc(var(--header-h) + 20px);
  border-radius: var(--radius-lg); padding: 28px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.estimator h3 { font-family: var(--f-display); font-size: 26px; margin-bottom: 4px; font-variation-settings: "SOFT" 100; display: flex; align-items: center; gap: 10px; }
.estimator h3 .icon { color: var(--honey-ink); }
.estimator > p { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label, .field .label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.field label output { font-family: var(--f-mono); font-weight: 500; color: var(--honey-ink); }
.select, .input, .textarea {
  width: 100%; border-radius: 14px; border: 1.5px solid var(--line-strong);
  background: var(--bg); color: var(--ink); padding: 12px 14px; font-size: 15.5px;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2364726D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.select:focus, .input:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
/* Range sliders: the filled part of the track is a gradient stop at --p, set by main.js. */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--teal) var(--p, 30%), var(--line-strong) var(--p, 30%));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--teal); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease); cursor: grab;
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); cursor: grab; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.estimate {
  margin-top: 8px; padding: 20px; border-radius: 20px;
  background: var(--teal); color: var(--on-teal);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
:root[data-theme="dark"] .estimate { background: #103A36; color: #FFF9F1; }
.estimate div span { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.estimate div b { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.estimator__fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }

.pay {
  margin-top: 28px; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg);
  background: var(--honey-soft); border: 1px solid color-mix(in srgb, var(--honey) 35%, transparent);
  display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: center;
}
.pay h3 { font-family: var(--f-display); font-size: 26px; margin-bottom: 6px; font-variation-settings: "SOFT" 100; }
.pay p { margin: 0; font-size: 15.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.chip .icon { width: 15px; height: 15px; color: var(--teal); stroke-width: 2.4; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  transition: box-shadow .4s var(--ease), border-color .3s;
}
.faq details[open] { box-shadow: var(--shadow); border-color: var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 24px; font-weight: 600; font-size: 17px; color: var(--ink);
  border-radius: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--honey-soft); color: var(--honey-ink); transition: transform .45s var(--ease), background-color .3s;
}
.faq summary .plus .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.faq details[open] summary .plus { transform: rotate(135deg); background: var(--teal); color: var(--on-teal); }
:root[data-theme="dark"] .faq details[open] summary .plus { color: #0E1715; }
.faq__a { padding: 0 24px 22px; color: var(--text); font-size: 16px; }
.faq__a p:last-child { margin: 0; }
.faq details[open] .faq__a { animation: panel-in .45s var(--ease); }

/* ---------- Careers ---------- */
.careers {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: clamp(28px, 4vw, 44px);
  padding: clamp(36px, 6vw, 72px);
  background: linear-gradient(135deg, #0C776F 0%, #0A625C 55%, #08504B 100%);
  color: rgba(251, 246, 238, .88);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
  box-shadow: var(--shadow-lg);
}
.careers::before {
  content: ""; position: absolute; left: -300px; bottom: -700px; width: 1300px; height: 1300px; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 193, 94, .09) 0 3deg, transparent 3deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 65%); mask-image: radial-gradient(closest-side, #000 10%, transparent 65%);
  animation: spin 160s linear infinite;
}
.careers .eyebrow { color: #FFCB7A; }
.careers .h2 { color: #FFF9F1; }
.careers .h2 em { color: #FFCB7A; }
.careers p { color: rgba(251, 246, 238, .82); }
.perks { display: grid; gap: 12px; }
.perks li {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px;
  background: rgba(251, 246, 238, .07); border: 1px solid rgba(251, 246, 238, .12);
  color: #FFF9F1; font-weight: 600;
  transition: transform .45s var(--ease), background-color .3s;
}
.perks li:hover { transform: translateX(6px); background: rgba(251, 246, 238, .11); }
.perks .icon { color: #FFCB7A; width: 22px; height: 22px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-list { display: grid; gap: 12px; margin: 32px 0 24px; }
.contact-item {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
a.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.contact-item .bubble { width: 48px; height: 48px; border-radius: 14px; }
.contact-item .bubble .icon { width: 22px; height: 22px; }
.contact-item small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-item strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
.notice {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 18px; border-radius: 18px;
  background: var(--rose-soft); color: var(--ink); font-size: 14.5px; line-height: 1.5;
}
.notice .icon { color: var(--rose-ink); width: 20px; height: 20px; margin-top: 1px; }
.notice + .notice { margin-top: 10px; }
.notice--teal { background: var(--teal-soft); }
.notice--teal .icon { color: var(--teal); }

.form-card {
  position: relative;
  padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.form-card h3 { font-family: var(--f-display); font-size: 28px; line-height: 1.15; margin-bottom: 8px; font-variation-settings: "SOFT" 100; }
.form-card > p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.req { color: var(--rose-ink); margin-left: 3px; }
.field .opt { margin-left: 4px; }
.opt { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pills legend { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0; }
/* Pill radio buttons: the real <input> is invisible but stretched over the pill,
   so it stays clickable, keyboard-focusable and readable by screen readers. */
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line-strong);
  font-size: 14.5px; font-weight: 500; color: var(--text);
  transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.pill:hover span { border-color: var(--ink); }
.pill input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--on-teal); transform: translateY(-1px); }
:root[data-theme="dark"] .pill input:checked + span { color: #0E1715; }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); margin: 6px 0 20px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--teal); }
/* Spam honeypot: moved off-screen (not display:none, which some bots detect).
   People never see it; bots fill it in and their submission is dropped. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { font-size: 13px; color: var(--rose-ink); min-height: 0; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--rose); }
.form-status { margin-top: 14px; font-size: 14.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.form-status .icon { width: 16px; height: 16px; color: var(--teal); }

/* Thank-you overlay that covers the form card after sending (.is-on from main.js). */
.form-success {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center; padding: 40px;
  background: var(--surface);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.form-success.is-on { opacity: 1; visibility: visible; }
.form-success__icon {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; background: var(--teal-soft); color: var(--teal);
}
.form-success.is-on .form-success__icon { animation: pop .8s var(--ease); }
.form-success__icon svg { width: 26px; height: 46px; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.form-success h3 { font-size: 30px; margin-bottom: 8px; }
.form-success p { color: var(--muted); max-width: 380px; margin: 0 auto 20px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(64px, 8vw, 96px); padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
.site-footer::before {
  content: ""; position: absolute; left: 50%; top: -900px; width: 1800px; height: 1800px; translate: -50% 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 193, 94, .045) 0 3deg, transparent 3deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 70%); mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
  pointer-events: none;
}
.footer-top { position: relative; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-brand .wordmark { font-size: 40px; }
.footer-tag { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--honey); margin: 18px 0 14px; }
.footer-brand p { font-size: 15px; color: var(--muted); max-width: 340px; }
.footer-col h4 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--text); font-size: 15px; transition: color .25s; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--ink); }
.footer-col .icon { width: 16px; height: 16px; color: var(--honey); }
.footer-legal {
  position: relative; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px;
  font-size: 13px; color: var(--muted);
}
.footer-legal p { margin: 0; }
.footer-legal .credit a { color: var(--honey); font-weight: 600; text-underline-offset: 4px; }
.footer-legal .credit a:hover { text-decoration: underline; color: #FFD594; }
.footer-fine { position: relative; margin-top: 16px; font-size: 12.5px; color: color-mix(in srgb, var(--muted) 80%, transparent); line-height: 1.6; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .35s, visibility .35s, transform .45s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 2.5; }
.to-top .ring .track { stroke: var(--line); }
/* Scroll-progress ring: 151 ≈ the circle's circumference (2π × r24). main.js sets --progress from 0 to 1. */
.to-top .ring .bar { stroke: var(--honey); stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: calc(151 - 151 * var(--progress, 0)); transition: stroke-dashoffset .1s linear; }
.to-top .icon { width: 20px; height: 20px; }

/* ---------- Scroll reveal ----------
   Add data-reveal to any element to fade it up into place when it scrolls into
   view. Stagger siblings with an inline style="--rd:1" (2, 3…), 90ms per step.
   Scoped to .js (set by js/theme.js), so nothing is hidden when scripts fail. */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px); filter: blur(4px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: calc(var(--rd, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 404 page (public/404.html) ----------
   Reuses the hero's rays and glow, centered on the screen. */
.notfound {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 48px var(--gutter);
}
.notfound .hero__rays, .notfound .hero__glow { top: 50%; }
.notfound .section-head { margin-bottom: 0; }
.notfound__brand { display: flex; width: fit-content; margin: 0 auto 36px; } /* own line, above the eyebrow */
.notfound__brand .wordmark { font-size: 36px; }
.notfound .lead { margin-bottom: 32px; }
.notfound__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- Responsive ----------
   Desktop-first. 1080px: small laptops and tablets in landscape.
   960px: tablets, where the nav becomes the menu button. 640px: phones. */
@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .rates-layout { grid-template-columns: minmax(0, 1fr); }
  .estimator { position: relative; top: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Up to 1080px the full menu plus "Request care" doesn't fit in one line, so
   the links get tighter and the Staff portal link reads just "Staff" (screen
   readers still hear "Staff portal"). Below 961px the menu is hidden anyway. */
@media (max-width: 1080px) {
  .nav a { padding-inline: 9px; }
  .nav .nav__staff { margin-left: 9px; }
  .nav .nav__staff::before { left: -6px; }
  .nav__staff-more {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 960px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-grid; }
  .difference-grid, .where-grid, .contact-grid, .careers { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before, .steps::after { display: none; }
  .chord-cards { grid-template-columns: 1fr; }
  .orbit { width: min(380px, 100%); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --header-h: 68px; }
  .wordmark { font-size: 26px; }
  .hero__icon-wrap { width: 86px; height: 86px; }
  .app-icon { border-radius: 24px; }
  .hero__ctas .btn { width: 100%; }
  .trust__item { justify-content: flex-start; padding: 16px 12px; font-size: 10.5px; letter-spacing: .1em; gap: 10px; }
  .trust__item .icon { width: 19px; height: 19px; }
  .features, .team-grid, .form-grid, .steps { grid-template-columns: 1fr; }
  .estimate { grid-template-columns: 1fr 1fr; }
  .estimate div b { font-size: 24px; }
  .pay { grid-template-columns: 1fr; }
  .rate-row { grid-template-columns: 1fr; }
  .price { grid-row: auto; grid-column: 1; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .price b { font-size: 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-legal { flex-direction: column; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; } /* 2×2 tabs instead of a sideways scroll */
  .tab { white-space: normal; padding: 11px 10px; line-height: 1.25; border-radius: 16px; font-size: 14px; }
  .hero .eyebrow { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .eyebrow__sep { display: none; }
  .eyebrow__place { order: 2; flex-basis: 100%; text-align: center; }
  .chord-note text { display: none; } /* too small to read once the staff shrinks; the cards carry the labels */
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom) + 92px); } /* room for the back-to-top button */
  .orbit__member { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .orbit__face b { font-size: 21px; }
  .q-card blockquote { font-size: 22px; }
}

/* ---------- Motion preferences ----------
   Visitors who ask their device for less motion get every animation cut to an
   instant: content shows in its final state, rays and notes stay still, and the
   floating notes are hidden. The Web Audio chord still plays, but only on click. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .staff-line { stroke-dashoffset: 0; }
  .sn { opacity: 1; }
  .floaty { display: none; }
}

/* ---------- Print ----------
   Families often print the rates and contact details: print plain black on
   white, without decoration or interactive parts. */
@media print {
  .site-header, .to-top, .hero__rays, .hero__glow, .staff, .mobile-nav, .form-card, .orbit { display: none !important; }
  body { background: #fff; color: #000; }
  .band-dark { background: #fff; }
}