/* ICT9 LTD - stage 1 stylesheet: a close copy of the former Wix design.
   Type scale measured from the Wix site.  Geist stands in for Wix's Aktiv Grotesk:
   weight 100 = hairline, 150 = thin, 250 = light, 550 = medium. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #e21c21;
  --text: #757575;
  --black: #000;
  --grey-band: #f5f6f7;
  --line: #dcdcdc;
  --column: 900px;
  --wide: 1000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 150;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text);
  background: #fff;
}

strong, b { font-weight: 550; }

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--red); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; }

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

/* The header stays at the top of the window while the page scrolls, as on the Wix site. */
.site-header { position: sticky; top: 0; z-index: 30; background: #fff; }
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 70px 16px 0;
  min-height: 160px;
}

.menu-button { padding: 0; margin-top: 4px; border: 0; background: none; cursor: pointer; }
.menu-button img { display: block; width: 66px; height: 66px; }

.contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.remote-assist {
  align-self: stretch;
  text-align: center;
  padding: 5px 18px;
  border: 2px solid #8a8a8a;
  border-radius: 22px;
  color: #6e6e6e;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.remote-assist:hover { border-color: var(--red); color: var(--red); }

.contact-line { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.contact-line img { width: 24px; height: 24px; flex: none; }
.contact-line small { display: block; font-size: 14px; font-weight: 250; line-height: 1.1; }
.contact-number { font-size: 22px; font-weight: 250; letter-spacing: 0.02em; }

/* Slide-out menu -------------------------------------------------------- */

.site-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 256px;
  overflow-y: auto;
  padding: 50px 20px 30px;
  background: #f7f7f7;
  text-align: center;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}
.site-nav[hidden] { display: none; }
.nav-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid #555;
  border-radius: 50%;
  background: transparent;
  font-size: 26px;
  line-height: 30px;
  color: #555;
  cursor: pointer;
}
.nav-logo img { width: 130px; height: 130px; border-radius: 50%; background: #fff; }
.site-nav ul { list-style: none; margin: 40px 0 0; padding: 30px 0 0; border-top: 1px solid #555; }
.site-nav li { margin: 0 0 18px; }
.site-nav a { color: #555; font-size: 18px; font-weight: 450; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.nav-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.25); }
.nav-overlay[hidden] { display: none; }

/* Content --------------------------------------------------------------- */

main { padding-bottom: 50px; }

/* Every top-level block sits in a centred column unless it is a full-width band. */
main > * { max-width: var(--column); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
main > .wide { max-width: var(--wide); }

h1, h2, h3, h4 { margin: 1.1em auto 0.45em; line-height: 1.1; }
h1 { font-size: 67px; font-weight: 100; color: var(--black); }
h2 { font-size: 60px; font-weight: 150; color: var(--text); }

/* The home page uses a slightly narrower column, as on the Wix site. */
.page-index main > :not(.band) { max-width: 820px; }
.page-index main > ul { padding-left: 92px; }
h3 { font-size: 38px; font-weight: 100; color: var(--black); }
h4 { font-size: 20px; font-weight: 550; color: var(--text); margin: 1em auto 0.3em; }
h1 strong, h2 strong, h3 strong { font-weight: 550; color: var(--red); }

.red { color: var(--red); }
.center { text-align: center; }
.small { font-size: 14px; }

p { margin-top: 0; margin-bottom: 1em; }
ul, ol { padding-left: 1.3em; margin-top: 0; margin-bottom: 1em; }
li { margin: 0 0 0.35em; }
li > ul, li > ol { margin-top: 0.35em; }

/* Full-width image band with the slow "parallax" slide that Wix used: the photo moves at a fifth
   of the scroll speed.  It is a CSS scroll-driven animation, so the browser moves the photo in step
   with its own scrolling.  Browsers without support (and reduced-motion users) get a still photo. */
:root { --band-h: clamp(220px, 46vw, 450px); }
main > .band { max-width: none; padding: 0; margin: 2.5em 0; }
.band { position: relative; overflow: hidden; height: var(--band-h); view-timeline-name: --band; }
.band p { margin: 0; height: 100%; }
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band img {
      position: absolute;
      top: 0;
      left: 0;
      height: max(100vh, 100%);
      animation: band-slide linear both;
      animation-timeline: --band;
      animation-range: cover;
    }
  }
}

/* The band's top edge moves from the bottom of the window (100vh) to just above the top
   (minus its own height); the photo is offset by -0.8 x that position. */
@keyframes band-slide {
  from { transform: translateY(calc(-0.8 * 100vh)); }
  to { transform: translateY(calc(0.8 * var(--band-h))); }
}

/* Full-width grey band with its content kept in the centred column. */
main > .grey {
  max-width: none;
  background: var(--grey-band);
  padding: 30px max(20px, calc((100% - var(--column)) / 2 + 20px));
}

/* Image or logo on one side, text on the other. */
.split { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; margin: 2em auto; }
.split .col > p > img:only-child { display: block; margin: 0 auto; }
.split > :first-child img { max-height: 110px; width: auto; max-width: 200px; }
.split p:last-child { margin-bottom: 0; }
.split h2:first-child, .split h3:first-child { margin-top: 0; }
.split.photo { grid-template-columns: 1fr 1fr; }
.split.photo > :first-child img { max-height: none; max-width: 100%; }
.split.reverse > :first-child { order: 2; }

/* Page furniture -------------------------------------------------------- */

.hero h1 { font-size: 48px; font-weight: 150; line-height: 1.26; color: var(--text); margin-top: 0.3em; }
.hero-logo { width: 275px; }
.hero-logo-small { width: 140px; }
.page-logo { display: block; width: 130px; margin-top: 10px; }
.tagline { display: block; margin: 1em 0 0.5em; color: var(--red); font-weight: 550; font-size: 27px; }
.subtitle { display: block; margin: -0.2em 0 1em; font-size: 32px; font-weight: 100; line-height: 1.25; color: var(--black); }

.title-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.title-row h1 { margin-bottom: 0.3em; }
.title-row p { margin: 1em 0 0; }
.title-logo { max-height: 70px; width: auto; }

.small-logo { max-height: 60px !important; width: auto; }
.portrait { max-height: 420px; width: auto; }
.dark-strip { background: #000; text-align: center; padding: 18px 20px !important; margin-top: 0; }
.dark-strip p { margin: 0; }
.dark-strip img { max-height: 40px; width: auto; }

.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; margin: 1.5em auto; }
.logo-row img { max-height: 90px; width: auto; }

/* Numbered statements (mission statement). */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 2em; }
.number {
  display: block;
  width: 60px;
  margin: 0 auto 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--text);
  text-align: center;
  font-size: 80px;
  font-weight: 550;
  line-height: 1;
  color: var(--red);
}

/* Microsoft 365 price columns. */
main > .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; text-align: center; margin-top: 2em; }
.plans h3 { margin-top: 0.4em; }
.plan { padding: 10px 0; display: flex; flex-direction: column; }
.plan > p:last-child { margin-top: auto; }
.price { display: block; color: var(--red); font-size: 29px; font-weight: 550; font-style: italic; margin-top: 1em; }
.per { display: block; font-size: 15px; }
.plan-details { font-size: 14px; padding: 10px 0 20px; }
.plan-details.span2 { grid-column: span 2; }

/* Support plans: four tinted columns. */
main > .plans-list { max-width: var(--wide); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2em auto; }
.plan-card { padding: 30px 18px; font-size: 12px; }
.plan-card:nth-child(1) { background: #f8f8f8; }
.plan-card:nth-child(2) { background: #eef0f3; }
.plan-card:nth-child(3) { background: #f0f3f0; }
.plan-card:nth-child(4) { background: #f3eeee; }
.plan-card h3 { text-align: center; margin: 0 0 1em; color: var(--black); }
.plan-card ul { padding-left: 1.5em; }

/* Core products vendor rows. */
.vendor { margin: 0 auto; padding-top: 30px; padding-bottom: 30px; }
.vendor > :first-child img { max-height: 90px; max-width: 170px; }

/* Contact details with icons. */
.page-contact h1 { font-size: 60px; }
.contact-logo { width: 240px; margin: 0.5em 0 0.5em 30px; }
.contact-list p { margin: 0 0 12px; }
.contact-list a { display: inline-flex; align-items: flex-start; gap: 12px; text-decoration: none; }
.contact-list img { width: 22px; height: 22px; margin-top: 3px; flex: none; }
.page-contact h3 { font-size: 30px; font-weight: 150; }

/* Per-page heading sizes taken from the Wix site. */
.page-jobs h2 { font-size: 44px; font-weight: 250; }
.page-perimeter-81 h2 { font-size: 31px; }

/* Tables: grey header row; scroll sideways on small screens. */
.table-wrap { overflow-x: auto; margin: 1.5em auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid #7f7f7f; }
th, td { text-align: left; vertical-align: middle; padding: 12px 16px; }
th { background: #7f7f7f; color: #fff; font-size: 15px; font-weight: 550; }
td { border-bottom: 1px solid #7f7f7f; color: #333; font-weight: 250; }
td[style*="right"], th[style*="right"] { white-space: nowrap; }

/* Glossary (acronyms page). */
.glossary dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 20px; }
.glossary dt { font-weight: 550; color: var(--red); }
.glossary dd { margin: 0; }

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

.site-footer {
  display: grid;
  grid-template-columns: 83px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 30px max(20px, calc((100% - var(--wide)) / 2 + 60px)) 40px;
  font-size: 18px;
  line-height: 1.3;
  border-top: 2px solid var(--red);
}
.site-footer img { width: 70px; height: 70px; grid-row: span 4; }
.site-footer p { margin: 0; }
.site-footer p:last-child { font-size: 15px; margin-top: 0.3em; }

/* Small screens --------------------------------------------------------- */

@media (max-width: 900px) {
  main > .plans-list { grid-template-columns: repeat(2, 1fr); }
  .plan-card { font-size: 14px; }
}

@media (max-width: 700px) {
  body { font-size: 18px; }
  h1 { font-size: 42px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
  .hero h1 { font-size: 32px; }
  .subtitle { font-size: 24px; }
  .tagline { font-size: 22px; }
  .page-contact h1 { font-size: 42px; }
  .page-jobs h2 { font-size: 32px; }
  h1 br, h2 br { display: none; }
  .hero-logo { width: 200px; }
  .site-header { position: static; }
  .header-inner { padding: 10px 14px 10px 80px; min-height: 120px; }
  .menu-button { position: fixed; left: 8px; top: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
  .menu-button img { width: 56px; height: 56px; }
  .contact-number { font-size: 18px; }
  .split, .split.photo { grid-template-columns: 1fr; gap: 16px; }
  .split.reverse > :first-child { order: 0; }
  .cols3, main > .plans, main > .plans-list { grid-template-columns: 1fr; }
  .plan-details.span2 { grid-column: auto; }
  .glossary dl { grid-template-columns: 80px 1fr; }
  .site-footer { padding-left: 20px; font-size: 15px; }
  .page-index main > ul { padding-left: 40px; }
}