/* Homepage layout. The system file carries type, bands, buttons and chrome. */

/* --- Hero --------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;column-gap:4.5%;padding-top:55px;padding-bottom:28px}
.hero-eyebrow{grid-column:1/-1;color:var(--muted);margin-bottom:28px}
.hero h1{grid-column:1;grid-row:2;font:400 clamp(70px,8.1vw,128px)/.99 var(--body);letter-spacing:-.065em;position:relative;z-index:1}
.hero-copy{grid-column:1;grid-row:3;padding:40px 0 34px}
.hero-thought{font:400 clamp(30px,3.2vw,48px)/1.13 var(--body);letter-spacing:-.04em}
.support{color:var(--muted);margin-top:17px;font-size:16px}
.hero-copy .wave{margin-top:34px}
.hero-image{grid-column:2;grid-row:2/4;margin-top:105px;align-self:start;position:relative}
.image-frame{position:relative}
.image-frame::before{
  content:'';position:absolute;z-index:-1;right:34px;top:-33px;
  width:42%;height:calc(100% + 65px);
  border-top:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
}
.hero-image img{aspect-ratio:1402/1122}
.hero-foot{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;
  margin-top:50px;padding-top:26px;border-top:1px solid var(--rule-dark);color:var(--muted);
}

/* --- Two ways in -------------------------------------------------------- */
.ways{margin-top:48px;padding-block:62px 72px}
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:60px;--step:120ms}
.ways-grid article{border-top:1px solid var(--rule-bronze);padding-top:22px}
.ways-grid h3{font:400 clamp(34px,4.1vw,59px)/1.08 var(--body);letter-spacing:-.05em;margin-top:24px}
.ways-grid article>p:not(.label){max-width:370px;font-size:17px;line-height:1.6;margin-top:24px}
.ways-grid .wave{margin-top:32px}

/* --- Counselling -------------------------------------------------------- */
.counselling{padding-block:68px 100px}
.counselling .section-heading{padding-bottom:50px}
.counselling-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:7%;align-items:center}
.counselling-grid figure{margin-top:50px}
.section-copy h2{font:400 clamp(35px,4vw,58px)/1.11 var(--body);letter-spacing:-.055em}
.section-copy h2 em{font:400 italic 1.28em/.9 var(--serif);letter-spacing:-.025em;color:var(--deep-rose)}
.section-copy>p{max-width:410px;font-size:16px;line-height:1.8;margin-top:32px}
.section-copy .wave{margin-top:30px}

/* --- Workplace ---------------------------------------------------------- */
.workplace-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:12%;padding-block:100px 110px;align-items:center}
.workplace-copy>.label{color:var(--muted);margin-bottom:26px}
.workplace-intro h2{font:400 clamp(55px,6.5vw,94px)/1.01 var(--body);letter-spacing:-.06em}
.workplace-copy>p:not(.label){font-size:18px;max-width:390px;color:var(--muted);margin-top:30px}
.workplace-intro .wave{margin-top:34px}
.workplace-intro figure{max-width:460px}
.workplace-intro img{aspect-ratio:1122/1402}

/* --- Contact ------------------------------------------------------------ */
.contact{padding-block:65px 75px}
.contact .label{color:var(--muted)}
.contact h2{font:400 clamp(62px,9.2vw,132px)/1.02 var(--body);letter-spacing:-.065em;margin-top:28px}
.contact-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:35px}
.contact-bottom p{font-size:22px;line-height:1.5}
.contact-bottom .wave{min-width:225px}

@media(min-width:1500px){
  .hero-image{margin-top:126px}
  .hero-copy{padding-top:50px}
}

@media(max-width:900px){
  .hero{column-gap:6%}
  .hero h1{font-size:8.6vw}
  .hero-thought{font-size:30px}
  .hero-image{margin-top:70px}
  .hero-copy{padding-top:28px}
  .hero-copy .wave{margin-top:24px}
  .hero-foot{margin-top:30px}
  .ways-grid{gap:7%}
  .ways-grid h3{font-size:38px}
  .ways-grid article>p:not(.label){font-size:15px}
  .counselling-grid{gap:6%}
  .section-copy h2{font-size:35px}
  .section-copy>p{font-size:15px}
  .workplace-intro{gap:8%;padding-block:75px}
  .workplace-intro h2{font-size:62px}
  .workplace-copy>p:not(.label){font-size:16px}
}

@media(max-width:650px){
  .hero{display:flex;flex-direction:column;padding-top:38px;padding-bottom:25px}
  .hero-eyebrow{max-width:275px;line-height:1.8;margin-bottom:25px}
  .hero h1{font-size:clamp(64px,13.5vw,87px);line-height:1.02;letter-spacing:-.062em}
  .hero-copy{padding:28px 0 40px}
  .hero-thought{font-size:31px;line-height:1.15}
  .support{font-size:14px;margin-top:15px}
  .hero-copy .wave{margin-top:24px}
  .hero-image{width:100%;margin-top:0}
  .image-frame::before{display:none}
  .hero-foot{flex-direction:column;gap:8px;margin-top:30px;padding-top:20px}
  .ways{margin-top:15px;padding-block:40px 48px}
  .ways-grid{grid-template-columns:1fr;gap:42px;margin-top:36px}
  .ways-grid article{padding-top:18px}
  .ways-grid h3{font-size:43px;margin-top:21px}
  .ways-grid article>p:not(.label){margin-top:21px;font-size:16px}
  .ways-grid .wave{margin-top:24px}
  .counselling{padding-block:42px 52px}
  .counselling .section-heading{flex-direction:row;padding-bottom:28px}
  .counselling-grid{display:flex;flex-direction:column;gap:32px;align-items:stretch}
  .counselling-grid figure{margin-top:0}
  .section-copy h2{font-size:43px;line-height:1.09;letter-spacing:-.05em}
  .section-copy>p{font-size:16px;margin-top:26px}
  .workplace-intro{display:flex;flex-direction:column;gap:42px;padding-block:53px 56px;align-items:stretch}
  .workplace-intro h2{font-size:63px;line-height:1.04}
  .workplace-intro figure{width:84%;align-self:flex-end}
  .contact{padding-block:42px 50px}
  .contact h2{font-size:70px;margin-top:25px;line-height:1.05}
  .contact-bottom{align-items:flex-start;flex-direction:column;gap:27px;margin-top:26px}
  .contact-bottom p{font-size:19px}
  .contact-bottom .wave{min-width:180px}
}