/* ═══════════════════════════════════════
   STUDIO MILANO — v2 Rebrand
   Aesthetic: Fresh Clinical / Organic Curves
   Palette: Cyan-Aqua + White
   ═══════════════════════════════════════ */

/* ── RESET & VARIABLES ─────────────── */
:root {
   --cyan: #44bfcf;
   --cyan-dark: #2a9aab;
   --cyan-deep: #1d7a8a;
   --cyan-light: #7fd4df;
   --cyan-pale: #e8f7f9;
   --cyan-wash: #f2fbfc;

   --dark: #0c3b4a;
   --dark-mid: #164a5c;
   --dark-soft: #1e5c70;

   --white: #ffffff;
   --off-white: #fafcfd;
   --gray-50: #f4f7f8;
   --gray-100: #e9eef0;
   --gray-200: #d3dbde;
   --gray-300: #b0bcc1;
   --gray-400: #8a9aa0;
   --gray-500: #6a7d84;
   --gray-600: #4d6068;
   --gray-700: #344850;
   --gray-800: #1f3038;

   --success: #2eac6a;
   --error: #e04848;

   --font-display: 'DM Sans', sans-serif;
   --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

   --container: 1200px;
   --nav-h: 76px;
   --radius-sm: 10px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --radius-full: 9999px;

   --shadow-sm: 0 2px 8px rgba(12, 59, 74, .05);
   --shadow-md: 0 6px 24px rgba(12, 59, 74, .08);
   --shadow-lg: 0 12px 40px rgba(12, 59, 74, .1);
   --shadow-xl: 0 20px 60px rgba(12, 59, 74, .12);

   --ease: cubic-bezier(.25, .46, .45, .94);
   --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: var(--nav-h);
   -webkit-font-smoothing: antialiased
}

body {
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.65;
   color: var(--gray-600);
   background: var(--white);
   overflow-x: hidden
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   text-decoration: none;
   color: inherit;
   transition: color .3s var(--ease)
}

button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit
}

ul {
   list-style: none
}

.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 2rem
}

/* ── TYPOGRAPHY ────────────────────── */
h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   color: var(--dark);
   font-weight: 400;
   line-height: 1.15
}

h1 {
   font-size: clamp(2.6rem, 5.5vw, 4.2rem);
   line-height: 1;
}

h2 {
   font-size: clamp(2rem, 4.5vw, 3.2rem)
}

h3 {
   font-size: clamp(1.1rem, 2vw, 1.35rem);
   font-weight: 400
}

em {
   font-style: italic;
   color: var(--cyan-dark)
}

.icon-xs {
   width: 14px;
   height: 14px
}

.icon-sm {
   width: 18px;
   height: 18px
}

.icon-md {
   width: 24px;
   height: 24px;
   color: var(--cyan)
}

/* ── BUTTONS ───────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .92rem;
   padding: .75rem 1.6rem;
   border-radius: var(--radius-full);
   transition: all .35s var(--ease);
   white-space: nowrap;
   border: 2px solid transparent
}

.btn--primary {
   background: var(--cyan);
   color: var(--white);
   border-color: var(--cyan)
}

.btn--primary:hover {
   background: var(--cyan-dark);
   border-color: var(--cyan-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(68, 191, 207, .35)
}

.btn--ghost {
   background: transparent;
   color: var(--dark);
   border-color: var(--gray-200)
}

.btn--ghost:hover {
   border-color: var(--cyan);
   color: var(--cyan-dark);
   background: var(--cyan-wash)
}

.btn--text {
   background: none;
   color: var(--cyan-dark);
   font-weight: 600;
   padding: .5rem 0;
   border-radius: 0;
   gap: .35rem
}

.btn--text:hover {
   color: var(--dark);
   gap: .6rem
}

.btn--sm {
   padding: .5rem 1rem;
   font-size: .84rem
}

.btn--lg {
   padding: .9rem 2.2rem;
   font-size: 1rem
}

.btn--full {
   width: 100%
}

/* ── ANIMATIONS ────────────────────── */
.anim-up {
   opacity: 0;
   transform: translateY(28px);
   animation: au .8s var(--ease-out) forwards
}

.d1 {
   animation-delay: .1s
}

.d2 {
   animation-delay: .2s
}

.d3 {
   animation-delay: .35s
}

.d4 {
   animation-delay: .5s
}

@keyframes au {
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .65s var(--ease-out), transform .65s var(--ease-out)
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

/* ═══════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: var(--nav-h);
   z-index: 1000;
   background: rgba(255, 255, 255, .8);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   border-bottom: 1px solid transparent;
   transition: all .3s var(--ease)
}

.nav.scrolled {
   background: rgba(255, 255, 255, .95);
   border-bottom-color: var(--gray-100);
   box-shadow: var(--shadow-sm)
}

.nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%
}

.nav__brand {
   display: flex;
   align-items: center;
   gap: .6rem
}

.nav__brand-text {
   font-family: var(--font-display);
   font-size: 1.25rem;
   color: var(--dark)
}

.nav__logo {
   display: flex
}

.nav__links {
   display: flex;
   gap: 2rem
}

.nav__links a {
   font-size: .88rem;
   font-weight: 500;
   color: var(--gray-500);
   position: relative;
   padding: 4px 0
}

.nav__links a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--cyan);
   border-radius: 2px;
   transition: width .3s var(--ease)
}

.nav__links a:hover {
   color: var(--dark)
}

.nav__links a:hover::after {
   width: 100%
}

.nav__right {
   display: flex;
   align-items: center;
   gap: 1.5rem
}

.nav__phone {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .85rem;
   font-weight: 500;
   color: var(--gray-500)
}

.nav__phone:hover {
   color: var(--cyan-dark)
}

.nav__burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   width: 28px;
   justify-content: center
}

.nav__burger span {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--dark);
   border-radius: 2px;
   transition: all .3s var(--ease)
}

.nav__burger.open span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px)
}

.nav__burger.open span:nth-child(2) {
   opacity: 0
}

.nav__burger.open span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px)
}

.nav__mobile {
   display: none;
   flex-direction: column;
   gap: 1rem;
   padding: 1.5rem 2rem 2rem;
   background: var(--white);
   border-top: 1px solid var(--gray-100);
   box-shadow: var(--shadow-lg)
}

.nav__mobile.open {
   display: flex
}

.nav__mobile a {
   font-size: 1rem;
   font-weight: 500;
   padding: .5rem 0;
   color: var(--gray-700);
   border-bottom: 1px solid var(--gray-50)
}

.nav__mobile a:last-child {
   border-bottom: none
}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero {
   position: relative;
   padding: calc(var(--nav-h) + 4rem) 0 0;
   background: var(--cyan-wash);
   overflow: hidden;
   min-height: 100vh
}

/* Organic blobs */
.hero__blob {
   position: absolute;
   border-radius: 50%;
   z-index: 0
}

.hero__blob--1 {
   width: 500px;
   height: 500px;
   background: var(--cyan-pale);
   top: -120px;
   right: -100px;
   opacity: .6
}

.hero__blob--2 {
   width: 300px;
   height: 300px;
   background: rgba(68, 191, 207, .08);
   bottom: 80px;
   left: -80px
}

.hero__blob--3 {
   width: 180px;
   height: 180px;
   background: rgba(68, 191, 207, .1);
   top: 40%;
   right: 30%
}

.hero__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
   position: relative;
   z-index: 1;
   padding-bottom: 6rem
}

.hero__content {
   position: relative
}

.hero__eyebrow {
   font-size: .85rem;
   font-weight: 500;
   color: var(--cyan-dark);
   letter-spacing: .03em;
   margin-bottom: 1rem
}

.hero__title {
   margin-bottom: 1.5rem
}

.hero__sub {
   font-size: 1.1rem;
   color: var(--gray-500);
   max-width: 440px;
   margin-bottom: 2rem;
   line-height: 1.7
}

.hero__actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 2rem
}

.hero__emergency {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-bottom: 1.5rem
}

.hero__emergency-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--error);
   animation: pulse 2s infinite
}

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(224, 72, 72, .4)
   }

   70% {
      box-shadow: 0 0 0 8px rgba(224, 72, 72, 0)
   }
}

.hero__emergency-label {
   font-size: .82rem;
   font-weight: 600;
   color: var(--error);
   text-transform: uppercase;
   letter-spacing: .06em
}

.hero__emergency-phone {
   font-size: .92rem;
   font-weight: 700;
   color: var(--dark)
}

.hero__proof {
   display: flex;
   align-items: center;
   gap: .75rem;
   flex-wrap: wrap
}

.hero__proof .star-filled {
   color: #f0b429;
   font-size: 1rem;
   letter-spacing: 2px
}

.hero__proof-text {
   font-size: .86rem;
   color: var(--gray-500)
}

.hero__proof-text strong {
   color: var(--dark)
}

/* Hero visual */
.hero__visual {
   position: relative
}

.hero__img-frame {
   position: relative;
   border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 80px;
   overflow: visible;
   background: var(--white);
   box-shadow: var(--shadow-xl);
   aspect-ratio: 4/5;
   max-width: 460px;
   margin-left: auto
}

.hero__img-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   width: 100%;
   height: 100%;
   background: linear-gradient(160deg, var(--cyan-wash), var(--cyan-pale));
   color: var(--gray-400);
   font-size: .85rem;
   text-align: center;
   border-radius: inherit;
   overflow: hidden
}

.hero__img-placeholder small {
   font-size: .72rem;
   color: var(--gray-400)
}

.hero__badge {
   position: absolute;
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: .85rem 1.2rem;
   background: var(--white);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   animation: floatY 5s ease-in-out infinite
}

.hero__badge--1 {
   bottom: 40px;
   left: -50px
}

.hero__badge i {
   color: var(--cyan)
}

.hero__badge strong {
   display: block;
   font-family: var(--font-display);
   font-size: 1.15rem;
   color: var(--dark)
}

.hero__badge span {
   font-size: .75rem;
   color: var(--gray-400)
}

.hero__smile-blob {
   position: absolute;
   top: -20px;
   right: -20px;
   animation: floatY 6s ease-in-out infinite reverse
}

@keyframes floatY {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-10px)
   }
}

/* Curve */
.hero__curve {
   position: absolute;
   bottom: -1px;
   left: 0;
   right: 0;
   z-index: 2;
   line-height: 0
}

.hero__curve svg {
   width: 100%;
   height: auto
}

/* ═══════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════ */
.about {
   padding: 6rem 0;
   background: var(--white)
}

.about__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center
}

.about__img-wrapper {
   position: relative
}

.about__img-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   aspect-ratio: 5/4;
   border-radius: var(--radius-xl) var(--radius-xl) 80px var(--radius-xl);
   background: linear-gradient(135deg, var(--cyan-wash), var(--cyan-pale));
   color: var(--gray-400);
   font-size: .85rem;
   text-align: center;
   overflow: hidden;
   position: relative;
   z-index: 1
}

.about__img-placeholder small {
   font-size: .72rem
}

.about__img-accent {
   position: absolute;
   top: -16px;
   right: -16px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: var(--cyan-pale);
   z-index: 0
}

.about__title {
   margin-bottom: 1.5rem
}

.about__text-col p {
   color: var(--gray-500);
   margin-bottom: 1.25rem;
   font-size: 1rem;
   line-height: 1.75
}

.about__text-col .btn {
   margin-right: 1.5rem
}

/* ═══════════════════════════════════════
   CTA BAND
   ═══════════════════════════════════════ */
.cta-band {
   position: relative;
   padding: 5rem 0;
   background: var(--cyan-wash);
   overflow: hidden
}

.cta-band__blob {
   position: absolute;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: rgba(68, 191, 207, .08);
   right: -100px;
   top: -80px
}

.cta-band__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center
}

.cta-band__img {
   position: relative
}

.cta-band__img-placeholder {
   aspect-ratio: 1;
   max-width: 380px;
   margin: 0 auto;
   border-radius: 50% 50% 50% 20%;
   background: linear-gradient(160deg, var(--cyan-pale), var(--white));
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   color: var(--gray-400);
   font-size: .85rem;
   box-shadow: var(--shadow-md)
}

.cta-band__content h2 {
   margin-bottom: 1.5rem
}

/* ═══════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════ */
.services {
   padding: 6rem 0;
   background: var(--white)
}

.services__header {
   margin-bottom: 3rem
}

.services__title {
   max-width: 400px
}

.services__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem
}

.svc-card {
   padding: 2rem;
   background: var(--white);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius-lg);
   transition: all .35s var(--ease);
   position: relative
}

.svc-card:hover {
   border-color: var(--cyan-light);
   box-shadow: var(--shadow-md);
   transform: translateY(-4px)
}

.svc-card__icon {
   margin-bottom: 1.25rem
}

.svc-card h3 {
   font-family: var(--font-body);
   font-weight: 600;
   color: var(--dark);
   margin-bottom: .5rem;
   font-size: 1.05rem
}

.svc-card p {
   font-size: .88rem;
   color: var(--gray-500);
   line-height: 1.6;
   margin-bottom: 1rem
}

.svc-card__link {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   font-size: .82rem;
   font-weight: 600;
   color: var(--cyan-dark);
   transition: gap .3s var(--ease)
}

.svc-card__link:hover {
   gap: .6rem;
   color: var(--dark)
}

/* ═══════════════════════════════════════
   EMERGENCY STRIP
   ═══════════════════════════════════════ */
.strip {
   padding: 1.25rem 0;
   background: var(--cyan-pale)
}

.strip__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem
}

.strip__dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--error);
   animation: pulse 2s infinite
}

.strip__label {
   font-size: .82rem;
   font-weight: 600;
   color: var(--error);
   text-transform: uppercase;
   letter-spacing: .06em
}

.strip__phone {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--dark);
   font-family: var(--font-display)
}

/* ═══════════════════════════════════════
   TEAM
   ═══════════════════════════════════════ */
.team {
   padding: 6rem 0;
   background: var(--white)
}

.team__header {
   margin-bottom: 3rem
}

.team__header h2 {
   max-width: 420px
}

.team__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem
}

.team-card {
   text-align: center;
   padding: 2rem 1.25rem;
   background: var(--gray-50);
   border-radius: var(--radius-lg);
   transition: all .35s var(--ease);
   border: 1px solid transparent
}

.team-card:hover {
   background: var(--white);
   border-color: var(--cyan-light);
   box-shadow: var(--shadow-md);
   transform: translateY(-4px)
}

.team-card__photo {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   overflow: hidden;
   margin: 0 auto 1.25rem;
   border: 3px solid var(--cyan-pale)
}

.team-card__ph {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--cyan-wash), var(--cyan-pale));
   border-radius: 50%;
   color: var(--gray-300)
}

.team-card h3 {
   font-family: var(--font-body);
   font-weight: 600;
   color: var(--dark);
   font-size: .95rem;
   margin-bottom: 4px
}

.team-card__role {
   display: block;
   font-size: .78rem;
   color: var(--cyan-dark);
   font-weight: 600;
   margin-bottom: .75rem;
   text-transform: uppercase;
   letter-spacing: .03em
}

.team-card p {
   font-size: .82rem;
   color: var(--gray-500);
   line-height: 1.55
}

/* ═══════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════ */
.reviews {
   position: relative;
   padding: 6rem 0;
   background: var(--gray-50);
   overflow: hidden
}

.reviews__blob {
   position: absolute;
   width: 350px;
   height: 350px;
   border-radius: 50%;
   background: var(--cyan-pale);
   right: -80px;
   bottom: -60px;
   opacity: .4
}

.reviews__grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2rem;
   align-items: start;
   position: relative;
   z-index: 1
}

.reviews__center {
   text-align: center;
   padding: 2rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center
}

.reviews__center h2 {
   margin-bottom: 2rem
}

.reviews__score {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .25rem
}

.reviews__number {
   font-family: var(--font-display);
   font-size: 3.5rem;
   color: var(--dark);
   line-height: 1
}

.reviews__outof {
   font-size: 1.5rem;
   color: var(--gray-400)
}

.reviews__score-stars {
   color: #f0b429;
   font-size: 1.2rem;
   letter-spacing: 3px;
   margin: .25rem 0
}

.reviews__count {
   font-size: .82rem;
   color: var(--gray-400)
}

.reviews__score .btn {
   margin-top: 1rem
}

.reviews__left,
.reviews__right {
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.review-card {
   background: var(--white);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius-lg);
   padding: 1.75rem;
   transition: all .3s var(--ease)
}

.review-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

.review-card__stars {
   color: #f0b429;
   font-size: .9rem;
   letter-spacing: 2px;
   margin-bottom: 1rem
}

.review-card blockquote {
   font-family: var(--font-display);
   font-size: 1.05rem;
   font-style: italic;
   color: var(--gray-700);
   line-height: 1.55;
   margin-bottom: 1.25rem
}

.review-card__author strong {
   display: block;
   font-size: .85rem;
   color: var(--dark)
}

.review-card__author span {
   font-size: .78rem;
   color: var(--gray-400)
}

/* ═══════════════════════════════════════
   BOOKING
   ═══════════════════════════════════════ */
.booking {
   position: relative
}

.booking__curve-top {
   line-height: 0;
   background: var(--gray-50)
}

.booking__curve-top svg {
   width: 100%;
   height: auto;
   display: block
}

.booking__bg {
   background: var(--dark);
   padding: 5rem 0 6rem
}

.booking__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: start
}

.booking__left h2 {
   color: var(--white);
   margin-bottom: 1.25rem
}

.booking__left h2 em {
   color: var(--cyan-light)
}

.booking__left p {
   color: rgba(255, 255, 255, .65);
   font-size: 1.05rem;
   line-height: 1.7;
   margin-bottom: 2rem
}

.booking__left p strong {
   color: var(--cyan-light)
}

.booking__perks {
   display: flex;
   flex-direction: column;
   gap: .75rem
}

.booking__perks li {
   display: flex;
   align-items: center;
   gap: .75rem;
   color: rgba(255, 255, 255, .8);
   font-size: .95rem
}

.booking__perks i {
   color: var(--cyan-light);
   flex-shrink: 0
}

/* Form card */
.booking__card {
   background: var(--white);
   border-radius: var(--radius-xl);
   padding: 2.5rem;
   box-shadow: var(--shadow-xl)
}

.booking__card h3 {
   font-family: var(--font-display);
   font-size: 1.5rem;
   margin-bottom: .25rem
}

.booking__card-sub {
   font-size: .85rem;
   color: var(--gray-500);
   margin-bottom: 1.75rem
}

.bform {
   display: flex;
   flex-direction: column;
   gap: .85rem
}

.bform__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .85rem
}

.bform__field {
   display: flex;
   flex-direction: column;
   gap: 3px
}

.bform__field label {
   font-size: .8rem;
   font-weight: 500;
   color: var(--gray-600)
}

.bform__field label a {
   color: var(--cyan-dark);
   text-decoration: underline
}

.bform__field input,
.bform__field select,
.bform__field textarea {
   font-family: var(--font-body);
   font-size: .9rem;
   padding: .7rem .85rem;
   border: 1.5px solid var(--gray-100);
   border-radius: var(--radius-sm);
   background: var(--gray-50);
   color: var(--gray-800);
   outline: none;
   transition: all .2s var(--ease)
}

.bform__field input:focus,
.bform__field select:focus,
.bform__field textarea:focus {
   border-color: var(--cyan);
   box-shadow: 0 0 0 3px rgba(68, 191, 207, .12);
   background: var(--white)
}

.bform__field textarea {
   resize: vertical;
   min-height: 72px
}

.bform__check {
   display: flex;
   align-items: flex-start;
   gap: .5rem
}

.bform__check input[type="checkbox"] {
   width: 18px;
   height: 18px;
   margin-top: 2px;
   accent-color: var(--cyan);
   flex-shrink: 0
}

.bform__check label {
   font-size: .78rem;
   color: var(--gray-500)
}

.bform__check a {
   color: var(--cyan-dark);
   text-decoration: underline
}

.bform__secure {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   font-size: .76rem;
   color: var(--gray-400);
   margin-top: .25rem
}

.bform__success {
   text-align: center;
   padding: 2.5rem 1rem
}

.bform__success-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--cyan-pale);
   color: var(--success);
   font-size: 1.5rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem
}

.bform__success h3 {
   color: var(--success);
   margin-bottom: .5rem
}

.bform__success p {
   color: var(--gray-500)
}

/* ═══════════════════════════════════════
   FAQ
   ═══════════════════════════════════════ */
.faq {
   padding: 6rem 0;
   background: var(--white)
}

.faq__title {
   margin-bottom: 2.5rem;
   max-width: 400px
}

.faq__list {
   max-width: 720px;
   display: flex;
   flex-direction: column
}

.faq-item {
   border-bottom: 1px solid var(--gray-100)
}

.faq-item__q {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 0;
   text-align: left;
   font-size: 1rem;
   font-weight: 500;
   color: var(--dark);
   font-family: var(--font-body);
   transition: color .2s var(--ease)
}

.faq-item__q:hover {
   color: var(--cyan-dark)
}

.faq-item__icon {
   width: 20px;
   height: 20px;
   color: var(--gray-300);
   flex-shrink: 0;
   transition: transform .35s var(--ease), color .2s
}

.faq-item.open .faq-item__icon {
   transform: rotate(45deg);
   color: var(--cyan)
}

.faq-item__a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s var(--ease), padding .3s var(--ease)
}

.faq-item.open .faq-item__a {
   max-height: 300px;
   padding-bottom: 1.25rem
}

.faq-item__a p {
   font-size: .9rem;
   color: var(--gray-500);
   line-height: 1.7
}

.faq-item__a a {
   color: var(--cyan-dark);
   text-decoration: underline
}

.faq-item__a strong {
   color: var(--gray-700)
}

/* ═══════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════ */
.contact {
   padding: 6rem 0;
   background: var(--gray-50)
}

.contact__title {
   margin-bottom: 2.5rem
}

.contact__grid {
   display: grid;
   grid-template-columns: 1fr 1.6fr;
   gap: 2rem;
   align-items: start
}

.contact__info {
   background: var(--white);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius-lg);
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.contact__item {
   display: flex;
   align-items: flex-start;
   gap: 1rem
}

.contact__item strong {
   display: block;
   font-size: .8rem;
   font-weight: 600;
   color: var(--gray-700);
   text-transform: uppercase;
   letter-spacing: .04em;
   margin-bottom: 2px
}

.contact__item span,
.contact__item a {
   font-size: .9rem;
   color: var(--gray-500);
   line-height: 1.5
}

.contact__item a:hover {
   color: var(--cyan-dark)
}

.contact__map {
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 16/9;
   background: var(--gray-100)
}

.contact__map iframe {
   width: 100%;
   height: 100%
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer {
   position: relative
}

.footer__curve {
   line-height: 0;
   background: var(--gray-50)
}

.footer__curve svg {
   width: 100%;
   height: auto;
   display: block
}

.footer__bg {
   background: var(--dark);
   padding: 4rem 0 2rem
}

.footer__top {
   display: grid;
   grid-template-columns: 1.2fr 2fr;
   gap: 4rem;
   padding-bottom: 2.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   margin-bottom: 1.5rem
}

.footer__brand {
   color: rgba(255, 255, 255, .5)
}

.footer__brand p {
   font-size: .88rem;
   margin-top: 1rem;
   line-height: 1.6
}

.footer__cols {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem
}

.footer__col h4 {
   font-family: var(--font-body);
   font-size: .82rem;
   font-weight: 600;
   color: var(--white);
   text-transform: uppercase;
   letter-spacing: .08em;
   margin-bottom: 1rem
}

.footer__col a {
   display: block;
   font-size: .85rem;
   margin-bottom: .5rem;
   color: rgba(255, 255, 255, .45);
   transition: color .2s
}

.footer__col a:hover {
   color: var(--cyan-light)
}

.footer__bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   color: rgba(255, 255, 255, .35);
   font-size: .76rem
}

.footer__legal {
   display: flex;
   gap: 1.5rem
}

.footer__legal a {
   font-size: .76rem;
   color: rgba(255, 255, 255, .35)
}

.footer__legal a:hover {
   color: var(--cyan-light)
}

/* ═══════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════ */
.wa-float {
   position: fixed;
   bottom: 28px;
   right: 28px;
   z-index: 900;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25d366;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
   transition: all .3s var(--ease)
}

.wa-float:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 28px rgba(37, 211, 102, .5)
}

/* ═══════════════════════════════════════
   MOBILE CTA
   ═══════════════════════════════════════ */
.mobile-cta {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 800;
   padding: .75rem 1.25rem;
   background: var(--white);
   border-top: 1px solid var(--gray-100);
   box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
   transform: translateY(100%);
   transition: transform .3s var(--ease)
}

.mobile-cta.visible {
   transform: translateY(0)
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1024px) {
   .hero__grid {
      grid-template-columns: 1fr;
      gap: 2.5rem
   }

   .hero__visual {
      max-width: 400px;
      margin: 0 auto
   }

   .hero__badge--1 {
      left: 0;
      bottom: 20px
   }

   .about__grid {
      grid-template-columns: 1fr;
      gap: 3rem
   }

   .about__img-col {
      max-width: 480px
   }

   .cta-band__inner {
      grid-template-columns: 1fr;
      text-align: center
   }

   .cta-band__img-placeholder {
      max-width: 280px;
      margin: 0 auto
   }

   .services__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .team__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .reviews__grid {
      grid-template-columns: 1fr
   }

   .reviews__center {
      order: -1
   }

   .reviews__left,
   .reviews__right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem
   }

   .booking__inner {
      grid-template-columns: 1fr;
      gap: 2.5rem
   }

   .contact__grid {
      grid-template-columns: 1fr
   }

   .footer__top {
      grid-template-columns: 1fr;
      gap: 2.5rem
   }
}

@media(max-width:768px) {
   :root {
      --nav-h: 64px
   }

   .nav__links {
      display: none
   }

   .nav__right .nav__phone {
      display: none
   }

   .nav__right .btn {
      display: none
   }

   .nav__burger {
      display: flex
   }

   .hero {
      padding-top: calc(var(--nav-h) + 2.5rem);
      min-height: auto
   }

   .hero__grid {
      padding-bottom: 4rem
   }

   .hero__actions {
      flex-direction: column
   }

   .hero__actions .btn {
      width: 100%
   }

   .hero__blob--1 {
      width: 280px;
      height: 280px;
      right: -60px;
      top: -40px
   }

   .hero__blob--3 {
      display: none
   }

   .hero__float-card,
   .hero__badge {
      display: none
   }

   .services__grid {
      grid-template-columns: 1fr
   }

   .team__grid {
      grid-template-columns: 1fr
   }

   .reviews__left,
   .reviews__right {
      grid-template-columns: 1fr
   }

   .booking__card {
      padding: 1.75rem
   }

   .bform__row {
      grid-template-columns: 1fr
   }

   .footer__cols {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer__bottom {
      flex-direction: column;
      text-align: center
   }

   .wa-float {
      bottom: 80px;
      width: 50px;
      height: 50px
   }

   .wa-float svg {
      width: 22px;
      height: 22px
   }

   .mobile-cta {
      display: block
   }

   .cta-band {
      padding: 3rem 0
   }

   .about,
   .services,
   .team,
   .reviews,
   .faq,
   .contact {
      padding: 4rem 0
   }
}

@media(max-width:480px) {
   .container {
      padding: 0 1.25rem
   }

   .hero__title {
      font-size: 2.2rem
   }
}