/* ==========================================================================
   Paramaestro Ke Paragliders — main stylesheet
   Palette lifted from the logo: black wordmark + red / orange / yellow / blue
   wing. Light, airy site; gradients reserved for hero, parallax and banners.
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens */
:root {
  --ink:        #0a0e14;
  --ink-soft:   #121a24;
  --ink-2:      #1b2735;

  --blue:       #1b8ad9;
  --blue-d:     #0e6fb8;
  --blue-deep:  #083e68;
  --blue-tint:  #e8f3fb;

  --red:        #e23127;
  --orange:     #f5851f;
  --yellow:     #ffc42e;

  --paper:      #ffffff;
  --paper-2:    #f7fbfe;
  --paper-3:    #eef5fa;
  --line:       #e3edf4;
  --muted:      #5b7085;
  --muted-2:    #8b9cad;

  --grad-sky:   linear-gradient(135deg, #052a48 0%, #0e6fb8 38%, #1b8ad9 62%, #f5851f 118%);
  --grad-wing:  linear-gradient(90deg, var(--red), var(--orange) 32%, var(--yellow) 55%, var(--blue) 100%);
  --grad-warm:  linear-gradient(120deg, #f5851f, #ffc42e);
  --grad-btn:   linear-gradient(120deg, #0e6fb8, #1b8ad9 55%, #34a9ee);

  --shadow-sm:  0 2px 8px rgba(10, 40, 66, .06);
  --shadow:     0 18px 40px -22px rgba(8, 45, 78, .38);
  --shadow-lg:  0 40px 80px -40px rgba(8, 45, 78, .55);
  --shadow-img: 0 34px 70px -34px rgba(8, 45, 78, .6);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --ff-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease-glide: cubic-bezier(.22, .68, .28, 1);
  --nav-h: 84px;
}

/* ------------------------------------------------------------- 2. reset */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: var(--blue-d); text-decoration: none; transition: color .25s; }
a:hover { color: var(--orange); }

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

/* Thin, brand-coloured scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-3); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue), var(--blue-deep)); border-radius: 99px; border: 3px solid var(--paper-3); }

/* -------------------------------------------------------- 3. typography */
h1, h2, h3, h4, h5, .display {
  font-family: var(--ff-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 .6em;
}

h1, .h1 { font-size: clamp(2.4rem, 5.4vw, 4.15rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
h4      { font-size: 1.15rem; }

p { margin: 0 0 1.15rem; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--muted); line-height: 1.8; }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-d);
  margin-bottom: 1rem;
}
.kicker::before {
  content: ''; width: 34px; height: 3px; border-radius: 3px;
  background: var(--grad-wing);
}
.kicker--light { color: rgba(255, 255, 255, .82); }
.kicker--center { justify-content: center; }

/* Word painted with the wing gradient */
.grad-text {
  background: linear-gradient(100deg, var(--blue-d), var(--blue) 30%, var(--orange) 78%, var(--yellow));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Hand-drawn underline sweep */
.mark-under { position: relative; white-space: nowrap; }
.mark-under::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .32em;
  background: linear-gradient(90deg, rgba(245, 133, 31, .32), rgba(255, 196, 46, .32));
  border-radius: .3em; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-glide) .2s;
}
.is-revealed .mark-under::after { transform: scaleX(1); }

/* ----------------------------------------------------------- 4. layout */
.section { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section--tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--paper { background: var(--paper-2); }
.section--tint  { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%); }

.section--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, .74);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .68); }

.container-x { width: min(1240px, 92%); margin-inline: auto; }
.narrow { max-width: 760px; }
.narrow-center { max-width: 760px; margin-inline: auto; text-align: center; }

.sec-head { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }

/* -------------------------------------------- 5. subtle backdrop shapes */
/* Faint topographic contours, dot grids and soft cloud blooms. Never loud. */
.bg-contour::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 18%, rgba(27, 138, 217, .07), transparent 62%),
    radial-gradient(ellipse 50% 45% at 88% 78%, rgba(245, 133, 31, .07), transparent 60%);
}
.bg-dots::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(11, 62, 104, .11) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000, transparent 78%);
  opacity: .55;
}
.bg-lines::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(11, 62, 104, .045) 0 1px, transparent 1px 78px);
}
.section > .container-x, .section > .sec-inner { position: relative; z-index: 1; }

/* Thin wing-coloured rule used to close sections */
.wing-rule { height: 3px; border: 0; border-radius: 3px; background: var(--grad-wing); opacity: .85; }

/* ---------------------------------------------------------- 6. buttons */
.btn-x {
  --bg: var(--grad-btn);
  position: relative; display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.75rem; border-radius: 999px; border: 0;
  color: #fff; background: var(--bg); cursor: pointer;
  box-shadow: 0 14px 28px -14px rgba(14, 111, 184, .85);
  transition: transform .35s var(--ease-glide), box-shadow .35s, filter .35s;
  overflow: hidden; isolation: isolate; text-align: left;
}
.btn-x::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(120deg, var(--orange), var(--yellow));
  transition: opacity .4s;
}
.btn-x:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 38px -16px rgba(245, 133, 31, .7); }
.btn-x:hover::after { opacity: 1; }
.btn-x i { transition: transform .35s var(--ease-glide); }
.btn-x:hover i { transform: translateX(4px) translateY(-2px); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn-ghost::after { background: var(--grad-btn); }
.btn-ghost:hover { border-color: transparent; color: #fff; }

.btn-light { background: #fff; color: var(--ink); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .5); }
.btn-light:hover { color: #fff; }

.btn-outline-light {
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); box-shadow: none;
}
.btn-outline-light::after { background: #fff; }
.btn-outline-light:hover { color: var(--ink); border-color: transparent; }

.btn-sm { padding: .68rem 1.25rem; font-size: .85rem; }

/* Text link with a sliding arrow */
.link-x {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .9rem;
  letter-spacing: .02em; color: var(--ink);
}
.link-x::after {
  content: ''; width: 26px; height: 1.5px; background: currentColor;
  transition: width .35s var(--ease-glide);
}
.link-x:hover { color: var(--orange); }
.link-x:hover::after { width: 40px; }

/* --------------------------------------------------------- 7. preloader */
#preloader {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .7s ease, visibility .7s;
}
body.is-loaded #preloader { opacity: 0; visibility: hidden; }
.pl-inner { text-align: center; width: min(300px, 70vw); }
.pl-logo { width: 150px; margin: 0 auto 1.4rem; opacity: .95; animation: plFloat 3s ease-in-out infinite; }
.pl-track { height: 3px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.pl-bar { height: 100%; width: 40%; border-radius: 3px; background: var(--grad-wing); animation: plRun 1.5s ease-in-out infinite; }
.pl-txt {
  margin-top: .9rem; font-family: var(--ff-display); font-size: .68rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted-2);
}
@keyframes plFloat { 0%, 100% { transform: translateY(-6px) rotate(-1.5deg); } 50% { transform: translateY(6px) rotate(1.5deg); } }
@keyframes plRun   { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* ------------------------------------------------------------ 8. header */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .45s, box-shadow .45s, height .45s, backdrop-filter .45s;
}
.site-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-wing); opacity: 0; transition: opacity .45s;
}
.site-head.is-stuck {
  height: 70px; background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(8, 45, 78, .45);
}
.site-head.is-stuck::after { opacity: .9; }

.head-row { display: flex; align-items: center; gap: 1.25rem; width: 100%; }
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { height: 52px; width: auto; transition: height .45s, filter .45s; }
.site-head.is-stuck .brand img { height: 44px; }
/* Over the hero the logo is knocked out to white */
/* replaced by the two-mark swap in section 30 */

.nav-x { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav-x a {
  position: relative; font-family: var(--ff-display); font-weight: 500; font-size: .92rem;
  padding: .55rem .85rem; border-radius: 8px; color: var(--ink);
}
.site-head:not(.is-stuck):not(.head--solid) .nav-x a { color: rgba(255, 255, 255, .92); }
.nav-x a::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  border-radius: 2px; background: var(--grad-wing);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-glide);
}
.nav-x a:hover::after, .nav-x a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-x a.is-active { font-weight: 700; }

.head-cta { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.head-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .88rem; color: var(--ink);
}
.site-head:not(.is-stuck):not(.head--solid) .head-phone { color: #fff; }
.head-phone i { color: var(--orange); font-size: 1.05rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 12px;
  background: var(--paper-3); color: var(--ink); font-size: 1.3rem; align-items: center; justify-content: center;
}
.site-head:not(.is-stuck):not(.head--solid) .nav-toggle { background: rgba(255, 255, 255, .17); color: #fff; }

/* Off-canvas mobile menu */
.mnav {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); z-index: 1200;
  background: var(--ink); color: #fff; padding: 2rem 1.75rem;
  transform: translateX(105%); transition: transform .55s var(--ease-glide);
  overflow-y: auto;
}
.mnav.is-open { transform: none; }
.mnav a { display: block; color: rgba(255, 255, 255, .85); font-family: var(--ff-display);
          font-size: 1.15rem; font-weight: 500; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.mnav a:hover, .mnav a.is-active { color: var(--yellow); padding-left: .5rem; }
.mnav-close { position: absolute; top: 1.1rem; right: 1.1rem; background: none; border: 0; color: #fff; font-size: 1.6rem; }
.mnav-backdrop {
  position: fixed; inset: 0; z-index: 1150; background: rgba(6, 20, 34, .55);
  opacity: 0; visibility: hidden; transition: .45s;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mnav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------- 9. media frames */
/* Every image sits in a pre-sized box, object-fit: cover, with a shimmering
   placeholder that a little wing glides across while the file loads.       */
.mframe {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--r-lg); background: var(--paper-3);
  isolation: isolate;
}
.mframe--16x9 { aspect-ratio: 16 / 9; }
.mframe--21x9 { aspect-ratio: 21 / 9; }
.mframe--4x3  { aspect-ratio: 4 / 3; }
.mframe--3x2  { aspect-ratio: 3 / 2; }
.mframe--1x1  { aspect-ratio: 1 / 1; }
.mframe--3x4  { aspect-ratio: 3 / 4; }
.mframe--4x5  { aspect-ratio: 4 / 5; }
.mframe--fill { height: 100%; border-radius: 0; }

.mframe__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s ease, transform 1.5s var(--ease-glide);
}
.mframe__media.is-loaded { opacity: 1; transform: none; }

.mframe__skeleton {
  position: absolute; inset: 0; overflow: hidden;
  background: #eaf2f8;
  transition: opacity .6s ease .1s;
}
/* The shimmer is a translating pseudo-element rather than an animated
   background-position — transforms are composited, background paints are not,
   and there can be thirty of these on screen at once. */
.mframe__skeleton::before {
  content: ''; position: absolute; inset: 0 -60%;
  background: linear-gradient(105deg, transparent 12%, #f8fbfe 45%, transparent 78%);
  animation: skelSweep 2.1s linear infinite;
}
.mframe.is-filled .mframe__skeleton { opacity: 0; }
.mframe.is-filled .mframe__skeleton::before { animation: none; }
@keyframes skelSweep { 0% { transform: translateX(-55%); } 100% { transform: translateX(55%); } }

/* Tiny paraglider drifting across the empty box */
.mframe__wing {
  position: absolute; top: 42%; left: -18%; width: 46px; height: 34px;
  animation: wingCross 3.4s var(--ease-glide) infinite;
}
.mframe__wing::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 11px; border-radius: 50% 50% 42% 42% / 100% 100% 0 0;
  background: var(--grad-wing); opacity: .75;
}
.mframe__wing::after {
  content: ''; position: absolute; left: 50%; top: 11px; width: 1px; height: 13px;
  background: rgba(11, 62, 104, .35);
  box-shadow: -9px 0 rgba(11, 62, 104, .28), 9px 0 rgba(11, 62, 104, .28);
}
@keyframes wingCross {
  0%   { transform: translate(0, 10px) rotate(-6deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(clamp(220px, 32vw, 640px), -22px) rotate(6deg); opacity: 0; }
}

/* Barely-there film grain so photos never feel flat/pasted-on */
.mframe__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0, 0, 0, .55) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* Frame decorations */
.mframe--soft   { box-shadow: var(--shadow-img); }
.mframe--edge   { border: 8px solid #fff; box-shadow: var(--shadow-img); }
.mframe--tilt   { transform: rotate(-2deg); }
.mframe--tilt-r { transform: rotate(2.2deg); }
.mframe--pill   { border-radius: 200px 200px var(--r-lg) var(--r-lg); }
.mframe--arch   { border-radius: 260px 260px 24px 24px; }
.mframe--blade  { border-radius: var(--r-lg) 130px var(--r-lg) 130px; }

/* Hover: photograph leans into the wind */
.mframe--hover { transition: transform .7s var(--ease-glide), box-shadow .7s; }
.mframe--hover:hover { transform: translateY(-8px) rotate(-.8deg); box-shadow: var(--shadow-lg); }
.mframe--hover:hover .mframe__media { transform: scale(1.07); }

/* Video frames */
.mframe--video .mframe__media { transform: none; }
.vplay {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
}
.vplay span {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: var(--blue-deep); font-size: 1.6rem;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ease-glide), background .4s;
}
.vplay::before {
  content: ''; position: absolute; width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); animation: pulseRing 2.6s ease-out infinite;
}
.vplay:hover span { transform: scale(1.1); background: #fff; }
.mframe.is-playing .vplay { opacity: 0; pointer-events: none; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

/* --------------------------------------------- 10. reveal-on-scroll */
[data-reveal] {
  opacity: 0; transform: translateY(38px);
  transition: opacity .95s var(--ease-glide), transform 1.05s var(--ease-glide);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="glide"] { transform: translate(-40px, 46px) rotate(-3.5deg); }
[data-reveal="drop"]  { transform: translateY(-34px); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 11. hero */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; color: #fff; padding: calc(var(--nav-h) + 3rem) 0 6rem;
}
.hero__slider { position: absolute; inset: 0; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(4, 21, 38, .88) 0%, rgba(5, 42, 72, .66) 42%, rgba(6, 40, 70, .18) 72%, rgba(245, 133, 31, .18) 100%),
    linear-gradient(0deg, rgba(4, 18, 33, .8) 0%, transparent 45%);
}
/* soft moving light, like sun through cloud */
.hero__glow {
  position: absolute; z-index: 1; inset: -30% -10% auto auto; width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(255, 196, 46, .22), transparent 62%);
  filter: blur(20px); animation: heroGlow 16s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes heroGlow { 0% { transform: translate(4%, 6%) scale(1); } 100% { transform: translate(-8%, -4%) scale(1.18); } }

.hero__inner { position: relative; z-index: 3; }
.hero h1 { color: #fff; text-shadow: 0 8px 40px rgba(0, 12, 24, .35); max-width: 16ch; }
.hero .lead { color: rgba(255, 255, 255, .84); max-width: 56ch; font-size: clamp(1.02rem, 1.3vw, 1.19rem); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.2rem; }

/* Live "conditions" chip strip under the hero copy */
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.2rem;
  padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__meta div { min-width: 96px; }
.hero__meta b {
  display: block; font-family: var(--ff-display); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1;
}
.hero__meta span {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}

/* Scroll hint */
.scroll-hint {
  position: absolute; left: 50%; bottom: 1.9rem; z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .65);
}
.scroll-hint i { font-size: 1.1rem; animation: hintBob 2s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(7px); opacity: 1; } }

/* Curved "wing" edge that closes the hero into the white page */
.wing-edge {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; line-height: 0; pointer-events: none;
}
.wing-edge svg { width: 100%; height: clamp(48px, 6vw, 96px); display: block; }
.wing-edge path { fill: var(--paper); }
.wing-edge--tint path { fill: var(--paper-2); }

/* ---------------------------------------------------- 12. inner banner */
.banner {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--nav-h) + 5rem) 0 clamp(5rem, 8vw, 7.5rem);
  background: var(--ink);
}
.banner__bg { position: absolute; inset: 0; z-index: 0; }
.banner__bg .mframe { height: 100%; border-radius: 0; }
.banner__bg .mframe__media { transform: scale(1.12); }
.banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(4, 20, 36, .9) 0%, rgba(6, 44, 76, .74) 48%, rgba(245, 133, 31, .3) 100%),
    linear-gradient(0deg, rgba(4, 18, 33, .55), transparent 55%);
}
.banner__inner { position: relative; z-index: 3; }
.banner h1 { color: #fff; margin-bottom: .5rem; }
.banner .lead { color: rgba(255, 255, 255, .8); max-width: 62ch; }

.crumb { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; font-size: .82rem; margin-top: 1.6rem; }
.crumb a { color: rgba(255, 255, 255, .72); }
.crumb a:hover { color: var(--yellow); }
.crumb i { font-size: .7rem; opacity: .5; }
.crumb span { color: #fff; font-weight: 600; }

/* --------------------------------------------------- 13. parallax band */
.parax {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(6rem, 12vw, 11rem) 0;
  background: var(--ink);
}
.parax__bg { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.parax__bg .mframe { height: 100%; border-radius: 0; }
.parax__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(3, 17, 31, .86) 0%, rgba(8, 62, 104, .7) 50%, rgba(226, 49, 39, .34) 100%);
}
.parax__inner { position: relative; z-index: 3; }
.parax h2 { color: #fff; }

/* Big translucent numbers used inside parallax bands */
.parax-stats { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 3rem; }
.parax-stats b {
  display: block; font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 4rem);
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .45));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.parax-stats span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

/* ---------------------------------------------------------- 14. cards */
.card-x {
  position: relative; background: #fff; border-radius: var(--r-lg);
  border: 1px solid var(--line); overflow: hidden; height: 100%;
  transition: transform .55s var(--ease-glide), box-shadow .55s, border-color .55s;
}
.card-x:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-x__body { padding: 1.75rem 1.6rem 1.9rem; }
.card-x__body h3 { margin-bottom: .55rem; }
.card-x p { color: var(--muted); font-size: .95rem; margin-bottom: 1.1rem; }

/* accent hairline that grows on hover */
.card-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 4;
  background: var(--grad-wing); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-glide);
}
.card-x:hover::before { transform: scaleX(1); }

/* Experience card — image with a floating price pill */
.exp-card .mframe { border-radius: 0; }
.exp-card .mframe__media { transition: transform 1.1s var(--ease-glide), opacity .9s; }
.exp-card:hover .mframe__media { transform: scale(1.08); }
.exp-card__tag {
  position: absolute; left: 1.1rem; top: 1.1rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-family: var(--ff-display); font-weight: 700; font-size: .78rem;
  padding: .45rem .85rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.exp-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 1rem;
  font-size: .78rem; color: var(--muted-2);
}
.exp-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.exp-card__meta i { color: var(--blue); }

/* Icon feature tile */
.feat {
  position: relative; padding: 2.1rem 1.7rem; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); height: 100%;
  transition: transform .5s var(--ease-glide), box-shadow .5s, background .5s;
}
.feat:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.feat__ico {
  width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; margin-bottom: 1.15rem;
  background: var(--grad-btn); box-shadow: 0 12px 24px -12px rgba(14, 111, 184, .9);
  transition: transform .55s var(--ease-glide);
}
.feat:hover .feat__ico { transform: rotate(-8deg) scale(1.06); }
.feat h3 { font-size: 1.12rem; }
.feat p { color: var(--muted); font-size: .93rem; margin: 0; }
.feat__num {
  position: absolute; right: 1.2rem; top: .6rem;
  font-family: var(--ff-display); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: var(--paper-3); z-index: 0;
}
.feat > * { position: relative; z-index: 1; }

/* Dark variant for dark sections */
.section--dark .feat { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
.section--dark .feat p { color: rgba(255, 255, 255, .66); }
.section--dark .feat__num { color: rgba(255, 255, 255, .05); }
.section--dark .card-x { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
.section--dark .card-x p { color: rgba(255, 255, 255, .66); }

/* Stat strip */
.stat-strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  text-align: center; padding: 2rem 1rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
  transition: transform .5s var(--ease-glide), box-shadow .5s;
}
.stat:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.stat b { display: block; font-family: var(--ff-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--ink); }
.stat b i { font-style: normal; color: var(--orange); }
.stat span { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }

/* ------------------------------------------- 15. sticky image section */
/* Photo holds still on one side while the copy blocks slide past it. */
.sticky-wrap { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: start; }
.sticky-media { position: sticky; top: calc(var(--nav-h) + 2rem); }
.sticky-steps { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.sticky-step {
  padding: 2rem 0 2rem 2.2rem; border-left: 2px solid var(--line); position: relative;
}
.sticky-step::before {
  content: ''; position: absolute; left: -9px; top: 2.5rem; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); transition: background .4s, transform .4s;
}
.sticky-step.is-revealed::before { background: var(--orange); border-color: var(--orange); transform: scale(1.15); }
.sticky-step h3 { margin-bottom: .5rem; }
.sticky-step p { color: var(--muted); margin: 0; }
.sticky-step small {
  display: block; font-family: var(--ff-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem;
}

/* --------------------------------------------------- 16. split feature */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.split--rev .split__media { order: 2; }
@media (max-width: 900px) {
  .split, .sticky-wrap { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .sticky-media { position: static; }
}

/* Stacked image composition: big photo + overlapping inset */
.stack { position: relative; padding-bottom: 3.5rem; padding-right: 2rem; }
.stack__inset {
  position: absolute; right: 0; bottom: 0; width: 46%; z-index: 3;
  border: 8px solid #fff; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-img);
}
.stack__inset .mframe { border-radius: 12px; }
.stack__badge {
  position: absolute; left: -1.4rem; top: 2.2rem; z-index: 4;
  background: #fff; border-radius: var(--r); padding: 1rem 1.2rem;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: .8rem;
  animation: badgeFloat 5s ease-in-out infinite;
}
.stack__badge i { font-size: 1.5rem; color: var(--orange); }
.stack__badge b { display: block; font-family: var(--ff-display); font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.stack__badge span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
@keyframes badgeFloat { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }

/* ---------------------------------------------------------- 17. marquee */
.marquee {
  position: relative; overflow: hidden; padding: 1.4rem 0;
  background: var(--ink); border-block: 1px solid rgba(255, 255, 255, .07);
}
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marq 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: 1.4rem; flex-shrink: 0;
  font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: -.01em; color: rgba(255, 255, 255, .28); text-transform: uppercase; white-space: nowrap;
}
.marquee span i { font-size: .8em; color: var(--orange); }
.marquee span:nth-child(even) {
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------ 18. testimonials */
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.2rem 1.9rem; height: 100%; position: relative;
  transition: transform .55s var(--ease-glide), box-shadow .55s;
}
.quote-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.quote-card::before {
  content: '\201C'; position: absolute; right: 1.4rem; top: .2rem;
  font-family: Georgia, serif; font-size: 5.5rem; line-height: 1; color: var(--paper-3);
}
.quote-card p { position: relative; z-index: 1; font-size: .98rem; color: var(--ink-2); }
.quote-card__who { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem; }
.quote-card__av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 700; color: #fff; background: var(--grad-btn); font-size: .95rem;
}
.quote-card__who b { display: block; font-family: var(--ff-display); font-size: .95rem; color: var(--ink); }
.quote-card__who span { font-size: .8rem; color: var(--muted-2); }
.stars { color: var(--yellow); font-size: .85rem; letter-spacing: .12em; margin-bottom: .9rem; }

/* ----------------------------------------------------------- 19. blog */
.post-card { display: block; height: 100%; }
.post-card .mframe { border-radius: var(--r-lg); }
.post-card__cat {
  position: absolute; left: 1rem; top: 1rem; z-index: 5;
  background: rgba(10, 14, 20, .78); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .38rem .8rem; border-radius: 999px;
}
.post-card h3 { font-size: 1.18rem; margin: 1.15rem 0 .5rem; transition: color .3s; }
.post-card:hover h3 { color: var(--blue-d); }
.post-card p { color: var(--muted); font-size: .93rem; }
.post-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--muted-2); }
.post-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.prose { font-size: 1.05rem; line-height: 1.9; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: 2.4rem; }
.prose h3 { font-size: 1.35rem; margin-top: 2rem; }
.prose img { border-radius: var(--r); margin: 1.8rem 0; box-shadow: var(--shadow); }
.prose blockquote {
  margin: 2rem 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--orange);
  background: var(--paper-2); border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--ff-display); font-size: 1.1rem; color: var(--ink);
}
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------- 20. gallery */
.gal-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gal-item {
  position: relative; display: block; border-radius: var(--r); overflow: hidden; cursor: zoom-in;
}
.gal-item:nth-child(6n + 1) { grid-row: span 2; }
.gal-item:nth-child(6n + 1) .mframe { aspect-ratio: 3 / 4; height: 100%; }
.gal-item .mframe { border-radius: var(--r); height: 100%; }
.gal-item__cap {
  position: absolute; inset: auto 0 0; z-index: 5; padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(0deg, rgba(6, 20, 34, .88), transparent);
  color: #fff; font-family: var(--ff-display); font-size: .9rem; font-weight: 600;
  transform: translateY(105%); transition: transform .5s var(--ease-glide);
}
.gal-item:hover .gal-item__cap { transform: none; }
.gal-item:hover .mframe__media { transform: scale(1.08); }
.gal-item::after {
  content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; z-index: 6;
  right: .9rem; top: .9rem; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink);
  opacity: 0; transform: scale(.6); transition: .4s var(--ease-glide);
}
.gal-item:hover::after { opacity: 1; transform: none; }

.gal-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
.gal-filter button {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--ff-display); font-weight: 600; font-size: .84rem;
  padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer; transition: .35s;
}
.gal-filter button:hover { border-color: var(--blue); color: var(--blue-d); }
.gal-filter button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Lightbox */
#lightbox {
  position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center;
  background: rgba(5, 14, 24, .94); padding: 4vh 4vw;
  opacity: 0; visibility: hidden; transition: .4s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#lightbox.is-open { opacity: 1; visibility: visible; }
#lightbox img { max-height: 84vh; max-width: 100%; border-radius: var(--r); box-shadow: var(--shadow-lg); }
#lightbox .lb-cap { color: rgba(255, 255, 255, .8); text-align: center; margin-top: 1rem; font-size: .9rem; }
.lb-btn {
  position: absolute; background: rgba(255, 255, 255, .12); border: 0; color: #fff;
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; transition: .3s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ 21. FAQ */
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  margin-bottom: .85rem; overflow: hidden; transition: box-shadow .45s, border-color .45s;
}
.faq-item.is-open { box-shadow: var(--shadow); border-color: transparent; }
.faq-q {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq-q i {
  margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-3); color: var(--blue-d);
  font-size: .85rem; transition: transform .45s var(--ease-glide), background .45s, color .45s;
}
.faq-item.is-open .faq-q i { transform: rotate(135deg); background: var(--orange); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease-glide); }
.faq-a > div { padding: 0 1.4rem 1.4rem; color: var(--muted); }

/* -------------------------------------------------------- 22. contact */
.info-tile {
  display: flex; gap: 1.1rem; padding: 1.5rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line); height: 100%;
  transition: transform .5s var(--ease-glide), box-shadow .5s;
}
.info-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.info-tile i {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.25rem; color: #fff; background: var(--grad-btn);
}
.info-tile b { display: block; font-family: var(--ff-display); font-size: .96rem; color: var(--ink); margin-bottom: .2rem; }
.info-tile a, .info-tile p { color: var(--muted); font-size: .92rem; margin: 0; display: block; }
.info-tile a:hover { color: var(--orange); }

.form-x .form-label {
  font-family: var(--ff-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink); margin-bottom: .4rem;
}
.form-x .form-control, .form-x .form-select {
  border: 1.5px solid var(--line); border-radius: 12px; padding: .8rem 1rem;
  font-size: .95rem; background: var(--paper-2); transition: .3s;
}
.form-x .form-control:focus, .form-x .form-select:focus {
  border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27, 138, 217, .12);
}
.form-x textarea.form-control { min-height: 130px; resize: vertical; }

#osm-map, .osm-map { height: 460px; width: 100%; border-radius: var(--r-lg); z-index: 1; }
.leaflet-container { font-family: var(--ff-body); }
.map-pin {
  width: 44px; height: 44px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--grad-btn); box-shadow: 0 10px 22px -8px rgba(8, 45, 78, .8);
  display: grid; place-items: center; border: 3px solid #fff;
}
.map-pin i { transform: rotate(45deg); color: #fff; font-size: 1.05rem; }

/* --------------------------------------------------------- 23. footer */
.site-foot {
  position: relative; overflow: hidden;
  background: var(--ink); color: rgba(255, 255, 255, .66);
  padding: clamp(4rem, 7vw, 6rem) 0 0;
}
.site-foot::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: .1;
  background-image: var(--foot-bg); background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 72%);
          mask-image: linear-gradient(0deg, #000, transparent 72%);
}
.site-foot > * { position: relative; z-index: 1; }
.site-foot h4 { color: #fff; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.35rem; }
.site-foot a { color: rgba(255, 255, 255, .66); font-size: .93rem; }
.site-foot a:hover { color: var(--yellow); }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.foot-links a { display: inline-flex; align-items: center; gap: .5rem; transition: transform .3s, color .3s; }
.foot-links a:hover { transform: translateX(4px); }
.foot-logo { width: 190px; margin-bottom: 1.3rem; }

.soc { display: flex; gap: .6rem; margin-top: 1.4rem; }
.soc a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #fff; font-size: 1rem;
  transition: transform .4s var(--ease-glide), background .4s;
}
.soc a:hover { background: var(--grad-warm); color: #fff; transform: translateY(-4px) rotate(-8deg); }

.foot-sub { display: flex; gap: .5rem; margin-top: 1rem; }
.foot-sub input {
  flex: 1; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  color: #fff; border-radius: 999px; padding: .75rem 1.15rem; font-size: .9rem; outline: 0;
}
.foot-sub input::placeholder { color: rgba(255, 255, 255, .4); }
.foot-sub input:focus { border-color: var(--blue); }
.foot-sub button { border: 0; border-radius: 999px; width: 48px; flex-shrink: 0; background: var(--grad-warm); color: #fff; font-size: 1.05rem; }

.foot-bar {
  margin-top: 3.5rem; padding: 1.4rem 0; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .84rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between;
}
.credit-line a { color: #fff; font-weight: 600; border-bottom: 1px dotted rgba(255, 255, 255, .35); }
.credit-line a:hover { color: var(--yellow); border-color: var(--yellow); }

/* ---------------------------------------- 24. the flying booking button */
/* Lives in the hero (or page banner) as a normal button. Scroll past it and
   it glides down to the bottom-right corner under a little canopy; scroll
   back up and it flies home.                                              */
.book-anchor { display: inline-block; width: 232px; height: 56px; vertical-align: middle; }

.flybook {
  position: fixed; left: 0; top: 0; z-index: 990;
  transform: translate3d(-999px, 0, 0);
  pointer-events: none;
}
.flybook__y { transform: translate3d(0, -999px, 0); }
.flybook.is-transit             { transition: transform 1.25s cubic-bezier(.62, .02, .35, 1); }
.flybook.is-transit .flybook__y { transition: transform 1.25s cubic-bezier(.28, .86, .32, 1); }

.flybook__craft { position: relative; pointer-events: auto; transform-origin: 50% -30px; }
.flybook.is-flying .flybook__craft { animation: glideSway 5.5s ease-in-out infinite; }
@keyframes glideSway {
  0%, 100% { transform: rotate(-2.6deg) translateY(0); }
  50%      { transform: rotate(2.6deg) translateY(-7px); }
}

.flybook__btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  width: 232px; height: 56px; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem; color: #fff;
  background: var(--grad-btn);
  box-shadow: 0 16px 32px -14px rgba(14, 111, 184, .9);
  transition: width .9s var(--ease-glide), box-shadow .5s, background .5s, transform .35s;
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.flybook__btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(120deg, var(--orange), var(--yellow)); transition: opacity .4s;
}
.flybook__btn:hover::after { opacity: 1; }
.flybook__btn:hover { transform: scale(1.04); }
.flybook.is-flying .flybook__btn {
  width: 188px;
  box-shadow: 0 22px 40px -16px rgba(8, 45, 78, .75), 0 0 0 6px rgba(255, 255, 255, .55);
}

/* The canopy — only unpacks once the button is airborne */
.flybook__canopy {
  position: absolute; left: 50%; bottom: calc(100% + 22px);
  width: 176px; height: 62px; transform: translateX(-50%) scale(.15); transform-origin: 50% 100%;
  opacity: 0; transition: transform .95s cubic-bezier(.2, 1.4, .4, 1) .12s, opacity .5s;
  pointer-events: none;
}
.flybook.is-flying .flybook__canopy { transform: translateX(-50%) scale(1); opacity: 1; }
.flybook__lines {
  position: absolute; left: 50%; bottom: 100%; width: 130px; height: 24px;
  transform: translateX(-50%); opacity: 0; transition: opacity .45s .3s; pointer-events: none;
}
.flybook.is-flying .flybook__lines { opacity: 1; }
.flybook__lines::before, .flybook__lines::after {
  content: ''; position: absolute; bottom: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(10, 14, 20, .05), rgba(10, 14, 20, .5));
}
.flybook__lines::before { left: 14%; transform: rotate(11deg); transform-origin: bottom; }
.flybook__lines::after  { right: 14%; transform: rotate(-11deg); transform-origin: bottom; }

/* Docked at the anchor the canopy is packed away and the pill sits flat */
.flybook:not(.is-flying) .flybook__btn { box-shadow: 0 14px 28px -14px rgba(14, 111, 184, .85); }

/* Hide entirely when the booking modal is open */
body.modal-open .flybook { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* ------------------------------------------------- 25. floating actions */
.float-stack {
  position: fixed; right: 22px; bottom: 96px; z-index: 980;
  display: grid; gap: .6rem;
}
.float-stack a {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.25rem; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .6);
  transition: transform .4s var(--ease-glide);
}
.float-stack a:hover { transform: scale(1.11) rotate(-6deg); color: #fff; }
.fa-wa { background: #25d366; }
.fa-tel { background: var(--ink); }

#toTop {
  position: fixed; left: 22px; bottom: 22px; z-index: 980;
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: .45s var(--ease-glide);
}
#toTop.is-on { opacity: 1; visibility: visible; transform: none; }
#toTop:hover { background: var(--grad-warm); }

/* ---------------------------------------------------- 26. booking modal */
.modal-book .modal-content {
  border: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.modal-book .modal-side {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  min-height: 100%; padding: 2.5rem 2rem;
}
.modal-book .modal-side .mframe { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.modal-book .modal-side__scrim {
  position: absolute; inset: 0; background: linear-gradient(160deg, rgba(5, 25, 44, .92), rgba(14, 111, 184, .72) 60%, rgba(245, 133, 31, .5));
}
.modal-book .modal-side > .side-in { position: relative; z-index: 2; }
.modal-book .side-in h3 { color: #fff; }
.modal-book .side-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; font-size: .92rem; }
.modal-book .side-list li { display: flex; gap: .65rem; align-items: flex-start; color: rgba(255, 255, 255, .82); }
.modal-book .side-list i { color: var(--yellow); margin-top: .18rem; }
.modal-book .modal-body { padding: 2.4rem; }
.modal-book .btn-close { position: absolute; top: 1rem; right: 1rem; z-index: 9; background-color: rgba(255, 255, 255, .85); border-radius: 50%; padding: .7rem; }

.form-note { font-size: .82rem; color: var(--muted-2); }
.form-ok, .form-err {
  border-radius: 12px; padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1rem; display: none;
}
.form-ok  { background: #e8f7ee; color: #1c6b3f; border: 1px solid #b9e5cc; }
.form-err { background: #fdecea; color: #a3241c; border: 1px solid #f6c8c4; }

/* ------------------------------------------------------- 27. utilities */
.text-muted-x { color: var(--muted); }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--paper-3); color: var(--blue-deep);
  font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  padding: .4rem .85rem; border-radius: 999px;
}
.pill--light { background: rgba(255, 255, 255, .14); color: #fff; }
.divider-soft { height: 1px; background: var(--line); border: 0; }

.counter { font-variant-numeric: tabular-nums; }

/* Cloud drift decoration for light sections */
.cloud-deco {
  position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  filter: blur(1px); animation: cloudDrift 34s linear infinite;
}
.cloud-deco svg { fill: #fff; }
@keyframes cloudDrift {
  0%   { transform: translateX(-14vw); }
  100% { transform: translateX(114vw); }
}

/* --------------------------------------------------- 28. responsive */
@media (max-width: 1100px) {
  .nav-x { display: none; }
  .nav-toggle { display: inline-flex; }
  .head-phone { display: none; }
}
@media (max-width: 720px) {
  :root { --nav-h: 72px; }
  .head-cta .btn-x { display: none; }
  .stack { padding-right: 0; }
  .stack__inset { width: 52%; right: -.5rem; }
  .stack__badge { left: -.4rem; padding: .8rem .95rem; }
  .hero__meta { gap: 1.1rem 1.6rem; }
  .modal-book .modal-body { padding: 1.6rem; }
  .float-stack { right: 14px; bottom: 88px; }
  .float-stack a { width: 44px; height: 44px; font-size: 1.1rem; }
  #toTop { left: 14px; bottom: 14px; }
  .book-anchor { width: 200px; height: 52px; }
  .flybook__btn { width: 200px; height: 52px; font-size: .9rem; }
  .flybook.is-flying .flybook__btn { width: 60px; padding: 0; }
  .flybook.is-flying .flybook__btn span { display: none; }
  .flybook.is-flying .flybook__btn i { font-size: 1.3rem; }
  .flybook__canopy { width: 120px; }
  .gal-item:nth-child(6n + 1) { grid-row: span 1; }
  .gal-item:nth-child(6n + 1) .mframe { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------- 29. late additions / fixes */

/* Deep sky sits behind the hero slider until the first slide arrives. */
.hero__slider { background: linear-gradient(140deg, #041b30 0%, #0a4d80 55%, #083e68 100%); }
.hero__slider .ws-outer { height: 100%; }

/* Frames used as full-bleed backgrounds never round or clip oddly. */
.banner__bg .mframe, .parax__bg .mframe, .modal-side .mframe { border-radius: 0; height: 100%; }
.mframe.is-error .mframe__skeleton { opacity: 1; }

/* Sticky steps need a little breathing room from the sticky photo. */
@media (min-width: 901px) { .sticky-steps { padding-left: .5rem; } }

/* Bootstrap's modal backdrop should sit under our floating chrome. */
.modal-backdrop { z-index: 1800; }
.modal { z-index: 1810; }
.mnav, .mnav-backdrop { z-index: 1700; }

/* ------------------------------------------------ 30. brand mark swap */
/* Two PNGs with transparent backgrounds: white ink over the dark hero,
   black ink once the header sticks to a white page.                    */
.brand { position: relative; }
.brand img { height: 52px; width: auto; transition: height .45s, opacity .35s; }
.brand__dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.site-head.is-stuck .brand__light { opacity: 0; }
.site-head.is-stuck .brand__dark  { opacity: 1; }
.site-head.is-stuck .brand img { height: 44px; }

.foot-logo, .a-side .logo, .auth-art .logo { filter: none; }
.pl-logo { filter: none; }

/* Small square media frames (sidebar thumbnails). */
.mframe--sm { border-radius: 10px; }

/* ---------------------------------------------------- 31. brand sizing */
.brand img { height: 62px; }
.site-head.is-stuck .brand img { height: 50px; }

@media (max-width: 720px) {
  .brand img { height: 48px; }
  .site-head.is-stuck .brand img { height: 42px; }
}

/* ------------------------------------------- 32. animation cost control */
/* Everything that runs forever has to be cheap: composited transforms only,
   and nothing keeps animating once it is no longer visible.               */

/* A 70vw blurred layer re-rasterises every frame — the radial gradient is
   already soft enough without an actual blur filter. */
.hero__glow { filter: none; will-change: transform; }

/* Skeletons stop working the moment their media has landed. */
.mframe.is-filled .mframe__skeleton { animation: none; }
.mframe.is-error .mframe__skeleton::before { animation-duration: 5s; }
.mframe.is-filled .mframe__wing { display: none; }

.flybook, .flybook__y { will-change: transform; }
.marquee__track { will-change: transform; }

/* Backdrop blur only once the bar is actually stuck over content. */
.site-head:not(.is-stuck) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ------------------------------------------ 33. renderer budget, part 2 */
/* The film-grain overlay used mix-blend-mode over every photograph, which
   forced the whole page to recomposite on each frame. Dropped entirely.  */
.mframe__grain { display: none; }

/* mask-image on a full-height section is a per-frame compositing cost.
   The same soft-edged dot field, painted with plain gradients instead.  */
.bg-dots::after {
  -webkit-mask-image: none; mask-image: none;
  background-image:
    radial-gradient(ellipse 62% 62% at 50% 50%, rgba(255, 255, 255, 0) 38%, var(--paper) 76%),
    radial-gradient(rgba(11, 62, 104, .11) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px;
  opacity: .5;
}
.section--paper.bg-dots::after,
.section--paper .bg-dots::after { --paper: var(--paper-2); }

.site-foot::before { -webkit-mask-image: none; mask-image: none; opacity: .07; }

/* Nothing in the preloader keeps animating once it is out of the way. */
body.is-loaded #preloader, body.is-loaded #preloader * { animation: none !important; }

/* will-change only where an element genuinely animates continuously. */
.marquee__track { will-change: auto; }

/* -------------------------------------------- 34. photograph depth */
/* Quiet depth on every photograph, without a blend-mode overlay. */
.mframe::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16),
              inset 0 -70px 90px -70px rgba(4, 20, 36, .55);
}
.banner__bg .mframe::after, .parax__bg .mframe::after, .modal-side .mframe::after { box-shadow: none; }

/* ------------------------------------------------ 36. modal-open state */
/* Corner controls step out of the way while the booking modal is open. */
body.modal-open .float-stack, body.modal-open #toTop { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* Let the photograph read through the booking modal's side panel. */
.modal-book .modal-side__scrim {
  background: linear-gradient(160deg, rgba(5, 25, 44, .84), rgba(14, 111, 184, .6) 58%, rgba(245, 133, 31, .38));
}


/* ==========================================================================
   PART B — refinement pass
   Typography, corner choreography, the parachute landing, parallax
   legibility, richer image treatments and a proper testimonials design.
   ========================================================================== */

/* --------------------------------------------------- B1. type system */
/* Bricolage Grotesque carries the personality, Manrope does the reading,
   Space Grotesk handles labels and numbers like an instrument panel.    */
:root {
  --ff-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ff-label:   'Space Grotesk', ui-monospace, 'Segoe UI', sans-serif;
}

body { font-family: var(--ff-body); letter-spacing: -.004em; }

h1, h2, h3, h4, h5, .display {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: -.032em;
}
h1, .h1 { font-weight: 800; line-height: 1.03; }
h2, .h2 { font-weight: 700; line-height: 1.07; }
h3, .h3 { font-weight: 700; letter-spacing: -.02em; }

.kicker { font-family: var(--ff-label); font-size: .7rem; font-weight: 600; letter-spacing: .26em; }

/* Numbers and micro-labels get the technical face. */
.counter, .stat b, .stat span, .parax-stats b, .parax-stats span,
.hero__meta b, .hero__meta span, .post-meta, .exp-card__meta,
.pill, .crumb, .scroll-hint, .ws_caption, .form-note, .sticky-step small {
  font-family: var(--ff-label);
}
.hero__meta b { font-weight: 700; letter-spacing: -.02em; }

.btn-x, .link-x, .nav-x a, .faq-q { font-family: var(--ff-display); }
.nav-x a { font-weight: 600; font-size: .95rem; letter-spacing: -.012em; }
.lead { letter-spacing: -.008em; }

/* ------------------------------- B2. corner choreography (definitive) */
/* The quick-contact bubbles sit low. They lift out of the way only while
   the booking button is airborne with its canopy open; once it lands and
   packs the chute away, they drop back down.                            */
.float-stack {
  left: auto; right: 22px; bottom: 96px;
  transition: bottom .75s var(--ease-glide);
}
#toTop { left: 22px; bottom: 22px; }

#flyBook.is-flying:not(.is-landed) ~ .float-stack { bottom: 200px; }

@media (max-width: 720px) {
  .float-stack { left: auto; right: 14px; bottom: 84px; }
  #toTop { left: 14px; bottom: 14px; }
  #flyBook.is-flying:not(.is-landed) ~ .float-stack { bottom: 176px; }
}

/* ---------------------------------------- B3. the landing / chute pack */
.flybook__canopy { transition: transform .95s cubic-bezier(.2, 1.4, .4, 1) .12s, opacity .5s; }

/* Airborne: canopy open overhead. */
.flybook.is-flying .flybook__canopy { transform: translateX(-50%) scale(1); opacity: 1; }

/* Touched down: the canopy collapses down behind the button and packs away. */
.flybook.is-flying.is-landed .flybook__canopy {
  transform: translateX(-50%) translateY(38px) scale(.16) rotate(-10deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.55, -.04, .3, 1), opacity .55s ease .3s;
}
.flybook.is-flying.is-landed .flybook__lines { opacity: 0; transition: opacity .35s; }

/* Idle motion drops from a glide-sway to a small settled bob. */
.flybook.is-flying.is-landed .flybook__craft { animation: landedBob 6s ease-in-out infinite; }
@keyframes landedBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1deg); }
}

/* A quiet pulse marks the packed, parked state. */
.flybook__craft::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid rgba(27, 138, 217, .5); opacity: 0; pointer-events: none;
}
.flybook.is-landed .flybook__craft::after { animation: packPulse 3.6s ease-out infinite; }
@keyframes packPulse {
  0%        { opacity: .5; transform: scale(1); }
  70%, 100% { opacity: 0;  transform: scale(1.3); }
}

/* ---------------------------------------------- B4. parallax legibility */
/* Copy over photography has to survive whatever image the admin uploads,
   so the scrim is deliberately heavy on the reading side.               */
.parax__scrim {
  background:
    linear-gradient(112deg, rgba(3, 14, 26, .94) 0%, rgba(4, 30, 54, .88) 42%,
                    rgba(8, 45, 78, .7) 74%, rgba(226, 49, 39, .3) 100%),
    linear-gradient(0deg, rgba(3, 14, 26, .55), transparent 60%);
}
.parax h2, .parax h3 { text-shadow: 0 6px 34px rgba(0, 8, 18, .55); }
.parax .lead, .parax p, .parax li, .parax span {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 16px rgba(0, 8, 18, .6);
}
.parax .kicker { color: rgba(255, 255, 255, .9); }
.parax-stats span { color: rgba(255, 255, 255, .84); }
.parax-stats b { text-shadow: none; }

.banner .lead { color: rgba(255, 255, 255, .9); text-shadow: 0 2px 16px rgba(0, 8, 18, .5); }
.banner h1 { text-shadow: 0 8px 40px rgba(0, 12, 24, .45); }
.hero .lead { text-shadow: 0 2px 18px rgba(0, 12, 24, .55); }

/* ------------------------------------------------- B5. form controls */
.form-x .form-control, .form-x .form-select { font-family: var(--ff-body); }

/* Native date fields look like an afterthought — this makes them match. */
.form-x input[type="date"] {
  position: relative;
  -webkit-appearance: none; appearance: none;
  font-family: var(--ff-label); font-size: .92rem; letter-spacing: .01em;
  color: var(--ink); cursor: pointer;
  padding: .8rem 2.9rem .8rem 1rem;
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20fill='none'%20stroke='%230e6fb8'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Crect%20x='2.8'%20y='3.8'%20width='14.4'%20height='13.4'%20rx='2.6'/%3E%3Cpath%20d='M6.4%202.2v3M13.6%202.2v3M2.8%208.2h14.4'/%3E%3C/svg%3E");
}
.form-x input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.form-x input[type="date"]::-webkit-datetime-edit { padding: 0; }
.form-x input[type="date"]:hover { border-color: #c9dceb; }

/* Matching chevron for the selects. */
.form-x .form-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.9rem;
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20fill='none'%20stroke='%230e6fb8'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%207l4.5%204.5L13.5%207'/%3E%3C/svg%3E");
}

/* Room to breathe under the booking form. */
.modal-book .modal-body { padding: 2.4rem 2.4rem 3.2rem; }
.modal-book .modal-content { border-radius: 30px; }
.modal-book .form-tail {
  margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  font-family: var(--ff-label); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.modal-book .form-tail i { color: var(--orange); }
@media (max-width: 991px) { .modal-book .modal-body { padding: 1.9rem 1.5rem 2.6rem; } }

/* --------------------------------------------------- B6. mobile drawer */
.mnav {
  padding: 1.35rem 1.5rem 2.6rem;
  display: flex; flex-direction: column;
  background: #0a0e14;
}
.mnav a { display: flex; padding: 0; border-bottom: 0; font-size: inherit; }
.mnav a:hover { padding-left: 0; }

.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mnav__logo { width: 130px; height: auto; }
.mnav-close {
  position: static; width: 44px; height: 44px; border-radius: 13px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.1rem;
  display: grid; place-items: center; flex-shrink: 0; transition: background .3s;
}
.mnav-close:hover { background: rgba(255, 255, 255, .17); }

.mnav__links a {
  align-items: center; gap: .9rem; padding: .88rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--ff-display); font-size: 1.22rem; font-weight: 600;
  color: #fff; letter-spacing: -.02em;
}
.mnav__num {
  font-family: var(--ff-label); font-size: .66rem; letter-spacing: .14em;
  color: rgba(255, 255, 255, .3); width: 22px; flex-shrink: 0;
}
.mnav__links a i {
  margin-left: auto; font-size: .9rem; opacity: 0;
  transform: translateX(-8px); transition: .35s var(--ease-glide);
}
.mnav__links a:hover i, .mnav__links a.is-active i { opacity: 1; transform: none; }
.mnav__links a:hover .mnav__label,
.mnav__links a.is-active .mnav__label { color: var(--yellow); }
.mnav__links a.is-active .mnav__num { color: var(--orange); }

.mnav__heading {
  font-family: var(--ff-label); font-size: .64rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255, 255, 255, .32); margin: 1.7rem 0 .1rem;
}
.mnav__links--small a { font-size: .98rem; font-weight: 500; padding: .62rem 0; color: rgba(255, 255, 255, .74); }

.mnav__cta { margin-top: 1.9rem; }
.mnav__contact { display: grid; gap: .55rem; margin-top: 1.7rem; font-size: .9rem; }
.mnav__contact a { align-items: center; gap: .6rem; color: rgba(255, 255, 255, .7); }
.mnav__contact a i { color: var(--orange); }
.mnav__contact a:hover { color: #fff; }
.mnav .soc { margin-top: 1.6rem; }

/* Header row on tablet and phone: brand left, controls hard right. */
@media (max-width: 1100px) {
  .head-cta { margin-left: auto; }
  .nav-toggle { order: 3; }
}

/* ------------------------------------------- B7. image treatments */
/* Wrappers that add character around a .mframe without touching it. */

.imgw { position: relative; }
.imgw > .mframe { position: relative; z-index: 1; }

/* Offset dot field peeking out from behind a corner. */
.imgw--dots::before {
  content: ''; position: absolute; z-index: 0; width: 44%; aspect-ratio: 1;
  background-image: radial-gradient(rgba(14, 111, 184, .3) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}
.imgw--dots.dots-tl::before { left: -1.7rem; top: -1.7rem; }
.imgw--dots.dots-br::before { right: -1.7rem; bottom: -1.7rem; }
.imgw--dots.dots-bl::before { left: -1.7rem; bottom: -1.7rem; }

/* Thin outline shifted off the photo, like a mount board. */
.imgw--outline::after {
  content: ''; position: absolute; z-index: 0; inset: 1.8rem -1.8rem -1.8rem 1.8rem;
  border: 2px solid var(--line); border-radius: var(--r-lg);
}
.imgw--outline.outline-left::after { inset: 1.8rem 1.8rem -1.8rem -1.8rem; }

/* Surveyor's corner brackets in the wing colours. */
.imgw--brackets::before, .imgw--brackets::after {
  content: ''; position: absolute; z-index: 3; width: 70px; height: 70px; pointer-events: none;
}
.imgw--brackets::before {
  top: -11px; left: -11px;
  border-top: 3px solid var(--orange); border-left: 3px solid var(--orange);
  border-radius: 16px 0 0 0;
}
.imgw--brackets::after {
  bottom: -11px; right: -11px;
  border-bottom: 3px solid var(--blue); border-right: 3px solid var(--blue);
  border-radius: 0 0 16px 0;
}

/* A caption chip that sits on the photograph. */
.img-chip {
  position: absolute; z-index: 4; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  font-family: var(--ff-label); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .52rem 1rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.img-chip i { color: var(--orange); font-size: .95rem; }
.img-chip--tr { left: auto; right: 1rem; bottom: auto; top: 1rem; }

/* Extra frame shapes. */
.mframe--notch {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 52px 100%, 0 calc(100% - 52px));
}
.mframe--leaf  { border-radius: 150px 26px 150px 26px; }
.mframe--wing  { border-radius: 26px 150px 26px 150px; }
.mframe--stamp { border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 0 0 10px #fff, var(--shadow-img); }
.mframe--ring  { box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 5px rgba(27, 138, 217, .16), var(--shadow-img); }

/* Colour lifts a touch on hover — no filters heavy enough to cost a frame. */
.mframe--duo .mframe__media { filter: saturate(.88) contrast(1.02); transition: filter .8s ease, opacity .9s ease, transform 1.2s var(--ease-glide); }
.mframe--duo:hover .mframe__media { filter: saturate(1.16) contrast(1.06); }

/* Curtain wipe: the photo is uncovered when its block reveals. */
.mframe--curtain::before {
  content: ''; position: absolute; inset: 0; z-index: 3; background: var(--ink);
  transform-origin: right; transition: transform 1.15s var(--ease-glide) .15s;
}
.is-revealed .mframe--curtain::before,
.is-revealed.mframe--curtain::before { transform: scaleX(0); }

/* ---------------------------------------------- B8. section furniture */
/* A big ghosted word behind a heading — editorial, costs nothing. */
.ghost-word {
  position: absolute; left: 50%; top: -.35em; transform: translateX(-50%);
  font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(3.6rem, 12vw, 10rem); letter-spacing: -.05em;
  color: var(--paper-3); opacity: .8; white-space: nowrap; pointer-events: none; z-index: 0;
}
.sec-head { position: relative; }
.sec-head > * { position: relative; z-index: 1; }

/* Dashed flight path linking a section's blocks together. */
.deco-path { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco-path svg { width: 100%; height: 100%; }
.deco-path path {
  fill: none; stroke: rgba(14, 111, 184, .3); stroke-width: 2; stroke-dasharray: 9 11;
  stroke-linecap: round;
}

/* Cards get an asymmetric corner and a dotted tell on hover. */
.card-x, .feat, .quote-card, .info-tile { border-radius: 26px 26px 26px 8px; }
.feat::after {
  content: ''; position: absolute; right: 1.15rem; bottom: 1.15rem; z-index: 0;
  width: 40px; height: 40px; border-radius: 12px; opacity: 0;
  background-image: radial-gradient(rgba(11, 62, 104, .2) 1.4px, transparent 1.4px);
  background-size: 9px 9px; transition: opacity .5s;
}
.feat:hover::after { opacity: 1; }
.section--dark .feat::after { background-image: radial-gradient(rgba(255, 255, 255, .22) 1.4px, transparent 1.4px); }

/* ------------------------------------------------- B9. testimonials */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem;
  padding: 1.6rem 1.9rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
  background: #fff; border: 1px solid var(--line);
  border-radius: 26px 26px 26px 8px; box-shadow: var(--shadow);
}
.trust__score { display: flex; align-items: baseline; gap: .55rem; }
.trust__score b {
  font-family: var(--ff-display); font-weight: 800; font-size: 3rem; line-height: 1;
  color: var(--ink); letter-spacing: -.04em;
}
.trust__score span { font-family: var(--ff-label); font-size: .78rem; color: var(--muted-2); }
.trust__stars { color: var(--yellow); font-size: 1.05rem; letter-spacing: .18em; }
.trust__sep { width: 1px; align-self: stretch; background: var(--line); }
.trust__item b {
  display: block; font-family: var(--ff-display); font-size: 1.35rem;
  line-height: 1.15; color: var(--ink); letter-spacing: -.03em;
}
.trust__item span {
  font-family: var(--ff-label); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2);
}
.trust__wing { flex: 1; min-width: 60px; height: 3px; border-radius: 3px; background: var(--grad-wing); opacity: .8; }

/* Offset grid so the cards read as a drifting formation, not a table. */
.tgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tgrid > *:nth-child(3n + 2) { margin-top: 3.2rem; }
.tgrid > *:nth-child(3n + 3) { margin-top: 1.6rem; }
@media (max-width: 992px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid > * { margin-top: 0 !important; }
  .tgrid > *:nth-child(2n) { margin-top: 2.2rem !important; }
}
@media (max-width: 640px) {
  .tgrid { grid-template-columns: 1fr; }
  .tgrid > * { margin-top: 0 !important; }
}

.tcard {
  position: relative; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  border-radius: 28px 28px 28px 6px;
  padding: 2.5rem 1.85rem 1.6rem;
  transition: transform .55s var(--ease-glide), box-shadow .55s, border-color .55s;
}
.tcard::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--grad-wing); transform: scaleX(.2); transform-origin: left;
  transition: transform .75s var(--ease-glide);
}
.tcard:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; }
.tcard:hover::before { transform: scaleX(1); }

.tcard__mark {
  position: absolute; right: 1.1rem; top: .1rem; z-index: 0;
  font-family: var(--ff-display); font-weight: 800; font-size: 6.5rem; line-height: 1;
  color: var(--paper-3); transition: color .55s;
}
.tcard:hover .tcard__mark { color: #e4eef7; }

.tcard__stars { position: relative; z-index: 1; color: var(--yellow); letter-spacing: .18em; font-size: .88rem; margin-bottom: .85rem; }
.tcard p { position: relative; z-index: 1; font-size: 1rem; line-height: 1.78; color: var(--ink-2); margin: 0; }

.tcard__who {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .85rem;
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--line);
}
.tcard__av {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 700; color: #fff;
  background: var(--grad-btn);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(27, 138, 217, .2);
}
.tcard__who b { display: block; font-family: var(--ff-display); font-size: .98rem; color: var(--ink); line-height: 1.3; letter-spacing: -.02em; }
.tcard__who small { display: block; font-size: .8rem; color: var(--muted-2); }
.tcard__idx { margin-left: auto; font-family: var(--ff-label); font-size: .7rem; letter-spacing: .18em; color: var(--muted-2); }

/* The quote-card class is retired — kept as an alias so nothing breaks. */
.quote-card { padding: 2.3rem 1.85rem; }

/* --------------------------------------------------- B10. odds & ends */
.foot-admin {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: .75rem;
  font-family: var(--ff-label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.foot-admin:hover { color: var(--yellow); }
.foot-admin i { font-size: .85rem; }

/* Section heads that carry a step number. */
.sec-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  font-family: var(--ff-label); font-weight: 700; font-size: .9rem;
  color: var(--blue-d); background: var(--paper-3);
}

/* The stacked composition reserves padding for its inset, so a chip pinned
   to the wrapper needs to come back inside the photograph's edge. */
.stack .img-chip--tr { right: 3.2rem; top: 1.1rem; }
.stack .img-chip:not(.img-chip--tr) { left: 1.1rem; bottom: 4.6rem; }

/* Date field sits in a narrow column — keep the value from clipping. */
.form-x input[type="date"] { font-size: .88rem; padding-right: 2.5rem; background-position: right .75rem center; }

/* Let more of the photograph read through the booking modal's side panel. */
.modal-book .modal-side__scrim {
  background: linear-gradient(160deg, rgba(5, 25, 44, .78), rgba(14, 111, 184, .5) 58%, rgba(245, 133, 31, .3));
}

/* ------------------------------- B11. decoration guards on small screens */
/* The offset outlines, dot fields and brackets are deliberately outside the
   photograph. On a phone there is no margin to spare, so they stand down. */
.stack__badge--right { left: auto; right: -1rem; }

@media (max-width: 900px) {
  .imgw--outline::after { display: none; }
  .imgw--dots::before { width: 34%; }
  .imgw--brackets::before, .imgw--brackets::after { width: 46px; height: 46px; }
}
@media (max-width: 720px) {
  .imgw--dots::before { display: none; }
  .imgw--brackets::before { top: -6px; left: -6px; }
  .imgw--brackets::after { bottom: -6px; right: -6px; }
  .stack__badge--right { left: -.4rem; right: auto; }
  .ghost-word { font-size: clamp(2.8rem, 17vw, 5rem); }
  .img-chip { font-size: .62rem; padding: .45rem .8rem; }
  .tcard { padding: 2.2rem 1.4rem 1.4rem; }
  .trust { padding: 1.3rem 1.3rem; gap: 1.1rem 1.6rem; }
  .trust__sep { display: none; }
  .trust__score b { font-size: 2.4rem; }
}


/* ==========================================================================
   PART C — design system pass
   One photographic house style, a scrollable booking modal, a testimonial
   slider, and the motion layer that ties the whole thing together.
   ========================================================================== */

/* ------------------------------------------------- C1. Font Awesome fit */
.fa-solid, .fa-regular, .fa-brands { line-height: 1; }

/* A north-east arrow, built from the plain one — FA Free has no bare glyph. */
.ico-ne { transform: rotate(-45deg); }
.btn-x:hover .ico-ne,
.flybook__btn:hover .ico-ne { transform: rotate(-45deg) translateX(3px); }

/* ------------------------------------ C2. booking modal: make it scroll */
/* The form sits inside a .row/.col, which severs Bootstrap's flex chain to
   the scroll container — so the body grew past the dialog and the submit
   button became unreachable. This rebuilds the chain explicitly.        */
.modal-book .modal-dialog { max-height: calc(100dvh - 2rem); }
.modal-book .modal-content {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 2rem); overflow: hidden;
}
.modal-book .modal-content > .row { flex: 1 1 auto; min-height: 0; }
.modal-book .modal-content > .row > [class*='col-'] { display: flex; min-height: 0; max-height: 100%; }
.modal-book .modal-content > .row > .col-lg-5 { overflow: hidden; }
.modal-book .modal-side { flex: 1 1 auto; }
.modal-book .modal-body {
  flex: 1 1 auto; min-height: 0; width: 100%;
  /* Bootstrap's .row wraps, which breaks a pure percentage height chain, so
     the body is capped against the viewport directly — same figure as the
     dialog, so it never exceeds it and always scrolls inside it. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
@supports not (height: 100dvh) {
  .modal-book .modal-dialog, .modal-book .modal-content, .modal-book .modal-body { max-height: calc(100vh - 2rem); }
}
.modal-book .modal-body::-webkit-scrollbar { width: 8px; }
.modal-book .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-book .modal-body::-webkit-scrollbar-thumb {
  background: #cfdde9; border-radius: 99px; border: 2px solid #fff;
}

/* No fade at the foot of the form — it only washed out the trust row.
   The scrollbar is the affordance. */
.modal-book .btn-close { z-index: 12; }

/* ============================================ C3. the photography system */
/* Unity comes from one shared corner language, one shadow scale and one
   hover behaviour. Variety comes from composition — size, crop, overlap —
   not from giving every picture a different border.                     */
:root {
  --img-r: 26px;   /* three soft corners… */
  --img-r-cut: 6px; /* …and one clipped, matching the cards and the logo mark */
}

.mframe {
  border-radius: var(--img-r) var(--img-r) var(--img-r) var(--img-r-cut);
  background: var(--paper-3);
}
.mframe__media { transition: opacity .9s ease, transform 1.1s var(--ease-glide), filter .8s ease; }

/* One rim, everywhere. No blend modes, no per-image decoration. */
.mframe::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2),
              inset 0 -60px 80px -70px rgba(4, 20, 36, .5);
}

/* Three elevations, and that is the whole scale. */
.mframe--flat    { box-shadow: none; }
.mframe--soft    { box-shadow: var(--shadow); }
.mframe--feature { box-shadow: var(--shadow-img); }

/* Standard hover: the picture leans in, the frame lifts a little. */
.mframe--hover { transition: transform .7s var(--ease-glide), box-shadow .7s; }
.mframe--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.mframe--hover:hover .mframe__media { transform: scale(1.055); }
.mframe--duo .mframe__media { filter: saturate(.92) contrast(1.02); }
.mframe--duo:hover .mframe__media { filter: saturate(1.12) contrast(1.05); }

/* The one signature shape, used once per page on a portrait feature. */
.mframe--arch { border-radius: 240px 240px var(--img-r) var(--img-r-cut); }

/* A single wing hairline along the top — the only decoration a photo gets,
   and only on the lead image of a section. */
.mframe--accent::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 4;
  background: var(--grad-wing);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-glide) .25s;
}
.is-revealed .mframe--accent::before, .mframe--accent.is-filled::before { transform: scaleX(1); }

/* Retired shapes — kept so old markup cannot break, no longer used. */
.mframe--pill, .mframe--blade, .mframe--leaf, .mframe--wing, .mframe--notch {
  border-radius: var(--img-r) var(--img-r) var(--img-r) var(--img-r-cut);
  clip-path: none;
}
.mframe--stamp, .mframe--ring { box-shadow: var(--shadow-img); }
.imgw--outline::after, .imgw--brackets::before, .imgw--brackets::after { display: none; }

/* The one remaining flourish: a dot field behind a lead composition. */
.imgw--dots::before {
  background-image: radial-gradient(rgba(14, 111, 184, .26) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  width: 38%;
}

/* Tilt wrapper — transform lives on the wrapper so the frame keeps its own. */
[data-tilt] { transition: transform .7s var(--ease-glide); transform-style: preserve-3d; }

/* ================================================ C4. headline word reveal */
.sw {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.sw__i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s var(--ease-glide);
}
[data-split].is-revealed .sw__i { transform: none; }
@media (prefers-reduced-motion: reduce) { .sw__i { transform: none; } }

/* --------------------------------------------------- C5. scroll progress */
#scrollBar {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 1002;
  background: var(--grad-wing);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ================================================ C6. testimonial slider */
.tslider {
  position: relative;
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: start;
}

.tslider__stage {
  position: relative;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 32px 32px 32px var(--img-r-cut);
  padding: clamp(2rem, 3.4vw, 3.2rem);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tslider__stage::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--grad-wing);
}

.tslide {
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .8s var(--ease-glide), visibility .7s;
}
.tslide.is-active { opacity: 1; visibility: visible; transform: none; }
.is-rev .tslide:not(.is-active) { transform: translateY(-26px); }

.tslide__mark {
  font-family: var(--ff-display); font-weight: 800; font-size: 4.6rem; line-height: .7;
  color: transparent;
  background: var(--grad-wing); -webkit-background-clip: text; background-clip: text;
  opacity: .45; margin-bottom: .4rem;
}
.tslide__stars { color: var(--yellow); letter-spacing: .2em; font-size: .95rem; margin-bottom: 1rem; }
.tslide blockquote {
  margin: 0; font-family: var(--ff-display); font-weight: 500;
  font-size: clamp(1.12rem, 1.7vw, 1.5rem); line-height: 1.55;
  letter-spacing: -.02em; color: var(--ink);
}
.tslide__who { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.6rem; }
.tslide__av {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: #fff;
  background: var(--grad-btn);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(27, 138, 217, .2);
}
.tslide__who b { display: block; font-family: var(--ff-display); font-size: 1.02rem; color: var(--ink); letter-spacing: -.02em; }
.tslide__who small { color: var(--muted-2); font-size: .84rem; font-family: var(--ff-label); }

/* The rail doubles as pagination and as a cast list. */
.tslider__rail { display: grid; gap: .45rem; }
.trail {
  position: relative; display: flex; align-items: center; gap: .8rem;
  width: 100%; text-align: left; cursor: pointer;
  padding: .8rem .9rem 1rem; border-radius: 18px 18px 18px var(--img-r-cut);
  border: 1px solid transparent; background: transparent;
  transition: background .4s, border-color .4s, transform .4s var(--ease-glide);
}
.trail:hover { background: #fff; border-color: var(--line); transform: translateX(3px); }
.trail.is-active { background: #fff; border-color: transparent; box-shadow: var(--shadow); }

.trail__av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 700; font-size: .92rem;
  color: var(--blue-d); background: var(--paper-3);
  transition: background .4s, color .4s;
}
.trail.is-active .trail__av { background: var(--grad-btn); color: #fff; }
.trail__meta { min-width: 0; }
.trail__meta b {
  display: block; font-family: var(--ff-display); font-size: .92rem; color: var(--ink);
  letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trail__meta small { color: var(--muted-2); font-size: .76rem; font-family: var(--ff-label); }

.trail__bar {
  position: absolute; left: .9rem; right: .9rem; bottom: .5rem; height: 2px;
  border-radius: 2px; background: var(--paper-3); overflow: hidden; opacity: 0;
  transition: opacity .3s;
}
.trail.is-active .trail__bar { opacity: 1; }
.trail__bar i {
  display: block; height: 100%; border-radius: 2px; background: var(--grad-wing);
  transform-origin: left; transform: scaleX(0);
}
.trail.is-active .trail__bar i { animation: trailFill linear forwards; animation-duration: var(--t-delay, 7s); }
@keyframes trailFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tslider__nav { grid-column: 1 / 2; display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.tslider__nav button {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; font-size: .9rem;
  transition: .35s var(--ease-glide);
}
.tslider__nav button:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.tslider__count { font-family: var(--ff-label); font-size: .82rem; color: var(--muted-2); letter-spacing: .12em; }
.tslider__count b { color: var(--ink); font-size: 1.05rem; }

@media (max-width: 900px) {
  .tslider { grid-template-columns: 1fr; }
  .tslider__stage { min-height: 400px; }
  .tslider__rail {
    grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory;
  }
  .trail { scroll-snap-align: start; }
  .tslider__nav { grid-column: 1; }
}
@media (max-width: 560px) {
  .tslider__stage { min-height: 0; padding: 1.6rem; }
}

/* ==================================================== C7. the watch band */
/* Cinema, not a two-column split: the film runs edge to edge behind the
   copy, with the play control as the only thing competing for attention. */
.watch {
  position: relative; overflow: hidden; color: #fff;
  background: var(--ink);
  padding: clamp(5rem, 9vw, 8rem) 0;
}
.watch__film { position: absolute; inset: 0; z-index: 0; }
.watch__film .mframe { height: 100%; border-radius: 0; }
.watch__film .mframe::after { box-shadow: none; }
.watch__film .mframe__media { filter: saturate(.75) contrast(1.05) brightness(.75); }
.watch__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(4, 16, 29, .45), rgba(4, 16, 29, .88) 78%),
    linear-gradient(0deg, rgba(4, 16, 29, .9), transparent 55%);
}
.watch__inner { position: relative; z-index: 3; text-align: center; }
.watch h2 { color: #fff; max-width: 18ch; margin-inline: auto; text-shadow: 0 8px 40px rgba(0, 8, 18, .6); }
.watch .lead { color: rgba(255, 255, 255, .84); max-width: 56ch; margin-inline: auto; text-shadow: 0 2px 16px rgba(0, 8, 18, .6); }

.watch__play {
  position: relative; display: grid; place-items: center;
  width: 108px; height: 108px; margin: 0 auto 2.2rem;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--blue-deep); font-size: 1.7rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  transition: transform .45s var(--ease-glide), background .4s;
}
.watch__play:hover { transform: scale(1.07); background: #fff; }
.watch__play::before, .watch__play::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  animation: watchRing 3s ease-out infinite;
}
.watch__play::after { animation-delay: 1.5s; }
@keyframes watchRing {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.95); opacity: 0; }
}
.watch.is-playing .watch__play,
.watch.is-playing .watch__inner > *:not(.watch__chips) { opacity: 0; pointer-events: none; transition: opacity .5s; }
.watch.is-playing .watch__scrim { opacity: .25; transition: opacity .6s; }
.watch.is-playing .watch__film .mframe__media { filter: none; }

.watch__chips {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.6rem;
}
.watch__chips span {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--ff-label); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.watch__chips i { color: var(--yellow); }

/* ================================================== C8. fun-facts band */
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fact {
  position: relative; text-align: center; padding: 2.3rem 1.2rem 2rem;
  border-radius: 26px 26px 26px var(--img-r-cut);
  background: #fff; border: 1px solid var(--line);
  transition: transform .55s var(--ease-glide), box-shadow .55s;
}
.fact:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.fact__ico {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.3rem;
  color: var(--blue-d); background: var(--paper-3);
  transition: transform .5s var(--ease-glide), background .5s, color .5s;
}
.fact:hover .fact__ico { transform: rotate(-8deg) scale(1.08); background: var(--grad-btn); color: #fff; }
.fact b {
  display: block; font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.1rem, 3.6vw, 3rem); color: var(--ink); letter-spacing: -.04em;
}
.fact b sup { font-size: .45em; vertical-align: super; color: var(--orange); }
.fact span {
  display: block; margin-top: .5rem;
  font-family: var(--ff-label); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2);
}

/* The dashed line that threads the facts together. */
.deco-path path {
  stroke-dasharray: 8 10; stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.6s linear;
}
.deco-path path.is-drawn { stroke-dashoffset: 0; }

/* ------------------------------------------------------ C9. odds & ends */
/* Section heads carry a little more weight now that the type has changed. */
.sec-head h2 { max-width: 22ch; }
.narrow-center h2, .sec-head.narrow-center h2 { margin-inline: auto; }

/* Buttons pick up the same clipped-corner language on their icon chip. */
.link-x i { transition: transform .35s var(--ease-glide); }
.link-x:hover i { transform: translateX(4px); }

@media (max-width: 720px) {
  .watch__play { width: 84px; height: 84px; font-size: 1.35rem; }
  .mframe--arch { border-radius: 150px 150px var(--img-r) var(--img-r-cut); }
}

/* ------------------------------------------ C10. corrections after review */

/* The watch band drives the film from its own control, so the frame's
   built-in play button must not ghost through behind the headline. */
.watch .vplay { display: none; }

/* Stack the slides in one grid cell instead of absolutely positioning them:
   the stage then takes the height of the tallest quote and nothing clips. */
.tslider__stage { display: grid; }
.tslide {
  position: relative; inset: auto;
  grid-area: 1 / 1;
}


/* ==========================================================================
   PART D — angular geometry + editorial type
   One cut-corner shape for every photograph, a serif headline voice, and a
   hero that carries its own weight. Supersedes the soft-corner language and
   the arch from Part C.
   ========================================================================== */

/* --------------------------------------------------------- D1. typeface */
:root {
  --ff-display: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --ff-label:   'Nunito', 'Segoe UI', system-ui, sans-serif;
  --ff-script:  'Lobster Two', 'Segoe Script', cursive;
}

body { font-family: var(--ff-body); font-size: 1.02rem; letter-spacing: 0; line-height: 1.8; }

h1, h2, h3, h4, h5, .display {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -.015em;
}
/* A serif reads larger than a grotesque at the same size, so the scale
   comes down a notch and the leading opens up. */
h1, .h1 { font-size: clamp(2.25rem, 4.7vw, 3.7rem); font-weight: 700; line-height: 1.1; }
h2, .h2 { font-size: clamp(1.8rem, 3.1vw, 2.65rem); font-weight: 600; line-height: 1.18; }
h3, .h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -.01em; }

.kicker {
  font-family: var(--ff-label); font-weight: 800;
  font-size: .72rem; letter-spacing: .24em;
}
.lead { font-size: clamp(1.04rem, 1.25vw, 1.18rem); line-height: 1.85; letter-spacing: 0; }

.btn-x, .link-x, .nav-x a, .faq-q, .tslide blockquote { font-family: var(--ff-body); font-weight: 700; }
.nav-x a { font-size: .96rem; letter-spacing: -.005em; }

/* The script voice. Used sparingly — three or four times in the whole site. */
.script {
  font-family: var(--ff-script); font-style: italic; font-weight: 700;
  letter-spacing: 0; color: var(--orange); line-height: 1.15;
}
.script--lg { font-size: clamp(1.9rem, 3.6vw, 3rem); display: block; }
.script--sky { color: var(--yellow); }

/* Serif numerals look considered; keep the stats on the display face. */
.counter, .stat b, .parax-stats b, .fact b, .trust__score b, .hstat b { font-family: var(--ff-display); font-weight: 700; }
.post-meta, .exp-card__meta, .pill, .crumb, .scroll-hint, .ws_caption,
.form-note, .sticky-step small, .stat span, .fact span, .hstat span {
  font-family: var(--ff-label); font-weight: 700;
}

/* ------------------------------------------------ D2. the cut-corner shape */
/* Every photograph is cut on the top-right and bottom-left — a wing angle,
   repeated at one size, so the pictures read as a set instead of a pile of
   unrelated rectangles and arches.                                        */
:root { --cut: clamp(18px, 2.2vw, 36px); }

.mframe {
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}
/* clip-path swallows box-shadow, so elevation moves to a wrapper filter. */
.mframe--soft, .mframe--feature, .mframe--stamp, .mframe--ring { box-shadow: none; }
.mframe::after { box-shadow: inset 0 -70px 90px -80px rgba(4, 20, 36, .6); }

/* The arch is retired — it opened up too much dead space beside the copy. */
.mframe--arch { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }

/* Cast a shadow that follows the cut. Feature images only — it is a filter. */
.imgw--cast { filter: drop-shadow(0 26px 34px rgba(8, 45, 78, .26)); }
.imgw--cast:hover { filter: drop-shadow(0 34px 44px rgba(8, 45, 78, .32)); }

/* The wing hairline follows the top edge, stopping at the cut. */
.mframe--accent::before { right: var(--cut); }

/* Panels and cards square up to match. */
.card-x, .feat, .tcard, .info-tile, .quote-card, .trust,
.tslider__stage, .trail, .fact, .stat, .faq-item, .modal-book .modal-content {
  border-radius: 4px;
}
.card-x .mframe, .post-card .mframe { clip-path: none; }
.form-x .form-control, .form-x .form-select, .inp { border-radius: 4px; }

/* Gallery tiles keep the cut, so the grid reads as one field of wings. */
.gal-item { border-radius: 0; }
.gal-item .mframe { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

/* -------------------------------------------------- D3. header + phone CTA */
/* The flying button already owns "book", so the bar leads with the phone. */
.head-call {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .72rem 1.35rem; border-radius: 999px;
  font-family: var(--ff-body); font-weight: 800; font-size: .95rem;
  color: #fff; background: var(--grad-btn); white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgba(14, 111, 184, .85);
  transition: transform .35s var(--ease-glide), box-shadow .35s, background .35s;
}
.head-call:hover { color: #fff; transform: translateY(-2px); background: var(--grad-warm); box-shadow: 0 20px 34px -16px rgba(245, 133, 31, .75); }
.head-call i { font-size: 1rem; }
.head-call small {
  display: block; font-size: .6rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .78; line-height: 1;
}
.head-call span { display: block; line-height: 1.15; }
.site-head:not(.is-stuck) .head-call { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
.site-head:not(.is-stuck) .head-call:hover { background: var(--grad-warm); }

@media (max-width: 1100px) { .head-call small { display: none; } }
@media (max-width: 620px) { .head-call span { display: none; } .head-call { padding: .72rem .9rem; } }

/* ------------------------------------------------------------- D4. hero */
.hero {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 4rem) 0 clamp(7rem, 12vw, 10rem);
}
.hero__inner { width: min(1240px, 92%); margin-inline: auto; }
.hero__copy { max-width: 46rem; }
.hero h1 { max-width: 15ch; margin-bottom: .3em; }
.hero__script { margin: 0 0 1.1rem; }
.hero .lead { max-width: 52ch; }

/* Stat strip anchored to the foot of the hero, half-overlapping the page
   below so the two are joined rather than stacked. */
.hero__strip {
  position: absolute; left: 50%; bottom: 0; z-index: 6;
  width: min(1240px, 92%); transform: translate(-50%, 50%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow: 0 30px 60px -30px rgba(8, 45, 78, .45);
}
.hstat {
  background: #fff; padding: 1.5rem 1.2rem 1.35rem; text-align: center;
  transition: background .4s;
}
.hstat:hover { background: var(--paper-2); }
.hstat b {
  display: block; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1;
  color: var(--ink); letter-spacing: -.02em;
}
.hstat b i { font-style: normal; color: var(--orange); }
.hstat span {
  display: block; margin-top: .45rem;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
/* The section that follows makes room for the overlap. */
.after-hero { padding-top: clamp(7rem, 11vw, 10rem); }

@media (max-width: 780px) {
  .hero__strip { grid-template-columns: repeat(2, 1fr); width: 92%; }
  .hstat { padding: 1.1rem .8rem; }
  .after-hero { padding-top: clamp(9rem, 26vw, 12rem); }
}

/* An angular bottom edge instead of the wave — same language as the photos. */
.hero .wing-edge svg, .banner .wing-edge svg { display: none; }
.hero::after, .banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; height: clamp(38px, 5vw, 74px);
  background: var(--paper);
  clip-path: polygon(0 100%, 0 55%, 42% 100%, 100% 22%, 100% 100%);
  pointer-events: none;
}
.banner::after { background: var(--paper); }

/* Slide counter, bottom right of the hero. */
.hero__count {
  position: absolute; right: max(4vw, 1.5rem); bottom: 46%; z-index: 6;
  font-family: var(--ff-label); font-weight: 800; font-size: .78rem;
  letter-spacing: .2em; color: rgba(255, 255, 255, .75);
  display: flex; align-items: center; gap: .7rem;
}
.hero__count i { display: block; width: 46px; height: 2px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; }
.hero__count i::after { content: ''; position: absolute; inset: 0; background: var(--grad-wing); transform-origin: left; animation: heroCount 6.5s linear infinite; }
@keyframes heroCount { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) { .hero__count { display: none; } }

/* --------------------------------------------- D5. home intro collage */
/* Three panels on one grid, sharing gaps and the same cut, so they finish
   each other instead of floating apart. */
.collage {
  display: grid; gap: 14px;
  grid-template-columns: 1.32fr 1fr;
  grid-template-rows: 1.15fr .85fr;
  aspect-ratio: 10 / 10.5;
}
.collage > * { min-width: 0; min-height: 0; }
.collage__a { grid-row: 1 / 3; }
.collage__a .mframe, .collage__b .mframe { height: 100%; }
.collage__c {
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  padding: 1.4rem 1.3rem; background: var(--ink); color: #fff;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.collage__c b {
  font-family: var(--ff-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff;
}
.collage__c b i { font-style: normal; color: var(--yellow); }
.collage__c span {
  font-family: var(--ff-label); font-weight: 700; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .62);
}
.collage__c .script { color: var(--yellow); font-size: 1.15rem; }

@media (max-width: 640px) {
  .collage { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 260px 150px; }
  .collage__a { grid-row: 1 / 2; grid-column: 1 / 3; }
}

/* Compact reason list — replaces four heavy tiles beside the collage. */
.reasons { display: grid; gap: .3rem; margin: 1.8rem 0 2rem; }
.reason {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem .2rem; border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease-glide);
}
.reason:hover { padding-left: .6rem; }
.reason:last-child { border-bottom: 0; }
.reason__ico {
  flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--blue-d); background: var(--paper-3); font-size: 1.05rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .4s, color .4s;
}
.reason:hover .reason__ico { background: var(--grad-btn); color: #fff; }
.reason b { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 1.04rem; color: var(--ink); }
.reason p { margin: .15rem 0 0; font-size: .93rem; color: var(--muted); }

/* ------------------------------------------- D6. the numbers, properly big */
.parax-stats { gap: 2.5rem 2rem; margin-top: 3.5rem; }
.parax-stats b {
  font-size: clamp(3.4rem, 7.5vw, 6.4rem);
  line-height: .92; letter-spacing: -.03em;
  background: none; -webkit-text-fill-color: #fff; color: #fff;
}
.parax-stats b i { font-style: normal; color: var(--yellow); }
.parax-stats span {
  display: block; margin-top: .7rem; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.parax-stats > div { position: relative; padding-top: 1.2rem; border-top: 2px solid rgba(255, 255, 255, .2); }

/* ----------------------------------------------------- D7. parallax bands */
/* The watch band gets the same slow drift as the other feature bands. */
.watch__film { inset: -10% 0; will-change: transform; }

/* A band variant for the sections that used to be flat dark blocks. */
.parax--tight { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.parax .btn-x.btn-light { color: var(--ink); }

/* ------------------------------------------------------------ D8. tidy-up */
.ghost-word { font-family: var(--ff-display); font-weight: 700; opacity: .55; }
.tslide blockquote { font-family: var(--ff-display); font-weight: 500; font-style: italic; line-height: 1.5; }
.tslide__mark { font-family: var(--ff-display); }
.marquee span { font-family: var(--ff-display); font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.mnav__links a, .trail__meta b, .tcard__who b, .quote-card__who b { font-family: var(--ff-display); }
.feat h3, .card-x h3, .reason b { letter-spacing: -.01em; }
.prose { font-size: 1.06rem; line-height: 1.9; }
.prose h2, .prose h3 { font-family: var(--ff-display); }

/* Buttons stay pill-shaped on purpose — a soft counterpoint to the cuts. */
.btn-x, .flybook__btn, .head-call { border-radius: 999px; }

/* ---------------------------------------- D9. hero overflow + furniture */
/* The stat strip has to hang out of the hero, so the hero itself can no
   longer clip. The slider keeps its own clipping, and the glow is sized so
   it cannot spill into the section below. */
.hero { overflow: visible; }
.hero__slider { overflow: hidden; }
.hero__glow { inset: -18% -4% auto auto; width: 58vw; height: 58vh; }
.hero__scrim { overflow: hidden; }

/* The strip and the location marker replace the scroll nudge. */
.hero .scroll-hint { display: none; }

/* The location marker sits under the header, clear of the contact bubbles. */
.hero__count { top: calc(var(--nav-h) + 1.8rem); bottom: auto; }

/* ------------------------------- D10. section edges, corrected */
/* The lopsided wedge read as a mistake. The hero now ends on a straight
   edge — the overhanging stat strip is the transition — and inner banners
   get a single clean diagonal instead. */
.hero::after { display: none; }
.banner::after {
  clip-path: polygon(0 100%, 0 62%, 100% 0, 100% 100%);
  height: clamp(34px, 4.5vw, 66px);
}

/* ------------------------------- D11. stop label styles leaking into stats */
/* The label rules were written as descendant selectors (`.hstat span`), so
   they also matched the counter span nested inside the <b> and shrank every
   number to label size. The number always inherits from its <b>.         */
.hstat b .counter,
.fact b .counter,
.collage__c b .counter,
.parax-stats b .counter,
.trust__score b .counter,
.stat b .counter {
  display: inline;
  margin: 0;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}