/* Elucidated IT Solutions: "Deep Water" */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --deep: #0B3C49;
  --deeper: #072B35;
  --line: #2F6573;
  --amber: #FFB627;
  --pale: #EAF2F3;
  --ink: #12303A;
  --mute: #47626B;
  --mist: #D5E8EA;
  --rule: #C8D6DA;
  --field: #6B858D;
  --error: #A3241B;
  --error-bg: #FBEDEB;
  --focus: var(--deep);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body {
  background: #fff;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none }
h1, h2, h3 { text-wrap: balance }
p, li { text-wrap: pretty }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px }

/* Focus: deep ring on light surfaces, amber ring on dark ones. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.nav, .hero, .steps, footer { --focus: var(--amber) }
::selection { background: var(--amber); color: var(--deeper) }

.skip {
  position: absolute; left: 16px; top: 8px; z-index: 20;
  padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--amber); color: var(--deeper); font-weight: 700; border-radius: 3px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; outline: 3px solid #fff; outline-offset: 2px }

.nav { background: var(--deep); color: #fff; border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 76px; gap: 20px }
.logo { display: flex; align-items: center; gap: 11px; min-height: 44px; font-weight: 700; font-size: 18px; line-height: 1.1 }
.logo svg { flex: none }
.logo span { white-space: nowrap }
.links { display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: 15px }
.links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px }
.links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--amber) }
.links .btn { margin: 0; padding: 10px 18px; min-height: 44px }
.menu { display: none; min-height: 44px; align-items: center; font-weight: 600 }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px;
  background: var(--amber); color: var(--deeper); font-weight: 700; border-radius: 3px;
  transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover { background: #FFC24D }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px #fff }

.hero { background: var(--deep); color: #fff; padding: 72px 0 84px }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center }
.hero h1 { font-size: 62px; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 20px; font-weight: 700 }
.hero p { font-size: 20px; margin: 0 0 30px; color: var(--mist); max-width: 34em }
.acts { display: flex; flex-wrap: wrap; gap: 12px }
.board { background: var(--deeper); padding: 10px 26px; border-radius: 6px }
.move { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 12px; align-items: center; padding: 24px 0; font-weight: 600; font-size: 16px }
.move + .move { border-top: 1px solid var(--line) }
.move .to { text-align: right; color: var(--amber) }
.track { position: relative; height: 4px; background: var(--line); border-radius: 2px }
.track i { position: absolute; top: -4px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); animation: go 2.8s ease-in-out infinite }
.track i:nth-child(2) { animation-delay: .9s }
.track i:nth-child(3) { animation-delay: 1.8s }
.move:nth-child(2) i { animation-duration: 3.3s }
.move:nth-child(3) i { animation-duration: 2.4s }
@keyframes go { 0% { left: 0; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: calc(100% - 12px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .track i { animation: none; left: calc(100% - 12px) }
  .track i:nth-child(n+2) { display: none }
}

section { padding: 84px 0 }
h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 14px; font-weight: 700; color: var(--deep) }
.lede { font-size: 19px; color: var(--mute); max-width: 38em; margin: 0 0 44px }
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid var(--deep) }
.svc article { padding: 32px 30px 34px 0; border-bottom: 1px solid var(--rule); min-width: 0 }
.svc article + article { padding-left: 30px; border-left: 1px solid var(--rule) }
.svc article.lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--pale); padding: 36px; border-left: 0 }
.svc h3 { font-size: 22px; margin: 14px 0 8px; color: var(--deep); line-height: 1.2 }
.svc .lead h3 { margin-top: 0; font-size: 28px; text-wrap: wrap }
.svc p { margin: 0 0 10px; color: var(--mute) }
.svc ul { margin: 0; padding: 0 0 0 18px; color: var(--ink) }
.svc li { margin: 6px 0 }
.svc li::marker { color: var(--deep) }
.svc article:nth-child(3n+2) { border-left: 0; padding-left: 0 }

.when { background: var(--pale) }
.when .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 56px }
.when h3 { margin: 0 0 4px; font-size: 19px; color: var(--deep) }
.when .grid p { margin: 0; color: var(--mute) }

.steps { background: var(--deep); color: #fff }
.steps h2 { color: #fff }
.steps .lede { color: var(--mist) }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; counter-reset: s }
.steps li { counter-increment: s; border-top: 2px solid var(--amber); padding-top: 16px }
.steps li::before { content: counter(s); font-size: 40px; font-weight: 700; color: var(--amber); line-height: 1 }
.steps h3 { margin: 8px 0 6px; font-size: 20px }
.steps ol p { margin: 0; color: var(--mist); font-size: 16px }

.ways .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px }
.ways article { border: 1px solid var(--rule); border-top: 5px solid var(--amber); padding: 30px }
.ways h3 { margin: 0 0 8px; font-size: 24px; color: var(--deep) }
.ways article p { margin: 0; color: var(--mute) }

/* Contact */
.contact { background: var(--amber); padding: 72px 0 }
.contact .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start }
.contact h2 { color: var(--deeper); margin: 0 0 10px }
.contact .intro { margin: 0; color: var(--deeper); font-size: 19px; max-width: 24em }
.form { background: #fff; padding: 30px; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0 }
.form .field { min-width: 0 }
.form label { display: block; font-weight: 600; font-size: 15px; color: var(--ink) }
.form .opt { font-weight: 400; color: var(--mute) }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  border: 1px solid var(--field); border-radius: 3px; background: #fff; caret-color: var(--deep);
}
.form textarea { resize: vertical; min-height: 132px }
.form input:hover, .form textarea:hover { border-color: var(--deep) }
.form input:focus-visible, .form textarea:focus-visible, .form button:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px }
.form [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error) }
.form .full { grid-column: 1 / -1 }
.form .err { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--error) }
.form .err svg, .alert svg { flex: none; margin-top: 3px }
.form .err[hidden], .alert[hidden] { display: none }
.form .check { min-height: 65px }
.form .check:empty { display: none }
.form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; background: var(--deep); color: #fff; justify-self: start }
.form button:hover { background: var(--deeper) }
.form button:disabled { cursor: progress; opacity: .75 }
.form .privacy { margin: -6px 0 0; font-size: 15px; color: var(--mute) }
.alert { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--error-bg); color: var(--error); font-weight: 600; border-radius: 3px }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.sent-box { background: #fff; padding: 30px; border-radius: 6px; display: flex; gap: 14px; align-items: flex-start; font-size: 19px; font-weight: 600; color: var(--deep) }
.sent-box svg { flex: none; margin-top: 2px }
.sent-box:focus { outline: none }
.sent-box:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px }
.noscript-note { display: none }

@media (max-width: 800px) {
  .contact { padding: 54px 0 }
  .contact .wrap { grid-template-columns: 1fr; gap: 26px }
  .form { grid-template-columns: 1fr; padding: 20px 16px }
  .form button { width: 100%; justify-content: center }
  .sent-box { padding: 20px 16px; font-size: 18px }
}

footer { background: var(--deeper); color: var(--mist); padding: 52px 0 30px; font-size: 15px }
footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; margin-bottom: 34px }
footer h2.fh { margin: 0 0 10px; color: #fff; font-size: 15px; letter-spacing: 0; line-height: 1.5 }
footer ul { list-style: none; margin: 0; padding: 0 }
footer li { padding: 4px 0 }
footer .legal { border-top: 1px solid var(--line); padding-top: 18px }
footer .logo { color: #fff; margin-bottom: 12px; min-height: 0 }
footer .legal:only-child { border-top: 0; padding-top: 0 }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px }

@media (max-width: 800px) {
  .wrap { padding: 0 16px }
  .links { display: none }
  .menu { display: inline-flex }
  .hero { padding: 44px 0 52px }
  .hero .wrap { grid-template-columns: 1fr; gap: 34px }
  .hero h1 { font-size: 42px }
  .hero p { font-size: 18px }
  .board { padding: 4px 16px }
  .move { grid-template-columns: 1fr 46px 1fr; font-size: 14px; padding: 18px 0; gap: 8px }
  section { padding: 54px 0 }
  h2 { font-size: 31px }
  .lede { font-size: 17px; margin-bottom: 30px }
  .svc, .when .grid, .ways .grid, .steps ol, footer .cols { grid-template-columns: 1fr }
  .svc article, .svc article + article { padding: 26px 0; border-left: 0 }
  .svc article.lead { grid-template-columns: 1fr; gap: 12px; padding: 24px 16px }
  .cta h2 { font-size: 29px }
}

/* Service accordions: open and static on wide screens, collapsible on narrow ones. */
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px }
.acc summary::-webkit-details-marker { display: none }
.chev { display: none; flex: none; color: var(--deep); transition: transform .2s ease-out }
.acc[open] .chev { transform: rotate(180deg) }
.phonenav { display: none; align-items: center; gap: 6px }
.br { display: none }
[id] { scroll-margin-top: 76px }
.menu summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; cursor: pointer; font-weight: 600 }
.menu summary::-webkit-details-marker { display: none }
.menu summary svg { transition: transform .2s ease-out }
.menu[open] summary svg { transform: rotate(180deg) }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--deeper); padding: 6px 16px 12px; border-bottom: 1px solid var(--line) }
.menu nav a { display: flex; align-items: center; min-height: 48px; font-weight: 600; font-size: 17px }
.menu nav a + a { border-top: 1px solid var(--line) }
footer a { display: inline-flex; align-items: center; min-height: 44px }

@media (max-width: 800px) {
  .nav { position: sticky; top: 0; z-index: 10 }
  .nav .wrap { min-height: 64px; position: relative }
  .br { display: inline }
  .logo { font-size: 15px }
  .phonenav { display: flex }
  .phonenav .btn { min-height: 44px; padding: 8px 14px; font-size: 15px }
  .hero { padding: 36px 0 40px }
  .hero h1 { font-size: 40px; margin-bottom: 14px }
  .hero p { font-size: 17px; margin-bottom: 22px }
  .acts .btn { width: 100%; justify-content: center }
  .acts .ghost { display: none }
  .board { padding: 2px 16px }
  .move { grid-template-columns: 1fr auto; grid-template-areas: "from to" "track track"; gap: 12px 12px; padding: 16px 0; font-size: 15px; line-height: 1.35 }
  .move > span:first-child { grid-area: from }
  .move .to { grid-area: to; align-self: start }
  .track { grid-area: track }
  section { padding: 48px 0 }
  .lede { margin-bottom: 24px }
  .svc { border-top: 0 }
  .svc article.lead { margin-bottom: 12px; padding: 20px 16px; border: 0 }
  .svc article, .svc article + article { padding: 0; border-bottom: 1px solid var(--rule) }
  .svc .lead h3 { font-size: 24px }
  .svc article:nth-child(2) { border-top: 1px solid var(--rule) }
  .acc summary { min-height: 56px; padding: 6px 0; cursor: pointer }
  .acc h3 { margin: 0; font-size: 18px }
  .acc p { margin: 0; padding: 0 28px 16px 0 }
  .chev { display: block }
  .when .grid { gap: 20px }
  .steps ol { gap: 0 }
  .steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; border-top: 0; padding: 0 0 24px }
  .steps li:last-child { padding-bottom: 0 }
  .steps li::before { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: var(--deeper); font-size: 19px }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line) }
  .steps h3 { margin: 7px 0 4px }
  .ways .grid { gap: 14px }
  .ways article { padding: 20px 16px }
  .ways h3 { font-size: 21px }
  .contact { scroll-margin-top: 64px }
  [id] { scroll-margin-top: 64px }
  footer { padding: 40px 0 calc(24px + env(safe-area-inset-bottom)) }
  footer .cols { gap: 24px }
  footer li { padding: 0 }
  footer li, footer a { min-height: 32px }
  footer a { display: inline-flex; align-items: center; min-height: 44px }
}

/* Very narrow phones (320px): keep the header on one row. */
@media (max-width: 360px) {
  .logo { gap: 8px; font-size: 14px }
  .logo svg { width: 26px; height: 26px }
  .phonenav { gap: 2px }
  .phonenav .btn { padding: 8px 12px }
  .menu summary { padding: 0 4px }
  .hero h1 { font-size: 36px }
}

/* 404 page */
.notfound { background: var(--deep); color: #fff; min-height: calc(100vh - 77px); display: flex; align-items: center; padding: 72px 0 }
.notfound h1 { font-size: 52px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance }
.notfound p { font-size: 19px; color: var(--mist); margin: 0 0 28px; max-width: 32em }
@media (max-width: 800px) {
  .notfound { min-height: calc(100vh - 65px); padding: 48px 0 }
  .notfound h1 { font-size: 38px }
  .notfound p { font-size: 17px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important }
}