:root{--ink:#172a3b;--muted:#647481;--line:#dde5eb;--paper:#fff;--soft:#f3f6f8;--accent:#17675d;--navy:#22245F;--radius:14px}*{box-sizing:border-box}.site{container-type:inline-size;container-name:hng}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 "Pretendard","Malgun Gothic",Arial,sans-serif;word-break:keep-all}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #65a99d;outline-offset:5px}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}.skip{position:absolute;left:20px;top:-100px;background:var(--ink);color:white;padding:8px;z-index:100}.skip:focus{top:10px}.preview{font-size:12px;letter-spacing:.02em;padding:8px 0;background:var(--soft);color:var(--muted);border-bottom:1px solid var(--line)}.preview .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}header{border-bottom:1px solid var(--line);background:#fff}.head{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:24px}.brand{display:flex;gap:12px;align-items:center}.brand strong{display:block;font-size:20px;letter-spacing:-.04em;line-height:1.25}.brand small{display:block;font-size:10px;letter-spacing:.08em;color:var(--muted)}nav{display:flex;gap:26px;align-items:center}nav a,nav button{border:0;background:none;padding:10px 0;font-size:14px;font-weight:600;white-space:nowrap}.menu-toggle{display:none;background:white;border:1px solid var(--line);padding:8px 12px;border-radius:7px}.contact{border:1px solid var(--ink)!important;padding:8px 17px!important;border-radius:7px}.solutions-menu{position:relative}.solutions-menu details>summary{font-size:14px;font-weight:600;cursor:pointer;list-style:none;padding:10px 0}.solutions-menu details>summary::after{content:" +";color:var(--muted)}.dropdown{position:absolute;top:43px;left:-20px;width:175px;padding:12px 20px;background:white;border:1px solid var(--line);border-radius:8px;z-index:5}.dropdown button{display:block;width:100%;text-align:left}.hero{padding:82px 0 70px;display:grid;grid-template-columns:1.15fr .85fr;gap:66px;align-items:center}.eyebrow{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin:0 0 20px}h1{font-size:clamp(34px,4.2vw,58px);line-height:1.24;letter-spacing:-.065em;margin:0 0 26px;font-weight:750}.hero-copy>p:not(.eyebrow){max-width:510px;color:var(--muted);margin:0;font-size:17px}.actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}.primary,.secondary{border:1px solid var(--navy);padding:12px 22px;border-radius:7px;font-size:14px;font-weight:600}.primary{color:white;background:var(--navy)}.secondary{color:var(--navy);background:white}.index{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:0 2px}.index-label{font-size:11px;letter-spacing:.08em;color:var(--muted);padding:15px 0;border-bottom:1px solid var(--line)}.index-row{padding:24px 0;display:grid;grid-template-columns:34px 1fr;gap:8px;border-bottom:1px solid var(--line)}.index-row:last-child{border-bottom:0}.index-row span{color:var(--muted);font-size:11px}.index-row strong{font-size:23px;letter-spacing:-.03em;line-height:1.3}.index-row small{display:block;color:var(--muted);font-size:12px;margin-top:5px;font-weight:400}.rule{border-top:1px solid var(--line)}section{padding:64px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.section-head h2{margin:0;font-size:30px;line-height:1.3;letter-spacing:-.05em}.section-head p{margin:0;color:var(--muted);font-size:14px;max-width:420px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}.product{border:1px solid var(--line);border-radius:var(--radius);padding:34px;min-height:255px;display:flex;flex-direction:column;align-items:start}.product.dark{background:var(--navy);color:white;border-color:var(--navy)}.product .tag{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-bottom:28px}.product.dark .tag,.product.dark p{color:#becbd5}.product h3{font-size:29px;letter-spacing:-.04em;line-height:1.25;margin:0 0 12px}.product p{font-size:14px;color:var(--muted);margin:0 0 24px;max-width:390px}.product button{background:transparent;border:0;border-bottom:1px solid currentColor;padding:0 0 4px;font-size:13px;color:inherit;margin-top:auto}.profile{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.profile h2{font-size:30px;letter-spacing:-.05em;line-height:1.35;margin:0 0 15px}.profile p{color:var(--muted);font-size:14px;margin:0 0 24px}.profile-box{border-left:1px solid #ccd7de;padding:14px 0 14px 30px}.profile-box span{font-size:12px;color:var(--muted)}.profile-box strong{display:block;font-size:23px;margin-top:8px;letter-spacing:-.03em}.profile-box p{font-size:13px;margin:9px 0 0}.about-strip{display:flex;justify-content:space-between;gap:50px;align-items:start}.about-strip h2{font-size:23px;letter-spacing:-.04em;margin:0}.about-strip p{color:var(--muted);font-size:14px;margin:0;max-width:600px}.foot{border-top:1px solid var(--line);padding:30px 0 36px;font-size:12px;color:var(--muted)}.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.foot strong{color:var(--ink);font-weight:600}.foot p{margin:6px 0 0}.state{font-size:11px;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px 10px;white-space:nowrap}dialog{border:1px solid var(--line);border-radius:12px;padding:30px;width:min(460px,calc(100% - 32px));color:var(--ink)}dialog::backdrop{background:rgba(23,42,59,.4)}dialog h2{font-size:23px;letter-spacing:-.04em;margin:0 0 15px}dialog p{font-size:14px;color:var(--muted);margin:0 0 24px}dialog button{background:var(--navy);border:0;color:white;border-radius:6px;padding:9px 22px;float:right}dialog:after{content:"";display:table;clear:both}@container hng (max-width:920px){nav{gap:16px}.head{gap:16px}.hero{gap:32px;padding-top:58px}.wrap{width:calc(100% - 44px)}.brand strong{font-size:17px}}@container hng (max-width:740px){.menu-toggle{display:block}header{position:relative}.head{min-height:75px}nav{display:none;position:absolute;top:75px;left:0;right:0;z-index:8;background:white;border-bottom:1px solid var(--line);padding:16px 24px;align-items:stretch;gap:8px;flex-direction:column}nav.open{display:flex}nav a,nav button{text-align:left}.dropdown{position:static;width:auto;padding:0 15px;border:0;border-left:1px solid var(--line);border-radius:0}.contact{width:fit-content}.hero{grid-template-columns:1fr;padding:45px 0 38px;gap:36px}h1{font-size:38px}.hero-copy>p:not(.eyebrow){font-size:15px}.index-row{padding:16px 0}.index-row strong{font-size:20px}.cards,.profile-grid{grid-template-columns:1fr;gap:18px}.section-head{align-items:start;flex-direction:column;gap:12px}.section-head h2,.profile h2{font-size:27px}.product{padding:28px;min-height:250px}.profile-box{margin-top:12px}.about-strip{flex-direction:column;gap:15px}section{padding:44px 0}.preview .wrap>span:last-child{display:none}.wrap{width:calc(100% - 36px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* HNG Life brand guide: approved web values; image pixels may vary. */
:root{--teal:#218D86;--deep-teal:#17675D;--cloud:#F3F6F8}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.brand{min-width:0;flex-shrink:0}
.mark{display:block;width:52px;height:52px;object-fit:contain;flex-shrink:0}
#brand-story,#brand-colors{scroll-margin-top:24px}
.brand-story{background:var(--cloud);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px 0 60px}
.brand-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.brand-intro>*{min-width:0}
.brand-art{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:36px;gap:20px}
.brand-art img{display:block;width:272px;height:auto}
.brand-art>span{font-size:11px;letter-spacing:.12em;color:var(--navy);text-align:center}
.brand-copy .eyebrow{margin-bottom:16px}
.brand-copy h2{margin:0 0 24px;color:var(--navy);font-size:clamp(34px,4vw,50px);line-height:1.2;letter-spacing:-.055em}
.brand-copy>p:not(.eyebrow){margin:0 0 16px;color:var(--ink);max-width:540px;font-size:15px;line-height:1.85}
.brand-copy .brand-lead{font-size:18px!important;font-weight:600}
.brand-text-link{display:inline-block;margin-top:8px;color:var(--accent);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.brand-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px}
.brand-values article{min-width:0;border-top:2px solid var(--navy);padding-top:20px}
.brand-number{margin:0 0 14px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.07em}
.brand-values h3{font-size:20px;line-height:1.4;letter-spacing:-.04em;color:var(--navy);margin:0 0 12px}
.brand-values article>p:last-child{font-size:14px;line-height:1.8;color:var(--ink);margin:0}
.brand-colors{padding:64px 0 72px}
.brand-colors .section-head .eyebrow{margin-bottom:12px}
.brand-colors .section-head h2{color:var(--navy)}
.brand-color-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;text-align:left;line-height:1.65}
.brand-color-table caption{text-align:left;padding:0 0 14px;font-size:14px;font-weight:700;color:var(--navy)}
.brand-color-table caption span{display:inline-block;margin-left:12px;font-size:12px;font-weight:400;color:var(--muted)}
.brand-color-table th,.brand-color-table td{padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.brand-color-table thead th{border-top:2px solid var(--navy);background:var(--cloud);font-size:12px;font-weight:700;color:var(--navy)}
.brand-color-table th:nth-child(1){width:22%}
.brand-color-table th:nth-child(2){width:24%}
.brand-color-table th:nth-child(3){width:20%}
.brand-color-table th:nth-child(4){width:34%}
.brand-color-table tbody th{font-weight:600;color:var(--navy)}
.brand-color-table code{font-family:Consolas,"Courier New",monospace;font-size:14px;color:var(--navy)}
.rgb-value{display:block;margin-top:3px;font-size:12px;color:var(--ink)}
.color-swatch{display:block;width:36px;height:36px;border-radius:9px;margin-bottom:9px;border:1px solid rgba(34,36,95,.16)}
.swatch-navy{background:var(--navy)}.swatch-teal{background:var(--teal)}.swatch-deep-teal{background:var(--deep-teal)}.swatch-white{background:var(--paper)}.swatch-cloud{background:var(--cloud)}
.color-guide-notes{margin-top:20px;padding-left:16px;border-left:2px solid var(--line);max-width:850px;font-size:12px;line-height:1.8;color:var(--ink)}
.color-guide-notes p{margin:0 0 7px}.color-guide-notes p:last-child{margin-bottom:0}
.footer-brand{display:inline-flex;gap:12px;align-items:center;max-width:100%}
.footer-brand img{display:block;width:44px;height:44px;object-fit:contain;flex-shrink:0}
.footer-brand strong{color:var(--navy)}
@container hng (max-width:920px){.brand-intro{gap:36px}.brand-art{padding:28px}.brand-values{gap:20px}.brand-values h3{font-size:18px}}
@container hng (max-width:740px){.brand-story{padding:44px 0}.brand-intro{grid-template-columns:1fr;gap:30px}.brand-art{padding:28px 24px;max-width:400px;width:100%;margin-inline:auto}.brand-art img{width:220px}.brand-copy h2{font-size:36px}.brand-values{grid-template-columns:1fr;gap:26px;margin-top:36px}.brand-values h3{font-size:20px}.brand-number{margin-bottom:8px}.brand-colors{padding:44px 0}.brand-color-table{font-size:12px}.brand-color-table th,.brand-color-table td{padding:13px 7px;word-break:normal}.brand-color-table th:nth-child(1){width:21%}.brand-color-table th:nth-child(2){width:27%}.brand-color-table th:nth-child(3){width:21%}.brand-color-table th:nth-child(4){width:31%}.brand-color-table code{font-size:12px;letter-spacing:-.04em}.brand-color-table thead th{font-size:11px}.brand-color-table caption span{display:block;margin:3px 0 0}.rgb-value{font-size:11px}.color-swatch{width:30px;height:30px}.color-guide-notes{padding-left:12px}}
@container hng (max-width:360px){.brand{gap:8px}.mark{width:44px;height:44px}.brand strong{font-size:16px}.head{gap:10px}.menu-toggle{padding:8px 10px}.brand-art{padding:24px 18px}.brand-copy .brand-lead{font-size:16px!important}.brand-color-table th,.brand-color-table td{padding-inline:5px}}