.format-details{max-width:1440px;margin:0 auto 110px;display:grid;gap:clamp(75px,9vw,140px)}
/* Clip decorative overflow without creating a scroll container above the pin. */
.phone-story{overflow:clip}
.format-switch{max-width:1440px;margin:0 auto 65px;position:relative}
.format-switch-pin{position:sticky;top:clamp(48px,7.5vh,80px)}
.format-switch-heading{text-align:center;margin:0 auto 48px}
.format-switch-heading h2{font:600 clamp(32px,3.5vw,52px)/1.1 var(--display);margin:0 0 20px;text-wrap:balance}
.format-switch-heading p{font:400 clamp(16px,1.35vw,21px)/1.6 var(--body);color:#596056;margin:0}
.format-switch-sticky{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,110px);align-items:center}
.format-switch-item{border-bottom:1px solid #dce1d7;padding:24px 0}
.format-switch-copy .format-switch-item h2{margin:0}
.format-switch-item button{display:block;padding:0;width:100%;text-align:left;background:none;border:0;cursor:pointer}
.format-switch-item button[aria-expanded=false] .signature-dot{opacity:.5}
.format-switch-item button:focus-visible{outline:2px solid #22acd0;outline-offset:8px}
.format-switch-panel{padding-top:24px;overflow:hidden;display:flow-root}
.format-switch-panel[hidden]{display:none}
.format-switch .sketch-tablet-portrait{width:min(100%,390px)}
.format-device-stack{position:relative;width:min(100%,420px);aspect-ratio:540/840;justify-self:center;overflow:clip}
.format-device-card{position:absolute;inset:18px;will-change:transform,opacity}
.format-device-card:nth-child(2){transform:translateY(110%);opacity:0}
.format-switch .format-device-card .sketch-tablet{width:100%}
@media(max-width:760px){.format-device-stack{width:min(70%,265px)}.format-device-card{inset:12px}}
@media(prefers-reduced-motion:reduce){.format-device-card{will-change:auto}}
@media(max-width:760px){.format-switch{margin-bottom:65px}.format-switch-sticky{grid-template-columns:1fr;gap:20px;min-height:0}.format-switch-heading{margin-bottom:30px}.format-switch .sketch-tablet-portrait{width:min(65%,240px)}.format-switch-item{padding:18px 0}}
.format-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,110px);align-items:center;color:#20251f}
.format-detail-copy h2{margin:0 0 30px;line-height:1.05}
.format-detail-copy .signature-dot{font-size:clamp(40px,4.5vw,64px);color:#20251f}
.format-detail-copy .signature-dot>b{color:#596056}
.format-detail-copy p{font:400 clamp(16px,1.35vw,21px)/1.6 var(--body);color:#596056;margin:0;max-width:580px}
.format-detail>img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:32px}
.format-detail-box>img{grid-column:1;grid-row:1;object-position:45% center}
.format-detail-box>.format-detail-copy{grid-column:2;grid-row:1}
.format-detail-entertain>img{object-position:60% center}
.format-detail-wow>img{object-position:55% center}
@media(max-width:760px){.format-details{gap:65px;margin-bottom:70px}.format-detail{grid-template-columns:1fr;gap:30px}.format-detail-box>img,.format-detail-box>.format-detail-copy{grid-column:auto;grid-row:auto}.format-detail-copy h2{margin-bottom:22px}.format-detail-copy .signature-dot{font-size:clamp(32px,8vw,40px)}.format-detail-copy p{font-size:15px;line-height:1.5}.format-detail>img{border-radius:24px}}
.sketch-tablet{width:100%;margin:0;transform:rotate(2deg);position:relative}
.sketch-tablet-body{position:relative;width:100%;aspect-ratio:800/540;isolation:isolate}
.sketch-tablet-body:before{content:'';position:absolute;inset:3% 2%;border-radius:26px;background:#252c27;box-shadow:7px 10px 0 #edf0e8;z-index:-1}
.tablet-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#859187;pointer-events:none}
.tablet-screen{position:absolute;left:4.5%;right:4.5%;top:8%;bottom:8%;overflow:hidden;border-radius:12px;background:#111713;display:flex;align-items:center}
.tablet-screen video{display:block;width:100%;height:100%;object-fit:contain}
.tablet-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:20px}
.tablet-controls button{background:#252c27;color:#f0efe9;border:1px solid #859187;border-radius:24px;min-width:38px;height:38px;padding:0 14px;font:500 12px var(--body);cursor:pointer}
.tablet-controls button:hover{background:#414b43}.tablet-controls button:focus-visible{outline:2px solid #22acd0;outline-offset:4px}
@media(max-width:760px){.sketch-tablet{width:96%;justify-self:center}.tablet-screen{border-radius:7px}}
.tablet-controls{width:fit-content;margin:22px auto 0;gap:4px;padding:6px;background:#edf0e8;border:1px solid #d9ded4;border-radius:40px;transform:rotate(-2deg)}
.tablet-controls button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#263025;transition:background .2s,transform .2s}
.tablet-controls button:hover{background:#dfff00;color:#20251f;transform:translateY(-2px)}
.tablet-controls button[aria-pressed=true]{background:#dfff00}
.tablet-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tablet-controls [data-tablet-info]{font:500 23px Georgia,serif;font-style:italic}
.tablet-info-dialog{position:fixed;inset:0;margin:auto;width:min(480px,calc(100vw - 40px));padding:45px 36px;border:1px solid #d9ded4;border-radius:28px;background:#fff;color:#20251f;box-shadow:0 24px 80px #15201430}
.tablet-info-dialog::backdrop{background:#15201466;backdrop-filter:blur(5px)}
.tablet-info-close{position:absolute;right:16px;top:12px;width:36px;height:36px;border-radius:50%;background:#edf0e8;color:#20251f;font-size:25px;cursor:pointer}
.tablet-info-eyebrow{font:500 11px var(--body);letter-spacing:1.5px;color:#718234}
.tablet-info-dialog h2{font:600 40px/1.1 var(--display);margin:18px 0}
.tablet-info-dialog p{font:400 17px/1.6 var(--body);margin:0;color:#596056}
@media(prefers-reduced-motion:reduce){.tablet-controls button{transition:none}}
/* White controls sit directly on the device bezel. */
.sketch-tablet .tablet-controls{position:absolute;right:5%;bottom:1.1%;margin:0;padding:0;gap:4px;width:auto;border:0;background:transparent;border-radius:0;transform:none;z-index:2}
.sketch-tablet .tablet-controls button{width:30px;height:30px;min-width:30px;padding:0;background:transparent;border:0;color:#fff}
.sketch-tablet .tablet-controls button:hover,.sketch-tablet .tablet-controls button[aria-pressed=true]{background:#ffffff20;color:#fff;transform:none}
.sketch-tablet .tablet-controls svg{width:18px;height:18px}
.sketch-tablet .tablet-controls [data-tablet-info]{font-size:21px}
.sketch-tablet-portrait{width:min(100%,370px);justify-self:center;transform:rotate(-2deg)}
.sketch-tablet-portrait .sketch-tablet-body{aspect-ratio:540/800}
.sketch-tablet-portrait .tablet-screen{left:7%;right:7%;top:6%;bottom:7%}
.format-detail-box>.sketch-tablet{grid-column:1;grid-row:1}
.sketch-tablet-portrait .tablet-controls{bottom:1.4%;right:7%}
@media(max-width:760px){.format-detail-box>.sketch-tablet{grid-column:auto;grid-row:auto}.sketch-tablet-portrait{width:min(85%,310px)}.sketch-tablet:not(.sketch-tablet-portrait) .tablet-screen{bottom:12%}.sketch-tablet .tablet-controls button{width:26px;height:26px;min-width:26px}.sketch-tablet .tablet-controls svg{width:16px;height:16px}}
/* Center controls within the lower bezel, with breathing room on both sides. */
.sketch-tablet:not(.sketch-tablet-portrait) .tablet-screen{bottom:12%}
.sketch-tablet .tablet-controls{bottom:7%;transform:translateY(50%)}
.sketch-tablet-portrait{width:min(100%,430px)}
.sketch-tablet-portrait .tablet-screen{bottom:10%}
.sketch-tablet-portrait .tablet-screen video{object-fit:cover;object-position:center}
.sketch-tablet.sketch-tablet-portrait .tablet-controls{bottom:5.6%;transform:translateY(50%)}
@media(max-width:760px){.sketch-tablet-portrait{width:min(92%,355px)}.sketch-tablet:not(.sketch-tablet-portrait) .tablet-screen{bottom:18%}.sketch-tablet:not(.sketch-tablet-portrait) .tablet-controls{bottom:10%;transform:translateY(50%)}}

/* Editorial copy for the one.entertain detail section. */
.format-detail-copy .format-copy-headline{font:600 clamp(27px,2.5vw,38px)/1.15 var(--display);margin:0 0 20px;max-width:580px;text-wrap:balance}
.format-copy-benefits{margin:24px 0 28px;padding-left:20px;max-width:580px;font:400 clamp(15px,1.2vw,18px)/1.55 var(--body);color:#596056;display:grid;gap:14px}
.format-copy-benefits strong{color:#20251f;font-weight:600}

/* Four concise reasons to add Formatwelten to an existing marketing plan. */
.format-benefits{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1440px;margin:105px auto 110px;padding:36px 0;color:#20251f}
.format-benefits::before,.format-benefits::after{content:"";position:absolute;pointer-events:none}
.format-benefits::before{left:-8%;right:-8%;top:5%;bottom:3%;z-index:-1;background:#f5f8e9;clip-path:polygon(0 25%,8% 18%,20% 5%,34% 0,48% 14%,62% 20%,77% 8%,91% 5%,100% 14%,100% 80%,87% 91%,72% 95%,59% 85%,45% 82%,31% 100%,15% 95%,0 86%);transform:rotate(-2deg)}
.format-benefits::after{left:-5%;right:-5%;top:22%;height:64%;z-index:-2;background:#e7efc9;opacity:.5;clip-path:polygon(0 25%,17% 0,36% 15%,55% 0,77% 25%,100% 5%,100% 80%,81% 100%,61% 80%,40% 98%,21% 83%,0 100%);transform:rotate(3deg)}
@media(min-width:1001px){
  .format-benefits::before{inset:0 -4%;transform:none;clip-path:none;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 350' preserveAspectRatio='none'%3E%3Cpath fill='%23f5f8e9' d='M-100 45 C180 -20 350 60 560 35 S850 -5 1100 45 L1100 300 C850 360 680 280 460 310 S150 355 -100 300Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
  .format-benefits::after{display:none}
}
.format-benefits article{min-width:0;padding:0 clamp(22px,2.5vw,40px);border-left:1px solid #bdc3b8}
.format-benefits article:first-child{border-left:0;padding-left:0}
.format-benefits article:last-child{padding-right:0}
.format-benefit-number{display:block;font:500 16px/1.2 var(--body);color:#777f70;margin-bottom:22px}
.format-benefits h3{font:600 clamp(24px,2.2vw,32px)/1.15 var(--display);margin:0 0 18px;text-wrap:balance}
.format-benefits p{font:400 clamp(15px,1.15vw,18px)/1.6 var(--body);color:#596056;margin:0}
@media(max-width:1000px){.format-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px;margin:90px auto 100px}.format-benefits article:nth-child(3){border-left:0;padding-left:0}.format-benefits article:nth-child(2){padding-right:0}}
@media(max-width:600px){.format-benefits{grid-template-columns:1fr;gap:0;margin:80px auto 90px;padding:30px 0}.format-benefits article,.format-benefits article:first-child,.format-benefits article:nth-child(3){padding:26px 0;border-left:0;border-top:1px solid #bdc3b8}.format-benefits article:first-child{border-top:0;padding-top:0}.format-benefit-number{margin-bottom:14px}.format-benefits h3{font-size:28px;margin-bottom:12px}}

/* Box and wow travel horizontally as complete video-and-copy slides. */
.format-switch .format-switch-dots{position:relative;inset:auto;transform:none;flex-direction:row;align-items:center;justify-content:center;height:24px;margin:0 auto 24px;gap:12px}
.format-switch-dots button{transition:width .2s,background .2s}
.format-switch .format-switch-dots button[aria-pressed=true]{height:8px;width:30px}
.format-switch .format-switch-dots button:focus-visible{outline:2px solid #22acd0;outline-offset:6px}
.format-horizontal-viewport{overflow:clip}
.format-horizontal-track{display:flex;width:200%;will-change:transform;align-items:stretch}
.format-horizontal-slide{flex:0 0 50%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,110px);align-items:center;padding:18px 24px}
.format-horizontal-slide .sketch-tablet-portrait{width:min(100%,390px);justify-self:center}
.format-horizontal-slide .format-switch-item{padding:0;border:0}
.format-horizontal-slide .format-switch-item h2{margin:0}
.format-horizontal-slide .format-switch-panel{overflow:visible;padding-top:24px}
.format-horizontal-slide .format-copy-benefits{margin-bottom:0}
@media(max-width:760px){.format-horizontal-slide{grid-template-columns:1fr;gap:22px;padding:12px 8px;align-content:start}.format-horizontal-slide .sketch-tablet-portrait{width:min(60%,220px)}.format-switch .format-switch-dots{margin-bottom:14px}.format-horizontal-slide .format-copy-benefits{font-size:14px;gap:9px}.format-horizontal-slide .format-copy-headline{font-size:25px}}
@media(prefers-reduced-motion:reduce){.format-horizontal-track{will-change:auto}}

/* The same flowing band as the four benefits, behind device and text. */
.format-horizontal-slide{position:relative;isolation:isolate}
.format-horizontal-slide::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:8%;right:8%;top:38%;height:clamp(220px,30vw,410px);background:#99a6ff;opacity:.25;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 350' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M-100 45 C180 -20 350 60 560 35 S850 -5 1100 45 L1100 300 C850 360 680 280 460 310 S150 355 -100 300Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
.format-horizontal-slide:nth-child(2)::before{background:#ff927b}
@media(max-width:760px){.format-horizontal-slide::before{left:3%;right:3%;top:170px;height:240px}}

.format-horizontal-slide .format-wow-landscape{width:100%;max-width:650px;justify-self:center}.format-wow-landscape .tablet-screen video{object-fit:cover}

/* Heading belongs to the four benefits; the band remains behind the blocks. */
.format-benefits-group{max-width:1440px;margin:105px auto 110px}
.format-benefits-title{max-width:1080px;margin:0 auto 50px;text-align:center;font:600 clamp(32px,3.5vw,52px)/1.1 var(--display);text-wrap:balance;color:#20251f}
#brand-stories-title{font-size:clamp(32px,3.5vw,52px);line-height:1.1}
.format-benefits-group .format-benefits{margin:0}
@media(max-width:1000px){.format-benefits-group{margin:90px auto 100px}}
@media(max-width:600px){.format-benefits-group{margin:80px auto 90px}.format-benefits-title{margin-bottom:28px}}

.format-benefits-title{margin-bottom:20px}
.format-benefits-subtitle{max-width:940px;margin:0 auto 50px;text-align:center;font:400 clamp(16px,1.35vw,21px)/1.6 var(--body);color:#596056}
@media(max-width:600px){.format-benefits-subtitle{margin-bottom:28px}}