/* The first rules the browser sees, inlined in the single-page version's <head>
   so the page never flashed unstyled. A separate stylesheet now, because one is
   cheaper than repeating it in thirty-six documents. */
:root{color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout concept: the page runs on a clock. 昕 is daybreak, so the sky at the top of the
   page is the real sky at the viewer's hour, and the hours band is also the clinic's hours.
   Everything below it is a quiet reading column — no section furniture, no uppercase labels. */
:root{
  /* Color — sampled from the Mushin mark: navy ring, sunrise gradient inside it */
  --ink:#1c2a52;
  --ink-deep:#101a36;
  --ink-soft:#6d7698;
  --paper:#fbfaf8;
  --paper-2:#f2efea;
  --paper-3:#e9e7e6;
  --line:rgba(28,42,82,.13);
  --line-2:rgba(28,42,82,.26);
  --rose:#d9736b;
  --coral:#e08a62;
  --amber:#e9ac6b;
  --pine:#0c4426;
  --card:#ffffff;
  --shadow:0 20px 60px -30px rgba(16,26,54,.45);

  --display:"Noto Serif TC","Songti TC",serif;
  --body:"Noto Sans TC","PingFang TC","Heiti TC",sans-serif;

  --maxw:1120px;
  /* motion: slow easeOut curves, after the pacing on landic.com/recruit */
  --ease-enter:cubic-bezier(.22,1,.36,1);   /* entrances, 1.2s */
  --ease-out:cubic-bezier(.215,.61,.355,1); /* state changes, .8s */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e6e9f3; --ink-deep:#f4f6fb; --ink-soft:#97a0c0;
    --paper:#0d1426; --paper-2:#121a30; --paper-3:#18213a;
    --line:rgba(230,233,243,.15); --line-2:rgba(230,233,243,.3);
    --card:#141d34;
    --shadow:0 20px 60px -30px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e6e9f3; --ink-deep:#f4f6fb; --ink-soft:#97a0c0;
  --paper:#0d1426; --paper-2:#121a30; --paper-3:#18213a;
  --line:rgba(230,233,243,.15); --line-2:rgba(230,233,243,.3);
  --card:#141d34;
  --shadow:0 20px 60px -30px rgba(0,0,0,.85);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;
  line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.5;text-wrap:balance;margin:0}
p{margin:0}
button,input{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px}
ol,ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(74px,10vw,128px)}
.h2{font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:.06em;font-weight:400}
.lede{font-size:clamp(.98rem,1.4vw,1.08rem);color:var(--ink-soft);max-width:36em}
.tag{display:inline-block;font-size:.82rem;letter-spacing:.24em;color:var(--ink-soft);
  padding-bottom:.5rem;border-bottom:1px solid var(--line-2);margin-bottom:clamp(20px,3vw,32px)}

#prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;z-index:61;width:0;
  background:var(--coral);transition:width .1s linear}

/* ── nav ─────────────────────────────────────── */
#nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  border-bottom:1px solid transparent;transition:border-color .8s var(--ease-out)}
#nav.stuck{border-bottom-color:var(--line)}
.navin{display:flex;align-items:center;gap:1.2rem;min-height:62px}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:500;
  letter-spacing:.18em;font-size:1rem;text-decoration:none;white-space:nowrap}
.sun-dot{width:11px;height:11px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--amber),var(--rose));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent)}
.navlinks{margin-left:auto;display:flex;gap:clamp(.9rem,2vw,1.9rem);font-size:.88rem;letter-spacing:.1em}
.navlinks a{text-decoration:none;color:var(--ink-soft);transition:color .6s var(--ease-out)}
.navlinks a:hover{color:var(--ink)}
/* The one link in the bar that does something rather than scrolls. */
.navlinks a.navbook{color:var(--ink);border-bottom:1px solid var(--coral);padding-bottom:2px}
.navlinks a.navbook:hover{color:var(--coral)}
.navnow{margin-left:.4rem;font-size:.82rem;letter-spacing:.1em;color:var(--ink-soft);
  display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.navnow b{font-weight:400;color:var(--ink)}
.live{width:6px;height:6px;border-radius:50%;background:var(--pine);flex:none}
.live.shut{background:var(--ink-soft);opacity:.5}
@media(max-width:900px){.navlinks{display:none}}
@media(max-width:520px){.navnow{display:none}}

/* ── sky / hero ──────────────────────────────── */
#sky{position:relative;isolation:isolate;overflow:clip;
  --top:#101a36;--bot:#1c2a52;--sunx:50%;--suny:60%;--glow:.3;
  /* text in the hero reads against the sky, so its colour follows the hour */
  --onsky:#101a36;--onsky-soft:rgba(28,42,82,.62);--onsky-line:rgba(28,42,82,.26)}
.sky-grad{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(176deg,var(--top),var(--bot));
  transition:background .5s linear}
.sun{position:absolute;z-index:-2;left:var(--sunx);top:var(--suny);translate:-50% -50%;
  width:clamp(84px,11vw,130px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff6e8,var(--amber) 48%,var(--coral) 78%,var(--rose));
  opacity:var(--glow);filter:blur(.4px);
  box-shadow:0 0 90px 36px color-mix(in srgb,var(--amber) 34%,transparent);
  transition:left .5s linear,top .5s linear,opacity .5s linear}
.sea{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:-2;overflow:hidden;opacity:.5}
.sea img{width:100%;height:124%;object-fit:cover;object-position:center 46%;
  mix-blend-mode:soft-light;will-change:transform}
.sky-fade{position:absolute;left:0;right:0;bottom:0;height:24%;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--paper) 92%)}

.hero{position:relative;padding-block:clamp(90px,15vh,170px) clamp(76px,10vw,124px);
  min-height:clamp(500px,74svh,700px);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--onsky);transition:color .5s linear}
.hero h1{font-size:clamp(1.65rem,4.6vw,3rem);letter-spacing:.1em;line-height:1.75;
  color:var(--onsky);font-weight:400;max-width:18em;transition:color .5s linear}
.hero h1 .soft{color:var(--onsky-soft)}
.hero h1 .lit{position:relative;white-space:nowrap}
.hero h1 .lit::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.12em;height:.42em;z-index:-1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 55%,transparent),color-mix(in srgb,var(--rose) 40%,transparent));
  transform:scaleX(0);transform-origin:left;animation:lit 1.4s .5s var(--ease-enter) forwards}
@keyframes lit{to{transform:scaleX(1)}}
.hero .who{margin-top:clamp(22px,3vw,34px);font-size:.96rem;color:var(--onsky-soft);letter-spacing:.06em}
.hero .who b{font-weight:400;color:var(--onsky);font-family:var(--display);letter-spacing:.14em}

/* ── hours rail ──────────────────────────────── */
.rail-box{position:relative;margin-top:clamp(30px,4.5vw,52px);padding-bottom:clamp(26px,4vw,44px)}
.rail-read{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}
.rail-time{font-family:var(--display);font-size:clamp(1.9rem,5vw,2.9rem);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--onsky)}
.rail-state{font-size:.92rem;letter-spacing:.08em;color:var(--onsky-soft)}
.rail-state b{font-weight:400;color:var(--onsky)}
.rail{position:relative;height:34px}
.rail-bar{position:absolute;left:0;right:0;top:15px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#1c2a52 0%,#3c3456 17%,#d9736b 25%,#e9ac6b 33%,#f2efea 48%,
    #f2efea 62%,#e9ac6b 74%,#d9736b 79%,#3c3456 86%,#101a36 100%)}
.rail-open{position:absolute;top:10px;height:13px;border-radius:2px;
  background:rgba(12,68,38,.3);box-shadow:inset 0 0 0 1px rgba(90,196,140,.6)}
.rail-ticks{position:absolute;left:0;right:0;top:30px;display:flex;justify-content:space-between;
  font-size:.68rem;letter-spacing:.1em;color:var(--onsky-soft);font-variant-numeric:tabular-nums}
/* where "now" sits in the day, against today's opening band */
.rail-mark{position:absolute;top:3px;bottom:11px;width:2px;background:var(--onsky);
  transition:left .6s linear,background .5s linear}
.rail-mark::after{content:"";position:absolute;left:50%;top:-4px;translate:-50% 0;
  width:9px;height:9px;border-radius:50%;background:var(--onsky)}
.rail-hint{margin-top:1.5rem;font-size:.82rem;color:var(--onsky-soft);letter-spacing:.06em}

/* ── reveal ──────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity 1.2s var(--ease-enter),transform 1.2s var(--ease-enter)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:0.12s}.js .rv.d2{transition-delay:0.24s}.js .rv.d3{transition-delay:0.36s}

/* ── about ───────────────────────────────────── */
#about{background:var(--paper-2)}
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,76px);align-items:center}
.ab-fig{position:relative;overflow:hidden;aspect-ratio:3/4}
.ab-fig img{width:100%;height:118%;object-fit:cover;will-change:transform}
.gl{display:flex;gap:clamp(20px,3vw,36px);margin-block:clamp(24px,3.5vw,36px)}
.gl div{flex:1;min-width:0}
.gl b{display:block;font-family:var(--display);font-size:clamp(2rem,4.6vw,2.8rem);font-weight:400;
  line-height:1;color:var(--coral)}
.gl small{display:block;margin-top:.8rem;font-size:.88rem;color:var(--ink-soft);line-height:1.85}
@media(max-width:820px){.ab{grid-template-columns:1fr}.ab-fig{aspect-ratio:4/3;max-height:360px}}

/* ── services ────────────────────────────────── */
.svc-list{border-top:1px solid var(--line)}
.svc-row{width:100%;text-decoration:none;color:inherit;display:flex;gap:clamp(14px,3vw,26px);align-items:center;text-align:left;position:relative;
  padding-block:clamp(17px,2.3vw,26px);border-bottom:1px solid var(--line);isolation:isolate;
  transition:padding-left .8s var(--ease-out),color .6s var(--ease-out)}
.svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;
  background:var(--paper-2);transition:width .9s var(--ease-out)}
.svc-row:hover,.svc-row:focus-visible{padding-left:.9rem;color:var(--coral)}
.svc-row:hover::before,.svc-row:focus-visible::before{width:100%}
.svc-t{font-family:var(--display);font-size:clamp(1.05rem,2.3vw,1.4rem);letter-spacing:.07em;flex:1;min-width:0}
.svc-t small{display:block;font-family:var(--body);font-weight:300;font-size:.84rem;letter-spacing:.05em;
  color:var(--ink-soft);margin-top:.35rem}
.svc-go{flex:none;font-size:1.05rem;color:var(--ink-soft);transition:transform .8s var(--ease-out),color .6s var(--ease-out)}
.svc-row:hover .svc-go{transform:translateX(6px);color:var(--coral)}

/* service detail — one column, reading width, booking last */
.sv-top{padding-bottom:clamp(22px,3vw,34px)}
.sv-head{font-size:clamp(1.6rem,4.4vw,2.5rem);letter-spacing:.1em;color:var(--ink-deep);font-weight:400}
.sv-sub{color:var(--ink-soft);margin-top:.7rem;font-size:.93rem;letter-spacing:.05em}
.sv-book{background:var(--paper-2);padding:clamp(20px,3vw,30px);border-top:0;margin-top:clamp(14px,2vw,22px)}
.sv-book .dcta{margin-top:1rem}
.sv-n{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem}
.sv-n i{font-style:normal;font-family:var(--display);font-size:.95rem;color:var(--coral);
  font-variant-numeric:tabular-nums}
.sv-n span{font-size:.8rem;letter-spacing:.22em;color:var(--ink-soft)}
.dsec p+p{margin-top:.8rem}
.dsec>p,.dsec li{color:var(--ink-soft)}
.dsec ul{margin-top:.2rem}
.dsec li{padding-left:1.15rem;position:relative;margin-bottom:.5rem;line-height:1.85}
.dsec li::before{content:"";position:absolute;left:0;top:.88em;width:5px;height:5px;border-radius:50%;
  background:var(--amber)}
.fee{display:grid;gap:.55rem}
.fee div{display:flex;flex-wrap:wrap;gap:.3rem 1rem;padding:.7rem .9rem;background:var(--paper-2);
  font-size:.89rem}
.fee b{font-weight:400;min-width:13em;color:var(--ink)}
.fee span{color:var(--ink-soft)}
.fee em{font-style:normal;display:block;font-size:.82rem;color:var(--ink-soft);margin-top:.2rem}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:.95rem;display:flex;gap:1rem;align-items:flex-start;
  font-size:.93rem;transition:color .6s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral)}
.faq summary::after{content:"＋";margin-left:auto;flex:none;color:var(--ink-soft)}
.faq details[open] summary::after{content:"－"}
.faq p{padding-bottom:1.1rem;color:var(--ink-soft);font-size:.9rem}

/* ── spaces ──────────────────────────────────── */
#spaces{background:var(--ink-deep);color:var(--paper-2);overflow:clip}
#spaces .tag{color:color-mix(in srgb,var(--paper-2) 62%,transparent);border-bottom-color:rgba(255,255,255,.26)}
#spaces .h2{color:var(--paper-2)}
#spaces .lede{color:color-mix(in srgb,var(--paper-2) 66%,transparent)}
.rail-track{position:relative}
.rail-sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding-block:clamp(40px,7vw,70px)}
.shots{display:flex;gap:clamp(14px,2vw,26px);will-change:transform;
  padding-left:max(20px,env(safe-area-inset-left,0px))}
.shot{flex:none;width:clamp(220px,26vw,330px);aspect-ratio:4/5;overflow:hidden;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .8rem;font-size:.84rem;
  letter-spacing:.12em;background:linear-gradient(transparent,rgba(10,17,36,.88))}
@media(max-width:760px){
  .rail-sticky{position:static;min-height:0}
  .shots{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;transform:none!important}
  .shot{scroll-snap-align:start;width:74vw}
}

/* ── team index ──────────────────────────────── */
.tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:clamp(20px,3vw,30px)}
.srch{position:relative;flex:1 1 190px;min-width:0;max-width:280px}
.srch input{width:100%;background:none;border-bottom:1px solid var(--line-2);padding:.45rem .2rem .45rem 0;
  font-size:.9rem;letter-spacing:.06em;transition:border-color .6s var(--ease-out)}
.srch input:focus{outline:none;border-bottom-color:var(--coral)}
.srch input::placeholder{color:var(--ink-soft);opacity:.75}
.filt{border:1px solid var(--line);border-radius:999px;padding:.36rem .95rem;font-size:.85rem;
  letter-spacing:.08em;color:var(--ink-soft);transition:all .6s var(--ease-out)}
.filt:hover{border-color:var(--line-2);color:var(--ink)}
.filt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dice{margin-left:auto;font-size:.85rem;letter-spacing:.1em;color:var(--coral);
  border-bottom:1px solid currentColor;padding-bottom:.12rem}
.cnt{font-size:.82rem;letter-spacing:.14em;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  padding-left:.4rem}

/* a wall of faces — edge to edge, no gutters: the photographs are the surface.
   --o is set from scroll position, --hov from hover, so the two never fight. */
.wall{display:grid;gap:0;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  width:100%}
.pc{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;aspect-ratio:3/4;text-align:left;width:100%;
  padding:0;opacity:calc(var(--o,1) * var(--hov,1));
  transition:opacity .25s linear,transform .8s var(--ease-out)}
.pc.hide{display:none}
/* every card is the same size: the scroll fade is one number per card, so a
   double-height card would always be at a different point in the curve than
   its neighbours and read as "not loading". The director keeps her badge. */
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;
  filter:saturate(.5) contrast(1.03);
  transition:transform .9s var(--ease-out),filter .9s var(--ease-out)}
.pc:hover img,.pc:focus-visible img{transform:scale(1.055);filter:saturate(1) contrast(1.03) brightness(1.08)}
.pc .scrim{position:absolute;inset:0;transition:background .8s var(--ease-out);
  background:linear-gradient(to top,rgba(13,19,38,.9) 0%,rgba(13,19,38,.45) 28%,rgba(13,19,38,0) 58%)}
/* the hover scrim only needs to cover the caption, which sits in the bottom
   third: darker than that and the lit card reads as dimmer than its neighbours. */
.pc:hover .scrim,.pc:focus-visible .scrim{
  background:linear-gradient(to top,rgba(13,19,38,.92) 0%,rgba(13,19,38,.7) 30%,rgba(13,19,38,.2) 55%,rgba(13,19,38,0) 72%)}
.pc .cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.4rem 1.2rem;color:#fbf8f4}
.pc .n{display:block;font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:.18em;
  font-weight:400}
.pc .r{display:block;font-size:.83rem;letter-spacing:.1em;opacity:.76;margin-top:.2rem}
.pc .s{display:block;font-size:.84rem;line-height:1.6;margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .9s var(--ease-out),opacity .8s var(--ease-out),margin-top .9s var(--ease-out)}
.pc:hover .s,.pc:focus-visible .s{max-height:9.8em;opacity:.93;margin-top:.45rem;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.pc .s mark{background:none;color:var(--amber)}
.pc .w{position:absolute;top:.7rem;right:.7rem;font-size:.68rem;letter-spacing:.1em;color:#fbf8f4;
  background:rgba(13,19,38,.44);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.2rem .6rem;border-radius:999px}
.pc .lead-tag{position:absolute;top:.7rem;left:.7rem;font-size:.68rem;letter-spacing:.16em;color:#101a36;
  background:var(--amber);padding:.2rem .65rem;border-radius:999px}
.wall:hover .pc:not(:hover){--hov:.5}
/* the same wall, nested inside a detail view's reading column. The cards are about
   two thirds the width there, so the hover text gets fewer lines or it would be cut
   off by the card it sits in. */
.wall-in{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:.2rem}
.wall-in .pc .cap{padding:.8rem .85rem .9rem}
.wall-in .pc .n{font-size:1.02rem;letter-spacing:.14em}
.wall-in .pc .r{font-size:.72rem;margin-top:.18rem}
.wall-in .pc .w{font-size:.62rem;padding:.14rem .45rem;top:.5rem;right:.5rem}
.wall-in .pc .lead-tag{font-size:.62rem;padding:.14rem .5rem;top:.5rem;left:.5rem}
.wall-in .pc .s{font-size:.76rem;line-height:1.55}
.wall-in .pc:hover .s,.wall-in .pc:focus-visible .s{max-height:4.7em;-webkit-line-clamp:3;margin-top:.35rem}
@media(max-width:560px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .pc .s{display:none}
}
.none{padding:2.6rem 0;color:var(--ink-soft)}

/* ── reading column (therapist and service pages) ─────── */
.dg{display:grid;grid-template-columns:minmax(0,70ch);justify-content:center;
  padding-block:clamp(30px,4.5vw,54px)}

/* therapist detail: portrait on the left, content on the right. The source photos are
   480x600, so the column is kept under that width — a full-bleed panel upscaled them.
   Service detail stays one centred column — it has no portrait to carry a side. */
.dg.split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);justify-content:stretch;
  gap:clamp(24px,4.5vw,62px)}
.dsticky{position:sticky;top:clamp(84px,12vh,120px);align-self:start}
/* No parallax here: the 600px source and the pinned column leave under 10% of the
   scroll distance to travel, which is below what reads as motion. Static, warmed. */
.dph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.dph img{width:100%;height:100%;object-fit:cover;object-position:center 12%;
  filter:saturate(.9) contrast(1.07) sepia(.07) brightness(1.01)}
.dph::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(170deg,color-mix(in srgb,var(--amber) 14%,transparent),transparent 42%),
  radial-gradient(130% 95% at 50% 18%,transparent 52%,color-mix(in srgb,var(--ink-deep) 22%,transparent))}
.dname{font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:.2em;margin-right:-.2em;margin-top:1.3rem;
  color:var(--ink-deep);font-weight:400}
.drole{letter-spacing:.14em;color:var(--ink-soft);font-size:.88rem;margin-top:.5rem;line-height:1.9}
.dcert{font-size:.8rem;letter-spacing:.1em;color:var(--coral);font-variant-numeric:tabular-nums}
/* their own words lead the page, at display size — not a caption above a résumé */
.dquote{font-family:var(--display);font-size:clamp(1.12rem,1.9vw,1.55rem);line-height:1.95;
  color:var(--ink-deep);padding:0 0 clamp(26px,3.4vw,40px);margin:0;font-weight:400}
.dquote::before{content:"";display:block;width:54px;height:3px;margin-bottom:clamp(18px,2.4vw,30px);
  background:linear-gradient(90deg,var(--rose),var(--amber))}
.specs.big{gap:.5rem}
.specs.big .spec{font-size:.95rem;padding:.48rem 1.15rem;
  border-color:color-mix(in srgb,var(--amber) 42%,var(--line))}
/* the credentials collapse into one quiet block instead of four bulleted sections */
.cv{display:grid;grid-template-columns:5.8em minmax(0,1fr);gap:0 clamp(14px,2vw,26px);font-size:.88rem}
.cv dt{color:var(--ink-soft);font-size:.76rem;letter-spacing:.16em;padding:.9rem 0;
  border-top:1px solid var(--line)}
.cv dd{margin:0;padding:.9rem 0;border-top:1px solid var(--line);color:var(--ink-soft);line-height:1.95}
.cv dd span{display:block}
.cv dd span+span{margin-top:.25rem}
@media(max-width:560px){.cv{grid-template-columns:minmax(0,1fr);gap:0}
  .cv dd{border-top:0;padding-top:0}}
@media(max-width:860px){
  .dg.split{grid-template-columns:minmax(0,1fr)}
  .dsticky{position:static}
  .dph{aspect-ratio:4/3;max-height:380px}
}
.dsec{padding-block:clamp(24px,3.2vw,40px);border-top:1px solid var(--line)}
.dsec:first-child{border-top:0;padding-top:0}
.dlab{font-size:.8rem;letter-spacing:.22em;color:var(--ink-soft);margin-bottom:1rem}
.specs{display:flex;flex-wrap:wrap;gap:.45rem}
.spec{border:1px solid var(--line);border-radius:999px;padding:.36rem .95rem;font-size:.88rem;letter-spacing:.05em;
  opacity:0;transform:translateY(9px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),border-color .6s var(--ease-out),background .6s var(--ease-out)}
.spec.in{opacity:1;transform:none}
.spec:hover{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent)}
.dwhere{display:flex;gap:clamp(12px,2vw,20px);flex-wrap:wrap}
.where{flex:1;min-width:205px;border:1px solid var(--line);padding:1.1rem 1.2rem}
.where b{display:block;font-family:var(--display);font-size:1.08rem;letter-spacing:.15em;font-weight:400}
.where small{display:block;color:var(--ink-soft);font-size:.83rem;margin-top:.45rem;line-height:1.8}
.dcta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.btn{display:inline-flex;align-items:center;border-radius:999px;padding:.66rem 1.5rem;font-size:.89rem;
  letter-spacing:.12em;text-decoration:none;border:1px solid var(--ink);transition:background .6s var(--ease-out),color .6s var(--ease-out),transform .6s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ── booking ─────────────────────────────────── */
#book{background:var(--paper-2)}
.steps{position:relative;display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(3,minmax(0,1fr))}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:0;top:9px;height:1px;width:var(--pr,0%);background:var(--coral);
  transition:width .5s ease-out}
.step .dot{width:19px;height:19px;border-radius:50%;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line-2);position:relative;z-index:1;transition:box-shadow .8s var(--ease-out),background .8s var(--ease-out)}
.step.on .dot{box-shadow:inset 0 0 0 5px var(--coral)}
.step h3{font-size:clamp(1rem,2vw,1.2rem);letter-spacing:.08em;margin-top:1.2rem}
.step p{color:var(--ink-soft);font-size:.91rem;margin-top:.5rem}
.step .lk{margin-top:.9rem;display:flex;flex-direction:column;gap:.4rem;font-size:.87rem}
.step .lk a{color:var(--coral);text-decoration:none;letter-spacing:.07em}
.step .lk a:hover{opacity:.66}
@media(max-width:780px){.steps{grid-template-columns:1fr}.steps::before,.steps::after{display:none}}

/* ── visit ───────────────────────────────────── */
.locs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,30px)}
.loc{border:1px solid var(--line);overflow:hidden;background:var(--card);transition:box-shadow .8s var(--ease-out)}
.loc:hover{box-shadow:var(--shadow)}
.loc .map{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.loc .map img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.loc:hover .map img{transform:scale(1.04)}
.loc .in{padding:clamp(17px,2.3vw,26px)}
.loc h3{font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:.17em;display:flex;align-items:center;gap:.6rem}
.loc h3 small{font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);font-family:var(--body);font-weight:300}
.locnote{margin-top:.9rem;font-size:.89rem;color:var(--ink-soft);line-height:1.9}
.dl{margin-top:1.2rem;display:grid;grid-template-columns:4.2em 1fr;gap:.5rem 1rem;font-size:.89rem}
.dl dt{font-size:.78rem;letter-spacing:.14em;color:var(--ink-soft);padding-top:.2rem}
.dl dd{margin:0;line-height:1.8}
.dl dd a{color:var(--coral);text-decoration:none}
.hrs{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.87rem}
.hrs b{display:block;font-size:.76rem;letter-spacing:.14em;color:var(--ink-soft);font-weight:300;margin-bottom:.22rem}
.notice{margin:0 0 clamp(26px,4vw,42px);padding:1rem 1.2rem;max-width:52em;
  font-size:.86rem;line-height:1.85;color:var(--ink-soft);
  border-left:2px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.notice b{display:block;font-weight:400;letter-spacing:.14em;color:var(--amber);margin-bottom:.35rem}
@media(max-width:760px){.locs{grid-template-columns:1fr}}

/* ── page header / breadcrumb / section link ──────────────── */
.phead{padding-block:clamp(40px,6vw,72px) clamp(26px,4vw,44px);border-bottom:1px solid var(--line)}
.crumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.8rem;letter-spacing:.1em;color:var(--ink-soft);
  margin-bottom:clamp(14px,2vw,22px)}
.crumb a{text-decoration:none;transition:color .6s var(--ease-out)}
.crumb a:hover{color:var(--coral)}
.crumb span[aria-current]{color:var(--ink)}
.phead h1{font-size:clamp(1.6rem,4.4vw,2.5rem);letter-spacing:.1em;color:var(--ink-deep);font-weight:400}
.phead .lede{margin-top:clamp(12px,1.6vw,18px)}
.more{display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(20px,3vw,30px);font-size:.88rem;
  letter-spacing:.1em;color:var(--coral);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:.15rem;transition:gap .6s var(--ease-out)}
.more:hover{gap:.9rem}
#spaces .more{color:var(--amber)}

footer{background:var(--ink-deep);color:var(--paper-2);padding-block:clamp(48px,7vw,76px)}
.ft{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,52px);align-items:flex-start}
.ft .brand{color:var(--paper-2)}
.ft p{opacity:.6;font-size:.87rem;margin-top:.9rem;max-width:27em;line-height:1.9}
.soc{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.soc a{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.4rem 1rem;font-size:.83rem;
  letter-spacing:.1em;text-decoration:none;transition:background .6s var(--ease-out)}
.soc a:hover{background:rgba(255,255,255,.1)}
.ftl{margin-top:clamp(30px,5vw,48px);padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.75rem;opacity:.5;letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .rv{opacity:1!important;transform:none!important}
  .hero h1 .lit::after{transform:scaleX(1)!important}
}