/* ============================================================
   ONGLES KATELYN NAILS — Bilingual EN/FR site
   Palette: ICY-BLUE BRAND (locked from preview.html)
   Fonts: Cormorant Garamond (display) + Jost (body)
   Framework-free. CSS-variable theming.
   ============================================================ */

:root {
  /* ---- Icy-blue brand palette ---- */
  --bg-hero-1:#dbeafe;
  --bg-hero-2:#eff6ff;
  --bg-page:#f7fafc;
  --bg-card:#ffffff;
  --text:#1e293b;
  --text-muted:#52647a;
  --heading:#1e293b;
  --accent:#60a5fa;
  --accent-strong:#3b82f6;
  --accent-soft:#bfdbfe;
  --btn-text:#ffffff;
  --price:#3b82f6;
  --hairline:#cfe0f5;
  --underline:#93c5fd;
  --footer-bg:#0f172a;
  --footer-text:#cbd5e1;

  /* ---- Typography ---- */
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Jost', sans-serif;

  /* ---- Spacing scale (8px base) ---- */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4rem;
  --space-2xl:6rem;

  /* ---- Transitions ---- */
  --t-fast:0.18s ease;
  --t-normal:0.28s ease;

  --radius:16px;
  --maxw:1140px;
}

/* ============================================================
   GLOBAL
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg-page);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family:var(--font-display);
  color:var(--heading);
  line-height:1.15;
  font-weight:600;
}
img { max-width:100%; display:block; }
a { color:var(--accent-strong); text-decoration:none; transition:color var(--t-fast); }

.container { max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

.eyebrow {
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-strong); font-weight:500;
}

.section-head { text-align:center; margin-bottom:3rem; }
.section-head h2 { font-size:2.75rem; margin-top:.4rem; }
.section-head p.sub { color:var(--text-muted); max-width:560px; margin:.6rem auto 0; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display:inline-block; font-family:var(--font-body); font-weight:500; font-size:.95rem;
  cursor:pointer; padding:.7rem 1.4rem; border-radius:999px; transition:all var(--t-normal);
  text-decoration:none; border:1.5px solid transparent; text-align:center; line-height:1.3;
}
.btn-primary { background:var(--accent); color:var(--btn-text); }
.btn-primary:hover { background:var(--accent-strong); transform:translateY(-2px); box-shadow:0 10px 20px rgba(59,130,246,.25); }
.btn-outline { background:transparent; color:var(--accent-strong); border-color:var(--accent); }
.btn-outline:hover { background:var(--accent-soft); }

/* ============================================================
   HEADER
   ============================================================ */

.header {
  background:var(--bg-card); border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:50; transition:box-shadow var(--t-normal);
}
.header.scrolled { box-shadow:0 4px 16px rgba(30,41,59,.07); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; }
.logo { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--heading); letter-spacing:.5px; flex-shrink:0; }
.logo span { color:var(--accent-strong); }

.nav-links { display:flex; gap:1.6rem; align-items:center; }
.nav-links a { color:var(--text); font-size:.92rem; font-weight:400; position:relative; }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--accent); transition:width var(--t-fast);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:.85rem; }

.lang-toggle { display:flex; border:1px solid var(--hairline); border-radius:999px; overflow:hidden; font-size:.8rem; }
.lang-toggle button { border:none; background:transparent; padding:.35rem .75rem; cursor:pointer; color:var(--text-muted); font-family:var(--font-body); transition:all var(--t-fast); }
.lang-toggle button.active { background:var(--accent); color:var(--btn-text); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background:linear-gradient(160deg,var(--bg-hero-1) 0%,var(--bg-hero-2) 60%,var(--bg-card) 100%);
  text-align:center; padding:5.5rem 1.5rem 5rem;
}
.hero .eyebrow { display:block; margin-bottom:1rem; }
.hero h1 { font-size:4rem; margin:0 0 .6rem; font-weight:700; }
.hero h1 .accent { position:relative; display:inline-block; }
.hero h1 .accent::after {
  content:""; position:absolute; left:0; right:0; bottom:6px; height:4px;
  background:var(--underline); opacity:.7; border-radius:2px;
}
.hero .tag { font-size:1.25rem; color:var(--text-muted); max-width:580px; margin:0 auto 2rem; font-weight:300; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   TRUST BAR
   ============================================================ */

.trust { background:var(--bg-card); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.trust .container { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; padding:1.1rem 1.5rem; font-size:.95rem; color:var(--text-muted); }
.trust .star { color:var(--accent-strong); font-weight:600; }
.trust a { color:var(--accent-strong); }

/* ============================================================
   SERVICES
   ============================================================ */

.services { padding:5rem 0; }

.tabs { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.tab {
  font-family:var(--font-body); font-size:.95rem; cursor:pointer;
  border:1.5px solid var(--hairline); background:var(--bg-card); color:var(--text-muted);
  padding:.6rem 1.4rem; border-radius:999px; transition:all var(--t-fast);
}
.tab:hover { border-color:var(--accent); color:var(--accent-strong); }
.tab.active { background:var(--accent); color:var(--btn-text); border-color:var(--accent); }

.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeInUp .4s ease-out; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.card {
  background:var(--bg-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:2rem; transition:transform var(--t-normal),box-shadow var(--t-normal);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--underline); opacity:.8; }
.card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,41,59,.08); }
.card h3 { font-size:1.55rem; margin-bottom:.5rem; }
.card p { color:var(--text-muted); font-size:.95rem; font-weight:300; margin-bottom:1.2rem; flex:1; }
.card .price { font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--price); }

.menu-note { text-align:center; color:var(--text-muted); font-size:.88rem; font-style:italic; margin-top:2rem; }

/* ============================================================
   GALLERY
   ============================================================ */

.gallery { padding:5rem 0; background:linear-gradient(160deg,var(--bg-hero-2),var(--bg-card)); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem; }
.gallery-tile {
  aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--accent-soft);
  border:1px solid var(--hairline); position:relative;
}
.gallery-tile img { width:100%; height:100%; object-fit:cover; }
.gallery-tile.placeholder {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.4rem;
  color:var(--accent-strong); font-size:.8rem; text-align:center; padding:1rem;
}
.gallery-tile.placeholder span.ico { font-size:1.6rem; }
.gallery-cta { text-align:center; }

/* ============================================================
   HOURS + LOCATION
   ============================================================ */

.location { padding:5rem 0; }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.hours-table { width:100%; border-collapse:collapse; margin-top:1rem; }
.hours-table td { padding:.6rem 0; border-bottom:1px solid var(--hairline); font-size:.98rem; }
.hours-table td:last-child { text-align:right; color:var(--text-muted); }
.hours-table tr.closed td:last-child { color:var(--accent-strong); font-weight:500; }

.nap { margin-top:1.5rem; font-size:.98rem; line-height:1.9; color:var(--text-muted); }
.nap strong { color:var(--text); font-weight:500; }
.nap a { font-weight:500; }

.map-wrap { border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); box-shadow:0 10px 30px rgba(30,41,59,.06); min-height:340px; }
.map-wrap iframe { width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ============================================================
   VOICE DEMO
   ============================================================ */

.voice { padding:5rem 0; background:linear-gradient(160deg,var(--bg-hero-2),var(--bg-card)); text-align:center; }
.voice h2 { font-size:2.5rem; }
.voice p { color:var(--text-muted); max-width:540px; margin:.6rem auto 1.8rem; font-weight:300; }
.voice-widget-wrap { display:flex; justify-content:center; }
.widget-placeholder {
  display:inline-flex; align-items:center; gap:.6rem; background:var(--bg-card);
  border:1.5px dashed var(--accent); color:var(--accent-strong);
  padding:1rem 1.6rem; border-radius:999px; font-size:.95rem;
}

/* ============================================================
   REVIEWS
   ============================================================ */

.reviews { padding:5rem 0; }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.review-card {
  background:var(--bg-card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:2rem; transition:transform var(--t-normal),box-shadow var(--t-normal);
}
.review-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,41,59,.08); }
.review-stars { color:var(--accent-strong); font-size:1.1rem; margin-bottom:.8rem; letter-spacing:2px; }
.review-card p { color:var(--text); font-size:1rem; font-weight:300; font-style:italic; margin-bottom:1rem; }
.review-author { color:var(--text-muted); font-weight:500; font-size:.9rem; font-style:normal; }
.reviews-meta { text-align:center; margin-top:2.5rem; color:var(--text-muted); font-size:.95rem; }
.reviews-meta .star { color:var(--accent-strong); font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { background:var(--footer-bg); color:var(--footer-text); padding:3.5rem 1.5rem 2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.5rem; max-width:var(--maxw); margin:0 auto 2.5rem; }
.footer h4 { color:#fff; font-size:1.3rem; margin-bottom:1rem; }
.footer p, .footer li { color:var(--footer-text); font-size:.92rem; margin-bottom:.5rem; line-height:1.7; }
.footer a { color:#fff; }
.footer ul { list-style:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; text-align:center; font-size:.82rem; color:rgba(255,255,255,.6); max-width:var(--maxw); margin:0 auto; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */

.sticky-cta-mobile { display:none; }

/* ============================================================
   SCROLL ANIMATION HELPERS
   ============================================================ */

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-init { opacity:0; }
.fade-in { animation:fadeInUp .6s ease-out forwards; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px) {
  .location-grid { grid-template-columns:1fr; gap:2rem; }
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-img { max-height:400px; }
}

@media (max-width:768px) {
  .nav-links { display:none; }
  .hero { padding:4rem 1.25rem 3.5rem; }
  .hero h1 { font-size:2.8rem; }
  .page-hero h1 { font-size:2.2rem; }
  .section-head h2 { font-size:2.2rem; }
  .services, .gallery, .location, .voice, .reviews, .features, .featured-services, .about-section, .values-section { padding:3.5rem 0; }
  .about-content h2 { font-size:2.2rem; }
  .stat-number { font-size:2.4rem; }

  /* sticky mobile call/book bar */
  .sticky-cta-mobile {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:999;
    box-shadow:0 -2px 12px rgba(15,23,42,.12);
  }
  .sticky-cta-mobile a {
    flex:1; text-align:center; padding:1rem; font-family:var(--font-body); font-weight:500;
    font-size:1rem; text-decoration:none; transition:background var(--t-fast);
  }
  .sticky-cta-mobile .sc-call { background:var(--bg-card); color:var(--accent-strong); border-top:1px solid var(--hairline); }
  .sticky-cta-mobile .sc-book { background:var(--accent); color:var(--btn-text); }
  .sticky-cta-mobile .sc-book:hover { background:var(--accent-strong); }
  body { padding-bottom:60px; }
}

@media (max-width:480px) {
  .hero h1 { font-size:2.3rem; }
  .hero .tag { font-size:1.1rem; }
  .nav-right .btn { display:none; }
  .container { padding:0 1.1rem; }
  .card { padding:1.6rem; }
}

/* ============================================================
   PAGE HERO (inner pages — smaller than home hero)
   ============================================================ */

.page-hero {
  background:linear-gradient(160deg,var(--bg-hero-1) 0%,var(--bg-hero-2) 100%);
  padding:4rem 1.5rem 3.5rem; text-align:center;
}
.page-hero .eyebrow { display:block; margin-bottom:.8rem; }
.page-hero h1 { font-size:3rem; }

/* ============================================================
   FEATURES — Why Choose Us (home page)
   ============================================================ */

.features { padding:5rem 0; background:var(--bg-card); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; }
.feature-card {
  background:var(--bg-page); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:2.2rem 2rem; text-align:center; transition:transform var(--t-normal),box-shadow var(--t-normal);
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,41,59,.07); }
.feature-icon { font-size:2rem; margin-bottom:1rem; }
.feature-card h3 { font-size:1.5rem; margin-bottom:.5rem; }
.feature-card p { color:var(--text-muted); font-size:.95rem; font-weight:300; }

/* ============================================================
   FEATURED SERVICES — home page teaser
   ============================================================ */

.featured-services { padding:5rem 0; }
.featured-services .section-head { margin-bottom:2.5rem; }
.featured-services .cards { margin-bottom:2rem; }
.featured-cta { text-align:center; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-section { padding:5rem 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-img { border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); box-shadow:0 14px 40px rgba(30,41,59,.09); }
.about-img img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.about-content h2 { font-size:2.8rem; margin-bottom:1rem; }
.about-content p { color:var(--text-muted); font-weight:300; font-size:1rem; margin-bottom:1rem; line-height:1.75; }

.stats-bar { background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%); color:#fff; padding:3.5rem 1.5rem; }
.stats-bar .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; max-width:var(--maxw); margin:0 auto; }
.stat-item { text-align:center; }
.stat-number { font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1; display:block; }
.stat-label { font-size:.85rem; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin-top:.3rem; display:block; }

.values-section { padding:5rem 0; background:var(--bg-card); }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; }
.value-card {
  padding:2rem; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--bg-page);
  border-top:3px solid var(--accent);
}
.value-card h3 { font-size:1.45rem; margin-bottom:.5rem; }
.value-card p { color:var(--text-muted); font-size:.95rem; font-weight:300; line-height:1.7; }

/* ============================================================
   ACCESSIBILITY / PRINT
   ============================================================ */

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .fade-init { opacity:1 !important; }
}

@media print {
  .header, .footer, .sticky-cta-mobile, .voice { display:none; }
  body { padding-bottom:0; }
}