/* =================================================================
   AL-QALAM HOME SCHOOL — DESIGN SYSTEM
   Navy & gold, manuscript-meets-modern. Motion language: warm
   spring/bounce easing used consistently for interaction + reveal.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  /* --- color tokens --- */
  --navy-950:#040d1a;
  --navy-900:#071a30;
  --navy-800:#0e2340;
  --navy-700:#173456;
  --navy-600:#284670;

  --gold-300:#eec488;
  --gold-500:#cf9a4a;
  --gold-600:#b07f34;

  --parchment:#f7f1e3;
  --parchment-dim:#d9d3c4;
  --slate:#9fb0c9;
  --ink:#0a1424;

  --success:#7bb98e;

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

  /* --- spacing / shape --- */
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --container:1160px;

  /* --- motion --- */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.25s;
  --dur-med:.55s;
  --dur-slow:.9s;
}

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

body{
  margin:0;
  background:var(--navy-900);
  color:var(--parchment);
  font-family:var(--font-body);
  font-weight:400;
  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; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* subtle grain / vignette so the flat navy never looks like a plain div */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(207,154,74,.10), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 100%, rgba(23,52,86,.5), transparent 60%);
}

:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--gold-500); color:var(--ink); }

/* =================================================================
   TYPOGRAPHY
   ================================================================= */
.eyebrow{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold-300);
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:500;
}
.eyebrow::before,.eyebrow::after{
  content:"";
  width:26px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-500));
}
.eyebrow::after{ background:linear-gradient(90deg, var(--gold-500), transparent); }

h1,h2,h3,.font-display{ font-family:var(--font-display); font-weight:600; color:var(--parchment); }

h1{ font-size:clamp(2.6rem, 5.2vw, 4.4rem); line-height:1.06; letter-spacing:-.01em; }
h2{ font-size:clamp(2rem, 3.4vw, 2.9rem); line-height:1.14; }
h3{ font-size:clamp(1.35rem, 2vw, 1.6rem); line-height:1.3; }

.lede{
  font-size:clamp(1.05rem, 1.4vw, 1.22rem);
  color:var(--slate);
  max-width:56ch;
}
.italic-accent{ font-style:italic; color:var(--gold-300); }

.section-head{
  max-width:640px;
  margin-bottom:48px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }

/* =================================================================
   BUTTONS — bounce/spring interaction language
   ================================================================= */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  white-space:nowrap;
}
.btn:active{ transform:scale(.94); }

.btn-gold{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-600));
  color:var(--ink);
  box-shadow:0 10px 24px -8px rgba(207,154,74,.55);
}
.btn-gold:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 16px 30px -8px rgba(207,154,74,.7); }

.btn-outline{
  border-color:var(--gold-500);
  color:var(--parchment);
  background:rgba(238,196,136,.04);
}
.btn-outline:hover{
  transform:translateY(-4px) scale(1.02);
  background:rgba(238,196,136,.14);
  border-color:var(--gold-300);
}

.btn-ghost{
  color:var(--gold-300);
  padding:15px 8px;
}
.btn-ghost::after{ content:"›"; margin-left:2px; transition:transform var(--dur-fast) var(--spring); display:inline-block; }
.btn-ghost:hover::after{ transform:translateX(6px); }

.btn-small{ padding:10px 20px; font-size:.85rem; }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:18px 0;
  background:rgba(4,13,26,.35);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(238,196,136,.12);
  transition:padding var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.site-header.scrolled{ padding:10px 0; background:rgba(4,13,26,.72); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{ width:44px; height:auto; filter:drop-shadow(0 4px 10px rgba(207,154,74,.35)); transition:transform var(--dur-med) var(--spring); }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.08); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--parchment); }
.brand-sub{ font-size:.62rem; letter-spacing:.24em; color:var(--gold-300); font-weight:500; }

.site-nav{ display:flex; align-items:center; gap:34px; }
.site-nav ul{ display:flex; gap:30px; }
.site-nav a:not(.btn){
  position:relative;
  font-size:.92rem; font-weight:500; color:var(--parchment-dim);
  padding:6px 0;
  transition:color var(--dur-fast);
}
.site-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold-300);
  transition:width var(--dur-med) var(--spring);
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).active{ color:var(--parchment); }
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn).active::after{ width:100%; }

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px; height:44px;
  background:rgba(238,196,136,.08);
  border:1px solid rgba(238,196,136,.25);
  border-radius:10px;
}
.menu-toggle span{
  width:20px; height:2px; margin-inline:auto;
  background:var(--gold-300);
  transition:transform var(--dur-fast) var(--spring), opacity var(--dur-fast);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 940px){
  .menu-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,26,48,.98);
    border-bottom:1px solid rgba(238,196,136,.18);
    max-height:0; overflow:hidden;
    transition:max-height var(--dur-med) var(--ease-out);
  }
  .site-nav.open{ max-height:520px; transition:max-height var(--dur-med) var(--spring); }
  .site-nav ul{ flex-direction:column; gap:0; padding:12px 24px; }
  .site-nav ul li{ border-bottom:1px solid rgba(238,196,136,.08); }
  .site-nav ul li a{ display:block; padding:16px 4px; }
  .site-nav .nav-cta{ margin:8px 24px 22px; }
}

/* =================================================================
   STAR FIELD (ambient — single consistent motif site-wide)
   ================================================================= */
.stars-field{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.stars-field span{
  position:absolute;
  width:3px; height:3px;
  background:var(--gold-300);
  border-radius:50%;
  opacity:.5;
  animation:twinkle 4s ease-in-out infinite;
  box-shadow:0 0 6px 1px rgba(238,196,136,.6);
}
@keyframes twinkle{
  0%,100%{ opacity:.15; transform:scale(.7); }
  50%{ opacity:.9; transform:scale(1.3); }
}

/* =================================================================
   PAGE HERO — inner pages
   ================================================================= */
.page-hero{
  position:relative;
  padding:168px 0 96px;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(207,154,74,.14), transparent 65%),
    var(--navy-900);
  border-bottom:1px solid rgba(238,196,136,.1);
  text-align:center;
  overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:18px; }
.page-hero-mark{ width:64px; margin-bottom:6px; animation:floatY 5s ease-in-out infinite; }
.page-hero p.lede{ max-width:60ch; margin-inline:auto; }

@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* breadcrumb-ish crumb row */
.crumb{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--slate); letter-spacing:.05em;
}
.crumb strong{ color:var(--gold-300); font-weight:500; }

/* =================================================================
   HOME HERO
   ================================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 1000px 620px at 50% 8%, rgba(207,154,74,.16), transparent 62%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 70%);
}
.hero .container{ position:relative; z-index:2; }
.hero-content{
  max-width:800px;
  margin-inline:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.hero-mark{
  width:96px;
  animation:heroMarkIn 1s var(--spring) both, floatY 5s ease-in-out 1s infinite;
}
@keyframes heroMarkIn{
  0%{ opacity:0; transform:translateY(-50px) scale(.6) rotate(-10deg); }
  60%{ opacity:1; transform:translateY(8px) scale(1.08) rotate(2deg); }
  100%{ opacity:1; transform:translateY(0) scale(1) rotate(0); }
}

.hero-title{
  opacity:0;
  animation:fadeUp .9s var(--ease-out) .35s forwards;
}
.hero-sub{
  opacity:0;
  animation:fadeUp .9s var(--ease-out) .55s forwards;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

.signature{
  width:min(360px, 70%);
  height:26px;
  margin-top:-10px;
}
.signature path{
  fill:none;
  stroke:var(--gold-500);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:draw 1.3s var(--ease-out) 1s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-cta{
  opacity:0;
  animation:fadeUp .9s var(--ease-out) .8s forwards;
}

.hero-stats{
  opacity:0;
  animation:fadeUp .9s var(--ease-out) 1s forwards;
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  width:100%;
  max-width:820px;
}
.stat{
  text-align:center;
  padding:18px 8px;
  border-left:1px solid rgba(238,196,136,.14);
}
.stat:first-child{ border-left:none; }
.stat-number{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--gold-300);
  font-weight:600;
  display:block;
}
.stat-label{ font-size:.78rem; color:var(--slate); letter-spacing:.03em; margin-top:4px; display:block; }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--slate); font-size:.72rem; letter-spacing:.2em;
  z-index:2;
  opacity:.8;
}
.scroll-cue span.arrow{
  width:10px; height:10px;
  border-right:1.5px solid var(--gold-300);
  border-bottom:1.5px solid var(--gold-300);
  transform:rotate(45deg);
  animation:bounceArrow 1.8s ease-in-out infinite;
}
@keyframes bounceArrow{
  0%,100%{ transform:rotate(45deg) translate(0,0); }
  50%{ transform:rotate(45deg) translate(6px,6px); }
}

@media (max-width:720px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
}

/* =================================================================
   SECTIONS / LAYOUT
   ================================================================= */
section{ position:relative; padding:100px 0; z-index:1; }
.section-alt{ background:var(--navy-950); }
.section-tight{ padding:70px 0; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }

@media (max-width:940px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-6{ grid-template-columns:repeat(2,1fr); }
}

/* reveal-on-scroll (bounce-in) */
.reveal{ opacity:0; }
.reveal.in-view{
  animation:bounceIn var(--dur-slow) var(--spring) forwards;
  animation-delay:var(--delay,0s);
}
@keyframes bounceIn{
  0%{ opacity:0; transform:translateY(46px) scale(.94); }
  55%{ opacity:1; transform:translateY(-10px) scale(1.015); }
  75%{ transform:translateY(4px) scale(.998); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* =================================================================
   CARDS — curriculum split + subject cards + value cards
   ================================================================= */
.split-card{
  background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--navy-700);
  border-radius:var(--radius-lg);
  padding:40px 34px;
  position:relative;
  overflow:hidden;
  transition:transform var(--dur-med) var(--spring), border-color var(--dur-fast), box-shadow var(--dur-med);
}
.split-card::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.split-card:hover{
  transform:translateY(-8px);
  border-color:rgba(238,196,136,.4);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.55);
}
.card-icon{
  width:56px; height:56px;
  border:1.5px solid var(--gold-500);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  color:var(--gold-300);
  margin-bottom:20px;
  transition:transform var(--dur-med) var(--spring);
}
.split-card:hover .card-icon{ transform:scale(1.1) rotate(-6deg); }
.split-card h3{ margin-bottom:6px; }
.card-kicker{ color:var(--gold-300); font-size:.8rem; letter-spacing:.1em; font-weight:500; }
.split-card ul{ margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.split-card li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.95rem; color:var(--parchment-dim);
}
.split-card li::before{
  content:"◆"; color:var(--gold-500); font-size:.55rem; margin-top:6px; flex-shrink:0;
}
.split-card .btn-ghost{ margin-top:20px; }

/* smaller subject cards (curriculum/islamic pages) */
.subject-card{
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-md);
  padding:30px 26px;
  transition:transform var(--dur-med) var(--spring), border-color var(--dur-fast);
}
.subject-card:hover{ transform:translateY(-6px); border-color:rgba(238,196,136,.35); }
.subject-card .num{ font-family:var(--font-display); font-size:1rem; color:var(--gold-500); }
.subject-card h3{ margin:10px 0 8px; }
.subject-card p{ color:var(--slate); font-size:.94rem; }

/* value / feature cards */
.value-card{ text-align:center; padding:34px 22px; }
.value-card .card-icon{ margin-inline:auto; }

/* pull quote */
.quote-block{
  max-width:760px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.quote-mark{ font-family:var(--font-display); font-size:4rem; color:var(--gold-500); line-height:0; opacity:.7; }
.quote-block p.quote{ font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.8rem); font-style:italic; color:var(--parchment); }
.quote-cite{ color:var(--slate); font-size:.85rem; letter-spacing:.05em; }

/* =================================================================
   TIMELINE (admissions process — genuine sequence)
   ================================================================= */
.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute; top:26px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(90deg, var(--gold-500) 0 8px, transparent 8px 16px);
  opacity:.5;
}
.timeline-step{ position:relative; text-align:left; }
.timeline-step .step-num{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-600));
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  margin-bottom:20px;
  position:relative; z-index:1;
  box-shadow:0 8px 20px -6px rgba(207,154,74,.6);
}
.timeline-step h3{ margin-bottom:8px; font-size:1.2rem; }
.timeline-step p{ color:var(--slate); font-size:.92rem; }

@media (max-width:940px){
  .timeline{ grid-template-columns:1fr; gap:36px; }
  .timeline::before{ display:none; }
}

/* =================================================================
   SCHEDULE TABLE
   ================================================================= */
.schedule{
  width:100%;
  border-collapse:collapse;
  background:var(--navy-800);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.schedule th,.schedule td{
  padding:16px 18px;
  text-align:left;
  border-bottom:1px solid var(--navy-700);
  font-size:.92rem;
}
.schedule th{
  background:var(--navy-700);
  color:var(--gold-300);
  font-weight:500;
  letter-spacing:.03em;
  font-size:.8rem;
}
.schedule tr:last-child td{ border-bottom:none; }
.schedule td:first-child{ color:var(--gold-300); font-weight:500; white-space:nowrap; }
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); }

/* =================================================================
   REQUIREMENTS LIST
   ================================================================= */
.check-list{ display:flex; flex-direction:column; gap:16px; }
.check-list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-sm);
  font-size:.94rem;
  color:var(--parchment-dim);
  transition:transform var(--dur-fast) var(--spring), border-color var(--dur-fast);
}
.check-list li:hover{ transform:translateX(6px); border-color:rgba(238,196,136,.35); }
.check-list li .tick{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--gold-500); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700;
}

/* =================================================================
   FAQ ACCORDION
   ================================================================= */
.faq{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin-inline:auto; }
.faq-item{
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color var(--dur-fast);
}
.faq-item.open{ border-color:rgba(238,196,136,.4); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  background:none; border:none; color:var(--parchment);
  font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  text-align:left;
}
.faq-q .plus{
  flex-shrink:0;
  width:30px; height:30px;
  border:1.5px solid var(--gold-500);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-300);
  transition:transform var(--dur-med) var(--spring), background var(--dur-fast);
  font-size:1rem;
}
.faq-item.open .plus{ transform:rotate(135deg) scale(1.1); background:rgba(238,196,136,.12); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-med) var(--ease-out), padding var(--dur-med);
  padding:0 26px;
  color:var(--slate);
  font-size:.95rem;
}
.faq-item.open .faq-a{ max-height:260px; padding:0 26px 24px; }

/* =================================================================
   CTA BANNER
   ================================================================= */
.cta-banner{
  position:relative;
  border-radius:var(--radius-lg);
  padding:64px 40px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 700px 300px at 50% 0%, rgba(238,196,136,.18), transparent 70%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border:1px solid rgba(238,196,136,.2);
}
.cta-banner h2{ margin-bottom:14px; }
.cta-banner p{ color:var(--slate); max-width:52ch; margin-inline:auto 26px; margin-bottom:30px; }
.cta-banner .btn-row{ justify-content:center; }

/* =================================================================
   CONTACT PAGE
   ================================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-form{
  display:flex; flex-direction:column; gap:18px;
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-lg);
  padding:36px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.82rem; color:var(--gold-300); letter-spacing:.03em; }
.field input,.field select,.field textarea{
  background:var(--navy-900);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:.95rem;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(207,154,74,.18);
  outline:none;
}
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:.8rem; color:var(--slate); }
.form-success{
  display:none;
  align-items:center; gap:12px;
  background:rgba(123,185,142,.12);
  border:1px solid rgba(123,185,142,.4);
  color:var(--success);
  padding:14px 18px;
  border-radius:var(--radius-sm);
  font-size:.9rem;
  animation:bounceIn .6s var(--spring) forwards;
}
.form-success.show{ display:flex; }

.contact-info-card{
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex; flex-direction:column; gap:26px;
}
.info-row{ display:flex; gap:16px; align-items:flex-start; }
.info-row .card-icon{ margin-bottom:0; flex-shrink:0; width:48px; height:48px; font-size:1.2rem; }
.info-row h4{ font-family:var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:4px; }
.info-row p,.info-row a{ color:var(--slate); font-size:.9rem; }
.info-row a:hover{ color:var(--gold-300); }

.map-art{
  border-radius:var(--radius-lg);
  border:1px solid var(--navy-700);
  overflow:hidden;
  aspect-ratio:16/9;
  position:relative;
  background:radial-gradient(ellipse at 50% 40%, rgba(207,154,74,.14), var(--navy-950));
}
.map-art .pin{
  position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50% 50% 50% 0;
  background:var(--gold-500); transform:translate(-50%,-50%) rotate(-45deg);
  box-shadow:0 0 0 6px rgba(207,154,74,.18);
  animation:pinBounce 2.4s ease-in-out infinite;
}
@keyframes pinBounce{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{ background:var(--navy-950); border-top:1px solid rgba(238,196,136,.12); padding-top:76px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-mark{ width:52px; margin-bottom:14px; }
.footer-brand .brand-name{ font-family:var(--font-display); font-size:1.3rem; }
.footer-brand .brand-name span{ display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.24em; color:var(--gold-300); margin-top:2px; }
.footer-tag{ color:var(--slate); font-size:.88rem; margin-top:14px; max-width:30ch; }

.footer-col h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; color:var(--gold-300); font-weight:600; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a,.footer-col li{ color:var(--slate); font-size:.9rem; }
.footer-col a:hover{ color:var(--parchment); }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:24px 24px; border-top:1px solid rgba(238,196,136,.08);
  font-size:.82rem; color:var(--slate);
}

/* =================================================================
   FLOATING ACTIONS
   ================================================================= */
.whatsapp-fab{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6);
  transition:transform var(--dur-fast) var(--spring);
}
.whatsapp-fab::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366;
  animation:ring 2.2s ease-out infinite;
}
.whatsapp-fab:hover{ transform:scale(1.12) rotate(-6deg); }
@keyframes ring{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.9); opacity:0; }
}
.whatsapp-fab svg{ width:28px; height:28px; position:relative; z-index:1; }

.back-to-top{
  position:fixed; right:26px; bottom:94px; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy-800); border:1px solid var(--gold-500);
  color:var(--gold-300); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(20px) scale(.8);
  transition:opacity var(--dur-fast), transform var(--dur-fast) var(--spring);
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.back-to-top:hover{ transform:translateY(-4px) scale(1.08); }

@media (max-width:600px){
  .whatsapp-fab{ width:52px; height:52px; right:18px; bottom:18px; }
  .back-to-top{ width:40px; height:40px; right:20px; bottom:82px; }
}

/* utility */
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.text-center{ text-align:center; }
.muted{ color:var(--slate); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--gold-300); color:var(--ink); padding:12px 20px; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }