/* ============================================================
   AL Solutions — Calibrated Precision / Safety Instrument
   Design system & styles
   ============================================================ */

:root{
  /* palette — warm engineering paper + ember signal */
  --paper:      #f2efe9;
  --paper-2:    #eae5dc;
  --paper-3:    #e3ddd1;
  --ink:        #0d0d0e;
  --ink-2:      #4c4a46;
  --ink-3:      #7a766e;
  --line:       rgba(13,13,14,.14);
  --line-soft:  rgba(13,13,14,.08);
  --ember:      #ff4d17;
  --ember-deep: #d63807;
  --chamber:    #0a0b0d;
  --chamber-2:  #121316;
  --c-ink:      #ece8df;
  --c-ink-2:    #908d86;
  --c-line:     rgba(236,232,223,.14);

  /* type */
  --f-display: 'Archivo', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --f-kr:      'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;

  /* scale */
  --wrap: 1320px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --sec-pad: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-kr);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(1rem,.55rem + .5vw,1.075rem);
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul,ol{ list-style:none; }
::selection{ background:var(--ember); color:#fff; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem;
  font:600 .85rem var(--f-mono); transition:top .2s;
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
/* prevent grid/flex blowout: let children shrink below content size */
.hero-grid>*,.chamber-grid>*,.about-grid>*,.cap-grid>*,.contact-grid>*,.stat,.card,.pillar,.step{ min-width:0; }
.mono{ font-family:var(--f-mono); font-weight:500; letter-spacing:.02em; }
.hl{ color:var(--ember); }

/* ---------- atmospheric layers ---------- */
.grid-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 92%);
          mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 92%);
  opacity:.7;
}
.noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- HUD ---------- */
.hud{
  position:fixed; right:var(--pad); bottom:1.1rem; z-index:90;
  display:flex; align-items:center; gap:.6rem;
  font:500 .68rem/1 var(--f-mono); color:var(--ink-3);
  letter-spacing:.04em; mix-blend-mode:multiply;
}
.hud-div{ opacity:.4; }
.hud-seg{ white-space:nowrap; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(242,239,233,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; transition:height .4s var(--ease);
}
.nav.scrolled .nav-inner{ height:64px; }
.brand-logo{ height:38px; width:auto; transition:height .4s var(--ease); }
.nav.scrolled .brand-logo{ height:32px; }

.nav-links{ display:flex; gap:.4rem; align-items:center; }
.nav-links a{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; font-size:.92rem; font-weight:500; color:var(--ink-2);
  transition:color .25s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-idx{ font:500 .62rem var(--f-mono); color:var(--ember); opacity:.7; }
.nav-links a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.35rem;
  height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-cta{ margin-left:.5rem; }

.nav-toggle{ display:none; width:42px; height:42px; position:relative; }
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ bottom:16px; }
.nav-toggle.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ bottom:20px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 auto 0; top:0; z-index:95;
  background:var(--paper); padding:7rem var(--pad) 2.5rem;
  display:flex; flex-direction:column; gap:.4rem;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  border-bottom:1px solid var(--line);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a:not(.btn){
  display:flex; align-items:center; gap:.7rem; padding:1rem .2rem;
  font-size:1.4rem; font-weight:600; border-bottom:1px solid var(--line-soft);
}
.mobile-menu .btn{ margin-top:1.4rem; justify-content:center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.5rem; font-family:var(--f-kr); font-weight:600; font-size:.96rem;
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--ink); transition:color .35s var(--ease), border-color .35s;
}
.btn-sm{ padding:.6rem 1.05rem; font-size:.88rem; }
.btn-lg{ padding:1.1rem 1.9rem; font-size:1.02rem; }
.btn-arrow{ transition:transform .35s var(--ease-out); display:inline-block; }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn-primary{ background:var(--ember); border-color:var(--ember); color:#fff; }
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .4s var(--ease-out);
}
.btn-primary:hover{ color:#fff; border-color:var(--ink); }
.btn-primary:hover::before{ transform:translateY(0); }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .4s var(--ease-out);
}
.btn-ghost:hover{ color:var(--paper); }
.btn-ghost:hover::before{ transform:translateY(0); }

.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-dark::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ember);
  transform:translateY(101%); transition:transform .4s var(--ease-out);
}
.btn-dark:hover{ color:#fff; border-color:var(--ember); }
.btn-dark:hover::before{ transform:translateY(0); }

.btn-ghost-light{ background:transparent; color:var(--c-ink); border-color:var(--c-line); }
.btn-ghost-light:hover{ background:var(--c-ink); color:var(--chamber); border-color:var(--c-ink); }

/* ============================================================
   shared section bits
   ============================================================ */
.section{ padding-block:var(--sec-pad); position:relative; }
.sec-head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-no{
  display:inline-block; font-size:.72rem; color:var(--ember);
  padding-bottom:1.1rem; letter-spacing:.08em;
  position:relative;
}
.sec-no::before{
  content:""; position:absolute; left:0; bottom:.5rem; width:34px; height:1px; background:var(--ember);
}
.sec-title{
  font-family:var(--f-kr); font-weight:800; line-height:1.08;
  font-size:clamp(2rem,1.1rem + 3.2vw,3.6rem); letter-spacing:-.03em;
}
.sec-intro{
  margin-top:1.2rem; color:var(--ink-2); font-size:clamp(1rem,.9rem + .4vw,1.18rem);
  max-width:60ch;
}

.kicker{
  display:block; line-height:1.5;
  font:500 .76rem var(--f-mono); letter-spacing:.1em; color:var(--ink-2);
  text-transform:uppercase; overflow-wrap:break-word;
}
.kicker.light{ color:var(--c-ink-2); }
.kicker-dot{
  width:7px; height:7px; background:var(--ember); display:inline-block;
  vertical-align:middle; margin-right:.55rem; position:relative; top:-1px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

/* registration corner marks */
.reg{ position:absolute; width:14px; height:14px; pointer-events:none; opacity:.5; }
.reg::before,.reg::after{ content:""; position:absolute; background:currentColor; }
.reg::before{ width:100%; height:1px; top:50%; }
.reg::after{ height:100%; width:1px; left:50%; }
.reg-tl{ top:18px; left:18px; } .reg-tr{ top:18px; right:18px; }
.reg-bl{ bottom:18px; left:18px; } .reg-br{ bottom:18px; right:18px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(8rem,16vh,11rem); padding-bottom:clamp(3rem,7vw,6rem); overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero-copy{ position:relative; z-index:2; }
.hero-title{
  font-family:var(--f-kr); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(2.7rem,1rem + 8vw,6.4rem); line-height:.98; margin:1.5rem 0;
}
.hero-title .line{ display:block; }
.hero-title .hl{ position:relative; white-space:nowrap; }
.hero-title .hl::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.5em;
  background:var(--ember); opacity:.16; z-index:-1; transform:skewX(-9deg);
}
.hero-sub{
  max-width:46ch; color:var(--ink-2); font-size:clamp(1rem,.9rem + .45vw,1.2rem);
  margin-bottom:2.2rem;
}
.hero-sub strong{ color:var(--ink); font-weight:700; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; }

.hero-meta{
  display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:3rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.hero-meta dt{ font:500 .68rem var(--f-mono); color:var(--ink-3); letter-spacing:.06em; margin-bottom:.35rem; }
.hero-meta dd{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }

.hero-watermark{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(58vw,720px); height:auto; color:var(--ink); opacity:.05; z-index:0;
  pointer-events:none;
}

/* live instrument card */
.instrument{
  position:relative; z-index:2; background:var(--paper);
  border:1px solid var(--ink); padding:1.5rem 1.5rem 1.4rem;
  box-shadow:14px 14px 0 -1px var(--paper), 14px 14px 0 0 var(--ink);
}
.inst-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:1rem; border-bottom:1px solid var(--line); font-size:.7rem;
}
.inst-status{ display:inline-flex; align-items:center; gap:.45rem; font:600 .7rem var(--f-mono); color:var(--ember); }
.inst-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); animation:blink 1.4s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

.inst-body{ padding-top:1.4rem; }
.inst-label{ font-size:.66rem; color:var(--ink-3); letter-spacing:.06em; }
.inst-value{
  display:flex; align-items:baseline; gap:.35rem; margin:.35rem 0 1.6rem;
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em;
}
.inst-value .counter{ font-size:clamp(3rem,8vw,4.2rem); line-height:.9; font-variant-numeric:tabular-nums; }
.inst-value em{ font:600 1rem var(--f-mono); font-style:normal; color:var(--ink-2); }

.inst-scale{ position:relative; }
.scale-tag{
  position:absolute; top:-1.55rem; left:41%; font:600 .58rem var(--f-mono); color:var(--ember);
  letter-spacing:.05em; opacity:0; transition:opacity .5s .9s;
}
.instrument.run .scale-tag{ opacity:1; }
.scale-track{ position:relative; height:14px; background:var(--paper-3); border:1px solid var(--line); overflow:hidden; }
.scale-flammable{
  position:absolute; top:0; bottom:0; left:41%; right:16%;
  background:repeating-linear-gradient(-45deg, var(--ember) 0 5px, transparent 5px 10px);
  opacity:.4;
}
.scale-fill{
  position:absolute; top:0; bottom:0; left:0; width:0;
  background:var(--ink); transition:width 1.8s var(--ease-out);
}
.instrument.run .scale-fill{ width:41%; }
.scale-marker{
  position:absolute; top:-4px; bottom:-4px; left:0; width:2px; background:var(--ember);
  transition:left 1.8s var(--ease-out);
}
.instrument.run .scale-marker{ left:41%; }
.scale-marker .mono{
  position:absolute; top:-1.35rem; left:50%; transform:translateX(-50%);
  font-size:.56rem; color:var(--ember); font-weight:600;
}
.scale-ticks{ display:flex; justify-content:space-between; margin-top:.55rem; font-size:.6rem; color:var(--ink-3); }
.inst-foot{
  display:flex; justify-content:space-between; margin-top:1.5rem; padding-top:1rem;
  border-top:1px solid var(--line); font-size:.62rem; color:var(--ink-3); letter-spacing:.03em;
}

/* ============================================================
   STANDARDS MARQUEE
   ============================================================ */
.standards{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper-2); display:flex; align-items:center; overflow:hidden;
}
.standards-label{
  flex:none; padding:1.1rem var(--pad); font-size:.64rem; color:var(--ink-3);
  border-right:1px solid var(--line); white-space:nowrap; letter-spacing:.08em;
}
.marquee{ overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track{ display:inline-flex; align-items:center; gap:1.5rem; padding-left:1.5rem; white-space:nowrap; animation:marquee 38s linear infinite; }
.marquee-track span{ font:600 1rem var(--f-display); letter-spacing:.02em; color:var(--ink); }
.marquee-track .sep{ color:var(--ember); font-size:.5rem; }
.standards:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.about-text .lead{ font-size:clamp(1.2rem,1rem + .9vw,1.6rem); font-weight:600; line-height:1.45; letter-spacing:-.02em; margin-bottom:1.5rem; }
.about-text p{ color:var(--ink-2); margin-bottom:1.1rem; }
.about-sign{ color:var(--ink-2); margin-bottom:0; }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--paper); padding:1.8rem 1.6rem; }
.stat dt{ font-size:.62rem; color:var(--ink-3); letter-spacing:.07em; margin-bottom:.5rem; }
.stat dd{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,6vw,3.4rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat dd em{ font-style:normal; color:var(--ember); font-size:.5em; }
.stat p{ margin-top:.7rem; font-size:.84rem; color:var(--ink-2); }

/* ============================================================
   SERVICES
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  position:relative; background:var(--paper); padding:2.2rem 1.9rem 2.4rem;
  transition:background .35s var(--ease); overflow:hidden;
}
.card::before,.card::after{
  content:""; position:absolute; width:16px; height:16px; opacity:0;
  border-color:var(--ember); transition:opacity .35s, transform .35s var(--ease-out);
}
.card::before{ top:14px; left:14px; border-top:1.5px solid; border-left:1.5px solid; transform:translate(6px,6px); }
.card::after{ bottom:14px; right:14px; border-bottom:1.5px solid; border-right:1.5px solid; transform:translate(-6px,-6px); }
.card:hover{ background:var(--paper-2); }
.card:hover::before,.card:hover::after{ opacity:1; transform:translate(0,0); }

.card-no{ font-size:.66rem; color:var(--ink-3); letter-spacing:.06em; }
.card-icon{ display:block; width:48px; height:48px; margin:1.4rem 0 1.5rem; color:var(--ink); transition:color .35s, transform .5s var(--ease-out); }
.card:hover .card-icon{ color:var(--ember); transform:translateY(-2px); }
.card h3{ font-size:1.32rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.7rem; }
.card p{ color:var(--ink-2); font-size:.95rem; }

.card-cta{ display:flex; flex-direction:column; }
.card-cta h3{ margin-top:auto; }
.card-link{
  margin-top:1.2rem; font-weight:600; color:var(--ember); display:inline-flex; gap:.4rem; align-items:center;
  width:max-content;
}
.card-link:hover .btn-arrow{ transform:translateX(4px); }

/* ============================================================
   CHAMBER (dark refrigerant)
   ============================================================ */
.chamber{
  background:var(--chamber); color:var(--c-ink); position:relative;
  border-block:1px solid var(--ink);
  --line:var(--c-line);
}
.chamber .reg{ color:var(--c-ink-2); }
.chamber .sec-title{ color:var(--c-ink); }
.chamber .sec-intro{ color:var(--c-ink-2); }
.chamber::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 78% 12%, rgba(255,77,23,.13), transparent 42%);
}
.chamber-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; position:relative; }

.risks{ display:grid; gap:0; border-top:1px solid var(--c-line); }
.risks li{
  display:grid; grid-template-columns:auto auto 1fr; gap:.5rem 1.4rem; align-items:baseline;
  padding:1.25rem 0; border-bottom:1px solid var(--c-line);
}
.risk-k{ font-size:.68rem; color:var(--ember); letter-spacing:.08em; }
.risk-ko{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.risk-d{ grid-column:2/4; color:var(--c-ink-2); font-size:.9rem; }

.ignition-viz{ margin-top:2.2rem; border:1px solid var(--c-line); padding:1.4rem; background:var(--chamber-2); }
.viz-head{ display:flex; justify-content:space-between; font-size:.64rem; color:var(--c-ink-2); margin-bottom:1.1rem; letter-spacing:.05em; }
.bars{ display:grid; gap:.7rem; }
.bar-row{ display:grid; grid-template-columns:96px 1fr 42px; align-items:center; gap:.8rem; }
.bar-l{ font-size:.66rem; color:var(--c-ink); }
.bar{ height:9px; background:rgba(236,232,223,.08); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; background:var(--c-ink-2); transition:width 1.3s var(--ease-out); }
.chamber.in .bar i{ width:var(--w); }
.bar-row.hot .bar i{ background:var(--ember); box-shadow:0 0 14px rgba(255,77,23,.6); }
.bar-row.hot .bar-l{ color:var(--ember); }
.bar-v{ font-size:.66rem; color:var(--c-ink-2); text-align:right; }
.viz-note{ margin-top:1.1rem; font-size:.62rem; color:var(--c-ink-2); letter-spacing:.02em; }

.table-panel{ border:1px solid var(--c-line); background:var(--chamber-2); }
.table-head{ display:flex; justify-content:space-between; padding:1rem 1.3rem; border-bottom:1px solid var(--c-line); font-size:.64rem; color:var(--c-ink-2); letter-spacing:.05em; }
.rtable-scroll{ overflow-x:auto; }
.rtable{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:440px; }
.rtable th,.rtable td{ padding:.85rem 1.3rem; text-align:left; border-bottom:1px solid var(--c-line); }
.rtable th{ font:500 .6rem var(--f-mono); color:var(--c-ink-2); letter-spacing:.08em; text-transform:uppercase; }
.rtable .num{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.rtable tbody tr{ transition:background .25s; }
.rtable tbody tr:hover{ background:rgba(255,77,23,.06); }
.rtable .rname{ font-family:var(--f-display); font-weight:700; }
.rtable tr:last-child td{ border-bottom:none; }
.badge{ font:600 .64rem var(--f-mono); padding:.18rem .5rem; border:1px solid currentColor; letter-spacing:.05em; }
.badge.a2l{ color:#ffb088; }
.badge.a3{ color:var(--ember); }
.badge.a2{ color:#ffcf6e; }
.table-foot{ padding:.9rem 1.3rem; font-size:.6rem; color:var(--c-ink-2); border-top:1px solid var(--c-line); letter-spacing:.02em; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line); background:var(--line); margin-top:1rem;
}
.step{ background:var(--paper); padding:2rem 1.5rem 2.4rem; position:relative; }
.step-no{
  display:block; font-family:var(--f-display); font-weight:800; font-size:2.4rem;
  color:var(--paper); -webkit-text-stroke:1px var(--ink-3); margin-bottom:1.5rem; line-height:1;
  transition:color .4s, -webkit-text-stroke-color .4s;
}
.step:hover .step-no{ color:var(--ember); -webkit-text-stroke-color:var(--ember); }
.step h3{ font-size:1.12rem; font-weight:700; margin-bottom:.55rem; letter-spacing:-.01em; }
.step p{ font-size:.86rem; color:var(--ink-2); }
.step::after{
  content:"→"; position:absolute; top:2.1rem; right:-.55rem; z-index:2;
  color:var(--ember); font-size:1rem; background:var(--paper); padding:0 .15rem;
}
.step:last-child::after{ display:none; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.capabilities{ background:var(--paper-2); border-block:1px solid var(--line); }
.cap-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.cap-head{ position:sticky; top:120px; margin-bottom:0; }
.cap-head .btn{ margin-top:2rem; }
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.pillar{ background:var(--paper); padding:2.2rem 1.8rem 2.6rem; transition:background .3s; }
.pillar:hover{ background:var(--paper-3); }
.pillar-no{ font-size:.72rem; color:var(--ember); letter-spacing:.06em; }
.pillar h3{ font-size:1.28rem; font-weight:700; margin:1.4rem 0 .7rem; letter-spacing:-.02em; }
.pillar p{ color:var(--ink-2); font-size:.92rem; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background:var(--ink); color:var(--c-ink); padding-block:clamp(4.5rem,9vw,7.5rem); position:relative; overflow:hidden; }
.cta-band::after{
  content:""; position:absolute; right:-8%; bottom:-40%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,77,23,.18), transparent 65%);
}
.cta-inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta-title{ font-family:var(--f-kr); font-weight:800; font-size:clamp(2.2rem,1rem + 4.5vw,4.6rem); line-height:1.04; letter-spacing:-.035em; margin:1.4rem 0 1rem; }
.cta-title .hl{ position:relative; }
.cta-title .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.5em; background:var(--ember); opacity:.22; z-index:-1; transform:skewX(-9deg); }
.cta-sub{ color:var(--c-ink-2); max-width:46ch; margin-bottom:2.4rem; font-size:1.08rem; }
.cta-inner .hero-cta{ justify-content:center; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.contact-info .sec-title{ margin-bottom:0; }
.contact-list{ margin-top:2.5rem; border-top:1px solid var(--line); }
.contact-list li{ display:grid; grid-template-columns:80px 1fr; gap:1rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.ci-k{ font-size:.64rem; color:var(--ink-3); letter-spacing:.06em; }
.contact-list a,.contact-list span:not(.ci-k){ font-size:1.02rem; font-weight:500; }
.contact-list a{ position:relative; width:max-content; }
.contact-list a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.contact-list a:hover::after{ transform:scaleX(1); }

.contact-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.4rem;
  background:var(--paper); border:1px solid var(--ink); padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:12px 12px 0 -1px var(--paper), 12px 12px 0 0 var(--ink);
}
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field-full{ grid-column:1/-1; }
.field label{ font:500 .72rem var(--f-mono); color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase; }
.field label i{ color:var(--ember); font-style:normal; }
.field input,.field select,.field textarea{
  font-family:var(--f-kr); font-size:.98rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); padding:.85rem .95rem;
  transition:border-color .25s, background .25s; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ember); background:var(--paper); }
.field.invalid input,.field.invalid textarea{ border-color:var(--ember-deep); background:rgba(214,56,7,.05); }

.form-foot{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:.4rem; }
.form-note{ font-size:.62rem; color:var(--ink-3); letter-spacing:.02em; max-width:34ch; }
.form-note.ok{ color:var(--ember); font-weight:600; }
.form-note.err{ color:var(--ember-deep); font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--chamber); color:var(--c-ink); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--c-line); }
.footer-logo{ height:30px; width:auto; margin-bottom:1.3rem; }
.footer-brand p{ color:var(--c-ink-2); font-size:.95rem; }
.footer-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer-nav h4{ font-size:.62rem; color:var(--c-ink-2); letter-spacing:.08em; margin-bottom:1.1rem; }
.footer-nav a{ display:block; padding:.4rem 0; color:var(--c-ink); font-size:.92rem; opacity:.8; transition:opacity .25s, color .25s; width:max-content; }
.footer-nav a:hover{ opacity:1; color:var(--ember); }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; }
.footer-bottom .mono{ font-size:.62rem; color:var(--c-ink-2); letter-spacing:.05em; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .instrument{ max-width:460px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step::after{ display:none; }
  .cap-grid{ grid-template-columns:1fr; }
  .cap-head{ position:static; }
  .chamber-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:2.5rem; }
  .hud{ display:none; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .hero-meta{ flex-wrap:wrap; gap:1.3rem 2rem; }
  .kicker{ font-size:.64rem; letter-spacing:.06em; }
  .standards-label{ display:none; }
  .form-foot .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}