:root{
    /* The page ground. Everything sits on this. Warm off-white rather
       than pure white — the ink and jade in this palette are both warm,
       and #FFF fights them. Nudge it warmer toward --paper-warm if you
       want more of it; do not take it past that or the cards stop
       reading as separate surfaces. */
    --page: #FAF6EF;
    /* Raised surfaces that should lift off the page: dropdowns, location
       cards, the language notice. Pure white, and the contrast with
       --page is what does the lifting — they are no longer the same
       colour, so don't collapse these two tokens back together. */
    --paper: #FFFFFF;
    /* Type and marks sitting ON the dark jade panels (topbar, footer,
       buttons). Kept warm rather than pure white so those panels don't
       glare — this is not a background. */
    --paper-warm: #F8F4EA;
    --ink: #1B1611;
    --ink-soft: #4A3F33;
    --jade: #2E4C3E;
    --jade-deep: #1E3327;
    --seal: #C43A1F;
    --line: rgba(27,22,17,0.18);
    /* Height of the sticky nav bar. The hero measures itself against this
       to fill the first screen, so change it here rather than on
       .nav-inner — the mobile override is in the nav media query. */
    --nav-h: 78px;
    /* East-Asian apothecary celadon tones for the services cabinet */
    --celadon: #E1E8DD;
    --celadon-deep: #D2DECB;
    --celadon-line: rgba(46,76,62,0.28);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    background: var(--page);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
  a{ color:inherit; }

  /* ---------- BRAND MARK ----------
     The lotus, one transparent PNG at every size. Sized by height so the
     container controls it and the aspect ratio follows on its own. */
  .brand-mark{
    display:inline-block; flex-shrink:0;
    height: 42px; width: auto;
  }

  /* ---------- HERO (two-column: copy + imagery) ----------
     The hero owns the first screen, but stops short of filling it: 88vh
     leaves the top of the credentials marquee showing above the fold, so
     there's something to scroll toward. The copy and photo stay centred
     in whatever height that works out to. Note the hero's natural height
     is around 600px, so on short laptops this floor is already below
     that and does nothing — it only bites on tall monitors. Raise toward
     100vh to push the marquee back under the fold; remove the two lines
     to pull it up further. */
  .hero{
    padding: 64px 0 72px;
    min-height: calc(88vh - var(--nav-h));
    min-height: calc(88lvh - var(--nav-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Column split is tuned to the headline: the copy column has to be wide
     enough to hold "Chinese medicine for pain" on one line, or the h1
     falls to three lines with a stranded last word. Narrow this and check
     the hero before shipping. */
  .hero-grid{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items:center;
  }
  .hero-copy .eyebrow{
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    margin-bottom: 16px;
  }
  .hero-copy h1{
    font-family:'Fraunces', serif; font-weight:600;
    /* 3.4vw so the size tops out right about where .wrap stops growing,
       instead of drifting for another 100px of viewport. */
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    line-height: 1.1;
    /* Ceiling on the measure so the headline still breaks in two once the
       grid collapses to a single column below 860px. */
    max-width: 13em;
    /* Even out the two lines rather than letting the last one strand. */
    text-wrap: balance;
    /* Optical alignment: the C's left sidebearing makes the heading read
       as indented against the smaller text. Pull it back by a hair. */
    margin-left: -0.045em;
    margin-bottom: 26px;
  }
  .hero-copy p{
    color: var(--ink-soft);
    font-size: 0.97rem;
    /* Kept a shade narrower than the headline above it, not much. */
    max-width: 46ch;
  }
  .hero-copy p + p{ margin-top: 16px; }
  /* Photo frame. aspect-ratio holds the height, so the absolutely
     positioned slides inside never collapse it.
     6/5 deliberately matches the source photos exactly (1200x1000), so
     object-fit:cover has nothing to trim. If you add a slide at a
     different ratio, it WILL get cropped to fit this box.
     The extra width comes from --bleed rather than from the grid: the
     copy column is already only just wide enough for the h1, so taking
     any of it breaks the headline onto three lines. --bleed lets the
     frame run past the .wrap padding toward the right edge of the
     window instead, and clamps itself to 0 on narrow windows so it can
     never cause a horizontal scrollbar. Set it to 0px for a frame that
     lines up with the rest of the page. */
  .hero-photo{
    --bleed: clamp(0px, calc((100vw - 1032px) / 2), 40px);
    position:relative;
    width: calc(100% + var(--bleed));
    max-width: 680px;
    margin: 0 calc(var(--bleed) * -1) 0 auto;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: 10px;
    background: var(--page);
  }
  /* display:contents drops the <picture> box so each <img> sits directly
     in the frame. */
  .hero-photo picture{ display: contents; }
  .hero-slide{
    position:absolute; inset:0;
    display:block;
    width:100%; height:100%;
    object-fit: cover;
  }
  /* Two slides: the bottom one just sits there, the top one fades away and
     back. Adding a third means giving each slide its own delay and a
     keyframe window of 100%/3 — ask before assuming this scales as-is. */
  .hero-slide--2{ z-index: 1; }
  .hero-slide--1{
    z-index: 2;
    animation: hero-crossfade 14s ease-in-out infinite;
  }
  @keyframes hero-crossfade{
    0%, 43%  { opacity: 1; }
    50%, 93% { opacity: 0; }
    100%     { opacity: 1; }
  }
  /* Anyone who has asked their OS to stop animations gets the storefront,
     held still. */
  @media (prefers-reduced-motion: reduce){
    .hero-slide--1{ animation: none; opacity: 1; }
  }

  @media (max-width: 860px){
    .hero{ padding: 48px 0 56px; }
    .hero-grid{ grid-template-columns: 1fr; gap: 48px; }
    .hero-copy p{ max-width: none; }
    .hero-photo{ --bleed: 0px; width: 100%; max-width: 520px; margin: 0 auto; }
  }

  .eyebrow{
    font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--jade); margin-bottom: 16px; font-weight:600;
    line-height: 1;
  }
  .eyebrow .divider{ color: var(--seal); margin: 0 6px; }

  /* ---------- ITALIC HEADING ACCENT ----------
     One phrase per heading, set in Fraunces italic. We only load the
     italic at weight 500 (see the font link in <head>), so it sits a
     shade lighter than the 600 around it — that contrast is the point,
     not a mistake. Keep it to ONE accent per heading: two and it stops
     reading as emphasis and starts reading as decoration.
     For a tinted accent instead of monochrome, uncomment the colour. */
  .accent{
    font-style: italic;
    font-weight: 500;
    /* color: var(--jade); */
  }

  /* ---------- CHINESE-LANGUAGE NOTICE ---------- */
  .lang-section{ padding: 40px 0 64px; }
  .lang-wrap{ max-width: 1240px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
  .lang-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 20px;
    background: var(--paper);
    border: 1px solid rgba(46,76,62,0.18);
    border-radius: 48px;
    padding: 28px 48px;
    text-align:center;
    box-shadow: 0 6px 18px rgba(27,22,17,0.05);
  }
  .lang-note__text{
    font-family:'Fraunces', serif;
    font-weight: 600;
    font-size: 1.22rem;
    line-height: 1.55;
    color: var(--ink);
  }
  .lang-note__zh{
    font-family:'Noto Serif SC', serif;
    font-weight: 600;
  }
  .lang-note__tel{
    color: var(--jade);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
  }
  .lang-note__tel:hover{ color: var(--seal); }
  .lang-note__tel:focus-visible{ outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }

  @media (max-width: 980px){
    .lang-note__text{ font-size: 1.08rem; }
  }
  @media (max-width: 700px){
    .lang-note{ padding: 24px 28px; border-radius: 28px; gap: 14px; }
    .lang-note__text{ font-size: 1rem; }
  }
  @media (max-width: 460px){
    .lang-note{ flex-direction: column; gap: 12px; }
  }

  /* ---------- CREDENTIALS MARQUEE ----------
     Sits under the hero, above the services cabinet. No rules top or
     bottom — the row sits straight on the page ground, and the space
     either side of it (72px from the hero, 72px into the cabinet) is
     what separates it, not a frame. */
  .cred-section{
    padding: 0;
  }
  .cred-strip {
    --cred-ink: #232019;
    --cred-moss: #c1613f;
    /* One flat tone for every logo, so the row reads as a single band
       instead of six competing brand palettes. Set --cred-logo-filter
       to `none` and --cred-logo-opacity to 1 to restore full colour. */
    --cred-logo-filter: brightness(0) saturate(100%);
    --cred-logo-opacity: 0.72;
    width: 100%;
    background: transparent;
    padding: 24px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  .cred-track {
    display: flex;
    width: max-content;
    animation: credScroll 40s linear infinite;
  }

  .cred-strip:hover .cred-track {
    animation-play-state: paused;
  }

  @keyframes credScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .cred-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    white-space: nowrap;
  }

  .cred-badge__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cred-badge__seal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.4px solid var(--cred-moss);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .cred-badge__seal::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--cred-moss);
    border-radius: 50%;
    opacity: 0.4;
  }

  .cred-badge__seal svg {
    width: 22px;
    height: 22px;
    color: var(--cred-moss);
    position: relative;
    z-index: 1;
  }

  .cred-badge__seal--logo {
    border: none;
    background: none;
  }

  .cred-badge__seal--logo::after {
    display: none;
  }

  .cred-badge__seal--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Flatten every logo and seal to the one tone. */
  .cred-badge__seal img {
    filter: var(--cred-logo-filter);
    opacity: var(--cred-logo-opacity);
  }

  /* Detailed seals are drawn with colour and shading on a solid disc rather
     than with transparency, so brightness(0) collapses them into a featureless
     blob. Desaturate these instead: the artwork survives and it still reads as
     a single tone alongside the flattened wordmarks. */
  .cred-badge__seal--cab img {
    filter: grayscale(1) contrast(1.05);
    opacity: 0.9;
  }

  .cred-badge__seal--cab,
  .cred-badge__seal--ppo,
  .cred-badge__seal--malpractice {
    width: 52px;
    height: 52px;
  }

  .cred-badge__seal--nccaom {
    width: 66px;
    height: 52px;
  }

  .cred-badge__mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cred-badge__mark svg {
    width: 26px;
    height: 26px;
    color: var(--cred-ink);
    opacity: 0.75;
  }

  .cred-badge__title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--cred-ink);
  }

  .cred-badge__sub {
    font-family: 'Work Sans', sans-serif;
    font-size: 12.5px;
    color: #5c584d;
  }

  .cred-badge__seal--photo{
    border: none;
    background: none;
  }
  .cred-badge__seal--photo::after{ display: none; }
  .cred-badge__seal--photo img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: 36px;
  }

  .cred-badge__wordmark{
    height: 40px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    white-space: nowrap;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--cred-ink);
    opacity: var(--cred-logo-opacity);
  }

  @media (prefers-reduced-motion: reduce) {
    .cred-track { animation: none; }
  }

  /* ---------- CABINET / SERVICES SECTION ---------- */
  .cabinet-section{ padding: 72px 0 56px; }
  .section-head{ text-align:center; margin-bottom: 48px; }
  .section-head .eyebrow{ margin-bottom: 8px; }
  .section-head h1,
  .section-head h2{
    font-family:'Fraunces', serif; font-weight:600; font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  }
  .section-head p{ color: var(--ink-soft); max-width:520px; margin: 20px auto 0; font-size:0.98rem; }

  .cabinet{
    display:grid; grid-template-columns: 1fr 1fr; gap: 32px;
  }

  .drawer{
    position:relative;
    background: var(--celadon);
    border: 1px solid var(--celadon-line);
    border-radius: 3px;
    padding: 40px 32px 32px;
    cursor: default;
    overflow:hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .drawer::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:2px;
    background: var(--seal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .drawer:hover, .drawer:focus-within{
    border-color: rgba(196,58,31,0.35);
    background: var(--celadon-deep);
    box-shadow: 0 10px 24px rgba(36,31,27,0.07);
  }
  .drawer:hover::before, .drawer:focus-within::before{
    transform: scaleX(1);
  }

  .drawer-top{ display:flex; align-items:baseline; gap:16px; margin-bottom:16px; }
  .char{
    font-family:'Noto Serif SC', serif; font-weight:600; font-size: 3.1rem;
    color: var(--seal); line-height:1; flex-shrink:0;
  }
  .drawer-title h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.55rem; margin-bottom:8px;
  }
  .drawer-title .pinyin{
    font-size:0.9rem; color: var(--ink-soft); letter-spacing:0.04em; text-transform:uppercase;
  }
  .drawer-desc{
    color: var(--ink-soft); font-size: 1.05rem; margin-top: 16px;
    max-height: 0; opacity:0; overflow:hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  }
  .drawer:hover .drawer-desc, .drawer:focus-within .drawer-desc{
    max-height: 160px; opacity:1;
  }

  /* Service photo. Opens on the same hover/focus reveal as the
     description above it. The height is fixed rather than left to the
     image, because max-height needs an exact target to ease against —
     with an unknown image height the drawer visibly snaps at the end of
     the open. So the slot, the img, and the hover max-height all carry
     the same number. Change one, change all three. */
  .drawer-media{
    max-height: 0; opacity: 0; overflow: hidden;
    border-radius: 2px;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  }
  .drawer:hover .drawer-media, .drawer:focus-within .drawer-media{
    max-height: 180px; opacity: 1; margin-top: 20px;
  }
  /* Same trick as the hero: drop the <picture> box so the <img> rule below
     still controls the height. */
  .drawer-media picture{ display: contents; }
  .drawer-media img{
    display: block; width: 100%; height: 180px;
    object-fit: cover; border-radius: 2px;
  }
  /* Placeholder for a slot with no photo in it yet — a hatched panel, so
     the hover reveals something deliberate instead of a blank gap. Drop
     the <img> in and remove the --empty class from that drawer; delete
     this rule once all four are done. */
  .drawer-media--empty{
    height: 180px;
    background:
      repeating-linear-gradient(45deg,
        rgba(46,76,62,0.07) 0 10px, transparent 10px 20px),
      var(--celadon-deep);
    border: 1px dashed var(--celadon-line);
  }

  .drawer-meta{
    display:flex; gap: 8px; margin-top: 16px; flex-wrap:wrap;
  }
  .tag{
    font-size: 0.82rem; letter-spacing:0.03em; color: var(--jade-deep);
    border: 1px solid rgba(62,92,78,0.35); border-radius: 20px;
    padding: 8px 16px; background: rgba(62,92,78,0.06);
  }

  @media (max-width: 720px){
    .cabinet{ grid-template-columns: 1fr; }
  }

  /* No hover on touch screens, and a lazy-loaded image inside a
     collapsed container may never load at all — so where there is no
     pointer, the description and photo are simply always open. Delete
     this block if you would rather the drawers stay shut on phones. */
  @media (hover: none){
    .drawer-desc{ max-height: 160px; opacity: 1; }
    .drawer-media{ max-height: 180px; opacity: 1; margin-top: 20px; }
  }

  /* ---------- CONDITIONS WE TREAT ---------- */
  .conditions-section{ padding: 88px 0 72px; }
  .conditions-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .condition-card{
    background: var(--celadon);
    border: 1px solid var(--celadon-line);
    border-radius: 3px;
    padding: 32px 20px;
    text-align:center;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .condition-card:hover{
    background: var(--celadon-deep);
    transform: translateY(-2px);
  }
  .condition-card .char{
    font-family:'Noto Serif SC', serif; font-weight:600; font-size: 1.9rem;
    color: var(--seal); line-height:1; margin-bottom: 14px;
  }
  .condition-card h3{
    font-family:'Fraunces', serif; font-weight:600; font-size: 1.05rem;
    margin-bottom: 12px;
  }
  .condition-card p{
    color: var(--ink-soft); font-size: 0.9rem;
  }

  @media (max-width: 900px){
    .conditions-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 500px){
    .conditions-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- FAQ ACCORDION ----------
     Built on <details>/<summary>, so it opens and closes without any
     JavaScript and announces its own state to screen readers. The only
     fiddly parts are killing the browser's default disclosure triangle
     (two rules, one per engine) and drawing our own plus/minus. */
  .faq-section{ padding: 24px 0 8px; }

  .faq-list{
    max-width: 740px; margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .faq-item{ border-bottom: 1px solid var(--line); }

  .faq-q{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
    padding: 22px 4px;
    cursor: pointer;
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.06rem; line-height: 1.4;
    transition: color .2s ease;
  }
  /* Remove the default marker. Chrome/Safari need the pseudo-element,
     Firefox needs list-style. Both, or one browser shows a triangle. */
  .faq-q{ list-style: none; }
  .faq-q::-webkit-details-marker{ display: none; }

  .faq-q:hover{ color: var(--jade); }
  .faq-item[open] > .faq-q{ color: var(--jade); }
  .faq-q:focus-visible{ outline: 2px solid var(--seal); outline-offset: -2px; border-radius: 3px; }

  /* Plus that becomes a minus: two bars, one rotated, and the rotated
     one fades out on open. */
  .faq-sign{
    position: relative; flex-shrink: 0;
    width: 14px; height: 14px; margin-top: 6px;
  }
  .faq-sign::before,
  .faq-sign::after{
    content: ""; position: absolute; left: 0; top: 6px;
    width: 14px; height: 1.5px; border-radius: 2px;
    background: var(--seal);
    transition: transform .3s ease, opacity .3s ease;
  }
  .faq-sign::after{ transform: rotate(90deg); }
  .faq-item[open] .faq-sign::after{ transform: rotate(0); opacity: 0; }

  .faq-a{
    padding: 0 42px 26px 4px;
    color: var(--ink-soft); font-size: 0.95rem; line-height: 1.72;
    animation: faq-in .28s ease;
  }
  .faq-a p + p{ margin-top: 14px; }
  .faq-a a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
  @keyframes faq-in{
    from{ opacity: 0; transform: translateY(-4px); }
    to  { opacity: 1; transform: none; }
  }

  .faq-more{
    text-align: center; margin-top: 34px; font-size: 0.9rem;
  }
  .faq-more a{
    color: var(--jade); font-weight: 500;
    text-decoration: underline; text-underline-offset: 4px;
  }
  .faq-more a:hover{ color: var(--seal); }

  @media (max-width: 560px){
    .faq-q{ font-size: 1rem; gap: 16px; padding: 20px 2px; }
    .faq-a{ padding-right: 8px; }
  }

  /* ---------- FOOTER CTA ---------- */
  .cta-section{
    padding: 48px 0 96px;
    text-align:center;
  }
  .cta-section h2{
    font-family:'Fraunces', serif; font-weight:600;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin-bottom: 16px;
  }
  .cta-section p{
    color: var(--ink-soft); margin-bottom: 24px;
  }
  .cta-button{
    display:inline-block;
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size: 0.98rem;
    letter-spacing: 0.03em;
    color: var(--paper-warm);
    background: var(--jade);
    padding: 16px 40px;
    border-radius: 30px;
    text-decoration:none;
    transition: background 0.3s ease;
  }
  .cta-button:hover{ background: var(--jade-deep); }

  /* ---------- MERIDIAN MAP (body figure + points) ---------- */
  .meridian{
    color: var(--ink);
    padding: 88px 0 80px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    --mp-seal: #C43A1F;
    --mp-dim: rgba(27,22,17,0.58);
    /* twelve channels, muted so they read as linework rather than a clinical chart */
    --ch-li:#A85430; --ch-lu:#6E7F91; --ch-pc:#75619B; --ch-he:#A84E48;
    --ch-st:#95701F; --ch-gb:#4F7449; --ch-bl:#3D6E7C; --ch-sp:#8F771F;
    --ch-lv:#3D6A47; --ch-ki:#35606F; --ch-gv:#6B5794; --ch-cv:#907E3A;
    --ch-tw:#A25C74;
  }
  .ch-li{color:var(--ch-li)} .ch-lu{color:var(--ch-lu)} .ch-pc{color:var(--ch-pc)}
  .ch-he{color:var(--ch-he)} .ch-st{color:var(--ch-st)} .ch-gb{color:var(--ch-gb)}
  .ch-bl{color:var(--ch-bl)} .ch-sp{color:var(--ch-sp)} .ch-lv{color:var(--ch-lv)}
  .ch-ki{color:var(--ch-ki)} .ch-gv{color:var(--ch-gv)} .ch-cv{color:var(--ch-cv)}
  .ch-tw{color:var(--ch-tw)}
  .meridian-inner{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }

  .mp-head{ text-align:center; max-width: 620px; margin: 0 auto 48px; }
  .mp-eyebrow{
    font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--mp-seal); font-weight: 600; margin-bottom: 14px;
  }
  .mp-head h2{
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.15; color: var(--ink);
  }
  .mp-head p{
    margin-top: 16px; font-size: 0.98rem; line-height: 1.65;
    color: var(--ink-soft);
  }

  .mp-grid{
    display: grid;
    grid-template-columns: 1fr minmax(230px, 300px) 1fr;
    gap: 28px;
    align-items: center;
  }
  .mp-col{ display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 330px; }
  .mp-col--left{ margin-left: auto; }
  .mp-col--right{ margin-right: auto; }

  /* cards */
  .mp-card{
    appearance: none; background: none; border: 0; cursor: pointer;
    font: inherit; color: inherit; padding: 0 18px; position: relative;
    display: block; width: 100%;
    transition: color 0.25s ease;
  }
  .mp-card::before{
    content:""; position:absolute; top:2px; bottom:2px; width:1px;
    background: var(--mp-seal);
    transform: scaleY(0); transform-origin: center;
    transition: transform 0.35s ease;
  }
  .mp-col--left .mp-card{ text-align: right; }
  .mp-col--left .mp-card::before{ right: 0; }
  .mp-col--right .mp-card{ text-align: left; }
  .mp-col--right .mp-card::before{ left: 0; }
  .mp-card.is-active::before{ transform: scaleY(1); }

  .mp-code{
    display:block; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--mp-seal); margin-bottom: 6px;
  }
  .mp-name{
    display:block; font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.18rem; color: var(--ink); line-height: 1.2;
  }
  .mp-name .mp-han{
    font-family: 'Noto Serif SC', serif; font-weight: 600;
    font-size: 1.05rem; margin-left: 8px;
    color: rgba(27,22,17,0.78);
  }
  .mp-where{
    display:block; font-size: 0.82rem; color: var(--mp-dim);
    margin-top: 6px; font-style: italic;
  }
  .mp-use{
    display:block; font-size: 0.92rem; line-height: 1.55;
    color: var(--ink-soft); margin-top: 10px;
  }
  .mp-note{
    display:inline-block; margin-top: 10px;
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(27,22,17,0.62);
    border: 1px solid var(--line);
    border-radius: 20px; padding: 4px 12px;
  }
  .mp-card:hover .mp-name,
  .mp-card.is-active .mp-name{ color: #000; }
  .mp-card:focus-visible{ outline: 2px solid var(--mp-seal); outline-offset: 6px; border-radius: 2px; }

  /* figure */
  .mp-figure{ display:flex; flex-direction: column; align-items: center; }
  .mp-svg, .mp-caption{ flex: none; }
  .mp-svg{ width: 100%; max-width: 320px; height: auto; overflow: visible; }
  .mp-body{ fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.72; }
  .mp-chan{
    fill: none; stroke: currentColor; stroke-width: 1.15;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0.66;
  }
  .mp-chip{
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background: currentColor; margin-right:7px; vertical-align:middle;
  }

  /* --- qi flow: a soft pulse of light travelling each channel --- */
  .mp-qi{
    fill: none; stroke: #1B1611; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.34;
    animation: mp-flow var(--qi-dur, 8s) linear var(--qi-delay, 0s) infinite;
  }
  /* --len is set per path, in user units, so the pulse is the same physical
     size on a short head channel as on a long leg channel */
  @keyframes mp-flow{
    from{ stroke-dashoffset: var(--len); }
    to  { stroke-dashoffset: 0; }
  }

  /* the channels themselves breathe very slightly, like a field settling */
  .mp-chan{ animation: mp-breathe var(--br-dur, 11s) ease-in-out var(--br-delay, 0s) infinite; }
  @keyframes mp-breathe{
    0%,100%{ opacity: 0.52; }
    50%    { opacity: 0.76; }
  }

  /* every channel runs on its own clock so nothing pulses in lockstep */
  .ch-li{ --qi-dur: 7.2s; --qi-delay: 0.4s; --br-dur: 10.5s; --br-delay: 0.0s; }
  .ch-pc{ --qi-dur: 8.6s; --qi-delay: 2.1s; --br-dur: 12.0s; --br-delay: 1.4s; }
  .ch-he{ --qi-dur: 9.4s; --qi-delay: 3.6s; --br-dur: 11.2s; --br-delay: 2.9s; }
  .ch-st{ --qi-dur: 11.5s; --qi-delay: 1.2s; --br-dur: 13.0s; --br-delay: 0.7s; }
  .ch-sp{ --qi-dur: 12.4s; --qi-delay: 4.3s; --br-dur: 11.8s; --br-delay: 3.5s; }
  .ch-gb{ --qi-dur: 9.9s; --qi-delay: 2.8s; --br-dur: 12.6s; --br-delay: 4.2s; }
  .ch-lv{ --qi-dur: 7.8s; --qi-delay: 5.1s; --br-dur: 10.8s; --br-delay: 5.0s; }
  .ch-bl{ --qi-dur: 8.2s; --qi-delay: 1.7s; --br-dur: 12.2s; --br-delay: 1.9s; }
  .ch-tw{ --qi-dur: 6.8s; --qi-delay: 3.2s; --br-dur: 10.2s; --br-delay: 3.1s; }
  .ch-gv{ --qi-dur: 13.2s; --qi-delay: 0.9s; --br-dur: 14.0s; --br-delay: 2.3s; }
  .ch-cv{ --qi-dur: 12.8s; --qi-delay: 5.8s; --br-dur: 13.4s; --br-delay: 4.7s; }

  .mp-pt{ cursor: pointer; }
  .mp-halo{
    fill: none; stroke: var(--mp-seal); stroke-width: 1;
    opacity: 0; transform-box: fill-box; transform-origin: center;
    transform: scale(0.5); transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mp-dot{
    fill: var(--mp-seal);
    transform-box: fill-box; transform-origin: center;
    transition: transform 0.3s ease;
  }
  .mp-pt:hover .mp-halo,
  .mp-pt.is-active .mp-halo{ opacity: 1; transform: scale(1); }
  .mp-pt:hover .mp-dot,
  .mp-pt.is-active .mp-dot{ transform: scale(1.4); }
  .mp-pt:focus-visible{ outline: none; }
  .mp-pt:focus-visible .mp-halo{ opacity:1; transform: scale(1); stroke-width: 1.6; }

  .mp-caption{
    margin-top: 24px; text-align:center;
    height: 92px; max-width: 340px; font-size: 0.88rem; line-height: 1.55;
    color: var(--ink-soft);
  }
  .mp-caption strong{
    display:block; font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1rem; color: var(--ink); margin-bottom: 2px;
  }
  .mp-foot{
    margin-top: 48px; text-align:center;
    font-size: 0.84rem; color: rgba(27,22,17,0.55);
  }

  @media (prefers-reduced-motion: reduce){
    .mp-qi{ display: none; }
    .mp-chan{ animation: none; opacity: 0.66; }
  }

  @media (max-width: 900px){
    .meridian{ padding: 56px 0 48px; }
    .mp-grid{ grid-template-columns: 1fr; gap: 40px; }
    .mp-figure{ order: -1; }
    .mp-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; max-width: none; margin: 0; }
    .mp-col--left .mp-card,
    .mp-col--right .mp-card{ text-align: left; padding: 0 0 0 16px; }
    .mp-col--left .mp-card::before,
    .mp-col--right .mp-card::before{ left: 0; right: auto; }
  }
  @media (max-width: 560px){
    .mp-col{ grid-template-columns: 1fr; gap: 28px; }
  }

  /* =========================================================
     SITE HEADER — announcement bar + main navigation
     Added in Phase 1. Replaces the old Squarespace header.
     ========================================================= */

  .site-header{ position: relative; z-index: 60; }

  /* ---------- Announcement bar ----------
     Edit the three items below. Keep it factual — this bar is the
     first thing a patient reads. */
  .topbar{ background: var(--jade-deep); color: var(--paper-warm); }
  .topbar-inner{
    max-width: 1240px; margin: 0 auto; padding: 11px 24px;
    display:flex; align-items:center; justify-content:center;
    flex-wrap: wrap; gap: 12px;
    font-size: 0.82rem; letter-spacing: 0.015em; text-align:center;
  }
  .topbar-dot{ opacity: 0.4; }
  .topbar-zh{ font-family:'Noto Serif SC', serif; font-weight:600; }
  .topbar-link{
    color: inherit; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    transition: opacity .2s ease;
  }
  .topbar-link:hover{ opacity: 0.75; }

  /* ---------- Nav bar ---------- */
  .nav{
    position: sticky; top: 0; z-index: 70;
    /* Page tone, not white: the hairline underneath is what separates the
       header, so a lighter bar would just look like a seam. */
    background: var(--page);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner{
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 20px;
  }

  .nav-menu{ list-style: none; display: flex; align-items: center; gap: 4px; }
  .nav-item{ position: relative; }

  .nav-link{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Work Sans', sans-serif; font-weight: 500;
    font-size: 0.95rem; color: var(--ink);
    text-decoration: none; background: none; border: 0;
    padding: 10px 14px; border-radius: 7px; cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .nav-link:hover, .nav-link:focus-visible{ background: rgba(46,76,62,0.07); color: var(--jade); }
  .nav-item.is-open > .nav-link{ background: rgba(46,76,62,0.07); color: var(--jade); }

  .nav-chevron{ width: 10px; height: 10px; transition: transform .22s ease; }
  .nav-item.is-open > .nav-link .nav-chevron{ transform: rotate(180deg); }

  /* ---------- Dropdowns ---------- */
  .submenu{
    list-style: none;
    position: absolute; top: calc(100% + 19px); left: 0;
    min-width: 246px;
    background: var(--paper);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 8px;
    box-shadow: 0 16px 36px rgba(27,22,17,0.14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item.is-open > .submenu{ opacity: 1; visibility: visible; transform: none; }

  /* Invisible bridge so the pointer can travel from the link to the
     panel without crossing dead space and closing the menu. */
  .submenu::before{
    content: ""; position: absolute;
    left: 0; right: 0; top: -19px; height: 19px;
  }

  /* Desktop: hover and keyboard focus open the panel in pure CSS. */
  @media (min-width: 921px){
    .nav-item.has-menu:hover > .submenu,
    .nav-item.has-menu:focus-within > .submenu{
      opacity: 1; visibility: visible; transform: none;
    }
    .nav-item.has-menu:hover > .nav-link,
    .nav-item.has-menu:focus-within > .nav-link{
      background: rgba(46,76,62,0.07); color: var(--jade);
    }
    .nav-item.has-menu:hover > .nav-link .nav-chevron,
    .nav-item.has-menu:focus-within > .nav-link .nav-chevron{ transform: rotate(180deg); }
  }

  .submenu a{
    display: block; padding: 9px 12px; border-radius: 6px;
    text-decoration: none; font-size: 0.93rem; line-height: 1.35;
    transition: background .18s ease, color .18s ease;
  }
  .submenu a:hover, .submenu a:focus-visible{ background: rgba(46,76,62,0.08); color: var(--jade); }
  .submenu-zh{
    display: block; font-family: 'Noto Serif SC', serif;
    font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px;
  }

  /* ---------- Brand mark (centered) ---------- */
  .nav-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .nav-brand-name{
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.16rem; letter-spacing: 0.005em; white-space: nowrap;
  }

  /* ---------- Book button ---------- */
  .nav-book{
    justify-self: end;
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: 0.92rem; letter-spacing: 0.02em;
    background: var(--jade); color: var(--paper-warm);
    padding: 13px 28px; border-radius: 30px;
    text-decoration: none; white-space: nowrap;
    transition: background .25s ease;
  }
  .nav-book:hover{ background: var(--jade-deep); }

  /* ---------- Hamburger (mobile only) ---------- */
  .nav-toggle{
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; border-radius: 7px;
    color: var(--ink);
  }
  .nav-toggle:hover{ background: rgba(46,76,62,0.07); }
  .nav-toggle-box{ display:block; width: 20px; height: 14px; position: relative; }
  .nav-toggle-box span{
    position: absolute; left: 0; width: 100%; height: 1.6px;
    background: currentColor; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-toggle-box span:nth-child(1){ top: 0; }
  .nav-toggle-box span:nth-child(2){ top: 6.2px; }
  .nav-toggle-box span:nth-child(3){ top: 12.4px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){ top: 6.2px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){ top: 6.2px; transform: rotate(-45deg); }

  /* ---------- Nav: mobile ---------- */
  @media (max-width: 920px){
    :root{ --nav-h: 66px; }
    .nav-inner{ grid-template-columns: auto 1fr auto; height: var(--nav-h); gap: 12px; }
    .nav-toggle{ display: inline-flex; }
    .nav-brand{ justify-self: center; }
    .nav-brand-name{ font-size: 1.02rem; }
    .brand-mark{ height: 34px; }
    .nav-book{ padding: 11px 20px; font-size: 0.86rem; }

    .nav-menu{
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--page);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 18px 30px rgba(27,22,17,0.10);
      padding: 10px 16px 22px;
      max-height: calc(100vh - 66px); overflow-y: auto;
    }
    .nav-menu.is-open{ display: flex; }
    .nav-link{ width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }

    .submenu{
      position: static; min-width: 0;
      opacity: 1; visibility: visible; transform: none;
      background: none; border: 0; border-left: 1.5px solid var(--line);
      border-radius: 0; box-shadow: none;
      margin: 0 0 8px 14px; padding: 2px 0 2px 10px;
      display: none;
    }
    .nav-item.is-open > .submenu{ display: block; }
    .submenu::before{ display: none; }
  }

  /* Narrow phones: shorten the wordmark rather than dropping it. */
  .nav-brand-short{ display: none; }
  @media (max-width: 470px){
    .nav-brand-full{ display: none; }
    .nav-brand-short{ display: inline; }
  }

  /* =========================================================
     CONTACT & LOCATIONS PAGE
     Three ways in, then a card per clinic with its own map.
     ========================================================= */
  .contact-head{ padding: 64px 0 8px; }

  /* Three ways to reach the clinic. The phone card is the primary one and
     carries the jade fill; the other two are quiet by comparison, which is
     the correct hierarchy — most patients call. */
  .contact-actions{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .contact-action{
    display: flex; flex-direction: column;
    background: var(--celadon);
    border: 1px solid var(--celadon-line);
    border-radius: 3px;
    padding: 28px 26px;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.3s ease;
  }
  .contact-action:hover{
    background: var(--celadon-deep);
    border-color: rgba(196,58,31,0.35);
    box-shadow: 0 10px 24px rgba(36,31,27,0.07);
    transform: translateY(-2px);
  }
  .contact-action__label{
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--jade); line-height: 1;
    margin-bottom: 14px;
  }
  .contact-action__value{
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.2rem; line-height: 1.3;
    margin-bottom: 10px;
  }
  .contact-action__note{
    font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft);
    margin-top: auto;
  }

  .contact-action--primary{
    background: var(--jade);
    border-color: var(--jade);
    color: var(--paper-warm);
  }
  .contact-action--primary:hover{
    background: var(--jade-deep);
    border-color: var(--jade-deep);
  }
  .contact-action--primary .contact-action__label{ color: rgba(248,244,234,0.7); }
  .contact-action--primary .contact-action__note{ color: rgba(248,244,234,0.75); }

  .contact-note{
    text-align: center; font-size: 0.85rem; line-height: 1.6;
    color: var(--ink-soft); max-width: 52ch; margin: 28px auto 0;
  }

  /* ---------- Location cards ---------- */
  .loc-section{
    display: grid; gap: 40px;
    padding: 64px 0 24px;
  }
  /* Details on the left, map on the right. The grid rows stretch, so the
     map always matches the height of the details beside it. */
  .loc-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    background: var(--paper);
  }
  .loc-body{ padding: 36px 34px; }

  .loc-head{
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 22px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .brand-mark--loc{ height: 34px; margin-top: -3px; }
  .loc-name{
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.3rem; line-height: 1.25;
  }
  .loc-tagline{
    font-size: 0.88rem; line-height: 1.6;
    color: var(--ink-soft); margin-top: 8px;
  }

  .loc-detail{
    display: grid; grid-template-columns: 88px 1fr; gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(27,22,17,0.08);
  }
  .loc-detail:last-of-type{ border-bottom: none; }
  .loc-detail dt{
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--jade); line-height: 1; padding-top: 5px;
  }
  .loc-detail dd{ font-size: 0.94rem; line-height: 1.6; }
  .loc-detail dd a{
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(27,22,17,0.25);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .loc-detail dd a:hover{ color: var(--jade); text-decoration-color: currentColor; }

  /* Day on the left, time on the right, aligned in a narrow column so the
     times line up without a table. */
  .loc-hours{ list-style: none; max-width: 250px; }
  .loc-hours li{
    display: flex; justify-content: space-between; gap: 18px;
    font-size: 0.92rem;
  }
  .loc-hours li + li{ margin-top: 5px; }
  .loc-hours li span:first-child{ color: var(--ink-soft); }

  .loc-links{
    display: flex; flex-wrap: wrap; gap: 12px 28px;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .loc-link{
    font-size: 0.9rem; font-weight: 500; color: var(--jade);
    text-decoration: underline; text-underline-offset: 4px;
    transition: color 0.2s ease;
  }
  .loc-link:hover{ color: var(--seal); }

  /* The iframe is absolutely positioned so its own width/height attributes
     can't fight the grid cell. Celadon sits behind it while it loads. */
  .loc-map{
    position: relative;
    min-height: 380px;
    background: var(--celadon);
    border-left: 1px solid var(--line);
  }
  .loc-map iframe{
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    border: 0;
  }

  @media (max-width: 900px){
    .loc-card{ grid-template-columns: 1fr; }
    .loc-map{
      border-left: none;
      border-top: 1px solid var(--line);
      min-height: 300px;
    }
  }
  @media (max-width: 840px){
    .contact-actions{ grid-template-columns: 1fr; }
    .contact-action__note{ margin-top: 0; }
  }
  @media (max-width: 560px){
    .contact-head{ padding-top: 48px; }
    .loc-section{ gap: 32px; padding-top: 48px; }
    .loc-body{ padding: 28px 22px; }
    .loc-detail{ grid-template-columns: 1fr; gap: 6px; }
    .loc-detail dt{ padding-top: 0; }
    .loc-hours{ max-width: 280px; }
  }

  /* =========================================================
     PAGE STUB — used by the placeholder pages until we build them
     ========================================================= */
  .stub{
    min-height: 52vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 96px 0 104px;
  }
  .stub .eyebrow{ margin-bottom: 18px; }
  .stub h1{
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12;
    margin-bottom: 16px;
  }
  .stub p{ color: var(--ink-soft); max-width: 44ch; margin-bottom: 30px; }
  .stub-back{
    font-size: 0.9rem; color: var(--jade); font-weight: 500;
    text-decoration: underline; text-underline-offset: 4px;
  }

  /* =========================================================
     SITE FOOTER
     ========================================================= */
  .site-footer{
    background: var(--jade-deep); color: var(--paper-warm);
    padding: 66px 0 26px; margin-top: 88px;
    position: relative; z-index: 1;
  }
  .footer-inner{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .footer-grid{
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 44px; padding-bottom: 46px;
  }
  .footer-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }
  .brand-mark--footer{ height: 40px; }
  .footer-brand-name{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1rem; }
  .footer-tagline{ font-size: 0.88rem; line-height: 1.65; color: rgba(248,244,234,0.72); max-width: 30ch; }

  .footer-col h4{
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 16px; color: rgba(248,244,234,0.55);
  }
  .footer-col ul{ list-style: none; }
  .footer-col li{ margin-bottom: 10px; }
  .footer-col a{
    font-size: 0.9rem; text-decoration: none; color: rgba(248,244,234,0.88);
    transition: color .2s ease;
  }
  .footer-col a:hover{ color: var(--paper-warm); text-decoration: underline; text-underline-offset: 3px; }

  .footer-loc{ font-size: 0.88rem; line-height: 1.6; margin-bottom: 16px; color: rgba(248,244,234,0.88); }
  .footer-loc strong{ display: block; font-weight: 600; margin-bottom: 2px; }
  .footer-loc span{ color: rgba(248,244,234,0.6); }
  .footer-phone{
    display: inline-block; font-family: 'Fraunces', serif;
    font-size: 1.08rem; color: var(--paper-warm); text-decoration: none;
    border-bottom: 1px solid rgba(248,244,234,0.35); padding-bottom: 2px;
  }
  .footer-phone:hover{ border-bottom-color: var(--paper-warm); }

  .footer-bottom{
    border-top: 1px solid rgba(248,244,234,0.16);
    padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 14px 28px;
    justify-content: space-between; align-items: baseline;
    font-size: 0.78rem; color: rgba(248,244,234,0.55);
  }
  .footer-bottom p{ max-width: 62ch; line-height: 1.6; }

  @media (max-width: 860px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 520px){
    .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
    .site-footer{ padding-top: 52px; margin-top: 64px; }
  }

  /* ---------- Accessibility baseline ---------- */
  :focus-visible{ outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 3px; }
  .skip-link{
    position: absolute; left: -9999px; top: 0;
    background: var(--jade-deep); color: var(--paper-warm);
    padding: 12px 18px; z-index: 200; border-radius: 0 0 6px 0;
    font-size: 0.9rem; text-decoration: none;
  }
  .skip-link:focus{ left: 0; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ---------- SCROLL REVEALS ----------
     Sections fade and lift into place as they scroll into view. site.js
     adds .is-visible; the hidden starting state is gated behind
     @media (scripting: enabled) so that with JavaScript off — or in an
     older browser that doesn't know the query — nothing is ever hidden
     and the page just renders as normal.

     The reveal uses an animation rather than a transition on purpose:
     the cards below already have their own hover transitions, and an
     animation sits in a separate layer of the cascade instead of
     fighting them. Same reason it animates `translate` and not
     `transform` — the hover lift keeps working underneath.

     To add a new section to this, put its selector in the list below
     AND in the matching list at the top of the reveal block in site.js.
     The two must stay in step: CSS hides, JS reveals. */
  @media (scripting: enabled){

    .cabinet-section .section-head,
    .cabinet .drawer,
    .lang-note,
    .mp-head,
    .mp-figure,
    .mp-col .mp-card,
    .conditions-section .section-head,
    .conditions-grid .condition-card,
    .faq-section .section-head,
    .faq-list .faq-item,
    .faq-more,
    .cta-section{
      opacity: 0;
    }

    /* Duration and travel live here in one place. A slower fade wants a
       slightly longer lift behind it, otherwise the element finishes
       moving early and just sits there brightening. Keep the two in
       proportion if you retune: roughly 20px per second of duration. */
    .is-visible{
      animation: reveal-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    @keyframes reveal-in{
      from{ opacity: 0; translate: 0 26px; }
      to  { opacity: 1; translate: 0 0; }
    }
  }

  /* Motion off: show everything outright, no fade, no scroll dependency.
     The global reduced-motion rule at the foot of this file already
     flattens the animation itself; this makes sure the hidden state
     never applies in the first place. */
  @media (prefers-reduced-motion: reduce){
    .cabinet-section .section-head,
    .cabinet .drawer,
    .lang-note,
    .mp-head,
    .mp-figure,
    .mp-col .mp-card,
    .conditions-section .section-head,
    .conditions-grid .condition-card,
    .faq-section .section-head,
    .faq-list .faq-item,
    .faq-more,
    .cta-section{
      opacity: 1;
    }
  }