/* Orange campaign: independent photographic layers and live, accessible copy. */
.hero-portraits{position:relative;isolation:isolate;overflow:hidden;height:100svh;min-height:820px;max-height:1200px;background:radial-gradient(ellipse at 50% 30%,#ff7117 0,#ff4b00 42%,#d62a03 78%,#981b06 110%);color:#fff}
.portrait-scene{position:absolute;inset:0;z-index:-3;pointer-events:none}
.portrait-halo{position:absolute;left:50%;top:4%;width:min(66vw,92svh);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 50% 40%,#ff9730 0,#ff7110 58%,#ff9e376b 68%,#ff6a0010 71%)}
.portrait-layer{position:absolute;top:7%;width:min(38vw,64svh);transform:translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0);will-change:transform;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.portrait-layer-left{right:calc(50% + 12px);--float-x:-10px;--float-y:14px;--float-turn:-1deg;--float-duration:10s;--float-delay:-3s}
.portrait-layer-right{left:calc(50% + 12px);--float-x:12px;--float-y:-12px;--float-turn:1deg;--float-duration:12s;--float-delay:-6s}
.portrait-layer-front{top:-1%;left:50%;width:min(49vw,78svh);margin-left:max(-24.5vw,-39svh);z-index:1;--float-x:2px;--float-y:-12px;--float-turn:.35deg;--float-duration:9s;--float-delay:-1s}
.portrait-layer img{width:100%;height:auto;max-width:none;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.portrait-layer-right img{transform:scaleX(-1)}
.portrait-float{transform-origin:50% 70%}
.has-js .portrait-float{animation:portrait-breathe var(--float-duration) ease-in-out var(--float-delay) infinite;animation-play-state:paused}
.studio-motion-active .hero-art-visible .portrait-float{animation-play-state:running}
@keyframes portrait-breathe{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(var(--float-x),var(--float-y),0) rotate(var(--float-turn))}}
.portrait-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#3b0b041c,transparent 22%,transparent 37%,#17060226 53%,#130501ad 100%)}
.portrait-copy{position:absolute;top:44%;left:50%;transform:translateX(-50%);width:88%;max-width:1500px;text-align:center;z-index:2}
.hero-portraits h1{font-size:clamp(54px,5.05vw,100px);font-weight:730;line-height:1.02;letter-spacing:-.065em;text-transform:none;text-shadow:0 2px 24px #18060032}
.hero-portraits h1>span{display:inline;animation:none;white-space:nowrap}
.portrait-description{font-size:clamp(17px,1.28vw,24px);line-height:1.5;letter-spacing:-.015em;max-width:780px;margin:26px auto 0;color:#f0e5df;text-shadow:0 1px 12px #000}
.portrait-actions{display:flex;justify-content:center;gap:16px;margin-top:30px}
.portrait-actions .studio-button{font-size:16px;padding:17px 27px;gap:28px;min-height:58px;border-radius:2px}
.portrait-actions .portrait-primary{background:#fff;color:#171513;border:1px solid white}
.portrait-actions .portrait-secondary{background:#10050242;color:white;border:1px solid #ffffff8c;backdrop-filter:blur(6px)}
.portrait-actions .studio-button:hover{background:#ff651b;border-color:#ff651b;color:#171513;translate:0 -3px}
.portrait-mobile-kicker{display:none}
.portrait-intro{position:absolute;top:180px;left:3%;font-size:14px;line-height:1.5;letter-spacing:.015em}
.portrait-rule{display:block;width:30px;height:1px;background:#ffc4a5;margin-bottom:24px}
.portrait-agency{font-size:16px;font-weight:650;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;margin-bottom:17px}
.portrait-side{position:absolute;right:2.7%;top:125px;display:flex;align-items:center;gap:45px;writing-mode:vertical-rl;text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.3em}
.portrait-side a:before{content:'';display:inline-block;height:32px;width:1px;background:#ffffff80;margin-bottom:22px}
.portrait-side a:hover{color:#ffcfb7}
.portrait-process{position:absolute;left:3%;bottom:25%;width:190px;padding:9px 9px 15px;border:1px solid #ffd2ad6b;border-radius:15px;background:#ffffff15;backdrop-filter:blur(10px);z-index:3;transition:background .25s,translate .25s}
.portrait-process:hover{background:#ffffff26;translate:0 -4px}
.portrait-process-image{height:112px;overflow:hidden;position:relative;border-radius:8px;background:radial-gradient(circle at 50% 50%,#ff941c,#e34206 67%,#431204)}
.portrait-process-image img{height:200%;width:100%;object-fit:cover;object-position:center 27%;transform:translateY(-12%)}
.portrait-process-image>span{position:absolute;right:9px;top:9px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #fff9;border-radius:50%;background:#0005;font-size:18px}
.portrait-process strong{display:flex;justify-content:space-between;font-size:16px;letter-spacing:-.035em;font-weight:550;margin:12px 6px 3px}
.portrait-process small{display:block;margin-inline:6px;text-transform:uppercase;font-size:8px;letter-spacing:.24em;color:#ffd2bd}
.portrait-services{position:absolute;inset:auto 3% 0;display:grid;grid-template-columns:repeat(6,max-content);justify-content:space-between;border-top:1px solid #ffffff59;padding:29px 0 32px;gap:0;z-index:3}
.portrait-services>a{display:flex;align-items:center;gap:20px;padding:0 22px;border-left:1px solid #ffffff59;min-width:0;transition:color .2s}
.portrait-services>a:first-child{padding-left:0;border-left:0}
.portrait-services>a:last-child{padding-right:0}
.portrait-services svg{width:32px;height:32px;flex-shrink:0}
.portrait-services strong{display:block;font-size:15px;font-weight:550;letter-spacing:-.03em;white-space:nowrap}
.portrait-services small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.17em;margin-top:5px;color:#e4d0c7}
.portrait-services>a:hover{color:#ffb284}
.home-studio:has(.hero-portraits) #site-header .top-nav{background:transparent;border-color:transparent;backdrop-filter:none}
.hero-portraits a:focus-visible{outline-color:#fff}
@media(max-width:1400px){.portrait-process{width:160px;bottom:24%}.portrait-process-image{height:96px}.portrait-services>a{gap:12px;padding-inline:15px}.portrait-services strong{font-size:13px}.portrait-services small{font-size:7px;letter-spacing:.12em}.portrait-copy{top:45%}.portrait-intro{font-size:12px}.portrait-agency{font-size:14px}}
@media(max-width:1100px){.portrait-process{display:none}.portrait-intro{left:4%}.portrait-side{right:3%;font-size:8px}.portrait-services{inset-inline:4%;grid-template-columns:repeat(6,minmax(0,1fr))}.portrait-services>a{padding-inline:12px;gap:9px}.portrait-services svg{width:25px;height:25px}.portrait-services strong{font-size:12px}.portrait-services small{font-size:6px;letter-spacing:.05em}.portrait-copy{width:94%}.hero-portraits h1{font-size:5.5vw}}
@media(min-width:761px) and (max-width:1000px){.portrait-intro,.portrait-side{display:none}.portrait-layer{width:52vw;top:9%}.portrait-layer-front{width:66vw;margin-left:-33vw;top:0}.portrait-copy{top:47%}.portrait-mobile-kicker{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:20px;color:#ffcfb7}}
@media(max-width:760px){
 .hero-portraits{height:100svh;min-height:880px;max-height:1050px}
 .portrait-intro,.portrait-side{display:none}
 .portrait-halo{top:10%;width:115vw}
 .portrait-layer{top:14%;width:62vw}
 .portrait-layer-left{right:calc(50% - 9vw)}.portrait-layer-right{left:calc(50% - 9vw)}
 .portrait-layer-front{top:8%;width:84vw;margin-left:-42vw}
 .portrait-copy{top:auto;bottom:220px;width:calc(100% - 36px)}
 .portrait-mobile-kicker{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:17px;color:#ffcfb7}
 .hero-portraits h1{font-size:clamp(37px,7.2vw,60px);line-height:1.04;letter-spacing:-.065em}
 .hero-portraits h1>span{white-space:normal}
 .portrait-description{font-size:15px;line-height:1.5;max-width:430px;margin-top:20px}
 .portrait-desktop-break{display:none}
 .portrait-actions{margin-top:24px;gap:10px}
 .portrait-actions .studio-button{flex:1;min-width:0;font-size:13px;gap:10px;min-height:53px;padding:14px 12px}
 .portrait-actions .studio-button>span{font-size:17px}
 .portrait-services{inset-inline:18px;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 0;row-gap:24px}
 .portrait-services>a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.portrait-services>a:nth-child(n){padding-inline:6px}.portrait-services>a:nth-child(3n+1){border-left:0}
 .portrait-services svg{width:23px;height:23px;margin-bottom:0}
 .portrait-services strong{font-size:11px}.portrait-services small{font-size:6px;line-height:1.5;letter-spacing:.08em;margin-top:3px}
 .portrait-shade{background:linear-gradient(180deg,#65130420,transparent 24%,#19070226 38%,#1d0806b3 62%,#190702e6 100%)}
}
@media(max-width:380px){.portrait-actions{gap:8px}.portrait-actions .studio-button{font-size:11px;padding-inline:8px;gap:7px}.portrait-services>a{padding-inline:9px}.portrait-services strong{font-size:10px}.hero-portraits h1{font-size:36px}}
.studio-motion-paused .portrait-layer{transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.portrait-float{animation:none!important}.portrait-layer{transform:none!important;will-change:auto}}
