/* Shared responsive layer — keeps desktop look, reflows on tablet/phone */
body{overflow-x:clip}
img,video{max-width:100%}

/* Tablet & small laptop: drop the side anchor rail so content gets full width */
@media (max-width:1100px){
  .jw-anchors,nav[aria-label="Sections"]{display:none!important}
  :has(>.jw-anchors),:has(>x-import>.jw-anchors),:has(>nav[aria-label="Sections"]),:has(>sc-if>x-import>.jw-anchors){display:none!important}
  main{flex-basis:100%!important;max-width:none!important}
  main [style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  header nav[aria-label="Primary"]{gap:24px!important}
}

/* Phone */
@media (max-width:760px){
  html{scroll-padding-top:72px!important}
  header[data-screen-label="Header"]>div{grid-template-columns:minmax(0,1fr) auto!important;height:56px!important;padding-top:0!important;padding-bottom:0!important;gap:12px!important;position:relative}
  header [data-navbtn]{display:flex!important}
  header .jw-talk{padding:4px 14px!important;font-size:13px!important;line-height:20px!important}
  header nav[aria-label="Primary"]{display:none!important;position:absolute;top:56px;left:0;right:0;flex-direction:column!important;align-items:stretch!important;gap:0!important;background:#000;border-bottom:0;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:4px clamp(24px,7vw,100px) 14px;max-height:calc(100vh - 56px);overflow-y:auto}
  header #jw-nav-t:checked~nav[aria-label="Primary"]{display:flex!important}
  header nav[aria-label="Primary"]>a,header nav[aria-label="Primary"] .jw-wl{font-size:12px!important;line-height:18px!important;font-weight:500!important;color:rgb(200,200,200)!important;padding:8px 0!important;border-top:1px solid rgb(38,38,38)}
  header nav[aria-label="Primary"]>a:first-of-type,header nav[aria-label="Primary"]>.jw-work+a{border-top:1px solid rgb(38,38,38)}
  header nav[aria-label="Primary"] .jw-work{flex-direction:column!important;align-items:stretch!important}
  header nav[aria-label="Primary"] .jw-wl{border-top:0!important;pointer-events:none}
  header .jw-menu{display:block!important;position:static!important;padding:0 0 8px!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
  header .jw-menu>div{background:transparent!important;box-shadow:none!important;padding:0!important;gap:32px!important;flex-direction:row!important}
  header .jw-menu>div>span[aria-hidden]{display:none!important}
  header .jw-menu>div>div{gap:0!important}
  header .jw-menu>div>div:empty{display:none}
  header .jw-menu span{color:rgb(150,150,150)!important;font-size:10px!important;line-height:14px!important;padding-bottom:4px!important}
  header .jw-menu a,header .jw-menu span:not([aria-hidden]){opacity:1!important;transform:none!important}
  header .jw-menu>div>div[style*="width: 1px"]{display:none!important}
  header .jw-menu a{color:#fff!important;font-weight:500!important;font-size:12px!important;line-height:18px!important;padding:3px 0!important;width:auto!important}
  header .jw-chev{display:none}

  main [style*="repeat("],main [style*="minmax(0"],form [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  main [style*="grid-template-columns: 32px"]{grid-template-columns:32px minmax(0,1fr)!important}

  /* image callout badges scale down so they don't cover content */
  [style*="width: 28px; height: 28px; border-radius: 50%"]{width:20px!important;height:20px!important;font-size:11px!important;line-height:20px!important}

  /* Home hero */
  [data-screen-label="Home hero"]>div{gap:32px!important}
  [data-screen-label="Home hero"] [style*="min-width: 340px"]{min-width:0!important;flex-basis:100%!important}
  [data-screen-label="Home hero"] [style*="width: 311px"]{width:min(240px,64vw)!important;height:min(240px,64vw)!important}

  /* Featured work: stack cards vertically */
  [data-band="1"]{flex-direction:column!important;overflow-x:visible!important;margin-right:0!important;padding-right:0!important}
  [data-band="1"]>.jw-card,[data-band="1"] .jw-card[style*="484px"]{flex:none!important;width:100%!important;margin-left:0!important;border-left:0!important;border-right:0!important;border-bottom:1px solid var(--border-band)}
  [data-band="1"] .jw-card [style*="width: 484px"]{width:100%!important;height:auto!important;aspect-ratio:484/405}
  [data-band="1"] .jw-card [style*="padding: 0px 24px 0px 80px"]{padding:0 24px!important}
  [data-band="1"] .jw-card h3{font-size:26px!important}
  section[data-screen-label="Featured work"]>div[aria-hidden="true"]{height:48px!important}

  /* Other work list: full-width thumbnail */
  .jw-card>[style*="width: 250px"]{width:100%!important;height:auto!important;aspect-ratio:1/1;max-width:360px}

  /* Testimonials carousel */
  figure[style*="flex: 0 0 320px"]{flex-basis:82vw!important}

  /* Generic: let long nowrap labels wrap inside main content */
  main [style*="white-space: nowrap"]:not(.jw-primary):not(.jw-sec):not(a):not(button){white-space:normal!important}
  main [style*="padding: 40px"]{padding:24px!important}
}

/* Responsive type scale */
@media (max-width:1100px){
  h2[style*="font: 700 40px"],h3[style*="font: 700 40px"]{font-size:34px!important;line-height:42px!important}
  [style*="font: 500 48px"],[style*="font: 500 clamp(28px"],[style*="font: 500 clamp(30px"]{font-size:40px!important;line-height:48px!important}
}
@media (max-width:760px){
  h1,h1[style*="font: 400 clamp(40px"]{font-size:30px!important;line-height:38px!important;letter-spacing:-0.6px!important}
  h2,h3[style*="font: 700 40px"]{font-size:26px!important;line-height:34px!important;letter-spacing:-0.4px!important}
  h3{font-size:22px!important;line-height:30px!important;letter-spacing:-0.3px!important}
  h4{font-size:18px!important;line-height:26px!important}
  h5{font-size:16px!important;line-height:24px!important}
  [style*="font: 500 48px"],[style*="font: 500 clamp(28px"],[style*="font: 500 clamp(30px"]{font-size:32px!important;line-height:40px!important}
  [style*="font: 600 24px"]{font-size:19px!important;line-height:27px!important}
  [style*="font: 500 20px"],[style*="font: 400 20px"]:not(header *),blockquote{font-size:17px!important;line-height:26px!important}
  [style*="font: 600 20px"]{font-size:17px!important;line-height:25px!important}
  [style*="font: 400 16px"],[style*="font: 500 16px"]{font-size:15px!important;line-height:24px!important}
  header a[style*="font: 400 20px"],header button span{font-size:18px!important}
}
@media (max-width:400px){
  h1,h1[style*="font: 400 clamp(40px"]{font-size:34px!important;line-height:40px!important}
  h2,h3[style*="font: 700 40px"]{font-size:24px!important;line-height:31px!important}
  header nav[aria-label="Primary"]{gap:16px!important}
}

/* Phone mockups: keep them phone-sized on small screens */
@media (max-width:760px){
  [data-dk-device][style*="max-width: 240px"]{max-width:170px!important;margin:0 auto!important;justify-self:center}
  [data-dk-glow]:has(>img[src*="final-candidate"]){width:min(190px,56vw);margin:0 auto}
}

/* Paired screenshots stay side by side on phones so callouts/arrows stay aligned */
@media (max-width:760px){
  main [style*="667fr"]{grid-template-columns:minmax(0,667fr) minmax(0,662fr)!important;gap:16px!important;width:100%!important}
  main [style*="0.933fr"]{grid-template-columns:minmax(0,0.933fr) minmax(0,0.687fr)!important;gap:10px!important}
  main figure[style*="padding: 24px"]{padding:14px!important;gap:20px!important}
}

@media (max-width:760px){
  main [role="img"][style*="width: 66.67%"],main [style*="width: 66.67%"],main [style*="width: 92.77%"]{width:100%!important}
  main [style*="url(\"assets/work/av-conceptmap"],main [style*="av-conceptmap"],main [style*="av-site-cut"]{margin-left:-8px;margin-right:-8px;width:calc(100% + 16px)!important}
}

@media (max-width:760px){
  section[data-screen-label="Explorations"] [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important}
}

@media (max-width:760px){
  main figure [style*="repeat(2, minmax(0px, 1fr))"],main figure[style*="repeat(2, minmax(0px, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  main figure[style*="1397fr"]{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
}

@media (max-width:760px){
  main figure:has(img[alt^="Art piece"])>div[style*="display: flex"]{flex-direction:column!important;gap:12px!important}
  main figure:has(img[alt^="Art piece"])>div[style*="display: flex"]>img{flex:none!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
}

@media (max-width:760px){
  main figure:has(img[alt^="Art piece"])>div:first-child{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  main figure:has(img[alt^="Art piece"])>div:nth-child(2)>img:first-child{width:59.56%!important;align-self:center}
}

@media (max-width:760px){[data-desktop-only]{display:none!important}[data-mobile-only]{display:flex!important}}

@media (max-width:760px){
  
}

@media (max-width:760px){
  header #jw-nav-t:checked~nav[aria-label="Primary"]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min-content;column-gap:16px;padding-top:16px!important;padding-bottom:20px!important}
  header nav[aria-label="Primary"] .jw-work{grid-column:1/3;grid-row:1/5;display:block!important}
  header nav[aria-label="Primary"] .jw-work>.jw-wl{display:none!important}
  header nav[aria-label="Primary"] .jw-menu{padding:0!important}
  header nav[aria-label="Primary"] .jw-menu>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important}
  header nav[aria-label="Primary"] .jw-menu>div>div{min-width:0!important}
  header nav[aria-label="Primary"]>a{grid-column:3;border-top:0!important;padding:3px 0!important;font-size:12px!important;line-height:18px!important;font-weight:600!important;color:#fff!important}
  header nav[aria-label="Primary"]>a:first-of-type::before{content:"About";display:block;font:500 10px/14px var(--font-sans);letter-spacing:.6px;text-transform:uppercase;color:rgb(150,150,150);padding-bottom:7px}
  header nav[aria-label="Primary"]>a:first-of-type{padding-top:0!important}
  header .jw-menu a{font-weight:600!important}
}

@media (max-width:760px){
  header #jw-nav-t:checked~nav[aria-label="Primary"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:24px!important}
  header nav[aria-label="Primary"] .jw-work,header nav[aria-label="Primary"] .jw-menu,header nav[aria-label="Primary"] .jw-menu>div{display:contents!important}
  header nav[aria-label="Primary"] .jw-menu>div>div:not([style*="width: 1px"]){grid-row:1/5;display:flex!important;flex-direction:column}
  header nav[aria-label="Primary"] .jw-menu>div>div:not([style*="width: 1px"]) a,header nav[aria-label="Primary"]>a{font-weight:600!important;font-size:12px!important;line-height:18px!important;padding:3px 0!important}
  header nav[aria-label="Primary"] .jw-menu span:not([aria-hidden]),header nav[aria-label="Primary"]>a:first-of-type::before{padding-bottom:7px!important;font-size:10px!important;line-height:14px!important}
  header nav[aria-label="Primary"]>a:first-of-type{padding-top:0!important}
}

@media (max-width:760px){
  main :has(>[style*="flex-shrink: 0; display: flex; align-items: center; gap: 20px"]){flex-wrap:wrap!important;row-gap:12px!important}
  main [style*="flex-shrink: 0; display: flex; align-items: center; gap: 20px"]{flex-shrink:1!important;flex-wrap:wrap;gap:12px!important}
}


/* Fluid top spacing + page titles (≤1100px): scales smoothly with width, no jumps */
@media (max-width:1100px){
  div:has(>main>section#s-0 h1)>div:first-child:not(main){display:none!important}
  div:has(>main>section#s-0 h1){padding-top:clamp(32px,5vw,56px)!important;row-gap:0!important}
  main>section#s-0 h1,main[data-screen-label="Contact"] h1{font-size:clamp(40px,2.5vw + 31px,56px)!important;line-height:1.14!important;letter-spacing:-0.02em!important}
  main[data-screen-label="Contact"]{padding-top:clamp(40px,7vw,96px)!important}
  [data-screen-label="Home hero"]>div{padding-top:clamp(32px,5vw,64px)!important;padding-bottom:clamp(40px,6vw,72px)!important}
}

/* Tablet + phone: hide hero eyebrow */
@media (max-width:1100px){
  [data-screen-label="Home hero"] [style*="gap: 16px"]>span:first-child{display:none!important}
}
/* Mobile menu: clip-reveal panel + staggered link fade (iOS-style ease) */
@media (max-width:760px){
  header nav[aria-label="Primary"]{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .42s cubic-bezier(.32,.72,0,1),opacity .3s cubic-bezier(.32,.72,0,1),display .42s allow-discrete,overlay .42s allow-discrete}
  header #jw-nav-t:checked~nav[aria-label="Primary"]{clip-path:inset(0 0 0 0);opacity:1}
  @starting-style{header #jw-nav-t:checked~nav[aria-label="Primary"]{clip-path:inset(0 0 100% 0);opacity:0}}
  header nav[aria-label="Primary"] a,header nav[aria-label="Primary"] .jw-menu span:not([aria-hidden]){opacity:0!important;transform:translateY(-6px)!important;transition:opacity .2s ease,transform .2s ease!important}
  header #jw-nav-t:checked~nav[aria-label="Primary"] a,header #jw-nav-t:checked~nav[aria-label="Primary"] .jw-menu span:not([aria-hidden]){opacity:1!important;transform:none!important;transition:opacity .38s cubic-bezier(.32,.72,0,1) .12s,transform .45s cubic-bezier(.32,.72,0,1) .12s!important}
  @starting-style{header #jw-nav-t:checked~nav[aria-label="Primary"] a,header #jw-nav-t:checked~nav[aria-label="Primary"] .jw-menu span:not([aria-hidden]){opacity:0!important;transform:translateY(-6px)!important}}
}
@media (prefers-reduced-motion:reduce){header nav[aria-label="Primary"],header nav[aria-label="Primary"] *{transition:none!important;animation:none!important}}

@media (max-width:760px){[data-screen-label="Home hero"] h1{font-size:34px!important;line-height:40px!important;letter-spacing:-0.8px!important}}

/* Phone body text 16px */
@media (max-width:760px){
  main p[style*="font: 400 14px"],main p[style*="font: 400 15px"],main p[style*="font: 500 14px"],main li[style*="font: 400 14px"],main li[style*="font: 400 15px"],
  [data-screen-label="Home hero"] p[style*="font: 500 14px"]{font-size:16px!important;line-height:26px!important}
}

/* Phone: top spacing above page title */
@media (max-width:760px){
  div:has(>main>section#s-0 h1){padding-top:56px!important}
  main[data-screen-label="Contact"]{padding-top:56px!important}
  [data-screen-label="Home hero"]>div{padding-top:56px!important}
}

/* Burger → X morph (thin lines) */
header [data-navbtn] line{transform-box:view-box;transform-origin:14px 14px;transition:transform .42s cubic-bezier(.32,.72,0,1)}
header [data-navbtn] line[data-l="1"]{transform:translateY(-3.5px)}
header [data-navbtn] line[data-l="2"]{transform:translateY(3.5px)}
header:has(#jw-nav-t:checked) [data-navbtn] line[data-l="1"]{transform:rotate(45deg) scaleX(.8)}
header:has(#jw-nav-t:checked) [data-navbtn] line[data-l="2"]{transform:rotate(-45deg) scaleX(.8)}
@media (prefers-reduced-motion:reduce){header [data-navbtn] line{transition:none}}

/* Featured work: header + project chips replace the hidden anchor rail; no dead gap */
@media (max-width:1100px){
  section[data-screen-label="Featured work"]>div[aria-hidden="true"]{display:none!important}
  [data-fhead]{display:flex!important;padding-top:20px!important;padding-bottom:20px!important;gap:20px!important}
  [data-fhead] a{scroll-margin-top:80px}
  .jw-card[id^="fw-"]{scroll-margin-top:72px}
  [data-screen-label="Home hero"]>div{padding-bottom:clamp(32px,5vw,56px)!important}
}

@media (min-width:761px) and (max-width:1100px){
  [data-screen-label="Home hero"] div[style*="width: 311px"]{width:220px!important;height:220px!important}
  [data-screen-label="Home hero"] div[style*="width: 311px"] *{max-width:100%!important;max-height:100%!important}
  [data-screen-label="Home hero"]>div{padding-top:32px!important;padding-bottom:32px!important;row-gap:28px!important}
  [data-screen-label="Home hero"]>div>div:first-child{gap:28px!important}
}

/* Featured work heading = Other work heading at every width */
[data-fhead] h2{font-weight:700!important;font-family:var(--font-sans)!important}
@media (max-width:1100px){[data-fhead] h2{font-size:34px!important;line-height:42px!important;letter-spacing:-0.8px!important}}
@media (max-width:760px){[data-fhead] h2{font-size:26px!important;line-height:34px!important;letter-spacing:-0.4px!important}}
@media (max-width:400px){[data-fhead] h2{font-size:24px!important;line-height:31px!important}}