/* Genetic Energetics — Site v1 design system.  Self-contained, zero external requests. */
:root{
  --ink:#0b0a1a; --ink2:#14122e; --panel:#191636; --panel2:#211d45;
  --gold:#c9a96e; --gold-l:#e8c98a; --gold-d:#a8894f;
  --cream:#f4efe4; --paper:#faf7ef; --warm:#4a4038; --warm2:#6b5f52;
  --txt:#eae6f4; --mut:#a9a3c4; --line:rgba(201,169,110,.22);
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--txt);background:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.4rem}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0}
.serif{font-family:var(--serif)} .italic{font-style:italic}
.kicker{font-family:var(--sans);letter-spacing:.26em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin:0 0 .8rem}
.center{text-align:center}
.placeholder{display:inline-block;background:rgba(201,169,110,.12);border:1px dashed var(--gold-d);border-radius:6px;
  color:var(--gold-l);padding:.15em .5em;font-family:var(--sans);font-size:.82em;font-style:normal}

/* ---------- header / nav / mega-menu ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,10,26,.86);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.topbar .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.4rem;max-width:1280px;margin:0 auto}
.brand{font-family:var(--serif);font-size:1.28rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);letter-spacing:.22em;font-size:.52rem;color:var(--gold);margin-top:2px}
.nav{display:flex;align-items:center;gap:1.05rem;flex-wrap:nowrap}
.nav a.link{color:rgba(255,255,255,.84);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:.4rem 0;position:relative;white-space:nowrap}
.nav a.link.link-library{color:var(--gold-l);font-size:.95rem}
.nav a.link:hover{color:var(--gold-l)}
.nav .cta-quiz{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1a1408;padding:.55rem 1.1rem;border-radius:6px;
  font-weight:600;letter-spacing:.04em;text-transform:none;font-size:.86rem;box-shadow:0 12px 30px -14px rgba(201,169,110,.8)}
.nav .cta-quiz:hover{filter:brightness(1.06);color:#1a1408}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(640px,92vw);background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);
  border-radius:14px;padding:1.3rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:.18s ease;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega h5{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.mega a{display:block;color:rgba(238,236,246,.82);font-size:.83rem;padding:.24rem 0}
.mega a:hover{color:var(--gold-l)}
.navtoggle{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:6px;padding:.4rem .6rem;font-size:1.1rem;cursor:pointer}
/* simple single-column dropdown (About) */
.has-dd{position:relative}
/* transparent bridge across the gap between the tab and its panel, so moving
   the mouse down to click an item doesn't lose :hover and close the menu */
.mega::before,.dd::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.dd{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:236px;
  background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:12px;padding:.6rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:.18s ease;z-index:60}
.has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;color:rgba(238,236,246,.85);font-size:.85rem;padding:.42rem .6rem;border-radius:6px}
.dd a:hover{color:var(--gold-l);background:rgba(201,169,110,.08)}
/* Menu items with nothing behind them yet - visible, plainly not clickable. */
.dd .dd-off{display:block;color:rgba(238,236,246,.32);font-size:.85rem;padding:.42rem .6rem;cursor:default}
.dd a.dd-cog{display:flex;align-items:center;gap:.45rem}
.dd a.dd-cog svg{flex:none;opacity:.85}
.dd .dd-head{color:#fff;font-family:var(--serif);font-size:1.05rem;padding:.3rem .6rem .1rem}
.dd .dd-sub{color:var(--mut);font-size:.75rem;padding:0 .6rem .5rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.nav .cta-2{color:var(--gold-l);border:1px solid var(--gold-d);padding:.48rem 1rem;border-radius:6px;font-size:.84rem;text-transform:none;letter-spacing:.02em}
.nav .cta-2:hover{background:rgba(201,169,110,.1);color:var(--gold-l)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:.95rem 2rem;border-radius:7px;font-family:var(--sans);font-weight:600;font-size:1.02rem;
  letter-spacing:.02em;cursor:pointer;border:none;transition:.15s}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1a1408;box-shadow:0 18px 45px -18px rgba(201,169,110,.7)}
.btn-gold:hover{filter:brightness(1.06);color:#1a1408}
.btn-ghost{background:transparent;color:var(--gold-l);border:1px solid var(--gold-d)}
.btn-ghost:hover{background:rgba(201,169,110,.1)}
.btn-lg{padding:1.1rem 2.4rem;font-size:1.1rem}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:90vh;
  /* Tall enough that ALL the wording fits and stays centred with breathing room.
     (The earlier aspect-ratio banner was SHORTER than the text, which squeezed &
     clipped it top and bottom — Larry 2026-07-21.) The hero also grows if the
     wording is taller than 90vh, so nothing is ever cut off. cover fills the
     banner, showing the figures full-height with only a sliver trimmed at the
     sides. Translucent left wash (never solid) keeps the wording readable. */
  background-color:#080714;
  background-image:
    linear-gradient(90deg,rgba(10,8,24,.78) 0%,rgba(10,8,24,.42) 30%,rgba(10,8,24,0) 60%),
    url("hero-bodies-1280.jpg");
  background-repeat:no-repeat;
  background-size:cover;background-position:center}
/* Hero content shares the header's 1280px container, so the wording's left
   margin lines up directly under the GENETIC ENERGETICS logo at every width.
   Width is capped (<=46vw) so its right edge never runs onto the man/swirl.
   (Larry 2026-07-21 — replaces the fragile fixed-inch shift.) */
/* width:100% is essential — as a flex child the wrap would otherwise shrink to
   the text width and center itself (landing under "THE MOVEMENT"). Full width +
   max-width:1280 + the base margin:0 auto makes its left edge sit under the logo,
   and the left-aligned .col puts the wording directly beneath it. */
.hero .wrap{width:100%;max-width:1280px}
.hero .col{max-width:min(40rem,46vw)}
.hero .quiz-hook{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gold-l);
  font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.35;margin:0 0 1rem;max-width:34rem;
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hero .hero-quiz-btn{margin:0 0 1.7rem}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;letter-spacing:.005em;margin:.3rem 0 1rem}
.hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--gold-l);margin:0 0 1.5rem}
.hero p.body{font-size:1.08rem;color:rgba(238,236,246,.9);max-width:min(40rem,46vw);margin:1rem 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;align-items:center}
.hero .fine{margin-top:1.3rem;font-style:normal;font-weight:800;color:#fff;font-size:1.18rem;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ---------- sections ---------- */
.section{padding:5rem 0}
.section.tight{padding:3.4rem 0}
.bg-dark{background:var(--ink)} .bg-ink2{background:var(--ink2)}
.bg-cream{background:var(--cream);color:var(--warm)}
.bg-cream h1,.bg-cream h2,.bg-cream h3{color:#241f16}
.bg-cream .kicker{color:var(--gold-d)}
.band{position:relative;overflow:hidden;background:var(--ink)}
.band .swirl{position:absolute;inset:0;background:url("swirl.jpg") center/cover;opacity:.26}
.band .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,22,.72),rgba(9,8,22,.9))}
.band .inner{position:relative}
.sec-head{max-width:44rem;margin:0 auto 2.4rem}
.sec-head.center{text-align:center}
h2.big{font-size:clamp(1.9rem,4.4vw,3rem)}
.lead{font-size:1.14rem;color:var(--mut)}
.bg-cream .lead{color:var(--warm2)}

/* ---------- quiz feature ---------- */
.quizband{background:linear-gradient(135deg,#1a1640,#2a2158);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quizband h2{font-size:clamp(2rem,5vw,3.2rem);color:#fff;margin:0 0 .4rem}
.quizband .q{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--gold-l);margin:0 auto 1.6rem;max-width:32ch}

/* ---------- dimension grid ---------- */
.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1rem;margin-top:2rem}
.dim{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.dim .k{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .3rem}
.dim h4{font-size:1.35rem;color:var(--gold-l);margin:0 0 .35rem}
.dim p{color:var(--mut);font-size:.92rem;margin:0}

/* ---------- family cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.1rem;margin-top:2rem}
.fcard{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:1.4rem}
.fcard h3{font-size:1.45rem;color:var(--gold-l);margin:0 0 .3rem}
.fcard .tag{font-family:var(--serif);font-style:italic;color:var(--mut);font-size:1rem;margin:0 0 .7rem}
.fcard ul{margin:0;padding-left:1.1rem;color:rgba(238,236,246,.8);font-size:.92rem}
.fcard li{margin:.2rem 0}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem;margin-top:2rem}
.quote{background:var(--paper);color:var(--warm);border-radius:12px;padding:1.5rem;border:1px solid #e7ddc6}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:#3a332a;margin:0 0 .8rem;line-height:1.5}
.quote .who{font-size:.86rem;color:var(--gold-d);font-weight:600;letter-spacing:.02em}
.stars{color:var(--gold-d);letter-spacing:2px;margin-bottom:.5rem}

/* ---------- forms ---------- */
.formcard{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:16px;padding:2rem;max-width:640px;margin:0 auto}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;
  color:#fff;padding:.8rem .9rem;font-family:var(--sans);font-size:1rem}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
/* keep browser autofill from turning inputs white */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 40px #191636 inset;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.radio-row{display:flex;flex-wrap:wrap;gap:.8rem}
.radio-row label{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:8px;padding:.7rem 1rem;text-transform:none;letter-spacing:0;color:var(--txt);font-size:.95rem;cursor:pointer}

/* ---------- footer ---------- */
.site-footer{background:#060512;border-top:1px solid var(--line);padding:3.2rem 0 2.4rem;color:var(--mut);font-size:.9rem}
/* Larry, 2026-09-21: a fourth column (Legal & Privacy), "and the 4 columns can
   be closer together". The brand block narrows from 1.4fr to 1.15fr and the gap
   from 1.6rem to 1.05rem, which makes room for the fourth without the links
   wrapping. */
/* Larry, 2026-09-21: "the first column butted up far too close to
   GeneticEnergetics.com, and more space in between the other columns than you
   need. Bring the four columns closer together. Free up at least a half inch
   between GeneticEnergetics.com and the four columns."

   One gap cannot do both jobs, so they are separated:
     column-gap .55rem  - between the four link columns, tight
     padding-right .6in - on the brand block only, which puts .6in + .55rem
                          between it and the first column. He asked for at
                          least half an inch; this is a little over. */
.site-footer .cols{display:grid;grid-template-columns:1.05fr repeat(4,minmax(0,1fr));
  column-gap:.55rem;row-gap:1.4rem;margin-bottom:1.6rem}
.site-footer .cols > :first-child{padding-right:.6in}

/* Social links, from the example Larry sent: outlined circles with the platform
   mark inside, sitting under the columns. */
.site-footer .social{border-top:1px solid var(--line);padding-top:1.3rem;margin-bottom:.4rem}
.site-footer .social h6{margin-bottom:.7rem}
.site-footer .social-row{display:flex;gap:.7rem;flex-wrap:wrap}
.site-footer .soc{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;padding:0;border:1px solid rgba(238,236,246,.28);
  border-radius:50%;color:rgba(238,236,246,.82);transition:.15s}
.site-footer .soc svg{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.site-footer .soc:hover{border-color:var(--gold);color:var(--gold-l);background:rgba(201,169,110,.08)}
/* No address supplied yet: dimmed, and it does nothing rather than going
   somewhere invented. */
.site-footer .soc-off{opacity:.34;cursor:default}
.site-footer .soc-off:hover{border-color:rgba(238,236,246,.28);color:rgba(238,236,246,.82);background:none}
.site-footer h6{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.site-footer a{display:block;color:rgba(238,236,246,.72);padding:.22rem 0;font-size:.9rem}
.site-footer a:hover{color:var(--gold-l)}
.site-footer .movement{font-family:var(--serif);font-style:italic;color:var(--gold-l);font-size:1.15rem;margin:.2rem 0 .6rem}
.site-footer .legal{border-top:1px solid var(--line);padding-top:1.4rem;text-align:center;font-size:.8rem;color:#6f688a}

/* ---------- misc ---------- */
.divider{width:64px;height:2px;background:var(--gold);margin:1.5rem 0}
.center .divider{margin:1.5rem auto}
.note-flag{background:rgba(201,169,110,.08);border:1px dashed var(--gold-d);border-radius:10px;padding:1rem 1.2rem;color:var(--gold-l);font-size:.92rem;margin:1.4rem 0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:.2rem;
    background:var(--ink2);border-bottom:1px solid var(--line);padding:1rem 1.4rem;display:none;
    max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav.open{display:flex}
  .nav a.link{width:100%;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .navtoggle{display:block}
  /* Mega + regular dropdowns both flow inline (static) and single-column so nothing
     is cut off, and the Sign in / Sign out (Account) menu is reachable. */
  .has-mega .mega{position:static;transform:none;left:auto;right:auto;width:100%;grid-template-columns:1fr;
    opacity:1;visibility:visible;box-shadow:none;margin-top:.5rem;padding-left:.6rem;display:none}
  .has-mega.open .mega{display:grid;transform:none;left:auto}
  .has-dd .dd{position:static;transform:none;left:auto;right:auto;width:100%;min-width:0;
    opacity:1;visibility:visible;box-shadow:none;margin:.15rem 0 .5rem;padding-left:.6rem;display:none}
  .has-dd.open .dd{display:block;transform:none;left:auto}
  .mega::before,.dd::before{display:none}
  /* The half-inch gutter belongs to the wide layout only. Once the footer
     stacks there is nothing to its right to be separated from, and the
     padding would just push the brand block off-centre. This also covers
     the 560px single-column case, which is narrower than 900. */
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .site-footer .cols > :first-child{padding-right:0}
  /* Phones: the hero STACKS so nothing is ever cropped — the full image shows
     as a band on top (its own aspect ratio, so both figures are fully visible),
     with the wording below it on the dark background. */
  .hero{display:block;min-height:0;aspect-ratio:auto;background:#080714;align-items:stretch}
  .hero::before{content:"";display:block;width:100%;aspect-ratio:1280 / 673;
    background:url("hero-bodies-1280.jpg") center/cover}
  .hero .wrap{max-width:none;padding-top:2rem;padding-bottom:2.6rem}
  .hero .col{max-width:none;margin:0}
}
@media(max-width:560px){ .site-footer .cols{grid-template-columns:1fr} }

/* ---------- cookie consent (Larry, 2026-09-21) ----------
   Modelled on the sample he sent: a centred card with the notice and two
   buttons. Built in GE's own palette rather than the sample's purple, because
   it is GE's site - say the word and it becomes purple in one line.
   Sits above everything and does not move the page underneath it. */
.ge-cookie{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:1.2rem;background:rgba(6,5,18,.55);
  opacity:0;transition:opacity .18s ease}
.ge-cookie.is-in{opacity:1}
.ge-cookie__box{max-width:44rem;background:linear-gradient(180deg,var(--panel),var(--ink2));
  border:1px solid var(--gold-d);border-radius:16px;padding:1.7rem 1.9rem;
  box-shadow:0 40px 90px -40px #000;text-align:center}
.ge-cookie__text{color:rgba(238,236,246,.92);font-size:1rem;line-height:1.65;margin:0 0 1.3rem}
.ge-cookie__text a{color:var(--gold-l);text-decoration:underline}
.ge-cookie__btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.ge-cookie__accept,.ge-cookie__decline{font-family:var(--sans);font-size:1rem;font-weight:600;
  padding:.72rem 1.9rem;border-radius:8px;cursor:pointer;border:1px solid transparent}
.ge-cookie__accept{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#1a1408}
.ge-cookie__accept:hover{filter:brightness(1.06)}
.ge-cookie__decline{background:transparent;color:var(--gold-l);border-color:var(--gold-d)}
.ge-cookie__decline:hover{background:rgba(201,169,110,.1)}
@media(max-width:560px){
  .ge-cookie__box{padding:1.3rem 1.2rem}
  .ge-cookie__btns{flex-direction:column}
  .ge-cookie__accept,.ge-cookie__decline{width:100%}
}