:root{--navy:#101f68;--purple:#5d32d6;--purple2:#8056eb;--blue:#55a9e8;--text:#152355;--muted:#626b84;--line:#e1e6f2;--band:#f5f4ff;--shadow:0 14px 36px rgba(45,32,120,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--text);font-family:Inter,sans-serif;overflow-x:hidden}.wrap{width:min(1100px,calc(100% - 40px));margin:auto}a{text-decoration:none;color:inherit}.leaf{position:absolute;pointer-events:none;background:url('../palm-leaf.svg') center/contain no-repeat;opacity:.35}.leaf-a{left:-80px;top:30px;width:240px;height:430px}.leaf-b{left:-110px;top:650px;width:260px;height:460px;transform:rotate(180deg)}
.header{height:58px;background:#fff;position:relative;z-index:20}.header-row{height:58px;display:flex;align-items:center;gap:26px}.logo{align-self:flex-start;width:190px;height:128px;display:flex;justify-content:center}.logo img{width:100%;height:100%;object-fit:contain}.nav{margin-left:auto;height:100%;display:flex;align-items:center;gap:27px}.nav a{height:100%;display:grid;place-items:center;font-size:12px;font-weight:600;position:relative}.nav a.on:after{content:"";position:absolute;bottom:7px;width:40px;height:2px;background:var(--purple)}.language{border:0;background:#fff;font:600 11px Inter;color:var(--text);white-space:nowrap}.btn{display:inline-flex;align-items:center;gap:14px;background:linear-gradient(100deg,var(--purple),var(--purple2));color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:10px 11px 10px 19px;box-shadow:0 8px 20px rgba(93,50,214,.22)}.btn i,.search i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#fff;color:var(--purple);font-style:normal;font-size:15px}.car-shortcut,.hamburger,.mobile-menu,.bottom{display:none}
.hero{height:432px;position:relative}.hero-copy{padding:104px 0 0 32px;position:relative;z-index:3;width:40%}.kicker{font-size:12px;font-weight:700;letter-spacing:.03em;color:#403392;margin:0 0 11px}.hero h1{font-size:36px;line-height:1.04;letter-spacing:-.04em;margin:0;color:var(--navy)}.hero h1 span{color:#5b8fe0}.hero h1 b{color:#7247df}.intro{font-size:12px;line-height:1.5;margin:15px 0;color:#202b51}.ride{padding:11px 12px 11px 20px}.trust{display:flex;gap:26px;margin-top:23px}.trust>div{display:flex;align-items:center;gap:8px}.trust>div>i{display:grid;place-items:center;width:40px;height:40px;border:2px solid #dedcff;border-radius:50%;font-style:normal;color:var(--purple);font-size:18px}.trust p{display:flex;flex-direction:column;margin:0}.trust strong{font-size:9px}.trust small{font-size:8px;line-height:1.3;color:#59627c;margin-top:3px}.hero-visual{position:absolute;right:-20px;top:0;width:65%;height:390px}
.booking{min-height:105px;background:#fff;border:1px solid #e9eaf5;border-radius:17px;box-shadow:var(--shadow);padding:14px 20px;display:grid;grid-template-columns:235px 1fr;gap:17px;position:relative;z-index:5}.mode-top{display:flex;gap:12px;align-items:center}.mode-top>i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--purple),var(--purple2));font-style:normal}.mode p{display:flex;flex-direction:column;margin:0}.mode small{font-size:9px}.mode strong{font-size:17px}.mode strong b{color:var(--purple)}.mode label{display:flex;align-items:center;gap:7px;font-size:8px;margin-top:6px}.toggle{width:28px;height:13px;border-radius:99px;background:var(--purple);position:relative}.toggle:after{content:"";position:absolute;width:9px;height:9px;background:#fff;border-radius:50%;right:2px;top:2px}.booking form{display:grid;grid-template-columns:1.25fr 1.15fr .9fr .75fr .85fr;gap:13px;align-items:center}.booking form label{font-size:8px;font-weight:800}.booking select,.booking input{display:block;width:100%;height:39px;border:1px solid var(--line);border-radius:7px;margin-top:6px;background:#fff;padding:0 9px;font:500 10px Inter;color:var(--text)}.search{height:39px;margin-top:20px;border:0;border-radius:7px;background:linear-gradient(100deg,var(--purple),var(--purple2));color:#fff;font:700 10px Inter;display:flex;justify-content:center;align-items:center;gap:10px}.benefits{height:67px;background:linear-gradient(90deg,#f8f6ff,#eef6ff,#f8f6ff);display:grid;grid-template-columns:repeat(4,1fr);border-radius:0 0 14px 14px;padding:10px 18px}.benefits>div{display:flex;align-items:center;gap:10px;padding:0 15px;border-right:1px solid #dfe4ef}.benefits>div:last-child{border:0}.benefits i{display:grid;place-items:center;width:34px;height:34px;border:2px solid #dddaff;border-radius:50%;color:var(--purple);font-style:normal;font-size:11px}.benefits p{display:flex;flex-direction:column;margin:0}.benefits strong{font-size:9px}.benefits small{font-size:8px;color:var(--muted);margin-top:2px}
.offers{padding:18px 24px 30px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-size:17px;margin:0 0 12px}.section-title h2 i{display:inline-block;width:24px;height:3px;background:var(--purple);margin-left:8px;vertical-align:middle}.section-title a{font-size:9px;font-weight:700}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.card-pic{height:130px;border-radius:12px;overflow:hidden;position:relative;display:grid;place-items:center}.p1{background:linear-gradient(145deg,#64ccea,#bde9f7)}.p2{background:linear-gradient(145deg,#a6dff0,#d9ccfa)}.p3{background:linear-gradient(145deg,#77c4e9,#d5d3ff)}.card-pic img{width:86%;height:92%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(12,31,80,.2))}.card-pic b{position:absolute;right:9px;top:8px;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#8359ed,#ad83fa);display:grid;place-items:center;color:#fff;font-size:12px}.card-pic b small{display:block;font-size:7px}.cards article>span{display:inline-block;background:var(--blue);color:#fff;border-radius:12px;padding:2px 9px;font-size:7px;font-weight:800;margin-top:-4px;position:relative}.cards h3{font-size:12px;margin:4px 0}.cards p{font-size:8px;color:var(--muted);margin:0}
@media(max-width:900px){.wrap{width:calc(100% - 22px)}.header{height:96px}.header-row{height:96px;padding:6px 4px}.logo{width:150px;height:84px}.nav,.language,.top-book{display:none}.car-shortcut{display:grid;margin-left:auto;width:45px;height:45px;border-radius:50%;place-items:center;background:linear-gradient(145deg,var(--purple),var(--purple2));color:#fff}.hamburger{display:flex;width:43px;height:43px;border:0;background:#fff;flex-direction:column;justify-content:center;gap:5px;padding:10px}.hamburger span{height:3px;background:var(--navy);border-radius:2px}.mobile-menu{position:absolute;top:90px;left:11px;right:11px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:8px;flex-direction:column}.mobile-menu.show{display:flex}.mobile-menu a{padding:11px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}.hero{height:auto;display:flex;flex-direction:column}.hero-visual{position:relative;order:-1;top:auto;right:auto;width:100%;height:220px}.hero-copy{width:100%;padding:22px 14px 18px}.kicker{font-size:10px}.hero h1{font-size:31px}.intro{font-size:12px}.desktop{display:none}.trust{display:none}.booking{display:block;padding:15px;margin-top:0}.mode{margin-bottom:13px}.booking form{grid-template-columns:1fr 1fr}.booking form label:nth-child(-n+2){grid-column:1/-1}.search{grid-column:1/-1;margin-top:0}.benefits{height:auto;margin-top:12px;padding:12px 4px}.benefits>div{flex-direction:column;text-align:center;padding:2px;gap:4px}.benefits p small{display:none}.benefits strong{font-size:7px}.offers{padding:22px 8px 85px}.cards{display:flex;overflow:auto;gap:13px}.cards article{min-width:82%}.bottom{position:fixed;z-index:30;left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px}.bottom small{font-size:8px;margin-top:3px}}
@media(max-width:430px){.hero-visual{height:190px}.hero h1{font-size:28px}.booking select,.booking input{font-size:10px}.benefits i{width:30px;height:30px}}

/* ============================================================
   Header + hero rebuilt around the supplied artwork
   logo-header-cut.png (1146x826, 1.387:1) and header.png (1717x916, 1.874:1)
   ============================================================ */
:root{--gutter:calc((100vw - min(1100px, 100vw - 40px)) / 2)}

/* --- horizontal-scroll guards -------------------------------------------
   body alone is unreliable on iOS Safari, so clip at the viewport too, and
   stop the offers carousel from chaining its swipe to the page. */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{overflow-x:hidden;overscroll-behavior-x:none}
img{max-width:100%}
.cards{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cards article{scroll-snap-align:start}

/* header.png carries its own near-white backdrop, so the page has to meet it */
body{background:#fdfdfd;background-image:
  radial-gradient(880px 520px at -8% 4%, #f0eaff 0%, rgba(240,234,255,0) 56%),
  radial-gradient(820px 520px at 106% 94%, #ecefff 0%, rgba(236,239,255,0) 56%);
  background-repeat:no-repeat}

/* logo3 is a wide horizontal lockup (3.02:1), so it sits centred in a normal
   header row rather than hanging below the nav like the stacked mark did */
.header{height:auto;background:transparent}
.header-row{height:auto;align-items:center;padding:14px 0;gap:26px}
.logo{align-self:center;width:auto;height:78px;display:block;flex:0 0 auto}
.logo img{display:block;width:auto;height:100%;object-fit:contain}

.nav{margin-left:auto;margin-right:auto;margin-top:0;height:auto;gap:29px;position:relative;left:10px}
.nav a{height:auto;display:inline-block;padding:6px 0;font-size:13.5px;font-weight:600;color:#2c3765}
.nav a:hover{color:var(--purple)}
.nav a.on{color:var(--purple);font-weight:700}
.nav a.on:after{left:0;right:0;bottom:-2px;width:auto;height:2.5px;border-radius:2px}

.language{margin-top:0;display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.language .flag{width:21px;height:14px;border-radius:2px;display:block}
.language .caret{width:0;height:0;border:4px solid transparent;border-top:5px solid #6c7699;margin-top:3px}
.btn.top-book{margin-top:0;font-size:12px;padding:11px 12px 11px 22px}
.btn i,.search i{width:22px;height:22px;font-size:0}
.btn i svg,.search i svg{width:13px;height:13px;display:block}
.mode-top>i{color:#fff}
.mode-top>i svg{width:25px;height:25px;display:block}

/* The horizontal logo makes the header ~64px shorter than the stacked one did.
   Rather than padding the copy back down (which left a dead gap under the logo),
   the copy is centred against the artwork so the slack splits top and bottom. */
.hero{height:auto;min-height:396px;position:relative;display:flex;align-items:center}
.hero-copy{width:min(48%,480px);padding:0}
.kicker{font-size:12.5px;margin-bottom:11px}
.hero h1{font-size:46px;line-height:1.14;letter-spacing:-.028em}
.intro{font-size:14px;line-height:1.5;margin:14px 0 18px;color:#3d4869}
.btn.ride{font-size:12.5px;padding:12px 12px 12px 24px}
.trust{gap:24px;margin-top:26px}
.trust>div{gap:11px}
.trust>div>i{width:44px;height:44px;border-width:1.5px;border-color:#d9d5f7;background:#fff;color:var(--purple)}
.trust>div>i svg{width:22px;height:22px;display:block}
.trust strong{font-size:12px;white-space:nowrap}
.trust small{font-size:10.5px;line-height:1.4;white-space:nowrap}

/* Sits flush with the container's right edge instead of bleeding to the viewport,
   so the page reads as one centred block with equal margins either side.
   Top offset clears the BOOK NOW button, whose underside is ~56px from the top. */
/* slightly narrower than index.php so the cars finish higher and the trust
   badges land on pale ground rather than across the bodywork */
.hero-visual{position:absolute;top:-10px;right:0;
  width:min(66%,800px);height:auto;z-index:1}
.hero-visual picture{display:block;width:100%}
.hero-visual img{display:block;width:100%;height:auto}
.hero-dots{display:none}

@media(max-width:900px){
  /* the phone layout in the design is plain white — no lavender wash, no leaves */
  body{background:#fff;background-image:none}
  .leaf{display:none}
  /* soft brand-purple lift so the bar reads as a layer above the page */
  .header{height:auto;background:#fff;position:relative;z-index:20;
    box-shadow:0 1px 0 rgba(93,50,214,.10), 0 12px 22px -7px rgba(93,50,214,.30)}
  .header-row{height:auto;align-items:center;padding:12px 0 10px;gap:12px}
  .logo{width:auto;height:52px}
  .language{display:none}

  .car-shortcut{position:relative;width:58px;height:58px;margin-left:auto;
    box-shadow:0 10px 22px rgba(93,50,214,.30)}
  .car-shortcut svg{width:31px;height:31px;display:block}
  .car-shortcut:after{content:"";position:absolute;top:11px;right:12px;width:9px;height:9px;
    border-radius:50%;background:#ffd25e;border:2px solid #fff}
  .hamburger{width:50px;height:50px;gap:6px;padding:11px 5px;background:transparent}
  .hamburger span{height:3.5px;border-radius:3px}

  .hero{min-height:0;align-items:stretch}
  /* header-mobile2.png already carries its own rounded card and white margin, so it
     is shown whole at its natural 1.6:1 ratio — cropping would slice those corners off */
  /* breathing room so the header's shadow has somewhere to fall */
  .hero-visual{position:relative;order:-1;top:auto;right:auto;width:100%;height:auto;margin-top:14px}
  .hero-visual picture{display:block;width:100%;height:auto}
  .hero-visual img{width:100%;height:auto;object-fit:fill;border-radius:0}
  .hero-dots{display:flex;order:-1;justify-content:center;gap:7px;margin-top:15px}
  .hero-dots i{width:7px;height:7px;border-radius:99px;background:#d3d7ea}
  .hero-dots i.on{width:19px;background:var(--purple)}

  .hero-copy{width:100%;padding:18px 2px 4px}
  .kicker{font-size:12.5px;margin-bottom:10px}
  .hero h1{font-size:30px;line-height:1.2}
  .intro{font-size:15px;line-height:1.55;margin:14px 0 22px}
  .desktop{display:inline}
  .btn.ride{font-size:13px;padding:14px 14px 14px 26px}
  .btn.ride i{width:26px;height:26px}
  .btn.ride i svg{width:15px;height:15px}

  /* 8-9px was unreadable on a phone */
  .mode small{font-size:11.5px}
  .mode strong{font-size:20px}
  .mode label{font-size:11px;margin-top:9px}
  .toggle{width:34px;height:17px}
  .toggle:after{width:13px;height:13px}
  .booking form label{font-size:9.5px}
  .booking select,.booking input{height:44px;font-size:13px;padding:0 12px}

  .bottom a{color:#54608a}
  .bottom a.on{color:var(--purple)}
  .bottom a svg{width:23px;height:23px;display:block}
  .bottom small{font-size:9.5px;font-weight:600}
}
@media(max-width:430px){
  .logo{width:auto;height:48px}
  .hero h1{font-size:28px}
  .intro{font-size:14px}
}