/* ==========================================================================
   DRA. MARIANNA ÁGATHA OLIVEIRA FARIA — Design System
   Harmonização Facial & Glútea · Goiânia
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* color */
  --c-bg:        #FBFAF7;
  --c-bg-alt:    #F3EFE7;
  --c-white:     #FFFFFF;
  --c-ink:       #17150F;
  --c-ink-soft:  #2E2A22;
  --c-gray:      #837A68;
  --c-gray-2:    #ACA391;
  --c-line:      #E4DECD;
  --c-line-on-ink: rgba(251,250,247,0.14);
  --c-gold:      #C9A14A;
  --c-gold-deep: #9C7A34;
  --c-gold-pale: #E7D6AC;
  --c-gold-mist: rgba(201,161,74,0.12);
  --c-text-on-ink: #F3EEE2;
  --c-text-on-ink-soft: rgba(243,238,226,0.66);

  /* type */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --f-body: 'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* fluid type scale */
  --fs-eyebrow: 0.72rem;
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --fs-lg:      clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --fs-h3:      clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2:      clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
  --fs-h1:      clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --fs-display: clamp(3rem, 2rem + 4.6vw, 6.4rem);

  /* layout */
  --container: 1240px;
  --container-narrow: 780px;
  --gutter: clamp(1.5rem, 4vw, 4.5rem);
  --section-pad: clamp(5rem, 6vw + 2rem, 9rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 320ms;
  --dur-slow: 900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
svg{ display:block; }

:focus-visible{
  outline: 1.5px solid var(--c-gold-deep);
  outline-offset: 3px;
}

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

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  display:flex;
  align-items:center;
  gap: 0.75em;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--c-gold-deep);
  display:inline-block;
}
.eyebrow--on-ink{ color: var(--c-gold-pale); }
.eyebrow--on-ink::before{ background: var(--c-gold-pale); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }

.serif{ font-family: var(--f-display); }
.italic{ font-style: italic; }

h1, .h1{ font-family: var(--f-display); font-weight:400; font-size: var(--fs-h1); line-height:1.06; letter-spacing:-0.01em; }
h2, .h2{ font-family: var(--f-display); font-weight:400; font-size: var(--fs-h2); line-height:1.12; letter-spacing:-0.01em; }
h3, .h3{ font-family: var(--f-display); font-weight:400; font-size: var(--fs-h3); line-height:1.24; }

.lede{ font-size: var(--fs-lg); line-height:1.55; color: var(--c-ink-soft); font-weight:300; }
.muted{ color: var(--c-gray); }
.on-ink{ color: var(--c-text-on-ink); }
.on-ink .muted, .on-ink-soft{ color: var(--c-text-on-ink-soft); }

/* ---------- Layout ---------- */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container--narrow{ max-width: var(--container-narrow); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-pad); position:relative; }
.section--ink{ background: var(--c-ink); color: var(--c-text-on-ink); }
.section--alt{ background: var(--c-bg-alt); }
.section--tight{ padding-block: clamp(3.5rem, 4vw + 1rem, 6rem); }

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
  filter: blur(6px);
}
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }
.reveal-scale{ opacity:0; transform:scale(.96); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:none; }
.reveal-line{ opacity:0; transform: translateX(-16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-line.is-visible{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: 0.95em 1.9em;
  font-family: var(--f-body); font-size: 0.86rem; font-weight:600;
  letter-spacing:.03em;
  border-radius: 999px;
  transition: all var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn--gold{ background: var(--c-ink); color: var(--c-text-on-ink); }
.btn--gold:hover{ background: var(--c-gold-deep); color: var(--c-white); transform: translateY(-1px); }
.btn--ghost{ border:1px solid var(--c-line); color: var(--c-ink); background:transparent; }
.btn--ghost:hover{ border-color: var(--c-gold-deep); color: var(--c-gold-deep); }
.btn--ghost.on-ink{ border-color: var(--c-line-on-ink); color: var(--c-text-on-ink); }
.btn--ghost.on-ink:hover{ border-color: var(--c-gold-pale); color: var(--c-gold-pale); }
.btn--sm{ padding: 0.7em 1.4em; font-size: .78rem; }
.btn svg{ width:15px; height:15px; }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: var(--c-gold);
  z-index:1000;
  transition: width 80ms linear;
}

/* ---------- Navbar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding: 1.6rem 0;
  transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(251,250,247,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 1.05rem 0;
  border-bottom-color: var(--c-line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav__mark{ font-family: var(--f-display); font-size:1.18rem; letter-spacing:.01em; }
.nav__mark span{ color: var(--c-gold-deep); font-style:italic; }
.nav__links{ display:flex; align-items:center; gap: clamp(1.2rem, 2vw, 2.4rem); }
.nav__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.02em; color: var(--c-ink-soft);
  position:relative; padding-block:.3rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0%;
  background: var(--c-gold-deep); transition: width var(--dur-fast) var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:.8rem; }
.nav__toggle{ display:none; }

@media (max-width: 900px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background: var(--c-ink); color: var(--c-text-on-ink);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.8rem; padding: 3rem;
    transform: translateX(100%); transition: transform var(--dur-fast) var(--ease);
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__links a{ color: var(--c-text-on-ink); font-size:1.05rem; }
  .nav__cta{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; gap:5px; z-index:950; position:relative;
    width:26px;
  }
  .nav__toggle span{ height:1px; width:100%; background: var(--c-ink); transition: all var(--dur-fast) var(--ease); }
  .nav__toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: 7rem;
  position:relative;
  overflow:hidden;
}
.hero__grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero__eyebrow{ margin-bottom: 1.6rem; }
.hero__title{ max-width: 15ch; }
.hero__title em{ font-style:italic; color: var(--c-gold-deep); }
.hero__lede{ margin-top: 1.6rem; max-width: 46ch; }
.hero__actions{ display:flex; gap:1rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero__meta{ margin-top: 3.4rem; display:flex; gap: clamp(1.6rem,4vw,3.2rem); flex-wrap:wrap; }
.hero__meta div{ font-family: var(--f-mono); font-size:.72rem; color:var(--c-gray); letter-spacing:.04em; }
.hero__meta strong{ display:block; font-family:var(--f-display); font-style:italic; font-size:1.05rem; color:var(--c-ink); margin-top:.25rem; }

.hero__art video {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.hero__art svg{ width:100%; height:auto; }
.hero__art-path{
  fill:none; stroke: var(--c-gold-deep); stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: draw 2.6s var(--ease) 0.4s forwards;
}
.hero__art-dot{ opacity:0; animation: fadeIn 1s var(--ease) 2.4s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

.hero__scroll{
  position:absolute; bottom: 2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--c-gray);
}
.hero__scroll-line{ width:1px; height:34px; background: linear-gradient(var(--c-gold-deep), transparent); }

@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:280px; margin-inline:auto; }
}


/* ---------- Manifesto / Filosofia (ink, full statement) ---------- */
.manifesto{ text-align:center; }
.manifesto__quote{
  max-width: 20ch; margin-inline:auto; font-size: var(--fs-display); font-weight:300; line-height:1.08;
}
.manifesto__quote em{ font-style:italic; color: var(--c-gold); }
.manifesto__attr{ margin-top:2.2rem; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color: var(--c-text-on-ink-soft); text-transform:uppercase; }

/* ---------- Método Makeover ---------- */
.method__head{ max-width: 640px; }
.method__grid{
  margin-top: 4.5rem;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--c-line-on-ink);
  border:1px solid var(--c-line-on-ink);
}
.method__cell{ background: var(--c-ink); padding: clamp(1.8rem,3vw,2.6rem); }
.method__cell .eyebrow{ margin-bottom:1.2rem; }
.method__cell h4{ font-family:var(--f-display); font-weight:400; font-style:italic; font-size:1.3rem; margin-bottom:.8rem; }
.method__cell p{ font-size:.92rem; color: var(--c-text-on-ink-soft); line-height:1.65; }
@media (max-width: 820px){ .method__grid{ grid-template-columns:1fr; } }

/* ---------- Pilares ---------- */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(2rem,4vw,3.5rem); margin-top:4rem; }
.pillar__num{ font-family:var(--f-display); font-style:italic; font-size:1.3rem; color: var(--c-gold-deep); margin-bottom:1.4rem; display:block; }
.pillar h3{ margin-bottom:1rem; }
.pillar p{ color: var(--c-ink-soft); }
.pillar__list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.pillar__list li{ font-size:.86rem; color:var(--c-gray); padding-left:1.1rem; position:relative; }
.pillar__list li::before{ content:"—"; position:absolute; left:0; color:var(--c-gold-deep); }
@media (max-width: 820px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Jornada (timeline) ---------- */
.journey{ margin-top: 4.5rem; position:relative; }
.journey__track{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(200px,1fr);
  gap: 0; overflow-x:auto; padding-bottom: 1rem; scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.journey__track::-webkit-scrollbar{ display:none; }
.journey__step{ position:relative; padding-right: clamp(1.2rem,3vw,2.5rem); scroll-snap-align:start; }
.journey__step::before{
  content:""; position:absolute; top:10px; left:0; right: clamp(1.2rem,3vw,2.5rem); height:1px; background: var(--c-line);
}
.journey__step:last-child::before{ right:50%; }
.journey__num{ font-family:var(--f-mono); font-size:.72rem; color: var(--c-gold-deep); position:relative; padding-top:1.6rem; display:inline-block; }
.journey__num::before{
  content:""; position:absolute; top:6px; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--c-bg); border:1.5px solid var(--c-gold-deep);
}
.journey__step h4{ font-family:var(--f-display); font-weight:400; font-size:1.15rem; margin-top:.9rem; }
.journey__step p{ margin-top:.5rem; font-size:.84rem; color:var(--c-gray); max-width:26ch; }

/* ---------- Procedimentos ---------- */
.proc__grid{ margin-top: 3.5rem; display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.proc__card{
  background: var(--c-bg); padding: 2.1rem 1.9rem; min-height:168px;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem;
  transition: background var(--dur-fast) var(--ease);
}
.proc__card:hover{ background: var(--c-white); }
.proc__card:hover .proc__arrow{ transform: translate(3px,-3px); opacity:1; }
.proc__card h4{ font-family:var(--f-display); font-weight:400; font-size:1.15rem; }
.proc__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.proc__arrow{ opacity:.4; transition: all var(--dur-fast) var(--ease); flex-shrink:0; margin-top:.3rem; }
.proc__tag{ margin-top:var(--f-mono); font-size:.68rem; color:var(--c-black); letter-spacing:.04em; }
@media (max-width: 900px){ .proc__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .proc__grid{ grid-template-columns: 1fr; } }

/* ---------- Resultados ---------- */
.results__grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem,5vw,5rem); align-items:center; }
.results__frame {
  width: 100%; /* Garante o preenchimento correto da coluna do grid */
  aspect-ratio: 5/5; 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  position: relative;
  
  /* ESTAS DUAS LINHAS CORRIGEM A IMAGEM ESTICADA: */
  object-fit: cover; 
  object-position: center; /* Mantém o corte no centro da foto do paciente */
  
  /* Mantém a suavização contra serrilhado do passo anterior */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

.results__frame::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5), transparent 60%);
}
.results__stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2.2rem; margin-top: 2.8rem; }
.results__stat strong{ display:block; font-family:var(--f-display); font-style:italic; font-size: var(--fs-h3); color: var(--c-gold-deep); }
.results__stat span{ font-size:.82rem; color: var(--c-gray); }
@media (max-width: 820px){ .results__grid{ grid-template-columns:1fr; } .results__frame{ max-width:360px; margin-inline:auto; } }

/* ---------- Depoimentos ---------- */
.testi{ position:relative; }
.testi__track{ display:flex; overflow-x:auto; gap: 1.5px; scroll-snap-type:x mandatory; margin-top:3rem; scrollbar-width:none; }
.testi__track::-webkit-scrollbar{ display:none; }
.testi__card{
  flex: 0 0 min(560px,86vw); scroll-snap-align:start;
  background: var(--c-white); border:1px solid var(--c-line); padding: clamp(2rem,3vw,3rem);
}
.testi__quote{ font-family:var(--f-display); font-style:italic; font-size:1.35rem; line-height:1.5; color: var(--c-ink-soft); }
.testi__attr{ margin-top:1.6rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; color: var(--c-gray); text-transform:uppercase; }
.testi__nav{ display:flex; gap:.7rem; margin-top:2rem; }
.testi__dot{ width:6px; height:6px; border-radius:50%; background: var(--c-line); transition: background var(--dur-fast); }
.testi__dot.is-active{ background: var(--c-gold-deep); }

/* ---------- Noivas ---------- */
.noivas{
  border: 1px solid var(--c-gold-mist);
  background: linear-gradient(150deg, var(--c-white), var(--c-bg-alt));
  padding: clamp(2.5rem,5vw,5rem);
  display:grid; grid-template-columns: 1fr auto; gap:3rem; align-items:center;
}
.noivas h2{ max-width:14ch; }
@media (max-width: 760px){ .noivas{ grid-template-columns:1fr; text-align:left; } }

/* ---------- Sobre ---------- */
.about__grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem,5vw,5.5rem); align-items:center; }

.about__frame{
  width: 100%; /* Garante que ela ocupe o espaço correto na coluna */
  aspect-ratio: 3/4; 
  border-radius: var(--radius-md); 
  overflow:hidden;
  position:relative;
  
  /*ADAPTA AO 3/4 */
  object-fit: cover; 
  object-position: center; /* Mantém o foco do corte no meio da foto */

  
}

.about__credentials{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem; }
.about__credentials li{ display:flex; gap:1rem; font-size:.9rem; padding-bottom:1rem; border-bottom:1px solid var(--c-line); color:var(--c-ink-soft); }
.about__credentials li span{ font-family:var(--f-mono); font-size:.7rem; color:var(--c-gold-deep); min-width:2.4rem; }

@media (max-width: 820px){ 
  .about__grid{ grid-template-columns:1fr; } 
  .about__frame{ max-width:320px; margin-inline:auto; } 
}

/* ---------- FAQ ---------- */
.faq{ max-width: var(--container-narrow); margin-inline:auto; }
.faq__item{ border-bottom: 1px solid var(--c-line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding: 1.7rem 0; text-align:left; font-family:var(--f-display); font-size:1.15rem;
}
.faq__icon{ position:relative; width:16px; height:16px; flex-shrink:0; }
.faq__icon::before, .faq__icon::after{ content:""; position:absolute; background: var(--c-gold-deep); transition: transform var(--dur-fast) var(--ease); }
.faq__icon::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.faq__icon::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.faq__item.is-open .faq__icon::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq__a{ max-height:0; overflow:hidden; transition: max-height var(--dur-fast) var(--ease); }
.faq__a p{ padding-bottom: 1.7rem; color: var(--c-gray); max-width:60ch; font-size:.95rem; line-height:1.7; }
.faq__item.is-open .faq__a{ max-height: 320px; }

/* ---------- Contato ---------- */
.contact{ text-align:center; }
.contact h2{ max-width:16ch; margin-inline:auto; }
.contact__actions{ display:flex; gap:1.2rem; justify-content:center; margin-top:2.6rem; flex-wrap:wrap; }
.contact__note{ margin-top:2.2rem; }
/* Videos*/
/*
.vid{ position:relative; }
.vid__track{ display:flex; overflow-x:auto; gap: 1.5px; scroll-snap-type:x mandatory; margin-top:3rem; scrollbar-width:none; }
.vid__track::-webkit-scrollbar{ display:none; }
.vid__card{
  flex: 0 0 min(560px,86vw); scroll-snap-align:start;
  background: var(--c-white); border:1px solid var(--c-line); padding: clamp(2rem,3vw,3rem);
}
.vid__quote{ font-family:var(--f-display); font-style:italic; font-size:1.35rem; line-height:1.5; color: var(--c-ink-soft); }
.vid__attr{ margin-top:1.6rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; color: var(--c-gray); text-transform:uppercase; }
.vid__nav{ display:flex; gap:.7rem; margin-top:2rem; }
.vid__dot{ width:6px; height:6px; border-radius:50%; background: var(--c-line); transition: background var(--dur-fast); }
.vid__dot.is-active{ background: var(--c-gold-deep); }
*/

/*====== Videos =======*/
/*
.vid__container {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
*/
.vid__container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 100px;
  width: 100%;
  max-width: 700px;
  margin: auto;
}

.vid__container video{
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 18px;
   box-shadow: 0 15px 35px rgba(0,0,0,.25);

}

/*
width: 100%;
    max-width: 320px;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35); */

@media (max-width: 768px){
  .vid__container{
    grid-template-columns: 1fr;
    max-width: 320px;

  }

}


/* ---------- Footer ---------- */
.footer{ background: var(--c-ink); color: var(--c-text-on-ink-soft); padding-block: 4.5rem 2rem; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 2.5rem; padding-bottom: 3rem; border-bottom:1px solid var(--c-line-on-ink); }
.footer__mark{ font-family:var(--f-display); font-size:1.3rem; color: var(--c-text-on-ink); }
.footer__mark span{ font-style:italic; color: var(--c-gold); }
.footer__desc{ margin-top:1rem; max-width:32ch; font-size:.85rem; }
.footer__col h5{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-text-on-ink); margin-bottom:1.1rem; }
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col a{ font-size:.85rem; transition:color var(--dur-fast); }
.footer__col a:hover{ color: var(--c-gold-pale); }
.footer__bottom{ padding-top:1.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.75rem; }
@media (max-width: 820px){ .footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__grid{ grid-template-columns: 1fr; } }


/*--------footer map -------*/

.footer__map{
    width:100%;
    max-width:1200px;
    margin:40px auto 0;
}

.footer__map iframe{
    width:100%;
    height:300px;
    border:none;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}



/* ---------- Floating CTAs ---------- */
.floaters{ position:fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index:800; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end; }
.floater{
  display:flex; align-items:center; gap:.6rem;
  background: var(--c-ink); color: var(--c-text-on-ink);
  padding: .8rem 1.1rem; border-radius:999px; font-size:.78rem; font-weight:500;
  box-shadow: 0 8px 24px rgba(23,21,15,.18);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.floater:hover{ background: var(--c-gold-deep); transform: translateY(-2px); }
.floater svg{ width:16px; height:16px; flex-shrink:0; }
.floater__label{ max-width:0; overflow:hidden; white-space:nowrap; transition: max-width var(--dur-fast) var(--ease); }
.floater:hover .floater__label{ max-width:140px; }

/* ---------- Breadcrumb (subpages) ---------- */
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-family:var(--f-mono); font-size:.72rem; color:var(--c-gray); flex-wrap:wrap; }
.breadcrumb a:hover{ color: var(--c-gold-deep); }
.breadcrumb span{ opacity:.5; }

/* ---------- misc utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.divider{ height:1px; background:var(--c-line); border:none; margin:0; }
.divider--on-ink{ background: var(--c-line-on-ink); }