/* ============================================================
   BEYOND CONDITION — shared brand system
   Navy / mid-blue / grey, off the logo. Type-led, StoryBrand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Brand core (from the logo) */
  --navy:        #18324f;   /* BEYOND wordmark */
  --navy-deep:   #122740;   /* darker sections */
  --navy-900:    #0d1d31;
  --blue:        #2f78ad;   /* CONDITION / cube highlight */
  --blue-bright: #4a97cf;
  --blue-pale:   #cfe1ee;
  --steel:       #6b7886;   /* grey cube / tagline */
  --steel-light: #9aa6b2;

  /* Neutrals — cool off-white, low chroma */
  --paper:       #f6f8fa;
  --paper-warm:  #eef2f6;
  --card:        #ffffff;
  --ink:         #15212e;
  --ink-soft:    #3f4d5a;
  --ink-faint:   #6c7884;
  --line:        #dde4ea;
  --line-soft:   #e8edf1;

  /* One accent — used sparingly for "act now" energy */
  --signal:      #d9772f;   /* warm amber, shares the steel's restraint */
  --signal-soft: #f4e0cd;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(18,39,64,.06), 0 2px 8px rgba(18,39,64,.05);
  --shadow-md: 0 6px 24px rgba(18,39,64,.09), 0 2px 6px rgba(18,39,64,.06);
  --shadow-lg: 0 24px 60px rgba(18,39,64,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Schibsted Grotesk', system-ui, sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0; color:var(--navy); text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); letter-spacing:-.035em; }
h2{ font-size:clamp(2rem, 4vw, 3.1rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.3rem, 2vw, 1.65rem); }
p{ margin:0 0 1em; text-wrap:pretty; }
strong{ font-weight:600; color:var(--ink); }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--blue); opacity:.5;
}
.eyebrow.no-rule::before{ display:none; }
.lede{ font-size:clamp(1.12rem,1.5vw,1.32rem); color:var(--ink-soft); line-height:1.5; font-weight:400; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(60px, 9vw, 130px); }
.section--tight{ padding-block:clamp(44px,6vw,76px); }
.eden{ background:var(--navy-deep); color:#dfe7ef; }
.eden h1,.eden h2,.eden h3{ color:#fff; }
.eden .lede{ color:#b9c6d4; }
.paper-warm{ background:var(--paper-warm); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  font-family:inherit; font-size:.98rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:100px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--signal{ --bg:var(--signal); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--navy); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--navy); background:#fff; }
.btn--light{ --bg:#fff; --fg:var(--navy); }
.btn--on-dark{ --bg:#fff; --fg:var(--navy-deep); }
.btn--on-dark.btn--ghost{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.28); }
.btn--lg{ padding:1.02em 1.8em; font-size:1.05rem; }

.txtlink{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600; color:var(--blue);
  border-bottom:1px solid transparent; transition:border-color .2s, gap .2s;
}
.txtlink:hover{ border-color:var(--blue); gap:.7em; }

/* ---------- Site nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(246,248,250,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{ display:flex; align-items:center; gap:24px; height:120px; }
.nav__spacer{ flex:1; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-size:.96rem; font-weight:500; color:var(--ink-soft); transition:color .18s; white-space:nowrap; }
.nav__links a:hover{ color:var(--navy); }
.nav__arm{
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); padding:5px 10px; border:1px solid var(--line); border-radius:6px;
}
.nav.eden{ background:rgba(18,39,64,.8); border-color:rgba(255,255,255,.08); }
.nav.eden .nav__links a{ color:#aebccb; }
.nav.eden .nav__links a:hover{ color:#fff; }
@media(max-width:860px){ .nav__links{ display:none; } }

/* ---------- Logo mark ---------- */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo svg{ width:34px; height:34px; display:block; }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-weight:800; letter-spacing:-.01em; font-size:1.04rem; color:var(--navy); white-space:nowrap; }
.logo__name b{ color:var(--blue); font-weight:800; }
.logo__sub{
  font-family:'IBM Plex Mono',monospace; font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-top:3px;
}
.eden .logo__name{ color:#fff; } .eden .logo__name b{ color:var(--blue-bright); }
.eden .logo__sub{ color:var(--steel-light); }

/* ---------- Cards / chips / pills ---------- */
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  padding:5px 10px; border:1px solid var(--line); border-radius:100px; background:#fff;
}
.proofbar{ display:flex; flex-wrap:wrap; gap:14px 38px; align-items:center; }
.proof{ display:flex; flex-direction:column; gap:2px; }
.proof b{ font-size:1.5rem; font-weight:700; color:var(--navy); letter-spacing:-.02em; }
.eden .proof b{ color:#fff; }
.proof span{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.eden .proof span{ color:var(--steel-light); }

/* placeholder image slot */
.slot{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, #e9eef3 0 11px, #eef3f7 11px 22px);
  border:1px solid var(--line);
  display:grid; place-items:center; color:var(--steel); min-height:200px;
}
.slot__tag{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; padding:7px 12px; background:rgba(255,255,255,.85);
  border:1px solid var(--line); border-radius:7px; color:var(--ink-soft); text-align:center; max-width:80%;
}

/* ---------- Footer ---------- */
.foot{ background:var(--navy-900); color:#9fb0c1; padding-block:64px 38px; }
.foot a{ color:#c4d2df; }
.foot a:hover{ color:#fff; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot h4{ color:#fff; font-size:.82rem; font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.95rem; }
.foot__base{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.82rem; color:#7f93a6; }
@media(max-width:760px){ .foot__grid{ grid-template-columns:1fr 1fr; } }

/* ---------- reveal on scroll ----------
   Content is ALWAYS visible by default — never gate visibility on a
   transition/animation (some preview contexts pause the timeline, which
   would freeze a from-hidden reveal at its hidden start state). The .in
   class only adds a subtle, non-essential lift. */
[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ transition:transform .6s var(--ease); }
}

/* ---------- misc ---------- */
.center{ text-align:center; }
.muted{ color:var(--ink-faint); }
.grid{ display:grid; gap:24px; }
hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.kicker-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:38px; }

/* ---------- Split hero (pick-a-side) ---------- */
.splithero{ position:relative; display:flex; min-height:calc(100vh - 74px); }
.splithero__intro{
  position:absolute; top:clamp(20px,3vw,34px); left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:14px; padding:9px 18px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
.splithero__intro b{ font-weight:600; color:#fff; }
.splithero__intro .dot{ width:5px; height:5px; border-radius:50%; background:var(--blue-bright); }

.half{
  position:relative; overflow:hidden; isolation:isolate; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(34px,4.5vw,72px); color:#fff; text-decoration:none;
  transition:flex .55s var(--ease);
}
.half__bg{ position:absolute; inset:0; z-index:-2; transition:transform .8s var(--ease); }
.half--bc .half__bg{ background:linear-gradient(158deg,var(--navy) 8%, var(--navy-900)); }
.half--pt .half__bg{ background:linear-gradient(158deg,var(--blue) 4%, #195074); }
.half__grid{ position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to top,#000,transparent 78%); }
.half__mark{ position:absolute; right:-40px; top:-30px; width:230px; height:230px; opacity:.5; z-index:-1; transition:transform .8s var(--ease), opacity .5s; }
.half:hover .half__mark{ transform:rotate(8deg) scale(1.06); opacity:.7; }
.half__num{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.16em; color:rgba(255,255,255,.6); margin-bottom:.9em; }
.half h2{ color:#fff; font-size:clamp(2.1rem,3.4vw,3.4rem); margin:0 0 .12em; }
.half__who{ font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:.9em; }
.half--bc .half__who{ color:#7fb4dc; }
.half p{ color:rgba(255,255,255,.82); font-size:1.04rem; max-width:42ch; margin:0 0 22px; }
.half__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.half .tag{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#eaf2f8; }
.half__go{ display:inline-flex; align-items:center; gap:.6em; font-weight:600; font-size:1.05rem; color:#fff;
  padding-bottom:6px; border-bottom:2px solid rgba(255,255,255,.3); transition:gap .25s var(--ease), border-color .25s; width:fit-content; }
.half:hover .half__go{ gap:1em; border-color:#fff; }
.half__seam{ position:absolute; top:0; bottom:0; right:0; width:1px; background:rgba(255,255,255,.16); z-index:2; }
/* expand on hover */
@media(hover:hover) and (min-width:761px){
  .splithero:hover .half{ flex:.82; }
  .splithero .half:hover{ flex:1.36; }
  .splithero:hover .half:not(:hover) .half__bg{ transform:scale(1.04); }
}
@media(max-width:760px){
  .splithero{ flex-direction:column; min-height:0; }
  .half{ min-height:78vh; justify-content:flex-end; }
  .half__seam{ display:none; }
  .splithero__intro{ white-space:normal; text-align:center; max-width:90%; }
}

/* honeypot -- off-screen, not display:none, so lazy bots still "see" it */
.alt-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }