:root {
  --paper: #fafbf9;
  --white: #ffffff;
  --tint: #f0f4f3;
  --ink: #263237;
  --muted: #59696f;
  --hairline: #d8dfdc;
  --navy: #173a43;
  --navy-deep: #14343b;
  --accent: #367b86;
  --gold: #c8ad76;
}
* { box-sizing: border-box; }
button, input, textarea, select { font-family: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.61 "Bookman Old Style", "Bookman", "URW Bookman", Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #dfa94d; outline-offset: 5px; }
.width { width: min(1140px, calc(100% - 104px)); margin: auto; }
.skip-link { position: absolute; left: -99999px; padding: 10px 15px; z-index: 100; background: white; }
.skip-link:focus { top: 8px; left: 8px; }

.site-header { background: #fff; border-bottom: 3px solid #7fa9a7; }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 111px; gap: 30px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-logo { display: block; width: min(620px, 55vw); max-width: 100%; height: auto; }
.navigation { display: flex; gap: 33px; flex-wrap: wrap; align-items: center; }
.navigation a { text-decoration: none; color: #40545c; font-size: 13px; font-weight: 600; transition: color .18s ease; white-space: nowrap; }
.navigation a:hover { color: #176879; text-decoration: underline; text-underline-offset: 6px; }

.hatch {
  position: relative;
  isolation: isolate;
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(11,25,30,.64) 0%, rgba(18,44,52,.50) 40%, rgba(11,25,30,.66) 100%),
    url('assets/carbon-texture.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
.hatch:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.hero { color: #f7faf8; border-bottom: 4px solid #6a9c9b; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 90px; min-height: 375px; padding-top: 76px; padding-bottom: 85px; align-items: center; }
.hero-grid-single { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 320px; }
h1 { margin: 0; font-size: clamp(43px,5vw,62px); font-weight: 610; letter-spacing: -.044em; line-height: 1.15; }
.hero-lede { max-width: 710px; margin: 22px 0 0; color: #deebe8; font-size: 18px; line-height: 1.65; }

.section { padding: 76px 0 88px; }
.content-grid { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 95px; }
.section-intro h2 { font-size: 27px; font-weight: 675; letter-spacing: -.045em; line-height: 1.25; margin: 0 0 17px; }
.section-intro p { max-width: 215px; color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.section-content { min-width: 0; }
.services-section { background: var(--paper); }
.service-item { display: grid; grid-template-columns: minmax(185px,.64fr) minmax(0,1fr); gap: 28px; border-top: 1px solid var(--hairline); padding: 28px 0 32px; }
.service-item:first-child { border-top: 3px solid #427e88; padding-top: 28px; }
.service-item h3 { font-size: 18px; letter-spacing: -.018em; font-weight: 650; line-height: 1.35; margin: 0; }
.service-item p { margin: 0 0 13px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.service-item ul { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.62; }
.service-item li { padding: 2px 0; }
.service-item li::before { content: "•"; color: #719096; margin-right: 8px; }
.under-note { font-size: 13px; color: #64757b; margin: 0; padding-top: 8px; }

.experience-section { background: var(--tint); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.experience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 42px; row-gap: 40px; }
.experience-block { border-top: 2px solid #427e88; padding-top: 13px; }
.experience-block h3 { font-size: 17px; line-height: 1.38; font-weight: 690; margin: 0 0 12px; letter-spacing: -.018em; }
.lined-list { list-style: none; padding: 0; margin: 0; }
.lined-list li { padding: 10px 0; border-top: 1px solid #d7dfdc; font-size: 14px; line-height: 1.58; color: #37474e; }
.lined-list li:first-child { border-top: 0; }
.experience-note { margin: 31px 0 0; border-top: 1px solid var(--hairline); padding-top: 18px; color: #66777b; font-size: 12px; line-height: 1.7; }

.platforms-section { background: var(--paper); }
.platform-rows { border-top: 3px solid #427e88; }
.platform-row { display: grid; grid-template-columns: 210px 1fr; gap: 28px; padding: 19px 0 21px; border-bottom: 1px solid var(--hairline); }
.platform-row h3 { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 700; }
.platform-row p { margin: 0; font-size: 15px; color: #48585f; line-height: 1.72; }

.contact-section { padding: 72px 0 76px; color: #f6f9f7; background-color: var(--navy-deep); border-top: 4px solid #719e9d; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact-grid h2 { font-size: 33px; line-height: 1.2; margin: 0 0 17px; letter-spacing: -.035em; font-weight: 630; }
.contact-grid p { margin: 0; color: #d1dfdb; font-size: 15px; line-height: 1.75; max-width: 380px; }
.contact-right { padding-top: 7px; }
.contact-email { color: #fff; font-size: clamp(18px,2.15vw,27px); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-right p { margin-top: 23px; font-size: 14px; }
.contact-right .contact-note { font-size: 13px; margin-top: 19px; color: #c1d5d2; }
.site-footer { background: #102f37; color: #bdcfcb; font-size: 12px; }
.footer-content { display: flex; gap: 20px; justify-content: space-between; padding-top: 21px; padding-bottom: 21px; }
.site-footer a { text-underline-offset: 3px; }

@media (max-width: 1040px) {
  .width { width: min(1140px, calc(100% - 72px)); }
  .content-grid { grid-template-columns: 190px minmax(0,1fr); gap: 50px; }
  .hero-grid { gap: 40px; }
  .navigation { gap: 22px; }
  .brand-logo { width: min(470px, 52vw); }
  .experience-grid { gap: 30px; }
}
@media (max-width: 780px) {
  .width { width: min(100% - 46px, 1140px); }
  .header-row { flex-wrap: wrap; padding-top: 20px; padding-bottom: 19px; gap: 19px; }
  .navigation { flex-basis: 100%; }
  .hero-grid { min-height: auto; padding-top: 63px; padding-bottom: 64px; grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 59px 0 69px; }
  .content-grid { grid-template-columns: 1fr; gap: 35px; }
  .section-intro p { max-width: 540px; }
  .experience-grid { gap: 30px; }
}
@media (max-width: 540px) {
  .width { width: calc(100% - 36px); }
  .header-row { min-height: auto; }
  .brand-logo { width: 100%; max-width: 360px; }
  .navigation { gap: 9px 18px; }
  .navigation a { font-size: 12px; }
  h1 { font-size: clamp(35px,9.25vw,48px); letter-spacing: -.05em; }
  .hero { border-bottom-width: 3px; }
  .hero-grid { padding-top: 52px; padding-bottom: 54px; }
  .hero-lede { font-size: 16px; }
  .section { padding: 50px 0 57px; }
  .section-intro h2 { font-size: 25px; }
  .service-item { display: block; padding: 23px 0; }
  .service-item h3 { margin-bottom: 12px; }
  .experience-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .platform-row { display: block; padding: 15px 0 18px; }
  .platform-row h3 { margin-bottom: 6px; }
  .contact-section { padding: 54px 0 59px; }
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .contact-email { font-size: 21px; }
  .footer-content { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }