/* =========================================================================
   Orix AI — multi-page site
   Grown VERBATIM from viz/proxel-v2/styles.css (the proven Cleo-cloned kit).
   Every token traces to design/brands/proxel.md + its Orix extension.
   Fonts: Geist Sans + Geist Mono (free OFL twins, kit substitution flag).
   ========================================================================= */

:root {
  /* ---- Palette (kit: "Palette (warm)") ---- */
  --canvas:        #ffffff;   /* kit: page */
  --surface:       #f8f6f2;   /* kit: warm off-white band */
  --surface-cream: #f3e9e3;   /* kit: cream tint */
  --surface-peach: #fff3eb;   /* kit: peach tint */
  --ink:           #47201c;   /* kit: oxblood, primary text/links/theme */
  --ink-60:        #47201c66; /* kit: muted text + two-tone phrase 2 */
  --ink-20:        #47201c33; /* kit: hairline borders + glass fill */
  --ink-10:        #47201c1a; /* kit: faint hairline */
  --accent:        #ff8e3e;   /* kit: peach, sweep target + highlights */
  --accent-soft:   #ffb883;   /* kit: accent-soft */
  --accent-2:      #c2542b;   /* kit ext (Orix): deeper terracotta, 2nd sweep stop */
  --taupe:         #ac9b98;   /* kit: image-card placeholder + long-shadow tint */
  --espresso:      #291210;   /* kit: footer slab near-black */
  --brown:         #5a322d;   /* kit: secondary brown */
  --on-dark:       #ffffff;   /* kit: text-on-dark */
  --sky-1:         #1e2e3c;   /* kit: hero open gradient (stormy) start */
  --sky-2:         #24313e;   /* kit: hero open gradient (stormy) end */

  /* glass fills (kit: "Buttons") */
  --glass-light:        #47201c33;
  --glass-light-hover:  #47201c66;
  --glass-light-border: #f8f6f21a;
  --glass-dark:         #ffffff33;
  --glass-dark-hover:   #ffffff4d;
  --glass-dark-border:  #ffffff4d;

  /* ---- Radius (kit: "Radius system") ---- */
  --r-small:  16px;
  --r-medium: 24px;
  --r-large:  48px;
  --r-card:   48px;
  --r-chip:   20px;

  /* ---- Long + floating shadows (kit: taupe-tinted, never neutral) ---- */
  --shadow-long:  -40px 90px 90px #ac9b9866;
  --shadow-tight: -20px 30px 60px #ac9b9866;
  --shadow-float:
     0 2px 6px #47201c1f,
     0 18px 36px -12px #5a322d33,
     0 44px 80px -28px #ac9b9966;
  --shadow-float-lift:
     0 4px 10px #47201c24,
     0 26px 48px -14px #5a322d3d,
     0 60px 110px -30px #ac9b99a6;

  /* ---- Spacing ladder (kit: 4px base) ---- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px;
  --sp-9: 72px; --sp-10: 80px; --sp-11: 88px;

  /* ---- Layout (kit) ---- */
  --maxw: 1440px;
  --gutter-outer: 16px;
  --gutter-inner: 16px;
  --band-inset: 12px;

  /* ---- Fluid type drivers (kit: mobile breakpoint) ---- */
  --target-window-width: 375;
  --scale-modifier: .2;

  /* ---- Easing (kit: Motion) ---- */
  --ease-calm:  cubic-bezier(.75,0,.25,1);
  --ease-over:  cubic-bezier(.17,.89,.32,1.27);

  --type-eyebrow: 12;
  --type-body:    16;
  --type-h:       32;
}

@media (min-width: 768px) {
  :root {
    --target-window-width: 768;
    --scale-modifier: .2;
    --type-h: 40;
    --gutter-outer: 24px;
    --gutter-inner: 20px;
    --band-inset: 20px;
    --r-medium: 32px;
    --r-large: 72px;
    --r-card: 64px;
  }
}
@media (min-width: 1280px) {
  :root {
    --target-window-width: 1440;
    --scale-modifier: .4;
    --type-h: 48;
    --gutter-outer: 32px;
    --gutter-inner: 24px;
    --band-inset: 24px;
    --r-large: 88px;
    --r-card: 88px;
    --r-medium: 40px;
  }
}

/* THE fluid-type formula (kit: signature; NOT clamp) */
.fluid {
  font-size: calc(
    (var(--fs) * 1px)
    - (var(--fs) * var(--scale-modifier) * 1px)
    + (100vw * var(--fs) / var(--target-window-width) * var(--scale-modifier))
  );
}

/* =========================================================================
   Reset + base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Lenis owns smooth-scroll; gate native smooth behind :not(.lenis) (kit rule) */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
html:not(.lenis) { scroll-behavior: smooth; }
/* Lenis CSS boilerplate (clone-pipeline: never ship scroll-behavior:smooth alongside Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: "Geist Sans", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  line-height: 1.4;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.carousel-track { scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.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;
}

/* =========================================================================
   Type roles (kit)
   ========================================================================= */
.display {
  font-family: "Geist Sans", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
}
.headline {
  font-size: calc(
    (var(--type-h) * 1px)
    - (var(--type-h) * var(--scale-modifier) * 1px)
    + (100vw * var(--type-h) / var(--target-window-width) * var(--scale-modifier))
  );
  line-height: 1.125;
}
@media (min-width: 1280px) { .headline { line-height: 1.083; } }

.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: calc(
    (var(--type-eyebrow) * 1px)
    - (var(--type-eyebrow) * var(--scale-modifier) * 1px)
    + (100vw * var(--type-eyebrow) / var(--target-window-width) * var(--scale-modifier))
  );
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}
.eyebrow .bullet {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
  flex: 0 0 auto;
}
.eyebrow-light { color: var(--on-dark); }
.eyebrow-light .bullet { background: var(--accent); }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center-head { max-width: 20ch; margin-inline: auto; }

/* =========================================================================
   Bands (kit: full-bleed floating colored bands w/ asymmetric radius)
   ========================================================================= */
.band {
  margin: var(--band-inset);
  padding: var(--sp-10) 0 var(--sp-7);
  border-radius: var(--r-large);
  overflow: clip;
}
@media (min-width: 1280px) { .band { padding: 120px 0 var(--sp-10); } }
.band-canvas   { background: var(--canvas); }
.band-cream    { background: var(--surface); }
.band-espresso { background: var(--espresso); color: var(--on-dark); }
.band-espresso .eyebrow { color: var(--on-dark); }

.band-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter-outer);
}

/* the asymmetric chat-bubble corner (kit signature) */
.sq-bl { border-bottom-left-radius: 0 !important; }
.sq-br { border-bottom-right-radius: 0 !important; }

/* =========================================================================
   Header (multi-page nav + hamburger)
   ========================================================================= */
.site-head {
  position: sticky; top: 0; z-index: 90;
  backdrop-filter: blur(8px);          /* modest blur (Lenis-smoothness rule) */
  background: #ffffffcc;
  transition: background .3s var(--ease-calm), box-shadow .3s var(--ease-calm);
}
.site-head.scrolled { background: #fffffff2; box-shadow: 0 1px 0 var(--ink-20); }
.head-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 12px var(--gutter-outer);
  display: flex; align-items: center; gap: var(--sp-3);
}
.wordmark { margin-right: auto; display: inline-flex; }
.wordmark-chip {
  display: inline-block;
  font-family: "Geist Mono", monospace;
  font-weight: 500; font-size: 14px;
  letter-spacing: .04em;
  padding: 8px 16px;
  border: 1px solid var(--ink-20);
  border-radius: var(--r-chip);
  color: var(--ink);
}
.head-nav { display: none; gap: var(--sp-3); align-items: center; }
.head-nav a {
  position: relative;
  font-family: "Geist Mono", monospace; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-60);
  transition: color .2s var(--ease-calm);
  padding: 4px 0;
}
.head-nav a::after {        /* catalog 158-style expand-from-center underline */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s var(--ease-calm);
}
.head-nav a:hover, .head-nav a[aria-current="page"] { color: var(--ink); }
.head-nav a:hover::after, .head-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 980px) { .head-nav { display: inline-flex; } }
.head-cta { display: none; }
@media (min-width: 980px) { .head-cta { display: inline-flex; } }

/* hamburger (catalog 112 morph) + slide panel (catalog 192) */
.burger {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--ink-20); border-radius: 999px; background: var(--glass-light);
}
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease-calm), opacity .2s var(--ease-calm); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 980px) { .burger { display: none; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--espresso); color: var(--on-dark);
  transform: translateY(-100%);
  transition: transform .5s var(--ease-calm);
  display: flex; flex-direction: column;
  padding: 96px var(--gutter-outer) var(--sp-8);
  gap: var(--sp-2);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a {
  color: var(--on-dark);
  font-family: "Geist Sans", sans-serif; font-weight: 300;
  font-size: 30px; line-height: 1.3;
  padding: 10px 0; border-bottom: 1px solid #ffffff1a;
}
.mobile-nav a[aria-current="page"] { color: var(--accent); }
.mobile-nav .mn-cta { margin-top: var(--sp-4); }
.mobile-nav-close {
  position: absolute; top: 22px; right: var(--gutter-outer);
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid #ffffff33; color: #fff; font-size: 22px;
  display: grid; place-items: center;
}

/* =========================================================================
   Buttons (kit: glass translucent pills)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; white-space: nowrap;
  font-family: "Geist Sans", sans-serif; font-weight: 400; font-size: 16px;
  min-height: 52px; padding: 0 36px;
  border-radius: 999px;
  transition: background .2s, border-color .2s linear, transform .25s var(--ease-calm);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-glass {
  background: var(--glass-light);
  border: 1px solid var(--glass-light-border);
  border-bottom: none;
  color: var(--ink);
}
.btn-glass:hover { background: var(--glass-light-hover); border-color: var(--ink-20); color: #fff; }
.btn-glass-dark {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-border);
  border-bottom: none;
  color: var(--on-dark);
}
.btn-glass-dark:hover { background: var(--glass-dark-hover); border-color: #ffffff80; }
.btn-accent {                      /* one solid accent CTA for the primary action */
  background: var(--accent); color: #2b110e; font-weight: 500;
  border: 1px solid var(--accent);
}
.btn-accent:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

/* =========================================================================
   HERO — TYPE-LED editorial (kit verbatim; the headline IS the layout)
   ========================================================================= */
.hero {
  position: relative;
  margin: var(--band-inset);
  border-radius: var(--r-large);
  overflow: clip;
  background: var(--surface);
  padding: 124px 0 var(--sp-10);
  isolation: isolate;
}
.hero-sky {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #16242fcc 0%, #1e2e3c66 54%, transparent 88%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, #2c2118 100%);
}
/* home hero carries the video; the video sits behind the scrim */
.hero-video {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s var(--ease-calm);
}
.hero-video.is-ready { opacity: .55; }
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter-outer);
}
.hero-tag { margin: 0 0 var(--sp-2); }

.hero-type {
  position: relative; z-index: 2;
  color: var(--on-dark);
  line-height: .92;
  margin: 0;
  text-shadow: 0 1px 24px #1d0f0c4d;
}
.ht-mega {
  --fz: 80;
  display: block; font-weight: 300;
  font-size: calc((var(--fz)*1px) - (var(--fz)*var(--scale-modifier)*1px) + (100vw*var(--fz)/var(--target-window-width)*var(--scale-modifier)));
  line-height: .84; letter-spacing: -.02em; margin-left: -.04em;
}
.ht-line {
  --fz: 28;
  display: inline-block; font-weight: 300;
  font-size: calc((var(--fz)*1px) - (var(--fz)*var(--scale-modifier)*1px) + (100vw*var(--fz)/var(--target-window-width)*var(--scale-modifier)));
  color: #ffffffcc; line-height: 1.05; vertical-align: baseline;
}
.ht-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .22em; }
.ht-row-1 { margin-top: .04em; }
.ht-row-2 { margin-top: .02em; }
.ht-emph {
  --fz: 52;
  display: inline-block; font-weight: 300;
  font-size: calc((var(--fz)*1px) - (var(--fz)*var(--scale-modifier)*1px) + (100vw*var(--fz)/var(--target-window-width)*var(--scale-modifier)));
  line-height: .96; letter-spacing: -.012em; color: var(--on-dark);
}
.ht-sweep {
  --fz: 40;
  display: block; font-weight: 300;
  font-size: calc((var(--fz)*1px) - (var(--fz)*var(--scale-modifier)*1px) + (100vw*var(--fz)/var(--target-window-width)*var(--scale-modifier)));
  line-height: 1; margin-top: .1em; letter-spacing: -.012em;
}

.hero-foot { position: relative; z-index: 2; margin-top: var(--sp-7); max-width: 46ch; }
.hero-lede {
  color: #f3e9e3e6; font-weight: 400;
  font-size: calc((var(--type-body)*1px) - (var(--type-body)*var(--scale-modifier)*1px) + (100vw*var(--type-body)/var(--target-window-width)*var(--scale-modifier)));
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

/* focal chat device, woven across the type (asymmetric corner) */
.hero-device { position: relative; z-index: 3; margin: var(--sp-6) auto 0; width: min(340px, 84vw); }
.device-glow {
  position: absolute; inset: -14% -24% -8% -24%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, var(--accent-soft) 0%, transparent 70%);
  filter: blur(46px); opacity: .6;
}
.device-frame {
  background: #ffffff; border: 1px solid var(--ink-20);
  border-radius: 44px 44px 44px 0;
  box-shadow: var(--shadow-float); padding: 10px; position: relative;
}
.device-notch { width: 46%; height: 6px; border-radius: 999px; background: var(--ink-20); margin: 4px auto 8px; }
.device-screen {
  background: var(--surface); border-radius: 38px 38px 38px 0;
  padding: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 10px; min-height: 380px;
}
.chat-top { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink-20); }
.chat-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.chat-name { font-family: "Geist Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.chat-time { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--ink-60); }
.chat-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.msg { font-size: 13.5px; line-height: 1.35; padding: 9px 13px; max-width: 86%; }
.msg-in { align-self: flex-start; background: #ffffff; color: var(--ink); border: 1px solid var(--ink-20); border-radius: 18px 18px 18px 4px; }
.msg-out { align-self: flex-end; background: var(--surface-peach); color: var(--ink); border-radius: 18px 18px 4px 18px; }
.chat-foot { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: #fff; border: 1px solid var(--ink-20); border-radius: 999px; }
.chat-input { font-size: 12.5px; color: var(--ink-60); flex: 1; }
.chat-send { width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 16px; line-height: 1; }

/* per-word KINETIC entrance on the big headline (kit) */
.hero-type .ht-mega, .hero-type .ht-line, .hero-type .ht-emph, .hero-type .ht-sweep {
  opacity: 0; transform: translateY(.22em); filter: blur(10px);
  transition: opacity .8s var(--ease-calm), transform .9s var(--ease-over), filter .8s var(--ease-calm);
  transition-delay: var(--hdelay, 0s);
}
.hero-type.is-in .ht-mega, .hero-type.is-in .ht-line, .hero-type.is-in .ht-emph, .hero-type.is-in .ht-sweep {
  opacity: 1; transform: none; filter: blur(0);
}
.hero-type .word { opacity: 1 !important; filter: none !important; transform: none !important; }
.hero-type .ht-mega   { --hdelay: .05s; }
.hero-type .ht-line-1 { --hdelay: .34s; }
.hero-type .ht-emph-1 { --hdelay: .42s; }
.hero-type .ht-line-2 { --hdelay: .52s; }
.hero-type .ht-emph-2 { --hdelay: .58s; }
.hero-type .ht-sweep  { --hdelay: .7s; }
.no-js .hero-type .ht-mega, .no-js .hero-type .ht-line, .no-js .hero-type .ht-emph, .no-js .hero-type .ht-sweep,
.reveal-failsafe .hero-type .ht-mega, .reveal-failsafe .hero-type .ht-line, .reveal-failsafe .hero-type .ht-emph, .reveal-failsafe .hero-type .ht-sweep {
  opacity: 1 !important; transform: none !important; filter: none !important;
}

@media (min-width: 768px) {
  .hero { padding: 150px 0 var(--sp-11); }
  .hero-type { max-width: none; }
  .ht-mega   { --fz: 150; }
  .ht-line   { --fz: 38; }
  .ht-emph   { --fz: 86; }
  .ht-sweep  { --fz: 64; }
  .hero-device { position: absolute; top: 96px; right: calc(var(--gutter-outer) + 1vw); margin: 0; width: min(330px, 34vw); z-index: 3; }
  .hero-foot { max-width: 40ch; }
}
@media (min-width: 1280px) {
  .hero { padding: 156px 0 var(--sp-10); }
  .ht-mega   { --fz: 200; letter-spacing: -.03em; }
  .ht-line   { --fz: 44; }
  .ht-emph   { --fz: 112; }
  .ht-sweep  { --fz: 80; }
  .hero-device { top: 150px; right: max(var(--gutter-outer), 3.5vw); width: min(400px, 31vw); }
  .hero-foot { margin-top: var(--sp-6); max-width: 38ch; }
}
@media (min-width: 1600px) { .ht-mega { --fz: 244; } .ht-emph { --fz: 128; } }

/* ---- INNER-PAGE hero variant: split copy + media frame, distinct from home ----
   Same grammar (warm sky, sweep, glass pills, asymmetric corner) but a smaller
   headline beside a real photo frame, so it reads as secondary to the home hero. */
.hero-inner-page { padding: 116px 0 var(--sp-8); }
@media (min-width: 1280px) { .hero-inner-page { padding: 140px 0 var(--sp-9); } }
.hero-split { position: relative; z-index: 2; display: grid; gap: var(--sp-6); align-items: center; }
.hero-split .hero-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-split h1.display {
  --fz: 46; color: var(--on-dark); line-height: 1.02; letter-spacing: -.01em;
  font-size: calc((var(--fz)*1px) - (var(--fz)*var(--scale-modifier)*1px) + (100vw*var(--fz)/var(--target-window-width)*var(--scale-modifier)));
  max-width: 16ch;
}
.hero-split .hero-lede { color: #f3e9e3e6; max-width: 48ch; }
.hero-media-frame {
  position: relative; border-radius: var(--r-card); overflow: clip;
  box-shadow: var(--shadow-float-lift); background: var(--taupe);
  aspect-ratio: 1400 / 934; isolation: isolate;
}
.hero-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: sepia(.18) saturate(1.12) contrast(1.02); }
.hero-media-frame .img-grade { position: absolute; inset: 0; background: linear-gradient(180deg, #ff8e3e14 0%, transparent 40%, #291210a6 100%); pointer-events: none; }
@media (min-width: 768px) {
  .hero-split h1.display { --fz: 60; }
}
@media (min-width: 980px) {
  .hero-split { grid-template-columns: 1.05fr .95fr; gap: var(--sp-9); }
  .hero-split h1.display { --fz: 80; }
}

/* scroll cue (catalog 184 style) */
.scroll-cue {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 12px;
  width: fit-content; margin: var(--sp-7) auto 0; color: #f3e9e3cc;
}
.scroll-cue-label { font-family: "Geist Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; }
.scroll-cue-track { position: relative; width: 22px; height: 36px; border-radius: 999px; border: 1px solid #f3e9e359; display: block; }
.scroll-cue-dot { position: absolute; left: 50%; top: 8px; width: 4px; height: 4px; border-radius: 999px; background: var(--accent); transform: translateX(-50%); animation: scroll-cue-fall 1.9s var(--ease-calm) infinite; }
@keyframes scroll-cue-fall { 0%{transform:translateX(-50%) translateY(0);opacity:0;} 18%{opacity:1;} 72%{opacity:1;} 100%{transform:translateX(-50%) translateY(16px);opacity:0;} }
@media (min-width: 768px) { .scroll-cue { position: absolute; left: var(--gutter-outer); bottom: var(--sp-6); margin: 0; } }

/* =========================================================================
   Two-tone <mark> sweep (kit Motion)
   ========================================================================= */
mark.sweep {
  background-color: transparent; -webkit-text-fill-color: transparent; color: transparent;
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 25%, var(--accent) 66%, var(--accent) 100%);
  background-size: 220% 100%; background-position-x: 100%;
  -webkit-background-clip: text; background-clip: text;
}
.hero-type mark.sweep, .cta-head mark.sweep, .hero-split mark.sweep { color: var(--on-dark); }
.js mark.sweep { animation: gradient-slide 1.2s var(--ease-calm) 1.6s both; }
.js .ht-sweep.gtp { animation: none; }
@keyframes gradient-slide { 0%{background-position-x:100%;} 100%{background-position-x:0%;} }
.no-js mark.sweep, .reveal-failsafe mark.sweep { -webkit-text-fill-color: var(--accent); color: var(--accent); background: none; opacity: .9; }

/* =========================================================================
   Reveals (kit Motion: blur-up + per-word split)
   ========================================================================= */
.reveal { opacity: 0; filter: blur(6px); transition: opacity .66s var(--ease-calm), filter .66s var(--ease-calm); transition-delay: var(--delay, 0s); }
.reveal.is-in { opacity: 1; filter: blur(0); }
.word { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(.12em); transition: opacity .6s var(--ease-calm), filter .6s var(--ease-calm), transform .6s var(--ease-calm); transition-delay: var(--wdelay, 0s); }
.word.is-in { opacity: 1; filter: blur(0); transform: none; }
.word-space { display: inline-block; width: .26em; }
mark.sweep .word { opacity: 1; filter: none; transform: none; }
.no-js .reveal, .reveal-failsafe .reveal { opacity: 1 !important; filter: none !important; }
.no-js .word, .reveal-failsafe .word { opacity: 1 !important; filter: none !important; transform: none !important; }

/* =========================================================================
   Breather / value headline
   ========================================================================= */
.breather .band-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.breather-body { max-width: 54ch; color: var(--ink-60); font-size: 17px; }
.band-espresso .breather-body { color: #ffffffb3; }

/* =========================================================================
   Image cards (kit: big borderless cards, cover, white overlay)
   ========================================================================= */
.img-card { position: relative; border-radius: var(--r-card); overflow: clip; background: var(--taupe); box-shadow: var(--shadow-float-lift); isolation: isolate; transform: translateZ(0); }
.img-card img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(1.12) contrast(1.02); }
.img-grade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #ff8e3e1a 0%, transparent 28%, #291210b3 78%, #1d0f0ce6 100%); pointer-events: none; }
.img-overlay { position: absolute; z-index: 2; left: 0; bottom: 0; padding: var(--sp-5); color: var(--on-dark); }
.img-head { color: var(--on-dark); font-size: calc((24px) - (24px*var(--scale-modifier)) + (100vw*24/var(--target-window-width)*var(--scale-modifier))); line-height: 1.12; margin-top: 12px; max-width: 16ch; }
.hl-grid { display: grid; gap: var(--sp-3); }
.img-card-tall { min-height: 420px; }
.hl-stack { display: grid; gap: var(--sp-3); }
.hl-stack .img-card { min-height: 200px; }
@media (min-width: 768px) {
  .hl-grid { grid-template-columns: 1fr 1fr; align-items: stretch; grid-auto-rows: minmax(620px, auto); }
  .img-card-tall { min-height: 0; height: 100%; }
  .hl-stack { grid-auto-rows: 1fr; }
  .hl-stack .img-card { min-height: 0; }
}

/* =========================================================================
   Eyebrow feature blocks (kit)
   ========================================================================= */
.feature .feature-row { display: grid; gap: var(--sp-6); align-items: center; }
.feature-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-copy .headline { max-width: 18ch; }
.feature-body { color: var(--ink-60); max-width: 46ch; font-size: 17px; }
.band-espresso .feature-body { color: #ffffffb3; }
.feature-media { min-height: 320px; }
.feature-row.reverse .feature-copy { order: 2; }
@media (min-width: 768px) {
  .feature .feature-row { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .feature-media { min-height: 480px; }
  .feature-row.reverse .feature-copy { order: 0; }
  .feature-row.reverse .feature-media { order: -1; }
}

/* =========================================================================
   Types / perspective curve carousel (kit + catalog 301)
   ========================================================================= */
.types .center { margin-bottom: var(--sp-8); }
.type-card .type-head { font-size: 26px; line-height: 1.1; margin-top: 4px; }
.type-card .type-body { color: var(--ink-60); font-size: 15.5px; margin-top: auto; }

.car-btn {
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid var(--ink-20); background: var(--glass-light); border-bottom: none;
  color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .2s linear, transform .2s var(--ease-calm);
}
.car-btn:hover { background: var(--glass-light-hover); color: #fff; transform: translateY(-2px); }

/* =========================================================================
   Layer cards (the 4-layer model) — bento, one panel dominates
   ========================================================================= */
.layer-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
.layer-card {
  position: relative; background: var(--surface-cream); border-radius: var(--r-medium);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-float); overflow: clip;
}
.layer-card .layer-no { font-family: "Geist Mono", monospace; font-size: 13px; color: var(--accent-2); font-weight: 500; letter-spacing: .04em; }
.layer-card h3 { font-size: 23px; line-height: 1.12; }
.layer-card p { color: var(--ink-60); font-size: 15.5px; }
.layer-card.lead { background: var(--espresso); color: var(--on-dark); }
.layer-card.lead h3 { color: var(--on-dark); }
.layer-card.lead p { color: #ffffffb3; }
.layer-card.lead .layer-no { color: var(--accent); }
@media (min-width: 768px) {
  .layer-grid { grid-template-columns: 1fr 1fr; }
  .layer-card.lead { grid-row: span 2; }
}
@media (min-width: 1100px) { .layer-grid { grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 1fr; } .layer-card.lead { grid-row: span 2; } }

/* =========================================================================
   Service feature list rows (numbered service items on service pages)
   ========================================================================= */
.svc-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.svc-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  background: var(--canvas); border-radius: var(--r-medium); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-float);
}
.band-cream .svc-row { background: var(--canvas); }
.svc-row .svc-no { font-family: "Geist Mono", monospace; font-size: 14px; color: var(--accent); font-weight: 500; padding-top: 3px; }
.svc-row h3 { font-size: 21px; line-height: 1.15; }
.svc-row p { color: var(--ink-60); font-size: 15.5px; margin-top: 6px; max-width: 60ch; }

/* =========================================================================
   Stat band (honest, the company's own claimed numbers; count-up via catalog 152)
   ========================================================================= */
.stat-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .stat-num { font-family: "Geist Sans", sans-serif; font-weight: 300; font-size: 52px; line-height: 1; color: var(--accent); }
.band-espresso .stat .stat-num { color: var(--accent); }
.stat .stat-label { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; color: var(--ink-60); }
.band-espresso .stat .stat-label { color: #ffffffb3; }
.stat .stat-note { color: var(--ink-60); font-size: 13px; }
.band-espresso .stat .stat-note { color: #ffffff80; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .stat .stat-num { font-size: 68px; } }

/* =========================================================================
   Trust ticker rail (catalog 091)
   ========================================================================= */
.trust .eyebrow { margin-bottom: 0; }
.trust-card { background: var(--canvas); border-radius: var(--r-medium); padding: var(--sp-5); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 10px; }
.trust-key { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 500; color: var(--ink); }
.trust-val { color: var(--ink-60); font-size: 15.5px; line-height: 1.4; }
.trust-rail {
  position: relative; width: 100%; overflow: hidden; margin-top: var(--sp-4);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.trust-rail.dragging { cursor: grabbing; }
.trust-track { display: flex; gap: var(--sp-3); width: max-content; will-change: transform; padding-inline: var(--gutter-outer); }
.trust-rail .trust-card { flex: 0 0 auto; width: 320px; }
.no-js .trust-rail, .trust-rail.static { overflow: visible; -webkit-mask-image: none; mask-image: none; cursor: default; }
.no-js .trust-rail .trust-track, .trust-rail.static .trust-track { flex-wrap: wrap; width: auto; max-width: var(--maxw); margin-inline: auto; justify-content: center; transform: none !important; }
.no-js .trust-rail .trust-card, .trust-rail.static .trust-card { width: min(320px, 100%); }

/* =========================================================================
   Logo marquee (clients claimed; honest "trusted by" wordmark strip, catalog 127)
   ========================================================================= */
.logo-rail { position: relative; width: 100%; overflow: hidden; margin-top: var(--sp-5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.logo-track { display: flex; gap: var(--sp-6); width: max-content; align-items: center; will-change: transform; padding-inline: var(--gutter-outer); }
.logo-chip { flex: 0 0 auto; font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--ink-60); padding: 12px 22px; border: 1px solid var(--ink-20); border-radius: var(--r-chip); white-space: nowrap; }
.band-espresso .logo-chip { color: #ffffffcc; border-color: #ffffff2e; }
.no-js .logo-rail { -webkit-mask-image: none; mask-image: none; }
.no-js .logo-track { flex-wrap: wrap; width: auto; justify-content: center; }

/* =========================================================================
   Process steps (kit)
   ========================================================================= */
.process .center { margin-bottom: var(--sp-8); }
.step-grid { display: grid; gap: var(--sp-3); }
.step-card { background: var(--surface); border-radius: var(--r-medium); padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; }
.band-canvas .step-card { background: var(--surface); }
.step-no { font-family: "Geist Mono", monospace; font-size: 14px; color: var(--accent); font-weight: 500; }
.step-head { font-size: 22px; line-height: 1.12; }
.step-body { color: var(--ink-60); font-size: 15.5px; }
@media (min-width: 768px) { .step-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   Work / portfolio grid (hover-blur reveal, catalog 171/094 style)
   ========================================================================= */
.work-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
.work-card { position: relative; border-radius: var(--r-card); overflow: clip; background: var(--taupe); box-shadow: var(--shadow-float-lift); min-height: 300px; isolation: isolate; display: block; }
.work-card img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(1.12) contrast(1.02); transition: transform .6s var(--ease-calm), filter .5s var(--ease-calm); }
.work-card:hover img { transform: scale(1.05); }
.work-card .img-grade { background: linear-gradient(180deg, #ff8e3e14 0%, transparent 34%, #291210cc 82%, #1d0f0cf2 100%); }
.work-meta { position: absolute; z-index: 2; left: 0; bottom: 0; padding: var(--sp-5); color: var(--on-dark); }
.work-meta .work-name { font-family: "Geist Sans", sans-serif; font-weight: 300; font-size: 26px; line-height: 1.1; }
.work-meta .work-tags { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: #ffd9bd; margin-top: 8px; }
.work-card-tall { min-height: 360px; }
@media (min-width: 768px) { .work-grid { grid-template-columns: 1fr 1fr; } .work-card-tall { grid-row: span 2; min-height: 100%; } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* =========================================================================
   Testimonials (the company's OWN published reviews; honest, attributed)
   ========================================================================= */
.quote-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.quote-card { background: var(--canvas); border-radius: var(--r-medium); padding: var(--sp-5); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: var(--sp-3); }
.quote-card .quote-body { font-size: 16px; line-height: 1.5; color: var(--ink); }
.quote-card .quote-who { font-family: "Geist Mono", monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); }
.quote-card .quote-who b { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   Dark CTA band (kit)
   ========================================================================= */
.cta .band-inner { display: flex; flex-direction: column; gap: var(--sp-3); }
.cta-head { color: var(--on-dark); max-width: 18ch; }
.cta-body { color: #ffffffb3; max-width: 48ch; font-size: 17px; }

/* =========================================================================
   FAQ accordion (kit)
   ========================================================================= */
.faq-inner { max-width: 820px; }
.faq .center { margin-bottom: var(--sp-7); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item { background: var(--canvas); border-radius: var(--r-medium); overflow: clip; }
.faq-q { width: 100%; display: flex; align-items: center; gap: var(--sp-3); text-align: left; padding: var(--sp-3) var(--sp-4); font-size: 17px; font-weight: 400; color: var(--ink); }
.faq-q > span:first-child { flex: 1; }
.faq-toggle { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--glass-light); border: 1px solid var(--ink-20); border-bottom: none; transition: background .2s linear, transform .3s var(--ease-calm); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); transition: opacity .25s var(--ease-calm), transform .25s var(--ease-calm); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-toggle { background: var(--accent); }
.faq-item.open .faq-toggle::before, .faq-item.open .faq-toggle::after { background: #fff; }
.faq-item.open .faq-toggle::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-calm); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a > div { margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-4); background: var(--surface-cream); border-radius: var(--r-small); color: var(--ink-60); font-size: 15.5px; line-height: 1.45; }

/* =========================================================================
   Contact form
   ========================================================================= */
.contact-grid { display: grid; gap: var(--sp-6); }
.contact-aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-line { display: flex; flex-direction: column; gap: 4px; }
.contact-line .cl-label { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--ink-60); }
.contact-line a, .contact-line span { font-size: 18px; color: var(--ink); }
.contact-line a:hover { color: var(--accent-2); }
.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--ink-60); }
.field input, .field textarea, .field select {
  font-family: "Geist Sans", sans-serif; font-size: 16px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--ink-20); border-radius: var(--r-small);
  padding: 14px 16px; width: 100%; transition: border-color .2s var(--ease-calm), box-shadow .2s var(--ease-calm);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #ff8e3e26; }
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 13px; color: var(--ink-60); }
.form-ok { display: none; background: var(--surface-cream); border-radius: var(--r-small); padding: var(--sp-4); color: var(--ink); }
.form.sent .form-ok { display: block; }
.form.sent .form-fields { display: none; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .8fr 1.2fr; gap: var(--sp-9); } }

/* =========================================================================
   Footer slab (kit)
   ========================================================================= */
.footer { margin-bottom: var(--band-inset); }
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-8); }
.footer-top { display: flex; flex-direction: column; gap: var(--sp-3); }
.wordmark-chip-dark { color: var(--on-dark); border-color: #ffffff33; align-self: flex-start; }
.footer-tag { color: var(--on-dark); font-size: 24px; line-height: 1.18; max-width: 20ch; }
.footer-cols { display: grid; gap: var(--sp-6); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col .eyebrow { margin-bottom: 6px; }
.footer-link { color: var(--on-dark); font-size: 16px; transition: color .2s linear; }
.footer-link:hover { color: var(--accent); }
.footer-line { color: #ffffffb3; font-size: 15px; }
.footer-base { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; padding-top: var(--sp-5); border-top: 1px solid #ffffff1a; }
.footer-base .footer-line { font-family: "Geist Mono", monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-tag { font-size: 32px; } }

/* =========================================================================
   Reduced motion (pass 1)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal, .word { transition: none; opacity: 1; filter: none; transform: none; }
  .js mark.sweep { animation: none; -webkit-text-fill-color: var(--accent); color: var(--accent); background: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   ============================  PASS 2 (catalog components)  ==============
   ========================================================================= */

/* ---- FIXED ANIMATED GROUND (catalog 002 Warp), warm preset ---- */
.warp-ground {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 18% 12%, #ff8e3e33 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 90%, #47201c40 0%, transparent 60%),
    linear-gradient(160deg, #2b110e 0%, #5a322d 30%, #ff8e3e 66%, #f3e9e3 100%);
}
.warp-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease-calm); }
.warp-on .warp-canvas { opacity: 1; }
.warp-on .warp-ground { background: #2b110e; }
.warp-on body { background: transparent; }
.warp-on .hero { background: transparent; }
.warp-on .hero-sky {
  background:
    linear-gradient(180deg, #1d0f0cf2 0%, #25110ecc 46%, #2b110e8c 78%, #2b110e40 100%),
    linear-gradient(90deg, #1d0f0ccc 0%, #25110e80 52%, transparent 86%);
}

/* ---- PRELOADER (liquid-metal wordmark splash) ---- */
.preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #2b110e; transition: opacity .6s var(--ease-calm), visibility .6s var(--ease-calm); }
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { width: min(440px, 78vw); }
.no-js .preloader { display: none; }

/* ---- LIQUID METAL LOGO (catalog 014) ---- */
.lm-logo { position: relative; display: inline-block; line-height: 1; white-space: nowrap; vertical-align: middle; }
.lm-logo .lm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.lm-logo.lm-on .lm-canvas { display: block; }
.lm-logo.lm-on .lm-fallback { visibility: hidden; }
.lm-fallback { font-family: "Geist Mono", monospace; font-weight: 500; letter-spacing: .04em; }
.lm-logo-nav, .lm-logo-footer { font-size: 14px; }
.lm-logo-nav .lm-fallback { color: var(--ink); }
.lm-logo-footer .lm-fallback { color: var(--on-dark); }
.lm-logo-preloader { display: block; width: 100%; aspect-ratio: 4 / 1; }
.lm-logo-preloader .lm-canvas { inset: 0; }
/* Legible load mark: clean Geist Mono wordmark with a soft fade-up and a single
   warm sheen sweep. No WebGL warp, so "Orix AI" stays readable through the load. */
.lm-logo-preloader .lm-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: "Geist Mono", monospace; font-weight: 600; letter-spacing: .02em;
  font-size: clamp(26px, 7vw, 48px); white-space: nowrap;
  color: #f3e9e3;
  background-image: linear-gradient(100deg, #f3e9e3 0%, #f3e9e3 38%, #ffd9b8 50%, #f3e9e3 62%, #f3e9e3 100%);
  background-size: 240% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: lm-rise .7s var(--ease-calm) both, lm-sheen 2.2s var(--ease-calm) .4s infinite;
}
@keyframes lm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lm-sheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -120% 0; } }

/* ---- GRADIENT TEXT PRO (catalog 313/175 style) ---- */
mark.sweep.gtp.gtp-on {
  -webkit-text-fill-color: transparent; color: transparent;
  background-image: linear-gradient(90deg, #ffffff 0%, #ffd9bd 28%, var(--accent) 52%, #ffb883 74%, #ffffff 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: gtp-flow 7s linear infinite;
}
.band-canvas mark.sweep.gtp.gtp-on, .band-cream mark.sweep.gtp.gtp-on {
  background-image: linear-gradient(90deg, var(--ink) 0%, var(--ink) 24%, var(--accent-2) 50%, var(--accent) 74%, var(--ink) 100%);
}
@keyframes gtp-flow { from { background-position: 100% 50%; } to { background-position: -200% 50%; } }

/* ---- TILT CARD (catalog 011) ---- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .tilt-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .2s ease-out; background: radial-gradient(circle at 50% 50%, #ffffff80 0%, #ffffff00 80%); }
.tilt.is-tilting { transition: transform .2s ease-out; }
.tilt.is-tilting .tilt-glare { opacity: 1; }

/* ---- full-width media sections ---- */
.highlights .band-inner, .feature .band-inner, .types .band-inner, .work-sec .band-inner {
  max-width: min(1680px, 100% - 2 * var(--gutter-outer));
}
@media (min-width: 1280px) {
  .highlights .band-inner, .feature .band-inner, .types .band-inner, .work-sec .band-inner { padding-inline: clamp(24px, 3vw, 56px); }
}
.img-card .li-wrap { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: clip; }
.img-card.li-on > img { opacity: 0; }
.img-card .li-wrap canvas { filter: sepia(.14) saturate(1.1) contrast(1.02); }
.data-parallax-img { will-change: transform; }

/* ---- CURVE CAROUSEL (catalog 301) ---- */
.curve { position: relative; width: 100%; margin-top: var(--sp-6); overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.curve.dragging { cursor: grabbing; }
.curve-stage { position: relative; width: 100%; height: 460px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .curve-stage { height: 520px; } }
.curve-card { position: absolute; top: 50%; left: 50%; width: 300px; transform-origin: center; transition: transform 1000ms cubic-bezier(0.32,0.72,0,1), opacity 1000ms cubic-bezier(0.32,0.72,0,1); will-change: transform, opacity; pointer-events: none; }
.curve-card .type-card { width: 300px; min-height: 340px; margin: 0; background: var(--surface-cream); border-radius: var(--r-card); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--shadow-float); filter: grayscale(100%) brightness(.78) saturate(.6); transition: filter 1000ms cubic-bezier(0.32,0.72,0,1), background 1000ms; }
.curve-card.is-center .type-card { filter: grayscale(0%) brightness(1.03); background: var(--accent-soft); box-shadow: var(--shadow-float-lift); }
.curve-card.is-center .type-card .type-body { color: var(--brown); }
.curve-card .type-card .type-head { font-size: 26px; line-height: 1.1; margin-top: 4px; }
.curve-card .type-card .type-body { color: var(--ink-60); font-size: 15.5px; margin-top: auto; }
.curve-card .type-card .eyebrow { color: var(--ink); }
.curve-ctrl { position: relative; z-index: 60; display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.curve-source { display: none; }
.no-js .curve { display: none; }
.no-js .curve-source { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; max-width: var(--maxw); margin: var(--sp-6) auto 0; padding-inline: var(--gutter-outer); }
.no-js .curve-source .type-card { background: var(--surface-cream); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 220px; }
@media (min-width: 768px) { .no-js .curve-source { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .no-js .curve-source { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   ============================  THE Ori AGENT (the value prop)  ===========
   A live, on-page lead-qualifying agent. EN / Shona / Ndebele. Scripted,
   no backend, offline-capable. Reuses the kit chat device + bubbles verbatim.
   ========================================================================= */
.agent-sec .band-inner { display: grid; gap: var(--sp-7); align-items: center; }
.agent-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.agent-copy .headline { max-width: 16ch; }
.agent-copy .agent-lede { color: #ffffffcc; max-width: 46ch; font-size: 17px; }
.band-cream .agent-copy .agent-lede { color: var(--ink-60); }
.agent-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.agent-badge { font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: #ffd9bd; border: 1px solid #ffffff2e; border-radius: 999px; padding: 7px 13px; }
.band-cream .agent-badge { color: var(--brown); border-color: var(--ink-20); }
@media (min-width: 920px) { .agent-sec .band-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }

/* the live agent device */
.agent-device { position: relative; width: min(420px, 100%); margin-inline: auto; }
.agent-device .device-glow { inset: -10% -16% -8% -16%; opacity: .5; }
.agent-frame { background: #ffffff; border: 1px solid var(--ink-20); border-radius: 44px 44px 44px 0; box-shadow: var(--shadow-float-lift); padding: 12px; position: relative; }
.agent-screen { background: var(--surface); border-radius: 38px 38px 38px 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; height: 560px; }
.agent-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-20); }
.agent-avatar { width: 34px; height: 34px; border-radius: 999px 999px 999px 4px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-family: "Geist Mono", monospace; font-weight: 600; font-size: 15px; }
.agent-id { display: flex; flex-direction: column; }
.agent-id .agent-id-name { font-family: "Geist Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.agent-id .agent-id-status { font-size: 11px; color: var(--ink-60); display: inline-flex; align-items: center; gap: 6px; }
.agent-id .agent-id-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #36c26a; box-shadow: 0 0 0 0 #36c26a66; animation: agent-pulse 2s infinite; }
@keyframes agent-pulse { 0%{box-shadow:0 0 0 0 #36c26a66;} 70%{box-shadow:0 0 0 6px #36c26a00;} 100%{box-shadow:0 0 0 0 #36c26a00;} }
.agent-lang { margin-left: auto; display: inline-flex; gap: 4px; }
.agent-lang button { font-family: "Geist Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--ink-20); border-radius: 999px; padding: 5px 9px; color: var(--ink-60); transition: background .2s, color .2s, border-color .2s; }
.agent-lang button.active { background: var(--accent); color: #2b110e; border-color: var(--accent); }
.agent-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 2px; scrollbar-width: thin; }
.agent-log::-webkit-scrollbar { width: 5px; } .agent-log::-webkit-scrollbar-thumb { background: var(--ink-20); border-radius: 999px; }
.a-msg { font-size: 13.5px; line-height: 1.4; padding: 10px 13px; max-width: 88%; opacity: 0; transform: translateY(6px); animation: a-msg-in .35s var(--ease-calm) forwards; }
@keyframes a-msg-in { to { opacity: 1; transform: none; } }
.a-in { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--ink-20); border-radius: 16px 16px 16px 4px; }
.a-out { align-self: flex-end; background: var(--surface-peach); color: var(--ink); border-radius: 16px 16px 4px 16px; }
.a-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--ink-20); border-radius: 16px 16px 16px 4px; }
.a-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-60); animation: a-bounce 1.2s infinite; }
.a-typing span:nth-child(2){ animation-delay:.15s; } .a-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes a-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5;} 30%{transform:translateY(-4px);opacity:1;} }
.agent-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.agent-choice { font-size: 13px; font-family: "Geist Sans", sans-serif; border: 1px solid var(--accent); color: var(--ink); background: #fff; border-radius: 999px; padding: 9px 14px; transition: background .18s, color .18s, transform .18s; }
.agent-choice:hover { background: var(--accent); color: #2b110e; transform: translateY(-1px); }
.agent-cta-row { display: flex; gap: 8px; }
.agent-cta-row .btn { min-height: 44px; padding: 0 22px; font-size: 14px; flex: 1; }
.agent-restart { background: none; border: none; color: var(--ink-60); font-family: "Geist Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: center; padding: 4px; }
.agent-restart:hover { color: var(--ink); }

/* floating agent FAB (every page) + mini panel */
.agent-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--espresso); color: #fff; border: 1px solid #ffffff24;
  border-radius: 999px 999px 4px 999px; padding: 12px 18px 12px 14px;
  box-shadow: var(--shadow-float); transition: transform .25s var(--ease-calm), box-shadow .25s;
  font-family: "Geist Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.agent-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-float-lift); }
.agent-fab .fab-dot { width: 30px; height: 30px; border-radius: 999px 999px 999px 4px; background: linear-gradient(150deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 600; }
.agent-fab .fab-ping { position: absolute; top: 8px; left: 36px; width: 8px; height: 8px; border-radius: 999px; background: #36c26a; box-shadow: 0 0 0 0 #36c26a66; animation: agent-pulse 2s infinite; }
@media (min-width: 980px) { .agent-fab { right: 28px; bottom: 28px; } }
.no-js .agent-fab { display: none; }

.agent-pop { position: fixed; right: 18px; bottom: 78px; z-index: 81; width: min(360px, calc(100vw - 36px)); transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-calm), transform .3s var(--ease-calm); }
.agent-pop.open { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 980px) { .agent-pop { right: 28px; bottom: 92px; } }
.agent-pop .agent-frame { border-radius: 28px 28px 4px 28px; }
.agent-pop .agent-screen { height: 460px; border-radius: 22px 22px 4px 22px; }
.agent-pop-close { position: absolute; top: -10px; right: -6px; width: 34px; height: 34px; border-radius: 999px; background: var(--espresso); color: #fff; border: 1px solid #ffffff33; display: grid; place-items: center; font-size: 18px; }

/* ---- glass pill hover already set above; reduced-motion: kill pass-2 motion ---- */
@media (prefers-reduced-motion: reduce) {
  .warp-canvas { display: none; }
  .warp-on .warp-ground { background:
    radial-gradient(120% 90% at 18% 12%, #ff8e3e33 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 90%, #47201c40 0%, transparent 60%),
    linear-gradient(160deg, #2b110e 0%, #5a322d 30%, #ff8e3e 66%, #f3e9e3 100%); }
  mark.sweep.gtp.gtp-on { animation: none; -webkit-text-fill-color: var(--accent); color: var(--accent); background: none; }
  .lm-logo .lm-canvas { display: none !important; }
  .lm-logo .lm-fallback { visibility: visible !important; }
  .lm-logo-preloader .lm-fallback { animation: none; background: none; -webkit-background-clip: initial; background-clip: initial; color: #f3e9e3; transform: none; opacity: 1; }
  .btn:hover { transform: none; }
  .curve-card { transition: none; }
  .hero-video { display: none; }
  .agent-id .agent-id-status::before, .agent-fab .fab-ping { animation: none; }
  .a-msg { animation: none; opacity: 1; transform: none; }
}