* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FFFFFF; color: #1B2C35; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
a { color: #2B7A99; text-decoration: none; }
a:hover { color: #1F5F7A; }
h1, h2, h3 { font-family: 'Archivo', sans-serif; }

@keyframes heroDrift { 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-4%,3%,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes heroDrift2 { 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(5%,-4%,0) scale(1.08)} 100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes gridSlide { from{background-position:0 0} to{background-position:80px 80px} }
@keyframes lineDraw { from{stroke-dashoffset:2400} to{stroke-dashoffset:0} }
@keyframes riseIn { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }

.hero { position: relative; overflow: hidden; background: #12293B; color: #F2F4F2; }
.hero-bg { position: absolute; inset: -10%; pointer-events: none; }
.hero-bg1 { background: radial-gradient(620px 420px at 15% 20%, rgba(109,181,206,0.18), transparent 70%), radial-gradient(700px 500px at 85% 85%, rgba(109,181,206,0.08), transparent 70%); animation: heroDrift 14s ease-in-out infinite; }
.hero-bg2 { background: radial-gradient(520px 380px at 75% 15%, rgba(240,242,240,0.06), transparent 70%); animation: heroDrift2 18s ease-in-out infinite; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; animation: gridSlide 30s linear infinite; }
.hero-line { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58%; pointer-events: none; opacity: 0.55; }
.line-draw { animation: lineDraw 4s ease-out forwards; }
.hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 96px 40px 110px; display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.hero-copy { flex: 1 1 520px; min-width: 320px; }
.rise { animation: riseIn 0.7s ease-out both; }
.rise-delay { animation-delay: 0.15s; }
.hero-eyebrow { font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: 0.02em; color: #6DB5CE; margin-bottom: 22px; }
.hero h1 { font-weight: 700; font-size: clamp(48px, 6vw, 84px); line-height: 1.02; letter-spacing: -2.5px; margin: 0 0 24px; color: #FFFFFF; }
.hero-sub { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.35; letter-spacing: -0.4px; margin: 0 0 32px; color: #B7C4CC; max-width: 590px; }
.growth { color: #D89598; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-light { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: #12293B; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 4px; }
.btn-light:hover { background: #E4EBEF; color: #12293B; }
.hero-email { font-size: 15px; font-weight: 600; color: #E4EBEF; border-bottom: 1px solid #3C5568; }
.hero-email:hover { color: #FFFFFF; border-bottom-color: #6DB5CE; }
.hero-tel { font-size: 15px; color: #8A97A0; }
.hero-tel:hover { color: #E4EBEF; }
.hero-loc { font-size: 14px; color: #8A97A0; }
.hero-photo { flex: 0 0 auto; position: relative; width: 280px; height: 280px; }
.hero-photo img { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; display: block; }
.ring { position: absolute; border-radius: 50%; }
.ring1 { inset: -10px; border: 2px solid rgba(109,181,206,0.5); }
.ring2 { inset: -22px; border: 1px solid rgba(255,255,255,0.10); }

.stats { border-bottom: 1px solid #E3E8EA; }
.stats-inner { max-width: 1280px; margin: 0 auto; padding: 52px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.stat { border-left: 1px solid #E3E8EA; padding-left: 24px; }
.stat-value { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 44px; letter-spacing: -2px; line-height: 1; color: #2B7A99; }
.stat-label { font-size: 14px; color: #5C6B72; margin-top: 10px; line-height: 1.45; }

.kicker { font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #2B7A99; margin-bottom: 18px; }
.tl-intro { max-width: 1060px; margin: 0 auto; padding: 96px 40px 32px; }
.tl-intro h2 { font-weight: 700; font-size: clamp(32px, 4vw, 52px); letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 14px; }
.tl-intro p { font-size: 18px; line-height: 1.6; color: #5C6B72; max-width: 640px; margin: 0; }

.chapter-band { background: #12293B; margin-top: 40px; }
.chapter-band-inner { max-width: 1280px; margin: 0 auto; padding: 46px 40px; display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.chapter-band .ch-kicker { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: #6DB5CE; }
.chapter-band h3 { font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -1.2px; margin: 0; color: #FFFFFF; flex-basis: 100%; }
.chapter-band .ch-years { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 19px; color: #8A97A0; }
.chapter-band .ch-arc { font-size: 16px; color: #B7C4CC; }

.chapter { max-width: 1280px; margin: 0 auto; padding: 56px 40px 72px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 88px; align-items: start; }
.ch-side { position: sticky; top: 72px; padding: 24px 0; }
.ch-side .ch-company { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -0.6px; line-height: 1.2; color: #6A1316; }
.ch-side .ch-rule { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 18px; color: #8A97A0; padding-bottom: 16px; margin: 6px 0 26px; border-bottom: 2px solid #1B2C35; }
.ch-side .ch-counter { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 76px; letter-spacing: -3px; line-height: 1; color: #2B7A99; font-variant-numeric: tabular-nums; }
.ch-side .ch-revlabel { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #8A97A0; margin-top: 10px; }
.ch-side .ch-role { margin-top: 24px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 19px; color: #1B2C35; }
.ch-entries { display: flex; flex-direction: column; }
.entry { position: relative; border-left: 2px solid #E3E8EA; padding: 64px 0 64px 52px; min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
.entry-dot { position: absolute; left: -9px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 4px solid #C6CFD4; }
.entry-year { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -0.8px; color: #6A1316; margin-bottom: 12px; }
.entry-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.entry-role { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 27px; letter-spacing: -0.6px; }
.entry-rev { font-size: 15px; font-weight: 600; color: #2B7A99; background: rgba(43,122,153,0.09); border: 1px solid rgba(43,122,153,0.22); padding: 6px 15px; border-radius: 100px; white-space: nowrap; }
.entry p { font-size: 17.5px; line-height: 1.65; color: #5C6B72; margin: 0; max-width: 620px; }
.tl-footnote { max-width: 1280px; margin: 0 auto; padding: 0 40px 80px; }
.tl-footnote p { font-size: 12.5px; color: #8A97A0; line-height: 1.5; margin: 0; max-width: 560px; }

@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; gap: 24px; }
  .ch-side { position: static; }
  .entry { min-height: 0; }
}

.quote { background: #F0F3F5; border-top: 1px solid #E3E8EA; border-bottom: 1px solid #E3E8EA; }
.quote-inner { max-width: 880px; margin: 0 auto; padding: 88px 40px; text-align: center; }
.quote-mark { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 52px; line-height: 0.5; color: #6A1316; }
.quote p { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; letter-spacing: -0.6px; margin: 24px 0 0; color: #1B2C35; }

.caps-inner, .hl-inner { max-width: 1280px; margin: 0 auto; padding: 96px 40px; }
.caps h2, .highlights h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -1.2px; margin: 0 0 48px; }
.caps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.cap-card { border: 1px solid #E3E8EA; border-radius: 8px; padding: 28px; }
.cap-title { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.3px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid #2B7A99; }
.cap-items { display: flex; flex-direction: column; gap: 9px; }
.cap-items div { font-size: 14.5px; color: #44525A; line-height: 1.4; }

.highlights { border-top: 1px solid #E3E8EA; }
.hl-inner { padding: 88px 40px; }
.highlights h2 { margin-bottom: 44px; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); border-top: 1px solid #E3E8EA; }
.hl-item { display: flex; gap: 16px; align-items: baseline; padding: 22px 28px 22px 0; border-bottom: 1px solid #E3E8EA; }
.hl-num { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 16px; color: #6A1316; flex: 0 0 30px; }
.hl-text { font-size: 15.5px; line-height: 1.55; color: #1B2C35; }

.contact { background: #12293B; color: #F2F4F2; }
.contact-inner { max-width: 1280px; margin: 0 auto; padding: 96px 40px 72px; text-align: center; }
.contact h2 { font-weight: 700; font-size: clamp(34px, 4.5vw, 60px); letter-spacing: -1.8px; margin: 0 0 18px; color: #FFFFFF; }
.contact p { font-size: 17px; line-height: 1.6; color: #8A97A0; max-width: 520px; margin: 0 auto 36px; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn-accent { display: inline-flex; align-items: center; gap: 8px; background: #6DB5CE; color: #12293B; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 4px; }
.btn-accent:hover { background: #8CC7DB; color: #12293B; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3C5568; color: #F2F4F2; font-weight: 600; font-size: 15px; padding: 13px 28px; border-radius: 4px; }
.btn-outline:hover { border-color: #6DB5CE; color: #FFFFFF; }
.contact-foot { margin-top: 64px; padding-top: 28px; border-top: 1px solid #22394C; font-size: 13px; color: #5C6B72; }