/* ============================================================
   V18 — symmetric editorial spacing refinement
   Removes the unused top and centre voids in the hero while
   increasing deliberate outer margins across the whole site.
   ============================================================ */
:root{
  --v18-shell-max:1420px;
  --v18-gutter:180px;
}

/* One calm, consistent content grid across the website. */
.shell,
.header-inner,
.v13-hero .hero-inner{
  width:min(var(--v18-shell-max),calc(100% - var(--v18-gutter)));
  margin-inline:auto;
}

/* Header follows the same vertical axes as the page content. */
.header-inner{
  gap:36px;
}

/* Hero: top-align both columns and use the full grid intelligently. */
.v13-hero .hero-inner{
  grid-template-columns:minmax(0,1fr) minmax(390px,430px);
  gap:clamp(58px,5vw,76px);
  justify-content:stretch;
  align-items:start;
  padding-block:clamp(60px,5vw,76px) clamp(68px,5.5vw,84px);
}
.v13-hero .hero-copy{
  max-width:none;
  padding:0;
  align-self:start;
}
.v13-hero .hero-intro{
  max-width:64ch;
}
.v13-hero .hero-detail{
  max-width:68ch;
}
.v13-hero .hero-portrait{
  width:100%;
  max-width:430px;
  justify-self:end;
  align-self:start;
}

/* Give the sections clearer, balanced breathing room without dead space. */
.about.section,
.principles.section,
.work.section,
.youtube.section{
  padding-block:clamp(92px,8vw,132px);
}
.focus.section{
  margin-block:clamp(18px,2vw,34px);
}
.build.section{
  padding-block:clamp(94px,8vw,128px);
}

@media(max-width:1180px){
  :root{--v18-gutter:96px}
  .v13-hero .hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(340px,390px);
    gap:48px;
    padding-block:58px 70px;
  }
}

@media(max-width:900px){
  :root{--v18-gutter:48px}
  .shell,
  .header-inner,
  .v13-hero .hero-inner{width:calc(100% - var(--v18-gutter))}
  .v13-hero .hero-inner{
    grid-template-columns:1fr;
    gap:38px;
    padding-block:48px 66px;
  }
  .v13-hero .hero-copy{max-width:720px}
  .v13-hero .hero-portrait{justify-self:center;max-width:410px}
}

@media(max-width:620px){
  :root{--v18-gutter:34px}
  .v13-hero .hero-inner{gap:31px;padding-block:39px 56px}
  .about.section,
  .principles.section,
  .work.section,
  .youtube.section,
  .build.section{padding-block:72px}
}