/* ============================================================
   AAA SUPPLY — DESIGN SYSTEM
   ------------------------------------------------------------
   Structure ported from the Coastline build: editorial display
   scale, eyebrow labels, pill buttons with a sliding arrow,
   scroll reveals, grain and gradient texture, generous rhythm.
   Palette stays AAA's own — the blue and red from the logo.
   ============================================================ */

:root {
  /* ── Brand ──────────────────────────────────────────────── */
  --ink:          #071440;   /* deepest navy — dark sections, body text  */
  --ink-deep:     #04102B;   /* darker still — hero scrims                */
  --ink-soft:     #0B2C8A;   /* mid navy — headings on light              */
  --blue:         #1244CC;   /* AAA blue — primary action                 */
  --blue-deep:    #0F36B2;   /* pressed / hover                           */
  --blue-lift:    #6B92EA;   /* light blue — accents on dark              */
  --blue-wash:    #E6EEFF;   /* tinted panels on light                    */
  --red:          #C8102E;   /* AAA red — attention, never body text      */
  --red-deep:     #A50D26;
  --red-wash:     #FEF3F4;

  /* Copper. Deliberately scoped to the scroll rail and nothing else — it is
     a signature material, not a palette colour. Using it anywhere else would
     make it read as an accident rather than a choice. */
  --copper:       #B87333;
  --copper-lit:   #E3A063;   /* specular highlight down the tube          */
  --copper-dark:  #7A3E18;   /* shaded underside                          */

  /* ── Neutrals ───────────────────────────────────────────── */
  --sand:         #F6F7F9;   /* page background                           */
  --sand-deep:    #ECEFF3;   /* alternating section background            */
  --shell:        #FFFFFF;   /* cards, header pill                        */
  --line:         #DFE4EC;   /* hairlines on light                        */
  --muted:        #5B6880;   /* body copy                                 */
  --muted-soft:   #8A94A6;   /* captions, meta                            */

  /* ── Type ───────────────────────────────────────────────── */
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-coast:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swell:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Rhythm ─────────────────────────────────────────────── */
  --section:      clamp(4rem, 8vw, 7rem);
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --radius:       14px;
  --radius-lg:    20px;

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(7, 20, 64, 0.05), 0 4px 14px -6px rgba(7, 20, 64, 0.10);
  --shadow-md:    0 2px 4px rgba(7, 20, 64, 0.05), 0 16px 40px -18px rgba(7, 20, 64, 0.22);
  --shadow-lg:    0 30px 70px -28px rgba(7, 20, 64, 0.38);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

img { max-width: 100%; }

::selection { background: var(--blue-lift); color: var(--ink-deep); }

/* Focus that is visible without shouting. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.on-dark :focus-visible { outline-color: var(--blue-lift); }

input[type="search"]::-webkit-search-cancel-button { display: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sand-deep); }
::-webkit-scrollbar-thumb { background: #C2CAD8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #A6B0C2; }

/* ============================================================
   TYPE SCALE
   Oversized and tightly tracked — the backbone of the design.
   ============================================================ */

.display-xl { font-size: clamp(2.75rem, 8.4vw, 7.5rem); line-height: 0.88; letter-spacing: -0.045em; font-weight: 800; }
.display-lg { font-size: clamp(2.25rem, 6vw, 5rem);     line-height: 0.92; letter-spacing: -0.04em;  font-weight: 800; }
.display-md { font-size: clamp(1.85rem, 4.2vw, 3.25rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; }
.display-sm { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.05; letter-spacing: -0.03em;  font-weight: 700; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

/* Eyebrow with the leading rule Coastline uses to anchor every section. */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--blue);
}
.eyebrow-rule::before {
  content: "";
  display: block;
  height: 1px;
  width: 2rem;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow-rule.on-red { color: var(--red); }
.eyebrow-rule.on-dark-tone { color: var(--blue-lift); }

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted);
}
.on-dark .lede { color: rgba(255, 255, 255, 0.72); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Underline that wipes in from the left, like water over sand. */
.link-swell { position: relative; }
.link-swell::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-coast);
}
.link-swell:hover::after,
.link-swell:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container      { width: 100%; margin: 0 auto; padding-inline: var(--gutter); max-width: 1360px; }
.container-wide { width: 100%; margin: 0 auto; padding-inline: var(--gutter); max-width: 1600px; }
.container-narrow { width: 100%; margin: 0 auto; padding-inline: var(--gutter); max-width: 820px; }

.section       { padding-block: var(--section); }
.section-tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

.bg-sand  { background: var(--sand); }
.bg-deep  { background: var(--sand-deep); }
.bg-shell { background: var(--shell); }
.bg-ink   { background: var(--ink); color: #fff; }

/* ============================================================
   TEXTURE
   ============================================================ */

/* Film grain — keeps large flat fields from looking like dead pixels. */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Light falling across a dark section. */
.sunwash {
  background-image:
    radial-gradient(120% 80% at 82% -10%, rgba(200, 16, 46, 0.20) 0%, transparent 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(18, 68, 204, 0.45) 0%, transparent 62%);
}

/* Engineering grid — the trade-supply equivalent of Coastline's sand texture. */
.dotgrid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Rounded image frames. `overflow:hidden` + `border-radius` is unreliable
   here: an image Chrome has promoted to its own compositing layer — which
   our hover `scale` transitions do — paints past the radius, leaving a
   square wedge of photo in each corner. clip-path clips composited
   layers correctly. */
.clip-card    { clip-path: inset(0 round 14px); }
.clip-card-lg { clip-path: inset(0 round 20px); }

.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   BUTTONS
   Pill, uppercase, wide tracking, lift on hover, arrow slides.
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 300ms var(--ease-coast),
              color 300ms var(--ease-coast),
              border-color 300ms var(--ease-coast),
              box-shadow 300ms var(--ease-coast),
              transform 300ms var(--ease-coast);
}
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-sm { height: 2.5rem;  padding-inline: 1.25rem; font-size: 0.6875rem; }
.btn-md { height: 3rem;    padding-inline: 1.75rem; font-size: 0.75rem; }
.btn-lg { height: 3.5rem;  padding-inline: 2.25rem; font-size: 0.8125rem; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover {
  background: var(--blue-deep);
  box-shadow: 0 14px 40px -12px rgba(18, 68, 204, 0.65);
  transform: translateY(-2px);
}

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover {
  background: var(--red-deep);
  box-shadow: 0 14px 40px -12px rgba(200, 16, 46, 0.6);
  transform: translateY(-2px);
}

.btn-outline { border-color: rgba(7, 20, 64, 0.22); color: var(--ink); background: transparent; }
.btn-outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

/* For dark backgrounds. */
.btn-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; backdrop-filter: blur(2px); }
.btn-light:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.35); }

.btn-ghost { color: var(--blue); background: transparent; padding-inline: 0; letter-spacing: 0.1em; }
.btn-ghost:hover { color: var(--blue-deep); }

.btn:active { transform: translateY(0) scale(0.99); }

/* The one required micro-interaction: the arrow slides out on hover. */
.btn-arrow {
  width: 1.25rem;
  height: 0.625rem;
  flex-shrink: 0;
  transition: transform 300ms var(--ease-coast);
}
.btn:hover .btn-arrow { transform: translateX(6px); }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 400ms var(--ease-coast), transform 400ms var(--ease-coast), border-color 400ms var(--ease-coast);
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(18, 68, 204, 0.28);
}

/* Image inside a card zooms very slightly as the card lifts. */
.card-media { overflow: hidden; }
.card-media > img { transition: transform 700ms var(--ease-coast); display: block; }
.card-hover:hover .card-media > img { transform: scale(1.045); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--blue);
}
.pill-red   { background: var(--red-wash); color: var(--red); }
.pill-dark  { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); }
.pill-solid { background: var(--blue); color: #fff; }

/* ============================================================
   MOTION
   Every reveal is additive: content is visible if JS never runs,
   and `is-in` is the only thing these rules key off. A scroll
   animation must never be able to leave content permanently
   invisible.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 850ms var(--ease-coast), transform 850ms var(--ease-coast);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Headline lines clip up from behind a mask — architectural, not bouncy. */
.reveal-lines { display: block; }
.reveal-lines > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
}
.reveal-lines > span > span {
  display: block;
  transform: translateY(110%);
  transition: transform 950ms var(--ease-coast);
  transition-delay: var(--line-delay, 0ms);
}
.reveal-lines.is-in > span > span { transform: none; }

/* No-JS and pre-hydration safety net: if the observer never runs, the
   content still has to be readable. */
.no-js .reveal,
.no-js .reveal-lines > span > span { opacity: 1; transform: none; }

/* ============================================================
   HEADER
   Transparent over the hero, then condenses into a floating
   blurred pill once the page scrolls.
   ============================================================ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  padding-block: 1rem;
  transition: padding 500ms var(--ease-coast);
}
.site-header.is-scrolled { padding-block: 0.625rem; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  transition: background-color 500ms var(--ease-coast),
              border-color 500ms var(--ease-coast),
              box-shadow 500ms var(--ease-coast),
              padding 500ms var(--ease-coast);
}
.site-header.is-scrolled .header-bar {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(7, 20, 64, 0.08);
  box-shadow: 0 10px 40px -18px rgba(7, 20, 64, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.5rem 0.75rem 0.5rem 1rem;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 300ms var(--ease-coast);
}

/* Full-screen mobile menu, revealed with a circular wipe from the
   hamburger's corner. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  clip-path: circle(0% at 92% 5%);
  transition: clip-path 600ms var(--ease-coast);
}
.mobile-menu.is-open { clip-path: circle(150% at 92% 5%); }

.mobile-nav-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  padding: 1.125rem 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 550ms var(--ease-coast), transform 550ms var(--ease-coast);
  transition-delay: var(--stagger, 0ms);
}
.mobile-menu.is-open .mobile-nav-link { opacity: 1; transform: none; }

/* ============================================================
   FAQ
   Native <details>, so keyboard and screen-reader behaviour is
   free and the answers are in the HTML for crawlers.
   ============================================================ */

.faq { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq dt {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--ink-soft);
}
@media (min-width: 640px) { .faq dt { font-size: 1.1875rem; } }

.faq dd {
  max-width: 42rem;
  padding: 0 3rem 1.75rem 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
}

.faq-toggle {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 20, 64, 0.18);
  border-radius: 999px;
  color: var(--blue);
  transition: transform 300ms var(--ease-coast), background-color 300ms var(--ease-coast);
}
.faq[open] .faq-toggle { transform: rotate(45deg); background: var(--blue-wash); }
.faq summary:hover .faq-toggle { background: var(--blue-wash); }

/* ============================================================
   MOBILE CTA
   Thumb-reachable bar; slides up once past the hero.
   ============================================================ */

.mobile-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: rgba(7, 20, 64, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(110%);
  transition: transform 450ms var(--ease-coast);
}
.mobile-cta.is-in { transform: none; }

.mobile-cta-call {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  transition: background-color 300ms var(--ease-coast);
}
.mobile-cta-call:hover { background: rgba(255, 255, 255, 0.12); }

/* ============================================================
   FORMS
   ============================================================ */

.field {
  width: 100%;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 250ms var(--ease-coast), box-shadow 250ms var(--ease-coast);
}
.field::placeholder { color: var(--muted-soft); }
.field:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(18, 68, 204, 0.12);
}
.field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 0.5rem;
}

/* Search field sitting on the dark header. */
.field-dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.field-dark::placeholder { color: rgba(255, 255, 255, 0.5); }
.field-dark:focus {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

/* ============================================================
   MISC
   ============================================================ */

/* The wave that the next section is revealed from underneath. */
.wave { display: block; width: 100%; height: 60px; }
@media (min-width: 640px) { .wave { height: 100px; } }

/* ============================================================
   SCROLL RAIL
   Sits below the header (z 90) and the mobile menu (z 120), and
   never takes pointer events — it is a read-out, not a control.
   ============================================================ */

.scroll-rail {
  position: fixed;
  z-index: 80;
  pointer-events: none;
}
.scroll-rail svg { display: block; width: 100%; height: 100%; }

/* Vertical rail down the left gutter — desktop only, where there is
   room for it beside the content. */
.scroll-rail-v {
  display: none;
  left: 0;
  top: 0;
  width: 40px;
  height: 100vh;
  height: 100svh;
}

/* Flat rail across the very top on smaller screens. */
.scroll-rail-h {
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
}

@media (min-width: 1100px) {
  .scroll-rail-v { display: block; }
  .scroll-rail-h { display: none; }
}

/* Refrigerant moving through the suction line. Cool against the warm copper,
   which is both the right contrast and the right colour language for HVAC —
   red here would muddy against the tube. Positioned entirely by transform so
   the scroll handler never touches layout. */
.scroll-rail-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8FD3F4;
  box-shadow: 0 0 12px 3px rgba(143, 211, 244, 0.6);
  will-change: transform;
}

.rule { height: 1px; background: var(--line); border: 0; }
.rule-dark { height: 1px; background: rgba(255, 255, 255, 0.12); border: 0; }

/* The header is fixed, so anything the browser scrolls to on its own — an
   anchor target, a field reached by Tab, an input the browser jumps to on
   validation — would otherwise land underneath it and be both unreadable and
   unclickable. Reserve the header's height at every such target. */
:target,
.field,
[id],
h1, h2, h3 {
  scroll-margin-top: 7.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: -9999px;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ============================================================
   Respect the user's motion preference everywhere.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-lines > span > span { transform: none; }
}