/* Digital direction — genuine brand photography inside labelled editorial device compositions. */
.cp-digital { background:#eeebe5; }
.cp-digital-social { display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,85px);align-items:center;padding:45px 0 85px; }
.cp-digital-device { margin:0;display:flex;align-items:center;flex-direction:column;gap:22px;min-width:0;background:#dedbd5;padding:clamp(22px,3vw,55px); }
.cp-phone-frame{width:min(100%,320px);background:#101012;border:6px solid #101012;border-radius:38px;padding:4px;box-shadow:0 32px 55px rgba(0,0,0,.20);overflow:hidden}
.cp-digital-device figcaption,.cp-commerce-browser figcaption { color:#77716a;text-align:center;font:10px/1.4 "IBM Plex Mono",monospace;text-transform:uppercase; }
.cp-digital-direction { max-width:675px; }
.cp-digital-label,.cp-digital-reels>span,.cp-commerce-copy>span,.cp-pack-note>div>span{font:10px/1.4 "IBM Plex Mono",monospace;color:#77716a;text-transform:uppercase}
.cp-digital-direction h3,.cp-commerce-copy h3 { font-size:clamp(48px,5vw,86px);line-height:.85;letter-spacing:-.071em;font-weight:500;margin:36px 0 28px; }
.cp-digital-direction>p,.cp-commerce-copy>p { font-size:clamp(18px,1.65vw,24px);line-height:1.43;max-width:665px;margin:0 0 42px; }
.cp-digital-capabilities { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px;border-top:1px solid #9f9a93;margin-bottom:36px; }
.cp-digital-capabilities span { display:flex;gap:14px;padding:15px 0;border-bottom:1px solid #c9c5bd;font:11px/1.5 "IBM Plex Mono",monospace; }
.cp-digital-capabilities b { font-weight:400;color:#77716a; }
.cp-digital-links { display:flex;flex-direction:column;gap:0;border-top:1px solid #171715; }
.cp-digital-links a { display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #9f9a93;font:11px/1.4 "IBM Plex Mono",monospace; }
.cp-digital-links a:hover,.cp-digital-reels a:hover,.cp-commerce-copy a:hover,.cp-pack-note a:hover { color:#a6532a; }
.cp-digital-reels { padding-top:48px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap; }
.cp-digital-reels>div { display:flex;gap:10px; }
.cp-digital-reels a { display:flex;justify-content:space-between;gap:25px;border:1px solid #9f9a93;padding:11px 13px;font:11px/1.3 "IBM Plex Mono",monospace; }
.cp-commerce { border-top:1px solid #9f9a93;padding:75px 0;display:grid;grid-template-columns:minmax(0,.72fr) minmax(350px,1.28fr);gap:clamp(30px,4vw,75px);align-items:center; }
.cp-commerce-copy a { display:inline-flex;gap:50px;justify-content:space-between;border-bottom:1px solid #111;padding:12px 0;font:11px/1.4 "IBM Plex Mono",monospace; }
.cp-commerce-browser { margin:0;box-shadow:0 12px 55px rgba(32,28,25,.10);min-width:0;background:#f6f4ef; }
.cp-browser-bar { display:grid;grid-template-columns:1fr 1.8fr 1fr;align-items:center;padding:13px 20px;background:#e4e0da;border-bottom:1px solid #ccc6bf;font:10px/1.4 "IBM Plex Mono",monospace; }
.cp-browser-bar>span:last-child { text-align:right; }
.cp-browser-dots { display:flex;gap:6px; }
.cp-browser-dots i { width:7px;height:7px;border:1px solid #979188;border-radius:50%; }
.cp-browser-body { padding:28px; }
.cp-browser-head { display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 24px; }
.cp-browser-head strong { font-size:clamp(25px,3vw,44px);letter-spacing:-.07em;font-weight:500; }
.cp-browser-head small { font:9px/1.4 "IBM Plex Mono",monospace;text-align:right; }
.cp-browser-images { display:grid;grid-template-columns:1fr 1fr;gap:13px; }
.cp-browser-images img { width:100%;aspect-ratio:3/4;object-fit:cover;min-width:0; }
.cp-commerce-browser figcaption { padding:14px 20px 18px;background:#f6f4ef; }
.cp-pack-note { display:grid;grid-template-columns:minmax(150px,.4fr) minmax(280px,1fr) minmax(200px,.5fr);gap:30px;align-items:end;border-top:1px solid #9f9a93;padding:30px 0 8px; }
.cp-pack-note h3 { font-size:clamp(23px,2.5vw,39px);font-weight:500;line-height:1;letter-spacing:-.05em;margin:15px 0 0; }
.cp-pack-note p { font-size:clamp(16px,1.35vw,21px);line-height:1.43;margin:0;max-width:750px; }
.cp-pack-note a { font:10px/1.5 "IBM Plex Mono",monospace;border-bottom:1px solid #111;padding-bottom:8px;display:flex;justify-content:space-between;gap:12px; }
@media(max-width:1000px){
 .cp-digital-social,.cp-commerce { grid-template-columns:1fr; }
 .cp-digital-device { padding:30px; }
 .cp-digital-direction { max-width:none; }
 .cp-commerce-browser { max-width:820px; }
 .cp-pack-note { grid-template-columns:1fr 1.4fr; }
 .cp-pack-note a { grid-column:2; }
}
@media(max-width:700px){
 .cp-digital-social { padding:15px 0 50px;gap:48px; }
 .cp-digital-device { padding:26px 15px; }
 .cp-phone-frame { max-width:310px; }
 .cp-digital-direction h3,.cp-commerce-copy h3 { font-size:clamp(44px,11vw,71px);margin-top:27px; }
 .cp-digital-direction>p,.cp-commerce-copy>p { font-size:18px; }
 .cp-digital-capabilities { grid-template-columns:1fr; }
 .cp-digital-reels { flex-direction:column;align-items:flex-start; }
 .cp-commerce { padding:62px 0;gap:37px; }
 .cp-browser-body { padding:16px; }
 .cp-browser-bar { padding:12px 10px;font-size:9px; }
 .cp-browser-head { flex-direction:column;gap:8px; }
 .cp-browser-images { gap:8px; }
 .cp-pack-note { grid-template-columns:1fr;gap:17px; }
 .cp-pack-note a { grid-column:1;justify-self:start; }
}

.cp-phone-real{display:block;width:100%;height:auto;border-radius:27px;background:#111;object-fit:contain}