/* Synopticom shared page styles — enqueued by synopticom-elementor plugin */ :root { --coral: #CE6452; --coral-dark: #A54F41; --coral-pale: #fdf0ee; --coral-xpal: #fef7f6; --blue: #2A517F; --blue-dark: #1e3d62; --blue-pale: #e8f0f8; --blue-xpal: #f3f7fb; --blue-bdr: #c5d8ed; --ink: #383838; --ink-mid: #606060; --ink-light: #909090; --white: #FFFFFF; --grey: #ECECEC; --border: #ecddd9; --page: #fdf8f7; --font: 'DM Sans', system-ui, sans-serif; --max: 1240px; --gut: clamp(1.25rem,4vw,3.5rem); --rad: 10px; } .W{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} @keyframes dotPulse{0%,100%{r:8;opacity:.15}50%{r:13;opacity:0}} @keyframes flowDash{to{stroke-dashoffset:-40}} @keyframes flowSlow{to{stroke-dashoffset:-40}} @keyframes ringRotate{to{transform:rotate(360deg);transform-origin:190px 262px}} @keyframes fadeInNode{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}} @keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .flow-line{stroke-dasharray:6 4;animation:flowDash 2s linear infinite} .flow-slow{stroke-dasharray:5 5;animation:flowSlow 2.8s linear infinite} .ring-spin{transform-origin:190px 262px;animation:ringRotate 22s linear infinite} .ng{animation:fadeInNode .55s cubic-bezier(.34,1.3,.64,1) both} .ng:nth-child(1){animation-delay:.08s}.ng:nth-child(2){animation-delay:.18s} .ng:nth-child(3){animation-delay:.28s}.ng:nth-child(4){animation-delay:.38s} .ng:nth-child(5){animation-delay:.48s}.ng:nth-child(6){animation-delay:.58s} .mc{animation:chipIn .5s ease both} .mc:nth-child(1){animation-delay:.9s}.mc:nth-child(2){animation-delay:1.1s}.mc:nth-child(3){animation-delay:1.3s} /* ══ HERO — exact from coral file ══ */ .hero-wrap{background:#fff;border-bottom:1px solid var(--border);position:relative;overflow:hidden} .dot-bg{position:absolute;inset:0;background-image:radial-gradient(circle,#e8b8b0 1px,transparent 1px);background-size:30px 30px;opacity:.18;pointer-events:none} .right-wash{position:absolute;top:0;right:0;width:51%;height:100%;background:linear-gradient(140deg,#fff5f3 0%,#fde8e4 55%,#fad8d2 100%);pointer-events:none} .geo-deco{position:absolute;pointer-events:none} .hero{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:560px;position:relative;z-index:2} .hero-left{padding:5rem 3rem 5rem 0;display:flex;flex-direction:column} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--coral-pale);border:1px solid rgba(206,100,82,.28);color:var(--coral-dark);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:1.5rem;width:fit-content} .badge-dot{width:6px;height:6px;background:var(--coral);border-radius:50%;flex-shrink:0;animation:blink 2s ease-in-out infinite} .hero-h1{font-size:clamp(2.1rem,3.5vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.2rem} .hero-h1 .accent{color:var(--coral)} .hero-sub{font-size:.975rem;color:var(--ink-mid);line-height:1.75;max-width:400px;margin-bottom:2rem} .hero-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem} .btn-pri{font-family:var(--font);font-size:.9rem;font-weight:700;color:#fff;background:var(--coral);padding:.72rem 1.6rem;border-radius:7px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;box-shadow:0 3px 14px rgba(206,100,82,.36);transition:background .16s,transform .12s} .btn-pri:hover{background:var(--coral-dark);transform:translateY(-2px)} .btn-sec{font-family:var(--font);font-size:.9rem;font-weight:600;color:var(--coral);background:transparent;padding:.72rem 1.5rem;border-radius:7px;border:1.5px solid var(--coral);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .16s} .btn-sec:hover{background:var(--coral-pale)} .hero-stats{display:flex;align-items:center;padding-top:2rem;border-top:1.5px solid var(--border)} .h-stat{padding:0 1.6rem 0 0;margin-right:1.6rem;border-right:1.5px solid var(--border)} .h-stat:first-child{padding-left:0} .h-stat:last-child{border-right:none;margin-right:0} .h-stat-num{font-size:1.45rem;font-weight:800;color:var(--coral);letter-spacing:-.04em;line-height:1} .h-stat-lbl{font-size:.72rem;font-weight:500;color:var(--ink-light);margin-top:3px} .hero-right{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:500px} /* ══ SECTION SYSTEM ══ */ .sec{padding:5.5rem 0} .sec-white{background:#fff} .sec-warm{background:#fdf8f7} .sec-grey{background:var(--grey)} .sec-blue{background:var(--blue)} .sec-ink{background:var(--ink)} .sec-coral{background:var(--coral)} .sec-bpale{background:var(--blue-xpal)} /* ══ PAGE HERO (subpages) ══ */ .ph{padding:4.5rem 0 3.5rem;position:relative;overflow:clip} .ph-coral{background:var(--coral)} .ph-blue{background:var(--blue)} .ph::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none} .ph::after{content:'';position:absolute;bottom:-50px;left:-50px;width:180px;height:180px;border-radius:50%;background:rgba(0,0,0,.06);pointer-events:none} .ph-inner{position:relative;z-index:1} .ph-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.6rem} .ph h1{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.12;margin-bottom:1rem} .ph p.lead{font-size:1rem;color:rgba(255,255,255,.78);line-height:1.75;max-width:620px} /* ══ SECTION LABELS & TITLES ══ */ .lbl{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:.85rem} .lbl::before{content:'';display:block;width:18px;height:2px;background:var(--coral);border-radius:1px} .lbl-blue{color:var(--blue)}.lbl-blue::before{background:var(--blue)} .lbl-w{color:rgba(255,255,255,.6)}.lbl-w::before{background:rgba(255,255,255,.4)} .ttl{font-size:clamp(1.65rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.12;color:var(--ink);margin-bottom:.9rem} .ttl-w{color:#fff} .ttl .ac{color:var(--coral)} .ttl .ab{color:var(--blue)} .sub{font-size:.975rem;color:var(--ink-mid);line-height:1.75;max-width:540px} .sub-w{color:rgba(255,255,255,.68)} /* ══ BUTTONS ══ */ .btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:.88rem;font-weight:700;padding:.7rem 1.5rem;border-radius:7px;border:none;cursor:pointer;transition:background .16s,transform .12s,box-shadow .16s;line-height:1} .btn-coral{background:var(--coral);color:#fff;box-shadow:0 3px 14px rgba(206,100,82,.35)} .btn-coral:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 6px 22px rgba(206,100,82,.44)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 3px 12px rgba(42,81,127,.25)} .btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)} .btn-oc{background:transparent;color:var(--coral);border:1.5px solid var(--coral)} .btn-oc:hover{background:var(--coral-pale)} .btn-ob{background:transparent;color:var(--blue);border:1.5px solid var(--blue)} .btn-ob:hover{background:var(--blue-pale)} .btn-w{background:#fff;color:var(--coral);font-weight:800} .btn-w:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)} .btn-wb{background:#fff;color:var(--blue);font-weight:800} .btn-wb:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)} .btn-ow{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .btn-ow:hover{background:rgba(255,255,255,.1)} /* ══ GRIDS ══ */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .g3b{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden} .g3d{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:var(--rad);overflow:hidden} .g2b{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden} /* ══ CARDS ══ */ .card{background:#fff;border:1px solid #e8e8e8;border-radius:var(--rad);padding:2rem 1.75rem;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column} .card:hover{border-color:var(--coral);box-shadow:0 4px 20px rgba(206,100,82,.1)} .card-blue:hover{border-color:var(--blue);box-shadow:0 4px 20px rgba(42,81,127,.1)} .ct{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:.45rem} .cd{font-size:.85rem;color:var(--ink-mid);line-height:1.65;flex:1} .card-dk{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--rad);padding:2rem 1.75rem;display:flex;flex-direction:column;transition:background .2s} .card-dk:hover{background:rgba(255,255,255,.1)} .card-dk .ct{color:#fff}.card-dk .cd{color:rgba(255,255,255,.6)} /* ══ PILLAR CARDS (front page grid) ══ */ .pc{background:#fff;padding:2.5rem 2rem;display:flex;flex-direction:column;transition:background .22s} .pc:hover{background:var(--coral-xpal)} .pc-num{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ccc;margin-bottom:.85rem} .pc-name{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.5rem} .pc-desc{font-size:.85rem;color:var(--ink-mid);line-height:1.7;flex:1} .pc-link{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--coral);margin-top:1rem;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s} .pc:hover .pc-link{opacity:1;transform:none} /* ══ ICON BOXES (flat SVG, real hex) ══ */ .ib{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:1rem} .ib-c{background:#fdf0ee} .ib-b{background:#e8f0f8} .ib-w{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)} .ib-g{background:#ECECEC} /* ══ STEPS ══ */ .steps{border-top:1px solid #e8e8e8} .step{display:grid;grid-template-columns:40px 1fr;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid #e8e8e8;transition:padding-left .18s} .step:hover{padding-left:5px} .sn{width:28px;height:28px;border-radius:50%;background:#fdf0ee;border:1.5px solid #f0cdc7;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--coral);flex-shrink:0;margin-top:2px} .sn-b{background:#e8f0f8;border-color:#c5d8ed;color:var(--blue)} .st{font-size:.93rem;font-weight:700;color:var(--ink);margin-bottom:.3rem} .sd{font-size:.83rem;color:var(--ink-mid);line-height:1.65} .steps-d{border-top:1px solid rgba(255,255,255,.1)} .step-d{display:grid;grid-template-columns:40px 1fr;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.1);transition:padding-left .18s} .step-d:hover{padding-left:5px} .sn-d{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;margin-top:2px} .step-d .st{color:#fff}.step-d .sd{color:rgba(255,255,255,.6)} /* ══ CHECK LIST ══ */ .cl{list-style:none;display:flex;flex-direction:column;gap:.55rem} .cl li{display:flex;gap:.6rem;font-size:.88rem;color:var(--ink-mid);line-height:1.55;align-items:flex-start} .cl li::before{content:'';display:block;width:6px;height:6px;background:var(--coral);border-radius:50%;flex-shrink:0;margin-top:6px} .cl-b li::before{background:var(--blue)} .cl-w li{color:rgba(255,255,255,.8)}.cl-w li::before{background:rgba(255,255,255,.55)} /* ══ KPI STRIP ══ */ .kpi-strip{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:1} .kc{flex:1;padding:1.4rem;text-align:center;border-right:1px solid var(--border)} .kc:last-child{border-right:none} .kn{font-size:1.9rem;font-weight:800;color:var(--coral);letter-spacing:-.04em;line-height:1} .kn-b{color:var(--blue)}.kn-w{color:#fff} .kl{font-size:.68rem;font-weight:600;color:var(--ink-light);letter-spacing:.06em;text-transform:uppercase;margin-top:4px} .kl-w{color:rgba(255,255,255,.5)} /* ══ DASHBOARD ══ */ .dash{background:#fff;border:1px solid #e8e8e8;border-radius:var(--rad);box-shadow:0 4px 28px rgba(0,0,0,.07);overflow:hidden} .dash-top{background:var(--blue);padding:.88rem 1.2rem;display:flex;align-items:center;justify-content:space-between} .dash-top-t{font-size:.8rem;font-weight:700;color:#fff} .dash-top-tag{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.2);color:#fff;padding:2px 8px;border-radius:100px} .dash- .kpi3{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem} .kbox{background:var(--blue-xpal);border-radius:7px;padding:.75rem;text-align:center;border:1px solid var(--blue-bdr)} .kbox-v{font-size:1.4rem;font-weight:800;color:var(--blue);letter-spacing:-.04em;line-height:1} .kbox-l{font-size:.6rem;font-weight:700;color:var(--ink-light);letter-spacing:.07em;text-transform:uppercase;margin-top:2px} .kbox-d{font-size:.68rem;font-weight:700;color:var(--coral);margin-top:2px} .vl{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:.45rem} .br{display:flex;align-items:center;gap:.65rem} .bl{font-size:.7rem;color:var(--ink-mid);width:86px;text-align:right;flex-shrink:0} .bt{flex:1;height:6px;background:#ECECEC;border-radius:3px;overflow:hidden} .bf{height:100%;border-radius:3px;background:var(--blue)} .bf-c{background:var(--coral)} .bv{font-size:.68rem;font-weight:700;color:var(--blue);width:28px} .mbars{display:flex;align-items:flex-end;gap:4px;height:58px} .mb{flex:1;border-radius:3px 3px 0 0} /* ══ INT ROWS ══ */ .irow{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:.9rem;padding:.8rem 1.1rem;background:#fff;border:1px solid #e8e8e8;border-radius:7px;margin-bottom:.4rem;transition:border-color .16s} .irow:hover{border-color:var(--blue)} .il{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)} .in{font-size:.83rem;font-weight:600;color:var(--ink)} .id{font-size:.73rem;color:var(--ink-light)} .ibadge{font-size:.6rem;font-weight:700;background:#e8f0f8;color:var(--blue-dark);padding:2px 7px;border-radius:100px;white-space:nowrap} /* ══ PRICING ══ */ .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .pcard{background:#fff;border:1.5px solid #e8e8e8;border-radius:var(--rad);padding:2.5rem 2rem;position:relative} .pcard.feat{border-color:var(--coral);box-shadow:0 8px 36px rgba(206,100,82,.14)} .pbadge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 13px;border-radius:100px;white-space:nowrap} .ptier{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:.7rem} .pprice{font-size:2.3rem;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1;margin-bottom:.4rem} .pprice span{font-size:.95rem;font-weight:400;color:var(--ink-light)} .pdesc{font-size:.83rem;color:var(--ink-mid);line-height:1.65;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e8e8e8} .pfl{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.75rem} .pfl li{display:flex;gap:.55rem;font-size:.83rem;color:var(--ink-mid);align-items:flex-start} .pfl li::before{content:'✓';color:var(--coral);font-weight:800;flex-shrink:0} /* ══ FORM ══ */ .fg{display:flex;flex-direction:column;gap:.8rem} .fr{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .fl{display:block;font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:.28rem;letter-spacing:.02em} .fi{font-family:var(--font);font-size:.88rem;width:100%;padding:.78rem 1.05rem;border-radius:7px;border:1.5px solid #e8e8e8;background:#fff;color:var(--ink);outline:none;transition:border-color .16s} .fi:focus{border-color:var(--coral)} textarea.fi{resize:vertical;min-height:110px} /* ══ CTA BANDS ══ */ .cta-c{background:var(--coral);padding:4.5rem 0;position:relative;overflow:hidden} .cta-c::before{content:'';position:absolute;top:-80px;right:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none} .cta-c::after{content:'';position:absolute;bottom:-60px;left:-50px;width:200px;height:200px;border-radius:50%;background:rgba(0,0,0,.06);pointer-events:none} .cta-b{background:var(--blue);padding:4.5rem 0;position:relative;overflow:hidden} .cta-b::before{content:'';position:absolute;top:-80px;right:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none} .cta-b::after{content:'';position:absolute;bottom:-60px;left:-50px;width:200px;height:200px;border-radius:50%;background:rgba(0,0,0,.08);pointer-events:none} .cta-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap} .cta-t{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.15;margin-bottom:.7rem} .cta-s{font-size:.93rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:520px} .cta-btns{display:flex;gap:.9rem;flex-shrink:0;flex-wrap:wrap} /* ══ MODULE GRID ══ */ .grid-row1{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--rad) var(--rad) 0 0;overflow:hidden;border-bottom:none} .grid-row2{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:0 0 var(--rad) var(--rad);overflow:hidden} .pc-cx{background:var(--coral);padding:3rem 2.5rem;position:relative;overflow:hidden;cursor:pointer;transition:background .2s} .pc-cx:hover{background:var(--coral-dark)} .pc-cx::before{content:'';position:absolute;top:-50px;right:-50px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none} .pc-cx::after{content:'';position:absolute;bottom:-40px;left:-40px;width:170px;height:170px;border-radius:50%;background:rgba(0,0,0,.08);pointer-events:none} .cx-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:.32rem .8rem;border-radius:100px;margin-bottom:1.25rem;position:relative;z-index:1} .cx-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;flex-shrink:0} .cx-num{font-size:.65rem;font-weight:800;color:rgba(255,255,255,.45);letter-spacing:.08em;margin-bottom:.5rem;position:relative;z-index:1} .cx-icon{margin-bottom:1rem;position:relative;z-index:1} .cx-name{font-size:1.45rem;font-weight:800;color:#fff;margin-bottom:.65rem;letter-spacing:-.02em;line-height:1.2;position:relative;z-index:1} .cx-desc{font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1} .cx-metrics{display:flex;gap:.6rem;margin-bottom:1.75rem;flex-wrap:wrap;position:relative;z-index:1} .cx-m{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:.45rem .75rem;text-align:center} .cx-m-v{font-size:.95rem;font-weight:800;color:#fff;line-height:1} .cx-m-l{font-size:.58rem;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} .cx-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.88rem;font-weight:700;color:#fff;position:relative;z-index:1;opacity:.9;text-decoration:none} .cx-link:hover{opacity:1} .pc-ex{background:var(--blue);padding:3rem 2.5rem;position:relative;overflow:hidden;cursor:pointer;transition:background .2s} .pc-ex:hover{background:var(--blue-dark)} .pc-ex::before{content:'';position:absolute;top:-50px;right:-50px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none} .pc-ex::after{content:'';position:absolute;bottom:-40px;left:-40px;width:170px;height:170px;border-radius:50%;background:rgba(0,0,0,.08);pointer-events:none} .ex-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:.32rem .8rem;border-radius:100px;margin-bottom:1.25rem;position:relative;z-index:1} .ex-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);flex-shrink:0} .ex-num{font-size:.65rem;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:.08em;margin-bottom:.5rem;position:relative;z-index:1} .ex-icon{margin-bottom:1rem;position:relative;z-index:1} .ex-name{font-size:1.45rem;font-weight:800;color:#fff;margin-bottom:.65rem;letter-spacing:-.02em;line-height:1.2;position:relative;z-index:1} .ex-desc{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1} .ex-metrics{display:flex;gap:.6rem;margin-bottom:1.75rem;flex-wrap:wrap;position:relative;z-index:1} .ex-m{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.45rem .75rem;text-align:center} .ex-m-v{font-size:.95rem;font-weight:800;color:rgba(255,255,255,.9);line-height:1} .ex-m-l{font-size:.58rem;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} .ex-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.75);position:relative;z-index:1;text-decoration:none} .ex-link:hover{color:#fff} .flow-strip{display:flex;align-items:center;gap:0;margin-top:1.25rem;padding:.1rem 0} .flow-step{display:flex;flex-direction:column;gap:2px} .flow-step .fw{font-size:.78rem;font-weight:700;color:var(--ink)} .flow-step .sl{font-size:.67rem;font-weight:400;color:var(--ink-light)} .fs1 .fw{color:var(--coral)} .flow-strip .fa{font-size:.75rem;color:#d8ccc9;padding:0 .85rem;flex-shrink:0;line-height:1;margin-bottom:10px} /* ══ LOGOS BAND ══ */ .logos-band{background:rgba(236,236,236,.225);border-bottom:1px solid #d8d8d8;padding:1.4rem 0;overflow:hidden} .logos-in{display:flex;align-items:center;gap:0} .logos-lbl{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-light);white-space:nowrap;flex-shrink:0;padding:0 2.5rem 0 0} .logos-track-wrap{flex:1;overflow:hidden;position:relative} .logos-track-wrap::before,.logos-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .logos-track-wrap::before{left:0;background:linear-gradient(to right,rgba(236,236,236,.225),transparent)} .logos-track-wrap::after{right:0;background:linear-gradient(to left,rgba(236,236,236,.225),transparent)} .logos-track{display:flex;align-items:center;gap:0;animation:logoScroll 33.6s linear infinite;width:max-content} .logos-track:hover{animation-play-state:paused} @keyframes logoScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .logo-img{height:31px;width:auto;opacity:.55;filter:grayscale(1);transition:opacity .22s,filter .22s;flex-shrink:0;margin:0 3rem} .logo-img:hover{opacity:.85;filter:grayscale(.2)} /* ══ INFO BOX ══ */ .ibox{background:var(--coral-pale);border:1px solid #f0cdc7;border-radius:var(--rad);padding:1.6rem 1.85rem} .ibox h3{font-size:.95rem;font-weight:700;color:var(--coral);margin-bottom:.5rem} .ibox p{font-size:.85rem;color:var(--ink-mid);line-height:1.7} .ibox-b{background:var(--blue-pale);border-color:var(--blue-bdr)} .ibox-b h3{color:var(--blue)} /* ══ TABS ══ */ .tabs-nav{display:flex;border-bottom:2px solid #e8e8e8;overflow-x:auto;margin-bottom:2.5rem} .tb{font-family:var(--font);font-size:.875rem;font-weight:600;color:var(--ink-light);background:none;border:none;cursor:pointer;padding:.72rem 1.2rem;border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:color .16s,border-color .16s} .tb:hover{color:var(--coral)} .tb.on{color:var(--coral);border-bottom-color:var(--coral)} .tp{display:none} .tp.on{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start} .tp-t{font-size:1.35rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.2;margin-bottom:.8rem} .tp-d{font-size:.88rem;color:var(--ink-mid);line-height:1.75;margin-bottom:1.5rem} /* ══ LEGAL ══ */ .legal{max-width:760px;margin:0 auto} .legal h2{font-size:1.15rem;font-weight:800;color:var(--ink);margin:2.5rem 0 .7rem} .legal h3{font-size:.95rem;font-weight:700;color:var(--blue);margin:1.6rem 0 .45rem} .legal p{font-size:.9rem;color:var(--ink-mid);line-height:1.8;margin-bottom:.9rem} .legal ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:.9rem} .legal ul li{font-size:.9rem;color:var(--ink-mid);line-height:1.7;padding-left:1.1rem;position:relative} .legal ul li::before{content:'–';position:absolute;left:0;color:var(--coral);font-weight:700} .legal-meta{font-size:.78rem;color:var(--ink-light);margin-bottom:2rem} .legal-toc{background:var(--blue-pale);border:1px solid var(--blue-bdr);border-radius:var(--rad);padding:1.6rem 1.85rem;margin-bottom:2.5rem} .legal-toc h4{font-size:.8rem;font-weight:700;color:var(--blue);margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.06em} .legal-toc ol{padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem} .legal-toc ol li a{font-size:.85rem;color:var(--ink-mid);text-decoration:none} .legal-toc ol li a:hover{color:var(--blue)} /* ══ RESPONSIVE ══ */ @media(max-width:1024px){ .g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr} .g3b{grid-template-columns:1fr 1fr}.g3d{grid-template-columns:1fr 1fr} .pg{grid-template-columns:1fr;max-width:440px;margin:0 auto} .tp.on{grid-template-columns:1fr} .hero{grid-template-columns:1fr;min-height:auto} .hero-left{padding:3.5rem 0 2rem} .hero-right,.right-wash{display:none} .nav-links{display:none} .foot-main{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .g2{grid-template-columns:1fr;gap:2.5rem} .g2b{grid-template-columns:1fr} .fr{grid-template-columns:1fr} .cta-in{flex-direction:column} .foot-main{grid-template-columns:1fr} .kpi-strip{flex-wrap:wrap} .kc{border-right:none;border-bottom:1px solid var(--border)} .kc:last-child{border-bottom:none} } @media(max-width:520px){ .g3{grid-template-columns:1fr}.g3b{grid-template-columns:1fr}.g3d{grid-template-columns:1fr}.g4{grid-template-columns:1fr} .hero-stats{flex-wrap:wrap;gap:.9rem}.h-stat{border-right:none;margin-right:0;padding-right:0} .kpi3{grid-template-columns:1fr 1fr} } /* ══ SUB-NAV RIBBON ══ */ .sub-nav { background: #fff; border-bottom: 1px solid #e8e8e8; position: sticky; top: var(--syn-header-offset, 66px); /* z-index 250 = above page content (which uses z-index 1-2) but below .nav-wrap's stacking context (z-index 300) so the header mega-menu dropdown (.nav-drop @ z-index 400, local to nav-wrap) renders above the sub-nav when it expands past 66px. */ z-index: 250; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav.is-pinned { position: fixed !important; left: 0; right: 0; z-index: 250; margin-top: 0 !important; } .syn-sub-nav-spacer { display: block; width: 100%; height: 0; } .sub-nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); display: flex; align-items: center; gap: 0; white-space: nowrap; } .sub-nav-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #909090; padding-right: 1.25rem; margin-right: .25rem; border-right: 1px solid #e8e8e8; flex-shrink: 0; } .sub-nav-item { font-family: 'DM Sans', sans-serif; font-size: .86rem; font-weight: 500; color: #606060; padding: .88rem 1.1rem; border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .16s, border-color .16s; white-space: nowrap; text-decoration: none; display: inline-block; background: none; border-top: none; border-left: none; border-right: none; } .sub-nav-item:hover { color: #CE6452; } .sub-nav-item.active { color: #CE6452; border-bottom-color: #CE6452; font-weight: 700; } /* Blue variant for Platform pages */ .sub-nav-blue .sub-nav-item:hover { color: #2A517F; } .sub-nav-blue .sub-nav-item.active { color: #2A517F; border-bottom-color: #2A517F; } /* ══ Blocksy / theme overrides (scoped to Synopticom page content) ══ */ .elementor-widget-html .syn-page, .elementor .e-con .syn-page, .elementor-location-single .syn-page { font-family: var(--font) !important; color: var(--ink); /* Anchor inherited line-height to browser default (matches SPA dist preview). Blocksy sets body { line-height: 1.65 }, which would propagate into our cards. */ line-height: normal !important; -webkit-font-smoothing: antialiased; box-sizing: border-box; } /* Global descendant reset — mirrors original SPA's "*{margin:0;padding:0}" so theme-imposed default margins on

/ cannot leak through. Per-page rules (specificity 0,4-5,0) and class-based shielded rules (specificity 0,3-4,0) still win on every layout-affecting property. */ .elementor-widget-html .syn-page *, .elementor .e-con .syn-page *, .elementor-location-single .syn-page * { box-sizing: border-box; margin: 0 !important; padding: 0 !important; /* Inherit line-height from .syn-page (= normal). Defends against theme rules like .entry-content p with line-height 1.65 that would otherwise match deep descendants. Per-page rules with explicit line-height still win on specificity. */ line-height: inherit !important; } .elementor-widget-html .syn-page h1, .elementor-widget-html .syn-page h2, .elementor-widget-html .syn-page h3, .elementor-widget-html .syn-page h4, .elementor-widget-html .syn-page h5, .elementor-widget-html .syn-page h6, .elementor .e-con .syn-page h1, .elementor .e-con .syn-page h2, .elementor .e-con .syn-page h3, .elementor .e-con .syn-page h4, .elementor .e-con .syn-page h5, .elementor .e-con .syn-page h6, .elementor-location-single .syn-page h1, .elementor-location-single .syn-page h2, .elementor-location-single .syn-page h3, .elementor-location-single .syn-page h4, .elementor-location-single .syn-page h5, .elementor-location-single .syn-page h6 { margin: 0 !important; padding: 0 !important; font-family: var(--font) !important; line-height: inherit; } .elementor-widget-html .syn-page p, .elementor .e-con .syn-page p, .elementor-location-single .syn-page p { margin: 0 !important; } .elementor-widget-html .syn-page [class*="syn-is-"], .elementor .e-con .syn-page [class*="syn-is-"], .elementor-location-single .syn-page [class*="syn-is-"] { font-family: var(--font) !important; } .elementor-widget-html .syn-page a:not([class*="btn"]), .elementor .e-con .syn-page a:not([class*="btn"]), .elementor-location-single .syn-page a:not([class*="btn"]) { color: inherit; text-decoration: none !important; } .elementor-widget-html .syn-page a[class*="btn"], .elementor .e-con .syn-page a[class*="btn"], .elementor-location-single .syn-page a[class*="btn"] { text-decoration: none !important; appearance: none !important; -webkit-appearance: none !important; } .elementor-widget-html .syn-page ul, .elementor-widget-html .syn-page ol, .elementor .e-con .syn-page ul, .elementor .e-con .syn-page ol, .elementor-location-single .syn-page ul, .elementor-location-single .syn-page ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } .elementor-widget-html .syn-page li, .elementor .e-con .syn-page li, .elementor-location-single .syn-page li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .elementor-widget-html .syn-page button, .elementor-widget-html .syn-page .btn, .elementor-widget-html .syn-page .btn-pri, .elementor-widget-html .syn-page .btn-sec, .elementor-widget-html .syn-page a[class*="btn"], .elementor .e-con .syn-page button, .elementor .e-con .syn-page .btn, .elementor .e-con .syn-page a[class*="btn"], .elementor-location-single .syn-page button, .elementor-location-single .syn-page .btn, .elementor-location-single .syn-page a[class*="btn"] { font-family: var(--font) !important; line-height: 1 !important; text-transform: none !important; letter-spacing: normal !important; min-height: 0 !important; vertical-align: baseline !important; } .elementor-widget-html .syn-page img:not(.logo-img), .elementor .e-con .syn-page img:not(.logo-img), .elementor-location-single .syn-page img:not(.logo-img) { max-width: 100%; height: auto; display: block; } .elementor-widget-html .syn-page img.logo-img, .elementor .e-con .syn-page img.logo-img, .elementor-location-single .syn-page img.logo-img { max-width: none !important; height: 31px !important; width: auto !important; display: block; } .elementor-widget-html .syn-page figure, .elementor .e-con .syn-page figure, .elementor-location-single .syn-page figure { margin: 0 !important; } .elementor-widget-html .syn-page blockquote, .elementor .e-con .syn-page blockquote, .elementor-location-single .syn-page blockquote { margin: 0 !important; border: none !important; padding: 0 !important; } .elementor-widget-html .syn-page span, .elementor .e-con .syn-page span, .elementor-location-single .syn-page span { font-family: inherit; } .elementor-widget-html .syn-page input, .elementor-widget-html .syn-page textarea, .elementor-widget-html .syn-page select, .elementor-widget-html .syn-page .fi, .elementor .e-con .syn-page input, .elementor .e-con .syn-page textarea, .elementor .e-con .syn-page select, .elementor .e-con .syn-page .fi, .elementor-location-single .syn-page input, .elementor-location-single .syn-page textarea, .elementor-location-single .syn-page select, .elementor-location-single .syn-page .fi { font-family: var(--font) !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } .elementor-widget-html .syn-page table, .elementor .e-con .syn-page table, .elementor-location-single .syn-page table { border-collapse: collapse !important; border-spacing: 0 !important; } /* ══ Layer 4 — Elementor / Blocksy container reset ══ */ .elementor-widget-html:has(.syn-page) > .elementor-widget-container, .elementor-element.elementor-widget:has(.syn-page), .elementor-section:has(.syn-page) > .elementor-container, .elementor-column:has(.syn-page) > .elementor-widget-wrap { padding: 0 !important; margin: 0 !important; /* overflow: visible is critical for our position: sticky sub-nav. Blocksy and Elementor often set overflow: hidden on widget containers (for ripple effects, animations, etc.) which silently breaks position: sticky on every descendant. */ overflow: visible !important; } .e-con:has(> .elementor-widget > .elementor-widget-container > .syn-page), .e-con:has(> .elementor-widget-html > .elementor-widget-container > .syn-page) { padding: 0 !important; max-width: none !important; overflow: visible !important; --padding-block-start: 0 !important; --padding-block-end: 0 !important; --padding-inline-start: 0 !important; --padding-inline-end: 0 !important; } /* Fallback for browsers without :has() — still safe because .syn-page is always inside an HTML widget container in our deploy model. */ .elementor-widget-html .elementor-widget-container { padding: 0 !important; overflow: visible !important; } /* ══ Layer 6 — root font-size anchor (rem must resolve to 16px for inline-style design intent) ══ */ html:has(.syn-page), html:has(.elementor-widget-html .syn-page) { font-size: 16px !important; } /* ══ Layer 8 — sticky context guard for .sub-nav ══ */ .entry-content:has(.syn-page), .entry-content:has(.elementor-widget-html .syn-page), .elementor:has(.syn-page), .elementor-section:has(.syn-page), .elementor-container:has(.syn-page), .elementor-row:has(.syn-page), .elementor-column:has(.syn-page), .elementor-widget-wrap:has(.syn-page), .elementor-element:has(.syn-page), .elementor-widget:has(.syn-page), .e-con:has(.syn-page), .e-con-inner:has(.syn-page), .elementor-widget-container:has(.syn-page) { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; /* Avoid creating a stacking context that would clip our sub-nav's z-index. Blocksy sometimes sets transform: translateZ(0) here. */ transform: none !important; filter: none !important; } /* The .syn-page wrapper itself must stay overflow: visible so that the sub-nav can pin to viewport top instead of being trapped inside it. */ .elementor-widget-html .syn-page, .elementor .e-con .syn-page, .elementor-location-single .syn-page { overflow: visible !important; } /* Belt-and-braces: re-declare sub-nav stickiness with the original SPA z-index of 250. This sits above all page content (which uses z-index 1-2) but below the synopticom header's nav-wrap stacking context (z-index 9999) so the header mega-menu dropdown (.nav-drop = 10000 local to nav-wrap) can still render above the sub-nav. OPAQUE SEAM SEAL STRATEGY (v1.0.38): • top: var(--syn-header-offset, 66px) = nav bar height only (excludes the 1px border-bottom). JS sets this from