/* ==========================================================================
   YOUNG · Beauty · Skin · Aesthetic
   youngbeauty.my
   --------------------------------------------------------------------------
   styles.css — all visual styling for the site
   Organised in sections; search for "===" to jump between them.
   Colours and fonts are defined ONCE in the ":root" block below — change
   them there and the whole site updates.
   ========================================================================== */

/* ============================ 1. FONTS ====================================
   Self-hosted (files sit in the /fonts folder) so the site never depends on
   an outside service and loads fast.                                          */
/* Display serif — EB Garamond.
   Chosen over Cormorant Garamond specifically because Cormorant draws the
   digit "1" as a bare stem with no foot, so "RM197" could be misread as
   "RMl97". EB Garamond keeps the same Garamond character but gives the 1 a
   proper flag and foot, so the price is unambiguous.                        */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ============================ 2. COLOUR + TYPE SYSTEM ====================
   Every colour and font on the site comes from here.                          */
:root {
  /* --- surfaces ---
     There is deliberately NO black anywhere in this palette. The darkest tone
     is a warm beige-taupe (--ink-bg), which is what the footer, the promo bar
     and the solid buttons use.                                          */
  --paper:      #FDFBF7;   /* page background — warm ivory */
  --paper-2:    #F5F0E7;   /* soft sand — alternating sections */
  --paper-3:    #EDE6D9;   /* deeper sand — cards, chips */
  --ink-bg:     #6B5F4E;   /* dark beige — footer, promo bar, solid buttons */
  --ink-bg-2:   #5A4F40;   /* hover state for the above */

  /* --- text --- */
  --ink:        #4A4036;   /* headings — warm dark taupe, not black */
  --ink-2:      #6B6053;   /* body copy */
  --ink-3:      #6E6459;   /* captions, meta — dark enough to stay readable */
  --on-dark:    #F8F5EF;   /* text on the dark beige */
  --on-dark-2:  rgba(248,245,239,.94);   /* kept high for readable contrast */

  /* --- lines --- */
  --line:       rgba(74,64,54,.14);
  --line-soft:  rgba(74,64,54,.075);
  --line-dark:  rgba(248,245,239,.22);

  /* --- accent ---
     Three tones, because one bronze cannot work on both a light page and a
     dark-beige panel — the two surfaces need opposite lightness.
       --accent         decorative only: dots, rules, icon strokes
       --accent-deep    accent TEXT on light surfaces (passes 4.5:1 on sand)
       --accent-on-dark accent TEXT on the dark beige (passes 4.5:1)
       --accent-soft    light wash behind text on the dark beige            */
  --accent:          #A58355;  /* bronze — used sparingly */
  --accent-deep:     #6E5233;  /* darkened so small text clears 4.5:1 on sand */
  --accent-on-dark:  #F1E7D8;  /* cream-bronze — for accent text on dark beige */
  --accent-soft:     #EFE4D2;  /* for accent washes on the dark beige */

  /* --- type --- */
  --font-display: 'EB Garamond', 'Times New Roman', serif;
  --font-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* --- shape + motion --- */
  --radius:   2px;
  --radius-lg: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---- Direction B: "Clinical Cool" (toggled from the Tweaks panel) ------- */
body.theme-clinical {
  --paper:      #FFFFFF;
  --paper-2:    #F4F5F6;
  --paper-3:    #EAECEE;
  --ink-bg:     #5B6169;   /* soft cool slate — no black here either */
  --ink-bg-2:   #4A5057;
  --ink:        #3E444A;
  --ink-2:      #5C636A;
  --ink-3:      #8E959C;
  --line:       rgba(62,68,74,.15);
  --line-soft:  rgba(62,68,74,.08);
  /* NOTE: the accent colours are deliberately NOT set here. They are owned in
     one place only — the inline --accent written by the Tweaks panel — because
     a value declared on body always beats one inherited from html, which would
     silently override the user's swatch choice. */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --radius: 0px;
  --radius-lg: 0px;
}
/* Direction B tightens the display type — a sans needs tighter tracking
   and heavier weight than a serif to hold the same visual weight.          */
body.theme-clinical h1, body.theme-clinical h2, body.theme-clinical h3,
body.theme-clinical .display {
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height: 1.04;
}
body.theme-clinical .eyebrow { letter-spacing: .16em; font-weight: 500; }
body.theme-clinical .rule-grid::before { opacity: .9; }

/* ============================ 3. RESET =================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* A very light paper grain — keeps large flat areas from looking synthetic */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.theme-clinical::after { opacity: .02; }

/* ============================ 4. LAYOUT UTILITIES ======================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 900px; }
.section { padding-block: clamp(72px, 11vw, 160px); }
.section-tight { padding-block: clamp(56px, 7vw, 96px); }
.bg-sand { background: var(--paper-2); }
.bg-ink  { background: var(--ink-bg); color: var(--on-dark-2); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--on-dark); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
  margin-bottom: 22px;
}
.bg-ink .eyebrow { color: var(--on-dark-2); }
.eyebrow.accent { color: var(--accent-deep); }

h1, .h1 { font-family: var(--font-display); font-size: clamp(2.9rem, 6.4vw, 6rem); line-height: .99; letter-spacing: -.012em; }
h2, .h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.01em; }
h3, .h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.16; }
.lede { font-size: clamp(1rem, 1.25vw, 1.19rem); line-height: 1.78; color: var(--ink-2); max-width: 62ch; }
.bg-ink .lede { color: var(--on-dark-2); }
.small { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }

.head-block { max-width: 780px; margin-bottom: clamp(40px, 6vw, 76px); }
.head-block.center { margin-inline: auto; text-align: center; }

/* ============================ 5. BUTTONS ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: .17em; text-transform: uppercase; font-weight: 400;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink); background: transparent;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-solid:hover { background: var(--ink-bg-2); border-color: var(--ink-bg-2); color: #fff; }
.btn-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost-dark { border-color: var(--line-dark); color: var(--on-dark); }
.btn-ghost-dark:hover { background: var(--on-dark); color: var(--ink-bg); border-color: var(--on-dark); }
.btn-sm { padding: 13px 22px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* text link with a travelling underline */
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 5px; position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .5s var(--ease);
}
.tlink:hover::after { transform: scaleX(.28); }
.tlink svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ============================ 6. HEADER ================================== */
.promo-strip {
  background: var(--ink-bg); color: var(--on-dark);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  position: relative; z-index: 60;
}
.promo-strip .wrap {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding-block: 11px; text-align: center;
}
.promo-strip .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-on-dark); flex: none; }
.promo-strip strong { font-weight: 400; color: var(--accent-on-dark); }
.promo-strip a { border-bottom: 1px solid var(--line-dark); padding-bottom: 2px; }
.promo-strip a:hover { border-color: var(--accent); color: var(--accent-soft); }
/* The dismiss button sits in a thin 34px strip, so its hit area is expanded
   with padding rather than height — keeps the bar slim but gives thumbs
   a 44px target. */
.promo-strip .x {
  position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%);
  opacity: .62; padding: 17px 16px; margin: -17px -16px;
}
.promo-strip .x:hover { opacity: 1; }
.promo-strip.is-hidden { display: none; }
@media (max-width: 720px) { .promo-strip .hide-sm { display: none; } .promo-strip .x { right: 14px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 78px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
body.theme-clinical .brand img { height: 27px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  position: relative; padding-block: 6px; transition: color .35s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; gap: 20px; }
.header-tel { font-size: 12px; letter-spacing: .1em; color: var(--ink-2); }
.header-tel:hover { color: var(--accent-deep); }
/* Expands the logo's tap area to a comfortable size without making the
   header taller — the negative margin cancels the padding. */
.brand { padding-block: 8px; margin-block: -8px; }

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 1px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

@media (max-width: 1020px) {
  .nav, .header-tel { display: none; }
  .burger { display: flex; }
}

/* mobile drawer
   Kept fully invisible when closed, not merely slid off-screen. Offsetting it
   by translateY(-100%) alone left it sitting exactly on the viewport boundary,
   where a render or animation frame could reveal the panel behind the header.
   visibility:hidden guarantees it can never show until you open the menu.     */
.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  padding: 26px var(--gut) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  /* visibility flips immediately when OPENING (delay 0) but only after the
     slide finishes when CLOSING, so the animation stays smooth both ways. */
  transition: transform .6s var(--ease), visibility 0s linear .6s;
}
.drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .6s var(--ease), visibility 0s;
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.drawer-top img { height: 26px; }
.drawer nav { display: flex; flex-direction: column; gap: 2px; }
.drawer nav a {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); color: var(--ink);
  padding-block: 9px; border-bottom: 1px solid var(--line-soft);
}
.drawer-foot { margin-top: auto; padding-top: 34px; display: grid; gap: 14px; }
.drawer .close { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); padding: 15px 12px; margin: -15px -12px; }

/* ============================ 7. HERO ==================================== */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -18%; right: -8%; width: 58vw; height: 58vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 66%);
  opacity: .5; filter: blur(6px);
}
/* three hairline verticals — a quiet editorial grid */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px);
  background-size: 25% 100%; background-position: 0 0;
  opacity: .85;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-block: clamp(56px, 8vw, 112px) clamp(56px, 8vw, 110px);
}
.hero-copy .eyebrow { display: flex; align-items: center; gap: 12px; }
.hero-copy .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent); flex: none; }
.hero-copy h1 { margin-bottom: 30px; }
.hero-copy h1 em { font-style: italic; color: var(--accent-deep); }
.hero-copy .lede { margin-bottom: 38px; }
.hero-meta {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  font-size: 12px; letter-spacing: .09em; color: var(--ink-3); text-transform: uppercase;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

.hero-media { position: relative; }
.hero-media .frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; background: var(--paper-3);
}
.hero-media .frame img, .hero-media .frame .ph { width: 100%; height: 100%; object-fit: cover; }

/* ---- Graceful fallback for a photo that isn't uploaded yet ----
   Without this, a missing file shows the browser's broken-image icon, which
   looks worse than an intentional placeholder. When an <img> fails to load,
   script.js marks its container .is-missing and the box below takes over,
   showing what photograph is needed and at what size.                        */
.is-missing > img { display: none; }
.is-missing::after {
  content: attr(data-need);
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; text-align: center;
  padding: 22px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.85;
  letter-spacing: .05em; color: var(--ink-3); white-space: pre-line;
  background-image: repeating-linear-gradient(45deg,
    transparent 0 9px, rgba(74,64,54,.05) 9px 10px);
}
.hero-chip {
  position: absolute; left: -1px; bottom: 26px; z-index: 2;
  background: var(--paper); border: 1px solid var(--line);
  padding: 16px 22px; border-radius: var(--radius);
  box-shadow: 0 18px 40px -26px rgba(20,17,15,.4);
}
.hero-chip .mono { color: var(--accent-deep); display: block; margin-bottom: 4px; }
.hero-chip p { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.hero-badge {
  position: absolute; top: 26px; right: 26px; z-index: 2;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--ink-bg); color: var(--on-dark);
  display: grid; place-content: center; text-align: center; gap: 1px;
}
.hero-badge strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; display: block; line-height: 1; }
.hero-badge span { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-media { order: -1; }
  .hero-media .frame { aspect-ratio: 5 / 4; }
  .hero-badge { width: 78px; height: 78px; }
  .hero-badge strong { font-size: 1.2rem; }
  .hero-chip { bottom: 14px; padding: 12px 16px; }
}
@media (max-width: 560px) { .hero-badge { display: none; } }

/* ============================ 8. MARQUEE ================================= */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden; padding-block: 17px;
}
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track ul { display: flex; align-items: center; }
.marquee li {
  display: flex; align-items: center; gap: 30px; padding-inline: 30px;
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
.marquee li::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============================ 9. TRUST BAR =============================== */
.trust { border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: clamp(30px, 4vw, 48px) clamp(18px, 2.4vw, 34px); border-left: 1px solid var(--line-soft); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item h3 { font-family: var(--font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.trust-item p { font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { border-top: 1px solid var(--line-soft); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } .trust-item { border-left: 0 !important; padding-inline: 0; } }

/* ============================ 10. TREATMENT ============================== */
.treat-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 980px) { .treat-grid { grid-template-columns: 1fr; gap: 44px; } }

.wl-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 34px 0 40px; }
.wl-chip { background: var(--paper); padding: 20px 18px; }
.wl-chip .nm { font-family: var(--font-mono); font-size: 15px; color: var(--accent-deep); display: block; margin-bottom: 7px; letter-spacing: .02em; }
.wl-chip p { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .wl-chips { grid-template-columns: 1fr; } }

.treat-copy p + p { margin-top: 20px; }
.treat-copy .lede { max-width: none; }

.spec-list { border-top: 1px solid var(--line); }
.spec-list li {
  display: grid; grid-template-columns: 46px 1fr; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--line-soft);
}
.spec-list .n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep); }
.spec-list .t { font-size: 15.5px; color: var(--ink); letter-spacing: .01em; }

/* ============================ 11. TECHNOLOGY (dark) ====================== */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); margin-top: clamp(44px, 6vw, 72px); }
.tech-card { padding-top: 30px; border-top: 1px solid var(--line); }
.tech-card .nm { font-family: var(--font-mono); font-size: 26px; color: var(--accent-deep); letter-spacing: -.01em; }
.tech-card .nm small { font-size: 12px; letter-spacing: .12em; margin-left: 3px; opacity: .8; }
.tech-card h3 { margin: 18px 0 12px; font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.tech-card p { font-size: 15px; color: var(--ink-2); line-height: 1.72; }
@media (max-width: 880px) { .tech-grid { grid-template-columns: 1fr; gap: 34px; } }

.tech-note {
  margin-top: clamp(44px, 6vw, 70px); padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: center;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.tech-note svg { width: 15px; height: 15px; color: var(--accent); }
.tech-note span { display: inline-flex; align-items: center; gap: 10px; }

/* ============================ 12. COMPARISON TABLE ======================= */
.cmp { margin-top: clamp(38px, 5vw, 60px); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row > div { padding: 20px clamp(14px, 2vw, 28px); font-size: 15px; }
.cmp-row .lbl { color: var(--ink-3); font-size: 13.5px; letter-spacing: .04em; }
.cmp-head > div {
  font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding-block: 16px;
}
.cmp-head .ours { background: var(--paper-2); color: var(--ink); }
.cmp .ours { background: var(--paper-2); color: var(--ink); font-weight: 400; }
.cmp .ours strong { color: var(--accent-deep); font-weight: 400; }
.cmp-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); max-width: 78ch; line-height: 1.7; }
@media (max-width: 760px) {
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row .lbl { grid-column: 1 / -1; padding-bottom: 4px; background: var(--paper-2); }
  .cmp-head { display: none; }
  .cmp-row > div { padding: 12px clamp(14px, 2vw, 28px) 16px; font-size: 14px; }
  .cmp .ours::before { content: 'InstaGlow'; display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 5px; }
  .cmp .ours + div::before { content: 'Pico / Q-switched'; display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
}

/* ============================ 13. OFFER CARD ============================= */
.offer {
  position: relative; overflow: hidden;
  background: var(--ink-bg); color: var(--on-dark-2);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 1.15fr .85fr;
}
.offer::before {
  content: ''; position: absolute; top: -40%; left: -10%; width: 60%; height: 180%;
  background: radial-gradient(circle, rgba(165,131,85,.3), transparent 62%);
  pointer-events: none;
}
.offer-body { position: relative; padding: clamp(34px, 5vw, 72px); }
.offer-body h2 { color: var(--on-dark); margin-bottom: 18px; }
.offer-body .lede { color: var(--on-dark-2); margin-bottom: 30px; }
.offer-incl { border-top: 1px solid var(--line-dark); }
.offer-incl li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--line-dark);
}
.offer-incl .n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-on-dark); font-weight: 400; }
.offer-incl .t { color: var(--on-dark); font-size: 15.5px; }
.offer-incl .d { font-family: var(--font-mono); font-size: 11.5px; color: var(--on-dark-2); }
.offer-side {
  position: relative; border-left: 1px solid var(--line-dark);
  padding: clamp(34px, 5vw, 72px) clamp(28px, 4vw, 54px);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.025);
}
.price { font-family: var(--font-display); font-size: clamp(3.6rem, 7vw, 6rem); line-height: .9; color: var(--on-dark); }
.price sup { font-size: .3em; vertical-align: super; letter-spacing: .1em; color: var(--on-dark-2); }
.offer .eyebrow.accent { color: var(--accent-on-dark); }

/* The Packages cards sit on a sand panel, not the dark beige, so their labels
   take the deep accent. (This block comes after the .offer rules above, so the
   cascade resolves correctly.) */
.bg-sand .mono { color: var(--accent-deep); }
.price-note { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-on-dark); font-weight: 400; }
.offer-side .strike { font-size: 13px; color: var(--on-dark-2); margin-top: 4px; font-weight: 400; }
.offer-side .btn { margin-top: 30px; width: 100%; }
.limited {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-dark);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2);
  display: flex; align-items: center; gap: 10px; font-weight: 400;
}
.limited .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on-dark); flex: none; box-shadow: 0 0 0 0 rgba(240,226,201,.55); animation: pulse 2.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(240,226,201,0); } 100% { box-shadow: 0 0 0 0 rgba(240,226,201,0); } }
@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; }
  .offer-side { border-left: 0; border-top: 1px solid var(--line-dark); }
}

/* ============================ 14. GALLERY ================================ */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.ba-card { }
.ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  align-items: start;   /* without this, grid stretch cancels the aspect-ratio below */
}
.ba-slot { position: relative; background: var(--paper-3); aspect-ratio: 4 / 5; }
.ba-slot img, .ba-slot .ph { width: 100%; height: 100%; object-fit: cover; }
.ba-slot.is-missing::after { font-size: 9.5px; padding: 12px; }
.ba-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(251,249,245,.92); color: var(--ink); padding: 4px 8px; border-radius: 2px;
}
.ba-card figcaption { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ba-card .cap { font-size: 14px; color: var(--ink); }
.ba-card .ses { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ba-grid { grid-template-columns: 1fr; } }

.consent { margin-top: clamp(30px, 4vw, 46px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; justify-content: space-between; }

/* ============================ 15. TESTIMONIALS =========================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote { background: var(--paper); padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; }
.quote .stars { display: flex; gap: 4px; margin-bottom: 20px; color: var(--accent-deep); }
.quote .stars svg { width: 13px; height: 13px; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--ink); }
.quote .who { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.quote .who strong { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; letter-spacing: .05em; color: var(--ink); }
.quote .who span { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ============================ 16. FAQ ==================================== */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 36px; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding-block: 24px; font-family: var(--font-display); font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  color: var(--ink); transition: color .35s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq .ic { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); }
.faq .ic::before, .faq .ic::after { content: ''; position: absolute; inset: 50% 9px auto; height: 1px; background: var(--ink); transition: opacity .4s var(--ease), background .4s var(--ease); }
.faq .ic::after { transform: rotate(90deg); }
.faq details[open] .ic { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.faq details[open] .ic::before, .faq details[open] .ic::after { background: var(--paper); }
.faq details[open] .ic::after { opacity: 0; }
.faq .ans { padding-bottom: 28px; padding-right: clamp(0px, 6vw, 70px); }
.faq .ans p { font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }
.faq .ans p + p { margin-top: 14px; }

/* ============================ 17. LOCATIONS ============================== */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); }
.loc {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; gap: 18px;
  background: var(--paper); transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.loc:hover { border-color: var(--accent); transform: translateY(-3px); }
.loc .no { font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep); }
.loc h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.loc address { font-style: normal; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.loc .meta { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.loc .meta div { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--ink-3); }
.loc .meta svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; }
.loc .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } }

/* ============================ 18. FOOTER ================================= */
/* The footer is intentionally short: brand, one line of links, social icons.
   Full outlet addresses live in the Visit Us section instead, so repeating
   them here only added height and duplication.                                */
.footer { background: var(--ink-bg); color: var(--on-dark-2); padding-top: clamp(52px, 6vw, 76px); }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr auto;
  gap: clamp(28px, 4vw, 72px); align-items: start;
  padding-bottom: clamp(34px, 4vw, 46px);
}
.footer-brand img { height: 32px; margin-bottom: 18px; }
.footer-brand .tag { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 16px; }
.footer-brand p { font-size: 14.5px; line-height: 1.7; max-width: 38ch; }

.footer-nav { display: grid; gap: 0; }
.footer-nav a {
  font-size: 14.5px; color: var(--on-dark-2); transition: color .35s var(--ease);
  width: fit-content; padding-block: 9px; min-height: 44px; display: flex; align-items: center;
}
.footer-nav a:hover { color: var(--accent-on-dark); }

.footer-social { display: grid; gap: 16px; justify-items: start; }
.footer-follow { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid; place-content: center;
  color: var(--on-dark);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.social-row a:hover { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--ink-bg); transform: translateY(-2px); }
.social-row svg { width: 17px; height: 17px; display: block; }
.footer-tel { font-size: 14.5px; color: var(--on-dark); letter-spacing: .03em; }
.footer-tel:hover { color: var(--accent-on-dark); }

.footer-bottom {
  border-top: 1px solid var(--line-dark); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: .05em; color: rgba(248,245,239,.78);
}
.footer-bottom .co { color: rgba(248,245,239,.92); }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-social { gap: 12px; }
}

/* ============================ 19. FLOATING CTA ===========================
   REMOVED — the floating WhatsApp button was covering the page on mobile.
   The booking buttons in the header, the offer block and the closing section
   already give WhatsApp plenty of prominence, so nothing is lost.
   If you ever want it back, the styles are still in the project history.     */

/* ============================ 20. REVEAL ANIMATION =======================
   Content is visible by DEFAULT. JavaScript only adds the "waiting" state
   (.pre) to elements that are still below the fold, so if scripting is off or
   fails, nothing on the page can ever be left invisible.                       */
.reveal.pre { opacity: 0; transform: translateY(22px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.d1.in { transition-delay: .09s; } .reveal.d2.in { transition-delay: .18s; }
.reveal.d3.in { transition-delay: .27s; } .reveal.d4.in { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .reveal.pre { opacity: 1; transform: none; } }

/* hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 1.1s var(--ease) backwards; }
.hero-copy > *:nth-child(1) { animation-delay: .06s; }
.hero-copy > *:nth-child(2) { animation-delay: .16s; }
.hero-copy > *:nth-child(3) { animation-delay: .26s; }
.hero-copy > *:nth-child(4) { animation-delay: .36s; }
.hero-copy > *:nth-child(5) { animation-delay: .46s; }
.hero-media { animation: rise 1.3s .2s var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero-media { animation: none; } }

/* ============================ 21. TWEAKS PANEL =========================== */
.yk-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 120; width: 292px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(20,17,15,.5);
  font-size: 12.5px; color: var(--ink-2);
  display: none; overflow: hidden;
}
.yk-panel.is-open { display: block; }
.yk-panel .hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--line); cursor: grab;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.yk-panel .hd:active { cursor: grabbing; }
.yk-panel .bd { padding: 15px; display: grid; gap: 18px; max-height: 66vh; overflow: auto; }
.yk-group { display: grid; gap: 9px; }
.yk-group > label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.yk-seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.yk-seg button { flex: 1; padding: 9px 6px; font-size: 11px; letter-spacing: .06em; color: var(--ink-2); transition: background .3s var(--ease), color .3s var(--ease); }
.yk-seg button + button { border-left: 1px solid var(--line); }
.yk-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.yk-sw { display: flex; gap: 8px; }
.yk-sw button { width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--line); position: relative; }
.yk-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.yk-panel .note { font-size: 11px; color: var(--ink-3); line-height: 1.6; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.yk-close { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 620px) { .yk-panel { left: 16px; right: 16px; width: auto; } }

/* ============================ 22. PRINT ================================== */
@media print {
  .site-header, .yk-panel, .marquee, .promo-strip, .drawer { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 26px; }
  .reveal { opacity: 1 !important; transform: none !important; }
}