/* Dedicated brand compositions, shared by the real inner-page routes. */
.inner-site .inner-hero{isolation:isolate;overflow:hidden;position:relative}
.hero-drawing{position:absolute;inset:0;pointer-events:none;z-index:1}.hero-drawing i{position:absolute;display:block}
.inner-site .inner-hero h1{text-wrap:balance;overflow-wrap:break-word}
.inner-site .hero-media img{transform:none;will-change:auto}
/* VFX: a full-width cinematic frame with red editorial type and cut corners. */
.brand-vfx .inner-hero{min-height:720px;align-items:center;border-bottom:1px solid #ec304455}
.brand-vfx .inner-hero-copy{padding:100px 5% 105px;max-width:1040px}
.brand-vfx .inner-hero h1{font-size:clamp(56px,7.2vw,112px);line-height:.94;letter-spacing:-.065em;max-width:980px;margin-bottom:32px}
.brand-vfx .inner-hero-copy>p{max-width:630px;font-size:19px;line-height:1.7}
.brand-vfx .hero-media{inset:0 0 0 27%;width:73%;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.brand-vfx .hero-media:after{background:linear-gradient(90deg,#08090b 0%,#08090b88 48%,#08090b33 100%),linear-gradient(0deg,#08090b 0%,transparent 35%)}
.brand-vfx .hero-drawing:after{content:'';position:absolute;left:5%;bottom:50px;width:70px;height:5px;background:var(--accent)}
.brand-vfx .hero-drawing i{width:30px;height:30px;border:solid #ec3044;border-width:1px 0 0 1px}.brand-vfx .hero-drawing i:nth-child(1){top:35px;left:3%}.brand-vfx .hero-drawing i:nth-child(2){top:35px;right:3%;rotate:90deg}.brand-vfx .hero-drawing i:nth-child(3){bottom:35px;left:3%;rotate:-90deg}.brand-vfx .hero-drawing i:nth-child(4){bottom:35px;right:3%;rotate:180deg}
/* Mobility: a horizontal travel window and a route connecting the composition. */
.brand-mobility .inner-hero{max-width:none;min-height:680px;padding:85px 5%;gap:5%;grid-template-columns:1.05fr 1fr;background:radial-gradient(ellipse at 90% 10%,#dce5bd,transparent 65%),#f0efe8}
.brand-mobility .inner-hero h1{font-size:clamp(45px,5.4vw,83px);line-height:1.02;letter-spacing:-.06em}
.brand-mobility .inner-hero-copy p{font-size:18px;max-width:570px;margin-bottom:25px}
.brand-mobility .hero-media{height:470px;border-radius:180px 20px 120px 20px;box-shadow:18px 18px 0 #cdd7ac;rotate:2deg}
.brand-mobility .hero-media img{rotate:-2deg;scale:1.05}
.brand-mobility .hero-drawing:before{content:'';position:absolute;left:52%;top:25px;bottom:25px;width:45%;border:1px solid #7b944155;border-radius:45%}
.brand-mobility .hero-drawing i:first-child{left:5%;bottom:40px;width:42%;height:2px;background:linear-gradient(90deg,#7b9441 0 22%,#7b944130 22%)}
.brand-mobility .hero-drawing i:nth-child(2){width:12px;height:12px;border-radius:50%;background:#7b9441;bottom:35px;left:5%}
/* Music: a record-sleeve cover with typography beside the artist frame. */
.brand-music-videos .inner-hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:5%;max-width:none;padding:80px 5% 100px;background:#b83b23;color:#fff4df;min-height:700px}
.brand-music-videos .inner-hero h1{font-size:clamp(52px,6.7vw,104px);line-height:.98;max-width:none;margin:0 0 30px;letter-spacing:-.02em}
.brand-music-videos .inner-hero-copy>p{color:#fff0dc;font-size:18px;margin-bottom:25px}
.brand-music-videos .hero-media{height:500px;border:12px solid #f3ead8;box-shadow:16px 16px 0 #25221c;transform:rotate(3deg)}
.brand-music-videos .hero-drawing{background:repeating-linear-gradient(90deg,transparent 0 44px,#ffffff0b 44px 45px);border-bottom:14px solid #25221c}
.brand-music-videos .hero-drawing:after{content:'';position:absolute;right:1%;top:16%;width:120px;height:120px;border:1px solid #fff5;border-radius:50%;box-shadow:0 0 0 12px #fff1,0 0 0 24px #fff1}
.brand-music-videos .article-byline{color:#fff4df!important}
/* Education: a two-page notebook with an arched illustration and margin rules. */
.brand-education .inner-hero{max-width:none;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:6%;text-align:left;padding:80px 6% 95px;background:#f5efe4;border-bottom:1px solid #d5c6d6;min-height:680px}
.brand-education .inner-hero h1{font-size:clamp(48px,5.8vw,88px);line-height:1.04;margin:0 0 30px;text-align:left;font-weight:400;letter-spacing:-.055em}
.brand-education .inner-hero-copy>p{font-size:18px;margin:0 0 25px;max-width:560px;color:#786179}
.brand-education .hero-media{width:100%;height:460px;border-radius:180px 180px 15px 15px;box-shadow:18px 18px 0 #e1d5e5;position:relative;z-index:2}
.brand-education .hero-drawing:before{content:'';position:absolute;inset:0 0 0 55%;border-left:1px solid #b995aa66;background:repeating-linear-gradient(0deg,transparent 0 39px,#b995aa18 39px 40px)}
.brand-education .hero-drawing i:first-child{height:70px;width:32px;background:#a94f65;right:7%;top:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 77%,0 100%)}
/* Retail: editorial cover, cobalt accents and a portrait-shaped product window. */
.brand-retail .inner-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:3%;align-items:center;max-width:none;padding:85px 5% 95px;background:#f6f4ed;min-height:710px;border-bottom:12px solid #2147e8}
.brand-retail .inner-hero h1{font-size:clamp(48px,6.2vw,92px);line-height:1.03;letter-spacing:-.06em;color:#2147e8;max-width:none}
.brand-retail .inner-hero-copy{padding-right:3%}.brand-retail .inner-hero-copy p{font-size:18px;max-width:560px;margin-bottom:25px}
.brand-retail .hero-media{height:540px;clip-path:none;width:100%;border-radius:0;box-shadow:18px 18px 0 #d9ff8b;z-index:2}
.brand-retail .hero-drawing i:first-child{left:5%;bottom:42px;height:10px;width:100px;background:repeating-linear-gradient(90deg,#2147e8 0 2px,transparent 2px 6px)}
.brand-retail .hero-drawing i:nth-child(2){right:3%;top:30px;width:110px;height:110px;border:1px solid #2147e8;border-radius:50%}
/* Software: a build canvas with a framed application window. */
.brand-software .inner-hero{max-width:none;padding:85px 5% 100px;gap:6%;grid-template-columns:1.2fr 1fr;background:#f1f3ee;min-height:660px;border-bottom:1px solid #becbbf}
.brand-software .inner-hero h1{font-size:clamp(45px,5.3vw,82px);line-height:1.03;letter-spacing:-.06em}
.brand-software .inner-hero-copy>p{font-size:18px;margin-bottom:25px;max-width:620px}
.brand-software .hero-media{height:430px;padding-top:35px;box-shadow:18px 18px 0 #d4dfd1;background:#e2ebdc;border:1px solid #8d9f91;z-index:2}
.brand-software .hero-media:before{content:'•••';position:absolute;top:5px;left:15px;color:#4e8055;letter-spacing:5px;font:18px monospace;line-height:20px}
.brand-software .hero-media img{height:100%;object-fit:cover}.brand-software .hero-drawing{background-image:radial-gradient(#17362622 .7px,transparent .7px);background-size:20px 20px;mask-image:linear-gradient(90deg,transparent 35%,black)}
/* Long article and project titles keep their hierarchy without dominating the page. */
.inner-site.kind-post .inner-hero h1,.inner-site.kind-project .inner-hero h1{font-size:clamp(36px,4.3vw,67px);line-height:1.08}
.inner-site:is(.kind-blog,.kind-category,.kind-projects) .inner-hero{min-height:460px;padding-top:65px;padding-bottom:65px}
.inner-site:is(.kind-blog,.kind-category,.kind-projects) .hero-media{height:340px}
.brand-vfx:is(.kind-blog,.kind-category,.kind-projects) .hero-media{height:100%}
.brand-vfx:is(.kind-blog,.kind-category,.kind-projects) .inner-hero-copy{padding-top:20px;padding-bottom:20px}
.inner-site:is(.kind-contact,.kind-legal) .inner-hero{display:block;min-height:0;padding:65px 5%;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.inner-site:is(.kind-contact,.kind-legal) .inner-hero-copy{max-width:1100px;padding:0}
.inner-site:is(.kind-contact,.kind-legal) .inner-hero h1{font-size:clamp(42px,6vw,88px)}
.inner-site:is(.kind-contact,.kind-legal) .hero-drawing{opacity:.4;z-index:-1}
@media(max-width:1000px){.brand-mobility .inner-hero,.brand-music-videos .inner-hero,.brand-education .inner-hero,.brand-retail .inner-hero,.brand-software .inner-hero{gap:35px;grid-template-columns:1fr 1fr}.brand-music-videos .hero-media{height:420px}.brand-retail .hero-media{height:450px}.brand-education .hero-media{height:390px}.brand-mobility .hero-media{height:370px}.brand-software .hero-media{height:350px}}
@media(max-width:700px){.inner-site .inner-hero,.brand-mobility .inner-hero,.brand-music-videos .inner-hero,.brand-education .inner-hero,.brand-retail .inner-hero,.brand-software .inner-hero{display:grid;grid-template-columns:1fr;min-height:0;padding:55px 5% 65px;gap:20px}.inner-site .inner-hero h1{font-size:clamp(40px,10.8vw,64px);line-height:1.05;margin-bottom:24px}.inner-site.kind-post .inner-hero h1,.inner-site.kind-project .inner-hero h1{font-size:36px}.inner-site .inner-hero-copy>p{font-size:16px;line-height:1.7;margin-bottom:22px}.brand-vfx .inner-hero{min-height:590px;align-items:center;display:flex}.brand-vfx .inner-hero-copy{padding:30px 0 25px}.brand-vfx .hero-media{inset:0;width:100%;height:100%;clip-path:none}.brand-vfx .hero-media:after{background:linear-gradient(90deg,#08090bdf,#08090b88),linear-gradient(0deg,#08090b,transparent)}.brand-vfx .hero-drawing i{width:18px;height:18px}.brand-vfx .hero-drawing:after{bottom:30px}.brand-mobility .hero-media{height:300px;rotate:0;border-radius:100px 12px 70px 12px;box-shadow:8px 8px 0 #cdd7ac}.brand-mobility .hero-media img{rotate:0;scale:1}.brand-mobility .hero-drawing:before{display:none}.brand-music-videos .hero-media{height:330px;border-width:8px;box-shadow:8px 8px 0 #25221c;transform:rotate(1deg)}.brand-education .hero-media{height:300px;width:95%;box-shadow:8px 8px 0 #e1d5e5;border-radius:110px 110px 10px 10px}.brand-education .hero-drawing:before{inset:50% 0 0 0}.brand-retail .hero-media{height:330px;width:96%;box-shadow:9px 9px 0 #d9ff8b}.brand-software .hero-media{height:290px;width:96%;box-shadow:9px 9px 0 #d4dfd1}.inner-site:is(.kind-blog,.kind-category,.kind-projects) .inner-hero{min-height:0;padding:45px 5%}.inner-site:is(.kind-blog,.kind-category,.kind-projects) .hero-media{height:240px}.brand-vfx:is(.kind-blog,.kind-category,.kind-projects) .inner-hero{min-height:440px}.brand-vfx:is(.kind-blog,.kind-category,.kind-projects) .hero-media{height:100%}.inner-site:is(.kind-contact,.kind-legal) .inner-hero{display:block}.inner-site:is(.kind-contact,.kind-legal) .inner-hero-copy{padding:0}}
.inner-site.long-hero-title .inner-hero h1{font-size:clamp(36px,4vw,62px);line-height:1.07;letter-spacing:-.035em}
@media(max-width:700px){.inner-site.long-hero-title .inner-hero h1{font-size:35px}}