/* Sacramento keeps the shared layout with a black header, the logo green and pink. Since the client's answers of 2026-10-22
   the hero and the footer use the light CONCEPT background (--cream) and the booking panel the plan-card green (--green). */
:root{--black:#0a0a0a;--black-soft:#161616;--logo-green:#3fae6e;--logo-pink:#e9558e;--on-dark:#f4f4f2;--on-dark-muted:#b5b5b2}
.site-header{background:#0a0a0ae6;border-bottom-color:#262626}
.brand{color:var(--on-dark)}
.brand img.brand-logo{width:auto;height:44px}
.main-nav>a{color:var(--on-dark)}
.main-nav>a:hover,.main-nav>a[aria-current="location"]{color:var(--logo-pink)}
.main-nav .member-link{border-color:#3a3a3a}
.main-nav .button{background:var(--logo-green);border-color:var(--logo-green);color:var(--black)}
.main-nav .button:hover{background:#4fc47e;color:var(--black)}
.hero{background:var(--cream);color:var(--ink)}
.hero-photo{inset:0 0 0 34%}
.hero-photo img{object-position:50% 55%}
/* Hero video (shoot 2026-04-26): started by app.js over the still photo; never with reduced motion. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .8s ease}
.hero-video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-photo:after{background:linear-gradient(90deg,var(--cream) 0%,#f5f5f2f0 6%,#f5f5f280 36%,#f5f5f210 70%)}
.hero h1{color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .eyebrow{color:var(--green)}
.hero .eyebrow span{background:var(--logo-pink)}
.hero-description{color:var(--ink)}
.hero-note{color:var(--muted)!important}
/* The caption sits on the photo (turf and net): a translucent black plate keeps it legible (at least 4.5:1). */
.hero-caption{padding:8px 14px;background:#0a0a0ae6;border-radius:3px;text-shadow:none}
.hero-caption span:first-child{color:var(--logo-green)}
.hero-caption span:last-child{color:var(--on-dark)}
.quick-facts svg.icon{color:var(--green)}
.eyebrow{color:var(--gold)}
.intro-photo>span{color:var(--green)}
.feature-grid .lefty-badge{display:inline-block;margin-top:12px;font-family:var(--latin);font-size:11px;letter-spacing:.12em;color:var(--gold)}
.feature-grid img{width:100%;height:170px;border-radius:3px;margin-bottom:18px}
.plan-ribbon{background:var(--gold)}
/* Lesson ticket (client answers 2026-10-22): one line under the three plans, members only. */
.price-option{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;max-width:860px;margin:30px auto 0;padding:16px 22px;background:#fff;border:1px solid var(--line);border-radius:4px;font-size:14px;text-align:center}
.price-option .eyebrow{font-size:11px;letter-spacing:.12em}
.price-option strong{color:var(--green)}
.price-option small{font-size:12px;color:var(--muted)}
.price-option+.price-footnote{margin-top:20px}
.price-footnote{max-width:860px;margin-inline:auto}
.corporate-prices dt small{display:block}
#all-plans tbody td:nth-child(2){white-space:nowrap}
.price-footnote+.price-corporate-note{margin-top:-20px}
.corporate-prices dl>div dd small{display:block}
.access-info dd small{display:block}
/* Booking panel on the plan-card green: white text and the white button keep at least 4.8:1. */
.reservation-panel{background:var(--green);color:#fff}
.reservation-panel .eyebrow{color:var(--on-dark)}
.reservation-panel p:not(.eyebrow){color:var(--on-dark)}
/* Footer on the CONCEPT background: the logo with its dark wordmark, ink and muted text (at least 5.9:1). */
.site-footer{background:var(--cream);color:var(--ink);border-top-color:var(--line)}
.footer-address{color:var(--muted)}
.footer-address a{color:var(--ink)}
.footer-social a{color:var(--ink)}
.footer-social a:hover,.footer-bottom nav a:hover{color:var(--gold)}
.footer-bottom{border-top-color:var(--line)}
.footer-bottom small{color:var(--muted)}
.page-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.article-content details{border-bottom:1px solid var(--line);padding:6px 0}
.article-content details>summary{font-weight:700;color:var(--green);padding:14px 0;cursor:pointer}
.article-content details[open]>summary{margin-bottom:6px}
.legal-related{margin-top:40px;padding:22px 26px;background:var(--cream);border-top:2px solid var(--green)}
.members-heading h1,.member-info h2{color:var(--green)}
.member-rules{margin:12px 0 0 1.2em;font-size:14px;color:var(--muted);line-height:2}
/* Seven member cards (with /schedule/): the last one spans the row instead of standing alone. */
.member-actions>a:last-child:nth-child(3n+1){grid-column:1/-1}
@media(max-width:800px){.member-actions>a:last-child:nth-child(3n+1){grid-column:auto}.member-actions>a:last-child:nth-child(odd){grid-column:1/-1}}
.schedule-fallback{max-width:820px;margin:0 auto;padding:34px;background:var(--cream);border-top:3px solid var(--green)}
.schedule-fallback p{color:var(--muted);line-height:2}
.schedule-fallback .page-cta{margin-top:26px}
/* Template components filled with Sacramento content. */
/* Coaches (from the Kichijoji theme): one portrait frame and crown-to-chin scale at every breakpoint. */
.coach-photo{container-type:inline-size;--portrait-width:100%;--portrait-head-top:0cqw;--portrait-center:50%}
.coach-card .coach-photo{display:block;position:relative;width:100%;height:auto;min-height:0;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#f7f8f7;align-self:start}
.coach-photo img{position:absolute;left:50%;top:calc(6% - var(--portrait-head-top));width:var(--portrait-width);max-width:none;height:auto;transform:translateX(calc(-1 * var(--portrait-center)));border-radius:0}
.coach-visual{align-self:start}
.portrait-kidokoro{--portrait-width:122%;--portrait-head-top:13.1cqw;--portrait-center:54%}
.portrait-uota{--portrait-width:115%;--portrait-head-top:11.7cqw;--portrait-center:50%}
.anchor-alias{display:block;position:relative;top:-90px;height:0;visibility:hidden}
.junior-note{padding:24px 0;color:var(--muted);font-size:14px}
.junior-note .text-link{display:inline;font-size:inherit}
.intensive-program>.intensive-note{margin:0 0 16px}
.intensive-cards h4{min-height:3.2em}
.trial-steps{grid-template-columns:repeat(3,1fr);max-width:960px;margin-inline:auto}
.trial-time .icon{flex-shrink:0;width:26px;height:26px;color:var(--green)}
.member-lead{font-size:14px;color:var(--muted);line-height:2;margin-bottom:22px}
.guide-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-steps img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:3px;margin-bottom:14px}
.contact-channels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0}
.contact-channels>section{background:var(--cream);padding:30px 28px;border-top:3px solid var(--green)}
.contact-channels h2{font-size:22px;margin:10px 0 12px}
.contact-channels p{font-size:14px;color:var(--muted);line-height:2;margin-bottom:14px}
.contact-tel{font-family:var(--latin);font-size:28px;color:var(--green)}
.contact-page .reservation-panel{margin-top:10px}
.contact-channels-single{grid-template-columns:1fr}
/* Official LINE / Instagram (template-parts/social-links.php): rendered only once a URL is set in inc/store.php. */
.social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:22px;font-size:14px;font-weight:700}
.social-links a{color:var(--green);border-bottom:1px solid var(--green);padding-bottom:3px}
.contact-channels .social-links{justify-content:flex-start;margin-top:4px}
/* Form pages (/contact/, /corporate-application/): the stored page body (WordPress form) inside the template. */
.contact-page .page-lead{margin:18px 0 26px;color:var(--muted);line-height:2}
.req{display:inline-block;margin:0 4px;padding:1px 7px;border-radius:2px;background:#b8285f;color:#fff;font-size:12px;font-weight:700;line-height:1.6;vertical-align:middle}
.form-guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 32px;padding:22px 26px;background:var(--cream);border-top:2px solid var(--green)}
.form-guide p{margin:0;font-size:14px;color:var(--muted);line-height:2;flex:1 1 320px}
.form-guide p a,.intensive-note a,.corporate-prices p a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.page-form{margin-bottom:36px}
.page-form form{display:grid;gap:20px;max-width:720px}
.page-form label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.page-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]),.page-form textarea,.page-form select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;font:inherit;color:inherit}
.page-form input:focus,.page-form textarea:focus,.page-form select:focus{outline:2px solid var(--green);outline-offset:1px}
.page-form button[type=submit],.page-form input[type=submit]{justify-self:start;padding:14px 32px;border:1px solid var(--logo-green);border-radius:4px;background:var(--logo-green);color:var(--black);font:inherit;font-weight:700;cursor:pointer}
/* The theme's own forms (inc/form-handler.php). */
.zk-form{display:grid;gap:22px;max-width:720px;margin:0 auto;scroll-margin-top:110px}
.form-notice:focus{outline:2px solid var(--green);outline-offset:2px}
.zk-field label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;margin-bottom:8px}
.zk-field label .req,.zk-field label .opt{margin:0}
.opt{display:inline-block;padding:1px 7px;border-radius:2px;background:#e6e6e2;color:#4a4a48;font-size:12px;font-weight:700;line-height:1.6}
.zk-field input,.zk-field textarea{width:100%;padding:13px 14px;border:1px solid #c9c9c4;border-radius:4px;background:#fff;font:inherit;font-size:16px;color:inherit;line-height:1.6}
.zk-field textarea{min-height:180px;resize:vertical}
.zk-field input:focus,.zk-field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.zk-field.is-invalid input,.zk-field.is-invalid textarea{border-color:#b3261e;background:#fff8f7}
.field-error{margin-top:6px;color:#b3261e;font-size:13px;font-weight:700}
.form-notice{padding:18px 22px;border-radius:4px;line-height:1.9;font-size:15px}
.form-notice-success{background:#eaf5ee;border-left:4px solid var(--green);color:#14532d}
.form-notice-success small{color:#4a4a48}
.form-notice-error{background:#fdecea;border-left:4px solid #b3261e;color:#7f1d1d}
.form-notice-error ul{margin:8px 0 0 1.2em;font-size:14px}
.form-notice-error a{color:inherit;text-decoration:underline}
.zk-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.zk-form-submit{text-align:center;margin-top:6px}
.zk-form-submit .button{min-width:260px;background:var(--logo-green);border-color:var(--logo-green);color:var(--black)}
.zk-form-submit .button:hover{background:#4fc47e;color:var(--black)}
@media(max-width:480px){.zk-form-submit .button{width:100%;min-width:0}}
.form-placeholder{padding:28px;border:1px dashed var(--green);background:var(--cream)}
.form-placeholder p{color:var(--muted);line-height:2;margin:0}
.form-placeholder .form-placeholder-title{color:var(--green);font-weight:700;margin-bottom:6px}
.form-placeholder .form-placeholder-note{margin-top:12px;font-size:12px}
.corporate-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px}
@media(min-width:801px){.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){
  .main-nav{background:var(--black)}
  .main-nav>a:not(.button):not(.member-link){border-bottom-color:#262626}
  .menu-toggle{color:var(--on-dark)}
  .menu-toggle>span:not(.menu-caption){background:var(--on-dark)}
  .hero-photo{inset:0 0 0 18%}
  .hero-photo:after{background:linear-gradient(90deg,var(--cream),#f5f5f2cc 25%,#f5f5f255 70%,#f5f5f220)}
  /* The small eyebrow overlaps the photo below 800px: ink keeps it above 4.5:1 on the lightened photo. */
  .hero .eyebrow{color:var(--ink)}
  .trial-steps{grid-template-columns:1fr}
  .trial-steps>li:after{display:none}
  .guide-steps,.contact-channels{grid-template-columns:1fr}
  .mobile-booking{background:var(--black);box-shadow:0 -3px 15px #00000040}
  .mobile-booking a{border-color:#3a3a3a;color:var(--on-dark)}
  .mobile-booking a:last-child{background:var(--logo-green);border-color:var(--logo-green);color:var(--black)}
}
@media(max-width:480px){
  .brand img.brand-logo{height:34px}
  .hero-photo{inset:0 0 auto 0}
  .hero-photo:after{background:linear-gradient(0deg,var(--cream) 0%,#f5f5f299 40%,#f5f5f210 75%)}
  .schedule-fallback{padding:24px 20px}
}

/* Two contact options since the telephone card was removed (owner request 2026-10-30); phones keep the single column. */
@media(min-width:801px){.contact-options{grid-template-columns:repeat(2,1fr)}}