.rv{opacity:0;transform:translateY(20px)}
.play .rv{animation:rin 1s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards}
@keyframes rin{to{opacity:1;transform:none}}
.ix{display:block;background:#FDFCF9;padding-top:var(--hh,100px);min-height:100vh;color:#151A1F;font-family:Inter,system-ui,sans-serif;overflow:hidden}
.ix:not(.on){display:none}
.ix *{box-sizing:border-box}
.ixw{padding:0 1.5in}
.ix .cw{padding-top:72px;padding-bottom:120px}
.ix .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.ey2{display:block;font:600 .8rem/1.4 Inter,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#7A5F28;margin:0 0 16px}
.ix h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.05;margin:0;font-size:clamp(2.3rem,4.2vw,3.9rem);color:#0A1D30;letter-spacing:-.01em}
.ix h1 em{font-style:italic;color:#7A5F28}
.cd{background:#fff;border:1px solid rgba(20,30,40,.09);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(10,20,30,.07);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.cd:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(10,20,30,.14)}
.cd .im{aspect-ratio:16/10;background-size:cover;position:relative}
.cd .bd{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.cd .nm{display:none}
.cd .ty{font:600 .72rem/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#7A5F28;margin-bottom:12px}
.cd h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.7rem;line-height:1.15;color:#0A1D30;margin:0 0 12px}
.cd p{font-size:.95rem;line-height:1.75;color:#3a4048;margin:0 0 22px}
.cd .lk{margin-top:auto;font:600 .72rem/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7A5F28}
.cd .lk:hover{color:#0A1D30}
.cd .pl{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:#C9A84C;color:#0A1D30;display:grid;place-items:center;font-style:normal;font-size:.85rem;padding-left:3px;box-shadow:0 8px 22px rgba(0,0,0,.28)}

/* 1 charged full bleed */
.gl{position:absolute;z-index:1;pointer-events:none;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;left:var(--gx,50%);top:var(--gy,20%);background:radial-gradient(circle,rgba(255,238,185,.62),rgba(255,238,185,0) 62%);mix-blend-mode:screen;opacity:0}
.ix.play .gl{animation:chg 2.6s ease-in-out infinite}
@keyframes chg{0%,100%{opacity:.25;transform:scale(.85)}45%{opacity:.95;transform:scale(1.1)}60%{opacity:.5;transform:scale(.95)}}
.ix1 .hero{position:relative;height:max(780px,88vh);background:url(../../img/insights-hero-tesla.webp) 50% 100%/cover;display:flex;align-items:flex-start;justify-content:center;text-align:center;padding:clamp(70px,11vh,120px) 1.5in 0}
.ix1 .hero:after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,rgba(7,21,36,.6),rgba(7,21,36,0))}
.ix1 .hero .t{max-width:760px;padding:34px 48px;position:relative}.ix1 .hero .t:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(closest-side,rgba(8,14,22,.6),rgba(8,14,22,.35) 60%,rgba(8,14,22,0))}.ix1 h1{font-size:calc(clamp(2rem,3.1vw,2.9rem) + 4pt)}
.ix1 .t,.ix4 .t{position:relative;z-index:2;max-width:880px;padding:0 24px}
.ix1 .ey2,.ix3 .ey2,.ix4 .ey2{color:#F2DE9C;text-shadow:0 1px 10px rgba(7,21,36,.85)}.ix1 h1,.ix3 h1,.ix4 h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}.ix1 h1 em,.ix3 h1 em,.ix4 h1 em{color:#F4D683}
.ix1 .cw{margin-top:calc(-1 * max(100vw * 22 / 1026, max(780px, 88vh) * 22 / 684));padding-top:0;position:relative;z-index:3}
@media(max-width:1100px){.ixw{padding:0 clamp(20px,5vw,64px)}.ix .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ix1 .hero,.ix3 .hero{padding:0 20px 150px}.ix3 .hero{padding-bottom:40px}.ix .grid{grid-template-columns:1fr}.ix h1{font-size:clamp(2rem,9vw,2.6rem)}.ix1 .hero{padding-bottom:170px}.ix2 .plate{border-width:8px}.ix3 .hero{height:460px}.ix4 .hero{height:360px}.ix4 .nm{font-size:3.2rem}.ix .cw{padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.gl{display:none}}
.ix .cd{text-decoration:none}
@media(max-width:760px){.ix1 .hero{padding:90px 20px 170px}.ix1 .hero .t{padding:24px 18px}}
.ix1 h1 em{display:block}

.ix1 .hero .ey2{font-size:.97rem}
@media(max-width:760px){.ix1 h1{font-size:calc(clamp(2rem,9vw,2.6rem) + 4pt)}}

/* Hero, picture, dark oval and headings now appear together once the picture has loaded */
.ix1 .hero{opacity:0}
.ix1.play .hero{animation:rin .9s ease-out forwards}
@media(prefers-reduced-motion:reduce){.ix1 .hero{opacity:1}}
