/* ==========================================================================
   JEEP BEACH 2027
   Tokens and components lifted from the live jeepbeach.com homepage so the
   rest of the site matches it exactly. The variable names below (--navy,
   --pink, --cyan …) are the client's own, read off their live code module.
   ========================================================================== */

:root{
  --navy:   #071620;
  --navy2:  #0c2836;
  --navy3:  #123243;
  --pink:   #E8734A;          /* their name for the coral CTA colour */
  --cyan:   #3FA8A0;
  --orange: #F2A65A;
  --sand:   #F5D9B0;
  --white:  #F8F5EE;
  --line:   rgba(245,217,176,0.16);

  --display:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --util:   'Barlow Condensed',sans-serif;
  --body:   'Barlow',system-ui,-apple-system,sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.15rem,4vw,2.6rem);
  --t: .18s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; background:var(--navy); color:var(--white);
  font-family:var(--body); font-size:19px; line-height:1.6; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:var(--white); }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.wrap{ width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto; }

/* ---------- type --------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.95; letter-spacing:.01em; color:var(--white); margin:0 0 .45em;
}
h1{ font-size:clamp(2.4rem,6vw,4.15rem); }
h2{ font-size:clamp(2rem,4.4vw,3.5rem); }
h3{ font-size:clamp(1.25rem,2.1vw,1.6rem); }
h4{ font-size:clamp(1.05rem,1.5vw,1.2rem); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

/* the homepage tints ONE word of a headline, never the whole line */
.hl-pink{ color:var(--pink); }
.hl-cyan{ color:var(--cyan); }

.eyebrow{
  font-family:var(--util); font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:13px; color:var(--cyan);
  display:block; margin:0 0 .9rem;
}
.eyebrow--pink{ color:var(--pink); }
.eyebrow--rule{ display:flex; align-items:center; gap:.75rem; }
.eyebrow--rule::before{ content:""; width:38px; height:2px;
                        background:currentColor; flex:0 0 auto; }

.lead{ font-size:1.05rem; color:rgba(248,245,238,.82); max-width:62ch; }
.muted{ color:rgba(248,245,238,.62); }
.fine{ font-size:.82rem; color:rgba(248,245,238,.5); line-height:1.5; }

/* ---------- buttons (verbatim from the live site) ------------------------ */
.btn{
  font-family:var(--util); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:14px;
  padding:11px 22px; border-radius:999px; display:inline-block;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
  white-space:nowrap; border:0; cursor:pointer;
}
.btn-solid{ background:var(--pink); color:var(--navy); }
.btn-solid:hover,.btn-solid:focus-visible{
  transform:translateY(-2px); box-shadow:0 6px 22px rgba(232,115,74,.45); color:var(--navy);
}
.btn-outline{ border:1.5px solid var(--cyan); color:var(--cyan); }
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--cyan); color:var(--navy); transform:translateY(-2px);
}
.btn-ghost{ background:transparent; border:1.5px solid rgba(248,245,238,.35);
            color:rgba(248,245,238,.75); }
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px);
}
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

.link-arrow{
  font-family:var(--util); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:13px; color:var(--sand);
  border-bottom:1px solid rgba(245,217,176,.4); padding-bottom:2px;
}
.link-arrow:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------- header ------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(7,22,32,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.site-head__in{ display:flex; align-items:center; gap:1rem; padding-block:.55rem; }
.brand img{ height:54px; width:auto; }
@media (max-width:600px){ .brand img{ height:42px; } }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.1rem; flex-wrap:wrap; }
.nav a{
  font-family:var(--util); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:13.5px; color:var(--white);
  padding:.5rem .58rem; transition:color var(--t);
}
.nav a:hover{ color:var(--cyan); }
.nav a[aria-current="page"]{ color:var(--pink); }
.head-cta{ display:flex; gap:.5rem; margin-left:.8rem; }

.nav-toggle{
  display:none; margin-left:auto; background:transparent;
  border:1.5px solid rgba(248,245,238,.35); color:var(--white);
  font-family:var(--util); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:13px;
  padding:.5rem .95rem; border-radius:999px; cursor:pointer;
}
@media (max-width:1100px){
  .nav-toggle{ display:block; }
  .nav{ order:3; width:100%; flex-direction:column; align-items:stretch; gap:0;
        max-height:0; overflow:hidden; transition:max-height var(--t); }
  .nav a{ padding:.75rem .4rem; border-bottom:1px solid var(--line); }
  .head-cta{ margin:.7rem 0 .3rem; }
  .site-head.is-open .nav{ max-height:78vh; overflow:auto; padding-block:.4rem; }
}

/* ---------- hero --------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--navy);
  min-height:clamp(400px,54vh,560px); display:grid; align-items:center;
}
.hero--tall{ min-height:clamp(560px,86vh,860px); }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,22,32,.72) 0%,rgba(7,22,32,.8) 50%,var(--navy) 100%);
}
.hero__in{ padding-block:clamp(2.2rem,5vw,3.8rem); position:relative; z-index:4; }
.hero__logo{ width:min(620px,86%); margin:0 auto 1.1rem;
             filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)); }
.hero--tall .hero__in{ text-align:center; }
.hero--tall .lead{ margin-inline:auto; }
.hero--tall .btn-row{ justify-content:center; }

/* the screen-print palms that frame the homepage hero */
.palm{
  position:absolute; bottom:-10px; width:540px; height:auto; z-index:3;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)); pointer-events:none;
}
.palm.left{ left:0; }
.palm.right{ right:-10px; width:600px; }
.palm.left-back{ left:190px; width:330px; opacity:.72; }
.palm.right-back{ right:190px; width:330px; opacity:.72; }

/* --- motion, lifted verbatim from the live homepage --------------------- */
/* Pivot at the base of the trunk, not the middle of the image. */
.palm{ transform-origin:50% 100%; }
.palm.left      { animation:palmSway      6s   ease-in-out infinite; }
.palm.right     { animation:palmSwayRight 6s   ease-in-out infinite; }
.palm.left-back { animation:palmSway      7.5s ease-in-out infinite -2s; }
.palm.right-back{ animation:palmSwayRight 8.5s ease-in-out infinite -3s; }

@keyframes palmSway{
  0%,100%{ transform:rotate(-2.2deg); }
  50%    { transform:rotate(2.2deg); }
}
@keyframes palmSwayRight{
  0%,100%{ transform:scaleX(-1) rotate(-2.2deg); }
  50%    { transform:scaleX(-1) rotate(2.2deg); }
}
@keyframes logoFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}
@keyframes waveScroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* the hero wordmark drifts, 5s */
.hero__logo{ animation:logoFloat 5s ease-in-out infinite; }

/* the scrolling wave along the bottom of the hero, 18s */
.wave{
  position:absolute; left:0; bottom:-1px; width:200%; height:clamp(70px,9vw,130px);
  z-index:2; pointer-events:none; animation:waveScroll 18s linear infinite;
}
.wave svg{ width:100%; height:100%; display:block; }

@media (prefers-reduced-motion:reduce){
  .palm,.hero__logo,.wave{ animation:none !important; }
  .palm.left{ transform:rotate(-2.2deg); }
  .palm.right{ transform:scaleX(-1) rotate(-2.2deg); }
  .palm.left-back{ transform:rotate(2deg); }
  .palm.right-back{ transform:scaleX(-1) rotate(2deg); }
}
@media (max-width:980px){
  .palm{ width:320px; } .palm.right{ width:350px; }
  .palm.left-back,.palm.right-back{ display:none; }
}
@media (max-width:620px){ .palm{ width:210px; opacity:.9; } .palm.right{ width:230px; } }

/* the cream postcard stamp pinned top-right */
.stamp{
  position:fixed; top:78px; right:16px; z-index:50;
  background:var(--sand); color:var(--navy);
  border:2px dashed rgba(7,22,32,.35); border-radius:3px;
  padding:.45rem .75rem; text-align:center; pointer-events:none;
  font-family:var(--util); text-transform:uppercase; line-height:1.15;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.stamp b{ display:block; font-weight:700; letter-spacing:.12em; font-size:11px; }
.stamp span{ display:block; color:var(--pink); font-size:10px; letter-spacing:.1em; }
@media (max-width:900px){ .stamp{ display:none; } }

/* ---------- sections ----------------------------------------------------- */
.sec{ padding-block:clamp(2.6rem,5.5vw,4.4rem); position:relative; }
.sec--alt{ background:var(--navy2); }
.sec--deep{ background:#050f15; }
.sec + .sec{ border-top:1px solid var(--line); }
.sec-head{ max-width:64ch; margin-bottom:clamp(1.3rem,2.8vw,2rem); }

.row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:clamp(1.5rem,3.5vw,3rem); align-items:center; }
.row--flip > *:first-child{ order:2; }
@media (max-width:760px){ .row--flip > *:first-child{ order:0; } }
.row__media img{ width:100%; border-radius:14px; }

.tilt{ transform:rotate(2.4deg); border:8px solid var(--white); border-radius:4px;
       box-shadow:0 18px 40px rgba(0,0,0,.45); overflow:hidden; }
.tilt img{ border-radius:0; }
.tilt--l{ transform:rotate(-2.4deg); }

/* ---------- chips -------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.chip{
  font-family:var(--util); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:12.5px; color:var(--white);
  background:var(--navy3); border:1px solid var(--line);
  border-radius:999px; padding:.5rem .95rem;
}

/* ---------- cards -------------------------------------------------------- */
.grid{ display:grid; gap:clamp(.9rem,1.8vw,1.4rem); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); grid-auto-rows:1fr; }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

.card{
  background:var(--navy2); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.card:hover{ transform:translateY(-3px); border-color:var(--cyan);
             box-shadow:0 14px 34px rgba(0,0,0,.45); }
.card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--navy3); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:1.05rem 1.15rem 1.25rem; flex:1; }
.card__body h3{ margin:0 0 .35rem; }
.card__body p{ margin:0; font-size:.92rem; color:rgba(248,245,238,.66); }

.stat-big{ font-family:var(--display); font-size:clamp(2.8rem,7vw,4.5rem);
           color:var(--pink); line-height:1; text-align:center; margin:0 0 .6rem; }

/* ---------- schedule ----------------------------------------------------- */
.day{ margin-bottom:clamp(1.7rem,3.2vw,2.4rem); }
.day__hd{ font-size:clamp(1.4rem,2.6vw,2rem); color:var(--pink);
          border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:1rem; }
.timeline{ list-style:none; margin:0; padding:0; }
.tl{ padding:0 0 1.15rem 1.4rem; border-left:1px solid var(--line); position:relative; }
.tl::before{ content:""; position:absolute; left:-5px; top:.5rem;
             width:9px; height:9px; background:var(--pink); border-radius:50%; }
.tl__when{ font-family:var(--util); font-weight:700; letter-spacing:.16em;
           text-transform:uppercase; font-size:12.5px; color:var(--cyan); display:block; }
.tl__what{ font-size:clamp(1.05rem,1.8vw,1.35rem); margin:.15rem 0 .3rem; }
.tl p{ margin:0; font-size:.92rem; color:rgba(248,245,238,.66); }

/* ---------- prose -------------------------------------------------------- */
.prose{ columns:2 30ch; column-gap:clamp(1.8rem,4vw,3rem); }
.prose > h2,.prose > h3{ column-span:all; margin-top:1.5rem; }
.prose h3{ color:var(--cyan); }
.prose ul{ padding-left:1.1rem; }
.prose li{ margin-bottom:.4rem; }
@media (max-width:760px){ .prose{ columns:1; } }

/* ---------- logo wall / gallery ------------------------------------------ */
.logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:1px; background:var(--line); border:1px solid var(--line);
        border-radius:14px; overflow:hidden; }
.logos div{ background:var(--white); aspect-ratio:16/10; display:grid;
            place-items:center; padding:1rem; }
.logos img{ max-height:100%; width:auto; object-fit:contain; }

.gallery{ columns:3 240px; column-gap:1rem; }
.gallery img{ margin-bottom:1rem; border-radius:14px; break-inside:avoid; }

.callout{ border:1px solid var(--line); border-radius:14px;
          background:var(--navy2); padding:clamp(1.3rem,3vw,2rem); }

/* ---------- footer ------------------------------------------------------- */
.site-foot{ background:#050f15; border-top:1px solid var(--line);
            padding-block:clamp(2.4rem,5vw,3.6rem); }
.foot-grid{ display:grid; gap:1.8rem;
            grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.foot-grid h4{ font-family:var(--util); font-weight:700; letter-spacing:.2em;
               font-size:13px; color:var(--cyan); margin-bottom:.7rem;
               text-transform:uppercase; }
.foot-grid a{ display:block; color:rgba(248,245,238,.66); padding:.2rem 0; font-size:.92rem; }
.foot-grid a:hover{ color:var(--white); }
.foot-note{ color:rgba(248,245,238,.66); font-size:.92rem; }
.foot-bot{ margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--line);
           display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
           font-family:var(--util); text-transform:uppercase; letter-spacing:.14em;
           font-size:12px; color:rgba(248,245,238,.42); }

/* ---------- utilities ---------------------------------------------------- */
.skip{ position:absolute; left:-9999px; top:0; background:var(--pink);
       color:var(--navy); padding:.8rem 1.2rem; z-index:200;
       font-family:var(--util); text-transform:uppercase; letter-spacing:.14em; }
.skip:focus{ left:.5rem; top:.5rem; }
.center{ text-align:center; }
.mt0{ margin-top:0; }
.mt-sm{ margin-top:1rem; }
.mt-lg{ margin-top:2rem; }
.mb-lg{ margin-bottom:2rem; }
.btn-row--center{ justify-content:center; }

.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none;
            transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* homepage hero centres its eyebrow rule; inner rows get consistent spacing */
.center-rule{ justify-content:center; }
.lead--mid{ margin-inline:auto; }
.row--sp{ margin-bottom:clamp(1.8rem,3.5vw,3rem); }
.row--sp:last-of-type{ margin-bottom:0; }

/* inner-page heroes are half the height of the homepage, so the palms scale
   with them instead of swallowing the headline */
.hero:not(.hero--tall) .palm{ width:300px; opacity:.85; }
.hero:not(.hero--tall) .palm.right{ width:330px; }
.hero:not(.hero--tall) .palm.left-back,
.hero:not(.hero--tall) .palm.right-back{ display:none; }
@media (max-width:980px){
  .hero:not(.hero--tall) .palm{ width:190px; opacity:.7; }
  .hero:not(.hero--tall) .palm.right{ width:210px; }
}
/* keep the headline clear of them */
.hero:not(.hero--tall) .hero__in{ position:relative; z-index:5; }

/* a logo is not a photograph - give it a tile so it reads on navy */
.logo-tile{
  background:var(--white); border-radius:14px; padding:clamp(1.2rem,3vw,2rem);
  display:grid; place-items:center; aspect-ratio:16/10;
}
.logo-tile img{ max-height:100%; width:auto; object-fit:contain; }