/* ============================================
   CLAY & COURT — Design tokens
   Beige #F6EFE4 · Navy #0C2A45 · Gold #C9A15E · Brown #8B5E3C
   Display/editorial: Cormorant Garamond · Utility: Montserrat
   ============================================ */

:root{
  --beige: #F6EFE4;
  --beige-deep: #EEE1CB;
  --navy: #0C2A45;
  --navy-deep: #071B2E;
  --gold: #C9A15E;
  --gold-deep: #A67C3D;
  --brown: #8B5E3C;
  --ink: #1E2A33;
  --ink-soft: rgba(30,42,51,.64);
  --cream-text: rgba(246,239,228,.82);
  --line: rgba(30,42,51,.14);
  --line-light: rgba(246,239,228,.2);

  --font-editorial: 'Cormorant Garamond', serif;
  --font-utility: 'Montserrat', sans-serif;

  --container: 1180px;
  --edge: clamp(24px, 6vw, 96px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--beige);
  color:var(--ink);
  font-family:var(--font-utility);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p{margin:0;}
em{font-style:italic;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.rule{display:block; width:32px; height:1px; background:var(--ink); opacity:.35;}
.rule--gold{background:var(--gold); opacity:1;}
.rule--light{background:var(--cream-text); opacity:.5;}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px var(--edge);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.is-scrolled{
  background:rgba(12,42,69,.92);
  backdrop-filter:blur(10px);
  padding:12px var(--edge);
  box-shadow:0 1px 0 rgba(201,161,94,.25);
}
.nav.is-scrolled .nav__links a:not(.nav__cta){color:var(--cream-text);}
.nav.is-scrolled .nav__links a:not(.nav__cta):hover{color:#fff;}
.nav.is-scrolled .lang-toggle{border-color:rgba(246,239,228,.3); color:var(--cream-text);}

.nav__inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__mark{display:flex; align-items:center; gap:10px;}
.nav__mark img{height:36px; width:auto;}
.nav__word{
  font-family:var(--font-editorial); font-size:19px; font-weight:600; letter-spacing:.04em; color:var(--navy);
}
.nav.is-scrolled .nav__word{color:#fff;}
.nav__word em{color:var(--gold-deep); font-style:normal;}
.nav.is-scrolled .nav__word em{color:var(--gold);}

.nav__links{display:flex; align-items:center; gap:32px;}
.nav__links a{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  position:relative; padding-bottom:4px;
}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s ease;
}
.nav__links a:not(.nav__cta):hover::after{width:100%;}
.nav__links a.is-active::after{width:100%;}
.nav__cta{
  color:var(--navy) !important; background:var(--gold);
  padding:9px 18px; border-radius:2px; font-weight:700;
}
.nav__cta:hover{background:var(--gold-deep);}

.lang-toggle{
  display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:20px;
  padding:3px; font-size:11px; letter-spacing:.06em; font-weight:700;
}
.lang-toggle button{
  background:none; border:none; padding:5px 11px; border-radius:16px; cursor:pointer;
  color:inherit; opacity:.55; transition:all .25s ease;
}
.lang-toggle button.is-active{background:var(--gold); color:var(--navy); opacity:1;}

.nav__burger{display:none;}

/* ---------- HERO (shared look, page-specific content) ---------- */
.hero{
  position:relative; min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--beige-deep) 0%, var(--beige) 55%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:150px var(--edge) 70px;
  overflow:hidden;
  text-align:center;
}
.hero__waves{
  position:absolute; left:0; right:0; bottom:-2px; z-index:1; opacity:.9;
}
.hero__icon{
  width:86px; height:86px; margin-bottom:30px; opacity:.95;
  animation:fadeIn 1.2s ease both;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:.95; transform:translateY(0);} }

.hero__content{ position:relative; z-index:2; max-width:780px; }
.eyebrow{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:20px;
}
.hero .eyebrow{ color:var(--brown); }
.hero__brandname{
  font-family:var(--font-editorial); font-weight:600;
  font-size:clamp(26px, 3.4vw, 38px); letter-spacing:.06em;
  color:var(--navy); margin-bottom:6px;
}
.hero__brandname em{ color:var(--gold-deep); font-style:normal; }
.hero__tagline{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; margin-bottom:34px;
}
.hero__title{
  font-family:var(--font-editorial); font-weight:600;
  font-size:clamp(34px, 5.6vw, 60px); line-height:1.14;
  color:var(--navy); letter-spacing:.01em; margin-bottom:24px;
}
.hero__title em{color:var(--gold-deep); font-style:italic;}
.hero__lede{
  font-family:var(--font-editorial); font-style:italic; font-weight:400;
  font-size:clamp(18px, 2vw, 22px); line-height:1.55;
  color:var(--ink-soft); max-width:600px; margin:0 auto 40px;
}
.hero__actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; border-radius:2px; transition:all .3s ease; border:1px solid transparent;
  cursor:pointer;
}
.btn--gold{background:var(--gold); color:var(--navy-deep);}
.btn--gold:hover{background:#dcb876; transform:translateY(-1px);}
.btn--ghost{border-color:rgba(255,255,255,.35); color:#fff;}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn--ghost-dark{border-color:rgba(30,42,51,.3); color:var(--ink);}
.btn--ghost-dark:hover{border-color:var(--navy); color:var(--navy);}
.btn--wide{width:100%;}

/* ---------- SECTIONS ---------- */
.section{ padding:120px var(--edge); }
.section--beige{ background:var(--beige); }
.section--beige-deep{ background:var(--beige-deep); }
.section--navy{ background:var(--navy); }
.section--dark{ background:var(--navy-deep); }

.section__head{ max-width:var(--container); margin:0 auto 56px; text-align:center; }
.section__head--left{ text-align:left; margin-bottom:48px; }
.section__label{
  display:flex; align-items:center; gap:12px; justify-content:center;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; margin-bottom:20px;
}
.section__head--left .section__label{ justify-content:flex-start; }
.section__label--light{color:var(--cream-text);}

.h2{
  font-family:var(--font-editorial); font-weight:600;
  font-size:clamp(28px, 3.8vw, 44px); line-height:1.2; letter-spacing:.005em;
  color:var(--navy);
}
.h2 em{ color:var(--gold-deep); font-style:italic; }
.h2--light{color:#fff;}
.h2--light em{color:var(--gold);}

.lead{
  font-size:16.5px; line-height:1.8; color:var(--ink-soft);
  max-width:640px; margin:20px auto 0;
}
.lead--light{color:var(--cream-text);}

/* ---------- Brand statement ---------- */
.statement{
  max-width:760px; margin:0 auto; text-align:center;
}
.statement p{
  font-family:var(--font-editorial); font-style:italic; font-weight:400;
  font-size:clamp(20px, 2.6vw, 28px); line-height:1.6; color:var(--navy);
}

/* ---------- Resort directory ---------- */
.resorts{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.resort-card{
  background:var(--beige); border:1px solid var(--line); border-radius:2px;
  overflow:hidden; transition:transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.resort-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(12,42,69,.35); }
.resort-card__media{
  height:230px; position:relative; overflow:hidden;
}
.resort-card__media svg{ width:100%; height:100%; }
.resort-card__loc{
  position:absolute; top:16px; left:16px; z-index:2;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(12,42,69,.55); padding:6px 12px; border-radius:20px;
  backdrop-filter:blur(4px);
}
.resort-card__body{ padding:26px 24px 28px; flex:1; display:flex; flex-direction:column; }
.resort-card__body h3{
  font-family:var(--font-editorial); font-size:23px; font-weight:600; color:var(--navy); margin-bottom:6px;
}
.resort-card__tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:14px;
}
.resort-card__body p{ font-size:14px; line-height:1.65; color:var(--ink-soft); flex:1; }
.resort-card__link{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--navy);
}
.resort-card__link svg{ width:14px; height:14px; transition:transform .3s ease; }
.resort-card:hover .resort-card__link svg{ transform:translateX(4px); }
.resort-card--soon{ opacity:.88; }
.resort-card--soon .resort-card__body p{ font-style:italic; }

/* ---------- Values strip ---------- */
.values{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.value{ text-align:center; }
.value__icon{
  width:44px; height:44px; margin:0 auto 18px; color:var(--gold);
}
.value h3{ font-size:15px; font-weight:600; color:var(--navy); margin-bottom:10px; letter-spacing:.02em; }
.value p{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); }

/* ---------- Team ---------- */
.team{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.team-card{
  background:var(--beige); border:1px solid var(--line); border-radius:2px;
  padding:34px 28px; text-align:center;
}
.team-card__avatar{
  width:88px; height:88px; border-radius:50%; margin:0 auto 20px;
  background:var(--navy); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-editorial); font-size:26px; font-weight:600; color:var(--gold);
  overflow:hidden; border:2px solid var(--gold);
}
.team-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card h3{ font-family:var(--font-editorial); font-size:21px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.team-card__role{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:18px;
}
.team-card__timeline{ list-style:none; margin:0; padding:0; text-align:left; }
.team-card__timeline li{
  position:relative; padding:0 0 16px 22px; font-size:13px; line-height:1.55; color:var(--ink-soft);
  border-left:1px solid var(--line);
}
.team-card__timeline li:last-child{ padding-bottom:0; border-left-color:transparent; }
.team-card__timeline li::before{
  content:''; position:absolute; left:-4px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.team-card__timeline strong{ display:block; color:var(--navy); font-weight:600; margin-bottom:2px; }
.team-card p:not(.team-card__role){ font-size:13.5px; line-height:1.7; color:var(--ink-soft); text-align:left; }
.team-card--placeholder{
  background:transparent; border:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.team-card--placeholder .team-card__avatar{
  background:transparent; border:1px dashed var(--ink-soft); color:var(--ink-soft); font-size:22px;
}
.team-card--placeholder p{ text-align:center !important; font-size:13px; }

/* ---------- Partner (hotel) discreet CTA ---------- */
.partner-cta{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding:40px 44px; border:1px solid var(--line); border-radius:2px; background:var(--beige-deep);
}
.partner-cta__text h3{ font-family:var(--font-editorial); font-size:21px; color:var(--navy); margin-bottom:6px; font-weight:600;}
.partner-cta__text p{ font-size:13.5px; color:var(--ink-soft); max-width:460px; }

/* ---------- Resort page: program blocks ---------- */
.program{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:280px 1fr; gap:56px;
}
.program__nav{ position:sticky; top:120px; align-self:start; }
.program__nav a{
  display:block; padding:10px 0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); border-left:2px solid var(--line); padding-left:16px;
  transition:all .25s ease;
}
.program__nav a:hover, .program__nav a.is-active{ color:var(--navy); border-color:var(--gold); }

.offer-list{ display:flex; flex-direction:column; gap:0; }
.offer{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line);
}
.offer:last-child{ border-bottom:1px solid var(--line); }
.offer h4{ font-family:var(--font-editorial); font-size:20px; font-weight:600; color:var(--navy); margin-bottom:8px; }
.offer p{ font-size:14px; line-height:1.65; color:var(--ink-soft); max-width:520px; }
.offer__price{ text-align:right; white-space:nowrap; padding-top:2px; }
.offer__price strong{ font-family:var(--font-editorial); font-size:19px; color:var(--navy); }
.offer__price span{ display:block; font-size:11px; color:var(--ink-soft); letter-spacing:.04em; margin-top:2px; }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:12px;
}
.fact{ border-top:1px solid var(--line); padding-top:14px; }
.fact strong{ display:block; font-family:var(--font-editorial); font-size:22px; color:var(--navy); }
.fact span{ font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }

.schedule{ width:100%; border-collapse:collapse; margin-top:8px; }
.schedule th, .schedule td{ text-align:left; padding:14px 16px; font-size:13.5px; border-bottom:1px solid var(--line); }
.schedule th{ letter-spacing:.08em; text-transform:uppercase; font-size:11px; color:var(--ink-soft); font-weight:700; }
.schedule td{ color:var(--ink); }

.note-box{
  margin-top:36px; padding:22px 26px; border-left:2px solid var(--gold); background:var(--beige-deep);
  font-size:13.5px; line-height:1.7; color:var(--ink-soft);
}

/* ---------- CTA / FORM ---------- */
.cta__inner{max-width:640px; margin:0 auto; text-align:center;}
.form{margin-top:48px; text-align:left;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:20px;}
.field label{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; font-weight:700;
}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff; font-family:var(--font-utility); font-size:15px; padding:8px 2px;
  resize:vertical; transition:border-color .3s ease;
}
.field select option{ color:#111; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-bottom-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.32);}
.form__note{margin-top:16px; font-size:13px; color:var(--gold); min-height:1em;}
.direct-email{
  margin-top:26px; font-size:13.5px; color:var(--cream-text);
}
.direct-email a{ color:var(--gold); font-weight:600; border-bottom:1px solid rgba(201,161,94,.4); }

/* ---------- FOOTER ---------- */
.footer{padding:48px var(--edge) 36px; background:var(--navy-deep); border-top:1px solid rgba(201,161,94,.18);}
.footer__inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:32px;
}
.footer__mark{ display:flex; flex-direction:column; align-items:flex-start; }
.footer__mark-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__mark-row img{ height:30px; }
.footer__mark-word{
  font-family:var(--font-editorial); font-size:18px; font-weight:600; letter-spacing:.04em; color:#fff;
}
.footer__mark-word em{ color:var(--gold); font-style:normal; }
.footer__mark p{ font-size:12.5px; color:rgba(246,239,228,.45); max-width:280px; line-height:1.6; }
.footer__col h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer__col a, .footer__col p{ display:block; font-size:13px; color:rgba(246,239,228,.65); margin-bottom:8px; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{
  max-width:var(--container); margin:36px auto 0; padding-top:24px; border-top:1px solid rgba(246,239,228,.1);
  font-size:11.5px; color:rgba(246,239,228,.4);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .resorts{ grid-template-columns:1fr; }
  .values{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .program{ grid-template-columns:1fr; gap:24px; }
  .program__nav{ position:static; display:flex; gap:8px; overflow-x:auto; }
  .program__nav a{ border-left:none; border-bottom:2px solid var(--line); padding:8px 4px; white-space:nowrap; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .partner-cta{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 900px){
  .form__row{grid-template-columns:1fr;}
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:320px;
    background:var(--navy-deep); flex-direction:column; align-items:flex-start;
    padding:110px 32px 32px; gap:26px;
    transform:translateX(100%); transition:transform .4s ease;
  }
  .nav__links.is-open{transform:translateX(0);}
  .nav__links a:not(.nav__cta){ color:var(--cream-text) !important; }
  .nav__burger{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:101;
  }
  .nav__burger span{width:22px; height:1.5px; background:var(--navy); transition:transform .3s ease, opacity .3s ease;}
  .nav.is-scrolled .nav__burger span{ background:#fff; }
}

@media (max-width: 560px){
  .section{padding:88px var(--edge);}
  .offer{ grid-template-columns:1fr; }
  .offer__price{ text-align:left; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}