/* Social content as one coherent campaign, presented in real responsive formats. */
.social{background:radial-gradient(ellipse at 78% 35%,#3f474325,transparent 52%),linear-gradient(135deg,#171c1d,#080b0d 72%);padding-block:clamp(95px,8vw,170px) clamp(85px,7vw,140px)}
.social-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 28%,#d3d4bf0b 49%,transparent 54%),repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#ffffff09 20%);mask-image:linear-gradient(#0007,#000 45%,#0007)}
.social-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,350px);align-items:end;gap:5%;margin-bottom:clamp(55px,6vw,110px)}
.social-intro h2{font-size:clamp(53px,5.2vw,112px);line-height:1.03;font-weight:450;letter-spacing:-.065em}
.social-intro h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em;color:#ece7d9}
.social-intro>p{font-size:clamp(14px,1.05vw,20px);line-height:1.75;color:#d4d7d0;max-width:350px;margin:0 0 5px}
.social-studio{display:grid;grid-template-columns:minmax(280px,.32fr) minmax(0,.68fr);gap:5%;align-items:center}
.social-offer{align-self:center;max-width:490px}
.social-overline{font-size:10px;letter-spacing:.15em;color:#d9d2bf;text-transform:uppercase}
.social-offer h3{font-size:clamp(41px,3.2vw,70px);font-weight:450;line-height:1.06;letter-spacing:-.065em;margin:20px 0 24px}
.social-offer h3 em{font-family:Georgia,serif;font-weight:400;color:#d8d2c2}
.social-offer>p{font-size:clamp(13px,.88vw,17px);line-height:1.85;color:#bec6c0;max-width:420px}
.social-capabilities{margin:36px 0 23px;border-top:1px solid #e5e7dd30}
.social-capabilities>div{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:13px 0;border-bottom:1px solid #e5e7dd24}
.social-capabilities span{grid-row:1/3;font-size:10px;color:#d5c7ae;letter-spacing:.08em;padding-top:4px}
.social-capabilities strong{font-size:clamp(14px,.9vw,18px);font-weight:500;color:#f4f5ef}
.social-capabilities small{font-size:clamp(11px,.72vw,14px);color:#aeb7b0;line-height:1.6}
.social-composition{min-width:0;padding:18px;border:1px solid #e0e5d552;border-radius:3px;background:linear-gradient(135deg,#dde0d51a,#1c252599 40%,#080d0ee8 74%,#dad8c414);box-shadow:inset 0 1px #fffff366,inset 1px 0 #ffffff22,0 30px 70px #0009;backdrop-filter:blur(12px);transform-style:preserve-3d}
.social-composition-top,.social-composition-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;color:#d5dbd1;font-size:9px;letter-spacing:.14em}
.social-composition-top{padding:4px 3px 17px;border-bottom:1px solid #e6e4d72e}
.social-composition-top>span:first-child{font-weight:700;font-size:12px;letter-spacing:.04em}
.social-composition-bottom{padding:17px 3px 3px;border-top:1px solid #e6e4d72e}
.social-composition-bottom b{font-weight:400;color:#aa9980;margin-inline:5px}
.social-composition-grid{display:grid;grid-template-columns:1.15fr .75fr .8fr;gap:12px;height:clamp(420px,29vw,660px);padding-block:14px}
.social-format{position:relative;min-width:0;overflow:hidden;border:1px solid #fff6;box-shadow:0 15px 35px #0008;background:#19211b;color:#f7f4e9;transition:transform .45s ease,box-shadow .45s ease}
.social-format:hover{transform:translateY(-8px);box-shadow:0 25px 45px #0009}
.social-format>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.social-post>img{object-position:42% center}
.social-reel>img{object-position:68% center}
.social-post:after,.social-reel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#06100dd6,transparent 55%),linear-gradient(180deg,#06100d71,transparent 28%);pointer-events:none}
.social-format-top,.social-format-foot,.social-format-copy,.social-reel-play{position:absolute;z-index:2}
.social-format-top{top:17px;left:17px;right:17px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:clamp(7px,.47vw,10px);letter-spacing:.1em;font-weight:700}
.social-format-copy{left:7%;right:5%;bottom:15%}
.social-format-copy small{display:block;font-size:clamp(7px,.48vw,10px);letter-spacing:.17em;margin-bottom:15px}
.social-format-copy strong{display:block;font-size:clamp(30px,3.1vw,69px);line-height:1;letter-spacing:-.055em;font-weight:400}
.social-format-copy em{font-family:Georgia,serif;font-weight:400}
.social-format-foot{left:7%;right:7%;bottom:18px;display:flex;justify-content:space-between;border-top:1px solid #ffffff61;padding-top:12px;font-size:clamp(7px,.46vw,10px);letter-spacing:.1em}
.social-reel .social-format-copy strong{font-size:clamp(27px,2.15vw,49px)}
.social-reel-play{display:grid;place-items:center;left:50%;top:36%;translate:-50% -50%;width:54px;height:54px;border:1px solid #fff9;border-radius:50%;backdrop-filter:blur(5px);font-size:15px;padding-left:3px}
.social-story{background:#d5dacd;color:#1e2d26}
.social-story .social-format-top,.social-story .social-format-foot{border-color:#20382d50;color:#26372d}
.social-story .social-format-copy{bottom:16%}
.social-story .social-format-copy strong{font-size:clamp(28px,2.65vw,59px)}
.social-story-arch{position:absolute;left:13%;right:13%;top:13%;height:48%;overflow:hidden;border-radius:48% 48% 0 0/35% 35% 0 0}
.social-story-arch img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.social-footnote{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e2e3d32c;margin-top:45px;padding-top:17px;color:#aeb9af;font-size:9px;letter-spacing:.11em}

/* The site itself is shown on proportioned desktop, tablet and phone screens. */
.device-theatre{height:clamp(500px,43vw,690px)}
.device-desktop{width:min(57%,1040px);height:auto;aspect-ratio:16/10;left:2%;top:0;padding:11px 7px 17px}
.device-tablet{width:min(26%,460px);height:auto;aspect-ratio:3/4;left:55%;top:8%}
.device-mobile{width:min(12%,230px);height:auto;aspect-ratio:9/19.5;left:82%;top:17%;border-width:6px;border-radius:27px}
.device-mobile .mock-view{border-radius:20px}
.device .mock-view{height:100%;container-type:inline-size}
.device .site-vivid{position:relative;height:100%;width:100%;overflow:hidden;background:#171b1d;color:#fff;font-family:Arial,Helvetica,sans-serif}
.vivid-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.vivid-preview-shade{position:absolute;inset:0;background:linear-gradient(90deg,#030607a8,transparent 77%),linear-gradient(0deg,#0306079e,transparent 50%)}
.vivid-preview-nav,.vivid-preview-content,.vivid-preview-footer{position:absolute;z-index:1}
.vivid-preview-nav{left:4%;right:4%;top:4%;display:flex;align-items:center;gap:1.1cqi;font-size:1cqi;letter-spacing:.04em}
.vivid-preview-logo{font-family:Georgia,serif;font-size:3.7cqi;line-height:1;letter-spacing:-.3em;margin-right:.7cqi;color:#f6f4ec;text-shadow:0 1px 5px #000}
.vivid-preview-logo span{position:relative;left:-.25em}
.vivid-preview-wordmark{font-weight:700;white-space:nowrap}
.vivid-preview-wordmark sup{font-size:.55em}
.vivid-preview-links{margin-left:auto;font-size:.8cqi;white-space:nowrap}
.vivid-preview-nav-cta{border:1px solid #fff9;padding:.8cqi 1cqi;white-space:nowrap;font-size:.8cqi}
.vivid-preview-content{left:5%;right:6%;top:40%}
.vivid-preview-kicker{font-size:.75cqi;letter-spacing:.14em}
.vivid-preview-title{display:flex;flex-direction:column;line-height:1.08;letter-spacing:-.065em;margin-top:2cqi}
.vivid-preview-title strong{font-size:5.4cqi;font-weight:600;white-space:nowrap}
.vivid-preview-title span{font-size:3.8cqi;font-weight:300;white-space:nowrap}
.vivid-preview-content p{font-size:1cqi;line-height:1.5;max-width:36%;margin:1.6cqi 0;color:#f3f4ed}
.vivid-preview-button{display:inline-flex;gap:2cqi;align-items:center;background:linear-gradient(130deg,#fdfcf5,#c4c5bf 55%,#f3f1e8);color:#151819;padding:.9cqi 1cqi;font-size:.8cqi;font-weight:700;letter-spacing:.07em}
.vivid-preview-button b{font-size:1.5cqi;font-weight:400}
.vivid-preview-footer{left:5%;right:5%;bottom:4%;display:flex;justify-content:space-between;font-size:.65cqi;letter-spacing:.1em;border-top:1px solid #fff6;padding-top:1cqi}
.device-tablet .vivid-preview-nav,.device-mobile .vivid-preview-nav{top:5%}
.device-tablet .vivid-preview-links,.device-tablet .vivid-preview-nav-cta,.device-mobile .vivid-preview-links,.device-mobile .vivid-preview-nav-cta{display:none}
.device-tablet .vivid-preview-wordmark{font-size:2.1cqi}
.device-tablet .vivid-preview-logo{font-size:6cqi}
.device-tablet .vivid-preview-content{top:35%;left:6%}
.device-tablet .vivid-preview-title strong{font-size:7.7cqi;white-space:normal}
.device-tablet .vivid-preview-title span{font-size:6cqi}
.device-tablet .vivid-preview-content p{font-size:2.2cqi;max-width:74%}
.device-tablet .vivid-preview-kicker{font-size:1.6cqi}
.device-tablet .vivid-preview-button{font-size:1.6cqi;padding:1.5cqi}
.device-tablet .vivid-preview-footer{font-size:1cqi}
.device-mobile .vivid-preview-image{object-position:61% center}
.device-mobile .vivid-preview-shade{background:linear-gradient(0deg,#030607bb,transparent 70%),linear-gradient(90deg,#0306078c,transparent)}
.device-mobile .vivid-preview-logo{font-size:13cqi}
.device-mobile .vivid-preview-wordmark{font-size:3cqi}
.device-mobile .vivid-preview-content{top:40%;left:8%;right:8%}
.device-mobile .vivid-preview-kicker{font-size:2.3cqi;line-height:1.5}
.device-mobile .vivid-preview-title{margin-top:6cqi}
.device-mobile .vivid-preview-title strong{font-size:11cqi;white-space:normal}
.device-mobile .vivid-preview-title span{font-size:8cqi;white-space:normal}
.device-mobile .vivid-preview-content p{font-size:3.1cqi;max-width:100%;margin:5cqi 0}
.device-mobile .vivid-preview-button{font-size:2.5cqi;padding:3cqi}
.device-mobile .vivid-preview-button b{font-size:4cqi}
.device-mobile .vivid-preview-footer{font-size:1.6cqi;bottom:5%;display:block}
.device-mobile .vivid-preview-footer span:last-child{display:none}

@media(max-width:1199px){
  .social-studio{grid-template-columns:1fr;gap:45px}
  .social-offer{max-width:none}
  .social-capabilities{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
  .social-composition-grid{height:clamp(390px,54vw,560px)}
}
@media(max-width:999px){
  .device-theatre{height:clamp(350px,50vw,470px)}
  .device-desktop{width:64%;left:0;top:0}
  .device-tablet{width:29%;left:55%;top:12%}
  .device-mobile{width:14%;left:82%;top:23%}
}
@media(max-width:640px){
  .social{padding-block:82px}
  .social-intro{display:block;margin-bottom:40px}
  .social-intro h2{font-size:clamp(41px,10.2vw,56px)}
  .social-intro>p{margin-top:22px;font-size:14px}
  .social-offer h3{font-size:42px}
  .social-offer>p{font-size:14px}
  .social-capabilities{grid-template-columns:1fr;gap:0;margin-top:26px}
  .social-capabilities strong{font-size:16px}
  .social-capabilities small{font-size:12px}
  .social-composition{padding:12px;margin-inline:-10px}
  .social-composition-grid{display:flex;gap:12px;height:400px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .social-format{flex:0 0 73%;scroll-snap-align:center}
  .social-format-copy strong,.social-reel .social-format-copy strong,.social-story .social-format-copy strong{font-size:clamp(39px,11vw,58px)}
  .social-format-top,.social-format-foot{font-size:9px}
  .social-format-copy small{font-size:9px}
  .social-composition-bottom{font-size:7px}
  .social-composition-bottom span:first-child{display:none}
  .social-footnote{font-size:8px;line-height:1.5}
  .social-footnote span:last-child{display:none}
  .device-theatre{height:290px;margin-top:36px}
  .device-desktop{width:73%;left:0;top:0;padding:5px 3px 8px}
  .device-chin{height:8px}
  .device-stand{height:33px}
  .device-tablet{width:39%;left:37%;top:20%}
  .device-mobile{width:23%;left:73%;top:28%;border-width:3px;border-radius:15px}
  .device-mobile .mock-view{border-radius:11px}
  .mobile-island{height:4px;top:3px}
}
@media(prefers-reduced-motion:reduce){.social-format{transition:none}}