/* ============================================================
   CRUSADER AUTOMATED SYSTEMS — SITE STYLESHEET (v3)
   Shared across index.html · work.html · capabilities.html
   Built on the Crusader Product Design System v1.
   Champagne gold #C9A961 · Marcellus (display) + Jost (text) · noir.
   ============================================================ */

:root{
  --noir:#101512; --noir-2:#151B17; --noir-3:#1B231E; --noir-4:#232D27;
  --noir-line:#2A352E;
  --ivory:#EDE8DC; --ivory-dim:#A8A79B; --ivory-faint:#6E6F63;
  --gold:#C9A961; --gold-bright:#D9BC77; --gold-dim:#8A7642;
  --hairline:rgba(201,169,97,.28); --hairline-faint:rgba(201,169,97,.12);
  --gold-wash:rgba(201,169,97,.08);
  --positive:#7FA98A; --positive-wash:rgba(127,169,138,.14);
  --caution:#D2A24C; --caution-wash:rgba(210,162,76,.14);
  --critical:#C57A63; --critical-wash:rgba(197,122,99,.16);
  --info:#7C9BB5; --info-wash:rgba(124,155,181,.14);
  --display:'Marcellus',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r-xs:2px;--r-sm:6px;--r-md:10px;--r-lg:14px;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-inout:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.18s; --dur:.32s; --dur-slow:.8s;
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
}
body{
  font-family:var(--sans);font-weight:300;background:var(--noir);color:var(--ivory);
  line-height:1.65;font-size:17px;letter-spacing:.01em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--noir)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.tabular{font-variant-numeric:tabular-nums}

/* signature inset frame */
.frame{position:fixed;inset:14px;pointer-events:none;z-index:80;border:1px solid var(--hairline)}
.frame::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-faint)}
@media (max-width:720px){.frame{inset:8px}.frame::after{display:none}}

/* film grain — site-wide cinematic texture */
body::after{content:"";position:fixed;inset:0;z-index:75;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;animation:grain 5s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none;opacity:.03}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s7)}
@media (max-width:720px){.wrap{padding:0 var(--s5)}}

/* ---------------- NAV ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;transition:background var(--dur),padding var(--dur),border-color var(--dur);
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(16,21,18,.86);backdrop-filter:blur(12px);padding:14px 40px;border-bottom:1px solid var(--hairline-faint)}
@media (max-width:720px){.nav,.nav.scrolled{padding:14px 22px}}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand .em{width:30px;height:34px;overflow:visible;transition:transform var(--dur) var(--ease-out)}
.nav-brand .em path{fill:none}
.nav-brand .em .e-out{stroke:var(--gold-bright);stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(201,169,97,.55))}
.nav-brand .em .e-in{stroke:var(--gold-dim);stroke-width:1}
.nav-brand .em .e-cv{stroke:var(--gold-bright);stroke-width:1.8}
.nav-brand .em .e-cv2{stroke:var(--gold-dim);stroke-width:1}
.nav-brand:hover .em{transform:translateY(-1px) scale(1.05)}
.nav-brand:hover .em .e-out{filter:drop-shadow(0 0 9px rgba(201,169,97,.85))}
.nav-brand .wm{transition:letter-spacing var(--dur)}
.nav-brand:hover .wm{color:var(--gold)}
.nav-brand .wm{font-family:var(--display);font-size:15px;letter-spacing:.28em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:var(--s7)}
.nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-dim);transition:color var(--dur);position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}
.nav-cta{border:1px solid var(--gold);color:var(--gold)!important;padding:10px 22px;border-radius:var(--r-xs);transition:background var(--dur),color var(--dur)}
.nav-cta:hover{background:var(--gold);color:var(--noir)!important}
.nav-toggle{display:none;background:none;border:0;color:var(--ivory);cursor:pointer;padding:6px}
@media (max-width:820px){
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:var(--s6);
    background:rgba(16,21,18,.97);backdrop-filter:blur(14px);transform:translateY(-100%);transition:transform var(--dur) var(--ease-out);z-index:95}
  .nav-links.open{transform:none}
  .nav-links a{font-size:16px}
  .nav-toggle{display:block;position:relative;z-index:96}
}

/* ---------------- LANG TOGGLE ---------------- */
.lang{display:inline-flex;border:1px solid var(--noir-line);border-radius:20px;overflow:hidden}
.lang button{background:transparent;border:0;color:var(--ivory-dim);font-family:var(--sans);font-size:11px;letter-spacing:.1em;padding:6px 13px;cursor:pointer;transition:all var(--dur-fast)}
.lang button.on{background:var(--gold);color:var(--noir)}
[data-en]{display:none}
body.lang-en [data-es]{display:none}
body.lang-en [data-en]{display:revert}

/* Channel gating. WhatsApp is the correct CTA for Spanish/MX visitors only.
   Canada / US / UK must never be offered WhatsApp — see the channel-safety rule.
   .es-only hides in English, .en-only hides in Spanish. */
body.lang-en .es-only{display:none!important}
body:not(.lang-en) .en-only{display:none!important}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  padding:17px 40px;border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;border-radius:var(--r-xs);
  transition:background var(--dur),color var(--dur),transform var(--dur-fast)}
.btn:hover{background:var(--gold);color:var(--noir)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.btn-solid{background:var(--gold);color:var(--noir)}
.btn-solid:hover{background:var(--gold-bright)}
.btn-sm{padding:11px 22px;font-size:11px;letter-spacing:.16em}

/* ---------------- SHARED TYPE ---------------- */
.eyebrow{font-size:11px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)}
.display{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.005em}
.display em{font-style:normal;color:var(--gold)}
.rule{width:66px;height:1px;background:var(--gold-dim);margin:var(--s6) 0;position:relative}
.rule.center{margin-left:auto;margin-right:auto}
.rule::after{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.rule.center::after{left:50%;transform:translateX(-50%) rotate(45deg)}
.lede{font-size:19px;color:var(--ivory-dim);max-width:58ch}

/* ---------------- SECTIONS ---------------- */
section{padding:var(--s10) 0}
@media (max-width:720px){section{padding:var(--s9) 0}}
.sec-head{text-align:center;max-width:52ch;margin:0 auto var(--s8)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.16;margin-bottom:var(--s4)}
.sec-head p{color:var(--ivory-dim)}

/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(26% 30% at 71% 40%,rgba(240,220,166,.16),transparent 62%),radial-gradient(52% 52% at 71% 40%,rgba(201,169,97,.24),transparent 62%),radial-gradient(130% 120% at 50% 122%,rgba(138,118,66,.10),transparent 55%),linear-gradient(180deg,#0b0e0b,#101512 55%,#151008)}
/* cinematic atmosphere: a slow gold light-sweep + a deep vignette */
.hero::before{content:"";position:absolute;inset:-25%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 200deg at 68% 38%,transparent 0deg,rgba(201,169,97,.06) 32deg,transparent 82deg,transparent 360deg);
  animation:heroSweep 16s linear infinite}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 100% at 68% 42%,transparent 36%,rgba(4,6,5,.62) 100%)}
@keyframes heroSweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
/* Bespoke hero loop (seamless palindrome). Sits above .hero-img, which acts as
   the poster/fallback when cinematic.js strips the video on reduced-motion or save-data. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:0;
  opacity:0;transition:opacity 1.8s var(--ease-out);pointer-events:none;
  filter:brightness(1.04) saturate(1.06) contrast(1.02)}
.hero-vid.on{opacity:1}
@media (max-width:820px){.hero-vid{object-position:78% 50%}.hero-vid.on{opacity:.8}}
/* Bespoke hero plate (replaces the third-party stock video, Jul 2026).
   Static image — no JS gate needed, fades in on decode. */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  z-index:0;opacity:0;animation:heroIn 1.8s var(--ease-out) .15s forwards;pointer-events:none;
  /* ⚠ Legibility beats atmosphere. brightness was 1.04 and the headline became
     unreadable over the lit right side of the plate. Keep the plate dim. */
  filter:brightness(.62) saturate(1.02) contrast(1.02)}
/* Full opacity is correct here — .hero-veil (z-index 1) is what darkens the left
   for text legibility. Dimming the plate as well made it invisible. */
@keyframes heroIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none;opacity:1}}
@media (max-width:820px){.hero-img{object-position:78% 50%;animation-name:heroInSm}}
@keyframes heroInSm{to{opacity:.8}}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.92}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;align-items:center;justify-content:center;
  background:radial-gradient(60% 60% at 70% 40%,rgba(201,169,97,.10),transparent 70%)}
.hero-fallback svg{width:min(48vw,460px);opacity:.55;filter:drop-shadow(0 0 32px rgba(201,169,97,.4));animation:fbBreath 6s var(--ease-inout) infinite}
@keyframes fbBreath{0%,100%{opacity:.48;transform:scale(1)}50%{opacity:.72;transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.hero-fallback svg{animation:none}}
.hero-fallback .fs1{fill:none;stroke:var(--gold-dim);stroke-width:1.2}
.hero-fallback .fs2{fill:none;stroke:var(--hairline);stroke-width:.8}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,21,18,.97) 0%,rgba(16,21,18,.94) 34%,rgba(16,21,18,.78) 58%,rgba(16,21,18,.5) 80%,rgba(16,21,18,.34) 100%)}
/* Nav scrim. The CONSULTATION button — the primary nav CTA — sat over the lit
   right edge of the plate at barely-readable contrast. */
.nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,16,14,.88) 0%,rgba(12,16,14,.55) 60%,rgba(12,16,14,0) 100%)}
.nav{position:relative;isolation:isolate}

/* Dedicated scrim directly behind the hero copy. The global veil alone could not
   guarantee contrast once the plate was lit, so the text carries its own. */
.hero-inner::before{content:"";position:absolute;inset:-6% -10% -10% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 26% 50%,rgba(10,14,12,.9) 0%,rgba(10,14,12,.72) 42%,rgba(10,14,12,0) 78%)}
@media (max-width:820px){
  .hero-veil{background:linear-gradient(180deg,rgba(16,21,18,.72),rgba(16,21,18,.94))}
  .hero-inner::before{inset:-8% -14%;background:radial-gradient(90% 70% at 50% 46%,rgba(10,14,12,.9) 0%,rgba(10,14,12,.6) 55%,rgba(10,14,12,0) 85%)}
}
@media (max-width:820px){.hero-veil{background:linear-gradient(180deg,rgba(16,21,18,.55),rgba(16,21,18,.9))}}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6.6vw,82px);line-height:1.08;max-width:16ch;margin-bottom:var(--s6)}
.hero h1 em{font-style:normal;color:var(--gold);text-shadow:0 0 36px rgba(201,169,97,.42),0 0 5px rgba(201,169,97,.3)}
.hero .lede{margin-bottom:var(--s7)}
.hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--ivory-faint);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:scrolldot 2.2s var(--ease-inout) infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------------- SERVICES INDEX ---------------- */
.index{border-top:1px solid var(--hairline)}
.index-row{display:grid;grid-template-columns:66px 1fr 1.3fr auto;gap:var(--s6);align-items:center;
  padding:var(--s6) var(--s2);border-bottom:1px solid var(--hairline);transition:background var(--dur),padding-left var(--dur)}
.index-row:hover{background:var(--noir-2);padding-left:var(--s5)}
.index-row .num{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.14em}
.index-row h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.02em}
.index-row p{font-size:15.5px;color:var(--ivory-dim)}
.index-row .arw{color:var(--gold-dim);transition:transform var(--dur),color var(--dur)}
.index-row:hover .arw{transform:translateX(6px);color:var(--gold)}
@media (max-width:820px){
  .index-row{grid-template-columns:44px 1fr;gap:var(--s3)}
  .index-row p{grid-column:2}.index-row .arw{display:none}
}

/* ---------------- APPROACH / STEPS ---------------- */
.band{background:var(--noir-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.step{text-align:center}
.step .n{font-family:var(--display);font-size:17px;color:var(--gold);letter-spacing:.2em;margin-bottom:var(--s4)}
.step h3{font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:var(--s3)}
.step p{font-size:15px;color:var(--ivory-dim)}
@media (max-width:720px){.steps{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------------- STANDARD / STATS ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.stat{background:var(--noir);padding:var(--s7) var(--s5);text-align:center}
.stat h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);color:var(--gold);margin-bottom:var(--s2)}
.stat p{font-size:14.5px;color:var(--ivory-dim);max-width:26ch;margin:0 auto}
@media (max-width:720px){.stat-grid{grid-template-columns:1fr}}
.fineprint{text-align:center;margin-top:var(--s5);font-size:12.5px;color:var(--ivory-faint)}

/* ---------------- WORK / CASE CARDS ---------------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
@media (max-width:820px){.work-grid{grid-template-columns:1fr}}
.case{background:var(--noir-3);border:1px solid var(--noir-line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.case:hover{border-color:var(--gold-dim);transform:translateY(-4px);box-shadow:0 20px 50px -26px rgba(0,0,0,.8)}
.case .shot{position:relative;aspect-ratio:16/10;background:var(--noir-2);border-bottom:1px solid var(--noir-line);overflow:hidden}
.case .shot .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--ivory-faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.case .shot .ph svg{width:44px;opacity:.4}
.case .shot .badge{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--noir);padding:4px 10px;border-radius:20px}
.case .body{padding:var(--s5)}
.case .body .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.case .body h3{font-family:var(--display);font-weight:400;font-size:23px;margin-bottom:var(--s3)}
.case .body p{font-size:14.5px;color:var(--ivory-dim);margin-bottom:var(--s4)}
.case .metrics{display:flex;gap:var(--s5);border-top:1px solid var(--noir-line);padding-top:var(--s4)}
.case .metrics div{flex:1}
.case .metrics .mv{font-family:var(--display);font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}
.case .metrics .ml{font-size:11px;color:var(--ivory-faint);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.case:hover .shot .render{transform:scale(1.015)}

/* ============================================================
   MINI PRODUCT RENDERS — fill .case .shot with realistic UI
   ============================================================ */
.shot .render{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:13px;
  background:radial-gradient(120% 90% at 82% -10%,rgba(201,169,97,.12),transparent 55%),linear-gradient(165deg,#161d18,#0c110e);
  transition:transform var(--dur) var(--ease-out)}
.rbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rbrand{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);white-space:nowrap}
.rbrand b{color:var(--gold);font-weight:400}
.rmeta{font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-faint);display:flex;align-items:center;gap:5px}
.rlive{width:5px;height:5px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 0 rgba(127,169,138,.6);animation:pulseDot 2.4s var(--ease-out) infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(127,169,138,.5)}70%{box-shadow:0 0 0 5px rgba(127,169,138,0)}100%{box-shadow:0 0 0 0 rgba(127,169,138,0)}}
.rkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rk{background:rgba(237,232,220,.035);border:1px solid rgba(201,169,97,.16);border-radius:4px;padding:6px 8px}
.rk .v{font-size:13px;color:var(--ivory);line-height:1;font-variant-numeric:tabular-nums}
.rk .v b{color:var(--gold);font-weight:400}
.rk .l{font-size:5.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ivory-faint);margin-top:3px}
.rpanels{flex:1;display:grid;gap:6px;min-height:0}
.rp{background:rgba(237,232,220,.022);border:1px solid rgba(42,53,46,.95);border-radius:4px;padding:8px;overflow:hidden;min-height:0}
.rp .h{font-size:6px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.rp .h b{color:var(--gold);font-weight:400}
.rbars{display:flex;flex-direction:column;gap:6px}
.rrow{display:grid;grid-template-columns:40px 1fr 24px;gap:6px;align-items:center;font-size:6.5px;color:var(--ivory-faint)}
.rtrack{height:5px;background:rgba(201,169,97,.1);border-radius:3px;overflow:hidden}
.rfill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:3px}
.rval{text-align:right;color:var(--ivory-dim);font-variant-numeric:tabular-nums}
.rtable{display:flex;flex-direction:column}
.rtr{display:grid;grid-template-columns:1fr auto auto;gap:6px;padding:4.5px 0;border-bottom:1px solid rgba(42,53,46,.8);font-size:6.5px;color:var(--ivory-dim);align-items:center}
.rtr:last-child{border-bottom:0}
.rtr .co{color:var(--ivory)}
.rpill{font-size:5px;letter-spacing:.03em;padding:2px 5px;border-radius:10px;white-space:nowrap}
.rpos{color:var(--positive);background:var(--positive-wash)}
.rcau{color:var(--caution);background:var(--caution-wash)}
.rcri{color:var(--critical);background:var(--critical-wash)}
.rinf{color:var(--info);background:var(--info-wash)}
.rneu{color:var(--ivory-dim);background:rgba(237,232,220,.06)}
.rspark{width:100%;height:100%;display:block}
.rspark .area{fill:url(#rgrad)}
.rspark .line{fill:none;stroke:var(--gold);stroke-width:1.4;vector-effect:non-scaling-stroke}
.rdonut{display:flex;align-items:center;gap:10px}
.rdonut svg{width:52px;height:52px;flex:none}
.rleg{display:flex;flex-direction:column;gap:4px;font-size:6px;color:var(--ivory-dim)}
.rleg i{display:inline-block;width:6px;height:6px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* website / device mocks */
.rsite{flex:1;display:flex;flex-direction:column;border:1px solid rgba(42,53,46,.95);border-radius:5px;overflow:hidden;min-height:0}
.rsite .chrome{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,.25);align-items:center}
.rsite .chrome i{width:5px;height:5px;border-radius:50%;background:rgba(237,232,220,.25)}
.rsite .stage{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;padding:12px;min-height:0}
.rsite .k{font-size:6px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:5px}
.rsite .ttl{font-family:var(--display);font-size:15px;line-height:1.05;color:var(--ivory)}
.rsite .cta{margin-top:8px;align-self:flex-start;font-size:6px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.rchat{position:absolute;right:9px;bottom:9px;width:22px;height:22px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center}
.rchat svg{width:12px;height:12px;stroke:var(--noir);fill:none;stroke-width:1.7}
.rform{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.rinp{height:9px;border-radius:2px;background:rgba(237,232,220,.06);border:1px solid rgba(201,169,97,.15)}
/* collage for Website Program */
.rcollage{flex:1;position:relative;min-height:0}
.rcard3{position:absolute;width:44%;height:78%;border-radius:5px;border:1px solid rgba(42,53,46,.95);overflow:hidden;box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
.rcard3 .cap{height:38%}
.rcard3 .bd{padding:6px}
.rcard3 .ln{height:3px;border-radius:2px;background:rgba(237,232,220,.14);margin-bottom:4px}
.rcard3 .ln.s{width:60%}
.rtag{position:absolute;z-index:4;right:10px;bottom:9px;font-family:var(--display);font-size:16px;color:var(--gold);background:rgba(12,17,14,.7);padding:2px 8px;border-radius:3px;border:1px solid var(--hairline)}
@media (max-width:520px){.rk .v{font-size:11px}.rsite .ttl{font-size:12px}}

/* ============================================================
   CAPABILITY ARTWORK — animated line-art per discipline
   ============================================================ */
.cap-media .slot{display:none}
.cap-media .art{position:absolute;inset:0;width:100%;height:100%}
.cap-media .art .stroke{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.cap-media .art .stroke-dim{fill:none;stroke:var(--gold-dim);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cap-media .art .fillg{fill:var(--gold)}
.cap-media .art .filld{fill:var(--gold-dim)}
.cap-media .art .soft{fill:rgba(201,169,97,.08)}
.draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:draw 2.4s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.travel{animation:travel 3.4s var(--ease-inout) infinite}
@keyframes travel{0%{offset-distance:0%}100%{offset-distance:100%}}
.pulse{transform-box:fill-box;transform-origin:center;animation:apulse 2.6s var(--ease-out) infinite}
@keyframes apulse{0%,100%{opacity:.35}50%{opacity:1}}
.spin-slow{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{transform-box:fill-box;transform-origin:bottom;animation:riseBar 1.4s var(--ease-out) forwards}
@keyframes riseBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.blink{animation:apulse 1.4s steps(1) infinite}
@media (prefers-reduced-motion:reduce){
  .draw{animation:none;stroke-dashoffset:0}
  .travel,.pulse,.spin-slow,.blink{animation:none}
  .rise{animation:none;transform:none}
  .rlive{animation:none}
}

/* ---------------- CAPABILITY DETAIL ---------------- */
.cap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--s8);align-items:center;padding:var(--s9) 0;border-bottom:1px solid var(--hairline-faint)}
.cap:nth-child(even) .cap-media{order:-1}
@media (max-width:820px){.cap{grid-template-columns:1fr;gap:var(--s6)}.cap:nth-child(even) .cap-media{order:0}}
.cap .num{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.2em;margin-bottom:var(--s3)}
.cap h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,34px);margin-bottom:var(--s4)}
.cap p{color:var(--ivory-dim);margin-bottom:var(--s4)}
.cap ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.cap li{font-size:15px;color:var(--ivory-dim);padding-left:var(--s5);position:relative}
.cap li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.cap-media{aspect-ratio:4/3;background:var(--noir-3);border:1px solid var(--noir-line);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;color:var(--ivory-faint);position:relative;overflow:hidden}
.cap-media .slot{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:var(--s5)}
.cap-media .slot svg{width:52px;opacity:.4;margin:0 auto var(--s3)}
.cap-media::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%,var(--gold-wash),transparent 70%)}

/* ---------------- CLOSING / CONTACT ---------------- */
.closing{text-align:center}
.closing h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,48px);margin-bottom:var(--s5)}
.closing p{color:var(--ivory-dim);max-width:52ch;margin:0 auto var(--s6)}
.closing .live{font-size:14px;color:var(--gold);max-width:48ch;margin:0 auto var(--s7)}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--hairline);padding:var(--s7) 0 var(--s8);text-align:center}
footer .fm{font-family:var(--display);color:var(--gold-dim);font-size:15px;letter-spacing:.3em;margin-bottom:var(--s3)}
footer .fl{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-faint);line-height:2.2}
footer a:hover{color:var(--gold)}

/* ---------------- SCROLL REVEAL ---------------- */
/* Reveal system — ANIMATION driven, not transition driven.
   A CSS animation reliably commits its end frame (forwards fill) even when the
   .in class lands on the same paint as first layout — a transition can get
   stuck at its start value in that race, leaving content invisible. */
/* ⚠ .reveal MUST default to opacity:1 (changed 2026-07-28).
   It was opacity:0, relying on site.js to add .in. On the live homepage that
   never happened — 34 elements including .cruz-live (the live AI Receptionist
   demo) rendered permanently invisible, and the riseIn animation sat stuck on
   its 0% frame. Content must be visible by default and animate as an
   enhancement, never depend on JS to become visible at all. */
.reveal{opacity:1}
.reveal.in{animation:riseIn var(--dur-slow) var(--ease-out) both}
.reveal.in.d1{animation-delay:.08s}
.reveal.in.d2{animation-delay:.16s}
.reveal.in.d3{animation-delay:.24s}
@keyframes riseIn{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}

/* Above-the-fold headers self-fire on load, independent of the observer, so a
   slow first frame (e.g. WebGL hero init) can never leave them hidden. */
.hero .reveal,.page-top .reveal{animation:riseIn .9s var(--ease-out) both}
.hero .reveal.d1,.page-top .reveal.d1{animation-delay:.12s}
.hero .reveal.d2,.page-top .reveal.d2{animation-delay:.24s}
.hero .reveal.d3,.page-top .reveal.d3{animation-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in,.hero .reveal,.page-top .reveal{opacity:1;transform:none;animation:none}
}

/* page-intro spacing under fixed nav for interior pages */
.page-top{padding-top:calc(var(--s10) + 40px);text-align:center}
.page-top h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,64px);line-height:1.1;margin-bottom:var(--s4)}
.page-top h1 em{font-style:normal;color:var(--gold)}
.page-top .lede{margin:0 auto}

/* ============================================================
   AI RECEPTIONIST — floating assistant (injected by assistant.js)
   ============================================================ */
.cas-fab{position:fixed;bottom:24px;right:24px;z-index:120;width:58px;height:58px;border-radius:50%;
  background:var(--gold);color:var(--noir);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 36px -10px rgba(201,169,97,.6);transition:transform var(--dur)}
.cas-fab:hover{transform:scale(1.06)}
.cas-fab svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7}
.cas-fab .cas-dot{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--critical);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600}
.cas-chat{position:fixed;bottom:94px;right:24px;z-index:120;width:346px;max-width:calc(100vw - 48px);
  background:var(--noir-2);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  transform-origin:bottom right;transform:scale(.9);opacity:0;pointer-events:none;
  transition:transform var(--dur) var(--ease-out),opacity var(--dur);box-shadow:0 34px 80px -26px #000}
.cas-chat.cas-open{transform:scale(1);opacity:1;pointer-events:auto}
.cas-hd{background:var(--noir-3);padding:14px 16px;border-bottom:1px solid var(--noir-line);display:flex;align-items:center;gap:11px}
.cas-hd .cas-ic{width:34px;height:34px;border-radius:50%;background:var(--gold-wash);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center}
.cas-hd .cas-ic svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.7}
.cas-hd .cas-t{font-family:var(--display);font-size:15px;letter-spacing:.03em}
.cas-hd .cas-t span{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;letter-spacing:0;color:var(--ivory-faint)}
.cas-hd .cas-t span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--positive)}
.cas-hd .cas-x{margin-left:auto;background:0;border:0;color:var(--ivory-faint);cursor:pointer;font-size:19px;line-height:1}
.cas-msgs{padding:16px;height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.cas-bub{padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;max-width:85%}
.cas-bub.bot{background:var(--noir-4);color:var(--ivory);border-bottom-left-radius:3px;align-self:flex-start}
.cas-bub.usr{background:var(--gold);color:var(--noir);border-bottom-right-radius:3px;align-self:flex-end}
.cas-typing{display:flex;gap:4px;padding:12px 14px;background:var(--noir-4);border-radius:13px;border-bottom-left-radius:3px;align-self:flex-start}
.cas-typing i{width:6px;height:6px;border-radius:50%;background:var(--ivory-faint);animation:casBlink 1.2s infinite}
.cas-typing i:nth-child(2){animation-delay:.2s}.cas-typing i:nth-child(3){animation-delay:.4s}
@keyframes casBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.cas-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.cas-quick button{font-family:var(--sans);font-size:11.5px;color:var(--gold);background:var(--gold-wash);border:1px solid var(--hairline);border-radius:16px;padding:6px 12px;cursor:pointer;transition:all .18s}
.cas-quick button:hover{background:var(--gold);color:var(--noir)}
.cas-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--noir-line)}
.cas-foot input{flex:1;background:var(--noir-4);border:1px solid var(--noir-line);border-radius:20px;color:var(--ivory);font-family:var(--sans);font-size:13px;padding:10px 14px}
.cas-foot input:focus{outline:none;border-color:var(--gold)}
.cas-foot button{background:var(--gold);color:var(--noir);border:0;border-radius:50%;width:38px;height:38px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.cas-foot button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.cas-esc{font-size:11px;color:var(--ivory-faint);text-align:center;padding:0 16px 12px}.cas-esc a{color:var(--gold)}

/* ============================================================
   CINEMATIC LAYER (scroll filament · fog · gold sheen)
   ============================================================ */
.cx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-bright));box-shadow:0 0 12px rgba(201,169,97,.55);will-change:transform}
#vanta-fog{position:absolute;inset:0;z-index:0}
/* cinematic title-card intro */
.cx-curtain{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#181106,#0a0d0a 70%);transition:opacity 1s var(--ease-out),visibility 1s}
.cx-curtain.up{opacity:0;visibility:hidden;pointer-events:none}
.cx-badge{display:flex;flex-direction:column;align-items:center;gap:16px;animation:cxRise 1s var(--ease-out) both}
.cx-badge .cx-em{width:60px;height:70px;animation:cxPulse 1.8s var(--ease-inout) infinite}
.cx-badge .cx-em .e-out{fill:none;stroke:var(--gold-bright);stroke-width:2.4;filter:drop-shadow(0 0 9px rgba(201,169,97,.65))}
.cx-badge .cx-em .e-in{fill:none;stroke:var(--gold-dim);stroke-width:1}
.cx-badge .cx-em .e-cv{fill:none;stroke:var(--gold-bright);stroke-width:1.8}
.cx-badge .cx-word{font-family:var(--display);font-size:15px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);padding-left:.5em;
  opacity:0;animation:cxWord 1.2s var(--ease-out) .35s forwards}
@keyframes cxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cxWord{to{opacity:1;letter-spacing:.34em}}
@keyframes cxPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.cx-badge,.cx-badge .cx-em,.cx-badge .cx-word{animation:none;opacity:1}}
/* hero cursor spotlight */
.cx-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,40%),rgba(201,169,97,.12),transparent 70%);mix-blend-mode:screen}
/* volumetric light shafts (god-rays) concentrated on the crest */
.cx-rays{position:absolute;inset:-30% -10% -10% 10%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:repeating-linear-gradient(114deg,transparent 0 46px,rgba(201,169,97,.055) 46px 48px,transparent 48px 104px);
  -webkit-mask-image:radial-gradient(58% 68% at 70% 34%,#000,transparent 72%);mask-image:radial-gradient(58% 68% at 70% 34%,#000,transparent 72%);
  animation:cxRays 26s linear infinite}
@keyframes cxRays{to{transform:translateX(-104px)}}
@media (prefers-reduced-motion:reduce){.cx-rays{animation:none;opacity:.3}}
/* animated gold sheen sweeping the hero accent word */
.hero h1 em{
  background:linear-gradient(100deg,var(--gold) 18%,#F3E1AE 46%,var(--gold) 74%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  background-size:220% auto;animation:goldSheen 6.5s linear infinite;
  filter:drop-shadow(0 0 24px rgba(201,169,97,.4))}
@keyframes goldSheen{to{background-position:220% center}}
@media (prefers-reduced-motion:reduce){.hero h1 em{animation:none}}
/* keep the scroll cue from colliding with the CTAs on short viewports */
@media (max-height:780px){.hero-scroll{display:none}}
/* a touch more presence on the six-discipline index */
.index-row .num{color:var(--gold-bright);font-size:16px}
.index-row p{color:var(--ivory-dim)}
.index-row h3{color:var(--ivory)}

/* ============================================================
   AI RECEPTIONIST v3 — bug fix, polish, in-page panel
   ============================================================ */

/* --- FIX: header showed BOTH languages (specificity collision
       with .cas-hd .cas-t span{display:flex}) --- */
body:not(.lang-en) .cas-hd .cas-t span[data-en],
body:not(.lang-en) .cruz-live-t span[data-en]{display:none}
body.lang-en .cas-hd .cas-t span[data-es],
body.lang-en .cruz-live-t span[data-es]{display:none}

/* --- message fade-in + streaming cursor --- */
.cas-bub{animation:casIn .28s var(--ease-out)}
@keyframes casIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cas-bub a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cas-cursor{display:inline-block;width:2px;height:1em;background:var(--gold);margin-left:1px;vertical-align:text-bottom;animation:casCur .9s steps(2) infinite}
@keyframes casCur{0%,100%{opacity:1}50%{opacity:0}}

/* --- shield avatar (replaces the search-looking icon) --- */
.cas-shield{fill:none}
.cas-shield .s-o,.cas-shield .s-c{stroke:var(--gold);fill:none}
.cas-shield .s-o{stroke-width:3.4}
.cas-shield .s-c{stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.cas-fab .cas-shield{width:24px;height:27px}
.cas-fab .cas-shield .s-o,.cas-fab .cas-shield .s-c{stroke:var(--noir)}

/* --- fab pulse ring + teaser tooltip --- */
.cas-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);
  animation:casPulse 2.8s var(--ease-out) infinite;pointer-events:none}
@keyframes casPulse{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cas-ring{animation:none;opacity:0}}
.cas-teaser{position:fixed;bottom:36px;right:92px;z-index:119;background:var(--noir-3);
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:9px 14px;font-family:var(--sans);
  font-size:12.5px;color:var(--ivory);box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;
  transform:translateX(10px);pointer-events:none;transition:all .4s var(--ease-out);white-space:nowrap}
.cas-teaser.show{opacity:1;transform:none}
.cas-teaser::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;
  border:6px solid transparent;border-left-color:var(--noir-3)}
@media (max-width:560px){.cas-teaser{display:none}}

/* --- language pill --- */
.cas-pill{font-family:var(--sans);font-size:10px;letter-spacing:.09em;color:var(--gold);
  border:1px solid var(--hairline);border-radius:20px;padding:2px 8px;line-height:1.5}
.cas-hd .cas-pill{margin-left:auto}
.cas-hd .cas-x{margin-left:9px}

/* --- hero tie-in link --- */
.hero-cruz-link{display:inline-block;margin-top:var(--s5);font-family:var(--sans);font-size:13.5px;
  letter-spacing:.02em;color:var(--gold);border-bottom:1px solid var(--hairline-faint);
  padding-bottom:2px;transition:border-color .2s,opacity .2s;opacity:.85}
.hero-cruz-link:hover{border-bottom-color:var(--gold);opacity:1}

/* --- IN-PAGE "MEET THE RECEPTIONIST" PANEL --- */
#meet-cruz{padding:var(--s9) 0}
#meet-cruz .sec-head{max-width:640px}
.cruz-live{max-width:648px;margin:var(--s7) auto 0;background:linear-gradient(180deg,var(--noir-2),var(--noir));
  border:1px solid var(--noir-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.5)}
.cruz-live-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--noir-3);border-bottom:1px solid var(--noir-line)}
.cruz-live-ic{width:38px;height:38px;border-radius:50%;background:var(--gold-wash);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center}
.cruz-live-ic .cas-shield{width:19px;height:21px}
.cruz-live-t{font-family:var(--display);font-size:16px;letter-spacing:.03em;line-height:1.15}
.cruz-live-t>span{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11.5px;
  font-weight:300;letter-spacing:0;color:var(--ivory-dim);margin-top:3px}
.cruz-dot{width:7px;height:7px;border-radius:50%;background:var(--positive);animation:cruzDot 2.2s infinite}
@keyframes cruzDot{0%{box-shadow:0 0 0 0 rgba(127,169,138,.5)}70%{box-shadow:0 0 0 6px rgba(127,169,138,0)}100%{box-shadow:0 0 0 0 rgba(127,169,138,0)}}
.cruz-live .cas-pill{margin-left:auto}
.cruz-live-msgs{padding:20px;min-height:210px;max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.cruz-live-msgs .cas-bub{font-size:14.5px;max-width:82%}
.cruz-live-prov{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.cruz-live-prov button{font-family:var(--sans);font-size:12px;color:var(--gold);background:var(--gold-wash);
  border:1px solid var(--hairline);border-radius:18px;padding:7px 13px;cursor:pointer;transition:all .18s}
.cruz-live-prov button:hover{background:var(--gold);color:var(--noir)}
.cruz-live-foot{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--noir-line);background:var(--noir-2)}
.cruz-live-input{flex:1;background:var(--noir-4);border:1px solid var(--noir-line);border-radius:22px;color:var(--ivory);
  font-family:var(--sans);font-weight:300;font-size:14px;padding:11px 16px}
.cruz-live-input:focus{outline:none;border-color:var(--gold)}
.cruz-live-send{background:var(--gold);color:var(--noir);border:0;border-radius:50%;width:42px;height:42px;flex:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.cruz-live-send svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.cruz-live-note{max-width:560px;margin:var(--s6) auto 0;text-align:center;font-size:14px;color:var(--ivory-dim)}
@media (max-width:720px){#meet-cruz{padding:var(--s8) 0}.cruz-live-msgs{padding:16px}}