whose height is exactly the brick's — that box would give the sticky train zero travel and it would never pin. Collapse the wrapper in the frontend so the train's sticky containing block is #homev2-body (the whole scroll length). */ body:not(.homev2-editmode) .pimcore_area_Homev2SectionTrain{display:contents} .sev2-train{ position:sticky;top:0;z-index:70; background:var(--sev2-bg); border-top:1px solid var(--sev2-line);border-bottom:1px solid var(--sev2-line); font-family:var(--sev2-mono); } .sev2-train-inner{ max-width:var(--sev2-wrap);margin:0 auto; display:flex;align-items:stretch; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; scroll-snap-type:x proximity; } .sev2-train-inner::-webkit-scrollbar{display:none} .sev2-train-label{ display:flex;align-items:center;padding:0 16px 0 var(--sev2-gut-bar); font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sev2-ink-3); white-space:nowrap;flex:0 0 auto; } .sev2-train-item{ display:inline-flex;align-items:center;gap:9px; padding:14px 18px;flex:0 0 auto;scroll-snap-align:start; font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--sev2-ink-3);white-space:nowrap; border-left:1px solid var(--sev2-line); transition:color .16s ease,background .16s ease; } .sev2-train-item:first-of-type{border-left:0} .sev2-train-label + .sev2-train-item{border-left:1px solid var(--sev2-line)} .sev2-train-num{color:var(--sev2-ink-3);font-weight:400} .sev2-train-txt{font-weight:500;color:var(--sev2-ink-2)} .sev2-train-item:hover{color:var(--sev2-ink)} .sev2-train-item:hover .sev2-train-txt, .sev2-train-item:hover .sev2-train-num{color:var(--sev2-ink)} .sev2-train-item.is-active{background:var(--sev2-ink)} .sev2-train-item.is-active .sev2-train-txt{color:#fff} .sev2-train-item.is-active .sev2-train-num{color:rgba(255,255,255,.55)} .sev2-train-item:focus-visible{outline:2px solid var(--sev2-brand);outline-offset:-2px} @media(max-width:600px){ .sev2-train-item{padding:12px 13px;font-size:10px;gap:6px} .sev2-train-label{display:none} } /* ================================ BUTTONS =============================== */ .sev2-btn{ display:inline-flex;align-items:center;gap:9px;font-family:var(--sev2-mono);font-size:12px; font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px; border-radius:var(--sev2-r-sm);border:1px solid var(--sev2-ink);background:var(--sev2-ink); color:#fff;cursor:pointer;text-decoration:none; transition:transform .18s ease,box-shadow .2s ease,background .18s ease,color .18s ease,border-color .18s ease; } .sev2-ar{display:inline-block;transition:transform .2s ease} .sev2-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(10,15,16,.45)} .sev2-btn:hover .sev2-ar{transform:translateX(4px)} .sev2-btn--brand{background:var(--sev2-brand);border-color:var(--sev2-brand);box-shadow:var(--sev2-glow)} .sev2-btn--brand:hover{background:var(--sev2-brand-deep);border-color:var(--sev2-brand-deep)} .sev2-btn--ghost{background:transparent;color:var(--sev2-ink);border-color:var(--sev2-line-2)} .sev2-btn--ghost:hover{background:var(--sev2-bg-mute);color:var(--sev2-ink);border-color:var(--sev2-ink)} .sev2-lnk{ font-family:var(--sev2-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--sev2-brand-ink);font-weight:500;display:inline-flex;align-items:center;gap:9px; text-decoration:none;transition:color .18s ease; } .sev2-lnk:hover{color:var(--sev2-brand-deep)} .sev2-lnk:hover .sev2-ar{transform:translateX(4px)} /* ================================= HERO ================================= */ .sev2-hero{ background: radial-gradient(1200px 720px at 82% -12%,rgba(0,156,166,.26),transparent 58%), radial-gradient(820px 560px at 2% 116%,rgba(255,150,139,.16),transparent 60%), var(--sev2-dark); color:var(--sev2-don);position:relative;overflow:hidden; font-family:var(--sev2-sans); padding:clamp(56px,7vw,92px) 0 clamp(64px,7vw,92px); } .sev2-hero *{box-sizing:border-box} .sev2-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000,transparent 78%); mask-image:radial-gradient(ellipse at 60% 30%,#000,transparent 78%); } .sev2-hero > .sev2-wrap{position:relative;z-index:1} .sev2-hero-pre{ display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; margin-bottom:clamp(30px,4.5vw,58px); } .sev2-brandline{ font-family:var(--sev2-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--sev2-don-3); } .sev2-latest{ display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px; border:1px solid var(--sev2-dline-2);border-radius:999px;font-size:12.5px; color:var(--sev2-don-2);text-decoration:none;transition:.18s; } .sev2-latest:hover{border-color:var(--sev2-brand);background:rgba(0,156,166,.12);color:#fff} .sev2-latest b{ font-family:var(--sev2-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; background:var(--sev2-brand);color:#04211f;padding:4px 8px;border-radius:999px;font-weight:700; } .sev2-hero-top{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:start; margin-bottom:clamp(26px,3.4vw,44px); } .sev2-hero-head h1{ font-size:clamp(46px,7.2vw,104px);font-weight:700;letter-spacing:-.02em;line-height:.94; color:#fff;margin-top:-8px; } .sev2-hero-head h1 em{font-style:italic;font-weight:300;color:var(--sev2-brand-lite)} .sev2-hero-side{padding-bottom:6px} .sev2-hero-sub{font-size:clamp(16px,1.35vw,19px);color:var(--sev2-don-2);line-height:1.62;max-width:56ch} .sev2-hero-sub b{color:#fff;font-weight:500} .sev2-hero-sub strong{color:var(--sev2-brand-lite);font-weight:500} .sev2-hero-actions{display:flex;gap:10px;flex-wrap:nowrap;margin-top:34px} .sev2-hero-actions .sev2-btn{padding:13px 16px;white-space:nowrap} .sev2-hero .sev2-btn--ghost{color:#fff;border-color:var(--sev2-dline-2)} .sev2-hero .sev2-btn--ghost:hover{background:#fff;color:var(--sev2-dark);border-color:#fff} .sev2-hero-note{ font-family:var(--sev2-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--sev2-don-3);margin-top:30px; } .sev2-hero-vis{ position:relative;border-radius:var(--sev2-r-xl);overflow:hidden; border:1px solid var(--sev2-dline-2);aspect-ratio:16/9;width:100%;background:#0c1314; box-shadow:0 60px 120px -50px rgba(0,0,0,.85); } .sev2-hero-vis video,.sev2-hero-vis > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sev2-hero-vis::after{ content:"";position:absolute;left:0;right:0;height:2px;top:0;z-index:2; background:linear-gradient(90deg,transparent,rgba(55,183,192,.9),transparent); animation:sev2-scan 5.5s cubic-bezier(.5,0,.5,1) infinite; } .sev2-vscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(6,12,12,.55))} .sev2-vchip{ position:absolute;left:16px;bottom:16px;z-index:3;display:flex;gap:10px;align-items:center; font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:#dff5f6;background:rgba(8,16,16,.5);border:1px solid var(--sev2-dline-2); backdrop-filter:blur(6px);padding:8px 12px;border-radius:999px; } .sev2-vchip .sev2-dot{ width:7px;height:7px;border-radius:50%;background:var(--sev2-brand-lite); box-shadow:0 0 10px var(--sev2-brand-lite);animation:sev2-pulse 2.4s ease-in-out infinite; } @keyframes sev2-scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}} @keyframes sev2-pulse{0%,100%{opacity:1}50%{opacity:.35}} @media(max-width:1040px){.sev2-hero-actions{flex-wrap:wrap}} @media(max-width:860px){.sev2-hero-top{grid-template-columns:1fr}.sev2-hero-vis{margin-top:4px}} /* ================================ TRUST ================================= */ .sev2-trust{background:var(--sev2-bg);border-bottom:1px solid var(--sev2-line);font-family:var(--sev2-sans)} .sev2-trust *{box-sizing:border-box} .sev2-trust-in{padding:clamp(30px,4.4vw,52px) var(--sev2-gut)} .sev2-trust-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .sev2-trust-stats > div{display:flex;flex-direction:column;gap:5px;padding-right:18px;border-right:1px solid var(--sev2-line)} .sev2-trust-stats > div:last-child{border-right:0} .sev2-trust-stats .sev2-v{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--sev2-ink)} .sev2-trust-stats .sev2-v em{font-style:normal;color:var(--sev2-brand)} .sev2-trust-stats .sev2-v p{margin:0} .sev2-trust-stats .sev2-l{ font-family:var(--sev2-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--sev2-ink-3); } .sev2-marquee-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:clamp(16px,2.4vw,26px);margin-top:clamp(18px,2.4vw,28px); padding-top:clamp(16px,2.2vw,26px);border-top:1px solid var(--sev2-line); } .sev2-marquee-row .sev2-ml{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--sev2-ink-3);flex-shrink:0; } .sev2-logos-static{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:12px clamp(20px,3vw,40px);flex:0 1 auto;min-width:0; } .sev2-logos-static .sev2-lg{ font-weight:700;font-size:clamp(13px,1.5vw,16px);letter-spacing:.02em; color:var(--sev2-ink-3);opacity:.72;white-space:nowrap; } /* The imported wordmarks carry a baked-in 30px white margin on a 260px canvas (bin/prepare-homev2-trust-logos.php), so ~23% of the box is padding — the CSS height is set higher than the wanted cap height to compensate. */ .sev2-logos-static .sev2-lg-img{height:40px;width:auto;max-width:170px;object-fit:contain;opacity:.72;filter:grayscale(1)} @media(max-width:1040px){ .sev2-trust-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 34px} .sev2-trust-stats > div{flex:0 1 calc(33.333% - 34px);align-items:center;text-align:center;padding-right:0;border-right:0;gap:6px} .sev2-trust-stats .sev2-v{font-size:24px} } @media(max-width:600px){ .sev2-trust-stats{gap:22px 26px} .sev2-trust-stats > div{flex:0 1 calc(50% - 26px)} .sev2-trust-stats .sev2-v{font-size:22px} .sev2-trust-stats .sev2-l{font-size:9.5px;letter-spacing:.07em} .sev2-marquee-row{flex-direction:column;gap:14px} } /* ============================ BUILT WORLD (§01) ========================= */ .sev2-world{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.82fr);gap:clamp(32px,4vw,56px);align-items:start} .sev2-world-copy,.sev2-world-figures{min-width:0} .sev2-world-copy .sev2-h2{margin:18px 0 20px} .sev2-world-opp{ margin-top:20px;padding-left:16px;border-left:2px solid var(--sev2-brand); max-width:60ch;font-size:15px;line-height:1.62;color:var(--sev2-ink-2); } .sev2-world-opp strong{color:var(--sev2-brand-ink);font-weight:700} .sev2-world-opp-src{ margin-top:6px;padding-left:16px;font-family:var(--sev2-mono);font-size:10px; letter-spacing:.04em;color:var(--sev2-ink-3); } .sev2-world-figures{ display:flex;flex-direction:column;border:1px solid var(--sev2-line-2); border-radius:var(--sev2-r-lg);background:var(--sev2-bg);overflow:hidden; } .sev2-wf-sec{min-width:0;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--sev2-line-2)} .sev2-wf-sec--headline{background:var(--sev2-bg-soft)} .sev2-wf{ padding:18px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:16px; border-bottom:1px solid var(--sev2-line); } .sev2-wf:last-child{border-bottom:0} .sev2-wfk{font-family:var(--sev2-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sev2-ink-2);font-weight:500} .sev2-wfn{font-family:var(--sev2-mono);font-size:10px;color:var(--sev2-ink-3);letter-spacing:.04em;margin-top:5px} .sev2-wfv{ font-size:18px;font-weight:700;letter-spacing:-.018em;line-height:1; color:var(--sev2-ink-2);white-space:nowrap;text-align:right; } .sev2-wfv em{font-style:italic;color:var(--sev2-brand);font-size:32px;letter-spacing:-.016em;font-weight:700} .sev2-wfv p{margin:0} .sev2-wf-headline{padding:24px;flex-direction:column;align-items:flex-start;gap:10px;border-bottom:0} .sev2-wf-headline .sev2-wfk{color:var(--sev2-ink);font-size:13.5px} .sev2-wf-headline .sev2-wfv{font-size:22px;text-align:left} .sev2-wf-odo{display:inline-flex;align-items:flex-end;justify-content:flex-start;line-height:1;font-variant-numeric:tabular-nums} .sev2-odo-mount{display:inline-flex;align-items:flex-end} .sev2-odo-reel{ display:inline-block;height:1em;overflow:hidden;color:var(--sev2-brand); font-size:48px;line-height:1;letter-spacing:-.016em;font-weight:700; } .sev2-odo-strip{display:flex;flex-direction:column} .sev2-odo-digit{height:1em;line-height:1;text-align:center;min-width:.62em} .sev2-odo-comma,.sev2-odo-t{color:var(--sev2-brand);font-size:48px;line-height:1;letter-spacing:-.016em;font-weight:700} .sev2-odo-dollar{color:var(--sev2-ink-2);font-size:22px;line-height:1;font-weight:700;display:inline-block;transform:translateY(-.22em)} @keyframes sev2-odoPop{0%{opacity:0;transform:translateY(.5em) scale(.55)}55%{opacity:1}100%{opacity:1;transform:none}} @media (max-width:680px){.sev2-odo-reel,.sev2-odo-comma,.sev2-odo-t{font-size:38px}} .sev2-wf-divider{ display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px; min-height:80px;padding:0 24px;background:var(--sev2-bg-mute); } .sev2-wf-divider-label{ font-family:var(--sev2-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--sev2-brand-ink);font-weight:700; } .sev2-wf-divider-note{font-family:var(--sev2-mono);font-size:10px;letter-spacing:.04em;color:var(--sev2-ink-3)} .sev2-cost-ticker{ position:relative;overflow:hidden;display:flex;align-items:center;min-height:62px; background:var(--sev2-brand-tint);border-left:3px solid var(--sev2-brand); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .sev2-cost-ticker-track{ display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap; will-change:transform;animation:sev2-ticker 30s linear infinite; } .sev2-cost-ticker:hover .sev2-cost-ticker-track{animation-play-state:paused} .sev2-ct-item{display:inline-flex;align-items:baseline;gap:13px;padding:0 6px} .sev2-ct-val{font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--sev2-brand);line-height:1} .sev2-ct-label{font-size:14px;color:var(--sev2-ink-2)} .sev2-ct-dot{width:6px;height:6px;border-radius:50%;background:var(--sev2-brand);opacity:.55;margin:0 30px;flex:0 0 auto;align-self:center} @keyframes sev2-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:820px){.sev2-world{grid-template-columns:1fr;gap:32px}} /* =============================== SOLUTIONS ============================== */ .sev2-sol-feature{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center; border:1px solid var(--sev2-line); border-radius:var(--sev2-r-xl);overflow:hidden;background:#fff;box-shadow:var(--sev2-sh-1); margin-bottom:32px; } .sev2-sol-feature--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)} /* Image is a fixed 3:2 frame, inset and vertically centred against the copy — the same size on every card regardless of how much text the body carries. `cover` keeps the frame full (no letterbox). */ .sev2-sol-feature .sev2-media{ position:relative;aspect-ratio:3/2;min-height:0;overflow:hidden; margin:clamp(16px,2.2vw,26px);border-radius:14px;background:var(--sev2-bg-soft); box-shadow:0 22px 48px -26px rgba(10,12,11,.28); } .sev2-sol-feature .sev2-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .sev2-sol-feature:hover .sev2-media img{transform:scale(1.04)} .sev2-sol-feature .sev2-body{ padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center;order:-1; } .sev2-sol-feature--rev .sev2-body{order:1} .sev2-sol-feature--rev .sev2-media{order:0} .sev2-sol-feature h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;margin:14px 0 12px} .sev2-sol-text{font-size:15.5px;color:var(--sev2-ink-2);line-height:1.55;max-width:52ch} /* Feature chips — one pill per line: a colour dot (icon) + the bold label + the middot list. `For` and `Brands` carry their own colour + mark; every other label (capability) stays brand teal. Pills never wrap — a too-long one ellipsises rather than breaking onto a second line. */ .sev2-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:22px 0 26px;max-width:100%} .sev2-chip{ display:inline-flex;align-items:center;gap:9px;max-width:100%; font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.02em;line-height:1.35; color:var(--sev2-ink-2);white-space:nowrap;overflow:hidden; background:var(--sev2-bg-soft);border:1px solid var(--sev2-line);border-radius:999px; padding:5px 15px 5px 5px; } .sev2-chip-txt{overflow:hidden;text-overflow:ellipsis;min-width:0} .sev2-chip b{font-weight:600} .sev2-chip-ico{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%;color:#fff; } .sev2-chip-ico svg{width:12px;height:12px;fill:currentColor;display:block} .sev2-chip--cap .sev2-chip-ico{background:var(--sev2-brand)} .sev2-chip--for .sev2-chip-ico{background:#5B5BD6} .sev2-chip--brand .sev2-chip-ico{background:#B9822B} .sev2-chip--cap{border-color:rgba(0,156,166,.28)} .sev2-chip--for{border-color:rgba(91,91,214,.26)} .sev2-chip--brand{border-color:rgba(185,130,43,.30)} .sev2-chip--cap b{color:var(--sev2-brand-ink)} .sev2-chip--for b{color:#4A4AC0} .sev2-chip--brand b{color:#8A5F1C} .sev2-sol-links{display:flex;gap:22px;flex-wrap:wrap} .sev2-sol-card-eyebrow{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--sev2-brand-deep);font-weight:700; } .sev2-gold-std{color:#8A6D1D} .sev2-sol-aside-eyebrow{margin:clamp(36px,4.5vw,56px) 0 14px} .sev2-sol-aside .sev2-sol-feature{margin-bottom:0} .sev2-sol-strip-brands{display:flex;flex-direction:column;gap:8px;margin:20px 0 24px} .sev2-sol-brands{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .sev2-sol-pill{ display:inline-flex;padding:5px 12px;border-radius:7px;background:var(--sev2-bg-mute); color:var(--sev2-ink-2);font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.04em; text-transform:uppercase;font-weight:500; } @media(max-width:820px){ .sev2-sol-feature,.sev2-sol-feature--rev{grid-template-columns:1fr} .sev2-sol-feature .sev2-media{aspect-ratio:16/10} .sev2-sol-feature .sev2-body,.sev2-sol-feature--rev .sev2-body{order:-1} .sev2-sol-feature .sev2-media,.sev2-sol-feature--rev .sev2-media{order:0} } /* ============================= ARCHITECTURE ============================= */ .sev2-arch{ background:radial-gradient(1000px 600px at 88% 0%,rgba(0,156,166,.16),transparent 55%),var(--sev2-dark); color:var(--sev2-don); } .sev2-arch .sev2-h2{color:#fff} .sev2-arch .sev2-eyebrow{color:var(--sev2-brand-lite)} .sev2-arch .sev2-lede{color:var(--sev2-don-2)} .sev2-layers{display:flex;flex-direction:column;gap:18px;position:relative} .sev2-layer{ border:1px solid var(--sev2-dline);border-radius:var(--sev2-r-xl); background:linear-gradient(180deg,var(--sev2-dark-2),rgba(17,26,27,.4)); padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;transition:border-color .25s; } .sev2-layer:hover{border-color:rgba(0,156,166,.5)} .sev2-layer-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px} .sev2-ln{font-family:var(--sev2-mono);font-size:12px;color:var(--sev2-brand-lite);letter-spacing:.1em} .sev2-layer h3{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.02em;color:#fff} .sev2-layer .sev2-role{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--sev2-don-3);margin-left:auto; } .sev2-layer-lede{font-size:15.5px;color:var(--sev2-don-2);line-height:1.55;max-width:70ch;margin:10px 0 20px} /* Collapsed summary row: attribute names + the expand button. */ .sev2-layer-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .sev2-attr-names{display:flex;flex-wrap:wrap;gap:8px;min-width:0} .sev2-attr-name{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--sev2-don-2);border:1px solid var(--sev2-dline-2);border-radius:999px;padding:6px 13px; } .sev2-attr-name::before{content:"";width:6px;height:6px;background:var(--sev2-brand);border-radius:2px;flex:0 0 auto} .sev2-layer.is-open .sev2-attr-names{display:none} .sev2-layer-toggle{ display:inline-flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto; background:transparent;border:1px solid var(--sev2-dline-2);border-radius:999px; color:var(--sev2-don);cursor:pointer;padding:6px 6px 6px 15px; font-family:var(--sev2-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; transition:border-color .2s ease,color .2s ease; } .sev2-layer-toggle:hover,.sev2-layer-toggle:focus-visible{border-color:var(--sev2-brand-lite);color:#fff;outline:none} .sev2-layer-toggle-ico{ position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%; background:var(--sev2-brand);transition:transform .28s ease; } .sev2-layer-toggle-ico::before,.sev2-layer-toggle-ico::after{ content:"";position:absolute;inset:0;margin:auto;background:#04211f;border-radius:1px; } .sev2-layer-toggle-ico::before{width:10px;height:1.8px} .sev2-layer-toggle-ico::after{width:1.8px;height:10px;transition:transform .28s ease} .sev2-layer.is-open .sev2-layer-toggle-ico{transform:rotate(90deg)} .sev2-layer.is-open .sev2-layer-toggle-ico::after{transform:scaleY(0)} /* Expanding detail — grid-rows 0fr → 1fr so it slides open. */ .sev2-attrs-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease} .sev2-layer.is-open .sev2-attrs-wrap{grid-template-rows:1fr} .sev2-attrs{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; overflow:hidden;min-height:0; } .sev2-layer.is-open .sev2-attrs{padding-top:24px} .sev2-attrs--edit{grid-template-rows:none;overflow:visible;padding-top:24px} .sev2-attr{border-top:1px solid var(--sev2-dline);padding-top:16px} .sev2-attr h6{font-size:14px;font-weight:700;color:#fff;margin-bottom:7px;display:flex;align-items:center;gap:8px} .sev2-attr h6::before{content:"";width:7px;height:7px;background:var(--sev2-brand);border-radius:2px;flex:0 0 auto} .sev2-attr-text{font-size:13px;color:var(--sev2-don-2);line-height:1.5} @media(max-width:760px){.sev2-attrs{grid-template-columns:1fr}} /* =============================== COMPOUND =============================== */ .sev2-comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px} .sev2-comp-card{ background:var(--sev2-bg-soft);border:1px solid var(--sev2-line);border-radius:var(--sev2-r-lg); padding:30px;transition:transform .2s,box-shadow .25s; } .sev2-comp-card:hover{transform:translateY(-4px);box-shadow:var(--sev2-sh-2)} .sev2-comp-card .sev2-k{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--sev2-brand-ink);margin-bottom:16px; } .sev2-comp-card h4{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:12px} .sev2-comp-text{font-size:14.5px;color:var(--sev2-ink-2);line-height:1.55} .sev2-flywheel{ display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch; background:var(--sev2-dark);border-radius:var(--sev2-r-xl);padding:clamp(28px,3vw,44px); color:var(--sev2-don);position:relative;overflow:hidden; } .sev2-flywheel::before{ content:"";position:absolute;inset:0; background:radial-gradient(600px 400px at 50% 120%,rgba(0,156,166,.2),transparent 60%); } .sev2-flywheel > *{position:relative;z-index:1} .sev2-fk{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--sev2-brand-lite);margin-bottom:14px; } .sev2-fw-text{font-size:14.5px;color:var(--sev2-don-2);line-height:1.55} .sev2-fw-arrow{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; font-family:var(--sev2-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--sev2-don-3); } .sev2-fw-arrow .sev2-a{font-size:22px;color:var(--sev2-brand-lite)} @media(max-width:760px){ .sev2-comp-grid{grid-template-columns:1fr} .sev2-flywheel{grid-template-columns:1fr} .sev2-fw-arrow{flex-direction:row;transform:rotate(90deg);padding:8px 0} } /* ============================== NORTH STAR ============================== */ .sev2-ns-lead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:44px} .sev2-ns-lead .sev2-h2{max-width:18ch;margin-top:18px} .sev2-ns-lead .sev2-side{max-width:34ch} .sev2-ns-lead .sev2-side .sev2-k{ font-family:var(--sev2-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--sev2-brand-ink);margin-bottom:10px; } .sev2-side-text{font-size:16px;color:var(--sev2-ink-2);line-height:1.5} .sev2-ns-panel{ display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--sev2-line); border-radius:var(--sev2-r-lg);overflow:hidden;box-shadow:var(--sev2-sh-1); } .sev2-ns-item{display:flex;flex-direction:column} .sev2-ns-item + .sev2-ns-item{border-left:1px solid var(--sev2-line)} .sev2-ns-item .sev2-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sev2-bg-mute)} .sev2-ns-item .sev2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sev2-ns-item .sev2-body{padding:22px 20px} .sev2-ns-item .sev2-k{ font-family:var(--sev2-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--sev2-brand-ink);margin-bottom:9px; } .sev2-ns-item h4{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.18;margin-bottom:9px} .sev2-ns-text{font-size:13.5px;color:var(--sev2-ink-2);line-height:1.5} @media(max-width:900px){ .sev2-ns-panel{grid-template-columns:repeat(2,1fr)} .sev2-ns-item + .sev2-ns-item{border-left:0} .sev2-ns-item{border-top:1px solid var(--sev2-line)} .sev2-ns-item:nth-child(1),.sev2-ns-item:nth-child(2){border-top:0} .sev2-ns-item:nth-child(even){border-left:1px solid var(--sev2-line)} } @media(max-width:520px){ .sev2-ns-panel{grid-template-columns:1fr} .sev2-ns-item{border-left:0!important} .sev2-ns-item:nth-child(1){border-top:0} .sev2-ns-item + .sev2-ns-item{border-top:1px solid var(--sev2-line)} } /* ========================== STORY / NEWS CARDS ========================== */ .sev2-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .sev2-xcard{ border:1px solid var(--sev2-line);border-radius:var(--sev2-r-lg);overflow:hidden;background:#fff; box-shadow:var(--sev2-sh-1);display:flex;flex-direction:column; transition:transform .2s,box-shadow .25s;text-decoration:none;color:inherit; } .sev2-xcard:hover{transform:translateY(-5px);box-shadow:var(--sev2-sh-2),var(--sev2-glow)} .sev2-xcard .sev2-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d2b2e} .sev2-xcard .sev2-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .sev2-xcard:hover .sev2-media img{transform:scale(1.05)} .sev2-xcard .sev2-play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff; font-size:30px;text-shadow:0 2px 10px rgba(0,0,0,.5);z-index:2; } .sev2-xcard .sev2-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .sev2-xmeta{display:flex;gap:10px;align-items:center;font-family:var(--sev2-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase} .sev2-xmeta .sev2-c{color:var(--sev2-brand-ink);font-weight:500} .sev2-xmeta .sev2-d{color:var(--sev2-ink-3)} .sev2-xcard h4{font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.28} .sev2-xtext{font-size:13.5px;color:var(--sev2-ink-2);line-height:1.5;flex:1} @media(max-width:820px){.sev2-cards-3{grid-template-columns:1fr}} /* ================================ EXPERTS =============================== */ .sev2-exp-carousel{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .sev2-exp-track{display:flex;width:max-content;animation:sev2-mq 52s linear infinite} .sev2-exp-carousel:hover .sev2-exp-track{animation-play-state:paused} .sev2-exp-set{display:flex;gap:18px;padding-right:18px} .sev2-exp{ flex:0 0 340px;width:340px;border:1px solid var(--sev2-line);border-radius:var(--sev2-r-lg); padding:26px;background:#fff;box-shadow:var(--sev2-sh-1);transition:transform .2s,box-shadow .25s; } .sev2-exp:hover{transform:translateY(-4px);box-shadow:var(--sev2-sh-2)} .sev2-av{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center; font-family:var(--sev2-mono);font-weight:500;font-size:15px;color:#fff; background:linear-gradient(135deg,var(--sev2-brand),var(--sev2-brand-deep)); margin-bottom:18px;letter-spacing:.02em; } .sev2-exp:nth-child(3n-1) .sev2-av{background:linear-gradient(135deg,var(--sev2-coral),var(--sev2-coral-deep))} .sev2-exp:nth-child(3n) .sev2-av{background:linear-gradient(135deg,var(--sev2-dark-3),var(--sev2-ink))} .sev2-exp h4{font-size:17px;font-weight:700;letter-spacing:-.01em} .sev2-exp .sev2-role{ font-family:var(--sev2-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--sev2-brand-ink);margin:5px 0 12px; } .sev2-exp-text{font-size:13.5px;color:var(--sev2-ink-2);line-height:1.5} @keyframes sev2-mq{to{transform:translateX(-50%)}} @media(max-width:600px){.sev2-exp{flex:0 0 290px;width:290px}} /* ============================== CLOSING CTA ============================= */ .sev2-cta{ background: radial-gradient(1100px 640px at 82% -14%,rgba(0,156,166,.42),transparent 60%), radial-gradient(820px 520px at 8% 118%,rgba(255,150,139,.24),transparent 62%), linear-gradient(180deg,#060809 0%,#0B1214 52%,#060809 100%),var(--sev2-dark); color:var(--sev2-don);text-align:center;position:relative;overflow:hidden; } .sev2-cta::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 72%); mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 72%); } .sev2-cta::after{ content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%); width:min(920px,86vw);height:340px;pointer-events:none;filter:blur(12px); background:radial-gradient(closest-side,rgba(0,156,166,.20),transparent 70%); } .sev2-cta > .sev2-wrap{position:relative;z-index:1} .sev2-cta .sev2-eyebrow{color:var(--sev2-brand-lite)} .sev2-cta h2{font-size:clamp(34px,5.5vw,72px);font-weight:700;letter-spacing:-.018em;line-height:1;color:#fff;margin:16px 0 20px} .sev2-cta h2 em{font-style:italic;font-weight:300;color:var(--sev2-brand-lite);text-shadow:0 0 44px rgba(0,156,166,.45)} .sev2-cta-lede{font-size:clamp(16px,1.4vw,19px);color:var(--sev2-don-2);line-height:1.6;max-width:58ch;margin:0 auto 34px} .sev2-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .sev2-cta .sev2-btn--brand{color:#fff;box-shadow:0 18px 48px -14px rgba(0,156,166,.55)} .sev2-cta .sev2-btn--ghost{color:#fff;border-color:var(--sev2-dline-2)} .sev2-cta .sev2-btn--ghost:hover{background:#fff;color:var(--sev2-dark);border-color:#fff} .sev2-cta-note{ font-family:var(--sev2-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--sev2-don-3);margin-top:30px; } /* ============================ REDUCED MOTION ============================ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .sev2-hero-vis::after,.sev2-vchip .sev2-dot, .sev2-cost-ticker-track,.sev2-exp-track{animation:none!important} .sev2-exp-carousel{overflow-x:auto;-webkit-mask-image:none;mask-image:none} .sev2-btn:hover,.sev2-xcard:hover,.sev2-comp-card:hover,.sev2-exp:hover,.sev2-latest:hover{transform:none!important} .sev2-sol-feature:hover .sev2-media img,.sev2-xcard:hover .sev2-media img{transform:none!important} } /* ============================ EDIT MODE (bricks) ======================== */ /* Dark sections keep the editable widgets readable, and the hover-only or animated layouts collapse to plain stacks the editor can actually click. */ .homev2-editmode .sev2-hero, .homev2-editmode .sev2-arch, .homev2-editmode .sev2-cta, .homev2-editmode .sev2-flywheel{background:var(--sev2-dark-2)} .homev2-editmode .sev2-hero-vis{aspect-ratio:auto;min-height:120px;padding:12px} .homev2-editmode .sev2-hero-vis::after{display:none} .homev2-editmode .sev2-sol-feature .sev2-media, .homev2-editmode .sev2-ns-item .sev2-media, .homev2-editmode .sev2-xcard .sev2-media{position:static;min-height:0;aspect-ratio:auto;margin:0;padding:8px;background:#fff;box-shadow:none} .homev2-editmode .sev2-cards-3, .homev2-editmode .sev2-ns-panel, .homev2-editmode .sev2-comp-grid, .homev2-editmode .sev2-trust-stats, .homev2-editmode .sev2-attrs{display:block} .homev2-editmode .sev2-section{padding:24px 0} /* Chips carry the wysiwyg editable in editmode — no icon dot, block layout. */ .homev2-editmode .sev2-chips{display:block} .homev2-editmode .sev2-chip{display:block;white-space:normal;padding:6px 12px} .sev2-foot-meta p { font-family: var(--sev2-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sev2-ink-3); line-height: 1.8; }