/* ============================================================
   ROYAL RINSE — DESIGN SYSTEM
   ============================================================ */
:root{
  /* Royal Rinse brand mark, embedded once and reused by every .logo-mark
     (header, drawer, footer) so the base64 payload is not triplicated. */
  --logo-img:url("../../assets/img/logo.png");

  --ink:#070E1A;
  --ink-2:#0C1729;
  --navy:#12294A;
  --navy-600:#1C3D6B;
  --navy-400:#33619B;

  --gold:#D6B25E;
  --gold-2:#F2DDA4;
  --gold-deep:#A8802C;

  --aqua:#19C3C0;
  --aqua-soft:#8DE6E4;
  --rose:#E8788A;

  --paper:#FCFBF8;
  --paper-2:#F3F0E8;
  --card:#FFFFFF;

  --text:#0B1524;
  --text-2:#41506A;
  --muted:#7A8699;
  --line:rgba(18,41,74,.11);
  --line-2:rgba(18,41,74,.18);

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --r-full:999px;

  --sh-sm:0 1px 2px rgba(7,14,26,.05), 0 6px 18px -10px rgba(7,14,26,.18);
  --sh-md:0 2px 6px rgba(7,14,26,.05), 0 26px 60px -28px rgba(7,14,26,.34);
  --sh-lg:0 44px 120px -44px rgba(7,14,26,.55);
  --sh-gold:0 18px 46px -18px rgba(214,178,94,.65);

  --ff-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw:1250px;
  --gut:clamp(18px, 4vw, 40px);
  --nav-h:76px;
  /* Fixed top rail = scrolling offers strip + gap + nav bar.
     --ticker-h and --rail-gap are the two extra bands the hero has to
     clear, and the anchor-scroll offset has to clear as well. */
  --ticker-h:40px;
  --rail-gap:6px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(15.5px,.42vw + 14.6px,16.5px);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-display); font-weight:600; line-height:1.06; letter-spacing:-.022em; font-variation-settings:"SOFT" 0,"WONK" 0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold-deep),var(--navy-400)); border-radius:99px; border:3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--gold),var(--navy)); }

:focus-visible{ outline:2.5px solid var(--gold-deep); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.ico{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico-fill{ fill:currentColor; stroke:none; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Typo helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.light{ color:var(--gold-2); }
.eyebrow.light::before{ background:linear-gradient(90deg,var(--gold-2),transparent); }

.h-xl{ font-size:clamp(2.55rem,6.2vw,4.9rem); letter-spacing:-.035em; }
.h-lg{ font-size:clamp(2.05rem,4.1vw,3.4rem); letter-spacing:-.03em; }
.h-md{ font-size:clamp(1.5rem,2.3vw,2.1rem); letter-spacing:-.022em; }
.h-sm{ font-size:clamp(1.12rem,1.3vw,1.32rem); letter-spacing:-.014em; }
.lead{ font-size:clamp(1rem,.5vw + .92rem,1.16rem); color:var(--text-2); line-height:1.72; }
.lead-l{ font-size:clamp(1.02rem,.55vw + .95rem,1.2rem); color:rgba(255,255,255,.72); line-height:1.7; }
.grad-gold{ background:linear-gradient(103deg,var(--gold-2) 4%,var(--gold) 38%,#fff5d8 58%,var(--gold) 78%,var(--gold-deep) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.it{ font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; min-height:52px; border-radius:var(--r-full);
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:15px; letter-spacing:-.008em;
  border:1px solid transparent; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.btn .ico{ font-size:19px; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 46%,transparent 72%);
  transform:translateX(-110%); transition:opacity .3s;
}
.btn:hover{ transform:translateY(-2.5px); }
.btn:hover::after{ opacity:1; animation:sheen 1.05s var(--ease) forwards; }
.btn:active{ transform:translateY(0) scale(.985); }
@keyframes sheen{ to{ transform:translateX(110%); } }

.btn-gold{ --bg:linear-gradient(120deg,var(--gold-2),var(--gold) 46%,var(--gold-deep)); --fg:var(--ink); box-shadow:var(--sh-gold); font-weight:800; }
.btn-gold:hover{ box-shadow:0 26px 60px -18px rgba(214,178,94,.8); }
.btn-wa{ --bg:linear-gradient(120deg,#2BC55F,#12A04A); --fg:#fff; box-shadow:0 18px 42px -18px rgba(18,160,74,.75); }
.btn-ink{ --bg:var(--ink); box-shadow:var(--sh-md); }
.btn-ghost{ --bg:transparent; --fg:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-on-dark{ --bg:rgba(255,255,255,.055); --fg:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(10px); }
.btn-on-dark:hover{ --bg:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.btn-sm{ padding:11px 20px; min-height:44px; font-size:14px; }
.btn-block{ width:100%; }

/* ---------- Preloader ---------- */
#pre{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 8%,#132B4D 0%,var(--ink) 62%);
  transition:opacity .7s var(--ease), visibility .7s;
}
#pre.gone{ opacity:0; visibility:hidden; }
.pre-in{ display:grid; justify-items:center; gap:22px; }
.pre-mark{ width:64px; height:64px; animation:spinMark 2.4s var(--ease) infinite; }
@keyframes spinMark{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(180deg) } }
.pre-bar{ width:190px; height:2px; background:rgba(255,255,255,.12); border-radius:9px; overflow:hidden; }
.pre-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-2)); animation:preLoad 1.25s var(--ease-2) forwards; }
@keyframes preLoad{ to{ width:100% } }
.pre-txt{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }

/* ---------- Scroll progress ---------- */
#prog{ position:fixed; top:0; left:0; height:2.5px; width:0; z-index:1200; background:linear-gradient(90deg,var(--gold),var(--aqua)); box-shadow:0 0 12px rgba(214,178,94,.8); }

/* ---------- Fixed top rail: scrolling offers strip + nav bar ----------
   Both bands sit in one fixed rail so they always move as a unit: the
   offers stay on screen for the whole visit, and the auto-hide on scroll
   down takes the whole group rather than leaving one half stranded. */
.toprail{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease);
}
.toprail.hide{ transform:translateY(-102%); }
.hdr{
  position:relative; flex:none;
  height:var(--nav-h); display:flex; align-items:center;
  transition:height .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
/* the glass panel is grown upward over the gap band, so the nav bar and the
   gap read as one block instead of two strips floating apart */
.hdr::before{
  content:""; position:absolute; inset:calc(-1 * var(--rail-gap)) 0 0 0; z-index:-1; opacity:0;
  background:rgba(252,251,248,.82); backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line); transition:opacity .4s;
}
.hdr.solid::before{ opacity:1; }
.hdr.solid{ height:66px; box-shadow:0 8px 30px -22px rgba(7,14,26,.5); }

/* Logo
   The real Royal Rinse mark is deep navy + gold artwork, so it sits on a
   white rounded tile: recolouring a logo is never the right call, and on the
   dark header the navy artwork would otherwise disappear. */
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  position:relative; width:44px; height:44px; border-radius:13px; flex:none;
  background:
    var(--logo-img) center/86% auto no-repeat,
    linear-gradient(150deg,#FFFFFF 0%,#F2F5F9 100%);
  display:grid; place-items:center; overflow:hidden;
  border:1px solid rgba(7,14,26,.08);
  box-shadow:0 8px 22px -10px rgba(7,14,26,.55), 0 2px 6px -2px rgba(7,14,26,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.logo-mark::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 35%,rgba(7,14,26,.1) 50%,transparent 65%); transform:translateX(-120%); pointer-events:none; }
.logo:hover .logo-mark::before{ animation:sheen 1.1s var(--ease) forwards; }
.logo-mark svg{ display:none; }
.logo-txt b{ display:block; font-family:var(--ff-display); font-size:19px; font-weight:700; letter-spacing:-.028em; line-height:1.05; color:var(--ink); transition:color .4s; }
.logo-txt span{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; transition:color .4s; }
.hdr:not(.solid) .logo-txt b{ color:#fff; }
.hdr:not(.solid) .logo-txt span{ color:rgba(255,255,255,.55); }

/* Nav */
.nav{ display:flex; align-items:center; gap:5px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:var(--r-full);
  font-size:14.5px; font-weight:600; color:var(--text-2); transition:color .3s, background .3s;
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .42s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.hdr:not(.solid) .nav a{ color:rgba(255,255,255,.76); }
.hdr:not(.solid) .nav a:hover{ color:#fff; }

.hdr-cta{ display:flex; align-items:center; gap:10px; }
.hdr-tel{
  display:flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; border-radius:var(--r-full);
  font-weight:800; font-size:14.5px; letter-spacing:-.01em; border:1px solid var(--line-2);
  transition:all .35s var(--ease);
}
.hdr-tel .ico{ font-size:17px; }
.hdr-tel small{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted); line-height:1; margin-bottom:2px; }
.hdr-tel:hover{ border-color:var(--gold); background:rgba(214,178,94,.1); }
.hdr:not(.solid) .hdr-tel{ color:#fff; border-color:rgba(255,255,255,.24); }
.hdr:not(.solid) .hdr-tel small{ color:rgba(255,255,255,.5); }

.burger{ display:none; width:46px; height:46px; border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.6); place-items:center; cursor:pointer; }
.hdr:not(.solid) .burger{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); }
.burger span{ display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; position:relative; transition:.35s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
.burger span::before{ top:-6px } .burger span::after{ top:6px }
.hdr:not(.solid) .burger span,.hdr:not(.solid) .burger span::before,.hdr:not(.solid) .burger span::after{ background:#fff; }
.burger.on span{ background:transparent !important; }
.burger.on span::before{ transform:translateY(6px) rotate(45deg) }
.burger.on span::after{ transform:translateY(-6px) rotate(-45deg) }

/* ---- Header: no-collision + responsive collapse ---- */
.hdr-in > *{ flex:0 0 auto; }
.logo{ min-width:0 }
.nav{ min-width:0; overflow:hidden }

@media(max-width:1180px){
  .nav a{ padding:9px 10px; font-size:14px }
  .nav a::after{ left:10px; right:10px }
}
@media(max-width:1080px){
  .nav{ display:none }
  .burger{ display:grid }
  .hdr-cta{ gap:9px }
}
@media(max-width:760px){
  :root{ --nav-h:68px }
  .hdr-tel{ display:none }
  .hdr-cta .btn{ padding:11px 15px; min-height:44px; font-size:14px }
}
@media(max-width:480px){
  .hdr-cta .btn span,
  .hdr-cta .btn{ font-size:0; gap:0; padding:0; width:46px; min-height:46px; border-radius:14px }
  .hdr-cta .btn .ico{ font-size:22px }
  .logo-mark{ width:40px; height:40px; border-radius:12px; background-size:84% auto }
  .logo-txt b{ font-size:17px }
  .logo-txt span{ font-size:8.5px; letter-spacing:.16em }
  .burger{ width:44px; height:44px }
  .hero{ padding-top:calc(var(--nav-h) + var(--ticker-h) + var(--rail-gap) + 26px) }
}

/* Very narrow phones (iPhone SE / Fold outer, ~320-400px):
   the logo + call button + burger no longer fit side by side, so tighten
   the wordmark and the gaps rather than letting the header overflow. */
.logo-txt{ min-width:0; overflow:hidden }
@media(max-width:400px){
  .hdr-in{ gap:10px }
  .hdr-cta{ gap:7px }
  .logo{ gap:9px }
  .logo-txt b{ font-size:15px; letter-spacing:-.04em; white-space:nowrap }
  .logo-txt span{ font-size:7.5px; letter-spacing:.1em; white-space:nowrap }
  .logo-mark{ width:37px; height:37px; border-radius:11px; background-size:82% auto }
  .hdr-cta .btn{ width:42px; min-height:42px; border-radius:13px }
  .burger{ width:42px; height:42px; border-radius:13px }
  .burger span,.burger span::before,.burger span::after{ width:17px }
  /* Long CTA labels ("Get an Exact Quote on WhatsApp") are nowrap by default
     and pushed 30px past the right edge on a 320px screen. Letting them wrap
     fixes it; short labels never wrap so they look unchanged. */
  .btn{ white-space:normal; text-align:center; line-height:1.35; max-width:100% }
}

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:950; visibility:hidden; pointer-events:none;
}
.drawer.on{ visibility:visible; pointer-events:auto; }
.drawer-bd{ position:absolute; inset:0; background:rgba(7,14,26,.6); backdrop-filter:blur(6px); opacity:0; transition:opacity .45s var(--ease); }
.drawer.on .drawer-bd{ opacity:1; }
.drawer-pn{
  position:absolute; top:0; right:0; bottom:0; width:min(88vw,360px);
  background:var(--paper); padding:26px 24px 34px; overflow-y:auto;
  transform:translateX(102%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; gap:26px; box-shadow:-30px 0 70px -30px rgba(7,14,26,.6);
}
.drawer.on .drawer-pn{ transform:none; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; }
.drawer-x{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; cursor:pointer; }
.drawer-nav{ display:grid; gap:2px; }
.drawer-nav a{ padding:14px 4px; font-family:var(--ff-display); font-size:22px; font-weight:600; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-nav a .ico{ font-size:19px; color:var(--gold-deep); opacity:0; transform:translateX(-8px); transition:.4s var(--ease); }
.drawer-nav a:hover .ico{ opacity:1; transform:none; }
.drawer-foot{ margin-top:auto; display:grid; gap:10px; }

/* ---------- Sections ---------- */
.sec{ padding:clamp(64px,8.5vw,122px) 0; position:relative; }
.sec-sm{ padding:clamp(48px,6vw,80px) 0; }
.sec-head{ display:grid; gap:16px; max-width:720px; margin-bottom:clamp(36px,4.5vw,60px); }
.sec-head.center{ margin-inline:auto; text-align:center; justify-items:center; }
.sec-head.row{ max-width:none; grid-template-columns:1fr auto; align-items:end; gap:26px; }
@media(max-width:760px){ .sec-head.row{ grid-template-columns:1fr; } }

/* noise */
.noise{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(51,97,155,.55) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 92%, rgba(25,195,192,.24) 0%, transparent 60%),
    radial-gradient(120% 100% at 50% 0%, #163257 0%, var(--ink) 58%, #050A12 100%);
  /* clears the full fixed rail: ticker + gap + nav, then breathing room */
  padding:calc(var(--nav-h) + var(--ticker-h) + var(--rail-gap) + clamp(20px,3vw,42px)) 0 clamp(52px,7vw,92px);
  isolation:isolate;
}
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; z-index:0; pointer-events:none; }
.blob-1{ width:520px; height:520px; top:-160px; right:-120px; background:radial-gradient(circle,rgba(214,178,94,.45),transparent 66%); animation:float1 17s ease-in-out infinite; }
.blob-2{ width:460px; height:460px; bottom:-180px; left:-120px; background:radial-gradient(circle,rgba(25,195,192,.4),transparent 66%); animation:float2 21s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translate3d(-40px,50px,0) scale(1.12) } }
@keyframes float2{ 50%{ transform:translate3d(50px,-40px,0) scale(1.1) } }
/* minmax(0,1fr) instead of 1fr: a bare 1fr track has an implicit min-content
   floor, so the hero's opening-hours block forced 30px of sideways scroll on
   320px phones. min-width:0 on the children lets the text actually wrap. */
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:clamp(30px,4.5vw,64px); align-items:center; }
.hero-grid > *{ min-width:0 }
@media(max-width:1000px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:48px; } }

.badge-pill{
  display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 8px;
  border-radius:var(--r-full); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.86); letter-spacing:.005em;
}
.badge-pill .dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg,var(--gold-2),var(--gold-deep)); color:var(--ink); }
.badge-pill .dot .ico{ font-size:14px; stroke-width:2.2; }
.stars{ display:inline-flex; gap:1.5px; color:var(--gold); }
.stars .ico{ width:12.5px; height:12.5px; fill:currentColor; stroke:none; }

.hero h1{ margin:24px 0 0; }
.hero h1 em{ font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1; }
.hero .lead{ margin:22px 0 0; max-width:53ch; }
.hero-actions{ margin:32px 0 0; display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust{ margin:38px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); overflow:hidden; }
@media(max-width:620px){ .hero-trust{ grid-template-columns:repeat(2,1fr); } }
.hero-trust div{ background:rgba(7,14,26,.35); padding:18px 16px; backdrop-filter:blur(6px); }
.hero-trust b{ display:block; font-family:var(--ff-display); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg,#fff,var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-trust span{ display:block; font-size:11.5px; color:rgba(255,255,255,.58); margin-top:7px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; }

/* Hero art */
.hero-art{ position:relative; }
.art-frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1/1.03;
  background:
    radial-gradient(120% 90% at 20% 0%, #2C5C99 0%, transparent 58%),
    linear-gradient(160deg, #16335B 0%, #0B182C 70%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 130px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.13);
}
.art-frame .noise{ opacity:.42; }
.art-weave{
  position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%);
}
.art-glow{ position:absolute; width:120%; aspect-ratio:1; left:-10%; top:-14%; border-radius:50%;
  background:radial-gradient(circle, rgba(214,178,94,.4) 0%, transparent 62%); filter:blur(28px); }
.art-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.art-sweep{ position:absolute; inset:-30% -10%; z-index:3; background:linear-gradient(102deg,transparent 36%,rgba(255,255,255,.16) 48%,transparent 60%); transform:translateX(-60%); animation:sweep 7s var(--ease-2) infinite 1.5s; }
@keyframes sweep{ 0%{transform:translateX(-70%)} 55%,100%{transform:translateX(70%)} }
.art-photo{ position:absolute; inset:0; z-index:1; opacity:.5 }
.art-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.34) contrast(1.06) brightness(.9) saturate(1.25) }
.art-photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(85% 70% at 50% 42%, transparent 10%, rgba(11,24,41,.72) 72%, var(--ink) 100%),
             linear-gradient(to top, rgba(7,14,26,.85) 0%, transparent 45%);
}
.art-cap{ position:absolute; left:22px; right:22px; bottom:20px; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.art-cap span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.6); }
.art-cap b{ font-family:var(--ff-display); font-size:19px; color:#fff; letter-spacing:-.02em; }

.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  padding:12px 16px 12px 12px; border-radius:var(--r-md);
  background:rgba(252,251,248,.9); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.7);
  animation:bob 6s ease-in-out infinite;
}
.chip .ci{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none; }
.chip .ci .ico{ font-size:18px; }
.chip b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.012em; line-height:1.25; color:var(--ink); }
.chip span{ display:block; font-size:11px; color:var(--muted); font-weight:600; }
.chip-1{ top:8%; left:-5%; }
.chip-2{ bottom:12%; right:-5%; animation-delay:-2s; }
.chip-3{ top:46%; right:-8%; animation-delay:-4s; }
@media(max-width:1000px){ .chip-1{left:-2%} .chip-2{right:-2%} .chip-3{ display:none } }
@media(max-width:520px){ .chip{ padding:10px 13px 10px 10px } .chip span{display:none} .chip-1{left:6px;top:6px} .chip-2{right:6px;bottom:8px} }
@keyframes bob{ 50%{ transform:translateY(-13px) } }

.ci-gold{ background:linear-gradient(140deg,var(--gold-2),var(--gold-deep)); color:var(--ink)!important; }
.ci-aqua{ background:linear-gradient(140deg,var(--aqua-soft),#0E9C99); }
.ci-ink{ background:linear-gradient(140deg,var(--navy-400),var(--ink)); }
.ci-rose{ background:linear-gradient(140deg,#F5A3AE,var(--rose)); }

/* ---------- Marquee / Scrolling Row ----------
   Sits at the very top of the fixed rail, above the nav bar, with
   --rail-gap of breathing room before the header. The height is fixed
   rather than derived from padding so the hero's top offset stays exact. */
.marq{
  background:var(--ink); color:#fff; overflow:hidden;
  position:relative; z-index:5; flex:none;
  height:var(--ticker-h); display:flex; align-items:center;
  margin-bottom:var(--rail-gap);
  border-bottom:1px solid rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marq-t{
  display:flex; align-items:center; width:max-content; will-change:transform;
  animation:slide var(--dur,40s) linear infinite;
}
.marq:hover .marq-t{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(calc(-100% / var(--copies,2))) } }
.marq-g{ display:flex; align-items:center; gap:26px; padding-right:26px }
.marq-g span{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.72); transition:color .3s;
}
.marq-g span:hover{ color:#fff }
.marq-g .ico{ font-size:14px; color:var(--gold); flex:none }
@media(max-width:600px){
  :root{ --ticker-h:36px; --rail-gap:4px }
  .marq-g{ gap:20px; padding-right:20px }
  .marq-g span{ font-size:11.5px; letter-spacing:.09em }
}

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ transform:translateX(-30px) } .rv-r{ transform:translateX(30px) } .rv-s{ transform:scale(.94) }
.rv-l.in,.rv-r.in,.rv-s.in{ transform:none; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:clamp(14px,1.6vw,22px); }
.g2{ grid-template-columns:repeat(2,1fr) } .g3{ grid-template-columns:repeat(3,1fr) } .g4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:1000px){ .g4{ grid-template-columns:repeat(2,1fr) } .g3{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:680px){ .g2,.g3,.g4{ grid-template-columns:1fr } }

.card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.3vw,30px); overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), rgba(214,178,94,.14), transparent 62%);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(214,178,94,.5); }
.card:hover::before{ opacity:1; }
.card h3{ margin:0 0 9px; }
.card p{ color:var(--text-2); font-size:14.8px; }

.svc{ display:grid; grid-template-rows:auto 1fr; padding:0; gap:0 }
.svc-body{ padding:clamp(22px,2.3vw,30px); display:flex; flex-direction:column; gap:9px; position:relative; z-index:1 }

/* Photo treatment for service cards */
.svc-photo{
  position:relative; aspect-ratio:16/10; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg,var(--navy-600) 0%,var(--ink) 68%);
}
.svc-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.04) brightness(1.02);
  transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
.card:hover .svc-photo img{ transform:scale(1.08); filter:saturate(1.12) contrast(1.06) brightness(1.06) }
.svc-photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(178deg,rgba(7,14,26,.34) 0%,rgba(7,14,26,0) 34%,rgba(7,14,26,.72) 100%);
}
.svc-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(600px 300px at var(--mx,50%) 0%, rgba(214,178,94,.2), transparent 65%);
  transition:opacity .5s;
}
.card:hover .svc-photo::after{ opacity:1 }
.svc-ic{
  position:absolute; left:16px; bottom:16px; z-index:2;
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:rgba(252,251,248,.92); border:1px solid rgba(255,255,255,.5);
  color:var(--navy-600); box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  backdrop-filter:blur(10px); transition:.5s var(--ease);
}
.svc-ic .ico{ font-size:24px }
.card:hover .svc-ic{ background:linear-gradient(140deg,var(--gold-2),var(--gold-deep)); color:var(--ink); transform:rotate(-6deg) scale(1.05) }
.svc-tag{
  position:absolute; top:14px; left:14px; z-index:2; font-size:9.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(120deg,var(--gold-2),var(--gold)); padding:6px 12px; border-radius:var(--r-full);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7);
}
.svc-body h3{ margin:0 0 2px }
.svc-body p{ margin:0 }
.svc-ic-lg{ position:absolute; right:14px; bottom:14px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82); background:rgba(7,14,26,.6); border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:var(--r-full); backdrop-filter:blur(8px) }

.svc-ic-plain{ position:relative; z-index:2 }
.card h3{ margin:0 0 9px; }
.svc-tag{ position:absolute; top:clamp(22px,2.3vw,30px); right:clamp(22px,2.3vw,30px); font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); background:rgba(214,178,94,.16); border:1px solid rgba(214,178,94,.4); padding:5px 10px; border-radius:var(--r-full); }
.svc-list{ display:grid; gap:7px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); }
.svc-list li{ display:flex; align-items:center; gap:8px; font-size:13.4px; color:var(--text-2); font-weight:500; }
.svc-list .ico{ font-size:14px; color:#12A04A; stroke-width:2.6; }
.svc-price{ margin-top:auto; padding-top:16px; font-family:var(--ff-display); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.svc-price s{ color:var(--muted); font-family:var(--ff-body); font-size:12px; font-weight:600; margin-left:6px; }

/* ---------- Saree finishing rows ----------
   A five-item set does not divide into a 4-up or 3-up card grid without
   leaving a hole in the last row, and these services carry range pricing
   plus a per-fabric caveat. A full-width row layout scans like a menu and
   has room for both, and degrades to a plain stack on a phone. */
.srows{ display:grid; gap:14px; }
.srow{
  display:grid; grid-template-columns:clamp(152px,17vw,188px) 1fr auto; align-items:start;
  gap:clamp(16px,2vw,30px); padding:clamp(18px,2vw,24px);
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.srow:hover{ transform:translateY(-3px); border-color:rgba(214,178,94,.5); box-shadow:var(--sh-md); }
.srow-photo{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:4 / 5; background:var(--paper-2); border:1px solid var(--line-2);
}
.srow-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s var(--ease); }
.srow:hover .srow-photo img{ transform:scale(1.07); filter:saturate(1.08) contrast(1.04) brightness(1.03); }
.srow-n{
  position:absolute; left:10px; top:10px; z-index:2;
  padding:4px 10px; border-radius:var(--r-full);
  background:rgba(7,14,26,.74); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--ff-display); font-size:12.5px; font-weight:800; letter-spacing:.06em; color:#F2DDA4;
}
.srow-ic{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold-2),var(--gold)); color:var(--ink); box-shadow:var(--sh-sm);
}
.srow-ic .ico{ font-size:17px; stroke-width:1.9; }
.srow h3{ margin:0 0 8px; }
.srow p{ margin:0; color:var(--text-2); font-size:14.8px; }
.srow .svc-list{ margin-top:14px; padding-top:14px; }
.srow-price{ text-align:right; white-space:nowrap; font-family:var(--ff-display); }
.srow-price b{ display:block; font-size:clamp(19px,1.6vw,22px); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.srow-price > span{ display:block; margin-top:5px; font-family:var(--ff-body); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.srow-price s{ display:block; margin-top:10px; font-family:var(--ff-body); font-size:12.5px; font-weight:700; color:var(--aqua-soft); text-decoration:none; }
.srow-price s::before{ content:"First order "; color:var(--muted); font-weight:600; }
.srow-note{ margin-top:10px; font-family:var(--ff-body); font-size:11.5px; font-weight:600; color:var(--muted); }
/* .rtip is built for the dark sections - its text is white. This is the
   same treatment for a light section, where white text would vanish.
   Doubled class, so it outranks .rtip wherever .rtip happens to sit. */
.rtip.rtip-light{ background:var(--paper-2); border-color:var(--line-2); }
.rtip.rtip-light div{ color:var(--text-2); }
.rtip.rtip-light .ico{ color:var(--gold-deep); }
@media(max-width:860px){
  .srow{ grid-template-columns:1fr; gap:16px; }
  .srow-photo{ aspect-ratio:16 / 7; }
  .srow-price{ text-align:left; margin-top:2px; white-space:normal; }
  .srow-price b{ display:inline; font-size:20px; }
  .srow-price > span{ display:inline; margin:0 0 0 7px; }
}

/* ---------- Process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); position:relative; }
@media(max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr } }
.step{ position:relative; padding-top:34px; }
.step::before{ content:""; position:absolute; top:14px; left:0; right:calc(-50% - 10px); height:1.5px; background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px); }
.step:last-child::before{ display:none; }
@media(max-width:900px){ .step:nth-child(2)::before{ display:none } }
@media(max-width:520px){ .step::before{ display:none } }
.step-n{
  position:absolute; top:0; left:0; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--ff-display); font-size:19px; font-weight:700; letter-spacing:-.02em;
  background:var(--card); border:1.5px solid var(--gold); color:var(--gold-deep); box-shadow:var(--sh-sm);
}
.step h4{ margin-bottom:8px; }
.step p{ font-size:14.4px; color:var(--text-2); }

/* ---------- Feature / why ---------- */
.why{ background:linear-gradient(180deg,var(--paper-2),var(--paper)); position:relative; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media(max-width:960px){ .why-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .why-grid{ grid-template-columns:1fr } }
.why-i{ background:var(--paper); padding:clamp(24px,2.6vw,34px); transition:background .4s; }
.why-i:hover{ background:#fff; }
.why-i .ico{ font-size:27px; color:var(--gold-deep); stroke-width:1.6; }
.why-i h4{ margin:15px 0 8px; font-size:1.14rem; }
.why-i p{ font-size:14.4px; color:var(--text-2); }

/* ---------- Tabs / Rate card ---------- */
.tabs-wrap{ background:var(--ink); border-radius:var(--r-xl); padding:clamp(16px,2vw,26px); box-shadow:var(--sh-lg); position:relative; overflow:hidden; }
.tabs-wrap::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 12% 0%,rgba(214,178,94,.2),transparent 60%); pointer-events:none; }
.tabs{ position:relative; display:flex; gap:6px; padding:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-full); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none }
.tab{ position:relative; flex:1 0 auto; padding:11px 20px; border-radius:var(--r-full); background:transparent; border:0; cursor:pointer; color:rgba(255,255,255,.7); font-size:13.5px; font-weight:700; letter-spacing:-.008em; white-space:nowrap; transition:color .35s; }
.tab::after{ content:""; position:absolute; inset:0; border-radius:var(--r-full); background:linear-gradient(120deg,var(--gold-2),var(--gold)); transform:scale(.7); opacity:0; transition:.45s var(--ease); }
.tab.on{ color:var(--ink); }
.tab.on::after{ transform:scale(1); opacity:1; }
.tab span{ position:relative; z-index:1; }
.panels{ position:relative; margin-top:clamp(18px,2vw,26px); }
.panel{ display:none; animation:fadeUp .55s var(--ease); }
.panel.on{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } }
/* ---- Price table (two-price: Regular vs 1st Order) ---- */
.ptable{
  display:grid; gap:1px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); overflow:hidden;
}
.phead{
  background:rgba(7,14,26,.6); display:grid; align-items:center; gap:12px;
  padding:12px 18px; grid-template-columns:1fr 88px 104px;
}
.phead > span{
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-align:right; white-space:nowrap;
}
.phead > span:last-child{ display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; color:var(--gold-2) }
.phead i{
  font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.08em;
  background:var(--gold); color:var(--ink); padding:2.5px 6px; border-radius:5px;
}
.pgroup{
  background:rgba(214,178,94,.11); padding:13px 18px;
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2);
}
.pgroup .ico{ font-size:15px; color:var(--gold); }
.prow{
  background:rgba(255,255,255,.026); display:grid; align-items:center; gap:12px;
  padding:14px 18px; grid-template-columns:1fr 88px 104px; transition:background .3s;
}
.prow:hover{ background:rgba(255,255,255,.06) }
.pitem{ min-width:0 }
.pitem b{ display:block; color:#fff; font-size:15px; font-weight:700; letter-spacing:-.012em; line-height:1.3 }
.pitem span{ display:block; font-size:12px; color:rgba(255,255,255,.45); margin-top:2px }
.preg{
  font-family:var(--ff-display); font-size:15px; font-weight:600; text-align:right; white-space:nowrap;
  color:rgba(255,255,255,.45); text-decoration:line-through;
  text-decoration-color:rgba(232,120,138,.6); text-decoration-thickness:1.5px;
}
.preg.none{ text-decoration:none; color:rgba(255,255,255,.3); font-size:12.5px; font-family:var(--ff-body) }
.preg small{ font-family:var(--ff-body); font-size:10.5px; font-weight:600; color:rgba(255,255,255,.35); text-decoration:none; margin-left:2px }
.pfirst{
  font-family:var(--ff-display); font-size:19.5px; font-weight:700; text-align:right;
  white-space:nowrap; color:var(--gold-2); letter-spacing:-.02em;
}
.pfirst small{ font-family:var(--ff-body); font-size:10.5px; font-weight:600; color:rgba(255,255,255,.4); margin-left:2px; letter-spacing:0 }
.pfirst.flat{ color:rgba(255,255,255,.6) }
@media(max-width:600px){
  .phead{ display:none }
  .prow{
    grid-template-columns:1fr auto; row-gap:8px; padding:14px 15px;
  }
  .pitem{ grid-column:1 / -1 }
  .preg{ font-size:13.5px; min-width:0 }
  .pfirst{ font-size:18px }
  .pgroup{ padding:12px 15px }
}

/* First-order offer banner */
.offer{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 22px; margin-bottom:20px; border-radius:var(--r-md);
  background:linear-gradient(115deg,rgba(214,178,94,.2),rgba(214,178,94,.05) 60%,transparent);
  border:1px solid rgba(214,178,94,.42); position:relative; overflow:hidden;
}
.offer::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 15px);
  pointer-events:none;
}
.offer .oi{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--gold-2),var(--gold-deep)); color:var(--ink);
  box-shadow:0 12px 30px -12px rgba(214,178,94,.9);
}
.offer .oi .ico{ font-size:26px; stroke-width:2 }
.offer-txt{ flex:1 1 220px; min-width:0; position:relative }
.offer-txt b{ display:block; font-family:var(--ff-display); font-size:1.22rem; color:#fff; letter-spacing:-.02em; line-height:1.2 }
.offer-txt p{ font-size:13.6px; color:rgba(255,255,255,.62); margin-top:4px }

.rtip{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 22px; padding:16px 18px; border-radius:var(--r-md); background:rgba(25,195,192,.1); border:1px solid rgba(25,195,192,.26); }
.rtip div{ display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.78); font-weight:600; }
.rtip .ico{ font-size:16px; color:var(--aqua-soft); }

/* ---------- B2B ---------- */
.b2b{ background:linear-gradient(165deg,#0E2039,#070E1A 70%); color:#fff; position:relative; overflow:hidden; }
.b2b .blob-1{ opacity:.34 }
.b2b-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
@media(max-width:960px){ .b2b-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .b2b-grid{ grid-template-columns:1fr } }
.bcard{ position:relative; padding:26px 24px; border-radius:var(--r-md); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); transition:.5s var(--ease); overflow:hidden; }
.bcard:hover{ background:rgba(255,255,255,.085); border-color:rgba(214,178,94,.5); transform:translateY(-4px); }
.bcard .ico{ font-size:25px; color:var(--gold); }
.bcard h4{ margin:15px 0 8px; color:#fff; font-size:1.06rem; }
.bcard p{ font-size:13.8px; color:rgba(255,255,255,.6); }
.bcard u{ position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.bcard:hover u{ transform:scaleX(1); }
.perks{ display:grid; gap:12px; margin-top:30px; }
.perks div{ display:flex; gap:13px; align-items:flex-start; }
.perks .ico{ font-size:19px; color:var(--aqua-soft); margin-top:3px; }
.perks b{ display:block; color:#fff; font-size:14.6px; }
.perks p{ font-size:13.4px; color:rgba(255,255,255,.55); }

/* ---------- Membership ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); align-items:start; }
@media(max-width:940px){ .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto } }
.plan{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; transition:.55s var(--ease); overflow:hidden; }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.plan.feat{ background:linear-gradient(165deg,var(--ink),#12294A); color:#fff; border-color:transparent; box-shadow:var(--sh-lg); }
.plan .tag{ position:absolute; top:0; right:0; padding:7px 16px; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(120deg,var(--gold-2),var(--gold)); color:var(--ink); border-bottom-left-radius:var(--r-sm); }
.plan h4{ font-size:1.18rem; margin-bottom:6px; }
.plan > p{ font-size:13.4px; color:var(--muted); }
.plan.feat > p{ color:rgba(255,255,255,.6); }
.plan .amt{ margin:20px 0 4px; font-family:var(--ff-display); font-size:2.5rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.plan .amt small{ font-size:13px; font-family:var(--ff-body); font-weight:600; color:var(--muted); letter-spacing:0; }
.plan.feat .amt small{ color:rgba(255,255,255,.55); }
.plan ul{ display:grid; gap:11px; margin:22px 0 0; }
.plan li{ display:flex; gap:10px; align-items:flex-start; font-size:14.2px; color:var(--text-2); font-weight:500; }
.plan li .ico{ font-size:15px; color:#12A04A; stroke-width:2.6; margin-top:3px; }
.plan.feat li{ color:rgba(255,255,255,.82) }
.plan.feat li .ico{ color:var(--aqua-soft) }
.plan .btn{ margin-top:26px; }

/* ---------- Guarantee strip ---------- */
.guar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media(max-width:860px){ .guar{ grid-template-columns:repeat(2,1fr) } }
.guar div{ background:var(--card); padding:28px 24px; text-align:center; }
.guar .ico{ font-size:29px; color:var(--gold-deep); }
.guar b{ display:block; margin-top:13px; font-size:1rem; font-family:var(--ff-display); letter-spacing:-.015em; }
.guar p{ font-size:13.2px; color:var(--muted); margin-top:6px; }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px); }
@media(max-width:960px){ .quotes{ grid-template-columns:1fr; max-width:640px; margin-inline:auto } }
.qcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; display:flex; flex-direction:column; gap:18px; transition:.55s var(--ease); }
.qcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.qcard .ico-quote{ font-size:32px; color:var(--gold); opacity:.5; }
.qcard p{ font-size:14.8px; color:var(--text-2); line-height:1.72; }
.qwho{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.av{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; font-size:16px; color:#fff; background:linear-gradient(140deg,var(--navy-400),var(--ink)); flex:none; }
.qwho b{ display:block; font-size:14.4px; letter-spacing:-.01em; }
.qwho span{ display:block; font-size:12px; color:var(--muted); }
.rv-stars{ display:flex; gap:2px; margin-left:auto; color:var(--gold); }
.rv-stars .ico{ width:14px; height:14px; fill:currentColor; stroke:none; }

/* ---------- Areas ---------- */
.area{ display:flex; flex-wrap:wrap; gap:9px; }
.area span{ padding:9px 17px; border-radius:var(--r-full); background:var(--card); border:1px solid var(--line); font-size:13.4px; font-weight:600; color:var(--text-2); transition:.35s var(--ease); }
.area span:hover{ border-color:var(--gold); color:var(--ink); transform:translateY(-2px); }
.area span.hub{ background:linear-gradient(120deg,var(--gold-2),var(--gold)); border-color:transparent; color:var(--ink); font-weight:800; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:10px; max-width:840px; margin-inline:auto; }
.qa{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:.4s var(--ease); }
.qa.open{ border-color:rgba(214,178,94,.55); box-shadow:var(--sh-sm); }
.qa-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; background:none; border:0; cursor:pointer; text-align:left; font-size:15.6px; font-weight:700; letter-spacing:-.014em; color:var(--text); }
.qa-q .ico{ font-size:19px; color:var(--gold-deep); transition:transform .45s var(--ease); flex:none; }
.qa.open .qa-q .ico{ transform:rotate(135deg) }
.qa-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.qa.open .qa-a{ grid-template-rows:1fr }
.qa-a > div{ overflow:hidden; }
.qa-a p{ padding:0 22px 22px; font-size:14.6px; color:var(--text-2); }

/* ---------- Booking ---------- */
.book{ background:linear-gradient(170deg,#0F2440,#070E1A 72%); color:#fff; position:relative; overflow:hidden; }
.book-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,58px); align-items:start; }
@media(max-width:940px){ .book-grid{ grid-template-columns:1fr } }
.book-form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl); padding:clamp(24px,3vw,38px); backdrop-filter:blur(14px); }
.fld{ margin-bottom:16px; }
.fld label{ display:block; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:8px; }
.fld input,.fld select,.fld textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm); font-size:15px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.15); color:#fff;
  transition:.35s var(--ease); -webkit-appearance:none; appearance:none;
}
.fld textarea{ resize:vertical; min-height:84px; }
.fld select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:17px; padding-right:44px; }
.fld select option{ background:var(--ink); color:#fff; }
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(255,255,255,.32) }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:0; border-color:var(--gold); background:rgba(255,255,255,.09); box-shadow:0 0 0 4px rgba(214,178,94,.14) }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:520px){ .frow{ grid-template-columns:1fr } }
.fnote{ margin-top:14px; font-size:12.4px; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:8px; }
.fnote .ico{ font-size:15px; color:var(--aqua-soft) }

.info-list{ display:grid; gap:18px; margin-top:30px; }
.info-list > div{ display:flex; gap:15px; align-items:flex-start; }
.info-list .ii{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--gold); }
.info-list .ii .ico{ font-size:20px; }
.info-list b{ display:block; font-size:14.8px; color:#fff; letter-spacing:-.01em }
.info-list p{ font-size:13.4px; color:rgba(255,255,255,.55) }
.hours{ margin-top:26px; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); overflow:hidden }
.hours div{ display:flex; justify-content:space-between; gap:14px; padding:12px 18px; font-size:13.8px; }
.hours div > *{ min-width:0 }
.hours div:nth-child(odd){ background:rgba(255,255,255,.04) }
.hours b{ color:#fff; font-weight:700 }
.hours span{ color:rgba(255,255,255,.6) }
.hours .now{ color:var(--aqua-soft); font-weight:700 }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--gold-2) 0%,var(--gold) 42%,var(--gold-deep) 100%); color:var(--ink); }
.cta-band::after{ content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(-45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 16px); }
.cta-in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:clamp(34px,4.5vw,58px) 0; }
.cta-in h2{ max-width:22ch }
.cta-in p{ margin-top:12px; color:rgba(7,14,26,.72); font-weight:600; max-width:52ch }

/* ---------- Footer ---------- */
.ftr{ background:var(--ink); color:rgba(255,255,255,.6); padding:clamp(56px,6.5vw,86px) 0 0; position:relative; overflow:hidden }
.ftr::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent) }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,3.4vw,48px); }
@media(max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .ftr-grid{ grid-template-columns:1fr } }
.ftr h5{ font-family:var(--ff-display); font-size:15.5px; color:#fff; letter-spacing:-.015em; margin:0 0 18px; }
.ftr ul{ display:grid; gap:11px }
.ftr li a{ font-size:14px; transition:.3s; display:inline-flex; align-items:center; gap:8px }
.ftr li a:hover{ color:var(--gold); transform:translateX(3px) }
.ftr .lead-l{ font-size:14.4px; margin-top:18px; max-width:38ch }
.ftr-bot{ margin-top:clamp(40px,5vw,64px); padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:12.8px }
.ftr-cred{ margin:26px 0 0; font-size:10.6px; line-height:1.75; color:rgba(255,255,255,.34); max-width:820px; letter-spacing:.005em }
.ftr-cred a{ color:rgba(214,178,94,.62); text-decoration:none; border-bottom:1px solid rgba(214,178,94,.24); transition:.3s var(--ease) }
.ftr-cred a:hover{ color:var(--gold-2); border-bottom-color:rgba(214,178,94,.6) }
.ftr-bot .soc{ display:flex; gap:9px }
.ftr-bot .soc a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); transition:.35s var(--ease) }
.ftr-bot .soc a:hover{ background:var(--gold); color:var(--ink); transform:translateY(-3px); border-color:transparent }

/* ---------- Floating actions ---------- */
.fabs{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:800; display:grid; gap:11px; justify-items:center }
.fab{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; box-shadow:var(--sh-lg); border:0; cursor:pointer; transition:.45s var(--ease); position:relative; }
.fab .ico{ font-size:26px; transition:transform .45s var(--ease) }
.fab:hover{ transform:translateY(-4px) scale(1.06) }
.fab:hover .ico{ transform:scale(1.12) }
.fab-wa{ background:linear-gradient(140deg,#34D268,#0E9B47); color:#fff }
.fab-wa::before{ content:""; position:absolute; inset:0; border-radius:18px; border:2px solid #2BC55F; animation:pulse 2.4s var(--ease-2) infinite }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.85 } 70%,100%{ transform:scale(1.55); opacity:0 } }
.fab-top{ background:var(--card); color:var(--ink); border:1px solid var(--line); width:48px; height:48px; border-radius:15px; opacity:0; pointer-events:none; transform:translateY(10px) }
.fab-top.show{ opacity:1; pointer-events:auto; transform:none }

/* Mobile sticky bar */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:820; display:none;
  grid-template-columns:repeat(3,1fr); background:rgba(252,251,248,.94); backdrop-filter:blur(18px) saturate(1.6);
  border-top:1px solid var(--line); padding:9px 10px calc(9px + env(safe-area-inset-bottom));
}
.mbar a{ display:grid; justify-items:center; gap:3px; padding:6px 2px; border-radius:12px; font-size:10.5px; font-weight:800; letter-spacing:.01em; color:var(--text-2) }
.mbar a .ico{ font-size:20px }
.mbar a.wa{ background:linear-gradient(140deg,#34D268,#0E9B47); color:#fff }
@media(max-width:760px){
  .mbar{ display:grid }
  .fabs{ bottom:calc(84px + env(safe-area-inset-bottom)); right:14px }
  body{ padding-bottom:74px }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:96px; z-index:1000; transform:translate(-50%,26px);
  display:flex; align-items:center; gap:11px; padding:14px 20px; border-radius:var(--r-full);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600; box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:.5s var(--ease); max-width:min(92vw,440px);
}
.toast.show{ opacity:1; transform:translate(-50%,0) }
.toast .ico{ font-size:19px; color:var(--aqua-soft) }

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .rv{ opacity:1 !important; transform:none !important }
}