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

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

@layer base {
  /* Archivo (slightly widened, to sit with the logo's lettering) for headings, DM Sans for text.
     Both are SIL Open Font License and self-hosted. --blue is sampled from the company logo. */
  @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; --steel:#808080;
    --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:1160px; --gutter:48px;
  }
  html { scroll-behavior:smooth; scroll-padding-top:104px; }
  body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
  ::selection { background:#cfe1fb; }
  a { color:inherit; text-underline-offset:4px; }
  button { cursor:pointer; }
  :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.1vw,3.4rem); line-height:1.08; }
  h2 { font-size:clamp(1.55rem,2.4vw,2.1rem); line-height:1.15; }
  h3 { font-family:var(--sans); font-size:1.15rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
  p { text-wrap:pretty; }
  p + p { margin-top:16px; }
  .eyebrow { font-weight:600; color:var(--blue-dark); margin-bottom:16px; }
  .lead { font-size:clamp(1.12rem,1.5vw,1.28rem); line-height:1.55; max-width:42em; margin-top:22px; }
  .note { color:var(--muted); font-size:.95rem; margin-top:24px; max-width:60em; }
  .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:var(--ink); color:white; 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; }
  .text-link:hover { color:var(--ink); }
  .text-link.on-dark { color:white; }
  .text-link.on-dark:hover { color:#bcd8f8; }
  .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:var(--r); font-weight:600; font-size:1rem; text-decoration:none; border:1.5px solid var(--ink); text-align:center; transition:background .15s, color .15s, border-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 { background:transparent; color:var(--ink); }
  .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); }
}

@layer layout {
  .site-header { background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
  .header-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; min-height:84px; padding:10px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
  .brand img { height:60px; width:auto; }
  .brand-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .brand-plate { background:white; border-radius:var(--r-l); padding:10px 16px; }
  .brand-plate img { height:56px; }
  .site-nav { display:flex; align-items:center; gap:24px; }
  .site-nav > a { text-decoration:none; font-size:.98rem; font-weight:550; padding:8px 0; border-bottom:2px solid transparent; white-space:nowrap; }
  .site-nav > a:hover { border-bottom-color:var(--line-strong); }
  .site-nav > a[aria-current] { border-bottom-color:var(--blue); }
  .site-nav .nav-phone { color:var(--muted); font-variant-numeric:tabular-nums; }
  .site-nav .nav-contact { background:var(--blue); color:white; padding:9px 18px; border-radius:var(--r); border-bottom:0; }
  .site-nav .nav-contact:hover { background:var(--blue-dark); }
  .menu-toggle { display:none; background:none; border:1.5px solid var(--ink); padding:8px 14px; border-radius:var(--r); font-weight:600; min-height:44px; }
  .preview-label { font-size:.78rem; font-weight:600; color:var(--muted); border:1px solid var(--line-strong); padding:2px 9px; border-radius:99px; }
  main { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:56px var(--gutter) 0; }
  .section { padding:64px 0; border-top:1px solid var(--line); }
  .section-first { border-top:0; padding-top:0; }
  .section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:40px; margin-bottom:30px; }
  .section-heading > p { color:var(--muted); max-width:380px; }
  .actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:30px; }
  .page-intro { padding:8px 0 56px; max-width:900px; }
  .page-short { padding-bottom:120px; }
  .site-footer { background:var(--navy); color:#e7edf7; margin-top:8px; }
  .footer-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:56px var(--gutter) 24px; }
  .footer-main { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; }
  .footer-main > div > p { color:#b3c0d6; font-size:.95rem; margin-top:16px; }
  .footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-links h2 { font-family:var(--sans); font-stretch:100%; font-size:.85rem; font-weight:600; letter-spacing:0; color:#9fb0cb; margin-bottom:6px; }
  .footer-links a { text-decoration:none; font-size:.95rem; overflow-wrap:anywhere; padding:2px 0; }
  .footer-links a:hover { text-decoration:underline; }
  .footer-bottom { border-top:1px solid #2a3c60; padding-top:20px; display:flex; justify-content:space-between; gap:20px; font-size:.85rem; color:#b3c0d6; }
  .footer-bottom a { margin-left:18px; }
  .footer-marks { font-size:.78rem; color:#9fb0cb; margin-top:14px; max-width:76ch; }
}

@layer components {
  /* Hero. The lab card is the one drawn element: the exercise a learner works through. */
  .hero { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:8px 0 72px; }

  /* Situations the reader may recognise */
  .stakes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
  .stakes li { grid-column:span 2; }
  .stakes li:nth-child(n+4) { grid-column:span 3; }
  .stakes a { display:flex; flex-direction:column; gap:16px; height:100%; padding:24px; background:var(--mist); border-left:4px solid var(--blue); border-radius:0 var(--r-l) var(--r-l) 0; text-decoration:none; transition:background .15s; }
  .stakes a:hover { background:var(--sky); }
  .stakes p { font-family:var(--head); font-stretch:106%; font-weight:600; font-size:1.18rem; line-height:1.35; letter-spacing:-.01em; }
  .stakes .row-more { margin-top:auto; }

  .service-list { list-style:none; padding:0; border-top:2px solid var(--ink); }
  .service-list li { border-bottom:1px solid var(--line); }
  .service-list a { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 250px; gap:32px; align-items:baseline; padding:24px 8px; text-decoration:none; transition:background .15s; }
  .service-list a:hover { background:var(--mist); }
  .service-list h3 { font-family:var(--head); font-stretch:112%; font-size:1.4rem; letter-spacing:-.015em; }
  .service-list p { color:var(--muted); }
  .service-list .row-more { text-align:right; }
  .row-more, .card-more { font-weight:600; font-size:.95rem; color:var(--blue-dark); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }

  .card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .card { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--r-l); background:white; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
  a.card:hover { border-color:var(--blue); box-shadow:0 10px 26px -16px #0b1a3366; }
  .card h3 { font-size:1.2rem; }
  .card p { color:var(--muted); font-size:1rem; }
  .card p + p { margin-top:0; }
  .card-kicker { font-size:.88rem; font-weight:700; color:var(--blue-dark) !important; }
  .card-more { margin-top:auto; padding-top:8px; }


  .tools-band { background:var(--navy); color:white; margin:0 calc(-1 * var(--gutter)); padding:64px var(--gutter); display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
  .tools-band-intro p { color:#cdd8ea; margin-top:18px; }
  .tool-list { list-style:none; padding:0; border-top:1px solid #30446d; }
  .tool-list li { border-bottom:1px solid #30446d; }
  .tool-list a { display:block; padding:20px 4px; text-decoration:none; }
  .tool-list a:hover h3 { text-decoration:underline; }
  .tool-list p { color:#cdd8ea; font-size:.98rem; margin-top:4px; }
  .tool-list .tool-kind { color:#8fc0ff; font-weight:600; }

  .steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; counter-reset:step; }
  .steps li { counter-increment:step; border-top:3px solid var(--blue); padding-top:14px; }
  .steps li::before { content:counter(step); font-family:var(--head); font-stretch:112%; font-size:1.7rem; font-weight:700; color:var(--blue); display:block; margin-bottom:4px; }
  .steps p { color:var(--muted); margin-top:8px; font-size:.98rem; }

  /* Lab card */
  .lab-card { background:var(--navy); color:white; border-radius:var(--r-l); padding:24px 24px 18px; box-shadow:0 24px 50px -22px #0b1a3380; }
  .lab-card-top { display:flex; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:1px solid #2a3c60; }
  .lab-card-top span { font-size:.82rem; font-weight:700; color:var(--navy); background:#8fc0ff; padding:2px 10px; border-radius:99px; white-space:nowrap; }
  .lab-card-top strong { font-family:var(--head); font-stretch:108%; font-size:1.08rem; line-height:1.3; }
  .lab-topo { width:100%; height:auto; margin:18px 0 6px; font-family:var(--sans); }
  .lab-link { stroke:#5d7096; stroke-width:2.5; }
  .lab-link.is-fault { stroke:#ff9c9c; stroke-dasharray:5 5; }
  .lab-node rect { fill:#162a4d; stroke:#8fc0ff; stroke-width:2; }
  .lab-node text { fill:#d6e0f0; font-size:12.5px; font-weight:600; text-anchor:middle; }
  .lab-mark circle { fill:var(--navy); stroke:#ff9c9c; stroke-width:2; }
  .lab-mark path { stroke:#ff9c9c; stroke-width:2.2; stroke-linecap:round; fill:none; }
  .lab-tasks { list-style:none; padding:0; counter-reset:task; border-top:1px solid #2a3c60; }
  .lab-tasks li { counter-increment:task; position:relative; padding:11px 0 11px 38px; border-bottom:1px solid #223457; font-size:.96rem; color:#9fb0cb; }
  .lab-tasks li::before { content:counter(task); position:absolute; left:0; top:10px; width:24px; height:24px; border-radius:50%; border:1.5px solid #5d7096; display:grid; place-items:center; font-size:.78rem; font-weight:700; }
  .lab-tasks .is-done { color:#d6e0f0; }
  .lab-tasks .is-done::before { content:""; background:#8fc0ff; border-color:#8fc0ff; }
  .lab-tasks .is-done::after { content:""; position:absolute; left:7px; top:17px; width:10px; height:5px; border-left:2.5px solid var(--navy); border-bottom:2.5px solid var(--navy); transform:rotate(-45deg); }
  .lab-tasks .is-now { color:white; font-weight:600; }
  .lab-tasks .is-now::before { border-color:white; color:white; }
  .lab-card figcaption { font-size:.84rem; color:#9fb0cb; margin-top:14px; }

  .stakes-plain { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stakes-plain li, .stakes-plain li:nth-child(n+4) { grid-column:auto; padding:24px; background:var(--mist); border-left:4px solid var(--blue); border-radius:0 var(--r-l) var(--r-l) 0; }

  .tool-list li > h3, .tool-list li > p { padding:0 4px; }
  .tool-list li > h3 { padding-top:20px; }
  .tool-list li > p { padding-bottom:20px; }

  .subject-list { border-top:2px solid var(--ink); }
  .subject { display:grid; grid-template-columns:1fr 1.3fr; gap:48px; padding:32px 0; border-bottom:1px solid var(--line); scroll-margin-top:104px; }
  .subject h3 { font-family:var(--head); font-stretch:112%; font-size:1.5rem; letter-spacing:-.015em; margin-bottom:10px; }
  .subject p { color:var(--muted); }
  .subject .subject-platforms { color:var(--ink); font-size:.98rem; }
  .subject h4 { font-size:.9rem; font-weight:700; color:var(--blue-dark); margin:0 0 4px; }
  .subject .check-list li:last-child { border-bottom:0; }
  .form-note { color:var(--muted); font-size:.92rem; margin:-6px 0 20px; }
  .form-note a { color:var(--blue-dark); }

  .contact-band { display:flex; justify-content:space-between; align-items:center; gap:40px; background:var(--sky); border-radius:var(--r-l); padding:44px; margin:64px 0; }
  .contact-band h2 { max-width:20em; }
  .contact-band p { margin-top:10px; color:#2c3c5a; }
  .contact-band-actions { flex-shrink:0; text-align:center; }
  .contact-band-actions p { font-size:.98rem; }
  .contact-band-actions a:not(.button) { font-weight:700; white-space:nowrap; }

  .split { display:grid; grid-template-columns:1fr 1.7fr; gap:56px; }
  .facts > div { padding:18px 0; border-bottom:1px solid var(--line); }
  .facts > div:first-child { padding-top:0; }
  .facts dt { font-weight:700; font-size:1.08rem; }
  .facts dt a { color:var(--blue-dark); }
  .facts dd { color:var(--muted); margin-top:4px; }
  .prose { max-width:42em; }
  .prose h3 { margin:28px 0 8px; }
  .prose h3:first-child { margin-top:0; }
  .check-list { list-style:none; padding:0; }
  .check-list li { position:relative; padding:11px 0 11px 30px; border-bottom:1px solid var(--line); }
  .check-list li::before { content:""; position:absolute; left:2px; top:19px; width:14px; height:7px; border-left:3px solid var(--blue); border-bottom:3px solid var(--blue); transform:rotate(-45deg); }
  .prose .check-list { margin:12px 0 4px; }
  .faq details { border-bottom:1px solid var(--line); }
  .faq details:first-child { border-top:1px solid var(--line); }
  .faq summary { cursor:pointer; font-weight:650; font-size:1.05rem; padding:16px 0; min-height:48px; }
  .faq summary::marker { color:var(--blue); }
  .faq details p { color:var(--muted); padding:0 0 18px; max-width:44em; }



  .contact-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; padding-bottom:84px; }
  .contact-layout aside h2 { font-size:1.35rem; margin:0 0 12px; }
  .contact-layout aside h2:not(:first-child) { margin-top:36px; }
  .contact-list > div { padding:14px 0; border-bottom:1px solid var(--line); }
  .contact-list dt { font-size:.9rem; font-weight:600; color:var(--muted); }
  .contact-list dd a { font-weight:700; font-size:1.1rem; color:var(--blue-dark); overflow-wrap:anywhere; }
  .next-steps { padding-left:22px; color:#33425e; }
  .next-steps li + li { margin-top:8px; }
  fieldset { padding:0; margin:0 0 22px; border:0; min-width:0; }
  legend, form > label { display:block; font-size:.95rem; font-weight:650; margin-bottom:8px; }
  form label span { font-weight:400; color:var(--muted); }
  textarea, input[type="text"], input[type="email"] { width:100%; border:1.5px solid var(--line-strong); background:white; color:var(--ink); padding:12px 14px; border-radius:var(--r); line-height:1.55; resize:vertical; margin-bottom:22px; font-size:1rem; }
  textarea:focus-visible, input:focus-visible { border-color:var(--blue); outline-offset:1px; }
  .choices { display:flex; flex-wrap:wrap; gap:10px; }
  .choices label { display:flex; align-items:center; gap:10px; border:1.5px solid var(--line-strong); border-radius:var(--r); padding:10px 14px; background:white; cursor:pointer; min-height:44px; }
  .choices label:has(:checked) { background:var(--sky); border-color:var(--blue); }
  .choices label span { color:var(--ink); font-weight:500; }
  input[type="checkbox"] { width:18px; height:18px; accent-color:var(--blue); }
  .form-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .article { max-width:720px; margin:0 auto 72px; }
  .article h1 { font-size:clamp(1.9rem,3.4vw,2.7rem); }
  .article h2 { font-size:1.35rem; margin:38px 0 12px; }
  .article .lead { margin-top:24px; }
  .article > p, .article > ul, .article > ol { margin-top:16px; }
  .article a { color:var(--blue-dark); }
  .article ul, .article ol { padding-left:24px; }
  .article li { margin:9px 0; }
  .article li::marker { color:var(--blue); font-weight:700; }
  .revised { color:var(--muted); font-size:.92rem; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); }
}

@layer responsive {
  @media (max-width:1180px) { .site-nav .nav-phone { display:none; } }
  @media (max-width:1000px) {
    :root { --gutter:28px; }
    .hero { gap:28px; }
    .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .service-list a { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
    .service-list .row-more { grid-column:2; text-align:left; }
    .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stakes li, .stakes li:nth-child(n+4) { grid-column:span 3; }
    .site-nav { gap:18px; }
  }
  @media (max-width:860px) {
    :root { --gutter:20px; }
    html { scroll-padding-top:90px; }
    .header-inner { flex-wrap:wrap; min-height:72px; gap:8px; }
    .brand img { height:50px; }
    .menu-toggle { display:block; }
    .site-nav { width:100%; flex-direction:column; align-items:stretch; gap:0; padding:6px 0 10px; }
    .site-nav > a { padding:13px 2px; border-bottom:1px solid var(--line); font-size:1.05rem; }
    .site-nav > a[aria-current] { border-bottom-color:var(--line); color:var(--blue-dark); }
    .site-nav .nav-phone { display:block; }
    .site-nav .nav-contact { margin-top:12px; text-align:center; padding:13px 18px; }
    .js-ready .site-nav { display:none; }
    .js-ready .site-nav.is-open { display:flex; }
    .preview-label { display:none; }
    main { padding-top:32px; }
    .section { padding:44px 0; }
    .section-first { padding-top:0; }
    .section-heading { display:block; margin-bottom:22px; }
    .section-heading > p, .section-heading > a { display:block; margin-top:10px; }
    .hero, .split, .tools-band, .contact-layout { grid-template-columns:1fr; }
    .hero { padding-bottom:44px; }
    .split { gap:20px; }
    .section-note { max-width:none; }
    .tools-band { padding:44px var(--gutter); gap:28px; }
    .service-list a { grid-template-columns:1fr; gap:8px; padding:20px 4px; }
    .service-list .row-more { grid-column:1; }
    .card-grid { grid-template-columns:1fr; }
    .stakes, .stakes-plain { grid-template-columns:1fr; }
    .subject { grid-template-columns:1fr; gap:18px; padding:26px 0; }
    .lab-card { padding:20px 18px 16px; }
    .stakes li, .stakes li:nth-child(n+4) { grid-column:auto; }
    .contact-band { display:block; padding:28px 22px; margin:44px 0; }
    .contact-band-actions { text-align:left; margin-top:20px; }
    .contact-layout { gap:36px; padding-bottom:48px; }
    .footer-main { grid-template-columns:1fr 1fr; gap:28px; }
    .footer-main > div:first-child { grid-column:1 / -1; }
    .footer-bottom { flex-wrap:wrap; }
    .page-short { padding-bottom:72px; }
    .actions .button { flex:1 1 auto; }
  }
  @media (max-width:520px) {
    .steps { grid-template-columns:1fr; }
    .footer-main { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition:none !important; }
  }
  @media print {
    .site-header, .site-footer, .contact-band, .actions { display:none; }
    main { padding:0; max-width:none; }
    .tools-band, .lab-card { background:none; color:black; margin:0; padding:20px 0; }
  }
}