/* cloudstart.cc one-pager. Tokens live in tokens.css. */

/* Montserrat v9.000 (OFL), Latin subset built by tools/build_fonts.sh. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/montserrat-roman-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/montserrat-italic-latin.woff2") format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; }
/* Sticky header height + breathing room, so anchor jumps and keyboard focus
   never land underneath it (WCAG 2.2 SC 2.4.11). */
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  /* Splits only a word wider than its whole line: 200% text at 320 px (WCAG 1.4.4).
     At normal sizes no word needs it (mid-word check, 320-1920 px, 30 Oct 2026). */
  overflow-wrap: break-word;
  /* Short pages (404) keep the navy footer on the viewport floor. */
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }

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

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-size: var(--step-3); font-weight: 800; }
h2 { font-size: var(--step-2); font-weight: 750; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 var(--space-2); max-width: var(--measure); text-wrap: pretty; }  /* no one-word last lines */
/* Last block in a container shouldn't add trailing space on top of the section padding. */
.container > :last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--coral); }

/* Coral fails 3:1 against Off-White, so light grounds get a navy ring (SPEC D14). */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.contact :focus-visible { outline-color: var(--coral); }

.container { width: calc(100% - 2 * var(--space-3)); max-width: var(--container); margin-inline: auto; }

.skip-link {
  position: absolute; left: var(--space-2); top: -4rem;
  padding: var(--space-1) var(--space-2);
  background: var(--navy); color: var(--off-white); z-index: 10;
}
.skip-link:focus { top: var(--space-2); }  /* inherits the navy ring: it sits on the off-white header */

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--off-white); border-bottom: 1px solid var(--slate);
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  /* At 320 px the wordmark (162 px) + 0.5rem + button (100 px) fit 272 px with 2 px to spare,
     so the bar wraps only when text is enlarged (WCAG 1.4.4). Measured 30 Oct 2026. */
  gap: var(--space-1); padding-block: 0.75rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.brand__mark { width: 32px; }
.brand__name { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.site-nav ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.site-nav a:not(.button) {
  display: inline-block; padding-block: 0.25rem;
  font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent;
}
.site-nav a:not(.button):hover { border-bottom-color: var(--coral); }
/* Phones: keep the sticky bar to one row (logo + CTA); the page is one scroll. */
@media (max-width: 40rem) {
  .site-nav li:not(:last-child) { display: none; }
}

/* Buttons: navy block with a coral accent rule. Coral never sits behind text. */
.button {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  background: var(--navy); color: var(--off-white);
  /* anywhere (not break-word) also lowers min-content, so the email can wrap at 200% text */
  font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 4px solid var(--coral);
}
.button:hover { border-bottom-width: 6px; margin-bottom: -2px; }
.button--small { padding: 0.5rem 0.9rem; border-bottom-width: 3px; }
.button--small:hover { border-bottom-width: 5px; }

/* Hero */
.hero { padding-block: var(--space-4); }
.hero__inner { display: grid; gap: var(--space-4); align-items: center; }
.hero__copy { min-width: 0; }  /* grid items default to min-content; let long words break instead */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
  color: var(--slate-ink); margin-bottom: var(--space-3);
}
.eyebrow::after { content: ""; display: block; width: 2.5rem; height: 4px; margin-top: 0.75rem; background: var(--coral); }
.hero__lede { font-size: var(--step-1); line-height: 1.5; margin-bottom: var(--space-3); }
.hero__mark { width: min(100%, 22rem); justify-self: center; }
@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 1.4fr 1fr; }
  .hero__mark { justify-self: end; }
}

/* Sections */
.section { padding-block: var(--space-4) var(--space-3); }
.lead { font-size: var(--step-1); line-height: 1.5; }

/* Services */
.services {
  display: grid; gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin: var(--space-4) 0 0; padding: 0; list-style: none;
}
/* Subgrid: head (icon + heading), body, and deliverable share row tracks across a
   row of cards, so a longer heading shifts the whole row rather than one card. */
.service {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr); min-width: 0;  /* card column may not outgrow the card */
  align-content: start; border-top: 1px solid var(--slate); padding-top: var(--space-3);
}
.service > * { margin: 0; }
.service__head { display: flex; align-items: center; gap: var(--space-2); }
.service__head h3 { min-width: 0; }  /* may shrink at 200% text; at normal sizes every word fits (checked 320-1920) */
/* Phones: 0.5rem keeps "implementation" (163 px) whole beside the 96 px icon at 320 px. */
@media (max-width: 40rem) { .service__head { gap: var(--space-1); } }
.service__head h3 { margin: 0; }
.service__icon { width: 96px; height: 96px; flex: none; }
.service p { font-size: var(--step--1); }
.service__deliverable { color: var(--slate-ink); font-style: italic; }

/* Engagement table */
.table-wrap { overflow-x: auto; margin-block: var(--space-3); }
.engage { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--step--1); }
.engage th, .engage td { text-align: left; vertical-align: top; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--slate); }
.engage thead th {
  font-family: var(--font-mono); font-weight: 600; color: var(--slate-ink);
  border-bottom: 2px solid var(--navy);
}
.engage tbody th { font-weight: 700; white-space: nowrap; }
/* One-line notes: the 68ch measure is in the note's smaller ch, which wrapped them early. */
.note { max-width: none; }
.note::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.6rem; background: var(--coral); }

/* Contact: navy ground, so coral may carry the accent at full strength. */
.contact { background: var(--navy); color: var(--off-white); padding-block: var(--space-5); }
.contact h2 { color: var(--off-white); }
.contact p { color: var(--slate); font-size: var(--step-1); }
.contact__email {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em;
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 4px;
  overflow-wrap: anywhere;
}
.contact__email:hover { color: var(--coral); }

/* Footer */
.site-footer { background: var(--navy); color: var(--slate); border-top: 1px solid var(--slate-ink); }
.site-footer__inner { display: flex; justify-content: flex-end; padding-block: var(--space-3); }
.site-footer small { font-size: var(--step--1); }