/* ===========================================================
   GLACIAR MEDSPA, token system.
   Palette: Patagonian stone, glacial ice, andean copper.
   Type: Piazzolla (display) + Inter Tight (body) + IBM Plex Mono (data/eyebrows)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* neutrals, warm stone, never pure black/white */
  --paper:      #F4F1E9;
  --paper-dim:  #EAE4D4;
  --stone-900:  #1B211E;
  --stone-800:  #232B27;
  --stone-700:  #333D37;
  --stone-500:  #5C6A62;
  --stone-300:  #8E9B92;

  /* accents */
  --ice-500:    #7FA6A0;
  --ice-700:    #4C726C;
  --copper-500: #C1622B;
  --copper-600: #A24E20;
  --copper-100: #F0DCC9;

  --ok: #4C726C;

  /* surfaces */
  --bg:        var(--paper);
  --bg-dark:   var(--stone-900);
  --text:      var(--stone-900);
  --text-dim:  var(--stone-500);
  --text-inv:  var(--paper);

  /* type */
  --f-display: 'Piazzolla', 'Iowan Old Style', serif;
  --f-body:    'Inter Tight', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* scale */
  --step-eyebrow: 0.72rem;
  --step-sm:   0.9375rem;
  --step-base: 1.0625rem;
  --step-lg:   1.25rem;
  --h3:        clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --h2:        clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --h1:        clamp(2.5rem, 1.5rem + 4.5vw, 5.25rem);

  /* rhythm */
  --section-pad: clamp(4.5rem, 3.5rem + 5vw, 9rem);
  --gutter: clamp(1.75rem, 6vw, 4.5rem);
  --radius: 2px;
  --max: 1320px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--step-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family: inherit; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

em, .accent-italic{
  font-style: italic;
  font-weight: 400;
  color: var(--copper-500);
}

p{ margin:0; }

.eyebrow{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ice-700);
  display: block;
}

.section{ padding-block: var(--section-pad); }
.section-head{
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  display:flex;
  flex-direction: column;
  gap: 1rem;
}
.section-head p{ color: var(--text-dim); font-size: var(--step-lg); max-width: 40ch; }
.section--dark{ background: var(--stone-900); color: var(--paper); }
.section--dark .eyebrow{ color: var(--ice-500); }
.section--dark h2, .section--dark h3{ color: var(--paper); }
.section--dark .section-head p{ color: #B8C2BB; }
.section--tint{ background: var(--paper-dim); }

.problem-section{
  position: relative;
  background-image: linear-gradient(180deg, rgba(27,33,30,.94), rgba(27,33,30,.88)), url('images/glacier-ice-texture.jpg');
  background-size: cover;
  background-position: center;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: .95rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible{ outline: 2px solid var(--copper-500); outline-offset: 3px; }
.btn-primary{ background: var(--copper-500); color: var(--paper); }
.btn-primary:hover{ background: var(--copper-600); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--stone-700); }
.btn-ghost:hover{ border-color: var(--copper-500); color: var(--copper-500); }
.section--dark .btn-ghost,
.hero .btn-ghost,
.offer-card .btn-ghost{ color: var(--paper); border-color: #4A554E; }
.section--dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.offer-card .btn-ghost:hover{ border-color: var(--ice-500); color: var(--ice-500); }
.btn-arrow{ transition: transform .25s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(27,33,30,.92);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(244,241,233,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content: space-between;
  height: 4.5rem;
}
.brand{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; }
.brand-mark{ font-family: var(--f-display); font-size: 1.4rem; font-weight:600; letter-spacing: 0.02em; color: var(--paper); }
.brand-sub{ font-family: var(--f-mono); font-size: .62rem; letter-spacing: .18em; color: var(--ice-500); text-transform: uppercase; }

.nav-links{ display:flex; align-items:center; gap: 2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color: #D9DED8; font-size: .92rem; font-weight:500;
  position: relative; padding-block: .3rem;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--copper-500); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-links a:hover{ color: var(--paper); }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }

.header-actions{ display:flex; align-items:center; gap: 1rem; }
.lang-toggle{
  display:flex; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  border: 1px solid rgba(244,241,233,.25); border-radius: var(--radius); overflow:hidden;
}
.lang-toggle button{
  background: transparent; color:#B8C2BB; border:none; padding: .4rem .65rem; cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-toggle button[aria-pressed="true"]{ background: var(--ice-700); color: var(--paper); }

.nav-toggle{
  display:none; background:none; border:none; color: var(--paper); cursor:pointer; padding:.5rem;
}
.nav-toggle svg{ width:24px; height:24px; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  background: var(--stone-900);
  color: var(--paper);
  overflow: hidden;
  padding-block: clamp(3.5rem, 3rem + 3vw, 6rem) clamp(3rem,2.5rem + 3vw,5.5rem);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 3vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-eyebrow{ color: var(--ice-500); margin-bottom: 1.5rem; }
.hero h1{ color: var(--paper); font-size: var(--h1); }
.hero-sub{
  margin-top: 1.75rem; max-width: 34rem; font-size: var(--step-lg); color:#C7D0C9; line-height:1.6;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2.5rem; }
.hero-trust{
  margin-top: 2.75rem; display:flex; gap:.7rem; align-items:center;
  font-family: var(--f-mono); font-size: .78rem; color: var(--stone-300); letter-spacing:.02em;
}
.hero-trust span.dot{ width:5px; height:5px; border-radius:50%; background: var(--copper-500); flex:none; }

.hero-art{ position: relative; aspect-ratio: 1/1.05; margin:0; overflow:hidden; border: 1px solid var(--stone-700); }
.hero-art img{ width:100%; height:100%; object-fit:cover; filter: saturate(.85) contrast(1.03); }

.grain{
  position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none; mix-blend-mode: overlay;
}

/* ---------- place photo ---------- */
.place-photo{
  position: relative;
  margin: 0;
  height: clamp(20rem, 34vw, 32rem);
  overflow: hidden;
}
.place-photo img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 65%;
  filter: saturate(.92) contrast(1.02);
}
.place-photo figcaption{
  position: absolute; left: var(--gutter); bottom: 1.5rem;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em;
  color: var(--paper); background: rgba(27,33,30,.55); padding: .5rem .8rem;
}

/* ---------- bridge / two-audience ---------- */
.split-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--stone-700); margin-top: 2.5rem; }
.split-card{ background: var(--paper); padding: clamp(2.25rem,1.75rem+2.5vw,3.5rem); padding-bottom: clamp(3rem,2.25rem+3vw,4.5rem); }
.split-card .eyebrow{ margin-bottom: 1.1rem; }
.split-card h3{ font-size: var(--h3); margin-bottom: 1.1rem; }
.split-card p{ color: var(--text-dim); max-width: 32ch; }

/* ---------- problem list ---------- */
.problem-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,2vw,2.5rem); }
.problem-item{ border-top: 1px solid var(--stone-700); padding-top: 1.5rem; }
.problem-item h4{ font-family: var(--f-display); font-size: 1.2rem; font-weight:500; margin-bottom: .6rem; color: var(--paper); }
.problem-item p{ color: #B8C2BB; font-size: .96rem; }
.problem-bridge{ margin-top: clamp(2.5rem,3vw,4rem); font-family: var(--f-display); font-style: italic; font-size: var(--h3); color: var(--paper); max-width: 34rem; font-weight: 400; }

/* ---------- offer stack ---------- */
.offer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2vw,2rem); }
.offer-card{
  background: var(--stone-900); color: var(--paper);
  border: 1px solid var(--stone-700);
  padding: clamp(1.75rem,1.4rem+1.5vw,3rem);
  display:flex; flex-direction:column;
}
.offer-card--featured{ border-color: var(--copper-500); position:relative; }
.offer-tag{
  position:absolute; top:0; right: clamp(1.75rem,1.4rem+1.5vw,3rem); transform: translateY(-50%);
  background: var(--copper-500); color: var(--paper); font-family: var(--f-mono);
  font-size: .68rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .7rem;
}
.offer-name{ font-family: var(--f-mono); font-size: .78rem; letter-spacing:.12em; color: var(--ice-500); text-transform:uppercase; margin-bottom: .6rem; }
.offer-card h3{ color: var(--paper); font-size: var(--h3); margin-bottom: .4rem; }
.offer-card .offer-sub{ color: #9FAAA2; font-size: .92rem; margin-bottom: 1.75rem; }
.offer-list{ list-style:none; margin:0 0 1.75rem; padding:0; display:flex; flex-direction:column; gap: .85rem; }
.offer-list li{ display:flex; gap:.75rem; align-items:flex-start; font-size: .96rem; color:#D6DDD3; line-height:1.5; }
.offer-list svg{ flex:none; margin-top: .2rem; width:16px; height:16px; color: var(--copper-500); }
.offer-guarantee{
  border-top: 1px dashed var(--stone-700); padding-top: 1.25rem; margin-top:auto; margin-bottom: 1.5rem;
}
.offer-guarantee .g-label{ font-family: var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--copper-500); display:block; margin-bottom:.5rem; }
.offer-guarantee p{ font-size: .92rem; color:#C7D0C9; line-height:1.55; }
.offer-scarcity{ font-family: var(--f-mono); font-size: .74rem; color: var(--stone-300); margin-bottom: 1.5rem; }

/* ---------- treatments menu ---------- */
.menu-groups{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(2rem,3vw,3.5rem) clamp(2rem,4vw,4.5rem); }
.menu-group h3{ font-size: var(--h3); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--stone-700); }
.menu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.menu-list li{ display:flex; justify-content:space-between; gap: 1.5rem; padding-block: .95rem; border-bottom: 1px solid var(--paper-dim); }
.menu-item-name{ font-weight:600; }
.menu-item-desc{ display:block; color: var(--text-dim); font-size: .88rem; margin-top:.2rem; font-weight:400; }
.menu-item-tag{ font-family: var(--f-mono); font-size: .78rem; color: var(--ice-700); white-space:nowrap; padding-top:.15rem; }

/* ---------- process ---------- */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.25rem,2vw,2rem); counter-reset: step; }
.process-item{ position:relative; padding-top: 2.5rem; }
.process-item .p-num{ font-family: var(--f-mono); font-size: .85rem; color: var(--ice-700); position:absolute; top:0; left:0; }
.process-item h4{ font-size: 1.15rem; margin-bottom: .6rem; }
.process-item p{ color: var(--text-dim); font-size: .92rem; }
.process-item::before{
  content:''; position:absolute; top:0; left:2.6rem; right:0; height:1px; background: var(--stone-700); opacity:.3;
}

/* ---------- philosophy ---------- */
.philosophy{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,4vw,5rem); align-items:center; }
.philosophy-figure{ position:relative; margin:0; aspect-ratio: 4/5; overflow:hidden; }
.philosophy-figure img{ width:100%; height:100%; object-fit:cover; filter: saturate(.9); }
.philosophy blockquote{ font-family: var(--f-display); font-style: italic; font-size: var(--h3); font-weight:400; color: var(--text); line-height:1.35; margin: 0 0 1.75rem; }
.philosophy-body p + p{ margin-top: 1rem; }
.philosophy-body p{ color: var(--text-dim); }
.philosophy-signoff{ margin-top: 1.75rem; font-family: var(--f-mono); font-size: .8rem; color: var(--ice-700); letter-spacing:.04em; }

/* ---------- trust (no testimonials) ---------- */
.trust-block{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:start; }
.trust-block .lede{ font-family: var(--f-display); font-size: var(--h3); font-weight: 400; line-height:1.3; }
.trust-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 1.5rem; }
.trust-points li{ display:flex; gap: 1rem; }
.trust-points .t-mark{ font-family: var(--f-display); font-size:1.4rem; line-height:1; color: var(--copper-500); flex:none; }
.trust-points h5{ font-family: var(--f-body); font-size: 1rem; font-weight:600; margin:0 0 .3rem; }
.trust-points p{ color: var(--text-dim); font-size: .92rem; }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; border-top: 1px solid var(--stone-700); max-width: 52rem; }
.faq-item{ border-bottom: 1px solid var(--stone-700); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; text-align:left; cursor:pointer; padding: 1.5rem 0;
  font-family: var(--f-display); font-size: 1.15rem; color: var(--paper);
}
.faq-q .plus{ font-family: var(--f-mono); font-size:1.2rem; color: var(--ice-500); transition: transform .3s var(--ease); flex:none; }
.faq-item[data-open="true"] .plus{ transform: rotate(45deg); }
.faq-a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item[data-open="true"] .faq-a{ grid-template-rows: 1fr; }
.faq-a-inner{ overflow:hidden; min-height:0; }
.faq-a-inner-pad{ padding-bottom: 1.5rem; color:#C7D0C9; max-width: 42rem; font-size:.97rem; }

/* ---------- final CTA ---------- */
.final-cta{ text-align:left; position:relative; }
.final-cta h2{ font-size: var(--h1); max-width: 20ch; }
.final-cta-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap: 2rem; margin-top: 2.5rem; }
.final-cta-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- footer ---------- */
footer{ background: var(--stone-900); color: var(--paper); padding-block: clamp(3rem,3vw,5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,3rem); }
.footer-brand .brand-mark{ font-size: 1.6rem; }
.footer-tag{ margin-top: 1rem; color:#9FAAA2; max-width: 26ch; font-size:.92rem; }
.footer-col h6{ font-family: var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ice-500); margin: 0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ text-decoration:none; color:#D6DDD3; font-size:.92rem; }
.footer-col a:hover{ color: var(--copper-500); }
.footer-col p{ color:#D6DDD3; font-size:.92rem; }
.footer-bottom{
  margin-top: clamp(2.5rem,3vw,4rem); padding-top: 1.75rem; border-top: 1px solid rgba(244,241,233,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family: var(--f-mono); font-size:.72rem; color:#7C877F; letter-spacing:.03em;
}
.social-row{ display:flex; gap:.9rem; }
.social-row a{ color:#D6DDD3; display:flex; }
.social-row svg{ width:18px; height:18px; }
.social-row a:hover{ color: var(--copper-500); }

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--copper-500); outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width: 22rem; margin-inline:auto; aspect-ratio: 1/1; }
  .philosophy{ grid-template-columns: 1fr; }
  .philosophy-figure{ max-width: 20rem; margin-inline:auto; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .split-cards{ grid-template-columns: 1fr; }
  .problem-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .offer-grid{ grid-template-columns: 1fr; }
  .menu-groups{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: 1fr 1fr; }
  .process-item::before{ display:none; }
  .trust-block{ grid-template-columns: 1fr; }
  .final-cta-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 560px){
  :root{ --section-pad: 3.25rem; }
  .process-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction:column; }
  .menu-list li{ flex-direction:column; gap:.25rem; }
  .header-actions > a.btn{ display:none; }
}

/* mobile nav drawer */
.mobile-nav{
  position: fixed; inset:0; z-index: 200; background: var(--stone-900);
  display:flex; flex-direction:column; padding: 1.5rem var(--gutter) 2rem;
  transform: translateX(100%); transition: transform .35s var(--ease);
}
.mobile-nav[data-open="true"]{ transform: translateX(0); }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 3rem; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 1.75rem; }
.mobile-nav a{ text-decoration:none; color: var(--paper); font-family: var(--f-display); font-size: 1.75rem; }
.mobile-nav .btn{ margin-top: 2.5rem; align-self:flex-start; }