:root{
  --bg:#f6f1e8;
  --bg-elevated:#fffaf2;
  --bg-soft:#efe7d9;
  --ink:#11110f;
  --ink-soft:#575147;
  --ink-muted:#756d62;
  --line:#d7cdbd;
  --gold:#bc9652;
  --gold-deep:#8f6b31;
  --charcoal:#171614;
  --charcoal-soft:#23211d;
  --success:#1c7d54;
  --error:#a43f2c;
  --shadow:0 24px 60px rgba(31,24,13,.10);
  --radius:26px;
  --radius-sm:18px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top, rgba(188,150,82,.09), transparent 34%),
    linear-gradient(180deg, #faf6ef 0%, var(--bg) 30%, #f2ebde 100%);
  color:var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.serif{font-family:Georgia,"Times New Roman",serif}

.site-nav{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(250,246,239,.84);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.site-nav.scrolled{border-color:rgba(17,17,15,.08);background:rgba(250,246,239,.94)}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  width:88px;
  height:88px;
  margin:8px 0;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(180deg,#fffaf4,#f4ebdc);
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 10px 24px rgba(188,150,82,.10);
}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.footer .brand-mark{width:140px;height:140px}
.brand-lockup{display:flex;flex-direction:column;gap:4px}
.brand-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.brand-subtitle{
  color:var(--gold);
  font-size:10px;
  letter-spacing:.52em;
  text-transform:uppercase;
}
.nav-links{
  display:flex;
  gap:22px;
  align-items:center;
  color:var(--ink-soft);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.nav-links a:hover,.footer-links a:hover{color:var(--ink)}
.nav-cta,.btn,.btn-outline,.channel-pill,.sheet-submit{
  min-height:48px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
}
.nav-cta,.btn,.sheet-submit{
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid rgba(17,17,15,.14);
}

.hero{
  padding:18px 0 0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:18px;
  align-items:stretch;
}
.hero-copy,.hero-visual,.section-panel,.editorial-feature,.article-card,.service-card,.contact-panel{
  border:1px solid rgba(17,17,15,.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-copy{
  background:linear-gradient(180deg,#fffdf8, #f8f1e5);
  padding:58px 48px;
}
.eyebrow,.section-kicker,.detail-label,.footer-caption,.mini-tag{
  color:var(--gold-deep);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
}
h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  margin:0;
  letter-spacing:-.03em;
}
h1{font-size:clamp(52px,9vw,86px);line-height:.94;margin-top:20px}
h2{font-size:clamp(36px,6vw,60px);line-height:.98}
h3{font-size:28px;line-height:1.05}
.hero-copy p,.section-lead,.article-copy,.step p,.contact-panel p,.footer-note,.copy-block p,.quote cite,.legal p,.legal li{
  color:var(--ink-soft);
}
.hero-copy p{
  font-size:18px;
  max-width:640px;
  margin:22px 0 0;
}
.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.hero-visual{
  position:relative;
  min-height:680px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),
    url("/assets/hero-sunset-club.webp") center/cover no-repeat;
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:44%;
  background:linear-gradient(180deg,transparent,rgba(14,12,10,.72));
}
.hero-card{
  position:absolute;
  right:24px;
  bottom:24px;
  width:min(360px, calc(100% - 48px));
  background:rgba(15,13,11,.86);
  color:#f9f3e9;
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  z-index:1;
}
.hero-card p{font-family:Georgia,"Times New Roman",serif;font-size:28px;line-height:1.15;margin:0 0 16px}
.hero-card small{color:#dfc28b;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.trust-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  padding:18px 0 0;
}
.trust-item{
  background:rgba(255,250,242,.75);
  border:1px solid rgba(17,17,15,.08);
  border-radius:18px;
  text-align:center;
  padding:16px 10px;
  color:var(--ink-soft);
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

section{padding:88px 0}
.section-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:760px;
}
.section-lead{font-size:17px;margin:0}
.services-grid,.guides-grid,.route-grid{
  display:grid;
  gap:14px;
  margin-top:40px;
}
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-card{
  background:rgba(255,252,245,.8);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:220px;
}
.service-card p,.guide-card p,.route-card p{margin:0;color:var(--ink-muted)}
.service-number{font-size:10px;color:var(--gold-deep);letter-spacing:.2em;text-transform:uppercase}

.dark-band{
  background:linear-gradient(180deg,#171614,#11110f);
  color:#f7efe3;
}
.dark-band .section-lead,.dark-band .step p,.dark-band .step-link{color:#bdb5a7}
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:40px;
}
.step{
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.step-label{color:#d1af70;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.step h3{margin-top:18px}

.editorial-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
  margin-top:38px;
}
.editorial-feature{
  min-height:450px;
  position:relative;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.48)),
    linear-gradient(135deg,#d8bc8a,#727f77 52%,#202722);
  color:#fff;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.feature-link{
  position:absolute;
  inset:0;
}
.guide-stack,.guides-grid{display:grid;gap:18px}
.article-card,.guide-card,.route-card,.section-panel,.contact-panel,.quote,.legal{
  background:rgba(255,251,244,.86);
}
.article-card,.guide-card,.route-card{
  position:relative;
  padding:28px;
  min-height:196px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(17,17,15,.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.article-card a,.guide-card a,.route-card a{position:absolute;inset:0}
.guides-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.quote{
  border:1px solid rgba(17,17,15,.08);
  border-radius:var(--radius);
  padding:44px 28px;
  text-align:center;
}
.quote blockquote{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4vw,44px);
  line-height:1.12;
  max-width:850px;
  margin:10px auto 18px;
}
.quote cite{
  display:block;
  font-style:normal;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.contact-panel{
  padding:46px 28px;
  text-align:center;
}
.contact-panel .button-row{justify-content:center}

.footer{
  padding:48px 0 120px;
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  border-top:1px solid rgba(17,17,15,.08);
  padding-top:28px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:12px;
  color:var(--ink-soft);
}
.footer-note{
  margin-top:12px;
  max-width:680px;
  font-size:12px;
}

.mobile-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:none;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(17,17,15,.96);
  border-top:1px solid rgba(255,255,255,.10);
  gap:10px;
}
.mobile-bar button{
  flex:1;
  min-height:50px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:#26231d;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
}
.mobile-bar button[data-channel="whatsapp"]{background:#1e3126}
.mobile-bar button[data-channel="telegram"]{background:#1c2735}

.sheet-root{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.sheet-root.open{display:block}
.sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,17,15,.48);
}
.sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height:min(92vh,860px);
  overflow:auto;
  background:#fffbf5;
  border-radius:28px 28px 0 0;
  padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -24px 60px rgba(17,17,15,.20);
}
.sheet-header{
  position:sticky;
  top:0;
  background:#fffbf5;
  padding-bottom:14px;
  z-index:1;
}
.sheet-grabber{
  width:52px;
  height:5px;
  border-radius:999px;
  background:#ddd1bf;
  margin:0 auto 18px;
}
.sheet-copy p{margin:10px 0 0;color:var(--ink-soft)}
.form-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.field{
  display:grid;
  gap:8px;
}
.field label{
  font-size:12px;
  color:var(--ink-soft);
  font-weight:600;
}
.field input,.field textarea{
  width:100%;
  min-height:52px;
  border-radius:18px;
  border:1px solid #d8cdbd;
  background:#fff;
  padding:14px 16px;
  color:var(--ink);
}
.field textarea{min-height:118px;resize:vertical}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  border:1px solid rgba(17,17,15,.12);
  background:rgba(255,250,241,.8);
  color:var(--ink);
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
}
.chip.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.sheet-actions{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.sheet-status{
  display:none;
  margin-top:14px;
  border-radius:18px;
  padding:14px 16px;
  font-size:14px;
}
.sheet-status.visible{display:block}
.sheet-status.success{background:#edf7f1;color:var(--success)}
.sheet-status.error{background:#fbede9;color:var(--error)}
.sheet-helper{
  font-size:12px;
  color:var(--ink-muted);
  margin-top:8px;
}

.page-hero{
  padding:44px 0 0;
}
.section-panel,.legal{
  padding:32px;
}
.breadcrumb{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--ink-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-bottom:18px;
}
.copy-block{display:grid;gap:16px}
.copy-block ul{margin:0;padding-left:20px;color:var(--ink-soft)}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.channel-pill{
  border:1px solid rgba(17,17,15,.10);
  background:#fff;
  color:var(--ink);
}

@media (max-width:980px){
  .nav-links{display:none}
  .hero-grid,.editorial-grid,.steps,.guides-grid,.route-grid,.services-grid{grid-template-columns:1fr}
  .hero-visual{min-height:420px}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .trust-item:last-child{grid-column:1 / -1}
  .guide-stack{grid-template-columns:1fr}
}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .nav-inner{min-height:64px}
  .brand-title{font-size:15px}
  .brand-subtitle{font-size:9px}
  .nav-cta{display:none}
  .hero-copy{padding:40px 22px}
  h1{font-size:46px}
  .hero-copy p{font-size:16px}
  .button-row{display:grid;grid-template-columns:1fr}
  .btn,.btn-outline,.sheet-submit{width:100%}
  .hero-visual{min-height:340px;background-position:center 38%}
  .hero-card{
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
    padding:18px;
  }
  .hero-card p{font-size:22px}
  section{padding:68px 0}
  .service-card,.article-card,.guide-card,.route-card,.section-panel,.legal,.contact-panel{padding:22px}
  .mobile-bar{display:flex}
  .footer{padding-bottom:128px}
  .sheet{padding-left:14px;padding-right:14px}
}