/* =================================================================
   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 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; }

.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{
  display:inline-flex; align-items:center; justify-content:center;
  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; }
.btn-line__arrow{ margin-left:6px; font-size:.9em; line-height:1; }
/* The arrow sits inside the centred flex group, which pushed the label
   about 8px left of the button's middle. This invisible twin balances
   it, so the word itself is centred — and it stays correct at any
   font size because it scales with the real arrow. */
.btn-line::before{
  content:"\2197";
  visibility:hidden;
  margin-right: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.164912);           /* 235px @1440 */
  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); }
/* ---------------------- 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); }

/* 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; }
  .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:2.4vw auto 0; width:min(86vw, 720px); font-size:calc(var(--u) * 0.017); }

  .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; }
  .hero__bg{ position:absolute; inset:0; }
  .hero__copy{
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:22vw 5.07vw 12vw;
  }
  .hero__title,
  .hero__sub,
  .hero__btn{ position:static; left:auto; top:auto; }
  .hero__title{ height:auto; }
  .hero__title img{ height:auto; width:min(78vw, 420px); }
  /* 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(14px, 5.5vw, 36px); line-height:1.2; }
  .hero__btn{ margin-top:6vw; width:142px; height:42px; }
  .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:4.2vw; width:86.4vw; font-size:clamp(11px, 3.2vw, 19px); }

  .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; }
}