/* Portfolio responsive rebuild - Sept 2026
   Final override layer: navigation clarity, project pages, mobile media and touch UX. */

:root{
  --portfolio-bg:#101113;
  --portfolio-panel:#17191d;
  --portfolio-panel-2:#1d2025;
  --portfolio-text:#f5f5f4;
  --portfolio-muted:#a8adb5;
  --portfolio-line:rgba(255,255,255,.11);
  --portfolio-safe-bottom:max(14px,env(safe-area-inset-bottom));
}

/* Keep fixed project navigation from covering content. */
body.project-page{padding-bottom:88px;background:var(--portfolio-bg)}
body.project-page .studio-footer{padding-bottom:44px}

/* Project hero: explicit return path and tighter reading order. */
.project-page .project-hero{padding-top:124px!important;padding-bottom:58px!important}
.project-back-link{
  display:inline-flex;align-items:center;min-height:44px;margin:0 0 36px;
  color:#d7d9dd;font-size:13px;letter-spacing:.01em;
  transition:opacity .2s ease,transform .2s ease;
}
.project-back-link:hover{opacity:.68;transform:translateX(-2px)}
.project-page .project-hero-grid{align-items:start!important}
.project-page .project-hero-title .hero-note{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#a9adb5}
.project-page .project-hero-role{background:transparent!important;border-radius:0!important;padding:0!important}
.project-page .project-hero-role .label{display:block;margin-bottom:14px}
.project-page .project-hero-role h3{font-size:clamp(19px,1.55vw,25px);line-height:1.23;margin-bottom:16px}
.project-page .project-hero-role p{font-size:15px;line-height:1.65;max-width:600px}

/* Live products get a clear case-study CTA rather than sending users away from the home grid. */
.live-project-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:50px;margin-top:26px;padding:0 18px;border:1px solid rgba(255,255,255,.28);
  color:#f5f5f4;font-size:14px;font-weight:560;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.live-project-cta:hover{background:#f5f5f4;color:#101113;border-color:#f5f5f4;transform:translateY(-1px)}
.live-project-cta span{font-size:19px;line-height:1}
.live-project-cta-large{min-width:min(100%,310px);min-height:58px;font-size:16px;padding-inline:20px;margin-top:0}
.product-preview .project-hero-image-inner{background:#0c0d0f!important}
.product-preview video{width:100%!important;max-height:min(78svh,900px)!important;object-fit:contain!important;background:#0c0d0f}
.product-page-cta{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;
  margin-top:64px;padding:34px 0 0;border-top:1px solid var(--portfolio-line)
}
.product-page-cta .eyebrow{display:block;color:var(--portfolio-muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.product-page-cta h2{font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.05}

/* Case-study copy should be scannable on laptop and not become giant on mobile. */
.project-page .case-study{max-width:1180px;padding-top:72px!important;padding-bottom:72px!important}
.project-page .case-study-blurb{max-width:900px;font-size:clamp(24px,2.6vw,38px)!important;line-height:1.2!important;margin-bottom:54px!important}
.project-page .cs-section{grid-template-columns:minmax(150px,220px) minmax(0,1fr)!important;gap:clamp(28px,5vw,74px)!important;padding:34px 0!important}
.project-page .cs-section h2{font-size:18px!important;font-style:normal!important;letter-spacing:-.01em}
.project-page .cs-section .body{max-width:780px;line-height:1.7}

/* Gallery: clear media controls on touch widths, independent from project navigation. */
.cs-gallery{position:relative}
.gallery-toolbar{display:none}

/* Related work is content, not project navigation. */
.more-work{padding-top:56px!important;padding-bottom:66px!important}
.more-work-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.more-work-heading h2{margin:0!important}
.more-work-hint{display:none;color:#858b95;font-size:12px}
.more-work-card{display:block;outline-offset:5px}
.more-work-card img{transition:opacity .2s ease}
.more-work-card:hover img{opacity:.84}

/* Fixed Previous / Next PROJECT rail - deliberately visually different from gallery arrows. */
.project-browse{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;
  min-height:76px;background:rgba(20,22,25,.94);color:#f2f3f4;border-top:1px solid var(--portfolio-line);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
}
.project-browse-link{
  min-width:0;display:flex;align-items:center;gap:16px;padding:11px clamp(18px,2.8vw,42px);
  color:inherit;transition:background .18s ease;
}
.project-browse-link:hover{background:rgba(255,255,255,.055)}
.project-browse-next{justify-content:flex-end;text-align:right}
.project-browse-arrow{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:20px;line-height:1}
.project-browse-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.project-browse-copy small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8f949c}
.project-browse-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:520;color:#eef0f2}
.project-browse-status{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:128px;padding:0 20px;border-left:1px solid var(--portfolio-line);border-right:1px solid var(--portfolio-line);color:#b6bac1;font-size:11px;letter-spacing:.06em}
.project-keyboard-hint{margin-top:3px;color:#777e88;font-size:9px;letter-spacing:.08em;text-transform:uppercase}

/* Existing image viewer: explicitly label local media navigation. */
.lightbox{background:rgba(7,8,10,.96)!important}
.lightbox-controls{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex!important;align-items:center;gap:9px;padding:8px 10px;background:rgba(28,30,34,.88);
  border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.lightbox-controls .lightbox-label{margin-right:8px;color:#aeb3bb;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.lightbox-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font-size:20px;cursor:pointer}
.lightbox-controls [aria-live]{min-width:48px;text-align:center;color:#d4d7dc;font-size:12px}

/* Homepage: built products now open their case study first. */
.portfolio-home .project-card-action{display:none!important}
.portfolio-home .project-card-action span{font-size:17px}

/* Tablet */
@media (max-width:1024px){
  .project-page .project-hero{padding-inline:28px!important}
  .project-page .project-hero-grid{grid-template-columns:1fr 1fr!important;gap:44px!important}
  .project-page .case-study{padding-inline:28px!important}
  .project-browse-copy strong{max-width:24vw}
}

/* Phone / touch rebuild */
@media (max-width:760px){
  body.project-page{padding-bottom:78px}
  body.project-page .site-nav{min-height:64px!important;padding:10px 16px!important;background:rgba(16,17,19,.94)!important;mix-blend-mode:normal!important}
  body.project-page .nav-location{display:none}
  body.project-page .nav-logo{min-height:44px;font-size:16px}
  body.project-page .menu-toggle{min-height:44px}

  .project-page .project-hero{padding:92px 20px 38px!important;min-height:0!important}
  .project-back-link{margin-bottom:28px;font-size:13px}
  .project-page .project-hero-grid{grid-template-columns:1fr!important;gap:30px!important}
  .project-page .project-hero-title{font-size:clamp(42px,12.4vw,64px)!important;line-height:.96!important;letter-spacing:-.055em!important}
  .project-page .project-hero-title .sub{font-size:clamp(20px,6vw,28px)!important;line-height:1.08!important;margin-top:16px!important;max-width:92%}
  .project-page .project-hero-title .hero-note{font-size:10px;margin-bottom:14px}
  .project-page .project-hero-role{padding:0!important}
  .project-page .project-hero-role h3{font-size:19px;line-height:1.28}
  .project-page .project-hero-role p{font-size:15px;line-height:1.58}
  .live-project-cta{width:100%;margin-top:22px;min-height:52px}

  .project-page .project-hero-image{padding:0 0 28px!important}
  .project-page .project-hero-image-inner{padding:0!important;border-radius:0!important}
  .project-page .project-hero-image img,.project-page .project-hero-image video{width:100%!important;max-height:none!important;height:auto!important;object-fit:contain!important}
  .product-preview video{max-height:none!important}

  .project-page .case-study{padding:48px 20px 54px!important}
  .project-page .case-study-blurb{font-size:clamp(24px,7.6vw,32px)!important;line-height:1.15!important;margin-bottom:36px!important}
  .project-page .cs-section{display:block!important;padding:25px 0!important}
  .project-page .cs-section h2{font-size:12px!important;line-height:1.2!important;letter-spacing:.12em!important;text-transform:uppercase;color:#9096a0!important;margin-bottom:13px!important}
  .project-page .cs-section .body,.project-page .cs-section .body p{font-size:16px!important;line-height:1.62!important}
  .project-page .cs-section .body ul{margin-left:20px}
  .project-page .cs-section .body li{margin-bottom:10px}
  .product-page-cta{grid-template-columns:1fr;align-items:start;margin-top:42px;padding-top:26px;gap:22px}
  .product-page-cta h2{font-size:30px}
  .live-project-cta-large{width:100%}

  /* Swipeable project media. Toolbar arrows control ONLY the images in this section. */
  .cs-gallery{padding:42px 0 48px!important;overflow:hidden!important}
  .gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px 16px;color:#f1f2f3}
  .gallery-toolbar-label{display:flex;flex-direction:column;gap:2px}
  .gallery-toolbar-label strong{font-size:14px;font-weight:520}
  .gallery-toolbar-label span{font-size:11px;color:#8f959e}
  .gallery-toolbar-buttons{display:flex;gap:8px}
  .gallery-toolbar button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:transparent;color:#fff;font-size:20px}
  .cs-gallery-inner{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 20px 10px!important;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .cs-gallery-inner::-webkit-scrollbar{display:none}.cs-gallery-inner{scrollbar-width:none}
  .cs-gallery-item,.cs-gallery-item.full{flex:0 0 calc(100vw - 40px)!important;grid-column:auto!important;scroll-snap-align:start;min-width:0}
  .cs-gallery-media,.cs-gallery-item.full .cs-gallery-media{overflow:hidden!important;background:#191b1e!important}
  .cs-gallery-media img,.cs-gallery-media video{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .cs-gallery-item .caption{padding-right:12px;margin-top:10px;font-size:12px;line-height:1.45}

  /* Related projects are a horizontal rail. There are no arrow controls here: tapping a card opens that project. */
  .more-work{padding:42px 0 48px!important;overflow:hidden}
  .more-work-heading{padding:0 20px;margin-bottom:18px}
  .more-work-heading h2{font-size:24px!important}
  .more-work-hint{display:inline!important}
  .more-work-grid{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;padding:0 20px 12px!important;scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .more-work-grid::-webkit-scrollbar{display:none}
  .more-work-card{flex:0 0 min(82vw,360px);scroll-snap-align:start}
  .more-work-card img{width:100%;aspect-ratio:4/3!important;object-fit:contain!important;background:#191b1e}
  .more-work-card h3{font-size:17px;margin-top:12px}.more-work-card p{font-size:13px}

  /* Persistent project navigation: big tap zones, minimal copy, safe-area aware. */
  .project-browse{min-height:calc(64px + var(--portfolio-safe-bottom));grid-template-columns:1fr auto 1fr;padding-bottom:var(--portfolio-safe-bottom)}
  .project-browse-link{padding:8px 12px;gap:9px;min-height:64px}
  .project-browse-arrow{width:40px;height:40px;flex-basis:40px}
  .project-browse-copy small{font-size:9px}
  .project-browse-copy strong{display:none}
  .project-browse-status{min-width:72px;padding:0 10px;font-size:10px}
  .project-keyboard-hint{display:none}
  .project-browse-next .project-browse-copy{align-items:flex-end}

  .lightbox{padding:70px 12px 94px!important}
  .lightbox-controls{bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
  .lightbox-controls .lightbox-label{display:none}

  .portfolio-home .project-card-action{display:inline-flex!important;align-items:center;gap:8px;color:#e3e5e8!important;margin:4px 20px 0!important;min-height:44px;font-size:15px!important}
}

@media (max-width:390px){
  .project-page .project-hero{padding-left:16px!important;padding-right:16px!important}
  .project-page .case-study{padding-left:16px!important;padding-right:16px!important}
  .gallery-toolbar,.more-work-heading{padding-left:16px;padding-right:16px}
  .cs-gallery-inner,.more-work-grid{padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px}
  .cs-gallery-item,.cs-gallery-item.full{flex-basis:calc(100vw - 32px)!important}
  .project-browse-link{padding-inline:8px}
  .project-browse-status{min-width:62px;padding-inline:6px}
}

/* Larger laptop: keep the navigation visible but unobtrusive. */
@media (min-width:761px){
  .project-browse{min-height:74px}
  .more-work-hint{display:none!important}
}

/* If motion is paused by the visitor, layout remains intact. */
.motion-paused .project-card img,.motion-paused .project-card video{transform:none!important}


/* Project hero metadata refinement: plain, readable metadata. No filled pill or grey bar. */
.project-page .project-hero-title .hero-note{
  display:inline-block!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 20px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#d7dbe2!important;
  font-family:var(--sans)!important;
  font-size:11px!important;
  font-weight:560!important;
  line-height:1.35!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.about-hero p{color:#d4d7dd!important}
@media (max-width:760px){
  .project-page .project-hero-title .hero-note{
    margin-bottom:16px!important;
    color:#d9dde4!important;
    font-size:10px!important;
    letter-spacing:.1em!important;
  }
}