/* --------------------------------------------------------------------------
   Flomarine — site styles

   Dark theme, matching the Flomarine logo: a navy field with a brand blue
   ship's wheel (#3E8FC8). Three navy elevations carry the whole page, all in
   the logo's hue — the page sits darkest, cards a step up, the client band
   brightest at the logo navy itself (#123A5C).

   Brand blue splits into two tokens rather than one:

     --km-acc        brand blue — rules, marks, focus rings. Non-text use.
     --km-acc-text   lifted blue for small text on any of the three navies.
     --km-acc-band   alias of the above, kept so band markup reads clearly.

   `npm run check:contrast` audits every pairing below against WCAG AA. Change
   a colour here, run that, and keep it green.
   -------------------------------------------------------------------------- */

:root {
  /* palette — Flomarine navy & blue, dark theme */
  --km-bg: #0A2138;
  --km-ink: #F1F5F9;
  --km-sub: #BCCEDD;
  --km-mut: #93A9BD;
  --km-body2: #DCE7F0;
  --km-eyeb: #BCCEDD;
  --km-band: #123A5C;
  --km-bandink: #F1F5F9;
  --km-bs75: rgba(241, 245, 249, .86);
  --km-bs65: rgba(241, 245, 249, .78);
  --km-bs5: rgba(241, 245, 249, .7);
  --km-paper: #0F3050;
  --km-navbg: rgba(10, 33, 56, .88);
  --km-scrim: radial-gradient(120% 95% at 18% 10%, rgba(10, 33, 56, .96) 0 45%, rgba(10, 33, 56, .82) 62%, rgba(10, 33, 56, 0) 80%);

  /* ship tones — hull lifted off the dark page so it still reads as steel */
  --km-h1: #2B6796;
  --km-h2: #14405F;
  --km-h3: #4E93C4;
  --km-h4: #23577F;
  --km-h5: #1B4970;
  --km-int: #0C2C46;
  --km-fr: #4A7CA6;
  --km-p1: #A8C6DE;
  --km-p2: #8FB0CC;

  /* accent — see the header note before reaching for these */
  --km-acc: #3E8FC8;
  --km-acc-text: #7CB8E4;
  --km-acc-band: #7CB8E4;

  /* hairlines — rgba(ink) at fixed alphas, light-on-dark */
  --km-grid: rgba(226, 236, 246, .045);
  --km-l08: rgba(226, 236, 246, .1);
  --km-l10: rgba(226, 236, 246, .12);
  --km-l12: rgba(226, 236, 246, .14);
  --km-l14: rgba(226, 236, 246, .16);
  --km-l15: rgba(226, 236, 246, .17);
  --km-l16: rgba(226, 236, 246, .18);
  --km-l18: rgba(226, 236, 246, .2);
  --km-l25: rgba(226, 236, 246, .26);
  --km-l40: rgba(226, 236, 246, .42);
  --km-l55: rgba(226, 236, 246, .56);
  --km-l60: rgba(226, 236, 246, .62);
  --km-wl: rgba(226, 236, 246, .62);

  /* Buttons invert on dark: light plate, dark type. */
  --km-link: #F1F5F9;
  --km-btnbg: #F1F5F9;
  --km-btnink: #0A2138;
}

html { scroll-behavior: smooth }
body { margin: 0; background: var(--km-bg,#0A2138); color: var(--km-ink,#F1F5F9); font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased }
a { color: var(--km-link,#F1F5F9) }
a:hover { color: var(--km-acc-text,#7CB8E4) }
::selection { background: #3E8FC8; color: #FFFFFF }

@keyframes km-cue { 0% { transform: translateY(-110%) } 100% { transform: translateY(110%) } }
@keyframes km-drift { to { stroke-dashoffset: -120 } }

/* Keyboard focus needs to survive on a page built from inline styles. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--km-acc, #3E8FC8);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Accessibility primitives
   -------------------------------------------------------------------------- */

/* Available to screen readers, invisible on screen. Used for section headings
   that the visual design carries typographically rather than as a <h2>. */
.km-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* First tab stop on every page: jump past the fixed nav into the content. */
.km-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .16em;
  padding: 12px 18px; background: var(--km-btnbg,#F1F5F9); color: var(--km-btnink,#0A2138);
  text-decoration: none; transition: top .16s ease;
}
.km-skip:focus { top: 12px; color: var(--km-btnink,#0A2138) }

/* --------------------------------------------------------------------------
   Logo lockup — FL⊙MARINE, with the ship's wheel standing in for the O exactly
   as the brand mark does.

   The wordmark is live text rather than an image, so it stays selectable,
   searchable and in the page's own font. The wheel is inlined mid-word and
   marked aria-hidden; a visually-hidden "O" sits beside it so the accessible
   name and any text copied off the page both read "FLOMARINE".
   -------------------------------------------------------------------------- */

.km-logo { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit }
.km-logo-word {
  font-weight: 700; font-size: 15px; letter-spacing: .08em; line-height: 1;
  color: var(--km-ink,#F1F5F9); white-space: nowrap;
}
/* Sized and shifted so the wheel's ring lands on the O's cap height. The glyph
   box is wider than the ring because the handles stick out past it. */
.km-logo-mark {
  display: inline-block; width: 1.16em; height: 1.16em;
  vertical-align: -.22em; margin: 0 .01em;
  color: var(--km-acc, #3E8FC8);
}
.km-logo-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em;
  color: var(--km-mut,#93A9BD); white-space: nowrap;
}
.km-logo:hover .km-logo-word { color: var(--km-acc-text,#7CB8E4) }

/* The brand line, used under the hero and in the footer. */
.km-tagline {
  font-family: 'IBM Plex Mono', monospace; letter-spacing: .3em;
  color: var(--km-acc-text,#7CB8E4); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Client wall

   Set in the site's own type rather than as supplied logo files. The three
   clients' marks have incompatible colour systems — KOTC is dark-on-white,
   ASRY is white-on-blue, ASYAD is white-and-cyan-on-black — so dropping them
   straight onto the navy band would need a white plate behind KOTC and would
   break the band into a patchwork. Type keeps the row consistent, scales,
   costs no requests, and stays readable to search and assistive tech.

   To swap in real logo files later: drop them in assets/img/clients/, put an
   <img> inside .km-client, and add

     .km-client img { filter: brightness(0) invert(1); opacity: .8 }
     .km-client:hover img { filter: none; opacity: 1 }

   which flattens any mark to white on the band and restores brand colour on
   hover — the standard way to make a mixed logo wall read as one row.
   -------------------------------------------------------------------------- */

.km-clients {
  margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 22px); max-width: 940px;
}
.km-client {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; min-height: 108px; padding: 22px 18px; text-align: center;
  border: 1px solid var(--km-l18, rgba(226, 236, 246, .2));
  background: rgba(226, 236, 246, .04);
}
.km-client-name {
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 600; letter-spacing: .02em;
  color: var(--km-bandink, #F1F5F9); line-height: 1;
}
.km-client-where {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .22em;
  color: var(--km-acc-band, #7CB8E4);
}

/* --------------------------------------------------------------------------
   Group companies — the operating names that sit under Flomarine.
   -------------------------------------------------------------------------- */

.km-group-grid {
  margin-top: clamp(36px, 4.5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.km-group-card { border-top: 1px solid var(--km-l25, rgba(226, 236, 246, .25)); padding-top: 18px }
.km-group-card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em }
.km-group-card .km-group-where {
  margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .22em; color: var(--km-acc-text,#7CB8E4);
}
.km-group-card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--km-mut,#93A9BD) }

@media (max-width: 720px) {
  [data-km-nav] { padding: 12px 16px !important }
  [data-km-navsub] { display: none !important }
  [data-km-sticky] { background-image: none !important }
  [data-km-svg] { width: min(100vw, 76vh) !important; right: auto !important; left: 50% !important; margin-left: max(-50vw, -38vh) !important; max-height: none !important }
  [data-km-hero] { padding: 74px 18px 0 !important; max-width: 100% !important }
  [data-km-hero] > div:first-child { font-size: 10px !important; letter-spacing: .18em !important; flex-wrap: wrap !important }
  [data-km-h1] { font-size: clamp(36px, 11.5vw, 50px) !important; margin-top: 18px !important; max-width: 100% !important }
  [data-km-sub] { font-size: 16.5px !important; max-width: 100% !important; margin-top: 16px !important }
  [data-km-tag] { font-size: 11px !important; letter-spacing: .24em !important; margin-top: 14px !important }
  [data-km-cue] { left: 18px !important; bottom: 14px !important }
  [data-km-card] { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; padding: 16px 18px !important; max-height: 54vh !important; overflow: auto !important }
  [data-km-card] h3 { font-size: 23px !important }
  [data-km-card] p { font-size: 15.5px !important; margin: 8px 0 10px !important }
  [data-km-row] { padding: 6px 0 !important }
  [data-km-rail] { display: none !important }
  section[data-screen-label], footer[data-screen-label] { padding: 64px 18px !important }
  section[data-screen-label] h2 { font-size: clamp(32px, 9vw, 44px) !important }
}

/* --------------------------------------------------------------------------
   Contact page — same tokens, same editorial rhythm as the scroll story.
   -------------------------------------------------------------------------- */

.km-page { padding: clamp(110px, 15vh, 170px) clamp(20px, 6vw, 110px) clamp(70px, 9vw, 120px) }

.km-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .26em;
  color: var(--km-eyeb, rgba(14, 50, 56, .8));
}
.km-eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; background: var(--km-acc, #3E8FC8) }

.km-page h1 {
  margin: 22px 0 0; font-size: clamp(40px, 5.6vw, 84px); line-height: 1;
  letter-spacing: -.025em; font-weight: 600; max-width: 15ch; text-wrap: balance;
}
.km-lede { margin: 22px 0 0; font-size: 17px; line-height: 1.65; max-width: 54ch; color: var(--km-sub,#BCCEDD) }

.km-grid {
  margin-top: clamp(44px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(36px, 5vw, 90px);
}
@media (max-width: 860px) { .km-grid { grid-template-columns: minmax(0, 1fr) } }

.km-field { margin-top: 22px }
.km-field:first-child { margin-top: 0 }
.km-label {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .22em; color: var(--km-eyeb, rgba(14, 50, 56, .8)); margin-bottom: 9px;
}
.km-label .km-req { color: var(--km-acc-text,#7CB8E4) }

.km-input, .km-select, .km-textarea {
  width: 100%; box-sizing: border-box; font-family: 'Archivo', sans-serif; font-size: 16px;
  line-height: 1.5; color: var(--km-ink,#F1F5F9); background: var(--km-paper,#0F3050);
  border: 1px solid var(--km-l25, rgba(226, 236, 246, .25)); border-radius: 0;
  padding: 13px 15px; transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none; appearance: none;
}
.km-textarea { min-height: 168px; resize: vertical }
.km-select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px;
}
.km-input:hover, .km-select:hover, .km-textarea:hover { border-color: var(--km-l40, rgba(226, 236, 246, .4)) }
.km-input:focus, .km-select:focus, .km-textarea:focus {
  outline: none; border-color: var(--km-acc, #3E8FC8);
  box-shadow: 0 0 0 3px rgba(62, 143, 200, .22);
}
.km-input[aria-invalid="true"], .km-textarea[aria-invalid="true"] { border-color: #B23A2E; box-shadow: 0 0 0 3px rgba(178, 58, 46, .14) }

.km-hint { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--km-mut,#93A9BD) }
.km-error { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #9B2F24; min-height: 0 }

/* honeypot — off-screen rather than display:none, which some bots skip */
.km-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.km-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
.km-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em;
  padding: 17px 30px; background: var(--km-btnbg,#F1F5F9); color: var(--km-btnink,#0A2138);
  text-decoration: none; border: 1px solid var(--km-btnbg,#F1F5F9); cursor: pointer;
  transition: opacity .18s ease;
}
.km-btn:hover { opacity: .88; color: var(--km-btnink,#0A2138) }
.km-btn[disabled] { opacity: .45; cursor: progress }
.km-btn-ghost {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em;
  padding: 16px 28px; border: 1px solid var(--km-l40, rgba(226, 236, 246, .4));
  color: var(--km-ink,#F1F5F9); text-decoration: none; background: none; cursor: pointer;
}

.km-status { margin-top: 24px; padding: 16px 18px; border-left: 3px solid var(--km-acc, #3E8FC8); background: var(--km-paper,#0F3050); font-size: 15.5px; line-height: 1.6 }
.km-status[hidden] { display: none }
.km-status.is-ok { border-left-color: #2F7D5B }
.km-status.is-err { border-left-color: #B23A2E }

.km-aside-block { border-top: 1px solid var(--km-l25, rgba(226, 236, 246, .25)); padding-top: 18px; margin-top: 26px }
.km-aside-block:first-child { margin-top: 0 }
.km-aside-title { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .24em; color: var(--km-acc-text,#7CB8E4) }
.km-aside-body { margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: var(--km-body2,#DCE7F0) }
.km-aside-body a { text-decoration: none }

@media (max-width: 720px) {
  .km-page { padding: 96px 18px 64px }
  .km-page h1 { font-size: clamp(34px, 10vw, 48px) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important }
}