/* =========================================================================
   EasyGuide landing page — "The Journey Ledger"
   Loaded only on the homepage. Everything is namespaced .lp-* and reads the
   brand tokens from easyguide.css; nothing in here is shared with the inner
   pages, and nothing from the inherited component library is used.

   Design brief: EASYGUIDE-HOMEPAGE-DESIGN.md. In one line: the language of
   premium travel documents — square corners, hairline rules, warm paper,
   monospace data, passport stamps, a boarding pass — with no carousel and
   no auto-motion anywhere.
   ========================================================================= */

.lp{color:var(--ink);}
.lp-scroll-lock{overflow:hidden;}
.lp-wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
.lp section{position:relative;}

/* ------------------------------------------------------------ Type roles */
.lp-seal{
  font-family:var(--font-seal);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:12px;
}
.lp-seal::before{content:'';flex:none;width:34px;height:1px;background:var(--gold);}
.lp-h2{
  font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;letter-spacing:-.02em;color:var(--pri);margin:16px 0 18px;text-wrap:balance;
}
.lp-sub{font-size:16px;line-height:1.7;color:var(--tx2);max-width:44ch;}
.lp-mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;}

/* Buttons: square, navy. Gold is reserved for the closing boarding pass. */
.lp-btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 24px;min-height:52px;
  background:var(--pri);color:#fff;font-weight:600;font-size:14.5px;
  border:1px solid var(--pri);border-radius:0;transition:background .18s,transform .18s;
}
.lp-btn:hover{background:var(--pri-d);transform:translateY(-1px);}
.lp-btn i{font-size:12px;transition:transform .2s;}
.lp-btn:hover i{transform:translateX(4px);}
.lp-btn.gold{background:var(--gold);border-color:var(--gold);color:var(--pri-d);}
.lp-btn.gold:hover{background:#B08D1C;border-color:#B08D1C;}
.lp-link{
  font-size:14.5px;font-weight:600;color:var(--pri);text-decoration:underline;
  text-underline-offset:5px;text-decoration-color:var(--gold);text-decoration-thickness:1px;
}
.lp-link:hover{color:var(--pri-l);text-decoration-color:var(--pri-l);}

/* ======================================================= 1. The Departure
   The client insisted the homepage match the reference screenshot
   literally (client feedback §2/§3.E/§4.3) — a category shortcut row, a
   full-bleed photo hero with the headline over it, a floating search
   widget, and a trust-badge strip. Rounded corners are used deliberately
   in this block only: the site's square-corner rule was built to avoid
   this exact generic-travel-template look, and the client has now asked
   for that look specifically here, so the shapes that read as "that
   template" are matched on purpose rather than filed down to fit the
   rest of the design system. .lp-hero/.lp-hero-media/.lp-pass-sm below are
   dead now that the homepage no longer uses them — left in place rather
   than deleted, since nothing else references them and they cost nothing
   to keep. */
/* One composition, not a stack of blocks: the headline and the booking
   module are the hero's only two real children, stacked in a column and
   centred together as a pair in the middle of the photograph — no
   service dock above them, no card lifted over the photo's foot.
   Height is generous and re-tuned per breakpoint rather than fixed once. */
.lp-mega-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:660px;padding:64px 0;
}
.lp-mega-bg{position:absolute;inset:0;z-index:-1;}
/* The client's own photo (hero-journey) is a wide 2.33:1 composite —
   traveller on the left, sea and sky centred, Positano's coast on the
   right, the aircraft upper-right. object-position is re-tuned at each
   breakpoint below rather than left at one value, so the composition
   (not just "whatever cover() lands on") stays intact as the hero's own
   aspect ratio changes with the viewport. */
.lp-mega-bg img{width:100%;height:100%;object-fit:cover;object-position:48% 38%;display:block;}
/* Restrained on purpose: a wash this light still lifts the headline off
   the photograph without flattening the colour, sunlight and depth the
   photograph itself is doing the work of selling. */
.lp-mega-scrim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 60% at 50% 42%,rgba(247,244,236,.42) 0%,rgba(247,244,236,.2) 55%,rgba(247,244,236,0) 80%);
}

.lp-mega-copy-wrap .lp-wrap{display:flex;justify-content:center;}
.lp-mega-copy{max-width:600px;text-align:center;}
.lp-mega-eyebrow{
  font-family:var(--font-seal);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-l);display:flex;align-items:center;justify-content:center;gap:11px;margin:0 0 18px;
  text-shadow:0 1px 10px rgba(1,20,58,.35);
}
.lp-mega-eyebrow i{font-size:3px;color:var(--gold-l);}
.lp-mega-copy h1{
  font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.4vw,50px);
  line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0;
  text-shadow:0 2px 24px rgba(1,20,58,.4),0 1px 3px rgba(1,20,58,.3);
}
.lp-mega-copy h1 em{font-style:italic;font-weight:500;}
.lp-mega-lead{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);max-width:44ch;margin:18px auto 0;
  text-shadow:0 1px 10px rgba(1,20,58,.4);
}

/* -------------------------------------------------------- The booking module
   Glass, not a flat opaque card: a frosted, translucent surface
   (backdrop-filter) that still shows the photograph moving behind it,
   while the fields themselves sit on a near-solid ground so the actual
   typing surface never loses contrast. width:min() with an inline auto
   margin keeps the card's visual centre locked to the hero's centre at
   every viewport, and the grid's proportions (not equal columns) give
   Destination and the CTA more room than Passengers actually needs. */
.lp-mega-form-wrap{margin-top:36px;width:100%;}
.lp-mega-lift{width:min(1100px,calc(100% - 40px));margin:0 auto;position:relative;z-index:5;}
/* backdrop-filter lives on the .lp-mega-glass layer below, never directly
   on .lp-book: a filter/backdrop-filter on a real ancestor becomes the
   containing block for any position:fixed descendant, which is exactly
   what was hijacking the confirm modal (it sits inside this card's form)
   and pinning it to the card's box instead of the viewport. A sibling
   layer gets the same frosted look with no descendants of its own, so it
   can't capture anything. */
.lp-mega-lift .lp-book{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(255,255,255,.5) inset,0 40px 80px -30px rgba(1,20,58,.55);
}
.lp-mega-lift .lp-mega-glass{
  position:absolute;inset:0;z-index:0;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
}
.lp-mega-lift .lp-book-tabs{
  position:relative;z-index:1;
  border-radius:22px 22px 0 0;border-bottom:1px solid rgba(255,255,255,.4);
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lp-mega-lift .lp-book-tabs::-webkit-scrollbar{display:none;}
.lp-mega-lift .lp-book-tab:first-child{border-radius:20px 0 0 0;}
.lp-mega-lift .lp-book-tab{
  flex:1 0 auto;padding:14px 6px;font-family:var(--font-seal);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;border-right:1px solid rgba(255,255,255,.25);
  background:transparent;box-shadow:none;color:var(--pri);opacity:.62;white-space:nowrap;
}
.lp-mega-lift .lp-book-tab:last-child{border-right:none;}
.lp-mega-lift .lp-book-tab i{font-size:12px;}
.lp-mega-lift .lp-book-tab:hover{opacity:.85;}
.lp-mega-lift .lp-book-tab.is-active{background:rgba(255,255,255,.55);box-shadow:inset 0 -2px 0 0 var(--gold);opacity:1;}
.lp-mega-lift .lp-book-panels{position:relative;z-index:1;padding:24px 26px 26px;}
.lp-mega-lift .lp-book-grid{grid-template-columns:1.2fr auto 1.2fr 1fr .85fr 1.35fr;gap:14px;margin-bottom:0;align-items:end;}
.lp-mega-lift .lp-book-fld label{
  display:flex;align-items:center;gap:6px;font-family:var(--font-seal);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;color:var(--gold-ink);opacity:1;
}
.lp-mega-lift .lp-book-fld label i{font-size:9px;color:var(--gold-ink);}
.lp-mega-lift .lp-book-fld input{
  padding:12px 13px;font-size:13px;background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.7);
}
.lp-mega-lift .lp-book-fld input::placeholder{color:var(--tx3);}
.lp-mega-lift .lp-book-fld input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(1,20,58,.1);background:#fff;}
.lp-mega-lift .lp-book-swap{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(1,20,58,.12);transition:transform .3s,border-color .2s;
}
.lp-mega-lift .lp-book-swap:hover{border-color:var(--pri);transform:rotate(180deg);}
.lp-mega-lift .lp-book-swap.is-swapped{transform:none;}
.lp-mega-go{
  grid-column:span 1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 18px;height:44px;background:var(--pri);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.02em;
  border:none;border-radius:10px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(1,20,58,.55);
}
.lp-mega-go:hover{background:var(--pri-d);transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(1,20,58,.6);}
.lp-mega-lift .lp-book-fld input,.lp-mega-lift .lp-book-fld select{border-radius:9px;}

/* --------------------------------------------------------------- Trust strip
   A quiet closing line under the booking module, not four more cards
   competing with it — small icon circles and two lines of type, nothing
   heavier. */
.lp-trustbar{background:#fff;padding:26px 0;}
.lp-trustbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1040px;margin:0 auto;}
.lp-trustbar-item{display:flex;align-items:center;gap:12px;}
.lp-trustbar-item .ic{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--book-sky-soft);
  display:flex;align-items:center;justify-content:center;color:var(--gold-ink);font-size:13px;
}
.lp-trustbar-item strong{display:block;font-size:12.5px;color:var(--pri);font-weight:700;}
.lp-trustbar-item span{font-size:11px;color:var(--tx2);line-height:1.4;}

/* --------------------------------------------------------- The confirm modal
   Opens on top of the hero form: a review step (trip summary + contact
   details, the only place they're asked for), a loading step, and a
   success step, all sharing one card.

   z-index 300, matching the site's other true top-level gate (.wg, the
   WhatsApp gate) rather than the 200 used for the in-page lightbox — the
   documented stack elsewhere in this codebase is header 60, mobile menu
   55, action bar 50, launcher 45, lightbox 200. Matching a number alone
   doesn't help if an isolated ancestor still traps it, which is what was
   actually pinning this modal under the header before — see the template
   comment where this markup now sits (a sibling of .lp-mega-hero, not a
   descendant of it) for that fix. */
.lp-mega-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s;}
/* `display:flex` above beats the browser's own `[hidden]{display:none}` —
   the same trap the consultation page's topic groups hit — so the JS
   toggle of the `hidden` attribute needs this said explicitly. */
.lp-mega-modal[hidden]{display:none;}
.lp-mega-modal.is-open{opacity:1;}
.lp-mega-modal-backdrop{position:absolute;inset:0;background:rgba(1,20,58,.55);backdrop-filter:blur(2px);}
.lp-mega-modal-card{
  position:relative;z-index:1;background:#fff;border-radius:16px;max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;padding:30px 30px 28px;box-shadow:0 40px 90px -30px rgba(1,20,58,.5);
  transform:translateY(12px) scale(.98);transition:transform .22s;
}
.lp-mega-modal.is-open .lp-mega-modal-card{transform:translateY(0) scale(1);}
.lp-mega-modal-x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;
  background:var(--paper);color:var(--tx2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.lp-mega-modal-x:hover{background:var(--rule);}
.lp-mega-modal-card h3{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--pri);margin:6px 0 16px;line-height:1.3;}
.lp-mega-summary{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;background:var(--paper);
  border:1px solid var(--rule);padding:14px 16px;margin-bottom:18px;
}
.lp-mega-summary dt{font-family:var(--font-seal);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:2px;}
.lp-mega-summary dd{font-family:var(--font-mono);font-size:13px;color:var(--pri);margin:0;}
.lp-mega-modal-contact{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.lp-mega-modal-contact .lp-fld{margin-bottom:0;}
.lp-mega-modal-contact input.is-invalid{border-color:var(--bad);}
.lp-mega-modal-note{font-size:11.5px;line-height:1.55;color:var(--tx3);margin:2px 0 16px;}
.lp-mega-modal-error{
  font-size:13px;font-weight:600;color:var(--bad);background:var(--bad-soft);
  border:1px solid rgba(196,43,43,.3);padding:10px 12px;margin-bottom:14px;
}
.lp-mega-spinner{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--rule);border-top-color:var(--pri);
  margin:8px auto 18px;animation:lp-spin .8s linear infinite;
}
@keyframes lp-spin{to{transform:rotate(360deg);}}
.lp-mega-modal-step[data-modal-step="loading"],.lp-mega-modal-step[data-modal-step="success"]{text-align:center;padding:16px 0 4px;}
.lp-mega-check{
  width:56px;height:56px;border-radius:50%;background:#E8F5EC;color:#1E8A4C;
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:4px auto 16px;
  animation:lp-pop .3s ease-out;
}
@keyframes lp-pop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Re-tuned at six widths rather than scaled proportionally from one rule
   — a straight linear shrink is what turned the photo into a flat banner
   at narrow widths last time. Each breakpoint gets its own height,
   spacing and focal point. */
@media(max-width:1280px){
  .lp-mega-hero{min-height:600px;}
  .lp-mega-bg img{object-position:46% 38%;}
}
@media(max-width:1024px){
  .lp-mega-hero{min-height:560px;padding:48px 0;}
  .lp-mega-bg img{object-position:44% 36%;}
  .lp-mega-lift .lp-book-grid{grid-template-columns:1fr 1fr;}
  .lp-mega-go{grid-column:span 2;height:42px;}
  .lp-trustbar-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .lp-mega-hero{min-height:600px;padding:40px 0;}
  .lp-mega-copy{max-width:100%;}
  .lp-mega-copy h1{font-size:clamp(27px,5.6vw,36px);}
  /* Positano's coast carries more colour than the open sky on the left —
     shifted right of centre so the town and the aircraft both stay in
     frame once the crop is this much narrower than the photo's own 2.33:1. */
  .lp-mega-bg img{object-position:58% 34%;}
}
@media(max-width:480px){
  .lp-mega-hero{min-height:620px;padding:32px 0;}
  .lp-mega-eyebrow{font-size:10px;letter-spacing:.14em;gap:7px;}
  .lp-mega-copy h1{font-size:clamp(25px,7.4vw,32px);}
  .lp-mega-lead{font-size:14px;}
  .lp-mega-bg img{object-position:66% 32%;}
  .lp-mega-lift{padding:0 14px;}
  .lp-mega-lift .lp-book-tab{flex:0 0 auto;min-width:92px;padding:12px 12px;font-size:9.5px;}
  .lp-mega-lift .lp-book-tab i{font-size:11px;}
  .lp-mega-lift .lp-book-panels{padding:18px 16px 20px;}
  .lp-mega-lift .lp-book-swap{display:none;}
  .lp-mega-lift .lp-book-grid{grid-template-columns:1fr;gap:12px;}
  .lp-mega-go{grid-column:span 1;}
  .lp-trustbar-grid{grid-template-columns:1fr;}
  .lp-mega-summary{grid-template-columns:1fr;}
  .lp-mega-modal-card{padding:22px 18px 20px;}
}

.lp-hero{background:var(--book-sky-soft);padding:64px 0 88px;}
.lp-hero .lp-wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start;}
.lp-hero h1{
  font-family:var(--font-display);font-weight:600;font-size:clamp(46px,6.2vw,88px);
  line-height:1.02;letter-spacing:-.025em;color:var(--pri);margin:24px 0 26px;
}
.lp-hero h1 em{font-style:italic;font-weight:500;}
.lp-hero .lp-lead{font-size:18px;line-height:1.7;color:var(--tx2);max-width:46ch;margin-bottom:32px;}
.lp-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.lp-proof{
  display:flex;align-items:center;gap:20px;margin-top:44px;padding-top:28px;
  border-top:1px solid var(--rule);
}
.lp-proof p{font-size:14px;line-height:1.65;color:var(--tx2);max-width:38ch;}
.lp-proof p strong{color:var(--pri);font-weight:600;}

/* The small IATA stamp beside the proof line. */
.lp-stamp-sm{
  flex:none;width:78px;height:78px;border-radius:50%;border:1.5px solid var(--gold);
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  transform:rotate(-8deg);
}
.lp-stamp-sm::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--gold);opacity:.7;}
.lp-stamp-sm span{
  font-family:var(--font-seal);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  line-height:1.5;color:var(--gold-ink);text-transform:uppercase;
}

/* Photograph in a mount, with the boarding pass overlapping its foot. */
.lp-hero-media{position:relative;padding:12px 14px 56px 36px;}
.lp-frame{position:relative;}
.lp-frame::before{
  content:'';position:absolute;inset:0;transform:translate(14px,14px);
  border:1px solid var(--pri);z-index:0;
}
.lp-frame img{
  /* height:auto is load-bearing: the <img> carries width/height attributes
     for layout stability, and the height attribute is a presentational hint
     that beats aspect-ratio unless height is explicitly auto. Without it the
     photograph rendered 1600px tall on every viewport. */
  position:relative;z-index:1;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 48%;display:block;
}
.lp-pass-sm{position:absolute;left:0;bottom:0;z-index:2;width:min(360px,88%);}

/* ------------------------------------------------ The boarding pass (shared)
   A white ticket with a dashed perforation and two semicircular notches cut
   at its ends. The notches are cut with a mask rather than drawn, so they
   show whatever sits behind the pass — a photograph in the hero, navy in the
   closing band. --stub is the width of the tear-off part. */
.lp-pass{
  --stub:96px;
  display:grid;grid-template-columns:1fr var(--stub);
  background:#fff;border-radius:8px;position:relative;color:var(--ink);
  box-shadow:0 26px 54px -26px rgba(1,39,112,.45),0 2px 6px rgba(1,39,112,.08);
  -webkit-mask:
    radial-gradient(circle 10px at calc(100% - var(--stub)) 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
    radial-gradient(circle 10px at calc(100% - var(--stub)) 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
  mask:
    radial-gradient(circle 10px at calc(100% - var(--stub)) 0,transparent 98%,#000 100%) top/100% 51% no-repeat,
    radial-gradient(circle 10px at calc(100% - var(--stub)) 100%,transparent 98%,#000 100%) bottom/100% 51% no-repeat;
}
.lp-pass-main{padding:18px 20px 20px;min-width:0;}
.lp-pass-stub{
  padding:18px 16px;border-left:1px dashed rgba(1,39,112,.35);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;min-width:0;
}
.lp-pass-title{
  display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;
  font-family:var(--font-seal);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pri);
}
.lp-pass-title span:last-child{color:var(--gold-ink);}
.lp-pass-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.lp-pass-k{
  display:block;font-family:var(--font-seal);font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px;
}
.lp-pass-v{display:block;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--pri);line-height:1.35;}
.lp-pass-v b{font-weight:700;}
.lp-pass-stub .lp-pass-k{margin-bottom:0;}
.lp-pass-stub .lp-gate{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--pri);line-height:1;letter-spacing:-.02em;}
.lp-pass-stub .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--pri);
}
.lp-pass-stub .go i{font-size:10px;transition:transform .2s;}
.lp-pass:hover .lp-pass-stub .go i{transform:translateX(4px);}

/* ================================================== 2. The departure board */
.lp-board{background:var(--pri);color:#fff;padding:44px 0 40px;}
.lp-board-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap;}
.lp-board-top .lp-seal{color:var(--gold-l);}
.lp-board-top .lp-seal::before{background:var(--gold-l);}
.lp-board-top .lp-mono{color:#9AA6C0;text-transform:uppercase;}
.lp-board-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;}
.lp-board-col{min-width:0;}
.lp-board-head,.lp-board-row{
  display:grid;grid-template-columns:1.25fr 1.5fr .7fr;gap:16px;align-items:baseline;
}
.lp-board-head{
  padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.28);
  font-family:var(--font-seal);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);
}
.lp-board-row{
  padding:15px 0;border-bottom:1px solid var(--rule-on-navy);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
}
.lp-board-row .d{color:#fff;font-weight:700;text-transform:uppercase;}
.lp-board-row .d small{font-size:11px;font-weight:400;color:#9AA6C0;margin-left:10px;letter-spacing:.08em;}
.lp-board-row .r{color:#BFC6D6;}
.lp-board-row .s{color:var(--gold-l);font-weight:700;text-transform:uppercase;letter-spacing:.12em;text-align:right;}
.lp-board-row .s.limited{color:#E8C868;}
.lp-board-row .s.paused{color:#9AA6C0;}

/* ================================================ 3. Which journey is yours */
.lp-journeys{background:var(--paper);padding:112px 0;}
.lp-split{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start;}
.lp-sticky{position:sticky;top:104px;}
.lp-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--pri);}
.lp-index li{border-bottom:1px solid var(--rule);}
.lp-index a{
  display:grid;grid-template-columns:118px minmax(0,1fr) 136px;gap:28px;align-items:center;
  padding:36px 0;transition:background .22s,padding .22s;
}
.lp-index a:hover{background:#fff;padding-left:20px;padding-right:20px;}
.lp-index .n{
  font-family:var(--font-display);font-size:96px;font-weight:600;line-height:.85;
  color:var(--gold-ink);letter-spacing:-.04em;
}
.lp-index .t{
  display:block;font-family:var(--font-display);font-size:28px;font-weight:600;
  color:var(--pri);letter-spacing:-.015em;line-height:1.15;margin-bottom:8px;
}
.lp-index .d{display:block;font-size:15px;line-height:1.65;color:var(--tx2);max-width:52ch;}
.lp-index .go{justify-self:end;display:flex;align-items:center;gap:14px;}
.lp-index .go img{
  width:96px;height:64px;object-fit:cover;display:block;
  opacity:0;transform:translateX(10px);transition:opacity .28s,transform .28s;
}
.lp-index a:hover .go img{opacity:1;transform:none;}
.lp-index .go i{color:var(--pri);font-size:14px;transition:transform .2s;}
.lp-index a:hover .go i{transform:translateX(6px);}

/* ======================================================== 4. The visa desk */
.lp-desk{background:#fff;padding:112px 0;}
.lp-desk-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:40px;}
.lp-desk-head,.lp-desk-row{
  display:grid;grid-template-columns:64px 1.1fr 2fr 168px 32px;gap:22px;align-items:center;
}
.lp-desk-head{
  padding:0 0 12px;border-bottom:1px solid var(--pri);
  font-family:var(--font-seal);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
}
.lp-desk-row{
  padding:26px 0;border-bottom:1px solid var(--rule);position:relative;
  transition:padding .2s;
}
.lp-desk-row::before{
  content:'';position:absolute;left:-24px;top:0;bottom:0;width:3px;background:var(--pri);
  transform:scaleY(0);transform-origin:center;transition:transform .2s;
}
.lp-desk-row:hover{padding-left:10px;}
.lp-desk-row:hover::before{transform:scaleY(1);}
.lp-desk-row .no{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--gold-ink);}
.lp-desk-row .nm{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--pri);letter-spacing:-.015em;line-height:1.15;}
.lp-desk-row .wh{font-size:14.5px;line-height:1.6;color:var(--tx2);}
.lp-desk-row .fee{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);
}
.lp-desk-row .ar{color:var(--pri);text-align:right;font-size:14px;transition:transform .2s;}
.lp-desk-row:hover .ar{transform:translateX(4px);}
.lp-desk-foot{display:flex;justify-content:flex-end;margin-top:26px;}

/* ========================================================== 5. Six stamps */
.lp-process{background:var(--pri);color:#fff;padding:112px 0 104px;}
.lp-process .lp-seal{color:var(--gold-l);}
.lp-process .lp-seal::before{background:var(--gold-l);}
.lp-process .lp-h2{color:#fff;max-width:20ch;}
.lp-process .lp-sub{color:rgba(255,255,255,.72);}
.lp-stamps{
  list-style:none;margin:72px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0 8px;
}
/* The dashed line the stamps sit on. Drawn once, behind the row, at the
   circles' vertical centre. */
.lp-stamps::before{
  content:'';position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:75px;
  border-top:1px dashed rgba(255,255,255,.3);z-index:0;
}
.lp-stamp{position:relative;z-index:1;text-align:center;}
.lp-stamp:nth-child(1){--rot:-4deg;} .lp-stamp:nth-child(2){--rot:3deg;}
.lp-stamp:nth-child(3){--rot:-2deg;} .lp-stamp:nth-child(4){--rot:4deg;}
.lp-stamp:nth-child(5){--rot:-3deg;} .lp-stamp:nth-child(6){--rot:2deg;}
.lp-stamp .c{
  width:150px;height:150px;margin:0 auto;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;position:relative;background:var(--pri);
  transform:rotate(var(--rot,0deg));
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background .28s;
}
.lp-stamp .c::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px dashed var(--gold);opacity:.6;}
.lp-stamp .c .n{
  font-family:var(--font-display);font-size:46px;font-weight:600;color:var(--gold-l);
  letter-spacing:-.02em;line-height:1;
}
.lp-stamp .c .eg{
  position:absolute;left:0;right:0;bottom:19px;font-family:var(--font-seal);font-size:7.5px;
  letter-spacing:.26em;color:var(--gold);opacity:.8;
}
.lp-stamp:hover .c{transform:rotate(var(--rot,0deg)) scale(.94);background:rgba(201,162,39,.14);}
.lp-stamp h3{
  font-family:var(--font-seal);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-l);margin:24px 0 10px;
}
.lp-stamp p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);padding:0 6px;}

/* ================================================== 6. We will / will not */
.lp-ledger{background:#fff;padding:112px 0;}
.lp-ledger-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pri);margin-top:44px;}
.lp-ledger-col{padding:44px 56px 48px 0;}
.lp-ledger-col + .lp-ledger-col{border-left:1px solid var(--rule);padding:44px 0 48px 56px;position:relative;}
.lp-ledger-col + .lp-ledger-col::before{content:'';position:absolute;top:-1px;left:56px;right:0;height:2px;background:var(--pink);}
.lp-ledger-col .lp-seal{margin-bottom:26px;}
.lp-ledger-col + .lp-ledger-col .lp-seal{color:var(--pink-d);}
.lp-ledger-col + .lp-ledger-col .lp-seal::before{background:var(--pink);}
.lp-ledger ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.lp-ledger li{position:relative;padding-left:42px;font-size:16px;line-height:1.65;color:var(--ink);}
.lp-ledger li::before{
  content:'';position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  font-family:'Font Awesome 6 Free';font-weight:900;font-size:9.5px;
  display:flex;align-items:center;justify-content:center;
}
.lp-will li::before{content:'\f00c';border:1.5px solid var(--gold);color:var(--gold-ink);transform:rotate(-8deg);}
.lp-wont li::before{content:'\f00d';border:1.5px solid var(--pink);color:var(--pink-d);}

/* ============================================================== 7. Where */
.lp-where{background:var(--paper);padding:112px 0;}
.lp-where-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:40px;}
.lp-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:8px;}
.lp-tile{position:relative;overflow:hidden;display:block;isolation:isolate;background:var(--pri-dd);}
.lp-tile.big{grid-column:span 2;grid-row:span 2;}
.lp-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1);}
.lp-tile:hover img{transform:scale(1.045);}
.lp-tile::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,15,40,.86) 0%,rgba(0,15,40,.28) 42%,rgba(0,15,40,0) 68%);
}
.lp-tile-body{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;}
.lp-tile .r{display:block;font-family:var(--font-seal);font-size:9.5px;letter-spacing:.2em;color:var(--gold-l);margin-bottom:6px;}
.lp-tile .h{font-family:var(--font-display);font-size:30px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.05;}
.lp-tile.big .h{font-size:50px;}
.lp-tile .v{
  position:absolute;right:22px;bottom:24px;z-index:2;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:#fff;opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s;
}
.lp-tile:hover .v{opacity:1;transform:none;}

/* ============================================================ 8. Journal */
.lp-journal{background:#fff;padding:112px 0;}
.lp-reading{list-style:none;margin:0;padding:0;border-top:1px solid var(--pri);}
.lp-reading li{border-bottom:1px solid var(--rule);}
.lp-reading a{display:grid;grid-template-columns:128px minmax(0,1fr) 72px 20px;gap:26px;align-items:baseline;padding:28px 0;}
.lp-reading .dt,.lp-reading .rt{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);
}
.lp-reading .rt{text-align:right;}
.lp-reading .t{
  display:block;font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--pri);
  letter-spacing:-.015em;line-height:1.25;transition:color .15s;
}
.lp-reading a:hover .t{color:var(--pri-l);}
.lp-reading .x{display:block;font-size:14px;line-height:1.6;color:var(--tx2);margin-top:7px;max-width:62ch;}
.lp-reading .ar{color:var(--pri);font-size:13px;justify-self:end;transition:transform .2s;}
.lp-reading a:hover .ar{transform:translateX(4px);}
.lp-empty{padding:32px 0;border-top:1px solid var(--pri);border-bottom:1px solid var(--rule);color:var(--tx2);font-size:15px;}

/* ============================================= 9. The boarding pass (CTA) */
.lp-cta{background:var(--pri);padding:112px 0;}
.lp-pass.big{--stub:300px;grid-template-columns:1fr var(--stub);}
.lp-pass.big .lp-pass-main{padding:40px 48px 44px;}
.lp-pass.big .lp-pass-stub{padding:40px 40px;gap:8px;}
.lp-pass.big .lp-pass-title{font-size:10.5px;margin-bottom:28px;}
.lp-pass.big .lp-pass-row{grid-template-columns:repeat(3,1fr);gap:24px 32px;margin-bottom:34px;}
.lp-pass.big .lp-pass-k{font-size:9.5px;margin-bottom:6px;}
.lp-pass.big .lp-pass-v{font-size:15px;}
.lp-pass.big h2{
  font-family:var(--font-display);font-size:clamp(30px,3.2vw,44px);font-weight:600;color:var(--pri);
  letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;
}
.lp-pass.big .lp-pass-main p{font-size:15px;line-height:1.65;color:var(--tx2);max-width:52ch;}
.lp-pass.big .lp-gate{font-size:72px;letter-spacing:-.04em;margin:2px 0 22px;}
.lp-pass.big .lp-btn{width:100%;justify-content:center;}
.lp-pass.big .lp-link{margin-top:12px;font-size:13.5px;}
.lp-barcode{
  width:100%;height:40px;margin-top:26px;opacity:.9;
  background:repeating-linear-gradient(90deg,
    var(--pri) 0 2px,transparent 2px 4px,var(--pri) 4px 5px,transparent 5px 9px,
    var(--pri) 9px 12px,transparent 12px 14px,var(--pri) 14px 15px,transparent 15px 19px);
}

/* ======================================================== Responsive
   The brief: most visitors arrive on a phone from WhatsApp or Instagram.
   Every layout below has a deliberate phone form, not a squeezed desktop. */
@media(max-width:1180px){
  .lp-index .n{font-size:80px;}
  .lp-stamp .c{width:128px;height:128px;}
  .lp-stamp .c .n{font-size:40px;}
  .lp-stamps::before{top:64px;}
}
@media(max-width:1000px){
  .lp-hero{padding:48px 0 72px;}
  .lp-hero .lp-wrap{grid-template-columns:1fr;gap:48px;}
  .lp-hero-media{padding:0 14px 0 0;}
  .lp-frame img{aspect-ratio:4/3;}
  .lp-pass-sm{position:static;width:min(420px,100%);margin:24px 0 0;}
  .lp-board-grid{grid-template-columns:1fr;}
  .lp-board-col + .lp-board-col .lp-board-head{display:none;}
  .lp-split{grid-template-columns:1fr;gap:40px;}
  .lp-sticky{position:static;}
  .lp-index a{grid-template-columns:88px minmax(0,1fr) 40px;}
  .lp-index .n{font-size:64px;}
  .lp-index .go img{display:none;}
  .lp-stamps{grid-template-columns:repeat(3,1fr);row-gap:44px;}
  .lp-stamps::before{display:none;}
  .lp-desk-head{display:none;}
  .lp-desk-row{grid-template-columns:48px minmax(0,1fr) 140px 24px;grid-template-areas:"no nm fee ar" "no wh fee ar";row-gap:6px;}
  .lp-desk-row .no{grid-area:no;} .lp-desk-row .nm{grid-area:nm;} .lp-desk-row .wh{grid-area:wh;}
  .lp-desk-row .fee{grid-area:fee;} .lp-desk-row .ar{grid-area:ar;}
  .lp-mosaic{grid-auto-rows:240px;}
  .lp-tile.big .h{font-size:40px;}
}
@media(max-width:800px){
  .lp-ledger-grid{grid-template-columns:1fr;}
  .lp-ledger-col{padding:36px 0;}
  .lp-ledger-col + .lp-ledger-col{border-left:0;border-top:1px solid var(--rule);padding:36px 0 0;}
  .lp-ledger-col + .lp-ledger-col::before{left:0;}
  /* The boarding pass turns vertical: stub below, perforation horizontal. */
  .lp-pass.big{--stubh:210px;grid-template-columns:1fr;grid-template-rows:1fr var(--stubh);
    -webkit-mask:
      radial-gradient(circle 10px at 0 calc(100% - var(--stubh)),transparent 98%,#000 100%) left/51% 100% no-repeat,
      radial-gradient(circle 10px at 100% calc(100% - var(--stubh)),transparent 98%,#000 100%) right/51% 100% no-repeat;
    mask:
      radial-gradient(circle 10px at 0 calc(100% - var(--stubh)),transparent 98%,#000 100%) left/51% 100% no-repeat,
      radial-gradient(circle 10px at 100% calc(100% - var(--stubh)),transparent 98%,#000 100%) right/51% 100% no-repeat;}
  .lp-pass.big .lp-pass-stub{border-left:0;border-top:1px dashed rgba(1,39,112,.35);padding:28px 32px;}
  .lp-pass.big .lp-pass-main{padding:32px 32px 30px;}
  .lp-pass.big .lp-pass-row{grid-template-columns:1fr 1fr;}
  .lp-pass.big .lp-gate{font-size:48px;margin-bottom:14px;}
  .lp-barcode{height:30px;margin-top:18px;}
}
@media(max-width:720px){
  .lp-wrap{padding:0 20px;}
  .lp-seal-loc{display:none;}
  .lp-hero{padding:36px 0 56px;}
  .lp-hero h1{margin:18px 0 20px;}
  .lp-actions{align-items:stretch;flex-direction:column;gap:14px;}
  .lp-actions .lp-btn{justify-content:center;}
  .lp-actions .lp-link{text-align:center;}
  .lp-proof{margin-top:32px;}
  /* The board keeps all three columns on a phone. A sideways strip hid the
     STATUS column until the reader swiped — on the device most of this
     audience uses. Routes may wrap; nothing scrolls. */
  .lp-board-grid{grid-template-columns:1fr;}
  .lp-board-head,.lp-board-row{grid-template-columns:1.05fr 1.25fr .5fr;gap:10px;}
  .lp-board-row{font-size:11px;padding:12px 0;align-items:start;}
  .lp-board-row .d small{display:block;margin:2px 0 0;}
  .lp-board-row .r{line-height:1.5;}
  .lp-journeys,.lp-desk,.lp-process,.lp-ledger,.lp-where,.lp-journal,.lp-cta{padding:72px 0;}
  .lp-index a{grid-template-columns:64px minmax(0,1fr) 28px;gap:16px;padding:26px 0;}
  .lp-index a:hover{padding-left:0;padding-right:0;}
  .lp-index .n{font-size:48px;}
  .lp-index .t{font-size:22px;}
  .lp-desk-row{grid-template-columns:40px minmax(0,1fr) 24px;grid-template-areas:"no nm ar" "no wh ar" "no fee ar";padding:22px 0;}
  .lp-desk-row:hover{padding-left:0;}
  .lp-desk-row .nm{font-size:20px;}
  .lp-desk-row .fee{margin-top:4px;}
  .lp-desk-foot{justify-content:flex-start;}
  .lp-stamps{grid-template-columns:repeat(2,1fr);margin-top:48px;row-gap:36px;}
  .lp-stamp .c{width:112px;height:112px;}
  .lp-stamp .c .n{font-size:34px;}
  .lp-stamp .c .eg{bottom:13px;}
  .lp-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:200px;}
  .lp-tile.big{grid-column:span 2;grid-row:span 1;}
  .lp-tile .h{font-size:24px;} .lp-tile.big .h{font-size:34px;}
  .lp-reading a{grid-template-columns:1fr;gap:6px;padding:22px 0;}
  .lp-reading .rt,.lp-reading .ar{display:none;}
  .lp-reading .t{font-size:19px;}
}
@media(max-width:420px){
  .lp-stamps{grid-template-columns:1fr 1fr;}
  .lp-stamp .c{width:100px;height:100px;}
  .lp-mosaic{grid-auto-rows:170px;}
}
@media(prefers-reduced-motion:reduce){
  .lp *{transition:none !important;}
}

/* =========================================================================
   Ledger — shared inner-page components
   Everything below is used by the eleven pages beyond the homepage (About,
   Visa Services + detail, Study Abroad, Business Travel, Events & Tours,
   Assessment, Consultation, Journal + article, Contact), so the whole site
   reads as one system rather than a redesigned homepage bolted onto the old
   university layout. Still namespaced .lp-*, still loaded only where a page
   pushes this stylesheet.
   ========================================================================= */

/* ----------------------------------------------------- The page manifest
   Every inner page opens with this instead of the inherited .page-hero: a
   seal eyebrow, a Playfair title, an optional lead paragraph, mono "tag"
   chips instead of pill trust-chips, and — where a photograph earns its
   place — the same photo-mount used in the homepage hero, at a shorter,
   page-header proportion rather than the hero's full 2:3. */
.lp-manifest{background:#fff;padding:56px 0 60px;border-bottom:1px solid var(--rule);}
.lp-manifest .lp-wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start;}
.lp-manifest.no-photo .lp-wrap{grid-template-columns:1fr;max-width:760px;}
.lp-manifest h1{
  font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4.4vw,56px);
  line-height:1.08;letter-spacing:-.02em;color:var(--pri);margin:16px 0 18px;text-wrap:balance;
}
.lp-manifest .lp-lead{font-size:17px;line-height:1.7;color:var(--tx2);max-width:56ch;}
.lp-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.lp-tag{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;
  border:1px solid var(--rule);background:var(--paper);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--tx2);
}
.lp-tag i{color:var(--gold-ink);font-size:11px;}
.lp-manifest-media{position:relative;padding:4px 8px 40px 28px;}
.lp-manifest-media .lp-frame img{aspect-ratio:4/3;object-position:50% 42%;}
.lp-crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--tx3);
}
.lp-crumb a{color:var(--pri-l);}
.lp-crumb a:hover{color:var(--pri);}
.lp-crumb i{font-size:9px;}

/* ------------------------------------------------------------- Sections
   Generic rhythm helpers so every inner page shares the same vertical
   spacing and alternation the homepage uses (white / paper / navy). */
.lp-sec{padding:88px 0;}
.lp-sec.paper{background:var(--paper);}
.lp-sec.navy{background:var(--pri);color:#fff;}
.lp-sec.navy .lp-h2{color:#fff;}
.lp-sec.navy .lp-sub{color:rgba(255,255,255,.72);}
.lp-sec.navy .lp-seal{color:var(--gold-l);}
.lp-sec.navy .lp-seal::before{background:var(--gold-l);}
.lp-sec.tight{padding:56px 0;}
.lp-sec-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;margin-bottom:40px;
}

/* -------------------------------------------------------------- Note card
   A "customs declaration" aside: gold rule, seal-free heading, one action.
   Used wherever a page deliberately does NOT publish something (a document
   checklist, an intake table) and says why, and for genuine empty states. */
.lp-note{
  display:flex;gap:22px;padding:30px 32px;background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--gold);margin-top:48px;
}
.lp-note > i{flex:none;color:var(--gold-ink);font-size:19px;margin-top:3px;}
.lp-note h3{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--pri);margin-bottom:9px;letter-spacing:-.01em;}
.lp-note p{font-size:14.5px;line-height:1.7;color:var(--tx2);margin-bottom:16px;max-width:64ch;}
.lp-note p:last-child{margin-bottom:0;}
.lp-note p em{color:var(--pri);font-style:italic;}
.lp-note.center{flex-direction:column;align-items:center;text-align:center;padding:56px 32px;}
.lp-note.center > i{font-size:26px;margin-bottom:6px;}
.lp-note.center p{max-width:52ch;}

/* -------------------------------------------------------------- Features
   A hairline grid of cards — differentiators, "what we handle", group-travel
   notes. The 1px gaps on --rule between white cells draw the dividing lines,
   so no cell needs its own border. */
.lp-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:44px;
}
.lp-sec.navy .lp-features{background:var(--rule-on-navy);border-color:var(--rule-on-navy);}
.lp-feature{background:#fff;padding:34px 32px;}
.lp-sec.navy .lp-feature{background:var(--pri);}
.lp-feature .ic{
  width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold-ink);font-size:13px;margin-bottom:20px;
}
.lp-sec.navy .lp-feature .ic{color:var(--gold-l);}
.lp-feature h3{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--pri);margin-bottom:9px;letter-spacing:-.012em;}
.lp-sec.navy .lp-feature h3{color:#fff;}
.lp-feature p{font-size:14px;line-height:1.65;color:var(--tx2);}
.lp-sec.navy .lp-feature p{color:rgba(255,255,255,.72);}
.lp-feature .lp-link{display:inline-block;margin-top:14px;}

/* ------------------------------------------------------- Even-tile mosaic
   The homepage mosaic is built for exactly five (one large + four small). A
   page whose destination count varies — Study Abroad's filtered list — uses
   this modifier instead: uniform tiles, no "big", wraps at any count. */
.lp-mosaic.even{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-rows:280px;}
.lp-mosaic.even .lp-tile{grid-column:span 1;grid-row:span 1;}

/* A 4-up variant of the features grid, used for the About page's stat row.
   Inline `style="grid-template-columns:repeat(4,1fr)"` was tried first and
   was the wrong tool: an inline style beats a stylesheet media query at any
   width, so the 4-column layout survived down to 320px and overflowed. This
   responds at the same breakpoints .lp-features already uses. */
.lp-features.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.lp-features.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.lp-features.cols-4{grid-template-columns:1fr;}}

/* The destination blurb list on Study Abroad: a fixed 220px label column
   reads fine on a wide page but leaves no room at 320px. Stacks below 560px. */
.lp-blurb-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
@media(max-width:560px){.lp-blurb-row{grid-template-columns:1fr;gap:4px;}}

/* --------------------------------------------------------- Schedule board
   The homepage's departure board, generalised: a full-bleed navy band of
   ruled mono rows, used here for an events calendar. `.lp-schedule-row`
   takes 1, 2 or 3 content columns via a `cols-N` modifier so it serves a
   compact 3-column preview and a fuller calendar from the same rules. */
.lp-schedule-head,.lp-schedule-row{display:grid;gap:16px;align-items:baseline;}
.lp-schedule-head.cols-3,.lp-schedule-row.cols-3{grid-template-columns:.6fr 2fr 1fr;}
.lp-schedule-head{
  padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.28);
  font-family:var(--font-seal);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);
}
.lp-schedule-row{
  padding:18px 0;border-bottom:1px solid var(--rule-on-navy);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;
}
.lp-schedule-row .dt{color:var(--gold-l);font-weight:700;text-transform:uppercase;white-space:nowrap;}
.lp-schedule-row .nm{color:#fff;font-family:var(--font);font-weight:600;letter-spacing:0;font-size:14.5px;}
.lp-schedule-row .vn{color:#BFC6D6;}
.lp-schedule-empty{padding:20px 0;color:#9AA6C0;font-size:14px;}

/* -------------------------------------------------------------- Ledger form
   Square inputs, mono/seal labels — the same visual grammar as the ticket
   fields on the boarding pass. Used by Assessment, Consultation and Contact. */
.lp-form{max-width:660px;}
.lp-fieldset{border:0;margin:0 0 40px;padding:0;}
.lp-fieldset legend{
  display:flex;align-items:center;gap:13px;padding:0;margin:0 0 8px;
  font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--pri);letter-spacing:-.012em;
}
.lp-fieldset legend .n{
  font-family:var(--font-seal);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--gold-ink);background:var(--paper);border:1px solid var(--rule);padding:5px 9px;
}
.lp-fieldset .note{font-size:13.5px;line-height:1.65;color:var(--tx2);margin:0 0 20px;max-width:62ch;}
.lp-fld{margin-bottom:22px;}
.lp-fld label{
  display:block;font-family:var(--font-seal);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;
}
.lp-fld label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--tx3);}
.lp-fld input,.lp-fld select,.lp-fld textarea{
  width:100%;font-family:var(--font);font-size:15.5px;color:var(--ink);
  padding:14px 16px;min-height:50px;background:#fff;border:1px solid var(--rule);border-radius:0;
  transition:border-color .15s,box-shadow .15s;
}
.lp-fld textarea{min-height:130px;resize:vertical;line-height:1.6;}
.lp-fld select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6470' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;padding-right:42px;
}
.lp-fld input:focus,.lp-fld select:focus,.lp-fld textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(1,39,112,.08);}
.lp-fld .hint{font-size:12.5px;line-height:1.6;color:var(--tx3);margin-top:9px;}
.lp-fld .err{font-family:var(--font);font-size:12.5px;color:var(--bad);margin-top:8px;font-weight:600;}
.lp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}

/* Nationality → destination, styled as a route to match the consultation
   page's booking form. `.lp-fld` inside carries its own bottom margin, so
   this only needs to line the icon up with the inputs, not the labels. */
.lp-route{display:grid;grid-template-columns:1fr auto 1fr;gap:0 14px;align-items:end;}
.lp-route-ic{
  flex:none;width:38px;height:38px;margin-bottom:22px;border:1px solid var(--rule);background:var(--paper);
  color:var(--tx3);display:flex;align-items:center;justify-content:center;font-size:12px;
}
@media(max-width:640px){
  .lp-route{grid-template-columns:1fr;}
  .lp-route-ic{display:none;}
}
.lp-form-err{
  display:flex;align-items:center;gap:10px;padding:14px 18px;margin-bottom:24px;
  background:var(--bad-soft);border:1px solid rgba(196,43,43,.3);color:var(--bad);font-size:14px;font-weight:600;
}
.lp-success{
  display:flex;align-items:center;gap:12px;padding:16px 20px;margin-bottom:26px;
  background:#fff;border:1px solid var(--rule);border-left:3px solid var(--gold);
  color:var(--pri);font-size:14.5px;font-weight:600;line-height:1.5;
}
.lp-success i{color:var(--gold-ink);font-size:16px;flex:none;}
.lp-fineprint{font-size:12.5px;line-height:1.7;color:var(--tx3);margin-top:18px;max-width:60ch;}

/* Two-column form layout: the form and a sticky sidebar of ledger cards. */
.lp-form-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start;}
.lp-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(72px + 28px);}
.lp-side-card{background:var(--pri);color:#fff;padding:28px 30px;}
.lp-side-card .lp-seal{color:var(--gold-l);margin-bottom:14px;}
.lp-side-card .lp-seal::before{background:var(--gold-l);}
.lp-side-card h3{font-family:var(--font-display);font-size:21px;font-weight:600;color:#fff;margin-bottom:10px;letter-spacing:-.012em;}
.lp-side-card p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:18px;}
.lp-side-card .lp-btn{width:100%;justify-content:center;background:var(--gold);border-color:var(--gold);color:var(--pri-d);}
.lp-side-card .lp-btn:hover{background:#B08D1C;border-color:#B08D1C;}
.lp-side-card.quiet{background:#fff;color:var(--ink);border:1px solid var(--rule);}
.lp-side-card.quiet .lp-seal{color:var(--gold-ink);}
.lp-side-card.quiet .lp-seal::before{background:var(--gold);}
.lp-side-card.quiet h3{color:var(--pri);}
.lp-side-card.quiet p{color:var(--tx2);}
.lp-side-card.quiet .lp-btn{background:var(--pri);border-color:var(--pri);color:#fff;}
.lp-side-card.quiet .lp-btn:hover{background:var(--pri-d);border-color:var(--pri-d);}
.lp-side-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.lp-side-list li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;}
.lp-side-list li > i{color:var(--gold-ink);font-size:14px;width:18px;margin-top:3px;flex:none;}
.lp-side-list span{display:flex;flex-direction:column;gap:1px;}
.lp-side-list strong{
  font-family:var(--font-seal);font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);
}
.lp-side-list a{color:var(--pri);font-weight:600;}
.lp-side-list a:hover{color:var(--pri-l);}
.lp-side-list.on-navy strong{color:#9AA6C0;}
.lp-side-list.on-navy a,.lp-side-list.on-navy span{color:#fff;}
.lp-side-list.on-navy a:hover{color:var(--gold-l);}

/* Numbered "what happens next" list, used in the assessment sidebar. */
.lp-steps-mini{list-style:none;margin:0;padding:0;display:grid;gap:15px;}
.lp-steps-mini li{display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.6;color:rgba(255,255,255,.86);}
.lp-steps-mini .n{
  flex:none;width:23px;height:23px;border-radius:50%;background:var(--gold);color:var(--pri-d);
  font-family:var(--font-seal);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.lp-steps-mini .t strong{color:#fff;}

/* ----------------------------------------------------------- Journal article */
.lp-article{max-width:720px;}
.lp-article .lp-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--tx3);text-transform:uppercase;
}
.lp-article .lp-meta i{color:var(--gold-ink);margin-right:6px;}
.lp-article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;margin:44px 0 4px;display:block;}
.lp-article-body{font-size:16.5px;line-height:1.85;color:var(--ink);max-width:720px;}
.lp-article-body > *{margin-bottom:1.15em;}
.lp-article-body h2{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--pri);margin:1.5em 0 .5em;letter-spacing:-.012em;}
.lp-article-body h3{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--pri);margin:1.3em 0 .4em;}
.lp-article-body ul,.lp-article-body ol{margin-left:1.4em;}
.lp-article-body li{margin-bottom:.4em;}
.lp-article-body a{color:var(--pri-l);text-decoration:underline;text-underline-offset:3px;}
.lp-article-body blockquote{border-left:3px solid var(--gold);padding-left:20px;color:var(--tx2);font-style:italic;font-size:18px;}
.lp-article-body code{background:var(--paper);padding:2px 6px;font-size:.88em;font-family:var(--font-mono);}
.lp-article-body pre{background:var(--pri-dd);color:#eef1f6;padding:18px 20px;overflow-x:auto;}
.lp-article-body pre code{background:none;padding:0;color:inherit;}
.lp-article-body img{margin:1.4em 0;border:1px solid var(--rule);}
.lp-article-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px;padding-top:28px;border-top:1px solid var(--rule);}
.lp-article-tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--tx2);
  border:1px solid var(--rule);background:var(--paper);padding:6px 12px;
}

/* ------------------------------------------------------------- Responsive */
@media(max-width:1000px){
  .lp-manifest .lp-wrap{grid-template-columns:1fr;gap:36px;}
  .lp-manifest-media{padding:0;order:-1;}
  .lp-manifest-media .lp-frame img{aspect-ratio:16/9;}
  .lp-features{grid-template-columns:1fr 1fr;}
  .lp-form-grid{grid-template-columns:1fr;gap:40px;}
  .lp-side{position:static;}
  .lp-schedule-head.cols-3,.lp-schedule-row.cols-3{grid-template-columns:.7fr 1.6fr;}
  .lp-schedule-row .vn{grid-column:2;margin-top:2px;}
}
@media(max-width:720px){
  .lp-sec,.lp-sec.tight{padding:56px 0;}
  .lp-manifest{padding:40px 0 44px;}
  .lp-features{grid-template-columns:1fr;}
  .lp-form-row{grid-template-columns:1fr;}
  .lp-note{flex-direction:column;gap:14px;padding:24px 22px;}
  .lp-note.center{padding:40px 22px;}
  .lp-schedule-head{display:none;}
  .lp-schedule-row.cols-3{grid-template-columns:1fr;gap:4px;}
  .lp-article-body{font-size:15.5px;}
}

/* ================================================== Real-photo proof grid
   Added for the client's own photographs — the NET24 Warsaw conference
   certificate, education-fair meetings, graduation day — used wherever the
   site needs to back a claim with something a stock photo cannot: evidence
   that actually happened. Square corners and hairline dividers, matching
   .lp-features; a caption stripe under each photo carries the fact (event,
   place) rather than an overlay, so it stays legible over any photograph. */
.lp-proof-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:44px;
}
.lp-proof-card{background:#fff;display:flex;flex-direction:column;}
.lp-proof-card .ph{position:relative;background:var(--pri-dd);overflow:hidden;}
.lp-proof-card .ph img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .5s ease;}
.lp-proof-card:hover .ph img{transform:scale(1.04);}
.lp-proof-card .cap{padding:16px 18px 18px;flex:1;}
.lp-proof-card .cap .k{
  display:block;font-family:var(--font-seal);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px;
}
.lp-proof-card .cap p{font-size:13px;line-height:1.55;color:var(--tx2);}
/* The certificate is a document, not a photo of a place — shown whole rather
   than cropped tight, on a paper ground so its own white card reads clearly. */
.lp-proof-card.is-doc .ph{background:var(--paper);}
.lp-proof-card.is-doc .ph img{object-fit:contain;padding:10px;}

@media(max-width:1000px){.lp-proof-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.lp-proof-grid{grid-template-columns:1fr;}.lp-proof-card .ph img{height:230px;}}

/* ==================================================== The photo gallery
   A masonry wall (CSS columns, not grid) because the source photographs are
   real conference and office snapshots at whatever aspect ratio the moment
   left them, not a designed set — columns let a portrait and a panorama
   sit in the same wall without either being cropped to fit a cell. */
.lp-gal-filters{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule);margin-bottom:32px;}
.lp-gal-filters a{
  position:relative;font-family:var(--font-seal);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx2);padding:14px 18px 14px 0;margin-right:22px;
}
.lp-gal-filters a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.lp-gal-filters a:hover{color:var(--pri);}
.lp-gal-filters a.on{color:var(--pri);}
.lp-gal-filters a.on::after{transform:scaleX(1);}
.lp-gal-filters .n{font-family:var(--font-mono);font-size:10px;color:var(--tx3);margin-left:5px;}

.lp-gal-grid{columns:4;column-gap:3px;}
.lp-gal-item{
  break-inside:avoid;position:relative;display:block;width:100%;margin:0 0 3px;padding:0;
  border:none;background:var(--pri-dd);cursor:pointer;overflow:hidden;
}
.lp-gal-item img{width:100%;height:auto;display:block;transition:transform .5s ease;}
.lp-gal-item:hover img{transform:scale(1.045);}
.lp-gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;text-align:left;
  background:linear-gradient(to top, rgba(1,15,40,.94), rgba(1,15,40,0));
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.lp-gal-item:hover .lp-gal-cap,.lp-gal-item:focus-visible .lp-gal-cap{opacity:1;transform:none;}
.lp-gal-cat{
  display:block;font-family:var(--font-seal);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-l);margin-bottom:5px;
}
.lp-gal-title{display:block;font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff;line-height:1.3;}
.lp-gal-zoom{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid rgba(255,255,255,.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;background:rgba(1,39,112,.4);
}
.lp-gal-item:hover .lp-gal-zoom,.lp-gal-item:focus-visible .lp-gal-zoom{opacity:1;transform:none;}
@media(max-width:1000px){.lp-gal-grid{columns:3;}}
@media(max-width:700px){.lp-gal-grid{columns:2;}}
@media(max-width:460px){
  .lp-gal-grid{columns:1;}
  /* The inline aspect-ratio on each tile (so the desktop overlay box matches
     its photo exactly) has to come off here too: with overflow:hidden still
     set, a box locked to the image's ratio clips a caption that has just
     been switched into normal flow below it, rather than growing to fit it. */
  .lp-gal-item{aspect-ratio:auto !important;overflow:visible;background:#fff;}
  .lp-gal-cap{opacity:1;transform:none;position:static;background:none;padding:10px 2px 16px;}
  .lp-gal-title{color:var(--pri);} .lp-gal-cat{color:var(--gold-ink);} .lp-gal-zoom{display:none;}
}

/* The full-size viewer. Same dialog every gallery tile opens, keyboard and
   swipe both wired in resources/views/portfolio/partials/lightbox.blade.php. */
.lp-lb{position:fixed;inset:0;z-index:300;background:rgba(1,8,22,.96);display:flex;align-items:center;justify-content:center;padding:44px 24px;}
.lp-lb[hidden]{display:none;}
.lp-lb-stage{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:22px;}
.lp-lb-img{max-width:100%;max-height:calc(100vh - 180px);width:auto;height:auto;object-fit:contain;border:1px solid rgba(255,255,255,.14);}
.lp-lb-meta{text-align:center;max-width:640px;}
.lp-lb-count{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--gold-l);margin-bottom:9px;text-transform:uppercase;}
.lp-lb-title{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;color:#fff;}
.lp-lb-caption{display:block;font-size:13.5px;font-weight:400;color:rgba(255,255,255,.7);line-height:1.6;margin-top:7px;}
.lp-lb button{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:14px;transition:background .2s,border-color .2s;
}
.lp-lb button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);}
.lp-lb button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.lp-lb-close{top:20px;right:20px;}
.lp-lb-nav{top:50%;transform:translateY(-50%);}
.lp-lb-nav.prev{left:20px;}
.lp-lb-nav.next{right:20px;}
@media(max-width:640px){.lp-lb-nav{display:none;}.lp-lb{padding:22px 16px;}.lp-lb-stage{gap:16px;}}

/* ------------------------------------------------------ Homepage teaser
   A contact sheet, not a mosaic: every frame the same size, in one strip, so
   there is nothing for uneven source photos to throw off balance. The frame
   number in the corner is the one deliberate nod to "this is a strip of
   film", not a grid of thumbnails. Featured photos are chosen from the
   gallery admin (GalleryPhoto.is_featured), so the strip changes when the
   office flags a new conference photo, without a code change. */
.lp-gal-teaser{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:44px;
  background:var(--rule);border:1px solid var(--rule);
}
.lp-gal-teaser a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#fff;}
.lp-gal-teaser a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.lp-gal-teaser a:hover img{transform:scale(1.06);}
.lp-gal-teaser a .fr{
  position:absolute;top:0;left:0;font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.04em;color:#fff;background:rgba(1,15,40,.55);padding:4px 8px;
}
.lp-gal-teaser a.cta{
  background:var(--pri);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:10px;padding:0 18px;
}
.lp-gal-teaser a.cta span.go{font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff;line-height:1.3;}
.lp-gal-teaser a.cta span.n{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--gold-l);}
.lp-gal-teaser a.cta i{color:var(--gold);font-size:12px;transition:transform .2s;}
.lp-gal-teaser a.cta:hover i{transform:translateX(5px);}
@media(max-width:900px){.lp-gal-teaser{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.lp-gal-teaser{grid-template-columns:repeat(2,1fr);}.lp-gal-teaser a{aspect-ratio:1/1;}}

/* ==================================================== The booking widget
   A search-style entry point overlapping the hero slider, because client
   feedback asked for something that works "like booking a ticket" — an
   origin, a destination, dates, travellers. EasyGuide has no live fare or
   room inventory behind it, so this is honest about what it actually is: a
   qualified enquiry, answered by an adviser, not a results page pretending
   to be a search engine (see storeBooking() and EASYGUIDE-CLIENT-FEEDBACK.md
   §4.4). Sky blue is scoped to this component alone (--book-sky*) rather
   than touched globally — the rest of the site's navy/gold identity was
   built and tested deliberately earlier in this project; this is the one
   place client feedback specifically asked to feel different. */
:root{
  --book-sky:#0C7FBF;
  --book-sky-d:#075E8C;
  --book-sky-soft:#EAF6FD;
}
.lp-book-wrap{position:relative;z-index:5;margin-top:-70px;}
.lp-book{
  max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--rule);
  box-shadow:0 30px 60px -30px rgba(1,20,50,.4);
}
/* flex-wrap rather than a fixed count: this card now also sits in the
   narrower left column of the consultation page's two-column layout (not
   just full-width on the homepage), and five tabs there need to fold onto a
   second row rather than mash five labels into ~700px. */
.lp-book-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule);}
.lp-book-tab{
  flex:1 1 150px;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 12px;font-family:var(--font-seal);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);background:var(--paper);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:background .18s,color .18s;cursor:pointer;
}
.lp-book-tab:last-child{border-right:none;}
.lp-book-tab i{font-size:14px;color:var(--tx3);transition:color .18s;}
.lp-book-tab.is-active{background:#fff;color:var(--book-sky-d);}
.lp-book-tab.is-active i{color:var(--book-sky);}
.lp-book-tab:hover:not(.is-active){background:#fff;color:var(--pri);}

.lp-book-panels{padding:28px 32px 32px;}
.lp-book-panel{display:none;}
.lp-book-panel.is-active{display:block;}

.lp-book-grid{
  display:grid;grid-template-columns:1fr auto 1fr 1fr 1fr .8fr;gap:14px;align-items:end;margin-bottom:18px;
}
/* `display:grid` above beats the browser's own `[hidden]{display:none}` —
   author styles always win over the UA stylesheet regardless of specificity
   — so a `hidden` topic-fields group rendered anyway until this said so
   explicitly. Each topic panel on the consultation page relies on `hidden`
   actually hiding it. */
.lp-book-grid[hidden]{display:none;}
.lp-book-fld label{
  display:block;font-family:var(--font-seal);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:7px;
}
.lp-book-fld input{
  width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:0;font-size:14px;
  font-family:var(--font);color:var(--ink);background:#fff;
}
.lp-book-fld input:focus{outline:none;border-color:var(--book-sky);box-shadow:0 0 0 3px rgba(12,127,191,.12);}
.lp-book-swap{
  width:38px;height:38px;border:1px solid var(--rule);background:var(--paper);color:var(--tx2);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:1px;
  transition:background .15s,color .15s,transform .2s;
}
.lp-book-swap:hover{background:var(--book-sky-soft);color:var(--book-sky-d);}
.lp-book-swap.is-swapped{transform:rotate(180deg);}

.lp-book-contact{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px;}
.lp-book-contact input{
  width:100%;padding:12px 13px;border:1px solid var(--rule);font-size:14px;font-family:var(--font);
}
.lp-book-contact input:focus{outline:none;border-color:var(--book-sky);box-shadow:0 0 0 3px rgba(12,127,191,.12);}

.lp-book-go{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:var(--book-sky);
  color:#fff;font-weight:700;font-size:14.5px;border:none;border-radius:0;transition:background .18s;cursor:pointer;
}
.lp-book-go:hover{background:var(--book-sky-d);}
.lp-book-go i{font-size:12px;}

.lp-book-simple{text-align:center;padding:14px 0 6px;}
.lp-book-simple p{font-size:15px;color:var(--tx2);line-height:1.7;max-width:52ch;margin:0 auto 22px;}
.lp-book-simple .lp-btn{background:var(--book-sky);border-color:var(--book-sky);}
.lp-book-simple .lp-btn:hover{background:var(--book-sky-d);border-color:var(--book-sky-d);}

@media(max-width:900px){
  .lp-book-wrap{margin-top:-44px;}
  .lp-book-grid{grid-template-columns:1fr 1fr;}
  .lp-book-swap{display:none;}
  .lp-book-contact{grid-template-columns:1fr;}
  .lp-book-panels{padding:22px 18px 26px;}
  /* Five (or even four) tabs at `flex:1 1 150px` fold onto a second, then a
     third row below this width — the last one landing alone, full-width,
     looking like a stray leftover rather than a tab. A single scrollable
     row (the same fix already used for the homepage's own booking tabs)
     reads as deliberate instead. */
  .lp-book-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .lp-book-tabs::-webkit-scrollbar{display:none;}
  .lp-book-tab{flex:0 0 auto;min-width:128px;padding:14px 8px;white-space:nowrap;}
}
@media(max-width:480px){
  .lp-book-tab{min-width:112px;font-size:10px;padding:13px 10px;}
  .lp-book-tab i{font-size:12px;}
}
@media(max-width:560px){.lp-book-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- Trust strip
   The credibility line the old static hero carried ("financially vetted,
   authorised to issue tickets"), now four small badges under the booking
   widget instead of one paragraph — smaller, quieter icons throughout, per
   client feedback §3.E, rather than the site's usual larger gold treatment. */
.lp-trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-top:none;max-width:1080px;margin:0 auto;
}
.lp-trust-item{background:#fff;padding:20px 18px;display:flex;align-items:center;gap:13px;}
.lp-trust-item .ic{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--book-sky-soft);
  display:flex;align-items:center;justify-content:center;color:var(--book-sky-d);font-size:13px;
}
.lp-trust-item .tx{font-size:12px;font-weight:600;color:var(--pri);line-height:1.4;}
@media(max-width:900px){.lp-trust-strip{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.lp-trust-strip{grid-template-columns:1fr;}}

/* ------------------------------------------------- Booking / form pages
   Consultation and Visa Assessment: the form is asked to be the page's
   main, top-most, wide item, overlapping a short band above it by roughly
   half the band's own height — not a tall hero with a form politely placed
   underneath. Written mobile-first (base rules are the phone layout,
   min-width queries widen it), the opposite direction from the rest of
   this file, because that is specifically what was asked for here. */
/* padding:0 explicitly — easyguide.css's bare `section{padding:var(--s-8) 0}`
   (112px top and bottom) otherwise stacks on top of .lp-wrap's own padding
   below, which is what made this band nearly 480px tall instead of ~200. */
.lp-book-top{position:relative;overflow:hidden;isolation:isolate;color:#fff;min-height:150px;display:flex;align-items:center;padding:0;}
.lp-book-top-bg{position:absolute;inset:0;z-index:-1;}
.lp-book-top-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block;}
.lp-book-top-scrim{
  position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(1,20,58,.95) 0%,rgba(2,42,98,.88) 55%,rgba(12,110,175,.55) 100%);
}
.lp-book-top .lp-wrap{padding:26px 20px 128px;max-width:720px;}
.lp-book-top .lp-seal{color:var(--gold-l);}
.lp-book-top .lp-seal::before{background:var(--gold-l);}
.lp-book-top h1{
  font-family:var(--font-display);font-weight:600;font-size:clamp(22px,6.6vw,32px);
  line-height:1.12;letter-spacing:-.01em;color:#fff;margin:12px 0 0;
}

/* The card overlaps the band above by roughly half its height — the band
   is short on purpose so "half" is still a real, visible lift rather than
   a token few pixels. */
.lp-book-main{background:var(--paper);padding:0 16px 8px;}
.lp-book-lift{max-width:1080px;margin:-104px auto 0;position:relative;z-index:5;}
.lp-book-lift > .lp-sub{color:#fff;text-shadow:0 1px 14px rgba(1,20,58,.4);margin:0 4px 14px;font-size:14px;}

/* "Not just basic": a ticket-coloured top edge, a deeper tinted shadow, a
   dashed gold tear-line under the tabs instead of a plain grey rule, and a
   gold underline on whichever tab is active — small, cheap signals that
   this card was designed on purpose, echoing the boarding-pass motif used
   for the rest of the site rather than borrowing a generic form-card look. */
.lp-book{position:relative;box-shadow:0 44px 90px -36px rgba(1,20,58,.55),0 3px 0 rgba(1,20,58,.08);}
.lp-book::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;z-index:1;
  background:linear-gradient(90deg,var(--pri) 0%,var(--book-sky) 55%,var(--gold) 100%);
}
.lp-book-tabs{border-bottom:1px dashed var(--gold);}
/* Visa Assessment reuses the .lp-book card treatment (gradient edge, deep
   shadow) for its own long form, without any tabs — this supplies the
   padding .lp-book-panels would otherwise have provided. */
.lp-book-plain{padding:28px 20px 32px;}
/* The card is wide (matches the consultation page's card), but a long
   run of form fields stretched across the full 1080px reads worse than
   this width was ever meant to fill on its own — centred to a comfortable
   reading width instead, same as `.lp-form` everywhere else. */
.lp-book-plain .lp-form{margin:0 auto;}
@media(min-width:640px){.lp-book-plain{padding:36px 32px 40px;}}
.lp-book-tab.is-active{box-shadow:inset 0 -3px 0 0 var(--gold);}

.lp-book-support{background:var(--paper);padding:8px 16px 48px;}
.lp-support-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:1080px;margin:0 auto;}
/* Cards were designed to sit beside white form content; here they stand on
   their own in a row, so they get their own shadow instead of the sidebar's
   sticky positioning (never inherited — that lived on `.lp-side`, not on
   the card itself). */
.lp-book-support .lp-side-card{box-shadow:0 18px 40px -24px rgba(1,20,58,.35);}
.lp-book-support .lp-side-card.quiet{box-shadow:none;}

@media(min-width:640px){
  .lp-book-top{min-height:190px;}
  .lp-book-top .lp-wrap{padding:44px 24px 168px;max-width:800px;}
  .lp-book-top h1{font-size:clamp(30px,4.6vw,40px);}
  .lp-book-main{padding:0 24px 8px;}
  .lp-book-lift{margin-top:-148px;}
  .lp-book-support{padding:8px 24px 56px;}
}
@media(min-width:1000px){
  .lp-support-grid{grid-template-columns:1fr 1fr 1fr;}
}

/* ------------------------------------------------------- Updates marquee
   A scrolling strip of short updates above the hero — client feedback §3.C,
   "as dynamic as possible": an intake opening, a processing-time change, a
   new destination, entirely admin-editable (easyguide.marquee) and rendered
   only when at least one line is set. Sits directly under the fixed header,
   ahead of .lp-hero in document order.

   The wider design brief's "no auto-motion anywhere" is a rule for the
   page's OWN sections; this strip is closer to a stock-ticker convention
   than a carousel, exists specifically because the client asked for
   continuous motion here, and pauses for anyone who has said they prefer
   reduced motion — the one accommodation that rule was really protecting. */
.lp-marquee{background:var(--pri);border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden;}
.lp-marquee-track{display:flex;width:max-content;animation:lp-marquee-scroll 32s linear infinite;}
.lp-marquee:hover .lp-marquee-track{animation-play-state:paused;}
.lp-marquee-group{display:flex;align-items:center;flex:none;}
.lp-marquee-item{
  display:inline-flex;align-items:center;gap:10px;padding:10px 28px;white-space:nowrap;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:rgba(255,255,255,.88);
}
a.lp-marquee-item:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;}
.lp-marquee-item::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);}
@keyframes lp-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .lp-marquee-track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .lp-marquee-group[aria-hidden]{display:none;}
}