/* ==========================================================================
   Talbiya Hajj, Umra and Travel Agent
   Static site — no build step. Drop the folder into Hostinger public_html.
   ========================================================================== */

:root{
  /* neutrals */
  --w:#ffffff;
  --grey:#f5f5f7;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --line:rgba(0,0,0,.10);
  --black:#000000;

  /* brand, read off the logo artwork */
  --grn:#57b947;
  --grn-d:#0b3d2c;
  --gold:#f89a18;

  /* rhythm */
  --pad:clamp(20px,5vw,40px);
  --max:1120px;
  --sec:clamp(80px,12vw,168px);

  /* motion */
  --e:cubic-bezier(.25,.1,.25,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--black);
}

body{
  margin:0;
  background:var(--w);
  color:var(--ink);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.06}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* Android and iOS paint their own highlight over anything tappable — a blue
   wash that flashes on touch and fades. Every control here already answers a
   press in its own way, so the system one is only noise. */
a,button,input,select,textarea,label,summary,[role="button"]{
  -webkit-tap-highlight-color:transparent;
}

::selection{background:var(--grn);color:#fff}

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

.skip{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 12px;
  transition:top .2s var(--e);
}
.skip:focus{top:0}

.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* --------------------------------------------------------------- buttons */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--bg);color:var(--fg);
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:13px 26px;border-radius:999px;
  transition:transform .35s var(--e-out),background .25s var(--e),opacity .25s var(--e);
  white-space:nowrap;
}
.btn:hover{transform:scale(1.035)}
.btn:active{transform:scale(.985)}
.btn--sm{padding:8px 17px;font-size:14px}
.btn--fill{--bg:var(--grn);--fg:#07200f}
.btn--fill:hover{--bg:#63c752}
.btn--line{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--line:hover{--bg:var(--ink);--fg:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--plain{--bg:transparent;--fg:#fff;padding-inline:8px}
.btn--plain:hover{opacity:.7;transform:none}


/* ------------------------------------------------------------------- cta
   The dot on the right is the seed of the whole interaction: at rest it is a
   small coloured dot, on hover it scales up into a circle wide enough to flood
   the pill, sweeping in from the right. The knob that lands on top afterwards
   is a separate element, so the fill can keep growing behind it.
   Unhover runs the same move with the dark colour, which is why the black knob
   appears to expand back across the button. */
.cta{
  --bg:var(--ink);
  --fg:#fff;
  --fill:var(--grn);
  --fill-fg:#07200f;
  --knob:var(--ink);
  --knob-fg:#fff;
  --dot:11px;          /* resting dot diameter */
  --knob-size:30px;
  --pad-r:calc(var(--knob-size) + 16px);

  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;
  background:var(--bg);color:var(--fg);
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:13px var(--pad-r) 13px 26px;border-radius:999px;
  transition:color .25s var(--e) .18s;
  white-space:nowrap;
}
.cta:hover,.cta:focus-visible{color:var(--fill-fg)}

/* resting dot, and the flood it becomes */
.cta__fill{
  position:absolute;z-index:-1;
  right:calc((var(--knob-size) - var(--dot)) / 2 + 5px);
  top:50%;width:var(--dot);height:var(--dot);margin-top:calc(var(--dot) / -2);
  border-radius:50%;background:var(--fill);
  transform:scale(1);
  transition:transform .52s cubic-bezier(.65,0,.35,1);
}
.cta:hover .cta__fill,.cta:focus-visible .cta__fill{transform:scale(42)}

/* The two labels sit in a clipped window and roll downward together. Grid
   stacks them in one cell, so the window takes the height of one line and the
   width of the LONGER label — with absolute positioning the button sized to the
   resting word only, and the hover word got cut off ("Register" -> "Regist").
   line-height is pinned here because the body's 1.6 overflowed the window and
   the hidden label showed above the visible one. */
.cta__lab{display:grid;overflow:hidden;line-height:1.3}
.cta__lab i{
  grid-area:1 / 1;display:block;font-style:normal;
  transition:transform .42s var(--e-out) .1s;
}
.cta__lab i + i{transform:translateY(-100%)}
.cta:hover .cta__lab i,.cta:focus-visible .cta__lab i{transform:translateY(100%)}
.cta:hover .cta__lab i + i,.cta:focus-visible .cta__lab i + i{transform:translateY(0)}

.cta__knob{
  position:absolute;right:5px;top:50%;
  width:var(--knob-size);height:var(--knob-size);margin-top:calc(var(--knob-size) / -2);
  border-radius:50%;background:var(--knob);color:var(--knob-fg);
  display:grid;place-items:center;
  opacity:0;transform:scale(.3);
  transition:opacity .2s var(--e) .26s,transform .34s var(--e-out) .26s;
}
.cta:hover .cta__knob,.cta:focus-visible .cta__knob{opacity:1;transform:scale(1)}
.cta__knob svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* pale resting pill where the button sits on dark ground */
.cta--light{--bg:#fff;--fg:var(--ink)}
.nav.is-dark .cta{--bg:#fff;--fg:var(--ink)}

/* secondary: outline only, so the primary still leads. The ring fades as the
   green floods in, or it would cut across the filled pill. */
.cta--ghost{
  --bg:transparent;--fg:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:color .25s var(--e) .18s,box-shadow .3s var(--e) .1s;
}
.cta--ghost:hover,.cta--ghost:focus-visible{box-shadow:inset 0 0 0 1.5px transparent}
.cta--ghost.cta--onDark{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.cta--ghost.cta--onDark:hover,.cta--ghost.cta--onDark:focus-visible{
  box-shadow:inset 0 0 0 1.5px transparent}

.cta--sm{
  --knob-size:24px;--dot:9px;
  font-size:14px;padding:8px var(--pad-r) 8px 17px;
}
.cta--sm .cta__knob svg{width:12px;height:12px}

@media (prefers-reduced-motion:reduce){
  .cta,.cta__fill,.cta__lab i,.cta__knob{transition:none}
  .cta:hover .cta__fill,.cta:focus-visible .cta__fill{transform:scale(42)}
}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:transform .45s var(--e),background .3s var(--e),border-color .3s var(--e);
}
.nav.is-dark{background:rgba(0,0,0,.55);color:#fff}
.nav.is-stuck{border-bottom-color:var(--line)}

.nav__in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--pad);
  height:56px;display:flex;align-items:center;gap:clamp(16px,4vw,44px);
}
.nav__logo{flex:0 0 auto;display:flex;align-items:center}
.nav__logo img{height:34px;width:auto;transition:filter .3s var(--e)}
.nav.is-dark .nav__logo img{filter:brightness(0) invert(1)}

.nav__links{
  position:relative;display:flex;gap:clamp(2px,.8vw,8px);margin-inline:auto;
}
.nav__links a{
  position:relative;z-index:1;display:flex;align-items:center;
  padding:7px clamp(10px,1.4vw,15px);border-radius:999px;
  font-size:13.5px;font-weight:500;letter-spacing:-.005em;opacity:.85;
  transition:opacity .2s var(--e),color .22s var(--e);
}
.nav__links a:hover{opacity:1}
/* the icon, value and chevron belong to the mobile card only */
.nav__ico,.nav__val,.nav__chev{display:none}

/* The travelling pill, lifted from the reference animation. One element that
   sits behind the links; app.js sets its two edges.

   The stretch is the whole trick, and it is not a scale: the two edges are
   transitioned at different speeds, so the edge leading the move arrives first
   and the trailing edge catches up. The pill draws itself long while it travels
   and settles back to the width of one link. app.js decides which edge leads,
   because that depends on which way the pointer went. */
.nav__pill{
  position:absolute;z-index:0;top:50%;height:32px;margin-top:-16px;
  left:var(--pill-l,0);right:var(--pill-r,100%);
  border-radius:999px;background:var(--grn);pointer-events:none;
  opacity:0;transform:scale(.72);
  transition:left var(--pill-tl,.42s) var(--e-out),
             right var(--pill-tr,.42s) var(--e-out),
             opacity .2s var(--e),transform .34s var(--e-out);
}
.nav__links.is-hot .nav__pill{opacity:1;transform:scale(1)}
/* a link the pill covers reads white, in both nav states. is-swept is the links
   the stretch passes over on its way; is-hot is where it lands; is-on is the
   section currently being read, which is where the pill rests. */
.nav__links a.is-hot,.nav.is-dark .nav__links a.is-hot,
.nav__links a.is-swept,.nav.is-dark .nav__links a.is-swept{color:#fff;opacity:1}

.nav__end{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.lang{display:flex;border-radius:999px;padding:2px;background:rgba(120,120,128,.14)}
.lang button{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;opacity:.55;
  transition:background .25s var(--e),opacity .25s var(--e);
}
.lang button.is-on{background:var(--w);opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.nav.is-dark .lang{background:rgba(255,255,255,.16)}
.nav.is-dark .lang button.is-on{background:rgba(255,255,255,.92);color:var(--ink)}
.nav.is-dark .btn--sm{--bg:#fff;--fg:var(--ink)}

.burger{display:none;width:30px;height:30px;position:relative}
.burger span{
  position:absolute;left:6px;right:6px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--e),opacity .25s var(--e);
}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:18px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  background:var(--black);color:#fff;overflow:hidden;text-align:center;
  padding:104px var(--pad) clamp(190px,25vh,268px);
}
.hero__media{position:absolute;inset:0;background:var(--black)}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
}
.hero__poster{transform:scale(1.06);animation:heroIn 2.4s var(--e-out) both}
/* the video only takes over once it is genuinely playing, so a stalled or
   refused autoplay leaves the poster in place rather than a black box */
.hero__video{opacity:0;transition:opacity .9s var(--e)}
.hero.is-playing .hero__video{opacity:1}
.hero.is-playing .hero__poster{opacity:0;transition:opacity .9s var(--e)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 38%,transparent 30%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.72) 100%);
}
@keyframes heroIn{from{transform:scale(1.14);opacity:0}to{transform:scale(1.06);opacity:1}}

.hero__in{position:relative;max-width:900px;display:grid;gap:22px;justify-items:center}

.hero__ar{
  font-family:Amiri,serif;font-size:clamp(21px,3.4vw,34px);
  color:var(--gold);letter-spacing:.02em;line-height:1.7;
  opacity:0;animation:up 1s var(--e-out) .35s both;
}
.hero__h1{
  display:grid;gap:4px;
  font-size:clamp(38px,8.4vw,92px);font-weight:800;letter-spacing:-.035em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
  opacity:0;animation:up 1s var(--e-out) .5s both;
}
.hero__h1 em{
  font-style:normal;font-weight:300;letter-spacing:-.02em;
  font-size:.52em;color:rgba(255,255,255,.88);
  display:flex;align-items:baseline;justify-content:center;gap:.22em;
}
.hero__h1 em span{color:var(--grn);font-weight:400}
.hero__h1 em small{font-size:.5em;letter-spacing:.02em;opacity:.7}

.hero__sub{
  font-size:clamp(15px,2vw,20px);color:rgba(255,255,255,.76);font-weight:500;
  opacity:0;animation:up 1s var(--e-out) .65s both;
}
.hero__cta{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  opacity:0;animation:up 1s var(--e-out) .8s both;
}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero__scroll{position:absolute;bottom:26px;left:50%;translate:-50% 0}
.hero__scroll span{
  display:block;width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;position:relative;
}
.hero__scroll span::after{
  content:"";position:absolute;top:7px;left:50%;translate:-50% 0;
  width:3px;height:6px;border-radius:2px;background:rgba(255,255,255,.75);
  animation:wheel 1.9s var(--e) infinite;
}
@keyframes wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ------------------------------------------------------------ hero reel */
.reel{
  position:absolute;left:0;right:0;bottom:0;
  max-width:var(--max);margin-inline:auto;
  padding:0 var(--pad) clamp(40px,6vh,64px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  pointer-events:none;text-align:left;
}
/* the captions stack in the same place and cross-fade, so the hero does not
   reflow every time one changes */
.reel__caps{position:relative;flex:1;min-width:0;min-height:112px}
.cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--e),transform .75s var(--e-out);
}
.cap.is-on{opacity:1;transform:none}
.cap__n{font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--grn);margin-bottom:9px}
.cap__t{font-size:clamp(26px,4.4vw,44px);font-weight:800;letter-spacing:-.032em}
.cap__d{
  margin-top:8px;max-width:38ch;font-size:clamp(14px,1.7vw,17px);
  color:rgba(255,255,255,.78);line-height:1.5;
}

.reel__dots{display:flex;gap:7px;pointer-events:auto;padding-bottom:10px;flex:0 0 auto}
.dot{
  width:24px;height:3px;border-radius:3px;padding:0;
  background:rgba(255,255,255,.3);
  transition:background .35s var(--e),width .45s var(--e-out);
}
.dot:hover{background:rgba(255,255,255,.55)}
.dot.is-on{background:var(--grn);width:38px}

/* ------------------------------------------------------------- statement */
.say{padding:var(--sec) var(--pad);background:var(--w)}
.say__t{
  max-width:26ch;margin-inline:auto;text-align:center;
  font-size:clamp(28px,4.6vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.16;
}

/* -------------------------------------------------------------- sections */
.sec{padding:var(--sec) var(--pad)}
.sec--grey{background:var(--grey)}
.sec--dark{background:var(--black);color:#fff}

.sh{max-width:var(--max);margin:0 auto clamp(40px,6vw,72px);text-align:center}
.sh--l{text-align:left;margin-inline:0}
.sh__k{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grn);margin-bottom:14px;
}
.sh__t{font-size:clamp(30px,5.2vw,58px);font-weight:700}
.sh__d{margin-top:18px;max-width:52ch;margin-inline:auto;color:var(--ink2);font-size:17px}
.sh--inv .sh__d{color:rgba(255,255,255,.66)}

/* ----------------------------------------------------------------- tiers */
.tiers{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;
}
.tier{
  position:relative;background:var(--grey);border-radius:26px;
  padding:clamp(28px,4vw,42px);display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e);
}
.tier:hover{transform:translateY(-5px);box-shadow:0 22px 50px -24px rgba(0,0,0,.34)}
.tier--hi{background:var(--ink);color:#fff}
.tier--hi .tier__k{color:rgba(255,255,255,.62)}
.tier--hi .tier__d{color:rgba(255,255,255,.72)}

.tier__tag{
  position:absolute;top:22px;right:22px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grn);color:#07200f;padding:5px 11px;border-radius:999px;
}
.tier__k{font-size:13.5px;font-weight:600;color:var(--ink2);letter-spacing:-.005em}
.tier__t{font-size:clamp(26px,3.6vw,38px);font-weight:700}
.tier__p{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px}
.tier__p span{font-size:15px;font-weight:600;color:var(--ink2);letter-spacing:.04em}
.tier--hi .tier__p span{color:rgba(255,255,255,.6)}
.tier__p b{font-size:clamp(38px,6vw,58px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tier__d{font-size:15.5px;color:var(--ink2);line-height:1.55;flex:1}
.tier .btn,.tier .cta{align-self:flex-start;margin-top:8px}
.tier--hi .btn--line{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.tier--hi .cta--ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}

.tiers__note{
  max-width:52ch;margin:clamp(28px,4vw,44px) auto 0;text-align:center;
  font-size:14.5px;color:var(--ink2);
}

/* ------------------------------------------------------------ inclusions */
/* 10 items. 205px lands on 5 columns at full width and 2 at phone width,
   so the grid always fills its last row instead of leaving a dead cell. */
.inc{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1px;
  background:var(--line);border-radius:22px;overflow:hidden;
}
.inc li{
  background:var(--grey);padding:clamp(22px,3vw,32px);
  display:flex;flex-direction:column;gap:7px;
  transition:background .3s var(--e);
}
.inc li:hover{background:#fff}
.inc b{font-size:17px;font-weight:700;letter-spacing:-.015em}
.inc span{font-size:14.5px;color:var(--ink2);line-height:1.5}

/* ------------------------------------------------------------------- why */
.why{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;
  max-width:var(--max);margin-inline:auto;padding:var(--sec) var(--pad);
}
.why__media{border-radius:26px;overflow:hidden;aspect-ratio:4/5}
.why__media img{width:100%;height:100%;object-fit:cover}
.why__p{margin-top:20px;color:var(--ink2);font-size:16.5px;line-height:1.65}
/* labels run to different line counts, so the figures are bottom-aligned */
.why__st{display:flex;gap:clamp(20px,4vw,44px);margin-top:36px;flex-wrap:wrap;align-items:end}
.why__st>div{display:flex;flex-direction:column;justify-content:flex-end}
.why__st dt{font-size:12.5px;color:var(--ink2);margin-bottom:4px;max-width:14ch;line-height:1.35}
.why__st dd{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.035em}

/* ------------------------------------------------------------------ trip */
.trip{
  max-width:760px;margin-inline:auto;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,32px);
}
.trip li{text-align:center}
.trip__k{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grn);margin-bottom:14px;
}
.trip__d{display:flex;align-items:baseline;justify-content:center;gap:9px}
.trip__d b{font-size:clamp(48px,9vw,86px);font-weight:800;letter-spacing:-.045em;line-height:1}
.trip__d span{font-size:14px;color:var(--ink2);font-weight:600;letter-spacing:.02em}
.trip__l{margin-top:12px;font-size:15.5px;font-weight:600}
.trip__l i{font-style:normal;color:var(--grn);margin-inline:5px}
.trip__mid span{
  display:block;width:clamp(30px,8vw,90px);height:1.5px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
}

/* ------------------------------------------------------------------ bank */
.bank{
  max-width:620px;margin-inline:auto;background:var(--w);
  border-radius:26px;padding:clamp(26px,4vw,40px);
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 18px 44px -28px rgba(0,0,0,.3);
}
.bank__b{font-size:clamp(21px,3vw,28px);font-weight:700;letter-spacing:-.025em}
.bank__n{margin-top:8px;font-size:14.5px;color:var(--ink2);display:grid;gap:2px}
.bank__n b{color:var(--ink);font-size:15.5px;font-weight:600}
.bank__rows{margin-top:26px;display:grid;gap:10px}
.bank__r{
  display:flex;align-items:center;gap:14px;
  background:var(--grey);border-radius:16px;padding:14px 16px;
}
.bank__c{
  font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink2);
  background:var(--w);padding:4px 9px;border-radius:7px;
}
.bank__r b{
  flex:1;font-size:clamp(17px,2.6vw,21px);font-weight:700;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.copy{
  font-size:13px;font-weight:600;color:var(--grn);
  padding:7px 13px;border-radius:999px;background:var(--w);
  transition:background .25s var(--e),color .25s var(--e);
}
.copy:hover{background:var(--grn);color:#07200f}
.copy.is-done{background:var(--grn);color:#07200f}


/* ------------------------------------------------------------------- ask
   Sits on the dark contact band, so the fields are light-on-dark. */
.ask{
  max-width:var(--max);margin:0 auto clamp(44px,6vw,68px);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:22px;padding:clamp(22px,3.4vw,34px);
}
.ask__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld--wide{grid-column:1/-1}

.fld{display:grid;gap:7px;margin:0}
.fld label{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:12px 14px;width:100%;
  transition:border-color .25s var(--e),background .25s var(--e);
  -webkit-appearance:none;appearance:none;
}
.fld textarea{resize:vertical;min-height:84px;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.34)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--grn);background:rgba(255,255,255,.1);
}
/* the select needs its own arrow once appearance is stripped */
.fld select{
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.fld select option{background:#141a17;color:#fff}

/* a field the browser has flagged as invalid, but only after a submit attempt */
.ask.is-checked :invalid{border-color:#e2725b}

.ask__foot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
}
.ask__note{font-size:13.5px;color:rgba(255,255,255,.5);max-width:46ch;flex:1;min-width:220px}

@media (max-width:620px){
  .ask__grid{grid-template-columns:1fr}
  .ask__foot .cta{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- office */
.office{
  max-width:var(--max);margin:0 auto clamp(48px,7vw,80px);
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:22px 24px;
  transition:background .3s var(--e),transform .4s var(--e-out);
}
.office:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.office svg{
  width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--grn);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.office span{flex:1;display:grid;gap:3px}
.office b{font-size:16px;font-weight:700}
.office i{font-style:normal;font-size:14.5px;color:rgba(255,255,255,.62)}
.office em{font-style:normal;color:var(--grn);font-size:20px}

/* --------------------------------------------------------------- leaders */
.ppl__k{
  max-width:var(--max);margin:0 auto 20px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  letter-spacing:.02em;
}
/* 9 leaders. 330px gives 3 columns at full width — an exact 3x3 — and leaves
   room for the longer names without wrapping the phone number. */
.ppl{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px;
}
.ppl li{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:18px 20px;
  display:flex;align-items:center;gap:14px;
  transition:background .3s var(--e),border-color .3s var(--e);
}
.ppl li:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.ppl__i{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(140deg,var(--grn),var(--grn-d));
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#07200f;
}
.ppl__m{flex:1;min-width:0;display:grid;gap:1px}
.ppl__n{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.ppl__t{
  font-size:13.5px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ppl__a{display:flex;gap:7px;flex:0 0 auto}
.ppl__a a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);transition:background .25s var(--e),transform .3s var(--e-out);
}
.ppl__a a:hover{background:var(--grn);transform:scale(1.08)}
.ppl__a svg{width:16px;height:16px;fill:currentColor}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--black);color:#fff;padding:clamp(56px,8vw,88px) var(--pad) 30px}
.foot__in{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,5vw,60px);
}
.foot__brand img{height:42px;width:auto;margin-bottom:14px}
.foot__brand p{color:rgba(255,255,255,.5);font-size:14.5px;max-width:30ch}
.foot__k{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:14px;
}
.foot__c a{display:block;font-size:14.5px;color:rgba(255,255,255,.78);margin-bottom:7px;
  transition:color .2s var(--e);word-break:break-word}
.foot__c a:hover{color:var(--grn)}
.soc{display:flex;gap:9px;margin-bottom:12px}
.soc a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);margin:0;
  transition:background .25s var(--e),transform .3s var(--e-out);
}
.soc a:hover{background:var(--grn);transform:translateY(-2px)}
.soc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.foot__h{font-size:14px;color:rgba(255,255,255,.4)}
.foot__bar{
  max-width:var(--max);margin:clamp(40px,6vw,64px) auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.38);
}

/* -------------------------------------------------------------- whatsapp */
.wa{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 26px -6px rgba(37,211,102,.6);
  transform:scale(0);
  transition:transform .5s var(--e-out),box-shadow .3s var(--e);
}
.wa.is-in{transform:scale(1)}
.wa:hover{box-shadow:0 12px 32px -6px rgba(37,211,102,.75);transform:scale(1.07)}
.wa svg{width:29px;height:29px}

/* --------------------------------------------------------------- reveals */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--e),transform .85s var(--e-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .why{grid-template-columns:1fr;gap:34px}
  .why__media{aspect-ratio:16/10;max-height:52vh}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}

@media (max-width:820px){
  .burger{display:block}

  /* The menu is a settings list: a grey field with one white card per
     destination — icon, label, the fact worth knowing, chevron. */
  .nav__links{
    position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:9px;margin:0;
    background:var(--grey);
    padding:14px var(--pad) calc(18px + env(safe-area-inset-bottom));
    color:var(--ink);
    max-height:calc(100dvh - 56px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--e);
    border-bottom:1px solid var(--line);
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0)}

  /* Down here the pill travels on the other axis — the reference's own — so it
     is driven by its top and bottom edges instead of left and right. It sits
     under the cards, and the card it covers drops its white background so the
     green shows through. */
  .nav__pill{
    left:var(--pad);right:var(--pad);
    top:var(--pill-t,0);bottom:var(--pill-b,100%);
    height:auto;margin-top:0;border-radius:17px;
    transition:top var(--pill-tt,.42s) var(--e-out),
               bottom var(--pill-tb,.42s) var(--e-out),
               opacity .2s var(--e),transform .34s var(--e-out);
  }

  .nav__links a{
    display:flex;align-items:center;gap:14px;
    padding:15px 16px;border-radius:17px;border:0;
    background:var(--w);color:var(--ink);opacity:1;
    font-size:16px;font-weight:600;letter-spacing:-.01em;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    /* each card arrives a beat after the one above it */
    transform:translateY(10px);opacity:0;
    transition:transform .42s var(--e-out),opacity .3s var(--e),background .18s var(--e);
  }
  .nav__links.is-open a{transform:none;opacity:1}
  .nav__links.is-open a:nth-of-type(2){transition-delay:.05s}
  .nav__links.is-open a:nth-of-type(3){transition-delay:.09s}
  .nav__links.is-open a:nth-of-type(4){transition-delay:.13s}
  .nav__links.is-open a:nth-of-type(5){transition-delay:.17s}
  .nav__links.is-open a:nth-of-type(6){transition-delay:.21s}
  .nav__links a:not(.is-hot):not(.is-swept):active{background:#ececf0}
  /* the card the pill is under gets out of its way */
  .nav__links a.is-hot,.nav__links a.is-swept{
    background:transparent;color:#fff;box-shadow:none;
  }
  .nav__links a.is-hot .nav__val,.nav__links a.is-swept .nav__val{color:rgba(255,255,255,.82)}
  .nav__links a.is-hot .nav__chev,.nav__links a.is-swept .nav__chev{opacity:.7}

  .nav__ico{
    display:block;width:22px;height:22px;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .nav__lab{flex:1 1 auto}
  .nav__val{
    display:block;font-size:14.5px;font-weight:500;color:var(--ink2);
    white-space:nowrap;
  }
  .nav__chev{
    display:block;width:15px;height:15px;flex:0 0 auto;opacity:.3;
    fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* the language control moves in here as the first card, so the panel opens
     with the same shape as every other row */
  .nav__lang{
    display:flex;align-items:center;gap:14px;
    padding:11px 16px;border-radius:17px;background:var(--w);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    font-size:16px;font-weight:600;letter-spacing:-.01em;
    transform:translateY(10px);opacity:0;
    transition:transform .42s var(--e-out),opacity .3s var(--e);
  }
  .nav__links.is-open .nav__lang{transform:none;opacity:1}
  .nav__lang .nav__lab{flex:1 1 auto}
  .nav__links .lang{flex:0 0 auto}

}

@media (max-width:560px){
  body{font-size:16px}
  .trip{grid-template-columns:1fr;gap:34px}
  .trip__mid{justify-self:center}
  .trip__mid span{width:1.5px;height:34px;background:var(--line)}
  .tier .btn,.tier .cta{align-self:stretch;justify-content:center}
  .foot__in{grid-template-columns:1fr}
  .reel{flex-direction:column;align-items:flex-start;gap:16px}
  .reel__caps{min-height:132px;width:100%}
  .cap__d{max-width:30ch}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  /* the blanket rule above zeroes durations but not delays, which would leave
     the menu cards waiting their turn to appear instantly */
  .nav__links a,.nav__lang{transition-delay:0s!important}
  .hero__media img{transform:none;animation:none}
  .wa{transform:scale(1)}
  .hero__poster{transform:none}
  .cap{transition:none}
}

/* ---------------------------------------------------------------- places */
.places{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;
}
.places figure{margin:0}
.places img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;
  transition:transform .6s var(--e-out);
}
.places li:hover img{transform:scale(1.02)}
.places figcaption{padding:16px 4px 0;display:grid;gap:5px}
.places b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.places span{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.5}