/* Homepage-only styles for the approved portrait-led hero. */
.homepage { --hero-bg: #081420; --hero-muted: #c0d4e3; }
.homepage .header-inner,
.homepage .hero-inner,
.homepage .hero-bio-inner { max-width: 100rem; padding-inline: clamp(1.25rem, 3.2vw, 3.5rem); }
.homepage .site-header { background: #081420; border-bottom-color: #355366; }
.homepage .header-inner { min-height: 5rem; gap: 1rem 2rem; }
.homepage .brand { font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -0.035em; }
.homepage .brand-mark { width: 2.8rem; height: 2.5rem; font-size: 1.2rem; background: #14d4c4; }
.homepage .site-header nav ul { align-items: center; gap: 0.5rem clamp(1rem, 2.4vw, 2.5rem); }
.homepage .site-header nav a { color: #eef2f7; font-size: 1rem; }
.homepage .site-header nav a:hover { color: #2dd4bf; }
.homepage .site-header .nav-contact { display: inline-block; border: 1px solid #2dd4bf; border-radius: 7px; padding: 0.3rem 1.1rem; }
.homepage a:focus-visible { outline-color: #2dd4bf; }

.homepage .hero { overflow: hidden; background: #081420; }
.homepage .hero-inner {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 24fr);
  gap: 3%; align-items: stretch; min-height: clamp(38rem, 46vw, 46rem);
  padding-top: 0; padding-bottom: 0;
}
.hero-inner::before {
  content: ""; position: absolute; z-index: -1; inset: 0 8% 0 18%; pointer-events: none;
  background: url('/assets/hero-network.svg') center / contain no-repeat,
    radial-gradient(ellipse at 50% 56%, rgb(10 140 137 / 0.38), transparent 67%);
}
.hero-copy { position: relative; z-index: 2; padding-block: clamp(2.8rem, 4.5vw, 4.75rem) 2.5rem; align-self: center; }
.homepage .hero .eyebrow { color: #2dd4bf; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.24em; line-height: 1.5; }
.homepage .hero h1 { max-width: none; font-size: clamp(3rem, 4.25vw, 4.4rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.045em; margin: 1.2rem 0 1.65rem; }
.hero h1 > span { display: block; }
.hero-accent { color: #14d4c4; }
.homepage .hero .lede { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.5; margin-bottom: 1.75rem; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.hero-cta .button { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.1rem; background: #14d4c4; border-radius: 7px; font-size: clamp(0.9rem, 1.25vw, 1.15rem); }
.hero-cta .button:hover { background: #5eead4; }
.hero-cta .button span { font-size: 1.55rem; line-height: 1; }
.hero-services-link { color: #c0d4e3; text-underline-offset: 0.3em; font-size: 1.05rem; padding: 0.25rem 0; }
.hero-services-link:hover { color: #fff; }
.hero-portrait { position: relative; z-index: 1; margin: 0; min-width: 0; }
.hero-portrait img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 125%; height: 100%; object-fit: cover; object-position: center top; }
.hero-portrait::after { content: ""; position: absolute; z-index: 1; inset: 65% -12.5% 0; background: linear-gradient(transparent, rgb(8 20 32 / 0.72)); pointer-events: none; }
.hero-portrait figcaption { position: absolute; z-index: 2; bottom: 1.4rem; inset-inline: -10%; text-align: center; line-height: 1.35; text-shadow: 0 2px 12px #081420, 0 1px 4px #081420; }
.hero-portrait figcaption strong { display: block; font-size: clamp(1.2rem, 1.9vw, 1.7rem); }
.hero-portrait figcaption span { color: #d4e6ef; font-size: 1.05rem; }
.hero-specialisms { position: relative; z-index: 2; align-self: start; padding-top: clamp(3rem, 4.5vw, 4.75rem); }
.hero-specialisms h2 { margin-bottom: 1.6rem; }
.hero-specialisms ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 3vw, 3rem); }
.hero-specialisms a { display: grid; grid-template-columns: 2.3rem 2.4rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 3.5rem; color: #eef2f7; text-decoration: none; font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.3; }
.hero-specialisms a:hover { color: #5eead4; }
.specialism-number { color: #2dd4bf; font-size: 1.05rem; font-weight: 650; border-right: 1px solid #58778b; line-height: 2; }
.hero-specialisms svg { display: block; width: 100%; height: auto; }
.hero-bio { position: relative; z-index: 3; border-top: 1px solid #68b9c2; background: #0b1825; }
.hero-bio-inner { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 1.5rem; }
.homepage .hero-bio .eyebrow { margin: 0; padding-top: 0.3rem; }
.hero-bio p { border-left: 1px solid #8aa2b1; padding-left: 2rem; margin: 0; font-size: clamp(1.05rem, 1.65vw, 1.5rem); line-height: 1.45; }
.homepage .section, .homepage .card[id] { scroll-margin-top: 6rem; }

@media (max-width: 1100px) {
  .homepage .header-inner { padding-block: 0.8rem; }
  .homepage .site-header nav ul { gap: 0.5rem 1.1rem; }
  .hero-specialisms a { grid-template-columns: 1.8rem 1.8rem minmax(0, 1fr); gap: 0.7rem; }
}
@media (max-width: 999px) {
  .homepage .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; min-height: 0; }
  .homepage .hero h1 { font-size: clamp(2.7rem, 5.7vw, 3.5rem); }
  .hero-copy { padding-top: 3rem; }
  .hero-portrait img { width: 135%; }
  .hero-specialisms { grid-column: 1 / -1; padding-block: 2rem; background: #081420; }
  .hero-specialisms ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
  .hero-specialisms a { grid-template-columns: 2.3rem 2.4rem minmax(0, 1fr); gap: 1rem; font-size: 1.1rem; }
  .hero-specialisms h2 { margin-bottom: 1.25rem; }
  .hero-bio-inner { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; }
  .hero-bio p { padding-left: 1.5rem; }
  .homepage .section, .homepage .card[id] { scroll-margin-top: 9rem; }
}
@media (max-width: 640px) {
  .homepage .header-inner { gap: 0.7rem; }
  .homepage .brand { font-size: 1.25rem; }
  .homepage .brand-mark { width: 2.2rem; height: 2rem; font-size: 1rem; }
  .homepage .site-header nav { width: 100%; }
  .homepage .site-header nav ul { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 0.35rem 1rem; }
  .homepage .site-header nav a { font-size: 0.85rem; display: inline-block; padding-block: 0.35rem; }
  .homepage .site-header .nav-contact { padding: 0.25rem 0.7rem; }
  .homepage .hero-inner { display: flex; flex-direction: column; }
  .hero-inner::before { inset: 20rem -25% 15rem; }
  .hero-copy { width: 100%; padding-block: 2.5rem 1.5rem; }
  .homepage .hero h1 { font-size: clamp(2.65rem, 11vw, 4rem); margin-block: 1rem 1.25rem; }
  .homepage .hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; }
  .homepage .hero .lede { max-width: 34rem; font-size: 1.05rem; }
  .hero-cta .button { font-size: 1rem; }
  .hero-portrait { align-self: center; width: 100%; max-width: 29rem; height: clamp(25rem, 105vw, 34rem); }
  .hero-portrait img { width: 117%; }
  .hero-portrait figcaption { bottom: 1rem; }
  .hero-portrait figcaption strong { font-size: 1.4rem; }
  .hero-specialisms { width: 100%; padding-block: 2rem; border-top: 1px solid #355366; }
  .hero-specialisms ol { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .hero-specialisms a { grid-template-columns: 2.3rem 2rem minmax(0, 1fr); min-height: 3rem; }
  .hero-bio-inner { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding-block: 1.5rem 2rem; }
  .hero-bio p { border-left: 0; padding-left: 0; font-size: 1.05rem; }
  .homepage .section, .homepage .card[id] { scroll-margin-top: 11rem; }
}