/* ===========================================================
   RIBAI V2 — CINEMATIC INDUSTRIAL / EDITORIAL HOMEPAGE
   =========================================================== */

:root {
  --ink: #131313;
  --ink-2: #1a1a1a;
  --warm: #f2f0ea;
  --warm-2: #e9e5dd;
  --paper: #fbfaf7;
  --white: #ffffff;
  --red: #a31824;
  --red-soft: #bf4c56;
  --muted: #77736c;
  --line: rgba(19, 19, 19, .15);
  --light-line: rgba(255, 255, 255, .18);
  --max: 1500px;
  --gutter: clamp(24px, 4.9vw, 76px);
  --section: clamp(105px, 10vw, 168px);
  --ease: cubic-bezier(.21,.74,.26,.99);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, textarea { font: inherit; }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .024;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section-dark { padding-block: var(--section); background: var(--ink); color: white; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(251,250,247,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(19,19,19,.09);
}

.header-container {
  height: 86px;
  padding-inline: var(--gutter);
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.3vw, 42px);
  font-size: 13px;
}

.desktop-nav > a:not(.nav-contact) {
  position: relative;
  padding-block: 8px;
}

.desktop-nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--red);
  transition: right .3s var(--ease);
}

.desktop-nav > a:hover::after { right: 0; }

.nav-contact {
  border: 1px solid var(--ink);
  padding: 11px 14px 11px 16px;
  display: inline-flex;
  gap: 26px;
  transition: background .25s ease, color .25s ease;
}

.nav-contact:hover { background: var(--ink); color: white; }

.mobile-toggle,
.mobile-nav { display: none; }

/* Shared typography */
.micro-label,
.section-index {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 650;
}

.micro-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  color: #4f4c47;
}

.signal-dot {
  width: 7px;
  height: 7px;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(163,24,36,.08);
}

.section-index {
  display: grid;
  grid-template-columns: 70px 1fr;
  padding-bottom: 19px;
  margin-bottom: 62px;
  border-bottom: 1px solid var(--line);
  color: #6b6862;
}

.section-index.light {
  color: #8c8b87;
  border-color: var(--light-line);
}

.display-title {
  margin: 0;
  font-size: clamp(50px, 5.2vw, 84px);
  line-height: .98;
  letter-spacing: -0.052em;
  font-weight: 570;
}

.display-title span { color: #77736d; }
.light-title { color: white; }

/* Buttons */
.button {
  display: inline-flex;
  min-width: 177px;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  padding: 15px 16px;
  border: 1px solid currentColor;
  font-size: 13px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--red); border-color: var(--red); }
.button-light { background: transparent; color: white; }
.button-light:hover { background: white; color: var(--ink); }

/* Hero */
.hero {
  min-height: calc(100vh - 86px);
  background: var(--paper);
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(540px, 1.08fr);
  min-height: calc(100vh - 150px);
}

.hero-copy {
  padding: clamp(74px, 7.5vw, 118px) clamp(48px, 5.5vw, 94px) 72px max(var(--gutter), calc((100vw - var(--max)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero h1 {
  margin: 0 0 36px;
  max-width: 900px;
  font-size: clamp(58px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.061em;
  font-weight: 590;
}

.hero h1 em {
  color: #7d7973;
  font-style: normal;
  font-weight: 500;
}

.hero-text {
  max-width: 730px;
  margin: 0 0 38px;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
  letter-spacing: -.022em;
  color: #47443f;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.quiet-note {
  max-width: 230px;
  color: #8a867e;
  font-size: 11px;
  line-height: 1.55;
}

.hero-media {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #1b1b1b;
}

.hero-media > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.45) contrast(1.08) brightness(.77);
  transform: scale(1.015);
  transition: transform 1.2s var(--ease);
}

.hero-media:hover > img { transform: scale(1.04); }

.hero-image-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.15), rgba(10,10,10,.42)),
    linear-gradient(90deg, rgba(10,10,10,.12), transparent 55%);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mix-blend-mode: screen;
  opacity: .32;
}

.vision-frame {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.14);
}

.vision-frame-a { width: 35%; height: 28%; left: 18%; top: 24%; }
.vision-frame-b { width: 22%; height: 20%; right: 9%; top: 43%; }

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
}
.corner.tl { left: -1px; top: -1px; border-left: 2px solid #fff; border-top: 2px solid #fff; }
.corner.tr { right: -1px; top: -1px; border-right: 2px solid #fff; border-top: 2px solid #fff; }
.corner.bl { left: -1px; bottom: -1px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; }
.corner.br { right: -1px; bottom: -1px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }

.vision-frame-a .corner.tl,
.vision-frame-a .corner.br { border-color: var(--red-soft); }

.vision-frame b {
  position: absolute;
  left: 12px;
  top: 11px;
  color: rgba(255,255,255,.7);
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
}

.hero-data-panel {
  z-index: 4;
  position: absolute;
  right: 28px;
  top: 28px;
  width: min(315px, calc(100% - 56px));
  padding: 17px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(14,14,14,.66);
  backdrop-filter: blur(10px);
  color: white;
}

.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font: 500 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  color: #aaa;
}

.live { display: flex; align-items: center; gap: 6px; }
.live i { width: 5px; height: 5px; background: var(--red-soft); border-radius: 50%; }

.data-row {
  display: grid;
  grid-template-columns: 94px 1fr;
  align-items: center;
  gap: 14px;
  margin: 11px 0;
  font-size: 10px;
  color: #c7c7c4;
}

.data-row b {
  height: 2px;
  background: linear-gradient(90deg, var(--red-soft) 0 48%, rgba(255,255,255,.22) 48%);
}

.data-row:nth-of-type(3) b { background: linear-gradient(90deg, var(--red-soft) 0 72%, rgba(255,255,255,.22) 72%); }
.data-row:nth-of-type(4) b { background: linear-gradient(90deg, var(--red-soft) 0 60%, rgba(255,255,255,.22) 60%); }

.panel-foot {
  margin-top: 16px;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.media-caption {
  position: absolute;
  z-index: 4;
  left: 28px;
  bottom: 28px;
  width: min(440px, calc(100% - 56px));
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.42);
  color: white;
}

.media-caption span {
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #b3b1ac;
}

.media-caption p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #d3d2ce;
}

.hero-bottom {
  min-height: 64px;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #77736d;
}

.scroll-line { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.scroll-line i {
  position: absolute;
  width: 18%;
  height: 1px;
  background: var(--red);
  animation: slideLine 4.5s ease-in-out infinite;
}
@keyframes slideLine {
  0%,100% { left: 0; }
  50% { left: 82%; }
}

/* Problem */
.problem { background: var(--warm); }

.problem-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .52fr);
  gap: clamp(60px, 9vw, 144px);
  align-items: end;
  margin-bottom: 88px;
}

.problem-intro {
  padding-bottom: 5px;
  font-size: 16px;
  line-height: 1.68;
  color: #5c5953;
}

.problem-intro p { margin: 0 0 23px; }
.problem-intro strong {
  display: block;
  color: var(--ink);
  font-weight: 620;
}

.problem-visual-grid {
  display: grid;
  grid-template-columns: 1.32fr .68fr;
  gap: 22px;
}

.photo-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #1b1b1b;
}

.photo-large { min-height: 650px; }
.photo-small { min-height: 360px; }

.photo-card img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(.38) contrast(1.08);
  transition: transform 1s var(--ease);
}

.photo-card:hover img { transform: scale(1.025); }

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,.72));
}

.photo-card figcaption {
  z-index: 2;
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  color: white;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.45);
}

.photo-card figcaption span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #bebdb8;
}

.photo-card figcaption p {
  margin: 0;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.5;
}

.problem-side { display: grid; grid-template-rows: 1fr auto; gap: 22px; }

.inspection-overlay {
  z-index: 3;
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255,255,255,.44);
}

.scan-line {
  position: absolute;
  left: 0; right: 0; top: 54%;
  height: 1px;
  background: var(--red-soft);
  box-shadow: 0 0 18px rgba(191,76,86,.5);
}

.scan-label {
  position: absolute;
  right: 10px;
  top: calc(54% - 22px);
  color: white;
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
}

.definition-card {
  padding: 34px 32px 38px;
  background: var(--paper);
  border: 1px solid #ddd8ce;
  border-left: 3px solid var(--red);
}

.definition-kicker {
  margin-bottom: 28px;
  color: #8a867e;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.definition-card h3 {
  margin: 0 0 15px;
  font-size: clamp(28px, 2.4vw, 39px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 570;
}

.definition-card p {
  margin: 0;
  color: #5f5b54;
  line-height: 1.62;
  font-size: 14px;
}

.system-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  column-gap: clamp(110px, 10vw, 190px);
  margin-top: 56px;
  min-height: 250px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.flow-cell {
  position: relative;
  z-index: 2;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flow-source {
  padding-left: 28px;
}

.flow-outcome {
  padding-right: 28px;
}

.flow-no {
  align-self: flex-end;
  color: #aaa69e;
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.flow-cell small {
  margin-top: auto;
  margin-bottom: 13px;
  color: #807c75;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.flow-cell strong {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 570;
  letter-spacing: -.02em;
}

.flow-core {
  background: var(--ink);
  color: white;
  align-items: flex-start;
  text-align: left;
}

.flow-core small { color: #858582; }

.flow-logo-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  align-self: flex-start;
  margin: 0 0 12px;
  flex: 0 0 auto;
}

.mini-rib-mark {
  position: relative;
  width: 37px;
  height: 37px;
}

.mini-rib-mark::before,
.mini-rib-mark::after,
.mini-rib-mark i::before,
.mini-rib-mark i::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
}

.mini-rib-mark::before { left:0; top:0; border-left:1.5px solid currentColor; border-top:1.5px solid currentColor; }
.mini-rib-mark::after { right:0; top:0; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; }
.mini-rib-mark i::before { left:0; bottom:0; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
.mini-rib-mark i::after { right:0; bottom:0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }

.mini-rib-mark i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--red);
  left: 13.5px;
  top: 13.5px;
}

/* Connectors are overlays, not grid columns.
   This keeps the original 3-column layout perfectly balanced. */
.flow-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: clamp(74px, 6.7vw, 118px);
  height: 34px;
  transform: translateY(-50%);
  color: #96928a;
  pointer-events: none;
}

.flow-arrow-left {
  left: calc(33.333% - clamp(48px, 3.1vw, 60px));
  transform: translate(-50%, -50%);
}

.flow-arrow-right {
  left: calc(66.667% + clamp(48px, 3.1vw, 60px));
  transform: translate(-50%, -50%);
}

.flow-arrow span {
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  text-align: center;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #8f8b83;
}

.flow-arrow i {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 1px;
  background: #bdb8ae;
}

.flow-arrow i::after {
  content: "";
  position: absolute;
  right: 1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #4f4c47;
  border-right: 1px solid #4f4c47;
  transform: rotate(45deg);
}

/* Image break */
.image-break {
  position: relative;
  min-height: min(900px, 88vh);
  background: #151515;
  color: white;
  overflow: hidden;
}

.image-break-media,
.image-break-overlay {
  position: absolute;
  inset: 0;
}

.image-break-media img {
  height: 100%;
  object-fit: cover;
  filter: saturate(.22) contrast(1.12) brightness(.55);
}

.image-break-overlay {
  background:
    linear-gradient(90deg, rgba(10,10,10,.65), rgba(10,10,10,.13) 55%, rgba(10,10,10,.34)),
    linear-gradient(180deg, rgba(10,10,10,.2), rgba(10,10,10,.6));
}

.image-break-content {
  position: relative;
  min-height: min(900px, 88vh);
  padding-block: 40px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.image-break-top {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #c4c2bd;
}

.image-break blockquote {
  margin: 0;
  max-width: 1100px;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .9;
  letter-spacing: -.061em;
  font-weight: 560;
}

.image-break blockquote em {
  color: #c1beb8;
  font-style: normal;
  font-weight: 450;
}

.image-break-bottom {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, .55fr);
  gap: 100px;
  align-items: end;
}

.image-break-bottom > p {
  margin: 0;
  max-width: 760px;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.55;
  color: #e0ded9;
}

.technical-key {
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}

.technical-key span {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b2afaa;
  font-size: 10px;
  letter-spacing: .03em;
}

.technical-key i {
  width: 7px;
  height: 7px;
  background: transparent;
  border: 1px solid #8f8c87;
}

.technical-key span:nth-child(2) i { background: var(--red); border-color: var(--red); }

/* Approach */
.approach-heading {
  display: grid;
  grid-template-columns: 1fr .48fr;
  gap: 100px;
  align-items: end;
  margin-bottom: 82px;
}

.approach-heading p {
  margin: 0 0 5px;
  color: #aaa9a5;
  line-height: 1.68;
  font-size: 16px;
}

.approach-layout {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 50px;
  align-items: start;
}

.operator-photo {
  position: sticky;
  top: 120px;
  min-height: 660px;
  overflow: hidden;
  background: #222;
}

.operator-photo img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(.22) contrast(1.1) brightness(.72);
}

.operator-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,.58));
}

.photo-index {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  color: #d4d2cc;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
}

.photo-target {
  position: absolute;
  z-index: 3;
  width: 108px;
  height: 108px;
  right: 19%;
  top: 29%;
  border: 1px solid rgba(255,255,255,.28);
}

.photo-target::before,
.photo-target::after {
  content: "";
  position: absolute;
  background: var(--red-soft);
}

.photo-target::before { width: 1px; top: -18px; bottom: -18px; left: 50%; }
.photo-target::after { height: 1px; left: -18px; right: -18px; top: 50%; }

.photo-target i {
  position: absolute;
  width: 6px;
  height: 6px;
  left: calc(50% - 3px);
  top: calc(50% - 3px);
  background: var(--red-soft);
}

.principle {
  min-height: 224px;
  display: grid;
  grid-template-columns: 66px 1fr 28px;
  gap: 24px;
  padding: 38px 0;
  border-top: 1px solid var(--light-line);
}

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

.principle-num {
  padding-top: 5px;
  color: #777774;
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.principle h3 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.5vw, 41px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 520;
}

.principle p {
  margin: 0;
  max-width: 730px;
  color: #9d9c98;
  font-size: 15px;
  line-height: 1.67;
}

.principle-arrow {
  color: #6f6f6c;
  font-size: 18px;
}

.pilot-strip {
  margin-top: 60px;
  padding: 20px 0;
  border-top: 1px solid var(--light-line);
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 50px;
  align-items: center;
}

.pilot-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d0cec8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.pilot-status i {
  width: 7px;
  height: 7px;
  background: var(--red-soft);
  box-shadow: 0 0 0 7px rgba(191,76,86,.12);
}

.pilot-strip p {
  margin: 0;
  color: #8c8b87;
  line-height: 1.55;
  font-size: 13px;
}

/* Middle */
.middle { background: var(--paper); }

.middle-header {
  display: grid;
  grid-template-columns: 1fr .48fr;
  gap: 100px;
  align-items: end;
  margin-bottom: 82px;
}

.middle-header p {
  margin: 0 0 5px;
  color: #67635d;
  line-height: 1.68;
  font-size: 16px;
}

.category-map {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 55px;
}

.top-label {
  position: absolute;
  top: 18px;
  left: 0;
  color: #98938b;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.category-row {
  display: grid;
  grid-template-columns: 1fr 1.14fr 1fr;
  align-items: stretch;
  gap: 20px;
}

.category-col {
  min-height: 410px;
  padding: 30px;
  border: 1px solid #dedad2;
  display: flex;
  flex-direction: column;
}

.category-meta {
  margin-bottom: 50px;
  color: #89857e;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.category-col h3 {
  margin: 0 0 22px;
  font-size: clamp(36px, 3.25vw, 54px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 550;
}

.category-col p {
  margin: auto 0 0;
  max-width: 380px;
  color: #68645e;
  font-size: 14px;
  line-height: 1.62;
}

.category-focus {
  position: relative;
  background: var(--warm);
  border-color: var(--ink);
  box-shadow: 0 24px 55px rgba(20,20,20,.09);
}

.focus-ribbon {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 12px;
  background: var(--red);
  color: white;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.focus-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.focus-footer .mini-rib-mark {
  width: 31px;
  height: 31px;
}
.focus-footer .mini-rib-mark i {
  width: 8px;
  height: 8px;
  left: 11.5px;
  top: 11.5px;
}
.focus-footer .mini-rib-mark::before,
.focus-footer .mini-rib-mark::after,
.focus-footer .mini-rib-mark i::before,
.focus-footer .mini-rib-mark i::after {
  width: 9px;
  height: 9px;
}

.focus-footer strong {
  font-size: 17px;
  letter-spacing: -.02em;
}

.focus-footer .category-ribai-logo {
  display: block;
  width: 92px;
  height: auto;
}

.category-axis {
  margin-top: 35px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  color: #817d75;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.axis-line {
  height: 1px;
  background: #bbb6ac;
  position: relative;
}

.axis-line i {
  position: absolute;
  left: 41%;
  right: 41%;
  height: 3px;
  top: -1px;
  background: var(--red);
}

/* About */
.about { background: var(--warm); }

.about-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(72px, 10vw, 160px);
}

.about-rule {
  width: 72px;
  height: 3px;
  background: var(--red);
  margin: 50px 0 30px;
}

.about-lede {
  max-width: 650px;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.56;
  color: #4d4a44;
  letter-spacing: -.02em;
}

.about-detail {
  padding-top: 5px;
}

.about-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--line);
}

.about-copy p {
  margin: 0;
  color: #5c5852;
  font-size: 15px;
  line-height: 1.7;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid var(--line);
  margin: 36px 0;
}

.experience-grid div {
  min-height: 93px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.experience-grid div:nth-child(-n+2) { border-top: 1px solid var(--line); }

.experience-grid span {
  color: #9b978f;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.experience-grid strong {
  font-size: 14px;
  font-weight: 560;
}

.editorial-link {
  display: inline-flex;
  gap: 40px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
}

.editorial-link span { color: var(--red); }

/* Contact */
.contact {
  min-height: 820px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  background: var(--ink);
  color: white;
}

.contact-media {
  position: relative;
  min-height: 820px;
  overflow: hidden;
}

.contact-media img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(.25) contrast(1.1) brightness(.63);
}

.contact-media-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,15,15,.15), rgba(15,15,15,.5)),
    linear-gradient(180deg, transparent 55%, rgba(15,15,15,.52));
}

.contact-panel {
  padding: clamp(74px, 7vw, 110px) max(var(--gutter), calc((100vw - var(--max)) / 2)) clamp(74px, 7vw, 110px) clamp(54px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-panel .section-index {
  margin-bottom: 50px;
}

.contact-panel h2 {
  margin: 0 0 30px;
  max-width: 900px;
  font-size: clamp(48px, 5vw, 78px);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 550;
}

.contact-panel > p {
  max-width: 680px;
  margin: 0 0 42px;
  color: #aaa9a5;
  line-height: 1.68;
  font-size: 15px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  max-width: 760px;
}

.contact-form label {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.23);
  padding: 14px 0;
}

.contact-form label span {
  display: block;
  margin-bottom: 8px;
  color: #777774;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 3px 0 6px;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: white;
  font-size: 16px;
}

.message-field { grid-column: 1 / -1; }
.contact-form .button { margin-top: 28px; }

.contact-note {
  margin-top: 24px;
  color: #696966;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Footer */
footer {
  background: var(--paper);
  padding: 60px var(--gutter) 0;
}

.footer-inner,
.footer-bottom {
  max-width: var(--max);
  margin-inline: auto;
}

.footer-inner {
  padding-bottom: 52px;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  border-bottom: 1px solid var(--line);
}

.footer-brand img { width: 142px; height: auto; margin-bottom: 20px; }
.footer-brand p {
  margin: 0;
  max-width: 430px;
  color: #706c65;
  line-height: 1.55;
  font-size: 12px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 15px 35px;
  align-content: start;
  font-size: 12px;
}

.footer-links a:hover { color: var(--red); }

.footer-bottom {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #8b877f;
  font-size: 10px;
}

/* Reveal motion */
.reveal {
  opacity: 0;
  transform: translateY(17px);
  transition: opacity .82s var(--ease), transform .82s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy {
    padding-left: var(--gutter);
    min-height: 650px;
  }
  .hero-media { min-height: 680px; }

  .problem-heading,
  .approach-heading,
  .middle-header,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .problem-visual-grid {
    grid-template-columns: 1fr;
  }

  .problem-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .system-flow {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .flow-cell {
    min-height: 190px;
  }

  .flow-logo-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
  }

  .flow-arrow {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 58px;
    transform: none;
    grid-column: 1;
    padding: 0;
  }

  .flow-arrow-left {
    grid-row: 2;
  }

  .flow-core {
    grid-row: 3;
  }

  .flow-arrow-right {
    grid-row: 4;
  }

  .flow-outcome {
    grid-row: 5;
  }

  .flow-arrow span {
    top: 12px;
  }

  .flow-arrow i {
    left: 50%;
    right: auto;
    top: 27px;
    width: 1px;
    height: 24px;
  }

  .flow-arrow i::after {
    right: -3px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .flow-arrow::before,
  .flow-arrow::after {
    display: none;
  }

  .approach-layout {
    grid-template-columns: 1fr;
  }

  .operator-photo {
    position: relative;
    top: auto;
    min-height: 590px;
  }

  .category-row { grid-template-columns: 1fr; }
  .category-col { min-height: 300px; }
  .category-axis { display: none; }

  .contact { grid-template-columns: .65fr 1.35fr; }
}

@media (max-width: 820px) {
  :root {
    --gutter: 22px;
    --section: 88px;
  }

  .header-container { height: 74px; }
  .brand img { width: 130px; }

  .desktop-nav { display: none; }
  .mobile-toggle {
    display: block;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 0;
    background: transparent;
    position: relative;
  }

  .mobile-toggle i {
    position: absolute;
    left: 10px;
    width: 22px;
    height: 1px;
    background: var(--ink);
    transition: top .2s ease, transform .2s ease;
  }

  .mobile-toggle i:first-child { top: 16px; }
  .mobile-toggle i:last-child { top: 24px; }

  .menu-open .mobile-toggle i:first-child { top: 20px; transform: rotate(45deg); }
  .menu-open .mobile-toggle i:last-child { top: 20px; transform: rotate(-45deg); }

  .mobile-nav {
    position: fixed;
    z-index: 79;
    inset: 74px 0 0;
    padding: 36px var(--gutter);
    background: var(--paper);
    flex-direction: column;
    gap: 28px;
    font-size: 28px;
    letter-spacing: -.03em;
  }

  .menu-open .mobile-nav { display: flex; }

  .hero { min-height: auto; }
  .hero-grid { min-height: 0; }
  .hero-copy {
    min-height: 610px;
    padding: 64px var(--gutter);
  }
  .hero h1 { font-size: clamp(52px, 14vw, 74px); }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-media { min-height: 560px; }
  .hero-bottom {
    grid-template-columns: 1fr auto;
    min-height: 70px;
  }
  .hero-bottom > span:first-child,
  .scroll-line { display: none; }

  .section-index { grid-template-columns: 52px 1fr; margin-bottom: 44px; }

  .problem-heading { margin-bottom: 60px; }
  .problem-side { grid-template-columns: 1fr; }
  .photo-large { min-height: 500px; }
  .photo-small { min-height: 350px; }
  .photo-card figcaption { grid-template-columns: 1fr; gap: 9px; }

  .image-break { min-height: 760px; }
  .image-break-content { min-height: 760px; }
  .image-break-bottom { grid-template-columns: 1fr; gap: 40px; }

  .principle { grid-template-columns: 42px 1fr; }
  .principle-arrow { display: none; }

  .pilot-strip { grid-template-columns: 1fr; gap: 22px; }

  .about-copy { grid-template-columns: 1fr; gap: 20px; }
  .experience-grid { grid-template-columns: 1fr; }

  .contact {
    grid-template-columns: 1fr;
  }
  .contact-media { min-height: 440px; }
  .contact-panel {
    padding: 80px var(--gutter);
  }
  .contact-form { grid-template-columns: 1fr; }
  .message-field { grid-column: auto; }

  .footer-inner,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom { padding-block: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-line i { animation: none; }
  .hero-media:hover > img,
  .photo-card:hover img { transform: none; }
}


/* ===========================================================
   RIBAI INTERNAL PAGES — LOCKED HOMEPAGE SYSTEM EXTENSION
   Single-column breadcrumb heroes; no homepage split-hero reuse.
   =========================================================== */
.desktop-nav a[aria-current="page"]:not(.nav-contact)::after { right: 0; }
.nav-contact[aria-current="page"] { background: var(--ink); color: white; }
.mobile-nav a[aria-current="page"] { color: var(--red); }
.footer-links a[aria-current="page"] { color: var(--red); }

.inner-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.inner-hero-shell {
  min-height: clamp(610px, 72vh, 820px);
  padding-block: clamp(68px, 7vw, 112px) clamp(64px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(70px, 8vw, 124px);
  color: #817d75;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.breadcrumb a { transition: color .2s ease; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb i { width: 28px; height: 1px; background: var(--line); }
.breadcrumb strong { color: var(--ink); font-weight: 650; }
.inner-hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 27px;
  color: #5b5751;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 650;
}
.inner-hero h1 {
  margin: 0;
  max-width: 1240px;
  font-size: clamp(62px, 7.1vw, 116px);
  line-height: .91;
  letter-spacing: -.064em;
  font-weight: 580;
}
.inner-hero h1 em { color: #7d7973; font-style: normal; font-weight: 490; }
.inner-hero-lede {
  max-width: 780px;
  margin: 38px 0 0;
  color: #4d4943;
  font-size: clamp(18px, 1.42vw, 22px);
  line-height: 1.58;
  letter-spacing: -.022em;
}
.inner-hero-foot {
  margin-top: clamp(70px, 8vw, 120px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #77736c;
  font-size: 9px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.inner-hero-foot span:first-child { color: var(--red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.editorial-media {
  position: relative;
  min-height: min(720px, 72vh);
  overflow: hidden;
  background: #171717;
  color: white;
}
.editorial-media > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(.24) contrast(1.1) brightness(.62);
  transform: scale(1.012);
  transition: transform 1.1s var(--ease);
}
.editorial-media:hover > img { transform: scale(1.035); }
.editorial-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.52), rgba(10,10,10,.08) 62%, rgba(10,10,10,.28)), linear-gradient(180deg, rgba(10,10,10,.08), rgba(10,10,10,.58));
}
.editorial-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  opacity: .28;
}
.editorial-media-inner {
  position: relative;
  z-index: 3;
  min-height: min(720px, 72vh);
  padding-block: 34px 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.media-technical-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #c4c2bd;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.media-technical-copy { max-width: 930px; }
.media-technical-copy h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(50px, 5.7vw, 92px);
  line-height: .93;
  letter-spacing: -.057em;
  font-weight: 550;
}
.media-technical-copy h2 span { color: #c4c1bb; font-weight: 460; }
.media-technical-copy p {
  max-width: 720px;
  margin: 28px 0 0;
  color: #dad8d3;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.58;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .5fr);
  gap: clamp(60px, 9vw, 145px);
  align-items: end;
  margin-bottom: 78px;
}
.split-heading > p {
  margin: 0 0 4px;
  color: #625e58;
  font-size: 16px;
  line-height: 1.7;
}
.section-dark .split-heading > p { color: #aaa9a5; }

.statement-list { border-top: 1px solid var(--line); }
.statement-row {
  display: grid;
  grid-template-columns: 78px minmax(0,.82fr) minmax(280px,1fr);
  gap: 28px;
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--line);
}
.statement-row .num { color:#99958d; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:5px; }
.statement-row h3 { margin:0; font-size:clamp(29px,2.6vw,43px); line-height:1.04; letter-spacing:-.04em; font-weight:550; }
.statement-row p { margin:1px 0 0; color:#66615b; font-size:14px; line-height:1.68; }
.section-dark .statement-list { border-color: var(--light-line); }
.section-dark .statement-row { border-color: var(--light-line); }
.section-dark .statement-row .num { color:#777774; }
.section-dark .statement-row p { color:#969591; }

.page-close { background: var(--warm); }
.page-close-grid { display:grid; grid-template-columns:1fr minmax(280px,.48fr); gap:clamp(70px,9vw,145px); align-items:end; }
.page-close p { max-width:760px; margin:32px 0 0; color:#5d5953; font-size:16px; line-height:1.7; }
.page-close-action { padding-top:8px; border-top:1px solid var(--line); }
.page-close-action p { margin:0 0 28px; color:#77736d; font-size:12px; line-height:1.6; }

@media (max-width: 1180px) {
  .inner-hero-shell { min-height: 650px; }
  .split-heading, .page-close-grid { grid-template-columns:1fr; gap:42px; }
}
@media (max-width: 820px) {
  .inner-hero-shell { min-height: 570px; padding-block: 54px 68px; }
  .breadcrumb { margin-bottom: 68px; }
  .inner-hero h1 { font-size: clamp(50px, 14vw, 72px); }
  .inner-hero-lede { margin-top: 28px; }
  .inner-hero-foot { margin-top: 64px; flex-direction:column; align-items:flex-start; gap:8px; }
  .editorial-media, .editorial-media-inner { min-height: 610px; }
  .media-technical-head { flex-direction:column; gap:8px; }
  .statement-row { grid-template-columns: 42px 1fr; gap:20px; }
  .statement-row p { grid-column: 2; }
}
@media (max-width: 520px) {
  .inner-hero-shell { min-height: 530px; }
  .breadcrumb { margin-bottom: 54px; }
  .inner-hero h1 { font-size: clamp(46px, 13.3vw, 62px); }
  .editorial-media, .editorial-media-inner { min-height: 560px; }
}


/* Problem page */
.problem-gap { background: var(--warm); }
.problem-evidence { display:grid; grid-template-columns:.76fr 1.24fr; gap:22px; align-items:stretch; }
.problem-photo { position:relative; min-height:610px; overflow:hidden; background:#1b1b1b; }
.problem-photo img { position:absolute; inset:0; height:100%; object-fit:cover; filter:saturate(.28) contrast(1.08) brightness(.72); }
.problem-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.68)); }
.problem-photo figcaption { position:absolute; z-index:2; left:26px; right:26px; bottom:24px; padding-top:15px; border-top:1px solid rgba(255,255,255,.42); color:#ddd9d3; font-size:11px; line-height:1.55; }
.problem-flow { background:var(--ink); color:white; }
.causality-map { display:grid; grid-template-columns:1fr 74px 1.12fr 74px 1fr; border-top:1px solid var(--light-line); border-bottom:1px solid var(--light-line); }
.causality-cell { min-height:300px; padding:30px 28px 34px; display:flex; flex-direction:column; }
.causality-cell.focus { background:#202020; border-left:1px solid var(--light-line); border-right:1px solid var(--light-line); }
.causality-cell small { color:#777774; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.causality-cell h3 { margin:auto 0 16px; font-size:clamp(29px,2.5vw,42px); line-height:1; letter-spacing:-.045em; font-weight:530; }
.causality-cell p { margin:0; color:#969591; font-size:13px; line-height:1.62; }
.causality-cell.focus h3 span { color:var(--red-soft); }
.flow-connector { position:relative; min-height:300px; }
.flow-connector i { position:absolute; left:12px; right:12px; top:50%; height:1px; background:#666662; }
.flow-connector i::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #aaa8a3; border-right:1px solid #aaa8a3; transform:rotate(45deg); }
.problem-middle { background:var(--paper); }
.middle-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(70px,9vw,150px); align-items:start; }
.middle-statement { position:sticky; top:130px; }
.middle-statement p { max-width:560px; margin:32px 0 0; color:#5e5a54; font-size:16px; line-height:1.7; }
.middle-list { border-top:1px solid var(--line); }
.middle-item { display:grid; grid-template-columns:74px 1fr; gap:24px; padding:36px 0 40px; border-bottom:1px solid var(--line); }
.middle-item span { color:#99958e; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:5px; }
.middle-item h3 { margin:0 0 13px; font-size:clamp(29px,2.5vw,42px); line-height:1.05; letter-spacing:-.04em; font-weight:550; }
.middle-item p { margin:0; max-width:650px; color:#66625c; font-size:14px; line-height:1.68; }
@media (max-width:1180px) { .problem-evidence,.middle-grid { grid-template-columns:1fr; } .problem-photo{min-height:540px;} .middle-statement{position:relative;top:auto;} .causality-map{grid-template-columns:1fr;} .flow-connector{min-height:64px;} .flow-connector i{left:50%;right:auto;top:10px;bottom:10px;width:1px;height:auto;} .flow-connector i::after{right:-3px;top:auto;bottom:0;transform:rotate(135deg);} }

/* Approach page */
.approach-principles { background:var(--ink); color:white; }
.approach-principles .section-index { margin-bottom:76px; }
.principle-stage { display:grid; grid-template-columns:.72fr 1.28fr; gap:50px; align-items:start; }
.principle-photo { position:sticky; top:120px; min-height:680px; overflow:hidden; background:#202020; }
.principle-photo img { position:absolute; inset:0; height:100%; object-fit:cover; filter:saturate(.22) contrast(1.1) brightness(.7); }
.principle-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.62)); }
.principle-photo .photo-index { position:absolute; z-index:2; left:20px; bottom:20px; color:#d4d2cc; font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; }
.principle-list { border-top:1px solid var(--light-line); }
.approach-principle { min-height:225px; display:grid; grid-template-columns:66px 1fr 28px; gap:24px; padding:38px 0; border-bottom:1px solid var(--light-line); }
.approach-principle .num { color:#777774; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:5px; }
.approach-principle h3 { margin:0 0 16px; font-size:clamp(29px,2.55vw,42px); line-height:1.06; letter-spacing:-.04em; font-weight:520; }
.approach-principle p { margin:0; max-width:720px; color:#9d9c98; font-size:15px; line-height:1.67; }
.approach-principle .arr { color:#6f6f6c; font-size:18px; }
.pilot-line { margin-top:60px; padding:20px 0; border-top:1px solid var(--light-line); display:grid; grid-template-columns:.55fr 1.45fr; gap:50px; align-items:center; }
.pilot-status { display:flex; align-items:center; gap:10px; color:#d0cec8; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.pilot-status i { width:7px; height:7px; background:var(--red-soft); box-shadow:0 0 0 7px rgba(191,76,86,.12); }
.pilot-line p { margin:0; color:#8c8b87; line-height:1.55; font-size:13px; }
.approach-process { background:var(--paper); }
.process-map { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.process-cell { min-height:390px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.process-cell .meta { color:#8e8a83; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.process-cell h3 { margin:auto 0 18px; font-size:clamp(32px,3vw,49px); line-height:1; letter-spacing:-.047em; font-weight:550; }
.process-cell p { margin:0; color:#66625c; font-size:14px; line-height:1.65; }
.process-cell.focus { background:var(--warm); border-top:3px solid var(--red); }
@media (max-width:1180px) { .principle-stage{grid-template-columns:1fr;} .principle-photo{position:relative;top:auto;min-height:590px;} .process-map{grid-template-columns:1fr;} }
@media (max-width:820px) { .approach-principle{grid-template-columns:42px 1fr;} .approach-principle .arr{display:none;} .pilot-line{grid-template-columns:1fr;gap:22px;} }

/* About page */
.about-story { background:var(--warm); }
.about-story-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(72px,8vw,120px); }
.about-story .about-rule { margin-top:46px; }
.about-story-lede { max-width:650px; margin:0; font-size:clamp(18px,1.5vw,23px); line-height:1.58; color:#4d4a44; letter-spacing:-.02em; }
.founder-block { border-top:1px solid var(--line); }
.founder-row { display:grid; grid-template-columns:100px minmax(300px,1fr) minmax(0,1.1fr); gap:30px; padding:35px 0 42px; border-bottom:1px solid var(--line); }
.founder-row > * { min-width:0; }
.founder-row .meta { color:#99958d; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:6px; }
.founder-row h3 { margin:0; font-size:clamp(31px,2.8vw,46px); line-height:1.03; letter-spacing:-.043em; font-weight:550; }
.founder-row p { margin:2px 0 0; color:#625e58; font-size:15px; line-height:1.7; }
.focus-section { background:var(--paper); }
.focus-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.focus-cell { min-height:350px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.focus-cell small { color:#8f8a83; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.focus-cell h3 { margin:auto 0 18px; font-size:clamp(30px,2.7vw,45px); line-height:1.02; letter-spacing:-.045em; font-weight:550; }
.focus-cell p { margin:0; color:#66625c; font-size:14px; line-height:1.65; }
.about-dark { background:var(--ink); color:white; }
.about-dark-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.48fr); gap:clamp(70px,9vw,145px); align-items:end; }
.about-dark p { margin:0; color:#aaa9a5; line-height:1.7; font-size:16px; }
.about-dark-note { padding-top:18px; border-top:1px solid var(--light-line); }
.about-dark-note strong { display:block; margin-bottom:12px; color:white; font-size:15px; font-weight:560; }
@media (max-width:1180px) { .about-story-grid,.about-dark-grid{grid-template-columns:1fr;gap:42px;} .focus-grid{grid-template-columns:1fr;} }
@media (max-width:820px) { .founder-row{grid-template-columns:1fr;gap:16px;} }

/* Contact page */
.contact-intro { background:var(--ink); color:white; }
.contact-intro-grid { display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); min-height:760px; }
.contact-image { position:relative; min-height:760px; overflow:hidden; background:#1d1d1d; }
.contact-image img { position:absolute; inset:0; height:100%; object-fit:cover; filter:saturate(.24) contrast(1.1) brightness(.61); }
.contact-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,15,15,.1),rgba(15,15,15,.48)),linear-gradient(180deg,transparent 50%,rgba(15,15,15,.58)); }
.contact-form-panel { padding:clamp(74px,7vw,110px) max(var(--gutter),calc((100vw - var(--max))/2)) clamp(74px,7vw,110px) clamp(54px,6vw,100px); display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:white; }
.contact-form-panel .section-index { margin-bottom:48px; }
.contact-form-panel h2 { margin:0 0 28px; max-width:850px; font-size:clamp(46px,4.7vw,75px); line-height:.98; letter-spacing:-.052em; font-weight:550; }
.contact-form-panel > p { max-width:680px; margin:0 0 42px; color:#aaa9a5; line-height:1.68; font-size:15px; }
.contact-form-panel .contact-form { max-width:760px; }
.contact-context { background:var(--warm); }
.contact-context-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(70px,9vw,145px); align-items:start; }
.contact-context-copy p { max-width:640px; margin:30px 0 0; color:#5d5953; font-size:16px; line-height:1.7; }
.contact-note-list { border-top:1px solid var(--line); }
.contact-note-row { display:grid; grid-template-columns:72px 1fr; gap:22px; padding:30px 0 34px; border-bottom:1px solid var(--line); }
.contact-note-row span { color:#99958d; font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:4px; }
.contact-note-row strong { display:block; margin-bottom:10px; font-size:18px; font-weight:570; }
.contact-note-row p { margin:0; color:#66625c; font-size:14px; line-height:1.65; }
@media(max-width:1180px) { .contact-intro-grid{grid-template-columns:1fr;} .contact-image{min-height:500px;} .contact-context-grid{grid-template-columns:1fr;gap:42px;} }
@media(max-width:820px) { .contact-image{min-height:400px;} .contact-form-panel{padding:80px var(--gutter);} }

/* WordPress menu markup: preserve the prototype's direct-link layout. */
.desktop-nav ul,
.mobile-nav ul,
.footer-links ul { display: contents; }
.desktop-nav li,
.mobile-nav li,
.footer-links li { list-style: none; }
.desktop-nav a:not(.nav-contact) { position: relative; padding-block: 8px; }
.desktop-nav a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--red);
  transition: right .3s var(--ease);
}
.desktop-nav a:not(.nav-contact):hover::after,
.desktop-nav a[aria-current="page"]:not(.nav-contact)::after { right: 0; }
.mobile-nav .nav-contact { display: block; padding: 0; border: 0; }
.mobile-nav .nav-contact span { display: none; }
.mobile-nav .nav-contact:hover { background: transparent; color: inherit; }

/* Fluent Forms: map the real form markup onto the approved RibAI form. */
.contact-form > .fluentform { grid-column: 1 / -1; }
.contact-form .frm-fluent-form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.contact-form .ff-el-group { margin: 0; }
.contact-form .ff-el-group:not(.ff_submit_btn_wrapper) {
  border-bottom: 1px solid rgba(255,255,255,.23);
  padding: 14px 0;
}
.contact-form .ff-el-input--label { margin: 0; }
.contact-form .ff-el-input--label label {
  display: block;
  margin: 0 0 8px;
  color: #777774;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.contact-form .ff-el-form-control,
.contact-form .ff-el-form-control:focus {
  width: 100%;
  min-height: 0;
  padding: 3px 0 6px;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  resize: vertical;
  background: transparent;
  color: white;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.contact-form .fluentform .ff-el-group { margin: 0 !important; }
.contact-form .fluentform .ff-el-input--label label {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
.contact-form .fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.23) !important;
}
.contact-form .fluentform .ff-el-form-control,
.contact-form .fluentform .ff-el-form-control:focus {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  color: white !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.contact-form .fluentform textarea.ff-el-form-control { min-height: 72px !important; }
.contact-form .message-field { grid-column: 1 / -1; }
.contact-form .ff_submit_btn_wrapper { margin-top: 28px; }
.contact-form .fluentform .ff_submit_btn_wrapper {
  margin-top: 38px !important;
}
.contact-form .ff-btn-submit.button {
  margin: 0;
  border: 1px solid white;
  border-radius: 0 !important;
  padding: 14px 18px;
  background: transparent;
  color: white;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
}
.contact-form .ff-btn-submit.button::after { content: "↗"; }
.contact-form .ff-btn-submit.button:hover,
.contact-form .ff-btn-submit.button:focus-visible {
  border-color: white;
  background: white;
  color: var(--ink);
}
.contact-form .error.text-danger,
.contact-form .ff-el-is-error .text-danger { color: #ffb4a9; font-size: 11px; }
.contact-form .ff-el-is-error .ff-el-form-control { border: 0; box-shadow: none; }
.contact-form-fallback { display: block; }
.contact-form-fallback p { margin-bottom: 20px; color: #aaa9a5; }

@media (max-width: 820px) {
  .contact-form .frm-fluent-form fieldset { grid-template-columns: 1fr; }
  .contact-form .message-field { grid-column: auto; }
}