/* ==========================================================================
   遇見提斯 Serendipity Pilates｜全站樣式　v2
   WordPress + Blocksy。所有自訂 class 一律 sp- 前綴。
   整份檔案只准出現 999.98px 與 689.98px 兩個斷點，不得新增第三個。

   v2 的變更：
   1  全站內容寬度一律 1290，含 Hero 與 Footer 內容。Footer 只有底色可以全寬。
   2  Hero 改三張輪播，配圖改情境圖。
   3  五館速覽帶移除，改成「五大據點」區塊，放在精選課程之後。
   4  品牌理念左側改輪播、圖放大到 560，右欄切齊 1290 右緣。
   5  精選課程橫捲左右都收在 1290 內。
   6  學員見證加背景照與毛玻璃。
   7  加入一套視覺元素：區塊編號、弧形線稿、襯線水印字、漸層分隔帶。
   8  Footer 內容 4 欄各 25%，分店 3 + 2 兩排。
   ========================================================================== */

/* --- 1 變數 ------------------------------------------------------------- */
:root{
  --sp-paper:#FFFFFF;
  --sp-cream:#F2EBE1;
  --sp-cocoa:#422B24;
  --sp-ink:#422B24;
  --sp-ink-2:#6A483E;
  --sp-ink-3:#7C6058;
  --sp-gold:#B7946D;
  --sp-umber:#8E5B3B;
  --sp-umber-hover:#7A4A30;
  --sp-milk:#CEB09A;
  --sp-line:rgba(66,43,36,.18);
  --sp-line-strong:rgba(66,43,36,.55);
  --sp-veil:rgba(66,43,36,.06);
  --sp-veil-strong:rgba(66,43,36,.12);
  --sp-alert:#A3402B;

  --sp-shadow:6px 6px 18px 0 rgba(206,176,154,.45);
  /* 照片壓字漸層：終點 0.65 是第 15 章定案值（裁決 14） */
  --sp-scrim-left:linear-gradient(90deg,rgba(66,43,36,.65) 0%,rgba(66,43,36,.30) 55%,transparent 100%);
  --sp-scrim-bottom:linear-gradient(180deg,rgba(66,43,36,0) 40%,rgba(66,43,36,.65) 100%);

  --sp-display:"Cormorant Garamond","Noto Serif TC","Source Han Serif TC","Songti TC",serif;
  --sp-sans:"Inter","Noto Sans TC","Source Han Sans TC","PingFang TC",sans-serif;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:64px; --sp-9:80px; --sp-10:120px;

  --sp-container:1290px;
  --sp-gutter:24px;
  --sp-col-gap:30px;
  --sp-card-gap:24px;
  --sp-measure:640px;
  --sp-radius:16px;
  --sp-radius-sm:12px;
  --sp-header-h:80px;
  --sp-gap:120px;          /* 區塊之間的間距，全站唯一的一個數字 */

  --sp-ease:cubic-bezier(.4,0,.2,1);      /* 狀態切換：hover、focus、開闔 */
  --sp-ease-soft:cubic-bezier(.22,1,.36,1); /* 進場與揭示：慢出、不回彈 */
}
/* --sp-header-h 要跟著 sp-theme.css 裡的頁首列高走（手機已改成 76） */
@media (max-width:999.98px){ :root{ --sp-col-gap:24px; --sp-header-h:76px; --sp-gap:80px; } }
@media (max-width:689.98px){
  :root{ --sp-col-gap:16px; --sp-gutter:16px; --sp-radius:12px; --sp-gap:60px;
         --sp-shadow:4px 4px 12px 0 rgba(206,176,154,.45); }
}

/* --- 2 版面骨架 --------------------------------------------------------- */
/* 全站唯一的內容容器。桌機 1290、平板 90vw、手機 88vw。 */
.sp-block{ width:min(90vw,var(--sp-container)); margin-inline:auto; position:relative; }
@media (max-width:689.98px){ .sp-block{ width:88vw; } }

/* 只給「底色需要全寬」的區塊用，內容仍由 .sp-block 收在 1290 */
.sp-full{ width:100vw; margin-inline:calc(50% - 50vw); position:relative; }

/* 區塊間距：每個頂層區塊掛 .sp-sec，相鄰兩塊之間就是 --sp-gap。
   不用 padding 是因為兩邊 padding 會相加，120 + 120 會變成 240。 */
.sp-sec + .sp-sec{ margin-top:var(--sp-gap); }
/* 底色或背景照需要全寬的區塊，內部自己補一份同樣的呼吸 */
.sp-sec--filled{ padding-block:var(--sp-gap); }

/* --- 3 排版基礎 --------------------------------------------------------- */
/* .sp-home 是首頁的根，.sp-page 是其餘各頁的根，兩者規格相同。
   內頁沿用同一套基礎，不要再定義第三個根 class。 */
.sp-home,.sp-page{
  font-family:var(--sp-sans); font-weight:500;
  font-size:16px; line-height:1.8; letter-spacing:.02em;
  color:var(--sp-ink); background:var(--sp-paper);
  /* 裝飾元素出血不產生水平捲軸。
     一定要用 clip 不要用 hidden：hidden 會讓這個容器變成 BFC 與捲動容器，
     實測會讓頁面底部多出 80px，頁尾前的間距就不是規範的 120px 了。
     clip 只裁切、不建立 BFC。上面那行是不支援 clip 的舊瀏覽器的後備。 */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.sp-home *,.sp-page *{ box-sizing:border-box; }
/* reset 用 :where() 把權重降到 0，才不會蓋掉元件自己的 display 與 height */
.sp-home :where(img),.sp-page :where(img){ display:block; max-width:100%; height:auto; }

/* 明體只用於 32px 以上 */
.sp-display,.sp-h1,.sp-h2{
  font-family:var(--sp-display); font-weight:300;
  letter-spacing:.01em; color:var(--sp-cocoa); margin:0;
  /* Cormorant Garamond 預設是舊式數字（oldstyle figures），數字會掉到
     x-height，「市政府 1 店」的 1 看起來像小寫羅馬數字 i，跟中文字級對不齊。
     lining-nums 把數字拉回與大寫同高，中文與數字才一樣大。 */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1, "onum" 0;
}
/* 其餘用到同一款明體的地方（區塊編號、浮水印、卡片名稱等）一起校正 */
.sp-secno b,.sp-watermark,.sp-cta__title,.sp-slogan__big{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1, "onum" 0;
}
.sp-display{ font-size:48px; line-height:1.3; }
.sp-h1,.sp-h2{ font-size:40px; line-height:1.3; }
@media (max-width:999.98px){ .sp-display{ font-size:40px; } .sp-h1,.sp-h2{ font-size:32px; } }
@media (max-width:689.98px){
  .sp-display{ font-size:32px; }
  .sp-h1,.sp-h2{ font-family:var(--sp-sans); font-weight:600; font-size:24px; }
}

.sp-eyebrow{
  font-family:var(--sp-sans); font-weight:500;
  font-size:14px; line-height:1.6; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sp-umber); margin:0;
}

/* 通用的分隔中點。文字之間的距離交給 gap，中點只負責當記號，
   不再靠全形空格撐開，左右才會等距、垂直才會對齊。 */
.sp-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:1em; margin:0 .45em; line-height:1; font-size:.85em; opacity:.55;
  transform:translateY(-0.04em);
}
/* 浮動按鈕本身是 flex 且有 gap，再給 margin 會疊成兩倍寬 */
.sp-float .sp-dot{ margin:0; }
@media (max-width:689.98px){ .sp-eyebrow{ font-size:12px; } }

.sp-body-l{ font-size:18px; line-height:1.9; letter-spacing:.02em; margin:0; }
.sp-body  { font-size:16px; line-height:1.8; letter-spacing:.02em; margin:0; }
.sp-small { font-size:14px; line-height:1.7; letter-spacing:.03em; color:var(--sp-ink-3); margin:0; }
.sp-tag   { font-size:12px; line-height:1.6; letter-spacing:.05em; margin:0; }
@media (max-width:689.98px){
  .sp-body-l{ font-size:16px; } .sp-body{ font-size:15px; } .sp-small{ font-size:13px; }
}

/* 中文的斷行規則，全站共用這一條。
   - text-wrap:pretty：段落結尾常常只剩「程。」這種一兩個字掉到下一行，
     瀏覽器會自己往前調幾行的斷點來避開孤字。不支援的會忽略，不影響版面。
   - word-break:keep-all：中文預設可以在任兩個字之間斷行，所以會出現
     「不需要另外負擔設備／與長期場租成本」這種把詞剖一半的斷法。
     加了之後只在標點與空白處換行，斷點就會落在逗號、頓號後面。
   - overflow-wrap:anywhere：keep-all 的保險。整句都沒有標點的時候，
     keep-all 會把它當成一個不可斷的長詞，直接撐破容器（break-word 在
     keep-all 下救不了中文），要有這一條才會在放不下時強制斷。 */
p, li, dd, blockquote, figcaption{
  text-wrap:pretty; word-break:keep-all; overflow-wrap:anywhere;
}

/* --- 4 按鈕 ------------------------------------------------------------- */
.sp-btn,.sp-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  /* 高度用 min-height 不用 height：欄位變窄時按鈕文字會換成兩行，
     寫死 44px 的話第二行會掉到膠囊外面。單行時 padding 撐不到 44，
     所以維持規範的 44px 觸控目標；兩行時才自動長高。 */
  min-height:44px; min-width:160px; max-width:320px; padding:6px 28px;
  border-radius:999px; font-family:var(--sp-sans); font-weight:500;
  /* 換兩行時第二行要跟著置中，justify-content 只管 flex item，管不到行內的文字 */
  font-size:16px; line-height:1.2; letter-spacing:.05em; text-align:center;
  text-decoration:none; position:relative; overflow:hidden; cursor:pointer;
  transition:background-color 300ms var(--sp-ease), color 300ms var(--sp-ease);
}
.sp-btn{ background:var(--sp-umber); color:#FFFFFF; border:0; }
.sp-btn::before{ content:""; position:absolute; inset:0; background:var(--sp-veil);
                 opacity:0; transition:opacity 300ms var(--sp-ease); }
.sp-btn-ghost{ background:transparent; color:var(--sp-cocoa); border:1px solid var(--sp-cocoa); }
@media (hover:hover) and (pointer:fine){
  .sp-btn:hover::before{ opacity:1; }
  .sp-btn-ghost:hover{ background:var(--sp-veil); }
}
.sp-btn:active::before{ opacity:1; background:var(--sp-veil-strong); }
.sp-btn-ghost:active{ background:var(--sp-veil-strong); }
.sp-btn:focus-visible,.sp-btn-ghost:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:2px; }
@media (max-width:689.98px){
  .sp-btn,.sp-btn-ghost{ min-height:48px; font-size:15px; padding:6px 24px; }
  .sp-btn-full{ width:100%; max-width:none; }
}

/* --- 5 視覺元素：編號、弧形線稿、水印字、漸層分隔帶 --------------------- */
/* 5a 區塊編號 + 髮絲線 */
.sp-secno{ display:flex; align-items:center; gap:var(--sp-3);
           margin:0 0 var(--sp-4); color:var(--sp-gold); }
.sp-secno b{ font-family:var(--sp-display); font-weight:300; font-size:24px; line-height:1;
             letter-spacing:.06em;
             /* lining 與 tabular 要寫在同一條。font-variant-numeric 是單一屬性，
                分成兩條寫的話後面那條會把前面整個蓋掉，數字又會變回舊式字形。 */
             font-variant-numeric:lining-nums tabular-nums; }
.sp-secno i{ flex:1; height:1px; background:currentColor; opacity:.55; }

/* 5b 弧形線稿：抽自 Logo 的圓，只做記號不承載文字 */
.sp-arc{ position:absolute; pointer-events:none; z-index:0; line-height:0; }
.sp-arc svg{ display:block; width:100%; height:auto; }
.sp-arc circle{ fill:none; stroke:rgba(183,148,109,.38); stroke-width:1.25; }
.sp-arc--soft circle{ stroke:rgba(183,148,109,.2); }
.sp-arc--light circle{ stroke:rgba(242,235,225,.3); }
@media (max-width:689.98px){ .sp-arc{ display:none; } }

/* 5c 襯線水印字 */
.sp-watermark{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--sp-display); font-weight:300; font-size:128px; line-height:.9;
  letter-spacing:.01em; color:rgba(66,43,36,.05); white-space:nowrap;
}
.sp-watermark--tr{ right:0; top:-46px; }
/* 平板以下一律隱藏。容器變窄之後，128px 的水印會直接壓在標題上，
   而規範要求水印是「墊在後面、絕對不能蓋到內容」的裝飾。
   原本只在手機隱藏，實測 900px 就已經重疊了。 */
@media (max-width:999.98px){ .sp-watermark{ display:none; } }


/* --- 6 區塊標題列 ------------------------------------------------------- */
.sp-sechead{ position:relative; z-index:1;
             display:flex; justify-content:space-between; align-items:flex-end;
             gap:var(--sp-5); margin-bottom:var(--sp-7); }
.sp-sechead__t{ min-width:0; flex:1; }
.sp-sechead .sp-h2{ margin-top:var(--sp-3); }
.sp-sechead--center{ flex-direction:column; align-items:center; text-align:center; }
.sp-sechead--center .sp-sechead__t{ max-width:640px; flex:none; }
.sp-sechead--center .sp-secno{ justify-content:center; }
.sp-sechead--center .sp-secno i{ flex:0 0 56px; }

/* 區塊的出口按鈕一律放在內容下方置中。
   這樣標題列右側就整片空出來，水印字與弧形線稿才不會跟按鈕打架。 */
.sp-sec-more{ margin-top:var(--sp-9); text-align:center; position:relative; z-index:1; }
@media (max-width:689.98px){
  .sp-sechead{ flex-direction:column; align-items:stretch; margin-bottom:var(--sp-5); }
  .sp-sec-more{ margin-top:var(--sp-6); }
  .sp-sec-more .sp-btn-ghost{ width:100%; max-width:none; }
}

/* 進場：全站唯一的一次性進場動畫，只給區塊標題列 */
.sp-reveal{ position:relative; }
/* 沒有 JS 或 JS 出錯時，遮罩根本不存在，文字一定看得到 */
.sp-reveal.is-armed{ overflow:hidden; }
.sp-reveal.is-armed::after{ content:""; position:absolute; inset:0; background:var(--sp-cream);
                            transform:translateY(0); pointer-events:none; }
.sp-reveal.is-armed.is-in::after{ animation:sp-reveal 600ms cubic-bezier(.22,1,.36,1) .1s forwards; }
@keyframes sp-reveal{ to{ transform:translateY(-101%); } }
@media (max-width:689.98px){ .sp-reveal.is-armed::after{ display:none; } }

/* --- 7 輪播（Hero 與品牌理念共用）-------------------------------------- */
.sp-carousel{ position:relative; }
.sp-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1200ms var(--sp-ease); }
.sp-slide.is-on{ opacity:1; }
.sp-slide img{ width:100%; height:100%; object-fit:cover; }
/* 有動效時，換圖帶一點方向感：新的一張從側邊滑進來，舊的一張往反方向退出 */
.sp-motion .sp-slide{
  transform:translateX(var(--sp-dx,26px));
  transition:opacity 1200ms var(--sp-ease-soft), transform 1200ms var(--sp-ease-soft);
}
.sp-motion .sp-slide.is-on { transform:translateX(0); }
.sp-motion .sp-slide.is-out{ transform:translateX(calc(var(--sp-dx,26px) * -0.7)); }

/* 控制列：左右箭頭與指示點放在同一排 */
.sp-nav{ position:absolute; z-index:5; display:flex; align-items:center; gap:var(--sp-4);
         right:var(--sp-7); bottom:var(--sp-7); }
.sp-nav__btn{
  width:44px; height:44px; flex:none; padding:0; cursor:pointer;
  border-radius:999px; border:1px solid rgba(255,255,255,.55);
  background:rgba(66,43,36,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  transition:background-color 300ms var(--sp-ease), border-color 300ms var(--sp-ease);
}
.sp-nav__btn svg{ width:16px; height:16px; fill:none; stroke:#FFFFFF; stroke-width:1.6;
                  stroke-linecap:round; stroke-linejoin:round;
                  transition:transform 300ms var(--sp-ease); }
@media (hover:hover) and (pointer:fine){
  .sp-nav__btn:hover{ background:rgba(66,43,36,.55); border-color:#FFFFFF; }
  .sp-nav__btn--prev:hover svg{ transform:translateX(-3px); }
  .sp-nav__btn--next:hover svg{ transform:translateX(3px); }
}
.sp-nav__btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }

.sp-dots{ display:flex; gap:var(--sp-2); }
.sp-dots--float{ position:absolute; z-index:4; right:var(--sp-7); bottom:var(--sp-7); }
.sp-dots button{ width:32px; height:3px; padding:0; border:0; border-radius:999px; cursor:pointer;
                 background:rgba(255,255,255,.45); transition:background-color 300ms var(--sp-ease); }
.sp-dots button[aria-selected="true"]{ background:#FFFFFF; }
.sp-dots button:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
.sp-dots--ink button{ background:rgba(66,43,36,.22); }
.sp-dots--ink button[aria-selected="true"]{ background:var(--sp-umber); }
.sp-dots--ink button:focus-visible{ outline-color:var(--sp-umber); }
@media (max-width:689.98px){
  .sp-nav{ right:var(--sp-5); bottom:var(--sp-5); gap:var(--sp-3); }
  .sp-nav__btn{ width:40px; height:40px; }
  .sp-dots--float{ right:var(--sp-5); bottom:var(--sp-5); }
}

/* --- 8 ｜01 Hero -------------------------------------------------------- */
.sp-hero{ padding-top:44px; }
.sp-hero__frame{ position:relative; height:600px; border-radius:var(--sp-radius); overflow:hidden; }
.sp-hero__frame .sp-slide img{ object-position:50% 45%; }
.sp-hero__frame::after{ content:""; position:absolute; inset:0; z-index:2;
                        background:var(--sp-scrim-left); pointer-events:none; }
.sp-hero__copy{ position:absolute; inset:0; z-index:3;
                display:flex; flex-direction:column; justify-content:center;
                padding-inline:var(--sp-8); text-align:left; }
.sp-hero__copy .sp-eyebrow{ color:#FFFFFF; }
.sp-hero__copy .sp-display{ color:#FFFFFF; margin-top:var(--sp-3); }
.sp-hero__sub{ color:#FFFFFF; margin-top:var(--sp-4); max-width:480px; }
.sp-hero__cta{ margin-top:28px; }
.sp-hero__cta-m{ display:none; }
@media (max-width:999.98px){
  .sp-hero__frame{ height:520px; }
  .sp-hero__copy{ padding-inline:var(--sp-7); }
}
@media (max-width:689.98px){
  .sp-hero{ padding-top:var(--sp-5); }
  .sp-hero__frame{ height:auto; aspect-ratio:6/7; }
  .sp-hero__frame .sp-slide img{ object-position:55% 45%; }
  .sp-hero__frame::after{ background:var(--sp-scrim-bottom); }
  .sp-hero__copy{ padding:var(--sp-5); justify-content:flex-end; }
  .sp-hero__cta{ display:none; }
  .sp-hero__cta-m{ display:block; margin-top:var(--sp-4); }
  .sp-hero__cta-m .sp-btn{ width:100%; max-width:none; }
  /* 手機版的文案改成貼底，控制列如果還留在右下就會壓住副標。
     把整條控制列移到右上，那裡是牆面不是人物主體。
     （原本只對 .sp-dots 設 top，但它在 .sp-nav 裡是 flex 子元素，設了沒有作用。） */
  /* 控制列移到照片下緣、水平置中。原本移到右上是為了不擋貼底的文案，
     但那個位置在手機上會壓到照片主體。改到下緣之後換成會壓到副標，
     所以文案也要往上讓出這一條的高度。 */
  .sp-hero .sp-nav{
    top:auto; bottom:var(--sp-4); left:0; right:0;
    justify-content:center; gap:var(--sp-3);
  }
  .sp-hero__copy{ padding-bottom:84px; }
}

/* --- 9 ｜02 品牌理念（拱形記號第 1 次 + 位移色塊）---------------------- */
.sp-brand{ display:flex; align-items:center; gap:var(--sp-9); position:relative; z-index:1; }
.sp-brand__media{ flex:none; width:560px; }
.sp-arch-image{
  position:relative; width:560px; height:747px; overflow:hidden;
  border-radius:280px 280px var(--sp-radius) var(--sp-radius);
  border:1px solid var(--sp-line);
  box-shadow:-54px 0 0 0 var(--sp-cream);   /* 位移色塊，全站配額 1 次 */
}
.sp-arch-image .sp-slide img{ object-position:50% 32%; }
.sp-brand__copy{ flex:1; min-width:0; }
.sp-brand__copy .sp-h2{ margin-top:var(--sp-3); }
.sp-brand__rule{ height:1px; background:var(--sp-line); margin:var(--sp-6) 0; }
.sp-brand__text{ max-width:var(--sp-measure); }
.sp-brand__text p + p{ margin-top:var(--sp-5); }
.sp-brand__cta{ margin-top:var(--sp-7); display:flex; align-items:center; gap:var(--sp-5); }
.sp-brand__line{ flex:1; height:1px; background:var(--sp-line); }
@media (max-width:999.98px){
  /* 平板橫跨 690 到 999，寬度差了三百多，固定值撐不住兩端。
     原本圖寫死 380 加 64 的間距：在 999 還算舒服，到了 690 的下緣，
     容器只有 621，右欄剩不到 180，32px 的標題一行放不滿六個字。
     改成百分比讓圖跟著容器縮，兩端就都成立。
     圖比桌機矮了一截，垂直置中會讓它浮在左邊一大片空白的正中間，
     改成向上對齊，跟右欄的區塊編號切齊。 */
  .sp-brand{ gap:var(--sp-6); align-items:flex-start; }
  /* 只有外層吃百分比。.sp-arch-image 是它的子元素，
     兩個都寫 38% 會相乘變成 14%，圖會縮成一張郵票。 */
  .sp-brand__media{ width:38%; }
  /* 拱形也要跟著寬度走。水平半徑是寬的一半，垂直是高的 37.5%（280÷747），
     兩軸用斜線分開寫，否則上緣會被拉成橢圓。 */
  .sp-arch-image{ width:100%; height:auto; aspect-ratio:560/747;
                  border-radius:50% 50% var(--sp-radius) var(--sp-radius)
                              / 37.5% 37.5% var(--sp-radius) var(--sp-radius);
                  box-shadow:-24px 0 0 0 var(--sp-cream); }
}
@media (max-width:689.98px){
  .sp-brand{ flex-direction:column; align-items:stretch; gap:var(--sp-6); }
  .sp-brand__media{ width:100%; }
  .sp-arch-image{ width:100%; max-width:320px; height:auto; aspect-ratio:3/4; margin-inline:auto;
                  border-radius:160px 160px var(--sp-radius-sm) var(--sp-radius-sm); box-shadow:none; }
  .sp-brand__cta{ flex-direction:column; align-items:stretch; }
  .sp-brand__line{ display:none; }
  .sp-brand__cta .sp-btn-ghost{ width:100%; max-width:none; }
}

/* --- 10 ｜03 精選課程橫捲（左右都收在 1290 內）------------------------- */
.sp-courses__rail{ display:flex; gap:var(--sp-4); overflow-x:auto; scrollbar-width:none;
                   cursor:grab; scroll-snap-type:x proximity; position:relative; z-index:1;
                   padding-bottom:var(--sp-2); }
.sp-courses__rail::-webkit-scrollbar{ display:none; }
/* 拖曳時不要選到卡片裡的文字，不然整列文字會反白 */
.sp-courses__rail{ user-select:none; -webkit-user-select:none; }

/* 橫捲的外層：箭頭與右緣漸層都定位在這裡。
   六張卡片的總寬超過 1290 容器，第四張一定會被切在邊緣。
   沒有提示的話那看起來就只是破版，所以補上這兩個訊號。 */
.sp-courses__wrap{ position:relative; }
.sp-courses__nav{
  /* 對齊卡片「圖片」的垂直中央，不是整張卡的中央。
     圖是 4:5，所以圖高＝卡片寬 ×1.25，各斷點的卡片寬不同，下面分別給。 */
  position:absolute; top:200px; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); border:1px solid var(--sp-line);
  color:var(--sp-cocoa); box-shadow:0 2px 12px rgba(66,43,36,.12);
  transition:opacity 300ms var(--sp-ease), background-color 300ms var(--sp-ease);
}
.sp-courses__nav svg{ width:20px; height:20px; fill:none; stroke:currentColor;
                      stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sp-courses__nav--prev{ left:-16px; }
.sp-courses__nav--next{ right:-16px; }
.sp-courses__nav:hover{ background:#FFFFFF; }
.sp-courses__nav:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:2px; }
/* 捲到底的那一側，按鈕淡出並停用，避免按了沒反應 */
.sp-courses__nav[disabled]{ opacity:0; pointer-events:none; }

/* 右緣漸層：讓被切到的那張看起來是「淡出」而不是「硬切」 */
.sp-courses__wrap::after{
  content:""; position:absolute; top:0; right:0; width:64px; height:calc(100% - 92px);
  background:linear-gradient(to right, rgba(250,248,245,0), var(--sp-cream, #FAF8F5));
  pointer-events:none; opacity:0; transition:opacity 300ms var(--sp-ease);
}
.sp-courses__wrap.has-more::after{ opacity:1; }

/* 小視窗容器留白變窄，箭頭改放在容器內側，才不會被切掉 */
@media (max-width:1100px){
  .sp-courses__nav--prev{ left:6px; }
  .sp-courses__nav--next{ right:6px; }
}
@media (max-width:999.98px){ .sp-courses__nav{ top:162px; } }   /* 卡片 260 → 圖高 325 */
/* 觸控裝置直接用手指滑，箭頭反而擋住照片 */
@media (pointer:coarse){ .sp-courses__nav{ display:none; } }
.sp-courses__rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.sp-card{ flex:none; width:320px; scroll-snap-align:start; text-decoration:none; color:inherit; display:block; }
.sp-card__media{ position:relative; border-radius:var(--sp-radius); overflow:hidden; border:1px solid var(--sp-line); }
.sp-card__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 40%; }
.sp-card__media::after{ content:""; position:absolute; inset:0; background:var(--sp-veil);
                        opacity:0; transition:opacity 300ms var(--sp-ease); }
.sp-card__no{ position:absolute; left:var(--sp-4); top:var(--sp-4); z-index:1;
              font-family:var(--sp-display); font-weight:300; font-size:20px; line-height:1;
              color:#FFFFFF; letter-spacing:.06em; text-shadow:0 1px 8px rgba(66,43,36,.55); }
/* 三層的字級要拉開才看得出主從：
   英文分類 11、課程名 24、說明 13。原本課程名只有 18，
   與上下兩層太接近，整張卡讀起來是平的。 */
.sp-card__cat { margin-top:var(--sp-4); font-size:11px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--sp-umber); }
.sp-card__name{ margin-top:var(--sp-1); font-size:24px; font-weight:600; line-height:1.4;
                letter-spacing:.02em;
                color:var(--sp-cocoa); transition:color 300ms var(--sp-ease); }
.sp-card__meta{ margin-top:var(--sp-2); font-size:13px; color:var(--sp-ink-3); }
@media (hover:hover) and (pointer:fine){
  .sp-card:hover .sp-card__media::after{ opacity:1; }
  .sp-card:hover .sp-card__name{ color:var(--sp-ink-3); }
}
.sp-card:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:4px; border-radius:var(--sp-radius); }
@media (max-width:999.98px){ .sp-card{ width:260px; } }
@media (max-width:689.98px){
  .sp-card{ width:200px; }
  .sp-card__name{ font-size:20px; }
}

/* --- 11 ｜04 五大據點（3 + 2）------------------------------------------ */
.sp-studios__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
                   position:relative; z-index:1; }
/* 卡片自己是 flex 直欄，底部的 meta 列用 margin-top:auto 貼底。
   各館的一句話定位與特色列行數不一，不這樣做，一排卡片的底線會參差不齊。 */
.sp-studio{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.sp-studio__media{ position:relative; border-radius:var(--sp-radius); overflow:hidden;
                   border:1px solid var(--sp-line); }
.sp-studio__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.sp-studio__media::after{ content:""; position:absolute; inset:0; background:var(--sp-veil);
                          opacity:0; transition:opacity 300ms var(--sp-ease); }
.sp-studio__no{ position:absolute; left:var(--sp-4); top:var(--sp-4); z-index:1;
                width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.65);
                display:flex; align-items:center; justify-content:center;
                font-family:var(--sp-display); font-weight:300; font-size:16px; color:#FFFFFF;
                letter-spacing:.04em; background:rgba(66,43,36,.28);
                backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sp-studio__head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-top:var(--sp-4); }
.sp-studio__name{ font-size:20px; font-weight:600; line-height:1.4; color:var(--sp-cocoa);
                  transition:color 300ms var(--sp-ease); }
.sp-studio__en  { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-gold); }
.sp-studio__tag { margin-top:var(--sp-2); font-size:15px; line-height:1.8; color:var(--sp-ink); }
.sp-studio__meta{ margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--sp-line);
                  display:flex; justify-content:space-between; gap:var(--sp-3); }
/* margin-top 被 auto 佔用了，與上一段的最小間距改由上一個元素負責 */
.sp-studio__tag,.sp-studio__feats{ margin-bottom:var(--sp-3); }
.sp-studio__go  { color:var(--sp-umber); font-size:14px; letter-spacing:.04em; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){
  .sp-studio:hover .sp-studio__media::after{ opacity:1; }
  .sp-studio:hover .sp-studio__name{ color:var(--sp-ink-3); }
}
.sp-studio:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:4px; border-radius:var(--sp-radius); }
@media (max-width:999.98px){ .sp-studios__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:689.98px){ .sp-studios__grid{ grid-template-columns:1fr; } }

/* --- 12 ｜05 學員見證（背景照 + 毛玻璃）-------------------------------- */
.sp-voices{ position:relative; isolation:isolate; }
.sp-voices__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.sp-voices__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 78%; }
.sp-voices::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(66,43,36,.58) 0%,rgba(66,43,36,.38) 50%,rgba(66,43,36,.58) 100%); }
.sp-voices .sp-eyebrow{ color:var(--sp-milk); }
.sp-voices .sp-h2{ color:#FFFFFF; }
.sp-voices .sp-secno{ color:var(--sp-milk); }
/* 學員回饋：1290 容器內三欄並排。
   卡片的內距四邊一致，三張的高度由 grid 拉齊，
   底部那一行用 margin-top:auto 推到底，所以引文長短不同也不會參差。 */
.sp-voices__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-card-gap);
  align-items:stretch;
}
.sp-quote{
  /* 內距寫成變數，配圖的負 margin 才能跟著一起變。
     手機斷點只改這個變數，兩邊就不會再對不上。 */
  --quote-pad:var(--sp-6);
  margin:0; padding:var(--quote-pad);     /* 四邊等距 */
  display:flex; flex-direction:column;
  border-radius:var(--sp-radius);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(115%);
  -webkit-backdrop-filter:blur(20px) saturate(115%);
  border:1px solid rgba(255,255,255,.5); box-shadow:var(--sp-shadow);
}
/* 圓形大頭貼。原本是滿版的 4:3 配圖，照片的份量太重，
   和背景的大圖互相搶，卡片看起來像貼了一張海報。
   縮成 96px 的圓形之後，照片退回「這是誰說的」的角色，背景才安靜。
   之後客戶提供學員照片時直接換圖即可，版面不用再動。 */
.sp-quote__avatar{
  width:200px; height:200px; margin:0 auto var(--sp-5);
  border-radius:50%; overflow:hidden; background:var(--sp-cream);
  /* 白色細圈把頭像和毛玻璃卡面分開，邊緣才不會糊在一起 */
  box-shadow:0 0 0 3px rgba(255,255,255,.75), 0 6px 18px rgba(66,43,36,.12);
}
.sp-quote__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-quote__text{
  /* blockquote 會被主題套上 4px 赭色左框與 24px 內距，
     引文寬度因此比卡片少了 28px，斷行位置也跟著偏。這裡歸零。 */
  margin:0; padding:0; border:0;
  font-size:16px; line-height:1.9; letter-spacing:.02em; color:var(--sp-ink);
}
/* 出處移到引文上方，接在頭像下面：頭像、名次、出處三段置中成一疊，
   下面用一條線和敘述隔開。三張卡的頭像與出處都是固定高度，
   上半部自然對齊，不必再靠 margin-top:auto 去對底線。 */
/* 出處這一列在 HTML 裡是 <figcaption>，主題的 .entry-content figcaption
   帶了 margin-block，特異性（0,1,1）比單一 class 高，單寫 .sp-quote__foot
   的 margin 會被蓋掉，分隔線與敘述就貼在一起。用兩個 class 壓過去。 */
.sp-quote .sp-quote__foot{
  /* 分隔線到敘述的距離（這裡的 margin-bottom）要等於敘述到卡片底的距離，
     後者是卡片自己的 --quote-pad，所以兩邊都吃同一個變數。 */
  margin:0 0 var(--quote-pad); padding:0 0 var(--sp-5);
  border-bottom:1px solid var(--sp-line);
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
/* 名次是這張卡的主詞，字級要明顯壓過 16px 的敘述，層級才拉得開 */
.sp-quote__name{ font-size:22px; font-weight:600; line-height:1.45; letter-spacing:.02em;
                 color:var(--sp-cocoa); }
.sp-quote__meta{ font-size:13px; line-height:1.6; letter-spacing:.04em; color:var(--sp-ink-3); }
@media (max-width:999.98px){
  .sp-voices__grid{ grid-template-columns:1fr; }
  .sp-quote{ --quote-pad:var(--sp-5); }
  .sp-quote__avatar{ width:160px; height:160px; }
  .sp-quote__name{ font-size:20px; }
}
.sp-voices__note{ margin-top:var(--sp-6); text-align:center; color:rgba(242,235,225,.85); }

/* --- 13 ｜06 最新消息 --------------------------------------------------- */
.sp-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-card-gap);
                position:relative; z-index:1; }
.sp-post{ background:var(--sp-paper); border-radius:var(--sp-radius); overflow:hidden;
          box-shadow:var(--sp-shadow); text-decoration:none; color:inherit; display:block; }
.sp-post__media{ position:relative; }
.sp-post__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.sp-post__media::after{ content:""; position:absolute; inset:0; background:var(--sp-veil);
                        opacity:0; transition:opacity 300ms var(--sp-ease); }
.sp-post__body{ padding:var(--sp-5); }
.sp-pill{ display:inline-block; height:24px; padding:0 12px; line-height:24px; border-radius:999px;
          background:var(--sp-cream); font-size:12px; letter-spacing:.05em; color:var(--sp-umber); }
.sp-post__title{ margin-top:var(--sp-3); font-size:18px; font-weight:600; line-height:1.6;
                 color:var(--sp-cocoa); transition:color 300ms var(--sp-ease);
                 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-post__date{ margin-top:var(--sp-2); }
.sp-post__excerpt{ margin-top:var(--sp-2); font-size:14px; line-height:1.8;
                   display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (hover:hover) and (pointer:fine){
  .sp-post:hover .sp-post__media::after{ opacity:1; }
  .sp-post:hover .sp-post__title{ color:var(--sp-ink-3); }
}
.sp-post:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:4px; border-radius:var(--sp-radius); }
@media (max-width:999.98px){ .sp-news__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:689.98px){
  .sp-news__grid{ grid-template-columns:1fr; }
  .sp-post__media img{ aspect-ratio:3/2; }
}

/* --- 14 ｜07 轉換條 ----------------------------------------------------- */
/* 高度不寫死，改用內距撐開。原本的 91px 太扁，文字與按鈕擠在一起，
   接在前一個區塊後面看起來像黏住的一條。 */
.sp-cta{
  position:relative; overflow:hidden;
  /* 斜向的細微漸層，比單一米色有層次，但仍然壓得住文字 */
  background:linear-gradient(118deg,#F6F1E9 0%,var(--sp-cream) 46%,#EDE3D6 100%);
  border:1px solid var(--sp-line); border-radius:var(--sp-radius);
  padding:52px var(--sp-8);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-7);
  margin-top:60px; margin-bottom:var(--sp-9);
}
/* 右側墊一個大弧線，抽自 Logo 的圓，讓空白處有東西可看。
   用 ::before 不另外加 DOM，也就不會被進場動效的佇列掃到。 */
.sp-cta::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-120px; top:50%; transform:translateY(-50%);
  width:360px; height:360px; border-radius:50%;
  border:1px solid rgba(183,148,109,.32);
}
.sp-cta::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-40px; top:50%; transform:translateY(-50%);
  width:220px; height:220px; border-radius:50%;
  border:1px solid rgba(183,148,109,.18);
}
.sp-cta > *{ position:relative; z-index:1; }
/* 上面那兩個 margin 是給「接在同一區塊內其他內容之後」的情境用的。
   轉換條在內頁是獨立的一個 .sp-sec，區塊間距已經由 .sp-sec 負責：
   上緣的 60px 會與 .sp-sec 的 120px 合併看不出來，
   下緣的 80px 卻會 collapse 出去，讓頁尾前多出 80px。獨立成區塊時一律歸零。 */
.sp-sec > .sp-block > .sp-cta{ margin-top:0; margin-bottom:0; }

.sp-cta__title{ font-family:var(--sp-display); font-weight:300;
                font-size:32px; line-height:1.35; color:var(--sp-cocoa); }
.sp-cta__note { margin-top:var(--sp-1); font-size:15px; line-height:1.7; color:var(--sp-ink-3); }
@media (max-width:689.98px){
  .sp-cta{ flex-direction:column; align-items:stretch; padding:var(--sp-6) var(--sp-5); }
  .sp-cta__title{ font-family:var(--sp-sans); font-weight:600; font-size:20px; }
  .sp-cta::before,.sp-cta::after{ display:none; }
  .sp-cta .sp-btn{ width:100%; max-width:none; margin-top:var(--sp-4); }
}

/* --- 15 浮動預約按鈕 ---------------------------------------------------- */
.sp-float{ position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:800;
           height:52px; padding:0 28px; border-radius:999px;
           background:var(--sp-umber); color:#FFFFFF;
           display:inline-flex; align-items:center; gap:var(--sp-2);
           font-size:16px; letter-spacing:.05em; text-decoration:none;
           box-shadow:var(--sp-shadow); opacity:0; pointer-events:none;
           transition:opacity 300ms var(--sp-ease); }
.sp-float.is-on{ opacity:1; pointer-events:auto; }
.sp-float:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }
@media (max-width:689.98px){
  .sp-float{ left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4);
             justify-content:center; padding:0 var(--sp-4); }
  /* 浮動按鈕是 fixed，會蓋住頁面最底部，要留空間給它。
     但這個 padding 不能加在 .sp-site-footer 上：那一層沒有背景色，
     84px 露出來的是 body 的白底，看起來就是頁尾下面多一塊白。
     加在 .sp-footer 裡面，米色才會一路鋪到底。 */
  .sp-footer{ padding-bottom:84px; }
}

/* --- 16 館別選擇面板 ---------------------------------------------------- */
.sp-picker{ position:fixed; inset:0; z-index:1000; display:none;
            align-items:center; justify-content:center; padding:var(--sp-5);
            background:rgba(66,43,36,.72); }
.sp-picker.is-open{ display:flex; }
.sp-picker__panel{ background:var(--sp-cream); border:1px solid var(--sp-line);
                   border-radius:var(--sp-radius); padding:var(--sp-5); width:100%; max-width:420px; }
.sp-picker__row{ display:flex; align-items:center; justify-content:space-between;
                 height:48px; padding:0 var(--sp-3); border-radius:8px;
                 text-decoration:none; color:var(--sp-cocoa); font-size:16px;
                 transition:background-color 300ms var(--sp-ease); }
.sp-picker__row + .sp-picker__row{ border-top:1px solid var(--sp-line); }
.sp-picker__row span{ font-size:14px; color:var(--sp-ink-3); }
@media (hover:hover) and (pointer:fine){ .sp-picker__row:hover{ background:var(--sp-veil); } }
.sp-picker__row:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:-2px; }
.sp-picker__close{ display:block; width:100%; margin-top:var(--sp-4); height:44px;
                   border:1px solid var(--sp-cocoa); border-radius:999px; background:transparent;
                   font-family:var(--sp-sans); font-size:15px; letter-spacing:.05em;
                   color:var(--sp-cocoa); cursor:pointer; }

/* --- 17 頁尾（底色全寬，內容 1290，4 欄各 25%）-------------------------
   頁尾由 Content Block 掛在 blocksy:footer:before，不在 .entry-content 裡，
   因此吃不到 .sp-sec + .sp-sec 的相鄰間距，也吃不到 .sp-home 的排版基礎，
   兩者都要在這個容器上自己補一份。 */
.sp-site-footer{
  font-family:var(--sp-sans); font-weight:500;
  font-size:16px; line-height:1.8; letter-spacing:.02em;
  color:var(--sp-ink); margin-top:var(--sp-gap);
}
.sp-site-footer *{ box-sizing:border-box; }
.sp-site-footer :where(img){ display:block; max-width:100%; height:auto; }

.sp-footer{ position:relative; background:var(--sp-cream); overflow:hidden; padding:60px 0 20px; }
.sp-footer::before{                      /* 底部一道暖色漸層，避免整塊死板 */
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:0;
  background:linear-gradient(180deg,transparent 0%,rgba(206,176,154,.38) 100%); }
.sp-footer__grid{ position:relative; z-index:1;
                  display:grid; grid-template-columns:repeat(4,25%); gap:var(--sp-7) 0; }
.sp-footer__brand{ grid-row:span 2; padding-right:var(--sp-5); }
.sp-footer__brand img{ height:56px; width:auto; }
.sp-footer__slogan{ margin:var(--sp-5) 0 0; font-size:14px; line-height:1.9;
                    letter-spacing:.06em; color:var(--sp-ink-2); }
.sp-footer__social{ margin-top:var(--sp-5); display:flex; gap:var(--sp-4); }
.sp-footer__social a{ font-size:13px; letter-spacing:.08em; color:var(--sp-ink-3);
                      text-decoration:none; border-bottom:1px solid var(--sp-line); padding-bottom:2px; }
.sp-footer__col{ padding-right:var(--sp-5); }
.sp-footer__col h3{ margin:0; font-size:16px; font-weight:600; line-height:1.5; }
.sp-footer__col h3 a{ color:var(--sp-cocoa); text-decoration:none;
                      border-bottom:1px solid var(--sp-line); padding-bottom:2px; }
.sp-footer__col p{ margin:var(--sp-3) 0 0; font-size:14px; line-height:1.9; color:var(--sp-ink-3); }
.sp-footer__col p a{ color:inherit; text-decoration:none; }
.sp-footer__line{ display:inline-block; margin-top:var(--sp-3); font-size:14px; letter-spacing:.04em;
                  color:var(--sp-umber); text-decoration:none;
                  border-bottom:1px solid rgba(142,91,59,.4); padding-bottom:2px; }
.sp-footer__bottom{ position:relative; z-index:1; margin-top:60px; padding-top:20px;
                    border-top:1px solid var(--sp-line);
                    display:flex; justify-content:center; align-items:center; gap:var(--sp-5);
                    font-size:12px; letter-spacing:.05em; color:var(--sp-ink-3);
                    text-align:center; }
.sp-footer__bottom a{ color:inherit; text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .sp-footer a:hover{ color:var(--sp-cocoa); } }
.sp-footer a:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:2px; }
@media (max-width:999.98px){
  .sp-footer__grid{ grid-template-columns:repeat(2,50%); }
  .sp-footer__brand{ grid-row:span 1; grid-column:span 2; }
}
@media (max-width:689.98px){
  /* 五個館排成兩欄，左右左右交錯 */
  .sp-footer__grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-6) var(--sp-5); }
  .sp-footer__brand{ grid-column:span 2; padding-right:0; }
  .sp-footer__col{ padding-right:0; }
  .sp-footer__col h3{ font-size:15px; }
  .sp-footer__col p{ font-size:13px; line-height:1.8; }

  /* 弧線在手機原本被整批關掉（.sp-arc{display:none}），
     頁尾少了它就只剩平面的米色。這裡單獨留下來並縮小。 */
  .sp-footer .sp-arc{ display:block; }
  .sp-footer .sp-arc:first-of-type{ width:300px !important; right:-120px !important; bottom:-130px !important; }
  .sp-footer .sp-arc:nth-of-type(2){ width:160px !important; left:-70px !important; top:-50px !important; }

  /* 同一列的兩格內容長度不同（地址有的兩行、有的一行）。
     grid 預設 stretch 會讓兩格等高，用 align-items:start
     讓每一格都從自己的頂端開始排。 */
  .sp-footer__grid{ align-items:start; }

  /* 品牌那一段（Logo、標語、社群）水平置中 */
  .sp-footer__brand{ text-align:center; }
  .sp-footer__brand img{ margin-inline:auto; }
  .sp-footer__social{ justify-content:center; }

  /* credit：上下間距一致，兩行之間收緊 */
  .sp-footer__bottom{
    flex-direction:column; align-items:center; text-align:center;
    gap:var(--sp-2); margin-top:var(--sp-7); padding-top:var(--sp-5);
  }
  .sp-footer__copy{ display:flex; flex-direction:column; gap:2px; line-height:1.6; }
  .sp-footer__dot{ display:none; }
}

/* --- 18 減少動態偏好 ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sp-home *,.sp-home *::before,.sp-home *::after,
  .sp-page *,.sp-page *::before,.sp-page *::after,
  .sp-site-footer *,.sp-site-footer *::before,.sp-site-footer *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .sp-reveal.is-armed::after{ display:none; }
}

/* ==========================================================================
   19　動態系統
   取代規範第 9 章的動效清單。方向是「優雅有呼吸」，不是熱鬧：
   慢、軟、只動 transform 與 opacity，不動 layout，不做彈跳與回彈。

   安全機制：所有初始狀態都掛在 .sp-motion 底下，這個 class 由 JS 掛上去。
   沒有 JS、JS 出錯、或使用者開了減少動態偏好時，.sp-motion 根本不存在，
   內容一律是最終狀態，絕不會有東西卡在透明或被裁切的狀態。
   ========================================================================== */

/* --- 19a 進場：四種寫法，全站只有這四種 -------------------------------- */
/* 兩段式：先套初始狀態（此時 transition 是 none，不會反向播一次），
   下一幀再掛 .is-ready 打開 transition，之後進場才會動。 */
[data-sp-anim]{ transition:none; }
.sp-motion.is-ready [data-sp-anim],
.is-ready .sp-motion [data-sp-anim]{
  transition:opacity 800ms var(--sp-ease-soft),
             transform 900ms var(--sp-ease-soft),
             clip-path 900ms var(--sp-ease-soft);
}
.sp-motion [data-sp-anim]{ will-change:transform,opacity; }
.sp-motion [data-sp-anim="fade-up"]{ opacity:0; transform:translateY(20px); }
.sp-motion [data-sp-anim="fade"]   { opacity:0; }
/* wipe 的左右留 -80px，才不會把品牌理念主圖的位移色塊一起裁掉 */
.sp-motion [data-sp-anim="wipe"]   { clip-path:inset(0 -80px 100% -80px); transform:scale(1.05); }
.sp-motion [data-sp-anim="wipe"].is-in{ clip-path:inset(0 -80px 0 -80px); }
.sp-motion [data-sp-anim="line"]   { transform:scaleX(0); transform-origin:left center; }
[data-sp-anim].is-in{ opacity:1; transform:none; }
[data-sp-anim].is-in{ will-change:auto; }

/* --- 19b 弧形線稿：進場時把圓「畫」出來 -------------------------------- */
.sp-motion .sp-arc circle{
  stroke-dasharray:622; stroke-dashoffset:622;      /* 622 ≈ r99 的周長 */
  transition:none;
}
.sp-motion.is-ready .sp-arc circle{ transition:stroke-dashoffset 2000ms var(--sp-ease-soft); }
.sp-motion .sp-arc.is-in circle{ stroke-dashoffset:0; }

/* --- 19c Hero：緩慢推近，與輪播的淡入同步 ------------------------------ */
@keyframes sp-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.055); } }
.sp-motion .sp-hero__frame .sp-slide img{ transform:scale(1); }
.sp-motion .sp-hero__frame .sp-slide.is-on img{
  animation:sp-kenburns var(--sp-slide-dur,7000ms) linear forwards;
}
.sp-motion .sp-hero__frame.is-paused .sp-slide.is-on img{ animation-play-state:paused; }

/* --- 19d 輪播指示點：兼作進度條 ---------------------------------------- */
.sp-dots button{ position:relative; overflow:hidden; }
.sp-dots button::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:#FFFFFF;
}
.sp-dots--ink button::after{ background:var(--sp-umber); }
.sp-motion .sp-dots button[aria-selected="true"]::after{
  animation:sp-dotfill var(--sp-slide-dur,6000ms) linear forwards;
}
.sp-motion .sp-carousel.is-paused .sp-dots button[aria-selected="true"]::after,
.sp-motion .sp-dots.is-paused button[aria-selected="true"]::after{
  animation-play-state:paused;
}
@keyframes sp-dotfill{ from{ width:0; } to{ width:100%; } }
/* 沒有動態時，選取的點直接填滿，仍看得出目前在第幾張 */
.sp-dots button[aria-selected="true"]::after{ width:100%; }
.sp-motion .sp-dots button[aria-selected="true"]::after{ width:0; }

/* --- 19e 卡片 hover：照片慢慢推近、箭頭往前一點 ------------------------ */
.sp-card__media img,.sp-studio__media img,.sp-post__media img{
  transition:transform 700ms var(--sp-ease-soft);
}
.sp-studio__go,.sp-card__cat{ transition:transform 300ms var(--sp-ease), color 300ms var(--sp-ease); }
@media (hover:hover) and (pointer:fine){
  .sp-card:hover .sp-card__media img,
  .sp-studio:hover .sp-studio__media img,
  .sp-post:hover .sp-post__media img{ transform:scale(1.05); }
  .sp-studio:hover .sp-studio__go{ transform:translateX(5px); }
  .sp-card:hover .sp-card__cat{ transform:translateX(3px); }
}

/* --- 19f 描邊按鈕：底色由左往右填滿 ------------------------------------ */
.sp-btn-ghost{ isolation:isolate; }
.sp-btn-ghost::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--sp-cocoa);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 420ms var(--sp-ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .sp-btn-ghost:hover{ background:transparent; color:var(--sp-cream); }
  .sp-btn-ghost:hover::after{ transform:scaleX(1); }
}

/* --- 19g 主要按鈕：箭頭在 hover 時往前滑 ------------------------------- */
.sp-btn .sp-arrow{ display:inline-block; transition:transform 300ms var(--sp-ease); }
@media (hover:hover) and (pointer:fine){
  .sp-btn:hover .sp-arrow{ transform:translateX(4px); }
}

/* --- 19h 捲動進度線 ---------------------------------------------------- */
.sp-progress{
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:1200;
  transform:scaleX(0); transform-origin:left center; pointer-events:none;
  background:linear-gradient(90deg,var(--sp-gold),var(--sp-umber));
}

/* --- 19i 水印字：跟著捲動輕微位移，只有 ±24px ------------------------- */
.sp-motion .sp-watermark{ will-change:transform; }

/* --- 19j 浮動按鈕：出現時輕輕帶一下，只有一次 -------------------------- */
.sp-motion .sp-float{ transform:translateY(8px); transition:opacity 400ms var(--sp-ease), transform 400ms var(--sp-ease-soft); }
.sp-motion .sp-float.is-on{ transform:translateY(0); }

/* --- 19k 減少動態偏好：整套關掉 ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sp-motion [data-sp-anim],
  .sp-motion .sp-arc circle,
  .sp-motion .sp-hero__frame .sp-slide.is-on img,
  .sp-motion .sp-float{ animation:none !important; transition:none !important;
                        opacity:1 !important; transform:none !important;
                        clip-path:none !important; stroke-dashoffset:0 !important; }
  .sp-progress{ display:none; }
}


/* --- 20 頁首品牌名：中文一行、英文縮小在下 -----------------------------
   Blocksy 把站台名稱輸出成一段文字「遇見提斯 Serendipity Pilates」，
   中英文在同一個文字節點裡，CSS 沒辦法只縮小英文那一半，
   所以由 sp-home.js 拆成兩個 span 之後再套樣式。
   拆不成功時就是原本的單行，不會壞掉。 */
.site-title a{ display:block; line-height:1.15; }
.sp-brandname__zh{
  display:block; font-family:var(--sp-display); font-weight:400;
  font-size:23px; letter-spacing:.06em; color:var(--sp-cocoa);
}
.sp-brandname__en{
  display:block; margin-top:1px;
  font-family:var(--sp-sans); font-weight:500;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sp-ink-3);
}
/* 手機原本壓成 19px / 9px，是因為中英文並排時會太寬。
   換行修好之後 branding 從 274px 縮到約 152px，右側空間鬆開了，
   字級就跟桌機一致，兩個尺寸看起來才是同一個牌子。
   實測 64px 的列高放得下（字塊總高 38.9）。 */
@media (max-width:689.98px){
  .sp-brandname__zh{ font-size:21px; }
  .sp-brandname__en{ font-size:9.5px; letter-spacing:.15em; }
}


/* 桌機標記從 1000px 開始生效，但那個寬度的 logo 欄還很窄：
   23px 的「遇見提斯」需要 92px 以上，1000 到 1024 只分到 85 到 93，
   於是四個字被折成兩行。品牌名不該折行，這裡直接禁止換行。
   （這不是新增斷點：nowrap 對所有寬度都成立，只是在窄的那一段才看得出差別。） */
.sp-brandname__zh,
.sp-brandname__en{ white-space:nowrap; }

/* 其他據點是深色帶狀背景，一般的幽靈按鈕（深可可字 + 深可可框）會被吃掉。
   這一區的按鈕改成白字白框，hover 才反白成實心。 */
.sp-others-band .sp-btn-ghost{
  color:#FFFFFF; border-color:rgba(255,255,255,.55);
}
/* 幽靈按鈕的 hover 是靠 ::after 那層深可可色從左滑入，文字同時轉成淺色。
   在深色帶狀區塊裡若只把文字改深、沒改那層填色，就變成深字壓深底，
   文字整個看不見。所以要連 ::after 一起換成白色。 */
.sp-others-band .sp-btn-ghost::after{ background:#FFFFFF; }
@media (hover:hover) and (pointer:fine){
  .sp-others-band .sp-btn-ghost:hover{
    background:transparent; border-color:#FFFFFF; color:var(--sp-cocoa);
  }
}
.sp-others-band .sp-btn-ghost:focus-visible{
  outline:2px solid #FFFFFF; outline-offset:3px;
}