/* ==========================================================================
   APOLA EXPRESS — COMPLETE GLOBAL SYSTEM ARCHITECTURE STYLESHEET
   Page body classes:
   - .home-page      → index.html
   ========================================================================== */

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ─── CSS VARIABLES ─── */
:root {
  --bg: #080807;
  --fg: #EDECEA;
  --accent: #C8F400;
  --muted: rgba(237,236,234,0.38);
  --dim: rgba(237,236,234,0.07);
  --display: 'Big Shoulders Display', sans-serif;
  --body: 'Figtree', sans-serif;
}

/* ─── BASE ─── */
html { background:var(--bg); scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:'Figtree',sans-serif; font-weight:300; overflow-x:hidden; cursor:none; }

/* ─── CURSOR ─── */
#cur  { position:fixed; width:9px; height:9px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:999999; transform:translate(-50%,-50%); }
#curR { position:fixed; width:34px; height:34px; border:1px solid rgba(200,244,0,.35); border-radius:50%; pointer-events:none; z-index:999998; transform:translate(-50%,-50%); transition:width .3s,height .3s; }

/* ─── NAV ─── */
nav { position:fixed; top:0; left:0; right:0; z-index:500; padding:28px 56px; display:flex; justify-content:space-between; align-items:center; transition:background .5s,padding .4s,border-color .5s; border-bottom:1px solid transparent; }
nav.on { background:rgba(8,8,7,.9); backdrop-filter:blur(14px); padding:18px 56px; border-bottom-color:var(--dim); }
.logo { font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:22px; letter-spacing:.06em; color:var(--fg); text-decoration:none; }
.nl   { display:flex; gap:44px; list-style:none; }
.nl a { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
.nl a:hover { color:var(--fg); }
.back-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
.back-link:hover { color:var(--accent); }
.back-link svg { width:14px; transform:rotate(180deg); }
.back-link svg path { fill:currentColor; }
.ncta { font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px 26px; border:1px solid rgba(237,236,234,.22); color:var(--fg); text-decoration:none; transition:background .3s,color .3s,border-color .3s; }
.ncta:hover { background:var(--accent); color:var(--bg); border-color:var(--accent); }

/* ─── HERO BASE ─── */
#hero { position:relative; overflow:hidden; }

/* Homepage hero — centred, full viewport */
.home-page #hero {
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 40px;
}

/* Homepage hero text — large, split-word animated */
.home-page .hero-h {
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  font-size:clamp(78px,13vw,188px);
  line-height:.88;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.home-page .hero-h .w { display:block; overflow:hidden; }
.home-page .hero-h .w span { display:block; transform:translateY(106%); }
.home-page .hero-h.anim-done .w { overflow:visible; }

/* Homepage hero elements — entrance states */
.home-page .hero-eye { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:28px; opacity:0; transform:translateY(14px); }
.home-page .hero-sub { 
  margin-top: 80px; 
  font-size: clamp(16px, 1.8vw, 20px); 
  color: var(--muted); 
  line-height: 1.75; 
  max-width: 560px; 
  opacity: 0; 
  transform: translateY(14px); 
}

/* Hero scroll indicator — home page only */
.hero-sc { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; }
.hero-sc span { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.scl { width:1px; height:54px; background:var(--dim); position:relative; overflow:hidden; }
.scl::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent); animation:sl 1.8s ease-in-out infinite; }
@keyframes sl { 0%{top:-100%} 100%{top:100%} }

/* Shared structural button links */
.hero-ctas { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.btn-primary { display:inline-flex; align-items:center; gap:12px; background:var(--accent); color:var(--bg); font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:18px 44px; text-decoration:none; transition:background .3s,transform .3s; }
.btn-primary:hover { background:var(--fg); transform:translateY(-3px); }
.btn-ghost { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(237,236,234,.2); padding-bottom:3px; transition:color .3s,border-color .3s; }
.btn-ghost:hover { color:var(--fg); border-color:var(--fg); }

/* ─── SHARED COMPONENTS ─── */
.pill { display:inline-block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bg); background:var(--accent); padding:5px 14px; margin-bottom:28px; }
.sec-title { font-family:var(--display); font-weight:900; font-size:clamp(44px,5.5vw,80px); text-transform:uppercase; line-height:.9; }
section { border-top:1px solid var(--dim); }

/* ─── FORMS ─── */
.cf-field { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.cf-field label { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.cf-field input,.cf-field textarea,.cf-field select { background:none; border:none; border-bottom:1px solid rgba(237,236,234,.2); color:var(--fg); font-family:var(--body); font-size:15px; font-weight:300; padding:12px 0; outline:none; transition:border-color .3s; width:100%; resize:none; }
.cf-field select option { background:var(--bg); }
.cf-field input::placeholder,.cf-field textarea::placeholder { color:rgba(237,236,234,.25); }
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus { border-bottom-color:var(--accent); }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cf-submit { background:var(--accent); color:var(--bg); border:none; font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:18px 48px; cursor:none; transition:background .3s,transform .3s; margin-top:8px; }
.cf-submit:hover { background:var(--fg); transform:translateY(-3px); }
.cf-submit.sent { background:rgba(200,244,0,.15); color:var(--accent); border:1px solid var(--accent); }

/* ─── FOOTER ─── */
footer { padding:52px 56px; border-top:1px solid var(--dim); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.fl { font-family:var(--display); font-size:24px; font-weight:900; letter-spacing:.05em; }
.flinks { display:flex; gap:36px; list-style:none; }
.flinks a { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; }
.flinks a:hover { color:var(--fg); }
.fc { font-size:11px; color:var(--muted); }

/* ─── HOMEPAGE — SHOWREEL & PANELS ─── */
#panels-wrap { position:relative; }
#panels-wrap .panel-reel { position:relative; height:100vh; width:100%; overflow:hidden; background:#040403; }
.ph-lbl { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,236,234,.1); }
.reel-inner-layout { display:block; position:relative; height:100%; }
.reel-bg-ph { position:absolute; inset:0; background:linear-gradient(160deg,#0a0a08 0%,#141410 40%,#0a0a08 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.reel-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.04); transition:opacity .6s ease; z-index:0; }
.reel-bg-video:not([src=""]) ~ .reel-fallback { display:none; }
.reel-fallback { position:relative; z-index:1; }
.reel-bg-ph::before { content:''; position:absolute; inset:-50%; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size:200px 200px; opacity:0.35; pointer-events:none; z-index:1; }
.reel-bg-ph::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,.65) 100%); pointer-events:none; z-index:2; }
.reel-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:3; gap:0; }
.reel-eyebrow { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#EDECEA; margin-bottom:28px; }
.reel-title { font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:clamp(100px,18vw,260px); line-height:.82; text-align:center; letter-spacing:-.02em; text-transform:uppercase; margin-bottom:60px; }
.reel-title span { -webkit-text-stroke:2px rgba(237,236,234,0.495); color:transparent; }
.reel-play { display:flex; align-items:center; gap:20px; background:none; border:none; cursor:none; color:var(--fg); }
.rp-ring { width:84px; height:84px; border:1px solid rgba(237,236,234,.28); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .4s,border-color .4s,transform .4s; flex-shrink:0; }
.rp-ring svg { width:26px; margin-left:5px; }
.rp-ring svg path { fill:var(--fg); transition:fill .3s; }
.reel-play:hover .rp-ring { background:var(--accent); border-color:var(--accent); transform:scale(1.1); }
.reel-play:hover .rp-ring svg path { fill:var(--bg); }
.rp-label { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); transition:color .3s; }
.reel-btns { display:flex; gap:48px; align-items:center; }
.reel-play:hover .rp-label { color:var(--fg); }
.reel-meta { position:absolute; bottom:40px; right:56px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); z-index:3; }
.reel-dot { font-size:5px; color:var(--accent); }
.reel-vimeo-link { display:inline-flex; align-items:center; gap:8px; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s,border-color .3s; }
.reel-vimeo-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.panels-end-note { text-align:center; padding:56px 0; border-bottom:1px solid var(--dim); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ─── VIDEO LIGHTBOX ─── */
#lightbox { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s ease; }
#lightbox.open { opacity:1; pointer-events:all; }
.lb-inner { width:min(1280px,90vw); aspect-ratio:16/9; background:#111; position:relative; display:flex; align-items:center; justify-content:center; }
.lb-ph { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,236,234,.15); }
.lb-close { position:absolute; top:-48px; right:0; background:none; border:none; color:var(--fg); font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:none; display:flex; align-items:center; gap:10px; transition:color .3s; }
.lb-close:hover { color:var(--accent); }

/* ─── MARQUEE ─── */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq { padding:38px 0; overflow:hidden; border-top:1px solid var(--dim); border-bottom:1px solid var(--dim); }
.mq-track { display:flex; width:max-content; animation:marquee 40s linear infinite; }
.mq-track:hover { animation-play-state:paused; }
.mq-track .mq-set { display:flex; gap:56px; align-items:center; padding-right:56px; }
.mq-track span { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(26px,3vw,42px); font-weight:100; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); flex-shrink:0; }
.mq-track .dot { color:var(--accent); font-size:8px; align-self:center; }

/* ─── CLIENTS ─── */
.clients-strip { padding:80px 56px; border-bottom:1px solid var(--dim); }
.clients-label { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:40px; text-align:center; }
.clients-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent); mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent); }
.clients-track { display:flex; align-items:center; will-change:transform; }
.clients-set { display:flex; align-items:center; gap:60px; padding-right:60px; flex-shrink:0; }
.clients-track img { height:20px; width:auto; opacity:0.45; filter:brightness(0) invert(1); transition:opacity .3s; flex-shrink:0; display:block; }
.clients-track img:hover { opacity:0.9; }

/* ─── HOMEPAGE SERVICES ACCORDION OVERVIEW ─── */
.home-page #services { display:grid; grid-template-columns:1fr 1fr; min-height:200vh; position:relative; }
.home-page #services::before { content:'CRAFT'; position:absolute; font-family:'Big Shoulders Display',sans-serif; font-size:28vw; font-weight:900; color:rgba(237,236,234,.022); text-transform:uppercase; white-space:nowrap; letter-spacing:-.02em; pointer-events:none; top:30px; left:32%; transform:translateX(-50%); z-index:0; }
.srv-l { padding:120px 56px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--dim); }
.srv-t { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(48px,5.5vw,80px); font-weight:900; text-transform:uppercase; line-height:.9; margin-bottom:30px; }
.srv-d { font-size:15px; line-height:1.9; color:var(--muted); max-width:340px; }
.srv-r { padding:120px 72px; }
.srv-item { padding:58px 0; border-bottom:1px solid var(--dim); opacity:0; transform:translateX(44px); }
.srv-item:first-child { padding-top:0; }
.srv-num { font-size:10px; letter-spacing:.22em; color:var(--accent); margin-bottom:16px; }
.srv-name { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(32px,3.5vw,54px); font-weight:700; text-transform:uppercase; margin-bottom:14px; line-height:1; }
.srv-detail { font-size:14px; line-height:1.85; color:var(--muted); max-width:420px; }
.srv-link { display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); text-decoration:none; margin-top:12px; border-bottom:1px solid rgba(200,244,0,.2); padding-bottom:3px; width:fit-content; transition:border-color .3s,opacity .3s; }
.srv-link:hover { border-color:var(--accent); opacity:.7; }

/* ─── HOMEPAGE STUDIO ABOUT ─── */
.home-page #about { padding:40px 56px; display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; }
.about-img-w { position:relative; }
.about-img { width:100%; aspect-ratio:4/5; background:linear-gradient(160deg,#161614,#282820); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-badge { position:absolute; bottom:-22px; right:-22px; width:114px; height:114px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-direction:column; }
.badge-n { font-family:'Big Shoulders Display',sans-serif; font-size:44px; font-weight:900; color:var(--bg); line-height:1; }
.badge-l { font-size:9px; letter-spacing:.14em; color:var(--bg); opacity:.65; }
.about-h { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(40px,4.2vw,64px); font-weight:900; text-transform:uppercase; line-height:.92; margin-bottom:30px; }
.about-p { font-size:15px; line-height:1.95; color:var(--muted); margin-bottom:44px; }
.about-a { display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg); text-decoration:none; padding-bottom:4px; border-bottom:1px solid rgba(237,236,234,.18); transition:color .3s,border-color .3s; }
.about-a:hover { color:var(--accent); border-color:var(--accent); }

/* ─── HOMEPAGE STATS METRICS ─── */
#stats { padding:120px 56px; border-top:1px solid var(--dim); border-bottom:1px solid var(--dim); display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.stat { text-align:center; opacity:0; transform:translateY(32px); }
.stat-n { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(62px,7.5vw,104px); font-weight:900; line-height:1; }
.stat-suf { color:var(--accent); }
.stat-l { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* ─── HOMEPAGE PROCESS WORKFLOW ─── */
#process { padding:140px 56px; }
.process-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:80px; }
.process-title { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(52px,7vw,108px); font-weight:900; text-transform:uppercase; line-height:.88; }
.process-sub { font-size:14px; color:var(--muted); line-height:1.8; max-width:320px; padding-bottom:8px; }
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--dim); border:1px solid var(--dim); }
.process-step { background:var(--bg); padding:48px 40px 52px; position:relative; opacity:0; transform:translateY(40px); }
.ps-num { font-family:'Big Shoulders Display',sans-serif; font-size:72px; font-weight:900; line-height:1; color:rgba(237,236,234,.06); position:absolute; top:32px; right:32px; letter-spacing:-.02em; }
.ps-icon { font-size:22px; margin-bottom:24px; }
.ps-name { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(22px,2vw,30px); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-bottom:14px; line-height:1; }
.ps-desc { font-size:13px; line-height:1.85; color:var(--muted); }
.process-step:hover .ps-num { color:rgba(200,244,0,.12); transition:color .4s; }

/* ─── HOMEPAGE BOTTOM CONTACT ─── */
.home-page #cta { padding:120px 56px; position:relative; overflow:hidden; }
.cta-ghost { position:absolute; font-family:'Big Shoulders Display',sans-serif; font-size:28vw; font-weight:900; color:rgba(237,236,234,.022); text-transform:uppercase; pointer-events:none; white-space:nowrap; user-select:none; letter-spacing:-.02em; top:50%; transform:translateY(-50%); }
.cta-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.cta-eye { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.home-page .cta-h { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(52px,7vw,110px); font-weight:900; text-transform:uppercase; line-height:.88; letter-spacing:-.01em; margin-bottom:28px; }
.home-page .cta-h .hl { color:var(--accent); }
.home-page .cta-sub { font-size:15px; color:var(--muted); line-height:1.8; max-width:unset; margin-bottom:0; }
.contact-form { display:flex; flex-direction:column; gap:28px; }

/* ─── HOMEPAGE HORIZONTAL WORK ACCORDION ─── */
.home-page #work-accordion { display: flex; align-items: stretch; height: 100vh; min-height: 560px; overflow: hidden; border-top: 1px solid var(--dim); }
.acc-card { position: relative; flex: 1; height: 100%; overflow: hidden; cursor: none; transition: flex 0.65s cubic-bezier(0.77,0,0.175,1); border-right: 1px solid rgba(237,236,234,.07); background: #0a0a08; }
.acc-card:last-child { border-right: none; }
.acc-card.active { flex: 5; }
.acc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(.25,.46,.45,.94); }
.acc-card.active .acc-img { transform: scale(1.04); }
.acc-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.15) 100%); transition:background 0.5s; }
.acc-card.active .acc-overlay { background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.1) 100%); }
.acc-label { position:absolute; bottom:48px; left:50%; transform:translateX(-50%) rotate(-90deg); transform-origin:center center; white-space:nowrap; font-family:'Big Shoulders Display',sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(237,236,234,.4); transition:opacity 0.25s; pointer-events:none; }
.acc-card.active .acc-label { opacity: 0; }
.acc-content { position:absolute; bottom:0; left:0; right:0; padding:0 44px 48px; opacity:0; transform:translateY(20px); transition:opacity 0.35s 0.25s, transform 0.35s 0.25s; pointer-events:none; }
.acc-card.active .acc-content { opacity:1; transform:translateY(0); pointer-events:all; }
.acc-bar { width:32px; height:2px; background:var(--accent); margin-bottom:18px; }
.acc-tag { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.acc-name { font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:clamp(28px,3vw,52px); text-transform:uppercase; line-height:.9; margin-bottom:14px; color:var(--fg); }
.acc-desc { font-size:13px; line-height:1.8; color:rgba(237,236,234,.5); max-width:300px; margin-bottom:24px; }
.acc-cta { display:inline-flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(237,236,234,.2); padding-bottom:3px; transition:color .3s,border-color .3s; }
.acc-cta:hover { color:var(--accent); border-color:var(--accent); }
.acc-idx { position:absolute; top:28px; left:44px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(237,236,234,.25); }

/* ─── HOMEPAGE VIEWPORT MEDIA RESPONSIVENESS ─── */
@media (max-width:900px) {
  nav { padding:20px 32px; }
  .nl { display:none; }
  .home-page #services, .home-page #about, .cta-inner { grid-template-columns:1fr; gap:40px; }
  .process-steps { grid-template-columns:1fr; }
  #stats { grid-template-columns:1fr; gap:60px; padding:80px 32px; }
  .srv-l { height:auto; position:relative; padding:80px 32px 0; border-right:none; }
  .srv-r, .home-page #about, .home-page #cta { padding:60px 32px; }
  #process { padding:80px 32px; }
  .reel-title { font-size:22vw; }
  .srv-t { font-size:64px; }
  footer { padding:40px 32px; gap:20px; }
  .flinks { gap:12px 18px; }
}

@media (max-width:640px) {
  footer { flex-direction:column; align-items:center; text-align:center; padding:40px 28px; gap:24px; }
  .fl { align-self:flex-start; }
  .flinks { justify-content:center; }
  #robot-canvas {
    left: 20px !important;
    right: auto !important;
    transform: scale(0.5) !important;
    transform-origin: left center !important;
  }
}

/* ==========================================================================
   N8N CHATBOT RECONCILIATION LAYER (DOM-VERIFIED CONFIGURATION)
   ========================================================================== */

:root {
  /* Core Chat Token Colors */
  --chat--color-primary: #C8F400; 
  --chat--color-primary-shade-50: #b0d800; 
  --chat--color-primary-shade-100: #9abf00;
  --chat--color-secondary: #C8F400; 
  --chat--color-secondary-shade-50: #b0d800;
  --chat--color-white: #EDECEA; 
  --chat--color-light: #0d0d0b; 
  --chat--color-light-shade-50: #131310; 
  --chat--color-light-shade-100: #1a1a17;
  --chat--color-medium: rgba(237,236,234,.12); 
  --chat--color-dark: #EDECEA; 
  --chat--color-disabled: rgba(237,236,234,.25); 
  --chat--color-typing: rgba(237,236,234,.38);
  
  /* Layout Sizing Bounds */
  --chat--window--width: 380px; 
  --chat--window--height: 640px;
  
  /* Interface Headers */
  --chat--header--background: #080807; 
  --chat--header--color: #EDECEA; 
  --chat--header--border-bottom: 1px solid rgba(237,236,234,.07);
  --chat--header-logo--height: 0px; 
  --chat--header--padding: 20px 24px; 
  --chat--heading--font-size: 18px; 
  --chat--subtitle--font-size: 11px; 
  --chat--subtitle--line-height: 1.4;
  
  --chat--textarea--height: 48px;
  
  /* Conversation Bubbles */
  --chat--message--bot--background: rgba(237,236,234,.05); 
  --chat--message--bot--color: #EDECEA; 
  --chat--message--bot--border-radius: 0;
  
  --chat--message--user--background: #C8F400; 
  --chat--message--user--color: #080807; 
  --chat--message--user--border-radius: 0;
  
  --chat--message--pre--background: rgba(237,236,234,.07); 
  --chat--message--font-size: 14px; 
  --chat--message--padding: 12px 16px;
  
  /* Input Fields */
  --chat--input--background: rgba(237,236,234,.06); 
  --chat--input--text-color: #EDECEA; 
  --chat--input--border-color: rgba(237,236,234,.15); 
  --chat--input--border-color-active: #C8F400;
  --chat--input--placeholder--color: rgba(237,236,234,.25); 
  
  --chat--input--send--button--background: #C8F400; 
  --chat--input--send--button--background-hover: #EDECEA;
  --chat--input--send--button--color: #080807; 
  --chat--input--send--button--color-hover: #080807; 
  --chat--input--font-size: 14px; 
  --chat--input--padding: 16px 20px;
  
  --chat--button--background: #C8F400; 
  --chat--button--background-hover: #EDECEA; 
  --chat--button--color: #080807; 
  --chat--button--color-hover: #080807;
  
  /* Floating Toggle Bubble */
  --chat--toggle--background: #C8F400; 
  --chat--toggle--hover--background: #EDECEA; 
  --chat--toggle--active--background: #EDECEA; 
  --chat--toggle--color: #080807; 
  --chat--toggle--size: 52px;
  
  --chat--border-radius: 0; 
  --chat--window--border-radius: 0; 
  --chat--background-color: #0d0d0b; 
  --chat--font-family: 'Figtree', sans-serif;
}

/* ─── DIRECT LIGHT-DOM TARGETS FROM INSPECTOR ─── */

/* ─── ULTIMATE STRUCTURAL RESOLUTION BLOCK (FIXES IMAGE_C09AE8.PNG) ─── */

/* 1. Force absolute background unity to eliminate split/squished background zones */
#n8n-chat,
#n8n-chat .chat-window,
#n8n-chat .chat-window-wrapper,
#n8n-chat .chat-layout,
#n8n-chat .chat-wrapper,
#n8n-chat .chat-body,
#n8n-chat .chat-messages-list {
  background: #0d0d0b !important;
  background-color: #0d0d0b !important;
}

/* 2. Style Bot Message Bubbles cleanly without shifting layout panels */
#n8n-chat .chat-message {
  background: transparent !important; /* Strips any default unstyled message boxes */
}

/* Isolates the actual inner bubble shape container specifically */
#n8n-chat .chat-message .message-content,
#n8n-chat [class*="message"] [class*="bubble"],
#n8n-chat .chat-messages-list div > div[class*="content"] {
  background: rgba(237, 236, 234, 0.05) !important;
  background-color: rgba(237, 236, 234, 0.05) !important;
  color: #EDECEA !important;
  border-radius: 0 !important;
}

/* 3. Destroy the White Input Wrapper Block at the bottom completely */
#n8n-chat .chat-footer,
#n8n-chat [class*="chat-input"],
#n8n-chat [class*="input-wrapper"] {
  background: #080807 !important;
  background-color: #080807 !important;
}

/* Snaps the nested container that holds the text entry line and arrow button */
#n8n-chat [data-v-fb8d706b].chat-input,
#n8n-chat div[class*="input-container"] {
  background: #080807 !important;
  background-color: #080807 !important;
}

/* Ensure the submit arrow icon itself inherits your clean studio foreground token */
#n8n-chat .chat-footer svg,
#n8n-chat .chat-footer svg path {
  fill: rgba(237, 236, 234, 0.4) !important;
}

/* 4. Chat Header & Typography Layout */
#n8n-chat .chat-header {
  background: #080807 !important;
  border-bottom: 1px solid rgba(237, 236, 234, 0.07) !important;
}

#n8n-chat .chat-header h1,
#n8n-chat .chat-header h2,
#n8n-chat .chat-header .chat-heading,
#n8n-chat .chat-window [class*="title"] {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#n8n-chat .chat-window [class*="subtitle"] {
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #C8F400 !important;
}

/* 5. Floating Action Launcher Bubble (Locks state colors on active window open toggles) */
#n8n-chat .chat-window-toggle,
#n8n-chat .chat-window-toggle:hover,
#n8n-chat .chat-window-toggle:active,
#n8n-chat [class*="toggle"] {
  background-color: #C8F400 !important;
  background: #C8F400 !important;
  color: #080807 !important;
}

/* Force Vector SVG Arrow Lines Inside Toggle to remain Jet Black */
#n8n-chat .chat-window-toggle svg,
#n8n-chat .chat-window-toggle svg path,
#n8n-chat [class*="toggle"] svg path {
  fill: #080807 !important;
  color: #080807 !important;
  stroke: none !important;
}

/* 6. Suppress Third-Party Brand Signature Notes */
#n8n-chat [class*="branding"],
#n8n-chat [class*="powered"],
#n8n-chat a[href*="n8n.io"],
#n8n-chat .chat-powered-by {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* ─── EXTRA FIXES FOR MESSAGE BUBBLES & FOOTER (FROM IMAGE_C09743.PNG) ─── */

/* 1. Force Bot Message Bubbles to Dark Transparent Gray (Fixes White Blocks) */
#n8n-chat .chat-message.-bot,
#n8n-chat .chat-message[class*="-bot"],
#n8n-chat .chat-messages-list div:not(.-user) > [class*="bubble"],
#n8n-chat [class*="message"]:not(.-user) {
  background: rgba(237, 236, 234, 0.05) !important;
  background-color: rgba(237, 236, 234, 0.05) !important;
  color: #EDECEA !important;
  border-radius: 0 !important;
}

/* Force text inside bot bubbles to match your light foreground token */
#n8n-chat .chat-message.-bot *,
#n8n-chat .chat-messages-list div:not(.-user) p {
  color: #EDECEA !important;
}

/* 2. Force User Message Bubbles to Lime Green (Fixes Teal Overlap Bug) */
#n8n-chat .chat-message.-user,
#n8n-chat .chat-message[class*="-user"],
#n8n-chat [class*="message-user"],
#n8n-chat div.-user [class*="bubble"],
#n8n-chat [style*="--controls-count"] ~ [class*="messages"] .-user {
  background: #C8F400 !important;
  background-color: #C8F400 !important;
  color: #080807 !important;
  border-radius: 0 !important;
}

#n8n-chat .chat-message.-user * {
  color: #080807 !important;
}

/* 3. Eliminate the White Background Block in the Input Footer */
#n8n-chat .chat-input-wrapper,
#n8n-chat [class*="input-container"],
#n8n-chat .chat-footer > div {
  background: #080807 !important;
  background-color: #080807 !important;
  border-radius: 0 !important;
}

/* Ensure the send button container doesn't inherit a white fill */
#n8n-chat .chat-footer button {
  background: transparent !important;
}
/* ─── FINAL BORDER ELIMINATION SHIELD ─── */
#n8n-chat,
#n8n-chat .chat-window,
#n8n-chat .chat-window-wrapper,
#n8n-chat .chat-layout {
  border: none !important;
  outline: none !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important; /* Retains a premium deep drop shadow over your pages instead of a harsh line */
}
/* ─── CHATBOX FIELD TEXT ENTRY & CONTRAST PATCH (FIXES IMAGE_CC68CF.PNG) ─── */

/* 1. Force the typing input field to stay dark gray with light gray text */
#n8n-chat .chat-footer input,
#n8n-chat .chat-footer textarea,
#n8n-chat [class*="chat-input"] input,
#n8n-chat [class*="chat-input"] textarea,
#n8n-chat input[placeholder*="Type"] {
  background: #1a1a17 !important;
  background-color: #1a1a17 !important;
  color: #EDECEA !important;
  font-family: 'Figtree', sans-serif !important;
  border: 1px solid rgba(237, 236, 234, 0.15) !important;
  padding: 12px 16px !important;
}

/* Ensure the placeholder text uses a visible muted contrast color */
#n8n-chat input::placeholder,
#n8n-chat textarea::placeholder,
#n8n-chat [class*="chat-input"] ::placeholder {
  color: rgba(237, 236, 234, 0.35) !important;
  opacity: 1 !important;
}

/* 2. Force the text inside user messages to stay dark black over the lime background */
#n8n-chat .chat-message.-user,
#n8n-chat .chat-message.-user *,
#n8n-chat [class*="message-user"] p,
#n8n-chat div.-user [class*="bubble"] * {
  color: #080807 !important;
}