/* Custom Security Training: static rebuild of the Wix site */
:root {
  --navy: #0C3C60;
  --steel: #39729B;
  --footer: #6498BE;
  --tile-1: #438CA3;
  --tile-2: #39729B;
  --tile-3: #6498BE;
  --tile-4: #313E4F;
  --num-1: #1EABC7;
  --num-2: #39729B;
  --num-3: #6EA4CA;
  --num-4: #324158;
  --light: #FAFAFA;
  --card: #F9F9F9;
  --gray-text: #6F6F6F;
  --header-h: 108px;
  --raleway: 'Raleway', Arial, sans-serif;
  --open: 'Open Sans', Arial, sans-serif;
  --light-font: 'Nunito Sans', 'Open Sans', Arial, sans-serif;
  --wide: 'Montserrat', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; background: #fff; color: #222; font-family: var(--open); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: var(--navy); padding: 8px 14px; }
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #F2A516; outline-offset: 2px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--navy); display: flex; align-items: center; justify-content: center; text-align: center; }
.brand { text-decoration: none; color: #fff; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.brand-small { font-family: var(--raleway); font-size: 18px; letter-spacing: .5px; }
.brand-large { font-family: var(--raleway); font-size: 54px; font-weight: 400; letter-spacing: .5px; }

/* Buttons */
.btn { display: inline-block; background: var(--steel); color: #fff; font-family: var(--open); font-size: 16px; line-height: 1; padding: 11px 22px; text-decoration: none; border: 2px solid var(--steel); transition: background .2s, color .2s; }
.btn:hover { background: var(--navy); border-color: var(--navy); }
.btn-outline { background: transparent; color: var(--steel); }
.btn-outline:hover { background: var(--steel); color: #fff; border-color: var(--steel); }

/* Heading strips */
.strip { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 8px 16px; text-align: center; }
.strip h1, .strip h2 { font-family: var(--raleway); font-weight: 700; font-size: 47px; line-height: 1.1; color: var(--navy); }

/* Hero */
.hero { position: relative; height: 680px; overflow: hidden; background: #c9c3b4; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero .strip { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.7); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.tile { min-height: 450px; padding: 50px 28px 40px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tile img { width: 118px; height: 118px; margin-bottom: 26px; }
.tile h2 { font-family: var(--wide); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 26px; }
.tile p { font-family: var(--light-font); font-weight: 300; font-size: 16px; line-height: 1.6; max-width: 230px; }
.tile-1 { background: var(--tile-1); } .tile-2 { background: var(--tile-2); }
.tile-3 { background: var(--tile-3); } .tile-4 { background: var(--tile-4); }

/* New Normal */
.strip-plain { background: #fff; }
.nn-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 652px; }
.nn-photo { width: 100%; height: 100%; object-fit: cover; }
.nn-text { background: var(--steel); color: #fff; padding: 56px 40px 48px; font-family: var(--light-font); font-weight: 300; font-size: 17px; line-height: 1.55; }
.nn-text .nn-areas { font-family: var(--raleway); font-weight: 700; font-size: clamp(30px, 3.6vw, 47px); line-height: 1.05; text-align: center; margin: 0 -34px 36px; }
.nn-text p + p, .nn-text ul + p { margin-top: 22px; }
.nn-text ul { margin-top: 22px; padding-left: 22px; }
.nn-text li + li { margin-top: 4px; }

/* Demo modules */
.demos { background: var(--light); padding: 40px 24px 70px; text-align: center; }
.demos h2 { font-family: var(--raleway); font-weight: 600; font-size: 40px; color: #292929; }
.demos-intro { font-family: var(--raleway); font-size: 15px; line-height: 1.6; color: #000; max-width: 900px; margin: 30px auto 50px; text-align: left; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 980px; margin: 0 auto; align-items: end; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.devices { position: relative; width: 100%; }
.devices-1 { max-width: 371px; aspect-ratio: 371 / 344; }
.devices-1 img { position: absolute; }
.d-monitor { left: 1.6%; top: 0; width: 89.8%; }
.d-tablet { left: 67.1%; top: 51.5%; width: 32.9%; }
.d-phone { left: 0; top: 74.7%; width: 46.4%; }
.devices-2 { max-width: 476px; aspect-ratio: 476 / 277; }
.devices-2 img { position: absolute; }
.d-laptop { inset: 0; width: 100%; height: 100%; }
.d-screen { z-index: 1; left: 13.9%; top: 12.6%; width: 72.5%; height: 70.4%; object-fit: cover; }

/* How does it work */
.how { padding-bottom: 80px; }
.how .strip h2 { font-weight: 400; font-size: 59px; }
.steps { list-style: none; padding: 0 24px; margin: 26px auto 0; max-width: 1028px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { position: relative; aspect-ratio: 400 / 704; max-width: 250px; width: 100%; margin: 0 auto; background: center / 100% 100% no-repeat; color: #fff; text-align: center; }
.step-1 { background-image: url(/assets/img/step-1.png); } .step-2 { background-image: url(/assets/img/step-2.png); }
.step-3 { background-image: url(/assets/img/step-3.png); } .step-4 { background-image: url(/assets/img/step-4.png); }
.step-num { position: absolute; left: 0; right: 0; top: 18.5%; transform: translateY(-50%); font-family: var(--raleway); font-size: 70px; line-height: 1; }
.step-1 .step-num { color: var(--num-1); } .step-2 .step-num { color: var(--num-2); }
.step-3 .step-num { color: var(--num-3); } .step-4 .step-num { color: var(--num-4); }
.step p { position: absolute; left: 10%; right: 10%; top: 43%; font-family: var(--raleway); font-size: 16px; line-height: 1.4; }

/* Contact */
.contact { background: var(--navy); color: #fff; padding: 50px 24px 80px; text-align: center; }
.contact h2 { font-family: var(--raleway); font-weight: 400; font-size: 60px; line-height: 1.1; }
.contact-intro { font-family: var(--open); font-size: 18px; margin: 18px 0 40px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
.card { background: var(--card); color: #333; display: flex; gap: 24px; align-items: flex-start; padding: 28px; text-align: left; }
.card-photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; flex: none; }
.card h3 { font-family: var(--raleway); font-weight: 600; font-size: 24px; letter-spacing: 1px; color: #333; }
.card-role { font-family: var(--raleway); font-size: 18px; color: var(--steel); margin-bottom: 14px; }
.card-info { font-family: var(--raleway); font-size: 15px; line-height: 1.5; color: var(--gray-text); overflow-wrap: break-word; }
.card-info a { color: var(--gray-text); }
.card-info a:hover { color: var(--navy); }
.card-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.card-btns .btn { font-size: 15px; padding: 10px 18px; }

/* Footer */
.site-footer { background: var(--footer); color: #fff; min-height: 95px; display: flex; align-items: center; justify-content: center; padding: 20px 16px; text-align: center; }
.site-footer p { font-family: var(--open); font-weight: 700; font-size: 14px; }

/* About page */
.page-head { text-align: center; padding: 50px 24px 0; }
.page-head h1 { font-family: var(--raleway); font-weight: 400; font-size: 64px; letter-spacing: 4px; color: var(--navy); line-height: 1.1; }
.page-head .rule { width: 90px; height: 4px; background: var(--navy); margin: 18px auto 20px; border: 0; }
.page-head p { max-width: 680px; margin: 20px auto 0; font-size: 15px; color: #333; }
.bios { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 980px; margin: 60px auto 90px; padding: 0 24px; }
.bio-head { display: flex; align-items: stretch; background: var(--navy); color: #fff; margin-bottom: 40px; }
.bio-head img { width: 120px; height: 120px; object-fit: cover; flex: none; }
.bio-head div { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.bio-head h2 { font-family: var(--raleway); font-weight: 400; font-size: 24px; line-height: 1.2; }
.bio-head p { font-family: var(--raleway); font-size: 18px; }
.bio-text { font-size: 14px; line-height: 1.6; color: #333; }
.bio-text p + p, .bio-text p + ul { margin-top: 18px; }
.bio-text ul { padding-left: 20px; }
.bio-text li + li { margin-top: 6px; }
.bio-text a { color: var(--steel); overflow-wrap: anywhere; }
.bio-text a:hover { color: var(--navy); }
.bio-contact { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.bio-contact .btn { font-size: 15px; padding: 10px 18px; }

/* 404 */
.notfound { text-align: center; padding: 90px 24px 110px; }
.notfound h1 { font-family: var(--raleway); font-weight: 400; font-size: 54px; color: var(--navy); }
.notfound p { margin: 16px 0 30px; color: #333; }
.notfound .btn + .btn { margin-left: 10px; }

/* Tablet */
@media (max-width: 1000px) {
  :root { --header-h: 84px; }
  .brand-small { font-size: 14px; }
  .brand-large { font-size: 36px; }
  .hero { height: 480px; }
  .strip h1, .strip h2 { font-size: 34px; }
  .how .strip h2 { font-size: 42px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 0; padding: 44px 24px; }
  .nn-grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .nn-text { grid-column: 1 / -1; grid-row: 1; padding: 44px 32px; }
  .nn-text .nn-areas { font-size: 38px; margin: 0 0 30px; }
  .nn-photo { height: 340px; }
  .steps { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .step p { font-size: 15px; }
  .cards { grid-template-columns: 1fr; max-width: 560px; }
  .contact h2 { font-size: 46px; }
  .bios { gap: 40px; }
  .page-head h1 { font-size: 50px; }
}

/* Phone */
@media (max-width: 760px) {
  :root { --header-h: 66px; }
  .brand-small { font-size: 11px; }
  .brand-large { font-size: 19px; white-space: nowrap; }
  .hero { height: 300px; }
  .hero-img { object-position: 12% 50%; }
  .strip { min-height: 64px; }
  .strip h1, .strip h2 { font-size: 24px; }
  .how .strip h2 { font-size: 30px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { padding: 36px 24px; }
  .tile img { width: 96px; height: 96px; margin-bottom: 18px; }
  .tile h2 { margin-bottom: 14px; }
  .tile p { max-width: 320px; }
  .nn-text { padding: 36px 22px; font-size: 16px; }
  .nn-text .nn-areas { font-size: 30px; margin-bottom: 26px; }
  .nn-photo { height: 220px; }
  .demos h2 { font-size: 30px; }
  .demos-intro { margin: 20px auto 36px; }
  .demo-grid { grid-template-columns: 1fr; gap: 56px; }
  .steps { gap: 20px 14px; padding: 0 16px; }
  .step-num { font-size: 52px; }
  .step p { font-size: 13px; left: 8%; right: 8%; }
  .contact { padding: 40px 16px 56px; }
  .contact h2 { font-size: 36px; }
  .card { flex-direction: column; align-items: center; text-align: center; padding: 26px 20px; }
  .card-photo { width: 130px; height: 130px; }
  .card-btns { justify-content: center; }
  .page-head h1 { font-size: 40px; }
  .bios { grid-template-columns: 1fr; margin: 40px auto 60px; padding: 0 16px; }
  .bio-head img { width: 96px; height: 96px; }
  .bio-head h2 { font-size: 21px; }
  .bio-head p { font-size: 16px; }
  .notfound h1 { font-size: 38px; }
}

@media (max-width: 359px) {
  .brand-large { font-size: 16px; }
  .steps { grid-template-columns: 1fr; max-width: 230px; }
  .step-num { font-size: 60px; }
  .step p { font-size: 15px; }
}