/* ============================================================
   Buy Go Travel Agency — shared stylesheet
   ------------------------------------------------------------
   Design language: editorial travel-consultancy, calm and quiet.
   Palette (beige + ocean ramp):
     sand #FAF8F1 · white #FFFDF9 · deep navy #001D39
     action blue #0A4174 · steel #49769F · sky #4E8EA2
     ink #101E2A · muted blue-grey #4A5A6B
   Type: Newsreader (headlines) + Source Sans 3 (body and UI).
   Flat colour only. No gradients, no glass, no glow.
   Corner discipline: buttons 4px · cards 10px · photos 2px
     large feature panels 14px · form controls 6px.
   Shadows: one soft downward shadow, tinted to match the page.
   ------------------------------------------------------------
   Contents:
     1. Design tokens      7. Ticker (home only)
     2. Base               8. Sections, index list, cards
     3. Utilities          9. Photos, service rows, split layout
     4. Header and nav    10. Contact wizard
     5. Buttons           11. CTA band, footer, WhatsApp bubble
     6. Hero and file card 12. Responsive and reduced motion
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --bg: #FAF8F1;
  --paper: #FFFDF9;
  --navy: #001D39;
  --gold: #0A4174;          /* accent: actions, links, keylines */
  --gold-deep: #0A4174;     /* accent text on light surfaces */
  --steel: #49769F;         /* quiet lines and small graphics */
  --sky: #4E8EA2;
  --ink: #101E2A;
  --muted: #4A5A6B;
  --line: rgba(0, 29, 57, .18);
  --line-soft: rgba(0, 29, 57, .11);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  --sh: 0 1px 2px rgba(0, 29, 57, .05),
        0 12px 32px rgba(0, 29, 57, .09);
  --sh-sm: 0 1px 2px rgba(0, 29, 57, .05),
           0 6px 18px rgba(0, 29, 57, .08);
  --max: 1280px;            /* content width on wide screens */
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

/* Grid children may never force their track wider than the screen.
   (Long words in a grid item are the classic mobile edge-breaker.) */
.hero-grid > *,
.split > *,
.row-card > *,
.why-layout > *,
.foot-grid > *,
.index-row > * { min-width: 0; }

html { scroll-behavior: smooth; }

/* Hard edge lock: no page element may cause horizontal scrolling,
   so content can never slide under (or past) the screen edges.
   `clip` where supported, `hidden` as fallback for old browsers. */
html,
body { overflow-x: hidden; }
html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Faint paper grain over the whole page. Fixed and click-through,
   so it never costs scroll performance or blocks taps. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

main,
header,
footer {
  position: relative;
  z-index: 2;
}

::selection { background: var(--gold); color: #fff; }
a { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }

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

/* ---------- 3. Utilities ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; color: #fff; }

/* Visually hidden but announced by screen readers. */
.sr-only {
  position: absolute;
  left: -9999px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Scroll reveal: fades and rises once, then stays. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* Small label with a gold rule — marks a section topic. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .8rem;
  color: var(--gold-deep);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--gold);
}

h1,
h2.t {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
}
h2.t {
  margin: 0 0 .7rem;
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}

.sub {
  margin: 0 0 2.2rem;
  max-width: 58ch;
  color: var(--muted);
}
.lead {
  margin: 0 0 1.9rem;
  max-width: 48ch;
  color: var(--muted);
  font-size: 1.07rem;
}
.muted { color: var(--muted); }
.narrow { max-width: 640px; }

/* ---------- 4. Header and nav ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .28s ease;
}
header.site.scrolled { border-bottom-color: var(--line-soft); }

.hwrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.brand-mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
}
.brand-mark img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: cover;
}
.brand b {
  display: block;
  color: var(--navy);
  font-size: .72rem;
  letter-spacing: .1em;
  white-space: nowrap;
}
.brand small {
  display: block;
  margin-top: .1rem;
  color: var(--muted);
  font-size: .7rem;
}

nav.main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
nav.main a.nl {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
nav.main a.nl:hover { color: var(--gold-deep); }
nav.main a.nl[aria-current="page"] { color: var(--gold-deep); }

/* Sliding underline. Moved by JS on click only — never on hover. */
.nav-ink {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 0;
  height: 2px;
  opacity: 0;
  background: var(--gold);
  border-radius: 2px;
  pointer-events: none;
  transition: left .35s cubic-bezier(.22, .8, .3, 1),
              width .35s cubic-bezier(.22, .8, .3, 1),
              opacity .25s ease;
}

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .5rem .95rem;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .78rem 1.6rem;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 4px;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); background: #0A4174; }

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.btn-gold:hover { background: #0E5496; }

.btn-line { background: transparent; color: var(--navy); }
.btn-line:hover { border-color: var(--gold); background: transparent; }

/* Light outline button for use on dark panels. */
.btn-ghost-light { border-color: var(--gold); color: #fff; }

.btn-sm { min-height: 42px; padding: .5rem 1.1rem; font-size: .87rem; }

/* WhatsApp green, kept separate so brand green never leaks elsewhere. */
.btn-wa { background: #0E7C3F; border-color: #0E7C3F; color: #fff; }
.btn-wa:hover { background: #0B6333; }

/* ---------- 6. Hero and file card ---------- */
.hero { position: relative; padding: 4rem 0 3.2rem; overflow: hidden; }
.hero-grid { position: relative; display: grid; gap: 2.4rem; }

.hero h1 {
  margin: 0 0 1rem;
  max-width: 17ch;
  font-size: clamp(2.5rem, 5.6vw, 3.9rem);
  line-height: 1.07;
}

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero-note {
  margin-top: 1.6rem;
  max-width: 52ch;
  color: var(--muted);
  font-size: .9rem;
}
.hero-note strong { color: var(--ink); }

/* Faint DXB→PAR route map behind the hero. Decorative only. */
.hero-route {
  position: absolute;
  top: -10px;
  right: -30px;
  width: min(480px, 60vw);
  opacity: .14;
  pointer-events: none;
}

/* The "prepared file" card: a small piece of official paperwork. */
.file-card {
  overflow: hidden;
  margin-left: .4rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--navy);
  border-radius: 14px;
  box-shadow: var(--sh);
  transform: rotate(.8deg);
}
.file-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .95rem 1.3rem;
  background: var(--navy);
  color: #E8EFE9;
}
.file-top small {
  color: #D6E7F4;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.file-body { padding: 1.3rem 1.3rem 1.4rem; }
.file-desc { margin: 0; color: var(--muted); font-size: .9rem; }

/* Boarding-pass row: codes share one baseline, cities sit below. */
.route { display: flex; align-items: center; gap: .9rem; }
.ap b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
}
.ap-right { text-align: right; }
.route-sub {
  display: flex;
  justify-content: space-between;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .8rem;
}

/* The "checked mid-route" seal between the two codes. */
.route-check {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 96px;
}
.rc-line { flex: 1; border-top: 1.5px dashed var(--steel); opacity: .75; }
.rc-seal {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--navy);
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: #D6E7F4;
}

.rule { border-top: 1px dashed var(--line); margin: .9rem 0; }

.stamp {
  display: inline-block;
  margin-top: .7rem;
  padding: .28rem .7rem;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  color: var(--gold-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  transform: rotate(-2deg);
}

.mini-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.mini-list span {
  padding: .32rem .7rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  color: var(--muted);
  font-size: .78rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.1rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.hero-facts b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
}
.hero-facts span { color: var(--muted); font-size: .83rem; }

/* ---------- 7. Ticker (home only) ----------
   One seamless loop: 4 identical groups, -50% travel lands on
   group 3 which matches group 1, so there is never a seam. */
.strip {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.strip-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: slide 32s linear infinite;
}
.strip-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2.75rem;
  margin: 0;
  padding: .85rem 2.75rem .85rem 0;
  list-style: none;
}
.strip-group span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}
.strip-group .dash {
  color: var(--steel);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}
.strip:hover .strip-track { animation-play-state: paused; }

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 8. Sections, index list, cards ---------- */
section.block { padding: 4.5rem 0 5.5rem; }
section.band {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.tight-top { padding-top: 1rem; }
.flush-top { padding-top: 0; }

/* Editorial index list (home services): hairlines, never boxes. */
.index { margin-top: .5rem; border-top: 1px solid var(--line); }
.index-row {
  display: grid;
  gap: .35rem 1.5rem;
  padding: 1.25rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: background .18s ease;
}
.index-row:hover { background: var(--paper); }
.index-row .idx {
  font-family: var(--serif);
  color: var(--gold);
  font-size: .9rem;
  letter-spacing: .1em;
}
.index-row h3 { margin: 0; font-size: 1.12rem; font-weight: 700; }
.index-row p { margin: 0; max-width: 60ch; color: var(--muted); font-size: .93rem; }
.index-row .go {
  color: var(--gold-deep);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Small offset cards (about page). */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bento-spaced { margin-top: 2.5rem; }
.svc {
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--navy);
  border-radius: 10px;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.svc:hover { transform: translateY(-3px); border-left-color: var(--gold); }
.svc h3 { margin: .7rem 0 .3rem; font-size: 1.05rem; }
.svc p { margin: 0; color: var(--muted); font-size: .92rem; }
.svc .n {
  font-family: var(--serif);
  color: var(--gold);
  font-size: .85rem;
  letter-spacing: .12em;
}

/* Dark cards: always light text on dark, never color-on-color. */
.svc-dark {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--steel);
  color: #E8EFE9;
}
.svc-dark h3 { color: #fff; }
.svc-dark p { color: #D3E5F3; }
.svc-dark .n { color: #BDD8E9; }

.svc-gold {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--gold);
}
.svc-gold h3 { color: #fff; }
.svc-gold p { color: #D3E5F3; }
.svc-gold .n { color: #BDD8E9; }
.svc-gold a { color: #BDD8E9; }

/* Why-choose-us ledger: ruled rows, no boxes. */
.why-layout { display: grid; gap: 2.2rem; }
.why-sticky p { color: var(--muted); }
.why-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.why-row {
  display: grid;
  gap: .2rem;
  padding: 1.3rem .25rem;
  border-bottom: 1px solid var(--line-soft);
}
.why-row h3 { margin: .3rem 0 .25rem; font-size: 1.08rem; }
.why-row p { margin: 0; color: var(--muted); font-size: .93rem; }
.why-row .k {
  color: var(--gold-deep);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
}

/* ---------- 9. Photos, service rows, split layout ---------- */
.page-hero { padding: 3.6rem 0 2.2rem; }
.page-hero h1 {
  margin: .4rem 0 .8rem;
  max-width: 20ch;
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
}
.crumbs { color: var(--muted); font-size: .8rem; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

.photo {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  box-shadow: var(--sh-sm);
}
.photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #C9D8E4;
}
.photo-wide img { aspect-ratio: 21 / 9; }
.photo figcaption {
  padding: .6rem .9rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .8rem;
}
.photo-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
.photo-lead { margin: 0 0 2rem; }
.photo-spaced { margin: 2.5rem 0 0; }

.svc-rows { display: grid; gap: 1rem; margin-top: 2.4rem; }
.row-card {
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--navy);
  border-radius: 10px;
  box-shadow: var(--sh-sm);
}
.row-card h3 { margin: 0; font-size: 1.18rem; }
.row-card p { margin: .3rem 0 0; color: var(--muted); font-size: .93rem; }
.row-card ul { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; }
.tag {
  display: inline-block;
  color: var(--gold-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.split { display: grid; gap: 2.2rem; align-items: start; }
.card-paper {
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--navy);
  border-radius: 10px;
  box-shadow: var(--sh);
}
.card-tilt { transform: rotate(-.8deg); }

.founder-name { font-family: var(--serif); font-size: 1.7rem; margin: .6rem 0 .2rem; }
.founder-role { margin: 0; color: var(--muted); font-size: .9rem; }
.founder-quote { color: var(--muted); font-size: .93rem; }
.call-note { color: var(--muted); font-weight: 400; }

.address { font-style: normal; color: var(--muted); font-size: .93rem; }
.stack { margin-top: 1.2rem; }
.card-title { font-size: 1.6rem; margin-top: .6rem; }
.portal-note { margin: 0; color: var(--muted); font-size: .9rem; }
.portal-note a { font-weight: 700; }

.hours-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.hours-table th,
.hours-table td { padding: .6rem 0; text-align: left; border-top: 1px solid var(--line-soft); }
.hours-table th { color: var(--muted); font-weight: 600; }

.contact-lines {
  display: grid;
  gap: .7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .94rem;
}
.contact-lines a { font-weight: 700; }

/* ---------- 10. Contact wizard ----------
   One question at a time. Progress bar + dots + live region. */
.wizard {
  position: relative;
  max-width: 740px;
  margin: 2rem auto 0;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: var(--sh);
}
.wizard-flush { margin-top: 0; }

.prog { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.9rem; }
.bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  background: rgba(0, 29, 57, .14);
  border-radius: 2px;
}
.bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width .5s ease;
}
.cnt { color: var(--muted); font-size: .79rem; font-weight: 700; white-space: nowrap; }
.dots { display: flex; gap: .4rem; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 29, 57, .18); }
.dots i.on { background: var(--navy); transform: scale(1.35); }

.stage { position: relative; min-height: 336px; }
.q { display: none; border: 0; margin: 0; padding: 0; }
.q.live { display: block; }
.q.anim-fwd { animation: stepF .45s ease both; }
.q.anim-back { animation: stepB .45s ease both; }

@keyframes stepF {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes stepB {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

.q h3 {
  margin: 0 0 .35rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2rem);
}
.q .qs { margin: 0 0 1.4rem; color: var(--muted); font-size: .93rem; }
.q label { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 700; }
.opt-note { font-family: var(--sans); font-size: .82em; color: var(--muted); }

.opts {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1fr;
  max-height: 320px;
  overflow: auto;
  padding: 2px;
}
.opt {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 56px;
  padding: .85rem .95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.opt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.opt .tick {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: .7rem;
  opacity: .7;
}

.big {
  width: 100%;
  padding: .7rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
}
.big:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(10, 65, 116, .25); }
.big::placeholder { color: rgba(95, 103, 114, .6); }
textarea.big { min-height: 112px; line-height: 1.6; resize: vertical; }

.err { min-height: 1.4em; margin: .55rem 0 0; color: var(--muted); font-size: .86rem; font-weight: 700; }

.wnav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.back {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.done { text-align: center; }
.done-title { margin-bottom: 1.5rem; }
.done-title { margin-bottom: 1.5rem; }
.ring {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: var(--navy);
  border-radius: 50%;
  color: #D6E7F4;
}
.alt { margin-top: 1.9rem; color: var(--muted); font-size: .9rem; line-height: 1.9; text-align: center; }

/* ---------- 11. CTA band, footer, WhatsApp bubble ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.2rem;
  margin-top: 1rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--navy);
  border-radius: 14px;
  box-shadow: var(--sh);
  color: #E8EFE9;
}
.cta-band h2 {
  margin: 0;
  max-width: 22ch;
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
}
.cta-band p { margin: 0; max-width: 52ch; color: #D3E5F3; }
.cta-band .route-bg {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 280px;
  opacity: .18;
  pointer-events: none;
}
.cta-spaced { margin-top: 2.5rem; }

/* Full-bleed bands (home): paper photo strip, navy CTA wash. */
.bleed-band {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cta-full { background: var(--navy); }
.cta-full .cta-band {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

footer.site {
  padding: 2.6rem 0 3.2rem;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.foot-grid { display: grid; gap: 1.2rem; }
footer.site p { margin: 0; }
.fbrand { color: var(--navy); font-size: .76rem; letter-spacing: .12em; }
.foot-title { margin-bottom: .4rem; }
.foot-text { color: var(--muted); font-size: .88rem; }

.float-wa {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  padding: .8rem 1.2rem;
  background: #0E7C3F;
  border: 1px solid #BDD8E9;
  border-radius: 4px;
  box-shadow: var(--sh);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.float-wa:hover { transform: translateY(-1px); }

/* ---------- 12. Responsive and reduced motion ---------- */
@media (min-width: 760px) {
  .hero-grid { grid-template-columns: 1.04fr .96fr; align-items: start; }
  .hero { padding: 5.5rem 0 4.2rem; }
  .hero-side { margin-top: 2.2rem; }
  .opts { grid-template-columns: 1fr 1fr; }
  .index-row { grid-template-columns: 64px 1fr auto; align-items: baseline; }
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento .svc:nth-child(1) { grid-column: span 7; }
  .bento .svc:nth-child(2) { grid-column: span 5; margin-top: 1.4rem; }
  .bento .svc:nth-child(3) { grid-column: span 4; }
  .bento .svc:nth-child(4) { grid-column: span 8; margin-top: -.4rem; }
  .why-layout { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .why-sticky { position: sticky; top: 96px; }
  .foot-grid { grid-template-columns: 1.2fr .8fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .row-card { grid-template-columns: 220px 1fr; align-items: start; }
  .cta-band { grid-template-columns: 1.2fr .8fr; align-items: center; }
  .cta-band .cta-actions { justify-self: end; display: flex; flex-wrap: wrap; gap: .7rem; }
  .photo-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .photo-grid figure:last-child { margin-top: 2.2rem; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 1.25rem; }
  .menu-btn { display: inline-flex; }
  nav.main a.nl,
  nav.main .btn { display: none; }
  nav.main.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.5rem 1.3rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }
  nav.main.open a.nl,
  nav.main.open .btn { display: inline-flex; }
  nav.main.open a.nl { min-height: 44px; padding: .7rem 0; }
  .nav-ink { display: none; }
  .stage { min-height: 428px; }
  .hero { padding: 2.6rem 0 2.2rem; }
  .hero-route { display: none; }
  .hero h1 { max-width: 12ch; font-size: 2.15rem; }
  .lead { margin-bottom: 1.5rem; font-size: 1rem; }
  .hero-note { font-size: .85rem; }
  .hero-facts { gap: 1.1rem 1.6rem; margin-top: 1.5rem; padding-top: 1.1rem; }
  .file-card { margin-left: 0; transform: none; }
  .route-check { min-width: 56px; }
  .rc-seal { width: 30px; height: 30px; }
  .ap b { font-size: 1.2rem; }
  section.block { padding: 3rem 0 3.4rem; }
  .page-hero { padding: 2.4rem 0 1.6rem; }
  .btn { text-align: center; white-space: normal; }
  .cta-row .btn { flex: 1 1 100%; }
  .cta-band { padding: 1.6rem; }
  .photo-grid { gap: .9rem; }
  .index-row { padding: 1.05rem .5rem; }
  .why-row { padding: 1.1rem .5rem; }
  .wizard { margin-top: 1.2rem; }
  .float-wa { right: .8rem; bottom: .8rem; padding: .7rem 1rem; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .brand b { font-size: .64rem; letter-spacing: .06em; }
  .hwrap { padding: .8rem 1rem; gap: .6rem; }
  .wrap { padding: 0 1.25rem; }
}

@media (max-width: 360px) {
  .brand b { font-size: .56rem; letter-spacing: .04em; }
  .menu-btn { padding: .5rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}