/* ==========================================================================
   VASUDEV JYOTISH & MARRIAGE BUREAU — stylesheet
   Design tokens
   ========================================================================== */
:root{
  --paper:        #FFF6E8;
  --paper-deep:   #FDE9C4;
  --maroon:       #D81E4B;
  --maroon-deep:  #8A0E33;
  --maroon-soft:  #F0407A;
  --gold:         #F2A93C;
  --gold-light:   #FFD65C;
  --vermillion:   #FF5A36;
  --indigo:       #2B1A6B;
  --indigo-deep:  #170D42;
  --ink:          #2B1B12;
  --ink-soft:     #5A493D;
  --cream-line:   rgba(242,169,60,0.4);

  --font-display: 'Yatra One', cursive;
  --font-accent:  'Cinzel', serif;
  --font-body:    'Hind', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 18px 40px -18px rgba(74,13,24,0.35);
  --shadow-card: 0 10px 30px -12px rgba(27,31,59,0.25);
  --ease: cubic-bezier(.22,.68,0,1.02);

  /* Real header height gets written here by script.js (header.offsetHeight).
     This value is only the fallback used before JS runs / if JS fails,
     so the layout still looks reasonable on first paint. */
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@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; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--font-accent);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:600;
  color:var(--vermillion);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--vermillion);
  display:inline-block;
}

.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{
  font-family:var(--font-accent);
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight:700;
  color:var(--maroon-deep);
  margin:10px 0 14px;
  line-height:1.2;
}
.section-head p{ color:var(--ink-soft); font-size:1.02rem; margin:0; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(251,241,225,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-line);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
  /* Respect iOS notch / punch-hole camera safe area so the header's real
     rendered height (which script.js measures into --header-h) already
     includes that inset — keeps the hero gap correct on those devices too. */
  padding-top:env(safe-area-inset-top, 0px);
}
.site-header.scrolled{ box-shadow:0 8px 24px -16px rgba(74,13,24,.4); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  height:48px;
  width:auto;
  flex-shrink:0;
  object-fit:contain;
  display:block;
}
.brand-text{ line-height:1.15; }
.brand-text .brand-name{
  font-family:var(--font-accent);
  font-weight:700;
  font-size:1.02rem;
  color:var(--maroon-deep);
  letter-spacing:.02em;
}
.brand-text .brand-sub{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vermillion);
  font-weight:600;
}

.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:.92rem; font-weight:600; color:var(--ink);
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--vermillion); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:12px 22px; border-radius:999px; border:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.btn-call{
  background:var(--maroon); color:var(--paper);
  box-shadow:var(--shadow-soft);
}
.btn-call:hover{ transform:translateY(-2px); background:var(--maroon-deep); }
.btn-outline{
  background:transparent; color:var(--maroon); border:1.5px solid var(--maroon);
}
.btn-outline:hover{ background:var(--maroon); color:var(--paper); }
.btn-wa{ background:#2f7d5c; color:#fff; }
.btn-wa:hover{ transform:translateY(-2px); background:#256349; }

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:10px; border:1.5px solid var(--maroon);
  background:transparent; align-items:center; justify-content:center; cursor:pointer;
}
.nav-drawer-close{ display:none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--maroon); position:relative; transition:.3s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; background:rgba(23,13,66,.5);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  z-index:205; backdrop-filter:blur(2px);
}
.nav-overlay.visible{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  /* Was a hardcoded "150px 0 90px" — that guessed value fell short on
     phones where the header renders taller (larger font scale, wrapped
     brand text, notch insets), causing the hero content to start
     underneath the fixed header instead of below it. --header-h is kept
     in sync with the header's real height by script.js, so this gap is
     always correct regardless of device. */
  padding: calc(var(--header-h) + 30px) 0 90px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,214,92,.35), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(255,90,54,.30), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(242,169,60,.22), transparent 50%),
    linear-gradient(135deg, var(--indigo) 0%, var(--maroon) 55%, var(--vermillion) 100%);
  overflow:hidden;
}
.hero .stars{ position:absolute; inset:0; pointer-events:none; }
.hero .stars span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-light); opacity:.6;
  animation:twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.8);} 50%{ opacity:.9; transform:scale(1.3);} }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:18px; color:var(--gold-light); }
.hero-copy .eyebrow::before{ background:var(--gold-light); }
.hero-copy h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--paper);
  line-height:1.15;
  margin:0 0 8px;
}
.hero-copy .h1-sub{
  font-family:var(--font-accent);
  font-weight:600;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  color:var(--gold-light);
  margin:0 0 22px;
  letter-spacing:.02em;
}
.hero-copy p.lead{
  color:rgba(255,246,232,.86); font-size:1.08rem; max-width:520px; margin:0 0 30px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:34px; }
.hero-actions .btn-call{
  background:var(--gold-light); color:var(--maroon-deep);
  box-shadow:0 14px 32px -12px rgba(0,0,0,.45);
}
.hero-actions .btn-call:hover{ background:#FFE38C; transform:translateY(-2px); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:26px;
}
.hero-meta div{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:rgba(255,246,232,.82); }
.hero-meta strong{ color:var(--gold-light); font-family:var(--font-accent); }
.badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold-light); flex-shrink:0; }

/* hero photo visual */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-photo-wrap{
  position:relative; width:min(100%, 520px); aspect-ratio:1/1;
  margin-left:auto; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
}
.hero-photo{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-photo-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 45%, rgba(20,8,25,.65) 100%);
}
.hero-photo-badge{
  position:absolute; left:22px; bottom:22px;
  display:flex; align-items:center; gap:8px;
  padding:10px 15px;
  color:#fff; font-family:var(--font-body); font-size:.82rem;
  background:rgba(20,8,25,.68);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  backdrop-filter:blur(10px);
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  background:var(--maroon); color:var(--gold-light);
  overflow:hidden; white-space:nowrap; padding:12px 0;
  border-top:1px solid rgba(201,151,75,.4); border-bottom:1px solid rgba(201,151,75,.4);
}
.marquee-track{
  display:inline-block; padding-left:100%;
  animation:marquee 26s linear infinite;
  font-family:var(--font-accent); font-size:.85rem; letter-spacing:.06em;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{
  background:linear-gradient(120deg, var(--gold-light), var(--gold));
  padding:26px 0;
}
.trust-inner{
  display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:center;
}
.trust-item{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--maroon-deep); font-weight:700; }
.trust-item svg{ width:20px; height:20px; color:var(--maroon); flex-shrink:0; }

/* ==========================================================================
   Banner strip (full-width promotional image between sections)
   ========================================================================== */
.banner-strip{
  background:var(--paper-deep);
  padding:22px 0;
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
}
.banner-strip .banner-inner{
  max-width:1400px; margin:0 auto; padding:0 24px;
}
.banner-svg{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}

/* ==========================================================================
   About
   ========================================================================== */
.about{ padding:100px 0; }
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.about-emblem{ position:relative; }
.about-photo-wrap{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.about-photo{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.about-copy h2{
  font-family:var(--font-accent); font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--maroon-deep); margin:10px 0 20px;
}
.about-copy p{ color:var(--ink-soft); margin:0 0 16px; }
.about-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:26px; }
.about-facts div{ border-left:2px solid var(--gold); padding-left:14px; }
.about-facts span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--vermillion); font-weight:700; margin-bottom:4px; }
.about-facts strong{ font-family:var(--font-accent); color:var(--maroon-deep); font-size:.98rem; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{
  padding:100px 0;
  background:linear-gradient(135deg, var(--maroon), var(--vermillion));
  position:relative; overflow:hidden;
}
.services::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 15%, rgba(255,214,92,.22), transparent 45%),
             radial-gradient(circle at 90% 85%, rgba(43,26,107,.28), transparent 45%);
}
.services .container{ position:relative; z-index:1; }
.services .eyebrow{ color:var(--gold-light); }
.services .eyebrow::before{ background:var(--gold-light); }
.services .section-head h2{ color:var(--paper); }
.services .section-head p{ color:rgba(255,246,232,.85); }
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  align-items:stretch;
}

.service-card{
  display:flex; flex-direction:column;
  background:var(--paper); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px -16px rgba(23,13,66,.5); }

/* Media area — same fixed aspect ratio for every card (photo or icon) so the grid stays even */
.service-media{
  width:100%; aspect-ratio:16/10; overflow:hidden; flex-shrink:0;
  background:var(--paper-deep);
}
.service-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-media.service-media-icon{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--indigo), var(--indigo-deep));
}
.service-media.service-media-icon svg{ width:44%; height:44%; color:var(--gold-light); }

.service-body{ padding:22px 24px 4px; flex:1; }
.service-tag{
  display:block; font-family:var(--font-accent); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vermillion); margin-bottom:8px; font-weight:700;
}
.service-card h3{ font-family:var(--font-accent); font-size:1.1rem; margin:0 0 10px; color:var(--maroon-deep); line-height:1.3; }
.service-card p{ color:var(--ink-soft); margin:0; font-size:.92rem; }

/* Highlighted priority services (Love Back / Love Marriage / Marriage Problems) */
.service-card.highlighted{ border:1px solid rgba(242,169,60,.6); }
.service-card.highlighted .service-tag{ color:var(--vermillion); }
.service-card.highlighted h3{ color:var(--maroon-deep); }
.service-card.highlighted p{ color:var(--ink-soft); }

/* Separator line between the text and the action buttons */
.service-divider{
  height:1px; margin:18px 24px 0;
  background:repeating-linear-gradient(90deg, var(--cream-line) 0 6px, transparent 6px 12px);
}

/* Call / Video Call / WhatsApp action row — appears on every service card */
.service-actions{
  display:flex; gap:8px; padding:16px 24px 24px;
}
.service-action{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px 6px; border-radius:999px; font-size:.74rem; font-weight:700;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-action:hover{ transform:translateY(-2px); box-shadow:0 10px 18px -8px rgba(0,0,0,.3); }
.service-action .action-icon{ font-size:.85rem; }
.service-action.action-call{ background:var(--maroon); color:var(--paper); }
.service-action.action-video{ background:var(--indigo); color:var(--paper); }
.service-action.action-whatsapp{ background:#2f7d5c; color:#fff; }

/* ==========================================================================
   Zoomable image trigger (certificate thumbnail) + lightbox
   ========================================================================== */
.gallery-item{
  position:relative; padding:0; border:none; cursor:zoom-in;
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--shadow-card); background:var(--paper-deep);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(23,13,66,.55), transparent 55%);
  opacity:0; transition:opacity .3s var(--ease);
}
.gallery-item:hover::after{ opacity:1; }
.gallery-zoom{
  position:absolute; right:14px; bottom:14px; z-index:1;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery-item:hover .gallery-zoom{ opacity:1; transform:translateY(0); }

.lightbox{
  position:fixed; inset:0; z-index:400;
  background:rgba(16,10,40,.92);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(900px, 100%); max-height:85vh;
  border-radius:var(--radius-md); box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.08); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-close svg{ width:20px; height:20px; }

/* ==========================================================================
   Certified / genuine section
   ========================================================================== */
.certified{
  padding:100px 0; background:var(--indigo); color:var(--paper); position:relative; overflow:hidden;
}
.certified::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(201,151,75,.14), transparent 45%),
             radial-gradient(circle at 80% 80%, rgba(192,57,43,.14), transparent 45%);
}
.certified .section-head p{ color:rgba(251,241,225,.72); }
.certified .section-head h2{ color:var(--paper); }
.certified .eyebrow{ color:var(--gold-light); }
.certified .eyebrow::before{ background:var(--gold-light); }

.cert-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:10px;
}
.cert-card{
  background:rgba(251,241,225,0.04);
  border:1px solid rgba(201,151,75,.35);
  border-radius:var(--radius-lg);
  padding:26px; backdrop-filter:blur(4px);
}
.cert-badge{
  width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,214,92,.28), rgba(242,169,60,.08));
  border:1.5px solid rgba(242,169,60,.55);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; position:relative;
}
.cert-badge::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(242,169,60,.35);
  animation:spin 40s linear infinite;
}
.cert-badge svg{ width:36px; height:36px; color:var(--gold-light); }

.cert-badge-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.cert-badge-row .cert-badge{ margin-bottom:0; flex-shrink:0; }
.cert-thumb{
  width:64px; height:82px; padding:0; border:none; cursor:zoom-in;
  border-radius:10px; overflow:hidden; position:relative; flex-shrink:0;
  border:2px solid rgba(242,169,60,.55);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.cert-thumb:hover{ transform:scale(1.05); }
.cert-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cert-thumb .gallery-zoom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(23,13,66,.45); font-size:.9rem; opacity:0; transition:opacity .25s var(--ease);
}
.cert-thumb:hover .gallery-zoom{ opacity:1; }

.cert-card h3{
  font-family:var(--font-accent); font-size:1.05rem; margin:0 0 10px; color:var(--gold-light);
  display:flex; align-items:center; gap:10px;
}
.cert-card h3 svg{ width:20px; height:20px; }
.cert-list{ display:grid; gap:8px; }
.cert-list li{ display:flex; justify-content:space-between; gap:16px; font-size:.86rem; padding:8px 0; border-bottom:1px dashed rgba(201,151,75,.25); }
.cert-list li span:first-child{ color:rgba(251,241,225,.6); }
.cert-list li span:last-child{ font-weight:600; text-align:right; }

.cert-note{
  position:relative; z-index:1; margin-top:36px; text-align:center;
  font-size:.85rem; color:rgba(251,241,225,.65); max-width:640px; margin-left:auto; margin-right:auto;
}

/* ==========================================================================
   Process (marriage matchmaking steps)
   ========================================================================== */
.process{ padding:100px 0; }
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; counter-reset:step;
}
.process-step{ position:relative; padding-top:8px; }
.process-step .step-num{
  font-family:var(--font-display); font-size:2.6rem; color:var(--gold);
  line-height:1; margin-bottom:12px; display:block;
}
.process-step h4{ font-family:var(--font-accent); font-size:1.02rem; color:var(--maroon-deep); margin:0 0 8px; }
.process-step p{ color:var(--ink-soft); font-size:.9rem; margin:0; }
.process-step:not(:last-child)::after{
  content:""; position:absolute; top:22px; left:100%; width:36px;
  height:1px; background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
  display:none;
}
@media (min-width:900px){ .process-step:not(:last-child)::after{ display:block; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  padding:100px 0;
  background:linear-gradient(120deg, var(--gold), var(--vermillion) 130%);
  position:relative;
}
.faq .eyebrow{ color:var(--indigo); }
.faq .eyebrow::before{ background:var(--indigo); }
.faq .section-head h2{ color:var(--maroon-deep); }
.faq .section-head p{ color:rgba(43,27,18,.72); }
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid rgba(43,27,18,.18);
}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; font-family:var(--font-accent); font-size:1rem; color:var(--maroon-deep); font-weight:700;
}
.faq-q .chev{ transition:transform .3s var(--ease); flex-shrink:0; width:18px; height:18px; color:var(--indigo); }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 4px 22px; color:rgba(43,27,18,.78); font-size:.94rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding:100px 0 60px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-card{
  background:var(--paper); border-radius:var(--radius-lg); border:1px solid var(--cream-line);
  padding:36px; box-shadow:var(--shadow-card);
}
.contact-card h3{ font-family:var(--font-accent); color:var(--maroon-deep); margin:0 0 18px; font-size:1.2rem; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--cream-line); }
.contact-row:last-child{ border-bottom:none; }
.contact-row svg{ width:22px; height:22px; color:var(--vermillion); flex-shrink:0; margin-top:2px; }
.contact-row a{ font-weight:600; color:var(--maroon-deep); }
.contact-row .static-text{ font-weight:600; color:var(--maroon-deep); }
.contact-row span{ display:block; font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.contact-note{
  margin:20px 0 0; padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(242,169,60,.16); border:1px dashed rgba(242,169,60,.55);
  font-size:.85rem; color:var(--maroon-deep); font-weight:600;
}

.contact-panel{
  background:linear-gradient(160deg, var(--maroon), var(--maroon-deep));
  border-radius:var(--radius-lg); padding:36px; color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-panel h3{ font-family:var(--font-display); font-size:1.6rem; margin:0 0 12px; }
.contact-panel p{ color:rgba(251,241,225,.82); margin:0 0 26px; }
.contact-panel .btn-call{ background:var(--gold); color:var(--maroon-deep); }
.contact-panel .btn-call:hover{ background:var(--gold-light); }
.contact-panel .btn-outline{ border-color:rgba(251,241,225,.5); color:var(--paper); }
.contact-panel .btn-outline:hover{ background:rgba(251,241,225,.12); }
.contact-panel .panel-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--indigo-deep); color:rgba(251,241,225,.7); padding:60px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand .brand-name{ color:var(--paper); font-family:var(--font-accent); font-size:1.1rem; font-weight:700; }
.footer-brand p{ margin:14px 0 0; font-size:.88rem; line-height:1.7; }
.footer-col h4{ color:var(--gold-light); font-family:var(--font-accent); font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px; }
.footer-col ul li{ margin-bottom:10px; font-size:.88rem; }
.footer-col ul li a:hover{ color:var(--gold-light); }
.footer-bottom{
  border-top:1px solid rgba(201,151,75,.2); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.78rem;
}

/* ==========================================================================
   Floating buttons
   ========================================================================== */
.floating-actions{
  position:fixed; right:20px; bottom:20px; z-index:250;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.4); transition:transform .25s var(--ease);
}
.fab:hover{ transform:scale(1.08); }
.fab.fab-call{ background:var(--maroon); color:var(--paper); }
.fab.fab-wa{ background:#2f7d5c; color:#fff; }
.fab svg{ width:24px; height:24px; }

.scroll-top{
  position:fixed; left:20px; bottom:20px; z-index:250;
  width:44px; height:44px; border-radius:50%; background:var(--paper);
  border:1.5px solid var(--maroon); color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.scroll-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.scroll-top svg{ width:18px; height:18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .hero-grid, .about-grid, .cert-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; margin-bottom:20px; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:span 2; }
}

@media (max-width: 760px){
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:80%; max-width:320px; height:100vh;
    background:var(--paper); flex-direction:column; gap:0;
    padding:100px 28px 30px; align-items:stretch;
    transform:translateX(100%);
    box-shadow:-16px 0 44px -14px rgba(23,13,66,.45);
    transition:transform .4s var(--ease);
    z-index:210; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ padding:16px 0; border-bottom:1px solid var(--cream-line); font-size:1.05rem; }
  .nav-drawer-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:22px; right:22px; width:38px; height:38px;
    border-radius:50%; border:1.5px solid var(--maroon); background:transparent;
    color:var(--maroon); cursor:pointer;
  }
  .nav-drawer-close svg{ width:18px; height:18px; }
  .nav-toggle{ display:flex; }
  .header-cta .btn-call span.txt{ display:none; }
  .header-cta .btn-call{ padding:12px; }
  /* Was a hardcoded "120px 0 60px" — same reasoning as the base .hero
     rule above: derive the top gap from the real, measured header
     height instead of a guessed value so it never collapses to zero
     on phones with a taller header. */
  .hero{ padding: calc(var(--header-h) + 20px) 0 60px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-meta{ flex-direction:column; gap:12px; }
  .services-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-brand{ grid-column:span 1; }
  .about-facts{ grid-template-columns:1fr; }
  .hero-photo-wrap{ width:100%; max-width:440px; margin:0 auto; }
}

@media (max-width: 420px){
  .container{ padding:0 18px; }
  .hero-copy h1{ font-size:2.1rem; }
  .service-actions{ gap:6px; padding:14px 18px 20px; }
  .service-action{ font-size:.68rem; padding:8px 4px; gap:3px; }
  .service-body{ padding:20px 18px 4px; }
  .cert-badge-row{ flex-wrap:wrap; }
  .contact-card, .contact-panel{ padding:26px 22px; }
}