.oec{background:#fff;color:#111}.oec-hero{min-height:560px;background:radial-gradient(circle at 72% 40%,#35121f 0,transparent 27%),linear-gradient(105deg,#070506 0,#090607 55%,#160a10 100%);color:#fff}.oec-hero-in{min-height:560px;display:flex;align-items:center;justify-content:space-between}.oec-hero-in>div{width:min(620px,58%)}.oec-hero .oe-eyebrow{color:#fff!important;font-size:13px!important}.oec-hero h1{margin:12px 0;color:#fff;font:600 clamp(74px,8vw,120px)/.82 var(--oe-font-display);letter-spacing:-.06em}.oec-hero h1 em{color:var(--oe-pink);font-style:italic}.oec-hero b{font:700 11px var(--oe-font-body);letter-spacing:.28em}.oec-hero i{display:block;width:90px;height:2px;margin:25px 0;background:var(--oe-pink)}.oec-hero p{max-width:560px;font:400 18px/1.6 var(--oe-font-body)}.oec-hero aside{color:var(--oe-pink);font:italic 600 34px/1.25 var(--oe-font-display);transform:rotate(-5deg)}.oec-main{background:linear-gradient(#fff,#fff7fa)}.oec-socials,.oec-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.oec-socials>a{min-height:360px;padding:38px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:12px;background:linear-gradient(145deg,#271017,#080708);color:#fff;text-decoration:none;transition:.25s}.oec-socials>a:hover{transform:translateY(-6px)}.oec-socials strong{font:600 62px/1 Arial}.oec-socials h2{margin:17px 0 10px;color:#fff;font:600 30px var(--oe-font-display)}.oec-socials p{font:700 10px/1.6 var(--oe-font-body);letter-spacing:.16em}.oec-socials span{margin-top:20px;padding:14px 27px;border-radius:30px;background:var(--oe-pink);font:700 11px var(--oe-font-body)}.oec-links{margin-top:14px}.oec-links a{padding:31px 20px;text-align:center;background:#fff8fb;color:#111;text-decoration:none}.oec-links strong{display:block;color:var(--oe-pink);font-size:45px}.oec-links h3{margin:13px 0 6px;font:600 20px var(--oe-font-display)}.oec-links p{font:700 9px var(--oe-font-body);letter-spacing:.14em}.oec-links span{display:block;margin-top:24px;color:var(--oe-pink);font:700 11px var(--oe-font-body)}.oec-cta{padding:75px 0;background:radial-gradient(circle at 14% 40%,rgba(239,87,153,.11),transparent 30%),#fff7fa}.oec-cta-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.oec-cta h2{margin:10px 0;font:600 clamp(55px,6vw,84px)/.92 var(--oe-font-display);letter-spacing:-.05em}.oec-cta h2 em{color:var(--oe-pink);font-style:italic}.oec-form>div{display:flex;margin-top:24px}.oec-form input{flex:1;min-height:54px;padding:0 20px;border:0;border-radius:28px 0 0 28px}.oec-form button{min-width:180px;border:0;border-radius:28px;background:var(--oe-pink);color:#fff;font-weight:700}.oec-form small{display:block;margin-top:8px;color:#7b6972}.oec-polaroids{position:relative;height:310px}.oec-polaroids i{position:absolute;width:175px;height:220px;border:12px solid #fff;border-bottom-width:40px;box-shadow:0 14px 28px #0002;background:linear-gradient(145deg,#251016,#ef5799)}.oec-polaroids .p1{left:8%;top:15px;transform:rotate(-7deg)}.oec-polaroids .p2{left:35%;top:42px;transform:rotate(7deg)}.oec-polaroids .p3{left:63%;top:75px;transform:rotate(10deg)}.oec-polaroids b{position:absolute;right:0;top:0;color:var(--oe-pink);font:italic 600 27px var(--oe-font-display)}@media(max-width:900px){.oec-socials,.oec-links{grid-template-columns:1fr 1fr}.oec-hero aside{display:none}.oec-hero-in>div{width:70%}.oec-cta-in{grid-template-columns:1fr}}@media(max-width:600px){.oec-hero-in>div{width:100%}.oec-hero h1{font-size:68px}.oec-socials{grid-template-columns:1fr}.oec-links{grid-template-columns:1fr 1fr;gap:8px}.oec-form>div{display:block}.oec-form input,.oec-form button{width:100%;border-radius:28px;min-height:52px}.oec-form button{margin-top:9px}.oec-polaroids{height:260px;transform:scale(.86);transform-origin:left top}}

/* v1.2.0 — photographic Connect hero + refined cards */
.oec-hero{
 position:relative!important;
 min-height:clamp(620px,66vw,820px)!important;
 overflow:hidden!important;
 background:#080607!important;
 isolation:isolate!important;
}
.oec-hero:before{
 content:"";position:absolute;z-index:0;inset:0;
 background-image:url('connect-hero-erika.webp');
 background-repeat:no-repeat;background-size:auto 100%;background-position:right center;
}
.oec-hero:after{
 content:"";position:absolute;z-index:1;inset:0;
 background:
  linear-gradient(90deg,#070506 0%,rgba(7,5,6,.98) 28%,rgba(7,5,6,.82) 43%,rgba(7,5,6,.34) 58%,rgba(7,5,6,.05) 70%,rgba(7,5,6,.12) 100%),
  linear-gradient(180deg,transparent 72%,rgba(7,5,6,.62) 100%);
 pointer-events:none;
}
.oec-hero-in{position:relative!important;z-index:2!important;min-height:clamp(620px,66vw,820px)!important}
.oec-hero-in>div{width:min(620px,48%)!important}
.oec-hero aside{position:relative;z-index:3;margin-right:1vw;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.oec-hero p{max-width:530px!important}

/* Real inline brand artwork: consistent sizing/strokes without external font dependency. */
.oec-socials .oec-brand-icon{display:flex!important;width:66px;height:66px;align-items:center;justify-content:center;color:#fff!important}
.oec-socials .oec-brand-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oec-socials .oec-brand-icon svg .fill{fill:currentColor;stroke:none}
.oec-socials .instagram .oec-brand-icon{color:#ff5ba7!important}
.oec-socials .youtube .oec-brand-icon{color:#ff4d61!important}
.oec-socials>a{position:relative;overflow:hidden;min-height:390px!important}
.oec-socials>a:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(239,87,153,.16),transparent 35%);opacity:.7;pointer-events:none}
.oec-socials>a>*{position:relative;z-index:1}

/* Secondary links: larger, clearer editorial hierarchy. */
.oec-links a{padding:38px 22px 34px!important;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.oec-links strong{font-size:54px!important;line-height:1!important}
.oec-links h3{margin:17px 0 8px!important;font-size:clamp(22px,1.65vw,28px)!important;line-height:1.05!important;letter-spacing:-.025em!important}
.oec-links p{margin:0!important;font-size:11px!important;line-height:1.45!important;letter-spacing:.16em!important}
.oec-links span{margin-top:27px!important;font-size:12px!important;letter-spacing:.04em!important}

/* Desktop focal-point tuning */
@media(min-width:1600px){
 .oec-hero:before{background-size:auto 100%;background-position:82% center}
}
@media(min-width:1001px) and (max-width:1350px){
 .oec-hero{min-height:680px!important}.oec-hero-in{min-height:680px!important}
 .oec-hero:before{background-position:88% center}
 .oec-hero-in>div{width:50%!important}
}
/* Tablet */
@media(max-width:1000px) and (min-width:601px){
 .oec-hero{min-height:680px!important}.oec-hero-in{min-height:680px!important}
 .oec-hero:before{background-size:auto 100%;background-position:88% center}
 .oec-hero:after{background:linear-gradient(90deg,#070506 0%,rgba(7,5,6,.94) 34%,rgba(7,5,6,.55) 58%,rgba(7,5,6,.14) 78%)}
 .oec-hero-in>div{width:58%!important}
}
/* Mobile: centered portrait, vertical dissolve into copy */
@media(max-width:600px){
 .oec-hero{min-height:800px!important;display:flex!important;align-items:flex-end!important}
 .oec-hero:before{height:570px;bottom:auto;background-size:auto 570px;background-position:center top}
 .oec-hero:after{background:
  linear-gradient(180deg,rgba(7,5,6,.03) 0%,rgba(7,5,6,.12) 42%,rgba(7,5,6,.70) 62%,#070506 76%,#070506 100%)}
 .oec-hero-in{min-height:800px!important;align-items:flex-end!important;padding-bottom:54px}
 .oec-hero-in>div{width:100%!important}
 .oec-hero aside{display:none!important}
 .oec-socials>a{min-height:330px!important}
 .oec-links a{min-height:190px;padding:28px 12px!important}
 .oec-links strong{font-size:44px!important}
 .oec-links h3{font-size:20px!important}
 .oec-links p{font-size:9px!important}
 .oec-links span{font-size:10px!important}
}


/* v1.2.1 — restore original Connect hero proportions.
   The supplied portrait is treated as hero background imagery; hero height is NOT expanded. */
.oec-hero{
 position:relative!important;
 min-height:560px!important;
 height:560px!important;
 overflow:hidden!important;
 background:#080607!important;
 isolation:isolate!important;
}
.oec-hero:before{
 content:""!important;
 position:absolute!important;
 z-index:0!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 background-image:url('connect-hero-erika.webp')!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
 background-position:72% 43%!important;
 transform:none!important;
}
/* Dark editorial canvas on left, dissolving smoothly into the photograph. */
.oec-hero:after{
 content:""!important;
 position:absolute!important;
 z-index:1!important;
 inset:0!important;
 background:
  linear-gradient(90deg,#070506 0%,rgba(7,5,6,.99) 24%,rgba(7,5,6,.92) 36%,rgba(7,5,6,.68) 48%,rgba(7,5,6,.30) 59%,rgba(7,5,6,.08) 70%,rgba(7,5,6,.03) 100%)!important;
 pointer-events:none!important;
}
.oec-hero-in{
 position:relative!important;
 z-index:2!important;
 min-height:560px!important;
 height:560px!important;
 display:flex!important;
 align-items:center!important;
}
.oec-hero-in>div{width:min(600px,52%)!important}
.oec-hero aside{position:relative!important;z-index:3!important}

/* Large/standard desktop keep the original 560px hero. */
@media(min-width:1001px){
 .oec-hero,.oec-hero-in{height:560px!important;min-height:560px!important}
 .oec-hero:before{background-size:cover!important;background-position:72% 43%!important}
}
/* Tablet: same visual proportion, slightly adjusted focal point. */
@media(max-width:1000px) and (min-width:601px){
 .oec-hero,.oec-hero-in{height:560px!important;min-height:560px!important}
 .oec-hero:before{background-size:cover!important;background-position:68% 42%!important}
 .oec-hero:after{background:linear-gradient(90deg,#070506 0%,rgba(7,5,6,.96) 31%,rgba(7,5,6,.70) 49%,rgba(7,5,6,.24) 67%,rgba(7,5,6,.04) 100%)!important}
 .oec-hero-in>div{width:60%!important}
}
/* Mobile: restore compact hero rather than 800px portrait treatment.
   Image remains a cover background and copy gets a bottom/left readability fade. */
@media(max-width:600px){
 .oec-hero,.oec-hero-in{height:560px!important;min-height:560px!important}
 .oec-hero:before{
  inset:0!important;width:100%!important;height:100%!important;
  background-size:cover!important;
  background-position:58% 42%!important;
 }
 .oec-hero:after{
  background:
   linear-gradient(180deg,rgba(7,5,6,.06) 0%,rgba(7,5,6,.18) 35%,rgba(7,5,6,.72) 67%,#070506 100%),
   linear-gradient(90deg,rgba(7,5,6,.72) 0%,rgba(7,5,6,.20) 58%,rgba(7,5,6,.04) 100%)!important;
 }
 .oec-hero-in{align-items:flex-end!important;padding-bottom:34px!important}
 .oec-hero-in>div{width:100%!important}
 .oec-hero h1{font-size:62px!important}
 .oec-hero p{font-size:14px!important;line-height:1.5!important;margin-bottom:0!important}
}


/* v1.2.2 — Connect hero framing refinement.
   Keep original 560px hero, remove right-side script, show more of Erika's upper body. */
.oec-hero aside{display:none!important}
.oec-hero:before{
 background-size:auto 118%!important;
 background-position:82% 39%!important;
}
/* Extend the photo naturally into the remaining hero canvas while preserving text contrast. */
.oec-hero:after{
 background:
  linear-gradient(90deg,#070506 0%,rgba(7,5,6,.99) 24%,rgba(7,5,6,.92) 35%,rgba(7,5,6,.66) 47%,rgba(7,5,6,.26) 59%,rgba(7,5,6,.06) 69%,rgba(7,5,6,0) 82%)!important;
}
.oec-hero-in{justify-content:flex-start!important}
.oec-hero-in>div{width:min(590px,49%)!important}

/* Ultra-wide: don't over-enlarge the portrait. */
@media(min-width:1700px){
 .oec-hero:before{background-size:auto 116%!important;background-position:79% 39%!important}
}
/* Laptop: bring face toward center-right while retaining shoulders/upper body. */
@media(min-width:1001px) and (max-width:1400px){
 .oec-hero:before{background-size:auto 120%!important;background-position:86% 40%!important}
 .oec-hero-in>div{width:50%!important}
}
/* Tablet: slightly smaller portrait to preserve more upper body. */
@media(max-width:1000px) and (min-width:601px){
 .oec-hero:before{background-size:auto 112%!important;background-position:86% 40%!important}
 .oec-hero-in>div{width:57%!important}
}
/* Mobile: center Erika's face and preserve more torso within the original compact hero. */
@media(max-width:600px){
 .oec-hero:before{
  background-size:auto 105%!important;
  background-position:55% 38%!important;
 }
 .oec-hero:after{
  background:
   linear-gradient(180deg,rgba(7,5,6,.03) 0%,rgba(7,5,6,.10) 34%,rgba(7,5,6,.62) 64%,#070506 100%),
   linear-gradient(90deg,rgba(7,5,6,.50) 0%,rgba(7,5,6,.12) 56%,rgba(7,5,6,0) 100%)!important;
 }
}


/* v1.2.3 — FULL-BLEED CONNECT HERO
   Photo fills/spreads across the complete hero. No repeat. No portrait "slab".
   Edge masks integrate the photograph into the dark editorial canvas. */
.oec-hero{
 position:relative!important;
 width:100%!important;
 height:560px!important;
 min-height:560px!important;
 overflow:hidden!important;
 background:#070506!important;
 isolation:isolate!important;
}
.oec-hero:before{
 content:""!important;
 position:absolute!important;
 z-index:0!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 background-image:url('connect-hero-erika.webp')!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
 background-position:64% 39%!important;
 transform:none!important;
}
/* Integrates image into the copy area without creating a visible image boundary. */
.oec-hero:after{
 content:""!important;
 position:absolute!important;
 z-index:1!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 background:
  linear-gradient(90deg,
   #070506 0%,
   rgba(7,5,6,.99) 19%,
   rgba(7,5,6,.92) 31%,
   rgba(7,5,6,.72) 41%,
   rgba(7,5,6,.42) 50%,
   rgba(7,5,6,.17) 59%,
   rgba(7,5,6,.04) 68%,
   rgba(7,5,6,0) 78%),
  linear-gradient(180deg,
   rgba(7,5,6,.08) 0%,
   rgba(7,5,6,0) 22%,
   rgba(7,5,6,0) 75%,
   rgba(7,5,6,.26) 100%)!important;
 pointer-events:none!important;
}
.oec-hero-in{
 position:relative!important;
 z-index:2!important;
 height:560px!important;
 min-height:560px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
}
.oec-hero-in>div{width:min(600px,48%)!important}
.oec-hero aside{display:none!important}

/* Ultra-wide: full bleed remains cover, face sits center-right. */
@media(min-width:1700px){
 .oec-hero:before{background-size:cover!important;background-position:66% 38%!important}
}
/* Standard desktop/laptop: preserve face + upper body while filling width. */
@media(min-width:1001px) and (max-width:1699px){
 .oec-hero:before{background-size:cover!important;background-position:63% 38%!important}
}
/* Tablet */
@media(max-width:1000px) and (min-width:601px){
 .oec-hero,.oec-hero-in{height:560px!important;min-height:560px!important}
 .oec-hero:before{background-size:cover!important;background-position:61% 38%!important}
 .oec-hero:after{background:
  linear-gradient(90deg,#070506 0%,rgba(7,5,6,.96) 27%,rgba(7,5,6,.70) 43%,rgba(7,5,6,.30) 58%,rgba(7,5,6,.05) 74%,transparent 86%),
  linear-gradient(180deg,transparent 72%,rgba(7,5,6,.28) 100%)!important}
 .oec-hero-in>div{width:58%!important}
}
/* Mobile: image still fills the complete hero, face centered higher, copy protected below. */
@media(max-width:600px){
 .oec-hero,.oec-hero-in{height:560px!important;min-height:560px!important}
 .oec-hero:before{
  inset:0!important;width:100%!important;height:100%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:54% 32%!important;
 }
 .oec-hero:after{
  background:
   linear-gradient(180deg,rgba(7,5,6,.03) 0%,rgba(7,5,6,.04) 34%,rgba(7,5,6,.30) 54%,rgba(7,5,6,.78) 72%,#070506 100%),
   linear-gradient(90deg,rgba(7,5,6,.34) 0%,rgba(7,5,6,.06) 58%,rgba(7,5,6,0) 100%)!important;
 }
 .oec-hero-in{align-items:flex-end!important;padding-bottom:32px!important}
 .oec-hero-in>div{width:100%!important}
}


/* v1.2.4 — focal-point correction only.
   Preserve v1.2.3 full-bleed cover/no-repeat/fades; move photograph DOWN so Erika's face clears the top crop. */
@media(min-width:1700px){
 .oec-hero:before{background-position:66% 52%!important}
}
@media(min-width:1001px) and (max-width:1699px){
 .oec-hero:before{background-position:63% 54%!important}
}
@media(max-width:1000px) and (min-width:601px){
 .oec-hero:before{background-position:61% 55%!important}
}
@media(max-width:600px){
 .oec-hero:before{background-position:54% 52%!important}
}


/* v1.2.5 — FACE VISIBILITY CORRECTION
   Portrait source + wide hero + background-size:cover creates large vertical overflow.
   A LOWER Y percentage moves the oversized background DOWN into view.
   Preserve full bleed, 560px height, cover, no-repeat, and existing fades. */
@media(min-width:1700px){
 .oec-hero:before{background-position:66% 18%!important}
}
@media(min-width:1001px) and (max-width:1699px){
 .oec-hero:before{background-position:63% 18%!important}
}
@media(max-width:1000px) and (min-width:601px){
 .oec-hero:before{background-position:61% 20%!important}
}
@media(max-width:600px){
 .oec-hero:before{background-position:54% 24%!important}
}


/* v1.2.6 — supplied photographs inside Connect CTA Polaroids */
.oec-polaroids .p1{
 background-image:url('connect-polaroid-1.webp')!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
 background-position:center 35%!important;
}
.oec-polaroids .p2{
 background-image:url('connect-polaroid-2.webp')!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
 background-position:center center!important;
}
.oec-polaroids .p3{
 background-image:url('connect-polaroid-3.webp')!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
 background-position:center 44%!important;
}
/* Keep the existing white Polaroid border and lower caption area visible. */
.oec-polaroids i{
 background-color:#fff!important;
 background-clip:padding-box!important;
}