/* ==========================================================================
   Oshiro massage - single source of truth for colour, type and spacing.
   Every value used anywhere in the site is declared once, here, as a
   custom property and referenced with var().
   ========================================================================== */

:root {

  /* ---- colour ---------------------------------------------------------- */
  --c-paper:        #f6efe4;
  --c-paper-deep:   #ece0cf;
  --c-card:         #fdf9f2;
  --c-field:        #fffdf9;
  --c-ink:          #241d1a;
  --c-ink-soft:     #574b44;
  --c-ink-faint:    #6b6058;
  --c-rose:         #944941;
  --c-rose-pale:    #e0c3bb;
  --c-sage:         #74875b;
  --c-gold:         #a9843f;
  --c-line:         #ddcdb7;
  --c-line-soft:    #eadcc8;
  --c-dark:         #201a17;
  --c-dark-2:       #2c2421;
  --c-on-dark:      #f3e9dc;
  --c-on-dark-soft: #bfb0a1;
  --c-shadow:       rgba(36, 29, 26, .12);
  --c-shadow-deep:  rgba(36, 29, 26, .22);
  --c-veil:         rgba(246, 239, 228, .82);

  /* ---- type ------------------------------------------------------------ */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-body:    "Zen Kaku Gothic New", "Helvetica Neue", sans-serif;

  --fs-hero:   62px;
  --fs-h1:     46px;
  --fs-h2:     34px;
  --fs-h3:     22px;
  --fs-h4:     18px;
  --fs-lead:   20px;
  --fs-body:   17px;
  --fs-small:  15px;
  --fs-micro:  13px;
  --fs-kicker: 12px;
  --fs-nav:    15px;
  --fs-logo:   25px;
  --fs-kanji:  21px;
  --fs-price:  17px;
  --fs-numeral:15px;
  --fs-flag:   17px;
  --fs-figure: 40px;

  --lh-tight: 1.08;
  --lh-head:  1.22;
  --lh-body:  1.78;
  --lh-nav:   1;

  --ls-kicker: .24em;
  --ls-nav:    .08em;
  --ls-head:   .005em;
  --ls-none:   0;

  --fw-light:  300;
  --fw-book:   400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* ---- spacing --------------------------------------------------------- */
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  44px;
  --s-8:  64px;
  --s-9:  88px;
  --s-10: 120px;

  /* ---- shape, size, motion --------------------------------------------- */
  --r-sm:   3px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 999px;

  --bw:   1px;
  --bw-2: 2px;
  --bw-4: 4px;

  --w-wrap:    1140px;
  --w-text:    620px;
  --w-narrow:  460px;
  --w-half:    50%;
  --w-full:    100%;
  --w-mark:    54px;
  --w-mark-sm: 42px;
  --w-dot:     6px;
  --w-lotus:   10px;
  --w-rule:    56px;

  --fb-nav-col:   220px;
  --fb-foot-col:  220px;
  --fb-foot-brand:280px;
  --fb-half:      360px;
  --fb-hero-body: 380px;
  --fb-hero-media:340px;
  --fb-banner:    420px;
  --fb-card:      260px;
  --fb-card-wide: 300px;
  --fb-svc-media: 300px;
  --fb-svc-body:  380px;
  --fb-step:      220px;
  --fb-cert:      260px;
  --fb-field:     200px;
  --fb-cta-body:  380px;
  --fb-fill:      100%;

  --fs-hero-md: 44px;
  --fs-hero-sm: 34px;
  --fs-h1-md:   36px;
  --fs-h1-sm:   29px;
  --fs-h2-md:   28px;
  --fs-h2-sm:   24px;
  --fs-h3-md:   20px;
  --fs-h3-sm:   19px;
  --fs-lead-md: 18px;
  --fs-body-md: 16px;
  --fs-figure-sm: 30px;
  --h-nav-md: 74px;
  --h-nav-sm: 66px;

  --h-nav:     86px;
  --h-hero:    620px;
  --h-field:   50px;
  --h-area:    132px;
  --h-btn:     52px;
  --h-btn-sm:  42px;
  --h-tap:     44px;
  --h-lang:    34px;
  --h-line:    1px;

  --ar-poster: 4 / 5;
  --ar-cert:   4 / 3;
  --ar-square: 1 / 1;
  --ar-wide:   16 / 10;

  --blur-nav: 10px;
  --dur:   .22s;
  --ease:  cubic-bezier(.4, 0, .2, 1);

  --shadow-card: 0 var(--s-1) var(--s-5) var(--c-shadow);
  --shadow-lift: 0 var(--s-3) var(--s-7) var(--c-shadow-deep);
}

/* ==========================================================================
   base
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: var(--s-0); padding: var(--s-0); }

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: var(--w-full); }

figure, figcaption, form, fieldset, .form-mock { margin: var(--s-0); padding: var(--s-0); border: none; }

a { color: var(--c-rose); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-ink); }

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

/* ==========================================================================
   site shell + responsive token overrides
   ========================================================================== */

.site {
  display: flex;
  flex-direction: column;
  min-height: var(--w-full);
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 1000px) {
  :root {
    --fs-hero: var(--fs-hero-md);
    --fs-h1:   var(--fs-h1-md);
    --fs-h2:   var(--fs-h2-md);
    --fs-h3:   var(--fs-h3-md);
    --fs-lead: var(--fs-lead-md);
    --fs-body: var(--fs-body-md);
    --h-hero:  auto;
    --h-nav:   var(--h-nav-md);
    --s-10:    var(--s-9);
    --s-9:     var(--s-8);
  }
}

@media (max-width: 560px) {
  :root {
    --fs-hero: var(--fs-hero-sm);
    --fs-h1:   var(--fs-h1-sm);
    --fs-h2:   var(--fs-h2-sm);
    --fs-h3:   var(--fs-h3-sm);
    --fs-lead: var(--fs-body-md);
    --fs-body: var(--fs-body-md);
    --fs-figure: var(--fs-figure-sm);
    --h-nav:   var(--h-nav-sm);
    --s-10:    var(--s-8);
    --s-9:     var(--s-7);
    --s-8:     var(--s-7);
  }
}

.main { display: flex; flex-direction: column; flex: 1 1 auto; }

/* ==========================================================================
   navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: var(--s-0);
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--c-veil);
  backdrop-filter: blur(var(--blur-nav));
  border-bottom: var(--bw) solid var(--c-line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: var(--w-full);
  max-width: var(--w-wrap);
  min-height: var(--h-nav);
  margin: var(--s-0) auto;
  padding: var(--s-0) var(--s-6);
}

.brand { display: flex; align-items: center; gap: var(--s-3); }

.brand-mark {
  width: var(--w-mark);
  height: var(--w-mark);
  border-radius: var(--r-full);
  object-fit: cover;
  flex: 0 0 auto;
}

.brand-words { display: flex; flex-direction: column; }

.brand-kanji {
  font-family: var(--f-body);
  font-size: var(--fs-kanji);
  line-height: var(--lh-nav);
  color: var(--c-ink);
}

.brand-name {
  font-family: var(--f-display);
  font-size: var(--fs-logo);
  font-style: italic;
  line-height: var(--lh-nav);
  color: var(--c-ink);
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: var(--s-6); }

.nav-link {
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  color: var(--c-ink-soft);
  padding: var(--s-2) var(--s-0);
  border-bottom: var(--bw-2) solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--c-ink); border-bottom-color: var(--c-rose-pale); }

.nav-link-on { color: var(--c-ink); border-bottom-color: var(--c-rose); }

.nav-side { display: flex; align-items: center; gap: var(--s-3); }

.lang { display: flex; align-items: center; gap: var(--s-1); }

.lang-btn {
  display: flex;
  text-decoration: none;
  cursor: pointer;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--h-lang);
  padding: var(--s-0) var(--s-3);
  border: var(--bw) solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  color: var(--c-ink-faint);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-btn:hover { background: var(--c-paper-deep); color: var(--c-ink); }

.lang-btn-on { border-color: var(--c-line); background: var(--c-card); color: var(--c-ink); }

.lang-flag { font-size: var(--fs-flag); line-height: var(--lh-nav); }

.lang-code { line-height: var(--lh-nav); }


.nav-tel {
  display: flex;
  align-items: center;
  height: var(--h-btn-sm);
  padding: var(--s-0) var(--s-5);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  color: var(--c-ink);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-tel:hover { background: var(--c-ink); color: var(--c-on-dark); }

/* mobile: links move to a deliberate second row instead of a hamburger */
.nav-row2 { display: none; }

@media (max-width: 1000px) {
  .nav-links { gap: var(--s-5); }
  .nav-inner { padding: var(--s-0) var(--s-5); gap: var(--s-4); }
  .brand-name { display: none; }
  .lang-code { display: none; }
  .lang-btn { padding: var(--s-0) var(--s-2); }
  .nav-side { gap: var(--s-2); }
}

@media (max-width: 560px) {
  .nav-links { display: none; }
  .nav-row2 {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-0) var(--s-4) var(--s-2);
    border-top: var(--bw) solid var(--c-line-soft);
  }
  .nav-row2 .nav-link {
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-none);
    padding-top: var(--s-3);
  }
  .brand-mark { width: var(--w-mark-sm); height: var(--w-mark-sm); }
  .brand-name { display: none; }
  .brand { min-height: var(--h-tap); }
  .lang-code { display: none; }
  .lang-btn { min-height: var(--h-tap); padding: var(--s-0) var(--s-2); }
  .nav-tel { height: auto; min-height: var(--h-tap); padding: var(--s-0) var(--s-4); font-size: var(--fs-micro); }
  .nav-side { gap: var(--s-2); }
}

/* ==========================================================================
   footer
   ========================================================================== */

.footer {
  background: var(--c-dark);
  color: var(--c-on-dark);
  padding: var(--s-9) var(--s-6) var(--s-6);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-0) auto;
}

.footer-col { display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 var(--fb-foot-col); }

.footer-brand { flex: 1 1 var(--fb-foot-brand); }

.footer-mark {
  width: var(--w-mark);
  height: var(--w-mark);
  border-radius: var(--r-full);
  object-fit: cover;
}

.footer-head {
  margin: var(--s-0);
  font-family: var(--f-body);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-on-dark-soft);
}

.footer-line { margin: var(--s-0); font-size: var(--fs-small); color: var(--c-on-dark); }

.footer-dim { color: var(--c-on-dark-soft); font-size: var(--fs-micro); }

.footer-list { display: flex; flex-direction: column; gap: var(--s-2); }

.footer-link { font-size: var(--fs-small); color: var(--c-on-dark); }
.footer-link:hover { color: var(--c-rose-pale); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-8) auto var(--s-0);
  padding-top: var(--s-5);
  border-top: var(--bw) solid var(--c-dark-2);
  font-size: var(--fs-micro);
  color: var(--c-on-dark-soft);
}

@media (max-width: 560px) {
  .footer { padding: var(--s-8) var(--s-4) var(--s-5); }
  .footer-inner { gap: var(--s-6); }
  .footer-link { display: flex; align-items: center; min-height: var(--h-tap); }
}

/* ==========================================================================
   layout primitives
   ========================================================================== */

.section { display: flex; flex-direction: column; padding: var(--s-10) var(--s-6); }

.section-tight { padding: var(--s-9) var(--s-6); }

.section-paper { background: var(--c-paper-deep); }

.section-dark { background: var(--c-dark); color: var(--c-on-dark); }

.wrap {
  display: flex;
  flex-direction: column;
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-0) auto;
}

.wrap-text { max-width: var(--w-text); }

.stack   { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-s { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-l { display: flex; flex-direction: column; gap: var(--s-7); }

.row { display: flex; flex-wrap: wrap; gap: var(--s-6); }

.split { display: flex; flex-wrap: wrap; gap: var(--s-9); align-items: center; }
.split-half { flex: 1 1 var(--fb-half); min-width: var(--s-0); }

.divider {
  width: var(--w-rule);
  height: var(--h-line);
  background: var(--c-line);
  border: none;
  margin: var(--s-0);
}

.lotus {
  width: var(--w-lotus);
  height: var(--w-lotus);
  border-radius: var(--r-full);
  background: var(--c-rose-pale);
  flex: 0 0 auto;
}

/* ==========================================================================
   type
   ========================================================================== */

.kicker {
  margin: var(--s-0);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-rose);
}

.kicker-dark { color: var(--c-on-dark-soft); }

.title-hero {
  margin: var(--s-0);
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
  text-wrap: pretty;
}

.title-h1 {
  margin: var(--s-0);
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-head);
  color: var(--c-ink);
  text-wrap: pretty;
}

.title-h2 {
  margin: var(--s-0);
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-book);
  line-height: var(--lh-head);
  color: var(--c-ink);
  text-wrap: pretty;
}

.title-h3 {
  margin: var(--s-0);
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-head);
  color: var(--c-ink);
}

.title-light { color: var(--c-on-dark); }

.lead {
  margin: var(--s-0);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: var(--w-text);
  text-wrap: pretty;
}

.text {
  margin: var(--s-0);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.text-light { color: var(--c-on-dark-soft); }

.text-small { font-size: var(--fs-small); }

.quote {
  margin: var(--s-0);
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: var(--lh-head);
  color: var(--c-ink);
  text-wrap: pretty;
}

.quote-light { color: var(--c-on-dark); }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn,
.btn-row .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-btn);
  padding: var(--s-0) var(--s-7);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-nav);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

a.btn-primary, .btn-primary .wp-block-button__link { background: var(--c-ink); color: var(--c-on-dark); border: var(--bw) solid var(--c-ink); }
a.btn-primary:hover, .btn-primary .wp-block-button__link:hover { background: var(--c-rose); border-color: var(--c-rose); color: var(--c-on-dark); }

a.btn-ghost, .btn-ghost .wp-block-button__link { background: transparent; color: var(--c-ink); border: var(--bw) solid var(--c-ink); }
a.btn-ghost:hover, .btn-ghost .wp-block-button__link:hover { background: var(--c-ink); color: var(--c-on-dark); }

a.btn-light, .btn-light .wp-block-button__link { background: var(--c-on-dark); color: var(--c-ink); border: var(--bw) solid var(--c-on-dark); }
a.btn-light:hover, .btn-light .wp-block-button__link:hover { background: transparent; color: var(--c-on-dark); }

a.btn-outline-light, .btn-outline-light .wp-block-button__link { background: transparent; color: var(--c-on-dark); border: var(--bw) solid var(--c-on-dark-soft); }
a.btn-outline-light:hover, .btn-outline-light .wp-block-button__link:hover { background: var(--c-on-dark); color: var(--c-ink); }

/* ==========================================================================
   hero
   ========================================================================== */

.hero { display: flex; flex-direction: column; background: var(--c-paper); }

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-9);
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-0) auto;
  padding: var(--s-10) var(--s-6);
}

.hero-body { display: flex; flex-direction: column; gap: var(--s-5); flex: 1 1 var(--fb-hero-body); min-width: var(--s-0); }

.hero-media { display: flex; flex: 1 1 var(--fb-hero-media); min-width: var(--s-0); }

.hero-img img {
  width: var(--w-full);
  aspect-ratio: var(--ar-poster);
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 1000px) {
  .hero-inner { padding: var(--s-9) var(--s-5); gap: var(--s-7); }
  .section { padding: var(--s-10) var(--s-5); }
  .split { gap: var(--s-7); }
}

@media (max-width: 560px) {
  .hero-inner { flex-direction: column-reverse; gap: var(--s-6); padding: var(--s-7) var(--s-4) var(--s-8); }
  .hero-media { flex: 0 0 auto; width: var(--w-full); }
  .section { padding: var(--s-9) var(--s-4); }
  .section-tight { padding: var(--s-8) var(--s-4); }
  .split { gap: var(--s-6); }
}

/* ==========================================================================
   page banner (inner pages)
   ========================================================================== */

.banner {
  display: flex;
  flex-direction: column;
  background: var(--c-paper-deep);
  border-bottom: var(--bw) solid var(--c-line);
}

.banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-0) auto;
  padding: var(--s-9) var(--s-6) var(--s-8);
}

.banner-body { display: flex; flex-direction: column; gap: var(--s-4); flex: 1 1 var(--fb-banner); min-width: var(--s-0); }

.banner-figure { display: flex; flex-direction: column; gap: var(--s-1); flex: 0 0 auto; }

.banner-figure-num {
  font-family: var(--f-display);
  font-size: var(--fs-figure);
  font-weight: var(--fw-light);
  line-height: var(--lh-nav);
  color: var(--c-rose);
}

.banner-figure-cap {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

@media (max-width: 560px) {
  .banner-inner { padding: var(--s-7) var(--s-4) var(--s-6); }
}

/* ==========================================================================
   service cards
   ========================================================================== */

.cards { display: flex; flex-wrap: wrap; gap: var(--s-6); }

.card-service {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--fb-card);
  min-width: var(--s-0);
  background: var(--c-card);
  border: var(--bw) solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-service:hover { box-shadow: var(--shadow-card); transform: translateY(calc(var(--s-1) * -1)); }

.card-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); flex: 1 1 auto; }

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--c-line-soft);
}

.card-price { font-size: var(--fs-price); color: var(--c-ink); }

.card-link { font-size: var(--fs-small); color: var(--c-rose); }

@media (max-width: 1000px) { .card-service { flex: 1 1 var(--fb-card-wide); } }
@media (max-width: 560px)  { .cards { gap: var(--s-5); } .card-service { flex: 1 1 var(--fb-fill); } }

/* ==========================================================================
   service detail rows (Services page)
   ========================================================================== */

.svc { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }

.svc-alt { flex-direction: row-reverse; }

.svc-media { flex: 1 1 var(--fb-svc-media); min-width: var(--s-0); }

.svc-img img {
  width: var(--w-full);
  aspect-ratio: var(--ar-poster);
  object-fit: cover;
  border-radius: var(--r-md);
}

.svc-img-mark img {
  object-fit: contain;
  padding: var(--s-6);
  background: var(--c-card);
  border: var(--bw) solid var(--c-line-soft);
}

.svc-body { display: flex; flex-direction: column; gap: var(--s-4); flex: 1 1 var(--fb-svc-body); min-width: var(--s-0); }

.svc-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.tag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  color: var(--c-ink-soft);
}

.dot {
  width: var(--w-dot);
  height: var(--w-dot);
  border-radius: var(--r-full);
  background: var(--c-sage);
  flex: 0 0 auto;
}

.dot-rose { background: var(--c-rose); }

@media (max-width: 560px) {
  .svc, .svc-alt { flex-direction: column; gap: var(--s-5); }
  .svc-media { width: var(--w-full); }
}

/* ==========================================================================
   pricelist
   ========================================================================== */

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8);
  background: var(--c-card);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}

.price-list { display: flex; flex-direction: column; gap: var(--s-4); }

.price-row { display: flex; align-items: baseline; gap: var(--s-3); }

.price-name { font-size: var(--fs-price); color: var(--c-ink); flex: 0 1 auto; }

.price-dur { font-size: var(--fs-small); color: var(--c-ink-faint); flex: 0 0 auto; }

.price-rule {
  flex: 1 1 auto;
  min-width: var(--s-5);
  height: var(--h-line);
  border-bottom: var(--bw) dashed var(--c-line);
}

.price-value { font-size: var(--fs-price); color: var(--c-ink); flex: 0 0 auto; }

.price-group { display: flex; flex-direction: column; gap: var(--s-4); }

.price-note { font-size: var(--fs-small); color: var(--c-ink-faint); margin: var(--s-0); }

@media (max-width: 560px) {
  .price-card { padding: var(--s-5); }
  .price-row { flex-wrap: wrap; }
  .price-name { flex: 1 1 100%; }
}

/* ==========================================================================
   steps (first visit)
   ========================================================================== */

.steps { display: flex; flex-wrap: wrap; gap: var(--s-6); }

.step { display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 var(--fb-step); min-width: var(--s-0); }

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w-mark-sm);
  height: var(--w-mark-sm);
  border: var(--bw) solid var(--c-rose-pale);
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-size: var(--fs-numeral);
  color: var(--c-rose);
  flex: 0 0 auto;
}

@media (max-width: 560px) { .step { flex: 1 1 var(--fb-fill); } .steps { gap: var(--s-5); } }

/* ==========================================================================
   certificates
   ========================================================================== */

.certs { display: flex; flex-wrap: wrap; gap: var(--s-5); }

.cert { display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 var(--fb-cert); min-width: var(--s-0); }

.cert-frame {
  display: flex;
  overflow: hidden;
  background: var(--c-card);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-2);
}

.cert-img img { width: var(--w-full); aspect-ratio: var(--ar-cert); object-fit: cover; }


.cert-name { font-size: var(--fs-small); color: var(--c-ink); margin: var(--s-0); }

.cert-meta { font-size: var(--fs-micro); color: var(--c-ink-faint); margin: var(--s-0); }

@media (max-width: 560px) { .cert { flex: 1 1 var(--fb-fill); } }

@media (max-width: 560px) {
  .card-link { display: flex; align-items: center; min-height: var(--h-tap); }
}

/* ==========================================================================
   info rows (Contact)
   ========================================================================== */

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--c-card);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}

.info-list { display: flex; flex-direction: column; gap: var(--s-5); }

.info-row { display: flex; flex-direction: column; gap: var(--s-1); }

.info-key {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.info-val { font-size: var(--fs-lead); color: var(--c-ink); }

.info-sub { font-size: var(--fs-small); color: var(--c-ink-soft); }

.hours { display: flex; flex-direction: column; gap: var(--s-2); }

.hours-row { display: flex; align-items: baseline; gap: var(--s-3); }

.hours-day { font-size: var(--fs-small); color: var(--c-ink-soft); flex: 0 0 auto; }

.hours-time { font-size: var(--fs-small); color: var(--c-ink); flex: 0 0 auto; }

/* ==========================================================================
   contact form - visual mockup only, no submission logic
   ========================================================================== */

.form-mock {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--c-paper-deep);
  border: var(--bw) dashed var(--c-line);
  border-radius: var(--r-md);
}

.mock-flag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-1) var(--s-4);
  background: var(--c-rose-pale);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-ink);
}

.field-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.field { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 var(--fb-field); min-width: var(--s-0); }

.field-full { flex: 1 1 var(--fb-fill); }

.field-label { font-size: var(--fs-micro); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--c-ink-faint); }

.field-box {
  display: flex;
  align-items: center;
  height: var(--h-field);
  padding: var(--s-0) var(--s-4);
  background: var(--c-field);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--c-ink-faint);
}

.field-box-area { height: var(--h-area); align-items: flex-start; padding: var(--s-4); }

.field-box-select { justify-content: space-between; color: var(--c-ink-soft); }

.field-caret {
  width: var(--w-dot);
  height: var(--w-dot);
  border-right: var(--bw) solid var(--c-ink-faint);
  border-bottom: var(--bw) solid var(--c-ink-faint);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.field-check { display: flex; align-items: flex-start; gap: var(--s-3); }

.check-box {
  width: var(--s-4);
  height: var(--s-4);
  margin-top: var(--s-1);
  background: var(--c-field);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}

.btn-mock {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--h-btn);
  padding: var(--s-0) var(--s-7);
  background: var(--c-ink);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-nav);
  color: var(--c-on-dark);
}

@media (max-width: 560px) {
  .form-mock { padding: var(--s-5); }
  .info-card { padding: var(--s-5); }
  .info-val a { display: flex; align-items: center; min-height: var(--h-tap); }
  .field { flex: 1 1 var(--fb-fill); }
  .btn-mock, .btn { align-self: stretch; }
  .btn-row { flex-direction: column; flex: 1 1 var(--fb-fill); width: var(--w-full); }
  .banner-figure { flex: 1 1 var(--fb-fill); width: var(--w-full); }
}

/* ==========================================================================
   call to action band
   ========================================================================== */

.cta {
  display: flex;
  flex-direction: column;
  background: var(--c-dark);
  color: var(--c-on-dark);
  padding: var(--s-9) var(--s-6);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
  width: var(--w-full);
  max-width: var(--w-wrap);
  margin: var(--s-0) auto;
}

.cta-body { display: flex; flex-direction: column; gap: var(--s-4); flex: 1 1 var(--fb-cta-body); min-width: var(--s-0); }

@media (max-width: 560px) { .cta { padding: var(--s-8) var(--s-4); } }

/* ==========================================================================
   list with real bullet elements (no pseudo-elements anywhere)
   ========================================================================== */

.list { display: flex; flex-direction: column; gap: var(--s-3); }

.list-item { display: flex; align-items: flex-start; gap: var(--s-3); }

.list-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); margin: var(--s-0); }

.list-bullet {
  width: var(--w-dot);
  height: var(--w-dot);
  margin-top: var(--s-3);
  border-radius: var(--r-full);
  background: var(--c-rose);
  flex: 0 0 auto;
}