/* =================================================================
   TruNORTH — recreation of the Wix Studio build
   Reference measurements taken at a 1440px window (1425px content width).
   All fluid values are expressed as a fraction of --u, where
   --u = min(content width, 1600px) — the site stops scaling past 1600.
   ================================================================= */

:root{
  --u: min(100vw, 1600px);   /* JS replaces this with min(clientWidth, 1600) */

  --cream:      #FAFFEE;
  --brown:      #3D2C00;
  --black:      #000000;
  --offwhite:   #F7F7F7;
  --lavender:   #BBBDC8;
  --grey:       #76747B;
  --yellow:     #FDD414;

  --display: "Wix Madefor Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text:    "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --arp:     "Michroma", "Wix Madefor Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --almarai: "Almarai", "Wix Madefor Text", Helvetica, Arial, sans-serif;

  --pad-site: calc(var(--u) * 0.023438);   /* 33.4px @1440 */
  --header-h: calc(var(--u) * 0.028070);   /* 40px   @1440 */
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--cream);
  color:var(--black);
  font-family:var(--text);
  font-size:14px;
  line-height:1.4;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
h1,h2,h3,h4,p{ margin:0; font-weight:400; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#fff; color:#116DFF; padding:8px 14px; font-size:14px;
}
.skip:focus{ left:0; }

/* ============================ HEADER ============================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--brown);
}
.hdr{
  height:var(--header-h);
  min-height:40px;
  padding:0 var(--pad-site);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.hdr__left{ justify-self:start; }

.hdr__logo{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:var(--cream);
  letter-spacing:0;
  white-space:nowrap;
}

.hdr__nav > ul{ display:flex; align-items:center; }
.hdr__nav > ul > li{ display:flex; }
.hdr__nav a{
  font-family:var(--text);
  font-weight:700;
  font-size:14px;
  line-height:18px;
  color:var(--cream);
  padding:10px;
  transition:opacity .2s ease;
}
.hdr__nav a:hover{ opacity:.7; }

/* ------------------------- services dropdown -------------------- */
.hdr__drop{ position:relative; }
.hdr__droptoggle{
  display:flex; align-items:center; gap:6px;
  font-family:var(--text); font-weight:700; font-size:14px; line-height:18px;
  color:var(--cream); padding:10px;
  transition:opacity .2s ease;
}
.hdr__droptoggle:hover{ opacity:.7; }
.hdr__caret{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s ease;
}
.hdr__drop[data-open="true"] .hdr__caret{ transform:rotate(180deg); }

.hdr__dropmenu{
  position:absolute; top:100%; left:0;
  min-width:168px;
  background:var(--brown);
  padding:6px 0 8px;
  display:none;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  z-index:120;
}
.hdr__drop[data-open="true"] .hdr__dropmenu{ display:block; }
.hdr__dropmenu li{ display:block; }
.hdr__dropmenu a{
  display:block;
  padding:9px 18px;
  font-family:var(--text); font-weight:700; font-size:13px;
  color:var(--cream);
  white-space:nowrap;
}
.hdr__dropmenu a:hover{ background:rgba(250,255,238,.12); opacity:1; }

/* drawer accordion */
.hdr__drawer-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  font-family:var(--text); font-weight:700; font-size:14px;
  color:var(--cream); padding:11px 0; text-align:left;
  border-bottom:1px solid rgba(250,255,238,.15);
}
.hdr__drawer-sublist{ padding-left:14px; display:flex; flex-direction:column; }
.hdr__drawer-sublist[hidden]{ display:none; }
.hdr__drawer-sub{ font-weight:400 !important; opacity:.85; }

.hdr__right{
  justify-self:end;
  display:flex; align-items:center; gap:20px;
}
.hdr__login{
  font-family:var(--text);
  font-size:14px; line-height:19.6px;
  color:var(--cream);
  padding:6px 7px;
  transition:opacity .2s ease;
}
.hdr__login:hover{ opacity:.7; }

.hdr__avatar{ display:block; width:22px; height:22px; }
.hdr__avatar svg{ width:100%; height:100%; fill:var(--cream); }

.hdr__burger{ display:none; width:26px; height:18px; padding:0; position:relative; }
.hdr__burger span{
  position:absolute; left:0; right:0; height:2px; background:var(--cream);
  transition:transform .25s ease, opacity .25s ease;
}
.hdr__burger span:nth-child(1){ top:0; }
.hdr__burger span:nth-child(2){ top:8px; }
.hdr__burger span:nth-child(3){ top:16px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.hdr__drawer{
  background:var(--brown);
  padding:6px var(--pad-site) 18px;
  display:flex; flex-direction:column; gap:2px;
}
.hdr__drawer[hidden]{ display:none; }
.hdr__drawer a{
  font-family:var(--text); font-weight:700; font-size:14px;
  color:var(--cream); padding:11px 0;
  border-bottom:1px solid rgba(250,255,238,.15);
}

/* ============================= HERO ============================== */
/* Reference: 1440px window (1425px content). Hero block is 0..932.   */
.hero{
  position:relative;
  height:calc(var(--u) * 0.654035);        /* 932px @1440 */
  overflow:hidden;
  background:var(--cream);
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.hero__copy{ position:absolute; inset:0; }

/* The wordmark is supplied artwork rather than live text, so the h1
   keeps the old type box and the image is centred inside it — the
   heading lands where the text used to, at any width. */
.hero__title{
  position:absolute;
  left:calc(var(--u) * 0.095439);          /* 136px @1440 */
  top:calc(var(--u) * 0.169825);           /* 242px @1440 */
  height:calc(var(--u) * 0.031621);        /* 45.06px — the old font box */
  display:flex;
  align-items:center;
  font-size:0;                             /* no stray text-node leading */
}
.hero__title img{
  height:calc(var(--u) * 0.022737);        /* 32.4px cap height @1440 */
  width:auto;
}
.hero__sub{
  position:absolute;
  left:calc(var(--u) * 0.095439);
  top:calc(var(--u) * 0.206316);           /* 294px @1440 */
  font-family:var(--almarai);
  font-weight:300;
  font-size:calc(var(--u) * 0.029011);     /* 41.34px @1440 */
  line-height:1;
  color:var(--black);
  white-space:nowrap;                      /* must never wrap — see mobile */
}

/* outlined white pill used in the hero and across the three bands */
.btn-line{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px;                          /* symmetric — keeps the label centred */
  white-space:nowrap;                      /* a long label must not wrap */
  background:#fff;
  border:1px solid var(--black);
  color:var(--black);
  font-family:var(--text);
  font-size:14px;
  line-height:1.3;
  text-align:center;
  transition:background .2s ease, color .2s ease;
}
.btn-line:hover{ background:var(--black); color:#fff; }
/* The arrow belongs beside the label, not pinned to the button edge —
   pinning it detached the arrow on wider buttons. It sits inline right
   after the text and the pair is centred as one unit, which reads as
   centred and holds at any button width. Vertical alignment comes from
   .btn-line's flexbox (see the note on .strip__cta). */
.btn-line__arrow{
  margin-left:6px;
  font-size:.9em;
  line-height:1;
}

.hero__btn{
  position:absolute;
  left:calc(var(--u) * 0.107368);           /* 153px @1440 */
  width:calc(var(--u) * 0.099649);          /* 142px @1440 */
  height:calc(var(--u) * 0.029474);         /*  42px @1440 */
  min-height:34px;
}
.hero__btn--1{ top:calc(var(--u) * 0.256842); }   /* 366px @1440 */
.hero__btn--2{ top:calc(var(--u) * 0.300351); }   /* 428px @1440 */

/* ========================== ONE PEOPLE =========================== */
.intro{
  position:relative;
  height:calc(var(--u) * 0.274386);        /* 391px @1440 */
  overflow:hidden;
  background:var(--cream);
}
.intro__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.intro__inner{ position:absolute; inset:0; text-align:center; }

.intro__logo{
  position:absolute;
  top:calc(var(--u) * 0.035087);           /* 50px @1440 */
  left:50%; transform:translateX(-50%);
  width:calc(var(--u) * 0.446316);         /* 636px @1440 */
  height:auto;
}
.intro__title{
  position:absolute;
  top:calc(var(--u) * 0.131930);           /* 188px @1440 */
  left:0; right:0;
  font-family:var(--display);
  font-size:calc(var(--u) * 0.027668);     /* 39.43px @1440 */
  line-height:1;
  color:var(--offwhite);
}
.intro__text{
  position:absolute;
  top:calc(var(--u) * 0.140351);           /* 200px @1440 — was 235 under the old title */
  left:50%; transform:translateX(-50%);
  width:calc(var(--u) * 0.626667);         /* 893px @1440 */
  font-family:var(--display);
  font-size:calc(var(--u) * 0.014229);     /* 20.28px @1440 */
  line-height:1.4;
  color:var(--yellow);
}

/* ============================ CARDS ============================== */
.cards{ padding:calc(var(--u) * 0.011930) calc(var(--u) * 0.013333) 0; }
.cards--light{ background:var(--offwhite); }
.cards--lav{
  background:var(--lavender);
  padding-top:calc(var(--u) * 0.014035);
}
.cards__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:calc(var(--u) * 0.020000);    /* 28.5px @1440 */
}
.card{ display:block; color:inherit; }
.card__img{
  width:100%;
  aspect-ratio:443 / 364;
  object-fit:cover;
}
.card__title{
  font-family:var(--text);
  font-weight:700;
  font-size:18px;
  line-height:25.2px;
  color:var(--black);
}
.card__text{
  font-family:var(--text);
  font-size:16px;
  line-height:25.6px;
  color:var(--black);
}
.card:hover .card__title{ text-decoration:underline; text-underline-offset:3px; }

/* ============================ STRIPS ============================= */
/* "Explore the North" / "Made in the North" / "Opportunities":
   a full-bleed band with an auto-scrolling row of 394px squares.     */
.strip{ position:relative; overflow:hidden; }
.strip--dark{ background:var(--black); color:#fff; }
.strip--sand{ background:#BEB790; color:var(--black); }
.strip--white{ background:#fff; color:var(--black); }

.strip__title{
  padding-top:calc(var(--u) * 0.035087);   /* 50px @1440 */
  font-family:var(--display);
  font-size:calc(var(--u) * 0.027668);     /* 39.43px @1440 */
  line-height:1;
  text-align:center;
}
.strip__rail{
  margin-top:calc(var(--u) * 0.017544);    /* 25px  @1440 */
  height:calc(var(--u) * 0.276491);        /* 394px @1440 */
  overflow:hidden;
  position:relative;
}
.strip__track{
  position:absolute; top:0; left:0;
  height:100%;
  display:flex;
  will-change:transform;
  animation:strip-drift 60s linear infinite;
}
.strip__track img{
  height:100%;
  width:calc(var(--u) * 0.276491);
  object-fit:cover;
  flex:0 0 auto;
  margin-right:-1px;                       /* 393px pitch @1440 */
}
@keyframes strip-drift{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(-33.3333%, 0, 0); }
}

.strip__lead{
  margin:0 auto;
  width:calc(var(--u) * 0.626667);         /* 893px @1440 */
  font-family:var(--text);
  font-size:calc(var(--u) * 0.011067);     /* 15.77px @1440 */
  line-height:1.4;
  text-align:center;
}
.strip__big{
  margin:0 auto;
  width:calc(var(--u) * 0.810526);         /* 1155px @1440 */
  font-family:var(--display);
  font-size:calc(var(--u) * 0.017391);     /* 24.78px @1440 */
  line-height:1.4;
  text-align:center;
}
.strip__cta{
  /* must stay flex — .btn-line centres its contents with flexbox, and
     display:block here disabled that and left the label 8px high */
  display:flex;
  margin:0 auto;
  width:calc(var(--u) * 0.099649);         /* 142px @1440 */
  height:calc(var(--u) * 0.025263);        /*  36px @1440 */
  min-height:32px;
}

/* per-band vertical rhythm, measured off the reference */
.strip--dark .strip__big { margin-top:calc(var(--u) * 0.008772); }
.strip--dark .strip__lead{ margin-top:calc(var(--u) * 0.008772); }
.strip--dark .strip__cta { margin-top:calc(var(--u) * 0.020351); }
.strip--dark{ padding-bottom:calc(var(--u) * 0.040000); }

.strip--sand .strip__lead{ margin-top:calc(var(--u) * 0.029825); }
.strip--sand .strip__big { margin-top:calc(var(--u) * 0.005614); }
.strip--sand .strip__cta { margin-top:calc(var(--u) * 0.028982); }
.strip--sand{ padding-bottom:calc(var(--u) * 0.035789); }

.strip--white .strip__lead{ margin-top:calc(var(--u) * 0.023509); }
.strip--white .strip__lead + .strip__lead{ margin-top:0; }
.strip--white .strip__big { margin-top:calc(var(--u) * 0.011930); }
.strip--white .strip__cta { margin-top:calc(var(--u) * 0.014526); }
.strip--white{ padding-bottom:calc(var(--u) * 0.027368); }

/* =========================== PILLARS ============================= */
.pillars-bar{
  height:calc(var(--u) * 0.042807);        /* 61px @1440 */
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
}
.pillars-bar h2{
  font-family:var(--display);
  font-size:calc(var(--u) * 0.019763);     /* 28.16px @1440 */
  line-height:1;
  color:var(--cream);
  text-align:center;
}

.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  min-height:calc(var(--u) * 0.430175);    /* 613px @1440 */
}
.pillar{ position:relative; padding-bottom:calc(var(--u) * 0.021754); }
.pillar--culture{     background:var(--lavender); color:var(--brown); }
.pillar--opportunity{ background:var(--cream);    color:var(--brown); }
.pillar--prosperity{  background:var(--black);    color:var(--cream); }

.pillar h3{
  padding-top:calc(var(--u) * 0.047719);   /* 68px @1440 */
  font-family:var(--display);
  font-size:calc(var(--u) * 0.031621);     /* 45.06px @1440 */
  line-height:1;
  text-align:center;
}
.pillar p{
  margin:calc(var(--u) * 0.021053) auto 0;
  width:calc(var(--u) * 0.259649);         /* 370px @1440 */
  font-family:var(--text);
  font-size:14px;
  line-height:19.6px;
  text-align:center;
  white-space:pre-line;
}
.pillar img{
  margin:calc(var(--u) * 0.026316) auto 0;
  width:calc(var(--u) * 0.229474);         /* 327px @1440 */
  height:calc(var(--u) * 0.152982);        /* 218px @1440 */
  object-fit:contain;
}

/* =========================== MISSION ============================= */
.mission{
  min-height:calc(var(--u) * 0.310877);    /* 443px @1440 */
  background:var(--grey);
  text-align:center;
  padding:calc(var(--u) * 0.025965) var(--pad-site) calc(var(--u) * 0.030000);
}
.mission__inner{
  width:calc(var(--u) * 0.576842);         /* 822px @1440 */
  margin:0 auto;
}
.mission p{
  font-family:var(--text);
  font-size:14px;
  line-height:19.6px;
  color:var(--cream);
}
.mission__gap{ height:9px; }

.btn-join{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:calc(var(--u) * 0.030175);    /* 43px @1440 */
  width:calc(var(--u) * 0.130526);         /* 186px @1440 */
  height:calc(var(--u) * 0.029474);        /*  42px @1440 */
  min-height:36px;
  background:var(--black);
  border:1px solid var(--black);
  color:#fff;
  font-family:var(--text);
  font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.btn-join:hover{ background:transparent; color:var(--black); }

.mission__mark{
  margin:calc(var(--u) * 0.025263) auto 0;
  width:calc(var(--u) * 0.061754);         /* 88px @1440 */
  height:auto;
}

/* ============================ PHOTO ============================== */
.photo-band{
  height:calc(var(--u) * 0.514386);        /* 733px @1440 */
  overflow:hidden;
  background:var(--cream);
}
.photo-band img{ width:100%; height:100%; object-fit:cover; }

/* ============================ FOOTER ============================= */
.site-footer{ background:var(--black); color:var(--cream); }

.footer-mark{
  height:calc(var(--u) * 0.122807);        /* 175px @1440 */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:calc(var(--u) * 0.009824);   /* 14px @1440 */
}
.footer-mark img{
  width:calc(var(--u) * 0.430175);         /* 613px @1440 */
  height:auto;
  object-fit:contain;
}

.footer-main{
  padding:calc(var(--u) * 0.019649) calc(var(--u) * 0.023158) 34px;
}
.footer-grid{
  display:grid;
  min-height:calc(var(--u) * 0.186503);    /* keeps the 291px column block */
  grid-template-columns:250fr 191fr 180fr 637fr;
  gap:calc(var(--u) * 0.023158);           /* 33px @1440 */
  align-items:start;
}

.fcol p, .fcol a{
  font-family:var(--text);
  font-size:14px;
  color:var(--cream);
}
.fcol--contact p{ line-height:22.4px; }
.fcol--contact a:hover{ text-decoration:underline; }

.fcol--nav{ display:flex; flex-direction:column; }
.fcol--nav a{ line-height:19.6px; padding:2px 0; }
.fcol--nav a:hover{ text-decoration:underline; }

.fcol--social p{ line-height:22.4px; }
.fcol--social a:hover{ text-decoration:underline; }

.fcol--form{ padding:0 25px; margin-top:-3px; }
.fcol--form .fform__title{
  font-family:var(--text);
  font-size:22px;
  line-height:33px;
  color:var(--cream);
}
.fform{ margin-top:24px; }
.fform__label{
  display:inline-block;
  font-family:var(--text);
  font-weight:700;
  font-size:14px;
  line-height:19.6px;
  color:var(--cream);
}
.fform__label .req{ font-weight:400; }

.fform input[type="email"]{
  display:block;
  width:calc(100% - 13px);
  max-width:575px;
  height:40px;
  margin-top:8px;
  padding:8px 2px 8px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--cream);
  color:var(--cream);
  font-family:var(--text);
  font-size:16px;
  outline:none;
}
.fform input[type="email"]:focus{ border-bottom-color:var(--yellow); }

.fform__check{
  display:flex; align-items:center; gap:12px;
  margin-top:25px;
  cursor:pointer;
}
.fform__check input{ position:absolute; opacity:0; width:0; height:0; }
.fform__check .box{
  width:16px; height:16px; flex:0 0 16px;
  border:1px solid var(--cream);
  position:relative;
}
.fform__check input:checked + .box::after{
  content:""; position:absolute; inset:3px;
  background:var(--cream);
}
.fform__check .txt{
  font-family:var(--text);
  font-size:16px;
  line-height:24px;
  color:var(--cream);
}

.btn-submit{
  margin-top:24px;
  width:180px; height:43px;
  background:var(--cream);
  border:1px solid var(--cream);
  color:var(--brown);
  font-family:var(--text);
  font-size:16px;
  line-height:19.2px;
  transition:background .2s ease, color .2s ease;
}
.btn-submit:hover{ background:transparent; color:var(--cream); }

.footer-bottom{
  margin-top:33px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.footer-legal{ display:flex; gap:0; }
.footer-legal p{ margin-right:28px; }
.footer-legal p:nth-child(2){ margin-right:35px; }
.footer-legal p:last-child{ margin-right:0; }
.footer-legal a{
  font-family:var(--text);
  font-size:14px;
  line-height:22.4px;
  color:var(--cream);
}
.footer-legal a:hover{ text-decoration:underline; }
.footer-copy{
  font-family:var(--text);
  font-size:14px;
  line-height:22.4px;
  color:var(--cream);
  text-align:right;
  white-space:nowrap;
}



/* ========================== BOOKING PAGE ========================= */
/* Reference: the Wix /book-online page at a 1440px window.
   Unlike the home page the header does not overlay the content here,
   so an offset of exactly the header height sits below it.          */
.page-offset{ height:var(--header-h); min-height:40px; }

.hdr__nav a[aria-current="page"],
.hdr__drawer a[aria-current="page"]{ text-decoration:underline; text-underline-offset:3px; }

.book{
  background:var(--cream);
  padding:calc(var(--u) * 0.089825)          /* 128px @1440 */
          calc(var(--u) * 0.037193)          /*  53px @1440 */
          calc(var(--u) * 0.037895);         /*  54px @1440 */
}

.book__title{
  font-family:var(--display);
  font-weight:400;
  /* fixed 160px in the original; capped by viewport so it never
     forces the page to scroll sideways on narrow screens */
  font-size:min(160px, 18.5vw);
  line-height:1.25;
  color:var(--brown);
  text-align:center;
  margin-bottom:calc(var(--u) * 0.042105);   /*  60px @1440 */
}

.book__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 0.014035);             /*  20px @1440 */
}

.svc{
  background:var(--brown);
  color:var(--cream);
  text-align:center;
}
.svc img{
  width:100%;
  aspect-ratio:426 / 285;
  object-fit:cover;
}
.svc__body{ padding:32px; }
.svc__body h2{
  font-family:var(--display);
  font-weight:400;
  font-size:24px;
  line-height:32px;
  color:var(--cream);
}
.svc__dur{
  margin-top:48px;
  font-family:var(--text);
  font-size:16px;
  line-height:32px;
  color:var(--cream);
}
.svc__price{
  font-family:var(--text);
  font-size:16px;
  line-height:32px;
  color:var(--cream);
}
.svc__book{
  display:block;
  margin:20px auto 0;
  width:125px; height:40px;
  background:transparent;
  color:var(--cream);
  font-family:var(--text);
  font-size:16px;
  line-height:1;
  transition:opacity .2s ease;
}
.svc__book:hover{ text-decoration:underline; text-underline-offset:3px; }

/* -------------------------- booking dialog ----------------------- */
.bookdlg{
  border:0; padding:0;
  width:min(440px, calc(100vw - 40px));
  background:var(--brown);
  color:var(--cream);
}
.bookdlg::backdrop{ background:rgba(0,0,0,.6); }

.bookdlg__form{ position:relative; padding:34px 32px 32px; }

.bookdlg__close{
  position:absolute; top:8px; right:12px;
  font-size:26px; line-height:1;
  color:var(--cream);
  padding:4px 8px;
}
.bookdlg__close:hover{ opacity:.7; }

.bookdlg__eyebrow{
  font-family:var(--text);
  font-size:14px; line-height:19.6px;
  color:var(--yellow);
}
.bookdlg__title{
  font-family:var(--display);
  font-weight:400;
  font-size:24px; line-height:32px;
  color:var(--cream);
}
.bookdlg__meta{
  font-family:var(--text);
  font-size:16px; line-height:32px;
  color:var(--cream);
  margin-bottom:18px;
}

.bookdlg label{
  display:block;
  margin-top:16px;
  font-family:var(--text);
  font-weight:700;
  font-size:14px; line-height:19.6px;
  color:var(--cream);
}
.bookdlg label .req{ font-weight:400; }

.bookdlg input,
.bookdlg textarea{
  display:block;
  width:100%;
  margin-top:6px;
  padding:8px 2px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--cream);
  color:var(--cream);
  font-family:var(--text);
  font-size:16px;
  outline:none;
  resize:vertical;
}
.bookdlg input:focus,
.bookdlg textarea:focus{ border-bottom-color:var(--yellow); }
.bookdlg input::-webkit-calendar-picker-indicator{ filter:invert(1); cursor:pointer; }

.bookdlg__submit{ margin-top:26px; width:100%; }
.bookdlg__submit:disabled{ cursor:default; opacity:.75; }

.bookdlg__note{
  margin-top:14px;
  font-family:var(--text);
  font-size:14px; line-height:19.6px;
  color:var(--yellow);
  text-align:center;
}


/* ========================== INNER PAGES ========================== */
.wrap{
  width:100%;
  max-width:calc(var(--u) * 0.953);
  margin:0 auto;
  padding:0 var(--pad-site);
}

.page-hero{
  position:relative;
  background:var(--black);
  color:#fff;
  text-align:center;
  padding:calc(var(--u) * 0.055) var(--pad-site) calc(var(--u) * 0.048);
  overflow:hidden;
}
.page-hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.34;
}
.page-hero__inner{ position:relative; }
.page-hero__eyebrow{
  font-family:var(--text);
  font-weight:700;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
}
.page-hero__title{
  font-family:var(--display);
  font-size:calc(var(--u) * 0.0455);
  line-height:1.05;
  color:var(--yellow);
}
.page-hero__lead{
  margin:18px auto 0;
  max-width:calc(var(--u) * 0.6267);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  color:#fff;
}

.section{ padding:calc(var(--u) * 0.045) 0; }
.section--cream{ background:var(--cream); }
.section--white{ background:#fff; }
.section--sand { background:#BEB790; }
.section--lav  { background:var(--lavender); }
.section--dark { background:var(--black); color:#fff; }
.section--grey { background:var(--grey); color:var(--cream); }

.section__title{
  font-family:var(--display);
  font-size:calc(var(--u) * 0.0277);
  line-height:1.15;
  text-align:center;
}
.section__lead{
  margin:14px auto 0;
  max-width:calc(var(--u) * 0.6267);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  text-align:center;
}
.section__title + .tiles,
.section__lead  + .tiles,
.section__title + .trip-grid,
.section__lead  + .trip-grid,
.section__title + .shop-grid,
.section__lead  + .shop-grid{ margin-top:calc(var(--u) * 0.032); }
/* the category filter sat flush on the first row of products */
.shop-bar + .shop-grid{ margin-top:clamp(20px, calc(var(--u) * 0.026), 46px); }

/* generic 3-up tiles used by the content pages */
.tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 0.020);
}
.tile{
  background:#fff;
  color:var(--black);
  display:flex; flex-direction:column;
}
.section--white .tile{ background:var(--cream); }
.tile img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.tile__body{ padding:20px 22px 24px; flex:1 1 auto; }
.tile__name{
  font-family:var(--text);
  font-weight:700; font-size:18px; line-height:25.2px;
}
.tile__text{
  margin-top:6px;
  font-family:var(--text);
  font-size:16px; line-height:25.6px;
}

/* ---------------------------- TRAVEL ---------------------------- */
.trip-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 0.020);
}
.trip{
  background:var(--brown);
  color:var(--cream);
  display:flex; flex-direction:column;
}
.trip img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.trip__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 1 auto; }
.trip__state{
  font-family:var(--text);
  font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}
.trip__name{
  margin-top:6px;
  font-family:var(--display);
  font-size:22px; line-height:29px;
}
.trip__text{
  margin-top:10px;
  font-family:var(--text);
  font-size:15px; line-height:23px;
  flex:1 1 auto;
}
.trip__meta{
  margin-top:16px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  font-family:var(--text);
  font-size:14px;
}
.trip__price{ font-size:20px; font-weight:700; }
.trip__book{
  margin-top:16px;
  width:100%; height:44px;
  background:var(--cream);
  color:var(--brown);
  border:1px solid var(--cream);
  font-family:var(--text); font-size:15px;
  transition:background .2s ease, color .2s ease;
}
.trip__book:hover{ background:transparent; color:var(--cream); }

/* ----------------------------- SHOP ----------------------------- */
.shop-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  margin-top:calc(var(--u) * 0.022);
}
.shop-bar button{
  padding:8px 16px;
  border:1px solid var(--brown);
  background:transparent;
  color:var(--brown);
  font-family:var(--text); font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.shop-bar button[aria-pressed="true"],
.shop-bar button:hover{ background:var(--brown); color:var(--cream); }

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:calc(var(--u) * 0.018);
}
.product{
  background:#fff;
  display:flex; flex-direction:column;
  border:1px solid rgba(61,44,0,.14);
}
.product img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; }
.product__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1 1 auto; }
.product__cat{
  font-family:var(--text); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey);
}
.product__name{
  margin-top:5px;
  font-family:var(--text); font-weight:700;
  font-size:15px; line-height:21px;
  flex:1 1 auto;
}
.product__price{
  margin-top:10px;
  font-family:var(--text); font-weight:700; font-size:17px;
  color:var(--brown);
}
.product__add{
  margin-top:12px;
  width:100%; height:40px;
  background:var(--brown); color:var(--cream);
  border:1px solid var(--brown);
  font-family:var(--text); font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.product__add:hover{ background:transparent; color:var(--brown); }
.product__add:disabled{ opacity:.55; cursor:default; }

/* cart button in the header */
.hdr__cart{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  color:var(--cream);
}
.hdr__cart svg{ width:20px; height:20px; fill:none; stroke:var(--cream); stroke-width:1.6; }
.hdr__cart span{
  position:absolute; top:-6px; right:-8px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:8px;
  background:var(--yellow); color:var(--brown);
  font-family:var(--text); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* cart panel */
.cart{
  position:fixed; top:0; right:0; bottom:0;
  width:min(400px, 100vw);
  background:var(--brown); color:var(--cream);
  z-index:200;
  transform:translateX(100%);
  transition:transform .28s ease;
  display:flex; flex-direction:column;
}
.cart[data-open="true"]{ transform:none; }
.cart__head{
  padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(250,255,238,.2);
}
.cart__head h2{ font-family:var(--display); font-size:20px; }
.cart__close{ color:var(--cream); font-size:26px; line-height:1; padding:2px 6px; }
.cart__items{ flex:1 1 auto; overflow-y:auto; padding:12px 22px; }
.cart__empty{ padding:26px 0; font-family:var(--text); font-size:15px; opacity:.8; }
.citem{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid rgba(250,255,238,.14); }
.citem img{ width:56px; height:56px; object-fit:cover; }
.citem__n{ font-family:var(--text); font-size:14px; line-height:19px; }
.citem__p{ font-family:var(--text); font-size:13px; opacity:.85; margin-top:3px; }
.citem__qty{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.citem__qty button{ width:22px; height:22px; border:1px solid rgba(250,255,238,.5); color:var(--cream); line-height:1; }
.citem__rm{ color:var(--cream); font-size:12px; text-decoration:underline; align-self:start; }
.cart__foot{ padding:18px 22px 22px; border-top:1px solid rgba(250,255,238,.2); }
.cart__total{ display:flex; justify-content:space-between; font-family:var(--text); font-size:16px; font-weight:700; }
.cart__pay{
  margin-top:14px; width:100%; height:46px;
  background:var(--cream); color:var(--brown); border:1px solid var(--cream);
  font-family:var(--text); font-size:15px;
  transition:background .2s ease, color .2s ease;
}
.cart__pay:hover{ background:transparent; color:var(--cream); }
.cart__pay:disabled{ opacity:.6; cursor:default; }
.cart__note{ margin-top:10px; font-family:var(--text); font-size:12px; line-height:17px; opacity:.75; text-align:center; }
.cart__scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199;
}
.cart__scrim[hidden]{ display:none; }

/* checkout / booking dialog shared with the booking page styling */
.paydlg{
  border:0; padding:0;
  width:min(440px, calc(100vw - 40px));
  background:var(--brown); color:var(--cream);
}
.paydlg::backdrop{ background:rgba(0,0,0,.6); }
.paydlg__form{ position:relative; padding:34px 32px 32px; }
.paydlg__close{ position:absolute; top:8px; right:12px; font-size:26px; line-height:1; color:var(--cream); padding:4px 8px; }
.paydlg__eyebrow{ font-family:var(--text); font-size:14px; color:var(--yellow); }
.paydlg__title{ font-family:var(--display); font-size:24px; line-height:32px; }
.paydlg__meta{ font-family:var(--text); font-size:16px; line-height:32px; margin-bottom:14px; }
.paydlg label{ display:block; margin-top:16px; font-family:var(--text); font-weight:700; font-size:14px; }
.paydlg input,
.paydlg select,
.paydlg textarea{
  display:block; width:100%; margin-top:6px; padding:8px 2px;
  background:transparent; border:0; border-bottom:1px solid var(--cream);
  color:var(--cream); font-family:var(--text); font-size:16px; outline:none;
}
.paydlg select option{ color:var(--brown); }
.paydlg input:focus,
.paydlg select:focus,
.paydlg textarea:focus{ border-bottom-color:var(--yellow); }
.paydlg input::-webkit-calendar-picker-indicator{ filter:invert(1); cursor:pointer; }
.paydlg__submit{ margin-top:26px; width:100%; }
.paydlg__submit:disabled{ cursor:default; opacity:.75; }
.paydlg__note{ margin-top:14px; font-family:var(--text); font-size:14px; line-height:19.6px; color:var(--yellow); text-align:center; }
.paydlg__err{ margin-top:12px; font-family:var(--text); font-size:14px; color:#ffb4a8; text-align:center; }

/* payment confirmation, shown after the dialog has closed */
.paytoast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:300;
  max-width:min(520px, calc(100vw - 32px));
  background:var(--brown); color:var(--cream);
  padding:14px 22px;
  font-family:var(--text); font-size:15px; line-height:1.5;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}

/* simple prose pages (legal, learn, etc.) */
.prose{
  max-width:calc(var(--u) * 0.58);
  margin:0 auto;
  font-family:var(--text);
  font-size:16px; line-height:1.7;
}
.prose h2{ margin-top:34px; font-family:var(--display); font-size:24px; line-height:1.25; }
.prose h3{ margin-top:24px; font-family:var(--text); font-weight:700; font-size:17px; }
.prose p{ margin-top:12px; }
.prose ul{ margin-top:12px; padding-left:20px; list-style:disc; }
.prose li{ margin-top:6px; }
.prose a{ text-decoration:underline; }

/* join form */
.joinform h2{ font-family:var(--display); font-size:24px; margin-bottom:6px; }
.joinform .fform__label{ display:block; margin-top:18px; color:var(--brown); }
.joinform input,
.joinform select{
  display:block; width:100%; margin-top:6px; padding:9px 2px;
  background:transparent; border:0; border-bottom:1px solid var(--brown);
  color:var(--brown); font-family:var(--text); font-size:16px; outline:none;
}
.joinform input:focus,
.joinform select:focus{ border-bottom-color:var(--yellow); }
.joinform .btn-submit{ background:var(--brown); border-color:var(--brown); color:var(--cream); }
.joinform .btn-submit:hover{ background:transparent; color:var(--brown); }
/* --------------------------- contact ---------------------------- */
.contact-grid{
  display:grid; gap:calc(var(--u) * 0.028);
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  align-items:start;
}
.contact-side__h{
  font-family:var(--display); font-size:22px; color:var(--brown);
  margin-bottom:14px;
}
.contact-side__row{
  display:flex; gap:10px; align-items:baseline;
  font-family:var(--text); font-size:15px; line-height:2;
  color:var(--brown);
}
.contact-side__row span{
  min-width:82px; font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; opacity:.65;
}
.contact-side__row a:hover{ text-decoration:underline; }

.contact-side__note{
  margin-top:26px; padding:20px 22px;
  background:#fff; border:1px solid rgba(61,44,0,.16);
}
.contact-side__note h3{
  font-family:var(--display); font-size:17px; color:var(--brown); margin-bottom:7px;
}
.contact-side__note p{
  font-family:var(--text); font-size:14.5px; line-height:1.6; color:#4b473d;
}

/* WhatsApp is the route for creators, since listings are admin-only */
.btn-wa{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:15px; padding:11px 18px;
  background:#25D366; color:#04301a;
  font-family:var(--text); font-weight:700; font-size:14px;
  transition:filter .2s ease;
}
.btn-wa:hover{ filter:brightness(.93); }
.btn-wa--band{ margin-top:22px; }
.btn-wa svg{ width:19px; height:19px; fill:currentColor; flex:0 0 19px; }

.contact-form textarea{
  display:block; width:100%; margin-top:6px; padding:9px 2px;
  background:transparent; border:0; border-bottom:1px solid var(--brown);
  color:var(--brown); font-family:var(--text); font-size:16px;
  outline:none; resize:vertical; min-height:120px;
}
.contact-form textarea:focus{ border-bottom-color:var(--yellow); }

/* ---------------------- membership chooser ---------------------- */
.jpaths{
  display:grid; gap:calc(var(--u) * 0.018);
  grid-template-columns:repeat(2, 1fr);
  margin-top:clamp(20px, calc(var(--u) * 0.026), 46px);
}
.jpath{
  display:block; background:#fff;
  border:1px solid rgba(61,44,0,.16);
  padding:26px 26px 22px;
  transition:border-color .2s ease, transform .2s ease;
}
.jpath:hover{ border-color:var(--brown); transform:translateY(-2px); }
.jpath__icon{ display:block; width:30px; height:30px; color:var(--brown); }
.jpath__icon svg{ width:100%; height:100%; }
.jpath__name{
  margin-top:15px;
  font-family:var(--display); font-size:21px; line-height:1.2; color:var(--brown);
}
.jpath__text{
  margin-top:8px;
  font-family:var(--text); font-size:15px; line-height:1.6; color:#4b473d;
}
.jpath__go{
  display:inline-block; margin-top:16px;
  font-family:var(--text); font-weight:700; font-size:14px; color:var(--brown);
}
.jpath:hover .jpath__go{ text-decoration:underline; text-underline-offset:3px; }

.joinback{ margin-bottom:18px; font-family:var(--text); font-size:14px; }
.joinback a{ color:var(--brown); }
.joinback a:hover{ text-decoration:underline; }

.joinform__note{ margin-top:12px; font-family:var(--text); font-size:14px; color:var(--brown); }

/* ordinary membership: two plans, then the member's details */
.memberform{ display:grid; gap:clamp(28px, calc(var(--u) * 0.03), 52px); }
.mplans{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(var(--u) * 0.016); margin:0; padding:0; border:0; min-width:0; }
.mplans__legend{ grid-column:1 / -1; margin-bottom:6px; padding:0; font-family:var(--display); font-size:24px; color:var(--brown); }
.mplan{
  position:relative; display:flex; flex-direction:column;
  padding:26px 26px 24px; background:#fff; cursor:pointer;
  border:1px solid rgba(61,44,0,.16); color:var(--brown);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mplan:hover{ border-color:var(--brown); }
.mplan input{ position:absolute; opacity:0; width:0; height:0; }
.mplan:has(input:checked){ border-color:var(--brown); box-shadow:inset 0 0 0 1px var(--brown); }
.mplan:has(input:focus-visible){ outline:2px solid var(--yellow); outline-offset:3px; }
.mplan--plus{ background:var(--brown); color:var(--cream); border-color:var(--brown); }
.mplan--plus:has(input:checked){ box-shadow:0 0 0 3px var(--yellow); }
.mplan__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-right:34px; }
.mplan__name{ font-family:var(--display); font-size:22px; line-height:1.2; }
.mplan__price{ font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1; white-space:nowrap; }
.mplan__price small{ font-family:var(--text); font-weight:400; font-size:14px; opacity:.75; }
.mplan--plus .mplan__price{ color:var(--yellow); }
.mplan__lead{ margin-top:10px; font-family:var(--text); font-size:15px; line-height:1.5; opacity:.85; }
.mplan__perks{ margin:16px 0 0; padding:0; list-style:none; }
.mplan__perks li{ display:flex; gap:10px; align-items:flex-start; margin-top:9px; font-family:var(--text); font-size:15px; line-height:1.5; }
.mplan__perks svg{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:var(--yellow); }
.mplan:not(.mplan--plus) .mplan__perks svg{ color:var(--brown); }
.mplan__pick{
  position:absolute; top:24px; right:22px; width:22px; height:22px;
  border:1.5px solid currentColor; border-radius:50%;
}
.mplan:has(input:checked) .mplan__pick::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:currentColor; }
.mplan--plus:has(input:checked) .mplan__pick{ border-color:var(--yellow); }
.mplan--plus:has(input:checked) .mplan__pick::after{ background:var(--yellow); }
.memberform__fields{ max-width:620px; }
.memberform__fields h2{ font-family:var(--display); font-size:24px; color:var(--brown); }
.memberform__small{ margin-top:12px; font-family:var(--text); font-size:13.5px; line-height:1.5; color:#4b473d; }

/* the membership band on the chooser, apart from the four paths */
.jmember{
  display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap;
  margin-top:calc(var(--u) * 0.022); padding:26px 28px;
  background:var(--brown); color:var(--cream);
  transition:transform .2s ease;
}
.jmember:hover{ transform:translateY(-2px); }
.jmember__text{ display:flex; flex-direction:column; gap:6px; max-width:760px; }
.jmember__name{ font-family:var(--display); font-size:22px; line-height:1.25; }
.jmember__lead{ font-family:var(--text); font-size:15px; line-height:1.55; opacity:.88; }
.jmember__go{ font-family:var(--text); font-weight:700; font-size:14px; color:var(--yellow); white-space:nowrap; }
.jmember:hover .jmember__go{ text-decoration:underline; text-underline-offset:3px; }

/* call-to-action band */
.cta-band{
  background:var(--black); color:#fff;
  text-align:center;
  padding:calc(var(--u) * 0.04) var(--pad-site);
}
.cta-band h2{ font-family:var(--display); font-size:clamp(24px, calc(var(--u) * 0.0315), 46px); line-height:1.15; }
.cta-band p{ margin:12px auto 0; max-width:calc(var(--u) * 0.55); font-family:var(--text); font-size:16px; line-height:1.6; }
.cta-band .btn-line{ margin-top:22px; width:180px; height:42px; }

@media (max-width: 1000px){
  .shop-grid{ grid-template-columns:repeat(3, 1fr); }
  .page-hero__title{ font-size:calc(var(--u) * 0.055); }
}
@media (max-width: 750px){
  .tiles,
  .trip-grid{ grid-template-columns:1fr; gap:7vw; }
  .shop-grid{ grid-template-columns:repeat(2, 1fr); gap:4vw; }
  .jpaths{ grid-template-columns:1fr; gap:14px; }
  .mplans{ grid-template-columns:1fr; gap:14px; }
  .mplan{ padding:22px 20px 20px; }
  .mplan__head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .jmember{ padding:22px 20px; }
  .contact-grid{ grid-template-columns:1fr; gap:30px; }
  .page-hero{ padding:12vw 5.07vw 11vw; }
  .page-hero__title{ font-size:clamp(26px, 8.5vw, 46px); }
  .section{ padding:11vw 0; }
  .section__title{ font-size:clamp(19px, 6vw, 34px); }
  .prose{ max-width:none; padding:0 5.07vw; }
  .wrap{ padding:0 5.07vw; }
}

/* ==========================================================
   BREAKPOINTS
   The Wix build keeps its three-column layout down to ~750px
   and switches to a single-column mobile layout below that.
   ========================================================== */

/* ---------- tablet: 751 - 1000 ---------- */
@media (max-width: 1000px){
  .hdr{ height:50px; }

  .hero__title{ height:calc(var(--u) * 0.045); }
  .hero__title img{ height:calc(var(--u) * 0.0324); }
  .hero__sub{ font-size:calc(var(--u) * 0.038); }
  .hero__btn{ width:calc(var(--u) * 0.16); height:calc(var(--u) * 0.05); }

  .intro{ height:auto; padding:calc(var(--u) * 0.05) 5vw calc(var(--u) * 0.055); }
  .intro__inner{ position:relative; z-index:1; }
  .intro__logo{ position:static; transform:none; margin:0 auto; width:min(56vw, 480px); }
  .intro__title{ position:static; margin-top:3.2vw; font-size:calc(var(--u) * 0.031); }
  .intro__text{ position:static; transform:none; margin:4vw auto 0; width:min(86vw, 720px); font-size:16px; line-height:25.6px; }

  .book__grid{ grid-template-columns:repeat(2, 1fr); }

  .cards--light{ padding-bottom:calc(var(--u) * 0.02); }
  .cards--lav{ padding-bottom:calc(var(--u) * 0.02); }

  .strip__title{ font-size:calc(var(--u) * 0.034); }
  .strip__rail,
  .strip__track img{ height:calc(var(--u) * 0.34); }
  .strip__track img{ width:calc(var(--u) * 0.34); }
  .strip__lead{ width:min(88vw, 760px); font-size:calc(var(--u) * 0.0155); }
  .strip__big{ width:min(92vw, 900px); font-size:calc(var(--u) * 0.024); }
  .strip__cta{ width:calc(var(--u) * 0.17); height:calc(var(--u) * 0.045); }

  .pillars-bar{ height:auto; padding:2.2vw 4vw; align-items:center; }
  .pillars-bar h2{ font-size:calc(var(--u) * 0.024); }

  .pillars{ grid-template-columns:1fr; min-height:0; }
  .pillar{ padding:5.5vw 3vw 6.5vw; }
  .pillar h3{ padding-top:0; font-size:calc(var(--u) * 0.042); }
  .pillar p{ width:88%; margin:3vw auto 0; }
  .pillar img{ width:74%; height:auto; margin:4vw auto 0; }

  .mission{ min-height:0; padding:5vw 5vw 6vw; }
  .mission__inner{ width:min(80vw, 700px); }
  .mission p{ line-height:1.3; text-wrap:pretty; }
  .mission__gap{ height:0.45em; }
  .btn-join{ width:186px; height:42px; margin-top:5vw; }
  .mission__mark{ margin-top:3.5vw; width:88px; }

  .photo-band{ height:auto; aspect-ratio:1456 / 733; }
}

/* ---------- mobile: <= 750  (matches the Wix mobile breakpoint) ---------- */
@media (max-width: 750px){
  .hdr{ height:60px; grid-template-columns:1fr auto; padding:0 5.07vw; }
  .hdr__nav,
  .hdr__login,
  .hdr__avatar{ display:none; }
  .hdr__burger{ display:block; }
  .hdr__logo{ font-size:clamp(17px, 4.8vw, 26px); }

  /* hero — copy runs in flow instead of being absolutely placed */
  .hero{ height:auto; min-height:auto; aspect-ratio:auto; }
  /* the crop zooms hard at this height, pulling the rock face left
     under the headline — favour the sky side */
  .hero__bg{ position:absolute; inset:0; object-position:0% 50%; }
  .hero__copy{
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:22vw 4vw 12vw;
  }
  .hero__title,
  .hero__sub,
  .hero__btn{ position:static; left:auto; top:auto; }
  .hero__title{ height:auto; }
  .hero__title img{ height:auto; width:min(55vw, 300px); }
  /* 5.94vw is the exact point where this string stops fitting on one
     line; 5.5vw keeps a margin for font fallback across devices. */
  .hero__sub{ margin-top:2.5vw; font-size:clamp(11px, 3.6vw, 24px); line-height:1.2; }
  .hero__btn{ margin-top:5vw; width:126px; height:34px; font-size:12.5px; }
  .hero__btn--2{ margin-top:3.5vw; }

  /* one people */
  .intro{ padding:7.5vw 5vw 8vw; }
  .intro__logo{ width:64vw; }
  .intro__title{ margin-top:5vw; font-size:clamp(13px, 4vw, 24px); }
  .intro__text{ margin-top:5.5vw; width:86.4vw; font-size:16px; line-height:25.6px; }

  .book{ padding:9vw 7.73vw 11vw; }
  .book__grid{ grid-template-columns:1fr; gap:9vw; }
  .book__title{ margin-bottom:7vw; }

  .cards{ padding:7vw 7.73vw 9vw; }
  .cards__grid{ grid-template-columns:1fr; row-gap:9vw; }
  .card__title{ margin-top:5.5vw; }

  /* strips */
  .strip__title{ padding-top:9vw; font-size:clamp(19px, 6vw, 34px); }
  .strip__rail{ margin-top:6vw; }
  .strip__rail,
  .strip__track img{ height:52vw; }
  .strip__track img{ width:52vw; }
  .strip__lead{ width:88vw; font-size:clamp(11px, 3.2vw, 18px); }
  .strip__big{ width:90vw; font-size:clamp(14px, 4.6vw, 26px); }
  .strip__cta{ width:142px; height:36px; }
  .strip--dark .strip__big,
  .strip--sand .strip__big,
  .strip--white .strip__big{ margin-top:5vw; }
  .strip--dark .strip__lead,
  .strip--sand .strip__lead,
  .strip--white .strip__lead{ margin-top:4vw; }
  .strip--white .strip__lead + .strip__lead{ margin-top:1.5vw; }
  .strip--dark .strip__cta,
  .strip--sand .strip__cta,
  .strip--white .strip__cta{ margin-top:8vw; }
  .strip--dark,
  .strip--sand,
  .strip--white{ padding-bottom:11vw; }

  .pillars-bar{ padding:3.4vw 4vw; }
  .pillars-bar h2{ font-size:clamp(12px, 3.73vw, 22px); }

  .pillar{ padding:9vw 5vw 10vw; }
  .pillar h3{ font-size:clamp(28px, 10.67vw, 60px); }
  .pillar p{ width:90%; margin-top:5vw; }
  .pillar img{ width:66vw; margin-top:7vw; }

  .mission{ padding:9vw 5vw 11vw; }
  .mission__inner{ width:73.6vw; }
  /* Tighter leading, and text-wrap:pretty stops a paragraph ending on a
     single stranded word — both were making this block look loose. */
  .mission p{ line-height:1.26; text-wrap:pretty; }
  .mission__gap{ height:1.05em; }
  .btn-join{ width:179px; height:36px; margin-top:7vw; }
  .mission__mark{ width:87px; margin-top:4vw; }

  /* footer */
  .footer-mark{ height:auto; padding:7vw 5vw; }
  .footer-mark img{ width:70vw; }
  .footer-main{ padding:0 5.07vw 9vw; }
  .footer-grid{ grid-template-columns:1fr; min-height:0; gap:7vw; }
  .fcol--form{ padding:0; }
  .fform input[type="email"]{ width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:4vw; margin-top:8vw; }
  .footer-legal{ flex-direction:column; }
  .footer-legal p{ margin-right:0 !important; }
  .footer-copy{ text-align:left; }

  /* booking dialog */
  .bookdlg__form{ padding:28px 22px 26px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .strip__track{ animation:none; }
}