/*
Theme Name: Riverth 2026
Theme URI: https://riverth.jp/
Description: 株式会社リバースデザイン公式サイト テーマ。Web / Graphic / AI を横断するクリエイティブスタジオ用のオリジナルテーマ。
Version: 1.0.0
Author: Ricky / Riverth Design
Author URI: https://riverth.jp/
*/

/* =========================================================
   Riverth Design — Tesla-inspired prototype
   Tokens follow DESIGN.md (Electric Blue / Carbon Dark / etc.)
   ========================================================= */

:root {
  --c-blue:        #3E6AE1;
  --c-white:       #FFFFFF;
  --c-ash:         #F4F4F4;
  --c-carbon:      #171A20;
  --c-graphite:    #393C41;
  --c-pewter:      #5C5E62;
  --c-silver:      #8E8E8E;
  --c-cloud:       #EEEEEE;
  --c-pale:        #D0D1D2;
  --c-frost:       rgba(255,255,255,0.75);

  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
                   'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
                   'Yu Gothic', 'Meiryo', sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  --radius-btn:  4px;
  --radius-card: 12px;

  --ease:     cubic-bezier(0.5, 0, 0, 0.75);
  --duration: 0.33s;

  --max-w: 1383px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--c-blue); color: var(--c-white); }

/* Responsive line-break utilities (mobile breakpoint = 560px).
   .br-pc → breaks on desktop only (collapses on phones)
   .br-sp → breaks on phones only (collapses on desktop) */
.br-sp { display: none; }
@media (max-width: 560px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}

html { scroll-behavior: smooth; }

/* =========================================================
   SITE LOADER (intro animation, first visit only)
   Hidden by default; an inline <script> in index.html adds
   `html.show-loader` on first visit, then hero.js plays it.
   ========================================================= */
.site-loader { display: none; }
html.show-loader .site-loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
html.show-loader body {
  overflow: hidden;
  height: 100vh;
}
html.show-loader .site-header { opacity: 0; pointer-events: none; }
html.show-loader.loader-done .site-header {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.7s ease;
}

.site-loader-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: var(--c-white);
  z-index: 1;
  transition: transform 1.0s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}
.site-loader-panel-top { top: 0; }
.site-loader-panel-bottom { bottom: 0; }

/* Color sweep stripes — bold panels that wipe right → left across
   the screen before settling on the blue base for the logo reveal. */
.loader-stripe {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(101%);
  will-change: transform;
}
.loader-stripe-1 { background: var(--c-pale);   }
.loader-stripe-2 { background: var(--c-pewter); }

.site-loader.is-active .loader-stripe-1 {
  animation: sweepRTL 1.1s cubic-bezier(0.7, 0, 0.3, 1) 0s forwards;
}
.site-loader.is-active .loader-stripe-2 {
  animation: sweepRTL 1.1s cubic-bezier(0.7, 0, 0.3, 1) 0.55s forwards;
}
@keyframes sweepRTL {
  0%   { transform: translateX( 101%); }
  100% { transform: translateX(-101%); }
}

.site-loader-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--c-carbon);
  text-align: center;
  z-index: 3;
  padding: 0 24px;
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.6, 0, 0.4, 1);
}

.site-loader-mark {
  width: clamp(78px, 9vw, 130px);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.75s ease 1.8s,
              transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) 1.8s;
}
.site-loader-mark .mark-path { fill: var(--c-carbon); }

.site-loader-tagline {
  margin-top: clamp(28px, 4vw, 48px);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--c-carbon);
  letter-spacing: 0.01em;
  line-height: 1.5;
  display: inline-flex;
  overflow: hidden;
  padding: 0.1em 0;
}
.site-loader-tagline .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Active state — animate IN */
.site-loader.is-active .site-loader-mark {
  opacity: 1;
  transform: scale(1);
}
.site-loader.is-active .site-loader-tagline .char {
  opacity: 1;
  transform: translateY(0);
}

/* Leaving state — fade inner, split panels apart */
.site-loader.is-leaving { pointer-events: none; }
.site-loader.is-leaving .site-loader-inner {
  opacity: 0;
  transform: scale(1.04);
}
.site-loader.is-leaving .site-loader-panel-top {
  transform: translateY(-100%);
}
.site-loader.is-leaving .site-loader-panel-bottom {
  transform: translateY(100%);
}

.site-loader.is-done { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.show-loader .site-loader { display: none !important; }
  html.show-loader body { overflow: auto; height: auto; }
  html.show-loader .site-header { opacity: 1; pointer-events: auto; }
}


body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--c-graphite);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 14px var(--gutter);
  transition: background-color var(--duration), backdrop-filter var(--duration);
}

.site-header.is-scrolled {
  background: var(--c-frost);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-header.is-scrolled[data-theme="dark"] {
  background: rgba(23,26,32,0.7);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand-logo {
  height: 26px;
  width: auto;
  transition: filter var(--duration);
}

.site-header[data-theme="dark"] .brand-logo {
  filter: invert(1) brightness(2);
}

.primary-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.primary-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-carbon);
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  transition: background-color var(--duration), color var(--duration);
}

.site-header[data-theme="dark"] .primary-nav a { color: var(--c-white); }

.primary-nav a:hover { background: rgba(0,0,0,0.06); }
.site-header[data-theme="dark"] .primary-nav a:hover { background: rgba(255,255,255,0.1); }

.primary-nav a[aria-current="page"] { color: var(--c-blue); }
.site-header[data-theme="dark"] .primary-nav a[aria-current="page"] { color: #8aa6ff; }

/* Services dropdown */
.has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.has-dropdown > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after {
  transform: translateY(0) rotate(225deg);
  opacity: 1;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  margin-top: 12px;
  padding: 12px;
  background: var(--c-white);
  border: 1px solid var(--c-cloud);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -20px rgba(23,26,32,0.18), 0 12px 24px -12px rgba(23,26,32,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  display: grid;
  gap: 2px;
  z-index: 100;
}
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.primary-nav .dropdown-menu a {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-carbon);
  background: transparent;
  border-radius: 10px;
  white-space: nowrap;
}
.primary-nav .dropdown-menu a small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-pewter);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.primary-nav .dropdown-menu a:hover {
  background: var(--c-ash);
  color: var(--c-blue);
}
.primary-nav .dropdown-menu a:hover small { color: var(--c-graphite); }
.primary-nav .dropdown-menu a[aria-current="page"] { color: var(--c-blue); }
.site-header[data-theme="dark"] .primary-nav .dropdown-menu a { color: var(--c-carbon); }
.site-header[data-theme="dark"] .primary-nav .dropdown-menu a:hover { color: var(--c-blue); background: var(--c-ash); }
.dropdown-divider {
  height: 1px;
  background: var(--c-cloud);
  margin: 6px 8px;
}

/* =========================================================
   MOBILE NAV — hamburger button + slide-in drawer
   Desktop hides toggle + drawer; below 900px nav swaps to drawer.
   ========================================================= */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 110;
}
.nav-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.6px;
  background: var(--c-carbon);
  border-radius: 2px;
  transform-origin: center;
  transition:
    top 0.4s cubic-bezier(0.7, 0, 0.3, 1),
    transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s,
    opacity 0.25s ease,
    background 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19.2px; }
.nav-toggle span:nth-child(3) { top: 25.4px; }
.site-header[data-theme="dark"] .nav-toggle span { background: var(--c-white); }
/* Force light bars while menu is open (over dark drawer) */
.nav-toggle[aria-expanded="true"] span { background: var(--c-white); }
/* Morph to X */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 19.2px;
  transform: rotate(45deg);
  transition:
    top 0.4s cubic-bezier(0.7, 0, 0.3, 1),
    transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 19.2px;
  transform: rotate(-45deg);
  transition:
    top 0.4s cubic-bezier(0.7, 0, 0.3, 1),
    transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
}

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}
.mobile-menu[aria-hidden="false"] {
  visibility: visible;
  transition: visibility 0s linear;
}
.mobile-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23,26,32,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  cursor: pointer;
}
.mobile-menu[aria-hidden="false"] .mobile-menu-overlay { opacity: 1; }
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  background: var(--c-carbon);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  padding: clamp(96px, 13vh, 132px) clamp(28px, 5vw, 52px) clamp(28px, 5vw, 40px);
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -30px 0 80px -20px rgba(0,0,0,0.4);
}
.mobile-menu[aria-hidden="false"] .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-menu-link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--c-white);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  opacity: 0;
  transform: translateX(38px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.2s ease;
}
.mobile-menu[aria-hidden="false"] .mobile-menu-link {
  opacity: 1;
  transform: translateX(0);
  /* Stagger via JS-set --menu-i */
  transition-delay: calc(0.16s + var(--menu-i, 0) * 0.05s);
}
.mobile-menu[aria-hidden="true"] .mobile-menu-link {
  /* Quick reset on close so next open is clean */
  transition-delay: 0s;
}
.mobile-menu-link:hover { color: #8aa6ff; }
.mobile-menu-link[aria-current="page"] { color: #8aa6ff; }

.mobile-menu-num {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  min-width: 26px;
  position: relative;
  top: -0.3em;
  flex-shrink: 0;
}

.mobile-menu-link.is-sub {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 0 10px 44px;
  border-bottom: 0;
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
}
.mobile-menu-link.is-sub::before {
  content: "→";
  position: absolute;
  left: 12px;
  color: rgba(255,255,255,0.35);
  font-style: normal;
}
.mobile-menu-link.is-sub { position: relative; }
.mobile-menu-link.is-sub:hover { color: var(--c-white); }
.mobile-menu-link.is-sub small {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
/* Group break before "Pricing" after the services sub-section */
.mobile-menu-link.is-sub + .mobile-menu-link:not(.is-sub) {
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
}

.mobile-menu-foot {
  margin-top: auto;
  padding-top: 36px;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.mobile-menu[aria-hidden="false"] .mobile-menu-foot {
  opacity: 1;
  transition-delay: calc(0.16s + var(--menu-count, 8) * 0.05s + 0.05s);
}

/* Body scroll lock */
html.menu-open,
html.menu-open body { overflow: hidden; }

@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: 0; }
  /* Hide the always-on Contact button — the drawer carries Contact instead */
  .header-actions { display: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  height: 40px;
  min-width: 200px;
  padding: 0 24px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration), color var(--duration), border-color var(--duration);
  white-space: nowrap;
}

.btn-sm { height: 32px; min-width: auto; padding: 0 16px; font-size: 13px; }

.btn-primary {
  background: var(--c-blue);
  color: var(--c-white);
}
.btn-primary:hover { background: #3258c4; }

.btn-secondary {
  background: var(--c-white);
  color: var(--c-graphite);
}
.btn-secondary:hover { background: var(--c-ash); }

.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: var(--c-white);
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background: var(--c-carbon);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(23,26,32,0.55) 75%, rgba(23,26,32,0.95) 100%),
    linear-gradient(to bottom, rgba(23,26,32,0.6) 0%, transparent 25%, transparent 75%, rgba(23,26,32,0.85) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  /* 8vw of horizontal breathing room on each side — keeps the
     hero from feeling edge-to-edge on wide displays. */
  padding: 0 clamp(40px, 8vw, 220px);
  width: 100%;
  max-width: none;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: heroFade 0.9s var(--ease) 0.1s forwards;
}

.hero-title {
  /* Baseline size — JS auto-fit overrides on desktop to fill the
     viewport. Conservative clamp keeps things sane if JS fails. */
  font-size: clamp(64px, 12vw, 240px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--c-white);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  white-space: nowrap;
  width: 100%;
}

.hero-title .line {
  display: inline-flex;
  white-space: nowrap;
}

.hero-title .line-accent {
  color: var(--c-blue);
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.015em;
}

/* Apply the Philosophy gradient to the "× AI" line. Each .char-inner
   gets its own 220% gradient (same proportions as Philosophy) so the
   colour cycle through the line matches the rest of the site. Side
   padding extends the bg painting area so italic glyph overhang is
   filled instead of being clipped at the layout box; the negative
   margin cancels the layout shift so chars don't space apart. */
.hero-title .line-accent .char-inner {
  background-image: linear-gradient(115deg,
    #3E6AE1 0%,
    #6B5CE0 12.5%,
    #B855E0 25%,
    #EC4899 37.5%,
    #FF8B5B 50%,
    #EC4899 62.5%,
    #B855E0 75%,
    #6B5CE0 87.5%,
    #3E6AE1 100%);
  background-size: 220% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0 0.12em;
  margin: 0 -0.12em;
}

/* Per-character reveal — generic so any element with .split class
   participates. No overflow:hidden on .char (italic glyph slants
   would be clipped). */
.split .char {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}
.split .char-inner {
  display: inline-block;
  will-change: transform, opacity;
  transform: translateY(45%);
  opacity: 0;
}
.split.is-ready .char-inner {
  animation: charRise 0.95s cubic-bezier(0.2, 0.85, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

/* Hero exception: × AI line drops in from above for a 1-2 reveal. */
.hero-title .line-accent .char-inner {
  transform: translateY(-45%);
}
.hero-title.is-ready .line-accent .char-inner {
  animation-name: charDrop, philoGradient;
  animation-duration: 0.95s, 10s;
  animation-timing-function: cubic-bezier(0.2, 0.85, 0.2, 1), linear;
  animation-delay: var(--d, 0s), 0s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}

@keyframes charRise {
  from { transform: translateY(45%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes charDrop {
  from { transform: translateY(-45%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.hero-subtitle {
  margin-top: var(--space-lg);
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: heroFade 0.9s var(--ease) 1.4s forwards;
}

.hero-actions {
  margin-top: var(--space-xl);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFade 0.9s var(--ease) 1.6s forwards;
}

@keyframes heroFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .hero-title {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(64px, 22vw, 180px);
  }
}

.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: rgba(255,255,255,0.45);
  z-index: 2;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  transform-origin: top;
  animation: scrollLine 2.4s ease-in-out infinite;
}

@keyframes scrollLine {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50%     { transform: scaleY(0.25); opacity: 0.4; }
}

/* =========================================================
   HERO TITLE — Scroll-pinned morph into Services
   The "DESIGN × AI" title detaches into a fixed layer and is
   driven by hero.js: it stays put while the hero scrolls away,
   shrinks, recolours, and lands just above the Services
   catchphrase. These rules only set up the layer + the landing
   slot; all motion is JS transform on .hero-title.is-pinned.
   ========================================================= */

/* Reserves the title's vertical footprint inside .hero-content
   once the title is lifted into the fixed layer, so the eyebrow /
   subtitle / buttons don't jump. Height is set inline by JS. */
.hero-title-spacer { pointer-events: none; }

/* The detached, scroll-driven title. Positioned + transformed
   entirely from JS; we only declare paint hints here. */
.hero-title.is-pinned {
  position: fixed;
  margin: 0;
  z-index: 90;            /* under the sticky header (100) */
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;   /* it's decorative once flying */
}

/* Landing slot above "Three disciplines. One studio." — reserves
   the room the shrunken title settles into so the layout below it
   never shifts. The flying title overlays this; the slot stays
   invisible. Height ≈ the landed title size. */
.hero-land-anchor {
  /* Landed title stays the hero of the section — clearly larger than
     the "Three disciplines." headline (clamp(44px,6vw,88px)) below it.
     The landed scale is this slot's height ÷ the title's rendered
     height, so a taller slot = a bigger landed title. */
  height: clamp(56px, 12vw, 148px);
  margin-bottom: var(--space-lg);
  pointer-events: none;
}

/* On phones the title wraps to two stacked lines, so it's much taller.
   Give the slot far more height there so it lands big instead of shrinking
   to a tiny cluster (matches the breakpoint where .hero-title stacks). */
@media (max-width: 560px) {
  .hero-land-anchor { height: clamp(104px, 34vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  /* No fly-in: keep the title in the hero and drop the landing slot. */
  .hero-land-anchor { display: none; }
}

/* =========================================================
   SERVICES INTRO — Brand-mark parallax watermark
   The logo mark's triangle + ring sit on the empty right side
   as separate layers. hero.js drifts them apart on scroll and
   lets them lock into the complete mark when the section is
   centred. A slow float keeps them quietly alive.
   ========================================================= */
.services-intro-section { position: relative; overflow: hidden; }
.services-intro-section .section-inner { position: relative; z-index: 2; }

.services-mark {
  position: absolute;
  top: 50%;
  /* Bleed off the right edge for an editorial, cropped feel. */
  right: clamp(-140px, -5vw, -48px);
  width: clamp(380px, 50vw, 720px);
  aspect-ratio: 73.1 / 87.88;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.94);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
  animation: markFloat 11s ease-in-out infinite;
  /* Depth for the triangle's vertical-axis rock (see hero.js). */
  perspective: 1400px;
}

/* Emerge when the section scrolls into view (class set by hero.js). */
.services-mark.is-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.services-mark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
  transform-origin: 50% 50%;   /* rock around the mark's own centre */
}

/* Triangle: a quiet light-gray watermark behind the ring. */
.mark-tri-layer path { fill: #E8E8EA; }

/* Ring: a faint brand-gradient halo in front, tying back to "× AI". */
.mark-ring-layer { opacity: 0.18; }

/* Float lives on the container so it composes with the JS layer
   parallax (which lives on the inner layers) without fighting it. */
@keyframes markFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

/* Tuck the mark away where the right-hand whitespace disappears. */
@media (max-width: 860px) {
  .services-mark { width: 64vw; right: clamp(-160px, -16vw, -80px); }
  .mark-ring-layer { opacity: 0.12; }
  .mark-tri-layer path { fill: #EDEDEF; }
}
@media (max-width: 600px) {
  /* Keep the mark on phones as a right-edge accent — bleeds mostly
     off-screen and sits faintly behind the text. */
  .services-mark { width: 78vw; right: -32vw; }
  .mark-ring-layer { opacity: 0.10; }
  .mark-tri-layer path { fill: #F0F0F2; }
}

@media (prefers-reduced-motion: reduce) {
  /* Show the assembled mark, statically — no float, no parallax. */
  .services-mark {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    animation: none;
  }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-2xl) var(--gutter);
}

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.section-light { background: var(--c-white); color: var(--c-graphite); }
.section-ash   { background: var(--c-ash); }
.section-dark  { background: var(--c-carbon); color: var(--c-white); }

/* AI section — quiet constellation backdrop */
.ai-section { position: relative; overflow: hidden; }
.ai-section .section-inner { position: relative; z-index: 1; }
.ai-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-pewter);
  margin-bottom: var(--space-md);
}
.kicker-light { color: rgba(255,255,255,0.55); }

.section-headline {
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--c-carbon);
}

.section-dark .section-headline { color: var(--c-white); }

.section-headline .muted { color: var(--c-silver); font-weight: 500; }

/* Phones: nudge the headline down a touch from the 44px floor. */
@media (max-width: 560px) {
  .section-headline { font-size: clamp(34px, 10.5vw, 40px); }
}

.section-lead {
  margin-top: var(--space-lg);
  max-width: 640px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-graphite);
}

.section-intro { padding: var(--space-xl) 0; }

/* Wider lead on the Services intro so each sentence stays on one line
   instead of breaking awkwardly mid-phrase. */
.section-intro .section-lead { max-width: 820px; }

/* =========================================================
   SERVICE BLOCK
   ========================================================= */
.service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  width: 100%;
}

.service.flip > .service-image { order: 2; }

.service-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-cloud);
  position: relative;
}

.service-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.06));
  pointer-events: none;
}

.service-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.service-section:hover .service-image img { transform: scale(1.04); }

.service-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--c-pewter);
  margin-bottom: var(--space-md);
}

.section-dark .service-num { color: rgba(255,255,255,0.5); }

.service-title {
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--c-carbon);
}

.section-dark .service-title { color: var(--c-white); }

.service-jp {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-graphite);
  margin-top: var(--space-md);
}

.section-dark .service-jp { color: rgba(255,255,255,0.85); }

.service-desc {
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-graphite);
  margin-top: var(--space-lg);
  max-width: 460px;
}

.section-dark .service-desc { color: rgba(255,255,255,0.75); }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-xl);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-carbon);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-carbon);
  transition: gap var(--duration), color var(--duration), border-color var(--duration);
}

.service-link:hover { gap: 20px; color: var(--c-blue); border-color: var(--c-blue); }

.service-link svg { transition: transform var(--duration); }
.service-link:hover svg { transform: translateX(4px); }

.service-link-light {
  color: var(--c-white);
  border-color: var(--c-white);
}
.service-link-light:hover { color: var(--c-blue); border-color: var(--c-blue); }

.service-features {
  margin-top: var(--space-xl);
  list-style: none;
  display: grid;
  gap: 10px;
}
.service-features li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-graphite);
  padding-left: 18px;
  position: relative;
}
.service-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--c-blue);
}
.section-dark .service-features li { color: rgba(255,255,255,0.78); }

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy-section { background: var(--c-white); }

.philosophy {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.philosophy-en {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--c-carbon);   /* fallback before .phi-line-inner paints */
}

/* Generic line-by-line mask reveal — used by .philosophy-en
   and the sub-page hero titles. Gradient on top is opt-in via
   a more specific selector. */
.phi-line {
  display: block;
  overflow: hidden;
  padding: 0 0.08em 0.1em;          /* room for italic glyph slant */
  margin: -0.1em -0.08em 0;
}
.phi-line-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.2, 0.85, 0.2, 1),
              opacity   1.1s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.is-revealed .phi-line-inner {
  transform: translateY(0);
  opacity: 1;
}
.is-revealed .phi-line:nth-child(2) .phi-line-inner { transition-delay: 0.16s; }
.is-revealed .phi-line:nth-child(3) .phi-line-inner { transition-delay: 0.32s; }
.is-revealed .phi-line:nth-child(4) .phi-line-inner { transition-delay: 0.48s; }

/* Philosophy-specific animated gradient on top of the reveal. */
.philosophy-en .phi-line-inner {
  background: linear-gradient(115deg,
    #3E6AE1 0%,
    #6B5CE0 12.5%,
    #B855E0 25%,
    #EC4899 37.5%,
    #FF8B5B 50%,
    #EC4899 62.5%,
    #B855E0 75%,
    #6B5CE0 87.5%,
    #3E6AE1 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: philoGradient 10s linear infinite;
}
@keyframes philoGradient {
  0%   { background-position:   0% 50%; }
  100% { background-position: 220% 50%; }
}
.italic-thin {
  font-style: italic;
  font-weight: 400;
  color: var(--c-pewter);
}
/* Inside the gradient h2, neutralise italic-thin's grey so it
   participates in the gradient instead of overriding it. */
.philosophy-en .italic-thin {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.philosophy-jp {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 500;
  color: var(--c-carbon);
  margin-top: var(--space-xl);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s var(--ease) 0.7s,
              transform 0.95s var(--ease) 0.7s;
}
.philosophy.is-revealed .philosophy-jp {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-text {
  margin: var(--space-xl) auto 0;
  max-width: 580px;
  font-size: 15px;
  line-height: 2;
  color: var(--c-graphite);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s var(--ease) 0.95s,
              transform 0.95s var(--ease) 0.95s;
}
.philosophy.is-revealed .philosophy-text {
  opacity: 1;
  transform: translateY(0);
}

/* Service detail pages (AI / Web / Graphic) carry longer stance copy —
   widen the measure so it doesn't break awkwardly mid-phrase. */
.philosophy-text-wide { max-width: 820px; }

/* =========================================================
   WORKS
   ========================================================= */
.works-section { background: var(--c-white); }

.works-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-2xl);
  gap: var(--space-md);
}

.text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-carbon);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration), color var(--duration);
  padding-bottom: 2px;
}
.text-link:hover { border-color: var(--c-carbon); color: var(--c-blue); }

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Listing variant — used on the dedicated /work/ listing page.
   3-column square cards for a denser, gallery-like overview. */
.works-grid.is-listing {
  grid-template-columns: repeat(3, 1fr);
}
.works-grid.is-listing .work-card {
  aspect-ratio: 1 / 1;
}
@media (max-width: 900px) {
  .works-grid.is-listing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .works-grid.is-listing { grid-template-columns: 1fr; }
}

.work-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--c-cloud);
  display: block;
}

.work-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.work-card:hover img { transform: scale(1.06); }

.work-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  pointer-events: none;
}

.work-label {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 2;
  color: var(--c-white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.work-name {
  position: absolute;
  bottom: 24px; left: 24px;
  z-index: 2;
  color: var(--c-white);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* =========================================================
   NEWS
   ========================================================= */
.news-section { min-height: auto; padding: var(--space-3xl) var(--gutter); }

.news-list { margin-top: var(--space-xl); }

.news-item {
  display: grid;
  grid-template-columns: 120px 110px 1fr;
  gap: var(--space-lg);
  padding: 22px 0;
  border-top: 1px solid var(--c-pale);
  align-items: center;
  font-size: 14px;
}
.news-item:last-child { border-bottom: 1px solid var(--c-pale); }

.news-date { color: var(--c-pewter); font-variant-numeric: tabular-nums; }
.news-cat  { color: var(--c-blue); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.news-link { color: var(--c-carbon); transition: color var(--duration); }
.news-link:hover { color: var(--c-blue); }

/* =========================================================
   CTA
   ========================================================= */
.cta-section {
  background: var(--c-carbon);
  color: var(--c-white);
  text-align: center;
  padding: clamp(120px, 18vw, 220px) var(--gutter);
  position: relative;
  overflow: hidden;
}

.cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.cta-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }

.cta-title {
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-top: var(--space-lg);
  color: var(--c-white);
}
.cta-section .section-headline { color: var(--c-white); }

.cta-jp {
  margin-top: var(--space-lg);
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 2;
}

.cta-actions {
  margin-top: var(--space-xl);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
  background: var(--c-white);
  font-size: 13px;
  color: var(--c-pewter);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--c-cloud);
}

.footer-brand img { height: 28px; margin-bottom: var(--space-md); }
.footer-addr { line-height: 1.9; color: var(--c-pewter); }

.footer-col h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-graphite);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.footer-col li { margin-bottom: var(--space-xs); }
.footer-col a { transition: color var(--duration); }
.footer-col a:hover { color: var(--c-carbon); }

.footer-bottom {
  max-width: var(--max-w);
  margin: var(--space-md) auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--c-silver);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .primary-nav { display: none; }

  .service { grid-template-columns: 1fr; gap: var(--space-xl); }
  .service.flip > .service-image { order: 0; }
  .service-image { aspect-ratio: 4/3; }

  .works-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr 1fr; }

  .news-item { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .news-item .news-cat { font-size: 11px; }

  .hero-actions .btn,
  .cta-actions .btn { min-width: 0; flex: 1 1 160px; }

  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 540px) {
  .footer-inner { grid-template-columns: 1fr; }
  .works-header { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   SUB-PAGE HERO + SHARED PAGE COMPONENTS
   ========================================================= */

.page-hero {
  position: relative;
  background: var(--c-carbon);
  color: var(--c-white);
  padding: 200px clamp(40px, 8vw, 220px) clamp(80px, 12vw, 160px);
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero::after {
  /* Subtle blue glow at the bottom edge — ties sub-pages to brand */
  content: "";
  position: absolute;
  inset: auto 0 -40% 0;
  height: 80%;
  background: radial-gradient(ellipse at 30% 0%, rgba(62,106,225,0.18), transparent 60%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.page-hero .kicker { color: rgba(255,255,255,0.55); }

.page-title {
  font-size: clamp(56px, 10vw, 200px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--c-white);
  margin-top: var(--space-md);
}

.page-lead {
  margin-top: var(--space-xl);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.95;
  color: rgba(255,255,255,0.72);
  max-width: 820px;
}

@media (max-width: 768px) {
  .page-hero {
    padding: 140px var(--gutter) 80px;
    min-height: 56vh;
  }
}

/* Compact hero — category listings & paginated work pages.
   Keeps the dark band and kicker, but trims the oversized
   keyline title down to a small heading so the grid sits higher. */
.page-hero.is-compact {
  min-height: 0;
  padding: 150px clamp(40px, 8vw, 220px) clamp(40px, 5vw, 64px);
  align-items: flex-end;
}

.page-title-compact {
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
  margin-top: var(--space-sm);
}

@media (max-width: 768px) {
  .page-hero.is-compact {
    padding: 120px var(--gutter) 40px;
    min-height: 0;
  }
  .page-title-compact {
    font-size: clamp(26px, 7vw, 36px);
  }
}

/* =========================================================
   SERVICE INTERLUDE — full-bleed parallax photo band
   A shared visual breather dropped between text sections on the
   service sub-pages. The image over-scans its frame and is
   drifted on scroll by hero.js for a gentle parallax; a short
   statement sits over a dark gradient. One component, themed per
   page via the inline image + copy.
   ========================================================= */
.service-interlude {
  position: relative;
  height: clamp(380px, 58vh, 660px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--c-carbon);
}

.interlude-media {
  position: absolute;
  /* Over-scan top/bottom so the parallax shift never reveals an edge. */
  inset: -14% 0;
  will-change: transform;
}
.interlude-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.interlude-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(23,26,32,0.82) 0%, rgba(23,26,32,0.30) 45%, rgba(23,26,32,0.12) 100%),
    radial-gradient(ellipse at 20% 100%, rgba(62,106,225,0.22), transparent 60%);
  pointer-events: none;
}

.interlude-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding: clamp(40px, 7vw, 96px) clamp(40px, 8vw, 220px);
  color: var(--c-white);
}

.interlude-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-md);
}

.interlude-title {
  font-size: clamp(32px, 5.2vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.interlude-title .italic-thin {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Reveal: content fades up + image settles from a slow zoom.
   Parallax (hero.js) owns .interlude-media's transform, so the zoom
   lives on the inner <img> to avoid fighting over the same property. */
.interlude-content { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.interlude-media img { transform: scale(1.08); transition: transform 1.6s var(--ease); }
.service-interlude.is-visible .interlude-content { opacity: 1; transform: translateY(0); }
.service-interlude.is-visible .interlude-media img { transform: scale(1); }

@media (max-width: 560px) {
  .interlude-content { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .interlude-content { opacity: 1; transform: none; transition: none; }
  .interlude-media img { transform: none; transition: none; }
}

/* Generic page section padding wrapper */
.page-section {
  padding: clamp(80px, 12vw, 160px) clamp(40px, 8vw, 220px);
}
.page-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

/* Phones: trim the side padding (40px floor → 20px) to widen content. */
@media (max-width: 560px) {
  .page-section { padding-left: 20px; padding-right: 20px; }
}

/* Filter / pill row */
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.filter-pill {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-pale);
  color: var(--c-pewter);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration), color var(--duration), border-color var(--duration);
}
.filter-pill:hover { color: var(--c-carbon); border-color: var(--c-carbon); }
.filter-pill.is-active {
  background: var(--c-carbon);
  border-color: var(--c-carbon);
  color: var(--c-white);
}

/* Long-form prose blocks */
.prose {
  max-width: 680px;
  font-size: 16px;
  line-height: 2;
  color: var(--c-graphite);
}
.prose p + p { margin-top: 1.4em; }
.prose strong { color: var(--c-carbon); font-weight: 500; }

/* Two-column info row (about, address, etc.) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.two-col-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-cloud);
}
.two-col-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
}

/* Stat / fact rows (Company page) */
.fact-list {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}
.fact-row {
  display: contents;
}
.fact-row dt,
.fact-row dd {
  padding: 22px 0;
  border-top: 1px solid var(--c-cloud);
}
.fact-row:last-child dt,
.fact-row:last-child dd {
  border-bottom: 1px solid var(--c-cloud);
}
.fact-row dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
}
.fact-row dd {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-carbon);
}
@media (max-width: 640px) {
  .fact-list { grid-template-columns: 1fr; }
  .fact-row dt { padding-bottom: 4px; border-bottom: none; }
  .fact-row dd { padding-top: 4px; border-top: none; }
}

/* Blog article cards */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .article-grid { grid-template-columns: 1fr; } }

.article-card { display: block; }
.article-card-image {
  aspect-ratio: 16/10;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-cloud);
  margin-bottom: var(--space-md);
}
.article-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.article-card:hover .article-card-image img { transform: scale(1.05); }
.article-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
  margin-bottom: var(--space-xs);
}
.article-card-meta .cat { color: var(--c-blue); }
.article-card-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-carbon);
  transition: color var(--duration);
}
.article-card:hover .article-card-title { color: var(--c-blue); }

.article-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(60px, 8vw, 120px);
}
.article-feature .article-card-image { aspect-ratio: 16/10; margin: 0; }
.article-feature .article-card-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .article-feature { grid-template-columns: 1fr; }
}

/* Contact form */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 15px;
  color: var(--c-carbon);
  background: var(--c-white);
  border: 1px solid var(--c-pale);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  transition: border-color var(--duration), box-shadow var(--duration);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(62,106,225,0.12);
}

/* Contact Form 7 integration — CF7 wraps each control in a span, so
   force controls full-width inside the .field grid and style its
   validation tips / response output to match the theme. */
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.field input,
.field textarea,
.field select { width: 100%; }
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12px;
  color: #d83a3a;
}
.wpcf7 .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--c-pale);
  border-radius: var(--radius-btn);
  font-size: 14px;
  line-height: 1.7;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #d83a3a; color: #d83a3a; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--c-blue); color: var(--c-blue); }
.wpcf7-spinner { margin: 0 0 0 10px; }

.contact-info-block + .contact-info-block { margin-top: var(--space-xl); }
.contact-info-block h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
  margin-bottom: var(--space-xs);
}
.contact-info-block p { font-size: 15px; line-height: 1.8; color: var(--c-carbon); }

.map-frame {
  border: 0;
  width: 100%;
  height: 360px;
  border-radius: var(--radius-card);
  filter: grayscale(40%);
}

/* Process steps (Services page) */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: var(--space-2xl);
}
@media (max-width: 900px) { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process-list { grid-template-columns: 1fr; } }

.process-item {
  border-top: 1px solid var(--c-pale);
  padding-top: var(--space-md);
}
.process-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--c-blue);
  margin-bottom: var(--space-md);
}
.process-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--c-carbon);
  margin-bottom: var(--space-sm);
}
.process-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-graphite);
}

/* Refined line icon for cards & flow steps (capabilities,
   process, use cases). Single weight, brand-blue, sits above
   the card label. */
.card-icon {
  display: block;
  color: var(--c-blue);
  margin-bottom: var(--space-md);
}
.card-icon .rt-icon {
  display: block;
  width: 26px;
  height: 26px;
}
/* On the dark AI service block the same icon reads in white. */
.section-dark .card-icon { color: var(--c-white); }

/* Process steps: sit the icon inline with the step number ("◇ 01")
   instead of stacked above it, so there's no dead vertical gap. */
.process-item .card-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
.process-item .process-num {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
.process-item .process-title { margin-top: var(--space-md); }

/* =========================================================
   SERVICE DETAIL PAGES — Capabilities / Approach / FAQ /
   Use Cases / Tools / GENKAI feature block
   ========================================================= */

.capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: var(--space-2xl);
}
.capability {
  border-top: 1px solid var(--c-pale);
  padding-top: var(--space-md);
}
.capability h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-carbon);
  margin-bottom: 6px;
}
.capability p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-graphite);
}
@media (max-width: 720px) { .capabilities { grid-template-columns: 1fr; } }

.approach-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: var(--space-2xl);
}
.approach-item {
  padding: var(--space-xl);
  background: var(--c-white);
  border: 1px solid var(--c-cloud);
  border-radius: var(--radius-card);
}
.approach-num {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--c-blue);
  margin-bottom: var(--space-md);
}
.approach-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-carbon);
  margin-bottom: var(--space-sm);
  line-height: 1.45;
}
.approach-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-graphite);
}
@media (max-width: 720px) { .approach-list { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list {
  max-width: 880px;
  margin: var(--space-2xl) auto 0;
}
.faq-item {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--c-pale);
}
.faq-item:last-child { border-bottom: 1px solid var(--c-pale); }
.faq-q {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-carbon);
  margin-bottom: var(--space-sm);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.faq-q::before {
  content: "Q.";
  color: var(--c-blue);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.faq-a {
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-graphite);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.faq-a::before {
  content: "A.";
  color: var(--c-pewter);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* Use cases (AI page) */
.use-case-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: var(--space-2xl);
}
.use-case {
  padding: var(--space-lg);
  border: 1px solid var(--c-cloud);
  border-radius: var(--radius-card);
  background: var(--c-white);
}
.use-case-num {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--c-blue);
  margin-bottom: var(--space-sm);
}
.use-case-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-carbon);
  line-height: 1.6;
}
@media (max-width: 768px) { .use-case-list { grid-template-columns: 1fr; } }

/* Tool tags */
.tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-lg);
}
.tool-tag {
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-ash);
  color: var(--c-graphite);
}

/* GENKAI feature block (used on ai-workflow page).
   Light background so the GENKAI logo's navy gradient stays legible. */
.feature-block {
  background: var(--c-ash);
  color: var(--c-carbon);
  border-radius: var(--radius-card);
  padding: clamp(40px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.feature-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(62,106,225,0.10), transparent 55%),
    radial-gradient(ellipse at 18% 95%, rgba(110,90,210,0.08), transparent 55%);
  pointer-events: none;
}
.feature-block-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 820px) { .feature-block-inner { grid-template-columns: 1fr; } }

.feature-mark {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  background: linear-gradient(115deg,
    #3E6AE1 0%,
    #6B5CE0 12.5%,
    #B855E0 25%,
    #EC4899 37.5%,
    #FF8B5B 50%,
    #EC4899 62.5%,
    #B855E0 75%,
    #6B5CE0 87.5%,
    #3E6AE1 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: philoGradient 12s linear infinite;
}
.feature-tagline {
  font-size: 14px;
  color: var(--c-graphite);
  margin-top: var(--space-md);
  line-height: 1.8;
}
.feature-block .kicker { color: var(--c-pewter); }
.feature-block h3 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  color: var(--c-carbon);
  line-height: 1.45;
  margin-top: var(--space-md);
  letter-spacing: 0.01em;
}
.feature-block-inner > div > p { color: var(--c-graphite); }
.feature-points {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: var(--space-xl) 0 0;
}
.feature-points li {
  display: flex;
  gap: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-graphite);
}
.feature-points li::before {
  content: "→";
  color: var(--c-blue);
  flex-shrink: 0;
  font-weight: 500;
}
.feature-block-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}
.feature-meta {
  font-size: 12px;
  color: var(--c-pewter);
  margin-top: var(--space-md);
  letter-spacing: 0.08em;
}
/* Ghost button on the now-light feature-block */
.feature-block .btn-ghost {
  background: rgba(0,0,0,0.04);
  color: var(--c-carbon);
  border-color: rgba(0,0,0,0.18);
  backdrop-filter: none;
}
.feature-block .btn-ghost:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.32);
}

/* =========================================================
   PRICING PAGE
   ========================================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: var(--space-2xl);
}
@media (max-width: 960px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
.pricing-card {
  background: var(--c-white);
  border: 1px solid var(--c-cloud);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--duration), transform var(--duration);
}
.pricing-card:hover { border-color: var(--c-graphite); }
.pricing-card.is-featured {
  background: var(--c-carbon);
  border-color: var(--c-carbon);
  color: var(--c-white);
}
.pricing-card.is-featured:hover { border-color: var(--c-carbon); }
.pricing-card.is-featured::before {
  content: "RECOMMENDED";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-plan {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--c-blue);
  text-transform: uppercase;
}
.pricing-card.is-featured .pricing-plan { color: #8aa6ff; }
.pricing-name {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--c-carbon);
  margin-top: var(--space-md);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.pricing-card.is-featured .pricing-name { color: var(--c-white); }
.pricing-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-graphite);
  margin-top: var(--space-sm);
}
.pricing-card.is-featured .pricing-desc { color: rgba(255,255,255,0.65); }
.pricing-price {
  margin-top: var(--space-xl);
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--c-pale);
  padding-top: var(--space-lg);
}
.pricing-card.is-featured .pricing-price { border-top-color: rgba(255,255,255,0.15); }
.pricing-price-amount {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: var(--c-carbon);
  letter-spacing: -0.01em;
  line-height: 1;
}
.pricing-card.is-featured .pricing-price-amount { color: var(--c-white); }
.pricing-price-unit {
  font-size: 13px;
  color: var(--c-pewter);
}
.pricing-card.is-featured .pricing-price-unit { color: rgba(255,255,255,0.55); }
.pricing-includes {
  list-style: none;
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: 10px;
}
.pricing-includes li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-graphite);
}
.pricing-card.is-featured .pricing-includes li { color: rgba(255,255,255,0.78); }
.pricing-includes li::before {
  content: "✓";
  color: var(--c-blue);
  font-weight: 700;
  flex-shrink: 0;
}
.pricing-card.is-featured .pricing-includes li::before { color: #8aa6ff; }
.pricing-note {
  font-size: 12px;
  color: var(--c-pewter);
  margin-top: var(--space-lg);
  line-height: 1.85;
}

/* Grouped pricing tables — sub-heading + table for each category. */
.pricing-table-group {
  margin-top: var(--space-2xl);
}
.pricing-table-group + .pricing-table-group {
  margin-top: var(--space-3xl);
}
.pricing-table-group .pricing-table {
  margin-top: var(--space-md);
}
.pricing-table-heading {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--c-carbon);
  letter-spacing: 0.02em;
  margin: 0;
}
.pricing-table-heading::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-blue);
  flex-shrink: 0;
  align-self: center;
}

/* Pricing table — used on Web / Graphic sections.
   3 cols: 項目 (item) / 内容 (description) / 金額 (price). */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2xl);
  font-size: 15px;
}
.pricing-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--c-pale);
}
.pricing-table thead .col-price { text-align: right; padding-right: 0; }
.pricing-table tbody td {
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--c-cloud);
  vertical-align: top;
  line-height: 1.7;
}
.pricing-table tbody tr:last-child td { border-bottom: 1px solid var(--c-pale); }
.pricing-table tbody .col-item {
  font-weight: 500;
  color: var(--c-carbon);
  width: 26%;
  white-space: nowrap;
}
.pricing-table tbody .col-desc {
  color: var(--c-graphite);
  width: 52%;
}
.pricing-table tbody .col-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 500;
  color: var(--c-carbon);
  width: 22%;
  padding-right: 0;
}
@media (max-width: 720px) {
  .pricing-table thead { display: none; }
  /* Each row stacks: item name, description, then the price on its own
     full-width line — right-aligned so the amount sits to the right. */
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr { display: block; width: 100%; }
  .pricing-table tr {
    padding: 22px 0;
    border-bottom: 1px solid var(--c-cloud);
  }
  .pricing-table tbody tr:last-child { border-bottom: 1px solid var(--c-pale); }
  .pricing-table tbody td {
    display: block;
    border: none;
    padding: 0;
    width: auto;
    white-space: normal;
  }
  /* Desktop's higher-specificity last-row td border survives the reset
     above, underlining each stacked cell — clear it explicitly so only
     the row (tr) border closes the group. */
  .pricing-table tbody tr:last-child td { border-bottom: none; }
  /* Override the desktop percentage column widths (higher specificity
     than `td { width:auto }`), so every cell spans the full row. */
  .pricing-table tbody .col-item {
    width: 100%;
    white-space: normal;
    font-size: 16px;
  }
  .pricing-table tbody .col-desc {
    width: 100%;
    font-size: 10px;
    margin-top: 6px;
  }
  .pricing-table tbody .col-price {
    width: 100%;
    text-align: right;     /* amount sits on the right */
    margin-top: 10px;
    font-size: 15px;
    /* full-width line, so "¥ 125,000 〜" stays on one line (no mid-price break) */
  }
}

.pricing-flow {
  margin-top: var(--space-3xl);
}
.pricing-flow-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-carbon);
  margin-top: var(--space-md);
}

/* =========================================================
   WORK DETAIL (case study) PAGE
   ========================================================= */
.work-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-top: var(--space-md);
}

.work-cover-section,
.article-cover-section {
  background: var(--c-white);
  padding: 0;
}
.work-cover,
.article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-ash);
  overflow: hidden;
}
.work-cover img,
.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default crop centred; JS shifts object-position vertically on scroll
     for a parallax-style pan that reveals more of square featured images. */
  object-position: center 50%;
  display: block;
  will-change: object-position;
}

/* Blog post cover — contained & smaller than the full-bleed work cover,
   aligned to the article text column so the eyecatch reads as part of
   the post rather than a hero banner. */
.article-cover-section {
  padding: clamp(40px, 6vw, 72px) var(--gutter) 0;
}
.article-cover {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: var(--radius-card);
}

/* Work case-study cover — same contained treatment as the blog cover,
   but square, since work eyecatches are 1:1. Narrower max-width so the
   square doesn't tower over the page. */
.work-cover-section {
  padding: clamp(40px, 6vw, 72px) var(--gutter) 0;
}
.work-cover {
  max-width: 680px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
}

.work-info-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 820px) { .work-info-grid { grid-template-columns: 1fr; } }

.work-info {
  display: grid;
  gap: var(--space-md);
  /* Pin the meta column while the overview text scrolls past, until the
     grid row ends. Relies on .work-info-grid { align-items: start }. */
  position: sticky;
  top: 100px;
  align-self: start;
}
/* On single-column layout there is nothing to scroll against — keep it inline. */
@media (max-width: 820px) {
  .work-info { position: static; top: auto; }
}
.work-info > div {
  border-top: 1px solid var(--c-pale);
  padding-top: var(--space-md);
}
.work-info dt {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--c-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.work-info dd {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-carbon);
}

.work-prose h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--c-carbon);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-md);
}
.work-prose p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-graphite);
}
.work-prose p + p { margin-top: var(--space-md); }
.work-prose .lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--c-carbon);
}

.work-gallery-full {
  width: 100%;
  background: var(--c-ash);
  margin-top: var(--space-2xl);
}
.work-gallery-full img {
  width: 100%;
  height: auto;
  display: block;
}
.work-gallery-2col,
.work-gallery-3col {
  display: grid;
  gap: clamp(8px, 1vw, 16px);
  margin-top: var(--space-2xl);
}
.work-gallery-2col { grid-template-columns: repeat(2, 1fr); }
.work-gallery-3col { grid-template-columns: repeat(3, 1fr); }
.work-gallery-2col img,
.work-gallery-3col img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--c-ash);
}
@media (max-width: 720px) {
  .work-gallery-3col { grid-template-columns: repeat(2, 1fr); }
}

.work-gallery-caption {
  margin-top: var(--space-md);
  font-size: 12px;
  color: var(--c-pewter);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.work-quote {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.4;
  color: var(--c-carbon);
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0;
}
.work-quote-attr {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-pewter);
  text-transform: uppercase;
  margin-top: var(--space-lg);
}

.work-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: var(--space-2xl);
}
@media (max-width: 720px) { .work-metrics { grid-template-columns: 1fr; } }
.work-metric {
  border-top: 1px solid var(--c-pale);
  padding-top: var(--space-md);
}
.work-metric-num {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  color: var(--c-carbon);
  line-height: 1;
  letter-spacing: -0.02em;
}
.work-metric-label {
  font-size: 13px;
  color: var(--c-graphite);
  margin-top: var(--space-md);
  line-height: 1.7;
}

.work-credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--space-lg) var(--space-2xl);
  margin-top: var(--space-2xl);
}
.work-credits dt {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--c-pewter);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.work-credits dd {
  font-size: 14px;
  color: var(--c-carbon);
}

.work-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-pale);
  border-bottom: 1px solid var(--c-pale);
}
.work-nav-link {
  padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background var(--duration);
}
.work-nav-link:hover { background: var(--c-ash); }
.work-nav-link + .work-nav-link {
  border-left: 1px solid var(--c-pale);
  text-align: right;
  align-items: flex-end;
}
.work-nav-direction {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--c-pewter);
  text-transform: uppercase;
}
.work-nav-title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--c-carbon);
  line-height: 1.4;
}
.work-nav-link:hover .work-nav-title { color: var(--c-blue); }
@media (max-width: 720px) {
  .work-nav { grid-template-columns: 1fr; }
  .work-nav-link + .work-nav-link {
    border-left: none;
    border-top: 1px solid var(--c-pale);
    text-align: left;
    align-items: flex-start;
  }
}

/* =========================================================
   BLOG DETAIL (article) PAGE
   ========================================================= */

/* Article H1 — sits above the body, designed for Japanese titles.
   Uses Noto Sans JP via the global font stack, modest size and weight
   so multi-line Japanese titles read cleanly without dominating the
   page like the italic display hero would. */
.article-h1 {
  margin: 0 0 var(--space-2xl);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--c-carbon);
  word-break: auto-phrase;        /* better line breaks for Japanese */
  overflow-wrap: anywhere;
}
.article-h1::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--c-blue);
  margin-top: var(--space-md);
}
@media (max-width: 720px) {
  .article-h1 { font-size: 22px; line-height: 1.55; }
}

/* Shared reading column width for blog post body, h1, tags, author,
   and prev/next nav. Wider than the original 720px for a more
   confident, magazine-like reading experience. */
:root { --article-col: 880px; }

/* Hero meta-row (date / category / author) for blog single — same
   spacing and typographic treatment as .work-detail-meta on case
   studies, but colour adapted for the light hero background. */
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: var(--space-md);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-pewter);
}

/* In blog posts, .article-h1 sits inside .article-body-wrap and should
   align with the centered .article-body. In work case studies, the same
   element is full-width above the 2-col overview grid. */
.article-body-wrap > .article-h1 {
  max-width: var(--article-col);
  margin: 0 auto var(--space-2xl);
}

.article-body {
  max-width: var(--article-col);
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-graphite);
}
.article-body > p:first-child,
.article-body > .lead {
  font-size: 18px;
  line-height: 1.85;
  color: var(--c-carbon);
}
.article-body > * + * { margin-top: var(--space-md); }
.article-body h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--c-carbon);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}
.article-body h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--c-carbon);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}
.article-body p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-graphite);
}
.article-body strong { color: var(--c-carbon); font-weight: 600; }
.article-body em { font-style: italic; }
.article-body ul, .article-body ol {
  padding-left: 1.5em;
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-graphite);
}
.article-body li + li { margin-top: 6px; }
.article-body ul li::marker { color: var(--c-blue); }
.article-body ol li::marker { color: var(--c-blue); font-weight: 600; }
.article-body a {
  color: var(--c-carbon);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-pewter);
  transition: color var(--duration), text-decoration-color var(--duration);
}
.article-body a:hover {
  color: var(--c-blue);
  text-decoration-color: var(--c-blue);
}
.article-body blockquote {
  border-left: 3px solid var(--c-blue);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  margin: var(--space-2xl) 0;
}
.article-body blockquote p {
  font-size: 18px;
  font-style: italic;
  color: var(--c-carbon);
  line-height: 1.7;
}
.article-body figure { margin: var(--space-2xl) 0; }
.article-body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}
.article-body figcaption {
  font-size: 12px;
  color: var(--c-pewter);
  text-align: center;
  margin-top: var(--space-md);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.article-body code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--c-ash);
  color: var(--c-carbon);
  padding: 2px 6px;
  border-radius: 4px;
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--c-pale);
  margin: var(--space-3xl) 0;
}

.article-callout {
  background: var(--c-ash);
  border-left: 3px solid var(--c-blue);
  padding: var(--space-lg);
  margin: var(--space-2xl) 0;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.article-callout-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--c-blue);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}
.article-callout p {
  font-size: 14px;
  color: var(--c-carbon);
  line-height: 1.85;
  margin: 0;
}

/* Footer block — tags, author card, and prev/next nav.
   All share the article column width and a consistent vertical rhythm. */

.article-tags {
  max-width: var(--article-col);
  margin: var(--space-3xl) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--c-pale);
}
.article-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--c-ash);
  color: var(--c-graphite);
  transition: background var(--duration), color var(--duration);
}
.article-tag:hover {
  background: var(--c-carbon);
  color: var(--c-white);
}

.article-author {
  max-width: var(--article-col);
  margin: var(--space-3xl) auto 0;
  padding: clamp(28px, 3vw, 44px);
  background: var(--c-ash);
  border-radius: var(--radius-card);
  display: flex;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
}
.article-author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-carbon);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.01em;
}
.article-author-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pewter);
  margin-bottom: 6px;
}
.article-author-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-carbon);
  line-height: 1.4;
}
.article-author-bio {
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-graphite);
  margin-top: 6px;
}
@media (max-width: 560px) {
  .article-author { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .article-author-avatar { width: 56px; height: 56px; font-size: 24px; }
}

/* Prev / Next post navigation — mirrors .work-nav structure but with
   article column width and slightly tighter padding. */
.article-nav {
  max-width: var(--article-col);
  margin: var(--space-3xl) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-pale);
  border-bottom: 1px solid var(--c-pale);
}
.article-nav-link {
  padding: clamp(22px, 2.6vw, 36px) clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background var(--duration);
}
.article-nav-link:hover { background: var(--c-ash); }
.article-nav-link + .article-nav-link {
  border-left: 1px solid var(--c-pale);
  text-align: right;
  align-items: flex-end;
}
.article-nav-direction {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-pewter);
}
.article-nav-title {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-carbon);
  font-weight: 500;
}
.article-nav-link:hover .article-nav-title { color: var(--c-blue); }
@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-link + .article-nav-link {
    border-left: none;
    border-top: 1px solid var(--c-pale);
    text-align: left;
    align-items: flex-start;
  }
}

/* Related-articles block at the foot of a post:
   add breathing room above the grid and a hairline separator
   so it's clearly its own section, not glued to the prev/next bar. */
.article-related {
  margin-top: var(--space-3xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--c-pale);
}
.article-related .kicker { color: var(--c-pewter); }
.article-related .article-grid { margin-top: var(--space-xl); }

/* Reveal-on-load — simpler trigger than the IntersectionObserver one
   for elements that are visible above-the-fold on a sub-page. */
.reveal-onload .phi-line-inner,
.reveal-onload.fade-up { /* defaults handled by .is-revealed */ }

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}
.fade-up.delay-1 { transition-delay: 0.15s; }
.fade-up.delay-2 { transition-delay: 0.30s; }
.fade-up.delay-3 { transition-delay: 0.45s; }
.fade-up.delay-4 { transition-delay: 0.60s; }
.is-revealed .fade-up,
.fade-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* GENKAI partner logo — placed directly on the light feature-block. */
.feature-mark-logo {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-top: var(--space-md);
}

/* =========================================================
   COMPANY — Members & Message
   ========================================================= */
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  margin-top: var(--space-xl);
}
.member-card {
  display: flex;
  flex-direction: column;
}
.member-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-cloud);
  margin-bottom: var(--space-lg);
}
.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.member-card:hover .member-image img {
  transform: scale(1.04);
}
.member-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pewter);
}
.member-name {
  margin-top: 8px;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.01em;
  color: var(--c-carbon);
  line-height: 1;
}
.member-comment {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-graphite);
}
@media (max-width: 880px) {
  .member-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .member-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Member card is now a button that opens the modal — reset native styles. */
.member-card {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.member-card:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 6px;
  border-radius: 4px;
}
.member-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-pewter);
  transition: color var(--duration), gap var(--duration);
}
.member-card:hover .member-more {
  color: var(--c-blue);
  gap: 10px;
}

/* ── Member modal ─────────────────────────────── */
body.modal-open { overflow: hidden; }

.member-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.member-modal[hidden] { display: none; }

.member-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 26, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: memberFade 0.25s ease;
}
.member-modal-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  width: min(880px, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: clamp(28px, 4vw, 56px);
  background: var(--c-white);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 90px -30px rgba(23, 26, 32, 0.5);
  animation: memberRise 0.32s var(--ease);
}
.member-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--c-pewter);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}
.member-modal-close:hover {
  background: var(--c-ash);
  color: var(--c-carbon);
}
.member-modal-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-cloud);
}
.member-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.member-modal-body .member-role { margin-bottom: 8px; }
.member-modal-body .member-name { margin-top: 0; }
.member-modal-bio {
  margin-top: var(--space-lg);
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-graphite);
  white-space: pre-line;
}
.member-modal-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-xl);
}
.member-social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-pale);
  border-radius: 999px;
  color: var(--c-carbon);
  transition: background var(--duration), color var(--duration), border-color var(--duration);
}
.member-social:hover {
  background: var(--c-carbon);
  border-color: var(--c-carbon);
  color: var(--c-white);
}
.member-social svg { width: 20px; height: 20px; display: block; }

@keyframes memberFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes memberRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  .member-modal-dialog {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: left;
  }
  .member-modal-media { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .member-modal-backdrop,
  .member-modal-dialog { animation: none; }
}

/* Representative message signature */
.prose .signature {
  margin-top: 2.4em;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-carbon);
}

/* =========================================================
   PAGINATION — generated by the_posts_pagination()
   Used on /work/, /work/page/2/, /work-category/{slug}/,
   /blog/, /category/{slug}/, etc.
   ========================================================= */
.navigation.pagination {
  margin-top: var(--space-3xl);
  display: flex;
  justify-content: center;
}
.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
  color: var(--c-carbon);
  background: var(--c-white);
  border: 1px solid var(--c-pale);
  border-radius: var(--radius-btn);
  transition:
    color var(--duration),
    background var(--duration),
    border-color var(--duration);
}
.navigation.pagination a.page-numbers:hover {
  color: var(--c-blue);
  border-color: var(--c-carbon);
}
.navigation.pagination .page-numbers.current {
  color: var(--c-white);
  background: var(--c-carbon);
  border-color: var(--c-carbon);
}
.navigation.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--c-pewter);
  letter-spacing: 0.1em;
}
/* Prev / Next get slightly more horizontal room and clearer affordance */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  padding: 0 22px;
  letter-spacing: 0.08em;
}
.navigation.pagination .page-numbers.prev:hover,
.navigation.pagination .page-numbers.next:hover {
  background: var(--c-carbon);
  color: var(--c-white);
  border-color: var(--c-carbon);
}

@media (max-width: 540px) {
  .navigation.pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
  }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next {
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────────────────────────────────────────────
   THE SIMPLE 5 — sub-service promo (Web Design)
   A modest "another option" band; not the main pitch.
   ───────────────────────────────────────────── */
.spl5-card {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  background: var(--c-ash);
  border: 1px solid var(--c-cloud);
  border-radius: var(--radius-card);
}

.spl5-card-media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.spl5-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.spl5-tagline {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--c-pewter);
}

.spl5-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.spl5-lead {
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.9;
  color: var(--c-graphite);
}

.spl5-price {
  display: flex;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.spl5-price-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spl5-price-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-silver);
}

.spl5-price-value {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-carbon);
  line-height: 1;
}

.spl5-price-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-pewter);
  margin-left: 2px;
}

.spl5-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  width: 100%;
}

.spl5-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-graphite);
}

.spl5-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-blue);
}

@media (max-width: 768px) {
  .spl5-card {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .spl5-price {
    gap: var(--space-xl);
  }
}