/* ==========================================
   AMORA HOMEPAGE
========================================== */

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

:root{

--black:#080808;
--charcoal:#17141c;
--violet:#8d76ff;
--gold:#d4af37;
--champagne:#eadfcf;
--white:#ffffff;
--muted:rgba(255,255,255,.72);

}

html{

scroll-behavior:smooth;

}

body{

min-height:100vh;

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

background:
linear-gradient(
135deg,
#080808 0%,
#19141e 24%,
#655b6c 58%,
#cdbfae 80%,
#f4eee6 100%
);

color:var(--white);

overflow-x:hidden;

position:relative;

}

body.menuOpen{

overflow:hidden;

}

a{

color:inherit;
text-decoration:none;

}

img{

display:block;
max-width:100%;

}

button{

font-family:inherit;

}


/* ==========================================
   BACKGROUND GLOWS
========================================== */

.glow{

position:fixed;

border-radius:50%;

filter:blur(130px);

pointer-events:none;

z-index:-1;

}

.glowViolet{

width:420px;
height:420px;

background:rgba(141,118,255,.24);

top:-150px;
left:-130px;

}

.glowGold{

width:520px;
height:520px;

background:rgba(212,175,55,.17);

right:-190px;
bottom:-180px;

}


/* ==========================================
   HEADER
========================================== */

.mainHeader{

position:fixed;

top:0;
left:0;
right:0;

height:95px;

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

padding:0 6%;

z-index:100;

background:
linear-gradient(
180deg,
rgba(0,0,0,.52),
rgba(0,0,0,0)
);

}

.logo{

font-family:'Space Grotesk',sans-serif;

font-size:1.35rem;

font-weight:700;

letter-spacing:6px;

}

.desktopNav{

display:flex;

align-items:center;

gap:34px;

}

.desktopNav a{

font-size:.72rem;

font-weight:500;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.78);

transition:.3s;

}

.desktopNav a:hover{

color:var(--champagne);

}

.bookBtn{

height:48px;

display:flex;

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

padding:0 24px;

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

font-size:.72rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

backdrop-filter:blur(15px);

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

transition:.35s;

}

.bookBtn:hover{

background:white;
color:#111;

}

.menuBtn{

display:none;

width:45px;
height:45px;

border:none;

background:transparent;

cursor:pointer;

}

.menuBtn span{

display:block;

width:28px;
height:2px;

margin:7px auto;

background:white;

}


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

.mobileMenu{

position:fixed;

inset:0;

background:
linear-gradient(
135deg,
#070707,
#1d1722
);

z-index:999;

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

padding:40px;

transform:translateX(100%);

transition:.45s ease;

}

.mobileMenu.active{

transform:translateX(0);

}

.closeMenu{

position:absolute;

top:25px;
right:28px;

width:48px;
height:48px;

border:none;

background:transparent;

color:white;

font-size:2.5rem;

cursor:pointer;

}

.mobileMenu nav{

display:flex;
flex-direction:column;

gap:20px;

}

.mobileMenu nav a{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.2rem,10vw,4rem);

font-weight:600;

text-transform:uppercase;

letter-spacing:-1px;

}


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

.hero{

min-height:100vh;

position:relative;

display:flex;
align-items:center;

padding:145px 6% 70px;

overflow:hidden;

}

.heroContent{

width:48%;

max-width:640px;

position:relative;

z-index:5;

}

.smallTitle{

font-size:.72rem;

font-weight:600;

letter-spacing:6px;

text-transform:uppercase;

color:#f5d98d;

margin-bottom:22px;

}

.hero h1{

font-family:'Space Grotesk',sans-serif;

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

line-height:.86;

font-weight:700;

letter-spacing:-5px;

text-transform:uppercase;

margin-bottom:28px;

text-shadow:
0 15px 40px rgba(0,0,0,.3);

}

.hero h1 span{

display:block;

color:transparent;

-webkit-text-stroke:
1px rgba(255,255,255,.75);

}

.heroText{

max-width:520px;

font-size:1rem;

line-height:1.9;

color:rgba(255,255,255,.78);

margin-bottom:36px;

}

.heroButtons{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

.primaryBtn,
.secondaryBtn,
.lightBtn{

min-height:58px;

display:inline-flex;

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

padding:0 28px;

font-size:.75rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

transition:.35s;

}

.primaryBtn{

background:white;

color:#111;

border:1px solid white;

}

.primaryBtn:hover{

transform:translateY(-4px);

box-shadow:
0 18px 45px rgba(0,0,0,.25);

}

.secondaryBtn{

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

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

backdrop-filter:blur(15px);

}

.secondaryBtn:hover{

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

transform:translateY(-4px);

}

.heroLocation{

display:flex;

gap:30px;

margin-top:55px;

}

.heroLocation span{

font-size:.65rem;

letter-spacing:3px;

text-transform:uppercase;

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

}

.heroVisual{

position:absolute;

right:0;
bottom:0;

width:58%;
height:100%;

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

z-index:2;

}

.heroCircle{

position:absolute;

width:620px;
height:620px;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(255,255,255,.2),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(8px);

right:5%;
bottom:2%;

}

.heroModels{

position:relative;

height:92vh;

width:100%;

object-fit:contain;

object-position:bottom center;

z-index:3;

filter:
drop-shadow(
0 35px 45px rgba(0,0,0,.35)
);

}

.scrollText{

position:absolute;

right:35px;
bottom:42px;

font-size:.62rem;

letter-spacing:3px;

text-transform:uppercase;

writing-mode:vertical-rl;

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

z-index:6;

}


/* ==========================================
   MODELS SECTION
========================================== */

.modelsSection{

padding:120px 6%;

background:#090909;

}

.sectionHeading{

display:flex;

align-items:flex-end;
justify-content:space-between;

gap:30px;

margin-bottom:55px;

}

.sectionHeading h2,
.agencySection h2,
.applySection h2,
.contactSection h2{

font-family:'Space Grotesk',sans-serif;

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

line-height:.95;

letter-spacing:-3px;

text-transform:uppercase;

}

.sectionLink{

font-size:.72rem;

letter-spacing:2px;

text-transform:uppercase;

padding-bottom:8px;

border-bottom:
1px solid rgba(255,255,255,.4);

}

.modelGrid{

display:grid;

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

gap:22px;

}

.modelCard{

position:relative;

height:600px;

overflow:hidden;

background:#222;

}

.modelCard img{

width:100%;
height:100%;

object-fit:cover;

filter:saturate(.8);

transition:
transform .75s ease,
filter .5s ease;

}

.modelCard:hover img{

transform:scale(1.05);

filter:saturate(1);

}

.modelInfo{

position:absolute;

left:0;
right:0;
bottom:0;

padding:70px 24px 26px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.9)
);

}

.modelInfo h3{

font-family:'Space Grotesk',sans-serif;

font-size:1.7rem;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}

.modelInfo p{

margin-top:7px;

font-size:.7rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.65);

}


/* ==========================================
   AGENCY
========================================== */

.agencySection{

min-height:80vh;

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

padding:120px 8%;

background:
linear-gradient(
135deg,
#f4eee6,
#d7cbbd
);

color:#111;

}

.agencySection .smallTitle{

color:#6b5b3b;

}

.agencySection h2{

max-width:1050px;

}

.agencySection h2 span{

display:block;

color:transparent;

-webkit-text-stroke:1px #111;

}

.agencySection > p:not(.smallTitle){

max-width:650px;

margin:35px 0;

font-size:1.05rem;

line-height:1.9;

color:#444;

}


/* ==========================================
   APPLY
========================================== */

.applySection{

min-height:75vh;

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

gap:50px;

padding:120px 8%;

background:
linear-gradient(
135deg,
#17121b,
#080808
);

}

.applyContent{

max-width:700px;

}

.applyContent > p:not(.smallTitle){

max-width:560px;

margin:28px 0 35px;

font-size:1rem;

line-height:1.9;

color:var(--muted);

}

.lightBtn{

background:var(--champagne);

color:#111;

}

.lightBtn:hover{

transform:translateY(-4px);

box-shadow:
0 18px 45px rgba(0,0,0,.3);

}

.applyNumber{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(4rem,10vw,10rem);

font-weight:700;

letter-spacing:-7px;

color:rgba(255,255,255,.05);

white-space:nowrap;

}


/* ==========================================
   CONTACT
========================================== */

.contactSection{

display:flex;

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

gap:50px;

padding:110px 8%;

background:
linear-gradient(
135deg,
#8e8070,
#d8cbbb
);

color:#111;

}

.contactSection > div{

max-width:780px;

}

.contactSection .smallTitle{

color:#554936;

}

.contactSection p:not(.smallTitle){

margin-top:25px;

max-width:600px;

line-height:1.8;

color:#3f3b36;

}

.contactSection .primaryBtn{

flex-shrink:0;

background:#111;

border-color:#111;

color:white;

}


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

.mainFooter{

padding:70px 6% 35px;

background:#050505;

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

align-items:end;

}

.footerLogo{

font-family:'Space Grotesk',sans-serif;

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

font-weight:700;

letter-spacing:-5px;

line-height:.9;

}

.footerLinks{

display:flex;

justify-content:flex-end;

gap:24px;

}

.footerLinks a{

font-size:.72rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.7);

}

.mainFooter > p{

font-size:.68rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.45);

}

.mainFooter > p:last-child{

text-align:right;

}


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

@media(max-width:1000px){

.desktopNav{

display:none;

}

.bookBtn{
display:inline-flex;
align-items:center;
justify-content:center;
max-width:150px;
min-height:40px;
padding:0 12px;
font-size:.58rem;
letter-spacing:1px;
}

.menuBtn{

display:block;

}

.hero{

padding-top:120px;

align-items:flex-start;

}

.heroContent{

width:62%;

}

.heroVisual{

width:60%;

right:-12%;

}

.heroModels{

height:82vh;

}

.heroCircle{

width:500px;
height:500px;

}

.modelCard{

height:500px;

}

}


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

@media(max-width:700px){

.mainHeader{

height:78px;

padding:0 22px;

}

.logo{

font-size:1.05rem;

letter-spacing:4px;

}

.hero{

min-height:100svh;

padding:
105px 22px 0;

display:block;

}

.heroContent{

width:100%;

max-width:none;

position:relative;

z-index:5;

}

.smallTitle{

font-size:.61rem;

letter-spacing:4px;

margin-bottom:15px;

}

.hero h1{

font-size:clamp(3.6rem,17vw,5.4rem);

letter-spacing:-3px;

margin-bottom:18px;

}

.heroText{

max-width:95%;

font-size:.88rem;

line-height:1.7;

margin-bottom:24px;

}

.heroButtons{

gap:10px;

}

.primaryBtn,
.secondaryBtn,
.lightBtn{

min-height:52px;

padding:0 18px;

font-size:.65rem;

letter-spacing:1.4px;

}

.heroLocation{

display:none;

}

.heroVisual{

position:absolute;

width:100%;
height:57%;

right:0;
bottom:0;

}

.heroModels{

height:100%;
width:115%;

object-position:bottom center;

}

.heroCircle{

width:370px;
height:370px;

right:50%;

transform:translateX(50%);

bottom:-30px;

}

.scrollText{

display:none;

}

.modelsSection{

padding:85px 20px;

}

.sectionHeading{

align-items:flex-start;

margin-bottom:35px;

}

.sectionHeading h2,
.agencySection h2,
.applySection h2,
.contactSection h2{

font-size:2.7rem;

letter-spacing:-2px;

}

.sectionLink{

display:inline-flex;

align-items:center;

}

.modelGrid{

grid-template-columns:1fr;

gap:16px;

}

.modelCard{

height:520px;

}

.agencySection,
.applySection,
.contactSection{

padding:90px 22px;

}

.agencySection{

min-height:auto;

}

.applySection{

min-height:auto;

display:block;

}

.applyNumber{

font-size:4rem;

letter-spacing:-3px;

margin-top:60px;

white-space:normal;

}

.contactSection{

display:block;

}

.contactSection .primaryBtn{

margin-top:35px;

}

.mainFooter{

grid-template-columns:1fr;

padding:60px 22px 30px;

}

.footerLogo{

font-size:3.3rem;

letter-spacing:-3px;

}

.footerLinks{

justify-content:flex-start;

flex-wrap:wrap;

}

.mainFooter > p:last-child{

text-align:left;

}

}


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

@media(max-width:420px){

.hero h1{

font-size:3.35rem;

}

.heroButtons{

display:grid;

grid-template-columns:1fr 1fr;

}

.primaryBtn,
.secondaryBtn{

width:100%;

padding:0 10px;

}

.heroVisual{

height:53%;

}

.modelCard{

height:470px;

}

}
/* ==========================================
   AMORA COMPACT CLASSIC LAYOUT OVERRIDE
   PLACE AT THE END OF style.css
========================================== */


/* ==========================================
   HEADER
========================================== */

.mainHeader{

position:sticky;

top:0;

height:82px;

padding:0 5%;

background:rgba(10,8,14,.96);

backdrop-filter:blur(18px);

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

z-index:1000;

}

.logo{

font-size:1.15rem;

letter-spacing:5px;

}

.menuBtn{

flex-shrink:0;

}


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

.hero{

min-height:auto;

display:block;

padding:100px 6% 90px;

overflow:hidden;

background:
radial-gradient(
circle at 85% 75%,
rgba(212,175,55,.15),
transparent 38%
),
linear-gradient(
135deg,
#0a0910 0%,
#17121e 55%,
#211c1c 100%
);

}

.heroContent{

width:100%;

max-width:920px;

margin:0 auto;

}

.hero h1{

max-width:850px;

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

line-height:.9;

margin-bottom:28px;

}

.heroText{

max-width:680px;

font-size:1.05rem;

line-height:1.85;

margin-bottom:32px;

}

.heroButtons{

display:flex;

align-items:center;

gap:14px;

}

.heroButtons a{

width:auto;

min-width:210px;

}

.heroLocation{

margin-top:45px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.12);

}

.scrollText{

display:none;

}


/* ==========================================
   ALL SECTIONS
========================================== */

.agencySection,
.applySection,
.contactSection{

min-height:auto;

}

.agencySection .primaryBtn,
.applySection .lightBtn,
.contactSection .primaryBtn{

width:auto;

align-self:flex-start;

}


/* ==========================================
   AGENCY
========================================== */

.agencySection{

display:block;

padding:100px 7%;

background:
linear-gradient(
135deg,
#f4eee5,
#ddd1c1
);

}

.agencySection h2{

max-width:950px;

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

line-height:.94;

}

.agencySection > p:not(.smallTitle){

max-width:680px;

margin:30px 0 35px;

font-size:1.05rem;

line-height:1.85;

}

.agencySection .primaryBtn{

display:inline-flex;

min-width:230px;

}


/* ==========================================
   APPLY
========================================== */

.applySection{

display:grid;

grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);

align-items:center;

gap:60px;

padding:100px 7%;

background:
linear-gradient(
135deg,
#0c0a10,
#17121c
);

}

.applyContent{

max-width:690px;

}

.applySection h2{

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

}

.applyContent > p:not(.smallTitle){

max-width:610px;

margin:28px 0 34px;

font-size:1.02rem;

line-height:1.85;

}

.applyNumber{

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

line-height:.85;

letter-spacing:-6px;

text-align:right;

color:rgba(255,255,255,.07);

}


/* ==========================================
   CONTACT
========================================== */

.contactSection{

display:grid;

grid-template-columns:minmax(0,1fr) auto;

align-items:center;

gap:60px;

padding:90px 7%;

background:
linear-gradient(
135deg,
#bbae9e,
#e0d4c5
);

}

.contactSection h2{

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

}

.contactSection p:not(.smallTitle){

max-width:620px;

margin-top:22px;

font-size:1rem;

line-height:1.8;

}

.contactSection .primaryBtn{

min-width:210px;

}


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

.mainFooter{

padding:65px 7% 35px;

grid-template-columns:1fr auto;

gap:35px;

}

.footerLogo{

font-size:clamp(2.8rem,7vw,6.5rem);

}


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

@media(max-width:900px){

.hero{

padding-top:85px;

padding-bottom:75px;

}

.applySection{

grid-template-columns:1fr;

gap:45px;

}

.applyNumber{

text-align:left;

font-size:5rem;

}

.contactSection{

grid-template-columns:1fr;

gap:35px;

}

}


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

@media(max-width:700px){

.mainHeader{

height:74px;

padding:0 20px;

}

.hero{

padding:72px 22px 65px;

}

.heroContent{

margin:0;

}

.hero h1{

font-size:clamp(3.45rem,15vw,5.2rem);

line-height:.92;

letter-spacing:-3px;

margin-bottom:24px;

}

.heroText{

font-size:.94rem;

line-height:1.75;

margin-bottom:28px;

}

.heroButtons{

display:grid;

grid-template-columns:1fr;

gap:12px;

}

.heroButtons a{

width:100%;

min-width:0;

}

.heroLocation{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:34px;

padding-top:20px;

}

.agencySection,
.applySection,
.contactSection{

padding:75px 22px;

}

.agencySection h2,
.applySection h2,
.contactSection h2{

font-size:clamp(2.8rem,12vw,4rem);

line-height:.96;

letter-spacing:-2px;

}

.agencySection > p:not(.smallTitle),
.applyContent > p:not(.smallTitle),
.contactSection p:not(.smallTitle){

font-size:.95rem;

line-height:1.8;

margin-top:24px;

}

.agencySection .primaryBtn,
.applySection .lightBtn,
.contactSection .primaryBtn{

width:100%;

margin-top:0;

}

.applyNumber{

margin-top:20px;

font-size:4.5rem;

letter-spacing:-4px;

}

.mainFooter{

display:block;

padding:55px 22px 30px;

}

.footerLinks{

justify-content:flex-start;

margin:30px 0;

}

.mainFooter > p{

margin-top:14px;

}

}


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

@media(max-width:420px){

.hero{

padding-left:18px;

padding-right:18px;

}

.hero h1{

font-size:3.25rem;

}

.agencySection,
.applySection,
.contactSection{

padding-left:18px;

padding-right:18px;

}

}
/* ==========================================
   AMORA GLOBAL BACKGROUND IMAGE
========================================== */

body{

background:
linear-gradient(
135deg,
rgba(7,7,10,.94),
rgba(19,15,24,.90),
rgba(47,40,37,.88)
),
url("../assets/images/cybermuse-bg.webp");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

}


/* Allow background to subtly show through */

.hero{

background:
linear-gradient(
135deg,
rgba(8,7,12,.82),
rgba(22,17,27,.76),
rgba(37,31,29,.72)
);

}

.applySection{

background:
linear-gradient(
135deg,
rgba(8,7,12,.91),
rgba(20,15,24,.87)
);

}


/* Light sections remain readable */

.agencySection{

background:
linear-gradient(
135deg,
rgba(244,238,229,.94),
rgba(221,209,193,.92)
);

}

.contactSection{

background:
linear-gradient(
135deg,
rgba(187,174,158,.94),
rgba(224,212,197,.92)
);

}


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

@media(max-width:700px){

body{

background-attachment:scroll;

background-position:center top;

}

.hero{

background:
linear-gradient(
180deg,
rgba(8,7,12,.80),
rgba(17,13,20,.74),
rgba(34,29,27,.78)
);

}

}
body{

min-height:100vh;

background:
linear-gradient(
135deg,
rgba(7,7,10,.88),
rgba(19,15,24,.84),
rgba(47,40,37,.80)
),
url("../assets/images/cybermuse-bg.webp");

background-size:contain;

background-position:center top;

background-repeat:no-repeat;

background-attachment:fixed;

background-color:#0b0910;

}
@media(max-width:700px){

body{

background-size:100% auto;

background-position:center 74px;

background-attachment:scroll;

}

}
/* ==========================================
   BALANCED HERO IMAGE
========================================== */

.hero{

min-height:100svh;

position:relative;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:30px;

padding:110px 6% 50px;

overflow:hidden;

background:
linear-gradient(
135deg,
#08070c,
#17121d,
#241f1d
);

}

.heroContent{

position:relative;

z-index:3;

width:100%;

max-width:650px;

}

.heroImageWrap{

position:relative;

width:100%;

height:calc(100svh - 130px);

display:flex;

align-items:flex-end;

justify-content:center;

overflow:hidden;

z-index:2;

}

.heroBackgroundImage{

width:100%;

height:100%;

object-fit:contain;

object-position:center bottom;

display:block;

}


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

@media(max-width:700px){

.hero{

min-height:auto;

display:flex;

flex-direction:column;

align-items:stretch;

gap:35px;

padding:105px 22px 0;

}

.heroContent{

width:100%;

}

.heroImageWrap{

width:100%;

height:auto;

min-height:500px;

margin-top:5px;

}

.heroBackgroundImage{

width:100%;

height:auto;

max-height:650px;

object-fit:contain;

object-position:center bottom;

}

}
/* ==========================================
   FULL-WIDTH HERO MODEL IMAGE — MOBILE
========================================== */

@media(max-width:700px){

.hero{

padding:
105px 22px 0;

overflow:hidden;

}

.heroImageWrap{

width:100vw;

height:auto;

min-height:0;

margin-left:calc(50% - 50vw);

margin-right:calc(50% - 50vw);

margin-top:35px;

display:flex;

align-items:flex-end;

justify-content:center;

overflow:hidden;

}

.heroBackgroundImage{

display:block;

width:100vw;

height:auto;

max-width:none;

object-fit:contain;

object-position:center bottom;

}

}
/* ==========================================
   MOBILE MENU ACCOUNT
========================================== */

.menuAccount{

position:absolute;

top:85px;
left:50%;

transform:translateX(-50%);

width:calc(100% - 44px);
max-width:430px;

display:flex;
align-items:center;

gap:16px;

padding:16px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.12),
rgba(255,255,255,.05)
);

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

backdrop-filter:blur(18px);

}

.menuAccountPhoto{

width:62px;
height:62px;

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

flex-shrink:0;

overflow:hidden;

border-radius:50%;

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

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

font-size:1.6rem;

}

.menuAccountPhoto img{

display:none;

width:100%;
height:100%;

object-fit:cover;

}

.menuAccountInfo{

min-width:0;

display:flex;
flex-direction:column;

gap:5px;

}

.menuAccountInfo strong{

font-family:'Space Grotesk',sans-serif;

font-size:1rem;

letter-spacing:1px;

text-transform:uppercase;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.menuAccountInfo span{

font-size:.72rem;

color:rgba(255,255,255,.6);

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.mobileMenu nav{

margin-top:110px;

}
/* ==========================================
   SPECIAL REQUEST MODAL
========================================== */

.specialRequestModal{
position:fixed;
inset:0;
z-index:5000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.82);
backdrop-filter:blur(16px);
}

.specialRequestModal.active{
display:flex;
}

.specialRequestBox{
position:relative;
width:min(100%,650px);
max-height:92vh;
overflow-y:auto;
padding:38px;
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(
135deg,
#19151e,
#0c0a10
);
box-shadow:0 35px 100px rgba(0,0,0,.5);
}

.closeSpecialRequest{
position:absolute;
top:15px;
right:16px;
width:42px;
height:42px;
border:0;
background:rgba(255,255,255,.08);
color:#fff;
font-size:1.7rem;
cursor:pointer;
}

.specialRequestBox h2{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(2.2rem,7vw,3.8rem);
line-height:1;
text-transform:uppercase;
margin-bottom:15px;
}

.specialRequestIntro{
margin-bottom:28px;
font-size:.86rem;
line-height:1.75;
color:rgba(255,255,255,.65);
}

.specialRequestGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:17px;
}

.specialInput{
display:flex;
flex-direction:column;
gap:8px;
}

.fullSpecialWidth{
grid-column:1 / -1;
}

.specialInput label{
font-size:.62rem;
font-weight:600;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(255,255,255,.72);
}

.specialInput input,
.specialInput select,
.specialInput textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:0;
outline:none;
background:rgba(255,255,255,.055);
color:#fff;
}

.specialInput input,
.specialInput select{
height:54px;
padding:0 15px;
}

.specialInput textarea{
min-height:145px;
padding:15px;
resize:vertical;
line-height:1.7;
}

.specialInput input:focus,
.specialInput select:focus,
.specialInput textarea:focus{
border-color:var(--champagne);
background:rgba(255,255,255,.085);
}

.specialInput select option{
background:#17141c;
color:#fff;
}

.submitSpecialRequest{
width:100%;
min-height:58px;
margin-top:24px;
border:1px solid #fff;
background:#fff;
color:#111;
font-size:.68rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
}

.submitSpecialRequest:disabled{
opacity:.55;
cursor:not-allowed;
}

.specialRequestStatus{
min-height:22px;
margin-top:14px;
text-align:center;
font-size:.76rem;
color:rgba(255,255,255,.65);
}

.specialRequestStatus.success{
color:#9ef0b4;
}

.specialRequestStatus.error{
color:#ff9aad;
}

@media(max-width:700px){

.specialRequestModal{
padding:0;
align-items:flex-end;
}

.specialRequestBox{
width:100%;
max-height:94vh;
padding:34px 18px 24px;
}

.specialRequestGrid{
grid-template-columns:1fr;
}

.fullSpecialWidth{
grid-column:auto;
}

}
/* ==========================================
   KEEP SPECIAL REQUEST VISIBLE
========================================== */

#specialRequestBtn{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.3);
color:#fff;
cursor:pointer;
}


/* MOBILE */

@media(max-width:1000px){

#specialRequestBtn{
display:inline-flex;
min-height:26px;
height:26px;
padding:0 7px;
margin-left:auto;
margin-right:6px;

font-size:.44rem;
letter-spacing:.6px;
white-space:nowrap;
}

}


/* SMALL MOBILE */

@media(max-width:420px){

#specialRequestBtn{
padding:0 9px;
font-size:.5rem;
letter-spacing:.7px;
}

}
/* AMORA wallet / paid access features */
.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.featureLink{display:block;padding:16px;border:1px solid #3b3241;border-radius:14px;background:#15111b;color:#fff;text-decoration:none;font-weight:800}.featureLink small{display:block;color:#b9aebe;font-weight:500;margin-top:5px}@media(max-width:700px){.featureGrid{grid-template-columns:1fr}}


/* Mobile interaction visibility fix: preserve existing layout, keep actionable controls reachable. */
@media(max-width:700px){
  .mainHeader{gap:8px;}
  .logo{flex:0 1 auto;min-width:0;}
  .bookBtn{flex:0 0 auto;}
  .menuBtn{flex:0 0 auto;}
  .sectionHeading{gap:12px;}
  .sectionLink{flex:0 0 auto;}
}

/* ==========================================
   MOBILE MENU — LIVE WALLET
========================================== */
.menuWallet{position:absolute;top:178px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:430px;min-height:52px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 15px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;backdrop-filter:blur(18px)}
.menuWallet[hidden]{display:none!important}
.menuWalletLabel{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.7)}
.menuWallet strong{justify-self:end;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;white-space:nowrap}
.menuWalletArrow{font-size:1.45rem;line-height:1;color:rgba(255,255,255,.65)}
.mobileMenu:has(.menuWallet:not([hidden])) nav{margin-top:12px}
@media(max-width:520px){.menuWallet{top:174px;min-height:48px;padding:10px 13px}.menuWallet strong{font-size:.9rem}}

.menuNotifications{position:absolute;top:238px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:430px;min-height:50px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;backdrop-filter:blur(18px)}
.menuNotifications[hidden]{display:none!important}.menuNotificationsLabel{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.72)}
.menuNotifications strong{justify-self:end;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:#eadfcf;color:#111;font-size:.72rem}
.menuNotificationsArrow{font-size:1.45rem;color:rgba(255,255,255,.65)}
.mobileMenu:has(.menuNotifications:not([hidden])) nav{margin-top:12px}
@media(max-width:520px){.menuNotifications{top:230px;min-height:46px;padding:9px 13px}}


/* ==========================================
   MOBILE MENU — PRIMARY AMORA DESTINATIONS
========================================== */
.mobileMenu nav .menuPrimaryLink{
color:#f4e7cf;
font-weight:700;
}

/* The added top destinations make the menu taller; keep every item reachable. */
.mobileMenu{
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

@media(max-height:820px), (max-width:700px){
.mobileMenu{
justify-content:flex-start;
padding-top:305px;
padding-bottom:42px;
}
.mobileMenu nav{
gap:14px;
}
.mobileMenu nav a{
font-size:clamp(1.55rem,7vw,2.35rem);
line-height:1.05;
}
}

/* Messages menu + non-intrusive activity preview */
.menuMessages{position:absolute;top:298px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:430px;min-height:50px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;backdrop-filter:blur(18px)}
.menuMessages[hidden]{display:none!important}.menuMessagesLabel{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.72)}.menuMessages strong{justify-self:end;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:#eadfcf;color:#111;font-size:.72rem}.menuMessagesArrow{font-size:1.45rem;color:rgba(255,255,255,.65)}.mobileMenu:has(.menuMessages:not([hidden])) nav{margin-top:70px}
.activityPreview{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:1200;width:min(470px,calc(100vw - 40px));display:grid;grid-template-columns:1fr auto;align-items:stretch;border:1px solid rgba(255,145,168,.5);border-radius:12px;background:rgba(154,31,63,.94);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(65,0,17,.26);overflow:hidden}.activityPreview[hidden]{display:none!important}.activityPreview>a{display:grid;gap:2px;padding:9px 12px;color:#fff;text-decoration:none;min-width:0}.activityPreviewType{font-size:.5rem;font-weight:800;letter-spacing:1.5px;color:#ffd7df}.activityPreview strong{font-size:.77rem;line-height:1.2}.activityPreviewText{font-size:.67rem;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activityPreview button{width:38px;border:0;border-left:1px solid rgba(255,255,255,.16);background:rgba(72,0,20,.12);color:#fff;font-size:1.15rem;cursor:pointer}@media(max-width:520px){.menuMessages{top:286px;min-height:46px;padding:9px 13px}.activityPreview{top:66px;width:calc(100vw - 30px);border-radius:11px}.activityPreview>a{padding:8px 10px}.activityPreview button{width:36px}}





/* ===== Mobile header: Find Connection button fit ===== */
@media (max-width: 760px){
  .mainHeader{
    gap:12px;
  }

  #specialRequestBtn{
    flex:0 0 auto !important;
    width:124px !important;
    max-width:124px !important;
    min-width:124px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.6px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    border-radius:0 !important;
    margin-left:auto !important;
  }

  .menuBtn{
    flex:0 0 46px !important;
    width:46px !important;
    margin-left:0 !important;
  }

  .logo{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
}

@media (max-width: 390px){
  #specialRequestBtn{
    width:114px !important;
    max-width:114px !important;
    min-width:114px !important;
    font-size:9.5px !important;
    letter-spacing:.4px !important;
    padding:0 8px !important;
  }

  .mainHeader{
    gap:9px;
  }
}


/* ===== HOMEPAGE STORIES REFINEMENT: two-up cards, no strip block, no hero gap ===== */
.homeStories{
  width:100%;
  padding:16px 16px 10px;
  background:transparent !important;
  border:0 !important;
  overflow:hidden;
}
.homeStoriesRail{
  width:100%;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 14px)/2);
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:0 0 4px;
  -webkit-overflow-scrolling:touch;
}
.homeStoriesRail::-webkit-scrollbar{display:none}
.homeStoryCard{
  position:relative;
  min-width:0;
  height:clamp(250px,70vw,330px);
  aspect-ratio:auto !important;
  overflow:hidden;
  background:#261018;
  border:2px solid #be244a;
  border-radius:20px;
  scroll-snap-align:start;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.homeStoryCard img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.storyConversationBtn{
  position:absolute;
  left:9px;
  right:9px;
  bottom:9px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(151,18,55,.94);
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:10px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.45px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.homeStoryCardSkeleton{
  border-color:rgba(190,36,74,.45);
  background:
    linear-gradient(100deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.10) 40%,rgba(255,255,255,.035) 60%),
    #1b151b;
  background-size:220% 100%;
  animation:homeStorySkeleton 1.15s linear infinite;
}
@keyframes homeStorySkeleton{
  from{background-position:120% 0}
  to{background-position:-120% 0}
}

/* The stories now occupy the old empty vertical area. */
@media(max-width:700px){
  body.cmStoriesReady .hero{
    min-height:auto !important;
    padding-top:24px !important;
  }
  body.cmStoriesReady .heroContent{
    margin-top:0 !important;
  }
}
@media(max-width:390px){
  .homeStories{padding-left:12px;padding-right:12px}
  .homeStoriesRail{
    grid-auto-columns:calc((100% - 12px)/2);
    gap:12px;
  }
  .homeStoryCard{height:clamp(238px,72vw,290px)}
  .storyConversationBtn{left:7px;right:7px;bottom:7px;font-size:9px}
}
@media(min-width:701px){
  .homeStories{
    padding:20px max(24px,calc((100vw - 1180px)/2)) 14px;
  }
  .homeStoriesRail{
    grid-auto-columns:calc((100% - 42px)/4);
    gap:14px;
  }
  .homeStoryCard{
    height:auto;
    aspect-ratio:3/4 !important;
    border-radius:18px;
  }
}

/* ===== Whole-page startup skeleton ===== */
.homeBootSkeleton{
  position:fixed;
  inset:0;
  z-index:100000;
  background:#08070c;
  padding:0 20px 32px;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:opacity .22s ease,visibility .22s ease;
}
body:not(.homeBooting) .homeBootSkeleton{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.homeSkeletonPulse{
  display:block;
  overflow:hidden;
  position:relative;
  background:#17141a;
}
.homeSkeletonPulse::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent);
  animation:homeSkeletonSweep 1.05s infinite;
}
@keyframes homeSkeletonSweep{to{transform:translateX(100%)}}
.homeBootSkeletonHeader{
  height:104px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.homeSkeletonLogo{width:150px;height:24px;border-radius:7px}
.homeSkeletonAction{width:126px;height:36px;border-radius:3px;margin-left:auto}
.homeSkeletonMenu{width:48px;height:26px;border-radius:5px}
.homeBootSkeletonStories{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:16px 0 10px;
}
.homeSkeletonStory{
  height:clamp(250px,70vw,330px);
  border:2px solid rgba(190,36,74,.4);
  border-radius:20px;
}
.homeBootSkeletonHero{padding:24px 2px 0}
.homeSkeletonEyebrow{width:60%;height:13px;border-radius:5px;margin-bottom:24px}
.homeSkeletonTitle{width:92%;height:38px;border-radius:7px;margin-bottom:9px}
.homeSkeletonTitleShort{width:78%;margin-bottom:28px}
.homeSkeletonLine{width:96%;height:18px;border-radius:6px;margin-bottom:11px}
.homeSkeletonLineShort{width:68%;margin-bottom:28px}
.homeSkeletonButton{width:100%;height:58px;border-radius:3px}
@media(min-width:701px){
  .homeBootSkeleton{padding-left:6%;padding-right:6%}
  .homeBootSkeletonStories{grid-template-columns:repeat(4,1fr)}
  .homeSkeletonStory{height:auto;aspect-ratio:3/4}
  .homeBootSkeletonHero{max-width:640px}
}



/* ===== STORIES: shuffled/full-bleed/fast-paint correction ===== */
.homeStoryCard{
  padding:0 !important;
  background:#120b10 !important;
}
.homeStoryCard > img{
  position:absolute !important;
  inset:-3% !important;
  width:106% !important;
  max-width:none !important;
  height:106% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:translateZ(0) !important;
}
.homeStoryCardSkeleton{
  background:linear-gradient(100deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.10) 40%,rgba(255,255,255,.035) 60%),#1b151b !important;
  background-size:220% 100% !important;
}
/* The homepage itself must never wait for story network requests. */
.homeBootSkeleton{display:none !important;}
body.homeBooting{overflow:auto !important;}


/* ===== STORIES: SMALLER START CONVERSATION BUTTON ===== */
.storyConversationBtn{
  left:12px !important;
  right:12px !important;
  bottom:10px !important;
  min-height:32px !important;
  padding:5px 7px !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.35px !important;
  border-width:1px !important;
}
@media(max-width:390px){
  .storyConversationBtn{
    left:10px !important;
    right:10px !important;
    bottom:9px !important;
    min-height:30px !important;
    padding:4px 6px !important;
    font-size:7.5px !important;
    letter-spacing:.25px !important;
  }
}


/* =========================================================
   AMORA EDITORIAL HOMEPAGE REDESIGN — 2026-09-26
   Homepage-only visual composition. Existing links/logic stay intact.
   ========================================================= */

/* Stories: quieter, sharper, more editorial */
.homeStories{
  padding-top:18px!important;
  padding-bottom:18px!important;
}
.homeStoriesRail{
  gap:12px!important;
}
.homeStoryCard{
  border-width:1px!important;
  border-color:rgba(190,36,74,.72)!important;
  border-radius:12px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
}
.storyConversationBtn{
  left:12px!important;
  right:12px!important;
  bottom:10px!important;
  min-height:29px!important;
  padding:4px 8px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background:rgba(133,15,48,.91)!important;
  font-size:7.5px!important;
  letter-spacing:.5px!important;
  line-height:1!important;
}

/* Hero becomes a deliberate editorial spread */
.hero{
  min-height:clamp(650px,80vh,860px)!important;
  display:grid!important;
  grid-template-columns:minmax(0, .88fr) minmax(360px, 1.12fr)!important;
  align-items:end!important;
  gap:clamp(34px,5vw,86px)!important;
  padding:clamp(58px,7vw,96px) max(28px,6vw) 0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 72%,rgba(144,20,55,.10),transparent 30%),
    #0a0810!important;
}
.heroContent{
  width:100%!important;
  max-width:680px!important;
  align-self:center!important;
  padding:18px 0 clamp(62px,8vh,100px)!important;
  z-index:5!important;
}
.smallTitle{
  margin:0 0 18px!important;
  color:#e7c77b!important;
  font-size:.63rem!important;
  font-weight:750!important;
  letter-spacing:.48em!important;
}
.hero h1{
  margin:0!important;
  font-size:clamp(3.6rem,6.4vw,7.1rem)!important;
  line-height:.84!important;
  letter-spacing:-.062em!important;
  font-weight:720!important;
  text-shadow:none!important;
}
.hero h1 span{
  margin-top:.03em!important;
  -webkit-text-stroke:1px rgba(255,255,255,.68)!important;
}
.heroButtons{
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  gap:8px!important;
  margin:30px 0 24px!important;
  align-items:center!important;
}
.heroButtons .primaryBtn,
.heroButtons .secondaryBtn{
  width:auto!important;
  min-width:154px!important;
  min-height:43px!important;
  padding:0 18px!important;
  border-radius:0!important;
  font-size:.64rem!important;
  font-weight:800!important;
  letter-spacing:.2em!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.heroButtons .primaryBtn{
  background:#f3f0eb!important;
  color:#111217!important;
  border:1px solid #f3f0eb!important;
}
.heroButtons .secondaryBtn{
  background:transparent!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
}
.heroButtons .primaryBtn:hover,
.heroButtons .secondaryBtn:hover{
  transform:none!important;
  box-shadow:none!important;
}
.heroText{
  max-width:560px!important;
  margin:0!important;
  color:rgba(255,255,255,.68)!important;
  font-size:.92rem!important;
  line-height:1.67!important;
}
.heroLocation{
  display:flex!important;
  gap:26px!important;
  margin:30px 0 0!important;
  padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
}
.heroLocation span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  font-size:.58rem!important;
  letter-spacing:.22em!important;
  color:rgba(255,255,255,.56)!important;
}
.heroLocation b{
  color:#e7c77b!important;
  font-size:.52rem!important;
  font-weight:800!important;
}
.heroImageWrap{
  position:relative!important;
  width:100%!important;
  height:min(76vh,760px)!important;
  min-height:560px!important;
  margin:0!important;
  align-self:end!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.heroImageWrap:before{
  content:""!important;
  position:absolute!important;
  inset:auto 8% 5% 8%!important;
  height:68%!important;
  border-radius:50% 50% 0 0!important;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%)!important;
  pointer-events:none!important;
}
.heroBackgroundImage{
  width:112%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  display:block!important;
  filter:drop-shadow(0 32px 50px rgba(0,0,0,.42))!important;
}
.scrollText{display:none!important}

/* Editorial system for homepage sections below the hero */
.agencySection,
.applySection,
.contactSection{
  position:relative!important;
  border-top:1px solid rgba(255,255,255,.11)!important;
}
.agencySection:before,
.applySection:before,
.contactSection:before{
  position:absolute!important;
  top:30px!important;
  left:max(22px,6vw)!important;
  color:rgba(255,255,255,.28)!important;
  font-family:'Space Grotesk',sans-serif!important;
  font-size:.62rem!important;
  letter-spacing:.22em!important;
  font-weight:700!important;
}
.agencySection:before{content:"02 / CONNECTIONS"!important}
.applySection:before{content:"03 / JOIN"!important}
.contactSection:before{content:"04 / COMPANIONSHIP"!important}
.agencySection,
.applySection{
  padding-top:110px!important;
}
.contactSection{
  padding-top:100px!important;
}
.agencySection h2,
.applySection h2,
.contactSection h2{
  max-width:880px!important;
  font-size:clamp(2.8rem,5.4vw,5.4rem)!important;
  line-height:.94!important;
  letter-spacing:-.045em!important;
}
.agencySection>p:not(.smallTitle),
.applyContent>p:not(.smallTitle),
.contactSection>div>p:not(.smallTitle){
  max-width:620px!important;
  color:rgba(255,255,255,.65)!important;
  line-height:1.72!important;
}
.agencySection .primaryBtn,
.applySection .lightBtn,
.contactSection .primaryBtn{
  min-height:44px!important;
  padding:0 19px!important;
  border-radius:0!important;
  font-size:.63rem!important;
  letter-spacing:.18em!important;
}

/* Mobile: magazine-cover composition, no dead space */
@media(max-width:700px){
  .homeStories{
    padding:12px 12px 16px!important;
  }
  .homeStoriesRail{
    grid-auto-columns:calc((100% - 10px)/2)!important;
    gap:10px!important;
  }
  .homeStoryCard{
    height:clamp(222px,66vw,286px)!important;
    border-radius:10px!important;
  }
  .storyConversationBtn{
    left:9px!important;
    right:9px!important;
    bottom:8px!important;
    min-height:27px!important;
    font-size:7px!important;
  }

  body.cmStoriesReady .hero,
  .hero{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:34px 18px 0!important;
    overflow:hidden!important;
  }
  .heroContent{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
  }
  .smallTitle{
    margin-bottom:14px!important;
    font-size:.58rem!important;
    letter-spacing:.43em!important;
  }
  .hero h1{
    max-width:100%!important;
    font-size:clamp(2.82rem,12.4vw,4.2rem)!important;
    line-height:.88!important;
    letter-spacing:-.058em!important;
  }
  .hero h1 span{
    margin-top:.02em!important;
    -webkit-text-stroke:.8px rgba(255,255,255,.67)!important;
  }
  .heroButtons{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin:24px 0 20px!important;
  }
  .heroButtons .primaryBtn,
  .heroButtons .secondaryBtn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:0 8px!important;
    font-size:.59rem!important;
    letter-spacing:.15em!important;
  }
  .heroText{
    max-width:33rem!important;
    margin:0!important;
    font-size:.84rem!important;
    line-height:1.58!important;
    color:rgba(255,255,255,.67)!important;
  }
  .heroLocation{
    display:flex!important;
    gap:18px!important;
    margin:23px 0 0!important;
    padding-top:13px!important;
  }
  .heroLocation span{
    gap:6px!important;
    font-size:.52rem!important;
    letter-spacing:.17em!important;
  }
  .heroImageWrap{
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    margin:18px calc(50% - 50vw) 0!important;
    overflow:hidden!important;
  }
  .heroImageWrap:before{
    inset:auto 11% 2% 11%!important;
    height:72%!important;
  }
  .heroBackgroundImage{
    width:108vw!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  .agencySection,
  .applySection,
  .contactSection{
    padding-left:20px!important;
    padding-right:20px!important;
    padding-top:82px!important;
    padding-bottom:76px!important;
  }
  .agencySection:before,
  .applySection:before,
  .contactSection:before{
    top:24px!important;
    left:20px!important;
    font-size:.55rem!important;
  }
  .agencySection h2,
  .applySection h2,
  .contactSection h2{
    font-size:clamp(2.25rem,10vw,3.45rem)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
  }
  .agencySection>p:not(.smallTitle),
  .applyContent>p:not(.smallTitle),
  .contactSection>div>p:not(.smallTitle){
    font-size:.86rem!important;
    line-height:1.62!important;
  }
  .applyNumber{
    margin-top:42px!important;
    font-size:2.6rem!important;
    letter-spacing:-.04em!important;
  }
}

@media(max-width:390px){
  .hero{padding-left:14px!important;padding-right:14px!important}
  .hero h1{font-size:clamp(2.55rem,12vw,3.5rem)!important}
  .heroButtons .primaryBtn,
  .heroButtons .secondaryBtn{font-size:.55rem!important}
  .heroText{font-size:.8rem!important}
}



/* ===== HOMEPAGE STORY LABEL + WHATSAPP-STYLE VIEWER ===== */
.homeStoriesHeading{
  margin:0 0 9px;
  color:rgba(255,255,255,.78);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.homeStoryCard:not(.homeStoryCardSkeleton){cursor:pointer}
.homeStoryViewer[hidden]{display:none!important}
.homeStoryViewer{
  position:fixed;
  inset:0;
  z-index:200000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.homeStoryViewerBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
}
.homeStoryViewerPanel{
  position:relative;
  width:min(430px,100%);
  height:min(790px,calc(100dvh - 24px));
  overflow:hidden;
  border-radius:16px;
  background:#09070b;
  box-shadow:0 24px 80px rgba(0,0,0,.58);
  isolation:isolate;
}
.homeStoryProgress{
  position:absolute;
  z-index:8;
  top:10px;
  left:12px;
  right:12px;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
.homeStoryProgress>span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#fff;
  will-change:width;
}
.homeStoryViewerTop{
  position:absolute;
  z-index:9;
  top:20px;
  left:14px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.homeStoryViewerName{
  max-width:calc(100% - 52px);
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}
.homeStoryViewerClose{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.34);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
}
.homeStoryViewerImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#09070b;
  user-select:none;
  -webkit-user-drag:none;
}
.homeStoryTap{
  position:absolute;
  z-index:5;
  top:58px;
  bottom:70px;
  width:38%;
  border:0;
  padding:0;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.homeStoryTapPrev{left:0}
.homeStoryTapNext{right:0}
.homeStoryViewerConversation{
  position:absolute;
  z-index:9;
  left:18px;
  right:18px;
  bottom:16px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(133,15,48,.92);
  color:#fff;
  text-decoration:none;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
body.homeStoryViewerOpen{overflow:hidden!important}
@media(max-width:520px){
  .homeStoryViewer{padding:0}
  .homeStoryViewerPanel{
    width:100%;
    height:100dvh;
    border-radius:0;
  }
  .homeStoriesHeading{font-size:9px;margin-bottom:8px}
}


/* ===== HOMEPAGE FEED / FANTASY / CHANNEL ONE-LINE NAV ===== */
.heroButtons.homeQuickNav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:620px!important;
  margin:24px 0 20px!important;
  align-items:stretch!important;
}
.heroButtons.homeQuickNav > a:not(#homeLoginSignupBtn){
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.64rem!important;
  letter-spacing:.16em!important;
  font-weight:800!important;
}
@media(max-width:520px){
  .heroButtons.homeQuickNav{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .heroButtons.homeQuickNav > a:not(#homeLoginSignupBtn){
    min-height:42px!important;
    padding:0 4px!important;
    font-size:.56rem!important;
    letter-spacing:.10em!important;
  }
}
@media(max-width:360px){
  .heroButtons.homeQuickNav{
    gap:4px!important;
  }
  .heroButtons.homeQuickNav > a:not(#homeLoginSignupBtn){
    font-size:.52rem!important;
    letter-spacing:.07em!important;
  }
}