/* The home opening has its own layout, independent of the older hero variants. */
body[data-page="home"] .home-opening {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--site-header-clearance, 100px) + 10px) 0 14px;
  transition: none;
}

body[data-page="home"] .home-opening-layout {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(12px, 2.4svh, 24px);
}

body[data-page="home"] .home-opening .hero-grid {
  --opening-column-gap: clamp(24px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(24rem, calc((100% - var(--opening-column-gap)) / 2))), 1fr));
  grid-template-rows: auto;
  grid-template-areas: none;
  align-items: center;
  align-content: center;
  gap: 24px var(--opening-column-gap);
  width: 100%;
  min-height: 0;
  container: none;
}

body[data-page="home"] .home-opening .hero-copy {
  display: block;
  grid-area: auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  grid-template-rows: auto;
  container: opening-copy / inline-size;
}

body[data-page="home"] .home-opening .hero-copy > * { grid-area: auto; }
body[data-page="home"] .home-opening .hero-search-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: auto;
  margin: 0 0 clamp(12px, 2svh, 20px);
  font-size: .72rem !important;
  line-height: 1.4;
  letter-spacing: .09em;
}
body[data-page="home"] .home-opening .hero-search-eyebrow::before { margin: 0 3px 0 0; }
body[data-page="home"] .home-opening .hero-search-eyebrow > span + span::before { content: "· "; }
body[data-page="home"] .home-opening .hero-copy h1 {
  grid-area: auto;
  max-width: none;
  margin: 0 0 clamp(16px, 2.4svh, 24px);
  font-size: min(clamp(1.8rem, min(5.3vw, 7.5svh), 4.7rem), 15cqi);
  line-height: 1.04;
  letter-spacing: -.05em;
  text-wrap: balance;
}
body[data-page="home"] .home-opening .hero-copy .lead {
  grid-area: auto;
  width: 100%;
  max-width: 42rem;
  margin: 0 0 clamp(18px, 2.6svh, 26px);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #d2e0e3;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.55;
}
body[data-page="home"] .home-opening .hero-actions {
  grid-area: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 12px;
  width: 100%;
  max-width: none;
  margin: 0;
}
body[data-page="home"] .home-opening .hero-actions .button {
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  font-size: .95rem !important;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
}
body[data-page="home"] .home-opening .hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  width: 100%;
  height: auto;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body[data-page="home"] .home-opening .hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .78rem;
  line-height: 1.4;
}
body[data-page="home"] .home-opening .hero-proof span::before {
  flex: 0 0 6px;
  width: 6px;
  min-width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px #79d7d51c;
}

body[data-page="home"] .home-opening .hero-project-carousel {
  grid-area: auto;
  position: relative;
  right: auto;
  bottom: auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  height: clamp(24rem, calc(100svh - var(--site-header-clearance, 100px) - 110px), 35rem);
  min-height: 0;
  margin: 0;
}

/* The live status belongs to the header, leaving every device unobstructed. */
body[data-page="home"] .home-opening .hero-project-head {
  flex-wrap: wrap;
  gap: 10px 12px;
}
body[data-page="home"] .home-opening .hero-project-head > div {
  display: grid;
  flex: 1 1 9rem;
  min-width: 0;
  justify-items: start;
  gap: 5px;
}
body[data-page="home"] .home-opening .hero-project-head-note {
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
  letter-spacing: .01em;
  line-height: 1.35;
}
body[data-page="home"] .home-opening .hero-project-head .hero-project-online {
  position: static;
  flex: 0 0 auto;
  height: auto;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #79d7d533;
  border-radius: 999px;
  color: #b3eced;
  background: #79d7d510;
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .08em;
}

.home-opening-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid #b6d8df40;
  color: #b3eced;
  text-decoration: none;
}
.home-opening-more-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #a9d9dc90;
  border-radius: 50%;
  background: #b3eced08;
  line-height: 0;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
/* A centered drawing stays independent of the font's baseline and line box. */
.home-opening-more-arrow > svg {
  display: block;
  width: 60%;
  height: 60%;
}
.home-opening-more strong { display: block; font-size: .92rem; line-height: 1.4; }
.home-opening-more small { display: block; margin-top: 2px; color: #c4d7db; font-size: .8rem; line-height: 1.4; }
.home-opening-more:focus-visible .home-opening-more-arrow {
  border-color: #b3ecedc0;
  background: #b3eced18;
  box-shadow: 0 0 0 3px #b3eced0d;
}
@media (hover: hover) and (pointer: fine) {
  .home-opening-more:hover .home-opening-more-arrow {
    border-color: #b3ecedc0;
    background: #b3eced18;
    box-shadow: 0 0 0 3px #b3eced0d;
  }
}
@media (hover: none), (pointer: coarse) {
  .home-opening-more:active .home-opening-more-arrow {
    border-color: #b3ecedc0;
    background: #b3eced18;
    box-shadow: 0 0 0 3px #b3eced0d;
  }
}
.home-opening-more:focus-visible { outline: 2px solid #b3eced; outline-offset: 4px; border-radius: 4px; }

@media (max-width: 900px) {
  body[data-page="home"] .home-opening { padding-top: calc(var(--site-header-clearance, 90px) + 8px); padding-bottom: 12px; }
  body[data-page="home"] .home-opening .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body[data-page="home"] .home-opening .hero-copy h1 { font-size: min(clamp(1.9rem, min(9vw, 6svh), 3.1rem), 15cqi); }
  body[data-page="home"] .home-opening .hero-project-carousel { display: none; }
  body[data-page="home"] .home-opening .hero-search-eyebrow { font-size: .68rem !important; }
}

@media (max-width: 480px) {
  body[data-page="home"] .home-opening .hero-actions { flex-direction: column; }
  body[data-page="home"] .home-opening .hero-actions .button { width: 100%; }
  .home-opening-more { justify-content: flex-start; }
}

/* Portrait tablets give the three-device preview its own generous card. */
@media (min-width: 720px) and (max-width: 900px) and (min-height: 900px) and (orientation: portrait) {
  body[data-page="home"] .home-opening .hero-grid { gap: 22px; }
  body[data-page="home"] .home-opening .hero-project-carousel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto 3px;
    max-width: 640px;
    height: clamp(27rem, 44svh, 32rem);
    justify-self: center;
  }
  body[data-page="home"] .home-opening .hero-project-head { min-height: 58px; padding: 12px 16px; }
  body[data-page="home"] .home-opening .hero-project-head-note,
  body[data-page="home"] .home-opening .hero-project-hint { display: none; }
  body[data-page="home"] .home-opening .hero-project-track { margin: 0 14px; border-radius: 18px; }
  body[data-page="home"] .home-opening .hero-project-footer { display: flex; justify-content: space-between; padding: 12px 16px; }
  body[data-page="home"] .home-opening .hero-project-next { display: grid; }
  body[data-page="home"] .home-opening .hero-project-controls button { width: 44px; height: 44px; }
  body[data-page="home"] .home-opening .hero-project-caption { min-height: 70px; padding: 12px 16px; }
  body[data-page="home"] .home-opening .hero-project-caption strong { font-size: 1.125rem; line-height: 1.25; }
  body[data-page="home"] .home-opening .hero-project-preview.has-responsive-project-preview {
    padding: 16px 18px 8px;
  }
  /* One row keeps the visible distance between device frames identical. */
  body[data-page="home"] .home-opening .hero-project-preview .responsive-project-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 2cqi, 18px);
    height: auto;
  }
  body[data-page="home"] .home-opening .hero-project-preview .responsive-project-device {
    position: relative;
    inset: auto;
    flex: 0 1 auto;
    transform: none;
  }
  body[data-page="home"] .home-opening .hero-project-preview .responsive-project-device--desktop {
    --home-preview-device-top: 0px;
    width: min(62%, 320px);
  }
  body[data-page="home"] .home-opening .hero-project-preview .responsive-project-device--tablet {
    order: -1;
    width: min(27%, 136px);
  }
  body[data-page="home"] .home-opening .hero-project-preview .responsive-project-device--mobile {
    order: 1;
    width: min(15%, 68px);
  }
}

/* Compact phones keep all descriptive copy and both calls to action. */
@media (max-width: 900px) and (max-height: 760px) {
  body[data-page="home"] .home-opening-layout { gap: 10px; }
  body[data-page="home"] .home-opening .hero-search-eyebrow,
  body[data-page="home"] .home-opening .hero-proof { display: none; }
  body[data-page="home"] .home-opening .hero-copy h1 { margin-bottom: 12px; font-size: min(clamp(1.8rem, min(9vw, 5.8svh), 2.6rem), 15cqi); }
  body[data-page="home"] .home-opening .hero-copy .lead { margin-bottom: 16px; line-height: 1.45; }
  .home-opening-more { padding-top: 8px; }
  .home-opening-more small { display: none; }
  .home-opening-more-arrow { width: 30px; height: 30px; }
}

@media (min-width: 901px) and (max-height: 700px),
       (min-width: 901px) and (max-width: 1024px) and (max-height: 780px) {
  body[data-page="home"] .home-opening .hero-search-eyebrow,
  body[data-page="home"] .home-opening .hero-proof,
  body[data-page="home"] .home-opening .hero-project-head-note,
  body[data-page="home"] .home-opening .hero-project-hint { display: none; }
  body[data-page="home"] .home-opening .hero-copy h1 { font-size: min(clamp(2rem, 6.3svh, 2.7rem), 15cqi); margin-bottom: 12px; }
  body[data-page="home"] .home-opening .hero-copy .lead { font-size: 1rem; line-height: 1.45; margin-bottom: 16px; }
  body[data-page="home"] .home-opening .hero-actions .button { flex: 1 1 auto; min-height: 44px; padding: 10px 12px; font-size: .875rem !important; }
  body[data-page="home"] .home-opening .hero-project-carousel { height: clamp(18rem, calc(100svh - var(--site-header-clearance, 100px) - 105px), 30rem); }
}

/* On short landscape screens, the portfolio remains available below and
   in the dedicated link; text and controls use the full opening width. */
@media (min-width: 440px) and (max-height: 560px) {
  body[data-page="home"] .home-opening { padding-top: var(--site-header-clearance, 90px); padding-bottom: 8px; }
  body[data-page="home"] .home-opening-layout { gap: 8px; }
  body[data-page="home"] .home-opening .hero-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="home"] .home-opening .hero-project-carousel,
  body[data-page="home"] .home-opening .hero-search-eyebrow,
  body[data-page="home"] .home-opening .hero-proof { display: none; }
  body[data-page="home"] .home-opening .hero-copy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14rem, calc((100% - 24px) / 2))), 1fr));
    align-items: center;
    gap: 12px 24px;
  }
  body[data-page="home"] .home-opening .hero-copy h1 { grid-row: span 2; margin: 0; font-size: min(clamp(1.8rem, 4vw, 2.6rem), 15cqi); }
  body[data-page="home"] .home-opening .hero-copy h1 br { display: none; }
  body[data-page="home"] .home-opening .hero-copy .lead { margin: 0; font-size: 1rem; line-height: 1.4; }
  body[data-page="home"] .home-opening .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="home"] .home-opening .hero-actions .button { min-height: 44px; padding: 8px 10px; font-size: .86rem !important; }
  .home-opening-more { padding-top: 6px; justify-content: flex-start; }
  .home-opening-more small { display: none; }
  .home-opening-more-arrow { width: 28px; height: 28px; }
}

@media (min-width: 440px) and (max-width: 700px) and (max-height: 400px) {
  body[data-page="home"] .home-opening .hero-copy { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10rem, calc((100% - 20px) / 2))), 1fr)); gap: 6px 20px; }
  body[data-page="home"] .home-opening .hero-copy h1 { grid-row: auto; font-size: min(clamp(1.5rem, 4vw, 2rem), 15cqi); }
  body[data-page="home"] .home-opening .hero-copy .lead { font-size: .875rem; line-height: 1.4; }
  body[data-page="home"] .home-opening .home-opening-audience { display: none; }
  body[data-page="home"] .home-opening .hero-actions { grid-column: 1 / -1; }
}

@media (max-width: 320px) and (max-height: 820px) {
  body[data-page="home"] .home-opening .hero-proof { display: none; }
  .home-opening-more small { display: none; }
}

@media (max-width: 479px) and (max-height: 520px) and (orientation: portrait),
       (max-width: 320px) and (max-height: 560px) and (orientation: portrait) {
  body[data-page="home"] .home-opening { padding-top: var(--site-header-clearance, 90px); padding-bottom: 8px; }
  body[data-page="home"] .home-opening .hero-copy h1 { font-size: min(1.5rem, 15cqi); margin-bottom: 10px; }
  body[data-page="home"] .home-opening .hero-copy .lead { font-size: .9375rem; line-height: 1.4; margin-bottom: 12px; }
  body[data-page="home"] .home-opening .home-opening-audience { display: none; }
  body[data-page="home"] .home-opening .hero-actions { gap: 8px; }
  body[data-page="home"] .home-opening .hero-actions .button { min-height: 44px; padding-block: 10px; }
}

html:not(.js-enabled) body[data-page="home"] .home-opening { padding-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .home-opening-more-arrow { transition: none; }
}

body[data-page="home"] .home-introduction {
  padding-block: clamp(32px, 5vw, 64px);
  background: #f2f6f5;
  border-bottom: 1px solid #dce7e6;
}

body[data-page="home"] .home-introduction-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

body[data-page="home"] .home-introduction h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
}

body[data-page="home"] .home-introduction p {
  margin: 0;
  color: #46616c;
  font-size: 1rem;
  line-height: 1.7;
}


@media (max-width: 900px) {
  body[data-page="home"] .home-introduction-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Preserve complete words on narrow phones, including enlarged reading sizes. */
@media (width < 320px) {
  body[data-page="home"] .home-introduction-grid,
  body[data-page="home"] .gbp-spotlight__copy {
    container-type: inline-size;
  }

  body[data-page="home"] .home-introduction p {
    font-size: min(1rem, 13cqi);
  }

  body[data-page="home"] .gbp-spotlight__copy > p {
    font-size: min(var(--type-body), 13.5cqi);
  }

  body[data-page="home"] .gbp-spotlight__project {
    padding-left: min(1rem, 12px);
  }

  body[data-page="home"] .home-projects-category {
    font-size: min(.75rem, 11cqi);
  }
}