@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}
@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}
@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}
@font-face {
  font-family:'Be Vietnam Pro';
  src:url('assets/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap
}
:root {
  --navy:#0c3048;
  --navy-2:#17465f;
  --ink:#183c4d;
  --muted:#526a78;
  --line:#d7e3e8;
  --paper:#fff;
  --tint:#f1f7f9;
  --yellow:#f0bd38;
  --container:1240px
}
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.7 'Be Vietnam Pro',sans-serif;
  -webkit-font-smoothing:antialiased
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.15
}
p {
  margin-bottom:0
}
::selection {
  background:var(--yellow);
  color:var(--navy)
}
:focus-visible {
  outline:3px solid #b68000;
  outline-offset:4px
}
.container {
  width:min(calc(100% - 80px),var(--container));
  margin-inline:auto
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:absolute;
  z-index:50;
  left:16px;
  top:-80px;
  background:var(--yellow);
  padding:10px 16px;
  color:var(--navy);
  font-weight:700
}
.skip-link:focus {
  top:12px
}
.site-header {
  position:relative;
  z-index:20;
  background:#fff;
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  gap:36px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  color:var(--navy);
  font-size:25px;
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1
}
.brand img {
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:50%
}
.primary-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px;
  font-weight:600;
  color:#37566a
}
.primary-nav>a:not(.nav-cta),.footer-main nav a,.inline-link,.button-link {
  transition:color .2s ease
}
.primary-nav>a:not(.nav-cta):hover,.footer-main nav a:hover,.inline-link:hover,.button-link:hover {
  color:#a16b00
}
.nav-cta {
  margin-left:5px;
  border:1.5px solid var(--navy);
  border-radius:6px;
  padding:11px 18px;
  color:var(--navy);
  transition:background .2s ease,color .2s ease
}
.nav-cta:hover {
  background:var(--navy);
  color:#fff
}
.menu-button {
  display:none
}
.hero {
  background:var(--tint)
}
.hero-inner {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,78px);
  align-items:center;
  min-height:650px;
  padding-block:42px
}
.hero-content {
  padding-block:56px
}
.hero-category {
  margin-bottom:27px;
  color:#27617a;
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase
}
.hero h1 {
  max-width:690px;
  margin-bottom:26px;
  color:var(--navy);
  font-size:clamp(55px,5.3vw,78px);
  line-height:1.08;
  letter-spacing:-.072em
}
.hero-lead {
  max-width:510px;
  color:#466574;
  font-size:18px;
  line-height:1.8
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:38px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:54px;
  padding:13px 23px;
  border-radius:6px;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  transition:transform .2s ease,background .2s ease
}
.button:hover {
  transform:translateY(-2px);
}
.button-primary {
  background:var(--navy);
  color:#fff
}
.button-primary:hover {
  background:#1d526d
}
.button-link {
  font-size:14px;
  font-weight:700;
  color:var(--navy)
}
.button-link span[aria-hidden],.inline-link span[aria-hidden] {
  margin-left:5px
}
.hero-visual {
  height:565px;
  overflow:hidden;
  border-radius:9px;
  background:#c4d8d8
}
.hero-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 50%
}
.section-space {
  padding-block:clamp(80px,9vw,132px)
}
.intro-layout {
  display:grid;
  grid-template-columns:1fr 2.15fr;
  gap:7%
}
.intro-identity {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding-top:12px;
  color:var(--navy);
  font-size:15px;
  font-weight:700
}
.identity-mark {
  width:18px;
  height:18px;
  flex:none;
  margin-top:5px;
  background:var(--yellow);
  border-radius:50%
}
.intro-copy h2 {
  max-width:820px;
  margin-bottom:30px;
  color:var(--navy);
  font-size:clamp(36px,3.7vw,53px)
}
.intro-copy h2 span {
  color:#76909c
}
.intro-copy>p {
  max-width:730px;
  color:var(--muted);
  font-size:17px;
  line-height:1.9
}
.solution {
  background:var(--tint)
}
.section-heading {
  display:grid;
  grid-template-columns:1.2fr .68fr;
  align-items:end;
  gap:8%;
  margin-bottom:70px
}
.section-heading h2,.development h2,.faq h2 {
  margin-bottom:0;
  color:var(--navy);
  font-size:clamp(35px,3.6vw,51px)
}
.section-heading>p {
  max-width:390px;
  padding-bottom:4px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85
}
.solution-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.solution-steps article {
  min-height:300px;
  padding:38px 48px 10px 0
}
.solution-steps article+article {
  padding-left:16px
}
.step-symbol {
  width:48px;
  height:48px;
  margin-bottom:27px;
  color:#26738c
}
.step-symbol svg {
  width:100%;
  height:100%
}
.solution-steps h3 {
  margin-bottom:14px;
  color:var(--navy);
  font-size:25px
}
.solution-steps p {
  max-width:310px;
  color:var(--muted);
  font-size:15px;
  line-height:1.85
}
.perspective {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:610px;
  background:var(--navy)
}
.perspective-image {
  min-height:610px;
  overflow:hidden;
  background:#b4ced4
}
.perspective-image img {
  width:100%;
  height:100%;
  min-height:610px;
  object-fit:cover;
  object-position:50% 48%
}
.perspective-copy {
  display:flex;
  align-items:center;
  padding:80px clamp(44px,7.4vw,125px)
}
.perspective-copy>div {
  max-width:565px
}
.perspective h2 {
  margin-bottom:30px;
  color:#fff;
  font-size:clamp(39px,3.7vw,55px)
}
.perspective p {
  color:#d3e5ed;
  font-size:17px;
  line-height:1.9
}
.development-layout {
  display:grid;
  grid-template-columns:1fr .83fr;
  gap:9%;
  align-items:center
}
.development h2 {
  max-width:650px;
  margin-bottom:29px
}
.development-copy p {
  max-width:590px;
  color:var(--muted);
  font-size:17px;
  line-height:1.9
}
.development-copy p+p {
  margin-top:16px
}
.development-image {
  height:435px;
  overflow:hidden;
  border-radius:9px;
  background:#dce7e4
}
.development-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%
}
.inline-link {
  display:inline-block;
  margin-top:24px;
  text-decoration:underline;
  text-underline-offset:6px;
  padding-bottom:5px;
  color:var(--navy);
  font-size:15px;
  font-weight:700
}
.faq {
  background:#f7fafb
}
.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8%
}
.faq-items details {
  border-bottom:1px solid var(--line); /* taste-skill-ignore: disclosure rows need a clear separator */
}
.faq-items summary {
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:26px 44px 26px 0;
  color:var(--navy);
  font-size:17px;
  font-weight:600;
  line-height:1.5
}
.faq-items summary::-webkit-details-marker {
  display:none
}
.faq-items summary::after {
  content:'+';
  position:absolute;
  right:5px;
  top:24px;
  color:#29687e;
  font-size:26px;
  font-weight:400;
  line-height:1
}
.faq-items details[open] summary::after {
  content:'−'
}
.faq-items details p {
  max-width:620px;
  padding:0 40px 25px 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}
.contact {
  background:var(--navy);
  color:#fff
}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  padding-block:85px
}
.contact h2 {
  max-width:620px;
  margin-bottom:17px;
  font-size:clamp(37px,3.2vw,47px)
}
.contact p {
  max-width:590px;
  color:#cee0e9;
  font-size:16px;
  line-height:1.75
}
.button-yellow {
  flex:none;
  background:var(--yellow);
  color:var(--navy)
}
.button-yellow:hover {
  background:#ffcf52
}
.site-footer {
  background:#fff
}
.footer-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:12px;
  padding-block:54px
}
.footer-brand {
  grid-column:1
}
.footer-main>p {
  grid-column:1;
  color:var(--muted);
  font-size:14px
}
.footer-main nav {
  grid-column:2;
  grid-row:1/span 2;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:13px 28px;
  color:var(--navy);
  font-size:14px;
  font-weight:600
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  color:#526a78;
  font-size:13px
}
@media(max-width:1000px) {
  .container {
    width:min(calc(100% - 56px),var(--container))
  }
  .primary-nav {
    gap:18px;
    font-size:13px
  }
  .hero h1 {
    font-size:clamp(51px,5.7vw,66px)
  }
  .hero-visual {
    height:520px
  }
  .solution-steps article {
    padding-right:25px
  }
  .solution-steps article+article {
    padding-left:25px
  }
  .perspective-copy {
    padding-inline:55px
  }
}
@media(max-width:800px) {
  .header-inner {
    min-height:76px
  }
  .brand img {
    width:49px;
    height:49px
  }
  .brand {
    font-size:23px
  }
  .menu-button {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    border:0;
    border-radius:5px;
    background:var(--tint);
    color:var(--navy);
    cursor:pointer
  }
  .menu-button span {
    display:block;
    width:18px;
    height:2px;
    background:currentColor
  }
  .primary-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px max(28px,calc((100% - var(--container))/2)) 24px;
    background:#fff;
  }
  .primary-nav.is-open {
    display:flex
  }
  .primary-nav>a {
    padding:13px 4px
  }
  .primary-nav .nav-cta {
    align-self:flex-start;
    margin:10px 0 0;
    padding:11px 18px
  }
  .hero-inner {
    grid-template-columns:1fr;
    gap:18px;
    padding-block:43px 48px
  }
  .hero-content {
    padding-block:0
  }
  .hero h1 {
    font-size:clamp(48px,8vw,70px)
  }
  .hero-visual {
    height:auto;
    aspect-ratio:1.55
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:22px
  }
  .section-heading>p {
    max-width:650px
  }
  .perspective {
    grid-template-columns:1fr
  }
  .perspective-image,.perspective-image img {
    min-height:0;
    height:430px
  }
  .perspective-copy {
    padding:70px 7%
  }
  .development-layout {
    gap:5%
  }
  .development-image {
    height:370px
  }
  .contact-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:30px
  }
  .faq-layout {
    gap:5%
  }
}
@media(max-width:620px) {
  .container {
    width:calc(100% - 38px)
  }
  .hero-inner {
    padding-block:36px 38px
  }
  .hero-category {
    font-size:11px;
    letter-spacing:.1em;
    margin-bottom:21px
  }
  .hero h1 {
    font-size:clamp(42px,11.1vw,57px);
    margin-bottom:20px
  }
  .hero-lead {
    font-size:15px;
    line-height:1.8
  }
  .hero-actions {
    gap:18px;
    margin-top:27px
  }
  .button {
    min-height:50px;
    padding:12px 17px;
    font-size:13px
  }
  .button-link {
    font-size:13px
  }
  .hero-visual {
    aspect-ratio:1.15
  }
  .section-space {
    padding-block:75px
  }
  .intro-layout,.development-layout,.faq-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .intro-identity {
    padding-top:0
  }
  .intro-copy h2 {
    font-size:clamp(33px,8vw,42px);
    margin-bottom:22px
  }
  .intro-copy>p,.development-copy p {
    font-size:15px
  }
  .section-heading {
    margin-bottom:42px
  }
  .section-heading h2,.development h2,.faq h2 {
    font-size:clamp(33px,8vw,42px)
  }
  .solution-steps {
    grid-template-columns:1fr
  }
  .solution-steps article,.solution-steps article+article {
    min-height:0;
    padding:32px 0;
    border-left:0;
  }
  .solution-steps article:last-child {
    border-bottom:0;
    padding-bottom:0
  }
  .step-symbol {
    margin-bottom:18px
  }
  .solution-steps h3 {
    font-size:23px
  }
  .solution-steps p {
    max-width:none
  }
  .perspective-image,.perspective-image img {
    height:390px
  }
  .perspective-copy {
    padding:65px 19px
  }
  .perspective h2 {
    font-size:clamp(36px,9vw,46px)
  }
  .perspective p {
    font-size:15px
  }
  .development-image {
    height:auto;
    aspect-ratio:1.35;
    margin-top:20px
  }
  .faq-items summary {
    font-size:15px
  }
  .contact-inner {
    padding-block:70px
  }
  .contact h2 {
    font-size:36px
  }
  .contact p {
    font-size:15px
  }
  .footer-main {
    grid-template-columns:1fr;
    padding-block:42px;
    gap:8px
  }
  .footer-main>p,.footer-main nav,.footer-brand {
    grid-column:1;
    grid-row:auto
  }
  .footer-main nav {
    justify-content:flex-start;
    gap:8px 22px;
    margin-top:25px
  }
  .footer-bottom {
    flex-direction:column;
    gap:5px
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size:40px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column
  }
  .hero-visual {
    aspect-ratio:1
  }
  .contact h2 {
    font-size:32px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}

/* A quiet first impression; content remains visible without JavaScript. */
@keyframes arrive {
  from { opacity: .5; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: arrive .65s cubic-bezier(.22,1,.36,1) both; }
  .hero-visual { animation: arrive .75s .12s cubic-bezier(.22,1,.36,1) both; }
}