html{
scroll-behavior:smooth;
}
:root{

--bg:#F7F5F0;
--text:#111111;
--secondary:#666666;
--accent:#B08D57;
--dark:#0D0D0D;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:var(--bg);

color:var(--text);

font-family:'Inter',sans-serif;

overflow-x:hidden;

}

/* ==========================
WELCOME OVERLAY
========================== */

/* ==========================
WELCOME OVERLAY
========================== */

#welcome-overlay{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.08);

backdrop-filter:blur(8px);

z-index:9999;

transition:1.2s ease;

}

.welcome-card{
margin:auto;
width:460px;

background:rgba(255,255,255,.55);

backdrop-filter:blur(20px);

padding:60px;

border-radius:30px;

border:1px solid rgba(255,255,255,.7);

box-shadow:
0 30px 80px rgba(0,0,0,.12);

animation:welcomeFloat 1s ease;

}

@keyframes welcomeFloat{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.welcome-brand h1{

font-family:'Playfair Display',serif;

font-size:42px;

font-weight:600;

letter-spacing:1px;

margin-bottom:12px;

}

.welcome-founder{

color:#777;

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

}

.welcome-divider{

height:1px;

background:#e5e5e5;

margin:30px 0;

}

.welcome-role{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#777;

margin-bottom:30px;

}

.welcome-gomotion{

margin-bottom:30px;

}

.welcome-gomotion h2{

color:#B08D57;

font-size:34px;

margin-bottom:8px;

}

.welcome-gomotion p{

font-size:20px;

}

.welcome-intro{

line-height:1.8;

color:#666;

margin-bottom:35px;

}

#continue-btn{

width:100%;

padding:18px;

background:#B08D57;

color:white;

border:none;

border-radius:12px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

#continue-btn:hover{

transform:translateY(-3px);

box-shadow:
0 10px 30px rgba(176,141,87,.35);

}
.welcome-description{

margin-bottom:35px;

line-height:1.8;

color:#666;

max-width:520px;

}
/* ==========================
NAVBAR
========================== */

nav{

position:fixed;

top:0;

width:100%;

padding:30px 80px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(247,245,240,.75);

backdrop-filter:blur(10px);

z-index:100;

}

.logo{

font-weight:700;

letter-spacing:2px;

}
.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

.nav-links{

display:flex;

gap:40px;

}

.nav-links a{

text-decoration:none;

color:var(--text);

}

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

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1.2fr 1fr;

align-items:center;

gap:80px;

padding:160px 80px;

}

.hero-kicker{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--secondary);

margin-bottom:20px;

}

.hero h1{

font-family:'Playfair Display',serif;

font-size:clamp(2.4rem,5vw,5rem);

line-height:1.1;

margin-bottom:35px;

max-width:800px;

font-weight:600;

}

.hero-description{

max-width:650px;

line-height:1.8;

font-size:18px;

color:var(--secondary);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.primary-btn{

background:var(--accent);

padding:15px 30px;

color:white;

text-decoration:none;

}

.secondary-btn{

padding:15px 30px;

border:1px solid #ddd;

color:var(--text);

text-decoration:none;

}
.primary-btn,
.secondary-btn,
.diagnostic-form button{

transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;

}

.hero-right img{

width:100%;

max-width:430px;

height:650px;

object-fit:cover;

border-radius:30px;

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

animation:
floatImage 8s ease-in-out infinite;

}
/* ==========================
PROBLEM SECTION
========================== */

.problem-section{

padding:180px 80px;

background:#ffffff;

margin-top:-120px;

z-index:2;

}

.problem-container{

max-width:1400px;

margin:auto;

}

.section-label{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#999;

margin-bottom:25px;

}

.problem-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(2.5rem,5vw,4.8rem);

line-height:1.15;

margin-bottom:80px;

max-width:1000px;

}

.problem-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-bottom:80px;

}

.problem-card{

padding:40px;

border-radius:24px;

background:#fafafa;

border:1px solid #ececec;

font-size:20px;

line-height:1.6;

transition:.4s;

}

.problem-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

.problem-ending{

font-size:24px;

line-height:1.8;

max-width:900px;

color:#555;

}
/* ==========================
SERVICE STRIP
========================== */

.service-strip{

margin-top:60px;

padding-top:30px;

border-top:1px solid #e5e5e5;

}

.service-strip span{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#999;

display:block;

margin-bottom:20px;

}

.service-items{

display:flex;

gap:30px;

flex-wrap:wrap;

}

.service-items p{

font-size:18px;

color:#444;

position:relative;

}

.service-items p:not(:last-child)::after{

content:"•";

position:absolute;

right:-18px;

color:#B08D57;

}
/* ==========================
GOMOTION
========================== */

.gomotion-section{

padding:180px 80px;

background:#F7F5F0;

margin-top:-120px;

z-index:3;

}

.gomotion-container{

max-width:1400px;

margin:auto;

}

.gomotion-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,6vw,6rem);

margin-bottom:30px;

}

.gomotion-lead{

max-width:800px;

font-size:22px;

line-height:1.8;

color:#555;

margin-bottom:80px;

}

.gomotion-statement{

margin-bottom:100px;

}

.gomotion-statement p{

font-size:42px;

margin-bottom:15px;

font-family:'Playfair Display',serif;

}

.highlight{

color:#B08D57;

}

.gomotion-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-bottom:100px;

}

.gomotion-card{

padding:40px;

background:white;

border-radius:24px;

border:1px solid #ececec;

}

.gomotion-card span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#888;

}

.gomotion-card h3{

font-size:34px;

margin-top:10px;

}

.gomotion-card.accent{

border-color:#B08D57;

}

.gomotion-ending{

font-size:28px;

line-height:1.8;

max-width:900px;

color:#444;

}
/* ==========================
MARKASIA
========================== */

.markasia-section{

background:#0D0D0D;

color:white;

padding:140px 80px 180px;

position:relative;

overflow:hidden;

margin-top:-120px;

border-radius:40px 40px 0 0;

z-index:5;

box-shadow:
0 -40px 100px rgba(0,0,0,.12);

}

.markasia-section::before{

content:"";

position:absolute;

inset:0;

background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:60px 60px;

pointer-events:none;

}

.markasia-container{

position:relative;

z-index:2;

max-width:1400px;

margin:auto;

}

.markasia-label{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#B08D57;

margin-bottom:25px;

}

.markasia-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,6vw,6rem);

line-height:1.1;

margin-bottom:40px;

max-width:900px;

}

.markasia-intro{

font-size:22px;

line-height:1.9;

max-width:850px;

color:#bdbdbd;

margin-bottom:100px;

}

.systems-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.system-card{

padding:45px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

transition:.4s;

}

.system-card:hover{

transform:
translateY(-10px)
scale(1.02);

border-color:#B08D57;

box-shadow:
0 0 0 1px rgba(176,141,87,.3),
0 40px 100px rgba(176,141,87,.15);

}

.system-card span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#B08D57;

}

.system-card h3{

font-size:34px;

margin:20px 0;

font-family:'Playfair Display',serif;

}

.system-card p{

line-height:1.9;

color:#bdbdbd;

}
/* ==========================
ABOUT ARNAV
========================== */

.about-section{

padding:180px 80px;

background:#FCFBF8;

margin-top:-120px;

z-index:6;

}

.about-container{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:1fr 1.2fr;

gap:100px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:32px;

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

}

.about-content h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5rem);

line-height:1.1;

margin-bottom:10px;

}

.about-content h3{

font-size:32px;

color:#B08D57;

margin-bottom:40px;

font-weight:500;

}

.about-content p{

font-size:20px;

line-height:2;

color:#555;

margin-bottom:25px;

}
/* ==========================
DIAGNOSTIC
========================== */

.diagnostic-section{

padding:220px 80px;

background:#F7F5F0;

margin-top:-120px;

z-index:9;

}

.diagnostic-container{

max-width:900px;

margin:auto;

text-align:center;

}

.diagnostic-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5rem);

margin-bottom:25px;

line-height:1.1;

}

.diagnostic-subtitle{

font-size:22px;

line-height:1.8;

color:#666;

max-width:700px;

margin:0 auto 80px;

}

.diagnostic-form{

background:white;

padding:60px;

border-radius:32px;

border:1px solid #ececec;

box-shadow:
0 20px 60px rgba(0,0,0,.05);

display:flex;

flex-direction:column;

gap:20px;

}

.diagnostic-form textarea,
.diagnostic-form input{

width:100%;

padding:22px;

border:1px solid #e5e5e5;

border-radius:16px;

font-size:16px;

font-family:'Inter',sans-serif;

background:#fafafa;

}

.diagnostic-form textarea{

resize:none;

}

.diagnostic-form button{

padding:22px;

border:none;

border-radius:16px;

background:#B08D57;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.primary-btn:hover,
.secondary-btn:hover,
.diagnostic-form button:hover{

transform:
translateY(-4px)
scale(1.02);

box-shadow:
0 15px 40px rgba(176,141,87,.3);

}
.markasia-logo{

width:140px;

margin-bottom:30px;

display:block;

opacity:.95;

filter:drop-shadow(
0 0 20px rgba(176,141,87,.15)
);

}
.markasia-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,6vw,6rem);

line-height:1.05;

max-width:1000px;

margin-bottom:40px;

}
/* ==========================
PROJECT INQUIRY
========================== */

.service-selector{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:15px;

margin-bottom:50px;

}

.service-option{

padding:22px;

background:white;

border:1px solid #e5e5e5;

border-radius:18px;

cursor:pointer;

font-weight:600;

transition:.3s ease;

}

.service-option:hover{

transform:translateY(-3px);

border-color:#B08D57;

}

.service-option.active{

background:#B08D57;

color:white;

border-color:#B08D57;

}

.diagnostic-form select{

width:100%;

padding:22px;

padding-left:20px;

padding-right:60px;

border:1px solid #e5e5e5;

border-radius:16px;

font-size:16px;

font-family:'Inter',sans-serif;

background:#fafafa;

color:#666;

outline:none;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 22px center;

}
/* ==========================
INSIGHTS
========================== */

.insights-section{

padding:180px 80px;

background:white;

margin-top:-120px;

z-index:8;

}

.insights-container{

max-width:1400px;

margin:auto;

}

.insights-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5rem);

margin-bottom:20px;

}

.insights-subtitle{

font-size:22px;

color:#666;

line-height:1.8;

max-width:700px;

margin-bottom:80px;

}

.insights-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.insight-card{

text-decoration:none;

color:inherit;

border-radius:28px;

overflow:hidden;

background:white;

border:1px solid #ececec;

transition:.4s;

}

.insight-card:hover{

transform:translateX(5px);

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.insight-card:hover img{

transform:scale(1.05);

}

.insight-card img{

width:100%;

height:500px;

object-fit:cover;

transition:.6s;

}

.insight-content{

padding:30px;

}

.insight-content span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#B08D57;

}

.insight-content h3{

font-size:28px;

margin:15px 0;

font-family:'Playfair Display',serif;

line-height:1.2;

}

.insight-content p{

color:#666;

}
/* ==========================
EXECUTION ARCHIVE
========================== */

.archive-section{

padding:180px 80px;

background:white;

margin-top:-120px;

}

.archive-container{

max-width:1400px;

margin:auto;

}

.archive-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5rem);

margin-bottom:25px;

}

.archive-subtitle{

font-size:22px;

line-height:1.8;

color:#666;

max-width:800px;

margin-bottom:80px;

}

.archive-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-bottom:100px;

}

.archive-card{

padding:45px;

border-radius:28px;

background:white;

border:1px solid #ececec;

transition:.35s;

}

.archive-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.archive-card span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#B08D57;

}

.archive-card h3{

font-size:34px;

margin:20px 0;

font-family:'Playfair Display',serif;

}

.archive-card p{

line-height:1.8;

color:#666;

}

.stat-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.stat-card h3{

font-size:5rem;

color:#B08D57;

margin:0;

}

.collaboration-section{

text-align:center;

}

.collab-heading{

font-family:'Playfair Display',serif;

font-size:42px;

margin-bottom:15px;

}

.collab-subtitle{

max-width:700px;

margin:0 auto 50px;

line-height:1.8;

color:#666;

}

.client-wall{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

}

.client-pill{

padding:18px 30px;

border-radius:100px;

border:1px solid #e5e5e5;

background:white;

font-weight:600;

transition:.35s;

}

.client-pill:hover{

transform:translateY(-3px);

border-color:#B08D57;

box-shadow:
0 15px 40px rgba(176,141,87,.12);

}
/* ==========================
FOOTER
========================== */

.footer{

background:#0D0D0D;

color:white;

padding:140px 80px;

}

.footer-container{

max-width:1400px;

margin:auto;

}

.footer h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,7vw,8rem);

margin-bottom:30px;

}

.footer-tagline{

font-size:32px;

line-height:1.5;

margin-bottom:20px;

color:#B08D57;

}

.footer-built{

font-size:18px;

color:#999;

margin-bottom:50px;

}

.footer-divider{

height:1px;

background:rgba(255,255,255,.08);

margin:40px 0;

}

.footer-links{

display:flex;

gap:40px;

flex-wrap:wrap;

}

.footer-links a{

text-decoration:none;

color:white;

font-size:18px;

transition:.3s;

}

.footer-links a:hover{

color:#B08D57;

}

.footer-copyright{

color:#777;

}
/* ==========================
LEVERAGE
========================== */

.leverage-section{

padding:180px 80px;

background:#ffffff;

margin-top:-120px;

z-index:5;

}

.leverage-container{

max-width:1400px;

margin:auto;

}

.leverage-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5.5rem);

line-height:1.05;

margin-bottom:30px;

max-width:900px;

}

.leverage-subtitle{

font-size:22px;

line-height:1.8;

color:#666;

max-width:800px;

margin-bottom:90px;

}

.leverage-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.leverage-card{

padding:40px;

border:1px solid #e8e8e8;

border-radius:24px;

transition:.35s;

background:white;

}

.leverage-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}

.leverage-card span{

font-size:13px;

letter-spacing:2px;

color:#B08D57;

display:block;

margin-bottom:25px;

}

.leverage-card h3{

font-size:28px;

margin-bottom:15px;

font-family:'Playfair Display',serif;

}

.leverage-card p{

color:#666;

line-height:1.8;

}
.systems-line{

font-size:clamp(5rem,9vw,9rem);

color:#B08D57;

line-height:1;

margin-top:20px;

}


nav{

transition:.4s ease;

}

.nav-scrolled{

padding:20px 80px;

background:rgba(247,245,240,.92);

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

}
.footer-built{

font-size:20px;

line-height:1.8;

max-width:500px;

}
/* ==========================
FOUNDER LETTER
========================== */

.founder-letter{

padding:180px 80px;

background:#F7F5F0;

margin-top:-120px;

z-index:7;

}

.letter-container{

max-width:900px;

margin:auto;

}

.letter-container h2{

font-family:'Playfair Display',serif;

font-size:clamp(3rem,5vw,5rem);

line-height:1.1;

margin-bottom:60px;

}

.letter-content{

font-size:24px;

line-height:2;

color:#444;

}

.letter-content p{

margin-bottom:35px;

}

.signature{

font-family:'Playfair Display',serif;

font-size:36px;

color:#B08D57;

margin-top:60px;

}

section{

position:relative;

}
.problem-section{
background:#ffffff;
}

.gomotion-section{
background:#F7F5F0;
}

.about-section{
background:#FCFBF8;
}
#progress-bar{

position:fixed;
left:0;
top:0;
width:4px;
height:0;
background:#B08D57;
z-index:999;

}
.problem-section,
.gomotion-section,
.markasia-section,
.leverage-section,
.about-section,
.founder-letter,
.insights-section,
.diagnostic-section{

position:relative;

border-radius:40px 40px 0 0;

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

}
.about-single{

display:block;

max-width:900px;

}
.markasia-page .hero-right{

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

}

.markasia-page .hero-right img{

max-width:700px;
width:100%;
height:auto;
object-fit:contain;

filter:drop-shadow(
0 0 40px rgba(176,141,87,.15)
);

}
@media(max-width:768px){
.logo{
font-size:20px;
letter-spacing:3px;
}
.hero{

text-align:center;

}

.hero-description{

margin-left:auto;
margin-right:auto;

}

.hero-buttons{

width:100%;

}

.service-strip{

text-align:center;

}

.service-items{

justify-content:center;

}
.nav-links a{
font-size:14px;
}
.footer h2{

font-size:3rem;

line-height:1;

word-break:break-word;

}
.problem-card,
.system-card,
.leverage-card{

padding:30px;
font-size:18px;

}
.system-card h3,
.leverage-card h3{

font-size:26px;

}
.about-content p,
.gomotion-lead,
.markasia-intro,
.leverage-subtitle,
.insights-subtitle,
.diagnostic-subtitle{

font-size:18px;

line-height:1.8;

}
.section-label{
margin-bottom:30px;
}

.problem-container h2,
.gomotion-container h2,
.markasia-container h2,
.about-content h2,
.leverage-container h2,
.insights-container h2{

margin-bottom:50px;

}
nav{

padding:18px 20px;

display:flex;

justify-content:space-between;

align-items:center;

}

.menu-toggle{

display:block;

}

.nav-links{

display:none;

}

.hero{

grid-template-columns:1fr;
padding:110px 30px 80px;
gap:30px;
min-height:auto;

}

.hero h1{
font-size:3rem;
line-height:1;
margin-bottom:20px;
}

.hero-right img{
max-width:340px;
width:100%;
height:auto;
margin:auto;
display:block;
}
.hero-right{
order:1;
}

.hero-left{
order:2;
}

.hero-buttons{
flex-direction:column;
}

.primary-btn,
.secondary-btn{

text-align:center;

width:100%;

padding:18px 24px;

font-size:16px;

}

.problem-grid,
.systems-grid,
.leverage-grid,
.insights-grid,
.service-selector,
.gomotion-grid{

grid-template-columns:1fr;

}

.problem-section,
.gomotion-section,
.markasia-section,
.about-section,
.leverage-section,
.insights-section,
.diagnostic-section,
.footer{

padding:100px 30px;

}

.diagnostic-form{

padding:30px;

}

.about-container{

grid-template-columns:1fr;

gap:50px;

}
.archive-grid{

grid-template-columns:1fr;

}

.archive-card{

padding:35px;

}

.collab-heading{

font-size:32px;

}
.problem-section,
.gomotion-section,
.markasia-section,
.about-section,
.leverage-section,
.founder-letter,
.insights-section,
.diagnostic-section{

margin-top:-20px;

}
.markasia-hero-logo{

max-width:280px;

}
}
.markasia-hero-logo{

width:100%;

max-width:420px;

animation:
floatImage 10s ease-in-out infinite;

filter:
drop-shadow(0 0 40px rgba(176,141,87,.15));

}
.active-nav{

color:#B08D57 !important;

position:relative;

}

.active-nav::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:100%;

height:1px;

background:#B08D57;

}

.hero-left,
.hero-right{

opacity:0;

transform:translateY(40px);

transition:
opacity .9s ease,
transform .9s ease;

}

.page-loaded .hero-left{

opacity:1;

transform:translateY(0);

}

.page-loaded .hero-right{

opacity:1;

transform:translateY(0);

transition-delay:.15s;

}
@keyframes floatImage{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}
.fade-section{

opacity:0;

transform:translateY(60px);

transition:
opacity 1s ease,
transform 1s ease;

}

.fade-section.visible{

opacity:1;

transform:translateY(0);

}
#page-transition{

position:fixed;

inset:0;

background:#0D0D0D;

z-index:99999;

transform:translateY(100%);

pointer-events:none;

transition:transform .8s cubic-bezier(.77,0,.18,1);

}

body.transitioning #page-transition{

transform:translateY(0);

}
.mobile-menu{

position:fixed;

top:85px;

left:20px;

right:20px;

background:rgba(255,255,255,.95);

backdrop-filter:blur(20px);

border-radius:24px;

padding:25px;

display:flex;

flex-direction:column;

gap:20px;

opacity:0;

pointer-events:none;

transform:translateY(-10px);

transition:.35s ease;

z-index:1000;

}

.mobile-menu a{

text-decoration:none;

color:#111;

font-size:18px;

}

.mobile-menu.active{

opacity:1;

pointer-events:auto;

transform:translateY(0);

}