@import url('https://fonts.googleapis.com/css2?family=Lustria&family=Jost:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;scroll-behavior:smooth}
@media(min-width:768px){html{font-size:20px}}
body{font-family:'Jost',sans-serif;background:hsl(36,33%,97%);color:hsl(16,14%,10%);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Lustria',serif;font-weight:700;color:#777}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}

:root{
  --bg:hsl(36,33%,97%);
  --fg:hsl(16,14%,10%);
  --surface:#fff;
  --primary:hsl(28,16%,55%);
  --primary-fg:#fff;
  --muted:hsl(30,20%,94%);
  --muted-fg:hsl(20,10%,46%);
  --accent:hsl(28,16%,55%);
  --accent-dark:hsl(28,20%,45%);
  --accent-light:hsl(28,18%,75%);
  --accent-subtle:hsl(38,40%,94%);
  --border:hsl(30,18%,89%);
  --radius:15px;
}

.container{max-width:1240px;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

.badge{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--primary)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;border-radius:var(--radius);transition:all .2s;white-space:nowrap;cursor:pointer;font-family:'Jost',sans-serif}
.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light)}
.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}

/* ── HEADER ── */
#site-header{
  position:fixed;z-index:50;
  left:50%;transform:translateX(-50%);
  top:1.25rem;
  width:calc(100% - 3rem);max-width:1360px;
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;
  background:white;border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  transition:all .3s;
  overflow:visible;
}
@media(min-width:768px){#site-header{padding:.75rem 1.75rem}}
#site-header.scrolled{top:.75rem;width:calc(100% - 2rem);box-shadow:0 8px 32px rgba(0,0,0,.10)}

.header-logo img{height:2.5rem;width:auto}

.header-nav{display:none;align-items:center;gap:1.5rem}
@media(min-width:1024px){.header-nav{display:flex}}
.header-nav a{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg);transition:color .2s}
.header-nav a:hover,.header-nav a.active{color:var(--primary)}

/* ── SIMPLE DROPDOWN ── */
.nav-dropdown{position:relative}
.nav-dropdown-btn{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.25rem;padding:0;font-family:'Jost',sans-serif;transition:color .2s}
.nav-dropdown-btn:hover{color:var(--primary)}
.nav-dropdown-btn svg{transition:transform .2s}

.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + .75rem);
  left:50%;
  transform:translateX(-50%);
  background:white;
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  border:1px solid var(--border);
  min-width:220px;
  padding:.5rem;
  z-index:200;
}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;
  padding:.625rem .875rem;
  font-size:14px;
  color:var(--fg);
  border-radius:8px;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{background:var(--accent-subtle);color:var(--primary)}

/* DROPDOWN SECTIONS */
.dd-section-title{
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--primary);font-weight:500;
  padding:.5rem .875rem .25rem;
  display:block;
}

.header-actions{display:flex;align-items:center;gap:.75rem}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:6px;padding:.5rem}
@media(min-width:1024px){.hamburger{display:none}}
.hamburger span{display:block;width:1.5rem;height:1.5px;background:var(--fg);transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── MOBILE NAV ── */
#mobile-nav{display:none;position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);flex-direction:column;align-items:center;padding-top:1.5rem}
#mobile-nav.open{display:flex}
.mobile-nav-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;color:var(--fg);cursor:pointer;background:none;border:none}
.mobile-nav-links{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:2rem;width:100%;overflow-y:auto}
.mobile-nav-links a,.mobile-nav-links button{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg);padding:.75rem;transition:color .2s;display:block;background:none;border:none;cursor:pointer;font-family:'Jost',sans-serif}
.mobile-nav-links a:hover,.mobile-nav-links button:hover{color:var(--primary)}
.mobile-sub{display:none;flex-direction:column;align-items:center;gap:.125rem;padding-bottom:.5rem}
.mobile-sub.open{display:flex}
.mobile-sub a{font-size:13px;color:var(--muted-fg);padding:.4rem}
.mobile-sub a:hover{color:var(--primary)}

/* ── FLOATING BTNS ── */
.floating-btns{position:fixed;bottom:1rem;right:1rem;z-index:40;display:flex;flex-direction:column;gap:.625rem}
.floating-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:var(--radius);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;transition:all .2s;box-shadow:0 4px 24px rgba(0,0,0,.06);font-family:'Jost',sans-serif;border:none;cursor:pointer}
@media(min-width:480px){.floating-btn{padding:.75rem 1.25rem}}
.fb-label{display:none}
@media(min-width:480px){.fb-label{display:inline}}
.floating-btn-primary{background:var(--primary);color:#fff}
.floating-btn-primary:hover{background:var(--accent-dark)}
.floating-btn-outline{background:white;color:var(--primary);border:1px solid var(--primary)}
.floating-btn-outline:hover{background:var(--primary);color:#fff}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal-box{background:white;border-radius:20px;padding:2rem;max-width:480px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-close{position:absolute;top:1rem;right:1rem;font-size:1.25rem;color:var(--muted-fg);cursor:pointer;background:none;border:none}

/* ── SCROLL FADE ── */
.scroll-fade{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.scroll-fade.visible{opacity:1;transform:translateY(0)}

/* ── STARS ── */
.stars{display:flex;gap:2px}
.star{width:1rem;height:1rem;color:var(--primary);fill:var(--primary)}

/* ── ACCORDION ── */
.accordion{display:flex;flex-direction:column;gap:.75rem}
.acc-item{background:white;border:1px solid rgba(30,18,89,.1);border-radius:var(--radius);padding:0 1.25rem;overflow:hidden}
.acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;font-family:'Lustria',serif;font-size:1rem;color:var(--fg);text-align:left;cursor:pointer;background:none;border:none;gap:1rem;line-height:1.4}
.acc-trigger svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--primary);transition:transform .2s}
.acc-item.open .acc-trigger svg{transform:rotate(180deg)}
.acc-content{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-item.open .acc-content{max-height:600px}
.acc-body{padding-bottom:1.25rem;font-size:14px;color:var(--muted-fg);line-height:1.7}

/* ── TILT FRAME ── */
.tilt-frame{position:relative;isolation:isolate}
.tilt-outline{position:absolute;inset:-.75rem;border:1px solid hsla(28,16%,55%,.35);border-radius:20px;transform:rotate(-2deg);z-index:0;transition:transform .5s,border-color .5s;pointer-events:none}
.tilt-img{position:relative;z-index:1;border-radius:15px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.tilt-img img{width:100%;height:100%;object-fit:cover;display:block}
.tilt-frame:hover .tilt-outline{transform:rotate(2deg) scale(1.02);border-color:hsla(28,16%,55%,.6)}
.tilt-frame:hover .tilt-img{transform:rotate(-1deg) scale(1.015)}

/* ── GRIDS ── */
.row{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:768px){.row{grid-template-columns:1fr 1fr;gap:3rem}}
.row-reverse>:first-child{order:1}
.row-reverse>:last-child{order:2}
@media(min-width:768px){.row-reverse>:first-child{order:2}.row-reverse>:last-child{order:1}}

.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:55% 45%}}

.grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}

.grid-3{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:1fr 1fr 1fr}}

.grid-4{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(min-width:1024px){.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}}

.hero-img-col{display:none}
@media(min-width:1024px){.hero-img-col{display:block;position:relative}}

.brands-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem}
@media(min-width:768px){.brands-row{gap:3.5rem}}

/* ── BACKGROUNDS ── */
.bg-editorial{background:radial-gradient(1100px 700px at 88% -10%,hsla(28,16%,55%,.16),transparent 60%),radial-gradient(900px 600px at -10% 110%,hsla(28,18%,75%,.32),transparent 55%),linear-gradient(180deg,hsl(36,40%,98%) 0%,hsl(36,33%,97%) 60%,hsl(36,30%,95%) 100%)}
.bg-grain{position:relative;isolation:isolate}
.bg-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.z1{position:relative;z-index:1}

/* ── BLOB ── */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0;will-change:transform}
@keyframes blob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes blob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.06)}}
.blob1{animation:blob1 18s ease-in-out infinite}
.blob2{animation:blob2 22s ease-in-out infinite}

/* ── INK UNDERLINE ── */
.ink-u{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'><path d='M2 8 Q 55 -2 110 6 T 218 4' stroke='%23a08c7b' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:0 100%;background-size:100% .45em;padding-bottom:.18em}

/* ── MARQUEE ── */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee{animation:marquee 30s linear infinite}

/* ── REVIEW CARDS ── */
.review-card{background:white;border-radius:var(--radius);padding:1.75rem;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:box-shadow .3s;display:flex;flex-direction:column;height:100%}
.review-card:hover{box-shadow:0 10px 32px rgba(0,0,0,.10)}
.review-text{font-size:14px;color:var(--muted-fg);line-height:1.7;flex:1;margin-bottom:1.25rem}
.review-name{font-size:14px;font-weight:500;color:var(--fg)}
.review-date{font-size:12px;color:var(--muted-fg)}

/* ── INDICATION CARDS ── */
.ind-card{background:var(--bg);border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(30,18,89,.1);box-shadow:0 4px 24px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
.ind-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.10)}
.ind-card h4{font-family:'Lustria',serif;font-size:1rem;color:var(--fg);margin-bottom:.5rem}
.ind-card p{font-size:13px;color:var(--muted-fg);line-height:1.7}

/* ── STEP CARDS ── */
.step-card{position:relative;background:rgba(255,255,255,.8);border-radius:var(--radius);padding:1.75rem;border:1px solid rgba(30,18,89,.1);box-shadow:0 4px 24px rgba(0,0,0,.06)}
.step-num{position:absolute;top:-1.25rem;left:1.5rem;font-family:'Lustria',serif;font-size:3rem;color:rgba(28,16,55,.3);line-height:1}
.step-content{padding-top:1.5rem}
.step-title{font-family:'Lustria',serif;font-size:1.25rem;color:var(--fg);margin-bottom:.25rem}
.step-sub{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.75rem}
.step-text{font-size:14px;color:var(--muted-fg);line-height:1.7}

/* ── VARIANT CARDS ── */
.var-card{background:white;border-radius:var(--radius);padding:1.5rem;border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.06);height:100%}
.var-card-dark{background:var(--fg);border-color:var(--fg)}
.var-card h3{font-family:'Lustria',serif;font-size:1.5rem;margin-bottom:.25rem}
.var-card-tag{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:1rem;display:block}
.var-card-dark .var-card-tag{color:var(--primary)}
.var-card p{font-size:14px;line-height:1.7;margin-bottom:1.25rem;color:var(--muted-fg)}
.var-card-dark p{color:rgba(255,255,255,.8)}
.var-card h3{color:var(--fg)}
.var-card-dark h3{color:white}
.var-meta{font-size:12px;color:var(--muted-fg)}
.var-card-dark .var-meta{color:rgba(255,255,255,.7)}

/* ── LOCATION ── */
.location-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:72rem;margin:0 auto}
@media(min-width:1024px){.location-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
.map-wrap{position:relative;border-radius:20px;overflow:hidden;height:340px}
@media(min-width:768px){.map-wrap{height:420px}}
@media(min-width:1024px){.map-wrap{height:100%;min-height:420px}}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.55) sepia(.25) hue-rotate(-10deg) brightness(1.02) contrast(.95)}
.info-card{background:var(--bg);border-radius:20px;border:1px solid rgba(30,18,89,.1);box-shadow:0 8px 32px rgba(0,0,0,.06);padding:1.5rem;display:flex;flex-direction:column}
@media(min-width:768px){.info-card{padding:2rem}}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;flex:1}
.info-label{font-family:'Lustria',serif;font-size:1rem;color:var(--fg);margin-bottom:.5rem}
.info-text{font-size:14px;color:var(--muted-fg);line-height:1.7}
.info-text a{color:var(--muted-fg);transition:color .2s}
.info-text a:hover{color:var(--primary)}

/* ── FOOTER ── */
footer{background:var(--bg);border-top:2px solid var(--primary)}
.footer-inner{padding:5rem 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-links a{display:block;font-size:14px;color:var(--muted-fg);transition:color .2s;margin-bottom:.5rem}
.footer-links a:hover{color:var(--primary)}
.footer-contact{font-size:14px;color:var(--muted-fg);line-height:1.8}
.footer-contact a{color:var(--muted-fg);transition:color .2s}
.footer-contact a:hover{color:var(--primary)}
.footer-copy{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--muted-fg)}

/* ── UTILS ── */
.text-center{text-align:center}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}