/* Axiom shared design system for all pages.
   Built from the scroll prototype: near-black canvas, Inter + Playfair italic accent,
   green ONLY in the hero canvas and progress bar, hairlines and huge type carry the
   hierarchy. No filled buttons, no card shadows, no backdrop-blur cards. */

:root{
  --void:#080808;
  --absolute:#000000;
  --charcoal:#131213;
  --smoke:#1c1b1c;
  --bone:#fcfcfc;
  --ash:#d4d2d2;
  --pebble:#9a9898;
  --iron:#525252;
  --hair:rgba(255,255,255,0.12);
  --hair-soft:rgba(255,255,255,0.07);
  --accent:#39ff8a;      /* hero canvas + progress bar only */
  --accent-dim:#1c6b3f;
  --text:#fcfcfc;
  --text-dim:#d4d2d2;
  --measure:60ch;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{
  margin:0;padding:0;
  background:var(--void);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow-x:clip;
}
body{font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:rgba(255,255,255,0.16);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.skip{
  position:fixed;left:16px;top:-60px;z-index:60;
  background:var(--void);color:var(--bone);
  border:1px solid var(--iron);border-radius:5px;
  padding:8px 14px;font-size:12px;
  transition:top .2s ease;
}
.skip:focus{top:12px;}

/* ---------- background environment (subpages) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.env .blob{
  position:absolute;width:55vw;height:55vw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(57,255,138,0.22), rgba(57,255,138,0) 68%);
  filter:blur(90px);mix-blend-mode:screen;opacity:0.4;
}
.env .blob.a{top:-16vw;left:-14vw;animation:driftA 46s ease-in-out infinite alternate;}
.env .blob.b{bottom:-20vw;right:-16vw;animation:driftB 58s ease-in-out infinite alternate;}
.env .grain{
  position:absolute;inset:-50%;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes driftA{0%{transform:translate(0,0) scale(1);}100%{transform:translate(7vw,6vw) scale(1.16);}}
@keyframes driftB{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-6vw,-7vw) scale(1.12);}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,44px);
}
.nav.solid{background:rgba(8,8,8,0.78);border-bottom:1px solid var(--hair-soft);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
/* startpage only (nav stays transparent over the canvas until scrolled past the intro):
   a soft top scrim keeps the logo and links legible when a headline scrolls under them */
.nav:not(.solid){background:linear-gradient(180deg,rgba(8,8,8,0.9) 0%,rgba(8,8,8,0.6) 45%,rgba(8,8,8,0.15) 80%,transparent 100%);padding-bottom:26px;}
.nav .wordmark{display:flex;align-items:center;line-height:0;}
.nav .wordmark-img{height:28px;width:auto;display:block;}
.nav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);}
.nav .links a{font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ash);transition:color .25s ease;}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--bone);}
.nav .links a.pill{color:var(--bone);border:1px solid var(--iron);border-radius:5px;padding:8px 15px;}
.nav .links a.pill:hover{border-color:var(--bone);}

/* hamburger */
.navtoggle{
  display:none;width:40px;height:40px;padding:11px 8px;margin-right:-8px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
  -webkit-tap-highlight-color:transparent;
}
.navtoggle span{
  display:block;width:100%;height:1.6px;background:var(--bone);border-radius:2px;transform-origin:center;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* mobile menu panel (slides down from the top) */
.navmenu{
  position:fixed;left:0;right:0;top:0;z-index:39;
  display:flex;flex-direction:column;
  background:var(--void);
  border-bottom:1px solid var(--hair);
  box-shadow:0 24px 40px -20px rgba(0,0,0,0.7);
  padding:74px clamp(20px,7vw,44px) 22px;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s;
}
.navmenu.open{transform:translateY(0);visibility:visible;transition:transform .42s cubic-bezier(.22,.61,.36,1);}
.navmenu a{
  font-size:19px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ash);font-weight:400;
  padding:16px 2px;border-bottom:1px solid var(--hair-soft);
  opacity:0;transform:translateY(-9px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,.61,.36,1),color .2s ease;
}
.navmenu a:last-child{border-bottom:0;}
.navmenu a[aria-current="page"]{color:var(--bone);}
.navmenu.open a{opacity:1;transform:none;}
.navmenu.open a:nth-child(1){transition-delay:.08s;}
.navmenu.open a:nth-child(2){transition-delay:.14s;}
.navmenu.open a:nth-child(3){transition-delay:.20s;}
.navmenu.open a:nth-child(4){transition-delay:.26s;}

@media (max-width:760px){
  .nav .links{display:none;}
  .navtoggle{display:flex;}
  /* drop the live backdrop blur on phones: cheaper to scroll past a solid bar */
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,8,8,0.94);}
  .env .grain{display:none;}
}
@media (min-width:761px){
  .navmenu{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .navmenu,.navmenu.open,.navmenu a,.navtoggle span{transition-duration:.001ms;}
}

#progressbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:45;transition:width .06s linear,opacity .3s ease;}

/* ---------- layout ---------- */
.page{position:relative;z-index:2;}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,6vw,80px);}
.band{padding-block:clamp(72px,13vh,150px);border-top:1px solid var(--hair-soft);}
.band:first-of-type{border-top:none;}

.kicker{
  display:block;font-size:11px;font-weight:400;text-transform:uppercase;
  letter-spacing:0.2em;color:var(--ash);margin-bottom:24px;
}
h1,h2,h3{font-weight:700;text-transform:uppercase;letter-spacing:-0.04em;line-height:1.02;color:var(--bone);margin:0;overflow-wrap:break-word;}
h1{font-size:clamp(40px,7vw,92px);}
h2{font-size:clamp(28px,4.4vw,56px);}
h3{font-size:clamp(18px,2vw,24px);letter-spacing:-0.02em;}
em.serif{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-0.01em;color:var(--bone);
}
p{margin:0 0 18px;max-width:var(--measure);color:var(--text-dim);}
p:last-child{margin-bottom:0;}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--text-dim);}
.hero-band{min-height:62vh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:clamp(130px,22vh,230px) clamp(20px,5vh,54px);}

/* ---------- ghost links / outline buttons ---------- */
.ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--bone);
  padding:6px 0;transition:transform .25s ease;
}
.ghost .arw{transition:transform .25s ease;}
.ghost:hover{transform:translateX(4px);}
.btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--bone);
  border:1px solid var(--iron);border-radius:5px;padding:13px 22px;
  transition:border-color .25s ease,transform .2s ease;
}
.btn-outline:hover{border-color:var(--bone);transform:translateY(-1px);}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;}

/* ---------- two-column split ---------- */
.split{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:start;}
.split.narrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

/* ---------- offer blocks ---------- */
.offer{display:grid;gap:0;margin-top:56px;}
.offer .row{
  display:grid;grid-template-columns:minmax(0,0.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);
  padding:40px 0;border-top:1px solid var(--hair);
}
.offer .row:last-child{border-bottom:1px solid var(--hair);}
.offer .row .idx{font-size:12px;letter-spacing:0.14em;color:var(--pebble);text-transform:uppercase;}
.offer .row h3{margin-bottom:16px;}
.offer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.offer li{position:relative;padding-left:22px;color:var(--text-dim);max-width:52ch;}
.offer li::before{content:"";position:absolute;left:0;top:0.7em;width:12px;height:1px;background:var(--pebble);}

/* ---------- steps ---------- */
.steps{display:grid;gap:0;margin-top:56px;}
.step{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:clamp(16px,4vw,56px);
  padding:38px 0;border-top:1px solid var(--hair);
}
.step:last-child{border-bottom:1px solid var(--hair);}
.step .num{font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--iron);letter-spacing:-0.04em;}
.step h3{margin-bottom:12px;}

/* ---------- quote ---------- */
.quote{max-width:22ch;}
.quote blockquote{
  margin:0;font-size:clamp(22px,3vw,34px);line-height:1.25;color:var(--bone);
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-0.01em;
  max-width:20ch;
}
.quote .sig{margin-top:24px;font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--pebble);}
.list-plain{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.list-plain li{position:relative;padding-left:22px;color:var(--text-dim);}
.list-plain li::before{content:"";position:absolute;left:0;top:0.7em;width:12px;height:1px;background:var(--pebble);}

/* ---------- FAQ ---------- */
.faq{margin-top:48px;max-width:820px;}
.faq details{border-top:1px solid var(--hair);}
.faq details:last-child{border-bottom:1px solid var(--hair);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:clamp(15px,1.6vw,17px);font-weight:500;color:var(--bone);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{font-size:18px;color:var(--pebble);transition:transform .25s ease;flex-shrink:0;}
.faq details[open] summary .pm{transform:rotate(45deg);}
.faq .ans{padding:0 4px 24px;color:var(--text-dim);max-width:68ch;}
/* smooth open/close, enabled by JS. Without JS the details stay open and readable. */
.faq.faq-anim details:not(.expanded) summary .pm{transform:none;}
.faq.faq-anim details.expanded summary .pm{transform:rotate(45deg);}
.faq.faq-anim .ans{overflow:hidden;
  transition:height .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;}
.faq.faq-anim details:not(.expanded) .ans{height:0;opacity:0;}
@media (prefers-reduced-motion:reduce){
  .faq.faq-anim .ans{transition:none;}
}

/* ---------- contact ---------- */
.form{display:flex;flex-direction:column;gap:20px;max-width:560px;margin-top:44px;}
.form .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--pebble);margin-bottom:8px;}
.form input,.form textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--iron);
  color:var(--bone);font-family:inherit;font-size:15px;padding:10px 2px;transition:border-color .25s ease;
}
.form input::placeholder,.form textarea::placeholder{color:var(--pebble);}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--bone);}
.form textarea{resize:vertical;min-height:110px;}
.form button{
  align-self:flex-start;margin-top:8px;
  font-family:inherit;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--bone);
  background:transparent;border:1px solid var(--iron);border-radius:5px;padding:13px 24px;cursor:pointer;
  transition:border-color .25s ease,transform .2s ease;
}
.form button:hover{border-color:var(--bone);transform:translateY(-1px);}
.form-note{font-size:12px;color:var(--pebble);margin-top:14px;}
.direct{display:flex;flex-wrap:wrap;gap:36px;margin-top:8px;}
.direct .item .label{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--pebble);margin-bottom:6px;}
.direct .item a{color:var(--bone);border-bottom:1px solid var(--iron);padding-bottom:2px;}
.direct .item a:hover{border-color:var(--bone);}

/* ---------- legal ---------- */
.legal h2{margin-bottom:8px;}
.legal h3{font-size:16px;text-transform:none;letter-spacing:-0.01em;margin:34px 0 10px;color:var(--bone);}
.legal p,.legal li{color:var(--text-dim);max-width:74ch;}
.legal ul{padding-left:20px;margin:0 0 18px;}

/* ---------- footer ---------- */
.foot{position:relative;z-index:5;background:var(--void);border-top:1px solid var(--hair);padding:70px 0 34px;}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px;}
.foot .brand .wordmark-img{height:40px;width:auto;display:block;}
.foot .brand p{font-size:13px;color:var(--pebble);margin-top:18px;max-width:30ch;}
.foot h4{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--pebble);margin:0 0 16px;font-weight:400;}
.foot .col a{display:block;font-size:13px;color:var(--text-dim);margin-bottom:11px;transition:color .2s ease;}
.foot .col a:hover{color:var(--bone);}
.foot .base{border-top:1px solid var(--hair-soft);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--pebble);}
.foot .base .legal-line{max-width:none;}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .split,.split.narrow{grid-template-columns:1fr;gap:32px;}
  .offer .row{grid-template-columns:1fr;gap:14px;}
  .step{grid-template-columns:56px 1fr;gap:20px;}
  .foot .cols{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .nav .links a.plain{display:none;}
  .foot .cols{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .btn-outline,.ghost{justify-content:center;}
}
@media (max-width:760px){
  /* lighter background on phones so scrolling stays smooth */
  .env .blob{filter:blur(55px);mix-blend-mode:normal;opacity:0.22;animation:none;width:75vw;height:75vw;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
}

/* ---------- cookie notice ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(8,8,8,0.97);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--hair);
  padding:18px clamp(20px,5vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  transform:translateY(110%);transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{margin:0;font-size:13px;line-height:1.5;color:var(--text-dim);max-width:640px;}
.cookie-banner a{color:var(--bone);border-bottom:1px solid var(--iron);padding-bottom:1px;}
.cookie-banner a:hover{border-color:var(--bone);}
.cookie-banner button{
  flex-shrink:0;font-family:inherit;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--bone);
  background:transparent;border:1px solid var(--iron);border-radius:5px;padding:11px 22px;cursor:pointer;
  transition:border-color .2s ease,transform .2s ease;
}
.cookie-banner button:hover{border-color:var(--bone);transform:translateY(-1px);}
@media (max-width:560px){
  .cookie-banner{padding:16px 20px;}
  .cookie-banner button{width:100%;}
}
@media (max-width:760px){
  .cookie-banner{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,8,8,0.98);}
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner{transition:none;}
}