@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  [hidden] { display: none !important; }
}

@layer base {
  /* Same type and blue as skydomeconsulting.com, so the lab reads as part of the company. */
  @font-face { font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url('fonts/Archivo.woff2') format('woff2'); }
  @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/DMSans.woff2') format('woff2'); }
  :root {
    --ink:#0b1a33; --muted:#52607a; --paper:#fff; --mist:#f3f6fb; --line:#d8dfea; --line-strong:#b3bece;
    --blue:#0063c9; --blue-dark:#004b9a; --sky:#e6f0fb; --navy:#0b1a33; --navy-2:#162a4d; --pale:#8fc0ff;
    --head:"Archivo","DM Sans",system-ui,sans-serif; --sans:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
    --r:6px; --r-l:12px; --max:1080px; --gutter:48px;
  }
  html { scroll-behavior:smooth; scroll-padding-top:88px; }
  body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-underline-offset:4px; }
  :focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:2px; }
  h1, h2 { font-family:var(--head); font-stretch:112%; font-weight:700; text-wrap:balance; letter-spacing:-.02em; }
  h1 { font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.08; }
  h2 { font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.15; }
  h3 { font-size:1.12rem; font-weight:700; line-height:1.3; }
  p { text-wrap:pretty; }
  p + p { margin-top:14px; }
  .lead { font-size:clamp(1.1rem,1.5vw,1.25rem); line-height:1.55; max-width:40em; margin-top:20px; }
  .eyebrow { font-weight:600; margin-bottom:14px; }
  .section-note { color:var(--muted); margin-top:12px; max-width:22em; }
  .skip-link { position:fixed; top:10px; left:10px; z-index:50; padding:10px 20px; background:white; color:var(--ink); transform:translateY(-180%); border-radius:var(--r); }
  .skip-link:focus { transform:none; }
  .text-link { font-weight:600; color:var(--blue-dark); text-decoration:underline; text-decoration-thickness:1.5px; }
  .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:var(--r); font-weight:600; text-decoration:none; border:1.5px solid var(--ink); text-align:center; transition:background .15s, color .15s; }
  .button-primary { background:var(--blue); border-color:var(--blue); color:white; }
  .button-primary:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
  .button-outline:hover { background:var(--sky); }
  .button-light { background:white; border-color:white; color:var(--navy); }
  .button-light:hover { background:var(--sky); border-color:var(--sky); }
  .button-ghost { border-color:#ffffff80; color:white; }
  .button-ghost:hover { background:#ffffff1f; }
}

@layer layout {
  .site-header { background:var(--navy); color:white; position:sticky; top:0; z-index:20; border-bottom:1px solid #26385c; }
  .header-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; min-height:68px; padding:10px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
  .brand { text-decoration:none; display:inline-flex; align-items:center; gap:12px; }
  .brand img { width:40px; height:40px; border-radius:9px; box-shadow:0 0 0 1px #2b4170; }
  .brand-name { font-family:var(--head); font-stretch:118%; font-weight:800; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; }
  .brand-name span { color:var(--pale); font-weight:500; }
  .site-nav { display:flex; flex-wrap:wrap; gap:6px 22px; }
  .site-nav a { text-decoration:none; font-size:.96rem; font-weight:550; padding:6px 0; border-bottom:2px solid transparent; }
  .site-nav a:hover { border-bottom-color:var(--pale); }
  .preview-label { font-size:.78rem; font-weight:600; border:1px solid #ffffff66; padding:2px 9px; border-radius:99px; }
  main { display:block; }
  .section, .contact, .plain, .article { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding-left:var(--gutter); padding-right:var(--gutter); }
  .section { padding-top:60px; padding-bottom:60px; position:relative; }
  .section + .section::before { content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); border-top:1px solid var(--line); }
  .section > h2 { margin-bottom:26px; }
  .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
  .site-footer { background:var(--navy); color:#e7edf7; }
  .footer-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:44px var(--gutter); display:flex; gap:36px; align-items:flex-start; }
  .plate { background:white; border-radius:var(--r-l); padding:10px 16px; flex-shrink:0; }
  .plate img { height:56px; width:auto; }
  .footer-text p a { margin-right:22px; font-weight:600; }
  .footer-text .footer-marks { font-size:.8rem; color:#9fb0cb; max-width:70ch; }
}

@layer components {
  .hero { background:var(--navy); color:white; }
  .hero-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:64px var(--gutter) 72px; display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
  .hero .eyebrow { color:var(--pale); }
  .hero .lead { color:#d3ddee; }
  .path svg { width:100%; font-family:var(--sans); overflow:visible; }
  .path-line { stroke:var(--blue); stroke-width:5; stroke-linecap:round; stroke-dasharray:1 12; }
  .path-node circle { fill:var(--navy-2); stroke:var(--pale); stroke-width:3; }
  .path-node path { fill:none; stroke:white; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
  .path-node text { fill:white; font-size:14.5px; font-weight:600; text-anchor:middle; }
  .path-note { fill:var(--pale); font-size:13.5px; text-anchor:middle; }

  .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .card { display:flex; flex-direction:column; gap:10px; padding:24px; background:var(--mist); border-left:4px solid var(--blue); border-radius:0 var(--r-l) var(--r-l) 0; }
  .card p { color:#33425e; }
  .card .text-link { margin-top:auto; padding-top:8px; }
  .split { display:grid; grid-template-columns:1fr 1.7fr; gap:52px; }
  .facts > div { padding:16px 0; border-bottom:1px solid var(--line); }
  .facts > div:first-child { padding-top:0; }
  .facts dt { font-weight:700; font-size:1.06rem; }
  .facts dd { color:var(--muted); margin-top:4px; }
  .steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; counter-reset:step; }
  .steps li { counter-increment:step; border-top:3px solid var(--blue); padding-top:12px; }
  .steps li::before { content:counter(step); font-family:var(--head); font-stretch:112%; font-size:1.6rem; font-weight:700; color:var(--blue); display:block; margin-bottom:4px; }
  .steps p { color:var(--muted); margin-top:6px; font-size:.98rem; }
  .contact { padding-top:8px; padding-bottom:64px; }
  .contact > div { background:var(--sky); border-radius:var(--r-l); padding:36px 40px; }
  .contact p { margin-top:10px; max-width:52em; }
  .contact a { font-weight:700; color:var(--blue-dark); overflow-wrap:anywhere; }
  .plain { padding-top:72px; padding-bottom:110px; }
  .article { max-width:calc(720px + 2 * var(--gutter)); padding-top:56px; padding-bottom:72px; }
  .article h1 { font-size:clamp(1.9rem,3.4vw,2.6rem); }
  .article h2 { font-size:1.25rem; margin:34px 0 8px; }
  .article a { color:var(--blue-dark); }
  .revised { color:var(--muted); font-size:.92rem; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); }
}

@layer responsive {
  @media (max-width:900px) {
    :root { --gutter:20px; }
    .hero-inner, .split { grid-template-columns:1fr; }
    .hero-inner { padding-top:40px; padding-bottom:44px; gap:28px; }
    .split { gap:18px; }
    .section { padding-top:42px; padding-bottom:42px; }
    .cards { grid-template-columns:1fr; }
    .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .footer-inner { flex-direction:column; gap:22px; }
    .contact > div { padding:26px 22px; }
    .section-note { max-width:none; }
    .path-node text { font-size:17px; }
    .path-note { font-size:16px; }
    .actions .button { flex:1 1 auto; }
    .footer-text p a { display:inline-block; margin-bottom:6px; }
  }
  @media (max-width:520px) { .steps { grid-template-columns:1fr; } .brand-name { font-size:1.15rem; } }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }
  @media print { .site-header, .site-footer, .actions { display:none; } .hero { background:none; color:black; } }
}