/* ==========================================================================
   D.Company Ltd. — L:BRN corporate site
   Shared stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (fixed) */
  --teal: #36AE92;
  --ink: #3A4249;
  --muted: #565E65;
  --bg: #F7F9FA;

  /* Derived shades of the brand palette */
  --teal-600: #2C9179;
  --teal-700: #23745F;
  --teal-wash: rgba(54, 174, 146, 0.08);
  --teal-line: rgba(54, 174, 146, 0.30);
  --ink-900: #2C3339;
  --ink-800: #333B41;

  --white: #FFFFFF;
  --line: rgba(86, 94, 101, 0.16);
  --line-strong: rgba(86, 94, 101, 0.32);
  --line-dark: rgba(247, 249, 250, 0.14);
  --on-dark: rgba(247, 249, 250, 0.72);
  --placeholder: #E6EAED;

  /* Type — Google Sans for display and body.

     The small uppercase labels run in Roboto, loaded from Google Fonts so
     every visitor sees the same thing regardless of platform. Korean falls
     through to the system Hangul face in every case. */
  --font-kr: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-display: 'Google Sans Flex', var(--font-kr), 'Helvetica Neue', Arial, sans-serif;
  /* Hero statements only — Oswald is condensed, so it stays out of the
     smaller headings where the narrower letterforms would cost legibility. */
  --font-title: 'Oswald', var(--font-display);
  --font-body: 'Google Sans Flex', var(--font-kr), 'Segoe UI', Arial, sans-serif;
  --font-label: 'Roboto', var(--font-kr), 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(58, 66, 73, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(58, 66, 73, 0.22);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--teal);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
}
.skip-link:focus { left: 0; }

/* Everything set in the label face runs bold. Helvetica ships Regular and
   Bold only, so 700 is the one real step up — collected here rather than
   repeated across two dozen rules. Weights declared later in a specific
   rule still win. */
.skip-link,
.eyebrow,
.link,
.hero-meta,
.card-index,
.fact dt,
.stat-label,
.ph,
.app-shot figcaption,
.status,
.pillar-note,
.phase-num,
.phase-range,
.patent-no,
.gantt-months,
.gantt-label small,
.gantt-bar,
.field label,
.field-error,
.info-row dt,
.footer-col h4,
.footer-bottom { font-weight: 700; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section-dark {
  background: var(--ink);
  color: var(--on-dark);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--bg); }

.section-alt { background: var(--white); }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  max-width: 62ch;
}
.section-dark .lede { color: var(--on-dark); }

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Section-level heading, one step down from the page title */
.h-lg {
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  max-width: 24ch;
}
.h-tight { max-width: 16ch; }

/* Opening statement set in the display face */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.section-dark .pull-quote { color: var(--bg); }

/* Vertical rhythm helpers */
.stack-sm { margin-top: 1.25rem; }
.stack-md { margin-top: 1.75rem; }
.stack-mid { margin-top: clamp(1.5rem, 3vw, 2rem); }
.stack-lg { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Section header — small-caps eyebrow carrying the L:BRN colon motif */
.eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.088em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: ':';
  color: var(--teal);
  font-weight: 600;
  margin-right: 0.6em;
}
/* Any eyebrow on a dark ground. .page-hero was missing from this list, so
   the subpage eyebrows were rendering in the light-mode muted grey against
   dark ink — barely legible at roughly 1.5:1. */
.section-dark .eyebrow,
.page-hero .eyebrow { color: rgba(247, 249, 250, 0.6); }

.section-head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); }
.section-head p { margin-top: 1.25rem; }

/* Split header: label rail on the left, content on the right */
.split {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--teal);
  color: var(--white);
}
.btn-primary:hover { background: var(--teal-600); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-700); }

.btn-on-dark {
  background: transparent;
  color: var(--bg);
  border-color: var(--line-dark);
}
.btn-on-dark:hover { border-color: var(--teal); color: var(--teal); }

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* App store badges — drawn in markup and inline SVG rather than shipped as
   bitmap badge artwork, so they stay sharp at any pixel density and scale with
   the type. Proportions, black ground and two-line lockup follow the official
   badges. The row wraps rather than shrinking the badges, so a narrow screen
   stacks them at full size instead of squeezing them side by side. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.95rem;
  background: #000;
  color: var(--white);
  border-radius: 7px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.store-badge svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}
.store-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.store-badge small {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.store-badge strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Inline text link */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.044em;
  text-transform: uppercase;
  color: var(--teal-700);
  border-bottom: 1px solid var(--teal-line);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link:hover { color: var(--teal); border-color: var(--teal); }

/* --------------------------------------------------------------------------
   5. Header / GNB
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

/* Dark mode — set by script.js whenever a dark section sits under the bar.
   Keeps the GNB legible over the hero, dark strips and the footer. */
.site-header.is-on-dark {
  background: rgba(44, 51, 57, 0.82);
  border-bottom-color: var(--line-dark);
}
.site-header.is-on-dark .nav-link { color: var(--on-dark); }
.site-header.is-on-dark .nav-link:hover,
.site-header.is-on-dark .nav-link.is-active { color: var(--bg); }
.site-header.is-on-dark .nav-toggle { border-color: var(--line-dark); }
.site-header.is-on-dark .nav-toggle span,
.site-header.is-on-dark .nav-toggle span::before,
.site-header.is-on-dark .nav-toggle span::after { background: var(--bg); }
.site-header.is-on-dark .nav-toggle[aria-expanded='true'] span { background: transparent; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 74px;
}

/* Brand lockup — symbol + wordmark set side by side.
   The wordmark carries the name, so it holds full size; the symbol is dialled
   back to ~1.33x the wordmark cap height so the mark reads as a companion to
   the type rather than competing with it. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.logo-symbol {
  height: 28px;
  width: auto;
  transition: transform 0.3s var(--ease);
}
.logo-wordmark {
  height: 21px;
  width: auto;
}
.logo:hover .logo-symbol { transform: translateY(-2px); }
.footer-logo .logo-symbol { height: 36px; }
.footer-logo .logo-wordmark { height: 22px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.nav-link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  padding-block: 0.5rem;
  transition: color 0.25s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; }

.nav-panel { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(4rem, 8vw, 6.5rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 86% 10%, rgba(54, 174, 146, 0.18), transparent 55%);
  pointer-events: none;
}
/* The symbol, oversized and bled off the right edge, as ground texture */
.hero::after {
  content: '';
  position: absolute;
  right: -7%;
  top: 50%;
  transform: translateY(-50%);
  width: min(48vw, 540px);
  aspect-ratio: 1;
  background: url('logo-symbol.png') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
/* Dot-matrix field — a grid of teal dots whose brightness and size drift on
   flowing noise. Painted by script.js; sits above the colour wash and below
   the copy column.

   The canvas is laid out but transparent until the script confirms it is
   drawing. It must NOT be display:none — a hidden element measures 0x0, so
   the sizing step would fail and it would never appear. */
.dot-matrix {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.dot-matrix.is-running { opacity: 1; }

.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

/* Hero statements across the whole site — home and every subpage — share one
   treatment. Oswald is condensed, so it carries a lighter weight and looser
   tracking than Google Sans to hold the same optical presence. */
.hero-title,
.page-hero h1 {
  font-family: var(--font-title);
  font-size: clamp(2.375rem, 5.4vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--bg);
}
.hero-title { text-wrap: balance; }
.hero-title em {
  font-style: normal;
  color: var(--teal);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.75rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.044em;
  text-transform: uppercase;
  color: rgba(247, 249, 250, 0.6);
}
/* Each fact carries its own frosted-glass chip. Held back deliberately: no
   border and no shadow of any kind — the blurred fill alone defines the
   shape. */
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.375rem 0.7rem;
  border: 0;
  border-radius: var(--radius);
  background: rgba(247, 249, 250, 0.05);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: none;
}
.hero-meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--teal);
  border-radius: 50%;
}

.hero-mission {
  border-left: 2px solid var(--teal);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.hero-mission p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--on-dark);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

/* Signal line — an EEG-like trace that draws itself once on load */
.signal {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  width: 100%;
  height: 60px;
  display: block;
}
.signal path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: trace 3.4s var(--ease) 0.35s forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Page banner used on interior pages */
.page-hero {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--teal) 0 18%, transparent 18%);
}
/* A quiet teal wash across the ink so the subpage headers are not a flat
   slab. Gradient only — no grid, no chips. */
.page-hero {
  background-image:
    radial-gradient(circle at 88% 12%, rgba(54, 174, 146, 0.20), transparent 58%),
    radial-gradient(ellipse 65% 80% at 4% 92%, rgba(54, 174, 146, 0.11), transparent 64%);
}
.page-hero::before {
  content: '';
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 380px);
  aspect-ratio: 1;
  background: url('logo-symbol.png') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
/* Type treatment lives in the shared hero-statement rule; only the measure is
   page-hero specific. Widened from 20ch so the underlined opening phrase,
   which must not wrap, always has room on one line. */
.page-hero h1 { max-width: 26ch; }
.page-hero p { margin-top: 1.5rem; max-width: 60ch; color: var(--on-dark); }

/* Underline that wipes in on load. Drawn as a background gradient rather
   than a pseudo-element or text-decoration, so it animates cleanly and still
   follows the phrase if it wraps to a second line. The rule sits beside the
   text rather than behind it, so the full-strength brand teal is fine here. */
.mark {
  /* Thick marker stroke that rides up over the bottom of the letterforms,
     the way a highlighter pen would. Only a sliver of each glyph sits on
     teal, so the word stays legible off the dark ground above it. */
  --mark-h: 0.36em;   /* thickness */
  --mark-y: 0.1em;    /* lift off the bottom of the line box */
  /* Keep the phrase on one line. Broken across two, each fragment would draw
     and animate its own stroke instead of one continuous sweep. */
  white-space: nowrap;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--mark-y));
  background-size: 0 var(--mark-h);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: mark-wipe 0.85s var(--ease) 0.3s forwards;
}
@keyframes mark-wipe {
  from { background-size: 0 var(--mark-h); }
  to { background-size: 100% var(--mark-h); }
}

/* No wipe for anyone who has asked motion to stop — show the end state. */
@media (prefers-reduced-motion: reduce) {
  .mark {
    animation: none;
    background-size: 100% var(--mark-h);
  }
}

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.card h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.card p { color: var(--muted); font-size: 0.96875rem; }

.card-link { display: flex; flex-direction: column; height: 100%; }
.card-link:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.card-index {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.75rem;
  display: block;
}
.card-link .link { margin-top: auto; padding-top: 1.75rem; align-self: flex-start; }

/* Fact rows — used for the company overview */
.facts { border-top: 1px solid var(--line); }
.fact {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.fact dt {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}

/* Stats banner */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.stat {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line-dark);
}
.stat:last-child { border-right: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bg);
  line-height: 1;
}
.stat-value .unit { color: var(--teal); }
.stat-label {
  margin-top: 0.875rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.044em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(247, 249, 250, 0.6);
}

/* --------------------------------------------------------------------------
   8. Placeholder image areas
   -------------------------------------------------------------------------- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: var(--placeholder);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  aspect-ratio: var(--ph-ratio, 16 / 9);
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.033em;
  line-height: 1.6;
}
.ph-dark {
  background: rgba(247, 249, 250, 0.05);
  border-color: var(--line-dark);
  color: rgba(247, 249, 250, 0.55);
}

/* Partner logos — drop-in replacement for a .ph placeholder. The 5:2 box is
   held so a card carrying a real logo keeps the same footprint as one still on
   a placeholder, and contain guarantees the artwork is letterboxed rather than
   cropped whatever aspect the supplied file happens to be. */
.partner-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: contain;
  object-position: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Where a partner supplies a photograph instead of a logo file, fill the box
   and crop the flanks rather than leaving contain's empty bands — a photo has
   hard edges, so the bands read as a mistake next to a white-ground logo. This
   is the treatment .photo already gives photography elsewhere on the site. */
.partner-photo { object-fit: cover; }

/* App screenshots (device mockups with transparent corners) */
.app-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-shot img {
  width: 100%;
  height: auto;
  max-width: 260px;
}
.app-shot figcaption {
  margin-top: 1rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.033em;
  line-height: 1.6;
}

/* Documentary photos with captions */
.photo {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--placeholder);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.photo figcaption {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65;
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   9. Pillars (Solutions)
   -------------------------------------------------------------------------- */
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.pillar:nth-child(even) .pillar-media { order: -1; }
/* Pillar imagery — each file keeps its own aspect ratio instead of being forced
   into one shared box. The app shot is a wide banner whose tagline and logotype
   are baked into the artwork, so cropping it to 4:3 would cut into type; the
   device and centre shots are already 4:3. Each pillar is its own band, so
   differing media heights cost nothing in alignment. */
.pillar-shot {
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pillar-body h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-block: 1rem 1.25rem;
}
.pillar-body p { color: var(--muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: var(--white);
}
.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.status-live {
  color: var(--teal-700);
  border-color: var(--teal-line);
  background: var(--teal-wash);
}
.status-live::before { background: var(--teal); }

.pillar-note {
  margin-top: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.022em;
  color: var(--teal-700);
}

/* Ecosystem diagram */
.eco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.eco-figure { width: 100%; height: auto; }
.eco-figure .eco-node { fill: var(--ink-900); stroke: var(--teal-line); stroke-width: 1; }
.eco-figure .eco-hub { fill: var(--teal); }
.eco-figure .eco-link {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.25;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  opacity: 0.65;
}
.eco-figure .eco-ring { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.eco-figure text {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.044em;
  text-transform: uppercase;
  fill: rgba(247, 249, 250, 0.82);
}
.eco-figure .eco-hub-label { fill: var(--ink); font-weight: 600; }
.is-in .eco-figure .eco-link { animation: trace 1.6s var(--ease) forwards; }
.is-in .eco-figure .eco-link:nth-of-type(2) { animation-delay: 0.18s; }
.is-in .eco-figure .eco-link:nth-of-type(3) { animation-delay: 0.36s; }

/* Feature list */
.feature {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--teal);
  border-radius: var(--radius);
}
.feature h3 { font-size: 1.0625rem; margin-bottom: 0.625rem; }
.feature p { color: var(--muted); font-size: 0.96875rem; }

/* --------------------------------------------------------------------------
   10. Roadmap (About)
   -------------------------------------------------------------------------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  position: relative;
}
.phase {
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-dark);
}
.phase::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--line-dark);
}
/* A completed phase reads as ticked off: its rule turns teal and the node
   becomes a filled disc carrying a check instead of a plain dot. */
.phase-done { border-top-color: var(--teal); }
.phase-done::before {
  width: 18px;
  height: 18px;
  top: -9px;
  border: 0;
  background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.7' fill='none' stroke='%23F7F9FA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
/* The phase currently under way: its rule turns teal like a completed one, and
   the node fills in as a teal dot haloed in the brand line tint so it reads as
   live. Deliberately no check and a smaller disc than .phase-done — this work
   is running, not finished. */
.phase-active { border-top-color: var(--teal); }
.phase-active::before {
  width: 14px;
  height: 14px;
  top: -7px;
  border: 0;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-line);
}
.phase-num {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.077em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 0.625rem;
}
.phase-range {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: rgba(247, 249, 250, 0.6);
  display: block;
  margin-bottom: 1.125rem;
}
.phase h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.phase p { color: var(--on-dark); font-size: 0.96875rem; }

/* --------------------------------------------------------------------------
   11. Patents & development timeline (Technology)
   -------------------------------------------------------------------------- */
.patent {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 0.5rem 2.5rem;
  align-items: baseline;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.patent:first-child { border-top: 1px solid var(--line); }
.patent:hover { background: var(--teal-wash); }
.patent-no {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal-700);
  letter-spacing: 0.02em;
}
.patent-title { font-size: 1.0625rem; color: var(--ink); font-weight: 500; }

/* Month-gridded development schedule for 2026 */
.gantt { margin-top: 2.5rem; }
.gantt-months {
  display: grid;
  grid-template-columns: minmax(0, 250px) repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.033em;
  text-transform: uppercase;
  color: var(--muted);
}
.gantt-months span { text-align: center; }
.gantt-months .gantt-year { text-align: left; letter-spacing: 0.14em; color: var(--ink); }

.gantt-row {
  display: grid;
  grid-template-columns: minmax(0, 250px) repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.gantt-label { font-size: 0.96875rem; font-weight: 500; padding-right: 1rem; }
.gantt-label small {
  display: block;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.033em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
}
.gantt-bar {
  height: 30px;
  background: var(--teal);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.033em;
  color: var(--white);
  white-space: nowrap;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.is-in .gantt-bar { transform: scaleX(1); }
.gantt-row:nth-child(3) .gantt-bar { transition-delay: 0.08s; }
.gantt-row:nth-child(4) .gantt-bar { transition-delay: 0.16s; }
.gantt-row:nth-child(5) .gantt-bar { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.625rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.7; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(86, 94, 101, 0.55); }

.field-error {
  display: block;
  min-height: 1.1rem;
  margin-top: 0.375rem;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.022em;
  color: #B4453A;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #B4453A; }

.form-note {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 1.25rem;
}
.form-success {
  display: none;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--teal-wash);
  border: 1px solid var(--teal-line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--teal-700);
}
.form-success.is-visible { display: block; }

.contact-info { border-top: 1px solid var(--line); }
.info-row { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.info-row dt {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.625rem;
}
.info-row dd { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.info-row a { border-bottom: 1px solid var(--teal-line); transition: color 0.25s var(--ease); }
.info-row a:hover { color: var(--teal-700); }

/* --------------------------------------------------------------------------
   13. Call to action strip
   -------------------------------------------------------------------------- */
.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-strip h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); max-width: 22ch; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--on-dark);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  font-size: 0.9375rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand .logo { color: var(--bg); }
.footer-kr {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: rgba(247, 249, 250, 0.55);
}
.footer-brand p {
  margin-top: 1.25rem;
  max-width: 34ch;
  color: rgba(247, 249, 250, 0.6);
  font-size: 0.9375rem;
}
.footer-col h4 {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.077em;
  text-transform: uppercase;
  color: rgba(247, 249, 250, 0.5);
  margin-bottom: 1.25rem;
}
.footer-col li { margin-bottom: 0.75rem; }
.footer-col a {
  color: rgba(247, 249, 250, 0.78);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: var(--teal); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.033em;
  color: rgba(247, 249, 250, 0.5);
}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .eco { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 860px) {
  .nav-list,
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 1rem var(--gutter) 1.75rem;
  }
  .nav-panel.is-open { display: block; }
  .nav-panel .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-panel .nav-link {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav-panel .nav-link::after { display: none; }
  .nav-panel .nav-cta { display: inline-flex; margin-top: 1.25rem; width: 100%; justify-content: center; }

  .site-header.is-on-dark .nav-panel {
    background: var(--ink-900);
    border-bottom-color: var(--line-dark);
  }
  .site-header.is-on-dark .nav-panel .nav-link {
    color: var(--on-dark);
    border-bottom-color: var(--line-dark);
  }
  .site-header.is-on-dark .nav-panel .nav-link:hover,
  .site-header.is-on-dark .nav-panel .nav-link.is-active { color: var(--bg); }

  .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1),
  .stat:nth-child(2) { border-bottom: 1px solid var(--line-dark); }
  .roadmap { grid-template-columns: 1fr; gap: 2.5rem; }
  .pillar { grid-template-columns: 1fr; gap: 1.75rem; }
  .pillar:nth-child(even) .pillar-media { order: 0; }
  .patent { grid-template-columns: 1fr; gap: 0.375rem; }

  /* The month grid stops being readable — the mono range in each label carries it */
  .gantt-months,
  .gantt-bar { display: none; }
  .gantt-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 620px) {
  .grid-2,
  .grid-4 { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; gap: 0.375rem; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-strip { flex-direction: column; align-items: flex-start; }

  /* Hero statement drops to two lines and scales with the viewport, so it
     runs as large as will fit without ever spilling the gutter. */
  .hero-title .brk-lg { display: none; }
  .hero-title {
    /* Oswald is condensed, so the two lines fit at a larger size than the
       Google Sans setting allowed. Tracking matches the desktop rule. */
    font-size: clamp(2rem, 9.6vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.005em;
  }

  /* The underlined phrase cannot wrap, so the subpage titles scale with the
     viewport to keep the longest of them (25 characters) inside the gutter. */
  .page-hero h1 { font-size: clamp(1.5rem, 7.4vw, 2.375rem); }
}

/* --------------------------------------------------------------------------
   17. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .signal path { stroke-dashoffset: 0; }
  .gantt-bar { transform: scaleX(1); }
  .eco-figure .eco-link { stroke-dashoffset: 0; }
}

@media print {
  .site-header,
  .nav-toggle,
  .cta-strip { display: none; }
  body { background: #fff; color: #000; }
}