/* Generated by site/tools/build-css.mjs -- do not edit.
   Sources, in order: css/tokens/fonts.css, css/tokens/colors.css, css/tokens/typography.css, css/tokens/spacing.css, css/tokens/effects.css, css/tokens/base.css, css/site.css */

/* ---- css/tokens/fonts.css ---- */
/* Fluffy — webfonts, self-hosted.
   Rubik variable font (weights 400–700) + italic 400, latin subset.
   SUBSTITUTION for the outlined brand wordmark face — replace with real
   brand font files if/when available. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/rubik-var.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/rubik-italic.woff2") format("woff2");
}

/* ---- css/tokens/colors.css ---- */
/* Fluffy — color tokens.
   Exact brand colors from fluffy-logo-final.pdf (p.4):
     navy  #0A264A (RGB 10 39 73)
     gold  #C2A657 (RGB 194 166 87)
   All other steps are derived tints/shades of those two anchors. */
:root {
  /* ---- Brand anchors (exact) ---- */
  --navy: #0a264a;
  --gold: #c2a657;
  --white: #ffffff;

  /* ---- Navy scale (derived) ---- */
  --navy-950: #061a34;
  --navy-900: #0a264a; /* = --navy */
  --navy-800: #16345d;
  --navy-700: #1f3f6b;
  --navy-600: #2f5384;
  --navy-500: #46699b;
  --navy-400: #6c88b1;
  --navy-300: #9bafc9;
  --navy-200: #c4d1e1;
  --navy-100: #e2e9f1;
  --navy-50:  #f2f5f9;

  /* ---- Gold scale (derived) ---- */
  --gold-700: #8f7736;
  --gold-600: #a98e44;
  --gold-500: #c2a657; /* = --gold */
  --gold-400: #d1ba7d;
  --gold-300: #dfcda3;
  --gold-200: #ecdfc6;
  --gold-100: #f5eee0;
  --gold-50:  #faf7ef;

  /* ---- Cloud neutrals (warm, derived from gold family) ---- */
  --cloud-white: #fdfcfa;
  --cloud-100: #f7f5f0;
  --cloud-200: #eeeae1;

  /* ---- Semantic status (extensions; keep muted, navy-harmonised) ---- */
  --success: #2e7d5b;
  --success-bg: #e7f2ed;
  --warning: #a97b1f;
  --warning-bg: #f7efdc;
  --danger: #a8402f;
  --danger-bg: #f8e9e6;

  /* ---- Semantic aliases ---- */
  --text-heading: var(--navy-900);
  --text-body: #33455f;          /* navy-toned body gray */
  /* AA on every light surface we paint on: 5.83 on the sunken navy-50, 6.38 on card white */
  --text-muted: #536074;
  /* was #94a3b8, which came out at 2.34 on the sunken surface -- below the 4.5
     AA line and, on small labels, genuinely hard to read. Darkened to clear 4.5
     on every light surface. --text-muted moved with it to keep the three-step
     ramp in order, since 4.5 would otherwise have been darker than muted was. */
  --text-faint: #5e728d;
  --text-on-navy: #ffffff;
  --text-on-navy-muted: #b9c6d8;
  --text-on-gold: var(--navy-900);
  --text-link: #1f4f8f;

  --surface-page: var(--cloud-white);
  --surface-card: #ffffff;
  --surface-sunken: var(--navy-50);
  --surface-navy: var(--navy-900);
  --surface-navy-deep: var(--navy-950);
  --surface-gold-tint: var(--gold-100);

  --border-default: #dde4ed;
  --border-strong: #b9c6d8;
  --border-on-navy: rgba(255, 255, 255, 0.18);
  --border-gold: var(--gold-500);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --primary: var(--navy-900);
  --primary-hover: #16345d;

  --focus-ring: 0 0 0 3px rgba(194, 166, 87, 0.45);
  --overlay-navy: rgba(10, 38, 74, 0.55);
  --scrim: rgba(6, 26, 52, 0.6);
}

/* ---- css/tokens/typography.css ---- */
/* Fluffy — typography tokens. Single-family system (Rubik). */
:root {
  --font-sans: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);

  /* Type scale (1.25 ratio, 16 base) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --text-5xl: 61px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  /* Letter spacing */
  --tracking-display: -0.02em; /* wordmark-like headings */
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;  /* uppercase eyebrows/labels */
}

/* ---- css/tokens/spacing.css ---- */
/* Fluffy — spacing tokens. 4px base. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --container-max: 1140px;
  --section-pad-y: var(--space-20);
  --gutter: var(--space-6);
}

/* ---- css/tokens/effects.css ---- */
/* Fluffy — radii, shadows, motion.
   The identity is circular (badge, clouds) → generous rounding, pill controls. */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px; /* pill buttons, tags */

  /* Soft navy-tinted shadows ("cloud" elevation) */
  --shadow-sm: 0 1px 2px rgba(10, 38, 74, 0.06), 0 1px 3px rgba(10, 38, 74, 0.08);
  --shadow-md: 0 2px 4px rgba(10, 38, 74, 0.05), 0 6px 16px rgba(10, 38, 74, 0.1);
  --shadow-lg: 0 4px 8px rgba(10, 38, 74, 0.06), 0 16px 40px rgba(10, 38, 74, 0.16);
  --shadow-gold-glow: 0 0 0 1px rgba(194, 166, 87, 0.35), 0 4px 16px rgba(194, 166, 87, 0.25);

  /* Motion — one system for the whole site; no bounces.
     Two curves: ease-out (the glide) for anything entering or responding to a
     hover, ease-fade (symmetric) for crossfades and exits.
     Four durations: fast for hovers and presses, normal for menus, tabs and
     pills, slow for popups and form steps, reveal for scroll reveals and page
     changes. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-fade: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-normal: 260ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-reveal: 700ms; /* @kind other */
}

/* ---- css/tokens/base.css ---- */
/* Fluffy — minimal base + link styles */
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-decoration-color: rgba(31, 79, 143, 0.35); }
a:hover { color: var(--navy-900); text-decoration-color: currentColor; }
::selection { background: var(--gold-200); }

/* ---- css/site.css ---- */
/* ============================================================
   Fluffy — site stylesheet
   Reproduces the Fluffy Design System primitives (Button, Card,
   FluffyVerified, Input, Select, Checkbox) and page chrome as
   plain CSS. Design tokens come from css/tokens/*.css.
   ============================================================ */

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--text-link); }
a:hover { color: var(--navy-700); }
::selection { background: var(--gold-200); }

h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow--on-navy { color: var(--gold-400); }

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* six nav links, a login pill, the phone and the CTA have to share 1140px.
     Every item declares nowrap and flex-shrink:0 below, so the row is sized by
     its contents: if something new is added and no longer fits it overflows
     visibly here rather than silently wrapping a label onto two lines. */
  gap: 12px;
  height: 72px;
  padding: 0 24px;
}
.brand { display: flex; flex-shrink: 0; }
.brand img { height: 34px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  white-space: nowrap;
  border-radius: var(--radius-full);
  font-size: 14.5px;
  color: var(--navy-900);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.nav-link:hover { background: var(--navy-50); color: var(--navy-900); }
.nav-link.is-active {
  font-weight: 500;
  background: var(--navy-50);
}
.nav-link .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-500);
  display: inline-block;
}
.header-phone {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-900);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header .btn { flex-shrink: 0; white-space: nowrap; }
/* Six nav links, the login pill, the phone and the CTA do not all fit below the
   full 1140px container. The phone is the item to give up there: it is in the
   footer on every page, and below 1040px the sticky mobile bar carries a Call
   us button, so the number is never more than one scroll away. */
@media (max-width: 1139px) {
  .header-phone { display: none; }
}
.header-phone:hover { color: var(--gold-700); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--border-default);
  background: #fff;
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--navy-900);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              filter var(--duration-fast) var(--ease-out);
  outline: none;
}
.btn:active { filter: brightness(0.92); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn--full { display: flex; width: 100%; }

/* sizes */
.btn--sm { height: 36px; padding: 0 18px; font-size: 13px; gap: 6px; }
.btn--md { height: 44px; padding: 0 24px; font-size: 14.5px; gap: 8px; }
.btn--lg { height: 52px; padding: 0 30px; font-size: 16px; gap: 8px; }

/* variants */
.btn--primary { background: var(--primary); color: var(--text-on-navy); }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }

.btn--accent { background: var(--accent); color: var(--text-on-gold); }
.btn--accent:hover { background: var(--accent-hover); color: var(--navy-900); }

.btn--secondary { background: transparent; color: var(--navy-900); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--navy-50); border-color: var(--navy-400); color: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--navy-800); }
.btn--ghost:hover { background: var(--navy-50); color: var(--navy-800); }

.btn--on-navy { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: var(--border-on-navy); }
.btn--on-navy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* navy hero chips (Services hero) */
.chip-navy {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.chip-navy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---- Cards ---- */
.card {
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  font-family: var(--font-sans);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
}
.card--gold {
  background: var(--surface-gold-tint);
  border: 1px solid var(--gold-200);
  color: var(--navy-800);
  box-shadow: none;
}

/* ---- FluffyVerified pill ---- */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  background: #fff;
  border: 1px solid var(--border-default);
  color: var(--navy-900);
}
.verified img { height: 22px; width: auto; display: block; }
.verified svg { width: 13.5px; height: 13.5px; }
.verified--sm { height: 26px; padding: 0 10px; font-size: 12px; gap: 6px; }
.verified--sm img { height: 16px; }
.verified--sm svg { width: 12px; height: 12px; }

/* ---- Form fields ---- */
.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.field__label { font-size: 14px; font-weight: var(--weight-medium); color: var(--navy-900); }
.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.field__control:focus-within { border-color: var(--gold-500); box-shadow: var(--focus-ring); }
.field__control input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 400 15px var(--font-sans);
  color: var(--navy-900);
}
.field__select { position: relative; }
.field__select select {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: 400 15px var(--font-sans);
  color: var(--navy-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.field__select select:focus { border-color: var(--gold-500); box-shadow: var(--focus-ring); }
.field__select svg {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  pointer-events: none;
}
textarea.field__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: 400 15px var(--font-sans);
  color: var(--navy-900);
  resize: vertical;
  outline: none;
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
textarea.field__textarea:focus { border-color: var(--gold-500); box-shadow: var(--focus-ring); }

/* checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 20px; height: 20px;
  margin: 0;
  cursor: pointer;
}
.checkbox__box {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1.5px solid var(--border-strong);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.checkbox__box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}
.checkbox input:checked + .checkbox__box {
  background: var(--navy-900);
  border-color: var(--navy-900);
}
.checkbox input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { box-shadow: var(--focus-ring); }
.checkbox__label { font-size: 14.5px; color: var(--text-body); }

/* ---- Reusable link + pill helpers ---- */
.link-gold {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gold-700);
  text-decoration: none;
}
.link-gold:hover { color: var(--gold-600); }
/* .link-gold is gold-700, which is built for light surfaces. On a navy section
   it lands at 3.5:1. gold-400 is the navy-side gold and clears 8. */
.link-gold--on-navy { color: var(--gold-400); }
.link-gold--on-navy:hover { color: #fff; }

.tag-pill {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-800);
  background: var(--navy-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.tag-pill:hover { background: var(--navy-100); color: var(--navy-800); }

.new-chip {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-700);
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.new-chip:hover { background: var(--gold-200); color: var(--gold-700); }

/* sparkle bullet rows */
.spark { color: var(--gold-500); }

/* client-logo strip marks (SVG recreations; swap for real logo files when available) */
.client-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
}

/* ---- Footer ---- */
.site-footer { background: var(--surface-navy-deep); color: #fff; }
.site-footer__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: grid;
  /* Five link columns rather than four stacked pairs, with the nineteen service
     areas lifted out into a full-width band underneath. The footer is then as
     tall as its tallest single list instead of as tall as two lists stacked.
     Widths are set so nothing wraps: Company needs room for two columns, and
     Contact for the street address on one line. */
  grid-template-columns: 1.6fr 0.85fr 1.05fr 1.65fr 1.25fr;
  gap: 22px 30px;
}
.footer-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 12px;
}
.footer-col-links { display: flex; flex-direction: column; gap: 6px; }
/* The nine Company links read as two short columns rather than one long one.
   Column flow rather than row flow, so the list reads down then across, and the
   two longest labels (Fee calculator, Printable checklist) land either side of
   the break where the wider second column can hold them without wrapping. */
.footer-col-links--split {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6px 16px;
}
/* Service areas: a full-width band beneath the columns. auto-fill means the
   markets reflow to as many columns as the width allows, so adding a city makes
   the band wider rather than taller until it genuinely runs out of room. */
.footer-areas { grid-column: 1 / -1; border-top: 1px solid var(--border-on-navy); padding-top: 18px; }
/* the heading row of the areas band is otherwise empty to the right, so the
   social links ride along in it and cost no extra height at all */
.footer-areas__top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.footer-areas__top .footer-heading { margin-bottom: 12px; }
.footer-col-links--areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 7px 18px;
}
.footer-social { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.site-footer__areas a { color: inherit; text-decoration: none; }
.area-link { color: inherit; text-decoration: none; }
.area-link:hover { text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
.site-footer__areas a:hover { text-decoration: underline; }
.footer-link {
  font-size: 13.5px;
  color: var(--text-on-navy-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.footer-link:hover { color: #fff; }
.footer-link--gold { color: var(--gold-400); }
.footer-link--gold:hover { color: #fff; }
.site-footer__bar { border-top: 1px solid var(--border-on-navy); }
.site-footer__bar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  gap: 10px 26px;
  /* the two spans together need just over the container width at 12.5px, which
     left "Privacy" and "Outer Banks" orphaned on their own lines */
  font-size: 12px;
  color: var(--text-on-navy-muted);
}

/* ---- Scroll reveal (applied by js/reveal.js) ---- */
.reveal { opacity: 0; transform: translateY(16px); }
/* Print never inherits a half-finished reveal. Blocks reveal.js has not yet
   scrolled into view carry an inline opacity of 0; !important beats it. */
@media print {
  .reveal, [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .rv-wi { transform: none !important; transition: none !important; }
}
/* Headings rise into place line by line from behind a mask. reveal.js wraps
   each word; the padding and matching negative margin give descenders and
   accents room inside the mask without changing the line box. */
.rv-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.16em; margin: -0.1em 0 -0.16em; }
.rv-wi { display: inline-block; transform: translateY(108%); transition: transform 820ms var(--ease-out); }
.rv-in .rv-wi { transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  /* A cloud-white panel with a glass edge that slides down and fades in, links
     arriving one after another. visibility keeps the closed menu out of the tab
     order. It is solid rather than frosted: the header is a backdrop root (it
     carries a backdrop-filter and a view-transition-name), so nothing inside it
     can blur the page behind, and a see-through menu over the navy hero would
     let the white headline ghost through. */
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--cloud-white);
    border-bottom: 1px solid rgba(255,255,255,0.8);
    border-radius: 0 0 22px 22px;
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px rgba(10,38,74,0.14);
    display: flex;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--duration-fast) var(--ease-fade),
                transform var(--duration-fast) var(--ease-fade),
                visibility 0s linear var(--duration-fast);
  }
  .nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                visibility 0s;
  }
  .nav > * { opacity: 0; transform: translateY(-4px); transition: opacity var(--duration-fast) var(--ease-fade), transform var(--duration-fast) var(--ease-fade); }
  .nav.is-open > * { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
  .nav.is-open > :nth-child(2) { transition-delay: 30ms; }
  .nav.is-open > :nth-child(3) { transition-delay: 60ms; }
  .nav.is-open > :nth-child(4) { transition-delay: 90ms; }
  .nav.is-open > :nth-child(5) { transition-delay: 120ms; }
  .nav.is-open > :nth-child(6) { transition-delay: 150ms; }
  .nav.is-open > :nth-child(n+7) { transition-delay: 180ms; }
  .site-header__inner { position: relative; gap: 16px; }
  .nav-toggle { display: inline-flex; }
  .header-phone, .site-header .btn { display: none; }

  /* stack the common two/three/four-column grids */
  .grid-2, .grid-3, .grid-4,
  .split { grid-template-columns: 1fr !important; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .footer-col-links--split { grid-template-columns: 1fr 1fr; }
  .site-footer__bar-inner { flex-direction: column; }
}

@media (max-width: 620px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .footer-col-links--split { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 34px !important; }
}

/* ---- Service-area map (home; drawn by site/tools/build-map.mjs) ----
   A navy sea, the coast in lighter navy with a gold hairline, pins and place
   names laid over it in HTML so text stays crisp at every zoom. */
.area-map {
  position: relative;
  height: 520px;
  border-radius: var(--radius-xl);
  /* clip, not hidden: a hidden box can still be scrolled by the browser when a
     pin near the edge takes focus, which slides the whole map sideways */
  overflow: hidden; overflow: clip;
  background: var(--navy-950);
  box-shadow: 0 24px 60px rgba(6, 26, 52, 0.28);
  isolation: isolate;
}
.area-map::after {
  content: ""; position: absolute; inset: 12px; z-index: 5; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
}
.area-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-depth { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-land {
  fill: #1d4577;
  stroke: rgba(209, 186, 125, 0.55); stroke-width: 0.8; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-detail { display: none; }
.map-detail.is-on { display: inline; }
.map-lakes { fill: #0a2446; stroke: rgba(209, 186, 125, 0.3); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.map-states { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.map-routes path { fill: none; stroke: rgba(209, 186, 125, 0.6); stroke-width: 1.2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.map-routes { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); }
.area-map[data-region="lowcountry"] .map-routes { opacity: 1; }

/* overlay: pins, place names and the metro chip, moved by main.js each frame */
.map-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; overflow: clip; }
.map-pin, .map-label, .map-cluster { position: absolute; left: 0; top: 0; will-change: transform; }
.map-pin {
  pointer-events: auto;
  background: none; border: 0; padding: 8px; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal);
}
.map-pin.is-in { opacity: 1; visibility: visible; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s; }
.map-pin:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 0; border-radius: 50%; }
.map-pin__dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 5px rgba(194, 166, 87, 0.2);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
/* the office: a white dot in a gold ring */
.map-pin--office .map-pin__dot { background: #fff; box-shadow: 0 0 0 3px var(--gold-500), 0 0 0 8px rgba(194, 166, 87, 0.18); }
/* a market with its own local team: a gold ring around a dot */
.map-pin--team .map-pin__dot {
  width: 16px; height: 16px;
  background: radial-gradient(circle, var(--gold-400) 0 3.5px, rgba(6, 26, 52, 0.6) 4px);
  box-shadow: inset 0 0 0 2px var(--gold-400), 0 0 0 5px rgba(194, 166, 87, 0.18);
}
.map-pin__badge {
  display: block; height: 30px; width: auto;
  filter: drop-shadow(0 0 10px rgba(194, 166, 87, 0.55));
  transition: transform var(--duration-fast) var(--ease-out);
}
/* the whole coast: places a chip sums up shrink and stop taking taps */
.map-pin.is-grouped { pointer-events: none; }
.area-map[data-level="coast"] .map-pin--area .map-pin__dot,
.area-map[data-level="coast"] .map-pin--office .map-pin__dot { transform: scale(0.7); }
.area-map[data-level="coast"] .map-pin--laundry .map-pin__badge { height: 24px; }
.map-pin:hover .map-pin__dot, .map-pin.is-hot .map-pin__dot, .map-pin.is-picked .map-pin__dot { transform: scale(1.35); }
.map-pin.is-picked .map-pin__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(194, 166, 87, 0.35); }
.map-pin:hover .map-pin__badge, .map-pin.is-hot .map-pin__badge, .map-pin.is-picked .map-pin__badge { transform: scale(1.15); }

/* labels sit on the side main.js picks; "none" means no room, shown on hover */
.map-pin__lbl {
  position: absolute; left: calc(100% - 3px); top: 50%; transform: translateY(-50%);
  font: 500 12px/1.25 var(--font-sans); color: rgba(255, 255, 255, 0.94);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 3px rgba(6, 26, 52, 0.95), 0 0 10px rgba(6, 26, 52, 0.8);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.map-pin--team .map-pin__lbl, .map-pin--laundry .map-pin__lbl, .map-pin--office .map-pin__lbl { font-weight: 600; }
.map-pin[data-side="left"] .map-pin__lbl { left: auto; right: calc(100% - 3px); }
.map-pin[data-side="top"] .map-pin__lbl { left: 50%; top: auto; bottom: calc(100% - 5px); transform: translateX(-50%); }
.map-pin[data-side="bottom"] .map-pin__lbl { left: 50%; top: calc(100% - 5px); transform: translateX(-50%); }
.map-pin[data-side="tr"] .map-pin__lbl { left: calc(100% - 6px); top: auto; bottom: calc(100% - 6px); transform: none; }
.map-pin[data-side="br"] .map-pin__lbl { left: calc(100% - 6px); top: calc(100% - 6px); transform: none; }
.map-pin[data-side="tl"] .map-pin__lbl { left: auto; right: calc(100% - 6px); top: auto; bottom: calc(100% - 6px); transform: none; }
.map-pin[data-side="bl"] .map-pin__lbl { left: auto; right: calc(100% - 6px); top: calc(100% - 6px); transform: none; }
.map-pin[data-side="none"] .map-pin__lbl { opacity: 0; }
.map-pin[data-side="none"]:is(:hover, :focus-visible, .is-hot, .is-picked) .map-pin__lbl {
  opacity: 1; padding: 3px 8px; border-radius: 999px;
  background: rgba(6, 26, 52, 0.85); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.area-map.is-moving .map-pin__lbl { opacity: 0; transition-duration: 90ms; }

.map-label {
  pointer-events: none; white-space: nowrap; text-transform: uppercase;
  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
}
.map-label.is-in { opacity: 1; }
.map-label.is-in.is-blocked { opacity: 0; }
.map-label--state { font: 600 10.5px var(--font-sans); letter-spacing: 0.32em; color: rgba(255, 255, 255, 0.34); }
.map-label--water { font: italic 500 11px var(--font-sans); letter-spacing: 0.28em; color: rgba(173, 196, 226, 0.45); }

.map-cluster {
  pointer-events: auto; z-index: 3;
  font: 500 12px var(--font-sans); color: #fff; white-space: nowrap; cursor: pointer;
  background: rgba(6, 26, 52, 0.72); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full); padding: 7px 13px;
  box-shadow: 0 6px 18px rgba(2, 12, 26, 0.35);
  transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
.map-cluster span { color: var(--gold-400); }
.map-cluster:hover, .map-cluster.is-hot { background: rgba(20, 52, 94, 0.92); border-color: rgba(209, 186, 125, 0.6); }
.area-map:not([data-level="coast"]) .map-cluster { opacity: 0; visibility: hidden; }

/* where you are: the coast, or coast › region */
.map-crumbs { position: absolute; top: 20px; left: 20px; z-index: 6; display: flex; align-items: center; gap: 6px; }
.map-crumb {
  font: 500 12.5px var(--font-sans); color: #fff; white-space: nowrap;
  background: rgba(6, 26, 52, 0.6); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-full); padding: 7px 14px;
}
button.map-crumb { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
button.map-crumb:hover { background: rgba(20, 52, 94, 0.9); }
.area-map[data-level="coast"] .map-crumb--coast,
.map-crumb--here { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.area-map[data-level="coast"] .map-crumb--coast { cursor: default; }
.area-map[data-level="region"] .map-crumb--coast::before { content: "\2190\00a0"; }
.map-crumb--here[hidden] { display: none; }

.map-legend {
  position: absolute; left: 20px; bottom: 18px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: min(360px, calc(100% - 250px));
  padding: 8px 12px; border-radius: 14px;
  background: rgba(6, 26, 52, 0.6); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 11.5px var(--font-sans); color: rgba(255, 255, 255, 0.82);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.lg--laundry { width: 11px; height: 12px; border-radius: 3px; background: var(--gold-400); box-shadow: 0 0 8px rgba(194, 166, 87, 0.7); }
.lg--office { background: #fff; box-shadow: 0 0 0 2px var(--gold-500); width: 8px; height: 8px; }
.lg--area { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--gold-400); }
.lg--team { width: 11px; height: 11px; background: radial-gradient(circle, var(--gold-400) 0 2.5px, transparent 3px); box-shadow: inset 0 0 0 1.5px var(--gold-400); }
.area-map.has-card .map-legend { opacity: 0; pointer-events: none; }

.map-cred { position: absolute; right: 22px; bottom: 20px; z-index: 6; font-size: 10.5px; color: rgba(255, 255, 255, 0.45); }

/* the area card: a light glass panel over the dark map */
.map-card {
  position: absolute; z-index: 8; left: 20px; bottom: 20px;
  width: min(310px, calc(100% - 40px));
  padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(253, 252, 250, 0.95);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 18px 50px rgba(2, 12, 26, 0.45);
  color: var(--text-body);
  opacity: 0; transform: translateY(12px);
  transition: opacity 200ms var(--ease-fade), transform 220ms var(--ease-fade);
}
.map-card.is-open { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-out), transform 520ms var(--ease-out); }
.map-card__x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--navy-700);
}
.map-card__x:hover { background: var(--navy-50); }
.map-card__eyebrow { font: 600 11px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); padding-right: 30px; }
.map-card__title { margin: 5px 0 6px; font: 600 20px/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-heading); padding-right: 24px; }
.map-card__via { margin: -2px 0 7px; font-size: 12.5px; font-weight: 600; color: var(--gold-700); }
.map-card__note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--navy-700); }
.map-card__note::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.map-card__note--team::before { background: radial-gradient(circle, var(--gold-500) 0 2px, transparent 2.5px); box-shadow: inset 0 0 0 1.5px var(--gold-500); width: 10px; height: 10px; }
.map-card__note--office::before { background: #fff; box-shadow: 0 0 0 2px var(--gold-500); }
.map-card__blurb { margin: 9px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.map-card__link { font-size: 13.5px; }

/* "Do you cover my area?": a frosted field with a glass results list */
.area-find { position: relative; max-width: 470px; margin: 0 0 28px; }
.area-find__label { display: block; margin-bottom: 8px; font: 600 14.5px var(--font-sans); color: var(--text-heading); }
.area-find__box { position: relative; }
.area-find__box svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: var(--gold-700); pointer-events: none; }
.area-find__input {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 18px 0 42px;
  border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 #fff, 0 6px 20px rgba(10, 38, 74, 0.08);
  font: 400 15.5px var(--font-sans); color: var(--text-heading); outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.area-find__input::placeholder { color: var(--text-muted); }
.area-find__input:focus { border-color: var(--gold-500); background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 3px rgba(194, 166, 87, 0.25), 0 6px 20px rgba(10, 38, 74, 0.08); }
.area-find__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow: auto;
  border-radius: 16px; background: rgba(253, 252, 250, 0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(10, 38, 74, 0.18);
}
.area-find__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.area-find__list li[aria-selected="true"], .area-find__list li:hover { background: rgba(194, 166, 87, 0.16); }
.area-find__name { font-size: 15px; font-weight: 500; color: var(--text-heading); }
.area-find__where { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.area-find__msg { margin: 10px 4px 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.area-find__msg a { color: var(--gold-700); font-weight: 600; }

/* the list beside the map, grouped by market */
.area-list { display: grid; gap: 24px; max-width: 470px; }
.area-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(10, 38, 74, 0.1);
}
.area-group__btn, .area-group__title { font: 600 16px var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-heading); }
.area-group__btn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.area-group__btn::after { content: " \2922"; color: var(--gold-600); font-size: 13px; }
.area-group__btn:hover { color: var(--gold-700); }
.area-group__meta { font-size: 12.5px; color: var(--text-muted); }
.area-list, .area-list * { min-width: 0; }
.area-group__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.area-item { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 15px; color: var(--text-heading); }
.area-link { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a.area-link:hover, .area-item.is-hot .area-link { color: var(--gold-700); }
.area-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted);
  border: 1px solid rgba(10, 38, 74, 0.14); border-radius: var(--radius-full); padding: 1px 7px;
}
.area-show {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; color: var(--gold-700); opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.area-show svg { width: 14px; height: 14px; fill: currentColor; }
.area-show:hover, .area-show:focus-visible, .area-item.is-hot .area-show { opacity: 1; background: rgba(194, 166, 87, 0.16); }
@media (hover: none) { .area-show { opacity: 0.9; } }

@media (max-width: 1040px) { .area-map { height: 480px; } .area-list { max-width: none; } }
@media (max-width: 620px) {
  .area-map { height: 460px; border-radius: 20px; }
  .area-group:last-child .area-group__list { grid-template-columns: minmax(0, 1fr); }
  .area-group__list { gap: 4px 12px; }
  .area-item { font-size: 14.5px; gap: 6px; }
  .area-group:first-child .area-tag { display: none; }   /* the map shows the office and laundry */
  .map-crumbs { top: 16px; left: 16px; }
  .map-legend { left: 14px; bottom: 30px; max-width: calc(100% - 28px); }
  .map-cred { right: 16px; bottom: 12px; font-size: 9.5px; }
  .map-card { left: 10px; right: 10px; bottom: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .map-card, .map-pin, .map-label, .map-routes { transition: none; }
}


/* ---- Sticky mobile action bar ---- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(6, 26, 52, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-on-navy);
}
.mobile-cta .btn { flex: 1; }
@media (max-width: 1040px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 74px; }
}

/* ---- Design-review batch 2 ---- */

/* clickable cards: lift on hover, whole card is the target */
.card--link {
  position: relative;
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card--link .stretch::after { content: ""; position: absolute; inset: 0; }
.card--link .tag-pill,
.card--link .new-chip { position: relative; z-index: 1; }

/* quiet gold dot for dense feature lists (✦ reserved for accents) */
.li-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* gold anchor chip (Services hero — Linen Subscription) */
.chip-gold {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-900);
  background: var(--gold-500);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.chip-gold:hover { background: var(--gold-400); color: var(--navy-900); }

/* partner logos: muted at rest, full color on hover */
.client-item .client-logo {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.client-item:hover .client-logo { filter: none; opacity: 1; }

/* announcement bar */
.announce {
  position: relative;
  background: var(--gold-100);
  border-bottom: 1px solid var(--gold-200);
  text-align: center;
  padding: 9px 48px;
  font-size: 13px;
}
.announce a { color: var(--navy-900); font-weight: 500; text-decoration: none; }
.announce a:hover { color: var(--gold-700); }
.announce a span { color: var(--gold-700); }
.announce__x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none;
  background: none;
  color: var(--gold-700);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-full);
}
.announce__x:hover { background: var(--gold-200); }
.announce.is-dismissed { display: none; }

/* branded keyboard focus for everything the .btn ring doesn't cover */
:focus-visible:not(.btn) {
  outline: 3px solid rgba(194, 166, 87, 0.55);
  outline-offset: 2px;
}

/* ============================================================
   Motion polish — professional micro-interactions
   Transform/opacity/shadow only (GPU-friendly). Every rule is
   gated on prefers-reduced-motion so it collapses to static.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Buttons: hover lift + tactile press. Extend the transition so the
     transform/shadow ease instead of snapping. */
  .btn {
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                filter var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }
  .btn--primary:hover,
  .btn--accent:hover,
  .btn--secondary:hover,
  .btn--ghost:hover,
  .btn--on-navy:hover { transform: translateY(-1px); }
  .btn--primary:hover { box-shadow: 0 6px 18px rgba(10, 38, 74, 0.20); }
  .btn--accent:hover  { box-shadow: 0 6px 18px rgba(194, 166, 87, 0.38); }
  /* press settles the button back down — reads as a physical push */
  .btn:active { transform: translateY(0); }

  /* hero-anchor chips get the same quiet lift */
  .chip-navy:hover, .chip-gold:hover, .new-chip:hover { transform: translateY(-1px); }

  /* Interactive cards: warm the border to gold as they lift */
  .card--link { transition: box-shadow var(--duration-normal) var(--ease-out),
                            background var(--duration-normal) var(--ease-out),
                            transform var(--duration-normal) var(--ease-out),
                            border-color var(--duration-normal) var(--ease-out); }
  .card--link:hover { border-color: var(--gold-300); }

  /* Text links: underline grows in from the left on hover */
  .link-gold, .footer-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size var(--duration-normal) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
  }
  .link-gold:hover, .footer-link:hover { background-size: 100% 1.5px; }

  /* The sticky header's scrolled state lives under "Interaction polish" below */

  /* Forward arrows nudge right on hover (announce bar, link arrows) */
  .announce a span { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
  .announce a:hover span { transform: translateX(3px); }
}

/* ---- Lead capture popup — "Linen Fold" ----
   A cream card creased once on the diagonal, like a pressed sheet. Squared
   corners deliberately set it apart from the rounded cards used elsewhere. */
.leadpop-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 26, 52, 0.42);
  /* the page behind softens rather than just darkening */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 220ms var(--ease-fade);
}
.leadpop-overlay.is-open { opacity: 1; transition: opacity var(--duration-slow) var(--ease-fade); }
.leadpop {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 22px)) scale(0.98);
  width: min(440px, calc(100vw - 40px));
  background: var(--cloud-white);
  /* hairline keeps the card defined where it lands on a light section */
  border: 1px solid rgba(10, 38, 74, 0.09);
  border-radius: 4px;
  padding: 34px 32px 28px;
  box-shadow: 0 30px 70px rgba(2, 12, 26, 0.5);
  /* closing: quick and symmetric. Opening (below): a slower glide up into place */
  opacity: 0; transition: opacity 200ms var(--ease-fade), transform 220ms var(--ease-fade);
}
.leadpop.is-open {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity var(--duration-slow) var(--ease-out), transform 560ms var(--ease-out);
}
/* the crease: a soft tonal band, then a gold hairline that fades out before it
   reaches the form so it reads as a fold in paper, not a line over the controls */
.leadpop::before,
.leadpop::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; }
.leadpop::before {
  background: linear-gradient(103deg, rgba(10, 38, 74, 0.045) 0 38%, rgba(255, 255, 255, 0) 38.4%);
}
.leadpop::after {
  background: linear-gradient(103deg, transparent 37.7%, rgba(194, 166, 87, 0.6) 37.7%, rgba(194, 166, 87, 0.6) 38.1%, transparent 38.1%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 54%);
  mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 54%);
}
.leadpop > * { position: relative; z-index: 1; }
.leadpop__x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: none; border: 0; color: var(--text-faint);
  font-size: 22px; line-height: 1; padding: 8px; cursor: pointer;
}
.leadpop__x:hover { color: var(--text-heading); }
.leadpop__eyebrow {
  font: 600 12px var(--font-sans); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--gold-700); margin: 0 0 10px;
}
.leadpop__title {
  margin: 0 0 10px; font: 600 26px/1.15 var(--font-display);
  letter-spacing: var(--tracking-display); color: var(--text-heading);
}
.leadpop__copy { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.leadpop__row { display: flex; gap: 10px; }
.leadpop__email {
  flex: 1; min-width: 0; padding: 12px 15px; font: 500 14.5px var(--font-sans);
  color: var(--text-heading); background: #fff;
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
}
.leadpop__email::placeholder { color: var(--text-faint); }
.leadpop__fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.leadpop__err { margin: 10px 0 0; font-size: 13px; color: var(--danger); display: none; }
.leadpop__trust {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px 15px;
}
.leadpop__trust li {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-muted);
}
.leadpop__trust li::before { content: "✓"; color: var(--gold-700); font-weight: 700; }
.leadpop__qlabel { margin: 18px 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.leadpop__qrow { display: flex; gap: 8px; flex-wrap: wrap; }
.leadpop__q {
  cursor: pointer; padding: 7px 15px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-heading);
  font: 600 13.5px var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.leadpop__q:hover:not(:disabled) { border-color: var(--gold-500); background: var(--gold-50); }
.leadpop__q.is-picked { border-color: var(--gold-500); background: var(--gold-100); }
.leadpop__q:disabled { cursor: default; opacity: 0.55; }
.leadpop__q.is-picked:disabled { opacity: 1; }
.leadpop__qhint { margin: 9px 0 16px; font-size: 12px; color: var(--text-faint); }
.leadpop__err a { color: inherit; }
.leadpop__done { display: none; }
/* scoped to direct children: the confirmation message inside .leadpop__done
   also carries .leadpop__copy and must survive the swap */
.leadpop.is-done > .leadpop__form, .leadpop.is-done > .leadpop__copy { display: none; }
.leadpop.is-done .leadpop__done { display: block; }
@media (max-width: 1040px) {
  .leadpop-overlay { display: none; }
  .leadpop {
    left: 12px; right: 12px; top: auto; bottom: 86px;
    width: auto; transform: translateY(24px) scale(0.98);
    padding: 26px 22px 22px;
  }
  .leadpop.is-open { transform: translateY(0) scale(1); }
  .leadpop__title { font-size: 21px; }
  .leadpop__row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .leadpop, .leadpop-overlay { transition: none; }
}

/* ---- CTA trust line (proof at the point of decision) ---- */
.cta-trust {
  margin: 14px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 13px; line-height: 1.5; color: var(--text-on-navy-muted);
}
.cta-trust span { display: inline-flex; align-items: baseline; gap: 6px; }
.cta-trust span::before { content: "✓"; color: var(--gold-400); font-weight: 700; }
.cta-trust--on-gold { color: var(--navy-800); }
.cta-trust--on-gold span::before { color: var(--gold-700); }
@media (max-width: 900px) { .cta-trust { gap: 4px 14px; font-size: 12.5px; } }

/* ---- Skip link (first focusable element; visible only on keyboard focus) ---- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--surface-navy-deep); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-full);
  font: 600 14px var(--font-sans); text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---- PMS grid (Booking integration) ---- */
.pms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1040px) { .pms-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pms-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- FluffyOS client login (header) ---- */
.nav-login {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 7px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  font: 500 13.5px var(--font-sans); color: var(--navy-900);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.nav-login:hover {
  border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-50);
}
.nav-login__ext { font-size: 11px; opacity: 0.75; }
@media (max-width: 1040px) {
  /* the dropdown stacks full width; separate the login from the page links */
  .nav-login {
    margin: 8px 0 0; justify-content: center;
    border-top: 1px solid var(--border-default); border-radius: var(--radius-full);
  }
}

/* ============================================================
   FluffyOS page
   ============================================================ */
/* portal mock: a stylised Operations view drawn with the real vocabulary */
.os-mock {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(6, 26, 52, 0.35));
  overflow: hidden;
}
.os-mock__bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--navy-950); padding: 11px 16px;
}
.os-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.os-mock__title {
  margin-left: 8px; font: 600 12px var(--font-sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-on-navy-muted);
}
.os-mock__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-400);
}
.os-mock__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500);
}
.os-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px 14px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--border-default);
}
.os-row:last-child { border-bottom: 0; }
.os-row__unit { min-width: 0; }
.os-row__name {
  font: 600 14px var(--font-sans); color: var(--text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-row__meta { margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-badge {
  display: inline-flex; padding: 4px 10px; border-radius: var(--radius-full);
  font: 600 11.5px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.os-badge--flip { background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-300); }
.os-badge--depart { background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--navy-200); }
.os-badge--deep { background: var(--navy-900); color: #fff; border: 1px solid var(--navy-900); }
.os-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-full); font: 600 11.5px var(--font-sans); white-space: nowrap;
}
.os-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.os-status--ready { background: var(--success-bg); color: var(--success); }
.os-status--late { background: var(--warning-bg); color: var(--warning); }
.os-status--overdue { background: var(--danger-bg); color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .os-status--late::before { animation: os-pulse 1.6s ease-in-out infinite; }
  @keyframes os-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* hour-by-hour timeline */
.os-tl { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.os-tl::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border-strong);
}
.os-tl__item { position: relative; padding: 0 0 30px; }
.os-tl__item:last-child { padding-bottom: 0; }
.os-tl__item::before {
  content: ""; position: absolute; left: -27px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-500); border: 2px solid var(--surface-page);
}
.os-tl__time {
  font: 700 12.5px var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-700); margin: 0 0 5px;
}
.os-tl__head { margin: 0 0 5px; font: 600 17px/1.3 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-heading); }
.os-tl__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }

/* trust columns on navy */
.os-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.os-trust li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  font-size: 14.5px; line-height: 1.55; color: var(--text-on-navy-muted);
}
.os-trust li::before {
  font: 700 12px var(--font-sans); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
}
.os-trust--see li::before { content: "\2713"; color: var(--gold-400); border: 1px solid rgba(194,166,87,0.45); }
.os-trust--never li::before { content: "\00d7"; color: var(--text-on-navy-muted); border: 1px solid var(--border-on-navy); }

/* ---- FluffyOS dashboard recreation (demo data) ---- */
.osd-wrap { overflow-x: auto; }
.osd {
  min-width: 960px; display: grid; grid-template-columns: 205px 1fr;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 30px 70px rgba(6, 26, 52, 0.16);
  text-align: left;
}
.osd__side { background: #fff; border-right: 1px solid var(--border-default); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.osd__brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 14px; }
.osd__brand img { height: 26px; }
.osd__brand span { font: 700 16.5px var(--font-display); color: var(--text-heading); }
.osd__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px;
  font: 500 13.5px var(--font-sans); color: var(--text-body);
}
.osd__item.is-on { background: var(--gold-50); color: var(--text-heading); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold-500); }
.osd__ic { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.65; }
.osd__item.is-on .osd__ic { opacity: 1; color: var(--gold-700); }
.osd__signout { margin-top: 14px; border-top: 1px solid var(--border-default); border-radius: 0; padding-top: 14px; color: var(--text-muted); }
/* the mascot sits free on the tab: never clipped to a circle */
.osd-nuvem__m { width: 30px; height: 30px; object-fit: contain; display: block; }
.osd__main { background: var(--cloud-100); padding: 18px 22px 22px; }
.osd__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.osd__search {
  flex: 1; max-width: 420px; padding: 9px 16px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--border-default);
  font-size: 13px; color: var(--text-faint);
}
.osd__acct { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.osd__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font: 700 13px var(--font-sans); }
.osd__acct-name { font: 600 13px var(--font-sans); color: var(--text-heading); line-height: 1.25; }
.osd__acct-mail { font-size: 11.5px; color: var(--text-muted); }
.osd__h1 { margin: 0 0 14px; font: 700 24px var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-heading); }
.osd__h1 small { font: 400 17px var(--font-display); color: var(--text-muted); }
.osd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-bottom: 14px; }
.osd-day { background: #fff; border: 1px solid var(--border-default); border-radius: 11px; padding: 11px 12px 10px; }
.osd-day.is-sel { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.osd-day__row { display: flex; justify-content: space-between; align-items: baseline; }
.osd-day__dow { font: 600 10.5px var(--font-sans); letter-spacing: 0.08em; color: var(--text-muted); }
.osd-day__num { font: 700 19px var(--font-display); color: var(--text-heading); }
.osd-day__sub { margin: 2px 0 8px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.osd-meter { display: grid; grid-template-columns: 38px 1fr 16px; gap: 6px; align-items: center; margin-top: 4px; }
.osd-meter__lbl { font: 600 9px var(--font-sans); letter-spacing: 0.07em; color: var(--text-muted); }
.osd-meter__bar { height: 4px; border-radius: 2px; background: var(--navy-100); overflow: hidden; }
.osd-meter__bar i { display: block; height: 100%; background: var(--navy-600); }
.osd-meter__n { font: 600 10.5px var(--font-sans); color: var(--text-heading); text-align: right; }
.osd-flag {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px;
  background: var(--warning-bg); border: 1px solid rgba(169, 123, 31, 0.35); border-radius: 11px;
  font-size: 13px; color: var(--warning-ink, #6e4708);
}
.osd-flag b { color: var(--text-heading); font-weight: 600; }
.osd-flag a { margin-left: auto; font: 600 12.5px var(--font-sans); color: var(--gold-700); white-space: nowrap; }
.osd-cols { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.osd-card { background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 16px; }
.osd-card__t { display: flex; justify-content: space-between; align-items: baseline; font: 600 15px var(--font-display); color: var(--text-heading); margin-bottom: 6px; }
.osd-card__t small { font: 400 11.5px var(--font-sans); color: var(--text-muted); }
.osd-pct { font: 700 42px/1 var(--font-display); color: var(--text-heading); }
.osd-pct small { font-size: 20px; color: var(--text-muted); }
.osd-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; }
.osd-trip { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--border-default); border-radius: 9px; overflow: hidden; margin-bottom: 12px; }
.osd-trip div { padding: 9px 6px; text-align: center; }
.osd-trip b { display: block; font: 700 17px var(--font-display); color: var(--success); }
.osd-trip div + div { border-left: 1px solid var(--border-default); }
.osd-trip div:nth-child(2) b { color: var(--text-muted); }
.osd-trip .at-risk { background: var(--warning-bg); }
.osd-trip .at-risk b { color: var(--warning); }
.osd-trip span { font: 600 8.5px var(--font-sans); letter-spacing: 0.08em; color: var(--text-muted); }
.osd-msg { display: block; text-align: center; padding: 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); font: 600 12.5px var(--font-sans); color: var(--text-heading); }
.osd-unit { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border-default); }
.osd-unit:last-child { border-bottom: 0; }
.osd-unit__name { font: 600 14px var(--font-sans); color: var(--text-heading); }
.osd-unit__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.osd-unit__spacer { flex: 1; }
.osd-pill { padding: 5px 11px; border-radius: var(--radius-full); font: 600 11.5px var(--font-sans); white-space: nowrap; }
.osd-pill--crew { background: var(--navy-50); color: var(--navy-700); }
.osd-pill--guests { border: 1px solid var(--border-strong); color: var(--text-heading); }
.osd-nuvem {
  position: absolute; right: 16px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-full);
  font: 600 13px var(--font-sans); color: var(--text-heading);
  box-shadow: 0 8px 22px rgba(6, 26, 52, 0.14);
}
.osd-nuvem img { height: 20px; }

/* ---- Nuvem demo popup (FluffyOS recreation) ---- */
.osd-nuvem { cursor: pointer; font: 600 13px var(--font-sans); border: 1px solid var(--gold-300); }
.osd-nuvem:hover { border-color: var(--gold-500); }

.osd-chat {
  position: absolute; right: 16px; bottom: 62px; z-index: 5;
  width: min(340px, calc(100% - 32px));
  background: #fff; border: 1px solid var(--border-default); border-radius: 22px;
  box-shadow: 0 24px 56px rgba(6, 26, 52, 0.24);
  text-align: left;
}
.osd-chat__head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border-default);
}
.osd-chat__head .osd-nuvem__m { width: 46px; height: 46px; }
.osd-chat__name { font: 700 18px var(--font-display); color: var(--text-heading); }
.osd-chat__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-body); }
.osd-chat__status span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.osd-chat__x {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-default); background: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text-body);
}
.osd-chat__x:hover { color: var(--text-heading); border-color: var(--border-strong); }
.osd-chat__body { padding: 14px 16px 4px; }
.osd-chat__bubble {
  background: var(--surface-2, #f4f1ec); background: #f4f1ec;
  border-radius: 14px; padding: 13px 15px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-body);
}
.osd-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.osd-chat__chip {
  padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full);
  font: 600 12.5px var(--font-sans); color: var(--text-heading); background: #fff;
}
.osd-chat__foot { padding: 8px 16px 14px; border-top: 1px solid var(--border-default); }
.osd-chat__inrow { display: flex; gap: 8px; align-items: stretch; }
.osd-chat__input {
  flex: 1; min-height: 44px; padding: 12px 14px;
  border: 2px solid var(--gold-300); border-radius: 14px;
  font-size: 13.5px; color: var(--text-faint); background: var(--cloud-white);
}
.osd-chat__send {
  align-self: center; padding: 10px 18px; border-radius: var(--radius-full);
  background: #b9c0ca; color: #fff; font: 600 13.5px var(--font-sans);
}
.osd-chat__fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

/* ---- Nuvem example questions ---- */
.nv-asks { display: grid; gap: 8px; max-width: 560px; }
.nv-ask {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  padding: 10px 14px; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-heading);
}
.nv-ask span {
  font: 700 10px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-700);
}

/* ---- Gold orbit: a highlight travelling around an element's edge ----
   A conic gradient masked to the border ring, its angle animated through a
   registered custom property. Shared by the FluffyOS nav item and Nuvem, so the
   assistant and the platform carry the same signal. Where @property is
   unsupported the gradient sits still and still reads as a gold edge. */
@property --os-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/* Only isolate here: several hosts are already absolutely positioned, and a
   blanket position:relative in this later rule would silently override them. */
.gold-orbit { isolation: isolate; }
.gold-orbit:not([class*="osd-"]) { position: relative; }
.gold-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--orbit-w, 1.5px);
  background: conic-gradient(
    from var(--os-angle),
    rgba(194, 166, 87, 0) 0deg,
    rgba(194, 166, 87, 0) 200deg,
    rgba(194, 166, 87, 0.55) 275deg,
    var(--gold-500) 320deg,
    rgba(194, 166, 87, 0.55) 345deg,
    rgba(194, 166, 87, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: os-orbit var(--orbit-speed, 4.5s) linear infinite;
  pointer-events: none;
  z-index: -1;
}
/* a soft bloom on the same beat, so the edge glows rather than only outlines */
.gold-orbit::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--os-angle),
    rgba(194, 166, 87, 0) 0deg,
    rgba(194, 166, 87, 0) 250deg,
    rgba(194, 166, 87, 0.28) 320deg,
    rgba(194, 166, 87, 0) 360deg
  );
  filter: blur(5px);
  opacity: 0.9;
  animation: os-orbit var(--orbit-speed, 4.5s) linear infinite;
  pointer-events: none;
  z-index: -2;
}
.gold-orbit--ring-only::after { display: none; }
@keyframes os-orbit { to { --os-angle: 360deg; } }
.gold-orbit:hover::before,
.gold-orbit:hover::after { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .gold-orbit::before,
  .gold-orbit::after { animation: none; }
  .gold-orbit::before { background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); }
  .gold-orbit::after { display: none; }
}
/* in the stacked mobile menu the pill spans the row; keep the ring, drop the bloom */
@media (max-width: 1040px) {
  .nav-link--os::after { display: none; }
}

/* Nuvem carries the same orbit: a little brighter on the launcher, quieter on
   the open panel so it frames the conversation without competing with it. */
.osd-nuvem { --orbit-w: 2px; --orbit-speed: 4s; border-color: var(--gold-200); }
.osd-chat { --orbit-w: 1.5px; --orbit-speed: 6s; }

/* Badge marks are sized by height; width:auto keeps the ratio now that the
   images also carry width/height attributes for layout stability. */
.osd__brand img { width: auto; }

/* ---- at-a-glance fact list (home) ---- */
.glance { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 0; padding: 26px 28px; }
.glance dt { font: 600 12px/1.5 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.glance dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-heading); }
@media (max-width: 620px) {
  .glance { grid-template-columns: 1fr; gap: 2px 0; padding: 22px; }
  .glance dd { margin-bottom: 10px; }
}

/* ==== Glass material ====
   The FluffyOS glass spec (GLASS-SPEC.md) applied to the public site. Three layers:
   an ambient field of six blurred navy and gold orbs fixed behind the page, then
   translucent white surfaces, then content at full opacity. Edges are made of
   light (a white hairline, a bright top edge, a soft navy shadow), never grey.
   Performance: the orbs are blurred once with filter:blur and animated with
   transform and opacity only. Cards are translucent without their own backdrop
   blur, since everything behind them is already the blurred field; only the
   sticky header, which scrolls over real content, and the home metric strip
   carry backdrop-filter. main.js injects the field on every page. */
.glass-field {
  /* z-index -1 paints it above the page ground (the body background propagates
     to the canvas) and below every section, without trapping popups, the Nuvem
     launcher or the mobile bar in a new stacking context */
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.glass-orb { position: absolute; border-radius: 50%; aspect-ratio: 1; will-change: transform; }
.glass-orb:nth-child(1) { width: min(660px, 120vw); top: -180px; right: 2%; background: rgba(194,166,87,0.18); filter: blur(90px); animation: drift-a 26s ease-in-out infinite; }
.glass-orb:nth-child(2) { width: min(760px, 130vw); bottom: -240px; left: 22%; background: rgba(44,74,114,0.15); filter: blur(100px); animation: drift-b 34s ease-in-out infinite 2s; }
.glass-orb:nth-child(3) { width: min(420px, 90vw); top: 30%; right: 28%; background: rgba(194,166,87,0.12); filter: blur(80px); animation: drift-c 21s ease-in-out infinite 5s; }
.glass-orb:nth-child(4) { width: min(560px, 110vw); top: 4%; left: -160px; background: rgba(90,124,168,0.13); filter: blur(95px); animation: drift-b 29s ease-in-out infinite 9s; }
.glass-orb:nth-child(5) { width: min(620px, 120vw); bottom: -200px; left: -180px; background: rgba(194,166,87,0.13); filter: blur(95px); animation: drift-a 31s ease-in-out infinite 13s; }
.glass-orb:nth-child(6) { width: min(520px, 100vw); top: 42%; left: 6%; background: rgba(44,74,114,0.10); filter: blur(90px); animation: drift-c 25s ease-in-out infinite 16s; }
/* different paths, durations and delays so the orbs never sync into a pulse */
@keyframes drift-a {
  0%   { transform: translate3d(0,0,0) scale(1);        opacity: .85; }
  25%  { transform: translate3d(-7%,5%,0) scale(1.12);  opacity: 1;   }
  50%  { transform: translate3d(5%,-6%,0) scale(0.94);  opacity: .7;  }
  75%  { transform: translate3d(-3%,-9%,0) scale(1.08); opacity: .95; }
  100% { transform: translate3d(0,0,0) scale(1);        opacity: .85; }
}
@keyframes drift-b {
  0%   { transform: translate3d(0,0,0) scale(1.04);     opacity: .8;  }
  30%  { transform: translate3d(9%,-7%,0) scale(0.92);  opacity: 1;   }
  60%  { transform: translate3d(-6%,4%,0) scale(1.15);  opacity: .72; }
  100% { transform: translate3d(0,0,0) scale(1.04);     opacity: .8;  }
}
@keyframes drift-c {
  0%   { transform: translate3d(0,0,0) scale(0.96);     opacity: .65; }
  40%  { transform: translate3d(-11%,8%,0) scale(1.18); opacity: 1;   }
  70%  { transform: translate3d(7%,10%,0) scale(1.02);  opacity: .78; }
  100% { transform: translate3d(0,0,0) scale(0.96);     opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-orb { animation: none; }
}

/* light sections turn translucent so the field reads through; navy stays navy */
section[style*="--surface-page"] { background: transparent !important; }
section[style*="--surface-sunken"] { background: rgba(226,234,244,0.28) !important; }
section[style*="--surface-page"], section[style*="--surface-sunken"] { border-color: rgba(255,255,255,0.75) !important; }

.site-header {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom-color: rgba(255,255,255,0.7);
  box-shadow: 0 1px 0 rgba(10,38,74,0.06);
}.announce { background: rgba(194,166,87,0.16); border-bottom-color: rgba(255,255,255,0.75); }

.card {
  border-radius: 22px;
  border-color: transparent;
  background: rgba(255,255,255,0.66);
  /* the white hairline, the top-edge highlight that sells the glass, the navy shadow */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85),
              inset 0 1px 0 rgba(255,255,255,0.9),
              0 10px 34px rgba(10,38,74,0.1);
}
.card--link:hover {
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9),
              inset 0 1px 0 rgba(255,255,255,0.95),
              0 16px 44px rgba(10,38,74,0.14);
}
/* where a solid surface would be gold-100, a translucent gold tint keeps the field visible */
.card--gold {
  background: rgba(194,166,87,0.16);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(194,166,87,0.32), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* the orbiting trim on cards is slow and ambient, staggered so no two cards orbit in sync */
.card.gold-orbit { --orbit-speed: 7s; }
.card.gold-orbit:nth-child(3n+2) { --orbit-speed: 8.6s; }
.card.gold-orbit:nth-child(3n+3) { --orbit-speed: 10.2s; }
.card.gold-orbit:hover::before, .card.gold-orbit:hover::after { animation-duration: 3.5s; }

/* pills and outline controls are small pieces of glass (inside main only: the
   all-navy 404 page keeps its solid pills, which glass would wash out) */
main .tag-pill, main .verified, main .btn--secondary, .nav-toggle {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.8);
  box-shadow: 0 1px 2px rgba(10,38,74,0.07);
}
main .tag-pill:hover, main .btn--secondary:hover { background: rgba(255,255,255,0.85); }

/* home metric strip: one glass container with white dividers, not separate boxes */
.proof-strip { background: transparent !important; border-top: 0 !important; padding-top: 26px; }
.proof-strip > div {
  gap: 0 !important; padding: 0 !important;
  max-width: calc(var(--container-max) - 48px) !important;
  margin: 0 24px !important;
  border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85), inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 34px rgba(10,38,74,0.08);
}
@media (min-width: 1188px) { .proof-strip > div { margin: 0 auto !important; } }
.proof-strip > div > div { padding: 24px 18px; }
.proof-strip > div > div + div { border-left: 1px solid rgba(255,255,255,0.8); }
.proof-strip > div > div > span:first-child {
  color: var(--navy-900) !important; font-weight: 600 !important;
  letter-spacing: -0.045em !important; font-variant-numeric: tabular-nums;
}
.proof-strip > div > div > span:last-child { color: var(--text-muted) !important; }
/* the one highlighted cell */
.proof-strip > div > div:nth-child(3) { background: rgba(194,166,87,0.16); }
.proof-strip > div > div:nth-child(3) > span:first-child { color: var(--gold-700) !important; }
@media (max-width: 1040px) {
  .proof-strip > div { grid-template-columns: 1fr 1fr !important; }
  .proof-strip > div > div { flex-direction: column; align-items: center !important; gap: 4px !important; text-align: center; padding: 20px 12px; }
  .proof-strip > div > div + div { border-left: 0; }
  .proof-strip > div > div:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.8); }
  .proof-strip > div > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.8); }
}

/* without backdrop blur, frosted surfaces fall back to near-solid white so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(253,252,250,0.96); }
  .proof-strip > div { background: rgba(255,255,255,0.94); }
}
@media print {
  .glass-field { display: none; }
}

/* ==== Page transitions ====
   Moving between pages crossfades instead of cutting (cross-document View
   Transitions; browsers without support load pages as before). The header,
   announcement bar, mobile bar and glass field are named so they hold still
   while only the page content changes; main.js keeps the orbs on one clock
   so the field carries on from page to page instead of restarting. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
.announce { view-transition-name: announce; }
.mobile-cta { view-transition-name: mobile-cta; }
.glass-field { view-transition-name: glass-field; }
::view-transition-group(*) { animation-duration: var(--duration-slow); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: vt-out 220ms var(--ease-fade) both; }
::view-transition-new(root) { animation: vt-in 560ms var(--ease-out) 60ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ==== Interaction polish ====
   Glass that answers the pointer, cards that lift only when they are links,
   buttons with a physical press, and a header that tightens once the page
   scrolls. Everything here is a response to the reader; nothing loops. */

/* anchors land clear of the sticky header */
html { scroll-padding-top: 88px; }

/* Light follows the cursor across glass cards (desktop pointers only). main.js
   sets --mx/--my on the card under the pointer; --glow fades the highlight in
   and out. The layer is a background-image, so it sits under the content and
   leaves both pseudo-elements free for the gold orbit. */
@property --glow { syntax: "<number>"; initial-value: 0; inherits: false; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card {
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255,255,255, calc(0.6 * var(--glow))), rgba(255,255,255,0) 70%);
    transition: --glow var(--duration-slow) var(--ease-out);
  }
  .card:hover { --glow: 1; }

  /* only cards that go somewhere lift; a lifting fact card would read as a link */
  .card--link, a.card {
    transition: --glow var(--duration-slow) var(--ease-out),
                transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                background-color var(--duration-normal) var(--ease-out);
  }
  .card--link:hover, a.card:hover {
    transform: translateY(-3px);
    background-color: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.95),
                inset 0 1.5px 0 rgba(255,255,255,1),
                0 18px 46px rgba(10,38,74,0.15);
  }

  /* one sweep of light across the gold button per hover */
  .btn--accent { position: relative; overflow: hidden; isolation: isolate; }
  .btn--accent::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%);
    transform: translateX(-120%);
  }
  .btn--accent:hover::after { transform: translateX(120%); transition: transform 760ms var(--ease-fade); }
}
@media (prefers-reduced-motion: no-preference) {
  /* the press: a small, quick give under the finger */
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }
  /* arrows lean the way they point (main.js wraps them) */
  .arw { display: inline-block; transition: transform var(--duration-normal) var(--ease-out); }
  a:hover .arw--r, button:hover .arw--r { transform: translateX(3px); }
  a:hover .arw--d, button:hover .arw--d { transform: translateY(2px); }
  a:hover .arw--ne, button:hover .arw--ne { transform: translate(2px, -2px); }
}

/* The header tightens once the page scrolls: 72px to 60px, denser frost and a
   deeper shadow. The margin grows by exactly what the bar loses, so the page
   below never moves (no layout shift); it only changes while stuck at the top. */
.site-header { transition: margin-bottom var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); }
.site-header__inner { transition: height var(--duration-slow) var(--ease-out); }
.brand img { transition: transform var(--duration-slow) var(--ease-out); transform-origin: left center; }
.site-header.is-scrolled {
  margin-bottom: 12px;
  background-color: rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(10,38,74,0.06), 0 10px 30px rgba(10,38,74,0.08);
}
.site-header.is-scrolled .site-header__inner { height: 60px; }
.site-header.is-scrolled .brand img { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .brand img { transition: none; }
}