:root{
  --black:#101010;
  --ink:#171717;
  --paper:#f3f0e9;
  --white:#fbfaf6;
  --yellow:#f0d400;
  --muted:#8c8a83;
  --line:rgba(16,16,16,.16);
  --dark-line:rgba(255,255,255,.18);
  --condensed:"Barlow Condensed", Impact, sans-serif;
  --sans:"DM Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:center;background:rgba(16,16,16,.88);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:10px;line-height:.72}
.brand-mark{color:var(--yellow);font-family:var(--condensed);font-size:27px;font-weight:600;border:1px solid var(--yellow);border-radius:50%;width:35px;height:35px;display:grid;place-items:center}
.brand-name{font-family:var(--condensed);font-size:21px;letter-spacing:-.03em}
nav{display:flex;gap:30px;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.08em;font-size:14px}
nav a{opacity:.75;transition:.25s} nav a:hover{opacity:1;color:var(--yellow)}
.arrow-svg{width:20px;height:20px;display:inline-block;vertical-align:-5px;margin-left:8px;overflow:visible}.arrow-svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.menu-contact{
  position:absolute;
  right:4vw;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  color:var(--yellow);
  font-family:var(--condensed);
  font-size:14px;
  letter-spacing:.08em;
  cursor:pointer;
  padding:10px 0;
}
.hero picture{display:block;width:100%;height:100%}.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{display:none}
.hero-content{position:absolute;inset:0;padding:150px 7vw 7vh;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.eyebrow,.kicker{font-family:var(--condensed);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.hero h1{position:relative;top:175px;font-family:var(--condensed);font-weight:400;font-size:clamp(44px,5.8vw,88px);line-height:.78;letter-spacing:-.04em;margin:0;max-width:950px;text-transform:uppercase;color:#333333;text-align:left;display:flex;flex-direction:column;align-items:flex-start;line-height:.78}
.hero h1 em,.section h2 em,.cta h2 em{color:var(--yellow);font-style:normal}.hero h1 .yellow-line{color:var(--yellow)}.hero h1 span{display:block;width:max-content}
.hero-bottom{display:flex;justify-content:flex-end;align-items:center;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.hero-bottom a{color:var(--yellow)}
.section{padding:125px 7vw}
.section.dark{background:var(--black);color:var(--white)}
.section-head{margin-bottom:70px}
.section-head h2{font-family:var(--condensed);font-weight:400;text-transform:uppercase;font-size:clamp(58px,8vw,120px);line-height:.82;letter-spacing:-.035em;margin:18px 0 0}
.section-head.split{display:grid;grid-template-columns:1.3fr .7fr;gap:7vw;align-items:end}
.section-head.split>p{max-width:430px;margin:0 0 7px;color:var(--muted);line-height:1.7}
.dark .section-head.split>p{color:#aaa}
.about-grid{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr;gap:7vw;align-items:start}
.about-image{overflow:hidden;aspect-ratio:1.07/.95;background:#ddd}
.about-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.about-copy{max-width:650px}
.about-copy p{font-size:18px;line-height:1.8;color:#57554f}
.about-copy .lead{font-family:var(--condensed);font-size:34px;line-height:1.1;color:var(--ink);margin-top:0}
.discipline{margin:42px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-family:var(--condensed);font-size:17px;text-transform:uppercase;letter-spacing:.08em}
.services{display:grid;grid-template-columns:1fr 1fr}
.service{display:grid;grid-template-columns:40px 1fr;gap:15px;padding:18px 15px 18px 0;border-bottom:1px solid var(--line)}
.service-no{font-family:var(--condensed);color:#aaa}.service h3{font-family:var(--condensed);font-size:24px;font-weight:500;margin:0 0 5px;text-transform:uppercase}.service p{margin:0;font-size:12px;color:#777}
.experience-strip{background:var(--yellow);overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee{display:flex;width:max-content;animation:marquee 42s linear infinite;font-family:var(--condensed);font-size:18px;letter-spacing:.03em;text-transform:none}.marquee b{font-weight:400;padding:0 22px}
.marquee span{padding-right:2rem}
@keyframes marquee{to{transform:translateX(-50%)}}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brand-card{position:relative;min-height:300px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 24px 25px;cursor:pointer;transition:.3s;text-align:center}
.brand-card:hover{background:#e9e4d9;transform:translateY(-4px)}
.brand-card img{width:min(75%,190px);height:145px;object-fit:contain;mix-blend-mode:multiply;transition:.3s}
.brand-card:hover img{transform:scale(1.06)}
.brand-index{position:absolute;top:15px;left:16px;font-family:var(--condensed);color:#999;font-size:14px}
.brand-meta{margin-top:18px;display:flex;flex-direction:column;gap:4px}
.brand-meta strong{font-family:var(--condensed);font-size:22px;text-transform:uppercase;font-weight:500}
.brand-meta small{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.08em}
.project-list{display:grid;gap:90px}
.project-card{display:grid;grid-template-columns:1.35fr .65fr;gap:5vw;align-items:center}
.project-image{overflow:hidden;background:#222}
.project-image img{width:100%;display:block;aspect-ratio:1.65/1;object-fit:cover;transition:transform .7s}
.project-card:hover .project-image img{transform:scale(1.025)}
.project-copy span,.editorial-card span,.social-card>span{font-family:var(--condensed);font-size:12px;letter-spacing:.12em;color:var(--yellow);text-transform:uppercase}
.project-copy h3{font-family:var(--condensed);font-size:42px;line-height:.95;text-transform:uppercase;font-weight:400;margin:18px 0 28px}
.project-copy p{color:#aaa;line-height:1.6;font-size:13px}.project-copy b{display:block;color:#fff;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.editorial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.editorial-card{background:#fff;border:1px solid var(--line);overflow:hidden}
.editorial-card img{width:100%;display:block;aspect-ratio:1.8/1;object-fit:cover;object-position:center}
.editorial-card>div{padding:24px}.editorial-card span{color:#777}.editorial-card h3{font-family:var(--condensed);font-size:28px;text-transform:uppercase;font-weight:500;margin:8px 0 0}
.digital-section{padding-bottom:140px}
.client-block+.client-block{margin-top:120px}
.client-title{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--dark-line);padding-bottom:18px;margin-bottom:28px}
.client-title span{font-family:var(--condensed);font-size:13px;letter-spacing:.12em;color:var(--yellow)}
.client-title h3{font-family:var(--condensed);font-size:44px;text-transform:uppercase;font-weight:400;margin:0}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.social-card{min-width:0}.social-card img{width:100%;display:block;aspect-ratio:1/1.03;object-fit:cover;margin-bottom:18px;transition:.5s}.social-card:hover img{transform:translateY(-6px)}
.social-card h3{font-family:var(--condensed);font-size:25px;text-transform:uppercase;font-weight:400;margin:7px 0 0}
.cta{background:var(--white);padding:160px 7vw 120px;border-top:1px solid var(--line)}
.cta-inner{text-align:center}.cta h2{font-family:var(--condensed);font-weight:400;text-transform:uppercase;font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:-.04em;margin:30px auto 55px}
.cta-button{display:inline-block;background:var(--black);color:#fff;padding:17px 27px;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.1em}.cta-button:hover{color:var(--yellow)}
footer{display:flex;justify-content:space-between;padding:25px 7vw;background:var(--black);color:#888;font-family:var(--condensed);font-size:12px;letter-spacing:.1em}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:50;display:none;align-items:center;justify-content:center;padding:6vw}
.lightbox.is-open{display:flex}.lightbox-inner{max-width:1100px;width:100%;position:relative}.lightbox img{display:block;width:100%;max-height:78vh;object-fit:contain}.lightbox-meta{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-top:18px}.lightbox-meta span{font-family:var(--condensed);color:var(--yellow);text-transform:uppercase;letter-spacing:.1em}.lightbox-meta strong{font-family:var(--condensed);font-size:25px;font-weight:400}.lightbox-close{position:absolute;right:25px;top:18px;border:0;background:none;color:#fff;font-size:45px;cursor:pointer;z-index:2}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:64px;height:64px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(16,16,16,.35);backdrop-filter:blur(8px);color:#fff;font-family:Arial,sans-serif;font-size:44px;font-weight:300;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;transition:.25s}
.lightbox-nav:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black);transform:translateY(-50%) scale(1.06)}
.lightbox-prev{left:28px}.lightbox-next{right:28px}
body.lightbox-active{overflow:hidden}

/* MOBILE NAVIGATION */
.mobile-menu-toggle{
  display:none;
  position:absolute;
  left:5vw;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  padding:8px 5px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  z-index:31;
}
.mobile-menu-toggle span{
  display:block;
  width:27px;
  height:2px;
  margin:5px 0;
  background:currentColor;
  transition:transform .25s ease, opacity .25s ease;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{
  position:fixed;
  top:68px;
  left:0;
  right:0;
  z-index:19;
  background:rgba(16,16,16,.98);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(-12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.mobile-nav.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  padding:10px 5vw 18px;
}
.mobile-nav-links a,.mobile-nav-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:52px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:#fff;
  font-family:var(--condensed);
  font-size:22px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
}
.mobile-nav-links a:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-nav-links a:hover,.mobile-nav-contact:hover{color:var(--yellow)}
.mobile-nav-contact{color:var(--yellow);border-bottom:0}
body.mobile-menu-active{overflow:hidden}
@media(max-width:950px){
  .mobile-menu-toggle{display:block}
}
@media(min-width:621px) and (max-width:950px){
  .mobile-nav-links{padding-left:6vw;padding-right:6vw}
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;gap:2px;align-items:stretch}}
@media(max-width:620px){
  .mobile-nav{top:68px;max-height:calc(100vh - 68px);overflow:auto}
  .mobile-nav-links a,.mobile-nav-contact{font-size:20px;min-height:50px}
}

@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
 .lightbox-nav{width:48px;height:48px;font-size:43px}.lightbox-prev{left:10px}.lightbox-next{right:10px}
 .lightbox{padding:70px 52px 30px}
}
@media(max-width:950px){
 nav{display:none}.site-header{height:68px}
 .hero{min-height:570px;height:78vh}.hero-content{padding:125px 6vw 5vh}
 .section{padding:90px 6vw}.section-head.split,.about-grid{grid-template-columns:1fr;gap:35px}
 .brand-grid{grid-template-columns:repeat(2,1fr)}.social-grid{grid-template-columns:repeat(2,1fr)}
 .project-card{grid-template-columns:1fr}.project-copy{max-width:600px}
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
 .hero h1{font-size:11vw;top:105px}.section{padding:70px 5vw}.services{grid-template-columns:1fr}
 .brand-grid,.editorial-grid,.social-grid{grid-template-columns:1fr}.brand-card{min-height:260px}
 .section-head{margin-bottom:45px}.section-head h2{font-size:18vw}
 .client-title{display:block}.client-title h3{margin-top:10px}
 .cta h2{font-size:18vw}.cta{padding:110px 5vw 90px}
 footer{padding:22px 5vw;gap:20px;flex-direction:column}
}


/* DIGITAL — compact 4-up rectangular thumbnails */
#digital .social-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
#digital .social-card{
  min-width:0;
  cursor:pointer;
}
#digital .social-card img{
  width:100%;
  aspect-ratio:1676 / 766;
  object-fit:cover;
  display:block;
  margin-bottom:14px;
  transition:transform .45s ease,opacity .45s ease;
}
#digital .social-card:hover img{
  transform:scale(1.02);
  opacity:.9;
}
#digital .social-card h3{
  font-size:22px;
}
@media(max-width:900px){
  #digital .social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
  #digital .social-grid{grid-template-columns:1fr;gap:28px}
}


/* BRANDS lightbox description alignment */
#brands ~ .lightbox .lightbox-meta{
  width:min(82vw, 900px);
  margin:18px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}
#brands ~ .lightbox .lightbox-meta span{
  text-align:left;
}
#brands ~ .lightbox .lightbox-meta strong{
  text-align:right;
  margin-left:auto;
}


.lightbox.brands-lightbox .lightbox-meta{
  width:min(82vw, 900px);
  margin:18px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}
.lightbox.brands-lightbox .lightbox-meta span{
  text-align:left;
}
.lightbox.brands-lightbox .lightbox-meta strong{
  text-align:right;
  margin-left:auto;
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
  .lightbox.brands-lightbox .lightbox-meta{
    width:100%;
    gap:16px;
  }
}


/* Contact form popup */
.menu-contact{
  border:0;
  cursor:pointer;
}
.contact-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}
.contact-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.contact-modal-panel{
  position:relative;
  width:min(680px,92vw);
  max-height:90vh;
  overflow:auto;
  padding:48px;
  background:#f2f0e9;
  color:var(--black);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  transform:translateY(25px);
  transition:transform .35s ease;
}
.contact-modal.is-open .contact-modal-panel{
  transform:translateY(0);
}
.contact-modal-close{
  position:absolute;
  top:15px;
  right:20px;
  border:0;
  background:none;
  color:var(--black);
  font-size:38px;
  line-height:1;
  cursor:pointer;
}
.contact-modal-eyebrow{
  margin:0 0 10px;
  font-family:var(--condensed);
  font-size:14px;
  letter-spacing:.14em;
}
.contact-modal-panel h2{
  margin:0 0 30px;
  font-family:var(--condensed);
  font-size:clamp(48px,7vw,82px);
  font-weight:400;
  line-height:.85;
  text-transform:uppercase;
}
.contact-modal-panel h2 em{
  color:var(--yellow);
  font-style:normal;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-form label span{
  font-family:var(--condensed);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.35);
  border-radius:0;
  padding:11px 0;
  background:transparent;
  color:var(--black);
  font:inherit;
  outline:none;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-bottom-color:var(--yellow);
}
.contact-submit{
  align-self:flex-start;
  margin-top:8px;
  padding:14px 22px;
  border:1px solid var(--black);
  background:var(--black);
  color:#fff;
  font-family:var(--condensed);
  font-size:16px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.25s ease;
}
.contact-submit:hover{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--black);
}
body.contact-modal-active{
  overflow:hidden;
}

.contact-details{margin-top:34px;padding-top:25px;border-top:1px solid rgba(0,0,0,.14);display:flex;flex-direction:column;gap:18px}
.contact-details a{color:var(--black);text-decoration:none;transition:color .2s ease}
.contact-details a:hover{color:var(--yellow)}
.contact-email{font-family:var(--condensed);font-size:18px;letter-spacing:.04em}
.contact-phones{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--condensed);font-size:16px;letter-spacing:.04em}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:4px}
.contact-links a{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-width:175px;padding:12px 15px;border:1px solid rgba(0,0,0,.28);font-family:var(--condensed);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.contact-links a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.contact-links span{font-size:17px;line-height:1;color:var(--yellow);transition:transform .2s ease,color .2s ease}.contact-links a:hover span{color:var(--black);transform:translateX(3px)}
@media(max-width:620px){
  .contact-email{font-size:16px}
  .contact-phones{flex-direction:column;gap:8px}
  .contact-links{display:grid;grid-template-columns:1fr;}
  .contact-links a{width:100%;box-sizing:border-box}
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
  .contact-modal{padding:18px}
  .contact-modal-panel{padding:38px 25px 30px}
}

/* Premium, restrained motion */
:root{--ease-classy:cubic-bezier(.22,.61,.36,1);--ease-soft:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.hero .hero-content{animation:heroIn 1.1s var(--ease-classy) both}
.hero .hero-bottom{animation:heroBottomIn .9s .3s var(--ease-classy) both}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroBottomIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.reveal-section,.reveal-item{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease-classy),transform .85s var(--ease-classy);will-change:opacity,transform}
.reveal-section.is-visible,.reveal-item.is-visible{opacity:1;transform:translateY(0)}
.reveal-item:nth-child(2){transition-delay:.06s}.reveal-item:nth-child(3){transition-delay:.12s}.reveal-item:nth-child(4){transition-delay:.18s}.reveal-item:nth-child(5){transition-delay:.24s}.reveal-item:nth-child(6){transition-delay:.30s}

.project-card img,.brand-card img,.social-card img{transition:transform .75s var(--ease-soft),filter .5s ease,opacity .4s ease}
.project-card:hover img,.brand-card:hover img,.social-card:hover img{transform:scale(1.025)}
.menu-contact:hover{transform:translateY(-2px)}
.lightbox.is-open .lightbox-inner{animation:lightboxIn .45s var(--ease-soft) both}
@keyframes lightboxIn{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.contact-modal.is-open .contact-modal-panel{animation:contactIn .5s var(--ease-soft) both}
@keyframes contactIn{from{opacity:0;transform:translateY(18px) scale(.987)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-section,.reveal-item{opacity:1;transform:none}}

.title-yellow{
  color:var(--yellow) !important;
}




/* ABOUT — six equal capabilities spanning the exact photo + biography width */
#about > .services{
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#about > .services .service{
  min-width:0;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:15px;
  padding:24px 18px 24px 0;
  border-bottom:1px solid var(--line);
}
#about > .services .service + .service{
  border-left:1px solid var(--line);
  padding-left:18px;
}
#about > .services .service-no{font-family:var(--condensed);color:#aaa}
#about > .services .service h3{font-family:var(--condensed);font-size:22px;font-weight:500;margin:0 0 6px;text-transform:uppercase;line-height:1.05}
#about > .services .service p{margin:0;font-size:11px;line-height:1.45;color:#777}
@media(max-width:950px){
  #about > .services{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){
  #about > .services{grid-template-columns:1fr 1fr}
}

/* ABOUT — clean six-capability row with no divider lines */
#about .services{
  border-top: none !important;
  border-bottom: none !important;
}
#about .services .service,
#about .services .service + .service{
  border: none !important;
}

/* FINAL ABOUT / CLIENT STRIP POSITION */
#about{
  padding-bottom:50px !important;
}
#about > .services{
  margin-bottom:0 !important;
}
.experience-strip{
  position:relative;
  margin-top:0 !important;
  margin-bottom:32px;
  z-index:2;
  overflow:hidden;
  transform:none !important;
}

/* MOBILE FIX — keep Brands cards visible even when scroll-reveal observers are delayed */
@media (max-width:620px){
  /* Brands must not depend on the scroll-reveal observer on mobile.
     The section itself was still opacity:0, which made all cards appear empty. */
  #brands.reveal-section,
  #brands .brand-card.reveal-item{
    opacity:1 !important;
    transform:none !important;
    visibility:visible !important;
  }
  #brands .brand-card.reveal-item img{
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* BRANDING — 12 logo-led project thumbnails with collage popups */
.branding-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;column-gap:75px !important;row-gap:38px !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;}
.branding-card{display:block !important;cursor:pointer !important;pointer-events:auto !important;min-width:0;}
.branding-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:75px;row-gap:38px;width:100%;margin-left:0;margin-right:0}
.branding-card{cursor:pointer;min-width:0}.branding-thumb{aspect-ratio:16/7;background:#f2f1ed;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(0,0,0,.08);transition:transform .45s ease,background .35s ease}.branding-thumb img{max-width:62%;max-height:58%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .45s ease}.branding-card:hover .branding-thumb{transform:translateY(-4px);background:#fff}.branding-card:hover .branding-thumb img{transform:scale(1.04)}
.branding-card-meta{padding:14px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px}.branding-card-meta span{font-family:var(--condensed);font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}.branding-card-meta small{display:block;margin:0;font-family:var(--condensed);font-size:10px;line-height:1.1;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:1;text-align:right;white-space:nowrap}.branding-collage{display:none}
.branding-modal{position:fixed;inset:0;background:rgba(15,15,15,.96);z-index:1000;display:none;align-items:center;justify-content:center;padding:70px 7vw 45px}.branding-modal.is-open{display:flex}.branding-modal-inner{width:min(1100px,100%);max-height:calc(100vh - 115px);overflow:auto}.branding-modal-head{display:flex;justify-content:space-between;align-items:flex-end;color:#fff;margin:0 0 18px;gap:30px}.branding-modal-head span{font-size:11px;letter-spacing:.12em;color:var(--yellow)}.branding-modal-head strong{font-family:var(--condensed);font-size:32px;font-weight:500;display:block}.branding-modal-date{display:block;color:var(--yellow);font-size:11px;letter-spacing:.1em;margin-top:5px}.branding-modal-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 24px}.branding-modal-details>div{border-top:1px solid rgba(255,255,255,.2);padding-top:10px}.branding-modal-details span{font-size:10px;letter-spacing:.12em;color:var(--yellow);font-weight:600}.branding-modal-details p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.5}.branding-modal-collage{column-count:3;column-gap:0;line-height:0;background:#111}.branding-modal-collage img{width:100%;height:auto;display:block;object-fit:contain;min-width:0;min-height:0}.branding-modal-collage img:hover{filter:brightness(.96)}.branding-modal-close,.branding-modal-nav{position:fixed;border:0;background:transparent;color:#fff;cursor:pointer;z-index:1002}.branding-modal-close{top:20px;right:30px;font-size:42px;font-weight:200;line-height:1}.branding-modal-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:48px;line-height:42px}.branding-modal-prev{left:25px}.branding-modal-next{right:25px}.branding-modal-nav:hover{background:var(--yellow);color:#222;border-color:var(--yellow)}body.branding-modal-active{overflow:hidden}
@media(max-width:950px){.branding-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:95%}.branding-modal{padding-left:80px;padding-right:80px}.branding-modal-nav{width:46px;height:46px;font-size:40px}.branding-modal-prev{left:18px}.branding-modal-next{right:18px}}
@media(max-width:980px) and (min-width:621px){.branding-modal-collage{column-count:2;column-gap:0}}
@media(max-width:620px){.branding-grid{grid-template-columns:1fr;gap:34px;width:100%}.branding-thumb{aspect-ratio:16/8}.branding-card-meta{gap:12px}.branding-card-meta span{font-size:11px}.branding-card-meta small{font-size:9px}.branding-modal{padding:72px 18px 30px}.branding-modal-head strong{font-size:25px}.branding-modal-details{grid-template-columns:1fr;gap:16px;margin-bottom:18px}.branding-modal-details p{font-size:12px}.branding-modal-collage{column-count:1;column-gap:0}.branding-modal-nav{top:auto;bottom:18px;transform:none;width:46px;height:46px}.branding-modal-prev{left:18px}.branding-modal-next{right:18px}.branding-modal-inner{max-height:calc(100vh - 140px)}}


/* Branding section title */
.branding-section .section-head h2 .branding-title-yellow { color: #f0d400 !important; font-style: normal; }
.branding-section .section-head h2 .branding-title-grey { color: #3b3b3b !important; font-style: normal; }


/* BRANDING AT SCALE — seamless editorial collage */












@media (max-width: 900px){
  .branding-modal-collage{grid-template-columns:repeat(6,minmax(0,1fr))}
  .branding-modal-collage img:nth-child(1){grid-column:span 4;grid-row:span 2}
  .branding-modal-collage img:nth-child(2),
  .branding-modal-collage img:nth-child(3){grid-column:span 2}
  .branding-modal-collage img:nth-child(n+4){grid-column:span 2}
}
@media (max-width: 600px){
  .branding-modal-collage{grid-template-columns:1fr}
  .branding-modal-collage img{grid-column:span 1 !important;grid-row:auto !important;aspect-ratio:auto !important;height:auto}
}

.branding-modal-collage + *{margin-top:0}

/* Final override: visible 2mm-style separation between every collage image */
.branding-modal-collage {
  gap: 2px !important;
  row-gap: 2px !important;
  column-gap: 2px !important;
}
.branding-modal-collage img {
  margin: 0 !important;
}
@media (max-width: 900px) {
  .branding-modal-collage {
    gap: 2px !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
  }
}
@media (max-width: 600px) {
  .branding-modal-collage {
    gap: 2px !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
  }
}

/* FINAL IMAGE INTEGRITY RULES — never crop, never distort */
.branding-modal-collage {
  align-items: start !important;
  grid-auto-rows: auto !important;
}
.branding-modal-collage img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

  .branding-modal-collage.branding-project-5 img{
    width:100% !important;
    margin-bottom:2px !important;
  }
}

/* JEDDAH E-PRIX 2025 — independent editorial columns preview */
.branding-modal-collage.branding-project-5{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:2px !important;
  align-items:start !important;
  background:#111;
}
.branding-modal-collage.branding-project-5 .branding-gallery-column{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.branding-modal-collage.branding-project-5 .branding-gallery-column img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
  margin:0 !important;
}
@media(max-width:620px){
  .branding-modal-collage.branding-project-5{
    display:block !important;
  }
  .branding-modal-collage.branding-project-5 .branding-gallery-column{
    display:block;
  }
  .branding-modal-collage.branding-project-5 .branding-gallery-column img{
    margin-bottom:2px !important;
  }
}

/* PROJECT 05 — absolute no-crop column treatment */
.branding-modal-collage.branding-project-5 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 2px !important;
}
.branding-modal-collage.branding-project-5 .branding-gallery-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: start !important;
  height: max-content !important;
  gap: 2px !important;
}
.branding-modal-collage.branding-project-5 .branding-gallery-column img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  object-position: initial !important;
  flex: none !important;
  margin: 0 !important;
}

/* On mobile, stack the columns without changing any image's natural ratio. */
@media (max-width: 620px) {
  .branding-modal-collage.branding-project-5 {
    display: block !important;
  }
  .branding-modal-collage.branding-project-5 .branding-gallery-column {
    display: block !important;
    height: auto !important;
  }
  .branding-modal-collage.branding-project-5 .branding-gallery-column img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 2px !important;
  }
}

/* Project 05: balanced columns, natural image height, no crop */
.branding-modal-collage.branding-project-5,
.branding-modal-collage.branding-project-5 .branding-gallery-column {
  align-items: stretch !important;
  align-self: start !important;
}
.branding-modal-collage.branding-project-5 .branding-gallery-column img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  flex: none !important;
}

/* Project logos in BRANDING thumbnails */
.branding-card-logo-image{
  display:block;
  width:72%;
  max-width:260px;
  max-height:72%;
  height:auto;
  object-fit:contain;
  object-position:center;
  margin:auto;
}
.branding-logo-placeholder.has-project-logo,
.branding-card-logo.has-project-logo,
.branding-logo.has-project-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:700px){
  .branding-card-logo-image{
    width:68%;
    max-width:220px;
    max-height:68%;
  }
}

/* Only the uploaded project logo is shown; legacy template logos are suppressed. */
.branding-card .branding-card-logo-image ~ img,
.branding-card .branding-logo-placeholder > img:not(.branding-card-logo-image) {
  display:none !important;
}

/* Branding project logos — fill the full thumbnail while preserving proportions */
.branding-card .branding-card-logo-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width:700px){
  .branding-card .branding-card-logo-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* Final branding thumbnail logo treatment */
.branding-thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.branding-thumb > img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* BRAND lightbox: description follows the exact displayed logo width */
.lightbox.brands-lightbox .lightbox-meta{
  width:100% !important;
  max-width:none !important;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}
.lightbox.brands-lightbox .lightbox-meta span{ text-align:left; }
.lightbox.brands-lightbox .lightbox-meta strong{ text-align:right; margin-left:auto; }

/* BRANDS — all 24 enlarged logos use the same 05 / 24 presentation size */
.lightbox.brands-lightbox .lightbox-inner{
  width:min(78vh, 82vw) !important;
  max-width:none !important;
  min-width:0 !important;
}
.lightbox.brands-lightbox .lightbox-inner > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
}
.lightbox.brands-lightbox .lightbox-meta{
  width:100% !important;
  box-sizing:border-box !important;
}
@media (max-width:700px){
  .lightbox.brands-lightbox .lightbox-inner{
    width:86vw !important;
  }
}

/* FINAL MOBILE FIX — BRANDING project cards */
@media (max-width: 620px) {
  .branding-section .branding-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    column-gap: 0 !important;
    row-gap: 34px !important;
  }

  .branding-section .branding-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .branding-section .branding-card-meta {
    display: block !important;
    width: 100% !important;
    padding-top: 10px !important;
  }

  .branding-section .branding-card-meta span,
  .branding-section .branding-card-meta small {
    display: block !important;
    white-space: normal !important;
    width: 100% !important;
    text-align: left !important;
  }

  .branding-section .branding-card-meta span {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .branding-section .branding-card-meta small {
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

/* FINAL MOBILE TYPOGRAPHY + LAYOUT FIX — 2026-10-03 */
@media (max-width: 620px) {
  /* BRANDING: one project per row so the project name/date can never overlap */
  .branding-section .branding-grid,
  .branding-section .branding-grid.branding-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 34px !important;
  }

  .branding-section .branding-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .branding-section .branding-card-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding: 12px 0 0 !important;
    box-sizing: border-box !important;
  }

  .branding-section .branding-card-meta span,
  .branding-section .branding-card-meta small {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
    color: #3b3b3b !important;
    box-sizing: border-box !important;
  }

  .branding-section .branding-card-meta span {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .branding-section .branding-card-meta small {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  /* BRANDS: button text must stay dark grey on mobile, not browser-default blue */
  #brands .brand-card,
  #brands .brand-card:visited,
  #brands .brand-card:hover,
  #brands .brand-card:active,
  #brands .brand-card:focus {
    color: #3b3b3b !important;
    -webkit-text-fill-color: #3b3b3b !important;
    text-decoration: none !important;
  }

  #brands .brand-card .brand-meta,
  #brands .brand-card .brand-meta strong,
  #brands .brand-card .brand-meta small {
    color: #3b3b3b !important;
    -webkit-text-fill-color: #3b3b3b !important;
  }

  #brands .brand-card .brand-meta strong {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
}

/* Mobile-only instruction for the Branding project thumbnails */
.branding-mobile-hint {
  display: none;
}

@media (max-width: 620px) {
  .branding-mobile-hint {
    display: block;
    margin: 10px 0 0;
    font-family: var(--condensed);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3b3b3b !important;
    font-weight: 500;
  }
}

/* Mobile-only interaction hints for BRANDS & IDENTITIES and BRANDING */
.mobile-section-hint {
  display: none;
}

@media (max-width: 620px) {
  /* Keep the section description visually closer to the mobile tap instruction. */
  #brands .section-head.split,
  #branding .section-head.split {
    gap: 14px !important;
  }

  .mobile-section-hint {
    display: block;
    margin: 18px 0 28px;
    font-family: var(--condensed);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3b3b3b !important;
    font-weight: 500;
  }

  /* Keep the hint comfortably separated from the first logo/thumbnail. */
  .mobile-brands-hint,
  .mobile-branding-hint {
    margin-top: 18px;
    margin-bottom: 30px;
  }
}

/* MOBILE SERVICES ALIGNMENT FIX */

@media (max-width:620px){
  #about > .services .service:nth-child(odd){
    padding-left:0 !important;
  }
  #about > .services .service:nth-child(even){
    padding-left:18px !important;
  }
}

/* MOBILE BRANDS & IDENTITIES — compact two-column logo gallery */
@media (max-width:620px){
  #brands .brand-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:12px !important;
    row-gap:12px !important;
    width:100% !important;
  }

  #brands .brand-card{
    min-height:190px !important;
    height:auto !important;
    padding:24px 10px 18px !important;
    justify-content:center !important;
  }

  #brands .brand-card img{
    width:88% !important;
    max-width:none !important;
    height:96px !important;
    object-fit:contain !important;
    margin:0 auto 12px !important;
  }

  #brands .brand-card .brand-index{
    top:12px !important;
    left:12px !important;
    font-size:10px !important;
  }

  #brands .brand-card .brand-meta{
    width:100% !important;
    text-align:center !important;
  }

  #brands .brand-card .brand-meta strong{
    display:block !important;
    font-size:14px !important;
    line-height:1.08 !important;
    letter-spacing:.02em !important;
  }

  #brands .brand-card .brand-meta small{
    display:block !important;
    margin-top:5px !important;
    font-size:9px !important;
    line-height:1.15 !important;
  }
}