/* AZRION HQ — company site
   Migrated from azrion.runable.site. Palette follows the original site:
   white / pale blue-gray / pale blue base, deep navy + vivid blue accents. */

:root {
  --ink: #10161d;
  --body: #33404d;
  --muted: #647687;
  --line: #ccddef;
  --bg: #ffffff;
  --pale: #e9f2fa;
  --pale-2: #d8e9f8;
  --navy: #0a2a5e;
  --navy-dark: #061c40;
  --blue: #1762e2;
  --blue-vivid: #2062e6;
  /* Shared small-label / hairline tones for the whole page below the
     town, so every section draws from the same set as the town UI
     (vivid accent #2062e6, one slate, one steel, one faint, one
     stronger hairline) instead of per-section one-off grays. */
  --slate: #3c4c5c;
  --steel: #5b7a99;
  --faint: #7d93a8;
  --line-strong: #c3d3e2;
  --pale-blue: #9ec7f5;
  --sky: #7db8f7;
  --max: 1120px;

  /* ---- One type system ------------------------------------------------
     Every text size on the site — welcome, town UI, header/menu, all
     sections down to the 404 — is one of these steps, in the one font
     stack. Sizes the earlier rounds fitted to the owner's screenshots
     of the original (welcome lockup, town card, mobile menu) sit on
     the same steps; the only fluid values are the display clamps. */
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  /* Type scale re-measured from the owner's screenshots of the
     original (2026-10-27, pixel-measured at 1125px = 375 CSS px):
     body prose 13, small text tier ~10-12, section h2 ~29 at phone
     width, EN display ~25-26, card titles ~22, contact headline
     ~40, year digits ~58. One step smaller across the board; the
     mobile menu items keep their direct-measured 29. */
  --fs-11: 10px;   /* micro labels: az-label, menu label */
  --fs-12: 11px;   /* small caps labels: section-index, badges, chips */
  --fs-13: 12px;   /* small labels/counts: card place, footer slogan */
  --fs-14: 12px;   /* small text: nav, profile dt, footer links */
  --fs-15: 13px;   /* small body: card copy, buttons */
  --fs-16: 13px;   /* body base */
  --fs-17: 14px;   /* large body: message copy, panel leads */
  --fs-18: 13px;   /* careers items */
  --fs-20: 18px;
  --fs-21: 20px;   /* card titles, trust band */
  --fs-22: 19px;
  --fs-24: 20px;
  --fs-27: 25px;   /* h3, town card name */
  --fs-29: 29px;   /* mobile menu items (measured) */
  --fs-30: 22px;   /* town card count (measured) */
  --fs-h2: clamp(26px, 7.7vw, 34px);
  --fs-welcome-h: clamp(19px, 6.3vw, 26px);
  --fs-contact-h: clamp(32px, 10.6vw, 52px);
  --fs-figure: clamp(19px, 5.3vw, 30px);
  --fs-year: clamp(38px, 15.5vw, 108px);
  --fs-year-arrow: clamp(18px, 5vw, 30px);
  --fw-light: 300; /* NEXT 100 years (measured from the original) */
  --fw-text: 400;
  --fw-menu: 500;  /* mobile menu items (measured) */
  --fw-bold: 700;
  --fw-num: 800;   /* the town card's big count (measured) */
  --lh-body: 1.9;
  --lh-card: 1.75; /* compact card copy: town card, fields items */
  --lh-h2: 1.5;
  --lh-h3: 1.45;
  --lh-display: 1.4; /* contact/fallback titles, menu items */
  --lh-tight: 1.3;   /* town card name */
  --ls-display: 0.02em;
  --ls-num: 0.04em;
  --ls-text: 0.06em;
  --ls-ui: 0.08em;
  --ls-chip: 0.1em;
  --ls-badge: 0.14em;
  --ls-note: 0.18em;
  --ls-media: 0.22em;
  --ls-label: 0.28em;
  --ls-slogan: 0.34em;
  --ls-slogan-hero: 0.38em;

  /* ---- One spacing system ---------------------------------------------
     Section rhythm, block gaps, card padding and grid gaps all come
     from these steps (component internals snapped to the nearest step,
     max 2px from the values earlier rounds fitted). The mobile menu
     keeps its measured 28px side margin. */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 24px;
  --sp-6: 28px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 72px;
  --section-y: 96px;     /* section padding, desktop */
  --section-y-sp: 72px;  /* section padding, mobile */
  --gutter: 24px;        /* page side margin, desktop */
  --gutter-sp: 20px;     /* page side margin, mobile */
  --gutter-menu: 28px;   /* mobile menu side margin (measured) */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Buttons do not inherit the font by default; the one stack applies
   to every control too (individual rules only set size/weight). */
button {
  font: inherit;
}

img {
  display: block;
}

a {
  color: var(--navy);
}

h1, h2, h3 {
  color: var(--ink);
}

/* ------------------------------- Header ------------------------------- */
/* The original keeps the header off the welcome screen and out of
   the town tour entirely: it is fixed and slides in only once the
   tour is finished (or, with no tour, after about a screen — the
   inline script toggles body.header-on). On mobile it is a single
   row — wordmark left, hamburger right — like the reference. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-104%);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

body.header-on .site-header {
  transform: none;
  opacity: 1;
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand img {
  height: 34px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: var(--sp-7);
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav a {
  text-decoration: none;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-text);
  color: var(--body);
}

.site-nav a:hover {
  color: var(--blue);
}

.header-contact {
  flex: 0 0 auto;
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--navy);
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
}

.header-contact:hover {
  background: var(--pale);
}

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 10px 9px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

section {
  scroll-margin-top: 66px;
}

/* The town is the exception: the welcome's 「街をめぐる」 button anchors
   to #town, and the tour must start with the sticky stage filling the
   viewport exactly (progress p = 0, frosted card fully visible). The
   generic 76px header offset would leave a sliver of the welcome on
   screen and clip the bottom of the stage. */
#town {
  scroll-margin-top: 0;
}

/* Mobile overlay menu: never rendered on desktop (its open styles live
   in the max-width: 720px block). While it is open, the page behind it
   is scroll-locked. */
.mobile-menu {
  display: none;
}

body.menu-open {
  overflow: hidden;
}

/* Entrance gate: while the welcome page is up (html.gate-on, set
   pre-paint by the head script when there is no deep-link hash), the
   page behind it is scroll-locked until one of the welcome buttons is
   pressed — the welcome is the gate, like the original. The class is
   removed on exit, so the town's sticky stage is unaffected. */
html.gate-on,
html.gate-on body {
  overflow: hidden;
}

html.gate-on {
  overscroll-behavior: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open {
    animation: none;
  }

  .mobile-menu.is-open .mm-label,
  .mobile-menu.is-open .mm-item {
    animation: none;
  }
}

/* -------------------------------- Hero -------------------------------- */

/* The welcome is a standalone entrance PAGE, not a section of the
   top page: a fixed full-screen layer above everything, rendered
   only while the gate is engaged (html.gate-on, set pre-paint by the
   head script). It takes no space in the top page's flow, and once
   the visitor enters, the gate class is gone for the rest of the
   page view — the welcome can never reappear by scrolling back up. */
.hero {
  position: fixed;
  inset: 0;
  z-index: 200;
  min-height: 100svh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* A touch more air above than below settles the group at the
     optical centre instead of riding high (owner, 2026-10-27). */
  padding: 6.5svh var(--gutter) 5.5svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #e6f2fd 0%, #d4ebfc 52%, #c0e1fa 100%);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* A quiet flow behind the welcome: two soft washes breathing
   across the gradient on a long cycle — felt, not watched. */
.hero::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 40% at 30% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(ellipse 50% 38% at 72% 62%, rgba(140, 195, 250, 0.35) 0%, rgba(140, 195, 250, 0) 70%);
  animation: hero-drift 26s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: translate3d(-1.6%, -1%, 0) scale(1); }
  to { transform: translate3d(1.6%, 1.4%, 0) scale(1.05); }
}

/* Entrance: logo → slogan → headline → lead → buttons rise in a
   quiet stagger — the site's long refined easing, no bounce. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

html.gate-on .hero-wordmark { animation: hero-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
html.gate-on .hero-slogan { animation: hero-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
html.gate-on .hero h1 { animation: hero-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both; }
html.gate-on .hero-lead { animation: hero-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both; }
html.gate-on .hero-actions { animation: hero-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }

html.gate-on .hero {
  display: flex;
}

/* Leaving the welcome page: it lifts and fades away, then the
   gate class removal (in the inline script) hides it for good. */
.hero.is-leaving {
  opacity: 0;
  transform: translateY(-16px);
}

/* The welcome lockup: one logo only — the full wordmark
   (horse + AZRION), then the slogan in blue — small and refined,
   with generous air around it. */
.hero-wordmark {
  width: min(178px, 46vw);
  height: auto;
}

.hero-slogan {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-slogan-hero);
  color: var(--blue-vivid);
  margin: 2.8svh 0 0;
  font-weight: var(--fw-bold);
}

.hero h1 {
  font-size: var(--fs-welcome-h);
  white-space: nowrap;
  line-height: var(--lh-h3);
  margin: 5.8svh 0 0;
  font-weight: var(--fw-bold);
  color: #2b4257;
}

.hero-lead {
  margin: 3.2svh 0 0;
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: #5b7186;
}

/* The welcome's ghost button keeps the town controls' frosted-glass
   material: low-opacity fill over a strong blur, a bright glass edge
   and a thin shadow — no solid paint weight (owner instruction,
   2026-10-27). The primary left the glass behind: it is a FABRIC
   button now (owner, 2026-10-27, after the "Fabric Button" reel) —
   a royal-blue cloth pill whose face is an inline SVG with a fuzzy,
   raised-pile grain (no weave, no gloss, no stitch: the material as
   it is) that swells outward where it is pressed — the soft filling
   escaping sideways, never denting — and settles back with the
   weight of cloth (see /js/fabric-button.js). The label
   sits on the cloth like a silkscreen print: flat ink, no relief.
   The SVG face overflows the
   button's own frame by a few px so the cloth has room to bulge;
   the heartbeat ring stays on the frame itself (::after below) and
   never touches the cloth. */
.hero .btn-primary {
  position: relative;
  width: 198px;
  padding: var(--sp-3) 0;
  font-size: 15px;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow:
    0 12px 28px rgba(9, 30, 76, 0.30),
    0 2px 7px rgba(9, 30, 76, 0.20);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.35s ease;
}

.hero .btn-primary:hover {
  background: transparent;
}

.hero .btn-primary.is-pressed {
  box-shadow:
    0 5px 14px rgba(9, 30, 76, 0.34),
    0 1px 4px rgba(9, 30, 76, 0.24);
}

.fabric-face {
  position: absolute;
  left: -18px;
  top: -16px;
  overflow: visible;
  pointer-events: none;
  transition: filter 0.3s ease;
}

.hero .btn-primary:hover .fabric-face {
  filter: brightness(1.09);
}

/* The label is printed on the cloth, silkscreen-style: one flat
   ink colour, a touch of the pile showing through, no shadow and
   no embossing. */
.btn-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: rgba(240, 244, 251, 0.94);
  text-shadow: none;
  will-change: transform;
}

/* Heartbeat on the primary's OUTER FRAME only: a ring around the
   button swells and brightens twice — lub-dub — then rests. The
   fill and the button itself never move or scale (owner,
   2026-10-27). The start is delayed until the entrance stagger
   has settled. */
.hero .btn-primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid rgba(32, 98, 230, 0.6);
  box-shadow: 0 0 16px rgba(32, 98, 230, 0.28);
  opacity: 0;
  pointer-events: none;
  animation: hero-heartbeat 2.8s ease-out 1.9s infinite;
}

@keyframes hero-heartbeat {
  0% { transform: scale(1, 1); opacity: 0; }
  6% { opacity: 0.65; }
  20% { transform: scale(1.07, 1.2); opacity: 0; }
  30% { transform: scale(1, 1); opacity: 0; }
  36% { opacity: 0.5; }
  48% { transform: scale(1.055, 1.16); opacity: 0; }
  100% { transform: scale(1, 1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.gate-on .hero-wordmark,
  html.gate-on .hero-slogan,
  html.gate-on .hero h1,
  html.gate-on .hero-lead,
  html.gate-on .hero-actions,
  .hero::before,
  .hero .btn-primary::after {
    animation: none;
  }

  .hero .btn-primary::after {
    opacity: 0;
  }
}

.hero .btn-ghost {
  width: 226px;
  padding: var(--sp-3) 0;
  font-size: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 14px rgba(10, 42, 94, 0.08);
  color: #33475c;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 6.2svh;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  padding: var(--sp-3) var(--sp-7);
  border-radius: 999px;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy);
}

.btn-ghost {
  background: var(--pale);
  color: var(--navy);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  background: var(--pale-2);
}

.btn-light {
  background: #fff;
  color: var(--navy);
}

.btn-light:hover {
  background: var(--pale);
}

/* ------------------------------ Utilities ------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------- 3D Town ------------------------------- */

/* TOWN 2 — the original-design town, promoted from the /town2.html
   preview to the production top page on the owner's approval
   (2026-10-27, 「いいね、実装で」). Markup lives in index.html
   (#town > .t2-track), behaviour in /js/town2.js — the same module
   the preview page loads, so the two can never drift apart. The
   preview page's own chrome (the "TOWN 2 · PREVIEW" tag, the
   "← AZRION トップへ" link) is not part of the town and is not
   carried over. Rules below mirror town2.html's <style>, minus its
   page-level resets. */

/* Town 2 design tokens, scoped to the town and its fallback so the
   rest of the page keeps the site palette defined at :root. */
#town,
#town-fallback {
  --ink: #10161d;
  --body: #33404d;
  --muted: #647687;
  --blue: #2062e6;
  --line: rgba(16, 22, 29, .08);
  --glass: rgba(255, 255, 255, .55);
  --glass-card: rgba(255, 255, 255, .68);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
  font-family: var(--font);
  color: var(--ink);
}

/* The town wears the scene's sky colour: while the tour scrolls,
   any sliver the sticky stage does not cover for a frame (iOS
   viewport resize lag, rubber-band overscroll) must read as sky,
   never as a flash of the white page behind. */
#town {
  border-top: 1px solid #ccddef;
  background: #d2e9fb;
}

/* ---------- scroll track & stage ---------- */
.t2-track { position: relative; height: 820svh; background: #d2e9fb; }
.t2-stage {
  position: sticky; top: 0; height: 100svh; height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg, #cfe7fb 0%, #e8f3fd 55%, #eef6fd 100%);
}
/* Once town2.js is live it pins the stage itself (owner report,
   2026-10-31: after a full tour the sticky stage was left floating
   inside the track, scene cut off, blank sky below the card): the
   stage becomes absolutely positioned in the track and js writes
   its translateY every frame from the track's own rect, so its
   coverage of the viewport no longer depends on the browser's
   sticky bookkeeping. Sticky above remains the pre-JS default. */
.t2-stage.t2-pinned { position: absolute; left: 0; right: 0; }
/* Tour-jank pass 7 (2026-11-02): while the scroll is inside the
   track, town2.js adds .t2-fixed and the stage rides the viewport
   with no per-frame translate write at all (see pinStage in
   town2.js); the absolute pin above still owns the track's two
   ends — before the first stop and past the last. */
.t2-stage.t2-fixed { position: fixed; top: 0; left: 0; right: 0; }
.t2-canvas { position: absolute; inset: 0; }
.t2-canvas canvas { display: block; width: 100%; height: 100%; }

/* ---------- frosted glass primitives ---------- */
#town .glass {
  background: var(--glass);
  /* Perf pass (2026-10-31): these frosted pieces float over a WebGL
     canvas that repaints every frame, so iOS re-runs the backdrop
     blur every frame too — a classic tour-jank source on the
     owner's iPhone 12 mini. The radius drops 16px → 12px (the
     frosted read over the busy town scene is unchanged to the eye);
     saturation, tint and borders are untouched. */
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 28px rgba(23, 60, 110, .12);
}

/* ---------- top controls ---------- */
.t2-topbar {
  position: absolute; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  pointer-events: none; z-index: 5;
  transition: opacity .55s var(--ease, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear 0s;
}
/* One skip on screen at a time (owner report, 2026-10-29: the skip
   looked doubled). The welcome gate carries its own skip
   (「スキップしてトップへ」) and the town HUD carries the tour's
   （スキップ ↓) — but the town is already live behind the welcome,
   so while the gate is engaged — including its exit fade, which
   uncovers the stage — the HUD must not show through: two skip
   controls were readable at once mid-fade. The HUD controls stay
   hidden for the whole gate (html.gate-on lasts until the fade
   completes) and then rise in quietly once the gate lifts. */
html.gate-on .t2-topbar {
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.t2-topbar > * { pointer-events: auto; }
.t2-dashes {
  display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px;
}
.t2-dash {
  position: relative; width: 16px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(16, 40, 70, .18); flex: none; padding: 0;
  border: 0; cursor: pointer;
}
.t2-dash i { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); display: block; }
.t2-dash.now { width: 26px; }
.t2-ctrls { display: flex; gap: 8px; align-items: center; flex: none; }
.t2-pill {
  height: 30px; border-radius: 999px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  font-family: inherit; background: none; border: 0; cursor: pointer;
  /* The label never folds: スキップ stays on one line inside the
     pill (owner screenshot, 2026-10-29 20:22 — it had wrapped to
     スキ／ップ when the topbar ran out of room). The pill and its
     control group do not shrink; the dash strip yields instead
     (see the max-width: 759px rule below). */
  white-space: nowrap; flex: none;
}
.t2-pill .arr { font-size: 12px; line-height: 1; color: var(--blue); }
.t2-iconbtn {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: inherit; cursor: pointer;
}
.t2-iconbtn svg { width: 11px; height: 11px; fill: #24344a; display: block; }
.t2-iconbtn .ic-play { display: none; }
.t2-iconbtn.paused .ic-pause { display: none; }
.t2-iconbtn.paused .ic-play { display: block; }

/* Phone widths: nine stop dashes + skip pill + pause button overrun
   a 375px topbar by a few px (dashes ≈220 + gap 10 + controls ≈143
   vs 351 available). The dashes compact slightly so the whole bar
   fits with room to spare (≈336 at 375px) and nothing has to fold. */
@media (max-width: 759px) {
  .t2-dashes { gap: 4px; padding: 0 10px; }
  .t2-dash { width: 14px; }
  .t2-dash.now { width: 22px; }
}

/* ---------- hint pill ---------- */
.t2-hint {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 14px; border-radius: 999px; z-index: 4;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--ink); white-space: nowrap;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  margin: 0;
}
.t2-hint.hide { opacity: 0; transform: translate(-50%, -46%); pointer-events: none; }
.t2-mouse {
  position: relative; width: 18px; height: 28px; border: 1.6px solid var(--blue); border-radius: 10px; flex: none; overflow: hidden;
}
.t2-mouse .gauge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: rgba(32, 98, 230, .28);
  transform-origin: bottom; transform: scaleY(0);
}
.t2-mouse .wheel {
  position: absolute; left: 50%; top: 4px; width: 3.5px; height: 6px; margin-left: -1.75px; border-radius: 2px; background: var(--blue);
}
.t2-mouse .wheel.cue { animation: t2cue 1.7s var(--ease) infinite; }
@keyframes t2cue { 0% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- info card ---------- */
.t2-cardwrap {
  position: absolute; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; justify-content: center; pointer-events: none;
}
.t2-card {
  pointer-events: auto; width: 100%; max-width: 520px; border-radius: 20px;
  background: var(--glass-card);
  /* Perf pass (2026-10-31): the card is the largest frosted surface
     over the live canvas — its backdrop blur drops 20px → 14px and
     the card tint rises slightly (--glass-card .62 → .68) to hold
     text contrast with the lighter blur. Same frosted look, far
     less per-frame compositor work on iOS. */
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 12px 32px rgba(23, 60, 110, .14);
  padding: 15px 18px 17px;
}
/* Coarse pointers (perf round 2, owner device report 2026-10-31):
   backdrop-filter over the LIVE canvas is removed on touch
   devices entirely. Even at 12–14px, iOS re-blurs the frosted
   regions against a canvas that repaints every frame — a per-frame
   GPU tax exactly where the A14 is already short, and the morning
   pass's reduction was not enough on the real device. The tint
   rises toward opacity so the card/glass read stays the same
   calm frosted white, just without the blur. Desktop pointers
   keep the real frosted glass above. */
/* Tour-jank pass 5: the selector below was written as `#town.glass`
   — the #town section itself carrying the class — which matches
   NOTHING (the glass pieces are DESCENDANTS: the dashes strip, the
   skip pill, the pause button, the hint pill). The card half of
   this rule worked; the top chrome half silently never applied,
   so on the owner's iPhone those pieces kept re-blurring
   (blur 12px + saturate 1.6) against the live canvas every frame
   — the exact per-frame tax this block exists to remove. Fixed
   to the descendant selector the base rule uses. */
@media (pointer: coarse) {
  #town .glass, .t2-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #town .glass { background: rgba(255, 255, 255, .88); }
  .t2-card { background: rgba(255, 255, 255, .93); }
}

/* While a stage transition or a card swap is in flight the card
   is inert (town2.js toggles .t2-hold on the wrap): the outgoing
   card stays fully readable but no tap can land on its link
   mid-move (tour-jank pass, 2026-11-01). */
.t2-cardwrap.t2-hold .t2-card { pointer-events: none; }
.t2-card .swap { transition: opacity .24s var(--ease), transform .24s var(--ease); }
.t2-card.swapping .swap { opacity: 0; transform: translateY(7px); transition-duration: .15s, .15s; }
.t2-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.t2-place { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); margin: 0; }
.t2-count { font-size: 18px; font-weight: 700; color: var(--blue); letter-spacing: .02em; line-height: 1; margin: 0; }
.t2-count small { font-size: 11px; color: var(--muted); font-weight: 600; }
.t2-bar { height: 2.5px; border-radius: 2px; background: rgba(16, 40, 70, .12); margin: 10px 0 11px; overflow: hidden; }
.t2-bar i { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.t2-meta { display: flex; align-items: center; gap: 8px; min-height: 19px; }
.t2-field { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--blue); margin: 0; }
.t2-field svg { width: 12px; height: 12px; stroke: var(--blue); fill: none; stroke-width: 1.8; }
.t2-proto {
  margin: 0 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--body);
  border: 1px solid rgba(16, 40, 70, .25); border-radius: 4px; padding: 2.5px 7px;
}
.t2-proto[hidden] { display: none; }
.t2-name { font-size: 23px; font-weight: 800; letter-spacing: .01em; line-height: 1.25; margin: 7px 0 0; white-space: nowrap; }
.t2-desc { font-size: 13px; line-height: 1.7; color: var(--body); margin: 5px 0 0; }
.t2-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 8px 20px rgba(32, 98, 230, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.t2-link:active { transform: scale(.985); }
.t2-link .arr { font-size: 15px; }

@media (min-width: 760px) {
  .t2-cardwrap { justify-content: flex-start; left: 22px; bottom: 22px; }
  .t2-topbar { left: 22px; right: 22px; top: 16px; }
  .t2-name { font-size: 26px; }
}

/* ---------- static fallback (WebGL不可 / JS無効) ---------- */
/* Same fallback the town2 preview ships: a static list of the
   seven businesses. It renders unless town2.js is live on the
   page (it adds .t2-live to <body> on success); the production
   bootstrap additionally hides #town itself when the town cannot
   run, so the list takes the town's place at the top of <main>. */
.t2-fallback { max-width: 680px; margin: 0 auto; padding: 34px 22px 60px; }
.t2-fallback h1 { font-size: 21px; letter-spacing: .04em; margin-bottom: 6px; }
.t2-fallback .lead { font-size: 13px; color: var(--body); line-height: 1.8; margin-bottom: 24px; }
.t2-fb-item { border-top: 1px solid var(--line); padding: 16px 2px; }
.t2-fb-item .no { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--blue); }
.t2-fb-item h2 { font-size: 17px; margin: 4px 0 5px; }
.t2-fb-item p { font-size: 12.5px; line-height: 1.75; color: var(--body); margin: 0; }
.t2-fb-item a { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; }
body.t2-live .t2-fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .t2-mouse .wheel.cue { animation: none; }
  .t2-card .swap { transition: none; }
}

.showcase-media,
.business-media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pale-2);
}

.showcase-media {
  aspect-ratio: 1 / 1;
}

.showcase-media img,
.business-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.az-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  padding: 4px var(--sp-2);
  border-radius: 999px;
}

.proto-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-chip);
  padding: 4px var(--sp-2);
  border-radius: 999px;
  border: 1px solid var(--line);
}

.showcase-count {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--blue);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3);
}

.showcase-field {
  font-size: var(--fs-14);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-bold);
}

.showcase-field span {
  display: block;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-label);
  color: var(--muted);
  font-weight: var(--fw-text);
  margin-top: 2px;
}

.showcase-body h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-display);
}

.showcase-body p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-17);
}

.showcase-link a,
.business-link a {
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
}

.showcase-link a:hover,
.business-link a:hover {
  color: var(--navy);
  border-color: var(--navy);
}

/* ------------------------------- Fields ------------------------------- */

.fields {
  background: var(--pale);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* A quiet current behind the intro (owner: 迫力が足りない,
   2026-10-27): two pale washes drift almost imperceptibly on a
   long alternate cycle, and the whole layer parallaxes against
   the scroll through --fp (written by the inline script, 0 at
   rest / without JS / under reduced motion). Paint-only:
   background-position + one transform on an empty layer. */
.fields::before {
  content: "";
  position: absolute;
  inset: -56px -24px;
  background:
    radial-gradient(58% 46% at 18% 22%, rgba(32, 98, 230, 0.075), rgba(32, 98, 230, 0) 70%),
    radial-gradient(52% 44% at 84% 78%, rgba(125, 184, 247, 0.13), rgba(125, 184, 247, 0) 70%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
  background-size: 130% 130%, 130% 130%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  transform: translateY(calc(var(--fp, 0) * -38px));
  animation: fields-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes fields-drift {
  from { background-position: 0% 0%, 100% 100%, 0 0; }
  to { background-position: 26% 14%, 72% 84%, 0 0; }
}

.fields-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  position: relative;
  z-index: 1;
}

/* Scroll-linked parallax inside the intro columns: the two
   halves travel at different rates (the second lags deeper), so
   the block has depth while it crosses the screen. Written on
   the column divs — grandchildren of .fields-inner — so it never
   fights the reveal choreography, which owns the children's
   transforms. At rest (--fp unset) both sit exactly in place. */
.fields-intro > div {
  transform: translateY(calc(var(--fp, 0) * -10px));
}

.fields-intro > div:nth-child(2) {
  transform: translateY(calc(var(--fp, 0) * -24px));
}

.fields-kicker {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--steel);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-7);
}

.fields-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  margin-bottom: var(--sp-9);
}

.fields-intro h2 {
  /* The original's fields headline is a quieter step than the
     section h2s (pixel-measured ~18px at phone width). */
  font-size: clamp(18px, 4.8vw, 28px);
  line-height: var(--lh-h2);
  margin: 0 0 var(--sp-4);
}

.fields-intro p {
  margin: 0;
}

.fields-subhead {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 var(--sp-5);
}

.fields-label {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--steel);
  margin: 0 0 var(--sp-5);
  font-weight: var(--fw-bold);
}

/* The original strip is not a boxed card grid: plain cells divided by
   hairlines, a small count label, the big EN word with a ↗ at the
   right end of its line, and the businesses in small gray below. */
.fields-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-7);
}

.field-cell {
  min-width: 0;
  border-top: 1px solid var(--line-strong);
  padding: var(--sp-3) 0 4px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.field-cell:hover .field-en,
.field-cell:hover .field-arrow {
  color: var(--blue-vivid);
}

.field-num {
  font-size: var(--fs-11);
  /* (kept on the micro step) */
  letter-spacing: var(--ls-ui);
  color: var(--faint);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-2);
  white-space: nowrap;
}

.field-en {
  min-width: 0;
  font-size: 19px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-text);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1);
}

.field-arrow {
  font-size: var(--fs-16);
  font-weight: var(--fw-text);
}

.field-items {
  font-size: var(--fs-11);
  color: var(--muted);
  margin: 0;
  line-height: var(--lh-card);
}

/* The original closes the fields block with a thin white strip:
   the two slogans in small slate caps on one line, hairlines above
   and below, and a vivid ↗ at the right end. It bleeds to the full
   viewport width and sits flush on the section's bottom edge. */
.trust-band {
  --bleed: calc((100vw - 100%) / 2);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-4);
  background: #fff;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  margin: var(--sp-9) calc(var(--bleed) * -1) calc(var(--section-y) * -1);
  padding: var(--sp-2) var(--bleed);
  font-size: clamp(9px, 2.3vw, 11px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-num);
  line-height: var(--lh-card);
  color: var(--steel);
  text-align: left;
  white-space: nowrap;
}

.trust-arrow {
  margin-left: auto;
  color: var(--blue-vivid);
  font-size: var(--fs-14);
}

/* ------------------------------ Sections ------------------------------ */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

/* Section labels in the original: a small blue square bullet, then the
   number + caps title in dark slate (not all-blue). */
.section-index {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--slate);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-5);
}

.section-index::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue-vivid);
  flex: 0 0 auto;
}

.section-index.light {
  color: #cfe2f7;
}

.section-index.light::before {
  background: var(--sky);
}

.block-index {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--steel);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-4);
}

.section h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 var(--sp-7);
  font-weight: var(--fw-bold);
}

.section-lead {
  font-size: var(--fs-12);
  margin: 0 0 var(--sp-9);
}

/* Body paragraphs that carry no class of their own (philosophy
   articles, the sustainability intro, the company/careers leads)
   take their spacing from the system too, not browser defaults. */
.vision-mission article > p:not([class]),
.values article > p:not([class]),
.thinking article > p:not([class]),
.sustainability-text > p:not([class]),
#company > p:not([class]),
#careers > p:not([class]) {
  margin: 0 0 var(--sp-3);
}

/* ------------------------------ Business ------------------------------ */

/* The original's filters are a tab row, not pills: text tabs on a
   hairline, the active tab in ink with a vivid underline, counts as
   small steel numbers; the row scrolls sideways on narrow screens. */
.business-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-7);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-8);
}

.business-filters::-webkit-scrollbar {
  display: none;
}

.business-filters button {
  font-size: var(--fs-12);
  background: none;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--sp-2) 2px;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}

.business-filters button span {
  color: var(--faint);
  font-size: var(--fs-11);
  margin-left: 4px;
}

.business-filters button.is-current {
  background: none;
  border-bottom-color: var(--blue-vivid);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.business-filters button.is-current span {
  color: var(--steel);
}

.business-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-9) var(--sp-6);
}

/* The original cards have no box or border: a rounded image with small
   in-image labels, then name / proto chip / description / text link. */
.business-card {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-margin-top: 72px;
}

.business-card[hidden] {
  display: none;
}

/* Card images are square in the original, with a small corner
   radius. Several of the assets are app-icon style graphics; the
   original composes them centered on a soft ground instead of
   filling the frame, which also keeps the corner labels off the
   artwork's own printed text. */
.business-media {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  margin-bottom: var(--sp-3);
}

.business-media.media-nfc {
  background: radial-gradient(130% 130% at 50% 42%, #0e2c49 0%, #0a2036 58%, #081a2c 100%);
}

.business-media.media-nfc img {
  object-fit: contain;
  padding: 16.5%;
  /* nfc.webp is the badge printed on a black square. In the original
     the badge sits as a disc on a navy ground (disc ≈ 62% of the
     card width, measured from the owner's screenshot), so a radial
     mask dissolves the square's corners into the navy and only the
     disc — ring at ≈46% of the image width — stays visible. */
  -webkit-mask-image: radial-gradient(circle at 50% 49.5%, #000 62%, transparent 71%);
  mask-image: radial-gradient(circle at 50% 49.5%, #000 62%, transparent 71%);
}

/* 08 GAME: the official monogram (white, transparent) centred on a
   deep-navy field — the same dark-ground treatment as 01 NFC, in the
   game division's own navy. The mark asset is the owner's official
   logo cutout, unmodified. */
.business-media.media-game {
  background: radial-gradient(130% 130% at 50% 42%, #101e33 0%, #0a1524 58%, #060f1a 100%);
}

.business-media.media-game img {
  object-fit: contain;
  padding: 26%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}

/* On the wide hero the mark keeps a quiet presence: less vertical
   padding, more air at the sides. */
.business-media.biz-hero.media-game img {
  padding: 10.5% 35.5%;
}

/* 12 ATAA: the official bubble mark (the twelve-bubble silhouette,
   filled and glossed) printed edge-to-edge on its own deep navy.
   The card ground continues that same navy so the square print
   dissolves into the field and only the mark itself reads. The
   mark asset is the owner's official logo art, unmodified. */
.business-media.media-ataa {
  background: radial-gradient(130% 130% at 50% 42%, #0a1233 0%, #070d29 58%, #060b25 100%);
}

.business-media.media-ataa img {
  object-fit: contain;
  padding: 4.5%;
}

.business-media.biz-hero.media-ataa img {
  padding: 1.5% 31%;
}

.business-media.media-air {
  background: linear-gradient(160deg, #eef4fa, #dde9f4);
}

.business-media.media-air img {
  object-fit: contain;
  padding: 21.5%;
  /* Icon ≈ 55% of the card width in the original, floating on a soft
     shadow. The asset is the icon printed edge-to-edge, so the img
     box IS the icon: rounding it and shadowing it traces the icon. */
  border-radius: 15%;
  box-shadow: 0 16px 28px -12px rgba(31, 54, 84, 0.28);
}

.business-media.media-home {
  background: linear-gradient(160deg, #faf0e0, #f5e7d2);
}

.business-media.media-home img {
  object-fit: contain;
  padding: 20%;
  /* Icon ≈ 55% of the card width in the original, with the same soft
     float. The source home.webp was an RGB print of the peach icon
     on a near-black surround — no alpha at all — so the card showed
     the icon inside a black slab (owner: アイコンが黒くなってる,
     2026-10-27). The asset was re-cut with a true transparent
     surround (flood-filled from the corners, fringe eroded and
     feathered), so the peach icon now floats clean on the light
     field and the drop-shadow traces the icon's own contour.
     The un-cut source is kept as the repo-root home-source-blackbg.webp.bak. */
  filter: drop-shadow(0 16px 20px rgba(146, 96, 44, 0.20));
}

.business-media.media-train {
  background: linear-gradient(160deg, #f2f4ec, #e9ede1);
}

.business-media.media-train img {
  object-fit: contain;
  padding: 21.5%;
  /* Icon ≈ 57% of the card width in the original (measured from the
     owner's screenshot), floating on the same soft shadow as the
     other app-icon cards; train.webp is the icon printed edge to
     edge, so the img box IS the icon and takes its radius. */
  border-radius: 15%;
  box-shadow: 0 16px 28px -12px rgba(52, 66, 44, 0.28);
}

/* 05 PET CARE: in the original the icon is not printed on the field
   directly — it sits inside a white rounded tile floating on the
   pale green field. Measured from the owner's screenshot: field
   #edf3e9, the white tile ≈ 58% of the card width with ≈ 4.75%
   (of card width) of white frame around the green icon, so the
   green itself lands at ≈ 48.5%. care-icon.webp is care.webp
   cropped to the icon's own square. */
.business-media.media-care {
  background: linear-gradient(160deg, #f2f6ec, #e9f0df);
}

.business-media.media-care img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 58%;
  box-sizing: border-box;
  object-fit: contain;
  padding: 4.75%;
  background: #fff;
  border-radius: 20%;
  box-shadow: 0 18px 30px -14px rgba(74, 104, 62, 0.28);
}

/* 07 APPAREL cover is the official AZRION BRAND logo itself —
   the XX monogram + script lockup, unmodified, on a transparent
   ground — centred on a warm off-white field (owner direction
   2026-10-28, replacing the earlier full-bleed photo). Same
   contain-and-air treatment as the 08 GAME monogram card. */
.business-media.media-apparel {
  background: linear-gradient(160deg, #fdfcf9, #f4f0e7);
}

.business-media.media-apparel img {
  object-fit: contain;
  padding: 14%;
}

/* On the wide hero the lockup keeps a quiet presence: less
   vertical padding, more air at the sides. */
.business-media.biz-hero.media-apparel img {
  padding: 7% 27%;
}

.business-media.media-apparel .media-arrow {
  right: 12px;
  bottom: 12px;
  width: clamp(27px, 7.4vw, 44px);
  height: clamp(27px, 7.4vw, 44px);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  box-shadow: 0 4px 14px rgba(6, 17, 30, 0.25);
  text-shadow: none;
}

/* Full-bleed poster artwork (REPAIRMAN). The poster print already
   carries the AZ / 02 label and the AUTOMOTIVE PLATFORM line, so the
   HTML corner labels are suppressed for this card only — showing
   both would double them. Remove .media-poster if a label-free
   artwork ever replaces the poster file. */
.business-media.media-poster img {
  object-fit: cover;
  padding: 0;
}

.business-media.media-poster .media-arrow {
  display: none;
}

/* 02 REPAIRMAN cover (replaced 2026-10-28): the app's own entrance
   lockup — its real home-screen icon tile (black tile, white one-cut
   ring) over the REPAIRMAN wordmark — composed on the app's own
   background (#f4f4f6). The mascot-era poster is retired. The plate
   is square and fills the card; on the wide hero it sits contained
   and the figure carries the identical field colour, so the plate's
   ground extends seamlessly to the hero's edges. */
.business-media.media-repairman {
  background: #f4f4f6;
}

.business-media.biz-hero.media-repairman img {
  object-fit: contain;
}

/* 09 FARM / 10 USED CAR (added 2026-10-29): neither business has
   photography yet, and no stock or generated image is substituted —
   the cover is a quiet line motif drawn for the card (a sprout over
   water for the farm, a simple car pictogram for used cars) centred
   on a soft field, in the same contain-and-air spirit as the icon
   cards. When real artwork arrives, these classes take an <img>
   like the others. */
.business-media.media-farm {
  background: linear-gradient(160deg, #f1f6ea, #e2ecd6);
}

.business-media.media-auto {
  background: linear-gradient(160deg, #eef3f7, #dde7ee);
}

.business-media.media-farm svg,
.business-media.media-auto svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54%;
  height: 54%;
}

.business-media.biz-hero.media-farm svg,
.business-media.biz-hero.media-auto svg {
  width: 30%;
  height: 60%;
}

/* 09 FARM: the official AF monogram (black cutout, transparent)
   centred on the card's pale-green field — the mark itself laid
   directly on the ground, no plate (owner, 2026-10-31: the AF
   logo had never been reflected on the HQ site; this card
   carried a sprout sketch instead). */
.business-media.media-farm img.media-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* A business's own mark above its name on its business page
   (09 FARM: the AF monogram in black on the page's white). */
.biz-mark {
  width: 52px;
  height: auto;
  margin: 0 0 var(--sp-4);
}

/* The English category line that used to sit in the image's
   bottom-left corner ("SMART CONNECTION", "TRAVEL EXPERIENCE",
   …) was removed on the owner's instruction (2026-10-27), like
   the AZ / 0X numbers before it: card images now carry no HTML
   text at all — the artwork, the ↗, and (on the apparel card)
   the printed-style AZRION wordmark only. */

.media-arrow {
  position: absolute;
  right: 13px;
  bottom: 10px;
  font-size: var(--fs-15);
  line-height: 1;
  color: var(--slate);
}

.business-media.on-dark .media-arrow {
  color: #fff;
}

.business-card h3 {
  /* One line, always (owner, 2026-10-27): the longest titles
     (ALL AZRION AIR / AZRION APPAREL / ワンニャンホーム) must not
     wrap inside a two-column phone card, so the size runs on a
     viewport fluid scale — ≈17px at 375px wide, which is also
     what the original itself measures — and wrapping is off. */
  font-size: clamp(15px, 4.5vw, 20px);
  white-space: nowrap;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

/* The original's prototype marker is a small rectangle with a thin
   steel border, not a pill. Cards without a prototype keep an
   invisible twin so every card's description starts on the same
   line. */
.proto-chip {
  align-self: flex-start;
  font-size: var(--fs-11);
  font-weight: var(--fw-text);
  letter-spacing: var(--ls-chip);
  color: var(--slate);
  border: 1px solid #b9c9d6;
  border-radius: 2px;
  padding: 3px var(--sp-1);
  margin: 0 0 var(--sp-2);
}

.proto-chip--ghost {
  visibility: hidden;
}

.business-card > p:not(.proto-chip) {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-15);
}

.business-card .business-link {
  margin-top: auto;
  padding-top: var(--sp-3);
}

.business-link a {
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--ink);
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}

.business-link a:hover {
  color: var(--blue-vivid);
}

/* ----------------------------- Philosophy ----------------------------- */

.philosophy {
  position: relative;
  max-width: none;
  background: #f0f6fc;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.philosophy::after {
  /* One huge pale circle outline drifting off the top-right corner,
     as in the original (not a set of concentric rings). */
  content: "";
  position: absolute;
  top: -330px;
  right: -190px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 165, 225, 0.38);
  box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.philosophy > * {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.vision-mission,
.values,
.thinking {
  display: grid;
  gap: var(--sp-9);
}

.vision-mission {
  grid-template-columns: 1fr 1fr;
  /* sp-11 (64px) read as a meaningless void under the blocks on
     phones (owner, 2026-10-27); the section now runs on the tighter
     rhythm the original keeps between its blocks. */
  margin-bottom: var(--sp-8);
}

.values {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--sp-8);
}

.thinking {
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-7);
}

.vision-mission h3,
.values h3 {
  font-size: clamp(24px, 6.9vw, 34px);
  margin: 0 0 var(--sp-3);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.values h4 {
  font-size: var(--fs-13);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-bold);
}

.thinking h4 {
  font-size: var(--fs-13);
  letter-spacing: var(--ls-media);
  color: var(--navy);
  margin: 0 0 var(--sp-3);
}

.philosophy-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-text);
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
  margin: 0;
  text-align: left;
}

/* Folds in the original are not boxes: a hairline, a text row, and a
   ＋ at the right end (see the TOP MESSAGE frame). */
.thinking-fold {
  margin-top: var(--sp-10);
  border-top: 1px solid var(--line-strong);
  padding: 0 0 var(--sp-1);
}

/* In PHILOSOPHY the fold follows the keyword row directly; the
   generic sp-10 gap left a blank band between the row's bottom
   hairline and the fold's own hairline (owner, 2026-10-27). The
   TOP MESSAGE fold keeps the wider gap. */
.philosophy .thinking-fold {
  margin-top: var(--sp-6);
}

.thinking-fold summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-menu);
  color: var(--ink);
  padding: var(--sp-4) 0 var(--sp-2);
}

.thinking-fold summary::-webkit-details-marker {
  display: none;
}

.thinking-fold summary::after {
  content: "＋";
  font-weight: var(--fw-text);
  color: var(--body);
}

/* ------------------------------- Message ------------------------------ */

.message-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--sp-9);
  align-items: stretch;
}

/* Original panel: a soft blue-white gradient banner, the horse mark
   huge and very faint in the middle, and a tiny letterspaced line at
   the bottom-left corner. */
.message-panel {
  position: relative;
  background: linear-gradient(125deg, #f7fbff 0%, #e6f1fd 52%, #eef6fd 100%);
  border-radius: 6px;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-panel img {
  width: min(430px, 82%);
  height: auto;
  opacity: 0.14;
}

.message-panel p {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--faint);
  margin: 0;
}

.message-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.message-body h2 {
  margin-bottom: var(--sp-5);
}

.message-body p {
  font-size: var(--fs-17);
  margin: 0 0 var(--sp-2);
}

.message-fold {
  margin-top: var(--sp-8);
  text-align: left;
  border-top: 0;
}

/* The original's message fold is an underlined inline toggle —
   label, a wide gap, the ＋, and one ink rule under the whole
   group — not a full-width hairline row. */
.message-fold summary {
  display: inline-flex;
  justify-content: flex-start;
  gap: var(--sp-9);
  border-bottom: 1.5px solid var(--ink);
  padding: var(--sp-2) 0 var(--sp-2);
}

.message-fold h3 {
  font-size: var(--fs-22);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-4);
}

.message-fold p {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-4);
}

.message-fold .message-subhead {
  font-weight: var(--fw-bold);
  font-size: var(--fs-17);
  margin-bottom: var(--sp-2);
}

.message-fold .message-sign {
  text-align: right;
  margin-bottom: 4px;
}

.message-fold .message-sign span {
  display: block;
}

/* ------------------------------ Next 100 ------------------------------ */

.next100 {
  max-width: none;
  background: linear-gradient(165deg, #050f1e 0%, #071a33 60%, #0a2a5e 130%);
  color: #d7e5f5;
}

.next100 > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.next100 h2 {
  color: #fff;
}

.next100-lead {
  font-size: var(--fs-13);
  max-width: 760px;
}

.next100-timeline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-9) auto var(--sp-8);
}

/* The original's years are light-weight: 2026 in white, 2126 in
   sky blue with a small ↗ riding at its top-right, joined by a
   dotted line — the whole row fits the screen width. */
.next100-year {
  font-size: var(--fs-year);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-num);
  line-height: 1;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.next100-year-to {
  color: var(--sky);
}

.next100-year-arrow {
  font-size: var(--fs-year-arrow);
  position: relative;
  top: -0.7em;
  margin-left: 2px;
  display: inline-block;
  /* The arrow answers the travelling dot: one small diagonal
     nudge as the dot arrives, on the same 3.6s cycle — a quiet
     pulse, never a bounce (owner: 動く風に, 2026-10-27). */
  animation: next100-arrow 3.6s ease-in-out infinite;
}

@keyframes next100-arrow {
  0%, 70% { transform: translate(0, 0); opacity: 0.88; }
  86% { transform: translate(2px, -2px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0.88; }
}

.next100-dots {
  position: relative;
  flex: 1 1 auto;
  max-width: 220px;
  min-width: 36px;
  height: 6px;
  background-image:
    radial-gradient(circle, var(--sky) 2.2px, rgba(125, 184, 247, 0) 3px),
    linear-gradient(rgba(125, 184, 247, 0.55), rgba(125, 184, 247, 0.55));
  background-size: 20px 6px, 100% 1px;
  background-position: 0 center, 0 center;
  background-repeat: repeat-x, no-repeat;
}

/* A single point of light travels the dotted line from 2026 to
   2126 and fades at both ends, so the century reads as a flow,
   not a static pair of numbers. Paint-only (background-position
   on a 6px-tall strip), so it costs no layout. */
.next100-dots::after {
  content: "";
  position: absolute;
  inset: -4px 0;
  background-image: radial-gradient(circle, #eaf5ff 2.4px, rgba(170, 215, 255, 0.55) 4.5px, rgba(170, 215, 255, 0) 7px);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  animation: next100-flow 3.6s linear infinite;
  pointer-events: none;
}

@keyframes next100-flow {
  0% { background-position: 0% 50%; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { background-position: 100% 50%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .next100-year-arrow,
  .next100-dots::after {
    animation: none;
  }
}

/* One hairline above the three stages (they stay three columns at
   every width in the original), small steel-blue caps labels. */
.next100-stages article {
  min-width: 0;
}

.next100-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.next100-stages h3 {
  color: var(--pale-blue);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-chip);
  margin: 0 0 var(--sp-2);
}

.next100-stages p {
  margin: 0;
  font-size: var(--fs-13);
  color: #e8f1fb;
}

.next100-note {
  color: #8fb6dd;
  font-size: var(--fs-12);
  margin: 0;
}

/* ---------------------------- Sustainability --------------------------- */

/* Desktop: text + list on the left, figure on the right.
   Mobile (per the recording): headline/paragraph, then the figure,
   then the list — hence grid areas instead of source order. */
.sustainability-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas:
    "text figure"
    "list figure";
  column-gap: var(--sp-10);
  row-gap: var(--sp-1);
  align-items: center;
}

.sustainability-text {
  grid-area: text;
}

.sustainability-figure {
  grid-area: figure;
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sustainability-figure::before,
.sustainability-figure::after {
  content: "";
  position: absolute;
  width: 82%;
  height: 60%;
  border: 1.5px solid rgba(110, 165, 225, 0.55);
  border-radius: 50%;
}

.sustainability-figure::before {
  transform: rotate(32deg);
}

.sustainability-figure::after {
  transform: rotate(-32deg);
}

.sustainability-figure p {
  position: relative;
  font-size: var(--fs-figure);
  line-height: var(--lh-h3);
  font-weight: var(--fw-menu);
  color: var(--ink);
  text-align: center;
  margin: 0;
}

.sustainability-list {
  grid-area: list;
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}

.sustainability-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-13);
  color: var(--ink);
}

.sustainability-list .sus-num {
  color: var(--faint);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-note);
}

.sustainability-list .sus-arrow {
  margin-left: auto;
  font-size: var(--fs-17);
  color: var(--ink);
}

/* ------------------------------- Company ------------------------------ */

.origin {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-badge);
  color: var(--navy);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3);
}

.origin-story {
  max-width: 640px;
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
}

.company-profile {
  margin: var(--sp-7) 0 0;
}

.company-profile > div {
  display: flex;
  gap: var(--sp-7);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
}

.company-profile dt {
  flex: 0 0 96px;
  color: var(--muted);
  font-size: var(--fs-12);
}

.company-profile dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-13);
}

/* ------------------------------- Careers ------------------------------ */

.careers-list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.careers-list li {
  border-top: 1px solid var(--line);
  font-size: var(--fs-18);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.careers-item summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 4px;
  cursor: pointer;
  list-style: none;
}

.careers-item summary::-webkit-details-marker {
  display: none;
}

.careers-item .careers-plus::before {
  content: "＋";
}

.careers-item[open] .careers-plus::before {
  content: "－";
}

.careers-body {
  padding: 0 4px var(--sp-6);
  font-weight: var(--fw-text);
}

.careers-body p {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0 0 var(--sp-4);
  max-width: 640px;
}

.careers-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.careers-num {
  font-size: var(--fs-13);
  letter-spacing: var(--ls-note);
  color: var(--steel);
  font-weight: var(--fw-bold);
}

.careers-plus {
  margin-left: auto;
  color: var(--ink);
  font-weight: var(--fw-text);
  font-size: var(--fs-20);
}

/* Careers conversion (owner instruction, 2026-10-27): the section's
   call to action is an ENTRY button to the Wix recruiting site —
   not the LINE consult link. Accordion bodies carry the original's
   per-field text and the same button. */
.careers-entry {
  margin: var(--sp-8) 0 var(--sp-10);
}

.entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-vivid);
  color: #fff;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-ui);
  text-decoration: none;
  border-radius: 2px;
  padding: 15px 38px;
  box-shadow: 0 8px 20px rgba(32, 98, 230, 0.25);
}

.entry-btn:hover {
  background: var(--navy);
}

.entry-btn-sm {
  padding: 11px 26px;
  font-size: var(--fs-13);
  box-shadow: none;
}

.careers-note {
  font-size: var(--fs-13);
  color: var(--muted);
  margin: 0;
}

/* Careers composition (owner instruction, 2026-10-27): the section
   now flows — the dream (100-year plan + one short quote from the
   top message), the seven businesses you would join, the role
   accordion, then one converging entry button. The pull comes from
   the order and the whitespace, not from bigger type: every size
   below sits on the shared steps, at the quiet end of the system. */
.careers-vision {
  margin: var(--sp-9) 0 0;
  padding: var(--sp-7) 0 0;
  border-top: 1px solid var(--line);
}

.careers-vision-lead {
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--sp-6);
  max-width: 720px;
}

.careers-quote {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--blue-vivid);
}

.careers-quote p {
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0 0 var(--sp-2);
  max-width: 720px;
}

.careers-quote cite {
  font-style: normal;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-note);
  color: var(--muted);
}

.careers-quote cite a {
  color: var(--blue);
  text-decoration: none;
  letter-spacing: var(--ls-ui);
}

.careers-build {
  margin: var(--sp-10) 0 0;
}

.careers-sub {
  font-size: var(--fs-18);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 var(--sp-5);
}

.careers-build .careers-sub {
  margin-bottom: var(--sp-3);
}

.careers-build-lead {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0 0 var(--sp-6);
}

.careers-biz li.careers-biz-next {
  border-top: 1px dashed var(--line);
}

.careers-biz-next .careers-biz-num {
  color: var(--blue);
}

.careers-biz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-9);
}

.careers-biz li {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.careers-biz-num {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-media);
  color: var(--steel);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding-top: 3px;
}

.careers-biz-body {
  min-width: 0;
}

.careers-biz-body h4 {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 2px;
}

.careers-biz-body p {
  font-size: var(--fs-14);
  line-height: var(--lh-card);
  color: var(--body);
  margin: 0;
}

.careers-town-link {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-14);
}

.careers-town-link a {
  color: var(--blue);
  text-decoration: none;
}

.careers-roles-title {
  margin: var(--sp-10) 0 var(--sp-5);
}

.careers-closing {
  margin: var(--sp-9) 0 0;
  padding: var(--sp-9) 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.careers-closing-lead {
  font-size: var(--fs-20);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0 0 var(--sp-6);
}

.careers-entry-final {
  margin: 0 0 var(--sp-6);
}

.entry-btn-lg {
  padding: 17px 52px;
  font-size: 14px;
}

@media (max-width: 720px) {
  .careers-biz {
    grid-template-columns: 1fr;
  }

  .entry-btn-lg {
    width: 100%;
  }
}

/* ------------------------------- Contact ------------------------------ */

/* Contact band, per the recording: vivid blue with a teal hint at the
   bottom-right, everything left-aligned — small caps label first, a
   huge white headline, one small line, then full-width rectangular
   buttons (white filled, then white outline), the address, and the
   OFFICIAL LINE caps at the end. */
.contact {
  background:
    radial-gradient(ellipse 65% 55% at 100% 100%, rgba(24, 196, 205, 0.3) 0%, rgba(24, 196, 205, 0) 70%),
    linear-gradient(165deg, #0665dd 0%, #0665dd 55%, #0877c9 82%, #0583b5 108%);
  color: #eaf2fc;
}

.contact-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  text-align: left;
}

.contact-en {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  letter-spacing: var(--ls-label);
  font-size: var(--fs-12);
  color: #fff;
  margin: 0 0 var(--sp-7);
  font-weight: var(--fw-bold);
}

.contact h2 {
  color: #fff;
  font-size: var(--fs-contact-h);
  line-height: var(--lh-display);
  margin: 0 0 var(--sp-5);
  max-width: 640px;
}

.contact-lead {
  font-size: var(--fs-15);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--sp-9);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  border-radius: 2px;
  min-height: 64px;
  padding: 0 var(--sp-4);
}

.contact-btn-light {
  background: #fff;
  color: var(--ink);
}

.contact-btn-light:hover {
  background: var(--pale);
}

.contact-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.contact-btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-email {
  font-size: var(--fs-15);
  color: #fff;
  margin: var(--sp-7) 0 0;
}

.contact-official {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--fw-bold);
  margin: var(--sp-2) 0 0;
}

/* ------------------------------- Footer ------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

/* The original's footer is compact and left-aligned: wordmark and
   a small circular ↑ button on one row, a small tagline, a hairline,
   © and the slogan sharing one small-caps row, then one row of
   small SNS links. No nav columns, no giant lockup.
   Dimensions pixel-measured from the owner's screenshot of the
   original (original-reference/orig-footer.jpg, 1125px = 375 CSS px):
   wordmark content 131.7 x 43.0 (our PNG's artwork fills 1933x630 of
   its 1975x680 frame, so height 46px renders it at exactly that),
   ↑ button 31x31 centred on the wordmark, top pad 37 to the artwork,
   rule at 141, copy glyphs at 166, links glyphs at 197, total
   footprint ~231. (The original does have an SNS link row at the
   very bottom; the owner ordered it removed on 2026-10-27, so the
   footer now ends at the © / slogan row and the footprint drops
   by that row's ~30px.) */
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px var(--gutter) var(--sp-3);
  text-align: left;
}

.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.footer-brand {
  display: inline-block;
}

.footer-brand img {
  height: 46px;
  width: auto;
  margin: 0;
}

.footer-top {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-15);
  line-height: 1;
}

.footer-top:hover {
  border-color: var(--steel);
}

.footer-tagline {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-13);
  color: var(--slate);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.footer-copy {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-ui);
  color: var(--steel);
  margin: 0;
}

.footer-slogan {
  letter-spacing: var(--ls-note);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  color: var(--steel);
  margin: 0;
}

/* ------------------------------ Responsive ----------------------------- */

@media (max-width: 900px) {
  .business-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .fields-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .next100-stages {
    gap: var(--sp-4);
  }
}

@media (max-width: 720px) {
  /* Single-row mobile header sized to the original's recording:
     wordmark left (40px tall), hamburger right, ~20px side margins.
     The nav itself moves into the full-screen overlay menu below. */
  .header-inner {
    padding: var(--sp-1) var(--gutter-sp);
    gap: var(--sp-2);
  }

  .brand img {
    height: 34px;
  }

  /* The recording's mobile header is wordmark + hamburger only;
     the contact button appears from tablet width up. */
  .header-contact {
    display: none;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .site-nav {
    display: none;
  }

  /* ---- Full-screen overlay menu, per the owner's screenshot of the
     original: cream bar (wordmark + ✕), "AZRION / NAVIGATION" label,
     large numbered items with blue numbers and ↗, thin dividers, and
     the contact email under the last divider. All horizontal metrics
     share the original's ~28px side margin. ---- */
  .mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #fff;
    overflow-y: auto;
    animation: mm-in 0.28s ease;
  }

  .mm-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #faf8f3;
    border-bottom: 1px solid #e9e4da;
    padding: var(--sp-3) var(--gutter-menu);
  }

  .mm-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .mm-brand img {
    height: 34px;
    width: auto;
    display: block;
  }

  .mm-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    cursor: pointer;
  }

  .mm-nav {
    padding: var(--sp-8) var(--gutter-menu) var(--sp-9);
  }

  .mm-label {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-media);
    color: #8b9182;
  }

  .mm-item {
    display: flex;
    align-items: center;
    padding: var(--sp-5) 0;
    border-bottom: 1px solid #e4e9ef;
    text-decoration: none;
    color: var(--ink);
    font-size: var(--fs-29);
    font-weight: var(--fw-menu);
    line-height: var(--lh-display);
  }

  .mm-num {
    flex: 0 0 30px;
    font-size: var(--fs-14);
    font-weight: var(--fw-menu);
    color: var(--blue-vivid);
    letter-spacing: var(--ls-num);
  }

  .mm-text {
    flex: 1 1 auto;
  }

  .mm-arrow {
    flex: 0 0 auto;
    font-size: var(--fs-24);
    color: var(--ink);
    margin-left: var(--sp-2);
  }

  /* Opening the menu: the items sprout (ニョキッ) — each row
     rises a short distance and settles, one after another in a
     quiet stagger, growing from its own bottom edge. It stays
     inside the house motion language (long ease, no bounce, no
     overshoot); closing is silent — the overlay just leaves.
     (Owner, 2026-10-27.) */
  @keyframes mm-rise {
    from { opacity: 0; transform: translateY(16px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .mobile-menu.is-open .mm-label {
    animation: mm-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.02s both;
  }

  .mobile-menu.is-open .mm-item {
    transform-origin: 0 100%;
    animation: mm-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .mobile-menu.is-open .mm-item:nth-child(2) { animation-delay: 0.07s; }
  .mobile-menu.is-open .mm-item:nth-child(3) { animation-delay: 0.14s; }
  .mobile-menu.is-open .mm-item:nth-child(4) { animation-delay: 0.21s; }
  .mobile-menu.is-open .mm-item:nth-child(5) { animation-delay: 0.28s; }
  .mobile-menu.is-open .mm-item:nth-child(6) { animation-delay: 0.35s; }

  .hero {
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
  }

  .section,
  .fields-inner,
  .contact-inner {
    padding: var(--section-y-sp) var(--gutter-sp);
  }

  .fields-intro,
  .vision-mission,
  .values,
  .message-layout {
    grid-template-columns: 1fr;
  }

  .sustainability-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "figure"
      "list";
    row-gap: var(--sp-6);
  }

  .sustainability-figure {
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
  }

  .message-panel {
    min-height: 230px;
  }

  /* The recording shows two cards per row on phones for both the
     business grid and the fields strip. */
  .business-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-3);
  }

  .business-card > p:not(.proto-chip) {
    font-size: var(--fs-15);
  }

  .business-media {
    margin-bottom: var(--sp-2);
  }

  .fields-strip {
    gap: var(--sp-5) 16px;
  }

  .field-en {
    font-size: 15px;
  }

  /* COMPANY PROFILE stays a two-column definition list on phones
     too (label column + value column, ~56px row pitch) — the
     original never stacks it, and stacking was what opened the
     giant gap under each label. */
  .company-profile > div {
    flex-direction: row;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
  }

  .company-profile dt {
    flex: 0 0 88px;
  }

  /* On phones the strip bleeds by exactly the section's own side
     padding (not 100vw), so its box always matches the section's
     border box; the slogans may wrap instead of overflowing. */
  .trust-band {
    margin-bottom: calc(var(--section-y-sp) * -1);
    margin-left: calc(var(--gutter-sp) * -1);
    margin-right: calc(var(--gutter-sp) * -1);
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
    flex-wrap: wrap;
    white-space: normal;
    gap: 2px var(--sp-2);
  }

  /* The year row must fit the content box at phone widths: smaller
     vw factor, tighter gaps, and a dots segment that may shrink
     to 20px (the years themselves are nowrap). */
  .next100-timeline {
    gap: var(--sp-2);
  }

  .next100-year {
    /* Total-width budget, computed not eyeballed (the owner caught
       the ↗ riding half outside the right edge TWICE, 2026-10-27 —
       at 52.5px the row's real width met or exceeded the box once
       the arrow's own width, its margin and the pulse's +3px
       nudge were counted). Worst-case digit advance 0.60em/char,
       letter-spacing counted on every char:
         years  8 digits × 0.60em          = 4.80em
         track  8 × 0.02em (tightened ↓)   = 0.16em
         arrow  ≈0.60 × 0.42em + 2px margin + 2px nudge ≈ 0.25em + 4px
       At the 44px cap: ≈ 211 + 7 + 15 = 233px, + dots min 20px
       + gaps 2 × 12px = ≈277px against content boxes of 335px
       (375px phone), 320px (360) and 280px (320) — clear air on
       BOTH sides at every width (the ≤340px gap relief below
       widens the 320px margin further). The vw term takes over
       below ~352px so the row scales with the phone. */
    font-size: clamp(32px, 12.5vw, 44px);
    letter-spacing: 0.02em;
  }

  .next100-dots {
    min-width: 20px;
  }

  .next100-stages h3 {
    font-size: 10px;
  }

  /* Values stack with hairlines on phones, as in the original. */
  .values article {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-6);
  }

  /* The keyword row holds ONE line on phones (owner, 2026-10-29
     20:22, reversing the same-day wrap below in history: folded to
     two lines, the row read as scattered). Measured, the three
     keywords at 11px span ≈120/152/144px — ≈436px with gaps, which
     no fixed size can fit into the 335–390px content box of a
     375–430px phone. So the type is fluid instead: at letter-spacing
     .04em the row totals ≈36.4 × F + 16px, and F = 2.26vw lands at
     ≈326px (375px phone, box 335), ≈338px (390, box 350) and
     ≈371px (430, box 390) — one line with slack at every standard
     width, spread by the base rule's space-between, never clipped.
     Only below 360px does the row stop shrinking and fold (see the
     max-width: 359px block after this one). */
  .philosophy-tags {
    flex-wrap: nowrap;
    font-size: clamp(8px, 2.26vw, var(--fs-13));
    letter-spacing: .04em;
    column-gap: 8px;
    padding: var(--sp-4) 0;
  }

  .philosophy-tags span {
    white-space: nowrap;
  }

  .footer-inner {
    padding: 35px var(--gutter-sp) var(--sp-3);
  }
}

/* Below 360px the keyword row stops shrinking its type and folds
   instead, at the readable 11px (companion to the fluid one-line
   rule in the 720px block above). */
@media (max-width: 359px) {
  .philosophy-tags {
    flex-wrap: wrap;
    font-size: var(--fs-12);
    letter-spacing: var(--ls-text);
    gap: var(--sp-2) var(--sp-4);
  }
}

/* Very narrow phones: the year row trades gap and dots length
   before it ever trades legibility — the whole row (2026, dots,
   2126, ↗) stays inside the screen. */
@media (max-width: 340px) {
  .next100-timeline {
    gap: var(--sp-1);
  }

  .next100-dots {
    min-width: 12px;
  }
}

/* --------------------- Section flow (scroll reveal) ------------------ */
/* The whole page should feel like it flows, not like stacked blocks:
   sections rise gently into view as the visitor scrolls. The hidden
   state is only applied by the inline script (html.rv-on), so content
   is never trapped invisible without JS / IntersectionObserver, and
   reduced-motion visitors get the static page. */
html.rv-on .rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.rv-on .rv.rv-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.rv-on .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------ Business flow (card cascade) ------------------- */
/* "流れるようにカッコよく" for the business section: the heading
   group rises with the usual section reveal (JS arms it), then the
   cards drift in one after another, and the artwork answers the
   pointer with a quiet lift — depth, not noise. The hidden state
   exists only under html.rv-on, which the inline script sets solely
   when motion is allowed, so no-JS and reduced-motion visitors get
   the static page. */
html.rv-on .business-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.rv-on .business-list.rv-in .business-card {
  opacity: 1;
  transform: none;
}

html.rv-on .business-list.rv-in .business-card:nth-child(2) { transition-delay: 0.07s; }
html.rv-on .business-list.rv-in .business-card:nth-child(3) { transition-delay: 0.14s; }
html.rv-on .business-list.rv-in .business-card:nth-child(4) { transition-delay: 0.21s; }
html.rv-on .business-list.rv-in .business-card:nth-child(5) { transition-delay: 0.28s; }
html.rv-on .business-list.rv-in .business-card:nth-child(6) { transition-delay: 0.35s; }
html.rv-on .business-list.rv-in .business-card:nth-child(7) { transition-delay: 0.42s; }

.business-media {
  transition: box-shadow 0.6s ease;
}

.business-media img {
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.media-arrow {
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .business-card:hover .business-media {
    box-shadow: 0 22px 40px -18px rgba(9, 24, 43, 0.30);
  }

  .business-card:hover .business-media img {
    transform: scale(1.045);
  }

  .business-card:hover .media-arrow {
    transform: translate(2px, -2px);
  }
}

.business-card:active .business-media img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  html.rv-on .business-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .business-media,
  .business-media img,
  .media-arrow {
    transition: none;
  }

  .business-card:hover .business-media img,
  .business-card:active .business-media img {
    transform: none;
  }
}

/* ---------------- Fields intro (elevated reveal) ------------------- */
/* The first thing a visitor meets after the town tour is the
   FIELDS intro — the town hands over to it, so it does not rise
   as one block like the other sections. Instead (owner,
   2026-10-27): the kicker, the intro columns, the label, the
   field cells and the trust band arrive in a quiet sequence —
   smooth fades, small translations at different depths (a hint
   of parallax), the headline lines rising inside their masks,
   everything on a long refined ease. No bounce, no overshoot,
   nothing that shouts. The generic section reveal still arms it
   (the inline script adds .rv / .rv-in to .fields-inner); these
   rules replace the block motion with the choreography. Hidden
   states exist only under html.rv-on, so no-JS and
   reduced-motion visitors get the static page. */
html.rv-on .fields-inner.rv {
  opacity: 1;
  transform: none;
  transition: none;
}

html.rv-on .fields-inner.rv > * {
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pre-reveal offsets, scoped to :not(.rv-in) — this scoping is
   load-bearing, not decoration. The reveal script only ever ADDS
   .rv-in (it never removes .rv), and these per-child rules sit at
   specificity (0,4,1) while the terminal reset (.rv-in > *) sits
   at (0,3,1): unscoped, the offsets below outranked the reset and
   were PERMANENT — the strip kept translate(26px, 14px) forever,
   so on phones the whole 2×2 grid sat 26px right, the left column
   indented away from the label's hairline and the right column's
   ↗ / items clipped at the screen edge (owner screenshot,
   2026-10-27: 「これずれてた」). Scoped to the pre-reveal state,
   the moment .rv-in lands the only transform left standing is
   the reset's "none", so every child ends exactly in place. The
   transition itself is declared on .rv > * above, which matches
   in both states, so the choreography is unchanged. */
html.rv-on .fields-inner.rv:not(.rv-in) > .fields-kicker { transform: translateY(12px); }
html.rv-on .fields-inner.rv:not(.rv-in) > .fields-intro { transform: translateY(26px) scale(0.992); }
html.rv-on .fields-inner.rv:not(.rv-in) > .fields-label { transform: translateY(16px); }
/* The strip slides in on a diagonal — up and from the right —
   rather than only rising, so the four fields read as arriving
   along the page's flow (owner: 迫力, 2026-10-27). */
/* Travel trimmed 2026-10-31: at 26px the strip's pre-reveal state,
   caught mid-fade during a fast flick-through, read as a faint
   displaced ghost of the strip's last cell (「05 / BUSINESS /
   AZRION FARM」) over the next section's head. Quieter offsets —
   the arrival still reads, the ghost does not. */
html.rv-on .fields-inner.rv:not(.rv-in) > .fields-strip { transform: translate(12px, 8px); }
html.rv-on .fields-inner.rv:not(.rv-in) > .trust-band { transform: translateY(14px); }

html.rv-on .fields-inner.rv-in > * {
  opacity: 1;
  transform: none;
}

html.rv-on .fields-inner.rv-in > .fields-intro { transition-delay: 0.08s; }
html.rv-on .fields-inner.rv-in > .fields-label { transition-delay: 0.24s; }
html.rv-on .fields-inner.rv-in > .fields-strip { transition-delay: 0.32s; }
html.rv-on .fields-inner.rv-in > .trust-band { transition-delay: 0.58s; }

/* The four field cells follow the strip in their own stagger,
   sliding in from the right so the row sweeps across. */
html.rv-on .fields-inner.rv .field-cell {
  opacity: 0;
  transform: translateX(12px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

html.rv-on .fields-inner.rv-in .field-cell {
  opacity: 1;
  transform: none;
}

html.rv-on .fields-inner.rv-in .field-cell:nth-child(1) { transition-delay: 0.38s; }
html.rv-on .fields-inner.rv-in .field-cell:nth-child(2) { transition-delay: 0.46s; }
html.rv-on .fields-inner.rv-in .field-cell:nth-child(3) { transition-delay: 0.54s; }
html.rv-on .fields-inner.rv-in .field-cell:nth-child(4) { transition-delay: 0.62s; }

/* Headline lines rise inside overflow masks — the "スッ" of a
   line sliding up into place, Apple-style. Outside html.rv-on
   the spans are plain block lines. */
.fx-line {
  display: block;
  overflow: hidden;
}

.fx-in {
  display: block;
}

/* Bigger travel, a breath of scale, a longer glide (owner:
   迫力, 2026-10-27) — the lines now rise a full mask-height and
   a half while settling from 1.045 to natural size, still on the
   one long ease, still no bounce. The second headline's lines
   join a beat later so the two statements land in sequence. */
html.rv-on .fields-inner.rv .fx-in {
  transform: translateY(118%) scale(1.045);
  transition: transform 1.55s cubic-bezier(0.16, 1, 0.3, 1);
}

html.rv-on .fields-inner.rv-in .fx-in {
  transform: none;
}

html.rv-on .fields-inner.rv-in h2 .fx-line:nth-of-type(2) .fx-in {
  transition-delay: 0.18s;
}

html.rv-on .fields-inner.rv-in .fields-intro > div:nth-child(2) .fx-in {
  transition-delay: 0.28s;
}

html.rv-on .fields-inner.rv-in .fields-intro > div:nth-child(2) h2 .fx-line:nth-of-type(2) .fx-in {
  transition-delay: 0.44s;
}

/* At 320px the nowrap count label ("02 / 02 BUSINESSES") comes
   within a few px of its 132px column; tightening its tracking
   at very small widths keeps clear air inside the cell, so all
   four cells sit cleanly within the side margins at 320/360/375. */
@media (max-width: 360px) {
  .field-num {
    letter-spacing: 0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.rv-on .fields-inner.rv > *,
  html.rv-on .fields-inner.rv .field-cell,
  html.rv-on .fields-inner.rv .fx-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fields::before {
    animation: none;
    transform: none;
  }

  .fields-intro > div {
    transform: none;
  }
}

/* ------------------------- Business pages -------------------------
   The eight per-business intro pages (/business/<slug>/) share one
   template and draw entirely on the site's tokens above: the static
   header variant (always visible — no town tour to hide it behind),
   a hero that reuses each card's own .business-media treatment at a
   wider aspect, then label / name / verbatim lead / features /
   status / CTA / return links, all at the site's small, quiet
   scale. */

/* The header on subpages never slides away: it is the fixed bar in
   its shown state from the start. It is also fully opaque here (the
   top page's translucent bar ghosts scrolled-under headings through
   at 96% white, which read as the heading being eaten by the header
   band on the owner's device — 2026-10-30). */
.site-header--static {
  transform: none;
  opacity: 1;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.biz-main {
  max-width: var(--max);
  margin: 0 auto;
  /* clear the fixed header (~59px) with a section-rhythm gap */
  padding: calc(59px + var(--sp-9)) var(--gutter) var(--section-y);
}

.biz-back {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-14);
}

.biz-back a {
  color: var(--steel);
  text-decoration: none;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-text);
}

.biz-back a:hover {
  color: var(--blue-vivid);
}

/* Hero: the card's own media treatment, wider. The poster artwork
   (portrait) keeps a near-square frame so its printed title is not
   cropped away by the wide aspect. */
.business-media.biz-hero {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-7);
}

@media (min-width: 760px) {
  .business-media.biz-hero {
    aspect-ratio: 16 / 9;
  }

  .business-media.biz-hero.media-poster {
    aspect-ratio: 4 / 3;
    max-width: 560px;
  }
}

.biz-place {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  color: var(--blue-vivid);
}

.biz-name {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.biz-main .proto-chip {
  margin: 0 0 var(--sp-3);
}

.biz-lead {
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 640px;
}

.biz-sec {
  margin-top: var(--sp-10);
  /* Anchor landings clear the fixed header (~59px) plus a section
     gap, so a section heading never parks flush under the bar. */
  scroll-margin-top: calc(59px + var(--sp-6));
}

.biz-sec h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-20);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-text);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.biz-features {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.biz-features li {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-15);
  line-height: var(--lh-card);
  color: var(--body);
}

.biz-features li:last-child {
  border-bottom: 1px solid var(--line);
}

.biz-status {
  background: var(--pale);
  border-radius: 8px;
  padding: var(--sp-5);
  max-width: 640px;
}

.biz-status-label {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-text);
  color: var(--navy);
}

.biz-status-note {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--body);
}

.biz-origin {
  max-width: 640px;
}

.biz-origin p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
}

.biz-origin p:last-child {
  margin-bottom: 0;
}

/* Buttons are laid out with flex, not as inline-blocks in a text
   paragraph: inline-blocks wrap onto line boxes sized by the
   paragraph's line-height, which overlapped the two pills
   vertically (owner screenshot, 2026-10-30). */
.biz-cta {
  margin: var(--sp-9) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  max-width: 640px;
}

.biz-cta .btn {
  text-align: center;
}

.biz-return {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.biz-return a {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-text);
  color: var(--steel);
  text-decoration: none;
}

.biz-return a:hover {
  color: var(--blue-vivid);
}

@media (max-width: 720px) {
  .biz-main {
    padding: calc(51px + var(--sp-7)) var(--gutter-sp) var(--section-y-sp);
  }

  .biz-sec {
    scroll-margin-top: calc(51px + var(--sp-6));
  }

  /* Stacked CTAs take the full content width (the column the other
     blocks use) instead of floating at content width. */
  .biz-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Driving Future keyword row — slow seamless ticker (owner,
   2026-10-29 21:48): rather than shrinking the row to fit one line,
   the keywords drift endlessly like a stock ticker, so the row is
   never clipped at any width. The track holds two identical sets;
   translating it by -50% loops seamlessly. Quiet by design —
   constant slow linear motion, no flashing, no bounce.
   prefers-reduced-motion stops the drift and folds the single set
   instead. This block sits last so it wins over the fluid one-line
   sizing above for this row. */
.philosophy-tags {
  display: block;
  overflow: hidden;
  font-size: var(--fs-13);
  letter-spacing: .04em;
}

.philosophy-tags .tags-track {
  display: flex;
  width: max-content;
  animation: philosophy-marquee 38s linear infinite;
  will-change: transform;
}

.philosophy-tags .tags-set {
  display: flex;
  column-gap: 3em;
  padding-right: 3em;
}

.philosophy-tags .tags-set > span {
  white-space: nowrap;
}

@keyframes philosophy-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-tags {
    overflow: visible;
  }

  .philosophy-tags .tags-track {
    animation: none;
    width: auto;
  }

  .philosophy-tags .tags-set {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    padding-right: 0;
  }

  .philosophy-tags .tags-set[aria-hidden="true"] {
    display: none;
  }
}

/* ------- Trust band marquee (owner, 2026-10-29 21:53) -------
   The fields block closes with the white trust band (hairlines
   above and below, ↗ fixed at the right end). The owner asked for
   its two slogans to drift like the stock ticker too — same
   grammar as the philosophy keyword row above: two identical sets
   on one track, translated by -50% for a seamless loop, quiet
   constant motion at 38s per cycle, no flashing. The band's own
   layout is untouched: the slogans scroll inside a clipped
   viewport that takes the space the static line used to occupy,
   and the arrow stays put at the right end.
   prefers-reduced-motion stops the drift; the single set then
   wraps inside the band exactly as the static strip did. This
   block sits last so its inner rules win over the base and
   phone rules for .trust-band above. */
.trust-band .trust-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.trust-band .trust-track {
  display: flex;
  width: max-content;
  animation: philosophy-marquee 38s linear infinite;
  will-change: transform;
}

.trust-band .trust-set {
  display: flex;
  column-gap: 3em;
  padding-right: 3em;
}

.trust-band .trust-set > span {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .trust-band .trust-viewport {
    overflow: visible;
  }

  .trust-band .trust-track {
    animation: none;
    width: auto;
  }

  .trust-band .trust-set {
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: var(--sp-2);
    padding-right: 0;
  }

  .trust-band .trust-set[aria-hidden="true"] {
    display: none;
  }
}

/* ---------------- AZRION FARM business page (2026-10-30) --------------
   The FARM introduction borrows the grammar of a flagship product
   page: one mechanism, dissected into numbered stages — a big index
   numeral, a small-caps stage name, one headline, one short story —
   and a closing "creed" band of big words with small labels where a
   spec sheet would sit. Scoped to .farm-* / .biz-prose so no other
   business page changes. The accent is the farm motif's own green. */
.biz-prose {
  max-width: 640px;
}

.biz-prose p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
}

.biz-prose p:last-child {
  margin-bottom: 0;
}

.farm-kicker {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: #44603c;
}

.farm-decl {
  font-size: var(--fs-21);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-text);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.farm-figure {
  margin: var(--sp-8) 0 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pale-2);
}

.farm-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.farm-stages {
  list-style: none;
  margin: var(--sp-9) 0 0;
  padding: 0;
}

.farm-stage {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--line);
}

.farm-stage:last-child {
  border-bottom: 1px solid var(--line);
}

.farm-stage-num {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(34px, 9vw, 54px);
  line-height: 1;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-num);
  color: var(--steel);
}

.farm-stage-body {
  max-width: 560px;
}

.farm-stage-en {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: #44603c;
}

.farm-stage-body h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-20);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-text);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.farm-stage-body p {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--body);
}

.farm-creed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-9);
}

.farm-creed-item {
  flex: 1 1 150px;
  border-top: 2px solid #44603c;
  padding-top: var(--sp-3);
}

.farm-creed-big {
  margin: 0;
  font-size: var(--fs-27);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-text);
  color: var(--ink);
}

.farm-creed-label {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-13);
  line-height: var(--lh-card);
  color: var(--steel);
}

@media (max-width: 720px) {
  .farm-stage {
    gap: var(--sp-4);
    padding: var(--sp-6) 0;
  }
}