/* ============================================
   LISO株式会社 — Linear-inspired (LISO cyan accent)
   ============================================ */

:root {
  /* Surfaces — deeper concrete floor so white cards float */
  --bg-marketing: #e6eaee;   /* deeper concrete floor */
  --bg-panel: #fafbfc;       /* clean slab */
  --bg-elevated: #ffffff;    /* pure highlight plate */
  --bg-secondary: #d4d9de;   /* shadowed concrete */

  /* Text — charcoal */
  --text-primary: #1a1c1f;
  --text-secondary: #2e3236;
  --text-tertiary: #4a4e54;
  --text-quaternary: #6a6e74;

  /* Accent — charcoal monochrome */
  --accent: #1a1c1f;
  --accent-bright: #000000;
  --accent-hover: #2e3236;
  --accent-deep: #4a4e54;
  --accent-glow: rgba(0, 0, 0, 0.18);

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-standard: rgba(0, 0, 0, 0.14);
  --border-solid: #7a7e83;

  /* Surfaces (translucent over concrete) */
  --surface-1: rgba(255, 255, 255, 0.18);
  --surface-2: rgba(255, 255, 255, 0.28);
  --surface-3: rgba(255, 255, 255, 0.42);

  /* Shadows */
  --shadow-elev: rgba(0, 0, 0, 0.18) 0 2px 6px;
  --shadow-focus: 0 0 0 3px rgba(0, 0, 0, 0.18);

  /* Layout */
  --container: 1200px;
  --header-h: 68px;

  /* Type */
  --font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
    system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-marketing);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "ss03";
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 510;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: #1a1c1f;
  color: #f7f8f8;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 22px -8px rgba(0,0,0,0.35);
}
.btn-primary:hover { background: #000000; }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--border-standard);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.14);
}

.btn-lg {
  padding: 12px 22px;
  font-size: 15px;
  border-radius: 8px;
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(244, 246, 248, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--border-subtle);
  background: rgba(244, 246, 248, 0.88);
}

.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo-img {
  display: block;
  height: 36px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.nav-list {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.nav-list a {
  font-size: 13px;
  font-weight: 510;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  transition: color .15s ease;
}
.nav-list a:hover { color: var(--text-primary); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tel-block {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}
.tel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-standard);
  color: var(--text-primary);
}
.tel-meta { display: flex; flex-direction: column; line-height: 1.1; }
.tel-num {
  font-size: 16px;
  font-weight: 590;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.tel-hours {
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 510;
  letter-spacing: -0.005em;
  margin-top: 2px;
}

.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  background: var(--surface-1);
  border: 1px solid var(--border-standard);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
/* Enlarge the tap target to >=44px without changing the visible icon (WCAG 2.5.5) */
.hamburger::before {
  content: "";
  position: absolute;
  inset: -4px;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 17px; }
.hamburger span:nth-child(3) { top: 22px; }
.hamburger.is-open span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: var(--header-h);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.7;
}
.glow-a {
  width: 540px;
  height: 540px;
  left: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%);
}
.glow-b {
  width: 700px;
  height: 700px;
  right: -180px;
  top: 30%;
  background: radial-gradient(circle, rgba(0,0,0,0.18), transparent 70%);
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* ============================================
   Hero Stage — Cult Holdings-inspired data layout
   Sequence: intro image fades in/out → data UI fades in
   ============================================ */

/* Phase 1 — intro image (hero-bg.png with logo + catchcopy) */
.hero-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(85%, 680px);
  height: auto;
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  animation: heroIntro 2.8s ease forwards;
}
@keyframes heroIntro {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  18%  { opacity: 1; transform: translate(-50%, -50%); }
  62%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 22px)) scale(0.96); }
}

.hero-stage {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(32px, 5vw, 80px);
  opacity: 0;
  animation: heroStageIn 0.9s cubic-bezier(.2, .8, .2, 1) 2.8s forwards;
}
@keyframes heroStageIn {
  to { opacity: 1; }
}

/* Logo centerpiece */
.hero-logo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 20vw, 260px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
  z-index: 2;
}

/* Side info blocks */
.hero-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Cap the width so long "/"-separated values (INDUSTRY, DOMAIN) wrap to a
     second line instead of stretching toward the centre logo and overlapping
     it. Removed on mobile, where the blocks stack full-width. */
  max-width: min(340px, 32vw);
}
.hero-info-left  { left: clamp(32px, 5vw, 80px); }
.hero-info-right { right: clamp(32px, 5vw, 80px); }

.data-heading {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.data-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.data-row {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  column-gap: 20px;
  align-items: baseline;
}
.data-list-right .data-row {
  grid-template-columns: minmax(130px, auto) 1fr;
}
.data-label,
.data-value {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.14em;
  line-height: 1.7;
  font-feature-settings: "tnum";
}
.data-label { color: var(--text-tertiary); }
.data-value { color: var(--text-primary); }

/* Status indicator */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d33b3b;
  box-shadow: 0 0 0 3px rgba(211, 59, 59, 0.18);
  animation: statusBlink 1.6s ease-in-out infinite;
  /* Nudge up 1px: optically the dot centres low against uppercase caps,
     whose visual mass sits above the line box centre. */
  transform: translateY(-1px);
}
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Bottom tagline */
.hero-tagline {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 590;
  letter-spacing: 0.32em;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

/* Mobile — stack info above/below logo */
@media (max-width: 760px) {
  .hero-intro { width: 88%; }
  .hero-stage {
    padding: 0 20px;
  }
  .hero-logo-mark {
    /* Slightly smaller, and raised from the stage's 50% to sit visually
       centered in the gap between the top/bottom info blocks (which are
       anchored near the top / at bottom:28%, so 50% reads as too low). */
    width: clamp(120px, 30vw, 160px);
    top: 44%;
  }
  .hero-info {
    position: absolute;
    top: auto;
    transform: none;
    left: 20px !important;
    right: 20px !important;
    gap: 14px;
    max-width: none;
  }
  .hero-info-left  { top: calc(var(--header-h) + 40px); }
  .hero-info-right { bottom: 28%; }
  .data-row {
    grid-template-columns: minmax(110px, auto) 1fr;
    column-gap: 14px;
  }
  .data-label, .data-value { font-size: 10px; letter-spacing: 0.1em; }
  .hero-tagline {
    font-size: 10px;
    letter-spacing: 0.24em;
    bottom: 8%;
    white-space: normal;
    width: 88%;
  }
}

/* ============================================
   Concept Section
   ============================================ */
.concept {
  position: relative;
  padding: clamp(120px, 18vh, 200px) 24px;
}

.concept-inner {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 32px;
  font-feature-settings: "cv01", "ss03";
}
.eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--text-tertiary);
}

.concept-title {
  margin: 0;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 510;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}

/* Accessibility: visually hide but keep available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-reveal utility */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .85s ease,
    transform .95s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger cascade for groups (e.g. services grid) */
.services-grid .reveal:nth-child(1) { transition-delay: 0s; }
.services-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.services-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

/* ============================================
   Concept Card — Glassmorphism + Sidebar Tabs
   ============================================ */
.concept-card {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 560px;
  margin: 0 auto;
  max-width: 1400px;
  text-align: left;

  /* White card surface — floats above the concrete floor */
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 44px 100px -28px rgba(0, 0, 0, 0.28),
    0 18px 40px -14px rgba(0, 0, 0, 0.18),
    0 6px 14px -3px rgba(0, 0, 0, 0.08);
}

/* Animated mesh gradient — three drifting blobs */
@property --gx1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --gy1 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --gx2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --gy2 { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --gx3 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --gy3 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }

.concept-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 45% at var(--gx1) var(--gy1), rgba(0,0,0,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 42% 35% at var(--gx2) var(--gy2), rgba(0,0,0,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 30% 32% at var(--gx3) var(--gy3), rgba(0,0,0,0.08) 0%, transparent 60%);
  animation: meshFlow 22s ease-in-out infinite;
}

@keyframes meshFlow {
  0%, 100% {
    --gx1: 20%; --gy1: 30%;
    --gx2: 80%; --gy2: 70%;
    --gx3: 55%; --gy3: 20%;
  }
  33% {
    --gx1: 70%; --gy1: 60%;
    --gx2: 25%; --gy2: 35%;
    --gx3: 35%; --gy3: 80%;
  }
  66% {
    --gx1: 40%; --gy1: 85%;
    --gx2: 65%; --gy2: 25%;
    --gx3: 80%; --gy3: 50%;
  }
}

/* Make sidebar + body sit above the gradient */
.concept-sidebar,
.concept-body {
  position: relative;
  z-index: 3;
}

/* highlight sheen on top edge */
.concept-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(0,0,0,0.08), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ----- Sidebar ----- */
.concept-sidebar {
  position: relative;
  padding: 28px 16px 28px 24px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  display: flex;
  flex-direction: column;
}

/* Sidebar footer — meta block */
.sidebar-foot {
  margin-top: auto;
  padding: 18px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sidebar-foot-label {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.28em;
  color: var(--text-quaternary);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.meta-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.meta-row dt,
.meta-row dd {
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.16em;
  line-height: 1.5;
  font-feature-settings: "tnum";
}
.meta-row dt { color: var(--text-quaternary); }
.meta-row dd { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f8f3a;
  box-shadow: 0 0 0 2px rgba(47, 143, 58, 0.18);
  animation: metaBlink 2s ease-in-out infinite;
}
@keyframes metaBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 8px 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sidebar-label {
  font-size: 14px;
  font-weight: 590;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.sidebar-sub {
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.02em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}

.concept-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.concept-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-secondary);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.concept-tab:hover {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.concept-tab.is-active {
  background: #ffffff;
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 10px -3px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.tab-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -0.02em;
  color: var(--text-tertiary);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-feature-settings: "cv01", "ss03";
}
.concept-tab.is-active .tab-letter {
  color: var(--text-primary);
  background: #1a1c1f;
  color: #f7f8f8;
  border-color: transparent;
}
.tab-name {
  font-size: 14px;
  font-weight: 510;
  letter-spacing: -0.005em;
}

/* ----- Body / Panels ----- */
.concept-body {
  position: relative;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.concept-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
  animation: panel-in .35s ease both;
}
.concept-panel[hidden] { display: none; }

.panel-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
  padding-left: 56px;
}
.panel-tag {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  align-self: stretch;
  max-width: 320px;
}
.panel-image {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 16px -6px rgba(0, 0, 0, 0.10);
}
.panel-image::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 8px;
}
.panel-image::before {
  content: "IMAGE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.36em;
  color: rgba(0, 0, 0, 0.32);
  z-index: 1;
}
/* When a real image is set (inline style or .has-image class), hide placeholder */
.panel-image[style*="url"]::before,
.panel-image[style*="url"]::after,
.panel-image.has-image::before,
.panel-image.has-image::after { display: none; }
.panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.panel-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-secondary);
  font-weight: 400;
  max-width: 38ch;
  letter-spacing: 0.005em;
}

.concept-statement {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-width: 640px;
  font-size: 14px;
  line-height: 2;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* ============================================
   Services Section
   ============================================ */
.services {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px;
}
.services-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 56px;
  margin-top: 72px;
}

.service-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.service-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.fig-label {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  font-feature-settings: "tnum";
  line-height: 1;
  flex-shrink: 0;
}

.service-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-bottom: 28px;
  color: var(--text-secondary);
  transition: color .3s ease, transform .4s ease;
}
.service-illust svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}
.service-card:hover .service-illust {
  color: var(--text-primary);
  transform: translateY(-2px);
}

.service-title {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 510;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  line-height: 1.2;
}

.service-sub {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 510;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--text-primary);
}

.service-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Text card with pulsing corner lights */
.service-text-card {
  position: relative;
  margin-top: 28px;
  padding: 26px 26px 24px;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px -12px rgba(0, 0, 0, 0.14),
    0 4px 10px -4px rgba(0, 0, 0, 0.06);
}
.service-text-card .service-sub {
  margin: 0 0 14px;
}
.service-text-card .service-desc {
  margin: 0;
}

.service-text-light {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3aa55c;
  animation: service-light-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes service-light-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(58, 165, 92, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 16px 3px rgba(58, 165, 92, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-text-light { animation: none; opacity: 0.7; }
  /* Show scroll-reveal content immediately with no slide/fade */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Isometric face fills (shared) */
.face-top   { fill: rgba(255, 255, 255, 0.42); }
.face-left  { fill: rgba(0, 0, 0, 0.05); }
.face-right { fill: rgba(0, 0, 0, 0.14); }

/* DX cylinder body fill — fades out on hover so disks visually separate */
.dx-body {
  fill: rgba(0, 0, 0, 0.07);
  stroke: none;
  transition: opacity .3s ease;
}
.service-card-dx:hover .dx-body { opacity: 0; }

/* DX card — slice animation on hover */
.dx-layer {
  transition: transform .5s cubic-bezier(.2, .85, .2, 1);
}
.dx-sides {
  transition: opacity .3s ease;
}
.dx-back {
  opacity: 0;
  stroke-dasharray: 3 3;
  transition: opacity .4s ease .1s;
}
.service-card-dx:hover .dx-l1 { transform: translateY(-18px); }
.service-card-dx:hover .dx-l2 { transform: translateY(-6px); }
.service-card-dx:hover .dx-l3 { transform: translateY(6px); }
.service-card-dx:hover .dx-l4 { transform: translateY(18px); }
.service-card-dx:hover .dx-sides { opacity: 0; }
.service-card-dx:hover .dx-back { opacity: 0.55; }

/* EC Launch card — dashed → solid in sequence on hover */
.step-solid {
  opacity: 0;
  transition: opacity .35s ease;
}
.service-card-ec:hover .step-solid { opacity: 1; }
.service-card-ec:hover .ec-s5 .step-solid { transition-delay: 0s; }
.service-card-ec:hover .ec-s4 .step-solid { transition-delay: 0.1s; }
.service-card-ec:hover .ec-s3 .step-solid { transition-delay: 0.2s; }
.service-card-ec:hover .ec-s2 .step-solid { transition-delay: 0.3s; }
.service-card-ec:hover .ec-s1 .step-solid { transition-delay: 0.4s; }
.service-card-ec:hover .ec-arrow .step-solid { transition-delay: 0.55s; }

/* Outsourcing card — radiating lines draw in on hover */
.bo-curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  transition: stroke-dashoffset .55s ease;
}
.service-card-bo:hover .bo-curve { stroke-dashoffset: 0; }
.service-card-bo:hover .bo-curve:nth-child(1) { transition-delay: 0s; }
.service-card-bo:hover .bo-curve:nth-child(2) { transition-delay: 0.04s; }
.service-card-bo:hover .bo-curve:nth-child(3) { transition-delay: 0.08s; }
.service-card-bo:hover .bo-curve:nth-child(4) { transition-delay: 0.12s; }
.service-card-bo:hover .bo-curve:nth-child(5) { transition-delay: 0.16s; }
.service-card-bo:hover .bo-curve:nth-child(6) { transition-delay: 0.20s; }

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .service-illust { height: 200px; }
}

/* ============================================
   Process Section — Gantt-style flow card
   ============================================ */
.process {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px;
}
.process-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Row wrapper — relative anchor for the absolute hint */
.process-row {
  position: relative;
  margin-top: 56px;
}

.process-card {
  position: relative;
  padding: 28px 36px;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 44px 100px -28px rgba(0, 0, 0, 0.28),
    0 18px 40px -14px rgba(0, 0, 0, 0.18),
    0 6px 14px -3px rgba(0, 0, 0, 0.08);
  width: 100%;
}
.process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(0,0,0,0.06), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 1;
}
/* Background image with subtle black overlay for text legibility */
.process-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
    url('../img/process-bg.webp');
  background-size: 100% 100%, 100% auto;
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.process-card > * {
  position: relative;
  z-index: 2;
}

/* Process card layout — sidebar + body */
.process-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  padding: 0;
  overflow: hidden;
  transition:
    grid-template-columns .65s cubic-bezier(0.4, 0, 0.2, 1),
    width .65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state — card narrows to just the sidebar */
.process-card.is-collapsed {
  grid-template-columns: 300px 0fr;
  width: 300px;
}
.process-card.is-collapsed .process-body {
  pointer-events: none;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.process-body {
  min-width: 0;
}
/* Collapse children to 0 height so the grid row shrinks to sidebar height.
   NOTE: do NOT zero out margin here — .process-timeline has margin-top: auto,
   and auto↔0 cannot be interpolated, which produces a jump on expand. */
.process-card.is-collapsed .process-body > * {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
/* While the card is sliding open, keep text fully hidden — it only fades in
   once .is-opening is removed (700ms later) so the type animation no longer
   competes with the card-expand transition. */
.process-card.is-opening .process-body > * {
  opacity: 0;
}
.process-body > * {
  max-height: 1000px;
  overflow: hidden;
  transition:
    opacity .55s cubic-bezier(0.4, 0, 0.2, 1),
    max-height .65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Click to expand" hint — absolute beside the collapsed card */
.process-hint {
  position: absolute;
  top: 50%;
  left: calc(300px + 28px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-quaternary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease, transform .55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hint-arrow {
  display: inline-block;
  font-size: 16px;
  color: var(--text-tertiary);
  animation: hint-nudge 1.6s ease-in-out infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
/* Hint vanishes the moment the card starts opening */
.process-row:has(.process-card:not(.is-collapsed)) .process-hint {
  opacity: 0;
  transform: translateY(-50%) translateX(30px);
}

/* Sidebar */
.process-sidebar {
  position: relative;
  padding: 28px 16px 28px 24px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  /* Keep the card the same height whether collapsed or expanded */
  min-height: 480px;
}

.process-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.process-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-secondary);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.process-tab:hover {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.process-tab.is-active {
  background: #ffffff;
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 10px -3px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.tab-num {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
  font-feature-settings: "tnum";
  flex-shrink: 0;
  width: 22px;
}
.process-tab.is-active .tab-num { color: var(--text-primary); }

.tab-label {
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* Body — panels + timeline */
.process-body {
  display: flex;
  flex-direction: column;
  padding: 40px 48px 32px;
  gap: 28px;
  min-height: 380px;
  transition:
    min-height .65s cubic-bezier(0.4, 0, 0.2, 1),
    padding .65s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-panel {
  flex: 1;
  max-width: 620px;
}
.process-panel[hidden] { display: none; }

/* Timeline footer */
.process-timeline {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.timeline-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.timeline-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  width: var(--width);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.timeline-bar:hover {
  background: rgba(255, 255, 255, 0.7);
}
.timeline-bar.is-active {
  background: linear-gradient(90deg, #ffffff, #d8dce0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 14px rgba(255, 255, 255, 0.45);
  transform: scaleY(1.4);
}
.timeline-bar-ongoing {
  background: linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.45) 60%, rgba(255,255,255,0) 100%);
  border-radius: 999px 0 0 999px;
}
.timeline-bar-ongoing.is-active {
  background: linear-gradient(90deg, #ffffff 0%, #d8dce0 60%, rgba(216,220,224,0) 100%);
}
.timeline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.process-timeline {
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 860px) {
  /* Cancel the collapse gimmick on mobile — body must always be visible */
  .process-card,
  .process-card.is-collapsed {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .process-card.is-collapsed .process-body { pointer-events: auto; }
  /* Phase 01 is shown expanded by default on mobile — the base collapsed rule
     zeroes max-height, so restore it here (opacity alone leaves it height-0). */
  .process-card.is-collapsed .process-body > * { opacity: 1; max-height: 1000px; }
  .process-hint { display: none; }
  /* Tall narrow card on mobile: 100% auto leaves the lower half imageless (grey).
     Cover fills the whole card height instead. */
  .process-card::after {
    background-size: 100% 100%, cover;
    background-position: center, center;
  }
  .process-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 18px;
    min-height: 0;
  }
  .process-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .process-tab { padding: 8px 10px; }
  .tab-label { display: none; }
  .process-tab.is-active .tab-label { display: inline; }
  .process-body { padding: 28px 22px; }
}


@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.panel-overline {
  display: inline-block;
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 590;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
  line-height: 1;
  font-feature-settings: "cv01", "ss03";
  background: linear-gradient(180deg, #1a1c1f 0%, #4a4e54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel-headline {
  margin: 0 0 18px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 510;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--text-secondary);
}
.panel-body {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Reserve room for the longest phase (3 lines) so card height stays steady */
  min-height: calc(1.85em * 3);
}

/* Process card has a dark image background — its panel text must be white. */
.process-panel .panel-overline {
  background: linear-gradient(180deg, #ffffff 0%, #c8ccd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}
.process-panel .panel-headline {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ----- Concept responsive ----- */
@media (max-width: 760px) {
  .concept-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .concept-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 18px;
  }
  .concept-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* SP: put the L·I·S·O tab selector directly above the panel. The FRAMEWORK
     META block otherwise sits between the tabs and the content, pushing the
     panel down so switching tabs hides the text. Reorder the sidebar's flex
     children (DOM order stays head → tabs → foot for a11y). */
  .sidebar-head { order: 1; }
  .sidebar-foot { order: 2; margin-top: 0; }
  .concept-tabs { order: 3; }
  .concept-tab { padding: 8px 10px; }
  .tab-name { display: none; }
  .concept-tab.is-active .tab-name { display: inline; }
  .concept-body { padding: 32px 24px; }
  .concept-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .panel-side {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-left: 0;
    padding-top: 28px;
  }
}

/* P2-1: keep the concept panel single-column up to tablet width so the
   description column doesn't collapse to a few characters per line.
   Previously it only stacked at <=760px, leaving 761-960px cramped. */
@media (max-width: 960px) {
  .concept-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .panel-side {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-left: 0;
    padding-top: 28px;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 9999px;
  background: var(--surface-1);
  border: 1px solid var(--border-standard);
  font-size: 12px;
  font-weight: 510;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1c1f;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

.hero-title {
  margin: 28px auto 24px;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 510;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  max-width: 14ch;
}
.hero-title-accent {
  background: linear-gradient(180deg, #1a1c1f 0%, #2e3236 60%, #4a4e54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--text-tertiary);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 80px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--surface-1);
  border: 1px solid var(--border-standard);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.hero-meta li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.meta-num {
  font-size: 32px;
  font-weight: 510;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-feature-settings: "tnum", "cv01", "ss03";
  line-height: 1;
}
.meta-num small {
  font-size: 16px;
  color: var(--text-tertiary);
  margin-left: 2px;
  font-weight: 400;
}
.meta-label {
  font-size: 12px;
  font-weight: 510;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

/* ============================================
   F&Q — Document/log-style accordion card
   ============================================ */
.faq {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px;
}
.faq-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-card {
  position: relative;
  margin-top: 56px;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 44px 100px -28px rgba(0, 0, 0, 0.28),
    0 18px 40px -14px rgba(0, 0, 0, 0.18),
    0 6px 14px -3px rgba(0, 0, 0, 0.08);
}
.faq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(0,0,0,0.06), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Meta strip */
.faq-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.faq-meta-left,
.faq-meta-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.faq-meta-filename {
  color: var(--text-primary);
  font-weight: 510;
}
.faq-meta-sep { color: var(--text-quaternary); }
.faq-meta-count { font-feature-settings: "tnum"; }
.faq-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.faq-meta-key {
  color: var(--text-quaternary);
  font-size: 11px;
}
.faq-meta-val {
  color: var(--text-secondary);
  font-feature-settings: "tnum";
}
.faq-meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e3236;
  box-shadow: 0 0 0 3px rgba(46, 50, 54, 0.12);
  animation: faq-pulse 2.4s ease-in-out infinite;
}
@keyframes faq-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 50, 54, 0.12); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 50, 54, 0.04); }
}

/* Filter chips */
.faq-filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 510;
  letter-spacing: -0.005em;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.faq-chip:hover {
  background: #e9ebef;
  color: var(--text-primary);
}
.faq-chip.is-active {
  background: #1a1c1f;
  color: #f7f8f8;
  border-color: #1a1c1f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 16px -6px rgba(0, 0, 0, 0.35);
}
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  font-feature-settings: "tnum";
}
.faq-chip.is-active .chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: #f7f8f8;
}

/* Accordion list */
.faq-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-item {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  transition: background-color .22s ease;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item.is-hidden { display: none; }

.faq-item::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: transparent;
  transition: background-color .22s ease;
}
.faq-item.is-open::before {
  background: linear-gradient(180deg, #2e3236, #4a4e54);
}
.faq-item.is-open {
  background: #f6f7f9;
}

.faq-q {
  display: grid;
  grid-template-columns: 36px 110px 1fr 28px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  transition: padding .22s ease;
}
.faq-q:hover { background: #f9fafb; }

.faq-num {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--text-quaternary);
  font-feature-settings: "tnum";
}
.faq-item.is-open .faq-num { color: var(--text-primary); }

.faq-cat {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  justify-self: start;
}

.faq-question {
  font-size: 15px;
  font-weight: 510;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--text-primary);
}

.faq-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  justify-self: end;
}
.faq-toggle span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--text-secondary);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.faq-toggle span:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-toggle span:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Answer panel — max-height transition controlled by JS */
.faq-a {
  max-height: 0;
  overflow: hidden;
  /* a11y: keep collapsed answers out of the accessibility tree.
     visibility flips to hidden only after the collapse finishes. */
  visibility: hidden;
  transition: max-height .35s ease, visibility 0s linear .35s;
}
.faq-item.is-open .faq-a {
  visibility: visible;
  transition: max-height .35s ease, visibility 0s linear 0s;
}
.faq-a p {
  margin: 0;
  /* Align the answer to the question column: left edge under the question
     text, right edge level with it (clearing the toggle column). Fills the
     width instead of leaving a wide right-hand void and over-wrapping. */
  padding: 4px calc(28px + 16px + 28px) 24px calc(36px + 16px + 110px + 16px + 28px);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-tertiary);
}

/* Footer */
.faq-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #eef0f3 0%, #f5f6f8 100%);
}
.faq-foot-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .header-inner { gap: 20px; }
  .nav-list { gap: 20px; }
  .tel-block .tel-meta { display: none; }
}

@media (max-width: 860px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .nav { display: none; }
  .nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 24px;
  }
  .nav.is-open .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nav.is-open .nav-list a {
    display: block;
    padding: 12px 0;
    width: 100%;
  }
  .header-cta .btn-primary { display: none; }
  .tel-block { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 860px) {
  .faq-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
  }
  .faq-filters { padding: 14px 18px; }
  .faq-q {
    grid-template-columns: 32px 1fr 24px;
    gap: 12px;
    padding: 16px 18px;
  }
  .faq-cat { display: none; }
  .faq-a p {
    padding: 0 18px 20px calc(32px + 12px + 18px);
    font-size: 13.5px;
  }
  .faq-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px;
  }
  .faq-foot .btn { width: 100%; }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 64px;
  }
  .hero-title { letter-spacing: -0.018em; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-meta {
    grid-template-columns: 1fr;
    padding: 20px 24px;
    gap: 18px;
  }
  .hero-meta li { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .meta-num { font-size: 26px; }
}

/* ─────────────────────────────────────────────
   COMPANY — Stacked accordion
   ───────────────────────────────────────────── */
.company {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px;
}
.company-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Intro */
.company-intro {
  margin: 56px 0 80px;
  max-width: 720px;
}
.company-overline {
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.36em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.company-headline {
  margin: 0 0 28px;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}
.company-tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-secondary);
}

/* Stack */
.company-stack {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.company-stack-item {
  position: relative;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  /* Modest overlap keeps the heads visually connected as a stacked deck.
     Body show/hide is handled by the grid-rows collapse below — NOT by
     covering the body with the next card (which leaked whenever a card was
     taller than the one after it). */
  margin-bottom: -24px;
  box-shadow:
    0 -8px 24px -8px rgba(0, 0, 0, 0.08),
    0 22px 48px -20px rgba(0, 0, 0, 0.18),
    0 8px 18px -8px rgba(0, 0, 0, 0.10);
}
.company-stack-item:last-child {
  margin-bottom: 0;
}
/* Stagger z-index so later cards always visually cover earlier ones —
   this order is preserved even when a card is open. */
.company-stack-item:nth-child(1) { z-index: 1; }
.company-stack-item:nth-child(2) { z-index: 2; }
.company-stack-item:nth-child(3) { z-index: 3; }
.company-stack-item:nth-child(4) { z-index: 4; }
.company-stack-item:nth-child(5) { z-index: 5; }

/* Head (button) */
.company-stack-head {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 30px 40px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.company-stack-head:focus-visible {
  outline: 2px solid rgba(26, 28, 31, 0.5);
  outline-offset: -2px;
  border-radius: 22px;
}
.company-stack-num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: clamp(72px, 10vw, 128px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: rgba(26, 28, 31, 0.12);
  transition: color 0.55s ease;
}
.company-stack-item.is-open .company-stack-num {
  color: rgba(26, 28, 31, 0.85);
}
.company-stack-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.company-stack-label {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 17px;
  font-weight: 510;
  letter-spacing: 0.18em;
  color: var(--text-primary);
}
.company-stack-sub {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
}
.company-stack-toggle {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
}
.company-stack-toggle span {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--text-primary);
  transform: translateY(-50%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.company-stack-toggle span:last-child {
  transform: translateY(-50%) rotate(90deg);
}
.company-stack-item.is-open .company-stack-toggle span:last-child {
  transform: translateY(-50%) rotate(0deg);
}

/* Body collapses/expands via the grid-rows 0fr↔1fr trick (pure CSS, no JS
   height measurement) — so a collapsed body has zero height and can never
   spill out below the next card. */
.company-stack-body {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.company-stack-item.is-open .company-stack-body {
  grid-template-rows: 1fr;
}
/* Padding-free grid item: the collapsed row must resolve to 0. Any padding
   here (padding can't collapse) would keep it at ~80px and leak a sliver. So
   the clip wrapper stays bare and the padding lives on .company-stack-inner. */
.company-stack-clip {
  overflow: hidden;
  min-height: 0;
}
.company-stack-inner {
  padding: 8px 40px 96px;
}

/* PROFILE — data rows */
.company-data {
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.company-data .company-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.company-data .company-row:last-child { border-bottom: none; }
.company-data dt {
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.28em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.company-data dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-primary);
}

/* LOCATIONS grid */
.company-locations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 8px;
}
.company-loc {
  padding: 24px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}
.company-loc-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.28em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.company-loc-zip {
  margin: 0 0 4px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-quaternary);
  letter-spacing: 0.04em;
}
.company-loc-addr {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-primary);
}

/* BUSINESS list */
.company-biz {
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.company-biz li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 12px;
  align-items: baseline;
  padding: 22px 24px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}
.company-biz-num {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0.2em;
  color: var(--text-quaternary);
}
.company-biz-title {
  font-size: 15px;
  font-weight: 510;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.company-biz-desc {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* MISSION — editorial rows (group-common principles) */
.company-mission-quote {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}
.company-mission {
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  /* Two columns on wide desktop so the group principles fill the card width.
     Collapses to one column at ≤980px (media query below) before the columns
     get too narrow to read comfortably. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  /* Equalize every row to the tallest so the hairline dividers land on a
     uniform rhythm even when one item's text wraps and its neighbour's
     does not. Reset to auto in the single-column layout below. */
  grid-auto-rows: 1fr;
}
.company-mission li {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: start;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* When two-up, the bottom row is the final two items. */
.company-mission li:nth-last-child(-n + 2) { border-bottom: none; }

@media (max-width: 980px) {
  .company-mission { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .company-mission li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .company-mission li:last-child { border-bottom: none; }
}
.company-mission-num {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(26, 28, 31, 0.16);
}
.company-mission-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 560;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--text-primary);
}
.company-mission-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* CONTACT */
.company-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 28px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  margin-top: 8px;
}
.company-contact-tel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.company-contact-tag {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.28em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.company-tel {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
  font-feature-settings: "tnum";
  line-height: 1.2;
}
.company-tel:hover { text-decoration: underline; }
.company-hours {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
}
.company-contact-cta { white-space: nowrap; }

/* Responsive */
@media (max-width: 860px) {
  .company-intro { margin: 40px 0 56px; }
  .company-stack-head {
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    padding: 24px;
  }
  .company-stack-num { font-size: clamp(56px, 16vw, 88px); }
  .company-stack-label { font-size: 15px; letter-spacing: 0.14em; }
  .company-stack-inner { padding: 8px 24px 72px; }
  .company-data .company-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .company-locations { grid-template-columns: 1fr; }
  .company-biz { grid-template-columns: 1fr; }
  .company-mission li { grid-template-columns: 48px 1fr; gap: 16px; }
  .company-mission-num { font-size: 26px; }
  .company-contact {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }
  .company-contact-cta { width: 100%; }
  .company-tel { font-size: 28px; }
}

/* ─────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────── */
.contact {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 24px;
}
.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-intro {
  margin: 56px 0 64px;
  max-width: 720px;
}
.contact-overline {
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.36em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.contact-headline {
  margin: 0 0 28px;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}
.contact-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-secondary);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

/* ─── Form ─── */
.contact-form {
  position: relative;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  padding: 48px 48px 40px;
  box-shadow:
    0 44px 100px -28px rgba(0, 0, 0, 0.22),
    0 18px 40px -14px rgba(0, 0, 0, 0.14),
    0 6px 14px -3px rgba(0, 0, 0, 0.06);
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-group {
  margin-bottom: 24px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 0;
}
.form-row .form-group {
  margin-bottom: 24px;
}
.form-label {
  display: block;
  margin-bottom: 10px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.22em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.form-required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--text-primary);
  border-radius: 3px;
  vertical-align: 1px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(26, 28, 31, 0.08);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-quaternary);
}
.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231a1c1f' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  padding-right: 44px;
  cursor: pointer;
}
.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
}

/* Consent block */
.form-consent {
  margin: 8px 0 28px;
  padding: 24px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.form-consent-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.form-consent-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0.16em;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.form-consent-btn:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
  transform: translateY(-1px);
}
.form-consent-btn-arrow {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-consent-btn:hover .form-consent-btn-arrow {
  transform: translateX(4px);
}
.form-consent-btn[hidden] { display: none; }
.form-consent[data-agreed="true"] {
  background: linear-gradient(180deg, #eef5ef 0%, #e2eee4 100%);
  border-color: rgba(50, 110, 70, 0.20);
}
.form-consent-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: #2d6a40;
  font-weight: 500;
}
.form-consent-status[hidden] { display: none; }
.form-consent-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #2d6a40;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

/* Submit */
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.form-submit:not(:disabled):hover {
  background: #000;
  transform: translateY(-1px);
}
.form-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.form-submit[aria-busy="true"] {
  opacity: 0.7;
}
.form-submit-arrow {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-submit:not(:disabled):hover .form-submit-arrow {
  transform: translateX(4px);
}

.form-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-tertiary);
}
.form-note a { color: var(--text-secondary); text-decoration: underline; }
.form-note-alert {
  padding: 14px 18px;
  background: rgba(190, 40, 40, 0.06);
  border-left: 3px solid rgba(190, 40, 40, 0.6);
  color: #8a2a2a;
  border-radius: 4px;
}

/* ─── Aside ─── */
.contact-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-aside-block {
  padding: 24px;
  background: linear-gradient(170deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  box-shadow:
    0 18px 36px -16px rgba(0, 0, 0, 0.14),
    0 4px 10px -3px rgba(0, 0, 0, 0.06);
}
.contact-aside-label {
  margin: 0 0 12px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.28em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.contact-aside-phone {
  display: block;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
  font-feature-settings: "tnum";
}
.contact-aside-phone:hover { text-decoration: underline; }
.contact-aside-hours {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}
.contact-aside-address {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-aside {
    position: static;
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .contact-form {
    padding: 32px 24px 28px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────
   POLICY MODAL
   ───────────────────────────────────────────── */
.policy-modal[hidden] { display: none; }
.policy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.policy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 24, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.policy-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 50px 120px -20px rgba(0, 0, 0, 0.50),
    0 20px 50px -10px rgba(0, 0, 0, 0.30);
  animation: policy-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes policy-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.policy-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 16px;
}
.policy-modal-eyebrow {
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.policy-modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.policy-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.policy-modal-close:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}
.policy-modal-lead {
  margin: 0 32px 16px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-tertiary);
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border-radius: 8px;
}
.policy-modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;
  scrollbar-gutter: stable;
}
.policy-modal-scroll:focus { outline: none; }
.policy-modal-content {
  padding: 8px 0 32px;
}
.policy-modal-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}
.policy-section {
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.policy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.policy-section-overline {
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.policy-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 510;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.policy-section h4 {
  margin: 24px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.policy-section h5 {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.policy-section p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}
.policy-section ul {
  margin: 8px 0 16px;
  padding-left: 1.4em;
}
.policy-section ul li {
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.policy-section-meta {
  font-family: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-tertiary);
}
.policy-section-meta p { margin: 0 0 4px; font-size: 12px; }

.policy-modal-sentinel { height: 1px; }
.policy-modal-footer {
  padding: 20px 32px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
}
.policy-modal-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.policy-modal-hint--done {
  color: #2d6a40;
  font-weight: 500;
}
.policy-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.policy-modal-cancel {
  padding: 12px 20px;
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.policy-modal-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
}
.policy-modal-agree {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.policy-modal-agree:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.policy-modal-agree:not(:disabled):hover {
  background: #000;
  transform: translateY(-1px);
}
.policy-modal-agree-arrow {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.policy-modal-agree:not(:disabled):hover .policy-modal-agree-arrow {
  transform: translateX(4px);
}

body.is-policy-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .policy-modal { padding: 12px; }
  .policy-modal-dialog { max-height: 95vh; }
  .policy-modal-header { padding: 20px 20px 12px; }
  .policy-modal-title { font-size: 20px; }
  .policy-modal-lead { margin: 0 20px 12px; }
  .policy-modal-scroll { padding: 0 20px; }
  .policy-modal-footer { padding: 16px 20px; }
  .policy-modal-actions { flex-direction: column-reverse; }
  .policy-modal-cancel,
  .policy-modal-agree { width: 100%; justify-content: center; }
}

/* ─── Contact submit-error modal（送信失敗 → 電話代替導線） ─── */
.contact-error-modal[hidden] { display: none; }
.contact-error-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.contact-error-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 24, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-error-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 36px 32px 28px;
  background: #ffffff;
  border-radius: 22px;
  text-align: center;
  box-shadow:
    0 50px 120px -20px rgba(0, 0, 0, 0.50),
    0 20px 50px -10px rgba(0, 0, 0, 0.30);
  animation: policy-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-error-icon {
  color: #8a2a2a;
  margin-bottom: 14px;
}
.contact-error-title {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.contact-error-desc {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-tertiary);
}
.contact-error-phone {
  margin: 0 0 24px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
  border-radius: 10px;
}
.contact-error-phone-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.contact-error-phone-tel {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.contact-error-phone-tel:hover { text-decoration: underline; }
.contact-error-phone-hours {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-quaternary);
}
.contact-error-close {
  width: 100%;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-standard);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-error-close:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

@media (max-width: 640px) {
  .contact-error-modal { padding: 16px; }
  .contact-error-dialog { padding: 28px 22px 22px; }
}

/* SP: tighten the vertical rhythm between sections. The desktop clamp()
   paddings (14–18vh ≈ 114–146px) read as far too airy on a phone. Placed at
   end-of-file so it wins over the per-section base padding rules above. */
@media (max-width: 760px) {
  .concept,
  .services,
  .process,
  .faq,
  .company,
  .contact {
    padding-top: clamp(40px, 6vh, 56px);
    padding-bottom: clamp(40px, 6vh, 56px);
  }
}