/* =========================================================
   DVSTUDIO V123 — EDITORIAL / RESPONSIVE POLISH
   User QA pass: calmer typography, real world imagery,
   clean web showcase, Adobe-font gate support and 1370 clarity.
   ========================================================= */

/* 1. FIVE WORLDS — use the supplied work, never generated artwork. */
.home-worlds-nav .world-motion::before,
.visual-worlds-nav .world-motion::before{
  background:
    linear-gradient(180deg,rgba(6,25,39,.18) 0%,rgba(6,25,39,.46) 52%,rgba(6,25,39,.90) 100%),
    url('../assets/images/worlds/1150-motion-frame.webp') center 48%/cover no-repeat!important;
  opacity:.96!important;
}
.home-worlds-nav .world-graphic::before,
.visual-worlds-nav .world-graphic::before{
  background:
    linear-gradient(180deg,rgba(6,25,39,.14) 0%,rgba(6,25,39,.42) 50%,rgba(6,25,39,.90) 100%),
    url('../assets/images/graphics/1150-thursday-poster.png') center 28%/cover no-repeat!important;
  opacity:.96!important;
}
.home-worlds-nav .world-web::before,
.visual-worlds-nav .world-web::before{
  background:
    linear-gradient(180deg,rgba(6,25,39,.16) 0%,rgba(6,25,39,.44) 48%,rgba(6,25,39,.90) 100%),
    url('../assets/images/1370-project-1365.webp') center 47%/cover no-repeat!important;
  opacity:.96!important;
}

/* 2. HOME ABOUT — same mature narrative/hierarchy as About. */
body[data-page="index.html"] #home-about .copy-large h2{
  max-width:11ch!important;
  font-size:clamp(39px,4.7vw,66px)!important;
  line-height:.96!important;
  font-weight:310!important;
  font-variation-settings:"wght" 310!important;
}
body[data-page="index.html"] #home-about .copy-large .lead{
  max-width:58ch!important;
  font-size:clamp(18px,1.7vw,23px)!important;
  line-height:1.46!important;
}
body[data-page="index.html"] #home-about .copy-large p:not(.lead){
  max-width:68ch!important;
}

/* 3. WEB / DELIVERY — avoid the tool-wall look. */
.web-brand-icons .tool-chip-icons,
.web-tool-row-compact{
  flex-wrap:nowrap!important;
}
.web-brand-icons .tool-chip-icons img{
  width:26px!important;
  height:26px!important;
}
.web-tool-row-compact{
  display:flex!important;
  gap:8px!important;
}
.web-tool-row-compact .web-logo-tool{
  flex:0 1 auto!important;
  min-height:42px!important;
}

/* 4. WORK WEB — two client protagonists + one quieter studio row. */
#web-world .web-showcase-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(18px,2.2vw,30px)!important;
  align-items:start!important;
}
#web-world .web-project-card{
  min-width:0!important;
  padding:clamp(14px,1.5vw,20px)!important;
  border-radius:28px!important;
  display:flex!important;
  flex-direction:column!important;
  background:rgba(255,255,255,.82)!important;
}
#web-world .web-project-card--studio{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr)!important;
  gap:clamp(22px,3vw,44px)!important;
  align-items:center!important;
}
#web-world .browser-frame{
  width:100%!important;
  min-width:0!important;
  border-radius:20px!important;
}
#web-world .browser-content{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
}

/* Important: these selectors intentionally beat the legacy
   #web-world .browser-content img rule that was stretching logos to 100%. */
#web-world .browser-content img.site-preview-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  transform:none!important;
  filter:none!important;
}
#web-world .browser-1150-live img.site-preview-bg{object-position:center 45%!important}
#web-world .browser-1370-live img.site-preview-bg{object-position:center 47%!important}
#web-world .site-preview-shade{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:rgba(6,25,39,.12)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#web-world .browser-content img.site-preview-logo{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  filter:drop-shadow(0 7px 20px rgba(0,0,0,.34))!important;
}
#web-world .browser-content img.site-logo-1150{
  width:min(44%,240px)!important;
  max-width:240px!important;
}
#web-world .browser-content img.site-logo-1370{
  width:min(48%,260px)!important;
  max-width:260px!important;
}
#web-world .site-preview-link:hover img.site-preview-logo{
  transform:translate(-50%,-50%) scale(1.02)!important;
}
#web-world .site-preview-cta{
  left:50%!important;
  right:auto!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  min-height:38px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  font:750 9px/1 var(--font-ui)!important;
  letter-spacing:.085em!important;
  white-space:nowrap!important;
}
#web-world .web-project-copy{
  min-width:0!important;
  padding:18px 4px 2px!important;
}
#web-world .web-project-card--studio .web-project-copy{
  padding:8px clamp(4px,1vw,16px)!important;
}
#web-world .web-project-copy h3{
  margin:7px 0 10px!important;
  font-family:var(--font-ui)!important;
  font-size:clamp(22px,2vw,29px)!important;
  font-weight:680!important;
  font-variation-settings:normal!important;
  letter-spacing:-.02em!important;
  line-height:1.08!important;
  overflow-wrap:anywhere!important;
}
#web-world .web-project-copy p{
  max-width:58ch!important;
  margin:0!important;
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1.6!important;
}
#web-world .chip-row{
  margin-top:14px!important;
}
#web-world .chip-row span{
  padding:6px 9px!important;
  font-size:9px!important;
}
#web-world .browser-dv img{
  width:min(32%,175px)!important;
  height:auto!important;
  max-width:175px!important;
  max-height:none!important;
  object-fit:contain!important;
}
#web-world .browser-dv>span{
  font-size:clamp(20px,2.4vw,34px)!important;
}

/* 5. CLIENT SPACE CARDS — calmer titles. The display type is reserved for
   section headlines; project names stay readable at a glance. */
.brand-collaborations .client-space-copy h3{
  margin:0 0 8px!important;
  font-family:var(--font-ui)!important;
  font-size:clamp(24px,2.15vw,32px)!important;
  font-weight:680!important;
  font-variation-settings:normal!important;
  letter-spacing:-.02em!important;
  line-height:1.08!important;
}
.brand-collaborations .client-space-copy>span{
  margin-bottom:8px!important;
  font-size:9px!important;
  font-weight:750!important;
  letter-spacing:.11em!important;
}
.brand-collaborations .client-space-copy p{
  max-width:54ch!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.52!important;
}

/* 6. CLIENT WEBSITE FEATURES — same image/logo fix as Work. */
.client-web-feature-visual{
  position:relative!important;
  overflow:hidden!important;
}
.client-web-feature-visual img.client-web-feature-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
}
.client-theme-1150 .client-web-feature-visual img.client-web-feature-bg{object-position:center 45%!important}
.client-theme-1370 .client-web-feature-visual img.client-web-feature-bg{object-position:center 47%!important}
.client-web-feature-shade{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:rgba(6,25,39,.12)!important;
}
.client-web-feature-visual img.client-web-feature-logo{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:2!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%)!important;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.34))!important;
}
.client-web-feature-visual img.client-web-logo-1150{width:min(42%,340px)!important;max-width:340px!important}
.client-web-feature-visual img.client-web-logo-1370{width:min(46%,365px)!important;max-width:365px!important}
.client-web-feature-copy h3{
  font-family:var(--font-ui)!important;
  font-size:clamp(24px,2.1vw,32px)!important;
  font-weight:680!important;
  font-variation-settings:normal!important;
  line-height:1.12!important;
  overflow-wrap:anywhere!important;
}
.client-web-feature-copy p{
  font-size:clamp(15px,1.2vw,17px)!important;
  line-height:1.62!important;
}

/* 7. 1370 PRODUCT — make the application readable before it is decorative. */
.client-theme-1370 .reservation-case-section{
  background:#f3f0e9!important;
  color:#0e3827!important;
}
.client-theme-1370 .reservation-case-section .section-intro{
  max-width:68ch!important;
  color:rgba(14,56,39,.78)!important;
}
.client-theme-1370 .reservation-intro-copy h3{
  max-width:20ch!important;
  font-family:var(--font-ui)!important;
  font-size:clamp(29px,3vw,44px)!important;
  font-weight:680!important;
  font-variation-settings:normal!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}
.client-theme-1370 .reservation-intro-copy p{
  max-width:62ch!important;
  font-size:clamp(15px,1.25vw,18px)!important;
  line-height:1.66!important;
}
.client-theme-1370 .reservation-feature h3{
  margin-bottom:8px!important;
  font-family:var(--font-ui)!important;
  font-size:17px!important;
  font-weight:750!important;
  font-variation-settings:normal!important;
  line-height:1.25!important;
  letter-spacing:-.01em!important;
}
.client-theme-1370 .reservation-feature p{
  font-size:14px!important;
  line-height:1.58!important;
  color:rgba(14,56,39,.72)!important;
}
.client-theme-1370 .reservation-hero-main strong{
  font-weight:330!important;
  font-variation-settings:"wght" 330!important;
}

/* 8. Less tool clutter in client Scope. */
.client-theme .software-list{
  gap:9px!important;
}
.client-theme .software-chip{
  min-height:48px!important;
  padding:8px 10px!important;
}
.client-theme .web-software-chip .software-chip-icons img{
  width:27px!important;
  height:27px!important;
}

/* 9. Responsive QA — normal desktop, low desktop, tablet and mobile. */
@media(max-width:1180px){
  #web-world .web-project-card--studio{
    grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr)!important;
  }
  #web-world .browser-content img.site-logo-1150{width:min(43%,220px)!important}
  #web-world .browser-content img.site-logo-1370{width:min(47%,235px)!important}
}
@media(max-width:900px){
  #web-world .web-showcase-grid{grid-template-columns:1fr!important}
  #web-world .web-project-card--studio{
    grid-column:auto!important;
    grid-template-columns:1fr!important;
  }
  #web-world .web-project-card--studio .web-project-copy{padding:18px 4px 2px!important}
  .web-tool-row-compact{flex-wrap:wrap!important}
  body[data-page="index.html"] #home-about .copy-large h2{max-width:14ch!important}
}
@media(max-width:680px){
  .home-worlds-nav .world-motion::before,
  .visual-worlds-nav .world-motion::before{background-position:center 50%!important}
  .home-worlds-nav .world-graphic::before,
  .visual-worlds-nav .world-graphic::before{background-position:center 24%!important}
  #web-world .web-project-card{padding:12px!important;border-radius:22px!important}
  #web-world .browser-top{height:40px!important;padding-inline:10px!important;font-size:8px!important}
  #web-world .browser-content img.site-logo-1150{width:min(46%,190px)!important}
  #web-world .browser-content img.site-logo-1370{width:min(50%,205px)!important}
  #web-world .site-preview-cta{bottom:10px!important;min-height:34px!important;font-size:8px!important}
  #web-world .web-project-copy h3{font-size:23px!important}
  .brand-collaborations .client-space-copy h3{font-size:25px!important}
  .client-web-feature-visual img.client-web-logo-1150{width:min(48%,250px)!important}
  .client-web-feature-visual img.client-web-logo-1370{width:min(52%,270px)!important}
  .client-theme-1370 .reservation-intro-copy h3{max-width:100%!important;font-size:29px!important}
}
@media(max-height:780px) and (min-width:901px){
  #web-world .browser-content{aspect-ratio:16/9!important}
  #web-world .web-project-copy p{font-size:14px!important}
  .brand-collaborations .client-space-card-photo{min-height:260px!important}
}