/* ==========================================================================
   The Hub Alliance — design system
   Tokens and components from the approved design handoff.
   Breakpoints: 640 (sm) · 768 (md) · 1024 (lg) · 1280 (xl)
   ========================================================================== */

:root{
  /* colour */
  --blue:#0A66E8;
  --blue-hover:#0850BC;
  --blue-hover-dark:#2A7DF5;
  --blue-tint:#F2F7FE;
  --blue-check:#E7F0FE;
  --blue-light:#7FB4FF;
  --blue-rule:#A8C8F5;
  --terra:#C4703F;
  --terra-light:#E9A277;
  --ink:#22201D;
  --ink-soft:#5F5A53;
  --paper:#FBF8F5;
  --white:#FFFFFF;
  --sand:#F3E9DC;
  --line:#E8DFD3;
  --navy:#17293C;
  --navy-deep:#101E2D;
  --line-dark:#2E4459;
  --text-dark-1:#E4EBF2;
  --text-dark-2:#D4E0EA;
  --text-dark-3:#A9BDCE;
  --text-dark-4:#8FA5B8;
  --text-dark-card:#C3D3E0;
  --nav-hover:#F1E9DE;
  --ghost-border:#CBD8E8;
  --ghost-border-dark:#3E5670;

  /* type */
  --display:Newsreader,Georgia,serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* layout */
  --maxw:1180px;
  --gutter:24px;

  /* elevation */
  --sh-btn:0 8px 20px rgba(10,102,232,.22);
  --sh-btn-dark:0 10px 26px rgba(10,102,232,.32);
  --sh-card-hover:0 12px 28px rgba(23,41,60,.09);
  --sh-cal:0 24px 60px rgba(23,41,60,.12),0 3px 12px rgba(23,41,60,.06);
  --sh-drop:0 16px 40px rgba(23,41,60,.14);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
}
p{margin:0}
img,svg{max-width:100%}

a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}

/* focus ring — never the browser default */
*:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 18px;
  border-radius:0 0 8px 0;font-family:var(--body);font-weight:600;
}
.skip-link:focus{left:0;color:#fff}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--narrow{max-width:820px}
.wrap--text{max-width:900px}

.section{padding:clamp(56px,7vw,100px) 0}
.section--hero{padding:clamp(72px,9vw,130px) 0 clamp(64px,8vw,110px)}
.section--lg{padding:clamp(64px,8vw,110px) 0}
.section--cta{padding:clamp(72px,9vw,120px) 0}
.section--tight{padding:22px 0}

.ground-cream{background:var(--paper)}
.ground-white{background:var(--white)}
.ground-sand{background:var(--sand)}
.ground-dark{background:linear-gradient(170deg,var(--navy),var(--navy-deep));color:#fff}
.ground-dark-hero{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden}
.ground-dark-cta{background:linear-gradient(165deg,var(--navy-deep),var(--navy));color:#fff}
.rule-top{border-top:1px solid var(--line)}
.rule-bottom{border-bottom:1px solid var(--line)}

.center{text-align:center}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow{
  display:inline-block;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
}
.eyebrow--dark{color:var(--blue-light)}
.eyebrow--dot{display:inline-flex;align-items:flex-start;gap:9px;line-height:1.5;max-width:52ch;letter-spacing:.16em;text-align:left}
.eyebrow--dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--terra-light);flex-shrink:0;margin-top:7px;
}

.h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:22ch;margin:24px 0 0}
.h1--sm{font-size:clamp(2.2rem,4.4vw,3.5rem);margin:20px 0 0;max-width:22ch}
.h1--center{font-size:clamp(2.2rem,4.6vw,3.3rem);max-width:none;margin:0}
.h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0 0;max-width:26ch}
.h2--wide{max-width:30ch}
.h2--full{max-width:none}
.h2--sm{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.h2--cta{font-size:clamp(2.2rem,5vw,3.6rem);max-width:none}
.h3{font-size:1.32rem}
.h3--lg{font-size:1.5rem}
.h3--xl{font-size:1.6rem}
.on-dark,.ground-dark h1,.ground-dark h2,.ground-dark h3,
.ground-dark-hero h1,.ground-dark-hero h2,.ground-dark-hero h3,
.ground-dark-cta h1,.ground-dark-cta h2,.ground-dark-cta h3{color:#fff}

.accent{font-style:italic;color:var(--terra)}
.accent--dark{font-style:italic;color:var(--terra-light)}

.lead{font-size:1.12rem;line-height:1.75;color:var(--ink-soft);max-width:64ch;margin:20px 0 0}
.lead--xl{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.65;font-weight:500;color:var(--text-dark-1);max-width:60ch;margin:30px 0 0}
.lead--dark{color:var(--text-dark-2)}
.lead--muted{color:var(--text-dark-3);font-size:1.06rem;line-height:1.7;max-width:58ch;margin:20px 0 0}

.body-text{font-size:1.04rem;line-height:1.75;color:var(--ink-soft)}
.body-text--lg{font-size:1.1rem;line-height:1.75;color:var(--ink-soft)}
.body-text--strong{color:var(--ink);font-weight:600}
.body-text--dark{color:var(--text-dark-3);font-size:1.04rem;line-height:1.75}
.body-text--dark-1{color:var(--text-dark-1);font-size:1.08rem;line-height:1.75}
.body-text--dark-2{color:var(--text-dark-2)}

.mono-note{font-family:var(--mono);font-size:.9rem;letter-spacing:.05em;color:var(--terra)}
.tnum{font-feature-settings:'tnum'}

.display-italic{font-family:var(--display);font-style:italic;color:var(--ink)}
.display-quote{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.4;color:var(--ink);max-width:44ch}
.lep{font-family:var(--display);font-style:italic;color:var(--terra-light)}

.stack{display:flex;flex-direction:column;gap:18px}
.stack--sm{gap:16px}
.mt-6{margin-top:6px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-30{margin-top:30px}
.mt-32{margin-top:32px}
.mt-34{margin-top:34px}
.mt-38{margin-top:38px}
.mt-40{margin-top:40px}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:15px 26px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;text-align:center;min-height:48px;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--sh-btn)}
.btn--primary:hover{background:var(--blue-hover);color:#fff}
.btn--lg{padding:16px 28px;font-size:1.03rem;box-shadow:var(--sh-btn-dark)}
.btn--xl{padding:17px 32px;font-size:1.06rem;box-shadow:0 12px 30px rgba(10,102,232,.34)}
.ground-dark .btn--primary:hover,
.ground-dark-hero .btn--primary:hover,
.ground-dark-cta .btn--primary:hover{background:var(--blue-hover-dark)}

.btn--ghost{background:transparent;border-color:var(--ghost-border);color:var(--navy)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.btn--ghost-dark{background:transparent;border-color:var(--ghost-border-dark);color:#fff}
.btn--ghost-dark:hover{border-color:var(--blue-light);color:#fff;background:rgba(127,180,255,.08)}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.btn-row--center{justify-content:center}

.textlink{
  font-weight:600;font-size:1.02rem;color:var(--blue);
  border-bottom:1px solid var(--blue-rule);padding-bottom:2px;
  display:inline-block;
}
.textlink:hover{border-bottom-color:var(--blue)}
.textlink--sm{font-size:.97rem}
.textlink--dark{color:var(--blue-light);border-bottom-color:var(--ghost-border-dark)}

/* ==========================================================================
   Cards, grids, tiles
   ========================================================================== */

.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--split{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.grid--split-34{gap:34px}
.grid--split-48{gap:48px}
.grid--gap12{gap:12px}
.grid--gap14{gap:14px}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.card--onwhite{background:var(--paper)}
.card--feature{padding:32px 30px}
.card--wide{padding:34px 32px}
.card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
.card--static:hover{border-color:var(--line);transform:none;box-shadow:none}

.card-dark{
  border:1px solid var(--line-dark);border-radius:14px;
  padding:28px 26px;background:rgba(255,255,255,.04);
}
.card-dark--sm{padding:26px 24px}
.card-dark h3{color:#fff;margin-bottom:10px}
.card-dark p{font-size:1.01rem;line-height:1.7;color:var(--text-dark-card)}
.card-dark .kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--terra-light);font-feature-settings:'tnum';
}
.card-dark--box{border-radius:16px;padding:30px}

.card-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--blue)}
.card h3{margin:12px 0 12px}
.card--feature h3{margin:0 0 12px}
.card p{font-size:1.01rem;line-height:1.7;color:var(--ink-soft)}
.card--feature p{font-size:1.02rem}

/* quick-nav cards (home) */
.qnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qnav a{
  display:block;padding:20px 22px;border-radius:13px;
  background:var(--white);border:1px solid var(--line);
  transition:border-color .22s ease;
}
.qnav a:hover{border-color:var(--blue)}
.qnav .k{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;
}
.qnav .d{display:block;font-size:1rem;color:var(--ink-soft);line-height:1.55}

/* hairline list — 1px gaps over a line-coloured container */
.hairline{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
}
.hairline__row{background:var(--white);padding:24px 26px}
.hairline__row p{font-size:1.04rem;line-height:1.6;color:var(--ink)}
.hairline__row .soft{color:var(--ink-soft)}

/* bullet tiles */
.tiles{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;font-size:1rem;line-height:1.6;color:var(--ink);
}
.tile::before{content:"·";color:var(--terra);font-weight:700}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--white);font-size:.94rem;color:var(--ink-soft);
  min-height:38px;
}

/* pull-quote */
.pullquote{
  margin:32px 0 0;padding:24px 28px;
  border-left:3px solid var(--terra);background:var(--sand);
  border-radius:0 12px 12px 0;
  font-size:1.08rem;line-height:1.7;color:var(--ink);font-weight:600;max-width:70ch;
}

/* sand note block */
.note-sand{
  margin:24px 0 0;padding:20px 24px;background:var(--sand);border-radius:12px;
  font-size:1.02rem;line-height:1.7;color:var(--ink);max-width:52ch;
}

/* bulleted prose list */
.list-plain{
  margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  font-size:1.01rem;line-height:1.65;color:var(--ink-soft);
}

/* EDEN identity card */
.eden-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:34px 32px}
.eden-card .name{font-family:var(--display);font-size:1.42rem;line-height:1.25;color:var(--ink)}
.eden-card .meta{font-size:1.02rem;color:var(--ink-soft);margin-top:12px}
.eden-card .orgno{font-family:var(--mono);font-size:1rem;color:var(--ink);margin-top:6px;font-feature-settings:'tnum'}
.eden-card .divider{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}

/* dark trust band */
.trustband{
  margin-top:44px;padding-top:36px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
}
.trustband p{font-size:1rem;line-height:1.7;color:var(--text-dark-card);max-width:78ch}
.trustband b{color:#fff;font-weight:600}
.trustband a{color:var(--blue-light);font-weight:600}
.trustband .lep{font-size:1.18rem;white-space:nowrap}

/* confirmation check */
.check-badge{
  width:62px;height:62px;border-radius:50%;background:var(--blue-check);
  display:flex;align-items:center;justify-content:center;margin:0 auto 26px;
}
.check-badge svg{width:28px;height:28px}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,245,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  font-family:var(--body);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:52px;
}
.brand{
  display:flex;align-items:center;gap:11px;color:var(--ink);
  font-family:var(--display);font-size:1.24rem;font-weight:500;letter-spacing:-.01em;
  flex-shrink:0;
}
.brand:hover{color:var(--ink)}
.brand svg{width:30px;height:30px;flex-shrink:0}

.nav__links{display:flex;align-items:center;gap:8px}
.nav__link{
  padding:9px 12px;border-radius:8px;font-size:.96rem;font-weight:500;
  color:var(--ink-soft);white-space:nowrap;
}
.nav__link:hover{background:var(--nav-hover);color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink);background:var(--nav-hover)}

.nav__group{position:relative;display:inline-flex}
.nav__trigger{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;font-size:.96rem;font-weight:500;color:var(--ink-soft);
  padding:9px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;
}
.nav__trigger:hover{background:var(--nav-hover);color:var(--ink)}
.nav__trigger svg{width:13px;height:13px;transition:transform .2s ease}
.nav__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:100%;left:0;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh-drop);padding:8px;
  display:none;flex-direction:column;gap:2px;z-index:70;
}
.nav__group.is-open .nav__menu{display:flex}
.nav__menu a{padding:11px 14px;border-radius:8px;font-size:.95rem;color:var(--ink)}
.nav__menu a:hover{background:var(--nav-hover)}

.nav__cta{
  margin-left:6px;padding:12px 20px;border-radius:10px;
  background:var(--blue);color:#fff;font-size:.96rem;font-weight:600;
  box-shadow:0 6px 16px rgba(10,102,232,.24);
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.nav__cta:hover{background:var(--blue-hover);color:#fff}

.nav__toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
}
.nav__toggle span{
  display:block;width:18px;height:2px;background:var(--ink);
  position:relative;transition:background .2s ease;
}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);
  transition:transform .2s ease,top .2s ease;
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.nav__mobile-actions{display:none;align-items:center;gap:10px}

/* mobile drawer.
   Positioned absolute (not fixed) because .nav uses backdrop-filter, which
   makes it the containing block for fixed descendants and would clip this. */
.drawer{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:55;
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 16px 40px rgba(23,41,60,.14);
  max-height:calc(100vh - 52px);overflow-y:auto;
  padding:20px var(--gutter) 32px;
  -webkit-overflow-scrolling:touch;
}
.drawer.is-open{display:block}
.drawer__section + .drawer__section{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.drawer__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);font-weight:500;margin:0 0 10px;
}
.drawer a{
  display:flex;align-items:center;min-height:48px;
  padding:0 12px;border-radius:8px;
  font-size:1.06rem;font-weight:500;color:var(--ink);
}
.drawer a:hover{background:var(--nav-hover)}
.drawer a[aria-current="page"]{background:var(--nav-hover)}
body.drawer-open{overflow:hidden}

/* ==========================================================================
   Book page
   ========================================================================== */

.book-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:start;
}
.cal-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--sh-cal);
}
.cal-card__head{padding:22px 26px 16px;border-bottom:1px solid var(--line)}
.cal-card__head .t{font-family:var(--display);font-size:1.24rem;color:var(--ink)}
.cal-card__head .s{font-size:.94rem;color:var(--ink-soft);margin-top:4px}
.calendly-inline-widget{min-width:320px;height:700px}
/* Safety net: if the container ever loses a definite height, keep the
   iframe filling it instead of collapsing to the 150px HTML default. */
.calendly-inline-widget iframe{height:100%;min-height:inherit}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{background:var(--navy);color:#fff;font-family:var(--body);padding:clamp(56px,7vw,88px) 0 40px}
.foot__cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:44px 36px}
.foot__brand{font-family:var(--display);font-size:1.34rem;font-weight:500;color:#fff;margin-bottom:14px}
.foot__brand-text{font-size:.97rem;line-height:1.65;color:var(--text-dark-3);max-width:34ch}
.foot__h{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-light);font-weight:500;margin:0 0 16px;
}
.foot__list{display:flex;flex-direction:column;gap:11px}
.foot__list a{font-size:.97rem;color:var(--text-dark-2);display:inline-flex;align-items:center;min-height:28px}
.foot__list a:hover{color:#fff}
.foot__eden{
  margin-top:52px;padding:28px 30px;border:1px solid var(--line-dark);
  border-radius:14px;background:rgba(255,255,255,.03);
}
.foot__eden p{margin:0;font-size:1rem;line-height:1.7;color:var(--text-dark-2);max-width:84ch}
.foot__eden b{color:#fff;font-weight:600}
.foot__eden a{color:var(--blue-light);font-weight:600}
.foot__bottom{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.foot__bottom p{margin:0;font-size:.92rem;color:var(--text-dark-4)}
.foot__bottom .lep{font-size:1.1rem}

/* ==========================================================================
   Hero network diagram (home)
   ========================================================================== */

.hero-net{
  position:absolute;right:-40px;top:40px;width:min(46vw,520px);
  opacity:.5;pointer-events:none;
}
@keyframes hubNode{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
@keyframes hubCore{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hubLine{from{stroke-dashoffset:210}to{stroke-dashoffset:0}}
.hero-net line{stroke-dasharray:210;animation:hubLine 1.4s ease-out both}
.hero-net line:nth-of-type(1){animation-delay:.1s}
.hero-net line:nth-of-type(2){animation-delay:.3s}
.hero-net line:nth-of-type(3){animation-delay:.5s}
.hero-net line:nth-of-type(4){animation-delay:.7s}
.hero-net circle{transform-box:fill-box;transform-origin:center}
.hero-net .n1{animation:hubNode 4.2s ease-in-out 1.2s infinite}
.hero-net .n2{animation:hubNode 4.2s ease-in-out 1.8s infinite}
.hero-net .n3{animation:hubNode 4.2s ease-in-out 2.4s infinite}
.hero-net .n4{animation:hubNode 4.2s ease-in-out 3s infinite}
.hero-net .core{animation:hubCore 5s ease-in-out infinite}

/* ==========================================================================
   Reveal — JS adds .reveal-ready; content stays visible without JS
   ========================================================================== */

.reveal-ready .reveal{opacity:0;transform:translateY(18px)}
.reveal{transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1279px){
  .foot__cols{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}
}

@media (max-width:1023px){
  /* nav → drawer */
  .nav__links{display:none}
  .nav__toggle{display:inline-flex}
  .nav__mobile-actions{display:flex}

  .book-grid{grid-template-columns:1fr;gap:36px}
  /* Calendly first on mobile — it is the conversion */
  .book-grid__cal{order:-1}
  /* Definite height, not min-height: Calendly's iframe is height:100%, and a
     percentage cannot resolve against height:auto, so it falls back to the
     150px HTML default and only the event header renders. */
  .calendly-inline-widget{height:960px}

  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--split,.grid--2{grid-template-columns:1fr}
  .qnav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-net{display:none}
}

@media (max-width:767px){
  .grid--3{grid-template-columns:1fr}
  .qnav{grid-template-columns:1fr}
  .tiles,.tiles--2{grid-template-columns:1fr}
  .trustband{gap:20px}
  .trustband .lep{white-space:normal}
}

@media (max-width:639px){
  :root{--gutter:20px}
  /* keep brand + CTA + hamburger on one row without clipping */
  .nav__inner{gap:10px}
  .brand{font-size:1.02rem;gap:8px;min-width:0}
  .brand svg{width:26px;height:26px}
  .nav__mobile-actions{gap:8px}
  .nav__cta{padding:10px 14px;font-size:.9rem}
  .foot__cols{grid-template-columns:1fr;gap:32px}
  .card,.card--feature,.card--wide{padding:26px 22px}
  .eden-card{padding:28px 24px}
  .pullquote{padding:20px 22px}
  .btn{width:100%}
  .btn-row{gap:12px}
  .btn-row .btn{width:100%}
  .chip{min-height:44px;padding:11px 16px}
  .hairline__row{padding:20px 22px}
  .foot__eden{padding:24px 22px}
  .cal-card__head{padding:20px 20px 14px}
}

@media (max-width:400px){
  /* 320px viewports: the 320px min-width plus the card border overflows
     and scrolls the whole page sideways. Let the widget take the width
     it is given — Calendly's own layout is responsive below 320. */
  .calendly-inline-widget{min-width:0}
  /* 320px: brand + "Book a Call" + hamburger overran the viewport by ~9px and
     scrolled every page sideways. Tighten the gutter and the row instead of
     truncating the brand name. */
  :root{--gutter:14px}
  .nav__inner{gap:8px}
  .brand{font-size:.9rem}
  .brand svg{width:24px;height:24px}
  .nav__cta{padding:10px 12px;font-size:.85rem}
}

/* touch: enlarge chips to 44px */
@media (hover:none){
  .chip{min-height:44px;padding:11px 16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal-ready .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.drawer,.skip-link{display:none}
}