:root {
  color-scheme: light;
  --paper: #f2f0e8;
  --ink: #18221e;
  --muted: #526057;
  --line: #d9ddd4;
  --line-strong: #c9d1c5;
  --forest: #183b31;
  --forest-soft: #234c3d;
  --lime: #d7f56b;
  --accent-strong: #4d682a;
  --focus-ring: #506b29;
  --blue: #2c6e80;
  --card: #fffefa;
  --radius: 22px;
  --surface-soft: #e6e9dc;
  --surface-warm: #f7f5ec;
  --hero-start: #193b31;
  --hero-end: #142c26;
  --hero-text: #f8f8ee;
  --hero-muted: #d2ddd4;
  --hero-link: #d7f56b;
  --hero-glow: rgba(215, 245, 107, .17);
  --cal-gradient: linear-gradient(115deg, #e4eadb, #f7f5ec 55%, #e7efe6);
  --insta-gradient: linear-gradient(120deg, #e9e5d9, #f7f5ed 56%, #e6ebdd);
  --pattern: rgba(24, 59, 49, .12);
  --media-panel: rgba(250, 250, 244, .79);
  --media-panel-border: rgba(255, 255, 255, .76);
  --media-text: #18221e;
  --media-copy: rgba(24, 34, 30, .82);
  --media-accent: #3f602f;
  --shadow: 0 18px 48px -32px rgba(22, 39, 30, .35);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b110e;
  --ink: #edf2ea;
  --muted: #a5b0a5;
  --line: #26372c;
  --line-strong: #34483a;
  --forest: #31553f;
  --forest-soft: #416b4e;
  --lime: #d7f56b;
  --accent-strong: #c3e982;
  --focus-ring: #d7f56b;
  --blue: #8ccbd8;
  --card: #151e18;
  --surface-soft: #18241c;
  --surface-warm: #101812;
  --hero-start: #234638;
  --hero-end: #14271e;
  --hero-text: #f3f7ef;
  --hero-muted: #d0ddcf;
  --hero-link: #ddf892;
  --hero-glow: rgba(215, 245, 107, .13);
  --cal-gradient: linear-gradient(115deg, #17231b, #111a14 55%, #18261c);
  --insta-gradient: linear-gradient(120deg, #1c251e, #151e18 56%, #20281d);
  --pattern: rgba(215, 245, 107, .075);
  --media-panel: rgba(10, 18, 14, .72);
  --media-panel-border: rgba(255, 255, 255, .2);
  --media-text: #f3f7ef;
  --media-copy: rgba(243, 247, 239, .9);
  --media-accent: #d7f56b;
  --shadow: 0 18px 48px -32px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.grid-bg {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(var(--pattern) .8px, transparent .8px);
  background-size: 22px 22px;
  opacity: .32;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  pointer-events: none;
}

a { color: var(--blue); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.mono { font-family: 'JetBrains Mono', monospace; }
.acc { color: var(--lime); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.theme-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  margin-bottom: -7px;
}
.theme-control > span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 12px 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent-strong); background: var(--surface-soft); }
.theme-toggle:focus-visible { outline-offset: 3px; }
.theme-icon { color: var(--accent-strong); font-size: 15px; line-height: 1; }

.bento {
  width: min(100% - 40px, 1240px);
  margin: 0 auto;
  padding: 34px 0 22px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.tile:focus-visible { outline-offset: 4px; }

.hero {
  grid-column: span 8;
  min-height: 320px;
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  border-color: var(--forest);
  background:
    radial-gradient(ellipse at 91% 20%, var(--hero-glow), transparent 32%),
    linear-gradient(135deg, var(--hero-start), var(--hero-end) 74%);
  color: var(--hero-text);
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  right: -74px;
  bottom: -154px;
  border: 1px solid rgba(215, 245, 107, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(215, 245, 107, .035), 0 0 0 48px rgba(215, 245, 107, .025);
}
.tag { margin: 0 0 12px; color: var(--hero-link); font-size: 13px; }
h1 {
  margin: 0;
  font-size: clamp(52px, 7.3vw, 92px);
  line-height: .94;
  letter-spacing: -.07em;
}
.role { max-width: 650px; margin: 20px 0 14px; color: var(--hero-muted); font-size: clamp(17px, 1.8vw, 22px); }
.handles { margin: 0; color: var(--hero-muted); font-size: 12px; }
.handles a { color: var(--hero-link); }

.links { grid-column: span 4; padding: 26px; background: var(--surface-soft); }
.label { margin: 0 0 13px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
.links nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.links nav a {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, border-color .2s, transform .2s;
}
.links nav a i { color: var(--muted); font-size: 13px; font-style: normal; }
.links nav a:hover { transform: translateY(-2px); border-color: var(--accent-strong); background: var(--card); }

.sales-callout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 25px 30px;
  border-color: var(--forest);
  background:
    radial-gradient(ellipse at 92% 15%, var(--hero-glow), transparent 34%),
    linear-gradient(115deg, var(--hero-start), var(--hero-end));
  color: var(--hero-text);
}
.sales-callout .label { margin-bottom: 7px; color: var(--hero-link); }
.sales-callout h2 { max-width: 740px; margin: 0; font-size: clamp(23px, 3vw, 31px); line-height: 1.18; letter-spacing: -.045em; }
.sales-callout .sales-copy > p:last-child { max-width: 720px; margin: 9px 0 0; color: var(--hero-muted); font-size: 14px; }
.sales-cta { white-space: nowrap; }

.cal {
  grid-column: 1 / -1;
  padding: 28px 30px 30px;
  background: var(--cal-gradient);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.cal .acc { color: var(--accent-strong); }
.cal-intro { max-width: 700px; margin: 7px 0 22px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--forest);
  color: #fffefa;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.btn > span { display: inline-flex; margin-left: 8px; }
.btn:hover { transform: translateY(-2px); background: var(--forest-soft); box-shadow: 0 8px 20px -12px var(--forest); }
.sales-callout .sales-cta { border-color: var(--lime); background: var(--lime); color: #18221e; }
.sales-callout .sales-cta:hover { border-color: var(--hero-link); background: var(--hero-link); color: #18221e; box-shadow: 0 8px 20px -12px var(--hero-glow); }
.booking-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.booking-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 12px 28px -24px rgba(0, 0, 0, .3);
}
.booking-card:first-child, .booking-card:nth-child(2) { grid-column: span 2; min-height: 206px; }
.booking-card:first-child {
  isolation: isolate;
  border-color: var(--forest);
  background: radial-gradient(ellipse at 93% 12%, var(--hero-glow), transparent 36%), linear-gradient(120deg, var(--hero-start), var(--hero-end));
  color: var(--hero-text);
}
.booking-card:first-child::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -130px;
  right: -62px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(215, 245, 107, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(215, 245, 107, .035), 0 0 0 44px rgba(215, 245, 107, .025);
}
.booking-index { color: var(--accent-strong); font-size: 10px; }
.booking-card h3 { margin: 8px 0 5px; font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.booking-card > p { flex: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.booking-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 13px; }
.booking-meta span { padding: 5px 8px; border-radius: 7px; background: var(--surface-soft); color: var(--ink); font-size: 11px; font-weight: 600; }
.booking-link { gap: 8px; width: 100%; justify-content: space-between; }
.booking-card:first-child .booking-index,
.booking-card:first-child > p { color: var(--hero-muted); }
.booking-card:first-child h3 { font-size: 22px; }
.booking-card:first-child .booking-meta span { background: rgba(255, 255, 255, .12); color: var(--hero-text); }
.booking-card:first-child .booking-link { border-color: var(--lime); background: var(--lime); color: #18221e; }
.booking-card:first-child .booking-link:hover { border-color: var(--hero-link); background: var(--hero-link); color: #18221e; }

.sec {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 35px 0 -3px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.2;
  letter-spacing: -.05em;
}
.sec > .mono { display: inline-flex; min-width: 35px; align-items: center; justify-content: center; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--accent-strong); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.sec a { margin-left: auto; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.sec a:hover { color: var(--accent-strong); }

.products, .posts, .videos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 174px;
  grid-auto-flow: dense;
  gap: 14px;
}
.media {
  display: block;
  isolation: isolate;
  border-color: rgba(24, 34, 30, .13);
  background: var(--surface-warm);
  color: var(--media-text);
  box-shadow: 0 14px 32px -24px rgba(22, 39, 30, .6);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.media:hover { transform: translateY(-4px); border-color: rgba(24, 59, 49, .45); box-shadow: 0 22px 38px -24px rgba(22, 39, 30, .48); }
.media:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 22px 38px -24px rgba(22, 39, 30, .48); }
.media img, .link-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.media:hover img, .media:focus-visible img, .media:focus-within img, .link-card:hover > img, .link-card:focus-visible > img, .link-card:focus-within > img { transform: scale(1.04); }
.media::after, .link-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 10, 0) 28%, rgba(8, 12, 10, .08) 52%, rgba(8, 12, 10, .55) 100%); opacity: .84; transition: opacity .24s ease; }
.media:hover::after, .media:focus-visible::after, .media:focus-within::after, .link-card:hover::after, .link-card:focus-visible::after, .link-card:focus-within::after { opacity: 1; }
.media .body, .link-card__body { position: absolute; inset: auto 11px 11px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; max-height: calc(100% - 22px); padding: 12px 14px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: linear-gradient(115deg, rgba(7, 12, 9, .38), rgba(7, 12, 9, .54)); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .72); color: #fffefa; backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%); }
.media .body__details, .link-card__details { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(7px); transition: max-height .34s cubic-bezier(.2,.7,.2,1), opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
.media h3 { display: -webkit-box; overflow: hidden; margin: 0; color: #fffefa; font-size: 16px; line-height: 1.32; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media p { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(255, 254, 250, .88); font-size: 13px; line-height: 1.48; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media .small, .date { color: var(--lime); font-size: 11px; }
.date { display: block; margin-bottom: 5px; }
.media:hover .body__details, .media:focus-visible .body__details, .media:focus-within .body__details { max-height: 90px; opacity: 1; transform: translateY(0); }
.media:hover .body, .media:focus-visible .body, .media:focus-within .body, .link-card:hover .link-card__body, .link-card:focus-visible .link-card__body, .link-card:focus-within .link-card__body { border-color: rgba(255, 255, 255, .3); background: linear-gradient(115deg, rgba(7, 12, 9, .5), rgba(7, 12, 9, .68)); }
.big { grid-column: span 3; grid-row: span 2; }
.big h3 { font-size: 21px; }
.wide { grid-column: span 3; }
.sq { grid-column: span 2; }
.one { grid-column: span 1; }
.link-card-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}
.link-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-column: span 1;
  min-height: 262px;
  display: block;
  padding: 0;
  background: var(--surface-warm);
  color: var(--media-text);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.link-card:hover { transform: translateY(-3px); border-color: var(--accent-strong); box-shadow: 0 20px 38px -26px rgba(22, 39, 30, .42); }
.link-card__body { padding: 13px 15px; border-radius: 15px; transition: background-color .2s ease, border-color .2s ease; }
.link-card__details { display: flex; flex-direction: column; gap: 7px; }
.link-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-card__number, .link-card__kind { color: var(--lime); font-size: 10px; font-weight: 600; }
.link-card__kind { letter-spacing: .07em; }
.link-card h3 { margin: 0; color: #fffefa; font-size: 18px; line-height: 1.25; letter-spacing: -.025em; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); text-wrap: balance; }
.link-card p { margin: 0; color: rgba(255, 254, 250, .88); font-size: 13px; line-height: 1.48; text-wrap: pretty; }
.link-card__meta { margin-top: auto; color: var(--lime); font-size: 11px; line-height: 1.45; }
.link-card__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); color: var(--lime); font-size: 13px; font-weight: 700; }
.link-card--featured { grid-column: span 2; min-height: 286px; }
.link-card--featured h3 { font-size: 22px; }
.link-card--profile .link-card__body { border-color: rgba(255, 255, 255, .2); }
.link-card:hover .link-card__details, .link-card:focus-visible .link-card__details, .link-card:focus-within .link-card__details { max-height: 180px; opacity: 1; transform: translateY(0); }
.more { grid-column: 1 / -1; padding: 12px; text-align: center; }

.insta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 34px;
  background: var(--insta-gradient);
}
.insta h3 { margin: 0; font-size: 30px; letter-spacing: -.05em; }
.insta p { margin: 4px 0 0; }
.ig { border-color: var(--forest); background: var(--forest); color: #fffefa; }
.ig:hover { background: var(--forest-soft); }

footer { width: min(100% - 40px, 1240px); margin: 0 auto; padding: 22px 0 38px; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .hero { grid-column: span 7; }
  .links { grid-column: span 5; padding: 22px; }
  .links nav { grid-template-columns: 1fr 1fr; }
  .booking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products, .posts, .videos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .link-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big { grid-column: span 4; }
  .link-card--featured { grid-column: span 2; }
  .wide { grid-column: span 2; }
  .sq, .one { grid-column: span 2; }
}

@media (max-width: 620px) {
  .bento { width: min(100% - 28px, 520px); padding-top: 14px; gap: 11px; }
  .hero, .links, .cal { grid-column: 1 / -1; }
  .hero { min-height: 290px; padding: 28px 24px; }
  h1 { font-size: clamp(51px, 14vw, 72px); }
  .role { max-width: 440px; margin-top: 17px; font-size: 17px; }
  .handles { font-size: 10px; line-height: 1.8; }
  .links { padding: 19px; }
  .links nav { gap: 7px; }
  .links nav a { padding: 10px; font-size: 12px; }
  .sales-callout { grid-template-columns: 1fr; gap: 17px; padding: 22px 19px; }
  .sales-callout .sales-copy > p:last-child { font-size: 13px; }
  .sales-cta { width: 100%; white-space: normal; }
  .cal { padding: 22px 19px; }
  .cal .btn { width: 100%; }
  .booking-grid { grid-template-columns: 1fr; gap: 9px; }
  .booking-card, .booking-card:first-child, .booking-card:nth-child(2) { grid-column: 1 / -1; min-height: 0; padding: 16px; }
  .booking-card:first-child h3 { font-size: 19px; }
  .sec { flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 11px; font-size: 23px; }
  .sec a { font-size: 9px; }
  .products, .posts, .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 158px; gap: 9px; }
  .link-card-grid { grid-template-columns: 1fr; gap: 9px; }
  .link-card-grid--two { grid-template-columns: 1fr; }
  .link-card, .link-card--featured { grid-column: 1 / -1; min-height: 238px; }
  .big { grid-column: span 2; grid-row: span 2; }
  .big h3 { font-size: 19px; }
  .wide, .sq, .one { grid-column: span 1; }
  .media .body, .link-card__body { inset: auto 7px 7px; padding: 9px 10px 10px; border-radius: 11px; }
  .media h3 { font-size: 13px; }
  .media p { font-size: 11px; }
  .insta { align-items: flex-start; padding: 22px; }
  .insta > div { max-width: 340px; }
  .insta .btn { width: 100%; }
  footer { width: min(100% - 28px, 520px); padding-bottom: 26px; }
}

@media (hover: none) {
  .media .body__details { max-height: 90px; opacity: 1; transform: none; }
  .link-card__details { max-height: 180px; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .media:hover, .media:focus-visible, .media:focus-within, .link-card:hover, .link-card:focus-visible, .link-card:focus-within { transform: none; }
  .media:hover img, .media:focus-visible img, .media:focus-within img, .link-card:hover > img, .link-card:focus-visible > img, .link-card:focus-within > img { transform: none; }
  .media .body__details, .link-card__details { transform: none; }
}