/* Homepage (P1) */

/* --- hero --------------------------------------------------------------- */
.home-hero{
  display:flex; flex-direction:column;
  min-height:100vh;
  gap:3.125rem 0;
  padding:13.25rem 9.375rem 0;
  background:url("../img/hero-bg.webp") center center / cover no-repeat;
}
.home-hero__eyebrow{
  align-self:center; text-align:center;
  font-size:2.5rem; font-weight:500; line-height:1.3;
  color:var(--c-amber);
}
.home-hero h1{
  align-self:center; text-align:center;
  font-size:3.625rem; font-weight:600; line-height:1.35;
  color:var(--c-inverse);
}

/* --- about the studio --------------------------------------------------- */
.home-about{
  display:flex; flex-direction:column; justify-content:flex-start;
  flex-grow:0; flex-shrink:0;
  min-height:39.375rem;
  gap:2.813rem 0;
  padding:7.5rem 9.375rem;
  background:var(--c-brown);
}
.home-about__logo{ align-self:flex-start; }
.home-about__text{
  align-self:flex-start;
  max-width:83.188rem;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-inverse);
}
.home-about__text p{ margin-block-end:20px; }

/* --- how we work -------------------------------------------------------- */
.home-work{
  display:flex; flex-direction:column;
  margin-top:10rem;
  padding:0 9.375rem;
}
/* base lives in main.css; the homepage pulls its eyebrows up by 1rem, but only
   at desktop — this selector outranks the tablet/mobile rules, so it must be
   fenced inside a min-width query or it leaks down. */
@media (min-width:1025px){
  .home-work .section-eyebrow p,
  .home-guides .section-eyebrow p{ margin-top:-1rem; }
}

.home-work__row{
  align-self:center;
  display:flex; flex-direction:row;
  justify-content:space-between; align-items:center;
  gap:0 10rem;
  margin-bottom:8.125rem;
}
/* Live splits three of the four rows 50/50 and the "Research-informed" row
   ~52.96/47.04 (its copy is wider). The ratios hold at 1440/1200/1025, so they
   are expressed as flex-grow weights on a zero basis. */
.home-work__row > *{ flex:1 1 0; min-width:0; }
.home-work__row--wide-copy > .home-work__copy{ flex-grow:52.96; }
.home-work__row--wide-copy > .home-work__media{ flex-grow:47.04; }
.home-work__row:last-child{ margin-bottom:10rem; }   /* live: last row uses 10rem */
.home-work__copy{
  align-self:center;
  display:flex; flex-direction:column; justify-content:center;
  gap:1.875rem 0;
}
.home-work__copy h3{
  align-self:flex-start; text-align:start;
  font-size:2rem; font-weight:600; line-height:1.4;
  color:var(--c-primary);
}
.home-work__copy p{
  align-self:flex-start; text-align:start;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-primary);
  margin-block-end:0;
}
.home-work__img{ width:100%; max-width:40rem; }

/* --- our guides --------------------------------------------------------- */
.home-guides{ display:flex; flex-direction:column; }
/* the live 20px block-end margin on a non-last widget */
.home-guides > .section-eyebrow{ margin-block-end:20px; }
.home-guides__band{
  display:flex; flex-direction:row; justify-content:space-between;
  gap:10rem;
  padding:10rem 9.375rem;
  background:url("../img/guides-bg.webp") center left / cover no-repeat;
}
.home-guides__card{
  display:flex; flex-direction:column;
  gap:0;
  padding:4.688rem 3.75rem 5rem 5rem;
  background:#FFFFFF;
}
.home-guides__card h2{
  align-self:flex-start; text-align:start;
  font-size:2rem; font-weight:600; line-height:1.4;
  color:var(--c-primary);
}
.home-guides__price{
  align-self:flex-start;
  margin:1.563rem 0;
  font-size:3.625rem; font-weight:400; line-height:1.4;
  color:var(--c-primary);
}
.home-guides__price p{ margin-block-end:0; }
.home-guides__desc{
  align-self:flex-start; text-align:start;
  max-width:35rem;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-primary);
}
.home-guides__desc p{ margin-block-end:0; }

.home-guides__card .btn{
  align-self:flex-start;
  max-width:21.25rem; width:100%;
  font-size:1.5rem; line-height:1;
  padding:1.625rem 4rem;
}
/* The band's card/poster split is not a fixed ratio on live — it tracks the
   available width linearly. Measured card widths 620/483/383 at content widths
   1140/900/725 fit calc(57.08% - 30.7px) exactly at all three; the poster takes
   the remainder. */
.home-guides__media{ flex:1 1 0; min-width:0; display:flex; justify-content:center; align-items:center; }
.home-guides__poster{ width:100%; max-width:26.25rem; }
.home-guides__card{ flex:0 0 calc(57.08% - 30.7px); }

/* --- get in touch ------------------------------------------------------- */
.home-contact{
  display:flex; flex-direction:column; justify-content:flex-start;
  flex-grow:0; flex-shrink:0;
  min-height:29.625rem;
  gap:3.125rem;
  padding:7.5rem 9.375rem;
  background:var(--c-brown);
}
.home-contact__title{
  width:100%; max-width:100%;
  text-align:center;
  color:var(--c-inverse);
}
.home-contact__title p{
  margin-block-end:0;
  font-size:2.875rem; font-weight:500; line-height:1.725rem;
}
.home-contact__links{
  align-self:stretch;
  display:grid; grid-template-columns:repeat(4, 1fr); justify-items:center;
  gap:2rem;
}
.home-contact__links p{ margin-block-end:0; }
.home-contact__links a{
  font-size:1.5rem; font-weight:400; line-height:1.65;
  text-decoration:underline;
  color:var(--c-amber);
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width:1024px){
  .home-hero{ min-height:100vh; gap:2.5rem; padding:20.438rem 3.286rem; }
  .home-hero__eyebrow{ font-size:2.286rem; }
  .home-hero h1{ max-width:41rem; font-size:3.143rem; line-height:1.35; }

  .home-about{ min-height:0; gap:2.813rem 0; padding:4.375rem 3.286rem; }
  .home-about__text{ font-size:1.143rem; }
  .home-about__text p{ margin-block-end:16px; }

  .home-work{ margin-top:7.5rem; margin-bottom:0; padding:0 3.286rem; }
  .section-eyebrow p{ margin:0 0 3.75rem; font-size:1.714rem; line-height:1.3; }
  .home-work__row{ gap:1.75rem; margin-bottom:5rem; }
  .home-work__row:last-child{ margin-bottom:7.5rem; }
  .home-work__copy{ gap:1.25rem; }
  .home-work__copy h3{ font-size:1.286rem; line-height:1.3; }
  .home-work__copy p{ font-size:1.143rem; }

  .home-guides__band{ gap:7.25rem; padding:7.5rem 3.286rem; background-image:url("../img/guides-bg-tablet.webp"); }
  .home-guides__card{ padding:1.875rem 1.5rem 2.5rem; }
  .home-guides__card h2{ font-size:1.286rem; }
  .home-guides__price{ font-size:2.714rem; line-height:1; }
  .home-guides__desc{ font-size:1.143rem; }
  .home-guides__card .btn{ font-size:1.143rem; padding:.938rem; }
  .home-guides__poster{ max-width:14.813rem; }
  .home-guides__card{ flex:0 0 50%; }   /* live sets the card to 50% at tablet */

  .home-contact{ min-height:0; gap:2.143rem 0; padding:4.375rem 3.286rem; }
  .home-contact__title p{ font-size:1.714rem; line-height:1.3; }
  .home-contact__links a{ font-size:1.143rem; }
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width:767px){
  .home-hero{ padding:12.813rem 1.875rem; background-image:url("../img/hero-bg-mobile.webp"); }
  .home-hero__eyebrow{ font-size:1.857rem; }
  .home-hero h1{ max-width:100%; font-size:2.5rem; }

  .home-about{ flex-direction:column; gap:1.375rem 0; padding:3.75rem 1.875rem; }
  .home-about__text{ font-size:1.143rem; }
  .home-about__text p{ margin-block-end:14px; }

  .home-work{ margin-top:5.625rem; padding:0 1.875rem; }

  .section-eyebrow{ max-width:15rem; }
  .section-eyebrow p{ font-size:2rem; margin:0 0 3.75rem; }

  /* live pushes the copy after the image on mobile (its "order end hack"),
     so every row reads image-then-text regardless of DOM order */
  .home-work__row{ flex-wrap:wrap; gap:2.5rem; margin-bottom:3.125rem; }
  .home-work__media{ order:0; flex:1 1 100%; }
  .home-work__copy{ order:1; flex:1 1 100%; }
  .home-work__row:last-child{ margin-bottom:5.625rem; }
  .home-work__copy{ gap:1.25rem; }
  .home-work__copy h3{ font-size:1.429rem; }
  .home-work__copy p{ font-size:1.143rem; }
  .home-work__img{ max-width:100%; }

  .home-guides__band{
    flex-direction:column; gap:3.75rem;
    padding:5.625rem 0.938rem;
    background-image:url("../img/guides-bg-mobile.webp");
  }
  /* live puts the poster above the card on mobile (order start hack) and insets
     it with 2.375rem of wrapper padding */
  .home-guides__media{ order:-1; padding:0 2.375rem; }
  /* width:auto so the poster never upscales past its natural 428px, matching live */
  .home-guides__poster{ width:auto; max-width:100%; }
  .home-guides__card{ flex:0 1 auto; }
  .home-guides__card h2{ font-size:1.429rem; }
  .home-guides__price{ margin:1.875rem 0; font-size:3rem; }
  .home-guides__desc{ font-size:1.143rem; }
  .home-guides__card .btn{ margin:0; font-size:1.143rem; padding:.875rem; }

  .home-contact{ flex-direction:column; gap:2.143rem 0; padding:3.75rem 1.875rem; }
  .home-contact__title{ max-width:100%; }
  .home-contact__title p{ font-size:2rem; }
  .home-contact__links{ grid-template-columns:repeat(2, 1fr); gap:2rem; }
  .home-contact__links a{ font-size:1.143rem; }
}