@font-face{font-family:MicroBold;src:url("../fonts/microgbe.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#09090a;--paper:#dbdbdb;--plum:#5e1751;--purple:#772269;--mauve:#895e84;--acid:#d7ff00;--line:rgba(255,255,255,.19);--darkline:rgba(0,0,0,.17);--pad:clamp(22px,4.4vw,72px);--max:1680px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#fff;font-family:Micro,Arial,sans-serif;overflow-x:hidden}button,input,textarea{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}img,video{display:block;width:100%}.view{display:none}.view.active{display:block}.wrap{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto}
.kicker{font:700 12px/1 Micro,Arial;letter-spacing:.2em;text-transform:uppercase}.display{font-family:MicroBold,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.86;font-size:clamp(60px,9vw,160px);margin:0}.display.sm{font-size:clamp(54px,7vw,118px)}.headline{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(46px,6vw,98px);line-height:.9;letter-spacing:.005em;margin:0}.subhead{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(32px,4vw,64px);line-height:.92;margin:0}.body-lg{font-size:clamp(17px,1.35vw,23px);line-height:1.52;max-width:720px}.muted{color:#a9a7aa}.paper{background:var(--paper);color:#111}.plum{background:var(--plum)}
.navbar{position:fixed;z-index:100;left:0;right:0;top:0;height:86px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#080809d9,#08080900);transition:.3s}.navbar.solid{background:#09090af2;border-bottom:1px solid #ffffff12}.logo{border:0;background:none;cursor:pointer;padding:0}.logo img{width:238px;max-height:42px;object-fit:contain;filter:none}.navlinks{display:flex;gap:30px;align-items:center}.navlinks button{border:0;background:none;text-transform:uppercase;letter-spacing:.16em;font-size:11px;cursor:pointer;opacity:.78;padding:10px 0}.navlinks button:hover{opacity:1}.navlinks .start{border:1px solid #ffffff55;border-radius:999px;padding:12px 16px}.menu{display:none;border:0;background:none;font-size:21px}.mobilepanel{display:none;position:fixed;inset:72px 0 auto 0;z-index:99;background:#09090af7;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;padding:22px var(--pad)}.mobilepanel.open{display:grid}.mobilepanel button{background:none;border:0;border-bottom:1px solid #ffffff20;text-align:left;padding:18px 0;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#080808}.hero-media{position:absolute;inset:0;transform-origin:center;will-change:transform,opacity}.hero-media video{height:100%;object-fit:cover}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000002b 0,#00000025 37%,#000000e9 100%),linear-gradient(90deg,#000000a5,transparent 60%)}.hero-copy{position:relative;z-index:2;padding:160px 0 58px}.hero-copy .display{max-width:1300px}.hero-copy .lead{display:grid;grid-template-columns:1fr minmax(260px,460px);gap:34px;align-items:end;margin-top:30px;border-top:1px solid #ffffff44;padding-top:20px}.hero-copy .lead p{margin:0;color:#e6e4e5;line-height:1.5;font-size:15px}.hero-copy .lead .actions{display:flex;gap:12px;justify-content:flex-end}.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;border-radius:999px;padding:13px 17px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;background:none;cursor:pointer}.btn.fill{background:#fff;color:#111;border-color:#fff}.btn.dark{background:#111;color:#fff;border-color:#111}.btn:hover .arr{transform:translateX(4px)}.arr{transition:.2s}.scrolltag{position:absolute;z-index:3;right:var(--pad);bottom:48px;writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:#aaa}
.clientbar{background:#fff;color:#111;border-bottom:1px solid #ddd;overflow:hidden}.clientbar .marquee{padding:19px 0;display:flex;gap:42px;white-space:nowrap;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}.clientbar span:after{content:"/";margin-left:42px;color:#8c1c75}
.section{padding:110px 0}.section.tight{padding:72px 0}.section-head{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:40px;align-items:end;margin-bottom:52px}.section-head p{margin:0;line-height:1.6;color:#aaa}.section-head.paperhead p{color:#555}
.feature{display:grid;grid-template-columns:1.55fr .8fr;gap:18px}.project-card{position:relative;border:0;background:#161618;padding:0;color:#fff;min-height:560px;overflow:hidden;text-align:left;cursor:pointer}.project-card.small{min-height:420px}.project-card img,.project-card video{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 43%,#000000d9 100%)}.project-card:hover img,.project-card:hover video{transform:scale(1.025)}.project-card .meta{position:absolute;z-index:2;left:24px;right:24px;bottom:23px}.project-card .meta small{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px;color:#d2ced2}.project-card .meta h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-weight:400;line-height:.92;font-size:clamp(30px,3.1vw,50px);margin:0}.project-card .meta .type{margin-top:10px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#aaa}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.image{overflow:hidden;position:relative}.image img{height:100%;object-fit:cover}.ratio-land{aspect-ratio:16/10}.ratio-wide{aspect-ratio:16/8}.ratio-port{aspect-ratio:4/5}.ratio-square{aspect-ratio:1}
.idea{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.idea .big{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(58px,8vw,138px);line-height:.85;margin:0}.idea .big em{font-style:normal;color:#a5328f}.idea-copy{padding-top:14px}.pillars{border-top:1px solid #ffffff32;margin-top:42px}.pillar{display:grid;grid-template-columns:110px 1fr 60px;gap:25px;padding:25px 0;border-bottom:1px solid #ffffff32;align-items:center}.pillar b{font-size:11px;letter-spacing:.15em;color:#c37cb7}.pillar h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:42px;font-weight:400;margin:0}.pillar span{color:#aaa;font-size:12px}
.services3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--darkline);border-left:1px solid var(--darkline)}.servicebox{min-height:390px;padding:34px;border-right:1px solid var(--darkline);border-bottom:1px solid var(--darkline);display:flex;flex-direction:column;justify-content:space-between}.servicebox .num{font-size:11px;letter-spacing:.18em;color:#772269}.servicebox h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(34px,3.5vw,58px);font-weight:400;line-height:.9;margin:0}.servicebox p{font-size:14px;line-height:1.55;color:#555}.servicebox button{align-self:flex-start}
.autofocus{display:grid;grid-template-columns:1fr 1fr;min-height:760px}.autofocus .visual{position:relative;overflow:hidden}.autofocus .visual img{height:100%;object-fit:cover}.autofocus .copy{padding:80px var(--pad);display:flex;flex-direction:column;justify-content:center}.autofocus .copy .headline{margin:14px 0 25px}.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.tag{border:1px solid #ffffff40;border-radius:999px;padding:9px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.recent-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#333}.recent-strip button{border:0;padding:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:#111;cursor:pointer;color:#fff}.recent-strip img{height:100%;object-fit:cover}.recent-strip button:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0009)}.recent-strip span{position:absolute;z-index:2;left:20px;bottom:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cta{padding:120px 0;background:#fff;color:#111}.cta .display{font-size:clamp(66px,9.5vw,170px)}.cta .accent{color:#7f1d6f}.cta-bottom{display:flex;justify-content:space-between;gap:30px;align-items:end;border-top:1px solid #bbb;padding-top:28px;margin-top:45px}.cta-bottom p{max-width:560px;color:#555;line-height:1.55;margin:0}.footer{padding:54px 0 70px;border-top:1px solid #ffffff17;background:#080809}.footer-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:50px}.footer img{width:240px;margin-bottom:22px}.footer p,.footer a{font-size:12px;line-height:1.8;color:#9f9ba0}.footer h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 13px}
.subhero{min-height:68vh;padding:170px 0 74px;display:flex;align-items:end;background:linear-gradient(135deg,#0a0a0b 10%,#39122f 100%)}.subhero .body-lg{margin-top:27px}.workpage{padding:70px 0 120px}.work-indicators{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:34px;padding:11px 0;font:500 10px/normal "Gotham Medium",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.workgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.workgrid .project-card{grid-column:span 6}.workgrid .project-card.w7{grid-column:span 7}.workgrid .project-card.w5{grid-column:span 5}.workgrid .project-card.w4{grid-column:span 4}.workgrid .project-card.w8{grid-column:span 8}
.servicespage{padding:100px 0 120px}.servicerow{display:grid;grid-template-columns:80px 1fr 1fr;gap:42px;padding:35px 0;border-top:1px solid #b8b6b1}.servicerow:last-child{border-bottom:1px solid #b8b6b1}.servicerow .number{font-size:11px;letter-spacing:.15em;color:#6e1a61}.servicerow h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(38px,4vw,66px);font-weight:400;margin:0;line-height:.9}.servicerow p{margin:0;color:#555;line-height:1.55}.capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}.capability{padding:24px;border:1px solid #c8c5c0;min-height:160px}.capability b{font-size:11px;letter-spacing:.14em;text-transform:uppercase}.capability p{font-size:13px;line-height:1.5;color:#666;margin:25px 0 0}
.about-hero{min-height:84vh;position:relative;display:flex;align-items:end;overflow:hidden}.about-hero img{position:absolute;inset:0;height:100%;object-fit:cover}.about-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000d,transparent 75%),linear-gradient(0deg,#000c,transparent 65%)}.about-hero .copy{position:relative;z-index:2;padding:160px 0 70px}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#ffffff30;margin-top:42px}.value{background:#111;padding:28px;min-height:190px}.value b{font-size:10px;letter-spacing:.15em;color:#bd6bad}.value h4{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:32px;font-weight:400;margin:38px 0 0}.value p{color:#aaa;line-height:1.5;font-size:13px}
.contactpage{min-height:100vh;background:var(--paper);color:#111;padding:155px 0 80px}.contactgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.contactgrid .display{font-size:clamp(58px,7.5vw,124px)}.contact-links{margin-top:45px;border-top:1px solid #bbb}.contact-links a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #bbb;font-size:12px;text-transform:uppercase;letter-spacing:.12em}form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#666}input,textarea{border:0;border-bottom:1px solid #aaa;background:transparent;padding:14px 0;outline:none;color:#111}textarea{min-height:125px;resize:vertical}.submit{grid-column:1/-1;border:0;border-radius:999px;background:#111;color:#fff;padding:17px;cursor:pointer;margin-top:8px;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.project{position:fixed;inset:0;z-index:140;background:#09090a;overflow:auto;display:none}.project.open{display:block}.close{position:fixed;z-index:160;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff66;background:#09090acc;color:#fff;cursor:pointer;font-size:22px}.project-head{position:relative;min-height:92vh;display:flex;align-items:end;overflow:hidden}.project-head>img,.project-head>video{position:absolute;inset:0;height:100%;object-fit:cover}.project-head:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0002 25%,#000d 100%)}.project-head .copy{position:relative;z-index:2;padding:150px 0 55px}.project-head .copy h1{font-family:MicroBold,Impact,sans-serif;font-size:clamp(58px,8vw,138px);font-weight:400;text-transform:uppercase;line-height:.85;margin:0}.project-head .copy .projectmeta{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;color:#bbb;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.project-intro{padding:85px 0}.project-intro .inner{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}.project-intro p{font-size:clamp(17px,1.45vw,24px);line-height:1.55;margin:0}.project-intro .label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#999}.project-gallery{padding-bottom:100px}.project-gallery .full{margin:0 0 18px}.project-gallery img{object-fit:cover}.project-gallery .caption{font-size:10px;color:#8e898e;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}.project-gallery .duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.project-gallery .duo.uneven{grid-template-columns:.72fr 1.28fr}.project-gallery .duo .image{min-height:520px}.project-gallery .full .image{min-height:720px}.project-next{border-top:1px solid #ffffff23;padding:70px 0}.project-next button{border:0;background:none;color:#fff;text-align:left;cursor:pointer}.project-next h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(44px,6vw,96px);margin:12px 0 0}
/* varied project themes */
.project.beau{background:#e4d2dd;color:#46143d}.project.beau .project-head:after{background:linear-gradient(180deg,#4c103755,#3a082fd9)}.project.beau .project-head .copy{color:#fff}.project.beau .project-head .projectmeta{color:#f1dbe9}.project.beau .project-intro .label,.project.beau .caption{color:#73496b}.project.beau .project-next{border-color:#6e456866}.project.beau .project-next button{color:#46143d}.project.property{background:var(--paper);color:#111}.project.property .project-head:after{background:linear-gradient(180deg,#0000,#0008)}.project.property .project-intro .label,.project.property .caption{color:#666}.project.property .project-next{border-color:#0002}.project.property .project-next button{color:#111}
.showreelmodal{display:none;position:fixed;inset:0;z-index:6500;background:#000;align-items:center;justify-content:center;width:100%;height:100%;height:100dvh}.showreelmodal.open{display:flex}.showreelmodal video{width:100%;height:100%;object-fit:contain}.showreelmodal .close{z-index:6501;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}.video-frame{position:relative;overflow:hidden;background:#111}.video-frame video{height:100%;object-fit:cover}.video-frame.land{aspect-ratio:16/9}.video-frame.port{aspect-ratio:4/5}.playhint{position:absolute;left:18px;bottom:17px;background:#0009;border:1px solid #ffffff55;border-radius:999px;padding:9px 12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;z-index:4}
@media(max-width:900px){.navbar{height:72px}.logo img{width:184px}.navlinks{display:none}.menu{display:block}.display{font-size:clamp(56px,14vw,105px)}.hero-copy{padding-top:130px}.hero-copy .lead,.section-head,.idea,.autofocus,.about-grid,.contactgrid,.project-intro .inner{grid-template-columns:1fr}.hero-copy .lead .actions{justify-content:flex-start}.feature,.grid2,.grid3,.grid4{grid-template-columns:1fr}.feature .project-card,.project-card{min-height:500px}.services3{grid-template-columns:1fr}.autofocus{grid-template-columns:1fr}.autofocus .visual{min-height:520px}.pillar{grid-template-columns:75px 1fr 35px}.recent-strip{grid-template-columns:1fr}.workgrid .project-card,.workgrid .project-card.w7,.workgrid .project-card.w5,.workgrid .project-card.w4,.workgrid .project-card.w8{grid-column:span 12}.servicerow{grid-template-columns:55px 1fr}.servicerow p{grid-column:2}.capabilities{grid-template-columns:1fr 1fr}.values{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.project-gallery .duo,.project-gallery .duo.uneven{grid-template-columns:1fr}.project-gallery .duo .image,.project-gallery .full .image{min-height:auto;aspect-ratio:4/3}.scrolltag{display:none}}
@media(max-width:560px){:root{--pad:20px}.section{padding:82px 0}.hero-copy .display{font-size:clamp(42px,11.6vw,54px);line-height:.9}.hero-copy .kicker{max-width:330px}.hero-copy .lead{gap:20px}.hero-copy .lead .actions{flex-wrap:wrap}.project-card{min-height:420px}.capabilities{grid-template-columns:1fr}.contactgrid{gap:55px}form{grid-template-columns:1fr}.field.full,.submit{grid-column:1}.cta-bottom{display:block}.cta-bottom .btn{margin-top:24px}.project-head .copy h1{font-size:clamp(52px,16vw,88px)}}

/* V29 TYPOGRAPHY HIERARCHY
   Microgramma Bold = main hero / major statement headings for this test.
   Microgramma Bold = section headings, subheads, cards and supporting display type. */
.headline,
.subhead,
.project-card .meta h3,
.pillar h3,
.servicebox h3,
.servicerow h3,
.value h4,
.project-next h3{
  font-family:MicroBold,Micro,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
}
.headline{font-size:clamp(38px,5vw,78px)!important;line-height:.94!important}
.subhead{font-size:clamp(28px,3.25vw,52px)!important;line-height:.98!important}
.project-card .meta h3{font-size:clamp(24px,2.25vw,38px)!important;line-height:1!important}
.pillar h3{font-size:clamp(28px,3vw,42px)!important}
.servicebox h3{font-size:clamp(28px,3vw,46px)!important;line-height:.98!important}
.servicerow h3{font-size:clamp(30px,3.4vw,52px)!important;line-height:.98!important}
.value h4{font-size:clamp(24px,2.4vw,34px)!important}
.project-next h3{font-size:clamp(34px,4.5vw,68px)!important;line-height:.96!important}


/* Header social links use the existing brand marks and destinations. */
.header-socials{display:flex;align-items:center;gap:4px;flex-shrink:0}
.header-social-link{display:flex;align-items:center;justify-content:center;width:32px;height:40px;color:inherit;opacity:.78;text-decoration:none;transition:opacity .18s ease,color .18s ease}
.header-social-link svg{display:block;width:17px;height:17px;fill:none;flex-shrink:0}
.header-social-link:hover,.header-social-link:focus-visible{opacity:1;color:#bd6bad}
.header-social-link:focus-visible{outline:2px solid #895e84;outline-offset:2px}
.mobilepanel-contact{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mobilepanel-contact .header-socials{gap:2px}
@media(max-width:1100px){
 .navbar .navlinks{display:none!important}
 .navbar .menu{display:block!important}
 #mobilepanel{display:grid!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
 #mobilepanel.open{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
}
@media(max-width:767px){#mobilepanel{top:72px!important}}
@media(min-width:768px) and (max-width:1100px){#mobilepanel{top:78px!important}}

/* V29 RECENT WORK CAROUSEL */
.recent-section{overflow:hidden}
.recent-carousel-shell{position:relative;width:100%;overflow:hidden;padding-bottom:54px}
.recent-carousel{
  display:flex;
  gap:1px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
  user-select:none;
  touch-action:pan-x pan-y pinch-zoom;
}
.recent-carousel::-webkit-scrollbar{display:none}
.recent-carousel.dragging{cursor:grabbing;scroll-behavior:auto}
.recent-item{
  flex:0 0 clamp(340px,34vw,660px);
  height:clamp(390px,36vw,650px);
  position:relative;
  border:0;
  padding:0;
  overflow:hidden;
  background:#111;
  color:#fff;
  cursor:inherit;
}
.recent-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .45s;
  pointer-events:none;
}
.recent-item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.78));
  pointer-events:none;
}
.recent-item span{
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:18px;
  font:700 11px/1.2 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  pointer-events:none;
}
.recent-item:hover img{transform:scale(1.025);filter:brightness(1.04)}
.recent-carousel-hint{
  position:absolute;
  right:var(--pad);
  bottom:14px;
  display:flex;
  gap:12px;
  align-items:center;
  font:700 10px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#8f8d91;
}
.image-viewer{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(5,5,6,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,60px);
  backdrop-filter:blur(12px);
}
.image-viewer.open{display:flex}
.image-viewer img{
  max-width:min(92vw,1600px);
  max-height:84vh;
  object-fit:contain;
  box-shadow:0 30px 100px rgba(0,0,0,.45);
}
.viewer-close{
  position:absolute;
  top:22px;
  right:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}
.viewer-caption{
  position:absolute;
  left:var(--pad);
  bottom:24px;
  font:700 11px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#ddd;
}
@media(max-width:800px){
  .recent-item{flex-basis:82vw;height:56vh;min-height:440px}
  .recent-carousel-hint{right:20px}
}


/* V30 case study system */
.project{background:#0b0b0d;color:#fff}.project .project-head .copy h1{font-family:MicroBold,Arial,sans-serif}.project .project-head .kicker,.project .project-head .projectmeta{font-family:MicroBold,Micro,Arial,sans-serif}
.pcopy{padding:86px 0;background:#0e0e10}.pcopy.light{background:var(--paper);color:#111}.pcopy.warm{background:#d8c4a2;color:#18120d}.pcopy .inside{display:grid;grid-template-columns:.64fr 1.36fr;gap:70px}.pcopy h2{font-family:MicroBold,Micro,Arial,sans-serif;font-size:clamp(34px,4vw,62px);line-height:.98;text-transform:uppercase;margin:0}.pcopy p{font-family:Micro,Arial,sans-serif;font-size:clamp(16px,1.35vw,21px);line-height:1.68;color:#c9c5ca;margin:0}.pcopy.light p{color:#555}.pcopy.warm p{color:#3c3129}.plabel{font:700 10px MicroBold,Micro,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9d979e;margin-bottom:16px}
.pfilm{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:12px var(--pad) 90px}.pfilm::-webkit-scrollbar{display:none}.pfilm figure{flex:0 0 min(70vw,980px);margin:0;overflow:hidden}.pfilm figure:nth-child(even){flex-basis:min(45vw,680px)}.pfilm img{width:100%;height:clamp(420px,54vw,720px);object-fit:cover;cursor:zoom-in}
.pmasonry{columns:3 300px;column-gap:14px;padding:14px var(--pad) 94px}.pmasonry figure{break-inside:avoid;margin:0 0 14px;overflow:hidden}.pmasonry img{width:100%;height:auto;cursor:zoom-in}
.peditorial{display:grid;grid-template-columns:1.08fr .92fr;gap:16px;padding:14px var(--pad) 92px}.peditorial figure{margin:0;overflow:hidden}.peditorial>.heroimg{min-height:850px}.peditorial .stack{display:grid;gap:16px}.peditorial .stack figure{min-height:417px}.peditorial img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:14px var(--pad) 94px}.pgrid figure{margin:0;position:relative;overflow:hidden;min-height:470px}.pgrid .w8{grid-column:span 8}.pgrid .w4{grid-column:span 4}.pgrid .w6{grid-column:span 6}.pgrid .w12{grid-column:span 12;min-height:680px}.pgrid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pclean{background:var(--paper);padding:72px var(--pad) 96px}.pclean .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pclean figure{margin:0;overflow:hidden;min-height:420px;background:#fff}.pclean figure:first-child{grid-column:span 2;min-height:590px}.pclean figure:nth-child(4){grid-column:span 2}.pclean img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pfull{margin:0;overflow:hidden}.pfull img{width:100%;height:min(85vh,900px);object-fit:cover;cursor:zoom-in}.ppair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px var(--pad) 94px}.ppair figure{margin:0;min-height:650px;overflow:hidden}.ppair img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pvideos{display:grid;grid-template-columns:.82fr 1.18fr;gap:14px;padding:14px var(--pad) 92px}.pvideo{position:relative;min-height:680px;overflow:hidden;background:#000}.pvideo:first-child{min-height:760px}.pvideo video{width:100%;height:100%;object-fit:cover}.vlabel{position:absolute;left:14px;bottom:14px;border:1px solid #ffffff4a;border-radius:999px;background:#000a;padding:9px 12px;font:700 9px MicroBold,Micro,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.project .project-next button,.project .project-next h3,.project .project-next .kicker{color:inherit!important}.project.property{background:var(--paper);color:#111}.project.property .project-next{background:var(--paper);color:#111;border-color:#0002}.project.beau{background:var(--paper);color:#181514}.project.beau .project-next{background:var(--paper);color:#181514;border-color:#0002}
/* Replace white name strip with logo carousel under Proof First */
.clientbar{display:none!important}.logo-loop{background:#0d0d0f;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;overflow:hidden;padding:28px 0}.logo-loop-track{display:flex;align-items:center;gap:70px;width:max-content;animation:logoDrift 34s linear infinite}.logo-mark{min-width:150px;height:54px;display:flex;align-items:center;justify-content:center;color:#d7d4d8;white-space:nowrap;font-family:MicroBold,Micro,Arial,sans-serif;font-size:15px;letter-spacing:.05em;text-transform:uppercase;opacity:.82}.logo-mark strong{font-size:20px;letter-spacing:.01em}.logo-mark.round{border:1px solid #ffffff45;border-radius:999px;padding:0 18px}.logo-mark.fine{font-family:Micro,Arial,sans-serif;font-size:13px;letter-spacing:.14em}.logo-loop-label{padding:0 var(--pad) 18px;font:700 9px MicroBold,Micro,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#777}@keyframes logoDrift{to{transform:translateX(-50%)}}
@media(max-width:900px){.pcopy .inside{grid-template-columns:1fr;gap:28px}.peditorial,.pvideos,.ppair{grid-template-columns:1fr}.peditorial>.heroimg,.peditorial .stack figure{min-height:auto;aspect-ratio:4/3}.pgrid{grid-template-columns:1fr}.pgrid figure,.pgrid .w8,.pgrid .w4,.pgrid .w6,.pgrid .w12{grid-column:1;min-height:auto;aspect-ratio:4/3}.pclean .grid{grid-template-columns:1fr}.pclean figure,.pclean figure:first-child,.pclean figure:nth-child(4){grid-column:1;min-height:auto;aspect-ratio:4/3}.ppair figure{min-height:auto;aspect-ratio:4/3}.pvideo,.pvideo:first-child{min-height:540px}.pfilm figure,.pfilm figure:nth-child(even){flex-basis:82vw}.pfilm img{height:55vh;min-height:400px}}


/* V31 — real client logo carousel under Proof First */
.logo-loop{
  background:#0d0d0f;
  border-top:1px solid #ffffff12;
  border-bottom:1px solid #ffffff12;
  overflow:hidden;
  padding:26px 0 30px;
}
.logo-loop-label{
  padding:0 var(--pad) 18px;
  font:700 9px MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#777;
}
.logo-loop-viewport{
  width:100%;
  overflow:hidden;
}
.logo-loop-track{
  display:flex;
  width:max-content;
  animation:clientLogoDrift 46s linear infinite;
  will-change:transform;
}
.logo-sequence{
  display:flex;
  align-items:center;
  gap:72px;
  padding-right:72px;
  flex:none;
}
.client-logo-item{
  width:215px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  opacity:.82;
}
.client-logo-item img{
  width:auto;
  height:auto;
  max-width:200px;
  max-height:70px;
  object-fit:contain;
  display:block;
}
@keyframes clientLogoDrift{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}


/* V33 — editorial white client pages + layered image compositions */
.project{
  background:var(--paper)!important;
  color:#111!important;
}
.project .close{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}

/* Contained client-page hero rather than full-screen image walls */
.project .project-head{
  min-height:68vh!important;
  width:min(1500px,calc(100% - 2*var(--pad)))!important;
  margin:96px auto 0!important;
  overflow:hidden!important;
  background:#111!important;
}
.project .project-head>img,
.project .project-head>video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.project .project-head:after{
  background:linear-gradient(180deg,rgba(0,0,0,.14) 15%,rgba(0,0,0,.78) 100%)!important;
}
.project .project-head .copy,
.project .project-head .copy h1,
.project .project-head .kicker,
.project .project-head .projectmeta{
  color:#fff!important;
}
.project .project-head .copy{
  padding:110px 0 44px!important;
}

/* White editorial text sections */
.project .pcopy,
.project .pcopy.light,
.project .pcopy.warm{
  background:var(--paper)!important;
  color:#111!important;
  padding:76px 0!important;
}
.project .pcopy p,
.project .pcopy.light p,
.project .pcopy.warm p{
  color:#555!important;
}
.project .pcopy h2{
  color:#111!important;
}
.project .project-note{
  color:#7c777d!important;
}

/* Keep all galleries contained and calmer */
.project .pfilm,
.project .pgrid,
.project .peditorial,
.project .pclean,
.project .pvideos,
.project .ppair,
.project .pfull{
  width:min(1380px,calc(100% - 2*var(--pad)))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.project .pfilm{padding-left:0!important;padding-right:0!important;padding-bottom:72px!important}
.project .pfilm figure{flex-basis:min(52vw,780px)!important}
.project .pfilm figure:nth-child(even){flex-basis:min(34vw,520px)!important}
.project .pfilm img{height:clamp(360px,38vw,560px)!important}

.project .pgrid{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:78px!important;
}
.project .pgrid figure{min-height:320px!important}
.project .pgrid .w12{min-height:500px!important}

.project .peditorial{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:78px!important;
}
.project .peditorial>.heroimg{min-height:650px!important}
.project .peditorial .stack figure{min-height:315px!important}

.project .pclean{
  width:min(1380px,calc(100% - 2*var(--pad)))!important;
  padding:60px 0 76px!important;
  background:transparent!important;
}
.project .pclean figure{min-height:340px!important}
.project .pclean figure:first-child{min-height:500px!important}

.project .ppair{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:78px!important;
}
.project .ppair figure{min-height:440px!important}

.project .pfull{
  overflow:hidden!important;
  margin-bottom:70px!important;
}
.project .pfull img{height:560px!important;object-fit:cover!important}

.project .pvideos{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:76px!important;
}
.project .pvideo,
.project .pvideo:first-child{
  min-height:520px!important;
}

/* Consistent light next-project region */
.project .project-next{
  background:var(--paper)!important;
  color:#111!important;
  border-color:#0002!important;
}
.project .project-next button,
.project .project-next h3,
.project .project-next .kicker{
  color:#111!important;
}

/* Layered editorial image effect inspired by the company profile */
.layered-editorial{
  background:var(--paper);
  padding:10px 0 96px;
}
.layered-stage{
  position:relative;
  width:min(1500px,calc(100% - 2*var(--pad)));
  height:clamp(560px,63vw,820px);
  margin:auto;
  overflow:hidden;
  background:#111;
}
.layered-background{
  position:absolute;
  inset:0;
}
.layered-background:after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
}
.layered-background img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.8);
}
.layered-caption{
  position:absolute;
  z-index:3;
  left:34px;
  top:30px;
  color:#fff;
  font:700 10px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.layered-card{
  position:absolute;
  z-index:2;
  margin:0;
  overflow:hidden;
  background:#ddd;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.layered-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.layered-card-a{
  width:42%;
  height:63%;
  left:7%;
  bottom:8%;
}
.layered-card-b{
  width:36%;
  height:49%;
  right:7%;
  top:11%;
}
#project-ferrari .layered-card-a{
  width:48%;
  height:58%;
  left:6%;
  bottom:9%;
}
#project-ferrari .layered-card-b{
  width:29%;
  height:61%;
  right:8%;
  top:12%;
}
#project-bmw .layered-card-a{
  width:36%;
  height:66%;
  left:9%;
  bottom:8%;
}
#project-bmw .layered-card-b{
  width:42%;
  height:52%;
  right:7%;
  top:13%;
}

@media(max-width:900px){
  .project .project-head{
    min-height:62vh!important;
    width:calc(100% - 40px)!important;
    margin-top:82px!important;
  }
  .layered-stage{
    width:calc(100% - 40px);
    height:620px;
  }
  .layered-card-a{
    width:72%!important;
    height:45%!important;
    left:7%!important;
    bottom:7%!important;
  }
  .layered-card-b{
    width:58%!important;
    height:34%!important;
    right:7%!important;
    top:9%!important;
  }
}

/* V34 — editorial copy alignment and column rhythm */

/* Headings and their companion copy align from the SAME visual top edge.
   Small labels sit above the heading and no longer push the heading downward. */
.section-head{
  align-items:start!important;
}
.section-head > div:first-child{
  position:relative;
}
.section-head > div:first-child > .kicker{
  position:absolute;
  top:-24px;
  left:0;
  margin:0;
}
.section-head > p{
  align-self:start!important;
  margin-top:0!important;
}

/* Client/project copy: heading and paragraph begin on the same horizontal line. */
.pcopy .inside{
  align-items:start!important;
}
.pcopy .inside > div:first-child{
  position:relative;
}
.pcopy .inside > div:first-child > .plabel{
  position:absolute;
  top:-24px;
  left:0;
  margin:0;
}
.pcopy .inside h2,
.pcopy .inside > p{
  margin-top:0!important;
}

/* Long project body copy becomes an editorial two/three-column read.
   Shorter copy stays as a single block so we don't force columns where they do not help. */
.editorial-columns{
  column-fill:balance;
  column-gap:34px;
  text-wrap:pretty;
}
.editorial-columns.cols-2{
  column-count:2;
}
.editorial-columns.cols-3{
  column-count:3;
}
.editorial-columns::first-letter{
  /* no drop-cap; preserve the clean Lighthouse language */
}

/* About page: use the two existing paragraphs as two editorial columns,
   while keeping the values grid full-width below them. */
.about-editorial-copy{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:38px!important;
  row-gap:0!important;
  align-items:start!important;
}
.about-editorial-copy > .body-lg{
  margin-top:0!important;
  margin-bottom:0!important;
}
.about-editorial-copy > .values{
  grid-column:1 / -1!important;
  margin-top:48px!important;
}

/* Keep readable line lengths where a right-side paragraph is not columnised. */
.pcopy .inside > p:not(.editorial-columns){
  max-width:820px;
}

/* Mobile returns to natural single-column reading. */
@media(max-width:900px){
  .section-head > div:first-child > .kicker,
  .pcopy .inside > div:first-child > .plabel{
    position:static!important;
    margin-bottom:14px!important;
  }

  .editorial-columns.cols-2,
  .editorial-columns.cols-3{
    column-count:1!important;
  }

  .about-editorial-copy{
    grid-template-columns:1fr!important;
    row-gap:22px!important;
  }
  .about-editorial-copy > .values{
    grid-column:1!important;
    margin-top:26px!important;
  }
}

/* V35 — respect the native orientation of photography across galleries */

/* Project imagery now uses landscape boxes for landscape work,
   portrait boxes for portrait work, and square boxes for square work. */
.project figure.media-landscape{
  aspect-ratio:3 / 2!important;
  height:auto!important;
  min-height:0!important;
}
.project figure.media-portrait{
  aspect-ratio:4 / 5!important;
  height:auto!important;
  min-height:0!important;
}
.project figure.media-square{
  aspect-ratio:1 / 1!important;
  height:auto!important;
  min-height:0!important;
}
.project figure.media-landscape > img,
.project figure.media-portrait > img,
.project figure.media-square > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Horizontal race/photo strips inherit the actual orientation instead of
   forcing every image into the same tall frame. */
.project .pfilm figure.media-landscape img,
.project .pfilm figure.media-portrait img,
.project .pfilm figure.media-square img{
  height:100%!important;
}
.project .pfilm figure.media-landscape{
  flex-basis:min(54vw,820px)!important;
}
.project .pfilm figure.media-portrait{
  flex-basis:min(30vw,470px)!important;
}
.project .pfilm figure.media-square{
  flex-basis:min(36vw,560px)!important;
}

/* Portrait artwork no longer gets stretched across a near-full-width
   "full bleed" landscape slot. */
.project .pfull.media-portrait{
  width:min(680px,calc(100% - 2*var(--pad)))!important;
}
.project .pfull.media-square{
  width:min(820px,calc(100% - 2*var(--pad)))!important;
}
.project .pfull.media-landscape > img,
.project .pfull.media-portrait > img,
.project .pfull.media-square > img{
  height:100%!important;
}

/* Editorial grids preserve the source shape. */
.project .pgrid figure.media-landscape,
.project .pgrid figure.media-portrait,
.project .pgrid figure.media-square{
  min-height:0!important;
}
.project .pgrid figure.media-landscape img,
.project .pgrid figure.media-portrait img,
.project .pgrid figure.media-square img{
  position:absolute!important;
  inset:0!important;
  height:100%!important;
}

/* Clean galleries with mostly vertical event/product imagery no longer make
   the first portrait image an oversized two-column block. */
.project .pclean figure.media-portrait{
  grid-column:span 1!important;
}
.project .pclean figure.media-portrait:first-child{
  grid-column:span 1!important;
}
.project .pclean figure.media-landscape:first-child{
  grid-column:span 2!important;
}
.project .pclean figure.media-landscape img,
.project .pclean figure.media-portrait img,
.project .pclean figure.media-square img{
  height:100%!important;
}

/* Mixed two-up layouts are allowed to have different heights instead of
   cropping one orientation to match the other. */
.project .ppair{
  align-items:start!important;
}
.project .ppair figure.media-landscape,
.project .ppair figure.media-portrait,
.project .ppair figure.media-square{
  min-height:0!important;
}

/* Layered editorial compositions also follow the image orientation.
   This directly fixes landscape photographs appearing in portrait panels. */
.layered-card.media-landscape{
  width:44%!important;
  height:auto!important;
  aspect-ratio:3 / 2!important;
}
.layered-card.media-portrait{
  width:30%!important;
  height:auto!important;
  aspect-ratio:4 / 5!important;
}
.layered-card.media-square{
  width:34%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
}
#project-ferrari .layered-card.media-landscape,
#project-bmw .layered-card.media-landscape{
  width:44%!important;
  height:auto!important;
}
#project-ferrari .layered-card.media-portrait,
#project-bmw .layered-card.media-portrait{
  width:30%!important;
  height:auto!important;
}

/* Recently-at-Lighthouse carousel now varies the frame shape rather than
   putting every asset inside a tall uniform panel. */
.recent-item.media-landscape{
  flex-basis:clamp(420px,36vw,680px)!important;
  height:auto!important;
  aspect-ratio:3 / 2!important;
}
.recent-item.media-portrait{
  flex-basis:clamp(280px,24vw,430px)!important;
  height:auto!important;
  aspect-ratio:4 / 5!important;
}
.recent-item.media-square{
  flex-basis:clamp(330px,28vw,500px)!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
}

/* Mobile keeps the same logic rather than reverting everything to one shape. */
@media(max-width:900px){
  .project .pfilm figure.media-landscape{flex-basis:82vw!important}
  .project .pfilm figure.media-portrait{flex-basis:62vw!important}
  .project .pfilm figure.media-square{flex-basis:70vw!important}

  .recent-item.media-landscape{flex-basis:86vw!important}
  .recent-item.media-portrait{flex-basis:66vw!important}
  .recent-item.media-square{flex-basis:74vw!important}

  .layered-card.media-landscape{
    width:72%!important;
    aspect-ratio:3 / 2!important;
  }
  .layered-card.media-portrait{
    width:52%!important;
    aspect-ratio:4 / 5!important;
  }
}

/* V36 — paired images must align to one shared height.
   Orientation still influences WIDTH, but never creates mismatched bottoms. */
.project .ppair{
  display:grid!important;
  gap:14px!important;
  align-items:stretch!important;
}

.project .ppair.pair-balanced{
  grid-template-columns:1fr 1fr!important;
}
.project .ppair.pair-landscape-portrait{
  grid-template-columns:1.35fr .65fr!important;
}
.project .ppair.pair-portrait-landscape{
  grid-template-columns:.65fr 1.35fr!important;
}

.project .ppair > figure,
.project .ppair > figure.media-landscape,
.project .ppair > figure.media-portrait,
.project .ppair > figure.media-square{
  aspect-ratio:auto!important;
  min-height:0!important;
  height:clamp(430px,40vw,610px)!important;
  align-self:stretch!important;
}

.project .ppair > figure > img,
.project .ppair > figure.media-landscape > img,
.project .ppair > figure.media-portrait > img,
.project .ppair > figure.media-square > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Do the same for any two-item editorial stack presented as a deliberate pair. */
.project .peditorial .stack{
  grid-auto-rows:1fr!important;
}
.project .peditorial .stack > figure{
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.project .peditorial .stack > figure > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Mobile returns to natural stacked aspect ratios. */
@media(max-width:900px){
  .project .ppair,
  .project .ppair.pair-balanced,
  .project .ppair.pair-landscape-portrait,
  .project .ppair.pair-portrait-landscape{
    grid-template-columns:1fr!important;
  }

  .project .ppair > figure,
  .project .ppair > figure.media-landscape{
    height:auto!important;
    aspect-ratio:3/2!important;
  }
  .project .ppair > figure.media-portrait{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  .project .ppair > figure.media-square{
    height:auto!important;
    aspect-ratio:1/1!important;
  }
}

/* V37 — HARD RULE: grouped image layouts must square off.
   No ragged bottoms, orphaned short columns or mismatched outer edges. */

/* ---------- STANDARD PROJECT GRIDS ---------- */
.project .pgrid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:clamp(330px,30vw,460px)!important;
  gap:14px!important;
  align-items:stretch!important;
}

/* Kill prior orientation-driven HEIGHT behaviour inside grouped grids.
   Orientation may affect the crop, but the layout geometry wins. */
.project .pgrid > figure,
.project .pgrid > figure.media-landscape,
.project .pgrid > figure.media-portrait,
.project .pgrid > figure.media-square{
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;
}
.project .pgrid > figure > img,
.project .pgrid > figure.media-landscape > img,
.project .pgrid > figure.media-portrait > img,
.project .pgrid > figure.media-square > img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Existing width classes remain useful, but every ROW is now the same height. */
.project .pgrid > .w4{grid-column:span 4!important}
.project .pgrid > .w6{grid-column:span 6!important}
.project .pgrid > .w8{grid-column:span 8!important}
.project .pgrid > .w12{grid-column:span 12!important}

/* 2-image project grids always close as one clean row. */
.project .pgrid.count-2 > figure:first-child{grid-column:span 8!important}
.project .pgrid.count-2 > figure:last-child{grid-column:span 4!important}

/* 3 = one complete row */
.project .pgrid.count-3 > figure{grid-column:span 4!important}

/* 4 = intentional 4/8 row + 6/6 row where existing classes allow it */
.project .pgrid.count-4 > figure:nth-child(3),
.project .pgrid.count-4 > figure:nth-child(4){grid-column:span 6!important}

/* 5 = 3 across + 2 across: both rows fill the full width */
.project .pgrid.count-5 > figure:nth-child(-n+3){grid-column:span 4!important}
.project .pgrid.count-5 > figure:nth-child(n+4){grid-column:span 6!important}

/* 6 = clean 3 x 2 */
.project .pgrid.count-6 > figure{grid-column:span 4!important}


/* ---------- TWO-IMAGE LAYOUTS ---------- */
.project .ppair,
.project .ppair.pair-balanced,
.project .ppair.pair-landscape-portrait,
.project .ppair.pair-portrait-landscape{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
  align-items:stretch!important;
}
.project .ppair > figure,
.project .ppair > figure.media-landscape,
.project .ppair > figure.media-portrait,
.project .ppair > figure.media-square{
  height:clamp(430px,40vw,600px)!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;
}
.project .ppair > figure > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
/* Both sides are deliberately the same width as well as the same height.
   This prevents the Ferrari-type layout from ever leaving a short column. */


/* ---------- CLEAN / PRODUCT / EVENT GALLERIES ---------- */
.project .pclean .cleangrid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-rows:clamp(340px,30vw,450px)!important;
  grid-auto-flow:row!important;
  gap:14px!important;
  align-items:stretch!important;
}
.project .pclean .cleangrid > figure,
.project .pclean .cleangrid > figure.media-landscape,
.project .pclean .cleangrid > figure.media-portrait,
.project .pclean .cleangrid > figure.media-square{
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  grid-column:auto!important;
}
.project .pclean .cleangrid > figure > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* 4 images = 2 x 2 */
.project .pclean .cleangrid.count-4 > figure{grid-column:span 3!important}
/* 5 images = 3 across then 2 across */
.project .pclean .cleangrid.count-5 > figure:nth-child(-n+3){grid-column:span 2!important}
.project .pclean .cleangrid.count-5 > figure:nth-child(n+4){grid-column:span 3!important}
/* 6 images = 3 x 2 */
.project .pclean .cleangrid.count-6 > figure{grid-column:span 2!important}


/* ---------- EDITORIAL HERO + STACK ---------- */
.project .peditorial{
  display:grid!important;
  grid-template-columns:1.1fr .9fr!important;
  grid-template-rows:clamp(620px,55vw,820px)!important;
  align-items:stretch!important;
  gap:14px!important;
}
.project .peditorial > figure.heroimg,
.project .peditorial > figure.heroimg.media-landscape,
.project .peditorial > figure.heroimg.media-portrait,
.project .peditorial > figure.heroimg.media-square{
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.project .peditorial > .stack{
  display:grid!important;
  grid-template-rows:1fr 1fr!important;
  gap:14px!important;
  height:100%!important;
}
.project .peditorial > .stack > figure,
.project .peditorial > .stack > figure.media-landscape,
.project .peditorial > .stack > figure.media-portrait,
.project .peditorial > .stack > figure.media-square{
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.project .peditorial img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
/* The outer top, bottom, left and right edges of the full composition now form one rectangle. */


/* ---------- HORIZONTAL FILM / PHOTO STRIPS ---------- */
.project .pfilm{
  align-items:stretch!important;
}
.project .pfilm > figure,
.project .pfilm > figure.media-landscape,
.project .pfilm > figure.media-portrait,
.project .pfilm > figure.media-square{
  height:clamp(390px,35vw,520px)!important;
  aspect-ratio:auto!important;
  min-height:0!important;
}
/* Keep some width variety for rhythm, but every tile shares the same top/bottom line. */
.project .pfilm > figure.media-landscape{flex-basis:min(52vw,800px)!important}
.project .pfilm > figure.media-portrait{flex-basis:min(30vw,460px)!important}
.project .pfilm > figure.media-square{flex-basis:min(38vw,570px)!important}
.project .pfilm > figure > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}


/* ---------- RECENT WORK CAROUSEL ---------- */
.recent-carousel{
  align-items:stretch!important;
}
.recent-item,
.recent-item.media-landscape,
.recent-item.media-portrait,
.recent-item.media-square{
  height:clamp(400px,31vw,520px)!important;
  aspect-ratio:auto!important;
}
.recent-item.media-landscape{flex-basis:clamp(440px,36vw,680px)!important}
.recent-item.media-portrait{flex-basis:clamp(300px,24vw,430px)!important}
.recent-item.media-square{flex-basis:clamp(360px,29vw,520px)!important}


/* ---------- LAYERED / OVERLAY COMPOSITIONS ---------- */
/* Keep the deliberate overlapping effect, but the stage itself stays a hard rectangle.
   Foreground panels use matched edges rather than arbitrary dangling bottoms. */
.layered-stage{
  overflow:hidden!important;
}
.layered-card-a{
  bottom:8%!important;
}
.layered-card-b{
  top:auto!important;
  bottom:8%!important;
}
/* Both foreground images now share the same bottom line within the darkened composition. */


/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .project .pgrid,
  .project .pclean .cleangrid,
  .project .peditorial,
  .project .ppair{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
  }

  .project .pgrid > figure,
  .project .pclean .cleangrid > figure,
  .project .ppair > figure{
    grid-column:1!important;
    height:auto!important;
  }

  .project .pgrid > figure.media-landscape,
  .project .pclean .cleangrid > figure.media-landscape,
  .project .ppair > figure.media-landscape{
    aspect-ratio:3/2!important;
  }
  .project .pgrid > figure.media-portrait,
  .project .pclean .cleangrid > figure.media-portrait,
  .project .ppair > figure.media-portrait{
    aspect-ratio:4/5!important;
  }
  .project .pgrid > figure.media-square,
  .project .pclean .cleangrid > figure.media-square,
  .project .ppair > figure.media-square{
    aspect-ratio:1/1!important;
  }

  .project .peditorial > figure.heroimg{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  .project .peditorial > .stack{
    height:auto!important;
    grid-template-rows:auto!important;
  }
  .project .peditorial > .stack > figure{
    height:auto!important;
    aspect-ratio:4/5!important;
  }
}

/* V38 — full client image carousels */
.client-image-carousel{
  background:#0b0b0d;
  color:#fff;
  padding:70px 0 52px;
  overflow:hidden;
}
.client-carousel-intro{
  padding:0 var(--pad) 30px;
}
.client-carousel-label{
  font:700 10px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#969198;
  margin-bottom:12px;
}
.client-carousel-intro h3{
  margin:0;
  font:700 clamp(28px,3vw,46px)/1 MicroBold,Micro,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.client-carousel-viewport{
  position:relative;
  overflow:hidden;
  padding-bottom:42px;
}
.client-carousel-track{
  display:flex;
  gap:1px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
  user-select:none;
  touch-action:pan-x pan-y pinch-zoom;
  align-items:stretch;
}
.client-carousel-track::-webkit-scrollbar{display:none}
.client-carousel-track.dragging{cursor:grabbing}
.client-carousel-item{
  position:relative;
  flex:0 0 clamp(340px,31vw,590px);
  height:clamp(390px,31vw,520px);
  padding:0;
  border:0;
  background:#111;
  color:#fff;
  overflow:hidden;
  cursor:inherit;
}
.client-carousel-item.media-landscape{flex-basis:clamp(430px,36vw,680px)}
.client-carousel-item.media-portrait{flex-basis:clamp(290px,24vw,430px)}
.client-carousel-item.media-square{flex-basis:clamp(350px,29vw,520px)}
.client-carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.client-carousel-item:hover img{transform:scale(1.022)}
.client-carousel-item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72));
  pointer-events:none;
}
.client-carousel-item span{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:16px;
  text-align:left;
  font:700 10px/1.2 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
}
.client-carousel-hint{
  position:absolute;
  right:var(--pad);
  bottom:12px;
  color:#7e7980;
  font:700 9px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* Existing lightbox: dim the page behind it more clearly. */
.image-viewer{
  z-index:5000!important;
  background:rgba(0,0,0,.90)!important;
  backdrop-filter:blur(8px) brightness(.55)!important;
  -webkit-backdrop-filter:blur(8px) brightness(.55)!important;
}
.image-viewer img{
  max-width:min(92vw,1680px)!important;
  max-height:88vh!important;
}

@media(max-width:900px){
  .client-image-carousel{padding-top:54px}
  .client-carousel-item.media-landscape{flex-basis:86vw}
  .client-carousel-item.media-portrait{flex-basis:66vw}
  .client-carousel-item.media-square{flex-basis:74vw}
}

/* V40 — BMW dual-video correction based on rendered content.
   Both clips are treated as landscape, 16:9, same size, no crop. */
#project-bmw .pvideos{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
  align-items:start!important;
}

#project-bmw .pvideo,
#project-bmw .pvideo:first-child{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  background:#000!important;
  overflow:hidden!important;
}

#project-bmw .pvideo video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}

/* Keep the two boxes perfectly squared-off as one row. */
#project-bmw .pvideos > .pvideo{
  align-self:stretch!important;
}

@media(max-width:900px){
  #project-bmw .pvideos{
    grid-template-columns:1fr!important;
  }
}

/* ================================================================
   V41 EXPERIENCE LAYER
   Built to add depth without changing the established page layouts.
   ================================================================ */

/* WATCH / LIGHTHOUSE CINEMA */
.cinema-view{background:#080808;color:#f4f2ee;min-height:100vh}
.cinema-hero{
  position:relative;min-height:92vh;overflow:hidden;background:#080808;
  display:flex;align-items:flex-end;padding:0 var(--pad) 8vh;
}
.cinema-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.76}
.cinema-hero-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 44%,rgba(0,0,0,.10) 75%),
    linear-gradient(0deg,rgba(0,0,0,.88) 0%,transparent 52%,rgba(0,0,0,.18) 100%);
}
.cinema-hero-copy{position:relative;z-index:2;max-width:980px}
.cinema-hero-copy .kicker{color:#b8b1b8;margin-bottom:22px}
.cinema-hero-copy h1{font-size:clamp(58px,8.1vw,150px);line-height:.88;max-width:1000px;margin:0 0 28px}
.cinema-hero-copy p{max-width:660px;font-size:clamp(16px,1.2vw,21px);line-height:1.55;color:#d4cfd4}
.cinema-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.cinema-hero-actions .btn{background:var(--paper);color:#080808}
.cinema-hero-actions .ghost{background:rgba(0,0,0,.28);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px)}
.cinema-hero-index{
  position:absolute;z-index:2;right:var(--pad);bottom:8vh;
  font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.16em;color:#c3bdc3
}
.cinema-body{padding:84px 0 0}
.film-rail-section,.cinema-collections{padding:0 0 105px}
.film-rail-head{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);
  gap:50px;align-items:end;padding:0 var(--pad) 28px
}
.film-rail-head h2{
  margin:8px 0 0;font:700 clamp(34px,4.2vw,70px)/.95 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase
}
.film-rail-head p{margin:0;max-width:520px;color:#a8a3a8;line-height:1.6}
.film-rail{
  display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad) 18px;scrollbar-width:none;scroll-snap-type:x proximity
}
.film-rail::-webkit-scrollbar{display:none}
.film-poster{
  position:relative;flex:0 0 clamp(380px,37vw,690px);aspect-ratio:16/9;
  border:0;background:#181719 center/cover no-repeat;color:#fff;overflow:hidden;text-align:left;
  cursor:pointer;scroll-snap-align:start
}
.film-poster:before{
  content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18) 48%,rgba(0,0,0,.84));
  transition:background .35s ease
}
.film-poster:after{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.10);pointer-events:none
}
.film-poster:hover:before{background:linear-gradient(180deg,transparent,rgba(0,0,0,.10) 42%,rgba(0,0,0,.91))}
.film-poster-no{
  position:absolute;top:18px;left:18px;z-index:2;font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.16em
}
.film-poster-play{
  position:absolute;right:18px;top:18px;z-index:2;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);transition:transform .3s ease,background .3s ease
}
.film-poster:hover .film-poster-play{transform:scale(1.08);background:#fff;color:#080808}
.film-poster-meta{
  position:absolute;z-index:2;left:20px;right:20px;bottom:18px;display:grid;
  grid-template-columns:1fr auto;gap:4px 18px;align-items:end
}
.film-poster-meta strong{
  grid-column:1;font:700 clamp(22px,2vw,36px)/1 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase
}
.film-poster-meta em{
  grid-column:1;font:400 11px/1.2 Micro,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d6d1d6;font-style:normal
}
.film-poster-meta small{
  grid-column:2;grid-row:1/3;align-self:end;font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.12em
}

.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 var(--pad)}
.collection-card{
  position:relative;min-height:390px;border:0;background:#181719 center/cover no-repeat;color:#fff;
  text-align:left;padding:28px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer
}
.collection-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.08) 70%);transition:background .35s}
.collection-card>*{position:relative;z-index:2}
.collection-card span{font:700 clamp(30px,3.2vw,54px)/.95 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase}
.collection-card small{margin-top:8px;color:#d0cbd0;letter-spacing:.06em;text-transform:uppercase}
.collection-card b{margin-top:24px;font:700 10px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.collection-card:hover:before{background:linear-gradient(0deg,rgba(0,0,0,.94),rgba(0,0,0,.04) 78%)}

.cinema-signoff{padding:110px var(--pad) 120px;border-top:1px solid #242124}
.cinema-signoff h2{font-family:MicroBold,Arial,sans-serif;font-size:clamp(58px,8vw,138px);line-height:.88;margin:16px 0 44px}

/* Film players share one viewport budget for media and readable captions. */
.cinema-player,.youtube-player{
  position:fixed;inset:0;z-index:6200;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center;
  height:100vh;height:100dvh;min-height:0;overflow:hidden;
  padding:max(72px,8vh,env(safe-area-inset-top)) max(16px,4vw,env(safe-area-inset-left),env(safe-area-inset-right)) max(24px,6vh,env(safe-area-inset-bottom));
  padding-top:max(72px,8dvh,env(safe-area-inset-top));padding-bottom:max(24px,6dvh,env(safe-area-inset-bottom));
  backdrop-filter:blur(12px)
}
.cinema-player.open,.youtube-player.open{display:flex}
.cinema-player-close,.youtube-player-close{
  position:fixed;right:25px;top:20px;z-index:3;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:#111;color:#fff;font-size:27px;cursor:pointer
}
.cinema-player-shell,.youtube-player-shell{display:flex;flex-direction:column;width:min(100%,1640px);max-height:100%;min-height:0;min-width:0}
.cinema-player video,.youtube-player-frame{display:block;flex:0 1 auto;width:100%;min-height:0;aspect-ratio:16/9;background:#000;object-fit:contain}
.cinema-player-info,.youtube-player-info{display:flex;flex:0 0 auto;justify-content:space-between;align-items:flex-start;gap:24px;min-width:0;max-height:45vh;max-height:45dvh;padding:16px 2px 0;color:#fff;overflow-y:auto;overscroll-behavior:contain}
.cinema-player-info>div:first-child,.youtube-player-info>div:first-child{flex:1;min-width:0}
.cinema-player-type,.youtube-player-info>.type{flex:0 0 auto;max-width:120px;padding-top:2px}
.cinema-player-info small,.cinema-player-type{font:700 9px/1.4 MicroBold,Micro,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#9b969b}
.cinema-player-info h3,.youtube-player-info h3{margin:6px 0 0;font:700 clamp(18px,1.6vw,30px)/1.15 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}

/* Film poster / Watch panel on project pages */
.watch-film-panel{
  position:relative;max-width:1380px;width:calc(100% - 2*var(--pad));margin:48px auto 92px;
  min-height:clamp(420px,46vw,650px);display:flex;align-items:flex-end;padding:44px;overflow:hidden;
  background:#111 center/cover no-repeat;color:#fff
}
.watch-film-panel:before{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.08) 72%)
}
.watch-film-copy{position:relative;z-index:2;max-width:720px}
.watch-film-copy h2{margin:10px 0 13px;font:700 clamp(38px,5vw,76px)/.92 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase}
.watch-film-copy p{max-width:500px;color:#d5d0d5}
.watch-film-play{
  margin-top:24px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.32);color:#fff;
  padding:15px 19px;font:700 10px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.13em;cursor:pointer;backdrop-filter:blur(8px)
}
.watch-film-play:hover{background:#fff;color:#080808}

/* Production specification overlay */
.project-spec-trigger{
  position:fixed;z-index:72;right:80px;top:22px;border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.38);color:#fff;padding:12px 14px;
  font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.14em;backdrop-filter:blur(10px);cursor:pointer
}
.project-spec-drawer{
  position:fixed;inset:0 0 0 auto;width:min(440px,92vw);z-index:190;transform:translateX(102%);
  transition:transform .46s cubic-bezier(.2,.8,.2,1);background:#111;color:#fff;border-left:1px solid #2a272a
}
.project-spec-drawer.open{transform:translateX(0)}
.project-spec-inner{padding:26px 28px 40px}
.project-spec-top{display:flex;align-items:center;justify-content:space-between;color:#979197;font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.16em}
.project-spec-close{width:42px;height:42px;border-radius:50%;border:1px solid #393539;background:transparent;color:#fff;font-size:24px;cursor:pointer}
.project-spec-inner h3{font:700 clamp(30px,4vw,50px)/.95 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase;margin:70px 0 36px}
.project-spec-list>div{display:grid;grid-template-columns:110px 1fr;gap:18px;border-top:1px solid #2c292c;padding:17px 0}
.project-spec-list small{font:700 8px/1.4 MicroBold,Micro,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#858085}
.project-spec-list strong{font:400 13px/1.45 Micro,Arial,sans-serif;font-weight:400}

/* Contextual enquiry CTA */
.contextual-project-cta{background:#5e1751;color:#fff;padding:90px var(--pad)}
.contextual-project-cta-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:1.2fr .7fr;gap:40px;align-items:end}
.contextual-project-cta .kicker{grid-column:1/3;color:#d7b9d2}
.contextual-project-cta h2{font-family:MicroBold,Arial,sans-serif;font-size:clamp(50px,6.5vw,108px);line-height:.9;margin:12px 0 0;max-width:900px}
.contextual-project-cta p{margin:0 0 24px;max-width:480px;color:#ecdfea;line-height:1.6}
.contextual-project-cta .btn{background:#fff;color:#5e1751}

/* Project chapter navigation */
.project-chapters{
  position:fixed;z-index:68;left:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:3px;opacity:0;pointer-events:none;transition:opacity .25s ease
}
.project.open .project-chapters{opacity:1;pointer-events:auto}
.project-chapters button{
  width:42px;min-height:42px;border:1px solid rgba(127,120,127,.28);background:rgba(244,242,238,.84);
  color:#111;display:flex;align-items:center;gap:10px;overflow:hidden;padding:0 12px;cursor:pointer;
  transition:width .28s ease,background .28s ease,color .28s ease;backdrop-filter:blur(10px)
}
.project-chapters button span{font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.10em;flex:0 0 auto}
.project-chapters button em{
  opacity:0;white-space:nowrap;font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal
}
.project-chapters button:hover,.project-chapters button.active{width:118px;background:#111;color:#fff}
.project-chapters button:hover em,.project-chapters button.active em{opacity:1}

/* Richer Recently at Lighthouse */
.recent-item .recent-status{
  position:absolute!important;z-index:4!important;left:15px!important;top:15px!important;bottom:auto!important;right:auto!important;
  padding:8px 9px!important;background:rgba(0,0,0,.42)!important;border:1px solid rgba(255,255,255,.20)!important;
  backdrop-filter:blur(8px);font:700 8px/1 MicroBold,Micro,Arial,sans-serif!important;letter-spacing:.14em!important;color:#fff!important;
}
.recent-item .recent-view-cue{
  position:absolute!important;z-index:4!important;right:15px!important;top:15px!important;bottom:auto!important;left:auto!important;
  opacity:0;transform:translateY(4px);transition:.25s ease;
  font:700 8px/1 MicroBold,Micro,Arial,sans-serif!important;letter-spacing:.14em!important;color:#fff!important
}
.recent-item:hover .recent-view-cue{opacity:1;transform:none}

/* Fullscreen gallery experience */
#viewerImage{touch-action:pan-y pinch-zoom}

.image-viewer{padding:34px 70px 100px!important}
.image-viewer #viewerImage{max-width:min(90vw,1660px)!important;max-height:76vh!important;object-fit:contain!important}
.gallery-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:5;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.35);color:#fff;font-size:22px;cursor:pointer;backdrop-filter:blur(8px)
}
.gallery-prev{left:22px}.gallery-next{right:22px}
.gallery-counter{
  position:fixed;left:24px;top:22px;color:#fff;font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.16em;z-index:5
}
.gallery-filmstrip{
  position:fixed;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);
  max-width:min(84vw,1000px);display:flex;gap:5px;overflow-x:auto;padding:5px;background:rgba(0,0,0,.38);backdrop-filter:blur(9px);scrollbar-width:none
}
.gallery-filmstrip::-webkit-scrollbar{display:none}
.gallery-filmstrip button{flex:0 0 54px;width:54px;height:38px;padding:0;border:1px solid transparent;background:#111;opacity:.48;cursor:pointer}
.gallery-filmstrip button.active{opacity:1;border-color:#fff}
.gallery-filmstrip img{width:100%;height:100%;object-fit:cover;display:block}
.viewer-caption{bottom:68px!important}

/* Extra visual function #1 — branded route transition */
.route-veil{
  position:fixed;z-index:9000;inset:0;background:#080808;color:#fff;display:flex;align-items:flex-end;
  padding:42px var(--pad);transform:translateY(102%);pointer-events:none;
  transition:transform .42s cubic-bezier(.76,0,.24,1)
}
.route-veil.show{transform:translateY(0)}
.route-veil.exiting{transform:translateY(-102%)}
.route-veil-line{position:absolute;left:0;top:0;width:0;height:2px;background:#772269}
.route-veil.show .route-veil-line{width:100%;transition:width .42s ease}
.route-veil-label{display:flex;justify-content:space-between;align-items:end;width:100%;gap:30px}
.route-veil-label span{font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.18em}
.route-veil-label strong{font-family:MicroBold,Arial,sans-serif;font-size:clamp(42px,7vw,110px);line-height:.85;text-align:right}

/* Extra visual function #2 — cinematic content reveals */
.wow-reveal{
  opacity:0;transform:translateY(26px);clip-path:inset(0 0 12% 0);
  transition:opacity .72s ease,transform .78s cubic-bezier(.2,.7,.2,1),clip-path .78s cubic-bezier(.2,.7,.2,1)
}
.wow-reveal.revealed{opacity:1;transform:none;clip-path:inset(0)}

/* Extra visual function #3 — subtle living-media depth on Work cards */
#work .project-card img{will-change:transform;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
#work .project-card .meta{will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* Mobile */
@media(max-width:900px){
  .cinema-hero{min-height:82vh;padding-bottom:7vh}
  .cinema-hero-copy h1{font-size:clamp(52px,16vw,88px)}
  .cinema-hero-index{display:none}
  .film-rail-head{grid-template-columns:1fr;gap:16px}
  .film-poster{flex-basis:86vw}
  .collection-grid{grid-template-columns:1fr}
  .collection-card{min-height:320px}
  .cinema-signoff h2{font-size:clamp(54px,16vw,92px)}
  .project-spec-trigger{right:68px;top:19px;padding:11px 10px}
  .project-chapters{display:none}
  .watch-film-panel{width:calc(100% - 28px);padding:24px;min-height:480px;margin:28px auto 62px}
  .contextual-project-cta{padding:68px 18px}
  .contextual-project-cta-inner{grid-template-columns:1fr}
  .contextual-project-cta .kicker{grid-column:1}
  .contextual-project-cta h2{font-size:clamp(48px,14vw,78px)}
  .image-viewer{padding:24px 12px 88px!important}
  .gallery-nav{width:42px;height:42px;top:auto;bottom:34px;transform:none}
  .gallery-prev{left:16px}.gallery-next{right:16px}
  .gallery-filmstrip{display:none}
  .viewer-caption{bottom:26px!important}
  .gallery-counter{left:16px;top:16px}
}
@media(prefers-reduced-motion:reduce){
  .wow-reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .route-veil{display:none!important}
}

/* ================================================================
   V44 — MICROGRAMMA MAIN DIRECTION
   V43 promoted to the main visual direction.
   Typography scale reduced slightly to compensate for Microgramma's
   larger visual footprint. Body copy, layout, media and interactions
   remain unchanged.
   ================================================================ */

/* Major display / hero statements — approx. 8–10% smaller */
.display{
  font-size:clamp(60px,8.65vw,154px)!important;
}
.display.sm{
  font-size:clamp(50px,6.45vw,108px)!important;
}
.headline{
  font-size:clamp(35px,4.55vw,72px)!important;
}

/* Work / service / supporting display hierarchy */
.project-card .meta h3{
  font-size:clamp(22px,2.05vw,35px)!important;
}
.pillar h3{
  font-size:clamp(26px,2.7vw,39px)!important;
}
.servicebox h3{
  font-size:clamp(26px,2.7vw,43px)!important;
}
.servicerow h3{
  font-size:clamp(28px,3.1vw,48px)!important;
}
.value h4{
  font-size:clamp(22px,2.2vw,31px)!important;
}
.project-next h3{
  font-size:clamp(31px,4.1vw,63px)!important;
}
.pcopy h2{
  font-size:clamp(31px,3.65vw,57px)!important;
}

/* V41/V42 experience-layer display typography */
.cinema-hero-copy h1{
  font-size:clamp(53px,7.4vw,136px)!important;
}
.film-rail-head h2{
  font-size:clamp(31px,3.85vw,64px)!important;
}
.collection-card span{
  font-size:clamp(28px,2.95vw,50px)!important;
}
.watch-film-copy h2{
  font-size:clamp(35px,4.55vw,70px)!important;
}
.contextual-project-cta h2{
  font-size:clamp(46px,5.95vw,99px)!important;
}
.cinema-signoff h2{
  font-size:clamp(53px,7.35vw,126px)!important;
}
.client-carousel-intro h3{
  font-size:clamp(26px,2.75vw,43px)!important;
}
.project-spec-inner h3{
  font-size:clamp(28px,3.65vw,46px)!important;
}

/* Mobile keeps the same hierarchy but is eased down slightly too. */
@media(max-width:900px){
  .display{font-size:clamp(50px,12.8vw,96px)!important}
  .display.sm{font-size:clamp(45px,11vw,82px)!important}
  .headline{font-size:clamp(34px,10vw,62px)!important}
  .cinema-hero-copy h1{font-size:clamp(48px,14.5vw,80px)!important}
  .contextual-project-cta h2{font-size:clamp(44px,12.5vw,71px)!important}
  .cinema-signoff h2{font-size:clamp(50px,14.5vw,84px)!important}
}

/* ==============================================================
   V46 / WATCH — YOUTUBE-POWERED FILM LIBRARY
   ============================================================== */
.youtube-source-line{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--pad) 26px;color:#9e989e
}
.youtube-source-line .left{
  display:flex;align-items:center;gap:12px;
  font:700 9px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.15em;text-transform:uppercase
}
.youtube-source-dot{width:8px;height:8px;border-radius:50%;background:#fff}
.youtube-source-line a{
  color:#fff;text-decoration:none;font:700 9px/1 MicroBold,Micro,Arial,sans-serif;
  letter-spacing:.15em;text-transform:uppercase
}
.youtube-filterbar{
  display:flex;gap:7px;flex-wrap:wrap;padding:0 var(--pad) 28px
}
.youtube-filterbar button{
  border:1px solid #3a363a;background:transparent;color:#aaa;
  padding:10px 14px;border-radius:999px;cursor:pointer;
  font:700 9px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase
}
.youtube-filterbar button.active,.youtube-filterbar button:hover{background:var(--paper);color:#080808;border-color:#f4f2ee}
.film-poster.youtube-card[hidden]{display:none}
.youtube-card .youtube-badge{
  position:absolute;z-index:3;top:18px;left:52px;
  padding:7px 8px;background:rgba(0,0,0,.44);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(9px);
  font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase
}
.youtube-card .film-poster-play:after{content:"";position:absolute;inset:-8px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.youtube-library-note{
  margin:18px var(--pad) 0;max-width:820px;color:#777;line-height:1.55;font-size:12px
}

/* Project-level YouTube preview treatment */
.watch-film-panel.youtube-preview-panel:after{
  content:"YOUTUBE";position:absolute;right:24px;top:24px;z-index:3;
  padding:8px 9px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  font:700 8px/1 MicroBold,Micro,Arial,sans-serif;letter-spacing:.15em;color:#fff
}
.youtube-preview-panel .watch-film-copy .kicker{color:#d2ccd2}
.youtube-preview-panel .watch-film-copy p{max-width:540px}
.youtube-preview-panel .watch-film-play{
  display:inline-flex;align-items:center;gap:10px
}
.youtube-preview-panel .watch-film-play span{
  opacity:.65;font-size:8px;letter-spacing:.14em
}

/* Embedded YouTube media uses the shared film-player layout above. */
.youtube-player{z-index:6300}
.youtube-player-frame{position:relative}
.youtube-player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-player-info small,.youtube-player-info .type{
  font:700 9px/1.4 MicroBold,Micro,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#9b969b
}
@media(max-width:900px){
  .cinema-player-info,.youtube-player-info{display:block;padding-top:12px}
  .cinema-player-type,.youtube-player-info>.type{max-width:none;margin-top:8px;padding-top:0}
}
@media(max-height:500px){
  .cinema-player,.youtube-player{padding-top:max(72px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .cinema-player-info,.youtube-player-info{padding-top:10px;max-height:40vh;max-height:40dvh}
  .cinema-player-info h3,.youtube-player-info h3{font-size:18px}
}

@media(max-width:760px){
  .youtube-source-line{align-items:flex-start;flex-direction:column}
  .youtube-filterbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:22px}
  .youtube-filterbar button{white-space:nowrap}
  .youtube-library-note{margin-top:12px}
}


/* V47 production YouTube channel feed */
.youtube-channel-feed-wrap{padding:70px var(--pad) 0}
.youtube-live-head{padding-left:0;padding-right:0}
.youtube-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.youtube-feed-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:#171417;cursor:pointer;border:0;color:#fff;text-align:left;padding:0}
.youtube-feed-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease}
.youtube-feed-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78));pointer-events:none}
.youtube-feed-card:hover img{transform:scale(1.025);filter:brightness(.88)}
.youtube-feed-card-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:16px}
.youtube-feed-card-copy strong{display:block;font:700 15px/1.08 MicroBold,Impact,sans-serif;text-transform:uppercase}
.youtube-feed-card-copy small{display:block;margin-top:7px;font:700 8px/1 MicroBold,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c8c4c8}
.youtube-feed-status{grid-column:1/-1;padding:28px 0;color:#777;font-size:12px}
@media(max-width:980px){.youtube-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.youtube-channel-feed-wrap{padding-top:48px}.youtube-channel-grid{grid-template-columns:1fr}}

/* V48 PRODUCTION POLISH */
:focus-visible{outline:2px solid #f2f1ee;outline-offset:4px}.paper :focus-visible,.contactpage :focus-visible{outline-color:#5e1751}button:disabled{opacity:.55;cursor:wait}.website-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}.form-privacy-note{grid-column:1/-1;margin:0;color:#777;font-size:10px;line-height:1.55}.form-status{grid-column:1/-1;min-height:20px;margin-top:-5px;font-size:11px;line-height:1.45}.form-status.success{color:#276438}.form-status.error{color:#9d2626}.project-brief-form input:invalid:not(:placeholder-shown),.project-brief-form textarea:invalid:not(:placeholder-shown){border-bottom-color:#a64545}.submit{transition:opacity .25s ease,transform .25s ease}.submit:not(:disabled):hover{transform:translateY(-1px)}.youtube-feed-card[hidden]{display:none}.youtube-feed-play{position:absolute;z-index:3;left:18px;top:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);font-size:11px}.youtube-feed-status.setup-needed{padding:22px 24px;border:1px solid #2f2a2f;background:#121012;color:#a9a3a9}.watch-film-panel[data-youtube-auto="true"]{background-size:cover;background-position:center}.youtube-channel-grid{align-items:stretch}.youtube-feed-card{min-height:0}.youtube-feed-card img{background:#181518}@media(max-width:560px){.form-privacy-note,.form-status{grid-column:1}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.logo-loop-track{animation:none!important}}


/* ==============================================================
   V49 WATCH — CURATED RAILS + PORTRAIT SHORTS
   ============================================================== */
.youtube-channel-feed-wrap{padding:72px 0 0}
.youtube-live-head{padding-left:var(--pad);padding-right:var(--pad)}
.youtube-channel-collections{display:block;padding-bottom:26px}

.youtube-collection{
  position:relative;padding:34px 0 10px;border-top:1px solid #211e21;
}
.youtube-collection:first-child{border-top:0;padding-top:18px}
.youtube-collection[hidden]{display:none}
.youtube-collection-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  padding:0 var(--pad) 15px;
}
.youtube-collection-title{
  margin:0;font:700 clamp(20px,2.2vw,34px)/.95 MicroBold,Micro,Impact,sans-serif;
  text-transform:uppercase;
}
.youtube-collection-meta{
  display:flex;align-items:center;gap:15px;color:#777;
  font:700 8px/1 MicroBold,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.youtube-collection-controls{display:flex;gap:7px}
.youtube-rail-arrow{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid #332f33;background:#111;color:#fff;cursor:pointer;
  transition:.2s ease;
}
.youtube-rail-arrow:hover{background:var(--paper);color:#080808;border-color:#f2f1ee}

.youtube-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,31vw);
  gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;scroll-behavior:smooth;
  padding:0 var(--pad) 16px;scrollbar-width:none;cursor:grab;
}
.youtube-rail::-webkit-scrollbar{display:none}
.youtube-rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.youtube-rail .youtube-feed-card{scroll-snap-align:start;width:100%;aspect-ratio:16/9}

/* Dedicated portrait Shorts housing */
.youtube-collection.shorts-collection{
  padding-top:42px;
  background:linear-gradient(180deg,rgba(94,23,81,.11),rgba(8,8,8,0) 42%);
}
.youtube-collection.shorts-collection .youtube-collection-title:before{
  content:"●";font-size:.42em;vertical-align:middle;margin-right:10px;color:#772269;
}
.youtube-shorts-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,15vw);
  gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;scroll-behavior:smooth;
  padding:0 var(--pad) 22px;scrollbar-width:none;cursor:grab;
}
.youtube-shorts-rail::-webkit-scrollbar{display:none}
.youtube-shorts-rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

.youtube-short-card{
  position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
  border:0;background:#111;color:#fff;cursor:pointer;text-align:left;
  scroll-snap-align:start;
}
.youtube-short-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.youtube-short-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03) 35%,rgba(0,0,0,.82) 100%);
}
.youtube-short-card .shorts-badge{
  position:absolute;z-index:3;top:12px;left:12px;
  padding:7px 8px;background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  font:700 8px/1 MicroBold,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.youtube-short-card .youtube-feed-play{
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.youtube-short-copy{
  position:absolute;z-index:3;left:14px;right:14px;bottom:14px;
}
.youtube-short-copy strong{
  display:block;font:700 12px/1.15 MicroBold,Micro,Arial,sans-serif;text-transform:uppercase;
}
.youtube-short-copy small{
  display:block;margin-top:7px;color:#bdb7bd;
  font:700 8px/1.2 MicroBold,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;
}

/* Portrait player for Shorts */
.youtube-player.short-mode .youtube-player-shell{width:min(100%,520px)}
.youtube-player.short-mode .youtube-player-frame{aspect-ratio:9/16}
.youtube-player.short-mode .youtube-player-info{width:100%;flex-direction:column;gap:8px}

.youtube-feed-status{padding:26px var(--pad)}
.youtube-filterbar{
  position:sticky;top:72px;z-index:15;padding-top:12px;padding-bottom:16px;
  background:linear-gradient(180deg,#080808 74%,rgba(8,8,8,.94) 88%,rgba(8,8,8,0));
}
@media(max-width:980px){
  .youtube-rail{grid-auto-columns:minmax(260px,48vw)}
  .youtube-shorts-rail{grid-auto-columns:minmax(185px,26vw)}
}
@media(max-width:620px){
  .youtube-channel-feed-wrap{padding-top:48px}
  .youtube-collection{padding-top:28px}
  .youtube-collection-head{align-items:center}
  .youtube-collection-meta .count{display:none}
  .youtube-rail{grid-auto-columns:82vw;gap:9px}
  .youtube-shorts-rail{grid-auto-columns:58vw;gap:9px}
  .youtube-rail-arrow{display:none}
  .youtube-filterbar{top:58px}
}


/* V51 WATCH SIZE OVERRIDE */
.youtube-only-library{
  padding-top:72px;
}

.youtube-rail{
  grid-auto-columns:minmax(560px,58vw) !important;
  gap:18px !important;
}

.youtube-shorts-rail{
  grid-auto-columns:minmax(360px,28vw) !important;
  gap:18px !important;
}

.youtube-rail .youtube-feed-play,
.youtube-short-card .youtube-feed-play{
  width:58px !important;
  height:58px !important;
  font-size:15px !important;
}

.youtube-feed-card-copy strong{
  font-size:clamp(16px,1.45vw,26px) !important;
}

.youtube-feed-card-copy small{
  font-size:clamp(9px,.62vw,12px) !important;
}

.youtube-short-copy strong{
  font-size:clamp(15px,1.25vw,22px) !important;
}

@media(max-width:980px){
  .youtube-rail{
    grid-auto-columns:minmax(480px,74vw) !important;
  }

  .youtube-shorts-rail{
    grid-auto-columns:minmax(300px,42vw) !important;
  }
}

@media(max-width:620px){
  .youtube-rail{
    grid-auto-columns:92vw !important;
  }

  .youtube-shorts-rail{
    grid-auto-columns:76vw !important;
  }
}


/* ==============================================================
   V52 TYPOGRAPHY SYSTEM
   Major display headings = Microgramma Bold Extended
   Body + smaller supporting typography = Gotham
   ============================================================== */

/* Font files are supplied by the site owner on the server.
   They are intentionally not bundled into this patch. */
@font-face{
  font-family:"Lighthouse Micro";
  src:url("../fonts/microgbe.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:"Gotham Book";
  src:url("../fonts/GOTHAMBOOK.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Gotham Medium";
  src:url("../fonts/GOTHAMMEDIUM.woff") format("woff");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:"Gotham Bold";
  src:url("../fonts/GOTHAMBOLD.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:"Gotham Black";
  src:url("../fonts/GOTHAM-BLACK.woff") format("woff");
  font-style:normal;
  font-weight:900;
  font-display:swap;
}

/* --------------------------------------------------------------
   BODY COPY
   -------------------------------------------------------------- */
html,
body,
p,
li,
input,
textarea,
select{
  font-family:"Gotham Book",Arial,sans-serif!important;
}

body{
  font-weight:400;
}

/* Supporting copy keeps the Gotham character clean and readable. */
.body-lg,
.hero-copy .lead p,
.section-head p,
.servicebox p,
.cta-bottom p,
.footer p,
.footer a,
.pcopy p,
.youtube-library-note,
.youtube-live-head p,
.youtube-player-info small{
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-weight:400!important;
}

/* --------------------------------------------------------------
   SMALL SUBHEADINGS / NAVIGATION / UI
   -------------------------------------------------------------- */
.kicker,
.plabel,
.projectmeta,
.navlinks button,
.mobilepanel button,
.btn,
.tag,
.filterbar button,
.project-card .meta small,
.project-card .meta .type,
.pillar b,
.servicebox .num,
.footer h4,
.vlabel,
.logo-loop-label,
.recent-item span,
.recent-carousel-hint,
.viewer-caption,
.youtube-source-line,
.youtube-source-line .left,
.youtube-source-line a,
.youtube-filterbar button,
.youtube-badge,
.shorts-badge,
.youtube-feed-card-copy small,
.youtube-short-copy small,
.youtube-collection-meta,
.film-poster-no,
.film-duration,
label{
  font-family:"Gotham Medium",Arial,sans-serif!important;
  font-weight:500!important;
}

/* Smaller named subheads get a little more authority without becoming display type. */
h4,
h5,
h6,
.youtube-feed-card-copy strong,
.youtube-short-copy strong{
  font-family:"Gotham Bold",Arial,sans-serif!important;
  font-weight:700!important;
}

/* --------------------------------------------------------------
   MAJOR DISPLAY HEADINGS — MICROGRAMMA
   -------------------------------------------------------------- */
.display,
.headline,
.subhead,
.idea .big,
.project-card .meta h3,
.pillar h3,
.servicebox h3,
.servicerow h3,
.project .project-head .copy h1,
.project .project-head h1,
.pcopy h2,
.project-next h3,
.film-rail-head h2,
.youtube-collection-title,
.cinema-signoff h2,
.collection-card > span,
.contactpage h1,
.aboutpage h1,
.workpage h1,
.servicespage h1{
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif!important;
  font-weight:700!important;
  text-transform:uppercase;
}

/* Preserve the slightly tighter technical feel of Microgramma. */
.display,
.headline,
.subhead,
.idea .big,
.project-card .meta h3,
.pillar h3,
.servicebox h3,
.servicerow h3,
.project .project-head h1,
.pcopy h2,
.project-next h3,
.film-rail-head h2,
.youtube-collection-title,
.cinema-signoff h2{
  letter-spacing:.005em!important;
}

/* Buttons and UI should feel Gotham, not Microgramma. */
button,
input,
textarea{
  font-family:"Gotham Medium",Arial,sans-serif;
}

/* Explicitly restore body text in project/editorial sections after legacy
   Microgramma rules from earlier prototype versions. */
.project p,
.project li,
.project .projectmeta,
.project .spec-value,
.project .chapter-nav,
.watch-film-copy p,
.collection-card small,
.collection-card b{
  font-family:"Gotham Book",Arial,sans-serif!important;
}

.project .projectmeta,
.project .chapter-nav,
.collection-card b{
  font-family:"Gotham Medium",Arial,sans-serif!important;
}

/* WATCH PAGE */
.cinema-hero-copy p{
  font-family:"Gotham Book",Arial,sans-serif!important;
}
.youtube-collection-head .kicker,
.youtube-short-card .shorts-badge{
  font-family:"Gotham Medium",Arial,sans-serif!important;
}


/* ==============================================================
   V53 WATCH CARD COPY
   Gotham Bold heading + Gotham Book description below media.
   ============================================================== */

/* LANDSCAPE */
.youtube-feed-card{
  display:flex!important;
  flex-direction:column!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  background:transparent!important;
  color:#f2f1ee!important;
  padding:0!important;
  border:0!important;
  text-align:left!important;
}
.youtube-feed-card:after{display:none!important}

.youtube-feed-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#171417;
}
.youtube-feed-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.18));
  pointer-events:none;
}
.youtube-feed-card .youtube-feed-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.youtube-feed-card:hover .youtube-feed-media img{
  transform:scale(1.02)!important;
  filter:brightness(.92)!important;
}

.youtube-feed-card-copy{
  position:static!important;
  display:block!important;
  padding:18px 1px 0!important;
}
.youtube-feed-card-copy strong{
  display:block!important;
  margin:0!important;
  font-family:"Gotham Bold",Arial,sans-serif!important;
  font-weight:700!important;
  font-size:clamp(17px,1.25vw,23px)!important;
  line-height:1.08!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
  color:#f2f1ee!important;
}
.youtube-card-description{
  display:-webkit-box;
  margin-top:9px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-weight:400!important;
  font-size:clamp(12px,.78vw,15px)!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:#9f999f!important;
}
.youtube-feed-card-copy small{
  display:block!important;
  margin-top:10px!important;
  font-family:"Gotham Medium",Arial,sans-serif!important;
  font-weight:500!important;
  font-size:8px!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:#6f6a6f!important;
}

/* SHORTS */
.youtube-short-card{
  display:flex!important;
  flex-direction:column!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  background:transparent!important;
  color:#f2f1ee!important;
  text-align:left!important;
}
.youtube-short-card:after{display:none!important}

.youtube-short-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  background:#171417;
}
.youtube-short-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.15));
  pointer-events:none;
}
.youtube-short-card .youtube-short-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.youtube-short-copy{
  position:static!important;
  display:block!important;
  padding:16px 1px 0!important;
}
.youtube-short-copy strong{
  display:block!important;
  font-family:"Gotham Bold",Arial,sans-serif!important;
  font-weight:700!important;
  font-size:clamp(16px,1.1vw,20px)!important;
  line-height:1.1!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
}
.youtube-short-copy .youtube-card-description{
  -webkit-line-clamp:2;
  font-size:clamp(11px,.7vw,14px)!important;
}
.youtube-short-copy small{
  display:block!important;
  margin-top:9px!important;
  font-family:"Gotham Medium",Arial,sans-serif!important;
  font-weight:500!important;
  font-size:8px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:#6f6a6f!important;
}

.youtube-rail .youtube-feed-card{
  width:100%!important;
  aspect-ratio:auto!important;
}


/* ==============================================================
   V54 RESPONSIVE SYSTEM
   Lighthouse master responsive rules.

   BREAKPOINTS:
   480 / 768 / 1024 / 1280 / 1600

   PRIMARY DESKTOP REFERENCE:
   1920 x 1080 at 100% browser zoom.

   RULE:
   Larger displays gain whitespace more than typography size.
   ============================================================== */

:root{
  --pad:18px;
  --max:1680px;
  --section-y:72px;
}

/* Modern viewport handling */
.hero,
.cinema-hero,
.project-head{
  min-height:100svh;
}
@supports (height:100dvh){
  .hero,
  .cinema-hero{
    min-height:100dvh;
  }
}

/* Keep content width controlled rather than stretching endlessly. */
.wrap{
  width:min(var(--max),calc(100% - (2 * var(--pad))))!important;
}

/* --------------------------------------------------------------
   BASE / MOBILE 0–479
   -------------------------------------------------------------- */
.navbar{
  height:64px!important;
  padding-left:var(--pad)!important;
  padding-right:var(--pad)!important;
}
.logo img{
  width:158px!important;
  max-height:34px!important;
}
.navlinks{display:none!important}
.menu{display:block!important}
.mobilepanel{
  inset:64px 0 auto 0!important;
  padding-left:var(--pad)!important;
  padding-right:var(--pad)!important;
}

.display{
  font-size:clamp(42px,12vw,56px)!important;
  line-height:.89!important;
}
.display.sm{
  font-size:clamp(38px,10.8vw,50px)!important;
}
.headline{
  font-size:clamp(34px,9.5vw,46px)!important;
}
.subhead{
  font-size:clamp(28px,8vw,38px)!important;
}
.body-lg{
  font-size:15px!important;
  line-height:1.55!important;
}

.hero-copy{
  padding:104px 0 34px!important;
}
.hero-copy .display{
  max-width:94vw!important;
}
.hero-copy .lead{
  grid-template-columns:1fr!important;
  gap:20px!important;
  margin-top:24px!important;
  padding-top:17px!important;
}
.hero-copy .lead p{
  max-width:560px;
  font-size:14px!important;
}
.hero-copy .lead .actions{
  justify-content:flex-start!important;
  flex-wrap:wrap;
}
.btn{
  padding:11px 14px!important;
  font-size:9px!important;
}

.section{
  padding:var(--section-y) 0!important;
}
.section.tight{
  padding:56px 0!important;
}
.section-head{
  grid-template-columns:1fr!important;
  gap:18px!important;
  margin-bottom:32px!important;
}

.feature,
.grid2,
.grid3,
.grid4,
.idea,
.autofocus,
.contactgrid,
.project-intro .inner{
  grid-template-columns:1fr!important;
}

.project-card,
.feature .project-card{
  min-height:420px!important;
}
.project-card.small{
  min-height:370px!important;
}
.project-card .meta{
  left:18px!important;
  right:18px!important;
  bottom:18px!important;
}
.project-card .meta h3{
  font-size:clamp(24px,7.2vw,32px)!important;
}

.idea{
  gap:32px!important;
}
.idea .big{
  font-size:clamp(44px,12vw,58px)!important;
}
.pillar{
  grid-template-columns:60px 1fr 24px!important;
  gap:14px!important;
}
.pillar h3{
  font-size:clamp(25px,7vw,32px)!important;
}

.services3{
  grid-template-columns:1fr!important;
}
.servicebox{
  min-height:300px!important;
  padding:26px!important;
}
.servicebox h3{
  font-size:clamp(28px,8vw,38px)!important;
}

.autofocus .visual{
  min-height:420px!important;
}
.autofocus .copy{
  padding:58px var(--pad)!important;
}

.recent-strip{
  grid-template-columns:1fr!important;
}

.cta{
  padding:76px 0!important;
}
.cta .display{
  font-size:clamp(44px,12vw,58px)!important;
}
.cta-bottom{
  display:block!important;
  margin-top:30px!important;
}
.cta-bottom .btn{
  margin-top:22px!important;
}

.footer{
  padding:42px 0 50px!important;
}
.footer-grid{
  grid-template-columns:1fr!important;
  gap:32px!important;
}
.footer img{
  width:190px!important;
}

.subhero{
  min-height:58svh!important;
  padding:120px 0 56px!important;
}
.workpage{
  padding:54px 0 82px!important;
}
.workgrid{
  grid-template-columns:1fr!important;
}
.workgrid .project-card,
.workgrid .project-card.w7,
.workgrid .project-card.w5,
.workgrid .project-card.w4,
.workgrid .project-card.w8{
  grid-column:auto!important;
}

.contactpage{
  padding:112px 0 58px!important;
}
.contactgrid{
  gap:48px!important;
}
.contactgrid .display{
  font-size:clamp(44px,12vw,58px)!important;
}
form{
  grid-template-columns:1fr!important;
}
.field.full,
.submit,
.form-privacy-note,
.form-status{
  grid-column:1!important;
}

.project-head{
  min-height:82svh!important;
}
.project-head .copy{
  padding:118px 0 38px!important;
}
.project-head .copy h1{
  font-size:clamp(44px,12vw,64px)!important;
  line-height:.88!important;
}
.project-intro{
  padding:58px 0!important;
}
.project-intro .inner{
  gap:24px!important;
}
.project-intro p{
  font-size:16px!important;
}
.project-gallery{
  padding-bottom:70px!important;
}

/* WATCH — mobile */
.cinema-hero{
  min-height:100svh!important;
  padding:0 var(--pad) 6vh!important;
}
.cinema-hero-copy{
  max-width:92vw!important;
}
.cinema-hero-copy h1{
  font-size:clamp(44px,12vw,60px)!important;
  line-height:.9!important;
}
.cinema-hero-copy p{
  max-width:560px!important;
  font-size:14px!important;
}
.cinema-hero-index{
  display:none!important;
}
.film-rail-head{
  grid-template-columns:1fr!important;
  gap:16px!important;
}
.youtube-source-line{
  align-items:flex-start!important;
  flex-direction:column!important;
}
.youtube-filterbar{
  overflow-x:auto!important;
  flex-wrap:nowrap!important;
  top:64px!important;
}
.youtube-filterbar button{
  white-space:nowrap!important;
}

/* Large cards remain intentionally dominant on phones. */
.youtube-rail{
  grid-auto-columns:88vw!important;
  gap:10px!important;
}
.youtube-shorts-rail{
  grid-auto-columns:62vw!important;
  gap:10px!important;
}
.youtube-collection-head{
  align-items:center!important;
}
.youtube-collection-meta .count{
  display:none!important;
}
.youtube-rail-arrow{
  display:none!important;
}

.youtube-feed-card-copy strong{
  font-size:17px!important;
}
.youtube-card-description{
  font-size:12px!important;
}
.youtube-short-copy strong{
  font-size:16px!important;
}

/* --------------------------------------------------------------
   LARGE MOBILE 480–767
   -------------------------------------------------------------- */
@media(min-width:480px){
  :root{
    --pad:24px;
    --section-y:78px;
  }

  .navbar{height:68px!important}
  .logo img{width:172px!important}
  .mobilepanel{inset:68px 0 auto 0!important}

  .display{
    font-size:clamp(48px,10.6vw,64px)!important;
  }
  .display.sm{
    font-size:clamp(43px,9.4vw,58px)!important;
  }
  .headline{
    font-size:clamp(38px,8.6vw,52px)!important;
  }

  .hero-copy{
    padding-top:116px!important;
    padding-bottom:40px!important;
  }

  .project-card,
  .feature .project-card{
    min-height:460px!important;
  }

  .youtube-rail{
    grid-auto-columns:84vw!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:56vw!important;
  }
}

/* --------------------------------------------------------------
   TABLET PORTRAIT 768–1023
   -------------------------------------------------------------- */
@media(min-width:768px){
  :root{
    --pad:32px;
    --section-y:88px;
  }

  .navbar{
    height:72px!important;
  }
  .logo img{
    width:190px!important;
    max-height:38px!important;
  }
  .mobilepanel{
    inset:72px 0 auto 0!important;
  }

  .display{
    font-size:clamp(58px,7.8vw,76px)!important;
  }
  .display.sm{
    font-size:clamp(52px,6.8vw,68px)!important;
  }
  .headline{
    font-size:clamp(44px,5.9vw,58px)!important;
  }
  .subhead{
    font-size:clamp(34px,4.8vw,46px)!important;
  }
  .body-lg{
    font-size:16px!important;
  }

  .hero-copy{
    padding-top:128px!important;
    padding-bottom:46px!important;
  }
  .hero-copy .display{
    max-width:82vw!important;
  }

  .section-head{
    grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)!important;
    gap:30px!important;
    margin-bottom:40px!important;
  }

  /* Tablet keeps the important editorial layouts simple. */
  .feature{
    grid-template-columns:1fr!important;
  }
  .feature .project-card{
    min-height:540px!important;
  }

  .grid2{
    grid-template-columns:1fr 1fr!important;
  }
  .grid3,
  .grid4{
    grid-template-columns:1fr 1fr!important;
  }

  .idea{
    grid-template-columns:1fr!important;
  }

  .services3{
    grid-template-columns:1fr 1fr!important;
  }

  .recent-strip{
    grid-template-columns:1fr 1fr!important;
  }

  .workgrid{
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
  }
  .workgrid .project-card,
  .workgrid .project-card.w7,
  .workgrid .project-card.w5,
  .workgrid .project-card.w4,
  .workgrid .project-card.w8{
    grid-column:auto!important;
  }

  .contactgrid{
    grid-template-columns:1fr!important;
    gap:60px!important;
  }

  .project-head{
    min-height:86svh!important;
  }
  .project-head .copy h1{
    font-size:clamp(58px,8vw,78px)!important;
  }
  .project-intro .inner{
    grid-template-columns:1fr!important;
  }

  .cinema-hero-copy{
    max-width:720px!important;
  }
  .cinema-hero-copy h1{
    font-size:clamp(62px,8.2vw,82px)!important;
  }
  .cinema-hero-copy p{
    font-size:16px!important;
  }

  .youtube-rail{
    grid-auto-columns:62vw!important;
    gap:14px!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:32vw!important;
    gap:14px!important;
  }
}

/* --------------------------------------------------------------
   LANDSCAPE TABLET / SMALL LAPTOP 1024–1279
   -------------------------------------------------------------- */
@media(min-width:1024px){
  :root{
    --pad:42px;
    --section-y:96px;
  }

  .navbar{
    height:78px!important;
  }
  .logo img{
    width:205px!important;
  }
  .navlinks{
    display:flex!important;
    gap:20px!important;
  }
  .navlinks button{
    font-size:9px!important;
  }
  .menu{
    display:none!important;
  }
  .mobilepanel{
    display:none!important;
  }

  .display{
    font-size:clamp(66px,6.8vw,86px)!important;
  }
  .display.sm{
    font-size:clamp(58px,5.8vw,74px)!important;
  }
  .headline{
    font-size:clamp(48px,4.8vw,62px)!important;
  }
  .subhead{
    font-size:clamp(36px,3.7vw,48px)!important;
  }

  .hero-copy{
    padding-top:138px!important;
    padding-bottom:50px!important;
  }
  .hero-copy .display{
    max-width:76vw!important;
  }
  .hero-copy .lead{
    grid-template-columns:1fr minmax(280px,420px)!important;
    gap:30px!important;
  }
  .hero-copy .lead .actions{
    justify-content:flex-end!important;
  }

  .section-head{
    grid-template-columns:1fr minmax(300px,480px)!important;
    gap:36px!important;
  }

  .feature{
    grid-template-columns:1.5fr .8fr!important;
  }
  .feature .project-card{
    min-height:520px!important;
  }

  .grid3{
    grid-template-columns:repeat(3,1fr)!important;
  }
  .grid4{
    grid-template-columns:repeat(4,1fr)!important;
  }

  .idea{
    grid-template-columns:.8fr 1.2fr!important;
    gap:50px!important;
  }

  .services3{
    grid-template-columns:repeat(3,1fr)!important;
  }

  .autofocus{
    grid-template-columns:1fr 1fr!important;
    min-height:680px!important;
  }
  .autofocus .copy{
    padding:68px var(--pad)!important;
  }

  .recent-strip{
    grid-template-columns:repeat(3,1fr)!important;
  }

  .workgrid{
    grid-template-columns:repeat(12,1fr)!important;
    gap:14px!important;
  }
  .workgrid .project-card{grid-column:span 6!important}
  .workgrid .project-card.w7{grid-column:span 7!important}
  .workgrid .project-card.w5{grid-column:span 5!important}
  .workgrid .project-card.w4{grid-column:span 4!important}
  .workgrid .project-card.w8{grid-column:span 8!important}

  .contactgrid{
    grid-template-columns:.9fr 1.1fr!important;
    gap:64px!important;
  }
  form{
    grid-template-columns:1fr 1fr!important;
  }
  .field.full,
  .submit,
  .form-privacy-note,
  .form-status{
    grid-column:1/-1!important;
  }

  .project-head{
    min-height:88svh!important;
  }
  .project-head .copy{
    padding-top:138px!important;
    padding-bottom:46px!important;
  }
  .project-head .copy h1{
    font-size:clamp(68px,6.8vw,88px)!important;
  }
  .project-intro .inner{
    grid-template-columns:.7fr 1.3fr!important;
    gap:58px!important;
  }

  .cinema-hero{
    padding-bottom:7vh!important;
  }
  .cinema-hero-copy{
    max-width:800px!important;
  }
  .cinema-hero-copy h1{
    font-size:clamp(72px,7vw,90px)!important;
  }

  .youtube-rail{
    grid-auto-columns:48vw!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:26vw!important;
  }
  .youtube-rail-arrow{
    display:grid!important;
  }
  .youtube-collection-meta .count{
    display:inline!important;
  }
}

/* --------------------------------------------------------------
   STANDARD DESKTOP 1280–1599
   -------------------------------------------------------------- */
@media(min-width:1280px){
  :root{
    --pad:clamp(48px,4vw,64px);
    --section-y:104px;
  }

  .navbar{
    height:82px!important;
  }
  .logo img{
    width:218px!important;
  }
  .navlinks{
    gap:26px!important;
  }
  .navlinks button{
    font-size:10px!important;
  }

  .display{
    font-size:clamp(74px,5.9vw,94px)!important;
  }
  .display.sm{
    font-size:clamp(64px,5vw,80px)!important;
  }
  .headline{
    font-size:clamp(52px,4.2vw,66px)!important;
  }

  .hero-copy{
    padding-top:148px!important;
    padding-bottom:54px!important;
  }
  .hero-copy .display{
    max-width:72vw!important;
  }

  .project-card{
    min-height:520px!important;
  }
  .project-card.small{
    min-height:400px!important;
  }

  .idea .big{
    font-size:clamp(72px,6vw,96px)!important;
  }

  .servicebox{
    min-height:350px!important;
  }
  .servicebox h3{
    font-size:clamp(34px,2.9vw,46px)!important;
  }

  .cta .display{
    font-size:clamp(78px,6.4vw,102px)!important;
  }

  .subhero{
    min-height:64vh!important;
    padding-top:150px!important;
    padding-bottom:68px!important;
  }

  .contactpage{
    padding-top:142px!important;
  }
  .contactgrid .display{
    font-size:clamp(70px,5.8vw,94px)!important;
  }

  .project-head{
    min-height:90svh!important;
  }
  .project-head .copy h1{
    font-size:clamp(76px,6vw,96px)!important;
  }

  .cinema-hero-copy{
    max-width:860px!important;
  }
  .cinema-hero-copy h1{
    font-size:clamp(80px,6.3vw,100px)!important;
  }
  .cinema-hero-copy p{
    font-size:17px!important;
  }

  .youtube-rail{
    grid-auto-columns:42vw!important;
    gap:16px!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:22vw!important;
    gap:16px!important;
  }
}

/* --------------------------------------------------------------
   LARGE DESKTOP 1600+
   1920x1080 is the reference composition.
   Typography grows only slightly. Whitespace does the work.
   -------------------------------------------------------------- */
@media(min-width:1600px){
  :root{
    --pad:clamp(64px,4.5vw,92px);
    --section-y:112px;
  }

  .navbar{
    height:86px!important;
  }
  .logo img{
    width:228px!important;
  }

  .display{
    font-size:clamp(86px,5.1vw,104px)!important;
  }
  .display.sm{
    font-size:clamp(72px,4.35vw,88px)!important;
  }
  .headline{
    font-size:clamp(58px,3.65vw,72px)!important;
  }
  .subhead{
    font-size:clamp(40px,2.75vw,54px)!important;
  }
  .body-lg{
    font-size:clamp(16px,.9vw,18px)!important;
  }

  .hero-copy{
    padding-top:154px!important;
    padding-bottom:58px!important;
  }
  .hero-copy .display{
    max-width:min(1120px,62vw)!important;
  }
  .hero-copy .lead{
    margin-top:28px!important;
  }
  .hero-copy .lead p{
    font-size:15px!important;
  }

  .section-head{
    margin-bottom:48px!important;
  }

  .project-card{
    min-height:540px!important;
  }

  .project-card .meta h3{
    font-size:clamp(29px,1.8vw,36px)!important;
  }

  .idea .big{
    font-size:clamp(82px,5vw,100px)!important;
  }

  .cta .display{
    font-size:clamp(88px,5.7vw,110px)!important;
  }

  .contactgrid .display{
    font-size:clamp(78px,5vw,98px)!important;
  }

  .project-head .copy h1{
    font-size:clamp(82px,5vw,102px)!important;
  }

  .cinema-hero-copy{
    max-width:900px!important;
  }
  .cinema-hero-copy h1{
    font-size:clamp(88px,5vw,104px)!important;
  }
  .cinema-signoff h2{
    font-size:clamp(86px,5.1vw,106px)!important;
  }

  /* Around two large films plus the next edge on 1080p.
     QHD caps instead of scaling indefinitely. */
  .youtube-rail{
    grid-auto-columns:min(42vw,900px)!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:min(20vw,390px)!important;
  }
}

/* --------------------------------------------------------------
   VERY LARGE / QHD+
   Preserve composition. Add room, not giant type.
   -------------------------------------------------------------- */
@media(min-width:2200px){
  :root{
    --pad:clamp(88px,4.5vw,128px);
    --section-y:118px;
  }

  .display{
    font-size:104px!important;
  }
  .display.sm{
    font-size:88px!important;
  }
  .headline{
    font-size:72px!important;
  }
  .subhead{
    font-size:54px!important;
  }

  .logo img{
    width:232px!important;
  }

  .hero-copy .display{
    max-width:1120px!important;
  }

  .cinema-hero-copy h1{
    font-size:104px!important;
  }

  .project-head .copy h1{
    font-size:102px!important;
  }

  .youtube-rail{
    grid-auto-columns:900px!important;
  }
  .youtube-shorts-rail{
    grid-auto-columns:390px!important;
  }

  .body-lg,
  .cinema-hero-copy p{
    font-size:17px!important;
  }
}

/* Short-height laptop safety: 1366x768 / 1280x800 etc. */
@media(min-width:1024px) and (max-height:820px){
  .hero-copy{
    padding-top:118px!important;
    padding-bottom:34px!important;
  }
  .display{
    font-size:min(6vw,78px)!important;
  }
  .hero-copy .lead{
    margin-top:20px!important;
    padding-top:16px!important;
  }
  .cinema-hero{
    min-height:100svh!important;
    padding-bottom:5vh!important;
  }
  .cinema-hero-copy h1{
    font-size:min(6.4vw,82px)!important;
    margin-bottom:18px!important;
  }
  .cinema-hero-copy p{
    font-size:14px!important;
  }
  .project-head{
    min-height:100svh!important;
  }
}

/* Reduced motion keeps the same geometry. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}


/* ==============================================================
   V55 WATCH REPAIR
   Ensures video cards cannot collapse into thin strips.
   ============================================================== */

.youtube-rail{
  align-items:start!important;
}

.youtube-feed-card{
  align-self:start!important;
  min-height:0!important;
  height:auto!important;
}

/* Current V53+ markup */
.youtube-feed-media{
  flex:0 0 auto!important;
  min-height:0!important;
}

/* Safety fallback for any old cached card markup where the thumbnail
   sits directly inside .youtube-feed-card rather than .youtube-feed-media. */
.youtube-feed-card > img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  flex:0 0 auto!important;
}

/* Copy always lives under the visual block. */
.youtube-feed-card-copy{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  padding:18px 1px 2px!important;
  z-index:2!important;
}

/* Current titles/descriptions use Gotham below the image. */
.youtube-feed-card-copy strong{
  display:block!important;
  font-family:"Gotham Bold",Arial,sans-serif!important;
  font-weight:700!important;
  text-transform:none!important;
  color:#f2f1ee!important;
}

.youtube-card-description{
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-weight:400!important;
  color:#9f999f!important;
}

/* Keep the play control on the visual area. */
.youtube-feed-media .youtube-feed-play{
  position:absolute!important;
  left:18px!important;
  top:18px!important;
}

/* If an old cached card has the play button as a direct child,
   keep it visually anchored near the top-left of the thumbnail. */
.youtube-feed-card > .youtube-feed-play{
  left:18px!important;
  top:18px!important;
}

/* 1920px reference: two large cinematic cards and part of the next. */
@media(min-width:1600px){
  .youtube-rail{
    grid-auto-columns:min(42vw,900px)!important;
  }
}

/* QHD keeps cards capped instead of creating a dense grid. */
@media(min-width:2200px){
  .youtube-rail{
    grid-auto-columns:900px!important;
  }
}


/* ==============================================================
   V57 — EMIL-INSPIRED ALTERNATIVE INTERACTION PASS
   Optional review version. Layout/content/typography remain unchanged.
   ============================================================== */

:root{
  --motion-ease-out:cubic-bezier(.23,1,.32,1);
  --motion-ease-in-out:cubic-bezier(.77,0,.175,1);
  --motion-drawer:cubic-bezier(.32,.72,0,1);
  --motion-fast:140ms;
  --motion-ui:200ms;
  --motion-reveal:320ms;
}

/* 1. Frequent route changes are immediate; no blocking full-screen wipe. */
.route-veil{display:none!important}

.view.active{
  animation:v57-view-enter 180ms var(--motion-ease-out) both;
}
.project.open .project-head{
  animation:v57-view-enter 200ms var(--motion-ease-out) both;
}
@keyframes v57-view-enter{
  from{opacity:.01;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* 2. Scroll reveals are lighter and faster. */
.wow-reveal{
  opacity:.01!important;
  transform:translateY(14px)!important;
  clip-path:none!important;
  transition:
    opacity var(--motion-reveal) var(--motion-ease-out),
    transform var(--motion-reveal) var(--motion-ease-out)!important;
}
.wow-reveal.revealed{
  opacity:1!important;
  transform:none!important;
}

/* 3. Work-card interaction is restrained and hover-only. */
#work .project-card img,
#work .project-card video,
.workgrid .project-card img,
.workgrid .project-card video{
  transition:
    transform 220ms var(--motion-ease-out),
    filter 220ms ease!important;
}
#work .project-card .meta,
.workgrid .project-card .meta{
  transition:transform 180ms var(--motion-ease-out)!important;
}

@media(hover:hover) and (pointer:fine){
  #work .project-card:hover img,
  #work .project-card:hover video,
  .workgrid .project-card:hover img,
  .workgrid .project-card:hover video{
    transform:scale(1.018)!important;
    filter:brightness(.96);
  }

  #work .project-card:hover .meta,
  .workgrid .project-card:hover .meta{
    transform:translateY(-3px)!important;
  }

  .youtube-feed-card:hover .youtube-feed-media img,
  .youtube-short-card:hover .youtube-short-media img{
    transform:scale(1.015)!important;
    filter:brightness(.94)!important;
  }

  .youtube-launch:hover .youtube-feed-play{
    transform:scale(1.06);
  }

  .btn:hover .arr{
    transform:translateX(3px)!important;
  }
}

/* 4. Immediate press feedback. */
.btn,
.viewer-close,
.close,
.youtube-player-close,
.cinema-player-close,
.project-spec-close,
.project-spec-trigger,
.watch-film-play,
.youtube-rail-arrow{
  transition:
    transform var(--motion-fast) var(--motion-ease-out),
    background-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    opacity var(--motion-ui) ease!important;
}

.btn:active,
.viewer-close:active,
.close:active,
.youtube-player-close:active,
.cinema-player-close:active,
.project-spec-close:active,
.project-spec-trigger:active,
.watch-film-play:active,
.youtube-rail-arrow:active{
  transform:scale(.97)!important;
}

.navlinks button,
.filterbar button,
.youtube-filterbar button{
  transition:
    opacity 120ms ease,
    background-color 120ms ease,
    color 120ms ease!important;
}

/* 5. Mobile menu gets short spatial continuity. */
@media(max-width:1023px){
  .mobilepanel{
    display:grid!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translateY(-8px)!important;
    pointer-events:none!important;
    transition:
      opacity 180ms var(--motion-ease-out),
      transform 180ms var(--motion-ease-out),
      visibility 0s linear 180ms!important;
  }

  .mobilepanel.open{
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    transition:
      opacity 180ms var(--motion-ease-out),
      transform 180ms var(--motion-ease-out),
      visibility 0s!important;
  }
}

/* 6. Drawer is quicker and more physically connected. */
.project-spec-drawer{
  transition:transform 280ms var(--motion-drawer)!important;
}

/* 7. Fullscreen viewers/players use subtle non-zero-scale entrances. */
.image-viewer.open{
  animation:v57-backdrop-in 180ms ease-out both;
}
.image-viewer.open #viewerImage{
  animation:v57-modal-in 220ms var(--motion-ease-out) both;
}
.cinema-player.open,
.youtube-player.open{
  animation:v57-backdrop-in 180ms ease-out both;
}
.cinema-player.open .cinema-player-shell,
.youtube-player.open .youtube-player-shell{
  animation:v57-modal-in 220ms var(--motion-ease-out) both;
}

@keyframes v57-backdrop-in{
  from{opacity:.01}
  to{opacity:1}
}
@keyframes v57-modal-in{
  from{opacity:.01;transform:translateY(6px) scale(.985)}
  to{opacity:1;transform:none}
}

/* 8. Gallery/player controls stay responsive but subtle. */
.youtube-feed-play,
.gallery-nav,
.gallery-filmstrip button{
  transition:
    transform 160ms var(--motion-ease-out),
    opacity 160ms ease,
    border-color 160ms ease!important;
}

@media(hover:hover) and (pointer:fine){
  .gallery-filmstrip button:hover{opacity:.78}
}

/* 9. Reduced-motion keeps comprehension without movement. */
@media(prefers-reduced-motion:reduce){
  .view.active,
  .project.open .project-head,
  .image-viewer.open,
  .image-viewer.open #viewerImage,
  .cinema-player.open,
  .cinema-player.open .cinema-player-shell,
  .youtube-player.open,
  .youtube-player.open .youtube-player-shell{
    animation:none!important;
  }

  .wow-reveal,
  .wow-reveal.revealed{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .mobilepanel,
  .mobilepanel.open,
  .project-spec-drawer,
  .btn,
  .youtube-feed-play{
    transition:none!important;
  }
}


/* ==============================================================
   V58 — HOME FINALISATION
   Approved Home-page refinements only.
   ============================================================== */

/* HERO: icon-only scroll cue */
.hero-scroll-cue{
  position:absolute;
  right:var(--pad);
  bottom:30px;
  z-index:5;
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#fff;
  opacity:.62;
  cursor:pointer;
}
.hero-scroll-cue svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:v58-chevron-drift 2.8s ease-in-out infinite;
}
@keyframes v58-chevron-drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@media(hover:hover) and (pointer:fine){
  .hero-scroll-cue:hover{opacity:1}
}
@media(max-width:767px){
  .hero-scroll-cue{
    right:var(--pad);
    bottom:18px;
  }
}

/* ==============================================================
   PRODUCTION R10 — FIRST-ENTRY HOMEPAGE REVEAL
   ============================================================== */
.site-opening{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  width:100%;
  height:100dvh;
  min-height:100svh;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#070708;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity 700ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 700ms;
}
.site-opening-backdrop,
.site-opening-shade{
  position:absolute;
  inset:0;
}
.site-opening-backdrop{
  inset:-2%;
  z-index:-2;
  background:
    url("../video/clients/general/1ULLsH5Zm5aJdWJ7qnQVlnrOaGCOwWSc4.jpg")
    center center / cover no-repeat;
  transform:scale(1.035);
}
.site-opening-shade{
  z-index:-1;
  background:
    radial-gradient(circle at 50% 48%,rgba(94,23,81,.15),transparent 34%),
    linear-gradient(180deg,rgba(5,5,6,.64),rgba(5,5,6,.82));
}
.site-opening-logo{
  position:relative;
  width:clamp(158px,14vw,224px);
  aspect-ratio:154.15 / 159.11;
  opacity:0;
  transform:scale(.94);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.34));
}
.site-opening-logo img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.site-opening-ring{
  transform-origin:50% 50%;
}

html.site-opening-preload:not(.site-opening-leaving),
html.site-opening-preload:not(.site-opening-leaving) body{
  overflow:hidden!important;
  overscroll-behavior:none;
}
html.site-opening-preload .site-opening{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:none;
}
html.site-opening-preload .site-opening-backdrop{
  animation:site-opening-settle 2800ms cubic-bezier(.22,1,.36,1) both;
}
html.site-opening-preload .site-opening-logo{
  animation:site-opening-mark-in 620ms cubic-bezier(.22,1,.36,1) 100ms forwards;
}
html.site-opening-preload .site-opening-ring{
  animation:site-opening-ring-spin 1800ms linear infinite;
  will-change:transform;
}
html.site-opening-leaving .site-opening{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity 700ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 700ms;
}

@keyframes site-opening-settle{
  from{transform:scale(1.055)}
  to{transform:scale(1.015)}
}
@keyframes site-opening-mark-in{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}
@keyframes site-opening-ring-spin{
  to{transform:rotate(360deg)}
}

@media(max-width:767px){
  .site-opening-logo{
    width:clamp(136px,42vw,176px);
  }
  .site-opening-backdrop{
    background-position:58% center;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-opening{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .site-opening-backdrop,
  .site-opening-logo,
  .site-opening-ring{
    animation:none!important;
    transform:none!important;
  }
}

/* SELECTED WORK: fit the complete curated composition at the 1920x1080 reference. */
@media(min-width:1600px){
  .home-selected-work{
    padding:58px 0 62px!important;
  }
  .home-selected-work .section-head{
    margin-bottom:26px!important;
  }
  .home-selected-work .feature{
    gap:14px!important;
  }
  .home-selected-work .feature .project-card{
    min-height:390px!important;
  }
  .home-selected-work .grid2{
    gap:14px!important;
    margin-top:14px!important;
  }
  .home-selected-work .grid2 .project-card.small{
    min-height:270px!important;
  }
}

/* CLIENT LOGO LOOP: same black field as Selected Work, no dividers, slightly slower. */
#home .logo-loop{
  background:transparent!important;
  border-top:0!important;
  border-bottom:0!important;
}
#home .logo-loop::before,
#home .logo-loop::after{
  display:none!important;
}
#home .logo-loop-track{
  animation-duration:42s!important;
}

/* LIGHTHOUSE IDEA: clean top alignment + slightly smaller main statement. */
.home-idea-section .idea{
  align-items:start!important;
}
.home-idea-section .idea-copy{
  padding-top:0!important;
}
@media(min-width:1024px){
  .home-idea-section .idea .big{
    font-size:clamp(72px,4.55vw,90px)!important;
  }
}

/* RECENTLY AT LIGHTHOUSE: editorial white field, dark heading copy. */
#home .recent-section{
  background:var(--paper)!important;
  color:#080808!important;
}
#home .recent-section .recent-head{
  grid-template-columns:1fr!important;
}
#home .recent-section .kicker,
#home .recent-section .headline{
  color:#080808!important;
}
#home .recent-carousel-hint{
  color:#080808!important;
}
#home .recent-carousel-hint span{
  color:inherit!important;
}

/* CLOSING AREA: one unified 4-column footer/CTA composition. */
.home-closing{
  background:var(--paper);
  color:#080808;
  border-top:1px solid #d8d3cf;
  padding:72px 0 78px;
}
.home-closing-grid{
  display:grid;
  grid-template-columns:1.18fr .7fr .78fr 1.42fr;
  gap:clamp(32px,3vw,62px);
  align-items:start;
}
.home-closing-brand,
.home-closing-nav,
.home-closing-social,
.home-closing-cta{
  align-self:start;
}
.home-closing-logo{
  width:min(220px,100%);
  height:auto;
  display:block;
  filter:invert(1);
}
.home-closing-brand-meta{
  margin-top:34px;
}
.home-closing-brand p,
.home-closing-nav p,
.home-closing-social p,
.home-closing-cta p{
  margin:0;
  color:#555;
  font-size:12px;
  line-height:1.8;
}
.home-closing-brand p + p{
  margin-top:8px;
}
.home-closing h4{
  margin:0 0 15px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#080808;
}
.home-closing a{
  color:#4e4a4e;
  font-size:12px;
  line-height:1.9;
}
@media(hover:hover) and (pointer:fine){
  .home-closing a:hover{
    color:#772269;
  }
}
.home-closing-cta .kicker{
  color:#080808;
  margin-bottom:13px;
}
.home-closing-cta h2{
  margin:0;
  max-width:650px;
  font-family:MicroBold,Impact,sans-serif;
  font-size:clamp(42px,3.25vw,64px);
  line-height:.88;
  letter-spacing:.005em;
  text-transform:uppercase;
  font-weight:400;
  color:#080808;
}
.home-closing-cta h2 span{
  color:#7f1d6f;
}
.home-closing-cta > p{
  max-width:520px;
  margin-top:24px;
  font-size:13px;
  line-height:1.6;
}
.home-closing-cta .btn{
  margin-top:24px;
}

@media(max-width:1279px){
  .home-closing-grid{
    grid-template-columns:1.1fr .7fr .8fr 1.2fr;
    gap:28px;
  }
  .home-closing-cta h2{
    font-size:clamp(38px,3.8vw,50px);
  }
}

@media(max-width:1023px){
  .home-closing-grid{
    grid-template-columns:1fr 1fr;
    gap:48px 36px;
  }
  .home-closing-cta{
    grid-column:1/-1;
    max-width:720px;
  }
}

@media(max-width:767px){
  .home-closing{
    padding:58px 0 64px;
  }
  .home-closing-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .home-closing-cta{
    grid-column:auto;
    padding-top:8px;
  }
  .home-closing-brand-meta{
    margin-top:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-scroll-cue svg{
    animation:none!important;
  }
}


/* ==============================================================
   V59 — HOME SPACING + ALIGNMENT REFINEMENT
   Based only on the approved V58 Home build.
   ============================================================== */

/* 1. PROOF FIRST + CLIENT LOGOS
   Treat these as one continuous black proof block rather than two sections. */
@media(min-width:1024px){
  #home .home-selected-work{
    padding-bottom:22px!important;
  }

  #home .logo-loop{
    padding:16px 0 24px!important;
  }

  #home .logo-loop-label{
    padding-bottom:14px!important;
  }
}

/* Keep the connection compact on smaller screens too, without crowding. */
@media(max-width:1023px){
  #home .home-selected-work{
    padding-bottom:30px!important;
  }

  #home .logo-loop{
    padding:14px 0 28px!important;
  }
}

/* 2. LIGHTHOUSE IDEA
   Align the first line of the right paragraph precisely with ONE BRAND.
   The left kicker remains above the headline. */
@media(min-width:1024px){
  #home .home-idea-section .idea-copy{
    padding-top:0!important;
  }

  #home .home-idea-section .idea-copy .body-lg{
    margin:12px 0 0!important;
  }
}

/* 3. WHAT WE DO -> RECENTLY AT LIGHTHOUSE
   Both sections are now light, so remove the old double-section whitespace.
   Around 36px + 36px gives a transition close to the spacing beneath
   THE WORK KEEPS MOVING heading rather than a large blank field. */
@media(min-width:1024px){
  #home .home-idea-section + .section.paper{
    padding-bottom:36px!important;
  }

  #home .recent-section{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }

  #home .recent-section .section-head{
    margin-bottom:48px!important;
  }

  #home .recent-carousel-shell{
    padding-bottom:24px!important;
  }
}

/* Tablet/mobile retain more air but avoid the previous doubled spacing. */
@media(max-width:1023px){
  #home .home-idea-section + .section.paper{
    padding-bottom:42px!important;
  }

  #home .recent-section{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }

  #home .recent-carousel-shell{
    padding-bottom:22px!important;
  }
}

/* 4. RECENTLY -> CLOSING FOUR-COLUMN AREA
   Match the same tighter editorial rhythm. */
@media(min-width:1024px){
  #home .home-closing{
    padding-top:48px!important;
    padding-bottom:60px!important;
  }
}


/* ==============================================================
   V60 — HOME: LIGHTHOUSE IDEA + WHAT WE DO COMBINED
   ============================================================== */

#home .home-idea-services{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  width:100%;
  background:var(--paper);
}

#home .home-idea-panel{
  background:#5e1751;
  color:#fff;
}

#home .home-services-panel{
  background:var(--paper);
  color:#080808;
  border-left:1px solid rgba(0,0,0,.12);
}

#home .home-panel-inner{
  padding:clamp(58px,5vw,92px) clamp(42px,4.5vw,84px);
}

/* LEFT: Lighthouse Idea */
#home .home-idea-title{
  margin:18px 0 0;
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(62px,4.5vw,88px);
  line-height:.86;
  letter-spacing:.005em;
}

#home .home-idea-title em{
  display:block;
  margin-top:10px;
  font-style:normal;
  color:#a5328f;
}

#home .home-idea-copy{
  margin:34px 0 0;
  max-width:720px;
  font-family:"Gotham Book",Arial,sans-serif;
  font-size:16px;
  line-height:1.58;
  color:#fff;
}

#home .home-idea-pillars{
  margin-top:42px;
  border-top:1px solid rgba(255,255,255,.25);
}

#home .home-idea-pillar{
  display:grid;
  grid-template-columns:62px 1fr 56px;
  gap:18px;
  align-items:center;
  min-height:88px;
  border-bottom:1px solid rgba(255,255,255,.25);
}

#home .home-idea-pillar b{
  font-family:"Gotham Medium",Arial,sans-serif;
  font-size:10px;
  letter-spacing:.15em;
  color:#c37cb7;
}

#home .home-idea-pillar h3{
  margin:0;
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif;
  font-size:clamp(26px,2vw,38px);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}

#home .home-idea-pillar span{
  justify-self:end;
  font-family:"Gotham Book",Arial,sans-serif;
  font-size:11px;
  color:#c7bdc5;
}

/* RIGHT: What We Do */
#home .home-services-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);
  gap:32px;
  align-items:start;
}

#home .home-services-head h2{
  margin:16px 0 0;
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif;
  font-size:clamp(42px,3.15vw,60px);
  line-height:.9;
  font-weight:700;
  text-transform:uppercase;
  color:#080808;
}

#home .home-services-head > p{
  margin:0;
  padding-top:27px;
  font-family:"Gotham Book",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  color:#555;
}

#home .home-service-rows{
  margin-top:40px;
  border-top:1px solid rgba(0,0,0,.17);
}

#home .home-service-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  min-height:150px;
  padding:24px 0;
  border-bottom:1px solid rgba(0,0,0,.17);
}

#home .home-service-row .num{
  align-self:start;
  padding-top:5px;
  font-family:"Gotham Medium",Arial,sans-serif;
  font-size:10px;
  letter-spacing:.13em;
  color:#772269;
}

#home .home-service-row .service-copy h3{
  margin:0;
  font-family:"Gotham Black","Gotham Bold",Arial,sans-serif!important;
  font-size:clamp(25px,2vw,36px);
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
  font-weight:900;
  color:#080808;
}

#home .home-service-row .service-copy p{
  margin:10px 0 0;
  max-width:620px;
  font-family:"Gotham Book",Arial,sans-serif;
  font-size:13px;
  line-height:1.55;
  color:#555;
}

#home .home-service-row .btn{
  align-self:center;
  white-space:nowrap;
}

/* The old V59 spacing selector referred to two separate sections.
   The combined section now handles its own spacing. */
#home .home-idea-services + .recent-section{
  margin-top:0!important;
}

/* Desktop reference */
@media(min-width:1600px){
  #home .home-panel-inner{
    min-height:760px;
  }
}

/* Tablet: stack the two halves cleanly. */
@media(max-width:1279px){
  #home .home-idea-services{
    grid-template-columns:1fr;
  }

  #home .home-services-panel{
    border-left:0;
    border-top:1px solid rgba(0,0,0,.12);
  }

  #home .home-panel-inner{
    min-height:0;
  }
}

@media(max-width:767px){
  #home .home-panel-inner{
    padding:54px var(--pad);
  }

  #home .home-idea-title{
    font-size:clamp(48px,13vw,64px);
  }

  #home .home-services-head{
    grid-template-columns:1fr;
    gap:16px;
  }

  #home .home-services-head > p{
    padding-top:0;
  }

  #home .home-service-row{
    grid-template-columns:1fr;
    gap:12px;
    min-height:0;
    padding:28px 0;
  }

  #home .home-service-row .num{
    padding-top:0;
  }

  #home .home-service-row .btn{
    justify-self:start;
    margin-top:4px;
  }
}


/* ==============================================================
   V61 — HOME COMBINED SECTION FINAL BALANCE
   ============================================================== */

/* Overall combined section: smaller, tighter, designed to fit inside
   the 1920x1080 reference viewport as one complete composition. */
#home .home-idea-services{
  min-height:0!important;
}

#home .home-panel-inner{
  padding:46px 54px!important;
  min-height:0!important;
}

/* Make both main headings exactly the same size and rhythm. */
#home .home-idea-title,
#home .home-services-head h2{
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif!important;
  font-size:clamp(48px,3.25vw,62px)!important;
  line-height:.9!important;
  letter-spacing:.003em!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}

/* Left heading colour treatment preserved across 3 lines. */
#home .home-idea-title{
  margin-top:14px!important;
}
#home .home-idea-title em{
  display:inline!important;
  margin:0!important;
  font-style:normal!important;
  color:#a5328f!important;
}

/* Right heading no longer shares space with supporting copy. */
#home .home-services-head{
  display:block!important;
}
#home .home-services-head > p{
  display:none!important;
}
#home .home-services-head h2{
  margin-top:14px!important;
  max-width:none!important;
}

/* Tighten left-side copy + pillars so full block fits in view. */
#home .home-idea-copy{
  margin-top:22px!important;
  font-size:14px!important;
  line-height:1.5!important;
  max-width:650px!important;
}

#home .home-idea-pillars{
  margin-top:28px!important;
}

#home .home-idea-pillar{
  min-height:68px!important;
  grid-template-columns:52px 1fr 48px!important;
  gap:14px!important;
}

#home .home-idea-pillar h3{
  font-size:clamp(24px,1.65vw,31px)!important;
}

#home .home-idea-pillar span{
  font-size:10px!important;
}

/* Tighten right-side service rows and top-align every element. */
#home .home-service-rows{
  margin-top:28px!important;
}

#home .home-service-row{
  grid-template-columns:92px minmax(0,1fr) auto!important;
  gap:20px!important;
  min-height:0!important;
  padding:18px 0!important;
  align-items:start!important;
}

#home .home-service-row .num{
  align-self:start!important;
  padding-top:3px!important;
}

#home .home-service-row .service-copy{
  align-self:start!important;
}

#home .home-service-row .service-copy h3{
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif!important;
  font-size:clamp(24px,1.7vw,32px)!important;
  line-height:1!important;
  letter-spacing:.002em!important;
  text-transform:uppercase!important;
  font-weight:700!important;
}

#home .home-service-row .service-copy p{
  margin-top:8px!important;
  font-size:12px!important;
  line-height:1.45!important;
  max-width:560px!important;
}

#home .home-service-row .btn{
  align-self:start!important;
  margin-top:0!important;
  padding:9px 12px!important;
  font-size:8px!important;
}

/* Reference desktop: ensure the complete split section sits comfortably
   inside a standard 1080px-tall viewport without forcing clipping. */
@media(min-width:1600px){
  #home .home-panel-inner{
    padding-top:44px!important;
    padding-bottom:44px!important;
  }
}

/* Tablet: retain same hierarchy with less extreme density. */
@media(max-width:1279px){
  #home .home-panel-inner{
    padding:48px var(--pad)!important;
  }

  #home .home-idea-title,
  #home .home-services-head h2{
    font-size:clamp(44px,6vw,60px)!important;
  }
}

@media(max-width:767px){
  #home .home-panel-inner{
    padding:44px var(--pad)!important;
  }

  #home .home-idea-title,
  #home .home-services-head h2{
    font-size:clamp(38px,11vw,52px)!important;
  }

  #home .home-service-row{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:24px 0!important;
  }

  #home .home-service-row .btn{
    justify-self:start!important;
  }
}

/* RECENTLY AT LIGHTHOUSE:
   balance top and bottom whitespace around heading/carousel composition. */
#home .recent-section{
  padding-top:54px!important;
  padding-bottom:54px!important;
}

#home .recent-section .section-head{
  margin-bottom:42px!important;
}

#home .recent-carousel-shell{
  padding-bottom:0!important;
}

#home .recent-carousel-hint{
  padding-top:18px!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}

@media(max-width:1023px){
  #home .recent-section{
    padding-top:46px!important;
    padding-bottom:46px!important;
  }

  #home .recent-section .section-head{
    margin-bottom:34px!important;
  }
}


/* ==============================================================
   V63 — HOME CLOSING AREA BALANCE
   ============================================================== */

#home .home-closing{
  border-top:0!important;
  padding-top:48px!important;
  padding-bottom:56px!important;
}

#home .home-closing-grid{
  width:min(1480px,calc(100% - (2 * var(--pad))))!important;
  margin:0 auto!important;
  grid-template-columns:1.05fr .72fr .72fr 1.28fr!important;
  gap:clamp(34px,2.7vw,52px)!important;
  align-items:start!important;
}

/* Give the left side enough visual weight to balance the CTA. */
#home .home-closing-logo{
  width:min(250px,100%)!important;
}

#home .home-closing-brand-meta{
  margin-top:28px!important;
}

#home .home-closing-brand p,
#home .home-closing-nav p,
#home .home-closing-social p{
  font-size:13px!important;
  line-height:1.85!important;
}

#home .home-closing h4{
  font-size:11px!important;
  margin-bottom:16px!important;
}

#home .home-closing a{
  font-size:13px!important;
  line-height:1.9!important;
}

/* Keep the CTA dominant, but slightly tighter so it sits in balance with
   the now-stronger left three columns. */
#home .home-closing-cta h2{
  font-size:clamp(48px,3.05vw,60px)!important;
  max-width:560px!important;
}

#home .home-closing-cta > p{
  max-width:500px!important;
  font-size:13px!important;
  margin-top:20px!important;
}

#home .home-closing-cta .btn{
  margin-top:20px!important;
}

@media(max-width:1279px){
  #home .home-closing-grid{
    width:min(1120px,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1.05fr .72fr .72fr 1.18fr!important;
    gap:28px!important;
  }
}

@media(max-width:1023px){
  #home .home-closing-grid{
    width:min(900px,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1fr 1fr!important;
    gap:42px 32px!important;
  }
  #home .home-closing-cta{
    grid-column:1/-1!important;
    max-width:680px!important;
  }
}

@media(max-width:767px){
  #home .home-closing-grid{
    width:min(100%,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
}


/* ==============================================================
   V65 — BOXED HOME IDEA / WHAT WE DO SECTION
   Match the width of the Selected Work mosaic above.
   ============================================================== */

#home .home-idea-services{
  width:min(var(--max),calc(100% - (2 * var(--pad))))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

#home{
  background:#080808;
}

@media(max-width:767px){
  #home .home-idea-services{
    width:min(100%,calc(100% - (2 * var(--pad))))!important;
  }
}


/* ==============================================================
   V66 — FULL-BLEED SPLIT / BOXED CONTENT
   Purple + off-white backgrounds bleed to viewport edges.
   Internal content stays aligned to the Selected Work mosaic width.
   ============================================================== */

#home .home-idea-services{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
}

/* Same outer alignment as .wrap:
   pad on normal screens, centered max-width gutter on very wide screens. */
#home .home-idea-panel .home-panel-inner{
  padding-left:max(var(--pad),calc((100vw - var(--max))/2))!important;
}

#home .home-services-panel .home-panel-inner{
  padding-right:max(var(--pad),calc((100vw - var(--max))/2))!important;
}

/* Keep sensible inner breathing room near the centre split. */
#home .home-idea-panel .home-panel-inner{
  padding-right:54px!important;
}

#home .home-services-panel .home-panel-inner{
  padding-left:54px!important;
}

/* Tablet/mobile return to normal page padding when stacked. */
@media(max-width:1279px){
  #home .home-idea-panel .home-panel-inner,
  #home .home-services-panel .home-panel-inner{
    padding-left:var(--pad)!important;
    padding-right:var(--pad)!important;
  }
}


/* ==============================================================
   V67 — CLIENT LOGO CAROUSEL EDGE FADE
   ============================================================== */

/* Soft fade at the left and right edges, while keeping the centre logos
   fully visible and the carousel movement unchanged. */
#home .logo-loop-viewport{
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.35) 4%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.35) 96%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.35) 4%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.35) 96%,
    transparent 100%
  )!important;
}

/* Slightly narrower fade on smaller screens so usable logo space is preserved. */
@media(max-width:767px){
  #home .logo-loop-viewport{
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    )!important;
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    )!important;
  }
}


/* ==============================================================
   V68 — CLIENT LOGO CAROUSEL DEEPER EDGE FEATHER
   ============================================================== */

#home .logo-loop-viewport{
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.55) 10%,
    #000 17%,
    #000 83%,
    rgba(0,0,0,.55) 90%,
    rgba(0,0,0,.18) 95%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.55) 10%,
    #000 17%,
    #000 83%,
    rgba(0,0,0,.55) 90%,
    rgba(0,0,0,.18) 95%,
    transparent 100%
  )!important;
}

@media(max-width:767px){
  #home .logo-loop-viewport{
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.45) 6%,
      #000 12%,
      #000 88%,
      rgba(0,0,0,.45) 94%,
      transparent 100%
    )!important;
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.45) 6%,
      #000 12%,
      #000 88%,
      rgba(0,0,0,.45) 94%,
      transparent 100%
    )!important;
  }
}


/* ==============================================================
   V69 — UNIFIED TOP-LEVEL PAGE CLOSING NAV / FOOTER
   Mirrors the Home page closing composition.
   Theme matches the final section directly above it.
   ============================================================== */

.page-closing{
  border:0!important;
  padding:48px 0 56px!important;
}

.page-closing-grid{
  width:min(1480px,calc(100% - (2 * var(--pad))))!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1.05fr .72fr .72fr 1.28fr!important;
  gap:clamp(34px,2.7vw,52px)!important;
  align-items:start!important;
}

.page-closing-brand,
.page-closing-nav,
.page-closing-social,
.page-closing-cta{
  align-self:start!important;
}

.page-closing-logo{
  display:block!important;
  width:min(250px,100%)!important;
  height:auto!important;
}

.page-closing-brand-meta{
  margin-top:28px!important;
}

.page-closing p{
  margin:0!important;
}

.page-closing-brand p,
.page-closing-nav p,
.page-closing-social p{
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.85!important;
}

.page-closing-brand p + p{
  margin-top:8px!important;
}

.page-closing h4{
  margin:0 0 16px!important;
  font-family:"Gotham Medium",Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}

.page-closing a{
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.9!important;
  transition:opacity 140ms ease,color 140ms ease!important;
}

.page-closing-cta .kicker{
  margin-bottom:13px!important;
}

.page-closing-cta h2{
  margin:0!important;
  max-width:560px!important;
  font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif!important;
  font-size:clamp(48px,3.05vw,60px)!important;
  line-height:.88!important;
  letter-spacing:.005em!important;
  text-transform:uppercase!important;
  font-weight:700!important;
}

.page-closing-cta h2 span{
  color:#7f1d6f!important;
}

.page-closing-cta > p{
  max-width:500px!important;
  margin-top:20px!important;
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.6!important;
}

.page-closing-cta .page-closing-btn{
  margin-top:20px!important;
}

/* LIGHT THEME: continues paper/white section above without a divider. */
.page-closing-light{
  background:var(--paper)!important;
  color:#080808!important;
}

.page-closing-light .page-closing-logo{
  filter:invert(1)!important;
}

.page-closing-light .page-closing-brand p,
.page-closing-light .page-closing-nav p,
.page-closing-light .page-closing-social p,
.page-closing-light .page-closing-cta > p,
.page-closing-light a{
  color:#4e4a4e!important;
}

.page-closing-light h4,
.page-closing-light .kicker,
.page-closing-light .page-closing-cta h2{
  color:#080808!important;
}

.page-closing-light .page-closing-btn{
  background:#080808!important;
  border-color:#080808!important;
  color:#fff!important;
}

@media(hover:hover) and (pointer:fine){
  .page-closing-light a:hover{
    color:#772269!important;
  }
}

/* DARK THEME: continues black section above without a divider. */
.page-closing-dark{
  background:#080809!important;
  color:#fff!important;
}

.page-closing-dark .page-closing-logo{
  filter:none!important;
}

.page-closing-dark .page-closing-brand p,
.page-closing-dark .page-closing-nav p,
.page-closing-dark .page-closing-social p,
.page-closing-dark .page-closing-cta > p,
.page-closing-dark a{
  color:#aaa5aa!important;
}

.page-closing-dark h4,
.page-closing-dark .kicker,
.page-closing-dark .page-closing-cta h2{
  color:#fff!important;
}

.page-closing-dark .page-closing-cta h2 span{
  color:#a5328f!important;
}

.page-closing-dark .page-closing-btn{
  background:#fff!important;
  border-color:#fff!important;
  color:#080808!important;
}

@media(hover:hover) and (pointer:fine){
  .page-closing-dark a:hover{
    color:#fff!important;
  }
}

/* Responsive behaviour mirrors the Home closing section. */
@media(max-width:1279px){
  .page-closing-grid{
    width:min(1120px,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1.05fr .72fr .72fr 1.18fr!important;
    gap:28px!important;
  }
}

@media(max-width:1023px){
  .page-closing-grid{
    width:min(900px,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1fr 1fr!important;
    gap:42px 32px!important;
  }
  .page-closing-cta{
    grid-column:1/-1!important;
    max-width:680px!important;
  }
}

@media(max-width:767px){
  .page-closing{
    padding:46px 0 54px!important;
  }
  .page-closing-grid{
    width:min(100%,calc(100% - (2 * var(--pad))))!important;
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .page-closing-cta{
    grid-column:auto!important;
  }
}


/* ==============================================================
   V70 — SERVICES CLOSING CLEANUP
   ============================================================== */

/* Light closing footers are now true white, not cream/off-white. */
.page-closing-light{
  background:#ffffff!important;
}


/* ==============================================================
   MASTER RESPONSIVE / LAYOUT AUDIT — SEPTEMBER 2026
   Authoritative responsive system: 480 / 768 / 1024 / 1280 / 1600.
   1920x1080 is the primary desktop calibration. QHD grows canvas more
   than type, preventing both cramped 1080p and over-empty 1440p layouts.
   ============================================================== */

:root{
  --pad:clamp(24px,6.25vw,160px)!important;
  --max:clamp(1600px,80vw,2048px)!important;
}

.wrap{
  width:min(var(--max),calc(100% - (2 * var(--pad))))!important;
  margin-inline:auto!important;
}

/* Align site chrome to the same content gutters. */
.navbar{
  padding-left:max(var(--pad),calc((100vw - var(--max))/2))!important;
  padding-right:max(var(--pad),calc((100vw - var(--max))/2))!important;
}

/* Wider screens use their extra canvas instead of freezing at the old 1680px cap. */
.page-closing-grid,
#home .home-closing-grid{
  width:min(var(--max),calc(100% - (2 * var(--pad))))!important;
  max-width:none!important;
}

/* Default editorial rhythm. Full-bleed media remains full bleed. */
.section{padding-top:96px!important;padding-bottom:96px!important}
.section.tight{padding-top:68px!important;padding-bottom:68px!important}
.workpage{padding-top:68px!important;padding-bottom:96px!important}
.servicespage{padding-top:82px!important;padding-bottom:96px!important}
.contactpage{padding-top:142px!important;padding-bottom:72px!important;min-height:auto!important}

/* Avoid oversized gaps as the canvas grows. */
.section-head{gap:clamp(28px,3vw,48px)!important;margin-bottom:clamp(34px,3vw,48px)!important}
.contactgrid{gap:clamp(44px,5vw,90px)!important}
.workgrid{gap:14px!important}
.capabilities{gap:14px!important}

/* Project/editorial text remains readable on very wide screens. */
.body-lg{font-size:clamp(16px,.95vw,19px)!important}
.project p,.project li{max-width:78ch}

/* Keep Home split full bleed while aligning its inner content with the site grid. */
#home .home-idea-panel .home-panel-inner{
  padding-left:max(var(--pad),calc((100vw - var(--max))/2))!important;
}
#home .home-services-panel .home-panel-inner{
  padding-right:max(var(--pad),calc((100vw - var(--max))/2))!important;
}

/* Client/logo labels and carousel UI align to the master gutter. */
.logo-loop-label,
.client-carousel-intro{
  padding-left:max(var(--pad),calc((100vw - var(--max))/2))!important;
  padding-right:max(var(--pad),calc((100vw - var(--max))/2))!important;
}

/* ------------------------------ 1600+ ------------------------------ */
@media(min-width:1600px){
  .section{padding-top:104px!important;padding-bottom:104px!important}
  .section.tight{padding-top:72px!important;padding-bottom:72px!important}
  .workpage{padding-top:74px!important;padding-bottom:106px!important}
  .servicespage{padding-top:88px!important;padding-bottom:106px!important}
  .navbar{height:86px!important}
  .display{font-size:clamp(86px,5.1vw,104px)!important}
  .display.sm{font-size:clamp(72px,4.35vw,88px)!important}
  .headline{font-size:clamp(58px,3.65vw,72px)!important}
  .subhead{font-size:clamp(40px,2.75vw,54px)!important}
}

/* ------------------------------ <1280 ------------------------------ */
@media(max-width:1279px){
  .section{padding-top:84px!important;padding-bottom:84px!important}
  .section.tight{padding-top:62px!important;padding-bottom:62px!important}
  .workpage{padding-top:62px!important;padding-bottom:86px!important}
  .servicespage{padding-top:72px!important;padding-bottom:88px!important}
  .contactpage{padding-top:126px!important;padding-bottom:66px!important}
  .capabilities{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-closing-grid,#home .home-closing-grid{gap:28px!important}
}

/* ------------------------------ <1024 ------------------------------ */
@media(max-width:1023px){
  .section{padding-top:72px!important;padding-bottom:72px!important}
  .section.tight{padding-top:56px!important;padding-bottom:56px!important}
  .section-head{grid-template-columns:1fr!important;gap:20px!important}
  .section-head p{max-width:68ch}
  .workgrid{grid-template-columns:1fr 1fr!important}
  .workgrid .project-card,.workgrid .project-card.w4,.workgrid .project-card.w5,.workgrid .project-card.w6,.workgrid .project-card.w7,.workgrid .project-card.w8{grid-column:auto!important;min-height:420px!important}
  .contactgrid{grid-template-columns:1fr!important;gap:54px!important}
  .servicerow{grid-template-columns:64px 1fr!important;gap:26px!important}
  .servicerow p{grid-column:2!important}
  .page-closing-grid,#home .home-closing-grid{grid-template-columns:1fr 1fr!important;gap:40px 30px!important}
  .page-closing-cta,#home .home-closing-cta{grid-column:1/-1!important}
  .project-head{min-height:78svh!important}
}

/* ------------------------------ <768 ------------------------------ */
@media(max-width:767px){
  :root{--pad:clamp(22px,6.25vw,30px)!important}
  .navbar{height:72px!important}
  .navlinks{display:none!important}
  .menu{display:block!important}
  .logo img{width:190px!important}
  .section{padding-top:58px!important;padding-bottom:58px!important}
  .section.tight{padding-top:48px!important;padding-bottom:48px!important}
  .workpage{padding-top:52px!important;padding-bottom:68px!important}
  .servicespage{padding-top:56px!important;padding-bottom:70px!important}
  .contactpage{padding-top:104px!important;padding-bottom:56px!important}
  .workgrid{grid-template-columns:1fr!important;gap:12px!important}
  .workgrid .project-card,.workgrid .project-card.small{min-height:390px!important}
  .servicerow{grid-template-columns:1fr!important;gap:10px!important;padding:26px 0!important}
  .servicerow p{grid-column:1!important}
  .capabilities{grid-template-columns:1fr!important}
  .page-closing-grid,#home .home-closing-grid{grid-template-columns:1fr!important;gap:30px!important}
  .page-closing-cta,#home .home-closing-cta{grid-column:auto!important}
  .project-head{min-height:72svh!important}
  .project-head .copy{padding-top:104px!important;padding-bottom:38px!important}
  .project-head .copy h1{font-size:clamp(46px,12vw,68px)!important}
  .hero{min-height:100svh!important}
  .hero-copy{padding-top:118px!important;padding-bottom:44px!important}
  #home .home-idea-services{grid-template-columns:1fr!important}
  #home .home-panel-inner{padding-left:var(--pad)!important;padding-right:var(--pad)!important}
}

/* ------------------------------ <480 ------------------------------ */
@media(max-width:479px){
  :root{--pad:22px!important}
  .logo img{width:174px!important}
  .section{padding-top:50px!important;padding-bottom:50px!important}
  .display{font-size:clamp(48px,13vw,60px)!important}
  .headline{font-size:clamp(38px,10vw,50px)!important}
  .subhead{font-size:clamp(30px,8vw,40px)!important}
  .workgrid .project-card,.workgrid .project-card.small{min-height:350px!important}
  .btn{min-height:42px}
}

/* Tablet navigation override for the audited 768px breakpoint. */
@media(min-width:768px) and (max-width:1023px){
  .navbar{height:78px!important}
  .logo img{width:182px!important}
  .navlinks{display:flex!important;gap:16px!important}
  .navlinks button{font-size:8.5px!important;letter-spacing:.13em!important}
  .navlinks .start{padding:10px 12px!important}
  .menu{display:none!important}
  .mobilepanel{display:none!important}
}


/* ==============================================================
   NEW WORKFLOW PASS — STATIC UI -> RESPONSIVE -> MOTION
   1920x1080 primary calibration. 2560x1440 expands content without
   scaling typography aggressively.
   ============================================================== */

/* PRIMARY DESKTOP CONTAINER
   1920px => ~160px gutters / 1600px content.
   2560px => ~256px gutters / 2048px content. */
:root{
  --page-gutter:clamp(22px,6.25vw,160px);
}

/* Tablet portrait/landscape: the Home split becomes a deliberate stack.
   1280px and above retains the desktop split. */
@media(max-width:1279px){
  #home .home-idea-services{
    grid-template-columns:1fr!important;
  }
  #home .home-services-panel{
    border-left:0!important;
    border-top:1px solid rgba(0,0,0,.12)!important;
  }
  #home .home-idea-panel .home-panel-inner,
  #home .home-services-panel .home-panel-inner{
    padding-left:var(--pad)!important;
    padding-right:var(--pad)!important;
  }
}

/* Treat 1024x768 as tablet landscape rather than squeezing desktop grids. */
@media(max-width:1024px){
  .section-head{grid-template-columns:1fr!important;gap:20px!important}
  .workgrid{grid-template-columns:1fr 1fr!important}
  .workgrid .project-card,
  .workgrid .project-card.w4,
  .workgrid .project-card.w5,
  .workgrid .project-card.w6,
  .workgrid .project-card.w7,
  .workgrid .project-card.w8{
    grid-column:auto!important;
    min-height:420px!important;
  }
  .contactgrid{grid-template-columns:1fr!important;gap:54px!important}
  .page-closing-grid,#home .home-closing-grid{
    grid-template-columns:1fr 1fr!important;
    gap:40px 30px!important;
  }
  .page-closing-cta,#home .home-closing-cta{grid-column:1/-1!important}
}

/* STATIC UNSLOP:
   No generic image zoom on hover. Preserve feedback through contrast and
   tiny metadata movement only. */
@media(hover:hover) and (pointer:fine){
  .project-card:hover img,
  .project-card:hover video,
  .recent-item:hover img,
  .client-carousel-item:hover img,
  #work .project-card:hover img,
  #work .project-card:hover video,
  .workgrid .project-card:hover img,
  .workgrid .project-card:hover video{
    transform:none!important;
  }

  #work .project-card:hover img,
  #work .project-card:hover video,
  .workgrid .project-card:hover img,
  .workgrid .project-card:hover video{
    filter:brightness(.94)!important;
  }

  #work .project-card:hover .meta,
  .workgrid .project-card:hover .meta{
    transform:translateY(-2px)!important;
  }

  .recent-item:hover img,
  .client-carousel-item:hover img{
    filter:brightness(.97)!important;
  }
}

/* More legible utility type at the tightest tablet width. */
@media(min-width:768px) and (max-width:1024px){
  .navlinks button{
    font-size:9px!important;
  }
}

/* FINAL REDUCED-MOTION AUTHORITY
   Placed after all historic version layers so nothing can override it. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .logo-loop-track,
  .hero-scroll-cue svg{
    animation:none!important;
  }

  .view.active,
  .project.open .project-head,
  .image-viewer.open,
  .image-viewer.open #viewerImage,
  .cinema-player.open,
  .cinema-player.open .cinema-player-shell,
  .youtube-player.open,
  .youtube-player.open .youtube-player-shell{
    animation:none!important;
  }

  .wow-reveal,
  .wow-reveal.revealed{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    transition:none!important;
  }

  .project-card img,
  .project-card video,
  .recent-item img,
  .client-carousel-item img,
  .btn,
  .arr,
  .mobilepanel,
  .project-spec-drawer,
  .youtube-feed-play,
  .gallery-nav,
  .gallery-filmstrip button{
    transition:none!important;
    transform:none!important;
  }
}


/* Final mobile fit correction discovered in the 360px QA pass. */
@media(max-width:479px){
  #services .section-head .headline{
    font-size:clamp(34px,9.4vw,46px)!important;
  }
  #services .section-head > *{
    min-width:0!important;
  }
}

/* Specificity-safe reduced-motion cleanup for historic ID-based rules. */
@media(prefers-reduced-motion:reduce){
  #work .project-card img,
  #work .project-card video,
  .workgrid .project-card img,
  .workgrid .project-card video,
  #recentCarousel .recent-item img,
  .client-carousel-track .client-carousel-item img{
    transition:none!important;
    transform:none!important;
  }

  #work .project-card .meta,
  .workgrid .project-card .meta{
    transition:none!important;
    transform:none!important;
  }
}


/* ==============================================================
   WORK + SERVICES IMAGE HEROES
   Same structural treatment as the approved About page hero.
   ============================================================== */
#work .image-subhero,
#services .image-subhero{
  min-height:84vh!important;
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  overflow:hidden!important;
  padding:0!important;
  background:#080808!important;
}

#work .image-subhero>img,
#services .image-subhero>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

#work .image-subhero::after,
#services .image-subhero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.56) 34%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.08) 100%),
    linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.10) 58%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

#work .image-subhero .subhero-copy,
#services .image-subhero .subhero-copy{
  position:relative!important;
  z-index:2!important;
  padding-top:160px!important;
  padding-bottom:70px!important;
}

#work .image-subhero .body-lg,
#services .image-subhero .body-lg{
  max-width:720px;
}

@media(max-width:767px){
  #work .image-subhero,
  #services .image-subhero{
    min-height:76svh!important;
  }

  #work .image-subhero .subhero-copy,
  #services .image-subhero .subhero-copy{
    padding-top:120px!important;
    padding-bottom:48px!important;
  }
}

/* ==============================================================
   WATCH HERO TEXT MATCH — align to approved Work hero typography
   and formatting without changing the rest of the page.
   ============================================================== */
#watch .cinema-hero{
  min-height:84vh!important;
  padding:0!important;
  align-items:flex-end!important;
}

#watch .cinema-hero-vignette{
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.56) 34%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.08) 100%),
    linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.10) 58%,rgba(0,0,0,.18) 100%)!important;
}

#watch .cinema-hero .watch-hero-copy{
  position:relative!important;
  z-index:2!important;
  width:min(var(--max),calc(100% - 2 * var(--pad)))!important;
  margin:0 auto!important;
  max-width:none!important;
  padding-top:160px!important;
  padding-bottom:70px!important;
}

#watch .cinema-hero .watch-hero-copy .kicker{
  color:#fff!important;
  margin-bottom:14px!important;
}

#watch .cinema-hero .watch-hero-copy h1{
  max-width:980px!important;
  margin:0!important;
}

@media (max-width:767px){
  #watch .cinema-hero{
    min-height:76svh!important;
  }

  #watch .cinema-hero .watch-hero-copy{
    padding-top:120px!important;
    padding-bottom:48px!important;
  }
}


/* ==============================================================
   UNIVERSAL TOP-LEVEL PAGE HERO SYSTEM
   Work / Watch / Services / About share one responsive structure.
   Home remains intentionally separate.
   ============================================================== */
.page-hero{
  position:relative!important;
  min-height:84vh!important;
  display:flex!important;
  align-items:flex-end!important;
  overflow:hidden!important;
  padding:0!important;
  background:#080808!important;
  color:#fff!important;
}

.page-hero>img,
.page-hero>video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

.page-hero>video{
  opacity:1!important;
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.56) 34%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.08) 100%),
    linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.10) 58%,rgba(0,0,0,.18) 100%);
}

/* Watch previously had its own overlay layer. The universal hero owns it now. */
.page-hero .cinema-hero-vignette{
  display:none!important;
}

.page-hero-copy{
  position:relative!important;
  z-index:2!important;
  width:min(var(--max),calc(100% - 2 * var(--pad)))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:160px 0 70px!important;
}

.page-hero-copy .kicker{
  color:#fff!important;
  margin:0 0 14px!important;
}

.page-hero-copy .display.sm{
  margin:0!important;
  max-width:1120px!important;
}

.page-hero-copy .body-lg{
  max-width:720px!important;
  margin:24px 0 0!important;
  color:#b8b4b8!important;
}

/* Page-specific crop only where the source asset needs it. */
#work .page-hero>img{object-position:center center!important}
#services .page-hero>img{object-position:center center!important}
#about .page-hero>img{object-position:center center!important}
#watch .page-hero>video{object-position:center center!important}

@media(max-width:1279px){
  .page-hero{
    min-height:80svh!important;
  }
  .page-hero-copy{
    padding:140px 0 58px!important;
  }
}

@media(max-width:1024px){
  .page-hero{
    min-height:78svh!important;
  }
  .page-hero-copy{
    padding:128px 0 52px!important;
  }
  .page-hero-copy .body-lg{
    max-width:62ch!important;
  }
}

@media(max-width:767px){
  .page-hero{
    min-height:76svh!important;
  }
  .page-hero-copy{
    padding:112px 0 44px!important;
  }
  .page-hero-copy .kicker{
    margin-bottom:12px!important;
  }
  .page-hero-copy .body-lg{
    margin-top:18px!important;
    max-width:100%!important;
  }
}

@media(max-width:479px){
  .page-hero{
    min-height:74svh!important;
  }
  .page-hero-copy{
    padding:104px 0 38px!important;
  }
}

/* ==============================================================
   CONTACT PAGE ONLY — CLEAN DESKTOP / RESPONSIVE LAYOUT
   This is the single authoritative contact-page closing layout.
   It does not affect Home, Work, Watch, Services, About or projects.
   ============================================================== */

/* Desktop sticky-footer structure. The footer sits at the viewport bottom
   when the contact content is short, but remains in normal document flow
   whenever the content becomes taller than the viewport. */
#contact.view.active{
  min-height:100svh!important;
  display:flex!important;
  flex-direction:column!important;
  background:var(--paper)!important;
}

#contact .contactpage{
  flex:1 0 auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  padding:clamp(132px,15vh,190px) 0 clamp(56px,6vh,82px)!important;
  background:var(--paper)!important;
  color:#111!important;
}

/* Keep the form and copy on the exact same master site grid.
   Do not override the .wrap with width:100%. */
#contact .contactgrid{
  width:min(var(--max),calc(100% - 2 * var(--pad)))!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
  gap:clamp(64px,5vw,96px)!important;
  align-items:start!important;
}

#contact .contactgrid > div:first-child,
#contact .project-brief-form{
  min-width:0!important;
  align-self:start!important;
}

#contact .contactgrid .display{
  max-width:760px!important;
}

/* Contact footer only. */
.contact-page-footer{
  flex:0 0 auto!important;
  margin-top:auto!important;
  background:#fff!important;
  color:#080808!important;
  border:0!important;
  padding:36px 0 40px!important;
}

.mobile-global-contact-footer{
  display:none!important;
}

.contact-page-footer-grid{
  width:min(var(--max),calc(100% - 2 * var(--pad)))!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  gap:clamp(36px,5vw,88px)!important;
  align-items:center!important;
}

.contact-page-footer-logo{
  display:block!important;
  width:clamp(190px,14vw,250px)!important;
  height:auto!important;
  filter:invert(1)!important;
}

.contact-page-footer-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(24px,3vw,52px)!important;
}

.contact-page-footer-meta p{
  margin:0!important;
  font-family:"Gotham Book",Arial,sans-serif!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#4e4a4e!important;
  white-space:nowrap!important;
}

.contact-page-social-icons{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}

.contact-page-social-icon{
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 40px!important;
  border:1px solid rgba(119,34,105,.38)!important;
  border-radius:999px!important;
  color:#772269!important;
  background:transparent!important;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms ease!important;
}

.contact-page-social-icon svg{
  width:18px!important;
  height:18px!important;
  display:block!important;
}

@media(hover:hover) and (pointer:fine){
  .contact-page-social-icon:hover{
    color:#fff!important;
    background:#772269!important;
    border-color:#772269!important;
    transform:translateY(-2px)!important;
  }
}

/* Laptop / tablet landscape: keep two columns while there is genuinely room. */
@media(max-width:1279px){
  #contact .contactpage{
    padding-top:clamp(126px,14vh,160px)!important;
    padding-bottom:60px!important;
  }
  #contact .contactgrid{
    gap:clamp(44px,5vw,70px)!important;
  }
}

/* Tablet: stack the content and let the page flow naturally. */
@media(max-width:1023px){
  #contact .contactpage{
    align-items:flex-start!important;
    padding-top:126px!important;
    padding-bottom:64px!important;
  }
  #contact .contactgrid{
    grid-template-columns:1fr!important;
    gap:52px!important;
  }
  .contact-page-footer-grid{
    grid-template-columns:auto 1fr!important;
    gap:28px 36px!important;
  }
  .contact-page-footer-meta{
    justify-content:flex-end!important;
    flex-wrap:wrap!important;
    row-gap:6px!important;
  }
  .contact-page-social-icons{
    grid-column:1/-1!important;
    justify-content:flex-start!important;
  }
}

/* Mobile: natural document flow, safe gutters, no viewport forcing. */
@media(max-width:767px){
  #contact.view.active{
    min-height:100svh!important;
  }
  #contact .contactpage{
    padding-top:108px!important;
    padding-bottom:54px!important;
  }
  #contact .contactgrid{
    gap:42px!important;
  }
  .contact-page-footer{
    padding:32px 0 36px!important;
  }
  .contact-page-footer-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
    align-items:start!important;
  }
  .contact-page-footer-meta{
    justify-content:flex-start!important;
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:7px!important;
  }
  .contact-page-footer-meta p{
    white-space:normal!important;
  }
  .contact-page-social-icons{
    grid-column:auto!important;
    justify-content:flex-start!important;
  }
  .view .page-closing{
    display:none!important;
  }
  .mobile-global-contact-footer{
    display:block!important;
    margin-top:0!important;
    padding-bottom:max(36px,env(safe-area-inset-bottom))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-page-social-icon{
    transition:none!important;
    transform:none!important;
  }
}


/* ================================================================
   CLIENT DIRECTORY + CLIENT PAGE FRAMEWORK
   Framework only: client media/content will be populated one-by-one.
   ================================================================ */
.client-directory{background:var(--paper);color:#111;padding:126px 0 132px;border-top:1px solid #d6d1ca}
.client-directory .kicker{color:#5e1751}
.client-directory-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:100px;align-items:end;margin-bottom:72px}
.client-directory-head h2{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(58px,6.6vw,110px);line-height:.86;letter-spacing:-.02em;margin:18px 0 0;max-width:900px}
.client-directory-head h2 span{color:#772269}
.client-directory-intro{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;padding-bottom:8px}
.client-directory-intro p{margin:0;font-size:15px;line-height:1.65;color:#222}
.client-directory-intro .muted{color:#6c6864}
.client-directory-list{border-bottom:1px solid #bab5ae}
.client-directory-row{width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) 220px 130px;gap:24px;align-items:center;padding:28px 0;border:0;border-top:1px solid #bab5ae;background:transparent;color:#111;text-align:left;font:inherit;transition:padding .2s ease,background .2s ease,color .2s ease}
button.client-directory-row{cursor:pointer}
.client-directory-row.is-preview:hover,.client-directory-row.is-preview:focus-visible{background:#0d0d0e;color:#fff;padding-left:22px;padding-right:22px;outline:0}
.client-directory-no{font-size:10px;letter-spacing:.16em;color:#772269}
.client-directory-name{display:flex;flex-direction:column;gap:8px}
.client-directory-name strong{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(27px,2.5vw,43px);font-weight:400;line-height:.92}
.client-directory-name small{font-size:11px;letter-spacing:.035em;color:#68635f}
.client-directory-row.is-preview:hover .client-directory-name small,.client-directory-row.is-preview:focus-visible .client-directory-name small{color:#c3bec4}
.client-directory-kind,.client-directory-action{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#68635f}
.client-directory-action{text-align:right}.client-directory-row.is-preview .client-directory-action{color:#772269}.client-directory-row.is-preview:hover .client-directory-action,.client-directory-row.is-preview:focus-visible .client-directory-action{color:#d884ff}
.client-directory-secondary{display:grid;grid-template-columns:260px 1fr;gap:44px;padding-top:72px;align-items:start}
.client-name-cloud{display:flex;flex-wrap:wrap;gap:0}
.client-name-cloud span{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(20px,2.1vw,34px);font-weight:400;color:#252326;padding:0 22px 12px 0;margin:0 22px 12px 0;border-right:1px solid #bdb7b0}
.client-framework-callout{margin-top:96px;padding-top:52px;border-top:1px solid #bab5ae;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.client-framework-callout h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(46px,5vw,84px);font-weight:400;line-height:.9;margin:18px 0 0}
.client-framework-callout p{font-size:15px;line-height:1.65;color:#555;max-width:620px;margin:0 0 28px}
.client-framework-preview-btn{border-color:#111!important;color:#111!important}.client-framework-preview-btn:hover{background:#111!important;color:#fff!important}

.client-page{position:fixed;inset:0;z-index:190;background:#080809;color:#fff;overflow:auto;overscroll-behavior:contain;display:none}
.client-page.open{display:block}
.client-page-close{position:fixed;z-index:220;top:22px;right:22px;width:52px;height:52px;border-radius:50%;border:1px solid #ffffff55;background:#0b0b0ccc;color:#fff;font-size:28px;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}
.client-page-close:hover{border-color:#fff}
.client-page-chapters{position:fixed;z-index:210;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px}
.client-page-chapters button{width:102px;border:0;background:#0b0b0bbd;color:#aaa;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left}
.client-page-chapters button span{color:#b649a7;font-size:9px;letter-spacing:.12em}.client-page-chapters button em{font-style:normal;font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.client-hero{min-height:94svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.client-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.client-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.36) 55%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.04) 68%)}
.client-hero-copy{position:relative;z-index:2;padding-bottom:152px}
.client-hero-copy h1{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(64px,8.2vw,144px);line-height:.84;letter-spacing:-.02em;margin:22px 0 28px;max-width:1280px}
.client-hero-copy p{font-size:15px;letter-spacing:.04em;color:#d4cfd4;margin:0;max-width:600px}
.client-hero-meta{position:absolute!important;z-index:3;left:50%;bottom:0;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff42;width:min(var(--max),calc(100% - (var(--pad) * 2)))}
.client-hero-meta>div{padding:22px 24px 28px 0;border-right:1px solid #ffffff2b}.client-hero-meta>div+div{padding-left:24px}.client-hero-meta>div:last-child{border-right:0}
.client-hero-meta small{display:block;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#9b969c;margin-bottom:7px}.client-hero-meta strong{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.client-editorial-light{background:var(--paper);color:#111}
.client-editorial{padding:128px 0 116px}
.client-editorial-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px;align-items:start}
.client-editorial-heading h2{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(56px,6.1vw,106px);line-height:.87;font-weight:400;margin:20px 0 0}.client-editorial-heading h2 span{color:#772269}
.client-editorial-copy{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding-top:34px}.client-editorial-copy p{font-size:16px;line-height:1.72;margin:0;color:#333}
.client-scope-rail{display:grid;grid-template-columns:repeat(4,1fr);margin-top:100px;border-top:1px solid #c3beb7;border-bottom:1px solid #c3beb7}
.client-scope-rail>div{padding:26px 24px 30px 0;border-right:1px solid #c3beb7}.client-scope-rail>div+div{padding-left:24px}.client-scope-rail>div:last-child{border-right:0}
.client-scope-rail span{display:block;font-size:9px;letter-spacing:.15em;color:#772269;margin-bottom:36px}.client-scope-rail strong{display:block;font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:25px;font-weight:400}.client-scope-rail p{font-size:12px;line-height:1.5;color:#666;margin:14px 0 0}
.client-media-feature{min-height:92svh;position:relative;overflow:hidden;display:flex;align-items:flex-end;background:#09090a}
.client-media-feature-bg{position:absolute;inset:0;margin:0}.client-media-feature-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.client-media-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.05) 70%)}
.client-media-feature-copy{position:relative;z-index:2;padding-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.client-media-feature-copy h2{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(56px,6.2vw,106px);line-height:.87;font-weight:400;margin:18px 0 0;grid-column:1}.client-media-feature-copy p{grid-column:2;font-size:15px;line-height:1.65;color:#ddd;max-width:620px;margin:0 0 5px}
.client-work-showcase{padding:128px 0 0;overflow:hidden}
.client-work-heading{display:grid;grid-template-columns:1fr .9fr;gap:100px;align-items:end;margin-bottom:70px}.client-work-heading h2{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(56px,6.2vw,104px);line-height:.87;font-weight:400;margin:18px 0 0}.client-work-heading>p{font-size:15px;line-height:1.65;color:#5f5a56;margin:0 0 7px;max-width:620px}
.client-work-mosaic{width:100%;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:minmax(340px,54vw) minmax(260px,32vw);gap:12px;background:var(--paper);padding:12px}.client-work-mosaic figure{margin:0;overflow:hidden;background:#111}.client-work-mosaic img{width:100%;height:100%;object-fit:cover}.client-work-wide{grid-row:1 / 3}.client-work-tall{grid-column:2;grid-row:1}.client-work-small{grid-column:2;grid-row:2}
.client-story-grid{padding:110px 0 126px;display:grid;grid-template-columns:220px 1fr 1fr;gap:60px;align-items:start}.client-story-grid h3{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(38px,3.8vw,65px);font-weight:400;line-height:.92;margin:0}.client-story-grid p{font-size:15px;line-height:1.7;color:#5f5a56;margin:0}
.client-closeout{background:#0b0b0c;color:#fff;padding:118px 0 122px}.client-closeout-grid{display:grid;grid-template-columns:1fr .8fr;gap:100px;align-items:end}.client-closeout h2{font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(52px,5.8vw,96px);line-height:.88;font-weight:400;margin:18px 0 0}.client-closeout h2 span{color:#b85ab0}.client-closeout p{font-size:15px;line-height:1.65;color:#bbb;max-width:600px;margin:0 0 28px}

@media(max-width:1100px){
  .client-directory-head,.client-editorial-grid,.client-framework-callout,.client-work-heading,.client-closeout-grid{grid-template-columns:1fr;gap:44px}
  .client-directory-intro,.client-editorial-copy{max-width:900px}
  .client-directory-row{grid-template-columns:42px minmax(0,1fr) 180px 105px}
  .client-directory-secondary{grid-template-columns:1fr;gap:24px}
  .client-hero-copy{padding-bottom:180px}.client-page-chapters{display:none}
  .client-media-feature-copy{grid-template-columns:1fr;gap:28px}.client-media-feature-copy h2,.client-media-feature-copy p{grid-column:1}
  .client-story-grid{grid-template-columns:160px 1fr;gap:40px}.client-story-grid p{grid-column:2}
}
@media(max-width:760px){
  .client-directory{padding:82px 0 90px}.client-directory-head{margin-bottom:48px}.client-directory-head h2{font-size:clamp(46px,14vw,72px)}
  .client-directory-intro,.client-editorial-copy{grid-template-columns:1fr;gap:18px}
  .client-directory-row{grid-template-columns:34px 1fr;gap:14px;padding:22px 0}.client-directory-kind,.client-directory-action{grid-column:2;font-size:8px}.client-directory-action{text-align:left;margin-top:-7px}.client-directory-row.is-preview:hover,.client-directory-row.is-preview:focus-visible{padding-left:12px;padding-right:12px}
  .client-directory-name strong{font-size:28px}.client-directory-secondary{padding-top:54px}.client-name-cloud span{font-size:22px;padding-right:13px;margin-right:13px}
  .client-framework-callout{margin-top:68px;padding-top:42px}.client-framework-callout h3{font-size:50px}
  .client-hero{min-height:90svh}.client-hero-copy{padding-bottom:205px}.client-hero-copy h1{font-size:clamp(52px,15vw,76px)}
  .client-hero-meta{grid-template-columns:1fr;width:calc(100% - 40px)}.client-hero-meta>div{padding:10px 0;border-right:0;border-bottom:1px solid #ffffff25}.client-hero-meta>div+div{padding-left:0}.client-hero-meta>div:last-child{border-bottom:0}
  .client-page-close{top:14px;right:14px;width:46px;height:46px}
  .client-editorial{padding:86px 0 76px}.client-editorial-heading h2{font-size:50px}.client-scope-rail{grid-template-columns:1fr 1fr;margin-top:66px}.client-scope-rail>div,.client-scope-rail>div+div{padding:22px 16px;border-right:1px solid #c3beb7;border-bottom:1px solid #c3beb7}.client-scope-rail>div:nth-child(2n){border-right:0}.client-scope-rail>div:nth-last-child(-n+2){border-bottom:0}
  .client-media-feature{min-height:76svh}.client-media-feature-copy{padding-bottom:50px}.client-media-feature-copy h2{font-size:50px}
  .client-work-showcase{padding-top:86px}.client-work-heading{margin-bottom:48px}.client-work-heading h2{font-size:50px}.client-work-mosaic{grid-template-columns:1fr;grid-template-rows:auto;padding:8px;gap:8px}.client-work-mosaic figure{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5}.client-work-mosaic .client-work-wide{aspect-ratio:16/10}
  .client-story-grid{padding:74px 0 88px;grid-template-columns:1fr;gap:24px}.client-story-grid p{grid-column:1}.client-closeout{padding:84px 0 88px}.client-closeout h2{font-size:50px}
}


/* ================================================================
   CLIENT FRAMEWORK V2 — COMPACT DIRECTORY + REFINED CLIENT PAGE
   ================================================================ */
.client-directory{padding:66px 0 76px!important}
.client-directory-head{grid-template-columns:minmax(0,.9fr) minmax(320px,.62fr)!important;gap:72px!important;align-items:end!important;margin-bottom:34px!important}
.client-directory-head h2{font-family:"Gotham Black",Arial,sans-serif!important;font-size:clamp(38px,3.8vw,64px)!important;line-height:.96!important;letter-spacing:-.025em!important;margin-top:12px!important;max-width:720px!important}
.client-directory-intro{display:block!important;padding-bottom:3px!important;max-width:520px!important}
.client-directory-intro p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important;line-height:1.55!important}
.client-directory-row{grid-template-columns:38px minmax(0,1fr) 168px 104px!important;gap:20px!important;padding:16px 0!important;min-height:76px!important}
.client-directory-row.is-preview:hover,.client-directory-row.is-preview:focus-visible{padding-left:14px!important;padding-right:14px!important}
.client-directory-name{gap:4px!important}
.client-directory-name strong{font-family:"Gotham Bold",Arial,sans-serif!important;font-size:clamp(20px,1.55vw,28px)!important;line-height:1.02!important;letter-spacing:-.02em!important;text-transform:uppercase!important}
.client-directory-name small{font-family:"Gotham Book",Arial,sans-serif!important;font-size:10px!important;line-height:1.35!important}
.client-directory-kind,.client-directory-action{font-family:"Gotham Medium",Arial,sans-serif!important;font-size:8px!important;letter-spacing:.14em!important}
.client-directory-extra{display:none!important}
.client-directory-extra-block{display:none!important}
.client-directory.is-expanded .client-directory-extra{display:grid!important}
.client-directory.is-expanded .client-directory-extra-block{display:grid!important}
.client-directory-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:20px!important}
.client-directory-controls .btn{font-family:"Gotham Medium",Arial,sans-serif!important;font-size:9px!important;padding:11px 15px!important}
.client-directory-preview{border-color:#aaa!important;color:#111!important}
.client-directory-preview:hover{background:#111!important;color:#fff!important;border-color:#111!important}
.client-directory-secondary{grid-template-columns:210px 1fr!important;gap:48px!important;padding-top:44px!important;margin-top:38px!important}
.client-directory-secondary .kicker{font-family:"Gotham Medium",Arial,sans-serif!important;font-size:9px!important;line-height:1.2!important}
.client-name-cloud{gap:0!important}
.client-name-cloud span{font-family:"Gotham Bold",Arial,sans-serif!important;font-size:clamp(16px,1.25vw,21px)!important;line-height:1!important;padding:0 14px 9px 0!important;margin:0 14px 9px 0!important}

/* Client hero remains cinematic, but the title no longer overwhelms the frame. */
.client-hero{min-height:94svh!important}
.client-hero-copy{padding-bottom:134px!important}
.client-hero-copy h1{font-size:clamp(36px,2.5vw,48px)!important;line-height:.96!important;letter-spacing:.005em!important;max-width:760px!important;margin:14px 0 16px!important}
.client-hero-copy p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:13px!important}
.client-hero-meta>div{padding-top:17px!important;padding-bottom:20px!important}
.client-hero-meta small,.client-hero-meta strong{font-family:"Gotham Medium",Arial,sans-serif!important}

/* Everything below the hero sits inside the established site gutters. */
.client-page>.client-editorial,
.client-page>.client-media-feature,
.client-page>.client-work-showcase,
.client-page>.client-closeout{width:min(var(--max),calc(100% - 2*var(--pad)))!important;margin-left:auto!important;margin-right:auto!important}
.client-page>.client-editorial>.wrap,
.client-page>.client-media-feature>.wrap,
.client-page>.client-work-showcase>.wrap,
.client-page>.client-closeout>.wrap{width:100%!important;max-width:none!important}

/* Secondary client-page headings use Gotham. Microgamma is reserved for hero-level display moments. */
.client-editorial{padding:78px 0 70px!important}
.client-editorial-grid{grid-template-columns:.8fr 1.2fr!important;gap:74px!important;padding:0 42px!important}
.client-editorial-heading h2{font-family:"Gotham Black",Arial,sans-serif!important;font-size:clamp(34px,3.2vw,54px)!important;line-height:.98!important;letter-spacing:-.025em!important;margin-top:14px!important}
.client-editorial-copy{gap:30px!important;padding-top:24px!important}
.client-editorial-copy p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important;line-height:1.65!important}
.client-scope-rail{margin:62px 42px 0!important}
.client-scope-rail>div{padding-top:21px!important;padding-bottom:23px!important}
.client-scope-rail span{font-family:"Gotham Medium",Arial,sans-serif!important;margin-bottom:24px!important}
.client-scope-rail strong{font-family:"Gotham Bold",Arial,sans-serif!important;font-size:18px!important;line-height:1.05!important;letter-spacing:-.01em!important}
.client-scope-rail p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:11px!important}
.client-media-feature{min-height:78svh!important}
.client-media-feature-copy{padding:0 42px 58px!important;gap:60px!important}
.client-media-feature-copy h2{font-family:"Gotham Black",Arial,sans-serif!important;font-size:clamp(38px,3.5vw,58px)!important;line-height:.98!important;letter-spacing:-.025em!important;margin-top:14px!important}
.client-media-feature-copy p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important}
.client-work-showcase{padding-top:78px!important}
.client-work-heading{grid-template-columns:1fr .8fr!important;gap:70px!important;margin:0 42px 46px!important}
.client-work-heading h2{font-family:"Gotham Black",Arial,sans-serif!important;font-size:clamp(38px,3.5vw,58px)!important;line-height:.98!important;letter-spacing:-.025em!important;margin-top:14px!important}
.client-work-heading>p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important}
.client-work-mosaic{width:calc(100% - 84px)!important;margin:0 42px!important;grid-template-rows:minmax(300px,44vw) minmax(220px,25vw)!important}
.client-story-grid{padding:76px 42px 88px!important;grid-template-columns:170px .8fr 1.2fr!important;gap:42px!important}
.client-story-grid h3{font-family:"Gotham Bold",Arial,sans-serif!important;font-size:clamp(28px,2.4vw,40px)!important;line-height:1!important;letter-spacing:-.02em!important}
.client-story-grid p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important}
.client-closeout{padding:72px 0 78px!important}
.client-closeout-grid{padding:0 42px!important;gap:70px!important}
.client-closeout h2{font-family:"Gotham Black",Arial,sans-serif!important;font-size:clamp(38px,3.5vw,58px)!important;line-height:.98!important;letter-spacing:-.025em!important;margin-top:14px!important}
.client-closeout p{font-family:"Gotham Book",Arial,sans-serif!important;font-size:14px!important}

@media(max-width:1100px){
  .client-directory-head{grid-template-columns:1fr!important;gap:22px!important}
  .client-directory-intro{max-width:680px!important}
  .client-directory-row{grid-template-columns:34px minmax(0,1fr) 140px 92px!important}
  .client-directory-secondary{grid-template-columns:1fr!important;gap:18px!important}
  .client-editorial-grid{grid-template-columns:1fr!important;gap:32px!important}
  .client-work-heading{grid-template-columns:1fr!important;gap:24px!important}
}
@media(max-width:760px){
  .client-directory{padding:52px 0 60px!important}
  .client-directory-head h2{font-size:38px!important}
  .client-directory-row{grid-template-columns:28px 1fr!important;gap:10px!important;padding:14px 0!important;min-height:0!important}
  .client-directory-kind,.client-directory-action{grid-column:2!important}
  .client-directory-controls{align-items:stretch!important;flex-direction:column!important}
  .client-directory-controls .btn{justify-content:center!important}
  .client-directory-name strong{font-size:21px!important}
  .client-name-cloud span{font-size:16px!important}
  .client-hero-copy{padding-bottom:190px!important}
  .client-hero-copy h1{font-size:36px!important;max-width:520px!important}
  .client-page>.client-editorial,
  .client-page>.client-media-feature,
  .client-page>.client-work-showcase,
  .client-page>.client-closeout{width:calc(100% - 40px)!important}
  .client-editorial-grid,.client-media-feature-copy,.client-closeout-grid{padding-left:22px!important;padding-right:22px!important}
  .client-scope-rail{margin-left:22px!important;margin-right:22px!important}
  .client-work-heading{margin-left:22px!important;margin-right:22px!important}
  .client-work-mosaic{width:calc(100% - 44px)!important;margin-left:22px!important;margin-right:22px!important}
  .client-story-grid{padding-left:22px!important;padding-right:22px!important}
}

/* ================================================================
   CLIENT FRAMEWORK V3 — TWO-COLUMN DIRECTORY
   Main directory statement returns to Microgamma; client names stay Gotham.
   ================================================================ */
.client-directory-head h2{
  font-family:MicroBold,Impact,sans-serif!important;
  font-size:clamp(40px,4.25vw,72px)!important;
  line-height:.9!important;
  letter-spacing:-.015em!important;
  max-width:760px!important;
}

.client-directory-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:40px!important;
  row-gap:0!important;
  border-top:1px solid #bab5ae!important;
  border-bottom:0!important;
}

.client-directory-row{
  min-width:0!important;
  grid-template-columns:28px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:14px!important;
  row-gap:5px!important;
  min-height:92px!important;
  padding:17px 8px 16px 0!important;
  border-top:0!important;
  border-bottom:1px solid #bab5ae!important;
}

.client-directory-row.is-preview:hover,
.client-directory-row.is-preview:focus-visible{
  padding-left:12px!important;
  padding-right:12px!important;
}

.client-directory-no{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  padding-top:3px!important;
}

.client-directory-name{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  min-width:0!important;
  gap:5px!important;
}

.client-directory-name strong{
  font-family:"Gotham Bold",Arial,sans-serif!important;
  font-size:clamp(18px,1.35vw,24px)!important;
  line-height:1.03!important;
  letter-spacing:-.018em!important;
}

.client-directory-name small{
  font-size:9px!important;
  line-height:1.35!important;
  max-width:95%!important;
}

.client-directory-kind{
  grid-column:3!important;
  grid-row:1!important;
  align-self:start!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-size:7px!important;
}

.client-directory-action{
  grid-column:3!important;
  grid-row:2!important;
  align-self:end!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-size:7px!important;
}

.client-directory-extra{display:none!important}
.client-directory.is-expanded .client-directory-extra{display:grid!important}

.client-directory-controls{
  padding-top:16px!important;
  justify-content:flex-end!important;
}

@media(max-width:1050px){
  .client-directory-list{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
  .client-directory-row{
    min-height:82px!important;
  }
}

@media(max-width:700px){
  .client-directory-head h2{font-size:clamp(38px,11vw,58px)!important}
  .client-directory-row{
    grid-template-columns:24px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    padding:15px 0!important;
  }
  .client-directory-no{grid-column:1!important;grid-row:1 / span 3!important}
  .client-directory-name{grid-column:2!important;grid-row:1!important}
  .client-directory-kind{grid-column:2!important;grid-row:2!important;text-align:left!important;margin-top:3px!important}
  .client-directory-action{grid-column:2!important;grid-row:3!important;text-align:left!important;margin-top:2px!important}
}


/* V1 client framework refinement — contain capability rail + fix chapter nav */
@media (min-width:901px){
  /* .client-scope-rail is also a global .wrap. Reset that viewport-based width so
     its top/bottom rules stay inside the inset white client content panel. */
  .client-page .client-scope-rail{
    width:calc(100% - 84px)!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin:62px 42px 0!important;
  }

  /* Give the fixed chapter tabs enough internal width for RELATIONSHIP, keeping
     every label inside its dark button instead of spilling into the page. */
  .client-page-chapters{
    right:24px!important;
    width:132px!important;
    box-sizing:border-box!important;
  }
  .client-page-chapters button{
    width:132px!important;
    min-width:132px!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:8px!important;
    padding:10px 11px!important;
    overflow:hidden!important;
  }
  .client-page-chapters button span{
    min-width:0!important;
    text-align:left!important;
  }
  .client-page-chapters button em{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    font-size:7.5px!important;
    letter-spacing:.10em!important;
  }
}

@media (max-width:900px){
  .client-page .client-scope-rail{
    width:calc(100% - 44px)!important;
    max-width:none!important;
    margin-left:22px!important;
    margin-right:22px!important;
  }
}


/* V1 client framework refinement — final capability rail containment */
@media (min-width:901px){
  .client-page .client-scope-rail{
    width:auto!important;
    max-width:none!important;
    margin:62px 42px 0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
}
@media (max-width:900px){
  .client-page .client-scope-rail{
    width:auto!important;
    max-width:none!important;
    margin-left:22px!important;
    margin-right:22px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
}

/* V1 client framework refinement — capability rail exact containment */
@media (min-width:901px){
  .client-page>.client-editorial>.client-scope-rail{
    width:calc(100% - 84px)!important;
    max-width:none!important;
    margin:62px 42px 0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .client-page-chapters{
    right:24px!important;
    width:136px!important;
    box-sizing:border-box!important;
  }
  .client-page-chapters button{
    width:136px!important;
    min-width:136px!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 12px!important;
    overflow:hidden!important;
  }
  .client-page-chapters button span{
    display:block!important;
    min-width:0!important;
    text-align:left!important;
  }
  .client-page-chapters button em{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    font-size:7.4px!important;
    letter-spacing:.085em!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
}
@media (max-width:900px){
  .client-page>.client-editorial>.client-scope-rail{
    width:calc(100% - 44px)!important;
    max-width:none!important;
    margin-left:22px!important;
    margin-right:22px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
}


/* CLIENT FRAMEWORK V4 — shared client-page system */
.client-hero>img.client-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.client-hero-placeholder{position:absolute;inset:0;background:radial-gradient(circle at 60% 42%,#21131f 0,#0b0b0c 42%,#070708 76%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.client-hero-placeholder img{width:min(34vw,520px);max-height:30vh;object-fit:contain;filter:brightness(0) invert(1);opacity:.18}
.client-hero-placeholder span{position:absolute;right:var(--pad);bottom:118px;font-family:"Gotham Medium",Arial,sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8f858d}
.client-media-feature-placeholder{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 58% 42%,#241322 0,#0c0c0d 48%,#080809 100%)}
.client-media-feature-placeholder img{width:min(32vw,460px);max-height:28vh;object-fit:contain;filter:brightness(0) invert(1);opacity:.15}
.client-media-feature-placeholder span{position:absolute;right:42px;top:42px;font-family:"Gotham Medium",Arial,sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#9d929b}
.client-work-mosaic-placeholder figure{display:flex;align-items:flex-end;justify-content:flex-start;background:linear-gradient(135deg,#151316,#0b0b0c)!important}
.client-work-mosaic-placeholder figure span{padding:24px;font-family:"Gotham Medium",Arial,sans-serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#736a72}
.client-directory-row.is-preview .client-directory-action{color:#772269!important}
@media(max-width:900px){.client-hero-placeholder span{right:22px;bottom:178px}.client-media-feature-placeholder span{right:22px;top:22px}}


/* CLIENT DIRECTORY V5 — two-line statement + homepage-style client logo carousel */
@media (min-width:1051px){
  .client-directory-head{
    grid-template-columns:minmax(0,1fr) 420px!important;
    gap:52px!important;
  }
  .client-directory-head h2{
    font-size:clamp(48px,4.05vw,68px)!important;
    line-height:.9!important;
    max-width:none!important;
    white-space:nowrap!important;
  }
}
@media (min-width:701px) and (max-width:1050px){
  .client-directory-head h2{
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(42px,6vw,58px)!important;
  }
}
.client-directory-logo-carousel-wrap{
  display:block;width:100%;margin:0;padding:0 0 76px;background:var(--paper);
}
#work .client-directory{padding-bottom:34px!important}
.client-directory-logo-loop{
  width:100%;
  background:#0d0d0f!important;
  border-top:0!important;
  border-bottom:0!important;
  padding:22px 0 26px!important;
  overflow:hidden!important;
}
.client-directory-logo-loop .logo-loop-label{
  padding:0 var(--pad) 15px!important;
  color:#8c858a!important;
}
.client-directory-logo-loop .logo-loop-track{
  animation-duration:46s!important;
}
.client-directory-logo-loop .logo-loop-viewport{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 5%,#000 13%,#000 87%,rgba(0,0,0,.25) 95%,transparent 100%)!important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 5%,#000 13%,#000 87%,rgba(0,0,0,.25) 95%,transparent 100%)!important;
}
@media(max-width:700px){
  .client-directory-head h2{white-space:normal!important}
  .client-directory-logo-carousel-wrap{padding-bottom:60px}
  #work .client-directory{padding-bottom:24px!important}
  .client-directory-logo-loop{padding:18px 0 22px!important}
  .client-directory-logo-loop .client-logo-item{width:165px;height:66px}
  .client-directory-logo-loop .client-logo-item img{max-width:150px;max-height:54px}
  .client-directory-logo-loop .logo-sequence{gap:46px;padding-right:46px}
}


/* =========================================================
   CLIENT SYSTEM V5 — three editorial body families
   ========================================================= */
#work .workgrid .project-card.is-logo-card{background:#0b0b0c}
#work .workgrid .project-card.is-logo-card>img{object-fit:contain!important;padding:12% 18%;filter:brightness(0) invert(1);opacity:.92;background:radial-gradient(circle at 50% 45%,#21131f 0,#0b0b0c 68%)}
#work .workgrid{align-items:stretch}

.client-layout-body{background:var(--paper);color:#111;padding:96px 0 104px;overflow:visible}
.client-layout-body .kicker{color:#69646a}
.client-layout-intro{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:86px;align-items:start;margin-bottom:70px}
.client-layout-display{font-family:"Gotham Bold",Gotham,Arial,sans-serif;font-size:clamp(38px,3.15vw,62px);line-height:1.01;letter-spacing:-.035em;margin-top:14px;text-transform:none}
.client-layout-display span{color:#772269}
.client-layout-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;padding-top:30px}
.client-layout-copy p{font-family:"Gotham Book",Gotham,Arial,sans-serif;font-size:15px;line-height:1.72;color:#575257;margin:0}
.client-layout-scope{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #c8c3bd;border-bottom:1px solid #c8c3bd;margin-bottom:66px}
.client-layout-scope>div{padding:20px 20px 22px 0;border-right:1px solid #d7d2cc}
.client-layout-scope>div:last-child{border-right:0}
.client-layout-scope span{display:block;font-size:9px;letter-spacing:.15em;color:#8c858c;margin-bottom:18px}
.client-layout-scope strong{display:block;font-family:"Gotham Bold",Gotham,Arial,sans-serif;font-size:16px;margin-bottom:7px}
.client-layout-scope p{font-size:12px;line-height:1.45;color:#777079;margin:0;max-width:220px}
.client-layout-media{position:relative;margin:0;background:#151416;overflow:hidden;min-height:220px}
.client-layout-media img{width:100%;height:100%;display:block;object-fit:cover}
.client-layout-placeholder{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 44%,#21131f,#0c0b0d 70%)}
.client-layout-placeholder img{width:45%;height:45%;object-fit:contain;filter:brightness(0) invert(1);opacity:.72}
.client-layout-placeholder span{position:absolute;left:20px;bottom:18px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#948a94}
.client-layout-text-tile,.client-layout-quote,.client-layout-split-copy{background:#fff;padding:38px 40px;color:#111}
.client-layout-text-tile h3,.client-layout-quote h3,.client-layout-split-copy h3,.client-layout-feature-caption h3,.client-layout-cinema-caption h3{font-family:"Gotham Bold",Gotham,Arial,sans-serif;font-size:clamp(25px,2vw,38px);line-height:1.05;letter-spacing:-.025em;margin:12px 0 18px;text-transform:none}
.client-layout-text-tile p,.client-layout-quote p,.client-layout-split-copy p,.client-layout-feature-caption p,.client-layout-cinema-caption p{font-size:13px;line-height:1.65;color:#696268;margin:0}

/* A — Editorial mosaic */
.client-layout-grid-a{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:340px 300px;gap:16px;margin-bottom:70px}
.client-layout-grid-a .tile-a1{grid-row:1/3}
.client-layout-grid-a .tile-a2{grid-column:2;grid-row:1}
.client-layout-grid-a .tile-a3{grid-column:2;grid-row:2}
.client-layout-grid-a .tile-a4{display:none}
.client-layout-feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:16px;align-items:stretch}
.client-layout-feature .tile-feature{aspect-ratio:16/9;min-height:420px}
.client-layout-feature-caption{background:#fff;padding:40px;display:flex;flex-direction:column;justify-content:flex-end}

/* B — Film / experience led */
.client-layout-intro-compact{margin-bottom:52px}
.client-layout-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.client-layout-tags span{border:1px solid #c9c4c0;padding:8px 11px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#686168}
.client-layout-cinema{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-bottom:70px;align-items:stretch}
.client-layout-cinema .cinema-main{aspect-ratio:16/9;min-height:520px}
.client-layout-cinema-caption{background:#0d0d0e;color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:flex-end}
.client-layout-cinema-caption .kicker,.client-layout-cinema-caption p{color:#aaa1aa}
.client-layout-grid-b{display:grid;grid-template-columns:1fr .72fr .72fr;grid-template-rows:290px 290px;gap:16px}
.client-layout-grid-b .tile-b1{grid-row:1/3}
.client-layout-grid-b .tile-b2{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end}
.client-layout-grid-b .tile-b3{grid-column:3;grid-row:1}
.client-layout-grid-b .tile-b4{grid-column:3;grid-row:2}

/* C — Editorial / brand story */
.client-layout-split{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch;margin-bottom:70px}
.client-layout-split .split-media{min-height:570px}
.client-layout-split-copy{display:flex;flex-direction:column;justify-content:center;padding:54px}
.client-layout-mini-scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;border-top:1px solid #d5d0ca;margin-top:32px;padding-top:25px}
.client-layout-mini-scope strong{font-family:"Gotham Bold",Gotham,Arial,sans-serif;font-size:12px;display:block;margin-bottom:5px}
.client-layout-mini-scope p{font-size:11px;line-height:1.45}
.client-layout-grid-c{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:360px 310px;gap:16px}
.client-layout-grid-c .tile-c1{grid-column:1;grid-row:1}
.client-layout-grid-c .tile-c2{grid-column:2;grid-row:1/3}
.client-layout-grid-c .tile-c3{grid-column:1;grid-row:2}
.client-layout-grid-c .tile-c4{display:none}

.client-closeout{border-top:0!important}
@media(max-width:1100px){
 .client-layout-intro{gap:48px}
 .client-layout-cinema{grid-template-columns:1fr}
 .client-layout-cinema-caption{min-height:240px}
 .client-layout-grid-b{grid-template-columns:1fr 1fr;grid-template-rows:360px auto 280px}
 .client-layout-grid-b .tile-b1{grid-column:1;grid-row:1}
 .client-layout-grid-b .tile-b2{grid-column:2;grid-row:1}
 .client-layout-grid-b .tile-b3{grid-column:1;grid-row:2}
 .client-layout-grid-b .tile-b4{grid-column:2;grid-row:2}
}
@media(max-width:900px){
 .client-layout-body{padding:70px 0}
 .client-layout-intro,.client-layout-split,.client-layout-feature{grid-template-columns:1fr;gap:24px}
 .client-layout-copy{grid-template-columns:1fr;gap:16px;padding-top:0}
 .client-layout-scope{grid-template-columns:1fr 1fr}
 .client-layout-grid-a,.client-layout-grid-c,.client-layout-grid-b{display:grid;grid-template-columns:1fr;grid-template-rows:none}
 .client-layout-grid-a>* ,.client-layout-grid-b>* ,.client-layout-grid-c>*{grid-column:auto!important;grid-row:auto!important;min-height:280px}
 .client-layout-grid-a .tile-a4,.client-layout-grid-c .tile-c4{display:block}
 .client-layout-cinema{grid-template-columns:1fr}
 .client-layout-cinema .cinema-main,.client-layout-feature .tile-feature,.client-layout-split .split-media{min-height:320px}
 .client-layout-mini-scope{grid-template-columns:1fr}
}

/* V5 featured logo cards: keep placeholder logos contained until client media arrives */
#work .workgrid .project-card.is-logo-card{background:radial-gradient(circle at 50% 40%,#21131f 0,#0b0b0c 72%)!important}
#work .workgrid .project-card.is-logo-card>img{inset:auto!important;left:19%!important;top:8%!important;width:62%!important;height:62%!important;padding:0!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;opacity:.92!important;background:none!important}


/* Work feature cards: approved media arrangement with captions below. */
#work .workgrid{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.17fr)!important;
 grid-template-rows:auto auto!important;gap:20px 10px!important;min-height:0!important;
}
.work-project-card{display:flex;flex-direction:column;min-width:0;width:100%;position:relative;padding:0;border:0;background:transparent;color:#fff;text-align:left;cursor:pointer}
.work-card-media{display:block;position:relative;width:100%;height:247px;overflow:hidden;background:#161618}
.work-card-media img,.work-card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 220ms var(--motion-ease-out),filter 220ms ease}
.work-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 43%,#000000d9 100%);pointer-events:none}
.work-project-card:focus-visible{outline:2px solid #895e84;outline-offset:5px}
#work .workgrid .mosaic-feature-video{grid-column:1 / 3;grid-row:1}
#work .workgrid .mosaic-top-right{grid-column:3;grid-row:1}
#work .workgrid .mosaic-bottom-left{grid-column:1;grid-row:2}
#work .workgrid .mosaic-bottom-middle{grid-column:2;grid-row:2}
#work .workgrid .mosaic-bottom-right{grid-column:3;grid-row:2}
.work-project-card.mosaic-feature-video .work-card-media,.work-project-card.mosaic-top-right .work-card-media{height:333px}
.work-project-card.mosaic-feature-video .work-card-media:before{
 content:"FEATURE FILM";position:absolute;z-index:3;left:22px;top:22px;
 padding:8px 10px;border:1px solid rgba(255,255,255,.42);border-radius:999px;
 background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
 font:700 8px/1 "Gotham Medium",Arial,sans-serif;letter-spacing:.16em;color:#fff;
}
.work-project-card .meta{position:static;width:100%;padding:16px 20px 18px;transition:transform 180ms var(--motion-ease-out)}
.work-project-card .meta h3{font-family:"Lighthouse Micro",MicroBold,Impact,sans-serif;font-weight:700;font-size:clamp(13px,1.105vw,19.5px);line-height:1;letter-spacing:.005em;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.work-project-card .meta small,.work-project-card .meta .type{font-family:"Gotham Medium",Arial,sans-serif;font-weight:500;font-size:8px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase}
.work-project-card .meta small{display:block;letter-spacing:.18em;margin-bottom:9px;color:#d2ced2}
.work-project-card .meta .type{margin-top:10px;color:#aaa}
@media(hover:hover) and (pointer:fine){.work-project-card:hover .work-card-media img,.work-project-card:hover .work-card-media video{filter:brightness(.94)}.work-project-card:hover .meta{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.work-project-card .work-card-media img,.work-project-card .work-card-media video,.work-project-card .meta{transition:none!important;transform:none!important}}

/* Client directory logo carousel — light/off-white treatment with dark marks */
.client-directory-logo-loop{
  background:transparent!important;
  border-top:1px solid #d7d2cc!important;
  border-bottom:1px solid #d7d2cc!important;
}
.client-directory-logo-loop .logo-loop-label{color:#5e1751!important}
.client-directory-logo-loop .client-logo-item{opacity:.9!important}
.client-directory-logo-loop .client-logo-item img{
  filter:grayscale(1) brightness(0)!important;
  opacity:.88!important;
}

@media(max-width:1023px){
 #work .workgrid{grid-template-columns:1fr 1fr!important}
 #work .workgrid .work-project-card{grid-column:auto;grid-row:auto}
 #work .workgrid .mosaic-feature-video{grid-column:1 / -1}
 .work-project-card .work-card-media,.work-project-card.mosaic-top-right .work-card-media{height:360px}
 .work-project-card.mosaic-feature-video .work-card-media{height:480px}
}
@media(max-width:767px){
 #work .workgrid{grid-template-columns:1fr!important}
 #work .workgrid .work-project-card{grid-column:1;grid-row:auto}
 .work-project-card.mosaic-feature-video .work-card-media{height:430px}
 .work-project-card .meta{padding:16px 12px 18px}
}

/* CLIENT DIRECTORY HEADING ALIGNMENT PASS */
.client-directory-head{
  grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr)!important;
  gap:clamp(72px,7vw,132px)!important;
  align-items:center!important;
}
.client-directory-head h2{
  font-size:clamp(42px,2.9vw,56px)!important;
  line-height:.88!important;
  max-width:760px!important;
  margin-top:16px!important;
}
.client-directory-intro{
  display:block!important;
  justify-self:end!important;
  width:min(100%,360px)!important;
  padding-bottom:0!important;
}
.client-directory-intro p{
  max-width:360px!important;
}
@media(max-width:1100px){
  .client-directory-head{
    grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr)!important;
    gap:56px!important;
  }
  .client-directory-head h2{
    font-size:clamp(40px,5vw,58px)!important;
    max-width:640px!important;
  }
}
@media(max-width:820px){
  .client-directory-head{
    grid-template-columns:1fr!important;
    gap:26px!important;
    align-items:start!important;
  }
  .client-directory-head h2{
    font-size:clamp(40px,10.5vw,58px)!important;
    max-width:none!important;
  }
  .client-directory-intro{
    justify-self:start!important;
    width:min(100%,520px)!important;
  }
}

/* === Client page global alignment pass ===
   Applies to every client page in the shared system. */
@media (min-width:901px){
  .client-layout-intro{
    position:relative;
    padding-top:42px;
  }
  .client-layout-intro > div:first-child > .kicker{
    position:absolute;
    top:0;
    left:0;
    margin:0;
  }
  .client-layout-display{
    margin-top:0;
  }
  .client-layout-copy{
    padding-top:0;
  }
  .client-layout-tags{
    grid-column:1 / -1;
    flex-wrap:nowrap;
    width:100%;
    margin-top:22px;
  }
  .client-layout-tags span{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .client-layout-scope>div{
    padding:22px 26px 24px;
  }
}

@media (max-width:900px){
  .client-layout-tags{
    grid-column:1;
    flex-wrap:wrap;
  }
  .client-layout-scope>div{
    padding:20px 18px 22px;
  }
}
@media (min-width:901px){
  .client-layout-display h2{margin:0!important;}
}


/* About introduction reuses the approved Why Lighthouse layout. */
#about .about-intro-section .about-section-heading>.about-intro-copy{grid-column:2;grid-row:2;min-width:0;padding:0 34px 40px}
#about .about-intro-copy p{margin:0;color:#555;font-size:17px;line-height:1.7}
#about .about-intro-copy p+p{margin-top:18px}
#about .about-intro-section .about-values-row h3{font-size:clamp(18px,1.5vw,24px)}
/* Preserve the previous two-image row's combined desktop width and height. */
#about .about-film-break{position:relative;isolation:isolate;overflow:hidden;width:100%;margin-top:48px;background:#080808}
#about .about-film-break::before{content:"";display:block;padding-top:calc((100% - 12px) * 0.23991079)}
#about .about-film-break video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#about .about-film-break::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.52);pointer-events:none}
#about .about-film-logo{position:absolute;z-index:2;left:50%;top:50%;width:min(52%,640px);max-width:calc(100% - 48px);height:auto;transform:translate(-50%,-50%);pointer-events:none}
#about .about-film-break.is-scroll-animated .about-film-logo{opacity:var(--about-logo-opacity,0);transform:translate3d(-50%,calc(-50% + var(--about-logo-y,24px)),0);will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){
  #about .about-film-logo{opacity:1!important;transform:translate(-50%,-50%)!important;will-change:auto!important}
}
@media(max-width:980px){
  #about .about-intro-section .about-values-row article:last-child{grid-column:1/-1}
  #about .about-intro-section .about-values-row h3{font-size:24px}
}
@media(max-width:767px){
  #about .about-intro-section .about-section-heading>.about-intro-copy{grid-column:1;grid-row:3;padding:0 20px 32px}
  #about .about-film-break{margin-top:32px}
  #about .about-film-break::before{padding-top:56.25%}
  #about .about-film-logo{width:72%}
}

/* === Final content pass: About + Services === */
#about .values{grid-template-columns:repeat(2,minmax(0,1fr))}
#about .values .value:nth-child(5){grid-column:1/-1;min-height:160px}
.about-foundation-section{background:#0b0b0c;color:#fff;padding-top:108px;padding-bottom:108px}
.about-partner-section{background:var(--paper);color:#111;padding-top:108px;padding-bottom:118px}
.about-section-heading{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:80px;row-gap:18px;align-items:start;margin-bottom:64px}
.about-section-heading>.kicker{grid-column:1}
.about-section-heading>h2{grid-column:1;font-family:MicroBold,Impact,sans-serif;text-transform:uppercase;font-size:clamp(48px,5.6vw,88px);font-weight:400;line-height:.88;margin:0}
.about-section-heading>p{grid-column:2;grid-row:2;max-width:720px;margin:0;font-size:17px;line-height:1.7;color:#aaa}
.about-section-heading-light>p{color:#555}
/* Matching two-column heading sizing and alignment for Foundation and Why Lighthouse. */
:is(.about-foundation-section,.about-partner-section) .about-section-heading{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:28px;margin-bottom:0}
:is(.about-foundation-section,.about-partner-section) .about-section-heading>.kicker{grid-column:1/-1;padding-inline:34px}
:is(.about-foundation-section,.about-partner-section) .about-section-heading>:is(.about-foundation-heading,.about-partner-heading){grid-column:1;grid-row:2;min-width:0;padding:0 34px 40px;container-type:inline-size;font-size:0;line-height:1}
:is(.about-foundation-heading,.about-partner-heading)>span{display:block;white-space:nowrap;font-size:clamp(18px,calc(3vw - 5px),68px);line-height:1.06;letter-spacing:0}
:is(.about-foundation-section,.about-partner-section) .about-section-heading>p{grid-column:2;grid-row:2;max-width:none;padding:0 34px 40px}
@supports(font-size:1cqw){:is(.about-foundation-heading,.about-partner-heading)>span{font-size:clamp(16px,7.2cqw,68px)}}
@media(max-width:767px){
  :is(.about-foundation-section,.about-partner-section) .about-section-heading{grid-template-columns:minmax(0,1fr);row-gap:24px}
  :is(.about-foundation-section,.about-partner-section) .about-section-heading>.kicker{padding-inline:20px}
  :is(.about-foundation-section,.about-partner-section) .about-section-heading>:is(.about-foundation-heading,.about-partner-heading){grid-column:1;grid-row:2;padding:0 20px}
  :is(.about-foundation-section,.about-partner-section) .about-section-heading>p{grid-column:1;grid-row:3;padding:0 20px 32px}
  .about-foundation-section .about-foundation-card{padding-inline:20px}
  :is(.about-foundation-heading,.about-partner-heading)>span{font-size:clamp(18px,calc(6.3vw - 4px),46px)}
  @supports(font-size:1cqw){:is(.about-foundation-heading,.about-partner-heading)>span{font-size:clamp(16px,7.2cqw,46px)}}
}
.about-foundation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#ffffff2a;border:1px solid #ffffff2a}
.about-foundation-card{background:#111;padding:34px 34px 38px;min-height:250px}
.about-foundation-card span,.about-partner-grid span{display:block;font-size:10px;letter-spacing:.16em;color:#bd6bad;margin-bottom:58px}
.about-foundation-card h3,.about-partner-grid h3{font-family:"Gotham Bold",Arial,sans-serif;font-size:24px;line-height:1.05;margin:0 0 18px}
.about-foundation-card p{margin:0;color:#a9a9a9;line-height:1.65;font-size:14px}
.about-partner-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#c9c5bf;border:1px solid #c9c5bf}
.about-partner-grid article{background:var(--paper);padding:30px clamp(18px,1.6vw,30px) 34px;min-height:270px}
.about-partner-grid p{margin:0;color:#555;line-height:1.6;font-size:13px}
/* Services process cards size every title against the same available width. */
.services-process>.value{min-width:0;container-type:inline-size}
.services-process>.value h4{font-size:clamp(12px,1.3vw,26px)!important;line-height:1.2;white-space:nowrap}
.services-process>.value p{text-wrap:pretty}
@supports(font-size:1cqi){
  .services-process>.value h4{font-size:min(26px,5.4cqi)!important}
}
#services .capabilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#services .capability{min-height:190px}
@media(max-width:980px){
  .about-section-heading{grid-template-columns:1fr;gap:24px}.about-section-heading>.kicker,.about-section-heading>h2,.about-section-heading>p{grid-column:1;grid-row:auto}
  .about-foundation-grid,.about-partner-grid,#services .capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  #about .values,.about-foundation-grid,.about-partner-grid,#services .capabilities{grid-template-columns:1fr}
  #about .values .value:nth-child(5){grid-column:1}
  .about-foundation-section,.about-partner-section{padding-top:76px;padding-bottom:82px}
  .about-foundation-card,.about-partner-grid article{min-height:0}
}

/* Supplied client photography retains its original aspect ratio. */
.client-page[data-media-update] .client-layout-media{min-height:0!important;aspect-ratio:auto!important;align-self:start}
.client-page[data-media-update] .client-layout-media img{width:100%;height:auto!important;object-fit:contain;cursor:zoom-in}
.client-page[data-media-update] .client-layout-grid-a{grid-template-rows:auto auto;align-items:start}
.client-page[data-media-update] .tile-a1{grid-column:1;grid-row:1}
.client-page[data-media-update] .tile-a2{grid-column:2;grid-row:1}
.client-page[data-media-update] .tile-a3{grid-column:2;grid-row:2}
.client-page[data-media-update] .tile-a4{display:block;grid-column:1;grid-row:2}
.client-page[data-media-update] .client-layout-grid-b{grid-template-rows:auto auto;align-items:start}
.client-page[data-media-update] .tile-b1{grid-column:1 / 3;grid-row:1}
.client-page[data-media-update] .tile-b2{grid-column:3;grid-row:1 / 3;align-self:stretch}
.client-page[data-media-update] .tile-b3{grid-column:1;grid-row:2}
.client-page[data-media-update] .tile-b4{grid-column:2;grid-row:2}
.client-page[data-media-update] .client-layout-grid-c{grid-template-rows:auto auto;align-items:start}
.client-page[data-media-update] .tile-c1{grid-column:1;grid-row:1}
.client-page[data-media-update] .tile-c2{grid-column:2;grid-row:1}
.client-page[data-media-update] .tile-c3{grid-column:1;grid-row:2}
.client-page[data-media-update] .tile-c4{display:block;grid-column:2;grid-row:2}
.client-page .supplied-gallery{padding:48px 0 72px;background:#080808;color:#fff}
.client-page .supplied-gallery .client-carousel-intro{width:min(var(--max),calc(100% - 2*var(--pad)));margin:0 auto 24px}
.client-page .supplied-gallery .client-carousel-track{touch-action:pan-x pan-y pinch-zoom}
.client-page .supplied-gallery .client-carousel-item img{width:auto;height:100%;object-fit:contain}
.client-page img[role=button]:focus-visible{outline:3px solid #895e84;outline-offset:4px}
@media(max-width:900px){
 .client-page[data-media-update] .client-layout-grid-a,.client-page[data-media-update] .client-layout-grid-b,.client-page[data-media-update] .client-layout-grid-c{grid-template-columns:1fr;grid-template-rows:none}
 .client-page[data-media-update] .client-layout-grid-a>*,.client-page[data-media-update] .client-layout-grid-b>*,.client-page[data-media-update] .client-layout-grid-c>*{grid-column:auto!important;grid-row:auto!important}
}
.client-page .supplied-gallery .client-carousel-item{flex:none!important;width:auto!important;height:clamp(240px,32vw,440px)!important;aspect-ratio:var(--media-ratio);max-width:90vw}
.client-page .supplied-gallery .client-carousel-item img{width:100%;height:100%;object-fit:contain}
.client-page[data-media-format=portrait] .client-layout-media{width:fit-content;max-width:100%;justify-self:center;background:transparent}
.client-page[data-media-format=portrait] .client-layout-media img{width:auto;max-width:100%;max-height:78svh;height:auto!important;object-fit:contain}
.client-film-collection{padding:0 0 72px;background:var(--paper);color:#111}
.client-film-collection h3{font-family:"Gotham Bold",Arial,sans-serif;font-size:clamp(26px,2.4vw,40px);margin:14px 0 30px}
.client-film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.client-film-grid figure{margin:0;min-width:0}
.client-film-grid video{display:block;width:100%;height:auto;max-height:76svh;object-fit:contain;background:#080808}
.client-film-grid figcaption{padding:14px 0;font-size:12px;line-height:1.5;color:#575257}
@media(max-width:767px){.client-film-grid{grid-template-columns:1fr;gap:24px}}
.client-film-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.client-film-controls{display:flex;gap:8px;margin-bottom:30px;flex:none}
.client-film-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #777;border-radius:50%;background:transparent;color:#111;font-size:20px;cursor:pointer}
.client-film-controls button:disabled{opacity:.3;cursor:default}
.client-film-controls button:focus-visible,.client-film-rail:focus-visible{outline:2px solid #895e84;outline-offset:4px}
.client-film-grid.client-film-rail{--film-height:clamp(300px,28vw,440px);display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;overflow-y:hidden;padding-bottom:12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#777 transparent;overscroll-behavior-inline:contain;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
.client-film-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.client-film-rail figure{flex:0 0 auto;max-width:100%;scroll-snap-align:start}
.client-film-rail .film-landscape{width:calc(var(--film-height) * 16 / 9)}
.client-film-rail .film-portrait{width:calc(var(--film-height) * 9 / 16)}
.client-film-rail video{height:var(--film-height);max-height:none;object-fit:contain}
@media(max-width:767px){.client-film-grid.client-film-rail{--film-height:320px;gap:16px}.client-film-controls{gap:6px}}
.client-page .supplied-gallery .client-carousel-item:hover img{transform:none!important}


/* Services overview: compact copy and approved artwork share one desktop row. */
#services .services-intro{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,4vw,72px);
  align-items:center;
}
#services .services-intro-copy{
  min-width:0;
}
#services .services-intro-copy .servicerow{
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:10px 18px!important;
  padding:24px 0!important;
}
#services .services-intro-copy .servicerow .number{
  grid-column:1;
  grid-row:1;
  align-self:center;
}
#services .services-intro-copy .servicerow h3{
  grid-column:2;
  grid-row:1;
  min-width:0;
  font-size:clamp(22px,1.8vw,32px)!important;
  line-height:1.15!important;
}
#services .services-intro-copy .servicerow p{
  grid-column:2!important;
  grid-row:2;
  min-width:0;
  font-size:15px;
  line-height:1.6;
}
#services .services-equipment-banner{
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  background:var(--paper);
}
#services .services-equipment-banner img{
  display:block;
  width:100%;
  height:auto;
}
/* Frame out transparent side margins so the artwork fills the desktop column. */
@media(min-width:1101px){
  #services .services-equipment-banner{
    display:flex;
    align-items:center;
    aspect-ratio:1.9;
    overflow:hidden;
  }
  #services .services-equipment-banner img{
    flex:0 0 145%;
    width:145%;
    max-width:none;
    height:auto;
    margin-left:-27.25%;
    transform:none;
  }
}
#services .services-toggle{
  width:100%;
  min-height:58px;
  margin-top:48px;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:0;
  border-top:1px solid #aaa59f;
  border-bottom:1px solid #aaa59f;
  background:transparent;
  color:#111;
  font-family:"Gotham Bold",Arial,sans-serif;
  font-size:12px;
  line-height:1;
  letter-spacing:.16em;
  text-align:left;
  cursor:pointer;
}
#services .services-toggle-mark{
  flex:0 0 auto;
  font-family:"Gotham Book",Arial,sans-serif;
  font-size:24px;
  line-height:1;
  letter-spacing:0;
}
#services .services-toggle:focus-visible{
  outline:2px solid #772269;
  outline-offset:5px;
}
#services .services-capabilities{
  margin-top:14px;
}
#services .services-capabilities[hidden]{
  display:none!important;
}
@media(max-width:1100px){
  #services .services-intro{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
}
@media(max-width:767px){
  #services .services-intro-copy .servicerow{
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:10px 14px!important;
    padding:20px 0!important;
  }
  #services .services-intro-copy .servicerow h3{
    font-size:clamp(20px,5.2vw,26px)!important;
  }
  #services .services-intro-copy .servicerow p{
    font-size:14px;
  }
  #services .services-toggle{
    min-height:56px;
    margin-top:32px;
    padding:16px 0;
  }
}


/* ==============================================================
   FINAL MOBILE LAUNCH PASS — SEPTEMBER 2026
   Containment, touch scrolling and small-screen controls only.
   ============================================================== */
html,
body{
  max-width:100%;
}
@supports(overflow:clip){
  html,
  body{overflow-x:clip}
}

.view,
.wrap,
.section-head,
.contactgrid,
.project-brief-form,
.client-layout-intro,
.client-layout-copy,
.client-closeout-grid,
.cinema-player-shell,
.youtube-player-shell{
  min-width:0;
}

@media(max-width:767px){
  .menu{
    min-width:44px;
    min-height:44px;
    padding:0;
    display:grid!important;
    place-items:center;
    touch-action:manipulation;
  }

  #mobilepanel{
    inset:72px 0 0!important;
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    align-content:start;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
  }
  #mobilepanel > button{
    min-height:52px;
    touch-action:manipulation;
  }
  #mobilepanel .mobilepanel-contact > button{
    min-height:48px;
  }
  #mobilepanel .header-social-link,
  .contact-page-social-icon{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
    touch-action:manipulation;
  }

  .display,
  .headline,
  .page-hero-copy .display.sm,
  .client-directory-head h2,
  .client-hero-copy h1,
  .client-layout-display,
  .page-closing-cta h2{
    max-width:100%!important;
    overflow-wrap:anywhere;
  }

  input,
  textarea,
  select{
    width:100%;
    min-width:0;
    font-size:16px!important;
  }
  input{
    min-height:48px;
  }
  textarea{
    min-height:150px;
  }
  .submit{
    min-height:50px;
    touch-action:manipulation;
  }

  .recent-carousel,
  .client-carousel-track,
  .client-film-rail,
  .youtube-filterbar{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
  }
  .client-page,
  .project{
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .client-page .supplied-gallery .client-carousel-item{
    max-width:calc(100vw - 2 * var(--pad));
  }

  .client-film-grid video,
  .showreelmodal video,
  .cinema-player video,
  .youtube-player-frame,
  .youtube-player-frame iframe{
    max-width:100%;
  }
  .cinema-player,
  .youtube-player{
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .cinema-player-close,
  .youtube-player-close,
  .viewer-close{
    top:max(12px,env(safe-area-inset-top))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:46px!important;
    height:46px!important;
    touch-action:manipulation;
  }

  .image-viewer{
    padding:70px 12px 108px!important;
  }
  .image-viewer #viewerImage{
    max-width:100%!important;
    max-height:calc(100vh - 178px)!important;
    max-height:calc(100dvh - 178px)!important;
  }
  .gallery-nav{
    bottom:max(16px,env(safe-area-inset-bottom))!important;
    width:46px!important;
    height:46px!important;
    touch-action:manipulation;
  }
  .viewer-caption{
    left:68px!important;
    right:68px!important;
    bottom:max(74px,calc(env(safe-area-inset-bottom) + 62px))!important;
    font-size:9px!important;
    line-height:1.35!important;
    text-align:center;
    overflow-wrap:anywhere;
  }
  .gallery-counter{
    top:max(18px,env(safe-area-inset-top))!important;
  }
}

@media(max-width:479px){
  #home .hero-copy .display{
    font-size:clamp(38px,12vw,52px)!important;
  }
  .page-hero-copy .display.sm{
    font-size:clamp(34px,10.8vw,46px)!important;
    line-height:.92!important;
  }
  #contact .contactgrid .display{
    font-size:clamp(36px,11.5vw,52px)!important;
    line-height:.92!important;
  }
  .client-hero-copy h1{
    font-size:clamp(30px,9.5vw,36px)!important;
  }
}


/* ==============================================================
   SCREENSHOT MOBILE CORRECTIONS — 18 SEPTEMBER 2026
   Whole-word type fitting, footer authority and fixed-nav clearance.
   ============================================================== */
@media(max-width:767px){
  html{
    scroll-padding-top:84px;
  }

  .navbar{
    background:rgba(9,9,10,.97)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }

  .view > section,
  .services-process > .value,
  .client-page section{
    scroll-margin-top:84px;
  }

  .display,
  .headline,
  .page-hero-copy .display.sm,
  .client-directory-head h2,
  .client-hero-copy h1,
  .client-layout-display,
  .page-closing-cta h2{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* The compact Start a Project footer is the only mobile footer. */
  main > .view > .page-closing,
  main > .view > .home-closing,
  .client-page > .page-closing:not(.mobile-global-contact-footer){
    display:none!important;
  }
  .mobile-global-contact-footer{
    display:block!important;
  }

  #services .section-head .headline{
    font-size:clamp(22px,7.2vw,32px)!important;
    line-height:.94!important;
    letter-spacing:0!important;
  }

  .page-closing-cta h2{
    font-size:clamp(22px,7.2vw,31px)!important;
    line-height:.92!important;
  }
}

@media(max-width:479px){
  #home .hero-copy .display{
    font-size:clamp(31px,9.7vw,42px)!important;
    line-height:.9!important;
    letter-spacing:0!important;
  }

  #home .home-selected-work .headline{
    font-size:clamp(30px,9.7vw,40px)!important;
    line-height:.94!important;
  }

  #home .hero-copy .lead{
    margin-top:24px!important;
  }

  #services .section-head .headline{
    font-size:clamp(22px,7.2vw,32px)!important;
  }

  .client-directory-head h2{
    font-size:clamp(34px,9.5vw,42px)!important;
    line-height:.94!important;
  }
}

/* ==============================================================
   FINAL CLIENT / FILM / MOBILE PASS — 18 SEPTEMBER 2026
   ============================================================== */

/* One monochrome SVG set supplies both light and dark contexts. */
.client-logo-item{
  color:#f3f1f4;
}
.client-logo-art{
  display:block;
  width:200px;
  height:70px;
  max-width:100%;
  max-height:100%;
  background-color:currentColor;
  -webkit-mask:var(--client-logo-image) center/contain no-repeat;
  mask:var(--client-logo-image) center/contain no-repeat;
}
.client-logo-item--colour .client-logo-art-full{
  width:auto;
  height:auto;
  max-width:200px;
  max-height:70px;
  object-fit:contain;
  filter:none!important;
}
.client-directory-logo-loop .client-logo-item:not(.client-logo-item--colour){
  color:#171719;
}
.client-directory-logo-loop .client-logo-item--colour .client-logo-art-full{
  filter:none!important;
  opacity:1!important;
}
.project-client-logo{
  display:flex;
  align-items:center;
  width:min(230px,42vw);
  height:64px;
  margin:0 0 14px;
  color:#fff;
}
.project-client-logo .client-logo-art{
  width:100%;
  height:100%;
}
.project-client-logo--colour{
  width:min(260px,48vw);
}
.project-client-logo--colour img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:64px;
  object-fit:contain;
  filter:none!important;
}

/* Shared SVG action-icon system; never falls back to platform emoji. */
.site-icon-slot,
.site-icon{
  display:inline-block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  vertical-align:-.14em;
}
.site-icon{
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 180ms ease;
}
.arr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
a:hover .site-icon--external,
button:hover .site-icon--external{
  transform:translate(2px,-2px);
}
.btn:hover .site-icon--right,
button:hover>.site-icon--right{
  transform:translateX(3px);
}
.btn:hover .site-icon--left,
button:hover>.site-icon--left{
  transform:translateX(-3px);
}
.menu .site-icon,
.client-page-close .site-icon,
.cinema-player-close .site-icon,
.youtube-player-close .site-icon,
.viewer-close .site-icon,
.showreelmodal .close .site-icon{
  width:22px;
  height:22px;
}

/* All project film collections inherit the approved VW horizontal rail. */
.client-film-grid.client-film-rail{
  --film-height:clamp(340px,30vw,500px);
}
.client-film-grid.client-film-rail figure{
  min-width:0;
}
.client-film-grid.client-film-rail video{
  width:100%;
  height:var(--film-height);
  max-height:none;
  object-fit:contain;
  background:#080808;
}
.client-film-grid.client-film-rail.is-single{
  display:grid;
  grid-template-columns:minmax(0,min(960px,100%));
  width:100%;
  overflow:visible;
  padding-bottom:0;
  cursor:default;
  scroll-snap-type:none;
}
.client-film-grid.client-film-rail.is-single figure{
  width:100%!important;
  max-width:960px;
}
.client-film-grid.client-film-rail.is-single figure.film-portrait{
  width:min(520px,100%)!important;
  max-width:520px;
}
.client-film-grid.client-film-rail.is-single video{
  width:100%;
  height:auto;
  max-height:76svh;
  aspect-ratio:auto;
}
.client-film-grid.client-film-rail.is-single+.client-film-controls,
.client-film-collection.is-empty{
  display:none!important;
}

@media(min-width:901px){
  .client-film-collection>.wrap{
    box-sizing:border-box;
    padding-right:170px;
  }
}

@media(max-width:767px){
  html,
  body{
    max-width:100%;
    overflow-x:clip;
  }

  #home .hero-copy>.kicker{
    max-width:none!important;
    white-space:nowrap;
    font-size:clamp(8.5px,2.55vw,10.5px)!important;
    letter-spacing:.15em!important;
  }

  #work .work-image-hero .page-hero-copy .body-lg{
    max-width:520px;
    margin-top:18px!important;
    color:#fff!important;
    font-size:clamp(15px,4.2vw,18px)!important;
    line-height:1.48!important;
  }

  .work-indicators,
  .client-layout-tags{
    display:flex!important;
    width:calc(100% + var(--pad));
    max-width:none;
    flex-wrap:nowrap!important;
    gap:24px!important;
    overflow-x:auto;
    overflow-y:hidden;
    margin-right:calc(var(--pad) * -1);
    padding-right:var(--pad)!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y pinch-zoom;
    scroll-snap-type:x proximity;
  }
  .work-indicators::-webkit-scrollbar,
  .client-layout-tags::-webkit-scrollbar{
    display:none;
  }
  .work-indicators span,
  .client-layout-tags span{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  .client-film-heading{
    align-items:center;
  }
  .client-film-controls button{
    min-width:44px;
    min-height:44px;
    touch-action:manipulation;
  }
  .client-film-grid.client-film-rail{
    --film-height:min(68svh,520px);
    gap:16px;
    padding-right:var(--pad);
    scrollbar-width:none;
  }
  .client-film-grid.client-film-rail::-webkit-scrollbar{
    display:none;
  }
  .client-film-grid.client-film-rail.is-single{
    display:grid;
    width:100%;
    padding-right:0;
    overflow:visible;
  }
  .client-film-grid.client-film-rail.is-single figure.film-portrait{
    width:min(86vw,480px)!important;
  }

  .project-client-logo{
    width:min(185px,48vw);
    height:50px;
    margin-bottom:10px;
  }
  .project-client-logo--colour{
    width:min(210px,54vw);
  }
  .project-client-logo--colour img{
    max-height:50px;
  }

  .mobilepanel{
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:max(22px,env(safe-area-inset-bottom));
  }
  .mobilepanel button,
  .menu,
  .client-directory-row,
  .client-film-controls button{
    touch-action:manipulation;
  }
  input,
  textarea,
  select{
    font-size:16px!important;
  }
}

/* Work-page client cards: darkened imagery with scroll-revealed brand marks. */
#work .work-project-card.has-work-brand .work-card-media::after{
  z-index:1;
  background:rgba(0,0,0,.52);
}
#work .work-project-card.has-work-brand .work-card-brand{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#fff;
  opacity:1;
  transform:none;
  pointer-events:none;
}
#work .work-project-card.has-work-brand.is-scroll-animated .work-card-brand{
  opacity:var(--work-card-logo-opacity,0);
  transform:translate3d(0,var(--work-card-logo-y,24px),0);
  will-change:opacity,transform;
}
#work .work-project-card.has-work-brand .work-card-brand .client-logo-art{
  width:min(58%,360px);
  height:52%;
  max-width:none;
  max-height:none;
}
@media(max-width:767px){
  #work .work-project-card.has-work-brand .work-card-media::after{
    background:rgba(0,0,0,.56);
  }
  #work .work-project-card.has-work-brand .work-card-brand .client-logo-art{
    width:min(64%,300px);
    height:50%;
  }
}
@media(prefers-reduced-motion:reduce){
  #work .work-project-card.has-work-brand .work-card-brand{
    opacity:1!important;
    transform:none!important;
    will-change:auto!important;
  }
}


/* ==============================================================
   R8 — FINAL PRE-DOMAIN MOTION + APPROVED R5/R6/R7 CONTINUITY
   18 SEPTEMBER 2026
   ============================================================== */
:root{
  --motion-premium:cubic-bezier(.22,1,.36,1);
  --motion-interactive:cubic-bezier(.4,0,.2,1);
  --motion-ease-out:var(--motion-premium);
  --motion-ui:200ms;
  --motion-reveal:600ms;
}
html{scroll-behavior:smooth}

/* R5: intrinsic-width logo strips with a fixed edge-to-edge rhythm. */
.logo-sequence{
  gap:64px!important;
  padding-right:64px!important;
}
.logo-loop .client-logo-item{
  width:auto!important;
  min-width:0!important;
  height:82px;
  flex:0 0 auto;
  opacity:.9;
}
.logo-loop .client-logo-art-loop{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:210px!important;
  max-height:70px!important;
  object-fit:contain;
}
.client-directory-logo-loop .client-logo-art-loop{
  filter:brightness(0)!important;
  opacity:.9!important;
}
.client-directory-logo-loop .client-logo-item--colour .client-logo-art-loop,
.client-directory-logo-loop img[src*="Client%20Logos_Motorsport_Dark.svg"]{
  filter:none!important;
  opacity:1!important;
}

/* R6/R7: project mark is anchored to the metadata rail, above its border.
   Reset the metadata-cell padding/border inheritance that previously made marks tiny. */
.client-hero-meta{overflow:visible!important}
.client-hero-meta>.project-client-logo{
  position:absolute!important;
  left:0!important;
  bottom:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:clamp(250px,22vw,360px)!important;
  height:96px!important;
  max-width:min(48vw,360px)!important;
  margin:0 0 18px!important;
  padding:0!important;
  border:0!important;
  color:#fff!important;
  pointer-events:none;
}
.client-hero-meta>.project-client-logo+div{padding-left:0!important}
.client-hero-meta>.project-client-logo .client-logo-art{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}
.client-hero-meta>.project-client-logo--colour{
  width:clamp(270px,24vw,390px)!important;
  max-width:min(52vw,390px)!important;
}
.client-hero-meta>.project-client-logo--colour img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:92px!important;
  object-fit:contain!important;
}

/* R5: Work card marks exactly 50% smaller than the pre-R5 treatment. */
#work .work-project-card.has-work-brand .work-card-brand .client-logo-art{
  width:min(29%,180px)!important;
  height:26%!important;
}
#work .work-project-card.has-work-brand.is-scroll-animated .work-card-brand{
  transition:opacity 180ms linear,transform 180ms linear;
}

/* R6: Detail Ease approved compact image-led relationship layout. */
#client-detailease .detailease-compact{padding-top:82px;padding-bottom:96px}
#client-detailease .detailease-copy-band{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:72px;
  align-items:start;
  margin-bottom:42px;
  padding-bottom:34px;
  border-bottom:1px solid #c6c1bb;
}
#client-detailease .detailease-copy-band .client-layout-copy{padding-top:20px}
#client-detailease .detailease-portrait-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
#client-detailease .detailease-portrait-grid .client-layout-media{margin:0;aspect-ratio:2/3;min-height:0}
#client-detailease .detailease-portrait-grid img{width:100%;height:100%;object-fit:cover;display:block}
.client-section-anchor{display:block;position:relative;top:-90px;visibility:hidden}

/* Site-wide reveal system: transform + opacity only. */
.wow-reveal{
  opacity:0!important;
  transform:translate3d(0,20px,0)!important;
  clip-path:none!important;
  transition:
    opacity var(--motion-duration,600ms) var(--motion-premium) var(--motion-delay,0ms),
    transform var(--motion-duration,600ms) var(--motion-premium) var(--motion-delay,0ms)!important;
}
.wow-reveal--image{--motion-duration:700ms;transform:translate3d(0,18px,0)!important}
.wow-reveal.revealed{opacity:1!important;transform:translate3d(0,0,0)!important}

/* Existing route transitions, retimed into the requested premium range. */
.view.active{animation:v57-view-enter 550ms var(--motion-premium) both!important}
.project.open .project-head{animation:v57-view-enter 550ms var(--motion-premium) both!important}
.client-page.open .client-hero-copy{animation:r8-client-enter 600ms var(--motion-premium) both}
@keyframes r8-client-enter{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* Consistent immediate-but-smooth interaction timing. */
.navlinks button,.mobilepanel button,.header-social-link,.filterbar button,.youtube-filterbar button,
.btn,.services-toggle,.client-page-chapters button,.client-directory-row,.client-film-controls button,
.gallery-nav,.gallery-filmstrip button,.viewer-close,.close,.youtube-player-close,.cinema-player-close,
.project-spec-close,.project-spec-trigger,.watch-film-play,.youtube-rail-arrow,
a{
  transition-timing-function:var(--motion-interactive)!important;
}
.btn,.services-toggle,.navlinks button,.mobilepanel button,.header-social-link,.filterbar button,.youtube-filterbar button,
.client-page-chapters button,.client-film-controls button,.viewer-close,.close,.youtube-player-close,.cinema-player-close,
.project-spec-close,.project-spec-trigger,.watch-film-play,.youtube-rail-arrow{
  transition-duration:200ms!important;
}
.work-project-card,.project-card,.value,.capability,.client-directory-row{
  transition:transform 300ms var(--motion-premium),box-shadow 300ms var(--motion-premium),border-color 300ms var(--motion-interactive),background-color 300ms var(--motion-interactive)!important;
}
.work-card-media img,.work-card-media video,.project-card img,.project-card video,
.client-layout-media img,.client-carousel-item img,.youtube-feed-card img,.youtube-short-card img{
  transition:transform 420ms var(--motion-premium),filter 420ms var(--motion-premium)!important;
  transform-origin:center;
}

@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translate3d(0,-2px,0)}
  .navlinks button:hover,.mobilepanel button:hover,.header-social-link:hover{opacity:1}
  .work-project-card:hover,.project-card:hover,.value:hover,.capability:hover{transform:translate3d(0,-3px,0)!important}
  .work-project-card:hover .work-card-media img,.work-project-card:hover .work-card-media video,
  .project-card:hover img,.project-card:hover video,
  .client-layout-media:hover img,.client-carousel-item:hover img,
  .youtube-feed-card:hover img,.youtube-short-card:hover img{transform:scale(1.02)!important}
  .client-directory-row:hover{transform:translate3d(3px,0,0)!important}
}

/* Expandable content fades/settles without animating expensive height. */
#services .services-capabilities:not([hidden]){
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:opacity 360ms var(--motion-premium),transform 360ms var(--motion-premium)!important;
}
#services .services-capabilities.is-expanded{opacity:1;transform:none}
#services .services-toggle-mark{transition:transform 220ms var(--motion-interactive)!important}
#services .services-toggle[aria-expanded="true"] .services-toggle-mark{transform:rotate(180deg)}

/* Modal / viewer motion in the requested 300–450ms range. */
.image-viewer.open,.cinema-player.open,.youtube-player.open{animation-duration:340ms!important;animation-timing-function:var(--motion-premium)!important}
.image-viewer.open #viewerImage,.cinema-player.open .cinema-player-shell,.youtube-player.open .youtube-player-shell{animation-duration:400ms!important;animation-timing-function:var(--motion-premium)!important}
.project-spec-drawer{transition-duration:350ms!important;transition-timing-function:var(--motion-premium)!important}

@media(max-width:700px){
  .logo-sequence{gap:44px!important;padding-right:44px!important}
  .logo-loop .client-logo-item{height:66px}
  .logo-loop .client-logo-art-loop{max-width:160px!important;max-height:54px!important}
}
@media(max-width:767px){
  .client-hero-meta>.project-client-logo{
    left:0!important;
    width:min(230px,62vw)!important;
    max-width:62vw!important;
    height:64px!important;
    margin-bottom:12px!important;
  }
  .client-hero-meta>.project-client-logo--colour{
    width:min(250px,68vw)!important;
    max-width:68vw!important;
  }
  .client-hero-meta>.project-client-logo--colour img{max-height:62px!important}
  #work .work-project-card.has-work-brand .work-card-brand .client-logo-art{
    width:min(32%,150px)!important;
    height:25%!important;
  }
  #client-detailease .detailease-compact{padding-top:66px;padding-bottom:76px}
  #client-detailease .detailease-copy-band{grid-template-columns:1fr;gap:22px;margin-bottom:30px;padding-bottom:28px}
  #client-detailease .detailease-copy-band .client-layout-copy{padding-top:0;grid-template-columns:1fr;gap:14px}
  #client-detailease .detailease-portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:430px){
  #client-detailease .detailease-portrait-grid{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .wow-reveal,.wow-reveal.revealed{opacity:1!important;transform:none!important;transition:none!important;will-change:auto!important}
  .view.active,.project.open .project-head,.client-page.open .client-hero-copy,
  .image-viewer.open,.image-viewer.open #viewerImage,.cinema-player.open,.cinema-player.open .cinema-player-shell,
  .youtube-player.open,.youtube-player.open .youtube-player-shell{animation:none!important}
  .btn,.services-toggle,.navlinks button,.mobilepanel,.mobilepanel button,.header-social-link,
  .work-project-card,.project-card,.value,.capability,.client-directory-row,
  .work-card-media img,.work-card-media video,.project-card img,.project-card video,
  .client-layout-media img,.client-carousel-item img,.youtube-feed-card img,.youtube-short-card img,
  #services .services-capabilities,#services .services-toggle-mark,.project-spec-drawer{
    transition:none!important;transform:none!important
  }
  #services .services-capabilities:not([hidden]){opacity:1!important}
}

/* ==============================================================
   R8.2 — CLIENT LOGO RENDER / ALIGNMENT FIX — 18 SEPTEMBER 2026
   Keep logo assets on the existing server. Render moving strips as
   direct SVG images and anchor client hero marks to the left edge.
   ============================================================== */
.logo-loop .client-logo-item{
  justify-content:flex-start!important;
  text-align:left!important;
}
.logo-loop .client-logo-art-loop{
  margin-left:0!important;
  margin-right:0!important;
  opacity:1!important;
  visibility:visible!important;
}
.client-hero-meta>.project-client-logo{
  justify-content:flex-start!important;
  text-align:left!important;
}
.client-hero-meta>.project-client-logo .client-logo-art{
  -webkit-mask-position:left center!important;
  mask-position:left center!important;
  transform-origin:left center!important;
}
.client-hero-meta>.project-client-logo--colour img{
  margin-left:0!important;
  margin-right:auto!important;
  object-position:left center!important;
}


/* ==============================================================
   R8.3 — LOGO CAROUSEL SERVER-RENDER FIX — 18 SEPTEMBER 2026
   The server already contains the SVG assets. Moving logo strips use
   the same CSS-mask route as the approved client-page marks instead
   of external SVG <img> rendering. This keeps both logo carousels
   visible and left-aligned without changing the approved layout.
   ============================================================== */
.logo-loop .client-logo-item{
  width:auto!important;
  min-width:0!important;
  height:82px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  opacity:.9!important;
  visibility:visible!important;
}
.logo-loop .client-logo-art-loop-mask{
  display:block!important;
  width:var(--logo-width,200px)!important;
  height:70px!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  background-color:currentColor!important;
  -webkit-mask:var(--client-logo-image) left center/contain no-repeat!important;
  mask:var(--client-logo-image) left center/contain no-repeat!important;
  transform:none!important;
}
.logo-loop .client-logo-art-loop-svg{
  display:block!important;
  width:var(--logo-width,200px)!important;
  height:70px!important;
  max-width:210px!important;
  max-height:70px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:1!important;
  visibility:visible!important;
}
.client-directory-logo-loop .client-logo-art-loop-svg{
  filter:grayscale(1) brightness(0)!important;
  opacity:.9!important;
}
@media(max-width:700px){
  .logo-loop .client-logo-item{height:66px!important}
  .logo-loop .client-logo-art-loop-mask{
    width:var(--logo-width-mobile,154px)!important;
    height:54px!important;
  }
  .logo-loop .client-logo-art-loop-svg{
    width:var(--logo-width-mobile,154px)!important;
    height:54px!important;
    max-width:160px!important;
    max-height:54px!important;
  }
}


/* ==============================================================
   FINAL LIGHTHOUSE BRAND LOGO MONOCHROME FIX — 18 SEP 2026
   Lighthouse brand marks are white on dark surfaces and dark grey
   on light surfaces. No colour treatment.
   ============================================================== */

/* Dark contexts: pure white brand mark. */
.navbar .logo img,
.page-closing-dark .page-closing-logo,
#about .about-film-logo{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}

/* Light contexts: single dark-grey brand mark. */
#home .home-closing-logo,
.page-closing-light .page-closing-logo,
.contact-page-footer-logo{
  filter:brightness(0)!important;
  opacity:.78!important;
}

/* ==============================================================
   PRODUCTION R9 — REQUESTED MOBILE-ONLY COPY ADJUSTMENTS
   ============================================================== */
@media(max-width:767px){
  /* Client logos and project metadata remain visible; only the
     introductory kicker, title and description are removed. */
  .client-page .client-hero-copy{
    display:none!important;
  }

  /* Keep the homepage services statement to its intended three lines. */
  #home .home-services-head h2{
    font-size:clamp(20px,7.2vw,46px)!important;
    line-height:.92!important;
    letter-spacing:-.01em!important;
  }
  #home .home-services-head h2>span{
    display:inline-block;
    white-space:nowrap;
  }
}