/* ============================================================
   hub.css — Elevation Pro service hub (/) + coming-soon pages
   Layered ON TOP of styles.css (uses its :root tokens, .btn,
   .brand, .grain, .eyebrow). Dark + ember, Clash Display / Switzer.
   ============================================================ */

.hub-page {
  background: var(--night);
  color: var(--paper);
  min-height: 100vh;  /* fallback for old in-app WebViews without svh/dvh */
  min-height: 100svh; /* stable: no jump when the in-app URL bar collapses */
}
.hub-page .grain { opacity: .4; mix-blend-mode: overlay; }

/* ambient ember glow */
.hub-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 620px at 80% -10%, rgba(239,106,46,.20), transparent 60%),
    radial-gradient(820px 600px at 8% 112%, rgba(239,106,46,.10), transparent 55%);
}

/* ambient background video (poster image shows on mobile / reduced-motion / data-saver) */
.hub-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--night); }
.hub-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-bg-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 620px at 80% -10%, rgba(239,106,46,.20), transparent 60%),
    linear-gradient(180deg, rgba(8,11,16,.60) 0%, rgba(8,11,16,.46) 38%, rgba(8,11,16,.88) 100%);
}
@media (prefers-reduced-motion: reduce) { .hub-bg-video { display: none; } }

.hub-shell {
  position: relative; z-index: 2;
  max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
  min-height: 100vh; min-height: 100svh; /* vh fallback + stable svh (no URL-bar jump) */
  display: flex; flex-direction: column;
}

/* ---------- header ---------- */
.hub-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.hub-header .brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.hub-header .brand-mark { display: inline-flex; }
.hub-header .brand-mark img { width: 34px; height: 34px; display: block; }
.hub-header .brand-name { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; color: #fff; }
.hub-header .brand-pro { color: var(--ember); }
.hub-tel {
  display: inline-flex; align-items: center; gap: 8px; color: var(--mist);
  font-weight: 600; font-size: .98rem; padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--night-line);
  white-space: nowrap; /* the number must never wrap into a tall two-line pill */
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
/* phones: compact single-line pill next to the logo (it used to wrap to 2 lines / 71px tall) */
@media (max-width: 520px) {
  .hub-tel { font-size: .85rem; padding: 8px 12px; gap: 6px; }
  .hub-tel svg { width: 14px; height: 14px; }
}
.hub-tel:hover { color: #fff; border-color: var(--ember); }
.hub-tel svg { color: var(--ember); }

/* attention-pulsing phone pill (homepage header only — class added in index.html) */
@keyframes telBlink {
  0%, 62%, 100% { border-color: var(--night-line); color: var(--mist); box-shadow: 0 0 0 0 rgba(239,106,46,0); }
  80%           { border-color: var(--ember-2); color: var(--ember-2); box-shadow: 0 0 0 5px rgba(239,106,46,.22), 0 0 20px rgba(239,106,46,.45); }
}
.hub-tel--blink { animation: telBlink 1.3s var(--ease) infinite; }
.hub-tel--blink:hover { animation-play-state: paused; color: #fff; border-color: var(--ember); }
@media (prefers-reduced-motion: reduce) {
  .hub-tel--blink { animation: none; border-color: var(--ember); color: #fff; }
}

/* ---------- hero ---------- */
.hub-hero { text-align: center; max-width: 780px; margin: clamp(20px,5vw,52px) auto clamp(28px,4vw,46px); }
.hub-hero .eyebrow { justify-content: center; color: var(--mist); margin-bottom: 18px; }
.hub-h1 { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; line-height: 1.02; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.025em; color: #fff; }
.hub-h1 .title-accent { color: var(--ember); }
.hub-lead { margin: 20px auto 0; max-width: 56ch; color: var(--mist); font-size: clamp(1.02rem,1.6vw,1.2rem); line-height: 1.6; }

/* hero WhatsApp — bright-green primary, centered under the lead (above the 3 paths) */
.hub-hero-wa { margin-top: 26px; }
.hub-wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #062a12; font-weight: 700; font-size: 1rem;
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(37,211,102,.30);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.hub-wa-btn:hover { transform: translateY(-2px); background: #2ee06f; box-shadow: 0 14px 34px rgba(37,211,102,.42); }
.hub-wa-btn:focus-visible { outline: 3px solid #25D366; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hub-wa-btn:hover { transform: none; } }

/* ---------- cards grid ---------- */
.hub-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); padding-bottom: clamp(24px,4vw,48px); }
/* tablets: 480px left ~150px dead margins each side at 768 (audit k25) */
@media (max-width: 880px) { .hub-grid { grid-template-columns: 1fr; max-width: min(560px, 92%); width: 100%; margin-inline: auto; } }

.path-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 384px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; isolation: isolate; color: #fff;
  border: 1px solid var(--night-line); background: var(--night-2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.path-card:hover { transform: translateY(-6px); border-color: rgba(239,106,46,.5); box-shadow: var(--shadow-lg); }
.path-card:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* the live (actionable) card is the hero of the three — give it a resting
   ember ring and a touch more lift on hover so it reads as the primary path */
.path-card.is-live { border-color: rgba(239,106,46,.45); box-shadow: 0 0 0 1px rgba(239,106,46,.35); }
.path-card.is-live:hover { transform: translateY(-8px); border-color: var(--ember); box-shadow: 0 0 0 1px rgba(239,106,46,.55), var(--shadow-lg); }

.path-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.path-card:hover .path-bg { transform: scale(1.06); }
.path-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,11,16,.12) 0%, rgba(8,11,16,.52) 50%, rgba(8,11,16,.92) 100%); }

/* coming-soon: blueprint-grid treatment */
.path-card.is-soon { background: linear-gradient(180deg, var(--night-3), var(--night)); }
.path-card.is-soon .path-bg {
  background-image:
    linear-gradient(rgba(239,106,46,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,106,46,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% 0%, #000 28%, transparent 80%);
  mask-image: radial-gradient(125% 95% at 50% 0%, #000 28%, transparent 80%);
}
.path-card.is-soon:hover .path-bg { transform: none; }
.path-card.is-soon .path-scrim { background: linear-gradient(180deg, transparent 28%, rgba(8,11,16,.66) 100%); }

/* coming-soon card showing a real preview photo (not the blueprint grid):
   drop the radial mask, give it a photo-friendly scrim + the hover zoom */
.path-card.is-soon.has-preview .path-bg {
  -webkit-mask: none; mask: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.path-card.is-soon.has-preview .path-scrim { background: linear-gradient(180deg, rgba(8,11,16,.16) 0%, rgba(8,11,16,.46) 46%, rgba(8,11,16,.9) 100%); }
.path-card.is-soon.has-preview:hover .path-bg { transform: scale(1.06); }

/* badge */
.path-badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
}
.path-badge.is-live { background: var(--ember); color: var(--ember-ink); }
.path-badge.is-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ember-ink); animation: pathPulse 1.8s var(--ease) infinite; }
.path-badge.is-soon { background: rgba(255,255,255,.08); color: var(--mist); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes pathPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.path-ic { position: absolute; top: 15px; right: 18px; z-index: 2; color: rgba(255,255,255,.88); }
.path-card.is-soon .path-ic { color: rgba(170,180,192,.7); }

.path-body { position: relative; z-index: 2; }
.path-kicker { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ember-2); margin-bottom: 8px; }
.path-card.is-soon .path-kicker { color: var(--mist-soft); }
.path-h { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.5rem,2.4vw,1.92rem); letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.path-p { margin-top: 10px; color: rgba(231,224,212,.82); font-size: .97rem; line-height: 1.5; }
/* display:flex (not inline) so the CTA always sits on its own line (audit k25) */
.path-go { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .98rem; }
.path-go svg { transition: transform .25s var(--ease); }
.path-card:hover .path-go svg { transform: translateX(4px); }
.path-card.is-live .path-go { color: var(--ember-2); }
.path-card.is-soon .path-go { color: var(--mist); }

/* ---------- footer ---------- */
.hub-foot {
  margin-top: auto; padding: 22px 0 30px; border-top: 1px solid var(--night-line);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  color: var(--mist-soft); font-size: .9rem;
}
.hub-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.hub-foot a { color: var(--mist); }
.hub-foot a:hover { color: #fff; }
.hub-foot-wa { display: inline-flex; align-items: center; gap: 7px; color: #25D366 !important; font-weight: 600; }
.hub-foot-wa:hover { color: #2ee06f !important; }

/* ---------- big desktops ---------- */
/* The shell is viewport-locked (100svh) while hero+cards have fixed heights, so all
   leftover space piled up between the grid and the footer (a 404px hole @2560).
   Balance it: #hubMain (the hero+grid flex child) centers via auto margins — the
   footer's own auto margin is dropped so the space splits evenly above and below. */
@media (min-width: 1600px) {
  #hubMain { margin-block: auto; }
  .hub-foot { margin-top: 0; }
}
@media (min-width: 2100px) {
  /* 1920x1080 keeps the base scale (it fills the screen exactly); scaling there
     pushed docH to ~1226 and made the one-screen hub scroll. 2K+ gets the boost. */
  .hub-shell { max-width: 1400px; }
  .hub-h1 { font-size: 5rem; }
  .hub-lead { font-size: 1.28rem; max-width: 60ch; }
  .hub-grid { gap: 26px; }
  .path-card { min-height: 462px; padding: 32px; }
  .path-h { font-size: 2.15rem; }
  .path-p { font-size: 1.05rem; }
}

/* ---------- staggered reveal ---------- */
@keyframes hubUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal-up { opacity: 0; animation: hubUp .7s var(--ease) forwards; }
.d1 { animation-delay: .04s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .2s; }
.d4 { animation-delay: .28s; } .d5 { animation-delay: .36s; } .d6 { animation-delay: .44s; }

/* ============================================================
   COMING-SOON pages (adu.html / afh.html)
   ============================================================ */
/* full-page atmospheric photo backdrop (image set per-page via inline background-image) */
.soon-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; }
.soon-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(239,106,46,.16), transparent 58%),
    linear-gradient(180deg, rgba(8,11,16,.72) 0%, rgba(8,11,16,.60) 42%, rgba(8,11,16,.90) 100%);
}
@media (max-width: 860px) { .soon-bg::after { background: linear-gradient(180deg, rgba(8,11,16,.80) 0%, rgba(8,11,16,.72) 40%, rgba(8,11,16,.94) 100%); } }

.soon-wrap { flex: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items: center; padding: clamp(16px,4vw,40px) 0 clamp(40px,6vw,72px); }
@media (max-width: 860px) { .soon-wrap { grid-template-columns: 1fr; gap: 36px; } }

.soon-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; color: var(--mist); font-weight: 600; font-size: .92rem; margin: 8px 0 4px; transition: color .2s var(--ease); }
.soon-back:hover { color: var(--ember-2); }
.soon-back svg { transition: transform .2s var(--ease); }
.soon-back:hover svg { transform: translateX(-3px); }

.soon-eyebrow { color: var(--mist); }
.soon-h1 { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; color: #fff; font-size: clamp(2.3rem,5.5vw,3.7rem); letter-spacing: -.025em; line-height: 1.03; }
.soon-h1 .title-accent { color: var(--ember); }
.soon-lead { margin-top: 18px; color: var(--mist); font-size: clamp(1.02rem,1.6vw,1.16rem); line-height: 1.6; max-width: 54ch; }
.soon-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.soon-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--paper); font-size: 1rem; line-height: 1.45; }
.soon-list svg { flex: none; margin-top: 2px; color: var(--ember); }

/* notify card */
.notify { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-lg); padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-lg); }
.notify h2 { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; color: #fff; font-size: 1.5rem; letter-spacing: -.01em; }
.notify .sub { color: var(--mist); margin-top: 8px; font-size: .96rem; line-height: 1.5; }
.notify .field { margin-top: 14px; }
.notify label { display: block; font-size: .82rem; font-weight: 600; color: var(--mist); margin-bottom: 6px; }
.notify input, .notify textarea { width: 100%; background: var(--night); color: #fff; border: 1.5px solid var(--night-line); border-radius: var(--r-sm); padding: 13px 14px; font-size: 1rem; font-family: inherit; transition: border-color .2s var(--ease); }
.notify input:focus, .notify textarea:focus { outline: none; border-color: var(--ember); }
.notify input::placeholder, .notify textarea::placeholder { color: var(--mist-soft); }
.notify .btn { margin-top: 18px; }
.notify .fine { margin-top: 12px; color: var(--mist-soft); font-size: .82rem; text-align: center; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notify-ok { display: none; text-align: center; padding: 12px 0; }
.notify-ok.is-on { display: block; }
.notify-ok .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--ember-tint); color: var(--ember); }
.notify-ok h3 { font-family: "Clash Display", system-ui, sans-serif; color: #fff; font-size: 1.35rem; }
.notify-ok p { color: var(--mist); margin-top: 6px; }
.notify-err { color: #ff9b7a; font-size: .9rem; margin-top: 10px; display: none; }
.notify-err.is-on { display: block; }

/* "Construction" sub-wordmark on the dark hub header.
   Reset the base .6 opacity so it clears AA against the near-black hub bg. */
.hub-header .brand-suffix { color: #c2cad4; opacity: 1; }