/* Home — offsets measured on the live site at 1440px (section-relative) */

/* 1 hero: H1 top +180, subtitle +300, section 464 */
.hero .inner { padding-top: calc(var(--header-h) + 84px); padding-bottom: 135px; }
.hero h1 { max-width: 1126px; margin: 0 auto; }
.hero p { margin-top: 28px; }

/* 2 what we do: rule +48, H2 +88, para +227, quote +106, lotus +138, bottom 106 */
.what .inner { padding-top: 39px; padding-bottom: 106px; }
.what .quote { grid-column: 1 / span 10; grid-row: 1; margin-top: 58px; margin-left: -3px; }
.what .quote img { width: 390px; margin: -55px auto -260px; opacity: .1; }
.what .body { grid-column: 11 / span 13; grid-row: 1; }
.what h2 { margin-top: 30px; }
.what .t-large { margin-top: 68px; }

/* 3 events: rule +58, H2 +138, para +218, buttons +419, bottom 57 */
.events { background: #383838; color: var(--ice); }
.events .inner { padding-top: 49px; padding-bottom: 57px; }
.events .rule { background: var(--ice); opacity: .55; max-width: calc(18 * (100% + var(--col-gap)) / 24 - var(--col-gap)); }
.events .label { margin: 2px 0 0; }
.events h2 { color: var(--stone); margin-top: 32px; max-width: 900px; }
.events .t-normal { margin-top: 12px; max-width: calc(18 * (100% + var(--col-gap)) / 24 - var(--col-gap)); }
.events .ctas { display: flex; justify-content: center; gap: 24px; margin-top: 71px; flex-wrap: wrap; }
.events .btn-line { color: var(--stone); min-width: 330px; }

/* 4 philosophy: rule +48, label +70, H3 +75, columns +208, pulls +391/+758, trio below col B */
.philosophy .inner { padding-top: 39px; padding-bottom: 138px; }
.philosophy .top { grid-column: 1 / span 23; grid-row: 1; }
.philosophy .label { grid-column: 1 / span 4; grid-row: 2; margin: 2px 0 0; }
.philosophy h3 { grid-column: 7 / span 14; grid-row: 2; margin-top: 8px; }
.philosophy .col-a { grid-column: 7 / span 8; grid-row: 3; margin-top: 75px; }
.philosophy .col-b { grid-column: 16 / span 8; grid-row: 3; margin-top: 75px; }
.philosophy .pull { grid-column: 1 / span 6; grid-row: 3; padding-left: 40px; max-width: 290px; }
.philosophy .pull-a { margin-top: 258px; }
.philosophy .pull-b { margin-top: 625px; }
.philosophy .trio { padding-left: 40px; margin-top: 106px; }
.philosophy .trio h4 + h4 { margin-top: 36px; }
.philosophy .col p { margin-bottom: 18px; }

/* 5 recent work: rule +48, H2 +168, sub +248, text +347, learn more +589, paper +684, bottom 72 */
.work { color: var(--ice); background: #3a3d3f; }
.work .inner { padding-top: 39px; padding-bottom: 72px; }
.work .top { grid-column: 1 / -1; grid-row: 1; }
.work .rule { background: var(--ice); opacity: .6; }
.work .label { margin: 2px 0 0; }
.work .title { grid-column: 2 / span 20; grid-row: 2; margin-top: 62px; }
.work .sub { grid-column: 2 / span 22; grid-row: 3; margin-top: 12px; }
.work .right { grid-column: 15 / span 9; grid-row: 4; padding-left: 40px; margin-top: 67px; text-align: center; }
.work .right p { text-align: justify; }
.work .btn-line { color: var(--pale); min-height: 58px; margin-top: 80px; }
.work .btn-solid { display: flex; width: 324px; margin: 37px auto 0; }

@media (max-width: 767px) {
  .hero .inner { padding-top: calc(var(--header-h) + 46px); padding-bottom: 88px; }
  .hero p { margin-top: 26px; }
  .what .inner, .events .inner, .philosophy .inner, .work .inner { padding-top: 34px; padding-bottom: 40px; }
  .what .quote { margin: 10px 40px 0; }
  .what .quote img { width: 201px; margin: -30px auto 0; }
  .what .body { margin-top: 0 !important; }
  .what .t-large { margin-top: 22px; }
  .events .rule, .events .t-normal { max-width: none; }
  .events h2 { margin-top: 80px; }
  .events .t-normal { margin-top: 45px; }
  .events .ctas { margin-top: 24px; flex-direction: column; align-items: center; }
  .events .btn-line { min-width: 255px; }
  .philosophy .inner { display: flex; flex-direction: column; }
  .philosophy .inner > * { margin-top: 0; }
  .philosophy .top { order: 1; }
  .philosophy .label { order: 2; margin-top: 8px; }
  .philosophy h3 { order: 3; margin-top: 80px; }
  .philosophy .pull-b { order: 4; margin: 56px 0 34px; padding: 0 17px; max-width: none; }
  .philosophy .col-a { order: 5; }
  .philosophy .pull-a { order: 6; margin: 0 0 30px; padding: 0 17px; max-width: none; }
  .philosophy .col-b { order: 7; }
  .philosophy .trio { margin-top: 22px; padding: 0 40px; }
  .work .title { margin-top: 80px; }
  .work .right { padding: 0 40px; margin-top: 64px; }
  .work .btn-line { margin-top: 24px; }
  .work .btn-solid { width: 255px; }
}