/* ============================================================
   BELLS & BALANCE — one continuous descent, clay → ink.
   ============================================================ */
:root{
  --clay:#BFBFBF;
  --ink:#0a0a0a;
  --text-dark:#141618;
  --text-light:#e9edee;
  --accent:#7fa9b5;          /* cool water blue — used sparingly */
  --accent-deep:#9cc3cd;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --col:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--clay);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- THE WORLD: one canvas, descending ---------- */
#world{
  position:relative;
  min-height:100vh;
  /* the signature move — daylight clay descending through slate into an ink pool */
  background:linear-gradient(180deg,
    #C2C2C2 0%,
    #BFBFBF 14%,
    #B6B7B8 30%,
    #A4A8AA 41%,
    #838B90 50%,
    #5D6870 59%,
    #39434C 68%,
    #1E262E 77%,
    #10151A 86%,
    #0A0C0F 94%,
    #08090B 100%);
  overflow:clip;
}

/* ghost koi + ripple pool live under everything */
#pond{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none;
}

/* a vast, faint pool-surface glow at the resting point */
#world::after{
  content:""; position:absolute; left:50%; bottom:-6%;
  width:160%; height:22%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 46% at 50% 62%,
    rgba(127,169,181,.10), rgba(127,169,181,.035) 45%, transparent 72%);
  z-index:1; pointer-events:none;
}

/* ---------- WATER DOWN THE MARGINS (always moving) ---------- */
.fall{
  position:absolute; top:0; bottom:0;
  width:clamp(44px, 6.4vw, 104px);
  z-index:2; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
}
.fall--l{left:0}
.fall--r{right:0}
.fall i{position:absolute; inset:0; display:block}

/* vertical strands — the standing structure of the fall */
.fall .strands{
  background-image:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.05) 7%, transparent 13%,
    rgba(70,80,86,.05) 21%, transparent 27%,
    rgba(255,255,255,.07) 38%, transparent 45%,
    rgba(70,80,86,.04) 54%, transparent 60%,
    rgba(255,255,255,.05) 71%, transparent 78%,
    rgba(70,80,86,.05) 88%, transparent 95%);
}
/* falling glints — three depths, three speeds, no shared period */
.fall .run1,.fall .run2,.fall .run3{background-repeat:repeat}
.fall .run1{
  background-image:linear-gradient(180deg,
    transparent 0px, rgba(255,255,255,.065) 90px, transparent 210px,
    rgba(255,255,255,.045) 300px, transparent 430px);
  background-size:100% 430px;
  animation:fallrun 4.8s linear infinite;
}
.fall .run2{
  background-image:linear-gradient(180deg,
    transparent 0px, rgba(214,228,232,.05) 130px, transparent 260px,
    rgba(214,228,232,.07) 420px, transparent 610px);
  background-size:100% 610px;
  animation:fallrun2 7.4s linear infinite;
}
.fall .run3{
  background-image:linear-gradient(180deg,
    transparent 0px, rgba(60,72,78,.05) 160px, transparent 340px,
    rgba(60,72,78,.035) 520px, transparent 770px);
  background-size:100% 770px;
  animation:fallrun3 12.6s linear infinite;
}
/* the two sides run at slightly different tempo — quiet parallax */
.fall--r .run1{animation-duration:5.6s}
.fall--r .run2{animation-duration:8.6s}
.fall--r .run3{animation-duration:14.4s}
@keyframes fallrun {to{background-position:0 430px}}
@keyframes fallrun2{to{background-position:0 610px}}
@keyframes fallrun3{to{background-position:0 770px}}

/* dark water reads on clay up top… */
.fall .dim{
  background:linear-gradient(90deg,
    transparent, rgba(84,94,100,.05) 30%, rgba(84,94,100,.08) 50%,
    rgba(84,94,100,.05) 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 58%);
          mask-image:linear-gradient(180deg,#000 0%,#000 36%,transparent 58%);
}
/* …luminous water reads on ink below */
.fall .glow{
  background:linear-gradient(90deg,
    transparent, rgba(156,195,205,.025) 30%, rgba(198,224,231,.055) 50%,
    rgba(156,195,205,.025) 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 66%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 34%,#000 66%,#000 100%);
}
/* mist where the falls meet the pool */
.fall::after{
  content:""; position:absolute; left:50%; bottom:4%;
  width:220%; height:9%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 60%,
    rgba(198,224,231,.07), transparent 70%);
  animation:mist 9s ease-in-out infinite alternate;
}
@keyframes mist{from{opacity:.55}to{opacity:1}}

/* ---------- FILM GRAIN ---------- */
#grain{
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ---------- CONTENT COLUMN ---------- */
main{position:relative; z-index:4}
.col{max-width:var(--col); margin:0 auto; padding:0 28px}

section{position:relative}
.tone-light{color:var(--text-dark)}
.tone-dark {color:var(--text-light)}

/* frosted clay panels — readable over both daylight and the pool */
.panel{
  background:rgba(226,228,229,.40);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
          backdrop-filter:blur(16px) saturate(1.05);
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;
  box-shadow:0 24px 60px -34px rgba(20,26,30,.35);
}
.tone-dark .panel{
  background:rgba(13,18,22,.42);
  border-color:rgba(198,224,231,.10);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}

/* ---------- TYPE ---------- */
h1,h2,h3,.serif{font-family:var(--serif); font-weight:500; letter-spacing:.005em}
.kicker{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(20,22,24,.52);
}
.tone-dark .kicker{color:rgba(233,237,238,.44)}
.kicker .tick{color:var(--accent); margin-right:10px}
p{font-size:15.5px; line-height:1.85; font-weight:300}
.lede{font-size:17.5px; line-height:1.9}
.muted{opacity:.66}
em.accent{font-family:var(--serif); font-style:italic; font-weight:400; color:inherit}

/* ---------- SCROLL REVEALS (calm) ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.12s}
.rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s}

/* ============================================================
   1 · HERO — clay daylight
   ============================================================ */
#hero{min-height:100vh; display:flex; flex-direction:column}
nav{
  position:relative; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1220px; width:100%; margin:0 auto;
  padding:34px clamp(56px,8vw,120px) 0;
}
.wordmark{font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:.02em; white-space:nowrap}
.wordmark .amp{font-style:italic; font-weight:400; color:var(--accent); filter:saturate(.7)}
.navlinks{display:flex; align-items:center; gap:34px; font-size:12.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase}
.navlinks a{opacity:.72; transition:opacity .3s}
.navlinks a:hover{opacity:1}
.navlinks a.book{
  opacity:1; border:1px solid rgba(20,22,24,.38);
  padding:9px 22px; border-radius:99px; transition:all .35s;
}
.navlinks a.book:hover{background:rgba(20,22,24,.85); color:#e9edee; border-color:transparent}
.signin{font-size:12px; letter-spacing:.1em; opacity:.42; margin-left:6px; border-bottom:1px solid rgba(20,22,24,.18); padding-bottom:2px; transition:opacity .3s}
.signin:hover{opacity:.8}

.hero-body{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:40px 24px 60px; position:relative;
}
.hero-body h1{
  font-size:clamp(64px, 8.4vw, 122px);
  font-weight:500; line-height:1.02; letter-spacing:.01em;
}
.hero-body h1 .amp{font-style:italic; font-weight:400}
.hero-accent{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.2vw,27px); margin-top:26px;
  color:rgba(20,22,24,.72);
}
.hero-accent .dash{color:var(--accent); font-style:normal}
.hero-tag{
  margin-top:30px; max-width:430px;
  font-size:14.5px; line-height:1.9; color:rgba(20,22,24,.62);
}
.cta{
  display:inline-block; margin-top:48px;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:#e9edee; background:rgba(18,22,25,.9);
  padding:19px 52px; border-radius:99px; border:none; cursor:pointer;
  transition:background .35s, transform .35s;
}
.cta:hover{background:#0a0c0e; transform:translateY(-1px)}
.cta.ghost{
  background:transparent; color:inherit;
  border:1px solid rgba(198,224,231,.32);
}
.cta.ghost:hover{background:rgba(198,224,231,.08)}

/* vertical kanji — quiet, at the hero's edge */
.kanji{
  position:absolute; top:50%; right:clamp(64px,9vw,150px);
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--serif); font-size:15px; letter-spacing:.65em;
  color:rgba(20,22,24,.34);
}
.kanji small{font-family:var(--sans); font-size:8.5px; letter-spacing:.5em; text-transform:uppercase; color:rgba(20,22,24,.28); margin-top:26px}

/* scroll cue — a single falling thread */
.descend{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(20,22,24,.45);
}
.descend .thread{
  width:1px; height:74px; overflow:hidden; position:relative;
  background:rgba(20,22,24,.12);
}
.descend .thread::after{
  content:""; position:absolute; left:0; top:-40%;
  width:1px; height:40%;
  background:linear-gradient(180deg, transparent, rgba(20,22,24,.7));
  animation:thread 2.6s cubic-bezier(.45,0,.4,1) infinite;
}
@keyframes thread{to{top:110%}}

/* ============================================================
   2 · THE PRACTICE
   ============================================================ */
#practice{padding:70px 0 120px}
#practice .col{max-width:820px}
.practice-panel{padding:clamp(36px,5vw,64px); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,52px); align-items:center}
.practice-panel h2{font-size:clamp(34px,3.6vw,46px); line-height:1.12; margin:18px 0 22px}
.practice-panel figure{position:relative; overflow:hidden; border-radius:2px; aspect-ratio:4/4.7}
.practice-panel figure img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) saturate(.6) contrast(1.02)}
.practice-panel figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(191,191,191,.22), transparent 45%, rgba(30,38,44,.18));
}
figcaption{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; opacity:.45; margin-top:12px}

/* ============================================================
   3 · SERVICES
   ============================================================ */
#services{padding:60px 0 130px}
#services .col{max-width:860px}
.sec-head{text-align:center; margin-bottom:56px}
.sec-head h2{font-size:clamp(36px,3.8vw,50px); margin-top:18px}
.svc{
  display:grid; grid-template-columns:300px 1fr auto;
  gap:clamp(24px,3.5vw,44px); align-items:center;
  padding:clamp(24px,3vw,34px);
  margin-bottom:26px;
}
.svc figure{overflow:hidden; border-radius:2px; aspect-ratio:3/2; position:relative}
.svc figure img{width:100%; height:100%; object-fit:cover; filter:grayscale(.72) saturate(.5) brightness(.98) contrast(1.03); transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.svc:hover figure img{transform:scale(1.045)}
.svc figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(127,169,181,.10), rgba(30,40,46,.16))}
.svc h3{font-size:clamp(26px,2.6vw,32px); font-weight:500; margin-bottom:8px}
.svc .dur{font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.5; margin-bottom:14px}
.svc p{font-size:14.5px; max-width:400px}
.svc .price{text-align:right; white-space:nowrap}
.svc .price .from{display:block; font-size:10px; letter-spacing:.3em; text-transform:uppercase; opacity:.5; margin-bottom:6px}
.svc .price .num{font-family:var(--serif); font-size:clamp(34px,3vw,42px); font-weight:500}
.first-note{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:40px; padding:22px 30px; text-align:center;
}
.first-note .serif{font-size:21px; font-style:italic}
.first-note b{font-family:var(--serif); font-style:normal; font-weight:600; font-size:24px}
.members-line{
  text-align:center; margin-top:34px; font-size:13.5px; letter-spacing:.02em; opacity:.72;
}
.members-line a{border-bottom:1px solid rgba(20,22,24,.3); padding-bottom:2px; transition:opacity .3s}
.members-line a:hover{opacity:.7}

/* ============================================================
   4 · THE CENTERPIECE — the ensō, crossing into the dark
   ============================================================ */
#enso-sec{min-height:1000px; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 24px}
.enso-wrap{position:relative; width:clamp(320px,44vw,560px); aspect-ratio:1}
.enso-wrap svg{width:100%; height:100%; overflow:visible; transform:rotate(-96deg)}
.enso-stroke{
  fill:none; stroke:rgba(222,233,236,.55); stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:1284 1420;   /* the ensō gap — never quite closed */
  stroke-dashoffset:1284;
}
.enso-echo{
  fill:none; stroke:rgba(156,195,205,.16); stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:1284 1420;
  stroke-dashoffset:1284;
}
.in .enso-stroke{animation:draw 2.4s cubic-bezier(.5,.05,.3,1) .15s forwards}
.in .enso-echo  {animation:draw 2.4s cubic-bezier(.5,.05,.3,1) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.enso-core{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
}
.enso-core .kanji-big{
  position:absolute; font-family:var(--serif); font-size:clamp(150px,20vw,250px);
  color:rgba(222,233,236,.05); user-select:none;
}
.enso-core .line{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,3vw,38px); color:rgba(233,240,242,.92);
  position:relative;
}
.enso-core .sub{
  font-size:10.5px; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(210,225,230,.42); position:relative;
}

/* ============================================================
   5 · ABOUT KYLE
   ============================================================ */
#about{padding:60px 0 130px}
#about .col{max-width:860px}
.about-panel{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,56px); padding:clamp(36px,5vw,60px); align-items:center}
.about-panel figure{overflow:hidden; border-radius:2px; aspect-ratio:4/5; position:relative}
.about-panel figure img{width:100%; height:100%; object-fit:cover; filter:saturate(.55) contrast(1.02) brightness(.96)}
.about-panel figure::after{content:""; position:absolute; inset:0; background:linear-gradient(190deg, rgba(127,169,181,.08), transparent 40%, rgba(8,10,12,.32))}
.about-panel h2{font-size:clamp(32px,3.4vw,44px); margin:16px 0 20px}
.about-panel .cred{
  display:flex; gap:26px; margin-top:28px; padding-top:24px;
  border-top:1px solid rgba(198,224,231,.12);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.6;
}

/* ============================================================
   6 · VISIT — going dark
   ============================================================ */
#visit{padding:50px 0 130px}
#visit .col{max-width:860px}
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.visit-card{padding:clamp(30px,3.6vw,44px)}
.visit-card h3{font-size:24px; margin:14px 0 22px}
.hours{list-style:none; font-size:14.5px}
.hours li{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(198,224,231,.09)}
.hours li:last-child{border-bottom:none}
.hours .d{opacity:.62; letter-spacing:.04em}
.hours .t{font-family:var(--serif); font-size:16.5px}
address{font-style:normal; font-size:14.5px; line-height:2.05}
address .tel{font-family:var(--serif); font-size:19px; display:inline-block; margin-top:12px; border-bottom:1px solid rgba(156,195,205,.3); padding-bottom:1px}
address .mail{font-size:13px; opacity:.72; display:inline-block; margin-top:6px; border-bottom:1px solid rgba(198,224,231,.14); padding-bottom:1px}
.visit-photo{grid-column:1 / -1; overflow:hidden; border-radius:2px; position:relative; aspect-ratio:16/5.2}
.visit-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.42) brightness(.7) contrast(1.05)}
.visit-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,12,.25), rgba(8,10,12,.55))}
.visit-photo figcaption{position:absolute; left:24px; bottom:18px; margin:0; color:rgba(233,237,238,.75); opacity:1; z-index:2}

/* ============================================================
   7 · BOOK — the deep pool, the resting point
   ============================================================ */
#book{padding:80px 0 150px}
#book .col{max-width:640px}
.book-panel{padding:clamp(40px,5vw,64px); text-align:center}
.book-panel h2{font-size:clamp(36px,4vw,52px); margin:18px 0 14px}
.book-panel .lede{font-size:15px; opacity:.72; max-width:420px; margin:0 auto}
form{margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1 / -1}
label{font-size:10px; letter-spacing:.3em; text-transform:uppercase; opacity:.55}
input,select,textarea{
  font-family:var(--sans); font-weight:300; font-size:14.5px;
  color:var(--text-light);
  background:rgba(233,240,242,.05);
  border:1px solid rgba(198,224,231,.16);
  border-radius:2px; padding:14px 16px; outline:none;
  transition:border-color .3s, background .3s;
  -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239cc3cd' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center}
select option{color:#141618}
textarea{resize:vertical; min-height:88px}
input:focus,select:focus,textarea:focus{border-color:rgba(156,195,205,.5); background:rgba(233,240,242,.08)}
::placeholder{color:rgba(233,237,238,.3)}
form .cta{grid-column:1 / -1; margin-top:14px; width:100%}
.book-terms{
  margin-top:30px; display:flex; justify-content:center; gap:36px;
  font-size:12px; line-height:1.7; opacity:.55;
}
.book-terms span{max-width:200px}
.book-terms b{font-weight:500; color:var(--accent-deep)}
#book-done{display:none; margin-top:34px; font-family:var(--serif); font-style:italic; font-size:21px; color:var(--accent-deep)}

/* ============================================================
   8 · FOOTER — in the dark
   ============================================================ */
footer{position:relative; z-index:4; padding:10px 0 66px; color:var(--text-light)}
.foot-inner{
  max-width:860px; margin:0 auto; padding:38px 28px 0;
  border-top:1px solid rgba(198,224,231,.08);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.foot-inner .wordmark{font-size:17px}
.foot-links{display:flex; gap:26px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.5}
.foot-links a:hover{opacity:.8}
.foot-note{width:100%; text-align:center; margin-top:34px; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(233,237,238,.24)}
.foot-note .k{font-family:var(--serif); letter-spacing:.6em; margin-right:4px; color:rgba(156,195,205,.3)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .svc{grid-template-columns:1fr; gap:20px}
  .svc .price{text-align:left}
  .svc p{max-width:none}
  .practice-panel,.about-panel{grid-template-columns:1fr}
  .practice-panel figure{aspect-ratio:16/10}
  .about-panel figure{aspect-ratio:16/10}
  .visit-grid{grid-template-columns:1fr}
  .visit-photo{aspect-ratio:16/8}
  .kanji{display:none}
}
@media (max-width:720px){
  nav{padding:26px 26px 0; flex-wrap:wrap; gap:14px}
  .navlinks{gap:18px; font-size:11px}
  .navlinks a:not(.book):not(.signin){display:none}
  #hero{min-height:100vh}
  .hero-body{padding:30px 20px 60px}
  form{grid-template-columns:1fr}
  .fall{width:26px}
  .book-terms{flex-direction:column; align-items:center; gap:14px}
  .book-terms span{max-width:260px; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .enso-stroke,.enso-echo{stroke-dashoffset:0}
}

/* --- immersive home overrides (this sheet only loads on '/') --- */
.bb-nav,.bb-footer,.bb-texture{display:none!important}
html{scroll-behavior:auto!important}
body{background:#BFBFBF!important;font-weight:300}