:root{
  /* Booking Demand, deep green #12372D + cream #F4ECDD.
     Page runs a shade below the brand green so the brand green itself can be
     used for raised surfaces and the mark stays the brightest thing on screen. */
  --brand:#12372D;
  --ink:#0B211B;
  --ink-2:#102B23;
  --line:#1E4237;
  --line-2:#2C574A;
  --bone:#F4ECDD;
  --txt:#F4ECDD;
  --muted:#9CAFA4;
  --accent:#F4ECDD;
  --max:1280px;
  --gut:clamp(20px,4.5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
*:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--brand)}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.serif{font-family:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.015em}
.it{font-style:italic}

/* ---------- image slots ----------
   Every photo on the site uses this component. If the file is missing the
   image removes itself and the frame shows what belongs there, so the page
   is never broken and you always know what is outstanding.
   See ASSETS.md for the full shot list.                                   */
.ph{position:relative;margin:0;overflow:hidden;background:var(--ink-2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph.empty{border:1px dashed var(--line-2)}
.ph.empty::after{
  content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#5E7A6C;line-height:1.9;
}

/* ---------- type ---------- */
.lbl{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:clamp(24px,3vw,36px);display:block}
.h2{font-size:clamp(30px,4.6vw,60px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.lede{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--muted);max-width:58ch}
.body-p{color:var(--muted);font-size:16.5px;margin-bottom:20px;max-width:54ch}
.body-p:last-child{margin-bottom:0}
.body-p strong{color:var(--txt);font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-size:14px;font-weight:500;
  border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .2s,color .2s,border-color .2s}
.btn-fill{background:var(--bone);color:var(--ink)}
.btn-fill:hover{background:#fffaf0}
.btn-line{border-color:var(--line-2);color:var(--txt)}
.btn-line:hover{border-color:var(--bone)}
.invert .btn-line{border-color:rgba(18,55,45,.32);color:var(--ink)}
.invert .btn-line:hover{border-color:var(--ink)}
.invert .btn-fill{background:var(--ink);color:var(--bone)}

/* ---------- nav ---------- */
/* ---------- liquid glass ----------
   A near-transparent pane with a masked gradient hairline, bright along the top
   and bottom edges and absent through the middle, so the pill catches light the
   way real glass does. */
.liquid-glass{
  background:rgba(244,236,221,.02);
  background-blend-mode:luminosity;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(244,236,221,.12);
  position:relative;overflow:hidden;
}
.liquid-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(244,236,221,.45) 0%,
    rgba(244,236,221,.15) 20%,
    rgba(244,236,221,0) 40%,
    rgba(244,236,221,0) 60%,
    rgba(244,236,221,.15) 80%,
    rgba(244,236,221,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s}
header.stuck{background:rgba(11,33,27,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.brand{display:flex;align-items:center}
.brand .logo{height:26px;width:auto;display:block}
/* footer carries the full lockup, big enough for the strapline to read */
footer .brand .logo{height:58px}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1px;border-radius:999px;padding:7px}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,236,221,.78);padding:7px 16px;border-radius:999px;
  transition:color .2s,background .2s}
.nav-links a:hover{color:var(--txt);background:rgba(244,236,221,.07)}
.nav-cta{border-radius:999px;padding:11px 20px;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(244,236,221,.85);
  transition:color .2s}
.nav-cta:hover{color:var(--txt)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(128px,15vh,168px) 0 clamp(40px,6vh,56px);text-align:center}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-bottom{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero .ph{position:absolute;inset:0;background:transparent}
/* No dashed "add a photo here" frame in the hero, the route animation below
   is the fallback. Drop in assets/hero.jpg and the photo takes over. */
.hero .ph.empty{border:0;background:transparent}
.hero .ph.empty::after{display:none}

/* ---------- animated route hero ----------
   Drawn from the brand mark: route + momentum, the plane pointing toward
   growth. Dotted routes flow, a light sweep runs along each one, and a small
   plane built from the logo wedge travels the path. Hidden automatically once
   a real hero photograph is present. */
.hero-anim{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero.has-photo .hero-anim{display:none}
.route{fill:none;stroke:var(--bone);stroke-linecap:round}
.route-dots{stroke-width:2.6;stroke-dasharray:2.5 15;opacity:.46;
  animation:flow 5.5s linear infinite}
@keyframes flow{to{stroke-dashoffset:-170}}
.route-sweep{stroke-width:2.6;opacity:1;stroke-dasharray:130 4000;
  animation:sweep 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sweep{0%{stroke-dashoffset:4110}55%,100%{stroke-dashoffset:-260}}
.r2 .route-dots{animation-duration:7s}
.r2 .route-sweep{animation-duration:13s;animation-delay:-4s}
.r3 .route-dots{animation-duration:6.2s}
.r3 .route-sweep{animation-duration:15s;animation-delay:-8s}
.node{fill:var(--bone);opacity:.6;animation:node 4.4s ease-in-out infinite}
.node.n2{animation-delay:-1.5s}
.node.n3{animation-delay:-2.9s}
.node.n4{animation-delay:-3.7s}
@keyframes node{0%,100%{opacity:.28;r:3}50%{opacity:.75;r:4.6}}
.plane{fill:var(--bone)}
@media (prefers-reduced-motion:reduce){
  .route-dots,.route-sweep,.node{animation:none}
  .route-sweep{opacity:.35;stroke-dasharray:none}
}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,33,27,.58) 0%,rgba(11,33,27,.24) 34%,rgba(11,33,27,.93) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,236,221,.6);
  margin-bottom:clamp(20px,2.6vw,28px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px}
h1.hero-h{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:400;
  font-size:clamp(40px,5.4vw,72px);line-height:1.1;letter-spacing:-.02em}
h1.hero-h .l1{display:block;color:var(--txt)}
h1.hero-h .l2{display:block;color:rgba(244,236,221,.55)}
.hero-sub{font-size:15px;line-height:1.65;max-width:620px;margin:0 auto;color:var(--txt)}
.hero-sub .dim{color:rgba(244,236,221,.55)}
/* big pill CTA */
.btn-pill{display:inline-flex;align-items:center;justify-content:center;
  background:var(--bone);color:var(--ink);font-size:15px;font-weight:500;
  border-radius:999px;padding:14px 32px;border:none;cursor:pointer;font-family:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.btn-pill:hover{transform:scale(1.03);box-shadow:0 0 32px 4px rgba(244,236,221,.2)}
.btn-pill:active{transform:scale(.97)}
.assure{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,236,221,.7)}
.assure svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* mount fade */
.rise{opacity:0;transform:translateY(24px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.ready .rise{opacity:1;transform:none}
.ready .rise.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------- credibility bar ---------- */
.credbar{border-bottom:1px solid var(--line)}
.credbar .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.cb{padding:30px 30px 30px 0;border-right:1px solid var(--line)}
.cb:last-child{border-right:0}
.cb:not(:first-child){padding-left:30px}
.cb b{display:block;font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:clamp(26px,3.2vw,38px);
  line-height:1;letter-spacing:-.02em;margin-bottom:10px;font-weight:400}
.cb.txt b{font-size:clamp(15.5px,1.6vw,18px);padding-top:6px;font-family:Inter,sans-serif;font-weight:500;letter-spacing:-.01em}
.cb span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- markets ---------- */
.markets{border-bottom:1px solid var(--line);padding:clamp(30px,3.4vw,40px) 0}
.markets .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,48px)}
.mk-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.flags{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px)}
.flag{display:flex;align-items:center;gap:11px;font-size:14.5px}
.flag svg{width:30px;height:20px;flex:none;border:1px solid rgba(244,236,221,.2)}
.mk-note{margin-left:auto;font-size:14px;color:var(--muted);max-width:34ch}

/* ---------- sections ---------- */
section{padding:clamp(70px,8.5vw,124px) 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,84px);align-items:start}
.two.tight{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}

/* numbers, set as text not "metric cards" */
.facts{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,5vw,60px);
  padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.fact b{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:clamp(34px,5.6vw,66px);
  line-height:.95;letter-spacing:-.03em;font-weight:400}
.fact b.wordy{font-size:clamp(26px,3.4vw,42px);line-height:1.05}
.fact span{font-size:15px;color:var(--muted);max-width:44ch}

/* ---------- growth animation band ---------- */
.grow{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grow-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,80px);align-items:center}
.chart{border:1px solid var(--line);background:var(--ink);padding:clamp(24px,3vw,36px)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.chart-head span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* consultant row, figures light up as capacity grows */
.crew{display:flex;gap:7px;align-items:flex-end;margin-bottom:22px;min-height:26px}
.crew svg{width:15px;height:22px;fill:none;stroke:var(--line-2);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s ease}
.go .crew svg.lit{stroke:var(--accent)}
.crew svg:nth-child(1){transition-delay:.15s}
.crew svg:nth-child(2){transition-delay:.35s}
.crew svg:nth-child(3){transition-delay:.9s}
.crew svg:nth-child(4){transition-delay:1.25s}
.crew svg:nth-child(5){transition-delay:1.6s}
.crew svg:nth-child(6){transition-delay:1.95s}
.crew svg:nth-child(7){transition-delay:2.25s}
/* bars */
.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,12px);height:clamp(140px,18vw,200px);
  position:relative;overflow:hidden}
/* the last columns run past the top of the frame, growth is not capped */
.bars::after{content:"";position:absolute;inset:0 0 auto;height:34px;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 8%,transparent)}
.crew-more{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:19px;line-height:1;
  color:var(--line-2);align-self:center;transition:color .5s ease;transition-delay:2.5s}
.go .crew-more{color:var(--accent)}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.bar i{display:block;width:100%;background:var(--line-2);transform:scaleY(0);transform-origin:bottom;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),background 1.1s ease;height:var(--h)}
.go .bar i{transform:scaleY(1)}
.go .bar:nth-last-child(-n+5) i{background:var(--accent)}
.bar:nth-child(1) i{transition-delay:.1s}
.bar:nth-child(2) i{transition-delay:.28s}
.bar:nth-child(3) i{transition-delay:.46s}
.bar:nth-child(4) i{transition-delay:.64s}
.bar:nth-child(5) i{transition-delay:.82s}
.bar:nth-child(6) i{transition-delay:1s}
.bar:nth-child(7) i{transition-delay:1.18s}
.bar:nth-child(8) i{transition-delay:1.36s}
.bar:nth-child(9) i{transition-delay:1.54s}
.bar:nth-child(10) i{transition-delay:1.72s}
.bar:nth-child(11) i{transition-delay:1.9s}
.bar:nth-child(12) i{transition-delay:2.08s}
.bar:nth-child(13) i{transition-delay:2.26s}
.bar:nth-child(14) i{transition-delay:2.44s}
.axis{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5E7A6C}
.chart-note{margin-top:20px;font-size:12px;color:#5E7A6C;line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .bar i{transform:scaleY(1);transition:none}
  .crew svg.lit{stroke:var(--accent);transition:none}
}

/* ---------- full-bleed image band ---------- */
.band{position:relative;height:clamp(300px,46vw,560px)}
.band .ph{position:absolute;inset:0}
.band-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,40px) 0;
  background:linear-gradient(180deg,transparent,rgba(10,10,11,.82))}
.band-cap p{font-size:14px;color:#D2DCD3;max-width:44ch}

/* ---------- inverted bone band ---------- */
.invert{background:var(--bone);color:var(--ink)}
.invert .lbl{color:#4F7264}
.invert .lede,.invert .body-p{color:#3E6153}
.invert .body-p strong{color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,5vw,64px);
  border-top:1px solid rgba(18,55,45,.18)}
.pr{padding:clamp(28px,3.2vw,40px) clamp(26px,3vw,40px) clamp(30px,3.6vw,44px) 0}
.pr+.pr{border-left:1px solid rgba(18,55,45,.18);padding-left:clamp(26px,3vw,40px);padding-right:0}
.pr .t{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:18px;color:#8C4A38}
.pr.good .t{color:var(--brand)}
.pr p{font-size:clamp(17.5px,1.9vw,22px);line-height:1.44;letter-spacing:-.01em}
.tried{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,3.6vw,44px);border-top:1px solid rgba(18,55,45,.18)}
.tried-h{font-size:clamp(22px,2.8vw,34px);line-height:1.2;letter-spacing:-.02em;max-width:22ch;margin-bottom:26px}
.tried-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid rgba(18,55,45,.16)}
.tried-list li{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:20px 0;border-bottom:1px solid rgba(18,55,45,.16);align-items:baseline}
.tried-list b{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.tried-list span{font-size:15px;color:#3E6153}

/* ---------- services ---------- */
.rows{border-top:1px solid var(--line);margin-top:clamp(44px,5vw,68px)}
.row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.45fr);gap:clamp(18px,4vw,52px);
  padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--line);align-items:start}
.row .n{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:22px;color:var(--muted)}
.row h3{font-size:clamp(22px,2.7vw,32px);line-height:1.1;letter-spacing:-.02em;
  font-family:"Instrument Serif",ui-serif,Georgia,serif}
.row .rb p{color:var(--muted);font-size:15.5px;max-width:50ch;margin-bottom:14px}
.row .rb .tags{font-size:13.5px;color:#7E9488}
/* platform mark shown beside a service heading */
.row h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row h3 img{display:none;height:30px;width:auto;flex:none}
.row h3 img.ok{display:block}
/* the "we don't do this" counterpoint under a service */
.against{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin-top:18px}
.against p{margin-bottom:0!important;color:var(--muted)}
.against strong{color:var(--txt);font-weight:500}

/* ---------- channels, as a list not tiles ---------- */
.chan{border-top:1px solid var(--line);margin-top:clamp(44px,5vw,68px)}
.chan li{list-style:none;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(16px,4vw,48px);padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.chan ul{margin:0;padding:0}
.chan b{font-size:clamp(18px,2.1vw,24px);font-weight:400;letter-spacing:-.015em;
  font-family:"Instrument Serif",ui-serif,Georgia,serif;display:flex;align-items:center;gap:12px}
/* Official channel logos. The <img> hides itself until the real file loads,
   so the row reads fine as plain text until you add the artwork. */
.chan b img{display:none;width:24px;height:24px;object-fit:contain;flex:none}
.chan b img.ok{display:block}
.chan p{color:var(--muted);font-size:15.5px;max-width:52ch}
.closer{margin-top:clamp(38px,4.4vw,56px);font-size:clamp(19px,2.3vw,28px);line-height:1.38;
  letter-spacing:-.018em;max-width:32ch}

/* ---------- formula ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(44px,5vw,68px)}
.stp{background:var(--ink);padding:clamp(26px,2.8vw,36px)}
.stp b{display:block;font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:15px;
  color:var(--muted);margin-bottom:18px;font-weight:400}
.stp h3{font-size:18px;font-weight:500;letter-spacing:-.015em;margin-bottom:9px}
.stp p{color:var(--muted);font-size:14.5px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);padding:12px 16px;font-size:14px;color:var(--muted)}

/* ---------- sectors / brand marks ---------- */
.sector{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);
  padding:clamp(30px,3.6vw,46px) 0;border-bottom:1px solid var(--line);align-items:start}
.sector:first-of-type{border-top:1px solid var(--line)}
.sector h3{font-size:clamp(22px,2.7vw,32px);line-height:1.1;letter-spacing:-.02em;
  font-family:"Instrument Serif",ui-serif,Georgia,serif;margin-bottom:12px}
.sector .sh{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.sector p{color:var(--muted);font-size:15.5px;max-width:52ch;margin-bottom:18px}
.marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lg{display:inline-flex;align-items:center;border:1px solid var(--line);padding:11px 15px;
  font-size:13.5px;color:#CBD8CE;letter-spacing:.01em}
.lg img{display:none;height:26px;width:auto;max-width:150px;object-fit:contain}
/* Cruise logos are dark navy artwork, so they sit on a light tile, that keeps
   each mark in its correct brand colours, which most brand guidelines require,
   and keeps it legible on a near-black page. */
.lg.has-img{background:#fff;border-color:transparent;padding:13px 18px}
.lg.has-img img{display:block}
.lg.has-img .lg-txt{display:none}

/* ---------- sector scenes (cruise / holiday animations) ---------- */
.scene{position:relative;width:100%;margin-top:26px;border:1px solid var(--line);
  background:var(--ink-2);overflow:hidden;display:block}
.scene svg{display:block;width:100%;height:auto}
.scene figcaption{position:absolute;left:16px;bottom:12px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#5E7A6C}
.sea{fill:var(--bone)}
.w1{opacity:.16;animation:drift1 9s linear infinite}
.w2{opacity:.26;animation:drift2 6.5s linear infinite}
.w3{opacity:.5;animation:drift3 4.5s linear infinite}
@keyframes drift1{to{transform:translateX(-150px)}}
@keyframes drift2{to{transform:translateX(-150px)}}
@keyframes drift3{to{transform:translateX(-150px)}}
.vessel{animation:bob 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-5px) rotate(.7deg)}}
.hull,.deck,.stack{fill:var(--bone)}
.port{fill:var(--ink-2)}
.smoke{fill:var(--bone);opacity:0;animation:puff 4s ease-out infinite}
.smoke.s2{animation-delay:1.3s}
.smoke.s3{animation-delay:2.6s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}
  25%{opacity:.32}100%{opacity:0;transform:translate(-26px,-40px) scale(1.9)}}
.sun{fill:var(--bone)}
.rays{stroke:var(--bone);stroke-width:3;stroke-linecap:round;opacity:.55;
  transform-box:fill-box;transform-origin:center;animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sun-core{animation:glow 5s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.85}50%{opacity:1}}
.frond{transform-origin:466px 112px;animation:sway 5.6s ease-in-out infinite}
.frond.f2{animation-delay:-1.1s}.frond.f3{animation-delay:-2.2s}
.frond.f4{animation-delay:-3.3s}.frond.f5{animation-delay:-4.4s}
@keyframes sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.jet{animation:cross 16s linear infinite}
@keyframes cross{0%{transform:translateX(-80px)}100%{transform:translateX(660px)}}
.trail{stroke:var(--bone);stroke-width:2;stroke-linecap:round;opacity:.3;stroke-dasharray:3 9}
.bird{stroke:var(--bone);stroke-width:2;fill:none;stroke-linecap:round;opacity:.4;
  animation:flap 3.4s ease-in-out infinite}
.bird.b2{animation-delay:-1.2s}
@keyframes flap{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .w1,.w2,.w3,.vessel,.smoke,.rays,.sun-core,.frond,.jet,.bird{animation:none}
  .smoke{opacity:.2}
}

/* holiday types grid */
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:24px}
.ty{background:var(--ink);padding:22px 18px;display:flex;flex-direction:column;gap:15px;
  transition:background .2s}
.ty:hover{background:var(--ink-2)}
.ty svg{width:22px;height:22px;fill:none;stroke:#7E9488;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.ty:hover svg{stroke:var(--accent)}
.ty span{font-size:13.5px;color:var(--muted);line-height:1.35}

/* ---------- accreditations ---------- */
.accred{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.accred-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  padding:12px 15px;font-size:12px;font-weight:500;letter-spacing:.03em;color:#CBD8CE}
.badge img{display:none;height:38px;width:auto;max-width:160px;object-fit:contain}
/* The Google Ads lockup is stacked (mark above wordmark) and the Meta lockup is
   horizontal, so a shared height makes one of them illegible. Sized optically. */
.badge img[alt="Google Ads Certified"]{height:56px}
.badge img[alt="Meta Certified"]{height:30px}
/* Both marks are dark artwork, so they sit on a white tile, correct brand
   colours, and legible against a near-black page. */
.badge.has-img{background:#fff;border-color:transparent;padding:13px 20px;gap:0}
.badge.has-img img{display:block}
.badge.has-img .badge-txt{display:none}
.badge-txt{display:inline-flex;align-items:center;gap:9px}
.badge-txt svg{width:13px;height:13px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.invert .badge{border-color:rgba(18,55,45,.22);color:#3E6153}


/* ---------- platform expertise cards ---------- */
.expertise{background:var(--bone);color:var(--ink);text-align:center}
.exp-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#4F7264;margin-bottom:18px;display:block}
.exp-h{font-size:clamp(26px,3.6vw,42px);line-height:1.12;letter-spacing:-.025em;font-weight:600;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;max-width:20ch;margin:0 auto}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(40px,5vw,60px);text-align:left}
.exp-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,34px);
  align-items:center;border-radius:22px;padding:clamp(26px,3vw,40px)}
.exp-card.light{background:#FAF6EC}
.exp-card.dark{background:var(--brand);color:var(--bone)}
.exp-ico{width:clamp(78px,8vw,112px);height:clamp(78px,8vw,112px);border-radius:50%;
  display:grid;place-items:center;flex:none}
.exp-card.light .exp-ico{background:var(--brand)}
.exp-card.dark .exp-ico{background:var(--bone)}
.exp-ico svg{width:52%;height:52%;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.exp-card.light .exp-ico svg{stroke:var(--bone)}
.exp-card.dark .exp-ico svg{stroke:var(--brand)}
.exp-pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:8px 18px;margin-bottom:14px}
.exp-pill img{height:21px;width:auto;display:block}
.exp-card h3{font-size:clamp(22px,2.7vw,33px);line-height:1.1;letter-spacing:-.025em;
  font-weight:600;font-family:Inter,ui-sans-serif,system-ui,sans-serif;margin-bottom:12px}
.exp-card p{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.5;max-width:30ch}
.exp-card.light p{color:#4F7264}
.exp-card.dark p{color:rgba(244,236,221,.72)}
.exp-rule{height:1px;margin:22px 0 14px;max-width:230px}
.exp-card.light .exp-rule{background:rgba(18,55,45,.22)}
.exp-card.dark .exp-rule{background:rgba(244,236,221,.28)}
.exp-tag{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:block}
.exp-card.light .exp-tag{color:var(--brand)}
.exp-card.dark .exp-tag{color:var(--bone)}
.exp-note{margin-top:clamp(26px,3vw,36px);font-size:12.5px;color:#6E8A7C}
@media (max-width:900px){
  .exp-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .exp-card{grid-template-columns:1fr;gap:20px;text-align:left}
  .exp-card p{max-width:none}
}

/* ---------- audit ---------- */
.audit{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.audit-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.audit-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.form{display:flex;flex-direction:column;gap:10px}
.form input{padding:15px 17px;border:1px solid var(--line);background:var(--ink);color:var(--txt);
  font-size:15px;font-family:inherit}
.form input::placeholder{color:#6E8A7C}
.form input:focus{border-color:var(--line-2);outline:none}
.form .btn{justify-content:center}
.fine{font-size:12.5px;color:var(--muted);margin-top:4px}
.msg{font-size:14px;color:var(--accent);margin-top:6px}


/* visually hidden but read by screen readers */
.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}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form input:user-invalid{border-color:#8C4A38}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:24px 0;display:flex;justify-content:space-between;
  gap:24px;align-items:baseline;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.015em;
  font-family:"Instrument Serif",ui-serif,Georgia,serif}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-size:18px;font-family:Inter,sans-serif;flex:none}
details[open] summary::after{content:"–"}
details .a{padding:0 0 24px;color:var(--muted);font-size:15.5px;max-width:64ch}

/* ---------- footer ---------- */
footer{padding:clamp(54px,6vw,80px) 0 36px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.1fr;gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line)}
.f-brand p{color:var(--muted);font-size:14.5px;margin:16px 0 22px;max-width:32ch}
.f-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.f-col a{color:#CBD8CE;transition:color .2s}
.f-col a:hover{color:var(--accent)}
.offices{display:grid;gap:22px}
.off .ol{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.off .oc{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.off .oc b{font-size:15px;font-weight:500}
.off .oc time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.off address{font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.6}
.f-bot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding-top:30px;
  font-size:12.5px;color:var(--muted)}


/* ---------- mobile navigation ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:999px;background:none;border:none;cursor:pointer;
  padding:0;flex-direction:column}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--txt);
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu a{display:block;padding:16px 0;font-family:"Instrument Serif",ui-serif,Georgia,serif;
  font-size:clamp(26px,7vw,38px);letter-spacing:-.02em;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),color .2s}
.mobile-menu a:hover{color:var(--accent)}
body.menu-open .mobile-menu a{opacity:1;transform:none}
.mobile-menu a:nth-child(1){transition-delay:.06s}
.mobile-menu a:nth-child(2){transition-delay:.12s}
.mobile-menu a:nth-child(3){transition-delay:.18s}
.mobile-menu a:nth-child(4){transition-delay:.24s}
.mobile-menu a:nth-child(5){transition-delay:.3s}
.mobile-menu a:nth-child(6){transition-delay:.36s}
.mobile-menu .mm-foot{margin-top:36px;font-size:13px;color:var(--muted);border:0;padding:0;
  opacity:0;transform:none;transition-delay:.42s}
body.menu-open .mobile-menu .mm-foot{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu a{transition-duration:.01ms}
}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bone);color:var(--ink);
  padding:12px 20px;font-size:14px;font-weight:500;border-radius:0 0 4px 0}
.skip:focus{left:0}


/* ---------- interior page head ---------- */
.page-head{padding:clamp(140px,17vh,190px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head .lbl{margin-bottom:18px}
.page-head .h2{margin-bottom:22px}
.page-head .lede{max-width:62ch}
.nav-links a[aria-current="page"]{color:var(--txt);background:rgba(244,236,221,.09)}
.mobile-menu a[aria-current="page"]{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .hero{padding-top:clamp(112px,14vh,140px)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .types{grid-template-columns:repeat(3,1fr)}
  .credbar .wrap{grid-template-columns:repeat(2,1fr)}
  .cb{padding:24px 24px 24px 0}
  .cb:nth-child(2n){border-right:0}
  .cb:nth-child(n+3){border-top:1px solid var(--line)}
  .cb:not(:first-child){padding-left:0}
  .cb:nth-child(2n){padding-left:24px}
  .row{grid-template-columns:40px 1fr;row-gap:14px}
  .row .rb{grid-column:2}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .two,.two.tight,.sector,.grow-grid{grid-template-columns:1fr}
  .sector{row-gap:6px}
  .types{grid-template-columns:repeat(2,1fr)}
  .pair{grid-template-columns:1fr}
  .pr{padding-right:0}
  .pr+.pr{border-left:0;border-top:1px solid rgba(18,55,45,.18);padding-left:0;padding-top:28px}
  .fact,.chan li,.tried-list li{grid-template-columns:1fr;row-gap:8px}
  .mk-note{margin-left:0}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:36px}
  .nav .btn-line{display:none}
}