/* =============================================================
   BEAUTY & WELLNESS COUNTER — style.css
   Palette: porcelain paper, deep botanical green, three brand hues
   Type:    Fraunces (display) + Manrope (body)
   ============================================================= */

:root{
  --paper:      #F7F5F0;
  --paper-alt:  #EFEBE2;
  --ink:        #20241F;
  --ink-soft:   #4C534B;
  --forest:     #2E4A39;
  --forest-deep:#22382B;
  --line:       #DCD6C8;
  --white:      #FFFFFF;

  /* brand hues — the group's "spectrum" */
  --sl:  #3E6C8E;   /* skinlogic — dermo blue     */
  --am:  #6D4A63;   /* amerín — plum              */
  --msf: #5E7C4B;   /* MY SKIN'S FUTURE — botanic */

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(32,36,31,.08);
  --maxw: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--forest); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--forest-deep); }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 1.4rem; }
.container.narrow{ max-width:820px; }

/* ---------- Typography ---------- */
.display, .display-2{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--ink);
  line-height:1.12;
  margin:0 0 1.1rem;
}
.display{ font-size:clamp(2.3rem, 5.2vw, 3.9rem); }
.display-2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }

.kicker{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--forest);
  margin:0 0 .9rem;
}
.lead{ font-size:1.2rem; line-height:1.65; color:var(--ink); }
.muted{ color:var(--ink-soft); font-size:.95rem; }
p{ margin:0 0 1.1rem; }

/* ---------- Signature: the brand spectrum bar ---------- */
.spectrum{
  height:4px;
  background:linear-gradient(90deg,
    var(--sl) 0 33.4%,
    var(--am) 33.4% 66.7%,
    var(--msf) 66.7% 100%);
}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--forest); color:#fff; padding:.6rem 1rem; z-index:200;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--forest); outline-offset:2px; border-radius:3px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,245,240,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:.9rem; padding-bottom:.9rem;
}
.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); }
.logo-mark{ display:flex; gap:3px; }
.logo-mark i{ width:6px; height:26px; border-radius:3px; display:block; }
.logo-mark i:nth-child(1){ background:var(--sl); }
.logo-mark i:nth-child(2){ background:var(--am); height:32px; }
.logo-mark i:nth-child(3){ background:var(--msf); }
.logo-text{
  font-family:var(--font-display);
  font-size:.95rem; line-height:1.15; letter-spacing:.04em;
}
.logo-text em{ font-style:italic; color:var(--forest); }
.logo-text span{ letter-spacing:.34em; font-size:.72rem; color:var(--ink-soft); }

.site-nav ul{
  display:flex; align-items:center; gap:1.35rem;
  list-style:none; margin:0; padding:0;
}
.site-nav{ display:flex; align-items:center; gap:1.6rem; }
.nav-link{
  text-decoration:none; color:var(--ink-soft);
  font-weight:600; font-size:.92rem; padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.nav-link:hover{ color:var(--ink); }
.nav-link.is-active{ color:var(--ink); border-bottom-color:var(--forest); }

.lang-switch{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
}
.lang-switch a{
  padding:.3rem .75rem; font-size:.8rem; font-weight:700;
  text-decoration:none; color:var(--ink-soft);
}
.lang-switch a.is-on{ background:var(--forest); color:#fff; }

.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding:5rem 0 4.5rem; }
.hero-grid{
  display:grid; grid-template-columns:1.25fr .85fr; gap:3.5rem; align-items:center;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

.hero-panel{ display:grid; gap:1rem; }
.panel-card{
  background:var(--white);
  border:1px solid var(--line);
  border-left:6px solid var(--forest);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.15rem 1.4rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.panel-card span{ font-family:var(--font-display); font-size:1.25rem; }
.panel-card small{ color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; }
.card-sl{ border-left-color:var(--sl); transform:translateX(0); }
.card-am{ border-left-color:var(--am); transform:translateX(1.6rem); }
.card-msf{ border-left-color:var(--msf); transform:translateX(3.2rem); }

/* ---------- Sections ---------- */
.section{ padding:4.5rem 0; }
.section-alt{ background:var(--paper-alt); }
.page-head{ padding:4.5rem 0 1.5rem; }

.two-col{
  display:grid; grid-template-columns:.9fr 1.3fr; gap:3.5rem; align-items:start;
}

.stats{ display:flex; gap:2.4rem; margin-top:2rem; }
.stat strong{
  display:block; font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; color:var(--forest);
}
.stat span{ display:block; margin-top:.4rem; color:var(--ink-soft); font-size:.92rem; max-width:11rem; }

.founder-quote{
  margin:2.2rem 0 0; padding:1.6rem 1.9rem;
  border-left:4px solid var(--forest);
  background:var(--white); border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow);
}
.founder-quote p{
  font-family:var(--font-display); font-size:1.28rem; line-height:1.5; margin:0;
}
.founder-quote p + p{ margin-top:.6rem; }

/* ---------- CTA band ---------- */
.section-cta{ padding:3.5rem 0 5rem; }
.cta-band{
  background:var(--forest-deep); color:#EDF2EC;
  border-radius:calc(var(--radius) + 6px);
  padding:3.2rem clamp(1.6rem,5vw,4rem);
  text-align:center;
}
.cta-band .display-2{ color:#fff; }
.cta-band p{ max-width:52rem; margin:.4rem auto 1.6rem; color:#D9E2D6; }
.cta-band .btn-solid{ background:#fff; color:var(--forest-deep); }
.cta-band .btn-solid:hover{ background:var(--paper); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:.78rem 1.5rem; border-radius:999px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  font-family:var(--font-body);
}
.btn-solid{ background:var(--forest); color:#fff; }
.btn-solid:hover{ background:var(--forest-deep); color:#fff; }
.btn-ghost{ background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-ghost:hover{ background:var(--forest); color:#fff; }

.linklike{
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit; font:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}

/* ---------- Brands page ---------- */
.brand-grid{
  display:grid; grid-template-columns:.85fr 1.3fr; gap:3rem; align-items:start;
}
.brand-swatch{ width:64px; height:8px; border-radius:4px; margin-bottom:1.1rem; }
.brand-name{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.6rem); margin:0 0 .8rem; line-height:1.1;
}
.brand-tag{ color:var(--ink-soft); font-size:1.02rem; }
.brand-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }

.brand-sl  .brand-swatch{ background:var(--sl); }
.brand-am  .brand-swatch{ background:var(--am); }
.brand-msf .brand-swatch{ background:var(--msf); }
.brand-sl  .brand-name{ color:var(--sl); }
.brand-am  .brand-name{ color:var(--am); }
.brand-msf .brand-name{ color:var(--msf); }
.brand-sl  .btn-solid{ background:var(--sl); }   .brand-sl  .btn-solid:hover{ background:#315773; }
.brand-am  .btn-solid{ background:var(--am); }   .brand-am  .btn-solid:hover{ background:#583A50; }
.brand-msf .btn-solid{ background:var(--msf); }  .brand-msf .btn-solid:hover{ background:#4C653C; }
.brand-sl  .btn-ghost{ color:var(--sl); border-color:var(--sl); }   .brand-sl  .btn-ghost:hover{ background:var(--sl); color:#fff; }
.brand-am  .btn-ghost{ color:var(--am); border-color:var(--am); }   .brand-am  .btn-ghost:hover{ background:var(--am); color:#fff; }
.brand-msf .btn-ghost{ color:var(--msf); border-color:var(--msf); } .brand-msf .btn-ghost:hover{ background:var(--msf); color:#fff; }

/* ---------- Collaborate cards ---------- */
.collab-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.6rem;
}
.collab-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.9rem 2rem;
}
.collab-card h2{
  font-family:var(--font-display); font-weight:500;
  font-size:1.45rem; margin:0 0 .9rem; line-height:1.25;
}
.collab-card-wide{ grid-column:1 / -1; }

.pill-list{ list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pill-list li{
  background:var(--paper-alt); border:1px solid var(--line);
  border-radius:999px; padding:.32rem .95rem; font-size:.9rem; font-weight:600;
}

.brand-list{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.6rem; }
.brand-list li{ display:flex; align-items:center; gap:.65rem; font-weight:600; }

.check-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:.7rem 1.6rem;
}
.check-list li{ position:relative; padding-left:1.7rem; font-weight:600; }
.check-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.95rem; height:.55rem;
  border-left:2.5px solid var(--forest); border-bottom:2.5px solid var(--forest);
  transform:rotate(-45deg);
}

.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.dot-sl{ background:var(--sl); } .dot-am{ background:var(--am); } .dot-msf{ background:var(--msf); }

/* ---------- Forms ---------- */
.contact-form{ margin-top:2rem; display:grid; gap:1.1rem; }
.form-row label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:.35rem; }
.form-row input, .form-row textarea{
  width:100%; padding:.8rem 1rem;
  border:1.5px solid var(--line); border-radius:10px;
  background:var(--white); color:var(--ink);
  font:inherit; font-size:1rem;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(46,74,57,.15);
}
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin:0; }
.hp-field{ position:absolute !important; left:-9999px; height:0; overflow:hidden; margin:0; }

.form-msg{ padding:.9rem 1.2rem; border-radius:10px; font-weight:600; margin-top:1.4rem; }
.form-msg-ok{ background:#E4EFE3; border:1px solid #B9D2B6; color:#274A2B; }
.form-msg-err{ background:#F7E6E3; border:1px solid #E0BBB4; color:#6E322A; }

/* ---------- Legal pages ---------- */
.legal-body h2{
  font-family:var(--font-display); font-weight:500;
  font-size:1.35rem; margin:2.2rem 0 .7rem;
}
.legal-body ul{ padding-left:1.3rem; }
.legal-body li{ margin-bottom:.45rem; }
.legal-table{
  width:100%; border-collapse:collapse; margin:1rem 0 1.2rem; font-size:.93rem;
}
.legal-table th, .legal-table td{
  text-align:left; padding:.6rem .8rem; border:1px solid var(--line); vertical-align:top;
}
.legal-table th{ background:var(--paper-alt); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest-deep); color:#CBD6C8; margin-top:2rem; }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem;
  padding-top:3.5rem; padding-bottom:2.5rem;
}
.footer-logo{
  font-family:var(--font-display); font-size:1.15rem; color:#fff;
  letter-spacing:.05em; margin:0 0 .8rem;
}
.footer-logo em{ font-style:italic; color:#9FB89A; }
.footer-tagline{ font-size:.93rem; max-width:26rem; }
.footer-brands-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.45rem; font-size:.92rem; }
.footer-brands-list li{ display:flex; align-items:center; gap:.6rem; }
.footer-col h2{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:#8FA98A; margin:0 0 1rem; font-weight:700;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.93rem; }
.footer-col a, .footer-col .linklike{ color:#DCE5DA; text-decoration:none; }
.footer-col a:hover, .footer-col .linklike:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:1.2rem; padding-bottom:1.4rem;
  font-size:.85rem; color:#9DB199;
}
.footer-bottom p{ margin:0; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:150;
  max-width:720px; margin:0 auto;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 18px 50px rgba(32,36,31,.22);
  padding:1.3rem 1.5rem;
}
.cookie-title{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 .35rem; }
.cookie-text p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.cookie-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.cookie-actions .btn{ padding:.55rem 1.2rem; font-size:.88rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .two-col, .brand-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .card-am, .card-msf{ transform:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .collab-grid{ grid-template-columns:1fr; }
}

@media (max-width: 820px){
  .nav-toggle{
    display:flex; align-items:center; gap:.55rem;
    background:none; border:1.5px solid var(--line); border-radius:999px;
    padding:.45rem 1rem; cursor:pointer; font:inherit; font-weight:700; font-size:.85rem;
    color:var(--ink);
  }
  .nav-toggle-bars{ display:grid; gap:4px; }
  .nav-toggle-bars i{ width:18px; height:2px; background:var(--ink); display:block; border-radius:2px; }

  .site-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:1.2rem 1.4rem 1.5rem;
    flex-direction:column; align-items:flex-start; gap:1.2rem;
    box-shadow:0 18px 30px rgba(32,36,31,.12);
  }
  .site-nav.is-open{ display:flex; }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:.9rem; width:100%; }
  .nav-link{ font-size:1.05rem; }
  .header-inner{ position:relative; }
}

@media (max-width: 640px){
  .hero{ padding:3.2rem 0 3rem; }
  .section, .page-head{ padding:3rem 0; }
  .page-head{ padding-bottom:1rem; }
  .form-row-split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .stats{ gap:1.6rem; }
  .cookie-banner{ left:.6rem; right:.6rem; bottom:.6rem; }
  .collab-card{ padding:1.5rem 1.4rem; }
}