/* Final public-site type contract. CSS pixels follow the viewport, not device inches.
   Keep this after legacy, page-local rules. Copy and line breaks are unchanged. */
:root {
  --pad: var(--lnh-nav-pad);
  --lnh-wide-pad: var(--lnh-nav-pad);
  --lnh-type-hero: clamp(38px, calc(24px + 1.875vw), 64px);
  --lnh-type-section-desktop: clamp(32px, calc(20px + 1.25vw), 44px);
  --lnh-type-section-mobile: clamp(26px, 7.125vw, 30px);
  --lnh-type-statement-desktop: var(--lnh-type-section-desktop);
  --lnh-type-statement-mobile: var(--lnh-type-section-mobile);
  --lnh-type-body: clamp(16px, calc(14px + .15625vw), 18px);
  --lnh-type-label: 13px;
  --lnh-type-eyebrow-desktop: var(--lnh-type-label);
  --lnh-type-eyebrow-mobile: var(--lnh-type-label);
}

/* Both main IDs are intentional: Build has a standalone editorial layout. */
:is(#main#main, #build-main-clean#build-main-clean) h1,
#main#main .landing-hero #hero-title.landing-title {
  font-family: var(--serif, "Nanum Myeongjo", serif) !important;
  font-size: var(--lnh-type-hero) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:is(#main#main, #build-main-clean#build-main-clean) h1 :is(strong, em, b, span) {
  font-size: inherit !important;
  line-height: inherit !important;
}
:is(#main#main, #build-main-clean#build-main-clean) h2 {
  font-family: var(--serif, "Nanum Myeongjo", serif) !important;
  font-size: var(--lnh-type-section-desktop) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -.02em !important;
}
/* This is a catalogue label, not a section headline. */
#main#main .stories-preview-head h2 {
  font-family: var(--sans, "IBM Plex Sans KR", sans-serif) !important;
  font-size: var(--lnh-type-label) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
}
:is(#main#main, #build-main-clean#build-main-clean) :is(.lnh-hero-tag, .eyebrow, .kicker, .bdf-section-label, .journey-card-tag) {
  font-family: var(--sans, "IBM Plex Sans KR", sans-serif) !important;
  font-size: var(--lnh-type-label) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
}
/* Hero tags use the same quiet tone as About's editorial eyebrow. */
:is(#main#main, #build-main-clean#build-main-clean) .lnh-hero-tag {
  color: var(--muted, #6f7473) !important;
}
:is(#main#main, #build-main-clean#build-main-clean) :is(
  .landing-definition, .hero-intro, .direction-hero-intro, .build-direction-hero-intro,
  .hero-lead, .letter-lead, .section-copy, .section-lead, .section-desc,
  .section-description, .intro-copy, .body-copy, .lead,
  .journey-card-copy > p, .residential-path-head > p:not(.eyebrow),
  .judgment-lead > p:not(.eyebrow), .direction-heading > p:not(.eyebrow),
  .aftercare-copy > p:not(.eyebrow), .origin-copy > p:not(.eyebrow),
  .section-head > p:not(.eyebrow), .bdf-section-head > p:not(.bdf-section-label)
  , .bdf-row > p, .letter-section > p:not(.kicker), .process-copy > p:not(.eyebrow),
  .scope-copy > p:not(.eyebrow), .report-copy > p:not(.eyebrow), .pricing-copy > p:not(.eyebrow)
) {
  font-family: var(--sans, "IBM Plex Sans KR", sans-serif) !important;
  font-size: var(--lnh-type-body) !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* Latin service names need a small optical lift, not display-scale lettering. */
#main#main .journey-card-copy > strong {
  font-size: calc(var(--lnh-type-section-desktop) * 1.17) !important;
  line-height: 1.15 !important;
}
#main#main .journey-card-copy { padding-inline-start: 0 !important; justify-self: start !important; }
#build-main-clean#build-main-clean :is(.bdf-section, .bdf-faq) { padding-inline: 0 !important; }
#build-main-clean#build-main-clean :is(.bdf-section, .bdf-faq) > .bdf-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--lnh-nav-pad) !important;
}
#main#main .landing-hero-content {
  margin-inline: var(--lnh-nav-pad) !important;
  width: calc(100% - var(--lnh-nav-pad) * 2) !important;
  justify-self: start !important;
  max-width: none !important;
  /* Move the complete Index statement down by half of its former bottom gap. */
  padding-bottom: clamp(40px, 8.5dvh, 100px) !important;
}
#main#main .landing-title { flex: 0 0 auto; margin: 0 !important; }
#main#main .landing-definition { flex: 0 0 auto; margin-top: 28px !important; }
/* Legal text must wrap after the new policy link, including on tablets. */
body footer .footer-legal, body footer .footer-legal span {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#main#main .archive summary .plus { justify-self: center; width: 1em; line-height: 1; text-align: center; }
#main#main .archive { padding-inline: var(--lnh-nav-pad) !important; }
#main#main .archive > .wrap { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; }
#main#main .archive summary { grid-template-columns: minmax(0, 1fr) 100px 30px; gap: 12px; }
#main#main .archive summary > span { min-width: 0; overflow-wrap: anywhere; }

/* Preserve the viewport bottom rule while giving the desktop opening copy air
   below the fixed 82px navigation. Edit keeps its deliberately reversed,
   image-led composition; About and Stories already use a deeper editorial
   inset of their own. */
@media (min-width: 681px) {
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero):not(.edit-commerce-hero) > :is(.hero-copy, .direction-hero-copy, .build-direction-hero-copy) {
    /* About starts at 82px navigation + clamp(86px, 9vw, 132px). */
    padding-top: clamp(168px, calc(82px + 9vw), 214px) !important;
    padding-bottom: 36px !important;
    padding-inline: var(--lnh-nav-pad) !important;
  }
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero):not(.edit-commerce-hero) .lnh-hero-tag {
    margin: 0 0 38px !important;
  }
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero):not(.edit-commerce-hero) h1 {
    /* Counter the serif glyph side-bearing so the visible strokes share one axis. */
    margin: 0 0 42px -.05em !important;
  }
}
/* On desktop, halve the space between the fixed navigation rule and the
   service-hero copy block. Internal tag/title/body rhythm stays unchanged. */
@media (min-width: 1121px) {
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero):not(.edit-commerce-hero) > :is(.hero-copy, .direction-hero-copy, .build-direction-hero-copy) {
    padding-top: clamp(125px, calc(82px + 4.5vw), 148px) !important;
  }
}
:is(#main#main, #build-main-clean#build-main-clean) :is(.hero-bottom, .direction-hero-action, .build-direction-hero-action) { margin-top: 32px !important; }
@media (max-width: 1120px) and (min-width: 681px) {
  :root { --lnh-type-hero: clamp(36px, 4.1vw, 46px); }
}
@media (max-width: 680px) {
  :root {
    --lnh-type-hero: clamp(30px, 8.65vw, 36px);
    --lnh-type-body: 15px;
    --lnh-type-label: 12px;
  }
  :is(#main#main, #build-main-clean#build-main-clean) h2 {
    font-size: var(--lnh-type-section-mobile) !important;
    line-height: 1.5 !important;
  }
  #main#main .journey-card-copy > strong {
    font-size: calc(var(--lnh-type-section-mobile) * 1.17) !important;
  }
  #main#main .landing-hero-content {
    padding-top: 112px !important;
    padding-bottom: clamp(48px, 10svh, 88px) !important;
  }
  #main#main .landing-definition { max-width: 100% !important; }
  #main#main .landing-slogan {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  #main#main .archive summary { grid-template-columns: minmax(0, 1fr) 72px 24px; gap: 8px; }
  :is(#main#main, #build-main-clean#build-main-clean) > section > :is(.hero-copy, .direction-hero-copy, .build-direction-hero-copy) {
    row-gap: 0 !important;
  }
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero) :is(.hero-bottom, .direction-hero-action, .build-direction-hero-action) {
    margin-top: 48px !important;
  }
  :is(#main#main, #build-main-clean#build-main-clean) > section > :is(.hero-visual, .direction-hero-visual, .build-direction-hero-visual) {
    max-height: none !important;
    max-block-size: none !important;
  }
  :is(#main#main, #build-main-clean#build-main-clean) > section:is(.hero, .direction-hero, .build-direction-hero) :is(.primary-cta, .primary-link, .solid-link, .direction-button, .build-direction-button) {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
}