/* =========================================================
   VIEWFORT — REALITY, REFRAMED.
   브랜드 가이드(명함/로고 시스템) 기반 웹 스타일시트
   ========================================================= */

/* ---------- 1. 브랜드 토큰 ---------- */
:root{
  /* Core */
  --navy:      #0E1B2A;   /* VIEWFORT NAVY — 베이스 */
  --navy-deep: #0A1420;   /* 섹션 대비용 딥 톤 */
  --navy-lift: #16273A;   /* 카드/서피스 */
  --stone:     #E8E6E1;   /* STONE — 본문 텍스트 */
  --teal:      #0B3B3C;   /* DEEP TEAL — 보조 서피스 */

  /* Division accents */
  --labs:   #22D3EE;      /* LABS   · Digital Twin */
  --studio: #F5A524;      /* STUDIO · Interactive */
  --design: #8B5CF6;      /* DESIGN · 3D Visualization */

  /* Derived */
  --muted:  #8A9BA8;
  --line:   rgba(232,230,225,.12);
  --line-2: rgba(232,230,225,.06);
  --accent: var(--labs);  /* 사업부 카드에서 국소 오버라이드 */

  /* Type */
  --en: 'Space Grotesk','Inter Tight',-apple-system,'Segoe UI',sans-serif;
  --kr: 'Pretendard','Pretendard Variable',-apple-system,'Segoe UI',sans-serif;

  /* Metrics */
  --wrap: 1200px;
  --hdr: 76px;
  --r: 4px;
  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--hdr); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--navy);
  color:var(--stone);
  font-family:var(--kr);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--labs); color:var(--navy); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.muted{ color:var(--muted); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--labs); color:var(--navy); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

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

/* ---------- 3. 스크롤 등장 애니메이션 ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.in{ opacity:1; transform:none; }

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

/* ---------- 4. 헤더 ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hdr);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.site-header.stuck{
  background:rgba(10,20,32,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:26px; height:26px; fill:var(--stone); flex:none; transition:fill .3s; }
.brand:hover .brand-mark{ fill:var(--labs); }
.brand-type{ display:flex; flex-direction:column; line-height:1; }
.brand-type b{ font-family:var(--en); font-weight:700; font-size:17px; letter-spacing:.16em; }
.brand-type i{ font-style:normal; font-size:10px; letter-spacing:.22em; color:var(--muted); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-size:14px; font-weight:500; color:rgba(232,230,225,.72); position:relative; padding:6px 0; transition:color .25s; }
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--labs); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--stone); }
.nav a:hover::after{ width:100%; }

.nav .nav-cta{
  border:1px solid var(--line); border-radius:var(--r);
  padding:9px 20px; color:var(--stone); font-weight:600;
  transition:border-color .25s, background .25s, color .25s;
}
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--labs); border-color:var(--labs); color:var(--navy); }

.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav-toggle span{ display:block; height:2px; width:22px; margin-inline:auto; background:var(--stone); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- 5. 히어로 ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr) + 60px) 0 0;
  overflow:hidden;
  background:var(--navy);
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }

/* 원근 그리드 바닥 — Digital Twin 모티프 */
.grid-floor{
  position:absolute; left:-50%; right:-50%; bottom:-10%; height:70%;
  background-image:
    linear-gradient(rgba(34,211,238,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.16) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(560px) rotateX(74deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 78%);
  animation:floor 14s linear infinite;
}
@keyframes floor{ to{ background-position:0 64px, 0 0; } }

.glow{
  position:absolute; left:50%; top:38%; width:min(1100px,120vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(34,211,238,.13) 0%, rgba(34,211,238,.04) 38%, transparent 66%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.75} 50%{opacity:1} }

.skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46%; }
.skyline path{ fill:none; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.sky-far path{ stroke:rgba(34,211,238,.16); }
.sky-near path{ stroke:rgba(34,211,238,.30); }
.sky-nodes circle{ fill:var(--labs); opacity:.85; animation:blink 3.2s ease-in-out infinite; }
.sky-nodes circle:nth-child(2){ animation-delay:.6s; }
.sky-nodes circle:nth-child(3){ animation-delay:1.2s; }
.sky-nodes circle:nth-child(4){ animation-delay:1.8s; }
.sky-nodes circle:nth-child(5){ animation-delay:2.4s; }
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:1} }

.scanline{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{ 0%{ top:12%; opacity:0 } 12%{opacity:1} 88%{opacity:1} 100%{ top:96%; opacity:0 } }

.hero-inner{ position:relative; z-index:2; text-align:center; padding-bottom:80px; }

.hero-eyebrow{
  font-family:var(--en); font-size:clamp(10px,1.1vw,12px); font-weight:500;
  letter-spacing:.34em; color:var(--muted);
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px;
}
.hero-eyebrow em{ font-style:normal; color:rgba(232,230,225,.22); }

.hero-lockup{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,34px); margin-top:34px; }
.hero-mark{ width:clamp(44px,6vw,76px); height:auto; fill:var(--stone); flex:none; }
.hero-mark .crn{ animation:buildUp .7s var(--ease) backwards; }
.hero-mark .c1{ animation-delay:.15s } .hero-mark .c2{ animation-delay:.28s } .hero-mark .c3{ animation-delay:.41s }
.hero-mark .frm{ animation:frameIn .8s var(--ease) .5s backwards; }
@keyframes buildUp{ from{ opacity:0; transform:translateY(-14px) } }
@keyframes frameIn{ from{ opacity:0; transform:scale(.86) } }

.hero-word{
  font-family:var(--en); font-weight:700;
  font-size:clamp(38px,8.4vw,110px); line-height:.95;
  letter-spacing:.1em; margin-left:.1em;
  animation:revealWord 1s var(--ease) .8s backwards;
}
@keyframes revealWord{ from{ opacity:0; letter-spacing:.3em } }

.hero-tagline{
  margin-top:22px;
  font-family:var(--en); font-weight:500;
  font-size:clamp(13px,1.9vw,22px); letter-spacing:.3em;
  color:var(--studio);
}

.hero-lede{
  margin:30px auto 0; max-width:640px;
  font-size:clamp(14px,1.5vw,17px); line-height:1.85;
  color:rgba(232,230,225,.68);
}
.hero-lede strong{ color:var(--stone); font-weight:600; }

.hero-cta{ margin-top:42px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px; border-radius:var(--r);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-primary{ background:var(--labs); color:var(--navy); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(34,211,238,.6); }
.btn-ghost{ border-color:var(--line); color:var(--stone); }
.btn-ghost:hover{ border-color:var(--stone); transform:translateY(-2px); }

/* 하단 무한 키워드 스트립 */
.hero-strip{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track{
  display:flex; align-items:center; gap:28px; width:max-content;
  animation:marquee 42s linear infinite;
}
.strip-track span{
  font-family:var(--en); font-size:12px; font-weight:500;
  letter-spacing:.24em; color:rgba(232,230,225,.34); white-space:nowrap;
}
.strip-track i{ width:4px; height:4px; background:var(--labs); opacity:.5; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- 6. 섹션 공통 ---------- */
.section{ padding:clamp(84px,11vw,150px) 0; position:relative; }
.section-alt{ background:var(--navy-deep); border-block:1px solid var(--line-2); }

.sec-head{ max-width:720px; margin-bottom:clamp(48px,6vw,76px); }
.sec-tag{
  font-family:var(--en); font-size:11px; font-weight:700;
  letter-spacing:.32em; color:var(--labs); margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
}
.sec-tag::after{ content:''; height:1px; flex:1; max-width:64px; background:currentColor; opacity:.4; }

.sec-title{
  font-size:clamp(28px,4.2vw,48px); font-weight:700;
  line-height:1.25; letter-spacing:-.03em;
}
.sec-title .kr{ font-size:.5em; letter-spacing:.3em; color:var(--muted); font-weight:500; }
.sec-lede{ margin-top:22px; font-size:clamp(14px,1.4vw,16.5px); color:rgba(232,230,225,.62); line-height:1.85; }
.sec-lede b{ color:var(--stone); font-weight:600; }
.sec-lede + .sec-lede{ margin-top:14px; }

/* ---------- 7. 사업부 카드 ---------- */
.div-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.div-card{
  --accent:var(--labs);
  position:relative; isolation:isolate;
  background:var(--navy-lift);
  border:1px solid var(--line);
  border-radius:10px;
  padding:38px 32px 34px;
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.div-card[data-unit="labs"]  { --accent:var(--labs); }
.div-card[data-unit="studio"]{ --accent:var(--studio); }
.div-card[data-unit="design"]{ --accent:var(--design); }

.div-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
  transition:opacity .45s var(--ease);
}
.div-card:hover{ transform:translateY(-8px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.div-card:hover::before{ opacity:1; }

/* 명함 하단 컬러 바 재현 */
.div-bar{ position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--accent); }

.div-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:30px; }
.div-mark{ width:40px; height:40px; fill:var(--accent); transition:transform .45s var(--ease); }
.div-card:hover .div-mark{ transform:translateY(-3px); }
.div-num{ font-family:var(--en); font-size:12px; font-weight:700; letter-spacing:.2em; color:rgba(232,230,225,.24); }

.div-name{ font-family:var(--en); font-size:clamp(19px,2.1vw,25px); font-weight:700; letter-spacing:.1em; line-height:1.3; }
.div-name span{ color:var(--accent); }
.div-role{ margin-top:8px; font-family:var(--en); font-size:11px; font-weight:500; letter-spacing:.26em; color:var(--muted); }
.div-desc{ margin-top:22px; font-size:14.5px; line-height:1.85; color:rgba(232,230,225,.62); }

.div-tags{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
.div-tags li{ position:relative; padding-left:18px; font-size:13.5px; color:rgba(232,230,225,.78); }
.div-tags li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--accent);
}

/* ---------- 8. 서비스 그리드 ---------- */
.svc-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.svc{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:36px 30px 40px; position:relative;
  transition:background .35s var(--ease);
}
.svc::after{
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:var(--labs); transition:width .45s var(--ease);
}
.svc:hover{ background:rgba(34,211,238,.045); }
.svc:hover::after{ width:100%; }

.svc-no{ font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--labs); opacity:.65; }
.svc h3{ margin-top:18px; font-size:17.5px; font-weight:600; letter-spacing:-.02em; line-height:1.45; }
.svc p{ margin-top:14px; font-size:13.5px; line-height:1.8; color:rgba(232,230,225,.55); }

/* 부가 수행 영역 — 주력 4개 아래에 한 줄로 낮게 깔린다 */
.svc-more{
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:26px; flex-wrap:wrap;
}
.more-label{
  font-family:var(--en); font-size:11px; font-weight:700;
  letter-spacing:.2em; color:var(--muted); white-space:nowrap;
  font-family:var(--kr); letter-spacing:.02em;
}
.more-list{ display:flex; gap:10px 26px; flex-wrap:wrap; }
.more-list li{
  position:relative; padding-left:15px;
  font-size:14px; color:rgba(232,230,225,.6);
}
.more-list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:4px; height:4px; background:var(--labs); opacity:.55;
}

/* ---------- 9. 프로세스 ---------- */
.proc{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); }
.proc li{ padding:34px 26px 34px 0; position:relative; }
.proc li::before{
  content:''; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:linear-gradient(90deg, var(--labs), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.proc li.in::before{ transform:scaleX(1); }
.proc-no{
  display:block; font-family:var(--en); font-size:clamp(30px,3.6vw,44px);
  font-weight:700; letter-spacing:.02em; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(232,230,225,.28);
  transition:-webkit-text-stroke-color .35s, color .35s;
}
.proc li:hover .proc-no{ -webkit-text-stroke-color:var(--labs); }
.proc h3{ margin-top:22px; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.proc p{ margin-top:12px; font-size:13.5px; line-height:1.8; color:rgba(232,230,225,.52); }

/* ---------- 10. 회사 정보 ---------- */
.company-wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,90px); align-items:start; }
.company-lead .sec-title{ margin-bottom:0; }

.company-table dl{ border-top:1px solid var(--line); }
.company-table .row{
  display:grid; grid-template-columns:130px 1fr; gap:20px;
  padding:18px 4px; border-bottom:1px solid var(--line-2);
}
.company-table dt{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.02em; padding-top:2px; }
.company-table dd{ margin:0; font-size:14.5px; line-height:1.8; }
.company-table dd a{ color:var(--labs); border-bottom:1px solid transparent; transition:border-color .25s; }
.company-table dd a:hover{ border-bottom-color:var(--labs); }
.sub-biz{ display:flex; flex-direction:column; gap:7px; }
.sub-biz li{ position:relative; padding-left:15px; font-size:14px; color:rgba(232,230,225,.72); }
.sub-biz li::before{ content:''; position:absolute; left:0; top:.68em; width:4px; height:4px; background:var(--muted); }

/* ---------- 11. 문의 ---------- */
.contact-wrap{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }

.form{ display:flex; flex-direction:column; gap:22px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field > span{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); }
.field > span i{ font-style:normal; color:var(--studio); }

.field input, .field select, .field textarea{
  background:var(--navy-lift);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 16px;
  font-size:14.5px; font-family:var(--kr);
  transition:border-color .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:140px; line-height:1.75; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A9BA8' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px; padding-right:42px;
}
.field select option{ background:var(--navy-lift); color:var(--stone); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(232,230,225,.26); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--labs); background:rgba(34,211,238,.05);
}
.field.invalid input, .field.invalid textarea{ border-color:#F5A524; }

.form-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px; }
.form-note{ font-size:12.5px; color:var(--muted); line-height:1.6; }
.form-note.err{ color:var(--studio); }
.form-note.ok{ color:var(--labs); }

.contact-side{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); }
.side-block{ padding:22px 0; border-bottom:1px solid var(--line-2); }
.side-label{ font-family:var(--en); font-size:10.5px; font-weight:700; letter-spacing:.28em; color:var(--muted); }
.side-big{ display:inline-block; margin-top:10px; font-size:clamp(15px,1.6vw,18px); font-weight:600; letter-spacing:-.01em; border-bottom:1px solid transparent; transition:color .25s, border-color .25s; }
.side-big:hover{ color:var(--labs); border-bottom-color:var(--labs); }
.side-txt{ margin-top:10px; font-size:14.5px; line-height:1.75; color:rgba(232,230,225,.72); }

/* ---------- 12. 푸터 ---------- */
.site-footer{ background:var(--navy-deep); border-top:1px solid var(--line); padding:70px 0 44px; }
.foot-top{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot-brand .brand-mark{ width:30px; height:30px; }
.foot-brand .brand-type i{ letter-spacing:.2em; font-family:var(--en); font-size:9.5px; }
.foot-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.foot-nav a{ font-size:13.5px; color:rgba(232,230,225,.6); transition:color .25s; }
.foot-nav a:hover{ color:var(--labs); }

.foot-units{ display:flex; gap:0; margin:44px 0 34px; border-radius:var(--r); overflow:hidden; }
.foot-units span{
  flex:1; padding:13px 18px; text-align:center;
  font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.18em;
  color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.foot-units span[data-unit="labs"]  { background:var(--labs); }
.foot-units span[data-unit="studio"]{ background:var(--studio); }
.foot-units span[data-unit="design"]{ background:var(--design); color:#fff; }

.foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line-2); }
.foot-bottom p{ font-size:12.5px; color:rgba(232,230,225,.42); }
.foot-bottom .copy{ font-family:var(--en); letter-spacing:.04em; }

/* ---------- 13. 반응형 ---------- */
@media (max-width:1080px){
  .div-grid{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .proc{ grid-template-columns:repeat(2,1fr); gap:0 34px; }
  .company-wrap, .contact-wrap{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --hdr:64px; }
  .wrap{ padding-inline:20px; }

  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:var(--hdr) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,20,32,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:8px 20px 24px;
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line-2); font-size:15px; }
  .nav a::after{ display:none; }
  .nav .nav-cta{ margin-top:18px; text-align:center; border-color:var(--labs); background:var(--labs); color:var(--navy); }

  .hero{ min-height:auto; padding-top:calc(var(--hdr) + 70px); }
  .hero-inner{ padding-bottom:64px; }
  .hero-lockup{ flex-direction:column; gap:20px; }
  .hero-word{ margin-left:0; letter-spacing:.14em; }
  .hero-eyebrow{ gap:10px; }

  .svc-grid{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:1fr; }
  .proc li{ padding:26px 0; }
  .f-row{ grid-template-columns:1fr; }

  .company-table .row{ grid-template-columns:1fr; gap:6px; }
  .foot-units{ flex-direction:column; }
  .foot-top{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:520px){
  .btn{ width:100%; }
  .hero-cta{ flex-direction:column; }
  .foot-nav{ gap:18px; }
}