/* =========================================================
   RANGKALA — Luxury Wedding Photography & Cinematography
   Stylesheet
   Design tokens: Navy / Ivory / Gold
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --navy:        #0B1F3A;
  --navy-deep:   #071427;
  --navy-soft:   #14294A;
  --gold:        #C9A24B;
  --gold-light:  #E8CE8F;
  --ivory:       #F8F6F1;
  --white:       #FFFFFF;
  --ink:         #10151F;
  --ink-muted:   #5B6472;
  --line:        rgba(11,31,58,0.10);
  --line-light:  rgba(255,255,255,0.14);

  /* --- Type tokens --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Segoe UI', sans-serif;

  /* --- Layout tokens --- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 20px 60px rgba(7,20,39,0.14);
  --shadow-deep: 0 30px 80px rgba(7,20,39,0.35);
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; }
h1,h2,h3,h4,p{ margin:0; }

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy-deep);
  padding:12px 20px; z-index:9999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* =========================================================
   UTILITIES
   ========================================================= */
.container{ max-width: var(--container); margin:0 auto; padding-inline: var(--gutter); }
.section{ padding: clamp(64px, 10vw, 128px) 0; position:relative; }
.section-dark{ background: var(--navy); color: var(--white); }
.section-ivory{ background: var(--ivory); }
.section-white{ background: var(--white); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 26px; height:1px; background: var(--gold);
  display:inline-block;
}

.section-head{ max-width: 720px; margin-bottom: 56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-footer{ max-width: 720px; margin-top: 56px; }
.section-footer.center{ margin-inline:auto; text-align:center; }

h1, h2, h3{ font-family: var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
h2{ font-size: clamp(34px, 4.4vw, 56px); }
h3{ font-size: clamp(22px, 2.4vw, 28px); }
.lede{ font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-muted); line-height:1.7; font-weight:300; }
.section-dark .lede{ color: rgba(255,255,255,0.72); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 34px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight:600;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-deep);
  box-shadow: 0 14px 34px rgba(201,162,75,0.35);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 20px 44px rgba(201,162,75,0.45); }

.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.btn-outline:hover{ background: rgba(255,255,255,0.1); border-color: var(--white); transform: translateY(-3px); }

.btn-outline-navy{
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline-navy:hover{ background: var(--navy); color: var(--white); transform: translateY(-3px); }

.btn-whatsapp{
  background: #1F8A54;
  color: #fff;
  box-shadow: 0 14px 30px rgba(31,138,84,.35);
}
.btn-whatsapp:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px rgba(31,138,84,.45); }

.btn-sm{ padding: 12px 22px; font-size: 11px; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  padding: 20px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(11,31,58,0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity:1;
  transition: opacity .4s ease, background .4s ease;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index:-1;
}
.site-header.scrolled{ padding: 12px 0; }
.site-header.scrolled::before{
  background: rgba(7,20,39,0.85);
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.logo{
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: .06em;
  color: var(--white);
  font-weight: 600;
  display:flex; align-items:center; gap:10px;
}
.logo .mark{ color: var(--gold); }
.logo small{ display:block; font-family: var(--font-body); font-size:9px; letter-spacing:.32em; color: rgba(255,255,255,.6); font-weight:400; text-transform:uppercase; margin-top:2px;}

.nav-links{ display:flex; align-items:center; gap:34px; list-style-type:none;}
.nav-links a{
  font-size: 13px; letter-spacing:.05em; color: rgba(255,255,255,0.86); font-weight:400;
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }
.nav-links a:hover{ color: var(--white); }

.nav-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; background:none; border:none; width:40px; height:40px; position:relative; z-index:920;
}
.nav-toggle span{
  display:block; width:22px; height:1.5px; background:#fff; margin:5px auto; transition: all .35s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px){
  .nav-links{
    position:fixed; inset:0; z-index:910;
    background: linear-gradient(180deg, var(--navy-deep), var(--navy));
    flex-direction:column; justify-content:center; gap:30px;
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size:20px; font-family: var(--font-display); }
  .nav-toggle{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  color: var(--white);
  overflow:hidden;
  background: var(--navy-deep);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  animation: heroZoom 16s var(--ease) forwards;
  filter: saturate(0.9) brightness(0.62);
}
@keyframes heroZoom{ to{ transform: scale(1); } }

.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,20,39,0.55) 0%, rgba(7,20,39,0.35) 40%, rgba(7,20,39,0.92) 100%);
}

.hero-sweep{
  position:absolute; top:0; left:-30%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(201,162,75,0.22), transparent);
  transform: skewX(-14deg);
  animation: sweep 2.6s ease-out .3s 1;
  pointer-events:none; z-index:1;
}
@keyframes sweep{ from{ left:-40%; opacity:0; } 30%{ opacity:1; } to{ left:120%; opacity:0; } }

.hero-content{
  position:relative; z-index:2; width:100%;
  padding-bottom: clamp(56px, 9vw, 100px);
  padding-top: 180px;
}
.hero-frame-label{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color: var(--gold-light);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.hero-frame-label .sprockets{ display:inline-flex; gap:4px; }
.hero-frame-label .sprockets span{ width:4px; height:4px; background: var(--gold-light); border-radius:1px; opacity:.8;}

.hero h1{
  font-size: clamp(42px, 8vw, 96px);
  max-width: 15ch;
  color: var(--white);
}
.hero h1 em{
  font-style: italic; color: var(--gold-light); font-weight:500;
}
.hero-sub{
  margin-top:26px; max-width:520px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255,255,255,0.78);
  font-weight:300; line-height:1.7;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:44px; }

.hero-scroll{
  position:absolute; right: var(--gutter); bottom:40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: rgba(255,255,255,.65); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height:46px; background: linear-gradient(180deg, var(--gold), transparent); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold-light);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }

@media (max-width:640px){
  .hero-scroll{ display:none; }
}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  background: var(--navy);
  color: var(--white);
  position:relative;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.stat-item{ text-align:center; padding: 8px 12px; border-right: 1px solid var(--line-light); }
.stat-item:last-child{ border-right:none; }
.stat-num{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(38px, 5vw, 60px);
  color: var(--gold-light);
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.stat-label{
  margin-top:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.68);
}
@media (max-width:760px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:36px 12px; }
  .stat-item{ border-right:none; border-bottom:1px solid var(--line-light); padding-bottom:24px; }
}
.blog-header{
  min-height: 84px;
}
/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 6vw, 90px); align-items:center;
}
.about-media{ position:relative; }
.about-media .frame-primary{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft);
  aspect-ratio: 4/5;
}
.about-media .frame-primary img{ width:100%; height:100%; object-fit:cover; }
.about-media .frame-badge{
  position:absolute; bottom:-30px; left:-30px;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 22px 26px; max-width:220px;
}
.frame-badge .num{ font-family: var(--font-display); font-size:32px; color: var(--navy); font-weight:600; }
.frame-badge .txt{ font-size:12px; color: var(--ink-muted); letter-spacing:.03em; margin-top:4px; }

.about-body p + p{ margin-top:16px; }
.about-list{ margin-top: 28px; display:grid; gap:14px; }
.about-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--ink); }
.about-list svg{ flex-shrink:0; margin-top:3px; color: var(--gold); }
.about-cta{ margin-top:36px; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ margin-bottom:20px; }
  .about-media .frame-badge{ left:16px; bottom:-24px; }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.service-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 3/3.6; box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.service-card img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.service-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(11,31,58,0.05) 0%, rgba(7,14,26,0.92) 82%);
}
.service-card:hover img{ transform: scale(1.08); }
.service-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px;
  color: var(--white);
  transform: translateY(6px); transition: transform .5s var(--ease);
}
.service-card:hover .service-card-body{ transform: translateY(0); }
.service-index{ font-size:12px; color: var(--gold-light); letter-spacing:.2em; margin-bottom:8px; display:block;}
.service-card h3{ color: var(--white); font-size:24px; }
.service-desc{
  max-height:0; overflow:hidden; opacity:0; transition: max-height .5s var(--ease), opacity .4s ease, margin .4s ease;
  font-size:13.5px; color: rgba(255,255,255,.78); font-weight:300; line-height:1.6;
}
.service-card:hover .service-desc, .service-card:focus-within .service-desc{ max-height:120px; opacity:1; margin-top:10px; }
.service-link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-light);}

@media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .services-grid{ grid-template-columns: 1fr; } .service-card{ aspect-ratio:3/2.6; } }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.filter-btn{
  padding:10px 20px; border-radius:100px; border:1px solid var(--line); background: transparent;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-muted);
  transition: all .3s ease;
}
.filter-btn:hover{ border-color: var(--gold); color: var(--navy); }
.filter-btn.active{ background: var(--navy); border-color: var(--navy); color: var(--white); }

.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 14px;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius: var(--radius-md); cursor:pointer;
  grid-column: span 1; grid-row: span 2;
}
.gallery-item.tall{ grid-row: span 3; }
.gallery-item.wide{ grid-column: span 2; grid-row: span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.gallery-item:hover img{ transform: scale(1.1); }
.gallery-item::after{
  content: "\2295"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; background: rgba(11,31,58,0.35); opacity:0; transition: opacity .35s ease;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after{ opacity:1; }

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
  .gallery-item.wide{ grid-column: span 2; }
}
@media (max-width: 520px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:120px; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000; background: rgba(7,14,26,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s ease;
  padding: 24px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(90vw, 1000px); max-height:82vh; border-radius: 10px; box-shadow: var(--shadow-deep); }
.lightbox-caption{ color: rgba(255,255,255,.7); text-align:center; margin-top:16px; font-size:13px; letter-spacing:.05em;}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition: background .3s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(201,162,75,0.28); border-color: var(--gold); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform: translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform: translateY(-50%); }
@media (max-width:640px){ .lightbox-prev,.lightbox-next{ width:40px;height:40px; } }

/* =========================================================
   FILMS
   ========================================================= */
.films-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.film-card{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); background: var(--navy-deep); }
.film-thumb{
  position:relative; aspect-ratio: 16/9; cursor:pointer; overflow:hidden;
}
.film-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.film-thumb:hover img{ transform: scale(1.07); }
.film-thumb::before{ content:""; position:absolute; inset:0; background: rgba(7,14,26,0.32); }
.play-btn{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; color:#fff; z-index:2;
  transition: transform .35s var(--ease), background .35s ease;
}
.film-thumb:hover .play-btn{ transform: translate(-50%,-50%) scale(1.1); background: var(--gold); color: var(--navy-deep); border-color: var(--gold);}
.film-info{ padding: 20px 22px 24px; color: var(--white); }
.film-info h3{ color:#fff; font-size:20px; }
.film-info p{ color: rgba(255,255,255,.6); font-size:13px; margin-top:6px; }

.film-embed-wrap{ position:relative; aspect-ratio:16/9; background:#000; }
.film-embed-wrap iframe{ width:100%; height:100%; border:0; }

@media (max-width: 900px){ .films-grid{ grid-template-columns:1fr; } }

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card{
  background: var(--white); border-radius: var(--radius-lg); padding: 34px 26px;
  box-shadow: var(--shadow-soft); text-align:left; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  border: 1px solid var(--line);
}
.why-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 70px rgba(11,31,58,.16); }
.why-icon{
  width:56px; height:56px; border-radius:16px; background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  display:flex; align-items:center; justify-content:center; color: var(--gold-light); margin-bottom:22px;
}
.why-card h3{ font-size:20px; color: var(--navy); margin-bottom:10px; }
.why-card p{ font-size:14px; color: var(--ink-muted); line-height:1.7; }

@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi-wrap{ position:relative; max-width: 820px; margin: 0 auto; }
.testi-track{ overflow:hidden; }
.testi-slides{ display:flex; transition: transform .6s var(--ease); }
.testi-slide{ flex: 0 0 100%; padding: 4px 6px; }
.testi-card{
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 50px); text-align:center;
}
.testi-stars{ color: var(--gold-light); font-size:18px; letter-spacing:4px; margin-bottom:20px; }
.testi-quote{ font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 26px); font-weight:500; line-height:1.5; color:#fff; }
.testi-meta{ margin-top:26px; display:flex; align-items:center; justify-content:center; gap:14px; }
.testi-meta img{ width:48px; height:48px; border-radius:50%; object-fit:cover; border: 2px solid var(--gold); }
.testi-name{ font-size:14px; color:#fff; font-weight:600; }
.testi-role{ font-size:12px; color: rgba(255,255,255,.55); }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:36px; }
.testi-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center; transition: all .3s ease;
}
.testi-arrow:hover{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.testi-dots{ display:flex; gap:8px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.3); border:none; transition: all .3s ease; }
.testi-dot.active{ background: var(--gold); width:22px; border-radius:5px; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--navy-soft));
  color:#fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 76px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:34px;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,75,0.22), transparent 70%);
  top:-160px; right:-120px;
}
.cta-text h2{ color:#fff; max-width:14ch; }
.cta-text p{ margin-top:14px; color: rgba(255,255,255,.72); max-width:44ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; position:relative; z-index:1; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px,5vw,70px); }
.contact-info-card{
  background: var(--navy); color:#fff; border-radius: var(--radius-lg); padding: clamp(28px,4vw,44px);
  height: fit-content;
}
.contact-info-card h3{ color:#fff; }
.contact-info-list{ margin-top:28px; display:grid; gap:22px; }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-item .ic{
  width:40px; height:40px; border-radius:11px; background: rgba(201,162,75,0.15); color: var(--gold-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-item strong{ display:block; font-size:14px; margin-bottom:2px; }
.contact-info-item span, .contact-info-item a{ font-size:13.5px; color: rgba(255,255,255,.68); }
.contact-socials{ display:flex; gap:10px; margin-top:30px; }
.contact-socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.contact-socials a:hover{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

.form-card{
  background: var(--white); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
}
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-muted); font-weight:500; }
.form-field input, .form-field select, .form-field textarea{
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; font-size:14.5px; color: var(--ink);
  background: var(--ivory); transition: border-color .3s ease, box-shadow .3s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,75,0.15); outline:none;
}
.form-field textarea{ resize: vertical; min-height:110px; }
.form-error{ font-size:12px; color:#B3261E; min-height:14px; }
.form-submit{ margin-top:8px; width:100%; }
.form-note{ font-size:12px; color: var(--ink-muted); margin-top:14px; text-align:center; }
.form-success{ display:none; text-align:center; padding: 40px 10px; }
.form-success.show{ display:block; }
.form-success .check{
  width:64px; height:64px; border-radius:50%; background: rgba(31,138,84,.12); color:#1F8A54;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}

@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.7); padding-top: 80px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 40px; padding-bottom: 60px;
  border-bottom: 1px solid var(--line-light);
}
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ font-size:13.5px; line-height:1.7; max-width:32ch; }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; font-weight:600; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ font-size:13.5px; color: rgba(255,255,255,.65); transition: color .3s ease; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-socials{ display:flex; gap:10px; margin-top:6px; }
.footer-socials a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.footer-socials a:hover{ background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding: 26px 0; font-size:12.5px; color: rgba(255,255,255,.5);
}
.footer-bottom a{ color: rgba(255,255,255,.5); }
.footer-bottom a:hover{ color: var(--gold-light); }

@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.floating-buttons{
  position: fixed; right: 20px; bottom: 22px; z-index: 850;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px rgba(7,20,39,0.3); color:#fff; border:none; transition: transform .35s var(--ease);
}
.fab:hover{ transform: translateY(-4px) scale(1.05); }
.fab-whatsapp{ background:#1F8A54; }
.fab-call{ background: var(--navy); }
.fab-top{
  background: var(--white); color: var(--navy); border: 1px solid var(--line);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .35s var(--ease);
}
.fab-top.show{ opacity:1; visibility:visible; transform: translateY(0); }

/* Section divider ornament */
.film-divider{
  display:flex; align-items:center; justify-content:center; gap:14px; margin: 6px 0 46px;
  color: var(--ink-muted); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
}
.film-divider::before, .film-divider::after{ content:""; height:1px; width:70px; background: var(--line); }
.section-dark .film-divider{ color: rgba(255,255,255,.5); }
.section-dark .film-divider::before, .section-dark .film-divider::after{ background: var(--line-light); }

.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;
}