/* ── TOKENS ── */
:root{
  --black:#080A0F;
  --white:#FFFFFF;
  --cream:#F2EDE6;
  --border:#E0DAD2;
  --text:#3A3A3A;
  --muted:#888;
  --purple:#9B00FF;
  --green:#1ABF52;
  --orange:#ed3314;
  --font-head:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
  --font-logo:'Fraunces',serif;
  --max:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto;vertical-align:top}
a{text-decoration:none;color:inherit}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;background:var(--white);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-link:hover,.nav-link.active{color:var(--black)}
.nav-cta{background:var(--purple);color:var(--white)!important;padding:9px 22px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:background .2s}
.nav-cta:hover{background:#4920d4}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav-ham span{width:22px;height:2px;background:var(--black);display:block;transition:all .2s}

/* ── PAGE TOP ── */
.page-top{margin-top:64px}

/* ── SHARED SECTION ── */
.section{padding:100px 48px}
.section--sm{padding:64px 48px}
.section--dark{background:var(--black);color:var(--white)}
.section--cream{background:var(--cream)}
.inner{max-width:var(--max);margin:0 auto}

/* ── TYPOGRAPHY ── */
.label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.label--purple{color:var(--purple)}
.label--green{color:var(--green)}
.label--orange{color:var(--orange)}
.label--muted{color:var(--muted)}
.headline{font-family:var(--font-head);font-weight:900;text-transform:uppercase;line-height:.93;letter-spacing:-.5px}
.headline--xl{font-size:clamp(64px,8vw,110px)}
.headline--lg{font-size:clamp(52px,6.5vw,88px)}
.headline--md{font-size:clamp(40px,5vw,68px)}
.headline--sm{font-size:clamp(32px,4vw,52px)}
.headline .accent-purple{color:var(--purple)}
.headline .accent-green{color:var(--green)}
.headline .accent-orange{color:var(--orange)}
.body-text{font-size:16px;line-height:1.7;color:var(--text);max-width:560px}
.body-text--white{color:rgba(255,255,255,.65)}
.body-text--wide{max-width:720px}
.divider-line{width:36px;height:3px;margin-bottom:20px}
.divider-line--purple{background:var(--purple)}
.divider-line--green{background:var(--green)}
.divider-line--orange{background:var(--orange)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 34px;font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:2px;text-transform:uppercase;border-radius:3px;transition:background .2s,transform .15s,opacity .2s;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn--purple{background:var(--purple);color:#fff}
.btn--purple:hover{background:#4920d4}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{background:#c9380f}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:#169044}
.btn--outline{background:transparent;color:var(--black);border:1.5px solid var(--border)}
.btn--outline:hover{border-color:var(--black)}
.btn--outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn--outline-white:hover{border-color:#fff}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* ── ARROW LIST ── */
.arrow-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:24px}
.arrow-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--text)}
.arrow-list li::before{content:'→';font-weight:700;flex-shrink:0;margin-top:1px}
.arrow-list--purple li::before{color:var(--purple)}
.arrow-list--green li::before{color:var(--green)}
.arrow-list--orange li::before{color:var(--orange)}
.arrow-list--white li{color:rgba(255,255,255,.7)}
.arrow-list--white li::before{color:inherit}

/* ── PRODUCT CARDS ── */
.product-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:transparent;border:none}
.prod-card{background:var(--white);padding:40px 36px 36px;display:flex;flex-direction:column;border-bottom:3px solid transparent;transition:border-color .3s;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;cursor:pointer}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.09)}
.prod-card--invert:hover{box-shadow:0 12px 40px rgba(0,0,0,.25);filter:brightness(.92)}
.prod-card--rcl{border-bottom-color:var(--green)}
.prod-card--ese{border-bottom-color:var(--purple)}
.prod-card--po{border-bottom-color:var(--orange)}
.prod-logo-wrap img{max-height:80px;width:auto;max-width:260px}
.prod-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.prod-tag--rcl{color:var(--green)}
.prod-tag--ese{color:var(--purple)}
.prod-tag--po{color:var(--orange)}
.prod-desc{font-size:14px;line-height:1.65;color:var(--text);flex:1;margin-bottom:24px}
.prod-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:auto;transition:gap .2s}
.prod-link--rcl{color:var(--green)}
.prod-link--ese{color:var(--purple)}
.prod-link--po{color:var(--orange)}
.prod-link:hover{gap:10px}

/* ── TEAM CARDS ── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.team-card{border:1px solid var(--border);padding:36px;border-radius:3px;border-top:3px solid var(--purple)}
.team-name{font-family:var(--font-head);font-size:26px;font-weight:900;text-transform:uppercase;line-height:1.1;margin-bottom:8px}
.team-role{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--purple);padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.team-contact{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:10px}
.team-contact::before{content:'•';color:var(--purple);font-size:18px;line-height:1}

/* ── CLIENT TABLE ── */
.client-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.client-table{width:100%;border-collapse:collapse}
.client-table td{padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;font-weight:500;color:var(--text)}
.client-table td:not(:last-child){padding-right:24px}

/* ── CONTACT FORM ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.form-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.form-input,.form-select,.form-textarea{width:100%;padding:14px 18px;background:var(--white);border:1px solid var(--border);border-radius:3px;font-family:var(--font-body);font-size:15px;color:var(--black);transition:border-color .2s;outline:none;-webkit-appearance:none}
.section--cream .form-input,.section--cream .form-select,.section--cream .form-textarea{background:var(--white)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--purple)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}

/* ── STEPS ── */
.steps{display:flex;flex-direction:column;gap:0}
.step-item{display:flex;gap:28px;padding:28px 0;border-bottom:1px solid var(--border)}
.step-item:first-child{padding-top:0}
.step-num{font-family:var(--font-head);font-size:16px;font-weight:900;color:var(--border);min-width:36px;margin-top:3px}
.step-title{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.step-desc{font-size:14px;line-height:1.6;color:var(--text)}

/* ── FEATURE GRID ── */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.feat-card{background:var(--cream);padding:24px;border-radius:4px;border-top:3px solid var(--green)}
.feat-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;color:var(--green)}
.feat-desc{font-size:13px;line-height:1.55;color:var(--text)}
.feat-card--purple{border-top-color:var(--purple)}
.feat-card--purple .feat-title{color:var(--purple)}
.feat-card--orange{border-top-color:var(--orange)}
.feat-card--orange .feat-title{color:var(--orange)}

/* ── QUOTE ── */
.quote-band{background:var(--black);padding:70px 48px;text-align:center}
.quote-text{font-family:var(--font-head);font-size:clamp(26px,4vw,52px);font-weight:900;text-transform:uppercase;color:var(--purple);line-height:1.1;max-width:1000px;margin:0 auto}
.quote-attr{margin-top:20px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.25)}


/* ── FOOTER ── */
footer{background:var(--black);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-logo img{height:22px;width:auto;opacity:.5;filter:invert(1)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-link{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.3);transition:color .2s}
.footer-link:hover{color:rgba(255,255,255,.65)}
.footer-copy{font-size:11px;color:rgba(255,255,255,.2)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:0 24px}
  .nav-links{display:none}
  .nav-ham{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:24px;gap:20px;z-index:99}
  .section,.section--sm{padding:64px 24px}
  .product-cards,.team-grid{grid-template-columns:1fr}
  .feat-grid,.form-row{grid-template-columns:1fr}
  .quote-band{padding:48px 24px}
  .screen-grid{grid-template-columns:1fr}
  .screen-cell.wide{grid-column:span 1}
  footer{padding:36px 24px;flex-direction:column;align-items:flex-start}
}

/* ── PRODUCT PAGE NAV ACTIVE COLORS ── */
.page-rcl .nav-link.active{color:var(--green)!important}
.page-ese .nav-link.active{color:var(--purple)!important}
.page-po .nav-link.active{color:var(--orange)!important}


/* ═══════════════════════════════════════════
   IMAGE FIX — DEFINITIVE
   Two techniques used:
   A) padding-bottom trick  → for wrapper containers (screen-cell, cs-image-placeholder)
   B) aspect-ratio on <img> → for direct grid children (ese-outputs, theme-panel)
   Both eliminate white boxes without needing height:100% or CSS aspect-ratio on containers.
   ═══════════════════════════════════════════ */

img{display:block;max-width:100%;height:auto}

/* Logo wrappers — overflow:visible so tall SVGs aren't clipped */
.prod-logo-wrap{height:auto;min-height:90px;overflow:visible;display:flex;align-items:center;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border);line-height:0}
.prod-logo-wrap img{max-height:80px;width:auto;max-width:100%;height:auto;display:block}

/* ── SCREEN GRID: padding-bottom creates exact 26:15 box ── */
.screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#0C0E1A;border-radius:10px;overflow:hidden}
.screen-cell{display:grid;aspect-ratio:16/9;overflow:hidden;background:#0C0E1A;border-radius:0;line-height:0}
.screen-cell.wide{grid-column:span 2;aspect-ratio:16/9}
.screen-cell img{width:100%;height:100%;object-fit:cover;display:block;min-height:0;transition:transform .4s var(--ease)}
.screen-cell:hover img{transform:scale(1.02)}

/* ── CASE STUDY IMAGES: padding-bottom creates exact 26:15 box ── */
.cs-image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream);border:2px dashed var(--border);border-radius:8px;transition:border-color .2s;aspect-ratio:16/9}
.cs-image-placeholder.has-image{display:grid;aspect-ratio:16/9;overflow:hidden;border:none;background:#0C0E1A;border-radius:8px;position:static;height:auto;padding:0}
.cs-image-placeholder.has-image img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}

/* ── ESE OUTPUT GALLERY ── */
.ese-outputs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:8px;overflow:hidden}
.ese-outputs-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* ── THEME PANEL (Pub Odds) ── */
.theme-panel{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:10px;overflow:hidden}
.theme-panel img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.theme-panel.active{display:grid}

/* ── RCL / EQUISYNC stacked visuals ── */
.rcl-visual-stack{display:flex;flex-direction:column;gap:12px}
.rcl-visual-stack img,.ese-right-img img{width:100%;height:auto;display:block;border-radius:10px;line-height:0}