/* KrattBridge — site styles
 *
 * Deliberate choices, in case they come up:
 *  - No external font, script, or asset requests. The page loads nothing from a
 *    third party. For a company selling data boundaries this is the minimum
 *    credible posture, and it also sidesteps the German court finding that
 *    embedding Google Fonts transmits visitor IPs without consent.
 *  - Light, restrained, generous margins. Dark high-contrast pages read as
 *    startup. Institutional buyers read them as young.
 *  - Serif headings, sans body. This is the professional-services convention
 *    rather than the software convention, which is the point.
 */

:root {
  --ink:        #17202a;
  --ink-soft:   #4a5561;
  --ink-faint:  #78838f;
  --rule:       #dfe3e8;
  --paper:      #fcfbf8;
  --paper-alt:  #e9ecef;   /* matte: flatter and a touch cooler than before, so
                              it reads as a different surface rather than a
                              slightly dimmer white */
  --accent:     #14507d;
  --accent-dk:  #0e3a5c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 40rem;
  --gutter: 2rem;
}

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

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

/* Paper grain. An inline SVG turbulence filter, so the page still makes zero
   third-party requests. Kept very faint: it should register as tooth in the
   paper when you look, not as a pattern. */
:root {
  /* Two layers. The fine one is tooth; the coarse one is the cloudiness real
     paper has when light crosses it. baseFrequency below about 0.7 keeps the
     grain large enough to survive a 2x display instead of averaging to flat. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.19'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23s)' opacity='0.13'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain), var(--grain-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-kerning: normal;
}

.container {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.15rem); line-height: 1.16; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem);  line-height: 1.24; }
h3 { font-size: 1.12rem; line-height: 1.35; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
p.wide { max-width: 52rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dk); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------- Header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.wordmark span { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 1.55rem;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;   /* a nav item wrapping to three lines is the ugliest
                            thing a header can do; it never wraps now */
}
.nav a:hover { color: var(--accent); }

/* Language toggle */
.lang {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 0.34rem 0.6rem;
  cursor: pointer;
  font: inherit;
}
.lang button + button { border-left: 1px solid var(--rule); }
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- Sections ---------- */

section { padding: 5.5rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* Matte panels. No grain, flat colour, and a hairline of shadow at the top and
   bottom edges so the surface reads as recessed against the textured paper
   rather than merely paler. The contrast is between finishes, not tones. */
.alt {
  background-color: var(--paper-alt);
  background-image: none;
  border-top-color: #dcdfe4;
  box-shadow:
    inset 0  1px 0 rgba(23, 32, 42, 0.05),
    inset 0 -1px 0 rgba(23, 32, 42, 0.05);
}

.hero { padding: 6.5rem 0 5.5rem; }
.hero h1 { max-width: 22ch; }

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 3px;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-dk); color: #fff; }
.btn-line { color: var(--accent); background: transparent; }
.btn-line:hover { background: var(--accent); color: #fff; }

/* ---------- Grids ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.item { }
.item h3 { margin-bottom: 0.45rem; }
.item p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; }
.item .rule { width: 34px; height: 2px; background: var(--accent); margin-bottom: 1.05rem; }

/* Sector list */
.sectors { border-top: 1px solid var(--rule); margin-top: 2.5rem; }
.sector {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.sector h3 { margin: 0; }
.sector p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* Panel */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.75rem;
}
.alt .panel { background: #fff; }
.panel h3 { margin-bottom: 0.6rem; }
.panel p { font-size: 0.95rem; color: var(--ink-soft); }
.panel p:last-child { margin-bottom: 0; }

/* Figures */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.25rem;
}
.figure .n {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--accent);
  display: block;
}
.figure .k {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
  display: block;
}

/* Spec list */
.specs { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.specs li {
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
  max-width: 54rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.specs li:last-child { border-bottom: 1px solid var(--rule); }
.specs strong { color: var(--ink); font-weight: 600; }
.specs code { font-family: var(--mono); font-size: 0.86em; color: var(--ink); }

.note {
  font-size: 0.88rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin-top: 2rem;
  max-width: 44rem;
}

/* ---------- Footer ---------- */

.foot {
  background: var(--ink);
  color: #c8d0d8;
  padding: 4rem 0 2.25rem;
  font-size: 0.92rem;
}
.foot h3 { color: #fff; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.9rem; }
.foot a { color: #fff; }
.foot p { max-width: 30rem; margin-bottom: 0.4rem; }
.foot .cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #2c3742;
}
.foot .legal {
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: #8a959f;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}
.reg { font-family: var(--mono); font-size: 0.78rem; color: #8a959f; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .cols-3, .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .sector { grid-template-columns: 1fr; gap: 0.4rem; }
  .foot .cols { grid-template-columns: 1fr; gap: 2rem; }
  .nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 560px) {
  section { padding: 3.75rem 0; }
  .hero { padding: 4rem 0 3.5rem; }
  .cols-3, .figures { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media print {
  .masthead, .actions { display: none; }
  body { font-size: 11pt; }
}

/* Compact variant used by the header call to action. Kept here rather than as an
   inline style attribute so the Content-Security-Policy can forbid inline CSS. */
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.86rem; }

/* ---------- Tagline ---------- */

/* The tagline is deliberately NOT in the masthead. It is long enough that it
   pushes the navigation into wrapping, and a header whose nav breaks across
   three lines undoes every other restrained decision on the page. It lives in
   the hero and the footer, where it has room to be read. */

.kicker {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--accent);
  max-width: 34ch;
  margin: 0 0 1.6rem;
}

.foot-tagline {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* ---------- Footer corrections ---------- */

.foot .cols { grid-template-columns: 1.5fr 1fr 1fr; }

.reg { line-height: 1.7; }

.foot .legal {
  gap: 1rem 2.5rem;
  align-items: baseline;
}
.foot .legal span:last-child { text-align: right; }

@media (max-width: 900px) {
  .foot .legal span:last-child { text-align: left; }
}

/* ---------- Hero layout and figure ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

.hero-figure { margin: 0; }
.hero-figure svg { width: 100%; height: auto; display: block; }

/* The drawing carries the argument on wide screens. On narrow ones the tagline
   sits directly under the headline and the figure would only push the call to
   action below the fold, so it goes. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-figure { display: none; }
}

/* ---------- Hero figure ---------- */
/* Flat line work, one colour family, no fills and no glow. Everything is
   stroked so it stays crisp at any size and weighs nothing. */

.fig-line   { fill: none; stroke: #aeb6bf; stroke-width: 1.4; }
.fig-thread { fill: none; stroke: #ccd2d9; stroke-width: 1.1; }

.fig-node rect { fill: var(--paper); stroke: #96a0ab; stroke-width: 1.3; }
.fig-node path { fill: none; stroke: #c2c9d1; stroke-width: 1.2; stroke-linecap: round; }

.fig-core rect { fill: var(--paper); stroke: var(--accent); stroke-width: 1.7; }
.fig-core path { fill: none; stroke: var(--accent); stroke-width: 1.3;
                 stroke-linecap: round; opacity: 0.72; }

.fig-flow path { fill: none; stroke: var(--accent); stroke-width: 1.5; }

.fig-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: #9aa4af;
}
.fig-core-cap { text-anchor: middle; fill: var(--accent); opacity: 0.85; }

.fig-label text {
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--ink-soft);
  text-anchor: middle;
}
.fig-flow-label text { font-size: 11.5px; fill: var(--accent); text-anchor: start; }