/*
  TOP layout refinement — 2026-08
  Scope: TOP page only.
  Purpose: viewport resilience, clearer section hierarchy, stronger WORKS grouping.
*/

.home-page main{min-width:0}
.home-page .section-grid,
.home-page .section,
.home-page .projects-head,
.home-page .projects-viewport,
.home-page .about-main{min-width:0}

/* Prevent heading/copy collisions while preserving the approved editorial grid. */
.home-page .section h2,
.home-page .projects-head h2,
.home-page .section-copy,
.home-page .services-intro,
.home-page .projects-head>p:last-child,
.home-page .hero-lead{min-width:0;overflow-wrap:anywhere}

@media (min-width:1200px){
  .home-page .philosophy h2{grid-column:1/7}
  .home-page .philosophy .section-copy{grid-column:8/13;max-width:34em;justify-self:start}
  .home-page .services h2{grid-column:1/7}
  .home-page .services-intro{grid-column:8/13;max-width:35em;justify-self:start}
  .home-page .projects-head h2{grid-column:1/7}
  .home-page .projects-head>p:last-child{grid-column:8/13;max-width:31em;justify-self:start}
}

/* Small laptops / landscape tablets: change composition instead of squeezing desktop. */
@media (min-width:901px) and (max-width:1199px){
  :root{--pad:clamp(34px,5vw,58px)}
  .home-page .hero{padding-top:126px;padding-bottom:74px;column-gap:20px}
  .home-page .hero-title{grid-column:1/13;font-size:clamp(42px,6.5vw,62px);white-space:normal}
  .home-page .hero-lead{grid-column:7/13;margin:12px 0 0;max-width:31em;font-size:clamp(14px,1.45vw,16px)}

  .home-page .section{row-gap:28px;column-gap:20px;padding-top:clamp(84px,9vw,112px);padding-bottom:clamp(84px,9vw,112px)}
  .home-page .philosophy h2,
  .home-page .services h2{grid-column:1/8}
  .home-page .philosophy .section-copy,
  .home-page .services-intro{grid-column:8/13;margin:0;max-width:100%;font-size:14px;line-height:1.95}
  .home-page .services .service-list{grid-column:1/13}

  .home-page .projects-head{row-gap:24px;column-gap:20px}
  .home-page .projects-head h2{grid-column:1/8}
  .home-page .projects-head>p:last-child{grid-column:8/13;margin:0;align-self:start;max-width:29em}
}

/* At narrow-laptop widths, stack heading and explanation deliberately. */
@media (min-width:901px) and (max-width:1039px){
  .home-page .philosophy h2,
  .home-page .services h2,
  .home-page .philosophy .section-copy,
  .home-page .services-intro,
  .home-page .projects-head h2,
  .home-page .projects-head>p:last-child{grid-column:1/13}
  .home-page .philosophy .section-copy,
  .home-page .services-intro,
  .home-page .projects-head>p:last-child{margin-top:0;max-width:42em}
  .home-page .section-copy p:last-child{margin-bottom:0}
}

/* WORKS: editorial groups instead of card boxes. */
.home-page .projects[data-layout="grid"] .projects-viewport{max-width:min(1180px,calc(100vw - (var(--pad) * 2)))}
.home-page .projects[data-layout="grid"] .projects-track{
  counter-reset:top-work;
  gap:72px 40px;
}
.home-page .projects[data-layout="grid"] .project-card{
  counter-increment:top-work;
  position:relative;
  padding:20px 0 26px;
  border-top:1px solid rgba(24,34,46,.16);
}
.home-page .projects[data-layout="grid"] .project-card::before{
  content:"0" counter(top-work);
  position:absolute;
  top:20px;
  left:0;
  right:auto;
  z-index:4;
  color:#647789;
  font-size:10px;
  line-height:1;
  letter-spacing:.15em;
  font-weight:500;
}
.home-page .projects[data-layout="grid"] .project-art{
  width:88%;
  aspect-ratio:16/10;
  margin:32px 0 0;
  box-shadow:0 8px 22px rgba(24,34,46,.035);
}
.home-page .projects[data-layout="grid"] .project-meta{margin-top:20px;padding-right:0}
.home-page .projects[data-layout="grid"] .project-card h3{max-width:84%;margin-bottom:7px}
.home-page .projects[data-layout="grid"] .project-card strong{max-width:31em}
.home-page .projects[data-layout="grid"] .project-actions{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(24,34,46,.08);
}
.home-page .projects[data-layout="grid"] .all-projects{margin-top:54px}

@media (min-width:901px) and (max-width:1199px){
  .home-page .projects[data-layout="grid"] .projects-viewport{max-width:calc(100vw - (var(--pad) * 2))}
  .home-page .projects[data-layout="grid"] .projects-track{gap:58px 28px}
  .home-page .projects[data-layout="grid"] .project-art{width:92%;margin-top:30px}
}

/* Mobile/tablet: one project = one unmistakable group. */
@media (max-width:900px){
  .home-page .section-index{margin-bottom:18px}
  .home-page .section-copy,
  .home-page .services-intro{margin-top:18px}
  .home-page .projects[data-layout="grid"] .projects-track{gap:0}
  .home-page .projects[data-layout="grid"] .project-card{
    position:relative;
    padding:18px 0 32px;
    margin:0;
    border-top:1px solid rgba(24,34,46,.15);
  }
  .home-page .projects[data-layout="grid"] .project-card:last-child{border-bottom:1px solid rgba(24,34,46,.10)}
  .home-page .projects[data-layout="grid"] .project-card::before{
    top:18px;
    left:0;
    right:auto;
    font-size:9px;
  }
  .home-page .projects[data-layout="grid"] .project-art{
    width:92%;
    max-width:620px;
    margin:28px 0 0;
    aspect-ratio:16/10;
  }
  .home-page .projects[data-layout="grid"] .project-meta{margin-top:16px;padding-right:0}
  .home-page .projects[data-layout="grid"] .project-card h3{max-width:88%}
  .home-page .projects[data-layout="grid"] .project-actions{margin-top:14px;padding-top:12px}
}

@media (max-width:620px){
  .home-page .hero{padding-top:92px;padding-bottom:46px}
  .home-page .hero-title{max-width:12em}
  .home-page .hero-lead{max-width:28em}
  .home-page .section{padding-top:48px;padding-bottom:48px}
  .home-page .section h2,.home-page .projects-head h2{margin-bottom:0}
  .home-page .section-copy,.home-page .services-intro{margin-top:14px}
  .home-page .projects[data-layout="grid"] .project-art{width:94%;margin-top:26px}
}

/* WORKS horizontal breathing room — keep the section editorial, not edge-heavy. */
@media (min-width:1200px){
  .home-page .projects[data-layout="grid"] .projects-head,
  .home-page .projects[data-layout="grid"] .projects-viewport,
  .home-page .projects[data-layout="grid"] .all-projects{
    width:calc(100% - clamp(48px,5vw,76px));
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
  }
  .home-page .projects[data-layout="grid"] .projects-head{margin-bottom:52px}
  .home-page .projects[data-layout="grid"] .all-projects{display:block;margin-top:54px}
}

@media (min-width:901px) and (max-width:1199px){
  .home-page .projects[data-layout="grid"] .projects-head,
  .home-page .projects[data-layout="grid"] .projects-viewport,
  .home-page .projects[data-layout="grid"] .all-projects{
    width:calc(100% - clamp(28px,4vw,48px));
    margin-left:auto;
    margin-right:auto;
  }
  .home-page .projects[data-layout="grid"] .all-projects{display:block}
}

@media (max-width:900px){
  .home-page .projects[data-layout="grid"] .projects-head{
    padding-left:4px;
    padding-right:4px;
  }
  .home-page .projects[data-layout="grid"] .projects-viewport{
    padding-left:24px;
    padding-right:24px;
  }
  .home-page .projects[data-layout="grid"] .project-art{
    margin-left:auto;
    margin-right:auto;
  }
  .home-page .projects[data-layout="grid"] .all-projects{
    margin-left:24px;
    margin-right:24px;
  }
}

@media (max-width:620px){
  .home-page .projects[data-layout="grid"] .projects-viewport{
    padding-left:22px;
    padding-right:22px;
  }
  .home-page .projects[data-layout="grid"] .all-projects{
    margin-left:22px;
    margin-right:22px;
  }
}

/* WORKS heading rhythm v3 -------------------------------------------------
   Match the other TOP sections and avoid a doubled divider before row one. */
.home-page .projects[data-layout="grid"] .projects-head{
  row-gap:0;
}
.home-page .projects[data-layout="grid"] .projects-head .section-index{
  grid-column:1/13;
  margin-bottom:40px;
}
.home-page .projects[data-layout="grid"] .projects-head h2{
  margin:0;
  align-self:start;
}
.home-page .projects[data-layout="grid"] .projects-head>p:last-child{
  margin:4px 0 0;
  align-self:start;
  line-height:2;
}

@media (min-width:1200px){
  .home-page .projects[data-layout="grid"] .projects-head h2{grid-column:1/7}
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{
    grid-column:8/13;
    max-width:31em;
    justify-self:start;
  }
}

/* Keep the same left-heading / right-copy composition on small laptops. */
@media (min-width:901px) and (max-width:1199px){
  .home-page .projects[data-layout="grid"] .projects-head h2{grid-column:1/7}
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{
    grid-column:7/13;
    max-width:30em;
    margin:4px 0 0;
  }
}

/* The heading divider becomes the first row's top boundary. */
@media (min-width:901px){
  .home-page .projects[data-layout="grid"] .projects-head{margin-bottom:76px}
  .home-page .projects[data-layout="grid"] .projects-head::after{bottom:-38px}
  .home-page .projects[data-layout="grid"] .project-card:nth-child(-n+2){border-top:0}
  .home-page .projects[data-layout="grid"] .project-card:nth-child(-n+2)::before{top:0}
  .home-page .projects[data-layout="grid"] .project-card:nth-child(-n+2) .project-art{margin-top:12px}
}

@media (max-width:900px){
  .home-page .projects[data-layout="grid"] .projects-head .section-index{margin-bottom:18px}
  .home-page .projects[data-layout="grid"] .projects-head h2,
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{grid-column:1/13}
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{
    margin-top:18px;
    max-width:34em;
    line-height:1.9;
  }
  .home-page .projects[data-layout="grid"] .projects-head{margin-bottom:48px}
  .home-page .projects[data-layout="grid"] .projects-head::after{bottom:-24px}
  .home-page .projects[data-layout="grid"] .project-card:first-child{border-top:0}
  .home-page .projects[data-layout="grid"] .project-card:first-child::before{top:0}
  .home-page .projects[data-layout="grid"] .project-card:first-child .project-art{margin-top:12px}
}

/* WORKS containment v4 -----------------------------------------------------
   Root cause fix: legacy responsive rules split horizontal spacing between
   .projects-sticky / .projects-head / .projects-viewport.  The sticky wrapper
   is now the single padding owner at every viewport width. */
.home-page .projects[data-layout="grid"] .projects-sticky.section-grid{
  width:100%;
  max-width:none;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.home-page .projects[data-layout="grid"] .projects-head,
.home-page .projects[data-layout="grid"] .projects-viewport,
.home-page .projects[data-layout="grid"] .all-projects{
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

/* Keep the heading/copy on the same editorial grid as the other sections. */
.home-page .projects[data-layout="grid"] .projects-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
}
.home-page .projects[data-layout="grid"] .projects-head .section-index{
  grid-column:1/13;
}

@media (min-width:901px){
  .home-page .projects[data-layout="grid"] .projects-head h2{
    grid-column:1/7;
  }
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{
    grid-column:8/13;
    margin-top:4px;
  }
}

@media (max-width:900px){
  .home-page .projects[data-layout="grid"] .projects-sticky.section-grid{
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
  .home-page .projects[data-layout="grid"] .projects-head{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
  .home-page .projects[data-layout="grid"] .projects-head h2,
  .home-page .projects[data-layout="grid"] .projects-head>p:last-child{
    width:100%;
    max-width:100%;
  }
  .home-page .projects[data-layout="grid"] .projects-viewport{
    overflow:visible;
  }
  .home-page .projects[data-layout="grid"] .projects-track{
    width:100%;
  }
  .home-page .projects[data-layout="grid"] .all-projects{
    display:block;
  }
}

/* Final TOP refinements v5 ------------------------------------------------ */
/* The service support sentence stays, but its decorative top divider is removed. */
.home-page .section-action-service{
  border-top:0;
  padding-top:0;
}

/* VIEW ALL WORKS follows the same text-link / underline motion language as other links. */
.home-page .projects[data-layout="grid"] .all-projects.motion-link{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  min-width:0;
  min-height:48px;
  margin:46px 0 0 auto;
  padding:0 4px;
  border:0;
  border-bottom:1px solid rgba(24,34,46,.28);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  align-items:center;
  justify-content:flex-start;
  gap:28px;
  text-align:left;
  font-size:11px;
  letter-spacing:.12em;
  transition:color .28s ease,border-color .28s ease;
}
.home-page .projects[data-layout="grid"] .all-projects.motion-link i{
  font-style:normal;
  color:var(--blue);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.home-page .projects[data-layout="grid"] .all-projects.motion-link:hover{
  background:transparent;
  color:var(--ink);
  border-color:rgba(24,34,46,.28);
}
.home-page .projects[data-layout="grid"] .all-projects.motion-link:hover i{transform:translateX(5px)}

@media (max-width:900px){
  .home-page .projects[data-layout="grid"] .all-projects.motion-link{
    margin:32px 0 0;
    min-height:46px;
  }
}


/* v7: project numbers stay on the left edge of each horizontal project group. */
.home-page .projects[data-layout="grid"] .project-card::before{
  left:0;
  right:auto;
  text-align:left;
}

/* Final cascade: project index remains the left-most visual anchor in horizontal layouts. */
.home-page .projects[data-layout="grid"] .project-card .work-index,
.home-page .projects[data-layout="grid"] .project-card .project-index {
  left: 0;
  right: auto;
  text-align: left;
}