/* Technical subjects share a photographic opening and clear reading surfaces.
   Only records and real access boundaries warrant a containing surface. */
.architecture-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(calc(760px + var(--public-header-height)), 86svh);
  padding: calc(var(--public-header-height) + 28px) var(--pad) 66px;
  background: #f0f1ef;
  display: flex;
  flex-direction: column;
}
.architecture-hero h1 {
  position: relative;
  max-width: none;
  font-size: clamp(80px, 13.5vw, 205px);
  line-height: 0.95;
  letter-spacing: -0.065em;
  padding: 60px 0 96px;
  overflow-wrap: anywhere;
}
.architecture-hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
}
.architecture-hero-field svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.architecture-hero-field path,
.architecture-hero-field circle {
  stroke: #5a686c;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.architecture-hero-field circle {
  fill: #c08b37;
  stroke: none;
}
.architecture-hero-field .architecture-accent {
  stroke: #bd883a;
  stroke-width: 2;
}
.architecture-hero-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 11%;
  margin-top: auto;
}
.architecture-hero-headline {
  font-size: clamp(29px, 3.2vw, 48px);
  line-height: 1.08;
  font-weight: var(--ginsi-public-heading-weight);
  letter-spacing: -0.04em;
  max-width: 22ch;
}
.architecture-hero-bottom > div > p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 53ch;
  color: #596164;
}
.architecture-hero-bottom > div > a {
  display: flex;
  justify-content: space-between;
  padding: 25px 0 13px;
  font-size: 14px;
  max-width: 430px;
}
.architecture-hero-bottom > div > a span {
  color: #a97931;
}
.architecture-hero-dataflow {
  background: #e5e9e9;
}
.architecture-hero-dataflow .architecture-hero-field {
  opacity: 0.26;
  transform: translateY(45px);
}
.architecture-hero-evidence {
  background: #fafafa;
}
.architecture-hero-evidence .architecture-hero-field {
  opacity: 0.12;
}
.architecture-intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 11%;
  margin-bottom: 80px;
  align-items: end;
}
.architecture-intro > h2 {
  font-size: clamp(43px, 5.7vw, 88px);
  line-height: 1;
  letter-spacing: -0.05em;
  max-width: 18ch;
}
.architecture-intro > p {
  max-width: 45ch;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
/* OS: each layer carries its own native disclosure; there is no remote inspector. */
.architecture-system {
  background: #fff;
  color: var(--ink);
  padding-top: 85px;
  padding-bottom: 100px;
}
.architecture-system .architecture-intro > p {
  color: var(--ink);
}
.system-field {
  padding: 20px 0 0;
}
.system-layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  align-items: start;
  gap: 3%;
}
.system-layers::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 75px;
  border-top: 1px solid #d0d8d0;
}
/* Follow the evidence: on arrival the line draws through the layers and each drawing
   traces itself as the line reaches it. A drawing lifts under the pointer; opening a
   layer eases its explanation into place. */
.system-layers {
  interpolate-size: allow-keywords;
}
.system-layer::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    content-visibility 520ms allow-discrete;
}
.system-layer[open]::details-content {
  height: auto;
}
.system-layer summary svg {
  transition:
    background-color 180ms,
    stroke 180ms,
    translate 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.system-layer summary:is(:hover, :focus-visible) svg {
  translate: 0 -4px;
}
@media (prefers-reduced-motion: no-preference) {
  .architecture-system .system-layers,
  .architecture-system .system-layers.reveal-pending {
    opacity: 1;
    transform: none;
  }
  .system-layers::before {
    transform-origin: left center;
    transition: transform 1700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .architecture-system .system-layers.reveal-pending::before {
    transform: scaleX(0);
  }
  /* The gap is twice the drawing, so a line that has not started paints nothing at its end. */
  .system-layer svg :is(path, circle) {
    stroke-dasharray: 1 2;
    transition: stroke-dashoffset 1300ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(200ms + var(--i, 0) * 300ms);
  }
  .architecture-system .system-layers.reveal-pending .system-layer svg :is(path, circle) {
    stroke-dashoffset: 1;
  }
  .system-layer :is(.system-layer-heading, summary > p) {
    transition:
      opacity 800ms ease,
      translate 1000ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(350ms + var(--i, 0) * 300ms);
  }
  .architecture-system
    .system-layers.reveal-pending
    .system-layer
    :is(.system-layer-heading, summary > p) {
    opacity: 0;
    translate: 0 12px;
  }
}
.system-layer {
  position: relative;
  min-width: 0;
  color: var(--ink);
}
.system-layer summary {
  cursor: pointer;
  list-style: none;
}
.system-layer summary::-webkit-details-marker {
  display: none;
}
.system-layer svg {
  display: block;
  width: 100%;
  height: 150px;
  padding: 15px;
  background: #fff;
  position: relative;
  stroke: #7d897e;
  stroke-width: 1;
  transition:
    background-color 180ms,
    stroke 180ms;
}
.system-layer-heading {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-top: 24px;
}
.system-layer h3 {
  flex: 1;
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  hyphens: none;
}
.system-layer summary p {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 13px;
  min-height: 3.2em;
  color: var(--muted);
}
.system-toggle {
  position: relative;
  flex: 0 0 22px;
  height: 22px;
  margin-top: 5px;
  color: var(--tech-accent);
}
.system-toggle::before,
.system-toggle::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 1px;
  left: 5px;
  top: 10px;
  background: currentColor;
}
.system-toggle::after {
  transform: rotate(90deg);
}
.system-layer[open] .system-toggle::after {
  display: none;
}
.system-layer summary:is(:hover, :focus-visible) svg,
.system-layer[open] svg {
  background: #fff;
  stroke: var(--tech-accent);
}
.system-explanation {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--tech-rule);
}
.system-explanation p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.system-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 10px;
}
.system-related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
/* Integrations: one cable is laid through the stages as the reader moves down the page.
   The stages alternate sides so the cable swings across the open space between them.
   Without the script, or with reduced motion, every stage and drawing reads at rest. */
.architecture-admission {
  background: #fff;
  padding-top: 85px;
  padding-bottom: 80px;
}
.admission-flow {
  position: relative;
  isolation: isolate;
  margin-top: 15px;
}
.admission-cable {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
.admission-cable-route {
  stroke: #cfd7db;
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.admission-cable-laid {
  stroke: #24343b;
  stroke-width: 2;
  stroke-linecap: round;
}
.admission-cable-head {
  fill: #24343b;
  stroke: rgb(89 110 123 / 0.2);
  stroke-width: 14;
  paint-order: stroke;
  opacity: 0;
  transition: opacity 300ms;
}
.cable-enhanced.cable-started:not(.cable-complete) .admission-cable-head {
  opacity: 1;
}
.admission-endpoint {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--tech-accent);
}
.admission-node {
  position: relative;
  z-index: 1;
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: currentColor;
  transition: background-color 500ms var(--f-ease);
}
.cable-enhanced:not(.cable-started) .admission-endpoint:not(.admission-output) .admission-node,
.cable-enhanced:not(.cable-complete) .admission-output .admission-node {
  background: #fff;
}
.admission-output {
  justify-content: flex-end;
}
.admission-stages {
  display: grid;
  gap: clamp(100px, 10vw, 150px);
  padding: clamp(80px, 8vw, 120px) 0 clamp(90px, 9vw, 130px);
}
.admission-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 8%;
  align-items: start;
  min-width: 0;
}
.admission-stage:nth-child(even) {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
/* The drawing is where the cable runs through a stage, so it sits above the cable. */
.admission-glyph {
  grid-row: 1 / span 2;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  background: #fff;
  color: #33454d;
}
.admission-stage:nth-child(even) .admission-glyph {
  grid-column: 2;
}
.admission-glyph svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 230 / 150;
  stroke: currentColor;
  stroke-width: 1;
}
.admission-plan {
  stroke: #d9e0e3;
}
.admission-trace .architecture-accent {
  stroke: var(--tech-accent);
}
.admission-explanation,
.admission-note {
  grid-column: 2;
}
.admission-stage:nth-child(even) :is(.admission-explanation, .admission-note) {
  grid-column: 1;
}
.admission-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 36ch;
}
.admission-caption {
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 25px;
}
/* A stage waits, quieter and set toward the cable, until the cable reaches it. Then its
   words come out from the cable's side and its drawing traces while the cable runs through. */
.cable-enhanced :is(.admission-explanation, .admission-note) {
  transition:
    opacity 700ms var(--f-ease),
    translate 1100ms var(--f-ease);
}
.cable-enhanced .admission-note {
  transition-delay: 90ms;
}
.cable-enhanced .admission-stage:not(.is-reached) :is(.admission-explanation, .admission-note) {
  opacity: 0.3;
  translate: -28px 0;
}
.cable-enhanced
  .admission-stage:nth-child(even):not(.is-reached)
  :is(.admission-explanation, .admission-note) {
  translate: 28px 0;
}
.cable-enhanced .admission-trace > * {
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--pass, 0));
}
/* Methodology: the example reads as an excavation. Each stratum is uncovered from the top
   as the reader reaches it and its words come into focus; the line above each stratum marks
   how certain that boundary is. Without the script every stratum reads uncovered. */
.architecture-reading {
  padding-top: 110px;
  background: #f9f9f6;
}
.architecture-reading .architecture-intro {
  margin-bottom: 90px;
}
.reading-part {
  position: relative;
  padding: clamp(44px, 5vw, 64px) 0 clamp(56px, 6vw, 84px);
}
.reading-interface {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: #8f857c;
}
.reading-interface path {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.reading-interface-uncertain path {
  stroke-dasharray: 9 7;
}
.reading-interface-projected path {
  stroke-width: 1.5;
  stroke-dasharray: 0.5 6;
  stroke-linecap: round;
}
.reading-find {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 4fr);
  column-gap: 5%;
  align-items: start;
}
.reading-find h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.042em;
  max-width: 15ch;
}
.reading-find h4 {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.75em;
  font-size: 14px;
  font-weight: var(--ginsi-public-display-weight);
  color: var(--tech-accent);
}
.reading-find p {
  grid-column: 3;
  grid-row: 1;
  padding-top: 0.45em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 44ch;
}
/* Below the last stratum lies ground the next review has yet to dig. */
.reading-ground {
  height: clamp(80px, 9vw, 140px);
  background: repeating-linear-gradient(135deg, rgb(117 103 95 / 0.24) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.dig-enhanced .reading-part::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgb(117 103 95 / 0.24) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--dug, 1) * 125% - 25%),
    #000 calc(var(--dug, 1) * 125%)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--dug, 1) * 125% - 25%),
    #000 calc(var(--dug, 1) * 125%)
  );
  pointer-events: none;
}
.dig-enhanced .reading-part:not(.is-clear) .reading-find {
  filter: blur(var(--blur, 0px));
  opacity: var(--clarity, 1);
}
.dig-enhanced .reading-interface {
  clip-path: inset(-8px calc((1 - var(--line, 1)) * 100%) -8px 0);
}
/* On Methodology every entrance is a focus pull rather than a movement. */
@media (prefers-reduced-motion: no-preference) {
  .topic-evidence :is([data-reveal=''], [data-reveal='from-right'], [data-reveal='from-left']) {
    transition:
      opacity 1000ms ease 140ms,
      filter 1400ms var(--f-ease) 140ms;
  }
  .topic-evidence
    :is([data-reveal=''], [data-reveal='from-right'], [data-reveal='from-left']).reveal-pending {
    transform: none;
    filter: blur(12px);
  }
  .topic-evidence [data-reveal='cascade'] > * {
    transition:
      opacity 900ms ease,
      filter 1400ms var(--f-ease);
    transition-delay: calc(var(--i, 0) * 180ms);
  }
  .topic-evidence [data-reveal='cascade'].reveal-pending > * {
    transform: none;
    filter: blur(12px);
  }
  .topic-evidence [data-reveal='reading'] > :is(h3, p) {
    transition:
      opacity 600ms ease,
      filter 1100ms var(--f-ease);
  }
  .topic-evidence [data-reveal='reading'].reveal-pending:not(:focus-within) > :is(h3, p) {
    transform: none;
    filter: blur(9px);
  }
}
@media (max-width: 1050px) {
  .architecture-hero {
    min-height: calc(700px + var(--public-header-height));
  }
  .architecture-hero h1 {
    padding-bottom: 95px;
    font-size: clamp(72px, 12.5vw, 155px);
  }
  .architecture-hero-bottom,
  .architecture-intro {
    gap: 7%;
  }
  .admission-stages {
    gap: 96px;
  }
  .admission-stage,
  .admission-stage:nth-child(even) {
    column-gap: 6%;
  }
  .admission-glyph {
    width: min(100%, 250px);
  }
}
@media (max-width: 760px) {
  .architecture-hero {
    min-height: calc(650px + var(--public-header-height));
    padding-top: calc(var(--public-header-height) + 23px);
    padding-bottom: 45px;
  }
  .architecture-hero h1 {
    font-size: clamp(54px, 12.2vw, 92px);
    letter-spacing: -0.055em;
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .architecture-hero-bottom,
  .architecture-intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .architecture-hero-headline {
    font-size: 34px;
    max-width: 25ch;
  }
  .architecture-hero-bottom > div > p {
    font-size: 15px;
  }
  .architecture-hero-field {
    min-width: 950px;
    left: -260px;
  }
  .architecture-intro {
    margin-bottom: 35px;
  }
  .architecture-intro > h2 {
    font-size: 46px;
  }
  .architecture-intro > p {
    font-size: 15px;
  }
  .architecture-system,
  .architecture-admission,
  .architecture-reading {
    padding-top: 70px;
    padding-bottom: 65px;
  }
  .system-field {
    padding-top: 8px;
  }
  .system-layers {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .system-layers::before {
    display: none;
  }
  .system-layer summary {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    padding: 6px 0;
  }
  .system-layer svg {
    grid-row: span 2;
    height: 92px;
    padding: 6px;
  }
  .system-layer-heading {
    margin: 0;
    align-self: end;
    gap: 8px;
  }
  .system-layer h3 {
    font-size: 25px;
  }
  .system-layer summary p {
    grid-column: 2;
    min-height: 0;
    margin: 8px 0 0;
    align-self: start;
  }
  .system-toggle {
    margin-top: 2px;
    flex-basis: 18px;
  }
  .system-explanation {
    margin-top: 12px;
    padding: 22px;
  }
  .system-explanation p {
    font-size: 15px;
  }
  /* One column: the cable runs straight down through the drawings beside the text. */
  .admission-stages {
    gap: 0;
    padding: 26px 0;
  }
  .admission-stage,
  .admission-stage:nth-child(even) {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 22px;
    padding: 22px 0;
  }
  .admission-stage .admission-glyph,
  .admission-stage:nth-child(even) .admission-glyph {
    grid-column: 1;
    width: 100%;
    margin-top: 4px;
  }
  .admission-stage :is(.admission-explanation, .admission-note),
  .admission-stage:nth-child(even) :is(.admission-explanation, .admission-note) {
    grid-column: 2;
  }
  .cable-enhanced .admission-stage:not(.is-reached) :is(.admission-explanation, .admission-note),
  .cable-enhanced
    .admission-stage:nth-child(even):not(.is-reached)
    :is(.admission-explanation, .admission-note) {
    translate: -16px 0;
  }
  .admission-endpoint {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 22px;
  }
  .admission-node {
    justify-self: center;
  }
  .architecture-reading .architecture-intro {
    margin-bottom: 45px;
  }
  .reading-part {
    padding: 34px 0 44px;
  }
  .reading-interface {
    top: -4px;
    height: 8px;
  }
  .reading-find {
    grid-template-columns: 1fr;
  }
  .reading-find :is(h3, h4, p) {
    grid-column: 1;
    padding-top: 0;
  }
  .reading-find h4 {
    grid-row: 1;
    margin-bottom: 12px;
  }
  .reading-find h3 {
    grid-row: 2;
    font-size: 31px;
    max-width: 23ch;
  }
  .reading-find p {
    grid-row: 3;
    margin-top: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .system-layer,
  .system-layer svg {
    transition: none;
    transform: none;
  }
}

.admission-explanation h3 {
  font-size: clamp(30px, 3.4vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0 0 22px;
}
.admission-explanation p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: 26px;
}
.comparison-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6%;
  margin: 0 0 80px;
  padding: 36px 0 42px;
  border-top: 1px solid #aeb7b1;
  border-bottom: 1px solid #aeb7b1;
}
.comparison-checks h3 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.comparison-checks p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
@media (max-width: 700px) {
  .comparison-checks {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 55px;
  }
  .comparison-checks h3 {
    font-size: 25px;
  }
  .admission-explanation h3 {
    font-size: 28px;
    margin-bottom: 14px;
  }
  .admission-explanation p {
    font-size: 15px;
    margin-bottom: 16px;
  }
}

/* OS: a living structure in the opening, a clear connected system on the page. */
.topic-architecture {
  --muted: #686e68;
  --tech-accent: #576f5e;
  --tech-surface: #edf1ed;
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security) .architecture-hero {
  min-height: min(calc(820px + var(--public-header-height)), 100svh);
  background: #101711;
  color: #f5f4ee;
  padding-bottom: clamp(40px, 5vw, 72px);
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security) .architecture-hero h1 {
  padding: 42px 0 110px;
  font-size: clamp(80px, 12vw, 190px);
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
  .architecture-hero-field {
  opacity: 1;
}
.os-frontier,
.os-frontier img {
  display: block;
  width: 100%;
  height: 100%;
}
.os-frontier img {
  object-fit: cover;
  object-position: 50% 45%;
}
.os-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b110b20, transparent 40%, #0b110b45 60%, #0b110bd6);
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
  .architecture-hero-bottom
  > div
  > p {
  color: #e0e4dc;
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
  .architecture-hero-bottom
  > div
  > a {
  border: 0;
  justify-content: flex-start;
  gap: 22px;
  padding-bottom: 0;
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
  .architecture-hero-bottom
  > div
  > a
  span {
  color: inherit;
}
:is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
  .architecture-hero
  a:focus-visible {
  outline-color: #f5f4ee;
}

.topic-architecture .tech-contact {
  background: #171c18;
}
@media (max-width: 760px) {
  :is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security) .architecture-hero {
    min-height: calc(820px + var(--public-header-height));
    padding-bottom: 36px;
  }
  :is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
    .architecture-hero
    h1 {
    font-size: clamp(72px, 19vw, 120px);
    padding: 36px 0 175px;
  }
  :is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
    .architecture-hero-field {
    min-width: 0;
    left: 0;
  }
  .os-frontier img {
    object-position: 63% center;
  }
  .os-frontier::after {
    background: linear-gradient(
      180deg,
      #0b110b88,
      #0b110b66 25%,
      #0b110b20 42%,
      #0b110b88 54%,
      #0b110be8
    );
  }
  :is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
    .architecture-hero-bottom {
    display: block;
  }
  :is(.topic-architecture, .topic-dataflow, .topic-evidence, .topic-security)
    .architecture-hero-bottom
    > div
    > p {
    margin-top: 24px;
    font-size: 15px;
  }
  .topic-architecture .architecture-system {
    padding-top: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .topic-architecture .system-layer svg {
    transition: none;
  }
}

/* Integrations: connecting distant worlds, followed by a clear source-to-evidence route. */
.topic-dataflow {
  --muted: #667078;
  --tech-accent: #596e7b;
  --tech-surface: #eef1f3;
}
.topic-dataflow .architecture-hero {
  background: #151d26;
}
.topic-dataflow .architecture-hero h1 {
  font-size: clamp(65px, 7.6vw, 120px);
  padding: 20px 0 95px;
  letter-spacing: -0.055em;
  line-height: 1;
  overflow-wrap: normal;
}
.topic-dataflow .architecture-hero-field {
  transform: none;
  opacity: 1;
}
.dataflow-frontier,
.dataflow-frontier img {
  display: block;
  width: 100%;
  height: 100%;
}
.dataflow-frontier img {
  object-fit: cover;
  object-position: 50% center;
}
.dataflow-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0a181e45, transparent 65%),
    linear-gradient(180deg, #0a181e66, transparent 40%, #0a151a33 58%, #0a151ae8);
}
.topic-dataflow .architecture-hero-bottom > div > p {
  color: #e1e5e7;
}
.topic-dataflow .tech-contact {
  background: #181f25;
}
@media (max-width: 760px) {
  .topic-dataflow .architecture-hero {
    min-height: calc(860px + var(--public-header-height));
  }
  .topic-dataflow .architecture-hero h1 {
    font-size: clamp(41px, 10.9vw, 76px);
    padding: 18px 0 180px;
    max-width: 100%;
  }
  .topic-dataflow .architecture-hero-headline {
    font-size: 28px;
    line-height: 1.13;
    max-width: none;
  }
  .topic-dataflow .architecture-hero-field {
    min-width: 0;
    left: 0;
    transform: none;
  }
  .dataflow-frontier img {
    object-position: 80% center;
  }
  .dataflow-frontier::after {
    background: linear-gradient(180deg, #0a181e8c, #0a181e20 35%, #0a151a80 56%, #0a151aeb);
  }
  .topic-dataflow .architecture-admission {
    padding-top: 55px;
  }
}

/* Methodology: careful discovery in the photograph; clear distinctions in the reading. */
.topic-evidence {
  --muted: #6c6965;
  --tech-accent: #75675f;
  --tech-surface: #f1efec;
}
.topic-evidence .architecture-hero {
  background: #1d1c1a;
}
.topic-evidence .architecture-hero h1 {
  font-size: clamp(70px, 9vw, 144px);
  padding: 24px 0 130px;
  overflow-wrap: normal;
}
.methodology-frontier,
.methodology-frontier img {
  display: block;
  width: 100%;
  height: 100%;
}
.methodology-frontier img {
  object-fit: cover;
  object-position: 50% center;
}
.methodology-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #15131040, transparent 60%),
    linear-gradient(180deg, #15131033, transparent 42%, #15131033 60%, #151310e6);
}
.topic-evidence .architecture-hero-bottom > div > p {
  color: #e5e0d8;
}
.topic-evidence .architecture-reading {
  padding-top: 85px;
  background: #fff;
}
.topic-evidence .architecture-intro > p,
.topic-evidence .comparison-checks p,
.topic-evidence .tech-notes p {
  color: var(--ink);
}
.topic-evidence .comparison-checks h3 {
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.2;
}

.topic-evidence .tech-contact {
  background: #1c1c1b;
}
@media (max-width: 760px) {
  .topic-evidence .architecture-hero {
    min-height: calc(860px + var(--public-header-height));
  }
  .topic-evidence .architecture-hero h1 {
    font-size: clamp(43px, 11.5vw, 78px);
    padding: 22px 0 235px;
  }
  .topic-evidence .architecture-hero-headline {
    font-size: 32px;
  }
  .methodology-frontier {
    background: #151310;
  }
  .methodology-frontier img {
    height: 640px;
    object-position: 90% center;
  }
  .methodology-frontier::after {
    background: linear-gradient(180deg, #15131080, transparent 32%, #15131020 49%, #151310 73%);
  }
  .topic-evidence .architecture-reading {
    padding-top: 55px;
  }
  .topic-evidence .comparison-checks {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Security: sheltered water, weathered stone and a clear account of the controls. */
.topic-security {
  --muted: #68716b;
  --tech-accent: #65756b;
  --tech-surface: #eff1ef;
}
.topic-security .tech-header,
.topic-security .tech-language a[aria-current] {
  color: var(--ink);
}
.topic-security .tech-menu span {
  background: var(--ink);
}
.topic-security .architecture-hero {
  background: #141c1c;
}
.topic-security .architecture-hero h1 {
  font-size: clamp(68px, 9vw, 140px);
  padding: 24px 0 75px;
  overflow-wrap: normal;
}
.security-frontier,
.security-frontier img {
  display: block;
  width: 100%;
  height: 100%;
}
.security-frontier img {
  object-fit: cover;
  object-position: 50% center;
}
.security-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #10181938, transparent 60%),
    linear-gradient(180deg, #10181938, transparent 45%, #10181940 63%, #101819e6);
}
.topic-security .architecture-hero-bottom > div > p {
  color: #e0e5e1;
}
/* Security: four walls close around the company's records, ring by ring, like the
   breakwater in its photograph. Each wall is built as its protection is read, from the
   first check inward; narrow screens close the walls in turn as the drawing passes.
   Without the script, or with reduced motion, the harbour stands closed. */
.security-harbour-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 8%;
  align-items: start;
  container-type: inline-size;
}
/* The drawing holds the middle of the viewport while the protections pass beside it. */
.security-harbour {
  position: sticky;
  top: calc(50vh - min(230px, 20.9cqw));
}
.security-harbour svg {
  display: block;
  width: min(100%, 460px);
  height: auto;
  overflow: visible;
  fill: none;
}
.harbour-plan {
  stroke: #d4dad6;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}
/* Each wall is drawn as a harbour plan draws a breakwater: two faces with the wall
   between them. */
.harbour-wall {
  stroke: var(--tech-accent);
  stroke-width: 1.3;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.harbour-arm {
  stroke-width: 5.5;
}
.harbour-core {
  stroke: #fff;
  stroke-width: 3.3;
}
.harbour-seal {
  transition: opacity 400ms var(--f-ease);
}
.harbour-records {
  fill: var(--ink);
  transition: fill 600ms var(--f-ease);
}
.harbour-enhanced .harbour-wall {
  transform: scale(calc(1 + (1 - var(--seal, 1)) * 0.08));
}
.harbour-enhanced .harbour-arm {
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--seal, 1));
}
.harbour-enhanced .harbour-wall:not(.is-sealed) .harbour-seal {
  opacity: 0;
}
.harbour-enhanced .harbour-wall.is-active {
  stroke: var(--ink);
}
.harbour-enhanced .harbour-wall.is-active .harbour-core {
  stroke: #fff;
}
.harbour-enhanced .security-harbour:not(.is-closed) .harbour-records {
  fill: #c3cac6;
}
.security-protections {
  display: grid;
  gap: 58px;
}
.security-protection {
  display: grid;
  gap: 20px;
  align-content: start;
}
/* Room for each wall to be built while its protection is read; the first protection
   waits until the drawing is in view. */
.harbour-enhanced .security-protections {
  padding-top: 12vh;
}
.harbour-enhanced .security-protection {
  min-height: 42vh;
}
.security-protection h3 {
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
.security-protection > div > p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.security-protection details {
  margin-top: 16px;
}
.topic-security
  :is(.security-protection, .security-processing, .security-scenario, .security-control-detail)
  summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.topic-security
  :is(.security-protection, .security-processing, .security-scenario, .security-control-detail)
  summary::-webkit-details-marker {
  display: none;
}
.topic-security :is(.security-protection, .security-processing) summary {
  font-size: 13px;
  justify-content: flex-start;
  gap: 18px;
}
.topic-security
  :is(.security-protection, .security-processing, .security-scenario, .security-control-detail)
  summary:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.topic-security
  :is(.security-protection, .security-processing, .security-scenario, .security-control-detail)
  summary
  > span {
  flex: 0 0 auto;
  transition: transform 180ms ease;
}
.topic-security
  :is(
    .security-protection details,
    .security-processing details,
    .security-scenario,
    .security-control-detail
  )[open]
  > summary
  > span {
  transform: rotate(45deg);
}
.security-protection details p {
  font-size: 15px;
  line-height: 1.75;
  margin-top: 16px;
  color: var(--ink);
}
.topic-security .security-stage details {
  margin-top: auto;
}
.topic-security .security-processing details p {
  font-size: 14px;
  margin-top: 16px;
}
.topic-security .security-processing summary {
  color: #e5e7e7;
}
.topic-security .security-processing summary:focus-visible {
  outline-color: #e5e7e7;
}
.topic-security .security-scenarios {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10%;
}
.topic-security .security-scenarios > h2 {
  max-width: 18ch;
  margin-bottom: 0;
}
.topic-security .security-scenario {
  display: block;
  padding: 0 0 24px;
}
.topic-security .security-scenario + .security-scenario {
  padding-top: 24px;
  border-top: 1px solid #dce1dc;
}
.topic-security .security-scenario h3 {
  font-size: 24px;
}
.topic-security .security-scenario p {
  padding: 20px 0 8px;
}
.topic-security .tech-assurance {
  padding-bottom: 44px;
}
.topic-security .assurance-glyph {
  display: none;
}
.topic-security .security-control-detail {
  padding: 0 var(--pad) 70px;
}
.topic-security .security-control-detail > summary {
  color: var(--ink);
  padding: 24px 0;
  border-top: 1px solid var(--tech-rule);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.topic-security .security-control-detail .tech-table-wrap {
  margin-top: 28px;
}
.topic-security .security-processing {
  background: #202427;
}
.topic-security .security-processing .tech-section-intro > p,
.topic-security .security-stage p,
.topic-security .security-text-boundary p {
  color: #c9ced0;
}
.topic-security .security-stage-flow::before {
  background: #6b747a;
}
.topic-security .security-stage-point {
  border-color: #c7cdd0;
  background: #202427;
}
.topic-security .security-stage-point::after {
  background: #edf0f0;
}
.topic-security .security-stage-boundary {
  border: 0;
  color: #c9ced0;
}
.topic-security .security-text-boundary {
  border: 0;
  padding-top: 0;
}
.topic-security :is(.security-scenario p, .assurance-levels p, .tech-notes p) {
  color: var(--ink);
}
.topic-security .security-scenarios,
.topic-security .tech-assurance {
  background: #fff;
}
.topic-security .security-scenario,
.topic-security .assurance-levels > div {
  border: 0;
}
.topic-security .assurance-glyph {
  color: #839187;
}
.topic-security .tech-principle,
.topic-security .tech-contact {
  background: #1d2225;
}

.topic-security .tech-principle {
  color: #f0f2f0;
}
.topic-security .tech-principle p {
  color: #c9ced0;
}
@media (max-width: 760px) {
  .security-protection,
  .topic-security .security-scenarios {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .security-protections {
    gap: 38px;
  }
  .security-harbour-layout {
    grid-template-columns: 1fr;
  }
  .security-harbour {
    position: relative;
    top: auto;
    margin-bottom: 44px;
  }
  .security-harbour svg {
    width: min(76%, 320px);
    margin: 0 auto;
  }
  .harbour-enhanced .security-protections {
    padding-top: 0;
  }
  .harbour-enhanced .security-protection {
    min-height: 0;
  }
  .security-protection > div > p {
    font-size: 16px;
  }
  .topic-security .security-scenarios {
    gap: 38px;
  }
  .topic-security .security-control-detail > summary {
    padding: 20px;
  }
  .topic-security .security-control-detail {
    padding-bottom: 30px;
  }
  .topic-security .architecture-hero {
    min-height: calc(880px + var(--public-header-height));
  }
  .topic-security .architecture-hero h1 {
    font-size: clamp(50px, 12.6vw, 84px);
    padding: 24px 0 220px;
  }
  .topic-security .architecture-hero-headline {
    font-size: 34px;
  }
  .security-frontier {
    background: #141c1c;
  }
  .security-frontier img {
    height: 680px;
    object-position: 81% center;
  }
  .security-frontier::after {
    background: linear-gradient(180deg, #141c1c75, transparent 36%, #141c1c30 52%, #141c1c 76%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topic-security details > summary > span {
    transition: none;
  }
}