/* ==========================================================================
   Xin Shui
   Palette and type are locked brand assets. Do not substitute.
   All photography lives in assets/img and is wired in below.
   ========================================================================== */

:root{
  --deep:#1F6FA8;
  --mid:#5DADE2;
  --pale:#EAF5FB;
  --ink:#1C2630;
  --ink-60:rgba(28,38,48,.62);
  --line:rgba(28,38,48,.10);
  --white:#fff;

  --wood:#3A6A54;
  --fire:#A25444;
  --earth:#987C52;
  --metal:#6D7C88;
  --water:#1A3452;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cjk:"Noto Serif SC",serif;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;margin:0;letter-spacing:.005em}
p{margin:0}
svg{width:100%;height:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deep);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  border:0;cursor:pointer;
}
.btn-solid{
  background:var(--deep);color:#fff;padding:15px 26px;border-radius:3px;
  transition:background .25s ease,transform .25s ease;
}
.btn-solid:hover{background:#18598a;transform:translateY(-1px)}
.btn-text{color:var(--deep);background:none}
.arrow{
  display:inline-block;width:26px;height:1px;background:currentColor;position:relative;
  transition:width .25s ease;
}
.arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.btn-text:hover .arrow{width:38px}

/* ---------- Nav ----------
   Solid white at all times so the header reads as a separate band above the
   banner. The .is-stuck class still applies on scroll and only deepens the
   shadow. */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.nav.is-stuck{box-shadow:0 2px 14px rgba(23,64,102,.08)}
.nav-in{display:flex;align-items:center;gap:24px}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mark{width:38px;height:38px;object-fit:contain}
.brand-name{
  font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
}

.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{
  font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.nav-links a:hover,.nav-links a.is-active{border-color:var(--deep)}
.nav-cta{margin-left:8px;padding:12px 20px}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;
}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

.nav-mobile{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:#fff;border-bottom:1px solid var(--line);
  padding:8px var(--pad) 26px;
  display:flex;flex-direction:column;gap:2px;
}
/* FIX: the hidden attribute now wins. This was the desktop menu bug. */
.nav-mobile[hidden]{display:none}
.nav-mobile a{padding:13px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.nav-mobile .btn-solid{margin-top:16px;justify-content:center;border-bottom:0}

/* ==========================================================================
   HERO CAROUSEL
   Sits below the white header, not underneath it.
   ========================================================================== */
.hero{
  position:relative;margin-top:var(--nav-h);
  height:min(78vh,660px);min-height:460px;
  overflow:hidden;background:#cfe4f4;
}
.car-track{position:absolute;inset:0}

.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility .9s ease;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.slide.is-active{opacity:1;visibility:visible}

/* Hero images. Supplied at 1852x849, converted to progressive JPEG.
   Replacements should keep the same 2.18 ratio and stay under 400KB. */
.slide-1{background-image:url("../assets/img/hero-1.jpg")}
.slide-2{background-image:url("../assets/img/hero-2.jpg")}
.slide-3{background-image:url("../assets/img/hero-3.jpg")}
.slide-4{background-image:url("../assets/img/hero-4.jpg")}

/* Scrim. Keeps the headline legible over any photograph you supply,
   including a dark one. Do not remove. */
.slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.60) 36%,rgba(255,255,255,0) 66%);
  pointer-events:none;
}
/* Right hand variant. Used where the subject of the photograph sits left. */
.slide--right::before{
  background:linear-gradient(270deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.60) 36%,rgba(255,255,255,0) 66%);
}
.slide--right .slide-in{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.slide--right .slide-actions{justify-content:flex-end}

.slide-in{position:relative;z-index:2;max-width:var(--wrap)}
.slide-title{font-size:clamp(34px,4.6vw,54px);max-width:20ch}
.slide-title .l1,.slide-title .l2{display:block}
.slide-title .l2{color:var(--deep);font-style:italic}
.slide-sub{margin-top:18px;font-size:15px;color:var(--ink-60);max-width:38ch}
.slide-actions{display:flex;align-items:center;gap:28px;margin-top:32px;flex-wrap:wrap}

/* Carousel controls */
.car-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;padding:11px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--deep);
  transition:background .2s ease;
}
.car-nav:hover{background:#fff}
.car-prev{left:14px}
.car-next{right:14px}

.car-dots{
  position:absolute;left:0;right:0;bottom:22px;z-index:5;
  display:flex;justify-content:center;gap:10px;
}
.car-dots button{
  width:9px;height:9px;padding:0;border:1px solid var(--deep);border-radius:50%;
  background:transparent;cursor:pointer;transition:background .2s ease;
}
.car-dots button[aria-selected="true"]{background:var(--deep)}

/* ---------- Strip ---------- */
.strip{background:#fff;border-bottom:1px solid var(--line)}
.strip-in{
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-block:clamp(34px,5vw,50px);
}
.strip-item{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding-inline:12px;border-right:1px solid var(--line);
}
.strip-item:last-child{border-right:0}
.strip-icon{
  width:44px;height:44px;border-radius:50%;background:var(--pale);color:var(--deep);
  display:grid;place-items:center;padding:11px;
}
.strip-item p{font-family:var(--display);font-size:17px;line-height:1.35}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:min(58vh,470px)}
.split-media{
  background:url("../assets/img/split.jpg") center/cover no-repeat;
}
.split-copy{background:var(--pale);display:flex;align-items:center}
.split-copy-in{padding:clamp(38px,6vw,74px);max-width:490px}
.split-copy h2{font-size:clamp(28px,3.4vw,40px)}
.split-copy p{margin-top:18px;color:var(--ink-60);font-size:15px}
.split-copy .btn-text{margin-top:26px}

/* ---------- Elements ----------
   Photographic discs, 500x500 square crops. */
.elements{background:#fff}
.el-in{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  padding-block:clamp(40px,5.5vw,62px);
}
.el{display:flex;flex-direction:column;align-items:center;gap:16px}
.el-disc{
  width:clamp(84px,10vw,116px);aspect-ratio:1;border-radius:50%;
  transition:transform .35s ease,box-shadow .35s ease;
  box-shadow:0 10px 24px rgba(23,64,102,.12);
}
.el:hover .el-disc{transform:translateY(-5px);box-shadow:0 16px 30px rgba(23,64,102,.20)}
.el-disc{background-position:center;background-size:cover;background-repeat:no-repeat}
.el-wood{background-image:url("../assets/img/el-wood.jpg")}
.el-fire{background-image:url("../assets/img/el-fire.jpg")}
.el-earth{background-image:url("../assets/img/el-earth.jpg")}
.el-metal{background-image:url("../assets/img/el-metal.jpg")}
.el-water{background-image:url("../assets/img/el-water.jpg")}
.el-name{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}

/* ---------- Duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.duo-card{background:var(--pale);display:flex;flex-direction:column}
.duo-media{aspect-ratio:16/9;background-position:center;background-size:cover}
.duo-media-1{background-image:url("../assets/img/duo-1.jpg")}
.duo-media-2{background-image:url("../assets/img/duo-2.jpg")}
.duo-body{padding:clamp(24px,3.4vw,38px)}
.duo-body h3{font-size:clamp(21px,2.4vw,26px)}
.duo-body p{margin-top:8px;color:var(--ink-60);font-size:14px}
.duo-body .btn-text{margin-top:20px}

/* ---------- FAQ ---------- */
.faq{background:#fff;padding-block:clamp(54px,7vw,86px)}
.faq-in{display:grid;grid-template-columns:.9fr 1.5fr;gap:clamp(28px,5vw,64px);align-items:start}
.faq-head h2{font-size:clamp(28px,3.4vw,38px)}
.faq-head .btn-text{margin-top:26px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:17px 0;text-align:left;
  font-family:var(--body);font-size:14px;color:var(--ink);
}
.faq-q:hover{color:var(--deep)}
.faq-sign{position:relative;width:13px;height:13px;flex:0 0 auto}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;background:var(--deep);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.faq-sign::before{width:13px;height:1.4px}
.faq-sign::after{width:1.4px;height:13px;transition:transform .25s ease}
.faq-q[aria-expanded="true"] .faq-sign::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-a > p{overflow:hidden;font-size:14px;color:var(--ink-60)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-item.is-open .faq-a > p{padding-bottom:20px}

/* ---------- CTA and enquiry form ---------- */
.cta{
  position:relative;padding-block:clamp(60px,8vw,104px);
  background:url("../assets/img/cta.jpg") center/cover no-repeat;
}
/* Softens the photograph behind the copy and the form. */
.cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.30) 100%);
  pointer-events:none;
}
.cta-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.cta h2{font-size:clamp(28px,3.6vw,40px)}
.cta-copy p{margin-top:12px;color:var(--ink-60);font-size:15px}

.enq{background:rgba(255,255,255,.92);padding:clamp(24px,3.4vw,36px);border-radius:4px}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;margin-bottom:16px}
.field span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--deep);outline-offset:1px}
.enq-note{margin-top:14px;font-size:11.5px;color:var(--ink-60);line-height:1.6}
.hp{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
.foot{background:#fff;border-top:1px solid var(--line);padding-block:30px 26px}
.foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;margin-inline:auto;flex-wrap:wrap}
.foot-links a{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-60)}
.foot-links a:hover{color:var(--deep)}
.foot-social{display:flex;gap:16px;color:var(--deep)}
.foot-social a{width:20px;height:20px}
.foot-legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.tagline{font-family:var(--display);font-size:16px;letter-spacing:.06em;color:var(--deep)}
.fineprint,.copy{margin-top:8px;font-size:11.5px;color:var(--ink-60);line-height:1.6}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .hero{height:auto;min-height:0}
  .car-track{position:relative;inset:auto}
  .slide{position:absolute;inset:0}
  .slide.is-active{position:relative;inset:auto}
  .slide-in{padding-block:clamp(56px,12vw,88px)}
  .slide::before{background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.66) 60%,rgba(255,255,255,.4) 100%)}
  .car-nav{display:none}
  .strip-in{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .strip-item:nth-child(3n){border-right:0}
  .split{grid-template-columns:1fr}
  .split-media{min-height:280px}
  .el-in{grid-template-columns:repeat(3,1fr);gap:28px 16px}
  .duo{grid-template-columns:1fr}
  .faq-in{grid-template-columns:1fr}
  .cta-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-item{border-right:0}
  .el-in{grid-template-columns:repeat(2,1fr)}
  .enq-row{grid-template-columns:1fr}
  .foot-in{flex-direction:column;align-items:flex-start}
  .foot-links{margin-inline:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* ==========================================================================
   XIN SHUI - OVERRIDE BLOCK v2
   Replaces v1 entirely. If v1 is already in css/styles.css, delete it first
   and paste this in its place. Do not run both.

   Append to the END of css/styles.css. Nothing above that point is modified.
   Longhand properties only, except the two duo image swaps which are
   deliberate and are marked.

   Contents:
     1. Element discs, veiled photograph with character overlay
     2. Element heading, descriptors and closing link
     3. Sessions section heading, and duo image swap
     4. Logo lockup with tagline
     5. Pillar strip, horizontal scroll on mobile
     6. Five elements, single row on mobile
     7. Vertical spacing compression on mobile
     8. CTA background crop
     9. Footer compression
   ========================================================================== */


/* ==========================================================================
   1. ELEMENT DISCS
   TUNE: --el-veil is the white veil strength. Higher is paler and pushes
   the character forward. 0.62 is confirmed good on device.
   ========================================================================== */
:root{ --el-veil:.62; }

.el-disc{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.el-disc::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(255,255,255,var(--el-veil));
  border-radius:50%;
  transition:background-color .35s ease;
}
.el-disc::after{
  position:relative;
  z-index:1;
  font-family:var(--cjk);
  font-weight:500;
  font-size:clamp(42px,5.2vw,58px);
  line-height:1;
  letter-spacing:0;
  transition:transform .35s ease;
}
.el:hover .el-disc::before{ background-color:rgba(255,255,255,calc(var(--el-veil) - .10)); }
.el:hover .el-disc::after{ transform:scale(1.04); }

.el-wood::after { content:"\6728"; color:var(--wood);  }
.el-fire::after { content:"\706B"; color:var(--fire);  }
.el-earth::after{ content:"\571F"; color:var(--earth); }
.el-metal::after{ content:"\91D1"; color:var(--metal); }
.el-water::after{ content:"\6C34"; color:var(--water); }


/* ==========================================================================
   2. ELEMENT SECTION HEADING, DESCRIPTORS AND CLOSING LINK
   ========================================================================== */
.el-head{padding-top:clamp(40px,5.5vw,62px)}
.el-head h2{font-size:clamp(24px,3vw,34px);max-width:22ch}
.elements .el-in{padding-block:clamp(26px,3.4vw,40px)}
.el-foot{padding-bottom:clamp(40px,5.5vw,62px)}

.el-desc{
  font-family:var(--display);
  font-size:clamp(13px,1.4vw,16px);
  line-height:1.25;
  color:var(--ink-60);
  text-align:center;
  max-width:16ch;
}
.el{gap:12px}
.el .el-name{margin-bottom:-4px}


/* ==========================================================================
   3. SESSIONS SECTION
   The two photographs are swapped. The still life now carries "Inside a
   session" and the figure carries "Who tends to come". If your filenames
   differ from the ones below, correct the two url values only.
   ========================================================================== */
.duo-sec{background:#fff}
.duo-head{padding-block:clamp(40px,5.5vw,62px) clamp(20px,2.6vw,30px)}
.duo-head h2{font-size:clamp(24px,3vw,34px)}

.duo-media-1{background-image:url("../assets/img/duo-2.jpg")}
.duo-media-2{background-image:url("../assets/img/duo-1.jpg")}


/* ==========================================================================
   4. LOGO LOCKUP WITH TAGLINE
   ========================================================================== */
.brand-text{display:flex;flex-direction:column;justify-content:center}
.brand-tag{
  font-family:var(--body);font-size:8.5px;font-weight:500;
  letter-spacing:.30em;text-transform:uppercase;color:var(--deep);
  margin-top:4px;white-space:nowrap;
}
.foot .brand{flex-direction:column;align-items:center;gap:9px;text-align:center}
.foot .brand-mark{width:44px;height:44px}
.foot .brand-rule{width:26px;height:1px;background:var(--mid);margin-top:8px}
.foot .brand-tag{font-size:9px;margin-top:8px}

@media (max-width:420px){
  .brand-mark{width:32px;height:32px}
  .brand-name{font-size:16px;letter-spacing:.18em}
  .brand-tag{font-size:7.5px;letter-spacing:.24em}
}


/* ==========================================================================
   5. MOBILE, 700px and below
   ========================================================================== */
@media (max-width:700px){

  /* Pillar strip, horizontal scroll. Items are 40% of the viewport so two
     and a half are visible. The half item plus the fade is the swipe cue.
     The fade lives on the parent, not on the scroll container, because a
     mask on a scroll container breaks scrolling in Safari. */
  .strip-in{
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:0;
    padding-block:26px 24px;
    padding-inline:0;
    overflow-x:scroll;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none;
  }
  .strip-in::-webkit-scrollbar{display:none}

  .strip{position:relative}
  .strip::after{
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;
    width:52px;
    pointer-events:none;
    background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));
  }

 .strip-item{
    flex:0 0 150px;
    min-width:150px;
    gap:10px;
    padding-inline:12px;
    border-right:1px solid var(--line);
  }
  .strip-item:first-child{margin-left:var(--pad)}
  .strip-item:last-child{margin-right:var(--pad);border-right:0}
  .strip-item:nth-child(3n){border-right:1px solid var(--line)}
  .strip-icon{width:38px;height:38px;padding:9px}
  .strip-item p{font-size:15px;line-height:1.3}
}


/* ==========================================================================
   6. MOBILE, 560px and below
   ========================================================================== */
@media (max-width:560px){

  /* ---------- Hero ---------- */
  .slide-in{padding-block:46px 42px}
  .slide-title{font-size:clamp(27px,7.4vw,34px);max-width:20ch}
  .slide-actions{gap:16px;margin-top:22px;flex-direction:column;align-items:flex-start}
  .slide--right .slide-actions{align-items:flex-end}
  .car-dots{bottom:16px}

  /* ---------- Five elements, one row ---------- */
  .el-head{padding-top:34px}
  .el-head h2{font-size:22px;max-width:none}
  .elements .el-in{
    grid-template-columns:repeat(5,1fr);
    gap:0 6px;
    padding-block:20px 18px;
  }
  .el{gap:8px}
  .el-disc{
    width:100%;
    box-shadow:0 5px 12px rgba(23,64,102,.12);
  }
  .el-disc::after{font-size:31px}
  .el-name{font-size:8.5px;letter-spacing:.10em;margin-bottom:-5px}
  .el-desc{font-size:11.5px;line-height:1.22;max-width:none}
  .el-foot{padding-bottom:34px}

  /* ---------- Split ---------- */
  .split{min-height:0}
  .split-media{min-height:190px}
  .split-copy-in{padding:30px var(--pad) 32px;max-width:none}
  .split-copy h2{font-size:26px}
  .split-copy p{margin-top:12px;font-size:14.5px}
  .split-copy .btn-text{margin-top:18px}

  /* ---------- Sessions ---------- */
  .duo-head{padding-block:34px 16px}
  .duo-head h2{font-size:24px}
  .duo-media{aspect-ratio:5/3}
  .duo-body{padding:22px var(--pad) 26px}
  .duo-body h3{font-size:21px}
  .duo-body p{margin-top:6px}
  .duo-body .btn-text{margin-top:14px}

  /* ---------- FAQ ---------- */
  .faq{padding-block:44px 46px}
  .faq-in{gap:22px}
  .faq-head h2{font-size:26px}
  .faq-head .btn-text{margin-top:16px}
  .faq-q{padding:15px 0;font-size:13.5px}
  .faq-item.is-open .faq-a > p{padding-bottom:16px}

  /* ---------- CTA and form ----------
     The stone cairn sits at 76 percent across cta.jpg. The image is 3:1, so
     on a portrait section it scales by height and the whole vertical range
     is always visible. Only the horizontal value does anything here.
     TUNE: lower pushes the stones right and clear of the form card,
     higher pulls them central and further behind it. */
  .cta{
    padding-block:42px 46px;
    background-position:74% center;
  }
  .cta-in{gap:22px}
  .cta h2{font-size:26px}
  .cta-copy p{margin-top:8px;font-size:14.5px}
  .enq{padding:20px 18px}
  .field{margin-bottom:14px}
  .field input,.field textarea{padding:11px 12px;font-size:16px}
  .enq-note{margin-top:12px}

  /* ---------- Footer ---------- */
  .foot{padding-block:26px 22px}
  .foot-in{
    flex-direction:column;
    align-items:center;
    gap:18px;
    text-align:center;
  }
  .foot-links{
    margin-inline:0;
    justify-content:center;
    gap:10px 18px;
  }
  .foot-links a{font-size:10px;letter-spacing:.12em}
  .foot-social{justify-content:center}
  .foot-legal{margin-top:18px;padding-top:16px;text-align:center}
  .foot-legal .tagline{display:none}
  .fineprint{font-size:10.5px;line-height:1.55}
  .copy{margin-top:6px;font-size:10.5px}
}


/* ==========================================================================
   7. NARROW MOBILE, 400px and below
   ========================================================================== */
@media (max-width:400px){
  .strip-item{flex:0 0 44%}
  .strip-item p{font-size:14px}
  .elements .el-in{gap:0 4px}
  .el-disc::after{font-size:28px}
  .el-name{font-size:8px;letter-spacing:.06em}
  .el-desc{font-size:10.5px}
  .slide-title{font-size:26px}
  .split-copy h2,.faq-head h2,.cta h2,.duo-head h2{font-size:23px}
  .el-head h2{font-size:21px}
}


/* ==========================================================================
   XIN SHUI - OVERRIDE BLOCK v3
   APPEND to the very END of css/styles.css, after override block v2.
   v3 ADDS TO v2. It does NOT replace v2. Both must be present.

   DO NOT replace css/styles.css from any file outside the repository.
   Every copy outside the repository is missing image references and
   overwriting the file would strip the photographs off the site.

   PREREQUISITE: override block v1 must be DELETED from this file first.
   v1 sets a CSS mask on the pillar strip scroll container. A mask on a
   scroll container disables touch scrolling in Safari. v2 was written to
   move that fade off the scroll container, but v2 never declares
   mask-image, so it cannot override v1 and v1 survives in the cascade.
   Section 1 below neutralises it defensively, but v1 should still go.

   Longhand properties only. The background shorthand is never used here,
   so every image URL declared earlier in this file survives.

   Contents:
     1. Pillar strip, touch scroll restored
     2. Hero, uniform slide height on mobile
     3. Hero, fifth slide image
     4. Split section, heading overlaid on the photograph
     5. Five Elements, introductory paragraph
     6. Sessions, introductory paragraph
     7. Brand lockup alignment
     8. Scroll offset for the fixed header
   ========================================================================== */


/* ==========================================================================
   1. PILLAR STRIP, TOUCH SCROLL RESTORED
   ========================================================================== */
@media (max-width:700px){
  .strip-in{
    -webkit-mask-image:none;
    mask-image:none;
  }
}


/* ==========================================================================
   2. HERO, UNIFORM SLIDE HEIGHT ON MOBILE
   Below 960px the hero collapses to the height of whichever headline is
   showing, and the five headlines are different lengths. A floor under the
   active slide holds every slide at the height of the tallest.

   TUNE: raise if the longest headline still overflows, lower to tighten.
   Desktop is untouched. .hero already carries a fixed height there.
   ========================================================================== */
@media (max-width:960px){
  .hero{min-height:420px}
  .slide.is-active{min-height:420px;width:100%}
}
@media (max-width:560px){
  .hero{min-height:360px}
  .slide.is-active{min-height:360px}
}
@media (max-width:400px){
  .hero{min-height:340px}
  .slide.is-active{min-height:340px}
}


/* ==========================================================================
   3. HERO, FIFTH SLIDE
   Source image is 16:9 rather than the 2.18:1 of the other four, so it
   crops harder. The sphere sits at roughly 75 percent across the frame.

   TUNE: background-position. Lower pulls the sphere left and further
   under the headline. Higher pushes it right and out of frame.
   ========================================================================== */
.slide-5{background-image:url("../assets/img/hero-5.jpg")}
.slide-5{background-position:72% center}
@media (max-width:700px){
  .slide-5{background-position:68% center}
}


/* ==========================================================================
   4. SPLIT SECTION, HEADING OVERLAID ON THE PHOTOGRAPH
   The blue copy panel is removed from the HTML. The section is now a
   single full width image with the heading sitting on a scrim.

   TUNE: the two gradients below are the scrim. If the heading is hard to
   read against a replacement photograph, raise the first stop toward 1.
   ========================================================================== */
.split{
  grid-template-columns:1fr;
  min-height:0;
}
.split-media{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(46vh,380px);
}
.split-media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.64) 42%,rgba(255,255,255,0) 74%);
  pointer-events:none;
}
.split-overlay{position:relative;z-index:2}
.split-overlay h2{
  font-size:clamp(26px,3.4vw,40px);
  max-width:16ch;
}

@media (max-width:700px){
  .split-media{
    min-height:260px;
  }
  .split-media::before{
    background-image:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.62) 62%,rgba(255,255,255,.32) 100%);
  }
  .split-overlay{align-self:flex-start;padding-top:34px}
  .split-overlay h2{font-size:25px;max-width:18ch}
}
@media (max-width:400px){
  .split-media{min-height:230px}
  .split-overlay h2{font-size:23px}
}


/* ==========================================================================
   5. FIVE ELEMENTS, INTRODUCTORY PARAGRAPH
   Sits below the heading and above the discs. This paragraph came from
   the blue panel that was removed in section 4.
   ========================================================================== */
.el-intro{
  margin-top:16px;
  max-width:56ch;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-60);
}
@media (max-width:560px){
  .el-intro{margin-top:12px;font-size:14.5px;line-height:1.6}
}


/* ==========================================================================
   6. SESSIONS, INTRODUCTORY PARAGRAPH
   ========================================================================== */
.duo-intro{
  margin-top:14px;
  max-width:48ch;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-60);
}
@media (max-width:560px){
  .duo-intro{margin-top:10px;font-size:14.5px}
}


/* ==========================================================================
   7. BRAND LOCKUP ALIGNMENT
   Two corrections.

   a. The mark is enlarged. At 38px it read smaller than the two line
      text block beside it.
   b. Letter spacing is applied AFTER the final character of a line, so
      both lines carried invisible trailing space, and different amounts
      of it, because the two lines carry different tracking values. The
      negative right margins cancel exactly that much and let the text
      block sit optically centred against the mark.

   TUNE: if the mark still reads small, raise 46px and 52px together.
   ========================================================================== */
.brand{align-items:center;gap:12px}
.brand-mark{width:46px;height:46px}
.brand-text{gap:0}
.brand-name{margin-right:-.22em}
.brand-tag{margin-right:-.30em;margin-top:5px}

.foot .brand-mark{width:52px;height:52px}
.foot .brand-name{margin-right:-.22em}
.foot .brand-tag{margin-right:-.30em}

@media (max-width:560px){
  .brand{gap:10px}
  .brand-mark{width:42px;height:42px}
}
@media (max-width:420px){
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:16px;letter-spacing:.18em;margin-right:-.18em}
  .brand-tag{font-size:7.5px;letter-spacing:.24em;margin-right:-.24em}
}


/* ==========================================================================
   8. SCROLL OFFSET FOR THE FIXED HEADER
   Without this, every in page link lands with the target sitting behind
   the fixed header. This was not previously set anywhere in the file.
   ========================================================================== */
#practice,#about,#sessions,#faq,#contact{
  scroll-margin-top:calc(var(--nav-h) + 12px);
}

/* ==========================================================================
   XIN SHUI - OVERRIDE BLOCK v4
   APPEND to the very END of css/styles.css, after override block v3.
   v4 ADDS TO v3. It does NOT replace v3. Both must be present.

   DO NOT replace css/styles.css from any file outside the repository.
   Every copy outside the repository is missing image references and
   overwriting the file would strip the photographs off the site.

   Longhand properties only. The background shorthand is never used here,
   so every image URL declared earlier in this file survives.

   Contents:
     1. Hero slide one, the sphere photograph
     2. Split section, copy moved to the right
     3. Proximity spacing, elements and sessions
     4. Sessions heading sizing
   ========================================================================== */


/* ==========================================================================
   1. HERO SLIDE ONE, SPHERE
   hero-sphere.jpg is 1852x1042, a 16:9 frame against the 2.18:1 of the
   other four heroes, so it crops harder at every width. The sphere sits
   at roughly 74 percent across the source image. The copy sits left, over
   open sky and water, and never touches the sphere.

   TUNE: background-position. Lower pulls the sphere toward the copy.
   Higher pushes it off the right edge.
   ========================================================================== */
.slide-sphere{background-image:url("../assets/img/hero-sphere.jpg")}
.slide-sphere{background-position:62% center}

@media (max-width:700px){
  /* Portrait crops hard. This keeps the sphere in frame below the
     headline rather than losing it off the right edge. */
  .slide-sphere{background-position:72% center}
}


/* ==========================================================================
   2. SPLIT SECTION, COPY TO THE RIGHT
   The heading moves clear of the figure in the photograph, which sits
   left of centre. The scrim reverses direction so the white wash follows
   the text to the right edge instead of away from it.
   ========================================================================== */
.split-media{justify-content:flex-end}
.split-overlay{text-align:right}
.split-overlay h2{margin-left:auto}
.split-media::before{
  background-image:linear-gradient(270deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.64) 42%,rgba(255,255,255,0) 74%);
}

@media (max-width:700px){
  /* Mobile keeps a vertical scrim. A side wash leaves too little width
     for the heading on a narrow screen. Text stays right aligned so the
     alignment reads as deliberate rather than as a breakpoint artefact. */
  .split-media::before{
    background-image:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.64) 58%,rgba(255,255,255,.30) 100%);
  }
  .split-overlay{align-self:flex-start;padding-top:32px}
  .split-overlay h2{max-width:20ch;margin-left:auto}
}


/* ==========================================================================
   3. PROXIMITY SPACING
   Each item now sits closer to its own caption than to its neighbour, so
   the eye groups text with the right visual. Previously the two gaps were
   near equal, which is why nothing grouped.

   TUNE: in each pair below, the first value is the gap WITHIN an item and
   the second is the gap BETWEEN items. Keep the second at least three
   times the first or the grouping stops reading.
   ========================================================================== */

/* Five elements. Disc, name and descriptor tighten into one unit while
   the gap between the five items opens up. */
.el{gap:8px}
.elements .el-in{gap:34px 22px}

/* Sessions. The photograph and its heading pull together, and the two
   cards separate from each other. */
.duo{gap:8px}
.duo-body{padding-top:20px}

@media (max-width:560px){
  .el{gap:6px}
  .elements .el-in{gap:26px 8px}
  .duo{gap:14px}
  .duo-body{padding-top:16px}
}


/* ==========================================================================
   4. SESSIONS HEADING
   The heading is now two lines rather than two words, so it needs a
   tighter size and a wider measure than the previous one, and less space
   beneath it before the cards begin.
   ========================================================================== */
.duo-head h2{font-size:clamp(22px,2.7vw,31px);max-width:24ch}
.duo-head{padding-block:clamp(40px,5.5vw,62px) clamp(16px,2vw,22px)}

@media (max-width:560px){
  .duo-head h2{font-size:22px;max-width:none}
}
@media (max-width:400px){
  .duo-head h2{font-size:21px}
}


/* ==========================================================================
   XIN SHUI - OVERRIDE BLOCK v5
   APPEND to the very END of css/styles.css, after override block v4.
   v5 ADDS TO v4. It does NOT replace v4. All earlier blocks must remain.

   DO NOT replace css/styles.css from any file outside the repository.
   Every copy outside the repository is missing image references and
   overwriting the file would strip the photographs off the site.

   Longhand properties only. The background shorthand is never used here,
   so every image URL declared earlier in this file survives.

   Contents:
     1. Back to top button
   ========================================================================== */


/* ==========================================================================
   1. BACK TO TOP BUTTON

   Appears once the visitor is one screen down. The script toggles the
   hidden attribute, so the rule below must restore display:none for it.
   Without that line the display value here would override the browser
   default and the button would never hide.

   TUNE: --totop-gap is the clearance from the bottom and right edges.
   ========================================================================== */
:root{ --totop-gap:16px; }

.totop{
  position:fixed;
  right:var(--totop-gap);
  bottom:var(--totop-gap);
  z-index:40;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:11px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background-color:var(--deep);
  color:#fff;
  box-shadow:0 4px 14px rgba(23,64,102,.24);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .26s ease,transform .26s ease,background-color .2s ease;
}

.totop[hidden]{display:none}

.totop.is-on{
  opacity:1;
  transform:translateY(0);
}

.totop:hover{background-color:var(--mid)}

.totop:focus-visible{
  outline:2px solid var(--deep);
  outline-offset:3px;
}

.totop svg{width:100%;height:100%}

@media (max-width:560px){
  :root{ --totop-gap:14px; }
  .totop{width:40px;height:40px;padding:10px}
}

@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity .01s linear}
}