/* UnitLab corporate system: manufacturing evidence, clear diagrams and restrained typography. */
/* Critique: replace accumulated promotional panels with a company narrative and inspectable work. */
:root {
  --st-ink: #101b27;
  --st-muted: #52616f;
  --st-line: #c9d0d5;
  --st-bg: #ffffff;
  --st-soft: #f3f5f6;
  --st-navy: #102330;
  --st-accent: #f39800;
  --st-inverse: #ffffff;
  --st-inverse-muted: #c8d4dc;
  --st-clear: transparent;
  --st-font: var(--font-sans);
  --st-section: clamp(76px, 8vw, 124px);
  --st-gutter: clamp(24px, 5.4vw, 80px);
  --st-max: 1440px;
  --st-radius: 3px;
  --st-diagram-module: #e0e7ec;
  --st-diagram-corridor: #cf6f31;
  --st-diagram-core: #182c3d;
  --st-ease: cubic-bezier(.16, 1, .3, 1);
}
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 104px; }
body.company-site[data-design="strategy"] { margin: 0; overflow-x: clip; background: var(--st-bg); color: var(--st-ink); font-family: var(--st-font); font-size: 18px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
[data-design="strategy"] *, [data-design="strategy"] *::before, [data-design="strategy"] *::after { box-sizing: border-box; }
[data-design="strategy"] ::selection { background: var(--st-accent); color: var(--st-ink); }
[data-design="strategy"] :focus-visible { outline: 3px solid var(--st-ink); outline-offset: 5px; }
[data-design="strategy"] .is-dark :focus-visible { outline-color: var(--st-accent); }
[data-design="strategy"] [hidden] { display: none !important; }
[data-design="strategy"] img { display: block; max-width: 100%; height: auto; }
[data-design="strategy"] h1, [data-design="strategy"] h2, [data-design="strategy"] h3, [data-design="strategy"] h4 { color: inherit; margin: 0; line-height: 1.25; letter-spacing: -.035em; font-weight: 700; word-break: keep-all; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
[data-design="strategy"] h1 { font-size: clamp(40px, 4.6vw, 64px); }
[data-design="strategy"] h2 { font-size: clamp(30px, 3.3vw, 46px); }
[data-design="strategy"] h3 { font-size: clamp(23px, 2vw, 28px); }
[data-design="strategy"] p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
[data-design="strategy"] p + p { margin-top: 16px; }
[data-design="strategy"] a { color: inherit; text-underline-offset: 6px; text-decoration-thickness: 1px; }
[data-design="strategy"] button, [data-design="strategy"] input, [data-design="strategy"] select, [data-design="strategy"] textarea { font: inherit; caret-color: var(--st-ink); }
[data-design="strategy"] a, [data-design="strategy"] button { -webkit-tap-highlight-color: var(--st-clear); }
.strategy-wrap { width: 100%; max-width: var(--st-max); margin-inline: auto; padding-inline: var(--st-gutter); }
.strategy-section { padding-block: var(--st-section); }
.strategy-section.is-muted, .strategy-page-hero.is-muted { background: var(--st-soft); }
.strategy-section.is-dark { background: var(--st-navy); color: var(--st-inverse); }
.strategy-section.is-dark p { color: var(--st-inverse-muted); }
.strategy-heading { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: end; gap: 64px; margin-bottom: 48px; }
.strategy-heading > p { max-width: 52ch; color: var(--st-muted); }
.strategy-section.is-dark .strategy-heading > p { color: var(--st-inverse-muted); }
.strategy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
[data-design="strategy"] .strategy-button, [data-design="strategy"] .pill { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 24px; min-height: 52px; background: var(--st-ink); color: var(--st-inverse); border: 1px solid var(--st-ink); border-radius: var(--st-radius); text-decoration: none; font-size: 16px; font-weight: 650; line-height: 1.5; transition: background-color .18s, color .18s; }
[data-design="strategy"] .strategy-button:hover, [data-design="strategy"] .pill:hover { background: var(--st-navy); }
[data-design="strategy"] .strategy-button.is-secondary, [data-design="strategy"] .pill.outline { background: var(--st-clear); color: var(--st-ink); border-color: var(--st-line); }
[data-design="strategy"] .strategy-button.is-secondary:hover { border-color: var(--st-ink); }
.strategy-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-weight: 650; font-size: 16px; text-decoration: underline; }
.strategy-arrow { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.strategy-highlight { color: inherit; font-weight: 750; text-decoration: underline; text-decoration-color: var(--st-accent); text-decoration-thickness: .12em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
[data-design="strategy"] .skip-link { position: fixed; left: 20px; top: -80px; z-index: 1100; padding: 12px 20px; background: var(--st-ink); color: var(--st-inverse); }
[data-design="strategy"] .skip-link:focus { top: 12px; }
[data-design="strategy"] .ed-header { position: sticky; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 96px; padding: 20px max(var(--st-gutter), calc((100% - var(--st-max))/2 + var(--st-gutter))); border-bottom: 1px solid var(--st-line); background: var(--st-bg); color: var(--st-ink); }
[data-design="strategy"] .ed-logo img { width: 156px; height: auto; filter: none; }
[data-design="strategy"] .company-nav { display: flex; align-items: center; gap: clamp(18px,2.6vw,36px); }
[data-design="strategy"] .company-nav > a { font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
[data-design="strategy"] .company-nav > a:not(.pill) { padding-block: 8px; }
[data-design="strategy"] .company-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--st-accent); text-decoration-thickness: 4px; text-underline-offset: 10px; }
[data-design="strategy"] .company-nav > a:hover { text-decoration: underline; text-underline-offset: 10px; }
[data-design="strategy"] .company-menu-toggle { border: 1px solid var(--st-line); border-radius: var(--st-radius); background: var(--st-bg); padding: 8px 16px; min-height: 44px; font-size: 16px; color: var(--st-ink); }
[data-design="strategy"] .company-menu-toggle span { margin-left: 12px; }
.strategy-home-hero { padding-block: 64px 58px; }
.strategy-hero-grid { display: grid; grid-template-columns: minmax(0,1.07fr) minmax(0,1fr); gap: 48px; align-items: center; }
[data-design="strategy"] .strategy-home-hero h1 { font-size: clamp(43px,4.3vw,64px); line-height: 1.21; letter-spacing: -.04em; }
.strategy-home-hero h1 span { display: block; }
.strategy-home-hero h1 .strategy-highlight { display: inline; }
.strategy-home-hero .hero-summary { font-size: 19px; color: var(--st-muted); max-width: 34ch; margin-top: 30px; }
.strategy-hero-figure { margin: 0; position: relative; }
.strategy-hero-figure > img { width: 100%; height: 510px !important; object-fit: cover; object-position: 55% 50%; }
.strategy-hero-figure figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--st-muted); }
.strategy-hero-bottom { margin-top: 44px; display: flex; justify-content: space-between; align-items: center; gap: 32px; border-top: 1px solid var(--st-line); padding-top: 22px; }
.strategy-hero-bottom p { font-size: 15px; color: var(--st-muted); }
.strategy-hero-bottom a { font-size: 15px; font-weight: 600; white-space: nowrap; }
.strategy-problems { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; margin-top: 56px; }
.strategy-problem { border-top: 2px solid var(--st-ink); padding-top: 26px; }
.strategy-problem h3 { margin-bottom: 18px; }
.strategy-problem p { color: var(--st-muted); max-width: 50ch; }
.strategy-problem .answer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--st-line); color: var(--st-ink); font-weight: 600; }
.strategy-flow { list-style: none; counter-reset: flow; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); padding: 0; margin: 56px 0 0; gap: 0; }
.strategy-flow li { position: relative; padding: 26px 20px 24px 0; border-top: 1px solid var(--st-line); min-width: 0; counter-increment: flow; }
.strategy-flow li::before { content: counter(flow, decimal-leading-zero); display: block; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.strategy-flow li:not(:last-child)::after { content: ''; position: absolute; right: 12px; top: -5px; width: 9px; height: 9px; border-top: 1px solid var(--st-line); border-right: 1px solid var(--st-line); transform: rotate(45deg); }
.strategy-flow strong { display: block; font-size: 21px; line-height: 1.4; font-weight: 650; }
.strategy-flow p { font-size: 15px; line-height: 1.7; margin-top: 12px; }
.strategy-flow + .strategy-flow-note { padding-top: 22px; border-top: 1px solid var(--st-line); margin-top: 22px; font-size: 16px; }
.strategy-flow-note strong { color: var(--st-inverse); }
.strategy-conditions { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 20px 0; margin: 28px 0 32px; border-block: 1px solid var(--st-line); list-style: none; font-size: 16px; font-weight: 600; }
.strategy-parcels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.strategy-parcel { margin: 0; min-width: 0; }
.strategy-parcel > img { width: 100%; height: auto; background: var(--st-soft); border: 1px solid var(--st-line); }
.strategy-parcel figcaption { padding-top: 20px; }
.strategy-parcel h3 { font-size: 24px; margin-bottom: 10px; }
.strategy-parcel p { font-size: 16px; color: var(--st-muted); }
.strategy-caption { font-size: 14px; color: var(--st-muted); line-height: 1.75; margin-top: 24px !important; }
.strategy-legend { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--st-line); font-size: 16px; }
.strategy-legend span { display: inline-flex; gap: 10px; align-items: center; }
.strategy-legend i { display: block; width: 17px; height: 17px; border: 1px solid var(--st-muted); background: var(--st-diagram-module); }
.strategy-legend .legend-corridor { background: var(--st-diagram-corridor); border-color: var(--st-diagram-corridor); }
.strategy-legend .legend-core { background: var(--st-diagram-core); border-color: var(--st-diagram-core); }
.strategy-legend .legend-boundary { background: var(--st-bg); border: 2px solid var(--st-diagram-core); }
.strategy-technical-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
.strategy-technical { border-top: 2px solid var(--st-ink); padding-top: 26px; }
.strategy-technical > img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: var(--st-bg); margin: 26px 0; }
.strategy-technical h3 { margin-bottom: 16px; }
.strategy-technical p { color: var(--st-muted); margin-bottom: 22px; }
.strategy-field-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 72px; align-items: center; }
.strategy-field-grid figure { margin: 0; }
.strategy-field-grid figure img { width: 100%; aspect-ratio: 1.12; object-fit: cover; }
.strategy-field-grid figcaption { font-size: 14px; color: var(--st-muted); margin-top: 12px; }
.strategy-field-grid h2 { margin-bottom: 28px; }
.strategy-field-grid p { color: var(--st-muted); }
.strategy-field-list { list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid var(--st-line); }
.strategy-field-list li { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--st-line); font-size: 16px; }
.strategy-field-list span { color: var(--st-muted); }
.strategy-brand-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
.strategy-brand { border-top: 1px solid var(--st-line); padding-top: 30px; }
.strategy-brand .brand-wordmark { width: 160px; height: 48px; object-fit: contain; object-position: left; margin-bottom: 24px; }
.strategy-brand h3 { margin-bottom: 18px; }
.strategy-brand p { max-width: 48ch; color: var(--st-muted); margin-bottom: 24px; }
.strategy-closing { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 80px; align-items: center; }
.strategy-closing p { color: var(--st-muted); margin: 22px 0; }
.strategy-closing-links { display: grid; gap: 0; border-top: 1px solid var(--st-line); }
.strategy-closing-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 20px; font-weight: 600; text-decoration: none; padding: 25px 0; border-bottom: 1px solid var(--st-line); }
.strategy-closing-links a:hover { text-decoration: underline; }
.strategy-page-hero { padding-block: 76px 68px; border-bottom: 1px solid var(--st-line); }
.strategy-page-hero p { max-width: 66ch; font-size: 20px; color: var(--st-muted); margin-top: 28px; }
.strategy-page-hero .strategy-actions { margin-top: 28px; }
[data-design="strategy"] .company-footer { margin-top: 0; }
[data-design="strategy"] .company-footer-social a, [data-design="strategy"] .company-footer-actions a { border-radius: var(--st-radius); }
[data-design="strategy"] .company-team-group { border-radius: 0; padding: 24px 0; border-inline: 0; background: var(--st-bg); }
[data-design="strategy"] .company-team-role { border: 0; border-radius: 0; aspect-ratio: auto; background: var(--st-bg); align-items: flex-start; text-align: left; }
@media (max-width: 1100px) {
  .strategy-hero-grid { gap: 32px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .strategy-hero-figure > img { height: 470px !important; }
  .strategy-heading, .strategy-problems, .strategy-field-grid, .strategy-closing { gap: 36px; }
  .strategy-flow { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 32px; }
  .strategy-flow li:nth-child(3)::after { display: none; }
  .strategy-parcels { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .strategy-parcel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: center; }
  [data-design="strategy"] .company-nav { gap: 18px; }
  [data-design="strategy"] .company-nav > a { font-size: 15px; }
}
@media (max-width: 768px) {
  [data-design="strategy"] .ed-header { min-height: 76px; padding-block: 16px; flex-wrap: wrap; }
  [data-design="strategy"] .ed-logo img { width: 126px; }
  [data-design="strategy"] .company-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block: 12px; }
  [data-design="strategy"] .company-nav > a:not(.pill) { padding-block: 14px; }
  [data-design="strategy"] .company-nav .pill { margin-top: 10px; }
  .strategy-home-hero { padding-top: 42px; }
  .strategy-hero-grid, .strategy-heading, .strategy-problems, .strategy-field-grid, .strategy-closing { grid-template-columns: minmax(0,1fr); gap: 30px; }
  [data-design="strategy"] .strategy-home-hero h1 { font-size: clamp(38px,8vw,60px); }
  .strategy-home-hero .hero-summary { font-size: 18px; margin-top: 24px; }
  .strategy-hero-figure > img { height: 340px !important; }
  .strategy-hero-bottom { margin-top: 28px; flex-wrap: wrap; gap: 12px; }
  .strategy-heading { margin-bottom: 36px; }
  .strategy-heading > p { font-size: 17px; }
  .strategy-problems { margin-top: 40px; gap: 36px; }
  .strategy-flow { margin-top: 36px; }
  .strategy-technical-pair, .strategy-brand-grid { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .strategy-technical > img { max-height: 340px; }
  .strategy-parcels { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .strategy-parcel { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: center; }
  .strategy-parcel figcaption { padding-top: 0; }
  .strategy-conditions { gap: 12px 24px; font-size: 15px; }
  .strategy-field-grid figure img { aspect-ratio: 4/3; }
  .strategy-page-hero { padding-block: 48px; }
  .strategy-page-hero p { font-size: 18px; }
}
@media (max-width: 480px) {
  .strategy-hero-figure > img { height: 300px !important; }
  .strategy-hero-figure figcaption { flex-direction: column; gap: 0; }
  .strategy-parcel { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .strategy-flow { grid-template-columns: minmax(0,1fr); gap: 0; }
  .strategy-flow li { padding: 22px 0 22px 48px; }
  .strategy-flow li::before { position: absolute; left: 0; top: 24px; }
  .strategy-flow li::after { display: none; }
  .strategy-flow li p { margin-top: 6px; }
  .strategy-field-list li { grid-template-columns: 86px minmax(0,1fr); }
  .strategy-actions { gap: 14px 20px; }
  .strategy-brand-grid { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-design="strategy"] *, [data-design="strategy"] *::before, [data-design="strategy"] *::after { animation: none !important; transition: none !important; }
}