@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");
  html, body { background: #07142e; margin: 0; }
  /* RAVISTAR v36 static visual system.
     Layout and paint live here; typography lives in type-v36.css. */
  :root {
    --radius-control: .5rem;
    --radius-panel: 1rem;
    --dark-rule: #4d719c;
  }
  
  #company,
  .standard-section { background: var(--white); }
  #services,
  #cases { background: var(--soft); }
  
  /* Header and primary actions */
  .site-header .header-cta,
  .site-header.is-scrolled .header-cta {
    gap: .5rem;
    min-height: auto;
    padding: .5rem 0 .375rem;
    color: var(--blue-300);
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 54%, transparent);
    border-radius: 0;
    box-shadow: none;
  }
  .site-header.is-scrolled .header-cta { color: var(--blue-700); }
  .site-header .brand img,
  .site-header .brand svg,
  .footer-brand svg { filter: brightness(0) invert(1); }
  .site-header.is-scrolled .brand img,
  .site-header.is-scrolled .brand svg { filter: none; }
  .site-header .brand img,
  .site-header .brand svg { transition: filter var(--header-speed) ease; }
  .header-cta::before { content: none; }
  .header-action-icon,
  .action-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .action-icon { width: 1.25rem; height: 1.25rem; color: var(--blue-700); }
  .tel-icon { display: block; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .site-header .menu > a.header-tel { display: inline-flex; align-items: center; gap: .4375rem; color: var(--white); }
  .site-header .menu > a.header-tel:hover { color: var(--blue-300); }
  .site-header.is-scrolled .menu > a.header-tel { color: var(--ink); }
  .site-header.is-scrolled .menu > a.header-tel:hover { color: var(--blue-700); }
  .hero-action {
    gap: .625rem;
    min-height: 3.75rem;
    padding: .875rem 1.5rem;
    color: var(--navy-950);
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--blue-300) 62%, var(--white));
    border-left: .25rem solid var(--blue-300);
    border-radius: var(--radius-control);
    box-shadow: 0 .875rem 2.25rem color-mix(in srgb, var(--navy-950) 20%, transparent);
    transition: background-color var(--header-speed) ease, transform var(--header-speed) ease;
  }
  .hero-action:hover {
    background: color-mix(in srgb, var(--blue-300) 10%, var(--white));
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--navy-950) 24%, transparent);
    transform: translateY(-.125rem);
  }
  
  /* One blue route family */
  .route-stop--one,
  .route-stop--two,
  .route-stop--three { stop-color: var(--blue-300); }
  .hero-route .route-flow { stroke: var(--blue-300); stroke-width: 2.25; }
  .route-node.one,
  .route-node.two,
  .route-node.three { stroke: var(--blue-300); }
  .hero-route .route-list li {
    background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--blue-300) 7%, transparent));
    box-shadow: inset 0 -.125rem var(--blue-300);
  }
  .hero-route .route-list li + li { border-color: color-mix(in srgb, var(--blue-300) 20%, transparent); }
  .hero-route .route-list b,
  .hero-route .route-list strong { color: var(--blue-300); }
  .route-list small { color: color-mix(in srgb, var(--white) 76%, var(--blue-300)); }
  
  /* Section headers */
  .section-marker { gap: .75rem; color: var(--blue-700); }
  .section.dark .section-marker,
  .contact .section-marker { color: var(--blue-300); }
  .section-marker::after,
  #company .intro-copy h2::after,
  .section-head h2::after,
  .contact h2::after { content: none; }
  .intro-copy h2 em,
  .section-head h2 em,
  .contact h2 em { color: var(--blue-700); font-style: normal; }
  .section.dark .section-head h2 em,
  .contact h2 em { color: var(--blue-300); }
  .section-head { gap: 1.25rem; max-width: 60rem; margin-bottom: clamp(3rem, 4.5vw, 4rem); }
  
  /* Company */
  #company .intro-grid { display: block; }
  #company .intro-copy { width: min(100%, 60rem); margin-inline: auto; text-align: center; }
  #company .intro-copy .section-marker { justify-content: center; margin-bottom: 1.75rem; }
  #company .company-story { display: grid; gap: .5rem; margin: 2rem auto 0; color: var(--muted); }
  #company .company-story strong {
    color: var(--blue-700);
    text-decoration: underline;
    text-decoration-color: var(--blue-300);
    text-decoration-thickness: .125rem;
    text-underline-offset: .25rem;
  }
  #company .company-story em {
    padding: .125rem .3125rem;
    color: var(--blue-700);
    background: color-mix(in srgb, var(--blue-300) 12%, var(--white));
    border-radius: .25rem;
    font-style: normal;
  }
  #company .company-note {
    display: inline-flex;
    justify-content: center;
    margin: 1.75rem auto 0;
    padding: .875rem 1rem;
    color: var(--blue-700);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    text-align: center;
  }
  .fact-row { gap: 1rem; margin-top: 4rem; border: 0; }
  .fact-row li {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: .75rem;
    min-height: 10rem;
    padding: 1.75rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: none;
  }
  .fact-row li + li { border-left: 1px solid var(--line); }
  .fact-row li::before { content: none; }
  .fact-row b { display: grid; gap: .125rem; color: var(--blue-700); }
  .fact-row strong { align-self: end; color: var(--blue-700); }
  .fact-row b small,
  .fact-row strong small { color: var(--muted); }
  
  /* Services */
  .signal-list li {
    color: var(--service-text);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
  }
  .service-grid { gap: 1rem; border: 0; }
  .service-grid .service-card {
    grid-template-columns: 4rem 1fr;
    gap: 0 1rem;
    min-height: 27rem;
    padding: 2rem;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--blue-700);
    border-radius: var(--radius-panel);
    box-shadow: 0 .5rem 1.5rem rgba(7, 20, 46, .06);
  }
  .service-card + .service-card { border-left: 1px solid var(--line); }
  .service-card .card-icon {
    grid-column: 1;
    grid-row: 1;
    width: 4rem;
    height: 4rem;
    padding: .9375rem;
    color: var(--blue-700);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: .75rem;
  }
  .service-card .num { grid-column: 2; grid-row: 1; align-self: center; margin: 0; color: var(--blue-700); }
  .service-card h3 { grid-column: 1 / -1; margin-top: 1.75rem; color: var(--ink); }
  .service-card p { grid-column: 1 / -1; margin-top: 1rem; color: var(--muted); }
  .service-card ul { grid-column: 1 / -1; margin-top: 1.75rem; border-color: var(--line); color: var(--service-text); }
  
  /* Process: flat cells, one blue rail and numbered wayfinding */
  .process-grid { gap: 0; border-top: 1px solid var(--blue-300); }
  .process-grid .step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 0 1rem;
    min-height: 12rem;
    padding: 1.75rem;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dark-rule);
    border-radius: 0;
    box-shadow: none;
  }
  .process-grid .step:not(:nth-child(3n + 1)) { border-left: 1px solid var(--dark-rule); }
  .process-grid .step b {
    grid-column: 1;
    grid-row: 1;
    padding: .375rem .5rem;
    color: var(--navy-950);
    background: var(--blue-300);
    border-radius: var(--radius-control);
  }
  .process-grid .step h3 { grid-column: 2; grid-row: 1; margin: 0; color: var(--white); }
  .process-grid .step p { grid-column: 1 / -1; grid-row: 2; align-self: end; margin-top: 1.375rem; color: rgba(255,255,255,.74); }
  
  /* Standard */
  .difference { display: block; }
  .difference .section-head { max-width: 64rem; margin-bottom: 3.25rem; }
  .difference .difference-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .difference .difference-list li {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: .625rem;
    min-height: 10rem;
    padding: 1.5rem;
    background: var(--white);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .difference .difference-list li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
  .difference .difference-list b { margin: 0; color: var(--blue-700); }
  .difference .difference-list span { margin: 0; color: var(--muted); }
  
  /* Cases */
  .case-wall { gap: 1rem; border: 0; }
  .case-wall > span {
    min-height: 13rem;
    padding: 2rem;
    color: var(--blue-700);
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--blue-700);
    border-radius: var(--radius-panel);
    box-shadow: 0 .5rem 1.5rem rgba(7, 20, 46, .06);
  }
  .case-wall small { color: var(--service-text); }
  .case-wall span + span { border-left: 1px solid var(--line); }
  
  /* Contact and footer */
  .contact { background: var(--navy-800); background-image: none; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: stretch; }
  .contact .section-marker { margin-bottom: 1.5rem; }
  .contact p { margin-top: 1.5rem; }
  .contact-line a { border-bottom: 1px solid transparent; }
  .contact-line a:hover { border-bottom-color: currentColor; }
  .contact-meta { display: grid; gap: .75rem; align-content: center; border: 0; counter-reset: contact; }
  .contact-meta div {
    counter-increment: contact;
    display: grid;
    grid-template-columns: 2.5rem 6.5rem 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 1px solid var(--dark-rule);
    border-left: .25rem solid var(--blue-300);
    border-radius: var(--radius-control);
  }
  .contact-meta div::before { content: 0 counter(contact); color: var(--blue-300); }
  .contact-meta span:first-child { color: var(--blue-300); }
  .contact-meta span:last-child { color: var(--white); text-align: right; }
  .site-footer { padding-block: 3.5rem 1.5rem; color: color-mix(in srgb, var(--white) 70%, var(--blue-300)); }
  .footer-main { display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .footer-brand { display: grid; gap: 1.25rem; }
  .footer-brand p { color: color-mix(in srgb, var(--white) 64%, var(--blue-300)); }
  .footer-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: .75rem 1.75rem; color: var(--white); }
  .footer-nav a:hover { color: var(--blue-300); }
  .footer-company { display: grid; gap: .5rem; }
  .footer-company strong { color: var(--white); }
  .footer-contact { color: var(--white); }
  .footer-contact:hover { color: var(--blue-300); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
    color: color-mix(in srgb, var(--white) 48%, var(--blue-300));
  }
  
  /* Scroll reveal cadence */
  .reveal-stagger > :nth-child(2) { transition-delay: 40ms; }
  .reveal-stagger > :nth-child(3) { transition-delay: 80ms; }
  .reveal-stagger > :nth-child(4) { transition-delay: 120ms; }
  .reveal-stagger > :nth-child(5) { transition-delay: 160ms; }
  .reveal-stagger > :nth-child(6) { transition-delay: 200ms; }
  
  .mobile-call { display: none; }
  .executive-profile {
    display: grid;
    gap: .5rem;
    max-width: 46rem;
    margin: 2rem auto 0;
    padding: 1.5rem;
    color: var(--blue-700);
    background: color-mix(in srgb, var(--blue-300) 10%, var(--white));
    border-left: .25rem solid var(--blue-300);
  }
  .executive-profile strong { color: var(--blue-700); }
  .executive-profile p { margin: 0; }
  
  @media (max-width: 59.99rem) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .difference .difference-list { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-company { grid-column: 1 / -1; }
  }
  
  @media (max-width: 47.99rem) {
    body { padding-bottom: 3.5rem; }
    .site-header .menu > a.header-tel { display: none; }
    .mobile-call {
      position: fixed;
      z-index: 30;
      inset: auto 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 3.5rem;
      padding: .8125rem 1.25rem calc(.8125rem + env(safe-area-inset-bottom, 0px));
      color: var(--navy-950);
      background: var(--blue-300);
      box-shadow: 0 -.5rem 1.5rem color-mix(in srgb, var(--navy-950) 40%, transparent);
    }
    .mobile-call .tel-icon { width: 1.125rem; height: 1.125rem; }
    .hero-action { min-height: 3.5rem; padding: .8125rem 1.125rem; }
    .action-icon { width: 1.125rem; height: 1.125rem; }
    #company .intro-copy .section-marker { margin-bottom: 1.5rem; }
    #company .company-story { margin-top: 1.5rem; }
    #company .company-note { width: 100%; }
    .fact-row { gap: .75rem; margin-top: 3rem; }
    .fact-row li { min-height: 0; padding: 1.5rem; }
    .service-grid .service-card { grid-template-columns: 3.5rem 1fr; min-height: 0; padding: 1.5rem; }
    .service-card .card-icon { width: 3.5rem; height: 3.5rem; padding: .8125rem; }
    .service-card h3 { margin-top: 1.5rem; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid .step { min-height: 0; padding: 1.5rem; }
    .process-grid .step:not(:nth-child(3n + 1)) { border-left: 0; }
    .difference .section-head { margin-bottom: 2.5rem; }
    .difference .difference-list { grid-template-columns: 1fr; }
    .difference .difference-list li { min-height: 0; }
    .difference .difference-list li:not(:nth-child(3n + 1)) { border-left: 0; }
    .case-wall > span { min-height: 0; padding: 1.5rem; }
    .case-wall span + span { border-top: 2px solid var(--blue-700); border-left: 1px solid var(--line); }
    .contact-grid { gap: 2.5rem; }
    .contact-meta div { grid-template-columns: 2.25rem 1fr; gap: .25rem .75rem; }
    .contact-meta div::before { grid-column: 1; grid-row: 1 / 3; }
    .contact-meta span:first-child { grid-column: 2; grid-row: 1; }
    .contact-meta span:last-child { grid-column: 2; grid-row: 2; text-align: left; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-company { grid-column: auto; }
    .footer-bottom { display: grid; gap: .5rem; }
  }
  
  /* RAVISTAR v36 typography owner.
     Loaded last: this file owns type scale, rhythm, numeric forms and contact affordances. */
  :root {
    --ls-display: -.036em;
    --ls-xl: -.03em;
    --ls-lg: -.02em;
    --ls-md: -.014em;
    --ls-sm: -.006em;
    --ls-xs: 0;
    --ls-label: .06em;
    --ls-label-latin: .12em;
    --type-display: clamp(3rem, 5.2vw, 4.75rem);
    --type-h2: clamp(2.25rem, 3.2vw, 3.125rem);
    --type-h3: clamp(1.375rem, 1.6vw, 1.625rem);
    --type-h4: clamp(1.3125rem, 1.5vw, 1.5rem);
    --type-h5: clamp(1.0625rem, 1.25vw, 1.1875rem);
    --type-lead: clamp(1.125rem, 1.25vw, 1.25rem);
    --type-body: 1rem;
    --type-detail: .875rem;
    --type-label: .875rem;
    --type-label-sm: .8125rem;
    --type-micro: .75rem;
    --type-numeral: clamp(2rem, 2.4vw, 2.5rem);
    --read: 62ch;
    --read-tight: 52ch;
  }
  
  body {
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: var(--ls-sm);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  strong, b { font-weight: 700; }
  
  /* Numerals use fixed advance only when vertical alignment carries meaning. */
  .header-tel,
  .footer-contact[href^=tel:],
  .mobile-call b,
  .contact-line a[href^=tel:],
  .route-list b,
  .service-card .num,
  .process-grid .step b,
  .contact-meta div::before {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: tnum 1, lnum 1;
  }
  
  .hero h1 {
    font-size: var(--type-display);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: var(--ls-display);
    text-wrap: wrap;
  }
  .hero p {
    max-width: var(--read-tight);
    font-size: var(--type-h5);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: var(--ls-sm);
    text-wrap: pretty;
  }
  .hero-kicker {
    font-size: var(--type-label-sm);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--ls-label);
  }
  .hero-action {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-sm);
  }
  .route-list b {
    font-size: var(--type-numeral);
    font-weight: 700;
    line-height: .95;
    letter-spacing: var(--ls-lg);
  }
  .route-list strong {
    max-width: 24ch;
    font-size: var(--type-h5);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--ls-sm);
  }
  .route-list small {
    max-width: 28ch;
    font-size: var(--type-detail);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--ls-xs);
    text-wrap: pretty;
  }
  
  .section-marker .eyebrow {
    font-size: var(--type-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--ls-label);
    text-transform: none;
  }
  .intro-copy h2,
  .section-head h2,
  .contact h2 {
    max-width: 34ch;
    font-size: var(--type-h2);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: var(--ls-xl);
    text-wrap: balance;
  }
  .section-head p,
  #company .company-story,
  .contact p {
    max-width: var(--read-tight);
    font-size: var(--type-lead);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: var(--ls-sm);
    text-wrap: pretty;
  }
  #company .company-note {
    max-width: 46ch;
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: var(--ls-xs);
  }
  #company .company-story strong,
  #company .company-story em,
  #company .company-note strong { font-weight: 700; }
  
  .fact-row b {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
  }
  .fact-row b small {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: var(--ls-label-latin);
  }
  .fact-row strong {
    max-width: 18ch;
    font-size: var(--type-h4);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--ls-md);
  }
  .fact-row strong small,
  .fact-row small {
    max-width: 28ch;
    font-size: var(--type-detail);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--ls-xs);
  }
  
  .signal-list li {
    font-size: var(--type-detail);
    font-weight: 500;
    letter-spacing: var(--ls-xs);
  }
  .service-card .num {
    font-size: var(--type-label-sm);
    font-weight: 700;
    letter-spacing: var(--ls-label-latin);
  }
  .service-card h3 {
    max-width: 20ch;
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--ls-md);
  }
  .service-card p {
    max-width: var(--read);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: var(--ls-xs);
    text-wrap: pretty;
  }
  .service-card ul {
    max-width: 40ch;
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: var(--ls-xs);
  }
  .service-card ul li { text-wrap: pretty; }
  
  .process-grid .step b {
    font-size: var(--type-micro);
    font-weight: 700;
    letter-spacing: var(--ls-label-latin);
  }
  .process-grid .step h3 {
    max-width: 20ch;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--ls-md);
  }
  .process-grid .step p {
    max-width: var(--read);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: var(--ls-xs);
    text-wrap: pretty;
  }
  
  .difference .difference-list b {
    max-width: 22ch;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: var(--ls-sm);
  }
  .difference .difference-list span {
    max-width: var(--read);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: var(--ls-xs);
    text-wrap: pretty;
  }
  .case-wall > span {
    max-width: 18ch;
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--ls-md);
  }
  .case-wall small {
    max-width: 30ch;
    font-size: var(--type-detail);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--ls-xs);
    text-wrap: pretty;
  }
  
  .contact-meta div::before {
    font-size: var(--type-micro);
    font-weight: 700;
    letter-spacing: var(--ls-xs);
  }
  .contact-meta span:first-child {
    font-size: var(--type-detail);
    font-weight: 700;
    letter-spacing: var(--ls-xs);
  }
  .contact-meta span:last-child,
  .contact-line span:last-child {
    font-size: var(--type-body);
    font-weight: 500;
    letter-spacing: var(--ls-xs);
    overflow-wrap: anywhere;
  }
  
  .menu > a {
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: var(--ls-xs);
  }
  .site-header .menu > a.header-tel,
  .site-header .menu > a.header-cta { font-size: .9375rem; font-weight: 700; }
  .brand img,
  .brand svg { width: 10.375rem; }
  .footer-brand svg { width: 9.625rem; }
  .footer-brand p { max-width: 46ch; font-size: var(--type-detail); font-weight: 400; line-height: 1.7; letter-spacing: var(--ls-xs); text-wrap: pretty; }
  .footer-nav { font-size: var(--type-detail); font-weight: 500; letter-spacing: var(--ls-xs); }
  .footer-company { font-size: var(--type-detail); font-weight: 400; }
  .footer-company strong { font-size: var(--type-body); font-weight: 700; letter-spacing: var(--ls-xs); }
  .footer-contact { font-weight: 700; }
  .footer-bottom { font-size: var(--type-label-sm); font-weight: 400; letter-spacing: var(--ls-xs); }
  
  .mobile-call { font-size: .9375rem; font-weight: 500; letter-spacing: var(--ls-xs); }
  
  @media (max-width: 59.99rem) {
    :root { --read: 58ch; --read-tight: 48ch; }
  }
  
  @media (max-width: 47.99rem) {
    :root {
      --read: 100%;
      --read-tight: 100%;
      --type-display: clamp(1.75rem, calc(1.125rem + 3.4vw), 2.5rem);
      /* The supplied clamp resolves to 26px at 390px; the acceptance table fixes 25px. */
      --type-h2: 1.5625rem;
      --type-h3: 1.25rem;
      --type-h4: 1.25rem;
      --type-h5: 1.0625rem;
      --type-lead: 1rem;
      --type-label: .8125rem;
      --type-numeral: 1.875rem;
    }
    .brand img,
    .brand svg { width: 8.9375rem; }
    .hero h1 { line-height: 1.18; letter-spacing: var(--ls-xl); }
    .hero p { font-size: var(--type-body); line-height: 1.75; }
    .hero-kicker { font-size: var(--type-micro); }
    .intro-copy h2,
    .section-head h2,
    .contact h2 { line-height: 1.25; letter-spacing: var(--ls-lg); text-wrap: pretty; }
    .section-head p,
    #company .company-story,
    .contact p { font-size: var(--type-body); line-height: 1.75; }
    .service-card h3,
    .case-wall > span,
    #company .fact-row strong { font-size: 1.25rem; }
    .process-grid .step h3 { font-size: 1.125rem; }
    .route-list strong { font-size: 1.0625rem; }
    .route-list small { font-size: var(--type-detail); }
    .site-header .menu > a.header-cta { font-size: var(--type-label-sm); }
    .mobile-call b { font-size: .9375rem; font-weight: 700; letter-spacing: var(--ls-xs); }
  }
:root {
      --navy-950: #07142e;
      --navy-900: #0b1a3e;
      --navy-800: #132e58;
      --blue-700: #1d4d7b;
      --blue-300: #7fb3e0;
      --ink: #142033;
      --muted: #5d6878;
      --service-text: #34435a;
      --line: #dbe4ed;
      --soft: #f4f7fa;
      --white: #ffffff;
      --page: 80rem;
      --content: 72rem;
      --gutter: clamp(1.25rem, 4vw, 4rem);
      --section: clamp(5.5rem, 8vw, 8rem);
      --section-spacious: clamp(6.5rem, 9vw, 9rem);
      --section-compact: clamp(5rem, 7vw, 7rem);
      --hero-height: clamp(42rem, 82svh, 52rem);
      --route-duration: 3.8s;
      --header-speed: 320ms;
      --motion-shift: 0.625rem;
      --motion-speed: 260ms;
      --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --star-art-opacity: 0.22;
      --star-art-opacity-mobile: 0.14;
      --mask-solid: #000000;
    }
    * { box-sizing: border-box; min-width: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; background: var(--navy-950); }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--navy-950);
      font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
      line-height: 1.7;
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    h1, h2, h3, p { margin: 0; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    a:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 4px; }
    .shell { width: min(calc(100% - (var(--gutter) * 2)), var(--page)); margin-inline: auto; }
    .content-shell { width: min(calc(100% - (var(--gutter) * 2)), var(--content)); margin-inline: auto; }
    .section { display: grid; align-items: center; padding-block: var(--section); }
    #company, #services { padding-block: var(--section-spacious); }
    #cases { padding-block: var(--section-compact); }
    .section.soft { background: var(--soft); }
    .section.dark { color: var(--white); background: var(--navy-900); }
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      color: var(--white);
      background: color-mix(in srgb, var(--navy-950) 88%, transparent);
      border-bottom: 1px solid rgba(127, 179, 224, 0.22);
      backdrop-filter: blur(1rem);
      transition: color var(--header-speed) ease, background-color var(--header-speed) ease, box-shadow var(--header-speed) ease;
    }
    .site-header.is-scrolled { color: var(--ink); background: color-mix(in srgb, var(--white) 95%, transparent); border-color: var(--line); box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--navy-950) 10%, transparent); }
    .nav { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; }
    .brand { display: inline-flex; align-items: center; min-height: 3rem; }
    .brand img,
    .brand svg { filter: brightness(0) invert(1); transition: filter var(--header-speed) ease; }
    .site-header.is-scrolled .brand img,
    .site-header.is-scrolled .brand svg { filter: none; }
    .menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
    .menu > a:not(.header-cta) { color: rgba(255, 255, 255, 0.72); }
    .menu > a:not(.header-cta):hover { color: var(--white); }
    .site-header.is-scrolled .menu > a:not(.header-cta) { color: var(--muted); }
    .site-header.is-scrolled .menu > a:not(.header-cta):hover { color: var(--ink); }
    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      min-height: 2.5rem;
      color: var(--blue-300);
      border-bottom: 1px solid currentColor;
    }
    .header-cta::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
    .site-header.is-scrolled .header-cta { color: var(--blue-700); }
    .hero {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: var(--hero-height);
      padding-top: 5rem;
      overflow: hidden;
      color: var(--white);
      background: var(--navy-900);
    }
    .hero-grid {
      position: absolute;
      z-index: -1;
      inset: 5rem max(var(--gutter), calc((100vw - var(--page)) / 2)) 11rem;
      border-inline: 1px solid rgba(127, 179, 224, 0.06);
      background-image: linear-gradient(90deg,
        transparent 24.9%, rgba(127, 179, 224, 0.04) 25%, transparent 25.1%,
        transparent 49.9%, rgba(127, 179, 224, 0.04) 50%, transparent 50.1%,
        transparent 74.9%, rgba(127, 179, 224, 0.04) 75%, transparent 75.1%);
      pointer-events: none;
    }
    .hero-star {
      position: absolute;
      z-index: -1;
      inset: 5rem 0 10rem;
      width: 100%;
      height: calc(100% - 15rem);
      color: var(--blue-300);
      opacity: var(--star-art-opacity);
      shape-rendering: geometricPrecision;
      -webkit-mask-image: radial-gradient(ellipse 34% 44% at 50% 48%, transparent 0%, transparent 48%, var(--mask-solid) 86%, var(--mask-solid) 100%);
      mask-image: radial-gradient(ellipse 34% 44% at 50% 48%, transparent 0%, transparent 48%, var(--mask-solid) 86%, var(--mask-solid) 100%);
      pointer-events: none;
      user-select: none;
    }
    .hero-star--mobile { display: none; }
    .star-outline,
    .star-facets,
    .star-links,
    .star-orbits {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
    .star-outline { stroke-width: 1; opacity: 0.42; }
    .star-facets { stroke-width: 1; opacity: 0.18; }
    .star-links { stroke-width: 1; opacity: 0.24; }
    .star-orbits { stroke-width: 1; opacity: 0.1; stroke-dasharray: 2 12; }
    .star-node {
      fill: var(--navy-900);
      stroke: currentColor;
      stroke-width: 1;
      opacity: 0.55;
      vector-effect: non-scaling-stroke;
    }
    .star-node.core { fill: currentColor; }
    .hero-main { position: relative; z-index: 1; display: grid; place-items: center; min-height: 28.5rem; padding-block: clamp(3rem, 5vw, 4.5rem); }
    .hero-copy { width: min(100%, 54rem); text-align: center; }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      color: var(--blue-300);
    }
    .hero-kicker::before, .hero-kicker::after { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.55; }
    .hero h1 span { display: block; white-space: nowrap; }
    .hero h1 em { color: var(--blue-300); font-style: normal; }
    .hero p {
      max-width: 40rem;
      margin: 1.5rem auto 0;
      color: rgba(255, 255, 255, 0.72);
    }
    .hero-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 3.25rem;
      margin-top: 2rem;
      padding-inline: 1.75rem;
      color: var(--navy-950);
      background: var(--white);
    }
    .hero-route { position: relative; z-index: 2; background: var(--navy-950); border-top: 1px solid rgba(127, 179, 224, 0.22); }
    .hero-route-inner { position: relative; min-height: 10.5rem; }
    .route-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .route-rail, .route-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .route-rail { stroke: var(--white); stroke-width: 1; opacity: 0.2; }
    .route-flow { stroke: var(--blue-300); stroke-width: 2.25; stroke-dasharray: 0.16 0.84; animation: routeFlow var(--route-duration) linear infinite; }
    .route-node { fill: var(--navy-950); stroke: var(--blue-300); stroke-width: 1.5; vector-effect: non-scaling-stroke; animation: routePulse var(--route-duration) ease-in-out infinite; }
    .route-node.two { animation-delay: 0.95s; }
    .route-node.three { animation-delay: 1.9s; }
    .route-list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
    .route-list li { display: grid; justify-items: center; align-content: start; gap: 0.5rem; min-height: 10.5rem; padding: 3.125rem 1.25rem 1.25rem; text-align: center; }
    .route-list li + li { border-left: 1px solid color-mix(in srgb, var(--blue-300) 14%, transparent); }
    .route-list b { color: var(--blue-300); }
    .route-list span { display: grid; gap: 0.25rem; }
    .route-list strong { color: var(--blue-300); }
    .route-list small { color: rgba(255, 255, 255, 0.58); }
    @keyframes routeFlow { to { stroke-dashoffset: -1; } }
    @keyframes routePulse { 0%, 16%, 100% { r: 5; opacity: 0.65; } 8% { r: 8; opacity: 1; } }
    .section-marker { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--blue-700); }
    .section.dark .section-marker, .contact .section-marker { color: var(--blue-300); }
    .section.dark .eyebrow { color: var(--blue-300); }
    .intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
    .intro-label { grid-column: 1 / 4; padding-top: 0.5rem; }
    .intro-copy { grid-column: 4 / 12; }
    .intro-copy h2, .section-head h2, .contact h2 { margin: 0; }
    .intro-copy > p { margin-top: 2rem; color: var(--muted); }
    .company-note { display: block; margin-top: 1.25rem; color: var(--blue-700); }
    .fact-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4.5rem; border-block: 1px solid var(--line); }
    .fact-row li { display: grid; gap: 1rem; min-height: 9rem; padding: 1.75rem 2rem; }
    .fact-row li + li { border-left: 1px solid var(--line); }
    .fact-row b { color: var(--blue-700); }
    .fact-row strong { display: grid; gap: 0.25rem; align-self: end; }
    .fact-row small { color: var(--muted); }

    .section-head { display: grid; gap: 1.5rem; max-width: 52rem; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
    .section-head p { color: var(--muted); }
    .section.dark .section-head p { color: rgba(255, 255, 255, 0.66); }
    .signal-list { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 2rem; }
    .signal-list li { padding: 0.625rem 0.875rem; border: 1px solid var(--line); color: var(--service-text); }
    .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
    .service-card { position: relative; display: grid; align-content: start; min-height: 25rem; padding: 2.25rem; background: var(--white); border-top: 2px solid var(--blue-700); border-bottom: 1px solid var(--line); }
    .service-card + .service-card { border-left: 1px solid var(--line); }
    .card-icon { width: 3rem; height: 3rem; padding: 0.6875rem; color: var(--blue-700); background: color-mix(in srgb, var(--blue-300) 16%, var(--white)); border-radius: 50%; }
    .service-card .num { margin-top: 1.5rem; color: var(--blue-700); }
    .service-card h3 { margin-top: 0.75rem; }
    .service-card p { margin-top: 1rem; color: var(--muted); }
    .service-card ul { display: grid; gap: 0.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--service-text); }

    .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.2); }
    .step { position: relative; min-height: 13rem; padding: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    .step:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(255, 255, 255, 0.2); }
    .step b { color: var(--blue-300); }
    .step h3 { margin-top: 2.5rem; }
    .step p { margin-top: 0.75rem; color: rgba(255, 255, 255, 0.66); }

    .difference { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 8vw, 7rem); }
    .difference .section-head { margin-bottom: 0; }
    .difference-list { border-top: 2px solid var(--navy-900); }
    .difference-list li { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; padding-block: 1.375rem; border-bottom: 1px solid var(--line); }
    .difference-list b { color: var(--blue-700); }
    .difference-list span { color: var(--muted); }

    .case-wall { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
    .case-wall span { display: grid; align-content: space-between; min-height: 9rem; padding: 2rem; color: var(--blue-700); box-shadow: inset 0 0.1875rem var(--blue-300); }
    .case-wall small { color: var(--muted); }
    .case-wall span + span { border-left: 1px solid var(--line); }

    .contact { display: grid; align-items: center; padding-block: var(--section-compact); color: var(--white); background: var(--navy-800); }
    .contact-grid { display: grid; grid-template-columns: 1fr 0.7fr; gap: clamp(3rem, 8vw, 7rem); align-items: end; }
    .contact .section-marker { margin-bottom: 1.5rem; }
    .contact p { max-width: 42rem; margin-top: 1.5rem; color: rgba(255, 255, 255, 0.68); }
    .contact-meta { border-top: 1px solid rgba(255, 255, 255, 0.26); }
    .contact-meta div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.26); }
    .contact-meta span:first-child { color: var(--blue-300); }
    .site-footer { padding-block: 1.5rem; color: rgba(255, 255, 255, 0.56); background: var(--navy-950); }
    .footer-grid { display: flex; justify-content: space-between; gap: 2rem; }

    .reveal, .reveal-stagger > * { transition: opacity var(--motion-speed) var(--motion-ease), transform var(--motion-speed) var(--motion-ease); }
    .reveal.is-visible, .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
    @media (max-width: 59.99rem) {
      .menu > a:not(.header-cta) { display: none; }
      .hero-route-inner { min-height: 0; }
      .route-track { display: none; }
      .route-list { grid-template-columns: 1fr; padding-block: 1rem 1.5rem; }
      .route-list::before { content: ""; position: absolute; top: 1.5rem; bottom: 0; left: 3.75rem; width: 1px; background: linear-gradient(var(--blue-300), rgba(127, 179, 224, 0.12)); }
      .route-list li { position: relative; grid-template-columns: 3rem 1fr; justify-items: start; align-items: center; gap: 1.5rem; min-height: 4.75rem; padding: 0.75rem 0; text-align: left; }
      .route-list li + li { border-left: 0; }
      .route-list li::after { content: ""; position: absolute; top: 50%; left: 3.5rem; width: 0.5rem; height: 0.5rem; border: 1px solid var(--blue-300); border-radius: 50%; background: var(--navy-900); transform: translateY(-50%); }
      .route-list span { align-self: center; }
      .intro-label, .intro-copy { grid-column: 1 / -1; }
      .intro-grid { gap: 1.5rem; }
      .service-grid { grid-template-columns: 1fr; }
      .service-card { min-height: 0; }
      .service-card + .service-card { border-left: 0; }
      .service-card h3 { margin-top: 2.5rem; }
      .difference, .contact-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 47.99rem) {
      :root {
        --gutter: 1.25rem;
        --section: 5rem;
        --section-spacious: 5.5rem;
        --section-compact: 4.75rem;
        --hero-height: clamp(44rem, 88svh, 50rem);
      }
      .nav { min-height: 4.5rem; }
      .header-cta { min-height: 2.5rem; }
      .hero { padding-top: 4.5rem; }
      .hero-grid { inset: 4.5rem var(--gutter) 10.5rem; }
      .hero-star--desktop { display: none; }
      .hero-star--mobile {
        display: block;
        inset: 4.5rem 0 10.5rem;
        height: calc(100% - 15rem);
        opacity: var(--star-art-opacity-mobile);
        -webkit-mask-image: radial-gradient(ellipse 52% 37% at 50% 48%, transparent 0%, transparent 52%, var(--mask-solid) 100%);
        mask-image: radial-gradient(ellipse 52% 37% at 50% 48%, transparent 0%, transparent 52%, var(--mask-solid) 100%);
      }
      .hero-main { min-height: 25rem; padding-block: 3rem; }
      .hero-kicker { margin-bottom: 1.25rem; }
      .hero-kicker::before, .hero-kicker::after { width: 1.25rem; }
      .hero p { max-width: 21rem; margin-top: 1.25rem; }
      .hero-action { min-height: 3rem; margin-top: 1.75rem; }
      .intro-copy > p { margin-top: 1.5rem; }
      .fact-row { grid-template-columns: 1fr; margin-top: 3rem; }
      .fact-row li { grid-template-columns: 2.5rem 1fr; align-items: center; min-height: 0; padding: 1.25rem 0; }
      .fact-row li + li { border-top: 1px solid var(--line); border-left: 0; }
      #company .fact-row strong { align-self: auto; }
      .process-grid { grid-template-columns: 1fr; }
      .step { min-height: 0; padding: 1.5rem 0; }
      .step:not(:nth-child(3n + 1)) { border-left: 0; }
      .step h3 { margin-top: 1.25rem; }
      .difference-list li { grid-template-columns: 1fr; gap: 0.5rem; }
      .case-wall { grid-template-columns: 1fr; }
      .case-wall span { min-height: 0; padding: 1.25rem 0; }
      .case-wall span + span { border-top: 1px solid var(--line); border-left: 0; }
      .footer-grid { display: grid; gap: 0.5rem; }
    }

    @media (max-width: 23rem) {
      .hero p { max-width: 18rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
      .route-flow, .route-node { animation: none; }
    }

.company-overview { margin-top: 3rem; border-top: 1px solid var(--line); }
.company-overview div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.company-overview dt { color: var(--blue-700); font-weight: 700; }
.company-overview dd { margin: 0; color: var(--muted); }
.organization { display: grid; grid-template-columns: 10rem repeat(2, 1fr); gap: 1rem; margin-top: 2rem; padding: 1.5rem 0; border-block: 1px solid var(--line); }
.organization > b, .organization strong { color: var(--blue-700); } .organization div { display: grid; gap: .25rem; } .organization span { color: var(--muted); }
@media (max-width: 47.99rem) { .company-overview div { grid-template-columns: 1fr; gap: .25rem; } .organization { grid-template-columns: 1fr; } }

.service-card .card-link { color: inherit; text-decoration: none; }
.service-card .card-link::after { content: ""; position: absolute; inset: 0; }
.service-card .card-link:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; }

/* Subpage additions (about.html, services.html) — appended only; rules above are untouched. */
.page-hero { padding-block: calc(5rem + clamp(2.5rem, 5vw, 4rem)) clamp(3.5rem, 5vw, 4.5rem); }
.page-hero .section-marker { margin-bottom: 1.25rem; }
.page-hero h1 { max-width: 24ch; font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 800; line-height: 1.2; letter-spacing: var(--ls-xl); }
.page-hero .lead { max-width: var(--read-tight); margin-top: 1.25rem; color: rgba(255, 255, 255, .72); font-size: var(--type-lead); font-weight: 500; line-height: 1.8; text-wrap: pretty; }
.page-hero h1 em, .page-hero .lead em { color: var(--blue-300); font-style: normal; }
.notice-box { max-width: var(--read); padding: 1.125rem 1.375rem; color: var(--blue-700); background: color-mix(in srgb, var(--blue-300) 10%, var(--white)); border-left: .25rem solid var(--blue-300); border-radius: var(--radius-control); font-weight: 600; }
.list-title { margin: 0 0 1rem; color: var(--ink); font-size: var(--type-h5); font-weight: 700; }
.role-note { max-width: var(--read); margin-top: .5rem; color: var(--muted); }
.detail-link { display: inline-flex; align-items: center; gap: .625rem; min-height: 3.25rem; margin-top: 2.25rem; padding: .75rem 1.5rem; color: var(--white); background: var(--blue-700); border-radius: var(--radius-control); font-size: 1.0625rem; font-weight: 700; letter-spacing: var(--ls-sm); }
.detail-link:hover { background: var(--navy-800); }
.detail-link .action-icon { width: 1.125rem; height: 1.125rem; color: inherit; }

/* Subpage additions (cases.html, contact.html) - appended only; rules above are untouched. */
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.cta-row .detail-link { margin-top: 0; }