/* ==========================================================================
   QIFLOW Foot Spa — shared design layer
   Load on every page before the page-specific stylesheet.
   <link rel="stylesheet" href="/css/qiflow.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — never write a raw hex value outside this block
   -------------------------------------------------------------------------- */
:root{
  /* surface */
  --sand:#F0E7D8;          /* page base */
  --sand-deep:#E3D5BC;     /* secondary band, cards on sand */
  --sand-lift:rgba(255,255,255,.42);  /* hover / raised on sand */
  --graphite:#211D18;      /* dark band, primary text */
  --graphite-lift:#2A251E; /* hover on graphite */

  /* accent */
  --gold:#C8A96B;          /* accent on dark, highlights */
  --gold-deep:#9A7B3E;     /* accent on light, labels, links */
  --seal:#A8502F;          /* the only red on the site — logo point + seal */     /* accent on light, labels, links */
  --metal:linear-gradient(90deg,#B08F4E 0%,#E4CE9A 22%,#C8A96B 46%,#F0E2C0 68%,#A98545 100%);

  /* text */
  --ink:#211D18;           /* primary on light */
  --stone:#6B6055;         /* secondary on light */
  --ink-inv:#F0E7D8;       /* primary on dark */
  --stone-inv:rgba(227,213,188,.68); /* secondary on dark */

  /* line */
  --line:rgba(154,123,62,.24);
  --line-inv:rgba(200,169,107,.24);

  /* type */
  --display:"Marcellus",Georgia,serif;
  --body:"Jost",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* rhythm */
  --gap:28px;
  --sec-pad:88px;
  --max:1120px;
  --r:2px;                 /* radius — deliberately near-square */
}
@media (max-width:600px){ :root{ --sec-pad:64px; --gap:20px } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){ body{font-size:16px} }
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
section{padding:var(--sec-pad) 0}

/* --------------------------------------------------------------------------
   3. Type scale — one scale for the whole site
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0}
h1{font-size:clamp(38px,6.4vw,68px);line-height:1.06}
h2{font-size:clamp(28px,3.8vw,40px);line-height:1.15}
h3{font-size:21px;line-height:1.25}
h4{font-size:18px;line-height:1.3}
p{margin:0}
.lede{font-size:19px;color:var(--stone);max-width:44ch}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;
}
.k{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);
}
.price{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em}
.price span{font-size:12px;letter-spacing:.14em;color:var(--stone);margin-right:7px;vertical-align:3px}

/* --------------------------------------------------------------------------
   4. Section heads — identical on every page
   -------------------------------------------------------------------------- */
.sec-head{max-width:56ch;margin-bottom:44px}
.sec-head h2{margin:14px 0 12px}
.sec-head p{color:var(--stone)}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.sec-top .sec-head{margin-bottom:0}
@media (max-width:920px){ .sec-top{flex-direction:column;align-items:flex-start;gap:20px} }

.arrow{display:inline-block;transition:transform .22s ease}
.more{
  text-decoration:none;font-size:15px;color:var(--gold-deep);
  border-bottom:1px solid var(--line);padding-bottom:4px;white-space:nowrap;transition:border-color .2s;
}
.more:hover{border-color:var(--gold-deep)}
.more:hover .arrow{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   5. Buttons — three variants, no more
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:15px;font-weight:400;letter-spacing:.04em;
  padding:13px 26px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,background .2s,color .2s,border-color .2s;cursor:pointer;
}
.btn-gold{background:var(--graphite);color:var(--sand);position:relative;overflow:hidden}
.btn-gold::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--metal)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-line{border-color:var(--gold-deep);color:var(--gold-deep);background:transparent}
.btn-line:hover{background:var(--sand-deep);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:14px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* --------------------------------------------------------------------------
   6. Grid shell — the hairline-seam pattern used site-wide
   -------------------------------------------------------------------------- */
.seam{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.seam > *{background:var(--sand)}
.seam-2{grid-template-columns:repeat(2,1fr)}
.seam-3{grid-template-columns:repeat(3,1fr)}
.seam-4{grid-template-columns:repeat(4,1fr)}
.cell{padding:32px 28px;text-decoration:none;color:inherit;transition:background .25s;display:block}
a.cell:hover{background:var(--sand-lift)}
a.cell:hover .arrow{transform:translateX(4px)}
.cell h4{margin-bottom:10px}
.cell p{font-size:15px;color:var(--stone)}
.cell .go{display:block;margin-top:18px;font-size:15px;color:var(--gold-deep)}
@media (max-width:920px){ .seam-3,.seam-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .seam-2,.seam-3,.seam-4{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   7. Dark band — invert tokens, never re-declare colours
   -------------------------------------------------------------------------- */
.band{background:var(--graphite);color:var(--stone-inv)}
.band h1,.band h2,.band h3,.band h4{color:var(--ink-inv)}
.band .eyebrow,.band .k{color:var(--gold)}
.band .sec-head p,.band p{color:var(--stone-inv)}
.band .more{color:var(--gold);border-color:var(--line-inv)}
.band .more:hover{border-color:var(--gold)}
.band .seam{background:var(--line-inv);border-color:var(--line-inv)}
.band .seam > *{background:var(--graphite)}
.band a.cell:hover{background:var(--graphite-lift)}
.band .cell .go{color:var(--gold)}
.band .price{color:var(--gold)}

/* --------------------------------------------------------------------------
   8. Header / dock / footer — identical markup on every page
   -------------------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(240,231,216,.88);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:32px;height:74px}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:34px;height:34px;flex:none;display:block}
.logo-word{font-family:var(--display);font-size:23px;letter-spacing:.16em;
  padding-bottom:5px;position:relative;line-height:1}
.logo-word::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--metal);border-radius:2px}
@media (max-width:600px){ .logo-mark{width:28px;height:28px} .logo-word{font-size:20px} }
nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
nav a{text-decoration:none;color:var(--stone);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--gold)}
nav a[aria-current="page"]{color:var(--ink);border-color:var(--gold-deep)}
@media (max-width:920px){ nav{display:none} }
@media (max-width:600px){ .bar .btn{display:none} }

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(33,29,24,.96);backdrop-filter:blur(10px);padding:12px 16px;gap:10px;
}
.dock a{flex:1;padding:14px;border-radius:var(--r);text-decoration:none;text-align:center;font-size:15px;letter-spacing:.04em}
.dock .w{background:var(--gold);color:var(--graphite);font-weight:500}
.dock .c{border:1px solid rgba(200,169,107,.5);color:var(--sand-deep)}
@media (max-width:600px){ .dock{display:flex} }

/* --------------------------------------------------------------------------
   9. Breadcrumb — every page below the homepage carries one
   -------------------------------------------------------------------------- */
.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);padding:26px 0 0;display:flex;gap:10px;flex-wrap:wrap;
}
.crumb a{text-decoration:none;color:var(--gold-deep)}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{opacity:.5}

/* --------------------------------------------------------------------------
   10. Page hero — one component, three densities
   -------------------------------------------------------------------------- */
.phero{padding:44px 0 var(--sec-pad)}
.phero h1{margin:20px 0 22px}
.phero h1 em{font-style:normal;color:var(--gold-deep)}
.phero--tall{padding-top:78px}     /* homepage only */
.phero--flat{padding-bottom:56px}  /* list pages: prices, blog */

/* --------------------------------------------------------------------------
   11. Motion — one reveal, respected everywhere
   -------------------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   12. Footer, WeChat float — shared across every page
   -------------------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:72px 0 120px;font-size:14px;color:var(--stone)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px}
.f-brand .logo{display:inline-flex;margin-bottom:24px;gap:10px}
.f-brand .logo-word{font-size:21px}
.f-brand .logo-mark{width:30px;height:30px}
.nap{font-style:normal;line-height:1.7}
.nap .biz{font-family:var(--display);font-size:19px;color:var(--ink);display:block;margin-bottom:10px;letter-spacing:.01em}
.nap .street{display:block;color:var(--stone)}
.nap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
.nap a:hover{border-color:var(--gold-deep)}
.nap-line{display:flex;gap:10px;margin-top:14px;align-items:baseline}
.nap-line .k{min-width:52px;flex:none}
.f-hours{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.f-hours .k{display:block;margin-bottom:8px}
.f-hours time{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink)}
.f-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin:0 0 18px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.f-col a{text-decoration:none;color:var(--stone);transition:color .2s}
.f-col a:hover{color:var(--ink)}
.f-bottom{display:flex;flex-wrap:wrap;gap:20px 30px;justify-content:space-between;align-items:center;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:13px}
.f-bottom nav{margin:0;gap:20px;font-size:13px}
.f-bottom nav a{border:none}
.f-legal{display:flex;gap:20px;flex-wrap:wrap}
.f-legal a{text-decoration:none;color:var(--stone)}
.f-legal a:hover{color:var(--ink)}

.wx{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;align-items:flex-end}
.wx-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold-deep);background:var(--graphite);color:var(--gold);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 24px rgba(33,29,24,.18);transition:transform .2s ease,background .2s}
.wx-btn:hover{transform:scale(1.06);background:var(--graphite-lift)}
.wx-btn svg{width:25px;height:25px;fill:currentColor}
.wx-label{position:absolute;right:70px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--graphite);color:var(--sand-deep);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .2s}
.wx-btn:hover + .wx-label{opacity:1}
.wx-panel{position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(10px);width:238px;background:var(--sand);border:1px solid var(--line);box-shadow:0 14px 44px rgba(33,29,24,.2);padding:20px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.wx[data-open="true"] .wx-panel{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.wx[data-open="true"] .wx-label{display:none}
.wx-panel .k{display:block;margin-bottom:12px}
.qr{width:100%;aspect-ratio:1;background:var(--sand-deep) center/cover no-repeat;background-image:url("/images/wechat-qr.png");border:1px dashed var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--stone);text-align:center}
.wx-id{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px;border:1px solid var(--line);background:none;width:100%;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);transition:background .2s}
.wx-id:hover{background:var(--sand-deep)}
.wx-id .c{font-size:10px;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase}
.wx-hint{margin-top:12px;font-size:12px;line-height:1.5;color:var(--stone)}
.wx-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:none;background:none;cursor:pointer;color:var(--stone);font-size:17px;line-height:1;display:none}
@media (max-width:920px){
  .f-grid{grid-template-columns:1fr 1fr;gap:40px}
  .f-brand{grid-column:1/-1}
  .wx{right:16px;top:auto;bottom:96px;transform:none}
  .wx-panel{right:0;bottom:70px;top:auto;transform:translateY(10px);width:216px}
  .wx[data-open="true"] .wx-panel{transform:translateY(0)}
  .wx-label{display:none}
  .wx-close{display:block}
  .wx-btn{width:50px;height:50px}
}
@media (max-width:600px){ footer{padding-bottom:100px} }

/* --------------------------------------------------------------------------
   Photographs — real images dropped into the .shot placeholders, and the
   in-shop figure used on the prices page
   -------------------------------------------------------------------------- */
.shot:has(img){padding:0}
.shot picture,.shot img{width:100%;height:100%;object-fit:cover;display:block}
figure.shopshot{margin:0;display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:40px;align-items:end}
figure.shopshot img{width:100%;height:auto;border:1px solid var(--line)}
figure.shopshot figcaption{font-size:14px;line-height:1.7;color:var(--stone);padding-bottom:6px}
figure.shopshot figcaption a{color:var(--ink);border-bottom:1px solid var(--line)}
figure.shopshot figcaption a:hover{border-color:var(--gold-deep)}
@media (max-width:760px){ figure.shopshot{grid-template-columns:1fr;gap:20px;align-items:start} }

/* --------------------------------------------------------------------------
   Floating contact stack — bottom right, all screen sizes.
   Top to bottom: WeChat, Call, WhatsApp. The WeChat float now lives INSIDE
   .fab in the markup, so the three buttons share one column and can never
   collide the way two independent fixed elements did.
   -------------------------------------------------------------------------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end}

.fab-btn,.fab .wx-btn{width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 6px 24px rgba(33,29,24,.18);transition:transform .2s ease,background .2s}
.fab-btn svg,.fab .wx-btn svg{width:25px;height:25px;fill:currentColor}
.fab-btn:hover,.fab .wx-btn:hover{transform:scale(1.06)}

.fab-wa{background:var(--gold);color:var(--graphite);border:1px solid var(--gold)}
.fab-wa:hover{background:#D8BC81}
.fab-call{background:var(--graphite);color:var(--gold);border:1px solid var(--gold-deep)}
.fab-call:hover{background:var(--graphite-lift)}

/* the WeChat block was position:fixed on its own — neutralise that so it
   simply becomes the first item in the column */
.fab .wx{position:relative;right:auto;left:auto;top:auto;bottom:auto;
  transform:none;z-index:auto;display:block}

/* its panel opens to the left, anchored to the bottom so it never runs off
   the foot of the screen */
.fab .wx-panel{right:66px;left:auto;top:auto;bottom:0;
  transform:translateX(10px);width:238px}
.fab .wx[data-open="true"] .wx-panel{transform:translateX(0)}
@media (max-width:420px){ .fab .wx-panel{width:min(238px,calc(100vw - 96px))} }

.fab-label{position:absolute;right:66px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--graphite);color:var(--sand-deep);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 12px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .2s}
.fab-btn{position:relative}
.fab-btn:hover .fab-label,.fab-btn:focus-visible .fab-label{opacity:1}
@media (hover:none){ .fab-label{display:none} }

/* The stack now carries WhatsApp and Call on phones too, so the old bottom
   dock would just duplicate them. To go back to the dock instead, delete the
   next line and add  @media(max-width:600px){.fab{display:none}} */
@media (max-width:600px){ .dock{display:none} .fab{right:14px;bottom:14px;gap:10px} }

@media (prefers-reduced-motion:reduce){
  .fab-btn,.fab .wx-btn{transition:none}
  .fab-btn:hover,.fab .wx-btn:hover{transform:none}
}

/* -------------------------------------------------------------------------- 
   Legal pages (privacy, terms)
   -------------------------------------------------------------------------- */
.legal{max-width:720px;margin-top:38px}
.legal h3{font-family:var(--display);font-size:22px;margin:34px 0 10px}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--stone);font-size:16px;line-height:1.75}