/* =========================================================
   ARDEN STUDIO NAILS SPA
   Manual de marca: Dourado #C99A52 · Dourado claro #FFD47A
                    Branco #FFFFFF · Cinza #C1C1C1
   Display: Caviar Dreams | Texto: Montserrat
   Assinatura: o arco dourado do studio + o traço do monograma AE
   ========================================================= */

@font-face{
  font-family:'Caviar Dreams';
  src:url('fonts/CaviarDreams-Regular.woff2') format('woff2'),
      url('fonts/CaviarDreams-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Caviar Dreams';
  src:url('fonts/CaviarDreams-Bold.woff2') format('woff2'),
      url('fonts/CaviarDreams-Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Caviar Dreams';
  src:url('fonts/CaviarDreams-Italic.woff2') format('woff2'),
      url('fonts/CaviarDreams-Italic.woff') format('woff');
  font-weight:400; font-style:italic; font-display:swap;
}

:root{
  --gold:#C99A52;
  --gold-light:#FFD47A;
  --gold-pale:#F0E2CC;
  --gold-grad:linear-gradient(100deg, #C99A52, #FFD47A);
  --white:#FFFFFF;
  --cream:#FBF8F4;
  --sand:#F4EDE3;
  --gray:#C1C1C1;
  --ink:#231F1B;
  --ink-soft:#6B635A;

  --font-display:'Caviar Dreams','Montserrat',sans-serif;
  --font-body:'Montserrat',sans-serif;

  --container:1180px;
  --ease:0.4s cubic-bezier(.2,.7,.3,1);
}

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

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink-soft);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  letter-spacing:.02em;
  margin:0;
  line-height:1.2;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* ---------- rótulos ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after{
  content:"";
  flex:1;
  max-width:70px;
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.eyebrow-center{ justify-content:center; }
.eyebrow-center::before{
  content:"";
  flex:1;
  max-width:70px;
  height:1px;
  background:linear-gradient(270deg,var(--gold),transparent);
}

.section-title{
  font-size:clamp(30px,4.2vw,46px);
  max-width:18ch;
  margin-bottom:20px;
}
.section-lead{
  font-size:16px;
  max-width:52ch;
  color:var(--ink-soft);
}

/* ---------- botões ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  overflow:hidden;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:18px 40px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
  white-space:nowrap;
}
/* seta que desliza */
.btn::after{
  content:"→";
  font-size:15px;
  letter-spacing:0;
  transform:translateX(-4px);
  opacity:.75;
  transition:transform var(--ease), opacity var(--ease);
}
.btn:hover::after{ transform:translateX(2px); opacity:1; }

/* brilho que atravessa no hover */
.btn::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg);
  transition:left .75s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.btn:hover::before{ left:130%; }

.btn-gold{
  background:var(--gold-grad);
  color:var(--ink);
  box-shadow:0 6px 18px -10px rgba(201,154,82,.85), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(201,154,82,.9), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-outline{
  background:transparent;
  border-color:var(--gold);
  color:var(--gold);
}
.btn-outline:hover{
  background:var(--gold);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(201,154,82,.9);
}
.btn-lg{ padding:21px 48px; font-size:12.5px; }
.btn-sm{ padding:12px 24px; font-size:10.5px; letter-spacing:.14em; }
.btn-sm::after{ font-size:13px; }
.section-cta{ display:flex; justify-content:center; margin-top:54px; }

/* =========================================================
   HEADER — claro, logo preta em destaque
   ========================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:20px 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,154,82,.22);
  transition:padding var(--ease), box-shadow var(--ease);
}
.site-header.is-scrolled{
  padding:12px 0;
  box-shadow:0 6px 26px -18px rgba(35,31,27,.5);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-mark img{ height:52px; width:auto; transition:height var(--ease); }
.site-header.is-scrolled .brand-mark img{ height:42px; }

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.main-nav a:not(.nav-cta){ color:var(--ink); position:relative; padding-bottom:4px; }
.main-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width var(--ease);
}
.main-nav a:not(.nav-cta):hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--ink); display:block; }

/* =========================================================
   FOTOS — tratamento leve e uniforme (base clara)
   ========================================================= */
.photo-frame{ position:relative; overflow:hidden; background:var(--sand); }
.photo-frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.02) brightness(1.13) sepia(.04);
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.photo-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(201,154,82,.09), rgba(255,255,255,0) 60%, rgba(201,154,82,.06));
  pointer-events:none;
}
.photo-frame:hover img{ transform:scale(1.04); }

/* arco dourado — assinatura, vem das arcadas reais do studio */
.arch{
  border-radius:999px 999px 4px 4px;
  border:1px solid rgba(201,154,82,.45);
}

/* placeholders restantes */
.placeholder-photo{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(201,154,82,.07) 0 2px, transparent 2px 14px),
    var(--sand);
  border:1px solid rgba(201,154,82,.4);
}
.placeholder-inner{
  display:flex; align-items:center; gap:9px;
  padding:11px 16px; margin:14px;
  max-width:calc(100% - 40px);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(201,154,82,.45);
  border-radius:40px;
  text-align:center;
}
.placeholder-mark{ width:16px; height:auto; margin:0; flex-shrink:0; }
.placeholder-text{
  font-family:var(--font-body);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin:0; line-height:1.4;
}

/* =========================================================
   HERO — foto de fundo com o texto por cima
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:150px 0 70px;
  overflow:hidden;
  background:var(--cream);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.8) contrast(1.02) brightness(1.14) sepia(.04);
}
/* véu creme: forte à esquerda (onde fica o texto), leve à direita */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(251,248,244,.985) 0%,
      rgba(251,248,244,.975) 38%,
      rgba(251,248,244,.93) 52%,
      rgba(251,248,244,.62) 68%,
      rgba(251,248,244,.22) 86%,
      rgba(251,248,244,.08) 100%),
    linear-gradient(180deg,
      rgba(251,248,244,.6) 0%,
      rgba(251,248,244,0) 22%,
      rgba(251,248,244,0) 78%,
      rgba(251,248,244,.7) 100%);
}
.hero-content{ position:relative; z-index:2; }

.hero-title{
  font-size:clamp(34px,4.8vw,60px);
  line-height:1.13;
  max-width:15ch;
  margin-bottom:22px;
}
.hero-title em{
  font-style:normal;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:16.5px;
  max-width:44ch;
  margin-bottom:30px;
  color:var(--ink-soft);
}
.pill-row{
  list-style:none; display:flex; flex-wrap:wrap; gap:9px;
  padding:0; margin:0 0 34px;
}
.pill-row li{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 18px;
  border:1px solid rgba(201,154,82,.5);
  border-radius:40px;
  color:var(--gold);
  background:rgba(255,255,255,.72);
}

/* faixa de informações */
.hero-facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  margin:44px 0 0;
  padding:0;
  max-width:920px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(6px);
  border:1px solid rgba(201,154,82,.35);
  border-radius:3px;
  box-shadow:0 18px 40px -32px rgba(35,31,27,.55);
  overflow:hidden;
}
.hero-facts .fact{
  flex:1 1 auto;
  border-right:1px solid rgba(201,154,82,.22);
}
.hero-facts .fact:last-child{ border-right:0; }
.hero-facts .fact > a,
.hero-facts .fact-rating{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 20px;
  font-size:12.5px;
  color:var(--ink-soft);
  height:100%;
  transition:background var(--ease), color var(--ease);
}
.hero-facts .fact > a:hover{ background:rgba(201,154,82,.1); color:var(--ink); }
.hero-facts svg{
  width:17px; height:17px; flex-shrink:0;
  fill:none; stroke:var(--gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.hero-facts .fact-rating{ background:rgba(201,154,82,.11); }
.hero-facts .fact-rating strong{ color:var(--ink); font-weight:700; }
.hero-facts .fact-text{ white-space:nowrap; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:13px; }
.stars.gold{ color:var(--gold); font-size:14px; letter-spacing:3px; }

/* =========================================================
   DIVISOR — traço do monograma
   ========================================================= */
.swoosh-divider{ position:relative; height:40px; overflow:hidden; background:transparent; }
.swoosh-divider svg{ position:absolute; bottom:-2px; left:0; width:100%; height:56px; }
.swoosh-divider path{ fill:none; stroke:var(--gold); stroke-width:1.2; opacity:.5; }

/* =========================================================
   SEÇÕES
   ========================================================= */
.section{ padding:104px 0; }
.section-white{ background:var(--white); }
.section-cream{ background:var(--cream); }
.section-sand{ background:var(--sand); }

/* Benefícios */
.benefits-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  margin-top:52px; margin-bottom:60px;
}
.benefit-card{
  padding:40px 30px;
  background:var(--white);
  border:1px solid rgba(201,154,82,.3);
  text-align:center;
  transition:transform var(--ease), box-shadow var(--ease);
}
.benefit-card:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -30px rgba(201,154,82,.8); }
.benefit-num{
  width:62px; height:70px; margin:0 auto 22px;
  border:1px solid var(--gold); border-radius:999px 999px 3px 3px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream);
}
.benefit-num img{ width:34px; opacity:.95; }
.benefit-card h3{ font-size:21px; margin-bottom:10px; }
.benefit-card p{ font-size:14.5px; margin:0; }
.benefits-photo{ aspect-ratio:16/9; width:100%; }

/* Serviços — carrossel */
.services-track-wrap{ position:relative; margin-top:52px; }
.services-track{
  display:flex; gap:26px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 4px 8px; margin:0 -4px;
  scrollbar-width:none;
}
.services-track::-webkit-scrollbar{ display:none; }
.service-card{ scroll-snap-align:start; flex:0 0 300px; }
.service-photo{ aspect-ratio:4/5; width:100%; }
.service-card h3{ font-size:18px; margin:22px 0 9px; }
.service-card p{ font-size:14px; margin:0; }

/* Bolinhas de carrossel — usadas em Serviços, Depoimentos e na galeria em lightbox */
.carousel-dots{ display:flex; justify-content:center; align-items:center; gap:9px; margin-top:26px; }
.carousel-dots button{
  width:8px; height:8px; padding:0; border-radius:50%;
  border:1px solid var(--gold); background:transparent;
  cursor:pointer;
  transition:background var(--ease), width var(--ease), border-radius var(--ease);
}
.carousel-dots button.is-active{ background:var(--gold); width:22px; border-radius:5px; }

/* Depoimentos — carrossel (arrastar, sem setas) */
.reviews-track-wrap{ position:relative; margin-top:48px; }
.reviews-track{
  display:flex; gap:22px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 4px 8px; margin:0 -4px;
  scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{ display:none; }
.review-card{
  scroll-snap-align:start;
  flex:0 0 330px;
  background:var(--white);
  border:1px solid rgba(201,154,82,.28);
  padding:30px 26px;
  display:flex; flex-direction:column; gap:14px;
}
.review-card p{ font-size:14px; margin:0; flex:1; }
.review-author{ display:flex; flex-direction:column; padding-top:12px; border-top:1px solid rgba(201,154,82,.25); }
.review-name{ font-weight:600; font-size:13px; color:var(--ink); }
.review-time{ font-size:11.5px; color:var(--gray); }

/* Galeria "Resultados das clientes" */
.gallery-title{
  font-family:var(--font-display); font-weight:400; color:var(--ink);
  text-align:center; font-size:clamp(20px,2.6vw,26px);
  margin:70px 0 28px;
}
.gallery-title::after{
  content:""; display:block; width:56px; height:1px;
  background:var(--gold); margin:14px auto 0;
}
.results-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:0; }
.results-photo{
  aspect-ratio:1/1; width:100%;
  border:0; padding:0; margin:0; font:inherit;
  cursor:pointer; appearance:none;
}
.results-photo:focus-visible{ outline-offset:4px; }

/* Lightbox da galeria */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(35,31,27,.94);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  width:100%; height:100%; scrollbar-width:none;
  background:rgba(35,31,27,.94);
}
.lightbox-track::-webkit-scrollbar{ display:none; }
.lightbox-slide{
  flex:0 0 100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:70px 24px;
  background:rgba(35,31,27,.94);
}
.lightbox-slide img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  filter:saturate(.9) contrast(1.02) brightness(1.1) sepia(.03);
}
.lightbox-close{
  position:absolute; top:20px; right:20px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08);
  color:var(--white); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
.lightbox-dots{ position:absolute; left:0; right:0; bottom:26px; margin-top:0; }
.lightbox-dots button{ border-color:rgba(255,255,255,.6); }
.lightbox-dots button.is-active{ background:var(--gold-light); border-color:var(--gold-light); }
body.no-scroll{ overflow:hidden; }

/* Sobre */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:66px; align-items:center; }
.about-photo{ aspect-ratio:4/5; width:100%; }
.about-text p{ font-size:15.5px; }
.about-text .section-title{ margin-bottom:22px; }
.about-btn{ margin-top:30px; }
.about-photo-small{ aspect-ratio:16/9; width:100%; margin-top:30px; }

/* Chamada final */
.final-cta{ position:relative; padding:130px 0; overflow:hidden; text-align:center; }
.final-cta-media{ position:absolute; inset:0; }
.final-cta-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.72) contrast(1.02) brightness(1.18) sepia(.05);
}
.final-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,248,244,.94), rgba(244,237,227,.9));
}
.final-cta-content{ position:relative; z-index:2; max-width:660px; }
.final-mark{ width:52px; margin:0 auto 24px; opacity:.9; }
.final-cta-content .section-title{ max-width:none; margin:0 auto 18px; }
.final-cta-content p{ font-size:16px; margin-bottom:36px; }

/* =========================================================
   RODAPÉ — única área escura, logo dourada
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--gray); padding-top:74px; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap:56px; justify-content:space-between;
  padding-bottom:54px; border-bottom:1px solid rgba(201,154,82,.22);
}
.footer-logo{ height:70px; width:auto; }
.footer-brand{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.social-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--gray);
  padding:9px 16px;
  border:1px solid rgba(201,154,82,.35);
  border-radius:40px;
  transition:color var(--ease), border-color var(--ease), background var(--ease);
}
.social-link svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.social-link:hover{ color:var(--gold-light); border-color:var(--gold-light); background:rgba(201,154,82,.12); }

.nav-ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid rgba(201,154,82,.5);
  border-radius:50%;
  color:var(--gold);
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.nav-ig svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-ig:hover{ background:var(--gold); color:var(--white); border-color:var(--gold); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-cols h3{
  font-family:var(--font-body); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:16px;
}
.footer-cols a, .footer-cols p{
  display:block; font-size:13.5px; color:var(--gray);
  margin-bottom:8px; transition:color var(--ease);
}
.footer-cols a:hover{ color:var(--gold-light); }
.footer-bottom{ padding:22px 0; font-size:11.5px; color:#7A736A; text-align:center; }

/* WhatsApp */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.35);
  z-index:90; transition:transform var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .hero{ padding:130px 0 60px; min-height:0; }
  .hero-facts{ max-width:none; }
  .hero-facts .fact-text{ white-space:normal; }
  .about-grid{ grid-template-columns:1fr; gap:38px; }
  .service-card{ flex-basis:64%; }
  .review-card{ flex-basis:78%; }
  .benefits-grid{ grid-template-columns:1fr; }
  .results-gallery{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .main-nav{
    position:fixed; top:0; right:0;
    height:100svh; width:min(80vw,320px);
    background:var(--white);
    border-left:1px solid rgba(201,154,82,.3);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:40px;
    transform:translateX(100%);
    transition:transform var(--ease);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .section{ padding:76px 0; }
  .service-card{ flex-basis:82%; }
  .review-card{ flex-basis:86%; }
  .brand-mark img{ height:44px; }
  .final-cta{ padding:92px 0; }

  /* botões: em telas bem estreitas o texto pode não caber em uma linha */
  .btn{ white-space:normal; text-align:center; }
  .section-cta{ padding:0 8px; }
  .section-cta .btn{ width:100%; max-width:360px; }

  .gallery-title{ margin:52px 0 22px; }
  .lightbox-close{ top:14px; right:14px; }

  /* hero no mobile: véu cobrindo tudo e faixa empilhada */
  .hero{ padding:120px 0 54px; }
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(251,248,244,.96) 0%,
      rgba(251,248,244,.93) 55%,
      rgba(251,248,244,.88) 100%);
  }
  .hero-facts{ flex-direction:column; }
  .hero-facts .fact{
    flex:1 1 auto;
    border-right:0;
    border-bottom:1px solid rgba(201,154,82,.22);
  }
  .hero-facts .fact:last-child{ border-bottom:0; }
  .hero-facts .fact-text{ white-space:normal; }
}

@media (max-width:400px){
  .results-gallery{ gap:12px; }
  .service-card{ flex-basis:88%; }
}