@charset "UTF-8";
/* =========================================================================
   株式会社採用コモン / SAIYO KOMON INC.
   Corporate site — design system

   Direction (2026-09-13 rebuild):
   Near-white ground, deep navy structure, one fresh blue accent.
   Hairline rules are the primary structural device — sections, cards and
   data are separated by 1px lines rather than boxes or shadows.
   Every heading is an oversized English display word with a small
   Japanese line under it; the Japanese carries the meaning, the English
   carries the rhythm.

   Swapping --c-primary re-brands the whole site.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* --- Type families ------------------------------------------------- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* --- Palette -------------------------------------------------------
     Cool, near-white grounds; navy ink; one fresh blue taken from the
     hexagon mark. The official logo itself is a deeper #2e5c92; the site
     keeps this brighter blue on purpose (decided 2026-10-06).
     Nothing warm — the reference reads BtoB-clean, and a
     bone ground would drag the blue towards grey. */
  --c-bone: #eef3f9;        /* alternating band                         */
  --c-bone-deep: #e2eaf4;   /* deeper band                              */
  --c-white: #ffffff;       /* page ground, cards, inputs               */
  --c-line: #dae3ee;        /* soft hairline                            */
  --c-rule: #8494a8;        /* structural hairline & meta text          */
  --c-ink: #15243c;         /* headings — deep navy, never pure black   */
  --c-ink-soft: #3d4c63;    /* body copy                                */
  --c-gray: #7b8a9e;        /* captions, labels                         */
  --c-panel: #23344e;       /* cards inside the dark band               */

  /* --- Accent — change these three to re-brand ----------------------- */
  --c-primary: #2b6cb8;
  --c-primary-bright: #1f7fd6;
  --c-primary-soft: #a3c6e8;

  /* --- Elevation ------------------------------------------------------
     The reference builds its buttons and its floating navigation out of
     one soft, low-contrast shadow rather than borders. */
  --shadow-pill:
    0 1px 2px rgba(21, 36, 60, 0.04),
    0 6px 16px rgba(21, 36, 60, 0.07),
    0 16px 40px rgba(21, 36, 60, 0.07);
  --shadow-pill-lift:
    0 2px 4px rgba(31, 108, 184, 0.10),
    0 10px 24px rgba(31, 108, 184, 0.18),
    0 22px 50px rgba(31, 108, 184, 0.14);

  /* --- Semantic ------------------------------------------------------ */
  --ground: var(--c-white);
  --ink: var(--c-ink);
  --ink-body: var(--c-ink-soft);
  --ink-mute: var(--c-gray);

  /* --- Layout -------------------------------------------------------- */
  --header-h: 72px;
  --gutter: clamp(20px, 1.9vw + 12.7px, 40px);
  --w-narrow: 1100px;
  --w-wide: 1680px;

  /* --- Fluid type scale ----------------------------------------------
     Steps mirror the reference: a dense small range for UI text and a
     long display range so the English words can run genuinely large. */
  --fs-x5s: 11px;
  --fs-x4s: 12px;
  --fs-x3s: 13px;
  --fs-x2s: clamp(13px, 0.1vw + 12.2px, 14px);
  --fs-xs: clamp(13px, 0.15vw + 12px, 14px);
  --fs-sm: clamp(14px, 0.1vw + 13.2px, 15px);
  --fs-md: clamp(15px, 0.1vw + 14.2px, 16px);
  --fs-lg: clamp(16px, 0.2vw + 14.5px, 18px);
  --fs-xl: clamp(17px, 0.3vw + 14.7px, 20px);
  --fs-2l: clamp(19px, 0.4vw + 15.9px, 23px);
  --fs-3l: clamp(21px, 0.5vw + 17.2px, 26px);
  --fs-4l: clamp(23px, 0.6vw + 18.4px, 29px);
  --fs-5l: clamp(24px, 0.8vw + 17.9px, 32px);
  --fs-6l: clamp(26px, 1vw + 18.8px, 36px);
  --fs-7l: clamp(27px, 1.2vw + 18.1px, 40px);
  --fs-8l: clamp(29px, 1.3vw + 19px, 44px);
  --fs-9l: clamp(31px, 1.7vw + 18px, 50px);
  --fs-10l: clamp(34px, 2.2vw + 17px, 58px);
  --fs-11l: clamp(36px, 2.6vw + 16px, 66px);
  --fs-12l: clamp(39px, 3.1vw + 15px, 74px);
  --fs-13l: clamp(41px, 3.6vw + 13px, 83px);
  --fs-14l: clamp(44px, 4.3vw + 11px, 94px);
  --fs-15l: clamp(47px, 5vw + 9px, 105px);
  --fs-16l: clamp(51px, 5.9vw + 5px, 118px);
  --fs-17l: clamp(54px, 6.9vw + 1px, 133px);

  /* --- Line heights --------------------------------------------------- */
  --lh-none: 1;
  --lh-sm: 1.1;
  --lh-md: 1.35;
  --lh-lg: 1.9;

  /* --- Spacing scale --------------------------------------------------- */
  --sp-x5s: 5px;
  --sp-x4s: 8px;
  --sp-x3s: clamp(10px, 0.5vw + 6px, 15px);
  --sp-x2s: clamp(15px, 0.9vw + 8px, 25px);
  --sp-xs: clamp(20px, 1.6vw + 8px, 40px);
  /* The lower bounds are what a phone actually gets. They used to sit high
     enough that two adjoining sections put ~150px of dead space on a 390px
     screen; the upper bounds and the scaling are unchanged, so desktop
     rhythm is untouched. */
  --sp-sm: clamp(24px, 2.5vw + 9px, 60px);
  --sp-md: clamp(32px, 3.5vw + 13px, 80px);
  --sp-lg: clamp(40px, 4.5vw + 15px, 100px);
  --sp-xl: clamp(46px, 5.5vw + 18px, 120px);
  --sp-2xl: clamp(54px, 6.5vw + 22px, 140px);
  --sp-3xl: clamp(64px, 8vw + 22px, 170px);

  /* --- Motion --------------------------------------------------------- */
  --dur: 0.3s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) { :root { --header-h: 86px; } }
@media (min-width: 1100px) { :root { --header-h: 104px; } }

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink-body);
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-lg);
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

::selection { background: var(--c-primary); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 4000;
  padding: 12px 20px;
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-sm);
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   3. UTILITIES
   ---------------------------------------------------------------------- */
.inner {
  width: 100%;
  max-width: calc(var(--w-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.inner--narrow { max-width: calc(var(--w-narrow) + var(--gutter) * 2); }

.en { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-sm); }
.jp { font-family: var(--font-jp); }
.mute { color: var(--ink-mute); }
.red { color: var(--c-primary); }
.nowrap { white-space: nowrap; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sections sit on the bone ground by default; a few flip to white or black. */
.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }
.section--white { background: var(--c-white); }
.section--tone { background: var(--c-bone); }
.section--deep { background: var(--c-bone-deep); }

/* A hairline that spans the content column, used to close sections. */
.rule { height: 1px; background: var(--c-rule); border: 0; margin: 0; }

/* The red-dot label used before every small caption in the system. */
.dot-label {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 8px;
  align-items: center;
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--lh-md);
  color: var(--c-gray);
}
.dot-label::before {
  content: "";
  width: 6px;
  aspect-ratio: 1;
  background: var(--c-primary);
  border-radius: 50%;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--ink-body);
}

/* Link with an underline that wipes in from the left. */
.ulink {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: bottom 1px right;
  background-size: 0 1px;
  transition: background-size var(--dur) var(--ease), background-position var(--dur) var(--ease);
}
.ulink-parent:hover .ulink,
a.ulink:hover {
  background-position: bottom 1px left;
  background-size: 100% 1px;
}

/* -------------------------------------------------------------------------
   4. HEADING GROUPS
   The signature pair: a very large English word with a small Japanese
   heading underneath. `--hg-en` controls the English size per context.
   ---------------------------------------------------------------------- */
.hgroup {
  --hg-en: var(--fs-16l);
  --hg-jp: var(--fs-md);
  display: grid;
  row-gap: var(--sp-x4s);
}
/* The site's one colour rule:
     ページ最大の英字見出し -> blue  .phead__en, .hgroup with no size modifier
     中・小の英字見出し     -> ink   .hgroup--row / --sm / --xs, .mvv__label,
                                    .scard__tag, .hero__eyebrow, .msg__sig,
                                    .concept__lbl, .hero__news-lbl
     番号・CTA              -> blue  .docs__no / .srow__num / .steps__num / buttons
   On a dark ground the heading turns white instead — .hgroup--invert,
   .cv__head-en. Nothing else in the page is blue. */
.hgroup__en {
  font-family: var(--font-en);
  font-size: var(--hg-en);
  font-weight: 800;
  line-height: var(--lh-sm);
  letter-spacing: -0.025em;
  color: var(--c-primary);
}
.hgroup__jp {
  font-size: var(--hg-jp);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.hgroup--sm { --hg-en: var(--fs-13l); --hg-jp: var(--fs-2l); }
/* h3 inside a section: must stay clearly below the section heading. */
.hgroup--xs { --hg-en: var(--fs-6l); --hg-jp: var(--fs-lg); }

/* Row variant — THE section heading (h2). Every section on every page
   uses this one size, so the page title (.phead__en, h1) is always the
   only thing larger. Do not resize it per section. */
.hgroup--row { --hg-en: var(--fs-10l); --hg-jp: var(--fs-lg); row-gap: 4px; }

/* Only the page-level heading carries the blue; every smaller one is ink. */
.hgroup--sm .hgroup__en,
.hgroup--xs .hgroup__en,
.hgroup--row .hgroup__en { color: var(--c-ink); }

/* On black. */
.hgroup--invert .hgroup__en,
.hgroup--invert .hgroup__jp { color: var(--c-white); }

/* -------------------------------------------------------------------------
   5. BUTTONS
   Every control on the site is the same object: a soft white capsule with
   a leading dot and a low, wide shadow, which fills with the brand blue on
   hover. Borders are not used — the shadow does the lifting.
   ---------------------------------------------------------------------- */

/* 5a. The "View more" control. Two stacked labels roll over on hover, and
       the circular icon from the previous build is re-cast as the dot that
       leads the capsule (order:-1), so no markup had to change. */
.rbtn {
  --rbtn-bg: var(--c-white);
  --rbtn-ink: var(--c-ink);
  --rbtn-dot: var(--c-ink);
  display: inline-block;
  width: min(100%, clamp(236px, 16vw + 110px, 300px));
}
@media (max-width: 640px) { .rbtn { width: 100%; } }
.rbtn__in {
  --btn-pad-x: clamp(26px, 1.8vw + 16px, 36px);
  position: relative;
  display: block;
  padding: clamp(17px, 0.9vw + 12px, 23px) var(--btn-pad-x);
  background: var(--rbtn-bg);
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.rbtn__in:hover { background: var(--c-primary); box-shadow: var(--shadow-pill-lift); transform: translateY(-2px); }

.rbtn__labels { position: relative; display: block; width: 100%; height: 1.3em; overflow: hidden; }
.rbtn__txt {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: var(--lh-sm);
  color: var(--rbtn-ink);
  transition: top var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rbtn__txt:nth-child(1) { top: 0; }
.rbtn__txt:nth-child(2) { top: -110%; }
.rbtn__in:hover .rbtn__txt:nth-child(1) { top: 110%; }
.rbtn__in:hover .rbtn__txt:nth-child(2) { top: 0; }
.rbtn__in:hover .rbtn__txt { color: var(--c-white); }

/* The leading dot. The arrow SVG the markup still carries is hidden — the
   dot is the whole indicator, as on the reference. */
.rbtn__ico {
  position: absolute;
  top: 50%;
  left: var(--btn-pad-x);
  margin-top: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rbtn-dot);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rbtn__ico svg { display: none; }
.rbtn__in:hover .rbtn__ico { background: var(--c-white); transform: scale(1.25); }

.rbtn--invert { --rbtn-bg: var(--c-white); --rbtn-ink: var(--c-ink); --rbtn-dot: var(--c-ink); }
.rbtn--invert .rbtn__in:hover { background: var(--c-ink); }

/* 5b. The filled control — same capsule, brand blue by default. Used for
       the header CTA, the document request and the form submit. */
.cbtn {
  --cbtn-bg: var(--c-primary);
  --cbtn-ink: var(--c-white);
  --cbtn-box: clamp(46px, 2.6vw + 30px, 54px);
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(12px, 1vw + 6px, 18px);
  min-height: var(--cbtn-box);
  padding: 0 clamp(20px, 1.4vw + 13px, 30px);
  background: var(--cbtn-bg);
  color: var(--cbtn-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cbtn__txt {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}
.cbtn__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(22px, 1.2vw + 15px, 26px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: transform var(--dur) var(--ease);
}
.cbtn__ico::before { content: none; }
.cbtn__ico svg { position: relative; width: 44%; stroke: var(--cbtn-ink); stroke-width: 1.8; fill: none; }
.cbtn:hover { background: var(--c-primary-bright); box-shadow: var(--shadow-pill-lift); transform: translateY(-2px); }
.cbtn:hover .cbtn__ico { transform: scale(1.12); }

/* 5c. The plain capsule used for the two first-view routes. */
.pbtn {
  --btn-pad-x: clamp(24px, 1.7vw + 15px, 34px);
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(17px, 0.9vw + 12px, 23px) var(--btn-pad-x);
  text-align: center;
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pbtn__dot {
  position: absolute;
  top: 50%;
  left: var(--btn-pad-x);
  margin-top: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-ink);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The padding keeps the centred label clear of the dot pinned at the left. */
.pbtn__txt { display: block; padding-inline: 20px; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; }
.pbtn:hover { background: var(--c-primary); color: var(--c-white); box-shadow: var(--shadow-pill-lift); transform: translateY(-2px); }
.pbtn:hover .pbtn__dot { background: var(--c-white); transform: scale(1.2); }

/* Sized to its label instead of to its column, for the standalone CTAs that
   sit in a row with other content rather than in the first view's grid. */
.pbtn--inline { width: auto; min-width: clamp(250px, 20vw + 90px, 320px); }

.pbtn--fill { background: var(--c-primary); color: var(--c-white); }
.pbtn--fill .pbtn__dot { background: var(--c-white); }
.pbtn--fill:hover { background: var(--c-ink); }

/* 5d. Inline text link — a hairline that carries the accent colour, with
       the arrow stepping forward on hover. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 5px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  background-image: linear-gradient(var(--c-primary), var(--c-primary));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: color var(--dur) var(--ease);
}
.tlink:hover { color: var(--c-primary); }
.tlink .arw { color: var(--c-primary); transition: transform var(--dur) var(--ease); }
.tlink:hover .arw { transform: translateX(5px); }

/* 5e. Tag capsule. As a link it fills on hover; `--static` is the same
       shape used as a label, so it takes a dot instead of an arrow. */
.pill {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  column-gap: 9px;
  padding: 8px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-x3s);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.pill::after {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--c-primary);
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color var(--dur) var(--ease);
}
a.pill:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
a.pill:hover::after { background: var(--c-white); }

.pill--static { cursor: default; font-weight: 500; color: var(--ink-body); }
.pill--static::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-rule);
  -webkit-mask: none;
          mask: none;
}

/* -------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   ---------------------------------------------------------------------- */
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  min-width: 320px;
  transition: transform var(--dur) var(--ease);
}
#siteHeader.is-hidden { transform: translateY(-100%); }

/* The bar itself carries nothing. Both the navigation and the burger are
   floating capsules over the page, as on the reference — so the first view
   reads as one uninterrupted field rather than a banner plus a page. */
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-x2s);
  height: var(--header-h);
  /* Same column as .inner — width, gutter and centring. Without the
     max-width the bar spanned the whole window, so on a monitor wider than
     the content column the logo sat at the window edge while every section
     below started further in. */
  width: 100%;
  max-width: calc(var(--w-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  background: transparent;
}

/* --- Brand lockup --- */
.brand {
  display: flex;
  align-items: center;
  gap: clamp(9px, 0.7vw + 5px, 14px);
  flex: 0 0 auto;
  transition: opacity var(--dur) var(--ease);
}
.brand:hover { opacity: 0.62; }
/* Both logo PNGs carry transparent margin around the artwork (the
   horizontal mark occupies x=62..578 of 640 -> 9.7% a side; the square one
   x=39.. of 708 -> 5.5%). Left-aligned, that phantom margin pushes the
   visible mark inside the gutter, so the logo never lines up with the left
   edge of the page below it. Pull it back by exactly that fraction, which
   keeps working at every step of the clamp. */
.brand__logo {
  --logo-w: clamp(138px, 5.2vw + 118px, 190px);
  --logo-bleed: 0.097;
  display: block;
  /* The negative margin below shrinks the shrink-to-fit .brand box, and a
     flex item with the global max-width:100% then shrinks to match it — the
     logo ended up ~5% smaller than --logo-w and still half a pixel off.
     Pin the size so only the position moves. */
  flex: 0 0 auto;
  width: var(--logo-w);
  max-width: none;
  height: auto;
  margin-left: calc(var(--logo-w) * var(--logo-bleed) * -1);
}

@media (max-width: 520px) {
  #siteHeader .brand { gap: 8px; }
  #siteHeader .brand__logo { --logo-w: 112px; }
}

/* --- Desktop navigation --- */
@media (min-width: 1100px) {
  .nav__list {
    padding: 9px 9px 9px clamp(24px, 2vw + 10px, 40px);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 999px;
    box-shadow: var(--shadow-pill);
  }
  .nav__link { font-size: var(--fs-md); }
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.8vw + 6px, 40px);
}
.nav__link {
  position: relative;
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-primary); }
/* Only on the desktop capsule: the drawer items are full-width rows and a
   rule under the label there would read as a divider, not a hover. */
@media (min-width: 1100px) {
  .nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    background: var(--c-primary);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
}
.nav__jp { display: none; }
.nav__cta { margin-left: clamp(4px, 1vw, 18px); }
.nav__cta .cbtn { --cbtn-box: clamp(42px, 2.2vw + 28px, 50px); min-width: clamp(150px, 9vw + 60px, 180px); box-shadow: none; }
.nav__cta .cbtn:hover { box-shadow: none; transform: none; background: var(--c-ink); }
.nav__cta .cbtn__txt { font-size: var(--fs-md); }

/* Current page marker. */
.nav__link[aria-current="page"] { color: var(--c-primary); }
@media (max-width: 1099px) { .nav__link[aria-current="page"] .nav__jp { color: var(--c-primary-soft); } }

/* --- Burger --- */
.burger {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.burger__txt {
  font-family: var(--font-en);
  font-size: var(--fs-x4s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: var(--c-gray);
}
.burger__in { position: relative; display: block; width: 26px; height: 12px; }
.burger__in span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger__in span:nth-child(1) { top: 0; }
.burger__in span:nth-child(2) { bottom: 0; }
.burger.is-active .burger__in span:nth-child(1) { transform: translateY(5.5px) rotate(16deg); }
.burger.is-active .burger__in span:nth-child(2) { transform: translateY(-5.5px) rotate(-16deg); }

@media (max-width: 1099px) {
  /* A floating white disc, to match the navigation capsule it replaces. */
  .burger {
    display: grid;
    place-items: center;
    width: clamp(52px, 4vw + 36px, 64px);
    aspect-ratio: 1;
    background: var(--c-white);
    border-radius: 50%;
    box-shadow: var(--shadow-pill);
  }
  .burger__txt { display: none; }
  .nav { padding-top: calc(var(--sp-sm) + 10px); }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 1900;
    display: grid;
    align-content: space-between;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--gutter) var(--sp-md);
    background: var(--c-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  @media (min-width: 1100px) {
  .nav__list {
    padding: 9px 9px 9px clamp(24px, 2vw + 10px, 40px);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 999px;
    box-shadow: var(--shadow-pill);
  }
  .nav__link { font-size: var(--fs-md); }
}
.nav__list { display: grid; gap: 0; align-content: start; }
  .nav__list > li:not(.nav__cta) { border-top: 1px solid var(--c-line); }
  .nav__list > li:not(.nav__cta):last-of-type { border-bottom: 1px solid var(--c-line); }
  .nav__link {
    display: grid;
    row-gap: 4px;
    padding-block: clamp(16px, 2.4vw + 6px, 24px);
    font-size: var(--fs-4l);
  }
  .nav__jp {
    display: block;
    font-family: var(--font-jp);
    font-size: var(--fs-x3s);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--c-gray);
  }
  .nav__cta { margin: var(--sp-x2s) 0 0; }
  .nav__cta .cbtn { display: grid; width: 100%; --cbtn-box: 58px; }
}

/* -------------------------------------------------------------------------
   7. HERO
   The reference's first view: a slowly turning wireframe form on the left,
   the mission set as large as the page allows on the right, and both
   conversion routes immediately underneath it. No photograph — the
   photographs get a full-bleed band of their own directly below.
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-x2s));
  padding-bottom: var(--sp-x2s);
  overflow: clip;
}
.hero__inner { display: grid; row-gap: var(--sp-sm); align-items: center; }
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(24px, 3vw, 70px);
    min-height: min(78vh, 760px);
  }
}

/* --- The sphere loop ---------------------------------------------------
   A square 1080px video shot on white. multiply drops that white into the
   page ground, so compression noise in the corners never shows as a box.
   The aspect box keeps the layout stable before the video loads. */
.hero__art {
  position: relative;
  justify-self: center;
  width: min(100%, 620px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* The sphere fills only ~70% of the frame; the rest is white margin.
     Scaling eats into that margin, so the sphere grows without widening the
     column, and where the margin overlaps the copy, multiply keeps it
     invisible. */
  transform: scale(1.2);
}

/* The padding sits the block a little above the optical centre: with the
   copy this large, dead-centre reads as low.

   This pairs with .heroct's margin-top. The block is centred in its row, so
   whatever is added to the gap above the buttons lifts the copy by half of
   it. To move the buttons down on their own, add n to that margin and take
   the same n off here — the total stays put and only the buttons shift. */
.hero__lead { position: relative; z-index: 1; min-width: 0; display: grid; align-content: center; gap: var(--sp-x2s); }
@media (min-width: 900px) {
  .hero__inner { --hero-lift: clamp(70px, calc(18vh - 60px), 220px); }
  .hero__lead { padding-bottom: var(--hero-lift); }
  /* The padding above raises the copy's centre by half of itself; the sphere
     is raised by the same amount so the two stay on one line. A transform,
     not a margin, so the first view's height does not change. */
  .hero__art { transform: translateY(calc(var(--hero-lift) / -2)); }
}
.hero__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}
.hero__display {
  font-size: var(--fs-14l);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.hero__display .red { color: var(--c-primary); }
/* Each line rises out of its own clip. The padding/margin pair keeps the
   Japanese descenders and the full stop from being shaved by that clip. */
.hero__display > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero__display > span > span { display: block; }
.js .hero__display > span > span { transform: translateY(105%); transition: transform 1.05s var(--ease); }
.js .hero.is-ready .hero__display > span > span { transform: none; }
.js .hero.is-ready .hero__display > span:nth-child(2) > span { transition-delay: 0.12s; }
.js .hero.is-ready .hero__display > span:nth-child(3) > span { transition-delay: 0.24s; }

@media (max-width: 599px) {
  /* Eight Japanese characters at the fluid minimum are wider than a phone,
     and a grid column cannot shrink below its longest unbreakable line. */
  .hero__display { font-size: min(var(--fs-14l), 9.6vw); }
}

/* --- The two first-view routes --------------------------------------- */
.heroct { display: grid; gap: clamp(12px, 1vw + 7px, 20px); margin-top: clamp(52px, calc(3.4vw + 60px), 118px); }
@media (min-width: 620px) { .heroct { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .heroct { max-width: 660px; } }
/* Between the width where the first view splits into two columns and the
   width where that column is roomy again, the capsules stack: side by side
   they are too narrow for the label to clear the dot. */
@media (min-width: 900px) and (max-width: 1099px) {
  .heroct { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
}
.hct { display: grid; }

/* On a phone it sits in the flow between the headline and the buttons, not
   behind the type.

   .hero__lead dissolving into the grid is what makes that possible without
   touching the HTML: with display:contents its box disappears and its
   children become items of .hero__inner, so they can be ordered around
   .hero__art, which is their sibling rather than their descendant. */
@media (max-width: 899px) {
  .hero__inner { row-gap: var(--sp-x2s); }
  .hero__lead { display: contents; }
  .hero__eyebrow { order: 1; }
  .hero__display { order: 2; }
  .hero__art { order: 3; }
  .heroct { order: 4; }

  .hero__art {
    justify-self: center;
    width: min(72%, 300px);
    margin-block: var(--sp-x4s);
  }
  /* The artwork itself now separates the copy from the buttons. */
  .heroct { margin-top: 0; }
}


/* --- Pickup news strip ------------------------------------------------ */
.hero__news { position: relative; z-index: 1; margin-top: var(--sp-sm); border-block: 1px solid var(--c-line); }
.hero__news-link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.4vw + 6px, 24px);
  padding-block: var(--sp-x3s);
}
.hero__news-lbl {
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.hero__news-time { font-family: var(--font-en); font-size: var(--fs-x2s); font-weight: 600; color: var(--c-gray); }
.hero__news-txt {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero__news-link { grid-template-columns: auto auto; row-gap: 4px; }
  .hero__news-txt { grid-column: 1 / -1; white-space: normal; }
}

/* -------------------------------------------------------------------------
   7b. HERO PHOTO — full bleed, directly under the fold
   Nothing moves here on its own: it is an ordinary [data-wipe] image and
   behaves exactly like the photographs further down the page.
   ---------------------------------------------------------------------- */
.hstrip { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 768px) { .hstrip { aspect-ratio: 2.6 / 1; } }
.hstrip img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   8. WORDMARK LOOP
   The name set enormous in the ground colour, drifting behind the section
   heading. It is texture, not content: barely-there contrast, no pointer
   events, and a drift so slow (240s a lap) it reads as a living surface
   rather than an animation. Fades out to the right with a mask.
   ---------------------------------------------------------------------- */
.wordloop {
  position: absolute;
  top: clamp(18px, 3vw, 70px);
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 45%, transparent 95%);
          mask-image: linear-gradient(to right, #000 0 45%, transparent 95%);
}
.wordloop__track {
  display: flex;
  width: max-content;
  animation: wordloop 240s linear infinite;
}
.wordloop__word {
  padding-right: 0.28em;
  font-family: var(--font-en);
  font-size: clamp(56px, 8.6vw, 168px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--c-bone);
}
@keyframes wordloop { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------------
   9. ABOUT — heading block plus a three-up image row
   ---------------------------------------------------------------------- */
.about { position: relative; overflow: clip; }
.about > .inner { position: relative; z-index: 1; }
/* Headroom so the wordmark has somewhere to live above the heading. */
.about--loop { padding-top: calc(var(--sp-2xl) + clamp(16px, 4.5vw, 92px)); }

.about__head { display: grid; gap: var(--sp-x2s); max-width: 46em; }
.about__imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.9vw + 3px, 20px);
  margin-top: var(--sp-md);
}
.about__imgs figure { overflow: hidden; }
.about__imgs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.about__imgs figure:hover img { transform: scale(1.04); }
.about__imgs--two { grid-template-columns: repeat(2, 1fr); }
.about__imgs--two img { aspect-ratio: 4 / 3; }

/* A single supporting photograph, used inside a text column. */
.figure { overflow: hidden; }
.figure__in { display: block; }
.figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 880px) { .figure img { aspect-ratio: 4 / 3; } }
/* Bring the three service-stage photographs in to the same medium framing
   used elsewhere on the site, without affecting other supporting figures. */
#strategy .figure img,
#practice .figure img,
#enablement .figure img {
  transform: scale(1.5);
}
#strategy .figure img { transform-origin: 52% 50%; }
#practice .figure img { transform-origin: 59% 50%; }
#enablement .figure img { transform-origin: 56% 50%; }
/* About > Our story holds the founder's portrait. At the column's full
   width a face reads far too large, so it is held to a profile-photo size
   and the name sits beside it: the rest of the column carries information
   instead of white space. Square at every width, keeping the top of the
   frame so the head is never cut. */
.story-profile {
  display: grid;
  /* The photo takes about two thirds of the column (at most 340px); the
     name keeps at least 110px, and on a narrow column the photo gives way. */
  grid-template-columns: minmax(0, min(340px, 64%)) minmax(110px, 1fr);
  align-items: end;
  column-gap: clamp(16px, 2vw, 32px);
}
.story-profile img { aspect-ratio: 1 / 1; object-position: 50% 0; }
.story-profile .story-profile__cap {
  display: grid;
  gap: 6px;
  margin-top: 0;
  padding-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.story-profile__en {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--font-en);
  font-size: var(--fs-x4s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.story-profile__en::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.story-profile__role { font-family: var(--font-jp); font-size: var(--fs-x2s); font-weight: 500; letter-spacing: 0.08em; color: var(--ink-body); }
.story-profile__name { font-family: var(--font-jp); font-size: var(--fs-2l); font-weight: 700; letter-spacing: 0.12em; color: var(--c-ink); }
.figure figcaption {
  margin-top: var(--sp-x4s);
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gray);
}

/* Row of jump links sitting under a section header. */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-x2s); }

/* -------------------------------------------------------------------------
   10. STICKY SPLIT — left header holds while the right column scrolls
   ---------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-md); }
@media (min-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
    gap: var(--sp-sm);
    align-items: start;
  }
  .split__aside { position: sticky; top: calc(var(--header-h) + var(--sp-xs)); }
}
.split__aside { display: grid; gap: var(--sp-x2s); align-content: start; }

/* -------------------------------------------------------------------------
   11. BORDER CARD — hairline-separated rows of values / stances
   ---------------------------------------------------------------------- */
.bcard { display: grid; gap: var(--sp-sm); }
.bcard__item {
  display: grid;
  gap: var(--sp-x2s);
  padding-top: var(--sp-x2s);
  border-top: 1px solid var(--c-rule);
}
.bcard__item:last-child { padding-bottom: var(--sp-md); border-bottom: 1px solid var(--c-rule); }
.bcard--open .bcard__item:last-child { padding-bottom: 0; border-bottom: 0; }

.bcard__head { display: grid; gap: var(--sp-x2s); }
.bcard__en {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 8px;
  align-items: center;
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.bcard__en::before {
  content: "";
  width: 6px;
  aspect-ratio: 1;
  background: var(--c-primary);
  border-radius: 50%;
}
.bcard__title { display: grid; }
.bcard__title p,
.bcard__title span {
  font-size: var(--fs-8l);
  font-weight: 700;
  line-height: var(--lh-md);
  letter-spacing: 0.01em;
  color: var(--c-ink);
}
.bcard__title .red { color: var(--c-primary); }
.bcard__text { font-size: var(--fs-md); line-height: var(--lh-lg); color: var(--ink-body); }

/* -------------------------------------------------------------------------
   12. DATA GRID — the numbers matrix
   ---------------------------------------------------------------------- */
.data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-sm);
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
@media (min-width: 900px) { .data { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.data__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-x2s);
  padding: var(--sp-x2s) clamp(12px, 1vw + 6px, 20px);
  border-top: 1px solid var(--c-rule);
  border-left: 1px solid var(--c-rule);
}
.data__cell--wide { grid-column: span 2; }

.data__title {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-x2s);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.data__title::before {
  content: "";
  width: 6px;
  aspect-ratio: 1;
  background: var(--c-primary);
  border-radius: 50%;
}
.data__note {
  font-size: var(--fs-x3s);
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.data__val {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: baseline;
  justify-content: flex-end;
}
.data__num {
  font-family: var(--font-en);
  font-size: var(--fs-16l);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: right;
  color: var(--c-ink);
}
.data__num.is-key { font-weight: 700; color: var(--c-primary); }
.data__unit { font-size: var(--fs-x2s); font-weight: 700; color: var(--c-ink); }
.data__num.is-key + .data__unit { font-size: var(--fs-xl); color: var(--c-primary); }
.data__foot {
  margin-top: var(--sp-x3s);
  padding-left: 1em;
  text-indent: -1em;
  font-size: var(--fs-x3s);
  color: var(--c-gray);
  text-align: right;
}
.data__foot::before { content: "※"; }

/* -------------------------------------------------------------------------
   13. STATEMENT — the oversized two-tone declaration
   ---------------------------------------------------------------------- */
.statement { display: grid; gap: var(--sp-x2s); }
/* Set in phrases, not in lines. Each direct child is an inline-block, so it
   is an atomic box: the browser wraps between phrases and never inside one.
   A single <br> cannot do this — it fixes where one break falls, and the
   rest of the line still wraps wherever it runs out of room, which is how
   "支援を" ended up split across two lines. */
.statement__big {
  font-size: var(--fs-12l);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}
/* For a full sentence rather than a slogan: at the slogan size a sixteen-
   character line runs out of column and strands its last phrase alone. */
.statement__big--long { font-size: var(--fs-9l); line-height: 1.45; }
.statement__big > span { display: inline-block; }
/* .red is nested inside a phrase in one place, so it must stay inline. */
.statement__big > span .red { display: inline; }
.statement__big .red { color: var(--c-primary); }
.statement__grid { display: grid; gap: var(--sp-sm); }
@media (min-width: 900px) {
  .statement__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-md); align-items: end; }
}
.statement__points { display: grid; gap: var(--sp-x2s); }
.statement__point {
  display: grid;
  gap: 6px;
  padding: var(--sp-x2s);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.statement__point b { font-size: var(--fs-xl); font-weight: 700; color: var(--c-ink); line-height: var(--lh-md); }
.statement__point span { font-size: var(--fs-x3s); color: var(--c-gray); }

/* -------------------------------------------------------------------------
   14. SERVICE ROWS — numbered, hairline separated, image right
   ---------------------------------------------------------------------- */
.srow { display: grid; }
/* Narrow: the image runs full width and everything stacks. Pairing a tall
   portrait image with nothing but the row number left a large empty block
   beside it at tablet widths. */
.srow__item {
  display: grid;
  grid-template-areas:
    "img"
    "num"
    "txt"
    "info";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-x2s);
  align-items: start;
}
.srow__item + .srow__item {
  padding-top: var(--sp-sm);
  margin-top: var(--sp-sm);
  border-top: 1px solid var(--c-rule);
}
/* Tablet: the number holds its own column and the landscape photograph
   heads the copy, held to a sensible width. */
@media (min-width: 760px) {
  .srow__item {
    grid-template-areas:
      "num img"
      "num txt"
      "num info";
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    column-gap: clamp(20px, 3vw + 8px, 60px);
    row-gap: var(--sp-x2s);
  }
  .srow__img { max-width: 560px; }
}
/* Wide: number, copy, and the photograph on the right — the reference
   layout, with the image column widened for landscape photographs. */
@media (min-width: 1000px) {
  .srow__item {
    grid-template-areas:
      "num txt img"
      "num info img";
    grid-template-columns: auto minmax(0, 1fr) min(38%, 460px);
    grid-template-rows: auto auto;
  }
  .srow__img { max-width: none; }
}
.srow__num {
  grid-area: num;
  font-family: var(--font-en);
  align-self: start;
  font-size: var(--fs-5l);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}
/* A hairline frame: the document photograph has a white ground of its own
   and would otherwise dissolve into the white section. */
.srow__img { grid-area: img; align-self: start; overflow: hidden; border: 1px solid var(--c-line); }
/* The three photographs are landscape (4:3, about 3:2 and 16:9 as
   supplied, 2026-10-06). One shared 16:10 frame keeps the rows consistent
   and costs each picture only a sliver: sky and table edge on the first,
   white margin on the second, background on the third. */
.srow__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.srow__item:hover .srow__img img { transform: scale(1.04); }
.srow__txt { grid-area: txt; display: grid; gap: var(--sp-x2s); }
/* Each stage's title (Strategy / 【上流】…) takes the same blue as its
   number, so number and title read as one label (2026-10-08). */
.srow__txt .hgroup__en,
.srow__txt .hgroup__jp { color: var(--c-primary); }
.srow__info { grid-area: info; align-self: start; }
.srow__info-head {
  padding-bottom: var(--sp-x3s);
  margin-bottom: var(--sp-x3s);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.srow__pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* -------------------------------------------------------------------------
   15. ARCHIVE LIST — news rows
   ---------------------------------------------------------------------- */
.archive { display: grid; }
.archive__item { border-top: 1px solid var(--c-rule); }
.archive__item:last-child { border-bottom: 1px solid var(--c-rule); }
.archive__link { display: grid; gap: var(--sp-x4s); padding-block: var(--sp-x2s); }
@media (min-width: 768px) {
  .archive__link {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-x2s);
  }
}
.archive__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-x3s); }
.archive__date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-sm);
  color: var(--c-gray);
}
.archive__tag {
  font-size: var(--fs-x3s);
  font-weight: 700;
  color: var(--c-primary);
  opacity: 0.78;
}
.archive__head {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}

/* --- News pages -------------------------------------------------------
   A page head with no photograph, the list, and one article. The list
   itself is the .archive above; only the surroundings are new. */
.phead--plain { padding-bottom: 0; }
.phead--plain .phead__top { margin-bottom: 0; }
/* No photograph to separate them, so the list starts closer to the head. */
.phead--plain + .section { padding-top: var(--sp-sm); }
.phead__top--single { align-items: end; }
/* A content page whose photograph was taken out (About, Service). The news
   spacing above is too tight for a full section, so a hairline under the
   head does the separating the photograph used to do. */
.phead--rule .phead__top { padding-bottom: var(--sp-md); border-bottom: 1px solid var(--c-line); }
.phead--plain.phead--rule + .section { padding-top: var(--sp-lg); }

.news__all { display: flex; justify-content: flex-end; margin-top: var(--sp-sm); }
.news__more { display: flex; justify-content: center; margin-top: var(--sp-sm); }
/* display:flex would otherwise win over the browser's own [hidden] rule. */
.news__more[hidden] { display: none; }
.news__status:empty { display: none; }
.news__status {
  margin-top: var(--sp-sm);
  font-size: var(--fs-x3s);
  line-height: 1.8;
  color: var(--ink-mute);
}

.news__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-x3s); }

/* The article body is whatever the editor wrote, so every element it can
   produce needs a sensible default here — there are no classes to hang on. */
.news__body {
  max-width: 42em;
  margin-top: var(--sp-sm);
  font-size: var(--fs-md);
  line-height: var(--lh-lg);
  color: var(--ink-body);
}
.news__body > * + * { margin-top: var(--sp-x2s); }
.news__body h2 {
  margin-top: var(--sp-sm);
  font-size: var(--fs-2l);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.news__body h3 {
  margin-top: var(--sp-x2s);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.news__body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.news__body strong { font-weight: 700; color: var(--c-ink); }
.news__body ul, .news__body ol { padding-left: 1.4em; }
.news__body li + li { margin-top: 6px; }
.news__body ul { list-style: disc; }
.news__body ol { list-style: decimal; }
.news__body img { max-width: 100%; height: auto; }
.news__body figure { margin-top: var(--sp-x2s); }
.news__body figcaption { margin-top: 8px; font-size: var(--fs-x3s); color: var(--ink-mute); }
.news__body blockquote {
  padding-left: var(--sp-x2s);
  border-left: 2px solid var(--c-primary);
  color: var(--ink-mute);
}
.news__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-x3s); }
.news__body th, .news__body td { padding: 10px 12px; border: 1px solid var(--c-line); text-align: left; }
.news__back { margin-top: var(--sp-md); }

/* -------------------------------------------------------------------------
   16. RED BAND — the full-bleed accent block (contact / cases teaser)
   ---------------------------------------------------------------------- */
.band {
  position: relative;
  display: grid;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-xs) var(--sp-lg);
  background: var(--c-primary);
  color: var(--c-white);
  overflow: hidden;
}
@media (min-width: 760px) {
  .band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-lg) var(--sp-md);
  }
}
.band__media { overflow: hidden; }
.band__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.band:hover .band__media img { transform: scale(1.04); }
.band__body { display: grid; gap: var(--sp-x2s); align-content: center; }
.band__en {
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.band__title {
  font-size: var(--fs-9l);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-white);
}
.band__text { font-size: var(--fs-md); line-height: var(--lh-lg); color: rgba(255, 255, 255, 0.88); }

/* -------------------------------------------------------------------------
   17. CV BAND — black conversion block with three routes
   ---------------------------------------------------------------------- */
.cv { background: var(--c-ink); color: var(--c-white); }
.cv__inner { padding-block: var(--sp-md) var(--sp-lg); }
.cv__head { display: grid; gap: var(--sp-x3s); margin-bottom: var(--sp-sm); }
.cv__head-en {
  font-family: var(--font-en);
  font-size: var(--fs-15l);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--c-white);
}
.cv__head-jp { font-size: var(--fs-md); font-weight: 500; color: rgba(255, 255, 255, 0.72); }

.cv__list { display: grid; gap: clamp(10px, 0.8vw + 5px, 16px); }
@media (min-width: 900px) { .cv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cv__item { display: block; height: 100%; }
.cv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-x2s);
  height: 100%;
  min-height: clamp(150px, 11vw + 60px, 210px);
  padding: var(--sp-x2s);
  background: var(--c-panel);
  transition: background-color var(--dur) var(--ease);
}
a.cv__item:hover .cv__card { background: var(--c-primary); }
.cv__jp { font-size: var(--fs-lg); font-weight: 700; color: var(--c-white); }
.cv__main {
  font-family: var(--font-en);
  font-size: var(--fs-6l);
  font-weight: 700;
  line-height: var(--lh-sm);
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.cv__tel { font-family: var(--font-en); font-size: var(--fs-7l); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-sm); color: var(--c-white); }
.cv__note { font-family: var(--font-en); font-size: var(--fs-x2s); font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.cv__text {
  padding-right: clamp(48px, 2.4vw + 36px, 62px);
  font-size: var(--fs-x3s);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}
.cv__item--soon .cv__text { padding-right: 0; }
.cv__ico {
  position: absolute;
  right: var(--sp-x2s);
  bottom: var(--sp-x2s);
  display: grid;
  place-items: center;
  width: clamp(40px, 2.4vw + 26px, 50px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.cv__ico svg { width: 34%; stroke: var(--c-white); stroke-width: 1.6; fill: none; }
.cv__item--soon .cv__card { opacity: 0.62; cursor: default; }

/* -------------------------------------------------------------------------
   18. PAGE HEAD — sub-page opener
   ---------------------------------------------------------------------- */
.phead { padding-top: calc(var(--header-h) + var(--sp-sm)); padding-bottom: var(--sp-md); }
.phead__top { display: grid; gap: var(--sp-x2s); }
@media (min-width: 900px) {
  .phead__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-md); align-items: end; }
}
.phead__title { display: grid; gap: var(--sp-x4s); }
.phead__en {
  font-family: var(--font-en);
  font-size: var(--fs-17l);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--c-primary);
}
.phead__jp { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.phead__copy {
  font-size: var(--fs-5l);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.phead__copy .red { color: var(--c-primary); }
.phead__lead { margin-top: var(--sp-x2s); }
.phead__media { margin-top: var(--sp-sm); overflow: hidden; }
.phead__media img {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

/* Breadcrumb */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-x2s);
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-gray);
}
.crumb li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--c-line); }
.crumb a:hover { color: var(--c-primary); }

/* -------------------------------------------------------------------------
   19. CAPABILITY GRID — the scope matrix
   ---------------------------------------------------------------------- */
.capgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
@media (min-width: 900px) { .capgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.capgrid__cell {
  display: grid;
  gap: var(--sp-x3s);
  align-content: start;
  padding: var(--sp-x2s) clamp(12px, 1vw + 6px, 20px);
  border-top: 1px solid var(--c-rule);
  border-left: 1px solid var(--c-rule);
}
.capgrid__num {
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}
.capgrid__title { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-md); color: var(--c-ink); }
.capgrid__text { font-size: var(--fs-x3s); line-height: 1.8; color: var(--ink-body); }

/* -------------------------------------------------------------------------
   20. STEP LIST — numbered detail rows inside a service layer
   ---------------------------------------------------------------------- */
.steps { display: grid; }
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-x3s) var(--sp-x2s);
  padding-block: var(--sp-x3s);
  border-top: 1px solid var(--c-line);
  align-items: baseline;
}
.steps__item:last-child { border-bottom: 1px solid var(--c-line); }
.steps__num {
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  color: var(--c-primary);
}
.steps__body { display: grid; gap: 2px; }
.steps__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); line-height: var(--lh-md); }
.steps__text { font-size: var(--fs-x3s); line-height: 1.8; color: var(--ink-mute); }

/* -------------------------------------------------------------------------
   21. CASE ROWS
   ---------------------------------------------------------------------- */
.cases { display: grid; }
.cases__item {
  display: grid;
  gap: var(--sp-x2s);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-rule);
}
.cases__item:first-child { padding-top: 0; border-top: 0; }
.cases__item + .cases__item { margin-top: var(--sp-sm); }
@media (min-width: 760px) {
  .cases__item {
    grid-template-columns: min(34%, 420px) minmax(0, 1fr);
    gap: var(--sp-sm);
    align-items: start;
  }
}
.cases__media { overflow: hidden; }
.cases__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.cases__item:hover .cases__media img { transform: scale(1.04); }
.cases__body { display: grid; gap: var(--sp-x2s); align-content: start; }
.cases__title { font-size: var(--fs-6l); font-weight: 700; line-height: var(--lh-md); color: var(--c-ink); }
.cases__flow { display: grid; gap: 0; }
.cases__step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-x3s);
  padding-block: var(--sp-x3s);
  border-top: 1px solid var(--c-line);
  align-items: baseline;
}
.cases__step:last-child { border-bottom: 1px solid var(--c-line); }
.cases__step dt {
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.cases__step dd { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-body); }
@media (max-width: 520px) { .cases__step { grid-template-columns: 1fr; gap: 2px; } }

/* Emphasised note block. */
.note {
  display: grid;
  gap: var(--sp-x3s);
  padding: var(--sp-x2s);
  background: var(--c-bone);
  border-left: 3px solid var(--c-primary);
}
.note__head { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.note__text { font-size: var(--fs-sm); line-height: var(--lh-lg); color: var(--ink-body); }

/* -------------------------------------------------------------------------
   22. PROFILE TABLE
   ---------------------------------------------------------------------- */
.profile { border-top: 1px solid var(--c-rule); }
.profile tr { border-bottom: 1px solid var(--c-line); }
.profile th,
.profile td {
  padding: var(--sp-x2s) 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.profile th {
  width: clamp(96px, 14vw, 200px);
  padding-right: var(--sp-x2s);
  font-weight: 700;
  color: var(--c-ink);
}
.profile td { color: var(--ink-body); }
.profile td a { color: var(--c-primary); }

/* -------------------------------------------------------------------------
   23. FORM
   ---------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-x2s); }
.form__grid { display: grid; gap: var(--sp-x2s); }
@media (min-width: 700px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}
.req, .opt {
  padding: 3px 8px;
  font-family: var(--font-en);
  font-size: var(--fs-x5s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.req { background: var(--c-primary); color: #fff; }
.opt { background: var(--c-line); color: var(--c-ink-soft); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888983' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--c-primary); }
.field input::placeholder,
.field textarea::placeholder { color: #b3b4ad; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-body);
  line-height: 1.7;
}
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 5px; accent-color: var(--c-primary); }
.consent a { color: var(--c-primary); text-decoration: underline; }

.form-status {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-primary);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.form-status.is-visible { opacity: 1; }
.form-status.is-error { color: #b42318; }

.form__submit { width: min(100%, 320px); }
.form.is-sending .form__submit { opacity: .55; cursor: progress; pointer-events: none; }

/* -------------------------------------------------------------------------
   24. FAQ
   ---------------------------------------------------------------------- */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--c-rule); }
.faq__item:last-child { border-bottom: 1px solid var(--c-rule); }
.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px;
  gap: var(--sp-x3s);
  align-items: center;
  width: 100%;
  padding-block: var(--sp-x2s);
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-md);
  color: var(--c-ink);
}
.faq__mark { font-family: var(--font-en); font-size: var(--fs-2l); font-weight: 700; color: var(--c-primary); line-height: 1; }
/* The open / close sign shared by every accordion (this FAQ and the support
   items on the service page): a filled navy circle with a white plus that
   turns into a minus, after the reference (2026-10-08). */
.acc-sign {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-ink);
  transition: background-color var(--dur) var(--ease);
}
.acc-sign::before,
.acc-sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--c-white);
  transition: transform var(--dur) var(--ease);
}
.acc-sign::after { transform: rotate(90deg); }
.is-open .acc-sign::after { transform: rotate(0); }
@media (any-hover: hover) { :hover > .acc-sign { background: var(--c-primary); } }
.faq__a { height: 0; overflow: hidden; transition: height var(--dur) var(--ease); }
.faq__a-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-x3s);
  padding-bottom: var(--sp-x2s);
}
.faq__a-in .faq__mark { color: var(--c-gray); }
.faq__a-in p { font-size: var(--fs-sm); line-height: var(--lh-lg); color: var(--ink-body); }

/* -------------------------------------------------------------------------
   25. FOOTER
   ---------------------------------------------------------------------- */
/* The footer is the quiet end of the page, not a second dark band: a light
   ground, the mark at full size, one row of English links and a hairline
   over the small print. It always follows the dark .cv band, so the page
   opens back up rather than closing twice. */
#siteFooter { background: var(--c-bone-deep); color: var(--c-ink); }
.footer__inner {
  display: grid;
  gap: clamp(34px, 3.6vw, 66px);
  padding-block: clamp(54px, 5.6vw, 104px) clamp(26px, 2.4vw, 42px);
}

.brand--footer { justify-self: start; }
/* The square lockup's transparent margin is NOT what the alpha bounding box
   reports: its edge is feathered, so alpha>0 starts at x=39 of 708 while the
   edge you can actually see starts at x=86 (0.1215). Measured against the
   rendered pixels, 0.1035 puts the KOMON wordmark on the same left edge as
   the footer links and the address. (The hexagon above it sits further in
   because the supplied lockup centres it over the wordmark.) */
.brand--footer .brand__logo { --logo-w: clamp(118px, 6vw + 95px, 165px); --logo-bleed: 0.1035; }

.footer__nav { display: grid; gap: clamp(18px, 2vw, 34px); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 62px);
}
.footer__links a {
  position: relative;
  display: block;
  font-family: var(--font-en);
  font-size: clamp(17px, 0.8vw + 13px, 23px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.footer__links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--c-primary); }
.footer__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* The service anchors, kept but demoted so the English row above stays the
   footer's first reading. */
.footer__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 1.6vw + 6px, 30px);
}
.footer__sub a {
  font-size: var(--fs-x3s);
  color: var(--ink-body);
  transition: color var(--dur) var(--ease);
}
.footer__sub a:hover { color: var(--c-primary); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-x3s) var(--sp-sm);
  padding-top: clamp(20px, 2vw, 32px);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-x3s);
  color: var(--ink-mute);
}
.footer__addr { font-style: normal; line-height: 1.8; }
.footer__copy { font-family: var(--font-en); letter-spacing: 0.04em; }

/* -------------------------------------------------------------------------
   26. IMAGE WIPE
   The signature reveal: a red panel sweeps in from the left, then retracts
   to the right leaving the photograph behind. Two transitions, offset in
   time, on one element:

     phase 1 (0 -> dur)        the element's mask slides in from the left,
                               so the red ::after (which covers it fully)
                               appears to sweep across.
     phase 2 (dur -> dur*2)    the red ::after shrinks to zero width from
                               the right, uncovering the image.

   The mask is 200% wide — opaque left half, transparent right half — so
   moving mask-position from `right` to `left` walks the opaque half across
   the element.

   Scoped to `.js`: without JavaScript nothing ever adds `.is-wiped`, so the
   start state must not be the hidden one or every image would disappear.
   ---------------------------------------------------------------------- */
.js [data-wipe] {
  --wipe-dur: 0.5s;
  --wipe-delay: 0s;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
          mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-position: right;
          mask-position: right;
  transition: -webkit-mask-position var(--wipe-dur) var(--wipe-delay) var(--ease);
  transition: mask-position var(--wipe-dur) var(--wipe-delay) var(--ease);
  transition: mask-position var(--wipe-dur) var(--wipe-delay) var(--ease),
              -webkit-mask-position var(--wipe-dur) var(--wipe-delay) var(--ease);
}

/* The red panel. Starts covering the whole element, anchored top-left. */
.js [data-wipe]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(var(--c-primary), var(--c-primary)) no-repeat top left / 100% 100%;
  /* Size only. background-position must jump, not interpolate: animating it
     alongside the size makes the panel shrink into a centred band instead of
     retracting off the right edge. */
  /* The panel starts pulling back while the mask is still opening. Waiting
     for the mask to finish (a delay of a whole --wipe-dur) doubles the time
     before any photograph shows, and reads as a slow page. */
  transition: background-size var(--wipe-dur) calc(var(--wipe-delay) + var(--wipe-dur) * 0.35) var(--ease);
}

.js [data-wipe].is-wiped {
  -webkit-mask-position: left;
          mask-position: left;
}
.js [data-wipe].is-wiped::after {
  background-position: top right;
  background-size: 0 100%;
}

/* Staggered groups — each sibling starts a beat after the one before it, so
   a row of images cascades instead of firing as one block. */
.js .about__imgs [data-wipe]:nth-child(2) { --wipe-delay: 0.18s; }

/* Every wipe on the site now runs at the same speed, including the hero
   strip and the page-head banner — so a photograph appears the same way
   wherever it is. Change --wipe-dur above and they all follow. */

/* -------------------------------------------------------------------------
   28. MAIN MESSAGE
   One sentence, set as large as the page allows, with the supporting
   argument beside it. This is the block the whole site is arguing for.
   ---------------------------------------------------------------------- */
.msg { display: grid; gap: var(--sp-sm); }
@media (min-width: 980px) {
  .msg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 110px); align-items: start; }
}
.msg__big {
  font-size: var(--fs-12l);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}
.msg__big .red { color: var(--c-primary); }
/* Each line rises out of its own clip, one after the other. */
.msg__big > span { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.msg__big > span > span { display: block; }
.js .msg__big > span > span { transform: translateY(105%); transition: transform 0.95s var(--ease); }
.js .msg__big.is-in > span > span { transform: none; }
.js .msg__big.is-in > span:nth-child(2) > span { transition-delay: 0.1s; }
.js .msg__big.is-in > span:nth-child(3) > span { transition-delay: 0.2s; }
@media (max-width: 599px) {
  /* Same reason as the hero headline: keep the longest unbreakable run
     inside the column so the grid cannot push the page wider than the phone. */
  .msg__big { font-size: min(var(--fs-12l), 8.4vw); }
}
.msg__body { display: grid; gap: var(--sp-x2s); }
.msg__sig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: var(--fs-x3s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.msg__sig::before { content: ""; width: 26px; height: 1px; background: currentColor; }

/* -------------------------------------------------------------------------
   29. CONCEPT DIAGRAM
   The service explained as a picture rather than a paragraph: what the
   company arrives with on the left, the three layers of the engagement in
   the middle, what is left behind on the right. Horizontal on a desktop,
   stacked on a phone; the chevrons rotate with it.
   ---------------------------------------------------------------------- */
.concept { display: grid; gap: clamp(34px, 3.4vw, 54px); }
@media (min-width: 1000px) {
  .concept {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr);
    column-gap: clamp(46px, 4.6vw, 86px);
    align-items: stretch;
  }
}
.concept__col, .concept__core { position: relative; }

/* The chevron between the columns. It lives in the gutter, so it rotates
   from "down" to "right" at the same breakpoint the layout turns. */
.concept__core::before,
.concept__col--out::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(24px, 2.4vw, 38px));
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(90deg);
  background: var(--c-primary);
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (min-width: 1000px) {
  .concept__core::before,
  .concept__col--out::before {
    top: 50%;
    left: calc(-1 * clamp(33px, 3.3vw, 56px));
    transform: translate(-50%, -50%);
  }
}

.concept__lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: var(--fs-x4s);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.concept__lbl::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.concept__head { margin-top: var(--sp-x3s); font-size: var(--fs-2l); font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.concept__list { margin-top: var(--sp-x2s); border-top: 1px solid var(--c-line); }
.concept__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding-block: var(--sp-x3s);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-body);
}
.concept__list li::before { content: ""; width: 7px; height: 1px; margin-top: 0.85em; background: var(--c-rule); }
.concept__col--out .concept__list li::before { background: var(--c-primary); height: 2px; }

/* The middle panel — the only filled box on the page, because it is the
   only thing here that is us. */
.concept__core {
  display: grid;
  align-content: start;
  gap: var(--sp-x2s);
  padding: clamp(22px, 2vw + 14px, 40px);
  background: var(--c-ink);
  color: var(--c-white);
}
.concept__core-lbl {
  font-family: var(--font-en);
  font-size: var(--fs-x4s);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-soft);
}
.concept__core-head { font-size: var(--fs-3l); font-weight: 700; line-height: 1.4; color: var(--c-white); }
.concept__layers { display: grid; }
.concept__layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(12px, 1.2vw + 6px, 20px);
  padding-block: var(--sp-x2s);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.concept__layer:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.concept__layer-num {
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: var(--fs-4l);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-primary-soft);
}
.concept__layer-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; color: var(--c-white); }
.concept__layer-sub { font-size: var(--fs-x4s); font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.concept__layer-text { font-size: var(--fs-x3s); line-height: 1.75; color: rgba(255, 255, 255, 0.68); }
.concept__core-foot { font-size: var(--fs-x3s); line-height: 1.8; color: rgba(255, 255, 255, 0.68); }

/* -------------------------------------------------------------------------
   30. HANDOVER METER
   The concept diagram's argument, measured: our share of the work falling
   away month by month. Rows rather than columns — a column chart squashes
   the Japanese labels at phone width, and these labels carry the meaning.
   ---------------------------------------------------------------------- */
.meter {
  margin-top: var(--sp-md);
  padding: clamp(22px, 2vw + 14px, 40px);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.meter__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-x4s) var(--sp-x2s);
  padding-bottom: var(--sp-x3s);
  border-bottom: 1px solid var(--c-line);
}
.meter__title { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-md); color: var(--c-ink); }
.meter__key { display: flex; align-items: center; gap: 8px; font-size: var(--fs-x4s); color: var(--ink-mute); }
.meter__swatch { width: 22px; height: 8px; border-radius: 999px; background: var(--c-primary); }

.meter__rows { display: grid; }
.meter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px var(--sp-x3s);
  padding-block: var(--sp-x3s);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 620px) {
  .meter__row { grid-template-columns: clamp(140px, 14vw, 200px) minmax(0, 1fr) auto; }
}
.meter__phase {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: var(--fs-x3s);
  font-weight: 700;
  color: var(--c-ink);
}
.meter__phase span { font-family: var(--font-en); font-size: var(--fs-x4s); font-weight: 700; color: var(--ink-mute); }
.meter__track {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 999px;
  background: var(--c-bone-deep);
  overflow: hidden;
}
@media (min-width: 620px) { .meter__track { grid-column: auto; } }
/* Drawn at full length by default, so the chart is correct with scripting
   off; only when JS is running does it start at zero and grow, once, the
   first time the block is scrolled into view. */
.meter__fill {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: var(--c-primary);
}
.js .meter[data-reveal] .meter__fill { width: 0; transition: width 1.1s var(--ease) 0.15s; }
.js .meter[data-reveal].is-in .meter__fill { width: var(--v); }
.meter__val {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-en);
  font-size: var(--fs-2l);
  font-weight: 700;
  line-height: 1;
  color: var(--c-ink);
}
@media (min-width: 620px) { .meter__val { grid-column: 3; min-width: 3.4em; } }
.meter__val small { font-size: 0.52em; font-weight: 700; margin-left: 2px; }
.meter__foot { margin-top: var(--sp-x3s); font-size: var(--fs-x3s); line-height: 1.8; color: var(--ink-mute); }

/* -------------------------------------------------------------------------
   31. MISSION / VISION / VALUE
   Label rail on the left, the sentence on the right. The three values sit
   underneath as hairline-divided columns.
   ---------------------------------------------------------------------- */
.mvv { display: grid; gap: var(--sp-lg); }
.mvv__block { display: grid; gap: var(--sp-x2s); }
@media (min-width: 880px) {
  /* baseline, not start: the label and the statement are set at different
     sizes, and top-aligning them left the label floating above the line. */
  .mvv__block { grid-template-columns: clamp(170px, 15vw, 250px) minmax(0, 1fr); column-gap: clamp(30px, 4vw, 80px); align-items: baseline; }
}
.mvv__label {
  font-family: var(--font-en);
  font-size: var(--fs-5l);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--c-ink);
}
.mvv__statement { font-size: var(--fs-8l); font-weight: 700; line-height: 1.35; color: var(--c-ink); }
.mvv__statement .red { color: var(--c-primary); }
.mvv__text { margin-top: var(--sp-x2s); font-size: var(--fs-md); line-height: var(--lh-lg); color: var(--ink-body); max-width: 44em; }

.mvv__values { --vpanel: var(--c-bone); display: grid; gap: 8px; }
/* On the tone band the panels turn white, so they lift off either ground. */
.section--tone .mvv__values { --vpanel: var(--c-white); }

/* Five values as five panels: a large number, the English name, the value
   itself, and its one-line creed under a short rule. */
.mvv__value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 22px 20px;
  background: var(--vpanel);
  word-break: auto-phrase;
}
.mvv__vnum { display: contents; }
.mvv__vno {
  grid-row: 1 / 4;
  font-family: var(--font-en);
  font-size: var(--fs-6l);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary);
}
.mvv__ven {
  font-family: var(--font-en);
  font-size: var(--fs-x5s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.mvv__vtitle { margin-top: 6px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.mvv__vtitle .red { color: var(--c-primary); }
.mvv__vtext { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-body); }

@media (min-width: 640px) and (max-width: 1099px) {
  .mvv__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mvv__value:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .mvv__values { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mvv__value {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    padding: clamp(24px, 2vw, 34px) clamp(18px, 1.5vw, 26px) clamp(26px, 2.2vw, 38px);
  }
  .mvv__vno { grid-row: auto; font-size: var(--fs-10l); font-weight: 600; }
  .mvv__ven { margin-top: var(--sp-x2s); }
  .mvv__vtitle { margin-top: 10px; }
  .mvv__vtext { margin-top: var(--sp-x2s); padding-top: var(--sp-x3s); border-top: 1px solid var(--c-line); }
}
}
.mvv__vnum { font-family: var(--font-en); font-size: var(--fs-x3s); font-weight: 700; letter-spacing: 0.16em; color: var(--c-primary); }
.mvv__vtitle { margin-top: 12px; font-size: var(--fs-2l); font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.mvv__vtitle .red { color: var(--c-primary); }
.mvv__vtext { margin-top: var(--sp-x3s); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-body); }

/* -------------------------------------------------------------------------
   32. DOCUMENT DOWNLOAD
   The primary lead-capture block. Three sheets, one button. Kept light so
   it reads as an offer rather than as the closing black contact band that
   follows it.
   ---------------------------------------------------------------------- */
.docs__top { display: grid; gap: var(--sp-x2s); max-width: 54em; }
/* auto-fit, not a fixed three: the cards come out of WordPress, so a fourth
   or a fifth has to land on its own row without anyone touching the CSS. */
.docs__grid {
  display: grid;
  gap: clamp(12px, 1vw + 7px, 20px);
  margin-top: var(--sp-sm);
  counter-reset: doc;
}
@media (min-width: 760px) {
  .docs__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
/* No thumbnail. The cards come out of the CMS, so anything pictorial would
   either be the same drawing on every card or an image the client has to
   supply for each one. The numeral carries the card instead. */
.docs__card {
  counter-increment: doc;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-x4s);
  padding: clamp(22px, 1.8vw + 14px, 38px);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
/* Numbered by the counter rather than by hand, so the markup for a card is
   the same whichever position it ends up in. */
.docs__no {
  font-family: var(--font-en);
  font-size: var(--fs-8l);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary-soft);
}
.docs__no::before { content: counter(doc, decimal-leading-zero); }
.docs__title { margin-top: var(--sp-x3s); font-size: var(--fs-xl); font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.docs__text { font-size: var(--fs-x3s); line-height: 1.8; color: var(--ink-body); }
/* One button per document, sized down to sit inside a card. It is the same
   .rbtn as everywhere else — only the padding and the type change. */
.docs__card .rbtn {
  justify-self: start;
  width: min(100%, 176px);
  margin-top: auto;
  padding-top: var(--sp-x3s);
}
.docs__card .rbtn__in { --btn-pad-x: 18px; padding-block: 11px; }
.docs__card .rbtn__txt { font-size: var(--fs-x3s); }
.docs__card .rbtn__ico { width: 7px; height: 7px; margin-top: -3.5px; }
.docs__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-x2s); margin-top: var(--sp-sm); }
.docs__meta { font-size: var(--fs-x3s); color: var(--ink-mute); }

/* -------------------------------------------------------------------------
   33. SERVICE CARDS — the overview grid at the top of the service page
   ---------------------------------------------------------------------- */
.scards { display: grid; gap: clamp(20px, 2vw + 12px, 40px); }
/* Three stages, one row: with two columns the third card sat alone. */
@media (min-width: 760px) { .scards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scard { display: grid; align-content: start; gap: var(--sp-x3s); padding-top: var(--sp-x2s); border-top: 1px solid var(--c-rule); }
.scard__media { overflow: hidden; }
.scard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.scard:hover .scard__media img { transform: scale(1.04); }
.scard__tag {
  justify-self: start;
  padding: 5px 12px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: var(--fs-x5s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scard__title { font-size: var(--fs-4l); font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.scard__text { font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-body); }

/* -------------------------------------------------------------------------
   34. COMPANY OVERVIEW STRIP — the condensed profile on the home page
   ---------------------------------------------------------------------- */
.ovw { display: grid; gap: var(--sp-sm); }
@media (min-width: 980px) {
  .ovw { grid-template-columns: clamp(260px, 26vw, 400px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 100px); align-items: start; }
}
.ovw__aside { display: grid; gap: var(--sp-x2s); align-content: start; }

/* -------------------------------------------------------------------------
   35. MOTION — reveal on enter
   ---------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The main message animates by clipping its own lines (section 29), so it
   opts out of the generic fade — running both would double the movement. */
.js .msg__big[data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .meter[data-reveal] .meter__fill { width: var(--v); transition: none; }
  .wordloop__track { animation: none; }
  .js [data-wipe] {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    transition: none !important;
  }
  .js [data-wipe]::after { content: none !important; }
  .js .hero__display > span > span { transform: none; transition: none; }
  .js .msg__big > span > span { transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* -------------------------------------------------------------------------
   36. PRINT
   ---------------------------------------------------------------------- */
@media print {
  #siteHeader, .nav, .burger, .cv, .band, .wordloop, .hero__art, .hstrip { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   OPENING LOADER — top page, first visit only
   The hexagon fills from the bottom as the count runs 0 → 100, then flies
   into the header logo while the white ground fades away. Only shown while
   <html> carries .is-loading (set inline in index.html), so with JS off or
   under reduced motion it never appears.
   ---------------------------------------------------------------------- */
.loader { display: none; }
html.is-loading { overflow: hidden; }
.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--c-white, #fff);
  transition: background-color 0.6s var(--ease);
}
.loader__mark {
  --p: 0%;
  position: relative;
  width: clamp(70px, 6vw + 40px, 104px);
  aspect-ratio: 316 / 423;
  transform-origin: 50% 50%;
  transition: transform 0.85s var(--ease);
}
.loader__mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__base { opacity: 0.12; }
.loader__fill { clip-path: inset(calc(100% - var(--p)) 0 0 0); }
.loader__count {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  transition: opacity 0.3s ease;
}
.loader__pct { margin-left: 2px; color: var(--c-primary); }
.loader.is-done { background-color: rgba(255, 255, 255, 0); }
.loader.is-done .loader__count { opacity: 0; }