/* Service introduction: quiet document layout aligned with /methodology/. */
body[data-page="about"] .ambient-grid,
body[data-page="about"] .about-symbols,
body[data-page="about"] .about-hero__visual,
body[data-page="about"] .work-grid article > svg,
body[data-page="about"] .observe-grid article > svg,
body[data-page="about"] .service-grid a > svg,
body[data-page="about"] .principle-grid article > svg,
body[data-page="about"] .about-disclaimer > svg {
  display: none !important;
}

body[data-page="about"] .about-heading h2::after,
body[data-page="about"] .work-grid article::after,
body[data-page="about"] .principle-grid h3::before {
  display: none !important;
  content: none !important;
}

body[data-page="about"] {
  background: #07111a;
}

body[data-page="about"]::before {
  display: none;
  content: none;
}

body[data-page="about"] .about-shell {
  min-height: 100vh;
  background: #07111a;
}

body[data-page="about"] .about-main {
  width: min(100% - 40px, 800px);
  margin: 0 auto;
  padding: 42px 0 calc(96px + env(safe-area-inset-bottom));
  color: #d8e3e8;
}

body[data-page="about"] .about-hero,
body[data-page="about"] .about-panel,
body[data-page="about"] .about-disclaimer {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 30px 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="about"] .about-hero {
  padding-top: 0;
  padding-bottom: 32px;
}

body[data-page="about"] .about-hero__copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body[data-page="about"] .about-hero h1 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 20px;
  color: #78909b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-page="about"] .about-hero h1 span {
  color: #eef4f6;
  font-size: clamp(32px, 5vw, 40px);
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-transform: none;
}

body[data-page="about"] .about-hero__copy > p,
body[data-page="about"] .about-heading p,
body[data-page="about"] .work-grid p,
body[data-page="about"] .observe-grid p,
body[data-page="about"] .principle-grid p,
body[data-page="about"] .about-disclaimer p {
  color: #bfd0d7;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.72;
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body[data-page="about"] .about-hero__copy > p {
  max-width: 760px;
  margin: 0;
  color: #d2dde1;
  font-size: 17px;
}

body[data-page="about"] .about-hero__note {
  display: block;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="about"] .about-hero__note > span { display: none; }

body[data-page="about"] .about-hero__note p {
  margin: 0;
  color: #aec2ca;
  font-size: 15px;
  line-height: 1.65;
}

body[data-page="about"] .about-hero__note strong {
  display: block;
  margin-bottom: 4px;
  color: #44d7df;
  font-size: 15px;
  font-weight: 700;
}

body[data-page="about"] .about-heading {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

body[data-page="about"] .about-heading h2,
body[data-page="about"] .about-disclaimer h2 {
  margin: 0;
  color: #42d4dc;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -.02em;
}

body[data-page="about"] .about-heading p {
  margin: 7px 0 0;
  font-size: 15px;
}

body[data-page="about"] .work-grid,
body[data-page="about"] .observe-grid,
body[data-page="about"] .principle-grid {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 0;
}

body[data-page="about"] .work-grid article,
body[data-page="about"] .observe-grid article,
body[data-page="about"] .principle-grid article {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="about"] .work-grid article:last-child,
body[data-page="about"] .observe-grid article:last-child,
body[data-page="about"] .principle-grid article:last-child {
  border-bottom: 0;
}

body[data-page="about"] .work-grid h3,
body[data-page="about"] .observe-grid h3,
body[data-page="about"] .principle-grid h3 {
  margin: 0 0 5px;
  color: #e3ebee;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.5;
  letter-spacing: -.02em;
}

body[data-page="about"] .work-grid h3 span {
  display: inline-block;
  width: 29px;
  margin-right: 7px;
  color: #42d4dc;
  font: 700 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}

body[data-page="about"] .work-grid p,
body[data-page="about"] .observe-grid p,
body[data-page="about"] .principle-grid p {
  margin: 0;
  padding-left: 36px;
  font-size: 15px;
}

body[data-page="about"] .observe-grid p,
body[data-page="about"] .principle-grid p { padding-left: 0; }

body[data-page="about"] .observe-summary {
  display: block;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="about"] .observe-summary p { display: none; }

body[data-page="about"] .observe-summary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: #4ddae1;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

body[data-page="about"] .service-grid {
  display: block;
  margin: 0;
  border-top: 0;
}

body[data-page="about"] .service-grid a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 74px;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

body[data-page="about"] .service-grid a:last-child { border-bottom: 0; }
body[data-page="about"] .service-grid a span { min-width: 0; }

body[data-page="about"] .service-grid strong {
  display: block;
  margin: 0 0 3px;
  color: #e3ebee;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.45;
}

body[data-page="about"] .service-grid small {
  display: block;
  color: #aebfc6;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}

body[data-page="about"] .service-grid b {
  color: #66818c;
  font-size: 18px;
  font-weight: 500;
}

body[data-page="about"] .about-disclaimer {
  padding-bottom: 0;
  border-bottom: 0;
}

body[data-page="about"] .about-disclaimer > div { display: block; }
body[data-page="about"] .about-disclaimer h2 { margin-bottom: 10px; }
body[data-page="about"] .about-disclaimer p { margin: 0; font-size: 15px; }

body[data-page="about"] .about-footer {
  display: flex;
  width: min(100% - 40px, 800px);
  margin: 0 auto;
  padding: 25px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 0;
  background: transparent;
  color: #6f8791;
  box-shadow: none;
}

body[data-page="about"] .about-footer div,
body[data-page="about"] .about-footer p { display: none; }
body[data-page="about"] .about-footer > span { font-size: 13px; }

@media (max-width: 620px) {
  body[data-page="about"] .about-main {
    width: calc(100% - 28px);
    padding-top: 24px;
    padding-bottom: 0;
  }

  body[data-page="about"] .about-hero,
  body[data-page="about"] .about-panel,
  body[data-page="about"] .about-disclaimer { padding: 25px 0; }

  body[data-page="about"] .about-hero { padding-top: 0; }
  body[data-page="about"] .about-hero h1 span { font-size: 31px; }
  body[data-page="about"] .about-hero__copy > p { font-size: 16px; line-height: 1.7; }
  body[data-page="about"] .about-heading h2,
  body[data-page="about"] .about-disclaimer h2 { font-size: 17px; }

  body[data-page="about"] .about-footer {
    width: calc(100% - 28px);
    padding-top: 16px;
    /* The global mobile shell already reserves the fixed-nav safe area. */
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] *,
  body[data-page="about"] *::before,
  body[data-page="about"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Final normalization: the older responsive stylesheet contains compact card
   layouts. Keep every viewport on the same readable document treatment. */
body[data-page="about"] .about-main .about-hero,
body[data-page="about"] .about-main .about-panel,
body[data-page="about"] .about-main .about-disclaimer,
body[data-page="about"] .about-main .about-hero__note,
body[data-page="about"] .about-main .observe-summary,
body[data-page="about"] .about-main .work-grid,
body[data-page="about"] .about-main .observe-grid,
body[data-page="about"] .about-main .service-grid,
body[data-page="about"] .about-main .principle-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="about"] .about-main .work-section,
body[data-page="about"] .about-main .observe-section,
body[data-page="about"] .about-main .services-section,
body[data-page="about"] .about-main .principles-section {
  display: block !important;
  padding: 24px 0 !important;
}

body[data-page="about"] .about-main .about-heading,
body[data-page="about"] .about-main .work-section .about-heading,
body[data-page="about"] .about-main .observe-section .about-heading,
body[data-page="about"] .about-main .services-section .about-heading,
body[data-page="about"] .about-main .principles-section .about-heading {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

body[data-page="about"] .about-main .about-heading h2,
body[data-page="about"] .about-main .observe-section .about-heading h2,
body[data-page="about"] .about-main .principles-section .about-heading h2 {
  margin: 0 !important;
  color: #42d4dc !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

body[data-page="about"] .about-main .about-heading p,
body[data-page="about"] .about-main .observe-section .about-heading p {
  display: block !important;
  margin: 7px 0 0 !important;
  color: #bfd0d7 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body[data-page="about"] .about-main .work-grid,
body[data-page="about"] .about-main .observe-grid,
body[data-page="about"] .about-main .service-grid,
body[data-page="about"] .about-main .principle-grid {
  display: block !important;
  padding: 0 !important;
}

body[data-page="about"] .about-main .work-grid article,
body[data-page="about"] .about-main .work-grid article:nth-child(odd),
body[data-page="about"] .about-main .observe-grid article,
body[data-page="about"] .about-main .observe-grid article:nth-child(odd),
body[data-page="about"] .about-main .observe-grid article:nth-child(2n),
body[data-page="about"] .about-main .observe-grid article:nth-child(3n),
body[data-page="about"] .about-main .observe-grid article:nth-child(n+4),
body[data-page="about"] .about-main .observe-grid article:nth-child(n+5),
body[data-page="about"] .about-main .principle-grid article,
body[data-page="about"] .about-main .principle-grid article:nth-child(2n),
body[data-page="about"] .about-main .principle-grid article:last-child {
  display: block !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body[data-page="about"] .about-main .work-grid article + article,
body[data-page="about"] .about-main .observe-grid article + article,
body[data-page="about"] .about-main .principle-grid article + article {
  margin-top: 4px !important;
}

body[data-page="about"] .about-main .work-grid p,
body[data-page="about"] .about-main .observe-grid p,
body[data-page="about"] .about-main .principle-grid p {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: #bfd0d7 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body[data-page="about"] .about-main .service-grid a,
body[data-page="about"] .about-main .service-grid a:nth-child(odd),
body[data-page="about"] .about-main .service-grid a:nth-child(n+3) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="about"] .about-main .service-grid small {
  display: block !important;
  margin-top: 3px !important;
  color: #aebfc6 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body[data-page="about"] .about-main .observe-summary {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body[data-page="about"] .about-main .observe-summary a {
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="about"] .about-main .about-disclaimer {
  display: block !important;
  padding: 24px 0 0 !important;
}

body[data-page="about"] .about-main .about-disclaimer h2 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
}

body[data-page="about"] .about-main .about-disclaimer p {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

@media (max-width: 620px) {
  body[data-page="about"] .about-main .work-section,
  body[data-page="about"] .about-main .observe-section,
  body[data-page="about"] .about-main .services-section,
  body[data-page="about"] .about-main .principles-section {
    padding: 21px 0 !important;
  }

  body[data-page="about"] .about-main .about-heading h2,
  body[data-page="about"] .about-main .observe-section .about-heading h2,
  body[data-page="about"] .about-main .principles-section .about-heading h2,
  body[data-page="about"] .about-main .about-disclaimer h2 {
    font-size: 17px !important;
  }
}

/* Principles: one principle per row, with a compact title line and copy line. */
body[data-page="about"] .about-main .principles-section {
  padding-bottom: 18px !important;
}

body[data-page="about"] .about-main .principles-section .about-heading {
  margin-bottom: 8px !important;
}

body[data-page="about"] .about-main .principle-grid article,
body[data-page="about"] .about-main .principle-grid article:nth-child(2n),
body[data-page="about"] .about-main .principle-grid article:last-child {
  padding: 7px 0 !important;
}

body[data-page="about"] .about-main .principle-grid article + article {
  margin-top: 0 !important;
}

body[data-page="about"] .about-main .principle-grid h3 {
  margin: 0 0 3px !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  white-space: nowrap;
}

body[data-page="about"] .about-main .principle-grid p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  white-space: normal;
}

html[lang="ko"] body[data-page="about"] .about-main .principle-grid p {
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Wide screens only: the same cards, opened into rows.

   Everything above turns the page into a one-item-per-line document,
   which is right on a phone and endless on a desktop. From 1024px the
   grids lay out again - same elements, same order, same words - so the
   page stops growing with every card. Below 1024px nothing here applies
   and the stacked document stays exactly as it was.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  body[data-page="about"] .about-main .work-grid,
  body[data-page="about"] .about-main .observe-grid,
  body[data-page="about"] .about-main .service-grid,
  body[data-page="about"] .about-main .principle-grid {
    display: grid !important;
    column-gap: 0;
    row-gap: 0;
  }

  body[data-page="about"] .about-main .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="about"] .about-main .observe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="about"] .about-main .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-page="about"] .about-main .principle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* a cell, not a row of the list: drop the stack-only spacing */
  body[data-page="about"] .about-main .work-grid article,
  body[data-page="about"] .about-main .work-grid article:nth-child(odd),
  body[data-page="about"] .about-main .observe-grid article,
  body[data-page="about"] .about-main .observe-grid article:nth-child(odd),
  body[data-page="about"] .about-main .observe-grid article:nth-child(2n),
  body[data-page="about"] .about-main .observe-grid article:nth-child(3n),
  body[data-page="about"] .about-main .observe-grid article:nth-child(n+4),
  body[data-page="about"] .about-main .observe-grid article:nth-child(n+5),
  body[data-page="about"] .about-main .principle-grid article,
  body[data-page="about"] .about-main .principle-grid article:nth-child(2n),
  body[data-page="about"] .about-main .principle-grid article:last-child {
    margin: 0 !important;
    padding: 13px 0 !important;
  }

  body[data-page="about"] .about-main .work-grid article + article,
  body[data-page="about"] .about-main .observe-grid article + article,
  body[data-page="about"] .about-main .principle-grid article + article {
    margin-top: 0 !important;
  }

  /* ---- hairlines -------------------------------------------------
     Two thin rules separate the cards: one down the left edge of every
     column but the first, one under the first row.

     The cells touch (column-gap and row-gap are 0), so the horizontal
     rule runs unbroken across the whole row, and the row itself draws
     it - which keeps the line complete even where the last row of a
     grid is not full (5 principles in 3 columns). Each side of a
     vertical rule carries its own 16px, so the space around it reads
     the same from both columns. ---------------------------------- */

  body[data-page="about"] .about-main .work-grid article:nth-child(2n),
  body[data-page="about"] .about-main .observe-grid article:nth-child(3n+2),
  body[data-page="about"] .about-main .observe-grid article:nth-child(3n),
  body[data-page="about"] .about-main .principle-grid article:nth-child(3n+2),
  body[data-page="about"] .about-main .principle-grid article:nth-child(3n) {
    padding-left: 16px !important;
    border-left: 1px solid rgba(127, 158, 176, .22) !important;
  }

  body[data-page="about"] .about-main .work-grid article:nth-child(2n+1),
  body[data-page="about"] .about-main .observe-grid article:nth-child(3n+1),
  body[data-page="about"] .about-main .observe-grid article:nth-child(3n+2),
  body[data-page="about"] .about-main .principle-grid article:nth-child(3n+1),
  body[data-page="about"] .about-main .principle-grid article:nth-child(3n+2) {
    padding-right: 16px !important;
  }

  body[data-page="about"] .about-main .work-grid article:nth-child(-n+2),
  body[data-page="about"] .about-main .observe-grid article:nth-child(-n+3),
  body[data-page="about"] .about-main .principle-grid article:nth-child(-n+3) {
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(127, 158, 176, .22) !important;
  }

  /* the row below the rule keeps its distance from it */
  body[data-page="about"] .about-main .work-grid article:nth-child(n+3),
  body[data-page="about"] .about-main .observe-grid article:nth-child(n+4),
  body[data-page="about"] .about-main .principle-grid article:nth-child(n+4) {
    padding-top: 18px !important;
  }

  /* column widths are narrower than the stack, so the text may wrap */
  body[data-page="about"] .about-main .principle-grid h3,
  html[lang="ko"] body[data-page="about"] .about-main .principle-grid p {
    white-space: normal;
  }

  body[data-page="about"] .about-main .service-grid a {
    min-height: 68px !important;
    padding: 12px 0 !important;
  }

  body[data-page="about"] .about-main .service-grid a:nth-child(4n+2),
  body[data-page="about"] .about-main .service-grid a:nth-child(4n+3),
  body[data-page="about"] .about-main .service-grid a:nth-child(4n) {
    padding-left: 16px !important;
    border-left: 1px solid rgba(127, 158, 176, .22) !important;
  }

  body[data-page="about"] .about-main .service-grid a:nth-child(4n+1),
  body[data-page="about"] .about-main .service-grid a:nth-child(4n+2),
  body[data-page="about"] .about-main .service-grid a:nth-child(4n+3) {
    padding-right: 16px !important;
  }

  /* whitespace below was budgeted for a one-item-per-line list; the page
     is a grid now, so the same gaps would read as empty bands */
  body[data-page="about"] .about-main { padding-bottom: 64px; }

  body[data-page="about"] .about-main .work-section,
  body[data-page="about"] .about-main .observe-section,
  body[data-page="about"] .about-main .services-section,
  body[data-page="about"] .about-main .principles-section {
    padding: 18px 0 !important;
  }

  body[data-page="about"] .about-main .principles-section { padding-bottom: 14px !important; }
  body[data-page="about"] .about-main .about-disclaimer { padding-top: 18px !important; }
  body[data-page="about"] .about-hero { padding-bottom: 24px; }
  body[data-page="about"] .about-hero__note { margin-top: 18px; padding-top: 14px; }
}