/* Readability polish: Contact + Proverbs 16:9 */
.contact, .contact-link, a[href*="contact"], [class*="contact"] {
color: #111111 !important;
font-weight: 700 !important;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.proverbs, .proverb, [class*="proverb"], [class*="scripture"] {
color: #fff7df !important;
font-weight: 600 !important;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
:root{--logo-accent:#62d6a7;--logo-soft:rgba(98,214,167,.55);--bg:#000;--panel:#090909;--text:#fff;--muted:rgba(255,255,255,.68);--line:rgba(98,214,167,.22)}
html{scroll-behavior:smooth;background:transparent;}
body{background:transparent;color:var(--text);font-family:"Manrope",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit}
.site-header{position:sticky;top:0;z-index:1000;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:rgba(5,5,5,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.045)}
.brand{text-decoration:none;font-size:.88rem;font-weight:800;letter-spacing:.09em}
.menu-toggle{width:46px;height:46px;border:1px solid rgba(98,214,167,.35);border-radius:50%;background:transparent;display:grid;place-content:center;gap:4px;cursor:pointer}
.menu-toggle span{display:block;width:17px;height:1.5px;background:var(--logo-accent);transition:.25s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:998;background:transparent;backdrop-filter:blur(4px)}
.drawer{position:fixed;z-index:999;top:0;right:0;width:min(390px,88vw);height:100dvh;background:transparent;707;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.drawer.open{transform:translateX(0)}
.drawer-inner{padding:118px 42px 40px;display:flex;flex-direction:column}
.drawer-label{font-size:.7rem;color:var(--logo-accent);letter-spacing:.2em;margin-bottom:26px}
.drawer a{text-decoration:none;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;padding:10px 0}
.drawer-divider{height:1px;background:var(--line);margin:28px 0}
.drawer .x-link{font-size:.95rem;color:var(--muted)}
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:108px 24px 72px;background:transparent;}
.hero-glow{position:absolute;width:min(900px,100vw);height:min(900px,100vw);border-radius:50%;background:radial-gradient(circle,rgba(98,214,167,.13),rgba(98,214,167,.035) 28%,transparent 66%);filter:blur(18px);pointer-events:none}
.hero-content{position:relative;z-index:1;width:min(100%,1000px);text-align:center}
.hero-logo{margin-bottom:22px}
.hero-logo img{width:min(235px,43vw);display:block;margin:auto;mix-blend-mode:screen;filter:drop-shadow(0 0 25px rgba(98,214,167,.20));animation:logoIn 1s cubic-bezier(.22,1,.36,1) both}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.28em;color:var(--logo-accent);margin-bottom:20px;opacity:.9}
h1{color:var(--logo-accent);text-shadow:0 0 28px rgba(98,214,167,.14);font-size:clamp(3.1rem,7.5vw,7.2rem);font-weight:800;letter-spacing:-.055em;line-height:.92}
.tagline{font-size:clamp(1.02rem,2vw,1.4rem);color:rgba(255,255,255,.78);margin:21px auto 31px;letter-spacing:-.015em}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:1px solid var(--logo-accent);border-radius:999px;text-decoration:none;font-size:.72rem;font-weight:800;letter-spacing:.16em;transition:.25s ease}
.cta:hover{background:var(--logo-accent);color:#050505;transform:translateY(-2px)}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:99px}
.scroll-cue span{position:absolute;top:8px;left:50%;width:3px;height:7px;border-radius:4px;background:var(--logo-accent);transform:translateX(-50%);animation:scrollDot 1.8s ease-in-out infinite}
.section{width:min(1180px,calc(100% - 48px));margin:auto;padding:130px 0}
.section-kicker{font-size:.68rem;font-weight:800;letter-spacing:.22em;color:var(--logo-accent);margin-bottom:38px}
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;border-top:1px solid var(--line);padding-top:36px}
h2{font-size:clamp(2.5rem,5.5vw,5.4rem);font-weight:800;letter-spacing:-.055em;line-height:.98}
.lead{font-size:clamp(1.25rem,2.3vw,1.75rem);line-height:1.45;margin-bottom:24px}
.section p:not(.section-kicker):not(.feature-number){color:var(--muted)}
.text-link{display:inline-flex;gap:10px;margin-top:34px;color:var(--logo-accent);text-decoration:none;font-weight:700;font-size:.85rem}
.feature-card{border:1px solid var(--line);background:linear-gradient(145deg,#0b0b0b,#030303);padding:clamp(30px,6vw,76px);min-height:430px;display:flex;flex-direction:column;justify-content:flex-end}
.feature-card h2{max-width:760px;margin:10px 0 22px}
.feature-card p:last-child{max-width:620px}
.feature-number{font-size:.67rem;letter-spacing:.2em;color:var(--logo-accent);font-weight:800}
.travel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.travel-copy{padding:20px 0}
.travel-copy h2{margin:14px 0 24px}
.travel-panel{min-height:480px;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,rgba(98,214,167,.14),transparent 35%),linear-gradient(135deg,#111,#030303);display:flex;align-items:flex-end;padding:28px}
.travel-panel span{font-size:.67rem;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.story{border-top:1px solid rgba(255,255,255,.06)}
.story-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px}
.story-copy{padding-top:10px}
.story-copy p{font-size:1.05rem;margin-bottom:22px}
.closing{text-align:center;padding-top:150px;padding-bottom:150px}
.closing-mark{color:var(--logo-accent);font-weight:800;letter-spacing:-.08em;font-size:clamp(5rem,15vw,12rem);line-height:.8;margin-bottom:45px}
.closing h2{margin-bottom:25px}
.closing p{max-width:600px;margin:0 auto 36px}
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:25px 34px;display:flex;justify-content:space-between;color:rgba(255,255,255,.42);font-size:.72rem;letter-spacing:.08em}
.site-footer a{text-decoration:none;color:var(--logo-accent)}
@keyframes logoIn{from{opacity:0;transform:translateY(16px) scale(.92);filter:blur(4px)}to{opacity:1;transform:none;filter:drop-shadow(0 0 22px rgba(98,214,167,.18))}}
@keyframes scrollDot{0%,100%{transform:translate(-50%,0);opacity:.35}50%{transform:translate(-50%,12px);opacity:1}}
@media(max-width:760px){
.site-header{height:68px;padding:0 18px}
.brand{font-size:.72rem}
.hero{padding-top:92px}
.hero-logo{margin-bottom:22px}
.hero-logo img{width:min(190px,54vw);filter:drop-shadow(0 0 21px rgba(98,214,167,.18))}
.eyebrow{font-size:.58rem;letter-spacing:.2em}
.tagline{line-height:1.45;margin:18px auto 27px}
.section{width:min(100% - 36px,1180px);padding:95px 0}
.section-grid,.travel-grid,.story-wrap{grid-template-columns:1fr;gap:38px}
.feature-card{min-height:360px}
.travel-panel{min-height:330px}
h2{letter-spacing:-.045em}
.closing{padding-top:110px;padding-bottom:110px}
.site-footer{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* v4.0 next refinement — restrained production polish */
.site-header{background:transparent;border-bottom-color:rgba(98,214,167,.10)}
.brand{letter-spacing:.12em}
.menu-toggle{box-shadow:0 8px 26px rgba(0,0,0,.32),0 0 18px rgba(98,214,167,.06)}
.hero-content{transform:translateY(-1.5vh)}
.hero-glow{opacity:.82}
.eyebrow{letter-spacing:.31em}
h1{max-width:1000px;margin-left:auto;margin-right:auto}
.cta{box-shadow:0 0 0 rgba(98,214,167,0);transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.cta:hover{box-shadow:0 12px 34px rgba(98,214,167,.12)}
@media(max-width:760px){
.hero-content{transform:translateY(-2vh)}
.eyebrow{letter-spacing:.23em}
.cta{min-height:54px;padding:0 25px}
}
/* v4.0 Hero Flow — premium transition into Finance */
.hero{position:relative}
.hero:after{display:none!important}
.hero-logo img{animation:logoIn 1.15s cubic-bezier(.22,1,.36,1) both,logoFloat 6.5s ease-in-out 1.25s infinite}
.hero-content{animation:heroRise .9s cubic-bezier(.22,1,.36,1) both}
.section.intro{position:relative;padding-top:118px}
.section.intro:before{content:"";display:block;width:46px;height:1px;margin:0 0 34px;background:var(--logo-accent);box-shadow:0 0 12px rgba(98,214,167,.2)}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}20%{transform:translateY(-1px) rotate(-1deg) scale(1.004)}40%{transform:translateY(0) rotate(1.2deg) scale(1.006)}60%{transform:translateY(-1px) rotate(-.8deg) scale(1.003)}80%{transform:translateY(0) rotate(.45deg) scale(1)}}50%{transform:translateY(-3px) rotate(.35deg)}}
@keyframes heroRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){
.hero:after{width:64vw}
.section.intro{padding-top:88px}
.section.intro:before{margin-bottom:28px}
}
@media(prefers-reduced-motion:reduce){
.hero-logo img{animation:logoIn 1ms linear both!important}
.hero-content{animation:none!important}
}
/* v4.0 Finance Refinement — restrained editorial treatment */
.section.intro{padding-top:132px;padding-bottom:138px}
.section.intro .section-kicker{position:relative;padding-left:15px}
.section.intro .section-kicker:before{content:"";position:absolute;left:0;top:50%;width:3px;height:16px;transform:translateY(-50%);background:var(--logo-accent);box-shadow:0 0 10px rgba(98,214,167,.22)}
.section.intro .section-grid{position:relative;gap:82px}
.section.intro .section-grid>div:first-child h2{max-width:520px}
.section.intro .section-grid>div:last-child{border-left:1px solid rgba(98,214,167,.14);padding-left:42px}
.section.intro .lead{max-width:570px}
.section.intro .text-link{position:relative;padding-bottom:7px}
.section.intro .text-link:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--logo-accent),transparent)}
@media(max-width:760px){
.section.intro{padding-top:92px;padding-bottom:105px}
.section.intro .section-grid{gap:32px}
.section.intro .section-grid>div:last-child{border-left:0;border-top:1px solid rgba(98,214,167,.14);padding:26px 0 0}
.section.intro .lead{font-size:1.18rem}
}
/* v4.0 Psychology Image */
.psychology-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:0;overflow:hidden;padding:0!important}
.psychology-image{min-height:390px;background:transparent;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(98,214,167,.13)}
.psychology-image img{width:100%;height:100%;min-height:390px;object-fit:cover;display:block}
.psychology-copy{padding:52px 54px;align-self:center}
.psychology-copy .feature-number{margin-top:0}
@media(max-width:760px){
.psychology-card{grid-template-columns:1fr}
.psychology-image{min-height:230px;max-height:300px;border-right:0;border-bottom:1px solid rgba(98,214,167,.13)}
.psychology-image img{min-height:230px;max-height:300px;object-fit:cover}
.psychology-copy{padding:34px 28px 38px}
}
/* v4.0 Psychology Refinement — cinematic image treatment */
.psychology-card{
border:1px solid rgba(98,214,167,.12);
background:linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.psychology-image{position:relative}
.psychology-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.34));
pointer-events:none;
}
.psychology-image img{
filter:saturate(.96) contrast(1.04);
transform:scale(1.012);
transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease;
}
.psychology-card:hover .psychology-image img{
transform:scale(1.035);
filter:saturate(1.04) contrast(1.05);
}
.psychology-copy h2{max-width:520px}
.psychology-copy p:not(.feature-number){max-width:560px}
@media(max-width:760px){
.psychology-card{box-shadow:0 18px 50px rgba(0,0,0,.24)}
.psychology-image:after{background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.3))}
.psychology-image img{transform:none}
}
@media(prefers-reduced-motion:reduce){
.psychology-image img{transition:none!important}
}
/* v4.0 Travel Refinement — cinematic placeholder, ready for future photography */
.travel-section{padding-top:130px;padding-bottom:145px}
.travel-grid{position:relative;gap:72px}
.travel-copy{align-self:center}
.travel-copy h2{max-width:520px}
.travel-panel{
position:relative;
min-height:440px;
display:flex;
align-items:flex-end;
padding:34px;
overflow:hidden;
border:1px solid rgba(98,214,167,.16);
background:
radial-gradient(circle at 68% 28%,rgba(98,214,167,.18),transparent 20%),
radial-gradient(circle at 30% 68%,rgba(80,120,110,.16),transparent 30%),
linear-gradient(145deg,#070707 0%,#11120f 48%,#030303 100%);
box-shadow:0 26px 80px rgba(0,0,0,.30);
}
.travel-panel:before{
content:"";
position:absolute;
inset:18px;
border:1px solid rgba(255,255,255,.06);
pointer-events:none;
}
.travel-panel:after{
content:"";
position:absolute;
width:180px;
height:180px;
right:-50px;
top:-50px;
border-radius:50%;
background:transparent;
filter:blur(35px);
}
.travel-panel span{
position:relative;
z-index:1;
font-size:.72rem;
font-weight:800;
letter-spacing:.24em;
color:rgba(255,255,255,.78);
}
@media(max-width:760px){
.travel-section{padding-top:92px;padding-bottom:110px}
.travel-grid{gap:34px}
.travel-panel{min-height:300px;padding:26px}
.travel-panel span{font-size:.64rem;letter-spacing:.18em}
}
/* v4.0 About Refinement — editorial story treatment */
.story{position:relative;padding-top:145px;padding-bottom:155px}
.story-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:90px;align-items:start}
.story-wrap:before{content:"";position:absolute;left:0;top:-28px;width:72px;height:1px;background:var(--logo-accent);box-shadow:0 0 14px rgba(98,214,167,.18)}
.story-wrap h2{margin:0;max-width:650px;font-size:clamp(3rem,6vw,6.4rem);line-height:.98;letter-spacing:-.045em}
.story-copy{padding-top:12px;border-left:1px solid rgba(98,214,167,.15);padding-left:38px}
.story-copy p{max-width:560px}
.story-copy p:first-child{font-size:1.28rem;line-height:1.7;color:rgba(255,255,255,.92)}
.story-copy:after{content:"B.A. FUTURE GROWTH";display:block;margin-top:46px;font-size:.64rem;font-weight:800;letter-spacing:.28em;color:rgba(98,214,167,.72)}
@media(max-width:760px){
.story{padding-top:96px;padding-bottom:112px}
.story-wrap{grid-template-columns:1fr;gap:42px}
.story-wrap h2{font-size:clamp(2.65rem,13vw,4.4rem)}
.story-copy{padding:28px 0 0;border-left:0;border-top:1px solid rgba(98,214,167,.15)}
.story-copy p:first-child{font-size:1.16rem}
.story-copy:after{margin-top:34px}
}
/* v4.0 Closing Refinement — final editorial finish */
.closing{position:relative;padding-top:175px;padding-bottom:175px;overflow:hidden}
.closing:before{content:"";position:absolute;left:50%;top:82px;width:min(520px,70vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(98,214,167,.58),transparent)}
.closing:after{content:"";position:absolute;left:50%;top:30%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(98,214,167,.075),transparent 68%);filter:blur(10px);pointer-events:none}
.closing>*{position:relative;z-index:1}
.closing-mark{font-size:clamp(6rem,16vw,13rem);letter-spacing:-.09em;text-shadow:0 0 35px rgba(98,214,167,.08)}
.closing h2{max-width:850px;margin-left:auto;margin-right:auto}
.closing p{max-width:640px;font-size:1.08rem;line-height:1.7}
.site-footer{position:relative;background:transparent;border-top:1px solid rgba(98,214,167,.12);padding-top:28px;padding-bottom:28px}
.site-footer:before{content:"";position:absolute;left:50%;top:-1px;width:120px;height:1px;transform:translateX(-50%);background:var(--logo-accent);opacity:.5}
@media(max-width:760px){
.closing{padding-top:125px;padding-bottom:120px}
.closing:before{top:58px;width:56vw}
.closing:after{width:280px;height:280px}
.closing p{font-size:1rem}
.site-footer{padding:22px 18px}
}
/* v4.0 FINAL + TRAVEL — personal travel photography */
.travel-gallery{
margin-top:42px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:180px;
gap:10px;
}
.travel-photo{
position:relative;
overflow:hidden;
border:1px solid rgba(98,214,167,.18);
background:transparent;505;
}
.travel-photo:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.18));
}
.travel-photo img{
width:100%;
height:100%;
display:block;
object-fit:cover;
filter:saturate(.95) contrast(1.03);
transition:transform .65s cubic-bezier(.22,1,.36,1),filter .45s ease;
}
.travel-photo:hover img{
transform:scale(1.045);
filter:saturate(1.02) contrast(1.05);
}
.travel-wide{grid-column:span 2}
.travel-tall{grid-row:span 2}
@media(max-width:760px){
.travel-gallery{
margin-top:30px;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:145px;
gap:8px;
}
.travel-wide{grid-column:span 2}
.travel-tall{grid-row:span 2}
}
@media(prefers-reduced-motion:reduce){
.travel-photo img{transition:none!important}
}
/* v4.0 Travel Location Gallery — brighter photography + location labels */
.travel-photo{
min-height:180px;
isolation:isolate;
}
.travel-photo img{
opacity:1!important;
filter:saturate(1.04) contrast(1.05) brightness(1.04)!important;
}
.travel-photo:before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.03) 35%,rgba(0,0,0,.72) 100%);
pointer-events:none;
}
.travel-location{
position:absolute;
left:16px;
right:16px;
bottom:14px;
z-index:3;
display:flex;
align-items:center;
gap:9px;
color:#fff;
font-size:.78rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.travel-flag{
font-size:1.15rem;
line-height:1;
letter-spacing:0;
text-transform:none;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
@media(max-width:760px){
.travel-location{
left:11px;
right:11px;
bottom:10px;
gap:7px;
font-size:.62rem;
letter-spacing:.05em;
}
.travel-flag{font-size:1rem}
}
/* v4.0 Travel Gallery — premium photo frames */
.travel-photo{
border:1px solid rgba(98,214,167,.55)!important;
border-radius:12px!important;
box-shadow:
0 0 0 3px rgba(98,214,167,.055),
0 14px 34px rgba(0,0,0,.30),
inset 0 0 0 1px rgba(255,255,255,.035);
transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.travel-photo:after{
border-radius:11px;
}
.travel-photo:hover{
border-color:transparent;!important;
box-shadow:
0 0 0 3px rgba(98,214,167,.10),
0 18px 42px rgba(0,0,0,.38),
0 0 22px rgba(98,214,167,.07),
inset 0 0 0 1px rgba(255,255,255,.05);
transform:translateY(-2px);
}
.travel-location{
padding:7px 10px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
background:transparent;
backdrop-filter:blur(8px);
width:max-content;
max-width:calc(100% - 32px);
}
@media(max-width:760px){
.travel-photo{
border-radius:10px!important;
box-shadow:0 0 0 2px rgba(98,214,167,.05),0 10px 24px rgba(0,0,0,.26);
}
.travel-location{
padding:5px 8px;
max-width:calc(100% - 22px);
}
}
/* v4.0 Travel Gallery — uniform photo sizing */
.travel-gallery{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-auto-rows:auto!important;
gap:16px!important;
}
.travel-photo,
.travel-wide,
.travel-tall{
grid-column:auto!important;
grid-row:auto!important;
aspect-ratio:4/3!important;
min-height:0!important;
}
.travel-photo img{
width:100%!important;
height:100%!important;
aspect-ratio:4/3!important;
object-fit:cover!important;
}
@media(max-width:900px){
.travel-gallery{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:12px!important;
}
}
@media(max-width:520px){
.travel-gallery{
grid-template-columns:1fr!important;
gap:12px!important;
}
.travel-photo,
.travel-wide,
.travel-tall{
aspect-ratio:4/3!important;
}
}
/* v4.0 Travel — smaller cards + clear photo headings */
.travel-gallery{
width:min(960px,100%)!important;
margin-left:auto!important;
margin-right:auto!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
}
.travel-photo,
.travel-wide,
.travel-tall{
aspect-ratio:4/3!important;
}
.travel-caption{
position:absolute;
left:12px;
right:12px;
bottom:12px;
z-index:3;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:5px;
}
.travel-heading{
color:#fff;
font-size:.76rem;
line-height:1.1;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.travel-caption .travel-location{
position:static;
padding:4px 8px;
max-width:100%;
font-size:.58rem;
letter-spacing:.05em;
background:transparent;
}
.travel-caption .travel-flag{font-size:.9rem}
@media(max-width:900px){
.travel-gallery{
width:min(720px,100%)!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media(max-width:650px){
.travel-gallery{
width:min(560px,100%)!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
.travel-caption{left:9px;right:9px;bottom:9px}
.travel-heading{font-size:.68rem}
}
@media(max-width:420px){
.travel-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.travel-heading{font-size:.62rem}
.travel-caption .travel-location{font-size:.52rem;padding:3px 6px}
}
/* v4.0 Travel hero panel — elegant pinned journey map */
.travel-map-panel{
position:relative;
overflow:hidden;
min-height:330px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
padding:28px;
border:1px solid rgba(98,214,167,.48);
border-radius:20px;
background:
radial-gradient(circle at 70% 35%,rgba(90,120,90,.18),transparent 34%),
linear-gradient(135deg,#07100b 0%,#050505 62%,#0a0a0a 100%);
box-shadow:0 0 0 3px rgba(98,214,167,.045),0 18px 42px rgba(0,0,0,.34);
}
.travel-map-art{
position:absolute;
inset:0;
overflow:hidden;
opacity:.95;
}
.map-grid{
position:absolute;
inset:-15%;
background:
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
background-size:42px 42px;
transform:rotate(-8deg) scale(1.15);
mask-image:radial-gradient(circle at center,#000 30%,transparent 78%);
}
.map-route{
position:absolute;
height:2px;
background:linear-gradient(90deg,transparent,rgba(98,214,167,.85),rgba(120,210,150,.8),transparent);
transform-origin:left center;
filter:drop-shadow(0 0 7px rgba(98,214,167,.24));
}
.route-one{width:58%;left:15%;top:55%;transform:rotate(-19deg)}
.route-two{width:46%;left:38%;top:35%;transform:rotate(32deg)}
.map-pin{
position:absolute;
font-size:27px;
line-height:1;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));
}
.pin-one{left:22%;top:57%}
.pin-two{left:51%;top:37%}
.pin-three{left:73%;top:57%}
.map-compass{
position:absolute;
right:26px;
top:24px;
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid rgba(98,214,167,.5);
border-radius:50%;
color:#62d6a7;
font-size:.72rem;
font-weight:900;
letter-spacing:.08em;
background:transparent;
}
.travel-map-copy{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:5px;
padding:14px 18px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:transparent;
backdrop-filter:blur(8px);
box-shadow:0 10px 25px rgba(0,0,0,.24);
}
.travel-map-kicker{
color:#62d6a7;
font-size:.7rem;
font-weight:900;
letter-spacing:.16em;
}
.travel-map-copy strong{
color:#fff;
font-size:1.25rem;
line-height:1.1;
}
.travel-map-copy small{
color:rgba(255,255,255,.72);
font-size:.78rem;
}
@media(max-width:650px){
.travel-map-panel{
min-height:270px;
padding:18px;
}
.travel-map-copy strong{font-size:1rem}
.travel-map-copy small{font-size:.68rem}
.map-pin{font-size:22px}
}
/* v4.0 Cover Logo Blend — removes the hard square around the logo */
.hero-logo{
position:relative;
background:transparent!important;
border-color:transparent!important;
box-shadow:none!important;
overflow:visible;
}
.hero-logo img{
display:block;
background:transparent!important;
mix-blend-mode:normal;
filter:drop-shadow(0 0 18px rgba(80,220,160,.10))
drop-shadow(0 0 22px rgba(98,214,167,.08));
}
/* v4.0 Logo Introduction — "Wake Up" */
.hero-logo{
opacity:0;
animation:ba-logo-intro 2.15s cubic-bezier(.22,1,.36,1) .08s 1 forwards;
will-change:transform,opacity,filter;
}
.hero-logo img{
transform-origin:50% 54%;
animation:ba-logo-awaken 1.75s cubic-bezier(.22,1,.36,1) .25s 1 both;
will-change:transform,filter;
}
@keyframes ba-logo-intro{
0%{opacity:0;transform:translateY(16px) scale(.965);filter:blur(7px)}
38%{opacity:.82;transform:translateY(0) scale(.992);filter:blur(1.5px)}
72%{opacity:1;transform:translateY(-2px) scale(1.008);filter:blur(0)}
100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes ba-logo-awaken{
0%{transform:rotate(0deg) scale(.97)}
18%{transform:rotate(-5deg) scale(1.015)}
32%{transform:rotate(4deg) scale(1.018)}
45%{transform:rotate(-2.5deg) scale(1.008)}
58%{transform:rotate(1.4deg) scale(1.003)}
72%{transform:rotate(-.6deg) scale(1)}
100%{transform:rotate(0deg) scale(1)}
}
.hero-logo:after{
content:"";
position:absolute;
left:50%;
top:50%;
width:58%;
aspect-ratio:1;
transform:translate(-50%,-50%);
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle,rgba(98,214,167,.13),transparent 68%);
opacity:0;
animation:ba-logo-glint 1.25s ease-out .38s 1 both;
}
@keyframes ba-logo-glint{
0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
28%{opacity:.7}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}
@media(prefers-reduced-motion:reduce){
.hero-logo,
.hero-logo img,
.hero-logo:after{
animation:none!important;
opacity:1!important;
filter:none!important;
transform:none!important;
}
}
.logo-intro-label{
display:block;
margin-top:12px;
text-align:center;
font-size:.64rem;
font-weight:800;
letter-spacing:.24em;
text-transform:uppercase;
color:rgba(255,255,255,.54);
opacity:0;
animation:ba-intro-label 1s ease-out 1.28s 1 forwards;
}
@keyframes ba-intro-label{
from{opacity:0;transform:translateY(5px)}
to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
.logo-intro-label{animation:none!important;opacity:1!important}
}
/* v4.0 Hamburger — Stocks destination */
.stocks-section{
position:relative;
padding:120px 0;
border-top:1px solid rgba(98,214,167,.12);
}
.stocks-inner{
max-width:760px;
margin:0 auto;
padding:0 24px;
}
.stocks-inner .section-kicker{
color:var(--logo-accent,#62d6a7);
font-size:.68rem;
font-weight:900;
letter-spacing:.22em;
}
.stocks-inner h2{margin:.55rem 0 1rem}
.stocks-inner p{max-width:620px;line-height:1.7}
@media(max-width:760px){
.stocks-section{padding:90px 0}
}
/* About Me — requested brand statement */
.about-me-copy{
max-width:720px;
margin-left:auto;
margin-right:auto;
line-height:1.8;
}
/* v4.0 Psychology Design Team — fast head spin, smooth slowdown */
.psychology-image img{
transform-origin:50% 50%;
animation:psychology-fast-spin 3.8s cubic-bezier(.08,.72,.22,1) 1 both;
will-change:transform;
}
@keyframes psychology-fast-spin{
0%{
transform:scale(1) rotate(0deg);
}
10%{
transform:scale(1.025) rotate(145deg);
}
22%{
transform:scale(1.02) rotate(285deg);
}
36%{
transform:scale(1.015) rotate(390deg);
}
52%{
transform:scale(1.01) rotate(430deg);
}
70%{
transform:scale(1.005) rotate(445deg);
}
86%{
transform:scale(1.002) rotate(449deg);
}
100%{
transform:scale(1) rotate(450deg);
}
}
@media(prefers-reduced-motion:reduce){
.psychology-image img{
animation:none!important;
transform:none!important;
}
}
/* Cover reference — Proverbs 16:9 */
.proverbs-reference{
position:relative;
z-index:4;
margin:14px auto 0;
text-align:center;
color:rgba(98,214,167,.88);
font-size:.72rem;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
text-shadow:0 2px 10px rgba(0,0,0,.55);
}
/* Hamburger — Proverbs 16:9 above Explore */
.drawer-proverbs{
display:block;
margin-bottom:18px;
color:rgba(98,214,167,.95);
font-size:.78rem;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
text-decoration:none;
}
.drawer-proverbs:hover{
color:#fff;
}
/* Travel gallery — click to enlarge */
.travel-photo{
cursor:zoom-in;
padding:0;
font:inherit;
text-align:left;
}
.travel-lightbox{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:28px;
background:transparent;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease,visibility .25s ease;
}
.travel-lightbox.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.travel-lightbox img{
max-width:min(92vw,1200px);
max-height:86vh;
width:auto;
height:auto;
object-fit:contain;
border:2px solid rgba(98,214,167,.7);
border-radius:14px;
box-shadow:0 20px 70px rgba(0,0,0,.65);
}
.travel-lightbox-close{
position:absolute;
top:18px;
right:22px;
width:44px;
height:44px;
border:1px solid rgba(98,214,167,.55);
border-radius:50%;
background:transparent;
color:#fff;
font-size:30px;
line-height:1;
cursor:pointer;
}
.travel-lightbox-caption{
position:absolute;
left:50%;
bottom:22px;
transform:translateX(-50%);
max-width:90vw;
padding:8px 14px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
background:transparent;
color:#fff;
font-size:.78rem;
text-align:center;
backdrop-filter:blur(8px);
}
body.lightbox-open{overflow:hidden}
@media(max-width:600px){
.travel-lightbox{padding:14px}
.travel-lightbox img{max-width:94vw;max-height:78vh;border-radius:10px}
.travel-lightbox-caption{bottom:14px;font-size:.65rem}
}
/* v4.0 Travel Advanced — quick access + gallery navigation */
.travel-gallery-tools{
width:min(960px,100%);
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:rgba(255,255,255,.72);
}
.travel-gallery-tools span{
color:rgba(98,214,167,.95);
font-size:.68rem;
font-weight:900;
letter-spacing:.18em;
}
.travel-gallery-tools small{
font-size:.68rem;
opacity:.72;
}
.travel-lightbox-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid rgba(98,214,167,.5);
border-radius:50%;
background:transparent;
color:#fff;
font-size:38px;
line-height:1;
cursor:pointer;
z-index:4;
backdrop-filter:blur(8px);
}
.travel-lightbox-prev{left:22px}
.travel-lightbox-next{right:22px}
.travel-lightbox-counter{
position:absolute;
top:22px;
left:50%;
transform:translateX(-50%);
z-index:4;
padding:6px 11px;
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
background:transparent;
color:rgba(255,255,255,.86);
font-size:.7rem;
letter-spacing:.08em;
backdrop-filter:blur(8px);
}
.travel-photo:focus-visible{
outline:2px solid rgba(98,214,167,.9);
outline-offset:3px;
}
@media(max-width:600px){
.travel-gallery-tools{
align-items:flex-start;
flex-direction:column;
gap:4px;
margin-bottom:10px;
}
.travel-gallery-tools small{font-size:.62rem}
.travel-lightbox-nav{
width:40px;
height:40px;
font-size:30px;
}
.travel-lightbox-prev{left:10px}
.travel-lightbox-next{right:10px}
.travel-lightbox-counter{top:14px}
}
/* Hamburger — Proverbs 16:9 matches the small Explore label */
.drawer-proverbs{
font-size:inherit!important;
font-weight:inherit!important;
letter-spacing:inherit!important;
text-transform:inherit!important;
color:inherit!important;
opacity:.78;
}
.drawer-proverbs:hover{
color:#fff!important;
opacity:1;
}
/* v4.5 — Proverbs 16:9 at top of hamburger menu */
.menu-proverb{
display:block;
margin:0 0 14px 0;
font-size:.78rem;
line-height:1.2;
letter-spacing:.08em;
text-transform:none;
opacity:.9;
}
/* v4.6 — travel gallery compact "all photos on one page" layout */
.travel-gallery{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
grid-auto-rows:105px!important;
gap:8px!important;
width:min(1100px,100%)!important;
max-width:1100px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.travel-gallery .travel-photo,
.travel-gallery .travel-wide,
.travel-gallery .travel-tall{
grid-column:auto!important;
grid-row:auto!important;
width:100%!important;
height:105px!important;
min-height:105px!important;
max-height:105px!important;
aspect-ratio:auto!important;
box-sizing:border-box!important;
}
.travel-gallery .travel-photo img,
.travel-gallery .travel-wide img,
.travel-gallery .travel-tall img{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
object-fit:cover!important;
}
@media(max-width:900px){
.travel-gallery{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-auto-rows:100px!important;
gap:7px!important;
}
.travel-gallery .travel-photo,
.travel-gallery .travel-wide,
.travel-gallery .travel-tall{
height:100px!important;
min-height:100px!important;
max-height:100px!important;
}
}
@media(max-width:600px){
.travel-gallery{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-auto-rows:92px!important;
gap:6px!important;
}
.travel-gallery .travel-photo,
.travel-gallery .travel-wide,
.travel-gallery .travel-tall{
height:92px!important;
min-height:92px!important;
max-height:92px!important;
}
.travel-gallery .travel-heading{
font-size:.62rem!important;
}
.travel-gallery .travel-location{
font-size:.55rem!important;
}
}
/* =========================================================
FINAL TRAVEL GALLERY — EXTREME ORGANIZATION / LARGE GRID
This override targets the actual production stylesheet.
========================================================= */
.travel-grid > .travel-gallery-tools{
grid-column:1 / -1 !important;
width:100% !important;
margin:8px 0 0 !important;
}
.travel-grid > .travel-gallery{
grid-column:1 / -1 !important;
width:100% !important;
max-width:none !important;
margin:22px 0 0 !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:auto !important;
gap:24px !important;
align-items:stretch !important;
justify-items:stretch !important;
}
.travel-grid > .travel-gallery > .travel-photo,
.travel-grid > .travel-gallery > .travel-photo.travel-wide,
.travel-grid > .travel-gallery > .travel-photo.travel-tall{
grid-column:auto !important;
grid-row:auto !important;
width:100% !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
aspect-ratio:4 / 3 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
position:relative !important;
box-sizing:border-box !important;
border-radius:18px !important;
}
.travel-grid > .travel-gallery > .travel-photo img{
display:block !important;
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
aspect-ratio:auto !important;
object-fit:cover !important;
object-position:center !important;
margin:0 !important;
padding:0 !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-caption{
left:0 !important;
right:0 !important;
bottom:0 !important;
padding:58px 17px 15px !important;
box-sizing:border-box !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-heading{
display:block !important;
font-size:14px !important;
line-height:1.25 !important;
font-weight:800 !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-location{
font-size:11px !important;
line-height:1.2 !important;
margin-top:6px !important;
}
/* Give the gallery its own visual rhythm below the map/copy. */
.travel-grid > .travel-gallery{
padding-top:4px !important;
}
/* Tablet */
@media(max-width:900px){
.travel-grid > .travel-gallery{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:18px !important;
}
}
/* iPhone — keep photos large and organized in two columns. */
@media(max-width:760px){
.travel-grid > .travel-gallery-tools{
margin-top:0 !important;
}
.travel-grid > .travel-gallery{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:14px !important;
margin-top:18px !important;
}
.travel-grid > .travel-gallery > .travel-photo,
.travel-grid > .travel-gallery > .travel-photo.travel-wide,
.travel-grid > .travel-gallery > .travel-photo.travel-tall{
aspect-ratio:1 / 1 !important;
border-radius:14px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-caption{
padding:44px 9px 8px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-heading{
font-size:10px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-location{
font-size:8px !important;
margin-top:3px !important;
padding:4px 7px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-flag{
font-size:.9rem !important;
}
}
/* Very small phones: still two columns, with disciplined spacing. */
@media(max-width:380px){
.travel-grid > .travel-gallery{
gap:10px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-heading{
font-size:9px !important;
}
}
/* Keep hover treatment premium without changing card geometry. */
@media(hover:hover){
.travel-grid > .travel-gallery > .travel-photo:hover{
transform:translateY(-4px) !important;
}
}
/* =========================================================
FINAL TRAVEL PASS — LARGE, ORGANIZED PHOTOGRAPHY GRID
========================================================= */
.travel-grid > .travel-gallery-tools{
grid-column:1 / -1 !important;
margin:16px 0 4px !important;
}
.travel-grid > .travel-gallery{
grid-column:1 / -1 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:28px !important;
width:100% !important;
max-width:1240px !important;
margin:26px auto 0 !important;
padding:0 !important;
align-items:stretch !important;
}
.travel-grid > .travel-gallery > .travel-photo,
.travel-grid > .travel-gallery > .travel-photo.travel-wide,
.travel-grid > .travel-gallery > .travel-photo.travel-tall{
grid-column:auto !important;
grid-row:auto !important;
width:100% !important;
height:auto !important;
aspect-ratio:16 / 11 !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
position:relative !important;
box-sizing:border-box !important;
border-radius:20px !important;
}
.travel-grid > .travel-gallery > .travel-photo img{
width:100% !important;
height:100% !important;
min-width:100% !important;
min-height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-caption{
left:0 !important;
right:0 !important;
bottom:0 !important;
padding:72px 20px 18px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-heading{
font-size:16px !important;
line-height:1.25 !important;
font-weight:800 !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-location{
font-size:12px !important;
margin-top:6px !important;
}
/* Desktop: two genuinely large photos per row. */
@media (min-width:1001px){
.travel-grid > .travel-gallery > .travel-photo{
min-height:360px !important;
}
}
/* Tablet: still large and orderly. */
@media (max-width:1000px){
.travel-grid > .travel-gallery{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:20px !important;
}
.travel-grid > .travel-gallery > .travel-photo,
.travel-grid > .travel-gallery > .travel-photo.travel-wide,
.travel-grid > .travel-gallery > .travel-photo.travel-tall{
aspect-ratio:4 / 3 !important;
}
}
/* Phone: one large image per row so the photographs are actually readable. */
@media (max-width:600px){
.travel-grid > .travel-gallery{
grid-template-columns:1fr !important;
gap:18px !important;
margin-top:20px !important;
}
.travel-grid > .travel-gallery > .travel-photo,
.travel-grid > .travel-gallery > .travel-photo.travel-wide,
.travel-grid > .travel-gallery > .travel-photo.travel-tall{
aspect-ratio:4 / 3 !important;
border-radius:16px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-caption{
padding:64px 15px 13px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-heading{
font-size:14px !important;
}
.travel-grid > .travel-gallery > .travel-photo .travel-location{
font-size:10px !important;
}
}
/* New world-map title treatment */
.travel-world-map-heading h2{
letter-spacing:.045em !important;
}
/* =========================================================
TRAVEL CHAPTERS — destination-first photo experience
========================================================= */
.travel-chapters-intro{
grid-column:1 / -1;
margin:42px 0 8px;
padding-top:28px;
border-top:1px solid rgba(98,214,167,.16);
}
.travel-chapters-intro h2{margin:7px 0 5px !important;}
.travel-chapters-intro p{margin:0;color:rgba(255,255,255,.58);}
.travel-destination-grid{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
width:100%;
margin:10px auto 0;
}
.travel-destination-card{
appearance:none;
border:1px solid rgba(98,214,167,.18);
border-radius:20px;
padding:0;
overflow:hidden;
background:transparent;
color:inherit;
text-align:left;
cursor:pointer;
box-shadow:0 14px 34px rgba(0,0,0,.20);
transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.travel-destination-card:hover{
transform:translateY(-5px);
border-color:transparent;
box-shadow:0 22px 44px rgba(0,0,0,.30),0 0 24px rgba(98,214,167,.08);
}
.travel-destination-image{
aspect-ratio:16/10;
overflow:hidden;
background:transparent;505;
}
.travel-destination-image img{
width:100%;height:100%;display:block;object-fit:cover;
transition:transform .5s ease;
}
.travel-destination-card:hover .travel-destination-image img{transform:scale(1.045);}
.travel-destination-meta{
min-height:76px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:11px;
align-items:center;
padding:13px 15px;
}
.travel-destination-flag{font-size:23px;}
.travel-destination-meta strong{display:block;font-size:16px;line-height:1.15;}
.travel-destination-meta small{
display:block;margin-top:5px;font-size:10px;
color:rgba(255,255,255,.48);line-height:1.25;
}
.travel-destination-arrow{
font-size:20px;color:#62d6a7;transition:transform .25s ease;
}
.travel-destination-card:hover .travel-destination-arrow{transform:translateX(4px);}
.travel-chapters{grid-column:1 / -1;width:100%;}
.travel-chapter{
display:none;
margin-top:30px;
padding:clamp(18px,3vw,34px);
border:1px solid rgba(98,214,167,.22);
border-radius:24px;
background:transparent;
}
.travel-chapter.is-open{display:block;animation:travelChapterIn .35s ease both;}
@keyframes travelChapterIn{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
}
.travel-chapter-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
margin-bottom:22px;
}
.travel-chapter-kicker{
font-size:10px;letter-spacing:.16em;color:#62d6a7;font-weight:700;
}
.travel-chapter-head h3{
margin:8px 0 4px !important;
font-size:clamp(28px,4vw,48px) !important;
}
.travel-chapter-head p{margin:0;color:rgba(255,255,255,.55);}
.travel-chapter-close{
width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
background:transparent;color:white;font-size:25px;cursor:pointer;
}
.travel-chapter-gallery{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.travel-chapter-gallery img{
display:block;width:100%;aspect-ratio:16/11;object-fit:cover;
border-radius:16px;border:1px solid rgba(255,255,255,.08);
}
.travel-chapter-nav{
display:flex;justify-content:space-between;gap:10px;align-items:center;
margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
}
.travel-chapter-nav button{
appearance:none;border:1px solid rgba(98,214,167,.25);background:transparent;
color:rgba(255,255,255,.82);border-radius:999px;padding:10px 14px;cursor:pointer;
}
.travel-chapter-nav .travel-chapter-back{
color:#111;background:transparent;6a7;border-color:transparent;6a7;font-weight:700;
}
@media(max-width:900px){
.travel-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.travel-chapter-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
.travel-chapters-intro{margin-top:30px;}
.travel-destination-grid{grid-template-columns:1fr;gap:14px;}
.travel-destination-image{aspect-ratio:16/9;}
.travel-destination-meta{min-height:70px;}
.travel-chapter{padding:14px;border-radius:19px;}
.travel-chapter-gallery{grid-template-columns:1fr;gap:12px;}
.travel-chapter-gallery img{aspect-ratio:4/3;border-radius:13px;}
.travel-chapter-nav{flex-wrap:wrap;justify-content:center;}
.travel-chapter-nav button{font-size:11px;}
}
@media(prefers-reduced-motion:reduce){
.travel-destination-card,.travel-destination-image img{transition:none;}
.travel-chapter.is-open{animation:none;}
}
/* =========================================================
B.A. FUTURE GROWTH — TRAVEL ATLAS
========================================================= */
.atlas-hero{
display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;
max-width:1200px;margin:28px auto 24px;padding:34px;
border:1px solid rgba(98,214,167,.20);border-radius:28px;
background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.atlas-kicker{font-size:10px;letter-spacing:.18em;color:#62d6a7;font-weight:800}
.atlas-hero h2{margin:9px 0 8px!important;font-size:clamp(34px,6vw,72px)!important;line-height:.95!important;letter-spacing:.02em!important}
.atlas-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.60);font-size:16px;line-height:1.55}
.atlas-stat{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;align-content:center;border:1px solid rgba(98,214,167,.35);background:transparent;text-align:center}
.atlas-stat strong{font-size:36px;color:#62d6a7;line-height:1}
.atlas-stat span{font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.55);margin-top:7px}
.atlas-command{max-width:1200px;margin:0 auto 24px}
.atlas-search-wrap{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:0 14px;background:transparent;}
.atlas-search-wrap span{font-size:22px;color:#62d6a7}
.atlas-search-wrap input{width:100%;padding:14px 0;background:none;border:0;outline:0;color:white;font:inherit}
.atlas-filters{display:flex;gap:8px;overflow:auto;padding:12px 1px 4px;scrollbar-width:none}
.atlas-filter{white-space:nowrap;border:1px solid rgba(255,255,255,.10);background:transparent;color:rgba(255,255,255,.68);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:11px}
.atlas-filter.active,.atlas-filter:hover{background:transparent;6a7;color:#111;border-color:transparent;6a7}
.atlas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1200px;margin:0 auto}
.atlas-destination{min-width:0}
.atlas-card-button{display:block;width:100%;padding:0;border:1px solid rgba(98,214,167,.16);border-radius:20px;overflow:hidden;background:transparent;color:white;text-align:left;cursor:pointer;transition:.28s ease}
.atlas-card-button:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 18px 40px rgba(0,0,0,.30)}
.atlas-card-image{height:260px;position:relative;overflow:hidden;background:transparent;505}
.atlas-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.atlas-card-button:hover .atlas-card-image img{transform:scale(1.05)}
.atlas-card-index{position:absolute;top:12px;right:12px;padding:6px 8px;border-radius:8px;background:transparent;font-size:10px;color:#62d6a7}
.atlas-card-info{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.atlas-flag{font-size:18px}
.atlas-card-info h3{display:inline;margin-left:6px;font-size:17px}
.atlas-card-info p{margin:6px 0 0;color:rgba(255,255,255,.46);font-size:10px}
.atlas-arrow{font-size:22px;color:#62d6a7}
.atlas-empty{padding:50px;text-align:center;color:rgba(255,255,255,.5)}
.atlas-details{max-width:1200px;margin:28px auto 0}
.atlas-detail{display:none;padding:24px;border:1px solid rgba(98,214,167,.22);border-radius:24px;background:transparent;}
.atlas-detail.open{display:block}
.atlas-detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.atlas-detail-top span{font-size:9px;letter-spacing:.16em;color:#62d6a7}
.atlas-detail-top h2{margin:7px 0 4px!important;font-size:clamp(30px,5vw,54px)!important}
.atlas-detail-top p{margin:0;color:rgba(255,255,255,.5)}
.atlas-close,#atlasLightboxClose{border:1px solid rgba(255,255,255,.15);background:transparent;color:white;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer}
.atlas-detail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.atlas-photo{border:0;padding:0;background:none;cursor:pointer;overflow:hidden;border-radius:15px}
.atlas-photo img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover;transition:transform .3s}
.atlas-photo:hover img{transform:scale(1.025)}
.atlas-detail-nav{display:flex;justify-content:space-between;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.atlas-detail-nav button{border:1px solid rgba(98,214,167,.22);background:transparent;color:white;border-radius:999px;padding:9px 14px;cursor:pointer}
.atlas-detail-nav .atlas-back{background:transparent;6a7;color:#111;font-weight:700}
.atlas-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:transparent;padding:30px}
.atlas-lightbox.open{display:flex}
#atlasLightboxImage{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:12px}
#atlasLightboxClose{position:absolute;top:20px;right:20px}
#atlasLightboxCaption{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:12px}
@media(max-width:900px){.atlas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.atlas-card-image{height:230px}}
@media(max-width:600px){.atlas-hero{grid-template-columns:1fr;padding:22px;border-radius:22px}.atlas-stat{width:86px;height:86px}.atlas-stat strong{font-size:26px}.atlas-grid{grid-template-columns:1fr;gap:14px}.atlas-card-image{height:240px}.atlas-detail-gallery{grid-template-columns:1fr}.atlas-detail-nav{flex-wrap:wrap;justify-content:center}}
/* Spain destination card — ready for photos */
.atlas-no-photo{display:grid;place-items:center;background:
radial-gradient(circle at 50% 35%,rgba(98,214,167,.14),transparent 40%),
linear-gradient(145deg,#111,#050505);}
.atlas-placeholder{text-align:center;display:grid;gap:6px;justify-items:center;color:rgba(255,255,255,.7)}
.atlas-placeholder span{font-size:42px}
.atlas-placeholder strong{font-size:14px;letter-spacing:.16em;color:#62d6a7}
.atlas-placeholder small{font-size:9px;color:rgba(255,255,255,.45)}
.atlas-spain-placeholder{
min-height:340px;display:grid;place-items:center;align-content:center;gap:10px;
border:1px dashed rgba(98,214,167,.28);border-radius:16px;
background:radial-gradient(circle at 50% 45%,rgba(98,214,167,.08),transparent 45%);
text-align:center;color:rgba(255,255,255,.5);
}
.atlas-spain-placeholder div{font-size:64px}
.atlas-spain-placeholder strong{font-size:24px;letter-spacing:.18em;color:#62d6a7}
.atlas-spain-placeholder span{font-size:11px}
/* FINAL TRAVEL PHOTO FIT — no cropping, exact frame fit */
.atlas-card-image{
background:transparent;505 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.atlas-card-image img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
background:transparent;505 !important;
}
.atlas-photo{
background:transparent;505 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.atlas-photo img{
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
background:transparent;505 !important;
}
.atlas-detail-gallery{
align-items:stretch !important;
}
.atlas-detail-gallery .atlas-photo{
min-height:0 !important;
aspect-ratio:16 / 10 !important;
}
@media(max-width:600px){
.atlas-detail-gallery .atlas-photo{
aspect-ratio:4 / 3 !important;
}
}
/* =========================================================
ULTIMATE TRAVEL PHOTO SYSTEM
Full image visibility + exact frame + premium depth
========================================================= */
.atlas-card-image,
.atlas-photo{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
background:transparent;505 !important;
}
/* Soft adaptive background fills the frame without cropping the real photo. */
.atlas-photo-bg{
position:absolute !important;
inset:-18px !important;
z-index:0 !important;
display:block !important;
background-position:center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
filter:blur(18px) brightness(.38) saturate(.75) !important;
transform:scale(1.08) !important;
opacity:.78 !important;
}
/* Subtle glass/vignette layer. */
.atlas-photo::after,
.atlas-card-image::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
pointer-events:none !important;
background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.10) 70%,rgba(0,0,0,.34)) !important;
}
/* The actual photograph is always fully visible. */
.atlas-photo img,
.atlas-card-image img{
position:relative !important;
z-index:2 !important;
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center center !important;
background:transparent !important;
filter:contrast(1.03) saturate(1.03) !important;
}
/* Give every destination and detail photo a controlled cinematic frame. */
.atlas-card-image{
aspect-ratio:16 / 10 !important;
}
.atlas-photo{
aspect-ratio:16 / 10 !important;
border:1px solid rgba(98,214,167,.12) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.22) !important;
transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
.atlas-photo:hover{
transform:translateY(-3px) !important;
border-color:transparent;!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 38px rgba(0,0,0,.34),0 0 22px rgba(98,214,167,.06) !important;
}
.atlas-photo:hover img{
transform:scale(1.012) !important;
}
/* Destination cards: same premium frame system. */
.atlas-card-image{
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.atlas-card-image img{
transition:transform .35s ease !important;
}
.atlas-card-button:hover .atlas-card-image img{
transform:scale(1.012) !important;
}
/* Ensure placeholder Spain card is not affected by the photo system. */
.atlas-no-photo .atlas-placeholder{
position:relative !important;
z-index:3 !important;
}
/* Mobile keeps the entire photograph visible, never cropped. */
@media(max-width:600px){
.atlas-card-image{aspect-ratio:4 / 3 !important;}
.atlas-photo{aspect-ratio:4 / 3 !important;}
.atlas-photo-bg{filter:blur(14px) brightness(.34) saturate(.72) !important;}
}
@media(prefers-reduced-motion:reduce){
.atlas-photo,.atlas-card-image img{transition:none !important;}
.atlas-photo:hover{transform:none !important;}
}
/* =========================================================
1000X TRAVEL ORGANIZATION SYSTEM
========================================================= */
.atlas-hero{
margin-bottom:18px !important;
}
.atlas-organization-bar{
max-width:1200px;
margin:18px auto 14px;
padding:14px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
border:1px solid rgba(98,214,167,.16);
border-radius:16px;
background:transparent;
}
.atlas-organization-title span{
display:block;
font-size:9px;
letter-spacing:.18em;
color:#62d6a7;
font-weight:800;
}
.atlas-organization-title strong{
display:block;
margin-top:4px;
font-size:15px;
letter-spacing:.02em;
}
.atlas-view-controls{
display:flex;
gap:6px;
}
.atlas-view-btn{
border:1px solid rgba(255,255,255,.10);
background:transparent;
color:rgba(255,255,255,.55);
border-radius:999px;
padding:7px 11px;
font-size:9px;
letter-spacing:.08em;
cursor:pointer;
}
.atlas-view-btn.active,
.atlas-view-btn:hover{
background:transparent;6a7;
border-color:transparent;6a7;
color:#111;
}
.atlas-grid{
align-items:stretch !important;
}
.atlas-destination{
min-width:0 !important;
}
.atlas-card-button{
height:100% !important;
}
.atlas-card-image{
aspect-ratio:16 / 10 !important;
}
.atlas-card-info{
min-height:92px !important;
}
.atlas-details{
margin-top:26px !important;
}
.atlas-detail{
box-shadow:0 18px 55px rgba(0,0,0,.24);
}
.atlas-detail-gallery{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:18px !important;
}
.atlas-photo{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
aspect-ratio:16 / 10 !important;
}
.atlas-photo img{
object-fit:contain !important;
}
.atlas-detail-gallery .atlas-photo:nth-child(1){
grid-column:1 / -1;
aspect-ratio:21 / 10 !important;
}
.atlas-detail-gallery .atlas-photo:nth-child(n+2){
aspect-ratio:16 / 10 !important;
}
.atlas-detail-gallery .atlas-photo::before{
content:"";
position:absolute;
z-index:4;
top:10px;
left:10px;
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:8px;
background:transparent;
border:1px solid rgba(98,214,167,.25);
color:#62d6a7;
font-size:9px;
pointer-events:none;
}
.atlas-detail-gallery .atlas-photo{
position:relative !important;
}
.atlas-view-compact .atlas-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
.atlas-view-compact .atlas-card-image{
aspect-ratio:4 / 3 !important;
}
.atlas-view-compact .atlas-card-info{
min-height:64px !important;
padding:10px !important;
}
.atlas-view-compact .atlas-card-info h3{
font-size:13px !important;
}
.atlas-view-compact .atlas-card-info p{
font-size:8px !important;
}
@media(max-width:900px){
.atlas-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.atlas-view-compact .atlas-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
.atlas-organization-bar{
align-items:flex-start;
flex-direction:column;
}
.atlas-grid,
.atlas-view-compact .atlas-grid{
grid-template-columns:1fr !important;
}
.atlas-detail-gallery{
grid-template-columns:1fr !important;
gap:12px !important;
}
.atlas-detail-gallery .atlas-photo:nth-child(1),
.atlas-detail-gallery .atlas-photo:nth-child(n+2){
grid-column:auto !important;
aspect-ratio:4 / 3 !important;
}
}
/* =========================================================
CINEMATIC TRAVEL — MAP → FULLSCREEN STORY
========================================================= */
.cinematic-travel{position:relative}
.cin-title{margin:18px 0 28px}
.cin-title span{font-size:10px;letter-spacing:.2em;color:#62d6a7;font-weight:800}
.cin-title h2{margin:8px 0 0!important;font-size:clamp(28px,5vw,60px)!important;letter-spacing:.02em!important}
.cin-map-gateway{
display:grid;grid-template-columns:.7fr 1.3fr;gap:24px;align-items:stretch;
max-width:1200px;margin:0 auto;padding:22px;
border:1px solid rgba(98,214,167,.18);border-radius:26px;
background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.cin-map-copy{display:flex;flex-direction:column;justify-content:center;padding:18px}
.cin-map-copy>span{font-size:9px;letter-spacing:.18em;color:#62d6a7;font-weight:800}
.cin-map-copy h3{font-size:clamp(25px,4vw,42px);margin:9px 0 8px}
.cin-map-copy p{margin:0;color:rgba(255,255,255,.53);line-height:1.55}
.cin-map-visual{
position:relative;min-height:310px;border-radius:20px;overflow:hidden;
background:
radial-gradient(ellipse at 50% 45%,rgba(80,125,150,.16),transparent 50%),
radial-gradient(ellipse at 50% 50%,rgba(98,214,167,.05),transparent 65%),
#040609;
border:1px solid rgba(255,255,255,.06);
}
.cin-map-visual:before,.cin-map-visual:after{
content:"";position:absolute;inset:12% 7%;border:1px solid rgba(90,150,180,.10);border-radius:50%;transform:rotate(-12deg);
}
.cin-map-visual:after{inset:22% 14%;transform:rotate(18deg);border-color:transparent;}
.cin-map-lines{position:absolute;inset:0;background:linear-gradient(transparent 49.7%,rgba(255,255,255,.04) 50%,transparent 50.3%),linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.04) 50%,transparent 50.3%);opacity:.6}
.cin-map-country-list{position:absolute;inset:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:center}
.cin-map-country{
min-height:54px;border:1px solid rgba(98,214,167,.12);border-radius:12px;
background:transparent;backdrop-filter:blur(8px);color:white;cursor:pointer;
display:flex;align-items:center;gap:8px;padding:8px 10px;text-align:left;transition:.25s
}
.cin-map-country:hover{transform:translateY(-2px);border-color:transparent;background:transparent;}
.cin-map-country span{font-size:18px}.cin-map-country strong{font-size:10px;letter-spacing:.04em}
.cin-destinations{max-width:1200px;margin:26px auto 0}
.cin-destination{display:none}
.cin-destination.open{display:block;animation:cinIn .45s ease both}
@keyframes cinIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.cin-destination-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:20px 0}
.cin-kicker{font-size:9px;letter-spacing:.18em;color:#62d6a7;font-weight:800}
.cin-destination-head h3{font-size:clamp(34px,6vw,72px)!important;margin:7px 0 2px!important;line-height:.94!important}
.cin-destination-head p{margin:0;color:rgba(255,255,255,.52)}
.cin-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:transparent;color:white;font-size:24px;cursor:pointer}
.cin-hero-photo{
position:relative;width:100%;height:min(65vh,620px);min-height:360px;
overflow:hidden;border-radius:22px;border:1px solid rgba(98,214,167,.18);
background:transparent;505;display:flex;align-items:center;justify-content:center
}
.cin-hero-photo>img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.cin-hero-photo:before{content:"";position:absolute;inset:-20px;background:var(--cin-bg) center/cover;filter:blur(20px) brightness(.35);transform:scale(1.1)}
.cin-hero-empty{font-size:80px;position:relative;z-index:2}
.cin-hero-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72))}
.cin-hero-caption{position:absolute;z-index:4;bottom:24px;left:26px}
.cin-hero-caption span{display:block;font-size:9px;letter-spacing:.18em;color:#62d6a7}
.cin-hero-caption strong{display:block;font-size:clamp(20px,3vw,34px);margin-top:5px}
.cin-gallery-header{display:flex;justify-content:space-between;align-items:center;margin:24px 0 10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.cin-gallery-header span{font-size:10px;letter-spacing:.17em;font-weight:800}
.cin-gallery-header small{font-size:9px;color:#62d6a7}
.cin-horizontal-gallery{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 1px 12px;scrollbar-width:thin}
.cin-photo{position:relative;flex:0 0 min(72vw,420px);height:280px;padding:0;border:1px solid rgba(255,255,255,.10);border-radius:15px;overflow:hidden;background:transparent;505;cursor:pointer;scroll-snap-align:start}
.cin-photo img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:2}
.cin-photo:before{content:"";position:absolute;inset:-18px;background:var(--cin-bg) center/cover;filter:blur(16px) brightness(.32);transform:scale(1.1)}
.cin-photo-label{position:absolute;z-index:4;top:9px;left:9px;padding:5px 7px;border-radius:7px;background:transparent;color:#62d6a7;font-size:9px}
.cin-destination-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.cin-destination-nav button{border:1px solid rgba(98,214,167,.22);background:transparent;color:white;border-radius:999px;padding:9px 14px;cursor:pointer}
.cin-destination-nav .cin-map-return{background:transparent;6a7;color:#111;font-weight:700}
.cin-lightbox{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:transparent;padding:35px}
.cin-lightbox.open{display:flex}
.cin-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.cin-lightbox button{position:absolute;border:1px solid rgba(255,255,255,.15);background:transparent;color:white;border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:20px}
.cin-lightbox-close{top:18px;right:18px}.cin-lightbox-prev{left:18px}.cin-lightbox-next{right:18px}
.cin-lightbox-count{position:absolute;bottom:15px;color:rgba(255,255,255,.6);font-size:11px}
@media(max-width:900px){.cin-map-gateway{grid-template-columns:1fr}.cin-map-country-list{grid-template-columns:repeat(4,1fr)}.cin-map-country strong{font-size:9px}}
@media(max-width:600px){
.cin-map-gateway{padding:12px;border-radius:20px}.cin-map-visual{min-height:380px}.cin-map-country-list{grid-template-columns:repeat(2,1fr);align-content:center}
.cin-map-country{min-height:48px}.cin-hero-photo{height:58vh;min-height:300px;border-radius:17px}
.cin-hero-caption{left:16px;bottom:16px}.cin-photo{flex-basis:82vw;height:235px}
.cin-destination-nav{justify-content:center;flex-wrap:wrap}.cin-destination-nav button{font-size:10px}
}
/* =========================================================
INTERACTIVE TRAVEL GLOBE EXPERIENCE
========================================================= */
.globe-heading{margin:18px 0 28px}.globe-heading>span{font-size:10px;letter-spacing:.2em;color:#62d6a7;font-weight:800}.globe-heading h2{font-size:clamp(30px,5vw,62px)!important;margin:8px 0 5px!important}.globe-heading p{margin:0;color:rgba(255,255,255,.52)}
.globe-command-center{display:grid;grid-template-columns:.72fr 1.28fr;gap:26px;align-items:center;max-width:1200px;margin:auto;padding:28px;border:1px solid rgba(98,214,167,.18);border-radius:28px;background:radial-gradient(circle at 75% 45%,rgba(70,140,180,.07),transparent 45%),rgba(255,255,255,.015)}
.globe-copy{padding:12px}.globe-copy>span{font-size:9px;letter-spacing:.18em;color:#62d6a7;font-weight:800}.globe-copy h3{font-size:clamp(26px,4vw,46px);margin:9px 0}.globe-copy p{color:rgba(255,255,255,.53);line-height:1.55;margin:0;max-width:430px}
.globe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}.globe-stats div{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:transparent;}.globe-stats strong{display:block;color:#62d6a7;font-size:23px}.globe-stats small{font-size:7px;letter-spacing:.12em;color:rgba(255,255,255,.46)}
.globe-stage{position:relative;min-height:470px;display:grid;place-items:center;perspective:1100px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at center,rgba(60,125,155,.12),transparent 46%),#030507}
.globe-sphere{width:min(55vw,390px);height:min(55vw,390px);max-width:390px;max-height:390px;min-width:260px;min-height:260px;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 35% 28%,rgba(85,160,190,.35),rgba(5,35,47,.88) 45%,#02070a 75%);box-shadow:inset -28px -20px 55px rgba(0,0,0,.62),inset 10px 10px 35px rgba(90,180,210,.12),0 0 70px rgba(58,160,190,.12);animation:globeRotate 18s linear infinite}
@keyframes globeRotate{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.globe-grid-lines{position:absolute;inset:-10%;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 32px,rgba(125,205,225,.08) 33px 34px),repeating-linear-gradient(0deg,transparent 0 32px,rgba(125,205,225,.07) 33px 34px);transform:rotate(14deg) scale(1.1)}
.globe-land{position:absolute;background:linear-gradient(145deg,rgba(210,190,90,.5),rgba(60,120,75,.3));filter:blur(.2px);box-shadow:0 0 14px rgba(98,214,167,.08)}
.land-a{width:150px;height:110px;left:78px;top:75px;border-radius:52% 35% 58% 40%;transform:rotate(-16deg)}
.land-b{width:90px;height:130px;right:55px;top:110px;border-radius:45% 60% 35% 55%;transform:rotate(24deg)}
.land-c{width:120px;height:70px;left:140px;bottom:62px;border-radius:55% 30% 50% 35%;transform:rotate(8deg)}
.globe-orbit{position:absolute;border:1px solid rgba(98,214,167,.16);border-radius:50%;pointer-events:none}.orbit-a{width:88%;height:34%;transform:rotate(18deg)}.orbit-b{width:70%;height:76%;transform:rotate(-26deg);border-color:transparent;}.orbit-c{width:48%;height:90%;transform:rotate(52deg);border-color:transparent;}
.globe-pin{position:absolute;z-index:5;font-size:20px;cursor:pointer;filter:drop-shadow(0 0 7px rgba(98,214,167,.65));transition:transform .25s}.globe-pin:hover{transform:scale(1.3)}.gp1{left:48%;top:34%}.gp2{right:17%;top:31%}.gp3{left:24%;top:47%}.gp4{left:42%;top:30%}.gp5{left:39%;top:24%}.gp6{left:43%;top:25%}.gp7{left:24%;top:35%}.gp8{left:47%;top:20%}.gp9{left:30%;top:48%}.gp10{left:48%;top:27%}.gp11{left:53%;top:22%}.gp12{left:51%;top:31%}
.globe-index{max-width:1200px;margin:24px auto 0}.globe-index-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}.globe-index-head span{font-size:10px;letter-spacing:.16em;font-weight:800}.globe-index-head small{color:#62d6a7;font-size:9px}
.globe-country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.globe-country{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;background:transparent;color:white;display:flex;gap:8px;align-items:center;cursor:pointer;text-align:left;transition:.2s}.globe-country:hover{border-color:transparent;background:transparent;transform:translateY(-2px)}.globe-country span{font-size:17px}.globe-country strong{font-size:10px}
.globe-story{display:none;max-width:1200px;margin:28px auto 0}.globe-story.open{display:block;animation:globeIn .4s ease both}@keyframes globeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.globe-story-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.globe-story-head span{font-size:9px;letter-spacing:.18em;color:#62d6a7}.globe-story-head h3{font-size:clamp(34px,6vw,72px)!important;margin:7px 0 3px!important;line-height:.9!important}.globe-story-head p{margin:0;color:rgba(255,255,255,.5)}.globe-story-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:transparent;color:white;font-size:24px;cursor:pointer}
.globe-story-hero{height:min(64vh,620px);min-height:340px;position:relative;border-radius:22px;overflow:hidden;background:transparent;505;display:grid;place-items:center;border:1px solid rgba(98,214,167,.18)}.globe-story-hero-img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}.globe-story-hero:before{content:"";position:absolute;inset:-20px;background:var(--globe-bg) center/cover;filter:blur(22px) brightness(.35);transform:scale(1.1)}.globe-story-overlay{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72))}.globe-story-caption{position:absolute;z-index:4;left:24px;bottom:22px}.globe-story-caption span{display:block;color:#62d6a7;font-size:9px;letter-spacing:.16em}.globe-story-caption strong{display:block;font-size:clamp(20px,3vw,34px);margin-top:5px}.globe-story-empty{font-size:80px}.globe-story-strip{display:flex;gap:12px;overflow-x:auto;padding:14px 0 10px;scroll-snap-type:x mandatory}.globe-story-photo{position:relative;flex:0 0 min(70vw,380px);height:240px;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;background:transparent;505;cursor:pointer;scroll-snap-align:start}.globe-story-photo img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}.globe-story-photo:before{content:"";position:absolute;inset:-15px;background:var(--globe-bg) center/cover;filter:blur(15px) brightness(.3);transform:scale(1.1)}.globe-story-empty-small{padding:60px;text-align:center;color:rgba(255,255,255,.5);border:1px dashed rgba(98,214,167,.2);border-radius:14px}
.globe-story-nav{display:flex;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:15px}.globe-story-nav button{border:1px solid rgba(98,214,167,.2);background:transparent;color:white;border-radius:999px;padding:9px 14px;cursor:pointer}.globe-story-nav .globe-back{background:transparent;6a7;color:#111;font-weight:700}
.globe-lightbox{display:none;position:fixed;inset:0;z-index:10000;background:transparent;align-items:center;justify-content:center;padding:30px}.globe-lightbox.open{display:flex}.globe-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}.globe-lightbox button{position:absolute;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:white;cursor:pointer}.globe-lb-close{top:18px;right:18px}.globe-lb-prev{left:18px}.globe-lb-next{right:18px}.globe-lightbox small{position:absolute;bottom:14px;color:rgba(255,255,255,.55)}
@media(max-width:900px){.globe-command-center{grid-template-columns:1fr}.globe-country-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.globe-command-center{padding:12px;border-radius:20px}.globe-stage{min-height:400px}.globe-sphere{width:285px;height:285px;min-width:285px;min-height:285px}.globe-country-grid{grid-template-columns:repeat(2,1fr)}.globe-story-hero{height:56vh;min-height:300px;border-radius:17px}.globe-story-nav{justify-content:center;flex-wrap:wrap}.globe-story-photo{flex-basis:80vw;height:220px}}
@media(prefers-reduced-motion:reduce){.globe-sphere{animation:none}.globe-country,.globe-pin{transition:none}}
/* =========================================================
SIMPLE TRAVEL JOURNAL
========================================================= */
.simple-travel-journal{position:relative}
.journal-heading{margin:18px 0 5px}
.journal-heading>span{font-size:10px;letter-spacing:.2em;color:#62d6a7;font-weight:800}
.journal-heading h2{margin:8px 0 0!important;font-size:clamp(30px,5vw,58px)!important;line-height:1!important}
.journal-intro{margin:0 0 26px}
.journal-intro p{margin:0;color:rgba(255,255,255,.50);font-size:13px}
.journal-grid{
max-width:1180px;margin:0 auto;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
}
.journal-entry{min-width:0}
.journal-photo{
position:relative;width:100%;height:430px;overflow:hidden;border-radius:20px;
background:transparent;505;border:1px solid rgba(98,214,167,.18);
display:flex;align-items:center;justify-content:center;
box-shadow:0 16px 42px rgba(0,0,0,.25);
}
.journal-photo:before{
content:"";position:absolute;inset:-18px;
background:var(--journal-bg) center/cover no-repeat;
filter:blur(18px) brightness(.34);transform:scale(1.08);
}
.journal-photo img{
position:relative;z-index:2;width:100%;height:100%;
object-fit:contain;object-position:center;
display:block;
}
.journal-location{
position:absolute;z-index:4;left:14px;right:14px;bottom:14px;
display:flex;align-items:center;gap:9px;padding:10px 12px;
border-radius:12px;background:transparent;
border:1px solid rgba(98,214,167,.20);
backdrop-filter:blur(10px);
}
.journal-location span{font-size:20px}
.journal-location strong{font-size:13px}
.journal-location small{font-size:9px;color:rgba(255,255,255,.50);margin-left:auto}
.journal-placeholder{background:radial-gradient(circle at center,rgba(98,214,167,.08),#050505)}
.journal-placeholder>div:first-child{position:relative;z-index:2;text-align:center;display:grid;gap:7px}
.journal-placeholder>div:first-child span{font-size:55px}
.journal-placeholder>div:first-child strong{font-size:24px;letter-spacing:.15em;color:#62d6a7}
.journal-placeholder>div:first-child small{font-size:10px;color:rgba(255,255,255,.45)}
@media(max-width:700px){
.journal-grid{grid-template-columns:1fr;gap:18px}
.journal-photo{height:390px;border-radius:16px}
.journal-location{left:10px;right:10px;bottom:10px}
.journal-location small{margin-left:4px}
}
@media(prefers-reduced-motion:reduce){.journal-photo{scroll-behavior:auto}}
/* Contact menu item */
.contact-link{
display:flex;
align-items:center;
gap:.65rem;
}
.contact-icon{
width:1.1em;
display:inline-flex;
justify-content:center;
font-size:.9em;
}
.contact-section{
padding:72px 20px 96px;
}
.contact-card{
max-width:720px;
margin:0 auto;
text-align:center;
}
.contact-card h2{
margin:.25rem 0 1rem;
}
.contact-note{
opacity:.72;
font-size:.9rem;
}
/* External menu links — minimal addition */
.menu-external {
display: flex;
align-items: center;
gap: .55rem;
}
.menu-external span {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* External hamburger menu links */
.menu-link{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;cursor:pointer}
.menu-link span:first-child{display:inline-flex;width: 1em;justify-content:center;align-items:center;flex:0 0 1.15em}
/* B.A. Future Growth — advanced native hamburger drawer */
.menu-toggle{
width:50px !important;height:50px !important;
border:1px solid rgba(98,214,167,.42) !important;
background:transparent;!important;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 22px rgba(98,214,167,.08) !important;
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease !important;
}
.menu-toggle:hover{transform:scale(1.04);border-color:transparent;!important}
.menu-toggle span{width:20px !important;height:1.5px !important;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease !important}
.menu-backdrop{background:transparent;!important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important}
.drawer{
width:min(480px,92vw) !important;
background:
radial-gradient(circle at 85% 8%,rgba(98,214,167,.10),transparent 30%),
linear-gradient(160deg,#0c0c0c 0%,#050505 100%) !important;
border-left:1px solid rgba(98,214,167,.18) !important;
box-shadow:-30px 0 90px rgba(0,0,0,.55) !important;
transition:transform .62s cubic-bezier(.22,1,.36,1) !important;
}
.drawer-inner{
min-height:100%;box-sizing:border-box;
padding:34px 42px 30px !important;
justify-content:center;
}
.drawer-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:42px;
font-size:9px;letter-spacing:.22em;opacity:.48}
.drawer-status{color:var(--logo-accent);opacity:.9}
.drawer-label{font-size:.66rem !important;letter-spacing:.28em !important;opacity:.58;margin-bottom:18px !important}
.drawer-links{display:flex;flex-direction:column;gap:2px}
.drawer-links a,.contact-submenu a{
position:relative;display:flex;align-items:center;gap:14px;
text-decoration:none !important;color:inherit;
}
.drawer-links a{
padding:9px 0 !important;font-size:clamp(1.25rem,3.4vw,1.9rem) !important;
line-height:1 !important;letter-spacing:-.04em;
transition:transform .35s ease,opacity .25s ease !important;
}
.drawer-links a span{font-size:9px;letter-spacing:.12em;opacity:.34;width:20px}
.drawer-links a i,.contact-submenu a i{font-style:normal;font-size:13px;opacity:.35;margin-left:auto;transition:transform .3s ease,opacity .3s ease}
.drawer-links a:hover{transform:translateX(8px);opacity:1}
.drawer-links a:hover i,.contact-submenu a:hover i{transform:translate(4px,-4px);opacity:1}
.drawer-proverbs{
display:inline-block;width:max-content;margin-bottom:30px;
font-size:.62rem !important;letter-spacing:.2em;text-transform:uppercase;
opacity:.55;padding:7px 11px !important;border:1px solid rgba(98,214,167,.22);
border-radius:999px;background:transparent;
}
.drawer-proverbs:hover{opacity:1}
.drawer-divider{margin:28px 0 20px !important;background:transparent;!important}
.drawer-contact-label{font-size:.62rem;letter-spacing:.26em;color:var(--logo-accent);opacity:.8;margin-bottom:10px}
.contact-submenu{display:flex;flex-direction:column;gap:4px}
.contact-submenu a{font-size:.82rem !important;font-weight:600;padding:8px 0 !important;opacity:.72}
.contact-submenu a span{width:20px;text-align:center;opacity:.7}
.contact-submenu a:hover{opacity:1}
.drawer-footer{margin-top:34px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
font-size:8px;letter-spacing:.18em;opacity:.28}
@media(max-width:600px){
.drawer{width:100vw !important}
.drawer-inner{padding:28px 26px 24px !important}
.drawer-links a{font-size:18px !important}
}
/* Proverbs 16:9 — larger in hamburger menu */
.drawer-proverbs{
font-size:0.90rem !important;
letter-spacing:.20em !important;
padding:0 !important;
}
/* B.A. Future Growth — Gold Sweep
Unified premium gold accent system across navigation, headings, links,
dividers, labels, buttons and interactive states. */
:root{
--logo-accent:#62d6a7;
--logo-accent-light:#b7e85d;
--logo-accent-dim:rgba(98,214,167,.62);
--logo-soft:rgba(98,214,167,.18);
}
/* Global gold accents */
a:hover,
button:hover,
.nav-link:hover,
.category:hover,
.section-label,
.eyebrow,
.kicker,
.accent,
.gold,
.highlight{
color:var(--logo-accent) !important;
}
h1,h2,h3{
text-shadow:0 0 24px rgba(98,214,167,.06);
}
hr,
.divider,
.section-divider{
border-color:var(--logo-soft) !important;
}
/* Header / navigation */
header,
.site-header,
nav{
border-color:var(--logo-soft) !important;
}
.menu-toggle{
border-color:transparent;!important;
}
.menu-toggle:hover{
border-color:var(--logo-accent) !important;
box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 24px rgba(98,214,167,.16) !important;
}
/* Hamburger matches the smiley-logo gradient */
.menu-toggle span{
background:linear-gradient(90deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%) !important;
box-shadow:0 0 10px rgba(98,214,167,.24);
}
/* Menu gold sweep */
.drawer{
border-left-color:var(--logo-soft) !important;
}
.drawer-label,
.drawer-contact-label{
color:var(--logo-accent) !important;
}
.drawer-links a:hover{
color:var(--logo-accent) !important;
}
.drawer-links a:after,
.contact-submenu a:after{
background:var(--logo-accent) !important;
}
.drawer-divider{
background:var(--logo-soft) !important;
}
.drawer-proverbs{
border-color:transparent;!important;
color:var(--logo-accent) !important;
box-shadow:0 0 18px rgba(98,214,167,.05);
}
.drawer-status{
color:var(--logo-accent) !important;
}
.drawer-footer{
border-top-color:var(--logo-soft) !important;
}
/* Cards / content surfaces */
.card,
.panel,
.feature-card,
.stat-card,
.photo-card{
border-color:transparent;!important;
}
.card:hover,
.panel:hover,
.feature-card:hover,
.stat-card:hover,
.photo-card:hover{
border-color:transparent;!important;
box-shadow:0 12px 40px rgba(0,0,0,.28),0 0 26px rgba(98,214,167,.06);
}
/* Buttons / pills */
.btn,
.button,
.cta,
.tag,
.badge{
border-color:transparent;!important;
}
.btn:hover,
.button:hover,
.cta:hover{
background:transparent;!important;
border-color:var(--logo-accent) !important;
}
/* Inputs / focus */
input:focus,
textarea:focus,
select:focus{
border-color:var(--logo-accent) !important;
box-shadow:0 0 0 2px rgba(98,214,167,.10) !important;
}
/* Gold details without turning the whole site yellow */
::selection{
background:transparent;
color:#fff;
}
/* Preserve the smiley-logo hamburger icon */
.menu-toggle span{
background:linear-gradient(90deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%) !important;
box-shadow:0 0 10px rgba(98,214,167,.24);
}
/* Smiley-logo color system — hamburger menu */
.drawer-links a,
.contact-submenu a,
.drawer-proverbs{
background:linear-gradient(105deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
.drawer-links a span,
.drawer-links a i,
.contact-submenu a span,
.contact-submenu a i{
background:inherit;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
.drawer-links a:hover,
.contact-submenu a:hover,
.drawer-proverbs:hover{
opacity:1;
}
/* B.A. Future Growth — unified smiley-logo color system; gold removed */
:root{
--logo-gradient:linear-gradient(105deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%);
--logo-accent:#62d6a7;
--logo-soft:rgba(98,214,167,.45);
}
/* Headings and accent words now use the same color language as the smiley logo. */
h1,h2,h3,h4,h5,h6,
.eyebrow,.section-kicker,.feature-number,.closing-mark,
.text-link,.site-footer a,
.travel-heading,.travel-panel span,
.story-copy:after,
.drawer-label,.drawer-status,
.atlas-kicker,.atlas-stat strong,.atlas-search-wrap span,
.atlas-card-index,.atlas-arrow,.atlas-detail-top span,
.atlas-placeholder strong,
.drawer-links a,.contact-submenu a,.drawer-proverbs{
background:var(--logo-gradient) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* Keep supporting body copy clean while removing the old gold accent everywhere. */
.cta,
.btn,.button,.tag,.badge{
border-color:transparent;!important;
}
.cta:hover,.btn:hover,.button:hover{
background:transparent;!important;
border-color:transparent;6a7 !important;
}
/* Gold-like decorative rules, borders and glows become logo-green. */
.site-header,
.drawer,
.drawer-divider,
.drawer-footer,
.card,.panel,.feature-card,.stat-card,.photo-card{
border-color:transparent;!important;
}
input:focus,textarea:focus,select:focus{
border-color:transparent;6a7 !important;
box-shadow:0 0 0 2px rgba(98,214,167,.10) !important;
}
::selection{background:transparent;color:#fff;}
/* Re-apply the smiley gradient to the hamburger text after the palette reset. */
.drawer-links a,
.contact-submenu a,
.drawer-proverbs{
background:var(--logo-gradient) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
}
/* FINAL SITE FIXES */
/* Large hero B.A. FUTURE GROWTH heading matches smiley logo green */
.ba-logo-color-heading,
.ba-logo-color-heading * {
color:#62d6a7 !important;
-webkit-text-fill-color:#62d6a7 !important;
}
/* Hamburger matches the smiley-logo color */
.menu-toggle{
color:#62d6a7 !important;
border-color:transparent;!important;
background:transparent;!important;
box-shadow:0 8px 26px rgba(0,0,0,.32),0 0 20px rgba(98,214,167,.12) !important;
}
.menu-toggle span{
background:linear-gradient(90deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%) !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
-webkit-text-fill-color:initial !important;
color:transparent !important;
stroke:none !important;
fill:none !important;
}
.menu-toggle:hover{
border-color:transparent;!important;
background:transparent;!important;
}
/* =========================================================
B.A. FUTURE GROWTH — CINEMATIC INTRO V2
Heading and Harmony line enter as the opening introduction.
========================================================= */
@keyframes baIntroTitleCinematic{
0%{
opacity:0;
transform:translate3d(-120px,0,0);
filter:blur(8px);
}
65%{
opacity:1;
transform:translate3d(8px,0,0);
filter:blur(0);
}
100%{
opacity:1;
transform:translate3d(0,0,0);
filter:blur(0);
}
}
@keyframes baIntroHarmonyCinematic{
0%{
opacity:0;
transform:translate3d(120px,0,0);
filter:blur(6px);
}
65%{
opacity:1;
transform:translate3d(-6px,0,0);
filter:blur(0);
}
100%{
opacity:1;
transform:translate3d(0,0,0);
filter:blur(0);
}
}
/* Use both common hero heading selectors so the animation survives
minor markup variations in the current master site. */
.hero h1,
.hero #hero-title{
animation:baIntroTitleCinematic 1.25s cubic-bezier(.16,1,.3,1) .15s both !important;
will-change:transform,opacity,filter;
}
.hero .tagline,
.hero .subtitle{
animation:baIntroHarmonyCinematic 1.15s cubic-bezier(.16,1,.3,1) .65s both !important;
will-change:transform,opacity,filter;
}
/* Mobile: retain the same effect without excessive travel. */
@media (max-width:760px){
.hero h1,
.hero #hero-title{
animation-duration:1.05s !important;
}
.hero .tagline,
.hero .subtitle{
animation-duration:.95s !important;
animation-delay:.55s !important;
}
}
@media (prefers-reduced-motion:reduce){
.hero h1,
.hero #hero-title,
.hero .tagline,
.hero .subtitle{
animation:none !important;
opacity:1 !important;
transform:none !important;
filter:none !important;
}
}
/* B.A. Future Growth — remove gold splash screen.
The site opens directly into the homepage intro. */
.splash-screen,
#splash-screen,
.splash,
#splash,
.preloader,
#preloader,
.loader-screen,
#loader-screen,
.loading-screen,
#loading-screen {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* FINAL: no full-screen splash intro. Keep only the hero title/tagline slide. */
#ba-cinematic-intro {
display:none !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* =========================================================
B.A. FUTURE GROWTH — ADVANCED MOTION / RECONSTRUCTION v1
Visual-preserving motion layer
========================================================= */
:root{
--motion-ease:cubic-bezier(.16,1,.3,1);
--motion-fast:.28s;
--motion-slow:.8s;
--motion-depth:0px;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
/* Global scroll progress */
.ba-scroll-progress{
position:fixed;
left:0;
top:0;
width:100%;
height:2px;
z-index:3000;
pointer-events:none;
background:transparent;
}
.ba-scroll-progress i{
display:block;
width:0%;
height:100%;
transform-origin:left center;
background:var(--logo-accent);
box-shadow:0 0 12px var(--logo-soft);
}
/* Cinematic pointer atmosphere */
.ba-pointer-glow{
position:fixed;
width:280px;
height:280px;
left:0;
top:0;
border-radius:50%;
pointer-events:none;
z-index:0;
opacity:0;
transform:translate3d(-50%,-50%,0);
background:radial-gradient(circle, rgba(98,214,167,.075) 0%, rgba(98,214,167,.025) 34%, transparent 70%);
filter:blur(8px);
transition:opacity .35s ease;
will-change:transform,opacity;
}
/* Scroll-reactive reveal system */
.ba-motion{
--ba-y:28px;
--ba-scale:.985;
--ba-opacity:0;
opacity:var(--ba-opacity);
transform:translate3d(0,var(--ba-y),0) scale(var(--ba-scale));
transition:
opacity .9s var(--motion-ease),
transform 1s var(--motion-ease);
will-change:opacity,transform;
}
.ba-motion.ba-visible{
--ba-y:0px;
--ba-scale:1;
--ba-opacity:1;
}
.ba-motion.ba-delay-1{transition-delay:.08s}
.ba-motion.ba-delay-2{transition-delay:.16s}
.ba-motion.ba-delay-3{transition-delay:.24s}
.ba-motion.ba-delay-4{transition-delay:.32s}
/* Hero depth */
.hero-content{
will-change:transform,opacity;
}
.hero-glow{
will-change:transform;
transition:transform 1.2s var(--motion-ease);
}
.hero-logo img{
will-change:transform,filter;
transition:transform .5s var(--motion-ease), filter .5s var(--motion-ease);
}
.hero-logo img.ba-logo-reactive{
transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),0) scale(var(--logo-scale,1));
}
/* Headline becomes a moving focal point */
.hero h1,.hero .tagline,.hero .eyebrow{
will-change:transform,opacity;
}
/* Section depth without changing layout */
.section,
.feature,
.stock-thesis,
.closing{
position:relative;
isolation:isolate;
}
.section::before,
.feature::before,
.stock-thesis::before,
.closing::before{
content:"";
position:absolute;
inset:-8% -10%;
z-index:-1;
pointer-events:none;
opacity:0;
background:radial-gradient(circle at 50% 30%, rgba(98,214,167,.035), transparent 55%);
transform:translateY(35px) scale(.98);
transition:opacity 1s ease, transform 1.2s var(--motion-ease);
}
.ba-section-active::before{
opacity:1;
transform:translateY(0) scale(1);
}
/* Cards lift subtly when they become active */
.ba-motion-card{
will-change:transform;
transition:
transform .55s var(--motion-ease),
border-color .4s ease,
box-shadow .55s ease;
}
.ba-motion-card:hover{
transform:translate3d(0,-5px,0);
}
/* Advanced hamburger interaction */
.menu-toggle{
will-change:transform;
transition:
transform .45s var(--motion-ease),
border-color .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.menu-toggle:hover{
transform:translate3d(0,-2px,0) scale(1.04);
box-shadow:0 8px 30px rgba(98,214,167,.10);
}
.menu-toggle.open{
transform:rotate(90deg);
}
/* Drawer links enter with depth */
.drawer a{
opacity:0;
transform:translate3d(35px,0,0);
transition:
opacity .55s var(--motion-ease),
transform .55s var(--motion-ease),
color .25s ease;
}
.drawer.open a{opacity:1;transform:translate3d(0,0,0)}
.drawer.open a:nth-child(1){transition-delay:.06s}
.drawer.open a:nth-child(2){transition-delay:.11s}
.drawer.open a:nth-child(3){transition-delay:.16s}
.drawer.open a:nth-child(4){transition-delay:.21s}
.drawer.open a:nth-child(5){transition-delay:.26s}
.drawer.open a:nth-child(6){transition-delay:.31s}
.drawer.open a:nth-child(7){transition-delay:.36s}
.drawer a:hover{
color:var(--logo-accent);
transform:translate3d(7px,0,0);
}
/* Travel images get a deeper reveal */
.ba-travel-card,
.travel-photo{
will-change:transform;
}
/* Smooth focus states */
a,button{
-webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible{
outline:1px solid var(--logo-accent);
outline-offset:4px;
}
/* Reduced motion: preserve accessibility */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.ba-motion,
.ba-motion.ba-visible{
opacity:1!important;
transform:none!important;
transition:none!important;
}
.ba-pointer-glow{display:none!important}
.ba-scroll-progress i{transition:none!important}
.drawer a{opacity:1!important;transform:none!important;transition:none!important}
}
/* Mobile tuning */
@media (max-width:700px){
.ba-pointer-glow{display:none}
.ba-scroll-progress{height:1.5px}
.hero-content{will-change:opacity}
.ba-motion{--ba-y:18px}
}
/* =========================================================
HAMBURGER MENU — CENTERED NAVIGATION v2
Centers The Story / Stocks / Finance / Psychology / Travel
as a single visual group without moving the hamburger button.
========================================================= */
.drawer{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.drawer nav,
.drawer ul,
.drawer .drawer-links,
.drawer .menu-links{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
}
.drawer a{
width:auto !important;
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* =========================================================
FINAL POLISH — B.A. FUTURE GROWTH
Refined hierarchy, accessibility, spacing, and restraint.
========================================================= */
:root{
--ba-accent:#62d6a7;
--ba-accent-2:#d8ef55;
--ba-gradient:linear-gradient(105deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%);
--ba-hairline:rgba(98,214,167,.16);
--ba-hairline-strong:rgba(98,214,167,.30);
--ba-white-soft:rgba(255,255,255,.78);
}
html{
scroll-padding-top:88px;
background:transparent;
}
body{
min-width:320px;
background:
radial-gradient(circle at 50% -10%, rgba(98,214,167,.035), transparent 32%),
#000;
}
.skip-link{
position:fixed;
left:16px;
top:12px;
z-index:5000;
transform:translateY(-160%);
padding:10px 15px;
border:1px solid var(--ba-hairline-strong);
border-radius:999px;
background:transparent;808;
color:#fff;
font-size:.72rem;
font-weight:800;
letter-spacing:.08em;
text-decoration:none;
transition:transform .25s ease;
}
.skip-link:focus{transform:translateY(0);}
.site-header{
height:72px;
padding:0 clamp(18px,3.2vw,38px);
background:transparent;
border-bottom-color:rgba(255,255,255,.055);
}
.brand{
font-size:.78rem;
letter-spacing:.13em;
}
.menu-toggle{
width:44px;
height:44px;
border-color:var(--ba-hairline-strong)!important;
background:transparent;!important;
box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(98,214,167,.08)!important;
}
.menu-toggle span{
width:16px;
height:1.5px;
}
.menu-backdrop{
background:transparent;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.drawer{
width:min(410px,92vw);
background:
radial-gradient(circle at 50% 22%, rgba(98,214,167,.055), transparent 35%),
#070707;
border-left-color:var(--ba-hairline);
box-shadow:-24px 0 70px rgba(0,0,0,.42);
}
.drawer-inner{
width:min(100%,350px);
margin:auto;
padding:38px 24px;
}
.drawer-topline{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:28px;
font-size:.66rem;
font-weight:800;
letter-spacing:.16em;
color:rgba(255,255,255,.55);
}
.drawer-label{
margin:0 0 18px;
font-size:.62rem;
}
.drawer-links{
gap:1px;
}
.drawer-links a{
font-size:clamp(1.55rem,4vw,2.15rem)!important;
line-height:1.08;
padding:8px 0!important;
letter-spacing:-.025em;
}
.drawer-links a i,
.contact-submenu a i{
font-style:normal;
font-size:.55em;
margin-left:8px;
opacity:.65;
}
.drawer-proverbs{
margin:0 auto 28px!important;
font-size:.74rem!important;
letter-spacing:.12em;
font-weight:800;
}
.drawer-divider{
width:100%;
margin:24px 0 20px;
background:var(--ba-hairline);
}
.drawer-contact-label{
margin-bottom:9px;
font-size:.58rem;
letter-spacing:.2em;
font-weight:800;
color:rgba(255,255,255,.42);
}
.contact-submenu{
display:flex;
flex-direction:column;
gap:3px;
}
.contact-submenu a{
font-size:.82rem!important;
padding:6px 0!important;
opacity:.84;
}
.drawer-footer{
margin-top:26px;
font-size:.56rem;
letter-spacing:.18em;
line-height:1.7;
color:rgba(255,255,255,.35);
}
.hero{
min-height:100svh;
padding:108px 20px 78px;
isolation:isolate;
}
.hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 35%,rgba(0,0,0,.18));
z-index:0;
}
.hero-glow{
width:min(820px,110vw);
height:min(820px,110vw);
opacity:.9;
}
.hero-content{
width:min(100%,1050px);
}
.hero-logo{margin-bottom:20px;}
.hero-logo img{
width:min(220px,42vw);
filter:drop-shadow(0 0 26px rgba(98,214,167,.18));
}
.eyebrow{
margin-bottom:17px;
font-size:.62rem;
letter-spacing:.30em;
}
.hero h1{
font-size:clamp(3rem,7.8vw,7.4rem);
letter-spacing:-.06em;
}
.tagline{
max-width:720px;
margin:22px auto 30px;
font-size:clamp(1rem,1.8vw,1.32rem);
letter-spacing:-.012em;
}
.cta{
min-height:52px;
padding:0 25px;
border-color:transparent;
background:transparent;
font-size:.67rem;
}
.cta:hover{
background:transparent;!important;
box-shadow:0 10px 34px rgba(98,214,167,.09);
}
.scroll-cue{
bottom:24px;
width:24px;
height:38px;
border-color:transparent;
}
.section{
width:min(1120px,calc(100% - 44px));
padding:120px 0;
}
.section-kicker{
margin-bottom:32px;
font-size:.61rem;
letter-spacing:.25em;
}
.section-grid{
gap:64px;
padding-top:32px;
}
h2{
letter-spacing:-.06em;
}
.lead{
font-size:clamp(1.18rem,2.15vw,1.65rem);
}
.text-link{
margin-top:28px;
font-size:.78rem;
}
.psychology-advanced{
gap:clamp(36px,6vw,82px)!important;
}
.psychology-visual-panel{
transform:translateZ(0);
}
.psychology-content-panel h2{
line-height:.94;
}
.psychology-pillar{
border-color:var(--ba-hairline)!important;
background:transparent;!important;
}
.ba-travel-head{
align-items:end;
}
.ba-travel-head h2{
letter-spacing:-.06em;
}
.ba-travel-tools{
border-top-color:var(--ba-hairline)!important;
border-bottom-color:var(--ba-hairline)!important;
}
.ba-travel-card{
border-color:var(--ba-hairline)!important;
}
.ba-travel-card:hover{
border-color:var(--ba-hairline-strong)!important;
box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.ba-travel-count{
font-variant-numeric:tabular-nums;
}
.story-wrap{
align-items:start;
gap:clamp(40px,7vw,100px);
}
.story-copy{
max-width:610px;
}
.about-me-copy{
max-width:820px;
margin-top:72px!important;
padding-top:28px;
border-top:1px solid var(--ba-hairline);
}
.stocks-section{
padding:110px 0 54px!important;
}
.stocks-inner{
width:min(1120px,calc(100% - 44px))!important;
}
.stock-thesis{
width:min(1120px,calc(100% - 44px))!important;
margin-left:auto!important;
margin-right:auto!important;
padding:26px 0 70px!important;
}
.stock-thesis-card{
border-color:var(--ba-hairline)!important;
background:
radial-gradient(circle at 88% 8%,rgba(98,214,167,.045),transparent 30%),
linear-gradient(145deg,#0a0a0a,#030303)!important;
box-shadow:0 18px 60px rgba(0,0,0,.18);
}
.tesla-wordmark{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:0 12px;
border:1px solid var(--ba-hairline);
border-radius:8px;
font-size:.76rem;
font-weight:800;
letter-spacing:.18em;
color:#fff;
opacity:.9;
}
.stock-thesis-card h2{
max-width:880px;
}
.closing{
min-height:72vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
border-top:1px solid rgba(255,255,255,.045);
}
.closing h2{
font-size:clamp(3rem,7vw,6.6rem);
}
.closing p{
max-width:620px;
font-size:clamp(1rem,1.7vw,1.2rem);
color:var(--ba-white-soft);
margin:22px 0 30px;
}
.site-footer{
border-top:1px solid rgba(255,255,255,.055)!important;
padding:24px 22px 30px!important;
}
.footer-inner{
width:min(1120px,100%);
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
color:rgba(255,255,255,.38);
font-size:.58rem;
letter-spacing:.12em;
text-transform:uppercase;
}
.footer-inner span:last-child{
text-align:right;
}
.ba-scroll-progress i{
background:var(--ba-gradient);
box-shadow:0 0 14px rgba(98,214,167,.25);
}
.ba-pointer-glow{
background:radial-gradient(circle,rgba(98,214,167,.055),rgba(98,214,167,.018) 34%,transparent 70%);
}
@media (max-width:760px){
.site-header{height:66px;}
.brand{font-size:.66rem;letter-spacing:.11em;}
.menu-toggle{width:42px;height:42px;}
.hero{padding-top:94px;}
.hero-logo img{width:min(190px,48vw);}
.hero h1{
font-size:clamp(2.7rem,12vw,4.3rem);
line-height:.94;
}
.tagline{
max-width:330px;
margin-top:18px;
line-height:1.45;
}
.cta{min-height:50px;padding:0 22px;}
.section{
width:min(100% - 34px,620px);
padding:88px 0;
}
.section-kicker{margin-bottom:24px;}
.section-grid{
grid-template-columns:1fr!important;
gap:34px;
}
.story-wrap{
grid-template-columns:1fr!important;
gap:34px!important;
}
.about-me-copy{margin-top:46px!important;}
.stocks-section{
padding:84px 0 36px!important;
}
.stocks-inner,
.stock-thesis{
width:min(100% - 34px,620px)!important;
}
.stock-thesis{padding-bottom:46px!important;}
.stock-thesis-card{padding:30px 24px!important;}
.closing{
min-height:68vh;
padding-top:88px!important;
padding-bottom:88px!important;
}
.footer-inner{
flex-direction:column;
align-items:flex-start;
font-size:.54rem;
}
.footer-inner span:last-child{text-align:left;}
.drawer{width:min(390px,100vw);}
.drawer-inner{padding:28px 22px;}
.drawer-links a{font-size:18px!important;}
}
@media (prefers-reduced-motion:reduce){
.skip-link{transition:none;}
}
/* Final polish: remove right-side arrow/chevron indicators from hamburger menu links */
.drawer-links a i,.contact-submenu a i{display:none !important;}
.drawer-links a:hover i,.contact-submenu a:hover i{display:none !important;transform:none !important;}
/* Psychology team description */
.psychology-team-description {
margin: 10px 0 0;
max-width: 720px;
font-size: clamp(0.9rem, 1.25vw, 1.02rem);
line-height: 1.7;
letter-spacing: 0.01em;
opacity: 0.82;
}
/* Psychology • Strategy • Design definition */
.psychology-definition {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.12);
max-width: 720px;
}
.psychology-definition-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.4;
opacity: 0.9;
}
.psychology-definition p {
margin: 7px 0 0;
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.78;
}
/* Psychology Strategy Design Team */
.psychology-team-role {
margin: 18px 0 4px;
padding: 14px 0 2px;
border-top: 1px solid rgba(255,255,255,0.14);
max-width: 720px;
}
.psychology-team-role-title {
font-size: clamp(0.68rem, 1vw, 0.82rem);
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.4;
color: rgba(255,255,255,0.92);
}
.psychology-team-role p {
margin: 7px 0 0;
max-width: 720px;
font-size: clamp(0.84rem, 1.1vw, 0.96rem);
line-height: 1.65;
letter-spacing: 0.01em;
opacity: 0.72;
}
/* Story section — barely-visible brand watermark */
.story{
position:relative;
overflow:hidden;
}
.story::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:min(720px,82vw);
aspect-ratio:1832 / 2000;
transform:translate(-50%,-50%);
background:url("assets/logo-blended.png") center/contain no-repeat;
opacity:.10;
filter:blur(.15px);
pointer-events:none;
z-index:0;
}
.story > *{
position:relative;
z-index:1;
}
@media(max-width:760px){
.story::before{
width:min(500px,88vw);
opacity:.055;
}
}
/* Final refinement — clean Proverbs 16:9 treatment */
.drawer-proverbs{
display:block !important;
width:auto !important;
max-width:max-content;
margin:0 0 24px 0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:rgba(255,255,255,.62) !important;
font-size:.72rem !important;
font-weight:600 !important;
letter-spacing:.14em !important;
line-height:1.4 !important;
text-transform:none !important;
opacity:1 !important;
text-decoration:none !important;
text-shadow:none !important;
}
.drawer-proverbs:hover{
color:var(--logo-accent) !important;
background:transparent !important;
box-shadow:none !important;
}
/* Final Proverbs refinement */
.drawer-proverbs{
color:#d4af37 !important;
opacity:1 !important;
background:none !important;
border:0 !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
text-shadow:none !important;
}
.drawer-proverbs:hover{color:#e6c65a !important;}
.drawer-footer{color:#d4af37 !important;opacity:1 !important;}
.proverbs-reference{color:#d4af37 !important;}
/* v42 — Colorful hamburger-only watermark */
.drawer{overflow:hidden}
.drawer::before{
content:"";
position:absolute;
inset:0;
background-image:url('assets/logo-blended.png');
background-repeat:no-repeat;
background-position:center center;
background-size:min(120vw,620px) auto;
opacity:.20;
pointer-events:none;
z-index:0;
filter:none;
}
.drawer-inner{position:relative;z-index:1}
/* v21 — Hamburger drawer should feel seamless/full-bleed with no visible corners */
.drawer{
top:0 !important;
right:0 !important;
bottom:0 !important;
border-radius:0 !important;
clip-path:none !important;
}
/* v22 — Remove green highlight around hamburger button */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible{
border-color:transparent;!important;
background:transparent;!important;
box-shadow:0 8px 24px rgba(0,0,0,.32) !important;
outline:none !important;
}
/* v26 — Finance: My Investment Philosophy */
.finance-philosophy {
margin-top: 2.25rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(255,255,255,.12);
max-width: 760px;
}
.finance-philosophy-title {
margin: 0 0 .7rem;
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #d6b45b;
font-weight: 600;
}
.finance-philosophy p:last-child {
margin-bottom: 0;
}
/* v29 — Finance headings match the smiley logo color */
#finance .section-kicker,
#finance .lead,
#finance .finance-philosophy-title,
#finance h2,
#finance h3,
#finance h4 {
color: var(--logo-accent, #62d6a7) !important;
-webkit-text-fill-color: var(--logo-accent, #62d6a7) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
}
/* v30 — Finance section uses the full dripping-smiley logo palette */
#finance .section-kicker,
#finance .lead,
#finance .finance-philosophy-title,
#finance h2,
#finance h3,
#finance h4 {
background: var(--logo-gradient, linear-gradient(105deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow: none !important;
}
#finance .section-intro,
#finance .finance-philosophy {
border-color: transparent;
}
#finance .section-intro:before,
#finance .section:before {
background: var(--logo-gradient, linear-gradient(105deg,#2fb8c4 0%,#62d6a7 45%,#d8ef55 72%,#f2e94e 100%)) !important;
}
#finance .finance-philosophy {
border-top-color: rgba(98,214,167,.28) !important;
}
/* v31 — Finance typography refinement: keep wording unchanged */
#finance .section-kicker{
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .28em !important;
line-height: 1.2 !important;
}
#finance .lead{
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: clamp(1.5rem, 3vw, 2.15rem) !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
line-height: 1.16 !important;
max-width: 680px !important;
}
#finance .finance-philosophy-title{
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: .74rem !important;
font-weight: 750 !important;
letter-spacing: .2em !important;
line-height: 1.3 !important;
}
#finance .finance-philosophy p:last-child,
#finance > div > div > p:not(.lead):not(.finance-philosophy-title){
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: clamp(1rem, 1.2vw, 1.08rem) !important;
line-height: 1.82 !important;
letter-spacing: .005em !important;
}
@media (max-width:600px){
#finance .lead{font-size:1.45rem !important;line-height:1.2 !important;}
#finance .finance-philosophy-title{letter-spacing:.16em !important;}
#finance .finance-philosophy p:last-child{font-size:1rem !important;line-height:1.75 !important;}
}
/* v33 — Finance typography: premium editorial + modern finance */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
#finance .section-kicker{
font-family:"DM Sans", "Manrope", sans-serif !important;
font-size:.68rem !important;
font-weight:600 !important;
letter-spacing:.34em !important;
line-height:1.25 !important;
}
#finance .lead{
font-family:"Cormorant Garamond", Georgia, serif !important;
font-size:clamp(2.15rem,4.2vw,3.45rem) !important;
font-weight:600 !important;
letter-spacing:-.018em !important;
line-height:1.02 !important;
max-width:760px !important;
text-wrap:balance;
}
#finance > div > div > p:not(.lead):not(.finance-philosophy-title){
font-family:"Manrope", system-ui, sans-serif !important;
font-size:clamp(1rem,1.15vw,1.08rem) !important;
font-weight:400 !important;
line-height:1.9 !important;
letter-spacing:.002em !important;
max-width:780px !important;
}
#finance .finance-philosophy{
max-width:780px !important;
margin-top:2.65rem !important;
padding-top:1.9rem !important;
position:relative;
}
#finance .finance-philosophy-title{
font-family:"Space Grotesk","DM Sans",sans-serif !important;
font-size:.72rem !important;
font-weight:600 !important;
letter-spacing:.24em !important;
line-height:1.35 !important;
text-transform:uppercase !important;
margin-bottom:.85rem !important;
}
#finance .finance-philosophy-title::after{
content:"";
display:block;
width:34px;
height:1px;
margin-top:.7rem;
background:currentColor;
opacity:.55;
}
#finance .finance-philosophy p:last-child{
font-family:"Manrope",system-ui,sans-serif !important;
font-size:clamp(.98rem,1.1vw,1.06rem) !important;
line-height:1.88 !important;
letter-spacing:.003em !important;
max-width:760px !important;
}
@media (max-width:600px){
#finance .lead{
font-size:clamp(2rem,10vw,2.65rem) !important;
line-height:1.04 !important;
}
#finance .section-kicker{
font-size:.64rem !important;
letter-spacing:.27em !important;
}
#finance .finance-philosophy-title{
letter-spacing:.18em !important;
}
}
/* v34 — More breathing room in the hamburger navigation */
@media (max-width: 900px){
.menu-panel a,
.hamburger-menu a,
nav.menu a,
.mobile-menu a,
.nav-menu a{
padding-top: 0.9rem !important;
padding-bottom: 0.9rem !important;
margin-bottom: 0.35rem !important;
line-height: 1.35 !important;
}
.menu-panel,
.hamburger-menu,
.mobile-menu{
padding-top: 1.15rem !important;
padding-bottom: 1.15rem !important;
}
}
/* v35 — Advanced Hamburger Cover / Editorial Glass Navigation
Visual-only refinement. Existing navigation/content unchanged. */
.menu-backdrop{
background:
radial-gradient(circle at 80% 20%, rgba(98,214,167,.06), transparent 24%),
rgba(0,0,0,.78) !important;
backdrop-filter:blur(16px) saturate(115%) !important;
-webkit-backdrop-filter:blur(16px) saturate(115%) !important;
}
.drawer{
width:min(520px,94vw) !important;
background:
linear-gradient(135deg,rgba(255,255,255,.025),transparent 24%),
radial-gradient(circle at 50% 30%,rgba(98,214,167,.075),transparent 38%),
linear-gradient(180deg,#090909 0%,#030303 100%) !important;
border-left:1px solid rgba(255,255,255,.11) !important;
box-shadow:-40px 0 110px rgba(0,0,0,.65),inset 1px 0 rgba(98,214,167,.08) !important;
}
.drawer::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.22;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
background-size:46px 46px;
mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);
}
.drawer::before{
opacity:.035 !important;
background-size:min(105vw,560px) auto !important;
filter:grayscale(1) brightness(1.8) contrast(1.05) !important;
}
.drawer-inner{
width:min(100%,390px) !important;
padding:34px 22px !important;
position:relative;
z-index:2;
}
.drawer-inner::before{
content:"B.A. FUTURE GROWTH";
display:block;
margin-bottom:9px;
color:rgba(255,255,255,.34);
font-size:.54rem;
font-weight:800;
letter-spacing:.28em;
text-align:left;
}
.drawer-inner::after{
content:"MENU / 01";
display:block;
margin-bottom:30px;
color:rgba(98,214,167,.62);
font-size:.58rem;
font-weight:800;
letter-spacing:.25em;
text-align:left;
}
.drawer-proverbs{
position:relative;
display:inline-flex !important;
align-items:center;
gap:12px;
margin-bottom:31px !important;
padding:9px 0 !important;
color:rgba(255,255,255,.48) !important;
font-size:.62rem !important;
letter-spacing:.18em !important;
transition:color .35s ease,transform .35s ease !important;
}
.drawer-proverbs::before{
content:"";
width:28px;
height:1px;
background:linear-gradient(90deg,var(--logo-accent),transparent);
box-shadow:0 0 10px rgba(98,214,167,.25);
}
.drawer-proverbs:hover{color:var(--logo-accent)!important;transform:translateX(5px)}
.drawer-links{
position:relative;
gap:0 !important;
width:100% !important;
}
.drawer-links::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:1px;
background:linear-gradient(to bottom,transparent,rgba(98,214,167,.35),transparent);
}
.drawer-links a{
position:relative;
display:flex !important;
align-items:center;
justify-content:center;
width:100% !important;
min-height:58px;
padding:12px 24px !important;
color:rgba(255,255,255,.9) !important;
font-size:clamp(1.42rem,3.8vw,2rem) !important;
font-weight:700 !important;
letter-spacing:-.035em;
transition:color .35s ease,transform .45s cubic-bezier(.22,1,.36,1),text-shadow .35s ease !important;
}
.drawer-links a::before{
content:"";
position:absolute;
left:0;
top:50%;
width:0;
height:1px;
background:var(--logo-accent);
box-shadow:0 0 14px rgba(98,214,167,.65);
transition:width .45s cubic-bezier(.22,1,.36,1);
}
.drawer-links a::after{
content:"↗";
position:absolute;
right:3px;
top:50%;
transform:translateY(-50%) translateX(-8px);
opacity:0;
color:var(--logo-accent);
font-size:.65rem;
font-weight:800;
transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.drawer-links a:hover,
.drawer-links a:focus-visible{
color:#fff !important;
transform:translateX(8px);
text-shadow:0 0 24px rgba(98,214,167,.16);
}
.drawer-links a:hover::before,
.drawer-links a:focus-visible::before{width:22px}
.drawer-links a:hover::after,
.drawer-links a:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
.drawer-divider{
position:relative;
width:100% !important;
margin:31px 0 24px !important;
background:linear-gradient(90deg,transparent,rgba(98,214,167,.25),rgba(255,255,255,.07),transparent) !important;
}
.drawer-divider::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:5px;
height:5px;
border:1px solid rgba(98,214,167,.55);
transform:translate(-50%,-50%) rotate(45deg);
background:transparent;707;
}
.drawer-contact-label{
color:rgba(255,255,255,.35) !important;
letter-spacing:.27em !important;
}
.contact-submenu{
gap:1px !important;
}
.contact-submenu a{
position:relative;
justify-content:center;
padding:9px 0 !important;
color:rgba(255,255,255,.58) !important;
transition:color .3s ease,transform .3s ease !important;
}
.contact-submenu a:hover{color:#fff !important;transform:translateX(4px)}
.contact-submenu a span{color:var(--logo-accent);margin-right:4px}
.drawer-footer{
margin-top:30px !important;
color:rgba(255,255,255,.25) !important;
letter-spacing:.28em !important;
}
/* Advanced open-state treatment for the trigger itself. */
.menu-toggle{
position:relative;
width:46px !important;
height:46px !important;
overflow:hidden;
border:1px solid rgba(255,255,255,.16) !important;
background:transparent;!important;
box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(98,214,167,.035) !important;
transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease !important;
}
.menu-toggle::before{
content:"";
position:absolute;
inset:5px;
border:1px solid rgba(98,214,167,.14);
border-radius:50%;
transform:rotate(0deg);
transition:transform .8s cubic-bezier(.22,1,.36,1),border-color .35s ease;
}
.menu-toggle::after{
content:"";
position:absolute;
width:3px;
height:3px;
border-radius:50%;
top:6px;
left:50%;
transform:translateX(-50%);
background:var(--logo-accent);
box-shadow:0 0 8px rgba(98,214,167,.8);
opacity:.75;
}
.menu-toggle span{position:relative;z-index:2;width:17px !important}
.menu-toggle:hover{transform:rotate(3deg) scale(1.045) !important;border-color:transparent;!important;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 22px rgba(98,214,167,.08) !important}
.menu-toggle:hover::before{transform:rotate(360deg);border-color:transparent;}
.menu-toggle.open{transform:rotate(-3deg) !important}
.menu-toggle.open::before{transform:rotate(90deg);border-color:transparent;}
@media(max-width:760px){
.drawer{width:100vw !important}
.drawer-inner{width:min(100%,380px) !important;padding:30px 22px !important}
.drawer-links a{min-height:54px;font-size:18px !important}
}
/* v45 — Full logo framing; no cover redesign */
.hero-logo img{
width:min(205px,39vw) !important;
height:auto !important;
object-fit:contain !important;
}
@media (max-width:700px){
.hero-logo img{
width:min(178px,50vw) !important;
}
}
/* v45 — Hamburger watermark: slightly smaller so the headphone arc has clear space */
.drawer::before{
background-size:min(104vw,570px) auto !important;
background-position:center center !important;
opacity:.20 !important;
}
/* v46 — Minimal monochrome hamburger watermark */
.drawer::before{
opacity:.20 !important;
filter:grayscale(1) brightness(1.85) contrast(.9) !important;
}
/* v47 — Softer watermark for sharper menu lettering */
.drawer::before{
opacity:.16 !important;
filter:grayscale(1) brightness(1.7) contrast(.85) !important;
}
/* v48 — Subtle premium hamburger watermark */
.drawer::before{
opacity:.10 !important;
filter:grayscale(1) brightness(1.7) contrast(.85) !important;
}
/* v49 — Final subtle hamburger watermark */
.drawer::before{
opacity:.06 !important;
filter:grayscale(1) brightness(1.7) contrast(.85) !important;
}
/* v54 — Full black hamburger background */
.drawer{
background:transparent;!important;
}
/* v55 — Clean hamburger header: remove left gray brand and small green line */
.drawer .drawer-brand,
.drawer .drawer-title,
.drawer .drawer-kicker,
.drawer .menu-brand,
.drawer .menu-title,
.drawer .drawer-topline{
display:none !important;
}
.drawer .drawer-header::before,
.drawer .drawer-header::after{
display:none !important;
content:none !important;
background:none !important;
border:0 !important;
}
/* v56 — Remove all green highlight/separator accents from hamburger */
.drawer .menu-section,
.drawer .menu-item,
.drawer nav a{
border-color:transparent !important;
}
.drawer .menu-section::before,
.drawer .menu-section::after,
.drawer .menu-item::before,
.drawer .menu-item::after,
.drawer nav a::before,
.drawer nav a::after{
display:none !important;
content:none !important;
background:none !important;
border:0 !important;
box-shadow:none !important;
}
.drawer .active,
.drawer .is-active,
.drawer nav a:hover{
border-color:transparent !important;
box-shadow:none !important;
}
/* v57 — Remove the actual green drawer accents */
.drawer .drawer-proverbs::before,
.drawer .drawer-links::before,
.drawer .drawer-links a::before,
.drawer .drawer-links a::after,
.drawer .drawer-divider,
.drawer .drawer-divider::after{
display:none !important;
content:none !important;
width:0 !important;
height:0 !important;
background:none !important;
border:0 !important;
box-shadow:none !important;
opacity:0 !important;
}
.drawer .drawer-links a:hover::before,
.drawer .drawer-links a:focus-visible::before,
.drawer .drawer-links a:hover::after,
.drawer .drawer-links a:focus-visible::after{
display:none !important;
width:0 !important;
opacity:0 !important;
transform:none !important;
}
/* v58 — Proverbs 16:9 gold */
.drawer .proverbs,
.drawer .drawer-proverbs,
.drawer .verse,
.drawer [class*="proverb"],
.drawer [class*="verse"]{
color:#D4AF37 !important;
}
/* v59 — Force Proverbs 16:9 to gold in hamburger menu */
.drawer p:has(+ *),
.drawer .proverbs,
.drawer .drawer-proverbs,
.drawer [class*="proverb"],
.drawer [id*="proverb"],
.drawer .verse,
.drawer [class*="verse"]{
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
text-shadow:0 0 8px rgba(212,175,55,.12) !important;
}
/* v63 — Hide the hamburger menu section number “01” */
.drawer .menu-number,
.drawer .section-number,
.drawer .menu-index,
.drawer [class*="menu-number"],
.drawer [class*="section-number"],
.drawer [class*="index"]{
display:none !important;
}
/* v64 — Remove actual MENU / 01 pseudo-element */
.drawer::before,
.drawer::after{
/* Preserve the watermark on ::before via later rules; suppress only literal menu labels */
}
.drawer [class*="menu"]::before,
.drawer [class*="menu"]::after,
.drawer [class*="drawer"]::before,
.drawer [class*="drawer"]::after{
content:none !important;
}
/* =========================================================
FINANCE — PROFESSIONAL EDITORIAL REFINEMENT
Headings use the B.A. Future Growth smiley-logo accent.
========================================================= */
.finance-section{
position:relative;
padding-top:118px;
padding-bottom:120px;
}
.finance-header{
max-width:820px;
border-top:1px solid rgba(98,214,167,.20);
padding-top:30px;
}
.finance-header .section-kicker{
margin-bottom:22px;
color:var(--logo-accent);
letter-spacing:.24em;
}
.finance-header h2{
color:var(--logo-accent);
font-size:clamp(3rem,6.5vw,6.2rem);
letter-spacing:-.065em;
line-height:.94;
margin-bottom:28px;
text-shadow:0 0 24px rgba(98,214,167,.10);
}
.finance-intro{
max-width:720px;
color:rgba(255,255,255,.76);
font-size:clamp(1.05rem,1.8vw,1.28rem);
line-height:1.7;
letter-spacing:-.012em;
}
.finance-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:62px;
}
.finance-card{
position:relative;
min-height:310px;
padding:34px 32px 38px;
border:1px solid rgba(98,214,167,.13);
background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.006));
box-shadow:0 18px 55px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
justify-content:flex-end;
transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease;
}
.finance-card:hover{
transform:translateY(-5px);
border-color:transparent;
background:linear-gradient(145deg,rgba(98,214,167,.045),rgba(255,255,255,.008));
}
.finance-card-number{
position:absolute;
top:25px;
left:32px;
color:var(--logo-accent);
font-size:.62rem;
font-weight:800;
letter-spacing:.18em;
}
.finance-card h3{
color:var(--logo-accent);
font-size:clamp(1.05rem,1.5vw,1.3rem);
font-weight:800;
letter-spacing:-.025em;
line-height:1.15;
margin-bottom:14px;
}
.finance-card p{
color:rgba(255,255,255,.66);
font-size:.92rem;
line-height:1.7;
letter-spacing:-.005em;
}
.finance-close{
margin-top:48px;
padding-top:25px;
border-top:1px solid rgba(98,214,167,.13);
text-align:center;
}
.finance-close span{
color:var(--logo-accent);
font-size:.78rem;
font-weight:800;
letter-spacing:.13em;
text-transform:uppercase;
}
@media(max-width:860px){
.finance-grid{grid-template-columns:1fr;gap:12px}
.finance-card{min-height:240px}
}
@media(max-width:760px){
.finance-section{padding-top:88px;padding-bottom:92px}
.finance-header{padding-top:25px}
.finance-header h2{font-size:clamp(2.7rem,14vw,4.2rem);margin-bottom:22px}
.finance-intro{font-size:1rem;line-height:1.65}
.finance-grid{margin-top:42px}
.finance-card{min-height:235px;padding:31px 25px 30px}
.finance-card-number{left:25px;top:22px}
.finance-card h3{font-size:1.05rem}
.finance-card p{font-size:.9rem;line-height:1.65}
.finance-close{margin-top:38px}
.finance-close span{font-size:.68rem;letter-spacing:.1em}
}
.finance-goal{
max-width:760px;
margin:48px auto 0;
padding:25px 0;
border-top:1px solid rgba(98,214,167,.13);
text-align:center;
}
.finance-goal span{
color:rgba(255,255,255,.68);
font-size:.9rem;
line-height:1.65;
letter-spacing:-.005em;
}
/* FINAL FINANCE LAYOUT OVERRIDE */
.finance-section{
position:relative;
padding:78px 0 82px !important;
}
.finance-header{
max-width:760px;
padding-top:22px !important;
}
.finance-header .section-kicker{
margin:0 0 14px !important;
}
.finance-header h2{
margin:0 0 16px !important;
}
.finance-intro{
max-width:660px;
margin:0 !important;
line-height:1.55 !important;
}
.finance-grid{
margin-top:36px !important;
gap:14px !important;
}
.finance-card{
min-height:250px !important;
padding:28px 27px 29px !important;
}
.finance-card-number{
top:20px !important;
left:27px !important;
}
.finance-card h3{
margin:0 0 10px !important;
}
.finance-card p{
margin:0 !important;
line-height:1.55 !important;
}
.finance-goal{
max-width:680px;
margin:34px auto 0 !important;
padding:19px 0 !important;
}
.finance-goal span{
line-height:1.55 !important;
}
.finance-close{
margin-top:18px !important;
padding-top:18px !important;
}
@media(max-width:860px){
.finance-grid{grid-template-columns:1fr !important;}
.finance-card{min-height:205px !important;}
}
@media(max-width:760px){
.finance-section{padding:60px 0 64px !important;}
.finance-header{padding-top:18px !important;}
.finance-header h2{margin-bottom:13px !important;}
.finance-grid{margin-top:28px !important;gap:10px !important;}
.finance-card{min-height:200px !important;padding:25px 22px 25px !important;}
.finance-card-number{left:22px !important;top:18px !important;}
.finance-goal{margin-top:27px !important;padding:16px 0 !important;}
.finance-close{margin-top:14px !important;padding-top:15px !important;}
}
/* FINANCE COMPACT ADVANCED */
.finance-section{padding-top:64px!important;padding-bottom:68px!important}.finance-header{max-width:720px!important;padding-top:18px!important}.finance-header h2{font-size:clamp(2.5rem,5vw,4.8rem)!important;margin-bottom:12px!important}.finance-intro{max-width:620px!important;font-size:1rem!important;line-height:1.5!important}.finance-grid{margin-top:28px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.finance-card{min-height:0!important;height:190px!important;padding:24px 22px 22px!important;justify-content:flex-end!important;border-radius:2px!important}.finance-card-number{top:17px!important;left:22px!important;font-size:.55rem!important}.finance-card h3{font-size:1rem!important;line-height:1.12!important;margin-bottom:8px!important}.finance-card p{font-size:.82rem!important;line-height:1.5!important}.finance-goal{max-width:620px!important;margin:28px auto 0!important;padding:16px 0!important}.finance-goal span{font-size:.82rem!important;line-height:1.5!important}.finance-close{margin-top:14px!important;padding-top:14px!important}.finance-close span{font-size:.65rem!important;letter-spacing:.11em!important}@media(max-width:860px){.finance-grid{grid-template-columns:1fr!important;gap:8px!important}.finance-card{height:auto!important;min-height:145px!important}}@media(max-width:760px){.finance-section{padding-top:50px!important;padding-bottom:55px!important}.finance-header{padding-top:15px!important}.finance-header h2{font-size:clamp(2.35rem,12vw,3.6rem)!important}.finance-grid{margin-top:24px!important}.finance-card{min-height:150px!important;padding:23px 20px 21px!important}.finance-card-number{left:20px!important;top:16px!important}.finance-goal{margin-top:24px!important;padding:14px 0!important}}
/* Small, understated Finance disclaimer */
.finance-disclaimer{
max-width:700px;
margin:12px auto 0;
text-align:center;
color:rgba(255,255,255,.38);
font-size:.62rem;
line-height:1.5;
letter-spacing:.01em;
}
@media(max-width:760px){
.finance-disclaimer{
margin-top:10px;
padding:0 12px;
font-size:.58rem;
}
}
.finance-disclaimer{
max-width:620px;
margin:12px auto 0;
text-align:center;
color:rgba(255,255,255,.34);
font-size:.60rem;
line-height:1.45;
letter-spacing:.008em;
}
@media(max-width:760px){
.finance-disclaimer{
margin-top:9px;
padding:0 12px;
font-size:.56rem;
}
}
/* Stocks disclaimer — same understated treatment as Finance */
.stocks-disclaimer{
max-width:620px;
margin:12px auto 0;
padding-top:12px;
border-top:1px solid rgba(98,214,167,.10);
text-align:center;
color:rgba(255,255,255,.34);
font-size:.60rem;
line-height:1.45;
letter-spacing:.008em;
}
@media(max-width:760px){
.stocks-disclaimer{
margin-top:10px;
padding:10px 12px 0;
font-size:.56rem;
}
}
/* =========================================================
B.A. FUTURE GROWTH — FINAL POLISH
Presentation-only refinement: hierarchy, rhythm, focus,
hover states, accessibility, and mobile consistency.
========================================================= */
/* Shared section rhythm */
.section{
scroll-margin-top:84px;
}
/* Keep headings visually crisp and consistent */
.section h1,
.section h2,
.section h3{
text-wrap:balance;
}
/* Subtle premium interaction — never flashy */
.finance-card,
.stocks-disclaimer,
.finance-disclaimer{
-webkit-font-smoothing:antialiased;
}
/* Finance / Stocks legal copy stays intentionally quiet */
.finance-disclaimer,
.stocks-disclaimer{
user-select:text;
}
/* Better keyboard visibility */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
outline:1px solid var(--logo-accent,#62d6a7);
outline-offset:4px;
}
/* Prevent accidental horizontal overflow on smaller screens */
html,body{
overflow-x:hidden;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
scroll-behavior:auto !important;
transition-duration:.01ms !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
}
}
/* Final mobile typography balance */
@media(max-width:760px){
.section{
scroll-margin-top:68px;
}
}
/* Tiny B.A. smiley signature before major section headings */
.ba-section-heading,
.finance-section h2,
.stocks-section h2,
.psychology-section h2,
#travel h2,
#about h2{
align-items:center;
gap:12px;
}
.ba-section-mark{
width:22px !important;
height:22px !important;
min-width:22px;
object-fit:contain;
display:inline-block;
vertical-align:middle;
margin-right:10px;
opacity:.92;
filter:drop-shadow(0 0 8px rgba(98,214,167,.10));
}
@media(max-width:760px){
.ba-section-mark{
width:17px !important;
height:17px !important;
min-width:17px;
margin-right:7px;
}
}
/* FINAL — tiny smiley section mark */
.ba-section-mark{
width:18px !important;
height:18px !important;
min-width:18px !important;
object-fit:contain !important;
vertical-align:middle;
display:inline-block;
margin-right:8px;
opacity:.95;
}
@media(max-width:760px){
.ba-section-mark{
width:14px !important;
height:14px !important;
min-width:14px !important;
margin-right:6px;
}
}
/* B.A. smiley + headphones signature mark */
.ba-section-mark{
width:24px !important;
height:24px !important;
min-width:24px !important;
object-fit:contain !important;
display:inline-block !important;
vertical-align:-5px !important;
margin:0 9px 0 0 !important;
opacity:.96 !important;
filter:drop-shadow(0 0 7px rgba(98,214,167,.10));
}
@media(max-width:760px){
.ba-section-mark{
width:20px !important;
height:20px !important;
min-width:20px !important;
margin-right:7px !important;
vertical-align:-4px !important;
}
}
/* Hamburger menu — branded smiley + headphones marks */
.drawer-links a{
display:flex !important;
align-items:center !important;
gap:9px !important;
}
.drawer-section-mark{
width:17px !important;
height:17px !important;
min-width:17px !important;
object-fit:contain !important;
display:inline-block !important;
opacity:.94 !important;
}
@media(max-width:760px){
.drawer-section-mark{
width:15px !important;
height:15px !important;
min-width:15px !important;
}
}
/* =========================================================
TRAVEL — compact soundtrack box beneath every photo
========================================================= */
.ba-travel-card + .ba-music-box{
margin-top:-1px;
}
.ba-music-box{
min-height:62px;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:transparent;
border:1px solid rgba(255,255,255,.07);
border-top:0;
}
.ba-music-play{
width:30px;
height:30px;
flex:0 0 30px;
border:1px solid rgba(242,233,78,.35);
border-radius:50%;
background:transparent;
color:#f2e94e;
font-size:.58rem;
display:grid;
place-items:center;
padding-left:2px;
}
.ba-music-play:disabled{
opacity:.65;
cursor:default;
}
.ba-music-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.ba-music-label{
color:rgba(242,233,78,.72);
font-size:.47rem;
font-weight:800;
letter-spacing:.15em;
}
.ba-music-copy strong{
color:rgba(255,255,255,.78);
font-size:.68rem;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ba-music-copy small{
color:rgba(255,255,255,.34);
font-size:.55rem;
}
@media(max-width:760px){
.ba-music-box{
min-height:58px;
padding:9px 10px;
}
.ba-music-play{
width:28px;
height:28px;
flex-basis:28px;
}
}
/* Music boxes — ensure every song title fits cleanly */
.ba-music-box{
min-width:0;
overflow:hidden;
}
.ba-music-copy{
min-width:0;
flex:1 1 auto;
}
.ba-music-copy strong{
display:block;
min-width:0;
max-width:100%;
white-space:normal !important;
overflow-wrap:anywhere;
word-break:normal;
line-height:1.25;
}
.ba-music-copy small{
display:block;
white-space:normal;
overflow-wrap:anywhere;
line-height:1.25;
}
@media(max-width:760px){
.ba-music-box{
gap:8px;
}
.ba-music-copy strong{
font-size:.62rem;
}
.ba-music-copy small{
font-size:.52rem;
}
}
/* Verified SoundCloud player */
.ba-verified-sc-player{
position:fixed;
inset:0;
z-index:11000;
display:grid;
place-items:center;
padding:16px;
}
.ba-verified-sc-backdrop{
position:absolute;
inset:0;
border:0;
background:transparent;
cursor:default;
}
.ba-verified-sc-panel{
position:relative;
z-index:2;
width:min(680px,94vw);
padding:18px;
border:1px solid rgba(242,233,78,.28);
border-radius:18px;
background:transparent;010;
box-shadow:0 28px 90px rgba(0,0,0,.7);
}
.ba-verified-sc-close{
position:absolute;
right:9px;
top:9px;
z-index:3;
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(255,255,255,.15);
background:transparent;
color:#fff;
font-size:22px;
cursor:pointer;
}
.ba-verified-sc-heading{
padding:0 44px 12px 0;
}
.ba-verified-sc-heading span{
display:block;
color:rgba(242,233,78,.75);
font-size:.52rem;
font-weight:800;
letter-spacing:.15em;
margin-bottom:4px;
}
.ba-verified-sc-heading strong{
display:block;
color:#fff;
font-size:.9rem;
}
.ba-verified-sc-panel iframe{
display:block;
width:100%;
height:166px;
border:0;
border-radius:10px;
background:transparent;
}
.ba-verified-sc-note{
margin:9px 0 0;
color:rgba(255,255,255,.42);
font-size:.55rem;
}
.ba-music-play{
cursor:pointer!important;
pointer-events:auto!important;
touch-action:manipulation;
}
.ba-music-play[disabled]{
opacity:1;
pointer-events:auto;
}
/* Travel alignment: keep each photo and its soundtrack(s) as one grid item. */
.ba-travel-grid{align-items:start}
.ba-travel-item{min-width:0;display:flex;flex-direction:column}
.ba-travel-item .ba-travel-card{width:100%}
.ba-travel-item .ba-music-box{width:100%;box-sizing:border-box}
/* Stable in-box YouTube player */
.ba-music-video{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:transparent;margin:0 0 10px;position:relative}
.ba-music-video iframe{display:block;width:100%;height:100%;border:0}
.ba-music-playing{display:block}
/* Music & Travel — clean soundtrack line, matching the travel controls. */
.ba-music-heading{
border:1px solid rgba(212,175,55,.8);
background:transparent;
color:inherit;
border-radius:999px;
padding:7px 12px;
font:inherit;
font-size:.78rem;
letter-spacing:.05em;
white-space:nowrap;
}
.ba-music-box{
min-height:0;
display:block;
margin-top:0;
padding:8px 2px 0;
background:transparent;
border:0;
overflow:visible;
}
.ba-music-copy{
min-width:0;
display:flex;
align-items:center;
gap:7px;
}
.ba-music-inline-icon{
flex:0 0 auto;
font-size:.78rem;
line-height:1;
filter:saturate(.9);
}
.ba-music-copy strong{
display:block;
color:rgba(242,233,78,.9);
font-size:.68rem;
line-height:1.25;
font-weight:500;
white-space:normal!important;
overflow-wrap:anywhere;
}
@media(max-width:760px){
.ba-music-heading{font-size:.72rem;padding:6px 10px}
.ba-music-box{padding-top:7px}
.ba-music-copy strong{font-size:.62rem}
}
/* v155 — Music & Travel soundtrack text/icon matched to the smiley-logo colors */
.ba-music-inline-icon,
.ba-music-copy strong,
.ba-music-copy small{
color:transparent !important;
-webkit-text-fill-color:transparent !important;
background:linear-gradient(105deg,#2fb8c4 0%,#62d6a7 38%,#d8ef55 70%,#f2e94e 100%) !important;
background-size:100% 100% !important;
background-position:0 0 !important;
-webkit-background-clip:text !important;
background-clip:text !important;
}
/* =========================================================
B.A. FUTURE GROWTH — TRAVEL ATLAS VIEWER v158
Dedicated photo viewer. Old lightbox is visually disabled.
========================================================= */
.ba-travel-redesign > .ba-travel-lightbox{display:none!important}
.ba-atlas-viewer{
position:fixed; inset:0; z-index:20000;
display:none; opacity:0; pointer-events:none;
background:transparent;
color:#fff;
transition:opacity .22s ease;
}
.ba-atlas-viewer.is-open{display:block;opacity:1;pointer-events:auto}
.ba-atlas-backdrop{
position:absolute;inset:0;
background:radial-gradient(circle at 50% 42%,rgba(212,175,55,.08),transparent 35%);
}
.ba-atlas-shell{
position:relative;z-index:2;
height:100%;
display:grid;
grid-template-rows:auto 1fr auto;
max-width:1500px;
margin:auto;
padding:18px 22px 16px;
}
.ba-atlas-top{
display:flex;align-items:center;justify-content:space-between;
gap:16px;
}
.ba-atlas-brand{
display:flex;align-items:center;gap:10px;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.ba-atlas-brand i{
width:7px;height:7px;border-radius:50%;
background:transparent;f37;box-shadow:0 0 16px rgba(212,175,55,.75);
}
.ba-atlas-actions{display:flex;gap:8px}
.ba-atlas-btn{
width:40px;height:40px;border-radius:50%;
border:1px solid rgba(255,255,255,.14);
background:transparent;
color:#fff;cursor:pointer;
display:grid;place-items:center;font-size:18px;
backdrop-filter:blur(12px);
}
.ba-atlas-btn:hover{background:transparent;border-color:transparent;}
.ba-atlas-stage{
min-height:0;display:grid;place-items:center;
position:relative;padding:12px 70px;
}
.ba-atlas-photo-wrap{
position:relative;max-width:100%;max-height:100%;
display:grid;place-items:center;
}
.ba-atlas-photo-wrap::before{
content:"";position:absolute;inset:-28px;
background:var(--atlas-bg) center/cover;
filter:blur(28px) brightness(.22) saturate(.7);
transform:scale(1.08);opacity:.55;
}
.ba-atlas-main{
position:relative;z-index:2;
max-width:min(86vw,1260px);
max-height:68vh;
width:auto;height:auto;
object-fit:contain;
border-radius:14px;
box-shadow:0 30px 100px rgba(0,0,0,.72);
user-select:none;
-webkit-user-drag:none;
}
.ba-atlas-nav{
position:absolute;z-index:4;top:50%;transform:translateY(-50%);
width:48px;height:48px;border-radius:50%;
border:1px solid rgba(255,255,255,.16);
background:transparent;color:#fff;
font-size:30px;cursor:pointer;display:grid;place-items:center;
backdrop-filter:blur(12px);
}
.ba-atlas-prev{left:12px}.ba-atlas-next{right:12px}
.ba-atlas-nav:hover{background:transparent;border-color:transparent;}
.ba-atlas-info{
display:flex;align-items:flex-end;justify-content:space-between;
gap:20px;margin:0 4px 12px;
}
.ba-atlas-title strong{display:block;font-size:17px;letter-spacing:.01em}
.ba-atlas-title small{
display:block;margin-top:5px;
color:rgba(255,255,255,.48);
font-size:10px;letter-spacing:.13em;text-transform:uppercase;
}
.ba-atlas-index{
color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.14em;
}
.ba-atlas-strip{
display:flex;gap:8px;overflow-x:auto;
padding:8px 2px 2px;
scrollbar-width:thin;
}
.ba-atlas-thumb{
flex:0 0 62px;height:46px;
padding:0;border-radius:8px;overflow:hidden;
border:1px solid rgba(255,255,255,.10);
background:transparent;cursor:pointer;opacity:.55;
}
.ba-atlas-thumb.is-active{opacity:1;border-color:transparent;f37;box-shadow:0 0 0 1px rgba(212,175,55,.2)}
.ba-atlas-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ba-atlas-help{
position:absolute;left:50%;top:62px;transform:translateX(-50%);
color:rgba(255,255,255,.38);font-size:9px;letter-spacing:.1em;
text-transform:uppercase;pointer-events:none;
}
@media(max-width:700px){
.ba-atlas-shell{padding:12px 10px 10px}
.ba-atlas-stage{padding:8px 42px}
.ba-atlas-main{max-width:94vw;max-height:62vh;border-radius:10px}
.ba-atlas-nav{width:38px;height:38px;font-size:24px}
.ba-atlas-prev{left:3px}.ba-atlas-next{right:3px}
.ba-atlas-info{margin-bottom:5px}
.ba-atlas-title strong{font-size:14px}
.ba-atlas-help{display:none}
.ba-atlas-thumb{flex-basis:55px;height:42px}
}
@media(prefers-reduced-motion:reduce){.ba-atlas-viewer{transition:none}}
/* =========================================================
B.A. FUTURE GROWTH — TRAVEL v159
Centered photography + premium gold highlights
========================================================= */
.ba-travel-redesign .ba-travel-grid{
justify-items:center;
}
.ba-travel-redesign .ba-travel-item{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
.ba-travel-redesign .ba-travel-card{
width:100%;
margin-inline:auto;
border:1px solid rgba(212,175,55,.72)!important;
box-shadow:
0 0 0 1px rgba(212,175,55,.20),
0 0 14px rgba(212,175,55,.14),
0 12px 34px rgba(0,0,0,.30)!important;
background:linear-gradient(145deg,rgba(212,175,55,.22),rgba(212,175,55,.035))!important;
}
.ba-travel-redesign .ba-travel-card::after{
content:"";
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
border:1px solid rgba(255,218,105,.30);
border-radius:inherit;
box-shadow:inset 0 0 18px rgba(212,175,55,.10);
}
.ba-travel-redesign .ba-travel-card:hover{
border-color:transparent;!important;
box-shadow:
0 0 0 1px rgba(212,175,55,.34),
0 0 22px rgba(212,175,55,.26),
0 16px 42px rgba(0,0,0,.38)!important;
transform:translateY(-3px);
}
.ba-travel-redesign .ba-travel-card img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
/* Center the fullscreen viewer and keep the photo visually balanced. */
.ba-atlas-stage{
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center;
}
.ba-atlas-photo-wrap{
width:fit-content;
max-width:calc(100vw - 150px);
max-height:100%;
margin:auto;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.ba-atlas-main{
display:block!important;
margin:auto!important;
object-position:center center!important;
border:1px solid rgba(212,175,55,.78);
box-shadow:
0 0 0 1px rgba(212,175,55,.22),
0 0 28px rgba(212,175,55,.18),
0 30px 100px rgba(0,0,0,.72)!important;
}
@media(max-width:700px){
.ba-atlas-photo-wrap{
max-width:calc(100vw - 90px);
}
}
/* =========================================================
B.A. FUTURE GROWTH — TRAVEL v160
High-visibility destination labels
========================================================= */
.ba-travel-redesign .ba-travel-meta{
left:14px!important;
right:14px!important;
bottom:13px!important;
z-index:10!important;
padding:10px 12px!important;
border:1px solid rgba(255,255,255,.18);
border-radius:11px;
background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.82))!important;
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
text-shadow:0 2px 5px rgba(0,0,0,.9);
}
.ba-travel-redesign .ba-travel-meta strong{
color:#fff!important;
font-size:15px!important;
font-weight:900!important;
line-height:1.15!important;
text-shadow:0 2px 7px rgba(0,0,0,.95);
}
.ba-travel-redesign .ba-travel-meta small{
color:rgba(255,255,255,.88)!important;
font-size:10px!important;
font-weight:700!important;
letter-spacing:.13em!important;
margin-top:4px!important;
text-shadow:0 2px 5px rgba(0,0,0,.95);
}
.ba-travel-redesign .ba-travel-flag{
font-size:21px!important;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));
}
.ba-travel-redesign .ba-travel-card::before{
background:linear-gradient(
180deg,
rgba(0,0,0,0) 38%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.88) 100%
)!important;
}
@media(max-width:600px){
.ba-travel-redesign .ba-travel-meta{
left:7px!important;right:7px!important;bottom:7px!important;
padding:7px 8px!important;
}
.ba-travel-redesign .ba-travel-meta strong{font-size:12px!important}
.ba-travel-redesign .ba-travel-meta small{font-size:8px!important}
.ba-travel-redesign .ba-travel-flag{font-size:17px!important}
}
/* Travel v161 — slightly smaller, still highly readable labels */
.ba-travel-redesign .ba-travel-meta{
padding:8px 10px!important;
left:12px!important;
right:12px!important;
bottom:11px!important;
}
.ba-travel-redesign .ba-travel-meta strong{
font-size:13px!important;
line-height:1.12!important;
}
.ba-travel-redesign .ba-travel-meta small{
font-size:9px!important;
margin-top:3px!important;
letter-spacing:.11em!important;
}
.ba-travel-redesign .ba-travel-flag{
font-size:18px!important;
}
@media(max-width:600px){
.ba-travel-redesign .ba-travel-meta{
padding:6px 7px!important;
left:6px!important;
right:6px!important;
bottom:6px!important;
}
.ba-travel-redesign .ba-travel-meta strong{font-size:11px!important}
.ba-travel-redesign .ba-travel-meta small{font-size:7px!important}
.ba-travel-redesign .ba-travel-flag{font-size:15px!important}
}
/* Travel v162 — minimal destination labels, no bar */
.ba-travel-redesign .ba-travel-meta{
left:10px!important;
right:auto!important;
bottom:9px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
text-shadow:0 2px 5px rgba(0,0,0,.95)!important;
}
.ba-travel-redesign .ba-travel-meta strong{
font-size:10px!important;
font-weight:800!important;
line-height:1!important;
}
.ba-travel-redesign .ba-travel-meta small{
font-size:7px!important;
margin:2px 0 0!important;
letter-spacing:.08em!important;
color:rgba(255,255,255,.82)!important;
}
.ba-travel-redesign .ba-travel-flag{
font-size:13px!important;
}
@media(max-width:600px){
.ba-travel-redesign .ba-travel-meta{
left:7px!important;
bottom:7px!important;
gap:4px!important;
}
.ba-travel-redesign .ba-travel-meta strong{font-size:9px!important}
.ba-travel-redesign .ba-travel-meta small{font-size:6px!important}
.ba-travel-redesign .ba-travel-flag{font-size:11px!important}
}
/* Travel v163 — uniform minimal labels on EVERY travel photo */
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption{
position:absolute!important;
left:10px!important;
right:auto!important;
bottom:9px!important;
top:auto!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
color:#fff!important;
text-shadow:0 2px 5px rgba(0,0,0,.95)!important;
z-index:10!important;
}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta strong,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption strong,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-heading{
font-size:10px!important;
font-weight:800!important;
line-height:1!important;
color:#fff!important;
}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta small,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption small,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-location{
font-size:7px!important;
font-weight:600!important;
line-height:1!important;
margin:2px 0 0!important;
color:rgba(255,255,255,.82)!important;
letter-spacing:.08em!important;
background:none!important;
padding:0!important;
}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-flag,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-flag{
font-size:13px!important;
background:none!important;
padding:0!important;
}
@media(max-width:600px){
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption{
left:7px!important;
bottom:7px!important;
gap:4px!important;
}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta strong,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption strong,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-heading{font-size:9px!important}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-meta small,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-caption small,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-location{font-size:6px!important}
.ba-travel-redesign .ba-travel-grid .ba-travel-card .ba-travel-flag,
.ba-travel-redesign .ba-travel-grid .ba-travel-card .travel-flag{font-size:11px!important}
}
/* HAMBURGER PERFORMANCE PASS
Keep the same look, but make open/close and navigation feel immediate. */
.drawer{
transition:transform .18s cubic-bezier(.2,.8,.2,1) !important;
will-change:transform;
}
.menu-toggle{
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
will-change:transform;
}
.menu-toggle span{
transition:transform .16s ease,opacity .12s ease !important;
}
.menu-toggle::before{
transition:transform .18s ease,border-color .16s ease !important;
}
.drawer-links a{
transition:color .14s ease,transform .14s ease !important;
}
/* Psychology section polish — layout only, existing wording preserved. */
#psychology {
scroll-margin-top: 80px;
}
#psychology > * {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
#psychology .psychology-team-cta {
display: flex;
justify-content: center;
margin: 32px auto 8px;
}
#psychology .psychology-team-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 20px;
border: 1px solid rgba(212,175,55,.55);
border-radius: 999px;
text-decoration: none;
letter-spacing: .02em;
transition: transform .14s ease, border-color .14s ease;
}
#psychology .psychology-team-cta a:hover {
transform: translateY(-1px);
border-color: transparent;
}
/* Psychology Team — four perspectives hero */
.psychology-team-hero{
display:flex;
justify-content:center;
align-items:center;
width:min(920px,92vw);
margin:0 auto 28px;
}
.psychology-team-hero img{
display:block;
width:100%;
max-width:920px;
height:auto;
border-radius:18px;
}
/* Psychology Team: put the four team photos prominently at the top */
.psychology-team-hero{
display:flex;
justify-content:center;
align-items:center;
width:min(980px,94vw);
margin:18px auto 34px;
}
.psychology-team-hero img{
display:block;
width:100%;
max-width:980px;
height:auto;
border-radius:18px;
object-fit:cover;
}
/* =========================================================
B.A. FUTURE GROWTH — DEEP POLISH
Visual refinement only: no copy/content changes.
========================================================= */
:root{
--ba-max:1180px;
--ba-gutter:clamp(20px,4vw,48px);
--ba-section-y:clamp(88px,9vw,138px);
--ba-radius:18px;
--ba-radius-sm:12px;
--ba-hairline:rgba(255,255,255,.075);
--ba-soft-panel:rgba(255,255,255,.028);
--ba-shadow:0 24px 80px rgba(0,0,0,.28);
}
html{scroll-padding-top:92px}
body{overflow-x:hidden;background:transparent;}
main{overflow:clip}
.site-header{
height:72px;
padding-inline:clamp(18px,3.5vw,38px);
background:transparent;
border-bottom-color:rgba(255,255,255,.055);
}
.brand{letter-spacing:.13em}
.menu-toggle{
width:44px;height:44px;
border-color:transparent;
box-shadow:0 8px 30px rgba(0,0,0,.22);
}
.menu-toggle:focus-visible{
outline:2px solid var(--logo-accent);
outline-offset:4px;
}
.hero{
min-height:100svh;
padding:116px var(--ba-gutter) 82px;
}
.hero-glow{
opacity:.82;
filter:blur(12px);
}
.hero-content{max-width:1040px}
.hero-logo{margin-bottom:18px}
.hero-logo img{
width:min(220px,38vw);
max-height:260px;
object-fit:contain;
}
.eyebrow{margin-bottom:17px}
h1{max-width:1050px;margin-inline:auto}
.tagline{max-width:700px}
.cta{
min-height:52px;
padding-inline:26px;
box-shadow:0 12px 36px rgba(98,214,167,.07);
}
.scroll-cue{bottom:24px}
.section{
width:min(var(--ba-max),calc(100% - (2 * var(--ba-gutter))));
padding-block:var(--ba-section-y);
scroll-margin-top:92px;
}
.section-kicker{
margin-bottom:30px;
letter-spacing:.24em;
opacity:.82;
}
.section h2,.section h3{letter-spacing:-.035em}
.finance-section{
padding-top:clamp(88px,8vw,120px);
padding-bottom:clamp(96px,9vw,132px);
}
.finance-header{
max-width:860px;
padding-top:28px;
}
.finance-header h2{
margin-bottom:24px;
font-size:clamp(3rem,6.4vw,6.1rem);
}
.finance-grid{
gap:18px;
margin-top:56px;
}
.finance-card{
min-height:300px;
border-radius:var(--ba-radius-sm);
padding:32px;
background:
linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.finance-card:hover{
transform:translateY(-7px);
box-shadow:0 26px 70px rgba(0,0,0,.32);
}
.finance-goal,.finance-close{
max-width:900px;
margin-inline:auto;
}
.finance-disclaimer{
opacity:.55;
max-width:760px;
margin-inline:auto;
}
.psychology-section{
padding-block:var(--ba-section-y);
}
.psychology-advanced{
gap:clamp(34px,6vw,78px);
}
.psychology-visual-frame{
border-radius:var(--ba-radius);
overflow:hidden;
box-shadow:var(--ba-shadow);
border:1px solid var(--ba-hairline);
}
.psychology-content-panel{
max-width:680px;
}
.psychology-definition{
margin-top:42px;
padding:30px 32px;
border:1px solid var(--ba-hairline);
border-radius:var(--ba-radius-sm);
background:var(--ba-soft-panel);
}
.psychology-pillars{
gap:14px;
margin-top:18px;
}
.psychology-pillar{
min-height:170px;
border-radius:var(--ba-radius-sm);
border-color:var(--ba-hairline);
background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.psychology-team-cta{
margin-top:30px;
}
.ba-travel-redesign{
padding-top:var(--ba-section-y);
}
.ba-travel-head{
gap:28px;
align-items:end;
margin-bottom:34px;
}
.ba-travel-tools{
padding:24px;
border:1px solid var(--ba-hairline);
border-radius:var(--ba-radius);
background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.006));
box-shadow:0 20px 65px rgba(0,0,0,.20);
}
.ba-travel-filters{
gap:8px;
flex-wrap:wrap;
}
.ba-travel-filter{
min-height:38px;
padding:0 15px;
border-radius:999px;
}
.ba-travel-grid{
gap:18px;
margin-top:24px;
}
.ba-travel-item{
min-width:0;
}
.ba-travel-card{
border-radius:var(--ba-radius-sm);
overflow:hidden;
border:1px solid var(--ba-hairline);
background:transparent;808;
box-shadow:0 16px 50px rgba(0,0,0,.24);
}
.ba-travel-card img{
transition:transform .55s cubic-bezier(.22,1,.36,1),filter .35s ease;
}
.ba-travel-card:hover img{
transform:scale(1.025);
}
.ba-travel-meta{
padding:13px 15px 15px;
}
.story{
padding-top:var(--ba-section-y);
padding-bottom:var(--ba-section-y);
border-top:1px solid var(--ba-hairline);
}
.story-wrap{
gap:clamp(38px,7vw,92px);
}
.story-copy{
max-width:720px;
}
.story-copy p{
line-height:1.82;
}
.stocks-section{
padding-block:var(--ba-section-y);
border-top:1px solid var(--ba-hairline);
}
.stocks-inner,.stock-thesis{
max-width:var(--ba-max);
}
.stock-thesis-card{
border-radius:var(--ba-radius);
border-color:var(--ba-hairline)!important;
box-shadow:var(--ba-shadow);
}
.closing{
padding-block:clamp(110px,13vw,190px);
}
.site-footer{
min-height:78px;
padding:24px var(--ba-gutter);
gap:20px;
align-items:center;
border-top-color:var(--ba-hairline);
}
.drawer{
box-shadow:-30px 0 90px rgba(0,0,0,.28);
}
.drawer-inner{
padding:112px clamp(24px,4vw,42px) 34px;
}
.drawer-links{
gap:4px;
}
.drawer-links a{
min-height:48px;
display:flex;
align-items:center;
gap:12px;
}
.drawer-section-mark{
flex:0 0 auto;
object-fit:contain;
}
.menu-backdrop{
background:transparent;
}
@media (max-width:900px){
.finance-grid{grid-template-columns:1fr}
.finance-card{min-height:240px}
.psychology-advanced{grid-template-columns:1fr}
.story-wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
.site-header{height:66px}
.hero{padding-top:94px;padding-bottom:72px}
.hero-glow{opacity:.65;filter:blur(8px)}
.hero-logo img{width:min(190px,52vw);max-height:220px}
h1{font-size:clamp(2.7rem,12vw,4.8rem)}
.tagline{margin-top:18px}
.section{
width:min(100% - 34px,720px);
padding-block:84px;
scroll-margin-top:78px;
}
.finance-header h2{font-size:clamp(2.8rem,12vw,4.8rem)}
.finance-grid{margin-top:42px}
.finance-card{padding:28px 24px;min-height:225px}
.psychology-definition{padding:24px}
.ba-travel-tools{padding:18px}
.ba-travel-grid{gap:14px}
.drawer-inner{padding:96px 22px 28px}
.drawer-links a{min-height:52px}
.site-footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
.hero-logo img,
.ba-travel-card img,
.finance-card{
animation:none!important;
transition:none!important;
}
}
/* FINAL OVERRIDE — deliberately VERY slow menu-word motion */
.drawer.open .drawer-links > a,
.drawer .drawer-links > a{
opacity:0 !important;
transform:translate3d(260px,0,0) !important;
transition-property:transform,opacity !important;
transition-duration:3.8s,2.2s !important;
transition-timing-function:cubic-bezier(.08,.72,.18,1),ease !important;
will-change:transform,opacity !important;
}
.drawer.open .drawer-links > a{
opacity:1 !important;
transform:translate3d(0,0,0) !important;
}
.drawer.open .drawer-links > a:nth-child(1){transition-delay:.20s,.20s !important}
.drawer.open .drawer-links > a:nth-child(2){transition-delay:.65s,.65s !important}
.drawer.open .drawer-links > a:nth-child(3){transition-delay:1.10s,1.10s !important}
.drawer.open .drawer-links > a:nth-child(4){transition-delay:1.55s,1.55s !important}
.drawer.open .drawer-links > a:nth-child(5){transition-delay:2.00s,2.00s !important}
.drawer.open .drawer-links > a:nth-child(6){transition-delay:2.45s,2.45s !important}
.drawer.open .drawer-links > a:nth-child(7){transition-delay:2.90s,2.90s !important}
/* Tiny speed increase — keep the slow, luxurious menu-word glide */
.drawer .drawer-links > a{
transition-duration:3.35s,1.95s !important;
}
.drawer.open .drawer-links > a:nth-child(1){transition-delay:.16s,.16s !important}
.drawer.open .drawer-links > a:nth-child(2){transition-delay:.56s,.56s !important}
.drawer.open .drawer-links > a:nth-child(3){transition-delay:.96s,.96s !important}
.drawer.open .drawer-links > a:nth-child(4){transition-delay:1.36s,1.36s !important}
.drawer.open .drawer-links > a:nth-child(5){transition-delay:1.76s,1.76s !important}
.drawer.open .drawer-links > a:nth-child(6){transition-delay:2.16s,2.16s !important}
.drawer.open .drawer-links > a:nth-child(7){transition-delay:2.56s,2.56s !important}
/* FINAL CONTACT MOTION — X Follow + The Crossing match the menu-word glide.
Slow, smooth right-to-left reveal; slightly staggered after the main menu. */
.contact-submenu a{
opacity:0;
transform:translate3d(35px,0,0) !important;
transition:
opacity .68s var(--motion-ease),
transform .68s var(--motion-ease),
color .25s ease !important;
}
.drawer.open .contact-submenu a{
opacity:.84;
transform:translate3d(0,0,0) !important;
}
.drawer.open .contact-submenu a:nth-child(1){
transition-delay:.42s;
}
.drawer.open .contact-submenu a:nth-child(2){
transition-delay:.49s;
}
.contact-submenu a:hover{
transform:translate3d(4px,0,0) !important;
}
/* FINAL — Psychology hamburger items use Psychology-design purple */
.drawer .drawer-links a[href="#psychology"],
.drawer .drawer-links a[href="psychology-team.html"]{
color:#9848D8 !important;
-webkit-text-fill-color:#9848D8 !important;
text-shadow:0 0 14px rgba(152,72,216,.18) !important;
}
.drawer .drawer-links a[href="#psychology"] .drawer-section-mark,
.drawer .drawer-links a[href="psychology-team.html"] .drawer-section-mark{
filter: sepia(1) saturate(7) hue-rotate(235deg) brightness(.95) !important;
}
.drawer .drawer-links a[href="#psychology"]:hover,
.drawer .drawer-links a[href="psychology-team.html"]:hover{
color:#B56AF0 !important;
-webkit-text-fill-color:#B56AF0 !important;
}
/* Psychology + Psychology Team final purple */
.drawer .drawer-links a[href*="psychology"], .drawer .drawer-links a[href*="psychology-team"] { color:#9848D8 !important; -webkit-text-fill-color:#9848D8 !important; }
/* FINAL — Psychology + Psychology Team icons use the same purple */
.drawer .drawer-links a[href*="psychology"] .drawer-section-mark,
.drawer .drawer-links a[href*="psychology-team"] .drawer-section-mark,
.drawer .drawer-links a[href*="psychology"] svg,
.drawer .drawer-links a[href*="psychology-team"] svg,
.drawer .drawer-links a[href*="psychology"] img,
.drawer .drawer-links a[href*="psychology-team"] img {
color:#9848D8 !important;
fill:#9848D8 !important;
stroke:#9848D8 !important;
filter: sepia(1) saturate(8) hue-rotate(230deg) brightness(.92) !important;
}
/* Hamburger menu — ultra-black marble */
.drawer{
background:#000 !important;
background-image:
linear-gradient(155deg,
rgba(255,255,255,.012) 0%,
transparent 22%,
rgba(255,255,255,.008) 48%,
transparent 49%,
rgba(255,255,255,.012) 72%,
transparent 73%) !important;
background-blend-mode:screen !important;
border-left:1px solid rgba(255,255,255,.045) !important;
box-shadow:
-14px 0 30px rgba(0,0,0,.7),
inset 1px 0 0 rgba(255,255,255,.025) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.drawer::before,
.drawer::after{
content:none !important;
}
/* Hamburger menu — elegant editorial typography */
.drawer .drawer-links a{
font-family:"Cormorant Garamond", Georgia, serif !important;
font-weight:500 !important;
letter-spacing:.055em !important;
line-height:1.2 !important;
}
/* Screenshot font match — hamburger menu only */
.drawer,
.drawer .drawer-inner,
.drawer .drawer-links,
.drawer .drawer-links a,
.drawer .drawer-proverbs,
.drawer .drawer-label,
.drawer .drawer-status,
.drawer .drawer-contact-label,
.drawer .drawer-footer,
.drawer .contact-submenu a {
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.drawer .drawer-links a,
.drawer .drawer-proverbs {
font-weight: 400 !important;
}
/* FINAL — Hamburger font only; preserve existing word sizes */
.drawer .drawer-links a{
font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size:clamp(1.25rem,3.4vw,1.9rem) !important;
font-weight:700 !important;
}
/* FINAL HAMBURGER SCREENSHOT SIZE — typography only */
.drawer .drawer-links a{
font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size:18px !important;
font-weight:400 !important;
letter-spacing:-.02em !important;
line-height:1 !important;
}
@media(max-width:600px){
.drawer .drawer-links a{font-size:18px !important;}
}
/* HAMBURGER — screenshot-matched smaller text size */
.drawer-links a,
.contact-submenu a{
font-family:'Cormorant Garamond', serif !important;
}
.drawer-links a{
font-size:18px !important;
line-height:1 !important;
font-weight:400 !important;
letter-spacing:0 !important;
}
@media (max-width:600px){
.drawer-links a{font-size:18px !important;}
}
/* FINAL USER REQUEST — hamburger words small, matching screenshot scale */
.drawer .drawer-links a, .drawer-links a, .contact-submenu a {
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
}
@media (max-width:600px){
.drawer .drawer-links a, .drawer-links a { font-size: 18px !important; }
}
/* FINAL — X Follow + The Crossing smaller than main hamburger words */
.drawer .contact-submenu a,
.contact-submenu a{
font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size:14px !important;
font-weight:400 !important;
letter-spacing:0 !important;
line-height:1.2 !important;
}
.drawer .contact-submenu a span,
.contact-submenu a span{
font-size:13px !important;
}
@media (max-width:600px){
.drawer .contact-submenu a,
.contact-submenu a{font-size:14px !important;}
}
/* FINAL HAMBURGER REFINEMENT — no circle, larger lines */
.menu-toggle{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
width:50px !important;
height:50px !important;
padding:0 !important;
}
.menu-toggle:hover{
border:0 !important;
box-shadow:none !important;
}
.menu-toggle span{
width:30px !important;
height:2.5px !important;
border-radius:0 !important;
}
/* FINAL CLEAN HAMBURGER — remove all ring/dot decorations */
.menu-toggle::before,
.menu-toggle::after{
content:none !important;
display:none !important;
border:0 !important;
box-shadow:none !important;
}
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
.menu-toggle span{
width:30px !important;
height:2.5px !important;
}
/* FINAL HAMBURGER STATE — 3 straight lines closed, clean X when open */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle.open{
transform:none !important;
rotate:0deg !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
display:grid !important;
place-content:center !important;
gap:5px !important;
}
.menu-toggle span{
display:block !important;
width:30px !important;
height:2.5px !important;
margin:0 !important;
background:var(--logo-accent) !important;
opacity:1 !important;
transform:none !important;
rotate:0deg !important;
transition:transform .2s ease, opacity .15s ease !important;
}
.menu-toggle.open span:nth-child(1){
transform:translateY(7.5px) rotate(45deg) !important;
}
.menu-toggle.open span:nth-child(2){
opacity:0 !important;
transform:none !important;
}
.menu-toggle.open span:nth-child(3){
transform:translateY(-7.5px) rotate(-45deg) !important;
}
/* Keep Psychology Insights team member copy visible */
.psychology-team-heading,
.psychology-team-description,
.psychology-team-role,
.psychology-team-role-title{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* =========================================================
B.A. FUTURE GROWTH — MICRO-POLISH / DETAIL PASS
Preserve the existing design; refine finish, rhythm, and
interaction quality without changing content or artwork.
========================================================= */
:root{
--ba-polish-line:rgba(255,255,255,.075);
--ba-polish-soft:rgba(255,255,255,.055);
--ba-polish-shadow:0 18px 55px rgba(0,0,0,.28);
--ba-polish-ease:cubic-bezier(.16,1,.3,1);
}
/* Cleaner page rendering */
html{
text-rendering:optimizeLegibility;
-webkit-text-size-adjust:100%;
}
body{
min-width:320px;
overflow-x:clip;
}
img,svg,video{
max-width:100%;
}
img{
image-rendering:auto;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
button,a{
-webkit-tap-highlight-color:transparent;
}
/* Header: retain the existing look, improve separation and scroll behavior */
.site-header{
isolation:isolate;
box-shadow:0 8px 30px rgba(0,0,0,.10);
transition:background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.site-header::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-1px;
height:1px;
background:linear-gradient(90deg,transparent,var(--ba-polish-line),transparent);
pointer-events:none;
}
main section,
section[id]{
scroll-margin-top:92px;
}
/* Header controls: precision without changing their geometry */
.brand{
white-space:nowrap;
text-rendering:geometricPrecision;
}
.menu-toggle{
position:relative;
isolation:isolate;
transition:transform .24s var(--ba-polish-ease), opacity .24s ease;
}
.menu-toggle:hover{
transform:translateY(-1px);
}
.menu-toggle:active{
transform:translateY(0) scale(.97);
}
.menu-toggle:focus-visible{
outline:2px solid rgba(212,175,55,.65) !important;
outline-offset:4px;
}
/* Hero: improve optical centering and image stability only */
.hero{
contain:paint;
scroll-margin-top:0;
}
.hero-content{
transform-origin:center top;
will-change:transform,opacity;
}
.hero-logo{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.hero-logo img{
height:auto;
object-fit:contain;
backface-visibility:hidden;
}
.hero h1{
text-wrap:balance;
}
.tagline{
text-wrap:balance;
max-width:760px;
}
/* Existing CTAs/cards: more premium interaction without changing the design */
.cta{
position:relative;
overflow:hidden;
isolation:isolate;
}
.cta::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.10) 50%,transparent 80%);
transform:translateX(-120%);
transition:transform .65s var(--ba-polish-ease);
pointer-events:none;
}
.cta:hover::after{
transform:translateX(120%);
}
.card,
.stock-thesis-card,
.psychology-pillar,
.ba-travel-card,
.travel-photo{
backface-visibility:hidden;
}
/* Images: cleaner edges and less accidental layout shift */
.card img,
.stock-thesis-card img,
.psychology-pillar img,
.ba-travel-card img,
.travel-photo img{
display:block;
height:auto;
max-width:100%;
}
/* Section rhythm: preserve current sizes, make transitions feel intentional */
.section{
position:relative;
}
.section > h2,
.section-kicker{
text-rendering:geometricPrecision;
}
.section-kicker{
opacity:.94;
}
/* Focus states for keyboard users, without introducing visible UI for mouse users */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
outline:2px solid rgba(212,175,55,.68);
outline-offset:4px;
}
/* Lightbox polish */
.travel-lightbox{
overscroll-behavior:contain;
}
.travel-lightbox button:focus-visible{
outline:2px solid rgba(212,175,55,.75);
outline-offset:3px;
}
/* Mobile optical tuning — no content or layout redesign */
@media (max-width:760px){
.site-header{
padding-left:20px;
padding-right:20px;
}
.hero{
padding-left:18px;
padding-right:18px;
}
.hero-content{
width:min(100%,680px);
}
.hero-logo img{
max-width:52vw;
}
}
@media (max-width:480px){
main section,
section[id]{
scroll-margin-top:82px;
}
.site-header{
height:64px;
}
.hero{
padding-top:88px;
padding-bottom:56px;
}
}
/* Respect users who request reduced motion */
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
scroll-behavior:auto !important;
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.cta::after{
display:none;
}
}
/* FINAL USER REQUEST — more breathing room before Contact in hamburger */
.drawer .drawer-divider{
margin-top:50px !important;
margin-bottom:20px !important;
}
@media(max-width:600px){
.drawer .drawer-divider{
margin-top:40px !important;
}
}
/* B.A. Future Growth — extra breathing room before Contact */
.contact, .contact-link, .menu-contact, a[href*="contact"] {
margin-top: 28px !important;
}
/* FINAL CONTACT POSITION — clearly separated from Psychology Team */
.drawer .drawer-divider{
margin-top:110px !important;
margin-bottom:24px !important;
}
.drawer .drawer-contact-label{
margin-top:0 !important;
}
@media (max-width:600px){
.drawer .drawer-divider{margin-top:90px !important;}
}
/* FINAL MENU MOTION — all menu links slide in together */
.drawer .drawer-links > a,
.drawer.open .drawer-links > a{
transition-property:transform,opacity !important;
transition-duration:1.15s,1.15s !important;
transition-timing-function:cubic-bezier(.12,.72,.22,1),ease !important;
transition-delay:0s,0s !important;
}
.drawer.open .drawer-links > a:nth-child(n){
transition-delay:0s,0s !important;
}
/* Contact submenu joins the same entrance instead of arriving separately */
.drawer .contact-submenu a,
.drawer.open .contact-submenu a{
transition-property:transform,opacity,color !important;
transition-duration:1.15s,1.15s,.25s !important;
transition-timing-function:cubic-bezier(.12,.72,.22,1),ease,ease !important;
transition-delay:0s,0s,0s !important;
}
.drawer.open .contact-submenu a:nth-child(n){
transition-delay:0s,0s,0s !important;
}
/* HAMBURGER MENU — full-screen swipe across home page */
.drawer{
position:fixed !important;
inset:0 !important;
width:100vw !important;
max-width:none !important;
height:100vh !important;
transform:translateX(100%) !important;
transition:transform .72s cubic-bezier(.22,.72,.18,1) !important;
z-index:9999 !important;
overflow-y:auto !important;
}
.drawer.open{
transform:translateX(0) !important;
}
/* Menu contents move with the screen as one clean group */
.drawer .drawer-inner,
.drawer .drawer-content,
.drawer .drawer-links{
transform:none !important;
opacity:1 !important;
}
/* Keep the menu items together rather than staggered */
.drawer.open .drawer-links > a,
.drawer.open .contact-submenu a{
transition-delay:0s !important;
}
@media (prefers-reduced-motion:reduce){
.drawer{transition:none !important;}
}
/* COVER-ONLY HAMBURGER SWIPE */
.drawer{
position:fixed !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
left:auto !important;
width:100vw !important;
max-width:none !important;
height:100svh !important;
max-height:100svh !important;
min-height:0 !important;
transform:translate3d(100%,0,0) !important;
transition:transform .72s cubic-bezier(.22,.72,.18,1) !important;
overflow:hidden !important;
z-index:9999 !important;
box-sizing:border-box !important;
}
.drawer.open{
transform:translate3d(0,0,0) !important;
}
.drawer .drawer-inner{
height:100%;
max-height:100%;
overflow-y:auto;
box-sizing:border-box;
}
@media (prefers-reduced-motion:reduce){
.drawer{transition:none !important;}
}
/* REFERENCE-STYLE COVER SWIPE
The menu is a single sheet that sweeps across the hero/cover,
while the site header remains visible above it. */
.drawer{
position:fixed !important;
z-index:9999 !important;
top:clamp(190px,22vh,335px) !important;
right:0 !important;
bottom:0 !important;
left:0 !important;
width:100% !important;
max-width:none !important;
height:auto !important;
max-height:none !important;
min-height:0 !important;
background:var(--bg,#050505) !important;
border-left:0 !important;
border-top:1px solid var(--line) !important;
border-radius:42px 0 0 0 !important;
transform:translate3d(100%,0,0) !important;
transition:transform .72s cubic-bezier(.18,.78,.24,1) !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.drawer.open{
transform:translate3d(0,0,0) !important;
}
.drawer-inner{
height:100% !important;
max-height:100% !important;
overflow-y:auto !important;
box-sizing:border-box !important;
padding-top:42px !important;
}
.drawer .drawer-links > a,
.drawer .contact-submenu a{
transition-delay:0s !important;
}
@media (max-width:600px){
.drawer{
top:22vh !important;
border-radius:38px 0 0 0 !important;
}
.drawer-inner{
padding:34px 28px 40px !important;
}
}
@media (prefers-reduced-motion:reduce){
.drawer{transition:none !important;}
}
/* HIGH-CONTRAST GOLD MENU TEXT */
.drawer{
background:#c8a35a !important;
color:#081a2d !important;
}
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#081a2d !important;
font-weight:800 !important;
text-shadow:none !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#081a2d !important;
stroke:#081a2d !important;
}
.drawer .drawer-links > a:hover,
.drawer .contact-submenu a:hover{
color:#000b18 !important;
}
/* EXPLORE JOURNEY — DEEP NAVY */
.explore-journey,
.explore-journey a,
a.explore-journey,
.exploreJourney,
.exploreJourney a,
[href*="explore"]{
color:#071A2D !important;
-webkit-text-fill-color:#071A2D !important;
text-shadow:none !important;
}
/* FINAL NO-GOLD MENU SHEET */
.drawer,
.drawer.open,
.drawer::before,
.drawer .drawer-inner,
.drawer .drawer-content,
.drawer .menu-panel,
.drawer .menu-sheet,
.drawer .drawer-panel{
background:linear-gradient(135deg,#06182B 0%,#103A60 38%,#2B628C 70%,#9AAEBC 100%) !important;
background-color:#103A60 !important;
color:#FFFFFF !important;
}
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label,
.drawer .drawer-links,
.drawer .drawer-links *{
color:#FFFFFF !important;
-webkit-text-fill-color:#FFFFFF !important;
font-weight:800 !important;
text-shadow:0 1px 2px rgba(0,0,0,.28) !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#FFFFFF !important;
stroke:#FFFFFF !important;
}
/* B.A. FUTURE GROWTH GREEN — TOP LEFT BRAND MARK */
.drawer .drawer-brand,
.drawer .brand,
.drawer .logo,
.drawer .site-brand,
.drawer .brand-name,
.drawer .drawer-header .brand,
.drawer .drawer-header .logo{
color:#2F8F5B !important;
-webkit-text-fill-color:#2F8F5B !important;
}
.drawer .drawer-brand *,
.drawer .brand *,
.drawer .logo *,
.drawer .site-brand *,
.drawer .brand-name *,
.drawer .drawer-header .brand *,
.drawer .drawer-header .logo *{
color:#2F8F5B !important;
-webkit-text-fill-color:#2F8F5B !important;
stroke:#2F8F5B !important;
}
/* GREEN BRAND SHEET — B.A. FUTURE GROWTH */
.drawer,
.drawer.open,
.drawer::before,
.drawer .drawer-inner,
.drawer .drawer-content,
.drawer .menu-panel,
.drawer .menu-sheet,
.drawer .drawer-panel{
background:#2F8F5B !important;
background-image:none !important;
color:#071A2D !important;
}
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#071A2D !important;
-webkit-text-fill-color:#071A2D !important;
font-weight:800 !important;
text-shadow:none !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#071A2D !important;
stroke:#071A2D !important;
}
/* GREEN SHEET — WARM IVORY WORDS */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#FFF8E7 !important;
-webkit-text-fill-color:#FFF8E7 !important;
font-weight:800 !important;
text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#FFF8E7 !important;
stroke:#FFF8E7 !important;
}
/* GREEN SHEET — SUPER BLACK WORDS */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#050505 !important;
-webkit-text-fill-color:#050505 !important;
font-weight:900 !important;
text-shadow:none !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#050505 !important;
stroke:#050505 !important;
}
/* MENU TYPOGRAPHY — MATCH THE SITE */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
font-family:inherit !important;
color:#050505 !important;
-webkit-text-fill-color:#050505 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
text-shadow:none !important;
}
/* LARGER MENU WORDS — CLEAN, SITE-MATCHING TYPOGRAPHY */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
font-family:inherit !important;
font-size:clamp(1.35rem,5.2vw,2.25rem) !important;
line-height:1.08 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
color:#050505 !important;
-webkit-text-fill-color:#050505 !important;
text-shadow:none !important;
}
.drawer .drawer-links > a{
padding-top:.38em !important;
padding-bottom:.38em !important;
}
/* REFERENCE MENU TYPOGRAPHY — LARGE CONDENSED EDITORIAL STYLE */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
font-size:clamp(1.55rem,6vw,2.55rem) !important;
line-height:.98 !important;
font-weight:800 !important;
letter-spacing:-.025em !important;
color:#071A2D !important;
-webkit-text-fill-color:#071A2D !important;
text-shadow:none !important;
}
.drawer .drawer-links > a{
padding-top:.34em !important;
padding-bottom:.34em !important;
}
.drawer .chevron,
.drawer .close,
.drawer .menu-icon,
.drawer svg{
color:#071A2D !important;
stroke:#071A2D !important;
}
/* REFERENCE MENU — PURE BLACK TYPE */
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#000000 !important;
-webkit-text-fill-color:#000000 !important;
text-shadow:none !important;
}
.drawer .chevron,
.drawer .close,
.drawer .menu-icon,
.drawer svg{
color:#000000 !important;
stroke:#000000 !important;
}
/* PSYCHOLOGY + TEAM — PURE BLACK */
.drawer a[href*="psychology"],
.drawer a[href*="team"],
.drawer .psychology,
.drawer .team,
.drawer .psychology-team,
.drawer .psychology-team *{
color:#000000 !important;
-webkit-text-fill-color:#000000 !important;
font-weight:800 !important;
}
/* CONTEXT SECTION — MORE COMPACT */
.context,
.context-section,
#context,
[data-section="context"],
[class*="context-section"]{
padding-top:2.2rem !important;
padding-bottom:2.2rem !important;
}
.context h2,
.context-section h2,
#context h2,
[data-section="context"] h2{
font-size:clamp(1.45rem,4vw,2.1rem) !important;
margin-bottom:.65rem !important;
}
.context p,
.context-section p,
#context p,
[data-section="context"] p{
font-size:.92rem !important;
line-height:1.45 !important;
}
/* CONTEXT — FONT ONLY, 20–25% SMALLER */
.context p,
.context-section p,
#context p,
section[id*="context" i] p,
section[class*="context" i] p,
div[id*="context" i] p,
div[class*="context" i] p{
font-size:.78em !important;
line-height:1.45 !important;
}
.context h2,
.context-section h2,
#context h2,
section[id*="context" i] h2,
section[class*="context" i] h2,
div[id*="context" i] h2,
div[class*="context" i] h2{
font-size:.82em !important;
}
/* CONTEXT — MATCH THE MENU FONT, SMALLER */
.context,
.context-section,
#context,
[data-section="context"],
section[id*="context" i],
section[class*="context" i],
div[id*="context" i],
div[class*="context" i]{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
}
.context h1,.context h2,.context h3,.context h4,
.context-section h1,.context-section h2,.context-section h3,.context-section h4,
#context h1,#context h2,#context h3,#context h4,
section[id*="context" i] h1,section[id*="context" i] h2,
section[id*="context" i] h3,section[id*="context" i] h4,
section[class*="context" i] h1,section[class*="context" i] h2,
section[class*="context" i] h3,section[class*="context" i] h4{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
font-size:.70em !important;
line-height:1 !important;
font-weight:800 !important;
}
.context p,.context-section p,#context p,
section[id*="context" i] p,section[class*="context" i] p,
div[id*="context" i] p,div[class*="context" i] p{
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
font-size:.70em !important;
line-height:1.25 !important;
font-weight:700 !important;
}
/* CONTEXT — SMALLER LETTERING ONLY */
.context h1,.context h2,.context h3,.context h4,
.context-section h1,.context-section h2,.context-section h3,.context-section h4,
#context h1,#context h2,#context h3,#context h4,
section[id*="context" i] h1,section[id*="context" i] h2,
section[id*="context" i] h3,section[id*="context" i] h4,
section[class*="context" i] h1,section[class*="context" i] h2,
section[class*="context" i] h3,section[class*="context" i] h4{
font-size:.58em !important;
}
.context p,.context-section p,#context p,
section[id*="context" i] p,section[class*="context" i] p,
div[id*="context" i] p,div[class*="context" i] p{
font-size:.58em !important;
}
/* FINAL GREEN SHEET TOP-SPACE REFINEMENT */
.finance-section{padding-top:34px!important;}
.finance-header{padding-top:12px!important;}
@media(max-width:760px){.finance-section{padding-top:28px!important;} .finance-header{padding-top:8px!important;}}
/* FINAL — GREEN HAMBURGER SHEET PULLED ALL THE WAY UP */
.drawer{
top:0 !important;
border-radius:0 !important;
}
@media(max-width:600px){
.drawer{
top:0 !important;
border-radius:0 !important;
}
}
.drawer-inner{
padding-top:34px !important;
}
/* FINAL POSITION — green sheet slightly below B.A. Future Growth heading */
.drawer{
top:72px !important;
}
@media(max-width:600px){
.drawer{
top:72px !important;
}
}
/* Rounded left corner of green sheet */
.drawer{
border-top-left-radius:18px !important;
border-bottom-left-radius:18px !important;
}
/* FINAL MENU IMPLEMENTATION — larger top six, smaller contact links */
.drawer .drawer-links > a{
font-size:clamp(1.8rem,5.8vw,2.4rem) !important;
line-height:.98 !important;
font-weight:800 !important;
letter-spacing:-.025em !important;
}
.drawer .drawer-links > a .drawer-section-mark{
width:27px !important;
height:36px !important;
flex:0 0 27px !important;
}
.drawer .drawer-contact-label{
font-size:.58rem !important;
letter-spacing:.27em !important;
}
.drawer .contact-submenu a{
font-size:14px !important;
font-weight:400 !important;
letter-spacing:0 !important;
line-height:1.2 !important;
}
/* REMOVE THE GREEN HAMBURGER MENU DIVIDER ONLY */
.drawer-divider{
display:none !important;
height:0 !important;
border:0 !important;
background:none !important;
margin:0 !important;
}
/* FINAL READABILITY BOOST — Contact + Proverbs 16:9 */
.contact, .contact-link, a[href*="contact"], [class*="contact"] {
color: #111111 !important;
font-size: 1.08em !important;
font-weight: 800 !important;
text-shadow:
0 2px 4px rgba(0,0,0,.95),
0 0 8px rgba(0,0,0,.55);
opacity: 1 !important;
}
.proverbs, .proverb, [class*="proverb"], [class*="scripture"] {
color: #ffffff !important;
font-size: 1.12em !important;
font-weight: 800 !important;
letter-spacing: .015em !important;
text-shadow:
0 2px 5px rgba(0,0,0,.98),
0 0 10px rgba(0,0,0,.65);
opacity: 1 !important;
}
/* Proverbs 16:9 — intentional gold treatment */
.proverbs,
.proverb,
.scripture,
[class*="proverb"],
[class*="scripture"] {
color: #D4AF37 !important;
-webkit-text-fill-color: #D4AF37 !important;
font-weight: 800 !important;
text-shadow:
0 2px 4px rgba(0,0,0,.95),
0 0 8px rgba(0,0,0,.65);
opacity: 1 !important;
}
/* Sheet page polish */
.sheet,.sheet-page,.sheet-container,.menu-sheet,.menu-panel,.overlay-panel{
border-radius:18px!important;
box-shadow:0 14px 38px rgba(0,0,0,.18)!important;
}
.sheet h1,.sheet-page h1,.menu-sheet h1,.menu-panel h1{
letter-spacing:.01em;line-height:1.08;
}
.sheet .accent,.sheet-page .accent,.menu-sheet .accent{
color:#D4AF37!important;
}
@keyframes sheetEditorialIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.sheet,.sheet-page,.menu-sheet,.menu-panel,.overlay-panel{
animation:sheetEditorialIn .32s ease-out both;
}
.sheet a,.sheet-page a,.menu-sheet a,.menu-panel a{
transition:color .18s ease,opacity .18s ease,transform .18s ease;
}
.sheet a:hover,.sheet-page a:hover,.menu-sheet a:hover,.menu-panel a:hover{
opacity:.92;transform:translateY(-1px);
}
.proverbs,.proverb,[class*="proverb"],[class*="scripture"]{
margin-top:.75rem!important;
padding-top:.65rem!important;
border-top:1px solid rgba(212,175,55,.55)!important;
}
/* =========================================================
B.A. FUTURE GROWTH — ADVANCED MENU / SHEET REFINEMENT
v1 — premium hierarchy, spacing, alignment and interaction
Preserves the existing green-sheet identity and content.
========================================================= */
/* 01 — Tighter editorial composition */
.drawer{
top:72px !important;
border-top-left-radius:20px !important;
border-bottom-left-radius:20px !important;
background:#2F8F5B !important;
background-image:none !important;
box-shadow:
-24px 0 70px rgba(0,0,0,.28),
inset 1px 0 rgba(255,255,255,.08),
inset 0 1px rgba(255,255,255,.10) !important;
}
.drawer-inner{
height:100% !important;
min-height:0 !important;
padding:78px 42px 34px !important;
justify-content:flex-start !important;
overflow-y:auto !important;
}
/* 02 — Quiet editorial marker above the navigation */
.drawer-links{
position:relative;
padding-top:18px !important;
}
.drawer-links::before{
content:"EXPLORE";
display:block;
margin:0 0 22px 39px;
color:rgba(0,0,0,.52);
font-size:.58rem;
font-weight:900;
letter-spacing:.30em;
line-height:1;
}
/* 03 — Stronger hierarchy */
.drawer .drawer-links > a{
min-height:0 !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
width:fit-content;
padding:8px 0 !important;
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
font-size:clamp(1.72rem,5.5vw,2.25rem) !important;
line-height:.98 !important;
font-weight:800 !important;
letter-spacing:-.028em !important;
color:#050505 !important;
-webkit-text-fill-color:#050505 !important;
text-shadow:none !important;
transform-origin:left center;
transition:
transform .24s cubic-bezier(.22,1,.36,1),
opacity .24s ease,
letter-spacing .24s ease !important;
}
/* The Story gets a deliberate lead position */
.drawer .drawer-links > a:first-of-type{
font-size:clamp(2rem,6vw,2.55rem) !important;
letter-spacing:-.035em !important;
}
/* 04 — Consistent, optically smaller headphone marks */
.drawer .drawer-links > a .drawer-section-mark{
width:24px !important;
height:32px !important;
flex:0 0 24px !important;
object-fit:contain !important;
margin-right:1px;
}
/* 05 — Make Psychology Team a secondary destination */
.drawer .drawer-links > a[href="psychology-team.html"]{
margin-top:18px !important;
padding-top:18px !important;
border-top:1px solid rgba(0,0,0,.18) !important;
width:100% !important;
font-size:clamp(1.45rem,4.7vw,1.9rem) !important;
letter-spacing:-.02em !important;
}
.drawer .drawer-links > a[href="psychology-team.html"] .drawer-section-mark{
width:22px !important;
height:29px !important;
flex-basis:22px !important;
}
/* 06 — Refined hover / tap feedback */
.drawer .drawer-links > a:hover,
.drawer .drawer-links > a:focus-visible{
transform:translateX(5px) !important;
opacity:.76 !important;
letter-spacing:-.018em !important;
}
.drawer .drawer-links > a:active{
transform:translateX(2px) scale(.985) !important;
}
.drawer .drawer-links > a:focus-visible{
outline:2px solid rgba(0,0,0,.42) !important;
outline-offset:5px !important;
border-radius:3px;
}
/* 07 — Contact becomes a true secondary section */
.drawer-divider{
display:block !important;
height:1px !important;
width:100% !important;
margin:48px 0 19px !important;
background:rgba(0,0,0,.16) !important;
border:0 !important;
}
.drawer .drawer-contact-label{
margin:0 0 10px !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
font-size:.62rem !important;
font-weight:900 !important;
letter-spacing:.30em !important;
line-height:1 !important;
text-shadow:0 1px 1px rgba(0,0,0,.10) !important;
}
.drawer .contact-submenu{
display:flex !important;
flex-direction:column !important;
gap:1px !important;
}
.drawer .contact-submenu a{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
width:fit-content !important;
padding:7px 0 !important;
color:#050505 !important;
-webkit-text-fill-color:#050505 !important;
font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif !important;
font-size:clamp(.95rem,3.6vw,1.12rem) !important;
font-weight:700 !important;
line-height:1.15 !important;
opacity:.82 !important;
transition:transform .22s ease,opacity .22s ease !important;
}
.drawer .contact-submenu a:hover,
.drawer .contact-submenu a:focus-visible{
transform:translateX(5px) !important;
opacity:1 !important;
}
.drawer .contact-submenu a span{
width:20px !important;
margin:0 !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
font-family:inherit !important;
font-size:1rem !important;
text-align:center !important;
}
/* 08 — Proverbs becomes a signature, not a leftover footer */
.drawer .drawer-footer{
margin:42px 0 0 !important;
padding:18px 0 0 !important;
border-top:1px solid rgba(212,175,55,.40) !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
font-family:"Cormorant Garamond",Georgia,serif !important;
font-size:clamp(1rem,3.5vw,1.18rem) !important;
font-weight:600 !important;
letter-spacing:.14em !important;
line-height:1 !important;
text-align:center !important;
text-shadow:none !important;
}
/* Keep the duplicate navigation Proverbs hidden */
.drawer .drawer-links .drawer-proverbs{
display:none !important;
}
/* 09 — More polished sheet entrance */
.drawer.open .drawer-links > a{
animation:baSheetItemIn .62s cubic-bezier(.22,1,.36,1) both;
}
.drawer.open .drawer-links > a:nth-of-type(1){animation-delay:.04s}
.drawer.open .drawer-links > a:nth-of-type(2){animation-delay:.08s}
.drawer.open .drawer-links > a:nth-of-type(3){animation-delay:.12s}
.drawer.open .drawer-links > a:nth-of-type(4){animation-delay:.16s}
.drawer.open .drawer-links > a:nth-of-type(5){animation-delay:.20s}
.drawer.open .drawer-links > a:nth-of-type(6){animation-delay:.27s}
.drawer.open .drawer-divider,
.drawer.open .drawer-contact-label,
.drawer.open .contact-submenu,
.drawer.open .drawer-footer{
animation:baSheetSectionIn .58s cubic-bezier(.22,1,.36,1) both;
animation-delay:.32s;
}
@keyframes baSheetItemIn{
from{opacity:0;transform:translate3d(-14px,8px,0)}
to{opacity:1;transform:none}
}
@keyframes baSheetSectionIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
@media(max-width:600px){
.drawer{
top:72px !important;
border-top-left-radius:18px !important;
border-bottom-left-radius:18px !important;
}
.drawer-inner{
padding:64px 28px 28px !important;
}
.drawer-links::before{
margin-left:34px;
margin-bottom:18px;
}
.drawer .drawer-links > a{
padding:7px 0 !important;
}
.drawer .drawer-links > a[href="psychology-team.html"]{
margin-top:15px !important;
padding-top:15px !important;
}
.drawer-divider{
margin-top:38px !important;
}
.drawer .drawer-footer{
margin-top:34px !important;
}
}
@media(prefers-reduced-motion:reduce){
.drawer .drawer-links > a,
.drawer.open .drawer-links > a,
.drawer.open .drawer-divider,
.drawer.open .drawer-contact-label,
.drawer.open .contact-submenu,
.drawer.open .drawer-footer{
animation:none !important;
transition:none !important;
}
}
/* =========================================================
B.A. FUTURE GROWTH — SUPER ADVANCED MENU SLIDE
Premium layered slide-in: depth + clip reveal + stagger
========================================================= */
/* Backdrop arrives slightly before the sheet, creating depth. */
.menu-backdrop{
opacity:0 !important;
visibility:hidden !important;
background:
radial-gradient(circle at 76% 22%, rgba(98,214,167,.10), transparent 24%),
rgba(0,0,0,.72) !important;
backdrop-filter:blur(0px) saturate(100%) !important;
-webkit-backdrop-filter:blur(0px) saturate(100%) !important;
transition:
opacity .48s cubic-bezier(.22,1,.36,1),
visibility 0s linear .48s,
backdrop-filter .72s ease,
-webkit-backdrop-filter .72s ease !important;
}
body.menu-open .menu-backdrop{
opacity:1 !important;
visibility:visible !important;
backdrop-filter:blur(14px) saturate(120%) !important;
-webkit-backdrop-filter:blur(14px) saturate(120%) !important;
transition-delay:0s !important;
}
/* The sheet begins beyond the viewport and resolves into place
with a subtle perspective/scale effect. */
.drawer{
transform:translate3d(108%,0,0) scale(.965) !important;
transform-origin:right center !important;
opacity:.35 !important;
clip-path:inset(0 0 0 8% round 20px 0 0 20px) !important;
transition:
transform .82s cubic-bezier(.16,1,.3,1),
opacity .38s ease,
clip-path .82s cubic-bezier(.16,1,.3,1),
box-shadow .82s cubic-bezier(.16,1,.3,1) !important;
will-change:transform,opacity,clip-path !important;
overflow:hidden !important;
}
.drawer.open{
transform:translate3d(0,0,0) scale(1) !important;
opacity:1 !important;
clip-path:inset(0 0 0 0 round 20px 0 0 20px) !important;
box-shadow:
-42px 0 120px rgba(0,0,0,.52),
-10px 0 34px rgba(0,0,0,.24),
inset 1px 0 rgba(255,255,255,.10),
inset 0 1px rgba(255,255,255,.08) !important;
}
/* Moving highlight travels across the leading edge as the sheet opens. */
.drawer::after{
content:"";
position:absolute;
top:-10%;
left:-42%;
width:42%;
height:120%;
pointer-events:none;
z-index:20;
opacity:0;
transform:skewX(-12deg) translateX(0);
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.16),
rgba(212,175,55,.08),
transparent
);
filter:blur(8px);
}
.drawer.open::after{
opacity:1;
animation:baSheetLightSweep 1.05s cubic-bezier(.22,1,.36,1) .08s both;
}
@keyframes baSheetLightSweep{
from{transform:skewX(-12deg) translateX(0)}
to{transform:skewX(-12deg) translateX(390%)}
}
/* Subtle internal parallax/depth. */
.drawer-inner{
transform:translate3d(18px,0,0) scale(.985) !important;
opacity:.82 !important;
transition:
transform .72s cubic-bezier(.22,1,.36,1) .10s,
opacity .46s ease .10s !important;
}
.drawer.open .drawer-inner{
transform:translate3d(0,0,0) scale(1) !important;
opacity:1 !important;
}
/* Replace the old ultra-slow word motion with a crisp, premium cascade. */
.drawer .drawer-links > a{
opacity:0 !important;
transform:translate3d(42px,16px,0) scale(.97) !important;
filter:blur(4px) !important;
transition:
transform .62s cubic-bezier(.22,1,.36,1),
opacity .42s ease,
filter .52s ease !important;
will-change:transform,opacity,filter !important;
}
.drawer.open .drawer-links > a{
opacity:1 !important;
transform:translate3d(0,0,0) scale(1) !important;
filter:blur(0) !important;
}
.drawer.open .drawer-links > a:nth-child(1){transition-delay:.16s,.16s,.16s !important}
.drawer.open .drawer-links > a:nth-child(2){transition-delay:.22s,.22s,.22s !important}
.drawer.open .drawer-links > a:nth-child(3){transition-delay:.28s,.28s,.28s !important}
.drawer.open .drawer-links > a:nth-child(4){transition-delay:.34s,.34s,.34s !important}
.drawer.open .drawer-links > a:nth-child(5){transition-delay:.40s,.40s,.40s !important}
.drawer.open .drawer-links > a:nth-child(6){transition-delay:.48s,.48s,.48s !important}
/* Icons resolve a fraction behind their labels for layered motion. */
.drawer .drawer-links > a .drawer-section-mark{
transform:translateX(-8px) scale(.86) !important;
opacity:.15 !important;
transition:
transform .55s cubic-bezier(.22,1,.36,1),
opacity .4s ease !important;
}
.drawer.open .drawer-links > a .drawer-section-mark{
transform:translateX(0) scale(1) !important;
opacity:1 !important;
}
.drawer.open .drawer-links > a:nth-child(1) .drawer-section-mark{transition-delay:.25s,.25s !important}
.drawer.open .drawer-links > a:nth-child(2) .drawer-section-mark{transition-delay:.31s,.31s !important}
.drawer.open .drawer-links > a:nth-child(3) .drawer-section-mark{transition-delay:.37s,.37s !important}
.drawer.open .drawer-links > a:nth-child(4) .drawer-section-mark{transition-delay:.43s,.43s !important}
.drawer.open .drawer-links > a:nth-child(5) .drawer-section-mark{transition-delay:.49s,.49s !important}
.drawer.open .drawer-links > a:nth-child(6) .drawer-section-mark{transition-delay:.57s,.57s !important}
/* Secondary content enters after the main navigation. */
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
opacity:0 !important;
transform:translateY(18px) !important;
filter:blur(3px) !important;
transition:
opacity .5s ease,
transform .62s cubic-bezier(.22,1,.36,1),
filter .5s ease !important;
}
.drawer.open .drawer-contact-label,
.drawer.open .contact-submenu,
.drawer.open .drawer-footer{
opacity:1 !important;
transform:none !important;
filter:blur(0) !important;
}
.drawer.open .drawer-contact-label{transition-delay:.58s,.58s,.58s !important}
.drawer.open .contact-submenu{transition-delay:.64s,.64s,.64s !important}
.drawer.open .drawer-footer{transition-delay:.73s,.73s,.73s !important}
/* The sheet's green surface gets a tiny animated depth glow. */
.drawer.open{
animation:baSheetSurface 1.2s ease-out both;
}
@keyframes baSheetSurface{
0%{background-position:110% 50%}
100%{background-position:50% 50%}
}
/* Mobile: slightly quicker and less spatial for a natural thumb interaction. */
@media(max-width:600px){
.drawer{
transform:translate3d(105%,0,0) scale(.98) !important;
clip-path:inset(0 0 0 5% round 18px 0 0 18px) !important;
}
.drawer.open{
clip-path:inset(0 0 0 0 round 18px 0 0 18px) !important;
}
.drawer .drawer-links > a{
transform:translate3d(28px,10px,0) scale(.985) !important;
filter:blur(3px) !important;
transition-duration:.48s,.34s,.42s !important;
}
.drawer.open .drawer-links > a{
transform:none !important;
}
.drawer-inner{
transform:translate3d(10px,0,0) scale(.99) !important;
}
.drawer.open .drawer-inner{
transform:none !important;
}
}
/* Accessibility: respect reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
.menu-backdrop,
.drawer,
.drawer-inner,
.drawer .drawer-links > a,
.drawer .drawer-links > a .drawer-section-mark,
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
transition:none !important;
animation:none !important;
filter:none !important;
}
.drawer,
.drawer.open,
.drawer-inner,
.drawer.open .drawer-inner,
.drawer .drawer-links > a,
.drawer.open .drawer-links > a{
transform:none !important;
clip-path:none !important;
}
}
/* =========================================================
ULTRA-SYNCED SHEET — CONTENT TRAVELS WITH THE PANEL
The navigation is part of the sheet's physical movement:
no delayed floating text, no independent slide-in.
========================================================= */
/* Disable the previous per-item entrance behavior. */
.drawer .drawer-links > a,
.drawer .drawer-links > a .drawer-section-mark,
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
opacity:1 !important;
filter:none !important;
transition:none !important;
animation:none !important;
}
/* Everything inside the sheet is attached to the same moving
coordinate system. It simply rides with .drawer. */
.drawer-inner{
transform:none !important;
opacity:1 !important;
transition:none !important;
will-change:auto !important;
}
.drawer .drawer-links > a{
transform:none !important;
}
/* Slight physical parallax only inside the sheet, synchronized
to the sheet's own transform rather than delayed entrance. */
.drawer .drawer-links{
transform:translate3d(0,0,0);
}
.drawer.open .drawer-links{
animation:baSyncContent 820ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes baSyncContent{
0%{
transform:translate3d(10px,0,0);
opacity:.98;
}
100%{
transform:translate3d(0,0,0);
opacity:1;
}
}
/* The Contact/Proverbs area moves as one group with the navigation,
rather than appearing later. */
.drawer-divider,
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
animation:none !important;
opacity:1 !important;
transform:none !important;
filter:none !important;
}
/* Preserve the advanced panel reveal, but make the content motion
finish on the exact same visual beat as the sheet. */
.drawer{
transition:
transform .82s cubic-bezier(.16,1,.3,1),
opacity .38s ease,
clip-path .82s cubic-bezier(.16,1,.3,1),
box-shadow .82s cubic-bezier(.16,1,.3,1) !important;
}
.drawer.open .drawer-links{
animation-delay:0s !important;
animation-duration:.82s !important;
}
/* Close state: content never gets left behind. */
.drawer:not(.open) .drawer-links{
animation:none !important;
transform:translate3d(0,0,0) !important;
}
/* Mobile keeps the entire sheet/content relationship locked together. */
@media(max-width:600px){
.drawer.open .drawer-links{
animation-duration:.60s !important;
}
.drawer .drawer-links{
transform:none !important;
}
}
@media(prefers-reduced-motion:reduce){
.drawer,
.drawer.open .drawer-links{
transition:none !important;
animation:none !important;
}
}
/* =========================================================
LEFT EDITORIAL COMPOSITION
Strong left alignment + intentional negative space
========================================================= */
.drawer-inner{
align-items:flex-start !important;
text-align:left !important;
padding-left:38px !important;
padding-right:72px !important;
}
.drawer-links{
width:100% !important;
align-items:flex-start !important;
text-align:left !important;
}
.drawer-links::before{
margin-left:34px !important;
text-align:left !important;
}
.drawer .drawer-links > a{
margin-left:0 !important;
margin-right:auto !important;
justify-content:flex-start !important;
text-align:left !important;
}
/* Main navigation gets a clean left edge. */
.drawer .drawer-links > a:first-of-type{
padding-left:0 !important;
}
/* Secondary section follows the exact same visual column. */
.drawer .drawer-links > a[href="psychology-team.html"]{
width:100% !important;
margin-left:0 !important;
padding-left:0 !important;
}
/* Contact follows the same left edge rather than centering. */
.drawer-divider{
margin-left:0 !important;
margin-right:auto !important;
}
.drawer .drawer-contact-label,
.drawer .contact-submenu{
text-align:left !important;
align-items:flex-start !important;
}
.drawer .drawer-contact-label{
margin-left:0 !important;
}
.drawer .contact-submenu a{
margin-left:0 !important;
margin-right:auto !important;
}
/* Keep Proverbs as the deliberate visual exception:
centered at the bottom, giving the composition a signature finish. */
.drawer .drawer-footer{
width:100% !important;
text-align:center !important;
}
/* More breathing room on the right makes the slide feel intentional,
not cramped against the viewport. */
@media(max-width:600px){
.drawer-inner{
padding-left:30px !important;
padding-right:52px !important;
}
.drawer-links::before{
margin-left:34px !important;
}
}
/* =========================================================
B.A. FUTURE GROWTH — FINAL PREMIUM REFINEMENT
========================================================= */
/* 1. Richer green surface without changing the identity. */
.drawer{
background:
radial-gradient(circle at 18% 10%, rgba(255,255,255,.075), transparent 30%),
linear-gradient(135deg, #2F8F5B 0%, #2D8957 52%, #287E50 100%) !important;
background-size:100% 100% !important;
}
/* 2. One precise editorial alignment column. */
.drawer-inner{
padding-left:40px !important;
padding-right:78px !important;
}
.drawer-links::before{
margin-left:34px !important;
margin-bottom:20px !important;
}
/* 3. The Story gets a controlled lead without becoming oversized. */
.drawer .drawer-links > a:first-of-type{
font-size:clamp(2.05rem,6vw,2.6rem) !important;
margin-bottom:3px !important;
}
/* 4. Cleaner gold system: restrained, premium accents only. */
.drawer .drawer-contact-label,
.drawer .drawer-footer,
.drawer .contact-submenu a span{
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
}
.drawer .drawer-footer{
border-top-color:rgba(212,175,55,.46) !important;
letter-spacing:.16em !important;
}
/* 5. Integrated close button — assumed common close control selectors. */
.drawer-close,
.menu-close,
.close-menu,
[data-menu-close]{
transition:
transform .28s cubic-bezier(.22,1,.36,1),
opacity .22s ease !important;
}
.drawer-close:hover,
.menu-close:hover,
.close-menu:hover,
[data-menu-close]:hover{
transform:rotate(90deg) scale(1.06) !important;
opacity:.78 !important;
}
.drawer-close:active,
.menu-close:active,
.close-menu:active,
[data-menu-close]:active{
transform:rotate(90deg) scale(.94) !important;
}
/* 6. Subtle tactile response for menu links. */
.drawer .drawer-links > a{
transition:
transform .20s cubic-bezier(.22,1,.36,1),
opacity .20s ease,
letter-spacing .20s ease !important;
}
@media (hover:hover) and (pointer:fine){
.drawer .drawer-links > a:hover{
transform:translateX(4px) !important;
opacity:.78 !important;
}
}
.drawer .drawer-links > a:active{
transform:translateX(2px) scale(.985) !important;
opacity:.66 !important;
}
/* 7. Refined sheet edge — dimension without a heavy shadow. */
.drawer{
border-left:1px solid rgba(255,255,255,.10) !important;
box-shadow:
-38px 0 100px rgba(0,0,0,.42),
inset 1px 0 rgba(255,255,255,.08) !important;
}
/* 8. Contact divider aligns with the same editorial column. */
.drawer-divider{
width:100% !important;
margin-top:44px !important;
margin-bottom:18px !important;
}
/* 9. Keep the right side deliberately quiet. */
.drawer .drawer-links,
.drawer .drawer-contact-label,
.drawer .contact-submenu{
max-width:360px !important;
}
/* 10. Mobile stays spacious without becoming cramped. */
@media(max-width:600px){
.drawer-inner{
padding-left:30px !important;
padding-right:54px !important;
}
.drawer .drawer-links,
.drawer .drawer-contact-label,
.drawer .contact-submenu{
max-width:calc(100vw - 84px) !important;
}
.drawer .drawer-links > a:first-of-type{
font-size:clamp(1.9rem,7.5vw,2.35rem) !important;
}
}
@media(prefers-reduced-motion:reduce){
.drawer .drawer-links > a,
.drawer-close,
.menu-close,
.close-menu,
[data-menu-close]{
transition:none !important;
}
}
/* =========================================================
CONTACT — MORE AIR / LESS CROWDING
========================================================= */
/* Give the Contact section a clear visual pause after Psychology Team. */
.drawer-divider{
margin-top:62px !important;
margin-bottom:22px !important;
}
/* More room between the Contact label and its links. */
.drawer .drawer-contact-label{
margin-bottom:16px !important;
letter-spacing:.32em !important;
}
/* Give each contact option breathing room and a larger tap target. */
.drawer .contact-submenu{
gap:7px !important;
}
.drawer .contact-submenu a{
padding:9px 0 !important;
line-height:1.3 !important;
}
/* Give Proverbs its own generous separation from Contact. */
.drawer .drawer-footer{
margin-top:52px !important;
padding-top:20px !important;
}
/* Slightly more room on smaller screens too. */
@media(max-width:600px){
.drawer-divider{
margin-top:50px !important;
margin-bottom:20px !important;
}
.drawer .drawer-contact-label{
margin-bottom:14px !important;
}
.drawer .contact-submenu{
gap:5px !important;
}
.drawer .contact-submenu a{
padding:8px 0 !important;
}
.drawer .drawer-footer{
margin-top:44px !important;
padding-top:18px !important;
}
}
/* =========================================================
CONTACT — MOVE THE ENTIRE SECTION DOWN
========================================================= */
/* The divider is the top anchor of the whole Contact block.
Increase its top margin to push Contact + links downward together. */
.drawer-divider{
margin-top:88px !important;
margin-bottom:22px !important;
}
/* Keep the Contact label and links attached to that moved anchor. */
.drawer .drawer-contact-label{
margin-top:0 !important;
margin-bottom:17px !important;
}
.drawer .contact-submenu{
margin-top:0 !important;
}
/* Preserve generous space before the Proverbs signature. */
.drawer .drawer-footer{
margin-top:58px !important;
padding-top:20px !important;
}
@media(max-width:600px){
.drawer-divider{
margin-top:70px !important;
margin-bottom:20px !important;
}
.drawer .drawer-contact-label{
margin-bottom:15px !important;
}
.drawer .drawer-footer{
margin-top:48px !important;
padding-top:18px !important;
}
}
/* =========================================================
DEFINITIVE CONTACT POSITION FIX
Visually moves the whole Contact group down.
========================================================= */
.drawer .drawer-divider{
position:relative !important;
top:58px !important;
margin-bottom:80px !important;
}
.drawer .drawer-contact-label{
position:relative !important;
top:58px !important;
margin-bottom:75px !important;
}
.drawer .contact-submenu{
position:relative !important;
top:58px !important;
}
.drawer .drawer-footer{
position:relative !important;
top:58px !important;
margin-top:58px !important;
}
@media(max-width:600px){
.drawer .drawer-divider{
top:44px !important;
margin-bottom:64px !important;
}
.drawer .drawer-contact-label{
top:44px !important;
margin-bottom:59px !important;
}
.drawer .contact-submenu,
.drawer .drawer-footer{
top:44px !important;
}
}
/* =========================================================
CONTACT — FINAL POSITION ADJUSTMENT
Move the entire Contact group up slightly from the
definitive-down version.
========================================================= */
.drawer .drawer-divider,
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
top:42px !important;
}
@media(max-width:600px){
.drawer .drawer-divider,
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
top:32px !important;
}
}
/* =========================================================
CONTACT LINKS — MOVE UP SLIGHTLY
Keeps CONTACT heading where it is; only the two links move.
========================================================= */
.drawer .contact-submenu{
transform:translateY(-8px) !important;
}
@media(max-width:600px){
.drawer .contact-submenu{
transform:translateY(-6px) !important;
}
}
/* =========================================================
B.A. FUTURE GROWTH — HAMBURGER 100,000X POLISH
Final art-direction layer: hierarchy, rhythm, depth,
optical alignment, interaction and accessibility.
========================================================= */
/* ---------- DESIGN TOKENS ---------- */
.drawer{
--ba-green:#2F8F5B;
--ba-green-deep:#287D50;
--ba-ink:#050505;
--ba-gold:#D4AF37;
--ba-muted:rgba(5,5,5,.52);
--ba-rule:rgba(5,5,5,.16);
--ba-white:rgba(255,255,255,.10);
}
/* ---------- SURFACE: QUIET LUXURY ---------- */
.drawer{
background:
radial-gradient(900px 520px at 8% 2%, rgba(255,255,255,.075), transparent 52%),
radial-gradient(620px 500px at 100% 100%, rgba(0,0,0,.055), transparent 58%),
linear-gradient(135deg,#2F8F5B 0%,#2D8957 54%,#287E50 100%) !important;
isolation:isolate !important;
}
/* A restrained inner highlight makes the sheet feel dimensional. */
.drawer::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:-1;
border:1px solid rgba(255,255,255,.07);
border-left-color:rgba(255,255,255,.12);
border-radius:20px 0 0 20px;
}
/* ---------- LAYOUT RHYTHM ---------- */
.drawer-inner{
padding-top:64px !important;
padding-left:40px !important;
padding-right:78px !important;
padding-bottom:34px !important;
}
.drawer-links{
width:100% !important;
max-width:365px !important;
}
/* "EXPLORE" becomes a precise editorial eyebrow. */
.drawer-links::before{
margin-left:34px !important;
margin-bottom:18px !important;
color:rgba(5,5,5,.48) !important;
font-size:.56rem !important;
letter-spacing:.34em !important;
}
/* ---------- NAVIGATION TYPOGRAPHY ---------- */
.drawer .drawer-links > a{
position:relative !important;
width:100% !important;
min-height:43px !important;
padding:7px 0 !important;
gap:11px !important;
color:var(--ba-ink) !important;
-webkit-text-fill-color:var(--ba-ink) !important;
font-size:clamp(1.68rem,5.35vw,2.16rem) !important;
font-weight:800 !important;
line-height:.98 !important;
letter-spacing:-.032em !important;
text-rendering:geometricPrecision !important;
}
/* Optical hierarchy: first destination leads, but not excessively. */
.drawer .drawer-links > a:first-of-type{
font-size:clamp(2rem,6vw,2.52rem) !important;
letter-spacing:-.038em !important;
padding-top:3px !important;
padding-bottom:9px !important;
}
/* A tiny gold rule appears only on the active/hover state. */
.drawer .drawer-links > a::after{
content:"";
position:absolute;
left:35px;
bottom:2px;
width:0;
height:2px;
border-radius:2px;
background:var(--ba-gold);
transition:width .24s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
.drawer .drawer-links > a:hover::after,
.drawer .drawer-links > a:focus-visible::after{
width:30px;
}
}
/* ---------- ICON OPTICS ---------- */
.drawer .drawer-links > a .drawer-section-mark{
width:22px !important;
height:29px !important;
flex:0 0 22px !important;
object-fit:contain !important;
transform:none !important;
opacity:1 !important;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.08)) !important;
}
/* ---------- PSYCHOLOGY TEAM: SECONDARY NAV ---------- */
.drawer .drawer-links > a[href="psychology-team.html"]{
margin-top:20px !important;
padding-top:17px !important;
border-top:1px solid var(--ba-rule) !important;
font-size:clamp(1.35rem,4.45vw,1.78rem) !important;
letter-spacing:-.02em !important;
}
/* ---------- CONTACT: CLEAR, SPACIOUS, PURPOSEFUL ---------- */
.drawer-divider{
height:1px !important;
margin-top:44px !important;
margin-bottom:18px !important;
background:var(--ba-rule) !important;
border:0 !important;
}
.drawer .drawer-contact-label{
margin:0 0 12px !important;
color:var(--ba-gold) !important;
-webkit-text-fill-color:var(--ba-gold) !important;
font-size:.58rem !important;
font-weight:900 !important;
letter-spacing:.34em !important;
line-height:1 !important;
}
/* The two links remain close enough to feel like one group,
but have distinct tap targets. */
.drawer .contact-submenu{
gap:3px !important;
transform:translateY(-8px) !important;
}
.drawer .contact-submenu a{
min-height:38px !important;
padding:7px 0 !important;
gap:9px !important;
color:var(--ba-ink) !important;
-webkit-text-fill-color:var(--ba-ink) !important;
font-size:clamp(.92rem,3.45vw,1.08rem) !important;
font-weight:700 !important;
line-height:1.15 !important;
letter-spacing:-.005em !important;
}
.drawer .contact-submenu a span{
width:18px !important;
color:var(--ba-gold) !important;
-webkit-text-fill-color:var(--ba-gold) !important;
}
/* ---------- PROVERBS: SIGNATURE FINISH ---------- */
.drawer .drawer-footer{
width:100% !important;
margin-top:48px !important;
padding-top:19px !important;
border-top:1px solid rgba(212,175,55,.42) !important;
color:var(--ba-gold) !important;
-webkit-text-fill-color:var(--ba-gold) !important;
font-family:"Cormorant Garamond",Georgia,serif !important;
font-size:clamp(.98rem,3.4vw,1.16rem) !important;
font-weight:600 !important;
letter-spacing:.13em !important;
line-height:1.1 !important;
text-align:center !important;
}
/* ---------- INTERACTION: QUIET, TACTILE ---------- */
.drawer .drawer-links > a{
transform:translate3d(0,0,0) !important;
transition:
transform .20s cubic-bezier(.22,1,.36,1),
opacity .20s ease,
letter-spacing .20s ease !important;
}
@media (hover:hover) and (pointer:fine){
.drawer .drawer-links > a:hover{
transform:translate3d(4px,0,0) !important;
opacity:.78 !important;
}
}
.drawer .drawer-links > a:active{
transform:translate3d(2px,0,0) scale(.985) !important;
opacity:.66 !important;
}
.drawer .contact-submenu a{
transition:transform .20s cubic-bezier(.22,1,.36,1),opacity .20s ease !important;
}
@media (hover:hover) and (pointer:fine){
.drawer .contact-submenu a:hover{
transform:translate3d(4px,0,0) !important;
opacity:1 !important;
}
}
/* ---------- FOCUS: BEAUTIFUL + ACCESSIBLE ---------- */
.drawer a:focus-visible,
.drawer button:focus-visible{
outline:2px solid rgba(212,175,55,.85) !important;
outline-offset:5px !important;
border-radius:3px !important;
}
/* ---------- CLOSE CONTROL: INTEGRATED ---------- */
.drawer-close,
.menu-close,
.close-menu,
[data-menu-close]{
transition:
transform .28s cubic-bezier(.22,1,.36,1),
opacity .20s ease !important;
}
@media (hover:hover) and (pointer:fine){
.drawer-close:hover,
.menu-close:hover,
.close-menu:hover,
[data-menu-close]:hover{
transform:rotate(90deg) scale(1.06) !important;
opacity:.78 !important;
}
}
.drawer-close:active,
.menu-close:active,
.close-menu:active,
[data-menu-close]:active{
transform:rotate(90deg) scale(.94) !important;
}
/* ---------- MOBILE OPTICAL REFINEMENT ---------- */
@media(max-width:600px){
.drawer{
border-top-left-radius:18px !important;
border-bottom-left-radius:18px !important;
}
.drawer-inner{
padding:58px 54px 28px 30px !important;
}
.drawer-links{
max-width:100% !important;
}
.drawer-links::before{
margin-left:33px !important;
margin-bottom:16px !important;
}
.drawer .drawer-links > a{
min-height:42px !important;
padding:7px 0 !important;
}
.drawer .drawer-links > a:first-of-type{
padding-top:2px !important;
}
.drawer .drawer-links > a[href="psychology-team.html"]{
margin-top:18px !important;
padding-top:15px !important;
}
.drawer-divider{
margin-top:42px !important;
}
.drawer .drawer-footer{
margin-top:42px !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
.drawer,
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer-close,
.menu-close,
.close-menu,
[data-menu-close],
.drawer .drawer-links > a::after{
transition:none !important;
animation:none !important;
}
}
/* ---------- SMILEY LOGO COLOR SHEET — FINAL ---------- */
/* Uses the actual smiley mark palette: teal → green → yellow-green. */
.drawer,
.drawer.open,
.drawer::before,
.drawer .drawer-inner,
.drawer .drawer-content,
.drawer .menu-panel,
.drawer .menu-sheet,
.drawer .drawer-panel{
background:
linear-gradient(
135deg,
#489889 0%,
#5FA477 34%,
#86B35F 67%,
#BBCB5E 100%
) !important;
background-color:#5FA477 !important;
background-image:
linear-gradient(
135deg,
#489889 0%,
#5FA477 34%,
#86B35F 67%,
#BBCB5E 100%
) !important;
color:#071A2D !important;
}
.drawer .drawer-links > a,
.drawer .contact-submenu a,
.drawer button,
.drawer .drawer-title,
.drawer .drawer-label{
color:#071A2D !important;
-webkit-text-fill-color:#071A2D !important;
text-shadow:0 1px 0 rgba(255,255,255,.16) !important;
}
.drawer svg,
.drawer .chevron,
.drawer .close,
.drawer .menu-icon{
color:#071A2D !important;
stroke:#071A2D !important;
}
.drawer .drawer-footer{
color:#071A2D !important;
-webkit-text-fill-color:#071A2D !important;
border-top-color:rgba(7,26,45,.28) !important;
}
.drawer a:focus-visible,
.drawer button:focus-visible{
outline-color:rgba(255,255,255,.78) !important;
}
/* ---------- SMILEY SHEET — FULL-BLEED SIDE + ROUNDED TOP-LEFT ---------- */
.drawer{
width:100vw !important;
max-width:100vw !important;
right:0 !important;
left:auto !important;
top:0 !important;
bottom:0 !important;
border-left:0 !important;
border-top-left-radius:38px !important;
border-bottom-left-radius:38px !important;
overflow:hidden !important;
clip-path:none !important;
box-shadow:none !important;
background:
linear-gradient(135deg,#489889 0%,#5FA477 34%,#86B35F 67%,#BBCB5E 100%) !important;
}
.drawer::before{
inset:0 !important;
border:0 !important;
border-radius:inherit !important;
background-image:none !important;
opacity:1 !important;
z-index:0 !important;
pointer-events:none !important;
}
.drawer::after{
display:none !important;
}
.drawer-inner,
.drawer .drawer-content,
.drawer .menu-panel,
.drawer .menu-sheet,
.drawer .drawer-panel{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
}
@media(max-width:600px){
.drawer{
width:100vw !important;
max-width:100vw !important;
border-top-left-radius:38px !important;
border-bottom-left-radius:38px !important;
}
.drawer-inner{
width:100% !important;
padding-left:40px !important;
padding-right:40px !important;
}
}
/* FINAL HEADER PRESERVATION — keep B.A. FUTURE GROWTH + hamburger above the smiley sheet */
.site-header{
position:sticky !important;
top:0 !important;
z-index:2000 !important;
background:#000 !important;
}
.site-header .brand{
display:block !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
z-index:2002 !important;
}
.site-header .menu-toggle{
display:grid !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
z-index:2002 !important;
}
/* The sheet begins below the header so it never covers the brand or hamburger. */
.drawer{
top:72px !important;
bottom:0 !important;
height:calc(100dvh - 72px) !important;
z-index:1999 !important;
border-top-left-radius:38px !important;
border-bottom-left-radius:38px !important;
}
@media(max-width:760px){
.site-header{height:68px !important;}
.drawer{
top:68px !important;
height:calc(100dvh - 68px) !important;
border-top-left-radius:38px !important;
border-bottom-left-radius:38px !important;
}
}
/* =========================================================
B.A. FUTURE GROWTH — FINAL HAMBURGER SHEET POLISH
Background intentionally preserved from the uploaded version.
========================================================= */
/* Keep the existing sheet background exactly as supplied. */
.drawer{
background:inherit !important;
background-color:inherit !important;
background-image:inherit !important;
}
/* Premium edge treatment without changing the surface color. */
.drawer{
isolation:isolate !important;
box-shadow:
-22px 0 55px rgba(0,0,0,.16),
inset 1px 0 rgba(255,255,255,.10) !important;
}
/* Refined internal rhythm. */
.drawer-inner{
position:relative !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
scrollbar-width:thin !important;
scrollbar-color:rgba(5,5,5,.22) transparent !important;
}
.drawer-inner::-webkit-scrollbar{width:4px}
.drawer-inner::-webkit-scrollbar-track{background:transparent}
.drawer-inner::-webkit-scrollbar-thumb{
background:rgba(5,5,5,.22);
border-radius:99px;
}
/* Navigation gets a more intentional vertical cadence. */
.drawer .drawer-links{
position:relative !important;
}
.drawer .drawer-links > a{
min-height:48px !important;
display:flex !important;
align-items:center !important;
border-radius:12px !important;
padding-left:6px !important;
padding-right:6px !important;
-webkit-tap-highlight-color:transparent !important;
}
/* The icon/text relationship is optically centered. */
.drawer .drawer-links > a .drawer-section-mark{
margin-right:2px !important;
}
/* Very subtle interaction surface; no color replacement. */
@media (hover:hover) and (pointer:fine){
.drawer .drawer-links > a:hover{
background:rgba(255,255,255,.075) !important;
transform:translate3d(5px,0,0) !important;
}
}
.drawer .drawer-links > a:active{
background:rgba(0,0,0,.06) !important;
}
/* Make the section rule feel deliberate rather than decorative. */
.drawer .drawer-links > a[href="psychology-team.html"]{
position:relative !important;
}
.drawer .drawer-links > a[href="psychology-team.html"]::before{
content:"";
position:absolute;
left:6px;
right:6px;
top:-1px;
height:1px;
background:rgba(5,5,5,.16);
}
/* Contact group gets a clearer visual landing zone. */
.drawer-divider{
margin-left:6px !important;
margin-right:6px !important;
}
.drawer .drawer-contact-label{
padding-left:6px !important;
}
.drawer .contact-submenu a{
border-radius:10px !important;
padding-left:8px !important;
padding-right:8px !important;
}
@media (hover:hover) and (pointer:fine){
.drawer .contact-submenu a:hover{
background:rgba(255,255,255,.065) !important;
transform:translate3d(4px,0,0) !important;
}
}
/* Proverbs becomes a clean signature rather than a heavy footer. */
.drawer .drawer-footer{
position:relative !important;
margin-left:6px !important;
margin-right:6px !important;
padding-left:10px !important;
padding-right:10px !important;
letter-spacing:.12em !important;
}
.drawer .drawer-footer::before{
content:"";
position:absolute;
top:-1px;
left:25%;
width:50%;
height:1px;
background:rgba(212,175,55,.55);
}
/* Better opening/closing feel while preserving the existing mechanism. */
.drawer{
transition:
transform .48s cubic-bezier(.16,1,.3,1),
box-shadow .35s ease !important;
}
.drawer.open{
box-shadow:
-28px 0 70px rgba(0,0,0,.20),
inset 1px 0 rgba(255,255,255,.10) !important;
}
/* Mobile: maximize usable space while keeping the same sheet surface. */
@media(max-width:600px){
.drawer-inner{
padding-left:32px !important;
padding-right:32px !important;
padding-bottom:24px !important;
}
.drawer .drawer-links > a{
min-height:50px !important;
}
.drawer .drawer-links > a:first-of-type{
min-height:54px !important;
}
.drawer-divider{
margin-left:4px !important;
margin-right:4px !important;
}
.drawer .drawer-footer{
margin-left:4px !important;
margin-right:4px !important;
}
}
/* Respect reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
.drawer{
transition:none !important;
}
}
@keyframes baSheetItemIn{
from{opacity:0;transform:translate3d(0,8px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
.drawer .drawer-links > a,
.drawer .drawer-divider,
.drawer .drawer-contact-label,
.drawer .contact-submenu a,
.drawer .drawer-footer{
animation:none !important;
}
}
/* FINAL TRAVEL FIX — exact song pairing inside the photo viewer */
.ba-atlas-song{
margin:10px auto 2px;
max-width:760px;
padding:7px 12px;
text-align:center;
font-size:.78rem;
font-weight:800;
letter-spacing:.015em;
line-height:1.35;
color:inherit;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
}
.ba-atlas-song[hidden]{display:none!important}
@media(max-width:600px){
.ba-atlas-song{
max-width:calc(100vw - 44px);
font-size:.70rem;
padding:7px 10px;
border-radius:12px;
}
}
/* FINAL TRAVEL BUG FIX:
filters hide the complete photo/song item so soundtrack lines
can never float away from their photo. */
.ba-travel-grid .ba-travel-item.is-hidden{
display:none !important;
}
/* Exact soundtrack shown in the active photo viewer. */
.ba-lightbox-song{
margin-top:10px;
padding-top:9px;
border-top:1px solid rgba(212,175,55,.35);
font-weight:700;
line-height:1.35;
text-align:center;
}
/* =========================================================
B.A. FUTURE GROWTH — TRAVEL CLEAN FRAME
City above photo • Country below photo • simple travel border
========================================================= */
.ba-atlas-photo-wrap{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
width:fit-content!important;
max-width:calc(100vw - 150px)!important;
max-height:100%!important;
margin:auto!important;
}
.ba-atlas-photo-frame{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
border:1px solid rgba(212,175,55,.82);
border-radius:14px;
background:
linear-gradient(90deg, transparent 0 8%, rgba(212,175,55,.55) 8% 10%, transparent 10% 90%, rgba(212,175,55,.55) 90% 92%, transparent 92%),
#050505;
box-shadow:
0 0 0 1px rgba(212,175,55,.12),
0 0 24px rgba(212,175,55,.12),
0 30px 100px rgba(0,0,0,.72);
}
.ba-atlas-photo-frame::after{
content:"✈";
position:absolute;
left:50%;
top:-10px;
transform:translateX(-50%);
padding:0 7px;
background:#050505;
color:rgba(212,175,55,.9);
font-size:12px;
line-height:20px;
}
.ba-atlas-main{
border:0!important;
box-shadow:none!important;
border-radius:9px!important;
max-width:min(86vw,1260px);
max-height:68vh;
}
.ba-atlas-place-top,
.ba-atlas-place-bottom{
text-align:center;
color:#fff;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.ba-atlas-place-top{
font-size:clamp(15px,1.5vw,22px);
color:#d4af37;
margin-bottom:1px;
}
.ba-atlas-place-bottom{
font-size:clamp(11px,1vw,15px);
color:rgba(255,255,255,.78);
margin-top:1px;
}
.ba-atlas-title{
display:none!important;
}
@media(max-width:700px){
.ba-atlas-photo-wrap{
max-width:calc(100vw - 90px)!important;
gap:7px!important;
}
.ba-atlas-photo-frame{
padding:5px;
border-radius:11px;
}
.ba-atlas-main{
max-width:94vw;
max-height:58vh;
border-radius:7px!important;
}
.ba-atlas-place-top{font-size:13px;letter-spacing:.14em}
.ba-atlas-place-bottom{font-size:10px;letter-spacing:.12em}
}
/* Small passport-style travel stamp */
.ba-travel-stamp{
position:absolute;
right:10px;
bottom:10px;
z-index:4;
width:58px;
height:58px;
border:1.5px dashed rgba(212,175,55,.78);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:rgba(212,175,55,.86);
font-size:8px;
font-weight:700;
letter-spacing:.08em;
transform:rotate(-9deg);
background:rgba(0,0,0,.28);
box-shadow:0 1px 8px rgba(0,0,0,.35);
opacity:.9;
}
.ba-travel-stamp::before{
content:"";
position:absolute;
inset:4px;
border:1px solid rgba(212,175,55,.38);
border-radius:50%;
}
@media(max-width:700px){
.ba-travel-stamp{
width:44px;height:44px;
right:7px;bottom:7px;
font-size:6px;
}
}
/* =========================================================
TRAVEL — 10 FEATURE POLISH PASS
1 glow • 2 city/country labels • 3 stamp • 4 frame
5 song • 6 transitions • 7 mobile • 8 zoom
9 counter • 10 subtle entrance animation
========================================================= */
.ba-atlas-photo-wrap{
perspective:1200px;
}
.ba-atlas-photo-frame{
position:relative;
isolation:isolate;
transition:box-shadow .35s ease, transform .35s ease;
box-shadow:
0 0 0 1px rgba(212,175,55,.14),
0 0 22px rgba(212,175,55,.10),
0 24px 80px rgba(0,0,0,.64);
animation:baTravelPhotoIn .48s cubic-bezier(.2,.75,.25,1) both;
}
.ba-atlas-photo-glow{
position:absolute;
inset:-9px;
border-radius:18px;
background:radial-gradient(ellipse at center, rgba(212,175,55,.16), transparent 68%);
filter:blur(13px);
opacity:.72;
z-index:-1;
pointer-events:none;
}
.ba-atlas-main{
cursor:zoom-in;
transition:
transform .42s cubic-bezier(.2,.75,.25,1),
filter .35s ease,
opacity .28s ease;
will-change:transform;
}
.ba-atlas-main:focus-visible{
outline:2px solid rgba(212,175,55,.8);
outline-offset:4px;
}
.ba-atlas-main.is-zoomed{
transform:scale(1.12);
cursor:zoom-out;
filter:saturate(1.03) contrast(1.02);
}
.ba-atlas-place-top,
.ba-atlas-place-bottom{
user-select:none;
}
.ba-atlas-song{
min-height:17px;
max-width:min(86vw,720px);
text-align:center;
color:rgba(255,255,255,.72);
font-size:11px;
line-height:1.35;
letter-spacing:.045em;
margin-top:1px;
animation:baTravelFadeUp .55s .08s both;
}
.ba-atlas-zoom-hint{
font-size:9px;
letter-spacing:.11em;
text-transform:uppercase;
color:rgba(255,255,255,.34);
margin-top:-3px;
}
@keyframes baTravelPhotoIn{
from{opacity:0;transform:translateY(8px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes baTravelFadeUp{
from{opacity:0;transform:translateY(5px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:700px){
.ba-atlas-main.is-zoomed{transform:scale(1.07)}
.ba-atlas-song{font-size:9px;max-width:92vw}
.ba-atlas-zoom-hint{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
.ba-atlas-photo-frame,
.ba-atlas-song,
.ba-atlas-main{
animation:none!important;
transition:none!important;
}
}
/* FINAL CLEAN FIX — Proverbs 16:9 in hamburger menu */
.drawer .drawer-footer{
display:block !important;
position:relative !important;
inset:auto !important;
width:100% !important;
height:auto !important;
max-height:none !important;
box-sizing:border-box !important;
margin:24px 0 0 !important;
padding:12px 16px 18px !important;
text-align:center !important;
white-space:normal !important;
overflow:visible !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
font-size:.72rem !important;
line-height:1.5 !important;
letter-spacing:.10em !important;
}
.drawer .drawer-links > .drawer-proverbs{
display:block !important;
position:relative !important;
inset:auto !important;
width:auto !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
/* FINAL — Proverbs 16:9: never clip the bottom of the text */
.drawer{
overflow-y:auto !important;
overflow-x:hidden !important;
}
.drawer-inner{
height:auto !important;
min-height:100% !important;
max-height:none !important;
overflow:visible !important;
padding-bottom:34px !important;
}
.drawer .drawer-footer{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
display:block !important;
width:100% !important;
height:auto !important;
min-height:32px !important;
max-height:none !important;
margin:24px 0 8px !important;
padding:12px 16px 16px !important;
box-sizing:border-box !important;
overflow:visible !important;
white-space:normal !important;
line-height:1.6 !important;
text-align:center !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
}
/* FINAL REQUEST — black house + Proverbs 16:9 fits */
.ba-gold-house-home img{
width:70px !important;
height:70px !important;
filter: brightness(0) saturate(100%) !important;
object-fit:contain !important;
}
.ba-gold-house-home{
overflow:visible !important;
}
/* Keep Proverbs fully inside the hamburger page */
.drawer{
overflow-y:auto !important;
overflow-x:hidden !important;
}
.drawer .drawer-footer{
position:relative !important;
inset:auto !important;
transform:none !important;
display:block !important;
width:100% !important;
height:auto !important;
max-height:none !important;
box-sizing:border-box !important;
margin:18px 0 10px !important;
padding:10px 18px 14px !important;
overflow:visible !important;
white-space:normal !important;
line-height:1.45 !important;
text-align:center !important;
font-size:.68rem !important;
letter-spacing:.06em !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
}
/* FINAL — Contact section divider cleanup */
.drawer .contact-submenu{
border-bottom:0 !important;
border-top:0 !important;
}
.drawer .contact-submenu::before,
.drawer .contact-submenu::after{
display:none !important;
}
.drawer .drawer-contact-label{
border-bottom:0 !important;
box-shadow:none !important;
}
.drawer .drawer-contact-label::after,
.drawer .drawer-contact-label::before{
display:none !important;
}
/* FINAL — Move black Home icon to the top-right of the hamburger header */
.drawer .ba-gold-house-home{
position:absolute !important;
top:24px !important;
right:72px !important;
left:auto !important;
width:42px !important;
height:42px !important;
margin:0 !important;
z-index:20 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
.drawer .ba-gold-house-home img{
width:34px !important;
height:34px !important;
filter:brightness(0) saturate(100%) !important;
object-fit:contain !important;
}
@media(max-width:600px){
.drawer .ba-gold-house-home{
top:22px !important;
right:66px !important;
width:38px !important;
height:38px !important;
}
.drawer .ba-gold-house-home img{
width:30px !important;
height:30px !important;
}
}
/* FINAL — Home icon top-left */
.drawer .ba-gold-house-home{
position:absolute !important;
top:24px !important;
left:28px !important;
right:auto !important;
width:42px !important;
height:42px !important;
margin:0 !important;
z-index:20 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.drawer .ba-gold-house-home img{
width:30px !important;
height:30px !important;
filter:brightness(0) saturate(100%) !important;
object-fit:contain !important;
}
@media(max-width:600px){
.drawer .ba-gold-house-home{
top:22px !important;
left:22px !important;
}
}
/* FINAL — give the main Story / Stocks / Travel menu links a little more breathing room */
.drawer .drawer-links{
padding-top:14px !important;
}
.drawer .drawer-links > a{
transform:translateY(5px);
}
/* FINAL — move Story / Stocks / Travel menu group down */
.drawer .drawer-inner > .drawer-links,
.drawer .drawer-inner .drawer-links{
margin-top:28px !important;
}
.drawer .drawer-inner > .drawer-links > a,
.drawer .drawer-inner .drawer-links > a{
position:relative !important;
top:8px !important;
}
/* FINAL — remove only the bottom line beneath Contact / Proverbs */
.drawer .drawer-footer{
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
box-shadow:none !important;
}
.drawer .drawer-footer::before,
.drawer .drawer-footer::after{
content:none !important;
display:none !important;
border:0 !important;
box-shadow:none !important;
background:none !important;
}
.drawer .drawer-inner{
border-bottom:0 !important;
}
/* FINAL SPACING FIX — give Proverbs 16:9 clear separation from The Crossing */
.drawer .drawer-footer{
margin-top:48px !important;
padding-top:14px !important;
}
@media(max-width:600px){
.drawer .drawer-footer{
margin-top:44px !important;
padding-top:14px !important;
}
}
/* FINAL SPACING FIX — Proverbs 16:9 needs clear separation before Contact / The Crossing */
.drawer .drawer-links > .drawer-proverbs{
margin-bottom:38px !important;
padding-bottom:6px !important;
}
.drawer .drawer-divider{
margin-top:0 !important;
}
@media(max-width:600px){
.drawer .drawer-links > .drawer-proverbs{
margin-bottom:34px !important;
}
}
/* =========================================================
v65 — 500,000× HAMBURGER MENU POLISH
Precision spacing / hierarchy / touch targets / premium restraint.
Content unchanged.
========================================================= */
/* Drawer: give the navigation a calm vertical rhythm */
.drawer{
width:min(430px,92vw) !important;
overflow-y:auto !important;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.16) transparent;
}
.drawer-inner{
box-sizing:border-box !important;
width:100% !important;
max-width:390px !important;
margin:0 auto !important;
padding:34px 30px 42px !important;
}
/* Home mark: deliberately quiet and compact */
.ba-gold-house-home{
width:100% !important;
height:42px !important;
margin:0 0 34px !important;
justify-content:flex-start !important;
}
.ba-gold-house-home img{
width:40px !important;
height:40px !important;
}
/* Primary navigation */
.drawer-links{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:0 !important;
}
.drawer-links a{
box-sizing:border-box !important;
min-height:62px !important;
height:auto !important;
padding:15px 4px !important;
margin:0 !important;
justify-content:flex-start !important;
text-align:left !important;
font-size:clamp(1.42rem,4vw,1.9rem) !important;
line-height:1.08 !important;
letter-spacing:-.035em !important;
}
/* Proverbs is its own visual section — never crowded against contact */
.drawer-links > .drawer-proverbs,
.drawer .drawer-proverbs{
min-height:0 !important;
height:auto !important;
width:max-content !important;
margin:28px 0 42px !important;
padding:8px 0 !important;
justify-content:flex-start !important;
text-align:left !important;
font-size:.70rem !important;
line-height:1.4 !important;
letter-spacing:.14em !important;
color:#D4AF37 !important;
-webkit-text-fill-color:#D4AF37 !important;
}
/* Contact divider: generous separation from Proverbs */
.drawer .drawer-divider{
display:block !important;
width:100% !important;
height:1px !important;
min-height:1px !important;
margin:0 0 28px !important;
opacity:.65 !important;
}
/* Contact hierarchy */
.drawer-contact-label{
margin:0 0 14px !important;
font-size:.57rem !important;
letter-spacing:.22em !important;
}
.contact-submenu{
gap:0 !important;
}
.contact-submenu a{
min-height:42px !important;
padding:9px 0 !important;
font-size:.82rem !important;
line-height:1.35 !important;
text-align:left !important;
}
/* Quiet footer */
.drawer-footer{
margin-top:30px !important;
padding-top:18px !important;
border-top:1px solid rgba(255,255,255,.055);
font-size:.52rem !important;
letter-spacing:.16em !important;
line-height:1.65 !important;
opacity:.75;
}
/* Remove accidental legacy spacing from generic drawer anchors */
.drawer > .drawer-inner a{
box-shadow:none;
}
/* Small screens: preserve breathing room without forcing scroll */
@media (max-width:520px){
.drawer{
width:min(92vw,390px) !important;
}
.drawer-inner{
padding:28px 24px 34px !important;
}
.ba-gold-house-home{
margin-bottom:27px !important;
}
.drawer-links a{
min-height:55px !important;
padding:13px 2px !important;
font-size:clamp(1.30rem,7vw,1.68rem) !important;
}
.drawer-links > .drawer-proverbs,
.drawer .drawer-proverbs{
margin-top:24px !important;
margin-bottom:36px !important;
}
.drawer .drawer-divider{
margin-bottom:24px !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.drawer,
.drawer-links a,
.drawer-proverbs{
transition:none !important;
}
}
/* FINAL FIX — black outline highlight, never a filled box */
.drawer .ba-gold-house-home{background:transparent !important;border:2px solid #000 !important;border-radius:14px !important;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.28) !important;}
.drawer .ba-gold-house-home img{background:transparent !important;}
/* Permanent Home icon cleanup */
.home, .home-link, .home-button, #home, #home-link, #home-button, .ba-home,
.home:focus, .home:focus-visible, .home:active,
.home-link:focus, .home-link:focus-visible, .home-link:active,
.home-button:focus, .home-button:focus-visible, .home-button:active,
#home:focus, #home:focus-visible, #home:active,
#home-link:focus, #home-link:focus-visible, #home-link:active,
#home-button:focus, #home-button:focus-visible, #home-button:active,
.ba-home:focus, .ba-home:focus-visible, .ba-home:active {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* FINAL HOME BOX KILL SWITCH */
.home,
.home-link,
.home-button,
.home-icon,
.ba-home,
.ba-home-link,
.ba-home-button,
#home,
#home-link,
#home-button,
#home-icon,
[aria-label="Home"],
[aria-label="home"],
.home::before,
.home-link::before,
.home-button::before,
.home-icon::before,
.ba-home::before,
.ba-home-link::before,
.ba-home-button::before,
#home::before,
#home-link::before,
#home-button::before,
#home-icon::before,
[aria-label="Home"]::before,
[aria-label="home"]::before,
.home::after,
.home-link::after,
.home-button::after,
.home-icon::after,
.ba-home::after,
.ba-home-link::after,
.ba-home-button::after,
#home::after,
#home-link::after,
#home-button::after,
#home-icon::after,
[aria-label="Home"]::after,
[aria-label="home"]::after {
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
appearance: none !important;
-webkit-appearance: none !important;
border-radius: 0 !important;
}
/* FINAL CENTERED HAMBURGER MENU — Story, Finance, Stocks, Psychology, Travel, Team + Home */
.drawer .drawer-inner{
text-align:center !important;
}
.drawer .ba-gold-house-home{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:68px !important;
height:68px !important;
margin:0 auto 8px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.drawer .ba-gold-house-home:hover{transform:none !important;}
.drawer .drawer-links{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
transform:translateY(-12px) !important;
}
.drawer .drawer-links > a,
.drawer .drawer-links > button{
justify-content:center !important;
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.drawer .drawer-links > a img,
.drawer .drawer-links > button img{
flex:0 0 auto !important;
}
.drawer .drawer-contact-label,
.drawer .contact-submenu,
.drawer .drawer-footer{
text-align:center !important;
}
.drawer .contact-submenu{
align-items:center !important;
}
@media(max-width:700px){
.drawer .drawer-links{transform:translateY(-10px) !important;}
}
/* FINAL — B.A. Future Growth header wordmark size only */
.site-header .brand.ba-static-gold-lettering{
font-size:clamp(1.35rem,3.35vw,2.25rem) !important;
font-weight:800 !important;
letter-spacing:.035em !important;
line-height:1 !important;
white-space:nowrap !important;
}
@media(max-width:600px){
.site-header .brand.ba-static-gold-lettering{
font-size:clamp(1.15rem,5.8vw,1.55rem) !important;
letter-spacing:.02em !important;
}
}
/* FINAL — keep the enlarged B.A. Future Growth header wordmark in its original green */
.site-header .brand.ba-static-gold-lettering{
background:none !important;
color:#62d6a7 !important;
-webkit-text-fill-color:#62d6a7 !important;
text-shadow:0 0 18px rgba(98,214,167,.10) !important;
}
/* B.A. Future Growth top bar trial */
header, .header, .site-header, .top-bar, .navbar { background-color: #111111; }
/* Final menu lock: menu sheet stays fixed and does not scroll */
html.menu-open, body.menu-open { overflow: hidden !important; }
.menu-sheet, .menu-panel, .mobile-menu, .nav-sheet, .menu-overlay {
position: fixed !important;
overscroll-behavior: none !important;
}
/* FINAL HAMBURGER SHEET LOCK — bar/header stays fixed; only menu body scrolls */
html,body{overflow-x:hidden!important}
.drawer{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
height:100dvh!important;
max-height:100dvh!important;
overflow:hidden!important;
transform:translate3d(100%,0,0);
will-change:transform;
}
.drawer.open{transform:translate3d(0,0,0)!important}
.drawer-inner{
height:100%!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
box-sizing:border-box!important;
padding-top:118px!important;
}
/* Keep the sheet's top bar/header completely stationary. */
.drawer::before{
content:"";
position:absolute!important;
z-index:20!important;
top:0!important;
left:0!important;
right:0!important;
height:76px!important;
pointer-events:none!important;
background:rgba(5,5,5,.94)!important;
border-bottom:1px solid rgba(98,214,167,.12)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
/* Preserve header controls above scrolling content. */
.site-header{
position:sticky!important;
top:0!important;
z-index:1000!important;
}
@media(max-width:600px){
.drawer{
width:100vw!important;
left:0!important;
right:0!important;
}
.drawer-inner{
padding-top:96px!important;
padding-bottom:48px!important;
}
}
/* TRUE FIX: viewport-locked site header + viewport-locked hamburger sheet.
The document can scroll normally; the header never moves. */
html{scroll-behavior:smooth!important;}
body{padding-top:76px!important;}
.site-header{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100%!important;
height:76px!important;
z-index:10000!important;
box-sizing:border-box!important;
}
.menu-backdrop{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
z-index:9998!important;
}
.drawer{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
height:100dvh!important;
max-height:100dvh!important;
z-index:9999!important;
overflow:hidden!important;
transform:translate3d(100%,0,0)!important;
}
.drawer.open{transform:translate3d(0,0,0)!important;}
.drawer-inner{
height:100%!important;
max-height:100%!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
box-sizing:border-box!important;
padding-top:118px!important;
padding-bottom:48px!important;
}
@media(max-width:600px){
body{padding-top:64px!important;}
.site-header{height:64px!important;}
.drawer{
width:100vw!important;
left:0!important;
right:0!important;
}
.drawer-inner{
padding-top:92px!important;
padding-bottom:48px!important;
}
}
/* Do not allow the page itself to scroll while the sheet is open. */
body.menu-open{
overflow:hidden!important;
touch-action:none!important;
}
body.menu-open .drawer-inner{
touch-action:pan-y!important;
}
/* Rounded hamburger sheet — preserve locked positioning and scrolling. */
.drawer{
border-radius:28px 0 0 28px !important;
overflow:hidden !important;
clip-path:inset(0 round 28px 0 0) !important;
}
.drawer-inner{
border-radius:28px 0 0 28px !important;
overflow-y:auto !important;
}
@media(max-width:600px){
.drawer{
border-radius:24px 0 0 24px !important;
clip-path:inset(0 round 24px 0 0) !important;
}
.drawer-inner{
border-radius:24px 0 0 24px !important;
}
}
/* FINAL ROUNDING OVERRIDE — visible rounded left corners on the sheet */
html body .drawer{
border-radius:32px 0 0 32px !important;
overflow:hidden !important;
-webkit-mask-image:-webkit-radial-gradient(white,black) !important;
mask-image:linear-gradient(white,white) !important;
clip-path:inset(0 0 0 0 round 32px 0 0 32px) !important;
background-clip:padding-box !important;
}
html body .drawer.open{
border-radius:32px 0 0 32px !important;
overflow:hidden !important;
clip-path:inset(0 0 0 0 round 32px 0 0 32px) !important;
}
html body .drawer-inner{
border-radius:32px 0 0 32px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
@media(max-width:600px){
html body .drawer,
html body .drawer.open{
border-radius:28px 0 0 28px !important;
clip-path:inset(0 0 0 0 round 28px 0 0 28px) !important;
}
html body .drawer-inner{
border-radius:28px 0 0 28px !important;
}
}
/* CORNER REALITY FIX: the sheet has an actual rounded visual panel. */
html body .drawer{
background:#111111 !important;
border:none !important;
border-radius:30px 0 0 30px !important;
box-shadow:-12px 0 40px rgba(0,0,0,.35) !important;
overflow:hidden !important;
clip-path:none !important;
isolation:isolate !important;
}
html body .drawer::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
background:#111111 !important;
border-radius:30px 0 0 30px !important;
pointer-events:none !important;
}
html body .drawer .drawer-inner{
position:relative !important;
z-index:1 !important;
border-radius:30px 0 0 30px !important;
}
@media(max-width:600px){
html body .drawer,
html body .drawer::before,
html body .drawer .drawer-inner{
border-radius:26px 0 0 26px !important;
}
}
/* FINAL CORNER FIX — sheet starts BELOW the fixed black header so the
rounded top corners are actually visible. */
html body .drawer{
top:76px !important;
bottom:0 !important;
height:calc(100dvh - 76px) !important;
max-height:calc(100dvh - 76px) !important;
border-radius:32px 0 0 32px !important;
overflow:hidden !important;
clip-path:none !important;
background:#111111 !important;
z-index:9999 !important;
}
html body .drawer.open{
top:76px !important;
border-radius:32px 0 0 32px !important;
}
html body .drawer::before{
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
border-radius:32px 0 0 32px !important;
}
html body .drawer .drawer-inner{
height:100% !important;
max-height:100% !important;
border-radius:32px 0 0 32px !important;
padding-top:42px !important;
}
@media(max-width:600px){
html body .drawer,
html body .drawer.open{
top:64px !important;
height:calc(100dvh - 64px) !important;
max-height:calc(100dvh - 64px) !important;
border-radius:28px 0 0 28px !important;
}
html body .drawer::before{
border-radius:28px 0 0 28px !important;
}
html body .drawer .drawer-inner{
height:100% !important;
max-height:100% !important;
border-radius:28px 0 0 28px !important;
padding-top:28px !important;
}
}
/* FINAL SIDE-COLOR CLEANUP — sheet owns the full viewport width.
No inset/side strips, borders, shadows, or extra green layers. */
html body .drawer{
left:0 !important;
right:0 !important;
width:100vw !important;
max-width:none !important;
margin:0 !important;
border-left:0 !important;
border-right:0 !important;
box-shadow:none !important;
background:#111111 !important;
}
html body .drawer::before{
left:0 !important;
right:0 !important;
width:100% !important;
margin:0 !important;
border:0 !important;
box-shadow:none !important;
}
html body .drawer .drawer-inner{
width:100% !important;
max-width:none !important;
margin:0 !important;
box-sizing:border-box !important;
border-left:0 !important;
border-right:0 !important;
}
html body .menu-backdrop{
background:#000 !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
@media(max-width:600px){
html body .drawer{
left:0 !important;
right:0 !important;
width:100vw !important;
}
}
/* HOME MOVED TO THE TOP BAR — next to the close/menu control. */
.site-header{
position:fixed !important;
display:flex !important;
align-items:center !important;
}
.ba-sheet-home-top{
position:absolute !important;
right:82px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:42px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(98,214,167,.35) !important;
border-radius:50% !important;
background:rgba(17,17,17,.9) !important;
z-index:10002 !important;
text-decoration:none !important;
}
.ba-sheet-home-top img{
width:23px !important;
height:23px !important;
object-fit:contain !important;
}
@media(max-width:600px){
.ba-sheet-home-top{
right:72px !important;
width:40px !important;
height:40px !important;
}
.ba-sheet-home-top img{
width:22px !important;
height:22px !important;
}
}
/* HOME ICON SIZE — match the hamburger control visually. */
.ba-sheet-home-top{
width:46px !important;
height:46px !important;
padding:0 !important;
}
.ba-sheet-home-top img{
width:28px !important;
height:28px !important;
}
@media(max-width:600px){
.ba-sheet-home-top{
width:46px !important;
height:46px !important;
right:72px !important;
}
.ba-sheet-home-top img{
width:28px !important;
height:28px !important;
}
}
/* Final brand-size refinement */
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.9em !important;
}
@media (max-width:600px){
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.9em !important;
}
}
/* Final B.A. Future Growth header refinement */
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.81em !important;
}
@media (max-width:600px){
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.81em !important;
}
}
/* Extra-small B.A. Future Growth header lettering */
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.68em !important;
}
@media (max-width:600px){
.site-header .brand,
.site-header .ba-static-gold-lettering{
font-size: 0.68em !important;
}
}
/* FINAL HEADER WORDMARK SIZE — explicit size so earlier rules cannot distort it */
.site-header .brand.ba-static-gold-lettering{
font-size: 0.95rem !important;
line-height: 1 !important;
letter-spacing: .035em !important;
white-space: nowrap !important;
}
@media (max-width:600px){
.site-header .brand.ba-static-gold-lettering{
font-size: 0.80rem !important;
line-height: 1 !important;
letter-spacing: .02em !important;
white-space: nowrap !important;
}
}
/* EXPLORE THE JOURNEY — immersive virtual tunnel */
.ba-tunnel-overlay{
position:fixed; inset:0; z-index:30000;
opacity:0; visibility:hidden; pointer-events:none;
overflow:hidden; background:#020403;
}
.ba-tunnel-overlay.is-active{opacity:1;visibility:visible;pointer-events:auto}
.ba-tunnel-viewport{
position:absolute; inset:0;
display:grid; place-items:center;
perspective:700px; perspective-origin:50% 50%;
overflow:hidden;
background:
radial-gradient(circle at 50% 50%, rgba(98,214,167,.08), transparent 18%),
radial-gradient(circle at 50% 50%, #0b110d 0%, #020403 58%, #000 100%);
}
.ba-tunnel-depth{
position:absolute; width:18vmin; height:18vmin;
border-radius:50%;
border:2px solid rgba(212,175,55,.9);
transform-style:preserve-3d;
box-shadow:0 0 16px rgba(212,175,55,.6), inset 0 0 18px rgba(98,214,167,.35);
}
.ba-tunnel-depth:nth-child(1){transform:translateZ(-80px) scale(.45);animation:baTunnelDepth1 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(2){transform:translateZ(-180px) scale(.7);animation:baTunnelDepth2 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(3){transform:translateZ(-300px) scale(.95);animation:baTunnelDepth3 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(4){transform:translateZ(-440px) scale(1.2);animation:baTunnelDepth4 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(5){transform:translateZ(-600px) scale(1.45);animation:baTunnelDepth5 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(6){transform:translateZ(-800px) scale(1.7);animation:baTunnelDepth6 1.65s cubic-bezier(.16,.75,.18,1) forwards}
.ba-tunnel-depth:nth-child(even){border-color:rgba(98,214,167,.9);box-shadow:0 0 20px rgba(98,214,167,.55),inset 0 0 20px rgba(212,175,55,.25)}
.ba-tunnel-center{
position:absolute; width:11vmin;height:11vmin;border-radius:50%;
background:radial-gradient(circle,#d4af37 0 2%,#62d6a7 3% 9%,#06100a 34%,#000 70%);
box-shadow:0 0 30px rgba(212,175,55,.65),0 0 75px rgba(98,214,167,.3);
animation:baTunnelCore 1.65s cubic-bezier(.15,.75,.2,1) forwards;
}
.ba-tunnel-stars{
position:absolute; inset:-20%;
background:
repeating-conic-gradient(from 7deg, transparent 0deg 2deg, rgba(212,175,55,.7) 2.2deg 2.55deg, transparent 2.8deg 9deg);
-webkit-mask-image:radial-gradient(circle,#000 0 12%,transparent 58%);
mask-image:radial-gradient(circle,#000 0 12%,transparent 58%);
animation:baTunnelStars 1.65s linear forwards;
}
.ba-tunnel-label{
position:absolute; bottom:10%;
color:#f1dfaa; font:600 clamp(12px,1.5vw,19px)/1.2 system-ui,sans-serif;
letter-spacing:.28em; text-transform:uppercase;
text-shadow:0 0 16px rgba(212,175,55,.55);
opacity:0; animation:baTunnelLabel 1.65s ease forwards;
}
@keyframes baTunnelDepth1{to{transform:translateZ(500px) scale(3.2);opacity:0}}
@keyframes baTunnelDepth2{to{transform:translateZ(430px) scale(3.7);opacity:0}}
@keyframes baTunnelDepth3{to{transform:translateZ(350px) scale(4.3);opacity:0}}
@keyframes baTunnelDepth4{to{transform:translateZ(260px) scale(5);opacity:0}}
@keyframes baTunnelDepth5{to{transform:translateZ(160px) scale(5.8);opacity:0}}
@keyframes baTunnelDepth6{to{transform:translateZ(60px) scale(6.7);opacity:0}}
@keyframes baTunnelCore{0%{transform:scale(.35);opacity:0}18%{opacity:1}100%{transform:scale(6);opacity:0}}
@keyframes baTunnelStars{from{transform:scale(.35) rotate(0)}to{transform:scale(3) rotate(240deg)}}
@keyframes baTunnelLabel{0%,20%{opacity:0;transform:translateY(10px)}45%{opacity:1;transform:translateY(0)}82%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.ba-tunnel-depth,.ba-tunnel-center,.ba-tunnel-stars,.ba-tunnel-label{animation-duration:1s}
}
/* B.A. FUTURE GROWTH — IMMERSIVE JOURNEY TUNNEL */
.ba-tunnel-overlay{
position:fixed!important;inset:0!important;z-index:30000!important;
opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
background:#020403;
transition:opacity .15s ease,visibility .15s ease;
}
.ba-tunnel-overlay.is-active{opacity:1;visibility:visible;pointer-events:auto}
.ba-tunnel-viewport{
position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;
perspective:850px;perspective-origin:50% 50%;
background:radial-gradient(circle at 50% 50%,rgba(98,214,167,.10),transparent 18%),#020403;
}
.ba-tunnel-logo{
position:absolute;width:clamp(72px,11vw,150px);height:auto;z-index:5;
filter:drop-shadow(0 0 16px rgba(98,214,167,.45)) drop-shadow(0 0 28px rgba(212,175,55,.32));
animation:baTunnelLogo 1.9s cubic-bezier(.2,.75,.2,1) forwards;
}
.ba-tunnel-ring{
position:absolute;width:14vmin;height:14vmin;border-radius:50%;
border:2px solid rgba(212,175,55,.88);
box-shadow:0 0 18px rgba(212,175,55,.55),inset 0 0 20px rgba(98,214,167,.24);
transform-style:preserve-3d;
animation:baTunnelRing 1.9s cubic-bezier(.12,.78,.16,1) forwards;
}
.ba-tunnel-ring:nth-of-type(2){border-color:rgba(98,214,167,.9);animation-delay:.03s}
.ba-tunnel-ring:nth-of-type(3){animation-delay:.07s}
.ba-tunnel-ring:nth-of-type(4){border-color:rgba(98,214,167,.9);animation-delay:.11s}
.ba-tunnel-ring:nth-of-type(5){animation-delay:.15s}
.ba-tunnel-ring:nth-of-type(6){border-color:rgba(98,214,167,.9);animation-delay:.19s}
.ba-tunnel-ring:nth-of-type(7){animation-delay:.23s}
.ba-tunnel-ring:nth-of-type(8){border-color:rgba(98,214,167,.9);animation-delay:.27s}
.ba-tunnel-streaks{
position:absolute;inset:-30%;
background:repeating-conic-gradient(from 0deg,transparent 0 2deg,rgba(212,175,55,.58) 2.4deg 2.8deg,transparent 3.2deg 9deg);
-webkit-mask-image:radial-gradient(circle,transparent 0 10%,#000 30%,transparent 76%);
mask-image:radial-gradient(circle,transparent 0 10%,#000 30%,transparent 76%);
animation:baTunnelStreaks 1.9s linear forwards;
}
.ba-tunnel-particles{
position:absolute;inset:0;
background-image:
radial-gradient(circle,rgba(212,175,55,.9) 0 1px,transparent 1.6px),
radial-gradient(circle,rgba(98,214,167,.85) 0 1px,transparent 1.5px);
background-size:73px 91px,109px 67px;
background-position:10px 20px,40px 5px;
animation:baTunnelParticles 1.9s cubic-bezier(.1,.8,.1,1) forwards;
opacity:.7;
}
.ba-tunnel-core{
position:absolute;width:10vmin;height:10vmin;border-radius:50%;z-index:4;
background:radial-gradient(circle,#f1dfaa 0 2%,#d4af37 3% 7%,#62d6a7 9% 15%,#06100a 42%,#000 72%);
box-shadow:0 0 35px rgba(212,175,55,.6),0 0 85px rgba(98,214,167,.3);
animation:baTunnelCore 1.9s cubic-bezier(.12,.78,.16,1) forwards;
}
.ba-tunnel-caption{
position:absolute;bottom:10%;z-index:8;color:#f1dfaa;
font:600 clamp(11px,1.4vw,18px)/1.2 system-ui,sans-serif;
letter-spacing:.28em;text-transform:uppercase;
text-shadow:0 0 16px rgba(212,175,55,.55);
opacity:0;animation:baTunnelCaption 1.9s ease forwards;
}
@keyframes baTunnelRing{
0%{transform:translateZ(-900px) scale(.05) rotate(0deg);opacity:0}
12%{opacity:.9}
100%{transform:translateZ(500px) scale(6.8) rotate(18deg);opacity:0}
}
@keyframes baTunnelStreaks{from{transform:scale(.25) rotate(0)}to{transform:scale(3.5) rotate(260deg)}}
@keyframes baTunnelParticles{from{transform:scale(.4);background-position:10px 20px,40px 5px}to{transform:scale(2.8);background-position:120px 900px,-500px 700px}}
@keyframes baTunnelCore{0%{transform:scale(.25);opacity:0}15%{opacity:1}100%{transform:scale(7);opacity:0}}
@keyframes baTunnelLogo{0%{transform:scale(.35) rotate(0deg);opacity:0}22%{opacity:1}75%{opacity:1}100%{transform:scale(5) rotate(8deg);opacity:0}}
@keyframes baTunnelCaption{0%,22%{opacity:0;transform:translateY(10px)}42%{opacity:1;transform:translateY(0)}78%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.ba-tunnel-ring,.ba-tunnel-streaks,.ba-tunnel-particles,.ba-tunnel-core,.ba-tunnel-logo,.ba-tunnel-caption{animation-duration:1s}
}
/* FOREVER JOURNEY — continuous virtual tunnel */
.ba-tunnel-overlay.is-forever .ba-tunnel-viewport{
background:
radial-gradient(circle at 50% 50%,rgba(98,214,167,.11),transparent 18%),
#020403;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring{
animation:baForeverRing 3.2s linear infinite;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(2){animation-delay:-.4s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(3){animation-delay:-.8s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(4){animation-delay:-1.2s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(5){animation-delay:-1.6s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(6){animation-delay:-2s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(7){animation-delay:-2.4s}
.ba-tunnel-overlay.is-forever .ba-tunnel-ring:nth-of-type(8){animation-delay:-2.8s}
.ba-tunnel-overlay.is-forever .ba-tunnel-streaks{
animation:baForeverSpin 5s linear infinite;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-particles{
animation:baForeverParticles 2.2s linear infinite;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-core{
animation:baForeverCore 3s ease-in-out infinite;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-logo{
animation:baForeverLogo 6s ease-in-out infinite;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-caption{
opacity:1;
animation:none;
}
.ba-tunnel-exit{
position:absolute;right:24px;top:24px;z-index:20;
min-width:120px;min-height:46px;padding:10px 18px;
border:1px solid rgba(212,175,55,.65);border-radius:999px;
background:rgba(2,4,3,.72);color:#f1dfaa;
font:600 13px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;
cursor:pointer;backdrop-filter:blur(8px);
}
.ba-tunnel-exit:hover{background:rgba(212,175,55,.12)}
@keyframes baForeverRing{
0%{transform:translateZ(-900px) scale(.05) rotate(0deg);opacity:0}
10%{opacity:.9}
100%{transform:translateZ(500px) scale(6.8) rotate(18deg);opacity:0}
}
@keyframes baForeverSpin{to{transform:scale(3.5) rotate(360deg)}}
@keyframes baForeverParticles{
from{transform:scale(.8);background-position:10px 20px,40px 5px}
to{transform:scale(2.8);background-position:120px 900px,-500px 700px}
}
@keyframes baForeverCore{
0%,100%{transform:scale(.9);opacity:.72}
50%{transform:scale(1.25);opacity:1}
}
@keyframes baForeverLogo{
0%,100%{transform:scale(.9) rotate(-2deg);opacity:.8}
50%{transform:scale(1.08) rotate(2deg);opacity:1}
}
@media(max-width:600px){
.ba-tunnel-exit{right:14px;top:14px;min-width:108px;min-height:44px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
.ba-tunnel-overlay.is-forever .ba-tunnel-ring,
.ba-tunnel-overlay.is-forever .ba-tunnel-streaks,
.ba-tunnel-overlay.is-forever .ba-tunnel-particles,
.ba-tunnel-overlay.is-forever .ba-tunnel-core,
.ba-tunnel-overlay.is-forever .ba-tunnel-logo{
animation-play-state:paused;
}
}
/* B.A. FUTURE GROWTH — PAST / PRESENT / FUTURE JOURNEY LAYERS */
.ba-tunnel-era{
position:absolute;top:9%;left:50%;transform:translateX(-50%);
z-index:15;color:#f1dfaa;text-align:center;
font:700 clamp(12px,1.8vw,21px)/1.1 system-ui,sans-serif;
letter-spacing:.32em;text-transform:uppercase;
text-shadow:0 0 20px rgba(212,175,55,.65);
opacity:0;transition:opacity .7s ease,transform .7s ease;
}
.ba-tunnel-era.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.ba-tunnel-era-sub{
margin-top:10px;color:rgba(241,223,170,.72);
font-size:.58em;letter-spacing:.18em;font-weight:500;
}
.ba-tunnel-quote{
position:absolute;bottom:18%;left:50%;transform:translateX(-50%);
z-index:15;max-width:min(620px,80vw);text-align:center;
color:rgba(255,255,255,.9);
font:500 clamp(13px,1.6vw,20px)/1.4 system-ui,sans-serif;
letter-spacing:.05em;opacity:0;transition:opacity .8s ease;
text-shadow:0 0 18px rgba(98,214,167,.35);
}
.ba-tunnel-quote.is-visible{opacity:1}
.ba-tunnel-destination{
position:absolute;z-index:16;display:flex;gap:9px;flex-wrap:wrap;
justify-content:center;bottom:7%;left:50%;transform:translateX(-50%);
width:min(760px,90vw);opacity:0;transition:opacity .7s ease;
}
.ba-tunnel-destination.is-visible{opacity:1}
.ba-tunnel-destination span{
padding:8px 13px;border:1px solid rgba(212,175,55,.35);
border-radius:999px;color:rgba(241,223,170,.8);
background:rgba(2,4,3,.45);font:600 10px system-ui,sans-serif;
letter-spacing:.14em;text-transform:uppercase;
}
.ba-tunnel-overlay.is-forever .ba-tunnel-viewport::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(98,214,167,.035),transparent 35%,transparent 65%,rgba(212,175,55,.035));
animation:baEraGlow 6s ease-in-out infinite;
}
@keyframes baEraGlow{50%{opacity:.25;transform:scale(1.04)}}
/* SIDE TRAVEL IMAGERY — fast-moving tunnel walls */
.ba-tunnel-sidewall{
position:absolute!important;
top:0!important;
bottom:0!important;
width:38vw!important;
max-width:560px!important;
pointer-events:none!important;
z-index:2!important;
perspective:900px!important;
overflow:visible!important;
opacity:0!important;
filter:saturate(.9) contrast(1.08)!important;
}
.ba-tunnel-sidewall-left{left:-4vw!important;}
.ba-tunnel-sidewall-right{right:-4vw!important;}
.ba-tunnel-sidewall img{
position:absolute!important;
left:50%!important;
top:50%!important;
width:240px!important;
height:150px!important;
object-fit:cover!important;
border:1px solid rgba(212,175,55,.45)!important;
border-radius:16px!important;
box-shadow:0 0 28px rgba(212,175,55,.16)!important;
transform-style:preserve-3d!important;
will-change:transform,opacity,filter!important;
}
.ba-tunnel-sidewall-left img{transform-origin:100% 50%!important;}
.ba-tunnel-sidewall-right img{transform-origin:0 50%!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall{opacity:.92!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img{animation:baSideTravel 3.2s linear infinite!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall-right img{animation-name:baSideTravelRight!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img:nth-child(2){animation-delay:-.53s!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img:nth-child(3){animation-delay:-1.06s!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img:nth-child(4){animation-delay:-1.59s!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img:nth-child(5){animation-delay:-2.12s!important;}
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img:nth-child(6){animation-delay:-2.65s!important;}
@keyframes baSideTravel{
0%{transform:translate3d(0,0,-1200px) rotateY(18deg) scale(.18);opacity:0;filter:blur(7px);}
12%{opacity:.5;}
55%{opacity:.9;filter:blur(1.5px);}
100%{transform:translate3d(24vw,0,650px) rotateY(18deg) scale(2.1);opacity:0;filter:blur(9px);}
}
@keyframes baSideTravelRight{
0%{transform:translate3d(0,0,-1200px) rotateY(-18deg) scale(.18);opacity:0;filter:blur(7px);}
12%{opacity:.5;}
55%{opacity:.9;filter:blur(1.5px);}
100%{transform:translate3d(-24vw,0,650px) rotateY(-18deg) scale(2.1);opacity:0;filter:blur(9px);}
}
@media(max-width:700px){
.ba-tunnel-sidewall{width:48vw!important;max-width:none!important;}
.ba-tunnel-sidewall-left{left:-18vw!important;}
.ba-tunnel-sidewall-right{right:-18vw!important;}
.ba-tunnel-sidewall img{width:180px!important;height:120px!important;border-radius:12px!important;}
@keyframes baSideTravel{
0%{transform:translate3d(0,0,-1050px) rotateY(14deg) scale(.14);opacity:0;filter:blur(6px);}
15%{opacity:.45;} 55%{opacity:.82;filter:blur(1px);}
100%{transform:translate3d(34vw,0,600px) rotateY(14deg) scale(1.8);opacity:0;filter:blur(8px);}
}
@keyframes baSideTravelRight{
0%{transform:translate3d(0,0,-1050px) rotateY(-14deg) scale(.14);opacity:0;filter:blur(6px);}
15%{opacity:.45;} 55%{opacity:.82;filter:blur(1px);}
100%{transform:translate3d(-34vw,0,600px) rotateY(-14deg) scale(1.8);opacity:0;filter:blur(8px);}
}
}
@media(prefers-reduced-motion:reduce){
.ba-tunnel-overlay.is-forever .ba-tunnel-sidewall img{animation:none!important;opacity:.25!important;transform:none!important;filter:none!important;}
}
/* PHOTO RING — photos form the circumference of the virtual tunnel */
.ba-tunnel-photo-ring{
position:absolute;
left:50%; top:50%;
width:0; height:0;
transform-style:preserve-3d;
z-index:3;
pointer-events:none;
animation:baPhotoRingSpin 34s linear infinite;
}
.ba-tunnel-photo{
position:absolute;
left:50%; top:50%;
width:clamp(150px,18vw,290px);
height:clamp(105px,13vw,205px);
margin-left:calc(clamp(150px,18vw,290px) / -2);
margin-top:calc(clamp(105px,13vw,290px) / -2);
object-fit:cover;
object-position:center;
border:2px solid rgba(212,175,55,.88);
border-radius:12px;
background:#07100b;
box-shadow:0 0 18px rgba(212,175,55,.35),0 0 42px rgba(98,214,167,.18);
backface-visibility:hidden;
-webkit-box-reflect:below 10px linear-gradient(transparent 70%,rgba(0,0,0,.18));
}
.ba-tunnel-photo::after{content:"";position:absolute;inset:0}
.ba-tunnel-photo-ring-wrap{
position:absolute; inset:0;
perspective:900px;
perspective-origin:50% 50%;
transform-style:preserve-3d;
}
@keyframes baPhotoRingSpin{
from{transform:rotateY(0deg) rotateX(-2deg)}
to{transform:rotateY(360deg) rotateX(-2deg)}
}
.ba-tunnel-overlay.is-active .ba-tunnel-photo-ring{
animation-play-state:running;
}
.ba-tunnel-overlay:not(.is-active) .ba-tunnel-photo-ring{
animation-play-state:paused;
}
@media(max-width:700px){
.ba-tunnel-photo{
width:150px;height:105px;
margin-left:-75px;margin-top:-52.5px;
}
.ba-tunnel-photo-ring{
animation-duration:42s;
}
}
@media(prefers-reduced-motion:reduce){
.ba-tunnel-photo-ring{animation:none}
}
.ba-tunnel-sidewall{display:none!important}
/* HOME + HAMBURGER MICRO-POLISH — 10px closer on mobile */
@media (max-width:600px){
.ba-sheet-home-top{
right:82px !important;
}
}
/* FINAL HOME BUTTON SIZE — slightly larger for easier visibility/tapping */
.ba-sheet-home-top{
width:52px !important;
height:52px !important;
}
.ba-sheet-home-top img{
width:31px !important;
height:31px !important;
}
@media(max-width:600px){
.ba-sheet-home-top{
width:52px !important;
height:52px !important;
right:82px !important;
}
.ba-sheet-home-top img{
width:31px !important;
height:31px !important;
}
}
/* FINAL FIX — every headphone mark flips once, together, then stops */
@keyframes baHeadphoneFlipOnce {
from { transform: perspective(600px) rotateY(0deg); }
to { transform: perspective(600px) rotateY(360deg); }
}
.drawer .drawer-links > a .drawer-section-mark {
animation: baHeadphoneFlipOnce 1.8s linear 1 forwards !important;
transform-origin: 50% 50% !important;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
will-change: transform;
}