/* Unitech AI
   One stylesheet for the whole site. Colours and spacing are set once,
   in :root, and used everywhere below. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;        /* browser form controls and scrollbars follow the dark page */
  --bg: #1E2225;            /* graphite ground */
  --bg-inset: #171A1C;      /* form fields */
  --line: rgba(233, 231, 226, 0.1);   /* hairlines between sections */
  --line-strong: #6F777A;   /* field borders */
  --text: #E9E7E2;
  --text-2: #C5C9C9;
  --text-3: #AEB3B4;
  --blue: #1684AC;          /* the logo blue: buttons and every accent */
  --blue-deep: #14799E;     /* buttons while the pointer is over them */
  --blue-light: #6DB6D3;    /* keyboard focus outlines, which need extra contrast */
  --error: #F0A79A;
  --gutter: 24px;           /* indent of the text inside each column */
  --section: 72px;
  --header-height: 100px;   /* the script replaces this with the measured height */
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  background: var(--bg);   /* stated on the root so nothing outside the site can replace it */
  scroll-padding-top: 84px;   /* jumps within a page stop below the travelling header */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html body {
  margin: 0;
  background: transparent;   /* the gradient layers show through from behind */
  color: var(--text);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--blue); color: #fff; }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--text);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
a:hover { color: #fff; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 12px 18px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:hover { color: var(--bg); }
.skip:focus { top: 16px; }


/* ---------- Background: a graphite gradient with two soft fields of the
   logo blue that drift very slowly. The layers are fixed to the window and
   sit behind everything. ---------- */

html::before,
html::after,
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

html::before {
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, #21272B 0%, #1C2023 55%, #17191B 100%);
}

body::before {
  top: -45vmax; right: -35vmax;
  width: 110vmax; height: 110vmax;
  background: radial-gradient(closest-side, rgba(22, 132, 172, 0.26), rgba(22, 132, 172, 0.09) 48%, rgba(22, 132, 172, 0) 72%);
}

body::after {
  bottom: -55vmax; left: -45vmax;
  width: 110vmax; height: 110vmax;
  background: radial-gradient(closest-side, rgba(40, 96, 120, 0.2), rgba(40, 96, 120, 0) 70%);
}

/* A fine grain over the gradient keeps it smooth instead of banded. */
html::after {
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("../img/grain.png") repeat;
  opacity: 0.55;
}


/* ---------- Page frame and columns ---------- */

.page { padding: 0 clamp(16px, 3vw, 40px); }

.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  min-height: calc(100vh - var(--header-height));
  margin: 0 auto;
}

main { flex: 1 0 auto; }

.band { position: relative; z-index: 1; }

.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }

.cell { padding-left: var(--gutter); padding-right: var(--gutter); }

.col-a { grid-column: 1; }
.col-b { grid-column: 2; }
.col-c { grid-column: 3; }
.col-d { grid-column: 4; }
.col-ab { grid-column: 1 / 3; }
.col-bc { grid-column: 2 / 4; }
.col-bd { grid-column: 2 / 5; }
.col-cd { grid-column: 3 / 5; }
.col-all { grid-column: 1 / -1; }
.term { grid-column: 1; }
.desc { grid-column: 2 / 4; }
.span-2 { grid-column: 1 / -1; }


/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.site-header-pad { padding: 0 clamp(16px, 3vw, 40px); }

.site-header-row {
  align-items: center;
  row-gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, border-color 0.25s ease;
}

.brand { display: inline-block; }
.brand img {
  width: 82px;
  height: 80px;
  transition: width 0.25s ease, height 0.25s ease;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* the menu sits on the right-hand side */
  gap: 0 36px;
  font-size: 0.9375rem;
}
.nav a {
  display: inline-block;
  padding: 12px 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.nav a:hover { color: #fff; border-bottom-color: rgba(22, 132, 172, 0.55); }
.nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--blue);
}

/* The travelling header. The script adds these two classes: the first fixes
   the header to the top of the window, the second is set once the visitor has
   scrolled, and makes the header compact. Without the script the header simply
   stays at the top of the page. */
.has-travelling-header .site-header { position: fixed; top: 0; left: 0; right: 0; }
.has-travelling-header body { padding-top: var(--header-height); }

.is-scrolled .site-header {
  background: rgba(23, 27, 30, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(22, 132, 172, 0.55);
}
.is-scrolled .site-header-row { padding: 8px 0; border-bottom-color: transparent; }
.is-scrolled .brand img { width: 43px; height: 42px; }

.is-measuring .site-header,
.is-measuring .site-header-row,
.is-measuring .brand img { transition: none; }


/* ---------- Footer ---------- */

.site-footer {
  align-items: center;
  row-gap: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.875rem;
}
.site-footer a {
  display: inline-block;
  padding: 12px 0;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 5px;
}
.site-footer a:hover { color: #fff; }


/* ---------- Type ---------- */

.display {
  font-size: clamp(2.5rem, 6.2vw, 5.25rem);
  line-height: 1.02;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.04;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  max-width: 34em;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
}

.label {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
}

.name {
  margin-bottom: 14px;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.01em;
}

.statement {
  max-width: 24em;
  font-size: clamp(1.5rem, 2.9vw, 2.375rem);
  line-height: 1.2;
  font-weight: 400;
  font-stretch: 106%;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.quiet { color: var(--text-3); }
.body { max-width: 38em; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.body + .body { margin-top: 1.1em; }


/* ---------- Links and buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn[disabled] { opacity: 0.6; cursor: default; }

.link {
  display: inline-block;
  padding: 12px 0;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-underline-offset: 6px;
}
.link:hover { text-decoration-color: var(--blue-light); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 36px;
}


/* ---------- Sections ---------- */

.hero {
  row-gap: clamp(36px, 4vw, 60px);
  padding: clamp(64px, 9vw, 132px) 0 clamp(56px, 7vw, 108px);
}

.page-head {
  row-gap: clamp(28px, 3vw, 44px);
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
}

.section {
  padding: var(--section) 0;
  border-top: 1px solid var(--line);
}

/* Blue accent: each section's dividing line begins with a short blue stroke,
   directly above the section's name. */
.section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--gutter);
  width: 40px;
  height: 2px;
  background: var(--blue);
}

.section-wide { padding: clamp(64px, 7vw, 96px) 0; }

.more { margin-top: 4px; }
.nowrap { white-space: nowrap; }

/* Rows: a term on the left, its explanation on the right, a hairline between rows */
.row { padding: 26px 0; border-top: 1px solid var(--line); }
.row:first-child { padding-top: 0; border-top: 0; }
.row:last-child { padding-bottom: 0; }
.row .term,
.row .desc { font-size: 1.125rem; line-height: 1.45; }
.row .term { font-weight: 500; }
.row .desc { max-width: 34em; color: var(--text-2); }

/* Blue accent: numbered steps carry their number in blue; other rows and
   lists carry a small blue square. */
.row .step {
  display: inline-block;
  min-width: 1.6em;
  color: var(--blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mark::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -2px;
  width: 7px;
  height: 7px;
  margin-right: 14px;
  background: var(--blue);
  vertical-align: middle;
}

.benefits { row-gap: 48px; }

.questions { margin-top: 22px; max-width: 38em; }
.questions li {
  position: relative;
  padding: 14px 0 14px 21px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}
.questions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 7px;
  height: 7px;
  background: var(--blue);
}
.questions li:last-child { border-bottom: 1px solid var(--line); }
.questions-intro { margin-top: 28px; color: var(--text-3); }


/* ---------- Contact form ---------- */

.form { row-gap: 26px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.field .optional { color: var(--text-3); font-weight: 400; }

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-inset);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}
.field textarea { min-height: 190px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
  border-color: var(--blue-light);
}
.field [aria-invalid="true"] { border-color: var(--error); }

.field-error {
  margin-top: 8px;
  color: var(--error);
  font-size: 0.9375rem;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.form-status { color: var(--text-2); }
.form-status.is-error { color: var(--error); }
.form-note { color: var(--text-3); font-size: 0.9375rem; }

/* A field people never see. Automated form-fillers complete it and are discarded. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.direct a { font-size: 1.125rem; }

[hidden] { display: none !important; }


/* ---------- Motion: the background drifts, and the page title rises once on
   load. Visitors who ask their device for less motion get neither. ---------- */

@media (prefers-reduced-motion: no-preference) {
  body::before { animation: drift-a 38s ease-in-out infinite alternate; }
  body::after { animation: drift-b 52s ease-in-out infinite alternate; }

  @keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-14vw, 12vh, 0) scale(1.12); }
  }
  @keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(16vw, -10vh, 0) scale(1.08); }
  }

  .rise { animation: rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .rise-late { animation-delay: 0.12s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header-row,
  .brand img { transition: none; }
}


/* ---------- Tablet and phone: one column ---------- */

@media (max-width: 1040px) {
  :root { --gutter: 20px; --section: 56px; }

  .g4, .g3, .g2 { grid-template-columns: minmax(0, 1fr); }

  .col-a, .col-b, .col-c, .col-d,
  .col-ab, .col-bc, .col-bd, .col-cd, .col-all,
  .term, .desc, .span-2 { grid-column: 1; }

  .g4 { row-gap: 28px; }
  .site-footer { row-gap: 0; padding: 14px 0; }
  .nav { gap: 0 28px; }
  .benefits { row-gap: 36px; }

  /* Header: logo on the left, menu on the right, on one line. */
  .site-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 4px;
    padding: 14px 0 8px;
  }
  .site-header-row > .cell:first-child { padding-right: 0; }
  .site-header-row > .nav { margin-left: auto; padding-left: 0; }

  /* Once scrolled, the same line becomes compact. */
  .is-scrolled .site-header-row { padding: 6px 0; }
  .is-scrolled .site-header-row > .nav { gap: 0 20px; }
}

/* Phones: a tighter menu, and a slightly smaller compact logo, so both stay on one line. */
@media (max-width: 480px) {
  .site-header-row > .nav { gap: 0 20px; }
}
@media (max-width: 420px) {
  .site-header-row > .nav,
  .is-scrolled .site-header-row > .nav { gap: 0 14px; }
  .is-scrolled .brand img { width: 37px; height: 36px; }
}
@media (max-width: 380px) {
  .site-header-row > .nav { gap: 0 8px; }
}
@media (max-width: 365px) {
  .site-header-row > .nav { gap: 0 6px; }
}
@media (max-width: 340px) {
  .is-scrolled .site-header-row > .nav { gap: 0 9px; padding-right: 12px; }
  .is-scrolled .site-header-row > .cell:first-child { padding-left: 12px; }
}

@media (min-width: 640px) and (max-width: 1040px) {
  .g2, .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: 1 / -1; }
}

@media print {
  body, html { background: #fff; color: #000; }
  html::before, html::after, body::before, body::after { display: none; }
  .has-travelling-header .site-header { position: static; }
  .has-travelling-header body { padding-top: 0; }
  .nav, .skip { display: none; }
}