:root{--orange:#ff5100;--black:#080808;--line:#dedede;font-family:'Poppins',sans-serif;color:var(--black);background:white;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:6px}.skip{position:absolute;top:-100px;background:#fff;padding:15px;z-index:10}.skip:focus{top:0}header{height:124px;display:flex;align-items:center;justify-content:space-between;padding:22px 6%}.brand{width:157px;display:block}.brand svg{width:100%;display:block}nav{display:flex;gap:46px;font-size:14px;font-weight:500}nav a:hover{color:var(--orange)}.hero{display:grid;grid-template-columns:44% 56%;min-height:480px;background:#000;color:#fff}.hero-copy{padding:50px 0 54px 13.6%;display:flex;align-items:center}h1{font-size:clamp(58px,7.2vw,112px);letter-spacing:-.065em;line-height:1.04;margin:0;font-weight:600}h1 span,h2 span{color:var(--orange)}.hero-image{position:relative;overflow:hidden;min-height:420px}.hero-image>svg{display:block;position:absolute;width:100%;height:100%}.hero-image:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.5))}.image-caption{position:absolute;left:30px;bottom:26px;font-size:12px;letter-spacing:.05em;z-index:1}.section{padding:76px 6%}.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;gap:20px}h2{font-size:clamp(30px,3vw,48px);line-height:1.15;letter-spacing:-.045em;margin:0;font-weight:600}.section-heading p{font-size:14px;margin:0}.projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.project{padding:0;text-align:left;border:0;background:none;cursor:pointer;color:inherit;min-width:0}.project-image{aspect-ratio:1.25;overflow:hidden;background:#111}.project-image img,.project-image svg{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s}.project:hover .project-image img,.project:hover .project-image svg{transform:scale(1.045)}.project-meta{display:flex;justify-content:space-between;gap:10px;padding-top:17px}.project h3{font-size:17px;line-height:1.4;margin:0;font-weight:600}.project p{font-size:13px;margin:5px 0 0;color:#5b5b5b}.project-arrow{font-size:24px;line-height:1;color:var(--orange)}.credit{font-size:12px;color:#666;margin:30px 0 0}.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9%;padding-top:78px;padding-bottom:84px}.eyebrow{font-size:13px;font-weight:600;letter-spacing:.07em;margin:0 0 22px}.about h2{font-size:clamp(32px,3.35vw,52px)}.about-copy p{font-size:16px;line-height:1.8;margin:0 0 20px}.services{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:14px;font-weight:500;padding-top:12px}.services span{border-bottom:2px solid var(--orange);padding-bottom:5px}.contact{background:var(--black);color:white;padding-top:64px;padding-bottom:72px}.contact h2{font-size:clamp(54px,7vw,108px);letter-spacing:-.06em;line-height:1.04}.email{display:inline-flex;align-items:center;gap:40px;font-size:clamp(18px,2.2vw,28px);margin-top:32px;border-bottom:1px solid #777;padding-bottom:10px}.email:hover{color:var(--orange)}.email span{color:var(--orange)}footer{padding:25px 6%;display:flex;justify-content:space-between;gap:20px;font-size:12px}dialog{padding:0;border:0;width:min(1050px,94vw);max-height:92dvh;overflow:auto;color:var(--black)}dialog::backdrop{background:rgba(0,0,0,.8)}body.modal-open{overflow:hidden}.dialog-top{display:flex;justify-content:space-between;align-items:center;padding:16px 30px;background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;font-size:12px;letter-spacing:.04em}.dialog-top button{border:0;background:none;cursor:pointer;font-size:14px;padding:8px}.dialog-top button span{font-size:25px;vertical-align:middle;margin-left:12px}.detail-head{padding:36px 40px 30px}.detail-head .eyebrow{margin-bottom:14px}.detail-head h2{font-size:clamp(30px,4vw,54px)}.detail-hero{height:390px;background:#111}.detail-hero img,.detail-hero svg{width:100%;height:100%;object-fit:cover;display:block}.detail-body{padding:35px 40px}.detail-body p{line-height:1.85;font-size:16px}.detail-body h3{font-size:23px;margin:28px 0 10px}.detail-body ul{padding-left:20px;line-height:1.8;font-size:15px}.metrics{display:flex;flex-wrap:wrap;gap:25px 40px;margin:28px 0}.metric strong{font-size:32px;display:block;color:var(--orange);font-weight:600}.metric span{font-size:13px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 40px 40px}.gallery img{width:100%;height:260px;object-fit:cover}.detail-credit{color:#666;font-size:12px!important;border-top:1px solid var(--line);padding-top:20px}@media(min-width:1600px){body{max-width:none;margin:0}.hero{min-height:570px}}@media(max-width:950px){header{height:104px}.hero{min-height:400px}.hero-copy{padding-top:40px;padding-bottom:40px}.hero-image{min-height:350px}.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}.project-image{aspect-ratio:1.6}.section{padding:56px 6%}.about{gap:6%}.about h2{font-size:34px}}@media(max-width:600px){header{height:94px;padding:18px 6%}.brand{width:117px}nav{gap:18px;font-size:12px}.hero{grid-template-columns:1fr}.hero-copy{padding:32px 6% 38px}h1{font-size:76px}.hero-image{min-height:245px}.image-caption{left:6%;bottom:19px;font-size:11px}.section-heading{display:block;margin-bottom:24px}.section-heading p{margin-top:10px}.projects{gap:26px 16px}.project-image{aspect-ratio:1.1}.project h3{font-size:15px}.project p{font-size:12px}.project-arrow{font-size:20px}.about{grid-template-columns:1fr;gap:25px}.section{padding-top:44px;padding-bottom:44px}.credit{font-size:12px;line-height:1.6}.contact h2{font-size:66px}footer{flex-wrap:wrap;line-height:1.5}footer>span:nth-child(2){display:none}.detail-head,.detail-body{padding:25px}.detail-hero{height:250px}.gallery{padding:0 25px 25px;gap:10px}.gallery img{height:180px}.dialog-top{padding:10px 20px}dialog{max-height:95dvh;width:96vw}.metrics{gap:20px}.metric strong{font-size:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.projects{grid-template-columns:repeat(5,minmax(0,1fr))}.project-type{height:100%;display:flex;flex-direction:column;justify-content:center;padding:22px;background:#080808;color:white;gap:16px}.project-type>span{font-size:16px}.project-type strong{font-size:clamp(18px,1.6vw,26px);line-height:1.25;letter-spacing:-.04em}.project-type small{font-size:10px;letter-spacing:.07em;color:#ddd}.detail-hero:has(.project-type){height:auto}.detail-hero .project-type{padding:40px}.detail-hero .project-type strong{font-size:40px}@media(max-width:1100px){.projects{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:750px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.project-type{padding:16px;gap:12px}.project-type small{font-size:9px}}
.client-strip{border-top:1px solid #dedede;padding:28px 0 34px;overflow:hidden}.client-strip-head{display:flex;align-items:center;justify-content:space-between;padding:0 6% 15px;gap:20px}.client-strip-head p{margin:0;font-size:12px;letter-spacing:.07em;font-weight:500}.ticker-toggle{background:none;border:0;border-bottom:1px solid #888;color:#333;cursor:pointer;font-size:12px;padding:4px 0}.client-track{display:flex;width:max-content;animation:client-drift 65s linear infinite;will-change:transform}.client-group{display:flex;align-items:center}.client-logo{width:180px;height:85px;display:flex;align-items:center;justify-content:center;padding:15px 28px}.client-logo img{width:124px;height:48px;object-fit:contain;filter:brightness(0);display:block}.client-strip:hover .client-track,.client-strip:focus-within .client-track,.client-strip.is-paused .client-track{animation-play-state:paused}@keyframes client-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}@media(prefers-reduced-motion:reduce){.client-track{animation:none;transform:none;flex-wrap:wrap;width:100%}.client-group{flex-wrap:wrap;justify-content:center;width:100%}.client-group[aria-hidden]{display:none}.ticker-toggle{display:none}.client-logo{width:150px}}@media(max-width:600px){.client-logo{width:150px;padding:15px 22px}.client-logo img{width:106px;height:42px}}

.hero-image>img{position:absolute;width:100%;height:100%;object-fit:cover;display:block}

.client-logo img{filter:none}

.brand img{display:block;width:100%;height:auto}.brand{width:190px}@media(max-width:600px){.brand{width:140px}}

/* Balanced headline margins and larger full-height photography. */
.hero{grid-template-columns:max-content minmax(0,1fr);min-height:clamp(480px,42vw,640px)}
.hero-copy{padding:48px clamp(28px,4vw,64px);justify-content:center}
.hero-image{min-height:100%;align-self:stretch}
.hero-image>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06)}
.brand{width:205px}.brand img{width:100%;height:90px;object-fit:contain}
@media(max-width:950px){.hero{min-height:440px}.hero-copy{padding:40px 28px}}
@media(max-width:600px){.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:36px 24px;justify-content:center}.hero-image{min-height:300px}.brand{width:145px}.brand img{height:72px}}

/* Full-width image hero and visible logo edge aligned to header gutter. */
.brand{width:180px;flex-shrink:0}.brand svg{display:block;width:100%;height:auto;overflow:hidden}
.hero{position:relative;isolation:isolate;display:flex;min-height:clamp(520px,48vw,740px);overflow:hidden}
.hero-image{position:absolute;inset:0;min-height:0;z-index:-1}
.hero-image>img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
.hero-image:after{inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.48) 36%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.08) 100%)}
.hero-copy{position:relative;padding:64px 6%;justify-content:flex-start;align-items:center;width:100%}
.hero-copy h1{text-shadow:0 2px 16px rgba(0,0,0,.25)}
@media(max-width:950px){.hero{min-height:520px}.hero-copy{padding:52px 6%}}
@media(max-width:600px){.brand{width:130px}.hero{min-height:510px}.hero-copy{padding:48px 6%;justify-content:flex-start}.hero-image{min-height:0}.hero-image>img{object-position:58% center}.hero-image:after{background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.3))}.hero-copy h1{font-size:clamp(62px,16vw,76px)}}

.hero-image{z-index:0}.hero-copy{z-index:1}

.brand{width:153px}@media(max-width:600px){.brand{width:110.5px}}

/* Six aligned project cards, title above and category below. */
.projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 28px;align-items:start}
.project{display:flex;flex-direction:column;align-self:start;width:100%}
.project .project-title{font-size:18px;line-height:1.4;height:4.2em;margin:0 0 16px;width:100%;font-weight:500}
.project-title>span{display:block;font-weight:700}
.project-image{width:100%;aspect-ratio:1.5;flex-shrink:0}
.project-meta{width:100%;align-items:center;padding-top:14px;min-height:40px}
.project-meta p{font-size:14px;line-height:1.5;margin:0}
.marked-heading{display:flex;align-items:center;gap:18px}
.marked-heading .heading-words{color:inherit}
.section-heading h2,.about h2{font-size:clamp(30px,3vw,48px);line-height:1.15;font-weight:600;letter-spacing:-.045em}
.section-x{display:block;width:46px;height:40px;flex-shrink:0;overflow:hidden;transform-origin:center;animation:pbx-pulse 4s ease-in-out infinite}
.about-tagline{font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:28px 0 0}
.client-strip-head p{text-transform:none;font-size:16px;letter-spacing:0;font-weight:500}
.contact .marked-heading{align-items:flex-start}.contact .section-x{margin-top:.17em}
@keyframes pbx-pulse{0%,65%,100%{transform:scale(1) rotate(0)}74%{transform:scale(1.13) rotate(-7deg)}84%{transform:scale(1.02) rotate(5deg)}92%{transform:scale(1.07) rotate(0)}}
@media(max-width:950px){.projects{gap:32px 20px}.project .project-title{font-size:16px}.section-heading{align-items:center}.section-heading>p{display:none}}
@media(max-width:700px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.project .project-title{height:5.6em}.marked-heading{gap:12px}.section-x{width:34px;height:30px}.about-tagline{font-size:23px}}
@media(max-width:450px){.projects{grid-template-columns:1fr;gap:32px}.project .project-title{height:auto;min-height:2.8em;margin-bottom:14px}.project-image{aspect-ratio:1.5}.project-meta p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.section-x{animation:none}}

.project .project-title{display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:8px}

/* Motion hero: deep treatment keeps the animated headline legible. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-image:after{background:linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.44) 100%)}
.hero-copy h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}

@media(prefers-reduced-motion:reduce){.hero-copy .hero-word{animation:none;color:white}.hero-video{display:none}}

/* Larger headline with responsive scaling to retain all three words on mobile. */
.hero-copy h1{font-size:clamp(75.4px,9.36vw,145.6px)}
@media(max-width:600px){.hero-copy h1{font-size:clamp(80.6px,20.8vw,98.8px)}}

/* Whole words fade sequentially while retaining Poppins headline metrics. */
.hero-copy h1{font-size:clamp(90.48px,11.232vw,174.72px);font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:-.065em;line-height:1.04}
.hero-copy .hero-word{color:#fff;white-space:nowrap;animation:word-glow 18s ease-in-out infinite}
.hero-copy .hero-word:nth-of-type(2){animation-delay:6s}
.hero-copy .hero-word:nth-of-type(3){animation-delay:12s}
.hero-copy .hero-letter{display:inline;color:inherit}
.hero-copy .hero-word:nth-of-type(-n+2) .hero-letter:nth-child(3){margin-right:.025em}
.hero-copy .hero-dot{color:inherit}
@keyframes word-glow{0%,33.333%,100%{color:#fff}16.667%{color:#ff5100}}
.hero-image>.hero-video,.hero-image>img{filter:invert(1)}
@media(max-width:600px){.hero-copy h1{font-size:min(26vw,clamp(96.72px,24.96vw,118.56px))}}
@media(prefers-reduced-motion:reduce){.hero-copy .hero-word{animation:none;color:#fff}}

.project[data-index="4"] .project-image img{object-position:center 25%}
.project[data-index="8"] .project-image img{object-position:center 58%}
.project.coming-soon{cursor:default}
.project.coming-soon:hover .project-image img{transform:none}
.gallery-full{align-items:start}.gallery-full img{height:auto;max-height:580px;object-fit:contain;background:#f7f7f7}


.client-track{animation-duration:94s}
.client-logo img[src$="virgin-voyages.svg"],.client-logo img[src$="famous-grouse.svg"],.client-logo img[src$="alexander-dennis.svg"]{filter:brightness(0)}

/* Full-width services with descriptions layered over each icon. */
.about{row-gap:48px}
.studio-services{grid-column:1/-1;min-width:0;padding-top:24px;margin-top:8px}
.services-intro{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start;margin-bottom:38px}
#services-heading{font-size:clamp(30px,3vw,48px);line-height:1.15;letter-spacing:-.045em;font-weight:600;margin:0}
#services-heading .heading-words>span{color:var(--orange)}
.services-intro-copy p{font-size:16px;line-height:1.8;margin:0;max-width:56ch}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;width:100%}
.service-item{position:relative;min-width:0;text-align:center;display:grid;align-items:stretch}
.service-item h4{grid-area:1/1;font-weight:600;font-size:19px;line-height:1.4;letter-spacing:-.025em;margin:0}
.service-trigger{border:0;background:transparent;color:inherit;width:100%;height:100%;min-height:184px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px 12px;cursor:pointer;text-align:center;letter-spacing:inherit;font-weight:inherit}
.service-symbol{display:block;width:88px;height:88px;flex-shrink:0;transition:opacity .3s ease,transform .4s ease}
.service-symbol img{display:block;width:100%;height:100%}
.service-name{max-width:24ch;display:block;transition:opacity .3s ease}
.service-trigger[aria-expanded="true"] .service-symbol{opacity:.1;transform:scale(1.05) rotate(-4deg)}
.service-trigger[aria-expanded="true"] .service-name{opacity:.1}
.service-info,.service-info[hidden]{grid-area:1/1;position:relative;margin:0;padding:24px;border:1px solid rgba(255,81,0,.18);border-radius:12px;background:rgba(255,255,255,.55);color:#292929;font-size:16px;line-height:1.65;text-align:center;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}
.service-info[hidden]{opacity:0;visibility:hidden}
@media(max-width:950px){.services-grid{gap:18px}.service-item h4{font-size:18px}.service-info{padding:20px 16px}}
@media(max-width:700px){.services-intro{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.studio-services{padding-top:12px}}
@media(max-width:550px){.services-grid{grid-template-columns:1fr;gap:12px}.service-trigger{min-height:170px}.service-symbol{width:80px;height:80px}.service-info{padding:22px}}
@media(prefers-reduced-motion:reduce){.service-symbol,.service-name,.service-info{transition:none}.service-trigger[aria-expanded="true"] .service-symbol{transform:none}}

/* About contrast band and four-column animated services. */
.about{display:block;padding:0;border:0;background:#fff;color:#080808}
.about-overview{display:grid;grid-template-columns:1fr 1fr;gap:9%;background:#080808;color:#fff;padding:74px 6% 60px}
.about-overview .heading-words{color:#fff}
.about-overview .heading-words>span{color:var(--orange)}
.about-overview .about-copy p{color:#e3e3e3}
.about-overview .about-tagline{color:#fff}
.studio-services{padding:60px 6% 56px;margin:0}
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
.service-trigger{min-height:224px;gap:12px;padding:14px 8px}
.service-item h4{font-size:18px;letter-spacing:-.02em}
.service-symbol{width:128px;height:128px}
.service-symbol img{object-fit:contain;mix-blend-mode:multiply}
.service-trigger[aria-expanded="true"] .service-symbol{transform:none;opacity:.09}
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
@media(max-width:700px){.about-overview{grid-template-columns:1fr;gap:28px;padding:48px 6% 34px}.studio-services{padding:44px 6%}.service-item h4{font-size:17px}.service-symbol{width:96px;height:96px}}
@media(max-width:550px){.services-grid{grid-template-columns:1fr;gap:12px}.service-trigger{min-height:200px}}
@media(prefers-reduced-motion:reduce){.service-symbol img{animation:none!important;transform:none!important}}

/* Compact, horizontally scrolling project and service showcases. */
.projects{
  display:flex;
  grid-template-columns:none;
  gap:24px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-color:var(--orange) #ececec;
  scrollbar-width:thin;
  padding:0 0 22px;
}
.projects::-webkit-scrollbar{height:7px}
.projects::-webkit-scrollbar-track{background:#ececec;border-radius:999px}
.projects::-webkit-scrollbar-thumb{background:var(--orange);border-radius:999px}
.project{flex:0 0 min(31vw,390px);scroll-snap-align:start}

.studio-services{padding:42px 6% 44px;scroll-margin-top:16px}
.services-intro{margin-bottom:26px}
.services-tagline{font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:28px 0 0}
.services-intro-copy{justify-self:end;width:100%}
.services-intro-copy p{max-width:none;width:100%}
.services-grid{
  display:flex;
  grid-template-columns:none;
  gap:18px;
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-color:var(--orange) #ececec;
  scrollbar-width:thin;
  padding:0 0 18px;
}
.services-grid::-webkit-scrollbar{height:7px}
.services-grid::-webkit-scrollbar-track{background:#ececec;border-radius:999px}
.services-grid::-webkit-scrollbar-thumb{background:var(--orange);border-radius:999px}
.service-item{flex:0 0 min(22vw,280px);scroll-snap-align:start;border:2px solid transparent;border-radius:12px;overflow:hidden;transition:border-color .2s ease}
.service-item:hover,.service-item:focus-within{border-color:var(--orange)}
.service-trigger{min-height:170px;gap:8px;padding:12px 8px}
.service-item h4{font-size:16px}
.service-symbol{width:94px;height:94px}
.service-info,.service-info[hidden]{border:0;border-radius:9px;padding:16px;font-size:14px;line-height:1.5}

@media(max-width:1100px){
  .project{flex-basis:min(43vw,390px)}
  .service-item{flex-basis:min(31vw,280px)}
}
@media(max-width:700px){
  header{height:auto;min-height:104px;align-items:flex-start}
  nav{gap:18px;flex-wrap:wrap;justify-content:flex-end;padding-top:12px}
  .project{flex-basis:78vw}
  .studio-services{padding:34px 6% 38px}
  .services-intro{margin-bottom:22px}
  .services-tagline{font-size:23px}
  .services-intro-copy{justify-self:stretch}
  .service-item{flex-basis:42vw}
  .service-trigger{min-height:154px}
  .service-symbol{width:82px;height:82px}
}
@media(max-width:550px){
  nav{gap:11px 16px;font-size:12px;max-width:210px}
  .projects{gap:16px;margin-right:-6.4%;padding-right:6.4%}
  .project{flex-basis:84vw}
  .services-grid{gap:12px;margin-right:-6.4%;padding-right:6.4%}
  .service-item{flex-basis:64vw}
  .service-trigger{min-height:148px;padding:10px 6px}
  .service-item h4{font-size:14px}
  .service-symbol{width:72px;height:72px}
  .service-info,.service-info[hidden]{padding:11px;font-size:12px;line-height:1.4}
}

/* Full-width page backgrounds, with readable paragraph lengths on wide displays. */
.about-copy p,.services-intro-copy p{max-width:65ch}

/* Project campaign films share the same contained, cinematic header treatment. */
.detail-hero .project-film{width:100%;height:100%;display:block;object-fit:cover;background:#000}

/* Original PBX hero-film treatment: cinematic full bleed, minimal type and no borrowed visual treatment. */
.hero-image>.hero-video,.hero-image>img{filter:none}
.hero-copy h1{font-size:clamp(56px,8.4vw,132px);max-width:12ch}
.hero-copy h1 span{color:var(--orange)}
@media(max-width:600px){.hero-copy h1{font-size:clamp(54px,15.4vw,78px)}}

/* Single-line orange gradient treatment for the NikeFuel-led hero. */
.hero-copy h1{max-width:none;font-size:clamp(64px,10.2vw,154px);line-height:.92;letter-spacing:-.07em;background:linear-gradient(100deg,#ff3b00 0%,#ff8b56 45%,#ff3b00 100%);background-size:220% 100%;background-position:0% 50%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:hero-orange-flow 5.5s ease-in-out infinite}
.hero-copy h1 span{color:inherit}
@keyframes hero-orange-flow{0%,100%{background-position:0% 50%;opacity:.72}50%{background-position:100% 50%;opacity:1}}
@media(max-width:600px){.hero-copy h1{font-size:clamp(62px,18vw,94px)}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;background-position:50% 50%;opacity:1}}

/* Larger headline with an unclipped terminal letter and a white-to-orange travelling gradient. */
.hero-copy h1{display:inline-block;padding-right:.13em;font-size:clamp(77px,12.24vw,185px);letter-spacing:-.055em;background:linear-gradient(90deg,#fff 0%,#fff 36%,#ff5100 64%,#ff5100 100%);background-size:200% 100%;animation:hero-white-orange-flow 5.5s ease-in-out infinite}
@keyframes hero-white-orange-flow{0%,100%{background-position:0% 50%;opacity:1}50%{background-position:100% 50%;opacity:1}}
@media(max-width:600px){.hero-copy h1{padding-right:.1em;font-size:clamp(68px,18.8vw,106px);letter-spacing:-.05em}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;background-position:50% 50%}}

/* Calm hero lock-up: white title with FELT as the single breathing accent. */
.hero-copy h1,.hero-copy h1 .hero-letter{background:none!important;animation:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-background-clip:initial!important;background-clip:initial!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#ff5100!important;-webkit-text-fill-color:#ff5100!important;animation:felt-breathe 5.5s ease-in-out infinite!important}
@keyframes felt-breathe{0%,100%{color:#ff5100;-webkit-text-fill-color:#ff5100}50%{color:#fff1eb;-webkit-text-fill-color:#fff1eb}}

/* Give the project rail more air while keeping its first card gently inset. */
.work.section{padding:66px 0 58px}.work .projects{padding:0 3.5% 24px}.work .section-heading,.work .credit{margin-left:6%;margin-right:6%}
@media(max-width:700px){.work.section{padding:52px 0 46px}.work .projects{padding:0 5% 22px}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{animation:none!important;color:#ff5100!important;-webkit-text-fill-color:#ff5100!important}}

/* Clear, light hero lettering with a deliberately visible FELT outline. */
.hero-copy h1,.hero-copy h1 .hero-letter{font-family:'Poppins',sans-serif!important;font-weight:300!important}
.marked-heading{gap:7px!important}
.marked-heading::before{margin-right:0!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.25px #ff5100!important;text-shadow:0 0 0 rgba(255,81,0,0);animation:felt-outline-pulse-visible 3.4s ease-in-out infinite!important}
@keyframes felt-outline-pulse-visible{0%,100%{-webkit-text-stroke-color:#ff5100;text-shadow:0 0 0 rgba(255,81,0,0)}50%{-webkit-text-stroke-color:#fff;text-shadow:0 0 12px rgba(255,81,0,.9)}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{-webkit-text-stroke-color:#ff5100!important;animation:none!important}}

/* Final FELT treatment: solid white letters, pulsing orange outline only. */
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.25px #ff5100!important;animation:felt-orange-outline-pulse 3.4s ease-in-out infinite!important}
@keyframes felt-orange-outline-pulse{0%,100%{-webkit-text-stroke-color:#ff5100;text-shadow:0 0 0 rgba(255,81,0,0)}50%{-webkit-text-stroke-color:#ffb18b;text-shadow:0 0 12px rgba(255,81,0,.68)}}

/* FELT stays white; only its orange outline breathes. */
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.25px #ff5100!important;animation:felt-orange-outline-pulse 3.4s ease-in-out infinite!important}
@keyframes felt-orange-outline-pulse{0%,100%{-webkit-text-stroke-color:#ff5100;text-shadow:0 0 0 rgba(255,81,0,0)}50%{-webkit-text-stroke-color:#ffb18b;text-shadow:0 0 12px rgba(255,81,0,.68)}}

/* Final interaction refinements. */
@keyframes client-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section-x{display:none!important}
body,body *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 2 9 8 15 2 16 3 10 9 16 15 15 16 9 10 3 16 2 15 8 9 2 3Z' fill='%23ff5100'/%3E%3C/svg%3E") 9 9,auto}
.hero-copy h1 .hero-letter--14{margin-left:-.12em}
.work .project{flex-basis:min(48.4vw,608px)!important}
@media(max-width:1100px){.work .project{flex-basis:min(67vw,608px)!important}}
.service-item{border:0!important;border-radius:0!important;overflow:visible!important}
.service-item::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s ease;background:linear-gradient(var(--orange),var(--orange)) 0 0/24px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 0 0/1px 24px no-repeat,linear-gradient(var(--orange),var(--orange)) 100% 0/24px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 100% 0/1px 24px no-repeat,linear-gradient(var(--orange),var(--orange)) 0 100%/24px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 0 100%/1px 24px no-repeat,linear-gradient(var(--orange),var(--orange)) 100% 100%/24px 1px no-repeat,linear-gradient(var(--orange),var(--orange)) 100% 100%/1px 24px no-repeat}
.service-item:hover::before,.service-item:focus-within::before{opacity:1}
@media(max-width:700px){.work .project{flex-basis:94vw!important}}

/* Header marks and project rail alignment. */
.marked-heading::before{content:'';display:block;width:16px;height:16px;flex:0 0 16px;margin-top:.23em;background:url('assets/pbx-cursor.svg') center/contain no-repeat}
.section-x{display:none!important}
html,body,body *,body *::before,body *::after{cursor:url('assets/pbx-cursor.svg') 9 9,auto!important}
.work .projects{padding:0 6% 24px!important}
@media(max-width:700px){.work .projects{padding:0 6% 22px!important}.marked-heading::before{width:14px;height:14px;flex-basis:14px}}

/* Match the project scroller's physical bounds to the Services section. */
.work .projects{width:88%!important;margin:0 6%!important;padding:0 0 24px!important}
@media(max-width:700px){.work .projects{width:88%!important;margin:0 6%!important;padding:0 0 22px!important}}

/* Fine type and hero-accent finish. */
.marked-heading{font-weight:400!important}.marked-heading::before{width:1em!important;height:1em!important;flex-basis:1em!important;margin-top:.12em!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1px #ff5100!important;animation:felt-outline-pulse 4.5s ease-in-out infinite!important}
@keyframes felt-outline-pulse{0%,100%{-webkit-text-stroke-color:#ff5100;color:#fff}50%{-webkit-text-stroke-color:#fff;color:#fff}}

/* Each character shifts from orange to pale orange in sequence, with no travel across the headline. */
.hero-copy h1{background:none!important;animation:none!important;color:var(--orange)!important;-webkit-text-fill-color:var(--orange)!important}
.hero-copy h1 .hero-letter{display:inline-block;color:var(--orange)!important;-webkit-text-fill-color:currentColor!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;animation:hero-letter-warmth 14s ease-in-out infinite}
@keyframes hero-letter-warmth{0%,100%{color:#ff5100}44%,56%{color:#ffd4c2}}
.hero-letter--1{animation-delay:0s!important}.hero-letter--2{animation-delay:1s!important}.hero-letter--3{animation-delay:2s!important}.hero-letter--4{animation-delay:3s!important}.hero-letter--5{animation-delay:4s!important}.hero-letter--6{animation-delay:5s!important}.hero-letter--7{animation-delay:6s!important}.hero-letter--8{animation-delay:7s!important}.hero-letter--9{animation-delay:8s!important}.hero-letter--10{animation-delay:9s!important}.hero-letter--11{animation-delay:10s!important}.hero-letter--12{animation-delay:11s!important}.hero-letter--13{animation-delay:12s!important}.hero-letter--14{animation-delay:13s!important}

/* Enlarge the project rail, make it full-bleed and tighten the vertical section spacing. */
.work.section{padding:46px 0 34px}.work .section-heading,.work .credit{margin-left:6%;margin-right:6%}.work .projects{padding:0 0 18px;gap:28px}.work .project{flex-basis:min(37.2vw,468px)}
@media(max-width:1100px){.work .project{flex-basis:min(51.6vw,468px)}}
@media(max-width:700px){.work.section{padding:36px 0 28px}.work .project{flex-basis:92vw}.work .projects{gap:18px}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 .hero-letter{animation:none;color:var(--orange)!important}}

/* An art-led, liquid white-and-orange movement within the hero lettering. */
.hero-copy h1,.hero-copy h1 span{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero-copy h1{background:radial-gradient(72% 126% at 14% 48%,#fff 0 24%,transparent 54%),radial-gradient(70% 120% at 84% 42%,#ff5100 0 22%,transparent 57%),radial-gradient(56% 110% at 47% 75%,#ffd4c1 0 19%,transparent 62%),linear-gradient(115deg,#fff 0%,#fff 27%,#ffb28e 45%,#ff5100 58%,#fff 79%,#fff 100%);background-size:170% 160%,190% 180%,150% 190%,150% 150%;background-position:0% 50%,100% 25%,45% 90%,0% 50%;animation:hero-liquid-colour 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hero-liquid-colour{0%,100%{background-position:0% 50%,100% 25%,45% 90%,0% 50%;background-size:170% 160%,190% 180%,150% 190%,150% 150%}25%{background-position:62% 10%,28% 75%,92% 25%,55% 40%;background-size:210% 120%,140% 220%,210% 140%,200% 110%}50%{background-position:100% 70%,0% 40%,20% 10%,100% 50%;background-size:150% 210%,210% 140%,130% 220%,120% 190%}75%{background-position:42% 90%,72% 5%,78% 75%,45% 65%;background-size:220% 145%,155% 205%,205% 135%,185% 155%}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;background-position:50% 50%,50% 50%,50% 50%,50% 50%}}

/* Ensure the gradient is clipped to the type itself; a soft orange highlight travels and reverses. */
.hero-copy h1,.hero-copy h1 span{color:transparent!important;-webkit-text-fill-color:transparent;-webkit-background-clip:text!important;background-clip:text!important}
.hero-copy h1{overflow:visible;padding-right:.16em;background:linear-gradient(90deg,#fff 0%,#fff 34%,#ffd1be 44%,#ff5100 50%,#ffd1be 56%,#fff 66%,#fff 100%);background-size:210% 100%;animation:hero-soft-colour-sweep 7s ease-in-out infinite}
@keyframes hero-soft-colour-sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.hero-copy h1{animation:none;background-position:50% 50%}}

/* Final hero and rail treatment. Kept last so it takes precedence over earlier experiments. */
.hero-copy h1,.hero-copy h1 .hero-letter{background:none!important;animation:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-background-clip:initial!important;background-clip:initial!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#ff5100!important;-webkit-text-fill-color:#ff5100!important;animation:felt-breathe 5.5s ease-in-out infinite!important}
@keyframes felt-breathe{0%,100%{color:#ff5100;-webkit-text-fill-color:#ff5100}50%{color:#fff1eb;-webkit-text-fill-color:#fff1eb}}
.work.section{padding:66px 0 58px!important}.work .projects{padding:0 3.5% 24px!important;gap:28px}.work .section-heading,.work .credit{margin-left:6%;margin-right:6%}
@media(max-width:700px){.work.section{padding:52px 0 46px!important}.work .projects{padding:0 5% 22px!important}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{animation:none!important;color:#ff5100!important;-webkit-text-fill-color:#ff5100!important}}

/* Final override: clear Poppins Light title, close X markers, and a visible FELT outline. */
.hero-copy h1,.hero-copy h1 .hero-letter{font-family:'Poppins',sans-serif!important;font-weight:300!important}
.marked-heading{gap:7px!important}
.marked-heading::before{margin-right:0!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.25px #ff5100!important;text-shadow:0 0 0 rgba(255,81,0,0);animation:felt-outline-pulse-visible 3.4s ease-in-out infinite!important}
@keyframes felt-outline-pulse-visible{0%,100%{-webkit-text-stroke-color:#ff5100;text-shadow:0 0 0 rgba(255,81,0,0)}50%{-webkit-text-stroke-color:#fff;text-shadow:0 0 12px rgba(255,81,0,.9)}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{-webkit-text-stroke-color:#ff5100!important;animation:none!important}}

/* Final finish: FELT stays white while its outline pulses from white to orange. */
.marked-heading{align-items:center!important}
.marked-heading::before{align-self:center!important;margin-top:0!important}
.hero-copy h1 .hero-letter--10,.hero-copy h1 .hero-letter--11,.hero-copy h1 .hero-letter--12,.hero-copy h1 .hero-letter--13{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.1px #fff!important;animation:felt-orange-outline-pulse-final 2.8s ease-in-out infinite!important}
@keyframes felt-orange-outline-pulse-final{0%,100%{-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:1.1px;text-shadow:0 0 0 rgba(255,81,0,0)}50%{-webkit-text-stroke-color:#ff5100;-webkit-text-stroke-width:3.6px;text-shadow:0 0 14px rgba(255,81,0,1),0 0 36px rgba(255,81,0,.86),0 0 74px rgba(255,81,0,.62)}}

/* Mobile-safe hero: retain the poster until video playback is confirmed. */
.hero-poster{position:absolute;inset:0;z-index:0;display:block}
.hero-poster img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-video{z-index:1;opacity:0;visibility:hidden;transition:opacity .45s ease}
.hero-video.is-playing{opacity:1;visibility:visible}
.hero-image::after{z-index:2;pointer-events:none}
@media(max-width:700px){.hero-poster img{object-position:58% center}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none!important}}

/* FELT returns to a clean, static white treatment. */
.hero-felt{position:relative;display:inline-block;padding:0;margin:0}
.hero-felt::after{content:none}
.hero-copy h1 .hero-felt .hero-letter{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:0 transparent!important;text-shadow:none!important;animation:none!important}