/* ============================================================================
   Coming Soon / 404  —  gritblueprint.com
   Full-screen takeover. Everything scoped under body.gb-coming-soon-tpl so it
   cannot bleed onto other pages, and self-defined so it does not depend on
   whichever foundation classes happen to be live in gb-home.css.
   Only hard dependency: assets/colors_and_type.css (design tokens + Zuume font).
   ============================================================================ */

/* Local fallbacks for tokens this page uses. If colors_and_type.css already
   defines them these just reassert the same brand values (harmless). */
body.gb-coming-soon-tpl{
  --gb-pink: #FF1894;
  --gb-blue-300: #4FB4E6;
  --gb-blue-500: #0092D6;
  --fg-on-dark-2: #B9C6DA;
  --fg-on-dark-3: #7E8FAB;
}

/* Reset the document so the screen fills the viewport edge to edge. */
body.gb-coming-soon-tpl{ margin:0; background:#0E1E36; }

/* ---- Takeover wrapper ----------------------------------------------------- */
.gb-cs{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:#fff;
  /* blueprint grid layered over the navy radial gradient */
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(120% 90% at 50% -10%, #1d4a7e 0%, #0E1E36 72%);
}
/* keep it full height under the WP admin bar when logged in */
body.admin-bar.gb-coming-soon-tpl .gb-cs{ min-height:calc(100vh - 32px); }
@media (max-width:782px){
  body.admin-bar.gb-coming-soon-tpl .gb-cs{ min-height:calc(100vh - 46px); }
}

/* ---- Ambient decoration --------------------------------------------------- */
.gb-cs__glow{
  position:absolute; left:50%; top:44%;
  width:min(1000px,120vw); height:min(1000px,120vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,24,148,.18) 0%, rgba(255,24,148,.06) 34%, transparent 62%);
  pointer-events:none; z-index:0;
  animation:gbGlow 9s ease-in-out infinite;
}
.gb-cs__mark{
  position:absolute; left:50%; top:50%;
  width:min(760px,92vw);
  transform:translate(-50%,-50%);
  opacity:.05; pointer-events:none; z-index:0;
  animation:gbFloat 12s ease-in-out infinite;
}

/* ---- Header (logo only) --------------------------------------------------- */
.gb-cs__header{
  position:relative; z-index:3; flex:none;
  padding:30px 44px;
  display:flex; align-items:center; justify-content:flex-start;
}
.gb-cs__logo{ display:inline-flex; }
.gb-cs__logo img{ height:26px; width:auto; }

/* ---- Hero ----------------------------------------------------------------- */
.gb-cs__main{
  position:relative; z-index:2; flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px 56px;
}
.gb-cs__inner{ width:100%; max-width:780px; text-align:center; }

.gb-cs__eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:26px;
}
.gb-cs__rule{ width:30px; height:1px; background:var(--gb-pink,#FF1894); opacity:.7; }
.gb-cs__eyebrow-txt{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-weight:700; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gb-pink,#FF1894);
}

.gb-cs__h1{
  font-family:var(--font-display, "Zuume", "Arial Narrow", sans-serif);
  font-weight:700; text-transform:uppercase; line-height:.9; letter-spacing:.01em;
  margin:0; color:#fff; font-size:clamp(46px,8.4vw,104px); text-wrap:balance;
}
.gb-cs__tag{
  font-family:var(--font-display, "Zuume", "Arial Narrow", sans-serif);
  font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.04;
  margin:20px 0 0; color:#fff; font-size:clamp(19px,2.7vw,31px);
}
.gb-cs__tag b{ color:var(--gb-pink,#FF1894); font-weight:inherit; }

.gb-cs__lede{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-weight:400; font-size:clamp(16px,1.4vw,18px); line-height:1.6;
  color:var(--fg-on-dark-2,#B9C6DA); max-width:54ch; margin:24px auto 0; text-wrap:pretty;
}

.gb-cs__cta{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:38px;
}

/* ---- Buttons (self-contained, matches the GB system spec) ----------------- */
.gb-cs .btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  border-radius:999px; padding:13px 26px; cursor:pointer;
  text-decoration:none; border:1px solid transparent; white-space:nowrap;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1), background-color .22s, color .22s, border-color .22s;
}
.gb-cs .btn svg{ width:18px; height:18px; }
.gb-cs .btn-lg{ padding:16px 32px; font-size:15px; }
.gb-cs .btn-pink{
  background:var(--gb-pink,#FF1894); color:#fff;
  box-shadow:0 8px 26px rgba(255,24,148,.34);
}
.gb-cs .btn-pink:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,24,148,.46); }
.gb-cs .btn-outline{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.42);
}
.gb-cs .btn-outline:hover{ transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.06); }

/* ---- Newsletter ----------------------------------------------------------- */
.gb-cs__news{
  margin:54px auto 0; padding-top:40px;
  border-top:1px solid rgba(255,255,255,.12); max-width:520px;
}
.gb-cs__news-eyebrow{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gb-blue-300,#4FB4E6); margin-bottom:10px;
}
.gb-cs__news-h2{
  font-family:var(--font-display, "Zuume", "Arial Narrow", sans-serif);
  font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1;
  font-size:clamp(24px,3vw,32px); color:#fff; margin:0 0 8px;
}
.gb-cs__news-sub{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-size:14.5px; line-height:1.55; color:var(--fg-on-dark-2,#B9C6DA); margin:0 0 22px;
}
.gb-cs__form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gb-cs__input{
  flex:1 1 240px; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:15px 24px; color:#fff; font-size:15px;
  font-family:var(--font-sans, Helvetica, Arial, sans-serif); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.gb-cs__input::placeholder{ color:var(--fg-on-dark-3,#7E8FAB); }
.gb-cs__input:focus{ border-color:var(--gb-blue-500,#0092D6); box-shadow:0 0 0 3px rgba(0,146,214,.28); }

.gb-cs__error{
  margin:12px 0 0; font-size:13px; color:var(--gb-pink,#FF1894);
  font-family:var(--font-sans, Helvetica, Arial, sans-serif); font-weight:600;
}

.gb-cs__success{
  align-items:center; gap:12px;
  background:rgba(255,24,148,.1); border:1px solid rgba(255,24,148,.4);
  border-radius:999px; padding:13px 24px;
}
.gb-cs__success:not([hidden]){ display:inline-flex; }
.gb-cs__success-check{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--gb-pink,#FF1894); display:inline-flex; align-items:center; justify-content:center;
}
.gb-cs__success-txt{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-weight:700; font-size:14px; letter-spacing:.03em; color:#fff;
}

/* ---- Footer --------------------------------------------------------------- */
.gb-cs__footer{
  position:relative; z-index:3; flex:none;
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.gb-cs__copy{
  font-family:var(--font-sans, Helvetica, Arial, sans-serif);
  font-size:12px; letter-spacing:.04em; color:var(--fg-on-dark-3,#7E8FAB);
}
.gb-cs__social{ display:flex; align-items:center; gap:8px; }
.gb-cs__social a{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--fg-on-dark-2,#B9C6DA); border:1px solid rgba(255,255,255,.14);
  transition:color .2s, border-color .2s;
}
.gb-cs__social a:hover{ color:#fff; border-color:var(--gb-pink,#FF1894); }

/* ---- Entrance + ambient motion ------------------------------------------- */
@keyframes gbGlow{
  0%,100%{ opacity:.5;  transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:.78; transform:translate(-50%,-50%) scale(1.07); }
}
@keyframes gbFloat{
  0%,100%{ transform:translate(-50%,-50%); }
  50%    { transform:translate(-50%,-53%); }
}
@keyframes gbRise{
  0%  { opacity:0; transform:translateY(22px); }
  100%{ opacity:1; transform:none; }
}
.gb-cs .gb-rise{ animation:gbRise .7s cubic-bezier(.22,1,.36,1) both; }
.gb-cs .gb-rise:nth-of-type(1){ animation-delay:.02s; }
.gb-cs__eyebrow.gb-rise{ animation-delay:.02s; }
.gb-cs__h1.gb-rise{ animation-delay:.08s; }
.gb-cs__tag.gb-rise{ animation-delay:.16s; }
.gb-cs__lede.gb-rise{ animation-delay:.24s; }
.gb-cs__cta.gb-rise{ animation-delay:.32s; }
.gb-cs__news.gb-rise{ animation-delay:.40s; }

@media (prefers-reduced-motion:reduce){
  .gb-cs .gb-rise{ animation:none !important; opacity:1 !important; transform:none !important; }
  .gb-cs__glow, .gb-cs__mark{ animation:none !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:760px){
  .gb-cs__header{ padding:22px 20px; }
  .gb-cs__main{ padding:24px 18px 44px; }
  .gb-cs__footer{
    padding:20px; flex-direction:column; gap:14px;
    justify-content:center; text-align:center;
  }
  .gb-cs__cta .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---- Site chrome offset (added) ------------------------------------------
   The global coded nav (chrome/) now overlays this view. Pull the 100vh
   takeover up under the transparent 78px header so its blueprint background
   fills behind the nav, exactly like the site's hero sections. --gb-header-h
   is set to 78px globally by chrome.css. The takeover keeps its own slim
   footer; the full site footer is intentionally not rendered here.
   -------------------------------------------------------------------------- */
body.gb-coming-soon-tpl #content,
body.gb-coming-soon-tpl .site-content{ padding-top:0 !important; margin-top:0 !important; }
body.gb-coming-soon-tpl .gb-cs{
  margin-top: calc(-1 * var(--gb-header-h, 78px)) !important;
  padding-top: calc(var(--gb-header-h, 78px) + 72px) !important;
}