/* ============================================================
   IntimBeauty® — Landing pages (2 designs)
   Design A · Ageless  (sálvia / areia / carvão · Urbanist)
   Design B · Rouge & Or (vermelho / branco / ouro · Cormorant)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Urbanist', system-ui, sans-serif;
  background: #0d0d0f;
  color: #292B33;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- view (each design) ---- */
.view { display: none; }
.view.is-active { display: block; }

/* shared section rhythm */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase;
}
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 17px 30px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}
.btn .arr { transition: transform .4s; }
.btn:hover .arr { transform: translateX(5px); }

/* ============================================================
   DESIGN A — AGELESS
   ============================================================ */
[data-design="ageless"]{
  --bg:#F7F4EF; --bg2:#EEE9DF; --ink:#292B33; --soft:#5b5e68;
  --sage:#607675; --sage-deep:#2A3D39; --sage-mid:#465756;
  --pale:#C7E0CC; --pale2:#CEDCD2; --sand:#F1DBB1;
  --accent:#607675;            /* tweakable */
  --accent-hover:#465756;      /* tweakable (hover) */
  --font-head:'Urbanist';      /* sempre Urbanist */
  --head-weight:500;           /* tweakable (peso) */
  --line:rgba(41,43,51,.13);
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.65;
}
[data-design="ageless"] h1,[data-design="ageless"] h2,[data-design="ageless"] h3{
  font-family:'Urbanist', sans-serif; font-weight:var(--head-weight,500);
  letter-spacing:-.018em; line-height:1.04; margin:0; color:var(--ink);
}
/* Ageless: botões em formato pill */
[data-design="ageless"] .btn{ border-radius:999px; }
[data-design="ageless"] .eyebrow{ color:var(--accent); }

/* nav */
[data-design="ageless"] .nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px; background:rgba(247,244,239,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
[data-design="ageless"] .brand{ display:flex; flex-direction:column; gap:2px; line-height:1; }
[data-design="ageless"] .brand b{
  font-family:var(--font-head),'Urbanist'; font-weight:600; font-size:23px;
  letter-spacing:-.01em;
}
[data-design="ageless"] .brand b i{ color:var(--accent); font-style:normal; }
[data-design="ageless"] .brand .by{
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--soft); white-space:nowrap;
}
[data-design="ageless"] .nav nav{ display:flex; gap:30px; }
[data-design="ageless"] .nav nav a{
  font-size:13.5px; font-weight:500; color:var(--soft);
  letter-spacing:.02em; transition:color .3s; white-space:nowrap;
}
[data-design="ageless"] .nav nav a:hover{ color:var(--ink); }
[data-design="ageless"] .nav .btn{
  background:var(--accent); color:#fff; padding:13px 22px;
}
[data-design="ageless"] .nav .btn:hover{ background:var(--accent-hover); }

/* hero */
[data-design="ageless"] .hero{
  display:grid; grid-template-columns:1.05fr 1fr; min-height:88vh;
}
[data-design="ageless"] .hero .copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:90px 70px 90px 0; position:relative;
}
[data-design="ageless"] .hero .copy .inner{ max-width:560px; margin-left:auto; padding-left:48px; }
[data-design="ageless"] .hero h1{ font-size:clamp(42px,5vw,76px); margin:26px 0 0; }
[data-design="ageless"] .hero h1 em{ font-style:italic; color:var(--accent); font-weight:400;}
[data-design="ageless"] .hero p.lede{
  font-size:19px; color:var(--soft); margin:30px 0 0; max-width:470px;
}
[data-design="ageless"] .hero .cta-row{ display:flex; align-items:center; gap:26px; margin-top:42px; }
[data-design="ageless"] .hero .btn-primary{ background:var(--accent); color:#fff; }
[data-design="ageless"] .hero .btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); }
[data-design="ageless"] .hero .link{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink);
  border-bottom:1px solid var(--accent); padding-bottom:3px;
}
[data-design="ageless"] .hero .media{ position:relative; overflow:hidden; background:var(--bg2); }
[data-design="ageless"] .hero .media img{ width:100%; height:100%; object-fit:cover; }
[data-design="ageless"] .hero .badge{
  position:absolute; left:34px; bottom:34px; background:rgba(247,244,239,.9);
  backdrop-filter:blur(6px); padding:16px 22px; display:flex; gap:14px; align-items:center;
}
[data-design="ageless"] .hero .badge .n{ font-family:var(--font-head); font-size:30px; font-weight:600; color:var(--accent); line-height:1;}
[data-design="ageless"] .hero .badge .t{ font-size:12.5px; color:var(--soft); line-height:1.35; }
[data-design="ageless"] .hero .ribbon{
  position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line);
}

/* marquee strip */
[data-design="ageless"] .strip{
  background:#607675; color:rgba(255,255,255,.92); padding:18px 0; overflow:hidden;
}
[data-design="ageless"] .strip .row{ display:flex; gap:60px; white-space:nowrap; animation:sl 32s linear infinite; }
[data-design="ageless"] .strip span{ font-size:13px; letter-spacing:.26em; text-transform:uppercase; display:inline-flex; gap:60px;}
[data-design="ageless"] .strip span::after{ content:"·"; color:rgba(255,255,255,.45); }
@keyframes sl{ to{ transform:translateX(-50%); } }

/* services */
[data-design="ageless"] .services{ padding:120px 0 110px; }
[data-design="ageless"] .services .head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:64px; }
[data-design="ageless"] .services h2{ font-size:clamp(32px,3.4vw,50px); }
[data-design="ageless"] .services .head p{ color:var(--soft); font-size:18px; margin:0; }
[data-design="ageless"] .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
[data-design="ageless"] .svc{
  padding:42px 30px 48px; border-right:1px solid var(--line); position:relative;
  transition:background .4s;
}
[data-design="ageless"] .svc:last-child{ border-right:0; }
[data-design="ageless"] .svc:hover{ background:var(--bg2); }
[data-design="ageless"] .svc .num{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.1em; }
[data-design="ageless"] .svc h3{ font-size:22px; margin:28px 0 14px; font-weight:600; }
[data-design="ageless"] .svc p{ font-size:15px; color:var(--soft); margin:0; line-height:1.6; }
[data-design="ageless"] .svc .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:30px;}

/* feature split (sand) */
[data-design="ageless"] .feature{ background:var(--sand); }
[data-design="ageless"] .feature .inner{ display:grid; grid-template-columns:1fr 1fr; }
[data-design="ageless"] .feature .txt{ padding:78px 70px; display:flex; flex-direction:column; justify-content:center; }
[data-design="ageless"] .feature h2{ font-size:clamp(30px,3vw,46px); margin:22px 0 0; color:var(--sage-deep);}
[data-design="ageless"] .feature p{ color:#6e5f44; font-size:17px; margin:24px 0 0; max-width:460px; }
[data-design="ageless"] .feature ul{ list-style:none; padding:0; margin:34px 0 0; }
[data-design="ageless"] .feature li{ padding:15px 0; border-top:1px solid rgba(110,95,68,.25); display:flex; gap:14px; font-size:15.5px; color:var(--sage-deep);}
[data-design="ageless"] .feature li::before{ content:"—"; color:var(--sage); }
[data-design="ageless"] .feature .ph{ background:var(--sand); padding:28px; overflow:hidden; }
[data-design="ageless"] .feature .ph img{ width:100%; height:100%; object-fit:cover; }

/* CTA with image */
[data-design="ageless"] .cta{ position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden; }
[data-design="ageless"] .cta img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.2); }
[data-design="ageless"] .cta .scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(42,61,57,.92) 0%, rgba(42,61,57,.72) 42%, rgba(42,61,57,.15) 100%); }
[data-design="ageless"] .cta .inner{ position:relative; max-width:600px; padding:0 0 0 0; color:#fff; }
[data-design="ageless"] .cta .eyebrow{ color:var(--pale); }
[data-design="ageless"] .cta h2{ color:#fff; font-size:clamp(34px,4vw,58px); margin:20px 0 0; }
[data-design="ageless"] .cta p{ color:rgba(255,255,255,.82); font-size:18px; margin:24px 0 38px; max-width:430px; }
[data-design="ageless"] .cta .btn{ background:var(--sand); color:var(--sage-deep); }
[data-design="ageless"] .cta .btn:hover{ background:#fff; }

/* footer + contact */
[data-design="ageless"] .foot{ background:var(--sage-deep); color:#cdd7d2; }
[data-design="ageless"] .foot .top{ display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:96px 0 70px; }
[data-design="ageless"] .foot h2{ color:#fff; font-size:clamp(30px,3vw,44px); }
[data-design="ageless"] .foot .lede{ color:rgba(255,255,255,.7); margin:20px 0 0; max-width:380px; }
[data-design="ageless"] .foot .contacts{ margin-top:40px; display:flex; flex-direction:column; gap:16px; }
[data-design="ageless"] .foot .contacts a, [data-design="ageless"] .foot .contacts div{ display:flex; gap:14px; font-size:15px; color:#dde5e0; align-items:flex-start;}
[data-design="ageless"] .foot .contacts .lbl{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pale); min-width:78px; padding-top:2px;}
[data-design="ageless"] .form{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13); padding:40px; }
[data-design="ageless"] .form .fr{ margin-bottom:20px; }
[data-design="ageless"] .form label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pale); display:block; margin-bottom:9px;}
[data-design="ageless"] .form input, [data-design="ageless"] .form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff; font-family:inherit; font-size:16px; padding:10px 0; outline:none; transition:border-color .3s;
}
[data-design="ageless"] .form input:focus, [data-design="ageless"] .form textarea:focus{ border-color:var(--pale); }
[data-design="ageless"] .form textarea{ resize:none; }
[data-design="ageless"] .form .btn{ background:var(--pale); color:var(--sage-deep); width:100%; justify-content:center; margin-top:8px;}
[data-design="ageless"] .form .btn:hover{ background:#fff; }
[data-design="ageless"] .foot .bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; border-top:1px solid rgba(255,255,255,.13); flex-wrap:wrap;}
[data-design="ageless"] .foot .bar .social{ display:flex; gap:24px; }
[data-design="ageless"] .foot .bar a{ font-size:12.5px; color:rgba(255,255,255,.7); letter-spacing:.04em; transition:color .3s;}
[data-design="ageless"] .foot .bar a:hover{ color:#fff; }
[data-design="ageless"] .foot .rev{ display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,.8);}
[data-design="ageless"] .foot .rev b{ color:var(--pale); }
[data-design="ageless"] .foot .legal{ font-size:11px; color:rgba(255,255,255,.45); padding:0 0 40px; line-height:1.7; max-width:880px;}

/* ============================================================
   DESIGN B — ROUGE & OR
   ============================================================ */
[data-design="rouge"]{
  --bg:#FBF6F0; --bg2:#F3E8DD; --ink:#1C1113; --soft:#6a565a;
  --wine:#6E1023; --wine2:#8A1538; --red:#B11E3A;
  --gold:#BFA06A; --gold-soft:#D8C49A; --ivory:#FBF6F0;
  --accent:#B11E3A;            /* tweakable */
  --font-head:'Cormorant Garamond'; /* tweakable */
  --line:rgba(110,16,35,.16);
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:1.65;
}
[data-design="rouge"] h1,[data-design="rouge"] h2,[data-design="rouge"] h3{
  font-family:var(--font-head),'Cormorant Garamond',serif; font-weight:500;
  line-height:1.02; margin:0; letter-spacing:0;
}
[data-design="rouge"] .eyebrow{ color:var(--gold); font-weight:600; }
[data-design="rouge"] .gline{ height:1px; background:linear-gradient(90deg,var(--gold),transparent); }

/* nav */
[data-design="rouge"] .nav{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; background:rgba(251,246,240,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
[data-design="rouge"] .brand b{ font-family:var(--font-head),'Cormorant Garamond',serif; font-weight:500; font-size:30px; letter-spacing:.01em;}
[data-design="rouge"] .brand b i{ font-style:italic; color:var(--wine); }
[data-design="rouge"] .brand .reg{ font-size:13px; color:var(--gold); vertical-align:super; }
[data-design="rouge"] .brand .by{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--soft); display:block; white-space:nowrap;}
[data-design="rouge"] .brand{ display:flex; flex-direction:column; gap:1px; line-height:1; }
[data-design="rouge"] .nav nav{ display:flex; gap:30px; }
[data-design="rouge"] .nav nav a{ font-size:13px; letter-spacing:.05em; color:var(--soft); transition:color .3s; white-space:nowrap; }
[data-design="rouge"] .nav nav a:hover{ color:var(--wine); }
[data-design="rouge"] .nav .btn{ background:var(--accent); color:#fff; padding:13px 24px; border-radius:2px;}
[data-design="rouge"] .nav .btn:hover{ background:var(--wine); }

/* hero */
[data-design="rouge"] .hero{ background:var(--wine); color:var(--ivory); position:relative; overflow:hidden; }
[data-design="rouge"] .hero .inner{ display:grid; grid-template-columns:1.08fr .92fr; min-height:92vh; align-items:stretch; }
[data-design="rouge"] .hero .copy{ display:flex; flex-direction:column; justify-content:center; padding:80px 64px 80px 48px; position:relative; }
[data-design="rouge"] .hero .copy::before{ content:""; position:absolute; left:48px; top:64px; width:54px; height:1px; background:var(--gold);}
[data-design="rouge"] .hero .eyebrow{ color:var(--gold-soft); margin-top:78px; }
[data-design="rouge"] .hero h1{ font-size:clamp(50px,6.4vw,104px); margin:18px 0 0; color:#fff; font-weight:500; }
[data-design="rouge"] .hero h1 em{ font-style:italic; color:var(--gold-soft); }
[data-design="rouge"] .hero p.lede{ font-size:18px; color:rgba(255,255,255,.8); margin:28px 0 0; max-width:430px; font-family:'Urbanist'; line-height:1.7;}
[data-design="rouge"] .hero .cta-row{ display:flex; align-items:center; gap:28px; margin-top:44px; }
[data-design="rouge"] .hero .btn-primary{ background:var(--gold); color:var(--wine); border-radius:2px; font-weight:700;}
[data-design="rouge"] .hero .btn-primary:hover{ background:#fff; transform:translateY(-2px); }
[data-design="rouge"] .hero .link{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); border-bottom:1px solid var(--gold); padding-bottom:4px; font-family:'Urbanist'; font-weight:600;}
[data-design="rouge"] .hero .media{ position:relative; overflow:hidden; }
[data-design="rouge"] .hero .media img{ width:100%; height:100%; object-fit:cover; }
[data-design="rouge"] .hero .media .frame{ position:absolute; inset:26px; border:1px solid rgba(255,255,255,.35); pointer-events:none; }
[data-design="rouge"] .hero .media .frame::before{ content:""; position:absolute; inset:6px; border:1px solid var(--gold); }

/* gold quote strip */
[data-design="rouge"] .quote{ background:var(--bg); text-align:center; padding:74px 0; }
[data-design="rouge"] .quote .gline{ width:64px; margin:0 auto 30px; }
[data-design="rouge"] .quote p{ font-family:var(--font-head),'Cormorant Garamond',serif; font-size:clamp(26px,3.2vw,40px); font-style:italic; color:var(--wine); max-width:880px; margin:0 auto; line-height:1.3;}

/* services */
[data-design="rouge"] .services{ padding:30px 0 110px; }
[data-design="rouge"] .services .head{ text-align:center; margin-bottom:70px; }
[data-design="rouge"] .services h2{ font-size:clamp(36px,4.4vw,64px); color:var(--wine); margin:16px 0 0; }
[data-design="rouge"] .svc-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
[data-design="rouge"] .svc{ display:flex; gap:28px; padding:46px 40px; border-bottom:1px solid var(--line); align-items:flex-start; transition:background .4s;}
[data-design="rouge"] .svc:nth-child(odd){ border-right:1px solid var(--line); }
[data-design="rouge"] .svc:hover{ background:#fff; }
[data-design="rouge"] .svc .rn{ font-family:var(--font-head),'Cormorant Garamond',serif; font-size:46px; color:var(--gold); line-height:.9; font-style:italic; min-width:64px;}
[data-design="rouge"] .svc h3{ font-size:27px; color:var(--wine); margin:0 0 12px; }
[data-design="rouge"] .svc p{ font-size:15px; color:var(--soft); margin:0; font-family:'Urbanist'; line-height:1.6;}

/* CTA full bleed flower */
[data-design="rouge"] .cta{ position:relative; min-height:620px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
[data-design="rouge"] .cta img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
[data-design="rouge"] .cta .scrim{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(110,16,35,.45), rgba(110,16,35,.82)); }
[data-design="rouge"] .cta .inner{ position:relative; color:#fff; max-width:760px; padding:0 30px; }
[data-design="rouge"] .cta .gline{ width:64px; margin:0 auto 28px; background:linear-gradient(90deg,transparent,var(--gold),transparent);}
[data-design="rouge"] .cta .eyebrow{ color:var(--gold-soft); }
[data-design="rouge"] .cta h2{ color:#fff; font-size:clamp(40px,5.4vw,80px); margin:18px 0 0; font-weight:500;}
[data-design="rouge"] .cta h2 em{ font-style:italic; color:var(--gold-soft); }
[data-design="rouge"] .cta p{ font-family:'Urbanist'; color:rgba(255,255,255,.85); font-size:18px; margin:24px auto 40px; max-width:480px;}
[data-design="rouge"] .cta .btn{ background:var(--gold); color:var(--wine); border-radius:2px; font-weight:700;}
[data-design="rouge"] .cta .btn:hover{ background:#fff; }

/* footer */
[data-design="rouge"] .foot{ background:var(--wine); color:#e9d9d2; position:relative; }
[data-design="rouge"] .foot .top{ display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:90px 0 64px; }
[data-design="rouge"] .foot h2{ color:#fff; font-size:clamp(34px,3.6vw,52px); font-weight:500;}
[data-design="rouge"] .foot h2 em{ font-style:italic; color:var(--gold-soft); }
[data-design="rouge"] .foot .lede{ color:rgba(255,255,255,.72); margin:18px 0 0; max-width:380px; font-family:'Urbanist';}
[data-design="rouge"] .foot .contacts{ margin-top:38px; display:flex; flex-direction:column; gap:16px; font-family:'Urbanist';}
[data-design="rouge"] .foot .contacts a, [data-design="rouge"] .foot .contacts div{ display:flex; gap:14px; font-size:15px; color:#f0e2dc; align-items:flex-start;}
[data-design="rouge"] .foot .contacts .lbl{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); min-width:78px; padding-top:2px;}
[data-design="rouge"] .form{ background:rgba(255,255,255,.05); border:1px solid var(--gold); padding:42px; position:relative; font-family:'Urbanist';}
[data-design="rouge"] .form .fr{ margin-bottom:20px; }
[data-design="rouge"] .form label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); display:block; margin-bottom:9px;}
[data-design="rouge"] .form input, [data-design="rouge"] .form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff; font-family:inherit; font-size:16px; padding:10px 0; outline:none; transition:border-color .3s;
}
[data-design="rouge"] .form input:focus, [data-design="rouge"] .form textarea:focus{ border-color:var(--gold); }
[data-design="rouge"] .form textarea{ resize:none; }
[data-design="rouge"] .form .btn{ background:var(--gold); color:var(--wine); width:100%; justify-content:center; margin-top:8px; font-weight:700; border-radius:2px;}
[data-design="rouge"] .form .btn:hover{ background:#fff; }
[data-design="rouge"] .foot .bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; border-top:1px solid rgba(255,255,255,.16); flex-wrap:wrap; font-family:'Urbanist';}
[data-design="rouge"] .foot .bar .social{ display:flex; gap:24px; }
[data-design="rouge"] .foot .bar a{ font-size:12.5px; color:rgba(255,255,255,.72); transition:color .3s; }
[data-design="rouge"] .foot .bar a:hover{ color:var(--gold-soft); }
[data-design="rouge"] .foot .rev{ display:flex; align-items:center; gap:12px; font-size:13px; }
[data-design="rouge"] .foot .rev b{ color:var(--gold-soft); }
[data-design="rouge"] .foot .legal{ font-size:11px; color:rgba(255,255,255,.5); padding:0 0 40px; line-height:1.7; max-width:880px; font-family:'Urbanist';}

/* star */
.star{ width:15px; height:15px; display:inline-block; }
/* social icons */
.foot .social a{ display:inline-grid; place-items:center; width:22px; height:22px; }
.foot .social a svg{ width:20px; height:20px; display:block; }
[data-design="ageless"] .foot .social{ gap:20px; }
[data-design="rouge"] .foot .social{ gap:20px; }
/* keep contact values tidy (labels keep their column, values don't break mid-number) */
.foot .contacts a > span:last-child,
.foot .contacts div > span:last-child{ white-space:nowrap; }

/* ============================================================
   PREVIEW DOCK (switcher + tweaks)
   ============================================================ */
#dock{
  position:fixed; z-index:9999; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:6px;
  background:rgba(18,18,20,.86); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12); border-radius:100px;
  box-shadow:0 18px 50px rgba(0,0,0,.4); font-family:'Urbanist',sans-serif;
}
#dock .seg{ display:flex; gap:4px; }
#dock .seg button{
  border:0; background:transparent; color:rgba(255,255,255,.6);
  font-size:13px; font-weight:600; letter-spacing:.02em; padding:11px 20px;
  border-radius:100px; transition:background .3s,color .3s; white-space:nowrap;
}
#dock .seg button .s{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-top:1px;}
#dock .seg button.on{ background:#fff; color:#16161a; }
#dock .div{ width:1px; height:30px; background:rgba(255,255,255,.14); margin:0 3px; }
#dock .gear{
  width:42px; height:42px; border-radius:50%; border:0; background:transparent;
  color:rgba(255,255,255,.7); display:grid; place-items:center; transition:background .3s,color .3s;
}
#dock .gear:hover, #dock .gear.on{ background:rgba(255,255,255,.14); color:#fff; }

#tweaks{
  position:fixed; z-index:9999; left:50%; bottom:88px; transform:translateX(-50%) translateY(8px);
  width:330px; background:rgba(20,20,23,.94); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.13); border-radius:18px; padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); font-family:'Urbanist',sans-serif; color:#fff;
  opacity:0; visibility:hidden; transition:opacity .28s, transform .28s;
}
#tweaks.open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#tweaks h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 12px; font-weight:600;}
#tweaks .tw{ margin-bottom:20px; }
#tweaks .tw:last-child{ margin-bottom:4px; }
#tweaks .lab{ font-size:12.5px; color:rgba(255,255,255,.85); margin-bottom:9px; font-weight:500;}
#tweaks .swatches{ display:flex; gap:8px; }
#tweaks .swatches button{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; transition:transform .2s, border-color .2s; }
#tweaks .swatches button:hover{ transform:scale(1.08); }
#tweaks .swatches button.on{ border-color:#fff; }
#tweaks .opts{ display:flex; gap:6px; }
#tweaks .opts button{
  flex:1; border:1px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.7);
  font-size:12px; font-weight:600; padding:9px 6px; border-radius:8px; transition:all .25s;
}
#tweaks .opts button.on{ background:#fff; color:#16161a; border-color:#fff; }
#tweaks .imgrow{ display:flex; gap:7px; }
#tweaks .imgrow button{ flex:1; height:42px; border-radius:8px; border:2px solid transparent; background-size:cover; background-position:center; transition:border-color .2s;}
#tweaks .imgrow button.on{ border-color:#fff; }
#tweaks .hint{ font-size:11px; color:rgba(255,255,255,.4); margin-top:14px; line-height:1.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .wrap{ padding:0 24px; }
  [data-design] .nav nav{ display:none; }
  [data-design="ageless"] .nav, [data-design="rouge"] .nav{ padding:16px 24px; }

  [data-design="ageless"] .hero{ grid-template-columns:1fr; min-height:auto; }
  [data-design="ageless"] .hero .copy{ padding:50px 24px 56px; order:2; }
  [data-design="ageless"] .hero .copy .inner{ padding-left:0; max-width:none; }
  [data-design="ageless"] .hero .media{ order:1; height:62vh; }
  [data-design="ageless"] .services{ padding:70px 0; }
  [data-design="ageless"] .services .head{ grid-template-columns:1fr; gap:18px; margin-bottom:36px;}
  [data-design="ageless"] .grid4{ grid-template-columns:1fr 1fr; }
  [data-design="ageless"] .svc:nth-child(2n){ border-right:0; }
  [data-design="ageless"] .svc{ border-bottom:1px solid var(--line); }
  [data-design="ageless"] .feature .inner{ grid-template-columns:1fr; }
  [data-design="ageless"] .feature .txt{ padding:56px 24px; order:2; }
  [data-design="ageless"] .feature .ph{ order:1; height:54vh; }
  [data-design="ageless"] .cta .scrim{ background:linear-gradient(180deg, rgba(42,61,57,.55), rgba(42,61,57,.9)); }
  [data-design="ageless"] .cta{ padding:70px 0; }
  [data-design="ageless"] .foot .top{ grid-template-columns:1fr; gap:44px; padding:62px 0 48px;}

  [data-design="rouge"] .hero .inner{ grid-template-columns:1fr; min-height:auto; }
  [data-design="rouge"] .hero .copy{ padding:48px 24px 60px; order:2; }
  [data-design="rouge"] .hero .copy .eyebrow{ margin-top:0; }
  [data-design="rouge"] .hero .copy::before{ display:none; }
  [data-design="rouge"] .hero .media{ order:1; height:64vh; }
  [data-design="rouge"] .svc-list{ grid-template-columns:1fr; }
  [data-design="rouge"] .svc:nth-child(odd){ border-right:0; }
  [data-design="rouge"] .svc{ padding:34px 24px; }
  [data-design="rouge"] .foot .top{ grid-template-columns:1fr; gap:44px; padding:62px 0 48px;}
  #dock .seg button{ padding:10px 14px; font-size:12px; }
}
@media (max-width:520px){
  #dock{ width:calc(100% - 28px); justify-content:center; }
  #tweaks{ width:calc(100% - 28px); }
}