#jd-branding-page .branding-hero{display:grid;grid-template-columns:50% 50%;min-height:590px;align-items:center;border-bottom:1px solid var(--rule);overflow:hidden}
#jd-branding-page h1{font-size:clamp(45px,6vw,80px);font-weight:400;letter-spacing:-4px;line-height:1.02;margin:0 0 25px}
#jd-branding-page .branding-intro{padding:50px 0;z-index:2}
#jd-branding-page .branding-intro>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--sub);max-width:325px;margin:0 0 30px}
#jd-branding-page .branding-composition{height:510px;position:relative;perspective:1100px}
#jd-branding-page .sample{position:absolute;display:block;width:55%;height:326px;background:#eeeee7;box-shadow:0 18px 40px #22271715;border:1px solid #daddd3;overflow:hidden;text-decoration:none;transition:transform .7s,box-shadow .7s}
#jd-branding-page .sample-one{left:1%;top:55px;transform:rotate(-8deg)}
#jd-branding-page .sample-two{right:0;top:145px;transform:rotate(10deg)}
#jd-branding-page .sample:hover,#jd-branding-page .sample:focus-visible{transform:rotate(0) translateY(-12px) scale(1.05);z-index:2;box-shadow:0 22px 44px #22271725}
#jd-branding-page .sample-image{display:block;padding:25px;height:278px}
#jd-branding-page .sample-image img{width:100%;height:100%;object-fit:contain;display:block}
#jd-branding-page .sample-caption{display:flex;align-items:center;padding:10px 13px;background:#fffefa;height:48px;font-size:9px;letter-spacing:1px}
#jd-branding-page .composition-note{position:absolute;bottom:0;left:6%;font-size:10px;line-height:1.7;letter-spacing:1.2px;color:var(--sub)}
#jd-branding-page .brand-process{display:grid;grid-template-columns:46% 54%;padding:60px 0;gap:0;border-bottom:1px solid var(--rule)}
#jd-branding-page h2{font-size:37px;font-weight:400;line-height:1.12;letter-spacing:-1.6px;margin:0 0 20px}
#jd-branding-page .process-heading>p:not(.eyebrow){max-width:280px;font-size:13px;color:var(--sub);line-height:1.8}
#jd-branding-page .process-list details{border-top:1px solid var(--rule);padding:0 0 20px}
#jd-branding-page .process-list summary{display:grid;grid-template-columns:40px 1fr 24px;align-items:center;gap:10px;list-style:none;padding:22px 0 0;cursor:pointer;font-size:26px;letter-spacing:-.7px}
#jd-branding-page summary::-webkit-details-marker{display:none}
#jd-branding-page .process-list summary span:first-child{font-size:10px;color:var(--sub);letter-spacing:1px}
#jd-branding-page .process-list summary span:last-child{transition:transform .3s;font-size:23px}
#jd-branding-page .process-list details[open] summary span:last-child{transform:rotate(45deg)}
#jd-branding-page .process-list details>p{font-size:13px;color:var(--sub);line-height:1.8;padding-left:50px;max-width:490px;margin:18px 0}
#jd-branding-page .process-list details>a{font-size:11px;margin-left:50px;text-underline-offset:4px}
#jd-branding-page .branding-clients{padding:36px 0 45px;border-bottom:1px solid var(--rule)}
#jd-branding-page .clients-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
#jd-branding-page .client-name-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px}
#jd-branding-page .client-name-row a{font-size:25px;letter-spacing:-.8px;text-decoration:none;padding:20px 0;color:#72756d;transition:color .3s,transform .3s}
#jd-branding-page .client-name-row a:hover{color:var(--ink);transform:translateX(8px)}
#jd-branding-page .branding-information{display:grid;grid-template-columns:30% 70%;padding:50px 0;border-bottom:1px solid var(--rule)}
#jd-branding-page .branding-description{font-size:14px;line-height:1.8;max-width:570px;color:var(--sub)}
#jd-branding-page .branding-information details{font-size:12px;line-height:1.8;max-width:680px}
#jd-branding-page .branding-information summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px}
#jd-branding-page .source-copy{padding-top:18px;color:var(--sub)}
#jd-branding-page .source-note{border-top:1px solid var(--rule);padding-top:15px;font-size:11px;color:var(--sub)}
#jd-branding-page .branding-end{padding:44px 0}
#jd-branding-page .branding-end a{display:block;font-size:55px;letter-spacing:-2px;line-height:1.1;text-decoration:none}
#jd-branding-page .branding-end a span{display:inline-block;transition:transform .4s}
#jd-branding-page .branding-end a:hover span{transform:translate(10px,-10px)}
@media(max-width:700px){#jd-branding-page .branding-hero{grid-template-columns:1fr;min-height:0}#jd-branding-page h1{font-size:55px;letter-spacing:-2.5px}#jd-branding-page .branding-intro{padding:42px 0 10px}#jd-branding-page .branding-composition{height:420px;max-width:490px;width:100%;margin:auto}#jd-branding-page .sample{height:280px}#jd-branding-page .sample-image{height:235px;padding:16px}#jd-branding-page .sample-one{top:35px}#jd-branding-page .sample-two{top:110px}#jd-branding-page .sample-caption{font-size:8px;letter-spacing:.4px;padding:8px}#jd-branding-page .composition-note{bottom:2px;left:0;font-size:9px}#jd-branding-page .brand-process{grid-template-columns:1fr;gap:22px;padding:38px 0}#jd-branding-page h2{font-size:32px}#jd-branding-page .client-name-row{grid-template-columns:repeat(2,1fr)}#jd-branding-page .client-name-row a{font-size:23px}#jd-branding-page .branding-information{grid-template-columns:1fr;gap:12px;padding:35px 0}#jd-branding-page .branding-end a{font-size:43px}}
@media(prefers-reduced-motion:reduce){#jd-branding-page *{transition:none!important}}