/* ==========================================================================
   Master Wave — masterwavemedia.com
   Palette: navy #1e223d · white #ffffff · orange #F54F1B
   Direction (from Visual References): saturated field, large soft blooms,
   flowing mesh + grain texture, glass surfaces, confident wordmark.
   ========================================================================== */

/* ---------- Tokens: DARK is the base ---------- */
:root {
  color-scheme: dark;

  --navy:        #1e223d;
  --bg:          #12162a;
  --bg-2:        #171c34;
  --elev:        #1e223d;
  --elev-2:      #262c4d;

  --text:        #F5F7FC;
  --text-dim:    #A8B0CC;
  --text-faint:  #7C85A6;

  --line:        rgba(255, 255, 255, 0.10);
  --line-str:    rgba(255, 255, 255, 0.18);

  --glass:       rgba(255, 255, 255, 0.055);
  --glass-2:     rgba(255, 255, 255, 0.09);
  --glass-brd:   rgba(255, 255, 255, 0.13);
  --glass-hi:    rgba(255, 255, 255, 0.55);

  --orange:      #F54F1B;
  --orange-lt:   #FF8A4B;
  --orange-ink:  #FFF3EC;
  --orange-soft: rgba(245, 79, 27, 0.14);
  --orange-line: rgba(245, 79, 27, 0.38);
  --grad:        linear-gradient(103deg, #F5321B 0%, #F54F1B 45%, #FF9A55 100%);

  --field:       #12162a;
  --bloom-1:     rgba(245, 79, 27, 0.55);
  --bloom-2:     rgba(255, 138, 75, 0.34);
  --bloom-3:     rgba(74, 108, 214, 0.36);
  --mesh:        255, 255, 255;
  --mesh-a:      0.22;
  --grain-a:     0.05;

  --shadow-sm:   0 1px 2px rgba(6, 8, 18, .4);
  --shadow:      0 2px 6px rgba(6, 8, 18, .3), 0 18px 46px rgba(6, 8, 18, .42);
  --shadow-lg:   0 3px 10px rgba(6, 8, 18, .34), 0 34px 80px rgba(6, 8, 18, .5);
  --glow:        0 6px 18px rgba(6, 8, 18, .34);

  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --radius:    10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --maxw:      1180px;
  --maxw-prose: 760px;

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Tokens: LIGHT ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg:         #FFFFFF;
    --bg-2:       #F6F8FC;
    --elev:       #FFFFFF;
    --elev-2:     #F1F4FA;

    --text:       #1e223d;
    --text-dim:   #565E80;
    --text-faint: #7C85A6;

    --line:       rgba(30, 34, 61, 0.11);
    --line-str:   rgba(30, 34, 61, 0.20);

    --glass:      rgba(255, 255, 255, 0.66);
    --glass-2:    rgba(255, 255, 255, 0.86);
    --glass-brd:  rgba(30, 34, 61, 0.10);
    --glass-hi:   rgba(255, 255, 255, 0.95);

    --orange-ink:  #FFFFFF;
    --orange-soft: rgba(245, 79, 27, 0.10);
    --orange-line: rgba(245, 79, 27, 0.30);

    --field:      #1e223d;
    --mesh-a:     0.20;
    --grain-a:    0.035;

    --shadow-sm:  0 1px 2px rgba(30, 34, 61, .07);
    --shadow:     0 2px 6px rgba(30, 34, 61, .06), 0 16px 40px rgba(30, 34, 61, .09);
    --shadow-lg:  0 3px 10px rgba(30, 34, 61, .07), 0 30px 70px rgba(30, 34, 61, .13);
    --glow:       0 6px 16px rgba(30, 34, 61, .18);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:         #FFFFFF;
  --bg-2:       #F6F8FC;
  --elev:       #FFFFFF;
  --elev-2:     #F1F4FA;

  --text:       #1e223d;
  --text-dim:   #565E80;
  --text-faint: #7C85A6;

  --line:       rgba(30, 34, 61, 0.11);
  --line-str:   rgba(30, 34, 61, 0.20);

  --glass:      rgba(255, 255, 255, 0.66);
  --glass-2:    rgba(255, 255, 255, 0.86);
  --glass-brd:  rgba(30, 34, 61, 0.10);
  --glass-hi:   rgba(255, 255, 255, 0.95);

  --orange-ink:  #FFFFFF;
  --orange-soft: rgba(245, 79, 27, 0.10);
  --orange-line: rgba(245, 79, 27, 0.30);

  --field:      #1e223d;
  --mesh-a:     0.20;
  --grain-a:    0.035;

  --shadow-sm:  0 1px 2px rgba(30, 34, 61, .07);
  --shadow:     0 2px 6px rgba(30, 34, 61, .06), 0 16px 40px rgba(30, 34, 61, .09);
  --shadow-lg:  0 3px 10px rgba(30, 34, 61, .07), 0 30px 70px rgba(30, 34, 61, .13);
  --glow:       0 6px 16px rgba(30, 34, 61, .18);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* NO scroll-behavior: smooth. Native smooth scrolling is a no-op in some
     browsers/OS configurations, and because it silently applies to every
     anchor click and scrollIntoView() it killed all in-page navigation.
     Smooth scrolling is done in JS instead, with a guaranteed jump fallback. */
  scroll-padding-top: 92px;
  /* NO overflow-x here. With overflow-x set on BOTH html and body, the body
     becomes its own scroll container: window.scrollY stays pinned at 0 and
     every anchor link / scrollIntoView silently does nothing. Wheel scrolling
     still works, which is what made it look fine. Horizontal clipping is
     handled on body alone, which correctly propagates to the viewport. */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.55rem); font-weight: 900; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -0.038em; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.26rem); letter-spacing: -0.022em; }
p  { margin: 0 0 var(--s-4); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--orange); color: #fff; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
@media (max-width: 520px) { .wrap { padding-inline: 18px; } }

.section { padding-block: clamp(56px, 5.8vw, 88px); position: relative; }
.section--tight { padding-block: clamp(42px, 4.2vw, 62px); }
.section--alt { background: var(--bg-2); }
.section--edge { border-block: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.lede { font-size: clamp(1.02rem, 1.2vw, 1.11rem); color: var(--text-dim); max-width: 60ch; }
.head { max-width: 700px; margin-bottom: var(--s-6); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
  padding: 15px 28px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--glow);
}
.btn--primary:hover { box-shadow: 0 8px 22px rgba(6, 8, 18, .4); }

/* moving specular sheen */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-130%);
  z-index: -1;
}
.btn--primary:hover::after { animation: sheen 1s var(--ease-out) forwards; }
@keyframes sheen { to { transform: translateX(130%); } }

.btn--glass {
  background: var(--glass);
  border-color: var(--glass-brd);
  color: var(--text);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.btn--glass:hover { border-color: var(--orange-line); color: var(--orange); }

/* The hero field is always dark in either theme, so glass controls sitting on
   it must always use the dark-mode glass rather than the page theme's. */
.hero .btn--glass, .page-head .btn--glass {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}
.hero .btn--glass:hover, .page-head .btn--glass:hover { border-color: var(--orange-lt); color: var(--orange-lt); }

.btn--lg { padding: 18px 34px; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: 0.88rem; }

/* ---------- Glass surface ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  position: relative;
  overflow: hidden;
}
/* top rim light */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  opacity: .7;
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav { display: flex; align-items: center; gap: var(--s-4); height: 74px; }

/* Brand — the real Master Wave mark, backdrop recoloured to brand navy. */
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); margin-right: auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__logo {
  height: 40px;
  width: auto;
  flex: none;
  border-radius: 7px;
  transition: transform .4s var(--ease-out);
}
.brand:hover .brand__logo { transform: scale(1.03); }
.brand__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-faint);
  padding-left: 13px;
  border-left: 1px solid var(--line);
  width: 116px;
  line-height: 1.32;
}
@media (max-width: 660px) { .brand__sub { display: none; } }
.site-footer .brand__logo { height: 46px; }

.nav__links { display: flex; align-items: center; gap: var(--s-5); }
.nav__links a:not(.btn) {
  color: var(--text-dim);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding-block: 4px;
}
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transition: right .3s var(--ease-out);
}
.nav__links a:not(.btn):hover { color: var(--text); text-decoration: none; }
.nav__links a:not(.btn):hover::after,
.nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--text); }

.nav__tools { display: flex; align-items: center; gap: var(--s-3); }

.theme-toggle {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s var(--ease), transform .3s var(--ease-out), color .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--orange-line); color: var(--orange); transform: rotate(-18deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
}

.nav__toggle {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 100px;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav { height: 66px; gap: var(--s-2); }
  .nav__toggle { display: grid; }
  .nav__links {
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-5);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }
  .nav__links[hidden] { display: none; }
  .nav__links a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: var(--s-4); }
}

/* ==========================================================================
   HERO — "aurora + glass"
   Sleek structure, maximalist colour. A slow liquid aurora drifts behind
   frosted glass; sheen sweeps across the panels. Colour comes from the
   aurora itself, not from glow shadows.
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(54px, 5.6vw, 84px) clamp(48px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
  background: var(--field);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* --- the aurora: three counter-rotating conic fields --- */
.hero__field { position: absolute; inset: -25%; z-index: -3; overflow: hidden; filter: blur(80px) saturate(120%); opacity: .86; }
.hero__bloom { position: absolute; inset: 0; border-radius: 45%; will-change: transform; }
.hero__bloom--a {
  background: conic-gradient(from 0deg at 62% 34%,
    rgba(245, 79, 27, .82) 0deg, rgba(255, 138, 75, .28) 78deg,
    transparent 150deg, transparent 250deg, rgba(245, 50, 27, .58) 330deg, rgba(245, 79, 27, .82) 360deg);
  animation: aurora-a 28s linear infinite;
}
.hero__bloom--b {
  background: conic-gradient(from 180deg at 32% 68%,
    rgba(52, 84, 205, .70) 0deg, transparent 110deg,
    transparent 230deg, rgba(96, 132, 235, .50) 320deg, rgba(52, 84, 205, .70) 360deg);
  animation: aurora-b 38s linear infinite reverse;
}
.hero__bloom--c {
  background: radial-gradient(46% 40% at 78% 78%, rgba(255, 176, 96, .48), transparent 68%),
              radial-gradient(40% 36% at 16% 14%, rgba(126, 92, 220, .42), transparent 70%);
  animation: aurora-c 24s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: rotate(360deg) scale(1.08); } }
@keyframes aurora-b { to { transform: rotate(360deg) scale(1.14); } }
@keyframes aurora-c { to { transform: translate3d(6%, -5%, 0) scale(1.16); } }

/* --- fine grain so the colour has a surface --- */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 88% at 50% 6%, transparent 42%, rgba(10, 13, 30, .62) 100%),
    linear-gradient(180deg, rgba(14, 17, 34, .30) 0%, transparent 34%, rgba(14, 17, 34, .45) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(30px, 3.6vw, 54px);
  align-items: center;
}
.hero__inner > * { min-width: 0; }
@media (max-width: 980px) { .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 560px) {
  .hero__cta { display: grid; grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

.hero h1, .hero .hero__lede, .hero .hero__note { color: #fff; }
.hero .hero__lede { color: rgba(255, 255, 255, .84); }
.hero .hero__note { color: rgba(255, 255, 255, .62); }
.hero h1 { margin-bottom: var(--s-4); text-shadow: 0 2px 24px rgba(8, 10, 24, .45); }

/* headline sheen — a single travelling highlight, no glow */
.hero h1 .shine {
  background: linear-gradient(100deg,
    #F54F1B 0%, #FF7A3D 22%, #FFC08A 44%, #FF7A3D 66%, #F54F1B 88%, #F54F1B 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine-sweep 9s linear infinite;
}
@keyframes shine-sweep { to { background-position: -280% 0; } }

.hero__lede { font-size: clamp(1.04rem, 1.3vw, 1.16rem); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
.hero__note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 0.87rem;
  max-width: 52ch;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s-4); }
.badge {
  font-family: var(--font-display);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 100px;
  color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   Hero glass stack — layered frosted panels with a sheen sweep
   ========================================================================== */
.hero__stack { position: relative; display: grid; gap: 14px; }

.glass-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .3s var(--ease);
}
/* top rim light — the tell that makes glass read as glass */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  z-index: 3;
}
/* travelling sheen */
.glass-card::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(102deg, transparent 40%, rgba(255, 255, 255, .30) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: card-sheen 7s var(--ease-out) infinite;
  pointer-events: none;
  z-index: 2;
}
.glass-card:nth-child(2)::after { animation-delay: 1.1s; }
.glass-card:nth-child(3)::after { animation-delay: 2.2s; }
@keyframes card-sheen {
  0%, 62%  { transform: translateX(-70%); opacity: 0; }
  68%      { opacity: 1; }
  100%     { transform: translateX(70%); opacity: 0; }
}

.glass-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  position: relative;
  z-index: 3;
}
.glass-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad);
  flex: none;
}
.glass-card__body { padding: 16px; position: relative; z-index: 3; }

/* rows inside a glass card */
.glass-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
}
.glass-row + .glass-row { border-top: 1px solid rgba(255, 255, 255, .12); }
.glass-row b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--orange-lt);
}
.glass-row strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 2px;
}
.glass-row span { display: block; font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, .68); }

/* ==========================================================================
   Photo slots — REPLACE THE PLACEHOLDERS WITH REAL PHOTOS
   Drop a file into site/assets/img/ and set it as the <img src>.
   The frame, ratio and treatment stay the same.
   ========================================================================== */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  aspect-ratio: 16 / 10;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__tag {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 13, 30, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  padding: 5px 11px;
}
/* placeholder art shown until a real photo is dropped in */
.photo--empty {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px),
    linear-gradient(150deg, rgba(245, 79, 27, .22), rgba(52, 84, 205, .22));
}
.photo--empty span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  padding: 0 16px;
}

/* photo strip used further down the page */
.photo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .photo-row { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .hero__bloom, .glass-card::after, .hero h1 .shine { animation: none !important; }
}

/* ---------- Marquee strip ---------- */
.strip {
  background: var(--grad);
  color: #fff;
  padding-block: 15px;
  overflow: hidden;
  position: relative;
}
.strip__track {
  display: flex;
  gap: var(--s-6);
  width: max-content;
  animation: marquee 34s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip__track span { display: inline-flex; align-items: center; gap: var(--s-6); }
.strip__track span::after {
  content: "";
  width: 6px; height: 6px;
  background: rgba(255, 255, 255, .85);
  border-radius: 1px;
  transform: rotate(45deg);
}
@keyframes marquee { to { transform: translateX(-50%); } }
.strip:hover .strip__track { animation-play-state: paused; }

/* ---------- Grids / cards ---------- */
/* Explicit tracks, not auto-fit: auto-fit packed 6 cards as 4 + 2 and left a hole. */
.grid { display: grid; gap: 14px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--glass-hi), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
  pointer-events: none;
}
/* cursor-follow highlight */
.card::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--orange-soft) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover { border-color: var(--orange-line); transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card h3 { margin-bottom: 7px; }
.card p { color: var(--text-dim); margin: 0; font-size: 0.96rem; line-height: 1.6; }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  margin-bottom: var(--s-4);
  color: var(--orange);
  transition: transform .35s var(--ease-out), background-color .3s var(--ease);
}
.card:hover .card__icon { transform: translateY(-2px) scale(1.06); }
.card__icon svg { width: 21px; height: 21px; }

/* Numbered process steps */
.step { position: relative; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: block;
  margin-bottom: var(--s-3);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--text-dim); font-size: 0.955rem; margin: 0; }

/* Checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-dim);
  min-width: 0; overflow-wrap: anywhere; }
.checks li::before {
  content: "";
  flex: none;
  width: 19px; height: 19px;
  margin-top: 5px;
  border-radius: 6px;
  background-color: var(--orange-soft);
  border: 1px solid var(--orange-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F54F1B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.6vw, 54px); align-items: center; }
.split > * { min-width: 0; }
.split--top { align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.panel h3 { margin-bottom: 14px; }

/* Blueprint / spec visual */
.blueprint {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 30px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 30px 100%,
    linear-gradient(155deg, var(--elev-2), var(--elev));
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.blueprint::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
  animation: bp-sweep 6s var(--ease-out) infinite;
}
@keyframes bp-sweep {
  0%, 100% { transform: translateX(-45%); opacity: 0; }
  35%      { opacity: 1; }
  70%      { transform: translateX(45%); opacity: 0; }
}
.blueprint svg { width: 78%; height: auto; position: relative; z-index: 1; }

/* ---------- Form ---------- */
.form-shell {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.form-shell::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-grid > * { min-width: 0; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.87rem; font-weight: 700; color: var(--text); }
.field .hint { font-size: 0.79rem; color: var(--text-faint); font-weight: 500; }
.req { color: var(--orange); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-str);
  border-radius: var(--radius);
  padding: 14px 15px;
  width: 100%;
  max-width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-soft);
  outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #E2544B; }
.field .err { font-size: 0.82rem; color: #E2544B; margin: 0; }
:root:not([data-theme="light"]) .field .err { color: #FF8A82; }

/* Consent block — the A2P-critical region */
.consent {
  margin: var(--s-6) 0 0;
  border: 1px solid var(--orange-line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  padding: var(--s-5);
  min-width: 0;
}
.consent__optional {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange-line);
  background: var(--orange-soft);
  border-radius: 100px;
  padding: 5px 11px;
  margin-bottom: var(--s-3);
}
.consent__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-2);
  color: var(--text);
}
.consent__intro { font-size: 0.9rem; color: var(--text-dim); margin-bottom: var(--s-4); }

.consent-option {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elev);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.consent-option + .consent-option { margin-top: var(--s-3); }
.consent-option:hover { border-color: var(--orange-line); }
.consent-option:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.consent-option input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
  flex: none;
}
.consent-option .ctext { font-size: 0.9rem; line-height: 1.62; color: var(--text-dim); min-width: 0; }
.consent-option .ctext strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 4px; }
.consent-option .ctext a { color: var(--orange); text-decoration: underline; }

.legal-links {
  margin-top: var(--s-4);
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.legal-links a { color: var(--orange); text-decoration: underline; font-weight: 700; }

.form-actions { margin-top: var(--s-5); }
.form-status {
  margin-top: var(--s-4);
  font-size: 0.92rem;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--line-str);
  background: var(--bg-2);
}
.form-status[hidden] { display: none; }
.form-status--err { border-color: #E2544B; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Legal / prose pages ---------- */
.legal { padding-block: 46px 76px; }
.legal .wrap { max-width: 880px; }
.prose { max-width: var(--maxw-prose); }
.prose h2 {
  font-size: clamp(1.22rem, 1.9vw, 1.45rem);
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--s-6); }
.prose h3 { font-size: 1.06rem; margin-top: var(--s-5); scroll-margin-top: 100px; }
.prose p, .prose li { color: var(--text-dim); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 9px; margin-bottom: var(--s-4); }
.prose a { text-decoration: underline; }
.prose strong { color: var(--text); }
.prose__meta {
  font-size: 0.88rem;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--bg-2);
  margin-bottom: var(--s-6);
}
.callout {
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--s-5) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  background: var(--bg-2);
  margin-bottom: var(--s-6);
}
.toc h2 {
  font-size: 0.76rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--s-3) !important;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 700;
}
.toc ol { columns: 2; column-gap: var(--s-6); margin: 0; padding-left: 1.2em; display: block; }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.toc li { margin-bottom: 7px; break-inside: avoid; }
.toc a { color: var(--text-dim); text-decoration: none; font-size: 0.91rem; }
.toc a:hover { color: var(--orange); text-decoration: underline; }

.page-head {
  position: relative;
  padding-block: clamp(42px, 4.8vw, 64px) clamp(38px, 4vw, 54px);
  background: var(--field);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.page-head .hero__field, .page-head .hero__grain, .page-head .hero__vignette { position: absolute; inset: 0; }
.page-head .wrap { position: relative; }
.page-head h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 10px; color: #fff; }
.page-head .eyebrow { color: var(--orange-lt); }
.page-head .lede { color: rgba(255, 255, 255, .8); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: 50px 26px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 30px;
  margin-bottom: 34px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.footer-grid h4 {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid li { color: var(--text-dim); overflow-wrap: anywhere; }
.footer-grid a { color: var(--text-dim); text-decoration: none; display: inline-block; padding-block: 3px; }
.footer-grid a:hover { color: var(--orange); text-decoration: underline; }
.footer-about p { color: var(--text-dim); max-width: 42ch; font-size: 0.92rem; }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer-legal nav a { color: var(--text); text-decoration: underline; padding-block: 3px; }
.footer-sms {
  margin-top: var(--s-4);
  color: var(--text-faint);
  font-size: 0.81rem;
  line-height: 1.75;
  max-width: 88ch;
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Motion system ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  .hero__bloom, .strip__track, .hero h1 .shine, .blueprint::after { animation: none !important; }
  .btn--primary:hover::after { animation: none; }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-6 { margin-top: var(--s-6); }
.mt-5 { margin-top: var(--s-5); }
.stack-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   HERO REFINEMENT — simpler rhythm, one dominant action, entrance motion
   Motion is entrance-only: it settles and gets out of the way of the headline.
   Pure CSS (no JS gate) so content can never be left invisible.
   ========================================================================== */

.hero__title { max-width: 15ch; }
.hero__lede  { max-width: 46ch; margin-bottom: 0; }
.hero__cta   { margin-top: 26px; }
.hero__note  { margin-top: 26px; }

/* Fitts's Law — the single remaining action gets real size */
.hero__cta .btn--lg { padding: 18px 38px; font-size: 1.06rem; }

.badge-row { margin-bottom: 20px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

  .hero__anim > *      { animation: hero-rise .8s var(--ease-out) both; }
  .hero__anim > *:nth-child(1) { animation-delay: .06s; }
  .hero__anim > *:nth-child(2) { animation-delay: .16s; }
  .hero__anim > *:nth-child(3) { animation-delay: .26s; }
  .hero__anim > *:nth-child(4) { animation-delay: .36s; }
  .hero__anim > *:nth-child(5) { animation-delay: .46s; }

  .hero__stack         { animation: hero-rise .9s var(--ease-out) .30s both; }
  .hero__stack .glass-row { animation: hero-fade .6s var(--ease-out) both; }
  .hero__stack .glass-row:nth-child(1) { animation-delay: .60s; }
  .hero__stack .glass-row:nth-child(2) { animation-delay: .70s; }
  .hero__stack .glass-row:nth-child(3) { animation-delay: .80s; }
  .hero__stack .glass-row:nth-child(4) { animation-delay: .90s; }

  /* the field itself fades up so the page doesn't flash a flat block */
  .hero__field { animation: hero-fade 1.4s ease-out both; }
}

/* single-CTA hero: full width only on the smallest screens */
@media (max-width: 560px) {
  .hero__cta .btn { width: 100%; }
}

/* ==========================================================================
   SESSION 4 — first-screen composition, logo-shaped buttons, iconography,
   and a proper mobile structure.
   Appended last so these rules win over the earlier defaults.
   ========================================================================== */

:root {
  --header-h: 72px;
  --strip-h:  52px;
  --edge:     8px;   /* the corner softness taken from the logo outline */
}

/* --------------------------------------------------------------------------
   1. FIRST SCREEN
   Hero + service strip together fill exactly one viewport, so the orange bar
   always sits flush on the bottom edge of the first screen instead of
   floating in the last third, then scrolls away into the next section.
   svh = small viewport height: correct on mobile with the URL bar showing.
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100svh - var(--header-h) - var(--strip-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(28px, 3.4vw, 52px);
}
@supports not (height: 100svh) {
  .hero { min-height: calc(100vh - var(--header-h) - var(--strip-h)); }
}
.strip { min-height: var(--strip-h); display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   2. BUTTONS — the logo outline language: a soft-cornered rectangle with a
   hairline edge. Not pills, not heavy.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--edge);
  border-width: 1px;
  padding: 13px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  gap: 9px;
}
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: 0.87rem; }
.btn--primary { border-color: rgba(255, 255, 255, .18); }
.btn svg { width: 17px; height: 17px; flex: none; }

.theme-toggle, .nav__toggle { border-radius: var(--edge); }

/* --------------------------------------------------------------------------
   3. ICONOGRAPHY
   -------------------------------------------------------------------------- */
.i {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iconlist li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--elev);
  font-size: 0.95rem;
  color: var(--text-dim);
  transition: border-color .2s var(--ease), transform .2s var(--ease-out);
}
.iconlist li:hover { border-color: var(--orange-line); transform: translateX(2px); }
.iconlist .i {
  width: 34px; height: 34px;
  padding: 7px;
  border: 1px solid var(--orange-line);
  border-radius: 6px;
  background: var(--orange-soft);
  color: var(--orange);
  box-sizing: border-box;
}

.step__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--orange-line);
  border-radius: 6px;
  background: var(--orange-soft);
  color: var(--orange);
  margin-bottom: 12px;
}
.step__icon .i { width: 19px; height: 19px; }

.section { position: relative; overflow: hidden; }
.art-corner {
  position: absolute;
  right: -20px; top: -10px;
  width: min(300px, 36vw);
  height: auto;
  opacity: .07;
  pointer-events: none;
  color: var(--orange);
}
@media (max-width: 900px) { .art-corner { width: 190px; opacity: .05; } }

/* --------------------------------------------------------------------------
   4. MOBILE RESTRUCTURE  (max-width 780px)
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  :root { --header-h: 62px; --strip-h: 46px; }

  .wrap { padding-inline: 20px; }
  body { font-size: 16px; line-height: 1.6; }

  h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.035em; }
  h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.14; }
  h3 { font-size: 1.06rem; }

  .section { padding-block: 46px; }
  .section--tight { padding-block: 34px; }
  .head { margin-bottom: 22px; }
  .lede { font-size: 1rem; }

  .hero { padding-block: 26px 22px; }
  .hero__inner { gap: 24px; }
  .hero__title { max-width: 100%; }
  .hero__lede { max-width: 100%; font-size: 1.02rem; }
  .hero__cta { margin-top: 22px; }
  .hero__cta .btn { width: 100%; padding: 16px 22px; font-size: 1.02rem; }
  .hero__note { margin-top: 20px; padding-top: 14px; font-size: 0.82rem; }
  .badge-row { margin-bottom: 14px; }

  .hero__stack { margin-top: 4px; }
  .glass-card__head { padding: 11px 14px; font-size: 0.68rem; }
  .glass-card__body { padding: 12px 14px; }
  .glass-row { grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; }
  .glass-row strong { font-size: 0.92rem; }
  .glass-row span { font-size: 0.85rem; }

  .grid { gap: 12px; }
  .card { padding: 20px 18px; }
  .card__icon { width: 36px; height: 36px; margin-bottom: 12px; }

  .split { gap: 30px; }
  .panel { padding: 20px 18px; }
  .blueprint { aspect-ratio: 3 / 2; }
  .iconlist { grid-template-columns: 1fr; }

  .form-shell { padding: 20px 17px; border-radius: 12px; }
  .form-grid { gap: 14px; }
  .field input, .field select, .field textarea { padding: 14px 13px; font-size: 16px; }
  .consent { padding: 17px 15px; }
  .consent-option { padding: 14px 13px; grid-template-columns: 24px 1fr; }
  .consent-option input[type="checkbox"] { width: 24px; height: 24px; }
  .consent-option .ctext { font-size: 0.89rem; }

  .legal { padding-block: 32px 56px; }
  .toc { padding: 18px 16px; }
  .prose h2 { margin-top: 30px; padding-top: 18px; }

  .site-footer { padding-block: 40px 22px; }
  .footer-grid { gap: 26px; margin-bottom: 28px; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal nav { gap: 10px 18px; }
  .brand__logo { height: 34px; }

  /* leave room for the sticky action bar */
  .site-footer { padding-bottom: 96px; }
}

@media (max-width: 400px) {
  .wrap { padding-inline: 16px; }
  h1 { font-size: 1.95rem; }
  .btn { padding: 13px 18px; }
}

/* --------------------------------------------------------------------------
   5. STICKY MOBILE ACTION BAR
   Appears once the hero is behind you, and hides again over the form so it
   never covers the thing it is pointing at.
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transform: translateY(110%);
  transition: transform .28s var(--ease-out);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { flex: 1; padding: 14px 16px; }
.mobile-cta .btn--call {
  flex: 0 0 auto;
  background: transparent;
  border-color: var(--line-str);
  color: var(--text);
}
@media (max-width: 780px) { .mobile-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* --------------------------------------------------------------------------
   6. THANK-YOU PAGE  (/thank-you — a real directory, so a refresh returns 200)
   -------------------------------------------------------------------------- */
.thanks {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--field);
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@supports not (height: 100svh) {
  .thanks { min-height: calc(100vh - var(--header-h)); }
}
.thanks__inner { position: relative; max-width: 640px; }

.thanks__mark {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--edge);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  margin-bottom: 22px;
}
.thanks__mark svg { width: 26px; height: 26px; }

.thanks h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 12px;
}
.thanks__lede {
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  margin-bottom: 26px;
}
.thanks__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.thanks__note {
  font-size: 0.86rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 10px;
}
.thanks__note strong { color: rgba(255, 255, 255, .85); }
.thanks__contact { font-size: 0.88rem; color: rgba(255, 255, 255, .6); margin: 0; }
.thanks__contact a { color: var(--orange-lt); }

@media (max-width: 780px) {
  .thanks { padding-block: 34px; min-height: calc(100svh - var(--header-h) - 76px); }
  .thanks__cta { display: grid; grid-template-columns: 1fr; }
  .thanks__cta .btn { width: 100%; }
  .thanks__mark { width: 46px; height: 46px; margin-bottom: 18px; }
}

/* On phones the hero content is genuinely taller than one screen; forcing the
   viewport height there would only crush it. Let it flow, and keep the exact
   first-screen composition for tablet and desktop where it fits. */
@media (max-width: 780px) {
  .hero { min-height: 0; }
}

/* --------------------------------------------------------------------------
   7. THIRD-PARTY CHAT WIDGET
   The HighLevel widget floats bottom-right. On phones the sticky action bar
   also lives there, so lift the widget clear of it. Selectors are deliberately
   broad because the widget markup is not under our control.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  #chat-widget-container,
  .chat-widget-container,
  .lc_text-widget,
  div[class*="chat-widget"],
  div[id*="chat-widget"],
  iframe[src*="leadconnectorhq"] {
    bottom: 86px !important;
    z-index: 54 !important;
  }
}

/* --------------------------------------------------------------------------
   8. TOUCH TARGETS
   Anything tappable clears 44px on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .theme-toggle, .nav__toggle { width: 44px; height: 44px; }
  .theme-toggle svg, .nav__toggle svg { width: 19px; height: 19px; }
  .footer-grid a { padding-block: 9px; }
  .footer-legal nav a { padding-block: 9px; }
  .nav__links a:not(.btn) { padding-block: 16px; }
  .toc a { display: inline-block; padding-block: 5px; }
}

/* ==========================================================================
   SESSION 5 — POLISH PASS
   Smaller, softer buttons. One coherent radius scale instead of five.
   Calmer field, steadier vertical rhythm, fewer competing treatments.
   ========================================================================== */

:root {
  --edge:     12px;   /* buttons — softened, still not a pill */
  --r-input:  10px;
  --r-card:   14px;
  --r-shell:  16px;
}

/* --------------------------------------------------------------------------
   1. BUTTONS — noticeably smaller, corners eased
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--edge);
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 700;
  gap: 8px;
}
.btn--lg { padding: 13px 24px; font-size: 0.95rem; }
.btn--sm { padding: 8px 15px;  font-size: 0.84rem; }
.hero__cta .btn--lg { padding: 14px 26px; font-size: 0.97rem; }
.btn svg, .btn .i { width: 15px; height: 15px; }

.theme-toggle, .nav__toggle { border-radius: 10px; width: 36px; height: 36px; }
.theme-toggle svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   2. ONE RADIUS SCALE
   Everything previously ranged 5px–26px, which read as unsettled.
   -------------------------------------------------------------------------- */
.card,
.panel,
.glass-card,
.blueprint,
.toc,
.consent,
.hero__panel,
.iconlist li            { border-radius: var(--r-card); }
.form-shell             { border-radius: var(--r-shell); }
.field input,
.field select,
.field textarea,
.consent-option,
.form-status,
.card__icon,
.step__icon,
.iconlist .i            { border-radius: var(--r-input); }
.badge                  { border-radius: 100px; }   /* the one intentional pill */
.form-shell::before     { border-radius: var(--r-shell) var(--r-shell) 0 0; }

/* --------------------------------------------------------------------------
   3. CALMER FIELD
   The aurora was doing too much work behind the words.
   -------------------------------------------------------------------------- */
.hero__field { filter: blur(95px) saturate(108%); opacity: .60; }
.hero__vignette {
  background:
    radial-gradient(120% 88% at 50% 6%, transparent 46%, rgba(10, 13, 30, .58) 100%),
    linear-gradient(180deg, rgba(14, 17, 34, .34) 0%, transparent 36%, rgba(14, 17, 34, .50) 100%);
}
.hero h1 { text-shadow: 0 2px 18px rgba(8, 10, 24, .35); }

/* glass reads as one quiet surface rather than a stack of effects */
.glass-card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .17); }
.glass-card::after { opacity: 0; animation-duration: 9s; }
.hero__panel { background: rgba(11, 14, 30, .42); }

/* --------------------------------------------------------------------------
   4. STEADIER RHYTHM
   Section padding, heading gaps and card padding on one 4px-based scale.
   -------------------------------------------------------------------------- */
.section        { padding-block: clamp(52px, 4.8vw, 76px); }
.section--tight { padding-block: clamp(38px, 3.6vw, 54px); }
.head           { margin-bottom: 28px; }
.head .lede     { margin-bottom: 0; }
.eyebrow        { margin-bottom: 12px; }

h2 { margin-bottom: 12px; }
.split          { gap: clamp(28px, 3.2vw, 48px); }
.grid           { gap: 12px; }
.card           { padding: 20px; }
.panel          { padding: 22px; }

/* softer, single-signal hover */
.card { transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.card:hover { transform: none; border-color: var(--orange-line); background: var(--elev-2); }
.card::after { display: none; }
.btn:hover { transform: none; }
.btn--primary:hover { box-shadow: none; background: #E4460F; }

/* --------------------------------------------------------------------------
   5. MOBILE — same intent, smaller numbers
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .btn { padding: 12px 18px; font-size: 0.93rem; }
  .hero__cta .btn { padding: 15px 20px; font-size: 0.98rem; }
  .btn--sm { padding: 9px 14px; }
  .theme-toggle, .nav__toggle { width: 42px; height: 42px; border-radius: 11px; }

  .section        { padding-block: 44px; }
  .section--tight { padding-block: 32px; }
  .head           { margin-bottom: 22px; }
  .card           { padding: 18px; }
  .panel          { padding: 18px; }
  .form-shell     { padding: 18px 16px; }
  .mobile-cta .btn { padding: 13px 16px; }
}