/* =========================================================
   v2 — new components + fixes (loaded after base/home/page CSS)
   ========================================================= */

/* ---------- accessibility helpers ---------- */
.skip-link{ position:fixed; left:12px; top:-60px; z-index:10001; background:var(--pink); color:#17090F; padding:10px 18px; border-radius:999px; font-weight:700; font-size:13px; transition:top .2s; }
.skip-link:focus{ top:12px; }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }
.muted{ color: var(--muted-2); }
.link-btn{ background:none; border:0; padding:0; color:var(--pink-soft); text-decoration:underline; text-underline-offset:3px; font:inherit; cursor:pointer; }
.section-lead{ margin:-26px 0 34px; max-width:560px; }
.btn-sm{ padding:11px 20px; font-size:12.5px; }
:focus-visible{ outline:2px solid var(--pink-soft); outline-offset:3px; }
button:disabled{ cursor:not-allowed; }
.btn:disabled{ opacity:.45; transform:none !important; box-shadow:none !important; }

/* ---------- header: theme toggle + mobile actions ---------- */
.theme-toggle{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-strong); color:var(--ivory);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--pink-soft); background:rgba(255,143,184,0.08); transform:rotate(18deg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .ic-sun{ display:none; }
[data-theme="light"] .theme-toggle .ic-sun{ display:block; }
[data-theme="light"] .theme-toggle .ic-moon{ display:none; }
.nav-mobile-actions{ display:none; align-items:center; gap:14px; }
.mobile-nav-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.mobile-nav-actions .btn{ font-family:var(--f-body); font-size:14px; color:inherit; }
.mobile-nav-actions .btn-primary{ color:#17090F; }
.mobile-nav a.is-active{ color:var(--pink-soft); }
.nav-links a.is-active{ color:var(--ivory); }
@media (max-width: 980px){
  .nav-mobile-actions{ display:flex; }
  .mobile-nav{ padding-top:110px; justify-content:flex-start; overflow-y:auto; }
  .mobile-nav > a{ font-size:34px; }
  .site-nav{ min-height:76px; }
}

/* ---------- hero extras ---------- */
.hero-stats div strong{ font-size:26px; }
a.mirror-content{ color:inherit; pointer-events:auto; }
a.mirror-content:hover h3{ color:var(--pink-soft); }
.hero-slide{ background:var(--bg-elevated-2); }
@media (max-width: 980px){ .hero{ padding-top:120px; min-height:auto; } .mirror{ cursor:auto; } }

/* ---------- "What we do": six expandable service cards ---------- */
.svc-acc{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; }
.cat-card{ min-height:0; padding:0; display:block; border-radius:var(--radius-l); }
.cat-card:hover{ transform:none; }
.cat-card > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:28px 30px;
}
.cat-card > summary::-webkit-details-marker{ display:none; }
.cat-card .cat-num{ font-family:var(--f-mono); font-size:12px; color:var(--muted-2); letter-spacing:.1em; flex-shrink:0; }
.cat-card .cat-title{ flex:1; min-width:0; }
.cat-card .cat-title h3{ font-size:26px; margin:0; }
.cat-card .cat-title small{ display:block; margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.cat-chevron{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); flex-shrink:0; position:relative; transition:transform .4s var(--ease), border-color .3s; }
.cat-chevron::before, .cat-chevron::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ivory); transition:transform .35s var(--ease); }
.cat-chevron::before{ width:12px; height:1px; transform:translate(-50%,-50%); }
.cat-chevron::after{ width:1px; height:12px; transform:translate(-50%,-50%); }
.cat-card[open]{ border-color:var(--pink); }
.cat-card[open] .cat-chevron{ transform:rotate(45deg); border-color:var(--pink); }
.cat-card > summary:hover .cat-chevron{ border-color:var(--pink-soft); }
.cat-body{ padding:0 30px 30px 62px; animation:fadein .4s var(--ease); }
.cat-subs{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.cat-subs li{ display:flex; gap:10px; align-items:baseline; font-size:14.5px; color:var(--ivory); }
.cat-subs li::before{ content:"✦"; color:var(--pink-soft); font-size:10px; flex-shrink:0; }
@media (max-width:760px){
  .svc-acc{ grid-template-columns:1fr; }
  .cat-card > summary{ padding:22px 20px; gap:14px; }
  .cat-card .cat-title h3{ font-size:22px; }
  .cat-body{ padding:0 20px 24px 20px; }
}

/* ---------- founder on the home page ---------- */
.founder-home-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center; }
.founder-home-photo{ margin:0; aspect-ratio:4/5; max-height:620px; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); position:relative; }
.founder-home-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-home-copy .founder-name{ font-size:clamp(30px,3.8vw,46px); }
.founder-home-copy .founder-title{ display:block; margin-top:10px; font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); }
.founder-home-copy .founder-bio{ margin-top:20px; font-size:16px; line-height:1.75; max-width:560px; }
@media (max-width:860px){ .founder-home-grid{ grid-template-columns:1fr; gap:30px; } .founder-home-photo{ max-width:420px; } }

/* ---------- process list + SEO copy ---------- */
ol.process{ list-style:none; margin:0; padding:0; }
.seo-copy{ max-width:820px; }
.seo-copy h2{ font-size:clamp(26px,3.2vw,38px); }
.seo-copy p{ margin-top:16px; font-size:15.5px; line-height:1.75; }
.seo-copy a{ color:var(--pink-soft); text-decoration:underline; text-underline-offset:3px; }

/* ---------- generic photo slider (About page) ---------- */
.photo-slider{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); background:var(--bg-elevated-2); }
.ps-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .9s var(--ease-soft); }
.ps-slide.is-active{ opacity:1; z-index:1; }
.ps-slide img{ width:100%; height:100%; object-fit:cover; }
.ps-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(18,11,16,0.55); backdrop-filter:blur(6px); border:1px solid rgba(248,243,239,0.2); color:#F8F3EF; font-size:20px; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.ps-arrow:hover{ background:rgba(255,46,126,0.6); }
.ps-prev{ left:12px; } .ps-next{ right:12px; }
.ps-dots{ position:absolute; left:0; right:0; bottom:62px; z-index:3; display:flex; justify-content:center; gap:8px; }
.ps-dots button{ width:7px; height:7px; border-radius:50%; background:rgba(248,243,239,0.45); transition:all .35s var(--ease); padding:0; }
.ps-dots button.is-active{ width:22px; border-radius:4px; background:var(--pink); }
.photo-slider .frame-tag{ position:absolute; z-index:3; bottom:18px; left:18px; background:rgba(18,11,16,0.6); color:#F8F3EF; backdrop-filter:blur(8px); padding:10px 16px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; }
.team-card:focus-within .team-card-inner, .team-card:focus .team-card-inner{ transform:rotateY(180deg); }
.team-initials{ display:flex; align-items:center; justify-content:center; flex:1; font-family:var(--f-display); font-size:34px; color:var(--pink-soft); }

/* ---------- services page: sub-service cards ---------- */
.svc-cat-name{ font-size:clamp(28px,3.4vw,42px); }
ol.svc-process-steps{ list-style:none; padding:0; margin:22px 0 0; }
.sub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sub-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; background:var(--bg-elevated); transition:border-color .35s, transform .45s var(--ease); }
.sub-card:hover{ border-color:var(--pink-soft); transform:translateY(-5px); }
.sub-photo{ position:relative; aspect-ratio:4/3; background:var(--bg-elevated-2); }
.sub-photo img{ width:100%; height:100%; object-fit:cover; }
.sub-badge{ position:absolute; top:12px; left:12px; background:var(--grad-signature); color:#17090F; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; font-weight:700; }
.sub-body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 20px; }
.sub-body h3{ font-size:21px; }
.sub-body p{ margin-top:10px; font-size:14px; flex:1; }
.sub-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; flex-wrap:wrap; }
.sub-duration{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted-2); }
@media (max-width:1020px){ .sub-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .sub-grid{ grid-template-columns:1fr; } .svc-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .svc-tab{ flex-shrink:0; } }

/* ---------- services page: "our standards" ---------- */
.trust-pillar{ margin-top:50px; padding-top:34px; border-top:1px solid var(--line); }
.trust-pillar:first-of-type{ margin-top:0; }
.trust-head h3{ font-size:clamp(22px,2.6vw,30px); }
.trust-head p{ margin-top:10px; max-width:620px; font-size:14.5px; }
.trust-grid{ margin-top:26px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.trust-card{ margin:0; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--bg-elevated); }
.trust-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg-elevated-2); }
.trust-card figcaption{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; }
.trust-card strong{ font-size:15px; }
.trust-card figcaption span{ font-size:13px; color:var(--muted); }

/* ---------- gallery: photo of the week ---------- */
.week-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.week-grid.only-main{ grid-template-columns:1fr; }
.week-main, .week-small{ position:relative; margin:0; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); cursor:pointer; background:var(--bg-elevated-2); }
.week-main{ aspect-ratio:4/5; max-height:680px; }
.week-side{ display:grid; grid-template-rows:repeat(3,1fr); gap:20px; }
.week-small{ min-height:150px; }
.week-main img, .week-small img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.week-main:hover img, .week-small:hover img{ transform:scale(1.04); }
.week-main figcaption, .week-small figcaption{ position:absolute; left:0; right:0; bottom:0; padding:60px 22px 20px; display:flex; flex-direction:column; gap:4px; background:linear-gradient(transparent, rgba(12,6,10,0.82)); color:#F8F3EF; }
.week-small figcaption{ padding:40px 16px 14px; }
.week-badge{ align-self:flex-start; background:var(--grad-signature); color:#17090F; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:999px; font-weight:700; margin-bottom:6px; }
.week-main figcaption strong{ font-family:var(--f-display); font-size:26px; font-weight:500; }
.week-main figcaption span:not(.week-badge){ font-size:13.5px; color:rgba(248,243,239,0.8); }
@media (max-width:860px){ .week-grid{ grid-template-columns:1fr; } .week-side{ grid-template-rows:none; grid-template-columns:repeat(3,1fr); } .week-small{ min-height:0; aspect-ratio:3/4; } .week-small figcaption strong{ font-size:12px; } }

/* ---------- contact: FAQ as native <details> ---------- */
.faq-list{ border-top:1px solid var(--line); margin-top:20px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 6px; }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary h3{ font-size:18px; font-family:var(--f-body); font-weight:600; }
.faq-item p{ padding:0 6px 26px; max-width:640px; font-size:14.5px; }
.faq-item[open] .svc-plus{ transform:rotate(45deg); border-color:var(--pink); }
.form-status.is-error{ border-color:rgba(255,107,107,0.45); color:#FF6B6B; }
.field input.is-invalid, .field textarea.is-invalid{ border-color:#FF6B6B; }

/* ---------- booking pop-up fixes ---------- */
.b-loading{ padding:22px 0; text-align:center; font-size:13px; color:var(--muted-2); grid-column:1/-1; }
.b-error{ display:none; margin-top:14px; padding:11px 15px; border-radius:var(--radius-s); border:1px solid rgba(255,107,107,0.4); color:#FF6B6B; font-size:13px; }
.b-error.show{ display:block; }
.b-error button{ color:inherit; text-decoration:underline; margin-left:6px; font:inherit; }
.price-notice{ margin-top:14px; font-size:12.5px; line-height:1.6; padding:12px 16px; border-radius:var(--radius-s); border:1px dashed var(--gold); color:var(--gold-soft); }
.b-summary .b-price-row{ display:flex; justify-content:space-between; gap:14px; }
.b-summary .b-total-row{ margin-top:8px; padding-top:10px; border-top:1px dashed var(--line-strong); display:flex; justify-content:space-between; gap:14px; color:var(--ivory); }
.svc-check-card .meta{ display:block; }
.booking-modal{ max-height:90vh; max-height:90dvh; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
@media (max-width:560px){
  .booking-overlay{ padding:0; align-items:flex-end; }
  .booking-modal{ max-width:none; max-height:94vh; max-height:94dvh; border-radius:var(--radius-l) var(--radius-l) 0 0; padding:30px 20px calc(30px + env(safe-area-inset-bottom)); }
  .svc-check-list{ max-height:42vh; }
  .b-nav{ position:sticky; bottom:-30px; background:var(--bg-elevated); padding:14px 0 4px; margin-top:20px; z-index:2; }
}
.field input[type="date"]{ min-height:48px; cursor:pointer; }
.cat-card::before{ pointer-events:none; }

/* ---------- logo: dark skin / light skin ---------- */
.brand-logo.logo-for-light{ display:none; }
[data-theme="light"] .brand-logo.logo-for-dark{ display:none; }
[data-theme="light"] .brand-logo.logo-for-light{ display:block; }
.brand-logo.is-fallback{ filter:brightness(.28) contrast(1.35) saturate(1.2); }   /* stand-in until images/tg-logo-dark.png is uploaded */

/* ---------- About: certificates ---------- */
.cert-wrap{ margin-top:64px; }
.cert-title{ font-size:clamp(20px,2.4vw,26px); margin-bottom:6px; }
.cert-grid-v2{ margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.cert-card{ display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; }
.cert-card.has-photo{ padding:0 0 18px; overflow:hidden; }
.cert-card.has-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:14px; background:var(--bg-elevated-2); transition:transform .6s var(--ease); }
.cert-card.has-photo:hover img{ transform:scale(1.04); }
.cert-card.has-photo strong, .cert-card.has-photo span{ padding:0 14px; }

/* ---------- DESKTOP layout fixes (phones/tablets unchanged) ---------- */
@media (min-width:981px){
  /* Services → "What goes on your skin": text column on the left, cards fill the rest */
  .trust-pillar{ display:grid; grid-template-columns:minmax(260px,0.8fr) 2fr; gap:56px; align-items:start; }
  .trust-grid{ margin-top:0; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .trust-card img{ aspect-ratio:16/10; }

  /* About → "From one chair to a studio": four steps across the full width */
  .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding-left:0; padding-top:34px; }
  .timeline::before{ left:0; right:0; top:4px; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg,var(--pink),transparent); }
  .t-item{ padding-bottom:0; }
  .t-item::before{ left:0; top:-34px; }
  .t-item p{ max-width:none; }
}