/* =============================================================================
   theme.css — SimpliTechPro redesign design system (2026-08-16)
   Premium / agentic direction. Loaded AFTER style.css during migration so the
   new sections win; existing sections keep their old CSS until each is migrated.
   New components are prefixed .rx-* so there are ZERO collisions with the legacy
   style.css / shared-dc.css / index.css cascade.
   Type: Michroma (display) · Syncopate (eyebrow) · Geist + Geist Mono (body).
   Colour: brand navy #0d1520 + orange #E8641A, unchanged.
   ============================================================================= */

/* ---- Self-hosted fonts (latin woff2; subset later for perf) ---- */
@font-face{font-family:Michroma;src:url('vendor/fonts/michroma-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Syncopate;src:url('vendor/fonts/syncopate-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Syncopate;src:url('vendor/fonts/syncopate-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:GeistRX;src:url('vendor/fonts/geist-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:GeistRX;src:url('vendor/fonts/geist-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:GeistRX;src:url('vendor/fonts/geist-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:GeistMonoRX;src:url('vendor/fonts/geistmono-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---- Design tokens ---- */
:root{
  --rx-navy:#0d1520; --rx-navy-deep:#0a1420; --rx-navy-mid:#1f2d40; --rx-card:#152030;
  --rx-orange:#E8641A; --rx-orange-h:#cf5715;
  --rx-t-hi:#eef3f8; --rx-t:#c3ced9; --rx-t-lo:#8592a1; --rx-t-dim:#5d6b7a;
  --rx-line:rgba(255,255,255,.09); --rx-line-2:rgba(255,255,255,.14);
  --rx-ease:cubic-bezier(.22,.61,.36,1);
  --rx-fdisplay:Michroma,"Segoe UI",system-ui,sans-serif;
  --rx-fsub:Syncopate,"Segoe UI",system-ui,sans-serif;
  --rx-fbody:GeistRX,system-ui,"Segoe UI",sans-serif;
  --rx-fmono:GeistMonoRX,ui-monospace,"Consolas",monospace;
  --rx-wrap:1440px;
}

/* ---- shared helpers ---- */
.rx-wrap{max-width:var(--rx-wrap);margin:0 auto;padding:0 28px}
.rx-eyebrow{font-family:var(--rx-fsub);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-orange)}
.rx-mono{font-family:var(--rx-fmono)}
.rx-section{padding:72px 0 20px}
.rx-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
/* section TITLE = the short section tag, big display (H1 font), like a hero line */
.rx-section-head h2{font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(21px,3vw,36px);line-height:1.2;letter-spacing:0;text-transform:uppercase;color:var(--rx-t-hi);text-wrap:balance;max-width:24ch}
/* the descriptive sentence + lead paragraph = readable sub text (Geist) */
.rx-subtitle{font-family:var(--rx-fbody);font-size:clamp(15px,1.7vw,18px);line-height:1.5;color:var(--rx-t);margin-top:14px;max-width:62ch}
.rx-section-head p{font-family:var(--rx-fbody);color:var(--rx-t-lo);max-width:44ch;font-size:14.5px;line-height:1.6}

/* ---- buttons ---- */
.rx-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--rx-fdisplay);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;padding:14px 24px;border-radius:0;text-decoration:none;transition:transform .25s var(--rx-ease),background .25s var(--rx-ease),box-shadow .25s var(--rx-ease),border-color .25s var(--rx-ease),color .25s var(--rx-ease)}
.rx-btn--primary{background:var(--rx-orange);color:var(--rx-navy-deep)}
.rx-btn--primary:hover{background:#FFF92B;color:#0a0e14;transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.rx-btn--ghost{border:1px solid var(--rx-line-2);color:var(--rx-t-hi)}
.rx-btn--ghost:hover{background:#FFF92B;color:#0a0e14;border-color:#FFF92B;transform:translateY(-2px)}

/* =============================================================================
   HERO — widescreen AI-video slot, headline overlaid
   ============================================================================= */
/* Full-screen hero: dark video slot; copy centered at the bottom; capability bar
   transparent, sitting on the video. No canvas/WebGL, no orange, no pattern. */
.rx-hero{position:relative;overflow:hidden;background:var(--rx-navy)}
.rx-hero__media{position:absolute;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:1;background:linear-gradient(180deg,#0c1626,#0a1220)}
.rx-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.rx-hero::after{content:"";position:absolute;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,32,.12),rgba(10,20,32,.5) 68%,rgba(10,20,32,.82) 94%,#0d1520)}
.rx-hero__copy{position:relative;z-index:3;text-align:center;max-width:1280px;margin:0 auto;width:100%;padding:0 28px}
/* Headline block fills the first screen (bottom-anchored) so on load only eyebrow + H1 show; the
   sub + buttons sit in .rx-hero__more just below the fold and reveal on scroll (CEO 2026-08-17). */
.rx-hero__headline{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:10vh}
.rx-hero__more{padding:5vh 0 9vh}
.rx-hero__copy .rx-eyebrow{display:block;font-family:var(--rx-fdisplay);font-weight:400;letter-spacing:0;font-size:clamp(15px,2.1vw,30px);line-height:1.25;opacity:0;transform:translateY(12px);animation:rx-rise .8s var(--rx-ease) .15s forwards}
.rx-hero h1{font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(14px,2vw,28px);line-height:1.25;letter-spacing:0;text-transform:uppercase;color:var(--rx-t-hi);margin:8px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(16px);animation:rx-rise .9s var(--rx-ease) .28s forwards}
.rx-hero h1 span{display:block}
@media(min-width:760px){.rx-hero h1 span{white-space:nowrap}}
/* highlighted second line, 20% larger */
.rx-hero h1 em{font-style:normal;color:var(--rx-orange);font-size:1.2em}
.rx-hero__sub{font-family:var(--rx-fbody);margin:0 auto;max-width:none;font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:var(--rx-t);opacity:0;transform:translateY(16px);animation:rx-rise .9s var(--rx-ease) .42s forwards}
@media(min-width:900px){.rx-hero__sub{white-space:nowrap}}
.rx-hero__btns{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(16px);animation:rx-rise .9s var(--rx-ease) .56s forwards}
.rx-hero__vtag{position:absolute;z-index:3;top:22px;right:28px;display:inline-flex;align-items:center;gap:9px;font-family:var(--rx-fmono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-t-lo);background:rgba(10,20,32,.4);border:1px solid var(--rx-line);padding:8px 13px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(max-width:620px){.rx-hero__vtag{display:none}}
@keyframes rx-rise{to{opacity:1;transform:none}}

/* =============================================================================
   ICON BAR
   ============================================================================= */
.rx-iconbar{border-bottom:1px solid var(--rx-line);background:var(--rx-navy-deep)}
.rx-iconbar .rx-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:22px 28px}
.rx-icell{display:flex;align-items:center;gap:11px;padding:8px 10px;flex:1 1 auto;min-width:150px}
.rx-icell svg{width:32px;height:32px;stroke:var(--rx-orange);stroke-width:1.5;fill:none;flex:none;stroke-linecap:round;stroke-linejoin:round}
.rx-icell .rx-lab{font-family:var(--rx-fbody);font-size:13.5px;font-weight:600;color:var(--rx-t-hi);letter-spacing:-.01em}
.rx-icell .rx-lab span{display:block;font-size:11.5px;color:var(--rx-t-lo);font-weight:400}

/* =============================================================================
   THREE LAYER CARDS
   ============================================================================= */
.rx-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rx-layer{position:relative;min-height:460px;border-radius:0;border:0;background:var(--rx-card);padding:28px 26px;display:flex;flex-direction:column;text-decoration:none;transition:background .3s var(--rx-ease),transform .3s var(--rx-ease),box-shadow .3s var(--rx-ease)}
/* the name is the TITLE (50% larger), top-aligned so the three line up */
.rx-layer h3{font-family:var(--rx-fdisplay);font-weight:400;font-size:18px;line-height:1.28;letter-spacing:0;text-transform:uppercase;color:var(--rx-t-hi);margin:0;text-shadow:0 1px 5px rgba(8,12,18,.65)}
/* the orange label (sub text) sits BELOW the title, no number, H1 font all-caps */
.rx-layer__k{font-family:var(--rx-fdisplay);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-orange);margin-top:12px;text-shadow:0 1px 5px rgba(8,12,18,.7)}
/* description reveals only on hover */
.rx-layer p{font-family:var(--rx-fbody);font-size:14px;color:var(--rx-t);margin:0;max-width:38ch;line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--rx-ease),opacity .35s var(--rx-ease),margin .4s var(--rx-ease)}
/* hover: card turns bright yellow, all text goes black, description appears */
.rx-layer:hover{background:#FFF92B;border-color:#FFF92B;transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(0,0,0,.7)}
.rx-layer:hover h3,.rx-layer:hover .rx-layer__k{color:#0a0e14;text-shadow:none}
.rx-layer:hover p{max-height:240px;opacity:1;margin-top:18px;color:#0a0e14}
@media(hover:none){.rx-layer p{max-height:240px;opacity:1;margin-top:18px}}
.rx-lw{background:radial-gradient(80% 120% at 25% 20%,rgba(56,140,220,.5),transparent 60%),linear-gradient(160deg,#122236,#0b1524)}
.rx-la{background:radial-gradient(80% 120% at 75% 20%,rgba(60,180,150,.45),transparent 60%),linear-gradient(160deg,#0f2630,#0b1622)}
.rx-lg{background:radial-gradient(85% 120% at 30% 18%,rgba(232,100,26,.5),transparent 60%),linear-gradient(160deg,#221610,#0f1420)}
/* Sec 1 depth cards — bright on-brand generated backgrounds (2026-08-18). The images are now high-key/light
   (avg luma ~237), so a light TOP-ONLY scrim keeps the white title + orange label legible while the rest of
   the card stays bright and shows the image; the :hover shorthand above still clears to solid yellow. */
.rx-layer--web,.rx-layer--tools,.rx-layer--brain{background-size:cover;background-repeat:no-repeat;background-position:center}
.rx-layer--web{background-image:linear-gradient(180deg,rgba(10,14,20,.82) 0%,rgba(10,14,20,.55) 14%,rgba(10,14,20,.12) 32%,rgba(10,14,20,0) 48%),url('images/depth-website.webp')}
.rx-layer--tools{background-image:linear-gradient(180deg,rgba(10,14,20,.82) 0%,rgba(10,14,20,.55) 14%,rgba(10,14,20,.12) 32%,rgba(10,14,20,0) 48%),url('images/depth-tools.webp')}
.rx-layer--brain{background-image:linear-gradient(180deg,rgba(10,14,20,.82) 0%,rgba(10,14,20,.55) 14%,rgba(10,14,20,.12) 32%,rgba(10,14,20,0) 48%),url('images/depth-brain.webp')}
@media(max-width:760px){.rx-layers{grid-template-columns:1fr}}

/* =============================================================================
   NINE AGENTIC CARDS — squares only, 3 large + 6 small (Xbox style)
   grid-auto-rows is set to the column width by a small script for true squares.
   ============================================================================= */
.rx-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:14px;grid-auto-flow:dense;padding-bottom:40px}
.rx-card{position:relative;grid-column:span 1;border-radius:0;overflow:hidden;border:1px solid var(--rx-line);background:var(--rx-navy-mid);isolation:isolate;cursor:pointer;text-decoration:none;transition:transform .35s var(--rx-ease),border-color .35s var(--rx-ease),background .3s var(--rx-ease),box-shadow .35s var(--rx-ease)}
.rx-card--lg{grid-column:span 2;grid-row:span 2}
.rx-card__img{position:absolute;inset:0;z-index:1;transition:transform .6s var(--rx-ease),filter .4s var(--rx-ease),opacity .3s var(--rx-ease)}
.rx-card::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,20,32,.05) 30%,rgba(10,20,32,.5) 62%,rgba(10,20,32,.92) 100%);transition:opacity .3s var(--rx-ease)}
.rx-card__body{position:absolute;inset:0;z-index:3;padding:18px;display:flex;flex-direction:column;justify-content:flex-end}
.rx-card--lg .rx-card__body{padding:24px}
.rx-card__idx{font-family:var(--rx-fmono);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.65);position:absolute;top:16px;left:18px}
.rx-card__badge{position:absolute;top:15px;left:18px;font-family:var(--rx-fmono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-navy-deep);background:var(--rx-orange);padding:4px 9px;border-radius:6px;font-weight:700}
.rx-card h3{font-family:var(--rx-fdisplay);font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:uppercase;color:#fff;line-height:1.22}
.rx-card--lg h3{font-size:18px;line-height:1.18}
.rx-card__desc{font-family:var(--rx-fbody);margin-top:7px;font-size:13px;color:rgba(255,255,255,.72);max-width:40ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--rx-ease),opacity .35s var(--rx-ease),margin .45s var(--rx-ease)}
.rx-card--lg .rx-card__desc{max-height:none;opacity:1;font-size:14px;margin-top:12px}
.rx-card__go{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--rx-fmono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rx-orange);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--rx-ease),transform .35s var(--rx-ease)}
.rx-card:hover{transform:translateY(-4px);background:#FFF92B;border-color:#FFF92B;box-shadow:0 24px 50px -22px rgba(0,0,0,.7)}
.rx-card:hover .rx-card__img{opacity:0}
.rx-card:hover::after{opacity:0}
.rx-card:hover h3,.rx-card:hover .rx-card__idx,.rx-card:hover .rx-card__go,.rx-card:hover .rx-card__badge{color:#0a0e14}
.rx-card:hover .rx-card__desc{max-height:140px;opacity:1;margin-top:8px;color:#0a0e14}
.rx-card:hover .rx-card__go{opacity:1;transform:none}
/* small cards: pin the title to a fixed top anchor on hover so its position does not shift with description length */
.rx-card:not(.rx-card--lg):hover .rx-card__body{justify-content:flex-start}

/* Doorway-tile photos — real bright photoreal art (2026-08-17). Reception + Sales via Flux;
   Quotes..Reports via Google Vertex (gemini-3.1-flash-image). Text-free. The .rx-card::after
   scrim keeps the title legible; the :hover rule still clears the image to solid yellow. */
.rx-s1{background:url('images/tile-reception.webp') center/cover}
.rx-s2{background:url('images/tile-sales.webp') center/cover}
.rx-s3{background:url('images/tile-quotes.webp') center/cover}
.rx-s4{background:url('images/tile-paperwork.webp') center/cover}
.rx-s5{background:url('images/tile-approvals.webp') center/cover}
.rx-s6{background:url('images/tile-support.webp') center/cover}
.rx-s7{background:url('images/tile-invoices.webp') center/cover}
.rx-s8{background:url('images/tile-reordering.webp') center/cover}
.rx-s9{background:url('images/tile-reports.webp') center/cover}

@media(max-width:860px){
  .rx-card__desc{max-height:120px;opacity:1;margin-top:8px}
  /* small cards on mobile: pin the title to a fixed anchor in the middle of the top third (cards are square, so padding-top % == % of height) */
  .rx-card:not(.rx-card--lg) .rx-card__body{justify-content:flex-start;padding-top:23%}
}
@media(min-width:861px){
  .rx-cards{grid-template-columns:repeat(6,1fr)}
  .rx-cards>.rx-card{grid-column:auto;grid-row:auto}
  .rx-cards>.rx-card:nth-child(1){grid-column:1/3;grid-row:1/3}
  .rx-cards>.rx-card:nth-child(2){grid-column:3/5;grid-row:1/3}
  .rx-cards>.rx-card:nth-child(3){grid-column:5/7;grid-row:1/3}
  .rx-cards>.rx-card:nth-child(4){grid-column:1/2;grid-row:3/4}
  .rx-cards>.rx-card:nth-child(5){grid-column:2/3;grid-row:3/4}
  .rx-cards>.rx-card:nth-child(6){grid-column:3/4;grid-row:3/4}
  .rx-cards>.rx-card:nth-child(7){grid-column:4/5;grid-row:3/4}
  .rx-cards>.rx-card:nth-child(8){grid-column:5/6;grid-row:3/4}
  .rx-cards>.rx-card:nth-child(9){grid-column:6/7;grid-row:3/4}
  /* desktop resting: align small-card titles by their FIRST line, so a wrapping 2nd word ("Customer support") drops below the shared baseline instead of pushing the first word up off it. Reset on hover, where the card opens and the title takes its full height above the description. */
  .rx-cards>.rx-card:not(.rx-card--lg) h3{height:1.22em;overflow:visible}
  .rx-cards>.rx-card:not(.rx-card--lg):hover h3{height:auto}
}

@media (prefers-reduced-motion:reduce){
  .rx-hero .rx-eyebrow,.rx-hero h1,.rx-hero__sub,.rx-hero__btns{animation:none;opacity:1;transform:none}
  .rx-card,.rx-layer,.rx-btn{transition:none}
}

/* =============================================================================
   SECTION CONTENT COMPONENTS (homepage Sec 1-6)
   ============================================================================= */
.rx-section-head--stack{display:block}
.rx-lead{font-family:var(--rx-fbody);color:var(--rx-t);font-size:15px;line-height:1.62;max-width:64ch;margin:14px 0 26px}
.rx-close{text-align:center;font-family:var(--rx-fbody);color:var(--rx-t-lo);font-size:14.5px;margin:26px auto 0;max-width:62ch}
.rx-agentic-cta{text-align:center;margin-top:24px}
/* Integration marquee, moved to the foot of the Automation/Agentic section, directly above the capability row (CEO 2026-08-17). No top border, no label — a quiet logo band. Top margin separates it from the stage above; base bottom padding (28px) is zeroed so the whole logos→divider gap is the caps' margin-top alone (30px, CEO "60% closer" 2026-08-17). */
.intg-wall{margin-top:40px;padding-bottom:0}

/* Sec 1 depths: reuse .rx-layer look as clickable pillar links */
.rx-layers .rx-layer{cursor:pointer}

/* Sec 2 two-column contrast */
.rx-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rx-panel{border:1px solid var(--rx-line);border-radius:0;padding:24px 26px;background:var(--rx-card)}
.rx-panel--hot{border-color:rgba(232,100,26,.35);background:linear-gradient(160deg,#1a1712,var(--rx-card))}
.rx-panel__k{font-family:var(--rx-fsub);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-orange);display:block;margin-bottom:12px}
.rx-panel p{font-family:var(--rx-fbody);color:var(--rx-t);font-size:15px;line-height:1.6}
.rx-payoff{text-align:center;font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(15px,1.8vw,18px);letter-spacing:0;color:var(--rx-t-hi);margin-top:26px;text-transform:uppercase;line-height:1.45;max-width:30ch;margin-left:auto;margin-right:auto}
@media(max-width:700px){.rx-two{grid-template-columns:1fr}}

/* Sec 4 numbered steps */
.rx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rx-step{border:1px solid var(--rx-line);border-radius:0;padding:24px;background:var(--rx-card)}
.rx-step__n{font-family:var(--rx-fmono);font-size:13px;color:var(--rx-orange);letter-spacing:.1em}
.rx-step h3{font-family:var(--rx-fdisplay);font-weight:400;font-size:14px;color:var(--rx-t-hi);margin:12px 0 8px;text-transform:uppercase;line-height:1.3}
.rx-step p{font-family:var(--rx-fbody);font-size:14px;color:var(--rx-t);line-height:1.55}
@media(max-width:700px){.rx-steps{grid-template-columns:1fr}}
/* Sec 4: left title tabs; hovering a title reveals its text on the right (pure CSS, :has()-driven).
   Panels are always in the DOM (SEO/AT-safe); on touch/narrow they stack and all show. Card
   treatment dropped per CEO 2026-08-17. */
.rx-tabs{display:grid;grid-template-columns:minmax(180px,.82fr) 1.25fr;column-gap:48px;align-items:start;margin-top:6px}
.rx-tab{grid-column:1;cursor:pointer;padding:16px 0;font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(18px,1.9vw,26px);text-transform:uppercase;color:var(--rx-t-dim);line-height:1.15;transition:color .3s var(--rx-ease)}
.rx-tab[data-i="1"]{grid-row:1}
.rx-tab[data-i="2"]{grid-row:2;border-top:1px solid var(--rx-line)}
.rx-tab[data-i="3"]{grid-row:3;border-top:1px solid var(--rx-line)}
.rx-tab-panel{grid-column:2;grid-row:1/4;align-self:start;opacity:0;transition:opacity .35s var(--rx-ease)}
.rx-tab-panel p{font-family:var(--rx-fbody);font-size:clamp(15px,1.4vw,17px);line-height:1.62;color:var(--rx-t);margin:0;max-width:44ch}
/* default state (nothing hovered): first tab + first panel active */
.rx-tabs:not(:has(.rx-tab:hover)) .rx-tab[data-i="1"]{color:var(--rx-t-hi)}
.rx-tabs:not(:has(.rx-tab:hover)) .rx-tab-panel[data-i="1"]{opacity:1}
/* hovered tab + its panel */
.rx-tab:hover{color:var(--rx-t-hi)}
.rx-tab:hover + .rx-tab-panel{opacity:1}
/* touch / narrow: no hover to rely on, so stack and show every panel under its title */
@media (max-width:760px),(hover:none){
  .rx-tabs{display:block}
  .rx-tab{display:block;grid-row:auto;border-top:0;padding:0;margin-top:26px;color:var(--rx-t-hi)}
  .rx-tab[data-i="1"]{margin-top:0}
  .rx-tab-panel{grid-row:auto;opacity:1;margin:8px 0 0}
}

/* Sec 5 websites kept */
.rx-kept{border:1px solid var(--rx-line);border-radius:0;padding:28px 30px;background:linear-gradient(160deg,#0f1826,var(--rx-navy-deep))}
.rx-kept p{font-family:var(--rx-fbody);color:var(--rx-t);font-size:15px;line-height:1.62;max-width:74ch;margin-bottom:10px}
.rx-kept a{color:var(--rx-orange);text-decoration:none;font-family:var(--rx-fmono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* Sec 5 "Website Now, Agents Later?" — one-line title 40% larger (max one-line at this container is 50.8px; fluid vw keeps it one line on any desktop width, wraps only below phone width). */
.rx-section-head h2.rx-h2-solo{font-size:clamp(28px,3.9vw,50px);max-width:none;white-space:nowrap}
@media(max-width:760px){.rx-section-head h2.rx-h2-solo{white-space:normal;font-size:clamp(24px,6.5vw,34px)}}
/* Sec 5 CTA as a yellow text link (not a button), per CEO 2026-08-17 */
.rx-link-y{color:#FFF92B;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-family:var(--rx-fbody);font-size:15px;font-weight:500;white-space:nowrap;margin-left:4px;transition:opacity .25s var(--rx-ease)}
.rx-link-y:hover{opacity:.8}
/* FAQ still uses the legacy .faq chrome (migration placeholder). Bring it in line with the redesign,
   per CEO 2026-08-17: drop the fixed square grid pattern, and neutralize the repeated orange accents
   (the "FAQ" tag + the 10 toggle icons) that read as an orange haze. Background is already redesign navy. */
.faq{background-color:transparent;background-image:none;background-attachment:initial}
.faq .section-tag{color:var(--rx-t-lo);font-family:var(--rx-fmono)}
.faq .faq-icon{color:var(--rx-t-lo)}
/* FAQ typography onto the redesign fonts (was legacy Inter, matching the un-migrated footer). */
.faq-aside h2{font-family:var(--rx-fdisplay);font-weight:400;letter-spacing:0;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.18}
.faq-aside p{font-family:var(--rx-fbody)}
.faq-aside-cta{font-family:var(--rx-fbody);color:#FFF92B}
.faq-q{font-family:var(--rx-fbody);font-weight:500}
.faq-a{font-family:var(--rx-fbody)}
/* In-answer links (city/service links, "See current pricing", "Start Here") must read as links,
   not disappear into the body grey. Redesign yellow + underline. Added CEO 2026-08-18. */
.faq-a a{color:#FFF92B;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s var(--rx-ease)}
.faq-a a:hover{opacity:.82}
/* Footer typography onto the redesign fonts (was legacy Inter, like the FAQ). Background already
   sits on --dc-navy-deep = #0a1420 = the redesign body, and the AA grey (--dc-d50) is kept. The
   brand logo lockup is left untouched. Per CEO 2026-08-17. */
.footer-brand p{font-family:var(--rx-fbody)}
.footer-col h2,.footer-col h3,.footer-col h4{font-family:var(--rx-fmono)}
.footer-col ul li a{font-family:var(--rx-fbody)}
.footer-bottom p{font-family:var(--rx-fbody)}

/* Sec 6 closing CTA band */
.rx-cta-band{text-align:center;padding:64px 0 24px}
.rx-cta-band h2{font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(21px,3vw,36px);line-height:1.2;letter-spacing:0;text-transform:uppercase;color:var(--rx-t-hi);max-width:26ch;margin:0 auto;text-wrap:balance}
.rx-cta-band .rx-subtitle{font-family:var(--rx-fbody);color:var(--rx-t);margin:14px auto 0;max-width:56ch;font-size:clamp(15px,1.7vw,18px);line-height:1.5;text-align:center}
.rx-cta-band p{font-family:var(--rx-fbody);color:var(--rx-t-lo);margin:12px auto 0;max-width:58ch;font-size:15px;line-height:1.6}
.rx-cta-band .rx-btn{margin-top:26px}

/* Sec 3 tiles: descriptor reveal on mouse; always visible on touch (real text always, SEO-safe) */
@media (hover:none){.rx-card__desc{max-height:140px;opacity:1;margin-top:8px}}

/* =============================================================================
   CEO 2026-08-16: remove ALL orange hue, canvas/WebGL, and pattern backgrounds
   site-wide. Card/layer scenes become clean neutral-dark placeholders until the
   real Flux/Veo imagery lands. Orange survives ONLY as a foreground accent
   (buttons, the highlighted headline word, small labels).
   ============================================================================= */
.rx-lw,.rx-la,.rx-lg{background:linear-gradient(160deg,#141d2b,#0c1420)}
.rx-panel--hot{border-color:var(--rx-line-2);background:var(--rx-card)}

/* System buttons: right-angle corners + yellow active state everywhere, including the
   legacy nav ("Free Consultation") and FAQ buttons that still render on this page. */
.btn-nav,.faq-aside-cta{border-radius:0}
.btn-nav:hover,.faq-aside-cta:hover{background:#FFF92B;color:#0a0e14;border-color:#FFF92B}

/* =============================================================================
   SEC 2 — Automation VS Agentic: a centered toggle switch flips between two
   mirrored views (text + image placeholder). Automation = image LEFT / text
   RIGHT; Agentic = text LEFT / image RIGHT. Text is plain sub-font (Geist)
   paragraphs, no card. Pure CSS (one visually-hidden checkbox); both views live
   in the DOM stacked in one grid cell and cross-fade (real text always present,
   SEO-safe). Default (unchecked) = Automation; checked = Agentic.
   ============================================================================= */
.rx-vs__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* switch row: AUTOMATION —line— AGENTIC as one compact centred unit. The WORDS are
   clickable labels (each selects its side); the line (1fr) stretches between them so it
   sits close to both words (CEO 2026-08-17, was a 3-col grid with a short centred line). */
.rx-vs__switch{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2vw,30px);align-items:center;margin:0 0 46px;font-weight:400}
.rx-vs__switch>*{justify-self:center;text-align:center}
.rx-vs__word{font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(19px,3.4vw,34px);line-height:1.1;text-transform:uppercase;letter-spacing:0;color:var(--rx-t-hi);cursor:pointer;transition:color .3s var(--rx-ease)}
.rx-vs__word:hover{color:#FFF92B}
#rx-vs-auto:checked ~ .rx-vs__switch .rx-vs__word--auto{color:var(--rx-t-hi)}
#rx-vs-agentic:checked ~ .rx-vs__switch .rx-vs__word--agentic{color:var(--rx-t-hi)}
/* both words stay white; the INACTIVE word blinks yellow twice the MOMENT the travelling
   light reaches it — the flash and the light share one 4s clock so they stay in phase. */
#rx-vs-auto:checked ~ .rx-vs__switch .rx-vs__word--agentic,
#rx-vs-agentic:checked ~ .rx-vs__switch .rx-vs__word--auto{animation:rx-vs-flash 4s linear infinite}
@keyframes rx-vs-flash{0%,45%,54%,61%,100%{color:var(--rx-t-hi)}49%,57%{color:#FFF92B}}
#rx-vs-auto:focus-visible ~ .rx-vs__switch .rx-vs__word--auto,
#rx-vs-agentic:focus-visible ~ .rx-vs__switch .rx-vs__word--agentic{outline:2px solid var(--rx-orange);outline-offset:6px}
/* toggle — a thin line with a single yellow light that travels ONE WAY, from the active
   word to the inactive word, then fades (no back-and-forth, no circle knob). Direction is
   set by which side is checked. Two invisible half-labels make each half of the line click
   to that side too. --gw = glow width. (CSS only, no WebGL, per the no-canvas lock.) */
.rx-vs__toggle{--gw:40px;position:relative;width:100%;height:26px;display:inline-block}
.rx-vs__toggle::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--rx-line-2);transform:translateY(-50%);z-index:0}
.rx-vs__toggle::after{content:"";position:absolute;top:50%;left:0;width:var(--gw);height:16px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,249,43,.55),transparent 70%);filter:blur(3px);pointer-events:none;z-index:1;opacity:0}
.rx-vs__half{position:absolute;top:-8px;bottom:-8px;width:50%;cursor:pointer;z-index:2}
.rx-vs__half:first-of-type{left:0}
.rx-vs__half:last-of-type{right:0}
/* light travels active->inactive: lr when Automation (left) is active, rl when Agentic (right) is.
   It fades out at the far end and resets invisibly (opacity 0 at both loop ends) — never travels back. */
#rx-vs-auto:checked ~ .rx-vs__switch .rx-vs__toggle::after{animation:rx-vs-travel-lr 4s linear infinite}
#rx-vs-agentic:checked ~ .rx-vs__switch .rx-vs__toggle::after{animation:rx-vs-travel-rl 4s linear infinite}
@keyframes rx-vs-travel-lr{0%{left:0;opacity:0}6%{opacity:.6}45%{left:calc(100% - var(--gw));opacity:.6}60%,100%{left:calc(100% - var(--gw));opacity:0}}
@keyframes rx-vs-travel-rl{0%{left:calc(100% - var(--gw));opacity:0}6%{opacity:.6}45%{left:0;opacity:.6}60%,100%{left:0;opacity:0}}
/* stage: both views stacked in one cell, cross-fade */
.rx-vs__stage{display:grid;margin-top:4px}
.rx-vs__view{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--rx-ease),transform .45s var(--rx-ease),visibility .45s}
#rx-vs-auto:checked ~ .rx-vs__stage .rx-vs__view--auto{opacity:1;visibility:visible;transform:none}
#rx-vs-agentic:checked ~ .rx-vs__stage .rx-vs__view--agentic{opacity:1;visibility:visible;transform:none}
/* image fills its half; its OUTER edge lines up with the cards above (inside the
   wrap, NOT the monitor edge). 4:3 box, neutral-dark until the real imagery lands. */
.rx-vs__media{width:100%;aspect-ratio:4/3;background:#0c1420 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
/* Sec 2 automation-vs-agentic images (2026-08-17) — text is a separate column, so no overlay needed */
.rx-vs__view--auto .rx-vs__media{background-image:url('images/vs-automation.webp')}
.rx-vs__view--agentic .rx-vs__media{background-image:url('images/vs-agentic.webp')}
.rx-vs__media span{font-family:var(--rx-fmono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rx-t-dim)}
/* text sits UNDER its own title (Automation left, Agentic right); headline in the
   display font; headline starts 15% of the image height below the image top. padding
   % is measured on the column width, and 11.25% of the column == 15% of a 4:3 image
   (0.15 x 0.75), since the text column and the image column are equal 1fr widths. */
.rx-vs__text{padding-top:11.25%}
.rx-vs__text p{font-family:var(--rx-fbody);color:var(--rx-t);font-size:15.5px;line-height:1.65;margin:0 0 16px;max-width:46ch}
.rx-vs__text .rx-vs__lead{font-family:var(--rx-fdisplay);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.5vw,32px);line-height:1.2;letter-spacing:0;color:var(--rx-t-hi);margin:0 0 22px}
.rx-vs__text .rx-vs__pay{color:var(--rx-t-hi);margin-bottom:0}
.rx-vs__flip{display:inline-block;margin:20px 0 0;cursor:pointer}
/* the 5 capability items moved from the hero — a strip across the bottom of Sec 2 */
.rx-vs__caps{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rx-line)}
@media(max-width:760px){
  .rx-vs__switch{grid-template-columns:auto auto auto;justify-content:center;gap:14px;max-width:none}
  .rx-vs__toggle{width:120px}
  .rx-vs__view{grid-template-columns:1fr;gap:18px}
  .rx-vs__view--auto .rx-vs__media,.rx-vs__view--agentic .rx-vs__media{order:2}
  .rx-vs__text{padding-top:0}
}
@media(max-width:480px){
  .rx-vs__word{font-size:14px}
  .rx-vs__toggle{width:70px}
  .rx-vs__switch{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .rx-vs__view,.rx-vs__word{transition:none}
  .rx-vs__toggle::after,.rx-vs__word{animation:none}
  .rx-vs__toggle::after{opacity:.5;left:0}
}


/* =============================================================================
   CONTENT-PAGE KIT (pillar + doorway pages) — 2026-08-17
   Reusable long-form components so the new content pages match the redesigned
   homepage they link from: page hero, statement headings, prose, comparison
   table, lists, and the nine-job grid. Section kicker reuses .rx-eyebrow.
   ============================================================================= */
.rx-phero{padding:60px 0 34px;border-bottom:1px solid var(--rx-line)}
.rx-phero .rx-eyebrow{display:block}
.rx-phero h1{font-family:var(--rx-fdisplay);font-weight:400;font-size:clamp(19px,2.8vw,32px);line-height:1.28;letter-spacing:0;text-transform:uppercase;color:var(--rx-t-hi);margin:16px 0 0;max-width:22ch;text-wrap:balance}
.rx-phero__sub{font-family:var(--rx-fbody);font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--rx-t);margin:22px 0 0;max-width:60ch}
.rx-phero__cta{margin-top:28px}
/* Doorway hero with the homepage tile photo BESIDE the headline (2026-08-20, CEO art-dir).
   The photo lives in a RIGHT-anchored panel (.rx-phero__img, carrying the matching .rx-sN url)
   so the subject sits to the right of the text and each one can be framed with its own inline
   background-position. A left->right scrim (::before) keeps the copy legible on the left while
   letting the photo stay bright on the right; ::after blends the panel's top+bottom edges fully
   into the body navy (#0a1420) so there is no bright seam-line. No border. Scoped to --photo so
   the 15 other .rx-phero pages are untouched. */
.rx-phero--photo{position:relative;overflow:hidden;padding:118px 0 100px;border-bottom:0}
.rx-phero__img{position:absolute;top:0;bottom:0;right:0;width:66%;z-index:0;background-repeat:no-repeat;background-size:cover;background-position:center}
/* shared street-map-with-a-pin for the 3 GTA location-page heroes (2026-08-20) */
.rx-phero__img--map{background-image:url('images/map-gta.webp')}
/* shared glowing blue grid backdrop for restaurant / service-business / cost heroes (CEO: grid only, no info sign) */
.rx-phero__img--grid{background-image:url('images/grid-bg.webp')}
/* shared luxury gallery-opening hero for the 7 case-study build pages (CEO 2026-08-20) */
.rx-phero__img--gallery{background-image:url('images/gallery-hero.webp')}
/* left scrim: solid navy over the text column, fading to clear across the photo (brighter tint) */
.rx-phero--photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a1420 0%,#0a1420 30%,rgba(10,20,32,.74) 45%,rgba(10,20,32,.28) 60%,rgba(10,20,32,0) 76%)}
/* edge blend: melt the panel's top + bottom into the page so there is no bright line */
.rx-phero--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,32,.45) 0%,rgba(10,20,32,0) 14%,rgba(10,20,32,0) 84%,#0a1420 100%)}
.rx-phero--photo > .rx-wrap{position:relative;z-index:2}
@media(max-width:720px){
  /* narrow: photo becomes a full-bleed backdrop again. Lighter scrim than before (CEO: mobile
     tint was too dark) — still dark enough at the top, where the eyebrow + H1 sit, to stay legible. */
  .rx-phero--photo{padding:92px 0 72px}
  .rx-phero__img{width:100%}
  .rx-phero--photo::before{background:linear-gradient(180deg,rgba(10,20,32,.74) 0%,rgba(10,20,32,.6) 52%,rgba(10,20,32,.5) 100%)}
  .rx-phero--photo::after{background:linear-gradient(180deg,rgba(10,20,32,0) 78%,#0a1420 100%)}
  /* per-image mobile zoom (reception a little tighter, CEO) */
  .rx-phero__img--mz{background-size:140%}
  /* map: zoom in hard on mobile so the fine street grid reads as a clean backdrop, not busy
     detail behind the text; and shift the (centre) pin into the top-right corner, clear of the
     left-aligned headline so it never sits under the orange text (CEO). */
  .rx-phero__img--map{background-size:220%;background-position:16% 96%}
  /* grid backdrop: zoom in a little on mobile so the grid cells are larger and read as a clean
     backdrop rather than dense lines behind the full-width text */
  .rx-phero__img--grid{background-size:150%;background-position:center}
}

/* About: FULL-BLEED team hero. Unlike the right-panel pages, the whole diverse team of agents
   must stay visible, so the photo fills the width and the headline is bottom-anchored over a
   bottom scrim (poster style). Combine with .rx-phero--photo (supplies position/edge-blend base)
   and .rx-phero__img--team (the image). */
.rx-phero--full{min-height:min(80vh,680px);display:flex;flex-direction:column;justify-content:flex-end;padding:128px 0 54px}
.rx-phero--full .rx-phero__img{width:100%;background-position:center 20%}
/* bottom scrim for legibility + top touch so the eyebrow reads; team stays visible in the middle */
.rx-phero--full::before{background:linear-gradient(180deg,rgba(10,20,32,.34) 0%,rgba(10,20,32,0) 24%,rgba(10,20,32,.14) 48%,rgba(10,20,32,.72) 78%,rgba(10,20,32,.95) 100%)}
.rx-phero--full::after{background:linear-gradient(180deg,rgba(10,20,32,.45) 0%,rgba(10,20,32,0) 12%,rgba(10,20,32,0) 92%,#0a1420 100%)}
.rx-phero__img--team{background-image:url('images/about-team.webp')}
@media(max-width:720px){
  .rx-phero--full{min-height:64vh;padding:96px 0 40px}
  /* narrow: keep the centre (brand) agent framed */
  .rx-phero--full .rx-phero__img{background-position:center 18%}
}

.rx-csec{padding:54px 0 0}
.rx-csec > .rx-wrap > .rx-eyebrow{display:block;margin-bottom:12px}
.rx-h2{font-family:var(--rx-fbody);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-.01em;color:var(--rx-t-hi);margin:0;max-width:36ch;text-wrap:balance}
.rx-prose{font-family:var(--rx-fbody);font-size:16px;line-height:1.7;color:var(--rx-t);max-width:66ch;margin:18px 0 0}
.rx-h2 + .rx-prose{margin-top:20px}
.rx-prose strong{color:var(--rx-t-hi);font-weight:700}

.rx-table-wrap{overflow-x:auto;margin-top:24px;-webkit-overflow-scrolling:touch}
.rx-table{width:100%;border-collapse:collapse;font-family:var(--rx-fbody);font-size:14.5px;min-width:540px}
.rx-table th,.rx-table td{text-align:left;padding:13px 18px;border:1px solid var(--rx-line);vertical-align:top;line-height:1.5}
.rx-table thead th{font-family:var(--rx-fmono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--rx-t-lo);background:var(--rx-navy)}
.rx-table tbody th{color:var(--rx-t-hi);font-weight:700;white-space:nowrap;background:rgba(255,255,255,.02)}
.rx-table td{color:var(--rx-t)}
.rx-table td:last-child{color:var(--rx-t-hi)}

.rx-list{margin:22px 0 0;padding:0;list-style:none;max-width:70ch}
.rx-list li{position:relative;padding:0 0 0 30px;margin:0 0 16px;font-family:var(--rx-fbody);font-size:16px;line-height:1.65;color:var(--rx-t)}
.rx-list li strong{color:var(--rx-t-hi);font-weight:700}
.rx-list--num{counter-reset:rxl}
.rx-list--num li{counter-increment:rxl}
.rx-list--num li::before{content:counter(rxl);position:absolute;left:2px;top:2px;font-family:var(--rx-fmono);font-size:12px;color:var(--rx-orange)}
.rx-list--check li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;background:var(--rx-orange);transform:rotate(45deg)}

.rx-joblist{margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.rx-joblist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rx-joblist{grid-template-columns:1fr}}
.rx-job{display:flex;flex-direction:column;gap:7px;height:100%;padding:18px;border:1px solid var(--rx-line);background:var(--rx-card);text-decoration:none;transition:border-color .25s var(--rx-ease),transform .25s var(--rx-ease)}
.rx-job:hover{border-color:var(--rx-orange);transform:translateY(-2px)}
.rx-job__t{font-family:var(--rx-fdisplay);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--rx-t-hi)}
.rx-job__d{font-family:var(--rx-fbody);font-size:13.5px;line-height:1.5;color:var(--rx-t-lo);flex:1}
.rx-job__go{font-family:var(--rx-fmono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--rx-orange)}

/* Content-page feature image (doorway pages) — PLACEHOLDER until the dedicated imagery
   session (CEO #36). Neutral-dark banner with a mono caption; the target filename is on
   the box's data-fill attribute. To fill later: add background-image (same swap pattern as
   .rx-vs__media / .rx-s1..s9) and delete the caption span. */
.rx-cfig{padding:36px 0 0}
.rx-cfig__box{width:100%;aspect-ratio:21/9;background:#0c1420 center/cover no-repeat;border:1px solid var(--rx-line);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.rx-cfig__box span{font-family:var(--rx-fmono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rx-t-dim)}


/* =============================================================================
   NAV BAR REDESIGN — 2026-08-17 (CEO)
   1+3: nav tabs in the display face (uppercase, white, larger) + pill CTA, DESKTOP
   only (>=769px) so the mobile dropdown keeps its own styling.
   2: HOMEPAGE only (.home) — the bar is transparent over the hero and turns to
   frosted glass the moment the One System section meets the bar's bottom
   (.is-solid, toggled by the inline nav-solid-on-scroll script). Pillar and other
   redesign pages keep the standard sticky glass bar.
   ============================================================================= */
@media(min-width:769px){
  .nav-links{gap:30px}
  .nav-links a{font-family:var(--rx-fdisplay);font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.01em;color:var(--rx-t-hi)}
  .nav-links a:hover{color:#FFF92B}
}
/* Tablet band (769-1023): the wide display tabs + the pill CTA cannot both fit, so ease the
   tabs down slightly and move the CTA to the bottom message bar. Keeps the tabs visible (no
   hamburger) and prevents the horizontal-overflow trap. >=1024px keeps full 15px + the pill. */
@media(min-width:769px) and (max-width:1023px){
  .nav-links{gap:22px}
  .nav-links a{font-size:13.5px}
  .btn-nav{display:none}
  .mobile-quote-bar{display:flex}
}
.btn-nav{border-radius:999px}
.home .navbar,.hero-nav .navbar{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .3s var(--rx-ease),border-color .3s var(--rx-ease),-webkit-backdrop-filter .3s var(--rx-ease),backdrop-filter .3s var(--rx-ease)}
.home .navbar.is-solid,.hero-nav .navbar.is-solid{background:rgba(13,21,32,0.70);border-bottom-color:var(--dc-d07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
/* CTA pill removed from the bar (CEO 2026-08-17): with it gone, anchor the tabs to true page-centre
   (logo stays left in flow, tabs absolutely centred) instead of letting them drift right. Only >=1024px,
   where the centred block clears the logo; in the 769-1023 band the tabs sit naturally (logo-left /
   tabs-right) because a centred block would overlap the logo (measured). */
@media(min-width:1024px){
  .nav-inner{position:relative}
  .nav-inner>nav{position:absolute;left:50%;transform:translateX(-50%)}
}

/* Inner-page nav CTA (CEO #45): the standalone Request-a-Consultation btn-nav was removed;
   the Contact tab carries the CTA emphasis in orange. Home (.home) keeps its own nav untouched. */
body:not(.home) .nav-links a[href="contact.html"]{color:var(--rx-orange)}
body:not(.home) .nav-links a[href="contact.html"]:hover{color:#FFF92B}
/* Root-relative variant for pages one level down (e.g. /blog/) whose nav links carry a leading slash. */
body:not(.home) .nav-links a[href="/contact.html"]{color:var(--rx-orange)}
body:not(.home) .nav-links a[href="/contact.html"]:hover{color:#FFF92B}