/* Full-bleed editorial photography, live typography and a compact proof of the product. */
.offering{container-type:inline-size;--hero-accent:#2349df;background:#e9e5dc}
.offering:after{inset:0;background:linear-gradient(180deg,rgba(252,249,243,.85) 0%,rgba(252,249,243,.65) 21%,transparent 46%,transparent 64%,rgba(14,18,14,.55) 100%);z-index:1}
.offering-images img{object-position:50% 50%;transition:opacity .8s ease,transform 8s ease;transform:scale(1.025)}
.offering[data-theme="intro"] .offering-images img,.offering[data-theme="editor"] .offering-images img{object-position:65% 50%}
.offering[data-theme="editor"]{--hero-accent:#d84227}
.offering[data-theme="manager"]{--hero-accent:#164b36}
.offering-copy{top:72px;bottom:auto;left:6%;right:5%;color:#181a17}
.offering-copy .eyebrow{color:var(--hero-accent);font-size:12px;letter-spacing:1.6px;font-weight:650;margin:0 0 14px}
.offering .offering-copy h1{font-size:clamp(37px,8.8cqw,70px);font-weight:500;letter-spacing:-.052em;line-height:1.04;max-width:none;margin:0 0 15px}
.offering .offering-copy h1 em{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.045em;color:var(--hero-accent)}
.offering-copy>p:last-child{color:#2c3029;font-size:clamp(15px,2.7cqw,19px);line-height:1.4;max-width:90%}
.offering-copy.changing{animation:hero-copy .65s cubic-bezier(.16,1,.3,1) both}
.hero-proof{position:absolute;inset:auto 6% 84px;height:clamp(205px,34cqw,290px);z-index:3;pointer-events:none}
.hero-request{position:absolute;left:0;bottom:24px;width:51%;background:rgba(255,255,255,.96);color:#1d211e;border-radius:16px 16px 16px 4px;padding:14px 16px;box-shadow:0 10px 45px #1112;animation:hero-proof-in .55s .7s both}
.hero-speaker{display:block;color:#6b7068;font-size:10px;font-weight:600;letter-spacing:1.2px;margin-bottom:8px}
.hero-request p{margin:0;font-size:clamp(13px,2.4cqw,16px);line-height:1.4}
.hero-reply{display:block;border-top:1px solid #e6e7e1;margin-top:10px;padding-top:9px;font-size:12px;line-height:1.4;color:var(--hero-accent)}
.hero-audio{display:flex;align-items:center;gap:9px;margin:10px 0;color:var(--hero-accent)}
.hero-audio>svg{height:19px;width:19px;flex:none}
.hero-audio small{font-size:11px}
.hero-wave{display:flex;gap:3px;align-items:center;height:28px;flex:1;overflow:hidden}
.hero-wave i{height:var(--h);width:3px;min-width:3px;border-radius:3px;background:currentColor}
.hero-output{margin:0;background:#fff;padding:5px;box-shadow:0 10px 35px #0003;overflow:hidden;border-radius:4px}
.hero-output img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:1px}
.hero-output figcaption{font-size:10px;font-weight:500;letter-spacing:.2px;padding:7px 3px 3px;line-height:1.2;color:#30342d}
.intro-outputs{position:absolute;inset:0 0 0 52%}
.intro-outputs .hero-output{position:absolute;width:69%;animation:hero-proof-in .7s 1.3s both}
.intro-outputs .output-one{left:0;top:0;transform:rotate(-9deg)}
.intro-outputs .output-two{right:-1%;bottom:0;transform:rotate(7deg);animation-delay:2s}
.editor-result{position:absolute;right:0;bottom:0;width:37%;transform:rotate(5deg)}
.editor-result .hero-output{width:100%;animation:hero-proof-in .6s 1.5s both}
.editor-result .after{position:absolute;inset:0;animation:hero-edit-reveal .8s 3.7s both}
.director-request{top:0;bottom:auto;width:68%;padding:12px 15px}
.direction-deck{position:absolute;bottom:0;left:6%;right:0;display:flex;align-items:end;gap:10px}
.direction-deck .hero-output{width:31%;animation:hero-proof-in .7s 1.5s both}
.direction-one{transform:rotate(-7deg)}
.direction-deck .direction-two{transform:translateY(-12px) rotate(2deg);animation:hero-proof-in .7s 2s both,hero-select .8s 4s forwards;z-index:1}
.direction-deck .direction-three{transform:rotate(8deg);animation-delay:2.5s}
.offering[data-theme="director"] .hero-proof{height:clamp(290px,43cqw,390px)}
.offering[data-theme="director"] .offering-copy h1{font-size:clamp(34px,8cqw,65px)}
.offering[data-theme="manager"] .offering-copy h1{font-size:clamp(32px,7.8cqw,63px)}
.manager-request{width:57%;bottom:4px}
.manager-request p+p{margin-top:9px}
.manager-request b{display:block;font-size:11px;margin-bottom:2px;color:#747b6d;font-weight:500}
.brand-result{position:absolute;width:35%;right:0;bottom:10px;transform:rotate(5deg);animation:hero-proof-in .7s 1.6s both}
.brand-memory{display:flex;align-items:center;justify-content:center;gap:5px;background:#e7f6a2;color:#27391b;border-radius:20px;padding:8px 6px;margin-top:10px;font-size:10px;box-shadow:0 4px 15px #0001}
.brand-memory svg{width:14px;height:14px;flex:none}
.offering .carousel-controls{left:6%;right:6%;bottom:22px;gap:12px;color:white}
.hero-explore{font-size:13px;line-height:1.2;margin-left:auto;background:none;border:0;padding:8px 0;color:white;text-align:right}
.hero-explore:after{content:" ↗";margin-left:5px}
.offering .auto-control{width:34px;height:34px;background:#14181455;border-color:#ffffff80;flex:none}
.offering .dot{padding:11px 3px}
.offering .dot:after{background:#ffffff80}
.offering .dot.active:after{background:white;width:24px}
.offering .dots{gap:5px}
.hero-paused .hero-proof *{animation-play-state:paused!important}
.overview-options{display:grid;gap:10px;margin-top:24px}
.overview-options button{text-align:left;border:1px solid #dde1d6;padding:16px;border-radius:12px;background:white;font-size:17px}
.overview-options small{display:block;color:#6d7667;font-size:13px;margin-top:5px}
@keyframes hero-copy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-proof-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hero-edit-reveal{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes hero-select{to{transform:translateY(-18px) rotate(0) scale(1.12);box-shadow:0 14px 40px #0005}}
@media(min-width:761px) and (max-height:720px){
 .offering-copy{top:62px}
 .offering .offering-copy h1{font-size:clamp(32px,7cqw,52px)}
 .hero-proof{height:195px;bottom:66px}
 .offering[data-theme="director"] .hero-proof{height:240px}
 .direction-deck{left:23%}
 .director-request{width:66%}
 .editor-result{width:30%}
 .intro-outputs{left:61%}
 .brand-result{width:28%}
 .offering-copy>p:last-child{font-size:15px}
}
@media(max-width:760px){
 .offering{height:730px;max-height:none}
 .offering-copy{top:69px;left:6%;right:5%}
 .offering .offering-copy h1{font-size:clamp(35px,9.4cqw,58px)}
 .offering[data-theme="director"] .offering-copy h1{font-size:clamp(32px,8.6cqw,52px)}
 .offering[data-theme="manager"] .offering-copy h1{font-size:clamp(30px,8.2cqw,50px)}
 .offering-copy>p:last-child{font-size:16px}
 .hero-proof{bottom:82px;height:230px}
 .hero-request{padding:12px;width:54%}
 .hero-request p{font-size:14px}
 .hero-reply{font-size:11px}
 .hero-speaker{font-size:10px;letter-spacing:.6px}
 .intro-outputs{left:55%;top:28px}
 .hero-output figcaption{font-size:9px;padding:6px 2px 2px}
 .editor-result{width:40%}
 .offering[data-theme="director"] .hero-proof{height:250px}
 .director-request{width:84%}
 .direction-deck{left:0;gap:7px}
 .manager-request{width:58%}
 .brand-result{width:36%}
 .brand-memory{font-size:9px;padding:7px 4px}
 .hero-explore{font-size:12px}
 .offering .carousel-controls{gap:8px}
 .offering .dots{gap:3px}
}
/* Slim frame and explicit hero actions. */
.fixed-frame{height:48px}
.brand{top:16px;font-size:23px;gap:9px}
.brand img{width:25px;height:25px}
main{padding-top:10px}
.offering-copy{top:57px}
.offering-copy>p:not(.eyebrow){color:#2c3029;font-size:clamp(15px,2.7cqw,19px);line-height:1.4;margin:0}
.hero-try{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:5px 0;border:0;border-bottom:1px solid currentColor;background:none;color:var(--hero-accent);font-size:15px;font-weight:500;pointer-events:auto}
.hero-try svg{width:18px;height:18px}
.offering .carousel-controls{justify-content:space-between}
.hero-proof{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px;height:clamp(235px,38cqw,310px);bottom:70px}
.hero-proof>.hero-request{position:relative;inset:auto;width:auto;align-self:end;padding:13px}
.hero-proof>.intro-outputs{position:relative;inset:auto;height:100%;min-height:0}
.hero-proof>.editor-result,.hero-proof>.brand-result{position:relative;inset:auto;width:100%;max-width:190px;align-self:end;justify-self:end}
.hero-proof .hero-output img{max-height:205px;object-fit:cover}
.hero-proof>.hero-bot{grid-column:1/-1;justify-self:end;max-width:90%;background:#e7f6a2;color:#244631;padding:10px 15px;border-radius:18px 18px 4px 18px;font-size:13px;line-height:1.35;box-shadow:0 4px 15px #0001;animation:hero-proof-in .5s 3s both}
.hero-bot svg{display:inline-block;width:15px;height:15px;vertical-align:middle}
.input-or{display:flex;align-items:center;gap:9px;color:#7a7f76;font-size:12px;margin:5px 0}
.input-or:before,.input-or:after{content:"";height:1px;flex:1;background:#dedfd9}
.offering[data-theme="director"] .hero-proof{height:clamp(285px,47cqw,365px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
.hero-proof>.director-request{width:85%;justify-self:start;align-self:start}
.hero-proof>.direction-deck{position:relative;inset:auto;min-height:0;justify-content:center;gap:10px;padding:10px 3px 0}
.direction-deck .hero-output{width:30%;max-height:100%}
.direction-deck .hero-output img{max-height:160px;object-fit:cover}
.direction-deck .direction-two{animation:hero-proof-in .7s 2s both;transform:translateY(-5px) rotate(2deg)}
.collection-heading{grid-column:1/-1;padding:15px 2px 3px}
.collection-heading .eyebrow{font-size:11px;color:#5d6558;letter-spacing:1.4px;margin:0 0 12px}
.collection-heading h2{font-size:clamp(28px,3.1vw,46px);font-weight:450;letter-spacing:-1.4px;line-height:1.1;margin:0 0 13px}
.collection-heading h2 em{font-family:"DM Serif Display",Georgia,serif;font-weight:400;color:#2349df}
.collection-heading>p:last-child{font-size:15px;line-height:1.5;color:#73796f;max-width:460px;margin:0}
.remake-section{grid-column:1/-1;border-top:1px solid #e9ece5;padding-top:28px;margin-top:8px}
.remake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;margin-top:25px}
.remake-picture{position:relative;border-radius:19px;overflow:hidden;background:#ecefe8}
.remake-picture>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.copy-remake{position:static;margin-top:10px;min-height:44px;border:1px solid #e4e6e2;border-radius:24px;background:#fff;color:#252c22;padding:10px 14px;display:flex;align-items:center;gap:7px;font-size:14px;transition:background .2s,border-color .2s}
.copy-remake:hover{background:#f3f5f0;border-color:#b6bdb0}
.copy-remake:focus-visible{outline:2px solid #2944ca;outline-offset:3px}
.copy-remake svg{width:16px;height:16px}
.remake-card h3{font-size:16px;font-weight:500;margin:11px 0 4px}
.remake-card code{font-family:inherit;font-size:12px;color:#6f7968;user-select:all;overflow-wrap:anywhere}
@media(min-width:761px){.offering{top:10px;height:calc(100dvh - 20px)}}
@media(max-width:760px){
 .fixed-frame{height:44px}
 .brand{top:13px;left:20px;font-size:21px;gap:8px}
 .brand img{width:24px;height:24px}
 main{padding-top:10px}
 .offering-copy{top:54px}
 .offering[data-theme="intro"] .offering-images img,.offering[data-theme="editor"] .offering-images img{object-position:100% 50%}
 .hero-proof{height:245px;bottom:68px;gap:10px}
 .hero-proof>.hero-request{padding:11px}
 .hero-proof .hero-output img{max-height:165px}
 .hero-proof>.hero-bot{font-size:12px;padding:9px 12px}
 .offering[data-theme="director"] .hero-proof{height:292px}
 .hero-proof>.director-request{width:94%}
 .direction-deck .hero-output img{max-height:133px}
 .collection-heading{padding-top:4px}
 .collection-heading h2{font-size:32px}
 .collection-heading>p:last-child{font-size:14px}
 .remake-grid{gap:24px 12px}
 .copy-remake{padding:9px 12px;font-size:14px}
 .remake-card h3{font-size:14px}
}
@media(min-width:761px) and (max-height:700px){
 .offering-copy{top:52px}
 .hero-proof{height:210px;bottom:63px}
 .hero-proof .hero-output img{max-height:130px}
 .offering[data-theme="director"] .hero-proof{height:255px}
 .direction-deck .hero-output img{max-height:108px}
}
@media(prefers-reduced-motion:reduce){
 .hero-proof *{animation:none!important}
 .offering-copy.changing{animation:none}
}