/* Self-hosted webfonts, built by tools/gen-fonts.sh -- see that script before
   editing anything here.

   These replace a fonts.googleapis.com stylesheet that was 178 KB gzipped
   (729 @font-face rules, one per Japanese unicode-range subset),
   render-blocking, and on a third-party origin -- so two extra DNS+TLS
   handshakes before the first character could paint. It was linked from BOTH
   includes/header.php and includes/header-top.php.

   The files below are text-subset to the characters this site actually uses,
   which is possible only because every string is hardcoded in PHP.
   Consequence: ADDING NEW KANJI REQUIRES RE-RUNNING tools/gen-fonts.sh.
   Verify with tools/check-fonts.py.

   Declared here rather than in a separate stylesheet so they cost no extra
   request -- this file is already render-blocking, and putting these rules
   first means the fetches start as early as parsing allows. The body 400 is
   additionally preloaded in both header files; the others are not, because a
   preload is a command rather than a hint and three more would compete with
   the LCP image for bandwidth.

   Weights are exactly the set Google Fonts was serving, so nothing changes
   appearance. In particular there is deliberately NO 600 and NO 800 -- see
   gen-fonts.sh, and the note on the folded 800s further down this file. */

@font-face {
    /* --font-display. Headings only: h1-h4, .reason-num, .difference-vs and
       the FAQ marks, every one of them at 700. Upstream ships no variable
       build, so the 500 and 600 that were being requested from Google Fonts
       would each have been another ~159 KB file -- and no display selector
       used either of them. */
    font-family: 'Shippori Mincho';
    src: url('/fonts/shippori-mincho-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* --font-sans, and therefore the body default. */
    font-family: 'Zen Kaku Gothic New';
    src: url('/fonts/zen-kaku-gothic-new-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Kaku Gothic New';
    src: url('/fonts/zen-kaku-gothic-new-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* Also what every font-weight: 600 in this file resolves to, exactly as
       before: 600 was never fetched from Google Fonts either, and CSS font
       matching walks upward from the requested weight. Adding a real 600 would
       be a visual change, not a fix. */
    font-family: 'Zen Kaku Gothic New';
    src: url('/fonts/zen-kaku-gothic-new-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette — 整える / 鍛える: clean white neutrals + one confident vermilion */
    --color-primary: #E85D04;        /* orange — brand primary */
    --color-primary-dark: #C44E03;   /* hover / active */
    --color-primary-light: #FCE6D5;  /* tinted fill for badges/chips */
    --color-sei: #E85D04;            /* clinic mode — unified to orange */
    --color-sei-dark: #C44E03;
    --color-sei-light: #FCE6D5;
    --color-ink: #141414;            /* near-black — dark surfaces / campaign */
    --color-ink-dark: #000000;
    --color-secondary: #141414;      /* black ink — footer / dark surfaces */
    --color-bg: #FFFFFF;             /* white (base) */
    --color-bg-alt: #F6F7F8;         /* alt section background (cool light grey) */
    --color-surface: #FFFFFF;        /* cards / raised surfaces */
    --color-text: #1B1D1E;           /* near-black */
    --color-text-light: #687078;     /* muted neutral grey */
    --color-border: #E5E8EB;         /* hairlines / borders */
    --color-success: #2F6B57;
    --color-error: #C0392B;
    --color-line-grn: #06C755;       /* LINE green — isolated to LINE button */

    /* ACCENT — a decorative second brand hue.
       On 玉出 it is the primary, so every rule that reads it renders exactly as
       it did before this variable existed. 光明池 gives it the logo's green (see
       the data-branch block below), which is why those rules use --color-accent
       rather than --color-primary even though the two are identical here. */
    --color-accent: #E85D04;
    --color-accent-dark: #C44E03;
    --color-accent-light: #FCE6D5;

    /* Footer wash — two stops of the brand hue, light to mid. */
    --color-footer-top: #FFF8F2;
    --color-footer-bottom: #FAD9C0;

    --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --font-sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', sans-serif;

    /* Modular type scale (clamp-based) */
    --fs-hero: clamp(2.2rem, 5.4vw, 3.5rem);
    --fs-h2: clamp(1.6rem, 3.2vw, 2.25rem);
    --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem);
    --fs-body: 1rem;
    --fs-sm: 0.85rem;
    --lh-tight: 1.28;
    --lh-body: 1.75;

    --radius: 12px;
    --radius-sm: 8px;
    /* Neutral shadows — soft, not pure black */
    --shadow: 0 2px 6px rgba(17,19,22,.10), 0 1px 3px rgba(17,19,22,.08);
    --shadow-lg: 0 14px 32px rgba(17,19,22,.12);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 5rem;
    --spacing-4xl: 6rem;
    --max-width: 1280px;
    --header-height: 56px;
}

/* 光明池 — the logo's blue and green in place of 玉出's vermilion.
 *
 * Sampled from public/img/logo.png: the figure is #0C6CB4 and the arc around it
 * is #84C03C. Blue leads because --color-primary is a TEXT colour in 25 rules
 * and #84C03C sits at 2.2:1 on white, which fails WCAG AA for anything smaller
 * than a heading. The green is therefore the accent: fills, rules and icon
 * strokes, never a label. --color-accent-dark is the green darkened to 4.52:1
 * for the rare place it does have to carry text.
 *
 * Scoped by the data-branch attribute on <html> (see includes/header.php) so all
 * three hosts still share ONE stylesheet. Splitting the CSS per branch would
 * cost a second file and break the `immutable` year-long cache the
 * ?v=<filemtime> URL earns it.
 */
:root[data-branch="komyoike"] {
    --color-primary: #0C6CB4;
    --color-primary-dark: #08528A;
    --color-primary-light: #E3F0FA;

    /* Clinic mode is unified to the primary here exactly as it is on 玉出. */
    --color-sei: #0C6CB4;
    --color-sei-dark: #08528A;
    --color-sei-light: #E3F0FA;

    --color-accent: #84C03C;
    /* The logo green darkened along its own hue until it clears 4.5:1 on white
       (it lands at 4.52). This is the ONLY green allowed to carry text; the raw
       #84C03C sits at 2.19:1 and is for fills, rules and icon strokes. */
    --color-accent-dark: #598229;
    --color-accent-light: #EDF6E1;

    --color-footer-top: #F3F9FD;
    --color-footer-bottom: #CFE3F2;
}

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

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

/* Scale the root down on smaller screens so the larger base size
   doesn't overflow narrow layouts (everything is rem-based). */
@media (max-width: 768px) {
    html { font-size: 21px; }
}
@media (max-width: 480px) {
    html { font-size: 18px; }
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: .01em;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-narrow {
    max-width: 762px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
}

/* Visible keyboard focus across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Header */
.header-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding-top: 1rem;
}

.header-logo .header-inner {
    justify-content: flex-start;
}

.header-logo .logo {
    background: #fff;
    padding: .5rem .9rem;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: none;
    height: var(--header-height);
    transition: background .3s, box-shadow .3s;
}

.header .header-inner {
    justify-content: flex-end;
}

.header .nav-link {
    color: #fff;
    text-shadow: 0 1px 4px rgba(20,18,15,.7);
}

/* Top (non-scrolled) nav: translucent dark-grey bar, same shape as the scrolled white one */
.header .nav-desktop {
    background: rgba(18, 18, 24, 0.72);
    border: 2px solid rgba(208, 208, 216, 0.65);
    border-top: none;
    border-radius: 0 0 2rem 2rem;
    padding: 0.5rem 1.25rem;
    margin: 0 -1.25rem;
}

.header-scrolled {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

.header-scrolled .nav-desktop {
    background: rgba(18, 18, 24, 0.72);
    box-shadow: var(--shadow);
    border: 2px solid rgba(208, 208, 216, 0.65);
    border-top: none;
    border-radius: 0 0 2rem 2rem;
    padding: 0.5rem 1.25rem;
    margin: 0 -1.25rem;
}

.header-scrolled .nav-link {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(20,18,15,.7) !important;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.logo-img {
    height: 8rem;
    width: auto;
    display: block;
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
    transition: color .2s;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    transition: background .2s;
}

.nav-cta:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.header-right-mobile,
.hamburger,
.nav-mobile {
    display: none;
}

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

.hero-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.hero-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: calc(var(--header-height) + 21rem) 2rem var(--spacing-2xl);
}

/* Readability now comes from a "tornado" paint mass painted behind the text
   block only (see .hero-text / .hero-paint), so the photo stays visible. */
.hero-text {
    position: relative;
}

.hero-paint {
    display: none;
}

/* Thin seam between the two disciplines */
.hero-panel-gym::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255,255,255,.30);
}

.hero-panel-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 560px;
    padding-bottom: var(--spacing-sm);
    /* Reserve equal height so the description lines up across both
       panels regardless of how many description lines each has */
    display: flex;
    flex-direction: column;
    min-height: 25rem;
}

.hero-panel-content .btn {
    align-self: center;
    margin-top: 0;
    padding: .5rem 1.25rem;
    font-size: .82rem;
}

/* The two home page hero panels -- the LCP on this site. Each is ~50vw on
   desktop and full width stacked on mobile, and each used to be one full-size
   original: front_desk.jpg was 2560x1920 at 407 KB, served to phones as well.

   Two declarations per rule and that is the whole fallback mechanism: a browser
   that does not understand image-set() ignores the second and keeps the first.
   image-set() selects on format and DPR but NOT on viewport width, so the
   narrow-viewport rendition is a media query further down.

   Widths come from tools/gen-images.sh, which clamps to the source -- which is
   why clinic_hero tops out at 1200 (its original is 1200x1600, portrait) while
   front_desk reaches 1280. */
.hero-panel-clinic {
    background-image: url('../img/opt/clinic-clinic_hero-1200.jpg');
    background-image: image-set(url('../img/opt/clinic-clinic_hero-1200.avif') type('image/avif'),
                                url('../img/opt/clinic-clinic_hero-1200.webp') type('image/webp'),
                                url('../img/opt/clinic-clinic_hero-1200.jpg') type('image/jpeg'));
}

.hero-panel-gym {
    background-image: url('../img/opt/gym-front_desk-1280.jpg');
    background-image: image-set(url('../img/opt/gym-front_desk-1280.avif') type('image/avif'),
                                url('../img/opt/gym-front_desk-1280.webp') type('image/webp'),
                                url('../img/opt/gym-front_desk-1280.jpg') type('image/jpeg'));
}

@media (max-width: 768px) {
    .hero-panel-clinic {
        background-image: url('../img/opt/clinic-clinic_hero-800.jpg');
        background-image: image-set(url('../img/opt/clinic-clinic_hero-800.avif') type('image/avif'),
                                                                url('../img/opt/clinic-clinic_hero-800.webp') type('image/webp'),
                                                                url('../img/opt/clinic-clinic_hero-800.jpg') type('image/jpeg'));
    }

    .hero-panel-gym {
        background-image: url('../img/opt/gym-front_desk-800.jpg');
        background-image: image-set(url('../img/opt/gym-front_desk-800.avif') type('image/avif'),
                                                                url('../img/opt/gym-front_desk-800.webp') type('image/webp'),
                                                                url('../img/opt/gym-front_desk-800.jpg') type('image/jpeg'));
    }
}

.hero-panel h2 {
    font-size: var(--fs-hero);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9);
    margin-bottom: .85rem;
}

.hero-panel p {
    font-size: 1.2rem;
    color: rgba(255,255,255,.94);
    text-shadow: 0 3px 16px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9);
    line-height: 1.7;
}

/* Reserve equal description height (gym's 3 lines) so both panels' content
   blocks are identical and the kanji/title/desc/CTA line up across the seam */
.hero-panel-desc {
    min-height: 3rem;
    margin-bottom: .5rem;
}

.hero-panel-desc p,
.hero-panel-desc .small-desc {
    margin-bottom: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
    padding: calc(var(--header-height) + 2rem) 0 4rem;
}

.hero-tag {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    color: #fff;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    text-shadow: 0 3px 12px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,.95);
}

.hero h1 span {
    color: var(--color-primary);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Page Hero (inner pages) — warm paper with a department tint */
.page-hero {
    padding: 9rem 0 2.5rem;
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.page-hero.clinic  { background: linear-gradient(135deg, var(--color-sei-light) 0%, var(--color-bg) 70%); }
.page-hero.gym     { background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 70%); }
.page-hero.company { background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 70%); }
.page-hero.contact { background: linear-gradient(135deg, var(--color-sei-light) 0%, var(--color-bg) 70%); }

/* Tategaki accent rule on the department hero */
.page-hero.clinic .page-hero-content h1::before,
.page-hero.gym .page-hero-content h1::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 0.9rem;
    border-radius: 2px;
}
.page-hero.clinic .page-hero-content h1::before { background: var(--color-sei); }
.page-hero.gym .page-hero-content h1::before { background: var(--color-primary); }

.page-hero-content {
    margin-top: 42px;
}

.page-hero-content h1 {
    font-size: var(--fs-h2);
    color: var(--color-text);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.page-hero-content p {
    color: var(--color-text-light);
    font-size: 1rem;
}

/* ============================================================
   Clinic masthead — traditional Japanese clinic header
   (clinic page only; sits below the fixed global nav)
   ============================================================ */
.clinic-masthead {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding-top: 10.75rem;
}

.clinic-masthead-eyebrow {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 0 0 1.25rem;
}

.clinic-masthead-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
}

/* LEFT: brand + address */
.clinic-masthead-brand {
    flex: 1 1 380px;
    min-width: 280px;
}

.clinic-brand-tagline {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.15rem;
}

.clinic-brand-name {
    font-size: 2rem;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    color: var(--color-text);
    line-height: 1.15;
    margin: 0;
}

.clinic-brand-group {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0.2rem 0 0;
}

.clinic-brand-address {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 1.1rem 0 0;
}

.clinic-brand-address svg {
    flex-shrink: 0;
    margin-top: 3px;
    stroke: var(--color-primary);
}

/* RIGHT: reservation + hours.
   Lift it up toward the top nav — the masthead top padding exists to clear
   the floating logo on the LEFT, which leaves a large gap above this column. */
.clinic-masthead-contact {
    flex: 0 1 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    margin-top: -7rem;
}

.clinic-contact-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.clinic-contact-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.clinic-contact-phone svg {
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.clinic-contact-phone a {
    font-size: 2.1rem;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    line-height: 1;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.clinic-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: background .2s;
}

.clinic-contact-btn:hover {
    background: var(--color-primary-dark);
}

.clinic-contact-btn svg {
    stroke: #fff;
    flex-shrink: 0;
}

.clinic-hours-box {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-align: left;
}

.clinic-hours-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
}

.clinic-hours-row + .clinic-hours-row {
    border-top: 1px solid var(--color-border);
}

.clinic-hours-label {
    flex-shrink: 0;
    min-width: 4.5rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-text);
    text-align: center;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.clinic-hours-value {
    color: var(--color-text);
}

/* Full-width promo banner */
.clinic-promo-banner {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

/* In-page section nav row */
.clinic-subnav {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.clinic-subnav .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.clinic-subnav a {
    flex: 0 1 auto;
    padding: 1rem 1.5rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    border-left: 1px solid var(--color-border);
    transition: color .2s;
}

.clinic-subnav a:last-child {
    border-right: 1px solid var(--color-border);
}

.clinic-subnav a:hover {
    color: var(--color-primary);
}

/* Jump targets clear the fixed global nav */
#clinic-menu,
#clinic-staff,
#clinic-access {
    scroll-margin-top: 6rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.4);
}

.btn-outline:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* Secondary — ghost on light surfaces */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* Tertiary — text-only action */
.btn-text {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary);
    padding-left: 0;
    padding-right: 0;
}

.btn-text:hover {
    color: var(--color-primary-dark);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
}

.btn-block {
    width: 100%;
}

/* Sections */
.section {
    padding: var(--spacing-2xl) 0;
}

.section-alt {
    background: var(--color-bg-alt);
}

.section-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
}

.section-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin: 0.85rem auto 0;
    background: var(--color-primary);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* Clinic sections lean tokiwa green; gym keeps brand vermilion */
.clinic-section .section-title::after { background: var(--color-sei); }

/* Intro */
.intro-text {
    font-size: 1.4rem;
    line-height: 2;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Services */
.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

.service-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.service-card-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary);
}

.service-card-body {
    flex: 1;
}

.service-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.service-card-body p {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.service-features {
    display: inline-block;
    font-size: .8rem;
    color: var(--color-primary);
    font-weight: 500;
    background: var(--color-primary-light);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.service-card-link:hover {
    gap: 0.7rem;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.feature-item svg {
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.feature-item span {
    font-size: 1rem;
    font-weight: 500;
}

/* Pricing */
.pricing-section .section-header {
    margin-bottom: var(--spacing-lg);
}

.trial-section {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
}

.trial-badge {
    color: var(--color-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.trial-desc {
    font-size: 1.15rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.trial-btn,
.trial-toggle-btn {
    margin-top: 1rem;
}

.trial-form-wrapper {
    display: none;
    max-width: 440px;
    margin: 1.5rem auto 0;
    animation: slideDown .3s ease;
}

.trial-form-wrapper.active {
    display: block;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.trial-form-msg {
    text-align: center;
    font-size: .9rem;
    margin-top: .75rem;
    min-height: 1.2em;
}

.trial-form-success {
    color: var(--color-success, #2e7d32);
}

.trial-form-error {
    color: var(--color-error, #c62828);
}

.pricing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.clinic-section .pricing-plans {
    /* Centered flex row: course cards sit at the gym card width (~395px at the
       1280px container) and center as a group; the campaign card spans full width. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.clinic-section .pricing-plan-card:not(.is-campaign) {
    flex: 0 1 395px;
    min-width: 320px;
}

.clinic-section .pricing-plan-card.is-campaign {
    flex: 1 1 100%;
}

/* Campaign card — a bold promotional banner that pops against the green course
   cards; spans full width when it sits alongside the two course cards */
.pricing-plan-card.is-campaign {
    grid-column: 1 / -1;
    background: #fff;
    border: 4px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

/* Treatment photo, top-right of the campaign card */
.clinic-section .pricing-plan-card.is-campaign::after {
    content: "";
    position: absolute;
    top: 0;
    right: 12px;
    width: 370px;
    height: 274px;
    /* 577 is the source width; there is nothing larger to reach for. The third
       format is PNG rather than JPEG because this is a cut-out with real
       transparency -- a JPEG would put a white box behind it.

       The shorthand carries the plain url() so that no-repeat/center/contain
       survive in a browser without image-set(); the longhand below then swaps
       the image only. Putting image-set() in the shorthand itself would make
       the whole declaration unparseable there and lose the positioning too. */
    background: url('../img/opt/clinic-treatment-photo-577.png') no-repeat center / contain;
    background-image: image-set(url('../img/opt/clinic-treatment-photo-577.avif') type('image/avif'),
                                url('../img/opt/clinic-treatment-photo-577.webp') type('image/webp'),
                                url('../img/opt/clinic-treatment-photo-577.png') type('image/png'));
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28));
    pointer-events: none;
    z-index: 0;
}

/* Taller gym campaign card so the trial photo has more room */
.pricing-section .pricing-plan-card.is-campaign {
    min-height: 420px;
}

/* Gym trial photo, top-right of the gym campaign card */
.pricing-section .pricing-plan-card.is-campaign::after {
    content: "";
    position: absolute;
    top: 0;
    right: 12px;
    width: 500px;
    height: 400px;
    /* Same treatment as .clinic-section's campaign card above: cut-out with
       real transparency, so the third format is PNG, not JPEG. */
    background: url('../img/opt/gym-trial-577.png') no-repeat top / contain;
    background-image: image-set(url('../img/opt/gym-trial-577.avif') type('image/avif'),
                                url('../img/opt/gym-trial-577.webp') type('image/webp'),
                                url('../img/opt/gym-trial-577.png') type('image/png'));
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28));
    pointer-events: none;
    z-index: 0;
}

.pricing-plan-card.is-campaign .plan-body {
    position: relative;
    z-index: 1;
    align-self: center;
    padding-top: var(--spacing-lg);
}

/* Keep the gym card's text clear of its larger photo, and reserve the photo's
   height so the inquiry button drops below the image rather than over it */
.pricing-section .pricing-plan-card.is-campaign .plan-body {
    padding-right: 500px;
    min-height: 360px;
}

/* Let the button follow the reserved plan-body height instead of being pinned
   to the card's bottom by .plan-inquiry's margin-top: auto — otherwise the card
   min-height controls the button position and the plan-body min-height (the knob
   that reserves the photo's height) has no effect on the gap before the button */
.pricing-section .pricing-plan-card.is-campaign .plan-inquiry {
    margin-top: 0;
}

/* Dark text for readability on the white panel */
.pricing-plan-card.is-campaign .plan-tagline,
.pricing-plan-card.is-campaign .clinic-desc {
    color: var(--color-text);
}

/* Big red campaign title */
.pricing-plan-card.is-campaign .plan-name {
    color: #e2231a;
    font-size: 2.2rem;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.pricing-plan-card.is-campaign .clinic-recommend,
.pricing-plan-card.is-campaign .clinic-treatment {
    color: var(--color-text-light);
}

.pricing-plan-card.is-campaign .clinic-recommend strong,
.pricing-plan-card.is-campaign .clinic-treatment strong {
    color: var(--color-text);
}

/* Vermilion campaign badge */
.pricing-plan-card.is-campaign .plan-type {
    background: var(--color-primary);
    color: #fff;
    font-size: .8rem;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Price shown as a white "price tag" chip with black text */
.pricing-plan-card.is-campaign .plan-prices {
    display: inline-block;
    background: var(--color-bg, #f5f5f5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.pricing-plan-card.is-campaign .plan-price-label {
    color: var(--color-text);
}

.pricing-plan-card.is-campaign .plan-price-amount {
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
}

.pricing-plan-card.is-campaign .price-was {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.pricing-plan-card.is-campaign .price-arrow {
    margin: 0 0.3em;
    color: var(--color-primary);
}

/* CTA in orange against the black */
.pricing-plan-card.is-campaign .plan-booking-link.btn-primary,
.pricing-plan-card.is-campaign .plan-toggle-btn.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.pricing-plan-card.is-campaign .plan-booking-link.btn-primary:hover,
.pricing-plan-card.is-campaign .plan-toggle-btn.btn-primary:hover {
    background: var(--color-primary-dark);
    color: #fff;
    border-color: var(--color-primary-dark);
}

.pricing-plan-card.is-campaign .plan-inquiry {
    position: relative;
    z-index: 1;
}

.pricing-plan-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
}

.pricing-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Clinic plans lean tokiwa green; gym keeps brand vermilion */
.clinic-section .pricing-plan-card { border-top-color: var(--color-sei); }
.clinic-section .plan-type { color: var(--color-sei); background: var(--color-sei-light); }
.clinic-section .clinic-price { color: var(--color-sei); }

/* Clinic CTAs (Book Now / inquiry) go green too */
.clinic-section .btn-primary {
    background: var(--color-sei);
    border-color: var(--color-sei);
}
.clinic-section .btn-primary:hover {
    background: var(--color-sei-dark);
    border-color: var(--color-sei-dark);
}
.clinic-section .form-group input:focus,
.clinic-section .form-group textarea:focus,
.clinic-section .form-group select:focus {
    border-color: var(--color-sei);
    box-shadow: 0 0 0 3px rgba(47,107,87,.18);
}

.plan-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.plan-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plan-body {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

.plan-type {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

.plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.plan-prices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}

.plan-price-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.plan-price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.plan-price-unit {
    font-size: .75rem;
    color: var(--color-text-light);
}

.clinic-price {
    display: block;
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.plan-popular {
    background: var(--color-primary);
    color: #fff;
}

.plan-prices + .clinic-desc {
    margin-top: var(--spacing-sm);
}

.clinic-desc {
    font-size: .95rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.clinic-desc:last-child {
    margin-bottom: 0;
}

.plan-tagline {
    font-size: .9rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.clinic-recommend,
.clinic-treatment {
    font-size: .9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-top: 0.5rem;
}

.clinic-recommend strong,
.clinic-treatment strong {
    color: var(--color-text);
}

.plan-inquiry {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    margin-top: auto;
}

.plan-toggle-btn {
    margin-top: var(--spacing-sm);
}

/* Gym plans deep-link to the booking app — a Book button sits right below its
   own price, inside the price tile. */
.plan-price .plan-booking-link {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: .8rem;
    text-align: center;
}

.plan-inquiry-form-wrapper {
    display: none;
    margin-top: var(--spacing-sm);
    animation: slideDown .3s ease;
}

.plan-inquiry-form-wrapper.active {
    display: block;
}

.plan-inquiry-form .form-group {
    margin-bottom: 0.5rem;
}

.radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: .9rem;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    margin: 0;
    width: auto;
}

.plan-inquiry-msg {
    text-align: center;
    font-size: .9rem;
    margin-top: .75rem;
    min-height: 1.2em;
}

.plan-inquiry-success {
    color: var(--color-success, #2e7d32);
}

.plan-inquiry-error {
    color: var(--color-error, #c62828);
}

.pricing-notes {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary-light);
    border-radius: var(--radius);
    font-size: .95rem;
    line-height: 1.8;
    color: var(--color-text);
}

.pricing-note-highlight {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.pricing-notes ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.pricing-notes li {
    padding: 0.25rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.pricing-notes li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Trainers */
.trainers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
}

.trainer-card {
    text-align: left;
    padding: 30px;
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.trainer-photo {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--spacing-md);
    display: block;
}

.trainer-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
}

.trainer-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--color-primary);
}

.trainer-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.trainer-card p {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Hours */
.hours-table {
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.hours-row:last-child {
    border-bottom: none;
}

.hours-day {
    font-weight: 600;
}

.hours-time {
    color: var(--color-text-light);
}

/* Access */
.access-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.access-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.access-address,
.access-phone {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.05rem;
}

.access-address svg,
.access-phone svg {
    stroke: var(--color-primary);
    flex-shrink: 0;
    margin-top: 3px;
}

.access-phone a {
    color: var(--color-text);
}

.access-phone a:hover {
    color: var(--color-primary);
}

.location-map {
    margin-top: var(--spacing-2xl);
}

/* Sizing box for the Street View embed. Height is reserved here rather than on
   the iframe, so nothing shifts when the lazy frame loads; overflow clips the
   frame's square corners to the radius. Kept equal to .location-map .map-embed
   below -- the panorama and the map are the same box, at both breakpoints. */
.access-streetview {
    margin-top: var(--spacing-2xl);
    height: 640px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.access-streetview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* .map-embed is the sizing box for the map -- listed here and in the
   narrow-viewport rule below -- so the reserved space is identical whether or
   not the lazy iframe inside it has loaded yet, and nothing shifts when it
   does. */
.location-map iframe,
.location-map .map-embed,
.access-map iframe {
    border: 0;
    border-radius: var(--radius);
    width: 100%;
    display: block;
}

.location-map .map-embed {
    height: 640px;
    overflow: hidden;
}

.location-map .map-embed iframe {
    height: 100%;
}

/* Company Table */
.company-table {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 2rem;
}

.company-table + .company-table {
    margin-top: var(--spacing-xl);
}

.company-row {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

.company-row:last-child {
    border-bottom: none;
}

.company-label {
    width: 200px;
    min-width: 200px;
    padding: 1rem 1.5rem;
    background: var(--color-bg-alt);
    font-weight: 600;
    font-size: 1rem;
}

.company-value {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

/* Contact Form */
.contact-form {
    max-width: 560px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.required {
    color: var(--color-error);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-family: var(--font-sans);
    transition: border-color .2s, box-shadow .2s;
    background: var(--color-surface);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(203,62,42,.18);
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Alerts */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: var(--color-success);
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--color-error);
}

/* Breadcrumb */
.breadcrumb {
    margin-top: 1rem;
}

.breadcrumb-list {
    display: flex;
    list-style: none;
    gap: 0.4rem;
    font-size: .95rem;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: rgba(0,0,0,.5);
}

.breadcrumb-link:hover {
    color: var(--color-text);
}

.breadcrumb-current span {
    color: rgba(0,0,0,.35);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    margin-right: 0.4rem;
    color: rgba(0,0,0,.25);
}

/* CTA Section */
.cta-box {
    text-align: center;
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius);
    color: #fff;
}

.cta-box h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.cta-box p {
    opacity: .85;
    margin-bottom: var(--spacing-lg);
}

.cta-box .btn-primary {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}

.cta-box .btn-primary:hover {
    background: rgba(255,255,255,.9);
    color: var(--color-primary-dark);
}

/* Reviews */
.reviews-section {
    background: var(--color-bg);
}

.google-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.reviews-average {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.review-stars-summary {
    margin: 0;
}

.reviews-total {
    font-size: 1rem;
    color: var(--color-text-light);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: transform .3s, box-shadow .3s;
    cursor: default;
    user-select: none;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.review-stars {
    display: flex;
    gap: 2px;
}

.review-text {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--color-text);
    flex: 1;
}

.review-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.review-name {
    font-weight: 600;
    font-size: .9rem;
}

.review-date {
    font-size: .8rem;
    color: var(--color-text-light);
}

.reviews-cta {
    text-align: center;
}

.btn-outline-reverse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    transition: all .2s;
    text-decoration: none;
}

.btn-outline-reverse:hover {
    border-color: var(--color-text);
    color: var(--color-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-outline-reverse svg {
    width: 20px;
    height: 20px;
}

/* Instagram */
.instagram-section {
    background: var(--color-bg-alt);
}

.instagram-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
}

.instagram-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--spacing-lg);
}

.instagram-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.instagram-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.instagram-profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.instagram-handle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.instagram-name {
    font-size: .9rem;
    color: var(--color-text-light);
}

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: .9rem;
}

.instagram-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.instagram-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instagram-stat strong {
    font-size: 1.15rem;
    font-weight: 700;
}

.instagram-stat span {
    font-size: .85rem;
    color: var(--color-text-light);
}

.instagram-bio {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--color-text);
}

.instagram-box p {
    color: var(--color-text-light);
}

.instagram-handle-inline {
    margin-top: var(--spacing-md);
    font-size: .95rem;
    color: var(--color-text-light);
    font-weight: 500;
}

/* LINE add-friend */
.line-section {
    background: var(--color-bg);
}

.line-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.line-box {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow);
}

.line-qr {
    width: 240px;
    height: 240px;
    max-width: 100%;
}

.line-id {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.line-desc {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* Two accounts side by side, on pages where the brand is ambiguous */
.line-box-multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.line-box-multi .line-desc {
    grid-column: 1 / -1;
}

.line-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.line-qr-brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

.line-box-multi .line-qr {
    width: 200px;
    height: 200px;
}

/* Brand chooser — shown only where the page does not imply a brand */
.line-chooser {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.line-chooser[hidden] {
    display: none;
}

.line-chooser-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.line-chooser-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
}

.line-chooser-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: flex;
    padding: .4rem;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s;
}

.line-chooser-close:hover {
    opacity: 1;
}

.line-chooser-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.line-chooser-desc {
    margin-top: .4rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text);
    opacity: .8;
}

.line-chooser-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.line-chooser-option {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    text-align: left;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.line-chooser-option:hover {
    color: var(--color-text);
    border-color: var(--color-line-grn);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.line-chooser-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.line-chooser-option-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
}

.line-chooser-option-brand {
    font-weight: 700;
    line-height: 1.3;
}

.line-chooser-option-id {
    font-size: .85rem;
    opacity: .7;
}

.line-chooser-arrow {
    flex-shrink: 0;
    opacity: .5;
}

@media (max-width: 768px) {
    .line-box-multi {
        grid-template-columns: 1fr;
    }
}

/* Footer */
.footer {
    /* Was a hardcoded orange wash, which stayed orange on a branch whose brand
       is not. The two stops are tokens so the data-branch palette reaches it. */
    background: linear-gradient(to bottom, var(--color-footer-top) 0%, var(--color-footer-bottom) 100%);
    color: #141414;
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    font-size: 1.05rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.footer-brand .logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer-brand .logo-img {
    height: 8rem;
}

.footer-brand .logo-text {
    color: #141414;
    font-size: 1.2rem;
}

.footer-address {
    margin-top: 0.75rem;
    font-size: 1.05rem;
    font-style: normal;
    line-height: 1.7;
}

.footer-group-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(20, 20, 20, 0.25);
    border-radius: 0.75rem;
    color: #141414;
    transition: all 0.2s ease;
}

.footer-group-link:hover {
    border-color: #141414;
    color: #000;
}

.footer-group-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, 0.6);
}

.footer-group-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-nav {
    display: flex;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.footer-nav-column h4 {
    color: #141414;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: .05em;
}

.footer-nav-column a {
    display: block;
    color: #141414;
    font-size: 1.05rem;
    padding: 0.2rem 0;
    transition: color .2s;
}

.footer-nav-column a:hover {
    color: #000;
    text-decoration: underline;
}

.footer-right {
    flex: 1;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.footer-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.footer-gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.footer-bottom {
    border-top: 1px solid rgba(20,20,20,.2);
    padding-top: var(--spacing-lg);
    text-align: center;
}

.footer-copyright {
    font-size: .95rem;
}

/* Floating buttons container */
.floating-buttons {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    z-index: 900;
}

.floating-btn {
    position: relative;
}

.floating-btn-tooltip {
    position: absolute;
    right: calc(100% + .75rem);
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    font-size: .8rem;
    white-space: nowrap;
    padding: .35rem .65rem;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    pointer-events: none;
}

.floating-btn-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #333;
}

.floating-btn:hover .floating-btn-tooltip {
    opacity: 1;
    visibility: visible;
}

/* LINE chat button */
/* LINE booking — one disciplined pill (icon + label), no chip/bubble/pulse */
/* Sized in px, not rem, on purpose: the fudousan site ships the same pill and
   runs a 16px root against our 18px, so the same rem renders two different
   buttons. px states the intended box. Keep the two sites in step. */
.line-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 26px 8px 21px;
    background: var(--color-line-grn);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    transition: background .2s, transform .2s, box-shadow .2s;
}

.line-chat-btn:hover {
    background: var(--color-line-grn);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(6,199,85,.30);
}

.line-chat-btn svg,
.line-chat-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
}

.line-chat-label {
    line-height: 1;
}

/* Hover speech bubble above the LINE button */
.line-chat-bubble {
    position: absolute;
    bottom: calc(100% + .85rem);
    right: 0;
    background: #fff;
    color: #222;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    padding: .6rem .9rem;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}

.line-chat-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 26px;
    border: 8px solid transparent;
    border-top-color: #fff;
}

.line-chat-btn:hover .line-chat-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Back to top */
.back-to-top {
    width: 44px;
    height: 44px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #222;
    color: #fff;
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* Fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 1024px) {
    .logo-img {
        height: 5rem;
    }
}

@media (max-width: 768px) {
    .clinic-masthead {
        padding-top: 1.5rem;
    }

    .clinic-masthead-eyebrow {
        text-align: center;
    }

    .clinic-masthead-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .clinic-masthead-brand {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .clinic-brand-row {
        flex-direction: column;
        text-align: center;
    }

    .clinic-brand-address {
        justify-content: center;
    }

    .clinic-masthead-contact {
        flex-basis: auto;
        width: 100%;
        max-width: 360px;
        margin-top: 0;
        min-width: 0;
    }

    .clinic-contact-phone a {
        font-size: 1.8rem;
    }

    .clinic-subnav .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        padding: 0;
        background: var(--color-border);
        overflow: visible;
    }

    .clinic-subnav a {
        border: none;
        background: var(--color-bg-alt);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.85rem 0.75rem;
    }

    .clinic-subnav a:last-child {
        grid-column: 1 / -1;
    }

    .header-logo {
        position: static;
        padding-top: var(--header-height);
        text-align: center;
    }

    .header-logo .header-inner {
        justify-content: center;
    }

    .logo-img {
        height: 5rem;
    }

    .nav-desktop {
        display: none;
    }

    .header-right-mobile {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
    }

    .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-text);
        border-radius: 2px;
        transition: all .3s;
    }

    .header .hamburger span {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,.95);
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .nav-mobile {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-bg);
        padding: var(--spacing-md);
        display: flex;
        flex-direction: column;
        gap: 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        z-index: 999;
    }

    .nav-mobile.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-mobile .nav-link {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
    }

    .nav-mobile .nav-link::after {
        display: none;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero,
    .page-hero {
        margin-top: 1.5rem;
    }

    .hero-split {
        flex-direction: column;
    }

    .hero-panel {
        min-height: 50vh;
        padding-top: calc(var(--header-height) + 2.5rem);
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        text-align: center;
    }

    .service-cards {
        grid-template-columns: 1fr;
    }

    .access-info {
        grid-template-columns: 1fr;
    }

    .company-row {
        flex-direction: column;
    }

    .company-label {
        width: auto;
        min-width: auto;
        padding-bottom: 0.25rem;
        background: none;
    }

    .company-value {
        padding-top: 0.25rem;
    }

    .footer-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .footer-brand .logo-img {
        width: 200px;
        height: auto;
        max-width: 100%;
    }

    .footer-right {
        min-width: 0;
    }

    .footer-nav {
        gap: var(--spacing-lg);
    }

    .cta-box {
        padding: var(--spacing-lg);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .trainers-grid {
        grid-template-columns: 1fr;
    }

    .trainer-photo {
        width: 200px;
        height: 200px;
        max-width: 100%;
    }

    .pricing-plans {
        grid-template-columns: 1fr;
    }

    .clinic-section .pricing-plans {
        grid-template-columns: 1fr;
    }

    /* Full-width single column on mobile (the flex row above uses a 320px min). */
    .clinic-section .pricing-plan-card:not(.is-campaign) {
        flex-basis: 100%;
        min-width: 0;
    }

    .pricing-plan-card.is-campaign {
        grid-column: auto;
    }

    .pricing-plan-card.is-campaign .plan-body,
    .pricing-section .pricing-plan-card.is-campaign .plan-body {
        align-self: stretch;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        padding-top: var(--spacing-md);
        min-height: 0;
    }

    .pricing-plan-card.is-campaign .plan-name {
        font-size: 1.5rem;
    }

    .pricing-plan-card.is-campaign .plan-prices {
        display: block;
        max-width: 100%;
    }

    .pricing-plan-card.is-campaign .plan-price-amount {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 0.1em 0.35em;
        font-size: 1.3rem;
        overflow-wrap: normal;
    }

    .pricing-plan-card.is-campaign .price-was,
    .pricing-plan-card.is-campaign .price-now {
        white-space: nowrap;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .instagram-profile {
        flex-wrap: wrap;
    }

    .instagram-icon {
    width: 56px;
    height: 56px;
    }

    .instagram-box,
    .line-box,
    .review-card,
    .reason-card,
    .worries-list,
    .service-card,
    .firstvisit-banner,
    .plan-body,
    .trainer-card,
    .difference-grid,
    .difference-col {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .hours-row {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .instagram-stats {
        flex-wrap: nowrap;
        justify-content: center;
        gap: var(--spacing-md);
    }

    .radio-group {
        flex-wrap: wrap;
    }

    .review-author {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-2xl: 2.5rem;
        --spacing-3xl: 3rem;
        --spacing-4xl: 3.5rem;
        --spacing-xl: 2rem;
    }

    .hero-content {
        padding-top: calc(var(--header-height) + 1rem);
    }

    .trial-badge {
        font-size: 1.8rem;
    }

    .plan-image {
        height: 180px;
    }

    .access-streetview,
    .location-map iframe,
    .location-map .map-embed {
        height: 380px;
    }

    /* The route rows borrow .hours-row, but carry a much longer value -- a full
       line plus station name, not "10:00～20:00" -- so at this width the label
       and value stack instead of being squeezed onto one line. Scoped to
       .route-table so the hours tables keep their two-column look. */
    .route-table .hours-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .instagram-profile {
        flex-direction: column;
        text-align: center;
    }

    .instagram-profile-info {
        align-items: center;
    }

    .instagram-title {
        font-size: 1.25rem;
    }

    .instagram-handle {
        font-size: .9rem;
    }

    .instagram-name {
        font-size: .8rem;
    }

    .instagram-stat strong {
        font-size: 1rem;
    }

    .instagram-stat span {
        font-size: .75rem;
    }

    .instagram-bio {
        font-size: .85rem;
    }

    .instagram-box,
    .line-box {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .instagram-stats {
        gap: var(--spacing-sm);
    }
}

/* ============================================================
   Mobile LINE sticky bar + responsive floating buttons
   ============================================================ */

.line-mobile-bar {
    display: none;
}

@media (max-width: 768px) {
    /* Hide desktop LINE button (sticky bar takes over) */
    .line-chat-btn {
        display: none;
    }

    /* Desktop floating cluster collapses to just back-to-top on mobile */
    .floating-buttons {
        position: fixed;
        right: 1rem;
        bottom: auto;
        top: auto;
        z-index: 998;
    }

    /* Mobile sticky bar */
    .line-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: .9rem 1rem;
        padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
        background: #06C755;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        z-index: 998;
        animation: line-bar-slide-in .35s ease-out;
        transition: background .2s;
    }

    .line-mobile-bar:hover,
    .line-mobile-bar:active {
        background: #05a848;
        color: #fff;
    }

    .line-mobile-bar svg {
        flex-shrink: 0;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
    }

    /* Back-to-top becomes small FAB above the sticky bar on mobile */
    .back-to-top {
        position: fixed;
        right: 1rem;
        bottom: calc(70px + env(safe-area-inset-bottom));
        width: 40px;
        height: 40px;
        opacity: 0;
        visibility: hidden;
        z-index: 998;
    }

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }

    /* Tooltip and chip disabled on mobile (touch) */
    .floating-btn-tooltip,
    .line-label-chip {
        display: none !important;
    }
}

@keyframes line-bar-slide-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Close button inside the mobile sticky bar */
.line-mobile-bar-close {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .18);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
}

.line-mobile-bar-close:hover {
    background: rgba(0, 0, 0, .32);
}

/* Restore indicator — 3 vertical green dots, bottom-right; shown only when bar is collapsed */
.line-mobile-restore {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 998;
    animation: line-restore-fade-in .25s ease-out;
}

.line-mobile-restore span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06C755;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s, opacity .2s;
}

.line-mobile-restore:hover span,
.line-mobile-restore:active span {
    transform: scale(1.25);
}

@keyframes line-restore-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Collapsed state — bar hidden, dots shown */
body.line-bar-collapsed .line-mobile-bar {
    transform: translateY(100%);
    pointer-events: none;
}

body.line-bar-collapsed .line-mobile-restore {
    display: flex;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Clinic parity sections (symptoms, worries, reasons, root cause,
   difference, flow, self-care, FAQ, facility, first-visit banner)
   ============================================================ */

/* Symptoms grid */
.clinic-symptoms {
    padding-top: 0;
}
.symptom-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
    max-width: 1000px;
    margin: 0 auto;
}
.soudan-banner {
    margin: var(--spacing-lg) auto 0;
    max-width: 720px;
    text-align: center;
}
.soudan-banner img {
    width: 100%;
    height: auto;
    display: block;
}
.symptom-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
    transition: transform .3s, box-shadow .3s;
}
.symptom-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.symptom-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.symptom-label {
    font-weight: 700;
    font-size: 1.05rem;
}

/* Worries checklist */
.clinic-worries-title {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    white-space: nowrap;
}
.worries-list {
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.worry-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: 1.05rem;
    line-height: 1.6;
}
.worry-check {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: .15rem;
}
.worries-cta {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: var(--spacing-md);
    color: var(--color-text);
}

/* Reasons grid */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}
.reason-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    padding-top: calc(var(--spacing-lg) + .5rem);
    box-shadow: var(--shadow);
    transition: transform .3s, box-shadow .3s;
}
.reason-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.reason-num {
    position: absolute;
    top: -.2rem;
    left: var(--spacing-lg);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    opacity: .25;
}
.reason-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.reason-desc {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Root cause */
.rootcause-body {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}
.rootcause-factors {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.factor-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: .55rem 1rem;
    font-weight: 500;
    font-size: .95rem;
}

/* Difference (other vs ours) */
.difference-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--spacing-md);
    max-width: 960px;
    margin: 0 auto;
}
.difference-col {
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
}
.difference-other {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
}
.difference-ours {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary);
}
.difference-label {
    display: inline-block;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .75rem;
    color: var(--color-text);
}
.difference-ours .difference-label {
    color: var(--color-primary-dark);
}
.difference-col p {
    line-height: 1.8;
}
.difference-vs {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.3rem;
}

/* Treatment flow (STEP timeline) */
.flow-steps {
    list-style: none;
    position: relative;
    padding-left: 1rem;
}
.flow-step {
    display: flex;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
    position: relative;
}
.flow-step::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: -4px;
    width: 2px;
    background: var(--color-border);
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step:last-child::before { display: none; }
.flow-step-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    z-index: 1;
}
.flow-step-label {
    font-size: .5rem;
    letter-spacing: .1em;
    font-weight: 600;
    opacity: .85;
}
.flow-step-body {
    padding-top: .35rem;
}
.flow-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.flow-step-desc {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Self-care */
.selfcare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-sm);
}
.selfcare-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    font-weight: 500;
}
.selfcare-item svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* FAQ accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.faq-question {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-q-mark, .faq-a-mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
}
.faq-q-mark {
    background: var(--color-primary);
    color: #fff;
}
.faq-q-text { flex: 1; }
.faq-chevron {
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: transform .25s;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
    display: flex;
    gap: .75rem;
    padding: 0 1.25rem 1.2rem 1.25rem;
    color: var(--color-text-light);
    line-height: 1.8;
}
.faq-a-mark {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* First-visit banner */
.firstvisit-banner {
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
}
.firstvisit-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    padding: .3rem 1rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}
.firstvisit-title {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
.firstvisit-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .6rem;
    margin-bottom: .75rem;
}
.firstvisit-old {
    color: var(--color-text-light);
    text-decoration: line-through;
    font-size: 1.2rem;
}
.firstvisit-arrow { color: var(--color-primary); font-weight: 700; }
.firstvisit-new {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;  /* was 800; see the @font-face note at the top */
    font-family: var(--font-display);
}
.firstvisit-note {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* Facility gallery */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}
.facility-item {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
}
.facility-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.facility-item:hover img { transform: scale(1.05); }

@media (max-width: 768px) {
    .difference-grid {
        grid-template-columns: 1fr;
    }
    .difference-vs {
        justify-self: center;
    }
    .symptom-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .clinic-worries-title {
        white-space: normal;
    }
    .clinic-section .pricing-plan-card.is-campaign::after,
    .pricing-section .pricing-plan-card.is-campaign::after {
        width: 45%;
        height: 40%;
        opacity: .18;
    }
}

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

/* ============================================================================
   HOLDINGS CARDS — the apex page's two businesses.
   Ported from teisyogroup's .home-card, which is the established shape for
   "here are our businesses, pick one" across this estate. Tokens mapped onto
   this site's set: --accent -> --color-primary, --ink -> --color-text,
   --muted -> --color-text-light, --line -> --color-border.
   ============================================================================ */
/* The hero exists for clearance as much as for design: .header-logo is
   position:absolute and 8rem tall, so .page-hero's 9rem top padding is what
   stops the logo landing on the first card. */
.biz-hero { text-align: center; padding-bottom: var(--spacing-xl); }
.biz-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0.75rem 0 0;
}
.biz-hero__lead {
    color: var(--color-text-light);
    font-size: 1.0625rem;
    line-height: var(--lh-body);
    max-width: 46rem;
    margin: var(--spacing-sm) auto 0;
}

/* Small caps label with a rule, lifted from teisyogroup's .eyebrow. */
.biz-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.biz-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}
.biz-hero .biz-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}

.biz-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: 2.75rem;
    flex-wrap: wrap;
}
.biz-head h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0.5rem 0 0;
}
.biz-head p {
    color: var(--color-text-light);
    font-size: 1.0625rem;
    margin: 0;
}

.biz-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.625rem;
}

/* isolation: isolate is load-bearing. The photo and the scrim sit at negative
   z-index so the text can paint over them without a wrapper; without a new
   stacking context they would drop behind the card's own ancestors instead. */
.biz-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 20px;
    overflow: hidden;
    min-height: 360px;
    isolation: isolate;
}
.biz-card__img { position: absolute; inset: 0; z-index: -2; transition: transform .6s ease; }
.biz-card__img img,
.biz-card__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.biz-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10,16,17,.9) 0%, rgba(10,16,17,.35) 55%, rgba(10,16,17,.1) 100%);
}
.biz-card:hover .biz-card__img { transform: scale(1.06); }
.biz-card__inner {
    position: absolute;
    inset: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.biz-card__cat {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .12em;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    padding: 7px 14px;
    border-radius: 999px;
}
.biz-card__name {
    font-family: var(--font-display);
    font-size: 1.6875rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 14px 0 6px;
}
.biz-card__desc { color: rgba(255,255,255,.85); font-size: 0.9375rem; line-height: 1.6; }
.biz-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-weight: 700;
    font-size: 0.9375rem;
    /* A LIGHT tint of the branch's own colour, not the colour itself: this sits
       on a dark scrim, where #E85D04 and #84C03C are both too dark to read
       comfortably. Set per card below. */
    color: var(--biz-card-accent, #fff);
}
.biz-card__more svg { transition: transform .2s ease; }
.biz-card:hover .biz-card__more svg { transform: translateX(4px); }

/* The one place the estate's holdings pattern is extended: teisyogroup's four
   cards are identical because its businesses share a palette. These two do not
   -- 玉出 is vermilion and 光明池 is the logo's blue and green -- so each card
   previews the site it leads to. */
.biz-card--tamade { --biz-card-accent: #FFC79A; }
.biz-card--komyoike { --biz-card-accent: #C6E89B; }

/* A branch that has not opened yet. It is a <div>, not an <a>, so there is
   nothing to hover and nothing to focus -- the hover zoom is cancelled to match,
   because a card that lifts under the cursor promises a click it will not
   honour. The photograph is dimmed and desaturated so the difference reads
   before the label does. */
.biz-card--soon { cursor: default; }
.biz-card--soon .biz-card__img { filter: grayscale(.55) brightness(.82); }
.biz-card--soon:hover .biz-card__img { transform: none; }
.biz-card__soon {
    align-self: flex-start;
    margin-top: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.45);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.biz-card__station {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.8125rem;
    color: rgba(255,255,255,.75);
}
.biz-card__station svg { flex: none; }

/* What both branches share. Three cells divided by hairlines, the same device
   teisyogroup uses for its stats row. */
.biz-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.biz-point {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    border-right: 1px solid var(--color-border);
}
.biz-point:last-child { border-right: none; }
.biz-point__v {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}
.biz-point__l {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .biz-cards { grid-template-columns: 1fr; }
    /* Three across is too narrow to read at this width; one per row keeps the
       label on a single line. */
    .biz-points { grid-template-columns: 1fr; }
    .biz-point { border-right: none; border-bottom: 1px solid var(--color-border); }
    .biz-point:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
    .biz-card__img { transition: none; }
    .biz-card__more svg { transition: none; }
}