/* Cloud Hub Tech
   Palette: Ink, Fog, Steel, Gate green, Rule gray.
   One bold element: the pipeline gate log on the home page. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #15212c;
  --muted: #4a5866;
  --line: #d3dae1;
  --steel: #1c5a86;
  --steel-ink: #ffffff;
  --gate: #23704c;
  --log-bg: #15212c;
  --log-ink: #dfe7ee;
  --log-dim: #93a4b4;
  --log-pass: #7fd3a6;
  --focus: #c26a00;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
  --measure: 68ch;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e151c;
    --surface: #151f29;
    --ink: #e4ebf1;
    --muted: #a6b3bf;
    --line: #2a3845;
    --steel: #7db8e3;
    --steel-ink: #0e151c;
    --gate: #6cc79a;
    --log-bg: #0a1016;
    --log-ink: #dfe7ee;
    --log-dim: #8597a8;
    --log-pass: #7fd3a6;
    --focus: #ffb454;
  }
}

:root[data-theme="dark"] {
  --bg: #0e151c;
  --surface: #151f29;
  --ink: #e4ebf1;
  --muted: #a6b3bf;
  --line: #2a3845;
  --steel: #7db8e3;
  --steel-ink: #0e151c;
  --gate: #6cc79a;
  --log-bg: #0a1016;
  --log-ink: #dfe7ee;
  --log-dim: #8597a8;
  --log-pass: #7fd3a6;
  --focus: #ffb454;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

a {
  color: var(--steel);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  margin: 0 0 1rem;
  max-width: 22ch;
}

h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  margin: 0 0 0.75rem;
}

h3 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

ul,
ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.4rem;
}

pre,
code {
  font-family: var(--mono);
}

pre {
  overflow-x: auto;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 48rem) {
  .wrap {
    padding: 0 2rem;
  }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--ink);
  z-index: 10;
}

.skip:focus {
  top: 1rem;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

/* Logo mark: letters follow the text color, the crossbar uses the accent. */
.brand-mark {
  flex: none;
  width: 36px;
  height: 36px;
}

.brand-mark-accent {
  stroke: var(--gate);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.brand-desc {
  font-size: 0.85rem;
  color: var(--muted);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--line);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--steel);
  font-weight: 600;
}

/* Main */

main {
  display: block;
}

.section {
  padding: 2.5rem 0;
}

@media (min-width: 48rem) {
  .section {
    padding: 3.5rem 0;
  }
}

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

.lead {
  font-size: 1.2rem;
  color: var(--muted);
}

/* Keeps a hyphenated phrase on one line. */
.nowrap {
  white-space: nowrap;
}

/* Short line above the hero heading, in sentence case. */
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--steel);
}

.page-head {
  padding: 2.5rem 0 1rem;
}

@media (min-width: 48rem) {
  .page-head {
    padding: 4rem 0 1.5rem;
  }
}

.page-head p {
  font-size: 1.2rem;
  color: var(--muted);
}

/* Hero with the gate log */

.hero {
  display: grid;
  gap: 2rem;
  padding: 2.5rem 0;
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    padding: 4.5rem 0;
  }
}

.gatelog {
  margin: 0;
  background: var(--log-bg);
  color: var(--log-ink);
  border-left: 6px solid var(--log-pass);
  border-radius: 4px;
  padding: 1.1rem 1.1rem 0.9rem;
}

.gatelog pre {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
}

.gatelog .k {
  color: var(--log-dim);
}

.gatelog .ok {
  color: var(--log-pass);
  font-weight: 700;
}

.gatelog figcaption {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(147, 164, 180, 0.3);
  font-size: 0.85rem;
  color: var(--log-dim);
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  background: var(--steel);
  color: var(--steel-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.3;
}

.button:hover {
  filter: brightness(1.1);
}

/* Lists of services and industries */

.items {
  display: grid;
  gap: 1.75rem 3rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (min-width: 48rem) {
  .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.items li + li {
  margin-top: 0;
}

.items h3 a {
  color: var(--ink);
  text-decoration-color: var(--steel);
}

.items p {
  margin: 0;
  color: var(--muted);
}

/* Tools band. Light and neutral in both themes, with its own tokens.
   One row per category: label on the left, same-size tiles on the right
   (label on top below 900px). Logos keep their brand colors and fit a 40px
   tall box. */

.tools-band {
  --band-bg: #eef1f4;
  --band-tile: #ffffff;
  --band-line: #d9dfe5;
  --band-ink: #15212c;
  --band-muted: #4a5866;
  --band-accent: #1c5a86;
  --band-accent-ink: #ffffff;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: 2rem 0 1rem;
}

.tools-band h2 {
  margin-bottom: 1rem;
}

/* Feature banner at the top of the band: accent background, white text,
   three short points with a CSS-drawn check mark. */
.tools-feature {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--band-accent);
  color: var(--band-accent-ink);
  border-radius: 12px;
}

.tools-feature p {
  max-width: 70ch;
  margin: 0;
}

.tools-feature-title {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.tools-feature .tools-feature-text {
  margin-top: 0.6rem;
  font-size: 18px;
  line-height: 1.5;
}

.tools-feature-points {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
  font-size: 15px;
  font-weight: 600;
}

.tools-feature-points li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tools-feature-points li + li {
  margin-top: 0;
}

.tools-feature-points li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 11px;
  margin: 0 3px 3px 4px;
  border-right: 2px solid var(--band-accent-ink);
  border-bottom: 2px solid var(--band-accent-ink);
  transform: rotate(45deg);
}

.tool-row {
  padding: 6px 0;
  border-top: 1px solid var(--band-line);
}

.tool-label {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--band-ink);
}

.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.tools li + li {
  margin-top: 0;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 72px;
  padding: 6px;
  background: var(--band-tile);
  border: 1px solid var(--band-line);
  border-radius: 10px;
}

.tool:hover {
  border-color: #aeb9c4;
}

.tool img {
  display: block;
  width: 80%;
  height: 30px;
  object-fit: contain;
}

.tool-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--band-ink);
}

@media (min-width: 640px) {
  .tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tools-feature {
    padding: 1.5rem 1.75rem 1.35rem;
  }

  .tools-feature-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
  }
}

@media (min-width: 900px) {
  .tools-band {
    padding: 2.5rem 0 1rem;
  }

  .tool-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 8px 0;
  }

  .tool-label {
    font-size: 0.95rem;
  }

  .tool-label {
    margin: 0;
  }

  .tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tool {
    flex: 0 0 112px;
    height: 96px;
    gap: 8px;
    padding: 8px 6px;
  }

  .tool img {
    height: 40px;
  }
}

/* Experience */

.jobs {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0 0;
}

.job {
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  max-width: var(--measure);
}

.job:first-child {
  border-left-color: var(--gate);
}

.job p {
  margin: 0;
}

.job .meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* Skills */

.skills {
  display: grid;
  gap: 0.25rem 1.5rem;
  max-width: 52rem;
}

@media (min-width: 40rem) {
  .skills {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

.skills dt {
  font-weight: 700;
}

.skills dd {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

/* Steps and notes */

.steps li {
  padding-left: 0.25rem;
}

.note {
  max-width: var(--measure);
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.note p:last-child {
  margin-bottom: 0;
}

/* Call to action */

.cta {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.cta .wrap {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.cta p {
  font-size: 1.15rem;
}

.related {
  margin-top: 2rem;
  color: var(--muted);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer .wrap {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.site-footer p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Motion. Everything that moves lives here, and only transform and opacity
   are animated. Hidden starting states exist only inside this block, so
   with "reduce motion" or without support the content is simply visible.
   Nothing in the hero animates: it is visible from the first frame. */
@media (prefers-reduced-motion: no-preference) {
  /* Banner checks: one after another on load. */
  .tools-feature-points li {
    animation: point-in 0.35s ease-out both;
  }

  .tools-feature-points li:nth-child(1) { animation-delay: 0.2s; }
  .tools-feature-points li:nth-child(2) { animation-delay: 0.4s; }
  .tools-feature-points li:nth-child(3) { animation-delay: 0.6s; }

  @keyframes point-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Hover and focus: a small lift. */
  .button,
  .tool,
  .items li {
    transition: transform 0.15s ease;
  }

  .button:hover,
  .button:focus-visible {
    transform: translateY(-1px);
  }

  .tool:hover,
  .tool:focus-within,
  .items li:hover,
  .items li:focus-within {
    transform: translateY(-2px);
  }

  /* Sections fade and slide in as they scroll into view. */
  @supports (animation-timeline: view()) {
    main .section,
    .tool-row,
    .cta .wrap {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    @keyframes reveal {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}