/* ============================================================
   EDforED LLC — core stylesheet
   Two typefaces only:
     Bricolage Grotesque — display / headings
     Instrument Sans     — everything else, incl. small caps labels
   Surfaces are flat. Colour comes from the reactive background,
   not from decorative gradients.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  --ink:        #0B1B3D;
  --ink-2:      #16294F;
  --body-c:     #4A5C80;
  --muted:      #7285A8;

  --blue:       #4E6FF5;
  --blue-deep:  #2B4AD8;
  --blue-lift:  #7C9AF7;
  --blue-pale:  #C9D8FC;

  --wash:       #E7EEFD;
  --wash-2:     #F2F6FE;
  --paper:      #FFFFFF;
  --shell:      #F5F8FE;
  --line:       rgba(43,74,216,.16);
  --line-soft:  rgba(43,74,216,.09);

  /* themeable — programs override these live */
  --t-bg:       #F5F8FE;
  --t-bg-2:     #EBF1FD;
  --t-accent:   #2B4AD8;
  --t-accent-2: #7C9AF7;
  --t-ink:      #0B1B3D;

  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --nav-h: 74px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--shell);
  /* clip, not hidden: hidden here would propagate to the viewport and break
     every position:sticky section on the site */
  overflow-x:clip;
}
body{
  margin:0; background:var(--shell); color:var(--body-c);
  font-family:var(--body); font-size:17px; line-height:1.6;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:800; color:var(--ink);
  line-height:.98; letter-spacing:-.035em; margin:0;
  font-variation-settings:"wdth" 100, "opsz" 24;
}
p{ margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* small-caps label — replaces the old monospace utility face */
.eyebrow{
  font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--t-accent); display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:24px; height:1.5px; background:currentColor; opacity:.5; flex:none; }
.label{
  font-family:var(--body); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.lede{ font-size:clamp(1rem,1.3vw,1.12rem); color:var(--body-c); line-height:1.62; }

/* ---------- 2. reactive background ---------- */
/* a canvas of soft blobs that follow the pointer and leave a short trail */
/* Two layers. LO multiplies under the chrome so it tints the white page;
   HI screens over everything — invisible on white, but it lights up the navy
   top bar and footer, which multiply alone could never do. */
#bgfx{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  mix-blend-mode:multiply;
}
#bgfx-hi{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  mix-blend-mode:screen;
}
body > main{ position:relative; z-index:1; }
body > .foot, body > #foot-slot{ position:relative; z-index:4; }
@media (hover:none){ #bgfx, #bgfx-hi{ display:none; } }

[data-lift]{ transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
[data-lift]:hover{ transform:translateY(-4px); }

/* ---------- 3. top bar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; color:var(--ink);
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, color .4s;
  border-bottom:1px solid transparent;
}
.topbar.stuck{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.topbar.on-dark{ color:#fff; }
.topbar.on-dark.stuck{ background:rgba(11,27,61,.76); border-bottom-color:rgba(255,255,255,.12); }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand{ display:flex; align-items:center; gap:.66rem; }
.brand img{ width:34px; height:34px; object-fit:contain; }
.brand b{ font-family:var(--display); font-weight:800; font-size:1.06rem; letter-spacing:-.03em; color:inherit; }
.brand span{
  font-size:.6rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; opacity:.55; display:block; margin-top:1px;
}

.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a{
  position:relative; padding:.6rem .95rem; border-radius:99px;
  font-size:.92rem; font-weight:500; letter-spacing:-.01em;
  opacity:.82; transition:opacity .3s, background .3s;
}
.nav a:hover, .nav a[aria-current]{ opacity:1; }
.nav a[aria-current]::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.36rem;
  height:1.5px; background:var(--t-accent); border-radius:2px;
}
.nav .cta{
  margin-left:.5rem; opacity:1; padding:.62rem 1.3rem;
  background:var(--t-accent); color:#fff; font-weight:600;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), background .35s, filter .3s;
}
.nav .cta:hover{
  transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:0 10px 30px -10px color-mix(in srgb, var(--t-accent) 80%, transparent);
}

.has-drop{ position:relative; }
.drop{
  position:absolute; top:calc(100% + 8px); right:-16px; min-width:210px;
  background:#fff; border:1px solid var(--line-soft); border-radius:16px;
  padding:.45rem; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity .26s var(--ease), transform .3s var(--ease-out), visibility .26s;
  box-shadow:0 26px 60px -26px rgba(11,27,61,.4);
}
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
.drop a{
  display:flex; align-items:center; gap:.65rem; padding:.62rem .8rem;
  border-radius:10px; opacity:.9; font-size:.93rem; width:100%; color:var(--ink);
}
.drop a:hover{ background:var(--wash); opacity:1; color:var(--blue-deep); }
.drop a i{
  font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.08em;
  color:var(--blue); width:1.6em; flex:none;
}

.burger{
  display:none; width:42px; height:42px; border-radius:10px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:19px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:880px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; padding:1rem var(--gut) 1.6rem; gap:.1rem; color:var(--ink);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 26px 50px -30px rgba(11,27,61,.4);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:.32s var(--ease); max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
  }
  .nav.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav a{ padding:.85rem .2rem; font-size:1.05rem; }
  .nav a[aria-current]::after{ left:.2rem; right:auto; width:22px; }
  .nav .cta{ margin:.7rem 0 0; justify-content:center; display:flex; }
  /* inherit, never visible: declaring visible here overrode the closed menu's
     hidden and left these links catching taps over the page content */
  .drop{ position:static; opacity:1; visibility:inherit; transform:none;
         background:transparent; border:0; box-shadow:none; padding:.1rem 0 .3rem .9rem; min-width:0; }
  .drop a{ padding:.6rem .2rem; font-size:.95rem; }
}

/* ---------- 4. buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.92rem 1.6rem;
  border-radius:99px; font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  background:var(--t-accent); color:#fff; border:1px solid transparent;
  transition:transform .4s var(--ease-out), box-shadow .5s var(--ease), filter .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 16px 36px -14px color-mix(in srgb,var(--t-accent) 85%, transparent); }
.btn svg{ transition:transform .4s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }
.btn.ghost{
  background:transparent; color:var(--t-accent);
  border-color:color-mix(in srgb, var(--t-accent) 34%, transparent);
}
.btn.ghost:hover{ background:color-mix(in srgb, var(--t-accent) 8%, transparent); box-shadow:none; }

/* ---------- 5. reveal ---------- */
[data-rise]{ opacity:0; transform:translateY(22px); }
[data-rise].in{ opacity:1; transform:none;
  transition:opacity .8s var(--ease) var(--d,0s), transform .95s var(--ease-out) var(--d,0s); }

/* ---------- 6. section shells ---------- */
.sec{ position:relative; padding:clamp(4rem,8vw,7rem) 0; }
.sec-head{ max-width:62ch; margin-bottom:3rem; }
.sec-head h2{ font-size:clamp(1.65rem,3.2vw,2.5rem); margin:1.1rem 0 0; }
.sec-head p{ margin-top:1.2rem; }

/* ---------- 7. footer ---------- */
.foot{ position:relative; z-index:5; background:var(--ink); color:#fff; padding:4.2rem 0 0; }
.foot h5{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-lift); margin:0 0 1.1rem; font-weight:600; font-family:var(--body);
}
.foot-grid{ display:grid; grid-template-columns:1.5fr .8fr .8fr 1fr; gap:2.6rem; padding-bottom:3rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot ul a{ font-size:.92rem; opacity:.72; transition:opacity .25s, transform .35s var(--ease-out); display:inline-block; }
.foot ul a:hover{ opacity:1; transform:translateX(3px); }
.foot-brand b{ font-family:var(--display); font-size:1.5rem; letter-spacing:-.035em; display:block; color:#fff; }
.foot-brand p{ margin-top:.9rem; max-width:34ch; font-size:.92rem; opacity:.66; line-height:1.6; }
.foot-social{ display:flex; gap:.55rem; margin-top:1.4rem; }
.foot-social a{
  width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); opacity:.8; transition:.35s var(--ease);
}
.foot-social a:hover{ opacity:1; border-color:var(--blue-lift); background:rgba(124,154,247,.18); transform:translateY(-3px); }
.foot-bar{
  border-top:1px solid rgba(255,255,255,.12); padding:1.4rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; opacity:.6;
}
.admin-link{
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem;
  border:1px solid rgba(255,255,255,.18); border-radius:99px;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  opacity:.7; transition:.3s var(--ease);
}
.admin-link:hover{ opacity:1; border-color:var(--blue-lift); color:var(--blue-lift); }
.foot-links{ display:flex; align-items:center; gap:1.2rem; }
.foot-privacy{ opacity:.7; transition:.3s var(--ease); }
.foot-privacy:hover{ opacity:1; color:var(--blue-lift); }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:2.2rem; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } .foot-bar{ justify-content:flex-start; } .foot-links{ gap:1rem; } }

/* ---------- 8. accessibility ---------- */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:3px; border-radius:4px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200; padding:.8rem 1.2rem;
  background:var(--blue); color:#fff; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-rise]{ opacity:1 !important; transform:none !important; }
  #bgfx, #bgfx-hi{ display:none; }
}

/* ---------- 9. announcement popup ---------- */
.promo{
  position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:1.2rem;
  opacity:0; transition:opacity .34s var(--ease);
}
.promo.in{ opacity:1; }
.promo-scrim{ position:absolute; inset:0; background:rgba(11,27,61,.44); backdrop-filter:blur(7px); }
.promo-card{
  --pbg:#FFFFFF; --pac:#4E6FF5;
  position:relative; width:min(460px,100%); border-radius:24px; padding:0 0 2.2rem;
  background:var(--pbg); border:1px solid var(--line-soft);
  box-shadow:0 60px 110px -50px rgba(11,27,61,.62);
  transform:translateY(16px) scale(.97); overflow:hidden;
  transition:transform .44s var(--ease-out);
  max-height:calc(100dvh - 2.4rem); overflow-y:auto;
}
.promo.in .promo-card{ transform:none; }

.promo-shot{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  background:color-mix(in srgb, var(--pac) 12%, transparent);
}

/* text mode: image (if any) sits above a padded content block */
.promo-body-wrap{ padding:2rem 2.2rem 0; }
.promo-card:has(.promo-shot) .promo-body-wrap{ padding-top:1.7rem; }
.promo-card:not(:has(.promo-shot)) .promo-body-wrap{ padding-top:2.4rem; }
.promo-card h2{ font-size:clamp(1.5rem,3.4vw,2.05rem); color:var(--ink); }
.promo-card .eyebrow{ color:var(--pac); }
.promo-body{ margin-top:1.1rem; font-size:1rem; line-height:1.62; color:var(--body-c); }
.promo-go{ margin-top:1.8rem; background:var(--pac); box-shadow:0 16px 36px -14px color-mix(in srgb, var(--pac) 85%, transparent); }
.promo-go:hover{ filter:brightness(1.06); }

/* light: for a dark background, everything above flips to readable-on-dark */
.promo-card.light{ --pbg:#0B1B3D; }
.promo-card.light h2, .promo-card.light .promo-body-wrap{ color:#fff; }
.promo-card.light .promo-body{ color:rgba(255,255,255,.78); }
.promo-card.light .promo-x{ color:rgba(255,255,255,.6); }
.promo-card.light .promo-x:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* image-only mode: the upload IS the popup, button pinned below it */
.promo-foot{ padding:1.6rem 2.2rem 0; }
.promo-foot .promo-go{ margin-top:0; width:100%; text-align:center; justify-content:center; }

.promo-x{
  position:absolute; top:.9rem; right:1rem; z-index:3; width:34px; height:34px; border-radius:50%;
  font-size:1.4rem; line-height:1; display:grid; place-items:center; color:var(--muted);
  background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  transition:.3s var(--ease);
}
.promo-x:hover{ background:var(--wash); color:var(--ink); }

@media (max-width:560px){
  .promo-body-wrap{ padding-left:1.5rem; padding-right:1.5rem; }
  .promo-foot{ padding-left:1.5rem; padding-right:1.5rem; }
  .promo-card{ border-radius:20px; }
}

/* ============================================================
   10. Page transition — the mark draws, solidifies, then the
   circle it leaves grows outward from wherever it sits until
   it has swallowed the screen.
   ============================================================ */
@property --r{ syntax:'<length>'; inherits:false; initial-value:0px; }

.ldr{
  position:fixed; inset:0; z-index:400;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  --r:0px; --cx:50%; --cy:50%;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy),
                       transparent 0, transparent calc(var(--r) - 2px), #000 var(--r));
          mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy),
                       transparent 0, transparent calc(var(--r) - 2px), #000 var(--r));
  transition:--r .66s cubic-bezier(.4,0,.2,1), opacity .66s cubic-bezier(.4,0,.2,1);
}
.ldr.quick{ transition-duration:.5s; }
.ldr.open{ --r:var(--r1); }

.ldr-mark{ display:block; overflow:visible; }
.ldr-mark path{
  fill:var(--blue); fill-opacity:0; fill-rule:nonzero;
  stroke:var(--blue-deep); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2150; stroke-dashoffset:2150;
  transition:stroke-dashoffset .72s cubic-bezier(.65,0,.35,1), fill-opacity .3s ease;
}
.ldr.draw .ldr-mark path{ stroke-dashoffset:0; }
.ldr.solid .ldr-mark path{ fill-opacity:1; }
.ldr.quick .ldr-mark path{ transition-duration:1ms; }

.ldr-word{
  font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-deep); opacity:0; transform:translateY(8px); margin:0;
  transition:opacity .32s ease, transform .32s ease;
}
.ldr.solid .ldr-word{ opacity:1; transform:none; }
.ldr.quick .ldr-word{ transition-duration:1ms; }

/* small progress line — appears with the wordmark, swaps to a completion
   note right as the wipe kicks in, so it never feels stuck on one phrase */
.ldr-hint{
  margin:.3rem 0 0; font-size:.68rem; font-weight:500; letter-spacing:.02em;
  color:color-mix(in srgb, var(--blue-deep) 55%, transparent);
  opacity:0; transition:opacity .32s ease;
}
.ldr.solid .ldr-hint{ opacity:1; }
.ldr.open .ldr-hint{ opacity:0; transition:opacity .18s ease; }
.ldr.quick .ldr-hint{ transition-duration:1ms; }

/* the outgoing version: appended fresh on an internal link click,
   closes toward the exact point that was clicked */
.ldr-exit{ --r:var(--r1); transition-duration:.4s; }
.ldr-exit .ldr-mark path{ stroke-dashoffset:0; fill-opacity:1; transition:none; }
.ldr-exit .ldr-word{ opacity:1; transform:none; transition:none; }
.ldr-exit .ldr-hint{ opacity:1; transition:none; }
.ldr-exit.closing{ --r:0px; }

.ldr.reduced{ --r:0; transition:opacity .22s linear; opacity:0; }
.ldr.reduced .ldr-mark path{ transition:none; stroke-dashoffset:0; fill-opacity:1; }
.ldr.reduced .ldr-word{ transition:none; opacity:1; transform:none; }
.ldr.reduced .ldr-hint{ transition:none; opacity:1; }

@media (max-width:560px){
  .ldr-mark{ width:68px; height:49px; }
}

/* ---------- 11. privacy / legal pages ---------- */
.legal{ padding:calc(var(--nav-h) + 4rem) 0 6rem; min-height:70vh; }
.legal-wrap{ max-width:640px; }
.legal h1{ margin-top:.9rem; font-size:clamp(2rem,4vw,2.7rem); }
.legal-body{ margin-top:2.2rem; }
.legal-body p{ font-size:.98rem; line-height:1.72; color:var(--body-c); margin-bottom:1.1rem; }
.legal-body h2{ font-size:1.15rem; margin:2.1rem 0 .8rem; color:var(--ink); }
.legal-body a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:560px){
  .legal{ padding-top:calc(var(--nav-h) + 2.4rem); }
}