/* ==========================================================================
   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 is the primary voice, because the content is technical. Serif appears
   at four editorial moments and nowhere 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); }

/* Serif appears here and at three other places on the whole site. */
.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-size: clamp(1.75rem, 2.7vw, 2.375rem);
  line-height: 1.14; letter-spacing: -0.02em; font-weight: 600;
}
.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. Until installation photography exists an
   engineering drawing sits on the charcoal ground at full scale, which reads
   as an intended visual rather than an empty frame. Swapping in a photograph
   replaces .visual__art and touches nothing else. */

.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; }
.visual__art { width: 100%; height: 100%; object-fit: cover; }
.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__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; }

.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 { display: none; }
}

/* --- 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); }

/* --- 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; }
  .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; }
}