/* Generated by tools/build.mjs from the design. Do not edit by hand. */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); }
:root{--paper:#F7F1E8;--surface:#EFE6D8;--ink:#2B2420;--muted:#6E6258;--rule:#E2D6C4;--terracotta:#B4532A;--terracotta-text:#A2461F;--harbour:#1F4E4A;--brass:#C8A15A;--sage:#6F8F6A;--diagram:#1F4E4A;--bg:var(--paper);--fg:var(--ink);--grey:var(--muted);--line:var(--rule);--tile:var(--surface);--body:clamp(17px,.9rem + .3vw,18px);--pad:clamp(20px,5vw,64px);--sect:clamp(80px,9vw,128px);--mono:'IBM Plex Mono',ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root{--paper:#1E1915;--surface:#2A231E;--ink:#F2E9DC;--muted:#B5A898;--rule:#3A312A;--terracotta-text:#E0895E;--diagram:#8FB8B2}}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[id]{scroll-margin-top:96px}
::selection{background:var(--harbour);color:var(--paper)}
a{color:var(--terracotta-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:2px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.c-wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.c-sect{padding-top:var(--sect);padding-bottom:var(--sect)}
.c-grid2{display:grid;grid-template-columns:5fr 7fr;gap:40px clamp(40px,6vw,96px)}
.c-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.c-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.c-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr;gap:32px 24px}
.c-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
.c-h1{font-weight:500;font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1.08;letter-spacing:-.03em;margin:0;max-width:16em}
.c-h2{font-weight:500;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:0}
.c-h3{font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:0}
.c-p{font-size:var(--body);line-height:1.55;margin:0;max-width:34em}
.c-small{font-size:15px;line-height:1.55;color:var(--muted);margin:0}
.c-tile{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:24px;transition:border-color .15s ease}
.c-tile:hover{border-color:var(--terracotta)}
a.c-tile{text-decoration:none;color:inherit;display:block}
.c-cta{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--terracotta);color:#F7F1E8;text-decoration:none;border-radius:2px;font-size:15px;font-weight:500;border:0;cursor:pointer;font-family:inherit}
.c-cta:hover{opacity:.9}
.c-cta-ghost{background:transparent;color:inherit;border:1px solid currentColor}
.c-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.c-list li{padding:14px 0;border-top:1px solid var(--rule);font-size:var(--body);line-height:1.5}
.c-list li:last-child{border-bottom:1px solid var(--rule)}
.c-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:13px;color:var(--muted);margin:0 0 32px;padding:0;list-style:none}
.c-crumbs a{color:var(--muted);text-decoration:none}
.c-crumbs a:hover{color:var(--ink)}
.c-band{background:var(--harbour);color:#F7F1E8}
.c-band .c-h1,.c-band .c-h2,.c-band .c-h3,.c-band .c-p{color:#F7F1E8}
.c-band .c-small,.c-band .c-eyebrow{color:#B9CBC6}
.c-band a{color:#F7F1E8}
.c-faq{border-top:1px solid var(--rule)}
.c-faq:last-of-type{border-bottom:1px solid var(--rule)}
.c-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:var(--body);font-weight:500;display:flex;justify-content:space-between;gap:16px}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::after{content:"+";font-family:var(--mono);color:var(--muted);flex:none}
.c-faq[open] summary::after{content:"–"}
.c-faq .c-p{padding-bottom:20px}
.c-field{display:flex;flex-direction:column;gap:6px}
.c-field label{font-family:var(--mono);font-size:13px;color:var(--muted)}
.c-input{min-height:48px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;box-sizing:border-box;width:100%}
textarea.c-input{min-height:140px;padding:12px 14px;resize:vertical}
.c-table{width:100%;border-collapse:collapse;font-size:15px}
.c-table th{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--muted);text-align:left;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--rule);white-space:nowrap}
.c-table td{padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.c-illus{display:block;width:100%;height:auto;color:var(--diagram)}
.c-log{font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:24px 28px;margin:0;overflow-x:auto;white-space:pre}
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
.c-nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.c-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.c-nav-links{display:flex;gap:4px;white-space:nowrap}
.c-nav-link{font:inherit;font-size:14px;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:2px}
.c-nav-link:hover,.c-nav-link[aria-expanded="true"]{color:var(--ink)}
.c-mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.c-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;padding:24px 0 28px}
.c-mega a{display:block;text-decoration:none;color:inherit;padding:12px;border-radius:4px}
.c-mega a:hover{background:var(--surface)}
.c-burger{display:none}
.c-mobile{display:none}
@media (max-width:1000px){.c-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.c-foot{grid-template-columns:1fr 1fr 1fr}.c-nav-links{display:none}.c-burger{display:inline-flex}.c-nav-cta{display:none}.c-mobile{display:block;border-top:1px solid var(--rule);padding:12px 0 24px}.c-mobile a{display:block;padding:12px 0;text-decoration:none;color:var(--ink);font-size:16px}.c-mobile .c-eyebrow{padding:16px 0 4px;margin:0}.c-mega-grid{grid-template-columns:1fr}}
@media (max-width:820px){.c-grid2{grid-template-columns:1fr}.c-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.c-grid3,.c-grid4{grid-template-columns:1fr}.c-foot{grid-template-columns:1fr}.c-table{display:block;overflow-x:auto}}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.c-tile{transition:none}}


  /* Palette: dark green, near-white, and the logo gold. The --terracotta names are kept
     because shared styles reference them; they now hold the green action colour. */
  html:root {
    --paper: #FAF9F6; --surface: #F1EFE9; --card: #FFFFFF; --ink: #1D2321; --muted: #5C6461; --rule: #E2DFD7;
    --terracotta: #1F4E4A; --terracotta-text: #1F4E4A; --harbour: #1F4E4A; --harbour-deep: #183F3C; --brass: #C09F6A; --sage: #C09F6A; --diagram: #1F4E4A;
    --on-dark: #FAF9F6; --on-dark-muted: #B9CBC6; --line-dark: #8FB8B2;
    --bg: var(--paper); --fg: var(--ink); --grey: var(--muted); --line: var(--rule); --tile: var(--surface);
    --body: clamp(17px, 0.9rem + 0.3vw, 18px); --pad: clamp(20px, 5vw, 64px); --sect: clamp(88px, 10vw, 140px);
    --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
    --sans: 'Source Sans 3', system-ui, sans-serif;
    --mono: var(--sans);
    --radius: 12px;
    --shadow: 0 1px 2px rgba(29,35,33,0.05), 0 10px 28px rgba(29,35,33,0.07);
  }
  @media (prefers-color-scheme: dark) {
    html:root { --paper: #151A19; --surface: #1D2422; --card: #1A201F; --ink: #EEF0EC; --muted: #A9B3AF; --rule: #2C3532; --terracotta: #2E6B65; --terracotta-text: #8FB8B2; --diagram: #8FB8B2; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.25); }
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  [id] { scroll-margin-top: 88px; }
  ::selection { background: var(--harbour); color: var(--paper); }
  a { color: var(--terracotta-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 4px; }
  .k-dark a:focus-visible, .k-dark button:focus-visible, .k-dark input:focus-visible, .k-dark textarea:focus-visible,
  .c-band a:focus-visible, .c-band button:focus-visible, .c-band input:focus-visible { outline-color: var(--on-dark); }
  input::placeholder { color: var(--grey); }

  /* Nav wordmark in the serif */
  .c-nav-bar > a:first-child { font-family: var(--serif) !important; font-size: 24px !important; font-weight: 500 !important; letter-spacing: 0 !important; }

  /* Type */
  .c-eyebrow, .k-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .k-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 6.2vw, 5.25rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
  .k-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.005em; margin: 0; }
  .k-h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0; }
  .k-h3s { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; margin: 0; }
  .k-p { font-size: var(--body); line-height: 1.6; margin: 0; max-width: 34em; }
  .k-small { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
  /* A hint of the earlier brass gold: heading rules, link hovers and small arrows on light sections */
  html:root { --bronze: #C8A15A; }
  .k-rule { display: block; width: 56px; height: 2px; background: var(--bronze); border: 0; margin: 28px 0 0; }
  .k-dark .k-rule { height: 1px; background: currentColor; opacity: 0.35; }
  a:hover { text-decoration-color: var(--bronze); }
  .k-card .k-arrow { color: var(--bronze); }
  .k-center { text-align: center; }
  .k-center .k-rule { margin-left: auto; margin-right: auto; }
  .k-head { margin-bottom: clamp(44px, 6vw, 72px); }

  /* Layout */
  .c-wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
  .k-sect { padding-top: var(--sect); padding-bottom: var(--sect); }
  .c-grid2 { display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(40px, 6vw, 96px); }
  .c-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .c-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
  .k-dark { background: var(--harbour); color: var(--on-dark); }
  .k-dark .c-eyebrow, .k-dark .k-eyebrow { color: var(--on-dark-muted); }
  .k-dark .k-small { color: var(--on-dark-muted); }
  /* Light cards sitting on a dark band keep their own dark text */
  .k-dark .k-card { color: var(--ink); }
  .k-dark .k-card .k-small { color: var(--muted); }

  /* Buttons */
  .c-cta { border-radius: 8px; font-weight: 600; font-family: var(--sans); gap: 10px; }
  .k-btn-light { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 8px; background: var(--on-dark); color: var(--harbour); font-size: 16px; font-weight: 600; text-decoration: none; }
  .k-btn-light:hover { background: #FFFFFF; }
  .k-btn-ghost-light { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 8px; border: 1px solid rgba(247,241,232,0.45); color: var(--on-dark); font-size: 16px; font-weight: 600; text-decoration: none; }
  .k-btn-ghost-light:hover { border-color: var(--on-dark); }

  /* Cards */
  .k-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: inherit; text-decoration: none; transition: transform 200ms ease, box-shadow 200ms ease; }
  a.k-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(29,35,33,0.06), 0 16px 36px rgba(29,35,33,0.10); }
  .k-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .k-card-art { height: 168px; background: var(--harbour); display: block; }
  .k-card-art svg { width: 100%; height: 100%; display: block; }
  .k-arrow { display: inline-block; transition: transform 200ms ease; }
  a:hover .k-arrow { transform: translateX(4px); }
  .c-tile { border-radius: var(--radius); }

  /* Hero bento */
  .k-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; margin-top: clamp(56px, 7vw, 88px); }
  .k-bento > * { min-height: 360px; border-radius: 16px; overflow: hidden; position: relative; text-decoration: none; color: var(--on-dark); }
  .k-report { background: linear-gradient(160deg, rgba(247,241,232,0.10), rgba(247,241,232,0.03)); border: 1px solid rgba(247,241,232,0.16); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
  .k-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .k-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(247,241,232,0.14); color: var(--on-dark); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .k-tag-plain { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 13px; }
  .k-photo-card image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #2E5C57; color: rgba(247,241,232,0.55); }
  .k-photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,63,60,0) 35%, rgba(24,63,60,0.92) 100%); pointer-events: none; }
  .k-photo-card .k-photo-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; }
  .k-photo-card image-slot::part(empty) { align-items: flex-start; justify-content: flex-end; padding: 20px; font-size: 12px; }

  /* Industries */
  .k-split { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
  /* In practice: three problems side by side, parts aligned across the columns */
  .k-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
  .k-cases li { display: flex; flex-direction: column; padding: 24px 0 0; border-top: 1px solid rgba(250,249,246,0.25); }
  @supports (grid-template-rows: subgrid) {
    .k-cases { grid-template-rows: repeat(3, auto); }
    .k-cases li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  }
  .k-case-n { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--brass); margin-bottom: 14px; }
  .k-case-t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.65rem); line-height: 1.15; margin: 0; color: var(--on-dark); }
  .k-case-d { font-size: 16px; line-height: 1.55; margin: 10px 0 0; color: var(--on-dark-muted); }
  .k-case-f { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.6; text-transform: uppercase; margin: 16px 0 0; color: var(--on-dark-muted); }
  @media (max-width: 820px) {
    .k-cases { grid-template-columns: 1fr; }
    .k-cases li { padding-bottom: 28px; }
  }
  /* Hero: headline on the left, the pilots-to-production diagram on the right */
  .k-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .k-hero-h1 { font-size: clamp(2.6rem, 5.1vw, 4.5rem); max-width: 11em; }
  .k-hero-fig { width: 100%; max-width: 520px; justify-self: end; }
  .k-hero-dia { position: relative; width: 100%; aspect-ratio: 520 / 280; }
  .k-hero-cap { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: var(--on-dark-muted); max-width: 30em; }
  .k-fade-4 { animation: k-fade 600ms ease 2700ms both; }
  .k-hero-label { position: absolute; font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.3; color: var(--on-dark-muted); white-space: nowrap; }
  /* The diagram draws itself once on load. Everything is visible by default, so nothing depends on script. */
  .k-loop { animation: k-fade 500ms ease both; }
  .k-loop-1 { animation-delay: 200ms; } .k-loop-2 { animation-delay: 450ms; } .k-loop-3 { animation-delay: 700ms; }
  .k-line { stroke-dasharray: 1; animation: k-draw 1300ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms both; }
  .k-gate { stroke-dasharray: 1; animation: k-draw 500ms ease 1700ms both; }
  .k-dot { transform-box: fill-box; transform-origin: center; animation: k-pop 400ms cubic-bezier(0.2, 1.4, 0.4, 1) 2300ms both; }
  .k-fade-1 { animation: k-fade 500ms ease 300ms both; }
  .k-fade-2 { animation: k-fade 500ms ease 1900ms both; }
  .k-fade-3 { animation: k-fade 500ms ease 2400ms both; }
  @keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes k-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes k-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
  @media (max-width: 1000px) {
    .k-hero { grid-template-columns: 1fr; }
    .k-hero-fig { justify-self: start; max-width: 460px; margin-top: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .k-loop, .k-line, .k-gate, .k-dot, .k-fade-1, .k-fade-2, .k-fade-3, .k-fade-4 { animation: none; }
  }
  .k-chev { color: var(--brass); font-size: 18px; }
  .k-record { list-style: none; margin: 0 0 clamp(56px, 7vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .k-record li { padding: 32px clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 8px; text-align: center; }
  .k-record li + li { border-left: 1px solid var(--line); }
  .k-record-big { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
  .k-record-sub { font-size: 16px; line-height: 1.5; color: var(--muted); }
  @media (max-width: 820px) { .k-record { grid-template-columns: 1fr; } .k-record li + li { border-left: 0; border-top: 1px solid var(--line); } }
  /* Track record at the foot of the hero: three points side by side, each under a short gold rule, no boxes */
  .k-proof { list-style: none; margin: clamp(64px, 9vw, 112px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
  .k-proof li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 0 12px; }
  .k-proof li::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--brass); }
  .k-proof-big { font-family: var(--serif); font-size: clamp(1.5rem, 2.15vw, 1.95rem); line-height: 1.12; color: var(--on-dark); }
  .k-proof-sub { font-size: 16px; line-height: 1.5; color: var(--on-dark-muted); max-width: 22em; }
  @media (max-width: 820px) {
    .k-proof { grid-template-columns: 1fr; border-top: 1px solid rgba(250,249,246,0.22); }
    .k-proof li { padding: 24px 0; }
    .k-proof li::before { display: none; }
    .k-proof li + li { border-top: 1px solid rgba(250,249,246,0.22); }
  }
  /* Services: three plain columns */
  .k-svcs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
  .k-svc { display: flex; flex-direction: column; padding: 8px clamp(20px, 2.8vw, 40px) 36px; }
  /* Share one set of rows across the three columns, so each part (and the rule above the last line) lines up */
  @supports (grid-template-rows: subgrid) {
    .k-svcs { grid-template-rows: repeat(5, auto); }
    .k-svc { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  }
  .k-svc:first-child { padding-left: 0; }
  .k-svc:last-child { padding-right: 0; }
  .k-svc + .k-svc { border-left: 1px solid var(--line); }
  .k-svc-n { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 14px; }
  .k-svc-t { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; margin: 0; }
  .k-svc-d { font-size: var(--body); line-height: 1.55; margin: 16px 0 0; }
  .k-svc-l { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; }
  .k-svc-list { list-style: none; margin: 0; padding: 0; flex: 1; }
  .k-svc-list li { position: relative; padding: 10px 0 10px 20px; font-size: 16px; line-height: 1.5; border-top: 1px solid var(--line); }
  .k-svc-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; background: var(--bronze); }
  .k-svc-term { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 15px; font-weight: 600; }
  .k-pilot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; margin-top: 32px; padding: 28px clamp(20px, 3vw, 36px); background: var(--surface); border-left: 3px solid var(--bronze); }
  .k-pilot .k-arrow { color: var(--bronze); }
  /* How we work: one engagement plan. Phases run across; the rows say what we do, what we need and what you get.
     Below them, three commitments drawn as bars that start at the phase where they begin. */
  .k-plan-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3.4vw, 48px); }
  .k-plan-cap { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--muted); margin: 0 0 32px; }
  .k-plan-labels { display: none; }
  .k-plan-phases { list-style: none; margin: 0; padding: 0; }
  .k-plan-phase { position: relative; border-top: 2px solid var(--diagram); padding: 0 0 36px; }
  .k-plan-phase::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--card); border: 2px solid var(--diagram); }
  .k-plan-phase:last-child::before { background: var(--brass); border-color: var(--brass); }
  .k-plan-head { padding: 24px 0 20px; }
  .k-plan-when { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
  .k-plan-t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; margin: 0; text-wrap: balance; }
  .k-plan-cell { padding: 14px 0; border-top: 1px solid var(--line); }
  .k-plan-cell p { margin: 0; font-size: 16px; line-height: 1.5; }
  .k-plan-lab, .k-plan-labels span, .k-plan-through dt { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
  .k-plan-lab { display: block; margin-bottom: 6px; }
  .k-plan-through { margin: 0; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 20px; }
  .k-plan-through dd { margin: 8px 0 0; padding: 12px 16px; background: var(--surface); border-left: 3px solid var(--bronze); font-size: 16px; line-height: 1.5; }
  /* Tablets: phase name on the left, its three rows on the right */
  @media (min-width: 640px) and (max-width: 999.98px) {
    .k-plan-phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 32px; }
    .k-plan-head { grid-row: 1 / span 3; }
    .k-plan-cell { grid-column: 2; }
    .k-plan-head + .k-plan-cell { border-top: 0; padding-top: 24px; }
  }
  /* Desktop: a grid with the row names down the left and one column per phase */
  @media (min-width: 1000px) {
    @supports (grid-template-rows: subgrid) {
      .k-plan { display: grid; grid-template-columns: 152px repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
      .k-plan-cap { grid-column: 1; grid-row: 1; margin: 0; padding: 22px 20px 0 0; }
      .k-plan-labels { display: grid; grid-column: 1; grid-row: 2 / span 3; grid-template-rows: subgrid; }
      .k-plan-labels span { padding: 19px 16px 18px 0; border-top: 1px solid var(--line); }
      .k-plan-phases { grid-column: 2 / -1; grid-row: 1 / span 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
      .k-plan-phase { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; padding: 0; }
      .k-plan-head { padding: 24px 28px 30px 0; }
      .k-plan-cell { padding: 16px 28px 18px 0; }
      .k-plan-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .k-plan-through { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 8px 0; padding-top: 20px; }
      .k-plan-through > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
      .k-plan-through dt { grid-column: 1; padding-right: 16px; }
      .k-plan-through dd { margin: 0; }
      .k-plan-through .k-from-1 dd { grid-column: 2 / -1; }
      .k-plan-through .k-from-2 dd { grid-column: 3 / -1; }
      .k-plan-through .k-from-3 dd { grid-column: 4 / -1; }
    }
  }
  @media (max-width: 820px) {
    .k-svcs { grid-template-columns: 1fr; }
    .k-svc, .k-svc:first-child, .k-svc:last-child { padding: 32px 0 36px; }
    .k-svc + .k-svc { border-left: 0; border-top: 1px solid var(--ink); }
  }
  .k-contact { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
  .k-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .k-form label { display: block; font-size: 14px; font-weight: 600; color: var(--on-dark-muted); margin-bottom: 6px; }
  .k-form input, .k-form textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--on-dark); background: rgba(247,241,232,0.06); border: 1px solid rgba(247,241,232,0.35); border-radius: 8px; }
  .k-form textarea { min-height: 130px; padding: 12px 14px; resize: vertical; }
  .k-form input::placeholder, .k-form textarea::placeholder { color: rgba(247,241,232,0.55); }
  .k-form button { font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; border: 0; }
  @media (max-width: 820px) { .k-contact { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .k-form { grid-template-columns: 1fr; } }
  .k-feature-row { margin-top: clamp(56px, 7vw, 88px); }
  .k-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: stretch; }
  .k-ref-art { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 24px; border-right: 1px solid var(--rule); }
  @media (max-width: 720px) {
    .k-ref { grid-template-columns: 1fr; }
    .k-ref-art { border-right: 0; border-bottom: 1px solid var(--rule); }
  }
  /* Security and data: a plain list of commitments */
  .k-facts { margin: 0; border-top: 1px solid var(--line); }
  .k-facts > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
  .k-facts dt { font-weight: 600; font-size: 19px; line-height: 1.3; }
  .k-facts dd { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 40em; }

  /* Comparison removed; diagram draw kept */
  [data-draw] path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
  [data-draw].is-in path { animation: c-draw 1200ms cubic-bezier(0.2,0.7,0.2,1) forwards; }
  [data-draw] .c-dot { opacity: 0; transition: opacity 400ms ease 1100ms; }
  [data-draw].is-in .c-dot { opacity: 1; }
  @keyframes c-draw { to { stroke-dashoffset: 0; } }

  @media (max-width: 1000px) {
    .k-bento { grid-template-columns: 1fr 1fr; }
    .k-bento > .k-report { grid-column: 1 / -1; min-height: 300px; }
    .c-grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .k-feature-row { grid-template-columns: 1fr; }
  }
  @media (max-width: 820px) {
    .c-grid2, .k-split { grid-template-columns: 1fr; }
    .c-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .c-grid3, .c-grid5, .k-bento { grid-template-columns: 1fr; }
    .k-bento > * { min-height: 280px; }
  }
  /* Security diagram (laptops and up). Everything is visible by default; the draw-in only runs
     when the page script arms it, and hovering a commitment dims the parts it does not concern. */
  .k-sec-fig { display: none; margin: 44px 0 0; max-width: 480px; }
  .k-sec-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
  .k-sec-bound { fill: var(--card); stroke: var(--diagram); stroke-width: 1.5; }
  .k-sec-node { fill: var(--surface); stroke: var(--rule); stroke-width: 1; }
  .k-sec-lab { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
  .k-sec-it { font-family: var(--serif); font-style: italic; font-size: 18px; fill: var(--muted); }
  .k-sec-sm { font-size: 15px; }
  .k-sec-mid { text-anchor: middle; }
  .k-sec-end { text-anchor: end; }
  .k-sec-wire, .k-sec-line, .k-sec-arrow, .k-sec-ring { fill: none; stroke: var(--diagram); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .k-sec-wire { stroke-opacity: 0.5; }
  .k-sec-gate { fill: var(--surface); stroke: var(--diagram); stroke-width: 1.5; }
  .k-sec-dash { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; }
  .k-sec-stop { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .k-sec-dot { fill: var(--brass); }
  .k-sec-fig .p { transition: opacity 250ms ease; }
  .k-sec-fig[data-focus="1"] .p:not(.s1), .k-sec-fig[data-focus="2"] .p:not(.s2),
  .k-sec-fig[data-focus="3"] .p:not(.s3), .k-sec-fig[data-focus="4"] .p:not(.s4) { opacity: 0.18; }
  @media (min-width: 1080px) {
    .k-sec-fig { display: block; }
    .k-facts > div { position: relative; }
    .k-facts > div::before { content: ""; position: absolute; left: -22px; top: 22px; bottom: 22px; width: 2px; background: var(--bronze); opacity: 0; transition: opacity 200ms ease; }
    .k-facts > div[data-on="true"]::before { opacity: 1; }
  }
  /* Waiting to draw: the animated parts are held back until the diagram scrolls into view */
  .k-sec-fig[data-play="armed"] .d { opacity: 0; }
  .k-sec-fig[data-play="armed"] .d-bound { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  .k-sec-fig[data-play="armed"] .d-wire, .k-sec-fig[data-play="armed"] .d-acc { stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* Drawing: the boundary first, then what runs inside it, then how we reach in, then what cannot leave */
  .k-sec-fig[data-play="play"] .d-bound { stroke-dasharray: 1; animation: k-draw 900ms ease both, k-sec-fill 500ms ease 600ms both; }
  .k-sec-fig[data-play="play"] .d-wire { stroke-dasharray: 1; animation: k-draw 700ms ease 1500ms both; }
  .k-sec-fig[data-play="play"] .d-acc { stroke-dasharray: 1; animation: k-draw 600ms ease 2400ms both; }
  .k-sec-fig[data-play="play"] .d { animation: k-fade 450ms ease both; }
  .k-sec-fig[data-play="play"] .d-t { animation-delay: 600ms; }
  .k-sec-fig[data-play="play"] .d-n1 { animation-delay: 850ms; }
  .k-sec-fig[data-play="play"] .d-n2 { animation-delay: 1000ms; }
  .k-sec-fig[data-play="play"] .d-n3 { animation-delay: 1150ms; }
  .k-sec-fig[data-play="play"] .d-n4 { animation-delay: 1300ms; }
  .k-sec-fig[data-play="play"] .d-note { animation-delay: 1800ms; }
  .k-sec-fig[data-play="play"] .d-col { animation-delay: 2000ms; }
  .k-sec-fig[data-play="play"] .d-acc2 { animation-delay: 2900ms; }
  .k-sec-fig[data-play="play"] .d-stop { animation-delay: 3400ms; }
  .k-sec-fig[data-play="play"] .d-dot { animation: k-fade 300ms ease 3900ms both, k-sec-loop 5200ms linear 4200ms 2; }
  @keyframes k-sec-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
  /* The dot runs one circuit between the parts inside the boundary and never crosses it */
  @keyframes k-sec-loop {
    0% { transform: translate(0, 0); } 10.5% { transform: translate(0, -56px); } 39.5% { transform: translate(154px, -56px); }
    60.5% { transform: translate(154px, 56px); } 89.5% { transform: translate(0, 56px); } 100% { transform: translate(0, 0); }
  }
  /* Small line drawings on the cards: green lines, one gold accent each */
  .k-pic { display: block; width: 100%; height: auto; }
  .k-pic .l, .k-pic .l2 { fill: none; stroke: var(--diagram); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .k-pic .l2 { stroke-opacity: 0.45; }
  .k-pic .f { fill: var(--card); stroke: var(--diagram); stroke-width: 1.5; stroke-linejoin: round; }
  .k-pic .fb { fill: var(--card); stroke: var(--brass); stroke-width: 1.75; }
  .k-pic .d { fill: var(--diagram); }
  .k-pic .g { fill: var(--brass); }
  .k-pic .gl { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .k-pic .t { fill: none; stroke: var(--card); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .k-pic .dash { stroke-dasharray: 5 6; }
  .k-pic text { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; fill: var(--muted); }
  /* Images that have a separate version for light and dark pages */
  .k-only-light { display: block; } .k-only-dark { display: none; }
  @media (prefers-color-scheme: dark) { .k-only-light { display: none; } .k-only-dark { display: block; } }
  .k-swipe { gap: 28px; }
  .k-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Controls that only exist on phones */
  .k-tabs, .k-plan-tabs, .k-plan-next, .k-fold-btn { display: none; }

  /* Phones only. The page is kept short by showing one of each set of three at a time:
     services and phases become tabs, examples and articles swipe, and detail opens on tap. */
  @media (max-width: 639.98px) {
    html:root { --sect: 64px; }
    .k-hero-more, .k-phone-hide { display: none; }
    .k-head { margin-bottom: 32px; }

    /* Hero: track record as a short list; badges in one row */
    .k-proof { margin-top: 40px; }
    .k-proof li, .k-proof li + li { display: block; text-align: left; padding: 14px 0; }
    .k-proof-big { font-size: 20px; }
    .k-proof-big::after { content: " "; }
    .k-proof-sub { font-size: 15px; }
    .k-badges { gap: 14px 8px !important; padding: 24px 0 !important; }
    .k-badges .k-eyebrow { flex: 0 0 100%; text-align: center; }
    .k-badges image-slot { flex: 1 1 0; min-width: 0; width: auto !important; height: 52px !important; }
    .k-badges img { flex: 1 1 0; min-width: 0; width: auto !important; height: auto !important; max-height: 52px; object-fit: contain; }

    /* Tabs: Advise, Build, Run */
    .k-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
    .k-tab { min-height: 52px; margin: 0 0 -1px; padding: 0 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-family: var(--serif); font-size: 27px; line-height: 1.1; color: var(--muted); text-align: left; cursor: pointer; }
    .k-tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--bronze); }
    .k-svc[data-on="false"] { display: none; }
    .k-svc, .k-svc:first-child, .k-svc:last-child { position: relative; padding: 22px 0 4px; }
    .k-svc + .k-svc { border-top: 0; }
    .k-svc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .k-svc-d { margin-top: 0; }
    .k-svc-l { margin-top: 24px; }

    /* Tap-to-open rows: the two strips under Services, and the security commitments */
    .k-fold { position: relative; }
    .k-fold-btn { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
    .k-fold-btn[aria-expanded="true"] { height: 60px; }
    .k-fold-btn::after { content: "+"; position: absolute; right: var(--fold-x, 0px); top: var(--fold-y, 12px); font-family: var(--sans); font-size: 24px; font-weight: 400; line-height: 1; color: var(--ink); }
    .k-fold-btn[aria-expanded="true"]::after { content: "\2212"; }
    .k-fold[data-open="false"] .k-fold-body { display: none; }
    .k-fold .k-eyebrow, .k-fold h3, .k-fold dt { padding-right: 36px; }
    .k-pilot.k-fold { --fold-x: 18px; --fold-y: 22px; padding: 22px 20px; }
    .k-facts > div { padding: 16px 0; }

    /* How we work: the phases sit side by side and you swipe between them. The timeline above
       fills up to the phase you are on; tapping a point, or "Next", moves to that phase. */
    .k-plan-cap { margin-bottom: 20px; }
    .k-plan-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
    .k-plan-tabs::before, .k-plan-tabs::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; }
    .k-plan-tabs::before { right: 0; background: var(--diagram); opacity: 0.25; }
    .k-plan-tabs::after { width: 0; background: var(--diagram); transition: width 320ms ease; }
    .k-plan-tabs[data-step="1"]::after { width: 33.333%; }
    .k-plan-tabs[data-step="2"]::after { width: 66.667%; }
    .k-plan-tabs button { position: relative; z-index: 1; min-height: 60px; padding: 26px 8px 12px 0; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); text-align: left; cursor: pointer; }
    .k-plan-tabs button::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--card); border: 2px solid var(--diagram); transition: background-color 200ms ease 120ms, border-color 200ms ease 120ms; }
    .k-plan-tabs button[aria-pressed="true"] { color: var(--ink); }
    .k-plan-tabs button[data-done="true"]::before { background: var(--diagram); }
    .k-plan-tabs button:last-child[data-done="true"]::before { background: var(--brass); border-color: var(--brass); }
    .k-plan-phases { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
    .k-plan-phases::-webkit-scrollbar { display: none; }
    .k-plan-phase { flex: 0 0 100%; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; border-top: 0; padding-bottom: 20px; }
    .k-plan-phase::before { display: none; }
    .k-plan-head { padding: 10px 0 16px; }
    .k-plan-next { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: auto; padding: 6px 0 0; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--terracotta-text); cursor: pointer; }
    .k-plan-next span { color: var(--bronze); }
    @media (prefers-reduced-motion: reduce) { .k-plan-tabs::after, .k-plan-tabs button::before { transition: none; } }

    /* Rows you swipe: the three examples, and the articles */
    .k-swipe, .k-cases { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 28px; scrollbar-width: none; }
    .k-swipe::-webkit-scrollbar, .k-cases::-webkit-scrollbar { display: none; }
    .k-swipe > *, .k-cases > li { flex: 0 0 82%; scroll-snap-align: start; }
    .k-cases { grid-template-rows: none; padding-top: 0; padding-bottom: 4px; }
    .k-cases > li { display: flex; flex-direction: column; padding-bottom: 0; }
    .k-case-f { margin-top: auto; padding-top: 16px; }
    .k-ref-art { display: none; }
    .k-feature-row { margin-top: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .k-card, .k-arrow, .k-chev { transition: none; }
    [data-draw] path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    [data-draw] .c-dot { opacity: 1; transition: none; }
  }


  @media (max-width: 1040px) {
    .c-nav-links { display: none; } .c-burger { display: inline-flex; } .c-nav-cta { display: none; }
    .c-mobile { display: block; border-top: 1px solid var(--rule); padding: 12px 0 24px; }
    .c-mobile a { display: block; padding: 12px 0; text-decoration: none; color: var(--ink); font-size: 16px; }
  }


  /* A light footer, so it reads as separate from the dark contact band above it */
  .k-foot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 0.8fr); gap: 40px clamp(32px, 5vw, 72px); }
  .k-foot-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; font-size: 15px; color: var(--ink); text-decoration: none; }
  .k-foot-link:hover { text-decoration: underline; }
  @media (max-width: 820px) { .k-foot { grid-template-columns: 1fr; } }