/* ═══════════════════════════════════════════
   HIPLA SERVICES — Shared CSS
   Fonts: DM Serif Display + Instrument Sans
   Desktop-optimized layout
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --navy:  #0e1623;
  --navy2: #131d2e;
  --navy3: #1a2640;
  --panel: #1e2d45;
  --blue:  #2563eb;
  --blue2: #3b82f6;
  --aqua:  #06b6d4;
  --cream: #f5f0e8;
  --white: #f8faff;
  --muted: rgba(248,250,255,0.55);
  --faint: rgba(248,250,255,0.06);
  --border:  rgba(248,250,255,0.08);
  --border2: rgba(37,99,235,0.35);
  --gold: #f59e0b;
  --r: 10px;
  --max: 1200px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3 { font-family:'DM Serif Display',serif; font-weight:400; line-height:1.1; letter-spacing:-.01em; }
h1 { font-size: clamp(2.2rem,4.5vw,3.8rem); }
h2 { font-size: clamp(1.7rem,3vw,2.5rem); }
h3 { font-size: clamp(1.1rem,2vw,1.5rem); }
p  { color: var(--muted); line-height:1.75; }
a  { color: inherit; text-decoration:none; }

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media(min-width:768px)  { .container { padding: 0 3rem; } }
@media(min-width:1024px) { .container { padding: 0 4rem; } }
@media(min-width:1280px) { .container { padding: 0 5rem; } }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1.5rem;
  background: rgba(14,22,35,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display:flex; align-items:center;
  text-decoration:none; background:transparent; padding:0;
}
.nav-logo img { height:55px; width:auto; display:block; }
.nav-mobile-cta {
  background:var(--blue); color:#fff;
  padding:.48rem 1.1rem; border-radius:7px;
  font-size:.82rem; font-weight:700;
}
.nav-links { display:none; }

@media(min-width:768px) {
  nav { padding:0 3rem; }
  .nav-mobile-cta { display:none; }
  .nav-links {
    display:flex; align-items:center; gap:1.5rem;
    list-style:none;
  }
  .nav-links a {
    color:var(--muted); font-size:.82rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    transition:color .2s; white-space:nowrap;
  }
  .nav-links a:hover, .nav-links a.active { color:var(--white); }
  .nav-links .nav-book {
    background:var(--blue); color:#fff !important;
    padding:.46rem 1.2rem; border-radius:7px;
    font-weight:700; transition:background .2s !important;
  }
  .nav-links .nav-book:hover { background:var(--blue2) !important; }
}
@media(min-width:1280px) { nav { padding:0 5rem; } }

/* ── STICKY MOBILE BAR ── */
.sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  display:flex; gap:.5rem;
  padding:.72rem 1rem;
  background:rgba(14,22,35,.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
.sticky-bar a {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:.4rem; padding:.72rem .5rem;
  border-radius:8px; font-size:.81rem; font-weight:700;
  text-decoration:none; transition:all .2s;
}
.sticky-call { background:var(--panel); color:var(--white); border:1px solid var(--border); }
.sticky-wa   { background:#16a34a; color:#fff; }
.sticky-book { background:var(--blue); color:#fff; flex:1.4; }
@media(min-width:768px) { .sticky-bar { display:none; } }

/* ── MAIN WRAPPER ── */
main { padding-top:62px; padding-bottom:80px; }
@media(min-width:768px) { main { padding-bottom:0; } }

/* ── SECTION ── */
.section { padding:4rem 1.5rem; }
@media(min-width:768px)  { .section { padding:5rem 3rem; } }
@media(min-width:1024px) { .section { padding:5.5rem 4rem; } }
@media(min-width:1280px) { .section { padding:6rem 5rem; } }

/* inner max-width for all section content */
.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section-alt  { background:var(--navy2); }
.section-dark { background:var(--navy3); }

.section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--aqua);
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.65rem;
}
.section-label::after { content:''; width:24px; height:1px; background:var(--aqua); }

.section-title { margin-bottom:.9rem; }
.section-sub {
  font-size:.96rem; color:var(--muted);
  line-height:1.78; margin-bottom:2rem;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.8rem; border-radius:8px;
  font-family:'Instrument Sans',sans-serif;
  font-size:.95rem; font-weight:700; cursor:pointer;
  transition:all .2s; text-decoration:none; white-space:nowrap;
  border:none;
}
.btn-primary {
  background:var(--blue); color:#fff;
  box-shadow:0 4px 20px rgba(37,99,235,.35);
}
.btn-primary:hover { background:var(--blue2); transform:translateY(-1px); }
.btn-outline {
  background:transparent; color:var(--muted);
  border:1.5px solid rgba(248,250,255,.18);
}
.btn-outline:hover { border-color:rgba(248,250,255,.4); color:var(--white); }

/* ── HERO ── */
.hero {
  min-height: 88svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 62px 1.5rem 3rem;
  position: relative;
  overflow: hidden;
}
@media(min-width:768px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 62px 3rem 3rem;
    min-height: 82svh;
  }
}
@media(min-width:1024px) {
  .hero { padding: 62px 4rem 3rem; gap:4rem; }
}
@media(min-width:1280px) {
  .hero { padding: 62px 5rem 3rem; max-width:100%; }
}

.hero-inner { position:relative; z-index:2; }

/* right column — decorative on desktop */
.hero-visual {
  display: none;
  position: relative; z-index:2;
}
@media(min-width:768px) {
  .hero-visual {
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
}

.hero-stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.75rem;
  transition: border-color .2s;
}
.hero-stat-card:hover { border-color: var(--border2); }
.hero-stat-card .num {
  font-family:'DM Serif Display',serif;
  font-size: 2.5rem; line-height:1;
  color: var(--white); margin-bottom:.3rem;
}
.hero-stat-card .num span { color: var(--aqua); }
.hero-stat-card .lbl { font-size:.82rem; color:var(--muted); font-weight:500; }

.hero-info-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.75rem;
}
.hero-info-card .info-title { font-size:.95rem; font-weight:700; margin-bottom:.75rem; }
.hero-info-card .info-row {
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem 0; border-bottom:1px solid var(--border);
  font-size:.86rem;
}
.hero-info-card .info-row:last-child { border-bottom:none; }
.hero-info-card .info-row .lbl { color:var(--muted); }
.hero-info-card .info-row .val { color:var(--white); font-weight:600; margin-left:auto; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.22);
  color:var(--aqua); padding:.3rem .88rem; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero-dot { width:6px; height:6px; background:var(--aqua); border-radius:50%; }
.hero-h1 { margin-bottom:1.1rem; }
.hero-h1 em { color:var(--aqua); font-style:normal; }
.hero-sub {
  font-size:clamp(.92rem,1.5vw,1.05rem); color:var(--muted);
  line-height:1.78; max-width:480px; margin-bottom:1.8rem;
}
.hero-btns { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:2rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:.4rem; }
.trust-pill {
  background:var(--faint); border:1px solid var(--border);
  padding:.26rem .72rem; border-radius:50px;
  font-size:.7rem; font-weight:600; color:var(--muted); white-space:nowrap;
}
.trust-pill.hi { border-color:rgba(6,182,212,.25); color:var(--aqua); }

/* hero BG circles */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-bg::before { content:''; position:absolute; right:-5%; bottom:-10%; width:600px; height:600px; border-radius:50%; border:1px solid rgba(37,99,235,.08); }
.hero-bg::after  { content:''; position:absolute; right:5%;  bottom:10%; width:380px; height:380px; border-radius:50%; border:1px solid rgba(6,182,212,.06); }

/* ── STATS BAR ── */
.stats-bar {
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--navy2);
}
.stat-cell {
  padding:1.75rem 1rem; text-align:center;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat-cell:nth-child(2n) { border-right:none; }
.stat-cell:nth-child(3), .stat-cell:nth-child(4) { border-bottom:none; }
.stat-num { font-family:'DM Serif Display',serif; font-size:2.2rem; color:var(--white); line-height:1; margin-bottom:.2rem; }
.stat-label { font-size:.72rem; color:var(--muted); letter-spacing:.06em; }
@media(min-width:768px) {
  .stats-bar { grid-template-columns:repeat(4,1fr); }
  .stat-cell { border-bottom:none; padding:2rem 2rem; }
  .stat-cell:nth-child(2n) { border-right:1px solid var(--border); }
  .stat-cell:last-child { border-right:none; }
  .stat-num { font-size:2.6rem; }
}

/* ── PACKS ── */
.pack-grid { display:flex; flex-direction:column; gap:1rem; margin-top:1.75rem; }
@media(min-width:900px) { .pack-grid { flex-direction:row; align-items:stretch; } }

.pack-card {
  flex:1; background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  padding:2rem 1.75rem; position:relative; overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.pack-card:hover { border-color:var(--border2); transform:translateY(-3px); box-shadow:0 14px 44px rgba(0,0,0,.28); }
.pack-card.featured { border-color:rgba(37,99,235,.4); background:linear-gradient(145deg,rgba(37,99,235,.07),var(--panel)); }
.pack-bar { position:absolute; top:0; left:0; right:0; height:3px; }
.bar-1 { background:linear-gradient(90deg,#60a5fa,#93c5fd); }
.bar-2 { background:linear-gradient(90deg,var(--blue),var(--aqua)); }
.bar-3 { background:linear-gradient(90deg,var(--aqua),#8b5cf6); }
.pack-badge { position:absolute; top:1rem; right:1rem; background:var(--blue); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .65rem; border-radius:50px; }
.pack-icon { font-size:1.85rem; margin-bottom:.75rem; display:block; }
.pack-name { font-family:'DM Serif Display',serif; font-size:1.5rem; margin-bottom:.2rem; }
.pack-for { font-size:.76rem; color:var(--muted); margin-bottom:.9rem; font-style:italic; }
.pack-price { font-size:2.8rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:.2rem; font-family:'Instrument Sans',sans-serif; }
.pack-duration { font-size:.74rem; color:var(--muted); margin-bottom:1.2rem; }
.pack-list { list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.5rem; flex:1; }
.pack-list li { font-size:.86rem; color:var(--muted); display:flex; align-items:flex-start; gap:.55rem; line-height:1.45; }
.pack-list li::before { content:'✓'; color:var(--aqua); font-weight:700; flex-shrink:0; font-size:.82rem; }
.pack-cta { display:block; width:100%; text-align:center; padding:.88rem; border-radius:8px; font-weight:700; font-size:.9rem; text-decoration:none; transition:all .2s; margin-top:auto; }
.pack-cta-outline { border:1.5px solid var(--border2); color:var(--muted); }
.pack-cta-outline:hover { border-color:var(--aqua); color:var(--aqua); background:rgba(6,182,212,.08); }
.pack-cta-fill { background:linear-gradient(110deg,var(--blue),var(--aqua)); color:#fff; box-shadow:0 4px 16px rgba(37,99,235,.3); }
.pack-cta-fill:hover { box-shadow:0 8px 24px rgba(37,99,235,.45); transform:translateY(-1px); }

/* ── ADD-ONS TABLE ── */
.ao-table { width:100%; border-collapse:collapse; margin-top:1.4rem; }
.ao-table thead th { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left; padding:.65rem 1rem; border-bottom:1px solid var(--border); }
.ao-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
.ao-table tbody tr:last-child { border-bottom:none; }
.ao-table tbody tr:hover { background:var(--faint); }
.ao-table td { padding:.85rem 1rem; font-size:.9rem; }
.ao-table td:last-child { font-weight:700; color:var(--aqua); text-align:right; white-space:nowrap; }
.ao-note { font-size:.78rem; color:var(--muted); line-height:1.65; margin-top:1.1rem; padding:.9rem 1rem; background:var(--faint); border:1px solid var(--border); border-radius:8px; }

/* ── HOW STEPS ── */
.how-steps { display:flex; flex-direction:column; gap:0; margin-top:2rem; }
@media(min-width:900px) {
  .how-steps { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
}
.how-step { display:grid; grid-template-columns:52px 1fr; gap:1.1rem; padding:1.75rem 0; border-bottom:1px solid var(--border); align-items:flex-start; transition:padding-left .2s; }
.how-step:last-child { border-bottom:none; }
@media(min-width:900px) { .how-step:nth-child(3) { border-bottom:none; } }
.how-step:hover { padding-left:.3rem; }
.step-n { font-family:'DM Serif Display',serif; font-size:2.6rem; line-height:1; color:rgba(248,250,255,.1); }
.step-title { font-size:1rem; font-weight:700; margin-bottom:.35rem; color:var(--white); }
.step-desc { font-size:.87rem; color:var(--muted); line-height:1.72; }

/* ── WHY GRID ── */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.5rem; }
@media(min-width:768px)  { .why-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .why-grid { gap:1rem; } }
.why-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem 1.25rem; transition:border-color .2s, transform .2s; }
.why-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.why-icon { font-size:1.75rem; display:block; margin-bottom:.55rem; }
.why-title { font-size:.9rem; font-weight:700; margin-bottom:.25rem; color:var(--white); }
.why-desc { font-size:.78rem; color:var(--muted); line-height:1.6; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:.45rem; margin-top:1.5rem; }
@media(min-width:900px) {
  .faq-cols { display:grid; grid-template-columns:1fr 1fr; gap:.45rem 2rem; margin-top:1.5rem; }
}
.faq-item { background:var(--panel); border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.faq-q { width:100%; text-align:left; padding:1.05rem 1.2rem; background:transparent; border:none; color:var(--white); font-family:'Instrument Sans',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; line-height:1.4; }
.faq-q:hover { background:var(--faint); }
.faq-icon { width:22px; height:22px; min-width:22px; border-radius:50%; border:1.5px solid rgba(37,99,235,.4); color:var(--aqua); display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:transform .3s, background .2s; flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(45deg); background:rgba(6,182,212,.12); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .3s; padding:0 1.2rem; font-size:.87rem; color:var(--muted); line-height:1.76; }
.faq-item.open .faq-a { max-height:320px; padding:0 1.2rem 1.2rem; }

/* ── ZONE CHIPS ── */
.zone-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.zone-chip { background:var(--faint); border:1px solid var(--border); padding:.3rem .78rem; border-radius:50px; font-size:.76rem; color:var(--muted); transition:all .2s; }
.zone-chip:hover { border-color:var(--border2); color:var(--white); }
.zone-chip.main { border-color:rgba(37,99,235,.4); color:var(--blue2); font-weight:600; }

/* ── FORMS ── */
.form-wrap { max-width:780px; }
@media(min-width:900px) {
  .form-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    align-items: start;
  }
  .form-two-col .form-full { grid-column: 1 / -1; }
}
.form-group { margin-bottom:1.05rem; }
.form-label { display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.42rem; }
.form-control {
  width:100%; padding:.85rem 1rem;
  background:var(--panel); border:1.5px solid var(--border);
  color:var(--white); font-family:'Instrument Sans',sans-serif; font-size:.93rem;
  border-radius:8px; outline:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.form-control::placeholder { color:rgba(248,250,255,.22); }
.form-control option { background:var(--navy2); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.pack-radio-group { display:flex; flex-direction:column; gap:.45rem; }
.pack-radio { display:none; }
.pack-radio-label { display:flex; justify-content:space-between; align-items:center; padding:.88rem 1.2rem; background:var(--panel); border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:.9rem; transition:all .2s; }
.pack-radio-label span:last-child { font-weight:800; color:var(--aqua); font-size:.95rem; }
.pack-radio:checked + .pack-radio-label { border-color:var(--blue); background:rgba(37,99,235,.07); }
.addon-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
@media(min-width:600px) { .addon-check-grid { grid-template-columns:repeat(3,1fr); } }
.addon-check { display:none; }
.addon-check-label { padding:.72rem .9rem; background:var(--panel); border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:.78rem; text-align:center; transition:all .2s; color:var(--muted); }
.addon-check:checked + .addon-check-label { border-color:var(--aqua); background:rgba(6,182,212,.08); color:var(--aqua); }
.form-submit { width:100%; padding:1.05rem; background:linear-gradient(110deg,var(--blue),var(--aqua)); color:#fff; border:none; border-radius:9px; font-family:'Instrument Sans',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; box-shadow:0 4px 20px rgba(37,99,235,.34); transition:transform .2s, box-shadow .2s; margin-top:.4rem; }
.form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,99,235,.48); }
.form-note { font-size:.77rem; color:var(--muted); margin-top:.8rem; line-height:1.65; padding:.8rem 1rem; background:var(--faint); border:1px solid var(--border); border-radius:7px; }

/* ── CONTACT ── */
.contact-item { display:flex; align-items:center; gap:.9rem; padding:1.15rem 1.3rem; background:var(--panel); border:1px solid var(--border); border-radius:9px; margin-bottom:.5rem; transition:border-color .2s; }
.contact-item:hover { border-color:var(--border2); }
.contact-icon { font-size:1.3rem; min-width:30px; }
.contact-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.12rem; }
.contact-value { font-size:.95rem; font-weight:600; color:var(--white); }
.contact-value a { color:var(--white); transition:color .2s; }
.contact-value a:hover { color:var(--aqua); }
.wa-btn { display:inline-flex; align-items:center; gap:.5rem; background:#16a34a; color:#fff; padding:.85rem 1.5rem; border-radius:8px; font-weight:700; font-size:.92rem; text-decoration:none; transition:all .2s; }
.wa-btn:hover { background:#15803d; transform:translateY(-1px); }

/* ── TWO-COL LAYOUT (contact, info side-by-side) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media(min-width:900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; align-items:start; }
  .two-col.wide-right { grid-template-columns: 5fr 7fr; }
  .two-col.wide-left  { grid-template-columns: 7fr 5fr; }
}

/* ── PAGE HERO ── */
.page-hero { background:var(--navy2); border-bottom:1px solid var(--border); padding:3.5rem 1.5rem 2.5rem; }
.page-hero-inner { max-width:750px; }
.page-hero h1 { margin-bottom:.8rem; }
.page-hero p { font-size:.98rem; color:var(--muted); line-height:1.78; max-width:600px; }
@media(min-width:768px)  { .page-hero { padding:4.5rem 3rem 3rem; } }
@media(min-width:1024px) { .page-hero { padding:5rem 4rem 3rem; } }
@media(min-width:1280px) { .page-hero { padding:5rem 5rem 3rem; } }

/* ── CTA BAND ── */
.cta-band { background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(6,182,212,.05)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:4rem 1.5rem; text-align:center; }
@media(min-width:768px) { .cta-band { padding:5rem 3rem; } }
.cta-band h2 { margin-bottom:.8rem; }
.cta-band p  { margin-bottom:2rem; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-band-btns { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ── FOOTER ── */
footer { background:var(--navy2); border-top:1px solid var(--border); padding:3.5rem 1.5rem 2rem; }
.footer-grid { display:flex; flex-direction:column; gap:2.5rem; margin-bottom:2.5rem; max-width:var(--max); margin-left:auto; margin-right:auto; }
@media(min-width:768px) { .footer-grid { flex-direction:row; gap:5rem; } }
.footer-logo { font-family:'DM Serif Display',serif; font-size:1.45rem; margin-bottom:.45rem; }
.footer-tagline { font-size:.82rem; color:var(--muted); line-height:1.65; margin-bottom:1.25rem; }
.footer-contact-link { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.85rem; margin-bottom:.45rem; transition:color .2s; }
.footer-contact-link:hover { color:var(--aqua); }
.footer-nav-title { font-size:.67rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(248,250,255,.25); margin-bottom:.8rem; }
.footer-nav-links { display:flex; flex-direction:column; gap:.5rem; }
.footer-nav-links a { color:var(--muted); font-size:.86rem; transition:color .2s; }
.footer-nav-links a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.4rem; display:flex; flex-direction:column; gap:.35rem; font-size:.7rem; color:rgba(248,250,255,.22); max-width:var(--max); margin:0 auto; }
@media(min-width:768px) {
  footer { padding:4.5rem 3rem 2.5rem; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}
@media(min-width:1280px) { footer { padding:4.5rem 5rem 2.5rem; } }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(14,22,35,.9); backdrop-filter:blur(12px); align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.active { display:flex; }
.modal-box { background:var(--panel); border:1px solid rgba(6,182,212,.25); border-radius:14px; padding:2.5rem 2rem; max-width:420px; width:100%; text-align:center; border-top:3px solid var(--aqua); }
.modal-icon { font-size:2.4rem; margin-bottom:.85rem; }
.modal-title { font-family:'DM Serif Display',serif; font-size:1.7rem; margin-bottom:.5rem; }
.modal-text { font-size:.87rem; color:var(--muted); line-height:1.72; margin-bottom:1.65rem; }
.modal-close { background:var(--blue); color:#fff; border:none; padding:.8rem 2rem; border-radius:8px; font-family:'Instrument Sans',sans-serif; font-size:.9rem; font-weight:700; cursor:pointer; transition:background .2s; }
.modal-close:hover { background:var(--blue2); }

/* ── ZONE CITY GRID ── */
.city-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
@media(min-width:768px) { .city-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .city-grid { grid-template-columns:repeat(4,1fr); } }

/* ── REVEAL ── */
.rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* ── UTILS ── */
.divider { border:none; border-top:1px solid var(--border); }
.text-aqua { color:var(--aqua); }
.text-muted { color:var(--muted); }
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:1.5rem}
.max-prose { max-width:680px; }

/* ── SERVICE ICON ── */
.service-icon-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  margin-bottom: .5rem;
}

/* ══════════════════════════════
   LAVAGE-AUTO DEDICATED NAV
══════════════════════════════ */
.lavage-nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
  background:rgba(14,22,35,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(37,99,235,.2);
}
.lavage-nav-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.lavage-nav-brand img { height:34px; width:auto; }
.lavage-nav-service {
  display:none;
  font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aqua); border-left:1px solid rgba(255,255,255,.1); padding-left:.75rem;
}
@media(min-width:480px) { .lavage-nav-service { display:block; } }
.lavage-nav-links { display:none; list-style:none; }
@media(min-width:768px) {
  .lavage-nav { padding:0 3rem; }
  .lavage-nav-links {
    display:flex; align-items:center; gap:1.5rem;
  }
  .lavage-nav-links a {
    color:var(--muted); font-size:.8rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    transition:color .2s; text-decoration:none;
  }
  .lavage-nav-links a:hover { color:var(--white); }
  .lavage-nav-links a.active { color:var(--aqua); }
}
@media(min-width:1280px) { .lavage-nav { padding:0 5rem; } }

/* ══════════════════════════════
   LAVAGE HERO
══════════════════════════════ */
.lavage-hero {
  min-height:90svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 1.5rem 3rem;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#0a1525 0%,#0d1e38 60%,#071020 100%);
}
.lavage-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%,rgba(37,99,235,.15),transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 80%,rgba(6,182,212,.1),transparent 60%);
}
.lavage-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(59,130,246,.14) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);
}
.lavage-hero-inner {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; width:100%;
}
@media(min-width:768px) {
  .lavage-hero { padding:80px 3rem 4rem; }
  .lavage-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
}
@media(min-width:1280px) { .lavage-hero { padding:80px 5rem 4rem; } }

.lavage-hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3);
  color:var(--aqua); padding:.32rem .9rem; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:1.3rem;
}
.lavage-hero-h1 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.4rem,6vw,4.5rem);
  font-weight:400; line-height:1.05; letter-spacing:-.02em;
  color:var(--white); margin-bottom:1rem;
}
.lavage-hero-h1 em { color:var(--aqua); font-style:normal; }
.lavage-hero-sub {
  font-size:clamp(.92rem,2vw,1.05rem);
  color:var(--muted); line-height:1.78;
  max-width:480px; margin-bottom:1.75rem;
}
.lavage-hero-btns { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:2rem; }
.lavage-trust { display:flex; flex-wrap:wrap; gap:.4rem; }
.lavage-trust-pill {
  background:rgba(248,250,255,.06); border:1px solid rgba(248,250,255,.1);
  padding:.28rem .75rem; border-radius:50px;
  font-size:.7rem; font-weight:600; color:var(--muted); white-space:nowrap;
}
.lavage-trust-pill.hi { border-color:rgba(6,182,212,.3); color:var(--aqua); }
.lavage-hero-right { display:none; }
@media(min-width:768px) { .lavage-hero-right { display:flex; flex-direction:column; gap:1rem; } }
.lh-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px; padding:1.5rem 1.75rem;
  backdrop-filter:blur(10px);
}
.lh-card.featured { border-color:rgba(37,99,235,.4); background:linear-gradient(145deg,rgba(37,99,235,.1),rgba(255,255,255,.04)); }
.lh-card-title { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.lh-pack-row { display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.07); gap:1rem; }
.lh-pack-row:last-of-type { border-bottom:none; }
.lh-pack-name { font-size:.9rem; font-weight:500; color:var(--white); }
.lh-pack-price { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--white); white-space:nowrap; }

/* ══════════════════════════════
   BREADCRUMB
══════════════════════════════ */
.breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.74rem; color:var(--muted); flex-wrap:wrap;
  padding:.75rem 0; margin-bottom:1rem;
}
.breadcrumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--aqua); }
.breadcrumb span { color:rgba(248,250,255,.3); }
.breadcrumb .current { color:var(--white); font-weight:600; }

/* ══════════════════════════════
   MULTI-STEP BOOKING FORM
══════════════════════════════ */
/* Progress bar */
.booking-progress {
  display:flex; align-items:center; gap:0;
  margin-bottom:2.5rem; overflow-x:auto;
  padding-bottom:.5rem;
}
.bp-step {
  display:flex; align-items:center; gap:0; flex:1; min-width:0;
}
.bp-dot {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--border); background:var(--panel);
  font-size:.75rem; font-weight:700; color:var(--muted);
  flex-shrink:0; transition:all .3s; z-index:1; position:relative;
}
.bp-dot.active { border-color:var(--blue); background:var(--blue); color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.bp-dot.done { border-color:var(--aqua); background:var(--aqua); color:#fff; }
.bp-label { font-size:.68rem; font-weight:600; color:var(--muted); white-space:nowrap; margin-left:.5rem; display:none; }
.bp-dot.active + .bp-label { color:var(--white); }
.bp-dot.done + .bp-label { color:var(--aqua); }
@media(min-width:480px) { .bp-label { display:block; } }
.bp-line { flex:1; height:2px; background:var(--border); margin:0 .25rem; transition:background .3s; min-width:16px; }
.bp-line.done { background:var(--aqua); }

/* Step containers */
.booking-step { display:none; }
.booking-step.active { display:block; }

/* Service selection cards */
.service-select-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.5rem; }
@media(min-width:600px) { .service-select-grid { grid-template-columns:repeat(3,1fr); } }
.service-select-card {
  background:var(--panel); border:2px solid var(--border);
  border-radius:var(--r); padding:1.25rem 1rem;
  text-align:center; cursor:pointer; transition:all .2s;
  position:relative;
}
.service-select-card:hover:not(.disabled) { border-color:var(--border2); transform:translateY(-2px); }
.service-select-card.selected { border-color:var(--blue); background:rgba(37,99,235,.08); }
.service-select-card.disabled { opacity:.45; cursor:not-allowed; }
.service-card-icon { font-size:1.75rem; display:block; margin-bottom:.5rem; }
.service-card-name { font-size:.88rem; font-weight:700; color:var(--white); margin-bottom:.25rem; }
.service-card-status { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.service-card-status.available { color:var(--aqua); }
.service-card-status.soon { color:rgba(248,250,255,.3); }
.service-soon-badge {
  position:absolute; top:.5rem; right:.5rem;
  background:rgba(248,250,255,.08); color:rgba(248,250,255,.35);
  font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:50px;
}

/* Conversion trust bar */
.booking-trust-bar {
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:.85rem 1rem;
  background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.15);
  border-radius:8px; margin-bottom:1.75rem;
}
.btb-item { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--muted); }
.btb-item span:first-child { color:var(--aqua); }

/* Step nav buttons */
.step-nav { display:flex; gap:.75rem; margin-top:1.75rem; }
.btn-step-next { flex:2; padding:1rem; background:linear-gradient(110deg,var(--blue),var(--aqua)); color:#fff; border:none; border-radius:9px; font-family:'Instrument Sans',sans-serif; font-size:.96rem; font-weight:700; cursor:pointer; transition:all .2s; }
.btn-step-next:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(37,99,235,.4); }
.btn-step-back { flex:1; padding:1rem; background:transparent; color:var(--muted); border:1.5px solid var(--border); border-radius:9px; font-family:'Instrument Sans',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-step-back:hover { border-color:var(--muted); color:var(--white); }

/* ══════════════════════════════
   ZONE PAGE MOBILE FIX
══════════════════════════════ */
.zone-map-wrap {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  margin-bottom:1.5rem;
  position:relative;
}
.zone-map-wrap iframe {
  width:100%; height:280px; border:none; display:block;
}
@media(min-width:768px) { .zone-map-wrap iframe { height:360px; } }

/* ══════════════════════════════
   FOOTER TYPES
══════════════════════════════ */
.footer-service-tag {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.2);
  color:var(--blue2); padding:.22rem .75rem; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.75rem;
}


/* ── 4-COL FOOTER RESPONSIVE ── */
@media(max-width:767px) {
  .footer-grid[style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}
@media(max-width:480px) {
  .footer-grid[style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── BREADCRUMB fix — never inherit nav fixed styles ── */
div.breadcrumb {
  position: static !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  padding: .75rem 0 !important;
}

/* ── TWO-COLUMN PAGE HERO ── */
.hero-right-card {
  display: none; /* hidden on mobile */
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem;
  align-self: center;
}
@media(min-width:900px) {
  .page-hero > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    align-items: center;
  }
  .hero-right-card {
    display: block;
  }
}

/* ══════════════════════════════
   MOBILE TAP FEEDBACK
══════════════════════════════ */

/* Disable default iOS tap highlight (we replace it with better feedback) */
* { -webkit-tap-highlight-color: transparent; }

/* All buttons and links — instant scale on tap */
.btn,
.wa-btn,
.pack-cta,
.nav-book,
.nav-mobile-cta,
.sticky-call,
.sticky-wa,
.sticky-book,
.btn-step-next,
.btn-step-back,
.form-submit,
.modal-close,
.faq-q,
.pack-radio-label,
.addon-check-label,
.service-select-card:not(.disabled),
.contact-item a,
.footer-contact-link {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes 300ms delay */
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, background .12s ease, border-color .15s ease;
}

/* Primary button tap */
.btn-primary:active,
.btn-step-next:active,
.form-submit:active,
.nav-book:active,
.nav-mobile-cta:active {
  transform: scale(.96);
  opacity: .9;
  box-shadow: none !important;
}

/* Outline button tap */
.btn-outline:active,
.btn-step-back:active,
.pack-cta-outline:active {
  transform: scale(.96);
  opacity: .85;
}

/* WhatsApp button tap */
.wa-btn:active {
  transform: scale(.96);
  opacity: .9;
}

/* Pack CTA fill tap */
.pack-cta-fill:active {
  transform: scale(.96);
}

/* Sticky bar buttons */
.sticky-call:active { background: rgba(37,99,235,.4) !important; transform: scale(.95); }
.sticky-wa:active   { background: rgba(37,211,102,.3) !important; transform: scale(.95); }
.sticky-book:active { transform: scale(.95); opacity: .85; }

/* FAQ question tap */
.faq-q:active {
  background: rgba(255,255,255,.06) !important;
}

/* Pack radio label tap */
.pack-radio-label:active {
  transform: scale(.98);
  border-color: var(--blue) !important;
}

/* Option checkbox label tap */
.addon-check-label:active {
  transform: scale(.97);
  border-color: var(--aqua) !important;
}

/* Service select card tap */
.service-select-card:not(.disabled):active {
  transform: scale(.97);
  border-color: var(--blue) !important;
}

/* Vehicle état card tap */
#etat-propre:active,
#etat-moyen:active,
#etat-sale:active {
  transform: scale(.97);
}

/* Modal close tap */
.modal-close:active {
  transform: scale(.95);
  opacity: .85;
}

/* Nav links on mobile tap */
@media(max-width:767px) {
  .nav-links a:active {
    opacity: .6;
  }
}

/* Loading state on form submit — show spinner feel */
.form-submit.loading {
  opacity: .7;
  pointer-events: none;
  position: relative;
}
.form-submit.loading::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Step next button loading state */
.btn-step-next.loading {
  opacity: .7;
  pointer-events: none;
}


/* ── FORM FIELD VALIDATION STATES ── */
.form-control:focus { border-color: var(--blue) !important; outline: none; }
.form-control.invalid { border-color: #ef4444 !important; }
.form-control.valid { border-color: var(--aqua) !important; }
.field-error {
  font-size: .72rem;
  color: #ef4444;
  margin-top: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}