/* =========================================================
   GRID SYSTEM · build 10c · homepage
   12 columns · 1200px max · 24px gutter · one left edge.
   A span of n columns = n/12 of the container minus 24px*(12-n)/12:
     4 cols (one third)  = 33.333% - 16px
     6 cols (half)       = 50%     - 12px
     8 cols (two thirds) = 66.667% -  8px
   Everything aligns left to column 1; nothing is centered.
   Full-bleed is reserved for photographs and the interactive hotel.
   ========================================================= */
:root{ --g-gut:24px; --g-space:112px; --g-container:min(1200px, calc(100% - 96px)); }
@media (max-width:899px){ :root{ --g-space:72px; --g-container:calc(100% - 40px); } }

/* ---------- containers: one width, one left edge ---------- */
html body #proof > .wrap,
html body #system > .inner,
html body #services > .inner,
html body #field-notes > .inner,
html body #next-steps > .inner,
html body #about-teaser > .inner,
html body #contact > .inner{
  width:var(--g-container); max-width:none;
  margin-left:auto; margin-right:auto;
  padding-left:0; padding-right:0;
  text-align:left; box-sizing:border-box;
}

/* sections carry no side padding of their own: the container sets the edge */
html body #proof, html body #system, html body #services, html body #field-notes,
html body #next-steps, html body #about-teaser, html body #contact{ padding-left:0; padding-right:0; }
html body #next-steps .hp-interactive{ margin-left:0; margin-right:0; padding-left:0; padding-right:0; max-width:none; }
html body #next-steps .hp-interactive > *{ margin-left:0; padding-left:0; padding-right:0; }

/* ---------- one vertical rhythm ---------- */
html body #proof, html body #system, html body #services,
html body #field-notes, html body #about-teaser, html body #contact{
  padding-top:var(--g-space); padding-bottom:var(--g-space);
}
html body #next-steps{ padding-top:var(--g-space); padding-bottom:0; }

@media (min-width:900px){
  /* HERO: text = half (6 cols) from column 1 */
  html body header.hero{ padding-left:0; padding-right:0; }
  html body header.hero .hero-inner{
    margin-left:max(48px, calc((100% - 1200px) / 2)); margin-right:0;
    padding-left:0; padding-right:0; left:auto;
    width:calc(var(--g-container) / 2 - 12px); max-width:none; box-sizing:border-box;
  }
  html body header.hero .hero-inner > *{ margin-left:0; padding-left:0; }
  html body header.hero .hero-headline{ max-width:100%; }
  html body header.hero .hero-sub-primary{ max-width:calc(66.667% - 8px); }

  /* top utility strip: aligned to column 1 */
  html body .cta-strip{ justify-content:flex-start; padding-left:max(48px, calc((100% - 1200px) / 2)); padding-right:max(48px, calc((100% - 1200px) / 2)); }

  /* PROOF: heading two thirds · cards 2 × half */
  html body #proof .sec-head{ max-width:calc(66.667% - 8px); margin-left:0; margin-right:0; }
  html body #proof .grid.g2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--g-gut); max-width:none; width:100%; }

  /* SYSTEM: text two thirds (8) · image one third (4) */
  html body #system > .inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--g-gut); }
  html body #system > .inner > div:first-child{ grid-column:1 / span 8; max-width:none; }
  html body #system > .inner > .side-img{ grid-column:9 / span 4; width:auto; max-width:none; justify-self:stretch; }

  /* SERVICES: intro two thirds · cards 2 × half */
  html body #services .sec-label, html body #services h2,
  html body #services .h2-sub, html body #services .svc-framing{ max-width:calc(66.667% - 8px); margin-left:0; margin-right:0; text-align:left; }
  html body #services .services-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--g-gut); }
  html body #services .svc-content-link{ text-align:left; }

  /* FIELD NOTES: image half · text half · notes 2 × half */
  html body #field-notes .sec-label, html body #field-notes h2, html body #field-notes .h2-sub{ max-width:calc(66.667% - 8px); text-align:left; margin-left:0; margin-right:0; }
  html body #field-notes .fn-flagship{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--g-gut); }
  html body #field-notes .fn-notes{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--g-gut); }
  html body #field-notes .fn-all{ text-align:left; }

  /* INTERACTIVE: intro two thirds from column 1; the hotel itself stays full-bleed */
  html body #next-steps .hp-interactive{ max-width:calc(66.667% - 8px); margin-left:0; margin-right:0; padding-left:0; padding-right:0; text-align:left; }
  html body #next-steps .hp-interactive > *{ margin-left:0; padding-left:0; padding-right:0; text-align:left; }
  html body #next-steps .hp-stage-after{ text-align:left; }

  /* ABOUT: portrait one third (4) · text from column 5, two thirds wide */
  html body #about-teaser > .inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--g-gut); align-items:center; }
  html body #about-teaser .portrait{ grid-column:1 / span 4; width:auto; max-width:none; }
  html body #about-teaser > .inner > div:last-child{ grid-column:5 / span 8; max-width:none; }

  /* CONTACT: two thirds, left-aligned */
  html body #contact .sec-label, html body #contact h2, html body #contact p,
  html body #contact .bring, html body #contact .cta-row{ max-width:calc(66.667% - 8px); margin-left:0; margin-right:0; text-align:left; }
  html body #contact .cta-row{ justify-content:flex-start; align-items:center; }
}

/* interactive intro is a card: it keeps its inner padding; the card's edge sits on column 1 */
html body #next-steps .hp-interactive{ padding:32px 36px; box-sizing:border-box; }
@media (max-width:899px){ html body #next-steps .hp-interactive{ padding:24px 20px; } }

/* ---------- left alignment at EVERY width (review fix: tablet/phone still had centered headings) ---------- */
html body #proof .sec-head, html body #proof .sec-head *,
html body #services .sec-label, html body #services h2, html body #services .h2-sub, html body #services .svc-framing, html body #services .svc-content-link,
html body #field-notes .sec-label, html body #field-notes h2, html body #field-notes .h2-sub, html body #field-notes .fn-all,
html body #next-steps .hp-stage-after,
html body #contact .sec-label, html body #contact h2, html body #contact p, html body #contact .bring, html body #contact .cta-row, html body #contact .cta-trust{
  text-align:left; margin-left:0; margin-right:0;
}
html body #contact .cta-row{ justify-content:flex-start; }
@media (max-width:899px){
  html body #contact p, html body #contact .bring, html body #services .svc-framing{ max-width:none; padding-left:0; padding-right:0; }
}