/* ===== Tokens ===== */
:root{
  --bg:#fdf6f1; --surface:#ffffff; --ink:#3b1a3f; --plum:#4a1238;
  --gold:#b09a63; --gold-light:#d9c48f; --line:#eadfcf; --muted:#6d5a6e;
  --yellow:#f5b21b; --header-h:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--bg); color:var(--ink);position: relative;
  font-family:'Lato','Helvetica Neue',Arial,sans-serif; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
body::before{pointer-events:none;
     position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index: 999; */
    content: "";
    background: #FDF6F1;
    background: linear-gradient(90deg, rgb(253 246 241) 0%, rgb(253 246 241 / 0%) 100% 100%);
}
body::after {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url('../images/home-banner01.png'); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1;
}
img,svg{max-width:100%}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{max-width:1240px;margin:0 auto;padding:12px 24px;min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{width:450px;text-decoration:none;color:inherit;min-width:0}
.logo img{width: 100%;}
header .btn-div {display: flex;align-items: center;justify-content: space-between;}
.event-link {
  display: flex;
  align-items: center;
  padding: 12px;
}
.event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 5px;
}
.event-link p {
  font-size: 0.87rem;
  color: var(--plum);
  font-weight: 400;
  margin: 0;
}
@media (max-width:1032px){
  .bar {flex-wrap: wrap;
    align-items: center;
    justify-content: center;}
}
@media (max-width:767px){
  header .btn-div {
    justify-content: center;
    flex-wrap: wrap;
  }
}
/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--plum);color:#fff;border:0;border-radius:999px;
  padding:12px 26px;font-family:inherit;font-weight:700;font-size:.95rem;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:filter .2s}
.btn-normal {display:inline-block;color:var(--plum);border:0;padding:12px;font-family:inherit;font-weight:700;font-size:.95rem;text-decoration:none; cursor:pointer;white-space:nowrap;transition:filter .2s}
.btn:hover{filter:brightness(1.2)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ===== Layout: left content + right sticky form ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start}
main{text-align:center}
.block{padding:48px 0 56px;border-bottom:1px solid var(--line);position: relative;}
.back-banner{position: relative;}
.back-banner::before{
      position: absolute;
    top: -70px;
    left: -100px;
    width: 50%;
    height: 60%;
    content: '';
    opacity: 0.2;
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  background-image: url(../images/lady-top.webp);
}
.block:last-child{border-bottom:0}
h1,h2{font-weight:400;color:var(--plum);text-transform:uppercase;line-height:1.05;margin:0}
h1{font-size:3.4rem}
h2{font-size:3rem;line-height:1.12}
.rule{border:0;border-top:1px solid var(--line);margin:28px auto;width:70%}
.rule.dbl{border-top:3px double var(--gold);width:34%;margin:22px auto 32px}
.tagline{font-family:'Satisfy',Georgia,cursive;font-size:1.8rem;line-height:1.35;color:var(--plum);margin:24px 0 0}
.tagline b{color:var(--gold);font-weight:400}
@media (min-width:1660px) {.bar {max-width:1580px;}

/* .wrap{max-width:1580px;}  */
.wrap{max-width:1580px; grid-template-columns:minmax(0,1fr) 500px;}}
@media (max-width: 1032px) {
  .btn-normal {
    font-size: 1.28rem;
  }
}

/* image slots: care-anf shows until your image exists in /images */
.slot{position:relative}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit: contain;}


/* Hero photo (right, faded) */
.block {position: relative;}
.hero{position:relative;padding:20px 0}
.hero h1{position:relative;}


/* Coins + QR row */
.showcase{/* display:grid;
  grid-template-columns:1fr 200px;
  grid-template-columns: 4fr 2fr;
  gap:24px; */ align-items:center;margin:8px 0}
.coins-slot{width:100%;max-width:420px;aspect-ratio:1.45;margin:0 auto}
.coins{position:relative;width:100%;height:100%}
.qr-box{background:transparent;border:1px solid var(--gold-light);padding:12px;text-align:center;color:#111}
.qr-box b{font-size:.95rem;display:block}
.qr-box small{color:var(--yellow);font-weight:700;font-size:.62rem;display:block}
.qr-slot{width:100%;aspect-ratio:1;margin:6px 0;color:#111}
.qr-slot .care-anf{width:100%;height:100%}
.qr p,.qr{font-size:.72rem}
.qr p{margin:6px 0 0;color:var(--ink);font-weight:700}
@media (min-width:1660px) {.qr-box b, .qr-box small, .qr p{font-size:1.2rem;} .tagline {font-size:2.6rem;} h1{font-size:4rem}
  h2{font-size:3.5rem;}}

/* ===== Block 1: lady image = full section height, flush with the screen's left edge ===== */
:root{--wrapw:1240px;--imgw:clamp(220px,28vw,420px);
  --edge:calc(max(0px,(100vw - var(--wrapw)) / 2) + 24px)} /* screen-left to page-content-left */
@media (min-width:1660px){:root{--wrapw:1440px}}
/* content shifts right only as much as the image overlaps the page content */
.block-lady{padding-left:max(0px,calc(var(--imgw) * .6 - var(--edge)))}
.block-lady>*:not(.hero-wrap){position:relative;z-index:1}
.hero-photo{position:absolute;top:0;bottom:0;left:calc(-1 * var(--edge));width:var(--imgw);z-index:0;pointer-events:none}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:0% 12%;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,#000 72%,transparent),linear-gradient(to bottom,#000 85%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 72%,transparent),linear-gradient(to bottom,#000 85%,transparent);
  mask-composite:intersect}
.hero-text{position:relative;z-index:1;text-align:center}
.hero-text h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.hero-text .rule{width:80%}
.hero-text .rule.dbl{width:50%}
@media (min-width:1660px){.hero-text h1{font-size:4.2rem}}
@media (max-width:640px){
  .block-lady{padding-left:0}
  .hero-photo{display:none}
  .hero-text .rule{width:70%}.hero-text .rule.dbl{width:34%}
  .hero-text h1{font-size:clamp(2.4rem,6vw,4.4rem)}
}

/* Three icons */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.icon-slot{width:96px;height:96px;margin:0 auto 10px}
.icon-slot .care-anf,.icon-slot svg{width:100%;height:100%}
.trio p{margin:0;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);line-height:1.45}

.closing p{margin:0;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--plum);font-size:clamp(.8rem,1.6vw,1.05rem)}
.closing p+p{color:var(--gold)}
@media (min-width:1660px) {.trio p{font-size:1.5rem;}}

/* Benefits */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;margin:36px auto 0;max-width:100%;text-align:left}
.item{display:flex;align-items:center;gap:16px}
.item.pill{padding: 2px 2px;margin-top: 20px;}
.ben-slot{width:60px;height:60px;border-radius:50%;background:var(--line);flex:none;overflow:hidden}
.ben-slot .care-anf{width:100%;height:100%;display:grid;place-items:center;font-size:1.5rem;color:var(--gold)}
.lbl{font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--gold)}

/* Website pill */
.pill{display:inline-flex;align-items:center;gap:10px;margin-top:36px;padding:12px 26px;background:var(--surface);border-radius:999px;text-decoration:none;color:var(--plum);font-size:1.4rem;box-shadow:0 2px 10px rgba(74,18,56,.08)}

/* ===== Sticky form (always fully visible, fits the screen height) ===== */
.form-sticky{position:sticky;top:calc(var(--header-h) + 12px);margin:0px 0;align-self:start;max-height:calc(100vh - var(--header-h) - 24px);overflow-y:auto; border-radius:18px; z-index: 9;}
form{background:var(--surface);border:1px solid var(--gold-light);border-radius:18px;
  padding:1rem 1.5rem; box-shadow:0 18px 40px rgba(74,18,56,.12)}
form h3{margin:0 0 2px;font-size: 1rem;color:var(--plum);font-weight:400}
.sub{margin:0 0 clamp(2px,1vh,10px);color:var(--muted);font-size:.85rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow>div{min-width:0}
label{display:block;font-size:.7rem;font-weight:400;margin:clamp(6px,1.4vh,12px) 0 3px; color:#808080;}
input,select,textarea{width:100%;padding:clamp(7px,1.3vh,10px) 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:.78rem}
textarea{resize:none;height:clamp(48px,8vh,70px)}
form .btn{width:100%;margin-top:clamp(10px,1.8vh,16px);border-radius:12px;padding:clamp(10px,1.6vh,13px) 20px}
.fine{font-size:.7rem;line-height:1.35;color:var(--muted);margin:8px 0 0}
.error{color:#b3261e;font-weight:700;margin:6px 0 0}
.error:empty{display:none}
.ok{display:none;text-align:center;padding:30px 10px}
@media (min-width:1660px) {form{padding: 2.5rem}form h3{font-size:1.8rem;}.sub {font-size: 1.2rem;} label {font-size: 1.2rem;} input, select, textarea {font-size: 1rem;} .fine {font-size: 1rem;}}

@media (max-height:720px) and (min-width:992px){
  /* .fine:not(.error){display:none} */
  textarea{height:40px}
  .form-sticky{margin:12px 0}
}

/* ===== Footer ===== */
/* footer{max-width:1240px;margin:0 auto;padding:24px;text-align:center;color:var(--muted);font-size:.8rem; position: relative; z-index: 9;}
footer a{color:var(--plum);font-weight:700;text-decoration:none;font-size:1rem}
footer p{margin:6px 0 0} */

.mobile-cta{display:none}
.close-btn{display:none;position:absolute;top:10px;right:10px;width:40px;height:40px;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:var(--bg);color:var(--plum);font-size:1.7rem;line-height:1;cursor:pointer;z-index:2}
.close-btn:hover{background:var(--line)}
.close-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ===== Responsive ===== */
@media (max-width:1100px){.wrap{grid-template-columns:minmax(0,1fr) 340px;gap:32px}.showcase{grid-template-columns:1fr 150px}}
@media (max-width:991.98px){
  .wrap{grid-template-columns:1fr}
  .form-sticky{margin:0; z-index: 999;}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* form = full-screen Bootstrap offcanvas on mobile */
  #enquire{--bs-offcanvas-width:100%;--bs-offcanvas-bg:var(--bg)}
  #enquire .offcanvas-body{padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
  #enquire form{max-width:520px;margin:0 auto;min-height:calc(100% - 8px)}
  .close-btn{display:grid}
  .mobile-cta{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:1030;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
}
@media (max-width:640px){
  :root{--header-h:62px}
  .bar{padding:10px 16px}.wrap{padding:0 16px}
  .btn{padding: 6px 14px;}
  h1{font-size:2.4rem !important;}
  h2{font-size:1.6rem;}
  .block{padding:32px 0 40px}
  .back-banner::before{width: 100%;}
  .showcase{grid-template-columns:1fr;justify-items:center}
  .qr{width:190px}
  .icon-slot{width:76px;height:76px}
  .trio p{font-size:.7rem;letter-spacing:.06em}
  .grid{grid-template-columns:1fr;max-width:260px; gap: 0;}
  .pill{font-size:1.1rem}
  .frow{grid-template-columns:1fr}
  form{padding:22px 18px}
  form h3{padding-right:44px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Dropdown options (interest select) ===== */
select option{background:var(--surface);color:var(--ink)}
select option:checked{background:var(--plum) linear-gradient(var(--plum),var(--plum));color:#fff}

/* Modern browsers (Chrome/Edge 135+): fully styled dropdown list */
@supports (appearance:base-select){
  select,::picker(select){appearance:base-select}
  select::picker-icon{color:var(--plum)}
  ::picker(select){
    background:var(--surface);border:1px solid var(--gold-light);border-radius:12px;
    padding:6px;box-shadow:0 12px 30px rgba(74,18,56,.18);margin-top:4px
  }
  select option{padding:10px 12px;border-radius:8px;cursor:pointer;background:var(--surface);color:var(--ink)}
  select option::checkmark{display:none}
  select option:hover,select option:focus{background:var(--line);color:var(--ink)}
  select option:checked{background:var(--plum);color:#fff}
}

/* ===== Bootstrap compatibility (keeps your design unchanged) ===== */
.btn{--bs-btn-bg:var(--plum);--bs-btn-color:#fff;--bs-btn-border-color:transparent;--bs-btn-hover-bg:var(--plum);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:var(--plum);--bs-btn-active-color:#fff;--bs-btn-active-border-color:transparent;line-height:1.6}
hr.rule{opacity:1}
form{position:relative}
#enquire .offcanvas-body{display:block}

/* ===== Phone verify ===== */
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.link-btn{background:none;border:0;padding:0;color:var(--plum);font-weight:700;font-size:.72rem;text-decoration:underline;cursor:pointer}
.link-btn:disabled{opacity:.55;cursor:default;text-decoration:none}
.ver{color:#1a7f37;font-size:.72rem;font-weight:700}
.otp{margin-top:8px}.otp .fine{margin-top:4px}
.otp-row{display:flex;gap:8px}
.mini{flex:none;background:var(--plum);color:#fff;border:0;border-radius:10px;padding:0 16px;font-weight:700;font-size:.85rem;cursor:pointer}
.mini:hover{filter:brightness(1.2)}

/* ===== Block 3 : What if biology... ===== */
h2.h2-sm{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.strip{background:var(--gold-light);color:var(--plum);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px}
.strip i{font-style:normal;margin:0 6px}
.accent-line{color:var(--gold);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:20px 0 20px;line-height:1.25}
.accent-title{color:var(--gold);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin:22px 0 8px}
.figure-slot{position:relative;aspect-ratio:3/4;max-width:300px;margin:0 auto;display:grid;place-items:center;color:var(--gold-light);font-size:7rem;
  background:radial-gradient(circle at 50% 40%,rgba(245,178,27,.25),transparent 65%)}
.figure-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bio-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:35px 8px;margin:28px 0}
@media (min-width:576px){.bio-icons{grid-template-columns:repeat(4,1fr)}}
.ico{width:48px;height:48px;border-radius:50%;background:var(--gold-light);color:var(--plum);display:inline-grid;place-items:center;font-size:1.4rem}
.bio-icons small{display:block;margin-top:4px;font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:var(--plum);font-weight:700}
.bio-tag{font-size:clamp(1.1rem,2vw,1.4rem);color:var(--plum);line-height:1.35;margin:0 0 16px}
.bio-label{display:inline-block;background:var(--plum);color:#fff;font-weight:700;letter-spacing:.06em;padding:2px 14px;margin-bottom:6px}
.bio-qr{width:150px;max-width:100%}

/* ===== Overflow safety + small-screen header ===== */
html,body{max-width:100%}
body{overflow-x:clip}
img,svg{max-width:100%;height:auto}
.slot img{height:100%}
@media (max-width:640px){
  .bar{gap:8px}
  .logo{width:100%;}
  .btn-normal{padding:8px 10px;}
  .event-link {padding: 5px;}
}



/* ===== Footer (separate stylesheet) ===== */
.site-footer{position:relative;background:var(--bg);border-top:1px solid var(--line);margin-top:24px}
.sf-inner{max-width:1240px;margin:0 auto;padding:32px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sf-logo{flex:none;width:min(320px,45%)}
.sf-logo img{display:block;width:100%;height:auto}

.sf-contact{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:14px}
.sf-contact a{display:inline-flex;align-items:center;gap:12px;color:var(--plum);font-weight:700;font-size:1.1rem;text-decoration:none;transition:color .2s}
.sf-contact a:hover{color:var(--gold)}
.sf-icon{width:35px;height:35px;border-radius:50%;background:var(--gold-light);color:var(--plum);display:inline-grid;place-items:center;font-size:1.1rem;flex:none}

.sf-copy{margin:0;font-size:.8rem;color:var(--muted)}

@media (min-width:1660px){.sf-inner{max-width:1580px}.sf-contact a{font-size:1.4rem}.sf-copy{font-size:1rem} .strip, .bio-icons small {font-size: 1rem;}}
@media (max-width:991.98px){.site-footer{margin-bottom:0}}
@media (max-width:767.98px){
  .sf-inner{flex-direction:column;text-align:center;padding:28px 16px}
  .sf-logo{width:min(280px,80%)}
  .sf-contact{align-items:center; flex-direction: column;}
  .sf-contact span {display: none;}
}