/* October 2026: supplied logo, five-slot portfolio and AI positioning. */
.brand{display:block;flex-shrink:0;width:184px;height:auto;line-height:0;letter-spacing:normal}
.brand-logo{display:block;position:relative;width:100%;aspect-ratio:324 / 94;overflow:hidden;mix-blend-mode:screen}
.brand-logo img{position:absolute;width:154.321%;max-width:none;left:-27.16%;top:-217.02%;height:auto}
.nav-wrap{position:relative;max-width:1440px;width:calc(100% - 96px);height:98px;justify-content:center;gap:0}
.header .brand{position:absolute;left:0}
.nav-actions{display:flex;align-items:center;justify-content:center;gap:30px}
.desktop-nav{margin-left:0;gap:29px;font-size:13px;font-weight:700;color:#e9e9eb}
.nav-cta{font-size:12px;font-weight:700;min-height:43px;padding:12px 21px}
.header{background:linear-gradient(#08090af5,#08090a99)}
.portfolio-carousel{--card-width:clamp(330px,29vw,510px);position:relative;max-width:1900px;width:calc(100% - 32px);margin:45px auto 0}
.projects .project-stage{height:calc(var(--card-width) * .67 + 140px);width:100%;max-width:none;margin:0;overflow:hidden}
.projects .project-card{top:25px;width:var(--card-width);left:50%;transform-origin:center center;transition:transform .65s var(--ease),opacity .65s var(--ease);transform:translateX(calc(-50% + var(--shift))) scale(var(--scale));opacity:var(--opacity);z-index:var(--order)}
.projects .is-active{--shift:0%;--scale:1;--opacity:1;--order:5}
.projects .is-before-1{--shift:-77%;--scale:.79;--opacity:.75;--order:4}
.projects .is-after-1{--shift:77%;--scale:.79;--opacity:.75;--order:4}
.projects .is-before-2{--shift:-130%;--scale:.61;--opacity:.42;--order:3}
.projects .is-after-2{--shift:130%;--scale:.61;--opacity:.42;--order:3}
.projects .project-card:not(.is-active):hover{opacity:.95}
.projects .project-card.is-active:hover{opacity:1}
.projects .project-card .project-visual{height:auto;aspect-ratio:366 / 245}
.projects .project-card .project-visual img{width:var(--crop-width);left:var(--crop-left);top:var(--preview-top);max-width:none}
.projects .project-card .portfolio-photo img{width:100%;height:100%;left:0;top:0;object-fit:cover}
.project-caption{min-height:98px}
.empty-project-frame{aspect-ratio:510 / 439;border:1px solid #ffffff2c;border-radius:15px;background:linear-gradient(140deg,#ffffff04,#ffffff01)}
.carousel-edge{position:absolute;top:45%;transform:translateY(-50%);z-index:10;width:50px;height:50px;background:#0c0d0ef2;box-shadow:0 4px 30px #000a;border-color:#ffffff66}
.carousel-edge:hover{transform:translateY(-50%) scale(1.06)}
.carousel-edge-left{left:12px}.carousel-edge-right{right:12px}
.portfolio-bottom{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:-4px}
.portfolio-bottom .project-hint{margin:0}
.portfolio-bottom .project-counter{display:inline;font-size:9px}
#dialog-preview .portfolio-photo{aspect-ratio:1505 / 1045}
#dialog-preview .portfolio-photo img{position:static;display:block;width:100%;max-width:100%;height:auto}
.about-content .about-lead{font-size:27px;line-height:1.35}
.about-content>p:not(.eyebrow):not(.about-lead){font-size:14px;line-height:1.85;margin-top:18px}
.about-tags{margin-top:27px}
.footer-top .brand{width:160px}
@media(max-width:1200px){.nav-wrap{width:calc(100% - 64px)}.header .brand{width:160px}.nav-actions{gap:24px}.desktop-nav{gap:23px;font-size:12px}.nav-cta{font-size:11px;padding:11px 18px}}
@media(max-width:1000px){.header .brand{width:135px}.nav-actions{gap:18px;margin-left:95px}.desktop-nav{gap:19px;font-size:11px}.nav-cta{font-size:10px;min-height:39px}.projects .project-card{--card-width:330px}.portfolio-carousel{--card-width:330px}.carousel-edge{width:43px;height:43px}}
@media(max-width:800px){.nav-wrap{height:82px;width:calc(100% - 48px);justify-content:space-between;gap:20px}.header .brand{position:static;width:155px}.nav-actions{margin-left:auto;gap:0}.desktop-nav{display:none}.nav-cta{margin:0;min-height:39px;padding:10px 17px;font-size:11px}.menu-toggle{width:27px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:transparent;border:0;padding:2px}.menu-toggle span{height:1px;width:22px;background:#ddd;transition:transform .2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mobile-nav{position:absolute;top:82px;left:0;right:0;display:flex;flex-direction:column;background:#101113f9;border-bottom:1px solid #ffffff30;padding:18px 28px 26px;backdrop-filter:blur(15px)}.mobile-nav a{padding:13px 0;font-size:15px;font-weight:600;color:#d0d0d5;border-bottom:1px solid #ffffff0c}.portfolio-carousel{margin-top:34px}.projects .project-card.is-before-2{--shift:-145%}.projects .project-card.is-after-2{--shift:145%}}
@media(max-width:600px){.nav-wrap{width:calc(100% - 36px);gap:14px}.header .brand{width:135px}.nav-cta{font-size:9px;padding:9px 14px;gap:10px}.portfolio-carousel{--card-width:calc(100vw - 104px);width:100%;margin-top:30px}.projects .project-card{--card-width:calc(100vw - 104px);max-width:none;top:20px;width:var(--card-width)}.projects .project-stage{height:calc(var(--card-width) * .67 + 132px)}.projects .is-before-1{--shift:-100%;--scale:.84;--opacity:.55}.projects .is-after-1{--shift:100%;--scale:.84;--opacity:.55}.projects .project-card.is-before-2{--shift:-190%;--scale:.72}.projects .project-card.is-after-2{--shift:190%;--scale:.72}.project-caption{min-height:82px;padding:16px}.project-caption>div>span{font-size:5.5px;letter-spacing:.08em}.project-caption h3{font-size:16px}.project-arrow{width:29px;height:29px}.carousel-edge{width:36px;height:36px;top:42%;border-color:#ffffff70}.carousel-edge-left{left:9px}.carousel-edge-right{right:9px}.carousel-edge svg{width:17px}.portfolio-bottom{margin-top:0;gap:20px}.portfolio-bottom .project-counter{font-size:8px}.empty-project-frame{aspect-ratio:286 / 273}.about-content .about-lead{font-size:24px}.about-content>p:not(.eyebrow):not(.about-lead){font-size:13px}.about-tags span{font-size:9px}.footer-top .brand{width:132px}.footer-top{gap:18px}.footer-top nav{gap:13px;font-size:8px}}
@media(max-width:370px){.header .brand{width:116px}.nav-wrap{gap:10px}.nav-cta{font-size:8px;padding-inline:12px}.project-caption{padding-inline:12px}.project-caption h3{font-size:15px}}

/* Keep the approved artwork intact; make room for the Hero copy. */
.hero-scene{
  inset:auto 0 auto auto;
  top:50%;
  width:80%;
  height:auto;
  transform:translateY(-50%);
  object-fit:contain;
  object-position:center;
}

/* The fixed navigation shares the same content grid as the paragraphs. */
.header{position:fixed}
.nav-wrap{max-width:var(--max);width:min(var(--max),calc(100% - 112px))}
html{scroll-padding-top:114px}
@media(max-width:900px){
  .nav-wrap{width:calc(100% - 48px)}
}
@media(max-width:800px){
  html{scroll-padding-top:98px}
}
@media(max-width:600px){
  .nav-wrap{width:calc(100% - 40px)}
  /* Keep all three devices in view beneath the copy on narrow screens. */
  .hero-scene{
    top:440px;right:0;width:120%;height:auto;transform:none;
    /* Fade only the image edges; keep the device screens sharp. */
    --mobile-hero-mask:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 3%,#000 8%,#000 82%,rgba(0,0,0,.65) 91%,transparent 100%);
    -webkit-mask-image:var(--mobile-hero-mask);
    mask-image:var(--mobile-hero-mask);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
}