@charset "UTF-8";
/* ============================================================
   InAirBookings — Design System
   INAIRGROUP LLC · inairbookings.com
   Evolved navy + gold. Mobile-first. Motion-aware.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;
  overflow-x:clip}
body{min-height:100%;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--link);text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-500);color:var(--ink-900)}

/* ---------- 2. TOKENS ---------- */
:root{
  /* brand navy family — anchored on the original #0a1628 */
  --ink-900:#050b16;
  --ink-850:#071122;
  --ink-800:#0a1628;
  --ink-700:#101f38;
  --ink-600:#17294a;
  --ink-500:#1f3760;

  /* brand gold family — anchored on the original #c8952a */
  --gold-300:#f2d79a;
  --gold-400:#e8b959;
  --gold-500:#d4a24a;
  --gold-600:#c8952a;   /* decorative fills, gradients, dots — not text */
  --gold-700:#a4781f;   /* large display text on light: >=3:1 */
  --gold-ink:#7a5815;   /* small text + icons on light: >=4.5:1 on every surface */

  /* brand sky family — anchored on the original #2484e4 */
  --sky-300:#8ec8ff;
  --sky-400:#4aa3f0;
  --sky-500:#2484e4;
  --sky-600:#1a6fc4;

  /* neutrals */
  --cream:#f9f7f2;
  --cream-2:#f2eee5;
  --paper:#ffffff;
  --slate-100:#eef2f8;
  --slate-200:#dee5f0;
  --slate-400:#93a1b8;
  --slate-500:#67748c;
  --slate-600:#4a5568;

  /* semantic (light surface default) */
  --surface:var(--cream);
  --surface-2:var(--paper);
  --ink:#14213a;
  --ink-soft:#4d5a75;
  --ink-faint:#5c6779;
  --border:rgba(20,33,58,.12);
  --border-soft:rgba(20,33,58,.07);
  --link:var(--sky-600);
  --accent:var(--gold-600);

  /* type */
  --font-display:"Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --step--3:clamp(.75rem,.735rem + .07vw,.8125rem);
  --step--2:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --step-0:clamp(.9375rem,.91rem + .14vw,1.0625rem);
  --step-1:clamp(1.0625rem,1.01rem + .28vw,1.25rem);
  --step-2:clamp(1.25rem,1.14rem + .55vw,1.625rem);
  --step-3:clamp(1.5rem,1.31rem + .95vw,2.25rem);
  --step-4:clamp(1.875rem,1.5rem + 1.85vw,3.25rem);
  --step-5:clamp(2.25rem,1.6rem + 3.2vw,4.5rem);

  /* space + shape */
  --gutter:clamp(1.125rem,.85rem + 1.4vw,2rem);
  --bleed:clamp(3.5rem,2rem + 6vw,7rem);
  --wrap:1180px;
  --wrap-narrow:760px;
  --on-dark-soft:#bccbe2;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(8,17,34,.06),0 2px 8px rgba(8,17,34,.05);
  --shadow-md:0 4px 12px rgba(8,17,34,.07),0 14px 34px rgba(8,17,34,.08);
  --shadow-lg:0 8px 24px rgba(8,17,34,.1),0 32px 64px rgba(8,17,34,.14);
  --shadow-gold:0 10px 30px rgba(200,149,42,.32);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s;
  --t-mid:.42s;
  --t-slow:.8s;
}

/* dark surface scope — applied to bands, not the whole document */
.on-dark{
  --surface:var(--ink-800);
  --surface-2:var(--ink-700);
  --ink:#eaf0fb;
  --ink-soft:#a9b8d2;
  --ink-faint:#7e8ead;
  --border:rgba(255,255,255,.12);
  --border-soft:rgba(255,255,255,.07);
  --link:var(--gold-400);
  color:var(--ink);
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4,.t-sub{font-size:var(--step-1);font-family:var(--font-body);font-weight:700;
  letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty;color:var(--ink-soft)}
strong,b{font-weight:700;color:var(--ink)}
small{font-size:var(--step--1)}

.lede{font-size:var(--step-1);line-height:1.6;color:var(--ink-soft);max-width:62ch}
.muted{color:var(--ink-faint)}
.gold-ink{color:var(--gold-500)}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:400}

/* gradient-lit display word */
.lit{background:linear-gradient(102deg,var(--gold-300),var(--gold-500) 42%,var(--gold-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-inline:.04em;margin-inline:-.04em}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gutter) * 2),var(--wrap-narrow));margin-inline:auto}
.band{position:relative;padding-block:var(--bleed);background:var(--surface);isolation:isolate}
.band--tight{padding-block:calc(var(--bleed) * .62)}
.band--paper{--surface:var(--paper)}
.band--cream{--surface:var(--cream)}
.band--cream2{--surface:var(--cream-2)}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.6vw,1.75rem)}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.center{text-align:center}
.section-head{display:flex;flex-direction:column;gap:.9rem;max-width:64ch;margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.25rem)}
.section-head.center{margin-inline:auto;align-items:center;text-align:center}
.hr-gold{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);opacity:.4}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-size:var(--step--3);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);padding:.44rem .85rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--gold-500) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-500) 26%,transparent)}
.on-dark .eyebrow{color:var(--gold-300);background:rgba(212,162,74,.13);border-color:rgba(212,162,74,.3)}
.section-head.center .eyebrow{align-self:center}
.eyebrow .spark{width:6px;height:6px;border-radius:50%;background:var(--gold-500);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--gold-500) 60%,transparent);animation:pulse 2.6s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold-500) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- 5. BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.5rem;border-radius:var(--r-pill);
  font-size:var(--step-0);font-weight:700;letter-spacing:-.01em;line-height:1;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-fast) linear,color var(--t-fast) linear,border-color var(--t-fast) linear}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:translateY(1px) scale(.985)}

.btn--gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--ink-900);box-shadow:var(--shadow-gold)}
.btn--gold:hover{box-shadow:0 14px 40px rgba(200,149,42,.45);transform:translateY(-2px)}
/* light sweep */
.btn--gold::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-130%);transition:transform .85s var(--ease-out)}
.btn--gold:hover::after{transform:translateX(130%)}

.btn--ghost{border:1.5px solid var(--border);color:var(--ink);background:color-mix(in srgb,var(--surface-2) 60%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--gold-ink);transform:translateY(-2px)}
.on-dark .btn--ghost{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.on-dark .btn--ghost:hover{border-color:var(--gold-400);color:var(--gold-300);background:rgba(212,162,74,.1)}

.btn--ink{background:var(--ink-800);color:#fff}
.btn--ink:hover{background:var(--ink-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn--lg{min-height:60px;padding:1.05rem 1.9rem;font-size:var(--step-1)}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}

/* text link with underline draw */
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--link);
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-mid) var(--ease-out)}
.link-arrow:hover{background-size:100% 1.5px}
.link-arrow svg{width:16px;height:16px;transition:transform var(--t-mid) var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:70;
  background:color-mix(in srgb,var(--ink-900) 72%,transparent);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background-color var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out)}
.site-header.is-stuck{background:color-mix(in srgb,var(--ink-900) 94%,transparent);
  border-bottom-color:rgba(212,162,74,.22);box-shadow:0 10px 34px rgba(3,8,18,.4)}
.nav{display:flex;align-items:center;gap:1rem;min-height:72px;
  transition:min-height var(--t-mid) var(--ease-out)}
.site-header.is-stuck .nav{min-height:62px}

.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;flex:none}
.brand img{width:42px;height:auto;border-radius:10px;background:#fff;
  box-shadow:0 0 0 1px rgba(212,162,74,.28),0 4px 12px rgba(3,8,18,.4);
  transition:transform var(--t-mid) var(--ease-spring)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.brand-name span{font-size:var(--step--3);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400);font-weight:700}

.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{position:relative;padding:.55rem .8rem;border-radius:var(--r-sm);
  font-size:.9375rem;font-weight:600;color:#c9d5ea;
  transition:color var(--t-fast) linear,background-color var(--t-fast) linear}
.nav-links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:1.5px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease-out)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--gold-300)}

.nav-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .7rem;border-radius:var(--r-pill);
  font-size:var(--step--3);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky-300);background:rgba(74,163,240,.12);border:1px solid rgba(74,163,240,.28)}
/* Between the nav-links breakpoint and ~1080px the header has no room for the
   badge — it overflowed the nav by ~53px even at the old 10px size. The badge is
   the least essential item there: the same "independent agency" claim appears in
   the hero disclaimer and again in the compliance strip. Drop it first. */
@media (max-width:1079px){.nav-badge{display:none}}

.nav-call{display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.6rem 1.15rem;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--ink-900);
  box-shadow:0 6px 20px rgba(200,149,42,.32);flex:none;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.nav-call:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(200,149,42,.46)}
.nav-call svg{width:18px;height:18px}
.nav-call b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.nav-call span{display:block;font-size:var(--step--3);font-weight:600;opacity:.85;line-height:1.2}

.hamburger{display:none;width:46px;height:46px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  align-items:center;justify-content:center;flex:none}
.hamburger span{display:block;width:19px;height:1.8px;background:#fff;border-radius:2px;position:relative;
  transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast) linear}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;
  background:#fff;border-radius:2px;transition:transform var(--t-mid) var(--ease-out)}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}
.hamburger[aria-expanded="true"] span{transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.hamburger[aria-expanded="true"] span::after{opacity:0}

.nav-scrim{position:fixed;inset:0;z-index:60;background:rgba(4,9,18,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease-out),visibility var(--t-mid)}
body.nav-open .nav-scrim{opacity:1;visibility:visible}

/* ---------- 7. AURORA / ATMOSPHERE ---------- */
.atmos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* The aurora is painted as layered radial-gradients rather than blurred,
     screen-blended elements. Measured: three blur(64px) blobs cost ~1.1s of LCP
     on a throttled phone; gradients cost effectively nothing and look the same.
     The animated blob version is re-enabled on desktop only, below. */
  background:
    radial-gradient(58% 52% at 16% 4%, rgba(46,140,232,.40), transparent 62%),
    radial-gradient(44% 44% at 90% 6%, rgba(214,163,74,.30), transparent 62%),
    radial-gradient(72% 52% at 52% 106%, rgba(58,102,178,.34), transparent 68%),
    var(--ink-900)}
.atmos::after{content:"";position:absolute;inset:0;
  background:radial-gradient(135% 105% at 50% 8%,transparent 62%,var(--ink-900) 100%)}
.blob{display:none}

/* Content must sit above .atmos. These rules were accidentally dropped when the
   aurora was reworked into gradients, which let the atmosphere layer paint over
   the footer and part of the CTA band. Do not remove them again. */
.hero,.page-hero,.cta-band,.site-footer{isolation:isolate}
.hero>*:not(.atmos):not(.flightpath),
.page-hero>*:not(.atmos):not(.flightpath),
.cta-band>*:not(.atmos):not(.flightpath),
.band>*:not(.atmos):not(.flightpath),
.site-footer>*:not(.atmos):not(.flightpath){position:relative;z-index:2}

/* Desktop has the CPU headroom for the real thing. */
@media (min-width:900px){
  .blob{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.72;
    mix-blend-mode:screen;will-change:transform}
  .blob--a{width:42vw;height:42vw;min-width:330px;min-height:330px;left:-4%;top:-8%;
    background:radial-gradient(circle,rgba(46,140,232,.85),rgba(36,132,228,.18) 52%,transparent 72%);
    animation:drift-a 26s var(--ease-out) infinite alternate}
  .blob--b{width:36vw;height:36vw;min-width:280px;min-height:280px;right:-2%;top:2%;
    background:radial-gradient(circle,rgba(214,163,74,.72),rgba(200,149,42,.16) 50%,transparent 72%);
    animation:drift-b 32s var(--ease-out) infinite alternate}
  .blob--c{width:56vw;height:36vw;min-width:340px;min-height:250px;left:22%;bottom:-18%;
    background:radial-gradient(circle,rgba(58,102,178,.62),rgba(31,55,96,.2) 54%,transparent 74%);
    animation:drift-c 38s var(--ease-out) infinite alternate}
}
@keyframes drift-a{to{transform:translate3d(12vw,7vh,0) scale(1.18)}}
@keyframes drift-b{to{transform:translate3d(-11vw,10vh,0) scale(.86)}}
@keyframes drift-c{to{transform:translate3d(-9vw,-6vh,0) scale(1.12)}}

/* fine starfield / grid texture */
.atmos--grid::before{content:"";position:absolute;inset:0;opacity:.75;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 20%,#000,transparent 78%);
  mask-image:radial-gradient(90% 70% at 50% 20%,#000,transparent 78%)}

/* ---------- 8. HERO ---------- */
.hero{position:relative;background:var(--ink-900);overflow:hidden;
  padding-block:clamp(3.25rem,2rem + 7vw,6.5rem) clamp(3.5rem,2rem + 8vw,7rem)}
.hero-grid{display:grid;gap:clamp(2.25rem,1rem + 5vw,4rem);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);line-height:1.06}
.hero .lede{color:var(--on-dark-soft);font-size:var(--step-1);margin-top:1.35rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.disclaimer-chip{display:inline-flex;align-items:flex-start;gap:.6rem;margin-top:1.6rem;
  padding:.7rem 1rem;border-radius:var(--r-md);font-size:.8125rem;line-height:1.45;
  color:#9fb0cc;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.disclaimer-chip svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--sky-400)}

/* trust strip */
.trust-strip{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin-top:2.25rem;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)}
.trust-item{display:flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:600;color:var(--on-dark-soft)}
.trust-item .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-400);flex:none;
  box-shadow:0 0 10px rgba(232,185,89,.85)}

/* page hero (interior pages) */
.page-hero{position:relative;background:var(--ink-900);overflow:hidden;
  padding-block:clamp(2.75rem,1.8rem + 5vw,5rem) clamp(2.75rem,1.8rem + 5vw,5rem);text-align:center}
.page-hero h1{color:#fff;font-size:var(--step-4)}
.page-hero .lede{color:var(--on-dark-soft);margin-inline:auto;text-align:center}
.page-hero .eyebrow{align-self:center}
.page-hero-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem}

/* flight-path decoration */
.flightpath{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6}
.flightpath path{fill:none;stroke:rgba(212,162,74,.5);stroke-width:1.5;stroke-dasharray:6 8;
  stroke-linecap:round}
.flightpath .plane{fill:var(--gold-400)}

/* ---------- 9. CARDS ---------- */
.card{position:relative;padding:clamp(1.3rem,1rem + 1vw,1.9rem);border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--gold-500) 38%,transparent)}
.card h3,.card h4,.card .t-sub{margin-bottom:.55rem}
.card p{font-size:var(--step-0)}

/* glass card for dark bands */
.glass{position:relative;padding:clamp(1.3rem,1rem + 1vw,1.9rem);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(3,8,18,.42);
  transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out)}
.glass:hover{transform:translateY(-6px);border-color:rgba(212,162,74,.42);
  box-shadow:0 28px 66px rgba(3,8,18,.55)}

/* icon tile */
.icon-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:1.05rem;
  color:var(--gold-ink);background:color-mix(in srgb,var(--gold-500) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-500) 24%,transparent);
  transition:transform var(--t-mid) var(--ease-spring),background-color var(--t-mid) linear}
.icon-tile svg{width:24px;height:24px}
.card:hover .icon-tile,.glass:hover .icon-tile{transform:translateY(-3px) rotate(-5deg)}
.on-dark .icon-tile{color:var(--gold-300);background:rgba(212,162,74,.14);border-color:rgba(212,162,74,.3)}

.cards-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* numbered step card with connecting rail */
.steps{counter-reset:step;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));position:relative}
.step{position:relative;padding-top:1.2rem}
.step-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  font-family:var(--font-display);font-size:1.125rem;font-weight:700;
  color:var(--ink-900);background:linear-gradient(135deg,var(--gold-300),var(--gold-600));
  box-shadow:0 8px 22px rgba(200,149,42,.34);margin-bottom:1rem;position:relative;z-index:2}
.step::before{content:"";position:absolute;top:calc(1.2rem + 23px);left:46px;right:-1.5rem;height:1.5px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--gold-500) 55%,transparent) 0 6px,transparent 6px 13px);
  z-index:1}
.step:last-child::before{display:none}
@media (max-width:719px){.step::before{display:none}}

/* stat block */
/* Always exactly four tiles. auto-fit resolved to 3 columns in the ~460px
   right-hand column and orphaned the 4th, stretched, on its own row. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:379px){.stats{grid-template-columns:1fr}}
.stat{padding:1.5rem 1.25rem;background:var(--surface-2);text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:var(--step-3);font-weight:700;
  color:var(--gold-700);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:.5rem;font-size:.8125rem;font-weight:600;color:var(--ink-faint);line-height:1.4}
.on-dark .stats{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.on-dark .stat{background:rgba(255,255,255,.04)}
.on-dark .stat b{color:var(--gold-300)}

/* checklist */
.checklist{display:grid;gap:.85rem}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--step-0);color:var(--ink-soft);line-height:1.55}
.checklist svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--gold-ink)}
.on-dark .checklist svg{color:var(--gold-400)}

/* pill tags */
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tag{padding:.34rem .72rem;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;
  color:var(--ink-soft);background:color-mix(in srgb,var(--ink) 5%,transparent);
  border:1px solid var(--border-soft)}
.on-dark .tag{color:var(--on-dark-soft);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* ---------- 10. FORMS ---------- */
.quote-card{position:relative;padding:clamp(1.4rem,1rem + 2vw,2.5rem);border-radius:var(--r-xl);
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 30px 80px rgba(3,8,18,.55)}
.quote-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(150deg,rgba(212,162,74,.55),transparent 42%,rgba(36,132,228,.4));
  opacity:.55}

.form-grid{display:grid;gap:1.25rem 1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.field{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.field label{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint)}
.on-dark .field label,.quote-card .field label{color:#a9b8d2}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;border-radius:var(--r-sm);
  font-size:1rem;font-weight:500;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--border);
  transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear,background-color var(--t-fast) linear}
.field textarea{min-height:130px;padding-top:.9rem;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367748c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:17px}
/* iOS Safari lays a date input's value out in a shadow tree that ignores the
   box and carries its own minimum width, so the text spills past the border.
   Neutralise the shadow parts and let the control shrink with the grid cell. */
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.field input[type="date"]{-webkit-appearance:none;appearance:none}
.field input[type="date"]::-webkit-date-and-time-value{
  text-align:left;margin:0;min-width:0;max-width:100%}
.field input[type="date"]::-webkit-datetime-edit{padding:0;min-width:0;overflow:hidden}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0}
.field input[type="date"]::-webkit-inner-spin-button{display:none;-webkit-appearance:none}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  flex:none;margin-inline-start:auto;padding:0}

.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-500) 20%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.75}

/* dark-surface fields (inside the quote card) */
.quote-card .field input,.quote-card .field select,.quote-card .field textarea{
  color:#fff;background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.quote-card .field input::placeholder{color:#8798b5}
.quote-card .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b8d2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:17px}
.quote-card .field option{background:var(--ink-800);color:#fff}
.quote-card .field input:focus,.quote-card .field select:focus{
  background-color:rgba(255,255,255,.11);border-color:var(--gold-400)}
/* native date picker indicator on dark */
.quote-card input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);cursor:pointer}

.fee-note{display:flex;gap:.75rem;margin-top:1.35rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  font-size:.8125rem;line-height:1.6;color:var(--ink-soft);
  background:color-mix(in srgb,var(--gold-500) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent)}
.fee-note svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--gold-ink)}
.fee-note b{color:var(--ink)}
.quote-card .fee-note{color:var(--on-dark-soft);background:rgba(212,162,74,.1);border-color:rgba(212,162,74,.26)}
.quote-card .fee-note b{color:#fff}
.quote-card .fee-note svg{color:var(--gold-400)}

/* success bar */
.form-success{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows var(--t-slow) var(--ease-out),opacity var(--t-mid) var(--ease-out),
    margin-top var(--t-slow) var(--ease-out)}
.form-success>div{overflow:hidden;visibility:hidden}
.form-success.is-shown{grid-template-rows:1fr;opacity:1;margin-top:1.35rem}
/* visibility keeps the collapsed panel's link out of the tab order and the
   accessibility tree, so the container never needs aria-hidden (which would
   be wrong on a live region anyway) */
.form-success.is-shown>div{visibility:visible}
.form-success-inner{display:flex;gap:.9rem;padding:1.15rem 1.25rem;border-radius:var(--r-md);
  background:rgba(46,160,110,.13);border:1px solid rgba(46,160,110,.36)}
.form-success svg{width:24px;height:24px;flex:none;color:#3fbe86}
.form-success b{display:block;color:var(--ink);font-size:var(--step-0)}
.form-success p{margin-top:.25rem;font-size:.875rem}
.quote-card .form-success b{color:#fff}
.quote-card .form-success p{color:var(--on-dark-soft)}

/* ---------- 11. ACCORDION ---------- */
.faq{display:grid;gap:.75rem}
.faq-item{border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border-soft);
  overflow:hidden;transition:border-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.faq-item.is-open{border-color:color-mix(in srgb,var(--gold-500) 42%,transparent);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.15rem 1.3rem;text-align:left;font-size:var(--step-0);font-weight:700;color:var(--ink);line-height:1.45}
.faq-q:hover{color:var(--gold-ink)}
.faq-icon{position:relative;width:22px;height:22px;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--gold-ink);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--t-mid) var(--ease-spring)}
.faq-icon::before{width:13px;height:2px}
.faq-icon::after{width:2px;height:13px}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease-out)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 1.3rem 1.3rem;font-size:var(--step-0)}
.on-dark .faq-q{color:#eaf0fb}
.on-dark .faq-item{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}

/* ---------- 12. TABLES + PRICE ROWS ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--surface-2)}
.table-scroll table{min-width:640px;font-size:.9375rem}
.table-scroll th{padding:.95rem 1.1rem;text-align:left;font-size:var(--step--3);font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  background:color-mix(in srgb,var(--ink) 4%,transparent);border-bottom:1px solid var(--border);white-space:nowrap}
.table-scroll td{padding:.95rem 1.1rem;border-bottom:1px solid var(--border-soft);color:var(--ink-soft);vertical-align:top}
.table-scroll tr:last-child td{border-bottom:0}
.table-scroll tbody tr{transition:background-color var(--t-fast) linear}
.table-scroll tbody tr:hover{background:color-mix(in srgb,var(--gold-500) 6%,transparent)}
.table-scroll td:first-child{font-weight:700;color:var(--ink)}

.price-rows{display:grid;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
/* Was a wrapping flex: with a long <small> the nowrap .amount wrapped onto
   its own line and space-between left-aligned it, so the value read as
   missing and row rhythm went uneven. minmax(0,1fr) is load-bearing — a
   bare 1fr has min-width:auto and lets .amount overflow the card. */
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1.25rem;align-items:baseline;
  padding:1.15rem 1.35rem;background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.price-row:last-child{border-bottom:0}
.price-row.is-total{background:color-mix(in srgb,var(--gold-500) 10%,transparent)}
.price-row b{font-size:var(--step-0);color:var(--ink);display:block}
.price-row small{display:block;color:var(--ink-faint);font-weight:500;margin-top:.15rem}
.price-row .amount{font-family:var(--font-display);font-size:var(--step-1);font-weight:700;
  color:var(--gold-700);white-space:nowrap;text-align:right}
@media (max-width:479px){
  .price-row{grid-template-columns:minmax(0,1fr)}
  .price-row .amount{text-align:left}
}

/* ---------- 13. MARQUEE ---------- */
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:.75rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.route-chip{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.05rem;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:700;color:var(--on-dark-soft);white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.route-chip svg{width:15px;height:15px;color:var(--gold-400);flex:none}

/* ---------- 13b. TRUSTPILOT ---------- */
/* No card frame and no reserved height on purpose: the profile currently has
   no displayable reviews, and an empty white box reads as broken. The widgets
   size themselves, so the section collapses to heading + CTA while there is
   nothing to show and fills in on its own once reviews exist. */
.reviews-frame{display:grid;gap:1rem;justify-items:center}
.reviews-frame:empty{display:none}
.trustpilot-widget{width:100%}
.trustpilot-widget > a{display:inline-block;font-weight:600;color:var(--link)}

/* ---------- 14. TABS (resources) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.tab{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.6rem 1.1rem;
  border-radius:var(--r-pill);font-size:.875rem;font-weight:700;color:var(--ink-soft);
  background:var(--surface-2);border:1.5px solid var(--border);
  transition:color var(--t-fast) linear,border-color var(--t-fast) linear,
    background-color var(--t-fast) linear,transform var(--t-fast) var(--ease-out)}
.tab svg{width:16px;height:16px}
.tab:hover{transform:translateY(-2px);border-color:var(--gold-500);color:var(--gold-ink)}
.tab[aria-selected="true"]{color:var(--ink-900);border-color:transparent;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));box-shadow:var(--shadow-gold)}

/* ---------- 15. LEGAL PROSE ---------- */
.prose{max-width:74ch}
.prose h2{font-size:var(--step-2);margin-top:2.75rem;margin-bottom:.9rem;
  padding-top:1.5rem;border-top:1px solid var(--border-soft)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:700;
  margin-top:1.75rem;margin-bottom:.6rem}
.prose p{margin-bottom:1.05rem;font-size:var(--step-0);overflow-wrap:break-word}
.prose ul,.prose ol{margin:0 0 1.35rem;display:grid;gap:.6rem}
.prose li{position:relative;padding-left:1.5rem;font-size:var(--step-0);color:var(--ink-soft);line-height:1.6}
.prose li::before{content:"";position:absolute;left:.15rem;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gold-500)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n) ".";width:auto;height:auto;background:none;border-radius:0;
  top:0;font-weight:800;color:var(--gold-ink);font-size:.875rem}
.prose a{font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--link)}
.prose strong{color:var(--ink)}
.prose table{margin-bottom:1.35rem;table-layout:fixed;width:100%}
.prose th,.prose td{overflow-wrap:anywhere}

.toc{position:sticky;top:96px;align-self:start;padding:1.35rem;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm)}
.toc-label{font-size:var(--step--3);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.9rem}
.toc ol{display:grid;gap:.15rem;counter-reset:t}
.toc a{display:block;padding:.45rem .6rem;border-radius:8px;font-size:.875rem;font-weight:600;
  color:var(--ink-soft);line-height:1.4;overflow-wrap:anywhere;
  transition:color var(--t-fast) linear,background-color var(--t-fast) linear}
.toc,.toc ol{min-width:0}
.toc a{
  transition:color var(--t-fast) linear,background-color var(--t-fast) linear}
.toc a:hover,.toc a.is-active{color:var(--gold-ink);background:color-mix(in srgb,var(--gold-500) 10%,transparent)}
/* An implicit `auto` grid column is sized to its content's min-content width,
   so a wide table inside .prose pushed the whole column past the container.
   minmax(0,1fr) + min-width:0 let the column actually shrink. */
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,1rem + 3vw,3rem);align-items:start}
.legal-layout>*{min-width:0}
@media (min-width:960px){.legal-layout{grid-template-columns:260px minmax(0,1fr)}}
@media (max-width:959px){.toc{position:static}}

.updated-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:700;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--border)}
.updated-chip svg{width:14px;height:14px;color:var(--gold-ink)}

/* ---------- 16. FOOTER ---------- */
.site-footer{position:relative;background:var(--ink-900);color:var(--on-dark-soft);overflow:hidden;
  padding-block:clamp(3rem,2rem + 4vw,4.5rem) 0}
.footer-grid{display:grid;gap:clamp(2rem,1rem + 3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.footer-brand{max-width:34ch}
.footer-brand p{font-size:.875rem;color:#8798b5;margin-top:1rem;line-height:1.65}
.site-footer .t-sub{font-size:var(--step--3);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:1.1rem;font-family:var(--font-body)}
.footer-links{display:grid;gap:.65rem}
.footer-links a{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--on-dark-soft);
  transition:color var(--t-fast) linear,transform var(--t-fast) var(--ease-out)}
.footer-links a:hover{color:var(--gold-300);transform:translateX(3px)}
.footer-links svg{width:15px;height:15px;flex:none;opacity:.7}
.footer-legal{margin-top:clamp(2.25rem,1.5rem + 2vw,3.25rem);padding-block:1.75rem;
  border-top:1px solid rgba(255,255,255,.09)}
.footer-legal p{font-size:.75rem;line-height:1.7;color:#6e7f9c}
.footer-legal p+p{margin-top:.85rem}
.footer-legal b{color:#9fb0cc}

/* ---------- 17. STICKY CALL BAR ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:65;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ink-900) 93%,transparent);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid rgba(212,162,74,.26);box-shadow:0 -8px 30px rgba(3,8,18,.4);
  transform:translateY(110%);transition:transform var(--t-mid) var(--ease-out)}
.callbar.is-shown{transform:translateY(0)}
.callbar-inner{display:flex;align-items:center;gap:.75rem;width:min(100%,var(--wrap));margin-inline:auto}
.callbar-copy{flex:1;min-width:0}
.callbar-copy b{display:block;font-size:.875rem;font-weight:800;color:#fff;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbar-copy span{display:block;font-size:.75rem;color:#9fb0cc;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callbar .btn{min-height:48px;padding-inline:1.2rem;flex:none}
@media (min-width:900px){.callbar{display:none}}
/* Below ~390px the two-line copy no longer fits on one line each; drop the
   secondary line and let the headline wrap rather than ellipsing mid-word. */
@media (max-width:479px){
  /* the secondary line cannot fit beside the call button on a phone and was
     ellipsing mid-sentence; the headline and the button carry the message */
  .callbar-copy span{display:none}
  .callbar-copy b{white-space:normal;font-size:.8125rem;line-height:1.25}
}
@media (max-width:389px){
  .callbar .btn{padding-inline:.95rem}
}
body.has-callbar{padding-bottom:82px}
@media (min-width:900px){body.has-callbar{padding-bottom:0}}

/* desktop CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--ink-800);text-align:center;
  padding-block:clamp(3rem,2rem + 4vw,5rem)}
.cta-band h2{color:#fff}
.cta-band .lede{color:var(--on-dark-soft);margin-inline:auto;text-align:center}
.cta-band .hero-btns{justify-content:center}

/* ---------- 18. MOTION UTILITIES ---------- */
/* Only hide reveal targets when JS is actually running (html.js is set by an
   inline script in <head>). Without this the whole page is blank if JS fails. */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .68s var(--ease-out),transform .68s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.js [data-reveal="left"]{transform:translateX(-26px)}
.js [data-reveal="right"]{transform:translateX(26px)}
.js [data-reveal="zoom"]{transform:scale(.94)}
/* Below the two-column breakpoint these sit full-width in the wrap, so a
   horizontal offset pushes them past the viewport edge — where overflow-x:clip
   crops the text rather than revealing it. Reveal vertically on narrow screens. */
@media (max-width:899px){
  .js [data-reveal="left"],
  .js [data-reveal="right"]{transform:translateY(22px)}
}
.js [data-reveal].is-in{opacity:1;transform:none}

.hero-line{display:block}
.hero-line>span{display:block;text-wrap:balance;
  animation:rise .95s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}

.fade-up{animation:fadeUp .8s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.draw path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 2.4s var(--ease-out)}
.draw.is-in path{stroke-dashoffset:0}

/* skip link */
.skip{position:absolute;left:.75rem;top:-100px;z-index:100;padding:.75rem 1.15rem;border-radius:var(--r-sm);
  background:var(--gold-500);color:var(--ink-900);font-weight:800;
  transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:.75rem}

/* ---------- 19. RESPONSIVE ---------- */
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
  .split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media (max-width:899px){
  .nav-links,.nav-badge{display:none}
  .hamburger{display:flex}
  .nav-call-copy span{display:none}
  .nav-call b{font-size:.875rem}
  .nav-call{padding:.55rem .95rem}
  body.nav-open{overflow:hidden}
  .nav-links.is-open{display:flex;position:fixed;z-index:80;
    top:0;right:0;bottom:0;width:min(84vw,340px);
    flex-direction:column;align-items:stretch;gap:.2rem;
    padding:5.5rem 1.35rem 2rem;
    background:linear-gradient(180deg,var(--ink-850),var(--ink-900));
    border-left:1px solid rgba(212,162,74,.22);box-shadow:-24px 0 60px rgba(3,8,18,.6);
    animation:drawer .38s var(--ease-out)}
  @keyframes drawer{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .nav-links.is-open a{padding:.95rem 1rem;font-size:1.0625rem;border-radius:12px;
    border-bottom:1px solid rgba(255,255,255,.06);opacity:0;
    animation:fadeUp .5s var(--ease-out) forwards;animation-delay:calc(60ms + var(--i,0) * 55ms)}
  .nav-links.is-open a::after{display:none}
  .nav-links.is-open a:hover{background:rgba(212,162,74,.1)}
  .hamburger[aria-expanded="true"]{position:fixed;right:var(--gutter);top:13px;z-index:90}
}
@media (max-width:559px){
  /* logo + full phone number + menu will not fit at 375px — the phone number wins */
  .brand-name{display:none}
  .nav{gap:.6rem}
  .brand img{width:38px}
}
@media (max-width:520px){
  .hero-btns .btn,.cta-band .hero-btns .btn{width:100%}
  .btn{padding-inline:1.15rem}
}
@media (max-width:360px){
  /* a long label such as "Call +1 (570) 599-6951" no longer fits on one line */
  .btn{white-space:normal;text-align:center;padding-inline:.9rem}
}

/* ---------- 20. REDUCED MOTION + PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero-line>span{transform:none;opacity:1}
  .fade-up{opacity:1;transform:none}
  .blob{animation:none}
  .marquee-track{animation:none}
  .draw path{stroke-dashoffset:0}
}
@media print{
  .site-header,.callbar,.cta-band,.hero-btns,.nav-scrim,.atmos,.flightpath{display:none !important}
  body{background:#fff;color:#000}
  .band{padding-block:1.5rem}
  a::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* screen-reader only */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}