/* 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 — calm and brief; ease-out fades/rises, no bounces */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @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); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .nav {
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    padding: 12px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav.is-open { display: flex; }
  .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 interactive map ---- */
.area-map {
  position: relative;
  background: var(--navy-950);
  border-radius: var(--radius-xl);
  height: 480px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.area-map::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  pointer-events: none;
  z-index: 5;
}
.area-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-route { stroke: rgba(209, 186, 125, 0.30); stroke-width: 1; stroke-dasharray: 4 4; }

.map-overlay { position: absolute; inset: 0; z-index: 2; }
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 2;
}
.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.20);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.map-pin:hover .map-pin__dot,
.map-pin.is-hot .map-pin__dot {
  transform: scale(1.45);
  box-shadow: 0 0 0 7px rgba(194, 166, 87, 0.35);
}
.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);
}
.map-pin:hover .map-pin__badge,
.map-pin.is-hot .map-pin__badge { transform: scale(1.15); }
.map-pin__lbl {
  position: absolute;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(6, 26, 52, 0.9);
  pointer-events: none;
}
.map-pin[data-side="right"]  .map-pin__lbl { left: calc(100% - 2px); top: 50%; transform: translateY(-50%); }
.map-pin[data-side="left"]   .map-pin__lbl { right: calc(100% - 2px); top: 50%; transform: translateY(-50%); }
.map-pin[data-side="top"]    .map-pin__lbl { bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%); }
.map-pin[data-side="bottom"] .map-pin__lbl { top: calc(100% - 4px); left: 50%; transform: translateX(-50%); }
/* coast view: only Myrtle Beach keeps a label; metro cluster is summarized by the chip */
.area-map[data-view="coast"] .map-pin:not([data-region]) .map-pin__lbl { display: none; }
.area-map[data-view="metro"] .map-pin[data-region] { display: none; }

.map-cluster {
  position: absolute;
  transform: translate(0, -50%);
  z-index: 3;
  font: 500 12px var(--font-sans);
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.map-cluster span { color: var(--gold-400); }
.map-cluster:hover { background: rgba(255, 255, 255, 0.20); }
.area-map[data-view="metro"] .map-cluster { display: none; }

.map-views {
  position: absolute;
  top: 20px; left: 22px;
  z-index: 6;
  display: flex;
  gap: 6px;
}
.map-viewbtn {
  font: 500 12.5px var(--font-sans);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.map-viewbtn:hover { background: rgba(255, 255, 255, 0.18); }
.map-viewbtn.is-active { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); font-weight: 600; }

.map-tip {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--navy-950);
  border: 1px solid var(--gold-500);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
}
.map-tip.is-on { opacity: 1; }
.map-tip b { color: var(--gold-400); font-weight: 600; }
.map-tip small { display: block; color: var(--text-on-navy-muted); font-size: 11.5px; }

.map-cred {
  position: absolute;
  right: 26px; bottom: 22px;
  z-index: 6;
  font-size: 12.5px;
  color: var(--gold-400);
  text-shadow: 0 1px 4px rgba(6, 26, 52, 0.9);
}

.area-item { border-radius: var(--radius-sm); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); }
.area-item:hover, .area-item.is-hot { color: var(--gold-700) !important; }


/* ---- 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),
                            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; }

  /* Sticky header lifts off the page once you start scrolling */
  .site-header {
    transition: box-shadow var(--duration-normal) var(--ease-out),
                background var(--duration-normal) var(--ease-out);
  }
  .site-header.is-scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(253, 252, 250, 0.96);
  }

  /* 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.55);
  opacity: 0; transition: opacity 240ms ease;
}
.leadpop-overlay.is-open { opacity: 1; }
.leadpop {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96);
  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);
  opacity: 0; transition: opacity 240ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.leadpop.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 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 150ms ease, background 150ms ease;
}
.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(16px) scale(1);
    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 160ms ease;
}
.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; }
}