/* ==========================================================================
   DR. LASER — Aesthetic Solutions
   Luxury design system: matte black, champagne gold, warm ivory.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --radius: 2px;

  --ink: oklch(0.145 0 0);
  --onyx: oklch(0.19 0.004 60);
  --gold: oklch(0.746 0.076 76.5);
  --gold-soft: oklch(0.881 0.049 85);
  --ivory: oklch(0.958 0.011 85);
  --taupe: oklch(0.735 0.017 75);

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.958 0.011 85);
  --card: oklch(0.19 0.004 60);
  --primary: oklch(0.746 0.076 76.5);
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.24 0.006 70);
  --muted-foreground: oklch(0.735 0.017 75);
  --accent: oklch(0.881 0.049 85);
  --border: oklch(0.746 0.076 76.5 / 22%);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Manrope", system-ui, sans-serif;
}

/* Fallback hex values in case oklch isn't supported */
@supports not (color: oklch(0 0 0)) {
  :root{
    --ink:#0e0e0e; --onyx:#242321; --gold:#c9a568; --gold-soft:#e3d3ad;
    --ivory:#f1ede4; --taupe:#a99a89; --background:#0e0e0e; --foreground:#f1ede4;
    --card:#242321; --primary:#c9a568; --primary-foreground:#0e0e0e;
    --secondary:#2c2a26; --muted-foreground:#a99a89; --accent:#e3d3ad;
    --border:rgba(201,165,104,.22);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; border-color:var(--border); }
html{ scroll-behavior:smooth; }
body{
  background:var(--background); color:var(--foreground);
  font-family:var(--font-sans); font-weight:300; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:300; letter-spacing:.01em; line-height:1.1; }
h1{ font-size:3rem; } h2{ font-size:2.4rem; } h3{ font-size:1.8rem; } h4{ font-size:1.3rem; }

::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

/* ---------- layout helpers ---------- */
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media(min-width:768px){ .container{ padding:0 40px; } }
.section{ padding:80px 0; }
@media(min-width:768px){ .section{ padding:128px 0; } }
.section-sm{ padding:56px 0; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--font-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.hairline{
  height:1px; width:100%;
  background:linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 55%, transparent), transparent);
  margin:36px 0;
}
.muted{ color:var(--muted-foreground); }
.text-primary{ color:var(--primary); }
.italic-primary{ color:var(--primary); font-style:italic; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; font-size:.7rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.24em; transition:all .4s ease; white-space:nowrap; border:1px solid transparent;
}
.btn-gold{ background:var(--primary); color:var(--primary-foreground); }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-outline{ border-color:color-mix(in oklab, var(--primary) 60%, transparent); color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:var(--primary-foreground); }
.btn-outline-light{ border-color:rgba(20,20,20,.3); color:var(--ink); }
.btn-outline-light:hover{ background:var(--ink); color:var(--ivory); }

/* ---------- grain texture ---------- */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- surfaces ---------- */
.surface-light{ background:var(--ivory); color:var(--ink); }
.bg-onyx{ background:var(--onyx); }
.border-y{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.border-b{ border-bottom:1px solid var(--border); }
.border-t{ border-top:1px solid var(--border); }
.card{ border:1px solid var(--border); transition:border-color .4s ease; }
.card:hover{ border-color:color-mix(in oklab, var(--primary) 60%, transparent); }

/* ---------- link underline ---------- */
.link-underline{ position:relative; }
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  transform:scaleX(0); transform-origin:left; background:var(--gold);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ---------- animations ---------- */
@keyframes rise{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }
.animate-rise{ animation:rise .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes scrollhint{ 0%,100%{transform:translateY(0);opacity:.4;} 50%{transform:translateY(8px);opacity:1;} }
.scroll-hint{ animation:scrollhint 2.2s ease-in-out infinite; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:all .5s ease; background:transparent;
}
.site-header.scrolled{
  background:color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; }
.logo-mark{ display:inline-flex; align-items:center; gap:10px; }
.logo-mark img{ height:44px; width:auto; mix-blend-mode:screen; }
.logo-mark .logo-text{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.05em; color:var(--foreground); }
.logo-mark .logo-text b{ color:var(--primary); font-weight:400; }

.primary-nav{ display:none; align-items:center; gap:32px; }
@media(min-width:1024px){ .primary-nav{ display:flex; } }
.primary-nav a{
  font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em;
  color:color-mix(in oklab, var(--foreground) 75%, transparent); transition:color .3s ease;
}
.primary-nav a:hover, .primary-nav a.active{ color:var(--primary); }

.menu-toggle{ display:inline-flex; padding:8px; color:var(--primary); }
@media(min-width:1024px){ .menu-toggle{ display:none; } }
.menu-toggle svg{ width:26px; height:26px; }

.mobile-nav{
  position:fixed; inset:72px 0 0 0; z-index:40; background:var(--background);
  display:none; flex-direction:column; gap:2px; padding:40px 32px 96px; overflow-y:auto;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  font-family:var(--font-display); font-size:1.8rem; color:var(--foreground);
  padding:18px 0; border-bottom:1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.mobile-nav .btn{ margin-top:28px; width:100%; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--border); background:var(--background); }
.footer-grid{ display:grid; gap:52px; padding:80px 0 0; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-grid h2{ font-family:var(--font-sans); }
.footer-grid ul{ margin-top:22px; }
.footer-grid li{ margin-bottom:12px; font-size:.9rem; color:var(--muted-foreground); }
.footer-grid a:hover{ color:var(--primary); }
.social-row{ display:flex; gap:16px; margin-top:26px; }
.social-row a{
  border:1px solid var(--border); padding:12px; color:var(--primary); transition:all .3s ease;
  display:inline-flex;
}
.social-row a:hover{ background:var(--primary); color:var(--primary-foreground); }
.footer-bottom{
  display:flex; flex-direction:column; gap:16px; font-size:.75rem; color:var(--muted-foreground);
  padding:48px 0; margin-top:48px; border-top:1px solid var(--border);
}
@media(min-width:768px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-bottom ul{ display:flex; flex-wrap:wrap; gap:24px; }

/* ==========================================================================
   HERO / PAGE HERO
   ========================================================================== */
.hero{ position:relative; min-height:92vh; overflow:hidden; }
.hero img.bg{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.hero .scrim-1{ position:absolute; inset:0; background:linear-gradient(to right, var(--background), color-mix(in oklab, var(--background) 85%, transparent), color-mix(in oklab, var(--background) 20%, transparent)); }
.hero .scrim-2{ position:absolute; inset:0; background:linear-gradient(to top, var(--background), transparent 60%, color-mix(in oklab, var(--background) 60%, transparent)); }
.hero-content{ position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding-block:110px 60px; }
.hero-content h1{ font-size:2.8rem; margin-top:28px; }
@media(min-width:640px){ .hero-content h1{ font-size:3.6rem; } }
@media(min-width:1024px){ .hero-content h1{ font-size:5rem; } }
.hero-content p{ margin-top:32px; max-width:34rem; color:var(--muted-foreground); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:44px; }
.scroll-cue{ position:absolute; inset-inline:0; bottom:32px; display:flex; justify-content:center; }

.page-hero{ position:relative; border-bottom:1px solid var(--border); overflow:hidden; }
.page-hero img{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.32; }
.page-hero .scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, color-mix(in oklab, var(--background) 85%, transparent), color-mix(in oklab, var(--background) 70%, transparent), var(--background)); }
.page-hero-content{ position:relative; padding:150px 0 90px; max-width:46rem; }
@media(min-width:768px){ .page-hero-content{ padding:190px 0 110px; } }
.page-hero-content h1{ margin-top:22px; font-size:2.6rem; }
@media(min-width:768px){ .page-hero-content h1{ font-size:4rem; } }
.page-hero-content p{ margin-top:26px; max-width:36rem; color:var(--muted-foreground); }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust-bar{ display:grid; gap:36px; padding:52px 0; }
@media(min-width:640px){ .trust-bar{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .trust-bar{ grid-template-columns:repeat(4,1fr); } }
.trust-item{ display:flex; gap:14px; }
.trust-item svg{ flex-shrink:0; width:20px; height:20px; margin-top:4px; color:var(--primary); }
.trust-item h3{ font-family:var(--font-sans); font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; }
.trust-item p{ margin-top:8px; font-size:.85rem; color:var(--muted-foreground); }

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.section-heading{ max-width:46rem; margin:0 auto; text-align:center; }
.section-heading.left{ margin:0; text-align:left; max-width:34rem; }
.section-heading h2{ margin-top:18px; font-size:2.2rem; }
@media(min-width:768px){ .section-heading h2{ font-size:2.8rem; } }
@media(min-width:1024px){ .section-heading h2{ font-size:3.4rem; } }
.section-heading p{ margin-top:22px; color:var(--muted-foreground); }

.grid-2{ display:grid; gap:32px; }
@media(min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
.grid-3{ display:grid; gap:32px; }
@media(min-width:768px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.grid-4{ display:grid; gap:32px; }
@media(min-width:640px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }

.treatment-card{ display:block; }
.treatment-card .thumb{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.treatment-card .thumb img{ height:100%; width:100%; object-fit:cover; transition:transform 1.2s ease; }
.treatment-card:hover .thumb img{ transform:scale(1.05); }
.treatment-card .thumb .scrim{ position:absolute; inset:0; background:linear-gradient(to top, color-mix(in oklab, var(--background) 90%, transparent), color-mix(in oklab, var(--background) 20%, transparent) 60%, transparent); }
.treatment-card .body{ padding:26px; }
.treatment-card h3{ font-size:1.5rem; }
.treatment-card p{ margin-top:12px; font-size:.9rem; color:var(--muted-foreground); }
.treatment-card .cta{ margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--primary); }

.feature-card{ border:1px solid var(--border); padding:22px; transition:border-color .3s ease; }
.feature-card:hover{ border-color:color-mix(in oklab, var(--primary) 60%, transparent); }
.feature-card h4{ color:var(--primary); font-size:1.2rem; }
.feature-card p{ margin-top:10px; font-size:.88rem; color:var(--muted-foreground); }

.step-card{ background:var(--ivory); color:var(--ink); padding:32px; transition:background .4s ease; }
.step-card:hover{ background:color-mix(in oklab, var(--gold-soft) 40%, var(--ivory)); }
.step-card .num{ font-family:var(--font-display); font-size:2.6rem; color:color-mix(in oklab, var(--ink) 25%, transparent); }
.step-card h3{ margin-top:20px; font-family:var(--font-sans); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; }
.step-card p{ margin-top:12px; font-size:.88rem; color:color-mix(in oklab, var(--ink) 65%, transparent); }
.step-grid{ display:grid; gap:1px; background:color-mix(in oklab, var(--ink) 10%, transparent); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
@media(min-width:640px){ .step-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .step-grid{ grid-template-columns:repeat(4,1fr); } }

.testimonial{ border:1px solid var(--border); padding:32px; transition:border-color .3s ease; }
.testimonial:hover{ border-color:color-mix(in oklab, var(--primary) 50%, transparent); }
.testimonial .stars{ display:flex; gap:4px; color:var(--primary); }
.testimonial .stars svg{ width:14px; height:14px; }
.testimonial blockquote{ margin-top:22px; font-family:var(--font-display); font-size:1.25rem; line-height:1.5; }
.testimonial figcaption{ margin-top:22px; font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-foreground); }

/* ---------- media split ---------- */
.split{ display:grid; gap:56px; align-items:center; }
@media(min-width:1024px){ .split{ grid-template-columns:1fr 1fr; } }
.split img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--border); }
.split .img-wrap{ overflow:hidden; border:1px solid var(--border); }
.order-1{ order:1; } .order-2{ order:2; }
@media(min-width:1024px){ .lg-order-1{ order:1; } .lg-order-2{ order:2; } }

/* ---------- list ---------- */
.check-list li{ border-left:1px solid color-mix(in oklab, var(--primary) 40%, transparent); padding-left:22px; margin-bottom:24px; }
.check-list h3{ font-family:var(--font-sans); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; }
.check-list p{ margin-top:8px; font-size:.88rem; color:var(--muted-foreground); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-band img{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.22; }
.cta-band .scrim{ position:absolute; inset:0; background:color-mix(in oklab, var(--background) 75%, transparent); }
.cta-band .inner{ position:relative; padding:96px 0; text-align:center; }
.cta-band h2{ margin:22px auto 0; max-width:44rem; font-size:2.2rem; }
@media(min-width:768px){ .cta-band h2{ font-size:3.4rem; } }
.cta-band p{ margin:22px auto 0; max-width:34rem; font-size:.9rem; color:var(--muted-foreground); }
.cta-band .actions{ margin-top:36px; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; font-family:var(--font-display); font-size:1.2rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ flex-shrink:0; color:var(--primary); font-size:1.4rem; transition:transform .3s ease; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .answer{ padding-bottom:24px; color:var(--muted-foreground); font-size:.92rem; max-width:44rem; }

/* ---------- forms ---------- */
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted-foreground); }
.form-field input, .form-field select, .form-field textarea{
  background:transparent; border:1px solid var(--border); color:var(--foreground);
  padding:13px 16px; font-family:var(--font-sans); font-size:.92rem; width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:1px solid var(--gold); border-color:var(--gold); }
.form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a568' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.form-grid{ display:grid; gap:22px; }
@media(min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-grid .full{ grid-column:1/-1; }
.form-note{ margin-top:18px; font-size:.78rem; color:var(--muted-foreground); }

/* ---------- badges / pricing ---------- */
.badge{ display:inline-block; border:1px solid var(--border); padding:6px 14px; font-size:.65rem; text-transform:uppercase; letter-spacing:.18em; color:var(--primary); }
.price-tag{ font-family:var(--font-display); font-size:1.6rem; color:var(--primary); }

/* ---------- utility spacing ---------- */
.mt-4{ margin-top:16px; } .mt-6{ margin-top:24px; } .mt-8{ margin-top:32px; }
.mt-10{ margin-top:40px; } .mt-12{ margin-top:48px; } .mt-16{ margin-top:64px; }
.mb-4{ margin-bottom:16px; } .mb-6{ margin-bottom:24px; }
.text-center{ text-align:center; } .text-sm{ font-size:.88rem; }
.max-w-prose{ max-width:42rem; }
.center{ margin-left:auto; margin-right:auto; }