/* Copyright, 2026. All rights reserved. */

/* http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/**
 * Variables
 */ 
:root {
  --white: #fff;
  --blue: #86D4F9;
  --ltcoral: #EC624F;
  --coral: #C55244;
  --gray: #424242;
  --black: #181818;
}

/**
 * Colors
 */
.no-vis { color: var(--blue); }
body { background-color: var(--gray); color: var(--white); }
nav { background-color: var(--white); color: var(--black); }
#title { background: var(--black) url("bg.jpg"); background-size: cover; background-attachment: fixed; 
  color: var(--white); }
#tech-trends { background-color: var(--black); color: var(--white); }
#summary { background-color: var(--coral); color: var(--white); }
#terms { background-color: var(--white); color: var(--black); }
#context { background-color: var(--gray); color: var(--white); }
#capabilities { background-color: var(--gray); color: var(--white); }
#risks { background-color: var(--gray); color: var(--white); }
#strategy { background-color: var(--coral); color: var(--white); }
#conclusion { background-color: var(--black); color: var(--white); }
#conclusion a { color: var(--blue); }
#references { background-color: var(--white); color: var(--black); }


/**
 * Typography
 */ 
body { font: 1rem/1.5 Helvetica, Arial, sans-serif; }
header a { color: var(--white); text-decoration: none; }
h1 { font-size: 3rem; line-height: 1 }
h1 .subtitle { font-size: 2rem; color: var(--ltcoral); }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4, h5, h6 { font-size: 1.2rem; }
h3 { color: var(--ltcoral); }
p, blockquote, ol, ul { font-size: 1.333rem; }
nav ul { font-size: 1.2rem; }
blockquote { border-left: 10px solid var(--ltcoral); }
figcaption { font-size: 1.2rem; }
em { font-style: italic; }
ol { list-style-type: decimal; }

/**
 * Layout
 */
h1, h2, h3, h4, h5, h6, p, blockquote, img, figcaption, ol, ul { padding: 1.2rem; margin: 0 0.5rem; }
ol { padding-left: 2rem; margin-left: 1rem; }
h1, h2, h3 { padding-top: 2em; padding-bottom: 0; }
h1 { padding-top: 2em; }
p, ol, ul { width: 85vw; }
blockquote { width: 77vw; }
header p { margin-left: 1rem; }
nav { position: sticky; top: 0; width: 100%; opacity: 0.90; z-index: 9999 }
nav ul { width: 100%; display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
nav ul li { padding: 10px; }
img { width: 75vw; }
figcaption { padding-top: 0; text-align: center; }
section { padding-bottom: 3rem; }
.no-vis { display: block; position: absolute; text-indent: -9999px; }

/**
 * Sections 
 */
#strategy blockquote { border-color: var(--gray) }
#strategy h3 { color: var(--black) }
#capabilities .grid { display: flex; flex-wrap: wrap; width: 90vw; }
#capabilities div { width: 85vw; padding: 0 35px 0 0; flex: 0 0 85vw; }
#capabilities div p { width: 100%; }
#references p { font-size: 1rem }

/* Desktop breakpoint */
@media (min-width: 1024px) {
  h1 { font-size: 7rem; line-height: 0.9 }
  h1 .subtitle { font-size: 5rem; }
  h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, img, figcaption { margin: 0 3rem; }
  nav ul li { padding: 10px 15px; }
  p, blockquote, ol, ul { width: 55vw; }
  blockquote { font-size: 2rem; margin-left: 4rem; }
  section { min-height: 100vh; }
  #capabilities div { width: 40vw; flex: 0 0 40vw; }
}

/**
 * Visual polish
 */ 
html { scroll-behavior: smooth; }

/* Fade-in effect */
.reveal { opacity: 0; transform: translateX(-30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Active nav */ 
nav li { transition: background-color 0.3s ease; }
nav li:has(a.active), 
nav li:has(a:focus) { background-color: var(--coral); }
nav a.active { color: var(--white); text-decoration: none; }

/* Image hover */ 
figure img { transition: transform 0.3s ease; }
figure:hover img { transform: scale(1.05); }