/* ==========================================================================
   PhasedConnect — enterprise UC, AV and collaboration technology integration
   --------------------------------------------------------------------------
   Presentation layer, second pass. The first read as an editorial document:
   everything divided by rules, every cell the same weight, hierarchy carried
   by whitespace alone. This one carries hierarchy in type weight, surface and
   scale — cards and visual compositions, borders only where they separate
   something from something else.

   Sans carries the technical content; serif carries every heading from the
   section title up, as the 2026 portfolio does — one editorial voice rather
   than serif at a few chosen moments and sans titles everywhere else.

   Mobile is designed at the bottom of this file as its own layout, not as the
   desktop grid squeezed into 390px.
   ========================================================================== */

:root {
  --ivory:       #F7F5F0;   /* warm ground */
  --ivory-deep:  #EEEBE2;
  --paper:       #FFFFFF;
  --charcoal:    #171A1D;   /* dark surfaces */
  --charcoal-2:  #1F2226;   /* raised dark surface */
  --ink:         #171A1D;
  /* Graphite, not blue-grey. The old ramp sat at hue 211 with a cool cast,
     which is most of what made the site read as generic IT consultancy — and
     it put a second blue on the page competing with the one that belongs to
     FortiqX. Same lightnesses, hue pulled to 210 and saturation roughly
     halved, so the greys go neutral and blue is left to FortiqX alone. */
  --muted:       #50575D;   /* body copy */
  --muted-deep:  #626A72;   /* small secondary text and labels */
  --muted-dark:  #A7ADB4;   /* secondary text on dark ground */
  --accent:      #315E55;   /* deep architectural green */
  --accent-lift: #6BA89C;   /* the accent, legible on dark ground */
  --line:        #D9D6CF;
  --line-strong: #C9C5BB;
  --line-dark:   rgba(255,255,255,.12);
  --line-dark-2: rgba(255,255,255,.22);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1320px;
  --gutter: 48px;
  --section-y: 120px;
  --nav-h: 76px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.section--dark :focus-visible, .bridge :focus-visible, .footer :focus-visible { outline-color: var(--accent-lift); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: 0; z-index: 200; transform: translate(-50%,-120%);
  background: var(--ink); color: var(--paper); padding: 12px 24px; font-size: .9375rem;
  transition: transform .2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* --- Layout ------------------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 900px; }
.section { padding: var(--section-y) 0; }
.section--tight { padding: 96px 0; }
.section--paper { background: var(--paper); }
.section--warm { background: var(--ivory-deep); }
.section--dark { background: var(--charcoal); color: #fff; }

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

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.section--dark .eyebrow, .bridge .eyebrow { color: var(--accent-lift); }
.eyebrow__no { color: var(--muted-deep); margin-right: 10px; }
.section--dark .eyebrow__no { color: var(--muted-dark); }

.display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  line-height: 1.05; letter-spacing: -0.022em;
}
.display span { display: block; }

.title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.125rem, 3.5vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.024em;
}
.title span { display: block; }
.title--serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.subtitle { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }

.lede {
  font-size: 1.125rem; line-height: 1.6; color: var(--muted);
  max-width: 60ch; margin-top: 22px;
}
.section--dark .lede, .bridge .lede { color: var(--muted-dark); }
.body-copy { color: var(--muted); }
.body-copy p + p { margin-top: 16px; }
.body-copy .subtitle { color: var(--ink); margin-top: 34px; margin-bottom: 10px; }
.label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-deep); }

.head { max-width: 860px; margin-bottom: 56px; }
.head--split { max-width: none; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .9375rem; font-weight: 600; letter-spacing: .005em;
  padding: 16px 28px; min-height: 52px;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
}
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: #254840; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--on-dark { background: #fff; color: var(--charcoal); }
.btn--on-dark:hover { background: var(--accent-lift); color: var(--charcoal); }

.link-quiet {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: .9375rem; font-weight: 600; color: var(--accent);
}
.link-quiet:hover { color: var(--ink); }
.section--dark .link-quiet, .bridge .link-quiet { color: var(--accent-lift); }
.section--dark .link-quiet:hover, .bridge .link-quiet:hover { color: #fff; }

/* --- Navigation --------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  background: rgba(246,244,241,.94);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.brand__mark { width: 26px; height: 26px; flex: none; color: var(--accent); }
.brand__word { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.brand__word b { font-weight: 700; color: var(--accent); }

.nav__menu { display: flex; align-items: center; }
.nav__menu ul { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__item--has-panel { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; min-height: 44px;
  font-size: .9375rem; font-weight: 500; color: var(--ink); border-radius: 3px;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--accent); }
.nav__caret { width: 9px; height: 9px; opacity: .5; transition: transform .2s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 320px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 50px -26px rgba(20,24,29,.4); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__panel a { display: block; padding: 12px 14px; border-radius: 3px; font-size: .9375rem; font-weight: 500; }
.nav__panel a:hover { background: var(--ivory); color: var(--accent); }
.nav__panel a small { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted-deep); margin-top: 3px; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__actions .btn { padding: 12px 20px; min-height: 44px; }
.nav__cta { display: none; }

.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-right: -8px; background: none; border: 0; cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --- Visual: the photography slot --------------------------------------
   Large, dark, deliberate. A photograph and an engineering drawing occupy the
   same frame interchangeably: .visual__photo replaces .visual__art and touches
   nothing else. Where no photograph of a room type exists yet the drawing
   stays, on the charcoal ground, which reads as an intended visual rather than
   an empty frame. */

.visual {
  position: relative; background: var(--charcoal); border-radius: var(--radius);
  overflow: hidden; isolation: isolate;
}
.visual--wide { aspect-ratio: 16 / 9; }
.section--dark .visual { background: var(--charcoal-2); border: 1px solid var(--line-dark); }
.visual--tall { aspect-ratio: 4 / 3; }
/* A lead band sits directly under a page head, where the page previously
   opened on type alone. Wide and shallow so it introduces the subject without
   pushing the first section below the fold. */
.visual--band { aspect-ratio: 3 / 1; }
.visual__art { width: 100%; height: 100%; object-fit: cover; }
.photo { display: block; width: 100%; height: 100%; }
/* The photography is a mix of manufacturer and site sources with different
   grades. Saturation is trimmed a little so no single vendor's colour punch
   dominates the grid, and so the photographs sit down next to the ivory and
   graphite rather than shouting over them. */
.visual__photo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94);
}
.visual__tag {
  position: absolute; left: 22px; bottom: 18px; right: 22px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
}
.visual__tag span { font-weight: 400; letter-spacing: .1em; color: var(--muted-dark); }

/* Drawing primitives, on dark ground */
.dw__line   { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.dw__solid  { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.5; }
.dw__accent { fill: none; stroke: var(--accent-lift); stroke-width: 1.5; }
.dw__fill   { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.22); stroke-width: 1; }
.dw__ink    { fill: rgba(255,255,255,.9); }
.dw__acc    { fill: var(--accent-lift); }
.dw__label  {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; fill: var(--muted-dark);
}

/* --- Hero --------------------------------------------------------------- */

.hero { padding: calc(var(--nav-h) + 84px) 0 0; background: var(--ivory); }
.hero__copy { max-width: 900px; }
.hero__lede { font-size: 1.25rem; max-width: 58ch; }
.hero__signature { margin-top: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__visual { margin-top: 64px; }
.hero__visual .visual { aspect-ratio: 16 / 9; }

/* --- Spacing primitive --------------------------------------------------
   One rule, used where a block follows a composition inside the same section.
   Sections carry their own rhythm; this is the only in-section step. */

.stack { margin-top: 56px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* --- Cards -------------------------------------------------------------- */

.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px 32px;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease);
}
.section--paper .card { background: var(--ivory); }
.card:hover { border-color: var(--line-strong); }
.card__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); margin-bottom: 16px; }
.card__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.card__txt { font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.card__meta { font-size: .8125rem; color: var(--muted-deep); margin-top: 4px; margin-bottom: 10px; }
.card__list { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.card__list li { font-size: .9375rem; color: var(--muted); padding: 7px 0; }
.card__list li b { font-weight: 600; color: var(--ink); }
.card__list a { display: flex; align-items: center; min-height: 44px; margin: -7px 0; color: var(--accent); font-weight: 500; }
.card__list a:hover { color: var(--ink); }
.card__visual { margin: -30px -28px 22px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card__visual .visual { border-radius: 0; aspect-ratio: 16 / 10; }
.card__link { margin-top: auto; padding-top: 20px; }

/* A partner card is a link out to that vendor's own site. The card keeps its
   shape; only the name responds, so the grid does not turn into a wall of
   hover effects. The arrow is decorative -- the whole card is the target. */
.card--partner { position: relative; text-decoration: none; color: inherit; }
.card--partner .card__name { transition: color .2s var(--ease); }
.card--partner:hover .card__name,
.card--partner:focus-visible .card__name { color: var(--accent); }
.partner__out {
  position: absolute; top: 26px; right: 24px;
  font-size: .875rem; line-height: 1; color: var(--muted-deep);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.card--partner:hover .partner__out { color: var(--accent); transform: translate(2px, -2px); }

.card--dark { background: var(--charcoal-2); border-color: var(--line-dark); color: #fff; }
.card--dark .card__txt { color: var(--muted-dark); }
.card--dark .card__list { border-top-color: var(--line-dark); }
.card--dark .card__list li { color: var(--muted-dark); }
.card--dark:hover { border-color: var(--line-dark-2); }

/* --- Solution overview -------------------------------------------------- */

.solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.solution {
  position: relative; display: block;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 28px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.solution:hover { border-color: var(--accent); transform: translateY(-2px); }
.solution__icon { width: 46px; height: 46px; color: var(--accent); margin-bottom: 22px; }
.solution__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.solution__txt { font-size: .875rem; color: var(--muted-deep); margin-top: 6px; }

/* --- Room environments -------------------------------------------------- */

.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.room {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s var(--ease);
}
.room:hover { border-color: var(--line-strong); }
.room__visual .visual { border-radius: 0; aspect-ratio: 3 / 2; }
.room__body { padding: 22px 24px 26px; }
.room__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.room__name { font-size: 1.125rem; font-weight: 600; margin: 8px 0 6px; letter-spacing: -0.015em; }
.room__meta { font-size: .8125rem; color: var(--muted-deep); margin-bottom: 10px; }
.room__txt { font-size: .9375rem; color: var(--muted); line-height: 1.55; }

/* --- Media + copy composition ------------------------------------------- */

.compose { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: stretch; }
.compose--reverse .compose__media { order: -1; }
.compose__media { display: flex; }
.compose__media .visual { flex: 1; min-height: 440px; }
.compose__body { align-self: center; }
.compose__body .cards { margin-top: 32px; }

/* --- Duo: two columns of copy, or copy beside a form -------------------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* --- Phases ------------------------------------------------------------- */

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.phase {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px 36px; position: relative;
}
.phase--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.phase__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.phase--accent .phase__no { color: rgba(255,255,255,.75); }
.phase__name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 6px; }
.phase__role { font-size: .875rem; color: var(--muted-deep); }
.phase--accent .phase__role { color: rgba(255,255,255,.8); }
.phase__items { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.phase--accent .phase__items { border-top-color: rgba(255,255,255,.25); }
.phase__items li { font-size: .9375rem; color: var(--muted); padding: 7px 0; }
.phase--accent .phase__items li { color: rgba(255,255,255,.92); }

/* --- Technology ecosystem ----------------------------------------------- */

.eco { display: grid; gap: 20px; }
.eco__group {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 28px;
  display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: center;
}
.section--paper .eco__group { background: var(--ivory); }
.eco__cat { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.eco__role { font-size: .875rem; color: var(--muted-deep); margin-top: 4px; }
.marks { display: flex; flex-wrap: wrap; gap: 10px; }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 3px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  flex: 1 1 auto;
}
.section--paper .mark { background: var(--paper); }
.mark--soft { font-weight: 500; color: var(--muted); }

/* --- FortiqX bridge -------------------------------------------------------
   Not a card, and not a CTA. The block carries FortiqX's leading idea — six
   communication surfaces, one cryptographic core — using fortiqx.com's own
   diagram system: its .dg primitives (wire, node, mono label, blue core box),
   its dash-sweep packet, its lattice field, its blue, its IBM Plex Mono, its
   on-dark button. The whole section is FortiqX's visual identity, so its
   tokens are scoped here as --fx-* and cannot reach the rest of the site;
   equally, PhasedConnect's green never appears inside this band.

   What is adapted rather than copied: fortiqx.com's core diagram is static
   (role="img", packets on a loop, nothing responds), so the pick-a-surface
   interaction is built from its existing vocabulary — wire--live, node--live,
   the dash sweep — rather than from a new one. And its answer to narrow
   screens is `min-width: 760px` with a horizontal scroll affordance, which is
   ruled out here, so the composition is rebuilt for the width instead.
   ------------------------------------------------------------------------ */

.bridge {
  --fx-ink:       #0B0F14;
  --fx-panel:     #111821;
  --fx-blue:      #36648B;
  --fx-blue-lift: #7E9DBE;
  --fx-line:      rgba(148,163,184,.17);
  --fx-line-2:    rgba(148,163,184,.30);
  --fx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0;
  background: var(--fx-ink);
  color: #fff;
}

.bridge__field { position: absolute; inset: 0; z-index: -1; }
.bridge__lattice { width: 100%; height: 100%; display: block; }
.bridge__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* fortiqx.com's scrim recipe. Heavier than on their hero: the architecture
     has to sit clearly in front of the field rather than compete with it. */
  background:
    linear-gradient(to right, rgba(11,15,20,.90) 0%, rgba(11,15,20,.80) 50%, rgba(11,15,20,.62) 100%),
    linear-gradient(to top, rgba(11,15,20,.86) 0%, rgba(11,15,20,.30) 52%);
}

.lat__line   { stroke: rgba(126,157,190,.20); stroke-width: 1; fill: none; }
.lat__pt     { fill: rgba(126,157,190,.42); }
.lat__cell   { fill: rgba(54,100,139,.14); stroke: rgba(126,157,190,.34); stroke-width: 1; }
.lat__basis  { stroke: var(--fx-blue-lift); stroke-width: 1.4; fill: none; opacity: .85; }
.lat__origin { fill: var(--fx-blue-lift); }
.lat__walk {
  stroke: rgba(126,157,190,.9); stroke-width: 1.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 54 1400;
  animation: lat-walk 14s linear infinite;
}
.lat__walk.w0 { animation-delay: 0s;   }
.lat__walk.w1 { animation-delay: 4.6s; }
.lat__walk.w2 { animation-delay: 9.2s; }
@keyframes lat-walk { from { stroke-dashoffset: 1454; } to { stroke-dashoffset: 0; } }

/* --- Framing ------------------------------------------------------------- */

.bridge__head { position: relative; max-width: 760px; margin: 0 auto 40px; text-align: center; }
.bridge .eyebrow { color: rgba(255,255,255,.58); }
.bridge :focus-visible { outline-color: var(--fx-blue-lift); }
.bridge__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.bridge__copy { color: rgba(255,255,255,.7); margin: 22px auto 0; max-width: 62ch; font-size: 1rem; }

.bridge__close { position: relative; text-align: center; margin-top: 34px; }
.bridge__line { font-size: 1.25rem; line-height: 1.34; font-weight: 600; letter-spacing: -0.015em; max-width: 30ch; margin: 0 auto; }
.bridge__cta {
  margin-top: 26px;
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.26);
  border-radius: 2px;
}
.bridge__cta:hover { border-color: var(--fx-blue-lift); color: var(--fx-blue-lift); }
.bridge__note {
  position: relative; margin: 44px auto 0; padding-top: 22px; max-width: 62ch;
  border-top: 1px solid var(--fx-line);
  font-size: .875rem; color: rgba(255,255,255,.46); text-align: center;
}

/* --- The architecture ---------------------------------------------------- */

.arch { position: relative; }
.arch__svg { display: block; width: 100%; height: auto; }
.arch__svg--tall { display: none; }

.arch__wire { fill: none; stroke: var(--fx-line-2); stroke-width: 1; }
.arch__hit  { fill: transparent; }
.arch__label {
  font-family: var(--fx-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; fill: rgba(255,255,255,.66);
  transition: fill .3s var(--ease);
}
.arch__node { fill: var(--fx-blue-lift); opacity: .45; transition: opacity .3s var(--ease); }
.arch__surface.is-active .arch__label { fill: #fff; }
.arch__surface.is-active .arch__node { opacity: 1; }

/* Only the picked surface's wire is drawn in full. */
.arch__live {
  fill: none; stroke: var(--fx-blue-lift); stroke-width: 1.4;
  opacity: 0; transition: opacity .35s var(--ease);
}
.arch__live.is-active { opacity: 1; }

/* Idle traffic, on three of the six paths — the restraint fortiqx.com uses.
   It stands down as soon as a surface is picked so one path can be read alone. */
.arch__idle {
  fill: none; stroke: var(--fx-blue); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 4 100;
  animation: arch-idle 5.6s linear infinite;
  transition: opacity .4s var(--ease);
}
.arch__idle--0 { animation-delay: 0s;   }
.arch__idle--1 { animation-delay: 1.9s; }
.arch__idle--5 { animation-delay: 3.8s; }
.is-engaged .arch__idle { opacity: 0; }
@keyframes arch-idle { from { stroke-dashoffset: 104; } to { stroke-dashoffset: 0; } }

/* The packet a picked surface sends. Every wire carries pathLength="100", so
   one dash figure and one keyframe fit all twelve paths regardless of their
   real lengths — the outer curves are nearly three times the inner ones.
   It eases out, so the packet reads as arriving rather than passing through. */
.arch__packet {
  fill: none; stroke: var(--fx-blue-lift); stroke-width: 1.9; stroke-linecap: round;
  stroke-dasharray: 4 200; stroke-dashoffset: 204; opacity: 0;
}
.arch__packet.is-active { opacity: 1; animation: arch-packet .9s var(--ease) 1 both; }
@keyframes arch-packet { from { stroke-dashoffset: 204; } to { stroke-dashoffset: 100; } }

/* Six ports across the top edge of the core — the phone composition gives
   each surface its own arrival point rather than pinching all six into one,
   so a highlighted path stays followable the whole way down. The port lights
   when its packet lands, together with the core. */
.arch__port-dot { fill: var(--fx-blue-lift); opacity: .32; transition: opacity .35s var(--ease); }
.arch__port-ring { fill: none; stroke: var(--fx-blue-lift); stroke-width: 1; opacity: 0; transition: opacity .35s var(--ease); }
.arch__port.is-live .arch__port-dot { opacity: 1; }
.arch__port.is-live .arch__port-ring { opacity: .5; }

.arch__core-box {
  fill: rgba(17,24,33,.72); stroke: var(--fx-blue); stroke-width: 1.5;
  transition: stroke .45s var(--ease);
}
.arch__core.is-live .arch__core-box { stroke: var(--fx-blue-lift); }
.arch__core-edge {
  fill: none; stroke: var(--fx-blue-lift); stroke-width: 1; opacity: 0;
  transition: opacity .45s var(--ease);
}
.arch__core.is-live .arch__core-edge { opacity: .45; }
.arch__core-kicker {
  font-family: var(--fx-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--fx-blue-lift);
}
/* The mark keeps fill="currentColor" and follows its surroundings, which is
   the whole of its behaviour on fortiqx.com — here the surroundings are the
   core's state. The path itself is untouched. */
.arch__mark { color: var(--fx-blue-lift); transition: color .45s var(--ease); }
.arch__core.is-live .arch__mark { color: #fff; }
.arch__core-name { font-family: var(--sans); font-weight: 600; letter-spacing: .01em; fill: #fff; font-size: 21px; }
.arch__core-sub { font-family: var(--fx-mono); font-size: 9.5px; letter-spacing: .16em; fill: rgba(255,255,255,.55); }

/* Reduced motion: the field and the architecture stay, the movement goes. The
   site-wide rule only collapses animation duration, which would freeze every
   sweep at full extension — brighter at rest than in motion. Picking a surface
   still works; the core simply responds at once instead of on arrival. */
@media (prefers-reduced-motion: reduce) {
  .lat__walk, .arch__idle, .arch__packet, .hero__pulse, .pulse-line { display: none; }
}

/* --- Ambient line pulse — shared by the line drawings on dark ground. A faint travelling dash, the same device as the FortiqX
   bridge's idle traffic, kept to one or two wires so it reads as signal
   rather than noise. */
.pulse-line {
  fill: none; stroke: var(--accent-lift); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 4 100; opacity: .55;
  animation: pulse-line 5.2s linear infinite;
}
.pulse-line--b { animation-delay: 2.6s; }
@keyframes pulse-line { from { stroke-dashoffset: 104; } to { stroke-dashoffset: 0; } }

/* --- Hero: a one-shot draw-in for the camera sightlines on load, and a
   gentle breathing pulse on the camera point once drawn. Finite, not a loop
   fighting for attention the way the bridge's packets are allowed to. */
.hero__draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hero-draw 1s var(--ease) 1s forwards; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
.hero__pulse { opacity: 0; animation: hero-pulse 2.6s ease-in-out 2s infinite; }
@keyframes hero-pulse { 0% { opacity: 0; } 8%, 100% { opacity: 1; } 54% { opacity: .35; } }

/* --- Staged entrance — hero copy reveals line by line, then the diagram
   panel, before the diagram's own draw-in picks up (retimed above so the
   two sequences hand off rather than racing each other). One-shot: nothing
   here loops. */
.enter { opacity: 0; transform: translateY(14px); animation: enter .7s var(--ease) forwards; }
@keyframes enter { to { opacity: 1; transform: none; } }
.enter--1 { animation-delay: .05s; }
.enter--2 { animation-delay: .15s; }
.enter--3 { animation-delay: .25s; }
.enter--4 { animation-delay: .35s; }
.enter--5 { animation-delay: .45s; }
.enter--6 { animation-delay: .55s; }
.enter--7 { animation-delay: .7s; }

/* --- Lifecycle flow -------------------------------------------------------
   Decorative companion to the four phase cards below it: hovering or
   focusing a card lights its node and ring here. Same reciprocal,
   aria-hidden pattern as the capability wheel. */
.lifecycle { margin-bottom: 28px; }
.lifecycle__node { fill: var(--accent-lift); opacity: .5; transition: opacity .3s var(--ease); }
.lifecycle__node.is-active { opacity: 1; }
.lifecycle__ring { fill: none; stroke: var(--accent-lift); stroke-width: 1; opacity: 0; transition: opacity .35s var(--ease); }
.lifecycle__ring.is-active { opacity: .6; }
.phase.is-active { border-color: var(--accent); }
.phase--accent.is-active { border-color: #fff; }

/* --- Stats / assurance strip -------------------------------------------- */

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --- Forms -------------------------------------------------------------- */

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--muted-deep); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1.0625rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; width: 100%; min-height: 52px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .875rem; color: var(--muted-deep); }
.section--dark .form__note { color: var(--muted-dark); }

/* --- Page header -------------------------------------------------------- */

.page-head { padding: calc(var(--nav-h) + 76px) 0 64px; background: var(--ivory); border-bottom: 1px solid var(--line); }
.page-lead { padding: 0; margin-top: -1px; background: var(--ivory); }
.page-lead .visual { border-radius: 0; }

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

.footer { background: var(--charcoal); color: #fff; padding: 80px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer__brand .brand__mark { color: var(--accent-lift); }
.footer__brand .brand__word { color: #fff; }
.footer__brand .brand__word b { color: var(--accent-lift); }
.footer__blurb { font-size: .9375rem; color: var(--muted-dark); max-width: 40ch; line-height: 1.6; }
.footer__col h2 { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer__col li { margin-bottom: 4px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: .9375rem; color: var(--muted-dark); }
.footer__col a:hover { color: #fff; }
.footer__backers { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.footer__backers p { font-size: .8125rem; color: var(--muted-dark); margin-bottom: 12px; }
.footer__backers-marks { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__backers-marks img { height: 34px; width: auto; opacity: .85; }
.footer__bottom { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: .875rem; color: var(--muted-dark); }
.footer__legalnav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legalnav a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Reveal ------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   1024–1440
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --gutter: 36px; --section-y: 100px; }
  .compose { gap: 44px; }
  .bridge__grid { gap: 48px; }
  .eco__group { grid-template-columns: 200px 1fr; gap: 26px; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
}

@media (max-width: 1024px) {
  .arch__svg--wide { display: none; }
  .arch__svg--tall { display: block; max-width: 420px; margin: 0 auto; }
  .solutions { grid-template-columns: repeat(2, 1fr); }
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 40px; }
  .compose, .compose--reverse { grid-template-columns: 1fr; gap: 40px; }
  .compose--reverse .compose__media { order: 0; }
  .bridge__grid { grid-template-columns: 1fr; gap: 40px; }
  .strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile — laid out for the phone, not derived from the desktop grid
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --gutter: 22px;
    --section-y: 64px;
    --nav-h: 62px;
  }

  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Type: display caps at 44px, titles at 30px, nothing scales with vw. */
  .display { font-size: 2.75rem; line-height: 1.06; letter-spacing: -0.025em; }
  .display span { display: inline; }
  .title { font-size: 1.875rem; line-height: 1.18; }
  .title span { display: inline; }
  .lede, .hero__lede { font-size: 1.0625rem; margin-top: 18px; max-width: none; }
  .head { margin-bottom: 32px; }
  .head--split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .eyebrow { margin-bottom: 14px; }

  /* Everything is one column. */
  .cards, .cards--2, .cards--3, .cards--4,
  .solutions, .rooms, .phases, .strip, .form__row, .duo { grid-template-columns: 1fr; }
  .cards, .solutions, .rooms, .phases { gap: 14px; }

  .card { padding: 24px 20px 26px; }
  .card__visual { margin: -24px -20px 18px; }
  .solution { min-height: 0; padding: 22px 20px 24px; }
  .solution__icon { width: 40px; height: 40px; margin-bottom: 16px; }
  .phase { padding: 26px 20px 28px; }
  .room__body { padding: 20px; }

  .dw__label { font-size: 16px; }

  /* Images run the full width of the column. */
  .visual--wide { aspect-ratio: 16 / 10; }
  .visual--band { aspect-ratio: 16 / 10; }
  .compose__media .visual { aspect-ratio: 4 / 3; min-height: 0; }
  .visual__tag { left: 16px; right: 16px; bottom: 14px; font-size: .75rem; }

  /* Ecosystem: category above, marks two-up beneath. */
  .eco { gap: 14px; }
  .eco__group { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px 24px; align-items: start; }
  .marks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mark { padding: 0 12px; font-size: .875rem; text-align: center; }

  /* Hero and CTAs. */
  .hero { padding: calc(var(--nav-h) + 44px) 0 0; }
  .hero__visual { margin-top: 36px; }
  .hero__actions { margin-top: 26px; gap: 10px; }
  .hero__actions .btn, .cta-actions .btn { width: 100%; }
  .page-head { padding: calc(var(--nav-h) + 40px) 0 44px; }

  /* Phone: the lattice holds as a still field, its traversals stop. One less
     thing animating over the top of a scrolling page on a small screen. */
  .lat__walk { display: none; }
  .bridge__scrim { background: linear-gradient(to top, rgba(11,15,20,.90) 0%, rgba(11,15,20,.66) 100%); }
  /* The framing gives way so the architecture arrives early on a phone. */
  .bridge { padding: 60px 0; }
  .bridge__head { margin-bottom: 24px; }
  .bridge__title { font-size: 1.625rem; line-height: 1.14; }
  .bridge__copy { font-size: .9375rem; line-height: 1.5; margin-top: 16px; }
  .bridge .eyebrow { margin-bottom: 14px; }
  .bridge__close { margin-top: 26px; }
  .bridge__line { font-size: 1.125rem; }
  .bridge__cta { width: 100%; justify-content: center; margin-top: 20px; }
  .bridge__note { margin-top: 30px; padding-top: 18px; font-size: .8125rem; }

  .stack { margin-top: 32px; }

  .section--tight { padding: 56px 0; }

  /* Navigation drawer. */
  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; display: block;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 26px;
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__menu ul { display: block; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 1.0625rem; min-height: 56px; }
  .nav__panel {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: none; padding: 0 0 8px; min-width: 0;
  }
  .nav__panel.is-open { display: block; }
  .nav__panel a { padding: 12px 0 12px 16px; border-left: 2px solid var(--line); min-height: 48px; }
  .nav__actions .btn--ghost, .nav__actions .btn--solid { display: none; }
  .nav__cta { display: flex; width: 100%; margin-top: 20px; }

  /* Footer. */
  .footer { padding: 56px 0 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 32px; }
  .footer__col:first-child { grid-column: 1 / -1; }
  .footer__legalnav { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 400px) {
  .display { font-size: 2.375rem; }
  .title { font-size: 1.75rem; }
}

/* Below this the two-up mark grid starts breaking words. */
@media (max-width: 360px) {
  .marks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Round 2 — editorial system and motion
   --------------------------------------------------------------------------
   The portfolio's grammar, carried onto the screen: serif headlines, thin
   rules instead of boxes, tables instead of card walls, pill metadata. Motion
   is used to explain a mechanism — an estate being designed, delivered and
   operated; an incident going round the service loop; a lifecycle being
   walked — never as decoration on its own. Every animated drawing is
   aria-hidden and sits next to the real text it illustrates.
   ========================================================================== */

:root {
  --draw:        rgba(23,26,29,.30);   /* line drawing on ivory */
  --draw-soft:   rgba(23,26,29,.14);
  --draw-fill:   rgba(23,26,29,.035);
  --accent-wash: rgba(49,94,85,.12);
}

/* --- Chapter rule: every section head opens on a hairline that draws
   across as it arrives — the portfolio's table rule, in motion. ---------- */
.head::before, .chapter::before {
  content: ""; display: block; height: 1px; background: var(--line-strong);
  margin-bottom: 30px; transform-origin: left center;
}
.section--dark .head::before, .section--dark .chapter::before { background: var(--line-dark-2); }
.head.reveal::before, .chapter.reveal::before { transform: scaleX(0); transition: transform 1.2s var(--ease) .1s; }
.head.reveal.is-in::before, .chapter.reveal.is-in::before { transform: none; }
.head--split::before, .closing__grid::before { grid-column: 1 / -1; }
.head { max-width: none; }
.head:not(.head--split) > * { max-width: 860px; }

/* --- Staggered reveal: children arrive in sequence, not as one slab. ---- */
.reveal.stagger { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > :nth-child(2) { transition-delay: .08s; }
.stagger.is-in > :nth-child(3) { transition-delay: .16s; }
.stagger.is-in > :nth-child(4) { transition-delay: .24s; }
.stagger.is-in > :nth-child(5) { transition-delay: .32s; }
.stagger.is-in > :nth-child(6) { transition-delay: .40s; }
.stagger.is-in > :nth-child(7) { transition-delay: .48s; }
.stagger.is-in > :nth-child(8) { transition-delay: .56s; }
.stagger.is-in > :nth-child(9) { transition-delay: .64s; }

/* --- Draw-on-reveal: any path with pathLength="100" and .draw traces
   itself when its .reveal ancestor arrives. ------------------------------ */
.draw { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.is-in .draw { stroke-dashoffset: 0; }
.draw--late { transition-delay: .9s; }

/* --- Pills: the portfolio's metadata chips. ----------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 14px; line-height: 1.35;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.section--dark .pill { border-color: var(--line-dark-2); color: var(--muted-dark); }
.pill--status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash); animation: status-blink 2.4s ease-in-out infinite;
}
.section--dark .pill--status::before { background: var(--accent-lift); }
@keyframes status-blink { 50% { opacity: .35; } }

/* ==========================================================================
   Hero — the estate drawing
   ========================================================================== */

.hero--motion { padding: calc(var(--nav-h) + 72px) 0 0; position: relative; }
.display--hero { font-size: clamp(2.6rem, 6.08vw, 5.8rem); line-height: .98; letter-spacing: -0.035em; }
.display--hero span:last-child { color: var(--accent); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; margin-top: 52px; }
.hero__side .hero__lede { margin-top: 0; }
.hero__side .hero__actions { margin-top: 32px; }

.hero__stage { position: relative; }
.estate { display: block; width: 100%; height: auto; overflow: visible; }
.estate__site { fill: none; stroke: var(--draw); stroke-width: 1; }
.estate__site-label {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; fill: var(--muted-deep);
}
.estate__room { fill: var(--draw-fill); stroke: var(--ink); stroke-opacity: .55; stroke-width: 1;
  transition: fill .6s var(--ease), stroke .6s var(--ease), stroke-opacity .6s var(--ease); }
.estate__wall { fill: var(--ink); opacity: .82; }
.estate__bus { fill: none; stroke: var(--draw); stroke-width: 1; }
.estate__core { fill: var(--paper); stroke: var(--accent); stroke-width: 1.4; }
.estate__core-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--accent); }
.estate__led { fill: var(--accent); opacity: 0; transition: opacity .5s var(--ease); }
.estate__pulse { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 100; opacity: 0; }
.estate__ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* The sequence. Without JS (or with reduced motion) the drawing simply
   shows its operating state; .is-armed is what hides it for the build-up. */
.estate.is-armed .estate__room { stroke-dasharray: 100; stroke-dashoffset: 100; fill: transparent; }
.estate.is-armed .estate__bus, .estate.is-armed .estate__link { stroke-dasharray: 100; stroke-dashoffset: 100; }
.estate.is-armed .estate__wall, .estate.is-armed .estate__core, .estate.is-armed .estate__core-label { opacity: 0; transition: opacity .6s var(--ease); }

.estate.is-design .estate__room { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.estate.is-design .estate__room.r1 { transition-delay: 0s; }
.estate.is-design .estate__room.r2 { transition-delay: .12s; } .estate.is-design .estate__room.r3 { transition-delay: .24s; }
.estate.is-design .estate__room.r4 { transition-delay: .36s; } .estate.is-design .estate__room.r5 { transition-delay: .48s; }
.estate.is-design .estate__room.r6 { transition-delay: .60s; } .estate.is-design .estate__room.r7 { transition-delay: .72s; }
.estate.is-design .estate__room.r8 { transition-delay: .84s; } .estate.is-design .estate__room.r9 { transition-delay: .96s; }

.estate.is-deliver .estate__room { fill: var(--draw-fill); stroke-opacity: .55; }
.estate.is-deliver .estate__wall, .estate.is-deliver .estate__core, .estate.is-deliver .estate__core-label { opacity: 1; }
.estate.is-deliver .estate__wall { opacity: .82; }
.estate.is-deliver .estate__bus, .estate.is-deliver .estate__link { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .3s; }

.estate.is-operate .estate__led { opacity: 1; animation: led 3.2s ease-in-out infinite; }
.estate.is-operate .estate__led.r2, .estate.is-operate .estate__led.r6 { animation-delay: -1.1s; }
.estate.is-operate .estate__led.r3, .estate.is-operate .estate__led.r8 { animation-delay: -2.2s; }
@keyframes led { 50% { opacity: .3; } }
.estate.is-operate .estate__pulse { opacity: 1; animation: estate-pulse 3.6s linear infinite; }
.estate.is-operate .estate__pulse.p2 { animation-delay: -1.2s; }
.estate.is-operate .estate__pulse.p3 { animation-delay: -2.4s; }
@keyframes estate-pulse { from { stroke-dashoffset: 107; } to { stroke-dashoffset: 0; } }

/* Evolve: one room at a time is refreshed — re-drawn in the accent, with a
   ring that expands once and goes. The estate changes; the standard holds. */
.estate.is-deliver .estate__room.is-evolving { fill: rgba(49,94,85,.22); stroke: var(--accent); stroke-opacity: 1; stroke-width: 1.8; }
.estate__ring.is-evolving { animation: ring-out 1.6s var(--ease) 1 both; }
@keyframes ring-out { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* Phase ticker under the hero — real text, the drawing's legend. */
.cycle { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--line-strong); }
.cycle__step { position: relative; padding: 20px 24px 28px 0; }
.cycle__step::before {
  content: ""; position: absolute; left: 0; right: 24px; top: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
}
.cycle__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--muted-deep); }
.cycle__name { font-family: var(--serif); font-size: 1.625rem; letter-spacing: -0.02em; margin-top: 6px; color: var(--muted-deep); transition: color .5s var(--ease); }
.cycle__txt { font-size: .875rem; color: var(--muted-deep); margin-top: 4px; max-width: 30ch; }
.cycle__step.is-current .cycle__name { color: var(--ink); }
.cycle__step.is-current .cycle__no { color: var(--accent); }
.cycle__step.is-current::before { animation: cycle-bar var(--phase, 3s) linear forwards; }
.cycle__step.is-done::before { transform: none; opacity: .35; }
@keyframes cycle-bar { to { transform: none; } }
.cycle.is-static .cycle__name { color: var(--ink); }

/* ==========================================================================
   Three pillars — columns and a progression, not three boxes
   ========================================================================== */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillar { padding: 8px 40px 8px 0; }
.pillar + .pillar { padding-left: 40px; border-left: 1px solid var(--line); }
.pillar__no { font-family: var(--serif); font-size: 4.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--accent); font-weight: 300; }
.pillar__name { font-family: var(--serif); font-weight: 400; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.02em; margin-top: 22px; }
.pillar__role { font-size: .9375rem; color: var(--muted); margin-top: 12px; max-width: 34ch; }
.pillar__items { margin-top: 26px; }
.pillar__items li { font-size: .9375rem; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line); }
.pillar--core .pillar__items li { color: var(--ink); }

.progression { margin-top: 64px; }
.progression__svg { display: block; width: 100%; height: auto; }
.prog__line { fill: none; stroke: var(--draw); stroke-width: 1; }
.prog__line--acc { stroke: var(--accent); stroke-width: 1.5; }
.prog__node { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.prog__dot { fill: var(--accent); }
.prog__label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--ink); }
.prog__sub { font-family: var(--sans); font-size: 12px; fill: var(--muted-deep); }
.prog__note { font-size: .8125rem; color: var(--muted-deep); margin-top: 18px; }

/* ==========================================================================
   Capabilities — a typographic index beside a radial diagram
   ========================================================================== */

.cap { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: center; }
.cap__list { counter-reset: cap; border-bottom: 1px solid var(--line); }
.cap__item {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 18px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line); min-height: 44px;
  transition: padding .35s var(--ease), color .2s var(--ease);
}
.cap__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--muted-deep); }
.cap__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.018em; }
.cap__txt { grid-column: 2; font-size: .9375rem; color: var(--muted); }
.cap__arrow { grid-row: 1; grid-column: 3; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.cap__item:hover, .cap__item.is-active { padding-left: 14px; }
.cap__item:hover .cap__name, .cap__item.is-active .cap__name { color: var(--accent); }
.cap__item:hover .cap__no, .cap__item.is-active .cap__no { color: var(--accent); }
.cap__item:hover .cap__arrow, .cap__item.is-active .cap__arrow { opacity: 1; transform: none; }

.wheel { display: block; width: 100%; height: auto; max-width: 600px; margin-left: auto; overflow: visible; }
.wheel__orbit { fill: none; stroke: var(--draw-soft); stroke-width: 1; stroke-dasharray: 2 7; transform-box: view-box; transform-origin: 260px 260px; animation: orbit 90s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.wheel__ring { fill: none; stroke: var(--draw); stroke-width: 1; }
.wheel__spoke { fill: none; stroke: var(--draw-soft); stroke-width: 1; transition: stroke .3s var(--ease), stroke-width .3s var(--ease); }
.wheel__spoke.is-active { stroke: var(--accent); stroke-width: 1.6; }
.wheel__packet { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 200; stroke-dashoffset: 205; opacity: 0; }
.wheel__packet.is-active { opacity: 1; animation: wheel-packet .8s var(--ease) 1 both; }
@keyframes wheel-packet { from { stroke-dashoffset: 205; } to { stroke-dashoffset: 100; } }
.wheel__node { fill: var(--ivory); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.2; transition: fill .3s var(--ease), stroke .3s var(--ease), stroke-opacity .3s; }
.wheel__node.is-active { fill: var(--accent); stroke: var(--accent); stroke-opacity: 1; }
.wheel__label { font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; fill: var(--muted-deep); transition: fill .3s var(--ease); }
.wheel__label.is-active { fill: var(--ink); }
.wheel__core { fill: var(--paper); stroke: var(--accent); stroke-width: 1.4; }
.wheel__mark { color: var(--accent); }
.wheel__core-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--accent); }
.wheel__seq { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; fill: var(--muted-deep); }

/* ==========================================================================
   Statement — one sentence, lit word by word as it is read
   ========================================================================== */

.statement__text {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 1.22; letter-spacing: -0.02em; max-width: 26ch; color: var(--ink);
}
.statement__text em { font-style: normal; }
.statement__text .w { color: var(--line-strong); transition: color .35s var(--ease); }
.statement__text .w.is-lit { color: var(--ink); }
.statement__text .w.is-acc.is-lit { color: var(--accent); }
.statement__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin-top: 56px; max-width: 980px; }

/* ==========================================================================
   Columns and ledger — the two replacements for card grids
   ========================================================================== */

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--2 { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
.col { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.section--dark .col { border-top-color: var(--line-dark-2); }
.col__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.section--dark .col__no { color: var(--accent-lift); }
.col__name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.018em; margin: 12px 0 10px; }
.col__txt { font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.section--dark .col__txt { color: var(--muted-dark); }

.ledger { border-bottom: 1px solid var(--line); }
.ledger__row { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 24px 0; border-top: 1px solid var(--line); }
.ledger__name { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }
.ledger__meta { font-size: .8125rem; color: var(--muted-deep); margin-top: 6px; }
.ledger__txt { color: var(--muted); }
.ledger__row .pills { margin-top: 2px; }

/* Ecosystem rows lose their boxes and take the ledger's rule. */
.eco { gap: 0; border-bottom: 1px solid var(--line); }
.eco__group, .section--paper .eco__group { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0; grid-template-columns: 280px 1fr; }
.eco__cat { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.015em; }
.marks { gap: 8px; }
.mark, .section--paper .mark {
  flex: 0 0 auto; min-height: 38px; padding: 0 18px; border-radius: 999px;
  background: none; border-color: var(--line-strong); font-size: .875rem;
}
.mark--soft { border-style: dashed; }

/* Rooms: an editorial gallery — photograph and caption, no frame. */
.rooms { gap: 48px 28px; }
.room, .room:hover { background: none; border: 0; border-radius: 0; overflow: visible; }
.room__visual { border-radius: var(--radius); overflow: hidden; }
.room__visual .photo img, .room__visual .visual__photo { transition: transform 1.2s var(--ease); }
.room:hover .room__visual .visual__photo { transform: scale(1.035); }
.room__body { padding: 20px 0 0; border-top: 0; }
.room__name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.018em; }

/* ==========================================================================
   Managed Services — the service loop
   ========================================================================== */

.ms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.loop { display: block; width: 100%; height: auto; max-width: 600px; overflow: visible; }
.loop__ring { fill: none; stroke: var(--line-dark-2); stroke-width: 1; }
.loop__inner { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.loop__packet { fill: none; stroke: var(--accent-lift); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2.4 100; animation: loop-run 10s linear infinite; }
.loop__trail { fill: none; stroke: var(--accent-lift); stroke-width: 1.2; stroke-dasharray: 14 100; opacity: .35; animation: loop-run 10s linear infinite; animation-delay: .25s; }
@keyframes loop-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.loop__stn { fill: var(--charcoal); stroke: rgba(255,255,255,.4); stroke-width: 1.2; animation: stn 10s linear infinite; }
.loop__lbl { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--muted-dark); animation: stn-lbl 10s linear infinite; }
.loop__sub { font-family: var(--sans); font-size: 13.5px; fill: rgba(255,255,255,.45); }
.s1 { animation-delay: 0s; } .s2 { animation-delay: 2s; } .s3 { animation-delay: 4s; } .s4 { animation-delay: 6s; } .s5 { animation-delay: 8s; }
@keyframes stn { 0%, 14% { fill: var(--accent-lift); stroke: var(--accent-lift); } 22%, 100% { fill: var(--charcoal); stroke: rgba(255,255,255,.4); } }
@keyframes stn-lbl { 0%, 14% { fill: #fff; } 22%, 100% { fill: var(--muted-dark); } }
.loop__core { font-family: var(--serif); font-size: 26px; fill: #fff; letter-spacing: -0.01em; }
.loop__kicker { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; fill: var(--accent-lift); }

.steps { counter-reset: step; border-bottom: 1px solid var(--line-dark); }
.steps__item { display: grid; grid-template-columns: 52px 120px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.steps__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent-lift); }
.steps__name { font-family: var(--serif); font-size: 1.375rem; letter-spacing: -0.015em; }
.steps__txt { font-size: .9375rem; color: var(--muted-dark); }
.ms__outcome { margin-top: 26px; font-size: .9375rem; color: var(--muted-dark); }
.ms__outcome b { color: #fff; font-weight: 600; }

/* ==========================================================================
   Service Intelligence — module map (real text, laid out as a plan)
   ========================================================================== */

.si { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.si__body .pills { margin-top: 28px; }
.modules { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); background: var(--paper); }
.section--paper .modules { background: var(--ivory); }
.module { padding: 22px 22px 24px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); min-height: 128px; position: relative; transition: background .3s var(--ease); }
.module:hover { background: var(--accent-wash); }
.module__no { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--muted-deep); }
.module__name { font-family: var(--serif); font-size: 1.3125rem; letter-spacing: -0.015em; margin-top: 10px; }
.module__txt { font-size: .8125rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.module--core { background: var(--charcoal); color: #fff; }
.module--core:hover { background: var(--charcoal-2); }
.module--core .module__no { color: var(--accent-lift); }
.module--core .module__txt { color: var(--muted-dark); }
.modules__note { font-size: .8125rem; color: var(--muted-deep); margin-top: 16px; }

/* ==========================================================================
   Lifecycle flow — walked as the page is scrolled
   ========================================================================== */

.flow { position: relative; --p: 0; }
.flow__track { position: relative; height: 1px; background: var(--line-strong); margin: 0 0 0; }
.flow__fill { position: absolute; inset: -1px auto -1px 0; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p)); }
.flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.flow__step { position: relative; padding: 40px 32px 0 0; transition: opacity .4s var(--ease); }
.flow__dot {
  position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ivory); border: 1.5px solid var(--line-strong);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.section--paper .flow__dot { background: var(--paper); }
.flow__step.is-reached .flow__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-wash); }
.flow__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--muted-deep); }
.flow__step.is-reached .flow__no { color: var(--accent); }
.flow__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.03em; line-height: 1; margin-top: 10px; }
.flow__role { font-size: .9375rem; color: var(--ink); margin-top: 14px; max-width: 28ch; }
.flow__items { font-size: .875rem; color: var(--muted); margin-top: 14px; line-height: 1.7; max-width: 30ch; }
.flow__step.is-active .flow__name { color: var(--accent); }
.flow__return { display: block; width: 100%; height: 70px; margin-top: 36px; overflow: visible; }
.flow__return-path { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.flow.is-complete .flow__return-path { stroke-dashoffset: 0; }
.flow__return-label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); margin-top: 10px; text-align: center; opacity: 0; transition: opacity .6s var(--ease) 1s; }
.flow.is-complete .flow__return-label { opacity: 1; }

/* ==========================================================================
   Closing CTA — the last editorial moment before the footer
   ========================================================================== */

.closing { padding: 140px 0; background: var(--paper); }
.section--paper + .closing { background: var(--ivory); }
.closing__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 5.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.032em; max-width: 13ch; text-wrap: balance; }
.closing__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }

/* Page heads take the larger editorial scale too. */
.page-head .display { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }

/* Reduced motion: every drawing holds its finished, operating state. */
@media (prefers-reduced-motion: reduce) {
  .estate__pulse, .wheel__packet, .loop__packet, .loop__trail, .wheel__orbit { display: none; }
  .loop__stn, .loop__lbl, .estate__led, .pill--status::before { animation: none; }
  .stagger > * { opacity: 1; transform: none; }
  .draw, .flow__return-path { stroke-dashoffset: 0; }
  .head.reveal::before, .chapter.reveal::before { transform: none; }
  .flow__return-label { opacity: 1; }
}

@media (max-width: 1200px) {
  .cap { gap: 48px; }
  .ms__grid, .si { gap: 48px; }
  .pillar { padding-right: 28px; } .pillar + .pillar { padding-left: 28px; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__stage { max-width: 720px; }
  .cap { grid-template-columns: 1fr; }
  .wheel { margin: 0 auto; max-width: 440px; }
  .ms__grid, .si { grid-template-columns: 1fr; }
  .loop { margin: 0 auto; max-width: 440px; }
  .cols--4 { grid-template-columns: repeat(2, 1fr); }
  .closing__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .hero--motion { padding: calc(var(--nav-h) + 40px) 0 0; }
  .display--hero { font-size: 2.6rem; line-height: 1.02; }
  .display--hero span { display: block; }
  .hero__grid { margin-top: 28px; gap: 32px; }
  .cycle { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .cycle__step { padding: 16px 12px 20px 0; }
  .cycle__step::before { right: 12px; }
  .cycle__name { font-size: 1.375rem; }
  .cycle__txt { display: none; }

  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 32px 0 0; border-left: 0; }
  .pillar + .pillar { margin-top: 32px; border-top: 1px solid var(--line-strong); }
  .pillar__no { font-size: 3.5rem; }
  .pillar__name { font-size: 1.625rem; margin-top: 14px; }
  .progression { display: none; }
  .prog__note { margin-top: 32px; }

  .wheel { display: none; }
  .cap__item { grid-template-columns: 38px 1fr; padding: 18px 0; }
  .cap__arrow { display: none; }
  .cap__name { font-size: 1.3125rem; }

  .statement__text { font-size: 1.75rem; }
  .statement__cols { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }

  .cols, .cols--4 { grid-template-columns: 1fr; gap: 28px; }
  .ledger__row, .eco__group, .section--paper .eco__group { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .rooms { gap: 36px; }

  .loop { max-width: 340px; }
  .loop__sub { display: none; }
  .steps__item { grid-template-columns: 40px 1fr; gap: 4px 12px; }
  .steps__txt { grid-column: 2; }
  .modules { grid-template-columns: 1fr 1fr; }
  .module { padding: 16px 14px 18px; min-height: 0; }
  .module__name { font-size: 1.125rem; }

  .flow__track { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow__fill { inset: 0 -1px auto -1px; width: auto; height: 100%; transform: scaleY(var(--p)); transform-origin: top center; }
  .flow__steps { grid-template-columns: 1fr; }
  .flow__step { padding: 0 0 36px 40px; }
  .flow__dot { top: 4px; left: 0; }
  .flow__name { font-size: 2rem; }
  .flow__return { display: none; }

  .closing { padding: 80px 0; }
  .closing__title { font-size: 2.75rem; }
}

/* ==========================================================================
   Round 3
   ========================================================================== */

/* --- Navigation: where you are ------------------------------------------ */
.nav__link.is-current { color: var(--accent); }
.nav__link.is-current::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--accent);
}
.nav__link { position: relative; }
.nav__panel a[aria-current="page"] { color: var(--accent); background: var(--ivory); }
@media (max-width: 768px) { .nav__link.is-current::after { display: none; } }

/* --- Doors: the pillar strip that closes every service page ------------- */
.doors { padding: 72px 0; }
.doors__list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.door {
  position: relative; display: grid; gap: 6px; align-content: start; height: 100%;
  padding: 26px 28px 30px 0; min-height: 44px; color: var(--ink);
}
.doors__list li + li .door { padding-left: 28px; border-left: 1px solid var(--line); }
.door__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--muted-deep); }
.door__name { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.018em; line-height: 1.15; transition: color .2s var(--ease); }
.door__txt { font-size: .875rem; color: var(--muted); }
.door__arrow { position: absolute; top: 26px; right: 24px; color: var(--accent); transition: transform .25s var(--ease); }
a.door:hover .door__name, a.door:focus-visible .door__name { color: var(--accent); }
a.door:hover .door__arrow { transform: translateX(4px); }
.door--here { box-shadow: inset 0 2px 0 var(--accent); }
.door--here .door__no { color: var(--accent); }
.door__here { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }

/* --- Five-step flow -------------------------------------------------------- */
.flow--5 .flow__steps { grid-template-columns: repeat(5, 1fr); }
.flow--5 .flow__step { padding-right: 24px; }
.flow--5 .flow__name { font-size: clamp(1.625rem, 2.2vw, 2.125rem); }
.flow__note { font-size: .8125rem; color: var(--muted-deep); margin-top: 36px; }

/* ==========================================================================
   Service Intelligence — the conceptual console
   --------------------------------------------------------------------------
   An interface composition, not a screenshot: every value in it is a demo
   label, every status a category, no figure anywhere. It is built from the
   portal's real module structure so the shape is true even though the
   content is not, and it says so in its own frame at all times.
   ========================================================================== */

.console {
  /* Service Intelligence's own product palette: graphite pulled toward
     PhasedConnect's deep teal, so it reads as a product of its own while
     sitting inside the site rather than on top of it. No FortiqX blue. */
  --cx-bg: #0F1817; --cx-panel: #142120; --cx-raise: #1A2928;
  --cx-line: rgba(186,224,214,.08); --cx-line-2: rgba(186,224,214,.17);
  --cx-ok: #74B7A8; --cx-att: #D2A85A; --cx-mnt: #8FA3A0;
  position: relative; background: var(--cx-bg); color: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(17,23,24,.55), 0 0 0 1px rgba(17,23,24,.9);
  font-size: .875rem;
}
.console__bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--cx-line); background: var(--cx-panel);
}
.console__product { display: flex; align-items: center; gap: 12px; line-height: 1.15; }
.console__wordmark { display: grid; }
.console__glyph { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--cx-ok); stroke-width: 1.4; overflow: visible; }
.console__glyph-core { fill: var(--cx-ok); stroke: none; transform-box: fill-box; transform-origin: center; animation: glyph-core 3.6s ease-in-out infinite; }
.console__glyph-node { fill: var(--cx-bg); }
@keyframes glyph-core { 50% { transform: scale(1.35); opacity: .75; } }
.console__kicker { font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); }
.console__name { font-family: var(--serif); font-size: 1.125rem; letter-spacing: -0.01em; }
.console__filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 12px; }
.console__filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px;
  border: 1px solid var(--cx-line-2); border-radius: 6px; font-size: .75rem; color: rgba(255,255,255,.72);
}
.console__filter::after { content: ""; width: 5px; height: 5px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.console__badge {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border: 1px dashed rgba(210,168,90,.7); border-radius: 999px; color: var(--cx-att);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.console__body { display: grid; grid-template-columns: 210px 1fr; min-height: 500px; }
.console__nav { border-right: 1px solid var(--cx-line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: var(--cx-panel); }
.console__tab {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; text-align: left;
  min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: rgba(255,255,255,.62); font-size: .8125rem; position: relative;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.console__tab span { font-size: .6875rem; letter-spacing: .1em; color: rgba(255,255,255,.35); }
.console__tab:hover { background: rgba(255,255,255,.04); color: #fff; }
.console__tab[aria-selected="true"] { background: rgba(255,255,255,.07); color: #fff; }
.console__tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--cx-ok); }
.console__tab[aria-selected="true"] span { color: var(--cx-ok); }
.console__tab:focus-visible { outline: 2px solid var(--cx-ok); outline-offset: -2px; }
.console__progress { height: 2px; background: var(--cx-line); margin: 10px 12px 0; border-radius: 2px; overflow: hidden; }
.console__progress i { display: block; height: 100%; width: 100%; background: var(--cx-ok); transform: scaleX(0); transform-origin: left; }
.console.is-touring .console__progress i { animation: cx-tour var(--tour, 6s) linear forwards; }
@keyframes cx-tour { to { transform: none; } }

.console__main { padding: 26px 28px 30px; min-width: 0; position: relative; }
.cx-panel[hidden] { display: none; }
.cx-panel > * { opacity: 0; transform: translateY(8px); }
.cx-panel.is-shown > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.cx-panel.is-shown > :nth-child(2) { transition-delay: .08s; }
.cx-panel.is-shown > :nth-child(3) { transition-delay: .16s; }
.cx-panel.is-shown > :nth-child(4) { transition-delay: .24s; }
.cx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cx-title { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.015em; }
.cx-sub { color: var(--muted-dark); font-size: .8125rem; }
.cx-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .75rem; color: var(--muted-dark); }
.cx-legend li { display: inline-flex; align-items: center; gap: 6px; }

.cx-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.cx-dot--ok { background: var(--cx-ok); }
.cx-dot--att { background: var(--cx-att); }
.cx-dot--mnt { background: transparent; border: 1.5px solid var(--cx-mnt); }
.cx-dot--plan { background: transparent; border: 1.5px dashed rgba(255,255,255,.4); }

.cx-sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cx-site { background: var(--cx-panel); border: 1px solid var(--cx-line); border-radius: 8px; padding: 16px 16px 18px; }
.cx-site__name { font-weight: 600; font-size: .875rem; }
.cx-site__meta { color: var(--muted-dark); font-size: .75rem; margin-top: 2px; }
.cx-rooms { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; }
.cx-room { aspect-ratio: 1; border-radius: 3px; background: rgba(107,168,156,.22); border: 1px solid rgba(107,168,156,.45); }
.cx-room--att { background: rgba(210,168,90,.24); border-color: rgba(210,168,90,.7); animation: cx-att 2.4s ease-in-out infinite; }
.cx-room--mnt { background: transparent; border: 1px solid var(--cx-mnt); }
.cx-room--plan { background: transparent; border: 1px dashed rgba(255,255,255,.3); }
@keyframes cx-att { 50% { background: rgba(210,168,90,.5); } }

.cx-strip { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 14px; }
.cx-card { background: var(--cx-panel); border: 1px solid var(--cx-line); border-radius: 8px; padding: 16px 18px; min-width: 0; }
.cx-card__title { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.cx-spark { display: block; width: 100%; height: 72px; margin-top: 10px; overflow: visible; }
.cx-spark__grid { stroke: var(--cx-line); stroke-width: 1; fill: none; }
.cx-spark__line { fill: none; stroke: var(--cx-ok); stroke-width: 1.8; stroke-dasharray: 100; stroke-dashoffset: 100; }
.cx-spark__area { fill: rgba(107,168,156,.12); opacity: 0; }
.is-shown .cx-spark__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.is-shown .cx-spark__area { opacity: 1; transition: opacity 1s var(--ease) 1.2s; }
.cx-feed { display: grid; gap: 10px; margin-top: 12px; }
.cx-feed li { display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: baseline; font-size: .8125rem; color: rgba(255,255,255,.8); }
.cx-feed small { display: block; color: var(--muted-dark); font-size: .75rem; }

.cx-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cx-table th { text-align: left; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); padding: 0 12px 10px 0; border-bottom: 1px solid var(--cx-line-2); }
.cx-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--cx-line); color: rgba(255,255,255,.82); vertical-align: middle; }
.cx-table td:first-child { color: #fff; font-weight: 600; }
.cx-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; color: rgba(255,255,255,.78); white-space: nowrap; }
.cx-scroll { overflow-x: auto; }

.cx-incident { background: var(--cx-panel); border: 1px solid var(--cx-line); border-radius: 8px; padding: 18px 20px 22px; }
.cx-incident__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-incident__id { font-size: .75rem; letter-spacing: .1em; color: var(--muted-dark); }
.cx-incident__name { font-weight: 600; margin-top: 4px; }
.cx-stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 26px; position: relative; }
.cx-stepper::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--cx-line-2); }
.cx-stepper::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--cx-ok);
  transform: scaleX(0); transform-origin: left;
}
.is-shown .cx-stepper::after { animation: cx-steps 4.4s var(--ease) .4s forwards; }
@keyframes cx-steps { to { transform: scaleX(1); } }
.cx-step { position: relative; padding-top: 24px; padding-right: 10px; }
.cx-step::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--cx-bg); border: 1.5px solid var(--cx-line-2); }
.is-shown .cx-step::before { animation: cx-step-on .4s var(--ease) forwards; }
.is-shown .cx-step:nth-child(1)::before { animation-delay: .4s; }
.is-shown .cx-step:nth-child(2)::before { animation-delay: 1.5s; }
.is-shown .cx-step:nth-child(3)::before { animation-delay: 2.6s; }
.is-shown .cx-step:nth-child(4)::before { animation-delay: 3.7s; }
.is-shown .cx-step:nth-child(5)::before { animation-delay: 4.8s; }
@keyframes cx-step-on { to { background: var(--cx-ok); border-color: var(--cx-ok); box-shadow: 0 0 0 5px rgba(107,168,156,.16); } }
.cx-step b { display: block; font-size: .8125rem; }
.cx-step small { display: block; color: var(--muted-dark); font-size: .75rem; margin-top: 2px; }
.cx-note { margin-top: 16px; font-size: .75rem; color: var(--muted-dark); }

.cx-levels { display: grid; gap: 16px; }
.cx-level { display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; align-items: center; }
.cx-level__name { font-weight: 600; font-size: .8125rem; }
.cx-level__bar {
  height: 34px; border: 1px dashed var(--cx-line-2); border-radius: 6px;
  display: flex; align-items: center; padding: 0 12px; position: relative; overflow: hidden;
}
.cx-level__bar::after { content: "Aligned with customer requirements"; font-size: .75rem; color: rgba(255,255,255,.4); }
/* A slow sweep marks the field as live without implying any result. */
.cx-level__bar i { position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(107,168,156,.12), transparent); transform: translateX(-100%); }
.is-shown .cx-level__bar i { animation: cx-sweep 3.2s var(--ease) .4s 2; }
@keyframes cx-sweep { to { transform: translateX(360%); } }
.cx-level__tag { font-size: .75rem; color: var(--muted-dark); }

.cx-report { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-doc { background: #F3F1EC; color: var(--ink); border-radius: 6px; padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.cx-doc__title { font-family: var(--serif); font-size: 1.125rem; }
.cx-doc__line { height: 6px; border-radius: 3px; background: rgba(23,26,29,.1); }
.cx-doc__line--s { width: 62%; } .cx-doc__line--m { width: 80%; }
.cx-doc__rule { height: 1px; background: rgba(23,26,29,.15); margin: 4px 0; }

.cx-list { display: grid; gap: 8px; }
.cx-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--cx-panel); border: 1px solid var(--cx-line); border-radius: 6px; font-size: .8125rem; }
.cx-list small { color: var(--muted-dark); font-size: .75rem; display: block; }

.console__foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--cx-line); background: var(--cx-panel);
  font-size: .75rem; color: var(--muted-dark);
}

.si-legend { display: grid; gap: 14px; margin-top: 28px; }
.si-legend li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; font-size: .9375rem; color: var(--muted); }
.si-legend b { color: var(--ink); font-weight: 600; }
.si-status { width: 10px; height: 10px; border-radius: 50%; display: inline-block; transform: translateY(1px); }
.si-status--working { background: var(--accent); }
.si-status--scope { border: 1.5px dashed var(--accent); }
.module__status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.module--core .module__status { color: var(--accent-lift); }
.module__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .cx-panel > * { opacity: 1; transform: none; }
  .cx-room--att { animation: none; }
  .cx-spark__line { stroke-dashoffset: 0; } .cx-spark__area { opacity: 1; }
  .cx-stepper::after { transform: none; }
  .cx-step::before { background: var(--cx-ok); border-color: var(--cx-ok); }
  .cx-level__bar i { display: none; }
}

@media (max-width: 1024px) {
  .doors__list { grid-template-columns: 1fr 1fr; }
  .doors__list li:nth-child(3) .door { padding-left: 0; border-left: 0; }
  .doors__list li:nth-child(n+3) .door { border-top: 1px solid var(--line); }
  .flow--5 .flow__steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .console__body { grid-template-columns: 1fr; min-height: 0; }
  .console__nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cx-line); padding: 8px; gap: 4px; }
  .console__tab { flex: none; grid-template-columns: auto auto; gap: 8px; }
  .console__tab[aria-selected="true"]::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px; }
  .console__progress { display: none; }
}

@media (max-width: 768px) {
  .doors__list { grid-template-columns: 1fr; }
  .doors__list li + li .door { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .flow--5 .flow__steps { grid-template-columns: 1fr; }
  .console { border-radius: 8px; }
  .console__filters { display: none; }
  .console__badge { margin-left: 0; }
  .console__main { padding: 20px 16px 22px; }
  .cx-sites { grid-template-columns: 1fr; }
  .cx-strip, .cx-report { grid-template-columns: 1fr; }
  .cx-level { grid-template-columns: 1fr; gap: 6px; }
  .cx-stepper { grid-template-columns: 1fr; gap: 14px; }
  .cx-stepper::before, .cx-stepper::after { display: none; }
  .cx-step { padding: 0 0 0 26px; }
  .estate__site-label { font-size: 16px; }
  .estate__core-label { font-size: 14px; }
}

/* Homepage: the FortiqX introduction strip, and the contact close that
   shares the partnership section rather than standing alone. */
.bridge--compact { padding: 72px 0; }
.bridge__row { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; position: relative; }
.bridge--compact .bridge__title { max-width: 22ch; }
.bridge--compact .bridge__copy { margin: 18px 0 0; text-align: left; }
.bridge--compact .bridge__cta { margin-top: 0; }
.head__links { display: grid; justify-items: end; gap: 4px; }
.closing__grid--inline { margin-top: 112px; }
@media (max-width: 768px) {
  .bridge--compact { padding: 56px 0; }
  .bridge__row { grid-template-columns: 1fr; gap: 24px; }
  .head__links { justify-items: start; }
  .closing__grid--inline { margin-top: 72px; }
}
.stack-sm { display: grid; gap: 20px; align-content: start; }
.flow--4 .flow__steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .flow--4 .flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .flow--4 .flow__steps { grid-template-columns: 1fr; } }

/* Preview builds only: a held page says so before anything else. */
.held {
  position: relative; z-index: 5; margin: var(--nav-h) 0 0; padding: 12px var(--gutter);
  background: #F3E7CF; color: #5A3E12; font-size: .875rem; text-align: center;
}
.held + .page-head { padding-top: 64px; }

/* Product reveal: the console rises and settles flat as it scrolls into
   place. --lift (0..1) is set by script; without it the console simply sits
   flat, which is also what reduced motion gets. */
[data-lift] {
  --lift: 1;
  transform: perspective(1800px) rotateX(calc((1 - var(--lift)) * 9deg)) scale(calc(.95 + var(--lift) * .05));
  transform-origin: 50% 0;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { [data-lift] { transform: none; } }
@media (max-width: 768px) { [data-lift] { transform: none; } }
@media (prefers-reduced-motion: reduce) { .console__glyph-core { animation: none; } }

/* ==========================================================================
   Round 4 — Service Intelligence product page
   ========================================================================== */

.product-head {
  --ph-bg: #0F1817;
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--nav-h) + 76px) 0 0; background: var(--ph-bg); color: #fff;
}
/* A faint teal glow behind the console, the only gradient on the site. */
.product-head::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(116,183,168,.16), rgba(116,183,168,0));
}
.product-head::after {
  content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 150px; background: var(--ivory);
}
.product-head__copy { max-width: 1160px; }
.product-head__brand { display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9FD0C4; }
.product-head__glyph { width: 30px; height: 30px; fill: none; stroke: #74B7A8; stroke-width: 1.4; overflow: visible; }
.product-head__glyph .console__glyph-core { fill: #74B7A8; }
.product-head__node { fill: var(--ph-bg); }
.product-head__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.375rem, 4.1vw, 3.75rem);
  line-height: 1.06; letter-spacing: -0.03em; margin-top: 28px;
}
.product-head__title span { display: block; }
.product-head__title span:last-child { color: #9FD0C4; }
.product-head__lede { font-size: 1.1875rem; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 58ch; margin-top: 26px; }
.product-head .hero__actions { margin-top: 34px; }
.product-head__ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.product-head__ghost:hover { border-color: #9FD0C4; color: #9FD0C4; }
.product-head__stage { margin-top: 72px; }
.product-head :focus-visible { outline-color: #9FD0C4; }
.product-head + .section { padding-top: 96px; }
.product-head .console { box-shadow: 0 60px 120px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(186,224,214,.12); }

.values { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-strong); }
.value { padding: 26px 24px 8px 0; }
.value + .value { padding-left: 24px; border-left: 1px solid var(--line); }
.value__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.value__name { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; margin-top: 14px; }
.value__txt { font-size: .9375rem; color: var(--muted); margin-top: 12px; }

.opmodel { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
.layers { display: block; width: 100%; height: auto; overflow: visible; }
.layers__band { fill: var(--ivory); stroke: var(--line-strong); stroke-width: 1; }
.layers__band--core { fill: #0F1817; stroke: #0F1817; }
.layers__name { font-family: var(--serif); font-size: 24px; fill: var(--ink); letter-spacing: -0.01em; }
.layers__name--core { fill: #fff; }
.layers__sub { font-family: var(--sans); font-size: 14px; fill: var(--muted); }
.layers__sub--core { fill: #9FD0C4; }
.layers__link { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.layers__pulse { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 100; animation: layer-pulse 2.8s linear infinite; }
.layers__pulse--b { animation-delay: 1.4s; }
@keyframes layer-pulse { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
.layers__tag { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--accent); }

@media (prefers-reduced-motion: reduce) { .layers__pulse { display: none; } }
@media (max-width: 1200px) {
  .values { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .value:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1024px) {
  .opmodel { grid-template-columns: 1fr; gap: 48px; }
  .layers { max-width: 560px; }
}
@media (max-width: 768px) {
  .product-head { padding-top: calc(var(--nav-h) + 40px); }
  .product-head__title { font-size: 2.125rem; }
  .product-head__title span { display: inline; }
  .product-head__lede { font-size: 1.0625rem; }
  .product-head__stage { margin-top: 44px; }
  .product-head::after { height: 80px; }
  .values { grid-template-columns: 1fr; }
  .value, .value + .value { padding: 20px 0; border-left: 0; }
  .value + .value { border-top: 1px solid var(--line); }
}

/* --- Managed Services: the methodology as a scroll story ---------------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.story__stage { position: sticky; top: calc(50vh - 250px + var(--nav-h) / 2); }
.story__steps { display: grid; }
.story__step { min-height: 46vh; display: grid; align-content: center; padding: 24px 0; border-top: 1px solid var(--line-dark); opacity: .32; transition: opacity .5s var(--ease); }
.story__step:last-child { border-bottom: 1px solid var(--line-dark); }
.story__step.is-active { opacity: 1; }
.story__no { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--accent-lift); }
.story__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 3.6vw, 3.25rem); letter-spacing: -0.03em; line-height: 1; margin-top: 12px; }
.story__txt { color: var(--muted-dark); font-size: 1.0625rem; max-width: 40ch; margin-top: 16px; }

/* Driven by scroll: the timers stop, the packet travels to the station of
   the step in view, and that station and its label light. */
.story.is-driven .loop__stn, .story.is-driven .loop__lbl { animation: none; }
.story.is-driven .loop__trail { display: none; }
.story.is-driven .loop__packet { animation: none; stroke-dasharray: 3 100; stroke-width: 3.2; transition: stroke-dashoffset 1s var(--ease); }
.story.is-driven .loop__stn { transition: fill .4s var(--ease), stroke .4s var(--ease); }
.story.is-driven .loop__lbl { transition: fill .4s var(--ease); }
.story[data-active="0"] .loop__packet { stroke-dashoffset: 104.5; }
.story[data-active="1"] .loop__packet { stroke-dashoffset: 84.5; }
.story[data-active="2"] .loop__packet { stroke-dashoffset: 64.5; }
.story[data-active="3"] .loop__packet { stroke-dashoffset: 44.5; }
.story[data-active="4"] .loop__packet { stroke-dashoffset: 24.5; }
.story[data-active="0"] .loop__stn.s1, .story[data-active="1"] .loop__stn.s2, .story[data-active="2"] .loop__stn.s3,
.story[data-active="3"] .loop__stn.s4, .story[data-active="4"] .loop__stn.s5 { fill: var(--accent-lift); stroke: var(--accent-lift); }
.story[data-active="0"] .loop__lbl.s1, .story[data-active="1"] .loop__lbl.s2, .story[data-active="2"] .loop__lbl.s3,
.story[data-active="3"] .loop__lbl.s4, .story[data-active="4"] .loop__lbl.s5 { fill: #fff; }
.stack-xs { margin-top: 14px; margin-bottom: 18px; }

@media (max-width: 1024px) {
  .story { grid-template-columns: 1fr; gap: 32px; }
  .story__stage { position: static; }
  .story__stage .loop { margin: 0 auto; }
  .story__step { min-height: 0; opacity: 1; padding: 22px 0; }
  .story__name { font-size: 2rem; }
}

/* --- Homepage pillars: the kind of commitment, drawn ------------------- */
.kind { display: block; width: 160px; height: 40px; overflow: visible; margin-bottom: 22px; }
.kind__node { fill: var(--accent); }
.kind__line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.kind__line--soft { stroke: var(--line-strong); stroke-dasharray: 2 5; }
.kind__end { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.kind__ring { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.kind__orbit { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 100; animation: kind-orbit 3.2s linear infinite; }
@keyframes kind-orbit { from { stroke-dashoffset: 118; } to { stroke-dashoffset: 0; } }
.kind__arc { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.kind__arc--next { stroke: var(--line-strong); stroke-dasharray: 3 5; }
.pillar__kind { font-size: .8125rem; color: var(--muted-deep); }
.pillar__kind b { display: inline-block; margin-right: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pillar__kind + .pillar__name { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .kind__orbit { animation: none; } }

/* The Service Intelligence section sits on the product's own ground. */
.section--si { background: #0F1817; color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.section--si::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -25%; width: 120%; height: 70%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(116,183,168,.14), rgba(116,183,168,0));
}
.section--si .head::before { background: rgba(186,224,214,.2); }
.section--si .eyebrow { color: #9FD0C4; }
.section--si .eyebrow__no { color: rgba(255,255,255,.45); }
.section--si .lede { color: rgba(255,255,255,.68); }
.section--si .title span:last-child { color: #9FD0C4; }
.section--si .head--split > div { max-width: 920px; }
.section--si .link-quiet { color: #9FD0C4; }
.section--si .link-quiet:hover { color: #fff; }
.section--si :focus-visible { outline-color: #9FD0C4; }
.section--si .console { box-shadow: 0 60px 120px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(186,224,214,.12); }

/* ==========================================================================
   Round 5 — one editorial system everywhere
   --------------------------------------------------------------------------
   The remaining card grids (solution pages, technology, 404) take the same
   ruled-column treatment as the rest of the site: a hairline above, serif
   name, no box. Cards that carry an image keep the image's own frame.
   ========================================================================== */
.cards { gap: 44px 36px; }
.card, .section--paper .card, .card--dark {
  background: none; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0;
  padding: 24px 0 0;
}
.card:hover, .card--dark:hover { border-color: var(--line-strong); }
.section--dark .card, .card--dark { border-top-color: var(--line-dark-2); }
.card__name { font-family: var(--serif); font-weight: 400; font-size: 1.4375rem; line-height: 1.15; letter-spacing: -0.015em; }
.card__no { margin-bottom: 12px; }
.card__visual { margin: 0 0 22px; border-radius: var(--radius); }
.card__visual .visual { border-radius: var(--radius); }
.card:has(.card__visual) { border-top: 0; padding-top: 0; }
.card--partner { padding-right: 28px; }
.partner__out { top: 24px; right: 0; }
.card__list { border-top-color: var(--line); }
@media (max-width: 768px) {
  .cards { gap: 32px; }
  .card { padding: 20px 0 0; }
  .card__visual { margin: 0 0 18px; }
}

/* Every page head arrives the way the homepage hero does: eyebrow, then the
   headline line by line, then the lede and its pills. One-shot, CSS only. */
.page-head .eyebrow, .page-head .display span, .page-head .lede, .page-head .pills {
  opacity: 0; transform: translateY(14px); animation: enter .8s var(--ease) forwards;
}
.page-head .eyebrow { animation-delay: .05s; }
.page-head .display span:nth-child(1) { animation-delay: .15s; }
.page-head .display span:nth-child(2) { animation-delay: .27s; }
.page-head .lede { animation-delay: .42s; }
.page-head .pills { animation-delay: .55s; }
.page-lead .visual { animation: lead-in 1.2s var(--ease) .35s both; }
@keyframes lead-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }