/* The first study's layout and type, over the site's original atmosphere. */
:root {
  --nds-gutter: clamp(22px, 3.125vw, 64px);
  --nds-rule: #b6b8b0;
  --nds-ink: #191a18;
  --nds-button: #292b28;
  --nds-button-hover: #424f46;
}

.section-shell:not(#stories) { width: min(1440px, calc(100% - 2 * var(--nds-gutter))); }
main :is(h1, h2, h3):not(#story-title) { color: var(--nds-ink); }
main :is(h1, h2):not(.section-label) { font-weight: 450; }
.section-label:not(#story-title), .eyebrow, .footer-label { letter-spacing: .13em; }
.section-label:not(#story-title) > span { font-variant-numeric: tabular-nums; }

body .nav, body .nav.is-scrolled { padding-inline: var(--nds-gutter); }
.nav .header-brain { width: 57px; height: 57px; }
.nav > nav[aria-label="Main navigation"] { font-size: 14px; }
.nav .book, body .button, body :is(.inquiry-form, .newsletter-form) .button {
  color: #fff;
  background: var(--nds-button);
  border: 1px solid var(--nds-button);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav .book:hover, body .button:hover, body :is(.inquiry-form, .newsletter-form) .button:hover {
  background: var(--nds-button-hover);
  border-color: var(--nds-button-hover);
  box-shadow: none;
}
.nav .mobile-menu, .nav .mobile-menu .motion-toggle, body .motion-toggle { border-radius: 2px; }

:is(.service-card, .catalog-card, .glass-panel, .welcome-panel, .team-next-panel, .session-panel,
    .check-in-panel, .immediate-support, .service-finder, .newsletter-panel, .policy-sheet) {
  border-radius: 0;
}
.person:nth-child(n) .portrait,
.team-preview:nth-child(n) .team-preview-frame,
.profile:nth-child(n) .profile-portrait {
  border-radius: 0;
}
:is(.person:nth-child(n) .portrait-arrow, .preview-arrow) { border-radius: 0; }
.person:nth-child(n) .portrait-arrow { right: 16px; bottom: 16px; }
.continuation > .scene + .scene:not(#stories) { border-top: 1px solid var(--nds-rule); }
body :is(.inquiry-field, .newsletter-panel) :is(input, select, textarea),
body :is(.answer-option, .result-setting, .specialties li, .service-jump-list a) {
  border-radius: 2px;
}

.hero-brand { display: contents; }
.hero-brand > .eyebrow { line-height: 1.15; font-size: 15px; letter-spacing: .13em; font-weight: 650; }
body .hero h1 { font-size: clamp(41px, 4.55vw, 74px); letter-spacing: -.06em; line-height: 1.02; }
.hero :is(.eyebrow, p, .text-link), .scroll-cue { color: var(--nds-ink); }
.services { text-align: left; }
.services .eyebrow { font-size: 11px; }
.services h2 { letter-spacing: -.05em; }
.services .all-services { margin-left: 0; }
.cards { gap: 12px; }
.people-grid { max-width: none; }

@media (min-width: 901px) {
  body .hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-items: start;
    align-content: center;
    column-gap: clamp(40px, 7vw, 108px);
    text-align: left;
    padding: 85px max(var(--nds-gutter), calc((100vw - 1440px) / 2)) 12svh;
  }
  .hero-brand {
    display: grid;
    grid-area: 1 / 1 / span 3;
    align-self: center;
    width: min(100%, 510px);
    gap: 12px;
  }
  .hero-brand > .eyebrow { text-align: center; }
  .hero-logo.glass-logo { width: 100%; margin: 0; }
  .hero h1 { grid-area: 1 / 2; max-width: 12ch; margin-bottom: 17px; }
  .hero p { grid-area: 2 / 2; max-width: 39ch; }
  .hero .actions {
    grid-area: 3 / 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 22px;
    gap: 12px 22px;
  }
  .person:nth-child(n) { margin-top: 0; }
}

@media (min-width: 701px) {
  :root { --services-top: max(112px, 15svh); }
  .scroll-cue { top: calc(100svh - 104px); bottom: auto; gap: 6px; }
  .services .all-services { display: table; margin-inline: auto; }
}
@media (max-width: 900px) {
  .hero-logo.glass-logo { width: min(78vw, 430px); margin: 19px 0 24px; }
  body .hero h1 { font-size: clamp(31px, 6.8vw, 53px); }
}
@media (max-width: 700px) {
  :root { --nds-gutter: 18px; }
  .nav .header-brain { width: 44px; height: 44px; }
  .nav .book { padding-inline: 11px; }
  .nav > nav[aria-label="Main navigation"] { gap: 10px; }
  .nav .mobile-menu { left: var(--nds-gutter); right: var(--nds-gutter); }
  .hero .actions { gap: 4px; }
  .hero .text-link { min-height: 44px; }
  .hero p { max-width: 31ch; }
  .scroll-cue { top: calc(100svh - 91px); bottom: auto; }
}
@media (max-height: 650px) and (max-width: 700px) {
  .hero-logo.glass-logo { margin: 12px 0 15px; }
  body .hero h1 { font-size: clamp(28px, 6.8vw, 42px); }
}