:root {
  --ocean: #0b2632;
  --ocean-deep: #071a22;
  --ocean-mid: #123b4a;
  --gold: #c6a15b;
  --gold-light: #e1c990;
  --sand: #e8dfd1;
  --sand-deep: #d7c7b0;
  --ink: #172226;
  --mist: #f5f2eb;
  --white: #fffdf8;
  --serif: "PT Serif", Georgia, serif;
  --sans: "PT Sans", Arial, sans-serif;
  --display: Copperplate, "Copperplate Gothic Light", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--serif); background: var(--ocean-deep); color: var(--white); overflow-x: hidden; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 99; background: var(--white); color: var(--ink); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  background: linear-gradient(to bottom, rgba(5,18,24,.82), rgba(5,18,24,0));
  transition: background .5s ease, color .5s ease, backdrop-filter .5s ease;
}
.site-header.scrolled { background: rgba(7,26,34,.86); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .11em; font-size: .92rem; color: var(--gold-light); }
.brand-mark { width: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-links { display: flex; gap: 2rem; align-items: center; font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; }
.nav-links a { text-decoration: none; opacity: .88; }
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }
.nav-cta { border: 1px solid rgba(225,201,144,.75); padding: .65rem 1rem; }
.menu-button { display: none; border: 0; background: none; color: var(--gold-light); font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em; }

.experience { min-height: 100svh; position: relative; overflow: hidden; display: grid; align-items: center; padding: clamp(7rem, 12vh, 10rem) clamp(1.4rem, 7vw, 7rem) clamp(4rem, 8vh, 7rem); }
.experience-content, .experience-grid { position: relative; z-index: 4; width: min(1180px, 100%); margin: 0 auto; }
.experience-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 9vw, 8rem); align-items: center; }
.experience-grid.reverse { grid-template-columns: .9fr 1.1fr; }
.centered { text-align: center; }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .23em; font-size: .76rem; margin: 0 0 1.6rem; color: var(--gold); }
h1, h2 { font-weight: 400; margin: 0; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7.2vw, 7.4rem); }
h2 { font-size: clamp(2.5rem, 5.2vw, 5.7rem); }
em { font-weight: 400; color: var(--gold-light); }
.lead { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.5; }
.copy-block p:not(.eyebrow):not(.lead), .narrow { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.75; }
.narrow { width: min(680px, 100%); margin: 2rem auto 0; color: rgba(255,253,248,.8); }
.quiet-line { font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem !important; color: var(--gold); margin-top: 2rem; }

.hero { justify-items: center; text-align: center; }
.hero .veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(6,20,27,.48), rgba(6,20,27,.18) 50%, rgba(6,20,27,.72)); }
.hero-content { max-width: 1040px; }
.gold-rule { width: 72px; height: 1px; background: var(--gold); margin: 2rem auto; }
.hero-brand { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: clamp(1.25rem, 2vw, 1.85rem); color: var(--gold-light); margin: 0; }
.hero-sub { font-family: var(--sans); line-height: 1.65; color: rgba(255,255,255,.82); }
.discover { position: absolute; z-index: 5; bottom: 2.2rem; left: 50%; transform: translateX(-50%); text-decoration: none; font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--gold-light); display: grid; gap: .45rem; justify-items: center; }
.scene { position: absolute; inset: 0; z-index: 1; }
.scene-ocean { background:
  radial-gradient(circle at 74% 21%, rgba(238,205,126,.24), transparent 21%),
  linear-gradient(180deg, #173f50 0%, #0f3342 35%, #0a2632 56%, #08212c 100%); }
.scene-ocean::before, .scene-ocean::after { content:""; position:absolute; left:-10%; right:-10%; height:36%; border-radius:50%; background: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.08) 0 1px, transparent 2px 14px); transform: rotate(-2deg); }
.scene-ocean::before { bottom: 12%; opacity: .55; }
.scene-ocean::after { bottom: -7%; opacity: .32; transform: rotate(2deg) scale(1.2); }
.sun-glow { position:absolute; width: 34vw; height: 56vh; right: 16%; top: 9%; background: radial-gradient(ellipse, rgba(228,188,94,.32), rgba(228,188,94,0) 67%); filter: blur(12px); }
.horizon-line { position:absolute; left:0; right:0; top:43%; height:1px; background: linear-gradient(90deg, transparent, rgba(229,203,142,.32), transparent); }
.paddle { position:absolute; right:8%; top:30%; width:18px; height:68vh; border-radius:50%; background: linear-gradient(180deg, #05090b, #18292e); transform: rotate(19deg); box-shadow: 0 0 0 1px rgba(255,255,255,.05); }
.paddle::after { content:""; position:absolute; left:-18px; bottom:-22px; width:54px; height:118px; border-radius:50% 50% 42% 42%; background:#081115; transform:rotate(-3deg); }

.light { background: var(--mist); color: var(--ink); }
.section-number { position:absolute; right:4vw; bottom:-.12em; font-family: var(--display); font-size: clamp(9rem, 26vw, 28rem); color: rgba(11,38,50,.045); line-height: .8; }
.waterline { position:absolute; height:80px; left:0; right:0; bottom:0; background: linear-gradient(180deg, transparent, rgba(11,38,50,.05)); }
.deep { background: radial-gradient(circle at 50% 48%, #153f4d, #092530 58%, #061b23 100%); }
.current-lines { position:absolute; inset:0; opacity:.18; background: repeating-radial-gradient(ellipse at 50% 70%, transparent 0 42px, rgba(220,238,239,.16) 44px 45px, transparent 47px 84px); transform: scale(1.5); }
.sand { background: linear-gradient(125deg, var(--sand) 0%, #f2ece4 55%, var(--sand-deep) 100%); color: var(--ink); }
.sand em { color: #8c672a; }
.blend-diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 1.2rem; position:relative; font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; }
.blend-node { border:1px solid rgba(23,34,38,.26); padding:1.2rem; text-align:center; background:rgba(255,255,255,.26); }
.blend-mark { font-family:var(--serif); font-size:5rem; color:#9a7535; line-height:1; }
.blend-result { grid-column:1 / -1; text-align:center; margin-top:2rem; color:#735725; }
.horizon { background: linear-gradient(180deg, #0d3342 0%, #173f4b 47%, #d6ab68 48%, #0c2c37 50%, #071b23 100%); }
.horizon::after { content:""; position:absolute; inset:50% 0 0; background: repeating-linear-gradient(174deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); }
.horizon-sky { position:absolute; inset:0 0 50%; background: radial-gradient(circle at 70% 92%, rgba(244,201,119,.42), transparent 21%); }
.principle-row { margin-top: 3rem; display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.73rem; color:var(--gold-light); }
.principle-row i { display:block; width:30px; height:1px; background:rgba(225,201,144,.5); }
.begin { background: linear-gradient(180deg, #071b23, #0b2632); }
.wake { position:absolute; inset:0; opacity:.16; background: radial-gradient(ellipse at 50% 118%, transparent 0 22%, rgba(255,255,255,.25) 22.4% 22.6%, transparent 23% 32%, rgba(255,255,255,.18) 32.4% 32.6%, transparent 33% 43%, rgba(255,255,255,.12) 43.3% 43.5%, transparent 44%); }
.primary-button { display:inline-block; margin-top:2.5rem; padding:.95rem 1.45rem; border:1px solid var(--gold); text-decoration:none; color:var(--gold-light); font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; transition: background .25s ease, color .25s ease; }
.primary-button:hover, .primary-button:focus-visible { background:var(--gold); color:var(--ocean-deep); }
.microcopy { font-family:var(--sans); font-size:.72rem; color:rgba(255,255,255,.4); margin-top:1rem; }
.site-footer { position:absolute; left:clamp(1.4rem,7vw,7rem); right:clamp(1.4rem,7vw,7rem); bottom:1.6rem; display:flex; justify-content:space-between; gap:1rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; color:rgba(255,255,255,.45); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .site-header { height:68px; }
  .nav-links { position:fixed; inset:68px 0 auto; display:none; padding:1.4rem; background:rgba(7,26,34,.96); flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .menu-button { display:block; }
  .brand span { font-size:.78rem; }
  .experience { min-height:100svh; padding-top:7rem; }
  .experience-grid, .experience-grid.reverse { grid-template-columns:1fr; gap:2.3rem; }
  .blend-diagram { grid-template-columns:1fr; }
  .blend-mark { transform:rotate(90deg); justify-self:center; }
  .blend-result { grid-column:auto; }
  .principle-row { gap:.55rem; }
  .principle-row i { width:18px; }
  .site-footer { flex-direction:column; align-items:center; text-align:center; }
  .paddle { right:-3%; opacity:.72; }
}