/* Ensure glass-class panels use the repaired blur strength */
.glass:not(.site-header),
.service-page-list article.glass {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(20, 23, 18, 0.54) 48%, rgba(5, 7, 5, 0.46)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
}

.work-nav.glass {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(24, 28, 21, 0.54), rgba(5, 7, 5, 0.44)) !important;
  backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
}


/* Screenshot-led precision repair: glass depth, fluid type and centered icons */
.page-hero-content,
.work-nav,
.service-page-list article,
.service-callout > div,
.about-story,
.about-facts,
.values > div,
.about-quote blockquote,
.contact-copy,
.contact-card,
.home-cta > div,
.hero-action-panel,
.hero-card,
.feature-card > div,
.view-chip,
.project-dialog {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(20, 23, 18, 0.54) 48%, rgba(5, 7, 5, 0.46)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
}

.work-nav {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(24, 28, 21, 0.54), rgba(5, 7, 5, 0.44)) !important;
  border-color: rgba(224, 175, 54, 0.3) !important;
  backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
}

.cinema-backdrop .cinema-stage {
  opacity: 0.28 !important;
  filter: blur(5px) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.72)) saturate(0.86) !important;
}

.service-page-list article { container-type: inline-size; }
.service-page-list h2 {
  max-width: 100%;
  font-size: clamp(36px, 5cqw, 68px);
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .page-hero-content {
    width: min(1120px, 88vw) !important;
    max-width: min(1120px, 88vw) !important;
    container-type: inline-size;
  }

  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(68px, 11.3cqw, 132px) !important;
  }

  .page-hero-content p {
    width: min(470px, 46%);
    max-width: 100%;
    margin: 30px 0 0 auto !important;
  }
}

@media (max-width: 900px) {
  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 66px) !important;
  }

  .page-hero-content p {
    width: 100% !important;
    max-width: 580px !important;
    margin: 24px 0 0 !important;
  }

  .service-page-list h2 {
    font-size: clamp(34px, 9cqw, 54px) !important;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i) {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    align-self: center;
    line-height: 1;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::before {
    content: "";
    position: absolute;
    inset: 1px;
    width: auto;
    height: auto;
    border: 0;
    background: currentColor;
    clip-path: polygon(38% 0, 100% 0, 100% 62%, 80% 62%, 80% 34%, 14% 100%, 0 86%, 66% 20%, 38% 20%);
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::after {
    content: none;
  }
}


/* Perceptible cinematic glass across panels and category bars */
.glass:not(.site-header),
.feature-card > div,
.view-chip,
.portrait-tag,
.project-dialog {
  background: linear-gradient(135deg, rgba(35, 37, 30, 0.58), rgba(7, 9, 7, 0.42)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.13), inset 0 -1px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(20px) saturate(1.38) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.38) !important;
}

.work-nav.glass {
  background: linear-gradient(120deg, rgba(34, 37, 29, 0.54), rgba(5, 7, 5, 0.4)) !important;
  border-color: rgba(224, 175, 54, 0.3) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(26px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
}


/* Monochrome mobile action icons and iPhone-style glass dock */
@media (max-width: 900px) {
  .site-header nav {
    overflow: hidden !important;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(38, 40, 33, 0.62), rgba(7, 8, 7, 0.5)) !important;
    border-color: rgba(224, 175, 54, 0.32) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(30px) saturate(1.65) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.65) !important;
  }

  .site-header nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.16), transparent 42%), linear-gradient(110deg, transparent 28%, rgba(224, 175, 54, 0.07) 50%, transparent 72%);
  }

  .site-header nav a { position: relative; z-index: 1; }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i) {
    position: relative;
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    color: currentColor;
    font-size: 0 !important;
    font-style: normal;
    line-height: 1;
    -webkit-text-fill-color: currentColor;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 3px;
    width: 11px;
    height: 1.8px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
  }
}


/* Keep the mobile dock anchored to the device viewport */
@media (max-width: 900px) {
  .site-header,
  .site-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header nav {
    position: fixed !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}


/* Mobile inner-page hero correction */
@media (max-width: 900px) {
  .page-hero-content {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    padding: 26px !important;
  }

  .page-hero-content h1 {
    width: 100% !important;
    max-width: none !important;
  }

  .page-hero-content p {
    width: 100% !important;
    max-width: 580px !important;
  }
}

@media (max-width: 600px) {
  .page-hero-content { padding: 22px !important; }
  .page-hero-content h1 {
    font-size: clamp(48px, 15vw, 66px) !important;
    line-height: 0.86 !important;
  }
}
/* Elio Chalhoub — responsive production layout */
img{display:block;max-width:100%}
:where(main,section,article,header,footer,div){min-width:0}

@media(max-width:900px){
  html{scroll-padding-top:88px}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
  .site-header,.site-header.is-scrolled{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;height:58px;padding:0 10px;grid-template-columns:1fr auto;border-radius:12px}
  .site-header nav{position:fixed;z-index:60;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));top:auto;height:62px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px;border:1px solid #ffffff20;border-radius:14px;background:#080a08ed;box-shadow:0 16px 46px #000c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .site-header nav a{min-width:0;min-height:48px;padding:0 5px;display:grid;place-items:center;text-align:center;font-size:10px;border-radius:9px;touch-action:manipulation}
  .site-header nav a.active{background:#c5982e1c;color:var(--bright)}
  .site-header nav a:after{display:none}
  .header-cta{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:0;border-radius:10px}
  .header-cta i{font-size:17px;margin:0}

  .home-hero{min-height:auto;padding:150px 20px 76px;display:flex;flex-direction:column;align-items:stretch;overflow:hidden}
  .hero-copy{width:100%;max-width:680px;margin:0}
  .hero-copy h1{max-width:100%;font-size:clamp(66px,15vw,112px);line-height:.84;overflow-wrap:normal}
  .hero-copy>p{max-width:540px;margin:28px 0 24px;font-size:16px;line-height:1.7}
  .hero-actions{width:100%;max-width:540px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions a{justify-content:center;text-align:center}
  .hero-card{position:relative;inset:auto;width:100%;max-width:540px;margin:36px 0 0;padding:22px;gap:16px}
  .vertical-note{display:none}
  .hero-lights i:nth-child(1){width:80vw;height:80vw;right:-25vw}

  .home-intro{padding:96px 20px 54px;grid-template-columns:1fr;gap:26px}
  .home-intro h2,.home-cta h2{font-size:clamp(55px,13vw,86px);line-height:.87}
  .home-intro>p{max-width:620px;font-size:15px;line-height:1.75}
  .feature-grid{padding:0 14px 86px;grid-template-columns:1fr 1fr;gap:14px}
  .feature-card{height:auto;min-height:410px}
  .feature-card:last-child{grid-column:1/3}
  .home-cta{padding:70px 12px}
  .home-cta>div{padding:60px 24px;border-radius:20px}

  .page-hero{min-height:72svh;padding:140px 20px 80px;align-items:flex-end}
  .page-hero-content{width:100%;max-width:760px}
  .page-hero h1{font-size:clamp(62px,14vw,108px);line-height:.84}
  .page-hero p{width:100%;max-width:560px;margin:28px 0 0;font-size:13px;line-height:1.7}
  .page-index{right:16px;font-size:34vw}

  .work-nav{top:82px;margin:-22px 10px 48px;padding:7px;gap:4px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
  .work-nav a{min-height:42px;padding:0 13px;display:flex;align-items:center;scroll-snap-align:start}
  .work-groups{padding:0 20px}
  .work-group{padding:70px 0;scroll-margin-top:150px}
  .work-group>header{grid-template-columns:1fr;gap:20px;margin-bottom:34px}
  .work-group h2{font-size:clamp(50px,12vw,78px)}
  .work-group header p{max-width:600px;margin:0;line-height:1.7}
  .work-cards{grid-template-columns:1fr 1fr;gap:22px 14px}
  .work-card:first-child{grid-column:1/3}
  .work-card:nth-child(2),.work-card:nth-child(3){margin-top:0}
  .work-image,.work-card:first-child .work-image{height:auto;aspect-ratio:4/5}
  .work-card:first-child .work-image{aspect-ratio:16/10}
  .work-end{padding:84px 20px}
  .work-end h2{font-size:clamp(58px,13vw,94px)}
  .work-end p,.work-end .arrow-link{margin-left:0}

  .service-page-list{padding:74px 12px}
  .service-page-list article{grid-template-columns:42px minmax(0,1fr);gap:16px 12px;padding:22px 18px}
  .service-page-list h2{font-size:clamp(38px,9vw,62px);overflow-wrap:anywhere}
  .service-page-list p{line-height:1.7}
  .service-page-list ul{grid-column:2}
  .service-callout{padding:82px 20px;grid-template-columns:1fr;gap:34px}

  .about-page{padding:80px 20px;grid-template-columns:1fr;gap:48px}
  .portrait{width:100%;min-height:0;aspect-ratio:4/5;background-size:cover;background-position:70% center}
  .about-story{padding-top:0}
  .about-story h2{font-size:clamp(50px,11vw,78px)}
  .about-facts{display:grid;grid-template-columns:repeat(3,1fr)}
  .values{padding:80px 20px}
  .values>div{grid-template-columns:1fr 1fr}
  .about-quote{padding:90px 20px}

  .contact-page{min-height:auto;padding:140px 20px 82px;grid-template-columns:1fr;gap:48px;align-items:start}
  .contact-copy h1{font-size:clamp(62px,14vw,108px)}
  .contact-copy>p{font-size:15px;line-height:1.75}
  .big-email{font-size:clamp(18px,4.2vw,28px);overflow-wrap:anywhere}
  .contact-card{width:100%;max-width:620px}

  footer{min-height:0;padding:52px 20px 30px;grid-template-columns:1fr 1fr;gap:24px}
  footer>div{grid-column:1/3;flex-wrap:wrap}
}

@media(max-width:600px){
  .logo b{display:none}
  .home-hero{padding:132px 18px 66px}
  .hero-copy h1{font-size:clamp(58px,19vw,78px)}
  .hero-copy>p{font-size:15px}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions a{width:100%}
  .hero-card{max-width:none}
  .home-intro{padding-top:76px}
  .home-intro h2,.home-cta h2{font-size:clamp(50px,16vw,70px)}
  .feature-grid{grid-template-columns:1fr}
  .feature-card,.feature-card:last-child{grid-column:auto;min-height:410px}
  .home-cta>div{padding:54px 20px}
  .arrow-link{width:100%;font-size:10px;line-height:1.5}

  .page-hero{min-height:82svh;padding:132px 18px 70px}
  .page-hero h1{font-size:clamp(52px,17vw,74px)}
  .page-hero p{font-size:12px}
  .page-index{font-size:44vw}

  .work-groups{padding:0 16px}
  .work-group{padding:60px 0}
  .work-group h2{font-size:clamp(44px,14vw,62px)}
  .work-cards{grid-template-columns:1fr;gap:30px}
  .work-card:first-child{grid-column:auto}
  .work-image,.work-card:first-child .work-image{aspect-ratio:4/5}
  .work-card>div:last-child{gap:12px;align-items:start}
  .work-card h3{font-size:20px}
  .work-end{padding:74px 18px}
  .work-end h2{font-size:clamp(52px,16vw,70px)}

  .service-page-list article{grid-template-columns:28px minmax(0,1fr);padding:20px 14px}
  .service-page-list h2{font-size:clamp(34px,11vw,47px)}
  .service-page-list ul{grid-column:1/3;padding-left:40px}
  .service-callout h2{font-size:clamp(50px,15vw,68px)}

  .about-page{padding:72px 18px}
  .about-story h2{font-size:clamp(46px,14vw,62px)}
  .about-story .large{font-size:18px}
  .about-facts{grid-template-columns:1fr;gap:0}
  .about-facts span{padding:14px 0;border-bottom:1px solid var(--line)}
  .values{padding:72px 18px}
  .values>div{grid-template-columns:1fr}
  .about-quote blockquote{font-size:clamp(36px,11vw,52px)}

  .contact-page{padding:132px 18px 72px}
  .contact-copy h1{font-size:clamp(52px,17vw,74px)}
  .big-email{font-size:clamp(15px,4.4vw,18px)}
  .contact-card{padding:22px 18px}
  footer{grid-template-columns:1fr;padding-bottom:26px}
  footer p{display:block}
  footer>div{grid-column:auto}
}

@media(max-width:370px){
  .site-header nav a{font-size:9px;letter-spacing:.04em}
  .hero-copy h1,.page-hero h1,.contact-copy h1{font-size:17vw}
}

@media(hover:none),(pointer:coarse){
  .play-chip,.view-chip{opacity:1}
  .header-cta,.primary-btn,.glass-btn,.work-card,.feature-card,.socials a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}

/* FINAL VISUAL OVERRIDES — intentionally last */
.glass:not(.site-header),
.page-hero-content,
.service-page-list article.glass,
.service-callout > div,
.about-story,
.about-facts,
.values > div,
.about-quote blockquote,
.contact-copy,
.contact-card,
.home-cta > div,
.hero-action-panel,
.hero-card,
.feature-card > div,
.view-chip,
.project-dialog {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(20,23,18,.54) 48%, rgba(5,7,5,.46)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.16), inset 0 -1px rgba(0,0,0,.3) !important;
  backdrop-filter: blur(30px) saturate(1.45) brightness(.84) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(.84) !important;
}

.work-nav.glass {
  background: linear-gradient(120deg, rgba(255,255,255,.14), rgba(24,28,21,.54), rgba(5,7,5,.44)) !important;
  border-color: rgba(224,175,54,.3) !important;
  backdrop-filter: blur(32px) saturate(1.55) brightness(.86) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(.86) !important;
}

.cinema-backdrop .cinema-stage {
  opacity: .28 !important;
  filter: blur(5px) drop-shadow(0 30px 50px rgba(0,0,0,.72)) saturate(.86) !important;
}

.service-page-list article { container-type: inline-size; }
.service-page-list h2 {
  max-width: 100%;
  font-size: clamp(36px,5cqw,68px);
  overflow-wrap: anywhere;
}

@media (min-width:901px) {
  .page-hero-content {
    width: min(1120px,88vw) !important;
    max-width: min(1120px,88vw) !important;
    container-type: inline-size;
  }
  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(68px,11.3cqw,132px) !important;
  }
  .page-hero-content p {
    width: min(470px,46%);
    max-width: 100%;
    margin: 30px 0 0 auto !important;
  }
}

@media (max-width:900px) {
  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(48px,15vw,66px) !important;
  }
  .page-hero-content p {
    width: 100% !important;
    max-width: 580px !important;
    margin: 24px 0 0 !important;
  }
  .service-page-list h2 {
    font-size: clamp(34px,9cqw,54px) !important;
  }
  .header-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  :is(.primary-btn,.glass-btn,.header-cta,.arrow-link) > :is(span,i) {
    position: relative !important;
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    align-self: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  :is(.primary-btn,.glass-btn,.header-cta,.arrow-link) > :is(span,i)::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: currentColor !important;
    clip-path: polygon(38% 0,100% 0,100% 62%,80% 62%,80% 34%,14% 100%,0 86%,66% 20%,38% 20%) !important;
  }
  :is(.primary-btn,.glass-btn,.header-cta,.arrow-link) > :is(span,i)::after {
    content: none !important;
  }
}


/* Ensure glass-class panels use the repaired blur strength */
.glass:not(.site-header),
.service-page-list article.glass {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(20, 23, 18, 0.54) 48%, rgba(5, 7, 5, 0.46)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
}

.work-nav.glass {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(24, 28, 21, 0.54), rgba(5, 7, 5, 0.44)) !important;
  backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
}


/* Screenshot-led precision repair: glass depth, fluid type and centered icons */
.page-hero-content,
.work-nav,
.service-page-list article,
.service-callout > div,
.about-story,
.about-facts,
.values > div,
.about-quote blockquote,
.contact-copy,
.contact-card,
.home-cta > div,
.hero-action-panel,
.hero-card,
.feature-card > div,
.view-chip,
.project-dialog {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(20, 23, 18, 0.54) 48%, rgba(5, 7, 5, 0.46)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(0.84) !important;
}

.work-nav {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(24, 28, 21, 0.54), rgba(5, 7, 5, 0.44)) !important;
  border-color: rgba(224, 175, 54, 0.3) !important;
  backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(0.86) !important;
}

.cinema-backdrop .cinema-stage {
  opacity: 0.28 !important;
  filter: blur(5px) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.72)) saturate(0.86) !important;
}

.service-page-list article { container-type: inline-size; }
.service-page-list h2 {
  max-width: 100%;
  font-size: clamp(36px, 5cqw, 68px);
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .page-hero-content {
    width: min(1120px, 88vw) !important;
    max-width: min(1120px, 88vw) !important;
    container-type: inline-size;
  }

  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(68px, 11.3cqw, 132px) !important;
  }

  .page-hero-content p {
    width: min(470px, 46%);
    max-width: 100%;
    margin: 30px 0 0 auto !important;
  }
}

@media (max-width: 900px) {
  .page-hero-content h1 {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 66px) !important;
  }

  .page-hero-content p {
    width: 100% !important;
    max-width: 580px !important;
    margin: 24px 0 0 !important;
  }

  .service-page-list h2 {
    font-size: clamp(34px, 9cqw, 54px) !important;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i) {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    align-self: center;
    line-height: 1;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::before {
    content: "";
    position: absolute;
    inset: 1px;
    width: auto;
    height: auto;
    border: 0;
    background: currentColor;
    clip-path: polygon(38% 0, 100% 0, 100% 62%, 80% 62%, 80% 34%, 14% 100%, 0 86%, 66% 20%, 38% 20%);
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::after {
    content: none;
  }
}


/* Perceptible cinematic glass across panels and category bars */
.glass:not(.site-header),
.feature-card > div,
.view-chip,
.portrait-tag,
.project-dialog {
  background: linear-gradient(135deg, rgba(35, 37, 30, 0.58), rgba(7, 9, 7, 0.42)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.13), inset 0 -1px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(20px) saturate(1.38) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.38) !important;
}

.work-nav.glass {
  background: linear-gradient(120deg, rgba(34, 37, 29, 0.54), rgba(5, 7, 5, 0.4)) !important;
  border-color: rgba(224, 175, 54, 0.3) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(26px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
}


/* Monochrome mobile action icons and iPhone-style glass dock */
@media (max-width: 900px) {
  .site-header nav {
    overflow: hidden !important;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(38, 40, 33, 0.62), rgba(7, 8, 7, 0.5)) !important;
    border-color: rgba(224, 175, 54, 0.32) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(30px) saturate(1.65) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.65) !important;
  }

  .site-header nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.16), transparent 42%), linear-gradient(110deg, transparent 28%, rgba(224, 175, 54, 0.07) 50%, transparent 72%);
  }

  .site-header nav a { position: relative; z-index: 1; }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i) {
    position: relative;
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    color: currentColor;
    font-size: 0 !important;
    font-style: normal;
    line-height: 1;
    -webkit-text-fill-color: currentColor;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
  }

  :is(.primary-btn, .glass-btn, .header-cta, .arrow-link) > :is(span, i)::after {
    content: "";
    position: absolute;
    left: 1px;
    bottom: 3px;
    width: 11px;
    height: 1.8px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
  }
}


/* Keep the mobile dock anchored to the device viewport */
@media (max-width: 900px) {
  .site-header,
  .site-header.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header nav {
    position: fixed !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}


/* Mobile inner-page hero correction */
@media (max-width: 900px) {
  .page-hero-content {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    padding: 26px !important;
  }

  .page-hero-content h1 {
    width: 100% !important;
    max-width: none !important;
  }

  .page-hero-content p {
    width: 100% !important;
    max-width: 580px !important;
  }
}

@media (max-width: 600px) {
  .page-hero-content { padding: 22px !important; }
  .page-hero-content h1 {
    font-size: clamp(48px, 15vw, 66px) !important;
    line-height: 0.86 !important;
  }
}
/* Elio Chalhoub — responsive production layout */
img{display:block;max-width:100%}
:where(main,section,article,header,footer,div){min-width:0}

@media(max-width:900px){
  html{scroll-padding-top:88px}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
  .site-header,.site-header.is-scrolled{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;height:58px;padding:0 10px;grid-template-columns:1fr auto;border-radius:12px}
  .site-header nav{position:fixed;z-index:60;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));top:auto;height:62px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px;border:1px solid #ffffff20;border-radius:14px;background:#080a08ed;box-shadow:0 16px 46px #000c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .site-header nav a{min-width:0;min-height:48px;padding:0 5px;display:grid;place-items:center;text-align:center;font-size:10px;border-radius:9px;touch-action:manipulation}
  .site-header nav a.active{background:#c5982e1c;color:var(--bright)}
  .site-header nav a:after{display:none}
  .header-cta{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:0;border-radius:10px}
  .header-cta i{font-size:17px;margin:0}

  .home-hero{min-height:auto;padding:150px 20px 76px;display:flex;flex-direction:column;align-items:stretch;overflow:hidden}
  .hero-copy{width:100%;max-width:680px;margin:0}
  .hero-copy h1{max-width:100%;font-size:clamp(66px,15vw,112px);line-height:.84;overflow-wrap:normal}
  .hero-copy>p{max-width:540px;margin:28px 0 24px;font-size:16px;line-height:1.7}
  .hero-actions{width:100%;max-width:540px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions a{justify-content:center;text-align:center}
  .hero-card{position:relative;inset:auto;width:100%;max-width:540px;margin:36px 0 0;padding:22px;gap:16px}
  .vertical-note{display:none}
  .hero-lights i:nth-child(1){width:80vw;height:80vw;right:-25vw}

  .home-intro{padding:96px 20px 54px;grid-template-columns:1fr;gap:26px}
  .home-intro h2,.home-cta h2{font-size:clamp(55px,13vw,86px);line-height:.87}
  .home-intro>p{max-width:620px;font-size:15px;line-height:1.75}
  .feature-grid{padding:0 14px 86px;grid-template-columns:1fr 1fr;gap:14px}
  .feature-card{height:auto;min-height:410px}
  .feature-card:last-child{grid-column:1/3}
  .home-cta{padding:70px 12px}
  .home-cta>div{padding:60px 24px;border-radius:20px}

  .page-hero{min-height:72svh;padding:140px 20px 80px;align-items:flex-end}
  .page-hero-content{width:100%;max-width:760px}
  .page-hero h1{font-size:clamp(62px,14vw,108px);line-height:.84}
  .page-hero p{width:100%;max-width:560px;margin:28px 0 0;font-size:13px;line-height:1.7}
  .page-index{right:16px;font-size:34vw}

  .work-nav{top:82px;margin:-22px 10px 48px;padding:7px;gap:4px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
  .work-nav a{min-height:42px;padding:0 13px;display:flex;align-items:center;scroll-snap-align:start}
  .work-groups{padding:0 20px}
  .work-group{padding:70px 0;scroll-margin-top:150px}
  .work-group>header{grid-template-columns:1fr;gap:20px;margin-bottom:34px}
  .work-group h2{font-size:clamp(50px,12vw,78px)}
  .work-group header p{max-width:600px;margin:0;line-height:1.7}
  .work-cards{grid-template-columns:1fr 1fr;gap:22px 14px}
  .work-card:first-child{grid-column:1/3}
  .work-card:nth-child(2),.work-card:nth-child(3){margin-top:0}
  .work-image,.work-card:first-child .work-image{height:auto;aspect-ratio:4/5}
  .work-card:first-child .work-image{aspect-ratio:16/10}
  .work-end{padding:84px 20px}
  .work-end h2{font-size:clamp(58px,13vw,94px)}
  .work-end p,.work-end .arrow-link{margin-left:0}

  .service-page-list{padding:74px 12px}
  .service-page-list article{grid-template-columns:42px minmax(0,1fr);gap:16px 12px;padding:22px 18px}
  .service-page-list h2{font-size:clamp(38px,9vw,62px);overflow-wrap:anywhere}
  .service-page-list p{line-height:1.7}
  .service-page-list ul{grid-column:2}
  .service-callout{padding:82px 20px;grid-template-columns:1fr;gap:34px}

  .about-page{padding:80px 20px;grid-template-columns:1fr;gap:48px}
  .portrait{width:100%;min-height:0;aspect-ratio:4/5;background-size:cover;background-position:70% center}
  .about-story{padding-top:0}
  .about-story h2{font-size:clamp(50px,11vw,78px)}
  .about-facts{display:grid;grid-template-columns:repeat(3,1fr)}
  .values{padding:80px 20px}
  .values>div{grid-template-columns:1fr 1fr}
  .about-quote{padding:90px 20px}

  .contact-page{min-height:auto;padding:140px 20px 82px;grid-template-columns:1fr;gap:48px;align-items:start}
  .contact-copy h1{font-size:clamp(62px,14vw,108px)}
  .contact-copy>p{font-size:15px;line-height:1.75}
  .big-email{font-size:clamp(18px,4.2vw,28px);overflow-wrap:anywhere}
  .contact-card{width:100%;max-width:620px}

  footer{min-height:0;padding:52px 20px 30px;grid-template-columns:1fr 1fr;gap:24px}
  footer>div{grid-column:1/3;flex-wrap:wrap}
}

@media(max-width:600px){
  .logo b{display:none}
  .home-hero{padding:132px 18px 66px}
  .hero-copy h1{font-size:clamp(58px,19vw,78px)}
  .hero-copy>p{font-size:15px}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions a{width:100%}
  .hero-card{max-width:none}
  .home-intro{padding-top:76px}
  .home-intro h2,.home-cta h2{font-size:clamp(50px,16vw,70px)}
  .feature-grid{grid-template-columns:1fr}
  .feature-card,.feature-card:last-child{grid-column:auto;min-height:410px}
  .home-cta>div{padding:54px 20px}
  .arrow-link{width:100%;font-size:10px;line-height:1.5}

  .page-hero{min-height:82svh;padding:132px 18px 70px}
  .page-hero h1{font-size:clamp(52px,17vw,74px)}
  .page-hero p{font-size:12px}
  .page-index{font-size:44vw}

  .work-groups{padding:0 16px}
  .work-group{padding:60px 0}
  .work-group h2{font-size:clamp(44px,14vw,62px)}
  .work-cards{grid-template-columns:1fr;gap:30px}
  .work-card:first-child{grid-column:auto}
  .work-image,.work-card:first-child .work-image{aspect-ratio:4/5}
  .work-card>div:last-child{gap:12px;align-items:start}
  .work-card h3{font-size:20px}
  .work-end{padding:74px 18px}
  .work-end h2{font-size:clamp(52px,16vw,70px)}

  .service-page-list article{grid-template-columns:28px minmax(0,1fr);padding:20px 14px}
  .service-page-list h2{font-size:clamp(34px,11vw,47px)}
  .service-page-list ul{grid-column:1/3;padding-left:40px}
  .service-callout h2{font-size:clamp(50px,15vw,68px)}

  .about-page{padding:72px 18px}
  .about-story h2{font-size:clamp(46px,14vw,62px)}
  .about-story .large{font-size:18px}
  .about-facts{grid-template-columns:1fr;gap:0}
  .about-facts span{padding:14px 0;border-bottom:1px solid var(--line)}
  .values{padding:72px 18px}
  .values>div{grid-template-columns:1fr}
  .about-quote blockquote{font-size:clamp(36px,11vw,52px)}

  .contact-page{padding:132px 18px 72px}
  .contact-copy h1{font-size:clamp(52px,17vw,74px)}
  .big-email{font-size:clamp(15px,4.4vw,18px)}
  .contact-card{padding:22px 18px}
  footer{grid-template-columns:1fr;padding-bottom:26px}
  footer p{display:block}
  footer>div{grid-column:auto}
}

@media(max-width:370px){
  .site-header nav a{font-size:9px;letter-spacing:.04em}
  .hero-copy h1,.page-hero h1,.contact-copy h1{font-size:17vw}
}

@media(hover:none),(pointer:coarse){
  .play-chip,.view-chip{opacity:1}
  .header-cta,.primary-btn,.glass-btn,.work-card,.feature-card,.socials a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}