/* ==========================================================================
   FAM Tours — components
   Premium navigation, mega menus, footer and the catalogue / experience /
   package page furniture added for the client's new business structure.

   Loaded AFTER styles.css (and after index.html's inline style) so this file
   owns the header and footer outright. Because a media query does not add
   specificity, every responsive rule that belongs to a component defined here
   is also declared here — otherwise the older rules in styles.css would win.
   ========================================================================== */

/* ============================== HEADER ================================== */
.nav{position:absolute;top:0;left:0;right:0;z-index:120}
.nav--solid{position:relative;background:var(--color-background);border-bottom:1px solid rgba(14,27,36,.1)}
.nav--overlay{background:transparent}

.nav__inner{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--space-6);
  width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--space-3) var(--space-8);
}
/* Columns are pinned explicitly: when the menu is display:none below the
   drawer breakpoint it leaves the grid flow entirely, and without this the
   right-hand cluster would slide into the middle column. */
.nav__logo{grid-column:1;justify-self:start;display:inline-flex;align-items:center;color:var(--color-primary)}
.nav__logo img{display:block;height:62px;width:auto}
.nav--overlay .nav__logo{color:var(--color-white)}

.nav__menu{grid-column:2;justify-self:center;display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__menu .nav__link{
  display:inline-flex;align-items:center;gap:.375rem;
  font-family:var(--font-body);font-size:.8125rem;font-weight:400;
  letter-spacing:.06em;line-height:1;
  color:var(--color-secondary);padding:.75rem 0;
  transition:color .35s var(--ease-lux),opacity .35s var(--ease-lux);
}
.nav__menu .nav__link:hover,
.nav__item.is-active>.nav__link{color:var(--color-primary)}
.nav--overlay .nav__menu .nav__link{color:rgba(255,255,255,.82)}
.nav--overlay .nav__menu .nav__link:hover,
.nav--overlay .nav__item.is-active>.nav__link{color:var(--color-white)}

/* The overlay header turns every anchor in the menu white. The dropdown
   panels sit on white, so their contents have to be forced back to ink —
   this needs to out-specify `.nav--overlay .nav__menu a` in styles.css. */
.nav--overlay .nav__panel,
.nav--overlay .nav__panel .nav__panel-link,
.nav--overlay .nav__panel .link-arrow{color:var(--color-primary)}
.nav--overlay .nav__panel .nav__panel-meta,
.nav--overlay .nav__panel .nav__panel-note{color:var(--color-secondary)}
.nav--overlay .nav__panel .nav__panel-link:hover{color:var(--color-accent)}

.nav__caret{width:7px;height:7px;flex-shrink:0;opacity:.7;transition:transform .4s var(--ease-lux)}
.nav__item--menu:hover>.nav__link .nav__caret,
.nav__item--menu:focus-within>.nav__link .nav__caret{transform:rotate(180deg)}

/* a hairline that draws in under the active / hovered top-level item */
.nav__menu .nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:.35rem;height:1px;
  background:var(--color-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-lux);
}
.nav__item:hover>.nav__link::after,
.nav__item.is-active>.nav__link::after{transform:scaleX(1)}
.nav--overlay .nav__menu .nav__link::after{background:var(--color-white)}

.nav__right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--space-4)}
.nav__icon{width:36px;height:36px;display:grid;place-items:center;color:var(--color-secondary);transition:color .3s var(--ease-lux),transform .3s var(--ease-lux)}
.nav--overlay .nav__icon{color:rgba(255,255,255,.82)}
.nav__icon:hover{color:var(--color-primary);transform:translateY(-1px)}
.nav--overlay .nav__icon:hover{color:var(--color-white)}
.nav__cta{
  background:var(--color-primary);color:var(--color-white);
  padding:.8125rem 1.5rem;font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .4s var(--ease-lux),transform .4s var(--ease-lux);
}
.nav--overlay .nav__cta{background:var(--color-white);color:var(--color-primary)}
.nav__cta:hover{background:var(--color-accent);color:var(--color-white);transform:translateY(-1px)}
.nav__toggle{display:none;width:40px;height:40px;place-items:center;color:var(--color-primary)}
.nav--overlay .nav__toggle{color:var(--color-white)}
.nav__sub-toggle{display:none}

/* ---------------------------- dropdown panels --------------------------- */
.nav__panel{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,.5rem);
  z-index:130;
  background:var(--color-white);
  border:1px solid rgba(14,27,36,.1);
  box-shadow:0 28px 60px -30px rgba(14,27,36,.35);
  padding:var(--space-8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease-lux),transform .35s var(--ease-lux),visibility .35s;
}
.nav__item--menu:hover>.nav__panel,
.nav__item--menu:focus-within>.nav__panel,
.nav__item--menu.is-open>.nav__panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
}
/* invisible bridge so the pointer can travel from the link into the panel */
.nav__item--menu>.nav__panel::before{content:'';position:absolute;left:0;right:0;top:-1rem;height:1rem}

.nav__panel--list{min-width:17rem}
.nav__panel--wide{
  width:min(1220px, 94vw);
  max-width:1220px;
  min-width:auto;
  left:50%;
  padding:var(--space-6);
  border-radius:12px;
  box-shadow:0 32px 64px -20px rgba(14,27,36,.25);
  border:1px solid rgba(14,27,36,.08);
}
.nav__panel--packages{min-width:38rem}

.nav__item--wide{position:static}
.nav__item--wide>.nav__panel{left:50%}

/* --- WaterSports Mega Menu Grid --- */
.nav__panel-inner--ws{
  display:grid;
  grid-template-columns:250px 1fr 180px;
  gap:var(--space-6);
  align-items:stretch;
}

/* Left Hero Card */
.nav__ws-card{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:380px;
  background:var(--color-primary);
  color:var(--color-white);
  padding:var(--space-6);
}
.nav__ws-card-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 1.2s var(--ease-lux);
}
.nav__ws-card:hover .nav__ws-card-bg{
  transform:scale(1.05);
}
.nav__ws-card-body{
  position:relative;
  z-index:2;
}
.nav__ws-kicker{
  display:block;
  font-family:var(--font-body);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:.35rem;
}
.nav__ws-lead{
  font-family:var(--font-display);
  font-size:1.625rem;
  font-weight:400;
  line-height:1.12;
  color:var(--color-white);
  margin-bottom:.45rem;
}
.nav__ws-desc{
  font-family:var(--font-body);
  font-size:.75rem;
  line-height:1.55;
  font-weight:350;
  color:rgba(255,255,255,.82);
  margin-bottom:var(--space-5);
}
.nav__ws-actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.nav__ws-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .95rem;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px;
  color:var(--color-white);
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all .35s var(--ease-lux);
}
.nav__ws-cta:hover{
  background:var(--color-white);
  color:var(--color-primary);
  border-color:var(--color-white);
}
.nav__ws-wa{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#25D366;
  color:#FFFFFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(37,211,102,.35);
  transition:transform .35s var(--ease-lux),box-shadow .35s var(--ease-lux);
}
.nav__ws-wa:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 6px 18px rgba(37,211,102,.55);
}

/* Center 4 Columns */
.nav__ws-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3) var(--space-5);
  padding:0 var(--space-2);
  border-left:1px solid rgba(14,27,36,.08);
  border-right:1px solid rgba(14,27,36,.08);
}
.nav__panel-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4) var(--space-6)}
.nav__panel--packages .nav__panel-cols{grid-template-columns:repeat(3,1fr)}
.nav__panel-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:var(--space-3);
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(14,27,36,.08);
}
.nav__panel-title .nav__panel-icon{
  color:var(--color-accent);
  display:inline-flex;
  align-items:center;
}
.nav__panel-list{list-style:none;margin:0;padding:0}
.nav__panel-list li+li{margin-top:.125rem}
.nav__panel-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  font-size:.8125rem;
  font-weight:400;
  letter-spacing:.015em;
  color:var(--color-primary);
  padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease-lux),padding-left .3s var(--ease-lux);
}
.nav__panel-link:hover{
  color:var(--color-accent);
  padding-left:.3rem;
}
.nav__panel-arrow{
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .3s var(--ease-lux),transform .3s var(--ease-lux);
  color:var(--color-accent);
  font-size:.75rem;
}
.nav__panel-link:hover .nav__panel-arrow{
  opacity:1;
  transform:translateX(0);
}
.nav__panel-meta{font-size:.6875rem;font-weight:300;color:var(--color-secondary);letter-spacing:.02em;white-space:nowrap}

/* Right Vertical Banner */
.nav__ws-banner{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:380px;
  background:var(--color-primary);
  color:var(--color-white);
  padding:var(--space-5);
  text-decoration:none;
}
.nav__ws-banner-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 1.2s var(--ease-lux);
}
.nav__ws-banner:hover .nav__ws-banner-bg{
  transform:scale(1.06);
}
.nav__ws-banner-body{
  position:relative;
  z-index:2;
}
.nav__ws-banner-text{
  font-family:var(--font-display);
  font-size:1.1875rem;
  font-weight:400;
  line-height:1.2;
  color:var(--color-white);
  display:flex;
  align-items:baseline;
  gap:.35rem;
  transition:color .3s var(--ease-lux);
}
.nav__ws-banner:hover .nav__ws-banner-text{
  color:var(--color-accent);
}
.nav__ws-arrow{
  font-size:1.15rem;
  transition:transform .3s var(--ease-lux);
}
.nav__ws-banner:hover .nav__ws-arrow{
  transform:translate(3px,-3px);
}

/* ============================== MOBILE DRAWER =========================== */
@media (max-width:1100px){
  .nav__inner{padding:var(--space-3) var(--space-6)}
  .nav__logo img{height:52px}
  .nav__menu{
    position:absolute;top:100%;left:0;right:0;
    /* span every column: an absolutely positioned grid child is otherwise
       confined to the grid area it was assigned, which would leave the
       drawer only as wide as the (empty) centre column */
    grid-column:1 / -1;justify-self:stretch;
    /* the grid area sits inside the header's inline padding; pull the drawer
       back out to the viewport edges so it reads as a full-width panel */
    margin-inline:calc(-1 * var(--space-6));
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--color-background);
    border-top:1px solid rgba(14,27,36,.1);
    border-bottom:1px solid rgba(14,27,36,.12);
    padding:var(--space-2) var(--space-6) var(--space-6);
    max-height:calc(100svh - 5rem);overflow-y:auto;
    box-shadow:0 30px 60px -30px rgba(14,27,36,.35);
  }
  .nav__menu.is-open{display:flex}
  .nav--overlay .nav__menu{background:var(--color-primary);border-top-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.14)}
  .nav__item{width:100%;border-bottom:1px solid rgba(14,27,36,.1)}
  .nav--overlay .nav__item{border-bottom-color:rgba(255,255,255,.12)}
  .nav__item:last-child{border-bottom:0}
  .nav__menu .nav__link{
    width:100%;justify-content:space-between;
    padding:var(--space-4) 0;font-size:.9375rem;letter-spacing:.04em;
    color:var(--color-primary);
  }
  .nav--overlay .nav__menu .nav__link{color:rgba(255,255,255,.9)}
  .nav__menu .nav__link::after{display:none}
  .nav__caret{display:none}

  /* accordion toggle for items that own a panel */
  .nav__sub-toggle{
    display:grid;place-items:center;
    position:absolute;right:0;top:.5rem;
    width:2.75rem;height:2.75rem;
    color:var(--color-secondary);
  }
  .nav--overlay .nav__sub-toggle{color:rgba(255,255,255,.7)}
  .nav__sub-toggle svg{transition:transform .4s var(--ease-lux)}
  .nav__item.is-open>.nav__sub-toggle svg{transform:rotate(180deg)}
  .nav__toggle{display:grid}
  /* in the drawer the mega-menu item must be a positioned ancestor again,
     otherwise its accordion toggle anchors to the drawer instead of the row */
  .nav__item--wide{position:relative}

  /* panels become inline accordions */
  .nav__panel{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:none;
    min-width:0;border:0;box-shadow:none;background:transparent;
    padding:0 0 var(--space-4);
  }
  .nav__item--menu:hover>.nav__panel,
  .nav__item--menu:focus-within>.nav__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav__item.is-open>.nav__panel{display:block}
  .nav__item--menu:not(.is-open)>.nav__panel{display:none}
  .nav__panel--wide .nav__panel-inner{display:block}
  .nav__panel-aside{border-right:0;padding-right:0;margin-bottom:var(--space-6)}
  .nav__panel-lead{font-size:1.375rem}
  .nav__panel-note{display:none}
  .nav__panel-cols,
  .nav__panel--packages .nav__panel-cols{grid-template-columns:1fr;gap:var(--space-4)}
  .nav__panel-title{margin-top:var(--space-4)}
  .nav__panel-link{padding:.4rem 0}
  .nav__panel-link .nav__panel-arrow{opacity:.4;transform:none}
  .nav__right{gap:var(--space-3)}
  .nav__cta{padding:.6875rem 1rem}
}
@media (max-width:560px){
  .nav__icon{display:none}
  .nav__cta{padding:.625rem .875rem;font-size:.625rem;letter-spacing:.08em}
  .nav__logo img{height:44px}
}
/* buttons carry a lot of horizontal padding and letter-spacing; tighten them
   on very small screens so long labels cannot force a horizontal scroll */
@media (max-width:480px){
  .btn{padding:1rem 1.25rem;font-size:.6875rem;letter-spacing:.1em}
  .btn--block{padding:1rem}
}

/* ================================ FOOTER ================================ */
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr 1.3fr;gap:var(--space-10)}
.footer__col-title{font-family:var(--font-display);font-size:1.125rem;font-weight:400;letter-spacing:.04em;color:var(--color-primary);margin-bottom:var(--space-4)}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col ul li{margin-bottom:.5rem}
.footer__col ul a{font-size:.8125rem;font-weight:300;color:var(--color-secondary);position:relative;display:inline-block;padding-bottom:2px;transition:color .4s var(--ease-lux)}
.footer__col ul a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--color-accent);transition:width .5s var(--ease-lux)}
.footer__col ul a:hover{color:var(--color-primary)}
.footer__col ul a:hover::after{width:100%}
.footer__brand{max-width:22rem}
.footer__brand p{font-size:.8125rem;line-height:1.8;font-weight:300;color:var(--color-secondary);margin:var(--space-4) 0}
.footer__address{font-size:.8125rem;line-height:1.7;font-weight:300;color:var(--color-secondary);margin-bottom:var(--space-6)}
.footer__address span{display:block}
.footer__tagline{font-family:var(--font-display);font-size:1.0625rem;font-style:italic;color:var(--color-primary)}

@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr 1fr;gap:var(--space-10)}
  .footer__brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:768px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr}
}

/* ====================== SHARED PAGE FURNITURE =========================== */
/* Grid children refuse to shrink below their min-content width by default,
   which pushes narrow viewports into horizontal scroll. */
.intro-head__grid>*,.ws-detail>*,.pkg-grid>*,.svc__grid>*,.cat-strip>*{min-width:0}

/* editorial intro used by every catalogue / service landing page */
.intro-head{padding:var(--space-24) 0 var(--space-12);border-bottom:1px solid rgba(14,27,36,.12)}
.intro-head__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:end}
@media (max-width:900px){
  .intro-head{padding:var(--space-16) 0 var(--space-10)}
  .intro-head__grid{grid-template-columns:1fr;gap:var(--space-8);align-items:start}
}
.intro-head__title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.06;letter-spacing:-.015em;margin-bottom:var(--space-6);max-width:16em}
.intro-head__text{font-size:1.0625rem;line-height:1.75;color:var(--color-secondary);font-weight:300;max-width:34rem}
.intro-head__meta{display:flex;gap:var(--space-10);flex-wrap:wrap;padding-top:var(--space-6)}
.intro-head__stat-num{font-family:var(--font-display);font-size:2rem;font-weight:300;line-height:1;color:var(--color-primary)}
.intro-head__stat-label{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-secondary);margin-top:.35rem}

.cat-body{padding:var(--space-16) 0 var(--space-24)}
.cat-note{
  border-left:2px solid var(--color-accent);background:var(--color-white);
  padding:var(--space-6);margin-bottom:var(--space-12);
  font-size:.9375rem;line-height:1.75;font-weight:300;color:var(--color-secondary);max-width:52rem;
}
.cat-note strong{color:var(--color-primary);font-weight:600}

/* the category strip that sits under a catalogue page head */
.cat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(14,27,36,.12);border:1px solid rgba(14,27,36,.12);margin-top:var(--space-12)}
.cat-strip a{background:var(--color-background);padding:var(--space-6);transition:background .4s var(--ease-lux)}
.cat-strip a:hover{background:var(--color-white)}
.cat-strip__name{font-family:var(--font-display);font-size:1.125rem;color:var(--color-primary);display:block;margin-bottom:.25rem}
.cat-strip__count{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-secondary)}
.cat-strip a.is-current{background:var(--color-white)}
.cat-strip a.is-current .cat-strip__name{color:var(--color-accent)}
@media (max-width:1100px){.cat-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.cat-strip{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cat-strip{grid-template-columns:1fr}}

/* ---------------------------- watersports ------------------------------- */
.ws-group{padding:var(--space-12) 0;border-top:1px solid rgba(14,27,36,.12)}
.ws-group:first-of-type{border-top:0}
.ws-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}
.ws-group__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.25rem)}
.ws-group__count{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-secondary)}

.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(14,27,36,.12);border:1px solid rgba(14,27,36,.12)}
.ws-card{background:var(--color-background);padding:var(--space-8);display:flex;flex-direction:column;min-height:15rem;transition:background .45s var(--ease-lux)}
.ws-card:hover{background:var(--color-white)}
.ws-card__idx{font-size:.625rem;letter-spacing:.2em;color:var(--color-accent);margin-bottom:var(--space-4)}
.ws-card__name{font-family:var(--font-display);font-size:1.5rem;font-weight:400;line-height:1.15;margin-bottom:var(--space-3);color:var(--color-primary)}
.ws-card__text{font-size:.875rem;line-height:1.7;font-weight:300;color:var(--color-secondary);margin-bottom:var(--space-6)}
.ws-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid rgba(14,27,36,.1)}
.ws-card__price{font-size:.8125rem;font-weight:500;color:var(--color-primary)}
.ws-card__price span{font-weight:400;color:var(--color-secondary)}
.ws-card__status{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-secondary)}
.ws-card__go{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.ws-card__go span{transition:transform .4s var(--ease-lux)}
.ws-card:hover .ws-card__go span{transform:translateX(4px)}
@media (max-width:1100px){.ws-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ws-grid{grid-template-columns:1fr}}

/* activity detail */
.ws-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-16);align-items:start;padding-bottom:var(--space-24)}
.ws-detail__body p{font-size:1rem;line-height:1.8;font-weight:300;color:var(--color-secondary);margin-bottom:var(--space-4)}
.ws-detail__body h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,2.2vw,1.75rem);color:var(--color-primary);margin:var(--space-8) 0 var(--space-4)}
.ws-detail__list{list-style:none;margin:0;padding:0}
.ws-detail__list li{position:relative;padding-left:1.1rem;font-size:1rem;line-height:1.8;font-weight:300;color:var(--color-secondary);margin-bottom:.5rem}
.ws-detail__list li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--color-accent)}
@media (max-width:1024px){.ws-detail{grid-template-columns:1fr;gap:var(--space-10)}}

/* ------------------------------ packages -------------------------------- */
.pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(14,27,36,.12);border:1px solid rgba(14,27,36,.12)}
.pkg-card{background:var(--color-background);padding:var(--space-10);display:flex;flex-direction:column;min-height:17rem;transition:background .45s var(--ease-lux)}
.pkg-card:hover{background:var(--color-white)}
.pkg-card__group{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-4)}
.pkg-card__name{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;line-height:1.15;margin-bottom:var(--space-4);color:var(--color-primary)}
.pkg-card__text{font-size:.9375rem;line-height:1.75;font-weight:300;color:var(--color-secondary);margin-bottom:var(--space-6)}
.pkg-card__foot{margin-top:auto;padding-top:var(--space-4);border-top:1px solid rgba(14,27,36,.1);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
@media (max-width:768px){.pkg-grid{grid-template-columns:1fr}}

/* ------------------------- placeholder / coming soon -------------------- */
.placeholder{padding:var(--space-24) 0;border-top:1px solid rgba(14,27,36,.12)}
.placeholder__inner{max-width:44rem}
.placeholder__mark{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-6)}
.placeholder__title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,5vw,4rem);line-height:1.08;letter-spacing:-.015em;margin-bottom:var(--space-6)}
.placeholder__title em{font-style:italic}
.placeholder__text{font-size:1.0625rem;line-height:1.8;font-weight:300;color:var(--color-secondary);margin-bottom:var(--space-8)}
.placeholder__rule{width:46px;height:2px;background:var(--color-accent);margin-bottom:var(--space-8)}
.placeholder__list{list-style:none;margin:0 0 var(--space-10);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.placeholder__list li{font-size:.8125rem;line-height:1.7;font-weight:300;color:var(--color-secondary);padding-top:var(--space-4);border-top:1px solid rgba(14,27,36,.15)}
.placeholder__list strong{display:block;font-weight:500;color:var(--color-primary);margin-bottom:.25rem;font-size:.8125rem}
@media (max-width:768px){.placeholder__list{grid-template-columns:1fr}}

/* a quiet band used for "ready for content" notes on package pages */
.todo{border:1px dashed rgba(14,27,36,.25);padding:var(--space-8);background:rgba(255,255,255,.5);max-width:52rem}
.todo__title{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:var(--space-4)}
.todo ul{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--space-10)}
.todo li{font-size:.875rem;line-height:1.7;font-weight:300;color:var(--color-secondary);margin-bottom:.5rem;break-inside:avoid}
@media (max-width:640px){.todo ul{columns:1}}

/* ==================== HOMEPAGE SERVICE DISCOVERY ======================== */
.svc{background:var(--color-background);padding:var(--space-24) 0 var(--space-32)}
.svc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-12)}
.svc__head-left{max-width:36rem}
.svc__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.015em}

.svc__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-6);
}
.svc__item{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  display:block;
  background:var(--color-primary);
  color:var(--color-white);
  box-shadow:0 20px 40px -15px rgba(14,27,36,.25);
  transition:transform .7s var(--ease-lux),box-shadow .7s var(--ease-lux);
}
.svc__item:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -20px rgba(14,27,36,.38);
}
.svc__item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease-lux),filter 1.3s var(--ease-lux);
}
.svc__item:hover img{transform:scale(1.06)}
.svc__item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,27,36,.12) 0%, rgba(14,27,36,.48) 45%, rgba(14,27,36,.94) 100%);
  transition:opacity .6s var(--ease-lux);
  pointer-events:none;
}
.svc__item:hover::after{opacity:.96}

.svc__body{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-8);
}

.svc__kicker{
  display:block;
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:.5rem;
}
.svc__name{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--color-white);
  margin-bottom:var(--space-3);
}
.svc__text{
  font-family:var(--font-body);
  font-size:.875rem;
  line-height:1.65;
  font-weight:350;
  color:rgba(255,255,255,.82);
  max-width:28rem;
  margin-bottom:var(--space-6);
}

.svc__actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-top:auto;
}
.svc__btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px;
  color:var(--color-white);
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:all .35s var(--ease-lux);
  text-decoration:none;
}
.svc__btn span{transition:transform .4s var(--ease-lux)}
.svc__btn:hover{
  background:var(--color-white);
  color:var(--color-primary);
  border-color:var(--color-white);
}
.svc__btn:hover span{transform:translateX(4px)}

.svc__wa{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#25D366;
  color:#FFFFFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(37,211,102,.35);
  transition:transform .35s var(--ease-lux),box-shadow .35s var(--ease-lux);
}
.svc__wa:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 6px 20px rgba(37,211,102,.6);
}

/* Badge for Coming Soon on Luxury Cars */
.svc__badge{
  position:absolute;
  top:var(--space-6);
  right:var(--space-6);
  z-index:3;
  padding:.4rem .85rem;
  background:rgba(14,27,36,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(179,162,124,.6);
  border-radius:20px;
  font-family:var(--font-body);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  box-shadow:0 8px 16px rgba(0,0,0,.3);
}

/* Asymmetric Grid Sizing */
.svc__item--yachts{
  grid-column:span 7;
  grid-row:span 2;
  min-height:36rem;
}
.svc__item--yachts .svc__name{font-size:clamp(2.25rem,3.4vw,3.25rem)}

.svc__item--water{
  grid-column:span 5;
  min-height:17.25rem;
}
.svc__item--water .svc__name{font-size:clamp(1.625rem,2.2vw,2.125rem)}

.svc__item--cars{
  grid-column:span 5;
  min-height:17.25rem;
}
.svc__item--cars .svc__name{font-size:clamp(1.625rem,2.2vw,2.125rem)}

.svc__item--cruise{
  grid-column:span 6;
  min-height:22rem;
}
.svc__item--cruise .svc__name{font-size:clamp(1.75rem,2.4vw,2.25rem)}

.svc__item--packages{
  grid-column:span 6;
  min-height:22rem;
}
.svc__item--packages .svc__name{font-size:clamp(1.75rem,2.4vw,2.25rem)}

@media (max-width:1100px){
  .svc__grid{grid-template-columns:repeat(6,1fr)}
  .svc__item--yachts{grid-column:span 6;grid-row:span 1;min-height:28rem}
  .svc__item--water{grid-column:span 3;min-height:18rem}
  .svc__item--cars{grid-column:span 3;min-height:18rem}
  .svc__item--cruise{grid-column:span 3;min-height:18rem}
  .svc__item--packages{grid-column:span 3;min-height:18rem}
}
@media (max-width:768px){
  .svc{padding:var(--space-16) 0}
  .svc__head{flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-8)}
  .svc__grid{grid-template-columns:1fr;gap:var(--space-4)}
  .svc__item--yachts,.svc__item--water,.svc__item--cars,.svc__item--cruise,.svc__item--packages{
    grid-column:span 1;
    grid-row:span 1;
    min-height:18rem;
  }
  .svc__body{padding:var(--space-6)}
}

/* ======================== LAPTOP & SHORTER VIEWPORT ADAPTATIONS ======================== */
@media (max-width: 1440px), (max-height: 920px) {
  .hero {
    min-height: max(700px, 100vh);
    height: auto;
    padding-top: 6.75rem;
    padding-bottom: 5.5rem;
    align-items: flex-start;
  }
  .hero__inner {
    max-width: min(640px, 58%);
  }
  .display-hero {
    font-size: clamp(2.75rem, 5vw, 4.25rem);
    line-height: 1.02;
  }
  .hero__headline {
    margin-bottom: var(--space-6);
  }
  .hero__sub {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: var(--space-6);
    max-width: 28rem;
  }
  .hero__actions {
    margin-bottom: var(--space-8);
    gap: var(--space-3);
  }
  .hero__trust {
    padding-top: var(--space-6);
    gap: var(--space-8);
  }
  .trust__label {
    font-size: .75rem;
  }
  .trust__sub {
    font-size: .6875rem;
  }
}

@media (max-height: 760px) {
  .hero {
    padding-top: 6.25rem;
    padding-bottom: 4.5rem;
  }
  .hero__bottom {
    bottom: var(--space-4);
  }
  .hero__actions {
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 1101px) and (max-width: 1366px) {
  .nav__inner {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
  }
  .nav__logo img {
    height: 52px;
  }
  .nav__menu {
    gap: 1.125rem;
  }
  .nav__menu .nav__link {
    font-size: .78125rem;
    letter-spacing: .05em;
  }
  .nav__cta {
    padding: .75rem 1.25rem;
    font-size: .65rem;
  }
  .nav__right {
    gap: var(--space-3);
  }
  .svc__grid {
    grid-auto-rows: minmax(16rem, auto);
  }
  .svc__body {
    padding: var(--space-6);
  }
  .svc__item--cars .svc__text {
    font-size: .8125rem;
    line-height: 1.6;
  }
  .yacht-card__specs {
    gap: var(--space-3);
  }
  .yacht-card__spec {
    font-size: .6875rem;
    gap: .35rem;
  }
}