/* ==========================================================================
   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: #000000;
  --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; overflow-x:hidden; }
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;
  position:relative;
  display:inline-block;
}
.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: 1080px; 
  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); padding-left:12px; }
.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 12px; outline:none; transition:border-color .3s; width:100%; resize:none; caret-color:var(--accent); }
.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-field input:-webkit-autofill,
.cf-field textarea:-webkit-autofill,
.cf-field select:-webkit-autofill {
  -webkit-text-fill-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
.cf-field input::selection,
.cf-field textarea::selection,
.cf-field select::selection {
  background: var(--accent);
  color: var(--bg);
}
.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:#000000; }
.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 ─── */
html.lb-open, body.lb-open { overflow: hidden !important; height: 100% !important; }
#lightbox { position:fixed; top:0; left:0; width:100%; height:100%; z-index:10000; 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:block; }
.lb-inner iframe { position:absolute; top:0; left:0; width:100% !important; height:100% !important; border:none; display:block; }
.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); }

@media (max-width: 900px) {
  .lb-inner {
    width: 90vw;
    max-height: 75vh;
  }
  .lb-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 16px;
    border-radius: 40px;
    border: 1px solid rgba(237, 236, 234, 0.15);
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 10001;
  }
}

/* ─── 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; }
  nav { padding: 16px 16px !important; }
  .logo { font-size: 16px !important; }
  .back-link { display: none !important; }
  .ncta { padding: 6px 12px !important; font-size: 9px !important; }
}

@media (max-width: 400px) {
  nav { padding: 12px 12px !important; }
  .logo { font-size: 14px !important; }
  .ncta { padding: 6px 10px !important; font-size: 9px !important; }
}

/* ═══════════════════════════════════════════════
   PORTFOLIO / CASE STUDY SPECIFIC STYLES
   ═══════════════════════════════════════════════ */

/* Hero Image & Content */
.portfolio-page #hero { height: 100vh; position: relative; overflow: hidden; }
.portfolio-page .hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.portfolio-page .hero-content { 
  position: absolute; bottom: 0; left: 0; right: 0; 
  padding: 0 56px 72px; display: grid; grid-template-columns: 1fr auto; align-items: flex-end; z-index: 1; 
}

/* Typography */
.portfolio-page .hero-cat { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.portfolio-page .hero-title { font-family:var(--display); font-weight:900; font-size:clamp(72px,11vw,168px); line-height:.86; letter-spacing:-.01em; text-transform:uppercase; margin:0; }
.portfolio-page .hero-title .w { display:block; overflow:hidden; }
.portfolio-page .hero-title .w span { display:block; transform:translateY(106%); }
.portfolio-page .hero-right { text-align:right; padding-bottom:8px; }
.portfolio-page .hero-year { font-family:var(--display); font-size:clamp(48px,5vw,72px); font-weight:100; color:rgba(237,236,234,.18); letter-spacing:.04em; margin:0; }
.portfolio-page .hero-scroll-hint { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:12px; }

/* Meta Bar & Content */
.meta-bar { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--dim); }
.meta-item { padding:40px 48px; border-right:1px solid var(--dim); }
.meta-item:last-child { border-right:none; }
.meta-label { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.meta-value { font-family:var(--display); font-size:clamp(18px,2vw,26px); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0; }

/* Intro, Gallery & Deliverables */
#intro { padding:120px 56px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
.intro-headline { font-family:var(--display); font-weight:900; font-size:clamp(42px,4.5vw,70px); text-transform:uppercase; line-height:.9; letter-spacing:-.01em; margin:0; }
.intro-body { padding-top:8px; }
.intro-body p { font-size:16px; line-height:1.95; color:var(--muted); margin-bottom:24px; }
.intro-body p:last-child { margin-bottom:0; }

.full-img { width:100%; aspect-ratio:16/7; overflow:hidden; position:relative; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.full-img .ph-lbl { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,236,234,.08); }

#gallery { padding:0 56px 0; }
.gallery-header { display:flex; justify-content:space-between; align-items:baseline; padding:80px 0 48px; border-top:1px solid var(--dim); margin-bottom:0; }
.gallery-title { font-family:var(--display); font-size:clamp(28px,3vw,44px); font-weight:900; text-transform:uppercase; margin:0; }
.gallery-count { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding-bottom:80px; }
.gi { overflow:hidden; opacity: 0; }
.gi-img { width:100%; height:100%; background:linear-gradient(135deg,#161614,#242420); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; transition:transform .8s cubic-bezier(.25,.46,.45,.94); min-height:280px; }
.gi:hover .gi-img { transform:scale(1.04); }
.gi:nth-child(1){grid-column:span 7} .gi:nth-child(2){grid-column:span 5} .gi:nth-child(3){grid-column:span 5} .gi:nth-child(4){grid-column:span 7}
.gi:nth-child(1) .gi-img,.gi:nth-child(2) .gi-img { min-height:460px; }

#video-section { padding:0 56px 120px; }
.video-label { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:28px; border-top:1px solid var(--dim); padding-top:80px; }
.video-wrap { width:100%; aspect-ratio:16/9; background:#101010; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:none; }
.video-ph { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,236,234,.12); }
.vid-play-hint { position:absolute; bottom:32px; left:0; right:0; text-align:center; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
#deliverables { padding:0 56px 120px; }
.del-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:48px; }

.del-header { border-top:1px solid var(--dim); padding-top:80px; margin-bottom:56px; display:flex; justify-content:space-between; align-items:baseline; }
.del-title { font-family:var(--display); font-size:clamp(28px,3vw,44px); font-weight:900; text-transform:uppercase; margin:0; }
.del-item { opacity: 0; }
.del-icon { font-size:24px; margin-bottom:20px; }
.del-name { font-family:var(--display); font-size:clamp(22px,2.2vw,32px); font-weight:700; text-transform:uppercase; margin-bottom:12px; }
.del-desc { font-size:13px; line-height:1.85; color:var(--muted); }

#next { height:60vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--dim); text-decoration:none; cursor:none; flex-direction:row !important; padding:0; text-align:center; }
.next-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.next-bg::after { content:''; position:absolute; inset:0; background:rgba(8,8,7,.6); }
#next:hover .next-bg { transform:scale(1.04); }
.next-inner { position:relative; z-index:1; }
.next-eyebrow { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.next-title { font-family:var(--display); font-weight:900; font-size:clamp(52px,8vw,120px); text-transform:uppercase; line-height:.88; color:var(--fg); margin:0; }
.next-arrow { font-size:clamp(28px,4vw,52px); margin-top:20px; color:var(--accent); display:block; transition:transform .4s; }
#next:hover .next-arrow { transform:translateX(12px); }

/* Mobile Adjustments */
@media (max-width: 900px) {
  .portfolio-page .hero-content { grid-template-columns: 1fr; padding: 0 32px 48px; }
  .meta-bar { grid-template-columns: 1fr; }
  .meta-item { border-right: none; border-bottom: 1px solid var(--dim); padding: 24px 32px; }
  #intro { grid-template-columns: 1fr; gap: 40px; padding: 80px 32px; }
  .full-img { aspect-ratio: 4/3; }
  #gallery { padding: 0 32px; }
  .gallery-grid { display: flex; flex-direction: column; }
  .gi-img { min-height: 280px !important; }
  #video-section { padding: 0 32px 80px; }
  #deliverables { padding: 0 32px 80px; }
  .del-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ═══════════════════════════════════════════════
   SERVICE PAGE COMPONENT ARCHITECTURE
   ═══════════════════════════════════════════════ */

/* ─── HERO SUB SECTION EXTENSION ─── */
.service-page #hero::before { 
  content: 'COMMERCIAL'; 
  position: absolute; 
  font-family: var(--display); 
  font-size: 18vw; 
  font-weight: 900; 
  color: rgba(237,236,234,.022); 
  text-transform: uppercase; 
  letter-spacing: -.02em; 
  right: -2%; 
  bottom: -5%; 
  pointer-events: none; 
  line-height: 1; 
  white-space: nowrap; 
}
.service-page .hero-bg-img {
  position: absolute; 
  inset: 0;
  background-size: cover; 
  background-position: center;
  opacity: 0.15;
  z-index: 0;
}
.service-page .hero-eyebrow { position: absolute; top: 140px; left: 56px; display: flex; align-items: center; gap: 16px; }

/* ─── WHAT IS IT GRID STRUCTURE ─── */
.service-page #what { padding: 120px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.service-page .what-body p { font-size: 15px; line-height: 1.95; color: var(--muted); margin-bottom: 20px; }
.service-page .what-body p:last-child { margin-bottom: 0; }

/* ─── SPECIALIST PAGES GRID (3-Columns) ─── */
.service-page #specialist { padding: 120px 56px; }
.service-page .spec-intro { max-width: 600px; margin-bottom: 64px; }
.service-page .spec-intro p { font-size: 15px; line-height: 1.9; color: var(--muted); margin-top: 16px; }
.service-page .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dim); border: 1px solid var(--dim); }
.service-page .spec-card { background: var(--bg); padding: 52px 44px; display: flex; flex-direction: column; text-decoration: none; color: var(--fg); transition: background .3s; opacity: 0; transform: translateY(32px); }
.service-page .spec-card:hover { background: rgba(237,236,234,.03); }
.service-page .spec-card-industry { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; text-align: left; }
.service-page .spec-card-name { font-family: var(--display); font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 16px; text-align: left; }
.service-page .spec-card-desc { font-size: 13px; line-height: 1.85; color: var(--muted); flex: 1; margin-bottom: 28px; text-align: left; }
.service-page .spec-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; justify-content: flex-start; }
.service-page .spec-tag { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--dim); padding: 4px 10px; color: var(--muted); }
.service-page .spec-card-arrow { font-size: 18px; color: var(--accent); align-self: flex-start; transition: transform .3s; }
.service-page .spec-card:hover .spec-card-arrow { transform: translateX(6px); }
.service-page .spec-card.coming { opacity: 0.5; cursor: default; pointer-events: none; }
.service-page .spec-card.coming:hover { background: var(--bg); }
.service-page .spec-coming-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--dim); padding: 4px 10px; width: fit-content; margin-top: auto; }

/* ─── WHO FOR GRID INTERIOR ─── */
.service-page #who { padding: 120px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.service-page .who-list { display: flex; flex-direction: column; }
.service-page .who-item { padding: 28px 0; border-bottom: 1px solid var(--dim); display: flex; gap: 24px; align-items: flex-start; opacity: 0; transform: translateX(24px); }
.service-page .who-item:first-child { padding-top: 0; }
.service-page .who-icon { font-size: 16px; flex-shrink: 0; padding-top: 2px; }
.service-page .who-name { font-family: var(--display); font-size: 20px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; text-align: left; }
.service-page .who-desc { font-size: 13px; line-height: 1.8; color: var(--muted); text-align: left; }

/* ─── PROCESS ROW FRAMEWORK (6-Columns) ─── */
.service-page #process { padding: 120px 56px; }
.service-page .process-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--dim); border: 1px solid var(--dim); margin-top: 56px; }
.service-page .p-step { background: var(--bg); padding: 40px 32px 44px; position: relative; opacity: 0; transform: translateY(32px); display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.service-page .p-step-num { font-family: var(--display); font-size: 52px; font-weight: 900; line-height: 1; color: rgba(237,236,234,.05); position: absolute; top: 20px; right: 18px; }
.service-page .p-step-name { font-family: var(--display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.service-page .p-step-desc { font-size: 12px; line-height: 1.8; color: var(--muted); }

/* ─── SERVICE PAGE MOBILE RESPONSIVENESS ─── */
@media (max-width: 900px) {
  .service-page #hero { padding: 0 32px 60px; }
  .service-page .hero-eyebrow { left: 32px; top: 120px; }
  .service-page #what, 
  .service-page #who { grid-template-columns: 1fr; gap: 40px; padding: 80px 32px; }
  .service-page #specialist, 
  .service-page #process { padding: 80px 32px; }
  .service-page .spec-grid { grid-template-columns: 1fr; gap: 16px; background: none; border: none; }
  .service-page .spec-card { padding: 32px 24px; }
  .service-page .process-steps { grid-template-columns: 1fr; gap: 16px; background: none; border: none; }
  .service-page .p-step { padding: 32px 24px; }
}


/* ==========================================================================
   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;
}