/* ============================================================
   Aerial Flow — styles.css
   "Silk & dusk": mist ground, teal-ink, teal CTA, saffron silk.
   Headings: Outfit. Body: Nunito Sans.
   ============================================================ */

/* ---- Tokens (light = default) ---- */
:root {
  --ground: #F2F8F7;
  --surface: #FFFFFF;
  --ink: #0F2A30;
  --muted: #4A646A;
  --brand: #0B6B70;          /* CTA fill (white text 6.27:1) */
  --brand-text: #0B6B70;     /* brand as small text on surface/ground */
  --silk: #F2B84B;           /* highlight fill — dark ink on it */
  --ink-on-fill: #0F2A30;    /* text on silk fill — fixed both themes */
  --silk-text: #7A5200;      /* silk as small text / decorative on light (6.44:1) */
  --on-brand: #FFFFFF;       /* text on brand/dark bands — fixed */
  --accent-on-dark: #F2B84B; /* highlight on always-dark bands — fixed */
  --band: #0B2A33;           /* always-dark header/hero/footer/CTA/takeoff panel */
  --band-2: #0E333D;         /* slightly lifted dark surface inside bands */
  --hairline: #D7E6E3;
  --hairline-on-dark: rgba(234,244,242,0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1080px;
  --shadow: 0 6px 24px rgba(15,42,48,0.08);
  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
}

html[data-theme="dark"] {
  --ground: #08181C;
  --surface: #102A30;
  --ink: #EAF4F2;
  --muted: #A9C3C3;
  --brand: #157A7F;          /* white text 5.09:1 — measured */
  --brand-text: #7FD6D2;     /* brand as small text on dark surface 8.92:1 */
  --silk: #F2B84B;
  --ink-on-fill: #0F2A30;
  --silk-text: #F2B84B;      /* silk as small text on dark */
  --on-brand: #FFFFFF;
  --accent-on-dark: #F2B84B;
  --band: #04100F;
  --band-2: #0A2228;
  --hairline: #1E3A40;
  --hairline-on-dark: rgba(234,244,242,0.16);
  --shadow: 0 6px 24px rgba(0,0,0,0.4);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin: 0 0 .6em; }
h3 { font-size: 1.25rem; margin: 0 0 .4em; }
h4 { font-size: 1.05rem; margin: 0 0 .3em; }
p { margin: 0 0 1rem; }
a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin: 0 0 .4rem; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.muted { color: var(--muted); }
.center { text-align: center; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.center .lede { margin-inline: auto; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--brand-text); margin: 0 0 .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 8px; z-index: 200; transition: top .15s; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: .75em 1.25em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  max-width: 100%; overflow-wrap: anywhere; transition: filter .15s, background .15s, color .15s;
}
.btn--primary, a.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover, a.btn--primary:hover { filter: brightness(1.08); color: var(--on-brand); text-decoration: none; }
.btn--silk, a.btn--silk { background: var(--silk); color: var(--ink-on-fill); border-color: var(--silk); }
.btn--silk:hover, a.btn--silk:hover { filter: brightness(1.05); color: var(--ink-on-fill); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--brand-text); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--on-brand); text-decoration: none; }
.btn--block { display: flex; width: 100%; }

/* ---- Chip (for [TO CONFIRM] facts) ---- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  background: rgba(242,184,75,0.18); color: var(--silk-text);
  border: 1px solid rgba(242,184,75,0.5); border-radius: 999px;
  padding: .3em .75em; line-height: 1.3;
}
.chip::before { content: "ⓘ"; font-weight: 700; }

/* ---- Demo note strip (unsolicited-demo disclosure) ---- */
.demo-note {
  background: var(--band); color: var(--on-brand);
  font-size: .82rem; text-align: center; padding: .5rem 20px; line-height: 1.4;
}
.demo-note a { color: var(--accent-on-dark); }

/* ============================================================
   HEADER (always dark)
   ============================================================ */
.site-header { background: var(--band); color: var(--on-brand); border-bottom: 1px solid var(--hairline-on-dark); position: sticky; top: 0; z-index: 100; }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--on-brand); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--on-brand); white-space: normal; line-height: 1.1; }
.brand__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: var(--accent-on-dark); letter-spacing: .02em; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem .4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--on-brand); text-decoration: none; font-family: var(--font-head); font-weight: 500; padding: .45em .7em; border-radius: 999px; display: inline-block; }
.site-nav a:hover { background: rgba(255,255,255,0.12); }
.site-nav a[aria-current="page"] { background: var(--accent-on-dark); color: var(--ink-on-fill); }
.header-cta { display: inline-flex; }

/* theme toggle */
.theme-toggle {
  background: transparent; border: 1px solid var(--hairline-on-dark); color: var(--on-brand);
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   HERO (always dark)
   ============================================================ */
.hero { background: var(--band); color: var(--on-brand); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hero__grid > * { min-width: 0; }
.hero h1 { color: var(--on-brand); }
.hero p { color: var(--on-brand); }
.hero .lede { color: #DCEBEA; }
.hero .eyebrow { color: var(--accent-on-dark); }
.hero__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; max-height: 460px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.img-note { font-size: .72rem; color: #C6DAD8; margin: .5rem 0 0; }

/* ============================================================
   Generic dark BAND (CTA strips, proof, etc.)
   ============================================================ */
.band { background: var(--band); color: var(--on-brand); }
.band h1, .band h2, .band h3, .band h4 { color: var(--on-brand); }
.band p, .band li { color: var(--on-brand); }
.band .lede { color: #DCEBEA; }
.band .muted { color: #C6DAD8; }
.band .eyebrow { color: var(--accent-on-dark); }
.band .img-note { color: #C6DAD8; }
.band .chip { background: rgba(242,184,75,0.2); color: var(--accent-on-dark); border-color: rgba(242,184,75,0.55); }

/* Link colour rules inside dark sections — must NOT override button text */
.hero a:not(.btn), .band a:not(.btn), .takeoff a:not(.btn), .site-footer a:not(.btn) { color: var(--accent-on-dark); }
.hero a:not(.btn):hover, .band a:not(.btn):hover, .takeoff a:not(.btn):hover, .site-footer a:not(.btn):hover { color: var(--accent-on-dark); }
/* explicit button exceptions of higher specificity (incl. hover) */
.hero a.btn--primary, .band a.btn--primary, .takeoff a.btn--primary, .site-footer a.btn--primary,
.hero a.btn--primary:hover, .band a.btn--primary:hover, .takeoff a.btn--primary:hover, .site-footer a.btn--primary:hover { color: var(--on-brand); }
.hero a.btn--silk, .band a.btn--silk, .takeoff a.btn--silk, .site-footer a.btn--silk,
.hero a.btn--silk:hover, .band a.btn--silk:hover, .takeoff a.btn--silk:hover, .site-footer a.btn--silk:hover { color: var(--ink-on-fill); }
/* ghost button on dark: keep readable in both states */
.hero .btn--ghost, .band .btn--ghost, .takeoff .btn--ghost, .site-footer .btn--ghost { color: var(--on-brand); border-color: rgba(255,255,255,0.6); }
.hero .btn--ghost:hover, .band .btn--ghost:hover, .takeoff .btn--ghost:hover, .site-footer .btn--ghost:hover { background: rgba(255,255,255,0.14); color: var(--on-brand); }

/* ============================================================
   Cards / grids
   ============================================================ */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; }
.card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.card h3 { color: var(--ink); }
.card--link { text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; color: var(--ink); }
.card--link:hover { transform: translateY(-3px); text-decoration: none; }
.card__cta { color: var(--brand-text); font-family: var(--font-head); font-weight: 600; margin-top: .5rem; display: inline-block; }

/* proof strip */
.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
.proof__item { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.proof__big { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; }
.stars { color: var(--silk-text); letter-spacing: .1em; font-size: 1.2rem; }
.band .stars { color: var(--accent-on-dark); }

/* find-us / NAP */
dl.nap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
dl.nap dt { font-family: var(--font-head); font-weight: 600; color: var(--muted); }
dl.nap dd { margin: 0; overflow-wrap: anywhere; }
.band dl.nap dt, .site-footer dl.nap dt, .hero dl.nap dt { color: #C6DAD8; }
.band dl.nap dd, .site-footer dl.nap dd, .hero dl.nap dd { color: var(--on-brand); }

/* notes block (general guide) */
.note {
  background: var(--band-2); color: var(--on-brand);
  border-left: 3px solid var(--accent-on-dark); border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}
.note h4, .note p, .note li { color: var(--on-brand); }
.note .muted { color: #C6DAD8; }

/* needs-content placeholder */
.needs-content {
  border: 2px dashed var(--hairline); border-radius: var(--radius);
  padding: 2rem; text-align: center; color: var(--muted); background: var(--surface);
}

/* ============================================================
   FOOTER (always dark)
   ============================================================ */
.site-footer { background: var(--band); color: var(--on-brand); border-top: 1px solid var(--hairline-on-dark); }
.site-footer h4 { color: var(--on-brand); }
.site-footer p, .site-footer li { color: #DCEBEA; }
.site-footer .muted { color: #C6DAD8; }
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__grid > * { min-width: 0; }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav a { color: var(--accent-on-dark); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer__bottom { border-top: 1px solid var(--hairline-on-dark); margin-top: 2rem; padding-top: 1.25rem; font-size: .85rem; color: #C6DAD8; }

/* ============================================================
   TAKE-OFF CARD (signature feature)
   ============================================================ */
.takeoff-form { display: grid; gap: 1.5rem; }
.fieldset {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin: 0; background: var(--surface);
}
.fieldset > legend {
  font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
  padding: 0 .4rem; color: var(--ink);
}
.field-help { font-size: .9rem; color: var(--muted); margin: -.25rem 0 1rem; }
.options { display: grid; gap: .6rem; }
.options--row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.opt { min-width: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: block; border: 2px solid var(--hairline); border-radius: var(--radius-sm);
  padding: .7rem 1rem; cursor: pointer; background: var(--ground); color: var(--ink);
  font-weight: 600; transition: border-color .15s, background .15s;
}
.opt input:checked + label { border-color: var(--brand); background: rgba(11,107,112,0.1); }
html[data-theme="dark"] .opt input:checked + label { background: rgba(21,122,127,0.22); }
.opt input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }
.opt label .opt__hint { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: .15rem; }

.inline-fields { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.inline-fields > div { min-width: 0; }
label.field-label { font-family: var(--font-head); font-weight: 600; display: block; margin-bottom: .35rem; color: var(--ink); }
input[type="number"], input[type="date"], input[type="text"] {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 2px solid var(--hairline); border-radius: var(--radius-sm);
  padding: .6rem .8rem; max-width: 100%;
}
input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper button {
  width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--brand);
  background: var(--surface); color: var(--brand-text); font-size: 1.3rem; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.stepper button:hover { background: var(--brand); color: var(--on-brand); }
.stepper input { width: 4.5rem; text-align: center; }

/* calm note (under-5) + selected-option helper text — readable both themes */
.calm-note {
  font-size: .9rem; color: var(--ink); background: rgba(242,184,75,0.18);
  border: 1px solid rgba(242,184,75,0.5); border-radius: var(--radius-sm);
  padding: .6rem .9rem; margin-top: .6rem;
}
html[data-theme="dark"] .calm-note { color: var(--ink); background: rgba(242,184,75,0.16); border-color: rgba(242,184,75,0.5); }
[hidden] { display: none !important; }

/* the always-dark result panel */
.takeoff {
  background: var(--band); color: var(--on-brand);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.takeoff h2, .takeoff h3, .takeoff h4 { color: var(--on-brand); }
.takeoff p, .takeoff li { color: var(--on-brand); }
.takeoff .muted { color: #C6DAD8; }
.takeoff .eyebrow { color: var(--accent-on-dark); }
.takeoff__summary {
  font-family: var(--font-head); font-size: 1.15rem; line-height: 1.5;
  background: var(--band-2); border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem; color: var(--on-brand);
}
.takeoff__summary .accent { color: var(--accent-on-dark); }
.takeoff .note { background: var(--band-2); }
.takeoff__msg {
  background: var(--band-2); border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem; color: var(--on-brand);
  white-space: pre-wrap; font-size: .95rem;
}
.takeoff__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.copy-status { font-size: .85rem; color: var(--accent-on-dark); margin-top: .5rem; min-height: 1.2em; }

/* ============================================================
   Utilities
   ============================================================ */
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.flow-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================
   Responsive — down to 320px
   ============================================================ */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .site-header .container { flex-wrap: wrap; }
  .site-nav { margin-left: 0; order: 3; width: 100%; }
  .site-nav ul { justify-content: flex-start; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .header-cta { display: none; }
  .brand__sub { display: none; }
  .hero__actions .btn, .takeoff__actions .btn, .flow-actions .btn { width: 100%; }
  .proof { gap: 1.25rem; }
}
@media (max-width: 360px) {
  .container { padding-inline: 14px; }
  .card, .fieldset { padding: 1.1rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}