/*
 * Utmost Builds Luxe — Responsive System v3.1
 * Mobile-first safeguards, tablet layouts, touch navigation, fluid media,
 * accessible forms, and full-screen gallery behavior.
 */

/* ---------- Global responsive safeguards ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}
body{
  min-width:320px;
  overflow-x:clip;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}
img{
  height:auto;
}
iframe,video{
  width:100%;
}
input,select,textarea,button{
  max-width:100%;
}
:where(
  .container,.narrow,.entry-card,.article-shell,.legal-content,
  [class$="-grid"],[class$="-inner"],[class$="-copy"],[class$="-head"],
  [class*="-grid "],[class*="-inner "],[class*="-copy "],[class*="-head "]
)>*{
  min-width:0;
}
:where(h1,h2,h3,h4,p,li,a,strong,span){
  overflow-wrap:break-word;
}
:where(table){
  width:100%;
  max-width:100%;
  border-collapse:collapse;
}
.entry-content table,.article-content table,.legal-content table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.entry-content pre,.article-content pre,.legal-content pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.wp-block-embed,.wp-block-video,.wp-block-image{
  max-width:100%;
}

/* Content stays visible if JavaScript is blocked or interrupted. */
.reveal{
  opacity:1;
  transform:none;
}
.motion-ready .reveal{
  opacity:0;
  transform:translateY(24px);
}
.motion-ready .reveal.visible{
  opacity:1;
  transform:none;
}

/* Better keyboard and touch focus across every viewport. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--brass-300);
  outline-offset:3px;
}
:where(.btn,.text-link,.menu-toggle,.project-filter,.portfolio-open,.city-gallery-item button,.project-lightbox button){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- Large tablet / small laptop ---------- */
@media (max-width:1180px){
  .container,.narrow{
    width:min(calc(100% - 40px),var(--max));
  }
  .section{
    padding:clamp(76px,8vw,110px) 0;
  }

  /* Remove desktop-only minimum columns before they force horizontal overflow. */
  .chapter-heading,
  .flagship-story-head,
  .atlas-rail-head,
  .whole-home-story-row-head{
    grid-template-columns:auto minmax(0,1fr);
  }
  .chapter-heading>p,
  .flagship-story-head>p,
  .atlas-rail-head>p,
  .atlas-rail-head>strong,
  .whole-home-story-row-head>p{
    grid-column:1/-1;
  }

  .chapter-lead,
  .chapter-lead.is-reverse{
    grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  }

  .city-hero-inner,
  .projects-hero-inner,
  .whole-home-hero-inner,
  .bathroom-hero-inner,
  .services-hub-hero-inner,
  .kitchen-hero-inner,
  .new-home-hero-inner{
    gap:45px;
  }

  .project-lightbox-dialog{
    width:min(1120px,100%);
  }
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  h1{
    font-size:clamp(3.1rem,7.6vw,5.25rem);
  }
  h2{
    font-size:clamp(2.4rem,5.8vw,4rem);
  }

  .chapter-heading,
  .flagship-story-head,
  .atlas-rail-head,
  .whole-home-story-row-head,
  .bathroom-city-row{
    grid-template-columns:1fr;
    gap:18px;
  }
  .chapter-number,
  .flagship-number,
  .atlas-rail-head>div>span{
    font-size:3.1rem;
  }
  .chapter-lead,
  .chapter-lead.is-reverse{
    grid-template-columns:1fr;
  }
  .chapter-lead.is-reverse .chapter-lead-image,
  .chapter-lead.is-reverse .chapter-lead-caption{
    order:initial;
  }

  .service-pathway,
  .service-pathway.is-reverse{
    min-height:0;
  }
  .service-pathway-copy{
    padding:clamp(58px,7vw,86px) clamp(28px,6vw,70px);
  }

  .atlas-track,
  .whole-home-story-track,
  .bathroom-city-images{
    grid-auto-columns:minmax(300px,48vw);
  }

  .city-cta-inner,
  .new-home-cta-inner,
  .services-hub-cta-inner,
  .projects-cta-inner,
  .foundation-final-inner{
    grid-template-columns:1fr;
    align-items:start;
  }

  .project-lightbox-dialog{
    grid-template-columns:1fr;
    overflow-y:auto;
    max-height:96dvh;
  }
  .project-lightbox-media{
    height:min(64dvh,680px);
    min-height:0;
  }
  .project-lightbox-info{
    min-height:180px;
    border-left:0;
    border-top:1px solid rgba(216,188,131,.22);
  }
  .project-lightbox-next{
    right:14px;
  }
}

/* ---------- Navigation breakpoint and portrait tablet ---------- */
@media (max-width:940px){
  .site-header,
  .site-header.is-scrolled{
    top:0;
  }
  .admin-bar .site-header,
  .admin-bar .site-header.is-scrolled{
    top:32px;
  }
  .main-nav{
    inset:76px 0 0 0;
    height:calc(100dvh - 76px);
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:
      18px max(24px,env(safe-area-inset-right))
      max(34px,env(safe-area-inset-bottom))
      max(24px,env(safe-area-inset-left));
  }
  .admin-bar .main-nav{
    inset:108px 0 0 0;
    height:calc(100dvh - 108px);
  }
  .main-nav a{
    min-height:52px;
    display:flex;
    align-items:center;
  }
  .menu-toggle{
    min-width:46px;
    min-height:46px;
  }
  .menu-toggle[aria-expanded="true"]::before{
    top:22px;
    transform:rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span{
    opacity:0;
  }
  .menu-toggle[aria-expanded="true"]::after{
    top:22px;
    transform:rotate(-45deg);
  }

  .hero-content,
  .foundation-hero-copy,
  .city-hero-copy,
  .projects-hero-inner>div:first-child{
    width:100%;
    max-width:780px;
  }

  .design-stage{
    width:100%;
    overflow:hidden;
  }
  .floorplan-model{
    width:min(700px,94%);
  }

  .contact-foundation-grid,
  .cta-inner,
  .why-grid,
  .design-grid,
  .split-editorial,
  .image-story-grid,
  .services-hub-intro-grid,
  .kitchen-intro-grid,
  .new-home-intro-grid,
  .service-network-grid,
  .services-support-grid,
  .kitchen-planning-grid,
  .new-home-preconstruction-grid,
  .areas-hub-intro-grid,
  .areas-hub-links-grid,
  .areas-hub-cta-inner,
  .city-intro-grid,
  .city-character-grid,
  .city-portfolio-head,
  .city-nearby-grid{
    grid-template-columns:1fr;
  }
}

/* WordPress mobile admin bar changes height below 783px. */
@media (max-width:782px){
  .admin-bar .site-header,
  .admin-bar .site-header.is-scrolled{
    top:46px;
  }
  .admin-bar .main-nav{
    inset:122px 0 0 0;
    height:calc(100dvh - 122px);
  }
}

/* ---------- Mobile landscape / large phone ---------- */
@media (max-width:760px){
  .container,.narrow{
    width:min(calc(100% - 32px),var(--max));
  }
  .section{
    padding:clamp(62px,13vw,82px) 0;
  }
  h1,
  .projects-hero h1,
  .city-hero h1{
    font-size:clamp(2.75rem,11.5vw,4.3rem);
    letter-spacing:-.045em;
  }
  h2{
    font-size:clamp(2.15rem,9.5vw,3.35rem);
  }
  h3{
    line-height:1.12;
  }
  .lead{
    font-size:1rem;
    line-height:1.65;
  }
  .eyebrow{
    letter-spacing:.14em;
  }

  .hero,
  .foundation-hero,
  .projects-hero,
  .city-hero,
  .areas-hub-hero,
  .services-hub-hero,
  .kitchen-hero,
  .new-home-hero,
  .whole-home-hero,
  .bathroom-hero{
    min-height:max(680px,100svh);
  }
  .hero-content,
  .foundation-hero-inner,
  .projects-hero-inner,
  .city-hero-inner,
  .areas-hub-inner,
  .services-hub-hero-inner,
  .kitchen-hero-inner,
  .new-home-hero-inner,
  .whole-home-hero-inner,
  .bathroom-hero-inner{
    padding-top:clamp(155px,30vw,245px);
    padding-bottom:64px;
  }
  .hero-media img,
  .foundation-hero-media img,
  .projects-hero-media img,
  .city-hero-media img,
  .areas-hub-media img,
  .services-hub-hero-media img,
  .kitchen-hero-media img,
  .new-home-hero-media img,
  .whole-home-hero-media img,
  .bathroom-hero-media img{
    object-position:center;
  }

  .hero-actions,
  .projects-hero-actions,
  .city-hero-actions,
  .foundation-hero-actions,
  .kitchen-hero-actions,
  .new-home-hero-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .hero-actions .btn,
  .projects-hero-actions .btn,
  .city-hero-actions .btn,
  .foundation-hero-actions .btn,
  .kitchen-hero-actions .btn,
  .new-home-hero-actions .btn,
  .projects-cta-inner .btn,
  .city-cta-inner .btn,
  .new-home-cta-inner .btn,
  .foundation-final-inner .btn{
    width:100%;
  }

  .section-head,
  .portfolio-gallery-head,
  .project-atlas-head,
  .kitchen-portfolio-head,
  .residential-construction-proof-head,
  .bathroom-city-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    margin-bottom:34px;
  }

  .capability-grid,
  .project-grid,
  .service-grid,
  .process-grid,
  .why-points,
  .value-grid,
  .audience-grid,
  .number-grid,
  .insight-grid,
  .sitemap-grid,
  .related-services-grid,
  .project-fit-grid,
  .service-network-points,
  .new-home-pathway-grid,
  .kitchen-type-grid,
  .city-service-grid,
  .city-character-notes,
  .areas-directory-grid{
    grid-template-columns:1fr;
  }

  .project-card:first-child,
  .portfolio-proof h2{
    grid-column:auto;
  }
  .project-image,
  .service-image,
  .insight-image{
    height:auto;
    aspect-ratio:4/3;
  }
  .project-image img,
  .service-image img,
  .insight-image img{
    height:100%;
  }

  .service-pathway-media{
    min-height:0;
    aspect-ratio:4/3;
  }
  .service-pathway-copy{
    padding:54px 20px 60px;
  }
  .service-pathway-media>span{
    left:18px;
    bottom:18px;
    font-size:3.9rem;
  }

  .design-stage{
    min-height:350px;
  }
  .floorplan-model{
    width:100%;
  }
  .stage-callout{
    transform:scale(.82);
    transform-origin:center;
  }
  .material-board{
    width:170px;
    right:0;
    bottom:8px;
    padding:12px;
  }

  .proof-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:14px;
    padding:18px;
  }
  .proof-icon{
    width:46px;
    height:46px;
  }

  .area-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .area-grid a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:9px 10px;
  }

  .inquiry-form,
  .legal-content,
  .thank-you-next{
    padding:24px 18px;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .field.full{
    grid-column:auto;
  }
  .field input,
  .field select,
  .field textarea{
    min-height:48px;
    font-size:16px;
  }
  .field textarea{
    min-height:130px;
  }
  .contact-chips{
    display:grid;
    grid-template-columns:1fr;
  }
  .contact-chip{
    min-height:48px;
    display:flex;
    align-items:center;
  }

  .project-filter-shell,
  .collection-nav{
    top:76px;
  }
  .project-filters,
  .collection-nav-inner{
    scroll-padding-inline:16px;
    -webkit-overflow-scrolling:touch;
  }
  .project-filter,
  .collection-nav a{
    min-height:46px;
    display:flex;
    align-items:center;
  }

  .portfolio-grid,
  .city-gallery,
  .residential-construction-proof-grid,
  .kitchen-editorial{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
  .portfolio-card,
  .portfolio-card.is-wide,
  .portfolio-card.is-tall,
  .city-gallery-item:nth-child(n),
  .construction-proof-card,
  .construction-proof-card.proof-1,
  .construction-proof-card.proof-2,
  .kitchen-editorial-shot,
  .kitchen-editorial-shot.shot-1,
  .kitchen-editorial-shot.shot-4,
  .kitchen-editorial-shot.shot-5,
  .kitchen-editorial-shot.shot-8{
    grid-column:auto;
    grid-row:auto;
  }
  .portfolio-card,
  .portfolio-card.is-wide,
  .city-gallery-item:nth-child(n),
  .construction-proof-card img,
  .construction-proof-card.proof-1 img,
  .construction-proof-card.proof-2 img{
    height:auto;
    aspect-ratio:4/3;
  }
  .portfolio-card.is-tall{
    height:auto;
    aspect-ratio:3/4;
  }
  .portfolio-card img,
  .city-gallery-item img,
  .construction-proof-card img{
    height:100%;
  }

  .story-collage{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .story-shot,
  .story-shot:first-child{
    grid-column:auto;
    grid-row:auto;
    height:auto;
    aspect-ratio:4/3;
  }
  .story-collage::before,
  .image-story-media::before{
    display:none;
  }

  .atlas-track,
  .whole-home-story-track,
  .bathroom-city-images{
    grid-auto-columns:minmax(270px,84vw);
    padding-left:16px;
    padding-right:16px;
    scroll-snap-type:x mandatory;
  }
  .atlas-card button,
  .whole-home-story-card button,
  .bathroom-city-images button{
    height:auto;
    aspect-ratio:4/3;
  }

  .city-proof-grid,
  .city-process-grid,
  .new-home-process-grid,
  .kitchen-process-grid{
    grid-template-columns:1fr;
  }
  .city-proof a:nth-child(n),
  .city-process-grid article:nth-child(n),
  .new-home-process-grid article,
  .kitchen-process-grid article{
    border-right:0;
  }
  .city-gallery-item figcaption{
    padding:44px 16px 14px;
  }
  .area-directory-card{
    grid-template-columns:1fr;
    min-height:0;
  }
  .area-directory-image{
    height:auto;
    aspect-ratio:4/3;
  }
  .area-directory-copy{
    padding:26px 20px;
  }

  .journey-step{
    grid-template-columns:1fr;
    gap:18px;
    padding:46px 0;
  }
  .journey-output{
    grid-template-columns:1fr;
  }
  .image-story-media,
  .image-story-media img{
    min-height:0;
    height:auto;
    aspect-ratio:4/3;
  }

  .footer-grid,
  .footer-grid-final{
    grid-template-columns:1fr;
    gap:34px;
  }
  .footer-bottom,
  .footer-legal{
    flex-direction:column;
    align-items:flex-start;
  }

  .article-shell,
  .entry-card,
  .legal-content{
    width:min(calc(100% - 24px),980px);
  }
  .article-content{
    padding:28px 18px;
  }

  .project-lightbox{
    padding:0;
    align-items:stretch;
  }
  .project-lightbox-dialog{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  .project-lightbox-media{
    height:62dvh;
  }
  .project-lightbox-info{
    padding:18px 18px max(18px,env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  .project-lightbox-prev,
  .project-lightbox-next{
    top:31dvh;
  }
}

/* ---------- Small phone ---------- */
@media (max-width:520px){
  .container,.narrow{
    width:min(calc(100% - 24px),var(--max));
  }
  .nav-wrap{
    height:70px;
  }
  .brand img,.custom-logo{
    width:145px;
    max-height:56px;
  }
  .main-nav{
    inset:70px 0 0 0;
    height:calc(100dvh - 70px);
  }
  .admin-bar .main-nav{
    inset:116px 0 0 0;
    height:calc(100dvh - 116px);
  }
  .project-filter-shell,
  .collection-nav{
    top:70px;
  }

  h1,
  .projects-hero h1,
  .city-hero h1{
    font-size:clamp(2.45rem,12.3vw,3.45rem);
  }
  h2{
    font-size:clamp(2rem,10.4vw,2.85rem);
  }
  .btn{
    min-height:50px;
    padding:13px 18px;
    font-size:.72rem;
  }

  .hero-content,
  .foundation-hero-inner,
  .projects-hero-inner,
  .city-hero-inner,
  .areas-hub-inner,
  .services-hub-hero-inner,
  .kitchen-hero-inner,
  .new-home-hero-inner,
  .whole-home-hero-inner,
  .bathroom-hero-inner{
    padding-top:clamp(145px,36vw,215px);
  }

  .area-grid{
    grid-template-columns:1fr;
  }
  .service-card,
  .project-card,
  .audience-card,
  .value-card,
  .city-service-card{
    box-shadow:0 14px 34px rgba(10,31,25,.1);
  }

  .design-stage{
    min-height:300px;
  }
  .stage-callout{
    display:none;
  }
  .material-board{
    width:148px;
  }

  .atlas-track,
  .whole-home-story-track,
  .bathroom-city-images{
    grid-auto-columns:minmax(250px,88vw);
    gap:10px;
  }
  .atlas-rail-head>div{
    grid-template-columns:46px 1fr;
  }
  .atlas-rail-head>strong{
    white-space:normal;
  }

  .project-lightbox-media{
    height:58dvh;
  }
  .project-lightbox-prev,
  .project-lightbox-next{
    top:29dvh;
    width:44px;
    height:44px;
  }
  .project-lightbox-info h2{
    font-size:1.4rem;
  }

  .utility-links,
  .contact-methods strong,
  .footer-links a,
  .footer-links span{
    overflow-wrap:anywhere;
  }
}

/* ---------- Very narrow devices ---------- */
@media (max-width:360px){
  .container,.narrow{
    width:min(calc(100% - 18px),var(--max));
  }
  h1,
  .projects-hero h1,
  .city-hero h1{
    font-size:2.3rem;
  }
  h2{
    font-size:1.92rem;
  }
  .brand img,.custom-logo{
    width:132px;
  }
  .menu-toggle{
    width:44px;
    height:44px;
  }
  .inquiry-form,
  .legal-content,
  .thank-you-next{
    padding:20px 14px;
  }
  .atlas-track,
  .whole-home-story-track,
  .bathroom-city-images{
    grid-auto-columns:88vw;
  }
}

/* ---------- Touch and performance behavior ---------- */
@media (hover:none), (pointer:coarse){
  .project-card:hover,
  .service-card:hover,
  .audience-card:hover,
  .city-service-card:hover,
  .area-directory-card:hover,
  .portfolio-card:hover,
  .proof-card:hover{
    transform:none;
  }
  .project-card:hover img,
  .service-card:hover img,
  .portfolio-card:hover img,
  .city-gallery-item:hover img,
  .story-shot:hover img,
  .service-pathway-media:hover img{
    transform:none;
  }
  .main-nav,
  .site-header.is-scrolled,
  .hero-sidecard,
  .city-hero-card,
  .projects-hero-aside,
  .material-board{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .motion-ready .reveal,
  .motion-ready .reveal.visible{
    opacity:1;
    transform:none;
  }
  .floorplan-model,
  .design-orbit,
  .design-orbit span{
    animation:none!important;
  }
}

/* Print remains clean and readable. */
@media print{
  .utility,.site-header,.site-footer,.project-filter-shell,.collection-nav,.btn,.menu-toggle,.project-lightbox{
    display:none!important;
  }
  body{
    background:#fff;
    color:#000;
  }
  .section{
    padding:28px 0;
  }
  .reveal,.motion-ready .reveal{
    opacity:1!important;
    transform:none!important;
  }
}