/* Homepage styles — rebuilt from the original static mockup
   (HTML/index.css). Loaded only on the home template, after the global
   stylesheet, so it overrides the shared tokens and styles for this page.

   The fluid type scale below is the mockup's (Utopia 360px→1240px,
   18→20px, 1.2→1.25, steps −2…8). Redeclaring the --step-* tokens here
   gives the homepage exactly the mockup's font sizes. */

:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1:  clamp(1.35rem,   1.2631rem + 0.3864vw, 1.5625rem);
  --step-2:  clamp(1.62rem,   1.4837rem + 0.6057vw, 1.9531rem);
  --step-3:  clamp(1.944rem,  1.7405rem + 0.9044vw, 2.4414rem);
  --step-4:  clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5:  clamp(2.7994rem, 2.384rem  + 1.8461vw, 3.8147rem);
  --step-6:  clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
  --step-7:  clamp(4.0311rem, 3.2418rem + 3.508vw,  5.9605rem);
  --step-8:  clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);
}

main { padding-block: 0; }
section { padding-block: 4rem; }

p { margin-block-end: 1rem; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  margin-block: 0;
  line-height: 100%;
}
h1 { font-size: var(--step-8); letter-spacing: -5px; }
h2 { font-size: var(--step-5); letter-spacing: -2px; max-width: 20ch; }
h3 { font-size: var(--step-3); letter-spacing: -1px; }

.wrapper {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  padding-inline: 4rem;
}

/* --- Hero --- */

.hero {
  background-color: var(--c-paper-soft);
  min-height: 80svh;
  max-height: 1080px;
  display: flex;
  align-items: flex-end;
  padding-block: 8rem;
}

.hero > .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4rem;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.hero-description { font-size: var(--step-0); line-height: 150%; max-width: 50ch; }

.bite-size-solutions { color: var(--c-brand-blue); }

.main-illustration {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.main-illustration > svg { max-width: 80svw; }

/* --- Buttons & grids --- */

.grid-2-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.grid-3-columns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}

.why-description { font-size: var(--step-1); line-height: 150%; }
.description > h2{display: flex;
    flex-direction: column;
    gap: .5rem; margin-bottom: 1rem}
.they-need-better { color: var(--c-brand-blue); margin-top:1rem }

/* --- Services --- */

.services { display: flex; flex-direction: column; max-width: 100%; }

.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--c-paper-soft);
  padding: 4rem;
  position: relative;
  font-size: var(--step--1);
  line-height: 140%;
  letter-spacing: -0.3px;
}

.service h3 { margin-bottom: 1rem; }
.service p, .service ul { opacity: 0.8; }

.service:nth-child(2) { margin-top: 4rem; }
.service:nth-child(3) { margin-top: 8rem; }

.service > .squares {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.squares > div { width: 50px; aspect-ratio: 1 / 1; }

.square-blue   { background-color: var(--c-brand-blue); }
.square-pink   { background-color: var(--c-brand-coral); }
.square-yellow { background-color: var(--c-brand-yellow); }
.square-brown  { background-color: var(--c-brand-brown); }

.service:nth-child(1) > .squares { background-color: var(--c-brand-brown); }
.service:nth-child(2) > .squares { background-color: var(--c-brand-yellow); }
.service:nth-child(3) > .squares { background-color: var(--c-brand-coral); }

.hiring-recruiting-leadership {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: 1.312rem;
  line-height: 140%;
}

/* --- Features (the mosaic) --- */

.container5,
.features { display: flex; flex-direction: column; align-items: center; }

.features {
  align-self: stretch;
  background-color: var(--c-paper);
  overflow: hidden;
  max-width: 100%;
  text-align: left;
  color: var(--c-ink);
}

.container5 { width: 100%; }

.section-title,
.title { display: flex; align-items: flex-start; }

.section-title {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
  max-width: 100%;
  row-gap: var(--step-0, 1.25rem);
}

.title > h2 {
  font-size: var(--step-3);
  max-width: 20ch;
  padding-top: 2rem;
  padding-left: 2rem;
}

.features2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  width: 100%;
  max-width: 100%;
  row-gap: 0;
  font-size: 1.625rem;
}

.feature-card-display {
  display: flex;
  align-items: flex-start;
  padding: 2.25rem;
  height: 100%;
  aspect-ratio: 1 / 1;
  font-size: var(--step-2);
}

.medium-length-hero4 {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 120%;
  font-weight: 500;
}

.card1 { background-color: var(--c-brand-blue); grid-column: 2; grid-row: 1; color: var(--c-paper);}
.card2 { background-color: var(--c-brand-coral); grid-column: 3; grid-row: 1; color: var(--c-ink); }
.card3 { background-color: var(--c-brand-yellow); grid-column: 1; grid-row: 2; color: var(--c-ink); }
.card4 { background-color: var(--c-brand-blue); grid-column: 3; grid-row: 2; color: var(--c-paper); }
.card5 { background-color: var(--c-ink);        grid-column: 2; grid-row: 2; color: var(--c-paper); }

/* --- About --- */

.about {
  align-self: stretch;
  background-color: var(--c-paper);
  overflow: hidden;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  text-align: left;
  color: var(--c-ink);
  gap: 4rem;
}

.about-description { max-width: 50ch; }

.portrait { position: relative; max-width: 100%; width: 100%; overflow: hidden; }
.portrait > picture { display: block; }
.portrait > picture img { display: block; width: 100%; height: auto; }
.portrait > svg {
  position: absolute;
  top: -1px;
  left: -1px;
 
max-width: none;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
}

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  max-width: 100%;
}

/* --- Contact & footer small print --- */

.contact {
  align-self: stretch;
  overflow: hidden;
  text-align: center;
  padding-block-start: 8rem;
  background-color: var(--c-brand-blue);
  color: var(--c-paper);
}
.contact h2 { font-size: var(--step-6); margin-bottom: 0; }

.contact-info-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  flex-shrink: 0;
  text-align: left;
}
.contact-info-area p {
  font-size: var(--step-1);
  line-height: 150%;
}

.booking { width: 100%; }
.booking__note { color: var(--c-paper); opacity: 0.85; }

.footer-smallprints { margin-top: 8rem; margin-bottom: 1rem; }
.footer-smallprints > a,
.footer-smallprints > span {
  color: var(--c-paper);
  font-size: var(--step--2);
  text-decoration: none;
}
.footer-smallprints > a + a { margin-inline-start: 1.5rem; }

/* --- Responsive (mockup breakpoints) --- */

@media screen and (max-width: 1440px) {
  h1 { font-size: var(--step-6); letter-spacing: -3px; }
}

@media screen and (max-width: 1125px) {
  .hero > .wrapper {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2rem;
  }
  .hero { height: auto; max-height: none; min-height: auto; }
  .about { gap: 2.5rem; flex-wrap: wrap; }
  .portrait,
  .text { flex: 1; }
    .portrait{margin-bottom: 1rem}
  .grid-2-columns,
  .grid-3-columns { grid-template-columns: 1fr; }
  .contact { padding-top: 3.25rem; }
}

@media screen and (max-width: 768px) {
  .wrapper { padding-inline: 2rem; }
  section { padding-block: 2.5rem; }

  h1 { font-size: var(--step-5); letter-spacing: -2px; }
  h2 { font-size: var(--step-4); letter-spacing: -1px; }
  h3 { font-size: var(--step-2); }

  .hero { min-height: auto; padding-block: 3rem; }
  .hero > .wrapper { gap: 1.5rem; }
  .hero-text { gap: 0.75rem; }
  .main-illustration > svg { max-width: 55svw; }

  .grid-2-columns, .grid-3-columns { gap: .5rem; }

  .service { padding: 2rem; }
  .service:nth-child(2) { margin-top: 1rem; }
  .service:nth-child(3) { margin-top: 1rem; }
  .squares > div { width: 30px; }

  .title > h2 { padding-top: 1rem; padding-left: 1rem; }
  .feature-card-display { padding: 1.5rem; aspect-ratio: auto; padding-bottom: 3.5rem}
  .features2 { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .card1, .card2, .card3, .card4, .card5 { grid-column: auto; grid-row: auto; }

  .contact { padding-block-start: 3rem; }
  .footer-smallprints { margin-top: 3rem; }
}