/* ============================================================
   Atelier — scoped reskin of the LandingPage marketing template.
   Only applies under body.atelier-landing, layered over
   market_assets/css/main-style1.css. No markup/content changes;
   remove the body class + this <link> to revert completely.
   ============================================================ */

body.atelier-landing{
  /* Re-theme the template's own variables (green -> champagne gold, etc.) */
  --theme-color:#b98d45;
  --second-color:#2a2320;
  --light-color:rgba(185,141,69,.22);
  --border-color:#e7ddce;
  --black:#2a2320;
  --white:#ffffff;
  --light-bg:#f7f1ea;
  --grey-color:#7a6b5f;

  --atelier-serif:'Hoefler Text','Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;
  --atelier-espresso:#2b211d; --atelier-plum:#432d39; --atelier-gold:#b98d45; --atelier-gold-2:#caa35d;
  --atelier-ivory:#f7f1ea; --atelier-ink:#2a2320;

  /* Headings become an elegant serif (template applies `font: var(--hN)`) */
  --h1:normal 500 clamp(38px,5vw,58px)/1.06 var(--atelier-serif);
  --h2:normal 500 clamp(28px,3.6vw,42px)/1.1 var(--atelier-serif);
  --h3:normal 500 24px/1.18 var(--atelier-serif);
  --h4:normal 500 21px/1.2 var(--atelier-serif);

  background:var(--atelier-ivory);
  color:var(--atelier-ink);
}
body.atelier-landing h1,body.atelier-landing h2,body.atelier-landing h3,body.atelier-landing h4{
  color:var(--atelier-ink); text-wrap:balance;
}

/* ---------- Header ---------- */
body.atelier-landing .site-header{
  background:rgba(43,33,29,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.atelier-landing .site-header .menu-lnk,
body.atelier-landing .site-header a{ color:#e4d9cd; }
body.atelier-landing .site-header .menu-lnk:hover{ color:#fff; }
body.atelier-landing .site-header .lnk-btn,
body.atelier-landing .site-header .btn{
  background:linear-gradient(180deg,var(--atelier-gold-2),var(--atelier-gold))!important;
  color:#2b211d!important; border:none!important;
}

/* ---------- Mobile menu (≤1000px) ---------- */
/* The reskinned header is dark espresso, but the template draws the hamburger
   bars with --second-color (also dark) — invisible on the dark bar, so there's
   no visible way to open the menu that holds Login/Register. Make them light. */
body.atelier-landing .header-style-one .mobile-menu .mobile-menu-button div{
  background:#e4d9cd!important;
}
/* Off-canvas panel: espresso close bar, legible dark links */
body.atelier-landing .mobile-menu-wrapper .menu-close-icon{ background:var(--atelier-espresso)!important; }
body.atelier-landing .mobile-menu-wrapper .menu-close-icon svg path{ fill:#f4ece2!important; }
body.atelier-landing .mobile-menu-wrapper .mobile-menu-bar a{
  color:var(--atelier-ink); display:inline-flex; align-items:center; gap:8px;
}
/* The Login row's inline icon is fill=white — invisible on the white panel. Recolor it. */
body.atelier-landing .mobile-menu-wrapper .mobile-menu-bar a svg path{ fill:var(--atelier-espresso)!important; }
/* Render Register (.lnk-btn) as a clear gold button */
body.atelier-landing .mobile-menu-wrapper .mobile-menu-bar .lnk-btn a{
  background:linear-gradient(180deg,var(--atelier-gold-2),var(--atelier-gold));
  color:#2b211d!important; padding:10px 18px; border-radius:11px; font-weight:600;
}
body.atelier-landing .mobile-menu-wrapper .mobile-menu-bar .lnk-btn a svg path{ fill:#2b211d!important; }

/* ---------- Hero ---------- */
body.atelier-landing .main-home-first-section{
  position:relative; overflow:hidden; color:#f4ece2;
  background:
    radial-gradient(120% 90% at 85% -10%,rgba(201,163,92,.30),transparent 55%),
    radial-gradient(90% 90% at 4% 115%,rgba(217,163,160,.20),transparent 55%),
    linear-gradient(158deg,#3a2a2a,#2b211d 48%,#432d39);
}
body.atelier-landing .main-home-first-section::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:4px 4px;
}
body.atelier-landing .main-home-first-section .banner-content,
body.atelier-landing .main-home-first-section .banner-content *:not(.btn):not(.btn *){ color:#f4ece2; }
body.atelier-landing .main-home-first-section .section-title span,
body.atelier-landing .main-home-first-section .section-title .sub-title{ color:var(--atelier-gold-2)!important; }
body.atelier-landing .main-home-first-section .banner-content p{ color:#d8ccc0; }
/* keep any configured hero image reading as a floating card on the dark ground */
body.atelier-landing .banner-img-wrapper img,
body.atelier-landing .banner-image-wrapper img{ border-radius:16px; box-shadow:0 40px 80px -34px rgba(0,0,0,.6); }

/* ---------- Hero product visual ---------- */
/* Replace the dated laptop mockup + pulsing dots with an app-UI illustration. */
body.atelier-landing .main-home-first-section .ripple-icon{ display:none!important; }
body.atelier-landing .banner-img-wrapper .main-banner,
body.atelier-landing .banner-img-wrapper .rtl-banner,
body.atelier-landing .banner-img-wrapper .inner-frame-img{ display:none!important; }
body.atelier-landing .banner-img-wrapper{
  width:100%; max-width:620px; margin-inline:auto; aspect-ratio:920 / 660;
  background:url('../images/atelier-hero.svg') center center / contain no-repeat;
}

/* ---------- "Trusted by" strip (sits on the dark hero) ---------- */
/* Lighten the heading so it reads on the espresso ground */
body.atelier-landing .main-home-first-section .exclusive-partners .section-title p{ color:#d8ccc0!important; }
/* Replace the BookingGo logo marquee with a tasteful category strip */
body.atelier-landing .exclusive-partners .partners-logo-slider{ display:none!important; }
body.atelier-landing .exclusive-partners .container::after{
  content:"Hair salons  ·  Brow bars  ·  Skin clinics  ·  Lash studios  ·  Barbershops";
  display:block; text-align:center; margin-top:16px;
  font-size:13px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:var(--atelier-gold-2);
}

/* ---------- Section titles / eyebrows ---------- */
body.atelier-landing .section-title span,
body.atelier-landing .section-title .sub-title,
body.atelier-landing .sub-title{
  color:var(--atelier-gold); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px;
}
body.atelier-landing .section-title h2{ color:var(--atelier-ink); }
body.atelier-landing .section-title p{ color:var(--grey-color); }

/* ---------- Cards ---------- */
body.atelier-landing .support-card-inner,
body.atelier-landing .information-card-inner,
body.atelier-landing .support-card,
body.atelier-landing .information-card,
body.atelier-landing .dedicated-card,
body.atelier-landing .price-card,
body.atelier-landing .pricing-card{
  background:#fff!important; border:1px solid var(--border-color)!important; border-radius:18px!important;
  box-shadow:0 18px 40px -30px rgba(80,50,30,.28)!important; transition:transform .18s ease, box-shadow .18s ease;
}
body.atelier-landing .support-card-inner:hover,
body.atelier-landing .information-card-inner:hover,
body.atelier-landing .support-card:hover,
body.atelier-landing .information-card:hover{
  transform:translateY(-3px); box-shadow:0 28px 54px -30px rgba(80,50,30,.4)!important;
}
body.atelier-landing .card-icon{
  background:linear-gradient(180deg,#f6ead2,#efd9b0)!important; color:#8a642a!important;
  border-radius:12px!important;
}
body.atelier-landing .card-icon svg,body.atelier-landing .card-icon i{ color:#8a642a!important; fill:#8a642a!important; }

/* ---------- Buttons ---------- */
body.atelier-landing .btn{
  background:linear-gradient(180deg,var(--atelier-gold-2),var(--atelier-gold))!important;
  color:#2b211d!important; border:none!important; border-radius:11px!important; font-weight:600;
  box-shadow:0 14px 26px -14px rgba(185,141,69,.85); transition:transform .15s ease, filter .15s ease;
}
body.atelier-landing .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#2b211d!important; }
body.atelier-landing .btn-white{
  background:#fff!important; color:var(--atelier-ink)!important; box-shadow:none;
  border:1px solid rgba(255,255,255,.6)!important;
}
body.atelier-landing .btn-secondary{
  background:transparent!important; color:#f4ece2!important; border:1px solid rgba(255,255,255,.4)!important;
  box-shadow:none;
}
body.atelier-landing .link-btn,body.atelier-landing .btn-link{
  color:var(--atelier-gold)!important; font-weight:600; text-decoration:none;
}
body.atelier-landing .link-btn:hover{ color:#8a642a!important; }

/* highlighted / featured pricing tier, if the template marks one */
body.atelier-landing .price-card.active,
body.atelier-landing .pricing-card.active,
body.atelier-landing .price-card.featured,
body.atelier-landing .popular{
  background:linear-gradient(160deg,#332329,#2b211d)!important; color:#f4ece2!important; border:none!important;
}
body.atelier-landing .price-card.active *,
body.atelier-landing .pricing-card.active *{ color:#f4ece2; }

/* ---------- Footer ---------- */
body.atelier-landing .site-footer{ background:#221a17!important; color:#c9bcb0!important; }
body.atelier-landing .site-footer h1,body.atelier-landing .site-footer h2,
body.atelier-landing .site-footer h3,body.atelier-landing .site-footer h4,
body.atelier-landing .site-footer .footer-title{ color:#f4ece2!important; }
body.atelier-landing .site-footer a{ color:#c9bcb0!important; }
body.atelier-landing .site-footer a:hover{ color:#fff!important; }
body.atelier-landing .footer-top,body.atelier-landing .footer-bottom{ border-color:rgba(255,255,255,.08)!important; }
body.atelier-landing .btn-subscibe{
  background:linear-gradient(180deg,var(--atelier-gold-2),var(--atelier-gold))!important; color:#2b211d!important; border:none!important;
}

@media (prefers-reduced-motion:reduce){
  body.atelier-landing .btn,
  body.atelier-landing .support-card-inner,
  body.atelier-landing .information-card-inner{ transition:none; }
}