/* =========================================================
   PATRIZIA D'ANGELO BEAUTY — STYLE
   Mobile-first. Breakpoints: 600 / 900 / 1200 / 1440.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
ul{ list-style: none; padding: 0; }
h1, h2, h3{ font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }

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

/* ---------- Focus & accessibility ---------- */
:focus-visible{ outline: 2px solid var(--blush-deep); outline-offset: 3px; border-radius: 2px; }
.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--ink-inverse);
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size: var(--fs-small); transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus{ top: 12px; }
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container{
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section{ padding-block: var(--sp-10); position: relative; }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--bg-dark); color: var(--ink-inverse); }
.section-head{ max-width: 640px; margin-bottom: var(--sp-8); }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-foot{ margin-top: var(--sp-7); }

@media (max-width: 599px){
  .section{ padding-block: var(--sp-8); }
  .section-head{ margin-bottom: var(--sp-6); }
}

.kicker{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--blush-deep); font-weight: 600; margin-bottom: var(--sp-3);
}
.section--dark .kicker{ color: var(--champagne); }
.kicker::before{ content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }

.eyebrow-line{ display:flex; align-items:center; gap: var(--sp-2); }

h2.h2, .h2{ font-size: var(--fs-h2); }
h3.h3, .h3{ font-size: var(--fs-h3); }
.lede{ font-size: var(--fs-body-lg); color: var(--ink-soft); line-height: var(--lh-loose); max-width: 56ch; }
.section--dark .lede{ color: var(--ink-inverse-soft); }
.body-text{ color: var(--ink-soft); line-height: var(--lh-loose); max-width: 62ch; }
.section--dark .body-text{ color: var(--ink-inverse-soft); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 16px 30px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  min-height: 48px;
}
.btn--primary{ background: var(--ink); color: var(--ink-inverse); }
.btn--primary:hover{ background: var(--blush-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.section--dark .btn--primary{ background: var(--blush); color: var(--bg-dark); }
.section--dark .btn--primary:hover{ background: var(--champagne); }

.btn--ghost{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.section--dark .btn--ghost{ color: var(--ink-inverse); box-shadow: inset 0 0 0 1.5px var(--line-inverse); }
.section--dark .btn--ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--ink-inverse); }

.btn--sm{ padding: 10px 20px; min-height: 38px; font-size: 0.8125rem; }
.btn--block{ width: 100%; }
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

.link-quiet{
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.link-quiet:hover{ border-color: var(--ink); color: var(--ink); }

.cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding-block: var(--sp-5);
  transition: padding var(--dur-normal) var(--ease-standard), background var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

.brand{ display: flex; flex-direction: column; line-height: 1; }
.brand-name{ font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .01em; color: var(--ink); }
.brand-label{ font-size: 0.625rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--blush-deep); margin-top: 4px; }

.nav-desktop{ display: none; }
.nav-desktop ul{ display: flex; gap: var(--sp-6); }
.nav-desktop a{
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  position: relative; padding-block: 4px;
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height: 1px; background: var(--ink);
  transition: right var(--dur-normal) var(--ease-emphasized);
}
.nav-desktop a:hover{ color: var(--ink); }
.nav-desktop a:hover::after{ right: 0; }

.header-cta{ display: none; }

.site-header.is-solid{
  background: rgba(251, 246, 239, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
  padding-block: var(--sp-3);
}

.nav-toggle{
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line);
}
.nav-toggle-bars{ position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span{
  position: absolute; left: 0; width: 100%; height: 1.4px; background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), top var(--dur-fast) var(--ease-standard);
}
.nav-toggle-bars span:nth-child(1){ top: 0; }
.nav-toggle-bars span:nth-child(2){ top: 50%; margin-top: -0.7px; }
.nav-toggle-bars span:nth-child(3){ top: 100%; margin-top: -1.4px; }
.nav-open .nav-toggle-bars span:nth-child(1){ top: 50%; margin-top: -0.7px; transform: rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3){ top: 50%; margin-top: -0.7px; transform: rotate(-45deg); }

.nav-mobile{
  position: fixed; inset: 0; z-index: 490;
  background: var(--bg-dark); color: var(--ink-inverse);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-9) var(--container-pad) var(--sp-8);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard), visibility 0s linear var(--dur-normal);
}
.nav-open .nav-mobile{ opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav-mobile ul{ display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.nav-mobile a{ font-family: var(--font-display); font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 500; }
.nav-mobile-foot{ display: flex; flex-direction: column; gap: var(--sp-3); }
.nav-mobile-foot a{ color: var(--ink-inverse-soft); font-size: var(--fs-small); }

@media (min-width: 900px){
  .nav-desktop{ display: block; }
  .header-cta{ display: inline-flex; }
  .nav-toggle{ display: none; }
}

/* =========================================================
   ART PANELS — editorial gradient-mesh placeholders
   (nessuna fotografia reale disponibile: sistema grafico
   coerente pronto per essere sostituito da scatti reali)
   ========================================================= */
.art-panel{
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; isolation: isolate;
  box-shadow: var(--shadow-md);
}
.art-panel::before{ /* grain */
  content:''; position:absolute; inset:0; z-index: 2; opacity: .35; mix-blend-mode: overlay; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.art-panel::after{ /* soft vignette for depth */
  content:''; position:absolute; inset:0; z-index: 1; pointer-events:none;
  background: radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.35), transparent 60%),
              linear-gradient(200deg, rgba(34,29,24,0) 40%, rgba(34,29,24,.18) 100%);
}
.art-panel__motif{
  position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 3;
  padding: 14%;
}
.art-panel__motif svg{ width: 100%; height: 100%; overflow: visible; }
.art-panel__tag{
  position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 4;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-inverse); background: rgba(34,29,24,.32); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: var(--r-pill);
}

.art-panel--hero{ background: linear-gradient(155deg, #F1DAD3 0%, #E8D9BC 42%, #C9AF9B 78%, #8C7863 100%); }
.art-panel--hero .art-panel__motif svg{ animation: drift 26s var(--ease-standard) infinite alternate; }
.art-panel--viso{ background: linear-gradient(160deg, #F3ECE3 0%, #E3C9C0 55%, #B5766C 100%); }
.art-panel--corpo{ background: linear-gradient(160deg, #EFE6D8 0%, #C9AF9B 55%, #8C7863 100%); }
.art-panel--derma{ background: linear-gradient(160deg, #F1DAD3 0%, #D8A79E 60%, #221D18 130%); }
.art-panel--nails{ background: linear-gradient(160deg, #F3ECE3 0%, #E8D9BC 55%, #B7A392 100%); }
.art-panel--metodo{ background: linear-gradient(160deg, #221D18 0%, #4A4038 60%, #8C7863 130%); }
.art-panel--metodo .art-panel__tag{ background: rgba(248,241,231,.14); }

.art-panel--portrait{
  aspect-ratio: 3/4; background: linear-gradient(165deg, #E8D9BC 0%, #D8A79E 55%, #8C7863 100%);
  display: flex; align-items: center; justify-content: center;
}
.art-panel--portrait .monogram{
  position: relative; z-index: 3; font-family: var(--font-display); font-size: clamp(3.5rem, 14vw, 6rem);
  color: rgba(248,241,231,.92); letter-spacing: .02em;
}

@keyframes drift{ from{ transform: scale(1) rotate(0deg); } to{ transform: scale(1.06) rotate(2deg); } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative; padding-top: calc(var(--sp-10) + 64px); padding-bottom: var(--sp-9);
  overflow: hidden;
}
.hero .container{
  display: grid; gap: var(--sp-8); align-items: center;
}
.hero-copy{ position: relative; z-index: 2; }
.hero-title{
  font-size: var(--fs-display); margin-block: var(--sp-4) var(--sp-5);
  max-width: 14ch;
}
.hero-sub{ font-size: var(--fs-body-lg); color: var(--ink-soft); max-width: 42ch; margin-bottom: var(--sp-6); line-height: var(--lh-loose); }
.hero-trust{
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-7);
  font-size: var(--fs-small); color: var(--ink-faint);
}
.hero-trust strong{ color: var(--ink); font-weight: 600; }
.hero-trust .dot{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg{ width: 14px; height: 14px; color: var(--blush-deep); }

.hero-media{ position: relative; z-index: 1; }
.hero-media .art-panel{ max-width: 480px; margin-inline: auto; }
.hero-media .art-panel-accent{
  display: none;
}

.scroll-cue{
  position: absolute; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint);
}
.scroll-cue .line{ width: 1px; height: 34px; background: linear-gradient(var(--ink-faint), transparent); animation: scrollcue 2.2s var(--ease-standard) infinite; }
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin: top; opacity: 0;} 40%{ transform: scaleY(1); transform-origin: top; opacity:1;} 60%{ transform: scaleY(1); transform-origin: bottom; opacity:1;} 100%{ transform: scaleY(0); transform-origin: bottom; opacity:0;} }

@media (min-width: 900px){
  .hero .container{ grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-9); }
  .hero-title{ max-width: 12ch; }
  .hero-media{ display: flex; justify-content: center; align-items: flex-start; }
  .hero-media .art-panel{ width: 100%; max-width: 420px; }
  .hero-media .art-panel-accent{
    display: block; position: absolute; width: 46%; aspect-ratio: 4/5; z-index: 0;
    right: -6%; bottom: -8%; opacity: .9;
  }
  .scroll-cue{ display: flex; }
}

/* =========================================================
   MANIFESTO — "Non un trattamento standard. Un percorso."
   ========================================================= */
.manifesto{ text-align: center; }
.manifesto .container{ max-width: 900px; }
.manifesto-statement{
  font-size: clamp(2rem, 1.5rem + 3vw, 4.25rem);
  line-height: var(--lh-tight);
  margin-block: var(--sp-5) var(--sp-6);
}
.manifesto-statement em{ font-style: italic; color: var(--blush-deep); }

/* =========================================================
   TREATMENT SECTIONS (viso / corpo / derma / nails)
   ========================================================= */
.section-top{
  display: flex; flex-direction: column; gap: var(--sp-5);
  justify-content: space-between; margin-bottom: var(--sp-8);
}
.section-top .cta-row{ flex-shrink: 0; }

.treat-layout{ display: grid; gap: var(--sp-7); }
.treat-media{ order: -1; }
.treat-grid{ display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }

.card-treatment{
  background: var(--bg-card); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.card-treatment:hover{ box-shadow: inset 0 0 0 1px var(--taupe), var(--shadow-sm); transform: translateY(-3px); }
.card-treatment__head{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.card-treatment__name{ font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; }
.card-treatment__price{ font-size: var(--fs-small); font-weight: 600; color: var(--blush-deep); white-space: nowrap; }
.card-treatment__meta{ font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.card-treatment__desc{ font-size: var(--fs-small); color: var(--ink-soft); line-height: var(--lh-normal); }
.card-treatment__link{
  margin-top: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.card-treatment__link svg{ width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-standard); }
.card-treatment__link:hover svg{ transform: translateX(3px); }

.treat-subgroup-title{ font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: var(--sp-6) 0 var(--sp-4); }
.treat-subgroup-title:first-child{ margin-top: 0; }

.treat-note{ margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--ink-faint); }

@media (min-width: 700px){
  .treat-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px){
  .treat-layout{ grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .treat-media{ order: 0; position: sticky; top: 120px; }
  .section-top{ flex-direction: row; align-items: flex-end; }
}

/* =========================================================
   METODO — pillars
   ========================================================= */
.pillars{ display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-7); }
.pillar{ padding-top: var(--sp-5); border-top: 1px solid var(--line-inverse); }
.pillar-index{ font-family: var(--font-display); font-size: 1rem; color: var(--blush); display:block; margin-bottom: var(--sp-2); }
.pillar h3{ font-size: 1.125rem; margin-bottom: var(--sp-2); }
.pillar p{ font-size: var(--fs-small); color: var(--ink-inverse-soft); line-height: var(--lh-normal); }

.metodo-layout{ display: grid; gap: var(--sp-8); align-items: center; }

@media (min-width: 700px){
  .pillars{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .metodo-layout{ grid-template-columns: 1fr 1fr; }
  .pillars{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   PATRIZIA
   ========================================================= */
.persona-layout{ display: grid; gap: var(--sp-7); align-items: start; }
.persona-media{ max-width: 320px; }
.persona-copy .role{ font-size: var(--fs-small); font-weight: 600; color: var(--blush-deep); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-4); display:block; }
.persona-team-note{ margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-faint); }

@media (min-width: 900px){
  .persona-layout{ grid-template-columns: 320px 1fr; gap: var(--sp-9); }
}

/* =========================================================
   RISULTATI (esperienza)
   ========================================================= */
.experience{ text-align: center; }
.experience .container{ max-width: 780px; }
.experience-statement{ font-size: var(--fs-h1); margin-bottom: var(--sp-5); }

/* =========================================================
   RECENSIONI
   ========================================================= */
.rating-badge{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 14px 22px; border-radius: var(--r-pill); background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line); margin-bottom: var(--sp-7);
}
.rating-badge .stars{ display:flex; gap: 2px; color: var(--blush-deep); }
.rating-badge .stars svg{ width: 16px; height: 16px; }
.rating-badge strong{ font-size: 1rem; }
.rating-badge span{ font-size: var(--fs-small); color: var(--ink-faint); }

.review-grid{ display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.card-review{
  background: var(--bg-card); border-radius: var(--r-md); padding: var(--sp-6);
  box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: var(--sp-4);
}
.card-review .stars{ display:flex; gap: 3px; color: var(--blush-deep); }
.card-review .stars svg{ width: 14px; height: 14px; }
.card-review blockquote{ font-size: var(--fs-body-lg); font-family: var(--font-display); font-weight: 400; line-height: var(--lh-snug); }
.card-review cite{ font-style: normal; font-size: var(--fs-small); color: var(--ink-faint); }

@media (min-width: 900px){
  .review-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   COME FUNZIONA — steps
   ========================================================= */
.steps{ display: grid; gap: var(--sp-6); grid-template-columns: 1fr; counter-reset: step; }
.step{ position: relative; padding-left: 56px; }
.step-num{
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line);
}
.step h3{ font-size: 1.0625rem; margin-bottom: var(--sp-1); }
.step p{ font-size: var(--fs-small); color: var(--ink-soft); }
.step-connector{ position: absolute; left: 19px; top: 44px; bottom: -32px; width: 1px; background: var(--line); }
.step:last-child .step-connector{ display: none; }

@media (min-width: 900px){
  .steps{ grid-template-columns: repeat(4, 1fr); }
  .step-connector{ left: 20px; right: -32px; top: 19px; bottom: auto; width: auto; height: 1px; }
}

/* =========================================================
   LOCATION
   ========================================================= */
.location-layout{ display: grid; gap: var(--sp-7); }
.location-map{ border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--bg-alt); }
.location-map iframe{ width: 100%; height: 340px; border: 0; display: block; filter: grayscale(.25) contrast(1.05); }
.location-facts{ display: grid; gap: var(--sp-5); }
.fact{ display: flex; gap: var(--sp-4); }
.fact svg{ width: 20px; height: 20px; flex-shrink: 0; color: var(--blush-deep); margin-top: 2px; }
.fact h3{ font-size: var(--fs-body); font-weight: 600; margin-bottom: 2px; }
.fact p{ font-size: var(--fs-small); color: var(--ink-soft); }
.hours-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hours-table td{ padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.hours-table td:last-child{ text-align: right; color: var(--ink-soft); }
.hours-table tr.is-today td{ color: var(--ink); font-weight: 600; }

@media (min-width: 900px){
  .location-layout{ grid-template-columns: 1.2fr 0.8fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{ max-width: 760px; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none; cursor: pointer; padding: var(--sp-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--font-display); font-size: 1.125rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-icon{ position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after{ content:''; position:absolute; background: var(--ink); top: 50%; left: 50%; transition: transform var(--dur-fast) var(--ease-standard); }
.faq-icon::before{ width: 14px; height: 1.4px; transform: translate(-50%,-50%); }
.faq-icon::after{ width: 1.4px; height: 14px; transform: translate(-50%,-50%); }
.faq-item[open] .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-answer{ padding-bottom: var(--sp-5); max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--lh-loose); }

/* =========================================================
   BOOKING — WhatsApp form
   ========================================================= */
.booking{ position: relative; overflow: hidden; }
.booking-layout{ display: grid; gap: var(--sp-8); }
.booking-form{
  background: var(--bg-card); border-radius: var(--r-lg); padding: var(--sp-7);
  box-shadow: var(--shadow-lg); display: grid; gap: var(--sp-5);
}
.field{ display: grid; gap: 8px; }
.field label{ font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.field .optional{ font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea{
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
  font-size: 1rem; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; }
.field textarea{ resize: vertical; min-height: 90px; }
.field-row{ display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.field-hint{ font-size: 0.8125rem; color: var(--error); min-height: 1em; }
.booking-form-foot{ font-size: 0.8125rem; color: var(--ink-faint); text-align: center; }
.booking-success{
  display: none; text-align: center; padding: var(--sp-6) var(--sp-5);
  background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.booking-success.is-visible{ display: block; }
.booking-success svg{ width: 40px; height: 40px; color: var(--blush-deep); margin-inline: auto var(--sp-4); }

.booking-alt{ display: flex; flex-direction: column; gap: var(--sp-5); }
.booking-alt-card{ display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-inverse); }
.booking-alt-card svg{ width: 22px; height: 22px; color: var(--blush); flex-shrink: 0; }
.booking-alt-card h3{ font-size: var(--fs-body); margin-bottom: 2px; }
.booking-alt-card p{ font-size: var(--fs-small); color: var(--ink-inverse-soft); }

@media (min-width: 600px){
  .field-row{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px){
  .booking-layout{ grid-template-columns: 1fr 0.85fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding-block: var(--sp-9) var(--sp-6); }
.footer-top{ display: grid; gap: var(--sp-8); margin-bottom: var(--sp-9); }
.footer-brand .brand-name{ font-size: 1.75rem; color: var(--ink-inverse); }
.footer-brand p{ margin-top: var(--sp-4); color: var(--ink-inverse-soft); max-width: 42ch; font-size: var(--fs-small); }
.footer-cols{ display: grid; gap: var(--sp-7); grid-template-columns: 1fr 1fr; }
.footer-col h3{ font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--champagne); margin-bottom: var(--sp-4); }
.footer-col ul{ display: grid; gap: var(--sp-3); }
.footer-col a, .footer-col address{ font-style: normal; font-size: var(--fs-small); color: var(--ink-inverse-soft); }
.footer-col a:hover{ color: var(--ink-inverse); }
.footer-bottom{
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: var(--sp-6); border-top: 1px solid var(--line-inverse);
  font-size: 0.8125rem; color: var(--ink-inverse-soft);
}
.footer-disclaimer{ max-width: 60ch; }
.footer-social{ display: flex; gap: var(--sp-4); }
.footer-social a{ display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-inverse); }
.footer-social svg{ width: 16px; height: 16px; }

@media (min-width: 700px){
  .footer-cols{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px){
  .footer-top{ grid-template-columns: 1.1fr 1.6fr; }
  .footer-bottom{ flex-direction: row; align-items: center; justify-content: space-between; }
}