/* Sakura Indo Tech — site styles
   "Doodle" look: cream paper, cobalt serif headings, hand-written notes,
   hand-drawn coral / lime ink doodles and pastel sticky notes with tape.
   One accent (cobalt). Coral and lime are doodle inks; lilac, butter, lime
   and blush are pale note surfaces. */

:root {
  --cream: #fbf6ec;
  --cream-2: #f5eedf;
  --paper: #fffdf8;
  --ink: #17171f;
  --ink-2: #44434e;
  --ink-3: #66646f;
  --cobalt: #2443e0;
  --cobalt-deep: #1a32b4;
  --cobalt-soft: #dfe5fd;
  --coral: #ef6a57;
  --coral-ink: #c2412d;      /* coral dark enough for text */
  --coral-soft: #fbe2db;
  --lime: #a9c838;
  --lime-soft: #edf3cf;
  --lilac: #cdbfed;
  --lilac-soft: #ece6fb;
  --butter: #f6df92;
  --butter-soft: #fbf0c9;
  --blush: #fadfda;
  --sky-soft: #dde5fb;
  --success: #2f6b35;
  --danger: #b23a27;
  --line: rgba(23, 23, 31, .12);
  --line-2: rgba(23, 23, 31, .22);
  --line-ink: rgba(23, 23, 31, .86);
  --shadow-1: 0 1px 2px rgba(58, 44, 20, .06), 0 3px 10px rgba(58, 44, 20, .05);
  --shadow-2: 0 2px 4px rgba(58, 44, 20, .05), 0 14px 34px -10px rgba(58, 44, 20, .18);
  --shadow-3: 0 4px 8px rgba(58, 44, 20, .06), 0 30px 60px -18px rgba(58, 44, 20, .26);

  --f-display: "Young Serif", "Zen Antique Soft", Georgia, serif;
  --f-body: "Figtree", "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  --f-hand: "Kalam", "Klee One", "Bradley Hand", cursive;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 112px;
  --r-sm: 14px; --r-md: 24px; --r-pill: 999px;
  --note-r: 30px 26px 34px 24px / 26px 32px 24px 30px;
  --wrap: 1240px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --tape-lime: rgba(169, 200, 56, .5);
  --tape-lilac: rgba(205, 191, 237, .8);
  --tape-coral: rgba(239, 106, 87, .38);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
html[data-lang="ja"] body { line-height: 1.85; font-feature-settings: "palt" 1; letter-spacing: .02em; }
img, svg { display: block; max-width: 100%; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--cobalt-deep); }
::selection { background: var(--cobalt); color: var(--paper); }
:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }

/* ---- Language switching: every bilingual string is a pair of spans ---- */
html[data-lang="en"] body [lang="ja"] { display: none !important; }
html[data-lang="ja"] body [lang="en"] { display: none !important; }

/* ---- Type ---- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; color: var(--cobalt); margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.12; letter-spacing: -.018em; color: var(--ink); }
h4 { font-size: 1.12rem; color: var(--ink); line-height: 1.25; }
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] h3, html[data-lang="ja"] h4 { letter-spacing: 0; line-height: 1.35; }
html[data-lang="ja"] h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
html[data-lang="ja"] h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.jp-term { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); white-space: nowrap; letter-spacing: 0; }

/* Hand-written kicker above headings */
.eyebrow {
  display: inline-block; font-family: var(--f-hand); font-size: 1.3rem; line-height: 1.2;
  color: var(--coral-ink); transform: rotate(-2deg); margin-bottom: var(--s3);
}

.wrap { width: min(100% - 2 * clamp(20px, 4.2vw, 48px), var(--wrap)); margin-inline: auto; }
.section { padding: clamp(80px, 9vw, 124px) 0; position: relative; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.section.alt { background: var(--cream-2); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); }

.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; transform: translateY(-160%); transition: transform .26s var(--ease-out); }
.skip-link:focus { transform: none; color: var(--paper); }

/* Hand-drawn ink */
.doodle { position: absolute; pointer-events: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ul { position: relative; display: inline-block; white-space: nowrap; }
.ul > svg { position: absolute; left: -2%; bottom: -.36em; width: 104%; height: auto; color: var(--coral); pointer-events: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(251, 246, 236, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.header-row { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand svg { width: 34px; height: 34px; transition: transform .64s var(--ease-out); }
.brand:hover svg { transform: rotate(90deg); }
.brand-name { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.05; }
.brand-name small { display: block; font-family: var(--f-mono); font-size: .62rem; color: var(--ink-3); letter-spacing: .06em; margin-top: 2px; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.main-nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 11px; font-weight: 600; font-size: .92rem; color: var(--ink-2); text-decoration: none; border-radius: var(--r-pill); white-space: nowrap; }
.main-nav a:hover { color: var(--ink); }
.nav-ink { position: absolute; left: 8px; bottom: 4px; width: calc(100% - 16px); height: 8px; color: var(--cobalt); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: scaleX(.6); transform-origin: left; transition: opacity .26s ease, transform .26s var(--ease-out); }
.main-nav a:hover .nav-ink { opacity: .35; transform: none; }
.main-nav a[aria-current="page"] { color: var(--cobalt); }
.main-nav a[aria-current="page"] .nav-ink { opacity: 1; transform: none; }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
.lang-switch { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); padding: 2px; background: var(--paper); }
.lang-switch button { border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2); padding: 6px 11px; min-height: 34px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.menu-toggle { display: none; border: 1.5px solid var(--line-ink); background: transparent; border-radius: var(--r-pill); width: 46px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav { display: none; }

@media (max-width: 1200px) {
  .main-nav, .header-actions .btn { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav[data-open="true"] { display: block; padding-top: var(--s3); padding-bottom: var(--s5); }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav a { display: block; padding: 12px 0; font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
  .mobile-nav a[aria-current="page"] { color: var(--cobalt); }
  .mobile-nav .nav-ink { display: none; }
  .mobile-nav .btn { margin-top: var(--s5); width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--paper); border-bottom: 0; }
}

/* ---- Buttons: pills with a solid drop ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s ease, color .16s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform .26s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 5px 0 var(--cobalt); }
.btn-primary:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 6px 0 var(--cobalt); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cobalt); }
.btn-light { background: var(--cobalt); color: var(--paper); box-shadow: 0 5px 0 var(--ink); }
.btn-light:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 6px 0 var(--ink); }
.btn-light:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-outline, .btn-ghost-light { background: transparent; color: var(--ink); border-color: var(--line-ink); }
.btn-outline:hover, .btn-ghost-light:hover { background: var(--paper); color: var(--ink); }
.btn-outline:active, .btn-ghost-light:active { transform: scale(.97); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .94rem; box-shadow: 0 4px 0 var(--cobalt); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Heroes ---- */
.hero { position: relative; padding: clamp(32px, 5vw, 72px) 0 var(--s8); }
.hero .lead { margin-bottom: var(--s6); }

/* The kicker inside a hand-drawn pill, as on the reference hero */
.hand-note { position: relative; display: inline-flex; align-items: center; padding: 9px 22px 13px; font-family: var(--f-hand); font-size: 1.2rem; line-height: 1.2; color: var(--ink); transform: rotate(-3deg); margin-bottom: var(--s5); }
.hand-note > span { position: relative; }
.hand-note > svg { position: absolute; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
.hand-note > svg.pill-line { inset: 0; width: 100%; height: 100%; stroke-width: 1.9; }
.hand-note > svg.pill-under { left: 18px; bottom: 8px; width: calc(100% - 36px); height: 8px; color: var(--coral); stroke-width: 1.7; }
.hand-note > svg path { vector-effect: non-scaling-stroke; }

.page-hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.page-hero h1 { position: relative; display: block; width: fit-content; max-width: 18ch; padding-bottom: .12em; }
/* coral hand-drawn underline under every inner-page title */
.page-hero h1::after {
  content: ""; position: absolute; left: 0; bottom: -.14em; width: min(60%, 260px); height: 22px; background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22'%3E%3Cpath d='M4 13C60 7 120 15 180 10c40-3 80-1 116 2M34 18c56-4 126 1 206-3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22'%3E%3Cpath d='M4 13C60 7 120 15 180 10c40-3 80-1 116 2M34 18c56-4 126 1 206-3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
/* a doodled blossom in the margin of every inner-page hero */
.page-hero::after {
  content: ""; position: absolute; right: max(2vw, 16px); top: clamp(40px, 8vw, 90px); width: clamp(80px, 10vw, 140px); aspect-ratio: 1; background: var(--coral); opacity: .85; transform: rotate(12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M51.3 40.9C61.4 36.1 57.5 16.6 47.5 17.4 37.6 18.1 36.6 38 48.3 41.1M58.6 46.6C67.9 53.3 84.6 39 78.9 30.6 73.2 22.1 53.7 32.2 56.9 44.1M56.8 56.2C54.8 67.7 73.2 75.4 78.4 66.5 83.6 57.6 67.7 45.4 58.3 53.7M48.3 59.1C36.8 63.4 40.1 81.9 51 81.6 61.9 81.2 64.1 62.5 51.3 59M41.4 53.2C31.9 46 17.1 58.8 22.9 67.7 28.6 76.6 46.3 68.2 43 55.8M50 47a3 3 0 1 0 .1 0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M51.3 40.9C61.4 36.1 57.5 16.6 47.5 17.4 37.6 18.1 36.6 38 48.3 41.1M58.6 46.6C67.9 53.3 84.6 39 78.9 30.6 73.2 22.1 53.7 32.2 56.9 44.1M56.8 56.2C54.8 67.7 73.2 75.4 78.4 66.5 83.6 57.6 67.7 45.4 58.3 53.7M48.3 59.1C36.8 63.4 40.1 81.9 51 81.6 61.9 81.2 64.1 62.5 51.3 59M41.4 53.2C31.9 46 17.1 58.8 22.9 67.7 28.6 76.6 46.3 68.2 43 55.8M50 47a3 3 0 1 0 .1 0'/%3E%3C/svg%3E") no-repeat center / contain;
}
.page-hero .lead { margin-top: clamp(22px, 3vw, 34px); margin-bottom: 0; }
.breadcrumb { font-size: .9rem; color: var(--ink-3); margin-bottom: clamp(22px, 3vw, 40px); }
.breadcrumb a { color: var(--ink-2); font-weight: 550; text-decoration: none; }
.breadcrumb a:hover { color: var(--cobalt); }

/* Home: intro and the two services share the first screen */
.home-hero { padding: clamp(20px, 3vw, 40px) 0 var(--s8); }
.home-hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.7rem); max-width: 24ch; margin-bottom: var(--s4); }
html[data-lang="ja"] .home-hero h1 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); max-width: none; }
.home-hero .lead { margin-bottom: var(--s6); }
.home-hero .hand-note { margin-bottom: var(--s4); }
.hero-doodle-loop { width: clamp(100px, 10vw, 150px); right: 7%; top: 0; color: var(--coral); transform: rotate(6deg); }
.hero-doodle-sparkle { width: 48px; right: 26%; top: 70px; color: var(--lime); }
.hero-doodle-flower { width: 84px; right: 1%; top: 120px; color: var(--coral); }

/* ---- Market facts ---- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.fact { position: relative; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--note-r); }
.fact:nth-child(1) { background: var(--lime-soft); transform: rotate(-1deg); }
.fact:nth-child(2) { background: var(--lilac-soft); transform: rotate(.8deg); }
.fact:nth-child(3) { background: var(--butter-soft); transform: rotate(-.6deg); }
.fact-num { font-family: var(--f-display); font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: var(--cobalt); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.fact-num small { font-size: .5em; color: var(--ink-3); }
.fact p { color: var(--ink-2); margin-bottom: var(--s3); }
.source { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); }
.source a { color: var(--ink-2); }

/* ---- Grids & cards ---- */
.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--shadow-1); }
.card h3 { margin-bottom: var(--s3); }
.card > p:last-child, .card > ul:last-child { margin-bottom: 0; }
.card.flex { display: flex; flex-direction: column; }
.card-icon { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); display: grid; place-items: center; margin-bottom: var(--s4); background: var(--paper); }
.card-icon svg { width: 22px; height: 22px; }
.card-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); text-decoration: none; margin-top: auto; padding-top: var(--s4); }
.card-link svg { width: 18px; height: 18px; transition: transform .26s var(--ease-out); }
.card-link:hover { color: var(--cobalt); }
.card-link:hover svg { transform: translateX(3px); }

/* Example-project cards become pastel sticky notes */
.card:has(> .label.sakura) { border: 0; border-radius: var(--note-r); box-shadow: none; }
.grid > .card:has(> .label.sakura):nth-child(4n+1) { background: var(--lime-soft); transform: rotate(-1deg); }
.grid > .card:has(> .label.sakura):nth-child(4n+2) { background: var(--lilac-soft); transform: rotate(.8deg); }
.grid > .card:has(> .label.sakura):nth-child(4n+3) { background: var(--butter-soft); transform: rotate(-.6deg); }
.grid > .card:has(> .label.sakura):nth-child(4n+4) { background: var(--blush); transform: rotate(.6deg); }
.card:has(> .label.sakura) .card-icon { background: transparent; }

/* The two service "doors": taped pastel notes */
.door { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: var(--note-r); background: var(--lilac-soft); }
.grid > .door:nth-child(1) { background: var(--lilac-soft); transform: rotate(-.7deg); }
.grid > .door:nth-child(2) { background: var(--butter-soft); transform: rotate(.7deg); }
.door::before { content: ""; position: absolute; top: -12px; left: 34px; width: 88px; height: 24px; background: var(--tape-lime); transform: rotate(-5deg); border-radius: 2px; }
.grid > .door:nth-child(2)::before { left: auto; right: 34px; background: var(--tape-coral); transform: rotate(4deg); }
.door-tag { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-3); margin-bottom: var(--s3); letter-spacing: .02em; }
.door h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); color: var(--cobalt); letter-spacing: -.03em; }
.door p { color: var(--ink-2); }
.door ul { margin: var(--s4) 0 var(--s6); }
.door .btn { align-self: flex-start; margin-top: auto; }
.home-hero .door { padding: clamp(24px, 2.6vw, 34px); }
.home-hero .door ul { margin: var(--s2) 0 var(--s5); }
.home-hero .door ul li { margin-bottom: 4px; }
.home-hero .door p { margin-bottom: var(--s2); }
html[data-lang="ja"] .home-hero .door { line-height: 1.75; }

.bridge-note { position: relative; margin-top: clamp(28px, 3vw, 40px); padding: var(--s5) var(--s6); border: 1.5px dashed var(--line-ink); border-radius: var(--r-md); display: flex; gap: var(--s4); align-items: flex-start; background: var(--paper); }
.bridge-note svg { width: 26px; height: 26px; color: var(--cobalt); flex-shrink: 0; margin-top: 2px; }
.bridge-note p { margin: 0; color: var(--ink-2); }
.bridge-note strong { color: var(--ink); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.4px solid var(--cobalt); border-bottom: 2.4px solid var(--cobalt); border-radius: 1px; transform: rotate(-48deg); }

/* Steps: hand-written numbers in a hand-drawn circle */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding: 68px var(--s4) 0 0; border-top: 1.5px dashed var(--line-2); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 14px; left: 0; width: 42px; height: 42px; display: grid; place-items: center; font-family: var(--f-hand); font-weight: 700; font-size: 1.6rem; color: var(--cobalt); line-height: 1; border: 2px solid var(--cobalt); border-radius: 52% 48% 55% 45% / 48% 55% 45% 52%; transform: rotate(-6deg); }
.steps h3 { font-size: 1.35rem; margin-bottom: var(--s2); }
.steps p { color: var(--ink-2); font-size: .98rem; margin: 0; }

/* Chips → small mono tags */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { padding: 6px 12px; border-radius: 10px; background: rgba(255, 253, 248, .85); border: 1px solid var(--line); font-family: var(--f-mono); font-size: .8rem; color: var(--ink); }

/* Technology groups: the reference's services list */
.tech-group { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: var(--s5); align-items: center; padding: 30px 20px; border-bottom: 1.5px solid var(--line-ink); isolation: isolate; }
.section-head + .tech-group { border-top: 1.5px solid var(--line-ink); }
.tech-group::before { content: ""; position: absolute; inset: 6px 0; border-radius: var(--r-md); background: var(--lilac-soft); opacity: 0; transform: scaleY(.92); transition: opacity .26s ease, transform .26s var(--ease-out); z-index: -1; }
.tech-group:nth-of-type(2n)::before { background: var(--lime-soft); }
.tech-group:nth-of-type(3n)::before { background: var(--butter-soft); }
.tech-group:hover::before { opacity: 1; transform: none; }
.tech-group h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; margin-bottom: 4px; transition: color .16s ease; }
.tech-group:hover h3, .tech-group.lead-group h3 { color: var(--cobalt); }
.tech-group p { font-size: .95rem; color: var(--ink-2); margin: 0; }

/* Founders: taped ID notes */
.founder { display: grid; grid-template-columns: 96px 1fr; gap: var(--s5); align-items: start; }
.card.founder { border: 0; border-radius: 12px; box-shadow: var(--shadow-2); transform: rotate(-1.2deg); }
.card.founder + .card.founder, .grid > .card.founder:nth-child(2) { transform: rotate(1.2deg); }
.card.founder::before { content: ""; position: absolute; top: -11px; left: 50%; width: 78px; height: 22px; margin-left: -39px; background: var(--tape-lime); transform: rotate(-4deg); border-radius: 2px; }
.card.founder + .card.founder::before, .grid > .card.founder:nth-child(2)::before { background: var(--tape-lilac); transform: rotate(3deg); }
.avatar { width: 96px; height: 96px; border-radius: 46% 49% 38% 42% / 46% 48% 40% 44%; background: var(--lilac); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.9rem; color: var(--ink); position: relative; overflow: hidden; }
.avatar.lg { width: 100%; height: auto; aspect-ratio: 1; font-size: 4.4rem; }
.avatar-note { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--f-hand); font-size: .8rem; color: var(--ink-2); }
.avatar.lg .avatar-note { font-size: 1.1rem; bottom: 18px; }
.founder h3 { font-family: var(--f-hand); font-weight: 700; font-size: 1.7rem; color: var(--ink); margin-bottom: 4px; letter-spacing: 0; }
.role { font-size: .95rem; color: var(--cobalt); font-weight: 650; margin-bottom: var(--s3); }
.meta-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--s3); font-size: .82rem; }
.meta-list li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); font-weight: 650; color: var(--ink); }
.meta-list li a { text-decoration: none; }

/* Labels */
.label { display: inline-flex; align-items: center; align-self: flex-start; min-height: 26px; padding: 0 11px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); font-size: .78rem; font-weight: 650; color: var(--ink-2); margin-bottom: var(--s3); }
.label.sakura { font-family: var(--f-hand); font-size: 1.05rem; font-weight: 700; background: transparent; border: 0; padding: 0; color: var(--coral-ink); transform: rotate(-2deg); }
.project-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px dashed rgba(23, 23, 31, .25); }
.project-meta dt { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-3); padding-top: 2px; }
.project-meta dd { margin: 0; color: var(--ink); font-weight: 600; }

/* Testimonials (placeholders until written permission exists) */
.quotes { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: var(--s5); overflow-x: auto; padding: 18px 4px var(--s4); scroll-snap-type: x mandatory; }
.quote { position: relative; scroll-snap-align: start; background: var(--paper); border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: var(--s6) var(--s5) var(--s5); display: flex; flex-direction: column; margin: 0; }
.quote::before { content: "\201C"; position: absolute; top: -10px; left: 18px; font-family: var(--f-display); font-size: 4rem; line-height: 1; color: var(--coral); }
.quote blockquote { margin: 0 0 var(--s4); font-family: var(--f-display); color: var(--ink-3); font-size: 1.05rem; line-height: 1.35; }
.quote footer { margin-top: auto; font-size: .85rem; color: var(--ink-3); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1.5px solid var(--line-ink); border-radius: var(--r-md); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px dashed var(--line-2); vertical-align: top; }
thead th { background: var(--cream-2); font-family: var(--f-mono); font-weight: 500; font-size: .78rem; color: var(--ink-3); white-space: nowrap; letter-spacing: .02em; border-bottom: 1.5px solid var(--line-ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 650; width: 28%; color: var(--ink); }
.tbc { color: var(--coral-ink); font-weight: 600; }

/* FAQ */
.faq details { border-bottom: 1.5px solid var(--line-ink); }
.faq details:first-child { border-top: 1.5px solid var(--line-ink); }
.faq summary { cursor: pointer; padding: var(--s5) 56px var(--s5) 0; font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.015em; color: var(--ink); list-style: none; position: relative; }
.faq summary:hover { color: var(--cobalt); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-body); font-size: 1.3rem; line-height: 1; transition: transform .26s var(--ease-out), background-color .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.faq details > div { padding-bottom: var(--s5); color: var(--ink-2); max-width: 70ch; }

/* Notices */
.notice { position: relative; display: flex; gap: var(--s4); padding: var(--s6); border-radius: var(--note-r); background: var(--coral-soft); transform: rotate(-.5deg); }
.notice::before { content: ""; position: absolute; top: -12px; left: 34px; width: 84px; height: 24px; background: var(--tape-coral); transform: rotate(-5deg); }
.notice svg { width: 26px; height: 26px; color: var(--coral-ink); flex-shrink: 0; margin-top: 2px; }
.notice h2, .notice h3 { color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }
.notice.info { background: var(--sky-soft); transform: none; }
.notice.info::before { display: none; }
.notice.info svg { color: var(--cobalt); }

/* Sample weekly report: a taped paper sheet */
.report { position: relative; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow-3); font-size: .92rem; transform: rotate(1.5deg); margin: 14px 0 0; }
.report::before { content: ""; position: absolute; top: -12px; right: 18%; width: 96px; height: 26px; background: var(--tape-lilac); transform: rotate(-4deg); }
.report-head { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px dashed var(--line-2); font-family: var(--f-hand); font-weight: 700; font-size: 1.15rem; }
.report-body { padding: var(--s5); }
.report-body h4 { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-3); margin: var(--s4) 0 var(--s2); }
.report-body h4:first-child { margin-top: 0; }
.report-body ul { margin: 0; padding-left: 1.2em; }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; font-size: .74rem; font-weight: 700; border-radius: var(--r-pill); background: var(--lime-soft); color: var(--success); border: 1px solid rgba(47, 107, 53, .3); }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 650; font-size: .95rem; color: var(--ink); }
.field .req { font-family: var(--f-mono); color: var(--coral-ink); font-weight: 500; font-size: .72rem; margin-left: 8px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: 13px 16px; min-height: 52px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(23, 23, 31, .4); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(36, 67, 224, .16); }
.field .help { font-size: .85rem; color: var(--ink-3); }
.field .error { font-size: .86rem; color: var(--danger); display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea, .field[data-invalid="true"] select { border-color: var(--danger); }
.field[data-invalid="true"] .error { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding: 0 16px; min-height: 44px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; color: var(--ink-2); }
.radio-row label:hover { border-color: var(--ink); color: var(--ink); }
.radio-row label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.radio-row input { width: 16px; height: 16px; min-height: 0; accent-color: var(--cobalt); }
.form-status { margin-top: var(--s4); font-size: .95rem; }

/* CTA bands: a centred closing, as on the reference */
.section.dark { background: var(--cream-2); text-align: center; overflow: hidden; }
.section.dark .muted { color: var(--ink-2); }
.cta-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s6); position: relative; }
.cta-band h2 { max-width: 20ch; margin: 0 auto var(--s3); font-size: clamp(2rem, 4.4vw, 3.6rem); }
.cta-band p { margin: 0 auto; max-width: 56ch; font-size: 1.1rem; }
.cta-band .btn-row { justify-content: center; }
.section.dark::before, .section.dark::after { content: ""; position: absolute; pointer-events: none; }
.section.dark::before {
  left: 7%; top: 22%; width: 56px; height: 56px; background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4c2 18 8 24 26 26-18 2-24 8-26 26-2-18-8-24-26-26 18-2 24-8 26-26z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 4c2 18 8 24 26 26-18 2-24 8-26 26-2-18-8-24-26-26 18-2 24-8 26-26z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.section.dark::after {
  right: 7%; bottom: 18%; width: 130px; height: 65px; background: var(--coral); transform: rotate(-8deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cpath d='M6 60C26 34 58 16 86 28c18 8 18 32 2 35-16 3-19-18 1-27 22-10 46-2 60 16M136 47l14 6-3-14' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cpath d='M6 60C26 34 58 16 86 28c18 8 18 32 2 35-16 3-19-18 1-27 22-10 46-2 60 16M136 47l14 6-3-14' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Prose and splits */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.split.wide-left { grid-template-columns: 1.4fr 1fr; }
.split.profile { grid-template-columns: 340px 1fr; }
.prose h2 { margin-top: var(--s7); }
.prose h2:first-child, .prose .eyebrow + h2 { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; padding: 16px 0; border-top: 1px dashed var(--line-2); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .when { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-3); padding-top: 4px; grid-row: span 2; }
.timeline h4 { margin: 0; font-family: var(--f-body); font-weight: 650; }
.timeline p { margin: 0; color: var(--ink-2); font-size: .97rem; }

/* ---- Footer: light, ending in a giant cobalt wordmark ---- */
.site-footer { background: var(--cream); padding: clamp(64px, 8vw, 100px) 0 36px; font-size: .95rem; color: var(--ink-2); border-top: 1.5px solid var(--line-ink); overflow: hidden; }
.site-footer a { color: var(--ink); text-decoration: none; font-weight: 550; }
.site-footer a:hover { color: var(--cobalt); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s7); }
.footer-grid h2 { font-family: var(--f-mono); font-size: .76rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-3); margin-bottom: var(--s4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.site-footer .brand { margin-bottom: var(--s4); }
.footer-base { border-top: 1px dashed var(--line-2); padding-top: var(--s5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s4); color: var(--ink-3); font-size: .85rem; }
.footer-word { font-family: var(--f-display); font-size: clamp(3rem, 12vw, 11rem); line-height: .9; letter-spacing: -.05em; color: var(--cobalt); margin-top: clamp(40px, 6vw, 80px); white-space: nowrap; }

/* Reveal (respects reduced motion) */
.js .reveal { opacity: 0; translate: 0 18px; transition: opacity .62s var(--ease-out), translate .62s var(--ease-out); }
.js .reveal.in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
  * { transition-duration: 0s !important; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .split, .split.wide-left, .split.profile { grid-template-columns: 1fr; gap: var(--s7); }
  .split.profile > div:first-child { max-width: 340px; }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tech-group { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 680px) {
  .g2, .g3, .g4, .form-grid, .facts, .steps, .footer-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 72px 1fr; }
  .avatar { width: 72px; height: 72px; font-size: 1.4rem; }
  .btn-row .btn { width: 100%; }
  .quotes { grid-template-columns: repeat(5, 82%); }
  .page-hero::after { width: 60px; top: 16px; opacity: .55; }
  .hero-doodle-loop, .hero-doodle-sparkle, .hero-doodle-flower { display: none; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline .when { grid-row: auto; }
  .notice { padding: var(--s5); }
  .section.dark::before, .section.dark::after { display: none; }
}
@media (max-width: 420px) {
  .header-row { gap: var(--s3); }
  .brand-name small { display: none; }
  .brand-name { font-size: 1.1rem; }
  .lang-switch button { padding: 6px 8px; }
}

/* Home hero: keep both services (and their buttons) on the first screen of a 1366×768 laptop */
.home-hero { padding-top: clamp(12px, 1.6vw, 24px); }
.home-hero .hand-note { margin-bottom: 6px; }
.home-hero .lead { max-width: 74ch; margin-bottom: var(--s5); font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.home-hero .door { padding: 24px 30px 28px; }
.home-hero .door h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: var(--s2); }
.home-hero .door-tag { margin-bottom: 6px; }
.home-hero .door ul { margin: var(--s2) 0 var(--s4); }
.home-hero .door ul li { margin-bottom: 2px; }
.home-hero .door .btn { min-height: 46px; }

/* Japanese: titles need more room per line; keep footer column labels small */
html[data-lang="ja"] .page-hero h1 { max-width: 20em; }
html[data-lang="ja"] .site-footer .footer-grid h2 { font-family: var(--f-mono); font-size: .76rem; line-height: 1.4; }
html[data-lang="ja"] .cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.footer-word { font-size: clamp(3rem, 11.4vw, 10.5rem); }
@media (max-width: 680px) {
  .ul { white-space: normal; }
  .home-hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  html[data-lang="ja"] .home-hero h1 { font-size: clamp(1.3rem, 6.2vw, 2rem); }
}

/* Home: 報連相 notes, big kanji on pastel paper */
.horenso-note { position: relative; padding: clamp(26px, 2.8vw, 38px); border-radius: var(--note-r); }
.horenso-note:nth-child(1) { background: var(--lime-soft); transform: rotate(-1deg); }
.horenso-note:nth-child(2) { background: var(--lilac-soft); transform: rotate(.8deg); margin-top: 24px; }
.horenso-note:nth-child(3) { background: var(--butter-soft); transform: rotate(-.6deg); margin-top: 8px; }
.horenso-note:nth-child(2)::before { content: ""; position: absolute; top: -12px; left: 30px; width: 84px; height: 24px; background: var(--tape-coral); transform: rotate(-5deg); }
.horenso-kanji { font-family: "Zen Antique Soft", var(--f-display); font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: .04em; color: var(--cobalt); margin: 0 0 var(--s3); }
.horenso-romaji { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); margin-bottom: var(--s4); }
.horenso-note p:last-child { color: var(--ink-2); margin: 0; }

/* Testimonial quotes */
.quote blockquote { color: var(--ink); }
.quote figcaption { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--ink-2); }

/* Home headline: one underline stroke, drawn below the letters so it never crosses them */
.home-hero h1 { padding-bottom: .22em; }
html[data-lang="ja"] .ul > svg { bottom: -.3em; }

/* Home hero: a single sakura doodle drawn one petal at a time, like a hand drawing it,
   held complete for a few seconds, then erased petal by petal; slowly turning throughout */
.home-hero .hero-doodle-flower { width: clamp(96px, 9vw, 132px); right: 4%; top: 28px; color: var(--coral); stroke-width: 2.2; animation: sakura-turn 40s linear infinite; }
.hero-doodle-flower path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sakura-draw 14s ease-in-out infinite; }
.hero-doodle-flower path:nth-child(2) { animation-delay: .8s; }
.hero-doodle-flower path:nth-child(3) { animation-delay: 1.6s; }
.hero-doodle-flower path:nth-child(4) { animation-delay: 2.4s; }
.hero-doodle-flower path:nth-child(5) { animation-delay: 3.2s; }
.hero-doodle-flower path:nth-child(6) { animation-delay: 4s; }
.hero-doodle-flower path:nth-child(7) { animation-delay: 4.8s; }
@keyframes sakura-draw { 0% { stroke-dashoffset: 1; } 6% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: -1; } }
@keyframes sakura-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-doodle-flower, .hero-doodle-flower path { animation: none; stroke-dashoffset: 0; }
}
.home-hero { padding-top: clamp(28px, 3.4vw, 48px); }

/* Header tagline: words spread evenly across the width of the name, equal gaps */
.brand-tag [lang="en"] { display: flex; justify-content: space-between; }
.brand-tag i { font-style: normal; }
.brand-name small.brand-tag { letter-spacing: .04em; }

/* Founder headshots inside the organic blob frame */
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.card.founder .avatar { width: 112px; height: 112px; }
.founder { grid-template-columns: 112px 1fr; }

/* ---- Founder profile pages (LinkedIn-style) ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.profile-hero { padding-bottom: 0; }
.profile-hero::after { display: none; }
.profile-section { padding-top: var(--s5); }
.profile-card { position: sticky; top: 96px; align-self: start; background: var(--paper); border-radius: 14px; padding: 22px 22px 26px; box-shadow: var(--shadow-2); transform: rotate(-1deg); }
.profile-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 88px; height: 24px; margin-left: -44px; background: var(--tape-lime); transform: rotate(-4deg); border-radius: 2px; z-index: 1; }
.profile-card .avatar.lg { margin-bottom: var(--s5); }
.profile-name { font-family: var(--f-hand); font-weight: 700; font-size: 2.2rem; line-height: 1.1; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; }
html[data-lang="ja"] .profile-name { font-size: 2.2rem; }
.profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s4) 0 var(--s3); }
.profile-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px dashed var(--line-2); font-size: .9rem; }
.profile-facts dt { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3); padding-top: 3px; }
.profile-facts dd { margin: 0; color: var(--ink-2); }
.profile-main > section { margin-bottom: clamp(48px, 6vw, 72px); }
.profile-main h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.profile-sub { font-size: 1.2rem; margin: var(--s6) 0 var(--s3); }

.xp { padding: var(--s5) 0; border-top: 1.5px solid var(--line-ink); }
.xp:last-of-type { border-bottom: 1.5px solid var(--line-ink); }
.xp-head { display: flex; gap: 16px; align-items: center; margin-bottom: var(--s4); }
.xp-logo { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.05rem; color: var(--cobalt); background: var(--paper); }
.xp-head h3 { margin: 0 0 2px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.xp-meta { margin: 0; font-family: var(--f-mono); font-size: .78rem; color: var(--ink-3); }
.xp-roles { list-style: none; margin: 0 0 0 26px; padding: 0 0 0 38px; border-left: 2px dashed var(--line-2); }
.xp-roles > li { position: relative; padding: 2px 0 18px; }
.xp-roles > li:last-child { padding-bottom: 4px; }
.xp-roles > li::before { content: ""; position: absolute; left: -47px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 2.4px solid var(--cobalt); }
.xp-roles h4 { font-family: var(--f-body); font-weight: 700; font-size: 1.08rem; margin: 0; }
.xp-when { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-3); margin: 2px 0 8px; }
.xp-roles ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.xp-roles ul li { margin-bottom: 6px; }
.xp .check-list { margin-left: 70px; }

.skill-groups { display: grid; grid-template-columns: 200px 1fr; gap: 16px 24px; margin: 0; }
.skill-groups dt { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); padding-top: 4px; }
.skill-groups dd { margin: 0; }

.profile-message { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--note-r); background: var(--lilac-soft); transform: rotate(.5deg); }
.profile-message h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.profile-message p { color: var(--ink-2); font-size: 1.08rem; }

@media (max-width: 960px) {
  .profile-card { position: relative; top: 0; }
  .skill-groups { grid-template-columns: 1fr; gap: 6px; }
  .skill-groups dd { margin-bottom: var(--s3); }
  .xp .check-list { margin-left: 0; }
}

/* Testimonial monograms: pastel initial circles (no photos of real people for fictional quotes) */
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.monogram { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 1rem; color: var(--ink); border: 1.5px solid var(--ink); }
.quote:nth-child(1) .monogram { background: var(--lime-soft); }
.quote:nth-child(2) .monogram { background: var(--lilac); }
.quote:nth-child(3) .monogram { background: var(--butter); }
.quote:nth-child(4) .monogram { background: var(--blush); }
.quote:nth-child(5) .monogram { background: var(--sky-soft); }

/* Phones and tablets: stack the founder cards so the text gets the full width */
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: var(--s4); }
  .card.founder .avatar { width: 104px; height: 104px; }
}
@media (max-width: 560px) {
  .bridge-note { padding: var(--s5); gap: var(--s3); }
  .bridge-note p { max-width: none; }
}
@media (max-width: 560px) {
  .table-wrap table:has(thead) { min-width: 560px; }
}

/* Japanese headings: break at phrase boundaries, not mid-word */
html[data-lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }

/* Tilted cards and doodles must never cause sideways scrolling on phones */
html, body { overflow-x: clip; }

/* Narrow phones (360–390px): keep logo, language switch and menu on one line */
@media (max-width: 400px) {
  .site-header .wrap { gap: var(--s2); }
  .site-header .brand { gap: 6px; }
  .site-header .brand svg { width: 28px; height: 28px; }
  .site-header .brand-name { font-size: 1rem; }
  .lang-switch button { padding: 5px 7px; font-size: .75rem; min-height: 32px; }
  .menu-toggle { width: 40px; height: 40px; }
}
@media (max-width: 340px) {
  .site-header .brand-name { font-size: .88rem; }
  .site-header .brand svg { width: 24px; height: 24px; }
  .lang-switch button { padding: 4px 6px; }
}