/* Home refinement. The previous Home does not load this stylesheet. */
body[data-page="/"] {
  --home-white: #f8f8f8;
  --home-black: #0a0a0a;
}

/* Give the navigation more room, preserving its existing scroll behavior. */
@media (min-width: 701px) {
  body[data-page="/"] .site-header { height: 7.25rem; }
  body[data-page="/"] .site-header[data-header-state]:not([data-header-state="top"]) {
    height: 5.75rem;
  }
  body[data-page="/"] .site-header .menu-word,
  body[data-page="/"] .site-header .header-contact { font-size: .875rem; }
  body[data-page="/"] section[id] { scroll-margin-top: 7rem; }
}

/* Keep the established hero hierarchy and refine the space around it. */
body[data-page="/"] .hero { background: #080808; }
body[data-page="/"] .hero-statement {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}
body[data-page="/"] .hero[data-photo="sculptural"] .hero-shade {
  background:
    linear-gradient(180deg, #08080866 0%, #08080800 28%),
    linear-gradient(0deg, #080808f2 0%, #080808cc 30%, #08080880 52%, #08080814 70%, #08080800 80%);
}

/* Pill actions distinguish the hero and the final contact invitation. */
body[data-page="/"] :is(.hero, .home-contact) {
  --pill-ink: #fff;
  --pill-border: #ffffff99;
  --pill-hover-ink: #111;
}
html[data-home-study] body[data-page="/"] a.home-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  max-width: 100%;
  padding: .875rem 1.5rem;
  border: 1px solid var(--pill-border, #11111180);
  border-radius: 999px;
  background: transparent;
  color: var(--pill-ink, #111);
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: break-word;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html[data-home-study] body[data-page="/"] .hero a.home-pill {
  min-height: 3.375rem;
  padding: .875rem 2rem;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  border-color: #f8f8f8;
  background: #f8f8f8;
  color: #111;
  font-weight: 500;
  box-shadow: none;
}
html[data-home-study] body[data-page="/"] a.home-pill:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
html[data-home-study] body[data-page="/"] .hero a.home-pill:focus-visible {
  outline-color: #fff;
}
@media (hover: hover) {
  html[data-home-study] body[data-page="/"] a.home-pill:hover {
    background: var(--pill-ink, #111);
    border-color: var(--pill-ink, #111);
    color: var(--pill-hover-ink, #fff);
  }
  html[data-home-study] body[data-page="/"] .hero a.home-pill:hover {
    background: #e3e3e3;
    border-color: #e3e3e3;
    color: #111;
  }
}
html[data-home-study] body[data-page="/"] .hero a.home-pill:active {
  background: #d3d3d3;
  border-color: #d3d3d3;
}

/* Section entry points use an underlined label and a separate arrow. */
body[data-page="/"] a.home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 3.25rem;
  max-width: 100%;
  padding: .5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
body[data-page="/"] a.home-text-link > span {
  min-width: 0;
  overflow-wrap: break-word;
}
body[data-page="/"] a.home-text-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
/* A compact chevron treatment, trialled only on the Technology entry point. */
body[data-page="/"] a.home-technology-link { gap: .625rem; }
body[data-page="/"] a.home-technology-link > svg {
  width: .875rem;
  height: .875rem;
}

/* The Home footer uses the same blue as the inner-page footers. */
@media (hover: hover) and (pointer: fine) {
  body[data-page="/"] .site-footer nav a:hover,
  body[data-page="/"] .footer-bottom > a:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--blue-hover);
    text-decoration-thickness: 1px;
  }
}

/* Neutral section surfaces and text, retaining the existing layout. */
body[data-page="/"] .home-chapter .eyebrow,
body[data-page="/"] .home-contact .eyebrow { color: #bcbcbc; }
body[data-page="/"] .home-experience-copy p { color: #d7d7d7; }
/* The numbered section labels share one type and color treatment. */
body[data-page="/"] :is(.home-experience-opening, .home-technology-header, .home-company-copy) .eyebrow {
  color: #585858;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .15em;
}
body[data-page="/"] .home-technology-copy p,
body[data-page="/"] .home-company-copy > p:not(.eyebrow) { color: #454545; }
body[data-page="/"] .home-company { background: #ebebeb; }

/* The split sections alternate: photo sits right here, opposite of "Behind the experience." Desktop only. */
@media (min-width: 761px) {
  body[data-page="/"] .home-company-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.18fr); }
  body[data-page="/"] .home-company-photo { order: 2; }
  body[data-page="/"] .home-company-copy { order: 1; }
}

/* Short entrances keep the next action available quickly. */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="/"] .hero-media img {
    animation: home-photo-arrive .85s ease-out both;
  }
  body[data-page="/"] .hero-title {
    animation: home-copy-arrive .6s cubic-bezier(.22,.61,.36,1) .08s both;
  }
  body[data-page="/"] .hero-statement {
    animation: home-copy-arrive .6s cubic-bezier(.22,.61,.36,1) .14s both;
  }
  body[data-page="/"] .hero-link {
    animation: home-copy-arrive .6s cubic-bezier(.22,.61,.36,1) .2s both;
  }
  .motion-ready body[data-page="/"] .reveal {
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .motion-ready body[data-page="/"] .reveal.is-visible { transform: none; }
}
@keyframes home-copy-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes home-photo-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 700px) {
  body[data-page="/"] :is(.home-experience-opening, .home-technology-header, .home-company-copy) .eyebrow {
    font-size: .75rem;
    letter-spacing: .12em;
  }
  body[data-page="/"] .hero[data-photo="sculptural"] .hero-shade {
    background:
      linear-gradient(180deg, #08080866 0%, #08080800 24%),
      linear-gradient(0deg, #080808f5 0%, #080808d6 32%, #08080896 52%, #08080828 68%, #08080800 78%);
  }
  body[data-page="/"] .hero-statement { margin-top: 1.5rem; }
}
@media (min-width: 701px) and (max-height: 600px) {
  body[data-page="/"] .site-header { height: 6.5rem; }
  body[data-page="/"] .site-header[data-header-state]:not([data-header-state="top"]) {
    height: 5rem;
  }
  body[data-page="/"] section[id] { scroll-margin-top: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-home-study] body[data-page="/"] a.home-pill { transition: none; }
}

/* Photo test: coastal road + curved metal architecture (home only) */
body[data-page="/"] .home-technology-body .home-technology-copy{margin:0}
body[data-page="/"] .home-technology-photo{aspect-ratio:3/4}
body[data-page="/"] .home-technology-photo img{object-position:50% 38%}
body[data-page="/"] .home-experience-photo img{object-position:50% 55%}
@media (max-width: 760px){
  body[data-page="/"] .home-technology-photo{aspect-ratio:4/5}
  body[data-page="/"] .home-technology-photo img{object-position:50% 40%}
  body[data-page="/"] .home-experience-photo img{object-position:50% 50%}
}