/* =========================================
   GLOBAL FOUNDATION
========================================= */

/* Box model sanity */

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


/* Remove mobile tap highlight */

*{
  -webkit-tap-highlight-color: transparent;
}


/* Remove default browser spacing */



/* =========================================
   TYPOGRAPHY BASELINE
========================================= */

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:500;
  letter-spacing:-0.02em;
}

p{
  margin:0;
}



/* =========================================
   MEDIA BEHAVIOR
========================================= */

img{
  max-width:100%;
  display:block;
}



/* =========================================
   LINKS
========================================= */

a{
  color:inherit;
  text-decoration:none;
}



/* =========================================
   INTERACTION FEEDBACK
========================================= */

/* subtle press effect for clickable elements */

a:active,
button:active,
.journey-step:active{
  transform:scale(0.97);
  transition:transform .08s ease;
}



/* =========================================
   SPACING SYSTEM  (VERY IMPORTANT)
========================================= */

/*
8px spacing scale.

Use ONLY these values moving forward:

8
16
24
32
48
64
72
96
128
*/

:root{

  --space-8:8px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-48:48px;
  --space-64:64px;
  --space-72:72px;
  --space-96:96px;
  --space-128:128px;

}



/* =========================================
   CONTENT WIDTH
========================================= */

.container{
  max-width:1100px;
  margin:auto;
  padding:0 24px;
}



/* =========================================
   MOBILE TYPOGRAPHY SAFETY
========================================= */

@media(max-width:767px){

  h1{
    line-height:1.1;
  }

}

/* =========================
GLOBAL RESET
========================= */


body{
margin:0;
font-family:'Inter', sans-serif;
color:#303030;
background:#ffffff;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}



/* =========================
ANNOUNCEMENT
========================= */

.announcement{
background:#81A969;
color:#303030;
text-align:center;
padding:11px 20px;
font-size:13px;
letter-spacing:.4px;
font-weight:500;
}



/* =========================
NAVIGATION
========================= */

.nav{
position:relative;
top:0;
z-index:999;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 9%;

/* subtle glass navbar */
background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border-bottom:1px solid rgba(15,23,42,.08);
box-shadow:0 6px 18px rgba(15,23,42,.04);
}



/* =========================
LOGO
========================= */

.logo{
display:flex;
align-items:center;
}

.logo img{
height:70px;
width:auto;
}

@media(max-width:1000px){
.logo img{
height:60px;
}
}


/* =========================
NAV LINKS
========================= */

.nav-links{
display:flex;
gap:40px;
}

@media(max-width:1000px){
.nav-links{
gap:28px;
}
}

.nav-links a{
text-decoration:none;
color:#303030;
font-weight:500;
font-size:15px;
transition:.2s;
}

.nav-links a:hover{
opacity:.55;
}



/* =========================
HAMBURGER
========================= */

.hamburger{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
cursor:pointer;
width:28px;
height:22px;
}

.hamburger span{
display:block;
width:100%;
height:2px;
background:#303030;
border-radius:2px;
transition:all .3s ease;
}

.hamburger.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}



/* =========================
HERO
========================= */

.hero{
min-height:90vh;
display:flex;
align-items:center;
padding:40px 9% 60px 9%;
}

.hero-inner{
max-width:860px;
margin:0 auto;
text-align:center;
}



/* =========================
EYEBROW
========================= */

.eyebrow{
text-transform:uppercase;
letter-spacing:2.2px;
font-size:12px;
font-weight:600;
color:#64748b;
margin-bottom:28px;
}



/* =========================
HEADLINE
========================= */

.hero h1{
font-size:clamp(40px,6vw,68px);
line-height:1.1;
letter-spacing:-1.5px;
font-weight:600;
margin-bottom:36px;
}



/* =========================
SUBTEXT
========================= */

.hero-subtext{
font-size:20px;
color:#334155;
max-width:720px;
line-height:1.6;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
}



/* =========================
CTA BUTTON SYSTEM
========================= */

.cta{
display:flex;
justify-content:center;
gap:28px;
flex-wrap:wrap;
margin-top:20px;
}

.btn{
padding:18px 48px;
border-radius:999px;
text-decoration:none;
font-weight:650;

transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;

display:inline-flex;
align-items:center;
justify-content:center;

border:5px solid transparent;

box-shadow:0 6px 14px rgba(15,23,42,.08);

position:relative;
overflow:hidden;
}



/* PRIMARY BUTTON */

.primary{
background:#303030;
color:white;
border:5px solid #81a969;
}

.primary:hover{
background:#81a969;
color:white;
border:5px solid #303030;
}



/* SECONDARY */

.secondary{
border:5px solid #81a969;
color:#303030;
background:white;
}

.secondary:hover{
border-color:#303030;
}



/* BUTTON LIFT */

.btn:hover{
transform:translateY(-3px);
}



/* PREMIUM HALO */

.btn::after{
content:"";
position:absolute;
inset:-6px;
border-radius:999px;
background:rgba(15,23,42,.06);
opacity:0;
transition:opacity .25s ease;
z-index:-1;
}

.btn:hover::after{
opacity:1;
}



/* =========================
LOGO STRIP
========================= */

.logo-strip{
margin-top:40px;
}

.hero-inner .logo-strip .logo-label{
font-size:12px;
letter-spacing:2.4px;
text-transform:uppercase;
color:#94a3b8;
margin-bottom:20px;
font-weight:500;
text-align:center;
}

.hero-inner .logo-strip .logos{
display:flex;
justify-content:center;
align-items:center;
gap:32px;
flex-wrap:wrap;
}

.hero-inner .logo-strip .logos img{
height:24px;
opacity:.55;
filter:grayscale(100%);
transition:opacity .25s ease, filter .25s ease, transform .25s ease;
}

.hero-inner .logo-strip .logos img:hover{
opacity:1;
filter:grayscale(0%);
transform:translateY(-2px);
}



/* =========================
CTA SECTION
========================= */

.cta-section{
padding:220px 24px;
background:#fafafa;
}

.cta-container{
max-width:720px;
margin:auto;
text-align:center;
}

.cta-headline{
font-size:48px;
letter-spacing:-0.02em;
margin-bottom:28px;
}

.cta-support{
font-size:18px;
color:#555;
line-height:1.8;
margin-bottom:48px;
}

.cta-actions{
display:flex;
justify-content:center;
}



/* =========================
SPATIAL EXHALE
========================= */

.hero::after{
content:"";
display:block;
height:140px;
}



/* =========================
TABLET
========================= */

@media(max-width:1000px){

.cta-section{
padding:160px 20px;
}

.cta-headline{
font-size:40px;
}

}



/* =========================
MOBILE
========================= */

@media(max-width:767px){

.nav{
padding:16px 6%;
}

.announcement{
display:none;
}

.hamburger{
display:flex;
}



/* FROSTED MOBILE MENU */

.nav-links{
position:fixed;
top:88px;
right:0;
overflow-x:hidden;

width:320px;
max-width:85vw;
height:calc(100vh - 88px);

background:rgba(255,255,255,0.92);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border-top:1px solid rgba(0,0,0,0.06);
box-shadow:0 20px 60px rgba(0,0,0,0.15);

display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;

padding-top:70px;
gap:36px;

/* smoother animation */
transform:translateX(100%);
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.nav-links.active{
transform:translateX(0);
}

.nav-links a{
font-size:20px;
padding:12px 22px;
border-radius:10px;
transition:.25s;
}

.nav-links a:hover{
background:rgba(255,255,255,0.6);
}

.hero{
padding:48px 6% 90px 6%;
}

.hero h1{
font-size:clamp(38px,8vw,50px);
margin-bottom:26px;
}

.hero-subtext{
font-size:16px;
line-height:1.6;
}

.cta{
flex-direction:column;
align-items:center;
gap:20px;
width:100%;
max-width:340px;
margin-left:auto;
margin-right:auto;
}

.cta .btn{
width:100%;
text-align:center;
padding:18px 24px;
}

.hero-inner .logo-strip .logos{
gap:26px;
}

}



@media(max-width:600px){

.cta-headline{
font-size:32px;
}

.cta-support{
font-size:16px;
}

.cta-actions .btn{
width:100%;
}

html{
overflow-x:hidden;
}

}

/* =========================
WHY NETLYST
========================= */

.about{
padding:100px 9%;
background:#ffffff;
}

.about-container{
max-width:820px;
margin:auto;
}



/* =========================
HEADLINE
========================= */

.about-title{
text-align:center;
font-size:44px;
margin-bottom:50px;
letter-spacing:-0.02em;
color:#303030;
}



/* =========================
PARAGRAPHS
========================= */

.about p{
font-size:16px;
line-height:1.85;
color:#334155;
margin-bottom:24px;
}



/* =========================
INTRO BEFORE GRID
========================= */

.about-intro{
font-weight:500;
margin-top:10px;
color:#303030;
}



/* =========================
CAPABILITY GRID
========================= */

.capability-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px 60px;

margin-top:30px;
margin-bottom:40px;

background:#f8fafc;
padding:26px 34px;
border-radius:12px;

}

/* capability item */

.capability-grid div{

font-size:16px;
line-height:1.75;
color:#334155;

position:relative;
padding-left:22px;

}

/* bullet */

.capability-grid div::before{

content:"•";
position:absolute;
left:0;
top:0;

font-size:18px;
color:#303030;

}



/* =========================
TRANSITION PARAGRAPH
========================= */

.about-transition{

font-size:17px;
line-height:1.8;
color:#303030;

margin-top:12px;
margin-bottom:30px;

font-weight:500;

}



/* =========================
MISSION STATEMENT
========================= */

.about-mission{
margin-top:20px;
font-weight:500;
color:#303030;
}



/* =========================
TABLET
========================= */

@media(max-width:1000px){

.capability-grid{
grid-template-columns:1fr;
gap:10px;
}

.about-title{
font-size:34px;
}

.about-container{
max-width:700px;
}

}



/* =========================
MOBILE
========================= */

@media(max-width:767px){

.about{
padding:80px 6%;
}

.about-title{
font-size:28px;
margin-bottom:36px;
}

.about p{
font-size:15px;
}

.capability-grid div{
font-size:15px;
}

.about-transition{
font-size:16px;
}

}

/* =========================
STICKY SECTION
========================= */

.sticky-section{
padding:128px 24px;
background:#fafafa;
}


/* =========================
HEADLINE
========================= */

.sticky-headline{
text-align:center;
font-size:44px;
font-weight:500;
letter-spacing:-0.5px;
margin-bottom:24px;
}


/* =========================
INTRO PARAGRAPH
========================= */

.sticky-intro{

max-width:900px;
margin:0 auto 72px auto;

text-align:center;

font-size:16px;
line-height:1.8;

color:#475569;

}


/* =========================
LAYOUT
========================= */

.sticky-container{

max-width:1100px;
margin:auto;

display:flex;
gap:64px;
align-items:flex-start;

position:relative;

}


/* =========================
STICKY IMAGE (DESKTOP)
========================= */

.sticky-left{
flex:1;
position:sticky;
top:140px;
align-self:flex-start;

will-change: transform;
transform: translateZ(0);
}


/* =========================
IMAGE WRAPPER
========================= */

.sticky-image-wrapper{
position:relative;
width:100%;
}


/* =========================
IMAGE LAYERS
========================= */

.sticky-image{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;

opacity:0;
transition:opacity .45s ease;
}

.sticky-image.active{
opacity:1;
position:relative;
}


/* =========================
RIGHT COLUMN
========================= */

.sticky-right{
flex:1;
padding-bottom:12px;
}


/* =========================
TILES
========================= */

.tile{

border:1px solid #e7e7e7;
border-radius:12px;
padding:32px;
margin-bottom:24px;
background:#fff;

opacity:.55;
transform:scale(.98);

position:relative;
z-index:2;

will-change:transform, opacity;

transition:
opacity .35s ease,
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}


/* ACTIVE TILE */

.tile.active{

opacity:1;
transform:scale(1);

border-color:#dcdcdc;
box-shadow:0 18px 45px rgba(0,0,0,.08);

}


/* =========================
TILE TEXT
========================= */

.tile-title{

font-size:20px;
font-weight:600;
margin-bottom:10px;
letter-spacing:.04em;
color:#303030;

}

.tile-intro{

color:#334155;
line-height:1.6;
font-size:15px;

}


/* =========================
TILE BULLETS
========================= */

.tile-content{

opacity:0;
max-height:0;
overflow:hidden;

transform:translateY(8px);

transition:
opacity .25s ease,
transform .25s ease,
max-height .35s ease;

}

.tile.active .tile-content{

opacity:1;
transform:translateY(0);
max-height:420px;

}

.tile-content ul{
padding-left:18px;
margin-top:16px;
}

.tile-content li{
margin-bottom:8px;
color:#475569;
font-size:14px;
line-height:1.6;
}


/* =====================================================
MOBILE IMAGE (paired with tile)
===================================================== */

.mobile-tile-image{

display:none;
width:100%;

background:#fff;

padding:36px 36px 28px 36px;

border-radius:14px 14px 0 0;

margin:0;

box-shadow:0 10px 30px rgba(0,0,0,.08);

border:1px solid #e7e7e7;
border-bottom:none;

}


/* illustration inside */

.mobile-tile-image img{
display:block;
width:80%;
margin:auto;
}


/* =========================
MOBILE LAYOUT
========================= */

@media(max-width:767px){

.sticky-container{
flex-direction:column;
}


/* hide desktop sticky illustration */

.sticky-left{
display:none;
}


/* enable mobile illustrations */

.mobile-tile-image{
display:block;
}


/* merge image + tile into single card */

.mobile-tile-image + .tile{

border-radius:0 0 14px 14px;

border-top:none;

margin-top:-2px;

box-shadow:0 18px 40px rgba(0,0,0,.08);

}


/* remove desktop animation dimming */

.tile{

opacity:1;
transform:none;

}


/* keep accordion working on mobile */

.tile-content{

opacity:0;
max-height:0;

}

.tile.active .tile-content{

opacity:1;
max-height:1200px;

}


/* center title + subheadline */

.tile-title{
text-align:center;
}

.tile-intro{
text-align:center;
}


/* typography adjustment */

.sticky-headline{
font-size:34px;
}

.sticky-right{
padding-bottom:0;
}

}

/* ===== MOBILE TILE STABILITY FIX ===== */

.tile{
opacity:1;
transform:none;
transition:box-shadow .25s ease;
}

/* disable opacity switching on mobile */

.tile.active{
opacity:1;
}

/* prevent scroll height jitter */

.tile-content{
transition:opacity .25s ease;
}

/* slightly larger expansion buffer */

.tile.active .tile-content{
max-height:900px;
}

/* =====================================
Journey Section
===================================== */

.journey-section{
padding:128px 24px;
background:#fff;
}

.journey-headline{
text-align:center;
font-size:44px;
font-weight:500;
margin-bottom:80px;
}


/* =====================================
CONTAINER
===================================== */

.journey-wrapper{
max-width:1100px;
margin:auto;
position:relative;

padding:64px 56px;

border-radius:18px;
border:1px solid #e8e8e8;
background:#fff;

box-shadow:0 25px 70px rgba(0,0,0,.05);
}


/* =====================================
TIMELINE
===================================== */

.journey-line{
position:absolute;
top:93px;
left:7%;
width:86%;
height:1.5px;
background:#e4e4e4;
}


/* =====================================
STEPS
===================================== */

.journey-steps{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:32px;
position:relative;
margin-bottom:36px;
}


/* =====================================
STEP
===================================== */

.journey-step{
text-align:center;
max-width:220px;
cursor:pointer;
transition:transform .25s ease;
}

.journey-step:hover{
transform:translateY(-4px);
}


/* =====================================
NODE
===================================== */

.node{
width:60px;
height:60px;
border-radius:50%;
background:#303030;
color:#fff;

display:flex;
align-items:center;
justify-content:center;

font-size:15px;
font-weight:500;

margin:0 auto 16px auto;

z-index:2;
transition:background .25s ease;
}


/* Purple stages */

.journey-step[data-step="1"].active .node{
background:#8672AF;
}

.journey-step[data-step="2"].active .node{
background:#8672AF;
}


/* Green stages */

.journey-step[data-step="3"].active .node{
background:#81A969;
}

.journey-step[data-step="4"].active .node{
background:#81A969;
}


/* =====================================
LOGO
===================================== */

.journey-logo{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:14px;
}

.journey-logo img{
height:70px;
width:auto;
opacity:.95;

transition:opacity .25s ease, transform .25s ease;
}

.journey-step:hover .journey-logo img{
opacity:1;
transform:scale(1.05);
}


/* =====================================
SUMMARY
===================================== */

.journey-summary{
font-size:14px;
color:#666;
line-height:1.6;
}


/* =====================================
DESKTOP DETAIL PANEL
===================================== */

.journey-detail-panel{
margin-top:36px;
padding-top:30px;
border-top:1px solid rgba(0,0,0,.06);
width:100%;
}

.journey-detail-panel h3{
font-size:20px;
margin-bottom:16px;
}

.journey-detail-panel.purple h3{
border-left:4px solid #8672AF;
padding-left:10px;
}

.journey-detail-panel.green h3{
border-left:4px solid #81A969;
padding-left:10px;
}


/* =====================================
DESKTOP BULLET LIST
===================================== */

#journey-list{
padding-left:18px;
width:100%;
}

#journey-list li{
display:list-item;
font-size:15px;
line-height:1.7;
color:#444;
margin-bottom:12px;
}


/* =====================================
DESKTOP + TABLET ADJUSTMENTS
===================================== */

@media(min-width:767px){

.journey-detail-panel{
padding-left:12px;
}

}


/* =====================================
MOBILE DETAIL
===================================== */

.journey-mobile-detail{

max-height:0;
overflow:hidden;
opacity:0;

margin-top:0;
padding-top:0;

border-top:1px solid #e6e6e6;

text-align:left;
width:100%;

transition:
max-height .55s cubic-bezier(.25,.8,.25,1),
opacity .35s ease,
margin-top .35s ease,
padding-top .35s ease;

transition-delay:.12s;

}

.journey-mobile-detail h4{
font-size:18px;
margin-bottom:12px;
padding-left:10px;
}


/* Purple accent */

.journey-step[data-step="1"] .journey-mobile-detail h4,
.journey-step[data-step="2"] .journey-mobile-detail h4{
border-left:4px solid #8672AF;
}


/* Green accent */

.journey-step[data-step="3"] .journey-mobile-detail h4,
.journey-step[data-step="4"] .journey-mobile-detail h4{
border-left:4px solid #81A969;
}


/* bullets */

.journey-mobile-detail ul{
padding-left:20px;
max-width:820px;
}

.journey-mobile-detail li{
font-size:15px;
line-height:1.7;
color:#444;
margin-bottom:10px;
}


/* =====================================
Mobile Layout
===================================== */

@media(max-width:767px){

.journey-line{
display:none;
}

.journey-steps{
flex-direction:column;
align-items:center;
gap:56px;
}

.journey-wrapper{
padding:48px 28px;
}

.journey-headline{
font-size:34px;
}


/* hide desktop panel */

.journey-detail-panel{
display:none;
}


/* show mobile expansion */

.journey-step.active .journey-mobile-detail{

max-height:1200px;
opacity:1;

margin-top:32px;
padding-top:24px;

transition-delay:.12s;

}

}

/* ====================================
PRIMARY CTA — INSTITUTIONAL STYLE
==================================== */

.cta-section{
  padding:220px 24px;
  background:#fafafa;
}

.cta-container{
  max-width:720px;
  margin:auto;
  text-align:center;
}

.primary:hover{
  background:#303030;
}

/* HEADLINE */

.cta-headline{
  font-size:44px;
  letter-spacing:-0.02em;
  margin-bottom:28px;
}



/* SUPPORT TEXT */

.cta-support{
  font-size:16px;
  color:#666;
  line-height:1.8;
  margin-bottom:48px;
}

/* FIRST LINE EMPHASIS */

.cta-support strong{
  display:block;
  font-size:22px;
  font-weight:600;
  color:#222;
  margin-bottom:10px;
}



/* ACTIONS */



/* ===============================
TABLET
=============================== */

@media(max-width:1000px){

.cta-section{
  padding:160px 20px;
}

.cta-headline{
  font-size:40px;
}

.cta-support strong{
  font-size:20px;
}

}



/* ===============================
MOBILE
=============================== */

@media(max-width:600px){

.cta-headline{
  font-size:32px;
}

.cta-support{
  font-size:15px;
}

.cta-support strong{
  font-size:18px;
}

.cta-actions .btn{
  width:100%;
  padding:18px 24px;
  text-align:center;
}

}

/* ====================================
FAQ — PREMIUM SMOOTH ACCORDION
==================================== */

.faq-section{
  padding:180px 24px;
  background:#fff;
}

.faq-container{
  max-width:760px;
  margin:auto;
}


/* HEADLINE */

.faq-headline{
  font-size:44px;
  text-align:center;
  margin-bottom:72px;
}


/* ITEM */

.faq-item{
  border-bottom:1px solid #eee;
}


/* QUESTION */

.faq-question{
  width:100%;
  padding:26px 0;

  background:none;
  border:none;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:24px;

  font-size:18px;
  cursor:pointer;
  text-align:left;
  line-height:1.5;

  color:#303030;
}

.faq-text{
  flex:1;
}


/* ICON — PLUS ONLY */

.faq-icon{
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#303030;

  font-size:22px;
  font-weight:500;

  line-height:1;

  transform-origin:center;

  transition:transform .35s cubic-bezier(.4,0,.2,1);
}


/* =============================
   SMOOTH GRID ACCORDION
============================= */

.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
  will-change:grid-template-rows;
}

.faq-answer p{
  min-height:0;
  margin:0;
  color:#555;
  line-height:1.8;
}


/* ACTIVE STATE */

.faq-item.active .faq-answer{
  grid-template-rows:1fr;
  margin-bottom:24px;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg);
}


/* ===============================
TABLET + MOBILE
=============================== */

@media(max-width:767px){

.faq-section{
  padding:120px 20px;
}

.faq-headline{
  font-size:32px;
  margin-bottom:48px;
}

.faq-question{
  font-size:16px;
}

.faq-icon{
  font-size:20px;
}

}

/* ====================================
DARK INSTITUTIONAL FOOTER
==================================== */

.eri-footer{
  background:#303030;
  color:#d6d9df;
  padding:110px 24px 40px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
}



/* GRID */

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  margin-bottom:80px;
}



/* LEFT */

.footer-left a{
  display:inline-block;
}

.footer-logo{
  width:230px;
  margin-bottom:6px;
  display:block;
  margin-left:0px;
}

.footer-contact{
  line-height:1.8;
  color:#aeb4bf;
  margin-top:6px;
  margin-bottom:28px;

  border-left:5px solid #81a969;
  padding-left:20px;
}

.footer-contact a{
  color:#ffffff;
  text-decoration:none;
  font-weight:500;
}



/* SOCIAL */

.footer-social{
  display:flex;
  gap:20px;
}

.footer-social a{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;

  border:5px solid #81a969;
  border-radius:50%;

  color:#aeb4bf;
  font-size:22px;

  text-decoration:none;
  transition:.25s;
}

.footer-social a:hover{
  color:#ffffff;
  border-color:#ffffff;
}



/* RIGHT MENU */

.footer-right{
  margin-top:105px;
}

.footer-title{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom:18px;
}

.footer-menu{
  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-menu a{
  text-decoration:none;
  color:#aeb4bf;
  transition:.25s;
}

.footer-menu a:hover{
  color:#ffffff;
}



/* COPYRIGHT */

.footer-bottom{
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:28px;

  font-size:14px;
  color:#8b92a0;
}



/* ===============================
TABLET
=============================== */

@media(max-width:767px){

.footer-grid{
  grid-template-columns:1fr;
  gap:60px;
}

.footer-right{
  margin-top:20px;
}

}



/* ===============================
MOBILE
=============================== */

@media(max-width:600px){

.eri-footer{
  padding:80px 20px 30px;
}

.footer-logo{
  width:230px;
}

.footer-social{
  flex-wrap:wrap;
  gap:16px;
}

.footer-social a{
  width:44px;
  height:44px;
  font-size:20px;
}

}

/* =========================================
SITE LOADER
========================================= */

body.site-loading > *:not(#site-loader){
visibility:hidden;
}

/* fade page in */

body.site-ready > *:not(#site-loader){
visibility:visible;
}

/* loader screen */

#site-loader{

position:fixed;
inset:0;

background:#f8fafc;

display:flex;
align-items:center;
justify-content:center;

z-index:99999;

pointer-events:none;

transition:
opacity .5s ease,
visibility .5s ease;

}

/* hide loader */

#site-loader.hidden{
opacity:0;
visibility:hidden;
}

/* center content */

.loader-inner{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

gap:20px;

}

/* logo */



/* progress bar */

.loader-logo{
width:110px;
opacity:.9;
}

.loader-bar{

width:110px;
height:4px;

background:#e5e7eb;
border-radius:4px;

overflow:hidden;
margin:auto;

}

/* animated progress */

.loader-progress{

width:40%;
height:100%;

background:#81A969;

animation:loaderMove 1.2s infinite linear;

}

@keyframes loaderMove{

0%{transform:translateX(-100%)}
100%{transform:translateX(250%)}

}

/* =========================================
TABLET LAYOUT STABILITY
========================================= */

@media (min-width:768px) and (max-width:1000px){

/* give sections more breathing room */

.container{
max-width:92%;
}

/* allow progression section to expand */

.journey-wrapper{
max-width:95%;
padding:56px 36px;
}

/* slightly reduce illustration column */

.sticky-left{
flex:.9;
}

/* keep text column balanced */

.sticky-right{
flex:1.1;
}

/* shrink the sticky illustration slightly */

.sticky-image-wrapper{
max-width:420px;
margin:auto;
}

/* reduce image dominance */

.mobile-tile-image img{
width:75%;
}

}