:root { --ink: #061512; --cream: #eee7d8; --mist: #b7c9c1; --amber: #e08a3e; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.breath { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; opacity: 1; visibility: visible; transition: opacity .9s ease, visibility .9s; }
.breath--gone { opacity: 0; visibility: hidden; pointer-events: none; }
.breath__veil { position: absolute; inset: 0; background: rgba(2,16,13,.82); backdrop-filter: blur(8px) saturate(.85); }
.breath__skip { position: absolute; z-index: 2; top: 32px; right: clamp(24px,5vw,76px); border: 0; border-bottom: 1px solid rgba(224,138,62,.8); padding: 10px 0; background: transparent; color: var(--cream); cursor: pointer; font: inherit; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.breath__skip span { margin-left: 10px; color: var(--amber); }
.breath__content { position: relative; z-index: 1; display: flex; min-height: 520px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.breath__overline { margin: 0 0 42px; color: #c9a87e; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; }
.breath__orb { position: relative; width: clamp(190px,25vw,320px); aspect-ratio: 1; display: grid; place-items: center; }
.breath__ring { position: absolute; inset: 0; border: 1px solid rgba(189,219,207,.44); border-radius: 50%; box-shadow: inset 0 0 60px rgba(31,112,95,.08), 0 0 50px rgba(31,112,95,.08); animation: breathing-cycle 19s linear infinite; }
.breath__ring--inner { inset: 18%; border-color: rgba(224,138,62,.35); animation-delay: -.2s; }
.breath__light { width: 8px; height: 8px; border-radius: 50%; background: #f0a04f; box-shadow: 0 0 25px 9px rgba(224,112,36,.45), 0 0 80px 35px rgba(224,112,36,.11); animation: light-cycle 19s linear infinite; }
.breath__phase { margin: 36px 0 2px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(28px,3vw,44px); }
.breath__count { margin: 0; color: #d5a06a; font-family: Georgia,'Times New Roman',serif; font-size: 16px; font-variant-numeric: tabular-nums; }
.breath__pattern { margin: 27px 0 0; color: rgba(222,232,225,.58); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }

@keyframes breathing-cycle { 0% { transform: scale(.62); opacity: .38; } 21.05%,57.89% { transform: scale(1); opacity: .85; } 100% { transform: scale(.62); opacity: .38; } }
@keyframes light-cycle { 0% { transform: scale(.7); opacity: .55; } 21.05%,57.89% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(.7); opacity: .55; } }

.hero { isolation: isolate; min-height: 100svh; position: relative; overflow: hidden; background: #061713; }
.hero__image { position: absolute; inset: 0; z-index: -4; background: url('/hero-water-reflection-v7.png') center/cover; transform: scale(1.025); animation: breathe 16s ease-in-out infinite alternate; }
.hero__wash { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg,rgba(1,13,10,.77),rgba(3,18,15,.42) 48%,rgba(2,17,15,.13)),linear-gradient(0deg,rgba(1,12,10,.48),transparent 52%,rgba(1,10,8,.28)); }
.hero__wash::after { content: ''; position: absolute; inset: 44% -8% -25%; opacity: .33; background: repeating-radial-gradient(ellipse at 72% 52%,transparent 0 9px,rgba(117,193,185,.16) 11px 12px,transparent 14px 27px); filter: blur(1px); transform: rotate(-3deg) scaleY(.35); animation: ripple 9s ease-in-out infinite alternate; }
.hero__glow { position: absolute; z-index: -2; width: 10px; height: 10px; border-radius: 50%; background: #ffad53; box-shadow: 0 0 18px 7px rgba(242,132,43,.6),0 0 70px 30px rgba(214,92,22,.18); }
.hero__glow--one { right: 16%; top: 29%; opacity: .16; }
.hero__glow--two { right: 28%; top: 58%; width: 5px; height: 5px; opacity: .12; }

.nav { width: min(1440px,100%); margin: 0 auto; padding: 30px clamp(24px,5vw,76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(231,226,209,.22); }
.brand { display: flex; flex-direction: column; gap: 4px; }
.brand span { font-family: Georgia,'Times New Roman',serif; font-size: 19px; letter-spacing: .02em; }
.brand small { color: var(--mist); font-size: 8px; letter-spacing: .25em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: clamp(20px,3vw,48px); }
nav a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nav__contact { border-bottom: 1px solid var(--amber); padding: 10px 0 8px; }

.intro { width: min(1440px,100%); margin: 0 auto; padding: clamp(84px,15vh,170px) clamp(24px,8vw,120px) 150px; }
.eyebrow { margin: 0 0 26px; color: #d9a16f; font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
h1 { max-width: 820px; margin: 0; font-family: Georgia,'Times New Roman',serif; font-size: clamp(52px,7.7vw,112px); font-weight: 400; letter-spacing: -.045em; line-height: .89; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.28); }
.lede { max-width: 520px; margin: 34px 0 38px; color: #d2ddd7; font-family: Georgia,'Times New Roman',serif; font-size: clamp(17px,1.5vw,21px); line-height: 1.55; }
.primary { display: inline-flex; gap: 26px; align-items: center; padding: 14px 0 12px; border-bottom: 1px solid rgba(224,138,62,.9); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.primary span { color: var(--amber); font-size: 17px; transition: transform .2s ease; }
.primary:hover span { transform: translate(3px,-3px); }

.waterline { position: absolute; right: clamp(24px,5vw,76px); bottom: 34px; display: flex; align-items: center; gap: 14px; color: rgba(232,235,223,.67); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
.waterline i { width: 34px; height: 1px; background: rgba(224,138,62,.7); }
.scroll-cue { position: absolute; bottom: 27px; left: 32px; margin: 0; color: rgba(232,235,223,.52); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; writing-mode: vertical-rl; }

@keyframes breathe { from { transform: scale(1.025); } to { transform: scale(1.055); } }
@keyframes ripple { from { transform: rotate(-3deg) scaleY(.35) translateX(-2%); } to { transform: rotate(-3deg) scaleY(.4) translateX(2%); } }
@media (max-width: 650px) {
  .breath__skip { top: 20px; right: 24px; }
  .breath__content { min-height: 460px; }
  .nav { padding: 24px; } nav a:not(.nav__contact) { display: none; } .nav__contact { font-size: 9px; }
  .intro { padding: 23vh 24px 130px; } h1 { font-size: clamp(52px,17vw,76px); line-height: .94; }
  .lede { max-width: 350px; margin-top: 28px; font-size: 17px; }
  .waterline { right: 24px; bottom: 24px; } .waterline span:first-child,.waterline i,.scroll-cue { display: none; }
  .hero__image { background-position: 60% center; }
}
@media (prefers-reduced-motion: reduce) { .hero__image,.hero__wash::after,.breath__ring,.breath__light { animation: none; } }