:root{
  --navy:   #06091a;
  --navy2:  #0c1128;
  --navy3:  #111830;
  --navy4:  #1a2240;
  --gold:   #c9a84c;
  --gold2:  #e8c06a;
  --red:    #d4341a;
  --bg:     #efeae0;
  --surface:#ffffff;
  --surf2:  #0b1024;
  --bdr:    #ddd6c8;
  --text:   #1a1a2e;
  --mid:    #64647a;
  --soft:   #9898aa;
  --t:      0.22s cubic-bezier(0.4,0,0.2,1);
  --r:      14px;
  /* tokens used by the sections ported from the flights page */
  --white:      #ffffff;
  --dim:        #555e7a;
  --red2:       #e8432a;
  --border:     rgba(201,168,76,0.18);
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --gold3:      #f2d080;
  --gold-lt:    rgba(201,168,76,0.12);
  --cream:      #fdf8ee;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);padding:10px 18px;z-index:999;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:4px}
/* ─── hero ─── */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:76px 48px 150px;          /* deep bottom pad: stat cards sit in it */
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #1c2a52 0%, transparent 60%),
    linear-gradient(178deg, var(--navy2) 0%, var(--navy3) 45%, var(--navy) 100%);
}
/* soft aurora + fine grid, layered for depth */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 55% at 22% 12%, rgba(212,52,26,0.16), transparent 70%),
    radial-gradient(ellipse 52% 62% at 80% 8%,  rgba(201,168,76,0.16), transparent 72%);
  filter:blur(6px)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(201,168,76,0.14) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 35%, transparent 78%)}
/* single gold horizon line under the headline block */
.hero-glow{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(760px,86vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.55),transparent);
  box-shadow:0 0 40px 8px rgba(201,168,76,.10)}

.hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}

.hero-pill{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold2);background:rgba(201,168,76,0.08);
  border:1px solid rgba(201,168,76,0.34);border-radius:100px;
  padding:9px 20px;margin-bottom:26px}

.hero-title{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(34px,5.6vw,64px);line-height:1.04;color:#fff;
  letter-spacing:-0.5px;margin-bottom:22px}
.hero-title em{display:block;font-style:italic;color:var(--gold2);
  background:linear-gradient(95deg,var(--gold2),var(--gold3) 45%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-top:4px}

.hero-sub{font-size:15.5px;line-height:1.85;color:rgba(255,255,255,0.56);
  max-width:660px;margin:0 auto 32px}

.hero-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero-chip{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.13);
  border-radius:100px;padding:9px 18px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,0.74);transition:all var(--t)}
.hero-chip:hover{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.42);
  color:var(--gold2);transform:translateY(-1px)}
.hero-chip-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.22);flex-shrink:0}

/* ─── stats: white cards overlapping the hero edge ─── */
.stats{background:transparent;padding:0 48px;position:relative;z-index:2;
  margin-top:-96px;margin-bottom:16px}
.stats-inner{max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--surface);border:1px solid var(--bdr);border-radius:18px;
  padding:28px 20px;text-align:center;
  box-shadow:0 18px 44px rgba(6,9,26,0.20), 0 2px 6px rgba(6,9,26,0.06);
  transition:transform var(--t), box-shadow var(--t)}
.stat:hover{transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(6,9,26,0.26), 0 3px 8px rgba(6,9,26,0.08)}
.stat-num{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(34px,4vw,46px);line-height:1;color:var(--navy2);letter-spacing:-1px}
.stat-num em{font-style:normal;color:var(--red)}
.stat:nth-child(even) .stat-num{color:var(--gold)}
.stat:nth-child(even) .stat-num em{color:var(--navy2)}
.stat-lbl{display:block;margin-top:10px;font-size:12px;font-weight:500;
  letter-spacing:.3px;color:var(--mid)}

/* ─── generic section ─── */
.wrap{max-width:1100px;margin:0 auto;padding:0 48px}
.sec{padding:74px 0}
.sec-alt{
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,  rgba(212,52,26,.10), transparent 62%),
    radial-gradient(ellipse 70% 55% at 85% 100%,rgba(201,168,76,.11), transparent 64%),
    linear-gradient(180deg,#0d1226,#0b1024 55%,#0a0e20);
  border-top:1px solid rgba(201,168,76,.20);
  border-bottom:1px solid rgba(201,168,76,.20);
  position:relative}
.sec-alt::before,.sec-alt::after{content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.55),transparent)}
.sec-alt::before{top:-1px} .sec-alt::after{bottom:-1px}
/* type inverts inside the dark bands */
.sec-alt .h2{color:#fff}
.sec-alt .h2 em{color:var(--gold2)}
.sec-alt .lead{color:rgba(255,255,255,.56)}
.sec-alt .lead strong{color:#fff}
.sec-alt .eyebrow{color:var(--gold2)}
.sec-alt .eyebrow::before{background:var(--gold2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;
  letter-spacing:2.6px;text-transform:uppercase;color:#7a5f22;margin-bottom:14px}
.eyebrow::before{content:'';width:26px;height:1px;background:#7a5f22;flex-shrink:0}
.h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.14;margin-bottom:16px;max-width:760px}
.h2 em{color:var(--red);font-style:italic}
.lead{font-size:15.5px;color:var(--mid);max-width:680px;line-height:1.85}
.lead+.lead{margin-top:16px}
.lead strong{color:var(--text);font-weight:600}

/* ─── story ─── */
.story{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}
.story-aside{position:sticky;top:96px;border-radius:18px;padding:32px;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.14), transparent 60%),
             linear-gradient(160deg,#111830,#0b1024);
  border:1px solid rgba(201,168,76,.22);
  box-shadow:0 26px 60px -26px rgba(6,9,26,.7)}
.story-aside::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold2),var(--gold),transparent)}
.story-aside h3{font-family:'Cormorant Garamond',serif;font-size:21px;color:#fff;margin-bottom:6px}
.story-aside p{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.75;margin-bottom:20px}
.fact{display:flex;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,0.08)}
.fact-k{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,0.35);flex:0 0 92px;padding-top:2px}
.fact-v{font-size:13px;color:var(--gold2);font-weight:600}

/* ─── signature: the route line ─── */
.route{position:relative;margin-top:34px;padding-left:0}
.route::before{content:'';position:absolute;left:29px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 40%,rgba(201,168,76,.12));
  border-radius:2px;box-shadow:0 0 18px rgba(201,168,76,.35)}
.leg{position:relative;display:grid;grid-template-columns:60px 1fr;gap:26px;padding:20px 0}
.leg-node{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:1px;
  color:var(--gold2);position:relative;z-index:1;flex-shrink:0;
  background:radial-gradient(circle at 50% 32%, #182142, #0b1024 72%);
  border:1.5px solid rgba(201,168,76,.55);
  box-shadow:0 0 0 6px rgba(11,16,36,.9), 0 0 24px rgba(201,168,76,.22);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease}
.leg:hover .leg-node{transform:scale(1.07);
  box-shadow:0 0 0 6px rgba(11,16,36,.9), 0 0 34px rgba(201,168,76,.45)}

.leg-node.is-end{background:linear-gradient(150deg,var(--gold),#7a5f22);
  border-color:var(--gold2);color:#0b1024;font-size:19px;
  box-shadow:0 0 0 6px rgba(11,16,36,.9), 0 0 34px rgba(201,168,76,.5)}
.leg h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;
  margin-bottom:6px;padding-top:12px;color:#fff;letter-spacing:-.2px}
.leg p{font-size:14.5px;color:rgba(255,255,255,.55);line-height:1.8;max-width:620px}

/* ─── cards ─── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}
/* light-section card: real elevation, so it sits ON the parchment not in it */
.card{position:relative;background:var(--surface);border:1px solid var(--bdr);
  border-radius:16px;padding:30px 28px 28px;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,26,46,.05), 0 8px 22px -10px rgba(26,26,46,.16);
  transition:transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s cubic-bezier(.2,.7,.3,1),
             border-color .38s ease}
/* gold hairline draws across the top edge on hover */
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--red));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover{transform:translateY(-6px);border-color:rgba(201,168,76,.55);
  box-shadow:0 2px 4px rgba(26,26,46,.06), 0 26px 50px -18px rgba(26,26,46,.30)}
.card:hover::before{transform:scaleX(1)}

/* the icon gets a container instead of floating as bare emoji */
.card-ico{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;font-size:20px;margin-bottom:18px;
  background:linear-gradient(150deg,rgba(201,168,76,.16),rgba(201,168,76,.05));
  border:1px solid rgba(201,168,76,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .38s cubic-bezier(.2,.7,.3,1), background .38s ease}
.card:hover .card-ico{transform:scale(1.06) rotate(-3deg);
  background:linear-gradient(150deg,rgba(201,168,76,.28),rgba(201,168,76,.10))}

.card h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;
  line-height:1.24;letter-spacing:-.2px;margin-bottom:10px;color:var(--navy2)}
.card p{font-size:14.2px;color:var(--mid);line-height:1.8}

/* dark-section card: translucent glass over the navy band */
.sec-alt .card{
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border-color:rgba(255,255,255,.11);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(2px)}
.sec-alt .card:hover{border-color:rgba(201,168,76,.5);
  background:linear-gradient(165deg,rgba(201,168,76,.10),rgba(255,255,255,.03));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 60px -22px rgba(0,0,0,.9),
             0 0 0 1px rgba(201,168,76,.12)}
.sec-alt .card h3{color:#fff}
.sec-alt .card p{color:rgba(255,255,255,.55)}
.sec-alt .card-ico{background:linear-gradient(150deg,rgba(201,168,76,.22),rgba(201,168,76,.06));
  border-color:rgba(201,168,76,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}

/* grids breathe a little more */
.grid3{gap:24px;margin-top:42px}
.grid2{gap:24px;margin-top:42px}

/* ─── promise ─── */
.promise{position:relative;overflow:hidden;border-radius:20px;padding:42px;margin-top:42px;
  background:
    radial-gradient(ellipse 60% 70% at 88% 8%, rgba(201,168,76,.16), transparent 60%),
    linear-gradient(160deg,#111830,#0b1024);
  border:1px solid rgba(201,168,76,.24);
  box-shadow:0 30px 70px -28px rgba(6,9,26,.75)}
.promise::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold2),var(--gold),transparent)}
.promise h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:#fff;margin-bottom:10px}
.promise>p{font-size:14.5px;color:rgba(255,255,255,0.55);line-height:1.8;max-width:640px;margin-bottom:26px}
.promise-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px}
.pitem{display:flex;gap:12px;align-items:flex-start}
.pitem-mark{color:var(--gold2);font-size:15px;flex-shrink:0;line-height:1.5}
.pitem b{display:block;font-size:14px;color:#fff;font-weight:600;margin-bottom:2px}
.pitem span{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.7}

/* ─── credentials ─── */
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.cred{background:var(--surface);border:1px solid var(--bdr);border-radius:10px;padding:12px 18px;font-size:12.5px;font-weight:600;color:var(--text)}
.cred small{display:block;font-size:10.5px;color:var(--soft);font-weight:400;letter-spacing:.4px;margin-top:2px}

/* ─── accreditation strip (mirrors the flights page) ─── */
.accred{margin-top:36px;border-radius:18px;padding:26px 28px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(201,168,76,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 46px -22px rgba(0,0,0,.85)}
.accred-label{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold2);flex-shrink:0}
.accred-badges{display:flex;flex-wrap:wrap;gap:9px}
.ab{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);border-radius:100px;padding:10px 17px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.86);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease}
.ab i{font-style:normal;font-size:12px;opacity:.85}
.ab b{color:var(--gold2);font-weight:700;margin-left:2px}
.ab:hover{border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.13);transform:translateY(-2px)}
@media(max-width:640px){.accred{padding:18px;gap:14px}.ab{padding:8px 13px;font-size:11.5px}}



/* ─── engage: review ask + deal alerts, one band ───────────────────────────
   Was two full-width slabs — a broken navy→cream gradient under the review ask,
   then a solid gold newsletter. Two loud grounds fighting each other. Now one
   dark band matching the page's other dark sections, split into two columns
   that each keep their own accent: Trustpilot green, deal-alert gold.        */
.engage{
  padding:74px 48px;
  background:
    radial-gradient(ellipse 55% 70% at 18% 20%, rgba(0,182,122,.13), transparent 62%),
    radial-gradient(ellipse 55% 70% at 82% 80%, rgba(201,168,76,.15), transparent 62%),
    linear-gradient(165deg,#0d1226,#0b1024 55%,#0a0e20);
  border-top:1px solid rgba(201,168,76,.22);
  border-bottom:1px solid rgba(201,168,76,.22);
  position:relative}
.engage::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,182,122,.5) 25%,rgba(201,168,76,.5) 75%,transparent)}

.engage-inner{max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1px 1fr;gap:0 48px;align-items:start}
.engage-rule{align-self:stretch;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,168,76,.28) 18%,rgba(201,168,76,.28) 82%,transparent)}
.engage-col{display:flex;flex-direction:column;align-items:flex-start}

.engage-mark{font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}
.tp-mark{color:#00b67a;font-size:19px;letter-spacing:5px;text-transform:none}
.nl-mark{color:var(--gold2);background:rgba(201,168,76,.10);
  border:1px solid rgba(201,168,76,.32);border-radius:100px;padding:8px 16px}

.engage-h{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(25px,2.9vw,34px);line-height:1.14;color:#fff;
  letter-spacing:-.3px;margin-bottom:12px}
.engage-h em{display:block;font-style:italic;margin-top:2px}
.engage-col:first-child .engage-h em{color:#3ddba0}
.engage-col:last-child .engage-h em{color:var(--gold2)}

.engage-p{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.55);margin-bottom:24px}

.engage-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;border:0;cursor:pointer;font-family:inherit;
  padding:14px 28px;border-radius:100px;font-size:14.5px;font-weight:700;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease}
.tp-btn{background:#008052;color:#fff;box-shadow:0 8px 26px -8px rgba(0,182,122,.55)}
.tp-btn:hover{background:#00915d;transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(0,182,122,.75)}
.nl-btn{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#0b1024;
  box-shadow:0 8px 26px -8px rgba(201,168,76,.7);flex-shrink:0}
.nl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(201,168,76,.85)}

.engage-form{display:flex;gap:10px;width:100%;max-width:430px;flex-wrap:wrap}
.engage-input{flex:1 1 210px;min-width:0;padding:14px 20px;border-radius:100px;
  font-family:inherit;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:border-color .3s ease, background .3s ease}
.engage-input::placeholder{color:rgba(255,255,255,.38)}
.engage-input:focus{outline:none;border-color:rgba(201,168,76,.6);
  background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(201,168,76,.14)}

.engage-note{font-size:11.5px;color:rgba(255,255,255,.34);margin-top:16px;line-height:1.7}
.engage-note strong{color:var(--gold2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:860px){
  .engage{padding:56px 20px}
  .engage-inner{grid-template-columns:1fr;gap:0}
  .engage-rule{width:auto;height:1px;margin:38px 0;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,.28),transparent)}
}

/* ─── faq ─── */
.faq{margin-top:34px;border-top:1px solid var(--bdr)}
details{border-bottom:1px solid var(--bdr)}
summary{padding:20px 40px 20px 0;font-size:16px;font-weight:600;cursor:pointer;list-style:none;position:relative;transition:color var(--t)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--gold);font-weight:400;transition:transform var(--t)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
summary:hover{color:var(--red)}
details p{padding:0 40px 22px 0;font-size:14.5px;color:var(--mid);line-height:1.85;max-width:800px}

/* ─── cta ─── */
.cta{background:linear-gradient(135deg,var(--navy2),var(--navy4));padding:64px 48px;text-align:center;border-top:4px solid var(--gold)}
.cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.6vw,40px);color:#fff;margin-bottom:12px}
.cta h2 em{color:var(--gold2);font-style:italic}
.cta p{font-size:15px;color:rgba(255,255,255,0.55);max-width:520px;margin:0 auto 28px;line-height:1.8}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--red),#e8432a);color:#fff;text-decoration:none;padding:15px 32px;border-radius:100px;font-size:15px;font-weight:700;box-shadow:0 6px 22px rgba(212,52,26,0.42);transition:all var(--t)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,52,26,0.55)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.85);text-decoration:none;padding:15px 30px;border-radius:100px;font-size:15px;font-weight:600;transition:all var(--t)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2);background:rgba(201,168,76,0.07)}

/* ─── legal ─── */
.legal{background:#f7f6f2;padding:44px 48px 40px;
  border-top:1px solid rgba(201,168,76,.30);
  border-bottom:1px solid var(--bdr)}
.legal-inner{max-width:1100px;margin:0 auto}
.legal h4{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:#7a5f22;margin-bottom:14px}
.legal h4::before{content:'';width:24px;height:1px;background:#7a5f22;flex-shrink:0}
.legal p{font-size:11.5px;color:#6b6b80;line-height:1.9;margin-bottom:15px;max-width:1000px}
.legal p strong{color:#2a2a40;font-weight:700}

/* ─── responsive ─── */
@media(max-width:980px){
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:16px}
  .hero{padding-bottom:170px}
  .stats{margin-top:-120px}
}
@media(max-width:900px){
  .story{grid-template-columns:1fr;gap:32px}
  .story-aside{position:static}
  .grid3,.grid2,.promise-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .navbar{padding:0 20px;height:60px}
  .nav-back{display:none}
  .hero{padding:44px 20px 148px}
  .hero-pill{font-size:10px;letter-spacing:1.8px;padding:8px 15px;margin-bottom:20px}
  .hero-title{font-size:clamp(28px,8vw,38px)}
  .hero-sub{font-size:14.5px;margin-bottom:26px}
  .hero-chip{padding:8px 14px;font-size:11.5px}
  .stats{margin-top:-108px}
  .stat{padding:20px 12px;border-radius:14px}
  .stat-num{font-size:30px}
  .stat-lbl{font-size:11px;margin-top:7px}
  .wrap,.stats,.cta,.legal,footer{padding-left:20px;padding-right:20px}
  .sec{padding:52px 0}
  .route::before{left:22px}
  .leg{grid-template-columns:46px 1fr;gap:18px}
  .leg-node{width:46px;height:46px;font-size:11px}
  .leg h3{padding-top:8px;font-size:19px}
  .promise{padding:28px}
  .cta{padding:48px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .card:hover,.stat:hover,.hero-chip:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════
   Sections ported verbatim from asaptrips_flights — live
   assistance, newsletter and mega footer. CSS copied as-is so
   they render identically across pages.
══════════════════════════════════════════════════════════ */
.logo-badge {
  background: var(--red);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}
.form-tab.active {
  background: rgba(255,255,255,0.97);
  color: var(--red);
}
.form-tab:not(.active):hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
}
/* ═══════════════════════════════════════════
   SHARED SECTION UTILITIES
═══════════════════════════════════════════ */
.sec { padding: 90px 48px; }
.sec-dark { background: var(--navy2); }
.sec-inner { max-width: 1140px; margin: 0 auto; }
.sec-eyebrow { font-size:10px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold2);margin-bottom:10px;display:block; }
.sec-eyebrow.red { color:var(--red); }
.sec-title { font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.1;letter-spacing:-0.5px; }
.sec-title.light { color:var(--white); }
.sec-title.dark { color:var(--navy); }
.sec-title em { font-style:italic;color:var(--gold2); }
.sec-title.dark em { color:var(--red); }
.sec-sub { font-size:15px;font-weight:300;line-height:1.8;max-width:520px;margin-top:14px; }
.sec-sub.light { color:rgba(255,255,255,0.5); }
.sec-sub.dark { color:var(--dim); }
/* ═══════════════════════════════════════════
   LIVE ASSISTANCE
═══════════════════════════════════════════ */
.assist-layout { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
.assist-channels { display:flex;flex-direction:column;gap:14px;margin-top:32px; }
.assist-channel { display:flex;align-items:center;gap:16px;background:rgba(201,168,76,.06);border:1px solid var(--border);border-radius:14px;padding:18px 20px;cursor:pointer;transition:border-color var(--transition),background var(--transition);text-decoration:none; }
.assist-channel:hover { border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.1); }
.assist-ch-icon { width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.06));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.assist-ch-body { flex:1; }
.assist-ch-label { font-size:11px;color:var(--mid);margin-bottom:3px;letter-spacing:1px;text-transform:uppercase; }
.assist-ch-val { font-size:16px;font-weight:600;color:var(--white); }
.assist-ch-sub { font-size:11px;color:var(--mid);margin-top:2px; }
.assist-ch-arrow { font-size:18px;color:var(--gold2); }
.assist-visual { background:var(--navy3);border:1px solid var(--border);border-radius:24px;padding:36px 32px;position:relative;overflow:hidden; }
.assist-visual::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,.12),transparent 60%); }
.chat-bubble-wrap { position:relative;z-index:1; }
.chat-time { font-size:10px;color:var(--mid);text-align:center;margin-bottom:16px;letter-spacing:.5px; }
.chat-bubble { border-radius:18px;padding:13px 16px;margin-bottom:10px;max-width:85%;font-size:13px;line-height:1.6; }
.chat-bubble.agent { background:var(--navy4);border:1px solid var(--border);color:rgba(255,255,255,.85);border-radius:18px 18px 18px 4px; }
.chat-bubble.user { background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;margin-left:auto;border-radius:18px 18px 4px 18px; }
.chat-agent-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.chat-agent-av { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--navy); }
.chat-agent-name { font-size:11px;font-weight:600;color:var(--gold2); }
.chat-agent-status { font-size:10px;color:var(--mid); }
.chat-typing { display:flex;gap:4px;align-items:center;background:var(--navy4);border:1px solid var(--border);border-radius:18px 18px 18px 4px;padding:12px 16px;width:fit-content;margin-bottom:10px; }
.chat-dot { width:6px;height:6px;border-radius:50%;background:var(--mid);animation:chatDot 1.4s infinite both; }
.chat-dot:nth-child(2) {animation-delay:.2s}
.chat-dot:nth-child(3) {animation-delay:.4s}
/* ═══════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════ */
.newsletter-sec { background:linear-gradient(135deg,#b8893a,#c9a84c 40%,#dfc06e 70%,#c9a84c);padding:72px 48px;text-align:center;position:relative;overflow:hidden; }
.newsletter-sec::before { content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px; }
.newsletter-inner { max-width:640px;margin:0 auto;position:relative;z-index:1; }
.newsletter-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(6,9,26,.15);border:1px solid rgba(6,9,26,.2);border-radius:100px;padding:6px 16px;margin-bottom:20px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--navy); }
.newsletter-title { font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,44px);font-weight:700;color:var(--navy);letter-spacing:-.5px;line-height:1.1;margin-bottom:12px; }
.newsletter-sub { font-size:14px;color:rgba(6,9,26,.6);margin-bottom:28px;line-height:1.7; }
.newsletter-form { display:flex;gap:10px;background:rgba(255,255,255,.4);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);border-radius:14px;padding:8px; }
.newsletter-input { flex:1;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);padding:0 14px;outline:none; }
.newsletter-input::placeholder { color:rgba(6,9,26,.4); }
.newsletter-btn { background:var(--navy);color:var(--gold2);border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;padding:13px 24px;cursor:pointer;white-space:nowrap;transition:background var(--transition); }
.newsletter-btn:hover { background:var(--navy3); }
.newsletter-note { font-size:11px;color:rgba(6,9,26,.45);margin-top:12px; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal { opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.footer-5col { grid-template-columns:1fr 1fr 1fr !important; }
.assist-layout { gap:36px; }
.sec { padding:60px 20px; }
.assist-layout { grid-template-columns:1fr; }
.footer-5col { grid-template-columns:1fr 1fr !important; gap:28px !important; }
.footer-bottom-bar { flex-direction:column; align-items:flex-start; }
.newsletter-sec { padding:52px 20px; }
.newsletter-form { flex-direction:column; }
.newsletter-input { padding:14px; }
.mega-footer { padding:52px 20px 0; }
.footer-5col { grid-template-columns:1fr !important; }
.logo-badge { font-size: 13px; padding: 3px 9px; }
.form-tab.active { color: var(--red) !important; }
.compare-tab.active { border-color: var(--gold2); color: var(--gold2); background: rgba(201,168,76,0.08); }
.compare-tab:hover:not(.active) { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); }
/* Heading + sub overrides for white-bg referral section */
.referral-sec .sec-title.light { color: var(--navy) !important; }
.referral-sec .sec-eyebrow { color: var(--red) !important; }
.referral-sec .sec-sub.light { color: #666e88 !important; }
.cp-bubble.agent { background: var(--navy4); border: 1px solid var(--border); color: rgba(255,255,255,0.82); border-radius: 16px 16px 16px 4px; }
.cp-bubble.user { background: linear-gradient(135deg,var(--red),var(--red2)); color: #fff; margin-left: auto; border-radius: 16px 16px 4px 16px; }
.newsletter-input { font-size: 16px !important; }
.sec { padding: 52px 20px !important; }
.newsletter-sec { padding: 48px 18px !important; }
.mega-footer { padding: 44px 18px 0 !important; }
.sec { padding: 44px 16px !important; }
.sec-title, .section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }
.sec-sub, .section-sub {
    font-size: 14px !important;
  }
/* Bump tiny labels to 12px minimum on mobile */
  .sec-eyebrow, .section-eyebrow,
  .ref-code-label, .ref-chip-label,
  .why-card-num, .spd-sub,
  .ref-amount-label, .ref-disclaimer,
  .deal-was, .deal-pp, .route-from,
  .route-city, .testi-route,
  .assist-ch-sub, .perk-desc {
    font-size: 12px !important;
  }
.footer-5col { grid-template-columns: 1fr !important; gap: 28px !important; }
.footer-bottom-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
/* Hide secondary footer columns on very small screens */
  .footer-5col > *:not(:first-child):not(:nth-child(2)) { display: none !important; }
.footer-5col > *:not(:first-child) { display: none !important; }
.newsletter-form { flex-direction: column !important; gap: 10px !important; }
.newsletter-input { width: 100% !important; }
.newsletter-btn { width: 100% !important; justify-content: center !important; }
.chat-bubble { font-size: 13px !important; }
.sec-sub { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
/* ═══════════════════════════════════════════
   LEGAL PROTECTION — content & UI guards
═══════════════════════════════════════════ */
/* Disable text selection on key UI/brand elements */
.navbar, .hero-title, .hero-subtitle, .logo-badge, .logo-text,
.deal-card, .route-card, .sec-title, .mega-footer,
.deal-price, .route-price, .deal-city, .route-code {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sec {padding:32px 24px!important;}

@media (max-width:1024px) {
.footer-5col { grid-template-columns:1fr 1fr 1fr !important; }
.assist-layout { gap:36px; }
}
@media (max-width:768px) {
.sec { padding:60px 20px; }
.assist-layout { grid-template-columns:1fr; }
.footer-5col { grid-template-columns:1fr 1fr !important; gap:28px !important; }
.footer-bottom-bar { flex-direction:column; align-items:flex-start; }
.newsletter-sec { padding:52px 20px; }
.newsletter-form { flex-direction:column; }
.newsletter-input { padding:14px; }
.mega-footer { padding:52px 20px 0; }
}
@media (max-width:480px) {
.footer-5col { grid-template-columns:1fr !important; }
}
@media (max-width: 620px) {
.logo-badge { font-size: 13px; padding: 3px 9px; }
.form-tab.active { color: var(--red) !important; }
}
@media (max-width: 768px) {
.newsletter-input { font-size: 16px !important; }
}
@media (max-width: 768px) {
.sec { padding: 52px 20px !important; }
.newsletter-sec { padding: 48px 18px !important; }
.mega-footer { padding: 44px 18px 0 !important; }
}
@media (max-width: 480px) {
.sec { padding: 44px 16px !important; }
}
@media (max-width: 480px) {
.sec-title, .section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }
.sec-sub, .section-sub {
    font-size: 14px !important;
  }
/* Bump tiny labels to 12px minimum on mobile */
  .sec-eyebrow, .section-eyebrow,
  .ref-code-label, .ref-chip-label,
  .why-card-num, .spd-sub,
  .ref-amount-label, .ref-disclaimer,
  .deal-was, .deal-pp, .route-from,
  .route-city, .testi-route,
  .assist-ch-sub, .perk-desc {
    font-size: 12px !important;
  }
}
@media (max-width: 640px) {
.footer-5col { grid-template-columns: 1fr !important; gap: 28px !important; }
.footer-bottom-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
/* Hide secondary footer columns on very small screens */
  .footer-5col > *:not(:first-child):not(:nth-child(2)) { display: none !important; }
}
@media (max-width: 380px) {
.footer-5col > *:not(:first-child) { display: none !important; }
}
@media (max-width: 640px) {
.newsletter-form { flex-direction: column !important; gap: 10px !important; }
.newsletter-input { width: 100% !important; }
.newsletter-btn { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 480px) {
.chat-bubble { font-size: 13px !important; }
}
@media (max-width: 640px) {
.sec-sub { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; }
}
@media print {
.sec {padding:32px 24px!important;}
}


/* ══ scroll reveal — only active when JS is present ══ */
.js .reveal{opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1)}
.js .reveal.visible{opacity:1;transform:translateY(0) scale(1)}
.js .reveal-delay-1{transition-delay:.09s}
.js .reveal-delay-2{transition-delay:.18s}
.js .reveal-delay-3{transition-delay:.27s}
.js .reveal-delay-4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}


/* ══ group travel ══ */
/* ═══════════════════════════════════════════════════════════════════════════
   GROUP TRAVEL — the pieces the site does not already have.
   Everything else (nav, hero, .sec, .card, .grid3, .stats, footer) is the
   site's own, so this page cannot drift from the rest.
   ═══════════════════════════════════════════════════════════════════════════ */

.gt-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
}

/* ── the left column ──────────────────────────────────────────────────────*/
.gt-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1; font-weight: 600;
  color: var(--text); letter-spacing: -.5px;
  margin: 10px 0 16px;
}
.gt-h2 em { display: block; font-style: italic; color: var(--gold); }
.gt-lede {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; line-height: 1.75; color: var(--mid);
  max-width: 480px;
}
.gt-points { list-style: none; margin: 24px 0 0; padding: 0; }
.gt-points li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 12px;
  padding: 14px 0;
  border-top: 1px solid var(--bdr);
}
.gt-points li:first-child { border-top: 0; padding-top: 0; }
.gt-points i {
  grid-row: 1 / span 2;
  font-style: normal; font-size: 18px; line-height: 1;
}
.gt-points b {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.gt-points span {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; line-height: 1.6; color: var(--mid); margin-top: 3px;
}
.gt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.gt-chip {
  padding: 7px 13px; border: 1px solid var(--bdr); border-radius: 100px;
  background: var(--surface);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--dim);
}

/* ── the form card ────────────────────────────────────────────────────────*/
.gt-card {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 20px;
  padding: 26px 24px 24px;
  box-shadow: 0 1px 2px rgba(6,9,26,.04),
              0 26px 64px -30px rgba(6,9,26,.30);
}
.gt-card-head { margin-bottom: 18px; }
.gt-card-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.gt-card-head p {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--mid);
}

/* trip type */
.gt-trip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #f2ede2; border-radius: 12px; padding: 4px; margin-bottom: 16px;
}
.gt-trip-b {
  border: 0; border-radius: 9px; padding: 10px 6px; background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-weight: 700; color: var(--mid);
  cursor: pointer; transition: background var(--t), color var(--t);
}
.gt-trip-b.is-on { background: var(--navy2); color: var(--gold2); }

/* fields */
.gt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gt-f { margin-bottom: 13px; min-width: 0; }
.gt-l {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mid); margin-bottom: 6px;
}
.gt-l i { font-style: normal; color: var(--red); }
.gt-opt { font-weight: 400; letter-spacing: .4px; text-transform: none; color: var(--soft); }
.gt-i {
  width: 100%; height: 48px; box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid var(--bdr); border-radius: 11px; background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;                    /* 16px keeps iOS from zooming */
  font-weight: 600; color: var(--text);
  transition: border-color var(--t), box-shadow var(--t);
}
.gt-i::placeholder { font-weight: 400; color: var(--soft); }
.gt-i:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.20);
}
select.gt-i { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mid) 50%),
                    linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px; }
.gt-ta { height: auto; padding: 12px 13px; line-height: 1.6; resize: vertical; }
.gt-e {
  display: none;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--red); margin-top: 5px;
}
.gt-f.invalid .gt-e, .gt-pax.invalid .gt-e, .gt-consent-wrap.invalid .gt-e { display: block; }
.gt-f.invalid .gt-i { border-color: var(--red); }

.gt-phone { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.gt-cc { padding-right: 26px; background-position: calc(100% - 13px) 21px, calc(100% - 8px) 21px; }

/* group size */
.gt-pax { margin-bottom: 13px; }
.gt-step {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--bdr); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 8px; background: #fff;
}
.gt-step-k b {
  display: block;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--text);
}
.gt-step-k small {
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--soft);
}
.gt-step-c { display: flex; align-items: center; gap: 4px; }
.gt-step-b {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--bdr); background: #faf7f0;
  font-size: 16px; line-height: 1; color: var(--text);
  cursor: pointer; transition: background var(--t), border-color var(--t);
}
.gt-step-b:hover { background: #f2ede2; border-color: var(--gold); }
.gt-step-b:disabled { opacity: .35; cursor: not-allowed; }
.gt-step-n {
  min-width: 34px; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text);
}
.gt-pax-note {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px;
  color: var(--mid); margin-top: 2px;
}
.gt-pax-note.warn { color: var(--red); font-weight: 600; }

/* a rule with a word on it */
.gt-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px;
}
.gt-sep::before, .gt-sep::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--bdr);
}
.gt-sep span {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft);
}

/* consent */
.gt-consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; margin: 6px 0 4px; cursor: pointer;
}
.gt-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); }
.gt-consent span {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px;
  line-height: 1.6; color: var(--mid);
}
.gt-consent a { color: var(--gold); font-weight: 700; text-decoration: none; }
.gt-consent a:hover { text-decoration: underline; }

/* the action */
.gt-submit {
  position: relative; width: 100%; height: 54px; margin-top: 12px;
  border: 0; border-radius: 13px;
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  color: #1a1408;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 800; letter-spacing: .9px;
  cursor: pointer;
  transition: transform var(--t), filter var(--t);
  box-shadow: 0 8px 22px -10px rgba(201,168,76,.6);
}
.gt-submit:hover { transform: translateY(-1px); filter: brightness(1.04); }
.gt-submit.loading { pointer-events: none; filter: saturate(.7); }
.gt-submit.loading .gt-submit-tx { opacity: .4; }
.gt-spin {
  display: none; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(26,20,8,.25); border-top-color: #1a1408;
  border-radius: 50%; animation: gtSpin .7s linear infinite;
}
.gt-submit.loading .gt-spin { display: block; }
@keyframes gtSpin { to { transform: rotate(360deg); } }
.gt-foot {
  font-family: 'DM Sans', sans-serif; font-size: 11px;
  color: var(--soft); text-align: center; margin-top: 12px;
}

/* the confirmation that replaces the form */
.gt-done { text-align: center; padding: 14px 0 6px; }
.gt-done-tick {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  color: #1a1408; font-size: 27px; font-weight: 700;
}
.gt-done h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.gt-done p {
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.7;
  color: var(--mid); margin-bottom: 18px;
}
.gt-done b { color: var(--text); letter-spacing: 1px; }

/* ── how it works ─────────────────────────────────────────────────────────*/
.gt-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.gt-how-s {
  background: var(--surface); border: 1px solid var(--bdr);
  border-radius: 14px; padding: 20px 18px;
}
.gt-how-s .gt-how-n {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy2); color: var(--gold2);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  margin-bottom: 12px;
}
.gt-how-s b {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
/* :not(.gt-how-n) matters. The number is a <span> inside .gt-how-s too, so a
   bare `.gt-how-s span` rule (specificity 0,1,1) outranked `.gt-how-n` (0,1,0)
   and gave the digit display:block, 12.5px, and a mid grey — which on the dark
   navy disc read as nothing at all. */
.gt-how-s span:not(.gt-how-n) {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; line-height: 1.65; color: var(--mid);
}

/* the tag on a category card */
.gt-tag {
  display: inline-block; margin-top: 12px;
  padding: 5px 11px; border-radius: 100px;
  background: #f6f2e8; border: 1px solid var(--bdr);
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--dim);
}

/* ── questions ────────────────────────────────────────────────────────────*/
.gt-faq { margin-top: 26px; display: grid; gap: 10px; }
.gt-faq-i {
  background: var(--surface); border: 1px solid var(--bdr);
  border-radius: 12px; padding: 0 18px;
}
.gt-faq-i summary {
  cursor: pointer; list-style: none; padding: 16px 28px 16px 0;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--text); position: relative;
}
.gt-faq-i summary::-webkit-details-marker { display: none; }
.gt-faq-i summary::after {
  content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 19px; font-weight: 400; color: var(--gold);
}
.gt-faq-i[open] summary::after { content: '−'; }
.gt-faq-i p {
  margin: 0; padding: 0 0 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.7;
  color: var(--mid);
}

/* ── the close ────────────────────────────────────────────────────────────*/
.gt-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.gt-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: 100px;
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  color: #1a1408; text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 800;
  letter-spacing: .5px;
  transition: transform var(--t), filter var(--t);
}
.gt-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.gt-cta-ghost {
  background: transparent; color: var(--gold2);
  border: 1px solid rgba(201,168,76,.45);
}
.gt-cta-ghost:hover { background: rgba(201,168,76,.10); filter: none; }

/* ── narrower ─────────────────────────────────────────────────────────────*/
@media (max-width: 1000px) {
  .gt-grid { grid-template-columns: 1fr; gap: 34px; }
  .gt-lede { max-width: none; }
  .gt-how { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .gt-card { padding: 20px 15px 18px; border-radius: 16px; }
  .gt-row2 { grid-template-columns: 1fr; gap: 0; }
  .gt-how { grid-template-columns: 1fr; }
  .gt-phone { grid-template-columns: 104px 1fr; }
  .gt-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-submit, .gt-cta { transition: none; }
  .gt-submit:hover, .gt-cta:hover { transform: none; }
  .gt-spin { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE CONFIRMATION MODAL
   A panel that replaces the form in place can be scrolled past and missed —
   particularly on a phone, where the form is taller than the screen. A modal
   takes focus, states the reference, and stays until dismissed.
   ═══════════════════════════════════════════════════════════════════════════ */
.gt-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gt-modal[hidden] { display: none; }
.gt-modal-bd {
  position: absolute; inset: 0;
  background: rgba(6,9,26,.62);
  backdrop-filter: blur(3px);
  animation: gtFade .2s ease both;
}
.gt-modal-card {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--surface);
  border-radius: 22px;
  padding: 38px 32px 30px;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(6,9,26,.55);
  animation: gtPop .26s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes gtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gtPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.gt-modal-tick {
  width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #22b866;
  color: #fff; font-size: 40px; line-height: 1;
  box-shadow: 0 0 0 10px rgba(34,184,102,.14);
}
.gt-modal-t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 31px; font-weight: 600; color: var(--text);
  margin-bottom: 12px;
}
.gt-modal-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; line-height: 1.7; color: var(--mid);
  margin-bottom: 22px;
}
.gt-modal-p b { color: var(--text); }
.gt-modal-ref {
  display: inline-block;
  padding: 14px 30px; border-radius: 12px;
  background: #f2efe7;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 600; letter-spacing: 3px;
  color: var(--text);
}
.gt-modal-note {
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: var(--soft); margin: 12px 0 22px;
}
.gt-modal-acts { display: grid; gap: 9px; }
.gt-modal-call {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 12px;
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  color: #1a1408; text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 800;
  letter-spacing: .4px;
}
.gt-modal-done {
  width: 100%; padding: 15px; border: 0; border-radius: 12px;
  background: var(--navy); color: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
}
.gt-modal-done:hover { background: var(--navy3); }

@media (max-width: 720px) {
  .gt-modal-card { padding: 30px 20px 24px; border-radius: 18px; }
  .gt-modal-tick { width: 70px; height: 70px; font-size: 33px; }
  .gt-modal-t { font-size: 26px; }
  .gt-modal-ref { font-size: 20px; padding: 12px 22px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-modal-bd, .gt-modal-card { animation: none; }
}

/* ── the hero's own call to action ────────────────────────────────────────
   The stats band sits between the hero and the form, so without these the
   first thing you can act on is a scroll away.                            */
.hero-acts {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 30px;
}
.hero-act {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px; border-radius: 100px; text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .4px;
  transition: transform var(--t), filter var(--t), background var(--t);
}
.hero-act-gold {
  background: linear-gradient(140deg, var(--gold2), var(--gold));
  color: #1a1408;
  box-shadow: 0 10px 26px -12px rgba(201,168,76,.7);
}
.hero-act-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
.hero-act:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hero-act-ghost:hover { background: rgba(255,255,255,.12); }

@media (max-width: 560px) {
  .hero-acts { flex-direction: column; }
  .hero-act { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-act { transition: none; }
  .hero-act:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   READABILITY — measured, then fixed
   ---------------------------------------------------------------------------
   A contrast audit of this page found seven text styles below the WCAG floor.
   The worst were not subtle:

     eyebrow labels    gold #c9a84c on the light background   1.91:1
     question markers  gold #c9a84c on white                  2.29:1
     hints, placeholders, footnotes, modal note
                       #9898aa on white                       2.84:1

   4.5:1 is the floor for body text. 1.91:1 is the reason those labels read as
   invisible — the gold is a decorative colour being asked to do the work of a
   text colour, and it cannot.

   The fix keeps the gold's character and takes it dark enough to read. The
   grey moves from #9898aa to #64647a, which the site already uses for
   secondary text elsewhere, so nothing new enters the palette.

   These overrides are scoped to this page. The same combinations appear on
   every page of the site, so the durable fix is in the theme, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* gold that survives a LIGHT background — 4.72:1, was 1.91:1.
   .sec-alt is excluded: on this site that variant is DARK. */
.sec:not(.sec-alt):not(.sec-dark) .sec-eyebrow { color: #79652e !important; }

/* and on white — 5.00:1, was 2.29:1 */
.gt-faq-i summary::after,
.gt-faq-i[open] summary::after { color: #836d31; }

/* secondary text that can actually be read — 5.76:1, was 2.84:1 */
.gt-i::placeholder,
.gt-step-k small,
.gt-foot,
.gt-modal-note,
.gt-opt { color: #64647a; }

/* the dark sections keep the bright gold: on #0b1024 it reaches 6.9:1 */
.sec-dark .sec-eyebrow { color: var(--gold2) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TWO STEPS, ONE FOOTPRINT
   The form asked for fifteen things in one column, which made the card taller
   than any screen — so the submit button was never visible at the same time as
   the fields above it. Split in two, each step fits without scrolling, and the
   rail says how much is left.
   ═══════════════════════════════════════════════════════════════════════════ */
.gt-rail {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0 0 20px; padding: 0;
}
.gt-rail-s { display: flex; align-items: center; gap: 8px; }
.gt-rail-n {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ece7db; color: #6e6e7d;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  transition: background var(--t), color var(--t);
}
.gt-rail-l {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  color: #6e6e7d; white-space: nowrap; transition: color var(--t);
}
.gt-rail-s.is-on .gt-rail-n { background: var(--navy2); color: var(--gold2); }
.gt-rail-s.is-on .gt-rail-l { color: var(--text); }
.gt-rail-s.is-done .gt-rail-n { background: var(--gold); color: #1a1408; }
.gt-rail-d { flex: 1 1 auto; height: 2px; background: #ece7db; border-radius: 2px; }
.gt-rail-d span {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--gold); transition: width .32s cubic-bezier(.2,.8,.3,1);
}
.gt-rail.at-2 .gt-rail-d span { width: 100%; }

.gt-pane { display: none; }
.gt-pane.is-on { display: block; animation: gtSlide .26s ease both; }
@keyframes gtSlide { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* what step 1 decided, shown at the top of step 2 so nothing is forgotten */
.gt-recap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--bdr); border-radius: 12px;
  background: #faf7f0;
}
.gt-recap-t {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--text);
}
.gt-recap-s {
  grid-column: 1;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: #64647a;
}
.gt-recap-b {
  grid-row: 1 / span 2;
  border: 1px solid var(--bdr); border-radius: 100px;
  background: #fff; cursor: pointer;
  padding: 7px 15px;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--text);
}
.gt-recap-b:hover { border-color: var(--gold); }

.gt-acts { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.gt-submit-in { margin-top: 0; }
.gt-back {
  padding: 0 20px; height: 54px;
  border: 1px solid var(--bdr); border-radius: 13px;
  background: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text);
}
.gt-back:hover { border-color: var(--gold); background: #faf7f0; }

@media (max-width: 420px) {
  .gt-rail-l { display: none; }        /* the numbers still carry it */
  .gt-acts { grid-template-columns: 1fr; }
  .gt-back { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-pane.is-on { animation: none; }
  .gt-rail-d span { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE DARK SECTIONS
   ---------------------------------------------------------------------------
   .sec-alt is not a lighter alternative — on this site it is a DARK band:
   linear-gradient(180deg,#0d1226,#0b1024 55%,#0a0e20), with its own rules
   setting .h2 to #fff and cards to white-on-dark.

   The site's own markup pairs it with modifier classes (.h2, .lead, .light).
   Mine used the plain .sec-title / .sec-sub, which carry no colour of their
   own and therefore inherited body's var(--text) — #1a1a2e.

   #1a1a2e on #0b1024 is 1.11:1. Not low contrast: invisible. That is why the
   line about logistics could not be read.

   Everything below states its colour explicitly rather than inheriting, so the
   section it sits in can never decide it by accident.
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-alt .sec-title,
.sec-dark .sec-title {
  color: #ffffff !important;                 /* 18.85:1 */
}
.sec-alt .sec-sub,
.sec-dark .sec-sub {
  color: #b9bccb !important;                 /* 9.98:1 */
}
.sec-alt .sec-eyebrow,
.sec-dark .sec-eyebrow {
  color: var(--gold2) !important;            /* 10.93:1 */
}

/* the cards in a dark band: the site restyles their shell, but not the text
   inside them that this page adds */
.sec-alt .card p { color: rgba(255,255,255,.72) !important; }
.sec-alt .card h3 { color: #ffffff !important; }
.sec-alt .gt-tag {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #cfd3de !important;
}

/* the questions sit in a dark band too */
.sec-alt .gt-faq-i {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.11) !important;
}
.sec-alt .gt-faq-i summary { color: #ffffff !important; }
.sec-alt .gt-faq-i summary::after { color: var(--gold2) !important; }
.sec-alt .gt-faq-i p { color: rgba(255,255,255,.70) !important; }

/* and the how-it-works cards, if they land in one */
.sec-alt .gt-how-s {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.11) !important;
}
.sec-alt .gt-how-s b { color: #ffffff !important; }
.sec-alt .gt-how-s span:not(.gt-how-n) { color: rgba(255,255,255,.70) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ICONS THAT ARE NOT COLOUR EMOJI
   ---------------------------------------------------------------------------
   🛡 ✏ ⚡ ⚽ ✈ are text-presentation characters. Unlike 💺 or 🎫 they render as
   a monochrome glyph tinted by the CSS `color` — so in a dark section they
   inherited near-black and vanished, while the emoji beside them were fine.

   The markup now appends U+FE0F to force emoji presentation. This is the
   belt-and-braces half: if a platform lacks the colour glyph and falls back to
   monochrome, it still has a colour it can be seen in.
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-alt .card-ico,
.sec-dark .card-ico { color: var(--gold2); }
.sec-alt .gt-tag,
.sec-alt .gt-how-n { color: var(--gold2); }

/* the same glyphs on the light side */
.sec:not(.sec-alt):not(.sec-dark) .card-ico { color: var(--text); }
.gt-points i { color: var(--text); }

/* the hero chips carry ✏ and ⏱ on a dark backdrop */
.hero-chip { color: #ffffff; }