/* ============================================================ EL:link — corporate site design system Deep navy + cyan/teal "blue ocean" palette ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root{ /* palette */ --navy-900:#07172c; --navy-850:#091d36; --navy-800:#0b1f3a; --navy-700:#102b4d; --navy-600:#173a66; --cyan:#06b6d4; --cyan-1:#22c9e4; --teal:#14b8a6; --accent-grad:linear-gradient(120deg,#06b6d4 0%,#14b8a6 100%); --accent-grad-soft:linear-gradient(120deg,rgba(6,182,212,.14),rgba(20,184,166,.14)); --ink:#0b1f3a; --ink-2:#33425a; --muted:#64748b; --muted-2:#94a3b8; --line:#e6ecf3; --line-2:#d6dfea; --bg:#ffffff; --bg-soft:#f4f8fc; --bg-soft-2:#eef4fa; /* type */ --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --display:"Space Grotesk",var(--sans); --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px; --shadow-sm:0 1px 2px rgba(11,31,58,.05),0 2px 8px rgba(11,31,58,.04); --shadow:0 8px 30px rgba(11,31,58,.08); --shadow-lg:0 24px 60px rgba(11,31,58,.14); --shadow-cyan:0 18px 44px rgba(6,182,212,.28); --container:1180px; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.65; font-size:17px; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.025em;font-weight:700;} p{margin:0;} a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;cursor:pointer;} /* lang visibility — toggled by [data-lang] on */ html[data-lang="ko"] .en-only{display:none !important;} html[data-lang="en"] .ko-only{display:none !important;} .container{max-width:var(--container);margin:0 auto;padding:0 28px;} /* ---------- eyebrow / labels ---------- */ .eyebrow{ font-family:var(--display); font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--cyan); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-grad);border-radius:2px;} .eyebrow.center{justify-content:center;} .eyebrow.light{color:var(--cyan-1);} .section{padding:120px 0;} .section-head{max-width:720px;} .section-head.center{margin:0 auto;text-align:center;} .section-head h2{ font-size:clamp(30px,4vw,46px);margin-top:18px;color:var(--ink); } .section-head .lead{margin-top:20px;font-size:18px;color:var(--muted);line-height:1.7;} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; padding:15px 28px;border-radius:var(--r-sm); font-weight:600;font-size:15.5px;letter-spacing:0; border:1px solid transparent;transition:.3s var(--ease); white-space:nowrap; } .btn .arw{transition:transform .3s var(--ease);} .btn:hover .arw{transform:translateX(4px);} .btn-primary{background:var(--accent-grad);color:#fff;box-shadow:var(--shadow-cyan);} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(6,182,212,.4);} .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);} .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);} .btn-dark{background:var(--navy-800);color:#fff;} .btn-dark:hover{background:var(--navy-700);transform:translateY(-2px);} .btn-line{background:#fff;color:var(--ink);border-color:var(--line-2);} .btn-line:hover{border-color:var(--cyan);color:var(--cyan);} /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:.4s var(--ease); } .site-header .bar{ display:flex;align-items:center;justify-content:space-between; height:84px;transition:.4s var(--ease); } .brand{display:flex;align-items:center;gap:0;z-index:2;} .brand img{height:30px;width:auto;transition:.3s var(--ease);} .nav{display:flex;align-items:center;gap:6px;} .nav a{ position:relative;padding:10px 18px;font-size:15.5px;font-weight:500; color:rgba(255,255,255,.82);transition:.25s;border-radius:8px; } .nav a::after{ content:"";position:absolute;left:18px;right:18px;bottom:4px;height:2px; background:var(--accent-grad);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav a:hover{color:#fff;} .nav a:hover::after,.nav a.active::after{transform:scaleX(1);} .nav a.active{color:#fff;} .header-right{display:flex;align-items:center;gap:18px;} .lang-toggle{ display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.26); border-radius:999px;overflow:hidden;font-family:var(--display); } .lang-toggle button{ background:transparent;border:none;color:rgba(255,255,255,.6); padding:6px 13px;font-size:12.5px;font-weight:600;letter-spacing:.04em;transition:.25s; } .lang-toggle button.on{background:var(--accent-grad);color:#fff;} /* scrolled state -> solid white header with dark text */ .site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line),0 6px 24px rgba(11,31,58,.06);} .site-header.scrolled .bar{height:70px;} .site-header.scrolled .nav a{color:var(--ink-2);} .site-header.scrolled .nav a:hover,.site-header.scrolled .nav a.active{color:var(--ink);} .site-header.scrolled .lang-toggle{border-color:var(--line-2);} .site-header.scrolled .lang-toggle button{color:var(--muted);} .site-header.scrolled .lang-toggle button.on{color:#fff;} .site-header.scrolled .brand .logo-light{display:none;} .site-header.scrolled .brand .logo-dark{display:block;} .brand .logo-dark{display:none;} .site-header.scrolled .btn-cta-head{background:var(--accent-grad);color:#fff;border-color:transparent;} .btn-cta-head{ padding:10px 20px;border-radius:8px;font-size:14.5px;font-weight:600; border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06); transition:.3s var(--ease);white-space:nowrap; } .btn-cta-head:hover{background:rgba(255,255,255,.16);} .menu-btn{display:none;background:none;border:none;width:42px;height:42px;flex-direction:column;gap:5px;justify-content:center;align-items:center;} .menu-btn span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s;} .site-header.scrolled .menu-btn span{background:var(--ink);} /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:200;visibility:hidden;} .drawer .scrim{position:absolute;inset:0;background:rgba(7,23,44,.5);opacity:0;transition:.3s;} .drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(82vw,360px);background:var(--navy-800);transform:translateX(100%);transition:.4s var(--ease);padding:28px 26px;display:flex;flex-direction:column;} .drawer.open{visibility:visible;} .drawer.open .scrim{opacity:1;} .drawer.open .panel{transform:translateX(0);} .drawer .panel a{color:rgba(255,255,255,.85);font-size:20px;font-weight:600;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);} .drawer .panel a:hover{color:var(--cyan-1);} .drawer .d-close{align-self:flex-end;background:none;border:none;color:#fff;font-size:30px;line-height:1;margin-bottom:10px;} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--navy-900);} .hero-bg{position:absolute;inset:0;z-index:0;} .hero-slides{position:absolute;inset:0;overflow:hidden;} .hero-slide{position:absolute;inset:-10px;background:center/cover no-repeat;filter:blur(3px);opacity:0;transition:opacity 1.4s ease-in-out;will-change:opacity;} .hero-slide.is-active{opacity:.92;z-index:1;} .hero-bg .grad{position:absolute;inset:0;z-index:1;background: radial-gradient(120% 90% at 80% 0%,rgba(6,182,212,.26),transparent 55%), radial-gradient(90% 80% at 0% 100%,rgba(20,184,166,.18),transparent 60%), linear-gradient(160deg,rgba(7,23,44,.88) 0%,rgba(11,31,58,.84) 45%,rgba(12,39,72,.86) 100%);} .hero-bg canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;} .hero-grid{position:absolute;inset:0;z-index:2;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 75%);} .hero .container{position:relative;z-index:2;width:100%;} .hero-inner{max-width:880px;padding:120px 0 90px;} .hero h1{ font-size:clamp(40px,6.6vw,84px);line-height:1.04;font-weight:800;letter-spacing:-.035em;margin-top:26px; } .hero h1 .grad-text{background:linear-gradient(100deg,#22c9e4,#5be7d0);-webkit-background-clip:text;background-clip:text;color:transparent;} .hero .sub{margin-top:28px;font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.78);max-width:620px;line-height:1.7;} .hero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;} .hero-stats{margin-top:70px;display:flex;gap:54px;flex-wrap:wrap;} .hero-stats .st .n{font-family:var(--display);font-size:40px;font-weight:700;color:#fff;line-height:1;} .hero-stats .st .n span{color:var(--cyan-1);} .hero-stats .st .l{margin-top:8px;font-size:14px;color:rgba(255,255,255,.6);} .scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.55);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;font-family:var(--display);} .scroll-cue .mouse{width:24px;height:38px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;position:relative;} .scroll-cue .mouse::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--cyan-1);animation:scrollDot 1.8s var(--ease) infinite;} @keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}80%{opacity:0;transform:translate(-50%,12px);}100%{opacity:0;}} /* ---------- marquee trust strip ---------- */ .trust{background:var(--navy-850);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:26px 0;overflow:hidden;} .trust .track{display:flex;gap:64px;align-items:center;width:max-content;animation:marquee 26s linear infinite;} .trust .track span{color:rgba(255,255,255,.45);font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:64px;} .trust .track span::after{content:"●";color:var(--cyan);font-size:7px;} @keyframes marquee{to{transform:translateX(-50%);}} /* ============================================================ GENERIC PAGE HERO (inner pages) ============================================================ */ .page-hero{position:relative;background:var(--navy-900);color:#fff;padding:170px 0 90px;overflow:hidden;} .page-hero .grad{position:absolute;inset:0;background: radial-gradient(100% 120% at 85% -10%,rgba(6,182,212,.28),transparent 55%), linear-gradient(160deg,#07172c,#0b2244);} .page-hero .hero-grid{opacity:.4;} .page-hero .container{position:relative;z-index:2;} .page-hero h1{font-size:clamp(34px,5vw,60px);font-weight:800;margin-top:20px;} .page-hero .lead{margin-top:22px;font-size:19px;color:rgba(255,255,255,.74);max-width:640px;} .crumbs{font-family:var(--display);font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.06em;margin-bottom:8px;} .crumbs b{color:var(--cyan-1);font-weight:600;} /* ============================================================ CARDS / GRIDS ============================================================ */ .bg-soft{background:var(--bg-soft);} .grid{display:grid;gap:26px;} .g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:38px 34px;transition:.4s var(--ease);position:relative;overflow:hidden; } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;} .card .ic{ width:58px;height:58px;border-radius:15px;display:grid;place-items:center;margin-bottom:24px; background:var(--accent-grad-soft);color:var(--cyan);position:relative; } .card .ic svg{width:28px;height:28px;} .card h3{font-size:22px;margin-bottom:12px;} .card p{color:var(--muted);font-size:16px;line-height:1.7;} .card .num{position:absolute;top:24px;right:30px;font-family:var(--display);font-size:15px;font-weight:600;color:var(--line-2);} .card-link{margin-top:22px;display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-weight:600;font-size:15px;} .card-link .arw{transition:transform .3s var(--ease);} .card:hover .card-link .arw{transform:translateX(4px);} /* feature split rows */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .split.rev .visual{order:2;} .split .visual{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:380px;background:var(--navy-800);} /* ============================================================ WHY / VISION custom ============================================================ */ .why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 40px;position:relative;overflow:hidden;transition:.4s var(--ease);} .why-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-grad);transform:scaleY(0);transform-origin:top;transition:.45s var(--ease);} .why-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);} .why-card:hover::before{transform:scaleY(1);} .why-card .tag{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;} .why-card h3{font-size:25px;margin:14px 0 16px;} .why-card p{color:var(--muted);} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;} .chip{font-size:13.5px;padding:8px 15px;border-radius:999px;background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--line);font-weight:500;transition:.25s;} .why-card:hover .chip{border-color:var(--line-2);} .vision-band{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;} .vision-band .grad{position:absolute;inset:0;background:radial-gradient(80% 120% at 100% 0%,rgba(6,182,212,.22),transparent 55%),radial-gradient(70% 90% at 0% 100%,rgba(20,184,166,.16),transparent 60%);} .vision-band .container{position:relative;z-index:2;} .vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);} .vision-cell{padding:46px 40px;border-right:1px solid rgba(255,255,255,.1);transition:.4s var(--ease);position:relative;} .vision-cell:last-child{border-right:none;} .vision-cell:hover{background:rgba(6,182,212,.07);} .vision-cell .vn{font-family:var(--display);font-size:14px;color:var(--cyan-1);font-weight:600;letter-spacing:.1em;} .vision-cell h3{font-size:23px;margin:18px 0 14px;color:#fff;} .vision-cell p{color:rgba(255,255,255,.66);font-size:15.5px;line-height:1.7;} .vision-cell .vic{width:50px;height:50px;border-radius:13px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:var(--cyan-1);margin-bottom:26px;} .vision-cell .vic svg{width:26px;height:26px;} /* ============================================================ CTA band ============================================================ */ .cta-band{position:relative;overflow:hidden;background:var(--accent-grad);color:#fff;} .cta-band .container{position:relative;z-index:2;padding:84px 28px;text-align:center;} .cta-band h2{font-size:clamp(30px,4.4vw,48px);font-weight:800;} .cta-band p{margin:20px auto 0;max-width:560px;font-size:18px;color:rgba(255,255,255,.9);} .cta-band .hero-cta{justify-content:center;margin-top:38px;} .cta-band .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--navy-900);color:rgba(255,255,255,.62);padding:78px 0 36px;} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.09);} .site-footer .brand img{height:30px;margin-bottom:20px;} .foot-about{font-size:15px;line-height:1.7;max-width:300px;} .foot-col h4{color:#fff;font-size:14px;letter-spacing:.04em;margin-bottom:18px;font-family:var(--display);font-weight:600;text-transform:uppercase;} .foot-col a,.foot-col p{display:block;font-size:15px;color:rgba(255,255,255,.6);padding:6px 0;transition:.25s;} .foot-col a:hover{color:var(--cyan-1);} .foot-contact .row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;padding:7px 0;color:rgba(255,255,255,.7);} .foot-contact .row svg{width:17px;height:17px;color:var(--cyan-1);flex:0 0 auto;margin-top:3px;} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:13.5px;color:rgba(255,255,255,.42);flex-wrap:wrap;gap:12px;} .foot-bottom .biz{line-height:1.7;} /* ============================================================ CONTACT page ============================================================ */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:start;} .info-card{background:var(--navy-900);color:#fff;border-radius:var(--r-lg);padding:46px 42px;position:relative;overflow:hidden;} .info-card .grad{position:absolute;inset:0;background:radial-gradient(80% 90% at 100% 0%,rgba(6,182,212,.25),transparent 55%);} .info-card>*{position:relative;z-index:2;} .info-row{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1);} .info-row:last-child{border-bottom:none;} .info-row .ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--cyan-1);flex:0 0 auto;} .info-row .ic svg{width:22px;height:22px;} .info-row .lab{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-1);font-family:var(--display);font-weight:600;} .info-row .val{font-size:18px;color:#fff;margin-top:4px;font-weight:500;} .info-row .val.sm{font-size:16px;font-weight:400;color:rgba(255,255,255,.82);line-height:1.6;} .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 40px;box-shadow:var(--shadow-sm);} .field{margin-bottom:22px;} .field label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:9px;} .field label .req{color:var(--cyan);} .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm); font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--bg-soft);transition:.25s; } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px rgba(6,182,212,.12);} .field textarea{resize:vertical;min-height:130px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .form-note{font-size:13px;color:var(--muted);margin-top:6px;} .form-msg{margin-top:16px;padding:14px 18px;border-radius:var(--r-sm);background:var(--accent-grad-soft);color:var(--teal);font-weight:600;font-size:15px;display:none;} .form-msg.show{display:block;} .map-wrap{margin-top:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:300px;background:var(--bg-soft-2);position:relative;} /* ============================================================ HISTORY timeline ============================================================ */ .timeline{position:relative;max-width:760px;margin:60px auto 0;} .timeline::before{content:"";position:absolute;left:130px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--cyan),var(--teal),transparent);} .tl-item{display:grid;grid-template-columns:130px 1fr;gap:40px;padding-bottom:44px;position:relative;} .tl-item .yr{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink);text-align:right;} .tl-item .dot{position:absolute;left:124px;top:10px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 0 5px rgba(6,182,212,.12);} .tl-item .body h4{font-size:18px;margin-bottom:6px;} .tl-item .body p{color:var(--muted);font-size:15.5px;} .tl-item .body .ev{padding:4px 0;} /* stat band */ .stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;} .stat-band .st{padding:42px 30px;text-align:center;border-right:1px solid var(--line);} .stat-band .st:last-child{border-right:none;} .stat-band .st .n{font-family:var(--display);font-size:46px;font-weight:700;color:var(--ink);line-height:1;} .stat-band .st .n span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .stat-band .st .l{margin-top:12px;color:var(--muted);font-size:15px;} /* ============================================================ scroll reveal ============================================================ */ .reveal{opacity:0;transform:translateY(28px);transition:.8s var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:960px){ .nav,.btn-cta-head{display:none;} .menu-btn{display:flex;} .split{grid-template-columns:1fr;gap:36px;} .split.rev .visual{order:0;} .contact-grid{grid-template-columns:1fr;gap:30px;} .foot-top{grid-template-columns:1fr 1fr;gap:36px;} .vision-grid{grid-template-columns:1fr;} .vision-cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);} .stat-band{grid-template-columns:1fr 1fr;} .stat-band .st:nth-child(2){border-right:none;} .stat-band .st:nth-child(1),.stat-band .st:nth-child(2){border-bottom:1px solid var(--line);} } @media(max-width:720px){ body{font-size:16px;} .section{padding:80px 0;} .g-3,.g-2{grid-template-columns:1fr;} .hero-stats{gap:32px;} .hero-inner{padding:110px 0 70px;} .field-row{grid-template-columns:1fr;} .timeline::before{left:8px;} .tl-item{grid-template-columns:1fr;gap:6px;padding-left:34px;} .tl-item .yr{text-align:left;font-size:22px;} .tl-item .dot{left:2px;} .foot-top{grid-template-columns:1fr;} .stat-band{grid-template-columns:1fr 1fr;} }