/* ==========================================================================
   VELOCITY — Design System : Components
   Reusable across every page. Each block is self-contained so it can become
   a WordPress template part later without restructuring.
   ========================================================================== */

/* ============================ NAVIGATION ================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.nav__inner {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__logo { display: flex; align-items: center; height: 25px; }
.nav__logo svg, .nav__logo img { height: 100%; width: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--sky-58);
  padding-block: 0.35rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--white); }

/* Solid state: once scrolled, or on any page with a light hero */
.nav.is-solid {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--silver);
}
.nav.is-solid .nav__link { color: var(--ink-55); }
.nav.is-solid .nav__link:hover,
.nav.is-solid .nav__link[aria-current="page"] { color: var(--midnight); }

.nav__logo .logo--light { display: block; }
.nav__logo .logo--dark  { display: none; }
.nav.is-solid .logo--light { display: none; }
.nav.is-solid .logo--dark  { display: block; }

/* ============================== BUTTONS ================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--ff-display);
  font-size: var(--fs-small); font-weight: 600;
  padding: 0.92rem 1.7rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }


.btn--gold { background: var(--gold); color: var(--midnight); }
.btn--gold:hover { background: #d8bb84; }
.btn--ghost { border-color: var(--ink-14); color: var(--midnight); }
.btn--ghost:hover { border-color: var(--midnight); }
.btn--onDark { border-color: var(--sky-16); color: var(--white); }
.btn--onDark:hover { border-color: var(--white); background: var(--sky-08); }



/* ============================== CARDS ==================================== */


/* The recurring precision micro-interaction: a rule that draws in */


.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }


/* One breakpoint for every two-column block on the page. The hero, the six
   areas and the contact block all stack at 940px, so this one does too —
   otherwise the page came apart column by column across the tablet range,
   with the Transformation Study still in two ~400px columns while everything
   above and below it had already gone full width. */
@media (max-width: 940px) { .grid--2 { grid-template-columns: 1fr; } }

/* Section headings get the width the page actually has. 720px forced a
   short heading onto two lines while two-fifths of the row sat empty. */
.shead { max-width: var(--measure-head); margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.shead p { margin-top: 1.05rem; }

/* Page hero used by every interior page (light, structural) */



/* ============================== FOOTER =================================== */
.footer { background: var(--midnight); color: var(--sky-58); padding-block: clamp(56px, 7vw, 84px) 34px; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.6rem;
  padding-bottom: 2.8rem; border-bottom: 1px solid var(--sky-08);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer__logo { height: 23px; margin-bottom: 1.2rem; }
.footer__logo svg, .footer__logo img { height: 100%; width: auto; }
.footer__desc { font-size: var(--fs-small); max-width: 56ch; }
.footer__title {
  font-family: var(--ff-display); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky-38);
  margin-bottom: 1.05rem;
}
.footer__list li { margin-bottom: 0.6rem; }
.footer__list a { font-size: var(--fs-small); transition: color var(--dur-fast) var(--ease); }
.footer__list a:hover { color: var(--white); }
.footer__bottom {
  padding-top: 1.6rem; display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--sky-48);
}

/* ============================ WHATSAPP ==================================
   The always-available contact path, fixed to the bottom right for the whole
   page. It used to live inside the booking form, which meant it was only
   offered to someone who had already scrolled to the end and decided to get
   in touch — exactly the person who needed it least.

   Built in the brand, not in WhatsApp's. The platform green is the one colour
   on this site that belongs to somebody else, and a bright green pill parked
   over a midnight hero undoes a lot of restraint elsewhere. So: midnight
   ground, a gold hairline, the glyph in gold, and the label set in the
   display face with the tracking every other small label on the page carries.
   On hover it fills gold and the contents go midnight, which is exactly what
   .btn--gold does — the same gesture the primary buttons already make.

   The corner radius is --radius rather than a pill, for the reason the token
   itself gives: precision, not softness.

   Recognition then rests on the glyph and the word instead of the colour,
   which is why the label reads WhatsApp rather than something friendlier. */
.wa {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 120;
  display: inline-flex;
  /* Invisible padding. With the frame gone the clickable area would otherwise
     be exactly the glyph, which falls under the 44px a finger needs at the
     smaller sizes. This keeps the target honest without drawing anything. */
  padding: 7px;
  color: var(--gold);
  transition: transform var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
/* No plate behind it, so the glyph has to hold its own edge against whatever
   section it happens to be over — white here, midnight a screen further down.
   The drop shadow follows the shape of the mark rather than a box, which is
   the only reason an unframed icon reads on both. */
.wa svg {
  width: clamp(42px, 3.6vw, 54px);
  height: auto;
  filter: drop-shadow(0 5px 14px rgba(15, 23, 42, 0.34));
}
/* The bubble takes the link's colour so the hover brightness carries it; the
   handset is painted navy outright, which is what stops it changing with
   whatever section happens to be behind the icon. */
.wa__phone { fill: var(--midnight); }
/* Brightness rather than a second colour: any fixed hover colour that worked
   on the light sections would disappear on the dark ones. */
.wa:hover { transform: translateY(-2px); filter: brightness(1.14); }
.wa:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .wa, .wa:hover, .wa:active { transform: none; }
}