@charset "utf-8";
/* =========================================================================
   株式会社Wolf — wolf.css
   This file is assembled by _build/build.py from _build/css/*.css — edit the parts.

   Design : white page, ink type, one gold accent. A single ripple motif ties
            the page to the tagline "Make Ripples. Deliver Results."
   Palette: paper #FFFFFF / mist #F6F6F3 / ink #111214
            gold #C8A55B (fills) / gold-ink #7E6224 (text, 5.7:1 on white)
   Type   : the platform's own Japanese sans (Hiragino Sans, Yu Gothic, Noto);
            Latin and figures from the system UI face. No web fonts.
   Motion : springs, critically damped (damping 1.0), response 0.24 / 0.34 / 0.50 s.
            Everything a pointer can touch responds on press, not on release,
            and can be reversed mid-flight (plain CSS transitions retarget from
            the current value).
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* surfaces and ink */
  --paper:  #FFFFFF;
  --mist:   #F6F6F3;
  --mist-2: #EEEEE9;
  --ink:    #111214;
  --ink-2:  #26282C;
  --text:   #3B3E43;
  --mute:   #686D74;

  /* the one accent */
  --gold:       #C8A55B;
  --gold-hi:    #E3CC8F;
  --gold-ink:   #7E6224;
  --gold-wash:  #FBF7EA;
  --gold-soft:  #F2E8CB;

  --hair:      rgba(17, 18, 20, .10);
  --hair-2:    rgba(17, 18, 20, .06);
  --hair-gold: rgba(168, 134, 58, .40);

  --shadow-1: 0 1px 2px rgba(17, 18, 20, .04), 0 4px 16px rgba(17, 18, 20, .05);
  --shadow-2: 0 2px 4px rgba(17, 18, 20, .04), 0 14px 40px rgba(17, 18, 20, .11);
  --shadow-3: 0 4px 8px rgba(17, 18, 20, .05), 0 28px 70px rgba(17, 18, 20, .16);

  --r-btn:  10px;
  --r-card: 20px;
  --r-panel: 28px;

  --font-jp:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic",
               "Noto Sans JP", Meiryo, sans-serif;
  --font-body: var(--font-jp);
  --font-en:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto,
               "Hiragino Sans", Arial, sans-serif;

  /* fluid type — display sizes get tighter leading and tracking, body stays open */
  --t-hero:  clamp(2.375rem, 1.3rem + 4.5vw, 4.5rem);
  --t-d1:    clamp(1.625rem, 1.15rem + 1.95vw, 2.5rem);
  --t-d2:    clamp(1.3125rem, 1.05rem + 1.05vw, 1.75rem);
  --t-d3:    clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .75rem;

  --gut:       clamp(1.25rem, 4vw, 3rem);
  --content-w: 1200px;
  --sec-y:     clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --hdr-h:     64px;

  /* one spring curve (critically damped); durations carry the response */
  --spring: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 340ms;
  --t:      480ms;
  --t-slow: 700ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0354, 0.1175, 0.2201, 0.3275, 0.4308, 0.5249, 0.608, 0.6796, 0.74, 0.7905,
      0.8321, 0.8661, 0.8936, 0.9158, 0.9336, 0.9478, 0.9591, 0.968, 0.975, 0.9805, 0.9848, 0.9882,
      0.9909, 0.9929, 0.9945, 0.9958, 0.9967, 0.9975, 0.9981, 1);
  }
}

/* ---------- 2. reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(200, 165, 91, .34); color: var(--ink); }

/* thin gold line at the very top of the viewport: reading progress, driven by scroll only */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 950;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-ink), var(--gold) 55%, var(--gold-hi));
  pointer-events: none;
}

.skip {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 1000;
  padding: .75em 1.5em;
  border-radius: 0 0 var(--r-btn) var(--r-btn);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 700;
  transition: top var(--t-fast) var(--spring);
}
.skip:focus { top: 0; }

/* ---------- 3. layout primitives ---------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gut), var(--content-w));
  margin-inline: auto;
}

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--mist { background: var(--mist); }

/* a hairline between movements of a page, held inside the content column */
.rule {
  width: min(100% - 2 * var(--gut), var(--content-w));
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: var(--hair);
}
.rule--gold { background: var(--hair-gold); }

/* label on the left, content on the right — the editorial two-column used by sub pages and the FAQ/news blocks */
.split {
  display: grid;
  grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 1.75rem; }
}
.rail { position: sticky; top: calc(var(--hdr-h) + 2.25rem); }
@media (max-width: 900px) { .rail { position: static; } }
.rail-note {
  font-size: var(--t-small);
  line-height: 2;
  color: var(--mute);
  max-width: 16em;
}
.rail-title {
  font-size: var(--t-d2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink);
}

/* centred section header: Japanese title, small English caption under it */
.sec-head { text-align: center; margin-inline: auto; max-width: 46rem; }
.sec-head .eyebrow::before { display: none; }
.sec-en {
  display: block;
  margin-top: .7rem;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mute);
}
.sec-lede {
  margin: 1.5rem auto 0;
  max-width: 40em;
  color: var(--text);
  text-wrap: pretty;
}

/* ---------- 4. type ----------------------------------------------------- */
/* label in small Latin caps; a short gold dash marks the start of a section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  margin-bottom: 1rem;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
}
.rail .eyebrow { margin-bottom: 1.1rem; }

.h-display, .h-2, .h-3, .h-4, .page-title, .cta-h {
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: "palt";
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}
.h-display { font-size: var(--t-d1); line-height: 1.38; letter-spacing: .005em; }
.h-2       { font-size: var(--t-d2); line-height: 1.45; letter-spacing: .01em; }
.h-3       { font-size: var(--t-d3); line-height: 1.6;  letter-spacing: .015em; }
.h-4       { font-size: 1.0625rem;   line-height: 1.7;  letter-spacing: .02em; }

.lede {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 2;
  color: var(--text);
  max-width: 38em;
  text-wrap: pretty;
}
.prose { max-width: 40em; text-wrap: pretty; }
.prose p + p { margin-top: 1.5em; }
.prose strong { color: var(--ink); font-weight: 700; }

.dim { color: var(--mute); }
.note {
  font-size: var(--t-micro);
  line-height: 2;
  color: var(--mute);
  letter-spacing: .03em;
  max-width: 54em;
}

.gold { color: var(--gold-ink); }
.kicker {
  font-family: var(--font-en);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* Japanese labels need the body face and normal tracking */
.kicker--jp {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--ink);
}

/* inline links in running text */
a.gold, .prose a, .note a, .faq-a a, table.plans a, .callout a, .legal-art a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  transition: text-decoration-color var(--t-fast) var(--spring), color var(--t-fast) var(--spring);
}
a.gold:hover, .prose a:hover, .note a:hover, .faq-a a:hover, table.plans a:hover, .callout a:hover, .legal-art a:hover {
  text-decoration-color: var(--gold-ink);
  color: var(--gold-ink);
}

/* ---------- 5. utilities ------------------------------------------------- */
.stack    { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.stack-sm { display: grid; gap: 1rem; align-content: start; }
.stack-lg { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-content: start; }
.row      { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.mt-sm { margin-top: .85rem; }
.mt-md { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hr-space { height: clamp(2.5rem, 5vw, 4.5rem); }
.arw { display: inline-block; line-height: 1; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.body-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* figures carry meaning: lining, tabular, so "10" never reads as "IO" */
.stat-fig, .metric dd, .metric .was, .price, .mail-addr, .timeline .when, .news-item .d,
.svc-no, .brand-mark, .olist > li::before, .step::before, .toc li::before,
.hero-meta, table.plans .fee, .crumbs, .tier .amt, .sum-fig .n, .plan-price {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- 6. buttons and links ---------------------------------------- */
/* feedback starts on press (80 ms), not on release */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .8em 1.7em;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  position: relative;
  transition: background-color var(--t-fast) var(--spring), color var(--t-fast) var(--spring),
              border-color var(--t-fast) var(--spring), box-shadow var(--t) var(--spring),
              transform var(--t-fast) var(--spring);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.btn .arw { transition: transform var(--t) var(--spring); }
.btn:hover .arw { transform: translateX(3px); }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  box-shadow: 0 8px 22px rgba(17, 18, 20, .24);
  transform: translateY(-1px);
}
.btn--solid:active { transform: scale(.97); box-shadow: none; }

.btn--ghost { border-color: rgba(17, 18, 20, .22); }
.btn--ghost:hover { background: var(--mist); color: var(--ink); border-color: rgba(17, 18, 20, .4); }

.btn--sm { min-height: 2.5rem; padding: .5em 1.25em; font-size: .8125rem; }

/* a full-width quiet button, e.g. "show more" under a list */
.btn--block { display: flex; width: 100%; border-color: transparent; background: var(--mist); }
.btn--block:hover { background: var(--ink); border-color: var(--ink); }

/* text link: ink, gold rule that thickens on hover, arrow that leans forward */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-block: .3em;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size var(--t-fast) var(--spring), color var(--t-fast) var(--spring);
}
.tlink:hover { background-size: 100% 3px; color: var(--ink); }
.tlink .arw { transition: transform var(--t) var(--spring); }
.tlink:hover .arw { transform: translateX(4px); }
.deflist a.tlink, .prose a.tlink { text-decoration: none; }

.mailto {
  font-family: var(--font-en);
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: .15em;
  transition: background-size var(--t-fast) var(--spring);
  word-break: break-all;
}
.mailto:hover { background-size: 100% 3px; }

/* generated once: concentric gold ellipses, the ripple motif (see 00-base.css header) */
:root {
  --ripples: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 560%22 width=%221600%22 height=%22560%22%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22112.0%22 ry=%2230.2%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.495%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22213.4%22 ry=%2257.6%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.412%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22311.1%22 ry=%2284.0%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.336%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22406.6%22 ry=%22109.8%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.269%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22500.3%22 ry=%22135.1%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.209%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22592.8%22 ry=%22160.1%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.158%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22684.2%22 ry=%22184.7%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.116%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22774.6%22 ry=%22209.1%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.082%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22864.3%22 ry=%22233.4%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.057%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22953.3%22 ry=%22257.4%22 fill=%22none%22 stroke=%22%23B08F45%22 stroke-opacity=%220.041%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
}

/* ---------- 7. header / nav ---------------------------------------------- */
/* a translucent layer over the page: content scrolls beneath it, and the hairline
   appears only once something is actually underneath */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--t) var(--spring);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--hair); }

.header-inner {
  width: min(100% - 2 * var(--gut), var(--content-w));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  border-radius: 10px;
}
.brand-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  transition: transform var(--t) var(--spring);
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); }
.brand-mark {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--ink);
}
.brand-sub {
  align-self: flex-end;
  padding-bottom: .1rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--mute);
}
@media (max-width: 560px) { .brand-sub { display: none; } }
.site-footer .brand-logo { width: 40px; height: 40px; border-radius: 10px; }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }
@media (max-width: 1060px) { .nav { display: none; } }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: .55em;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--spring);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1em;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t) var(--spring);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-group > .nav-link::before {
  content: "";
  order: 2;
  width: .38em;
  height: .38em;
  margin: -.12em 0 0 .5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform var(--t) var(--spring);
}
.nav-group:hover > .nav-link::before,
.nav-group:focus-within > .nav-link::before { transform: rotate(225deg) translate(-.05em, -.05em); }

/* dropdown: opens from its trigger, closes back into it */
.nav-group { position: relative; }
.nav-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  min-width: 15.5rem;
  padding: .5rem;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.8) blur(24px);
  backdrop-filter: saturate(1.8) blur(24px);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity var(--t-fast) var(--spring), transform var(--t) var(--spring),
              visibility 0s linear var(--t);
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
.nav-panel a {
  display: block;
  padding: .65rem .95rem;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-2);
  transition: background-color var(--t-fast) var(--spring), color var(--t-fast) var(--spring);
}
.nav-panel a:hover { background: var(--mist); color: var(--ink); }
.nav-panel a:active { background: var(--mist-2); }

.header-cta { flex: none; }
@media (max-width: 1060px) { .header-cta { display: none; } }

/* burger: two lines that cross into an X; 44 px hit area */
.burger {
  display: none;
  position: relative;
  z-index: 1001;
  width: 44px;
  height: 44px;
  flex: none;
  margin-right: -10px;
  border-radius: 12px;
}
@media (max-width: 1060px) { .burger { display: block; } }
.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t) var(--spring), top var(--t) var(--spring);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.burger:active span { transition-duration: 80ms; }

/* ---------- 8. mobile menu ---------------------------------------------- */
/* a sheet that unfolds from the burger and returns to it; the header stays on top of it */
.menu {
  position: fixed;
  inset: 0;
  z-index: 790;
  padding: calc(var(--hdr-h) + 1rem) var(--gut) 3rem;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: saturate(1.8) blur(28px);
  backdrop-filter: saturate(1.8) blur(28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.985);
  transform-origin: 100% 0;
  transition: opacity var(--t-fast) var(--spring), transform var(--t) var(--spring),
              visibility 0s linear var(--t);
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 1061px) { .menu { display: none; } }

.menu-grid {
  width: min(100%, 38rem);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}
.menu-col h3 {
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.menu-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding-block: .4rem;
  border-bottom: 1px solid var(--hair-2);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s linear, transform .15s linear, background-color var(--t-fast) var(--spring);
}
.menu-col a::after { content: "→"; font-weight: 400; color: var(--mute); }
.menu-col a:active { background: var(--mist); }
.menu.is-open .menu-col a {
  opacity: 1;
  transform: none;
  transition: opacity var(--t) var(--spring) calc(var(--i, 0) * 28ms + 50ms),
              transform var(--t) var(--spring) calc(var(--i, 0) * 28ms + 50ms),
              background-color var(--t-fast) var(--spring);
}
.menu-foot {
  width: min(100%, 38rem);
  margin: 2.25rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 9. closing call to action (every page) ----------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 2.4rem + 6.6vw, 7.5rem);
  background: var(--gold-wash);
  text-align: center;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ripples) 50% 100% / min(1500px, 150%) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  pointer-events: none;
}
.cta .eyebrow { justify-content: center; }
.cta .eyebrow::before { display: none; }
.cta-h {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.38;
  letter-spacing: .01em;
}
.cta .lede { margin-inline: auto; max-width: 34em; }
.cta-actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: center;
}
.cta .btn--solid { min-height: 3.5rem; padding-inline: 2.2rem; font-size: 1rem; }

/* ---------- 10. footer --------------------------------------------------- */
.site-footer {
  background: var(--mist);
  border-top: 1px solid var(--hair);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } }
.footer-about p {
  margin-top: 1.15rem;
  font-size: .8125rem;
  line-height: 2;
  color: var(--mute);
  max-width: 30em;
  text-wrap: pretty;
}
.footer-about p + p { margin-top: .8rem; }
.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-col h3 {
  margin-bottom: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}
.footer-col li + li { margin-top: .6rem; }
.footer-col a {
  font-size: .875rem;
  letter-spacing: .03em;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
  transition: color var(--t-fast) var(--spring), text-decoration-color var(--t-fast) var(--spring);
}
.footer-col a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--mute);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-bottom a { transition: color var(--t-fast) var(--spring); }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- 11. hero ------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: calc(var(--hdr-h) + clamp(3.25rem, 2rem + 6vw, 6.5rem)) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 52%, var(--mist) 100%);
}
/* a warm glow under the rings: static, so the canvas only has to draw lines */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(62% 40% at 50% 66%, rgba(200, 165, 91, .13), rgba(200, 165, 91, .04) 55%, transparent 78%);
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-chip { display: inline-flex; margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem); }
.hero-chip span {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .5em 1.2em;
  border: 1px solid var(--hair-gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-ink);
}
.hero-chip span::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 .22rem rgba(200, 165, 91, .24);
}

.hero-h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  font-feature-settings: "palt";
  text-wrap: balance;
  word-break: auto-phrase;
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #7E6224 0%, #B8963F 48%, #7E6224 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  margin: clamp(1.25rem, 2.5vw, 1.9rem) auto 0;
  max-width: 37em;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 2;
  color: var(--text);
  text-wrap: pretty;
}
.hero-actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.hero-actions .btn { min-height: 3.5rem; padding-inline: 2rem; font-size: 1rem; }

.hero-meta {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 2.25rem;
  font-size: .8125rem;
  color: var(--mute);
}
.hero-meta > div { display: flex; gap: .7em; align-items: baseline; }
.hero-meta dt {
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.hero-meta dd { color: var(--ink-2); font-weight: 500; }

.hero-figs { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.hero-figs .note { text-align: center; margin: 1rem auto 0; }

/* a section header with a link on its right (column block) */
.sec-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }

/* ---------- 12. key figures ----------------------------------------------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  text-align: left;
}
.stat {
  flex: 1 1 10.5rem;
  min-width: 0;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.1rem, 2vw, 1.75rem);
  box-shadow: -1px 0 0 var(--hair-2), 0 -1px 0 var(--hair-2);
}
.stat-fig {
  display: flex;
  align-items: baseline;
  gap: .08em;
  font-family: var(--font-en);
  font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.stat-fig .u {
  font-family: var(--font-body);
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold-ink);
}
.stat-label {
  margin-top: .8rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.stat-desc {
  margin-top: .35rem;
  font-size: var(--t-micro);
  line-height: 1.85;
  color: var(--mute);
}

/* ---------- 13. problem ---------------------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-1);
}
.panel-label {
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.panel-title {
  margin-top: .5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-d2);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

/* a ringed check, drawn inline so it needs no request */
.checks { margin-top: 1.25rem; display: grid; gap: .95rem; }
.checks li {
  position: relative;
  padding-left: 2.15rem;
  line-height: 1.85;
  font-weight: 500;
  color: var(--ink-2);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 1.35rem;
  height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23111214'/%3E%3Cpath d='M6.2 11.4l3.1 3.1 6.5-6.7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bridge { margin: clamp(2.25rem, 4vw, 3.5rem) auto 0; max-width: 46rem; text-align: center; }
.bridge::before {
  content: "";
  display: block;
  width: 2px;
  height: 3rem;
  margin: 0 auto 1.5rem;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold));
}
.bridge p {
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.95;
  color: var(--ink);
  text-wrap: balance;
  word-break: auto-phrase;
}
.bridge em { font-style: normal; color: var(--gold-ink); }

/* ---------- 14. reasons ---------------------------------------------------- */
.reasons {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6.5rem);
  margin-top: clamp(2.75rem, 5vw, 4.75rem);
}
.reason {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: center;
}
.reason:nth-child(even) .reason-media { order: -1; }
@media (max-width: 860px) {
  .reason { grid-template-columns: 1fr; }
  .reason:nth-child(even) .reason-media { order: 0; }
}
.reason-no { display: flex; align-items: baseline; gap: .9rem; }
.reason-no b {
  font-family: var(--font-en);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  font-variant-numeric: lining-nums;
}
.reason-no span {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.reason-h {
  margin-top: .9rem;
  font-size: var(--t-d2);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
  word-break: auto-phrase;
}
.reason-text > p { margin-top: 1rem; text-wrap: pretty; }
.dots { margin-top: 1.25rem; display: grid; gap: .6rem; }
.dots li { position: relative; padding-left: 1.4rem; font-weight: 500; color: var(--ink-2); }
.dots li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .85em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--gold);
}

.reason-media { position: relative; isolation: isolate; }
.reason-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% -3.5% -7% 7%;
  border-radius: 34px;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold-wash));
}
.reason:nth-child(even) .reason-media::before { inset: 7% 7% -7% -3.5%; }
.reason-media .duo { aspect-ratio: 4 / 3; border-radius: var(--r-panel); box-shadow: var(--shadow-2); }
.reason-media figcaption { margin-top: 1.1rem; font-size: .8125rem; color: var(--mute); }

/* the one dark card on the light page: the lead database as a single figure over the ripples */
.datacard {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  gap: .6rem;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.datacard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ripples) 50% 135% / 170% auto no-repeat;
  opacity: 1;
}
.datacard > * { position: relative; }
.datacard-k {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.datacard-fig {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .06em;
  font-family: var(--font-en);
  font-size: clamp(3.25rem, 2rem + 5vw, 5.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.datacard-fig .u { color: var(--gold); }
.datacard-chips { display: flex; gap: .5rem; justify-content: center; }
.datacard-chips span {
  padding: .3em 1em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.datacard-cap { font-size: .8125rem; color: rgba(255, 255, 255, .72); }

/* the "POINT" note: one line that says what the three add up to */
.point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: var(--gold-wash);
}
.point b {
  flex: none;
  margin-top: .2em;
  padding: .3em .9em;
  border-radius: 999px;
  background: var(--gold-ink);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.point p { font-weight: 700; color: var(--ink); line-height: 1.85; text-wrap: pretty; }
.point--wide {
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 50rem;
  align-items: center;
  justify-content: center;
  padding: 1.35rem 1.75rem;
  border-radius: 20px;
  border: 1px solid var(--hair-gold);
}
.point--wide p { font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); }
@media (max-width: 560px) { .point--wide { flex-direction: column; align-items: flex-start; } }

/* ---------- 15. services ---------------------------------------------------- */
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .svc-list { grid-template-columns: 1fr; } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring),
              border-color var(--t) var(--spring);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.svc:active { transform: translateY(-1px) scale(.996); transition-duration: 90ms; }
.svc-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist-2); }
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--spring);
}
.svc:hover .svc-media img { transform: scale(1.045); }
.svc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.svc-no {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold-ink);
}
.svc-name {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.svc-en {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.svc-desc { font-size: .9375rem; line-height: 1.95; color: var(--text); text-wrap: pretty; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; max-width: calc(100% - 3.5rem); }
.tag {
  padding: .3em .9em;
  border-radius: 999px;
  background: var(--mist);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: nowrap;
}
.svc-arw {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: background-color var(--t-fast) var(--spring), transform var(--t) var(--spring);
}
.svc:hover .svc-arw { background: var(--gold-ink); transform: translateX(3px); }
.svc-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-panel); }
.svc-link:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }

/* ---------- 16. media ------------------------------------------------------- */
.duo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--mist-2);
}
.duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--spring);
}
.duo:hover img, a:hover .duo img { transform: scale(1.035); }

/* ---------- 17. cases -------------------------------------------------------- */
.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
}
.case-tag {
  align-self: flex-start;
  padding: .4em 1em;
  border-radius: 999px;
  background: var(--gold-wash);
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.case h3 {
  font-size: clamp(1.15rem, 1rem + .65vw, 1.4rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
  word-break: auto-phrase;
}
.ba { display: grid; gap: .75rem; font-size: .9375rem; line-height: 1.9; }
.ba > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem; align-items: baseline; }
.ba dt {
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}
.ba dd.after { color: var(--ink); font-weight: 600; }
.metrics {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hair);
}
.metric dt { margin-bottom: .35rem; font-size: .75rem; font-weight: 600; color: var(--mute); }
.metric dd {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.metric dd .s { margin-left: .15em; font-size: .5em; font-weight: 700; letter-spacing: .02em; color: var(--gold-ink); }
.metric .was { margin-top: .3rem; font-size: .75rem; color: var(--mute); }
.case .tlink { align-self: flex-start; }

/* ---------- 18. photo strip --------------------------------------------------- */
.strip {
  display: flex;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-track { background: var(--hair-2); border-radius: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.strip figure { flex: 0 0 clamp(17rem, 32vw, 28rem); scroll-snap-align: start; }
.strip .duo { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
.strip figcaption {
  margin-top: .9rem;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--text);
}
.strip figcaption b {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-ink);
  white-space: nowrap;
}
@media (max-width: 1240px) {
  .strip { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
}

/* ---------- 19. pricing cards ---------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  align-items: stretch;
}
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
}
.plan--featured { border: 2px solid var(--ink); box-shadow: var(--shadow-2); }
.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .45em 1.15em;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}
.plan-for { font-size: .8125rem; color: var(--mute); }
.plan-name { font-size: var(--t-d3); font-weight: 700; line-height: 1.4; color: var(--ink); }
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em .4em;
  padding-block: .9rem;
  border-block: 1px solid var(--hair);
}
.plan-price .lead { font-size: .8125rem; font-weight: 600; color: var(--mute); }
.plan-price b {
  font-family: var(--font-en);
  font-size: clamp(2.25rem, 1.7rem + 1.7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.plan-price .unit { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.plan-price--text b { font-family: var(--font-jp); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4rem); line-height: 1.55; letter-spacing: .01em; }
.plan .checks { margin-top: 0; gap: .7rem; }
.plan .checks li { font-size: .9375rem; line-height: 1.8; }
.plan-terms { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--hair); font-size: .8125rem; }
.plan-terms > div { display: flex; justify-content: space-between; gap: 1rem; }
.plan-terms dt { color: var(--mute); }
.plan-terms dd { color: var(--ink); font-weight: 700; }

/* ---------- 20. message / portrait ------------------------------------------------ */
.message {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .message { grid-template-columns: 1fr; } }
.message--card {
  padding: clamp(1.25rem, 4vw, 3.25rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
}
.portrait { position: relative; }
.portrait .duo { aspect-ratio: 3 / 4; border-radius: 22px; }
.portrait-cap {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  padding: .65rem 1.05rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
}
.portrait-cap .n { font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.portrait-cap .r {
  margin-top: .1rem;
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.quote {
  position: relative;
  padding-top: clamp(1.75rem, 3.4vw, 2.5rem);
  font-size: clamp(1.25rem, 1rem + 1.25vw, 1.875rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: "palt";
  word-break: auto-phrase;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -.1em;
  left: -.05em;
  font-family: var(--font-en);
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--gold);
  opacity: .55;
}
.sig {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--mute);
}
.sig::before { content: ""; width: 2.5rem; height: 2px; border-radius: 2px; background: var(--gold); }

/* ---------- 21. definition list (company facts) ---------------------------------- */
.deflist { border-top: 1px solid var(--hair); }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) minmax(0, 1fr);
  gap: .4rem clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 640px) { .deflist > div { grid-template-columns: 1fr; } }
.deflist dt { font-size: .875rem; font-weight: 700; color: var(--ink); }
.deflist dd { line-height: 1.9; color: var(--text); }
.deflist dd .sub { display: block; margin-top: .15rem; font-size: .8125rem; color: var(--mute); }

/* ---------- 22. products (SABIZU) --------------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t) var(--spring), transform var(--t) var(--spring);
}
.product:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.product .duo { aspect-ratio: 3 / 2; border-radius: 0; }
/* a lone product sits side by side instead of as one very tall card */
@media (min-width: 761px) {
  .products > .product:only-child { flex-direction: row; }
  .products > .product:only-child .duo { flex: 0 0 46%; aspect-ratio: auto; min-height: 16rem; }
  .products > .product:only-child .duo img { position: absolute; inset: 0; object-position: 10% 50%; }
}
.product-body { flex: 1; display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.35rem, 2.4vw, 2rem); }
.product-kind { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--gold-ink); }
.product h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.product p { font-size: .9375rem; line-height: 1.95; }
.product-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.price { font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.price .s { font-family: var(--font-body); font-size: .55em; font-weight: 500; letter-spacing: .04em; color: var(--mute); }

/* ---------- 23. FAQ -------------------------------------------------------- */
/* native <details>; wolf.js animates the height so a second tap mid-motion reverses it
   from where it is. The plus turns into a minus. */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-block: clamp(1.05rem, 1.8vw, 1.4rem);
  font-size: clamp(.9688rem, .92rem + .25vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--ink);
  border-radius: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--ink);
  transition: background-color var(--t-fast) var(--spring), transform var(--t-fast) var(--spring);
}
.faq .chev::before, .faq .chev::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .62rem;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--spring);
}
.faq .chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open]:not(.is-closing) .chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover .chev { background: var(--gold-ink); }
.faq summary:active .chev { transform: scale(.9); transition-duration: 80ms; }

.faq-a { overflow: hidden; }
.faq-a > div {
  padding: 0 0 clamp(1.25rem, 2.2vw, 1.75rem) 2.75rem;
  font-size: .9375rem;
  line-height: 2;
  color: var(--text);
  text-wrap: pretty;
}
.faq-a p + p { margin-top: .9rem; }

.faq-rel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  font-size: .75rem;
  color: var(--mute);
}
.faq-rel a {
  padding: .25em .95em;
  border-radius: 999px;
  background: var(--mist);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--spring);
}
.faq-rel a:hover { background: var(--gold-soft); }
.faq-rel a::after { content: " →"; font-weight: 400; color: var(--mute); }
.faq-group + .faq-group { margin-top: clamp(3rem, 6vw, 5rem); }
.faq-group > .h-3 { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

/* on the home page the questions sit in one white card */
.faq--card {
  padding: .25rem clamp(1.1rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-1);
}
.faq--card details:last-child { border-bottom: 0; }
.faq--card details:first-child { border-top: 0; }

/* ---------- 24. news and article lists ------------------------------------------ */
.news-list { border-top: 1px solid var(--hair); }
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 6.75rem 5.75rem minmax(0, 1fr) 1.5rem;
  gap: .5rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow var(--t-fast) var(--spring), background-color var(--t-fast) var(--spring);
}
.news-item:hover { background: var(--mist); box-shadow: -.75rem 0 0 var(--mist), .75rem 0 0 var(--mist); }
.news-item:active { background: var(--mist-2); box-shadow: -.75rem 0 0 var(--mist-2), .75rem 0 0 var(--mist-2); transition-duration: 80ms; }
@media (max-width: 700px) {
  .news-item { grid-template-columns: 6.75rem 1fr; }
  .news-item .t { grid-column: 1 / -1; }
  .news-item .arw { display: none; }
}
.news-item .d { font-size: .8125rem; letter-spacing: .04em; color: var(--mute); }
.news-item .k {
  justify-self: start;
  padding: .15em .95em;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.news-item .t { font-weight: 600; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.news-item .arw { justify-self: end; color: var(--mute); transition: transform var(--t) var(--spring), color var(--t-fast) var(--spring); }
.news-item:hover .arw { transform: translateX(4px); color: var(--ink); }

.post-list, .post-grid { display: grid; gap: clamp(.75rem, 1.6vw, 1.1rem); }
.post-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (min-width: 900px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-card {
  display: grid;
  align-content: start;
  gap: .7rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring), border-color var(--t) var(--spring);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.post-card:active { transform: scale(.99); transition-duration: 90ms; }
.post-card .meta { display: flex; align-items: center; gap: .8rem; font-size: .75rem; color: var(--mute); }
.post-card .k {
  padding: .25em .95em;
  border-radius: 999px;
  background: var(--gold-wash);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-ink);
}
.post-card .t {
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .015em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color var(--t-fast) var(--spring);
}
.post-card:hover .t { color: var(--gold-ink); }
.post-card .s { font-size: .875rem; line-height: 1.9; color: var(--text); }
.post-card .more { font-size: .8125rem; font-weight: 700; color: var(--ink); }

/* ---------- 25. answer-first article blocks ---------------------------------------- */
.qa { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); }
.qa-item { padding-top: clamp(1.25rem, 2.4vw, 2rem); border-top: 1px solid var(--hair); }
.qa-item > h2, .qa-item > h3 {
  margin-bottom: 1.1rem;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
  text-wrap: balance;
  word-break: auto-phrase;
}
.qa-item > p { max-width: 40em; line-height: 2.05; text-wrap: pretty; }
.qa-item > p + p { margin-top: 1.25rem; }
.qa-item > .checklist { max-width: 40em; margin-top: 1.25rem; }
.art .qa-item > .checklist li { font-size: 1rem; line-height: 2; }

/* the answer sits directly under the question, set apart in a gold-washed block */
.qa-item > p.answer, .answer {
  position: relative;
  max-width: 40em;
  margin-bottom: 1.35rem;
  padding: 1.1rem 1.35rem 1.1rem 1.6rem;
  border-radius: 16px;
  background: var(--gold-wash);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 600;
  line-height: 2;
  color: var(--ink);
}
.answer::before {
  content: "";
  position: absolute;
  left: 0; top: 1rem; bottom: 1rem;
  width: 3px;
  border-radius: 3px;
  background: var(--gold);
}

.callout {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.9rem) clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.4rem, 2.7vw, 2.1rem);
  border-radius: 16px;
  background: var(--gold-wash);
  font-size: .9375rem;
  line-height: 2;
  color: var(--ink-2);
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; top: 1.1rem; bottom: 1.1rem;
  width: 3px;
  border-radius: 3px;
  background: var(--gold);
}
.callout b { font-weight: 700; color: var(--ink); }
.callout p + p { margin-top: .75rem; }
.callout .kicker { margin-bottom: .75rem; }

.reflist { display: grid; gap: .7rem; }
.reflist a {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--hair-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  transition: color var(--t-fast) var(--spring), text-decoration-color var(--t-fast) var(--spring);
}
.reflist a:hover { color: var(--ink); text-decoration-color: var(--gold-ink); }
.reflist a::before { content: "↗"; color: var(--gold-ink); font-size: .85em; text-decoration: none; }
.reflist a.int::before { content: "→"; }

.other-svc, .route-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem;
}
.other-svc a, .route-links a {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring), border-color var(--t) var(--spring);
}
.other-svc a:hover, .route-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.other-svc a:active, .route-links a:active { transform: scale(.99); transition-duration: 90ms; }
.other-svc .e, .route-links .k {
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.other-svc .n, .route-links .v { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--ink); }

.toc { display: grid; gap: .6rem; counter-reset: toc; }
.toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: .4rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text);
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  padding-top: .15em;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold-ink);
}
.toc a { transition: color var(--t-fast) var(--spring); }
.toc a:hover, .toc a.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}

.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-size: .8125rem;
  color: var(--mute);
}
.art-meta time { color: var(--ink-2); }
.art-meta a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.page-head .art-meta + .page-lede { margin-top: clamp(1.25rem, 2.4vw, 2rem); }

.checklist { display: grid; gap: .6rem; }
.checklist li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.9;
}
.checklist li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .45em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23C8A55B'/%3E%3Cpath d='M6.2 11.4l3.1 3.1 6.5-6.7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 26. timeline, steps, ordered lists ------------------------------------------ */
.timeline { --tl-pad: clamp(1.5rem, 3vw, 2.5rem); position: relative; padding-left: var(--tl-pad); }
.timeline::before {
  content: "";
  position: absolute;
  left: .45rem; top: .6em; bottom: .6em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--hair));
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  gap: .3rem clamp(1.25rem, 2.5vw, 2.25rem);
  padding-block: clamp(.85rem, 1.5vw, 1.2rem);
}
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; } }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(.45rem - 4px - var(--tl-pad));
  top: calc(clamp(.85rem, 1.5vw, 1.2rem) + .6em);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
  transition: transform var(--t) var(--spring), background-color var(--t-fast) var(--spring);
}
.timeline li:hover::before { transform: scale(1.3); background: var(--gold); }
.timeline .when { font-family: var(--font-en); font-size: .875rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-ink); padding-top: .1em; }
.timeline .what { line-height: 1.9; color: var(--ink); }
.timeline .what small { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--mute); }

.steps { counter-reset: s; display: grid; gap: .75rem; }
.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 14rem) minmax(0, 1fr);
  gap: .5rem clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
@media (max-width: 760px) {
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step p { grid-column: 2 / -1; }
}
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-ink);
}
.step h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.step p { font-size: .9375rem; line-height: 1.95; }

.phase {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  padding-bottom: .9rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--hair-gold);
}
.phase b {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.phase h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); font-weight: 700; color: var(--ink); }

.olist {
  counter-reset: o;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.olist li {
  counter-increment: o;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: .8rem;
  border-bottom: 1px solid var(--hair);
  font-size: .9375rem;
  line-height: 1.9;
}
.olist li::before {
  content: counter(o, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-ink);
}

/* ---------- 27. plan table -------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
table.plans { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .875rem; }
table.plans th, table.plans td {
  text-align: left;
  vertical-align: top;
  padding: clamp(.9rem, 1.6vw, 1.25rem) clamp(.9rem, 1.6vw, 1.3rem);
  border-bottom: 1px solid var(--hair);
  line-height: 1.85;
}
table.plans thead th {
  background: var(--mist);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mute);
  white-space: nowrap;
}
table.plans tbody tr:last-child th, table.plans tbody tr:last-child td { border-bottom: 0; }
table.plans tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
table.plans tbody tr { transition: background-color var(--t-fast) var(--spring); }
table.plans tbody tr:hover { background: var(--gold-wash); }
table.plans .fee { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- 28. pillars, tiers, summary ------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.pillar {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
.pillar h3, .pillar h4, .pillar .h-3, .pillar .h-4 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.65; color: var(--ink); }
.pillar p { margin: 0; font-size: .9375rem; line-height: 1.95; }
.flow p.k, .pillar .k, .pillar p.k {
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tier {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring);
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tier .amt { font-family: var(--font-en); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.tier .nm { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.tier .per { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .875rem; color: var(--text); }
.tier .off {
  padding: .1em .85em;
  border-radius: 999px;
  background: var(--gold-wash);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-ink);
}
.tier .nt { font-size: .75rem; color: var(--mute); }
.tier .dl { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .75rem; line-height: 1.9; color: var(--mute); }
.tier .btn { justify-content: center; font-size: .875rem; letter-spacing: .04em; }

.sum {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--gold-wash);
  border: 1px solid var(--hair-gold);
  border-radius: var(--r-card);
}
.sum-fig { display: flex; align-items: baseline; gap: .8rem; }
.sum-fig .n { font-family: var(--font-en); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.sum-fig .of { font-size: .875rem; color: var(--text); }
.meter { position: relative; height: 6px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, var(--gold-ink), var(--gold)); }
.sum dl { border-top: 1px solid var(--hair-gold); }
.sum dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--hair); font-size: .875rem; }
.sum dt { color: var(--mute); }
.sum dd { color: var(--ink); font-weight: 600; text-align: right; }
.sum .btn { justify-content: center; }

.prod-hero { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .prod-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.prod-fig .duo { aspect-ratio: 3 / 2; border-radius: var(--r-panel); box-shadow: var(--shadow-1); }
.prod-lead { margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 42rem; }
.prod-lead p + p { margin-top: 1.2rem; }

/* ---------- 29. contact, mail card ---------------------------------------------------- */
.mail-card {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--gold-wash);
  border: 1px solid var(--hair-gold);
  border-radius: var(--r-panel);
}
@media (min-width: 900px) {
  .mail-card { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
}
.mail-main { display: grid; gap: 1.3rem; }
.mail-addr {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  word-break: break-word;
}
.mail-aside {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding-left: clamp(0rem, 2vw, 2rem);
  border-left: 1px solid var(--hair-gold);
  font-size: .875rem;
  line-height: 2;
}
@media (max-width: 899px) { .mail-aside { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--hair-gold); } }
.copy {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .6em 1.25em;
  border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  transition: background-color var(--t-fast) var(--spring), color var(--t-fast) var(--spring), transform var(--t-fast) var(--spring);
}
.copy:hover, .copy[data-copied="1"] { background: var(--ink); color: #fff; }
.copy:active { transform: scale(.97); transition-duration: 80ms; }

/* ---------- 30. long-form text (philosophy, legal) ---------------------------------------- */
.h-4 + p { margin-top: .5rem; }
.flow > * + * { margin-top: 1.15rem; }
.flow > h2 { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.flow > h2:first-child, .flow > .kicker:first-child { margin-top: 0; }
.flow > h3 { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.flow > h4 { margin-top: 1.9rem; }
.flow > .kicker { margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.flow p { max-width: 42em; font-size: .9688rem; line-height: 2.05; color: var(--text); text-wrap: pretty; }
.flow--read p { font-size: 1rem; }
.flow p.sign { margin-top: 2rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.flow .checklist { max-width: 42em; }
.flow .callout { max-width: 46em; }
.flow .row { margin-top: 1.5rem; }

.legal { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 46em; }
.legal-art { padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--hair); }
.legal-art h3 { margin-bottom: .9rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 700; line-height: 1.6; color: var(--ink); }
.legal-art p { font-size: .9375rem; line-height: 2.05; }
.legal-art p + p, .legal-art p + ol, .legal-art p + ul { margin-top: 1rem; }
.legal-art ol, .legal-art ul { display: grid; gap: .55rem; counter-reset: la; }
.legal-art ol > li, .legal-art ul > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .7rem;
  font-size: .9375rem;
  line-height: 2;
}
.legal-art ol > li { counter-increment: la; }
.legal-art ol > li::before { content: counter(la) "."; font-family: var(--font-en); font-weight: 700; color: var(--gold-ink); }
.legal-art ul > li::before { content: "—"; color: var(--gold); }
.legal-meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-gold);
  font-size: var(--t-micro);
  line-height: 2.2;
  color: var(--mute);
  letter-spacing: .04em;
}

/* ---------- 31. bands, pills ------------------------------------------------------------------ */
.band { position: relative; overflow: hidden; }
.band .duo { aspect-ratio: 21 / 8; border-radius: 0; }
.band .duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17, 18, 20, .55)); }
@media (max-width: 760px) { .band .duo { aspect-ratio: 4 / 3; } }
.band-cap {
  position: absolute;
  left: var(--gut);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 2;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(17, 18, 20, .6);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em 1em;
  border-radius: 999px;
  background: var(--gold-wash);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-ink);
}
.figure-note { margin-top: .85rem; font-size: .75rem; color: var(--mute); letter-spacing: .04em; }

/* ---------- 32. page head (every sub page) ---------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--hdr-h) + clamp(2.75rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ripples) 100% 135% / min(1300px, 140%) auto no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(270deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--mute);
}
.crumbs a { transition: color var(--t-fast) var(--spring); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.crumbs .sep { opacity: .45; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

.page-en {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  margin-bottom: 1rem;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.page-en::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--gold); }
.page-title {
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.3;
  letter-spacing: .005em;
}
.page-lede {
  margin-top: clamp(1.1rem, 2.2vw, 1.75rem);
  max-width: 46em;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 2;
  color: var(--text);
  text-wrap: pretty;
}

/* =========================================================================
   Serif theme  (python3 _build/build.py --theme serif)
   Added after the base parts, so these files only say what differs.

   White and the card. The page is white, like the model site: a light mincho
   for all Japanese text, huge Didone English section titles with a thin square
   drawn over them, centred poem-like copy, hairlines, outlined pill buttons,
   thin lines leading from one section to the next. The only other colour is
   the charcoal of the business card, kept for the hero (the white wolf and
   moon on it) and the recruit band; everything between is white or a pale fog,
   and every grey is neutral: never blue, never black.
   Fonts: Bodoni Moda (English display) and Shippori Mincho (Japanese), both
   from Google Fonts (allowed in _build/headers-serif).
   ========================================================================= */

/* ---------- tokens ---------------------------------------------------------- */
:root {
  color-scheme: light;

  /* surfaces */
  --paper:   #FFFFFF;   /* the page */
  --paper-2: #FFFFFF;   /* cards and menus: white with a hairline */
  --mist:    #F5F5F4;   /* alternate sections: pricing, company, news */
  --mist-2:  #ECECEA;   /* image placeholders, hover */
  --fog:     #F5F5F4;
  --fog-2:   #ECECEA;
  --fog-3:   #E2E2E0;
  --night:   #262625;   /* the card: the hero and the recruit band */
  --moonlit: #3F3F3E;   /* the light caught behind the mark */

  /* type: charcoal, never black */
  --ink:    #3A3A3A;    /* headings, the biggest words (10.6:1 on white) */
  --ink-2:  #444443;
  --text:   #4A4A48;    /* body (8.3:1) */
  --mute:   #767672;    /* captions, notes (4.6:1; never below .8125rem) */

  /* the accent is silver: lines, bullets, small labels */
  --silver:     #A8A8A5;   /* decoration only, never text */
  --silver-ink: #6B6B68;   /* small labels (5.3:1) */
  --slate:      #8A8A86;   /* the square over the titles, the connectors (3.5:1, non-text) */

  /* the base parts read the gold names; in this theme they are silver */
  --gold:      var(--silver);
  --gold-hi:   #C9C9C6;
  --gold-ink:  var(--silver-ink);
  --gold-wash: var(--fog);
  --gold-soft: var(--fog-2);

  --hair:      rgba(58, 58, 58, .18);
  --hair-2:    rgba(58, 58, 58, .1);
  --hair-gold: rgba(58, 58, 58, .35);

  --shadow-1: none;
  --shadow-2: 0 18px 44px rgba(0, 0, 0, .08);
  --shadow-3: none;

  --r-btn:   30px;
  --r-card:  0;
  --r-panel: 0;

  --font-jp:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-body: var(--font-jp);
  --font-en:   "Bodoni Moda", "Didot", "Bodoni 72", "Hiragino Mincho ProN", Georgia, serif;

  --t-hero:  clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
  --t-d1:    clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --t-d2:    clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-d3:    1.125rem;
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .75rem;
  --t-st:    clamp(3.25rem, 1.8rem + 6vw, 6.25rem);   /* the English section title */

  --content-w: 1100px;
  --sec-y:     clamp(4.5rem, 3rem + 6vw, 8rem);
  --hdr-h:     80px;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--text); font-weight: 400; line-height: 1.9; letter-spacing: .04em; }
/* a thin mincho reads grey on a 1x screen: one weight up there */
@media (max-resolution: 1.5dppx) { body { font-weight: 500; } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: rgba(58, 58, 58, .18); color: var(--ink); }
.progress { display: none; }
.skip { background: var(--ink); color: var(--paper); }

/* ---------- type ------------------------------------------------------------- */
.h-display, .h-2, .h-3, .h-4, .page-title, .cta-h, .rail-title {
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: .04em;
  font-feature-settings: "palt" 0;
  word-break: normal;
  color: var(--ink);
}
.h-display { line-height: 1.6; }
.h-2 { line-height: 1.6; }
.h-3 { line-height: 1.7; }
.page-title { font-size: var(--t-d1); line-height: 1.6; }
.cta-h { font-size: var(--t-d1); line-height: 1.6; }
.rail-title { font-size: var(--t-d2); }

.lede, .page-lede, .sec-lede, .a-sub { font-size: 1rem; line-height: 2.1; color: var(--text); }
.prose p, .flow p { line-height: 2.1; color: var(--text); }
.prose strong, .flow p.sign { color: var(--ink); font-weight: 700; }
.note, .rail-note, .dim { color: var(--mute); line-height: 2; }
.note, .rail-note { font-size: .8125rem; }

/* small English labels: Didone, spaced, grey; no dash */
.eyebrow, .page-en, .kicker, .sec-en {
  gap: 0;
  font-family: var(--font-en);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: none;
  color: var(--silver-ink);
}
.eyebrow::before, .page-en::before { display: none; }
.eyebrow { margin-bottom: .9rem; }
.kicker--jp { font-family: var(--font-jp); font-size: var(--t-small); font-weight: 700; letter-spacing: .08em; color: var(--ink); }

/* running-text links: charcoal with a thin silver underline */
a.gold, .prose a, .note a, .faq-a a, table.plans a, .callout a, .legal-art a {
  color: var(--ink);
  text-decoration-color: var(--silver);
  text-decoration-thickness: 1px;
}
a.gold:hover, .prose a:hover, .note a:hover, .faq-a a:hover, table.plans a:hover, .callout a:hover, .legal-art a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ---------- buttons and links -------------------------------------------------- */
/* outlined charcoal pills; the solid one is charcoal with white type */
.btn {
  min-height: 2.75rem;
  padding: .5em 2.2em;
  font-family: var(--font-jp);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(58, 58, 58, .6);
  border-radius: var(--r-btn);
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn .arw { display: none; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: #4A4A48; border-color: #4A4A48; color: var(--paper); box-shadow: none; transform: none; }
.btn--solid:active { transform: scale(.97); }
.btn--ghost { border-color: rgba(58, 58, 58, .6); background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--sm { min-height: 2.25rem; padding: .3em 1.4em; font-size: .8125rem; }
.btn--block { background: transparent; border-color: rgba(58, 58, 58, .6); color: var(--ink); }
.btn--block:hover { background: var(--ink); color: var(--paper); }

.tlink {
  gap: .4em;
  padding: 0 0 .15em;
  font-family: var(--font-jp);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink);
  background: linear-gradient(var(--silver), var(--silver)) 0 100% / 100% 1px no-repeat;
}
.tlink:hover { background-size: 100% 1px; color: var(--ink); }
.tlink .arw { display: none; }
.tlink::after { content: "\203A"; transition: transform var(--t) var(--spring); }
.tlink:hover::after { transform: translateX(3px); }

.mailto {
  font-family: var(--font-en);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink);
  background: linear-gradient(var(--silver), var(--silver)) 0 100% / 100% 1px no-repeat;
}
.mailto:hover { background-size: 100% 1px; color: var(--ink); }

/* figures in Didone, lining */
.stat-fig, .metric dd, .price, .mail-addr, .tier .amt, .sum-fig .n, .plan-price b, .datacard-fig {
  font-family: var(--font-en);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* generated once: the ripple ornament in silver (light surfaces) and in moonlight (dark surfaces) */
:root {
  --ripples-silver: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 560%22 width=%221600%22 height=%22560%22%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22112.0%22 ry=%2230.2%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.495%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22213.4%22 ry=%2257.6%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.412%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22311.1%22 ry=%2284.0%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.336%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22406.6%22 ry=%22109.8%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.269%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22500.3%22 ry=%22135.1%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.209%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22592.8%22 ry=%22160.1%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.158%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22684.2%22 ry=%22184.7%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.116%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22774.6%22 ry=%22209.1%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.082%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22864.3%22 ry=%22233.4%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.057%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22953.3%22 ry=%22257.4%22 fill=%22none%22 stroke=%22%238C8C89%22 stroke-opacity=%220.041%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --ripples-moon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 560%22 width=%221600%22 height=%22560%22%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22112.0%22 ry=%2230.2%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.495%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22213.4%22 ry=%2257.6%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.412%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22311.1%22 ry=%2284.0%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.336%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22406.6%22 ry=%22109.8%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.269%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22500.3%22 ry=%22135.1%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.209%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22592.8%22 ry=%22160.1%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.158%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22684.2%22 ry=%22184.7%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.116%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22774.6%22 ry=%22209.1%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.082%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22864.3%22 ry=%22233.4%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.057%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cellipse cx=%22800%22 cy=%22540%22 rx=%22953.3%22 ry=%22257.4%22 fill=%22none%22 stroke=%22%23DADAD8%22 stroke-opacity=%220.041%22 stroke-width=%221.2%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
}

/* ---------- header: white glass, the charcoal mark left, small serif links right -------- */
.site-header {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--hair-2); }
.header-inner { width: min(100% - 2 * clamp(1.25rem, 3vw, 2.5rem), 1360px); }
.brand { gap: .7rem; }
.brand-logo { width: 38px; height: 38px; border-radius: 0; }
.brand:hover .brand-logo { transform: none; }
.brand-mark { font-family: var(--font-en); font-size: 1.5rem; font-weight: 400; letter-spacing: .2em; color: var(--ink); }
.brand-sub { font-family: var(--font-jp); font-size: .6875rem; letter-spacing: .14em; color: var(--mute); }
.nav { gap: clamp(1rem, 1.9vw, 1.9rem); }
.nav-link {
  font-family: var(--font-jp);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--text);
}
.nav-link::after { height: 1px; background: var(--ink); bottom: .25em; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"] { font-weight: 600; }
.nav-group > .nav-link::before { opacity: .55; }
.nav-panel {
  border-radius: 0;
  background: rgba(255, 255, 255, .98);
  border-color: var(--hair);
  box-shadow: var(--shadow-2);
}
.nav-panel a { border-radius: 0; font-family: var(--font-jp); font-size: .875rem; letter-spacing: .06em; color: var(--text); }
.nav-panel a:hover { background: var(--fog); color: var(--ink); }
.nav-panel a:active { background: var(--fog-2); }
.header-cta { font-size: .8125rem; }
.burger span { height: 1px; background: var(--ink); }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1), .burger[aria-expanded="true"] span:nth-child(2) { top: 21px; }

/* ---------- mobile menu: a white sheet with the links centred --------------------- */
.menu {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
}
.menu-grid { gap: 1.5rem; }
.menu-col h3 { display: none; }
.menu-col a {
  justify-content: center;
  min-height: 3rem;
  border-bottom: 0;
  font-family: var(--font-jp);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--ink);
}
.menu-col a::after { display: none; }
.menu-col a:active { background: var(--fog-2); }
.menu-foot { justify-content: center; border-top: 1px solid var(--hair-2); }

/* ---------- closing call to action (sub pages) --------------------------------------- */
.cta { background: transparent; border-top: 1px solid var(--hair-2); }
.cta::before { display: none; }
.cta .eyebrow { font-size: var(--t-st); letter-spacing: .02em; color: var(--ink); margin-bottom: 1.25rem; font-weight: 400; line-height: 1; }
.cta .lede { font-size: 1rem; }
.cta .btn--solid { font-size: 1rem; padding-inline: 2.4rem; }

/* ---------- footer: a pale fog, thin line, small serif --------------------------------- */
.site-footer { background: var(--fog); border-top: 1px solid var(--hair-2); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 1.5rem; }
.footer-top { border-bottom: 1px solid var(--hair-2); }
.footer-about p { font-size: .8125rem; line-height: 2; color: var(--mute); }
.footer-col h3 { font-family: var(--font-en); font-size: .8125rem; font-weight: 500; letter-spacing: .18em; color: var(--ink); }
.footer-col a { font-size: .8125rem; letter-spacing: .06em; color: var(--text); text-decoration-color: transparent; }
.footer-col a:hover { text-decoration-color: var(--silver); color: var(--ink); }
.footer-bottom { font-family: var(--font-en); font-size: .75rem; letter-spacing: .08em; color: var(--mute); }
.footer-bottom nav a { font-family: var(--font-jp); letter-spacing: .06em; }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- hero: the card. A charcoal ground with a soft light, the white wolf and moon, the headline on the left ---------- */
.hero {
  --night-2: #343433;
  min-height: calc(100svh - var(--hdr-h));
  padding: var(--hdr-h) 0 0;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: left;
  color: #F4F4F4;
  background:
    radial-gradient(60% 80% at 72% 46%, var(--moonlit) 0%, rgba(52, 52, 51, .7) 40%, transparent 75%),
    radial-gradient(90% 70% at 50% 30%, var(--night-2) 0%, var(--night) 70%);
}
.hero::before {
  content: "";
  display: none;
}
/* the fine grain of the card */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: min(100% - 2 * var(--gut), 1360px);
  margin-inline: auto;
  min-height: clamp(30rem, 72svh, 46rem);
}
.moon-rings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* the mark: white, large, on the right; it rises in once, then follows the pointer a little */
.hero-mark {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  will-change: transform;
}
.hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 48px rgba(255, 255, 255, .12)) drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
}
.js .hero-mark { animation: moonrise 1.3s var(--spring) .35s both; }
@keyframes moonrise { from { opacity: 0; scale: .94; } }   /* scale, not transform: the scroll drift owns transform and the pointer owns translate */

.hero-text { position: relative; z-index: 2; padding: 2rem 0; }
.hero-en { font-family: var(--font-en); font-size: .9375rem; letter-spacing: .26em; color: #B9B9B5; margin-bottom: 1.4rem; }
.hero-h1 {
  display: block;
  font-family: var(--font-jp);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .08em;
  color: #FFFFFF;
  font-feature-settings: "palt" 0;
  word-break: keep-all;
  min-height: 1.55em;
}
.hero-h1 .sc { display: inline-block; min-width: .6em; }
.hero-sub { margin-top: 1.4rem; max-width: 30em; font-size: .9375rem; line-height: 2.1; letter-spacing: .06em; color: #DADAD8; }
.hero-ind { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; font-family: var(--font-en); font-size: .8125rem; letter-spacing: .22em; }
.hero-ind a { color: #FFFFFF; padding-block: .3em; transition: color var(--t-fast) var(--spring); }
.hero-ind a + i { width: 4rem; height: 1px; background: #8C8C89; }
.hero-ind a:nth-of-type(2) { color: #A3A3A0; }
.hero-ind a:hover { color: #FFFFFF; }
.hero :focus-visible { outline-color: #FFFFFF; }
.hero ::selection { background: rgba(255, 255, 255, .25); color: #FFFFFF; }

/* the headline drifts up and fades as the page is scrolled (scroll-driven; nothing runs without scrolling) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-text { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    @keyframes hero-drift { to { transform: translateY(-36px); opacity: 0; } }
    .hero-mark { animation: moonrise 1.3s var(--spring) .35s both, mark-drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 70vh; }
    @keyframes mark-drift { to { transform: translateY(-80px); } }
  }
}

@media (max-width: 860px) {
  .hero-stage { grid-template-columns: 1fr; align-content: end; min-height: clamp(34rem, 84svh, 46rem); padding-bottom: 1rem; }
  .hero-mark { position: absolute; top: 2rem; right: -6%; width: min(62vw, 20rem); justify-self: auto; }
  .hero-text { padding-top: 0; }
  .hero-h1 { font-size: clamp(1.625rem, 1.2rem + 3.6vw, 2.25rem); }
}

/* the "Scroll" mark: a line that draws itself once, then stays (no idle loop on the page) */
.scroll-cue {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.25rem 0 1rem;
  font-family: var(--font-en);
  font-size: .8125rem;
  letter-spacing: .3em;
  color: #A3A3A0;
  transition: opacity var(--t) var(--spring);
  position: relative;
  z-index: 1;
}
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 4rem; background: rgba(255, 255, 255, .22); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #DADAD8;
  transform-origin: 50% 0;
  animation: cue-draw 1.1s var(--spring) 1.6s both;
}
@keyframes cue-draw { from { transform: scaleY(0); } }
.scroll-cue.is-gone { opacity: 0; }

/* ---------- section titles: a huge Didone word with a thin square drawn over it ------------- */
.st {
  position: relative;
  font-family: var(--font-en);
  font-size: var(--t-st);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
}
.st-word { position: relative; display: inline-block; padding: .08em .06em; }
.st-word::after {
  content: "";
  position: absolute;
  top: -.04em;
  left: 36%;
  width: 1.5em;
  height: 1.22em;
  border: 1px solid var(--slate);
  pointer-events: none;
}
/* the title on a fog panel: a slightly darker square */
.st--light { color: var(--ink); }
.st--light .st-word::after { border-color: var(--silver-ink); }
.st-jp {
  font-family: var(--font-jp);
  font-size: var(--t-d1);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink);
}

/* a thin line that leads from one section to the next */
.st-connector { width: 1px; height: clamp(4rem, 8vw, 7rem); margin: 0 auto; background: var(--slate); position: relative; }
.st-connector::after {
  content: "";
  position: absolute;
  left: -4px; bottom: 0;
  width: 10px; height: 10px;
  border-right: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
  transform: rotate(45deg) translate(-2px, -2px);
}

/* ---------- the standard section: title left, centred copy right ----------------------------- */
.st-section { padding-block: var(--sec-y); }
.st-section--grad { background: linear-gradient(180deg, var(--fog) 0%, transparent 70%); }
.st-section--pale { background: var(--fog); border-block: 1px solid var(--hair-2); }
.st-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; gap: 2rem; } .st { white-space: normal; } }
.st-body { text-align: center; }
.st-body .st-jp { margin-bottom: 1.5rem; }
.poem p { font-size: 1rem; line-height: 2.4; letter-spacing: .06em; color: var(--text); }
.poem p + p { margin-top: 0; }
.poem p.gap { margin-top: 1.2em; }
.st-center { text-align: center; }
.st-center .st { display: block; }
.st-center .st-jp { margin-top: 1.5rem; }
.st-center .poem { max-width: 42em; margin-inline: auto; }

/* values: a silver dot, the name, then a line of explanation */
.values { display: grid; gap: 1.6rem; max-width: 40em; margin-inline: auto; text-align: left; }
.values dt { font-size: 1.0625rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.values dt::before { content: "\30FB"; color: var(--silver); }
.values dd { margin-top: .2rem; font-size: .9375rem; line-height: 2; color: var(--text); padding-left: 1em; }

/* ---------- company: a fog panel with hairlines ---------- */
.company-panel {
  background: var(--fog);
  border-block: 1px solid var(--hair-2);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}
.company-panel .st { display: block; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.company-panel .deflist { border-top: 1px solid rgba(58, 58, 58, .3); max-width: 56rem; margin-inline: auto; }
.company-panel .deflist > div { border-bottom: 1px solid rgba(58, 58, 58, .16); grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); padding-block: 1.1rem; }
@media (max-width: 640px) { .company-panel .deflist > div { grid-template-columns: 1fr; } }
.company-panel .deflist dt { font-weight: 400; font-size: .9375rem; letter-spacing: .08em; color: var(--silver-ink); }
.company-panel .deflist dd { font-size: .9375rem; color: var(--ink); }
.company-panel .deflist dd .sub { color: var(--mute); }
.company-panel .mailto { font-size: .9375rem; }

/* ---------- service: the formula headline and four square cards -------------------------------- */
.formula-h {
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-align: center;
  color: var(--ink);
}
.formula-h .x { color: var(--silver); padding-inline: .2em; font-weight: 400; }
.svc-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 900px) { .svc-group { grid-template-columns: 1fr; } }
.svc-group-title { font-family: var(--font-en); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 400; letter-spacing: .02em; color: var(--ink); }
.svc-group-desc { font-size: .9375rem; line-height: 2.1; color: var(--text); }
/* (scoped to the home grid: the services page keeps its numbers, descriptions and tags) */
#service .svc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { #service .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #service .svc-list { grid-template-columns: 1fr; } }
#service .svc { background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
#service .svc:hover { transform: none; box-shadow: none; }
#service .svc:hover .svc-media img { transform: scale(1.03); }
#service .svc-media { aspect-ratio: 1 / 1; border-radius: 0; background: var(--fog-2); }
#service .svc-body { padding: 1rem 0 0; gap: .5rem; align-items: center; }
#service .svc-no { display: none; }
#service .svc-name { font-size: 1rem; font-weight: 400; letter-spacing: .08em; line-height: 1.7; color: var(--ink); }
#service .svc-en { display: none; }
#service .svc-desc { display: none; }
#service .tags { display: none; }
#service .svc-arw { display: none; }
#service .svc .btn { margin-top: .4rem; min-height: 2.5rem; padding: .3em 1.8em; font-size: .9375rem; position: relative; z-index: 2; }

/* ---------- results: Didone figures, then two cases laid out like the model's group cards ---------- */
.figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
@media (max-width: 900px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig { padding: 1.25rem .5rem; border-top: 1px solid var(--hair); }
.fig b { display: block; font-family: var(--font-en); font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.fig b small { font-family: var(--font-jp); font-size: .4em; letter-spacing: .06em; color: var(--silver-ink); margin-left: .15em; }
.fig > span { display: block; margin-top: .6rem; font-size: .8125rem; letter-spacing: .08em; color: var(--text); }
.fig b span { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }

.case-rows { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.case-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.case-row:nth-child(even) .case-media { order: 2; }
@media (max-width: 860px) { .case-row { grid-template-columns: 1fr; } .case-row:nth-child(even) .case-media { order: 0; } }
.case-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fog-2); }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-text { text-align: center; }
.case-text .kicker { display: block; margin-bottom: .75rem; }
.case-text h3 { font-size: var(--t-d2); font-weight: 700; line-height: 1.7; letter-spacing: .06em; color: var(--ink); }
.case-text p { margin-top: .9rem; font-size: .9375rem; line-height: 2.1; color: var(--text); }
.case-text .btn { margin-top: 1.4rem; }

/* ---------- pricing: a quiet table of three on the fog ----------------------------------------------------- */
.plan-grid { gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
@media (max-width: 980px) { .plan-grid { max-width: none; } }
.plan { background: transparent; border: 0; border-right: 1px solid var(--hair-2); border-radius: 0; box-shadow: none; padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem); text-align: center; }
.plan:last-child { border-right: 0; }
@media (max-width: 980px) { .plan { border-right: 0; border-bottom: 1px solid var(--hair-2); } .plan:last-child { border-bottom: 0; } }
.plan--featured { border: 0; box-shadow: none; background: var(--paper); }
.plan-badge { background: var(--ink); color: var(--paper); font-family: var(--font-jp); font-weight: 400; letter-spacing: .14em; border-radius: 30px; }
.plan-name { font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.plan-price { justify-content: center; border-block-color: var(--hair-2); }
.plan-price b { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); letter-spacing: -.01em; }
.plan-price--text b { font-family: var(--font-jp); font-size: 1.25rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.plan .checks { text-align: left; }
.plan-terms { border-top-color: var(--hair-2); }

/* ---------- moments: a quiet photo row ------------------------------------------------------------- */
.strip .duo { border-radius: 0; }
.strip figcaption b { font-family: var(--font-en); letter-spacing: .14em; color: var(--silver-ink); }

/* ---------- recruit: words, then a wide photo band on the card's charcoal with a line of white type ---------- */
.recruit-banner { position: relative; overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); aspect-ratio: 21 / 8; min-height: 18rem; background: var(--night); }
.recruit-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.6) contrast(1.05); }
.recruit-banner p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  text-align: center;
}

/* ---------- news: a fog panel with date, kind and title on one line --------------------------------- */
.news-panel { background: var(--fog); border-block: 1px solid var(--hair-2); padding-block: clamp(3rem, 2.5rem + 4vw, 6rem); }
.news-panel .st { display: block; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.news-panel .news-list { border-top: 1px solid var(--hair); max-width: 60rem; margin-inline: auto; }
.news-item { grid-template-columns: 6.5rem 4.5rem minmax(0, 1fr) 1.5rem; border-bottom-color: var(--hair-2); padding-block: 1.1rem; }
.news-item:hover { background: var(--paper); box-shadow: -.75rem 0 0 var(--paper), .75rem 0 0 var(--paper); }
.news-item .d { font-family: var(--font-en); font-size: .875rem; letter-spacing: .06em; color: var(--ink); }
.news-item .k { padding: .1em .8em; border: 1px solid rgba(58, 58, 58, .4); border-radius: 30px; font-family: var(--font-en); font-size: .6875rem; font-weight: 400; letter-spacing: .12em; color: var(--ink); background: transparent; }
.news-item .t { font-size: .9375rem; font-weight: 400; letter-spacing: .04em; color: var(--ink); }
.news-item .arw { color: var(--silver-ink); }
@media (max-width: 700px) { .news-item { grid-template-columns: 6.5rem 1fr; } }
.news-panel .row { justify-content: center; }

/* ---------- contact: title, a photo on the left, words and two pills on the right ----------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fog-2); }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }
.contact-text { text-align: center; }
.contact-text p { font-size: 1rem; line-height: 2.2; color: var(--text); }
.contact-text .row { justify-content: center; margin-top: 1.5rem; }
.contact-text .btn { min-width: 14rem; justify-content: center; }

/* ---------- motion (serif theme) -------------------------------------------------------------------
   Everything here starts from the base reveal system ([data-reveal] gets .is-in when it enters the
   viewport) and adds a specific choreography per element. Only transform, opacity and clip-path are
   animated. The reduced-motion versions are at the end of 80-serif-a11y.css.
   --------------------------------------------------------------------------------------------------- */

/* the big English title: wiped in from the left, then the thin square draws itself around it */
@keyframes st-wipe { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes st-square { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the clip sits on the inner word, not on the observed title (a fully clipped element never "enters" the viewport) */
.js .st[data-reveal] { opacity: 1; animation: none; }
.js .st[data-reveal]:not(.is-in) .st-word { clip-path: inset(0 100% 0 0); }
.js .st[data-reveal].is-in .st-word { animation: st-wipe .9s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.js .st[data-reveal]:not(.is-in) .st-word::after { clip-path: inset(0 100% 0 0); }
.js .st[data-reveal].is-in .st-word::after { animation: st-square .7s var(--spring) .8s backwards; }
.js .page-en::after { animation: st-square .7s var(--spring) .45s backwards; }

/* the section titles drift a little slower than the page (depth), only while scrolling */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .st-grid .st, .st-center .st { animation-composition: add; }
  }
}

/* poem: one line after another, from the top */
@keyframes line-up { from { opacity: 0; transform: translateY(10px); } }
.js .poem[data-reveal]:not(.is-in) p { opacity: 0; }
.js .poem[data-reveal].is-in p { animation: line-up .75s var(--spring) backwards; }
.js .poem[data-reveal].is-in p:nth-child(1)  { animation-delay: .05s; }
.js .poem[data-reveal].is-in p:nth-child(2)  { animation-delay: .13s; }
.js .poem[data-reveal].is-in p:nth-child(3)  { animation-delay: .21s; }
.js .poem[data-reveal].is-in p:nth-child(4)  { animation-delay: .29s; }
.js .poem[data-reveal].is-in p:nth-child(5)  { animation-delay: .37s; }
.js .poem[data-reveal].is-in p:nth-child(6)  { animation-delay: .45s; }
.js .poem[data-reveal].is-in p:nth-child(7)  { animation-delay: .53s; }
.js .poem[data-reveal].is-in p:nth-child(8)  { animation-delay: .61s; }
.js .poem[data-reveal].is-in p:nth-child(9)  { animation-delay: .69s; }
.js .poem[data-reveal].is-in p:nth-child(10) { animation-delay: .77s; }
.js .poem[data-reveal].is-in p:nth-child(11) { animation-delay: .85s; }
.js .poem[data-reveal].is-in p:nth-child(12) { animation-delay: .93s; }

/* rows (company facts, values, news, achievements): each a beat after the one before */
.js .values[data-reveal]:not(.is-in) > div,
.js .company-panel .deflist[data-reveal]:not(.is-in) > div,
.js .news-list[data-reveal]:not(.is-in) > .news-item { opacity: 0; }
.js .values[data-reveal].is-in > div,
.js .company-panel .deflist[data-reveal].is-in > div,
.js .news-list[data-reveal].is-in > .news-item { animation: line-up .7s var(--spring) backwards; }
.js .values[data-reveal].is-in > div:nth-child(n),
.js .company-panel .deflist[data-reveal].is-in > div:nth-child(n),
.js .news-list[data-reveal].is-in > .news-item:nth-child(n) { animation-delay: calc(var(--row, 0) * 90ms); }
.values > div:nth-child(1), .deflist > div:nth-child(1), .news-list > .news-item:nth-child(1) { --row: 0; }
.values > div:nth-child(2), .deflist > div:nth-child(2), .news-list > .news-item:nth-child(2) { --row: 1; }
.values > div:nth-child(3), .deflist > div:nth-child(3), .news-list > .news-item:nth-child(3) { --row: 2; }
.values > div:nth-child(4), .deflist > div:nth-child(4), .news-list > .news-item:nth-child(4) { --row: 3; }
.values > div:nth-child(5), .deflist > div:nth-child(5), .news-list > .news-item:nth-child(5) { --row: 4; }
.values > div:nth-child(6), .deflist > div:nth-child(6), .news-list > .news-item:nth-child(6) { --row: 5; }
.values > div:nth-child(7), .deflist > div:nth-child(7), .news-list > .news-item:nth-child(7) { --row: 6; }
.values > div:nth-child(8), .deflist > div:nth-child(8), .news-list > .news-item:nth-child(8) { --row: 7; }
.values > div:nth-child(9), .deflist > div:nth-child(9), .news-list > .news-item:nth-child(9) { --row: 8; }

/* the thin line between sections draws downward as it comes into view */
@keyframes line-draw { from { transform: scaleY(0); } }
.st-connector { transform-origin: 50% 0; }
.js .st-connector[data-reveal]:not(.is-in) { opacity: 1; transform: scaleY(0); }
.js .st-connector[data-reveal].is-in { animation: line-draw .9s var(--spring) backwards; }
.js .st-connector[data-reveal]:not(.is-in)::after { opacity: 0; }
.js .st-connector[data-reveal].is-in::after { animation: fade .3s linear .8s backwards; }
@keyframes fade { from { opacity: 0; } }
/* where the browser can drive it from the scroll, the line grows exactly as far as it has been scrolled into view, and back */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .st-connector[data-reveal]:not(.is-in), .js .st-connector[data-reveal].is-in {
      transform: none;
      animation: line-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .js .st-connector[data-reveal]:not(.is-in)::after, .js .st-connector[data-reveal].is-in::after {
      opacity: 1;
      animation: fade linear both;
      animation-timeline: view();
      animation-range: cover 32% cover 48%;
    }
  }
}

/* photographs: unveiled from the bottom up while the picture settles from a slight zoom */
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes settle { from { scale: 1.08; } to { scale: 1; } }
.js .media-wipe[data-reveal] { opacity: 1; animation: none; }
.js .media-wipe[data-reveal]:not(.is-in) img { clip-path: inset(100% 0 0 0); }
.js .media-wipe[data-reveal].is-in img {
  animation: wipe-up 1s var(--spring) backwards, settle 1.4s var(--spring) backwards;
  animation-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms);
}
/* the recruit banner's caption follows its picture */
.js .recruit-banner[data-reveal]:not(.is-in) p { opacity: 0; }
.js .recruit-banner[data-reveal].is-in p { animation: line-up .8s var(--spring) .5s backwards; }
.media-wipe img { transition: transform var(--t-slow) var(--spring); }

/* figures: counted up by wolf.js ([data-count]); the unit fades in after the number has settled */
.js .figs[data-reveal].is-in .fig b small { animation: fade .6s linear 1.1s backwards; }

/* pills: the white fill slides in from the left on hover; the press is instant (base) */
.btn, .btn--ghost, .btn--block {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  transition: background-size var(--t) var(--spring), color var(--t-fast) var(--spring), border-color var(--t-fast) var(--spring), transform var(--t-fast) var(--spring);
}
.btn:hover, .btn--ghost:hover, .btn--block:hover { background-size: 100% 100%; background-color: transparent; }
.btn--solid { background-image: none; }

/* cards: the caption's underline grows as the picture lifts */
.svc-name { background: linear-gradient(var(--silver), var(--silver)) 50% 100% / 0% 1px no-repeat; padding-bottom: .2em; transition: background-size var(--t) var(--spring); }
.svc:hover .svc-name { background-size: 100% 1px; }
.case-row .case-media img { transition: transform var(--t-slow) var(--spring); }
.case-row:hover .case-media img { transform: scale(1.03); }

/* the header: links underline from the centre out */
.nav-link::after { transform-origin: 50% 50%; }

/* ---------- page head (sub pages): the English label becomes the big Didone title --------------- */
.page-head { background: linear-gradient(180deg, var(--fog) 0%, transparent 100%); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-head::before { display: none; }
.crumbs { font-family: var(--font-jp); font-size: .75rem; letter-spacing: .08em; color: var(--mute); }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--silver); }
.page-en {
  display: inline-block;
  position: relative;
  margin-bottom: 1.25rem;
  padding: .08em .06em;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
}
.page-en::after {
  content: "";
  position: absolute;
  top: -.04em;
  left: 36%;
  width: 1.5em;
  height: 1.22em;
  border: 1px solid var(--slate);
  pointer-events: none;
  display: block;
}
.page-title { font-size: var(--t-d1); }
.page-title .dim { font-family: var(--font-en); letter-spacing: .12em; }

/* ---------- rails, section headers ----------------------------------------------------------------- */
.rail .eyebrow { font-size: 1.5rem; letter-spacing: .04em; color: var(--ink); margin-bottom: .9rem; }
.sec-head .eyebrow, .a-head .eyebrow { font-size: .8125rem; }
.sec-en { display: block; margin-top: .5rem; }
.section--mist { background: var(--fog); }
.rule { background: var(--hair-2); }

/* ---------- flat surfaces: hairlines instead of cards --------------------------------------------- */
.panel, .post-card, .step, .tier, .pillar, .other-svc a, .route-links a, .product, .mail-card, .sum,
.table-scroll, .message--card, .faq--card {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}
.post-card:hover, .other-svc a:hover, .route-links a:hover, .product:hover, .tier:hover { transform: none; box-shadow: var(--shadow-2); border-color: var(--hair); }
.post-card .k { padding: .1em .9em; border: 1px solid rgba(58, 58, 58, .4); border-radius: 30px; background: transparent; font-family: var(--font-jp); font-weight: 400; letter-spacing: .08em; color: var(--ink); }
.post-card .t { font-weight: 700; letter-spacing: .04em; }
.post-card:hover .t { color: var(--ink); }
.post-card .more { font-weight: 400; letter-spacing: .08em; color: var(--silver-ink); }
.post-card .meta time { font-family: var(--font-en); }
.other-svc .e, .route-links .k { font-family: var(--font-en); letter-spacing: .18em; }

.stats { background: transparent; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; }
.stat { box-shadow: -1px 0 0 var(--hair-2); }
.stat-fig { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); letter-spacing: -.01em; }
.stat-fig .u { font-family: var(--font-jp); font-weight: 400; color: var(--silver-ink); }
.stat-label { font-weight: 700; letter-spacing: .06em; }

.callout, .qa-item > p.answer, .answer { background: var(--fog); border-radius: 0; }
.callout::before, .answer::before { background: var(--silver); width: 2px; }
.qa-item > p.answer, .answer { font-weight: 600; }
.qa-item > h2, .qa-item > h3 { font-weight: 700; letter-spacing: .05em; line-height: 1.7; }

.checks li::before, .checklist li::before {
  background: none;
  width: auto;
  height: auto;
  margin-top: 0;
}
.checks li, .checklist li { grid-template-columns: 1.1rem minmax(0, 1fr); }
.checks li::before, .checklist li::before { content: "\30FB"; color: var(--silver); font-size: 1rem; line-height: inherit; }
.checks li { padding-left: 0; position: static; display: grid; gap: .3rem; }
.checks li::before { position: static; }

.reflist a::before { color: var(--silver-ink); }
.toc li::before { font-family: var(--font-en); color: var(--silver-ink); }
.toc a:hover, .toc a.is-active { text-decoration-color: var(--silver); }

/* ---------- FAQ: hairlines, a thin "+" that turns ------------------------------------------------------- */
.faq summary { font-weight: 600; letter-spacing: .04em; line-height: 1.8; grid-template-columns: minmax(0, 1fr) 1.5rem; color: var(--ink); }
.faq .chev { grid-column: 2; grid-row: 1; border-radius: 0; background: none; }
.faq .chev::before, .faq .chev::after { width: 1rem; height: 1px; background: var(--ink); }
.faq summary:hover .chev { background: none; }
.faq summary:hover .chev::before, .faq summary:hover .chev::after { background: var(--ink); }
.faq details[open]:not(.is-closing) .chev { transform: rotate(45deg); }
.faq details[open]:not(.is-closing) .chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a > div { padding: 0 2.5rem 1.4rem 0; color: var(--text); }
.faq-rel a { border: 1px solid var(--hair); border-radius: 30px; background: transparent; color: var(--ink); font-weight: 400; }
.faq-rel a:hover { background: var(--fog); }
.faq--card { padding: 0 1.5rem; }

/* ---------- lists, tables, timeline ---------------------------------------------------------------------- */
.timeline::before { background: var(--silver); }
.timeline li::before { border-color: var(--silver); background: var(--paper); }
.timeline li:hover::before { background: var(--silver); }
.timeline .when { font-family: var(--font-en); font-weight: 400; letter-spacing: .08em; color: var(--silver-ink); }
.timeline .what { font-weight: 600; color: var(--ink); }
.step::before, .olist li::before { font-family: var(--font-en); font-weight: 400; color: var(--silver-ink); }
.phase b { font-family: var(--font-en); letter-spacing: .18em; }
table.plans thead th { background: var(--fog-2); font-weight: 400; letter-spacing: .1em; color: var(--ink); }
table.plans tbody tr:hover { background: var(--fog); }
.pillar h3, .pillar h4, .pillar .h-3, .pillar .h-4 { font-weight: 700; letter-spacing: .06em; }
.pillar .k, .flow p.k { font-family: var(--font-en); letter-spacing: .18em; color: var(--silver-ink); }
.tier .off { background: transparent; border: 1px solid rgba(58, 58, 58, .4); color: var(--ink); font-weight: 400; }
.pill { background: transparent; border: 1px solid rgba(58, 58, 58, .4); color: var(--ink); font-weight: 400; }
.tag { background: transparent; border: 1px solid var(--hair); color: var(--text); font-weight: 400; letter-spacing: .06em; }
.legal-art ol > li::before { font-family: var(--font-en); color: var(--silver-ink); }
.legal-art ul > li::before { color: var(--silver); }
.deflist dt { font-weight: 400; letter-spacing: .08em; }
.deflist > div { border-bottom-color: var(--hair-2); }
.sum .meter > i { background: var(--silver); }
.sum-fig .n { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); }

/* ---------- media ------------------------------------------------------------------------------------ */
.duo, .portrait .duo, .reason-media .duo, .prod-fig .duo, .car--photos .duo { border-radius: 0; box-shadow: none; background: var(--fog-2); }
.portrait-cap { border-radius: 0; background: rgba(255, 255, 255, .92); color: var(--ink); }
.portrait-cap .r { font-family: var(--font-en); letter-spacing: .18em; color: var(--silver-ink); }
.quote { font-weight: 700; letter-spacing: .06em; line-height: 1.9; color: var(--ink); }
.quote::before { font-family: var(--font-en); color: var(--silver); opacity: .6; }
.sig::before { background: var(--silver); height: 1px; }
.band .duo::after { background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.band-cap { font-family: var(--font-en); letter-spacing: .2em; }
.mail-addr { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); letter-spacing: .02em; }
.copy { border-radius: 30px; font-weight: 400; letter-spacing: .08em; border-color: rgba(58, 58, 58, .5); color: var(--ink); }
.copy:hover, .copy[data-copied="1"] { background: var(--ink); color: var(--paper); }
.product .duo { border-radius: 0; }
.price { font-size: 1.5rem; }

/* ---------- the rest of the ground: everything on white reads charcoal, captions grey ----------------- */
.news-item .t, .deflist dd, .step h3, .legal-art h3, .metric dd, .stat-label, .h-4,
.plan-price .lead, .plan-price .unit, .plan-terms dd, .plan-name, .ba dd.after, .sum dd, .tier .nm, .other-svc .n, .route-links .v, .post-card .t, .portrait-cap .n, .mail-addr { color: var(--ink); }
.checks li, .checklist li, .values dd, .step p, .legal-art p, .legal-art li, .faq-rel, .toc li, .reflist a, .art-meta, .art-meta time, .art-meta a,
.ba dd, .case-text p, .svc-group-desc, .poem p, .contact-text p, .story-note { color: var(--text); }
.deflist dd .sub, .stat-desc, .metric dt, .metric .was, .ba dt, .plan-for, .plan-terms dt, .legal-meta, .crumbs, .figure-note, .tier .nt, .tier .dl, .sum dt { color: var(--mute); }
.mail-card, .sum { background: var(--fog); border-color: var(--hair); }
.mail-aside { border-left-color: var(--hair); }
@media (max-width: 899px) { .mail-aside { border-top-color: var(--hair); } }
.strip::-webkit-scrollbar-track { background: var(--fog-2); }
.strip::-webkit-scrollbar-thumb { background: var(--silver); }
.strip { scrollbar-color: var(--silver) transparent; }
.qa-item > p.answer, .answer, .callout { color: var(--ink); }
.callout b { color: var(--ink); }
.other-svc a, .route-links a, .post-card, .tier, .product { transition: background-color var(--t) var(--spring), box-shadow var(--t) var(--spring); }
.other-svc a:hover, .route-links a:hover, .post-card:hover, .tier:hover, .product:hover { background: var(--fog); }
.chev, .svc-arw { color: var(--ink); }

/* ---------- accessibility preferences (serif theme) ---------------------------------------------------- */
/* reduced motion: the rings are drawn once (js-serif), the headline appears whole, nothing travels or scales */
@media (prefers-reduced-motion: reduce) {
  .js .hero-mark { animation: none; }
  .hero-text, .hero-mark { animation: none !important; }
  .scroll-cue i::after { animation: none; }
  .svc:hover .svc-media img, .duo:hover img { transform: none; }
  .scroll-cue { transition: none; }
  /* the choreography of 65-serif-motion.css becomes plain short fades */
  @keyframes st-wipe   { from { opacity: 0; clip-path: inset(0); } to { opacity: 1; clip-path: inset(0); } }
  @keyframes st-square { from { clip-path: inset(0); } }
  @keyframes line-up   { from { opacity: 0; transform: none; } }
  @keyframes line-draw { from { opacity: 0; transform: none; } }
  @keyframes wipe-up   { from { opacity: 0; clip-path: inset(0); } to { opacity: 1; clip-path: inset(0); } }
  @keyframes settle    { from { scale: 1; } }
  .js .st[data-reveal]:not(.is-in) .st-word, .js .media-wipe[data-reveal]:not(.is-in) img { clip-path: none; }
  .js .st[data-reveal]:not(.is-in), .js .media-wipe[data-reveal]:not(.is-in) { opacity: 0; }
  .js .st[data-reveal].is-in, .js .media-wipe[data-reveal].is-in { animation: fade .3s linear backwards; }
  .js .st-connector[data-reveal]:not(.is-in) { transform: none; opacity: 0; }
  .case-row:hover .case-media img { transform: none; }
  .btn, .btn--ghost, .btn--block { transition: color var(--t-fast) linear, background-color var(--t-fast) linear; }
}

/* reduced transparency: an opaque header and menu, no blur */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .menu, .nav-panel, .portrait-cap { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* more contrast: darker lines and secondary text; the base part's brown gold is overridden */
@media (prefers-contrast: more) {
  :root {
    --hair: rgba(58, 58, 58, .5); --hair-2: rgba(58, 58, 58, .34); --hair-gold: rgba(62, 62, 60, .8);
    --ink: #1F1F1E; --text: #2B2B2A; --mute: #4A4A47; --silver-ink: #3E3E3C; --silver: #5C5C59; --slate: #3E3E3C; --gold-ink: #3E3E3C;
  }
  .st-word::after, .page-en::after { border-color: var(--ink); border-width: 2px; }
  .st-connector { background: var(--ink); }
  .btn { border-width: 2px; border-color: var(--ink); }
  .hero::after { display: none; }
  .hero-en, .hero-sub, .hero-ind a, .scroll-cue { color: #FFFFFF; }
}

/* print: the hero and the band go white with dark type; nothing waits for the viewport on paper */
@media print {
  .moon-rings, .hero-mark, .scroll-cue, .hero::after, .recruit-banner img { display: none !important; }
  .hero, .hero-stage { min-height: 0; }
  .hero, .recruit-banner, .site-footer, .company-panel, .news-panel, .st-section--pale, .st-section--grad { background: #fff; color: #000; }
  .hero-h1, .hero-sub, .hero-en, .hero-ind a, .recruit-banner p { color: #000; text-shadow: none; }
  .st-word, .st-word::after, .media-wipe img, .page-en::after { clip-path: none !important; animation: none !important; }
  .poem p, .values > div, .deflist > div, .news-item, .recruit-banner p, .fig b small, .st-connector, .st-connector::after,
  .hero-text, .hero-mark { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ---------- 33. reveal ----------------------------------------------------------- */
/* Hidden only while scripts are running (the <html> gets .js in <head>), so a page
   without scripts still shows everything. The keyframe only names the "from" state:
   after it ends the element goes back to its own styles, so hover lifts keep working. */
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }
@keyframes rise   { from { opacity: 0; transform: translateY(16px); } }

.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in {
  animation: reveal var(--t-slow) var(--spring) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* the first screen animates by CSS alone: it must never sit empty while a script loads */
.js .hero [data-reveal]:not(.is-in),
.js .hero [data-reveal].is-in {
  opacity: 1;
  animation: rise var(--t-slow) var(--spring) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}

/* ---------- 34. accessibility preferences ------------------------------------------- */
/* reduced motion: no travel, no scale, no overshoot — short fades that keep the feedback */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 120ms; --t: 160ms; --t-slow: 240ms; --spring: ease-out; }
  html { scroll-behavior: auto; }
  @keyframes reveal { from { opacity: 0; } }
  @keyframes rise   { from { opacity: 0; } }
  .js [data-reveal].is-in { animation-delay: 0s; }
  .svc:hover, .post-card:hover, .product:hover, .tier:hover, .other-svc a:hover, .route-links a:hover,
  .btn--solid:hover { transform: none; }
  .svc:hover .svc-media img, .duo:hover img, a:hover .duo img { transform: none; }
  .brand:hover .brand-logo { transform: none; }
  .menu { transform: none; }
  .menu-col a { transform: none; }
}

/* reduced transparency: solid surfaces, no blur */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .nav-panel, .menu, .portrait-cap, .hero-chip span {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* more contrast: heavier lines, darker secondary text */
@media (prefers-contrast: more) {
  :root {
    --hair: rgba(17, 18, 20, .45);
    --hair-2: rgba(17, 18, 20, .3);
    --hair-gold: rgba(94, 72, 24, .7);
    --mute: #4A4E55;
    --text: #23262B;
    --gold-ink: #5C4616;
  }
  .site-header { box-shadow: 0 1px 0 var(--ink); }
  .btn--ghost { border-color: var(--ink); }
  .panel, .case, .plan, .svc, .post-card, .step, .tier, .pillar, .product { border-color: var(--hair); box-shadow: none; }
}

/* ---------- 35. print -------------------------------------------------------------------- */
@media print {
  .site-header, .menu, .progress, .skip, .cta, .hero-canvas, .burger { display: none !important; }
  body { color: #000; background: #fff; }
  .js [data-reveal] { opacity: 1 !important; animation: none !important; }
  .hero, .page-head { padding-top: 1.5rem; background: none; }
  a { text-decoration: underline; }
}