/* ============================================================
   FAIMARA — COSMIC FLIGHT DECK
   A cinematic, aerospace-grade reskin layered over the existing
   Faimara stylesheets. Structure, IDs and JS hooks are untouched —
   this file only changes how things look and move.
   ============================================================ */

/* ---------- 1. TOKENS ----------
   CINEMATIC WARM REBASE (client direction, 2026-08-15): the palette
   pivoted from deep-space violet/cyan to espresso / walnut / amber /
   copper with cream typography, matching the supplied concept boards.
   Token NAMES are unchanged (700+ rules reference them) — only values:
   --violet now carries the AMBER primary accent, --cyan the soft GOLD
   secondary, --acid the warm JADE "live/active" accent. */
:root{
  /* Base warm tokens */
  --void:#0b0705;
  --void-2:#120b07;
  --panel:#1a110a;
  --panel-2:#231710;
  --line:rgba(216,178,131,.15);
  --line-bright:rgba(240,187,116,.45);
  --violet:#e8944f;      /* amber — primary accent */
  --violet-soft:#f2b878; /* light amber */
  --cyan:#eec584;        /* soft gold — secondary accent */
  --acid:#8fdfa0;        /* warm jade — live/active states only */
  --star:#ffe9c4;
  --ink:#f4ead9;
  --ink-dim:#cbb59d;
  --ink-faint:#8d7a66;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --display:'Space Grotesk',Inter,sans-serif;

  /* Remap legacy tokens so every var()-based rule inherits the warm palette */
  --navy:#0e0906;
  --navy2:#140d08;
  --navy3:#191009;
  --blue:var(--violet);
  --cyan:#eec584;
  --gold:var(--cyan);
  --light:var(--panel);
  --text:var(--ink);
  --muted:var(--ink-dim);
  --white:var(--ink);
  --border:var(--line);
  --surface:var(--panel);
  --ink:#f4ead9;
  --shadow:0 30px 90px rgba(8,4,2,.55);
}

*{box-sizing:border-box}

html{background:var(--void)}

body{
  background:var(--void);
  color:var(--ink-dim);
  font-family:Inter,Arial,sans-serif;
  position:relative;
}

/* ---------- 2. STARFIELD + AMBIENT LAYERS ---------- */
#cosmic-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 18% -8%, rgba(232,148,79,.16), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 8%, rgba(238,197,132,.10), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 110%, rgba(232,148,79,.10), transparent 60%),
    var(--void);
}

.cosmic-grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  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");
}

/* keep real content above the cosmic layers (these already have their own
   position/z-index in the base stylesheet — we only need to lift stacking,
   never touch position, or fixed-position overlays like modals break) */
/* .site-header must NOT be swept into this rule: the base sheet has it
   position:fixed;z-index:50 (already above the canvas). Forcing relative
   made the homepage header scroll away and its mobile dropdown open at
   z2 — underneath the hero. Exactly the CLAUDE.md fixed-position warning. */
#main-content,footer{position:relative;z-index:2}
.barberflow-modal,.demo-viewer-modal,.ai-concierge-launcher,.ai-concierge,
.mobile-consult-cta,.concierge-fab,.back-to-top,.cookie-consent{
  z-index:120;
}
/* .skip-link keeps its own z-index:10000 from the base stylesheet — grouping
   it above would DOWNGRADE it below the sticky header when focused */

/* ---------- 3. CUSTOM CURSOR ---------- */
@media(hover:hover) and (pointer:fine){
  html.cosmic-cursor, html.cosmic-cursor *{cursor:none!important}
  #cosmic-cursor-dot,#cosmic-cursor-ring{
    position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  #cosmic-cursor-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px 2px rgba(238,197,132,.8);
    transition:opacity .2s ease;
  }
  #cosmic-cursor-ring{
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(232,148,79,.55);
    transition:width .18s ease,height .18s ease,border-color .18s ease,opacity .2s ease,background .18s ease;
  }
  html.cosmic-cursor.cursor-active #cosmic-cursor-ring{
    width:54px;height:54px;
    border-color:var(--acid);
    background:rgba(143,223,160,.06);
  }
}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
}
h1{letter-spacing:-.03em}
.eyebrow,.demo-status,.pricing-kicker,.hero-kicker,.visual-label,.brand small,
.demo-step-label,.v19-stage-head span,small,.eyebrow.dark{
  font-family:var(--mono);
}
.eyebrow{
  color:var(--cyan);
  letter-spacing:.24em;
}
.eyebrow.dark{color:var(--violet-soft)}

/* ---------- 5. HEADER / NAV ---------- */
.site-header{
  background:rgba(16,10,6,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-header.scrolled{
  background:rgba(20,12,7,.88);
  border-color:var(--line-bright);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.brand-mark{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(238,197,132,.25)}
.brand small{color:var(--ink-faint);letter-spacing:.24em}
.nav-links a{color:var(--ink-dim)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:not(.nav-cta):after{background:linear-gradient(90deg,var(--violet),var(--cyan))}
.nav-cta{
  border:1px solid var(--violet-soft);
  background:linear-gradient(135deg,rgba(232,148,79,.18),rgba(238,197,132,.06));
  color:#fff!important;
}
.nav-cta:hover{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#160d06!important;
  box-shadow:0 0 26px rgba(232,148,79,.45);
}
.menu-toggle{color:#fff}
@media(max-width:980px){.nav-links{background:rgba(16,10,6,.98);border-bottom:1px solid var(--line)}}

/* ---------- 6. SCROLL PROGRESS ---------- */
.scroll-progress span{background:linear-gradient(90deg,var(--violet),var(--cyan),#ffdf9e);box-shadow:0 0 18px rgba(238,197,132,.7)}

/* ---------- 7. HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse 60% 55% at 78% 18%, rgba(238,197,132,.14), transparent 60%),
    radial-gradient(ellipse 55% 55% at 20% 85%, rgba(232,148,79,.16), transparent 60%),
    linear-gradient(180deg,var(--void) 0%, var(--void-2) 60%, var(--panel) 100%);
}
.hero-orb{filter:blur(10px)}
.hero-orb-one{background:radial-gradient(circle,rgba(238,197,132,.22),transparent 68%)}
.hero-orb-two{background:radial-gradient(circle,rgba(232,148,79,.2),transparent 68%)}
.hero-grid-overlay{opacity:.08}
.hero-kicker{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--ink-dim);
  font-size:10px;
}
.hero h1{font-family:var(--display);font-weight:700}
.hero h1 span{
  background:linear-gradient(95deg,#fff 10%,var(--violet-soft) 48%,var(--cyan) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-content p{color:var(--ink-dim)}
.hero-proof span{color:var(--ink-dim)}
.hero-proof span:before{color:var(--acid)}
.hero-stats strong{color:#fff;font-family:var(--mono)}
.hero-stats span{color:var(--ink-faint)}
.hero-stats div:not(:last-child):after{background:var(--line)}

.btn-primary{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#160d06;
  box-shadow:0 14px 40px rgba(232,148,79,.32);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.btn-primary:hover{box-shadow:0 18px 50px rgba(238,197,132,.4);transform:translateY(-3px) scale(1.015)}
.btn-secondary{
  background:rgba(255,255,255,.03);
  color:#fff;
  border:1px solid var(--line-bright);
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(238,197,132,.2);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--void)}
.btn-play{color:var(--acid)}

/* Faimara Agent AI live stage */
.hero-visual,.v19-core-stage{
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  border:1px solid var(--line);
  backdrop-filter:blur(20px);
  box-shadow:0 40px 110px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
}
.v19-stage-head{color:var(--ink-dim);border-bottom:1px solid var(--line)}
.v19-stage-head span i{background:var(--acid);box-shadow:0 0 10px var(--acid)}
.v19-motion-toggle{border:1px solid var(--line);color:var(--ink-dim);background:rgba(255,255,255,.03);padding:7px 12px;border-radius:8px}
@media(max-width:980px){
  .v19-motion-toggle{padding:11px 14px} /* sole motion opt-out — keep it tappable */
}
.v19-motion-toggle:hover{border-color:var(--cyan);color:#fff}
.v19-input,.v19-output{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-dim)}
.v19-input.active,.v19-output.active{border-color:var(--violet-soft);background:rgba(232,148,79,.08);color:#fff}
.v19-orbit{border-color:rgba(232,148,79,.22)}
.v19-particle{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.v19-core-orb{
  background:radial-gradient(circle at 35% 30%,var(--violet-soft),var(--violet) 60%,#7e441d 100%);
  box-shadow:0 0 0 18px rgba(232,148,79,.09),0 0 60px rgba(232,148,79,.5);
  color:#fff;
}
.v19-skill{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim)}
.v19-flow-line{color:var(--ink-faint)}
.v19-flow-line i{background:linear-gradient(90deg,var(--violet),var(--cyan))}
.v19-product-rail a{border:1px solid var(--line);color:var(--ink-dim)}
.v19-product-rail a.active,.v19-product-rail a:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(238,197,132,.25)}
.v19-stage-foot{border-top:1px solid var(--line);color:var(--ink-faint)}

.scroll-cue{color:var(--ink-faint)}
.scroll-cue span{border-color:var(--line-bright)}
.scroll-cue span:after{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* ---------- 8. TRUST STRIP ---------- */
.trust-strip{background:var(--void-2);border-bottom:1px solid var(--line);box-shadow:none}
.trust-grid{color:var(--ink-faint)}
.trust-grid i{color:var(--violet-soft)}

/* ---------- 9. GLOBAL SURFACES: every "white card" becomes cosmic glass ---------- */
.section{background:transparent}
.section.alt{background:linear-gradient(180deg,var(--void-2),var(--panel))}
.platform-section,.demo-center-section,.industries-section,.faq-section,
.contact-section,.transformation-section,.transformation-scope,
.barber-demo-showcase,body{background-color:transparent}
.demo-center-section{background:radial-gradient(ellipse 60% 50% at 80% 0%,rgba(238,197,132,.08),transparent 60%)}
.faq-section{background:linear-gradient(180deg,var(--void-2),var(--void))}

.card,.platform-card,.price-card,.faq-list details,.contact-form,.roi-calculator,
.demo-tab,.home-solution-card,.agent-proof-card,.local-service-tile,
.future-intelligence-card,.scope-grid article,.demo-metric,.demo-work-card,
.barber-demo-card,.orbit-card,.enterprise-trust article,.workflow-steps>div,
.demo-screen,.screen-sidebar,.about-panel,.legal-main,.not-found{
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))!important;
  border:1px solid var(--line)!important;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  color:var(--ink-dim);
}
.demo-tab.active{background:linear-gradient(160deg,rgba(232,148,79,.22),rgba(238,197,132,.08))!important;border-color:var(--violet-soft)!important;color:#fff}
.demo-tab.active small{color:#fbe6cd}
.price-card.transformation{background:linear-gradient(160deg,rgba(232,148,79,.16),rgba(232,148,79,.04))!important}
.price-card.featured{border-color:var(--cyan)!important;box-shadow:0 0 0 1px var(--cyan),0 25px 60px rgba(238,197,132,.15)}

/* card hover: glow + gentle lift + tilt handled inline via JS transform var */
.card,.platform-card,.price-card,.home-solution-card,.future-intelligence-card,
.local-service-tile,.barber-demo-card,.demo-metric,.orbit-card,.faq-list details{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.card:hover,.platform-card:hover,.price-card:hover,.home-solution-card:hover,
.future-intelligence-card:hover,.local-service-tile:hover,.barber-demo-card:hover,
.orbit-card:hover{
  border-color:var(--line-bright)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16);
}
.platform-card:before{background:linear-gradient(90deg,var(--violet),var(--cyan))}

/* Text inside glass surfaces */
.card p,.platform-lead,.price-card>p,.faq-list details p,.scope-grid p,
.pricing-intro p,.demo-metric small,.industry-list span,.future-intelligence-card p,
.local-service-tile p,.demo-work-card p,.compare-content span{color:var(--ink-dim)!important}
.card h3,.platform-card h3,.price-head strong,.faq-list summary,.scope-grid h4,
.demo-card-title h4,.home-solution-card h3,.future-intelligence-card h3,
.local-service-tile h3{color:#fff!important}
.faq-list summary:after{color:var(--cyan)}
.icon{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}

/* ---------- 10. PLATFORM / SOLUTION CARDS ---------- */
.platform-icon{background:linear-gradient(135deg,var(--violet),#7e441d);color:#fff}
.taxiflow .platform-icon{background:linear-gradient(135deg,var(--cyan),#b8702f)}
.barberflow .platform-icon{background:linear-gradient(135deg,#f2a7c4,#c8547e)}
.feature-pills span{background:rgba(232,148,79,.1);border:1px solid var(--line);color:var(--ink-dim)}
.platform-footer{border-top:1px solid var(--line)}
.platform-footer a{color:var(--cyan)}
.shared-foundation{background:radial-gradient(circle at 90% 20%,rgba(238,197,132,.14),transparent 45%),linear-gradient(135deg,var(--panel),var(--panel-2));border:1px solid var(--line)}
.foundation-items span{border:1px solid var(--line);color:var(--ink-dim)}

.home-solutions-eyebrow{color:var(--cyan);font-family:var(--mono)}
.home-solution-icon svg{stroke:var(--violet-soft)}
.home-solution-code{color:var(--ink-faint);font-family:var(--mono)}
.home-solution-card ul{color:var(--ink-faint)}
.home-solution-card>a,.home-solution-actions a{color:var(--cyan)}
.home-live-demo{color:var(--acid)}

/* ---------- 11. AGENT PROOF STRIP ---------- */
.agent-ai-home{background:transparent}
.proof-badge{background:rgba(143,223,160,.12);color:var(--acid);border:1px solid rgba(143,223,160,.3)}
.agent-live-workflow{border-top:1px solid var(--line)}
.agent-flow-step{border:1px solid var(--line);color:var(--ink-faint)}
.agent-flow-step.active{border-color:var(--violet-soft);color:#fff;background:rgba(232,148,79,.1)}
.agent-live-event{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.agent-event-pulse{background:var(--acid);box-shadow:0 0 10px var(--acid)}
.proof-tags span{border:1px solid var(--line);color:var(--ink-dim)}

/* ---------- 12. DEMO CENTER ---------- */
.demo-stage{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.demo-stage:before{background:var(--violet);opacity:.14}
.demo-status{color:var(--ink-dim)}
.demo-step-label{color:var(--cyan)}
.demo-copy>p{color:var(--ink-dim)}
.demo-benefits span{border:1px solid var(--line);background:rgba(232,148,79,.08);color:var(--ink-dim)}
.demo-nav{border:1px solid var(--line);color:#fff}
.demo-nav.primary{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06;border-color:transparent}
.demo-progress button{background:var(--line)}
.demo-progress button.active{background:var(--cyan)}
.screen-top{background:#160d06;color:#fff}
.screen-brand b{color:var(--cyan)}
.screen-sidebar span{color:var(--ink-faint)}
.screen-sidebar span.active{background:rgba(232,148,79,.16);color:#fff;box-shadow:none}
.demo-dashboard-head span{background:rgba(143,223,160,.14);color:var(--acid)}
.demo-metric strong{color:#fff}
.demo-chip{background:rgba(238,197,132,.14);color:var(--cyan)}
.demo-list div{background:rgba(255,255,255,.03)}
.demo-list b{color:#fff}
.demo-score{color:var(--acid)}
.demo-disclaimer{color:var(--ink-faint)}
.concept-demo-notice{border:1px solid var(--line);background:rgba(255,255,255,.02)}
.concept-notice-icon{background:var(--violet);color:#fff}

/* ---------- 13. ROI ---------- */
.roi-section{background:radial-gradient(ellipse 60% 60% at 85% 20%,rgba(232,148,79,.18),transparent 55%),var(--void-2)}
.roi-section:after{background:var(--cyan);opacity:.1}
.roi-copy p{color:var(--ink-dim)}
.roi-trust span{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-dim)}
.roi-input-grid label{color:var(--ink-dim)}
.roi-input-grid output{color:var(--cyan)}
.roi-input-grid input{accent-color:var(--violet)}
.roi-results>div{background:rgba(255,255,255,.03)}
.roi-results small{color:var(--ink-faint)}
.roi-results strong{color:#fff}
.roi-total{background:linear-gradient(135deg,var(--violet),#7e441d)!important}
.roi-assumption{color:var(--ink-faint)}

/* ---------- 14. TRANSFORMATION SLIDER ---------- */
.transformation-compare-live{box-shadow:0 30px 90px rgba(0,0,0,.5)}
.compare-before{background:linear-gradient(120deg,rgba(20,10,15,.94),rgba(60,30,20,.7)),radial-gradient(circle at 80% 20%,#5a382d,#150f16)}
.compare-after{background:linear-gradient(120deg,rgba(26,12,6,.95),rgba(90,45,20,.75)),radial-gradient(circle at 80% 20%,var(--violet),#170e08)}
.compare-content small{color:var(--cyan)}
.compare-before small{color:#ffb597}
.compare-handle{background:linear-gradient(var(--violet),var(--cyan))}
.compare-handle span{background:#160d06;color:#fff;box-shadow:0 0 25px rgba(232,148,79,.5)}

/* ---------- 15. ENTERPRISE TRUST / ECOSYSTEM ---------- */
.enterprise-trust{background:transparent}
.enterprise-trust article span,.enterprise-trust-grid article span{
  color:var(--violet-soft);font-family:var(--mono);
  background:rgba(232,148,79,.13); /* base sheet gave these pastel-blue chips */
}
.enterprise-trust article p{color:var(--ink-dim)}
.ecosystem-statement{border-top:1px solid var(--line);color:#fff}
.ecosystem-statement a{color:var(--cyan)}

/* ---------- 16. LOCAL SERVICES ---------- */
.local-services-home{background:transparent}
.local-service-tile{color:var(--ink-dim);text-decoration:none;display:block}
.local-service-tile h3{margin:10px 0}
.local-service-tile b{color:var(--cyan)}
.service-icon{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06;display:inline-flex;padding:6px 10px;border-radius:8px;font-family:var(--mono);font-size:11px}
.local-area-note{border-top:1px solid var(--line);color:var(--ink-faint)}
.home-local-service-strip{background:var(--void-2);border-top:1px solid var(--line)}

/* ---------- 17. FUTURE INTELLIGENCE ---------- */
.future-icon{background:rgba(232,148,79,.14);color:var(--violet-soft);border:1px solid var(--line);padding:6px 10px;border-radius:8px;font-family:var(--mono);font-size:11px}
.status-badge.future{background:rgba(255,255,255,.04);color:var(--ink-faint);border:1px solid var(--line)}
.future-capability-note{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-faint)}

/* ---------- 18. WORKFLOW / INDUSTRIES / ABOUT ---------- */
.workflow-section{background:linear-gradient(160deg,var(--panel),var(--void-2))}
.workflow-layout>div:first-child p{color:var(--ink-dim)}
.workflow-steps{border-top:1px solid var(--line)}
.workflow-steps>div{border-bottom:1px solid var(--line)}
.workflow-steps>div>span{color:var(--cyan);font-family:var(--mono)}
.workflow-steps p{color:var(--ink-faint)}

.industries-layout>div:first-child p{color:var(--ink-dim)}
.industry-list{border-top:1px solid var(--line)}
.industry-list div{border-bottom:1px solid var(--line)}
.industry-list strong{color:#fff}

.about-panel{background:radial-gradient(circle at 30% 20%,rgba(232,148,79,.35),transparent 55%),linear-gradient(160deg,var(--panel),var(--void-2))}
.large-f{color:rgba(255,255,255,.06)}
.about-lines{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.about-badge{color:var(--ink-dim);font-family:var(--mono)}
.values div{border-top:2px solid var(--cyan)}
.values strong{color:#fff}
.values span{color:var(--ink-faint)}

/* ---------- 19. CTA BAND ---------- */
.cta-box{background:linear-gradient(120deg,var(--violet),#6e3b18);color:#fff;box-shadow:0 30px 80px rgba(232,148,79,.25)}
.cta-box h2{color:#fff}

/* ---------- 20. CONTACT / FORM ---------- */
.contact-section{background:transparent}
.contact-details a{color:var(--cyan)}
.contact-delivery-note{color:var(--ink-faint)}
.contact-delivery-note strong{color:#fff}
.contact-form label{color:var(--ink-dim)}
.contact-form input,.contact-form select,.contact-form textarea{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--line)!important;
  color:#fff!important;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--ink-faint)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;
  border-color:var(--cyan)!important;
  box-shadow:0 0 0 3px rgba(238,197,132,.18);
}
.form-consent{color:var(--ink-faint)}
.form-consent a{color:var(--cyan)}
.form-message{color:var(--cyan)}

/* ---------- 21. MODALS / PRICING ---------- */
.barberflow-backdrop{background:rgba(8,5,3,.9)}
.barberflow-dialog{background:var(--panel)!important;box-shadow:0 60px 140px rgba(0,0,0,.7)}
.modal-close{background:rgba(20,12,7,.6);border:1px solid var(--line);color:#fff}
.modal-hero,.fieldflow-modal-hero,.foodflow-hero{background:linear-gradient(150deg,var(--void-2),var(--panel-2))!important}
.modal-hero p{color:var(--ink-dim)}
.transformation-compare>div{border:1px solid var(--line);background:rgba(255,255,255,.03)}
.transformation-compare small{color:var(--ink-faint)}
.transformation-compare strong{color:#fff}
.transformation-compare span{color:var(--ink-dim)}
.transformation-compare>b{color:var(--cyan)}
.pricing-kicker{color:var(--cyan)}
.pricing-intro h3{color:#fff}
.price-head{border-bottom:1px solid var(--line)}
.price-head span{color:var(--violet-soft)}
.transformation .price-head span{color:var(--cyan)}
.price-head small{color:var(--ink-faint)}
.transformation .price-head small,.transformation>p,.transformation li{color:var(--ink-dim)!important}
.price-card ul{color:var(--ink-dim)}
.price-cta{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.transformation .price-cta{background:linear-gradient(135deg,var(--cyan),var(--violet-soft));color:#160d06}
.popular-badge{background:var(--cyan);color:#160d06}
.scope-grid article{padding:24px}
.scope-grid span{color:var(--cyan);font-family:var(--mono)}
.scope-grid h4{color:#fff}
.roadmap-strip{background:rgba(255,255,255,.03);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.roadmap-strip strong{color:#fff}
.roadmap-strip span{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-dim)}
.roadmap-strip b{color:var(--cyan)}
.status-badge.coming{background:rgba(143,223,160,.14);color:var(--acid);border:1px solid rgba(143,223,160,.3)}

/* ---------- 22. DEMO SHOWCASE CARDS ---------- */
.barber-demo-heading h3{color:#fff}
.barber-demo-heading p{color:var(--ink-dim)}
.browser-bar{background:rgba(255,255,255,.08);color:var(--ink-dim)}
.browser-bar i{background:rgba(255,255,255,.35)}
.preview-label{color:var(--cyan)}
.preview-content strong{color:#fff}
.preview-content p{color:var(--ink-dim)}
.demo-card-title small{color:var(--violet-soft)}
.demo-status-badge.live{background:rgba(143,223,160,.16);color:var(--acid)}
.demo-status-badge.pending{background:rgba(255,255,255,.06);color:var(--ink-dim)}
.barber-demo-body>p{color:var(--ink-dim)}
.demo-feature-row span{border:1px solid var(--line);color:var(--ink-dim)}
.demo-launch{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.demo-launch:hover{box-shadow:0 16px 40px rgba(232,148,79,.35)}
.customer-portal-highlight,.barber-product-experience-callout{background:linear-gradient(150deg,var(--panel),var(--panel-2));border:1px solid var(--line)}
.portal-icon{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.customer-portal-highlight p,.barber-product-experience-callout p{color:var(--ink-dim)}
.portal-points span{border:1px solid var(--line);color:var(--ink-dim)}

/* ---------- 23. DEMO VIEWER ---------- */
.demo-viewer-backdrop{background:rgba(8,5,3,.94)}
.demo-viewer-dialog{background:var(--panel)!important}
.demo-viewer-topbar{background:#160d06}
.demo-viewer-actions a{color:var(--cyan)}
.demo-viewer-actions button{border:1px solid var(--line);color:#fff}

/* ---------- 24. AI CONCIERGE ---------- */
.ai-concierge-launcher{
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-bright);
  box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 30px rgba(232,148,79,.15);
}
.ai-launcher-icon,.ai-avatar,.ai-message-avatar{background:linear-gradient(135deg,var(--violet),var(--cyan))!important;color:#160d06!important}
.ai-launcher-label small{color:var(--ink-faint)}
.ai-concierge{background:var(--panel)!important;border:1px solid var(--line);box-shadow:0 40px 110px rgba(0,0,0,.6)}
.ai-concierge-header{background:linear-gradient(135deg,var(--panel-2),var(--void-2))}
.ai-concierge-identity small{color:var(--ink-faint)}
.ai-agent-strip{background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
.ai-agent-strip span{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-faint)}
.ai-agent-strip span.active{background:var(--violet);border-color:var(--violet);color:#fff}
.ai-chat-log{background:var(--void-2)}
.ai-message>div{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.ai-message.user>div{background:linear-gradient(135deg,var(--violet),#7e441d);color:#fff;border-color:transparent}
.ai-message small{color:var(--ink-faint)}
.ai-message.user small{color:rgba(255,255,255,.7)}
.ai-quick-actions{background:var(--panel)}
.ai-quick-actions button{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-dim)}
.ai-quick-actions button:hover{border-color:var(--cyan);color:#fff}
.ai-chat-input-wrap{background:var(--panel);border-top:1px solid var(--line)}
.ai-chat-input-wrap input{background:rgba(255,255,255,.03)!important;border:1px solid var(--line);color:#fff}
.ai-chat-input-wrap button{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.ai-demo-note{background:var(--panel);color:var(--ink-faint)}
.ai-inline-cta button,.ai-inline-cta a{background:var(--cyan);color:#160d06}
.mobile-consult-cta{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.concierge-fab{color:var(--cyan)}
.back-to-top{background:var(--panel);border:1px solid var(--line);color:#fff}
.back-to-top:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(238,197,132,.3)}
.cookie-consent{background:var(--panel);border:1px solid var(--line)}
.cookie-consent p{color:var(--ink-dim)}
.cookie-secondary{background:transparent;border:1px solid var(--line);color:var(--ink-dim)}
.cookie-primary{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}

/* ---------- 25. FOOTER ---------- */
footer{background:#080503;color:var(--ink-faint);border-top:1px solid var(--line)}
.footer-top{border-bottom:1px solid var(--line)}
.footer-links a{color:var(--ink-dim)}
.footer-links a:hover{color:var(--cyan)}
.site-version{color:var(--ink-faint);font-family:var(--mono)}

/* ---------- 25b. FULL AUDIT PASS — remaining light surfaces neutralized ---------- */
.home-solutions-showcase,.barber-demo-showcase,.enterprise-trust,.faq-section,
.future-intelligence-section,.industries-section,.local-services-home,
.contact-section,.transformation-section,.transformation-scope,.trust-strip,
.home-local-service-strip{
  background:transparent!important;
  color:var(--ink-dim)!important;
}
.home-solutions-showcase:after{display:none}
.home-solutions-heading p,.home-solutions-heading h2{color:inherit}
.home-solutions-heading h2,.industries-section h2,.faq-section h2,
.enterprise-trust h2,.contact-section h2,.transformation-section h2,
.local-services-home h2,.home-solutions-showcase h2{color:#fff!important}

.ai-agent-strip,.ai-quick-actions,.ai-demo-note,.ai-chat-input-wrap{background:var(--panel)!important}
.ai-chat-log{background:var(--void-2)!important}
.ai-concierge,.barberflow-dialog,.demo-viewer-dialog{background:var(--panel)!important}
.roadmap-strip{background:rgba(255,255,255,.03)!important}
.demo-status-badge.pending{background:rgba(255,255,255,.08)!important;color:var(--ink-dim)!important}
.home-demo-link,.route-demo-cta{background:rgba(238,197,132,.12)!important;color:var(--cyan)!important}
.live-demo-pill,.home-live-demo{background:rgba(143,223,160,.12)!important;color:var(--acid)!important}
.concept-demo-notice{background:linear-gradient(135deg,rgba(232,148,79,.12),rgba(255,255,255,.02))!important}
.concept-notice-icon{background:var(--acid)!important;color:#160d06!important}
.contact-delivery-note{background:rgba(238,197,132,.08)!important;color:var(--ink-dim)!important}
.demo-screen,.screen-sidebar{background:var(--panel)!important}
.demo-tab[data-demo="taxiflow"].active ~ * .demo-stage,.demo-stage.taxiflow-light{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;
  color:var(--ink-dim)!important;
}
.taxiflow-demo-cta{background:transparent!important}
.industries-section h3,.faq-section h3,.enterprise-trust h3,.contact-section h3,
.transformation-scope h3,.home-solutions-showcase h3{color:#fff!important}
/* missed by the original audit pass: heading + roadmap notice rendered
   dark-on-dark, and the solution icon/code chips kept pastel backgrounds */
.future-intelligence-section h2,.future-capability-note strong{color:#fff!important}
.home-solution-icon{background:rgba(232,148,79,.14)!important}
.home-solution-code{background:rgba(255,255,255,.05)!important}
.local-service-grid-refined .service-icon{background:rgba(232,148,79,.14);color:var(--violet-soft)}

/* ---------- 26. REVEAL / MOTION ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px) scale(.985);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,.8,.2,1),transform .9s cubic-bezier(.16,.8,.2,1),filter .9s ease;
}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}

::selection{background:rgba(232,148,79,.4);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet),var(--cyan));border-radius:6px}

/* focus visibility kept strong for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;
}

/* Motion policy: ambient/informational animation is governed by the
   persisted site Motion toggle (html.v19-motion-off), not by the OS
   reduced-motion signal alone — that signal froze desktops that report
   it. The toggle remains a one-tap, persisted opt-out for everyone. */
.v19-motion-off .reveal,.v19-motion-off .reveal-soft{opacity:1;transform:none;filter:none;transition:none}
.v19-motion-off #cosmic-canvas{animation:none}

@media(max-width:900px){
  #cosmic-cursor-dot,#cosmic-cursor-ring{display:none}
}

/* ============================================================
   27. MULTIPAGE SHELL — about, contact, solutions, portfolio…
   The interior pages share a "page-shell" chrome defined in
   styles.css (page-header / page-hero / page-section /
   page-footer) built on light --v15-* tokens and literal light
   hexes. Everything below is the same audit pattern as 25b,
   applied to that shell. Components used only by one interior
   page live under their own sub-heading so later pages append
   cleanly.
   ============================================================ */

/* v15 tokens are defined light in styles.css :root — remap them
   only inside the shell so index.html is untouched */
.page-shell{
  --v15-blue:var(--violet-soft);
  --v15-navy:var(--void-2);
  --v15-ink:var(--ink);
  --v15-muted:var(--ink-dim);
  --v15-line:var(--line);
  --v15-soft:var(--void-2);
  background:var(--void);
  color:var(--ink-dim);
}

/* Anchors the base sheet never colors fall back to UA blue (#0000EE),
   which is illegible on the void. Low-specificity catch-all placed FIRST
   in this section so every later equal-or-higher-specificity link rule
   still wins. */
.page-shell a{color:var(--cyan)}
/* …but the catch-all (0,1,1) out-ranks the filled button rules (0,1,0),
   which washed their dark text to gold. Filled amber/gold buttons ALWAYS
   carry warm-black text: */
.page-shell a.btn-primary,.page-shell a.price-cta,.page-shell a.demo-launch,
.page-shell .ai-inline-cta a,.page-shell a.cookie-primary,
.page-shell a.mobile-consult-cta,.page-shell .contact-upgrade a.btn{color:#160d06}
.page-shell a.btn-light{color:var(--void)}

/* Interior pages carry fewer self-luminous elements than the homepage,
   so they run their ambient light roughly one stop brighter: stronger
   corner washes plus a soft mid-viewport glow so the space between
   sections never drops to pure void. */
.page-shell #cosmic-canvas{
  background:
    radial-gradient(ellipse 80% 55% at 18% -8%, rgba(232,148,79,.24), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 8%, rgba(238,197,132,.16), transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 52%, rgba(232,148,79,.07), transparent 65%),
    radial-gradient(ellipse 60% 60% at 50% 110%, rgba(232,148,79,.16), transparent 60%),
    var(--void);
}

/* --- shell header (multipage uses .page-header, not .site-header) --- */
.page-header{
  background:rgba(16,10,6,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.page-header.scrolled{
  background:rgba(20,12,7,.88);
  border-bottom-color:var(--line-bright);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.page-header .nav-links>a{color:var(--ink-dim)}
.page-header .nav-links>a:hover,.page-header .nav-links>a.active{color:#fff}

/* --- shell hero --- */
.page-hero{
  background:
    radial-gradient(ellipse 60% 55% at 82% 10%, rgba(238,197,132,.13), transparent 60%),
    radial-gradient(ellipse 55% 55% at 10% 88%, rgba(232,148,79,.16), transparent 60%),
    linear-gradient(180deg,var(--void) 0%,var(--void-2) 65%,var(--panel) 100%);
  padding:72px 0 60px; /* was 105/92 — density pass */
}
.page-hero h1{font-size:clamp(38px,5vw,62px);margin:12px 0 18px}
.page-hero h1 span{
  background:linear-gradient(95deg,#fff 10%,var(--violet-soft) 48%,var(--cyan) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero p{color:var(--ink-dim);font-size:17px;max-width:56ch}
.page-hero-grid{gap:52px}
.page-breadcrumb{color:var(--ink-faint);font-family:var(--mono);font-weight:500;font-size:12px;margin-bottom:20px}
.page-breadcrumb a{color:var(--ink-dim)}
.page-breadcrumb a:hover{color:var(--cyan)}
.page-kicker{
  font-family:var(--mono);font-weight:600;letter-spacing:.24em;font-size:10px;
  color:var(--cyan);
  border-color:rgba(216,178,131,.22);
  background:rgba(255,255,255,.05);
}
.page-actions{margin-top:26px}

.page-visual-card{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.page-visual-card small{font-family:var(--mono);color:var(--cyan);letter-spacing:.2em}
.page-visual-card strong{color:#fff;font-size:23px}
.page-visual-card li{color:var(--ink-dim)}
.page-visual-card li:before{background:rgba(238,197,132,.12);color:var(--cyan)}

/* --- shell sections --- */
.page-section{padding:64px 0} /* was 88 — density pass */
.page-section.alt{background:linear-gradient(180deg,var(--void-2),var(--panel))}
.section-intro{margin-bottom:30px}
.section-intro .eyebrow{color:var(--cyan)}
.section-intro h2{color:#fff;font-size:clamp(28px,3.4vw,40px)}
.section-intro p{color:var(--ink-dim)}
.split-content{gap:48px}

.check-list li{color:var(--ink-dim)}
.check-list li:before{background:rgba(238,197,132,.12);color:var(--cyan)}

/* reveal variant for cards that keep their own hover transform:
   fades + unblurs without touching transform, so hover lift stays snappy */
.reveal-soft{opacity:0;filter:blur(10px);transition:opacity .8s ease,filter .8s ease}
.reveal-soft.is-visible{opacity:1;filter:blur(0)}

.feature-panel{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  transition:opacity .8s ease,filter .8s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.feature-panel:hover{
  transform:translateY(-6px);
  border-color:var(--line-bright);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16);
}
.feature-panel span{background:rgba(232,148,79,.14);color:var(--violet-soft);font-family:var(--mono);font-weight:600}
.feature-panel p{color:var(--ink-dim)}

/* --- about.html: founder profile --- */
/* carries the alt band's panel tone back down toward the footer, so the
   page alternates dark / lit / dark instead of dropping to pure void */
.founder-section{background:linear-gradient(180deg,var(--panel),var(--void-2))}
.founder-profile{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
/* signature moment: the monogram breathes like the homepage core orb */
.founder-monogram{
  background:radial-gradient(circle at 32% 28%,var(--violet-soft),var(--violet) 60%,#7e441d 100%);
  color:#fff;
  box-shadow:0 0 0 10px rgba(232,148,79,.08),0 0 45px rgba(232,148,79,.45);
  animation:founder-pulse 4.5s ease-in-out infinite alternate;
}
@keyframes founder-pulse{
  from{box-shadow:0 0 0 8px rgba(232,148,79,.07),0 0 30px rgba(232,148,79,.35)}
  to{box-shadow:0 0 0 14px rgba(232,148,79,.1),0 0 60px rgba(232,148,79,.55)}
}
.founder-copy h3{color:#fff}
.founder-copy>strong{
  color:var(--cyan);font-family:var(--mono);font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.founder-copy p{color:var(--ink-dim);max-width:62ch}
.founder-tags span{
  background:rgba(255,255,255,.05);border:1px solid rgba(216,178,131,.22);
  color:var(--ink-dim);font-family:var(--mono);font-weight:500;
}
.experience-disclaimer{color:var(--ink-faint)}

/* --- shell footer --- */
.page-footer{background:#080503;color:var(--ink-faint);border-top:1px solid var(--line)}
.footer-grid-v15 a{color:var(--ink-dim)}
.footer-grid-v15 a:hover{color:var(--cyan)}
.footer-bottom-v15{border-top:1px solid var(--line)}
.footer-bottom-v15 a{color:var(--ink-dim)} /* base sheet leaves these UA-default blue */
.footer-bottom-v15 a:hover{color:var(--cyan)}

/* --- floating AI advisor pill injected by multipage.js --- */
.concierge-fab{
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-bright);
  color:#fff;
  box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 30px rgba(232,148,79,.15);
}
.concierge-fab:hover{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(232,148,79,.3)}
.concierge-fab span{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}

/* --- shell density + mobile pass --- */
.page-breadcrumb a,.footer-bottom-v15 a{display:inline-block;padding:6px 0}

@media(max-width:1050px){
  /* avoid an orphaned card when the 3-up feature grid drops to 2 columns */
  .feature-grid .feature-panel:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:980px){
  .menu-toggle{padding:8px 12px} /* ~26px glyph alone is far under tap minimum */
  .nav-links{gap:2px}
  .nav-links a:not(.nav-cta){padding:12px 0}
  .nav-links .nav-cta{margin-top:10px}
}
@media(max-width:800px){
  .page-hero{padding:52px 0 44px}
  .page-hero h1{font-size:37px}
  .page-section{padding:48px 0}
  .page-hero-grid,.split-content{gap:32px}
  .section-intro{margin-bottom:24px}
  .page-breadcrumb{margin-bottom:14px}
  .footer-grid-v15 a{padding:6px 0} /* comfortable tap targets */
  /* base sheet reserves 76px for index's .mobile-consult-cta bar,
     which shell pages don't render — reclaim the dead space */
  body.page-shell{padding-bottom:0}
  .page-shell .concierge-fab{bottom:16px;padding:12px 16px}
}
@media(max-width:600px){
  .page-hero h1{font-size:33px}
  .page-actions{gap:10px}
  .page-actions .btn{flex:1 1 auto}
  .founder-profile{gap:20px}
  .footer-grid-v15{gap:26px}
}

.v19-motion-off .founder-monogram{animation:none}


/* ============================================================
   27b. HOMEPAGE DENSITY PASS — the hero no longer forces a full
   scroll before the first section, and section rhythm matches
   the interior pages (64px desktop / 48px mobile).
   ============================================================ */
.hero{min-height:min(88vh,780px)}
.section{padding:64px 0}
@media(max-width:800px){
  .section{padding:48px 0}
}

/* ============================================================
   27c. AGENT PROOF MOTION — the hero "Motion" toggle now governs
   the PUBLIC PROOF #1 live choreography too, and motion defaults
   ON. Under OS reduced-motion the base sheet stills these pulses;
   while the visitor leaves motion enabled (html.v19-force-motion)
   restore them — same pattern as the v19 core-stage force rules.
   ============================================================ */
.v19-force-motion .agent-event-pulse{animation:faimaraEventPulse 1.8s infinite!important}
.v19-force-motion .agent-live-head i{animation:faimaraStatusPulse 1.8s infinite!important}
.v19-force-motion .agent-live-card:before{animation:faimaraPanelSweep 7s ease-in-out infinite!important}

/* ============================================================
   27d. PREMIUM INTERACTION LAYER — cursor spotlight on glass
   cards (span injected by cosmic.js; never a pseudo-element, so
   existing :before/:after decorations are untouched). Desktop
   fine-pointer only; magnetic CTAs and count-up stats live in
   cosmic.js with their own reduced-motion/touch guards.
   ============================================================ */
.cosmic-spot{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(232,148,79,.13),
    rgba(238,197,132,.05) 45%,
    transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
@media(hover:hover) and (pointer:fine){
  :where(:hover)>.cosmic-spot{opacity:1}
}

/* ============================================================
   27e. HERO WORKSPACE PHOTO — client-chosen workspace photograph
   mounted behind every hero, color-graded into the cosmic
   palette (desaturated, cooled, ~75% dark overlay so headline
   contrast holds) with a slow Ken Burns drift. If the image
   file is absent the gradients below still paint and heroes
   look exactly as before — safe fallback by construction.
   Image lives at /assets/workspace-hero.jpg — replacing that
   file upgrades every hero at once.
   ============================================================ */
.hero:before,.page-hero:before{
  content:"";
  position:absolute;
  inset:-4%; /* bleed so the drift never exposes an edge */
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,7,5,.9) 0%, rgba(11,7,5,.62) 45%, rgba(18,11,7,.94) 100%),
    linear-gradient(120deg, rgba(126,68,29,.4), rgba(26,17,10,.22) 55%, rgba(238,197,132,.15)),
    url("/assets/workspace-hero.jpg") center 38%/cover no-repeat;
  filter:saturate(.92) brightness(.9) contrast(1.05); /* warm system: no cool hue shift */
  transform-origin:50% 42%;
  animation:cosmic-kenburns 32s ease-in-out infinite alternate;
}
@keyframes cosmic-kenburns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(1.6%,-1.8%,0)}
}
.v19-motion-off .hero:before,.v19-motion-off .page-hero:before{animation:none}

/* ---------- 27g. WARM REGRADE — base-sheet remnants ----------
   Cool literals in styles-v19-3.css that read on-palette under the
   old scheme, re-graded warm. The --v15-* remap is now global (the
   homepage pivoted warm with everything else). */
:root{
  --v15-blue:var(--violet-soft);
  --v15-navy:var(--void-2);
  --v15-ink:var(--ink);
  --v15-muted:var(--ink-dim);
  --v15-line:var(--line);
  --v15-soft:var(--void-2);
}
.v192-packet{background:var(--violet-soft);box-shadow:0 0 8px var(--violet-soft),0 0 20px rgba(232,148,79,.85)}
.v19-stage-head small{color:var(--cyan)} /* "Human-supervised" — gold per client color feedback */
.v19-input>b{background:rgba(238,197,132,.1);color:var(--cyan)}
.v19-core-orb small{color:rgba(255,236,205,.75)}
.v19-core-orb span{background:linear-gradient(145deg,#ffe0ae,#e8944f);color:#160d06}
.v19-output span i{background:var(--ink-faint)}
.v19-core-stage em,.v19-input small,.v19-output small{color:var(--ink-faint)}
.agent-event-pulse{background:var(--violet-soft)}
.agent-live-head i{background:var(--violet-soft);box-shadow:0 0 12px rgba(242,184,120,.8)}
@keyframes faimaraEventPulse{
  0%{box-shadow:0 0 0 0 rgba(232,148,79,.45)}
  70%{box-shadow:0 0 0 11px rgba(232,148,79,0)}
  100%{box-shadow:0 0 0 0 rgba(232,148,79,0)}
}
@keyframes faimaraStatusPulse{
  0%{box-shadow:0 0 0 0 rgba(242,184,120,.5)}
  70%{box-shadow:0 0 0 9px rgba(242,184,120,0)}
  100%{box-shadow:0 0 0 0 rgba(242,184,120,0)}
}

/* ---------- 27h. STAGE + PROOF WARM HARMONY (client feedback) ----------
   The Agent AI sphere/stage and the PUBLIC PROOF strip carried navy
   panels and teal/jade accents from the base sheet; both now sit fully
   inside the warm family. Base stage rule uses !important — matched. */
.v19-core-stage{
  background:
    radial-gradient(circle at 52% 42%, rgba(171,102,46,.20), rgba(11,7,5,0) 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;
  border-color:rgba(240,187,116,.22)!important;
}
.v19-core-orb{border-color:rgba(240,187,116,.5)}
.v19-flow-line{background:rgba(24,14,8,.55);border-color:rgba(216,178,131,.14)}
#v19FlowLabel,.v19-flow-line span{color:var(--cyan)}
.v19-input strong,.v19-output strong{color:#ffedd9}
.v19-input-stack>small,.v19-output-stack>small{color:var(--ink-faint)}
.v19-product-rail a b{background:rgba(232,148,79,.1);color:var(--ink-dim)}
.v19-product-rail a.active b{
  background:linear-gradient(145deg,rgba(238,197,132,.28),rgba(232,148,79,.24));
  color:#ffdfae;
}
.v19-product-rail a:hover,.v19-product-rail a.active{
  color:#fff2df;
  border-color:rgba(240,187,116,.3);
  background:rgba(232,148,79,.08);
}
.hero-kicker{color:var(--ink-dim)}
.agent-ai-home p{color:var(--ink-dim)}
.agent-live-workflow{background:rgba(26,15,8,.4)}
.agent-live-head small{color:var(--cyan)}
.agent-flow-step b,.agent-flow-step em{color:var(--ink-faint)}
.agent-flow-step.active b,.agent-flow-step.active em{color:#ffd9a4}
.v19-input span i,.v19-output span i{background:var(--ink-faint)}
.v19-input.active span i,.v19-output.active span i{background:var(--violet-soft)}
.v19-stage-foot span i{background:var(--violet-soft)}
.agent-live-event small{color:var(--cyan)}
#agentLiveState{background:rgba(238,197,132,.14);color:#ffd9a4}
.proof-badge{
  background:rgba(238,197,132,.12)!important;
  color:var(--cyan)!important;
  border-color:rgba(238,197,132,.3)!important;
}

/* --- round 2 client color feedback --- */
:root{
  /* The base sheet's entire --fai-* token family was cool-toned; remapping
     it wholesale retires every derived cyan star, blue hairline, navy
     panel tint, and the hero underline sweep in one move. */
  --fai-green:var(--violet-soft);
  --fai-blue:var(--cyan);
  --fai-cyan:var(--cyan);
  --fai-glow:0 0 35px rgba(238,197,132,.22);
  --fai-line:rgba(216,178,131,.16);
  --fai-panel:#1d130c;
  --fai-ink:#160d06;
}
.v19-orbit:after{box-shadow:0 0 14px rgba(238,197,132,.8)} /* literal glow beside the token */
/* the base sheet's animated "signal" streaks were cyan — the blue shooting
   lines; background-image only, so their sweep animation/sizing survives */
.signal-line{background-image:linear-gradient(90deg,transparent,rgba(240,187,116,.85),transparent)!important}

/* --- animated pseudo-element sweep (the packet TAILS were the true
   "blue shooting lines" — visible only while motion runs) --- */
.v192-packet:after{background:linear-gradient(90deg,transparent,rgba(255,214,158,.8))}
.v19-core-orb:before{
  border-color:rgba(240,187,116,.2);
  box-shadow:0 0 24px rgba(240,187,116,.16);
}
.v19-core-stage:before{
  background-image:
    linear-gradient(rgba(223,180,121,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(223,180,121,.055) 1px,transparent 1px)!important;
}
.v19-core-stage:after{background:radial-gradient(circle,rgba(232,148,79,.12),transparent 65%)!important}
.hero:after{background:linear-gradient(90deg,rgba(18,9,4,.22),transparent 55%)}
.live-dot{background:var(--violet-soft);box-shadow:0 0 0 0 rgba(242,184,120,.55)}
@keyframes premiumPulse{
  70%{box-shadow:0 0 0 8px rgba(242,184,120,0)}
  100%{box-shadow:0 0 0 0 rgba(242,184,120,0)}
}
@keyframes v192CardPulse{
  50%{box-shadow:0 0 0 1px rgba(240,187,116,.2),0 10px 28px rgba(232,148,79,.13);transform:translateY(-2px)}
}

/* --- final cold-residue sweep (state-dependent + pseudo-element tail) --- */
/* live dots & pulses: every remaining green indicator → amber */
.demo-status i,.screen-live i{background:var(--violet-soft);box-shadow:0 0 13px var(--violet-soft)}
.foodflow-order-status i{background:var(--violet-soft);box-shadow:0 0 13px rgba(242,184,120,.7)}
.ai-launcher-pulse{background:var(--violet-soft);box-shadow:0 0 0 0 rgba(242,184,120,.6)}
.home-live-demo,.live-demo-pill{background:rgba(238,197,132,.12)!important;color:var(--cyan)!important;border-color:rgba(238,197,132,.3)!important}
.live-demo-pill i,.home-live-demo i{background:var(--violet-soft)!important;box-shadow:0 0 0 4px rgba(242,184,120,.15)!important}
.demo-status-badge.live{background:rgba(238,197,132,.16)!important;color:var(--cyan)!important;border-color:rgba(238,197,132,.3)}
.concept-notice-icon{background:var(--violet-soft)!important;color:#160d06!important}
.demo-dashboard-head span{background:rgba(238,197,132,.14)!important;color:var(--cyan)!important}
.demo-score{color:var(--cyan)!important}
/* solution cards: per-product brand accents re-derived as a warm family */
.home-solution-card{--accent:#e8944f;--soft:rgba(232,148,79,.12)}
.home-solution-card.fieldflow-card{--accent:#e8944f;--soft:rgba(232,148,79,.12)}
.home-solution-card.taxiflow-card{--accent:#eec584;--soft:rgba(238,197,132,.12)}
.home-solution-card.barberflow-card{--accent:#d9a86a;--soft:rgba(217,168,106,.12)}
.home-solution-card.foodflow-card{--accent:#c98a4b;--soft:rgba(201,138,75,.14)}
.home-solution-card.techflow-card{--accent:#f2b878;--soft:rgba(242,184,120,.12)}
.home-solution-card.clinicflow-card{--accent:#b96f3a;--soft:rgba(185,111,58,.14)}
/* demo-center tab avatar chips */
.demo-tab span{background:rgba(232,148,79,.12);color:var(--violet-soft)}
.demo-tab.active span{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
/* state shadows & borders that stayed cool */
.brand-mark{box-shadow:0 0 18px rgba(238,197,132,.25)}
.brand-mark:after{border-color:rgba(240,187,116,.3)}
.v19-core-orb:after{border-color:rgba(240,187,116,.16)}
.v19-input.active,.v19-output.active{box-shadow:0 0 0 1px rgba(240,187,116,.12),0 10px 24px rgba(232,148,79,.09)}
.agent-flow-step.active{box-shadow:0 0 0 1px rgba(240,187,116,.12),0 10px 24px rgba(232,148,79,.09)}
.demo-tab.active{box-shadow:0 12px 30px rgba(232,148,79,.15)}
.concept-demo-notice{box-shadow:0 14px 36px rgba(8,4,2,.2)}
.barber-demo-showcase{border-top-color:var(--line)!important;border-bottom-color:var(--line)!important}
.demo-browser-preview:not([style*="background-image"]){background:linear-gradient(135deg,#20140c,#31200f)!important}
.demo-browser-preview.lloyd-preview{background:linear-gradient(135deg,#241811,#382512)!important}
.cookie-primary{border-color:rgba(240,187,116,.4)}
.not-found strong{color:var(--violet-soft)}
.v19-core-orb span{box-shadow:0 6px 18px rgba(232,148,79,.3)}
.v19-input.active span i,.v19-output.active span i{box-shadow:0 0 10px rgba(242,184,120,.6)}
.hero-kicker i,.hero-kicker small i{background:var(--violet-soft)!important;box-shadow:0 0 8px rgba(242,184,120,.5)}
.ai-concierge-identity small i{background:var(--violet-soft)!important;box-shadow:0 0 8px rgba(242,184,120,.5)!important}
.industry-list div:last-child strong{color:#fff} /* teal "future industry" special-case → match siblings */
/* pre-pivot ambient glow orbs (cyan/indigo radials) → warm amber family */
.agent-ai-home:before{background:radial-gradient(circle,rgba(232,148,79,.15),rgba(126,68,29,.07) 45%,transparent 70%)}
.page-hero:after,.solution-hero:after,.service-hero:after,.portfolio-hero:after,
.resource-hero:after,.contact-hero:after{background:radial-gradient(circle,rgba(238,197,132,.12),transparent 68%)}
.platform-card.taxiflow:after{background:radial-gradient(circle,rgba(238,197,132,.15),transparent 68%)}
.agent-proof-card>a{color:var(--cyan)}
.v19-stage-foot span,.v19-stage-foot span:first-child{color:var(--ink-faint)}
.v19-stage-foot{color:var(--ink-faint)}
.v19-stage-head span i{background:var(--violet-soft);box-shadow:0 0 10px var(--violet-soft)}
.v19-stage-foot i{background:var(--violet-soft);box-shadow:0 0 0 0 rgba(232,148,79,.4)}
.home-local-service-strip,.home-local-service-strip p,
.home-local-service-strip div{color:var(--ink-dim)!important}
.home-local-service-strip strong{color:#fff}
.mini-app-bar{background:#20140c!important;color:var(--ink)}
.mini-app-bar b{color:var(--cyan)!important}
.mini-app-bar i{color:var(--violet-soft)}

/* taxi demo tab: the base sheet's v17.24 navy presentation re-graded warm —
   identical selectors + !important, later in the cascade so they win */
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-stage{
  background:linear-gradient(160deg,#241812,#140d08)!important;
  color:var(--ink)!important;
  border-color:rgba(240,187,116,.25)!important;
  box-shadow:0 24px 56px rgba(8,4,2,.4)!important;
}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-copy p{color:var(--ink-dim)!important}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-status{color:var(--ink-dim)!important}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-step-label{color:var(--cyan)!important}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-benefits span{
  color:var(--ink)!important;
  border-color:rgba(216,178,131,.3)!important;
}
body:has(.demo-tab.active[data-demo="taxiflow"]) .taxiflow-demo-cta .btn-secondary{
  color:#fff!important;
  border-color:rgba(240,187,116,.45)!important;
}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-nav{border-color:rgba(216,178,131,.35)!important}
body:has(.demo-tab.active[data-demo="taxiflow"]) .demo-nav.primary{
  background:linear-gradient(135deg,var(--violet),var(--cyan))!important;
  color:#160d06!important;
  border-color:transparent!important;
}

/* ---------- 27f. MOTION COMPONENT CANVASES ---------- */
.cosmic-datapaths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cosmic-footnet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cosmic-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
footer{overflow:hidden}

/* workflow choreography: the JS cycles this class through step cards */
.cosmic-step-live{
  border-color:var(--line-bright)!important;
  box-shadow:0 0 0 1px rgba(232,148,79,.25),0 0 34px rgba(232,148,79,.14);
  transition:border-color .5s ease,box-shadow .5s ease;
}
.cosmic-step-live>b,.cosmic-step-live>span:first-child{
  background:rgba(232,148,79,.22)!important;
  color:var(--violet-soft)!important;
  transition:background .5s ease,color .5s ease;
}
.v19-motion-off .cosmic-step-live{box-shadow:none;border-color:var(--line)!important}

/* demo center: brief re-compose dim while switching product tabs */
.demo-stage{transition:opacity .26s ease,transform .26s ease}
.demo-stage.demo-switching{opacity:.4;transform:translateY(5px) scale(.996)}
.demo-stage.demo-switching:after{
  content:"";position:absolute;top:14px;right:16px;width:8px;height:8px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 12px var(--violet);
  animation:cosmic-think .5s ease-in-out infinite alternate;
}
@keyframes cosmic-think{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.v19-motion-off .demo-stage{transition:none}

/* ============================================================
   28. ROLLOUT AUDIT PASS — per-template overrides from the
   full-site audit (contact, hubs, portfolio, blog, products,
   local services, legal). Same calibration as section 27.
   ============================================================ */

/* ======== CONTACT — 5 overrides ======== */
/* [high] .lead-status.success / .lead-status.error */
/* --- contact.html: form status feedback --- */
.lead-status{font-family:var(--mono)}
.lead-status.success{background:rgba(238,197,132,.12);color:var(--cyan);border:1px solid rgba(238,197,132,.25)}
.lead-status.error{background:rgba(255,138,138,.1);color:#ff9d9d;border:1px solid rgba(255,138,138,.28)}

/* [high] .contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] */
.page-shell .contact-form input[aria-invalid="true"],
.page-shell .contact-form textarea[aria-invalid="true"]{
  border-color:#ff8a8a!important;
  background:rgba(255,99,99,.08)!important;
  box-shadow:0 0 0 3px rgba(255,99,99,.14);
}

/* [medium] .contact-upgrade (+ h3, p, .btn) */
/* --- contact.html: advisor upsell card --- */
.contact-upgrade{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.contact-upgrade h3{color:#fff}
.contact-upgrade p{color:var(--ink-dim)}
.contact-upgrade .btn{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#160d06;
}
.contact-upgrade .btn:hover{box-shadow:0 14px 36px rgba(232,148,79,.32)}

/* [medium] .contact-form select option */
.contact-form select option{background:var(--panel);color:var(--ink)}

/* [low] .contact-form .notice (+ a) */
.contact-form .notice{color:var(--ink-faint)}
.contact-form .notice a{color:var(--cyan)}

/* ======== HUBS — 14 overrides ======== */
/* [high] .advisor-card / .advisor-head / .choice-card / .advisor-btn / .advisor-fields / .advisor-summary / .advisor-result / .lead-status (ai-concierge.html) */
.page-shell .advisor-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .advisor-head{background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.page-shell .advisor-head h2,.page-shell .advisor-step h3{color:#fff}
.page-shell .advisor-head p,.page-shell .advisor-step>p{color:var(--ink-dim)}
.page-shell .advisor-progress i{background:rgba(216,178,131,.22)}
.page-shell .advisor-progress i.active{background:var(--cyan);box-shadow:0 0 10px rgba(238,197,132,.5)}
.page-shell .choice-card{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink)}
.page-shell .choice-card strong{color:#fff}
.page-shell .choice-card small{color:var(--ink-faint)}
.page-shell .choice-card:hover,.page-shell .choice-card.selected{border-color:var(--cyan);background:rgba(238,197,132,.08);box-shadow:0 0 0 1px rgba(238,197,132,.25),0 8px 24px rgba(0,0,0,.35)}
.page-shell .advisor-btn.primary{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.page-shell .advisor-btn.secondary{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--line)}
.page-shell .advisor-fields label{color:var(--ink-dim)}
.page-shell .advisor-fields input,.page-shell .advisor-fields select,.page-shell .advisor-fields textarea{background:rgba(255,255,255,.03);border:1px solid var(--line);color:#fff}
.page-shell .advisor-fields input::placeholder,.page-shell .advisor-fields textarea::placeholder{color:var(--ink-faint)}
.page-shell .advisor-fields input:focus,.page-shell .advisor-fields select:focus,.page-shell .advisor-fields textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(238,197,132,.18)}
.page-shell .advisor-summary{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .advisor-summary .mini{color:var(--cyan);font-family:var(--mono)}
.page-shell .advisor-summary p,.page-shell .advisor-summary ul{color:var(--ink-dim)}
.page-shell .advisor-result{background:rgba(238,197,132,.06);border:1px solid rgba(238,197,132,.25)}
.page-shell .advisor-result .result-product{color:#fff}
.page-shell .advisor-result .result-reason{color:var(--ink-dim)}
.page-shell .advisor-result .result-reason strong{color:#fff}
.page-shell .advisor-step .trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.page-shell .advisor-step .trust-strip div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px}
.page-shell .advisor-step .trust-strip strong{color:#fff;display:block}
.page-shell .advisor-step .trust-strip small{color:var(--ink-faint)}
.page-shell .advisor-step hr{border-top-color:var(--line)!important}
.page-shell .lead-status.success{background:rgba(143,223,160,.12);color:var(--acid)}
.page-shell .lead-status.error{background:rgba(255,122,122,.12);color:#ff9d9d}
.page-shell .lead-form-note{color:var(--ink-faint)}
@media(max-width:820px){.page-shell .advisor-step .trust-strip{grid-template-columns:1fr}}

/* [high] .concierge-platforms / .concierge-platform-card / .concierge-advisor-callout (ai-concierge.html) */
.page-shell .concierge-platforms{background:transparent}
.page-shell .concierge-platforms-head h2{color:#fff}
.page-shell .concierge-platforms-head p{color:var(--ink-dim)}
.page-shell .concierge-platform-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35);color:var(--ink-dim)}
.page-shell .concierge-platform-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.page-shell .concierge-platform-card h3,.page-shell .concierge-platform-card strong{color:#fff}
.page-shell .concierge-platform-card p{color:var(--ink-dim)}
.page-shell .concierge-platform-card small{color:var(--ink-faint);font-family:var(--mono)}
.page-shell .concierge-platform-icon{background:rgba(232,148,79,.14);color:var(--violet-soft)}
.page-shell .concierge-learn,.page-shell .concierge-platform-card>b{color:var(--cyan)}
.page-shell .concierge-advisor-callout{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px)}
.page-shell .concierge-advisor-callout strong{color:#fff}
.page-shell .concierge-advisor-callout p{color:var(--ink-dim)}
.page-shell .concierge-callout-icon{background:rgba(232,148,79,.18);color:var(--violet-soft)}

/* [high] .agent-capability-grid article / .industry-proof-grid article / .first-proof-section (agent-ai.html) */
.page-shell .agent-capability-grid article,.page-shell .industry-proof-grid article{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .agent-capability-grid article p,.page-shell .industry-proof-grid article p{color:var(--ink-dim)}
.page-shell .agent-capability-grid article>b{color:var(--violet-soft);font-family:var(--mono)}
.page-shell .industry-proof-grid small{color:var(--cyan);font-family:var(--mono)}
.page-shell .first-proof-section{background:linear-gradient(180deg,var(--void-2),var(--panel))}
.page-shell .first-proof-section .proof-tags span{background:rgba(255,255,255,.05);border:1px solid rgba(216,178,131,.22);color:var(--ink-dim)}

/* [high] .oilfield-gap-grid article / .pilot-roadmap article (industries/oilfield.html) */
.page-shell .oilfield-gap-grid article,.page-shell .pilot-roadmap article{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .oilfield-gap-grid small,.page-shell .pilot-roadmap small{color:var(--cyan);font-family:var(--mono)}
.page-shell .oilfield-gap-grid p,.page-shell .pilot-roadmap p{color:var(--ink-dim)}

/* [high] .route-card (+ .route-icon, .route-card-cta, .solution-demo-inline) (solutions.html) */
.page-shell .route-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .route-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.page-shell .route-card h3{color:#fff}
.page-shell .route-card p{color:var(--ink-dim)}
.page-shell .route-card small{color:var(--cyan);font-family:var(--mono)}
.page-shell .route-card .route-icon{background:rgba(232,148,79,.14);color:var(--violet-soft);box-shadow:none;font-family:var(--mono)}
.page-shell .route-card:before{background:linear-gradient(90deg,var(--violet),var(--cyan))}
.page-shell .route-card:after{background:rgba(232,148,79,.1)}
.page-shell .route-card>a.route-card-cta,.page-shell .route-card-actions .route-card-cta{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06;box-shadow:0 14px 40px rgba(232,148,79,.28)}
.page-shell .route-card>a.solution-demo-inline{color:var(--cyan)}

/* [high] .industries-grid .industry-card text + chips + link (industries.html) */
.page-shell .industries-grid .industry-card{box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .industries-grid .industry-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.page-shell .industries-grid .industry-card h3{color:#fff}
.page-shell .industries-grid .industry-card p{color:var(--ink-dim)}
.page-shell .industry-card-top small{color:var(--ink-faint);font-family:var(--mono)}
.page-shell .industries-grid .industry-card .industry-card-top>span{background:rgba(232,148,79,.14);color:var(--violet-soft);font-family:var(--mono)}
.page-shell .industry-card-link{background:rgba(238,197,132,.1);color:var(--cyan)}
.page-shell .industry-card-link:hover{background:var(--cyan);color:#160d06}

/* [high] .resource-platform-card (resources.html) */
.page-shell .resource-platform-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .resource-platform-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.page-shell .resource-platform-card h3{color:#fff}
.page-shell .resource-platform-card p{color:var(--ink-dim)}
.page-shell .resource-platform-category{color:var(--ink-faint);font-family:var(--mono)}
.page-shell .resource-platform-icon{background:rgba(232,148,79,.14);color:var(--violet-soft);box-shadow:none}
.page-shell .resource-platform-tags span{background:rgba(255,255,255,.05);border-color:rgba(216,178,131,.22);color:var(--ink-dim)}
.page-shell .resource-platform-cta{background:rgba(238,197,132,.1);color:var(--cyan)}
.page-shell .resource-platform-card:hover .resource-platform-cta{background:var(--cyan);color:#160d06}

/* [medium] .concierge-assessment-section:before + .concierge-showcase-hero + .concierge-talk-btn/.concierge-book-btn (ai-concierge.html) */
.page-shell .concierge-showcase-hero{background:radial-gradient(ellipse 60% 55% at 82% 10%,rgba(238,197,132,.13),transparent 60%),radial-gradient(ellipse 55% 55% at 10% 88%,rgba(232,148,79,.16),transparent 60%),linear-gradient(180deg,var(--void) 0%,var(--void-2) 70%,var(--panel) 100%);border-top-color:var(--line)}
.page-shell .concierge-showcase-hero:after{background-image:radial-gradient(circle at 50% 50%,rgba(232,148,79,.45) 0 1px,transparent 1.8px)}
.page-shell .concierge-showcase-kicker{color:var(--cyan);font-family:var(--mono);letter-spacing:.24em}
.page-shell .concierge-showcase-hero p{color:var(--ink-dim)}
.page-shell .concierge-talk-btn{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06;box-shadow:0 14px 40px rgba(232,148,79,.3)}
.page-shell .concierge-book-btn{background:rgba(255,255,255,.03);color:#fff;border:1px solid var(--line-bright);backdrop-filter:blur(10px)}
.page-shell .concierge-assessment-section:before{color:var(--cyan);font-family:var(--mono);letter-spacing:.24em}

/* [medium] .page-cta (industries.html, agent-ai.html, industries/oilfield.html) */
.page-shell .page-cta{background:radial-gradient(ellipse 60% 70% at 85% 15%,rgba(232,148,79,.2),transparent 60%),linear-gradient(180deg,var(--void-2),var(--panel))}
.page-shell .page-cta p{color:var(--ink-dim)}

/* [medium] .agent-page-hero (agent-ai.html) */
.page-shell .agent-page-hero{background:radial-gradient(ellipse 60% 55% at 82% 10%,rgba(238,197,132,.13),transparent 60%),radial-gradient(ellipse 55% 55% at 10% 88%,rgba(232,148,79,.16),transparent 60%),linear-gradient(180deg,var(--void) 0%,var(--void-2) 65%,var(--panel) 100%)}
.page-shell .agent-page-hero p{color:var(--ink-dim)}
.page-shell .agent-core-card small{color:var(--cyan);letter-spacing:.2em}

/* [medium] .resource-card (resources.html) */
.page-shell .resource-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.page-shell .resource-card span{color:var(--cyan);font-family:var(--mono)}
.page-shell .resource-card small{color:var(--ink-faint);font-family:var(--mono)}
.page-shell .resource-card p{color:var(--ink-dim)}
.page-shell .resource-card a{color:var(--cyan)}

/* [medium] .feature-panel p a (careers.html) */
.page-shell .feature-panel p a{color:var(--cyan);font-weight:700}

/* [low] .live-demo-pill / .route-demo-cta borders (solutions.html) */
.page-shell .live-demo-pill{border-color:rgba(143,223,160,.3)}
.page-shell .live-demo-pill i{background:var(--acid);box-shadow:0 0 0 4px rgba(143,223,160,.14)}
.page-shell .route-demo-cta{border-color:rgba(238,197,132,.35)!important}
.page-shell .route-card-actions .route-demo-cta{border:1px solid rgba(238,197,132,.35)}

/* [low] .concierge-footer-grid links (ai-concierge.html) */
.page-shell .concierge-footer-grid a{color:var(--ink-dim)}
.page-shell .concierge-footer-grid a:hover{color:var(--cyan)}
.page-shell .concierge-footer-brand p,.page-shell .concierge-footer-location{color:var(--ink-faint)}

/* ======== PORTFOLIO — 24 overrides ======== */
/* [high] .ai-product-experience-card (+ .featured, card-top text, copy) */
/* --- portfolio.html: AI product experience cards --- */
.ai-product-experience-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.ai-product-experience-card:hover{
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16);
}
.ai-product-experience-card.featured{border-color:var(--violet-soft);box-shadow:0 24px 70px rgba(232,148,79,.16)}
.ai-product-card-top small{color:var(--ink-faint);font-family:var(--mono)}
.ai-product-card-top h3{color:#fff}
.ai-product-card-top p{color:var(--ink-dim)}
.ai-product-copy{color:var(--ink-dim)}

/* [high] .taxiflow-premium-card */
/* --- portfolio.html: TaxiFlow premium card (base border is !important) --- */
.taxiflow-premium-card{
  border-color:rgba(216,178,131,.22)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
}
.taxiflow-premium-card:before{background:linear-gradient(90deg,var(--violet),var(--cyan))}

/* [high] .ai-product-status (.live / .concept / .live-product) */
/* --- portfolio.html: product status chips (acid = live only) --- */
.ai-product-status.live,.ai-product-status.live-product{
  background:rgba(143,223,160,.16);
  color:var(--acid);
  border:1px solid rgba(143,223,160,.3);
}
.ai-product-status.concept{background:rgba(255,255,255,.08);color:var(--ink-dim);border:1px solid var(--line)}

/* [high] .ai-product-dashboard-preview + .mini-* dashboard */
/* --- portfolio.html: BarberFlow mini dashboard mockup --- */
.ai-product-dashboard-preview{background:var(--void-2);border:1px solid var(--line)}
.mini-app-bar{font-family:var(--mono)}
.mini-app-bar i{color:var(--acid)}
.mini-side{background:rgba(255,255,255,.04)}
.mini-side span{color:var(--ink-faint)}
.mini-side span.active{background:rgba(232,148,79,.16);color:#fff}
.mini-main>strong{color:#fff}
.mini-kpis span{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mini-kpis b{color:#fff;font-family:var(--mono)}
.mini-kpis small{color:var(--ink-faint)}
.mini-ai-card{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mini-ai-card small{color:var(--cyan);font-family:var(--mono)}
.mini-ai-card b{color:#fff}
.mini-ai-card p{color:var(--ink-dim)}

/* [high] .taxiflow-mini-flow (+ children) */
/* --- portfolio.html: TaxiFlow voice-to-dispatch mini flow --- */
.taxiflow-mini-flow{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.taxiflow-mini-flow>div span{background:rgba(232,148,79,.14);color:var(--violet-soft);font-family:var(--mono)}
.taxiflow-mini-flow>div b{color:#fff}
.taxiflow-mini-flow>div small{color:var(--ink-faint)}
.taxiflow-mini-flow>i{color:var(--ink-faint)}

/* [high] .product-case-study-link */
/* --- portfolio.html: 'View case study' secondary buttons --- */
.page-shell .product-case-study-link{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-bright);
  color:#fff;
}
.page-shell .product-case-study-link:hover{
  background:rgba(238,197,132,.1);
  border-color:var(--cyan);
  color:var(--cyan);
}

/* [high] .product-experience-note */
/* --- portfolio.html: product demo disclaimer note --- */
.product-experience-note{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-dim)}
.product-experience-note>span{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.product-experience-note strong{color:#fff}

/* [high] .portfolio-ai-products */
/* --- portfolio.html: AI product experiences band --- */
.portfolio-ai-products{
  background:linear-gradient(180deg,var(--void-2),var(--panel));
  border-top:1px solid var(--line);
}

/* [high] .concept-demo-notice text colors */
/* --- shared: concept/demo transparency notice text --- */
.concept-demo-notice{color:var(--ink-dim)}
.concept-demo-notice strong{color:#fff}
.concept-demo-notice span{color:var(--ink-dim)}
.concept-notice-copy small{color:var(--cyan);font-family:var(--mono)}

/* [high] .problem-card */
/* --- prairiecare-clinic-ai.html: workflow card --- */
.problem-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}

/* [medium] .portfolio-filters button (:hover/.active) */
/* --- portfolio.html: filter pills --- */
.portfolio-filters button{font-family:var(--mono);border-color:var(--line)}
.portfolio-filters button:hover,.portfolio-filters button.active{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#160d06;
  border-color:transparent;
}

/* [medium] .case-hero (+ .barber/.salon/.restaurant/.transport/.field) */
/* --- shared: case-study heroes --- */
.case-hero,.case-hero.barber,.case-hero.salon,.case-hero.restaurant,
.case-hero.transport,.case-hero.field{
  background:
    radial-gradient(ellipse 60% 55% at 82% 10%, rgba(238,197,132,.13), transparent 60%),
    radial-gradient(ellipse 55% 55% at 10% 88%, rgba(232,148,79,.16), transparent 60%),
    linear-gradient(180deg,var(--void) 0%,var(--void-2) 65%,var(--panel) 100%);
}
.case-hero{padding:72px 0 60px}
@media(max-width:800px){.case-hero{padding:52px 0 44px}}

/* [medium] .page-section-alt */
/* --- shared: case template alt band (class has no base rule) --- */
.page-section-alt{background:linear-gradient(180deg,var(--void-2),var(--panel))}

/* [medium] .ai-product-actions .secondary */
/* --- portfolio.html: secondary launch button --- */
.page-shell .ai-product-actions .secondary{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-bright);
  color:#fff;
}

/* [medium] .product-demo-label */
/* --- portfolio.html: card demo labels --- */
.product-demo-label{color:var(--cyan);font-family:var(--mono);letter-spacing:.16em}

/* [medium] comfort-cruiser inline screenshot img */
/* --- comfort-cruiser.html: inline-styled approved-concept screenshot --- */
.page-shell .page-section .container>img{
  border-color:rgba(216,178,131,.22)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.35)!important;
}

/* [low] .case-fact-card, .feature-list-card */
/* --- shared: case template side cards → standard glass --- */
.case-fact-card,.feature-list-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.case-fact-card small{color:var(--cyan);font-family:var(--mono);letter-spacing:.14em}
.case-fact-card strong{color:#fff}
.case-fact-card span{color:var(--ink-dim)}
.feature-list-card h3{color:#fff}
.feature-list-card ul{color:var(--ink-dim)}

/* [low] .cta-panel */
/* --- portfolio.html: closing CTA panel --- */
.cta-panel{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.cta-panel p{color:var(--ink-dim)}

/* [low] .case-proof-banner */
/* --- barberflow-ai-product.html: agent proof banner --- */
.case-proof-banner{
  background:
    radial-gradient(ellipse 60% 55% at 80% 12%, rgba(238,197,132,.12), transparent 60%),
    linear-gradient(160deg,var(--void-2),var(--panel));
  padding:64px 0;
}
@media(max-width:800px){.case-proof-banner{padding:48px 0}}
.case-proof-banner p{color:var(--ink-dim)}

/* [low] .demo-status-badge (bare, no .live/.pending) */
/* --- portfolio.html: neutral 'Concept' badge --- */
.demo-status-badge:not(.live):not(.pending){background:rgba(255,255,255,.08);color:var(--ink-dim)}

/* [low] .clinic-preview */
/* --- portfolio.html: clinic preview tile fallback --- */
.clinic-preview{background-color:var(--panel-2)!important}

/* [low] .ai-product-mark (+ .field, .taxi) */
/* --- portfolio.html: product monogram marks --- */
.ai-product-mark{background:linear-gradient(135deg,var(--violet),#7e441d);color:#fff}
.ai-product-mark.field{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.ai-product-mark.taxi{background:linear-gradient(135deg,var(--cyan),#b8702f);color:#fff}

/* [low] .barber-demo-card.featured-demo */
/* --- portfolio.html: restore featured-card accent lost to the generic glass border --- */
.barber-demo-card.featured-demo{border-color:var(--violet-soft)!important}

/* [low] label/badge mono sweep */
/* --- shared: mono for labels/badges the section-4 list missed --- */
.preview-label,.demo-status-badge,.ai-product-status,.proof-badge,
.preview-label,.demo-status-badge,.ai-product-status,.proof-badge{font-family:var(--mono)}

/* ======== BLOG — 23 overrides ======== */
/* [high] .article-body */
/* --- 27b. BLOG ARTICLE PAGES (blog/*.html) --- */
.article-body{background:linear-gradient(180deg,var(--panel),var(--void-2))}

/* [high] .article-content */
.article-content{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}

/* [high] .article-section h2 */
.article-section h2{color:#fff}

/* [high] .article-section p */
.article-section p{color:var(--ink-dim)}

/* [medium] .article-section+.article-section */
.article-section+.article-section{border-top-color:var(--line)}

/* [medium] .article-hero */
.article-hero{background:radial-gradient(ellipse 60% 55% at 82% 10%,rgba(238,197,132,.13),transparent 60%),radial-gradient(ellipse 55% 55% at 10% 88%,rgba(232,148,79,.16),transparent 60%),linear-gradient(180deg,var(--void) 0%,var(--void-2) 65%,var(--panel) 100%)}

/* [low] .article-lead / .article-meta */
.article-lead{color:var(--ink-dim)}
.article-meta{color:var(--ink-faint);font-family:var(--mono)}

/* [medium] .article-cta */
.article-cta{background:linear-gradient(120deg,var(--violet),#34190b);box-shadow:0 30px 80px rgba(232,148,79,.25)}
.article-cta small{color:var(--cyan);font-family:var(--mono);letter-spacing:.18em}

/* [high] .sidebar-insight-card,.sidebar-platforms-card,.sidebar-consult-card */
.sidebar-insight-card,.sidebar-platforms-card,.sidebar-consult-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}

/* [low] .sidebar-insight-card:before */
.sidebar-insight-card:before{background:linear-gradient(90deg,var(--violet),var(--cyan))}

/* [high] .sidebar-eyebrow */
.sidebar-eyebrow,.sidebar-consult-card .sidebar-eyebrow{color:var(--cyan);font-family:var(--mono);font-weight:600;letter-spacing:.18em}

/* [medium] .sidebar-insight-icon */
.sidebar-insight-icon{background:rgba(232,148,79,.16);color:var(--violet-soft);box-shadow:none}

/* [high] .sidebar-insight-card>strong */
.sidebar-insight-card>strong{color:#fff}

/* [high] .sidebar-insight-card p,.sidebar-consult-card p */
.sidebar-insight-card p,.sidebar-consult-card p{color:var(--ink-dim)}

/* [high] .sidebar-card-heading h3 */
.sidebar-card-heading h3{color:#fff}

/* [high] .sidebar-platform */
.sidebar-platform{background:rgba(255,255,255,.04);border:1px solid rgba(216,178,131,.22);color:var(--ink)!important}
.sidebar-platform:hover{background:rgba(255,255,255,.07);border-color:var(--line-bright);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.sidebar-platform:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* [medium] .sidebar-platform .sidebar-platform-badge */
.sidebar-platform .sidebar-platform-badge{background:rgba(232,148,79,.16);color:var(--violet-soft);font-family:var(--mono)}

/* [high] .sidebar-platform-copy strong / small / .sidebar-platform-arrow */
.sidebar-platform-copy strong{color:#fff}
.sidebar-platform-copy small{color:var(--ink-faint)}
.sidebar-platform-arrow{color:var(--cyan)}

/* [medium] .sidebar-consult-btn */
.sidebar-consult-btn{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06!important;box-shadow:0 10px 24px rgba(232,148,79,.3)}
.sidebar-consult-btn:hover{box-shadow:0 14px 28px rgba(238,197,132,.35)}

/* [high] .sidebar-solution-btn */
.sidebar-solution-btn{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);box-shadow:0 9px 22px rgba(0,0,0,.3)}
.sidebar-solution-btn:hover{border-color:var(--line-bright);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.sidebar-solution-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* [medium] .sidebar-solution-btn-icon */
.sidebar-solution-btn-icon{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}

/* [high] .sidebar-solution-btn-copy small / strong */
.sidebar-solution-btn-copy small{color:var(--cyan)!important;font-family:var(--mono)}
.sidebar-solution-btn-copy strong{color:#fff!important}

/* [low] .sidebar-solution-btn-arrow */
.sidebar-solution-btn-arrow{color:var(--cyan)}

/* ======== PRODUCTS — 19 overrides ======== */
/* [high] .problem-card */
.problem-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35);color:var(--ink-dim)}

/* [high] .workflow-step (+ >b, small) */
.workflow-step{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.workflow-step>b{background:rgba(232,148,79,.14);color:var(--violet-soft);font-family:var(--mono)}
.workflow-step small{color:var(--cyan);font-family:var(--mono)}

/* [high] .concept-demo-notice text (strong/span/.concept-notice-copy small) */

/* [high] .related-solutions-section + heading + .related-solution-card family */
.related-solutions-section{background:linear-gradient(180deg,var(--void-2),var(--panel));border-top:1px solid var(--line)}
.related-solutions-heading h2{color:#fff}
.related-solutions-heading p{color:var(--ink-dim)}
.related-solution-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.related-solution-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.related-solution-icon{background:rgba(232,148,79,.14);color:var(--violet-soft)}
.related-solution-copy small{color:var(--cyan);font-family:var(--mono)}
.related-solution-copy strong{color:#fff}
.related-solution-copy>span{color:var(--ink-dim)}
.related-solution-card>b{color:var(--cyan)}

/* [high] .product-pricing-section / .product-pricing-intro h2 */
.product-pricing-section{background:linear-gradient(180deg,var(--void-2),var(--panel))}
.product-pricing-intro h2{color:#fff}

/* [high] .page-shell .product-case-study-link */
.page-shell .product-case-study-link{background:rgba(255,255,255,.03);border:1px solid rgba(216,178,131,.22);color:#fff}
.page-shell .product-case-study-link:hover{background:rgba(238,197,132,.08);border-color:var(--cyan);color:#fff}

/* [high] .demo-proof-card */
.demo-proof-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.demo-proof-card small{color:var(--cyan);font-family:var(--mono)}
.demo-proof-card p strong{color:#fff}

/* [high] .barberflow-public-product-section / .ai-product-experience-card family (barberflow-ai) */
.barberflow-public-product-section{background:linear-gradient(180deg,var(--void-2),var(--panel));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ai-product-experience-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}

.ai-product-card-top small{color:var(--cyan);font-family:var(--mono)}
.ai-product-card-top h3{color:#fff}
.ai-product-card-top p{color:var(--ink-dim)}
.ai-product-copy{color:var(--ink-dim)}
.ai-product-status.live{background:rgba(143,223,160,.16);color:var(--acid);font-family:var(--mono)}

/* [high] .ai-product-dashboard-preview mini-* mock (barberflow-ai) */
.ai-product-dashboard-preview{background:var(--panel);border:1px solid var(--line)}
.mini-side{background:var(--void-2)}
.mini-side span{color:var(--ink-faint)}

.mini-main>strong{color:#fff}
.mini-kpis span{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mini-kpis b{color:#fff}
.mini-kpis small{color:var(--ink-faint)}
.mini-ai-card{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mini-ai-card small{color:var(--cyan)}
.mini-ai-card b{color:#fff}
.mini-ai-card p{color:var(--ink-dim)}

/* [high] .product-experience-note (barberflow-ai) */
.product-experience-note{background:rgba(255,255,255,.03);border:1px solid rgba(216,178,131,.22);color:var(--ink-dim)}
.product-experience-note strong{color:#fff}
.product-experience-note>span{background:var(--violet);color:#fff}

/* [high] .agent-capability-grid article, .managed-steps article, .managed-agent-section (barberflow-ai) */
.agent-capability-grid article,.managed-steps article{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35);color:var(--ink-dim)}
.agent-capability-grid article>b,.managed-steps article>b{color:var(--violet-soft);font-family:var(--mono)}
.managed-agent-section{background:linear-gradient(180deg,var(--panel),var(--void-2))}

/* [high] .fieldflow-gap-section + .ops-flow-card + .oilfield-gap-grid + .oilfield-scenario-card (fieldflow-ai) */
.fieldflow-gap-section{background:linear-gradient(180deg,var(--void-2),var(--panel))}
.ops-flow-card,.oilfield-gap-grid article,.oilfield-scenario-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35);color:var(--ink-dim)}
.ops-flow-card.before{border-top:4px solid rgba(216,178,131,.5)}
.ops-flow-card.after{border-top:4px solid var(--cyan)}
.ops-flow-card small,.oilfield-gap-grid small,.oilfield-scenario-card small{color:var(--cyan)}
.ops-flow{color:var(--ink-dim)}
.ops-flow b{color:var(--cyan)}
.oilfield-gap-grid strong{color:var(--cyan)}
.scenario-time{color:var(--violet-soft);font-family:var(--mono)}
.scenario-steps span{background:rgba(255,255,255,.05);border:1px solid rgba(216,178,131,.22);color:var(--ink-dim)}
.scenario-steps b{color:var(--cyan)}

/* [high] .product-price-card pricing suite (techflow-ai) */
.product-price-card{position:relative;display:flex;flex-direction:column;padding:27px 26px;border-radius:15px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35);color:var(--ink-dim)}
.featured-price-card{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 25px 60px rgba(238,197,132,.15)}
.premium-price-card{background:linear-gradient(160deg,rgba(232,148,79,.16),rgba(232,148,79,.04))}
.tier-label{display:block;color:var(--violet-soft);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.product-price-card h3{margin:10px 0 12px;font-size:30px}
.product-price-card h3 small{font-size:13px;font-weight:500;color:var(--ink-faint)}
.product-price-card p{font-size:13px;color:var(--ink-dim)}
.product-price-card ul{padding-left:18px;font-size:12px;line-height:1.8;flex:1;color:var(--ink-dim)}
.popular-ribbon{position:absolute;top:-13px;left:22px;background:var(--cyan);color:#160d06;border-radius:999px;padding:5px 10px;font-size:9px;font-family:var(--mono);font-weight:800;letter-spacing:.09em}
.product-price-cta{display:block;text-align:center;padding:12px 14px;border-radius:7px;margin-top:15px;background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06;text-decoration:none;font-weight:800;font-size:12px}
.premium-price-cta{background:linear-gradient(135deg,var(--cyan),var(--acid))}

/* [high] .portfolio-card-actions / .portfolio-secondary-action (techflow-ai, clinic-ai) */
.portfolio-card-actions{display:grid;gap:10px;margin-top:auto;padding-top:18px}
.portfolio-card-actions .demo-launch{display:flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none}
.portfolio-secondary-action{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid rgba(216,178,131,.22);border-radius:10px;background:rgba(255,255,255,.03);color:#fff;text-decoration:none;font-weight:700}
.portfolio-secondary-action:hover{border-color:var(--cyan);background:rgba(238,197,132,.08)}

/* [medium] .product-demo-label */
.product-demo-label{color:var(--cyan);font-family:var(--mono)}

/* [medium] .barber-agent-proof band + .agent-proof-card/.agent-flow-card (barberflow-ai) */
.barber-agent-proof{background:radial-gradient(ellipse 60% 55% at 82% 10%,rgba(238,197,132,.13),transparent 60%),radial-gradient(ellipse 55% 55% at 10% 88%,rgba(232,148,79,.16),transparent 60%),linear-gradient(180deg,var(--void) 0%,var(--void-2) 65%,var(--panel) 100%)}
.barber-agent-proof p{color:var(--ink-dim)}
.barber-agent-proof .proof-disclaimer{color:var(--ink-faint);font-family:var(--mono)}
.proof-overline{font-family:var(--mono);color:var(--cyan)}
.agent-flow-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.agent-flow-card small{color:var(--cyan)}

/* [medium] .page-cta */
.page-cta{background:linear-gradient(120deg,var(--violet),#34190b)}
.page-cta p{color:rgba(232,236,247,.85)}

/* [medium] .clinic-preview (clinic-ai) */
.clinic-preview:not([style*="background-image"]){background:linear-gradient(135deg,#0d3a35 0%,#0b1f3a 100%)!important;background-color:#0b1f3a!important}
.clinic-preview .preview-content{background:linear-gradient(180deg,rgba(4,28,42,.15),rgba(4,28,42,.55))!important}

/* [low] .product-pricing-grid .price-card (shadow calibration) */
.product-pricing-grid .price-card{box-shadow:0 20px 55px rgba(0,0,0,.35)}
.product-pricing-grid .price-card:hover{box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}

/* ======== LOCAL — 18 overrides ======== */
/* [medium] .page-cta (all 6 pages) */
/* CTA band — mirror section 19's .cta-box calibration */
.page-cta{background:radial-gradient(ellipse 70% 90% at 85% 10%,rgba(238,197,132,.12),transparent 60%),linear-gradient(120deg,var(--violet),#34190b)}
.page-cta p{color:rgba(255,255,255,.85)}

/* [high] .text-link (ai-automation-lloydminster.html) */
.text-link{color:var(--cyan);font-weight:700;text-decoration:none}
.text-link:hover{color:#fff;text-decoration:underline}

/* [high] .local-platform-card (ai-automation-lloydminster.html) */
.local-platform-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.local-platform-card h3{color:#fff}
.local-platform-card p{color:var(--ink-dim)}
.local-platform-card small{color:var(--ink-faint);font-family:var(--mono)}

/* [medium] .local-platform-card accents (:after bars, .featured, .local-platform-icon) */
.local-platform-card:after{background:var(--violet)}
.local-platform-card.taxiflow:after{background:var(--cyan)}
.local-platform-card.barberfood:after{background:var(--violet-soft)}
.local-platform-card.techflow:after{background:var(--cyan)}
.local-platform-card.featured{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 25px 60px rgba(238,197,132,.15)}
.local-platform-icon{background:rgba(232,148,79,.14);color:var(--violet-soft);font-family:var(--mono)}
.local-platform-card.taxiflow .local-platform-icon{background:rgba(238,197,132,.12);color:var(--cyan)}
.local-platform-card.barberfood .local-platform-icon{background:rgba(232,148,79,.16);color:var(--violet-soft)}
.local-platform-card.techflow .local-platform-icon{background:rgba(238,197,132,.12);color:var(--cyan)}

/* [high] .local-platform-tags span */
.local-platform-tags span{background:rgba(232,148,79,.1);border:1px solid var(--line);color:var(--ink-dim)}

/* [low] .live-demo-pill / .home-live-demo */
.live-demo-pill,.home-live-demo{border-color:rgba(143,223,160,.3)}
.live-demo-pill i,.home-live-demo i{background:var(--acid);box-shadow:0 0 0 4px rgba(143,223,160,.15)}

/* [high] .concept-disclosure (ai-automation-lloydminster.html) */
.concept-disclosure{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);border-left:4px solid var(--cyan);backdrop-filter:blur(16px);color:var(--ink-dim)}
.concept-disclosure strong{color:#fff}

/* [high] .it-service-premium (lloydminster-it-services.html) */
.it-service-premium{--svc:var(--violet-soft);--svc-soft:rgba(232,148,79,.14);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.it-service-webdev{--svc:var(--cyan);--svc-soft:rgba(238,197,132,.12)}
.it-service-consult{--svc:var(--violet-soft);--svc-soft:rgba(232,148,79,.14)}
.it-service-software{--svc:var(--cyan);--svc-soft:rgba(238,197,132,.12)}
.it-service-ai{--svc:var(--violet-soft);--svc-soft:rgba(232,148,79,.14)}
.it-service-premium h3{color:#fff}
.it-service-premium p{color:var(--ink-dim)}
.it-service-premium:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.it-service-premium:hover .it-service-cta{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}

/* [high] .it-service-tags span */
.it-service-tags span{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-dim)}

/* [low] .it-service-number / .it-service-type */
.it-service-number{color:var(--violet-soft);font-family:var(--mono)}
.it-service-type{font-family:var(--mono)}

/* [high] .local-seo-service-grid (lloydminster-it-services.html) */
.local-seo-service-grid article{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.local-seo-service-grid h3{color:#fff}
.local-seo-service-grid p{color:var(--ink-dim)}

/* [medium] .local-service-area (lloydminster-it-services.html) */
.local-service-area{z-index:2}

/* [low] .local-service-hero .page-visual-card (all 6 pages) */
.local-service-hero .page-visual-card{border-top-color:var(--cyan)}

/* [high] .local-concepts-section (website-design-lloydminster.html) */
.local-concepts-section{background:linear-gradient(180deg,var(--panel),var(--void-2))}

/* [high] .local-concept-card (website-design-lloydminster.html) */
.local-concept-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));border:1px solid rgba(216,178,131,.22);backdrop-filter:blur(16px);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.local-concept-card:hover{border-color:var(--line-bright);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16)}
.local-concept-body p{color:var(--ink-dim)}

/* [high] .local-concept-visual + --concept-* props (website-design-lloydminster.html) */
.concept-salon{--concept-accent:var(--violet-soft);--concept-bg:linear-gradient(135deg,rgba(232,148,79,.24),rgba(232,148,79,.05))}
.concept-food{--concept-accent:var(--cyan);--concept-bg:linear-gradient(135deg,rgba(238,197,132,.2),rgba(238,197,132,.05))}
.concept-barber{--concept-accent:var(--violet-soft);--concept-bg:linear-gradient(135deg,rgba(232,148,79,.22),rgba(232,148,79,.05))}
.local-concept-visual:before{border-color:rgba(255,255,255,.16)}
.local-concept-visual>span{background:rgba(255,255,255,.08);color:var(--concept-accent);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.local-concept-visual small{font-family:var(--mono)}

/* [high] .local-concept-actions .btn-primary / .local-light-btn (website-design-lloydminster.html) */
.local-concept-actions .btn-primary{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#160d06}
.local-light-btn{background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid var(--line-bright)!important}

/* [high] .concept-demo-notice text (website-design-lloydminster.html; also fixes index.html) */
.concept-demo-notice{color:var(--ink-dim)}
.concept-demo-notice strong{color:#fff}
.concept-demo-notice span{color:var(--ink-dim)}
.concept-notice-copy small{color:var(--cyan);font-family:var(--mono)}

/* ======== LEGAL — 9 overrides ======== */
/* [high] .legal-header, .legal-main, .not-found */
/* Lift legal/404 chrome above the fixed starfield — same pattern as
   styles-cosmic.css line 84. These are static in-flow elements; no
   position:fixed element is touched (z-index bumps only per CLAUDE.md). */
.legal-header,.legal-main,.not-found{position:relative;z-index:2}

/* [high] .legal-page */
/* equal specificity, loads after the base sheet, so it wins */
.legal-page{background:var(--void);color:var(--ink-dim)}

/* [high] .legal-main p, .legal-main li, .legal-main a, .legal-main .legal-updated */
/* body text / links / meta inside the legal glass card —
   equal specificity to the base rules, wins by load order */
.legal-main p,.legal-main li{color:var(--ink-dim)}
.legal-main a{color:var(--cyan)} /* also recolors .legal-back */
.legal-main .legal-updated{color:var(--ink-faint);font-family:var(--mono)}

/* [high] .problem-card */
/* glass card per established calibration; .page-shell scope mirrors
   the section 27 pattern and outranks the base (0,1,0) rule */
.page-shell .problem-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}

/* [medium] .not-found strong (+ .not-found p) */
/* equal specificity, wins by load order */
.not-found strong{
  color:var(--violet-soft);
  font-family:var(--mono);
  text-shadow:0 0 45px rgba(232,148,79,.45);
}
.not-found p{color:var(--ink-dim)}

/* [medium] .page-shell .feature-grid > article */
/* give the class-less approach articles the same treatment section 27
   gives .feature-panel (metrics mirrored from the base .feature-panel) */
.page-shell .feature-grid>article{
  padding:26px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.page-shell .feature-grid>article span{
  display:inline-grid;width:38px;height:38px;place-items:center;border-radius:11px;
  background:rgba(232,148,79,.14);color:var(--violet-soft);
  font-family:var(--mono);font-weight:600;
}
.page-shell .feature-grid>article h3{margin:18px 0 8px;font-size:20px}
.page-shell .feature-grid>article p{margin:0;color:var(--ink-dim);line-height:1.7}

/* [medium] .page-cta */
/* match the homepage .cta-box violet band (cosmic section 19) */
.page-shell .page-cta{
  background:linear-gradient(120deg,var(--violet),#34190b);
  box-shadow:0 30px 80px rgba(232,148,79,.25);
}
.page-shell .page-cta small{color:var(--cyan);letter-spacing:.2em} /* mono already applied by section 4 */
.page-shell .page-cta p{color:rgba(255,255,255,.82)}

/* [low] .legal-header */
/* align the slim legal header with the shell header chrome */
.legal-header{
  background:rgba(16,10,6,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* [low] .page-shell .page-section.light */
/* same band treatment section 27 gives .page-section.alt */
.page-shell .page-section.light{background:linear-gradient(180deg,var(--void-2),var(--panel))}



/* ============================================================
   29. PAGE IDENTITIES — per-page compositions for the cinematic
   warm redesign (phases 5-7): ClinicFlow light clinical variant,
   TaxiFlow night dispatch, FieldFlow industrial, TechFlow retail,
   BarberFlow / FoodFlow hospitality, Solutions ecosystem,
   Industries panels, Portfolio showcase, editorial Blog/Resources,
   Careers, Contact signal. All scoped to body.pg-* (cosmic.js).
   ============================================================ */

/* ================ IDENTITY GROUP: SCENE-PRODUCTS ================ */
/* ============================================================
   29. PRODUCT IDENTITIES — taxiflow-ai / fieldflow-ai / techflow-ai
   Scoped via body.pg-<slug> (added by cosmic.js). Builds ON TOP of
   the shared glass calibration and the shared .cosmic-step-live /
   .cosmic-scene rules already in section 27f — nothing here
   duplicates them. Append after section 28.
   ============================================================ */

/* ---- SHARED BY THE THREE ASSIGNED PAGES ONLY ----
   The base sheet's .related-solution-card accent system still runs on
   cool literals (--accent: #1768ff blue / #7a2ce2 purple / #079854
   green; techflow defines only unused --related-* vars, so it falls
   back to blue). The 5px :after bar reads off-palette on the warm
   site. Remapped warm, scoped to these three pages so it cannot
   collide with other rollout groups' pages. */
body.pg-taxiflow-ai .related-solution-card,
body.pg-fieldflow-ai .related-solution-card,
body.pg-techflow-ai .related-solution-card{--accent:var(--violet-soft)}
body.pg-taxiflow-ai .related-solution-card.taxiflow,
body.pg-fieldflow-ai .related-solution-card.taxiflow,
body.pg-techflow-ai .related-solution-card.taxiflow{--accent:var(--violet)}          /* amber — route lights */
body.pg-taxiflow-ai .related-solution-card.fieldflow,
body.pg-fieldflow-ai .related-solution-card.fieldflow,
body.pg-techflow-ai .related-solution-card.fieldflow{--accent:#b96f3a}               /* copper — industrial */
body.pg-taxiflow-ai .related-solution-card.techflow,
body.pg-fieldflow-ai .related-solution-card.techflow,
body.pg-techflow-ai .related-solution-card.techflow{--accent:var(--cyan)}            /* gold — electronics */
body.pg-taxiflow-ai .related-solution-card.foodflow,
body.pg-fieldflow-ai .related-solution-card.foodflow,
body.pg-techflow-ai .related-solution-card.foodflow{--accent:#c96b52}                /* warm sage (acid stays live-only) */
body.pg-taxiflow-ai .related-solution-card.barberflow,
body.pg-fieldflow-ai .related-solution-card.barberflow,
body.pg-techflow-ai .related-solution-card.barberflow{--accent:#d98ba9}              /* warm rose, matches barberflow icon grade */

/* ============================================================
   29a. TAXIFLOW — night dispatch
   Warm-black night hero, amber route-light accents, street-grid
   vignette behind the JS route canvas, workflow steps as
   dispatch-console rows.
   ============================================================ */

/* hero base deepened toward night; faint street-light pools low in frame
   (visible whenever the workspace photo is absent or loading) */
body.pg-taxiflow-ai .page-hero{
  background:
    radial-gradient(ellipse 45% 28% at 18% 96%, rgba(232,148,79,.2), transparent 62%),
    radial-gradient(ellipse 34% 22% at 78% 92%, rgba(240,187,116,.12), transparent 60%),
    linear-gradient(180deg,#080402 0%,#0c0704 55%,#150d08 100%);
}

/* night grade for the shared hero photo — filter-only override so the
   image URL/overlays/Ken Burns in 27e stay the single source of truth */
body.pg-taxiflow-ai .page-hero:before{
  filter:saturate(.85) brightness(.72) contrast(1.08);
}

/* the base sheet's .page-hero:after white 46px grid becomes a 64px amber
   street-grid (matches the 64px step of the JS route canvas) plus an edge
   vignette, so the dispatch-route canvas reads against a focused center.
   Paints above the canvas, below the z-index:2 content container. */
body.pg-taxiflow-ai .page-hero:after{
  background-image:
    radial-gradient(ellipse 115% 85% at 50% 38%, transparent 42%, rgba(5,3,2,.34) 72%, rgba(5,3,2,.66) 100%),
    linear-gradient(rgba(238,197,132,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,197,132,.045) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
  mask-image:none;
}

/* kicker as an amber dispatch tag */
body.pg-taxiflow-ai .page-kicker{
  border-color:rgba(232,148,79,.5);
  background:rgba(232,148,79,.09);
  color:var(--violet-soft);
  box-shadow:0 0 18px rgba(232,148,79,.12);
}

/* section eyebrows lean amber (route-light primary) instead of gold */
body.pg-taxiflow-ai .section-intro .eyebrow{color:var(--violet-soft)}

/* dispatch-console live row: amber left rail + wash over the shared
   .cosmic-step-live ring (27f keeps the border + number-chip treatment) */
body.pg-taxiflow-ai .workflow-step.cosmic-step-live{
  background:linear-gradient(90deg,rgba(232,148,79,.14),rgba(255,255,255,.028) 60%);
  box-shadow:inset 3px 0 0 var(--violet),0 0 0 1px rgba(232,148,79,.26),0 0 30px rgba(232,148,79,.15);
}
body.pg-taxiflow-ai .workflow-step.cosmic-step-live small{color:var(--violet-soft)}
/* motion off: no cycling look — return to resting glass */
html.v19-motion-off body.pg-taxiflow-ai .workflow-step.cosmic-step-live{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  box-shadow:none;
}
html.v19-motion-off body.pg-taxiflow-ai .workflow-step.cosmic-step-live small{color:var(--cyan)}

/* ============================================================
   29b. FIELDFLOW — industrial command center
   2px steel borders, slightly desaturated (steel-tinted) glass,
   copper detailing, mono labels promoted. Copper #b96f3a is kept
   to borders/bars/large numerals; label text uses lighter copper
   (#d99a63 ≈ 7:1 on panel) to hold AA.
   ============================================================ */

/* heavier steel panels (uniform across each grid, so no ragged layout) */
body.pg-fieldflow-ai .feature-panel,
body.pg-fieldflow-ai .workflow-step,
body.pg-fieldflow-ai .problem-card,
body.pg-fieldflow-ai .demo-proof-card,
body.pg-fieldflow-ai .ops-flow-card,
body.pg-fieldflow-ai .oilfield-gap-grid article,
body.pg-fieldflow-ai .oilfield-scenario-card,
body.pg-fieldflow-ai .page-visual-card{
  background:linear-gradient(160deg,rgba(213,216,220,.065),rgba(213,216,220,.022));
  border-width:2px;
  border-color:rgba(196,189,178,.26);
}
/* demo showcase shell joins the 2px system (base border is !important) */
body.pg-fieldflow-ai .barber-demo-card{border:2px solid rgba(196,189,178,.28)!important}

/* re-assert the 4px status tops the blanket 2px above would shrink —
   and regrade them: steel = before, copper = after */
body.pg-fieldflow-ai .ops-flow-card.before{border-top:4px solid rgba(158,163,170,.55)}
body.pg-fieldflow-ai .ops-flow-card.after{border-top:4px solid #b96f3a}

/* copper detailing */
body.pg-fieldflow-ai .workflow-step>b{background:rgba(185,111,58,.2);color:#e9a874}
body.pg-fieldflow-ai .feature-panel span{background:rgba(185,111,58,.16);color:#e9a874}
body.pg-fieldflow-ai .scenario-time{color:#cf8a52}
body.pg-fieldflow-ai .oilfield-gap-grid strong{color:#d99a63}
body.pg-fieldflow-ai .ops-flow b,
body.pg-fieldflow-ai .scenario-steps b{color:#cf8a52}

/* mono labels promoted — command-center readouts */
body.pg-fieldflow-ai .ops-flow-card small,
body.pg-fieldflow-ai .oilfield-gap-grid small,
body.pg-fieldflow-ai .oilfield-scenario-card small,
body.pg-fieldflow-ai .demo-proof-card small{
  font-family:var(--mono);
  letter-spacing:.18em;
  color:#d99a63;
}
body.pg-fieldflow-ai .workflow-step small{color:#d99a63;letter-spacing:.16em}
body.pg-fieldflow-ai .section-intro .eyebrow{color:#d99a63}

/* kicker as an industrial plate, not a pill */
body.pg-fieldflow-ai .page-kicker{
  border:1px solid rgba(185,111,58,.55);
  background:rgba(185,111,58,.12);
  color:#e9a874;
  border-radius:6px;
}

/* cool-blue literal (!important in base) regraded steel+copper */
body.pg-fieldflow-ai .fieldflow-product-preview{
  background:linear-gradient(135deg,#15100b 0%,#33251a 100%)!important;
}
body.pg-fieldflow-ai .fieldflow-product-preview .preview-label{color:#e9a874}

/* command-center live step: copper ring over the shared 27f treatment */
body.pg-fieldflow-ai .workflow-step.cosmic-step-live{
  border-color:rgba(185,111,58,.6)!important;
  box-shadow:0 0 0 1px rgba(185,111,58,.3),0 0 28px rgba(185,111,58,.16);
}
body.pg-fieldflow-ai .workflow-step.cosmic-step-live>b{
  background:rgba(185,111,58,.34)!important;
  color:#ffd2a8!important;
}
html.v19-motion-off body.pg-fieldflow-ai .workflow-step.cosmic-step-live{
  box-shadow:none;
  border-color:rgba(196,189,178,.26)!important;
}

/* ============================================================
   29c. TECHFLOW — electronics retail
   Crisper edges (smaller radii), precise 1px gold borders, dashed
   circuit accent lines across card tops, gold accents. The dashed
   top "closes" to solid on the live workflow step — the circuit
   completes. All borders stay 1px: zero layout shift.
   ============================================================ */

/* crisp radii */
body.pg-techflow-ai .feature-panel,
body.pg-techflow-ai .workflow-step,
body.pg-techflow-ai .problem-card,
body.pg-techflow-ai .product-price-card,
body.pg-techflow-ai .related-solution-card,
body.pg-techflow-ai .barber-demo-card,
body.pg-techflow-ai .page-visual-card{border-radius:12px}
body.pg-techflow-ai .workflow-step>b,
body.pg-techflow-ai .feature-panel span{border-radius:8px}
body.pg-techflow-ai .related-solution-icon{border-radius:10px}

/* precise gold hairlines + circuit-dashed tops */
body.pg-techflow-ai .feature-panel,
body.pg-techflow-ai .workflow-step,
body.pg-techflow-ai .problem-card,
body.pg-techflow-ai .product-price-card{
  border-color:rgba(238,197,132,.26);
  border-top:1px dashed rgba(238,197,132,.5);
}
/* keep the featured tier's full gold ring (declared after, so it wins) */
body.pg-techflow-ai .featured-price-card{border-color:var(--cyan)}

/* gold accents */
body.pg-techflow-ai .workflow-step>b{background:rgba(238,197,132,.12);color:var(--cyan)}
body.pg-techflow-ai .feature-panel span{background:rgba(238,197,132,.12);color:var(--cyan)}
body.pg-techflow-ai .tier-label{color:var(--cyan)}

/* kicker as a precise dashed-gold trace tag */
body.pg-techflow-ai .page-kicker{
  border:1px dashed rgba(238,197,132,.45);
  background:rgba(238,197,132,.07);
  color:var(--cyan);
  border-radius:8px;
}

/* cool-teal literal (!important in base) regraded to warm dark + gold light */
body.pg-techflow-ai .techflow-preview{
  background:linear-gradient(145deg,#140d08 0%,#241608 55%,#31200c 100%)!important;
}

/* circuit live step: gold ring, dashed top closes to solid */
body.pg-techflow-ai .workflow-step.cosmic-step-live{
  border-color:rgba(238,197,132,.55)!important;
  border-top-style:solid;
  box-shadow:0 0 0 1px rgba(238,197,132,.3),0 0 26px rgba(238,197,132,.15);
}
body.pg-techflow-ai .workflow-step.cosmic-step-live>b{
  background:rgba(238,197,132,.24)!important;
  color:#ffe2b0!important;
}
html.v19-motion-off body.pg-techflow-ai .workflow-step.cosmic-step-live{
  box-shadow:none;
  border-color:rgba(238,197,132,.26)!important;
  border-top-style:dashed;
}

/* ================ IDENTITY GROUP: HOSPITALITY-PRODUCTS ================ */
/* ════════════════════════════════════════════════════════════
   PAGE IDENTITY LAYER — BARBERFLOW AI + FOODFLOW AI
   Append at the VERY END of styles-cosmic.css (several rules win
   by load order against equal-specificity §27/§28 rules).
   Scoping: body.pg-<slug> classes added by cosmic.js at runtime.
   No positions touched, no markup assumed, no content generated.
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   BARBERFLOW AI (body.pg-barberflow-ai)
   Premium modern barbershop: richest warm treatment — deep
   walnut band gradients, brass details (#d9a86a), opened-up
   tracking on section h2s. No barber-pole clichés.
   ──────────────────────────────────────────────────────────── */

/* barberflow-ai.html — walnut band gradients (deeper, redder than the
   stock void-2→panel bands; luminance kept close so seams don't band) */
body.pg-barberflow-ai .page-section.alt{
  background:
    radial-gradient(ellipse 65% 55% at 85% 0%, rgba(217,168,106,.07), transparent 55%),
    linear-gradient(180deg,#170d06,#261709);
}
body.pg-barberflow-ai .barberflow-public-product-section{
  background:
    radial-gradient(ellipse 70% 60% at 15% 100%, rgba(217,168,106,.08), transparent 60%),
    linear-gradient(180deg,#140b05,#241509);
}
body.pg-barberflow-ai .managed-agent-section{
  background:linear-gradient(180deg,#241509,#150c06);
}
body.pg-barberflow-ai .product-pricing-section{
  background:
    radial-gradient(ellipse 60% 50% at 80% 6%, rgba(217,168,106,.06), transparent 55%),
    linear-gradient(180deg,#120a05,#211408);
}
body.pg-barberflow-ai .related-solutions-section{
  background:linear-gradient(180deg,#170d06,#0f0804);
}
/* top proof band: the page's richest moment — walnut floor, brass air */
body.pg-barberflow-ai .barber-agent-proof{
  background:
    radial-gradient(ellipse 60% 55% at 82% 10%, rgba(217,168,106,.13), transparent 60%),
    radial-gradient(ellipse 55% 55% at 10% 88%, rgba(126,68,29,.28), transparent 60%),
    linear-gradient(180deg,#0d0704 0%,#1a0f07 60%,#291809 100%);
}
/* capability strip between proof band and hero has no base band — give it
   a quiet walnut fade so the sequence reads proof → capabilities → hero */
body.pg-barberflow-ai .agent-capabilities{
  background:linear-gradient(180deg,#150c06,#0d0704);
}
/* CTA band: replace the shared amber→violet remnant (#34190b) with the
   page's own brass-lit walnut — the violet tail is off-brief here */
body.pg-barberflow-ai .page-cta{
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(217,168,106,.18), transparent 60%),
    linear-gradient(120deg,#8a4e20,#2a1608 72%);
}

/* barberflow-ai.html — section h2s: opened tracking (base is -.035em);
   the wider set reads editorial/serif against Space Grotesk's geometry */
body.pg-barberflow-ai .section-intro h2,
body.pg-barberflow-ai .product-pricing-intro h2,
body.pg-barberflow-ai .related-solutions-heading h2{
  letter-spacing:.01em;
}

/* barberflow-ai.html — brass accent system (#d9a86a): kickers, tier
   names, step markers. Live/active states stay jade per system rule. */
body.pg-barberflow-ai .eyebrow,
body.pg-barberflow-ai .section-intro .eyebrow,
body.pg-barberflow-ai .page-kicker,
body.pg-barberflow-ai .pricing-kicker,
body.pg-barberflow-ai .proof-overline{color:#d9a86a}
body.pg-barberflow-ai .price-head span{color:#d9a86a}
body.pg-barberflow-ai .workflow-step small{color:#d9a86a}
body.pg-barberflow-ai .feature-panel span,
body.pg-barberflow-ai .workflow-step>b{
  background:rgba(217,168,106,.13);
  color:#d9a86a;
}
body.pg-barberflow-ai .agent-capability-grid article>b,
body.pg-barberflow-ai .managed-steps article>b{color:#d9a86a}
body.pg-barberflow-ai .demo-feature-row span{border-color:rgba(217,168,106,.3)}
/* brass monogram on the product experience card */
body.pg-barberflow-ai .ai-product-mark{
  background:linear-gradient(140deg,#e9c288,#a06a2c);
  color:#231204;
}
/* dashboard mock frame picks up a brass hairline */
body.pg-barberflow-ai .ai-product-dashboard-preview{border-color:rgba(217,168,106,.3)}
/* agent-flow pills: warm fill + inset brass ring (inset ring = zero
   layout shift, base pills are borderless) */
body.pg-barberflow-ai .agent-flow span{
  background:rgba(217,168,106,.1);
  box-shadow:inset 0 0 0 1px rgba(217,168,106,.16);
}

/* barberflow-ai.html — cool base-sheet remnant: .product-summary p is
   #b9c9df!important in styles.css; regrade warm (needs !important) */
body.pg-barberflow-ai .product-summary p{color:var(--ink-dim)!important}

/* barberflow-ai.html — the bare (Lloydminster) preview tile keeps the
   base sheet's cool navy gradient; regrade to walnut. Josie/Danali keep
   their own brand gradients (already warm/plum), hence the :not() chain */
body.pg-barberflow-ai .demo-browser-preview:not(.josie-preview):not(.danali-preview){
  background:linear-gradient(135deg,#1b0f08 0%,#3a2412 60%,#5a3a1c 100%);
}

/* barberflow-ai.html — .cosmic-step-live (class cycled by cosmic.js over
   step containers: .workflow-step, .managed-steps article,
   .agent-capability-grid article). Brass ring + warm lift; no keyframes. */
body.pg-barberflow-ai .workflow-step,
body.pg-barberflow-ai .managed-steps article,
body.pg-barberflow-ai .agent-capability-grid article{
  transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;
}
body.pg-barberflow-ai .cosmic-step-live{
  border-color:rgba(217,168,106,.55);
  background:linear-gradient(160deg,rgba(217,168,106,.12),rgba(255,255,255,.03));
  box-shadow:0 20px 55px rgba(0,0,0,.35),0 0 0 1px rgba(217,168,106,.3),0 0 34px rgba(217,168,106,.16);
}
body.pg-barberflow-ai .workflow-step.cosmic-step-live>b,
body.pg-barberflow-ai .managed-steps article.cosmic-step-live>b{
  background:linear-gradient(135deg,#e9c288,#b9853f);
  color:#231204;
}
body.pg-barberflow-ai .agent-capability-grid article.cosmic-step-live>b{color:#e9c288}

/* ────────────────────────────────────────────────────────────
   FOODFLOW AI (body.pg-foodflow-ai)
   Premium hospitality: softest warmth — candlelight ambient
   washes, rounded generous cards, cream-forward text.
   ──────────────────────────────────────────────────────────── */

/* foodflow-ai.html — page-scoped cream token */
body.pg-foodflow-ai{--ff-cream:#e7d7bf}

/* foodflow-ai.html — candlelight ambient: stronger amber radials
   breathing through the section bands */
body.pg-foodflow-ai .page-section.alt{
  background:
    radial-gradient(ellipse 75% 60% at 20% 0%, rgba(232,148,79,.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(238,197,132,.08), transparent 55%),
    linear-gradient(180deg,var(--void-2),var(--panel));
}
body.pg-foodflow-ai .product-pricing-section{
  background:
    radial-gradient(ellipse 65% 55% at 80% 8%, rgba(238,197,132,.1), transparent 60%),
    linear-gradient(180deg,var(--void-2),var(--panel));
}
body.pg-foodflow-ai .related-solutions-section{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,148,79,.1), transparent 60%),
    linear-gradient(180deg,var(--void-2),var(--panel));
}
/* CTA band: candlelit ember gradient instead of the shared violet-tail remnant */
body.pg-foodflow-ai .page-cta{
  background:
    radial-gradient(ellipse 60% 80% at 78% 15%, rgba(242,184,120,.22), transparent 60%),
    radial-gradient(ellipse 50% 70% at 15% 90%, rgba(232,148,79,.14), transparent 60%),
    linear-gradient(120deg,#9c5a26,#31180a 75%);
}

/* foodflow-ai.html — rounded, generous cards (radius only; padding is
   left alone to respect the density calibration) */
body.pg-foodflow-ai .feature-panel,
body.pg-foodflow-ai .workflow-step,
body.pg-foodflow-ai .related-solution-card,
body.pg-foodflow-ai .page-visual-card{border-radius:24px}
body.pg-foodflow-ai .barber-demo-card{border-radius:26px}
body.pg-foodflow-ai .price-card{border-radius:22px}
body.pg-foodflow-ai .faq-list details,
body.pg-foodflow-ai .concept-demo-notice{border-radius:20px}
body.pg-foodflow-ai .btn,
body.pg-foodflow-ai .demo-launch,
body.pg-foodflow-ai .price-cta,
body.pg-foodflow-ai .product-case-study-link{border-radius:12px}

/* foodflow-ai.html — cream-forward text. Two rules need !important:
   .price-card>p and .faq-list details p are set !important by cosmic §9,
   .product-summary p is !important in the base sheet. */
body.pg-foodflow-ai .section-intro p,
body.pg-foodflow-ai .feature-panel p,
body.pg-foodflow-ai .problem-card,
body.pg-foodflow-ai .check-list li,
body.pg-foodflow-ai .workflow-step p,
body.pg-foodflow-ai .barber-demo-body>p,
body.pg-foodflow-ai .price-card ul,
body.pg-foodflow-ai .page-visual-card li{color:var(--ff-cream)}
body.pg-foodflow-ai .price-card>p,
body.pg-foodflow-ai .faq-list details p,
body.pg-foodflow-ai .product-summary p{color:var(--ff-cream)!important}
/* candlelit headlines: warm cream instead of clinical white */
body.pg-foodflow-ai .page-hero h1,
body.pg-foodflow-ai .section-intro h2,
body.pg-foodflow-ai .product-pricing-intro h2,
body.pg-foodflow-ai .related-solutions-heading h2,
body.pg-foodflow-ai .page-visual-card strong{color:#f6ecd9}
/* capability numerals: soft gold chip instead of the hotter amber */
body.pg-foodflow-ai .feature-panel span{
  background:rgba(238,197,132,.13);
  color:var(--cyan);
}

/* foodflow-ai.html — softer, wider candle-glow on hover (border-color
   stays on the shared calibration; only the shadow softens) */
body.pg-foodflow-ai .barber-demo-card:hover,
body.pg-foodflow-ai .feature-panel:hover,
body.pg-foodflow-ai .related-solution-card:hover{
  box-shadow:0 26px 70px rgba(0,0,0,.4),0 0 55px rgba(232,148,79,.13);
}

/* foodflow-ai.html — .cosmic-step-live: soft amber candle ring on the
   active .workflow-step; no keyframes introduced */
body.pg-foodflow-ai .workflow-step{
  transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;
}
body.pg-foodflow-ai .cosmic-step-live{
  border-color:rgba(242,184,120,.5);
  background:linear-gradient(160deg,rgba(232,148,79,.13),rgba(255,255,255,.03));
  box-shadow:0 20px 55px rgba(0,0,0,.35),0 0 44px rgba(232,148,79,.16);
}
body.pg-foodflow-ai .workflow-step.cosmic-step-live>b{
  background:linear-gradient(135deg,#f2b878,#c9772f);
  color:#231204;
}

/* ────────────────────────────────────────────────────────────
   Motion gate — disable the introduced step-live transitions
   under the site motion toggle (html.v19-motion-off)
   ──────────────────────────────────────────────────────────── */
.v19-motion-off body.pg-barberflow-ai .workflow-step,
.v19-motion-off body.pg-barberflow-ai .managed-steps article,
.v19-motion-off body.pg-barberflow-ai .agent-capability-grid article,
.v19-motion-off body.pg-foodflow-ai .workflow-step{transition:none}

/* ================ IDENTITY GROUP: CORE-PAGES ================ */
/* ============================================================
   29. PAGE IDENTITY PASS — solutions, industries, industries/oilfield,
   portfolio. Layered AFTER section 28; every rule scoped to the
   body.pg-<slug> tag cosmic.js applies. Adds identity + interaction
   only — base colors/glass come from the warm rebase and are not
   duplicated here.
   ============================================================ */

/* ======== SOLUTIONS (body.pg-solutions) — AI ecosystem node grid ======== */

/* Idle state: every route icon reads as a network node — the amber chip
   (already applied by section 28) gains a faint standing ring, and its
   transition list is extended so the hover activation animates smoothly.
   (Keeps the base sheet's spring transform transition intact.) */
body.pg-solutions .route-card .route-icon{
  box-shadow:0 0 0 5px rgba(232,148,79,.07);
  transition:transform .45s var(--motion-spring,cubic-bezier(.18,.89,.32,1.28)),
    background-color .3s ease,color .3s ease,box-shadow .3s ease;
}
/* corner glow bubble becomes transition-ready for the ambient change */
body.pg-solutions .route-card:after{transition:background-color .5s ease}

/* Shared hover: border lights, node chip fills solid amber (echoing the
   homepage core orb), lift is a step larger than the generic card hover.
   Solid amber (not the gradient) so background-color animates. */
body.pg-solutions .route-card:hover{
  transform:translateY(-8px);
  border-color:rgba(240,187,116,.6);
  box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 0 1px rgba(232,148,79,.32),0 0 52px rgba(232,148,79,.22);
}
body.pg-solutions .route-card:hover:after{background:rgba(232,148,79,.18)}
body.pg-solutions .route-card:hover .route-icon{
  background:var(--violet);
  color:#160d06;
  box-shadow:0 0 0 6px rgba(232,148,79,.16),0 0 28px rgba(232,148,79,.5);
}

/* Ecosystem focus: hovering one node gently recedes its siblings —
   fine-pointer only so touch taps never leave the grid dimmed.
   :has() keeps the grid at full strength while only gaps are hovered. */
@media(hover:hover) and (pointer:fine){
  body.pg-solutions .route-grid .route-card{
    transition:transform .28s var(--motion-ease,cubic-bezier(.2,.72,.2,1)),
      box-shadow .28s ease,border-color .28s ease,opacity .35s ease;
  }
  body.pg-solutions .route-grid:has(.route-card:hover) .route-card:not(:hover){opacity:.88}
}

/* CTA warmth: primary CTA glow deepens; demo pill inverts to gold on its
   own hover (!important required — 25b set its idle colors !important). */
body.pg-solutions .route-card>a.route-card-cta:hover{box-shadow:0 16px 36px rgba(232,148,79,.4)}
body.pg-solutions .route-demo-cta{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
body.pg-solutions .route-demo-cta:hover{
  background:var(--cyan)!important;
  color:#160d06!important;
  border-color:var(--cyan)!important;
}
body.pg-solutions .route-card>a.solution-demo-inline:hover{color:var(--violet-soft)}

/* ======== INDUSTRIES (body.pg-industries) — immersive panels ======== */

/* Bigger presence: taller panels, a notch more padding. background-color
   is declared as a transparent amber under-layer beneath the glass
   gradient so the ambient hover light can actually animate (gradients
   cannot transition; background-color can). The full transition list is
   restated because the base sheet's (0,2,0) rule was overriding
   .reveal-soft's opacity/filter transition — this also restores the
   intended reveal fade on these cards. */
body.pg-industries .industries-grid .industry-card{
  min-height:355px;
  padding:30px 27px 26px;
  background-color:rgba(232,148,79,0);
  transition:opacity .8s ease,filter .8s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,
    border-color .35s ease,background-color .5s ease;
}
@media(max-width:900px){body.pg-industries .industries-grid .industry-card{min-height:300px}}
@media(max-width:600px){body.pg-industries .industries-grid .industry-card{min-height:0;padding:26px 24px 24px}}

/* Warm regrade the legacy per-industry accent bar (base sheet still paints
   it blue/green/purple via --industry-accent — missed by the audit pass) */
body.pg-industries .industries-grid .industry-card:before{
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  opacity:.75;
  transition:opacity .35s ease;
}
body.pg-industries .industries-grid .industry-card:hover:before{opacity:1}

/* Hover: subtle scale + ambient light rising toward amber */
body.pg-industries .industries-grid .industry-card:hover{
  transform:translateY(-6px) scale(1.012);
  background-color:rgba(232,148,79,.06);
  border-color:rgba(240,187,116,.55);
  box-shadow:0 32px 85px rgba(0,0,0,.48),0 0 0 1px rgba(232,148,79,.28),0 0 46px rgba(232,148,79,.18);
}

/* Icon chip activates — solid amber fill, dark numeral, soft bloom */
body.pg-industries .industries-grid .industry-card .industry-card-top>span{
  transition:background-color .35s ease,color .35s ease,box-shadow .35s ease;
}
body.pg-industries .industries-grid .industry-card:hover .industry-card-top>span{
  background:var(--violet);
  color:#160d06;
  box-shadow:0 0 24px rgba(232,148,79,.45);
}

/* Capability text brightens on hover (the markup has no hidden-able
   capability element, so per brief the existing copy brightens instead) */
body.pg-industries .industries-grid .industry-card p,
body.pg-industries .industry-card-top small{transition:color .35s ease}
body.pg-industries .industries-grid .industry-card:hover p{color:var(--ink)}
body.pg-industries .industries-grid .industry-card:hover .industry-card-top small{color:var(--ink-dim)}

/* Card link warms with the panel; direct link hover re-asserted so the
   full gold fill from section 28 still wins over the card-hover tint */
body.pg-industries .industry-card:hover .industry-card-link{background:rgba(238,197,132,.16)}
body.pg-industries .industry-card .industry-card-link:hover{background:var(--cyan);color:#160d06}

/* ======== INDUSTRIES/OILFIELD (body.pg-oilfield) — immersive panels ======== */

/* Gap-grid + pilot-roadmap articles gain presence (padding up from the
   base 20px) and the same ambient amber hover as the industries hub */
body.pg-oilfield .oilfield-gap-grid article,
body.pg-oilfield .pilot-roadmap article{
  padding:24px 22px;
  background-color:rgba(232,148,79,0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,
    border-color .35s ease,background-color .5s ease;
}
body.pg-oilfield .oilfield-gap-grid article:hover,
body.pg-oilfield .pilot-roadmap article:hover{
  transform:translateY(-5px) scale(1.012);
  background-color:rgba(232,148,79,.06);
  border-color:rgba(240,187,116,.55);
  box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.26),0 0 38px rgba(232,148,79,.16);
}
body.pg-oilfield .oilfield-gap-grid article p,
body.pg-oilfield .pilot-roadmap article p{transition:color .35s ease}
body.pg-oilfield .oilfield-gap-grid article:hover p,
body.pg-oilfield .pilot-roadmap article:hover p{color:var(--ink)}

/* "Where it fits" feature panels: ambient light + numbered chip activates
   (mirrors the industries-hub chip so both pages read as one system) */
body.pg-oilfield .feature-panel{
  background-color:rgba(232,148,79,0);
  transition:opacity .8s ease,filter .8s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,
    border-color .35s ease,background-color .5s ease;
}
body.pg-oilfield .feature-panel:hover{
  transform:translateY(-6px) scale(1.01);
  background-color:rgba(232,148,79,.06);
}
body.pg-oilfield .feature-panel span{transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
body.pg-oilfield .feature-panel:hover span{
  background:var(--violet);
  color:#160d06;
  box-shadow:0 0 22px rgba(232,148,79,.42);
}
body.pg-oilfield .feature-panel p{transition:color .35s ease}
body.pg-oilfield .feature-panel:hover p{color:var(--ink)}

/* ======== PORTFOLIO (body.pg-portfolio) — premium showcase ======== */

/* Showcase previews: slow warm zoom. transform-origin bottom keeps the
   preview/body seam pinned; .barber-demo-card{overflow:hidden} clips the
   top/side bleed, so nothing escapes the card radius. Works for gradient
   previews AND the photo-backed ones (clinic, comfort-cruiser) since the
   image rides the container's background. */
body.pg-portfolio .barber-demo-card .demo-browser-preview{
  transform-origin:50% 100%;
  transition:transform 1.4s cubic-bezier(.16,.66,.2,1),box-shadow .6s ease,filter .6s ease;
}
body.pg-portfolio .barber-demo-card:hover .demo-browser-preview{
  transform:scale(1.045);
  filter:brightness(1.05) saturate(1.06);
  box-shadow:inset 0 0 70px rgba(232,148,79,.16); /* warm light suffuses the preview */
}

/* CTAs answer the card hover: launch button blooms amber, case-study
   outline warms. Direct hovers re-asserted at higher specificity so the
   stronger direct states from sections 22/28 are never muted. */
body.pg-portfolio .barber-demo-card .demo-launch{
  transition:box-shadow .35s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
body.pg-portfolio .barber-demo-card:hover .demo-launch{box-shadow:0 14px 34px rgba(232,148,79,.38)}
body.pg-portfolio .barber-demo-card .demo-launch:hover{box-shadow:0 16px 40px rgba(232,148,79,.45)}
body.pg-portfolio .barber-demo-card .product-case-study-link{
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
body.pg-portfolio .barber-demo-card:hover .product-case-study-link{border-color:rgba(238,197,132,.5)}
body.pg-portfolio .barber-demo-card .product-case-study-link:hover{border-color:var(--cyan)}

/* AI product experience cards: the dashboard mock and voice-flow strip
   answer the hover with a whisper of the same treatment. Scale is tiny
   (1.012) because these sit inside padded, unclipped cards. */
body.pg-portfolio .ai-product-dashboard-preview{
  transition:transform 1.2s cubic-bezier(.16,.66,.2,1),border-color .5s ease,box-shadow .6s ease;
}
body.pg-portfolio .ai-product-experience-card:hover .ai-product-dashboard-preview{
  transform:scale(1.012);
  border-color:rgba(240,187,116,.45);
  box-shadow:0 14px 40px rgba(232,148,79,.14);
}
body.pg-portfolio .taxiflow-mini-flow{transition:border-color .5s ease,background-color .5s ease}
body.pg-portfolio .ai-product-experience-card:hover .taxiflow-mini-flow{
  border-color:rgba(240,187,116,.4);
  background-color:rgba(232,148,79,.06);
}

/* Filter pills: transitions (base sheet has none, so the section-28 warm
   active state currently snaps) + a standing glow on the active filter */
body.pg-portfolio .portfolio-filters button{
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
body.pg-portfolio .portfolio-filters button.active{box-shadow:0 10px 26px rgba(232,148,79,.28)}
body.pg-portfolio .portfolio-filters button:not(.active):hover{border-color:rgba(240,187,116,.5)}

/* ======== MOTION OPT-OUT — strip every transform this pass introduces
   (color/border/glow feedback stays; movement stops) ======== */
.v19-motion-off body.pg-solutions .route-card:hover,
.v19-motion-off body.pg-industries .industries-grid .industry-card:hover,
.v19-motion-off body.pg-oilfield .oilfield-gap-grid article:hover,
.v19-motion-off body.pg-oilfield .pilot-roadmap article:hover,
.v19-motion-off body.pg-oilfield .feature-panel:hover{transform:none}
.v19-motion-off body.pg-portfolio .barber-demo-card:hover .demo-browser-preview,
.v19-motion-off body.pg-portfolio .ai-product-experience-card:hover .ai-product-dashboard-preview{transform:none;filter:none}
.v19-motion-off body.pg-solutions .route-grid:has(.route-card:hover) .route-card:not(:hover){opacity:1}

/* ================ IDENTITY GROUP: EDITORIAL-PAGES ================ */
/* ============================================================
   29. PAGE IDENTITY PASS — resources, careers, contact, blog
   Layered on top of sections 27–28 (warm rebase). Adds identity
   only — base colors are already handled. Scoped via the
   body.pg-<slug> tags cosmic.js applies; blog rules use the
   shared article-template classes (they exist only on the six
   /blog/*.html pages, verified, so template-level selectors are
   correct everywhere they match).
   ============================================================ */

/* ================================================================
   RESOURCES (resources.html — body.pg-resources)
   Knowledge center: editorial dark layout, movement on the guide
   cards. .resource-card is NOT in cosmic.js tilt/spotlight lists
   and has no base transition/hover — pure-CSS motion, no conflicts.
   ================================================================ */

/* editorial hairline between the category/read-time row and title */
body.pg-resources .resource-card>div{
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

/* card lift + amber glow (standard cosmic hover calibration);
   :focus-within gives keyboard users the same affordance */
body.pg-resources .resource-card{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
body.pg-resources .resource-card:hover,
body.pg-resources .resource-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--line-bright);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(232,148,79,.25),0 0 40px rgba(232,148,79,.16);
}

/* title underline slide — background trick, no injected content */
body.pg-resources .resource-card h3{
  padding-bottom:8px;
  background-image:linear-gradient(90deg,var(--violet),var(--cyan));
  background-repeat:no-repeat;
  background-size:0 2px;
  background-position:0 100%;
  transition:background-size .45s cubic-bezier(.2,.8,.2,1);
}
body.pg-resources .resource-card:hover h3,
body.pg-resources .resource-card:focus-within h3{background-size:100% 2px}

/* "Read article →" nudge (anchor is a flex item — transform is safe) */
body.pg-resources .resource-card a{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s ease}
body.pg-resources .resource-card:hover a,
body.pg-resources .resource-card:focus-within a{transform:translateX(4px);color:var(--violet-soft)}

/* cool-blue base-sheet remnants sections 27/28 never swept, regraded
   warm: hero corner glow (styles.css:1221, keeps its faimaraAgentGlow
   drift) and the platform-band halo (styles.css:672) */
body.pg-resources .page-hero:after{
  background:radial-gradient(circle,rgba(232,148,79,.13),transparent 68%);
}
body.pg-resources .resource-platform-section:before{
  background:radial-gradient(circle,rgba(232,148,79,.09),transparent 66%);
}

/* ================================================================
   CAREERS (careers.html — body.pg-careers)
   "Build the future of practical AI": hero ambient one stop
   brighter, amber value markers. Aspirational, restrained.
   ================================================================ */

/* brighter hero washes; same linear base so the section still blends
   into the page rhythm */
body.pg-careers .page-hero{
  background:
    radial-gradient(ellipse 62% 55% at 82% 8%, rgba(238,197,132,.19), transparent 62%),
    radial-gradient(ellipse 55% 55% at 8% 88%, rgba(232,148,79,.22), transparent 60%),
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(240,187,116,.07), transparent 65%),
    linear-gradient(180deg,var(--void) 0%,var(--void-2) 60%,var(--panel) 100%);
}
/* lift the workspace-photo layer slightly (filter only — position and
   Ken Burns animation untouched) */
body.pg-careers .page-hero:before{filter:saturate(.92) brightness(1.04) contrast(1.04)}
/* warm regrade of the cool corner glow, a notch brighter here */
body.pg-careers .page-hero:after{background:radial-gradient(circle,rgba(232,148,79,.17),transparent 68%)}

/* kicker joins the amber system */
body.pg-careers .page-kicker{color:var(--violet-soft);border-color:rgba(240,187,116,.32)}

/* "Future team disciplines" value list: amber markers (overrides the
   gold defaults from section 27 at higher specificity) */
body.pg-careers .page-visual-card li:before{
  background:rgba(232,148,79,.16);
  color:var(--violet-soft);
}

/* ================================================================
   CONTACT (contact.html — body.pg-contact)
   Split cinematic: the form is a console that warms up when the
   visitor engages, and fires a one-shot amber signal on success.
   ================================================================ */

/* field engagement: smooth transitions + deepened amber focus ring
   (:not([aria-invalid="true"]) keeps the red error state winning on
   invalid fields; section 20's outline:none still applies) */
body.pg-contact .contact-form input,
body.pg-contact .contact-form select,
body.pg-contact .contact-form textarea{
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
body.pg-contact .contact-form input:focus:not([aria-invalid="true"]),
body.pg-contact .contact-form select:focus,
body.pg-contact .contact-form textarea:focus:not([aria-invalid="true"]){
  border-color:var(--violet-soft)!important; /* ties with section 20's !important, wins by load order */
  background:rgba(232,148,79,.07)!important;
  box-shadow:0 0 0 3px rgba(232,148,79,.2),0 0 26px rgba(232,148,79,.13);
}

/* the console itself warms while any field is focused.
   position:relative anchors the signal ring below — the form is
   static/in-flow in the base sheet (NOT position:fixed), so this is
   safe per the fixed-element rule */
body.pg-contact .contact-form{
  position:relative;
  transition:border-color .45s ease,box-shadow .45s ease;
}
body.pg-contact .contact-form:focus-within{
  border-color:rgba(240,187,116,.38)!important; /* section 9 border is !important */
  box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 30px rgba(232,148,79,.1);
}

/* one-shot submit signal — cosmic.js adds .lead-sent for 2.6s when
   the status region reports success. A thin amber pulse travels up
   the form's border: the ::after is masked to a 2px ring (border-box
   minus content-box), and a horizontal band in an oversized gradient
   sweeps bottom-to-top through it. Invisible at rest (opacity:0). */
body.pg-contact .contact-form:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;            /* base card radius 13px + 1px outset */
  padding:2px;                   /* ring thickness */
  background-image:linear-gradient(to top,
    transparent 38%,
    rgba(232,148,79,.5) 46%,
    var(--violet-soft) 50%,
    rgba(232,148,79,.5) 54%,
    transparent 62%);
  background-repeat:no-repeat;
  background-size:100% 260%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
}
body.pg-contact .contact-form.lead-sent{border-color:rgba(240,187,116,.55)!important}
body.pg-contact .contact-form.lead-sent:after{
  animation:pg-contact-signal 1.5s cubic-bezier(.3,.1,.25,1) 1;
}
@keyframes pg-contact-signal{
  from{opacity:1;background-position:0 0%}    /* band parked below the form */
  to{opacity:1;background-position:0 100%}    /* exits past the top edge */
}
/* motion gate for the keyframe this pass introduces (cosmic.js also
   never adds .lead-sent while motion is off — belt and suspenders) */
.v19-motion-off .pg-contact .contact-form:after{animation:none!important}

/* warm regrade of the cool hero corner glow (same remnant as resources) */
body.pg-contact .page-hero:after{
  background:radial-gradient(circle,rgba(232,148,79,.13),transparent 68%);
}

/* ================================================================
   BLOG ARTICLE TEMPLATE (blog/*.html — all six articles)
   Editorial AI publication. Audited on what-is-human-supervised-ai;
   all six articles share the template (verified: each opens
   .article-content with an .article-section as first child).
   article-*/sidebar-* classes exist only on blog pages, so these
   shared-template rules satisfy the scoping policy. Sidebar cards
   are already warmed by section 28 — not duplicated here.
   ================================================================ */

/* the reading surface: warm parchment-dark, opaque editorial card
   (replaces the generic glass from section 28 at higher specificity) */
.page-shell .article-content{
  background:
    radial-gradient(ellipse 90% 36% at 50% -4%, rgba(240,187,116,.06), transparent 60%),
    linear-gradient(170deg,#2a1c12 0%,var(--panel-2) 45%,#1d1209 100%);
  border:1px solid rgba(216,178,131,.25);
  box-shadow:0 24px 65px rgba(0,0,0,.4);
}

/* editorial body type: larger, cream, generous leading
   (#e8dcc7 on the parchment card ≈ 13.8:1) */
.page-shell .article-section p{
  font-size:1.08rem;
  line-height:1.8;
  color:#e8dcc7;
}

/* section headings clamp up; thin amber overline gives each section
   an editorial anchor (empty decorative bar, no invented text) */
.page-shell .article-section h2{
  font-size:clamp(26px,2.6vw,33px);
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.page-shell .article-section h2:before{
  content:"";
  display:block;
  width:34px;height:2px;border-radius:2px;
  margin-bottom:14px;
  background:linear-gradient(90deg,var(--violet),rgba(232,148,79,0));
}

/* opening paragraph slightly larger, full cream */
.page-shell .article-content .article-section:first-child p:first-of-type{
  font-size:1.17rem;
  line-height:1.75;
  color:var(--ink);
}
/* amber drop cap on the article opening — ::first-letter, not content
   injection. One per article (per-section drop caps read gimmicky
   with these short sections). ≈7.8:1 on the card, display face. */
.page-shell .article-content .article-section:first-child p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:700;
  font-size:3.05em;
  line-height:.82;
  padding:.06em .14em 0 0;
  color:var(--violet);
}

/* a touch more air between sections to match the larger type */
.page-shell .article-section+.article-section{margin-top:2.4rem;padding-top:2.4rem}

/* hero lead reads a half-step larger on wide viewports */
.page-shell .article-lead{font-size:clamp(1.18rem,1.5vw,1.28rem)}

/* closing CTA: section 28 still carries the pre-pivot indigo literal
   (#34190b) next to the amber token — regraded to deep copper here.
   #9c5623→#57300f keeps white h2 ≥5:1 across the band; the cream
   kicker replaces gold-on-amber which fell below AA. */
.page-shell .article-cta{
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(238,197,132,.16), transparent 60%),
    linear-gradient(120deg,#9c5623,#57300f);
  box-shadow:0 30px 80px rgba(232,148,79,.22);
}
.page-shell .article-cta small{color:var(--star)}


/* ---------- v19.4.1: PrairieCare preview card — clinical teal retired,
   matches the warm preview treatment of its siblings ---------- */
.clinic-preview:not([style*="background-image"]){background:linear-gradient(135deg,#241811,#31200f)!important;background-color:#241811!important}
.clinic-preview .preview-content{background:linear-gradient(180deg,rgba(11,7,5,.08),rgba(11,7,5,.55))!important}
.clinic-preview .preview-label{color:var(--cyan)!important}

/* ---------- v19.5: bottom-right fixed stack on the homepage ----------
   The "Find My AI Solution" pill, the round concierge launcher, and the
   back-to-top arrow all landed at the same corner. Stack (bottom to top):
   launcher -> pill -> arrow. Interior pages have only the pill; untouched. */
.pg-home .concierge-fab{bottom:96px}
.pg-home .back-to-top{bottom:170px}
@media(max-width:800px){
  .pg-home .concierge-fab{bottom:158px;right:14px}
  .pg-home .back-to-top{display:none} /* redundant on touch; was overlapping the launcher */
}

/* ---------- v19.8 architecture pass ---------- */
.home-lanes{padding:34px 0 0}
.home-lanes .route-grid{grid-template-columns:repeat(2,1fr);gap:18px}
.home-lanes .route-card{min-height:0;text-decoration:none}
.home-lanes .route-more{margin-top:auto;color:var(--cyan);font-weight:800}
@media(max-width:700px){.home-lanes .route-grid{grid-template-columns:1fr}}
.footer-grid-v15{grid-template-columns:1.5fr repeat(4,1fr)}
@media(max-width:1050px){.footer-grid-v15{grid-template-columns:1.5fr 1fr 1fr}}
.founder-mini{margin-top:18px}
.founder-mini strong{font-size:18px}
.home-lanes .route-card{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028))!important;
  border:1px solid rgba(216,178,131,.22)!important;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  color:var(--ink-dim);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.home-lanes .route-card:hover{
  transform:translateY(-5px);
  border-color:rgba(240,187,116,.45)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 40px rgba(232,148,79,.14);
}
.home-lanes .route-card h3{color:#fff;font-size:21px}
.home-lanes .route-card p{color:var(--ink-dim)}
.home-lanes .route-card small{color:var(--cyan);font-family:var(--mono);letter-spacing:.16em}
.home-lanes .route-icon{background:rgba(232,148,79,.14)!important;color:var(--violet-soft)!important;font-family:var(--mono);font-weight:700}

/* ---------- v19.9: services/about/local-pages cool remnants ---------- */
.local-services-head p,.future-intelligence-head p{color:var(--ink-dim)}
.local-service-tile{--service-accent:var(--violet-soft)} /* per-tile cool accents unified warm */
.ecosystem-statement{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(216,178,131,.22);
}
.local-area-note{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);
}
.local-services-home{padding-bottom:64px!important} /* was 104px - dead band above Future Intelligence */

/* status badges: never stretch with the flex row, never wrap - uniform pills */
.demo-status-badge,.ai-product-status{
  white-space:nowrap;
  align-self:center;
  display:inline-flex;
  align-items:center;
  line-height:1;
  height:auto!important;
}

/* ---------- v20.0: BarberFlow Voice Console + launch chrome ---------- */
.voice-console{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.24);
  border-radius:22px;
  padding:20px;
  backdrop-filter:blur(16px);
  box-shadow:0 26px 70px rgba(0,0,0,.45);
  display:grid;
  gap:14px;
}
.vc-head{display:flex;justify-content:space-between;align-items:center}
.vc-live{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--cyan);display:inline-flex;align-items:center;gap:8px}
.vc-live i{width:7px;height:7px;border-radius:50%;background:var(--violet-soft);box-shadow:0 0 10px rgba(242,184,120,.8);animation:faimaraStatusPulse 1.8s infinite}
.vc-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.vc-wave{width:100%;height:46px;display:block}
.vc-transcript{display:grid;gap:8px;min-height:150px;align-content:start}
.vc-line{font-size:13.5px;line-height:1.5;color:var(--ink-dim);padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.vc-line b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px;color:var(--violet-soft)}
.vc-line.agent{background:rgba(232,148,79,.08);border-color:rgba(240,187,116,.25)}
.vc-line.agent b{color:var(--cyan)}
.vc-steps{display:flex;gap:6px;flex-wrap:wrap}
.vc-steps span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;
  padding:6px 10px;transition:color .4s ease,border-color .4s ease,background .4s ease;
}
.vc-steps span.on{color:#ffdfae;border-color:rgba(240,187,116,.5);background:rgba(232,148,79,.12)}
.vc-result{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid rgba(240,187,116,.35);border-radius:14px;padding:12px 14px;
  background:linear-gradient(135deg,rgba(232,148,79,.14),rgba(238,197,132,.06));
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease,transform .6s ease;
}
.vc-result.show{opacity:1;transform:none}
.vc-result small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--cyan)}
.vc-result b{color:#fff;font-size:15px}
.vc-result span{color:var(--ink-faint);font-size:12px}
.v19-motion-off .vc-result{opacity:1;transform:none}

/* launch ribbon (homepage) */
.launch-ribbon{position:relative;z-index:2;margin-top:-8px}
.launch-ribbon a{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(240,187,116,.4);border-radius:14px;
  background:linear-gradient(135deg,rgba(232,148,79,.14),rgba(255,255,255,.03));
  padding:13px 18px;text-decoration:none;color:var(--ink-dim);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.launch-ribbon a:hover{border-color:rgba(240,187,116,.7);box-shadow:0 0 30px rgba(232,148,79,.15)}
.launch-ribbon i{width:8px;height:8px;border-radius:50%;background:var(--violet-soft);box-shadow:0 0 10px rgba(242,184,120,.8);animation:faimaraStatusPulse 1.8s infinite}
.launch-ribbon b{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan)}
.launch-ribbon em{font-style:normal;margin-left:auto;color:var(--violet-soft);font-weight:800}
@media(max-width:700px){.launch-ribbon em{margin-left:0}}

/* launch two-sides panels */
.vl-grid{grid-template-columns:repeat(2,1fr)}
.vl-grid .feature-panel span{font-family:var(--mono)}
@media(max-width:800px){.vl-grid{grid-template-columns:1fr}}

/* ---------- v20.2: launch pricing + founding offer ---------- */
.founding-offer{
  border:1px solid rgba(240,187,116,.45);
  border-left:4px solid var(--violet-soft);
  border-radius:14px;
  padding:16px 18px;
  margin:0 0 22px;
  background:linear-gradient(135deg,rgba(232,148,79,.12),rgba(255,255,255,.02));
}
.founding-offer .fo-badge{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan);display:block;margin-bottom:6px}
.founding-offer strong{color:#fff;display:block;margin-bottom:6px}
.founding-offer p{color:var(--ink-dim);margin:0;font-size:13.5px}
.pricing-credit{color:var(--ink-faint);font-size:12.5px;margin-top:14px;font-family:var(--mono)}
/* v20.3: pricing presentation - monthly-first, custom strip full width */
.price-head strong i{font-style:normal;font-size:15px;color:var(--ink-dim);font-family:var(--mono)}
.pricing-grid .custom-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.pricing-grid .custom-strip .price-head{border-bottom:0;margin:0}
.pricing-grid .custom-strip p{margin:0;flex:1;min-width:220px}
.pricing-grid .custom-strip ul{display:none}
@media(max-width:700px){.pricing-grid .custom-strip{display:block}}
.product-pricing-grid .custom-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.product-pricing-grid .custom-strip ul{display:none}
.product-pricing-grid .custom-strip p{margin:0;flex:1;min-width:220px}

/* v20.4: pricing grouped into two labeled families (voice agent vs website) */
.barber-grid{grid-template-columns:repeat(2,1fr)}
.plan-family{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.plan-family:first-child{margin-top:0}
.plan-family b{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--cyan)}
.plan-family span{color:var(--ink-faint);font-size:12.5px}
@media(max-width:700px){.barber-grid{grid-template-columns:1fr}}

/* ---------- v20.5: foodflow/techflow 3-tier grids (quote-only conversion removed the 4th card) ---------- */
@media(min-width:1051px){
  body.pg-foodflow-ai .product-pricing-grid,
  body.pg-techflow-ai .product-pricing-grid,
  #foodflowModal .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- v20.6: related-solution warm accents on EVERY page (base cools leaked on barberflow/foodflow) ---------- */
.page-shell .related-solution-card{--accent:var(--violet-soft);--tint:rgba(232,148,79,.10)}
.page-shell .related-solution-card.taxiflow{--accent:var(--violet)}
.page-shell .related-solution-card.fieldflow{--accent:#b96f3a}
.page-shell .related-solution-card.techflow{--accent:var(--cyan)}
.page-shell .related-solution-card.foodflow{--accent:#c96b52}
.page-shell .related-solution-card.barberflow{--accent:#d98ba9}
.page-shell .related-solution-card.clinicflow{--accent:#e0b487}

/* ---------- v20.6: services page service-area section ---------- */
.service-area-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.service-area-group{border:1px solid rgba(216,178,131,.22);border-radius:16px;padding:20px 22px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.service-area-group h3{margin:0 0 12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-family:var(--mono)}
.area-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.area-chips li{padding:7px 13px;border:1px solid rgba(216,178,131,.28);border-radius:999px;font-size:.86rem;color:var(--ink-dim);background:rgba(232,148,79,.07)}
.area-note{margin-top:18px;color:var(--ink-faint);font-size:.92rem}
.area-note a{color:var(--cyan)}
@media(max-width:900px){.service-area-groups{grid-template-columns:1fr}}

/* ---------- v20.6: UX + competitor pass ---------- */
/* demoted second hero heading keeps its h1 look (one H1 per page for SEO) */
.page-hero h2.page-hero-h1{font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 18px}
/* iOS: inputs under 16px trigger auto-zoom on focus */
.contact-form input,.contact-form select,.contact-form textarea,
#contactLeadForm input,#contactLeadForm select,#contactLeadForm textarea,
#aiChatInput{font-size:16px!important}
/* the money click should be an easy tap */
.price-cta,.product-price-cta{font-size:14px;min-height:48px;display:flex;align-items:center;justify-content:center}
/* concierge fab covers the lead form at the point of conversion */
body.pg-contact .concierge-fab{display:none}
/* voice-agent section CTA row */
.voice-agent-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* "what the $499 covers" strip */
.setup-covers{border:1px solid rgba(216,178,131,.24);border-radius:16px;padding:20px 22px;margin-top:18px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.setup-covers .fo-badge{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan);display:block;margin-bottom:14px}
.setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.setup-steps b{display:block;color:#fff;font-size:.95rem;margin-bottom:6px}
.setup-steps p{margin:0;color:var(--ink-dim);font-size:13.5px;line-height:1.6}
@media(max-width:800px){.setup-steps{grid-template-columns:1fr}}

/* ---------- v20.7: comparison table + founder note + barber calculator ---------- */
.compare-wrap{overflow-x:auto}
.compare-table{width:100%;min-width:680px;border-collapse:collapse;font-size:.92rem}
.compare-table th,.compare-table td{padding:12px 14px;border:1px solid rgba(216,178,131,.18);text-align:left;color:var(--ink-dim);vertical-align:top}
.compare-table thead th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);background:rgba(232,148,79,.06)}
.compare-table tbody td:first-child{color:#fff;font-weight:600;white-space:nowrap}
.compare-table .compare-hi{background:rgba(232,148,79,.10);color:var(--ink);border-color:rgba(232,148,79,.35)}
.compare-table thead th.compare-hi{color:var(--violet-soft)}
.founder-note-inner{display:flex;gap:20px;align-items:flex-start;border:1px solid rgba(216,178,131,.24);border-radius:18px;padding:26px 28px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.founder-avatar{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;color:#1d130c;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.founder-note-inner small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan);display:block;margin-bottom:6px}
.founder-note-inner strong{color:#fff;display:block;margin-bottom:8px;font-size:1.05rem}
.founder-note-inner p{margin:0 0 10px;color:var(--ink-dim)}
.founder-note-inner a{color:var(--cyan);font-family:var(--mono);font-size:.9rem}
@media(max-width:620px){.founder-note-inner{flex-direction:column}}
.barber-calc .roi-copy h2{font-size:clamp(26px,3.4vw,38px)}

/* ---------- v20.9 batch: cosmic-spot immunity ---------- */
/* Base-sheet descendant rules like ".local-service-tile span" (the icon chips)
   also catch the injected spotlight span and painted it as a 42px #edf4ff chip
   on hover. Lock every box property the chip rules set. */
span.cosmic-spot{
  position:absolute!important;inset:0!important;
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;
  padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;
  border-radius:inherit!important;display:block!important;
  font-size:0!important;line-height:0!important;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(232,148,79,.13),
    rgba(238,197,132,.05) 45%,
    transparent 70%)!important;
}

/* ---------- v20.9 batch: replay anchor link ---------- */
.replay-link{margin:18px 0 0;text-align:center}
.replay-link a{color:var(--cyan);font-family:var(--mono);font-size:.86rem;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid rgba(238,197,132,.35);padding-bottom:2px}
.replay-link a:hover{color:var(--violet-soft);border-bottom-color:var(--violet-soft)}

/* ---------- v21 batch: "how it works, one call at a time" steps ---------- */
.call-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
.call-steps li{display:flex;gap:18px;align-items:flex-start;border:1px solid rgba(216,178,131,.2);border-radius:16px;padding:20px 22px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
.call-steps li b{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;font-weight:600;color:#1d130c;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.call-steps li h3{margin:2px 0 6px;font-size:1.06rem;color:#fff}
.call-steps li p{margin:0;color:var(--ink-dim);line-height:1.65}
.call-steps q{color:var(--cyan);font-style:italic}
.call-steps q:before{content:"\201C"}
.call-steps q:after{content:"\201D"}
.call-steps-note{margin:16px 0 0;color:var(--ink-dim);font-size:.95rem}
.call-steps-note span{display:block;margin-top:4px;color:var(--ink-faint);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:600px){.call-steps li{gap:14px;padding:17px 18px}.call-steps li b{width:32px;height:32px;font-size:13px}}

/* ---------- v21.1: custom-implementation strip should be a compact row ---------- */
/* the base sheet's .product-pricing-grid .price-card{min-height:570px} was stretching
   the full-width quote strip into a near-empty 570px box */
.product-pricing-grid .custom-strip,
.pricing-grid .custom-strip{min-height:0;padding:20px 24px;flex-direction:row;text-align:left;align-items:center}
.product-pricing-grid .custom-strip > p,
.pricing-grid .custom-strip > p{min-height:0}
.product-pricing-grid .custom-strip .price-cta,
.pricing-grid .custom-strip .price-cta{margin-top:0;flex:0 0 auto;width:auto;min-width:210px}
.pricing-grid .custom-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.product-pricing-grid .custom-strip .price-head,
.pricing-grid .custom-strip .price-head{border-bottom:0;margin:0;padding:0}
@media(max-width:700px){
  .product-pricing-grid .custom-strip .price-cta,
  .pricing-grid .custom-strip .price-cta{width:100%}
}

/* ---------- v21.1: barber pricing cards size to content ---------- */
/* the base 570px floor was drawn for a 4-column grid with longer lists; the 2-column
   barber layout has 4-5 bullets, so it left dead space above the CTA. Grid stretch
   still keeps the two cards in each row exactly equal. */
.product-pricing-grid.barber-grid .price-card,
.pricing-grid.barber-grid .price-card{min-height:0}
.product-pricing-grid.barber-grid .price-card > p,
.pricing-grid.barber-grid .price-card > p{min-height:0;margin-bottom:14px}
.product-pricing-grid.barber-grid .price-card ul,
.pricing-grid.barber-grid .price-card ul{margin-bottom:18px}

/* ---------- v21.1: page CTA band — warm gradient, tighter ---------- */
.page-shell .page-cta{
  padding:52px 0;
  background:radial-gradient(ellipse 70% 90% at 85% 10%,rgba(238,197,132,.14),transparent 62%),
             linear-gradient(120deg,#a8511f,#34190b);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.page-shell .page-cta h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 10px}
.page-shell .page-cta p{color:rgba(255,255,255,.86);margin:0}
.page-shell .page-cta .page-cta-inner{align-items:center;gap:24px}
@media(max-width:760px){.page-shell .page-cta{padding:40px 0}}

/* ---------- v21.1: last cool-slate literals from the v19-3 base sheet ---------- */
/* subtle blue-greys that survived the warm sweep because they read as grey:
   .home-solution-card>p #475c78, .hero-proof #9eb3c1, .agent-live-head #a9bbc7,
   .screen-live #c9d6f0, .demo-tab small #6e7890 */
.home-solution-card > p{color:var(--ink-dim)}
.hero-proof{color:var(--ink-dim)}
.agent-live-head{color:var(--ink-faint)}
.screen-live{color:var(--cyan)}
.demo-tab small{color:var(--ink-faint)}

/* ---------- v21.1: final cool literals from both base sheets ---------- */
/* teal/blue accents the warm sweep missed (techflow + clinicflow cards, portfolio
   browser chrome, compare list, local-area note, trust paragraph, service tiles) */
.home-solution-card.techflow-card .home-solution-icon{color:var(--cyan)}
.home-solution-card.clinicflow-card{--accent:var(--violet-soft);--soft:rgba(232,148,79,.12)}
.home-solution-card.clinicflow-card .home-solution-icon{color:var(--violet-soft)}
.solutions-page .route-card:nth-child(6){--accent:var(--violet-soft)}
.resource-platform-clinic{--accent:var(--violet-soft)}
.portfolio-lloydminster-preview .browser-bar{color:var(--ink-dim)}
.compare-content ul{color:var(--ink-dim)}
.local-area-note span{color:var(--ink-dim)}
.enterprise-trust .section-heading p{color:var(--ink-dim)}
.local-service-tile > span{color:var(--violet-soft)}
.local-service-tile b{color:var(--cyan)}
/* the injected spotlight span carries no text — keep it from inheriting any colour */
span.cosmic-spot{color:transparent!important}

/* ---------- v21.1: last four cool spots ---------- */
/* unstyled mailto link fell back to the browser blue on the homepage */
.hero-content a[href^="mailto"],
main a[href^="mailto"]:not(.btn):not([class]){color:var(--cyan)}
/* .product-summary p was warmed only on barberflow; clinic + techflow share the class */
.page-visual-card.product-summary p{color:var(--ink-dim)}

/* the base .product-summary p uses !important, so the warm override must too */
.product-summary p{color:var(--ink-dim)!important}

/* ---------- v21.2: switchboard line through the capability cards ---------- */
.agent-capability-grid{position:relative}
.sb-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.sb-track{fill:none;stroke:rgba(216,178,131,.20);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 7}
.sb-live{fill:none;stroke:url(#sbGrad);stroke:var(--violet);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85;
  filter:drop-shadow(0 0 6px rgba(232,148,79,.45))}
.sb-dot{fill:var(--cyan);opacity:0;filter:drop-shadow(0 0 10px rgba(238,197,132,.9))}
/* cards sit above the line and light up as the call reaches them */
.agent-capability-grid article{position:relative;z-index:1;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.agent-capability-grid article.is-live{
  border-color:rgba(232,148,79,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 0 1px rgba(232,148,79,.25),0 0 34px rgba(232,148,79,.14);
  transform:translateY(-3px);
}
.agent-capability-grid article > b{transition:color .35s ease,text-shadow .35s ease}
.agent-capability-grid article.is-live > b{color:var(--cyan);text-shadow:0 0 14px rgba(238,197,132,.5)}
@media(prefers-reduced-motion:reduce){
  .agent-capability-grid article{transition:none}
}

/* ---------- v21.3: founding-five exchange block + honest note ---------- */
.founding-offer .fo-exchange{margin-top:14px;padding-top:13px;border-top:1px solid rgba(216,178,131,.22)}
.founding-offer .fo-exchange b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.founding-offer .fo-exchange ul{margin:0;padding-left:18px;color:var(--ink-dim);font-size:13.5px;line-height:1.7}
.founding-offer .fo-exchange > span{display:block;margin-top:9px;color:var(--ink-faint);font-size:12.5px;font-style:italic}
.pricing-credit.honest-note{margin-top:8px;color:var(--ink-dim);font-family:inherit;font-size:13.5px;line-height:1.65}


/* ---------- v21.6: website add-on block under the voice ladder ---------- */
.website-addon{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:18px;
  border:1px solid rgba(216,178,131,.22);border-radius:16px;padding:20px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.website-addon > div{flex:1;min-width:260px}
.website-addon .fo-badge{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--cyan);margin-bottom:6px}
.website-addon strong{display:block;color:#fff;font-size:1.12rem;margin-bottom:6px}
.website-addon strong i{font-style:normal;font-size:.8em;color:var(--ink-dim)}
.website-addon p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.6}
.website-addon .btn{flex:0 0 auto}
@media(max-width:700px){.website-addon .btn{width:100%}}


/* ---------- v21.7: "website only" badge on the entry card ---------- */
.popular-badge.alt{background:transparent;border:1px solid rgba(216,178,131,.45);color:var(--ink-dim);
  font-size:9px;letter-spacing:.12em;box-shadow:none}

/* ── v21.9: applied agentic AI hero subline (index + barberflow) ── */
.hero-agentic{color:var(--ink);font-weight:600;font-size:1.06rem;line-height:1.55;
  max-width:56ch;margin:14px 0 6px}
.hero-agentic em{font-style:normal;color:var(--violet-soft)}
.page-hero .hero-agentic{margin:12px 0 4px}


/* ===== v21.12 — LAUNCH RIBBON, PROMINENT ===== */
.launch-ribbon{margin-top:16px;margin-bottom:10px}
.launch-ribbon a{
  border-width:2px;border-color:rgba(240,187,116,.55);border-radius:18px;
  background:linear-gradient(135deg,rgba(232,148,79,.26),rgba(238,197,132,.07));
  padding:20px 26px;
  box-shadow:0 0 0 1px rgba(240,187,116,.12),0 16px 48px rgba(232,148,79,.22);
}
.launch-ribbon a:hover{border-color:rgba(240,187,116,.95);box-shadow:0 0 54px rgba(232,148,79,.34)}
.launch-ribbon i{width:11px;height:11px}
.launch-ribbon b{font-size:12px;letter-spacing:.18em}
.launch-ribbon span{color:var(--ink);font-weight:650;font-size:1.06rem;line-height:1.45}
.launch-ribbon em{
  border:1px solid rgba(240,187,116,.55);border-radius:999px;padding:9px 18px;
  background:linear-gradient(135deg,rgba(232,148,79,.4),rgba(238,197,132,.14));
  color:var(--ink);white-space:nowrap;
}
@media(min-width:820px){.launch-ribbon em{margin-left:auto}}

/* ===== v21.12 — CONCEPT PREVIEW pill (non-launched platforms) ===== */
.home-concept-pill{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  margin:8px 0 6px;padding:4px 11px;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  color:var(--ink-faint);background:rgba(255,255,255,.025);
}

/* ===== v21.12 — FOOTER SOCIAL LINKS ===== */
.footer-social{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.footer-social a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-dim);font-size:.85rem;text-decoration:none;
  transition:border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.footer-social a:hover{border-color:rgba(240,187,116,.6);color:var(--ink);box-shadow:0 0 18px rgba(232,148,79,.12)}
.footer-social svg{flex:none}

/* ===== v21.13 — homepage footer social row ===== */
.footer-social-wrap{padding:4px 0 14px}

/* ---------- v21.14: BarberFlow promo video replaces the simulated console ---------- */
.voice-video{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.24);
  border-radius:22px;
  padding:20px;
  box-shadow:0 26px 70px rgba(0,0,0,.45);
  display:grid;
  gap:14px;
  align-self:start;
}
.voice-video video{
  display:block;
  width:100%;
  max-width:100%;
  max-height:640px;
  margin:0 auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:#171310;
  object-fit:contain;
}

/* ---------- v21.15: Film 2 embed in the how-it-works section ---------- */
.film-video{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid rgba(216,178,131,.24);
  border-radius:22px;
  padding:20px;
  box-shadow:0 26px 70px rgba(0,0,0,.45);
  display:grid;
  gap:14px;
  max-width:960px;
  margin:0 auto 56px;
}
.film-video video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  border:1px solid var(--line);
  background:#171310;
  object-fit:contain;
}